FutureFace Storybook (Atomic Design + Tailwind)

This project uses React + TypeScript + Vite with Storybook and Tailwind CSS.

Tech stack

• Vite 7 + React 19
• Storybook 10 (@storybook/react-vite)
• Tailwind CSS 4 (via @tailwindcss/vite)

Atomic Design structure

Components are organized by atomic design in src/components:

src/components/
  atoms/
  molecules/
  organisms/
  templates/
  pages/

Each level includes Storybook stories using the Atomic/... title hierarchy.

Available scripts

• npm run dev – run Vite app locally
• npm run build – type-check and production build
• npm run storybook – run Storybook locally on port 6006
• npm run build-storybook – build static Storybook output
• npm run test:components – run Vitest browser tests for all stories in src/components
• npm run test:components:watch – run story tests in watch mode
• npm run chromatic – publish Storybook to Chromatic (CHROMATIC_PROJECT_TOKEN required)

Component testing coverage

Storybook is configured to load stories from:

src/components/**/*.stories.@(js|jsx|mjs|ts|tsx)

Each component in src/components has a matching story file, so npm run test:components executes interaction/a11y tests for all components via the Storybook Vitest integration.

Chromatic setup

1. Create a project in Chromatic and copy the project token.
2. Set CHROMATIC_PROJECT_TOKEN in your CI provider secrets.
3. Run npm run chromatic locally or in CI.

Tailwind usage

Tailwind is loaded in src/index.css with:

@import "tailwindcss";

and enabled in vite.config.ts using the Tailwind Vite plugin.