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 and eslint v9 #152

Closed
wants to merge 8 commits into from
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
3 changes: 2 additions & 1 deletion .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
19 changes: 13 additions & 6 deletions .github/workflows/release.yml
Expand Up @@ -7,19 +7,26 @@ 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

- uses: pnpm/action-setup@v3
- name: Enable corepack
run: corepack enable

- name: Setup node
uses: actions/setup-node@v4
with:
version: 8
run_install: true
node-version: 18
cache: 'pnpm'

- name: Install dependencies
run: pnpm install --no-frozen-lockfile

- name: Create Release
env:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
run: |
pnpm run release
run: pnpm run release
21 changes: 15 additions & 6 deletions .github/workflows/test.yml
Expand Up @@ -6,14 +6,23 @@ jobs:
test:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- name: Checkout codes
uses: actions/checkout@v4

- name: Enable corepack
run: corepack enable

- uses: pnpm/action-setup@v3
- name: Setup node
uses: actions/setup-node@v4
with:
version: 8
run_install: true
node-version: 18
cache: 'pnpm'

- name: Install dependencies
run: pnpm install --no-frozen-lockfile

- name: Build
run: pnpm run build

- name: Run tests
run: |
pnpm run test:ci
run: pnpm run test:ci
2 changes: 1 addition & 1 deletion .gitignore
@@ -1,7 +1,7 @@
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.

# dependencies
/node_modules
node_modules
/.pnp
.pnp.js

Expand Down
6 changes: 3 additions & 3 deletions CHANGELOG.md
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
89 changes: 72 additions & 17 deletions README.md
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 @@ -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
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
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
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
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
2 changes: 1 addition & 1 deletion docs/rules/hierarchy-separator.md
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
2 changes: 1 addition & 1 deletion docs/rules/no-redundant-story-name.md
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
2 changes: 1 addition & 1 deletion docs/rules/no-stories-of.md
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-title-property-in-meta.md
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
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
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
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
2 changes: 1 addition & 1 deletion docs/rules/use-storybook-expect.md
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/use-storybook-testing-library.md
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
6 changes: 6 additions & 0 deletions jest.integration.config.js
@@ -0,0 +1,6 @@
module.exports = {
testMatch: ['**/tests/**/*.spec.ts'],
transform: {
'^.+\\.ts?$': 'ts-jest',
},
}