📦 NEW: Hint

[marcaumdesign]

Open Docs

Done State

Settings

• Create a new directory for the component under the src/ directory in it's specific category.
• Copy over an existing components Story and index file and past into the new directory
• Switch all the old names with the new name with Cmd+Fn+F2
• Set the component Interface (proprieties) and bring to the main fuction on index.tsx
• Paste from Figma the code on the main function
• Switch the fixed proprieties values by your Interface proprieties you created
• Set argTypes on {component}.stories.ts exatcly as it is on your index.tsx with the control modes
• Set the args for the variants previews too

Stylish

• Link colors tokens
• Link text tokens
• Link icons
• Fix layout
• Link Figma component to Storybook

Technical Requirements

• React used for creating functional components
• TailwindCSS used for styling components alongside traditional CSS
• React Hook Form used for form field validation
• No complex state stored inside component

Resources

• Figma
• React Functional Components
• TailwindCSS
• React Hook Form