Vite + Storybook Starter
This setup includes:
- Learna
- vite
- eslint, typescript-eslint, eslint-airbnb-config, prettier
- vitest, jsdom, @testing-library
- react-router v6
- storybook
├── node_modules
├── dist
├── src
│ ├─ assets
│ │ ├── css
│ │ └── images
│ ├─ components
│ │ ├── component-1
│ │ │ ├── component-1.css
│ │ │ ├── component-1.stories.tsx
│ │ │ ├── component-1.test.tsx
│ │ │ └── component-1.tsx
│ │ ├── ...
│ │ └── component-n
│ │ ├── component-n.css
│ │ ├── component-n.stories.tsx
│ │ ├── component-n.test.tsx
│ │ └── component-n.tsx
│ ├─ pages
│ ├─ stories
│ └─ tests
├── ...
├── README.md
├── package.json
└── .gitignore
The project is organized into the following packages:
src/assets
- images and css files - common across componentssrc/components
- collection of components defined in this librarysrc/component-1
- folder for a single component - keep all relevant files in one placesrc/component-1/*.stories.tsx
- collection of stories (i.e. different states) for the componentsrc/component-1/*.test.tsx
- unit tests for the component
src/pages
- sample pages that you can load in the vite development serversrc/tests
- integration tests where multiple components used on a page
Official guide: https://storybook.js.org/docs/react/writing-stories/introduction
- A story captures the rendered state of a UI component.
- A component’s stories are defined in a story file (
*.stories.tsx
) that lives alongside the component file. The story file is for development-only, and it won't be included in your production bundle. - Key ingredients are the default export that describes the component, and named exports that describe the stories.
- Recommended to use UpperCamelCase for your story exports
Offical guide:
- Vitest: https://vitest.dev/
- Examples: https://github.com/vitest-dev/vitest/tree/main/examples/react-storybook
Loading tests:
- The configuration loads tests from files named (
*.test.tsx
). - Sample tests are included for the
<Button>
component (/src/components/Button/Button.test.tsx
).
IDE Integration:
- Visutal Studio Code Vitest Explorer: https://marketplace.visualstudio.com/items?itemName=ZixuanChen.vitest-explorer
Run these commands from the root folder of the repository:
npm install
to install required packagesnpm run build-storybook
to run the storybooknpm run storybook
to run the storybooknpm run build
to build the projectnpm run test
to run all testsnpm run dev
to run the vite developmenet server
References: