@chanzuckerberg/eslint-plugin-stories

ESLint rules for Storybook stories.

Usage no npm install needed!

<script type="module">
  import chanzuckerbergEslintPluginStories from 'https://cdn.skypack.dev/@chanzuckerberg/eslint-plugin-stories';
</script>

README

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-jest-in-stories": "warn",
    "@chanzuckerberg/stories/no-top-level-story-args": "warn",
    "@chanzuckerberg/stories/stories-default-export": "warn"
  }
}

Rules

Name Description
no-ext-resources-in-stories Prevent external resources from being loaded in stories.
no-jest-in-stories Prevent Jest functions from being used in stories, since they can't run in non-Jest environments.
no-story-decorators Don't allow the use of decorators at the component or story level. Not allowing these makes it easier to re-use the stories outside of Storybook.
no-top-level-story-args Don't allow "args" to be defined in the default export of a stories file. Not allowing those makes it easier to re-use the stories in environments where Storybook is not present.
stories-default-export Enforce that required properties are present in the default export of a stories file.