Repository: storybook
Issue: [Bug]: Eslint new flat configuration support
Labels: bug,compatibility with other tools,has workaround,sev:S3

### Describe the bug

Storybook fails to read new eslint configuration. 

Eslint is planning to remove the old `.eslintrc.json` config setup and going to use `eslint.config.js` from version 9 on. As of version 8 it still supports current supported `.eslintrc.json` in storybook. More reading on eslint page [here](https://eslint.org/docs/latest/use/configure/configuration-files)

For projects using storybook that would like to future-proof eslint and change over to the new config system, I wish to report issue to work on this.

Further reading on the new config setup:

- [Configuration Files (New)](https://eslint.org/docs/latest/use/configure/configuration-files)
- [Configuration Migration Guide](https://eslint.org/docs/latest/use/configure/migration-guide)

**Terminal error**
On this terminal print you can se that the disable comment to supress eslint rules gets an error because the eslint confiugration is not read from `eslint.config.js` with all its plugins (in this case `@typescript-eslint`)
```
yarn run v1.22.19
$ storybook dev -p 6006
@storybook/cli v7.4.5

WARN No story files found for the specified pattern: src/**/*.mdx
info => Serving static files from ././public at /
info => Starting manager..
info Addon-docs: using MDX2
info => Loading Webpack configuration from node_modules/react-scripts
info => Removing existing JavaScript and TypeScript rules.
info => Modifying Create React App rules.
info => Using default Webpack5 setup
<i> [webpack-dev-middleware] wait until bundle finished
99% end closing watch compilationWARN Force closed preview build
[ESLintError: [eslint] 
src/Button/Button.stories.tsx
  Line 5:1:  Definition for rule '@typescript-eslint/no-explicit-any' was not found  @typescript-eslint/no-explicit-any

src/Button/Button.tsx
  Line 12:3:  Definition for rule '@typescript-eslint/no-explicit-any' was not found  @typescript-eslint/no-explicit-any

Search for the keywords to learn more about each error.]

WARN Broken build, fix the error above.
WARN You may need to refresh the browser.

No issues found.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
```

### To Reproduce

You can test this code using storybook with the new flat config system.

Also you can test this using this simple code:
https://github.com/benjaminrindaroy/storybook-eslint-flat-config

Be sure to run `yarn install` after you fetch the repo. This project is a fresh install of storybook.

### System

```bash
Environment Info:

  System:
    OS: macOS 13.5.2
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
  Binaries:
    Node: 20.2.0 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 9.6.6 - /usr/local/bin/npm
  Browsers:
    Chrome: 116.0.5845.187
    Safari: 16.6
  npmPackages:
    @storybook/addon-essentials: ^7.4.5 => 7.4.5 
    @storybook/addon-interactions: ^7.4.5 => 7.4.5 
    @storybook/addon-links: ^7.4.5 => 7.4.5 
    @storybook/addon-onboarding: ^1.0.8 => 1.0.8 
    @storybook/blocks: ^7.4.5 => 7.4.5 
    @storybook/preset-create-react-app: ^7.4.5 => 7.4.5 
    @storybook/react: ^7.4.5 => 7.4.5 
    @storybook/react-webpack5: ^7.4.5 => 7.4.5 
    @storybook/testing-library: ^0.2.1 => 0.2.1
```


### Additional context

If anyone counters this, there is a workaround in order to make storybook run. But you have create a `.eslintrc.json`. Still it defeats the purpose using the new flat config. 

Put any plugins that the disable-comments are using. For example:

`// eslint-disable-next-line @typescript-eslint/no-explicit-any` - needs the `@typescript-eslint` eslint plugin.
`// eslint-disable-next-line import/no-extraneous-dependencies` - needs the `import` eslint plugin
`// eslint-disable-next-line react-hooks/exhaustive-deps` - needs the `react` eslint plugin
...etc

So in order for my reproduce code to work for the workaround I need to create a `.eslintrc.json` with these settings:
```
{
  "root": true,
  "extends": ["eslint:recommended"],
  "parser": "@typescript-eslint/parser",
  "parserOptions": { "project": ["./tsconfig.json"] },
  "plugins": ["@typescript-eslint", "react", "import"],
  "ignorePatterns": ["*"]
}

```
The caveat of config above is that it ignores all files. But as long as you use the flat config in vscode linter, and eslint CLI. (you can set the `.env` rule on/off by using the `ESLINT_USE_FLAT_CONFIG` enviroment flag). Of course you can put your rules back in the `.eslintrc.json` that you use in the new `eslint.config.js`.