Skip to content

only-csf3.md

Latest commit

 

History

History
151 lines (116 loc) · 3.94 KB

only-csf3.md

File metadata and controls

151 lines (116 loc) · 3.94 KB

Enforce CSF3 format for stories (only-csf3)

Component Story Format 3.0 (CSF3) is the latest iteration of Storybook's story format, offering a simpler and more maintainable way to write stories. This rule enforces the use of CSF3 by identifying and reporting CSF2 patterns.

Included in these configurations: N/A

Rule Details

This rule aims to prevent the use of CSF2 patterns in story files and encourage migration to CSF3.

Examples of incorrect code:

// ❌ CSF2: Using Template.bind({})
const Template = (args) => <Button {...args} />;
export const Primary = Template.bind({});
Primary.args = { label: 'Primary' };

// ❌ CSF2: Story function declaration
export function Secondary(args) {
  return <Button {...args} />;
}

// ❌ CSF2: Story arrow function
export const Tertiary = () => <Button>Click me</Button>;

// ❌ CSF2: Story with property assignments
export const WithArgs = Template.bind({});
WithArgs.args = { label: 'With Args' };
WithArgs.parameters = { layout: 'centered' };

// ❌ CSF2: Template.bind({}) with multiple stories
const Template = (args) => <Button {...args} />;

export const Primary = Template.bind({});
Primary.args = { label: 'Primary', variant: 'primary' };
Primary.parameters = { backgrounds: { default: 'light' } };

export const Secondary = Template.bind({});
Secondary.args = { label: 'Secondary', variant: 'secondary' };
Secondary.parameters = { backgrounds: { default: 'dark' } };

Examples of correct code:

// ✅ CSF3: Object literal with args
export const Primary = {
  args: {
    label: 'Primary',
  },
};

// ✅ CSF3: Object literal with render function
export const Secondary = {
  render: (args) => <Button {...args}>Secondary</Button>,
};

// ✅ CSF3: Multiple stories sharing render logic
const render = (args) => <Button {...args} />;

export const Primary = {
  render,
  args: { label: 'Primary', variant: 'primary' },
  parameters: { backgrounds: { default: 'light' } },
};

export const Secondary = {
  render,
  args: { label: 'Secondary', variant: 'secondary' },
  parameters: { backgrounds: { default: 'dark' } },
};

When Not To Use It

If you're maintaining a legacy Storybook project that extensively uses CSF2 patterns and cannot migrate to CSF3 yet, you might want to disable this rule.

Migration Examples

Here are examples of how to migrate common CSF2 patterns to CSF3:

  1. Template.bind({}) with args:
// ❌ CSF2
const Template = (args) => <Button {...args} />;
export const Primary = Template.bind({});
Primary.args = { label: 'Primary' };

// ✅ CSF3
export const Primary = {
  render: (args) => <Button {...args} />,
  args: { label: 'Primary' },
};
  1. Function declaration stories:
// ❌ CSF2
export function Primary(args) {
  return <Button {...args}>Primary</Button>;
}

// ✅ CSF3
export const Primary = {
  render: (args) => <Button {...args}>Primary</Button>,
};
  1. Story with multiple properties:
// ❌ CSF2
export const Primary = Template.bind({});
Primary.args = { label: 'Primary' };
Primary.parameters = { layout: 'centered' };
Primary.decorators = [
  (Story) => (
    <div style={{ padding: '1rem' }}>
      <Story />
    </div>
  ),
];

// ✅ CSF3
export const Primary = {
  render: (args) => <Button {...args} />,
  args: { label: 'Primary' },
  parameters: { layout: 'centered' },
  decorators: [
    (Story) => (
      <div style={{ padding: '1rem' }}>
        <Story />
      </div>
    ),
  ],
};

Further Reading