Storybook — Prototyping & Component Explorer

This project includes Storybook as a component explorer and lightweight prototyping environment.

Quick Access

Live Storybook (for stakeholders and team):

• Production: https://storybook.ourlantern.app — Stable, production-ready components
• Development: https://storybook.dev.ourlantern.app — Latest work-in-progress components

For stakeholders: See STAKEHOLDER_GUIDE.md for how to view and interact with components. For developers: See STORYBOOK_DEPLOYMENT.md for deployment setup.

---

Why use Storybook for prototypes?

• Isolate components and UI states without running the full app.
• Iterate quickly on components and variations (props/args, states, and edge cases).
• Use the Docs and Controls panels to create shareable, interactive documentation for components.
• Integrate visual regression (Chromatic or Playwright snapshots) for CI checks.

Quick commands

• Run Storybook (dev):

  npm run storybook
  # open http://localhost:6006

• Build static Storybook for sharing:

  npm run build-storybook
  # output -> storybook-static/

Where stories live

• Stories are colocated in src/*.stories.jsx (examples: src/components/Button.stories.jsx, src/stories/Colors.stories.jsx).
• Add new stories under src/ using the pattern *.stories.jsx or *.stories.mdx.
• Note: the style guide previously available in-app is now surfaced in Storybook under Style/Colors and Components/ stories.

Adding a basic story (example)

// src/components/MyButton.stories.jsx
import React from 'react'
import '../src/tailwind.css'
import '../src/styles.css'
import MyButton from './MyButton'

export default { title: 'Components/MyButton', component: MyButton }
export const Default = () => <MyButton>Click me</MyButton>

Tips

• Import global CSS (tailwind.css and styles.css) in your story files to ensure stories render with the same tokens and styles as the app.
• Use args/controls to make stories interactive and useful for designers and reviewers.
• For visual tests, use Storybook + Chromatic (easy cloud snapshots) or Playwright snapshots in CI.

Running tests

• Unit & snapshot tests run via Vitest: npm test (or npx vitest run -u to update snapshots).

Next steps we can do for prototyping

• Add more stories for key components and app flows.
• Configure Chromatic for automatic visual diffs and CI approvals.
• Add Storybook Docs pages (MDX) for component usage guidance.

If you want, I can scaffold Chromatic integration and add recommended CI steps for visual review and gating.