Back to Storybook

story-exports

code/lib/eslint-plugin/docs/rules/story-exports.md

10.3.61.3 KB
Original Source

story-exports

<!-- RULE-CATEGORIES:START -->

Included in these configurations: <ul><li>recommended</li><li>flat/recommended</li><li>csf</li><li>flat/csf</li><li>csf-strict</li><li>flat/csf-strict</li></ul>

<!-- RULE-CATEGORIES:END -->

Rule Details

In CSF, a story file should contain a default export that describes the component, and named exports that represent the stories. This rule enforces the definition of at least one named export in story files.

Examples of incorrect code for this rule:

js
export default {
  title: "Button",
  args: { primary: true },
  component: Button,
};
// no named export

Examples of correct code for this rule:

js
export default {
  title: "Button",
  args: { primary: true },
  component: Button,
};
export const Primary = {}; // at least one named export!

When Not To Use It

This rule should only be applied in your .stories.* files. Please ensure that you define the Storybook rules only for story files. You can see more details here.

Further Reading

More information about defining stories here: https://storybook.js.org/docs/writing-stories#defining-stories