From 97a9f26a1937b1710315217a779e4f38eb4a61d6 Mon Sep 17 00:00:00 2001 From: storybook-bot <32066757+storybook-bot@users.noreply.github.com> Date: Thu, 21 Mar 2024 16:35:03 +0000 Subject: [PATCH 01/11] Update ./docs/versions/next.json for v8.1.0-alpha.4 --- docs/versions/next.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/versions/next.json b/docs/versions/next.json index 41825fb5bf44..5bca2714437b 100644 --- a/docs/versions/next.json +++ b/docs/versions/next.json @@ -1 +1 @@ -{"version":"8.1.0-alpha.3","info":{"plain":"- Addon Docs: Fix [Object object] displayName in some JSX components - [#26566](https://github.com/storybookjs/storybook/pull/26566), thanks @yannbf!\n- CLI: Introduce package manager fallback for initializing Storybook in an empty directory with yarn1 - [#26500](https://github.com/storybookjs/storybook/pull/26500), thanks @valentinpalkovic!\n- CSF: Make sure loaders/decorators can be used as array - [#26514](https://github.com/storybookjs/storybook/pull/26514), thanks @kasperpeulen!\n- Controls: Fix disable condition in ArgControl component - [#26567](https://github.com/storybookjs/storybook/pull/26567), thanks @valentinpalkovic!\n- Portable stories: Introduce experimental Playwright CT API and Support for more renderers - [#26063](https://github.com/storybookjs/storybook/pull/26063), thanks @yannbf!\n- UI: Fix theming of elements inside bars - [#26527](https://github.com/storybookjs/storybook/pull/26527), thanks @valentinpalkovic!\n- UI: Improve empty state of addon panel - [#26481](https://github.com/storybookjs/storybook/pull/26481), thanks @yannbf!"}} +{"version":"8.1.0-alpha.4","info":{"plain":"- Addon Docs: Support Stencil based display names in source snippets - [#26592](https://github.com/storybookjs/storybook/pull/26592), thanks @yannbf!\n- Angular: Add type support for Angular's input signals - [#26413](https://github.com/storybookjs/storybook/pull/26413), thanks @valentinpalkovic!\n- Angular: Add type support for Angular's output signals - [#26546](https://github.com/storybookjs/storybook/pull/26546), thanks @valentinpalkovic!\n- CLI: Instruct the correct auto-migration command - [#26515](https://github.com/storybookjs/storybook/pull/26515), thanks @ndelangen!\n- CLI: Throw an error when running upgrade command in incorrect cwd - [#26585](https://github.com/storybookjs/storybook/pull/26585), thanks @yannbf!\n- CSF: Allow default export without title or component attributes - [#26516](https://github.com/storybookjs/storybook/pull/26516), thanks @kasperpeulen!\n- Core: Fix preloading too early - [#26442](https://github.com/storybookjs/storybook/pull/26442), thanks @ndelangen!\n- UI: Replace the icon prop in the Manager API - [#26477](https://github.com/storybookjs/storybook/pull/26477), thanks @cdedreuille!"}} From a8f68f76cb79042024c44df70088b90cd6c6c692 Mon Sep 17 00:00:00 2001 From: Lars Rickert Date: Fri, 22 Mar 2024 09:39:49 +0100 Subject: [PATCH 02/11] feat(vue-component-meta): support defineModel and empty slots --- code/frameworks/vue3-vite/package.json | 2 +- .../src/plugins/vue-component-meta.ts | 18 ++- .../component-meta/DefineModel.stories.ts | 16 +++ .../component-meta/DefineSlots.stories.ts | 18 +++ .../component-meta/define-model/component.vue | 7 ++ .../component-meta/define-slots/component.vue | 22 ++++ code/yarn.lock | 113 ++++++++++++------ 7 files changed, 146 insertions(+), 50 deletions(-) create mode 100644 code/renderers/vue3/template/stories_vue3-vite-default-ts/component-meta/DefineModel.stories.ts create mode 100644 code/renderers/vue3/template/stories_vue3-vite-default-ts/component-meta/DefineSlots.stories.ts create mode 100644 code/renderers/vue3/template/stories_vue3-vite-default-ts/component-meta/define-model/component.vue create mode 100644 code/renderers/vue3/template/stories_vue3-vite-default-ts/component-meta/define-slots/component.vue diff --git a/code/frameworks/vue3-vite/package.json b/code/frameworks/vue3-vite/package.json index d9c345d0cfbc..770a8dae006c 100644 --- a/code/frameworks/vue3-vite/package.json +++ b/code/frameworks/vue3-vite/package.json @@ -53,7 +53,7 @@ "find-package-json": "^1.2.0", "magic-string": "^0.30.0", "typescript": "^5.0.0", - "vue-component-meta": "^1.8.27", + "vue-component-meta": "^2.0.7", "vue-docgen-api": "^4.75.1" }, "devDependencies": { diff --git a/code/frameworks/vue3-vite/src/plugins/vue-component-meta.ts b/code/frameworks/vue3-vite/src/plugins/vue-component-meta.ts index 7ec671bddf62..7ebeac95e2ed 100644 --- a/code/frameworks/vue3-vite/src/plugins/vue-component-meta.ts +++ b/code/frameworks/vue3-vite/src/plugins/vue-component-meta.ts @@ -5,8 +5,8 @@ import path from 'path'; import type { PluginOption } from 'vite'; import { TypeMeta, - createComponentMetaChecker, - createComponentMetaCheckerByJsonConfig, + createChecker, + createCheckerByJson, type ComponentMeta, type MetaCheckerOptions, } from 'vue-component-meta'; @@ -28,7 +28,7 @@ export async function vueComponentMeta(): Promise { const include = /\.(vue|ts|js|tsx|jsx)$/; const filter = createFilter(include, exclude); - const checker = await createChecker(); + const checker = await createCheckerWithWorkaround(); return { name: 'storybook:vue-component-meta-plugin', @@ -127,8 +127,10 @@ export async function vueComponentMeta(): Promise { /** * Creates the vue-component-meta checker to use for extracting component meta/docs. + * Includes a workaround for projects using references in their tsconfig.json which + * is currently not supported by vue-component-meta. */ -async function createChecker() { +async function createCheckerWithWorkaround() { const checkerOptions: MetaCheckerOptions = { forceUseTs: true, noDeclarations: true, @@ -138,11 +140,7 @@ async function createChecker() { const projectRoot = getProjectRoot(); const projectTsConfigPath = path.join(projectRoot, 'tsconfig.json'); - const defaultChecker = createComponentMetaCheckerByJsonConfig( - projectRoot, - { include: ['**/*'] }, - checkerOptions - ); + const defaultChecker = createCheckerByJson(projectRoot, { include: ['**/*'] }, checkerOptions); // prefer the tsconfig.json file of the project to support alias resolution etc. if (await fileExists(projectTsConfigPath)) { @@ -155,7 +153,7 @@ async function createChecker() { // TODO: paths/aliases are not resolvable, find workaround for this return defaultChecker; } - return createComponentMetaChecker(projectTsConfigPath, checkerOptions); + return createChecker(projectTsConfigPath, checkerOptions); } return defaultChecker; diff --git a/code/renderers/vue3/template/stories_vue3-vite-default-ts/component-meta/DefineModel.stories.ts b/code/renderers/vue3/template/stories_vue3-vite-default-ts/component-meta/DefineModel.stories.ts new file mode 100644 index 000000000000..be2f612287a5 --- /dev/null +++ b/code/renderers/vue3/template/stories_vue3-vite-default-ts/component-meta/DefineModel.stories.ts @@ -0,0 +1,16 @@ +import type { Meta, StoryObj } from '@storybook/vue3'; +import Component from './define-model/component.vue'; + +const meta = { + component: Component, + tags: ['autodocs'], +} satisfies Meta; + +type Story = StoryObj; +export default meta; + +export const Default: Story = { + args: { + modelValue: 'Test value', + }, +}; diff --git a/code/renderers/vue3/template/stories_vue3-vite-default-ts/component-meta/DefineSlots.stories.ts b/code/renderers/vue3/template/stories_vue3-vite-default-ts/component-meta/DefineSlots.stories.ts new file mode 100644 index 000000000000..1a06ce6bb504 --- /dev/null +++ b/code/renderers/vue3/template/stories_vue3-vite-default-ts/component-meta/DefineSlots.stories.ts @@ -0,0 +1,18 @@ +import type { Meta, StoryObj } from '@storybook/vue3'; +import Component from './define-slots/component.vue'; + +const meta = { + component: Component, + tags: ['autodocs'], +} satisfies Meta; + +type Story = StoryObj; +export default meta; + +export const Default: Story = { + args: { + default: ({ num }) => `Default slot { num=${num} }`, + named: ({ str }) => `Named slot { str=${str} }`, + vbind: ({ num, str }) => `Named v-bind slot { num=${num}, str=${str} }`, + }, +}; diff --git a/code/renderers/vue3/template/stories_vue3-vite-default-ts/component-meta/define-model/component.vue b/code/renderers/vue3/template/stories_vue3-vite-default-ts/component-meta/define-model/component.vue new file mode 100644 index 000000000000..0b1ea4b3a3d6 --- /dev/null +++ b/code/renderers/vue3/template/stories_vue3-vite-default-ts/component-meta/define-model/component.vue @@ -0,0 +1,7 @@ + + + diff --git a/code/renderers/vue3/template/stories_vue3-vite-default-ts/component-meta/define-slots/component.vue b/code/renderers/vue3/template/stories_vue3-vite-default-ts/component-meta/define-slots/component.vue new file mode 100644 index 000000000000..94533f010bdb --- /dev/null +++ b/code/renderers/vue3/template/stories_vue3-vite-default-ts/component-meta/define-slots/component.vue @@ -0,0 +1,22 @@ + + + diff --git a/code/yarn.lock b/code/yarn.lock index 2fb0fb333137..d38001944e61 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -6854,7 +6854,7 @@ __metadata: magic-string: "npm:^0.30.0" typescript: "npm:^5.3.2" vite: "npm:^4.0.0" - vue-component-meta: "npm:^1.8.27" + vue-component-meta: "npm:^2.0.7" vue-docgen-api: "npm:^4.75.1" peerDependencies: vite: ^4.0.0 || ^5.0.0 @@ -8689,12 +8689,12 @@ __metadata: languageName: node linkType: hard -"@volar/language-core@npm:1.11.1, @volar/language-core@npm:~1.11.1": - version: 1.11.1 - resolution: "@volar/language-core@npm:1.11.1" +"@volar/language-core@npm:2.1.4, @volar/language-core@npm:~2.1.3": + version: 2.1.4 + resolution: "@volar/language-core@npm:2.1.4" dependencies: - "@volar/source-map": "npm:1.11.1" - checksum: 92c4439e3a9ccc534c970031388c318740f6fa032283d03e136c6c8c0228f549c68a7c363af1a28252617a0dca6069e14028329ac906d5acf1912931d0cdcb69 + "@volar/source-map": "npm:2.1.4" + checksum: b1817f479b7ac396a173de9bc1432cfb6ea64555901e3ea8004d6ae585430f0f2dfd83fbe1413ec003e64cb3769ea79f55fccc9784d87f27f0e40eff1b2bab5c languageName: node linkType: hard @@ -8707,12 +8707,12 @@ __metadata: languageName: node linkType: hard -"@volar/source-map@npm:1.11.1, @volar/source-map@npm:~1.11.1": - version: 1.11.1 - resolution: "@volar/source-map@npm:1.11.1" +"@volar/source-map@npm:2.1.4": + version: 2.1.4 + resolution: "@volar/source-map@npm:2.1.4" dependencies: - muggle-string: "npm:^0.3.1" - checksum: 0bfc639889802705f8036ea8b2052a95a4d691a68bc2b6744ba8b9d312d887393dd3278101180a5ee5304972899d493972a483afafd41e097968746c77d724cb + muggle-string: "npm:^0.4.0" + checksum: 246f2ddc41cf47950f7e6c9da5f78a0f87142ee85823379a574d2beed4a048bc8dd87d3f95debe78a3bb52efbca4fe1625edc3d0bbb7c5313d23651fc6f7b035 languageName: node linkType: hard @@ -8725,13 +8725,13 @@ __metadata: languageName: node linkType: hard -"@volar/typescript@npm:~1.11.1": - version: 1.11.1 - resolution: "@volar/typescript@npm:1.11.1" +"@volar/typescript@npm:~2.1.3": + version: 2.1.4 + resolution: "@volar/typescript@npm:2.1.4" dependencies: - "@volar/language-core": "npm:1.11.1" + "@volar/language-core": "npm:2.1.4" path-browserify: "npm:^1.0.1" - checksum: 86fe153db3a14d8eb3632784a1d7fcbfbfb51fa5517c3878bfdd49ee8d15a83b1a09f9c589454b7396454c104d3a8e2db3a987dc99b37c33816772fc3e292bf2 + checksum: 62158d6e3cd1b29d06fe519ae676f47f61b685127ed09f97c9365c37647cce236e7f6f4b0259456da4b735fd4e355f71e1efc298dbec08677bafd8b02ac37b36 languageName: node linkType: hard @@ -8760,6 +8760,19 @@ __metadata: languageName: node linkType: hard +"@vue/compiler-core@npm:3.4.21": + version: 3.4.21 + resolution: "@vue/compiler-core@npm:3.4.21" + dependencies: + "@babel/parser": "npm:^7.23.9" + "@vue/shared": "npm:3.4.21" + entities: "npm:^4.5.0" + estree-walker: "npm:^2.0.2" + source-map-js: "npm:^1.0.2" + checksum: 3ee871b95e17948d10375093c8dd3265923f844528a24ac67512c201ddb9b628021c010565f3e50f2e551b217c502e80a7901384f616a977a04f81e68c64a37c + languageName: node + linkType: hard + "@vue/compiler-core@npm:3.4.5, @vue/compiler-core@npm:^3.0.0": version: 3.4.5 resolution: "@vue/compiler-core@npm:3.4.5" @@ -8803,6 +8816,16 @@ __metadata: languageName: node linkType: hard +"@vue/compiler-dom@npm:^3.4.0": + version: 3.4.21 + resolution: "@vue/compiler-dom@npm:3.4.21" + dependencies: + "@vue/compiler-core": "npm:3.4.21" + "@vue/shared": "npm:3.4.21" + checksum: b4a1099eddacded2663d12388b48088ca0be0d8969a070476f49e4e65da9b22851fc897cc693662b178e7e7fdee98fcf9ea3617a1f626c3a1b2089815cb1264e + languageName: node + linkType: hard + "@vue/compiler-sfc@npm:3.0.0": version: 3.0.0 resolution: "@vue/compiler-sfc@npm:3.0.0" @@ -8915,17 +8938,15 @@ __metadata: languageName: node linkType: hard -"@vue/language-core@npm:1.8.27": - version: 1.8.27 - resolution: "@vue/language-core@npm:1.8.27" +"@vue/language-core@npm:2.0.7": + version: 2.0.7 + resolution: "@vue/language-core@npm:2.0.7" dependencies: - "@volar/language-core": "npm:~1.11.1" - "@volar/source-map": "npm:~1.11.1" - "@vue/compiler-dom": "npm:^3.3.0" - "@vue/shared": "npm:^3.3.0" + "@volar/language-core": "npm:~2.1.3" + "@vue/compiler-dom": "npm:^3.4.0" + "@vue/shared": "npm:^3.4.0" computeds: "npm:^0.0.1" minimatch: "npm:^9.0.3" - muggle-string: "npm:^0.3.1" path-browserify: "npm:^1.0.1" vue-template-compiler: "npm:^2.7.14" peerDependencies: @@ -8933,7 +8954,7 @@ __metadata: peerDependenciesMeta: typescript: optional: true - checksum: 2018214d8ce2643d19e8e84eddaeacddca28b2980984d7916d97f97556c3716be184cf9f8c4f506d072a11f265401e3bc0391117cf7cfcc1e4a25048f4432dc7 + checksum: c4da8e077c50cbc2d3bfb112d63ed6112aa0fd834ca63fbc3e2b6f2fdd58fdb3dbd5ad9e3332e373c330f049fac2f8465e4063790e24efafd95572087f896b74 languageName: node linkType: hard @@ -9036,6 +9057,13 @@ __metadata: languageName: node linkType: hard +"@vue/shared@npm:3.4.21, @vue/shared@npm:^3.4.0": + version: 3.4.21 + resolution: "@vue/shared@npm:3.4.21" + checksum: 79cba4228c3c1769ba8024302d7dbebf6ed1b77fb2e7a69e635cdebaa1c18b409e9c27ce27ccbe3a98e702a7e2dae1b87754d87f0b29adfe2a8f9e1e7c7899d5 + languageName: node + linkType: hard + "@vue/shared@npm:3.4.5, @vue/shared@npm:^3.3.0": version: 3.4.5 resolution: "@vue/shared@npm:3.4.5" @@ -21277,6 +21305,13 @@ __metadata: languageName: node linkType: hard +"muggle-string@npm:^0.4.0": + version: 0.4.1 + resolution: "muggle-string@npm:0.4.1" + checksum: e914b63e24cd23f97e18376ec47e4ba3aa24365e4776212b666add2e47bb158003212980d732c49abf3719568900af7861873844a6e2d3a7ca7e86952c0e99e9 + languageName: node + linkType: hard + "multicast-dns@npm:^7.2.5": version: 7.2.5 resolution: "multicast-dns@npm:7.2.5" @@ -29382,27 +29417,20 @@ __metadata: languageName: node linkType: hard -"vue-component-meta@npm:^1.8.27": - version: 1.8.27 - resolution: "vue-component-meta@npm:1.8.27" +"vue-component-meta@npm:^2.0.7": + version: 2.0.7 + resolution: "vue-component-meta@npm:2.0.7" dependencies: - "@volar/typescript": "npm:~1.11.1" - "@vue/language-core": "npm:1.8.27" + "@volar/typescript": "npm:~2.1.3" + "@vue/language-core": "npm:2.0.7" path-browserify: "npm:^1.0.1" - vue-component-type-helpers: "npm:1.8.27" + vue-component-type-helpers: "npm:2.0.7" peerDependencies: typescript: "*" peerDependenciesMeta: typescript: optional: true - checksum: 40884b316940e6995a6e7f9e5cbe5536b5c6e380acfd5b1d24914511972a241550c04474f4fffdf6305b1c9962b1137b5fd6183dc309127d3a268fe7d8d85df9 - languageName: node - linkType: hard - -"vue-component-type-helpers@npm:1.8.27": - version: 1.8.27 - resolution: "vue-component-type-helpers@npm:1.8.27" - checksum: 3403d70951e422162321e810f54f23f11ee5d2642631d2ca2cb1de18e5d35a0b7b05dd1f9bd02a0ae77dfa0b80751d826865d98f928ae6d6fbce9303406c9820 + checksum: 1c7fce41afc2cafe85b7477763da069e06091b4a30bb7fb09e8479f9a4c2bb5b8aa7a5c805a8af68b4bed54fbb435485f91a1a2dfa1332377dfa98acef03ca4d languageName: node linkType: hard @@ -29413,6 +29441,13 @@ __metadata: languageName: node linkType: hard +"vue-component-type-helpers@npm:2.0.7": + version: 2.0.7 + resolution: "vue-component-type-helpers@npm:2.0.7" + checksum: c350a06e2dec5a3856ac9ef7cc4fd00c1a59a13b812f885dcab8636cf6dd3951d0f66fd8adbee8b49445294f65b48848f115699a8dc654e0b5b09611739df420 + languageName: node + linkType: hard + "vue-component-type-helpers@npm:latest": version: 1.8.15 resolution: "vue-component-type-helpers@npm:1.8.15" From 20210540e82695355acddea6022e3f63949ca3b7 Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Fri, 22 Mar 2024 14:22:00 +0100 Subject: [PATCH 03/11] Merge pull request #26616 from storybookjs/yann/improve-yarn2-error-messages CLI: Improve Yarn berry error parsing (cherry picked from commit ee7c4d92ae06897051dde314117e5a6af86a859b) --- .../src/js-package-manager/Yarn2Proxy.test.ts | 54 ++++++++--- .../src/js-package-manager/Yarn2Proxy.ts | 89 +++++++++++-------- 2 files changed, 93 insertions(+), 50 deletions(-) diff --git a/code/lib/core-common/src/js-package-manager/Yarn2Proxy.test.ts b/code/lib/core-common/src/js-package-manager/Yarn2Proxy.test.ts index 8cd9822a8c35..f024d19c1133 100644 --- a/code/lib/core-common/src/js-package-manager/Yarn2Proxy.test.ts +++ b/code/lib/core-common/src/js-package-manager/Yarn2Proxy.test.ts @@ -276,35 +276,65 @@ describe('Yarn 2 Proxy', () => { }); describe('parseErrors', () => { - it('should parse yarn2 errors', () => { + it('should single yarn2 error message', () => { const YARN2_ERROR_SAMPLE = ` ➤ YN0000: ┌ Resolution step ➤ YN0001: │ Error: react@npm:28.2.0: No candidates found - at ge (/Users/yannbraga/.cache/node/corepack/yarn/3.5.1/yarn.js:439:8124) + at ge (/Users/xyz/.cache/node/corepack/yarn/3.5.1/yarn.js:439:8124) at process.processTicksAndRejections (node:internal/process/task_queues:95:5) at async Promise.allSettled (index 8) - at async io (/Users/yannbraga/.cache/node/corepack/yarn/3.5.1/yarn.js:390:10398) + at async io (/Users/xyz/.cache/node/corepack/yarn/3.5.1/yarn.js:390:10398) ➤ YN0000: └ Completed in 2s 369ms ➤ YN0000: Failed with errors in 2s 372ms ➤ YN0032: fsevents@npm:2.3.2: Implicit dependencies on node-gyp are discouraged ➤ YN0061: @npmcli/move-file@npm:2.0.1 is deprecated: This functionality has been moved to @npmcli/fs `; - expect(yarn2Proxy.parseErrorFromLogs(YARN2_ERROR_SAMPLE)).toEqual( - 'YARN2 error YN0001 - EXCEPTION: react@npm:28.2.0: No candidates found' + expect(yarn2Proxy.parseErrorFromLogs(YARN2_ERROR_SAMPLE)).toMatchInlineSnapshot( + ` + "YARN2 error + YN0001: EXCEPTION + -> Error: react@npm:28.2.0: No candidates found + " + ` ); }); - it('should show unknown yarn2 error', () => { - const YARN2_ERROR_SAMPLE = dedent` + it('shows multiple yarn2 error messages', () => { + const YARN2_ERROR_SAMPLE = ` + ➤ YN0000: · Yarn 4.1.1 ➤ YN0000: ┌ Resolution step - ➤ YN0000: └ Completed in 2s 369ms - ➤ YN0000: Failed with errors in 2s 372ms - ➤ YN0032: fsevents@npm:2.3.2: Implicit dependencies on node-gyp are discouraged - ➤ YN0061: @npmcli/move-file@npm:2.0.1 is deprecated: This functionality has been moved to @npmcli/fs + ➤ YN0085: │ + @chromatic-com/storybook@npm:1.2.25, and 300 more. + ➤ YN0000: └ Completed in 0s 763ms + ➤ YN0000: ┌ Post-resolution validation + ➤ YN0002: │ before-storybook@workspace:. doesn't provide @testing-library/dom (p1ac37), requested by @testing-library/user-event. + ➤ YN0002: │ before-storybook@workspace:. doesn't provide eslint (p1f657), requested by eslint-plugin-storybook. + ➤ YN0086: │ Some peer dependencies are incorrectly met; run yarn explain peer-requirements for details, where is the six-letter p-prefixed code. + ➤ YN0000: └ Completed + ➤ YN0000: ┌ Fetch step + ➤ YN0000: └ Completed + ➤ YN0000: ┌ Link step + ➤ YN0014: │ Failed to import certain dependencies + ➤ YN0071: │ Cannot link @storybook/test into before-storybook@workspace:. dependency @testing-library/jest-dom@npm:6.4.2 [ae73b] conflicts with parent dependency @testing-library/jest-dom@npm:5.17.0 + ➤ YN0071: │ Cannot link @storybook/test into before-storybook@workspace:. dependency @testing-library/user-event@npm:14.5.2 [ae73b] conflicts with parent dependency @testing-library/user-event@npm:13.5.0 [1b0ac] + ➤ YN0000: └ Completed in 0s 262ms + ➤ YN0000: · Failed with errors in 1s 301ms `; - expect(yarn2Proxy.parseErrorFromLogs(YARN2_ERROR_SAMPLE)).toEqual(`YARN2 error`); + expect(yarn2Proxy.parseErrorFromLogs(YARN2_ERROR_SAMPLE)).toMatchInlineSnapshot( + ` + "YARN2 error + YN0014: YARN_IMPORT_FAILED + -> Failed to import certain dependencies + + YN0071: NM_CANT_INSTALL_EXTERNAL_SOFT_LINK + -> Cannot link @storybook/test into before-storybook@workspace:. dependency @testing-library/jest-dom@npm:6.4.2 [ae73b] conflicts with parent dependency @testing-library/jest-dom@npm:5.17.0 + + YN0071: NM_CANT_INSTALL_EXTERNAL_SOFT_LINK + -> Cannot link @storybook/test into before-storybook@workspace:. dependency @testing-library/user-event@npm:14.5.2 [ae73b] conflicts with parent dependency @testing-library/user-event@npm:13.5.0 [1b0ac] + " + ` + ); }); }); }); diff --git a/code/lib/core-common/src/js-package-manager/Yarn2Proxy.ts b/code/lib/core-common/src/js-package-manager/Yarn2Proxy.ts index 09f535e2dfa5..7014357cc44b 100644 --- a/code/lib/core-common/src/js-package-manager/Yarn2Proxy.ts +++ b/code/lib/core-common/src/js-package-manager/Yarn2Proxy.ts @@ -10,10 +10,35 @@ import type { PackageJson } from './PackageJson'; import type { InstallationMetadata, PackageMetadata } from './types'; import { parsePackageData } from './util'; -const YARN2_ERROR_REGEX = /(YN\d{4}):.*?Error:\s+(.*)/i; +const CRITICAL_YARN2_ERROR_CODES = { + YN0001: 'EXCEPTION', + YN0009: 'BUILD_FAILED', + YN0010: 'RESOLVER_NOT_FOUND', + YN0011: 'FETCHER_NOT_FOUND', + YN0012: 'LINKER_NOT_FOUND', + YN0014: 'YARN_IMPORT_FAILED', + YN0015: 'REMOTE_INVALID', + YN0016: 'REMOTE_NOT_FOUND', + YN0020: 'MISSING_LOCKFILE_ENTRY', + YN0021: 'WORKSPACE_NOT_FOUND', + YN0028: 'FROZEN_LOCKFILE_EXCEPTION', + YN0030: 'FETCH_FAILED', + YN0046: 'AUTOMERGE_FAILED_TO_PARSE', + YN0062: 'INCOMPATIBLE_OS', + YN0063: 'INCOMPATIBLE_CPU', + YN0071: 'NM_CANT_INSTALL_EXTERNAL_SOFT_LINK', + YN0072: 'NM_PRESERVE_SYMLINKS_REQUIRED', + YN0075: 'PROLOG_INSTANTIATION_ERROR', + YN0076: 'INCOMPATIBLE_ARCHITECTURE', + YN0078: 'RESOLUTION_MISMATCH', + YN0081: 'NETWORK_UNSAFE_HTTP', + YN0082: 'RESOLUTION_FAILED', + YN0083: 'AUTOMERGE_GIT_ERROR', +}; + const YARN2_ERROR_CODES = { + ...CRITICAL_YARN2_ERROR_CODES, YN0000: 'UNNAMED', - YN0001: 'EXCEPTION', YN0002: 'MISSING_PEER_DEPENDENCY', YN0003: 'CYCLIC_DEPENDENCIES', YN0004: 'DISABLED_BUILD_SCRIPTS', @@ -21,31 +46,19 @@ const YARN2_ERROR_CODES = { YN0006: 'SOFT_LINK_BUILD', YN0007: 'MUST_BUILD', YN0008: 'MUST_REBUILD', - YN0009: 'BUILD_FAILED', - YN0010: 'RESOLVER_NOT_FOUND', - YN0011: 'FETCHER_NOT_FOUND', - YN0012: 'LINKER_NOT_FOUND', YN0013: 'FETCH_NOT_CACHED', - YN0014: 'YARN_IMPORT_FAILED', - YN0015: 'REMOTE_INVALID', - YN0016: 'REMOTE_NOT_FOUND', YN0017: 'RESOLUTION_PACK', YN0018: 'CACHE_CHECKSUM_MISMATCH', YN0019: 'UNUSED_CACHE_ENTRY', - YN0020: 'MISSING_LOCKFILE_ENTRY', - YN0021: 'WORKSPACE_NOT_FOUND', YN0022: 'TOO_MANY_MATCHING_WORKSPACES', YN0023: 'CONSTRAINTS_MISSING_DEPENDENCY', YN0024: 'CONSTRAINTS_INCOMPATIBLE_DEPENDENCY', YN0025: 'CONSTRAINTS_EXTRANEOUS_DEPENDENCY', YN0026: 'CONSTRAINTS_INVALID_DEPENDENCY', YN0027: 'CANT_SUGGEST_RESOLUTIONS', - YN0028: 'FROZEN_LOCKFILE_EXCEPTION', YN0029: 'CROSS_DRIVE_VIRTUAL_LOCAL', - YN0030: 'FETCH_FAILED', YN0031: 'DANGEROUS_NODE_MODULES', YN0032: 'NODE_GYP_INJECTED', - YN0046: 'AUTOMERGE_FAILED_TO_PARSE', YN0047: 'AUTOMERGE_IMMUTABLE', YN0048: 'AUTOMERGE_SUCCESS', YN0049: 'AUTOMERGE_REQUIRED', @@ -53,16 +66,17 @@ const YARN2_ERROR_CODES = { YN0059: 'INVALID_RANGE_PEER_DEPENDENCY', YN0060: 'INCOMPATIBLE_PEER_DEPENDENCY', YN0061: 'DEPRECATED_PACKAGE', - YN0062: 'INCOMPATIBLE_OS', - YN0063: 'INCOMPATIBLE_CPU', YN0068: 'UNUSED_PACKAGE_EXTENSION', YN0069: 'REDUNDANT_PACKAGE_EXTENSION', - YN0071: 'NM_CANT_INSTALL_EXTERNAL_SOFT_LINK', - YN0072: 'NM_PRESERVE_SYMLINKS_REQUIRED', YN0074: 'NM_HARDLINKS_MODE_DOWNGRADED', - YN0075: 'PROLOG_INSTANTIATION_ERROR', - YN0076: 'INCOMPATIBLE_ARCHITECTURE', YN0077: 'GHOST_ARCHITECTURE', + YN0080: 'NETWORK_DISABLED', + YN0085: 'UPDATED_RESOLUTION_RECORD', + YN0086: 'EXPLAIN_PEER_DEPENDENCIES_CTA', + YN0087: 'MIGRATION_SUCCESS', + YN0088: 'VERSION_NOTICE', + YN0089: 'TIPS_NOTICE', + YN0090: 'OFFLINE_MODE_ENABLED', }; // This encompasses both yarn 2 and yarn 3 @@ -284,26 +298,25 @@ export class Yarn2Proxy extends JsPackageManager { } public parseErrorFromLogs(logs: string): string { - let finalMessage = 'YARN2 error'; - const match = logs.match(YARN2_ERROR_REGEX); - - if (match) { - const errorCode = match[1] as keyof typeof YARN2_ERROR_CODES; - if (errorCode) { - finalMessage = `${finalMessage} ${errorCode}`; - } - - const errorType = YARN2_ERROR_CODES[errorCode]; - if (errorType) { - finalMessage = `${finalMessage} - ${errorType}`; - } - - const errorMessage = match[2]; - if (errorMessage) { - finalMessage = `${finalMessage}: ${errorMessage}`; + const finalMessage = 'YARN2 error'; + const errorCodesWithMessages: { code: string; message: string }[] = []; + const regex = /(YN\d{4}): (.+)/g; + let match: RegExpExecArray | null; + + while ((match = regex.exec(logs)) !== null) { + const code = match[1]; + const message = match[2].replace(/[┌│└]/g, '').trim(); + if (CRITICAL_YARN2_ERROR_CODES[code]) { + errorCodesWithMessages.push({ + code, + message: `${CRITICAL_YARN2_ERROR_CODES[code]}\n-> ${message}\n`, + }); } } - return finalMessage.trim(); + return [ + finalMessage, + errorCodesWithMessages.map(({ code, message }) => `${code}: ${message}`).join('\n'), + ].join('\n'); } } From 50ea4b392beef3f30e15cc996f537aac4f564714 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Fri, 22 Mar 2024 15:24:49 +0100 Subject: [PATCH 04/11] Merge pull request #26441 from drik98/bugfix/missing-support-for-mts-vite-config Automigrations: Fix missing support for mts vite config (cherry picked from commit 5e2c5e01f107d50cd011c4a016625abadc63e594) --- code/lib/cli/src/automigrate/fixes/vite-config-file.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/lib/cli/src/automigrate/fixes/vite-config-file.ts b/code/lib/cli/src/automigrate/fixes/vite-config-file.ts index 9203b45f225f..aee8a1ed985e 100644 --- a/code/lib/cli/src/automigrate/fixes/vite-config-file.ts +++ b/code/lib/cli/src/automigrate/fixes/vite-config-file.ts @@ -20,7 +20,7 @@ export const viteConfigFile = { async check({ mainConfig, packageManager, mainConfigPath }) { let isViteConfigFileFound = !!(await findUp( - ['vite.config.js', 'vite.config.mjs', 'vite.config.cjs', 'vite.config.ts'], + ['vite.config.js', 'vite.config.mjs', 'vite.config.cjs', 'vite.config.ts', 'vite.config.mts'], { cwd: mainConfigPath ? path.join(mainConfigPath, '..') : process.cwd() } )); From 75adf53c441f14ecd53658383df681ec66b52d27 Mon Sep 17 00:00:00 2001 From: Jeppe Reinhold Date: Sun, 24 Mar 2024 23:19:27 +0100 Subject: [PATCH 05/11] Merge pull request #26557 from storybookjs/jeppe/fix-react-dom-server-resolution Addon-docs: Fix `react-dom/server` imports breaking stories and docs (cherry picked from commit d6eaf19838015f2b8680fe2439ea457f9b256fec) --- code/addons/docs/src/preset.ts | 4 +- .../template/stories/docs2/ResolvedReact.jsx | 28 ++++++++ .../template/stories/docs2/ResolvedReact.mdx | 30 ++++++-- .../stories/docs2/ResolvedReactVersion.jsx | 15 ---- .../stories/docs2/resolved-react.stories.ts | 70 +++++++++++++++++++ code/e2e-tests/addon-docs.spec.ts | 57 ++++++++++++--- code/e2e-tests/util.ts | 9 ++- code/lib/cli/src/sandbox-templates.ts | 6 ++ code/lib/react-dom-shim/src/preset.ts | 8 ++- code/renderers/preact/src/preset.ts | 16 +++++ .../template/stories/{React.js => React.jsx} | 0 ...at.stories.js => react-compat.stories.jsx} | 2 +- 12 files changed, 207 insertions(+), 38 deletions(-) create mode 100644 code/addons/docs/template/stories/docs2/ResolvedReact.jsx delete mode 100644 code/addons/docs/template/stories/docs2/ResolvedReactVersion.jsx create mode 100644 code/addons/docs/template/stories/docs2/resolved-react.stories.ts rename code/renderers/preact/template/stories/{React.js => React.jsx} (100%) rename code/renderers/preact/template/stories/{react-compat.stories.js => react-compat.stories.jsx} (96%) diff --git a/code/addons/docs/src/preset.ts b/code/addons/docs/src/preset.ts index 68c7efb39f8b..31248e7af990 100644 --- a/code/addons/docs/src/preset.ts +++ b/code/addons/docs/src/preset.ts @@ -1,4 +1,4 @@ -import { dirname, join } from 'path'; +import { dirname, join, isAbsolute } from 'path'; import rehypeSlug from 'rehype-slug'; import rehypeExternalLinks from 'rehype-external-links'; @@ -147,6 +147,8 @@ export const viteFinal = async (config: any, options: Options) => { resolve: { alias: { react, + // Vite doesn't respect export maps when resolving an absolute path, so we need to do that manually here + ...(isAbsolute(reactDom) && { 'react-dom/server': `${reactDom}/server.browser.js` }), 'react-dom': reactDom, '@mdx-js/react': mdx, /** diff --git a/code/addons/docs/template/stories/docs2/ResolvedReact.jsx b/code/addons/docs/template/stories/docs2/ResolvedReact.jsx new file mode 100644 index 000000000000..f16c20f04fce --- /dev/null +++ b/code/addons/docs/template/stories/docs2/ResolvedReact.jsx @@ -0,0 +1,28 @@ +import React, * as ReactExport from 'react'; +import * as ReactDom from 'react-dom'; +import * as ReactDomServer from 'react-dom/server'; + +export const ResolvedReact = () => { + return ( + <> +

+ react:{' '} + + {ReactExport.version ?? 'no version export found'} + +

+

+ react-dom:{' '} + + {ReactDom.version ?? 'no version export found'} + +

+

+ react-dom/server:{' '} + + {ReactDomServer.version ?? 'no version export found'} + +

+ + ); +}; diff --git a/code/addons/docs/template/stories/docs2/ResolvedReact.mdx b/code/addons/docs/template/stories/docs2/ResolvedReact.mdx index 7a5f04ab6bc8..bd3ad01c2e08 100644 --- a/code/addons/docs/template/stories/docs2/ResolvedReact.mdx +++ b/code/addons/docs/template/stories/docs2/ResolvedReact.mdx @@ -1,13 +1,29 @@ -import { version as reactVersion } from 'react'; -import { version as reactDomVersion } from 'react-dom'; -import { ResolvedReactVersion } from './ResolvedReactVersion'; +import { Meta } from '@storybook/blocks'; +import * as ReactExport from 'react'; +import * as ReactDom from 'react-dom'; +import * as ReactDomServer from 'react-dom/server'; +import { ResolvedReact } from './ResolvedReact'; + + + +This doc is used to display the resolved version of React and its related packages. +As long as `@storybook/addon-docs` is installed, `react` and `react-dom` should be available to import from and should resolve to the same version. + +The MDX here ensures that it works in an MDX file. + +- See the [autodocs](/docs/addons-docs-docs2-resolvedreact--docs) for how it resolves in autodocs. +- See the [Story](/story/addons-docs-docs2-resolvedreact--story) for how it resolves in the actual story. + +**Note: There appears to be a bug in the _production_ build of `react-dom`, where it reports version `18.2.0-next-9e3b772b8-20220608` while in fact version `18.2.0` is installed.** ## In MDX -react: {reactVersion} +react: {ReactExport.version ?? 'no version export found'} + +react-dom: {ReactDom.version ?? 'no version export found'} -react-dom: {reactDomVersion} +react-dom/server: {ReactDomServer.version ?? 'no version export found'} -## In `ResolvedReactVersion` component +## In `ResolvedReact` component - + diff --git a/code/addons/docs/template/stories/docs2/ResolvedReactVersion.jsx b/code/addons/docs/template/stories/docs2/ResolvedReactVersion.jsx deleted file mode 100644 index 6e094c1e64d0..000000000000 --- a/code/addons/docs/template/stories/docs2/ResolvedReactVersion.jsx +++ /dev/null @@ -1,15 +0,0 @@ -import React, { version as reactVersion } from 'react'; -import { version as reactDomVersion } from 'react-dom'; - -export const ResolvedReactVersion = () => { - return ( - <> -

- react: {reactVersion} -

-

- react-dom: {reactDomVersion} -

- - ); -}; diff --git a/code/addons/docs/template/stories/docs2/resolved-react.stories.ts b/code/addons/docs/template/stories/docs2/resolved-react.stories.ts new file mode 100644 index 000000000000..91f12041962b --- /dev/null +++ b/code/addons/docs/template/stories/docs2/resolved-react.stories.ts @@ -0,0 +1,70 @@ +import { within, expect } from '@storybook/test'; +import * as ReactExport from 'react'; +import * as ReactDom from 'react-dom'; +import * as ReactDomServer from 'react-dom/server'; + +/** + * This component is used to display the resolved version of React and its related packages. + * As long as `@storybook/addon-docs` is installed, `react` and `react-dom` should be available to import from and should resolve to the same version. + * + * The autodocs here ensures that it also works in the generated documentation. + * + * - See the [MDX docs](/docs/addons-docs-docs2-resolvedreact--mdx) for how it resolves in MDX. + * - See the [Story](/story/addons-docs-docs2-resolvedreact--story) for how it resolves in the actual story. + * + * **Note: There appears to be a bug in the _production_ build of `react-dom`, where it reports version `18.2.0-next-9e3b772b8-20220608` while in fact version `18.2.0` is installed.** + */ +export default { + title: 'Docs2/ResolvedReact', + component: globalThis.Components.Html, + tags: ['autodocs'], + argTypes: { + content: { table: { disable: true } }, + }, + args: { + content: ` +

+ react: ${ + ReactExport.version ?? 'no version export found' + } +

+

+ react-dom: ${ + ReactDom.version ?? 'no version export found' + } +

+

+ react-dom/server: ${ + ReactDomServer.version ?? 'no version export found' + } +

+ `, + }, + parameters: { + docs: { + name: 'ResolvedReact', + }, + }, +}; + +export const Story = { + // This test is more or less the same as the E2E test we have for MDX and autodocs entries in addon-docs.spec.ts + play: async ({ canvasElement, step, parameters }: any) => { + const canvas = await within(canvasElement); + + const actualReactVersion = (await canvas.findByTestId('react')).textContent; + const actualReactDomVersion = (await canvas.findByTestId('react-dom')).textContent; + const actualReactDomServerVersion = (await canvas.findByTestId('react-dom-server')).textContent; + + step('Expect React packages to all resolve to the same version', () => { + // react-dom has a bug in its production build, reporting version 18.2.0-next-9e3b772b8-20220608 even though version 18.2.0 is installed. + expect(actualReactDomVersion!.startsWith(actualReactVersion!)).toBeTruthy(); + + if (parameters.renderer === 'preact') { + // the preact/compat alias doesn't have a version export in react-dom/server + return; + } + expect(actualReactDomServerVersion).toBe(actualReactVersion); + }); + }, +}; diff --git a/code/e2e-tests/addon-docs.spec.ts b/code/e2e-tests/addon-docs.spec.ts index 72470acb62ab..db7b7b7d5e05 100644 --- a/code/e2e-tests/addon-docs.spec.ts +++ b/code/e2e-tests/addon-docs.spec.ts @@ -185,30 +185,71 @@ test.describe('addon-docs', () => { }); test('should resolve react to the correct version', async ({ page }) => { + // Arrange - Navigate to MDX docs const sbPage = new SbPage(page); - await sbPage.navigateToUnattachedDocs('addons/docs/docs2', 'ResolvedReact'); + await sbPage.navigateToStory('addons/docs/docs2/resolvedreact', 'mdx', 'docs'); const root = sbPage.previewRoot(); - let expectedReactVersion = /^18/; + // Arrange - Setup expectations + let expectedReactVersionRange = /^18/; if ( templateName.includes('preact') || templateName.includes('react-webpack/17') || templateName.includes('react-vite/17') ) { - expectedReactVersion = /^17/; + expectedReactVersionRange = /^17/; } else if (templateName.includes('react16')) { - expectedReactVersion = /^16/; + expectedReactVersionRange = /^16/; } + // Arrange - Get the actual versions const mdxReactVersion = await root.getByTestId('mdx-react'); const mdxReactDomVersion = await root.getByTestId('mdx-react-dom'); + const mdxReactDomServerVersion = await root.getByTestId('mdx-react-dom-server'); const componentReactVersion = await root.getByTestId('component-react'); const componentReactDomVersion = await root.getByTestId('component-react-dom'); + const componentReactDomServerVersion = await root.getByTestId('component-react-dom-server'); + + // Assert - The versions are in the expected range + await expect(mdxReactVersion).toHaveText(expectedReactVersionRange); + await expect(componentReactVersion).toHaveText(expectedReactVersionRange); + await expect(mdxReactDomVersion).toHaveText(expectedReactVersionRange); + await expect(componentReactDomVersion).toHaveText(expectedReactVersionRange); + if (!templateName.includes('preact')) { + // preact/compat alias doesn't have a version export in react-dom/server + await expect(mdxReactDomServerVersion).toHaveText(expectedReactVersionRange); + await expect(componentReactDomServerVersion).toHaveText(expectedReactVersionRange); + } + + // Arrange - Navigate to autodocs + await sbPage.navigateToStory('addons/docs/docs2/resolvedreact', 'docs'); + + // Arrange - Get the actual versions + const autodocsReactVersion = await root.getByTestId('react'); + const autodocsReactDomVersion = await root.getByTestId('react-dom'); + const autodocsReactDomServerVersion = await root.getByTestId('react-dom-server'); + + // Assert - The versions are in the expected range + await expect(autodocsReactVersion).toHaveText(expectedReactVersionRange); + await expect(autodocsReactDomVersion).toHaveText(expectedReactVersionRange); + if (!templateName.includes('preact')) { + await expect(autodocsReactDomServerVersion).toHaveText(expectedReactVersionRange); + } + + // Arrange - Navigate to story + await sbPage.navigateToStory('addons/docs/docs2/resolvedreact', 'story'); - await expect(mdxReactVersion).toHaveText(expectedReactVersion); - await expect(mdxReactDomVersion).toHaveText(expectedReactVersion); - await expect(componentReactVersion).toHaveText(expectedReactVersion); - await expect(componentReactDomVersion).toHaveText(expectedReactVersion); + // Arrange - Get the actual versions + const storyReactVersion = await root.getByTestId('react'); + const storyReactDomVersion = await root.getByTestId('react-dom'); + const storyReactDomServerVersion = await root.getByTestId('react-dom-server'); + + // Assert - The versions are in the expected range + await expect(storyReactVersion).toHaveText(expectedReactVersionRange); + await expect(storyReactDomVersion).toHaveText(expectedReactVersionRange); + if (!templateName.includes('preact')) { + await expect(storyReactDomServerVersion).toHaveText(expectedReactVersionRange); + } }); test('should have stories from multiple CSF files in autodocs', async ({ page }) => { diff --git a/code/e2e-tests/util.ts b/code/e2e-tests/util.ts index df5ca4ff59a8..f97894075f5b 100644 --- a/code/e2e-tests/util.ts +++ b/code/e2e-tests/util.ts @@ -40,7 +40,7 @@ export class SbPage { /** * Visit a story by selecting it from the sidebar. */ - async navigateToStory(title: string, name: string) { + async navigateToStory(title: string, name: string, viewMode?: 'docs' | 'story') { await this.openComponent(title); const titleId = toId(title); @@ -50,11 +50,10 @@ export class SbPage { const storyLink = this.page.locator('*', { has: this.page.locator(`> ${storyLinkId}`) }); await storyLink.click({ force: true }); - // assert url changes - const viewMode = name === 'docs' ? 'docs' : 'story'; - await this.page.waitForURL((url) => - url.search.includes(`path=/${viewMode}/${titleId}--${storyId}`) + url.search.includes( + `path=/${viewMode ?? name === 'docs' ? 'docs' : 'story'}/${titleId}--${storyId}` + ) ); const selected = await storyLink.getAttribute('data-selected'); diff --git a/code/lib/cli/src/sandbox-templates.ts b/code/lib/cli/src/sandbox-templates.ts index b28021be7049..9d8a839bfcce 100644 --- a/code/lib/cli/src/sandbox-templates.ts +++ b/code/lib/cli/src/sandbox-templates.ts @@ -429,6 +429,9 @@ const baseTemplates = { renderer: '@storybook/preact', builder: '@storybook/builder-vite', }, + modifications: { + extraDependencies: ['preact-render-to-string'], + }, skipTasks: ['e2e-tests-dev', 'bench'], }, 'preact-vite/default-ts': { @@ -439,6 +442,9 @@ const baseTemplates = { renderer: '@storybook/preact', builder: '@storybook/builder-vite', }, + modifications: { + extraDependencies: ['preact-render-to-string'], + }, skipTasks: ['e2e-tests-dev', 'bench'], }, 'qwik-vite/default-ts': { diff --git a/code/lib/react-dom-shim/src/preset.ts b/code/lib/react-dom-shim/src/preset.ts index 63b2889ba93b..e863a53262b6 100644 --- a/code/lib/react-dom-shim/src/preset.ts +++ b/code/lib/react-dom-shim/src/preset.ts @@ -1,5 +1,5 @@ import type { Options } from '@storybook/types'; -import { join, dirname } from 'path'; +import { join, dirname, isAbsolute } from 'path'; import { readFile } from 'fs/promises'; /** @@ -17,6 +17,12 @@ const getIsReactVersion18 = async (options: Options) => { const resolvedReact = await options.presets.apply<{ reactDom?: string }>('resolvedReact', {}); const reactDom = resolvedReact.reactDom || dirname(require.resolve('react-dom/package.json')); + if (!isAbsolute(reactDom)) { + // if react-dom is not resolved to a file we can't be sure if the version in package.json is correct or even if package.json exists + // this happens when react-dom is resolved to 'preact/compat' for example + return false; + } + const { version } = JSON.parse(await readFile(join(reactDom, 'package.json'), 'utf-8')); return version.startsWith('18') || version.startsWith('0.0.0'); }; diff --git a/code/renderers/preact/src/preset.ts b/code/renderers/preact/src/preset.ts index 03b11e7e6097..28e5a428af0a 100644 --- a/code/renderers/preact/src/preset.ts +++ b/code/renderers/preact/src/preset.ts @@ -13,3 +13,19 @@ export const previewAnnotations: PresetProperty<'previewAnnotations'> = async ( .concat([join(__dirname, 'entry-preview.mjs')]) .concat(docsEnabled ? [join(__dirname, 'entry-preview-docs.mjs')] : []); }; + +/** + * Alias react and react-dom to preact/compat similar to the preact vite preset + * https://github.com/preactjs/preset-vite/blob/main/src/index.ts#L238-L239 + */ +export const resolvedReact = async (existing: any) => { + try { + return { + ...existing, + react: 'preact/compat', + reactDom: 'preact/compat', + }; + } catch (e) { + return existing; + } +}; diff --git a/code/renderers/preact/template/stories/React.js b/code/renderers/preact/template/stories/React.jsx similarity index 100% rename from code/renderers/preact/template/stories/React.js rename to code/renderers/preact/template/stories/React.jsx diff --git a/code/renderers/preact/template/stories/react-compat.stories.js b/code/renderers/preact/template/stories/react-compat.stories.jsx similarity index 96% rename from code/renderers/preact/template/stories/react-compat.stories.js rename to code/renderers/preact/template/stories/react-compat.stories.jsx index 33f1078d3154..b43a0650e748 100644 --- a/code/renderers/preact/template/stories/react-compat.stories.js +++ b/code/renderers/preact/template/stories/react-compat.stories.jsx @@ -1,4 +1,4 @@ -import { ReactFunctionalComponent, ReactClassComponent } from './React'; +import { ReactFunctionalComponent, ReactClassComponent } from './React.jsx'; export default { component: ReactFunctionalComponent, From 6c4a2476b93e70427717b07cc4af8408e32e0e01 Mon Sep 17 00:00:00 2001 From: jonniebigodes Date: Mon, 25 Mar 2024 14:30:15 +0000 Subject: [PATCH 06/11] Merge pull request #26530 from storybookjs/fix/active-viewport-size-not-centered Viewport: Fix missing style (cherry picked from commit b071c449ffc4a4c051192460ba879a43d51abcac) --- code/addons/viewport/src/Tool.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/code/addons/viewport/src/Tool.tsx b/code/addons/viewport/src/Tool.tsx index 37bc22500e9b..da600e576675 100644 --- a/code/addons/viewport/src/Tool.tsx +++ b/code/addons/viewport/src/Tool.tsx @@ -74,6 +74,7 @@ const flip = ({ width, height, ...styles }: ViewportStyles) => ({ const ActiveViewportSize = styled.div(() => ({ display: 'inline-flex', + alignItems: 'center', })); const ActiveViewportLabel = styled.div(({ theme }) => ({ From 44e9bf8caf3cb0a0ee92e7b52b989555040ca704 Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Mon, 25 Mar 2024 16:04:59 +0100 Subject: [PATCH 07/11] Merge pull request #26639 from storybookjs/kasper/empty-union React-Docgen: Make sure to be able to handle empty unions (cherry picked from commit 889cfdfff1d53b26d79d1f1f442694138c7e4a49) --- code/lib/docs-tools/src/argTypes/convert/flow/convert.ts | 8 ++++---- .../docs-tools/src/argTypes/convert/typescript/convert.ts | 8 ++++---- .../docs-tools/src/argTypes/convert/typescript/types.ts | 2 +- 3 files changed, 9 insertions(+), 9 deletions(-) diff --git a/code/lib/docs-tools/src/argTypes/convert/flow/convert.ts b/code/lib/docs-tools/src/argTypes/convert/flow/convert.ts index 5886babe7301..b950be171bee 100644 --- a/code/lib/docs-tools/src/argTypes/convert/flow/convert.ts +++ b/code/lib/docs-tools/src/argTypes/convert/flow/convert.ts @@ -41,13 +41,13 @@ export const convert = (type: FlowType): SBType | void => { case 'signature': return { ...base, ...convertSig(type) }; case 'union': - if (type.elements.every(isLiteral)) { - return { ...base, name: 'enum', value: type.elements.map(toEnumOption) }; + if (type.elements?.every(isLiteral)) { + return { ...base, name: 'enum', value: type.elements?.map(toEnumOption) }; } - return { ...base, name, value: type.elements.map(convert) }; + return { ...base, name, value: type.elements?.map(convert) }; case 'intersection': - return { ...base, name, value: type.elements.map(convert) }; + return { ...base, name, value: type.elements?.map(convert) }; default: return { ...base, name: 'other', value: name }; } diff --git a/code/lib/docs-tools/src/argTypes/convert/typescript/convert.ts b/code/lib/docs-tools/src/argTypes/convert/typescript/convert.ts index 2bf1fe65e552..95436dfcb567 100644 --- a/code/lib/docs-tools/src/argTypes/convert/typescript/convert.ts +++ b/code/lib/docs-tools/src/argTypes/convert/typescript/convert.ts @@ -38,19 +38,19 @@ export const convert = (type: TSType): SBType | void => { return { ...base, ...convertSig(type) }; case 'union': let result; - if (type.elements.every((element) => element.name === 'literal')) { + if (type.elements?.every((element) => element.name === 'literal')) { result = { ...base, name: 'enum', // @ts-expect-error fix types - value: type.elements.map((v) => parseLiteral(v.value)), + value: type.elements?.map((v) => parseLiteral(v.value)), }; } else { - result = { ...base, name, value: type.elements.map(convert) }; + result = { ...base, name, value: type.elements?.map(convert) }; } return result; case 'intersection': - return { ...base, name, value: type.elements.map(convert) }; + return { ...base, name, value: type.elements?.map(convert) }; default: return { ...base, name: 'other', value: name }; } diff --git a/code/lib/docs-tools/src/argTypes/convert/typescript/types.ts b/code/lib/docs-tools/src/argTypes/convert/typescript/types.ts index aed18f3f4160..79df2e812c00 100644 --- a/code/lib/docs-tools/src/argTypes/convert/typescript/types.ts +++ b/code/lib/docs-tools/src/argTypes/convert/typescript/types.ts @@ -9,7 +9,7 @@ type TSArgType = TSType; type TSCombinationType = TSBaseType & { name: 'union' | 'intersection'; - elements: TSType[]; + elements?: TSType[]; }; type TSFuncSigType = TSBaseType & { From 39d4d2f8348ca07373f534a23e0e7d6447133b84 Mon Sep 17 00:00:00 2001 From: jonniebigodes Date: Mon, 25 Mar 2024 16:27:13 +0000 Subject: [PATCH 08/11] Merge pull request #26621 from nkabrown/docs-csf-v3 Docs: Align documentation with CSF v3 (cherry picked from commit 09be01b116562fa1663ee1a3f4236905491dcade) --- docs/builders/vite.md | 2 +- docs/get-started/whats-a-story.md | 2 +- docs/writing-stories/index.md | 5 +++-- 3 files changed, 5 insertions(+), 4 deletions(-) diff --git a/docs/builders/vite.md b/docs/builders/vite.md index a254e7b5f7a0..2acc59769c1a 100644 --- a/docs/builders/vite.md +++ b/docs/builders/vite.md @@ -109,7 +109,7 @@ If you need, you can also configure Storybook's Vite builder using TypeScript. R ### Working directory not being detected -By default, the Vite builder enables Vite's [`server.fs.strict`](https://vitejs.dev/config/#server-fs-strict) option for increased security, defining the project's `root` to Storybook's configuration directory +By default, the Vite builder enables Vite's [`server.fs.strict`](https://vitejs.dev/config/#server-fs-strict) option for increased security, defining the project's `root` to Storybook's configuration directory. If you need to override it, you can use the `viteFinal` function and adjust it. ### ArgTypes are not generated automatically diff --git a/docs/get-started/whats-a-story.md b/docs/get-started/whats-a-story.md index 9ef527d5d6c3..af516341df3e 100644 --- a/docs/get-started/whats-a-story.md +++ b/docs/get-started/whats-a-story.md @@ -8,7 +8,7 @@ The CLI created example components that demonstrate the types of components you Each example component has a set of stories that show the states it supports. You can browse the stories in the UI and see the code behind them in files that end with `.stories.js` or `.stories.ts`. The stories are written in Component Story Format (CSF)--an ES6 modules-based standard--for writing component examples. -Let’s start with the `Button` component. A story is a function that describes how to render the component in question. Here’s how to render `Button` in the “primary” state and export a story called `Primary`. +Let’s start with the `Button` component. A story is an object that describes how to render the component in question. Here’s how to render `Button` in the “primary” state and export a story called `Primary`. diff --git a/docs/writing-stories/index.md b/docs/writing-stories/index.md index 28aa1cfeee5a..abc6632d90f8 100644 --- a/docs/writing-stories/index.md +++ b/docs/writing-stories/index.md @@ -4,7 +4,8 @@ title: 'How to write stories' -A story captures the rendered state of a UI component. It’s a function that returns a component’s state given a set of arguments. +A story captures the rendered state of a UI component. It's an object with annotations that describe the component's behavior and appearance given a set +of arguments. Storybook uses the generic term arguments (args for short) when talking about React’s `props`, Vue’s `props`, Angular’s `@Input`, and other similar concepts. @@ -169,7 +170,7 @@ Your story will now be shown in the sidebar with the given text. ## How to write stories -A story is a function that describes how to render a component. You can have multiple stories per component, and the simplest way to create stories is to render a component with different arguments multiple times. +A story is an object that describes how to render a component. You can have multiple stories per component, and the simplest way to create stories is to render a component with different arguments multiple times. From 1ae49a861e925d103ccc93c7bc29a15871f683d1 Mon Sep 17 00:00:00 2001 From: jonniebigodes Date: Mon, 25 Mar 2024 16:43:39 +0000 Subject: [PATCH 09/11] Merge pull request #26541 from AriPerkkio/docs/migration-guide-scripts Docs: Fix migration guide scripts (cherry picked from commit 2b1058d415dea315c5d5000c70f98bfe61859367) --- docs/snippets/common/storybook-migrate-mdx-to-csf.npm.js.mdx | 2 +- docs/snippets/common/storybook-migrate-mdx-to-csf.pnpm.js.mdx | 2 +- docs/snippets/common/storybook-migrate-mdx-to-csf.yarn.js.mdx | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/snippets/common/storybook-migrate-mdx-to-csf.npm.js.mdx b/docs/snippets/common/storybook-migrate-mdx-to-csf.npm.js.mdx index fdb2e942e377..1058c451d943 100644 --- a/docs/snippets/common/storybook-migrate-mdx-to-csf.npm.js.mdx +++ b/docs/snippets/common/storybook-migrate-mdx-to-csf.npm.js.mdx @@ -1,4 +1,4 @@ ```shell # Convert stories in MDX to CSF -npx storybook@latest migrate mdx-to-csf --glob "src/**/*.stories.mdx” +npx storybook@latest migrate mdx-to-csf --glob "src/**/*.stories.mdx" ``` diff --git a/docs/snippets/common/storybook-migrate-mdx-to-csf.pnpm.js.mdx b/docs/snippets/common/storybook-migrate-mdx-to-csf.pnpm.js.mdx index 48f8f5fb5ec7..21b956b0fd2a 100644 --- a/docs/snippets/common/storybook-migrate-mdx-to-csf.pnpm.js.mdx +++ b/docs/snippets/common/storybook-migrate-mdx-to-csf.pnpm.js.mdx @@ -1,4 +1,4 @@ ```sh # Convert stories in MDX to CSF -pnpm dlx storybook@latest migrate mdx-to-csf --glob "src/**/*.stories.mdx” +pnpm dlx storybook@latest migrate mdx-to-csf --glob "src/**/*.stories.mdx" ``` diff --git a/docs/snippets/common/storybook-migrate-mdx-to-csf.yarn.js.mdx b/docs/snippets/common/storybook-migrate-mdx-to-csf.yarn.js.mdx index ce45b320d7de..93dca5ba3158 100644 --- a/docs/snippets/common/storybook-migrate-mdx-to-csf.yarn.js.mdx +++ b/docs/snippets/common/storybook-migrate-mdx-to-csf.yarn.js.mdx @@ -1,4 +1,4 @@ ```sh # Convert stories in MDX to CSF -yarn dlx storybook@latest migrate mdx-to-csf --glob "src/**/*.stories.mdx” +yarn dlx storybook@latest migrate mdx-to-csf --glob "src/**/*.stories.mdx" ``` From 9dd9210977b5fec603974fad5cc68376e9ee7cc4 Mon Sep 17 00:00:00 2001 From: storybook-bot <32066757+storybook-bot@users.noreply.github.com> Date: Tue, 26 Mar 2024 13:41:26 +0000 Subject: [PATCH 10/11] Write changelog for 8.0.5 [skip ci] --- CHANGELOG.md | 8 ++++++++ code/package.json | 3 ++- docs/versions/latest.json | 2 +- 3 files changed, 11 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index c78e29fa62ae..2de9a1f7882f 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,11 @@ +## 8.0.5 + +- Addon-docs: Fix `react-dom/server` imports breaking stories and docs - [#26557](https://github.com/storybookjs/storybook/pull/26557), thanks @JReinhold! +- Automigrations: Fix missing support for mts vite config - [#26441](https://github.com/storybookjs/storybook/pull/26441), thanks @drik98! +- CLI: Improve Yarn berry error parsing - [#26616](https://github.com/storybookjs/storybook/pull/26616), thanks @yannbf! +- React-Docgen: Make sure to be able to handle empty unions - [#26639](https://github.com/storybookjs/storybook/pull/26639), thanks @kasperpeulen! +- Viewport: Fix missing style - [#26530](https://github.com/storybookjs/storybook/pull/26530), thanks @jpzwarte! + ## 8.0.4 - Addon Docs: Support Stencil based display names in source snippets - [#26592](https://github.com/storybookjs/storybook/pull/26592), thanks @yannbf! diff --git a/code/package.json b/code/package.json index 3295a1306430..f9f386daa07f 100644 --- a/code/package.json +++ b/code/package.json @@ -295,5 +295,6 @@ "Dependency Upgrades" ] ] - } + }, + "deferredNextVersion": "8.0.5" } diff --git a/docs/versions/latest.json b/docs/versions/latest.json index 7b7e0fcf84ca..34455f2dd966 100644 --- a/docs/versions/latest.json +++ b/docs/versions/latest.json @@ -1 +1 @@ -{"version":"8.0.4","info":{"plain":"- Addon Docs: Support Stencil based display names in source snippets - [#26592](https://github.com/storybookjs/storybook/pull/26592), thanks @yannbf!\n- CLI: Instruct the correct auto-migration command - [#26515](https://github.com/storybookjs/storybook/pull/26515), thanks @ndelangen!\n- CLI: Throw an error when running upgrade command in incorrect cwd - [#26585](https://github.com/storybookjs/storybook/pull/26585), thanks @yannbf!"}} +{"version":"8.0.5","info":{"plain":"- Addon-docs: Fix `react-dom/server` imports breaking stories and docs - [#26557](https://github.com/storybookjs/storybook/pull/26557), thanks @JReinhold!\n- Automigrations: Fix missing support for mts vite config - [#26441](https://github.com/storybookjs/storybook/pull/26441), thanks @drik98!\n- CLI: Improve Yarn berry error parsing - [#26616](https://github.com/storybookjs/storybook/pull/26616), thanks @yannbf!\n- React-Docgen: Make sure to be able to handle empty unions - [#26639](https://github.com/storybookjs/storybook/pull/26639), thanks @kasperpeulen!\n- Viewport: Fix missing style - [#26530](https://github.com/storybookjs/storybook/pull/26530), thanks @jpzwarte!"}} From c6a9fb170777e401cad70b313442a06be8dfb7f7 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Wed, 27 Mar 2024 08:22:34 +0100 Subject: [PATCH 11/11] Fix linting errors --- .../core-common/src/js-package-manager/Yarn2Proxy.test.ts | 1 - code/lib/core-common/src/js-package-manager/Yarn2Proxy.ts | 7 +++++-- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/code/lib/core-common/src/js-package-manager/Yarn2Proxy.test.ts b/code/lib/core-common/src/js-package-manager/Yarn2Proxy.test.ts index f024d19c1133..985d0dbecf83 100644 --- a/code/lib/core-common/src/js-package-manager/Yarn2Proxy.test.ts +++ b/code/lib/core-common/src/js-package-manager/Yarn2Proxy.test.ts @@ -1,5 +1,4 @@ import { describe, beforeEach, it, expect, vi } from 'vitest'; -import dedent from 'ts-dedent'; import { Yarn2Proxy } from './Yarn2Proxy'; describe('Yarn 2 Proxy', () => { diff --git a/code/lib/core-common/src/js-package-manager/Yarn2Proxy.ts b/code/lib/core-common/src/js-package-manager/Yarn2Proxy.ts index 7014357cc44b..08062cf4081c 100644 --- a/code/lib/core-common/src/js-package-manager/Yarn2Proxy.ts +++ b/code/lib/core-common/src/js-package-manager/Yarn2Proxy.ts @@ -36,6 +36,7 @@ const CRITICAL_YARN2_ERROR_CODES = { YN0083: 'AUTOMERGE_GIT_ERROR', }; +// @ts-expect-error Might be useful to have this in the future const YARN2_ERROR_CODES = { ...CRITICAL_YARN2_ERROR_CODES, YN0000: 'UNNAMED', @@ -306,10 +307,12 @@ export class Yarn2Proxy extends JsPackageManager { while ((match = regex.exec(logs)) !== null) { const code = match[1]; const message = match[2].replace(/[┌│└]/g, '').trim(); - if (CRITICAL_YARN2_ERROR_CODES[code]) { + if (code in CRITICAL_YARN2_ERROR_CODES) { errorCodesWithMessages.push({ code, - message: `${CRITICAL_YARN2_ERROR_CODES[code]}\n-> ${message}\n`, + message: `${ + CRITICAL_YARN2_ERROR_CODES[code as keyof typeof CRITICAL_YARN2_ERROR_CODES] + }\n-> ${message}\n`, }); } }