@storybook/react

Component Story Format (CSF)

CSF is an ES Module-based standard for defining component examples. This format is simple and portable. Developers can write their component stories in plain JavaScript objects.

import React from 'react';
import { Button } from './Button';

export default {
  title: 'Example/Button',
  component: Button,
};

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

export const Primary = Template.bind({});
Primary.args = {
  primary: true,
  label: 'Button',
};

Addons

Addons are essentially plugins that extend Storybook's core functionalities. With addons, developers can add features like knobs to dynamically change props, accessibility checks, and story source code display.

import { withKnobs, text, boolean, number } from '@storybook/addon-knobs';

export default {
  title: 'Example/Button',
  decorators: [withKnobs],
};

export const DynamicVariables = () => {
  const name = text('Name', 'Aragon');
  const age = number('Age', 30);
  const content = `I am ${name} and I'm ${age} years old.`;
  return <div>{content}</div>;
};

Controls

Controls give the ability to interact with a component's arguments dynamically without needing to code. It's a more robust version of the addon-knobs but built into Storybook by default.

export default {
  title: 'Example/Button',
  component: Button,
  argTypes: {
    backgroundColor: { control: 'color' },
    size: {
      control: { type: 'select', options: ['small', 'medium', 'large'] },
    },
  },
};

export const Primary = (args) => <Button {...args} />;
Primary.args = {
  primary: true,
  label: 'Button',
};