@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

9.0.8

• Addon Docs: Fix SyntaxHighlighter "Copy" button by avoiding potentially mocked clipboard - #31682, thanks @ghengeveld!
• Addon Themes: Define missing React dependencies - #31688, thanks @ghengeveld!
• Addon-vitest: Fix adding with --skip-install failing missing packageJson invariant - #31720, thanks @JReinhold!
• AddonDocs: Remove export of blocks - #31724, thanks @ndelangen!
• Automigration: Enhance removeEssentials to convert options - #31658, thanks @ndelangen!
• CLI: Don't install addon-onboarding during minimal installs - #31616, thanks @ghengeveld!

[!NOTE]
Version 9.0.7 was skipped because of a bad release of eslint-plugin-storybook.