Accessing Storybook — Quick Guide for Stakeholders

This guide is for designers, product managers, and stakeholders who want to view and interact with Lantern's component library.

What is Storybook?

Storybook is an interactive component library where you can:

• Browse all UI components used in the Lantern app
• See component variations (different states, sizes, colors)
• Interact with components (click buttons, fill forms, etc.)
• View documentation for each component
• Copy code examples for developers

Think of it as a living style guide and component showcase.

---

How to Access Storybook

Production (Stable)

URL: https://storybook.ourlantern.app

This version shows components from the main branch (production-ready).

Development (Latest Features)

URL: https://storybook.dev.ourlantern.app

This version shows the latest components being developed (may have work-in-progress features).

Feature Preview (Branch-Specific)

When reviewing a specific feature branch, you'll get a preview URL like:

https://[branch-name].lantern-storybook-dev.pages.dev

Your developer or designer will share this URL in pull requests, Slack, or design handoffs.

---

Navigating Storybook

Sidebar Navigation

The left sidebar shows all components organized by category:

📁 Style
  ├── Colors
  └── Icons
📁 Components
  ├── Button
  ├── Icon
  ├── LanternBadge
  └── ... more components
📁 Screens
  ├── Dashboard
  ├── Profile
  └── ... more screens

Click any component to view it.

Component View

Each component page has two tabs:

1. Canvas — Interactive view

   • See the component in action
   • Use the "Controls" panel (bottom) to change props
   • Try different states and variations

2. Docs — Documentation view

   • Component description
   • Usage examples
   • Props/API reference
   • Code snippets

---

Using the Controls Panel

The Controls panel lets you interact with components in real-time.

Example: Viewing a Button component

1. Click "Components/Button" in the sidebar
2. Look at the bottom panel labeled "Controls"
3. You'll see options like:
   • variant: primary, secondary, outline, ghost
   • size: small, medium, large
   • disabled: toggle on/off
4. Change any control to see the button update instantly

This is great for:

• Seeing all possible variations
• Testing edge cases
• Getting design feedback

---

Sharing Specific Components

Direct Link to a Component

To share a specific component:

1. Navigate to the component in Storybook
2. Copy the URL from your browser
3. Share it with your team

Example URLs:

https://storybook.ourlantern.app/?path=/story/components-button--default
https://storybook.ourlantern.app/?path=/docs/components-lanternbadge--docs

Canvas-Only View (Clean Embed)

To show just the component without the sidebar/panels:

1. Click the "Open canvas in new tab" button (top-right)
2. Or add /iframe.html to the URL:

   https://storybook.ourlantern.app/iframe.html?id=components-button--default

This is useful for:

• Design presentations
• Embedding in documents
• Clean screenshots

---

Common Use Cases

For Designers

Reviewing component variations:

1. Go to the component in Storybook
2. Use Controls to try different props
3. Take screenshots or notes
4. Provide feedback in your design tool or Slack

Checking design tokens (colors, spacing):

1. Go to "Style/Colors" in the sidebar
2. See all color variables used in the app
3. Verify consistency with your design system

For Product Managers

Understanding available components:

1. Browse the "Components" section
2. Read the Docs tab for each component
3. See what's already built (reuse before requesting new)

Previewing new features:

1. Open the feature branch preview URL (shared by developer)
2. Review the new components or changes
3. Provide feedback in the pull request

For Developers

Finding components to reuse:

1. Search for similar components in the sidebar
2. Check the Docs tab for usage examples
3. Copy code snippets to use in your work

Sharing work-in-progress:

1. Push your branch with new stories
2. Share the auto-generated preview URL
3. Get feedback before merging

---

Tips & Tricks

Keyboard Shortcuts

• s — Focus search
• f — Toggle fullscreen
• a — Toggle addons panel (bottom)
• d — Toggle dark mode (if available)

Search

Click the search bar (top-left) or press s to search for components by name.

Zoom

Most stories include zoom controls or you can use your browser's zoom (Cmd/Ctrl + +/-).

Mobile View

Some stories support mobile viewport. Look for viewport controls in the toolbar (top).

---

Troubleshooting

Storybook Won't Load

Check your URL:

• Production: storybook.ourlantern.app (no www)
• Development: storybook.dev.ourlantern.app

Check access:

• Storybook is public by default (no login needed)
• If you see a login screen, contact your team lead for credentials

Component Looks Wrong

Environment mismatch:

• Make sure you're viewing the right version (prod vs dev)
• Feature branches may have work-in-progress styling

Browser compatibility:

• Use a modern browser (Chrome, Firefox, Safari, Edge)
• Clear cache if components look outdated

Can't Find a Component

Search:

• Use the search bar (press s)
• Components may be organized under different categories

Not yet in Storybook:

• Some components may exist in the app but not have stories yet
• Ask your developer to add a story for it

---

Requesting Changes or New Components

Found a bug or inconsistency?

1. Take a screenshot
2. Note the URL of the specific story
3. Share in Slack, Jira, or your issue tracker
4. Tag the responsible developer or designer

Need a new component?

1. Check if a similar component exists in Storybook
2. Document your requirements (purpose, variations, states)
3. Create a ticket or design spec
4. Work with your developer to add it

---

Getting Help

• Developer documentation: See docs/storybook/STORYBOOK.md for technical details
• Deployment guide: See docs/engineering/deployment/STORYBOOK_DEPLOYMENT.md
• Team Slack: Ask in your #design or #engineering channel

---

Summary

What	Where
View stable components	storybook.ourlantern.app
View latest components	storybook.dev.ourlantern.app
Interact with components	Use the Controls panel (bottom)
Read documentation	Click the "Docs" tab on any component
Share a component	Copy the URL from your browser
View clean (no UI)	Use /iframe.html URLs or "Open canvas" button

---

Questions? Reach out to your engineering or design team!