Core: Fix wrong import to fix Yarn PnP support

[yannbf]

Closes #32911

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 pull request has been released as version 0.0.0-pr-32928-sha-4befe9a9. Try it out in a new sandbox by running npx [email protected] sandbox or in an existing project with npx [email protected] upgrade.

More information

Published version	0.0.0-pr-32928-sha-4befe9a9
Triggered by	@yannbf
Repository	storybookjs/storybook
Branch	yann/fix-pnp-issue
Commit	4befe9a9
Datetime	Mon Nov 3 11:39:47 UTC 2025 (1762169987)
Workflow run	19033460511

To request a new release of this pull request, mention the @storybookjs/core team.

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

Summary by CodeRabbit

• Refactor
  • Internal code reorganization of component imports with no impact to application functionality or user experience.

[coderabbitai]

📝 Walkthrough

Walkthrough

Import sources are reorganized in StatusBadge.tsx. TooltipNote and WithTooltip are now imported from storybook/internal/components, while Color, styled, and typography are imported from storybook/theming. No changes to runtime logic, types, or rendering behavior.

Changes

Cohort / File(s)	Change Summary
Import reorganization code/core/src/component-testing/components/StatusBadge.tsx	Reordered imports; TooltipNote and WithTooltip sourced from storybook/internal/components; Color, styled, and typography sourced from storybook/theming

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~2 minutes

• Verify import paths resolve correctly in the target modules
• Confirm no circular dependency issues introduced

✨ 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 03cae6b and 4befe9a.

📒 Files selected for processing (1)

• code/core/src/component-testing/components/StatusBadge.tsx (1 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/core/src/component-testing/components/StatusBadge.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/core/src/component-testing/components/StatusBadge.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/core/src/component-testing/components/StatusBadge.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/core/src/component-testing/components/StatusBadge.tsx

🧠 Learnings (2)

📓 Common learnings

Learnt from: Sidnioulz
Repo: storybookjs/storybook PR: 32594
File: code/core/src/components/components/Popover/WithPopover.tsx:7-9
Timestamp: 2025-10-01T15:24:01.060Z
Learning: In the Storybook repository, "react-aria-components/patched-dist/*" (e.g., "react-aria-components/patched-dist/Dialog", "react-aria-components/patched-dist/Popover", "react-aria-components/patched-dist/Tooltip") are valid import paths created by a patch applied to the react-aria-components package. These imports should not be flagged as broken or invalid until a maintainer explicitly states they are no longer acceptable.

📚 Learning: 2025-10-01T15:24:01.060Z

Learnt from: Sidnioulz
Repo: storybookjs/storybook PR: 32594
File: code/core/src/components/components/Popover/WithPopover.tsx:7-9
Timestamp: 2025-10-01T15:24:01.060Z
Learning: In the Storybook repository, "react-aria-components/patched-dist/*" (e.g., "react-aria-components/patched-dist/Dialog", "react-aria-components/patched-dist/Popover", "react-aria-components/patched-dist/Tooltip") are valid import paths created by a patch applied to the react-aria-components package. These imports should not be flagged as broken or invalid until a maintainer explicitly states they are no longer acceptable.

Applied to files:

• code/core/src/component-testing/components/StatusBadge.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: normal
• GitHub Check: Core Unit Tests, windows-latest
• GitHub Check: get-branch

🔇 Additional comments (1)

code/core/src/component-testing/components/StatusBadge.tsx (1)

3-5: Import reorganization is correct and properly fixes the Yarn PnP dependency chain.

Verification confirms:

• TooltipNote and WithTooltip are properly exported from storybook/internal/components (code/core/src/components/index.ts:58,60)
• Color, styled, and typography are available from storybook/theming
• All imports in StatusBadge.tsx are actively used (WithTooltip at line 59, TooltipNote at line 60, theming utilities at lines 37, 40, 42, 44, 45)
• No other files in the codebase exhibit the reversed import pattern

---

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

[nx-cloud]

View your CI Pipeline Execution ↗ for commit 4befe9a

Command	Status	Duration	Result
nx run-many -t check -c production --parallel=7	✅ Succeeded	1s	View ↗
nx run-many -t build -c production --parallel=3	✅ Succeeded	2s	View ↗

---

☁️ Nx Cloud last updated this comment at 2025-11-03 11:56:51 UTC