CLI: Handle Yarn PnP wrapper scenario when adding an addon

[yannbf]

Closes #

What I did

This PR introduces logic in the storybook add command so it handles scenarios where the user has a main.js with pnp require wrappers (for monorepos) like so:

const getAbsolutePath = (path) => require('path').resolve(__dirname, path)

const config: StorybookConfig = {
  addons: [
    getAbsolutePath("foo")
  ],
}
export default config

1 - When there are no wrappers -> Just add "addon-name" to the field
2 - When there are wrappers named either wrapForPnP or getAbsolutePath -> add wrapperName("addon-name") to the field

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/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>

name	before	after	diff	z	%
createSize	0 B	0 B	0 B	-	-
generateSize	76.5 MB	76.5 MB	0 B	0.82	0%
initSize	161 MB	161 MB	0 B	-1.29	0%
diffSize	84.7 MB	84.7 MB	0 B	-1.79	0%
buildSize	7.48 MB	7.48 MB	0 B	1.36	0%
buildSbAddonsSize	1.62 MB	1.62 MB	0 B	0.73	0%
buildSbCommonSize	195 kB	195 kB	0 B	-	0%
buildSbManagerSize	2.31 MB	2.31 MB	0 B	-0.71	0%
buildSbPreviewSize	352 kB	352 kB	0 B	-	0%
buildStaticSize	0 B	0 B	0 B	-	-
buildPrebuildSize	4.47 MB	4.47 MB	0 B	0.73	0%
buildPreviewSize	3.01 MB	3.01 MB	0 B	1.34	0%
testBuildSize	0 B	0 B	0 B	-	-
testBuildSbAddonsSize	0 B	0 B	0 B	-	-
testBuildSbCommonSize	0 B	0 B	0 B	-	-
testBuildSbManagerSize	0 B	0 B	0 B	-	-
testBuildSbPreviewSize	0 B	0 B	0 B	-	-
testBuildStaticSize	0 B	0 B	0 B	-	-
testBuildPrebuildSize	0 B	0 B	0 B	-	-
testBuildPreviewSize	0 B	0 B	0 B	-	-

name	before	after	diff	z	%
createTime	11.6s	24.8s	13.2s	1.75	🔺53.3%
generateTime	22.8s	19s	-3s -804ms	-0.69	-20%
initTime	18.7s	16.2s	-2s -468ms	-0.57	-15.1%
buildTime	12.2s	24.3s	12.1s	8.08	🔺49.9%
testBuildTime	0ms	0ms	0ms	-	-
devPreviewResponsive	7.5s	8.9s	1.3s	1.81	🔺15.4%
devManagerResponsive	4.8s	5.6s	855ms	2.12	🔺15%
devManagerHeaderVisible	925ms	983ms	58ms	1.33	🔺5.9%
devManagerIndexVisible	969ms	1s	64ms	1.37	🔺6.2%
devStoryVisibleUncached	1.6s	1.7s	93ms	0.46	5.4%
devStoryVisible	967ms	1s	67ms	1.37	🔺6.5%
devAutodocsVisible	764ms	911ms	147ms	1.65	🔺16.1%
devMDXVisible	716ms	962ms	246ms	2.08	🔺25.6%
buildManagerHeaderVisible	813ms	986ms	173ms	2.86	🔺17.5%
buildManagerIndexVisible	815ms	1s	217ms	3.27	🔺21%
buildStoryVisible	857ms	1s	176ms	2.24	🔺17%
buildAutodocsVisible	696ms	936ms	240ms	3.06	🔺25.6%
buildMDXVisible	730ms	919ms	189ms	2.38	🔺20.6%

Greptile Summary

This PR enhances the Storybook CLI's add command to handle Yarn PnP wrapper scenarios when adding addons to monorepo setups.

• Modified add function in code/lib/cli-storybook/src/add.ts to check for require wrappers in main.js
• Added logic to wrap addon names with appropriate require wrapper if present
• Imported new utility functions from './automigrate/fixes/wrap-require-utils' for wrapper detection and handling
• Improved compatibility with monorepo setups using Yarn PnP by adjusting how addons are added to main.js

[greptile-apps]

_{1 file(s) reviewed, 1 comment(s)
Edit PR Review Bot Settings}

[greptile-apps]

style: type assertion to 'any' may hide potential type errors, consider using a more specific type

[nx-cloud]

☁️ Nx Cloud Report

CI is running/has finished running commands for commit 57af7c0. As they complete they will appear below. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this CI Pipeline Execution

---

✅ Successfully ran 1 target

• nx run-many -t build --parallel=3

---

Sent with 💌 from NxCloud.

[JReinhold]

LGTM, apart from the failing tests.