Storybook

Storybook is a React UI development environment that enables developers to build components in isolation with hot reloading. It provides a complete development ecosystem for creating, testing, and documenting React components outside of the main application.

Package Information

• Package Name: @kadira/storybook
• Package Type: npm
• Language: JavaScript/TypeScript
• Installation: npm install @kadira/storybook

Core Imports

import { storiesOf, configure, addDecorator, clearDecorators, setAddon, getStorybook, action, linkTo } from '@kadira/storybook';

For CommonJS:

const { storiesOf, configure, addDecorator, clearDecorators, setAddon, getStorybook, action, linkTo } = require('@kadira/storybook');

Basic Usage

import { storiesOf, configure, action } from '@kadira/storybook';
import Button from '../src/Button';

// Configure stories
configure(() => {
  require('./button.stories');
}, module);

// Create story collection
storiesOf('Button', module)
  .add('default', () => (
    <Button onClick={action('clicked')}>Hello Button</Button>
  ))
  .add('with text', () => (
    <Button onClick={action('clicked')}>Click Me</Button>
  ));

Architecture

Storybook is built around several key components:

• Client API: Main interface for creating and organizing stories (storiesOf, configure)
• Story Collections: Organized groups of component variations with chaining API
• Decorator System: Global and local component wrapper functions for consistent presentation
• Addon System: Extensible plugin architecture for additional functionality
• Development Server: Hot-reloading server for component development
• Build System: Static site generation for deployment

Capabilities

Story Creation

Core functionality for creating and organizing component stories. Stories are individual states of components that can be developed and tested in isolation.

function storiesOf(kind: string, module?: any): Story;

interface Story {
  add(storyName: string, storyFunction: Function): Story;
  addDecorator(decorator: StoryDecorator): Story;
  kind: string;
}

Story Management

Configuration

System configuration for loading and organizing stories with hot module replacement support.

function configure(loaders: Function, module?: any): void;

Configuration

Decorators

Global and local component wrapper system for consistent styling and context provision across stories.

function addDecorator(decorator: StoryDecorator): void;
function clearDecorators(): void;

interface StoryDecorator {
  (story: Function, context: {kind: string, story: string}): Object;
}

Decorators

Addon System

Extensible plugin system for adding custom functionality to the Storybook interface and development workflow.

function setAddon(addon: Object): void;

Addons

Built-in Actions

Built-in action logging system for capturing and displaying component interactions during development.

function action(name: string, ...params: any[]): Function;

Actions and Links

Development Server

Command-line interface for running the development server with hot reloading and various configuration options.

start-storybook -p 6006 -c .storybook
build-storybook -c .storybook -o storybook-static

CLI Commands

Types

interface StoryDecorator {
  (story: Function, context: {kind: string, story: string}): Object;
}

interface Story {
  add(storyName: string, storyFunction: Function): Story;
  addDecorator(decorator: StoryDecorator): Story;
  kind: string;
}