From efec2d5c0814b99503ab8d3699e904b14578ac65 Mon Sep 17 00:00:00 2001 From: tlamen Date: Fri, 12 Apr 2024 15:36:21 -0300 Subject: [PATCH 1/4] :sparkles: added components to stories --- src/components/CheckBox/CheckBox.stories.ts | 19 ++++++++++++++++++- src/components/Popover/Popover.stories.tsx | 18 ++++++++++++++++++ .../RadioButton/RadioButton.stories.ts | 6 ++++++ src/components/Slider/Slider.stories.ts | 8 ++++++++ src/components/Spinner/spinner.stories.ts | 10 +++++++++- .../ToggleSwitch/ToggleSwitch.stories.ts | 10 +++++++++- src/components/Tooltip/Tooltip.stories.tsx | 7 +++++++ 7 files changed, 75 insertions(+), 3 deletions(-) diff --git a/src/components/CheckBox/CheckBox.stories.ts b/src/components/CheckBox/CheckBox.stories.ts index 41a13de..5858d41 100644 --- a/src/components/CheckBox/CheckBox.stories.ts +++ b/src/components/CheckBox/CheckBox.stories.ts @@ -7,6 +7,20 @@ const meta = { title: "Forms/CheckBox", component: CheckBox, tags: [], + argTypes: { + size: { + options: ["small", "medium", "large", null, undefined], + control: { type: "select" }, + }, + shape: { + options: ["circle", "square", null, undefined], + control: { type: "select" }, + }, + color: { + options: ["primary", "secondary", null, undefined], + control: { type: "select" }, + }, + }, } satisfies Meta; export default meta; @@ -15,7 +29,10 @@ type Story = StoryObj; // More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args export const Default: Story = { args: { - name: "teste", + size: "medium", + shape: "circle", disabled: false, + color: "primary", + name: "teste", }, }; diff --git a/src/components/Popover/Popover.stories.tsx b/src/components/Popover/Popover.stories.tsx index 12f770a..688af72 100644 --- a/src/components/Popover/Popover.stories.tsx +++ b/src/components/Popover/Popover.stories.tsx @@ -7,6 +7,23 @@ const meta = { title: "Overlay/Popover", component: Popover, tags: [], + argTypes: { + position: { + options: [ + "top", + "bottom", + "right", + "left", + "topRight", + "bottomRight", + "topLeft", + "bottomLeft", + null, + undefined, + ], + control: { type: "select" }, + }, + }, } satisfies Meta; export default meta; @@ -24,5 +41,6 @@ export const Default: Story = { ), button: "hello", + position: "bottomLeft", }, }; diff --git a/src/components/RadioButton/RadioButton.stories.ts b/src/components/RadioButton/RadioButton.stories.ts index f22dfec..1f149fc 100644 --- a/src/components/RadioButton/RadioButton.stories.ts +++ b/src/components/RadioButton/RadioButton.stories.ts @@ -7,6 +7,12 @@ const meta = { title: "Forms/RadioButton", component: RadioButton, tags: [], + argTypes: { + size: { + options: ["small", "medium", "large", null, undefined], + control: { type: "select" }, + }, + }, } satisfies Meta; export default meta; diff --git a/src/components/Slider/Slider.stories.ts b/src/components/Slider/Slider.stories.ts index 52498f1..eaf75fc 100644 --- a/src/components/Slider/Slider.stories.ts +++ b/src/components/Slider/Slider.stories.ts @@ -7,6 +7,12 @@ const meta = { title: "Forms/Slider", component: Slider, tags: [], + argTypes: { + size: { + options: ["small", "medium", "large", null, undefined], + control: { type: "select" }, + }, + }, } satisfies Meta; export default meta; @@ -17,5 +23,7 @@ export const Default: Story = { args: { min: 200, max: 400, + size: "medium", + step: 1, }, }; diff --git a/src/components/Spinner/spinner.stories.ts b/src/components/Spinner/spinner.stories.ts index 1d1f45a..e2d8345 100644 --- a/src/components/Spinner/spinner.stories.ts +++ b/src/components/Spinner/spinner.stories.ts @@ -7,6 +7,12 @@ const meta = { title: "Progress/Spinner", component: Spinner, tags: [], + argTypes: { + size: { + options: ["small", "medium", "large", "xl", "2xl", null, undefined], + control: { type: "select" }, + }, + }, } satisfies Meta; export default meta; @@ -14,5 +20,7 @@ type Story = StoryObj; // More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args export const Default: Story = { - args: {}, + args: { + size: "medium", + }, }; diff --git a/src/components/ToggleSwitch/ToggleSwitch.stories.ts b/src/components/ToggleSwitch/ToggleSwitch.stories.ts index be0c26d..d4cee68 100644 --- a/src/components/ToggleSwitch/ToggleSwitch.stories.ts +++ b/src/components/ToggleSwitch/ToggleSwitch.stories.ts @@ -7,6 +7,12 @@ const meta = { title: "Forms/ToggleSwitch", component: ToggleSwitch, tags: [], + argTypes: { + size: { + options: ["sm", "md", "lg", null, undefined], + control: { type: "select" }, + }, + }, } satisfies Meta; export default meta; @@ -14,5 +20,7 @@ type Story = StoryObj; // More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args export const Default: Story = { - args: {}, + args: { + size: "md", + }, }; diff --git a/src/components/Tooltip/Tooltip.stories.tsx b/src/components/Tooltip/Tooltip.stories.tsx index 10aa1dd..0ca5608 100644 --- a/src/components/Tooltip/Tooltip.stories.tsx +++ b/src/components/Tooltip/Tooltip.stories.tsx @@ -8,6 +8,12 @@ const meta = { title: "Overlay/Tooltip", component: Tooltip, tags: [], + argTypes: { + color: { + options: ["primary", "secondary", "tertiary", null, undefined], + control: { type: "select" }, + }, + }, } satisfies Meta; export default meta; @@ -26,5 +32,6 @@ export const Default: Story = { description: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard.", position: "bottomRight", + color: "primary", }, }; From d6d0bb23aba3c835d1598814602d49af45e33baa Mon Sep 17 00:00:00 2001 From: tlamen Date: Fri, 12 Apr 2024 15:52:10 -0300 Subject: [PATCH 2/4] :sparkles: different icon logic on stories --- src/components/Badge/Badge.stories.ts | 28 ++++++++++++++++++- .../FloatingButton/FloatingButton.stories.tsx | 11 +++++++- .../SelectBox/SelectBox.stories.tsx | 15 +++++++++- 3 files changed, 51 insertions(+), 3 deletions(-) diff --git a/src/components/Badge/Badge.stories.ts b/src/components/Badge/Badge.stories.ts index 8028a79..65ad2ec 100644 --- a/src/components/Badge/Badge.stories.ts +++ b/src/components/Badge/Badge.stories.ts @@ -1,4 +1,4 @@ -import { StarIcon } from "@heroicons/react/20/solid"; +import { ArrowDownIcon, PencilIcon, StarIcon, TrashIcon } from "@heroicons/react/24/outline"; import type { Meta, StoryObj } from "@storybook/react"; import { Badge } from "."; @@ -8,6 +8,32 @@ const meta = { title: "Others/Badge", component: Badge, tags: [], + argTypes: { + leftIcon:{ + options: { + StarIcon: StarIcon, + PencilIcon: PencilIcon, + TrashcanIcon: TrashIcon, + ArrowDownIcon: ArrowDownIcon, + Null: null, + }, + control: { + type: "select", + }, + }, + rightIcon:{ + options: { + StarIcon: StarIcon, + PencilIcon: PencilIcon, + TrashcanIcon: TrashIcon, + ArrowDownIcon: ArrowDownIcon, + Null: null, + }, + control: { + type: "select", + }, + } + } } satisfies Meta; export default meta; diff --git a/src/components/FloatingButton/FloatingButton.stories.tsx b/src/components/FloatingButton/FloatingButton.stories.tsx index 7fd2c75..c37505c 100644 --- a/src/components/FloatingButton/FloatingButton.stories.tsx +++ b/src/components/FloatingButton/FloatingButton.stories.tsx @@ -1,4 +1,4 @@ -import { ArrowDownLeftIcon } from "@heroicons/react/24/outline"; +import { ArrowDownLeftIcon, PencilIcon, StarIcon, TrashIcon } from "@heroicons/react/24/outline"; import { Meta, StoryFn } from "@storybook/react"; import FloatingButton, { FloatingButtonProps } from "./index"; @@ -21,6 +21,15 @@ export default { options: ["lg", "md", "sm"], control: { type: "select" }, }, + icon: { + options: { + ArrowDownLeftIcon: ArrowDownLeftIcon, + PencilIcon: PencilIcon, + TrashcanIcon: TrashIcon, + StarIcon: StarIcon, + }, + controle: { type: "select" } + } }, } as Meta; diff --git a/src/components/SelectBox/SelectBox.stories.tsx b/src/components/SelectBox/SelectBox.stories.tsx index 50eccde..0d09eeb 100644 --- a/src/components/SelectBox/SelectBox.stories.tsx +++ b/src/components/SelectBox/SelectBox.stories.tsx @@ -1,4 +1,4 @@ -import { EnvelopeIcon } from "@heroicons/react/24/outline"; +import { ArrowDownIcon, PencilIcon, StarIcon, TrashIcon, EnvelopeIcon } from "@heroicons/react/24/outline"; import { Meta, StoryFn } from "@storybook/react"; import SelectBox, { SelectBoxProps } from "./index"; @@ -12,6 +12,19 @@ export default { options: ["lg", "md", "sm"], control: { type: "select" }, }, + leftIcon:{ + options: { + EnvelopeIcon: EnvelopeIcon, + StarIcon: StarIcon, + PencilIcon: PencilIcon, + TrashcanIcon: TrashIcon, + ArrowDownIcon: ArrowDownIcon, + Null: null, + }, + control: { + type: "select", + }, + }, }, } as Meta; From f13a81c39dbc865a9edf7550ac8b24814f3fbd02 Mon Sep 17 00:00:00 2001 From: tlamen Date: Fri, 12 Apr 2024 15:56:26 -0300 Subject: [PATCH 3/4] =?UTF-8?q?=F0=9F=9A=A8=20linter?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Badge/Badge.stories.ts | 8 ++++---- .../FloatingButton/FloatingButton.stories.tsx | 4 ++-- src/components/SelectBox/SelectBox.stories.tsx | 10 ++++++++-- 3 files changed, 14 insertions(+), 8 deletions(-) diff --git a/src/components/Badge/Badge.stories.ts b/src/components/Badge/Badge.stories.ts index 65ad2ec..3862f30 100644 --- a/src/components/Badge/Badge.stories.ts +++ b/src/components/Badge/Badge.stories.ts @@ -9,7 +9,7 @@ const meta = { component: Badge, tags: [], argTypes: { - leftIcon:{ + leftIcon: { options: { StarIcon: StarIcon, PencilIcon: PencilIcon, @@ -21,7 +21,7 @@ const meta = { type: "select", }, }, - rightIcon:{ + rightIcon: { options: { StarIcon: StarIcon, PencilIcon: PencilIcon, @@ -32,8 +32,8 @@ const meta = { control: { type: "select", }, - } - } + }, + }, } satisfies Meta; export default meta; diff --git a/src/components/FloatingButton/FloatingButton.stories.tsx b/src/components/FloatingButton/FloatingButton.stories.tsx index c37505c..e95c55d 100644 --- a/src/components/FloatingButton/FloatingButton.stories.tsx +++ b/src/components/FloatingButton/FloatingButton.stories.tsx @@ -28,8 +28,8 @@ export default { TrashcanIcon: TrashIcon, StarIcon: StarIcon, }, - controle: { type: "select" } - } + controle: { type: "select" }, + }, }, } as Meta; diff --git a/src/components/SelectBox/SelectBox.stories.tsx b/src/components/SelectBox/SelectBox.stories.tsx index 0d09eeb..8b82804 100644 --- a/src/components/SelectBox/SelectBox.stories.tsx +++ b/src/components/SelectBox/SelectBox.stories.tsx @@ -1,4 +1,10 @@ -import { ArrowDownIcon, PencilIcon, StarIcon, TrashIcon, EnvelopeIcon } from "@heroicons/react/24/outline"; +import { + ArrowDownIcon, + EnvelopeIcon, + PencilIcon, + StarIcon, + TrashIcon, +} from "@heroicons/react/24/outline"; import { Meta, StoryFn } from "@storybook/react"; import SelectBox, { SelectBoxProps } from "./index"; @@ -12,7 +18,7 @@ export default { options: ["lg", "md", "sm"], control: { type: "select" }, }, - leftIcon:{ + leftIcon: { options: { EnvelopeIcon: EnvelopeIcon, StarIcon: StarIcon, From 6b2a9349982a8055b9435250e9d75d887c6a9f34 Mon Sep 17 00:00:00 2001 From: Victor Hugo da Silva de Oliveira Date: Thu, 18 Apr 2024 13:58:23 -0300 Subject: [PATCH 4/4] =?UTF-8?q?=E2=9C=A8=20Add=20the=20className=20props?= =?UTF-8?q?=20to=20the=20docs?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Avatar/Avatar.stories.tsx | 1 + src/components/Badge/Badge.stories.ts | 2 ++ src/components/Button/Button.stories.tsx | 1 + src/components/CheckBox/CheckBox.stories.ts | 1 + src/components/FloatingButton/FloatingButton.stories.tsx | 1 + src/components/RadioButton/RadioButton.stories.ts | 1 + src/components/SearchInput/SearchInput.stories.tsx | 1 + src/components/Slider/Slider.stories.ts | 2 ++ src/components/Spinner/spinner.stories.ts | 1 + src/components/Tab/Tab.mdx | 2 -- src/components/Tab/Tab.stories.tsx | 5 ----- src/components/Toast/index.stories.tsx | 1 + 12 files changed, 12 insertions(+), 7 deletions(-) diff --git a/src/components/Avatar/Avatar.stories.tsx b/src/components/Avatar/Avatar.stories.tsx index 5240e95..0c51220 100644 --- a/src/components/Avatar/Avatar.stories.tsx +++ b/src/components/Avatar/Avatar.stories.tsx @@ -17,4 +17,5 @@ Variations.args = { isOn: true, name: "Nome Teste", avatarUrl: "https://www.petz.com.br/blog/wp-content/uploads/2020/04/meu-primeiro-gato.jpg", + className: "", }; diff --git a/src/components/Badge/Badge.stories.ts b/src/components/Badge/Badge.stories.ts index 3862f30..0e07578 100644 --- a/src/components/Badge/Badge.stories.ts +++ b/src/components/Badge/Badge.stories.ts @@ -44,5 +44,7 @@ export const Default: Story = { args: { label: "Hello World", leftIcon: StarIcon, + color: "primary", + className: "", }, }; diff --git a/src/components/Button/Button.stories.tsx b/src/components/Button/Button.stories.tsx index cb1165c..6f8e14f 100644 --- a/src/components/Button/Button.stories.tsx +++ b/src/components/Button/Button.stories.tsx @@ -30,4 +30,5 @@ Variations.args = { size: "md", onClick: undefined, icon: StarIcon, + className: "", }; diff --git a/src/components/CheckBox/CheckBox.stories.ts b/src/components/CheckBox/CheckBox.stories.ts index 43f56e6..f671e9a 100644 --- a/src/components/CheckBox/CheckBox.stories.ts +++ b/src/components/CheckBox/CheckBox.stories.ts @@ -35,5 +35,6 @@ export const Default: Story = { label: "", disabled: false, color: "primary", + className: "", }, }; diff --git a/src/components/FloatingButton/FloatingButton.stories.tsx b/src/components/FloatingButton/FloatingButton.stories.tsx index e95c55d..88bc428 100644 --- a/src/components/FloatingButton/FloatingButton.stories.tsx +++ b/src/components/FloatingButton/FloatingButton.stories.tsx @@ -43,4 +43,5 @@ Variations.args = { size: "md", icon: ArrowDownLeftIcon, onClick: undefined, + className: "", }; diff --git a/src/components/RadioButton/RadioButton.stories.ts b/src/components/RadioButton/RadioButton.stories.ts index ab30a92..cbd57c1 100644 --- a/src/components/RadioButton/RadioButton.stories.ts +++ b/src/components/RadioButton/RadioButton.stories.ts @@ -24,5 +24,6 @@ export const Default: Story = { name: "teste", label: "", disabled: false, + className: "", }, }; diff --git a/src/components/SearchInput/SearchInput.stories.tsx b/src/components/SearchInput/SearchInput.stories.tsx index 1c0fbd8..173859a 100644 --- a/src/components/SearchInput/SearchInput.stories.tsx +++ b/src/components/SearchInput/SearchInput.stories.tsx @@ -26,6 +26,7 @@ const Template: StoryFn = (args: SearchInputProps) => { setSelectedValue={setSelectedValue} placeholder={args.placeholder} leftIcon={args.leftIcon} + className="" /> ); }; diff --git a/src/components/Slider/Slider.stories.ts b/src/components/Slider/Slider.stories.ts index eaf75fc..c4e22da 100644 --- a/src/components/Slider/Slider.stories.ts +++ b/src/components/Slider/Slider.stories.ts @@ -25,5 +25,7 @@ export const Default: Story = { max: 400, size: "medium", step: 1, + value: 300, + className: "", }, }; diff --git a/src/components/Spinner/spinner.stories.ts b/src/components/Spinner/spinner.stories.ts index e2d8345..e6d9ad7 100644 --- a/src/components/Spinner/spinner.stories.ts +++ b/src/components/Spinner/spinner.stories.ts @@ -22,5 +22,6 @@ type Story = StoryObj; export const Default: Story = { args: { size: "medium", + className: "", }, }; diff --git a/src/components/Tab/Tab.mdx b/src/components/Tab/Tab.mdx index 8c05a8d..2e5f103 100644 --- a/src/components/Tab/Tab.mdx +++ b/src/components/Tab/Tab.mdx @@ -19,8 +19,6 @@ import { Meta, Controls, Canvas } from "@storybook/blocks"; -

Obs: Essa versão será depreciada em novas atualizações, por favor uitlize a versão com os childrens.

- diff --git a/src/components/Tab/Tab.stories.tsx b/src/components/Tab/Tab.stories.tsx index 672a35a..7dfb2da 100644 --- a/src/components/Tab/Tab.stories.tsx +++ b/src/components/Tab/Tab.stories.tsx @@ -11,11 +11,6 @@ const meta = { export default meta; type Story = StoryObj; -// eslint-disable-next-line no-alert -alert( - "Atenção: A versão Tab Component props será depreciada em futuras atualizações. Por favor, migre para a nova versão do componente Tab.", -); - const tabsArray = [ { name: "Teste 1", diff --git a/src/components/Toast/index.stories.tsx b/src/components/Toast/index.stories.tsx index 4513d2c..5d6349a 100644 --- a/src/components/Toast/index.stories.tsx +++ b/src/components/Toast/index.stories.tsx @@ -24,4 +24,5 @@ Variations.args = { message: "Porem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate libero et velit interdum, ac aliquet odio mattis. Class", title: "teste", + className: "", };