@storybook/addon-controls

What is @storybook/addon-controls?

The @storybook/addon-controls package allows developers to interact with component inputs dynamically within the Storybook UI. It provides a way to edit props, slots, styles, and other arguments of the components being tested in real-time. This addon generates a user interface for tweaking these inputs without needing to write any additional code.

What are @storybook/addon-controls's main functionalities?

Dynamic Props Editing

Allows users to dynamically edit the props of a component from within the Storybook UI. The code sample shows how to set up controls for a Button component, including a color picker for the backgroundColor prop and an action logger for the onClick event.

export default {
  title: 'Button',
  component: Button,
  argTypes: {
    backgroundColor: { control: 'color' },
    onClick: { action: 'clicked' }
  },
};

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

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

Custom Controls

Enables the creation of custom controls for component arguments, such as dropdowns, checkboxes, and more. The code sample demonstrates how to create a select control for the 'size' prop of an Input component.

export default {
  title: 'Form/Input',
  component: Input,
  argTypes: {
    size: {
      control: {
        type: 'select',
        options: ['small', 'medium', 'large']
      }
    }
  }
};

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

export const Medium = Template.bind({});
Medium.args = {
  size: 'medium',
  placeholder: 'Type here...'
};

Live Editing of Args

Provides a way to live edit the 'args' of a story, which are the arguments that get passed to the component being rendered. The code sample shows a text control for the 'content' prop of a Panel component.

export default {
  title: 'Dashboard/Panel',
  component: Panel,
  argTypes: {
    content: { control: 'text' }
  }
};

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

export const DefaultPanel = Template.bind({});
DefaultPanel.args = {
  content: 'Default content',
};

Other packages similar to @storybook/addon-controls

@storybook/addon-knobs

This package is a predecessor to @storybook/addon-controls and offers similar functionality for changing props and other inputs of components within Storybook. However, addon-controls is more integrated with Storybook's Component Story Format (CSF) and offers a better developer experience with less boilerplate code.

@storybook/addon-actions

While not providing the same UI for editing component inputs, @storybook/addon-actions allows developers to log and monitor events that occur on interactive components within Storybook. It complements the functionality of addon-controls by providing insight into how components respond to user actions.

@storybook/addon-backgrounds

This addon allows users to change the background colors behind their components within the Storybook preview. It is different from addon-controls but offers a complementary feature that enhances the visual testing capabilities of Storybook.

README

The README file is missing

Changelog

8.6.1

• CSF: Only export definePreview from the framework - #30676, thanks @kasperpeulen!
• Codemod: Only remove types when they are unused - #30644, thanks @yannbf!