Implement Storybook for `library-react` Components

[crypto-a]

User Story

As a consumer of the component library,
I need interactive Storybook docs for each component,
So that I can browse variants, props, and accessibility states in isolation.

Details and Assumptions

• Tech stack: React + TypeScript.

• Add Storybook (latest) with Vite builder: @storybook/react-vite.

• Configure CSF3 stories and autodocs.

• Add global decorators for theming, RTL toggle (if applicable), and a11y.

• Install addons: @storybook/addon-essentials (actions, controls, docs, viewport, backgrounds, measure, outline), @storybook/addon-a11y, @storybook/addon-interactions, @storybook/addon-mdx-gfm.

• Create .storybook/ with main.ts, preview.ts, and a project-level tsconfig.

• Add at least one story per component in src/components/**/__stories__/*.stories.tsx (or alongside component).

• Provide example stories for states (default/hover/focus/disabled/error) and dark/light themes.

• Add npm scripts:

  • "storybook": "storybook dev -p 6006"
  • "build:storybook": "storybook build"

• Optional but recommended:

  • Visual tests via Storybook test-runner.
  • CI job to build Storybook on PRs; publish static docs to GitHub Pages (storybook-static) or a preview provider.

• Lint stories and ensure type-safety; ensure stories compile with strict TS.

Acceptance Criteria

Scenario: Storybook runs locally
  Given the repository has Storybook configured with Vite
  When I run "npm run storybook"
  Then the Storybook UI starts on http://localhost:6006
  And I can view documented stories for each component

Scenario: Docs are auto-generated
  Given CSF3 stories with typed component props
  When I open a component's Docs tab
  Then I see prop tables, controls, and usage examples generated from TypeScript types

Scenario: Accessibility checks
  Given the a11y addon is enabled
  When I open a story
  Then automated accessibility checks run
  And violations (if any) are listed in the panel

Scenario: Theming and states
  Given global decorators are configured
  When I toggle between light and dark themes
  Then the story re-renders with appropriate tokens
  And stories exist for hover, focus, disabled, and error states where applicable

Scenario: Build static docs
  When I run "npm run build:storybook"
  Then a static Storybook is produced in "storybook-static"
  And the CI pipeline builds Storybook without errors