Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: support flat config #156

Open
wants to merge 31 commits into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
31 commits
Select commit Hold shift + click to select a range
e3e2416
feat: support flat config
kazupon Mar 28, 2024
ee93eba
refactor
kazupon Mar 28, 2024
cfc5203
fix: add name for debugging with eslint inspector
kazupon Apr 8, 2024
eb4d100
fix: bump actions/checkout (https://github.blog/changelog/2023-09-22-…
kazupon Apr 9, 2024
948c972
fix: github actions
kazupon Apr 9, 2024
b2ed542
chore: add build task for ci
kazupon Apr 10, 2024
6d89d9f
test: check eslint v9
kazupon Apr 10, 2024
f91ce9a
fix: support compatible eslint v8.x, v9 and later
kazupon Apr 10, 2024
a147a75
Merge branch 'main' into feat/flat-config
yannbf May 17, 2024
ad95466
fix typo
yannbf May 17, 2024
b41eecd
upgrade auto
yannbf May 17, 2024
0dfae8c
upgrade deps
yannbf May 17, 2024
0e2fb1e
debug release issue
yannbf May 17, 2024
7688156
experiment with a fix
yannbf May 17, 2024
859d96f
wip
yannbf May 17, 2024
b3392f5
bring previous setting back
yannbf May 17, 2024
84c623b
upgrade to pnpm 9
yannbf May 20, 2024
26b630a
fix gitignore
yannbf May 20, 2024
da7873a
fix tests
yannbf May 20, 2024
817e950
add lint scripts
yannbf Jul 2, 2024
92c47e4
update story globs
yannbf Jul 2, 2024
38fde17
upgrade to typescript eslint utils v7
yannbf Jul 2, 2024
0b0a479
fix ci
yannbf Jul 2, 2024
ed236ca
fix
yannbf Jul 2, 2024
9dd8662
Merge branch 'main' into feat/add-flat-config-format
yannbf Sep 26, 2024
a4a9835
include subdirs in rule file include globs
yannbf Sep 26, 2024
408aed4
fix
yannbf Sep 26, 2024
c4e9cec
Upgrade @typescript-eslint/utils to v8.8
kasperpeulen Oct 9, 2024
1435cb8
Upgrade @typescript-eslint/utils to v8.8
kasperpeulen Oct 10, 2024
4a7c900
Use specific tsconfig for build that doesn't build test files
kasperpeulen Oct 10, 2024
ce8985b
Make sure that await interaction works with @storybook/test
kasperpeulen Oct 11, 2024
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion .eslintignore
Original file line number Diff line number Diff line change
@@ -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
16 changes: 12 additions & 4 deletions .github/workflows/release.yml
Original file line number Diff line number Diff line change
Expand Up @@ -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
18 changes: 14 additions & 4 deletions .github/workflows/test.yml
Original file line number Diff line number Diff line change
Expand Up @@ -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
4 changes: 3 additions & 1 deletion .gitignore
Original file line number Diff line number Diff line change
@@ -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

Expand Down
6 changes: 3 additions & 3 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -170,9 +170,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 = {}
```

---
Expand Down Expand Up @@ -549,7 +549,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))
Expand Down
91 changes: 73 additions & 18 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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:

Expand All @@ -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.

Expand All @@ -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',
Expand All @@ -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.
Expand All @@ -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 -->

Expand Down
2 changes: 1 addition & 1 deletion docs/rules/await-interactions.md
Original file line number Diff line number Diff line change
Expand Up @@ -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 -->

Expand Down
2 changes: 1 addition & 1 deletion docs/rules/context-in-play-function.md
Original file line number Diff line number Diff line change
Expand Up @@ -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 -->

Expand Down
2 changes: 1 addition & 1 deletion docs/rules/csf-component.md
Original file line number Diff line number Diff line change
Expand Up @@ -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 -->

Expand Down
2 changes: 1 addition & 1 deletion docs/rules/default-exports.md
Original file line number Diff line number Diff line change
Expand Up @@ -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 -->

Expand Down
4 changes: 2 additions & 2 deletions docs/rules/hierarchy-separator.md
Original file line number Diff line number Diff line change
Expand Up @@ -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 -->

Expand Down Expand Up @@ -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)"
```
2 changes: 1 addition & 1 deletion docs/rules/no-redundant-story-name.md
Original file line number Diff line number Diff line change
Expand Up @@ -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 -->

Expand Down
4 changes: 2 additions & 2 deletions docs/rules/no-stories-of.md
Original file line number Diff line number Diff line change
Expand Up @@ -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 -->

Expand Down Expand Up @@ -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)"
```
2 changes: 1 addition & 1 deletion docs/rules/no-title-property-in-meta.md
Original file line number Diff line number Diff line change
Expand Up @@ -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 -->

Expand Down
2 changes: 1 addition & 1 deletion docs/rules/no-uninstalled-addons.md
Original file line number Diff line number Diff line change
Expand Up @@ -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 -->

Expand Down
2 changes: 1 addition & 1 deletion docs/rules/prefer-pascal-case.md
Original file line number Diff line number Diff line change
Expand Up @@ -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 -->

Expand Down
2 changes: 1 addition & 1 deletion docs/rules/story-exports.md
Original file line number Diff line number Diff line change
Expand Up @@ -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 -->

Expand Down
Loading