Storybook Application

Archived 2026-09-23. apps/storybook (Storybook 10 for @sustentus/ui) was archived: nobody used it, nobody maintained it, and it spent Quality and Vercel build minutes on every change to packages/ui. The code stays in the tree as reference only and is out of every process — it is excluded from the pnpm workspace (!apps/storybook in pnpm-workspace.yaml), so nothing installs, lints, typechecks, tests or builds it; turbo has no @sustentus/storybook#build task and the root has no storybook:* scripts; root ESLint and Prettier ignore it; and its Vercel project deploys nothing (vercel.json → git.deploymentEnabled: false, ignoreCommand: "exit 0") and is gone from .icm/project.json → deploy.projects. No packages/ui component needs a story any more. To restore it, follow apps/storybook/README.md.

Everything below describes the app as it was when archived and is kept for reference only.

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

Overview

Package Name: @sustentus/storybook Framework: Storybook 10 Port: 3002 (historical — no longer run) Path: apps/storybook/ Status: Archived 2026-09-23 — not a workspace package

Purpose

Storybook served 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 had one story file (ComponentName.stories.tsx) importing from @sustentus/ui. With tags: ["autodocs"], Storybook generated a props table, type information, and default values, and the a11y addon checked 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",
  },
};

Variations were exposed 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 (historical)

The app used to run with pnpm storybook:dev on http://localhost:3002 and build to storybook-static/. None of that works any more: the root storybook:build script and the turbo build task are gone, its node_modules are no longer installed, and the stories have started to drift from packages/ui. See apps/storybook/README.md for the restore steps.

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

At archive time Storybook documented 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 imported directly from @sustentus/ui:


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