Storybook
Component library documentation and visual testing
Overview
Storybook provides an isolated environment to develop, document, and test UI components independently from the main application.
Structure
package.json
tsconfig.json
Purpose
Running Storybook
cd apps/storybook
pnpm devAccess at: http://localhost:6006
cd apps/storybook
pnpm buildBuilds static Storybook site to storybook-static/
cd apps/storybook
pnpm chromaticRuns visual regression tests with Chromatic
Writing Stories
Basic Story
import type { Meta, StoryObj } from "@storybook/react"
import { Button } from "@shared/ui"
const meta: Meta<typeof Button> = {
title: "Inputs/Button",
component: Button,
tags: ["autodocs"],
}
export default meta
type Story = StoryObj<typeof Button>
export const Primary: Story = {
args: {
children: "Click me",
variant: "contained",
color: "primary",
},
}
export const Secondary: Story = {
args: {
children: "Click me",
variant: "outlined",
color: "secondary",
},
}Testing
Component Tests (Vitest)
cd apps/storybook
pnpm testUI Mode
cd apps/storybook
pnpm test:uiInteractive test runner with UI.
Deployment
Storybook is automatically deployed to Vercel on every push to main:
- Production: https://storybook.odysee.ai
- Preview: Unique URL for each PR
Next: Learn about the Documentation site.