Storybook Application

The Storybook application provides interactive documentation and visual testing for the @sustentus/ui component library.

Overview

Package Name: @sustentus/storybook Framework: Storybook 10 Port: 3002 Path: apps/storybook/

Purpose

Storybook serves as:

Component playground: Test components in isolation
Design system documentation: Visual reference for all UI components
Development environment: Build components without running full apps
Quality assurance: Accessibility testing and visual regression testing

Technology Stack

Core

Storybook 10: Component development environment
Vite: Fast build tool and dev server
React 19: UI library
TypeScript: Type safety

Build & Tools

@storybook/react-vite: Vite-based builder
@vitejs/plugin-react: React plugin for Vite
Tailwind CSS v4: Styling (via PostCSS)

Addons

@storybook/addon-docs: Automatic documentation generation
@storybook/addon-a11y: Accessibility testing
@chromatic-com/storybook: Visual testing (configured)

Dependencies

@sustentus/ui: The component library being documented
Lucide React: Icons

Directory Structure


storybook/
├── .storybook/
│   ├── main.ts                 # Storybook configuration
│   └── preview.ts              # Global decorators & parameters
├── src/
│   ├── Accordion.stories.tsx   # Accordion component stories
│   ├── Alert.stories.tsx       # Alert component stories
│   ├── Button.stories.tsx      # Button component stories
│   ├── Card.stories.tsx        # Card component stories
│   ├── ... (45+ story files)
│   └── globals.css             # Global styles
├── storybook-static/           # Build output
├── package.json
├── vite.config.ts              # Vite configuration
└── tsconfig.json

Writing stories

Each UI component has one story file (ComponentName.stories.tsx) importing from @sustentus/ui. With tags: ["autodocs"], Storybook generates a props table, type information, and default values, and the a11y addon checks colour contrast, ARIA attributes, keyboard navigation, and screen reader support.


import type { Meta, StoryObj } from "@storybook/react";
import { Button } from "@sustentus/ui";
 
const meta = {
  title: "Components/Button",
  component: Button,
  parameters: {
    layout: "centered",
  },
  tags: ["autodocs"],
} satisfies Meta<typeof Button>;
 
export default meta;
type Story = StoryObj<typeof meta>;
 
export const Default: Story = {
  args: {
    children: "Button",
    variant: "default",
  },
};

Expose variations through the Controls panel via argTypes rather than separate variant stories:


const meta = {
  title: "Components/Button",
  component: Button,
  argTypes: {
    variant: {
      control: "select",
      options: ["default", "destructive", "outline"],
      description: "The button variant",
    },
  },
} satisfies Meta<typeof Button>;

Development

Running Storybook


# From root
pnpm storybook:dev
 
# From storybook directory
cd apps/storybook
pnpm dev

Storybook runs on http://localhost:3002.

Building


# From root
pnpm storybook:build
 
# From storybook directory
cd apps/storybook
pnpm build

Output: storybook-static/ directory

Configuration

`.storybook/main.ts`


import type { StorybookConfig } from "@storybook/react-vite";
 
const config: StorybookConfig = {
  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
  addons: ["@storybook/addon-docs", "@storybook/addon-a11y"],
  framework: {
    name: "@storybook/react-vite",
    options: {},
  },
  viteFinal: async (config) => {
    config.define = {
      ...config.define,
      global: "globalThis",
    };
    return config;
  },
  typescript: {
    check: false,
    reactDocgen: "react-docgen-typescript",
  },
};
 
export default config;

`vite.config.ts`

Vite configuration for Tailwind CSS:


import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import tailwindcss from "@tailwindcss/postcss";
 
export default defineConfig({
  plugins: [react()],
  css: {
    postcss: {
      plugins: [tailwindcss],
    },
  },
});

Global preview configuration (decorators, parameters) lives in .storybook/preview.ts.

Component Coverage

Storybook documents all 45+ components from @sustentus/ui:

Form Components

Button
Input
Textarea
Checkbox
Radio Group
Select
Switch
Label
Form

Layout Components

Card
Separator
Tabs
Accordion
Collapsible
Resizable

Overlay Components

Dialog
Drawer
Sheet
Popover
Tooltip
Hover Card
Dropdown Menu
Context Menu

Feedback Components

Alert
Toast (Sonner)
Progress
Skeleton

Navigation Menu
Menubar
Breadcrumb
Pagination

Data Display

Table
Badge
Avatar
Calendar
Carousel
Chart

Utilities

Aspect Ratio
Scroll Area
Command
Input OTP
Slider
Toggle
Toggle Group

Integration with UI Package

Storybook imports directly from @sustentus/ui:


import { Button, Card, Input } from "@sustentus/ui";

When developing:

Run UI package in watch mode: pnpm ui:dev
Run Storybook: pnpm storybook:dev
Changes to UI components hot-reload in Storybook