eslint-plugin-stories

ESLint rules for Storybook stories.

In particular, these rules ensure that stories can be used in non-Storybook contexts. For example, for accessibility testing via axe-storybook-testing, or visual regression testing via percy-storybook.

Installation

Install @chanzuckerberg/eslint-plugin-stories with your favorite package manager. With yarn, that would look like

yarn add --dev @chanzuckerberg/eslint-plugin-stories

Usage

Add @chanzuckerberg/stories as a plugin in your eslint configuration file.

// .eslintrc.json
{
  "plugins": ["@chanzuckerberg/stories"]
}

Then you can either extend the recommended config to turn on all the rules

// .eslintrc.json
{
  "extends": ["plugin:@chanzuckerberg/stories/recommended"]
}

or configure the rules individually

// .eslintrc.json
{
  "rules": {
    "@chanzuckerberg/stories/no-ext-resources-in-stories": "warn"
  }
}

Rules

| Name | Description | Config | | ------------------------------ | ---------------------------------------------------------------------------------------------------------- | ----------- | | csf-object-literal-or-function | Enforce that stories are either an object literal or function. | recommended | | csf-v3-types | Enforce component story format (CSF) v3 stories have explicit TypeScript types where needed for inferrence | strict | | no-csf-v2 | Use object stories (component story format v3) instead of functions. | strict | | no-ext-resources-in-stories | Prevent external resources from being loaded in stories. | recommended | | no-components-without-story | Enforce that new components are created with a corresponding story | strict |