@storybook/react-webpack5

Developing UI components in isolation

Allows developers to create stories for their components, which are visual representations of different states of UI components.

import { storiesOf } from '@storybook/react';
import MyButton from './MyButton';

storiesOf('Button', module)
  .add('with text', () => <MyButton>Hello Button</MyButton>)
  .add('with emoji', () => <MyButton>😀 😎 👍 💯</MyButton>);

Custom Webpack configuration

Enables developers to customize the Webpack configuration used by Storybook to match the needs of their project.

module.exports = {
  stories: ['../src/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
  webpackFinal: async (config, { configType }) => {
    // Custom Webpack configuration goes here
    return config;
  }
};

Interactive controls to manipulate component states

Provides a set of tools to create interactive controls for manipulating the props of the components, allowing for dynamic testing of different states.

import { ComponentStory, ComponentMeta } from '@storybook/react';
import MyButton from './MyButton';

export default {
  title: 'Button',
  component: MyButton,
  argTypes: { backgroundColor: { control: 'color' } },
} as ComponentMeta<typeof MyButton>;

const Template: ComponentStory<typeof MyButton> = (args) => <MyButton {...args} />;

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