From b013a814f8b6d1bdbc312780f4a0029751101f4c Mon Sep 17 00:00:00 2001 From: Rodrigo De la Rivera Date: Wed, 11 Oct 2023 18:48:28 +0200 Subject: [PATCH 1/5] build(prettier): updated prettier, tailwind plugin, and set it up to work --- .prettierrc.cjs | 3 +++ package-lock.json | 24 +++++++++++------------- package.json | 4 ++-- 3 files changed, 16 insertions(+), 15 deletions(-) diff --git a/.prettierrc.cjs b/.prettierrc.cjs index 67800e7c..565450ea 100644 --- a/.prettierrc.cjs +++ b/.prettierrc.cjs @@ -4,4 +4,7 @@ module.exports = { semi: true, singleQuote: false, printWidth: 100, + // tailwind pluging config + plugins: ["prettier-plugin-tailwindcss"], + tailwindConfig: "./tailwind.config.cjs", }; diff --git a/package-lock.json b/package-lock.json index dc2a1f61..5a7c483c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -60,8 +60,8 @@ "eslint-plugin-storybook": "0.6.13", "eslint-plugin-tsdoc": "0.2.17", "jsdom": "^22.1.0", - "prettier": "^3.0.0", - "prettier-plugin-tailwindcss": "0.3.0", + "prettier": "^3.0.3", + "prettier-plugin-tailwindcss": "0.5.5", "prop-types": "^15.8.1", "react": "^18.2.0", "react-dom": "^18.2.0", @@ -21608,9 +21608,9 @@ } }, "node_modules/prettier": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.0.0.tgz", - "integrity": "sha512-zBf5eHpwHOGPC47h0zrPyNn+eAEIdEzfywMoYn2XPi0P44Zp0tSq64rq0xAREh4auw2cJZHo9QUob+NqCQky4g==", + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.0.3.tgz", + "integrity": "sha512-L/4pUDMxcNa8R/EthV08Zt42WBO4h1rarVtK0K+QJG0X187OLo7l699jWw0GKuwzkPQ//jMFA/8Xm6Fh3J/DAg==", "dev": true, "bin": { "prettier": "bin/prettier.cjs" @@ -21635,12 +21635,12 @@ } }, "node_modules/prettier-plugin-tailwindcss": { - "version": "0.3.0", - "resolved": "https://registry.npmjs.org/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.3.0.tgz", - "integrity": "sha512-009/Xqdy7UmkcTBpwlq7jsViDqXAYSOMLDrHAdTMlVZOrKfM2o9Ci7EMWTMZ7SkKBFTG04UM9F9iM2+4i6boDA==", + "version": "0.5.5", + "resolved": "https://registry.npmjs.org/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.5.5.tgz", + "integrity": "sha512-voy0CjWv/CM8yeaduv5ZwovovpTGMR5LbzlhGF+LtEvMJt9wBeVTVnW781hL38R/RcDXCJwN2rolsgr94B/n0Q==", "dev": true, "engines": { - "node": ">=12.17.0" + "node": ">=14.21.3" }, "peerDependencies": { "@ianvs/prettier-plugin-sort-imports": "*", @@ -21648,17 +21648,15 @@ "@shopify/prettier-plugin-liquid": "*", "@shufo/prettier-plugin-blade": "*", "@trivago/prettier-plugin-sort-imports": "*", - "prettier": ">=2.2.0", + "prettier": "^3.0", "prettier-plugin-astro": "*", "prettier-plugin-css-order": "*", "prettier-plugin-import-sort": "*", "prettier-plugin-jsdoc": "*", - "prettier-plugin-marko": "*", "prettier-plugin-organize-attributes": "*", "prettier-plugin-organize-imports": "*", "prettier-plugin-style-order": "*", - "prettier-plugin-svelte": "*", - "prettier-plugin-twig-melody": "*" + "prettier-plugin-svelte": "*" }, "peerDependenciesMeta": { "@ianvs/prettier-plugin-sort-imports": { diff --git a/package.json b/package.json index 35d9f7ab..839c9b1e 100644 --- a/package.json +++ b/package.json @@ -90,8 +90,8 @@ "eslint-plugin-storybook": "0.6.13", "eslint-plugin-tsdoc": "0.2.17", "jsdom": "^22.1.0", - "prettier": "^3.0.0", - "prettier-plugin-tailwindcss": "0.3.0", + "prettier": "^3.0.3", + "prettier-plugin-tailwindcss": "0.5.5", "prop-types": "^15.8.1", "react": "^18.2.0", "react-dom": "^18.2.0", From c9884bbd38fac3684b3db8aba22fc39be17532e7 Mon Sep 17 00:00:00 2001 From: Rodrigo De la Rivera Date: Wed, 11 Oct 2023 18:19:56 +0200 Subject: [PATCH 2/5] feat(components): New Panel component --- src/components/index.ts | 3 +- src/components/panel/index.ts | 1 + src/components/panel/panel.stories.tsx | 44 ++++++++++++++++++++++++++ src/components/panel/panel.tsx | 13 ++++++++ 4 files changed, 60 insertions(+), 1 deletion(-) create mode 100644 src/components/panel/index.ts create mode 100644 src/components/panel/panel.stories.tsx create mode 100644 src/components/panel/panel.tsx diff --git a/src/components/index.ts b/src/components/index.ts index f60ec80a..a8ce2050 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -1,5 +1,4 @@ export { Alert, AlertIntent } from "./alert"; -export { InlineAlert } from "./inline-alert"; export { Avatar } from "./avatar"; export { Badge } from "./badge"; export { Button } from "./button"; @@ -8,9 +7,11 @@ export { Dialog } from "./dialog"; export { DividerLine } from "./divider-line"; export { FormField } from "./form-field"; export { IconButton } from "./icon-button"; +export { InlineAlert } from "./inline-alert"; export { LastChangedInfo } from "./last-changed-info"; export { Menu } from "./menu"; export { Page } from "./page"; +export { Panel } from "./panel"; export { Section } from "./section"; export { Sidebar } from "./sidebar"; export { SidebarContainer } from "./sidebar-container"; diff --git a/src/components/panel/index.ts b/src/components/panel/index.ts new file mode 100644 index 00000000..8628fc58 --- /dev/null +++ b/src/components/panel/index.ts @@ -0,0 +1 @@ +export { Panel } from "./panel"; diff --git a/src/components/panel/panel.stories.tsx b/src/components/panel/panel.stories.tsx new file mode 100644 index 00000000..9ddd2498 --- /dev/null +++ b/src/components/panel/panel.stories.tsx @@ -0,0 +1,44 @@ +import type { Meta, StoryObj } from "@storybook/react"; +import React from "react"; +import { Panel } from "./panel"; +import { Button } from "../button/button"; +import { getStoryDescription } from "../../util/storybook-utils"; +import { Toggle } from "../toggle"; + +const meta: Meta = { + title: "Panel", + parameters: { + ...getStoryDescription("Simple container used to group and organize elements in the UI."), + backgrounds: { + default: "light", + }, + }, + component: Panel, + args: { + className: "", + children: "Panel with text content", + }, +}; + +export default meta; +type Story = StoryObj; + +export const Default: Story = {}; + +const noop = () => undefined; +export const WithComponents: Story = { + args: { + children: ( + <> + + + +

Paragraph content

+ + ), + }, +}; diff --git a/src/components/panel/panel.tsx b/src/components/panel/panel.tsx new file mode 100644 index 00000000..dab3f337 --- /dev/null +++ b/src/components/panel/panel.tsx @@ -0,0 +1,13 @@ +import React, { FC, ReactNode } from "react"; +import { classNames } from "../../util/class-names"; + +interface PanelProps { + children: ReactNode; + className?: string; +} + +export const Panel: FC = ({ children, className }) => ( +
+ {children} +
+); From 07879955c0ab30ad521dc24536ccda90f7192392 Mon Sep 17 00:00:00 2001 From: Rodrigo De la Rivera Date: Wed, 11 Oct 2023 18:40:17 +0200 Subject: [PATCH 3/5] refactor(components): Set section.Panel as deprecated --- src/components/section/section-panel.tsx | 4 ++++ src/components/section/section.tsx | 3 +++ 2 files changed, 7 insertions(+) diff --git a/src/components/section/section-panel.tsx b/src/components/section/section-panel.tsx index 90402019..c024f23e 100644 --- a/src/components/section/section-panel.tsx +++ b/src/components/section/section-panel.tsx @@ -4,6 +4,10 @@ export interface SectionPanelProps { children: React.ReactNode; } +/** + * @deprecated Use the dedicated Panel component + * Delete me on version 3 + */ export const SectionPanel = ({ children }: SectionPanelProps) => { return (
diff --git a/src/components/section/section.tsx b/src/components/section/section.tsx index 48d8a8fd..82c8a38f 100644 --- a/src/components/section/section.tsx +++ b/src/components/section/section.tsx @@ -15,6 +15,9 @@ const Section = ({ children }: SectionProps) => { Section.TitleGroup = SectionTitleGroup; Section.Title = SectionTitle; Section.Description = SectionDescription; +/** + * @deprecated Use the dedicated Panel component + */ Section.Panel = SectionPanel; export { Section }; From 561bf0016df043315d3f676a6e6ae0ca00ac3bbf Mon Sep 17 00:00:00 2001 From: Rodrigo De la Rivera Date: Wed, 11 Oct 2023 19:18:38 +0200 Subject: [PATCH 4/5] fix(style): Fixes misaligned sorting per the new plugin --- src/components/dialog/dialog.stories.tsx | 4 ++-- .../form-field/single-combobox/single-combobox-input.tsx | 2 +- src/components/form-field/text-input/text-input.tsx | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/dialog/dialog.stories.tsx b/src/components/dialog/dialog.stories.tsx index ff292858..5428cbde 100644 --- a/src/components/dialog/dialog.stories.tsx +++ b/src/components/dialog/dialog.stories.tsx @@ -1,8 +1,8 @@ import type { Meta, StoryObj } from "@storybook/react"; import React, { useState } from "react"; -import { Dialog } from "./dialog"; import { getStoryDescription, hiddenArgControl } from "../../util/storybook-utils"; +import { Dialog } from "./dialog"; const SpanFooter = () => test footer 🍭; const footerOptions = { undefined, SpanFooter: }; @@ -39,7 +39,7 @@ const meta: Meta = { diff --git a/src/components/form-field/single-combobox/single-combobox-input.tsx b/src/components/form-field/single-combobox/single-combobox-input.tsx index 2ed89ee4..425f5d54 100644 --- a/src/components/form-field/single-combobox/single-combobox-input.tsx +++ b/src/components/form-field/single-combobox/single-combobox-input.tsx @@ -25,7 +25,7 @@ export const SingleComboboxInput = ({ placeholder={placeholder} displayValue={displayValue} onChange={onChange} - className="paragraph-100 flex h-8 w-full items-center rounded border border-neutral-400 py-2 pl-3 pr-8 focus-visible:border-primary-400 focus-visible:ring-2 focus-visible:ring-primary-200 disabled:bg-neutral-100 disabled:text-neutral-600 disabled:border-neutral-300" + className="paragraph-100 flex h-8 w-full items-center rounded border border-neutral-400 py-2 pl-3 pr-8 focus-visible:border-primary-400 focus-visible:ring-2 focus-visible:ring-primary-200 disabled:border-neutral-300 disabled:bg-neutral-100 disabled:text-neutral-600" /> {showButton ? ( diff --git a/src/components/form-field/text-input/text-input.tsx b/src/components/form-field/text-input/text-input.tsx index b5e2258f..b8a08f67 100644 --- a/src/components/form-field/text-input/text-input.tsx +++ b/src/components/form-field/text-input/text-input.tsx @@ -60,7 +60,7 @@ export const TextInput = ({
{LeftIcon ? (