frontend-component

Generate a React component with stories and tests by creating a functional TSX file under src/components, alongside a corresponding .stories.tsx file for Storybook and a .test.tsx file using Vitest. This ensures a consistent component structure with proper TypeScript typings and exports.

The best way to structure a new React component is placing the typed TSX file under src/components, adding a Storybook story, creating a Vitest test file, and optionally re-exporting it from an index barrel. This enforces consistent typings, file structure, and easy consumption.

Yes, you need a standard React and TypeScript project setup with Tailwind for styling and Vitest for testing. The component generation process requires these specific frameworks to ensure proper styling, unit tests, and Storybook integration.

Write unit tests for a React component using Vitest by creating a .test.tsx file under src/components. Apply testing utilities and query scoping with within(container) to ensure isolated and reliable component testing alongside your generated Storybook stories.

Yes, you can automatically re-export new React components from an index barrel file like src/components/index.ts. This optional step simplifies imports, ensuring the component exports cleanly for easy consumption by the app and other components.