Adding Storybook Stories - Quick Guide

CSF 3.0 Format (Recommended)

Use this format for stories with interactive controls:

import React from 'react'
import '../tailwind.css'
import '../styles.css'
import YourComponent from './YourComponent'

export default {
  title: 'Components/YourComponent',
  component: YourComponent,
  tags: ['autodocs'],
  argTypes: {
    // Define controls for each prop
    propName: {
      control: 'text', // or 'select', 'boolean', 'number', etc.
      description: 'Description of this prop'
    },
    variant: {
      control: 'select',
      options: ['option1', 'option2'],
      description: 'Choose a variant'
    },
    size: {
      control: { type: 'range', min: 12, max: 64, step: 4 },
      description: 'Size control'
    }
  }
}

// Each story as an object with args
export const Default = {
  args: {
    propName: 'Default value',
    variant: 'option1'
  }
}

export const Variant2 = {
  args: {
    propName: 'Another value',
    variant: 'option2'
  }
}

Control Types

• text - Text input
• boolean - Checkbox
• number - Number input
• select - Dropdown with options
• radio - Radio buttons
• range - Slider with min/max
• color - Color picker
• date - Date picker
• object - JSON editor
• array - Array editor

Example: Button Component

export default {
  title: 'Components/Button',
  component: Button,
  tags: ['autodocs'],
  argTypes: {
    children: {
      control: 'text',
      description: 'Button text'
    },
    variant: {
      control: 'select',
      options: ['primary', 'secondary', 'ghost'],
      description: 'Visual style variant'
    },
    disabled: {
      control: 'boolean',
      description: 'Disabled state'
    },
    onClick: {
      action: 'clicked', // Shows in Actions panel
      description: 'Click handler'
    }
  }
}

export const Primary = {
  args: {
    variant: 'primary',
    children: 'Click me'
  }
}

Legacy CSF 2.0 Format (Function Stories)

This format works but won't have controls:

export const Example = () => <Component prop="value" />

Convert to CSF 3.0 for interactive controls!

"Open in Editor" Feature

The "Open in Editor" feature in Storybook requires:

1. Running Storybook in VSCode (not just browser)
2. Using the VSCode Simple Browser or Preview
3. Proper VSCode integration

To use:

1. Start Storybook: npm run storybook
2. In VSCode, press Cmd+Shift+P (Mac) or Ctrl+Shift+P (Windows/Linux)
3. Type "Simple Browser: Show" and enter http://localhost:6006
4. Now "Open in Editor" should work within VSCode

Common Issues

No Controls Panel

• Make sure your story uses CSF 3.0 format (objects with args)
• Check that argTypes are defined
• Verify component is specified in export default

"Open in Editor" Not Working

• Use VSCode Simple Browser instead of external browser
• Ensure VSCode has file permissions
• Check that story files are in workspace

See Also

• Button.stories.jsx - Example with controls
• Icon.stories.jsx - Multiple stories with controls
• Storybook CSF Documentation