ESLint: Only apply csf-strict rules on stories files

[cylewaitforit]

Closes storybookjs/eslint-plugin-storybook#155

What I did

Updated csf-strict rules to apply on stories files. This is to fix csf-strict from disabling 'react-hooks/rules-of-hooks' and 'import/no-anonymous-default-export' for an entire project.

This updates and moves a PR the was previously opened in the eslint-plugin-storybook repo.

storybookjs/eslint-plugin-storybook#201

Checklist for Contributors

Testing

The changes in this PR are covered in the following automated tests:

• stories
• unit tests
• integration tests
• end-to-end tests

Manual testing

This section is mandatory for all contributions. If you believe no manual test is necessary, please state so explicitly. Thanks!

Documentation

• Add or update documentation reflecting your changes
• If you are deprecating/removing a feature, make sure to update
  MIGRATION.MD

Checklist for Maintainers

• When this PR is ready for testing, make sure to add ci:normal, ci:merged or ci:daily GH label to it to run a specific set of sandboxes. The particular set of sandboxes can be found in code/lib/cli-storybook/src/sandbox-templates.ts

• Make sure this PR contains one of the labels below:

  Available labels

  • bug: Internal changes that fixes incorrect behavior.
  • maintenance: User-facing maintenance tasks.
  • dependencies: Upgrading (sometimes downgrading) dependencies.
  • build: Internal-facing build tooling & test updates. Will not show up in release changelog.
  • cleanup: Minor cleanup style change. Will not show up in release changelog.
  • documentation: Documentation only changes. Will not show up in release changelog.
  • feature request: Introducing a new feature.
  • BREAKING CHANGE: Changes that break compatibility in some way with current major version.
  • other: Changes that don't fit in the above categories.

🦋 Canary release

This PR does not have a canary release associated. You can request a canary release of this pull request by mentioning the @storybookjs/core team here.

core team members can create a canary release here or locally with gh workflow run --repo storybookjs/storybook canary-release-pr.yml --field pr=<PR_NUMBER>

Greptile Summary

Updates the ESLint csf-strict configuration to properly scope rules to story files only, fixing incorrect project-wide rule application.

• Modified code/lib/eslint-plugin/src/configs/csf-strict.ts to target only *.stories.* and *.story.* files using overrides
• Fixed unintended disabling of react-hooks/rules-of-hooks and import/no-anonymous-default-export rules across entire projects
• Updated both traditional and flat config generation scripts to respect story file patterns
• Scoped rules to supported file extensions (ts, tsx, js, jsx, mjs, cjs) for better specificity

Summary by CodeRabbit

• Bug Fixes
  • CSF Strict rules now apply only to Storybook story files, reducing false positives in non-story code.
  • Flat config explicitly targets story files via file globs for consistent behavior across config formats.
• Refactor
  • Migrated from global rules to per-file overrides for clearer, more precise linting scope.
• Chores
  • Updated config generation to include file-based targeting when categories extend others, aligning legacy and flat configs.

[greptile-apps]

LGTM

_{4 files reviewed, no comments
Edit PR Review Bot Settings | Greptile}

[cylewaitforit]

Hey @valentinpalkovic I saw you had assigned this out, but I see last week it has been marked stale. Is there anything you need from me to address this?

[valentinpalkovic]

No. I think we're good, but just busy with the 9.1 release. I am sure that after releasing 9.1, @yannbf will take a look!

[yannbf]

Hey there @cylewaitforit, thanks for your contribution!
Won't this block users from specifying their own files to apply these rules? As it now has hardcode file paths? Perhaps we can do differently and leave things as they were, and only move these general, conflicting rules to a new entry that's always added, and has the hardcoded paths:

        'react-hooks/rules-of-hooks': 'off',
        'import/no-anonymous-default-export': 'off',

What do you think?

[cylewaitforit]

