Test vite, react, typescript, tailwind, storybook project

Technology

• Vite
  • @vitejs/plugin-react
  • @tailwindcss/vite
• React 19
• Typescript
• Yarn 4
• Storybook
  • @storybook/react-vite
  • @storybook/react
  • @storybook/test-runner w/playwright and axe-playwright
• Tailwind 4
• Prettier and Eslint

Structure

Folders and files

• Use a separate folder for each component, library or recipe.
  • /components (basic, reusable building blocks like a button or text field)
  • /layouts (how components are arranged)
  • /recipes (combination of components and one or more layouts to create a larger molecule with specific purpose)
• /stories (Storybook stories. Use same name as the component, layout, or recipe for naming convention)
  • Storybook stories are co-located.
• Some components are polymorphic. Use the as prop to modify element of rendered component.

CSS

• /assets/css/index.css (contains basic light/dark theme config support)
• Each component has an addition className prop that is added on using clsx
• /utils (contains some basic css utils based on normalized props)

Commands

See package.json for all available scripts.

App

Runs on http://localhost:5173/.

Build

yarn build

Develop

yarn dev

Lint

yarn lint

# Fix
yarn lint --fix

Typecheck

yarn ts

Storybook

Runs on http://localhost:6006/.

Build

yarn build-storybook

Develop

yarn dev-storybook

Test

yarn test-storybook

Other

Yarn outdated

Run plugin to check for outdated dependencies.

yarn outdated