[SW-4944] Melhorar docs

src/components/AccordionMenu/AccordionMenu.mdx

@@ -14,7 +14,7 @@ import {Meta, Controls, Story, Canvas, Description} from "@storybook/blocks";
 
 <Canvas />
 
-<Controls/>
+<Controls />
 
 ### Exemplo Completo
 #### Aqui está um exemplo mais complexo de como você pode usar o componente AccordionMenu:

src/components/AccordionMenu/AccordionMenu.stories.tsx

@@ -19,23 +19,27 @@ Variations.args = {
   title: "This is a Accordion",
   children: "Vorem ipsum dolor sit amet, consectetur Vorem ipsum dolor sit  ",
   size: "md",
+  className: "",
 };
 
 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: "",
   },
 ];
 

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: "",
 };

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<typeof Badge>;
 
 export default meta;
@@ -18,5 +44,7 @@ export const Default: Story = {
   args: {
     label: "Hello World",
     leftIcon: StarIcon,
+    color: "primary",
+    className: "",
   },
 };

src/components/Button/Button.stories.tsx

@@ -30,4 +30,5 @@ Variations.args = {
   size: "md",
   onClick: undefined,
   icon: StarIcon,
+  className: "",
 };

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<typeof CheckBox>;
 
 export default meta;
@@ -15,8 +29,12 @@ type Story = StoryObj<typeof meta>;
 // 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: "",
   },
 };

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: "",
 };

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<typeof Popover>;
 
 export default meta;
@@ -24,5 +41,6 @@ export const Default: Story = {
       </div>
     ),
     button: "hello",
+    position: "bottomLeft",
   },
 };

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<typeof RadioButton>;
 
 export default meta;
@@ -18,5 +24,6 @@ export const Default: Story = {
     name: "teste",
     label: "",
     disabled: false,
+    className: "",
   },
 };

src/components/SearchInput/SearchInput.stories.tsx

@@ -26,6 +26,7 @@ const Template: StoryFn<typeof SearchInput> = (args: SearchInputProps) => {
       setSelectedValue={setSelectedValue}
       placeholder={args.placeholder}
       leftIcon={args.leftIcon}
+      className=""
     />
   );
 };

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<typeof SelectBox>;
 

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<typeof Slider>;
 
 export default meta;
@@ -17,5 +23,9 @@ export const Default: Story = {
   args: {
     min: 200,
     max: 400,
+    size: "medium",
+    step: 1,
+    value: 300,
+    className: "",
   },
 };

src/components/Spinner/spinner.stories.ts

@@ -7,12 +7,21 @@ const meta = {
   title: "Progress/Spinner",
   component: Spinner,
   tags: [],
+  argTypes: {
+    size: {
+      options: ["small", "medium", "large", "xl", "2xl", null, undefined],
+      control: { type: "select" },
+    },
+  },
 } satisfies Meta<typeof Spinner>;
 
 export default meta;
 type Story = StoryObj<typeof meta>;
 
 // More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
 export const Default: Story = {
-  args: {},
+  args: {
+    size: "medium",
+    className: "",
+  },
 };

src/components/Tab/Tab.mdx

@@ -19,8 +19,6 @@ import { Meta, Controls, Canvas } from "@storybook/blocks";
 
 <Canvas of={TabStories.TabComponentProps} />
 
-<p style={{color: 'red'}}>Obs: Essa versão será depreciada em novas atualizações, por favor uitlize a versão com os childrens.</p>
-
 <Controls />
 
 

src/components/Tab/Tab.stories.tsx

@@ -11,11 +11,6 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-// 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",

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: "",
 };

src/components/ToggleSwitch/ToggleSwitch.stories.ts

@@ -7,12 +7,20 @@ const meta = {
   title: "Forms/ToggleSwitch",
   component: ToggleSwitch,
   tags: [],
+  argTypes: {
+    size: {
+      options: ["sm", "md", "lg", null, undefined],
+      control: { type: "select" },
+    },
+  },
 } satisfies Meta<ToggleSwitchProps>;
 
 export default meta;
 type Story = StoryObj<typeof meta>;
 
 // More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
 export const Default: Story = {
-  args: {},
+  args: {
+    size: "md",
+  },
 };

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<typeof Tooltip>;
 
 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",
   },
 };