Hey @yannbf, thanks for reviewing. This updates csf-strict to follow the same pattern used by the other configs (see https://github.com/storybookjs/storybook/blob/next/code/lib/eslint-plugin/src/configs/recommended.ts and https://github.com/storybookjs/storybook/blob/next/code/lib/eslint-plugin/src/configs/csf.ts). Users should still have the ability to make any overrides in their own config after extending.

[cylewaitforit]

@yannbf Another option, if you’re concerned about this legacy config, might be to only leave the fix for the Flat Config and instead mark the legacy config options as deprecated for removal in V10 of this storybook eslint plugin.

Overriding files types for a config on the user side is very straight forward in the flat config and can be easily verified with the eslint config inspector.

[cylewaitforit]

@yannbf Are the legacy configs staying in eslint for Storybook 10 or will they be removed?

[yannbf]

Hey there, I'm so sorry this has become stale for so long.
We don't have plans to drop ESLint v8 support as there are still tons of users on that version.
Additionally, I spent some time today on this PR and made changes to address my concern, by separating the normal rules (without any overrides) to the extra overrides (which would use the overrides), so that users can define any file name for stories.. but to be honest, this plugin's purpose is to help users follow standards, and the story file name is a standard 😅 so I'll just go on and accept your PR as is! Thank you so much for your contribution 🙏

If users report this as a breaking change I'll revisit this.

[cylewaitforit]

Thanks @yannbf! Appreciate the time and thoughtfulness you gave to the review.

[coderabbitai]

Walkthrough

The PR scopes the csf-strict ESLint rules to Storybook story files only. In the classic config and its generator script, top-level rules are replaced with an overrides array targeting STORIES_GLOBS. In the flat config and its generator script, a files field with STORIES_GLOBS is added to the rules entry. These changes ensure the csf-strict rule set applies only to files matching .stories. and .story. patterns across ts/tsx/js/jsx/mjs/cjs. Export signatures update accordingly where the config shape changes from rules to overrides.

Possibly related issues

• [Bug]: eslint-plugin-storybook csf strict rules are applied to all files #32346: Scopes csf-strict rules via files/overrides to prevent applying to non-story files, matching the issue’s objective.

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	You can run @coderabbitai generate docstrings to improve docstring coverage.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title Check	✅ Passed	The title succinctly and accurately describes the primary change in the PR: scoping the csf-strict ESLint rules to story files, which matches the config and generator updates that add file globs/overrides for .stories. and .story. with the supported extensions.

✨ Finishing touches

• 📝 Generate Docstrings

🧪 Generate unit tests

• Create PR with unit tests
• Post copyable unit tests in a comment

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 68140f7 and 195d2ea.

📒 Files selected for processing (4)

• code/lib/eslint-plugin/scripts/update-lib-configs.ts (1 hunks)
• code/lib/eslint-plugin/scripts/update-lib-flat-configs.ts (1 hunks)
• code/lib/eslint-plugin/src/configs/csf-strict.ts (1 hunks)
• code/lib/eslint-plugin/src/configs/flat/csf-strict.ts (1 hunks)

🧰 Additional context used

🧠 Learnings (1)

📚 Learning: 2025-09-17T08:11:04.287Z

Learnt from: CR
PR: storybookjs/storybook#0
File: .cursorrules:0-0
Timestamp: 2025-09-17T08:11:04.287Z
Learning: Applies to code/**/*.{test,spec}.{ts,tsx} : Name test files as *.test.ts, *.test.tsx, *.spec.ts, or *.spec.tsx

Applied to files:

• code/lib/eslint-plugin/src/configs/flat/csf-strict.ts

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)

• GitHub Check: normal

🔇 Additional comments (4)

code/lib/eslint-plugin/scripts/update-lib-flat-configs.ts (1)

67-67: LGTM! Flat config correctly scoped to story files.

This change adds a files field to scope the ESLint rules to story files only, which aligns with the PR objective to fix the csf-strict configuration. The STORIES_GLOBS pattern ensures rules apply only to *.stories.* and *.story.* files.

code/lib/eslint-plugin/scripts/update-lib-configs.ts (1)

53-56: LGTM! Traditional config correctly uses overrides for story files.

The change properly implements file-scoped rules using ESLint's overrides mechanism. This ensures that when extendsCategoryId is present, the rules are applied only to story files matching the STORIES_GLOBS patterns, which addresses the core issue described in the PR.

code/lib/eslint-plugin/src/configs/flat/csf-strict.ts (1)

12-12: LGTM! File patterns correctly target story files.

The glob patterns properly target both .stories. and .story. file naming conventions with comprehensive file extension coverage (ts, tsx, js, jsx, mjs, cjs). This ensures the csf-strict rules apply only to story files as intended.

code/lib/eslint-plugin/src/configs/csf-strict.ts (1)

10-20: LGTM! Legacy config properly scoped using overrides.

The transformation from top-level rules to an overrides array correctly addresses the issue where csf-strict rules were being applied globally. The file patterns and rules are consistent with the flat config implementation, ensuring both configuration formats behave identically.

Based on the past review comments, this approach maintains user flexibility while fixing the core scoping issue. Users can still override these configurations in their own ESLint config files.

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[storybook-app-bot]

Package Benchmarks

^{Commit: 47d8e38, ran on 7 November 2025 at 11:09:11 UTC}

No significant changes detected, all good. 👏

[nx-cloud]

View your CI Pipeline Execution ↗ for commit 47d8e38

Command	Status	Duration	Result
nx run-many -t build --parallel=3	✅ Succeeded	46s	View ↗

---

☁️ Nx Cloud last updated this comment at 2025-11-07 10:53:14 UTC