feat(react): ✨ Adição de botões Storybook

kevinDsousa · kevinDsousa · commit c669edbe3ab3 · 2024-05-21T19:25:25.000-03:00
adicionado controlladores para os stories em react
diff --git a/applications/react/src/components/Avatar/index.tsx b/applications/react/src/components/Avatar/index.tsx
@@ -13,3 +13,5 @@ export function Avatar(props: AvatarProps) {
     </AvatarContainer>
   );
 }
+
+Avatar.displayName = "Avatar";
diff --git a/applications/react/src/components/Box.tsx b/applications/react/src/components/Box.tsx
@@ -6,3 +6,5 @@ export const Box = styled("div", {
   backgroundColor: "$gray800",
   border: "1px solid $gray600",
 });
+
+Box.displayName = "Box";
diff --git a/applications/react/src/components/Checkbox/index.tsx b/applications/react/src/components/Checkbox/index.tsx
@@ -11,3 +11,5 @@ export function Checkbox(props: CheckboxProps) {
     </CheckboxContainer>
   );
 }
+
+Checkbox.displayName = "Checkbox";
diff --git a/applications/react/src/components/Heading.tsx b/applications/react/src/components/Heading.tsx
@@ -23,3 +23,5 @@ export const Heading = styled("h2", {
     size: "md",
   },
 });
+
+Heading.displayName = "Heading";
diff --git a/applications/react/src/components/MultiStep/index.tsx b/applications/react/src/components/MultiStep/index.tsx
@@ -16,3 +16,5 @@ export function MultiStep({ size, currentStep = 1 }: MultiStepProps) {
     </MultiStepContainer>
   );
 }
+
+MultiStep.displayName = "MultiStep";
diff --git a/applications/react/src/components/Text.tsx b/applications/react/src/components/Text.tsx
@@ -27,3 +27,5 @@ export const Text = styled("p", {
     size: "md",
   },
 });
+
+Text.displayName = "Text";
diff --git a/applications/react/src/components/TextArea.tsx b/applications/react/src/components/TextArea.tsx
@@ -28,3 +28,5 @@ export const TextArea = styled("textarea", {
     color: "$gray400",
   },
 });
+
+TextArea.displayName = "TextArea";
diff --git a/applications/react/src/components/TextInput/index.tsx b/applications/react/src/components/TextInput/index.tsx
@@ -9,3 +9,5 @@ export function TextInput({ prefix, ...props }: TextInputProps) {
     </TextInputContainer>
   );
 }
+
+TextInput.displayName = "TextInput";
diff --git a/documentations/react/package.json b/documentations/react/package.json
@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "@storybook/addons": "^7.6.17",
+    "@storybook/addon-a11y": "^6.5.12",
     "polished": "^4.3.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
diff --git a/documentations/react/src/stories/Avatar.stories.tsx b/documentations/react/src/stories/Avatar.stories.tsx
@@ -8,6 +8,13 @@ export default {
     src: "https://github.com/kevinDsousa.png",
     alt: "Kevin Sousa",
   },
+  argTypes: {
+    src: {
+      control: {
+        type: "text",
+      },
+    },
+  },
 } as Meta<AvatarProps>;
 
 export const Primary: StoryObj<AvatarProps> = {};
diff --git a/documentations/react/src/stories/Box.stories.tsx b/documentations/react/src/stories/Box.stories.tsx
@@ -10,6 +10,13 @@ export default {
         <Text>Testando o elemento box</Text>
       </>
     ),
+    argTypes: {
+      children: {
+        control: {
+          type: null,
+        },
+      },
+    },
   },
 } as Meta<BoxProps>;
 
diff --git a/documentations/react/src/stories/Button.stories.tsx b/documentations/react/src/stories/Button.stories.tsx
@@ -7,6 +7,29 @@ export default {
   component: Button,
   args: {
     children: "Send",
+    variant: "primary",
+    size: "md",
+    disabled: false,
+  },
+  argTypes: {
+    variant: {
+      options: ["primary", "secondary", "tertiary"],
+      control: {
+        type: "inline-radio",
+      },
+    },
+    size: {
+      options: ["sm", "md"],
+      control: {
+        type: "inline-radio",
+      },
+    },
+    disabled: {
+      control: {
+        type: "boolean",
+      },
+    },
+    onClick: { action: "clicked" },
   },
 } as Meta<ButtonProps>;
 
diff --git a/documentations/react/src/stories/Heading.stories.tsx b/documentations/react/src/stories/Heading.stories.tsx
@@ -5,7 +5,16 @@ export default {
   title: "Typography/Heading",
   component: Heading,
   args: {
-    children: "Titulo customizado",
+    children: "Custom title",
+    size: "md",
+  },
+  argTypes: {
+    size: {
+      options: ["sm", "md", "lg", "2xl", "4xl", "5xl", "6xl"],
+      control: {
+        type: "inline-radio",
+      },
+    },
   },
 } as Meta<HeadingProps>;
 
diff --git a/documentations/react/src/stories/Text.stories.tsx b/documentations/react/src/stories/Text.stories.tsx
@@ -5,8 +5,31 @@ export default {
   title: "Typography/Text",
   component: Text,
   args: {
+    size: "md",
     children: "Exemplo de texto",
   },
+  argTypes: {
+    size: {
+      options: [
+        "xxs",
+        "xs",
+        "sm",
+        "md",
+        "lg",
+        "xl",
+        "2xl",
+        "4xl",
+        "5xl",
+        "6xl",
+        "7xl",
+        "8xl",
+        "9xl",
+      ],
+      control: {
+        type: "inline-radio",
+      },
+    },
+  },
 } as Meta<TextProps>;
 
 export const Primary: StoryObj<TextProps> = {};
diff --git a/package-lock.json b/package-lock.json

Original file line number	Diff line number	Diff line change
`@@ -13,3 +13,5 @@ export function Avatar(props: AvatarProps) {`
`13`	`13`	`</AvatarContainer>`
`14`	`14`	`);`
`15`	`15`	`}`
	`16`	`+`
	`17`	`+Avatar.displayName = "Avatar";`
Original file line number	Diff line number	Diff line change
`@@ -11,3 +11,5 @@ export function Checkbox(props: CheckboxProps) {`
`11`	`11`	`</CheckboxContainer>`
`12`	`12`	`);`
`13`	`13`	`}`
	`14`	`+`
	`15`	`+Checkbox.displayName = "Checkbox";`
Original file line number	Diff line number	Diff line change
`@@ -16,3 +16,5 @@ export function MultiStep({ size, currentStep = 1 }: MultiStepProps) {`
`16`	`16`	`</MultiStepContainer>`
`17`	`17`	`);`
`18`	`18`	`}`
	`19`	`+`
	`20`	`+MultiStep.displayName = "MultiStep";`
Original file line number	Diff line number	Diff line change
`@@ -9,3 +9,5 @@ export function TextInput({ prefix, ...props }: TextInputProps) {`
`9`	`9`	`</TextInputContainer>`
`10`	`10`	`);`
`11`	`11`	`}`
	`12`	`+`
	`13`	`+TextInput.displayName = "TextInput";`