Merge pull request #156 from storybookjs/feat/add-flat-config-format

feat: support flat config
storybookjs · Oct 21, 2024 · a32dbd3 · a32dbd3
2 parents d5a9ce1 + ce8985b
commit a32dbd3
Show file tree

Hide file tree

Showing 74 changed files with 1,635 additions and 619 deletions.
diff --git a/.eslintignore b/.eslintignore
@@ -1,8 +1,9 @@
 # don't ever lint node_modules
 node_modules
 # don't lint build output
-build
+dist
 # don't lint nyc coverage output
 coverage
 
 tools
+tests/integrations/**/*.stories.tsx
diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
@@ -7,19 +7,27 @@ jobs:
     runs-on: ubuntu-latest
     if: "!contains(github.event.head_commit.message, 'ci skip') && !contains(github.event.head_commit.message, 'skip ci')"
     steps:
-      - uses: actions/checkout@v2
+      - name: Checkout codes
+        uses: actions/checkout@v4
 
       - name: Prepare repository
         run: git fetch --unshallow --tags
 
+      - name: Enable corepack
+        run: corepack enable
+
+      - name: Setup node
+        uses: actions/setup-node@v4
+        with:
+          node-version: 18
+          cache: 'pnpm'
+
       - uses: pnpm/action-setup@v4
         with:
-          version: 9
           run_install: true
 
       - name: Create Release
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
-        run: |
-          pnpm run release
+        run: pnpm run release
diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
@@ -6,14 +6,24 @@ jobs:
   test:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
+      - name: Checkout codes
+        uses: actions/checkout@v4
 
+      - name: Enable corepack
+        run: corepack enable
+
+      - name: Setup node
+        uses: actions/setup-node@v4
+        with:
+          node-version: 18
+          cache: 'pnpm'
 
       - uses: pnpm/action-setup@v4
         with:
-          version: 9
           run_install: true
 
+      - name: Build
+        run: pnpm run build
+
       - name: Run tests
-        run: |
-          pnpm run test:ci
+        run: pnpm run test:ci
diff --git a/.gitignore b/.gitignore
@@ -1,10 +1,12 @@
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
 # dependencies
-/node_modules
+node_modules
 /.pnp
 .pnp.js
 
+tests/integrations/**/pnpm-lock.yaml
+
 # testing
 /coverage
 

diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -190,9 +190,9 @@ The `story-exports` rule now detects whether you are using `includeStories/exclu
 export default {
   title: 'Button',
   includeStories: ['myStory'], // <-- notice the lowercase m, which won't match with the story name
-};
+}
 
-export const MyStory = {};
+export const MyStory = {}
 ```
 
 ---
