diff --git a/src/components/AccordionMenu/AccordionMenu.mdx b/src/components/AccordionMenu/AccordionMenu.mdx index e6e2027..65bfd0f 100644 --- a/src/components/AccordionMenu/AccordionMenu.mdx +++ b/src/components/AccordionMenu/AccordionMenu.mdx @@ -14,7 +14,7 @@ import {Meta, Controls, Story, Canvas, Description} from "@storybook/blocks"; - + ### Exemplo Completo #### Aqui está um exemplo mais complexo de como você pode usar o componente AccordionMenu: diff --git a/src/components/AccordionMenu/AccordionMenu.stories.tsx b/src/components/AccordionMenu/AccordionMenu.stories.tsx index c13f56b..f25f718 100644 --- a/src/components/AccordionMenu/AccordionMenu.stories.tsx +++ b/src/components/AccordionMenu/AccordionMenu.stories.tsx @@ -19,6 +19,7 @@ Variations.args = { title: "This is a Accordion", children: "Vorem ipsum dolor sit amet, consectetur Vorem ipsum dolor sit ", size: "md", + className: "", }; const accordionData: AccordionMenuProps[] = [ @@ -26,16 +27,19 @@ const accordionData: AccordionMenuProps[] = [ title: "Accordion 1", children: "Content for Accordion 1", size: "md", + className: "", }, { title: "Accordion 2", children: "Content for Accordion 2", size: "md", + className: "", }, { title: "Accordion 3", children: "Content for Accordion 3", size: "md", + className: "", }, ]; 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 8028a79..0e07578 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; @@ -18,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 34c3a58..f671e9a 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,8 +29,12 @@ type Story = StoryObj; // More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args export const Default: Story = { args: { + size: "medium", + shape: "circle", name: "teste", label: "", disabled: false, + color: "primary", + className: "", }, }; diff --git a/src/components/FloatingButton/FloatingButton.stories.tsx b/src/components/FloatingButton/FloatingButton.stories.tsx index 7fd2c75..88bc428 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; @@ -34,4 +43,5 @@ Variations.args = { size: "md", icon: ArrowDownLeftIcon, onClick: undefined, + className: "", }; 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 cd91f97..cbd57c1 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; @@ -18,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/SelectBox/SelectBox.stories.tsx b/src/components/SelectBox/SelectBox.stories.tsx index 50eccde..8b82804 100644 --- a/src/components/SelectBox/SelectBox.stories.tsx +++ b/src/components/SelectBox/SelectBox.stories.tsx @@ -1,4 +1,10 @@ -import { 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,6 +18,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; diff --git a/src/components/Slider/Slider.stories.ts b/src/components/Slider/Slider.stories.ts index 52498f1..c4e22da 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,9 @@ export const Default: Story = { args: { min: 200, 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 1d1f45a..e6d9ad7 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,8 @@ 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", + 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: "", }; diff --git a/src/components/ToggleSwitch/ToggleSwitch.stories.ts b/src/components/ToggleSwitch/ToggleSwitch.stories.ts index 1c5283d..2230dd7 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", }, };