feat: support flat config

[yannbf]

Closes: #135

What Changed

This is a branch off of the original PR at #152 incredibly done by @kazupon. Only reason I created a new PR is because the previous one was a fork, and therefore CI checks were not running, neither the canary release.

Original PR text:

I've supported ESLint flat configuration and eslint v9
This PR has compatible for legacy style configuration and compatible eslint API using.

So to maintain compatibility, we provide a preset with the flat namespace.

flat config example is here:

import storybook from 'eslint-plugin-storybook'

export default [
  // add more generic rulesets here, such as:
  // js.configs.recommended,
  ...storybook.configs['flat/recommended'],

  // something ...
]

This implementation is based on eslint-plugin-vue, which has several presets to support Vue 3 and Vue 2.
docs is here:
https://eslint.vuejs.org/user-guide/#usage

Checklist

Check the ones applicable to your change:

• Ran pnpm run update-all
• Tests are updated
• Documentation is updated

Change Type

Indicate the type of change your pull request is:

• maintenance
• documentation
• patch
• minor
• major

📦 Published PR as canary version: 0.10.0--canary.156.ce8985b.0

✨ Test out this PR locally via:

npm install [email protected]
# or 
yarn add [email protected]

[yannbf]

@kazupon seems like the release step can't succeed because for some reason a pnpm lock file is modified, even though I can't really reproduce it locally. Do you have any clue?

[kazupon]

@yannbf
Hmm 🤔
I also checked package.json and release.yml in github actions. But I can't find the cause 😅

I'd better debug it by actually looking at pnpm-lock.yaml in release.yml with actions/upload-artifact.

[tom-fletcher]

@yannbf - I think you were almost there with the experiment with a fix version!

Current action failure

The reason the current action is failing is that the pnpm-lock.yaml is v6, but the version of pnpm is not pinned. So the runner is using the latest version (9.1.1), which introduced a new lockfile version - and automatically upgrades the lockfile when you run pnpm install. This is why you are ending up with a modified file.

Experiment with a fix failure

You did pin the version in experiment with a fix to v8, with pnpm/action-setup, which actually prevented the first failure as it does not re-write the lockfile. But it also has the run_install setting which installs dependencies recursively, and the action was failing for a different reason.

As there are two new package.json files in the tests/integration/flat-config and tests/integrations/legacy-config directories the install created new pnpm-lock.yaml files for both of these - and the addition of these new files is what was causing the action to fail that time.

Solutions

I guess the way forward might be:

• Reintroduce pnpm pinning to v8 in release.yml
• Either also commit pnpm-lock.yaml files for the tests directories, or possibly.gitignore these.

(Separately, it may be worth upgrading to pnpm v9 some point in the future)

[yannbf]

Oh wow @tom-fletcher thank you so much for your invaluable assist! It worked wonderfully.

@kazupon the canary is ready to test!! 0.9.0--canary.156.26b630a.0

[tom-fletcher]

No worries @yannbf - I've spent a bit of time with pnpm and github actions recently, glad to have helped with debugging the issue. Thanks for the work yourself and especially @kazupon have done on this, looking forward to integrating this with the new eslint config on a project when it is ready. 🙂

[kazupon]

@yannbf
Thanks!
I've just tested at my day job project!
That's works!

The lint itself is fine, but the type is any, so it would be nice if that could be resolved as well.

[epreston]

Was able to remove warnings in canary with everything working perfectly by pinning "@typescript-eslint/utils" dependency on eslint to the one configured in my project using an override in my projects 'package.json'.

  "devDependencies": {
    "eslint": "^9.7.0",
    "eslint-plugin-storybook": "^0.9.0--canary.156.ed236ca.0",
  },
  "overrides": {
    "@typescript-eslint/utils": {
      "eslint": "$eslint"
    }
  },

Looks like "@typescript-eslint/utils" has a conflicting peer dependency of eslint@"^8.56.0"

[akarmes]

There's a new major version of "@typescript-eslint/utils" that supports eslint v9

[akarmes]

If you remove this line, then pnpm/action-setup@v4 will be able to pick up pnpm version from packageManagerfield in package.json

[mohammedhammoud]

Awesome work! Any plans to release this soon?

[Mathias-S]

@yannbf @kasperpeulen Could you release a new (canary?) version where the glob pattern issue mentioned above is fixed?

ESLint v8 is actually not supported anymore so this means that eslint-plugin-storybook is only compatible with ESLint versions that have reached EOL.

[jdelStrother]

The latest canary (0.10.0--canary.156.408aed4.0) seems good.

I still see the following warning from yarn:

➤ YN0060: │ eslint is listed by your project with version 9.10.0 (pee0c4), which doesn't satisfy what @typescript-eslint/utils (via eslint-plugin-storybook) and other dependencies request (^8.57.0).

should the @typescript-eslint/utils dependency be bumped as part of this PR, or is that a separate issue?

[kasperpeulen]

@jdelStrother @Mathias-S We released a new canary where the mentioned issues should be fixed:
[email protected]

[jdelStrother]

Yep, lgtm

[github-actions]

🚀 PR was released in v0.10.0 🚀