@@ -569,7 +569,7 @@ export const MyStory = {};
 
 - no-title-property-in-meta: fix dangling comma and highlighting [#32](https://github.com/storybookjs/eslint-plugin-storybook/pull/32) ([@yannbf](https://github.com/yannbf))
 - Update docs [#35](https://github.com/storybookjs/eslint-plugin-storybook/pull/35) ([@kylegach](https://github.com/kylegach) [@yannbf](https://github.com/yannbf))
-- prefer-pascal-case: ignore __namedExportsOrder [#34](https://github.com/storybookjs/eslint-plugin-storybook/pull/34) ([@yannbf](https://github.com/yannbf))
+- prefer-pascal-case: ignore \_\_namedExportsOrder [#34](https://github.com/storybookjs/eslint-plugin-storybook/pull/34) ([@yannbf](https://github.com/yannbf))
 - hierarchy-separator: fix node highlight [#33](https://github.com/storybookjs/eslint-plugin-storybook/pull/33) ([@yannbf](https://github.com/yannbf))
 - no-redundant-story-name: add CSF2 support [#31](https://github.com/storybookjs/eslint-plugin-storybook/pull/31) ([@yannbf](https://github.com/yannbf))
 - prefer-pascal-case: add non-story exports check [#30](https://github.com/storybookjs/eslint-plugin-storybook/pull/30) ([@yannbf](https://github.com/yannbf))

diff --git a/README.md b/README.md
@@ -59,9 +59,23 @@ This allows for this plugin to also lint your configuration files inside the .st
 
 > For more info on why this line is required in the .eslintignore file, check this [ESLint documentation](https://eslint.org/docs/latest/user-guide/configuring/ignoring-code#:~:text=In%20addition%20to,contents%2C%20are%20ignored).
 
+If you are using [flat config style](https://eslint.org/docs/latest/use/configure/configuration-files-new), add this to your configuration file:
+
+```js
+export default [
+  // ...
+  {
+    // Inside your .eslintignore file
+    ignores: ['!.storybook'],
+  },
+]
+```
+
 ## Usage
 
-Use `.eslintrc.*` file to configure rules. See also: https://eslint.org/docs/user-guide/configuring
+### Configuration (`.eslintrc`)
+
+Use `.eslintrc.*` file to configure rules in ESLint < v9. See also: https://eslint.org/docs/latest/use/configure/.
 
 Add `plugin:storybook/recommended` to the extends section of your `.eslintrc` configuration file. Note that we can omit the `eslint-plugin-` prefix:
 
@@ -74,7 +88,7 @@ Add `plugin:storybook/recommended` to the extends section of your `.eslintrc` co
 
 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.
 
-### Overriding/disabling rules
+#### Overriding/disabling rules
 
 Optionally, you can override, add or disable rules settings. 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.
 
@@ -83,7 +97,7 @@ Optionally, you can override, add or disable rules settings. You likely don't wa
   "overrides": [
     {
       // or whatever matches stories specified in .storybook/main.js
-      "files": ['*.stories.@(ts|tsx|js|jsx|mjs|cjs)'],
+      "files": ['**/*.stories.@(ts|tsx|js|jsx|mjs|cjs)'],
       "rules": {
         // example of overriding a rule
         'storybook/hierarchy-separator': 'error',
@@ -95,6 +109,47 @@ Optionally, you can override, add or disable rules settings. You likely don't wa
 }
 ```
 
+### Configuration (`eslint.config.[c|m]?js`)
+
+Use `eslint.config.[c|m]?js` file to configure rules. 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
+import storybook from 'eslint-plugin-storybook'
+
+export default [
+  // add more generic rulesets here, such as:
+  // js.configs.recommended,
+  ...storybook.configs['flat/recommended'],
+
+  // something ...
+]
+```
+
+#### Overriding/disabling rules
+
+Optionally, you can override, add or disable rules settings. 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.[m|c]?js` file that applies the overrides only to your stories files.
+
+```js
+import storybook from 'eslint-plugin-storybook'
+
+export default [
+  // ...
+
+  ...storybook.configs['flat/recommended'],
+  {
+    files: ['**/*.stories.@(ts|tsx|js|jsx|mjs|cjs)'],
+    rules: {
+      // example of overriding a rule
+      'storybook/hierarchy-separator': 'error',
+      // example of disabling a rule
+      'storybook/default-exports': 'off',
+    },
+  },
+
+  // something ...
+]
+```
+
 ### MDX Support
 
 This plugin does not support MDX files.
@@ -107,21 +162,21 @@ This plugin does not support MDX files.
 
 **Configurations**: csf, csf-strict, addon-interactions, recommended
 
-| Name                                                                                       | Description                                                                                                                   | 🔧  | Included in configurations                               |
-| ------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------- | --- | -------------------------------------------------------- |
-| [`storybook/await-interactions`](./docs/rules/await-interactions.md)                       | Interactions should be awaited                                                                                                | 🔧  | <ul><li>addon-interactions</li><li>recommended</li></ul> |
-| [`storybook/context-in-play-function`](./docs/rules/context-in-play-function.md)           | Pass a context when invoking play function of another story                                                                   |     | <ul><li>recommended</li><li>addon-interactions</li></ul> |
-| [`storybook/csf-component`](./docs/rules/csf-component.md)                                 | The component property should be set                                                                                          |     | <ul><li>csf</li></ul>                                    |
-| [`storybook/default-exports`](./docs/rules/default-exports.md)                             | Story files should have a default export                                                                                      | 🔧  | <ul><li>csf</li><li>recommended</li></ul>                |
-| [`storybook/hierarchy-separator`](./docs/rules/hierarchy-separator.md)                     | Deprecated hierarchy separator in title property                                                                              | 🔧  | <ul><li>csf</li><li>recommended</li></ul>                |
-| [`storybook/no-redundant-story-name`](./docs/rules/no-redundant-story-name.md)             | A story should not have a redundant name property                                                                             | 🔧  | <ul><li>csf</li><li>recommended</li></ul>                |
-| [`storybook/no-stories-of`](./docs/rules/no-stories-of.md)                                 | storiesOf is deprecated and should not be used                                                                                |     | <ul><li>csf-strict</li></ul>                             |
-| [`storybook/no-title-property-in-meta`](./docs/rules/no-title-property-in-meta.md)         | Do not define a title in meta                                                                                                 | 🔧  | <ul><li>csf-strict</li></ul>                             |
-| [`storybook/no-uninstalled-addons`](./docs/rules/no-uninstalled-addons.md)                 | This rule identifies storybook addons that are invalid because they are either not installed or contain a typo in their name. |     | <ul><li>recommended</li></ul>                            |
-| [`storybook/prefer-pascal-case`](./docs/rules/prefer-pascal-case.md)                       | Stories should use PascalCase                                                                                                 | 🔧  | <ul><li>recommended</li></ul>                            |
-| [`storybook/story-exports`](./docs/rules/story-exports.md)                                 | A story file must contain at least one story export                                                                           |     | <ul><li>recommended</li><li>csf</li></ul>                |
-| [`storybook/use-storybook-expect`](./docs/rules/use-storybook-expect.md)                   | Use expect from `@storybook/jest`                                                                                             | 🔧  | <ul><li>addon-interactions</li><li>recommended</li></ul> |
-| [`storybook/use-storybook-testing-library`](./docs/rules/use-storybook-testing-library.md) | Do not use testing-library directly on stories                                                                                | 🔧  | <ul><li>addon-interactions</li><li>recommended</li></ul> |
+| Name                                                                                       | Description                                                                                                                   | 🔧  | Included in configurations                                                                                        |
+| ------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------- | --- | ----------------------------------------------------------------------------------------------------------------- |
+| [`storybook/await-interactions`](./docs/rules/await-interactions.md)                       | Interactions should be awaited                                                                                                | 🔧  | <ul><li>addon-interactions</li><li>flat/addon-interactions</li><li>recommended</li><li>flat/recommended</li></ul> |
+| [`storybook/context-in-play-function`](./docs/rules/context-in-play-function.md)           | Pass a context when invoking play function of another story                                                                   |     | <ul><li>recommended</li><li>flat/recommended</li><li>addon-interactions</li><li>flat/addon-interactions</li></ul> |
+| [`storybook/csf-component`](./docs/rules/csf-component.md)                                 | The component property should be set                                                                                          |     | <ul><li>csf</li><li>flat/csf</li></ul>                                                                            |
+| [`storybook/default-exports`](./docs/rules/default-exports.md)                             | Story files should have a default export                                                                                      | 🔧  | <ul><li>csf</li><li>flat/csf</li><li>recommended</li><li>flat/recommended</li></ul>                               |
+| [`storybook/hierarchy-separator`](./docs/rules/hierarchy-separator.md)                     | Deprecated hierarchy separator in title property                                                                              | 🔧  | <ul><li>csf</li><li>flat/csf</li><li>recommended</li><li>flat/recommended</li></ul>                               |
+| [`storybook/no-redundant-story-name`](./docs/rules/no-redundant-story-name.md)             | A story should not have a redundant name property                                                                             | 🔧  | <ul><li>csf</li><li>flat/csf</li><li>recommended</li><li>flat/recommended</li></ul>                               |
+| [`storybook/no-stories-of`](./docs/rules/no-stories-of.md)                                 | storiesOf is deprecated and should not be used                                                                                |     | <ul><li>csf-strict</li><li>flat/csf-strict</li></ul>                                                              |
+| [`storybook/no-title-property-in-meta`](./docs/rules/no-title-property-in-meta.md)         | Do not define a title in meta                                                                                                 | 🔧  | <ul><li>csf-strict</li><li>flat/csf-strict</li></ul>                                                              |
+| [`storybook/no-uninstalled-addons`](./docs/rules/no-uninstalled-addons.md)                 | This rule identifies storybook addons that are invalid because they are either not installed or contain a typo in their name. |     | <ul><li>recommended</li><li>flat/recommended</li></ul>                                                            |
+| [`storybook/prefer-pascal-case`](./docs/rules/prefer-pascal-case.md)                       | Stories should use PascalCase                                                                                                 | 🔧  | <ul><li>recommended</li><li>flat/recommended</li></ul>                                                            |
+| [`storybook/story-exports`](./docs/rules/story-exports.md)                                 | A story file must contain at least one story export                                                                           |     | <ul><li>recommended</li><li>flat/recommended</li><li>csf</li><li>flat/csf</li></ul>                               |
+| [`storybook/use-storybook-expect`](./docs/rules/use-storybook-expect.md)                   | Use expect from `@storybook/jest`                                                                                             | 🔧  | <ul><li>addon-interactions</li><li>flat/addon-interactions</li><li>recommended</li><li>flat/recommended</li></ul> |
+| [`storybook/use-storybook-testing-library`](./docs/rules/use-storybook-testing-library.md) | Do not use testing-library directly on stories                                                                                | 🔧  | <ul><li>addon-interactions</li><li>flat/addon-interactions</li><li>recommended</li><li>flat/recommended</li></ul> |
 
 <!-- RULES-LIST:END -->
 

diff --git a/docs/rules/await-interactions.md b/docs/rules/await-interactions.md
@@ -2,7 +2,7 @@
 
 <!-- RULE-CATEGORIES:START -->
 
-**Included in these configurations**: <ul><li>addon-interactions</li><li>recommended</li></ul>
+**Included in these configurations**: <ul><li>addon-interactions</li><li>flat/addon-interactions</li><li>recommended</li><li>flat/recommended</li></ul>
 
 <!-- RULE-CATEGORIES:END -->
 

diff --git a/docs/rules/context-in-play-function.md b/docs/rules/context-in-play-function.md
@@ -2,7 +2,7 @@
 
 <!-- RULE-CATEGORIES:START -->
 
-**Included in these configurations**: <ul><li>recommended</li><li>addon-interactions</li></ul>
+**Included in these configurations**: <ul><li>recommended</li><li>flat/recommended</li><li>addon-interactions</li><li>flat/addon-interactions</li></ul>
 
 <!-- RULE-CATEGORIES:END -->
 

diff --git a/docs/rules/csf-component.md b/docs/rules/csf-component.md
@@ -2,7 +2,7 @@
 
 <!-- RULE-CATEGORIES:START -->
 
-**Included in these configurations**: <ul><li>csf</li></ul>
+**Included in these configurations**: <ul><li>csf</li><li>flat/csf</li></ul>
 
 <!-- RULE-CATEGORIES:END -->
 

diff --git a/docs/rules/default-exports.md b/docs/rules/default-exports.md
@@ -2,7 +2,7 @@
 
 <!-- RULE-CATEGORIES:START -->
 
-**Included in these configurations**: <ul><li>csf</li><li>recommended</li></ul>
+**Included in these configurations**: <ul><li>csf</li><li>flat/csf</li><li>recommended</li><li>flat/recommended</li></ul>
 
 <!-- RULE-CATEGORIES:END -->
 

diff --git a/docs/rules/hierarchy-separator.md b/docs/rules/hierarchy-separator.md
@@ -2,7 +2,7 @@
 
 <!-- RULE-CATEGORIES:START -->
 
-**Included in these configurations**: <ul><li>csf</li><li>recommended</li></ul>
+**Included in these configurations**: <ul><li>csf</li><li>flat/csf</li><li>recommended</li><li>flat/recommended</li></ul>
 
 <!-- RULE-CATEGORIES:END -->
 
@@ -35,5 +35,5 @@ For more details about this change: https://github.com/storybookjs/storybook/blo
 To automatically migrate all of your codebase and fix this issue, run this codemod in the root folder of your project:
 
 ```sh
-npx sb@next migrate upgrade-hierarchy-separators --glob="*/**/*.stories.@(tsx|jsx|ts|js)"
+npx storybook@latest migrate upgrade-hierarchy-separators --glob="*/**/*.stories.@(tsx|jsx|ts|js)"
 ```
diff --git a/docs/rules/no-redundant-story-name.md b/docs/rules/no-redundant-story-name.md
@@ -2,7 +2,7 @@
 
 <!-- RULE-CATEGORIES:START -->
 
-**Included in these configurations**: <ul><li>csf</li><li>recommended</li></ul>
+**Included in these configurations**: <ul><li>csf</li><li>flat/csf</li><li>recommended</li><li>flat/recommended</li></ul>
 
 <!-- RULE-CATEGORIES:END -->
 

diff --git a/docs/rules/no-stories-of.md b/docs/rules/no-stories-of.md
@@ -2,7 +2,7 @@
 
 <!-- RULE-CATEGORIES:START -->
 
-**Included in these configurations**: <ul><li>csf-strict</li></ul>
+**Included in these configurations**: <ul><li>csf-strict</li><li>flat/csf-strict</li></ul>
 
 <!-- RULE-CATEGORIES:END -->
 
@@ -52,5 +52,5 @@ For more information about the change from `storiesOf` to `CSF`, read here: http
 To automatically migrate all of your codebase, run this codemod in the root folder of your project:
 
 ```sh
-npx sb@next migrate storiesof-to-csf --glob="*/**/*.stories.@(tsx|jsx|ts|js)"
+npx storybook@latest migrate storiesof-to-csf --glob="*/**/*.stories.@(tsx|jsx|ts|js)"
 ```
diff --git a/docs/rules/no-title-property-in-meta.md b/docs/rules/no-title-property-in-meta.md
@@ -2,7 +2,7 @@
 
 <!-- RULE-CATEGORIES:START -->
 
-**Included in these configurations**: <ul><li>csf-strict</li></ul>
+**Included in these configurations**: <ul><li>csf-strict</li><li>flat/csf-strict</li></ul>
 
 <!-- RULE-CATEGORIES:END -->
 

diff --git a/docs/rules/no-uninstalled-addons.md b/docs/rules/no-uninstalled-addons.md
@@ -2,7 +2,7 @@
 
 <!-- RULE-CATEGORIES:START -->
 
-**Included in these configurations**: <ul><li>recommended</li></ul>
+**Included in these configurations**: <ul><li>recommended</li><li>flat/recommended</li></ul>
 
 <!-- RULE-CATEGORIES:END -->
 

diff --git a/docs/rules/prefer-pascal-case.md b/docs/rules/prefer-pascal-case.md
@@ -2,7 +2,7 @@
 
 <!-- RULE-CATEGORIES:START -->
 
-**Included in these configurations**: <ul><li>recommended</li></ul>
+**Included in these configurations**: <ul><li>recommended</li><li>flat/recommended</li></ul>
 
 <!-- RULE-CATEGORIES:END -->
 

diff --git a/docs/rules/story-exports.md b/docs/rules/story-exports.md
@@ -2,7 +2,7 @@
 
 <!-- RULE-CATEGORIES:START -->
 
-**Included in these configurations**: <ul><li>recommended</li><li>csf</li></ul>
+**Included in these configurations**: <ul><li>recommended</li><li>flat/recommended</li><li>csf</li><li>flat/csf</li></ul>
 
 <!-- RULE-CATEGORIES:END -->