Skip to content

Add Storybook for component documentation and development #193

@jeroenrinzema

Description

@jeroenrinzema

Summary

Add Storybook to the console/ frontend application to enable isolated component development, visual documentation, and testing for our UI components.

Motivation

The console application has a rich set of UI components (43 shadcn/ui primitives in src/components/ui/ plus ~20 app-level shared components) but currently lacks:

  • Visual documentation for component variants and states
  • An isolated environment for component development
  • A way to test components in isolation without running the full application

Scope

Components to document

UI Primitives (src/components/ui/):

  • Core: Button, Input, Select, Checkbox, Switch, Badge, Avatar
  • Layout: Card, Dialog, Sheet, Tabs, Sidebar, ScrollArea, Separator
  • Data: Table, DataTable, JsonView
  • Forms: Form, Combobox, MultiSelect, ColorPicker, InlineEdit, KeyValueEditor, TemplateInput, AttributeEditor
  • Feedback: Tooltip, Popover, DropdownMenu, Command, Skeleton
  • Custom: CodeEditor, Map, NavTabs, UserImportDialog

App-level components (src/components/):

  • AppSidebar, DataTable, Heading, Modal, PageContent, Pagination, Preview, ProjectSwitcher, SearchTable, Stack, Tile, Toast, CodeExample, ActionPreviewIframe

Implementation tasks

  • Install Storybook dependencies (@storybook/react-vite, etc.)
  • Configure .storybook/ with Vite builder and Tailwind CSS support
  • Add stories for UI primitive components
  • Add stories for app-level shared components
  • Configure Storybook addons (controls, actions, a11y, docs)
  • Add npm scripts to package.json (storybook, build-storybook)
  • Document Storybook usage in README or CONTRIBUTING

Technical notes

  • Package manager: pnpm
  • Build tool: Vite (use @storybook/react-vite builder)
  • Styling: Tailwind CSS v4 + CVA + tailwind-merge
  • Component library: shadcn/ui with Radix UI primitives

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions