Storybook Patterns

Component stories, addons, visual testing, and documentation generation.

Overview

Storybook provides an isolated environment for developing and testing UI components.

Key Concepts

• Stories — Show component variations and states
• Addons — Extend Storybook functionality
• Controls — Interactive prop editing
• Actions — Log component events
• Visual Testing — Catch visual regressions

Code Examples

// Button.stories.jsx
import { Button } from './Button';

export default {
  title: 'Components/Button',
  component: Button,
  argTypes: {
    variant: { control: 'select', options: ['primary', 'secondary', 'danger'] },
    size: { control: 'select', options: ['sm', 'md', 'lg'] },
    disabled: { control: 'boolean' }
  }
};

const Template = (args) => <Button {...args} />;

export const Primary = Template.bind({});
Primary.args = { children: 'Primary', variant: 'primary' };

export const Secondary = Template.bind({});
Secondary.args = { children: 'Secondary', variant: 'secondary' };

export const Disabled = Template.bind({});
Disabled.args = { children: 'Disabled', disabled: true };

export const AllSizes = () => (
  <div style={{ display: 'flex', gap: '10px', alignItems: 'center' }}>
    <Button size="sm">Small</Button>
    <Button size="md">Medium</Button>
    <Button size="lg">Large</Button>
  </div>
);

// With addons
import { withActions } from '@storybook/addon-actions/decorator';

export default {
  title: 'Components/Input',
  component: Input,
  decorators: [withActions],
  parameters: {
    actions: {
      handles: ['change', 'focus', 'blur']
    }
  }
};

// Visual testing setup
// .storybook/main.js
module.exports = {
  stories: ['../src/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: [
    '@storybook/addon-essentials',
    '@storybook/addon-interactions',
    '@storybook/addon-a11y'
  ]
};

Practice

Create Storybook stories for a component library with visual regression testing.