Build: Fix internal docgen issue

[yannbf]

Closes #

What I did

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 publish.yml --field pr=<PR_NUMBER>

Summary by CodeRabbit

Release Notes

• Refactor
  • Updated internal type definitions and import structures for improved code maintainability.

---

Note: This release includes internal improvements with no direct impact on user-facing features.

[nx-cloud]

View your CI Pipeline Execution ↗ for commit bb38f2d

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

---

☁️ Nx Cloud last updated this comment at 2025-11-11 15:11:06 UTC

[coderabbitai]

📝 Walkthrough

Walkthrough

A CSS module import in a TypeScript React component is modified from default to namespace import. The PropsWriterProps.myClass type is updated from typeof styles.foo to typeof styles, with corresponding adjustments to defaultProps and TypeScript ignore directives.

Changes

Cohort / File(s)	Summary
CSS Module Import and Type Adjustment code/renderers/react/template/stories/docgen-components/ts-function-component/input.tsx	Modified CSS module import from default to namespace import; updated PropsWriterProps.myClass type from typeof styles.foo to typeof styles; added TS-ignore directive to defaultProps.myClass entry

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~5 minutes

✨ Finishing touches

• 📝 Generate docstrings

---

📜 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 1d0c0da and bb38f2d.

📒 Files selected for processing (1)

• code/renderers/react/template/stories/docgen-components/ts-function-component/input.tsx (3 hunks)

🧰 Additional context used

📓 Path-based instructions (4)

**/*.{js,jsx,json,html,ts,tsx,mjs}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

**/*.{js,jsx,json,html,ts,tsx,mjs}: Run Prettier formatting on changed files before committing
Run ESLint on changed files and fix all errors/warnings before committing (use yarn lint:js:cmd <file>)

Files:

• code/renderers/react/template/stories/docgen-components/ts-function-component/input.tsx

**/*.{ts,tsx,js,jsx,mjs}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

Export functions from modules when they need to be unit-tested

Files:

• code/renderers/react/template/stories/docgen-components/ts-function-component/input.tsx

code/**/*.{ts,tsx,js,jsx,mjs}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

In application code, use Storybook loggers instead of console.* (client code: storybook/internal/client-logger; server code: storybook/internal/node-logger)

Files:

• code/renderers/react/template/stories/docgen-components/ts-function-component/input.tsx

{code/**,scripts/**}/**/*.{ts,tsx,js,jsx,mjs}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

Do not use console.log, console.warn, or console.error directly unless in isolated files where importing loggers would significantly increase bundle size

Files:

• code/renderers/react/template/stories/docgen-components/ts-function-component/input.tsx

🧠 Learnings (4)

📓 Common learnings

Learnt from: Sidnioulz
Repo: storybookjs/storybook PR: 32458
File: code/core/src/components/components/Select/Select.tsx:200-204
Timestamp: 2025-11-05T09:38:47.694Z
Learning: Repo: storybookjs/storybook — Guidance: Until Storybook 11 is released, do not suggest using React.useId anywhere (e.g., in code/core/src/components/components/Select/Select.tsx) to maintain compatibility with React 17 runtimes. Prefer advising: accept a caller-provided props.id and, if needed, generate a client-only fallback id to minimize SSR hydration issues — but avoid useId. Resume prompting for useId after Storybook 11.

Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-10-13T13:33:14.659Z
Learning: Applies to **/*.{ts,tsx,js,jsx,mjs} : Export functions from modules when they need to be unit-tested

📚 Learning: 2025-11-05T09:37:25.903Z

Learnt from: Sidnioulz
Repo: storybookjs/storybook PR: 32458
File: code/core/src/components/components/tooltip/WithTooltip.tsx:54-96
Timestamp: 2025-11-05T09:37:25.903Z
Learning: Repo: storybookjs/storybook — In code/core/src/components/components/tooltip/WithTooltip.tsx, the legacy WithTooltip implementation is intentionally reintroduced for backward compatibility and is deprecated; maintainers (per Sidnioulz) do not want maintenance or improvements on it. Prefer WithTooltipNew/Popover; avoid suggesting changes to WithTooltip.* going forward.

Applied to files:

• code/renderers/react/template/stories/docgen-components/ts-function-component/input.tsx

📚 Learning: 2025-11-05T09:38:47.694Z

Learnt from: Sidnioulz
Repo: storybookjs/storybook PR: 32458
File: code/core/src/components/components/Select/Select.tsx:200-204
Timestamp: 2025-11-05T09:38:47.694Z
Learning: Repo: storybookjs/storybook — Guidance: Until Storybook 11 is released, do not suggest using React.useId anywhere (e.g., in code/core/src/components/components/Select/Select.tsx) to maintain compatibility with React 17 runtimes. Prefer advising: accept a caller-provided props.id and, if needed, generate a client-only fallback id to minimize SSR hydration issues — but avoid useId. Resume prompting for useId after Storybook 11.

Applied to files:

• code/renderers/react/template/stories/docgen-components/ts-function-component/input.tsx

📚 Learning: 2025-10-13T13:33:14.659Z

Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-10-13T13:33:14.659Z
Learning: Applies to **/*.{ts,tsx,js,jsx,mjs} : Export functions from modules when they need to be unit-tested

Applied to files:

• code/renderers/react/template/stories/docgen-components/ts-function-component/input.tsx

⏰ 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). (3)

• GitHub Check: Danger JS
• GitHub Check: normal
• GitHub Check: Core Unit Tests, windows-latest

🔇 Additional comments (2)

code/renderers/react/template/stories/docgen-components/ts-function-component/input.tsx (2)

7-8: CSS module import pattern updated.

The change from default to namespace import is a valid pattern for CSS modules and likely addresses the docgen parsing issue mentioned in the PR title. The updated comment more accurately reflects that CSS modules typically lack TypeScript type definitions.

---

32-34: Type inconsistency between prop type and actual usage is intentional for this test fixture.

The myClass property is typed as typeof styles (the entire CSS module namespace), but the actual value assigned in defaultProps is styles.foo (a single property). This is intentional—the git history shows this file was specifically updated to "import styles as a namespace for better compatibility with TypeScript" as a regression test for CSS file imports.

However, verify that this type mismatch correctly demonstrates the docgen behavior you're testing:

• Does the fixture intentionally test how docgen handles CSS module type mismatches?
• Is this the expected/correct behavior for docgen with namespace CSS imports?

If the fixture should instead have matching types, change line 32 to myClass: typeof styles.foo or myClass: string.

---

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