diff --git a/code/lib/eslint-plugin/docs/rules/await-interactions.md b/code/lib/eslint-plugin/docs/rules/await-interactions.md index ee0a4e28512b..16cde9402495 100644 --- a/code/lib/eslint-plugin/docs/rules/await-interactions.md +++ b/code/lib/eslint-plugin/docs/rules/await-interactions.md @@ -8,12 +8,12 @@ ## Rule Details -Storybook provides an instrumented version of testing library in the [@storybook/test](https://github.com/storybookjs/storybook/tree/next/code/core/src/test) library (formerly available in [@storybook/testing-library](https://github.com/storybookjs/testing-library/) library). When [writing interactions](https://storybook.js.org/docs/essentials/interactions), make sure to **await** them, so that addon-interactions can intercept these helper functions and allow you to step through them when debugging. +Storybook provides an instrumented version of the testing library in the [storybook/test](https://github.com/storybookjs/storybook/tree/next/code/core/src/test) core package (formerly available in [@storybook/testing-library](https://github.com/storybookjs/testing-library/)). When [writing interactions](https://storybook.js.org/docs/writing-tests/interaction-testing#writing-interaction-tests), make sure to **await** them, so that addon-interactions can intercept these helper functions and allow you to step through them when debugging. Examples of **incorrect** code for this rule: ```js -import { userEvent, within } from '@storybook/test'; +import { userEvent, within } from 'storybook/test'; // or from the legacy package "@storybook/testing-library"; @@ -27,7 +27,7 @@ MyStory.play = (context) => { Examples of **correct** code for this rule: ```js -import { userEvent, within } from '@storybook/test'; +import { userEvent, within } from 'storybook/test'; // or from the legacy package "@storybook/testing-library"; @@ -40,4 +40,4 @@ MyStory.play = async (context) => { ## When Not To Use It -This rule should not be applied in test files. Please ensure you are defining the storybook rules only for story files. You can see more details [here](https://github.com/storybookjs/storybook/blob/next/code/lib/eslint-plugin#overridingdisabling-rules). +This rule should not be applied in test files. Please ensure you are defining the Storybook rules only for story files. You can see more details [here](https://github.com/storybookjs/storybook/blob/next/code/lib/eslint-plugin#overridingdisabling-rules). diff --git a/code/lib/eslint-plugin/docs/rules/context-in-play-function.md b/code/lib/eslint-plugin/docs/rules/context-in-play-function.md index 1bf10226b2b2..b0774b81195f 100644 --- a/code/lib/eslint-plugin/docs/rules/context-in-play-function.md +++ b/code/lib/eslint-plugin/docs/rules/context-in-play-function.md @@ -64,4 +64,4 @@ MyStory.play = ({ context, canvasElement }) => { ## When Not To Use It -This rule should not be applied in test files. Please ensure you are defining the storybook rules only for story files. You can see more details [here](https://github.com/storybookjs/storybook/blob/next/code/lib/eslint-plugin#overridingdisabling-rules). +This rule should not be applied in test files. Please ensure you are defining the Storybook rules only for story files. You can see more details [here](https://github.com/storybookjs/storybook/blob/next/code/lib/eslint-plugin#overridingdisabling-rules). diff --git a/code/lib/eslint-plugin/docs/rules/csf-component.md b/code/lib/eslint-plugin/docs/rules/csf-component.md index 286851ac5d83..c37678324a05 100644 --- a/code/lib/eslint-plugin/docs/rules/csf-component.md +++ b/code/lib/eslint-plugin/docs/rules/csf-component.md @@ -8,7 +8,7 @@ ## Rule Details -This rule encourages you to set the `component` property of your CSF default export. The `component` property is optional, but configuring unlocks a variety of features in Storybook, including automatic prop table documentation in most frameworks, auto-generated controls for dynamically editing your stories, and in CSF3, a resonable default for rendering your component without having to define a render function. +This rule encourages you to set the `component` property of your CSF default export. The `component` property is optional, but configuring it unlocks a variety of features in Storybook, including automatic prop table documentation in most frameworks, auto-generated controls for dynamically editing your stories, and, in CSF3, a reasonable default for rendering your component without having to define a render function. Examples of **incorrect** code for this rule: @@ -29,8 +29,8 @@ export default { ## When Not To Use It -While we encourage each CSF file to clearly correspond to a single component, it's possible to organize a Storybook in any way you choose. If you have some other organization scheme, this rule might not apply to you. +While we encourage each CSF file to clearly correspond to a single component, it's possible to organize a Storybook in any way you choose. If you have a different organizational scheme, this rule may not apply to you. ## Further Reading -- [Automatic argType inference](https://storybook.js.org/docs/api/argtypes#automatic-argtype-inference) +- [Automatic argType inference](https://storybook.js.org/docs/api/arg-types#automatic-argtype-inference) diff --git a/code/lib/eslint-plugin/docs/rules/default-exports.md b/code/lib/eslint-plugin/docs/rules/default-exports.md index fba35ab71c32..57393270964b 100644 --- a/code/lib/eslint-plugin/docs/rules/default-exports.md +++ b/code/lib/eslint-plugin/docs/rules/default-exports.md @@ -30,7 +30,7 @@ export const Primary = {}; ## When Not To Use It -This rule should only be applied in your `.stories.*` files. Please ensure you are defining the storybook rules only for story files. You can see more details [here](https://github.com/storybookjs/storybook/blob/next/code/lib/eslint-plugin#overridingdisabling-rules). +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](https://github.com/storybookjs/storybook/blob/next/code/lib/eslint-plugin#overridingdisabling-rules). If you're using Storybook 6.5 and [CSF in MDX](https://github.com/storybookjs/storybook/blob/v6.5.0/addons/docs/docs/recipes.md#csf-stories-with-mdx-docs), you should disable this rule for the stories that use CSF in MDX. You can see how to override the rule [here](https://github.com/storybookjs/storybook/blob/next/code/lib/eslint-plugin#overridingdisabling-rules). diff --git a/code/lib/eslint-plugin/docs/rules/hierarchy-separator.md b/code/lib/eslint-plugin/docs/rules/hierarchy-separator.md index cc400b959c4d..ce5dfb0ed340 100644 --- a/code/lib/eslint-plugin/docs/rules/hierarchy-separator.md +++ b/code/lib/eslint-plugin/docs/rules/hierarchy-separator.md @@ -8,7 +8,7 @@ ## Rule Details -Since Storybook 6.0, the ability to specify the hierarchy separators (how you control the grouping of story kinds in the sidebar) was removed. There is now a single separator `/`, which cannot be configured. If you are using `|` or `.` as a separator, you should change all of them to `/`. +Since Storybook 6.0, the ability to specify the hierarchy separators (how you control the grouping of story kinds in the sidebar) has been removed. There is now a single separator `/`, which cannot be configured. If you are using `|` or `.` as a separator, you should change all of them to `/`. Examples of **incorrect** code for this rule: diff --git a/code/lib/eslint-plugin/docs/rules/meta-satisfies-type.md b/code/lib/eslint-plugin/docs/rules/meta-satisfies-type.md index c0167086a878..52afe887e3a8 100644 --- a/code/lib/eslint-plugin/docs/rules/meta-satisfies-type.md +++ b/code/lib/eslint-plugin/docs/rules/meta-satisfies-type.md @@ -8,9 +8,9 @@ ## Rule Details -This rule enforces writing `satisfies Meta` after the meta object definition. This is useful to ensure that stories use the correct properties in the metadata. +This rule enforces writing `satisfies Meta` after the definition of the meta object. This is useful to ensure that stories use the correct properties in the metadata. -Additionally, `satisfies` is preferred over type annotations (`const meta: Meta = {...}`) and type assertions (`const meta = {...} as Meta`). This is because other types like `StoryObj` will check to see which properties are defined in meta and use it for increased type safety. Using type annotations or assertions hides this information from the type-checker, so satisfies should be used instead. +Additionally, `satisfies` is preferred over type annotations (`const meta: Meta = {...}`) and type assertions (`const meta = {...} as Meta`). This is because other types like `StoryObj` will check to see which properties are defined in meta and use them for increased type safety. Using type annotations or assertions hides this information from the type-checker, so `satisfies` should be used instead. Examples of **incorrect** code for this rule: @@ -56,4 +56,4 @@ If you aren't using TypeScript or you're using a version older than TypeScript 4 ## Further Reading -- [Improved type safety in Storybook 7](https://storybook.js.org/blog/improved-type-safety-in-storybook-7/?ref=storybookblog.ghost.io) +More information on writing stories with TypeScript: https://storybook.js.org/docs/writing-stories/typescript diff --git a/code/lib/eslint-plugin/docs/rules/no-redundant-story-name.md b/code/lib/eslint-plugin/docs/rules/no-redundant-story-name.md index ee9e4cd3436a..44079b842c52 100644 --- a/code/lib/eslint-plugin/docs/rules/no-redundant-story-name.md +++ b/code/lib/eslint-plugin/docs/rules/no-redundant-story-name.md @@ -29,4 +29,4 @@ export const PrimaryButton = { ## When Not To Use It -When you set a custom name for a story, it will make sure that the resolved story name will always be that same name, regardless if you rename the export later on. If that is your reason to keep story names set even if they are redundant, you should turn this rule off. +When you set a custom name for a story, it will ensure that the resolved story name will always be that same name, regardless of whether you rename the export later on. If that is your reason for keeping story names set, even if they are redundant, you should turn this rule off. diff --git a/code/lib/eslint-plugin/docs/rules/no-renderer-packages.md b/code/lib/eslint-plugin/docs/rules/no-renderer-packages.md index abe73dcc08c2..8fa50646898a 100644 --- a/code/lib/eslint-plugin/docs/rules/no-renderer-packages.md +++ b/code/lib/eslint-plugin/docs/rules/no-renderer-packages.md @@ -8,17 +8,17 @@ ## Rule Details -This rule prevents importing Storybook renderer packages directly in stories. Instead, you should use framework-specific packages that are designed for your build tool (e.g., Vite, webpack). +This rule prevents importing Storybook renderer packages directly into stories. Instead, use framework-specific packages designed for your build tool (e.g., Vite, Webpack). The rule will suggest appropriate framework packages based on which renderer you're trying to use: -- For `@storybook/html`: Use `@storybook/html-vite` or `@storybook/html-webpack5` -- For `@storybook/preact`: Use `@storybook/preact-vite` or `@storybook/preact-webpack5` -- For `@storybook/react`: Use `@storybook/nextjs`, `@storybook/react-vite`, `@storybook/react-webpack5`, `@storybook/react-native-web-vite`, or `@storybook/experimental-nextjs-vite` +- For `@storybook/html`: Use `@storybook/html-vite` +- For `@storybook/preact`: Use `@storybook/preact-vite` +- For `@storybook/react`: Use `@storybook/nextjs`, `@storybook/nextjs-vite`, `@storybook/react-vite`, `@storybook/react-webpack5`, or `@storybook/react-native-web-vite` - For `@storybook/server`: Use `@storybook/server-webpack5` -- For `@storybook/svelte`: Use `@storybook/svelte-vite`, `@storybook/svelte-webpack5`, or `@storybook/sveltekit` -- For `@storybook/vue3`: Use `@storybook/vue3-vite` or `@storybook/vue3-webpack5` -- For `@storybook/web-components`: Use `@storybook/web-components-vite` or `@storybook/web-components-webpack5` +- For `@storybook/svelte`: Use `@storybook/svelte-vite`, or `@storybook/sveltekit` +- For `@storybook/vue3`: Use `@storybook/vue3-vite` +- For `@storybook/web-components`: Use `@storybook/web-components-vite` Examples of **incorrect** code for this rule: @@ -34,22 +34,22 @@ Examples of **correct** code for this rule: ```js // Do use the appropriate framework package for your build tool import { something } from '@storybook/react-vite'; // For Vite -import { something } from '@storybook/vue3-webpack5'; // For Webpack 5 +import { something } from '@storybook/vue3-vite'; // For Vite import { something } from '@storybook/web-components-vite'; // For Vite import { something } from '@storybook/nextjs'; // For Next.js ``` ## When Not To Use It -If you have a specific need to use renderer packages directly in your stories, you can disable this rule. However, it's recommended to use the framework-specific packages as they are optimized for your build tool and provide better integration with your development environment. +If you have a specific need to use renderer packages directly in your stories, you can turn off this rule. However, it's recommended to use the framework-specific packages as they are optimized for your build tool and provide better integration with your development environment. ## Further Reading For more information about Storybook's framework-specific packages and build tools, see: -- [Storybook for React](https://storybook.js.org/docs/react/get-started/install) -- [Storybook for Vue](https://storybook.js.org/docs/vue/get-started/install) -- [Storybook for Web Components](https://storybook.js.org/docs/web-components/get-started/install) -- [Storybook for Svelte](https://storybook.js.org/docs/svelte/get-started/install) -- [Storybook for HTML](https://storybook.js.org/docs/html/get-started/install) -- [Storybook for Preact](https://storybook.js.org/docs/preact/get-started/install) +- [Storybook for React](https://storybook.js.org/docs/get-started/frameworks/react-vite) +- [Storybook for Vue](https://storybook.js.org/docs/get-started/frameworks/vue3-vite) +- [Storybook for Web Components](https://storybook.js.org/docs/get-started/frameworks/web-components-vite) +- [Storybook for Svelte](https://storybook.js.org/docs/get-started/frameworks/svelte-vite) +- [Storybook for HTML](https://storybook.js.org/docs/get-started/install?renderer=html) +- [Storybook for Preact](https://storybook.js.org/docs/get-started/frameworks/preact-vite) diff --git a/code/lib/eslint-plugin/docs/rules/no-stories-of.md b/code/lib/eslint-plugin/docs/rules/no-stories-of.md index a58f962f43e9..fba61b3bfc6c 100644 --- a/code/lib/eslint-plugin/docs/rules/no-stories-of.md +++ b/code/lib/eslint-plugin/docs/rules/no-stories-of.md @@ -8,7 +8,7 @@ ## Rule Details -Since Storybook 5.2, the [CSF format](https://storybook.js.org/docs/api/csf) was introduced and the `storiesOf` API has been deprecated. +Starting with Storybook 5.2, the Component Story Format ([CSF](https://storybook.js.org/docs/api/csf)) was introduced as the preferred way to write stories. The `storiesOf` API is now removed and should be avoided in favor of CSF. Examples of **incorrect** code for this rule: diff --git a/code/lib/eslint-plugin/docs/rules/no-title-property-in-meta.md b/code/lib/eslint-plugin/docs/rules/no-title-property-in-meta.md index 18003b02fe4c..f5c32df25567 100644 --- a/code/lib/eslint-plugin/docs/rules/no-title-property-in-meta.md +++ b/code/lib/eslint-plugin/docs/rules/no-title-property-in-meta.md @@ -8,7 +8,7 @@ ## Rule Details -Starting in [CSF 3.0](https://storybook.js.org/blog/component-story-format-3-0/), story titles can be generated automatically. You can still specify a title like in CSF 2.0, but if you don't specify one, it can be inferred from the story's path on disk. +Starting in [CSF 3.0](https://storybook.js.org/blog/storybook-csf3-is-here/), story titles can be generated automatically. You can still specify a title like in CSF 2.0, but if you don't define it, it can be inferred from the story's path on disk. This rule aims to enforce not setting a title, making the codebase consistent. Examples of **incorrect** code for this rule: @@ -30,7 +30,7 @@ export default { ## When Not To Use It -If you're not strictly enforcing this rule in your codebase (thus allowing custom titles), you should turn this rule off. +If you're not strictly enforcing this rule in your codebase (thus allowing custom titles), you should turn off this rule. ## Further Reading diff --git a/code/lib/eslint-plugin/docs/rules/no-uninstalled-addons.md b/code/lib/eslint-plugin/docs/rules/no-uninstalled-addons.md index 7d0a3fd5144e..f407987a7cfb 100644 --- a/code/lib/eslint-plugin/docs/rules/no-uninstalled-addons.md +++ b/code/lib/eslint-plugin/docs/rules/no-uninstalled-addons.md @@ -8,13 +8,13 @@ ## Rule Details -This rule checks if all addons registered in `.storybook/main.js` are properly listed in the root `package.json` of your project. +This rule checks if all addons registered in `.storybook/main.js|ts` are properly listed in the root `package.json` of your project. -For instance, if the `@storybook/addon-links` is in the `.storybook/main.js` but is not listed in the `package.json` of the project, this rule will notify the user to add the addon to the `package.json` and install it. +For instance, if the `@storybook/addon-links` is in the `.storybook/main.js|ts` file but is not listed in the project's `package.json`, this rule will notify the user to install it. -As an important side note, this rule will check for the `package.json` in the **root level** of your project. You can customize the location of the `package.json` by [setting the `packageJsonLocation` option](#configure). +As an important side note, this rule checks for the `package.json` file at the **root level** of your project. You can customize the location of the `package.json` by [setting the `packageJsonLocation` option](#configure). -Another very important side note: your ESLint config must allow the linting of the `.storybook` folder. By default, ESLint ignores all dot-files so this folder will be ignored. In order to allow this rule to lint the `.storybook/main.js` file, it's important to configure ESLint to lint this file. This can be achieved by writing something like: +Another very important side note: your ESLint config must allow linting the `.storybook` folder. By default, ESLint ignores all dot-files, so this folder will be ignored. To allow this rule to lint the `.storybook/main.js` file, it's essential to configure ESLint to lint this file. This can be achieved by writing something like: ``` // Inside your .eslintignore file @@ -30,8 +30,7 @@ Examples of **incorrect** code for this rule: module.exports = { addons: [ '@storybook/addon-links', - '@storybook/addon-essentials', - '@storybook/addon-interactions', // <-- this addon is not listed in the package.json + '@storybook/addon-a11y', // <-- this addon is not listed in the package.json ], } @@ -39,7 +38,7 @@ module.exports = { { "devDependencies": { "@storybook/addon-links": "0.0.1", - "@storybook/addon-essentials": "0.0.1", + "@storybook/addon-a11y": "0.0.1", } } ``` @@ -51,8 +50,7 @@ Examples of **correct** code for this rule: module.exports = { addons: [ '@storybook/addon-links', - '@storybook/addon-essentials', - '@storybook/addon-interactions', + '@storybook/addon-a11y', ], } @@ -60,8 +58,7 @@ module.exports = { { "devDependencies": { "@storybook/addon-links": "0.0.1", - "@storybook/addon-essentials": "0.0.1", - "@storybook/addon-interactions": "0.0.1" + "@storybook/addon-a11y": "0.0.1" } } ``` @@ -80,11 +77,11 @@ module.exports = { }; ``` -Note that the path must be relative to where ESLint runs from, which is usually relative to the root of the project. +Note that the path must be relative to the location from which ESLint runs, which is typically the root of the project. #### `ignore` -You can also ignore certain addons by providing an ignore array in the options: +You can also ignore specific addons by providing an ignore array in the options: ```js module.exports = { @@ -100,9 +97,9 @@ module.exports = { }; ``` -### What if I use a different storybook config directory? +### What if I use a different Storybook config directory? -Some Storybook folders use a different name for their config directory other than `.storybook`. This rule will not be applied there by default. If you have a custom location for your storybook config directory, then you must add an override in your `.eslintrc.js` file, defining your config directory: +Some Storybook folders use a different name for their config directory other than `.storybook`. This rule will not be applied there by default. If you have a custom location for your Storybook config directory, then you must add an override in your `.eslintrc.js` file, defining your config directory: ```js { @@ -119,7 +116,7 @@ Some Storybook folders use a different name for their config directory other tha ## When Not To Use It -This rule is very handy to be used because if the user tries to start storybook but has forgotten to install the plugin, storybook will throw very weird errors that will give no clue to the user to what's going wrong. To prevent that, this rule should be always on. +This rule is convenient to use because if the user tries to start Storybook but has forgotten to install the plugin, Storybook will throw very unusual errors that provide no clue to the user about what's going wrong. To prevent that, this rule should always be on. ## Further Reading diff --git a/code/lib/eslint-plugin/docs/rules/prefer-pascal-case.md b/code/lib/eslint-plugin/docs/rules/prefer-pascal-case.md index c16e244016c5..36bdbd13dd7c 100644 --- a/code/lib/eslint-plugin/docs/rules/prefer-pascal-case.md +++ b/code/lib/eslint-plugin/docs/rules/prefer-pascal-case.md @@ -8,7 +8,7 @@ ## Rule Details -As a best practice, stories should be defined in [_PascalCase_](https://en.wiktionary.org/wiki/Pascal_case). This makes it simpler to visually differ stories to other code. Plus, it makes it simpler to define regexes for [non-story exports](https://storybook.js.org/docs/api/csf#non-story-exports). +As a best practice, stories should be defined in [_PascalCase_](https://en.wiktionary.org/wiki/Pascal_case). This makes it easier to differentiate stories from other code visually. Plus, it makes it simpler to define regexes for [non-story exports](https://storybook.js.org/docs/api/csf#non-story-exports). Examples of **incorrect** code for this rule: diff --git a/code/lib/eslint-plugin/docs/rules/story-exports.md b/code/lib/eslint-plugin/docs/rules/story-exports.md index 5a48b4f12388..dbc9c44904cb 100644 --- a/code/lib/eslint-plugin/docs/rules/story-exports.md +++ b/code/lib/eslint-plugin/docs/rules/story-exports.md @@ -8,7 +8,7 @@ ## Rule Details -In [CSF](https://storybook.js.org/docs/writing-stories#component-story-format), a story file should contain a _default export_ that describes the component, and at _named exports_ that describe the stories. This rule enforces the definition of at least one named export in story files. +In [CSF](https://storybook.js.org/docs/writing-stories#component-story-format), 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: @@ -34,7 +34,7 @@ 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 you are defining the storybook rules only for story files. You can see more details [here](https://github.com/storybookjs/storybook/blob/next/code/lib/eslint-plugin#overridingdisabling-rules). +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](https://github.com/storybookjs/storybook/blob/next/code/lib/eslint-plugin#overridingdisabling-rules). ## Further Reading diff --git a/code/lib/eslint-plugin/docs/rules/use-storybook-expect.md b/code/lib/eslint-plugin/docs/rules/use-storybook-expect.md index 7d3bbb3a5a1b..ae197c50ad37 100644 --- a/code/lib/eslint-plugin/docs/rules/use-storybook-expect.md +++ b/code/lib/eslint-plugin/docs/rules/use-storybook-expect.md @@ -8,14 +8,14 @@ ## Rule Details -Storybook provides a browser compatible version of `expect` via the [@storybook/test](https://github.com/storybookjs/storybook/tree/next/code/lib/test) library (formerly available in the legacy [@storybook/jest](https://github.com/storybookjs/jest) library). -When [writing interactions](https://storybook.js.org/docs/essentials/interactions) and asserting values, you should always use `expect` from the `@storybook/test` library. +Storybook provides a browser-compatible version of `expect` via the [storybook/test](https://github.com/storybookjs/storybook/tree/next/code/core/src/test) core package (formerly available in the legacy [@storybook/jest](https://github.com/storybookjs/jest) library). +When [writing interactions](https://storybook.js.org/docs/essentials/interactions) and asserting values, you should always use `expect` from the `storybook/test` library. Examples of **incorrect** code for this rule: ```js Default.play = async () => { - // using global expect from Jest. Will break on the browser + // Using global expect from Jest. Will break on the browser await expect(123).toEqual(123); }; ``` @@ -23,17 +23,17 @@ Default.play = async () => { Examples of **correct** code for this rule: ```js -// correct import. -import { expect } from '@storybook/test'; +// Correct import. +import { expect } from 'storybook/test'; // or this, which is now considered legacy import { expect } from '@storybook/jest'; Default.play = async () => { - // using imported expect from storybook package + // Using imported expect from storybook package await expect(123).toEqual(123); }; ``` ## When Not To Use It -This rule should not be applied in test files. Please ensure you are defining the storybook rules only for story files. You can see more details [here](https://github.com/storybookjs/storybook/blob/next/code/lib/eslint-plugin#overridingdisabling-rules). +This rule should not be applied in test files. Please ensure that you define the Storybook rules only for story files. You can see more details [here](https://github.com/storybookjs/storybook/blob/next/code/lib/eslint-plugin#overridingdisabling-rules). diff --git a/code/lib/eslint-plugin/docs/rules/use-storybook-testing-library.md b/code/lib/eslint-plugin/docs/rules/use-storybook-testing-library.md index d0ccb34d5a32..aefddb556d49 100644 --- a/code/lib/eslint-plugin/docs/rules/use-storybook-testing-library.md +++ b/code/lib/eslint-plugin/docs/rules/use-storybook-testing-library.md @@ -8,8 +8,8 @@ ## Rule Details -Storybook provides an instrumented version of testing library in the [@storybook/test](https://github.com/storybookjs/storybook/tree/next/code/lib/test) library (formerly available in [@storybook/testing-library](https://github.com/storybookjs/testing-library/) library). -When [writing interactions](https://storybook.js.org/docs/essentials/interactions), make sure to use the helper functions from `@storybook/test`, so that addon-interactions can intercept these helper functions and allow you to step through them when debugging. +Storybook provides an instrumented version of the testing library in the [storybook/test](https://github.com/storybookjs/storybook/tree/next/code/core/src/test) core package (formerly available in [@storybook/testing-library](https://github.com/storybookjs/testing-library/) library). +When [writing interactions](https://storybook.js.org/docs/essentials/interactions), make sure to use the helper functions from `storybook/test`, so that addon-interactions can intercept these helper functions and allow you to step through them when debugging. Examples of **incorrect** code for this rule: @@ -26,7 +26,7 @@ Examples of **correct** code for this rule: ```js // correct import. -import { within } from '@storybook/test'; +import { within } from 'storybook/test'; // or this, which is now considered legacy import { within } from '@storybook/testing-library'; @@ -37,4 +37,4 @@ Default.play = async (context) => { ## When Not To Use It -This rule should not be applied in test files. Please ensure you are defining the storybook rules only for story files. You can see more details [here](https://github.com/storybookjs/storybook/blob/next/code/lib/eslint-plugin#overridingdisabling-rules). +This rule should not be applied in test files. Please ensure that you define the Storybook rules only for story files. You can see more details [here](https://github.com/storybookjs/storybook/blob/next/code/lib/eslint-plugin#overridingdisabling-rules). diff --git a/docs/configure/integration/eslint-plugin.mdx b/docs/configure/integration/eslint-plugin.mdx index 5eaed2b1f513..7be4497dd50e 100644 --- a/docs/configure/integration/eslint-plugin.mdx +++ b/docs/configure/integration/eslint-plugin.mdx @@ -40,13 +40,12 @@ For more details on why this line is required in the `.eslintignore` file, refer If you are using [flat config style](https://eslint.org/docs/latest/use/configure/configuration-files-new), add this to your configuration file: ```js title="eslint.config.js" -export default [ +import { defineConfig, globalIgnores } from 'eslint/config'; + +export default defineConfig([ + globalIgnores(['!.storybook'], 'Include Storybook Directory'), // ... - { - // Inside your .eslintignore file - ignores: ['!.storybook'], - }, -]; +]); ``` ## ESLint compatibility @@ -65,11 +64,11 @@ Depending on the version of ESLint you are using, you may need to install a spec Use `.eslintrc.*` file to configure rules in ESLint < v9. See also: https://eslint.org/docs/latest/use/configure/. -This plugin will only be applied to files following the `*.stories.*` (we recommend this) or `*.story.*` pattern. This is an automatic configuration, so you don't have to do anything. +This plugin will only be applied to files following the `*.stories.*` (recommended) or `*.story.*` pattern. This is an automatic configuration, so no action is required. #### Overriding/disabling rules -Optionally, you can override, add, or disable individual rules. You likely don't want these settings to be applied in every file, so make sure that you add a `overrides` section in your `.eslintrc.*` file that applies the overrides only to your stories files. +Optionally, you can override, add to, or disable individual rules. You likely don't want these settings to be applied in every file, so make sure that you add a `overrides` section in your `.eslintrc.*` file that applies the overrides only to your story files. ```js title=".eslintrc" { @@ -90,25 +89,27 @@ Optionally, you can override, add, or disable individual rules. You likely don't ### Configuration (flat config format) -Use `eslint.config.js` file to configure rules using the [flat config style](https://eslint.org/docs/latest/use/configure/configuration-files-new). This is the default in ESLint v9, but can be used starting from ESLint v8.57.0. See also: https://eslint.org/docs/latest/use/configure/configuration-files-new. +Use the `eslint.config.js` file to configure rules using the [flat config style](https://eslint.org/docs/latest/use/configure/configuration-files-new). This is the default in ESLint v9, but can be used starting from ESLint v8.57.0. See also: https://eslint.org/docs/latest/use/configure/configuration-files-new. ```js title="eslint.config.js" import storybook from 'eslint-plugin-storybook'; -export default [ - // Add more generic rulesets here, such as: - // js.configs.recommended, - ...storybook.configs['flat/recommended'], +// Replace the eslint/config package with @eslint/config-helpers if you're using an older version of ESLint. +import { defineConfig } from 'eslint/config'; - // ... -]; +export default defineConfig([ + ...storybook.configs['flat/recommended'], + // Add more configuration options and generic rulesets here, such as js.configs.recommended +]); ``` In case you are using utility functions from tools like `tseslint`, you might need to register the plugin a little differently: ```ts title="eslint.config.ts" import storybook from 'eslint-plugin-storybook'; + import somePlugin from 'some-plugin'; + import tseslint from 'typescript-eslint'; export default tseslint.config( @@ -119,14 +120,14 @@ export default tseslint.config( #### Overriding/disabling rules -Optionally, you can override, add, or disable individual rules. You likely don't want these settings to be applied in every file, so make sure that you add a flat config section in your `eslint.config.js` file that applies the overrides only to your stories files. +Optionally, you can override, add, or disable individual rules. You likely don't want these settings to be applied to every file, so ensure that you add a flat config section in your `eslint.config.js` file that applies the overrides only to your story files. -```js +```js title="eslint.config.js" import storybook from 'eslint-plugin-storybook'; -export default [ - // ... +import { defineConfig } from 'eslint/config'; +export default defineConfig([ ...storybook.configs['flat/recommended'], { // 👇 This should match the `stories` property in .storybook/main.js|ts @@ -138,9 +139,7 @@ export default [ 'storybook/default-exports': 'off', }, }, - - // ... -]; +]); ``` ### MDX Support