Quick Start: Storybook + App Integration

🌐 Live Storybook (for stakeholders)

View components online (no local setup needed):

• Production: https://storybook.ourlantern.app
• Development: https://storybook.dev.ourlantern.app

For setup: See STORYBOOK_SETUP_GUIDE.md

---

✅ Issues Fixed

1. Vim swap files removed - "Open in editor" should now work
2. Controls enabled - All component stories now have interactive controls
3. Component created - Button.jsx now exists as a reusable component
4. App updated - Button component is now used in the home page

🎯 The Simple Answer

Storybook doesn't create separate components - it DOCUMENTS the same components you use in your app.

Component (Button.jsx)
   │
   ├──→ imported by Story (Button.stories.jsx) → Shows in Storybook
   │
   └──→ imported by App (App.jsx) → Shows in your app

🚀 See It In Action

In Storybook (http://localhost:6007)

1. Click Components → Button → Primary
2. Use the Controls panel to change text and variant
3. Click "Open canvas in new tab" or "Open in editor" (now works!)

In Your App (http://localhost:5173)

1. Look at the home page
2. See the same Button component working
3. Click the buttons - they trigger alerts

In Your Code

• Component: src/components/Button.jsx
• Story: src/components/Button.stories.jsx
• Used in: src/App.jsx (lines 81-88)

📝 Quick Reference

To Create a New Component:

// 1. Create the component
// src/components/MyComponent.jsx
export default function MyComponent({ prop1, prop2 }) {
  return <div>{prop1} - {prop2}</div>
}

// 2. Create the story
// src/components/MyComponent.stories.jsx
import MyComponent from './MyComponent'

export default {
  title: 'Components/MyComponent',
  component: MyComponent,
  argTypes: {
    prop1: { control: 'text' },
    prop2: { control: 'number' }
  }
}

export const Default = {
  args: { prop1: 'Hello', prop2: 42 }
}

// 3. Use in your app
// src/App.jsx (or anywhere)
import MyComponent from './components/MyComponent'

<MyComponent prop1="World" prop2={100} />

🔄 Development Cycle

1. Build in Storybook - Create/test component variants
2. Save changes - Changes appear in BOTH Storybook and app instantly
3. Use in app - Import and use wherever needed
4. Iterate - Make changes, see updates everywhere

🛠️ Current Running Services

• Storybook: http://localhost:6007 (component development)
• App: http://localhost:5173 (your actual application)

Both are using the SAME components from src/components/.

📚 More Details

See STORYBOOK_WORKFLOW.md for the complete explanation.