From ae5a3962da8c26aa84c01a2c34fa048f702297eb Mon Sep 17 00:00:00 2001 From: Bill Collins Date: Wed, 19 Feb 2025 10:59:09 +0000 Subject: [PATCH 001/108] Export returntype of ReactMeta#story --- code/renderers/react/src/preview.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/renderers/react/src/preview.tsx b/code/renderers/react/src/preview.tsx index 5b00fccdd25..bcede11364a 100644 --- a/code/renderers/react/src/preview.tsx +++ b/code/renderers/react/src/preview.tsx @@ -77,4 +77,4 @@ interface ReactMeta< ): ReactStory; } -interface ReactStory extends Story {} +export interface ReactStory extends Story {} From 1cf046bf1b903d08bc091755b379f6837851f30d Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Tue, 25 Feb 2025 13:16:39 +0100 Subject: [PATCH 002/108] Next.js: Use latest version when init in empty directory --- code/lib/create-storybook/src/scaffold-new-project.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/code/lib/create-storybook/src/scaffold-new-project.ts b/code/lib/create-storybook/src/scaffold-new-project.ts index cfbf63c41fe..d86414b23aa 100644 --- a/code/lib/create-storybook/src/scaffold-new-project.ts +++ b/code/lib/create-storybook/src/scaffold-new-project.ts @@ -45,10 +45,10 @@ const SUPPORTED_PROJECTS: Record = { language: 'TS', }, createScript: { - npm: 'npm create next-app@^14 . -- --typescript --use-npm --eslint --tailwind --no-app --import-alias="@/*" --src-dir', + npm: 'npm create next-app . -- --turbopack --typescript --use-npm --eslint --tailwind --no-app --import-alias="@/*" --src-dir', // yarn doesn't support version ranges, so we have to use npx - yarn: 'npx create-next-app@^14 . --typescript --use-yarn --eslint --tailwind --no-app --import-alias="@/*" --src-dir', - pnpm: 'pnpm create next-app@^14 . --typescript --use-pnpm --eslint --tailwind --no-app --import-alias="@/*" --src-dir', + yarn: 'npx create-next-app . --turbopack --typescript --use-yarn --eslint --tailwind --no-app --import-alias="@/*" --src-dir', + pnpm: 'pnpm create next-app . --turbopack --typescript --use-pnpm --eslint --tailwind --no-app --import-alias="@/*" --src-dir', }, }, 'vue-vite-ts': { From 5288f1404a171aaf11f339e8f40ca8050b031d8f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E0=A4=95=E0=A4=BE=E0=A4=B0=E0=A4=A4=E0=A5=8B=E0=A4=AB?= =?UTF-8?q?=E0=A5=8D=E0=A4=AB=E0=A5=87=E0=A4=B2=E0=A4=B8=E0=A5=8D=E0=A4=95?= =?UTF-8?q?=E0=A5=8D=E0=A4=B0=E0=A4=BF=E0=A4=AA=E0=A5=8D=E0=A4=9F=E2=84=A2?= Date: Tue, 25 Feb 2025 13:28:54 +0100 Subject: [PATCH 003/108] Upgrade image-size to 2.0 --- code/frameworks/nextjs/package.json | 5 +-- .../nextjs/src/next-image-loader-stub.ts | 40 +------------------ code/yarn.lock | 13 +++++- 3 files changed, 14 insertions(+), 44 deletions(-) diff --git a/code/frameworks/nextjs/package.json b/code/frameworks/nextjs/package.json index 1565a161415..1e06b7a3aff 100644 --- a/code/frameworks/nextjs/package.json +++ b/code/frameworks/nextjs/package.json @@ -161,7 +161,7 @@ "babel-loader": "^9.1.3", "css-loader": "^6.7.3", "find-up": "^5.0.0", - "image-size": "^1.0.0", + "image-size": "^2.0.0", "loader-utils": "^3.2.1", "node-polyfill-webpack-plugin": "^2.0.1", "pnp-webpack-plugin": "^1.7.0", @@ -204,9 +204,6 @@ "optional": true } }, - "optionalDependencies": { - "sharp": "^0.33.3" - }, "engines": { "node": ">=18.0.0" }, diff --git a/code/frameworks/nextjs/src/next-image-loader-stub.ts b/code/frameworks/nextjs/src/next-image-loader-stub.ts index e85414c85d1..a562c276473 100644 --- a/code/frameworks/nextjs/src/next-image-loader-stub.ts +++ b/code/frameworks/nextjs/src/next-image-loader-stub.ts @@ -1,8 +1,4 @@ -import { cpus } from 'node:os'; - -import { NextJsSharpError } from 'storybook/internal/preview-errors'; - -import imageSizeOf from 'image-size'; +import { imageSize } from 'image-size'; import { interpolateName } from 'loader-utils'; import type { NextConfig } from 'next'; import type { RawLoaderDefinition } from 'webpack'; @@ -12,21 +8,6 @@ interface LoaderOptions { nextConfig: NextConfig; } -let sharp: typeof import('sharp') | undefined; - -try { - sharp = require('sharp'); - if (sharp && sharp.concurrency() > 1) { - // Reducing concurrency reduces the memory usage too. - const divisor = process.env.NODE_ENV === 'development' ? 4 : 2; - sharp.concurrency(Math.floor(Math.max(cpus().length / divisor, 1))); - } -} catch (e) { - console.warn( - 'You have to install sharp in order to use image optimization features in Next.js. AVIF support is also disabled.' - ); -} - const nextImageLoaderStub: RawLoaderDefinition = async function NextImageLoader( content ) { @@ -36,7 +17,6 @@ const nextImageLoaderStub: RawLoaderDefinition = async function N content, }; const outputPath = interpolateName(this, filename.replace('[ext]', '.[ext]'), opts); - const extension = interpolateName(this, '[ext]', opts); this.emitFile(outputPath, content); @@ -44,23 +24,7 @@ const nextImageLoaderStub: RawLoaderDefinition = async function N return `const src = '${outputPath}'; export default src;`; } - let width; - let height; - - if (extension === 'avif') { - if (sharp) { - const transformer = sharp(content); - const result = await transformer.metadata(); - width = result.width; - height = result.height; - } else { - throw new NextJsSharpError(); - } - } else { - const result = imageSizeOf(this.resourcePath); - width = result.width; - height = result.height; - } + const { width, height } = imageSize(content as Uint8Array); return `export default ${JSON.stringify({ src: outputPath, diff --git a/code/yarn.lock b/code/yarn.lock index 2888c6525c5..f54c31cecb6 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -8047,7 +8047,7 @@ __metadata: babel-loader: "npm:^9.1.3" css-loader: "npm:^6.7.3" find-up: "npm:^5.0.0" - image-size: "npm:^1.0.0" + image-size: "npm:^2.0.0" loader-utils: "npm:^3.2.1" next: "npm:^15.0.3" node-polyfill-webpack-plugin: "npm:^2.0.1" @@ -19547,7 +19547,7 @@ __metadata: languageName: node linkType: hard -"image-size@npm:^1.0.0, image-size@npm:^1.1.1": +"image-size@npm:^1.1.1": version: 1.1.1 resolution: "image-size@npm:1.1.1" dependencies: @@ -19558,6 +19558,15 @@ __metadata: languageName: node linkType: hard +"image-size@npm:^2.0.0": + version: 2.0.0 + resolution: "image-size@npm:2.0.0" + bin: + image-size: bin/image-size.js + checksum: 10c0/c73cfc9006a5b5d500b455f5aed161eadc450a60c548becee93205d17864d18e8c442932ab1acb29bde92a177b154b3835fdf3b26eb84f881772421b6825f72e + languageName: node + linkType: hard + "image-size@npm:~0.5.0": version: 0.5.5 resolution: "image-size@npm:0.5.5" From 5ee5ec4bdd6a4ee8a72068f699dd0cceffa57e49 Mon Sep 17 00:00:00 2001 From: William Lewis Date: Tue, 25 Feb 2025 15:32:20 -0500 Subject: [PATCH 004/108] Replace 'min' instead of 'm' in printDuration --- code/builders/builder-webpack5/src/index.ts | 2 +- code/core/src/common/utils/print-duration.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/code/builders/builder-webpack5/src/index.ts b/code/builders/builder-webpack5/src/index.ts index 9e868c925b6..dce596545d0 100644 --- a/code/builders/builder-webpack5/src/index.ts +++ b/code/builders/builder-webpack5/src/index.ts @@ -30,7 +30,7 @@ export const printDuration = (startTime: [number, number]) => prettyTime(process.hrtime(startTime)) .replace(' ms', ' milliseconds') .replace(' s', ' seconds') - .replace(' m', ' minutes'); + .replace(' min', ' minutes'); let compilation: ReturnType | undefined; let reject: (reason?: any) => void; diff --git a/code/core/src/common/utils/print-duration.ts b/code/core/src/common/utils/print-duration.ts index b7bcad0c629..5a1f70f0151 100644 --- a/code/core/src/common/utils/print-duration.ts +++ b/code/core/src/common/utils/print-duration.ts @@ -4,4 +4,4 @@ export const printDuration = (startTime: [number, number]) => prettyTime(process.hrtime(startTime)) .replace(' ms', ' milliseconds') .replace(' s', ' seconds') - .replace(' m', ' minutes'); + .replace(' min', ' minutes'); From 3ceb20baaf8a6ebbb6da2f1b64c0ad81ecc29c11 Mon Sep 17 00:00:00 2001 From: Matei-Paul Trandafir Date: Wed, 26 Feb 2025 00:38:22 +0200 Subject: [PATCH 005/108] ignore virtual modules --- code/frameworks/svelte-vite/src/plugins/svelte-docgen.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/frameworks/svelte-vite/src/plugins/svelte-docgen.ts b/code/frameworks/svelte-vite/src/plugins/svelte-docgen.ts index c1647653933..fc5b18a5528 100644 --- a/code/frameworks/svelte-vite/src/plugins/svelte-docgen.ts +++ b/code/frameworks/svelte-vite/src/plugins/svelte-docgen.ts @@ -146,7 +146,7 @@ export async function svelteDocgen(svelteOptions: Record = {}): Pro return { name: 'storybook:svelte-docgen-plugin', async transform(src: string, id: string) { - if (!filter(id)) { + if (id.startsWith('\0') || !filter(id)) { return undefined; } From 738e528f28c04161db51035b1197051a87360df0 Mon Sep 17 00:00:00 2001 From: Matei-Paul Trandafir Date: Wed, 26 Feb 2025 00:57:52 +0200 Subject: [PATCH 006/108] ignore readFileSync error --- code/frameworks/svelte-vite/src/plugins/svelte-docgen.ts | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/code/frameworks/svelte-vite/src/plugins/svelte-docgen.ts b/code/frameworks/svelte-vite/src/plugins/svelte-docgen.ts index fc5b18a5528..062e7f68327 100644 --- a/code/frameworks/svelte-vite/src/plugins/svelte-docgen.ts +++ b/code/frameworks/svelte-vite/src/plugins/svelte-docgen.ts @@ -189,7 +189,13 @@ export async function svelteDocgen(svelteOptions: Record = {}): Pro let docOptions; if (docPreprocessOptions) { - const rawSource = readFileSync(resource).toString(); + let rawSource; + try { + rawSource = readFileSync(resource).toString(); + } catch (_) { + // ignore/skip modules that can't be loaded, possibly virtual module + return undefined; + } const { code: fileContent } = await preprocess(rawSource, docPreprocessOptions, { filename: resource, }); From 609f704f71c43ec6b6bf043f6baf60a0e65a1767 Mon Sep 17 00:00:00 2001 From: storybook-bot <32066757+storybook-bot@users.noreply.github.com> Date: Wed, 26 Feb 2025 15:48:44 +0000 Subject: [PATCH 007/108] Write changelog for 9.0.0-alpha.1 [skip ci] --- CHANGELOG.prerelease.md | 7 +++++++ code/package.json | 3 ++- docs/versions/next.json | 2 +- 3 files changed, 10 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.prerelease.md b/CHANGELOG.prerelease.md index ffea8447c31..756e11d1bad 100644 --- a/CHANGELOG.prerelease.md +++ b/CHANGELOG.prerelease.md @@ -1,3 +1,10 @@ +## 9.0.0-alpha.1 + +- CLI: Install prereleases of `@chromatic-com/storybook` - [#30662](https://github.com/storybookjs/storybook/pull/30662), thanks @JReinhold! +- CSF: Only export definePreview from the framework - [#30676](https://github.com/storybookjs/storybook/pull/30676), thanks @kasperpeulen! +- Codemod: Only remove types when they are unused - [#30644](https://github.com/storybookjs/storybook/pull/30644), thanks @yannbf! +- Dependencies: Upgrades - [#30515](https://github.com/storybookjs/storybook/pull/30515), thanks @ndelangen! + ## 9.0.0-alpha.0 ## 8.6.0-beta.10 diff --git a/code/package.json b/code/package.json index 7535f924c15..87d51168b73 100644 --- a/code/package.json +++ b/code/package.json @@ -303,5 +303,6 @@ "Dependency Upgrades" ] ] - } + }, + "deferredNextVersion": "9.0.0-alpha.1" } diff --git a/docs/versions/next.json b/docs/versions/next.json index 0c191fa41c2..55568a82832 100644 --- a/docs/versions/next.json +++ b/docs/versions/next.json @@ -1 +1 @@ -{"version":"9.0.0-alpha.0","info":{"plain":""}} \ No newline at end of file +{"version":"9.0.0-alpha.1","info":{"plain":"- CLI: Install prereleases of `@chromatic-com/storybook` - [#30662](https://github.com/storybookjs/storybook/pull/30662), thanks @JReinhold!\n- CSF: Only export definePreview from the framework - [#30676](https://github.com/storybookjs/storybook/pull/30676), thanks @kasperpeulen!\n- Codemod: Only remove types when they are unused - [#30644](https://github.com/storybookjs/storybook/pull/30644), thanks @yannbf!\n- Dependencies: Upgrades - [#30515](https://github.com/storybookjs/storybook/pull/30515), thanks @ndelangen!"}} From 096bd749750dffcc5869bb979c40879e6cce5808 Mon Sep 17 00:00:00 2001 From: storybook-bot <32066757+storybook-bot@users.noreply.github.com> Date: Thu, 27 Feb 2025 12:21:12 +0000 Subject: [PATCH 008/108] Bump version from "9.0.0-alpha.0" to "9.0.0-alpha.1" [skip ci] --- code/addons/a11y/package.json | 2 +- code/addons/actions/package.json | 2 +- code/addons/backgrounds/package.json | 2 +- code/addons/controls/package.json | 2 +- code/addons/docs/package.json | 2 +- code/addons/essentials/package.json | 2 +- code/addons/gfm/package.json | 2 +- code/addons/highlight/package.json | 2 +- code/addons/interactions/package.json | 2 +- code/addons/jest/package.json | 2 +- code/addons/links/package.json | 2 +- code/addons/measure/package.json | 2 +- code/addons/onboarding/package.json | 2 +- code/addons/outline/package.json | 2 +- code/addons/storysource/package.json | 2 +- code/addons/test/package.json | 2 +- code/addons/themes/package.json | 2 +- code/addons/toolbars/package.json | 2 +- code/addons/viewport/package.json | 2 +- code/builders/builder-vite/package.json | 2 +- code/builders/builder-webpack5/package.json | 2 +- code/core/package.json | 2 +- code/core/src/common/versions.ts | 170 +++++++++--------- code/core/src/manager-api/version.ts | 2 +- code/deprecated/builder-manager/package.json | 2 +- code/deprecated/channels/package.json | 2 +- code/deprecated/client-logger/package.json | 2 +- code/deprecated/components/package.json | 2 +- code/deprecated/core-common/package.json | 2 +- code/deprecated/core-events/package.json | 2 +- code/deprecated/core-server/package.json | 2 +- code/deprecated/csf-tools/package.json | 2 +- code/deprecated/docs-tools/package.json | 2 +- code/deprecated/manager-api/package.json | 2 +- code/deprecated/manager/package.json | 2 +- code/deprecated/node-logger/package.json | 2 +- code/deprecated/preview-api/package.json | 2 +- code/deprecated/preview/package.json | 2 +- code/deprecated/router/package.json | 2 +- code/deprecated/telemetry/package.json | 2 +- code/deprecated/theming/package.json | 2 +- code/deprecated/types/package.json | 2 +- code/frameworks/angular/package.json | 2 +- code/frameworks/ember/package.json | 2 +- .../experimental-nextjs-vite/package.json | 2 +- code/frameworks/html-vite/package.json | 2 +- code/frameworks/html-webpack5/package.json | 2 +- code/frameworks/nextjs/package.json | 2 +- code/frameworks/preact-vite/package.json | 2 +- code/frameworks/preact-webpack5/package.json | 2 +- .../react-native-web-vite/package.json | 2 +- code/frameworks/react-vite/package.json | 2 +- code/frameworks/react-webpack5/package.json | 2 +- code/frameworks/server-webpack5/package.json | 2 +- code/frameworks/svelte-vite/package.json | 2 +- code/frameworks/svelte-webpack5/package.json | 2 +- code/frameworks/sveltekit/package.json | 2 +- code/frameworks/vue3-vite/package.json | 2 +- code/frameworks/vue3-webpack5/package.json | 2 +- .../web-components-vite/package.json | 2 +- .../web-components-webpack5/package.json | 2 +- code/lib/blocks/package.json | 2 +- code/lib/cli-sb/package.json | 2 +- code/lib/cli-storybook/package.json | 2 +- code/lib/cli/package.json | 2 +- code/lib/codemod/package.json | 2 +- code/lib/core-webpack/package.json | 2 +- code/lib/create-storybook/package.json | 2 +- code/lib/csf-plugin/package.json | 2 +- code/lib/instrumenter/package.json | 2 +- code/lib/react-dom-shim/package.json | 2 +- code/lib/source-loader/package.json | 2 +- code/lib/test/package.json | 2 +- code/package.json | 5 +- code/presets/create-react-app/package.json | 2 +- code/presets/html-webpack/package.json | 2 +- code/presets/preact-webpack/package.json | 2 +- code/presets/react-webpack/package.json | 2 +- code/presets/server-webpack/package.json | 2 +- code/presets/svelte-webpack/package.json | 2 +- code/presets/vue3-webpack/package.json | 2 +- code/renderers/html/package.json | 2 +- code/renderers/preact/package.json | 2 +- code/renderers/react/package.json | 2 +- code/renderers/server/package.json | 2 +- code/renderers/svelte/package.json | 2 +- code/renderers/vue3/package.json | 2 +- code/renderers/web-components/package.json | 2 +- 88 files changed, 173 insertions(+), 174 deletions(-) diff --git a/code/addons/a11y/package.json b/code/addons/a11y/package.json index 980f65a7acf..21dd15d38c5 100644 --- a/code/addons/a11y/package.json +++ b/code/addons/a11y/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-a11y", - "version": "9.0.0-alpha.0", + "version": "9.0.0-alpha.1", "description": "Test component compliance with web accessibility standards", "keywords": [ "a11y", diff --git a/code/addons/actions/package.json b/code/addons/actions/package.json index 1b8ac337fd6..81f551eda78 100644 --- a/code/addons/actions/package.json +++ b/code/addons/actions/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-actions", - "version": "9.0.0-alpha.0", + "version": "9.0.0-alpha.1", "description": "Get UI feedback when an action is performed on an interactive element", "keywords": [ "storybook", diff --git a/code/addons/backgrounds/package.json b/code/addons/backgrounds/package.json index 190dbba014c..bbba62d5300 100644 --- a/code/addons/backgrounds/package.json +++ b/code/addons/backgrounds/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-backgrounds", - "version": "9.0.0-alpha.0", + "version": "9.0.0-alpha.1", "description": "Switch backgrounds to view components in different settings", "keywords": [ "addon", diff --git a/code/addons/controls/package.json b/code/addons/controls/package.json index 4a96bf08d02..9bdbe4ff3a4 100644 --- a/code/addons/controls/package.json +++ b/code/addons/controls/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-controls", - "version": "9.0.0-alpha.0", + "version": "9.0.0-alpha.1", "description": "Interact with component inputs dynamically in the Storybook UI", "keywords": [ "addon", diff --git a/code/addons/docs/package.json b/code/addons/docs/package.json index 7b3950e5e91..8f7ee6ab794 100644 --- a/code/addons/docs/package.json +++ b/code/addons/docs/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-docs", - "version": "9.0.0-alpha.0", + "version": "9.0.0-alpha.1", "description": "Document component usage and properties in Markdown", "keywords": [ "addon", diff --git a/code/addons/essentials/package.json b/code/addons/essentials/package.json index 1255974604d..6ff822bc1f1 100644 --- a/code/addons/essentials/package.json +++ b/code/addons/essentials/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-essentials", - "version": "9.0.0-alpha.0", + "version": "9.0.0-alpha.1", "description": "Curated addons to bring out the best of Storybook", "keywords": [ "addon", diff --git a/code/addons/gfm/package.json b/code/addons/gfm/package.json index e291f215310..6bf9a1ffd8e 100644 --- a/code/addons/gfm/package.json +++ b/code/addons/gfm/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-mdx-gfm", - "version": "9.0.0-alpha.0", + "version": "9.0.0-alpha.1", "description": "GitHub Flavored Markdown in Storybook", "keywords": [ "addon", diff --git a/code/addons/highlight/package.json b/code/addons/highlight/package.json index 425058b43b9..badd3a5ade3 100644 --- a/code/addons/highlight/package.json +++ b/code/addons/highlight/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-highlight", - "version": "9.0.0-alpha.0", + "version": "9.0.0-alpha.1", "description": "Highlight DOM nodes within your stories", "keywords": [ "storybook-addons", diff --git a/code/addons/interactions/package.json b/code/addons/interactions/package.json index 1b1a3276fbc..ba3abd93b39 100644 --- a/code/addons/interactions/package.json +++ b/code/addons/interactions/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-interactions", - "version": "9.0.0-alpha.0", + "version": "9.0.0-alpha.1", "description": "Automate, test and debug user interactions", "keywords": [ "storybook-addons", diff --git a/code/addons/jest/package.json b/code/addons/jest/package.json index a1a5ac02ee6..b1117b74d9d 100644 --- a/code/addons/jest/package.json +++ b/code/addons/jest/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-jest", - "version": "9.0.0-alpha.0", + "version": "9.0.0-alpha.1", "description": "React storybook addon that show component jest report", "keywords": [ "addon", diff --git a/code/addons/links/package.json b/code/addons/links/package.json index 08f1980beab..661b09e3b08 100644 --- a/code/addons/links/package.json +++ b/code/addons/links/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-links", - "version": "9.0.0-alpha.0", + "version": "9.0.0-alpha.1", "description": "Link stories together to build demos and prototypes with your UI components", "keywords": [ "storybook-addons", diff --git a/code/addons/measure/package.json b/code/addons/measure/package.json index 345e51fbdd1..2b0331d0856 100644 --- a/code/addons/measure/package.json +++ b/code/addons/measure/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-measure", - "version": "9.0.0-alpha.0", + "version": "9.0.0-alpha.1", "description": "Inspect layouts by visualizing the box model", "keywords": [ "storybook-addons", diff --git a/code/addons/onboarding/package.json b/code/addons/onboarding/package.json index 584a600212d..21dfd3e95ba 100644 --- a/code/addons/onboarding/package.json +++ b/code/addons/onboarding/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-onboarding", - "version": "9.0.0-alpha.0", + "version": "9.0.0-alpha.1", "description": "Storybook Addon Onboarding - Introduces a new onboarding experience", "keywords": [ "storybook-addons", diff --git a/code/addons/outline/package.json b/code/addons/outline/package.json index 10da73214db..144bf9ba6cc 100644 --- a/code/addons/outline/package.json +++ b/code/addons/outline/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-outline", - "version": "9.0.0-alpha.0", + "version": "9.0.0-alpha.1", "description": "Outline all elements with CSS to help with layout placement and alignment", "keywords": [ "storybook-addons", diff --git a/code/addons/storysource/package.json b/code/addons/storysource/package.json index 2f4118da26f..6d16e605bf4 100644 --- a/code/addons/storysource/package.json +++ b/code/addons/storysource/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-storysource", - "version": "9.0.0-alpha.0", + "version": "9.0.0-alpha.1", "description": "View a story’s source code to see how it works and paste into your app", "keywords": [ "addon", diff --git a/code/addons/test/package.json b/code/addons/test/package.json index 675224de21b..b67bb882fb9 100644 --- a/code/addons/test/package.json +++ b/code/addons/test/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/experimental-addon-test", - "version": "9.0.0-alpha.0", + "version": "9.0.0-alpha.1", "description": "Integrate Vitest with Storybook", "keywords": [ "storybook-addons", diff --git a/code/addons/themes/package.json b/code/addons/themes/package.json index 8a0f136c0e0..f75f14c5996 100644 --- a/code/addons/themes/package.json +++ b/code/addons/themes/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-themes", - "version": "9.0.0-alpha.0", + "version": "9.0.0-alpha.1", "description": "Switch between multiple themes for you components in Storybook", "keywords": [ "css", diff --git a/code/addons/toolbars/package.json b/code/addons/toolbars/package.json index a0e5c3cd5fe..cc8e5e783b9 100644 --- a/code/addons/toolbars/package.json +++ b/code/addons/toolbars/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-toolbars", - "version": "9.0.0-alpha.0", + "version": "9.0.0-alpha.1", "description": "Create your own toolbar items that control story rendering", "keywords": [ "addon", diff --git a/code/addons/viewport/package.json b/code/addons/viewport/package.json index 8056243170e..3a287d73e04 100644 --- a/code/addons/viewport/package.json +++ b/code/addons/viewport/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-viewport", - "version": "9.0.0-alpha.0", + "version": "9.0.0-alpha.1", "description": "Build responsive components by adjusting Storybook’s viewport size and orientation", "keywords": [ "addon", diff --git a/code/builders/builder-vite/package.json b/code/builders/builder-vite/package.json index 363b4df8cbe..34b42ab7638 100644 --- a/code/builders/builder-vite/package.json +++ b/code/builders/builder-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/builder-vite", - "version": "9.0.0-alpha.0", + "version": "9.0.0-alpha.1", "description": "A plugin to run and build Storybooks with Vite", "homepage": "https://github.com/storybookjs/storybook/tree/next/code/builders/builder-vite/#readme", "bugs": { diff --git a/code/builders/builder-webpack5/package.json b/code/builders/builder-webpack5/package.json index 7a0941d9995..b5b3a23ba3b 100644 --- a/code/builders/builder-webpack5/package.json +++ b/code/builders/builder-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/builder-webpack5", - "version": "9.0.0-alpha.0", + "version": "9.0.0-alpha.1", "description": "Storybook framework-agnostic API", "keywords": [ "storybook" diff --git a/code/core/package.json b/code/core/package.json index 3f1bc1ac342..55b415165fe 100644 --- a/code/core/package.json +++ b/code/core/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/core", - "version": "9.0.0-alpha.0", + "version": "9.0.0-alpha.1", "description": "Storybook framework-agnostic API", "keywords": [ "storybook" diff --git a/code/core/src/common/versions.ts b/code/core/src/common/versions.ts index 714f2f949b4..5dca9a8abb3 100644 --- a/code/core/src/common/versions.ts +++ b/code/core/src/common/versions.ts @@ -1,88 +1,88 @@ // auto generated file, do not edit export default { - '@storybook/addon-a11y': '9.0.0-alpha.0', - '@storybook/addon-actions': '9.0.0-alpha.0', - '@storybook/addon-backgrounds': '9.0.0-alpha.0', - '@storybook/addon-controls': '9.0.0-alpha.0', - '@storybook/addon-docs': '9.0.0-alpha.0', - '@storybook/addon-essentials': '9.0.0-alpha.0', - '@storybook/addon-mdx-gfm': '9.0.0-alpha.0', - '@storybook/addon-highlight': '9.0.0-alpha.0', - '@storybook/addon-interactions': '9.0.0-alpha.0', - '@storybook/addon-jest': '9.0.0-alpha.0', - '@storybook/addon-links': '9.0.0-alpha.0', - '@storybook/addon-measure': '9.0.0-alpha.0', - '@storybook/addon-onboarding': '9.0.0-alpha.0', - '@storybook/addon-outline': '9.0.0-alpha.0', - '@storybook/addon-storysource': '9.0.0-alpha.0', - '@storybook/experimental-addon-test': '9.0.0-alpha.0', - '@storybook/addon-themes': '9.0.0-alpha.0', - '@storybook/addon-toolbars': '9.0.0-alpha.0', - '@storybook/addon-viewport': '9.0.0-alpha.0', - '@storybook/builder-vite': '9.0.0-alpha.0', - '@storybook/builder-webpack5': '9.0.0-alpha.0', - '@storybook/core': '9.0.0-alpha.0', - '@storybook/builder-manager': '9.0.0-alpha.0', - '@storybook/channels': '9.0.0-alpha.0', - '@storybook/client-logger': '9.0.0-alpha.0', - '@storybook/components': '9.0.0-alpha.0', - '@storybook/core-common': '9.0.0-alpha.0', - '@storybook/core-events': '9.0.0-alpha.0', - '@storybook/core-server': '9.0.0-alpha.0', - '@storybook/csf-tools': '9.0.0-alpha.0', - '@storybook/docs-tools': '9.0.0-alpha.0', - '@storybook/manager': '9.0.0-alpha.0', - '@storybook/manager-api': '9.0.0-alpha.0', - '@storybook/node-logger': '9.0.0-alpha.0', - '@storybook/preview': '9.0.0-alpha.0', - '@storybook/preview-api': '9.0.0-alpha.0', - '@storybook/router': '9.0.0-alpha.0', - '@storybook/telemetry': '9.0.0-alpha.0', - '@storybook/theming': '9.0.0-alpha.0', - '@storybook/types': '9.0.0-alpha.0', - '@storybook/angular': '9.0.0-alpha.0', - '@storybook/ember': '9.0.0-alpha.0', - '@storybook/experimental-nextjs-vite': '9.0.0-alpha.0', - '@storybook/html-vite': '9.0.0-alpha.0', - '@storybook/html-webpack5': '9.0.0-alpha.0', - '@storybook/nextjs': '9.0.0-alpha.0', - '@storybook/preact-vite': '9.0.0-alpha.0', - '@storybook/preact-webpack5': '9.0.0-alpha.0', - '@storybook/react-native-web-vite': '9.0.0-alpha.0', - '@storybook/react-vite': '9.0.0-alpha.0', - '@storybook/react-webpack5': '9.0.0-alpha.0', - '@storybook/server-webpack5': '9.0.0-alpha.0', - '@storybook/svelte-vite': '9.0.0-alpha.0', - '@storybook/svelte-webpack5': '9.0.0-alpha.0', - '@storybook/sveltekit': '9.0.0-alpha.0', - '@storybook/vue3-vite': '9.0.0-alpha.0', - '@storybook/vue3-webpack5': '9.0.0-alpha.0', - '@storybook/web-components-vite': '9.0.0-alpha.0', - '@storybook/web-components-webpack5': '9.0.0-alpha.0', - '@storybook/blocks': '9.0.0-alpha.0', - storybook: '9.0.0-alpha.0', - sb: '9.0.0-alpha.0', - '@storybook/cli': '9.0.0-alpha.0', - '@storybook/codemod': '9.0.0-alpha.0', - '@storybook/core-webpack': '9.0.0-alpha.0', - 'create-storybook': '9.0.0-alpha.0', - '@storybook/csf-plugin': '9.0.0-alpha.0', - '@storybook/instrumenter': '9.0.0-alpha.0', - '@storybook/react-dom-shim': '9.0.0-alpha.0', - '@storybook/source-loader': '9.0.0-alpha.0', - '@storybook/test': '9.0.0-alpha.0', - '@storybook/preset-create-react-app': '9.0.0-alpha.0', - '@storybook/preset-html-webpack': '9.0.0-alpha.0', - '@storybook/preset-preact-webpack': '9.0.0-alpha.0', - '@storybook/preset-react-webpack': '9.0.0-alpha.0', - '@storybook/preset-server-webpack': '9.0.0-alpha.0', - '@storybook/preset-svelte-webpack': '9.0.0-alpha.0', - '@storybook/preset-vue3-webpack': '9.0.0-alpha.0', - '@storybook/html': '9.0.0-alpha.0', - '@storybook/preact': '9.0.0-alpha.0', - '@storybook/react': '9.0.0-alpha.0', - '@storybook/server': '9.0.0-alpha.0', - '@storybook/svelte': '9.0.0-alpha.0', - '@storybook/vue3': '9.0.0-alpha.0', - '@storybook/web-components': '9.0.0-alpha.0', + '@storybook/addon-a11y': '9.0.0-alpha.1', + '@storybook/addon-actions': '9.0.0-alpha.1', + '@storybook/addon-backgrounds': '9.0.0-alpha.1', + '@storybook/addon-controls': '9.0.0-alpha.1', + '@storybook/addon-docs': '9.0.0-alpha.1', + '@storybook/addon-essentials': '9.0.0-alpha.1', + '@storybook/addon-mdx-gfm': '9.0.0-alpha.1', + '@storybook/addon-highlight': '9.0.0-alpha.1', + '@storybook/addon-interactions': '9.0.0-alpha.1', + '@storybook/addon-jest': '9.0.0-alpha.1', + '@storybook/addon-links': '9.0.0-alpha.1', + '@storybook/addon-measure': '9.0.0-alpha.1', + '@storybook/addon-onboarding': '9.0.0-alpha.1', + '@storybook/addon-outline': '9.0.0-alpha.1', + '@storybook/addon-storysource': '9.0.0-alpha.1', + '@storybook/experimental-addon-test': '9.0.0-alpha.1', + '@storybook/addon-themes': '9.0.0-alpha.1', + '@storybook/addon-toolbars': '9.0.0-alpha.1', + '@storybook/addon-viewport': '9.0.0-alpha.1', + '@storybook/builder-vite': '9.0.0-alpha.1', + '@storybook/builder-webpack5': '9.0.0-alpha.1', + '@storybook/core': '9.0.0-alpha.1', + '@storybook/builder-manager': '9.0.0-alpha.1', + '@storybook/channels': '9.0.0-alpha.1', + '@storybook/client-logger': '9.0.0-alpha.1', + '@storybook/components': '9.0.0-alpha.1', + '@storybook/core-common': '9.0.0-alpha.1', + '@storybook/core-events': '9.0.0-alpha.1', + '@storybook/core-server': '9.0.0-alpha.1', + '@storybook/csf-tools': '9.0.0-alpha.1', + '@storybook/docs-tools': '9.0.0-alpha.1', + '@storybook/manager': '9.0.0-alpha.1', + '@storybook/manager-api': '9.0.0-alpha.1', + '@storybook/node-logger': '9.0.0-alpha.1', + '@storybook/preview': '9.0.0-alpha.1', + '@storybook/preview-api': '9.0.0-alpha.1', + '@storybook/router': '9.0.0-alpha.1', + '@storybook/telemetry': '9.0.0-alpha.1', + '@storybook/theming': '9.0.0-alpha.1', + '@storybook/types': '9.0.0-alpha.1', + '@storybook/angular': '9.0.0-alpha.1', + '@storybook/ember': '9.0.0-alpha.1', + '@storybook/experimental-nextjs-vite': '9.0.0-alpha.1', + '@storybook/html-vite': '9.0.0-alpha.1', + '@storybook/html-webpack5': '9.0.0-alpha.1', + '@storybook/nextjs': '9.0.0-alpha.1', + '@storybook/preact-vite': '9.0.0-alpha.1', + '@storybook/preact-webpack5': '9.0.0-alpha.1', + '@storybook/react-native-web-vite': '9.0.0-alpha.1', + '@storybook/react-vite': '9.0.0-alpha.1', + '@storybook/react-webpack5': '9.0.0-alpha.1', + '@storybook/server-webpack5': '9.0.0-alpha.1', + '@storybook/svelte-vite': '9.0.0-alpha.1', + '@storybook/svelte-webpack5': '9.0.0-alpha.1', + '@storybook/sveltekit': '9.0.0-alpha.1', + '@storybook/vue3-vite': '9.0.0-alpha.1', + '@storybook/vue3-webpack5': '9.0.0-alpha.1', + '@storybook/web-components-vite': '9.0.0-alpha.1', + '@storybook/web-components-webpack5': '9.0.0-alpha.1', + '@storybook/blocks': '9.0.0-alpha.1', + storybook: '9.0.0-alpha.1', + sb: '9.0.0-alpha.1', + '@storybook/cli': '9.0.0-alpha.1', + '@storybook/codemod': '9.0.0-alpha.1', + '@storybook/core-webpack': '9.0.0-alpha.1', + 'create-storybook': '9.0.0-alpha.1', + '@storybook/csf-plugin': '9.0.0-alpha.1', + '@storybook/instrumenter': '9.0.0-alpha.1', + '@storybook/react-dom-shim': '9.0.0-alpha.1', + '@storybook/source-loader': '9.0.0-alpha.1', + '@storybook/test': '9.0.0-alpha.1', + '@storybook/preset-create-react-app': '9.0.0-alpha.1', + '@storybook/preset-html-webpack': '9.0.0-alpha.1', + '@storybook/preset-preact-webpack': '9.0.0-alpha.1', + '@storybook/preset-react-webpack': '9.0.0-alpha.1', + '@storybook/preset-server-webpack': '9.0.0-alpha.1', + '@storybook/preset-svelte-webpack': '9.0.0-alpha.1', + '@storybook/preset-vue3-webpack': '9.0.0-alpha.1', + '@storybook/html': '9.0.0-alpha.1', + '@storybook/preact': '9.0.0-alpha.1', + '@storybook/react': '9.0.0-alpha.1', + '@storybook/server': '9.0.0-alpha.1', + '@storybook/svelte': '9.0.0-alpha.1', + '@storybook/vue3': '9.0.0-alpha.1', + '@storybook/web-components': '9.0.0-alpha.1', }; diff --git a/code/core/src/manager-api/version.ts b/code/core/src/manager-api/version.ts index 32dd6d3b57f..29d0c0de00c 100644 --- a/code/core/src/manager-api/version.ts +++ b/code/core/src/manager-api/version.ts @@ -1 +1 @@ -export const version = '9.0.0-alpha.0'; +export const version = '9.0.0-alpha.1'; diff --git a/code/deprecated/builder-manager/package.json b/code/deprecated/builder-manager/package.json index a11336e8850..a480b620065 100644 --- a/code/deprecated/builder-manager/package.json +++ b/code/deprecated/builder-manager/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/builder-manager", - "version": "9.0.0-alpha.0", + "version": "9.0.0-alpha.1", "description": "Storybook manager builder", "keywords": [ "storybook" diff --git a/code/deprecated/channels/package.json b/code/deprecated/channels/package.json index 3c21a2bb0cf..027d9b534fd 100644 --- a/code/deprecated/channels/package.json +++ b/code/deprecated/channels/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/channels", - "version": "9.0.0-alpha.0", + "version": "9.0.0-alpha.1", "description": "", "keywords": [ "storybook" diff --git a/code/deprecated/client-logger/package.json b/code/deprecated/client-logger/package.json index aaec1733f40..7cbf7b95e7a 100644 --- a/code/deprecated/client-logger/package.json +++ b/code/deprecated/client-logger/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/client-logger", - "version": "9.0.0-alpha.0", + "version": "9.0.0-alpha.1", "description": "", "keywords": [ "storybook" diff --git a/code/deprecated/components/package.json b/code/deprecated/components/package.json index f6c32b9d291..521705ae0af 100644 --- a/code/deprecated/components/package.json +++ b/code/deprecated/components/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/components", - "version": "9.0.0-alpha.0", + "version": "9.0.0-alpha.1", "description": "Core Storybook Components", "keywords": [ "storybook" diff --git a/code/deprecated/core-common/package.json b/code/deprecated/core-common/package.json index 745407ec8c2..a1d0e0f8a06 100644 --- a/code/deprecated/core-common/package.json +++ b/code/deprecated/core-common/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/core-common", - "version": "9.0.0-alpha.0", + "version": "9.0.0-alpha.1", "description": "Storybook framework-agnostic API", "keywords": [ "storybook" diff --git a/code/deprecated/core-events/package.json b/code/deprecated/core-events/package.json index 1a4a07ff7d6..494440db3d4 100644 --- a/code/deprecated/core-events/package.json +++ b/code/deprecated/core-events/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/core-events", - "version": "9.0.0-alpha.0", + "version": "9.0.0-alpha.1", "description": "Event names used in storybook core", "keywords": [ "storybook" diff --git a/code/deprecated/core-server/package.json b/code/deprecated/core-server/package.json index 46a83db9a99..3f64a6cdc2d 100644 --- a/code/deprecated/core-server/package.json +++ b/code/deprecated/core-server/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/core-server", - "version": "9.0.0-alpha.0", + "version": "9.0.0-alpha.1", "description": "Storybook framework-agnostic API", "keywords": [ "storybook" diff --git a/code/deprecated/csf-tools/package.json b/code/deprecated/csf-tools/package.json index 692bcf7fdee..1df4addf17a 100644 --- a/code/deprecated/csf-tools/package.json +++ b/code/deprecated/csf-tools/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/csf-tools", - "version": "9.0.0-alpha.0", + "version": "9.0.0-alpha.1", "description": "Parse and manipulate CSF and Storybook config files", "keywords": [ "storybook" diff --git a/code/deprecated/docs-tools/package.json b/code/deprecated/docs-tools/package.json index 051fe55168a..793d40e6c63 100644 --- a/code/deprecated/docs-tools/package.json +++ b/code/deprecated/docs-tools/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/docs-tools", - "version": "9.0.0-alpha.0", + "version": "9.0.0-alpha.1", "description": "Shared utility functions for frameworks to implement docs", "keywords": [ "storybook" diff --git a/code/deprecated/manager-api/package.json b/code/deprecated/manager-api/package.json index 60ae1caa55f..f10ef0e00fb 100644 --- a/code/deprecated/manager-api/package.json +++ b/code/deprecated/manager-api/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/manager-api", - "version": "9.0.0-alpha.0", + "version": "9.0.0-alpha.1", "description": "Core Storybook Manager API & Context", "keywords": [ "storybook" diff --git a/code/deprecated/manager/package.json b/code/deprecated/manager/package.json index 3d732d85557..24bdc3b49d8 100644 --- a/code/deprecated/manager/package.json +++ b/code/deprecated/manager/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/manager", - "version": "9.0.0-alpha.0", + "version": "9.0.0-alpha.1", "description": "Core Storybook UI", "keywords": [ "storybook" diff --git a/code/deprecated/node-logger/package.json b/code/deprecated/node-logger/package.json index 766a0cad680..7092c44b5a0 100644 --- a/code/deprecated/node-logger/package.json +++ b/code/deprecated/node-logger/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/node-logger", - "version": "9.0.0-alpha.0", + "version": "9.0.0-alpha.1", "description": "", "keywords": [ "storybook" diff --git a/code/deprecated/preview-api/package.json b/code/deprecated/preview-api/package.json index 2d5aa44faf6..405c6343cce 100644 --- a/code/deprecated/preview-api/package.json +++ b/code/deprecated/preview-api/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preview-api", - "version": "9.0.0-alpha.0", + "version": "9.0.0-alpha.1", "description": "", "keywords": [ "storybook" diff --git a/code/deprecated/preview/package.json b/code/deprecated/preview/package.json index 1b4e120bcee..8429573bc30 100644 --- a/code/deprecated/preview/package.json +++ b/code/deprecated/preview/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preview", - "version": "9.0.0-alpha.0", + "version": "9.0.0-alpha.1", "description": "", "keywords": [ "storybook" diff --git a/code/deprecated/router/package.json b/code/deprecated/router/package.json index d3697be907e..3dd296792a7 100644 --- a/code/deprecated/router/package.json +++ b/code/deprecated/router/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/router", - "version": "9.0.0-alpha.0", + "version": "9.0.0-alpha.1", "description": "Core Storybook Router", "keywords": [ "storybook" diff --git a/code/deprecated/telemetry/package.json b/code/deprecated/telemetry/package.json index c4d844df37b..a2d06d88a4d 100644 --- a/code/deprecated/telemetry/package.json +++ b/code/deprecated/telemetry/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/telemetry", - "version": "9.0.0-alpha.0", + "version": "9.0.0-alpha.1", "description": "Telemetry logging for crash reports and usage statistics", "keywords": [ "storybook" diff --git a/code/deprecated/theming/package.json b/code/deprecated/theming/package.json index ad6f68e8f2d..982e22da645 100644 --- a/code/deprecated/theming/package.json +++ b/code/deprecated/theming/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/theming", - "version": "9.0.0-alpha.0", + "version": "9.0.0-alpha.1", "description": "Core Storybook Components", "keywords": [ "storybook" diff --git a/code/deprecated/types/package.json b/code/deprecated/types/package.json index 7631c41f249..0e6f9293d05 100644 --- a/code/deprecated/types/package.json +++ b/code/deprecated/types/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/types", - "version": "9.0.0-alpha.0", + "version": "9.0.0-alpha.1", "description": "Core Storybook TS Types", "keywords": [ "storybook" diff --git a/code/frameworks/angular/package.json b/code/frameworks/angular/package.json index 81dedd5f093..587d2cf9780 100644 --- a/code/frameworks/angular/package.json +++ b/code/frameworks/angular/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/angular", - "version": "9.0.0-alpha.0", + "version": "9.0.0-alpha.1", "description": "Storybook for Angular: Develop Angular components in isolation with hot reloading.", "keywords": [ "storybook", diff --git a/code/frameworks/ember/package.json b/code/frameworks/ember/package.json index a002ee0f837..fb790d172e9 100644 --- a/code/frameworks/ember/package.json +++ b/code/frameworks/ember/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/ember", - "version": "9.0.0-alpha.0", + "version": "9.0.0-alpha.1", "description": "Storybook for Ember: Develop Ember Component in isolation with Hot Reloading.", "homepage": "https://github.com/storybookjs/storybook/tree/next/code/frameworks/ember", "bugs": { diff --git a/code/frameworks/experimental-nextjs-vite/package.json b/code/frameworks/experimental-nextjs-vite/package.json index 46dcf6bfd2e..ae8115be6a6 100644 --- a/code/frameworks/experimental-nextjs-vite/package.json +++ b/code/frameworks/experimental-nextjs-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/experimental-nextjs-vite", - "version": "9.0.0-alpha.0", + "version": "9.0.0-alpha.1", "description": "Storybook for Next.js and Vite", "keywords": [ "storybook", diff --git a/code/frameworks/html-vite/package.json b/code/frameworks/html-vite/package.json index e56e9ae88d0..ab51ba276b8 100644 --- a/code/frameworks/html-vite/package.json +++ b/code/frameworks/html-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/html-vite", - "version": "9.0.0-alpha.0", + "version": "9.0.0-alpha.1", "description": "Storybook for HTML and Vite: Develop HTML in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/html-webpack5/package.json b/code/frameworks/html-webpack5/package.json index 0bda6d6d553..29c487ea8d4 100644 --- a/code/frameworks/html-webpack5/package.json +++ b/code/frameworks/html-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/html-webpack5", - "version": "9.0.0-alpha.0", + "version": "9.0.0-alpha.1", "description": "Storybook for HTML: View HTML snippets in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/nextjs/package.json b/code/frameworks/nextjs/package.json index 1565a161415..9c2ba2d201e 100644 --- a/code/frameworks/nextjs/package.json +++ b/code/frameworks/nextjs/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/nextjs", - "version": "9.0.0-alpha.0", + "version": "9.0.0-alpha.1", "description": "Storybook for Next.js", "keywords": [ "storybook", diff --git a/code/frameworks/preact-vite/package.json b/code/frameworks/preact-vite/package.json index 93571b87a80..fe15fea7bd9 100644 --- a/code/frameworks/preact-vite/package.json +++ b/code/frameworks/preact-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preact-vite", - "version": "9.0.0-alpha.0", + "version": "9.0.0-alpha.1", "description": "Storybook for Preact and Vite: Develop Preact components in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/preact-webpack5/package.json b/code/frameworks/preact-webpack5/package.json index 90269b7e4dd..9cdcec5529c 100644 --- a/code/frameworks/preact-webpack5/package.json +++ b/code/frameworks/preact-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preact-webpack5", - "version": "9.0.0-alpha.0", + "version": "9.0.0-alpha.1", "description": "Storybook for Preact: Develop Preact Component in isolation.", "keywords": [ "storybook" diff --git a/code/frameworks/react-native-web-vite/package.json b/code/frameworks/react-native-web-vite/package.json index 56818e7da76..68c83698ca6 100644 --- a/code/frameworks/react-native-web-vite/package.json +++ b/code/frameworks/react-native-web-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/react-native-web-vite", - "version": "9.0.0-alpha.0", + "version": "9.0.0-alpha.1", "description": "Develop react-native components an isolated web environment with hot reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/react-vite/package.json b/code/frameworks/react-vite/package.json index 8dbd936945d..b60cf94a357 100644 --- a/code/frameworks/react-vite/package.json +++ b/code/frameworks/react-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/react-vite", - "version": "9.0.0-alpha.0", + "version": "9.0.0-alpha.1", "description": "Storybook for React and Vite: Develop React components in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/react-webpack5/package.json b/code/frameworks/react-webpack5/package.json index 735d69a19c8..30909c3c8f3 100644 --- a/code/frameworks/react-webpack5/package.json +++ b/code/frameworks/react-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/react-webpack5", - "version": "9.0.0-alpha.0", + "version": "9.0.0-alpha.1", "description": "Storybook for React: Develop React Component in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/server-webpack5/package.json b/code/frameworks/server-webpack5/package.json index f6881942d57..52783402c58 100644 --- a/code/frameworks/server-webpack5/package.json +++ b/code/frameworks/server-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/server-webpack5", - "version": "9.0.0-alpha.0", + "version": "9.0.0-alpha.1", "description": "Storybook for Server: View HTML snippets from a server in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/svelte-vite/package.json b/code/frameworks/svelte-vite/package.json index 66098f2acaf..e9738fc5e06 100644 --- a/code/frameworks/svelte-vite/package.json +++ b/code/frameworks/svelte-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/svelte-vite", - "version": "9.0.0-alpha.0", + "version": "9.0.0-alpha.1", "description": "Storybook for Svelte and Vite: Develop Svelte components in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/svelte-webpack5/package.json b/code/frameworks/svelte-webpack5/package.json index cb2f03ab475..0ac8229b4b3 100644 --- a/code/frameworks/svelte-webpack5/package.json +++ b/code/frameworks/svelte-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/svelte-webpack5", - "version": "9.0.0-alpha.0", + "version": "9.0.0-alpha.1", "description": "Storybook for Svelte: Develop Svelte Component in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/sveltekit/package.json b/code/frameworks/sveltekit/package.json index cc8a207e575..955c962a65e 100644 --- a/code/frameworks/sveltekit/package.json +++ b/code/frameworks/sveltekit/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/sveltekit", - "version": "9.0.0-alpha.0", + "version": "9.0.0-alpha.1", "description": "Storybook for SvelteKit", "keywords": [ "storybook", diff --git a/code/frameworks/vue3-vite/package.json b/code/frameworks/vue3-vite/package.json index 98dcaa45223..99184f68dbf 100644 --- a/code/frameworks/vue3-vite/package.json +++ b/code/frameworks/vue3-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/vue3-vite", - "version": "9.0.0-alpha.0", + "version": "9.0.0-alpha.1", "description": "Storybook for Vue3 and Vite: Develop Vue3 components in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/vue3-webpack5/package.json b/code/frameworks/vue3-webpack5/package.json index da3d69ad3a6..b60a51776cc 100644 --- a/code/frameworks/vue3-webpack5/package.json +++ b/code/frameworks/vue3-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/vue3-webpack5", - "version": "9.0.0-alpha.0", + "version": "9.0.0-alpha.1", "description": "Storybook for Vue 3: Develop Vue 3 Components in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/web-components-vite/package.json b/code/frameworks/web-components-vite/package.json index 07fc28902e9..56d50ac9f23 100644 --- a/code/frameworks/web-components-vite/package.json +++ b/code/frameworks/web-components-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/web-components-vite", - "version": "9.0.0-alpha.0", + "version": "9.0.0-alpha.1", "description": "Storybook for web-components and Vite: Develop Web Components in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/web-components-webpack5/package.json b/code/frameworks/web-components-webpack5/package.json index 2e31f45b943..9f2ed1174fb 100644 --- a/code/frameworks/web-components-webpack5/package.json +++ b/code/frameworks/web-components-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/web-components-webpack5", - "version": "9.0.0-alpha.0", + "version": "9.0.0-alpha.1", "description": "Storybook for web-components: View web components snippets in isolation with Hot Reloading.", "keywords": [ "lit", diff --git a/code/lib/blocks/package.json b/code/lib/blocks/package.json index b19bd475bcd..763b9f933cd 100644 --- a/code/lib/blocks/package.json +++ b/code/lib/blocks/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/blocks", - "version": "9.0.0-alpha.0", + "version": "9.0.0-alpha.1", "description": "Storybook Doc Blocks", "keywords": [ "storybook" diff --git a/code/lib/cli-sb/package.json b/code/lib/cli-sb/package.json index 42099db21c6..55b6ac93c61 100644 --- a/code/lib/cli-sb/package.json +++ b/code/lib/cli-sb/package.json @@ -1,6 +1,6 @@ { "name": "sb", - "version": "9.0.0-alpha.0", + "version": "9.0.0-alpha.1", "description": "Storybook CLI", "keywords": [ "storybook" diff --git a/code/lib/cli-storybook/package.json b/code/lib/cli-storybook/package.json index fc51868416f..61453bf5451 100644 --- a/code/lib/cli-storybook/package.json +++ b/code/lib/cli-storybook/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/cli", - "version": "9.0.0-alpha.0", + "version": "9.0.0-alpha.1", "description": "Storybook CLI", "keywords": [ "storybook" diff --git a/code/lib/cli/package.json b/code/lib/cli/package.json index 8a51442dba4..053e70a60f4 100644 --- a/code/lib/cli/package.json +++ b/code/lib/cli/package.json @@ -1,6 +1,6 @@ { "name": "storybook", - "version": "9.0.0-alpha.0", + "version": "9.0.0-alpha.1", "description": "Storybook's CLI - install, dev, build, upgrade, and more", "keywords": [ "cli", diff --git a/code/lib/codemod/package.json b/code/lib/codemod/package.json index 0adb9d85627..37e37ffd418 100644 --- a/code/lib/codemod/package.json +++ b/code/lib/codemod/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/codemod", - "version": "9.0.0-alpha.0", + "version": "9.0.0-alpha.1", "description": "A collection of codemod scripts written with JSCodeshift", "keywords": [ "storybook" diff --git a/code/lib/core-webpack/package.json b/code/lib/core-webpack/package.json index f5a26a80ee5..8e4f497742a 100644 --- a/code/lib/core-webpack/package.json +++ b/code/lib/core-webpack/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/core-webpack", - "version": "9.0.0-alpha.0", + "version": "9.0.0-alpha.1", "description": "Storybook framework-agnostic API", "keywords": [ "storybook" diff --git a/code/lib/create-storybook/package.json b/code/lib/create-storybook/package.json index 28252ca6296..89bcb349b8b 100644 --- a/code/lib/create-storybook/package.json +++ b/code/lib/create-storybook/package.json @@ -1,6 +1,6 @@ { "name": "create-storybook", - "version": "9.0.0-alpha.0", + "version": "9.0.0-alpha.1", "description": "Initialize Storybook into your project", "homepage": "https://github.com/storybookjs/storybook/tree/next/code/lib/create-storybook", "bugs": { diff --git a/code/lib/csf-plugin/package.json b/code/lib/csf-plugin/package.json index ef8a12b15b3..2f75c37f1a6 100644 --- a/code/lib/csf-plugin/package.json +++ b/code/lib/csf-plugin/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/csf-plugin", - "version": "9.0.0-alpha.0", + "version": "9.0.0-alpha.1", "description": "Enrich CSF files via static analysis", "keywords": [ "storybook" diff --git a/code/lib/instrumenter/package.json b/code/lib/instrumenter/package.json index 58a41abaccc..8aaf7918260 100644 --- a/code/lib/instrumenter/package.json +++ b/code/lib/instrumenter/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/instrumenter", - "version": "9.0.0-alpha.0", + "version": "9.0.0-alpha.1", "description": "", "keywords": [ "storybook" diff --git a/code/lib/react-dom-shim/package.json b/code/lib/react-dom-shim/package.json index a36e18ed2e8..15bd2af283b 100644 --- a/code/lib/react-dom-shim/package.json +++ b/code/lib/react-dom-shim/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/react-dom-shim", - "version": "9.0.0-alpha.0", + "version": "9.0.0-alpha.1", "description": "", "keywords": [ "storybook" diff --git a/code/lib/source-loader/package.json b/code/lib/source-loader/package.json index 960e91abef9..b01921e48fc 100644 --- a/code/lib/source-loader/package.json +++ b/code/lib/source-loader/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/source-loader", - "version": "9.0.0-alpha.0", + "version": "9.0.0-alpha.1", "description": "Source loader", "keywords": [ "lib", diff --git a/code/lib/test/package.json b/code/lib/test/package.json index 5d3b8d66f92..5974fc10edc 100644 --- a/code/lib/test/package.json +++ b/code/lib/test/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/test", - "version": "9.0.0-alpha.0", + "version": "9.0.0-alpha.1", "description": "", "keywords": [ "storybook" diff --git a/code/package.json b/code/package.json index 87d51168b73..eb2fc9e8380 100644 --- a/code/package.json +++ b/code/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/root", - "version": "9.0.0-alpha.0", + "version": "9.0.0-alpha.1", "private": true, "description": "Storybook root", "homepage": "https://storybook.js.org/", @@ -303,6 +303,5 @@ "Dependency Upgrades" ] ] - }, - "deferredNextVersion": "9.0.0-alpha.1" + } } diff --git a/code/presets/create-react-app/package.json b/code/presets/create-react-app/package.json index 67039566e38..5818a767111 100644 --- a/code/presets/create-react-app/package.json +++ b/code/presets/create-react-app/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preset-create-react-app", - "version": "9.0.0-alpha.0", + "version": "9.0.0-alpha.1", "description": "Storybook for Create React App preset", "keywords": [ "storybook" diff --git a/code/presets/html-webpack/package.json b/code/presets/html-webpack/package.json index 60b93b6e7a8..78c8c9cb958 100644 --- a/code/presets/html-webpack/package.json +++ b/code/presets/html-webpack/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preset-html-webpack", - "version": "9.0.0-alpha.0", + "version": "9.0.0-alpha.1", "description": "Storybook for HTML: View HTML snippets in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/presets/preact-webpack/package.json b/code/presets/preact-webpack/package.json index 23db593d9f2..14bac4d9b6f 100644 --- a/code/presets/preact-webpack/package.json +++ b/code/presets/preact-webpack/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preset-preact-webpack", - "version": "9.0.0-alpha.0", + "version": "9.0.0-alpha.1", "description": "Storybook for Preact: Develop Preact Component in isolation.", "keywords": [ "storybook" diff --git a/code/presets/react-webpack/package.json b/code/presets/react-webpack/package.json index da60324d2ee..1dbd0ba8ac3 100644 --- a/code/presets/react-webpack/package.json +++ b/code/presets/react-webpack/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preset-react-webpack", - "version": "9.0.0-alpha.0", + "version": "9.0.0-alpha.1", "description": "Storybook for React: Develop React Component in isolation with Hot Reloading", "keywords": [ "storybook" diff --git a/code/presets/server-webpack/package.json b/code/presets/server-webpack/package.json index fbc2f723247..cbf68ff0685 100644 --- a/code/presets/server-webpack/package.json +++ b/code/presets/server-webpack/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preset-server-webpack", - "version": "9.0.0-alpha.0", + "version": "9.0.0-alpha.1", "description": "Storybook for Server: View HTML snippets from a server in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/presets/svelte-webpack/package.json b/code/presets/svelte-webpack/package.json index 6b3c0bcb917..1ebf9b74db4 100644 --- a/code/presets/svelte-webpack/package.json +++ b/code/presets/svelte-webpack/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preset-svelte-webpack", - "version": "9.0.0-alpha.0", + "version": "9.0.0-alpha.1", "description": "Storybook for Svelte: Develop Svelte Component in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/presets/vue3-webpack/package.json b/code/presets/vue3-webpack/package.json index 9426116d31f..12ccbe6cd96 100644 --- a/code/presets/vue3-webpack/package.json +++ b/code/presets/vue3-webpack/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preset-vue3-webpack", - "version": "9.0.0-alpha.0", + "version": "9.0.0-alpha.1", "description": "Storybook for Vue 3: Develop Vue 3 Components in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/renderers/html/package.json b/code/renderers/html/package.json index 4cdb645e55c..84c1426f637 100644 --- a/code/renderers/html/package.json +++ b/code/renderers/html/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/html", - "version": "9.0.0-alpha.0", + "version": "9.0.0-alpha.1", "description": "Storybook HTML renderer", "keywords": [ "storybook" diff --git a/code/renderers/preact/package.json b/code/renderers/preact/package.json index 4eabf9b0f61..62ab676fd81 100644 --- a/code/renderers/preact/package.json +++ b/code/renderers/preact/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preact", - "version": "9.0.0-alpha.0", + "version": "9.0.0-alpha.1", "description": "Storybook Preact renderer", "keywords": [ "storybook" diff --git a/code/renderers/react/package.json b/code/renderers/react/package.json index 9f77705b4d2..0a7a493db8f 100644 --- a/code/renderers/react/package.json +++ b/code/renderers/react/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/react", - "version": "9.0.0-alpha.0", + "version": "9.0.0-alpha.1", "description": "Storybook React renderer", "keywords": [ "storybook" diff --git a/code/renderers/server/package.json b/code/renderers/server/package.json index a637a12b27c..4d534ce5c80 100644 --- a/code/renderers/server/package.json +++ b/code/renderers/server/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/server", - "version": "9.0.0-alpha.0", + "version": "9.0.0-alpha.1", "description": "Storybook Server renderer", "keywords": [ "storybook" diff --git a/code/renderers/svelte/package.json b/code/renderers/svelte/package.json index 4396c3fe123..757b2dbe45a 100644 --- a/code/renderers/svelte/package.json +++ b/code/renderers/svelte/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/svelte", - "version": "9.0.0-alpha.0", + "version": "9.0.0-alpha.1", "description": "Storybook Svelte renderer", "keywords": [ "storybook" diff --git a/code/renderers/vue3/package.json b/code/renderers/vue3/package.json index 6f41cbe7af9..ed6e96fa992 100644 --- a/code/renderers/vue3/package.json +++ b/code/renderers/vue3/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/vue3", - "version": "9.0.0-alpha.0", + "version": "9.0.0-alpha.1", "description": "Storybook Vue 3 renderer", "keywords": [ "storybook" diff --git a/code/renderers/web-components/package.json b/code/renderers/web-components/package.json index 965d8464669..0c98766eb82 100644 --- a/code/renderers/web-components/package.json +++ b/code/renderers/web-components/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/web-components", - "version": "9.0.0-alpha.0", + "version": "9.0.0-alpha.1", "description": "Storybook web-components renderer", "keywords": [ "lit", From a937bc925229b70469dc313f0b929f296ce3a2df Mon Sep 17 00:00:00 2001 From: Bill Collins Date: Fri, 28 Feb 2025 14:47:02 +0000 Subject: [PATCH 009/108] Promote @storybook/global to full dependency in addon-a11y It appears as an import in the compiled code, so must be declared as a dependency --- code/addons/a11y/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/addons/a11y/package.json b/code/addons/a11y/package.json index 980f65a7acf..04a7daafc6e 100644 --- a/code/addons/a11y/package.json +++ b/code/addons/a11y/package.json @@ -67,11 +67,11 @@ }, "dependencies": { "@storybook/addon-highlight": "workspace:*", + "@storybook/global": "^5.0.0", "@storybook/test": "workspace:*", "axe-core": "^4.2.0" }, "devDependencies": { - "@storybook/global": "^5.0.0", "@storybook/icons": "^1.2.12", "@testing-library/react": "^14.0.0", "execa": "^9.5.2", From 29421c989cbcc6417bda7a14c4742de4d835f074 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Mon, 3 Mar 2025 09:10:49 +0100 Subject: [PATCH 010/108] Refactor consolidated-imports fix with improved error handling and Babel transformation --- .../fixes/consolidated-imports.test.ts | 222 ++++++++++++++++++ .../automigrate/fixes/consolidated-imports.ts | 146 ++++++++++++ .../src/automigrate/fixes/index.ts | 2 + 3 files changed, 370 insertions(+) create mode 100644 code/lib/cli-storybook/src/automigrate/fixes/consolidated-imports.test.ts create mode 100644 code/lib/cli-storybook/src/automigrate/fixes/consolidated-imports.ts diff --git a/code/lib/cli-storybook/src/automigrate/fixes/consolidated-imports.test.ts b/code/lib/cli-storybook/src/automigrate/fixes/consolidated-imports.test.ts new file mode 100644 index 00000000000..770a550ce5f --- /dev/null +++ b/code/lib/cli-storybook/src/automigrate/fixes/consolidated-imports.test.ts @@ -0,0 +1,222 @@ +import { readFile, writeFile } from 'node:fs/promises'; +import { join } from 'node:path'; + +import { describe, expect, it, vi } from 'vitest'; + +import type { Fix, RunOptions } from '../types'; +import { type ConsolidatedImportsOptions, consolidatedImports } from './consolidated-imports'; + +vi.mock('node:fs/promises'); +vi.mock('globby', () => ({ + globby: vi.fn(), +})); + +const mockPackageJson = { + dependencies: {}, + devDependencies: {}, +}; + +const mockRunOptions = { + packageManager: { + retrievePackageJson: async () => mockPackageJson, + } as any, + mainConfig: {} as any, + mainConfigPath: 'main.ts', + packageJson: mockPackageJson, +}; + +const check = async ({ contents, filePath }: { contents: string; filePath: string }) => { + vi.mocked(readFile).mockResolvedValue(contents); + + // eslint-disable-next-line depend/ban-dependencies + const { globby } = await import('globby'); + vi.mocked(globby).mockResolvedValue([filePath]); + + return consolidatedImports.check({ + ...mockRunOptions, + storybookVersion: '8.0.0', + }); +}; + +const run = async ({ contents, filePath }: { contents: string; filePath: string }) => { + vi.mocked(readFile).mockResolvedValue(contents); + + const result = await check({ contents, filePath }); + if (!result) { + throw new Error('No result from check'); + } + + await ( + consolidatedImports as Fix & { + run: (options: RunOptions) => Promise; + } + ).run({ + result, + dryRun: false, + ...mockRunOptions, + }); + + const writeFileMock = vi.mocked(writeFile); + if (!writeFileMock.mock.calls.length) { + throw new Error('writeFile was not called'); + } + return writeFileMock.mock.calls[0][1]; +}; + +const runWithError = async (result: ConsolidatedImportsOptions) => { + return ( + consolidatedImports as Fix & { + run: (options: RunOptions) => Promise; + } + ).run({ + result, + dryRun: false, + ...mockRunOptions, + }); +}; + +describe('check', () => { + it('should detect consolidated package imports', async () => { + const contents = ` + import { something } from '@storybook/components'; + import { other } from '@storybook/core-common'; + `; + const filePath = join('src', 'test.ts'); + + const result = await check({ contents, filePath }); + expect(result).toMatchObject({ + files: [filePath], + }); + }); + + it('should not detect non-consolidated package imports', async () => { + const contents = ` + import { something } from '@storybook/other-package'; + import { other } from 'some-other-package'; + `; + const filePath = join('src', 'test.ts'); + + const result = await check({ contents, filePath }); + expect(result).toBeNull(); + }); +}); + +describe('run-with-success', () => { + it('should transform import declarations', async () => { + const contents = ` + import { something } from '@storybook/components'; + import { other } from '@storybook/core-common'; + `; + const filePath = join('src', 'test.ts'); + + const transformed = await run({ contents, filePath }); + expect(transformed).toMatchInlineSnapshot(` + " + import { something } from 'storybook/internal/components'; + import { other } from 'storybook/internal/common'; + " + `); + }); + + it('should transform require calls', async () => { + const contents = ` + const something = require('@storybook/components'); + const other = require('@storybook/core-common'); + `; + const filePath = join('src', 'test.ts'); + + const transformed = await run({ contents, filePath }); + expect(transformed).toMatchInlineSnapshot(` + " + const something = require('storybook/internal/components'); + const other = require('storybook/internal/common'); + " + `); + }); + + it('should handle mixed import styles', async () => { + const contents = ` + import { something } from '@storybook/components'; + const other = require('@storybook/core-common'); + `; + const filePath = join('src', 'test.ts'); + + const transformed = await run({ contents, filePath }); + expect(transformed).toMatchInlineSnapshot(` + " + import { something } from 'storybook/internal/components'; + const other = require('storybook/internal/common'); + " + `); + }); + + it('should not transform non-consolidated package imports', async () => { + const contents = ` + import { something } from '@storybook/other-package'; + const other = require('some-other-package'); + `; + const filePath = join('src', 'test.ts'); + + const result = await check({ contents, filePath }); + expect(result).toBeNull(); + }); +}); + +describe('run-with-failure', () => { + it('should handle file read errors', async () => { + const filePath = join('src', 'test.ts'); + const readError = new Error('Failed to read file'); + vi.mocked(readFile).mockRejectedValueOnce(readError); + + const result = await check({ contents: '', filePath }); + if (!result) { + throw new Error('No result from check'); + } + + await expect(runWithError(result)).rejects.toThrow( + `Failed to process 1 files:\n- ${filePath}: Failed to read file` + ); + }); + + it('should handle file write errors', async () => { + const contents = `import { something } from '@storybook/components';`; + const filePath = join('src', 'test.ts'); + const writeError = new Error('Failed to write file'); + vi.mocked(writeFile).mockRejectedValueOnce(writeError); + + const result = await check({ contents, filePath }); + if (!result) { + throw new Error('No result from check'); + } + + await expect(runWithError(result)).rejects.toThrow( + `Failed to process 1 files:\n- ${filePath}: Failed to write file` + ); + }); + + it('should handle multiple file errors', async () => { + const file1 = join('src', 'test1.ts'); + const file2 = join('src', 'test2.ts'); + const readError1 = new Error('Failed to read file 1'); + const readError2 = new Error('Failed to read file 2'); + + vi.mocked(readFile).mockRejectedValueOnce(readError1).mockRejectedValueOnce(readError2); + + // eslint-disable-next-line depend/ban-dependencies + const { globby } = await import('globby'); + vi.mocked(globby).mockResolvedValue([file1, file2]); + + const result = await consolidatedImports.check({ + ...mockRunOptions, + storybookVersion: '8.0.0', + }); + + if (!result) { + throw new Error('No result from check'); + } + + await expect(runWithError(result)).rejects.toThrow( + `Failed to process 2 files:\n- ${file1}: Failed to read file 1\n- ${file2}: Failed to read file 2` + ); + }); +}); diff --git a/code/lib/cli-storybook/src/automigrate/fixes/consolidated-imports.ts b/code/lib/cli-storybook/src/automigrate/fixes/consolidated-imports.ts new file mode 100644 index 00000000000..3765fcbbbcd --- /dev/null +++ b/code/lib/cli-storybook/src/automigrate/fixes/consolidated-imports.ts @@ -0,0 +1,146 @@ +import { readFile, writeFile } from 'node:fs/promises'; + +import { type NodePath, generate, parser, types as t, traverse } from 'storybook/internal/babel'; +import { commonGlobOptions } from 'storybook/internal/common'; + +import pLimit from 'p-limit'; +import picocolors from 'picocolors'; +import { dedent } from 'ts-dedent'; + +import type { Fix } from '../types'; + +const consolidatedPackages = { + '@storybook/channels': 'storybook/internal/channels', + '@storybook/client-logger': 'storybook/internal/client-logger', + '@storybook/core-common': 'storybook/internal/common', + '@storybook/core-events': 'storybook/internal/core-events', + '@storybook/csf-tools': 'storybook/internal/csf-tools', + '@storybook/docs-tools': 'storybook/internal/docs-tools', + '@storybook/node-logger': 'storybook/internal/node-logger', + '@storybook/preview-api': 'storybook/internal/preview-api', + '@storybook/router': 'storybook/internal/router', + '@storybook/telemetry': 'storybook/internal/telemetry', + '@storybook/theming': 'storybook/internal/theming', + '@storybook/types': 'storybook/internal/types', + '@storybook/manager-api': 'storybook/internal/manager-api', + '@storybook/manager': 'storybook/internal/manager', + '@storybook/preview': 'storybook/internal/preview', + '@storybook/core-server': 'storybook/internal/core-server', + '@storybook/builder-manager': 'storybook/internal/builder-manager', + '@storybook/components': 'storybook/internal/components', +} as const; + +type ConsolidatedPackage = keyof typeof consolidatedPackages; + +export interface ConsolidatedImportsOptions { + files: string[]; +} + +function transformImports(source: string) { + const ast = parser.parse(source); + let hasChanges = false; + + traverse(ast, { + ImportDeclaration(path: NodePath) { + const importSource = path.node.source.value; + if (typeof importSource === 'string' && importSource in consolidatedPackages) { + path.node.source = t.stringLiteral( + consolidatedPackages[importSource as ConsolidatedPackage] + ); + hasChanges = true; + } + }, + CallExpression(path: NodePath) { + if ( + t.isIdentifier(path.node.callee, { name: 'require' }) && + path.node.arguments.length > 0 && + t.isStringLiteral(path.node.arguments[0]) + ) { + const arg = path.node.arguments[0]; + if (arg.value in consolidatedPackages) { + path.node.arguments[0] = t.stringLiteral( + consolidatedPackages[arg.value as ConsolidatedPackage] + ); + hasChanges = true; + } + } + }, + }); + + return hasChanges ? generate(ast).code : null; +} + +export const consolidatedImports: Fix = { + id: 'consolidated-imports', + versionRange: ['<8.0.0', '>=8.0.0'], + promptType: 'auto', + + async check({ packageManager }): Promise { + // eslint-disable-next-line depend/ban-dependencies + const { globby } = await import('globby'); + + const patterns = ['**/*.{js,jsx,ts,tsx}']; + const files = (await globby(patterns, { + ...commonGlobOptions(''), + ignore: ['**/node_modules/**', '**/dist/**', '**/build/**'], + })) as string[]; + + // Check if any files contain imports from consolidated packages + const filesWithConsolidatedImports: string[] = []; + + for (const file of files) { + const content = await readFile(file, 'utf-8'); + const hasConsolidatedImport = Object.keys(consolidatedPackages).some((pkg) => + content.includes(pkg) + ); + + if (hasConsolidatedImport) { + filesWithConsolidatedImports.push(file); + } + } + + return filesWithConsolidatedImports.length > 0 ? { files: filesWithConsolidatedImports } : null; + }, + + prompt({ files }) { + return dedent` + Found usage of consolidated Storybook packages that need to be updated to use internal paths: + ${files.map((file) => `- ${picocolors.cyan(file)}`).join('\n')} + + These packages have been consolidated into internal modules and should be imported from their new paths. + Would you like to update these imports automatically? + `; + }, + + async run({ dryRun, result: { files } }) { + const limit = pLimit(10); + const errors: { file: string; error: Error }[] = []; + + await Promise.all( + files.map((file) => + limit(async () => { + try { + const content = await readFile(file, 'utf-8'); + const transformed = transformImports(content); + + if (transformed && !dryRun) { + await writeFile(file, transformed); + } + } catch (error) { + // eslint-disable-next-line local-rules/no-uncategorized-errors + errors.push({ file, error: error instanceof Error ? error : new Error(String(error)) }); + } + }) + ) + ); + + if (errors.length > 0) { + // eslint-disable-next-line local-rules/no-uncategorized-errors + throw new Error( + `Failed to process ${errors.length} files:\n${errors + .map(({ file, error }) => `- ${file}: ${error.message}`) + .join('\n')}` + ); + } + }, +}; diff --git a/code/lib/cli-storybook/src/automigrate/fixes/index.ts b/code/lib/cli-storybook/src/automigrate/fixes/index.ts index c66b0106ce5..df10dea69a3 100644 --- a/code/lib/cli-storybook/src/automigrate/fixes/index.ts +++ b/code/lib/cli-storybook/src/automigrate/fixes/index.ts @@ -8,6 +8,7 @@ import { angularBuildersMultiproject } from './angular-builders-multiproject'; import { autodocsTags } from './autodocs-tags'; import { autodocsTrue } from './autodocs-true'; import { builderVite } from './builder-vite'; +import { consolidatedImports } from './consolidated-imports'; import { cra5 } from './cra5'; import { eslintPlugin } from './eslint-plugin'; import { initialGlobals } from './initial-globals'; @@ -68,6 +69,7 @@ export const allFixes: Fix[] = [ autodocsTags, initialGlobals, addonA11yAddonTest, + consolidatedImports, ]; export const initFixes: Fix[] = [eslintPlugin]; From a84971359407f969c5a98eb4fa7581a21adf0845 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Mon, 3 Mar 2025 20:53:12 +0100 Subject: [PATCH 011/108] Update yarn.lock --- code/yarn.lock | 4 ---- 1 file changed, 4 deletions(-) diff --git a/code/yarn.lock b/code/yarn.lock index f54c31cecb6..97f7aba178d 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -8058,7 +8058,6 @@ __metadata: resolve-url-loader: "npm:^5.0.0" sass-loader: "npm:^14.2.1" semver: "npm:^7.3.5" - sharp: "npm:^0.33.3" style-loader: "npm:^3.3.1" styled-jsx: "npm:^5.1.6" ts-dedent: "npm:^2.0.0" @@ -8072,9 +8071,6 @@ __metadata: react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta storybook: "workspace:^" webpack: ^5.0.0 - dependenciesMeta: - sharp: - optional: true peerDependenciesMeta: typescript: optional: true From c96ff63cd102c454bc91e3c2a02e1221b0d25a92 Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Wed, 5 Mar 2025 11:14:14 +0100 Subject: [PATCH 012/108] Fix check --- code/core/src/common/index.ts | 2 +- code/core/src/types/modules/core-common.ts | 3 ++- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/code/core/src/common/index.ts b/code/core/src/common/index.ts index 6700cdf14fa..8f73b0d4dea 100644 --- a/code/core/src/common/index.ts +++ b/code/core/src/common/index.ts @@ -47,4 +47,4 @@ export * from './js-package-manager'; export { versions }; -export { createFileSystemCache } from './utils/file-cache'; +export { createFileSystemCache, FileSystemCache } from './utils/file-cache'; diff --git a/code/core/src/types/modules/core-common.ts b/code/core/src/types/modules/core-common.ts index 135fd1cb5d1..b13f868e760 100644 --- a/code/core/src/types/modules/core-common.ts +++ b/code/core/src/types/modules/core-common.ts @@ -1,11 +1,12 @@ /* eslint-disable @typescript-eslint/naming-convention */ // should be node:http, but that caused the ui/manager to fail to build, might be able to switch this back once ui/manager is in the core +import type { FileSystemCache } from 'storybook/internal/common'; + import type { Server as HttpServer, IncomingMessage, ServerResponse } from 'http'; import type { Server as NetServer } from 'net'; import type { Options as TelejsonOptions } from 'telejson'; import type { PackageJson as PackageJsonFromTypeFest } from 'type-fest'; -import type { FileSystemCache } from '../../common/utils/file-cache'; import type { Indexer, StoriesEntry } from './indexer'; /** ⚠️ This file contains internal WIP types they MUST NOT be exported outside this package for now! */ From 557c3f05c4c1a913da053c3e3af10ab7483f9df6 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Wed, 5 Mar 2025 12:26:41 +0100 Subject: [PATCH 013/108] improve automigration --- .../fixes/consolidated-imports.test.ts | 145 ++++++++++-------- .../automigrate/fixes/consolidated-imports.ts | 17 +- 2 files changed, 91 insertions(+), 71 deletions(-) diff --git a/code/lib/cli-storybook/src/automigrate/fixes/consolidated-imports.test.ts b/code/lib/cli-storybook/src/automigrate/fixes/consolidated-imports.test.ts index 770a550ce5f..9f4d5d79f83 100644 --- a/code/lib/cli-storybook/src/automigrate/fixes/consolidated-imports.test.ts +++ b/code/lib/cli-storybook/src/automigrate/fixes/consolidated-imports.test.ts @@ -3,6 +3,8 @@ import { join } from 'node:path'; import { describe, expect, it, vi } from 'vitest'; +import { dedent } from 'ts-dedent'; + import type { Fix, RunOptions } from '../types'; import { type ConsolidatedImportsOptions, consolidatedImports } from './consolidated-imports'; @@ -25,12 +27,15 @@ const mockRunOptions = { packageJson: mockPackageJson, }; -const check = async ({ contents, filePath }: { contents: string; filePath: string }) => { - vi.mocked(readFile).mockResolvedValue(contents); - +const setupGlobby = async (files: string[]) => { // eslint-disable-next-line depend/ban-dependencies const { globby } = await import('globby'); - vi.mocked(globby).mockResolvedValue([filePath]); + vi.mocked(globby).mockResolvedValue(files); +}; + +const setupCheck = async (contents: string, files: string[]) => { + vi.mocked(readFile).mockResolvedValue(contents); + await setupGlobby(files); return consolidatedImports.check({ ...mockRunOptions, @@ -38,31 +43,6 @@ const check = async ({ contents, filePath }: { contents: string; filePath: strin }); }; -const run = async ({ contents, filePath }: { contents: string; filePath: string }) => { - vi.mocked(readFile).mockResolvedValue(contents); - - const result = await check({ contents, filePath }); - if (!result) { - throw new Error('No result from check'); - } - - await ( - consolidatedImports as Fix & { - run: (options: RunOptions) => Promise; - } - ).run({ - result, - dryRun: false, - ...mockRunOptions, - }); - - const writeFileMock = vi.mocked(writeFile); - if (!writeFileMock.mock.calls.length) { - throw new Error('writeFile was not called'); - } - return writeFileMock.mock.calls[0][1]; -}; - const runWithError = async (result: ConsolidatedImportsOptions) => { return ( consolidatedImports as Fix & { @@ -76,6 +56,22 @@ const runWithError = async (result: ConsolidatedImportsOptions) => { }; describe('check', () => { + it('should call globby with correct patterns', async () => { + const filePath = join('src', 'test.ts'); + const contents = `import { something } from '@storybook/components';`; + + await setupCheck(contents, [filePath]); + + // eslint-disable-next-line depend/ban-dependencies + const { globby } = await import('globby'); + expect(globby).toHaveBeenCalledWith( + ['**/*.{js,jsx,ts,tsx}'], + expect.objectContaining({ + ignore: ['**/node_modules/**', '**/dist/**', '**/build/**'], + }) + ); + }); + it('should detect consolidated package imports', async () => { const contents = ` import { something } from '@storybook/components'; @@ -83,7 +79,7 @@ describe('check', () => { `; const filePath = join('src', 'test.ts'); - const result = await check({ contents, filePath }); + const result = await setupCheck(contents, [filePath]); expect(result).toMatchObject({ files: [filePath], }); @@ -96,14 +92,44 @@ describe('check', () => { `; const filePath = join('src', 'test.ts'); - const result = await check({ contents, filePath }); + const result = await setupCheck(contents, [filePath]); expect(result).toBeNull(); }); }); describe('run-with-success', () => { + const run = async ({ contents, filePath }: { contents: string; filePath: string }) => { + vi.mocked(readFile).mockResolvedValue(contents); + await setupGlobby([filePath]); + + const result = await consolidatedImports.check({ + ...mockRunOptions, + storybookVersion: '8.0.0', + }); + + if (!result) { + throw new Error('No result from check'); + } + + await ( + consolidatedImports as Fix & { + run: (options: RunOptions) => Promise; + } + ).run({ + result, + dryRun: false, + ...mockRunOptions, + }); + + const writeFileMock = vi.mocked(writeFile); + if (!writeFileMock.mock.calls.length) { + throw new Error('writeFile was not called'); + } + return writeFileMock.mock.calls[0][1]; + }; + it('should transform import declarations', async () => { - const contents = ` + const contents = dedent` import { something } from '@storybook/components'; import { other } from '@storybook/core-common'; `; @@ -111,15 +137,13 @@ describe('run-with-success', () => { const transformed = await run({ contents, filePath }); expect(transformed).toMatchInlineSnapshot(` - " - import { something } from 'storybook/internal/components'; - import { other } from 'storybook/internal/common'; - " + "import { something } from "storybook/internal/components"; + import { other } from "storybook/internal/common";" `); }); it('should transform require calls', async () => { - const contents = ` + const contents = dedent` const something = require('@storybook/components'); const other = require('@storybook/core-common'); `; @@ -127,15 +151,13 @@ describe('run-with-success', () => { const transformed = await run({ contents, filePath }); expect(transformed).toMatchInlineSnapshot(` - " - const something = require('storybook/internal/components'); - const other = require('storybook/internal/common'); - " + "const something = require("storybook/internal/components"); + const other = require("storybook/internal/common");" `); }); it('should handle mixed import styles', async () => { - const contents = ` + const contents = dedent` import { something } from '@storybook/components'; const other = require('@storybook/core-common'); `; @@ -143,10 +165,8 @@ describe('run-with-success', () => { const transformed = await run({ contents, filePath }); expect(transformed).toMatchInlineSnapshot(` - " - import { something } from 'storybook/internal/components'; - const other = require('storybook/internal/common'); - " + "import { something } from "storybook/internal/components"; + const other = require("storybook/internal/common");" `); }); @@ -157,7 +177,7 @@ describe('run-with-success', () => { `; const filePath = join('src', 'test.ts'); - const result = await check({ contents, filePath }); + const result = await setupCheck(contents, [filePath]); expect(result).toBeNull(); }); }); @@ -165,14 +185,15 @@ describe('run-with-success', () => { describe('run-with-failure', () => { it('should handle file read errors', async () => { const filePath = join('src', 'test.ts'); - const readError = new Error('Failed to read file'); - vi.mocked(readFile).mockRejectedValueOnce(readError); + const contents = `import { something } from '@storybook/components';`; - const result = await check({ contents: '', filePath }); + const result = await setupCheck(contents, [filePath]); if (!result) { throw new Error('No result from check'); } + vi.mocked(readFile).mockRejectedValue(new Error('Failed to read file')); + await expect(runWithError(result)).rejects.toThrow( `Failed to process 1 files:\n- ${filePath}: Failed to read file` ); @@ -181,10 +202,9 @@ describe('run-with-failure', () => { it('should handle file write errors', async () => { const contents = `import { something } from '@storybook/components';`; const filePath = join('src', 'test.ts'); - const writeError = new Error('Failed to write file'); - vi.mocked(writeFile).mockRejectedValueOnce(writeError); + vi.mocked(writeFile).mockRejectedValueOnce(new Error('Failed to write file')); - const result = await check({ contents, filePath }); + const result = await setupCheck(contents, [filePath]); if (!result) { throw new Error('No result from check'); } @@ -197,26 +217,17 @@ describe('run-with-failure', () => { it('should handle multiple file errors', async () => { const file1 = join('src', 'test1.ts'); const file2 = join('src', 'test2.ts'); - const readError1 = new Error('Failed to read file 1'); - const readError2 = new Error('Failed to read file 2'); - - vi.mocked(readFile).mockRejectedValueOnce(readError1).mockRejectedValueOnce(readError2); - - // eslint-disable-next-line depend/ban-dependencies - const { globby } = await import('globby'); - vi.mocked(globby).mockResolvedValue([file1, file2]); - - const result = await consolidatedImports.check({ - ...mockRunOptions, - storybookVersion: '8.0.0', - }); + const contents = `import { something } from '@storybook/components';`; + const result = await setupCheck(contents, [file1, file2]); if (!result) { throw new Error('No result from check'); } + vi.mocked(readFile).mockRejectedValue(new Error('Failed to read file')); + await expect(runWithError(result)).rejects.toThrow( - `Failed to process 2 files:\n- ${file1}: Failed to read file 1\n- ${file2}: Failed to read file 2` + `Failed to process 2 files:\n- ${file1}: Failed to read file\n- ${file2}: Failed to read file` ); }); }); diff --git a/code/lib/cli-storybook/src/automigrate/fixes/consolidated-imports.ts b/code/lib/cli-storybook/src/automigrate/fixes/consolidated-imports.ts index 3765fcbbbcd..371a0608092 100644 --- a/code/lib/cli-storybook/src/automigrate/fixes/consolidated-imports.ts +++ b/code/lib/cli-storybook/src/automigrate/fixes/consolidated-imports.ts @@ -1,6 +1,6 @@ import { readFile, writeFile } from 'node:fs/promises'; -import { type NodePath, generate, parser, types as t, traverse } from 'storybook/internal/babel'; +import { type NodePath, parser, recast, types as t, traverse } from 'storybook/internal/babel'; import { commonGlobOptions } from 'storybook/internal/common'; import pLimit from 'p-limit'; @@ -37,7 +37,16 @@ export interface ConsolidatedImportsOptions { } function transformImports(source: string) { - const ast = parser.parse(source); + const ast = recast.parse(source, { + parser: { + parse(code: string) { + return parser.parse(code, { + sourceType: 'unambiguous', + plugins: ['typescript', 'jsx'], + }); + }, + }, + }); let hasChanges = false; traverse(ast, { @@ -67,7 +76,7 @@ function transformImports(source: string) { }, }); - return hasChanges ? generate(ast).code : null; + return hasChanges ? recast.print(ast).code : null; } export const consolidatedImports: Fix = { @@ -75,7 +84,7 @@ export const consolidatedImports: Fix = { versionRange: ['<8.0.0', '>=8.0.0'], promptType: 'auto', - async check({ packageManager }): Promise { + async check(): Promise { // eslint-disable-next-line depend/ban-dependencies const { globby } = await import('globby'); From 9bcd8544f12b85decf7a84c1cbc81c9036e96a29 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Wed, 5 Mar 2025 13:10:44 +0100 Subject: [PATCH 014/108] Fix: Dynamically import p-limit in consolidated imports --- .../cli-storybook/src/automigrate/fixes/consolidated-imports.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/lib/cli-storybook/src/automigrate/fixes/consolidated-imports.ts b/code/lib/cli-storybook/src/automigrate/fixes/consolidated-imports.ts index 371a0608092..47117f47bda 100644 --- a/code/lib/cli-storybook/src/automigrate/fixes/consolidated-imports.ts +++ b/code/lib/cli-storybook/src/automigrate/fixes/consolidated-imports.ts @@ -3,7 +3,6 @@ import { readFile, writeFile } from 'node:fs/promises'; import { type NodePath, parser, recast, types as t, traverse } from 'storybook/internal/babel'; import { commonGlobOptions } from 'storybook/internal/common'; -import pLimit from 'p-limit'; import picocolors from 'picocolors'; import { dedent } from 'ts-dedent'; @@ -122,6 +121,7 @@ export const consolidatedImports: Fix = { }, async run({ dryRun, result: { files } }) { + const pLimit = await import('p-limit'); const limit = pLimit(10); const errors: { file: string; error: Error }[] = []; From ded07062b063597a7e29fb11468904db6f043308 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Wed, 5 Mar 2025 13:12:41 +0100 Subject: [PATCH 015/108] Fix: Correct p-limit import syntax in consolidated imports --- .../cli-storybook/src/automigrate/fixes/consolidated-imports.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/lib/cli-storybook/src/automigrate/fixes/consolidated-imports.ts b/code/lib/cli-storybook/src/automigrate/fixes/consolidated-imports.ts index 47117f47bda..38fca54cfce 100644 --- a/code/lib/cli-storybook/src/automigrate/fixes/consolidated-imports.ts +++ b/code/lib/cli-storybook/src/automigrate/fixes/consolidated-imports.ts @@ -121,7 +121,7 @@ export const consolidatedImports: Fix = { }, async run({ dryRun, result: { files } }) { - const pLimit = await import('p-limit'); + const { default: pLimit } = await import('p-limit'); const limit = pLimit(10); const errors: { file: string; error: Error }[] = []; From ab2c87a473e04a6e4549e53b271e48ff5620982c Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Wed, 5 Mar 2025 13:29:51 +0100 Subject: [PATCH 016/108] Refactor: Extract consolidated packages into a separate helper module --- .../automigrate/fixes/consolidated-imports.ts | 24 +------------------ .../helpers/consolidated-packages.ts | 22 +++++++++++++++++ 2 files changed, 23 insertions(+), 23 deletions(-) create mode 100644 code/lib/cli-storybook/src/automigrate/helpers/consolidated-packages.ts diff --git a/code/lib/cli-storybook/src/automigrate/fixes/consolidated-imports.ts b/code/lib/cli-storybook/src/automigrate/fixes/consolidated-imports.ts index 38fca54cfce..3ad8b645f7f 100644 --- a/code/lib/cli-storybook/src/automigrate/fixes/consolidated-imports.ts +++ b/code/lib/cli-storybook/src/automigrate/fixes/consolidated-imports.ts @@ -6,31 +6,9 @@ import { commonGlobOptions } from 'storybook/internal/common'; import picocolors from 'picocolors'; import { dedent } from 'ts-dedent'; +import { type ConsolidatedPackage, consolidatedPackages } from '../helpers/consolidated-packages'; import type { Fix } from '../types'; -const consolidatedPackages = { - '@storybook/channels': 'storybook/internal/channels', - '@storybook/client-logger': 'storybook/internal/client-logger', - '@storybook/core-common': 'storybook/internal/common', - '@storybook/core-events': 'storybook/internal/core-events', - '@storybook/csf-tools': 'storybook/internal/csf-tools', - '@storybook/docs-tools': 'storybook/internal/docs-tools', - '@storybook/node-logger': 'storybook/internal/node-logger', - '@storybook/preview-api': 'storybook/internal/preview-api', - '@storybook/router': 'storybook/internal/router', - '@storybook/telemetry': 'storybook/internal/telemetry', - '@storybook/theming': 'storybook/internal/theming', - '@storybook/types': 'storybook/internal/types', - '@storybook/manager-api': 'storybook/internal/manager-api', - '@storybook/manager': 'storybook/internal/manager', - '@storybook/preview': 'storybook/internal/preview', - '@storybook/core-server': 'storybook/internal/core-server', - '@storybook/builder-manager': 'storybook/internal/builder-manager', - '@storybook/components': 'storybook/internal/components', -} as const; - -type ConsolidatedPackage = keyof typeof consolidatedPackages; - export interface ConsolidatedImportsOptions { files: string[]; } diff --git a/code/lib/cli-storybook/src/automigrate/helpers/consolidated-packages.ts b/code/lib/cli-storybook/src/automigrate/helpers/consolidated-packages.ts new file mode 100644 index 00000000000..767edf4d242 --- /dev/null +++ b/code/lib/cli-storybook/src/automigrate/helpers/consolidated-packages.ts @@ -0,0 +1,22 @@ +export const consolidatedPackages = { + '@storybook/channels': 'storybook/internal/channels', + '@storybook/client-logger': 'storybook/internal/client-logger', + '@storybook/core-common': 'storybook/internal/common', + '@storybook/core-events': 'storybook/internal/core-events', + '@storybook/csf-tools': 'storybook/internal/csf-tools', + '@storybook/docs-tools': 'storybook/internal/docs-tools', + '@storybook/node-logger': 'storybook/internal/node-logger', + '@storybook/preview-api': 'storybook/internal/preview-api', + '@storybook/router': 'storybook/internal/router', + '@storybook/telemetry': 'storybook/internal/telemetry', + '@storybook/theming': 'storybook/internal/theming', + '@storybook/types': 'storybook/internal/types', + '@storybook/manager-api': 'storybook/internal/manager-api', + '@storybook/manager': 'storybook/internal/manager', + '@storybook/preview': 'storybook/internal/preview', + '@storybook/core-server': 'storybook/internal/core-server', + '@storybook/builder-manager': 'storybook/internal/builder-manager', + '@storybook/components': 'storybook/internal/components', +} as const; + +export type ConsolidatedPackage = keyof typeof consolidatedPackages; From ecb0ad8c2eeb596e895549ef32443bb8f125b579 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Wed, 5 Mar 2025 14:23:05 +0100 Subject: [PATCH 017/108] Feature: Add consolidated package.json automigration fix This commit introduces a new automigration fix to handle consolidated Storybook packages in package.json files. The implementation includes: - A check to identify package.json files with consolidated packages - Transformation logic to remove consolidated packages - Adding the main Storybook package to devDependencies - Comprehensive test coverage for the new feature --- .../fixes/consolidated-package-json.test.ts | 239 ++++++++++++++++++ .../fixes/consolidated-package-json.ts | 135 ++++++++++ 2 files changed, 374 insertions(+) create mode 100644 code/lib/cli-storybook/src/automigrate/fixes/consolidated-package-json.test.ts create mode 100644 code/lib/cli-storybook/src/automigrate/fixes/consolidated-package-json.ts diff --git a/code/lib/cli-storybook/src/automigrate/fixes/consolidated-package-json.test.ts b/code/lib/cli-storybook/src/automigrate/fixes/consolidated-package-json.test.ts new file mode 100644 index 00000000000..498a1f927ee --- /dev/null +++ b/code/lib/cli-storybook/src/automigrate/fixes/consolidated-package-json.test.ts @@ -0,0 +1,239 @@ +import { readFile, writeFile } from 'node:fs/promises'; + +import { describe, expect, it, vi } from 'vitest'; + +import type { Fix, RunOptions } from '../types'; +import { + type ConsolidatedPackageJsonOptions, + consolidatedPackageJson, +} from './consolidated-package-json'; + +vi.mock('node:fs/promises'); +vi.mock('globby', () => ({ + globby: vi.fn(), +})); + +const mockPackageJson = { + dependencies: { + '@storybook/react': '^7.0.0', + '@storybook/core-common': '^7.0.0', + react: '^18.0.0', + }, + devDependencies: { + '@storybook/addon-essentials': '^7.0.0', + '@storybook/manager-api': '^7.0.0', + typescript: '^5.0.0', + }, +}; + +const mockRunOptions = { + packageManager: { + retrievePackageJson: async () => mockPackageJson, + } as any, + mainConfig: {} as any, + mainConfigPath: 'main.ts', + packageJson: mockPackageJson, +}; + +const setupGlobby = async (files: string[]) => { + // eslint-disable-next-line depend/ban-dependencies + const { globby } = await import('globby'); + vi.mocked(globby).mockResolvedValue(files); +}; + +const setupCheck = async ( + contents: string, + files: string[] +): Promise => { + vi.mocked(readFile).mockResolvedValue(contents); + await setupGlobby(files); + + return consolidatedPackageJson.check({ + ...mockRunOptions, + storybookVersion: '8.0.0', + }); +}; + +const runWithError = async (result: ConsolidatedPackageJsonOptions) => { + return ( + consolidatedPackageJson as Fix & { + run: (options: RunOptions) => Promise; + } + ).run({ + result, + dryRun: false, + ...mockRunOptions, + }); +}; + +describe('check', () => { + it('should call globby with correct patterns', async () => { + const filePath = 'test/package.json'; + const contents = JSON.stringify(mockPackageJson); + + await setupCheck(contents, [filePath]); + + // eslint-disable-next-line depend/ban-dependencies + const { globby } = await import('globby'); + expect(globby).toHaveBeenCalledWith( + ['**/package.json'], + expect.objectContaining({ + ignore: ['**/node_modules/**'], + }) + ); + }); + + it('should detect consolidated packages', async () => { + const contents = JSON.stringify(mockPackageJson); + const filePath = 'test/package.json'; + + const result = await setupCheck(contents, [filePath]); + expect(result).toMatchObject({ + files: [filePath], + }); + }); + + it('should not detect non-consolidated packages', async () => { + const packageJsonWithoutConsolidated = { + dependencies: { + react: '^18.0.0', + }, + devDependencies: { + typescript: '^5.0.0', + }, + }; + const contents = JSON.stringify(packageJsonWithoutConsolidated); + const filePath = 'test/package.json'; + + const result = await setupCheck(contents, [filePath]); + expect(result).toBeNull(); + }); +}); + +describe('run-with-success', () => { + const run = async ({ contents, filePath }: { contents: string; filePath: string }) => { + vi.mocked(readFile).mockResolvedValue(contents); + await setupGlobby([filePath]); + + const result = await consolidatedPackageJson.check({ + ...mockRunOptions, + storybookVersion: '8.0.0', + }); + + if (!result) { + throw new Error('No result from check'); + } + + await ( + consolidatedPackageJson as Fix & { + run: (options: RunOptions) => Promise; + } + ).run({ + result, + dryRun: false, + ...mockRunOptions, + }); + + const writeFileMock = vi.mocked(writeFile); + if (!writeFileMock.mock.calls.length) { + throw new Error('writeFile was not called'); + } + return writeFileMock.mock.calls[0][1]; + }; + + it('should remove consolidated packages and add storybook to devDependencies', async () => { + const contents = JSON.stringify(mockPackageJson); + const filePath = 'test/package.json'; + + const transformed = await run({ contents, filePath }); + expect(transformed).toMatchInlineSnapshot(` + "{ + "dependencies": { + "@storybook/react": "^7.0.0", + "react": "^18.0.0" + }, + "devDependencies": { + "@storybook/addon-essentials": "^7.0.0", + "typescript": "^5.0.0", + "storybook": "^8.0.0" + } + }" + `); + }); + + it('should not write files in dry run mode', async () => { + const contents = JSON.stringify(mockPackageJson); + const filePath = 'test/package.json'; + + const result = await consolidatedPackageJson.check({ + ...mockRunOptions, + storybookVersion: '8.0.0', + }); + + if (!result) { + throw new Error('No result from check'); + } + + await ( + consolidatedPackageJson as Fix & { + run: (options: RunOptions) => Promise; + } + ).run({ + result, + dryRun: true, + ...mockRunOptions, + }); + + expect(writeFile).not.toHaveBeenCalled(); + }); +}); + +describe('run-with-failure', () => { + it('should handle file read errors', async () => { + const filePath = 'test/package.json'; + const contents = JSON.stringify(mockPackageJson); + + const result = await setupCheck(contents, [filePath]); + if (!result) { + throw new Error('No result from check'); + } + + vi.mocked(readFile).mockRejectedValue(new Error('Failed to read file')); + + await expect(runWithError(result)).rejects.toThrow( + `Failed to process 1 files:\n- ${filePath}: Failed to read file` + ); + }); + + it('should handle file write errors', async () => { + const contents = JSON.stringify(mockPackageJson); + const filePath = 'test/package.json'; + vi.mocked(writeFile).mockRejectedValueOnce(new Error('Failed to write file')); + + const result = await setupCheck(contents, [filePath]); + if (!result) { + throw new Error('No result from check'); + } + + await expect(runWithError(result)).rejects.toThrow( + `Failed to process 1 files:\n- ${filePath}: Failed to write file` + ); + }); + + it('should handle multiple file errors', async () => { + const file1 = 'test1/package.json'; + const file2 = 'test2/package.json'; + const contents = JSON.stringify(mockPackageJson); + + const result = await setupCheck(contents, [file1, file2]); + if (!result) { + throw new Error('No result from check'); + } + + vi.mocked(readFile).mockRejectedValue(new Error('Failed to read file')); + + await expect(runWithError(result)).rejects.toThrow( + `Failed to process 2 files:\n- ${file1}: Failed to read file\n- ${file2}: Failed to read file` + ); + }); +}); diff --git a/code/lib/cli-storybook/src/automigrate/fixes/consolidated-package-json.ts b/code/lib/cli-storybook/src/automigrate/fixes/consolidated-package-json.ts new file mode 100644 index 00000000000..360a7a120d1 --- /dev/null +++ b/code/lib/cli-storybook/src/automigrate/fixes/consolidated-package-json.ts @@ -0,0 +1,135 @@ +import { readFile, writeFile } from 'node:fs/promises'; +import { join } from 'node:path'; + +import { commonGlobOptions, getProjectRoot } from 'storybook/internal/common'; + +import picocolors from 'picocolors'; +import { dedent } from 'ts-dedent'; + +import { type ConsolidatedPackage, consolidatedPackages } from '../helpers/consolidated-packages'; +import type { Fix } from '../types'; + +export interface ConsolidatedPackageJsonOptions { + files: string[]; +} + +function transformPackageJson(content: string): string | null { + const packageJson = JSON.parse(content); + let hasChanges = false; + + // Check dependencies + if (packageJson.dependencies) { + for (const [dep, version] of Object.entries(packageJson.dependencies)) { + if (dep in consolidatedPackages) { + delete packageJson.dependencies[dep]; + hasChanges = true; + } + } + } + + // Check devDependencies + if (packageJson.devDependencies) { + for (const [dep, version] of Object.entries(packageJson.devDependencies)) { + if (dep in consolidatedPackages) { + delete packageJson.devDependencies[dep]; + hasChanges = true; + } + } + } + + // Ensure storybook is in devDependencies + if (!packageJson.devDependencies) { + packageJson.devDependencies = {}; + } + if (!packageJson.devDependencies.storybook) { + packageJson.devDependencies.storybook = '^8.0.0'; + hasChanges = true; + } + + return hasChanges ? JSON.stringify(packageJson, null, 2) : null; +} + +export const consolidatedPackageJson: Fix = { + id: 'consolidated-package-json', + versionRange: ['<8.0.0', '>=8.0.0'], + promptType: 'auto', + + async check(): Promise { + // eslint-disable-next-line depend/ban-dependencies + const { globby } = await import('globby'); + + const projectRoot = getProjectRoot(); + const patterns = ['**/package.json']; + const files = (await globby(patterns, { + ...commonGlobOptions(''), + ignore: ['**/node_modules/**'], + cwd: projectRoot, + })) as string[]; + + // Check if any package.json files contain consolidated packages + const filesWithConsolidatedPackages: string[] = []; + + for (const file of files) { + const content = await readFile(file, 'utf-8'); + const packageJson = JSON.parse(content); + const hasConsolidatedPackage = Object.keys(consolidatedPackages).some((pkg) => { + return ( + (packageJson.dependencies && pkg in packageJson.dependencies) || + (packageJson.devDependencies && pkg in packageJson.devDependencies) + ); + }); + + if (hasConsolidatedPackage) { + filesWithConsolidatedPackages.push(file); + } + } + + return filesWithConsolidatedPackages.length > 0 + ? { files: filesWithConsolidatedPackages } + : null; + }, + + prompt({ files }) { + return dedent` + Found package.json files that contain consolidated Storybook packages that need to be updated: + ${files.map((file) => `- ${picocolors.cyan(file)}`).join('\n')} + + These packages have been consolidated into the main storybook package and should be removed. + The main storybook package will be added to devDependencies if not already present. + Would you like to update these package.json files automatically? + `; + }, + + async run({ dryRun, result: { files } }) { + const { default: pLimit } = await import('p-limit'); + const limit = pLimit(10); + const errors: { file: string; error: Error }[] = []; + + await Promise.all( + files.map((file) => + limit(async () => { + try { + const content = await readFile(file, 'utf-8'); + const transformed = transformPackageJson(content); + + if (transformed && !dryRun) { + await writeFile(file, transformed); + } + } catch (error) { + // eslint-disable-next-line local-rules/no-uncategorized-errors + errors.push({ file, error: error instanceof Error ? error : new Error(String(error)) }); + } + }) + ) + ); + + if (errors.length > 0) { + // eslint-disable-next-line local-rules/no-uncategorized-errors + throw new Error( + `Failed to process ${errors.length} files:\n${errors + .map(({ file, error }) => `- ${file}: ${error.message}`) + .join('\n')}` + ); + } + }, +}; From 54ecfe5288cb7df1eee8f8e7ce84e9e65ccfb37a Mon Sep 17 00:00:00 2001 From: storybook-bot <32066757+storybook-bot@users.noreply.github.com> Date: Wed, 5 Mar 2025 13:44:04 +0000 Subject: [PATCH 018/108] Write changelog for 9.0.0-alpha.2 [skip ci] --- CHANGELOG.prerelease.md | 18 ++++++++++++++++++ code/package.json | 3 ++- docs/versions/next.json | 2 +- 3 files changed, 21 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.prerelease.md b/CHANGELOG.prerelease.md index 8f3fca0c6c3..6b5ffbc6fcf 100644 --- a/CHANGELOG.prerelease.md +++ b/CHANGELOG.prerelease.md @@ -1,3 +1,21 @@ +## 9.0.0-alpha.2 + +- AutoBlocker: Add major version upgrade blocker - [#30714](https://github.com/storybookjs/storybook/pull/30714), thanks @ndelangen! +- CLI: Add index command / API - [#30071](https://github.com/storybookjs/storybook/pull/30071), thanks @shilman! +- CSF Factories: Align addon-essentials import with other addons - [#30716](https://github.com/storybookjs/storybook/pull/30716), thanks @kasperpeulen! +- Core: Move @storybook/instrumenter into core - [#30740](https://github.com/storybookjs/storybook/pull/30740), thanks @valentinpalkovic! +- Core: Support TS3.8+ again - [#30700](https://github.com/storybookjs/storybook/pull/30700), thanks @kasperpeulen! +- Maintenance: Merge `@storybook/core` with `storybook` - [#30168](https://github.com/storybookjs/storybook/pull/30168), thanks @ndelangen! +- Maintenance: Remove deprecated packages - [#30690](https://github.com/storybookjs/storybook/pull/30690), thanks @ndelangen! +- Manager: Add Content-Type to prevent reliance on content type sniffing, fixing Cloud IDEs - [#30606](https://github.com/storybookjs/storybook/pull/30606), thanks @GCHQDeveloper548! +- Next: Support Next 15.2 - [#30702](https://github.com/storybookjs/storybook/pull/30702), thanks @kasperpeulen! +- React: Export returntype of ReactMeta#story - [#30580](https://github.com/storybookjs/storybook/pull/30580), thanks @mrginglymus! +- Revert "CLI: Don't initially select Documentation and Testing features" - [#30694](https://github.com/storybookjs/storybook/pull/30694), thanks @shilman! +- Test Addon: Stabilize and remove experimental status - [#30727](https://github.com/storybookjs/storybook/pull/30727), thanks @valentinpalkovic! +- Typescript: Drop Typescript < 4.9 support - [#30736](https://github.com/storybookjs/storybook/pull/30736), thanks @valentinpalkovic! +- Vite: Improve handling of preview annotations - [#28798](https://github.com/storybookjs/storybook/pull/28798), thanks @tobiasdiez! +- Vite: Include `node_modules` in stats file - [#30711](https://github.com/storybookjs/storybook/pull/30711), thanks @JReinhold! + ## 9.0.0-alpha.1 - CLI: Install prereleases of `@chromatic-com/storybook` - [#30662](https://github.com/storybookjs/storybook/pull/30662), thanks @JReinhold! diff --git a/code/package.json b/code/package.json index 47e728552f2..c69dbef2536 100644 --- a/code/package.json +++ b/code/package.json @@ -298,5 +298,6 @@ "Dependency Upgrades" ] ] - } + }, + "deferredNextVersion": "9.0.0-alpha.2" } diff --git a/docs/versions/next.json b/docs/versions/next.json index 55568a82832..eccb6d96066 100644 --- a/docs/versions/next.json +++ b/docs/versions/next.json @@ -1 +1 @@ -{"version":"9.0.0-alpha.1","info":{"plain":"- CLI: Install prereleases of `@chromatic-com/storybook` - [#30662](https://github.com/storybookjs/storybook/pull/30662), thanks @JReinhold!\n- CSF: Only export definePreview from the framework - [#30676](https://github.com/storybookjs/storybook/pull/30676), thanks @kasperpeulen!\n- Codemod: Only remove types when they are unused - [#30644](https://github.com/storybookjs/storybook/pull/30644), thanks @yannbf!\n- Dependencies: Upgrades - [#30515](https://github.com/storybookjs/storybook/pull/30515), thanks @ndelangen!"}} +{"version":"9.0.0-alpha.2","info":{"plain":"- AutoBlocker: Add major version upgrade blocker - [#30714](https://github.com/storybookjs/storybook/pull/30714), thanks @ndelangen!\n- CLI: Add index command / API - [#30071](https://github.com/storybookjs/storybook/pull/30071), thanks @shilman!\n- CSF Factories: Align addon-essentials import with other addons - [#30716](https://github.com/storybookjs/storybook/pull/30716), thanks @kasperpeulen!\n- Core: Move @storybook/instrumenter into core - [#30740](https://github.com/storybookjs/storybook/pull/30740), thanks @valentinpalkovic!\n- Core: Support TS3.8+ again - [#30700](https://github.com/storybookjs/storybook/pull/30700), thanks @kasperpeulen!\n- Maintenance: Merge `@storybook/core` with `storybook` - [#30168](https://github.com/storybookjs/storybook/pull/30168), thanks @ndelangen!\n- Maintenance: Remove deprecated packages - [#30690](https://github.com/storybookjs/storybook/pull/30690), thanks @ndelangen!\n- Manager: Add Content-Type to prevent reliance on content type sniffing, fixing Cloud IDEs - [#30606](https://github.com/storybookjs/storybook/pull/30606), thanks @GCHQDeveloper548!\n- Next: Support Next 15.2 - [#30702](https://github.com/storybookjs/storybook/pull/30702), thanks @kasperpeulen!\n- React: Export returntype of ReactMeta#story - [#30580](https://github.com/storybookjs/storybook/pull/30580), thanks @mrginglymus!\n- Revert \\\"CLI: Don't initially select Documentation and Testing features\\\" - [#30694](https://github.com/storybookjs/storybook/pull/30694), thanks @shilman!\n- Test Addon: Stabilize and remove experimental status - [#30727](https://github.com/storybookjs/storybook/pull/30727), thanks @valentinpalkovic!\n- Typescript: Drop Typescript < 4.9 support - [#30736](https://github.com/storybookjs/storybook/pull/30736), thanks @valentinpalkovic!\n- Vite: Improve handling of preview annotations - [#28798](https://github.com/storybookjs/storybook/pull/28798), thanks @tobiasdiez!\n- Vite: Include `node_modules` in stats file - [#30711](https://github.com/storybookjs/storybook/pull/30711), thanks @JReinhold!"}} From b34c50a37bb2761112add0f417bc587923ceab0c Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Wed, 5 Mar 2025 15:28:42 +0100 Subject: [PATCH 019/108] Refactor: Remove unused import in consolidated package.json automigration --- .../src/automigrate/fixes/consolidated-package-json.ts | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/code/lib/cli-storybook/src/automigrate/fixes/consolidated-package-json.ts b/code/lib/cli-storybook/src/automigrate/fixes/consolidated-package-json.ts index 360a7a120d1..bfd9dff52e9 100644 --- a/code/lib/cli-storybook/src/automigrate/fixes/consolidated-package-json.ts +++ b/code/lib/cli-storybook/src/automigrate/fixes/consolidated-package-json.ts @@ -1,12 +1,11 @@ import { readFile, writeFile } from 'node:fs/promises'; -import { join } from 'node:path'; import { commonGlobOptions, getProjectRoot } from 'storybook/internal/common'; import picocolors from 'picocolors'; import { dedent } from 'ts-dedent'; -import { type ConsolidatedPackage, consolidatedPackages } from '../helpers/consolidated-packages'; +import { consolidatedPackages } from '../helpers/consolidated-packages'; import type { Fix } from '../types'; export interface ConsolidatedPackageJsonOptions { @@ -51,7 +50,7 @@ function transformPackageJson(content: string): string | null { export const consolidatedPackageJson: Fix = { id: 'consolidated-package-json', - versionRange: ['<8.0.0', '>=8.0.0'], + versionRange: ['<9.0.0', '>=9.0.0'], promptType: 'auto', async check(): Promise { From 0064b857f6edb48c296e7c7262d68ec72cf1ec87 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Wed, 5 Mar 2025 15:29:43 +0100 Subject: [PATCH 020/108] Automigrate: Add consolidated package.json fix to allFixes array --- code/lib/cli-storybook/src/automigrate/fixes/index.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/code/lib/cli-storybook/src/automigrate/fixes/index.ts b/code/lib/cli-storybook/src/automigrate/fixes/index.ts index 1e17b1f3b89..13bc30f2158 100644 --- a/code/lib/cli-storybook/src/automigrate/fixes/index.ts +++ b/code/lib/cli-storybook/src/automigrate/fixes/index.ts @@ -10,6 +10,7 @@ import { autodocsTags } from './autodocs-tags'; import { autodocsTrue } from './autodocs-true'; import { builderVite } from './builder-vite'; import { consolidatedImports } from './consolidated-imports'; +import { consolidatedPackageJson } from './consolidated-package-json'; import { cra5 } from './cra5'; import { eslintPlugin } from './eslint-plugin'; import { initialGlobals } from './initial-globals'; @@ -70,6 +71,7 @@ export const allFixes: Fix[] = [ autodocsTags, initialGlobals, addonA11yAddonTest, + consolidatedPackageJson, consolidatedImports, addonExperimentalTest, ]; From 6483b3955f2cd7b55e9be17b153cb1e1b699d5d9 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Mon, 3 Mar 2025 21:26:43 +0100 Subject: [PATCH 021/108] Core: Move @storybook/test into storybook --- code/core/package.json | 10 ++- code/core/scripts/entries.ts | 1 + code/{lib => core/src}/test/README.md | 16 +--- .../{lib/test/src => core/src/test}/expect.ts | 0 .../test/src => core/src/test}/index.test.ts | 0 code/{lib/test/src => core/src/test}/index.ts | 0 .../test/src => core/src/test}/spy.test.ts | 0 code/{lib/test/src => core/src/test}/spy.ts | 0 .../src => core/src/test}/testing-library.ts | 0 code/{lib/test/src => core/src/test}/utils.ts | 0 .../template/stories/before-each.stories.ts | 0 .../destructuring-not-transpiled.stories.ts | 0 .../stories/loader-enhancements.stories.ts | 0 .../stories/module-mocking.stories.ts | 0 .../template/stories/mount-in-play.stories.ts | 0 .../stories/order-of-hooks.stories.ts | 2 +- code/lib/test/package.json | 84 ------------------- code/lib/test/project.json | 8 -- code/lib/test/template/stories/utils.mock.ts | 5 -- code/lib/test/template/stories/utils.ts | 1 - code/lib/test/tsconfig.json | 5 -- code/lib/test/vitest.config.ts | 10 --- 22 files changed, 13 insertions(+), 129 deletions(-) rename code/{lib => core/src}/test/README.md (67%) rename code/{lib/test/src => core/src/test}/expect.ts (100%) rename code/{lib/test/src => core/src/test}/index.test.ts (100%) rename code/{lib/test/src => core/src/test}/index.ts (100%) rename code/{lib/test/src => core/src/test}/spy.test.ts (100%) rename code/{lib/test/src => core/src/test}/spy.ts (100%) rename code/{lib/test/src => core/src/test}/testing-library.ts (100%) rename code/{lib/test/src => core/src/test}/utils.ts (100%) rename code/{lib/test => core}/template/stories/before-each.stories.ts (100%) rename code/{lib/test => core}/template/stories/destructuring-not-transpiled.stories.ts (100%) rename code/{lib/test => core}/template/stories/loader-enhancements.stories.ts (100%) rename code/{lib/test => core}/template/stories/module-mocking.stories.ts (100%) rename code/{lib/test => core}/template/stories/mount-in-play.stories.ts (100%) rename code/{lib/test => core}/template/stories/order-of-hooks.stories.ts (94%) delete mode 100644 code/lib/test/package.json delete mode 100644 code/lib/test/project.json delete mode 100644 code/lib/test/template/stories/utils.mock.ts delete mode 100644 code/lib/test/template/stories/utils.ts delete mode 100644 code/lib/test/tsconfig.json delete mode 100644 code/lib/test/vitest.config.ts diff --git a/code/core/package.json b/code/core/package.json index abaacdb70a6..7466dd601c0 100644 --- a/code/core/package.json +++ b/code/core/package.json @@ -280,6 +280,9 @@ ], "internal/instrumenter": [ "./dist/instrumenter/index.d.ts" + ], + "test": [ + "./dist/test/index.d.ts" ] } }, @@ -295,6 +298,9 @@ "prep": "jiti ./scripts/prep.ts" }, "dependencies": { + "@testing-library/dom": "10.4.0", + "@testing-library/jest-dom": "6.5.0", + "@testing-library/user-event": "14.5.2", "better-opn": "^3.0.2", "browser-assert": "^1.2.1", "esbuild": "^0.18.0 || ^0.19.0 || ^0.20.0 || ^0.21.0 || ^0.22.0 || ^0.23.0 || ^0.24.0 || ^0.25.0", @@ -349,6 +355,7 @@ "@types/react-transition-group": "^4", "@types/semver": "^7.5.8", "@types/ws": "^8", + "@vitest/spy": "^2.0.5", "@vitest/utils": "^2.1.1", "@yarnpkg/esbuild-plugin-pnp": "^3.0.0-rc.10", "@yarnpkg/fslib": "2.10.3", @@ -359,6 +366,7 @@ "boxen": "^7.1.1", "browser-dtector": "^3.4.0", "camelcase": "^8.0.0", + "chai": "^5.1.1", "cli-table3": "^0.6.1", "commander": "^12.1.0", "comment-parser": "^1.4.1", @@ -423,7 +431,7 @@ "strip-json-comments": "^5.0.1", "telejson": "^7.2.0", "tiny-invariant": "^1.3.1", - "tinyspy": "^2.2.0", + "tinyspy": "^3.0.2", "ts-dedent": "^2.0.0", "tsconfig-paths": "^4.2.0", "type-fest": "^4.18.1", diff --git a/code/core/scripts/entries.ts b/code/core/scripts/entries.ts index 40396913186..d3f3bdd7239 100644 --- a/code/core/scripts/entries.ts +++ b/code/core/scripts/entries.ts @@ -50,6 +50,7 @@ export const getEntries = (cwd: string) => { define('src/bin/index.ts', ['node'], false), define('src/instrumenter/index.ts', ['browser', 'node'], true), + define('src/test/index.ts', ['browser'], true), ]; }; diff --git a/code/lib/test/README.md b/code/core/src/test/README.md similarity index 67% rename from code/lib/test/README.md rename to code/core/src/test/README.md index 81efc0635b0..a823cad323c 100644 --- a/code/lib/test/README.md +++ b/code/core/src/test/README.md @@ -1,18 +1,6 @@ # Storybook Test -The `@storybook/test` package contains utilities for testing your stories inside `play` functions. - -## Installation - -Install the package by adding the `@storybook/test` dev dependency: - -```sh -npm install -D @storybook/test -pnpm add -D @storybook/test -yarn add -D @storybook/test -``` - -Note that this package is not an addon, so you don't have to add it to your `main.js/main.ts` file. +The `storybook/test` package contains utilities for testing your stories inside `play` functions. ## Usage @@ -21,7 +9,7 @@ The instrumentation makes sure you can debug those methods in the [addon-interac ```ts // Button.stories.ts -import { expect, fn, userEvent, within } from '@storybook/test'; +import { expect, fn, userEvent, within } from 'storybook/test'; import { Button } from './Button'; export default { diff --git a/code/lib/test/src/expect.ts b/code/core/src/test/expect.ts similarity index 100% rename from code/lib/test/src/expect.ts rename to code/core/src/test/expect.ts diff --git a/code/lib/test/src/index.test.ts b/code/core/src/test/index.test.ts similarity index 100% rename from code/lib/test/src/index.test.ts rename to code/core/src/test/index.test.ts diff --git a/code/lib/test/src/index.ts b/code/core/src/test/index.ts similarity index 100% rename from code/lib/test/src/index.ts rename to code/core/src/test/index.ts diff --git a/code/lib/test/src/spy.test.ts b/code/core/src/test/spy.test.ts similarity index 100% rename from code/lib/test/src/spy.test.ts rename to code/core/src/test/spy.test.ts diff --git a/code/lib/test/src/spy.ts b/code/core/src/test/spy.ts similarity index 100% rename from code/lib/test/src/spy.ts rename to code/core/src/test/spy.ts diff --git a/code/lib/test/src/testing-library.ts b/code/core/src/test/testing-library.ts similarity index 100% rename from code/lib/test/src/testing-library.ts rename to code/core/src/test/testing-library.ts diff --git a/code/lib/test/src/utils.ts b/code/core/src/test/utils.ts similarity index 100% rename from code/lib/test/src/utils.ts rename to code/core/src/test/utils.ts diff --git a/code/lib/test/template/stories/before-each.stories.ts b/code/core/template/stories/before-each.stories.ts similarity index 100% rename from code/lib/test/template/stories/before-each.stories.ts rename to code/core/template/stories/before-each.stories.ts diff --git a/code/lib/test/template/stories/destructuring-not-transpiled.stories.ts b/code/core/template/stories/destructuring-not-transpiled.stories.ts similarity index 100% rename from code/lib/test/template/stories/destructuring-not-transpiled.stories.ts rename to code/core/template/stories/destructuring-not-transpiled.stories.ts diff --git a/code/lib/test/template/stories/loader-enhancements.stories.ts b/code/core/template/stories/loader-enhancements.stories.ts similarity index 100% rename from code/lib/test/template/stories/loader-enhancements.stories.ts rename to code/core/template/stories/loader-enhancements.stories.ts diff --git a/code/lib/test/template/stories/module-mocking.stories.ts b/code/core/template/stories/module-mocking.stories.ts similarity index 100% rename from code/lib/test/template/stories/module-mocking.stories.ts rename to code/core/template/stories/module-mocking.stories.ts diff --git a/code/lib/test/template/stories/mount-in-play.stories.ts b/code/core/template/stories/mount-in-play.stories.ts similarity index 100% rename from code/lib/test/template/stories/mount-in-play.stories.ts rename to code/core/template/stories/mount-in-play.stories.ts diff --git a/code/lib/test/template/stories/order-of-hooks.stories.ts b/code/core/template/stories/order-of-hooks.stories.ts similarity index 94% rename from code/lib/test/template/stories/order-of-hooks.stories.ts rename to code/core/template/stories/order-of-hooks.stories.ts index f3e965dee1b..8306457cf14 100644 --- a/code/lib/test/template/stories/order-of-hooks.stories.ts +++ b/code/core/template/stories/order-of-hooks.stories.ts @@ -1,4 +1,4 @@ -import { expect, fn, getByRole, mocked, spyOn, userEvent } from '@storybook/test'; +import { expect, getByRole, mocked, spyOn, userEvent } from 'storybook/test'; const meta = { component: globalThis.Components.Button, diff --git a/code/lib/test/package.json b/code/lib/test/package.json deleted file mode 100644 index d06f05dd888..00000000000 --- a/code/lib/test/package.json +++ /dev/null @@ -1,84 +0,0 @@ -{ - "name": "@storybook/test", - "version": "9.0.0-alpha.1", - "description": "", - "keywords": [ - "storybook" - ], - "homepage": "https://github.com/storybookjs/storybook/tree/next/code/lib/test", - "bugs": { - "url": "https://github.com/storybookjs/storybook/issues" - }, - "repository": { - "type": "git", - "url": "https://github.com/storybookjs/storybook.git", - "directory": "code/lib/test" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/storybook" - }, - "license": "MIT", - "sideEffects": true, - "exports": { - ".": { - "types": "./dist/index.d.ts", - "node": "./dist/index.js", - "import": "./dist/index.mjs", - "require": "./dist/index.js" - }, - "./package.json": "./package.json" - }, - "main": "dist/index.js", - "module": "dist/index.mjs", - "types": "dist/index.d.ts", - "files": [ - "dist/**/*", - "README.md", - "*.js", - "*.d.ts" - ], - "scripts": { - "check": "jiti ../../../scripts/prepare/check.ts", - "prep": "jiti ../../../scripts/prepare/bundle.ts" - }, - "dependencies": { - "@storybook/global": "^5.0.0", - "@testing-library/dom": "10.4.0", - "@testing-library/jest-dom": "6.5.0", - "@testing-library/user-event": "14.5.2", - "@vitest/expect": "2.0.5", - "@vitest/spy": "2.0.5" - }, - "devDependencies": { - "chai": "^5.1.1", - "tinyspy": "^3.0.0", - "ts-dedent": "^2.2.0", - "type-fest": "~2.19", - "typescript": "^5.7.3" - }, - "peerDependencies": { - "storybook": "workspace:^" - }, - "publishConfig": { - "access": "public" - }, - "bundler": { - "entries": [ - "./src/index.ts" - ], - "noExternal": [ - "@testing-library/dom", - "@testing-library/jest-dom", - "@testing-library/user-event", - "chai", - "@vitest/expect", - "@vitest/spy", - "@vitest/utils" - ], - "externals": [ - "util" - ] - }, - "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae16" -} diff --git a/code/lib/test/project.json b/code/lib/test/project.json deleted file mode 100644 index 1302a230f1e..00000000000 --- a/code/lib/test/project.json +++ /dev/null @@ -1,8 +0,0 @@ -{ - "name": "test", - "$schema": "../../node_modules/nx/schemas/project-schema.json", - "projectType": "library", - "targets": { - "build": {} - } -} diff --git a/code/lib/test/template/stories/utils.mock.ts b/code/lib/test/template/stories/utils.mock.ts deleted file mode 100644 index 93a72d03a0e..00000000000 --- a/code/lib/test/template/stories/utils.mock.ts +++ /dev/null @@ -1,5 +0,0 @@ -import { fn } from '@storybook/test'; - -import * as utils from './utils.ts'; - -export const foo = fn(utils.foo).mockName('foo'); diff --git a/code/lib/test/template/stories/utils.ts b/code/lib/test/template/stories/utils.ts deleted file mode 100644 index 5a80b1903c1..00000000000 --- a/code/lib/test/template/stories/utils.ts +++ /dev/null @@ -1 +0,0 @@ -export const foo = () => 'not mocked'; diff --git a/code/lib/test/tsconfig.json b/code/lib/test/tsconfig.json deleted file mode 100644 index 73a65ef2ef6..00000000000 --- a/code/lib/test/tsconfig.json +++ /dev/null @@ -1,5 +0,0 @@ -{ - "extends": "../../tsconfig.json", - "compilerOptions": {}, - "include": ["src/**/*"] -} diff --git a/code/lib/test/vitest.config.ts b/code/lib/test/vitest.config.ts deleted file mode 100644 index 7420176b2e4..00000000000 --- a/code/lib/test/vitest.config.ts +++ /dev/null @@ -1,10 +0,0 @@ -import { defineConfig, mergeConfig } from 'vitest/config'; - -import { vitestCommonConfig } from '../../vitest.workspace'; - -export default mergeConfig( - vitestCommonConfig, - defineConfig({ - // Add custom config here - }) -); From 7ae3d68b70714a30be2490328b0a0cbb1068c52a Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Mon, 3 Mar 2025 21:28:47 +0100 Subject: [PATCH 022/108] Remove @storybook/test from package.jsons --- code/addons/a11y/package.json | 1 - code/addons/actions/package.json | 1 - code/addons/interactions/package.json | 1 - code/addons/test/package.json | 1 - .../experimental-nextjs-vite/package.json | 2 - code/frameworks/nextjs/package.json | 1 - code/frameworks/react-vite/package.json | 6 - code/lib/blocks/package.json | 1 - code/package.json | 1 - code/renderers/react/package.json | 5 - code/yarn.lock | 108 ++---------------- test-storybooks/ember-cli/package.json | 1 - test-storybooks/external-docs/package.json | 1 - .../nextjs/package.json | 2 - .../react/package.json | 2 - .../svelte/package.json | 2 - .../vue3/package.json | 2 - .../server-kitchen-sink/package.json | 1 - .../standalone-preview/package.json | 1 - 19 files changed, 12 insertions(+), 128 deletions(-) diff --git a/code/addons/a11y/package.json b/code/addons/a11y/package.json index 21dd15d38c5..5f685139779 100644 --- a/code/addons/a11y/package.json +++ b/code/addons/a11y/package.json @@ -67,7 +67,6 @@ }, "dependencies": { "@storybook/addon-highlight": "workspace:*", - "@storybook/test": "workspace:*", "axe-core": "^4.2.0" }, "devDependencies": { diff --git a/code/addons/actions/package.json b/code/addons/actions/package.json index 81f551eda78..fe1156eb1e7 100644 --- a/code/addons/actions/package.json +++ b/code/addons/actions/package.json @@ -74,7 +74,6 @@ "uuid": "^9.0.0" }, "devDependencies": { - "@storybook/test": "workspace:*", "react": "^18.2.0", "react-dom": "^18.2.0", "react-inspector": "^6.0.0", diff --git a/code/addons/interactions/package.json b/code/addons/interactions/package.json index 781ac2c7812..cf635887ae0 100644 --- a/code/addons/interactions/package.json +++ b/code/addons/interactions/package.json @@ -63,7 +63,6 @@ }, "dependencies": { "@storybook/global": "^5.0.0", - "@storybook/test": "workspace:*", "polished": "^4.2.2", "ts-dedent": "^2.2.0" }, diff --git a/code/addons/test/package.json b/code/addons/test/package.json index 55dd6b69db3..6013be84299 100644 --- a/code/addons/test/package.json +++ b/code/addons/test/package.json @@ -100,7 +100,6 @@ "dependencies": { "@storybook/global": "^5.0.0", "@storybook/icons": "^1.2.12", - "@storybook/test": "workspace:*", "polished": "^4.2.2", "prompts": "^2.4.0", "ts-dedent": "^2.2.0" diff --git a/code/frameworks/experimental-nextjs-vite/package.json b/code/frameworks/experimental-nextjs-vite/package.json index ae8115be6a6..bfceaa3a6a6 100644 --- a/code/frameworks/experimental-nextjs-vite/package.json +++ b/code/frameworks/experimental-nextjs-vite/package.json @@ -107,7 +107,6 @@ "@storybook/builder-vite": "workspace:*", "@storybook/react": "workspace:*", "@storybook/react-vite": "workspace:*", - "@storybook/test": "workspace:*", "styled-jsx": "5.1.6", "vite-plugin-storybook-nextjs": "^1.1.0" }, @@ -117,7 +116,6 @@ "typescript": "^5.7.3" }, "peerDependencies": { - "@storybook/test": "workspace:*", "next": "^14.1.0 || ^15.0.0", "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta", "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta", diff --git a/code/frameworks/nextjs/package.json b/code/frameworks/nextjs/package.json index 9c2ba2d201e..83847cacaf9 100644 --- a/code/frameworks/nextjs/package.json +++ b/code/frameworks/nextjs/package.json @@ -156,7 +156,6 @@ "@storybook/builder-webpack5": "workspace:*", "@storybook/preset-react-webpack": "workspace:*", "@storybook/react": "workspace:*", - "@storybook/test": "workspace:*", "@types/semver": "^7.3.4", "babel-loader": "^9.1.3", "css-loader": "^6.7.3", diff --git a/code/frameworks/react-vite/package.json b/code/frameworks/react-vite/package.json index b60cf94a357..e14616fa6e9 100644 --- a/code/frameworks/react-vite/package.json +++ b/code/frameworks/react-vite/package.json @@ -82,17 +82,11 @@ "vite": "^4.0.0" }, "peerDependencies": { - "@storybook/test": "workspace:*", "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta", "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta", "storybook": "workspace:^", "vite": "^4.0.0 || ^5.0.0 || ^6.0.0" }, - "peerDependenciesMeta": { - "@storybook/test": { - "optional": true - } - }, "engines": { "node": ">=18.0.0" }, diff --git a/code/lib/blocks/package.json b/code/lib/blocks/package.json index 763b9f933cd..16bec3702ab 100644 --- a/code/lib/blocks/package.json +++ b/code/lib/blocks/package.json @@ -49,7 +49,6 @@ "devDependencies": { "@storybook/addon-actions": "workspace:*", "@storybook/react": "workspace:*", - "@storybook/test": "workspace:*", "@types/color-convert": "^2.0.0", "color-convert": "^2.0.1", "es-toolkit": "^1.22.0", diff --git a/code/package.json b/code/package.json index 47e728552f2..577f5c8d1b8 100644 --- a/code/package.json +++ b/code/package.json @@ -153,7 +153,6 @@ "@storybook/source-loader": "workspace:*", "@storybook/svelte": "workspace:*", "@storybook/svelte-webpack5": "workspace:*", - "@storybook/test": "workspace:*", "@storybook/testing-library": "next", "@storybook/vue3": "workspace:*", "@storybook/vue3-vite": "workspace:*", diff --git a/code/renderers/react/package.json b/code/renderers/react/package.json index a26142f20cf..a050cd1273c 100644 --- a/code/renderers/react/package.json +++ b/code/renderers/react/package.json @@ -74,7 +74,6 @@ "@storybook/react-dom-shim": "workspace:*" }, "devDependencies": { - "@storybook/test": "workspace:*", "@types/babel-plugin-react-docgen": "^4.2.3", "@types/escodegen": "^0.0.6", "@types/estree": "^0.0.51", @@ -96,16 +95,12 @@ "type-fest": "~2.19" }, "peerDependencies": { - "@storybook/test": "workspace:*", "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta", "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta", "storybook": "workspace:^", "typescript": ">= 4.9.x" }, "peerDependenciesMeta": { - "@storybook/test": { - "optional": true - }, "typescript": { "optional": true } diff --git a/code/yarn.lock b/code/yarn.lock index dea179df9c2..f85e0962fec 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -6051,7 +6051,6 @@ __metadata: "@storybook/addon-highlight": "workspace:*" "@storybook/global": "npm:^5.0.0" "@storybook/icons": "npm:^1.2.12" - "@storybook/test": "workspace:*" "@testing-library/react": "npm:^14.0.0" axe-core: "npm:^4.2.0" execa: "npm:^9.5.2" @@ -6073,7 +6072,6 @@ __metadata: resolution: "@storybook/addon-actions@workspace:addons/actions" dependencies: "@storybook/global": "npm:^5.0.0" - "@storybook/test": "workspace:*" "@types/uuid": "npm:^9.0.1" dequal: "npm:^2.0.2" polished: "npm:^4.2.2" @@ -6202,7 +6200,6 @@ __metadata: "@devtools-ds/object-inspector": "npm:^1.1.2" "@storybook/global": "npm:^5.0.0" "@storybook/icons": "npm:^1.2.5" - "@storybook/test": "workspace:*" "@types/node": "npm:^22.0.0" ansi-to-html: "npm:^0.7.2" formik: "npm:^2.2.9" @@ -6336,7 +6333,6 @@ __metadata: "@devtools-ds/object-inspector": "npm:^1.1.2" "@storybook/global": "npm:^5.0.0" "@storybook/icons": "npm:^1.2.12" - "@storybook/test": "workspace:*" "@types/istanbul-lib-report": "npm:^3.0.3" "@types/node": "npm:^22.0.0" "@types/semver": "npm:^7" @@ -6517,7 +6513,6 @@ __metadata: "@storybook/addon-actions": "workspace:*" "@storybook/icons": "npm:^1.2.12" "@storybook/react": "workspace:*" - "@storybook/test": "workspace:*" "@types/color-convert": "npm:^2.0.0" color-convert: "npm:^2.0.1" es-toolkit: "npm:^1.22.0" @@ -6771,7 +6766,6 @@ __metadata: "@storybook/builder-vite": "workspace:*" "@storybook/react": "workspace:*" "@storybook/react-vite": "workspace:*" - "@storybook/test": "workspace:*" "@types/node": "npm:^22.0.0" next: "npm:^15.0.3" sharp: "npm:^0.33.3" @@ -6779,7 +6773,6 @@ __metadata: typescript: "npm:^5.7.3" vite-plugin-storybook-nextjs: "npm:^1.1.0" peerDependencies: - "@storybook/test": "workspace:*" next: ^14.1.0 || ^15.0.0 react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta @@ -6901,7 +6894,6 @@ __metadata: "@storybook/builder-webpack5": "workspace:*" "@storybook/preset-react-webpack": "workspace:*" "@storybook/react": "workspace:*" - "@storybook/test": "workspace:*" "@types/babel__core": "npm:^7" "@types/babel__plugin-transform-runtime": "npm:^7" "@types/babel__preset-env": "npm:^7" @@ -7195,14 +7187,10 @@ __metadata: typescript: "npm:^5.7.3" vite: "npm:^4.0.0" peerDependencies: - "@storybook/test": "workspace:*" react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta storybook: "workspace:^" vite: ^4.0.0 || ^5.0.0 || ^6.0.0 - peerDependenciesMeta: - "@storybook/test": - optional: true languageName: unknown linkType: soft @@ -7231,7 +7219,6 @@ __metadata: dependencies: "@storybook/global": "npm:^5.0.0" "@storybook/react-dom-shim": "workspace:*" - "@storybook/test": "workspace:*" "@types/babel-plugin-react-docgen": "npm:^4.2.3" "@types/escodegen": "npm:^0.0.6" "@types/estree": "npm:^0.0.51" @@ -7252,14 +7239,11 @@ __metadata: ts-dedent: "npm:^2.0.0" type-fest: "npm:~2.19" peerDependencies: - "@storybook/test": "workspace:*" react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta storybook: "workspace:^" typescript: ">= 4.9.x" peerDependenciesMeta: - "@storybook/test": - optional: true typescript: optional: true languageName: unknown @@ -7329,7 +7313,6 @@ __metadata: "@storybook/source-loader": "workspace:*" "@storybook/svelte": "workspace:*" "@storybook/svelte-webpack5": "workspace:*" - "@storybook/test": "workspace:*" "@storybook/testing-library": "npm:next" "@storybook/vue3": "workspace:*" "@storybook/vue3-vite": "workspace:*" @@ -7543,26 +7526,6 @@ __metadata: languageName: unknown linkType: soft -"@storybook/test@workspace:*, @storybook/test@workspace:lib/test": - version: 0.0.0-use.local - resolution: "@storybook/test@workspace:lib/test" - dependencies: - "@storybook/global": "npm:^5.0.0" - "@testing-library/dom": "npm:10.4.0" - "@testing-library/jest-dom": "npm:6.5.0" - "@testing-library/user-event": "npm:14.5.2" - "@vitest/expect": "npm:2.0.5" - "@vitest/spy": "npm:2.0.5" - chai: "npm:^5.1.1" - tinyspy: "npm:^3.0.0" - ts-dedent: "npm:^2.2.0" - type-fest: "npm:~2.19" - typescript: "npm:^5.7.3" - peerDependencies: - storybook: "workspace:^" - languageName: unknown - linkType: soft - "@storybook/testing-library@npm:next": version: 0.2.2-next.0 resolution: "@storybook/testing-library@npm:0.2.2-next.0" @@ -9354,18 +9317,6 @@ __metadata: languageName: node linkType: hard -"@vitest/expect@npm:2.0.5": - version: 2.0.5 - resolution: "@vitest/expect@npm:2.0.5" - dependencies: - "@vitest/spy": "npm:2.0.5" - "@vitest/utils": "npm:2.0.5" - chai: "npm:^5.1.1" - tinyrainbow: "npm:^1.2.0" - checksum: 10c0/08cb1b0f106d16a5b60db733e3d436fa5eefc68571488eb570dfe4f599f214ab52e4342273b03dbe12331cc6c0cdc325ac6c94f651ad254cd62f3aa0e3d185aa - languageName: node - linkType: hard - "@vitest/expect@npm:3.0.2": version: 3.0.2 resolution: "@vitest/expect@npm:3.0.2" @@ -9378,18 +9329,6 @@ __metadata: languageName: node linkType: hard -"@vitest/expect@patch:@vitest/expect@npm%3A2.0.5#~/.yarn/patches/@vitest-expect-npm-2.0.5-8933466cce.patch": - version: 2.0.5 - resolution: "@vitest/expect@patch:@vitest/expect@npm%3A2.0.5#~/.yarn/patches/@vitest-expect-npm-2.0.5-8933466cce.patch::version=2.0.5&hash=368591" - dependencies: - "@vitest/spy": "npm:2.0.5" - "@vitest/utils": "npm:2.0.5" - chai: "npm:^5.1.1" - tinyrainbow: "npm:^1.2.0" - checksum: 10c0/0834adbe2c7094277adf3a45aa20fece84ca3b381fb3fe118fa424d2d490f20d0365c57dcaf845b413e583e36118f2815afa34bd175e305d6169c947e29576c3 - languageName: node - linkType: hard - "@vitest/mocker@npm:3.0.2": version: 3.0.2 resolution: "@vitest/mocker@npm:3.0.2" @@ -9409,15 +9348,6 @@ __metadata: languageName: node linkType: hard -"@vitest/pretty-format@npm:2.0.5": - version: 2.0.5 - resolution: "@vitest/pretty-format@npm:2.0.5" - dependencies: - tinyrainbow: "npm:^1.2.0" - checksum: 10c0/236c0798c5170a0b5ad5d4bd06118533738e820b4dd30079d8fbcb15baee949d41c60f42a9f769906c4a5ce366d7ef11279546070646c0efc03128c220c31f37 - languageName: node - linkType: hard - "@vitest/pretty-format@npm:2.1.3": version: 2.1.3 resolution: "@vitest/pretty-format@npm:2.1.3" @@ -9476,15 +9406,6 @@ __metadata: languageName: node linkType: hard -"@vitest/spy@npm:2.0.5": - version: 2.0.5 - resolution: "@vitest/spy@npm:2.0.5" - dependencies: - tinyspy: "npm:^3.0.0" - checksum: 10c0/70634c21921eb271b54d2986c21d7ab6896a31c0f4f1d266940c9bafb8ac36237846d6736638cbf18b958bd98e5261b158a6944352742accfde50b7818ff655e - languageName: node - linkType: hard - "@vitest/spy@npm:3.0.2": version: 3.0.2 resolution: "@vitest/spy@npm:3.0.2" @@ -9494,15 +9415,12 @@ __metadata: languageName: node linkType: hard -"@vitest/utils@npm:2.0.5": - version: 2.0.5 - resolution: "@vitest/utils@npm:2.0.5" +"@vitest/spy@npm:^2.0.5": + version: 2.1.9 + resolution: "@vitest/spy@npm:2.1.9" dependencies: - "@vitest/pretty-format": "npm:2.0.5" - estree-walker: "npm:^3.0.3" - loupe: "npm:^3.1.1" - tinyrainbow: "npm:^1.2.0" - checksum: 10c0/0d1de748298f07a50281e1ba058b05dcd58da3280c14e6f016265e950bd79adab6b97822de8f0ea82d3070f585654801a9b1bcf26db4372e51cf7746bf86d73b + tinyspy: "npm:^3.0.2" + checksum: 10c0/12a59b5095e20188b819a1d797e0a513d991b4e6a57db679927c43b362a3eff52d823b34e855a6dd9e73c9fa138dcc5ef52210841a93db5cbf047957a60ca83c languageName: node linkType: hard @@ -27821,7 +27739,10 @@ __metadata: "@storybook/global": "npm:^5.0.0" "@storybook/icons": "npm:^1.3.2" "@tanstack/react-virtual": "npm:^3.3.0" + "@testing-library/dom": "npm:10.4.0" + "@testing-library/jest-dom": "npm:6.5.0" "@testing-library/react": "npm:^14.0.0" + "@testing-library/user-event": "npm:14.5.2" "@types/cross-spawn": "npm:^6.0.2" "@types/detect-port": "npm:^1.3.0" "@types/diff": "npm:^5.0.9" @@ -27838,6 +27759,7 @@ __metadata: "@types/react-transition-group": "npm:^4" "@types/semver": "npm:^7.5.8" "@types/ws": "npm:^8" + "@vitest/spy": "npm:^2.0.5" "@vitest/utils": "npm:^2.1.1" "@yarnpkg/esbuild-plugin-pnp": "npm:^3.0.0-rc.10" "@yarnpkg/fslib": "npm:2.10.3" @@ -27850,6 +27772,7 @@ __metadata: browser-assert: "npm:^1.2.1" browser-dtector: "npm:^3.4.0" camelcase: "npm:^8.0.0" + chai: "npm:^5.1.1" cli-table3: "npm:^0.6.1" commander: "npm:^12.1.0" comment-parser: "npm:^1.4.1" @@ -27919,7 +27842,7 @@ __metadata: strip-json-comments: "npm:^5.0.1" telejson: "npm:^7.2.0" tiny-invariant: "npm:^1.3.1" - tinyspy: "npm:^2.2.0" + tinyspy: "npm:^3.0.2" ts-dedent: "npm:^2.0.0" tsconfig-paths: "npm:^4.2.0" type-fest: "npm:^4.18.1" @@ -28779,14 +28702,7 @@ __metadata: languageName: node linkType: hard -"tinyspy@npm:^2.2.0": - version: 2.2.0 - resolution: "tinyspy@npm:2.2.0" - checksum: 10c0/8c7b70748dd8590e85d52741db79243746c15bc03c92d75c23160a762142db577e7f53e360ba7300e321b12bca5c42dd2522a8dbeec6ba3830302573dd8516bc - languageName: node - linkType: hard - -"tinyspy@npm:^3.0.0, tinyspy@npm:^3.0.2": +"tinyspy@npm:^3.0.2": version: 3.0.2 resolution: "tinyspy@npm:3.0.2" checksum: 10c0/55ffad24e346622b59292e097c2ee30a63919d5acb7ceca87fc0d1c223090089890587b426e20054733f97a58f20af2c349fb7cc193697203868ab7ba00bcea0 diff --git a/test-storybooks/ember-cli/package.json b/test-storybooks/ember-cli/package.json index ecc101d308d..4c38a4bc399 100644 --- a/test-storybooks/ember-cli/package.json +++ b/test-storybooks/ember-cli/package.json @@ -61,7 +61,6 @@ "@storybook/svelte-vite": "file:../../code/frameworks/svelte-vite", "@storybook/svelte-webpack5": "file:../../code/frameworks/svelte-webpack5", "@storybook/sveltekit": "file:../../code/frameworks/sveltekit", - "@storybook/test": "file:../../code/lib/test", "@storybook/vue3": "file:../../code/renderers/vue3", "@storybook/vue3-vite": "file:../../code/frameworks/vue3-vite", "@storybook/vue3-webpack5": "file:../../code/frameworks/vue3-webpack5", diff --git a/test-storybooks/external-docs/package.json b/test-storybooks/external-docs/package.json index 2761c08ddb4..2509be161e8 100644 --- a/test-storybooks/external-docs/package.json +++ b/test-storybooks/external-docs/package.json @@ -61,7 +61,6 @@ "@storybook/svelte-vite": "file:../../code/frameworks/svelte-vite", "@storybook/svelte-webpack5": "file:../../code/frameworks/svelte-webpack5", "@storybook/sveltekit": "file:../../code/frameworks/sveltekit", - "@storybook/test": "file:../../code/lib/test", "@storybook/vue3": "file:../../code/renderers/vue3", "@storybook/vue3-vite": "file:../../code/frameworks/vue3-vite", "@storybook/vue3-webpack5": "file:../../code/frameworks/vue3-webpack5", diff --git a/test-storybooks/portable-stories-kitchen-sink/nextjs/package.json b/test-storybooks/portable-stories-kitchen-sink/nextjs/package.json index fcffc8a04c8..3a5e169aace 100644 --- a/test-storybooks/portable-stories-kitchen-sink/nextjs/package.json +++ b/test-storybooks/portable-stories-kitchen-sink/nextjs/package.json @@ -64,7 +64,6 @@ "@storybook/svelte-vite": "file:../../../code/frameworks/svelte-vite", "@storybook/svelte-webpack5": "file:../../../code/frameworks/svelte-webpack5", "@storybook/sveltekit": "file:../../../code/frameworks/sveltekit", - "@storybook/test": "file:../../../code/lib/test", "@storybook/vue3": "file:../../../code/renderers/vue3", "@storybook/vue3-vite": "file:../../../code/frameworks/vue3-vite", "@storybook/vue3-webpack5": "file:../../../code/frameworks/vue3-webpack5", @@ -85,7 +84,6 @@ "@storybook/addon-interactions": "^8.0.0", "@storybook/nextjs": "^8.0.0", "@storybook/react": "^8.0.0", - "@storybook/test": "^8.0.0", "@testing-library/jest-dom": "6.5.0", "@testing-library/react": "^16.0.0", "@types/react": "^18.2.55", diff --git a/test-storybooks/portable-stories-kitchen-sink/react/package.json b/test-storybooks/portable-stories-kitchen-sink/react/package.json index bccfbefdcef..c69758c396d 100644 --- a/test-storybooks/portable-stories-kitchen-sink/react/package.json +++ b/test-storybooks/portable-stories-kitchen-sink/react/package.json @@ -68,7 +68,6 @@ "@storybook/svelte-vite": "file:../../../code/frameworks/svelte-vite", "@storybook/svelte-webpack5": "file:../../../code/frameworks/svelte-webpack5", "@storybook/sveltekit": "file:../../../code/frameworks/sveltekit", - "@storybook/test": "file:../../../code/lib/test", "@storybook/vue3": "file:../../../code/renderers/vue3", "@storybook/vue3-vite": "file:../../../code/frameworks/vue3-vite", "@storybook/vue3-webpack5": "file:../../../code/frameworks/vue3-webpack5", @@ -92,7 +91,6 @@ "@storybook/addon-test": "^8.0.0", "@storybook/react": "^8.0.0", "@storybook/react-vite": "^8.0.0", - "@storybook/test": "^8.0.0", "@swc/core": "^1.4.2", "@swc/jest": "^0.2.36", "@testing-library/jest-dom": "6.6.3", diff --git a/test-storybooks/portable-stories-kitchen-sink/svelte/package.json b/test-storybooks/portable-stories-kitchen-sink/svelte/package.json index dd7af985f2c..f13143b6f59 100644 --- a/test-storybooks/portable-stories-kitchen-sink/svelte/package.json +++ b/test-storybooks/portable-stories-kitchen-sink/svelte/package.json @@ -65,7 +65,6 @@ "@storybook/svelte-vite": "portal:../../../code/frameworks/svelte-vite", "@storybook/svelte-webpack5": "portal:../../../code/frameworks/svelte-webpack5", "@storybook/sveltekit": "portal:../../../code/frameworks/sveltekit", - "@storybook/test": "portal:../../../code/lib/test", "@storybook/vue3": "portal:../../../code/renderers/vue3", "@storybook/vue3-vite": "portal:../../../code/frameworks/vue3-vite", "@storybook/vue3-webpack5": "portal:../../../code/frameworks/vue3-webpack5", @@ -80,7 +79,6 @@ "@storybook/addon-interactions": "8.0.0-rc.2", "@storybook/svelte": "8.0.0-rc.2", "@storybook/svelte-vite": "8.0.0-rc.2", - "@storybook/test": "8.0.0-rc.2", "@sveltejs/vite-plugin-svelte": "^3.0.2", "@testing-library/svelte": "4.1.0", "@tsconfig/svelte": "^5.0.2", diff --git a/test-storybooks/portable-stories-kitchen-sink/vue3/package.json b/test-storybooks/portable-stories-kitchen-sink/vue3/package.json index 468a6921677..c4778a35a5e 100644 --- a/test-storybooks/portable-stories-kitchen-sink/vue3/package.json +++ b/test-storybooks/portable-stories-kitchen-sink/vue3/package.json @@ -66,7 +66,6 @@ "@storybook/svelte-vite": "file:../../../code/frameworks/svelte-vite", "@storybook/svelte-webpack5": "file:../../../code/frameworks/svelte-webpack5", "@storybook/sveltekit": "file:../../../code/frameworks/sveltekit", - "@storybook/test": "file:../../../code/lib/test", "@storybook/vue3": "file:../../../code/renderers/vue3", "@storybook/vue3-vite": "file:../../../code/frameworks/vue3-vite", "@storybook/vue3-webpack5": "file:../../../code/frameworks/vue3-webpack5", @@ -82,7 +81,6 @@ "@playwright/experimental-ct-vue": "1.48.1", "@storybook/addon-essentials": "^8.0.0", "@storybook/addon-interactions": "^8.0.0", - "@storybook/test": "^8.0.0", "@storybook/vue3": "^8.0.0", "@storybook/vue3-vite": "^8.0.0", "@testing-library/jest-dom": "6.5.0", diff --git a/test-storybooks/server-kitchen-sink/package.json b/test-storybooks/server-kitchen-sink/package.json index e164e510d64..04355376898 100644 --- a/test-storybooks/server-kitchen-sink/package.json +++ b/test-storybooks/server-kitchen-sink/package.json @@ -64,7 +64,6 @@ "@storybook/svelte-vite": "file:../../code/frameworks/svelte-vite", "@storybook/svelte-webpack5": "file:../../code/frameworks/svelte-webpack5", "@storybook/sveltekit": "file:../../code/frameworks/sveltekit", - "@storybook/test": "file:../../code/lib/test", "@storybook/vue3": "file:../../code/renderers/vue3", "@storybook/vue3-vite": "file:../../code/frameworks/vue3-vite", "@storybook/vue3-webpack5": "file:../../code/frameworks/vue3-webpack5", diff --git a/test-storybooks/standalone-preview/package.json b/test-storybooks/standalone-preview/package.json index 29ec563adf4..1787433e218 100644 --- a/test-storybooks/standalone-preview/package.json +++ b/test-storybooks/standalone-preview/package.json @@ -57,7 +57,6 @@ "@storybook/svelte-vite": "file:../../code/frameworks/svelte-vite", "@storybook/svelte-webpack5": "file:../../code/frameworks/svelte-webpack5", "@storybook/sveltekit": "file:../../code/frameworks/sveltekit", - "@storybook/test": "file:../../code/lib/test", "@storybook/vue3": "file:../../code/renderers/vue3", "@storybook/vue3-vite": "file:../../code/frameworks/vue3-vite", "@storybook/vue3-webpack5": "file:../../code/frameworks/vue3-webpack5", From d3087816c0fcbcbfac1a92682f03c5fa027676a2 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Mon, 3 Mar 2025 21:40:10 +0100 Subject: [PATCH 023/108] Rename @storybook/test to storybook/test --- code/.storybook/storybook.setup.ts | 3 +- .../a11y/src/components/A11YPanel.stories.tsx | 2 +- .../TestDiscrepancyMessage.stories.tsx | 2 +- code/addons/a11y/src/preview.tsx | 2 +- code/addons/actions/src/loaders.ts | 3 +- .../actions/template/stories/spies.stories.ts | 2 +- .../addons/controls/src/SaveStory.stories.tsx | 3 +- .../stories/docs2/resolved-react.stories.ts | 2 +- .../stories/docspage/autoplay.stories.ts | 2 +- .../stories/docspage/basic.stories.ts | 2 +- code/addons/interactions/README.md | 6 +- .../src/components/Interaction.stories.tsx | 3 +- .../components/InteractionsPanel.stories.tsx | 3 +- .../template/stories/basics.stories.ts | 3 +- .../stories/unhandled-errors.stories.ts | 3 +- .../HighlightElement.stories.tsx | 3 +- .../src/components/List/List.stories.tsx | 3 +- .../GuidedTour/GuidedTour.stories.tsx | 3 +- .../components/GlobalErrorModal.stories.tsx | 2 +- .../src/components/Interaction.stories.tsx | 3 +- .../components/InteractionsPanel.stories.tsx | 3 +- .../TestDiscrepancyMessage.stories.tsx | 3 +- .../components/TestProviderRender.stories.tsx | 3 +- code/addons/test/src/manager-store.mock.ts | 2 +- .../test/template/stories/basics.stories.ts | 2 +- .../stories/unhandled-errors.stories.ts | 2 +- .../template/stories/parameters.stories.ts | 2 +- code/core/package.json | 4 + code/core/src/common/versions.ts | 1 - .../components/Modal/Modal.stories.tsx | 3 +- .../components/tabs/tabs.stories.tsx | 5 +- .../tooltip/WithTooltip.stories.tsx | 3 +- .../components/layout/Layout.stories.tsx | 3 +- .../mobile/about/MobileAbout.stories.tsx | 3 +- .../navigation/MobileNavigation.stories.tsx | 2 +- .../NotificationItem.stories.tsx | 3 +- .../sidebar/FileSearchList.stories.tsx | 3 +- .../sidebar/FileSearchModal.stories.tsx | 3 +- .../sidebar/FilterToggle.stories.ts | 2 +- .../components/sidebar/Heading.stories.tsx | 3 +- .../components/sidebar/Menu.stories.tsx | 3 +- .../components/sidebar/Refs.stories.tsx | 2 +- .../components/sidebar/Sidebar.stories.tsx | 3 +- .../sidebar/SidebarBottom.stories.tsx | 3 +- .../components/sidebar/TagsFilter.stories.tsx | 3 +- .../sidebar/TagsFilterPanel.stories.tsx | 3 +- .../sidebar/TestingModule.stories.tsx | 3 +- .../components/sidebar/Tree.stories.tsx | 3 +- .../upgrade/UpgradeBlock.stories.tsx | 3 +- .../src/manager/settings/about.stories.tsx | 3 +- code/core/src/preview-errors.ts | 2 +- code/core/src/shared/universal-store/mock.ts | 2 +- code/core/src/test/index.test.ts | 4 +- .../template/stories/argMapping.stories.ts | 2 +- .../core/template/stories/argTypes.stories.ts | 2 +- code/core/template/stories/args.stories.ts | 2 +- .../template/stories/autotitle.stories.ts | 2 +- .../template/stories/before-each.stories.ts | 2 +- .../stories/component-play.stories.ts | 2 +- .../template/stories/decorators.stories.ts | 2 +- .../destructuring-not-transpiled.stories.ts | 2 +- code/core/template/stories/globals.stories.ts | 2 +- code/core/template/stories/hooks.stories.ts | 2 +- code/core/template/stories/indexer.stories.ts | 2 +- .../stories/loader-enhancements.stories.ts | 2 +- code/core/template/stories/loaders.stories.ts | 2 +- .../stories/module-mocking.stories.ts | 2 +- .../template/stories/mount-in-play.stories.ts | 2 +- code/core/template/stories/names.stories.ts | 2 +- .../template/stories/parameters.stories.ts | 2 +- .../template/stories/rendering.stories.ts | 2 +- .../template/stories/shortcuts.stories.ts | 2 +- .../core/template/stories/tags-add.stories.ts | 2 +- .../template/stories/tags-config.stories.ts | 2 +- .../template/stories/tags-remove.stories.ts | 2 +- code/core/template/stories/title.stories.ts | 2 +- code/core/template/stories/utils.mock.ts | 2 +- .../angular/template/cli/button.stories.ts | 2 +- .../angular/template/cli/header.stories.ts | 2 +- .../angular/template/cli/page.stories.ts | 2 +- .../signal/button.stories.ts | 2 +- .../signal/button.stories.ts | 2 +- .../ember/template/cli/Button.stories.js | 3 +- .../src/export-mocks/cache/index.ts | 2 +- .../src/export-mocks/headers/cookies.ts | 3 +- .../src/export-mocks/headers/headers.ts | 3 +- .../src/export-mocks/headers/index.ts | 3 +- .../src/export-mocks/navigation/index.ts | 5 +- .../src/export-mocks/router/index.ts | 5 +- .../template/cli/js/Button.stories.js | 2 +- .../template/cli/js/Header.stories.js | 2 +- .../template/cli/js/Page.stories.js | 2 +- .../template/cli/ts-4-9/Button.stories.ts | 3 +- .../template/cli/ts-4-9/Header.stories.ts | 3 +- .../template/cli/ts-4-9/Page.stories.ts | 3 +- .../template/stories/Head.stories.tsx | 2 +- .../template/stories/Navigation.stories.tsx | 2 +- .../template/stories/NextHeader.stories.tsx | 3 +- .../template/stories/Redirect.stories.tsx | 2 +- .../template/stories/Router.stories.tsx | 2 +- .../stories/ServerActions.stories.tsx | 3 +- .../nextjs/src/export-mocks/cache/index.ts | 3 +- .../src/export-mocks/headers/cookies.ts | 2 +- .../src/export-mocks/headers/headers.ts | 3 +- .../nextjs/src/export-mocks/headers/index.ts | 3 +- .../src/export-mocks/navigation/index.ts | 5 +- .../nextjs/src/export-mocks/router/index.ts | 5 +- .../nextjs/template/cli/js/Button.stories.js | 2 +- .../nextjs/template/cli/js/Header.stories.js | 2 +- .../nextjs/template/cli/js/Page.stories.js | 2 +- .../template/cli/ts-4-9/Button.stories.ts | 3 +- .../template/cli/ts-4-9/Header.stories.ts | 3 +- .../template/cli/ts-4-9/Page.stories.ts | 3 +- .../nextjs/template/stories/Head.stories.tsx | 2 +- .../template/stories/Navigation.stories.tsx | 2 +- .../template/stories/Router.stories.tsx | 2 +- .../NextHeader.stories.tsx | 3 +- .../Redirect.stories.tsx | 2 +- .../ServerActions.stories.tsx | 3 +- .../NextHeader.stories.tsx | 3 +- .../Redirect.stories.tsx | 2 +- .../ServerActions.stories.tsx | 3 +- .../template/cli/js/Button.stories.jsx | 3 +- .../template/cli/js/Page.stories.jsx | 2 +- .../template/cli/ts-4-9/Button.stories.tsx | 2 +- .../template/cli/ts-4-9/Page.stories.tsx | 3 +- .../forms.stories.js | 2 +- .../hrefs.stories.js | 2 +- .../navigation.stories.js | 2 +- .../environment.stories.js | 2 +- .../forms.stories.js | 2 +- .../hrefs.stories.js | 2 +- .../navigation.stories.js | 2 +- .../paths.stories.js | 2 +- .../environment.stories.js | 2 +- .../forms.stories.js | 2 +- .../hrefs.stories.js | 2 +- .../navigation.stories.js | 2 +- .../paths.stories.js | 2 +- .../blocks/src/blocks/ArgTypes.stories.tsx | 3 +- .../blocks/src/blocks/Controls.stories.tsx | 3 +- code/lib/blocks/src/blocks/Story.stories.tsx | 3 +- .../blocks/src/components/Story.stories.tsx | 3 +- .../blocks/src/controls/Boolean.stories.tsx | 3 +- .../lib/blocks/src/controls/Color.stories.tsx | 3 +- code/lib/blocks/src/controls/Date.stories.tsx | 3 +- .../lib/blocks/src/controls/Files.stories.tsx | 3 +- .../blocks/src/controls/Number.stories.tsx | 3 +- .../blocks/src/controls/Object.stories.tsx | 3 +- .../lib/blocks/src/controls/Range.stories.tsx | 3 +- code/lib/blocks/src/controls/Text.stories.tsx | 3 +- .../controls/options/CheckOptions.stories.tsx | 3 +- .../controls/options/RadioOptions.stories.tsx | 3 +- .../options/SelectOptions.stories.tsx | 3 +- .../blocks/src/examples/Button.stories.tsx | 3 +- .../__tests__/migrate-to-test-package.test.ts | 10 +- .../cli/svelte-5-js/Button.stories.svelte | 2 +- .../cli/svelte-5-js/Header.stories.svelte | 2 +- .../cli/svelte-5-js/Page.stories.svelte | 4 +- .../cli/svelte-5-ts-3-8/Button.stories.svelte | 2 +- .../cli/svelte-5-ts-3-8/Header.stories.svelte | 2 +- .../cli/svelte-5-ts-3-8/Page.stories.svelte | 4 +- .../cli/svelte-5-ts-4-9/Button.stories.svelte | 2 +- .../cli/svelte-5-ts-4-9/Header.stories.svelte | 2 +- .../cli/svelte-5-ts-4-9/Page.stories.svelte | 4 +- .../composeStories/Button.stories.ts | 2 +- .../vue3/template/cli/js/Button.stories.js | 2 +- .../vue3/template/cli/js/Header.stories.js | 2 +- .../vue3/template/cli/js/Page.stories.js | 2 +- .../template/cli/ts-4-9/Button.stories.ts | 3 +- .../template/cli/ts-4-9/Header.stories.ts | 3 +- .../vue3/template/cli/ts-4-9/Page.stories.ts | 3 +- .../button-story-onclick-action-spy.md | 8 +- .../login-form-with-play-function.md | 96 +++++++++---------- .../my-component-play-function-alt-queries.md | 24 ++--- .../my-component-play-function-composition.md | 12 +-- ...my-component-play-function-query-findby.md | 24 ++--- .../my-component-play-function-waitfor.md | 24 ++--- .../my-component-play-function-with-canvas.md | 24 ++--- ...component-play-function-with-clickevent.md | 24 ++--- .../my-component-play-function-with-delay.md | 24 ++--- ...omponent-play-function-with-selectevent.md | 24 ++--- docs/_snippets/nextjs-cache-mock.md | 6 +- docs/_snippets/nextjs-headers-mock.md | 6 +- docs/_snippets/nextjs-navigation-mock.md | 6 +- docs/_snippets/nextjs-router-mock.md | 6 +- .../register-component-with-play-function.md | 24 ++--- .../storybook-interactions-play-function.md | 12 +-- .../storybook-interactions-step-function.md | 12 +-- docs/_snippets/storybook-test-fn-mock-spy.md | 12 +-- .../storybook-test-mock-file-example.md | 2 +- .../mocking-modules.mdx | 2 +- .../nextjs/stories/Head.stories.tsx | 2 +- .../nextjs/stories/Navigation.stories.tsx | 2 +- .../nextjs/stories/NextHeader.stories.tsx | 2 +- .../nextjs/stories/Router.stories.tsx | 2 +- .../react/stories/AddonTest.stories.tsx | 2 +- .../react/stories/Button.stories.tsx | 2 +- .../svelte/stories/Button.stories.ts | 2 +- .../vue3/stories/Button.stories.ts | 2 +- 200 files changed, 447 insertions(+), 392 deletions(-) diff --git a/code/.storybook/storybook.setup.ts b/code/.storybook/storybook.setup.ts index 80160218a31..833e21c50ac 100644 --- a/code/.storybook/storybook.setup.ts +++ b/code/.storybook/storybook.setup.ts @@ -1,7 +1,8 @@ import { beforeAll, vi, expect as vitestExpect } from 'vitest'; import { setProjectAnnotations } from '@storybook/react'; -import { userEvent as storybookEvent, expect as storybookExpect } from '@storybook/test'; + +import { userEvent as storybookEvent, expect as storybookExpect } from 'storybook/test'; import preview from './preview'; diff --git a/code/addons/a11y/src/components/A11YPanel.stories.tsx b/code/addons/a11y/src/components/A11YPanel.stories.tsx index 701b5a50933..25c0d5ec18a 100644 --- a/code/addons/a11y/src/components/A11YPanel.stories.tsx +++ b/code/addons/a11y/src/components/A11YPanel.stories.tsx @@ -4,9 +4,9 @@ import { ManagerContext } from 'storybook/internal/manager-api'; import { ThemeProvider, convert, themes } from 'storybook/internal/theming'; import type { Meta, StoryObj } from '@storybook/react'; -import { fn } from '@storybook/test'; import type axe from 'axe-core'; +import { fn } from 'storybook/test'; import { A11YPanel } from './A11YPanel'; import { A11yContext } from './A11yContext'; diff --git a/code/addons/a11y/src/components/TestDiscrepancyMessage.stories.tsx b/code/addons/a11y/src/components/TestDiscrepancyMessage.stories.tsx index 578c2bbac79..f943064e008 100644 --- a/code/addons/a11y/src/components/TestDiscrepancyMessage.stories.tsx +++ b/code/addons/a11y/src/components/TestDiscrepancyMessage.stories.tsx @@ -3,7 +3,7 @@ import React from 'react'; import { ManagerContext } from 'storybook/internal/manager-api'; import type { Meta, StoryObj } from '@storybook/react'; -import { fn } from '@storybook/test'; +import { fn } from 'storybook/test'; import { TestDiscrepancyMessage } from './TestDiscrepancyMessage'; diff --git a/code/addons/a11y/src/preview.tsx b/code/addons/a11y/src/preview.tsx index 9b8a7598d6d..cd1e4f9297b 100644 --- a/code/addons/a11y/src/preview.tsx +++ b/code/addons/a11y/src/preview.tsx @@ -1,6 +1,6 @@ import type { AfterEach } from 'storybook/internal/types'; -import { expect } from '@storybook/test'; +import { expect } from 'storybook/test'; import { run } from './a11yRunner'; import type { A11yParameters } from './params'; diff --git a/code/addons/actions/src/loaders.ts b/code/addons/actions/src/loaders.ts index 118d5c0b1b7..60202ec3692 100644 --- a/code/addons/actions/src/loaders.ts +++ b/code/addons/actions/src/loaders.ts @@ -2,7 +2,8 @@ import type { LoaderFunction } from 'storybook/internal/types'; import { global } from '@storybook/global'; -import type { onMockCall as onMockCallType } from '@storybook/test'; + +import type { onMockCall as onMockCallType } from 'storybook/test'; import { action } from './runtime'; diff --git a/code/addons/actions/template/stories/spies.stories.ts b/code/addons/actions/template/stories/spies.stories.ts index 9d84cae3d36..f731b17abe8 100644 --- a/code/addons/actions/template/stories/spies.stories.ts +++ b/code/addons/actions/template/stories/spies.stories.ts @@ -1,5 +1,5 @@ import { global as globalThis } from '@storybook/global'; -import { spyOn } from '@storybook/test'; +import { spyOn } from 'storybook/test'; const meta = { component: globalThis.Components.Button, diff --git a/code/addons/controls/src/SaveStory.stories.tsx b/code/addons/controls/src/SaveStory.stories.tsx index 9c39f6746e0..f367762e3a5 100644 --- a/code/addons/controls/src/SaveStory.stories.tsx +++ b/code/addons/controls/src/SaveStory.stories.tsx @@ -1,10 +1,11 @@ import React from 'react'; import type { Meta, StoryObj } from '@storybook/react'; -import { expect, fireEvent, fn, userEvent, within } from '@storybook/test'; import { action } from '@storybook/addon-actions'; +import { expect, fireEvent, fn, userEvent, within } from 'storybook/test'; + import { SaveStory } from './SaveStory'; const meta = { diff --git a/code/addons/docs/template/stories/docs2/resolved-react.stories.ts b/code/addons/docs/template/stories/docs2/resolved-react.stories.ts index 75e3d480ca9..43564cf4638 100644 --- a/code/addons/docs/template/stories/docs2/resolved-react.stories.ts +++ b/code/addons/docs/template/stories/docs2/resolved-react.stories.ts @@ -2,7 +2,7 @@ import * as ReactExport from 'react'; import * as ReactDom from 'react-dom'; import * as ReactDomServer from 'react-dom/server'; -import { expect, within } from '@storybook/test'; +import { expect, within } from 'storybook/test'; /** * This component is used to display the resolved version of React and its related packages. As long diff --git a/code/addons/docs/template/stories/docspage/autoplay.stories.ts b/code/addons/docs/template/stories/docspage/autoplay.stories.ts index 03d1388f2fb..e96aeeaf417 100644 --- a/code/addons/docs/template/stories/docspage/autoplay.stories.ts +++ b/code/addons/docs/template/stories/docspage/autoplay.stories.ts @@ -1,4 +1,4 @@ -import { expect, within } from '@storybook/test'; +import { expect, within } from 'storybook/test'; export default { component: globalThis.Components.Pre, diff --git a/code/addons/docs/template/stories/docspage/basic.stories.ts b/code/addons/docs/template/stories/docspage/basic.stories.ts index a9ea37650fc..a21d7ab3675 100644 --- a/code/addons/docs/template/stories/docspage/basic.stories.ts +++ b/code/addons/docs/template/stories/docspage/basic.stories.ts @@ -1,4 +1,4 @@ -import { fn } from '@storybook/test'; +import { fn } from 'storybook/test'; export default { component: globalThis.Components.Button, diff --git a/code/addons/interactions/README.md b/code/addons/interactions/README.md index 8e97267a65d..bd6895851cc 100644 --- a/code/addons/interactions/README.md +++ b/code/addons/interactions/README.md @@ -9,7 +9,7 @@ Storybook Addon Interactions enables visual debugging of interactions and tests Install this addon by adding the `@storybook/addon-interactions` dependency: ```sh -yarn add -D @storybook/addon-interactions @storybook/test +yarn add -D @storybook/addon-interactions ``` within `.storybook/main.js`: @@ -24,10 +24,10 @@ Note that `@storybook/addon-interactions` must be listed **after** `@storybook/a ## Usage -Interactions relies on "instrumented" versions of Vitest and Testing Library, that you import from `@storybook/test` instead of their original package. You can then use these libraries in your `play` function. +Interactions relies on "instrumented" versions of Vitest and Testing Library, that you import from `storybook/test` instead of their original package. You can then use these libraries in your `play` function. ```js -import { expect, fn, userEvent, within } from '@storybook/test'; +import { expect, fn, userEvent, within } from 'storybook/test'; import { Button } from './Button'; export default { diff --git a/code/addons/interactions/src/components/Interaction.stories.tsx b/code/addons/interactions/src/components/Interaction.stories.tsx index 64f43a8cef7..09aae3e2544 100644 --- a/code/addons/interactions/src/components/Interaction.stories.tsx +++ b/code/addons/interactions/src/components/Interaction.stories.tsx @@ -1,7 +1,8 @@ import { CallStates } from 'storybook/internal/instrumenter'; import type { Meta, StoryObj } from '@storybook/react'; -import { expect, userEvent, within } from '@storybook/test'; + +import { expect, userEvent, within } from 'storybook/test'; import { getCalls } from '../mocks'; import { Interaction } from './Interaction'; diff --git a/code/addons/interactions/src/components/InteractionsPanel.stories.tsx b/code/addons/interactions/src/components/InteractionsPanel.stories.tsx index 8d6d7cd9f3f..22be7f9666d 100644 --- a/code/addons/interactions/src/components/InteractionsPanel.stories.tsx +++ b/code/addons/interactions/src/components/InteractionsPanel.stories.tsx @@ -4,7 +4,8 @@ import { CallStates } from 'storybook/internal/instrumenter'; import { styled } from 'storybook/internal/theming'; import type { Meta, StoryObj } from '@storybook/react'; -import { expect, userEvent, waitFor, within } from '@storybook/test'; + +import { expect, userEvent, waitFor, within } from 'storybook/test'; import { isChromatic } from '../../../../.storybook/isChromatic'; import { getCalls, getInteractions } from '../mocks'; diff --git a/code/addons/interactions/template/stories/basics.stories.ts b/code/addons/interactions/template/stories/basics.stories.ts index 2db5f0e016f..a1cb4ce7d41 100644 --- a/code/addons/interactions/template/stories/basics.stories.ts +++ b/code/addons/interactions/template/stories/basics.stories.ts @@ -1,4 +1,5 @@ import { global as globalThis } from '@storybook/global'; + import { expect, fireEvent, @@ -7,7 +8,7 @@ import { waitFor, waitForElementToBeRemoved, within, -} from '@storybook/test'; +} from 'storybook/test'; export default { component: globalThis.Components.Form, diff --git a/code/addons/interactions/template/stories/unhandled-errors.stories.ts b/code/addons/interactions/template/stories/unhandled-errors.stories.ts index b9be0df743e..d5c396b7168 100644 --- a/code/addons/interactions/template/stories/unhandled-errors.stories.ts +++ b/code/addons/interactions/template/stories/unhandled-errors.stories.ts @@ -1,5 +1,6 @@ import { global as globalThis } from '@storybook/global'; -import { userEvent, within } from '@storybook/test'; + +import { userEvent, within } from 'storybook/test'; export default { component: globalThis.Components.Button, diff --git a/code/addons/onboarding/src/components/HighlightElement/HighlightElement.stories.tsx b/code/addons/onboarding/src/components/HighlightElement/HighlightElement.stories.tsx index 7cb0c52b011..76061b41629 100644 --- a/code/addons/onboarding/src/components/HighlightElement/HighlightElement.stories.tsx +++ b/code/addons/onboarding/src/components/HighlightElement/HighlightElement.stories.tsx @@ -1,7 +1,8 @@ import React from 'react'; import type { Meta, StoryObj } from '@storybook/react'; -import { expect, waitFor, within } from '@storybook/test'; + +import { expect, waitFor, within } from 'storybook/test'; import { HighlightElement } from './HighlightElement'; diff --git a/code/addons/onboarding/src/components/List/List.stories.tsx b/code/addons/onboarding/src/components/List/List.stories.tsx index 8e7667d8a12..5d99c6ab0ad 100644 --- a/code/addons/onboarding/src/components/List/List.stories.tsx +++ b/code/addons/onboarding/src/components/List/List.stories.tsx @@ -1,7 +1,8 @@ import React, { useState } from 'react'; import type { Meta, StoryObj } from '@storybook/react'; -import { expect, userEvent, waitFor, within } from '@storybook/test'; + +import { expect, userEvent, waitFor, within } from 'storybook/test'; import { List } from './List'; import { ListItem } from './ListItem/ListItem'; diff --git a/code/addons/onboarding/src/features/GuidedTour/GuidedTour.stories.tsx b/code/addons/onboarding/src/features/GuidedTour/GuidedTour.stories.tsx index c35a02830a5..a9cd25b04af 100644 --- a/code/addons/onboarding/src/features/GuidedTour/GuidedTour.stories.tsx +++ b/code/addons/onboarding/src/features/GuidedTour/GuidedTour.stories.tsx @@ -1,5 +1,6 @@ import type { Meta, StoryObj } from '@storybook/react'; -import { fn } from '@storybook/test'; + +import { fn } from 'storybook/test'; import { GuidedTour } from './GuidedTour'; diff --git a/code/addons/test/src/components/GlobalErrorModal.stories.tsx b/code/addons/test/src/components/GlobalErrorModal.stories.tsx index 773ff178f17..826f7a2f884 100644 --- a/code/addons/test/src/components/GlobalErrorModal.stories.tsx +++ b/code/addons/test/src/components/GlobalErrorModal.stories.tsx @@ -3,8 +3,8 @@ import React, { useState } from 'react'; import { ManagerContext } from 'storybook/internal/manager-api'; import type { Meta, StoryObj } from '@storybook/react'; -import { expect, fn, userEvent, within } from '@storybook/test'; +import { expect, fn, userEvent, within } from 'storybook/test'; import dedent from 'ts-dedent'; import { GlobalErrorContext, GlobalErrorModal } from './GlobalErrorModal'; diff --git a/code/addons/test/src/components/Interaction.stories.tsx b/code/addons/test/src/components/Interaction.stories.tsx index 64f43a8cef7..09aae3e2544 100644 --- a/code/addons/test/src/components/Interaction.stories.tsx +++ b/code/addons/test/src/components/Interaction.stories.tsx @@ -1,7 +1,8 @@ import { CallStates } from 'storybook/internal/instrumenter'; import type { Meta, StoryObj } from '@storybook/react'; -import { expect, userEvent, within } from '@storybook/test'; + +import { expect, userEvent, within } from 'storybook/test'; import { getCalls } from '../mocks'; import { Interaction } from './Interaction'; diff --git a/code/addons/test/src/components/InteractionsPanel.stories.tsx b/code/addons/test/src/components/InteractionsPanel.stories.tsx index 2efaa5d96c5..e9b8c9581fb 100644 --- a/code/addons/test/src/components/InteractionsPanel.stories.tsx +++ b/code/addons/test/src/components/InteractionsPanel.stories.tsx @@ -5,7 +5,8 @@ import { ManagerContext } from 'storybook/internal/manager-api'; import { styled } from 'storybook/internal/theming'; import type { Meta, StoryObj } from '@storybook/react'; -import { expect, fn, userEvent, waitFor, within } from '@storybook/test'; + +import { expect, fn, userEvent, waitFor, within } from 'storybook/test'; import { isChromatic } from '../../../../.storybook/isChromatic'; import { getCalls, getInteractions } from '../mocks'; diff --git a/code/addons/test/src/components/TestDiscrepancyMessage.stories.tsx b/code/addons/test/src/components/TestDiscrepancyMessage.stories.tsx index d6ca6aa8320..fffdb631cdc 100644 --- a/code/addons/test/src/components/TestDiscrepancyMessage.stories.tsx +++ b/code/addons/test/src/components/TestDiscrepancyMessage.stories.tsx @@ -4,7 +4,8 @@ import { CallStates } from 'storybook/internal/instrumenter'; import { ManagerContext } from 'storybook/internal/manager-api'; import type { Meta, StoryObj } from '@storybook/react'; -import { fn } from '@storybook/test'; + +import { fn } from 'storybook/test'; import { TestDiscrepancyMessage } from './TestDiscrepancyMessage'; diff --git a/code/addons/test/src/components/TestProviderRender.stories.tsx b/code/addons/test/src/components/TestProviderRender.stories.tsx index 40097eae1dd..385d42ed69d 100644 --- a/code/addons/test/src/components/TestProviderRender.stories.tsx +++ b/code/addons/test/src/components/TestProviderRender.stories.tsx @@ -6,7 +6,8 @@ import { styled } from 'storybook/internal/theming'; import { Addon_TypesEnum } from 'storybook/internal/types'; import type { Meta, StoryObj } from '@storybook/react'; -import { expect, fn } from '@storybook/test'; + +import { expect, fn } from 'storybook/test'; import { type Details, storeOptions } from '../constants'; import { store as mockStore } from '../manager-store.mock'; diff --git a/code/addons/test/src/manager-store.mock.ts b/code/addons/test/src/manager-store.mock.ts index 9b64e314b03..cc4d18ef510 100644 --- a/code/addons/test/src/manager-store.mock.ts +++ b/code/addons/test/src/manager-store.mock.ts @@ -1,6 +1,6 @@ import { experimental_MockUniversalStore } from 'storybook/internal/manager-api'; -import * as testUtils from '@storybook/test'; +import * as testUtils from 'storybook/test'; import { storeOptions } from './constants'; diff --git a/code/addons/test/template/stories/basics.stories.ts b/code/addons/test/template/stories/basics.stories.ts index 2db5f0e016f..87ec72a5076 100644 --- a/code/addons/test/template/stories/basics.stories.ts +++ b/code/addons/test/template/stories/basics.stories.ts @@ -7,7 +7,7 @@ import { waitFor, waitForElementToBeRemoved, within, -} from '@storybook/test'; +} from 'storybook/test'; export default { component: globalThis.Components.Form, diff --git a/code/addons/test/template/stories/unhandled-errors.stories.ts b/code/addons/test/template/stories/unhandled-errors.stories.ts index b9be0df743e..a5fed9b9a81 100644 --- a/code/addons/test/template/stories/unhandled-errors.stories.ts +++ b/code/addons/test/template/stories/unhandled-errors.stories.ts @@ -1,5 +1,5 @@ import { global as globalThis } from '@storybook/global'; -import { userEvent, within } from '@storybook/test'; +import { userEvent, within } from 'storybook/test'; export default { component: globalThis.Components.Button, diff --git a/code/addons/viewport/template/stories/parameters.stories.ts b/code/addons/viewport/template/stories/parameters.stories.ts index 697f675c214..3e607a42c49 100644 --- a/code/addons/viewport/template/stories/parameters.stories.ts +++ b/code/addons/viewport/template/stories/parameters.stories.ts @@ -1,5 +1,5 @@ import { global as globalThis } from '@storybook/global'; -import { expect } from '@storybook/test'; +import { expect } from 'storybook/test'; import { MINIMAL_VIEWPORTS } from '@storybook/addon-viewport'; diff --git a/code/core/package.json b/code/core/package.json index 7466dd601c0..0c299e6da9d 100644 --- a/code/core/package.json +++ b/code/core/package.json @@ -181,6 +181,10 @@ "import": "./dist/instrumenter/index.js", "require": "./dist/instrumenter/index.cjs" }, + "./test": { + "types": "./dist/test/index.d.ts", + "import": "./dist/test/index.js" + }, "./internal/preview/runtime": { "import": "./dist/preview/runtime.js" }, diff --git a/code/core/src/common/versions.ts b/code/core/src/common/versions.ts index dec62008fd3..8d8b0e688ca 100644 --- a/code/core/src/common/versions.ts +++ b/code/core/src/common/versions.ts @@ -50,7 +50,6 @@ export default { '@storybook/csf-plugin': '9.0.0-alpha.1', '@storybook/react-dom-shim': '9.0.0-alpha.1', '@storybook/source-loader': '9.0.0-alpha.1', - '@storybook/test': '9.0.0-alpha.1', '@storybook/preset-create-react-app': '9.0.0-alpha.1', '@storybook/preset-html-webpack': '9.0.0-alpha.1', '@storybook/preset-preact-webpack': '9.0.0-alpha.1', diff --git a/code/core/src/components/components/Modal/Modal.stories.tsx b/code/core/src/components/components/Modal/Modal.stories.tsx index 998e033d312..e0949badf68 100644 --- a/code/core/src/components/components/Modal/Modal.stories.tsx +++ b/code/core/src/components/components/Modal/Modal.stories.tsx @@ -1,7 +1,8 @@ import React, { useState } from 'react'; import type { Meta, StoryObj } from '@storybook/react'; -import { expect, userEvent, within } from '@storybook/test'; + +import { expect, userEvent, within } from 'storybook/test'; import { Button } from '../Button/Button'; import { Modal } from './Modal'; diff --git a/code/core/src/components/components/tabs/tabs.stories.tsx b/code/core/src/components/components/tabs/tabs.stories.tsx index f70565a2102..c4bad39dd12 100644 --- a/code/core/src/components/components/tabs/tabs.stories.tsx +++ b/code/core/src/components/components/tabs/tabs.stories.tsx @@ -2,11 +2,12 @@ import React from 'react'; import { BottomBarIcon, CloseIcon } from '@storybook/icons'; import type { Meta, StoryObj } from '@storybook/react'; -import { expect } from '@storybook/test'; -import { findByText, fireEvent, screen, userEvent, waitFor, within } from '@storybook/test'; import { action } from '@storybook/addon-actions'; +import { expect } from 'storybook/test'; +import { findByText, fireEvent, screen, userEvent, waitFor, within } from 'storybook/test'; + import { IconButton } from '../IconButton/IconButton'; import { TabWrapper, Tabs, TabsState } from './tabs'; import type { ChildrenList } from './tabs.helpers'; diff --git a/code/core/src/components/components/tooltip/WithTooltip.stories.tsx b/code/core/src/components/components/tooltip/WithTooltip.stories.tsx index 952dceeaf51..a5157f20e7e 100644 --- a/code/core/src/components/components/tooltip/WithTooltip.stories.tsx +++ b/code/core/src/components/components/tooltip/WithTooltip.stories.tsx @@ -4,7 +4,8 @@ import React from 'react'; import { styled } from 'storybook/internal/theming'; import type { StoryObj } from '@storybook/react'; -import { expect, screen } from '@storybook/test'; + +import { expect, screen } from 'storybook/test'; import { TooltipMessage } from './TooltipMessage'; import { WithToolTipState as WithTooltip } from './WithTooltip'; diff --git a/code/core/src/manager/components/layout/Layout.stories.tsx b/code/core/src/manager/components/layout/Layout.stories.tsx index e3f19df412d..c498a8e637e 100644 --- a/code/core/src/manager/components/layout/Layout.stories.tsx +++ b/code/core/src/manager/components/layout/Layout.stories.tsx @@ -5,10 +5,11 @@ import { LocationProvider } from 'storybook/internal/router'; import { styled } from 'storybook/internal/theming'; import type { Meta, StoryObj } from '@storybook/react'; -import { fn } from '@storybook/test'; import { action } from '@storybook/addon-actions'; +import { fn } from 'storybook/test'; + import MobileNavigationStoriesMeta from '../mobile/navigation/MobileNavigation.stories'; import { Layout } from './Layout'; import { LayoutProvider } from './LayoutProvider'; diff --git a/code/core/src/manager/components/mobile/about/MobileAbout.stories.tsx b/code/core/src/manager/components/mobile/about/MobileAbout.stories.tsx index 36759e03950..60e0ea71dce 100644 --- a/code/core/src/manager/components/mobile/about/MobileAbout.stories.tsx +++ b/code/core/src/manager/components/mobile/about/MobileAbout.stories.tsx @@ -3,7 +3,8 @@ import React, { useEffect } from 'react'; import { ManagerContext } from 'storybook/internal/manager-api'; import type { Meta, StoryObj } from '@storybook/react'; -import { within } from '@storybook/test'; + +import { within } from 'storybook/test'; import { LayoutProvider, useLayout } from '../../layout/LayoutProvider'; import { MobileAbout } from './MobileAbout'; diff --git a/code/core/src/manager/components/mobile/navigation/MobileNavigation.stories.tsx b/code/core/src/manager/components/mobile/navigation/MobileNavigation.stories.tsx index 3ee9be594fc..9a50930fa6a 100644 --- a/code/core/src/manager/components/mobile/navigation/MobileNavigation.stories.tsx +++ b/code/core/src/manager/components/mobile/navigation/MobileNavigation.stories.tsx @@ -3,9 +3,9 @@ import React from 'react'; import { ManagerContext } from 'storybook/internal/manager-api'; import type { Meta, StoryObj } from '@storybook/react'; -import { within } from '@storybook/test'; import { startCase } from 'es-toolkit'; +import { within } from 'storybook/test'; import { LayoutProvider, useLayout } from '../../layout/LayoutProvider'; import { MobileNavigation } from './MobileNavigation'; diff --git a/code/core/src/manager/components/notifications/NotificationItem.stories.tsx b/code/core/src/manager/components/notifications/NotificationItem.stories.tsx index 3af2381d945..453ca0393af 100644 --- a/code/core/src/manager/components/notifications/NotificationItem.stories.tsx +++ b/code/core/src/manager/components/notifications/NotificationItem.stories.tsx @@ -8,10 +8,11 @@ import { FaceHappyIcon, } from '@storybook/icons'; import type { Meta, StoryObj } from '@storybook/react'; -import { expect, fn, userEvent, waitFor, within } from '@storybook/test'; import { action } from '@storybook/addon-actions'; +import { expect, fn, userEvent, waitFor, within } from 'storybook/test'; + import NotificationItem from './NotificationItem'; const meta = { diff --git a/code/core/src/manager/components/sidebar/FileSearchList.stories.tsx b/code/core/src/manager/components/sidebar/FileSearchList.stories.tsx index 7388bf3cb4a..fd760a5f275 100644 --- a/code/core/src/manager/components/sidebar/FileSearchList.stories.tsx +++ b/code/core/src/manager/components/sidebar/FileSearchList.stories.tsx @@ -1,5 +1,6 @@ import type { Meta, StoryObj } from '@storybook/react'; -import { expect, findByText, fireEvent, fn } from '@storybook/test'; + +import { expect, findByText, fireEvent, fn } from 'storybook/test'; import { FileSearchList } from './FileSearchList'; diff --git a/code/core/src/manager/components/sidebar/FileSearchModal.stories.tsx b/code/core/src/manager/components/sidebar/FileSearchModal.stories.tsx index c9e1790ef11..52fcd0de34f 100644 --- a/code/core/src/manager/components/sidebar/FileSearchModal.stories.tsx +++ b/code/core/src/manager/components/sidebar/FileSearchModal.stories.tsx @@ -1,7 +1,8 @@ import React, { useState } from 'react'; import type { Meta, StoryObj } from '@storybook/react'; -import { expect, findByText, fireEvent, fn } from '@storybook/test'; + +import { expect, findByText, fireEvent, fn } from 'storybook/test'; import { WithResults } from './FileSearchList.stories'; import { FileSearchModal } from './FileSearchModal'; diff --git a/code/core/src/manager/components/sidebar/FilterToggle.stories.ts b/code/core/src/manager/components/sidebar/FilterToggle.stories.ts index 075b8c94dc9..f7528c87afe 100644 --- a/code/core/src/manager/components/sidebar/FilterToggle.stories.ts +++ b/code/core/src/manager/components/sidebar/FilterToggle.stories.ts @@ -1,4 +1,4 @@ -import { fn } from '@storybook/test'; +import { fn } from 'storybook/test'; import { FilterToggle } from './FilterToggle'; diff --git a/code/core/src/manager/components/sidebar/Heading.stories.tsx b/code/core/src/manager/components/sidebar/Heading.stories.tsx index 8e12d3eb777..603b0c0f05d 100644 --- a/code/core/src/manager/components/sidebar/Heading.stories.tsx +++ b/code/core/src/manager/components/sidebar/Heading.stories.tsx @@ -5,10 +5,11 @@ import { ThemeProvider, useTheme } from 'storybook/internal/theming'; import type { Theme } from 'storybook/internal/theming'; import type { Meta, StoryFn, StoryObj } from '@storybook/react'; -import { screen } from '@storybook/test'; import { action } from '@storybook/addon-actions'; +import { screen } from 'storybook/test'; + import { Heading } from './Heading'; type Story = StoryFn; diff --git a/code/core/src/manager/components/sidebar/Menu.stories.tsx b/code/core/src/manager/components/sidebar/Menu.stories.tsx index 858a04a2be9..6f085af4882 100644 --- a/code/core/src/manager/components/sidebar/Menu.stories.tsx +++ b/code/core/src/manager/components/sidebar/Menu.stories.tsx @@ -6,7 +6,8 @@ import { styled } from 'storybook/internal/theming'; import { LinkIcon } from '@storybook/icons'; import type { Meta, StoryObj } from '@storybook/react'; -import { expect, screen, userEvent, within } from '@storybook/test'; + +import { expect, screen, userEvent, within } from 'storybook/test'; import { useMenu } from '../../container/Menu'; import { LayoutProvider } from '../layout/LayoutProvider'; diff --git a/code/core/src/manager/components/sidebar/Refs.stories.tsx b/code/core/src/manager/components/sidebar/Refs.stories.tsx index c137c252e11..7dd746e4123 100644 --- a/code/core/src/manager/components/sidebar/Refs.stories.tsx +++ b/code/core/src/manager/components/sidebar/Refs.stories.tsx @@ -2,7 +2,7 @@ import React from 'react'; import { ManagerContext } from 'storybook/internal/manager-api'; -import { fn } from '@storybook/test'; +import { fn } from 'storybook/test'; import { standardData as standardHeaderData } from './Heading.stories'; import { IconSymbols } from './IconSymbols'; diff --git a/code/core/src/manager/components/sidebar/Sidebar.stories.tsx b/code/core/src/manager/components/sidebar/Sidebar.stories.tsx index 973419fccc7..f65bd2f1d78 100644 --- a/code/core/src/manager/components/sidebar/Sidebar.stories.tsx +++ b/code/core/src/manager/components/sidebar/Sidebar.stories.tsx @@ -5,7 +5,8 @@ import { ManagerContext } from 'storybook/internal/manager-api'; import type { API_StatusState, Addon_SidebarTopType } from 'storybook/internal/types'; import type { Meta, StoryObj } from '@storybook/react'; -import { expect, fn, userEvent, within } from '@storybook/test'; + +import { expect, fn, userEvent, within } from 'storybook/test'; import { LayoutProvider } from '../layout/LayoutProvider'; import { standardData as standardHeaderData } from './Heading.stories'; diff --git a/code/core/src/manager/components/sidebar/SidebarBottom.stories.tsx b/code/core/src/manager/components/sidebar/SidebarBottom.stories.tsx index 9d7fd7d8392..843652a7d7f 100644 --- a/code/core/src/manager/components/sidebar/SidebarBottom.stories.tsx +++ b/code/core/src/manager/components/sidebar/SidebarBottom.stories.tsx @@ -4,7 +4,8 @@ import { type API, ManagerContext } from 'storybook/internal/manager-api'; import { Addon_TypesEnum } from 'storybook/internal/types'; import type { Meta, StoryObj } from '@storybook/react'; -import { expect, fireEvent, fn, waitFor, within } from '@storybook/test'; + +import { expect, fireEvent, fn, waitFor, within } from 'storybook/test'; import { SidebarBottomBase } from './SidebarBottom'; diff --git a/code/core/src/manager/components/sidebar/TagsFilter.stories.tsx b/code/core/src/manager/components/sidebar/TagsFilter.stories.tsx index 89236acda68..96e5d6ab4c0 100644 --- a/code/core/src/manager/components/sidebar/TagsFilter.stories.tsx +++ b/code/core/src/manager/components/sidebar/TagsFilter.stories.tsx @@ -1,5 +1,6 @@ import type { Meta, StoryObj } from '@storybook/react'; -import { findByRole, fn } from '@storybook/test'; + +import { findByRole, fn } from 'storybook/test'; import { TagsFilter } from './TagsFilter'; diff --git a/code/core/src/manager/components/sidebar/TagsFilterPanel.stories.tsx b/code/core/src/manager/components/sidebar/TagsFilterPanel.stories.tsx index 0602d0ed7a4..74f47769aef 100644 --- a/code/core/src/manager/components/sidebar/TagsFilterPanel.stories.tsx +++ b/code/core/src/manager/components/sidebar/TagsFilterPanel.stories.tsx @@ -1,5 +1,6 @@ import type { Meta, StoryObj } from '@storybook/react'; -import { fn } from '@storybook/test'; + +import { fn } from 'storybook/test'; import { TagsFilterPanel } from './TagsFilterPanel'; diff --git a/code/core/src/manager/components/sidebar/TestingModule.stories.tsx b/code/core/src/manager/components/sidebar/TestingModule.stories.tsx index b043c006b4c..e7af5259a2e 100644 --- a/code/core/src/manager/components/sidebar/TestingModule.stories.tsx +++ b/code/core/src/manager/components/sidebar/TestingModule.stories.tsx @@ -7,7 +7,8 @@ import { styled } from 'storybook/internal/theming'; import { Addon_TypesEnum } from 'storybook/internal/types'; import type { Meta, StoryObj } from '@storybook/react'; -import { fireEvent, fn } from '@storybook/test'; + +import { fireEvent, fn } from 'storybook/test'; import { TestingModule } from './TestingModule'; diff --git a/code/core/src/manager/components/sidebar/Tree.stories.tsx b/code/core/src/manager/components/sidebar/Tree.stories.tsx index fdc231ba94f..73fc41c5616 100644 --- a/code/core/src/manager/components/sidebar/Tree.stories.tsx +++ b/code/core/src/manager/components/sidebar/Tree.stories.tsx @@ -8,10 +8,11 @@ import { } from 'storybook/internal/manager-api'; import type { Meta, StoryObj } from '@storybook/react'; -import { expect, fn, userEvent, within } from '@storybook/test'; import { action } from '@storybook/addon-actions'; +import { expect, fn, userEvent, within } from 'storybook/test'; + import { DEFAULT_REF_ID } from './Sidebar'; import { Tree } from './Tree'; import { index } from './mockdata.large'; diff --git a/code/core/src/manager/components/upgrade/UpgradeBlock.stories.tsx b/code/core/src/manager/components/upgrade/UpgradeBlock.stories.tsx index e882a41bf18..e9d06093621 100644 --- a/code/core/src/manager/components/upgrade/UpgradeBlock.stories.tsx +++ b/code/core/src/manager/components/upgrade/UpgradeBlock.stories.tsx @@ -3,7 +3,8 @@ import React from 'react'; import { ManagerContext } from 'storybook/internal/manager-api'; import type { Meta, StoryObj } from '@storybook/react'; -import { fn } from '@storybook/test'; + +import { fn } from 'storybook/test'; import { UpgradeBlock } from './UpgradeBlock'; diff --git a/code/core/src/manager/settings/about.stories.tsx b/code/core/src/manager/settings/about.stories.tsx index d63d246d447..670d4c3cbfc 100644 --- a/code/core/src/manager/settings/about.stories.tsx +++ b/code/core/src/manager/settings/about.stories.tsx @@ -1,7 +1,8 @@ import React from 'react'; import type { Meta, StoryObj } from '@storybook/react'; -import { fn } from '@storybook/test'; + +import { fn } from 'storybook/test'; import UpgradeBlockStoriesMeta from '../components/upgrade/UpgradeBlock.stories'; import { AboutScreen } from './About'; diff --git a/code/core/src/preview-errors.ts b/code/core/src/preview-errors.ts index eb083277daa..bed6db57243 100644 --- a/code/core/src/preview-errors.ts +++ b/code/core/src/preview-errors.ts @@ -60,7 +60,7 @@ export class ImplicitActionsDuringRendering extends StorybookError { We detected that you use an implicit action arg while ${data.phase} of your story. ${data.deprecated ? `\nThis is deprecated and won't work in Storybook 8 anymore.\n` : ``} Please provide an explicit spy to your args like this: - import { fn } from '@storybook/test'; + import { fn } from 'storybook/test'; ... args: { ${data.name}: fn() diff --git a/code/core/src/shared/universal-store/mock.ts b/code/core/src/shared/universal-store/mock.ts index a5695f48464..fc7214300ce 100644 --- a/code/core/src/shared/universal-store/mock.ts +++ b/code/core/src/shared/universal-store/mock.ts @@ -21,7 +21,7 @@ import type { StoreOptions } from './types'; * @example * * ```ts - * import * as testUtils from '@storybook/test'; // in stories + * import * as testUtils from 'storybook/test'; // in stories * import { vi as testUtils } from 'vitest'; // ... or in Vitest tests * * const initialState = { ... }; diff --git a/code/core/src/test/index.test.ts b/code/core/src/test/index.test.ts index e87c485c991..fb9fe2cd5ae 100644 --- a/code/core/src/test/index.test.ts +++ b/code/core/src/test/index.test.ts @@ -1,10 +1,10 @@ // @vitest-environment happy-dom import { describe, it, test } from 'vitest'; -import { expect, fn, isMockFunction, traverseArgs } from '@storybook/test'; - import { action } from '@storybook/addon-actions'; +import { expect, fn, isMockFunction, traverseArgs } from 'storybook/test'; + it('storybook expect and fn can be used in vitest test', () => { const spy = fn(); spy(1); diff --git a/code/core/template/stories/argMapping.stories.ts b/code/core/template/stories/argMapping.stories.ts index f2813a95d26..004ffd581e8 100644 --- a/code/core/template/stories/argMapping.stories.ts +++ b/code/core/template/stories/argMapping.stories.ts @@ -1,7 +1,7 @@ import type { PartialStoryFn, PlayFunctionContext, StoryContext } from 'storybook/internal/types'; import { global as globalThis } from '@storybook/global'; -import { expect, within } from '@storybook/test'; +import { expect, within } from 'storybook/test'; const arrows = { ArrowUp: { name: 'ArrowUp' }, diff --git a/code/core/template/stories/argTypes.stories.ts b/code/core/template/stories/argTypes.stories.ts index d64316c63b8..8e2731f8f2e 100644 --- a/code/core/template/stories/argTypes.stories.ts +++ b/code/core/template/stories/argTypes.stories.ts @@ -1,7 +1,7 @@ import type { PartialStoryFn, PlayFunctionContext, StoryContext } from 'storybook/internal/types'; import { global as globalThis } from '@storybook/global'; -import { expect, within } from '@storybook/test'; +import { expect, within } from 'storybook/test'; export default { component: globalThis.Components.Pre, diff --git a/code/core/template/stories/args.stories.ts b/code/core/template/stories/args.stories.ts index 43eed8f5070..12ca32b9fe4 100644 --- a/code/core/template/stories/args.stories.ts +++ b/code/core/template/stories/args.stories.ts @@ -6,7 +6,7 @@ import { import type { PartialStoryFn, PlayFunctionContext, StoryContext } from 'storybook/internal/types'; import { global as globalThis } from '@storybook/global'; -import { expect, within } from '@storybook/test'; +import { expect, within } from 'storybook/test'; function pick(obj, keys) { const result = {}; diff --git a/code/core/template/stories/autotitle.stories.ts b/code/core/template/stories/autotitle.stories.ts index 9399cf24121..6cf4173e43c 100644 --- a/code/core/template/stories/autotitle.stories.ts +++ b/code/core/template/stories/autotitle.stories.ts @@ -1,7 +1,7 @@ import type { PlayFunctionContext } from 'storybook/internal/types'; import { global as globalThis } from '@storybook/global'; -import { expect } from '@storybook/test'; +import { expect } from 'storybook/test'; export default { component: globalThis.Components.Pre, diff --git a/code/core/template/stories/before-each.stories.ts b/code/core/template/stories/before-each.stories.ts index 0d9a88cafa3..5d23e6c8b12 100644 --- a/code/core/template/stories/before-each.stories.ts +++ b/code/core/template/stories/before-each.stories.ts @@ -1,5 +1,5 @@ /* eslint-disable @typescript-eslint/naming-convention,storybook/prefer-pascal-case */ -import { expect } from '@storybook/test'; +import { expect } from 'storybook/test'; const meta = { component: globalThis.Components.Button, diff --git a/code/core/template/stories/component-play.stories.ts b/code/core/template/stories/component-play.stories.ts index db93783ed16..45ec63a8f53 100644 --- a/code/core/template/stories/component-play.stories.ts +++ b/code/core/template/stories/component-play.stories.ts @@ -1,7 +1,7 @@ import type { PartialStoryFn, PlayFunctionContext, StoryContext } from 'storybook/internal/types'; import { global as globalThis } from '@storybook/global'; -import { expect, within } from '@storybook/test'; +import { expect, within } from 'storybook/test'; export default { component: globalThis.Components.Pre, diff --git a/code/core/template/stories/decorators.stories.ts b/code/core/template/stories/decorators.stories.ts index d0822c0ab8c..f3602596898 100644 --- a/code/core/template/stories/decorators.stories.ts +++ b/code/core/template/stories/decorators.stories.ts @@ -12,7 +12,7 @@ import type { } from 'storybook/internal/types'; import { global as globalThis } from '@storybook/global'; -import { expect, within } from '@storybook/test'; +import { expect, within } from 'storybook/test'; export default { component: globalThis.Components.Pre, diff --git a/code/core/template/stories/destructuring-not-transpiled.stories.ts b/code/core/template/stories/destructuring-not-transpiled.stories.ts index b1f2c98e220..9e0490cede3 100644 --- a/code/core/template/stories/destructuring-not-transpiled.stories.ts +++ b/code/core/template/stories/destructuring-not-transpiled.stories.ts @@ -1,5 +1,5 @@ import { global as globalThis } from '@storybook/global'; -import { expect } from '@storybook/test'; +import { expect } from 'storybook/test'; export default { component: globalThis.Components.Button, diff --git a/code/core/template/stories/globals.stories.ts b/code/core/template/stories/globals.stories.ts index cbede539ce7..60378181448 100644 --- a/code/core/template/stories/globals.stories.ts +++ b/code/core/template/stories/globals.stories.ts @@ -1,7 +1,7 @@ import type { PartialStoryFn, PlayFunctionContext, StoryContext } from 'storybook/internal/types'; import { global as globalThis } from '@storybook/global'; -import { expect, within } from '@storybook/test'; +import { expect, within } from 'storybook/test'; export default { component: globalThis.Components.Pre, diff --git a/code/core/template/stories/hooks.stories.ts b/code/core/template/stories/hooks.stories.ts index b2d2cc01e73..6a2d22ffe88 100644 --- a/code/core/template/stories/hooks.stories.ts +++ b/code/core/template/stories/hooks.stories.ts @@ -2,7 +2,7 @@ import { useEffect, useState } from 'storybook/internal/preview-api'; import type { PartialStoryFn, StoryContext } from 'storybook/internal/types'; import { global as globalThis } from '@storybook/global'; -import { userEvent, within } from '@storybook/test'; +import { userEvent, within } from 'storybook/test'; export default { component: globalThis.Components.Button, diff --git a/code/core/template/stories/indexer.stories.ts b/code/core/template/stories/indexer.stories.ts index 684b195e5bf..d432751f215 100644 --- a/code/core/template/stories/indexer.stories.ts +++ b/code/core/template/stories/indexer.stories.ts @@ -1,7 +1,7 @@ import type { PlayFunctionContext } from 'storybook/internal/types'; import { global as globalThis } from '@storybook/global'; -import { expect } from '@storybook/test'; +import { expect } from 'storybook/test'; export default { component: globalThis.Components.Pre, diff --git a/code/core/template/stories/loader-enhancements.stories.ts b/code/core/template/stories/loader-enhancements.stories.ts index fdd1a7c4e64..07ac2d783b6 100644 --- a/code/core/template/stories/loader-enhancements.stories.ts +++ b/code/core/template/stories/loader-enhancements.stories.ts @@ -1,5 +1,5 @@ /* eslint-disable @typescript-eslint/naming-convention,storybook/prefer-pascal-case */ -import { expect, userEvent as globalUserEvent, within } from '@storybook/test'; +import { expect, userEvent as globalUserEvent, within } from 'storybook/test'; const meta = { component: globalThis.Components.Button, diff --git a/code/core/template/stories/loaders.stories.ts b/code/core/template/stories/loaders.stories.ts index b9a5d31eaf1..3c40352cd9c 100644 --- a/code/core/template/stories/loaders.stories.ts +++ b/code/core/template/stories/loaders.stories.ts @@ -1,7 +1,7 @@ import type { PartialStoryFn, StoryContext } from 'storybook/internal/types'; import { global as globalThis } from '@storybook/global'; -import { expect, within } from '@storybook/test'; +import { expect, within } from 'storybook/test'; export default { component: globalThis.Components.Pre, diff --git a/code/core/template/stories/module-mocking.stories.ts b/code/core/template/stories/module-mocking.stories.ts index f773f675ff5..317d39597ba 100644 --- a/code/core/template/stories/module-mocking.stories.ts +++ b/code/core/template/stories/module-mocking.stories.ts @@ -1,5 +1,5 @@ import { global as globalThis } from '@storybook/global'; -import { expect, fn, isMockFunction, mocked } from '@storybook/test'; +import { expect, fn, isMockFunction, mocked } from 'storybook/test'; // eslint-disable-next-line @typescript-eslint/ban-ts-comment // @ts-ignore This alias is set in the sandbox. Using ts-ignore instead of ts-expect-error to avoid build errors in the sandbox. diff --git a/code/core/template/stories/mount-in-play.stories.ts b/code/core/template/stories/mount-in-play.stories.ts index 22c92497783..795c0a2fd5a 100644 --- a/code/core/template/stories/mount-in-play.stories.ts +++ b/code/core/template/stories/mount-in-play.stories.ts @@ -1,4 +1,4 @@ -import { expect, fn } from '@storybook/test'; +import { expect, fn } from 'storybook/test'; const meta = { component: globalThis.Components.Button }; diff --git a/code/core/template/stories/names.stories.ts b/code/core/template/stories/names.stories.ts index 9ad9320b4e5..e3789ce93ec 100644 --- a/code/core/template/stories/names.stories.ts +++ b/code/core/template/stories/names.stories.ts @@ -1,7 +1,7 @@ import type { PlayFunctionContext } from 'storybook/internal/types'; import { global as globalThis } from '@storybook/global'; -import { expect } from '@storybook/test'; +import { expect } from 'storybook/test'; export default { component: globalThis.Components.Pre, diff --git a/code/core/template/stories/parameters.stories.ts b/code/core/template/stories/parameters.stories.ts index 5d702019719..00487ced490 100644 --- a/code/core/template/stories/parameters.stories.ts +++ b/code/core/template/stories/parameters.stories.ts @@ -1,7 +1,7 @@ import type { PartialStoryFn, PlayFunctionContext, StoryContext } from 'storybook/internal/types'; import { global as globalThis } from '@storybook/global'; -import { expect, within } from '@storybook/test'; +import { expect, within } from 'storybook/test'; export default { component: globalThis.Components.Pre, diff --git a/code/core/template/stories/rendering.stories.ts b/code/core/template/stories/rendering.stories.ts index 31cb903d19b..45cb1bd57e2 100644 --- a/code/core/template/stories/rendering.stories.ts +++ b/code/core/template/stories/rendering.stories.ts @@ -7,7 +7,7 @@ import { import type { PlayFunctionContext } from 'storybook/internal/types'; import { global as globalThis } from '@storybook/global'; -import { expect, waitFor, within } from '@storybook/test'; +import { expect, waitFor, within } from 'storybook/test'; export default { component: globalThis.Components.Button, diff --git a/code/core/template/stories/shortcuts.stories.ts b/code/core/template/stories/shortcuts.stories.ts index 998b417d3de..a9c334ca481 100644 --- a/code/core/template/stories/shortcuts.stories.ts +++ b/code/core/template/stories/shortcuts.stories.ts @@ -2,7 +2,7 @@ import { PREVIEW_KEYDOWN } from 'storybook/internal/core-events'; import type { PlayFunctionContext } from 'storybook/internal/csf'; import { global as globalThis } from '@storybook/global'; -import { expect, fn, userEvent, within } from '@storybook/test'; +import { expect, fn, userEvent, within } from 'storybook/test'; export default { component: globalThis.Components.Form, diff --git a/code/core/template/stories/tags-add.stories.ts b/code/core/template/stories/tags-add.stories.ts index a86addb4aea..edb09cd39f3 100644 --- a/code/core/template/stories/tags-add.stories.ts +++ b/code/core/template/stories/tags-add.stories.ts @@ -1,7 +1,7 @@ import type { PartialStoryFn, PlayFunctionContext, StoryContext } from 'storybook/internal/types'; import { global as globalThis } from '@storybook/global'; -import { expect, within } from '@storybook/test'; +import { expect, within } from 'storybook/test'; export default { component: globalThis.Components.Pre, diff --git a/code/core/template/stories/tags-config.stories.ts b/code/core/template/stories/tags-config.stories.ts index 03c835832e5..df211639d37 100644 --- a/code/core/template/stories/tags-config.stories.ts +++ b/code/core/template/stories/tags-config.stories.ts @@ -1,7 +1,7 @@ import type { PartialStoryFn, PlayFunctionContext, StoryContext } from 'storybook/internal/types'; import { global as globalThis } from '@storybook/global'; -import { expect, within } from '@storybook/test'; +import { expect, within } from 'storybook/test'; export default { component: globalThis.Components.Pre, diff --git a/code/core/template/stories/tags-remove.stories.ts b/code/core/template/stories/tags-remove.stories.ts index 27c313381a7..9d948f3d526 100644 --- a/code/core/template/stories/tags-remove.stories.ts +++ b/code/core/template/stories/tags-remove.stories.ts @@ -1,7 +1,7 @@ import type { PartialStoryFn, PlayFunctionContext, StoryContext } from 'storybook/internal/types'; import { global as globalThis } from '@storybook/global'; -import { expect, within } from '@storybook/test'; +import { expect, within } from 'storybook/test'; export default { component: globalThis.Components.Pre, diff --git a/code/core/template/stories/title.stories.ts b/code/core/template/stories/title.stories.ts index 0c0246a096f..6e2c74c50ab 100644 --- a/code/core/template/stories/title.stories.ts +++ b/code/core/template/stories/title.stories.ts @@ -1,7 +1,7 @@ import type { PlayFunctionContext } from 'storybook/internal/types'; import { global as globalThis } from '@storybook/global'; -import { expect } from '@storybook/test'; +import { expect } from 'storybook/test'; export default { component: globalThis.Components.Pre, diff --git a/code/core/template/stories/utils.mock.ts b/code/core/template/stories/utils.mock.ts index 93a72d03a0e..430f08797ae 100644 --- a/code/core/template/stories/utils.mock.ts +++ b/code/core/template/stories/utils.mock.ts @@ -1,4 +1,4 @@ -import { fn } from '@storybook/test'; +import { fn } from 'storybook/test'; import * as utils from './utils.ts'; diff --git a/code/frameworks/angular/template/cli/button.stories.ts b/code/frameworks/angular/template/cli/button.stories.ts index dedeca1f2e9..5c12e314188 100644 --- a/code/frameworks/angular/template/cli/button.stories.ts +++ b/code/frameworks/angular/template/cli/button.stories.ts @@ -1,5 +1,5 @@ import type { Meta, StoryObj } from '@storybook/angular'; -import { fn } from '@storybook/test'; +import { fn } from 'storybook/test'; import { ButtonComponent } from './button.component'; diff --git a/code/frameworks/angular/template/cli/header.stories.ts b/code/frameworks/angular/template/cli/header.stories.ts index ea9b0894e4b..8a9f73b151c 100644 --- a/code/frameworks/angular/template/cli/header.stories.ts +++ b/code/frameworks/angular/template/cli/header.stories.ts @@ -1,5 +1,5 @@ import type { Meta, StoryObj } from '@storybook/angular'; -import { fn } from '@storybook/test'; +import { fn } from 'storybook/test'; import { HeaderComponent } from './header.component'; diff --git a/code/frameworks/angular/template/cli/page.stories.ts b/code/frameworks/angular/template/cli/page.stories.ts index 8237ee228b3..47c99b233f7 100644 --- a/code/frameworks/angular/template/cli/page.stories.ts +++ b/code/frameworks/angular/template/cli/page.stories.ts @@ -1,5 +1,5 @@ import type { Meta, StoryObj } from '@storybook/angular'; -import { expect, userEvent, within } from '@storybook/test'; +import { expect, userEvent, within } from 'storybook/test'; import { PageComponent } from './page.component'; diff --git a/code/frameworks/angular/template/stories_angular-cli-default-ts/signal/button.stories.ts b/code/frameworks/angular/template/stories_angular-cli-default-ts/signal/button.stories.ts index db1fa2125d5..6849fc9bb42 100644 --- a/code/frameworks/angular/template/stories_angular-cli-default-ts/signal/button.stories.ts +++ b/code/frameworks/angular/template/stories_angular-cli-default-ts/signal/button.stories.ts @@ -1,5 +1,5 @@ import { Meta, StoryObj } from '@storybook/angular'; -import { fn } from '@storybook/test'; +import { fn } from 'storybook/test'; import SignalButtonComponent from './button.component'; diff --git a/code/frameworks/angular/template/stories_angular-cli-prerelease/signal/button.stories.ts b/code/frameworks/angular/template/stories_angular-cli-prerelease/signal/button.stories.ts index db1fa2125d5..6849fc9bb42 100644 --- a/code/frameworks/angular/template/stories_angular-cli-prerelease/signal/button.stories.ts +++ b/code/frameworks/angular/template/stories_angular-cli-prerelease/signal/button.stories.ts @@ -1,5 +1,5 @@ import { Meta, StoryObj } from '@storybook/angular'; -import { fn } from '@storybook/test'; +import { fn } from 'storybook/test'; import SignalButtonComponent from './button.component'; diff --git a/code/frameworks/ember/template/cli/Button.stories.js b/code/frameworks/ember/template/cli/Button.stories.js index 35ba57166a7..93511eade46 100644 --- a/code/frameworks/ember/template/cli/Button.stories.js +++ b/code/frameworks/ember/template/cli/Button.stories.js @@ -1,9 +1,8 @@ -import { fn } from '@storybook/test'; - import { action } from '@storybook/addon-actions'; import { linkTo } from '@storybook/addon-links'; import { hbs } from 'ember-cli-htmlbars'; +import { fn } from 'storybook/test'; // More on how to set up stories at: https://storybook.js.org/docs/writing-stories export default { diff --git a/code/frameworks/experimental-nextjs-vite/src/export-mocks/cache/index.ts b/code/frameworks/experimental-nextjs-vite/src/export-mocks/cache/index.ts index 35b74b8cb02..d81ed0affc7 100644 --- a/code/frameworks/experimental-nextjs-vite/src/export-mocks/cache/index.ts +++ b/code/frameworks/experimental-nextjs-vite/src/export-mocks/cache/index.ts @@ -1,5 +1,5 @@ /* eslint-disable @typescript-eslint/naming-convention */ -import { fn } from '@storybook/test'; +import { fn } from 'storybook/test'; // biome-ignore lint/suspicious/noExplicitAny: type Callback = (...args: any[]) => Promise; diff --git a/code/frameworks/experimental-nextjs-vite/src/export-mocks/headers/cookies.ts b/code/frameworks/experimental-nextjs-vite/src/export-mocks/headers/cookies.ts index b1eb6a692ef..4697a1afb97 100644 --- a/code/frameworks/experimental-nextjs-vite/src/export-mocks/headers/cookies.ts +++ b/code/frameworks/experimental-nextjs-vite/src/export-mocks/headers/cookies.ts @@ -1,13 +1,12 @@ // We need this import to be a singleton, and because it's used in multiple entrypoints // both in ESM and CJS, importing it via the package name instead of having a local import // is the only way to achieve it actually being a singleton -import { fn } from '@storybook/test'; - // eslint-disable-next-line @typescript-eslint/ban-ts-comment // @ts-ignore we must ignore types here as during compilation they are not generated yet import { headers } from '@storybook/experimental-nextjs-vite/headers.mock'; import { RequestCookies } from 'next/dist/compiled/@edge-runtime/cookies'; +import { fn } from 'storybook/test'; class RequestCookiesMock extends RequestCookies { get = fn(super.get.bind(this)).mockName('next/headers::cookies().get'); diff --git a/code/frameworks/experimental-nextjs-vite/src/export-mocks/headers/headers.ts b/code/frameworks/experimental-nextjs-vite/src/export-mocks/headers/headers.ts index 1aceec57089..1d65c9285d9 100644 --- a/code/frameworks/experimental-nextjs-vite/src/export-mocks/headers/headers.ts +++ b/code/frameworks/experimental-nextjs-vite/src/export-mocks/headers/headers.ts @@ -1,6 +1,5 @@ -import { fn } from '@storybook/test'; - import { HeadersAdapter } from 'next/dist/server/web/spec-extension/adapters/headers'; +import { fn } from 'storybook/test'; class HeadersAdapterMock extends HeadersAdapter { constructor() { diff --git a/code/frameworks/experimental-nextjs-vite/src/export-mocks/headers/index.ts b/code/frameworks/experimental-nextjs-vite/src/export-mocks/headers/index.ts index 1c903963ba2..f1e27b49c64 100644 --- a/code/frameworks/experimental-nextjs-vite/src/export-mocks/headers/index.ts +++ b/code/frameworks/experimental-nextjs-vite/src/export-mocks/headers/index.ts @@ -1,7 +1,6 @@ -import { fn } from '@storybook/test'; - import { draftMode as originalDraftMode } from 'next/dist/server/request/draft-mode'; import * as headers from 'next/dist/server/request/headers'; +import { fn } from 'storybook/test'; // re-exports of the actual module export * from 'next/dist/server/request/headers'; diff --git a/code/frameworks/experimental-nextjs-vite/src/export-mocks/navigation/index.ts b/code/frameworks/experimental-nextjs-vite/src/export-mocks/navigation/index.ts index 8cec0b3266f..c2c63c3c78d 100644 --- a/code/frameworks/experimental-nextjs-vite/src/export-mocks/navigation/index.ts +++ b/code/frameworks/experimental-nextjs-vite/src/export-mocks/navigation/index.ts @@ -1,11 +1,10 @@ import { NextjsRouterMocksNotAvailable } from 'storybook/internal/preview-errors'; -import type { Mock } from '@storybook/test'; -import { fn } from '@storybook/test'; - import * as actual from 'next/dist/client/components/navigation'; import { getRedirectError } from 'next/dist/client/components/redirect'; import { RedirectStatusCode } from 'next/dist/client/components/redirect-status-code'; +import type { Mock } from 'storybook/test'; +import { fn } from 'storybook/test'; let navigationAPI: { push: Mock; diff --git a/code/frameworks/experimental-nextjs-vite/src/export-mocks/router/index.ts b/code/frameworks/experimental-nextjs-vite/src/export-mocks/router/index.ts index c6e93e804f0..26ee30342c7 100644 --- a/code/frameworks/experimental-nextjs-vite/src/export-mocks/router/index.ts +++ b/code/frameworks/experimental-nextjs-vite/src/export-mocks/router/index.ts @@ -1,10 +1,9 @@ import { NextjsRouterMocksNotAvailable } from 'storybook/internal/preview-errors'; -import type { Mock } from '@storybook/test'; -import { fn } from '@storybook/test'; - import singletonRouter, * as originalRouter from 'next/dist/client/router'; import type { NextRouter, SingletonRouter } from 'next/router'; +import type { Mock } from 'storybook/test'; +import { fn } from 'storybook/test'; const defaultRouterState = { route: '/', diff --git a/code/frameworks/experimental-nextjs-vite/template/cli/js/Button.stories.js b/code/frameworks/experimental-nextjs-vite/template/cli/js/Button.stories.js index 045d9c477ab..1b56021e71d 100644 --- a/code/frameworks/experimental-nextjs-vite/template/cli/js/Button.stories.js +++ b/code/frameworks/experimental-nextjs-vite/template/cli/js/Button.stories.js @@ -1,4 +1,4 @@ -import { fn } from '@storybook/test'; +import { fn } from 'storybook/test'; import { Button } from './Button'; diff --git a/code/frameworks/experimental-nextjs-vite/template/cli/js/Header.stories.js b/code/frameworks/experimental-nextjs-vite/template/cli/js/Header.stories.js index 699abab0794..9fe689e0ac8 100644 --- a/code/frameworks/experimental-nextjs-vite/template/cli/js/Header.stories.js +++ b/code/frameworks/experimental-nextjs-vite/template/cli/js/Header.stories.js @@ -1,4 +1,4 @@ -import { fn } from '@storybook/test'; +import { fn } from 'storybook/test'; import { Header } from './Header'; diff --git a/code/frameworks/experimental-nextjs-vite/template/cli/js/Page.stories.js b/code/frameworks/experimental-nextjs-vite/template/cli/js/Page.stories.js index 7b9906a7351..1ffea36cf37 100644 --- a/code/frameworks/experimental-nextjs-vite/template/cli/js/Page.stories.js +++ b/code/frameworks/experimental-nextjs-vite/template/cli/js/Page.stories.js @@ -1,4 +1,4 @@ -import { expect, userEvent, within } from '@storybook/test'; +import { expect, userEvent, within } from 'storybook/test'; import { Page } from './Page'; diff --git a/code/frameworks/experimental-nextjs-vite/template/cli/ts-4-9/Button.stories.ts b/code/frameworks/experimental-nextjs-vite/template/cli/ts-4-9/Button.stories.ts index 2a05e01b06f..535e1b3fd96 100644 --- a/code/frameworks/experimental-nextjs-vite/template/cli/ts-4-9/Button.stories.ts +++ b/code/frameworks/experimental-nextjs-vite/template/cli/ts-4-9/Button.stories.ts @@ -1,5 +1,6 @@ import type { Meta, StoryObj } from '@storybook/react'; -import { fn } from '@storybook/test'; + +import { fn } from 'storybook/test'; import { Button } from './Button'; diff --git a/code/frameworks/experimental-nextjs-vite/template/cli/ts-4-9/Header.stories.ts b/code/frameworks/experimental-nextjs-vite/template/cli/ts-4-9/Header.stories.ts index 80c71d0f520..b233bcb4f4d 100644 --- a/code/frameworks/experimental-nextjs-vite/template/cli/ts-4-9/Header.stories.ts +++ b/code/frameworks/experimental-nextjs-vite/template/cli/ts-4-9/Header.stories.ts @@ -1,5 +1,6 @@ import type { Meta, StoryObj } from '@storybook/react'; -import { fn } from '@storybook/test'; + +import { fn } from 'storybook/test'; import { Header } from './Header'; diff --git a/code/frameworks/experimental-nextjs-vite/template/cli/ts-4-9/Page.stories.ts b/code/frameworks/experimental-nextjs-vite/template/cli/ts-4-9/Page.stories.ts index 5d2c688a978..6c39800e3e5 100644 --- a/code/frameworks/experimental-nextjs-vite/template/cli/ts-4-9/Page.stories.ts +++ b/code/frameworks/experimental-nextjs-vite/template/cli/ts-4-9/Page.stories.ts @@ -1,5 +1,6 @@ import type { Meta, StoryObj } from '@storybook/react'; -import { expect, userEvent, within } from '@storybook/test'; + +import { expect, userEvent, within } from 'storybook/test'; import { Page } from './Page'; diff --git a/code/frameworks/experimental-nextjs-vite/template/stories/Head.stories.tsx b/code/frameworks/experimental-nextjs-vite/template/stories/Head.stories.tsx index 0d344078868..e31bce71f13 100644 --- a/code/frameworks/experimental-nextjs-vite/template/stories/Head.stories.tsx +++ b/code/frameworks/experimental-nextjs-vite/template/stories/Head.stories.tsx @@ -2,9 +2,9 @@ import React from 'react'; import type { Meta } from '@storybook/react'; import type { StoryObj } from '@storybook/react'; -import { expect, waitFor } from '@storybook/test'; import Head from 'next/head'; +import { expect, waitFor } from 'storybook/test'; function Component() { return ( diff --git a/code/frameworks/experimental-nextjs-vite/template/stories/Navigation.stories.tsx b/code/frameworks/experimental-nextjs-vite/template/stories/Navigation.stories.tsx index 4b9b49904de..a71e3a982ce 100644 --- a/code/frameworks/experimental-nextjs-vite/template/stories/Navigation.stories.tsx +++ b/code/frameworks/experimental-nextjs-vite/template/stories/Navigation.stories.tsx @@ -1,7 +1,6 @@ import React from 'react'; import type { Meta, StoryObj } from '@storybook/react'; -import { expect, userEvent, within } from '@storybook/test'; import { getRouter } from '@storybook/experimental-nextjs-vite/navigation.mock'; @@ -13,6 +12,7 @@ import { useSelectedLayoutSegment, useSelectedLayoutSegments, } from 'next/navigation'; +import { expect, userEvent, within } from 'storybook/test'; function Component() { const router = useRouter(); diff --git a/code/frameworks/experimental-nextjs-vite/template/stories/NextHeader.stories.tsx b/code/frameworks/experimental-nextjs-vite/template/stories/NextHeader.stories.tsx index 1d31006f63e..60f1d1213fb 100644 --- a/code/frameworks/experimental-nextjs-vite/template/stories/NextHeader.stories.tsx +++ b/code/frameworks/experimental-nextjs-vite/template/stories/NextHeader.stories.tsx @@ -1,9 +1,10 @@ import type { Meta } from '@storybook/react'; import type { StoryObj } from '@storybook/react'; -import { expect, userEvent, within } from '@storybook/test'; import { cookies, headers } from '@storybook/experimental-nextjs-vite/headers.mock'; +import { expect, userEvent, within } from 'storybook/test'; + import NextHeader from './NextHeader'; export default { diff --git a/code/frameworks/experimental-nextjs-vite/template/stories/Redirect.stories.tsx b/code/frameworks/experimental-nextjs-vite/template/stories/Redirect.stories.tsx index 47fd4c5228d..d383105c819 100644 --- a/code/frameworks/experimental-nextjs-vite/template/stories/Redirect.stories.tsx +++ b/code/frameworks/experimental-nextjs-vite/template/stories/Redirect.stories.tsx @@ -1,9 +1,9 @@ import React from 'react'; import type { Meta, StoryObj } from '@storybook/react'; -import { userEvent, within } from '@storybook/test'; import { redirect } from 'next/navigation'; +import { userEvent, within } from 'storybook/test'; let state = 'Bug! Not invalidated'; diff --git a/code/frameworks/experimental-nextjs-vite/template/stories/Router.stories.tsx b/code/frameworks/experimental-nextjs-vite/template/stories/Router.stories.tsx index 7b1d5b0ec0c..0be3864fd22 100644 --- a/code/frameworks/experimental-nextjs-vite/template/stories/Router.stories.tsx +++ b/code/frameworks/experimental-nextjs-vite/template/stories/Router.stories.tsx @@ -1,11 +1,11 @@ import React from 'react'; import type { Meta, StoryObj } from '@storybook/react'; -import { expect, userEvent, within } from '@storybook/test'; import { getRouter } from '@storybook/experimental-nextjs-vite/router.mock'; import Router, { useRouter } from 'next/router'; +import { expect, userEvent, within } from 'storybook/test'; function Component() { const router = useRouter(); diff --git a/code/frameworks/experimental-nextjs-vite/template/stories/ServerActions.stories.tsx b/code/frameworks/experimental-nextjs-vite/template/stories/ServerActions.stories.tsx index 0844293c34f..ce57c4cdbbc 100644 --- a/code/frameworks/experimental-nextjs-vite/template/stories/ServerActions.stories.tsx +++ b/code/frameworks/experimental-nextjs-vite/template/stories/ServerActions.stories.tsx @@ -1,12 +1,13 @@ import React from 'react'; import type { Meta, StoryObj } from '@storybook/react'; -import { expect, userEvent, waitFor, within } from '@storybook/test'; import { revalidatePath } from '@storybook/experimental-nextjs-vite/cache.mock'; import { cookies } from '@storybook/experimental-nextjs-vite/headers.mock'; import { getRouter, redirect } from '@storybook/experimental-nextjs-vite/navigation.mock'; +import { expect, userEvent, waitFor, within } from 'storybook/test'; + import { accessRoute, login, logout } from './ServerActions'; function Component() { diff --git a/code/frameworks/nextjs/src/export-mocks/cache/index.ts b/code/frameworks/nextjs/src/export-mocks/cache/index.ts index 0344304bc79..16ecd0b42e4 100644 --- a/code/frameworks/nextjs/src/export-mocks/cache/index.ts +++ b/code/frameworks/nextjs/src/export-mocks/cache/index.ts @@ -1,7 +1,6 @@ -import { fn } from '@storybook/test'; - import { unstable_cache } from 'next/dist/server/web/spec-extension/unstable-cache'; import { unstable_noStore } from 'next/dist/server/web/spec-extension/unstable-no-store'; +import { fn } from 'storybook/test'; // mock utilities/overrides (as of Next v14.2.0) const revalidatePath = fn().mockName('next/cache::revalidatePath'); diff --git a/code/frameworks/nextjs/src/export-mocks/headers/cookies.ts b/code/frameworks/nextjs/src/export-mocks/headers/cookies.ts index 02e335834b8..b8125b5fef1 100644 --- a/code/frameworks/nextjs/src/export-mocks/headers/cookies.ts +++ b/code/frameworks/nextjs/src/export-mocks/headers/cookies.ts @@ -4,9 +4,9 @@ // eslint-disable-next-line @typescript-eslint/ban-ts-comment // @ts-ignore we must ignore types here as during compilation they are not generated yet import { headers } from '@storybook/nextjs/headers.mock'; -import { fn } from '@storybook/test'; import { RequestCookies } from 'next/dist/compiled/@edge-runtime/cookies'; +import { fn } from 'storybook/test'; class RequestCookiesMock extends RequestCookies { get = fn(super.get.bind(this)).mockName('next/headers::cookies().get'); diff --git a/code/frameworks/nextjs/src/export-mocks/headers/headers.ts b/code/frameworks/nextjs/src/export-mocks/headers/headers.ts index 1aceec57089..1d65c9285d9 100644 --- a/code/frameworks/nextjs/src/export-mocks/headers/headers.ts +++ b/code/frameworks/nextjs/src/export-mocks/headers/headers.ts @@ -1,6 +1,5 @@ -import { fn } from '@storybook/test'; - import { HeadersAdapter } from 'next/dist/server/web/spec-extension/adapters/headers'; +import { fn } from 'storybook/test'; class HeadersAdapterMock extends HeadersAdapter { constructor() { diff --git a/code/frameworks/nextjs/src/export-mocks/headers/index.ts b/code/frameworks/nextjs/src/export-mocks/headers/index.ts index 1c903963ba2..f1e27b49c64 100644 --- a/code/frameworks/nextjs/src/export-mocks/headers/index.ts +++ b/code/frameworks/nextjs/src/export-mocks/headers/index.ts @@ -1,7 +1,6 @@ -import { fn } from '@storybook/test'; - import { draftMode as originalDraftMode } from 'next/dist/server/request/draft-mode'; import * as headers from 'next/dist/server/request/headers'; +import { fn } from 'storybook/test'; // re-exports of the actual module export * from 'next/dist/server/request/headers'; diff --git a/code/frameworks/nextjs/src/export-mocks/navigation/index.ts b/code/frameworks/nextjs/src/export-mocks/navigation/index.ts index 8cec0b3266f..c2c63c3c78d 100644 --- a/code/frameworks/nextjs/src/export-mocks/navigation/index.ts +++ b/code/frameworks/nextjs/src/export-mocks/navigation/index.ts @@ -1,11 +1,10 @@ import { NextjsRouterMocksNotAvailable } from 'storybook/internal/preview-errors'; -import type { Mock } from '@storybook/test'; -import { fn } from '@storybook/test'; - import * as actual from 'next/dist/client/components/navigation'; import { getRedirectError } from 'next/dist/client/components/redirect'; import { RedirectStatusCode } from 'next/dist/client/components/redirect-status-code'; +import type { Mock } from 'storybook/test'; +import { fn } from 'storybook/test'; let navigationAPI: { push: Mock; diff --git a/code/frameworks/nextjs/src/export-mocks/router/index.ts b/code/frameworks/nextjs/src/export-mocks/router/index.ts index c6e93e804f0..26ee30342c7 100644 --- a/code/frameworks/nextjs/src/export-mocks/router/index.ts +++ b/code/frameworks/nextjs/src/export-mocks/router/index.ts @@ -1,10 +1,9 @@ import { NextjsRouterMocksNotAvailable } from 'storybook/internal/preview-errors'; -import type { Mock } from '@storybook/test'; -import { fn } from '@storybook/test'; - import singletonRouter, * as originalRouter from 'next/dist/client/router'; import type { NextRouter, SingletonRouter } from 'next/router'; +import type { Mock } from 'storybook/test'; +import { fn } from 'storybook/test'; const defaultRouterState = { route: '/', diff --git a/code/frameworks/nextjs/template/cli/js/Button.stories.js b/code/frameworks/nextjs/template/cli/js/Button.stories.js index 045d9c477ab..1b56021e71d 100644 --- a/code/frameworks/nextjs/template/cli/js/Button.stories.js +++ b/code/frameworks/nextjs/template/cli/js/Button.stories.js @@ -1,4 +1,4 @@ -import { fn } from '@storybook/test'; +import { fn } from 'storybook/test'; import { Button } from './Button'; diff --git a/code/frameworks/nextjs/template/cli/js/Header.stories.js b/code/frameworks/nextjs/template/cli/js/Header.stories.js index 699abab0794..9fe689e0ac8 100644 --- a/code/frameworks/nextjs/template/cli/js/Header.stories.js +++ b/code/frameworks/nextjs/template/cli/js/Header.stories.js @@ -1,4 +1,4 @@ -import { fn } from '@storybook/test'; +import { fn } from 'storybook/test'; import { Header } from './Header'; diff --git a/code/frameworks/nextjs/template/cli/js/Page.stories.js b/code/frameworks/nextjs/template/cli/js/Page.stories.js index 7b9906a7351..1ffea36cf37 100644 --- a/code/frameworks/nextjs/template/cli/js/Page.stories.js +++ b/code/frameworks/nextjs/template/cli/js/Page.stories.js @@ -1,4 +1,4 @@ -import { expect, userEvent, within } from '@storybook/test'; +import { expect, userEvent, within } from 'storybook/test'; import { Page } from './Page'; diff --git a/code/frameworks/nextjs/template/cli/ts-4-9/Button.stories.ts b/code/frameworks/nextjs/template/cli/ts-4-9/Button.stories.ts index 2a05e01b06f..535e1b3fd96 100644 --- a/code/frameworks/nextjs/template/cli/ts-4-9/Button.stories.ts +++ b/code/frameworks/nextjs/template/cli/ts-4-9/Button.stories.ts @@ -1,5 +1,6 @@ import type { Meta, StoryObj } from '@storybook/react'; -import { fn } from '@storybook/test'; + +import { fn } from 'storybook/test'; import { Button } from './Button'; diff --git a/code/frameworks/nextjs/template/cli/ts-4-9/Header.stories.ts b/code/frameworks/nextjs/template/cli/ts-4-9/Header.stories.ts index 80c71d0f520..b233bcb4f4d 100644 --- a/code/frameworks/nextjs/template/cli/ts-4-9/Header.stories.ts +++ b/code/frameworks/nextjs/template/cli/ts-4-9/Header.stories.ts @@ -1,5 +1,6 @@ import type { Meta, StoryObj } from '@storybook/react'; -import { fn } from '@storybook/test'; + +import { fn } from 'storybook/test'; import { Header } from './Header'; diff --git a/code/frameworks/nextjs/template/cli/ts-4-9/Page.stories.ts b/code/frameworks/nextjs/template/cli/ts-4-9/Page.stories.ts index 5d2c688a978..6c39800e3e5 100644 --- a/code/frameworks/nextjs/template/cli/ts-4-9/Page.stories.ts +++ b/code/frameworks/nextjs/template/cli/ts-4-9/Page.stories.ts @@ -1,5 +1,6 @@ import type { Meta, StoryObj } from '@storybook/react'; -import { expect, userEvent, within } from '@storybook/test'; + +import { expect, userEvent, within } from 'storybook/test'; import { Page } from './Page'; diff --git a/code/frameworks/nextjs/template/stories/Head.stories.tsx b/code/frameworks/nextjs/template/stories/Head.stories.tsx index 540d0e04dc3..14269395a34 100644 --- a/code/frameworks/nextjs/template/stories/Head.stories.tsx +++ b/code/frameworks/nextjs/template/stories/Head.stories.tsx @@ -1,9 +1,9 @@ import React from 'react'; import type { Meta, StoryObj } from '@storybook/react'; -import { expect, waitFor } from '@storybook/test'; import Head from 'next/head'; +import { expect, waitFor } from 'storybook/test'; function Component() { return ( diff --git a/code/frameworks/nextjs/template/stories/Navigation.stories.tsx b/code/frameworks/nextjs/template/stories/Navigation.stories.tsx index 5c4872d1ac3..f9e33684658 100644 --- a/code/frameworks/nextjs/template/stories/Navigation.stories.tsx +++ b/code/frameworks/nextjs/template/stories/Navigation.stories.tsx @@ -2,7 +2,6 @@ import React from 'react'; import { getRouter } from '@storybook/nextjs/navigation.mock'; import type { Meta, StoryObj } from '@storybook/react'; -import { expect, userEvent, within } from '@storybook/test'; import { useParams, @@ -12,6 +11,7 @@ import { useSelectedLayoutSegment, useSelectedLayoutSegments, } from 'next/navigation'; +import { expect, userEvent, within } from 'storybook/test'; function Component() { const router = useRouter(); diff --git a/code/frameworks/nextjs/template/stories/Router.stories.tsx b/code/frameworks/nextjs/template/stories/Router.stories.tsx index d6586364fd0..b7e31de4159 100644 --- a/code/frameworks/nextjs/template/stories/Router.stories.tsx +++ b/code/frameworks/nextjs/template/stories/Router.stories.tsx @@ -2,9 +2,9 @@ import React from 'react'; import { getRouter } from '@storybook/nextjs/router.mock'; import type { Meta, StoryObj } from '@storybook/react'; -import { expect, userEvent, within } from '@storybook/test'; import Router, { useRouter } from 'next/router'; +import { expect, userEvent, within } from 'storybook/test'; function Component() { const router = useRouter(); diff --git a/code/frameworks/nextjs/template/stories_nextjs-default-ts/NextHeader.stories.tsx b/code/frameworks/nextjs/template/stories_nextjs-default-ts/NextHeader.stories.tsx index f5e83ef867f..040154706aa 100644 --- a/code/frameworks/nextjs/template/stories_nextjs-default-ts/NextHeader.stories.tsx +++ b/code/frameworks/nextjs/template/stories_nextjs-default-ts/NextHeader.stories.tsx @@ -1,6 +1,7 @@ import { cookies, headers } from '@storybook/nextjs/headers.mock'; import type { Meta, StoryObj } from '@storybook/react'; -import { expect, userEvent, within } from '@storybook/test'; + +import { expect, userEvent, within } from 'storybook/test'; import NextHeader from './NextHeader'; diff --git a/code/frameworks/nextjs/template/stories_nextjs-default-ts/Redirect.stories.tsx b/code/frameworks/nextjs/template/stories_nextjs-default-ts/Redirect.stories.tsx index 3c5980b7975..3f8c378ee22 100644 --- a/code/frameworks/nextjs/template/stories_nextjs-default-ts/Redirect.stories.tsx +++ b/code/frameworks/nextjs/template/stories_nextjs-default-ts/Redirect.stories.tsx @@ -1,9 +1,9 @@ import React from 'react'; import type { Meta, StoryObj } from '@storybook/react'; -import { userEvent, within } from '@storybook/test'; import { redirect } from 'next/navigation'; +import { userEvent, within } from 'storybook/test'; let state = 'Bug! Not invalidated'; diff --git a/code/frameworks/nextjs/template/stories_nextjs-default-ts/ServerActions.stories.tsx b/code/frameworks/nextjs/template/stories_nextjs-default-ts/ServerActions.stories.tsx index f1a9ad762ee..1f4c8979fb0 100644 --- a/code/frameworks/nextjs/template/stories_nextjs-default-ts/ServerActions.stories.tsx +++ b/code/frameworks/nextjs/template/stories_nextjs-default-ts/ServerActions.stories.tsx @@ -4,7 +4,8 @@ import { revalidatePath } from '@storybook/nextjs/cache.mock'; import { cookies } from '@storybook/nextjs/headers.mock'; import { getRouter, redirect } from '@storybook/nextjs/navigation.mock'; import type { Meta, StoryObj } from '@storybook/react'; -import { expect, userEvent, waitFor, within } from '@storybook/test'; + +import { expect, userEvent, waitFor, within } from 'storybook/test'; import { accessRoute, login, logout } from './server-actions'; diff --git a/code/frameworks/nextjs/template/stories_nextjs-prerelease/NextHeader.stories.tsx b/code/frameworks/nextjs/template/stories_nextjs-prerelease/NextHeader.stories.tsx index f5e83ef867f..040154706aa 100644 --- a/code/frameworks/nextjs/template/stories_nextjs-prerelease/NextHeader.stories.tsx +++ b/code/frameworks/nextjs/template/stories_nextjs-prerelease/NextHeader.stories.tsx @@ -1,6 +1,7 @@ import { cookies, headers } from '@storybook/nextjs/headers.mock'; import type { Meta, StoryObj } from '@storybook/react'; -import { expect, userEvent, within } from '@storybook/test'; + +import { expect, userEvent, within } from 'storybook/test'; import NextHeader from './NextHeader'; diff --git a/code/frameworks/nextjs/template/stories_nextjs-prerelease/Redirect.stories.tsx b/code/frameworks/nextjs/template/stories_nextjs-prerelease/Redirect.stories.tsx index 3c5980b7975..3f8c378ee22 100644 --- a/code/frameworks/nextjs/template/stories_nextjs-prerelease/Redirect.stories.tsx +++ b/code/frameworks/nextjs/template/stories_nextjs-prerelease/Redirect.stories.tsx @@ -1,9 +1,9 @@ import React from 'react'; import type { Meta, StoryObj } from '@storybook/react'; -import { userEvent, within } from '@storybook/test'; import { redirect } from 'next/navigation'; +import { userEvent, within } from 'storybook/test'; let state = 'Bug! Not invalidated'; diff --git a/code/frameworks/nextjs/template/stories_nextjs-prerelease/ServerActions.stories.tsx b/code/frameworks/nextjs/template/stories_nextjs-prerelease/ServerActions.stories.tsx index f1a9ad762ee..1f4c8979fb0 100644 --- a/code/frameworks/nextjs/template/stories_nextjs-prerelease/ServerActions.stories.tsx +++ b/code/frameworks/nextjs/template/stories_nextjs-prerelease/ServerActions.stories.tsx @@ -4,7 +4,8 @@ import { revalidatePath } from '@storybook/nextjs/cache.mock'; import { cookies } from '@storybook/nextjs/headers.mock'; import { getRouter, redirect } from '@storybook/nextjs/navigation.mock'; import type { Meta, StoryObj } from '@storybook/react'; -import { expect, userEvent, waitFor, within } from '@storybook/test'; + +import { expect, userEvent, waitFor, within } from 'storybook/test'; import { accessRoute, login, logout } from './server-actions'; diff --git a/code/frameworks/react-native-web-vite/template/cli/js/Button.stories.jsx b/code/frameworks/react-native-web-vite/template/cli/js/Button.stories.jsx index b7136fd8ae6..3ea891e65ce 100644 --- a/code/frameworks/react-native-web-vite/template/cli/js/Button.stories.jsx +++ b/code/frameworks/react-native-web-vite/template/cli/js/Button.stories.jsx @@ -1,6 +1,5 @@ -import { fn } from '@storybook/test'; - import { View } from 'react-native'; +import { fn } from 'storybook/test'; import { Button } from './Button'; diff --git a/code/frameworks/react-native-web-vite/template/cli/js/Page.stories.jsx b/code/frameworks/react-native-web-vite/template/cli/js/Page.stories.jsx index 249647fce86..bbf8729b8a3 100644 --- a/code/frameworks/react-native-web-vite/template/cli/js/Page.stories.jsx +++ b/code/frameworks/react-native-web-vite/template/cli/js/Page.stories.jsx @@ -1,4 +1,4 @@ -import { expect, userEvent, within } from '@storybook/test'; +import { expect, userEvent, within } from 'storybook/test'; import { Page } from './Page'; diff --git a/code/frameworks/react-native-web-vite/template/cli/ts-4-9/Button.stories.tsx b/code/frameworks/react-native-web-vite/template/cli/ts-4-9/Button.stories.tsx index 8e655fbfe26..cb852dfbe40 100644 --- a/code/frameworks/react-native-web-vite/template/cli/ts-4-9/Button.stories.tsx +++ b/code/frameworks/react-native-web-vite/template/cli/ts-4-9/Button.stories.tsx @@ -1,7 +1,7 @@ import type { Meta, StoryObj } from '@storybook/react'; -import { fn } from '@storybook/test'; import { View } from 'react-native'; +import { fn } from 'storybook/test'; import { Button } from './Button'; diff --git a/code/frameworks/react-native-web-vite/template/cli/ts-4-9/Page.stories.tsx b/code/frameworks/react-native-web-vite/template/cli/ts-4-9/Page.stories.tsx index 5a5db7ff268..86fc96ded9f 100644 --- a/code/frameworks/react-native-web-vite/template/cli/ts-4-9/Page.stories.tsx +++ b/code/frameworks/react-native-web-vite/template/cli/ts-4-9/Page.stories.tsx @@ -1,5 +1,6 @@ import type { Meta } from '@storybook/react'; -import { expect, userEvent, within } from '@storybook/test'; + +import { expect, userEvent, within } from 'storybook/test'; import { Page } from './Page'; diff --git a/code/frameworks/sveltekit/template/stories_svelte-kit-prerelease-ts/forms.stories.js b/code/frameworks/sveltekit/template/stories_svelte-kit-prerelease-ts/forms.stories.js index baff059fa21..a60865e1d17 100644 --- a/code/frameworks/sveltekit/template/stories_svelte-kit-prerelease-ts/forms.stories.js +++ b/code/frameworks/sveltekit/template/stories_svelte-kit-prerelease-ts/forms.stories.js @@ -1,4 +1,4 @@ -import { expect, fn, within } from '@storybook/test'; +import { expect, fn, within } from 'storybook/test'; import Forms from './Forms.svelte'; diff --git a/code/frameworks/sveltekit/template/stories_svelte-kit-prerelease-ts/hrefs.stories.js b/code/frameworks/sveltekit/template/stories_svelte-kit-prerelease-ts/hrefs.stories.js index 9f7033e36a3..e5517ce62f8 100644 --- a/code/frameworks/sveltekit/template/stories_svelte-kit-prerelease-ts/hrefs.stories.js +++ b/code/frameworks/sveltekit/template/stories_svelte-kit-prerelease-ts/hrefs.stories.js @@ -1,4 +1,4 @@ -import { expect, fn, within } from '@storybook/test'; +import { expect, fn, within } from 'storybook/test'; import Hrefs from './Hrefs.svelte'; diff --git a/code/frameworks/sveltekit/template/stories_svelte-kit-prerelease-ts/navigation.stories.js b/code/frameworks/sveltekit/template/stories_svelte-kit-prerelease-ts/navigation.stories.js index e102fce9643..cde66fd4f5a 100644 --- a/code/frameworks/sveltekit/template/stories_svelte-kit-prerelease-ts/navigation.stories.js +++ b/code/frameworks/sveltekit/template/stories_svelte-kit-prerelease-ts/navigation.stories.js @@ -1,4 +1,4 @@ -import { expect, fn, within } from '@storybook/test'; +import { expect, fn, within } from 'storybook/test'; import Navigation from './Navigation.svelte'; diff --git a/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-js/environment.stories.js b/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-js/environment.stories.js index fb4c85d9926..47f2f3a4424 100644 --- a/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-js/environment.stories.js +++ b/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-js/environment.stories.js @@ -1,4 +1,4 @@ -import { expect, fn, within } from '@storybook/test'; +import { expect, fn, within } from 'storybook/test'; import Environment from './Environment.svelte'; diff --git a/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-js/forms.stories.js b/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-js/forms.stories.js index 7659291df4f..6a020c8e124 100644 --- a/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-js/forms.stories.js +++ b/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-js/forms.stories.js @@ -1,4 +1,4 @@ -import { expect, fn, userEvent, within } from '@storybook/test'; +import { expect, fn, userEvent, within } from 'storybook/test'; import Forms from './Forms.svelte'; diff --git a/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-js/hrefs.stories.js b/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-js/hrefs.stories.js index 9f7033e36a3..e5517ce62f8 100644 --- a/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-js/hrefs.stories.js +++ b/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-js/hrefs.stories.js @@ -1,4 +1,4 @@ -import { expect, fn, within } from '@storybook/test'; +import { expect, fn, within } from 'storybook/test'; import Hrefs from './Hrefs.svelte'; diff --git a/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-js/navigation.stories.js b/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-js/navigation.stories.js index e102fce9643..cde66fd4f5a 100644 --- a/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-js/navigation.stories.js +++ b/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-js/navigation.stories.js @@ -1,4 +1,4 @@ -import { expect, fn, within } from '@storybook/test'; +import { expect, fn, within } from 'storybook/test'; import Navigation from './Navigation.svelte'; diff --git a/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-js/paths.stories.js b/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-js/paths.stories.js index 4ef5ddbcb54..1c6d5f362c5 100644 --- a/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-js/paths.stories.js +++ b/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-js/paths.stories.js @@ -1,4 +1,4 @@ -import { expect, fn, within } from '@storybook/test'; +import { expect, fn, within } from 'storybook/test'; import Paths from './Paths.svelte'; diff --git a/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-ts/environment.stories.js b/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-ts/environment.stories.js index fb4c85d9926..47f2f3a4424 100644 --- a/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-ts/environment.stories.js +++ b/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-ts/environment.stories.js @@ -1,4 +1,4 @@ -import { expect, fn, within } from '@storybook/test'; +import { expect, fn, within } from 'storybook/test'; import Environment from './Environment.svelte'; diff --git a/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-ts/forms.stories.js b/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-ts/forms.stories.js index baff059fa21..a60865e1d17 100644 --- a/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-ts/forms.stories.js +++ b/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-ts/forms.stories.js @@ -1,4 +1,4 @@ -import { expect, fn, within } from '@storybook/test'; +import { expect, fn, within } from 'storybook/test'; import Forms from './Forms.svelte'; diff --git a/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-ts/hrefs.stories.js b/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-ts/hrefs.stories.js index 9f7033e36a3..e5517ce62f8 100644 --- a/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-ts/hrefs.stories.js +++ b/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-ts/hrefs.stories.js @@ -1,4 +1,4 @@ -import { expect, fn, within } from '@storybook/test'; +import { expect, fn, within } from 'storybook/test'; import Hrefs from './Hrefs.svelte'; diff --git a/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-ts/navigation.stories.js b/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-ts/navigation.stories.js index e102fce9643..cde66fd4f5a 100644 --- a/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-ts/navigation.stories.js +++ b/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-ts/navigation.stories.js @@ -1,4 +1,4 @@ -import { expect, fn, within } from '@storybook/test'; +import { expect, fn, within } from 'storybook/test'; import Navigation from './Navigation.svelte'; diff --git a/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-ts/paths.stories.js b/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-ts/paths.stories.js index 4ef5ddbcb54..1c6d5f362c5 100644 --- a/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-ts/paths.stories.js +++ b/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-ts/paths.stories.js @@ -1,4 +1,4 @@ -import { expect, fn, within } from '@storybook/test'; +import { expect, fn, within } from 'storybook/test'; import Paths from './Paths.svelte'; diff --git a/code/lib/blocks/src/blocks/ArgTypes.stories.tsx b/code/lib/blocks/src/blocks/ArgTypes.stories.tsx index 7738bde257e..52a78f46c39 100644 --- a/code/lib/blocks/src/blocks/ArgTypes.stories.tsx +++ b/code/lib/blocks/src/blocks/ArgTypes.stories.tsx @@ -3,7 +3,8 @@ import React from 'react'; import type { PlayFunctionContext } from 'storybook/internal/csf'; import type { Meta, StoryObj } from '@storybook/react'; -import { within } from '@storybook/test'; + +import { within } from 'storybook/test'; import * as ExampleStories from '../examples/ArgTypesParameters.stories'; import * as SubcomponentsExampleStories from '../examples/ArgTypesWithSubcomponentsParameters.stories'; diff --git a/code/lib/blocks/src/blocks/Controls.stories.tsx b/code/lib/blocks/src/blocks/Controls.stories.tsx index 624f03452b8..657cc45bf11 100644 --- a/code/lib/blocks/src/blocks/Controls.stories.tsx +++ b/code/lib/blocks/src/blocks/Controls.stories.tsx @@ -3,7 +3,8 @@ import React from 'react'; import type { PlayFunctionContext } from 'storybook/internal/csf'; import type { Meta, StoryObj } from '@storybook/react'; -import { within } from '@storybook/test'; + +import { within } from 'storybook/test'; import * as ExampleStories from '../examples/ControlsParameters.stories'; import * as SubcomponentsExampleStories from '../examples/ControlsWithSubcomponentsParameters.stories'; diff --git a/code/lib/blocks/src/blocks/Story.stories.tsx b/code/lib/blocks/src/blocks/Story.stories.tsx index 370262bf0f2..4b3c006c212 100644 --- a/code/lib/blocks/src/blocks/Story.stories.tsx +++ b/code/lib/blocks/src/blocks/Story.stories.tsx @@ -1,7 +1,8 @@ import React from 'react'; import type { Meta, StoryObj } from '@storybook/react'; -import { expect, waitFor } from '@storybook/test'; + +import { expect, waitFor } from 'storybook/test'; import * as StoryComponentStories from '../components/Story.stories'; import * as ButtonStories from '../examples/Button.stories'; diff --git a/code/lib/blocks/src/components/Story.stories.tsx b/code/lib/blocks/src/components/Story.stories.tsx index 09e64a2dd1d..4622d5ba669 100644 --- a/code/lib/blocks/src/components/Story.stories.tsx +++ b/code/lib/blocks/src/components/Story.stories.tsx @@ -11,7 +11,8 @@ import type { PreviewWeb } from 'storybook/internal/preview-api'; import type { ModuleExport, WebRenderer } from 'storybook/internal/types'; import type { Meta, ReactRenderer, StoryObj } from '@storybook/react'; -import { within } from '@storybook/test'; + +import { within } from 'storybook/test'; import type { DocsContextProps } from '../blocks'; import * as ButtonStories from '../examples/Button.stories'; diff --git a/code/lib/blocks/src/controls/Boolean.stories.tsx b/code/lib/blocks/src/controls/Boolean.stories.tsx index ad7365c0383..26b2d6c05bd 100644 --- a/code/lib/blocks/src/controls/Boolean.stories.tsx +++ b/code/lib/blocks/src/controls/Boolean.stories.tsx @@ -2,7 +2,8 @@ import { RESET_STORY_ARGS, STORY_ARGS_UPDATED } from 'storybook/internal/core-ev import { addons } from 'storybook/internal/preview-api'; import type { Meta, StoryObj } from '@storybook/react'; -import { expect, fireEvent, fn, waitFor, within } from '@storybook/test'; + +import { expect, fireEvent, fn, waitFor, within } from 'storybook/test'; import { BooleanControl } from './Boolean'; diff --git a/code/lib/blocks/src/controls/Color.stories.tsx b/code/lib/blocks/src/controls/Color.stories.tsx index 8b77cff62f0..0784d0b9880 100644 --- a/code/lib/blocks/src/controls/Color.stories.tsx +++ b/code/lib/blocks/src/controls/Color.stories.tsx @@ -1,5 +1,6 @@ import type { Meta, StoryObj } from '@storybook/react'; -import { fn } from '@storybook/test'; + +import { fn } from 'storybook/test'; import { ColorControl } from './Color'; diff --git a/code/lib/blocks/src/controls/Date.stories.tsx b/code/lib/blocks/src/controls/Date.stories.tsx index c2fcb33e39b..a0c75b0c049 100644 --- a/code/lib/blocks/src/controls/Date.stories.tsx +++ b/code/lib/blocks/src/controls/Date.stories.tsx @@ -1,5 +1,6 @@ import type { Meta, StoryObj } from '@storybook/react'; -import { fn } from '@storybook/test'; + +import { fn } from 'storybook/test'; import { DateControl } from './Date'; diff --git a/code/lib/blocks/src/controls/Files.stories.tsx b/code/lib/blocks/src/controls/Files.stories.tsx index 640f954260c..8fad76248f0 100644 --- a/code/lib/blocks/src/controls/Files.stories.tsx +++ b/code/lib/blocks/src/controls/Files.stories.tsx @@ -1,5 +1,6 @@ import type { Meta, StoryObj } from '@storybook/react'; -import { fn } from '@storybook/test'; + +import { fn } from 'storybook/test'; import { FilesControl } from './Files'; diff --git a/code/lib/blocks/src/controls/Number.stories.tsx b/code/lib/blocks/src/controls/Number.stories.tsx index 80bde03aeef..da481a7e8f6 100644 --- a/code/lib/blocks/src/controls/Number.stories.tsx +++ b/code/lib/blocks/src/controls/Number.stories.tsx @@ -1,5 +1,6 @@ import type { Meta, StoryObj } from '@storybook/react'; -import { fn } from '@storybook/test'; + +import { fn } from 'storybook/test'; import { NumberControl } from './Number'; diff --git a/code/lib/blocks/src/controls/Object.stories.tsx b/code/lib/blocks/src/controls/Object.stories.tsx index 0929234e3ad..66db97ee45f 100644 --- a/code/lib/blocks/src/controls/Object.stories.tsx +++ b/code/lib/blocks/src/controls/Object.stories.tsx @@ -1,5 +1,6 @@ import type { Meta, StoryObj } from '@storybook/react'; -import { fn } from '@storybook/test'; + +import { fn } from 'storybook/test'; import { ObjectControl } from './Object'; diff --git a/code/lib/blocks/src/controls/Range.stories.tsx b/code/lib/blocks/src/controls/Range.stories.tsx index cd8ca20c522..09101039665 100644 --- a/code/lib/blocks/src/controls/Range.stories.tsx +++ b/code/lib/blocks/src/controls/Range.stories.tsx @@ -1,5 +1,6 @@ import type { Meta, StoryObj } from '@storybook/react'; -import { fn } from '@storybook/test'; + +import { fn } from 'storybook/test'; import { RangeControl } from './Range'; diff --git a/code/lib/blocks/src/controls/Text.stories.tsx b/code/lib/blocks/src/controls/Text.stories.tsx index 71dee59dc19..aa125efec4e 100644 --- a/code/lib/blocks/src/controls/Text.stories.tsx +++ b/code/lib/blocks/src/controls/Text.stories.tsx @@ -1,5 +1,6 @@ import type { Meta, StoryObj } from '@storybook/react'; -import { fn } from '@storybook/test'; + +import { fn } from 'storybook/test'; import { TextControl } from './Text'; diff --git a/code/lib/blocks/src/controls/options/CheckOptions.stories.tsx b/code/lib/blocks/src/controls/options/CheckOptions.stories.tsx index 8e98d88c080..4b71463fb84 100644 --- a/code/lib/blocks/src/controls/options/CheckOptions.stories.tsx +++ b/code/lib/blocks/src/controls/options/CheckOptions.stories.tsx @@ -1,5 +1,6 @@ import type { Meta, StoryObj } from '@storybook/react'; -import { fn } from '@storybook/test'; + +import { fn } from 'storybook/test'; import { OptionsControl } from './Options'; diff --git a/code/lib/blocks/src/controls/options/RadioOptions.stories.tsx b/code/lib/blocks/src/controls/options/RadioOptions.stories.tsx index e96f52b781c..bbbb1607d29 100644 --- a/code/lib/blocks/src/controls/options/RadioOptions.stories.tsx +++ b/code/lib/blocks/src/controls/options/RadioOptions.stories.tsx @@ -1,5 +1,6 @@ import type { Meta, StoryObj } from '@storybook/react'; -import { fn } from '@storybook/test'; + +import { fn } from 'storybook/test'; import { OptionsControl } from './Options'; diff --git a/code/lib/blocks/src/controls/options/SelectOptions.stories.tsx b/code/lib/blocks/src/controls/options/SelectOptions.stories.tsx index 81efc451c7f..805d2cde9ce 100644 --- a/code/lib/blocks/src/controls/options/SelectOptions.stories.tsx +++ b/code/lib/blocks/src/controls/options/SelectOptions.stories.tsx @@ -1,5 +1,6 @@ import type { Meta, StoryObj } from '@storybook/react'; -import { fn } from '@storybook/test'; + +import { fn } from 'storybook/test'; import { OptionsControl } from './Options'; diff --git a/code/lib/blocks/src/examples/Button.stories.tsx b/code/lib/blocks/src/examples/Button.stories.tsx index c22d141f541..f290f66e136 100644 --- a/code/lib/blocks/src/examples/Button.stories.tsx +++ b/code/lib/blocks/src/examples/Button.stories.tsx @@ -2,7 +2,8 @@ import React from 'react'; import type { Meta, StoryObj } from '@storybook/react'; -import { expect, fireEvent, within } from '@storybook/test'; + +import { expect, fireEvent, within } from 'storybook/test'; import { Button } from './Button'; diff --git a/code/lib/codemod/src/transforms/__tests__/migrate-to-test-package.test.ts b/code/lib/codemod/src/transforms/__tests__/migrate-to-test-package.test.ts index e3c2b2e517f..5207181e37a 100644 --- a/code/lib/codemod/src/transforms/__tests__/migrate-to-test-package.test.ts +++ b/code/lib/codemod/src/transforms/__tests__/migrate-to-test-package.test.ts @@ -19,8 +19,8 @@ test('replace jest and testing-library with the test package', async () => { `; expect(await tsTransform(input)).toMatchInlineSnapshot(` - import { expect } from '@storybook/test'; - import { userEvent, within } from '@storybook/test'; + import { expect } from 'storybook/test'; + import { userEvent, within } from 'storybook/test'; `); }); @@ -36,9 +36,9 @@ test('Make jest imports namespace imports', async () => { `; expect(await tsTransform(input)).toMatchInlineSnapshot(` - import { expect } from '@storybook/test'; - import * as test from '@storybook/test'; - import { userEvent, within } from '@storybook/test'; + import { expect } from 'storybook/test'; + import * as test from 'storybook/test'; + import { userEvent, within } from 'storybook/test'; const onFocusMock = test.fn(); const onSearchMock = test.fn(); diff --git a/code/renderers/svelte/template/cli/svelte-5-js/Button.stories.svelte b/code/renderers/svelte/template/cli/svelte-5-js/Button.stories.svelte index 4c8c7cce632..e6fb72dac17 100644 --- a/code/renderers/svelte/template/cli/svelte-5-js/Button.stories.svelte +++ b/code/renderers/svelte/template/cli/svelte-5-js/Button.stories.svelte @@ -1,7 +1,7 @@ + + diff --git a/code/frameworks/svelte-vite/template/cli/js/Header.stories.js b/code/frameworks/svelte-vite/template/cli/js/Header.stories.js new file mode 100644 index 00000000000..e2856c0e035 --- /dev/null +++ b/code/frameworks/svelte-vite/template/cli/js/Header.stories.js @@ -0,0 +1,22 @@ +import Header from './Header.svelte'; + +export default { + title: 'Example/Header', + component: Header, + // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs + tags: ['autodocs'], + parameters: { + // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout + layout: 'fullscreen', + }, +}; + +export const LoggedIn = { + args: { + user: { + name: 'Jane Doe', + }, + }, +}; + +export const LoggedOut = {}; diff --git a/code/frameworks/svelte-vite/template/cli/js/Header.svelte b/code/frameworks/svelte-vite/template/cli/js/Header.svelte new file mode 100644 index 00000000000..a9c08f75db7 --- /dev/null +++ b/code/frameworks/svelte-vite/template/cli/js/Header.svelte @@ -0,0 +1,52 @@ + + +
+
+
+ + + + + + + +

Acme

+
+
+ {#if user} + + Welcome, {user.name}! + +
+
+
diff --git a/code/frameworks/svelte-vite/template/cli/js/Page.stories.js b/code/frameworks/svelte-vite/template/cli/js/Page.stories.js new file mode 100644 index 00000000000..5ce7b3dac56 --- /dev/null +++ b/code/frameworks/svelte-vite/template/cli/js/Page.stories.js @@ -0,0 +1,28 @@ +import { expect, userEvent, waitFor, within } from '@storybook/test'; + +import Page from './Page.svelte'; + +export default { + title: 'Example/Page', + component: Page, + parameters: { + // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout + layout: 'fullscreen', + }, +}; + +export const LoggedOut = {}; + +// More on component testing: https://storybook.js.org/docs/writing-tests/component-testing +export const LoggedIn = { + play: async ({ canvasElement }) => { + const canvas = within(canvasElement); + const loginButton = canvas.getByRole('button', { name: /Log in/i }); + await expect(loginButton).toBeInTheDocument(); + await userEvent.click(loginButton); + await waitFor(() => expect(loginButton).not.toBeInTheDocument()); + + const logoutButton = canvas.getByRole('button', { name: /Log out/i }); + await expect(logoutButton).toBeInTheDocument(); + }, +}; diff --git a/code/frameworks/svelte-vite/template/cli/js/Page.svelte b/code/frameworks/svelte-vite/template/cli/js/Page.svelte new file mode 100644 index 00000000000..acc473c2518 --- /dev/null +++ b/code/frameworks/svelte-vite/template/cli/js/Page.svelte @@ -0,0 +1,70 @@ + + +
+
(user = { name: 'Jane Doe' })} + on:logout={() => (user = null)} + on:createAccount={() => (user = { name: 'Jane Doe' })} + /> + +
+

Pages in Storybook

+

+ We recommend building UIs with a + + component-driven + + process starting with atomic components and ending with pages. +

+

+ Render pages with mock data. This makes it easy to build and review page states without + needing to navigate to them in your app. Here are some handy patterns for managing page data + in Storybook: +

+
    +
  • + Use a higher-level connected component. Storybook helps you compose such data from the + "args" of child component stories +
    • +
  • + Assemble data in the page component from your services. You can mock these services out + using Storybook. +
    • +
+

+ Get a guided tutorial on component-driven development at + + Storybook tutorials + + . Read more in the + docs + . +

+
+ Tip + Adjust the width of the canvas with the + + + + + + Viewports addon in the toolbar +
+
+
diff --git a/code/frameworks/svelte-vite/template/cli/svelte-5-js/Button.stories.svelte b/code/frameworks/svelte-vite/template/cli/svelte-5-js/Button.stories.svelte new file mode 100644 index 00000000000..4c8c7cce632 --- /dev/null +++ b/code/frameworks/svelte-vite/template/cli/svelte-5-js/Button.stories.svelte @@ -0,0 +1,31 @@ + + + + + + + + + + diff --git a/code/frameworks/svelte-vite/template/cli/svelte-5-js/Button.svelte b/code/frameworks/svelte-vite/template/cli/svelte-5-js/Button.svelte new file mode 100644 index 00000000000..b2b820ea497 --- /dev/null +++ b/code/frameworks/svelte-vite/template/cli/svelte-5-js/Button.svelte @@ -0,0 +1,26 @@ + + + diff --git a/code/frameworks/svelte-vite/template/cli/svelte-5-js/Header.stories.svelte b/code/frameworks/svelte-vite/template/cli/svelte-5-js/Header.stories.svelte new file mode 100644 index 00000000000..0130c115acf --- /dev/null +++ b/code/frameworks/svelte-vite/template/cli/svelte-5-js/Header.stories.svelte @@ -0,0 +1,26 @@ + + + + + diff --git a/code/frameworks/svelte-vite/template/cli/svelte-5-js/Header.svelte b/code/frameworks/svelte-vite/template/cli/svelte-5-js/Header.svelte new file mode 100644 index 00000000000..dba3b7880f4 --- /dev/null +++ b/code/frameworks/svelte-vite/template/cli/svelte-5-js/Header.svelte @@ -0,0 +1,47 @@ + + +
+
+
+ + + + + + + +

Acme

+
+
+ {#if user} + + Welcome, {user.name}! + +
+
+
diff --git a/code/frameworks/svelte-vite/template/cli/svelte-5-js/Page.stories.svelte b/code/frameworks/svelte-vite/template/cli/svelte-5-js/Page.stories.svelte new file mode 100644 index 00000000000..aa7372c58ef --- /dev/null +++ b/code/frameworks/svelte-vite/template/cli/svelte-5-js/Page.stories.svelte @@ -0,0 +1,30 @@ + + + { + const canvas = within(canvasElement); + const loginButton = canvas.getByRole('button', { name: /Log in/i }); + await expect(loginButton).toBeInTheDocument(); + await userEvent.click(loginButton); + await waitFor(() => expect(loginButton).not.toBeInTheDocument()); + + const logoutButton = canvas.getByRole('button', { name: /Log out/i }); + await expect(logoutButton).toBeInTheDocument(); + }} + /> + + diff --git a/code/frameworks/svelte-vite/template/cli/svelte-5-js/Page.svelte b/code/frameworks/svelte-vite/template/cli/svelte-5-js/Page.svelte new file mode 100644 index 00000000000..92a95c00c5c --- /dev/null +++ b/code/frameworks/svelte-vite/template/cli/svelte-5-js/Page.svelte @@ -0,0 +1,70 @@ + + +
+
(user = { name: 'Jane Doe' })} + onLogout={() => (user = null)} + onCreateAccount={() => (user = { name: 'Jane Doe' })} + /> + +
+

Pages in Storybook

+

+ We recommend building UIs with a + + component-driven + + process starting with atomic components and ending with pages. +

+

+ Render pages with mock data. This makes it easy to build and review page states without + needing to navigate to them in your app. Here are some handy patterns for managing page data + in Storybook: +

+
    +
  • + Use a higher-level connected component. Storybook helps you compose such data from the + "args" of child component stories +
    • +
  • + Assemble data in the page component from your services. You can mock these services out + using Storybook. +
    • +
+

+ Get a guided tutorial on component-driven development at + + Storybook tutorials + + . Read more in the + docs + . +

+
+ Tip + Adjust the width of the canvas with the + + + + + + Viewports addon in the toolbar +
+
+
diff --git a/code/frameworks/svelte-vite/template/cli/svelte-5-ts-3-8/Button.stories.svelte b/code/frameworks/svelte-vite/template/cli/svelte-5-ts-3-8/Button.stories.svelte new file mode 100644 index 00000000000..4c8c7cce632 --- /dev/null +++ b/code/frameworks/svelte-vite/template/cli/svelte-5-ts-3-8/Button.stories.svelte @@ -0,0 +1,31 @@ + + + + + + + + + + diff --git a/code/frameworks/svelte-vite/template/cli/svelte-5-ts-3-8/Button.svelte b/code/frameworks/svelte-vite/template/cli/svelte-5-ts-3-8/Button.svelte new file mode 100644 index 00000000000..b31f5bffe4a --- /dev/null +++ b/code/frameworks/svelte-vite/template/cli/svelte-5-ts-3-8/Button.svelte @@ -0,0 +1,29 @@ + + + diff --git a/code/frameworks/svelte-vite/template/cli/svelte-5-ts-3-8/Header.stories.svelte b/code/frameworks/svelte-vite/template/cli/svelte-5-ts-3-8/Header.stories.svelte new file mode 100644 index 00000000000..0130c115acf --- /dev/null +++ b/code/frameworks/svelte-vite/template/cli/svelte-5-ts-3-8/Header.stories.svelte @@ -0,0 +1,26 @@ + + + + + diff --git a/code/frameworks/svelte-vite/template/cli/svelte-5-ts-3-8/Header.svelte b/code/frameworks/svelte-vite/template/cli/svelte-5-ts-3-8/Header.svelte new file mode 100644 index 00000000000..14e890c79e9 --- /dev/null +++ b/code/frameworks/svelte-vite/template/cli/svelte-5-ts-3-8/Header.svelte @@ -0,0 +1,45 @@ + + +
+
+
+ + + + + + + +

Acme

+
+
+ {#if user} + + Welcome, {user.name}! + +
+
+
diff --git a/code/frameworks/svelte-vite/template/cli/svelte-5-ts-3-8/Page.stories.svelte b/code/frameworks/svelte-vite/template/cli/svelte-5-ts-3-8/Page.stories.svelte new file mode 100644 index 00000000000..ed850d83718 --- /dev/null +++ b/code/frameworks/svelte-vite/template/cli/svelte-5-ts-3-8/Page.stories.svelte @@ -0,0 +1,30 @@ + + + { + const canvas = within(canvasElement); + const loginButton = canvas.getByRole('button', { name: /Log in/i }); + await expect(loginButton).toBeInTheDocument(); + await userEvent.click(loginButton); + await waitFor(() => expect(loginButton).not.toBeInTheDocument()); + + const logoutButton = canvas.getByRole('button', { name: /Log out/i }); + await expect(logoutButton).toBeInTheDocument(); + }} +/> + + diff --git a/code/frameworks/svelte-vite/template/cli/svelte-5-ts-3-8/Page.svelte b/code/frameworks/svelte-vite/template/cli/svelte-5-ts-3-8/Page.svelte new file mode 100644 index 00000000000..c4c069a5a50 --- /dev/null +++ b/code/frameworks/svelte-vite/template/cli/svelte-5-ts-3-8/Page.svelte @@ -0,0 +1,70 @@ + + +
+
(user = { name: 'Jane Doe' })} + onLogout={() => (user = undefined)} + onCreateAccount={() => (user = { name: 'Jane Doe' })} + /> + +
+

Pages in Storybook

+

+ We recommend building UIs with a + + component-driven + + process starting with atomic components and ending with pages. +

+

+ Render pages with mock data. This makes it easy to build and review page states without + needing to navigate to them in your app. Here are some handy patterns for managing page data + in Storybook: +

+
    +
  • + Use a higher-level connected component. Storybook helps you compose such data from the + "args" of child component stories +
    • +
  • + Assemble data in the page component from your services. You can mock these services out + using Storybook. +
    • +
+

+ Get a guided tutorial on component-driven development at + + Storybook tutorials + + . Read more in the + docs + . +

+
+ Tip + Adjust the width of the canvas with the + + + + + + Viewports addon in the toolbar +
+
+
diff --git a/code/frameworks/svelte-vite/template/cli/svelte-5-ts-4-9/Button.stories.svelte b/code/frameworks/svelte-vite/template/cli/svelte-5-ts-4-9/Button.stories.svelte new file mode 100644 index 00000000000..4c8c7cce632 --- /dev/null +++ b/code/frameworks/svelte-vite/template/cli/svelte-5-ts-4-9/Button.stories.svelte @@ -0,0 +1,31 @@ + + + + + + + + + + diff --git a/code/frameworks/svelte-vite/template/cli/svelte-5-ts-4-9/Button.svelte b/code/frameworks/svelte-vite/template/cli/svelte-5-ts-4-9/Button.svelte new file mode 100644 index 00000000000..b31f5bffe4a --- /dev/null +++ b/code/frameworks/svelte-vite/template/cli/svelte-5-ts-4-9/Button.svelte @@ -0,0 +1,29 @@ + + + diff --git a/code/frameworks/svelte-vite/template/cli/svelte-5-ts-4-9/Header.stories.svelte b/code/frameworks/svelte-vite/template/cli/svelte-5-ts-4-9/Header.stories.svelte new file mode 100644 index 00000000000..0130c115acf --- /dev/null +++ b/code/frameworks/svelte-vite/template/cli/svelte-5-ts-4-9/Header.stories.svelte @@ -0,0 +1,26 @@ + + + + + diff --git a/code/frameworks/svelte-vite/template/cli/svelte-5-ts-4-9/Header.svelte b/code/frameworks/svelte-vite/template/cli/svelte-5-ts-4-9/Header.svelte new file mode 100644 index 00000000000..14e890c79e9 --- /dev/null +++ b/code/frameworks/svelte-vite/template/cli/svelte-5-ts-4-9/Header.svelte @@ -0,0 +1,45 @@ + + +
+
+
+ + + + + + + +

Acme

+
+
+ {#if user} + + Welcome, {user.name}! + +
+
+
diff --git a/code/frameworks/svelte-vite/template/cli/svelte-5-ts-4-9/Page.stories.svelte b/code/frameworks/svelte-vite/template/cli/svelte-5-ts-4-9/Page.stories.svelte new file mode 100644 index 00000000000..ed850d83718 --- /dev/null +++ b/code/frameworks/svelte-vite/template/cli/svelte-5-ts-4-9/Page.stories.svelte @@ -0,0 +1,30 @@ + + + { + const canvas = within(canvasElement); + const loginButton = canvas.getByRole('button', { name: /Log in/i }); + await expect(loginButton).toBeInTheDocument(); + await userEvent.click(loginButton); + await waitFor(() => expect(loginButton).not.toBeInTheDocument()); + + const logoutButton = canvas.getByRole('button', { name: /Log out/i }); + await expect(logoutButton).toBeInTheDocument(); + }} +/> + + diff --git a/code/frameworks/svelte-vite/template/cli/svelte-5-ts-4-9/Page.svelte b/code/frameworks/svelte-vite/template/cli/svelte-5-ts-4-9/Page.svelte new file mode 100644 index 00000000000..c4c069a5a50 --- /dev/null +++ b/code/frameworks/svelte-vite/template/cli/svelte-5-ts-4-9/Page.svelte @@ -0,0 +1,70 @@ + + +
+
(user = { name: 'Jane Doe' })} + onLogout={() => (user = undefined)} + onCreateAccount={() => (user = { name: 'Jane Doe' })} + /> + +
+

Pages in Storybook

+

+ We recommend building UIs with a + + component-driven + + process starting with atomic components and ending with pages. +

+

+ Render pages with mock data. This makes it easy to build and review page states without + needing to navigate to them in your app. Here are some handy patterns for managing page data + in Storybook: +

+
    +
  • + Use a higher-level connected component. Storybook helps you compose such data from the + "args" of child component stories +
    • +
  • + Assemble data in the page component from your services. You can mock these services out + using Storybook. +
    • +
+

+ Get a guided tutorial on component-driven development at + + Storybook tutorials + + . Read more in the + docs + . +

+
+ Tip + Adjust the width of the canvas with the + + + + + + Viewports addon in the toolbar +
+
+
diff --git a/code/frameworks/svelte-vite/template/cli/ts-4-9/Button.stories.ts b/code/frameworks/svelte-vite/template/cli/ts-4-9/Button.stories.ts new file mode 100644 index 00000000000..bcc54cde4d5 --- /dev/null +++ b/code/frameworks/svelte-vite/template/cli/ts-4-9/Button.stories.ts @@ -0,0 +1,48 @@ +import type { Meta, StoryObj } from '@storybook/svelte-vite'; + +import Button from './Button.svelte'; + +// More on how to set up stories at: https://storybook.js.org/docs/writing-stories +const meta = { + title: 'Example/Button', + component: Button, + tags: ['autodocs'], + argTypes: { + backgroundColor: { control: 'color' }, + size: { + control: { type: 'select' }, + options: ['small', 'medium', 'large'], + }, + }, +} satisfies Meta diff --git a/code/frameworks/svelte-vite/template/cli/ts-4-9/Header.stories.ts b/code/frameworks/svelte-vite/template/cli/ts-4-9/Header.stories.ts new file mode 100644 index 00000000000..22e301266db --- /dev/null +++ b/code/frameworks/svelte-vite/template/cli/ts-4-9/Header.stories.ts @@ -0,0 +1,27 @@ +import type { Meta, StoryObj } from '@storybook/svelte-vite'; + +import Header from './Header.svelte'; + +const meta = { + title: 'Example/Header', + component: Header, + // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs + tags: ['autodocs'], + parameters: { + // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout + layout: 'fullscreen', + }, +} satisfies Meta
; + +export default meta; +type Story = StoryObj; + +export const LoggedIn: Story = { + args: { + user: { + name: 'Jane Doe', + }, + }, +}; + +export const LoggedOut: Story = {}; diff --git a/code/frameworks/svelte-vite/template/cli/ts-4-9/Header.svelte b/code/frameworks/svelte-vite/template/cli/ts-4-9/Header.svelte new file mode 100644 index 00000000000..cb6f82d5e66 --- /dev/null +++ b/code/frameworks/svelte-vite/template/cli/ts-4-9/Header.svelte @@ -0,0 +1,52 @@ + + +
+
+
+ + + + + + + +

Acme

+
+
+ {#if user} + + Welcome, {user.name}! + +
+
+
diff --git a/code/frameworks/svelte-vite/template/cli/ts-4-9/Page.stories.ts b/code/frameworks/svelte-vite/template/cli/ts-4-9/Page.stories.ts new file mode 100644 index 00000000000..d6b261fb586 --- /dev/null +++ b/code/frameworks/svelte-vite/template/cli/ts-4-9/Page.stories.ts @@ -0,0 +1,33 @@ +import { expect, userEvent, waitFor, within } from '@storybook/test'; + +import type { Meta, StoryObj } from '@storybook/svelte-vite'; + +import Page from './Page.svelte'; + +const meta = { + title: 'Example/Page', + component: Page, + parameters: { + // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout + layout: 'fullscreen', + }, +} satisfies Meta; + +export default meta; +type Story = StoryObj; + +export const LoggedOut: Story = {}; + +// More on component testing: https://storybook.js.org/docs/writing-tests/component-testing +export const LoggedIn: Story = { + play: async ({ canvasElement }) => { + const canvas = within(canvasElement); + const loginButton = canvas.getByRole('button', { name: /Log in/i }); + await expect(loginButton).toBeInTheDocument(); + await userEvent.click(loginButton); + await waitFor(() => expect(loginButton).not.toBeInTheDocument()); + + const logoutButton = canvas.getByRole('button', { name: /Log out/i }); + await expect(logoutButton).toBeInTheDocument(); + }, +}; diff --git a/code/frameworks/svelte-vite/template/cli/ts-4-9/Page.svelte b/code/frameworks/svelte-vite/template/cli/ts-4-9/Page.svelte new file mode 100644 index 00000000000..94cdb07ecd3 --- /dev/null +++ b/code/frameworks/svelte-vite/template/cli/ts-4-9/Page.svelte @@ -0,0 +1,70 @@ + + +
+
(user = { name: 'Jane Doe' })} + on:logout={() => (user = null)} + on:createAccount={() => (user = { name: 'Jane Doe' })} + /> + +
+

Pages in Storybook

+

+ We recommend building UIs with a + + component-driven + + process starting with atomic components and ending with pages. +

+

+ Render pages with mock data. This makes it easy to build and review page states without + needing to navigate to them in your app. Here are some handy patterns for managing page data + in Storybook: +

+
    +
  • + Use a higher-level connected component. Storybook helps you compose such data from the + "args" of child component stories +
    • +
  • + Assemble data in the page component from your services. You can mock these services out + using Storybook. +
    • +
+

+ Get a guided tutorial on component-driven development at + + Storybook tutorials + + . Read more in the + docs + . +

+
+ Tip + Adjust the width of the canvas with the + + + + + + Viewports addon in the toolbar +
+
+
From 97d6440f2c97f454cdfd66690b64da62ba9f2a98 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Fri, 7 Mar 2025 15:45:12 +0100 Subject: [PATCH 088/108] Add Storybook template components for Svelte Vite CLI with multiple variations Expand the Svelte Storybook template with comprehensive component support: - Add Button, Header, and Page components - Support multiple Svelte configurations: * JavaScript * Svelte 5 JavaScript * Svelte 5 TypeScript (3.8 and 4.9) * TypeScript (4.9) - Include stories, components, and CSS files - Implement Storybook best practices with autodocs and component testing --- .../template/cli/js/Button.stories.js | 43 ++++++++++++ .../sveltekit/template/cli/js/Button.svelte | 36 ++++++++++ .../template/cli/js/Header.stories.js | 22 ++++++ .../sveltekit/template/cli/js/Header.svelte | 52 ++++++++++++++ .../sveltekit/template/cli/js/Page.stories.js | 28 ++++++++ .../sveltekit/template/cli/js/Page.svelte | 70 +++++++++++++++++++ .../cli/svelte-5-js/Button.stories.svelte | 31 ++++++++ .../template/cli/svelte-5-js/Button.svelte | 26 +++++++ .../cli/svelte-5-js/Header.stories.svelte | 26 +++++++ .../template/cli/svelte-5-js/Header.svelte | 47 +++++++++++++ .../cli/svelte-5-js/Page.stories.svelte | 30 ++++++++ .../template/cli/svelte-5-js/Page.svelte | 70 +++++++++++++++++++ .../cli/svelte-5-ts-3-8/Button.stories.svelte | 31 ++++++++ .../cli/svelte-5-ts-3-8/Button.svelte | 29 ++++++++ .../cli/svelte-5-ts-3-8/Header.stories.svelte | 26 +++++++ .../cli/svelte-5-ts-3-8/Header.svelte | 45 ++++++++++++ .../cli/svelte-5-ts-3-8/Page.stories.svelte | 30 ++++++++ .../template/cli/svelte-5-ts-3-8/Page.svelte | 70 +++++++++++++++++++ .../cli/svelte-5-ts-4-9/Button.stories.svelte | 31 ++++++++ .../cli/svelte-5-ts-4-9/Button.svelte | 29 ++++++++ .../cli/svelte-5-ts-4-9/Header.stories.svelte | 26 +++++++ .../cli/svelte-5-ts-4-9/Header.svelte | 45 ++++++++++++ .../cli/svelte-5-ts-4-9/Page.stories.svelte | 30 ++++++++ .../template/cli/svelte-5-ts-4-9/Page.svelte | 70 +++++++++++++++++++ .../template/cli/ts-4-9/Button.stories.ts | 48 +++++++++++++ .../template/cli/ts-4-9/Button.svelte | 34 +++++++++ .../template/cli/ts-4-9/Header.stories.ts | 27 +++++++ .../template/cli/ts-4-9/Header.svelte | 52 ++++++++++++++ .../template/cli/ts-4-9/Page.stories.ts | 32 +++++++++ .../sveltekit/template/cli/ts-4-9/Page.svelte | 70 +++++++++++++++++++ 30 files changed, 1206 insertions(+) create mode 100644 code/frameworks/sveltekit/template/cli/js/Button.stories.js create mode 100644 code/frameworks/sveltekit/template/cli/js/Button.svelte create mode 100644 code/frameworks/sveltekit/template/cli/js/Header.stories.js create mode 100644 code/frameworks/sveltekit/template/cli/js/Header.svelte create mode 100644 code/frameworks/sveltekit/template/cli/js/Page.stories.js create mode 100644 code/frameworks/sveltekit/template/cli/js/Page.svelte create mode 100644 code/frameworks/sveltekit/template/cli/svelte-5-js/Button.stories.svelte create mode 100644 code/frameworks/sveltekit/template/cli/svelte-5-js/Button.svelte create mode 100644 code/frameworks/sveltekit/template/cli/svelte-5-js/Header.stories.svelte create mode 100644 code/frameworks/sveltekit/template/cli/svelte-5-js/Header.svelte create mode 100644 code/frameworks/sveltekit/template/cli/svelte-5-js/Page.stories.svelte create mode 100644 code/frameworks/sveltekit/template/cli/svelte-5-js/Page.svelte create mode 100644 code/frameworks/sveltekit/template/cli/svelte-5-ts-3-8/Button.stories.svelte create mode 100644 code/frameworks/sveltekit/template/cli/svelte-5-ts-3-8/Button.svelte create mode 100644 code/frameworks/sveltekit/template/cli/svelte-5-ts-3-8/Header.stories.svelte create mode 100644 code/frameworks/sveltekit/template/cli/svelte-5-ts-3-8/Header.svelte create mode 100644 code/frameworks/sveltekit/template/cli/svelte-5-ts-3-8/Page.stories.svelte create mode 100644 code/frameworks/sveltekit/template/cli/svelte-5-ts-3-8/Page.svelte create mode 100644 code/frameworks/sveltekit/template/cli/svelte-5-ts-4-9/Button.stories.svelte create mode 100644 code/frameworks/sveltekit/template/cli/svelte-5-ts-4-9/Button.svelte create mode 100644 code/frameworks/sveltekit/template/cli/svelte-5-ts-4-9/Header.stories.svelte create mode 100644 code/frameworks/sveltekit/template/cli/svelte-5-ts-4-9/Header.svelte create mode 100644 code/frameworks/sveltekit/template/cli/svelte-5-ts-4-9/Page.stories.svelte create mode 100644 code/frameworks/sveltekit/template/cli/svelte-5-ts-4-9/Page.svelte create mode 100644 code/frameworks/sveltekit/template/cli/ts-4-9/Button.stories.ts create mode 100644 code/frameworks/sveltekit/template/cli/ts-4-9/Button.svelte create mode 100644 code/frameworks/sveltekit/template/cli/ts-4-9/Header.stories.ts create mode 100644 code/frameworks/sveltekit/template/cli/ts-4-9/Header.svelte create mode 100644 code/frameworks/sveltekit/template/cli/ts-4-9/Page.stories.ts create mode 100644 code/frameworks/sveltekit/template/cli/ts-4-9/Page.svelte diff --git a/code/frameworks/sveltekit/template/cli/js/Button.stories.js b/code/frameworks/sveltekit/template/cli/js/Button.stories.js new file mode 100644 index 00000000000..c5c88776d6b --- /dev/null +++ b/code/frameworks/sveltekit/template/cli/js/Button.stories.js @@ -0,0 +1,43 @@ +import Button from './Button.svelte'; + +// More on how to set up stories at: https://storybook.js.org/docs/writing-stories +export default { + title: 'Example/Button', + component: Button, + tags: ['autodocs'], + argTypes: { + backgroundColor: { control: 'color' }, + size: { + control: { type: 'select' }, + options: ['small', 'medium', 'large'], + }, + }, +}; + +// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args +export const Primary = { + args: { + primary: true, + label: 'Button', + }, +}; + +export const Secondary = { + args: { + label: 'Button', + }, +}; + +export const Large = { + args: { + size: 'large', + label: 'Button', + }, +}; + +export const Small = { + args: { + size: 'small', + label: 'Button', + }, +}; diff --git a/code/frameworks/sveltekit/template/cli/js/Button.svelte b/code/frameworks/sveltekit/template/cli/js/Button.svelte new file mode 100644 index 00000000000..a2a78d9d0d6 --- /dev/null +++ b/code/frameworks/sveltekit/template/cli/js/Button.svelte @@ -0,0 +1,36 @@ + + + diff --git a/code/frameworks/sveltekit/template/cli/js/Header.stories.js b/code/frameworks/sveltekit/template/cli/js/Header.stories.js new file mode 100644 index 00000000000..e2856c0e035 --- /dev/null +++ b/code/frameworks/sveltekit/template/cli/js/Header.stories.js @@ -0,0 +1,22 @@ +import Header from './Header.svelte'; + +export default { + title: 'Example/Header', + component: Header, + // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs + tags: ['autodocs'], + parameters: { + // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout + layout: 'fullscreen', + }, +}; + +export const LoggedIn = { + args: { + user: { + name: 'Jane Doe', + }, + }, +}; + +export const LoggedOut = {}; diff --git a/code/frameworks/sveltekit/template/cli/js/Header.svelte b/code/frameworks/sveltekit/template/cli/js/Header.svelte new file mode 100644 index 00000000000..a9c08f75db7 --- /dev/null +++ b/code/frameworks/sveltekit/template/cli/js/Header.svelte @@ -0,0 +1,52 @@ + + +
+
+
+ + + + + + + +

Acme

+
+
+ {#if user} + + Welcome, {user.name}! + +
+
+
diff --git a/code/frameworks/sveltekit/template/cli/js/Page.stories.js b/code/frameworks/sveltekit/template/cli/js/Page.stories.js new file mode 100644 index 00000000000..5ce7b3dac56 --- /dev/null +++ b/code/frameworks/sveltekit/template/cli/js/Page.stories.js @@ -0,0 +1,28 @@ +import { expect, userEvent, waitFor, within } from '@storybook/test'; + +import Page from './Page.svelte'; + +export default { + title: 'Example/Page', + component: Page, + parameters: { + // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout + layout: 'fullscreen', + }, +}; + +export const LoggedOut = {}; + +// More on component testing: https://storybook.js.org/docs/writing-tests/component-testing +export const LoggedIn = { + play: async ({ canvasElement }) => { + const canvas = within(canvasElement); + const loginButton = canvas.getByRole('button', { name: /Log in/i }); + await expect(loginButton).toBeInTheDocument(); + await userEvent.click(loginButton); + await waitFor(() => expect(loginButton).not.toBeInTheDocument()); + + const logoutButton = canvas.getByRole('button', { name: /Log out/i }); + await expect(logoutButton).toBeInTheDocument(); + }, +}; diff --git a/code/frameworks/sveltekit/template/cli/js/Page.svelte b/code/frameworks/sveltekit/template/cli/js/Page.svelte new file mode 100644 index 00000000000..acc473c2518 --- /dev/null +++ b/code/frameworks/sveltekit/template/cli/js/Page.svelte @@ -0,0 +1,70 @@ + + +
+
(user = { name: 'Jane Doe' })} + on:logout={() => (user = null)} + on:createAccount={() => (user = { name: 'Jane Doe' })} + /> + +
+

Pages in Storybook

+

+ We recommend building UIs with a + + component-driven + + process starting with atomic components and ending with pages. +

+

+ Render pages with mock data. This makes it easy to build and review page states without + needing to navigate to them in your app. Here are some handy patterns for managing page data + in Storybook: +

+
    +
  • + Use a higher-level connected component. Storybook helps you compose such data from the + "args" of child component stories +
    • +
  • + Assemble data in the page component from your services. You can mock these services out + using Storybook. +
    • +
+

+ Get a guided tutorial on component-driven development at + + Storybook tutorials + + . Read more in the + docs + . +

+
+ Tip + Adjust the width of the canvas with the + + + + + + Viewports addon in the toolbar +
+
+
diff --git a/code/frameworks/sveltekit/template/cli/svelte-5-js/Button.stories.svelte b/code/frameworks/sveltekit/template/cli/svelte-5-js/Button.stories.svelte new file mode 100644 index 00000000000..4c8c7cce632 --- /dev/null +++ b/code/frameworks/sveltekit/template/cli/svelte-5-js/Button.stories.svelte @@ -0,0 +1,31 @@ + + + + + + + + + + diff --git a/code/frameworks/sveltekit/template/cli/svelte-5-js/Button.svelte b/code/frameworks/sveltekit/template/cli/svelte-5-js/Button.svelte new file mode 100644 index 00000000000..b2b820ea497 --- /dev/null +++ b/code/frameworks/sveltekit/template/cli/svelte-5-js/Button.svelte @@ -0,0 +1,26 @@ + + + diff --git a/code/frameworks/sveltekit/template/cli/svelte-5-js/Header.stories.svelte b/code/frameworks/sveltekit/template/cli/svelte-5-js/Header.stories.svelte new file mode 100644 index 00000000000..0130c115acf --- /dev/null +++ b/code/frameworks/sveltekit/template/cli/svelte-5-js/Header.stories.svelte @@ -0,0 +1,26 @@ + + + + + diff --git a/code/frameworks/sveltekit/template/cli/svelte-5-js/Header.svelte b/code/frameworks/sveltekit/template/cli/svelte-5-js/Header.svelte new file mode 100644 index 00000000000..dba3b7880f4 --- /dev/null +++ b/code/frameworks/sveltekit/template/cli/svelte-5-js/Header.svelte @@ -0,0 +1,47 @@ + + +
+
+
+ + + + + + + +

Acme

+
+
+ {#if user} + + Welcome, {user.name}! + +
+
+
diff --git a/code/frameworks/sveltekit/template/cli/svelte-5-js/Page.stories.svelte b/code/frameworks/sveltekit/template/cli/svelte-5-js/Page.stories.svelte new file mode 100644 index 00000000000..aa7372c58ef --- /dev/null +++ b/code/frameworks/sveltekit/template/cli/svelte-5-js/Page.stories.svelte @@ -0,0 +1,30 @@ + + + { + const canvas = within(canvasElement); + const loginButton = canvas.getByRole('button', { name: /Log in/i }); + await expect(loginButton).toBeInTheDocument(); + await userEvent.click(loginButton); + await waitFor(() => expect(loginButton).not.toBeInTheDocument()); + + const logoutButton = canvas.getByRole('button', { name: /Log out/i }); + await expect(logoutButton).toBeInTheDocument(); + }} + /> + + diff --git a/code/frameworks/sveltekit/template/cli/svelte-5-js/Page.svelte b/code/frameworks/sveltekit/template/cli/svelte-5-js/Page.svelte new file mode 100644 index 00000000000..92a95c00c5c --- /dev/null +++ b/code/frameworks/sveltekit/template/cli/svelte-5-js/Page.svelte @@ -0,0 +1,70 @@ + + +
+
(user = { name: 'Jane Doe' })} + onLogout={() => (user = null)} + onCreateAccount={() => (user = { name: 'Jane Doe' })} + /> + +
+

Pages in Storybook

+

+ We recommend building UIs with a + + component-driven + + process starting with atomic components and ending with pages. +

+

+ Render pages with mock data. This makes it easy to build and review page states without + needing to navigate to them in your app. Here are some handy patterns for managing page data + in Storybook: +

+
    +
  • + Use a higher-level connected component. Storybook helps you compose such data from the + "args" of child component stories +
    • +
  • + Assemble data in the page component from your services. You can mock these services out + using Storybook. +
    • +
+

+ Get a guided tutorial on component-driven development at + + Storybook tutorials + + . Read more in the + docs + . +

+
+ Tip + Adjust the width of the canvas with the + + + + + + Viewports addon in the toolbar +
+
+
diff --git a/code/frameworks/sveltekit/template/cli/svelte-5-ts-3-8/Button.stories.svelte b/code/frameworks/sveltekit/template/cli/svelte-5-ts-3-8/Button.stories.svelte new file mode 100644 index 00000000000..4c8c7cce632 --- /dev/null +++ b/code/frameworks/sveltekit/template/cli/svelte-5-ts-3-8/Button.stories.svelte @@ -0,0 +1,31 @@ + + + + + + + + + + diff --git a/code/frameworks/sveltekit/template/cli/svelte-5-ts-3-8/Button.svelte b/code/frameworks/sveltekit/template/cli/svelte-5-ts-3-8/Button.svelte new file mode 100644 index 00000000000..b31f5bffe4a --- /dev/null +++ b/code/frameworks/sveltekit/template/cli/svelte-5-ts-3-8/Button.svelte @@ -0,0 +1,29 @@ + + + diff --git a/code/frameworks/sveltekit/template/cli/svelte-5-ts-3-8/Header.stories.svelte b/code/frameworks/sveltekit/template/cli/svelte-5-ts-3-8/Header.stories.svelte new file mode 100644 index 00000000000..0130c115acf --- /dev/null +++ b/code/frameworks/sveltekit/template/cli/svelte-5-ts-3-8/Header.stories.svelte @@ -0,0 +1,26 @@ + + + + + diff --git a/code/frameworks/sveltekit/template/cli/svelte-5-ts-3-8/Header.svelte b/code/frameworks/sveltekit/template/cli/svelte-5-ts-3-8/Header.svelte new file mode 100644 index 00000000000..14e890c79e9 --- /dev/null +++ b/code/frameworks/sveltekit/template/cli/svelte-5-ts-3-8/Header.svelte @@ -0,0 +1,45 @@ + + +
+
+
+ + + + + + + +

Acme

+
+
+ {#if user} + + Welcome, {user.name}! + +
+
+
diff --git a/code/frameworks/sveltekit/template/cli/svelte-5-ts-3-8/Page.stories.svelte b/code/frameworks/sveltekit/template/cli/svelte-5-ts-3-8/Page.stories.svelte new file mode 100644 index 00000000000..ed850d83718 --- /dev/null +++ b/code/frameworks/sveltekit/template/cli/svelte-5-ts-3-8/Page.stories.svelte @@ -0,0 +1,30 @@ + + + { + const canvas = within(canvasElement); + const loginButton = canvas.getByRole('button', { name: /Log in/i }); + await expect(loginButton).toBeInTheDocument(); + await userEvent.click(loginButton); + await waitFor(() => expect(loginButton).not.toBeInTheDocument()); + + const logoutButton = canvas.getByRole('button', { name: /Log out/i }); + await expect(logoutButton).toBeInTheDocument(); + }} +/> + + diff --git a/code/frameworks/sveltekit/template/cli/svelte-5-ts-3-8/Page.svelte b/code/frameworks/sveltekit/template/cli/svelte-5-ts-3-8/Page.svelte new file mode 100644 index 00000000000..c4c069a5a50 --- /dev/null +++ b/code/frameworks/sveltekit/template/cli/svelte-5-ts-3-8/Page.svelte @@ -0,0 +1,70 @@ + + +
+
(user = { name: 'Jane Doe' })} + onLogout={() => (user = undefined)} + onCreateAccount={() => (user = { name: 'Jane Doe' })} + /> + +
+

Pages in Storybook

+

+ We recommend building UIs with a + + component-driven + + process starting with atomic components and ending with pages. +

+

+ Render pages with mock data. This makes it easy to build and review page states without + needing to navigate to them in your app. Here are some handy patterns for managing page data + in Storybook: +

+
    +
  • + Use a higher-level connected component. Storybook helps you compose such data from the + "args" of child component stories +
    • +
  • + Assemble data in the page component from your services. You can mock these services out + using Storybook. +
    • +
+

+ Get a guided tutorial on component-driven development at + + Storybook tutorials + + . Read more in the + docs + . +

+
+ Tip + Adjust the width of the canvas with the + + + + + + Viewports addon in the toolbar +
+
+
diff --git a/code/frameworks/sveltekit/template/cli/svelte-5-ts-4-9/Button.stories.svelte b/code/frameworks/sveltekit/template/cli/svelte-5-ts-4-9/Button.stories.svelte new file mode 100644 index 00000000000..4c8c7cce632 --- /dev/null +++ b/code/frameworks/sveltekit/template/cli/svelte-5-ts-4-9/Button.stories.svelte @@ -0,0 +1,31 @@ + + + + + + + + + + diff --git a/code/frameworks/sveltekit/template/cli/svelte-5-ts-4-9/Button.svelte b/code/frameworks/sveltekit/template/cli/svelte-5-ts-4-9/Button.svelte new file mode 100644 index 00000000000..b31f5bffe4a --- /dev/null +++ b/code/frameworks/sveltekit/template/cli/svelte-5-ts-4-9/Button.svelte @@ -0,0 +1,29 @@ + + + diff --git a/code/frameworks/sveltekit/template/cli/svelte-5-ts-4-9/Header.stories.svelte b/code/frameworks/sveltekit/template/cli/svelte-5-ts-4-9/Header.stories.svelte new file mode 100644 index 00000000000..0130c115acf --- /dev/null +++ b/code/frameworks/sveltekit/template/cli/svelte-5-ts-4-9/Header.stories.svelte @@ -0,0 +1,26 @@ + + + + + diff --git a/code/frameworks/sveltekit/template/cli/svelte-5-ts-4-9/Header.svelte b/code/frameworks/sveltekit/template/cli/svelte-5-ts-4-9/Header.svelte new file mode 100644 index 00000000000..14e890c79e9 --- /dev/null +++ b/code/frameworks/sveltekit/template/cli/svelte-5-ts-4-9/Header.svelte @@ -0,0 +1,45 @@ + + +
+
+
+ + + + + + + +

Acme

+
+
+ {#if user} + + Welcome, {user.name}! + +
+
+
diff --git a/code/frameworks/sveltekit/template/cli/svelte-5-ts-4-9/Page.stories.svelte b/code/frameworks/sveltekit/template/cli/svelte-5-ts-4-9/Page.stories.svelte new file mode 100644 index 00000000000..ed850d83718 --- /dev/null +++ b/code/frameworks/sveltekit/template/cli/svelte-5-ts-4-9/Page.stories.svelte @@ -0,0 +1,30 @@ + + + { + const canvas = within(canvasElement); + const loginButton = canvas.getByRole('button', { name: /Log in/i }); + await expect(loginButton).toBeInTheDocument(); + await userEvent.click(loginButton); + await waitFor(() => expect(loginButton).not.toBeInTheDocument()); + + const logoutButton = canvas.getByRole('button', { name: /Log out/i }); + await expect(logoutButton).toBeInTheDocument(); + }} +/> + + diff --git a/code/frameworks/sveltekit/template/cli/svelte-5-ts-4-9/Page.svelte b/code/frameworks/sveltekit/template/cli/svelte-5-ts-4-9/Page.svelte new file mode 100644 index 00000000000..c4c069a5a50 --- /dev/null +++ b/code/frameworks/sveltekit/template/cli/svelte-5-ts-4-9/Page.svelte @@ -0,0 +1,70 @@ + + +
+
(user = { name: 'Jane Doe' })} + onLogout={() => (user = undefined)} + onCreateAccount={() => (user = { name: 'Jane Doe' })} + /> + +
+

Pages in Storybook

+

+ We recommend building UIs with a + + component-driven + + process starting with atomic components and ending with pages. +

+

+ Render pages with mock data. This makes it easy to build and review page states without + needing to navigate to them in your app. Here are some handy patterns for managing page data + in Storybook: +

+
    +
  • + Use a higher-level connected component. Storybook helps you compose such data from the + "args" of child component stories +
    • +
  • + Assemble data in the page component from your services. You can mock these services out + using Storybook. +
    • +
+

+ Get a guided tutorial on component-driven development at + + Storybook tutorials + + . Read more in the + docs + . +

+
+ Tip + Adjust the width of the canvas with the + + + + + + Viewports addon in the toolbar +
+
+
diff --git a/code/frameworks/sveltekit/template/cli/ts-4-9/Button.stories.ts b/code/frameworks/sveltekit/template/cli/ts-4-9/Button.stories.ts new file mode 100644 index 00000000000..1b8ab10d8b7 --- /dev/null +++ b/code/frameworks/sveltekit/template/cli/ts-4-9/Button.stories.ts @@ -0,0 +1,48 @@ +import type { Meta, StoryObj } from '@storybook/sveltekit'; + +import Button from './Button.svelte'; + +// More on how to set up stories at: https://storybook.js.org/docs/writing-stories +const meta = { + title: 'Example/Button', + component: Button, + tags: ['autodocs'], + argTypes: { + backgroundColor: { control: 'color' }, + size: { + control: { type: 'select' }, + options: ['small', 'medium', 'large'], + }, + }, +} satisfies Meta diff --git a/code/frameworks/sveltekit/template/cli/ts-4-9/Header.stories.ts b/code/frameworks/sveltekit/template/cli/ts-4-9/Header.stories.ts new file mode 100644 index 00000000000..8f3588a55c1 --- /dev/null +++ b/code/frameworks/sveltekit/template/cli/ts-4-9/Header.stories.ts @@ -0,0 +1,27 @@ +import type { Meta, StoryObj } from '@storybook/sveltekit'; + +import Header from './Header.svelte'; + +const meta = { + title: 'Example/Header', + component: Header, + // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs + tags: ['autodocs'], + parameters: { + // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout + layout: 'fullscreen', + }, +} satisfies Meta
; + +export default meta; +type Story = StoryObj; + +export const LoggedIn: Story = { + args: { + user: { + name: 'Jane Doe', + }, + }, +}; + +export const LoggedOut: Story = {}; diff --git a/code/frameworks/sveltekit/template/cli/ts-4-9/Header.svelte b/code/frameworks/sveltekit/template/cli/ts-4-9/Header.svelte new file mode 100644 index 00000000000..cb6f82d5e66 --- /dev/null +++ b/code/frameworks/sveltekit/template/cli/ts-4-9/Header.svelte @@ -0,0 +1,52 @@ + + +
+
+
+ + + + + + + +

Acme

+
+
+ {#if user} + + Welcome, {user.name}! + +
+
+
diff --git a/code/frameworks/sveltekit/template/cli/ts-4-9/Page.stories.ts b/code/frameworks/sveltekit/template/cli/ts-4-9/Page.stories.ts new file mode 100644 index 00000000000..0465cf53122 --- /dev/null +++ b/code/frameworks/sveltekit/template/cli/ts-4-9/Page.stories.ts @@ -0,0 +1,32 @@ +import type { Meta, StoryObj } from '@storybook/sveltekit'; +import { expect, userEvent, waitFor, within } from '@storybook/test'; + +import Page from './Page.svelte'; + +const meta = { + title: 'Example/Page', + component: Page, + parameters: { + // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout + layout: 'fullscreen', + }, +} satisfies Meta; + +export default meta; +type Story = StoryObj; + +export const LoggedOut: Story = {}; + +// More on component testing: https://storybook.js.org/docs/writing-tests/component-testing +export const LoggedIn: Story = { + play: async ({ canvasElement }) => { + const canvas = within(canvasElement); + const loginButton = canvas.getByRole('button', { name: /Log in/i }); + await expect(loginButton).toBeInTheDocument(); + await userEvent.click(loginButton); + await waitFor(() => expect(loginButton).not.toBeInTheDocument()); + + const logoutButton = canvas.getByRole('button', { name: /Log out/i }); + await expect(logoutButton).toBeInTheDocument(); + }, +}; diff --git a/code/frameworks/sveltekit/template/cli/ts-4-9/Page.svelte b/code/frameworks/sveltekit/template/cli/ts-4-9/Page.svelte new file mode 100644 index 00000000000..94cdb07ecd3 --- /dev/null +++ b/code/frameworks/sveltekit/template/cli/ts-4-9/Page.svelte @@ -0,0 +1,70 @@ + + +
+
(user = { name: 'Jane Doe' })} + on:logout={() => (user = null)} + on:createAccount={() => (user = { name: 'Jane Doe' })} + /> + +
+

Pages in Storybook

+

+ We recommend building UIs with a + + component-driven + + process starting with atomic components and ending with pages. +

+

+ Render pages with mock data. This makes it easy to build and review page states without + needing to navigate to them in your app. Here are some handy patterns for managing page data + in Storybook: +

+
    +
  • + Use a higher-level connected component. Storybook helps you compose such data from the + "args" of child component stories +
    • +
  • + Assemble data in the page component from your services. You can mock these services out + using Storybook. +
    • +
+

+ Get a guided tutorial on component-driven development at + + Storybook tutorials + + . Read more in the + docs + . +

+
+ Tip + Adjust the width of the canvas with the + + + + + + Viewports addon in the toolbar +
+
+
From 7418c0edba7df048339a683c477532bb25b7fb97 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Fri, 7 Mar 2025 15:45:53 +0100 Subject: [PATCH 089/108] Add Storybook template components for Vue3 Vite CLI with multiple variations Expand the Vue3 Storybook template with comprehensive component support: - Add Button, Header, and Page components - Support multiple Vue3 configurations: * JavaScript * TypeScript (4.9) - Include stories, components, and CSS files - Implement Storybook best practices with autodocs and component testing --- .../template/cli/js/Button.stories.js | 44 ++++++++++ .../vue3-vite/template/cli/js/Button.vue | 52 ++++++++++++ .../template/cli/js/Header.stories.js | 48 +++++++++++ .../vue3-vite/template/cli/js/Header.vue | 59 +++++++++++++ .../vue3-vite/template/cli/js/Page.stories.js | 34 ++++++++ .../vue3-vite/template/cli/js/Page.vue | 83 +++++++++++++++++++ .../template/cli/ts-4-9/Button.stories.ts | 57 +++++++++++++ .../vue3-vite/template/cli/ts-4-9/Button.vue | 48 +++++++++++ .../template/cli/ts-4-9/Header.stories.ts | 49 +++++++++++ .../vue3-vite/template/cli/ts-4-9/Header.vue | 37 +++++++++ .../template/cli/ts-4-9/Page.stories.ts | 39 +++++++++ .../vue3-vite/template/cli/ts-4-9/Page.vue | 73 ++++++++++++++++ 12 files changed, 623 insertions(+) create mode 100644 code/frameworks/vue3-vite/template/cli/js/Button.stories.js create mode 100644 code/frameworks/vue3-vite/template/cli/js/Button.vue create mode 100644 code/frameworks/vue3-vite/template/cli/js/Header.stories.js create mode 100644 code/frameworks/vue3-vite/template/cli/js/Header.vue create mode 100644 code/frameworks/vue3-vite/template/cli/js/Page.stories.js create mode 100644 code/frameworks/vue3-vite/template/cli/js/Page.vue create mode 100644 code/frameworks/vue3-vite/template/cli/ts-4-9/Button.stories.ts create mode 100644 code/frameworks/vue3-vite/template/cli/ts-4-9/Button.vue create mode 100644 code/frameworks/vue3-vite/template/cli/ts-4-9/Header.stories.ts create mode 100644 code/frameworks/vue3-vite/template/cli/ts-4-9/Header.vue create mode 100644 code/frameworks/vue3-vite/template/cli/ts-4-9/Page.stories.ts create mode 100644 code/frameworks/vue3-vite/template/cli/ts-4-9/Page.vue diff --git a/code/frameworks/vue3-vite/template/cli/js/Button.stories.js b/code/frameworks/vue3-vite/template/cli/js/Button.stories.js new file mode 100644 index 00000000000..1ccdc1dc4c1 --- /dev/null +++ b/code/frameworks/vue3-vite/template/cli/js/Button.stories.js @@ -0,0 +1,44 @@ +import { fn } from '@storybook/test'; + +import MyButton from './Button.vue'; + +// More on how to set up stories at: https://storybook.js.org/docs/writing-stories +export default { + title: 'Example/Button', + component: MyButton, + tags: ['autodocs'], + argTypes: { + size: { control: { type: 'select' }, options: ['small', 'medium', 'large'] }, + backgroundColor: { control: 'color' }, + }, + // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args + args: { onClick: fn() }, +}; + +// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args +export const Primary = { + args: { + primary: true, + label: 'Button', + }, +}; + +export const Secondary = { + args: { + label: 'Button', + }, +}; + +export const Large = { + args: { + size: 'large', + label: 'Button', + }, +}; + +export const Small = { + args: { + size: 'small', + label: 'Button', + }, +}; diff --git a/code/frameworks/vue3-vite/template/cli/js/Button.vue b/code/frameworks/vue3-vite/template/cli/js/Button.vue new file mode 100644 index 00000000000..a831ddf4991 --- /dev/null +++ b/code/frameworks/vue3-vite/template/cli/js/Button.vue @@ -0,0 +1,52 @@ + + + diff --git a/code/frameworks/vue3-vite/template/cli/js/Header.stories.js b/code/frameworks/vue3-vite/template/cli/js/Header.stories.js new file mode 100644 index 00000000000..fbba3ec096c --- /dev/null +++ b/code/frameworks/vue3-vite/template/cli/js/Header.stories.js @@ -0,0 +1,48 @@ +import { fn } from '@storybook/test'; + +import MyHeader from './Header.vue'; + +export default { + title: 'Example/Header', + component: MyHeader, + // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs + tags: ['autodocs'], + render: (args) => ({ + // Components used in your story `template` are defined in the `components` object + components: { + MyHeader, + }, + // The story's `args` need to be mapped into the template through the `setup()` method + setup() { + // Story args can be spread into the returned object + return { + ...args, + }; + }, + // Then, the spread values can be accessed directly in the template + template: '', + }), + parameters: { + // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout + layout: 'fullscreen', + }, + args: { + onLogin: fn(), + onLogout: fn(), + onCreateAccount: fn(), + }, +}; + +export const LoggedIn = { + args: { + user: { + name: 'Jane Doe', + }, + }, +}; + +export const LoggedOut = { + args: { + user: null, + }, +}; diff --git a/code/frameworks/vue3-vite/template/cli/js/Header.vue b/code/frameworks/vue3-vite/template/cli/js/Header.vue new file mode 100644 index 00000000000..16d7740d96c --- /dev/null +++ b/code/frameworks/vue3-vite/template/cli/js/Header.vue @@ -0,0 +1,59 @@ + + + diff --git a/code/frameworks/vue3-vite/template/cli/js/Page.stories.js b/code/frameworks/vue3-vite/template/cli/js/Page.stories.js new file mode 100644 index 00000000000..f03db3c7f07 --- /dev/null +++ b/code/frameworks/vue3-vite/template/cli/js/Page.stories.js @@ -0,0 +1,34 @@ +import { expect, userEvent, within } from '@storybook/test'; + +import MyPage from './Page.vue'; + +export default { + title: 'Example/Page', + component: MyPage, + parameters: { + // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout + layout: 'fullscreen', + }, +}; + +export const LoggedOut = {}; + +// More on component testing: https://storybook.js.org/docs/writing-tests/component-testing +export const LoggedIn = { + render: () => ({ + components: { + MyPage, + }, + template: '', + }), + play: async ({ canvasElement }) => { + const canvas = within(canvasElement); + const loginButton = canvas.getByRole('button', { name: /Log in/i }); + await expect(loginButton).toBeInTheDocument(); + await userEvent.click(loginButton); + await expect(loginButton).not.toBeInTheDocument(); + + const logoutButton = canvas.getByRole('button', { name: /Log out/i }); + await expect(logoutButton).toBeInTheDocument(); + }, +}; diff --git a/code/frameworks/vue3-vite/template/cli/js/Page.vue b/code/frameworks/vue3-vite/template/cli/js/Page.vue new file mode 100644 index 00000000000..245401b72c4 --- /dev/null +++ b/code/frameworks/vue3-vite/template/cli/js/Page.vue @@ -0,0 +1,83 @@ + + + diff --git a/code/frameworks/vue3-vite/template/cli/ts-4-9/Button.stories.ts b/code/frameworks/vue3-vite/template/cli/ts-4-9/Button.stories.ts new file mode 100644 index 00000000000..ec2a27b3973 --- /dev/null +++ b/code/frameworks/vue3-vite/template/cli/ts-4-9/Button.stories.ts @@ -0,0 +1,57 @@ +import { fn } from '@storybook/test'; + +import type { Meta, StoryObj } from '@storybook/vue3-vite'; + +import Button from './Button.vue'; + +// More on how to set up stories at: https://storybook.js.org/docs/writing-stories +const meta = { + title: 'Example/Button', + component: Button, + // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/writing-docs/autodocs + tags: ['autodocs'], + argTypes: { + size: { control: 'select', options: ['small', 'medium', 'large'] }, + backgroundColor: { control: 'color' }, + }, + args: { + primary: false, + // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args + onClick: fn(), + }, +} satisfies Meta; + +export default meta; +type Story = StoryObj; +/* + *👇 Render functions are a framework specific feature to allow you control on how the component renders. + * See https://storybook.js.org/docs/api/csf + * to learn how to use render functions. + */ +export const Primary: Story = { + args: { + primary: true, + label: 'Button', + }, +}; + +export const Secondary: Story = { + args: { + primary: false, + label: 'Button', + }, +}; + +export const Large: Story = { + args: { + label: 'Button', + size: 'large', + }, +}; + +export const Small: Story = { + args: { + label: 'Button', + size: 'small', + }, +}; diff --git a/code/frameworks/vue3-vite/template/cli/ts-4-9/Button.vue b/code/frameworks/vue3-vite/template/cli/ts-4-9/Button.vue new file mode 100644 index 00000000000..2e1ee0ee22f --- /dev/null +++ b/code/frameworks/vue3-vite/template/cli/ts-4-9/Button.vue @@ -0,0 +1,48 @@ + + + \ No newline at end of file diff --git a/code/frameworks/vue3-vite/template/cli/ts-4-9/Header.stories.ts b/code/frameworks/vue3-vite/template/cli/ts-4-9/Header.stories.ts new file mode 100644 index 00000000000..f0f1b66f771 --- /dev/null +++ b/code/frameworks/vue3-vite/template/cli/ts-4-9/Header.stories.ts @@ -0,0 +1,49 @@ +import { fn } from '@storybook/test'; + +import type { Meta, StoryObj } from '@storybook/vue3-vite'; + +import MyHeader from './Header.vue'; + +const meta = { + /* 👇 The title prop is optional. + * See https://storybook.js.org/docs/configure/#configure-story-loading + * to learn how to generate automatic titles + */ + title: 'Example/Header', + component: MyHeader, + render: (args: any) => ({ + components: { MyHeader }, + setup() { + return { args }; + }, + template: '', + }), + parameters: { + // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout + layout: 'fullscreen', + }, + args: { + onLogin: fn(), + onLogout: fn(), + onCreateAccount: fn(), + }, + // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/writing-docs/autodocs + tags: ['autodocs'], +} satisfies Meta; + +export default meta; +type Story = StoryObj; + +export const LoggedIn: Story = { + args: { + user: { + name: 'Jane Doe', + }, + }, +}; + +export const LoggedOut: Story = { + args: { + user: null, + }, +}; diff --git a/code/frameworks/vue3-vite/template/cli/ts-4-9/Header.vue b/code/frameworks/vue3-vite/template/cli/ts-4-9/Header.vue new file mode 100644 index 00000000000..b716db02b3f --- /dev/null +++ b/code/frameworks/vue3-vite/template/cli/ts-4-9/Header.vue @@ -0,0 +1,37 @@ + + + + diff --git a/code/frameworks/vue3-vite/template/cli/ts-4-9/Page.stories.ts b/code/frameworks/vue3-vite/template/cli/ts-4-9/Page.stories.ts new file mode 100644 index 00000000000..906f674fa3a --- /dev/null +++ b/code/frameworks/vue3-vite/template/cli/ts-4-9/Page.stories.ts @@ -0,0 +1,39 @@ +import { expect, userEvent, within } from '@storybook/test'; + +import type { Meta, StoryObj } from '@storybook/vue3-vite'; + +import MyPage from './Page.vue'; + +const meta = { + title: 'Example/Page', + component: MyPage, + render: () => ({ + components: { MyPage }, + template: '', + }), + parameters: { + // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout + layout: 'fullscreen', + }, + // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/writing-docs/autodocs + tags: ['autodocs'], +} satisfies Meta; + +export default meta; +type Story = StoryObj; + +// More on component testing: https://storybook.js.org/docs/writing-tests/component-testing +export const LoggedIn: Story = { + play: async ({ canvasElement }: any) => { + const canvas = within(canvasElement); + const loginButton = canvas.getByRole('button', { name: /Log in/i }); + await expect(loginButton).toBeInTheDocument(); + await userEvent.click(loginButton); + await expect(loginButton).not.toBeInTheDocument(); + + const logoutButton = canvas.getByRole('button', { name: /Log out/i }); + await expect(logoutButton).toBeInTheDocument(); + }, +}; + +export const LoggedOut: Story = {}; diff --git a/code/frameworks/vue3-vite/template/cli/ts-4-9/Page.vue b/code/frameworks/vue3-vite/template/cli/ts-4-9/Page.vue new file mode 100644 index 00000000000..6a6e5eb1a4a --- /dev/null +++ b/code/frameworks/vue3-vite/template/cli/ts-4-9/Page.vue @@ -0,0 +1,73 @@ + + + From 543fbbacb6bc765d16b71c431edeb5d43f0921d3 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Fri, 7 Mar 2025 15:47:11 +0100 Subject: [PATCH 090/108] Add Vue3 Webpack5 Storybook template components for JavaScript and TypeScript Expand the Vue3 Webpack5 Storybook template with comprehensive component support: - Add Button, Header, and Page components for JavaScript and TypeScript (4.9) - Include stories, components, and CSS files - Implement Storybook best practices with autodocs and component testing --- .../template/cli/js/Button.stories.js | 44 ++++++++++ .../vue3-webpack5/template/cli/js/Button.vue | 52 ++++++++++++ .../template/cli/js/Header.stories.js | 48 +++++++++++ .../vue3-webpack5/template/cli/js/Header.vue | 59 +++++++++++++ .../template/cli/js/Page.stories.js | 34 ++++++++ .../vue3-webpack5/template/cli/js/Page.vue | 83 +++++++++++++++++++ .../template/cli/ts-4-9/Button.stories.ts | 57 +++++++++++++ .../template/cli/ts-4-9/Button.vue | 48 +++++++++++ .../template/cli/ts-4-9/Header.stories.ts | 49 +++++++++++ .../template/cli/ts-4-9/Header.vue | 37 +++++++++ .../template/cli/ts-4-9/Page.stories.ts | 39 +++++++++ .../template/cli/ts-4-9/Page.vue | 73 ++++++++++++++++ 12 files changed, 623 insertions(+) create mode 100644 code/frameworks/vue3-webpack5/template/cli/js/Button.stories.js create mode 100644 code/frameworks/vue3-webpack5/template/cli/js/Button.vue create mode 100644 code/frameworks/vue3-webpack5/template/cli/js/Header.stories.js create mode 100644 code/frameworks/vue3-webpack5/template/cli/js/Header.vue create mode 100644 code/frameworks/vue3-webpack5/template/cli/js/Page.stories.js create mode 100644 code/frameworks/vue3-webpack5/template/cli/js/Page.vue create mode 100644 code/frameworks/vue3-webpack5/template/cli/ts-4-9/Button.stories.ts create mode 100644 code/frameworks/vue3-webpack5/template/cli/ts-4-9/Button.vue create mode 100644 code/frameworks/vue3-webpack5/template/cli/ts-4-9/Header.stories.ts create mode 100644 code/frameworks/vue3-webpack5/template/cli/ts-4-9/Header.vue create mode 100644 code/frameworks/vue3-webpack5/template/cli/ts-4-9/Page.stories.ts create mode 100644 code/frameworks/vue3-webpack5/template/cli/ts-4-9/Page.vue diff --git a/code/frameworks/vue3-webpack5/template/cli/js/Button.stories.js b/code/frameworks/vue3-webpack5/template/cli/js/Button.stories.js new file mode 100644 index 00000000000..1ccdc1dc4c1 --- /dev/null +++ b/code/frameworks/vue3-webpack5/template/cli/js/Button.stories.js @@ -0,0 +1,44 @@ +import { fn } from '@storybook/test'; + +import MyButton from './Button.vue'; + +// More on how to set up stories at: https://storybook.js.org/docs/writing-stories +export default { + title: 'Example/Button', + component: MyButton, + tags: ['autodocs'], + argTypes: { + size: { control: { type: 'select' }, options: ['small', 'medium', 'large'] }, + backgroundColor: { control: 'color' }, + }, + // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args + args: { onClick: fn() }, +}; + +// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args +export const Primary = { + args: { + primary: true, + label: 'Button', + }, +}; + +export const Secondary = { + args: { + label: 'Button', + }, +}; + +export const Large = { + args: { + size: 'large', + label: 'Button', + }, +}; + +export const Small = { + args: { + size: 'small', + label: 'Button', + }, +}; diff --git a/code/frameworks/vue3-webpack5/template/cli/js/Button.vue b/code/frameworks/vue3-webpack5/template/cli/js/Button.vue new file mode 100644 index 00000000000..a831ddf4991 --- /dev/null +++ b/code/frameworks/vue3-webpack5/template/cli/js/Button.vue @@ -0,0 +1,52 @@ + + + diff --git a/code/frameworks/vue3-webpack5/template/cli/js/Header.stories.js b/code/frameworks/vue3-webpack5/template/cli/js/Header.stories.js new file mode 100644 index 00000000000..fbba3ec096c --- /dev/null +++ b/code/frameworks/vue3-webpack5/template/cli/js/Header.stories.js @@ -0,0 +1,48 @@ +import { fn } from '@storybook/test'; + +import MyHeader from './Header.vue'; + +export default { + title: 'Example/Header', + component: MyHeader, + // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs + tags: ['autodocs'], + render: (args) => ({ + // Components used in your story `template` are defined in the `components` object + components: { + MyHeader, + }, + // The story's `args` need to be mapped into the template through the `setup()` method + setup() { + // Story args can be spread into the returned object + return { + ...args, + }; + }, + // Then, the spread values can be accessed directly in the template + template: '', + }), + parameters: { + // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout + layout: 'fullscreen', + }, + args: { + onLogin: fn(), + onLogout: fn(), + onCreateAccount: fn(), + }, +}; + +export const LoggedIn = { + args: { + user: { + name: 'Jane Doe', + }, + }, +}; + +export const LoggedOut = { + args: { + user: null, + }, +}; diff --git a/code/frameworks/vue3-webpack5/template/cli/js/Header.vue b/code/frameworks/vue3-webpack5/template/cli/js/Header.vue new file mode 100644 index 00000000000..16d7740d96c --- /dev/null +++ b/code/frameworks/vue3-webpack5/template/cli/js/Header.vue @@ -0,0 +1,59 @@ + + + diff --git a/code/frameworks/vue3-webpack5/template/cli/js/Page.stories.js b/code/frameworks/vue3-webpack5/template/cli/js/Page.stories.js new file mode 100644 index 00000000000..f03db3c7f07 --- /dev/null +++ b/code/frameworks/vue3-webpack5/template/cli/js/Page.stories.js @@ -0,0 +1,34 @@ +import { expect, userEvent, within } from '@storybook/test'; + +import MyPage from './Page.vue'; + +export default { + title: 'Example/Page', + component: MyPage, + parameters: { + // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout + layout: 'fullscreen', + }, +}; + +export const LoggedOut = {}; + +// More on component testing: https://storybook.js.org/docs/writing-tests/component-testing +export const LoggedIn = { + render: () => ({ + components: { + MyPage, + }, + template: '', + }), + play: async ({ canvasElement }) => { + const canvas = within(canvasElement); + const loginButton = canvas.getByRole('button', { name: /Log in/i }); + await expect(loginButton).toBeInTheDocument(); + await userEvent.click(loginButton); + await expect(loginButton).not.toBeInTheDocument(); + + const logoutButton = canvas.getByRole('button', { name: /Log out/i }); + await expect(logoutButton).toBeInTheDocument(); + }, +}; diff --git a/code/frameworks/vue3-webpack5/template/cli/js/Page.vue b/code/frameworks/vue3-webpack5/template/cli/js/Page.vue new file mode 100644 index 00000000000..245401b72c4 --- /dev/null +++ b/code/frameworks/vue3-webpack5/template/cli/js/Page.vue @@ -0,0 +1,83 @@ + + + diff --git a/code/frameworks/vue3-webpack5/template/cli/ts-4-9/Button.stories.ts b/code/frameworks/vue3-webpack5/template/cli/ts-4-9/Button.stories.ts new file mode 100644 index 00000000000..e2c8870ff6b --- /dev/null +++ b/code/frameworks/vue3-webpack5/template/cli/ts-4-9/Button.stories.ts @@ -0,0 +1,57 @@ +import { fn } from '@storybook/test'; + +import type { Meta, StoryObj } from '@storybook/vue3-webpack5'; + +import Button from './Button.vue'; + +// More on how to set up stories at: https://storybook.js.org/docs/writing-stories +const meta = { + title: 'Example/Button', + component: Button, + // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/writing-docs/autodocs + tags: ['autodocs'], + argTypes: { + size: { control: 'select', options: ['small', 'medium', 'large'] }, + backgroundColor: { control: 'color' }, + }, + args: { + primary: false, + // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args + onClick: fn(), + }, +} satisfies Meta; + +export default meta; +type Story = StoryObj; +/* + *👇 Render functions are a framework specific feature to allow you control on how the component renders. + * See https://storybook.js.org/docs/api/csf + * to learn how to use render functions. + */ +export const Primary: Story = { + args: { + primary: true, + label: 'Button', + }, +}; + +export const Secondary: Story = { + args: { + primary: false, + label: 'Button', + }, +}; + +export const Large: Story = { + args: { + label: 'Button', + size: 'large', + }, +}; + +export const Small: Story = { + args: { + label: 'Button', + size: 'small', + }, +}; diff --git a/code/frameworks/vue3-webpack5/template/cli/ts-4-9/Button.vue b/code/frameworks/vue3-webpack5/template/cli/ts-4-9/Button.vue new file mode 100644 index 00000000000..2e1ee0ee22f --- /dev/null +++ b/code/frameworks/vue3-webpack5/template/cli/ts-4-9/Button.vue @@ -0,0 +1,48 @@ + + + \ No newline at end of file diff --git a/code/frameworks/vue3-webpack5/template/cli/ts-4-9/Header.stories.ts b/code/frameworks/vue3-webpack5/template/cli/ts-4-9/Header.stories.ts new file mode 100644 index 00000000000..0258d53ac84 --- /dev/null +++ b/code/frameworks/vue3-webpack5/template/cli/ts-4-9/Header.stories.ts @@ -0,0 +1,49 @@ +import { fn } from '@storybook/test'; + +import type { Meta, StoryObj } from '@storybook/vue3-webpack5'; + +import MyHeader from './Header.vue'; + +const meta = { + /* 👇 The title prop is optional. + * See https://storybook.js.org/docs/configure/#configure-story-loading + * to learn how to generate automatic titles + */ + title: 'Example/Header', + component: MyHeader, + render: (args: any) => ({ + components: { MyHeader }, + setup() { + return { args }; + }, + template: '', + }), + parameters: { + // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout + layout: 'fullscreen', + }, + args: { + onLogin: fn(), + onLogout: fn(), + onCreateAccount: fn(), + }, + // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/writing-docs/autodocs + tags: ['autodocs'], +} satisfies Meta; + +export default meta; +type Story = StoryObj; + +export const LoggedIn: Story = { + args: { + user: { + name: 'Jane Doe', + }, + }, +}; + +export const LoggedOut: Story = { + args: { + user: null, + }, +}; diff --git a/code/frameworks/vue3-webpack5/template/cli/ts-4-9/Header.vue b/code/frameworks/vue3-webpack5/template/cli/ts-4-9/Header.vue new file mode 100644 index 00000000000..b716db02b3f --- /dev/null +++ b/code/frameworks/vue3-webpack5/template/cli/ts-4-9/Header.vue @@ -0,0 +1,37 @@ + + + + diff --git a/code/frameworks/vue3-webpack5/template/cli/ts-4-9/Page.stories.ts b/code/frameworks/vue3-webpack5/template/cli/ts-4-9/Page.stories.ts new file mode 100644 index 00000000000..dfc690f896c --- /dev/null +++ b/code/frameworks/vue3-webpack5/template/cli/ts-4-9/Page.stories.ts @@ -0,0 +1,39 @@ +import { expect, userEvent, within } from '@storybook/test'; + +import type { Meta, StoryObj } from '@storybook/vue3-webpack5'; + +import MyPage from './Page.vue'; + +const meta = { + title: 'Example/Page', + component: MyPage, + render: () => ({ + components: { MyPage }, + template: '', + }), + parameters: { + // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout + layout: 'fullscreen', + }, + // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/writing-docs/autodocs + tags: ['autodocs'], +} satisfies Meta; + +export default meta; +type Story = StoryObj; + +// More on component testing: https://storybook.js.org/docs/writing-tests/component-testing +export const LoggedIn: Story = { + play: async ({ canvasElement }: any) => { + const canvas = within(canvasElement); + const loginButton = canvas.getByRole('button', { name: /Log in/i }); + await expect(loginButton).toBeInTheDocument(); + await userEvent.click(loginButton); + await expect(loginButton).not.toBeInTheDocument(); + + const logoutButton = canvas.getByRole('button', { name: /Log out/i }); + await expect(logoutButton).toBeInTheDocument(); + }, +}; + +export const LoggedOut: Story = {}; diff --git a/code/frameworks/vue3-webpack5/template/cli/ts-4-9/Page.vue b/code/frameworks/vue3-webpack5/template/cli/ts-4-9/Page.vue new file mode 100644 index 00000000000..6a6e5eb1a4a --- /dev/null +++ b/code/frameworks/vue3-webpack5/template/cli/ts-4-9/Page.vue @@ -0,0 +1,73 @@ + + + From 92237e7e981690cb9a9eb0cb9fba0d4d5ca27836 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Fri, 7 Mar 2025 15:49:12 +0100 Subject: [PATCH 091/108] Add Web Components Storybook template components for Vite and Webpack5 Expand the Web Components Storybook template with comprehensive component support: - Add Button, Header, and Page components for JavaScript and TypeScript (4.9) - Support multiple configurations for Vite and Webpack5 - Include stories, components, and CSS files - Add ESLint configuration to disable import/extensions rule - Implement Storybook best practices with autodocs and component testing --- .../template/cli/.eslintrc.json | 5 ++ .../template/cli/js/Button.js | 20 +++++ .../template/cli/js/Button.stories.js | 46 ++++++++++++ .../template/cli/js/Header.js | 45 ++++++++++++ .../template/cli/js/Header.stories.js | 24 ++++++ .../template/cli/js/Page.js | 62 ++++++++++++++++ .../template/cli/js/Page.stories.js | 20 +++++ .../template/cli/ts-4-9/Button.stories.ts | 52 +++++++++++++ .../template/cli/ts-4-9/Button.ts | 32 ++++++++ .../template/cli/ts-4-9/Header.stories.ts | 31 ++++++++ .../template/cli/ts-4-9/Header.ts | 56 ++++++++++++++ .../template/cli/ts-4-9/Page.stories.ts | 26 +++++++ .../template/cli/ts-4-9/Page.ts | 73 +++++++++++++++++++ .../template/cli/.eslintrc.json | 5 ++ .../template/cli/js/Button.js | 20 +++++ .../template/cli/js/Button.stories.js | 46 ++++++++++++ .../template/cli/js/Header.js | 45 ++++++++++++ .../template/cli/js/Header.stories.js | 24 ++++++ .../template/cli/js/Page.js | 62 ++++++++++++++++ .../template/cli/js/Page.stories.js | 20 +++++ .../template/cli/ts-4-9/Button.stories.ts | 52 +++++++++++++ .../template/cli/ts-4-9/Button.ts | 32 ++++++++ .../template/cli/ts-4-9/Header.stories.ts | 31 ++++++++ .../template/cli/ts-4-9/Header.ts | 56 ++++++++++++++ .../template/cli/ts-4-9/Page.stories.ts | 26 +++++++ .../template/cli/ts-4-9/Page.ts | 73 +++++++++++++++++++ 26 files changed, 984 insertions(+) create mode 100644 code/frameworks/web-components-vite/template/cli/.eslintrc.json create mode 100644 code/frameworks/web-components-vite/template/cli/js/Button.js create mode 100644 code/frameworks/web-components-vite/template/cli/js/Button.stories.js create mode 100644 code/frameworks/web-components-vite/template/cli/js/Header.js create mode 100644 code/frameworks/web-components-vite/template/cli/js/Header.stories.js create mode 100644 code/frameworks/web-components-vite/template/cli/js/Page.js create mode 100644 code/frameworks/web-components-vite/template/cli/js/Page.stories.js create mode 100644 code/frameworks/web-components-vite/template/cli/ts-4-9/Button.stories.ts create mode 100644 code/frameworks/web-components-vite/template/cli/ts-4-9/Button.ts create mode 100644 code/frameworks/web-components-vite/template/cli/ts-4-9/Header.stories.ts create mode 100644 code/frameworks/web-components-vite/template/cli/ts-4-9/Header.ts create mode 100644 code/frameworks/web-components-vite/template/cli/ts-4-9/Page.stories.ts create mode 100644 code/frameworks/web-components-vite/template/cli/ts-4-9/Page.ts create mode 100644 code/frameworks/web-components-webpack5/template/cli/.eslintrc.json create mode 100644 code/frameworks/web-components-webpack5/template/cli/js/Button.js create mode 100644 code/frameworks/web-components-webpack5/template/cli/js/Button.stories.js create mode 100644 code/frameworks/web-components-webpack5/template/cli/js/Header.js create mode 100644 code/frameworks/web-components-webpack5/template/cli/js/Header.stories.js create mode 100644 code/frameworks/web-components-webpack5/template/cli/js/Page.js create mode 100644 code/frameworks/web-components-webpack5/template/cli/js/Page.stories.js create mode 100644 code/frameworks/web-components-webpack5/template/cli/ts-4-9/Button.stories.ts create mode 100644 code/frameworks/web-components-webpack5/template/cli/ts-4-9/Button.ts create mode 100644 code/frameworks/web-components-webpack5/template/cli/ts-4-9/Header.stories.ts create mode 100644 code/frameworks/web-components-webpack5/template/cli/ts-4-9/Header.ts create mode 100644 code/frameworks/web-components-webpack5/template/cli/ts-4-9/Page.stories.ts create mode 100644 code/frameworks/web-components-webpack5/template/cli/ts-4-9/Page.ts diff --git a/code/frameworks/web-components-vite/template/cli/.eslintrc.json b/code/frameworks/web-components-vite/template/cli/.eslintrc.json new file mode 100644 index 00000000000..40ece4a0aa1 --- /dev/null +++ b/code/frameworks/web-components-vite/template/cli/.eslintrc.json @@ -0,0 +1,5 @@ +{ + "rules": { + "import/extensions": "off" + } +} diff --git a/code/frameworks/web-components-vite/template/cli/js/Button.js b/code/frameworks/web-components-vite/template/cli/js/Button.js new file mode 100644 index 00000000000..6cbe804eb1b --- /dev/null +++ b/code/frameworks/web-components-vite/template/cli/js/Button.js @@ -0,0 +1,20 @@ +import { html } from 'lit'; +import { styleMap } from 'lit/directives/style-map.js'; + +import './button.css'; + +/** Primary UI component for user interaction */ +export const Button = ({ primary, backgroundColor = null, size, label, onClick }) => { + const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary'; + + return html` + + `; +}; diff --git a/code/frameworks/web-components-vite/template/cli/js/Button.stories.js b/code/frameworks/web-components-vite/template/cli/js/Button.stories.js new file mode 100644 index 00000000000..23a32272b7d --- /dev/null +++ b/code/frameworks/web-components-vite/template/cli/js/Button.stories.js @@ -0,0 +1,46 @@ +import { fn } from '@storybook/test'; + +import { Button } from './Button'; + +// More on how to set up stories at: https://storybook.js.org/docs/writing-stories +export default { + title: 'Example/Button', + tags: ['autodocs'], + render: (args) => Button(args), + argTypes: { + backgroundColor: { control: 'color' }, + size: { + control: { type: 'select' }, + options: ['small', 'medium', 'large'], + }, + }, + args: { onClick: fn() }, +}; + +// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args +export const Primary = { + args: { + primary: true, + label: 'Button', + }, +}; + +export const Secondary = { + args: { + label: 'Button', + }, +}; + +export const Large = { + args: { + size: 'large', + label: 'Button', + }, +}; + +export const Small = { + args: { + size: 'small', + label: 'Button', + }, +}; diff --git a/code/frameworks/web-components-vite/template/cli/js/Header.js b/code/frameworks/web-components-vite/template/cli/js/Header.js new file mode 100644 index 00000000000..19fea63604a --- /dev/null +++ b/code/frameworks/web-components-vite/template/cli/js/Header.js @@ -0,0 +1,45 @@ +import { html } from 'lit'; + +import { Button } from './Button'; +import './header.css'; + +export const Header = ({ user, onLogin, onLogout, onCreateAccount }) => html` +
+
+
+ + + + + + + +

Acme

+
+
+ ${user + ? Button({ size: 'small', onClick: onLogout, label: 'Log out' }) + : html`${Button({ + size: 'small', + onClick: onLogin, + label: 'Log in', + })} + ${Button({ + primary: true, + size: 'small', + onClick: onCreateAccount, + label: 'Sign up', + })}`} +
+
+
+`; diff --git a/code/frameworks/web-components-vite/template/cli/js/Header.stories.js b/code/frameworks/web-components-vite/template/cli/js/Header.stories.js new file mode 100644 index 00000000000..17433543776 --- /dev/null +++ b/code/frameworks/web-components-vite/template/cli/js/Header.stories.js @@ -0,0 +1,24 @@ +import { fn } from '@storybook/test'; + +import { Header } from './Header'; + +export default { + title: 'Example/Header', + // This component will have an automatically generated Autodocs entry: https://storybook.js.org/web-components/vue/writing-docs/autodocs + tags: ['autodocs'], + render: (args) => Header(args), + args: { + onLogin: fn(), + onLogout: fn(), + onCreateAccount: fn(), + }, +}; +export const LoggedIn = { + args: { + user: { + name: 'Jane Doe', + }, + }, +}; + +export const LoggedOut = {}; diff --git a/code/frameworks/web-components-vite/template/cli/js/Page.js b/code/frameworks/web-components-vite/template/cli/js/Page.js new file mode 100644 index 00000000000..54919dabd48 --- /dev/null +++ b/code/frameworks/web-components-vite/template/cli/js/Page.js @@ -0,0 +1,62 @@ +import { html } from 'lit'; + +import { Header } from './Header'; +import './page.css'; + +export const Page = ({ user, onLogin, onLogout, onCreateAccount }) => html` +
+ ${Header({ + user, + onLogin, + onLogout, + onCreateAccount, + })} + +
+

Pages in Storybook

+

+ We recommend building UIs with a + + component-driven process starting with atomic components and ending with pages. +

+

+ Render pages with mock data. This makes it easy to build and review page states without + needing to navigate to them in your app. Here are some handy patterns for managing page data + in Storybook: +

+
    +
  • + Use a higher-level connected component. Storybook helps you compose such data from the + "args" of child component stories +
    • +
  • + Assemble data in the page component from your services. You can mock these services out + using Storybook. +
    • +
+

+ Get a guided tutorial on component-driven development at + + Storybook tutorials + + . Read more in the + docs + . +

+
+ Tip Adjust the width of the canvas with the + + + + + + Viewports addon in the toolbar +
+
+
+`; diff --git a/code/frameworks/web-components-vite/template/cli/js/Page.stories.js b/code/frameworks/web-components-vite/template/cli/js/Page.stories.js new file mode 100644 index 00000000000..7c28c5ad14b --- /dev/null +++ b/code/frameworks/web-components-vite/template/cli/js/Page.stories.js @@ -0,0 +1,20 @@ +import * as HeaderStories from './Header.stories'; +import { Page } from './Page'; + +export default { + title: 'Example/Page', + render: (args) => Page(args), +}; + +export const LoggedIn = { + args: { + // More on composing args: https://storybook.js.org/docs/writing-stories/args#args-composition + ...HeaderStories.LoggedIn.args, + }, +}; + +export const LoggedOut = { + args: { + ...HeaderStories.LoggedOut.args, + }, +}; diff --git a/code/frameworks/web-components-vite/template/cli/ts-4-9/Button.stories.ts b/code/frameworks/web-components-vite/template/cli/ts-4-9/Button.stories.ts new file mode 100644 index 00000000000..0ee520ffdda --- /dev/null +++ b/code/frameworks/web-components-vite/template/cli/ts-4-9/Button.stories.ts @@ -0,0 +1,52 @@ +import { fn } from '@storybook/test'; + +import type { Meta, StoryObj } from '@storybook/web-components-vite'; + +import type { ButtonProps } from './Button'; +import { Button } from './Button'; + +// More on how to set up stories at: https://storybook.js.org/docs/writing-stories +const meta = { + title: 'Example/Button', + tags: ['autodocs'], + render: (args) => Button(args), + argTypes: { + backgroundColor: { control: 'color' }, + size: { + control: { type: 'select' }, + options: ['small', 'medium', 'large'], + }, + }, + args: { onClick: fn() }, +} satisfies Meta; + +export default meta; +type Story = StoryObj; + +// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args +export const Primary: Story = { + args: { + primary: true, + label: 'Button', + }, +}; + +export const Secondary: Story = { + args: { + label: 'Button', + }, +}; + +export const Large: Story = { + args: { + size: 'large', + label: 'Button', + }, +}; + +export const Small: Story = { + args: { + size: 'small', + label: 'Button', + }, +}; diff --git a/code/frameworks/web-components-vite/template/cli/ts-4-9/Button.ts b/code/frameworks/web-components-vite/template/cli/ts-4-9/Button.ts new file mode 100644 index 00000000000..4ca7fe4a723 --- /dev/null +++ b/code/frameworks/web-components-vite/template/cli/ts-4-9/Button.ts @@ -0,0 +1,32 @@ +import { html } from 'lit'; +import { styleMap } from 'lit/directives/style-map.js'; + +import './button.css'; + +export interface ButtonProps { + /** Is this the principal call to action on the page? */ + primary?: boolean; + /** What background color to use */ + backgroundColor?: string; + /** How large should the button be? */ + size?: 'small' | 'medium' | 'large'; + /** Button contents */ + label: string; + /** Optional click handler */ + onClick?: () => void; +} +/** Primary UI component for user interaction */ +export const Button = ({ primary, backgroundColor, size, label, onClick }: ButtonProps) => { + const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary'; + + return html` + + `; +}; diff --git a/code/frameworks/web-components-vite/template/cli/ts-4-9/Header.stories.ts b/code/frameworks/web-components-vite/template/cli/ts-4-9/Header.stories.ts new file mode 100644 index 00000000000..65288bfb74d --- /dev/null +++ b/code/frameworks/web-components-vite/template/cli/ts-4-9/Header.stories.ts @@ -0,0 +1,31 @@ +import { fn } from '@storybook/test'; + +import type { Meta, StoryObj } from '@storybook/web-components-vite'; + +import type { HeaderProps } from './Header'; +import { Header } from './Header'; + +const meta = { + title: 'Example/Header', + // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs + tags: ['autodocs'], + render: (args: HeaderProps) => Header(args), + args: { + onLogin: fn(), + onLogout: fn(), + onCreateAccount: fn(), + }, +} satisfies Meta; + +export default meta; +type Story = StoryObj; + +export const LoggedIn: Story = { + args: { + user: { + name: 'Jane Doe', + }, + }, +}; + +export const LoggedOut: Story = {}; diff --git a/code/frameworks/web-components-vite/template/cli/ts-4-9/Header.ts b/code/frameworks/web-components-vite/template/cli/ts-4-9/Header.ts new file mode 100644 index 00000000000..7c3c8b89375 --- /dev/null +++ b/code/frameworks/web-components-vite/template/cli/ts-4-9/Header.ts @@ -0,0 +1,56 @@ +import { html } from 'lit'; + +import { Button } from './Button'; +import './header.css'; + +type User = { + name: string; +}; + +export interface HeaderProps { + user?: User; + onLogin?: () => void; + onLogout?: () => void; + onCreateAccount?: () => void; +} + +export const Header = ({ user, onLogin, onLogout, onCreateAccount }: HeaderProps) => html` +
+
+
+ + + + + + + +

Acme

+
+
+ ${user + ? Button({ size: 'small', onClick: onLogout, label: 'Log out' }) + : html`${Button({ + size: 'small', + onClick: onLogin, + label: 'Log in', + })} + ${Button({ + primary: true, + size: 'small', + onClick: onCreateAccount, + label: 'Sign up', + })}`} +
+
+
+`; diff --git a/code/frameworks/web-components-vite/template/cli/ts-4-9/Page.stories.ts b/code/frameworks/web-components-vite/template/cli/ts-4-9/Page.stories.ts new file mode 100644 index 00000000000..57505c5f694 --- /dev/null +++ b/code/frameworks/web-components-vite/template/cli/ts-4-9/Page.stories.ts @@ -0,0 +1,26 @@ +import type { Meta, StoryObj } from '@storybook/web-components-vite'; + +import * as HeaderStories from './Header.stories'; +import type { PageProps } from './Page'; +import { Page } from './Page'; + +const meta = { + title: 'Example/Page', + render: (args: PageProps) => Page(args), +} satisfies Meta; + +export default meta; +type Story = StoryObj; + +export const LoggedIn: Story = { + args: { + // More on composing args: https://storybook.js.org/docs/writing-stories/args#args-composition + ...HeaderStories.LoggedIn.args, + }, +}; + +export const LoggedOut: Story = { + args: { + ...HeaderStories.LoggedOut.args, + }, +}; diff --git a/code/frameworks/web-components-vite/template/cli/ts-4-9/Page.ts b/code/frameworks/web-components-vite/template/cli/ts-4-9/Page.ts new file mode 100644 index 00000000000..079c4f04cfb --- /dev/null +++ b/code/frameworks/web-components-vite/template/cli/ts-4-9/Page.ts @@ -0,0 +1,73 @@ +import { html } from 'lit'; + +import { Header } from './Header'; +import './page.css'; + +type User = { + name: string; +}; + +export interface PageProps { + user?: User; + onLogin?: () => void; + onLogout?: () => void; + onCreateAccount?: () => void; +} + +export const Page = ({ user, onLogin, onLogout, onCreateAccount }: PageProps) => html` +
+ ${Header({ + user, + onLogin, + onLogout, + onCreateAccount, + })} + +
+

Pages in Storybook

+

+ We recommend building UIs with a + + component-driven process starting with atomic components and ending with pages. +

+

+ Render pages with mock data. This makes it easy to build and review page states without + needing to navigate to them in your app. Here are some handy patterns for managing page data + in Storybook: +

+
    +
  • + Use a higher-level connected component. Storybook helps you compose such data from the + "args" of child component stories +
    • +
  • + Assemble data in the page component from your services. You can mock these services out + using Storybook. +
    • +
+

+ Get a guided tutorial on component-driven development at + + Storybook tutorials + + . Read more in the + docs + . +

+
+ Tip Adjust the width of the canvas with the + + + + + + Viewports addon in the toolbar +
+
+
+`; diff --git a/code/frameworks/web-components-webpack5/template/cli/.eslintrc.json b/code/frameworks/web-components-webpack5/template/cli/.eslintrc.json new file mode 100644 index 00000000000..40ece4a0aa1 --- /dev/null +++ b/code/frameworks/web-components-webpack5/template/cli/.eslintrc.json @@ -0,0 +1,5 @@ +{ + "rules": { + "import/extensions": "off" + } +} diff --git a/code/frameworks/web-components-webpack5/template/cli/js/Button.js b/code/frameworks/web-components-webpack5/template/cli/js/Button.js new file mode 100644 index 00000000000..6cbe804eb1b --- /dev/null +++ b/code/frameworks/web-components-webpack5/template/cli/js/Button.js @@ -0,0 +1,20 @@ +import { html } from 'lit'; +import { styleMap } from 'lit/directives/style-map.js'; + +import './button.css'; + +/** Primary UI component for user interaction */ +export const Button = ({ primary, backgroundColor = null, size, label, onClick }) => { + const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary'; + + return html` + + `; +}; diff --git a/code/frameworks/web-components-webpack5/template/cli/js/Button.stories.js b/code/frameworks/web-components-webpack5/template/cli/js/Button.stories.js new file mode 100644 index 00000000000..23a32272b7d --- /dev/null +++ b/code/frameworks/web-components-webpack5/template/cli/js/Button.stories.js @@ -0,0 +1,46 @@ +import { fn } from '@storybook/test'; + +import { Button } from './Button'; + +// More on how to set up stories at: https://storybook.js.org/docs/writing-stories +export default { + title: 'Example/Button', + tags: ['autodocs'], + render: (args) => Button(args), + argTypes: { + backgroundColor: { control: 'color' }, + size: { + control: { type: 'select' }, + options: ['small', 'medium', 'large'], + }, + }, + args: { onClick: fn() }, +}; + +// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args +export const Primary = { + args: { + primary: true, + label: 'Button', + }, +}; + +export const Secondary = { + args: { + label: 'Button', + }, +}; + +export const Large = { + args: { + size: 'large', + label: 'Button', + }, +}; + +export const Small = { + args: { + size: 'small', + label: 'Button', + }, +}; diff --git a/code/frameworks/web-components-webpack5/template/cli/js/Header.js b/code/frameworks/web-components-webpack5/template/cli/js/Header.js new file mode 100644 index 00000000000..19fea63604a --- /dev/null +++ b/code/frameworks/web-components-webpack5/template/cli/js/Header.js @@ -0,0 +1,45 @@ +import { html } from 'lit'; + +import { Button } from './Button'; +import './header.css'; + +export const Header = ({ user, onLogin, onLogout, onCreateAccount }) => html` +
+
+
+ + + + + + + +

Acme

+
+
+ ${user + ? Button({ size: 'small', onClick: onLogout, label: 'Log out' }) + : html`${Button({ + size: 'small', + onClick: onLogin, + label: 'Log in', + })} + ${Button({ + primary: true, + size: 'small', + onClick: onCreateAccount, + label: 'Sign up', + })}`} +
+
+
+`; diff --git a/code/frameworks/web-components-webpack5/template/cli/js/Header.stories.js b/code/frameworks/web-components-webpack5/template/cli/js/Header.stories.js new file mode 100644 index 00000000000..17433543776 --- /dev/null +++ b/code/frameworks/web-components-webpack5/template/cli/js/Header.stories.js @@ -0,0 +1,24 @@ +import { fn } from '@storybook/test'; + +import { Header } from './Header'; + +export default { + title: 'Example/Header', + // This component will have an automatically generated Autodocs entry: https://storybook.js.org/web-components/vue/writing-docs/autodocs + tags: ['autodocs'], + render: (args) => Header(args), + args: { + onLogin: fn(), + onLogout: fn(), + onCreateAccount: fn(), + }, +}; +export const LoggedIn = { + args: { + user: { + name: 'Jane Doe', + }, + }, +}; + +export const LoggedOut = {}; diff --git a/code/frameworks/web-components-webpack5/template/cli/js/Page.js b/code/frameworks/web-components-webpack5/template/cli/js/Page.js new file mode 100644 index 00000000000..54919dabd48 --- /dev/null +++ b/code/frameworks/web-components-webpack5/template/cli/js/Page.js @@ -0,0 +1,62 @@ +import { html } from 'lit'; + +import { Header } from './Header'; +import './page.css'; + +export const Page = ({ user, onLogin, onLogout, onCreateAccount }) => html` +
+ ${Header({ + user, + onLogin, + onLogout, + onCreateAccount, + })} + +
+

Pages in Storybook

+

+ We recommend building UIs with a + + component-driven process starting with atomic components and ending with pages. +

+

+ Render pages with mock data. This makes it easy to build and review page states without + needing to navigate to them in your app. Here are some handy patterns for managing page data + in Storybook: +

+
    +
  • + Use a higher-level connected component. Storybook helps you compose such data from the + "args" of child component stories +
    • +
  • + Assemble data in the page component from your services. You can mock these services out + using Storybook. +
    • +
+

+ Get a guided tutorial on component-driven development at + + Storybook tutorials + + . Read more in the + docs + . +

+
+ Tip Adjust the width of the canvas with the + + + + + + Viewports addon in the toolbar +
+
+
+`; diff --git a/code/frameworks/web-components-webpack5/template/cli/js/Page.stories.js b/code/frameworks/web-components-webpack5/template/cli/js/Page.stories.js new file mode 100644 index 00000000000..7c28c5ad14b --- /dev/null +++ b/code/frameworks/web-components-webpack5/template/cli/js/Page.stories.js @@ -0,0 +1,20 @@ +import * as HeaderStories from './Header.stories'; +import { Page } from './Page'; + +export default { + title: 'Example/Page', + render: (args) => Page(args), +}; + +export const LoggedIn = { + args: { + // More on composing args: https://storybook.js.org/docs/writing-stories/args#args-composition + ...HeaderStories.LoggedIn.args, + }, +}; + +export const LoggedOut = { + args: { + ...HeaderStories.LoggedOut.args, + }, +}; diff --git a/code/frameworks/web-components-webpack5/template/cli/ts-4-9/Button.stories.ts b/code/frameworks/web-components-webpack5/template/cli/ts-4-9/Button.stories.ts new file mode 100644 index 00000000000..190b855c4cc --- /dev/null +++ b/code/frameworks/web-components-webpack5/template/cli/ts-4-9/Button.stories.ts @@ -0,0 +1,52 @@ +import { fn } from '@storybook/test'; + +import type { Meta, StoryObj } from '@storybook/web-components-webpack5'; + +import type { ButtonProps } from './Button'; +import { Button } from './Button'; + +// More on how to set up stories at: https://storybook.js.org/docs/writing-stories +const meta = { + title: 'Example/Button', + tags: ['autodocs'], + render: (args) => Button(args), + argTypes: { + backgroundColor: { control: 'color' }, + size: { + control: { type: 'select' }, + options: ['small', 'medium', 'large'], + }, + }, + args: { onClick: fn() }, +} satisfies Meta; + +export default meta; +type Story = StoryObj; + +// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args +export const Primary: Story = { + args: { + primary: true, + label: 'Button', + }, +}; + +export const Secondary: Story = { + args: { + label: 'Button', + }, +}; + +export const Large: Story = { + args: { + size: 'large', + label: 'Button', + }, +}; + +export const Small: Story = { + args: { + size: 'small', + label: 'Button', + }, +}; diff --git a/code/frameworks/web-components-webpack5/template/cli/ts-4-9/Button.ts b/code/frameworks/web-components-webpack5/template/cli/ts-4-9/Button.ts new file mode 100644 index 00000000000..4ca7fe4a723 --- /dev/null +++ b/code/frameworks/web-components-webpack5/template/cli/ts-4-9/Button.ts @@ -0,0 +1,32 @@ +import { html } from 'lit'; +import { styleMap } from 'lit/directives/style-map.js'; + +import './button.css'; + +export interface ButtonProps { + /** Is this the principal call to action on the page? */ + primary?: boolean; + /** What background color to use */ + backgroundColor?: string; + /** How large should the button be? */ + size?: 'small' | 'medium' | 'large'; + /** Button contents */ + label: string; + /** Optional click handler */ + onClick?: () => void; +} +/** Primary UI component for user interaction */ +export const Button = ({ primary, backgroundColor, size, label, onClick }: ButtonProps) => { + const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary'; + + return html` + + `; +}; diff --git a/code/frameworks/web-components-webpack5/template/cli/ts-4-9/Header.stories.ts b/code/frameworks/web-components-webpack5/template/cli/ts-4-9/Header.stories.ts new file mode 100644 index 00000000000..59793d291f2 --- /dev/null +++ b/code/frameworks/web-components-webpack5/template/cli/ts-4-9/Header.stories.ts @@ -0,0 +1,31 @@ +import { fn } from '@storybook/test'; + +import type { Meta, StoryObj } from '@storybook/web-components-webpack5'; + +import type { HeaderProps } from './Header'; +import { Header } from './Header'; + +const meta = { + title: 'Example/Header', + // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs + tags: ['autodocs'], + render: (args: HeaderProps) => Header(args), + args: { + onLogin: fn(), + onLogout: fn(), + onCreateAccount: fn(), + }, +} satisfies Meta; + +export default meta; +type Story = StoryObj; + +export const LoggedIn: Story = { + args: { + user: { + name: 'Jane Doe', + }, + }, +}; + +export const LoggedOut: Story = {}; diff --git a/code/frameworks/web-components-webpack5/template/cli/ts-4-9/Header.ts b/code/frameworks/web-components-webpack5/template/cli/ts-4-9/Header.ts new file mode 100644 index 00000000000..7c3c8b89375 --- /dev/null +++ b/code/frameworks/web-components-webpack5/template/cli/ts-4-9/Header.ts @@ -0,0 +1,56 @@ +import { html } from 'lit'; + +import { Button } from './Button'; +import './header.css'; + +type User = { + name: string; +}; + +export interface HeaderProps { + user?: User; + onLogin?: () => void; + onLogout?: () => void; + onCreateAccount?: () => void; +} + +export const Header = ({ user, onLogin, onLogout, onCreateAccount }: HeaderProps) => html` +
+
+
+ + + + + + + +

Acme

+
+
+ ${user + ? Button({ size: 'small', onClick: onLogout, label: 'Log out' }) + : html`${Button({ + size: 'small', + onClick: onLogin, + label: 'Log in', + })} + ${Button({ + primary: true, + size: 'small', + onClick: onCreateAccount, + label: 'Sign up', + })}`} +
+
+
+`; diff --git a/code/frameworks/web-components-webpack5/template/cli/ts-4-9/Page.stories.ts b/code/frameworks/web-components-webpack5/template/cli/ts-4-9/Page.stories.ts new file mode 100644 index 00000000000..51ba30dfaae --- /dev/null +++ b/code/frameworks/web-components-webpack5/template/cli/ts-4-9/Page.stories.ts @@ -0,0 +1,26 @@ +import type { Meta, StoryObj } from '@storybook/web-components-webpack5'; + +import * as HeaderStories from './Header.stories'; +import type { PageProps } from './Page'; +import { Page } from './Page'; + +const meta = { + title: 'Example/Page', + render: (args: PageProps) => Page(args), +} satisfies Meta; + +export default meta; +type Story = StoryObj; + +export const LoggedIn: Story = { + args: { + // More on composing args: https://storybook.js.org/docs/writing-stories/args#args-composition + ...HeaderStories.LoggedIn.args, + }, +}; + +export const LoggedOut: Story = { + args: { + ...HeaderStories.LoggedOut.args, + }, +}; diff --git a/code/frameworks/web-components-webpack5/template/cli/ts-4-9/Page.ts b/code/frameworks/web-components-webpack5/template/cli/ts-4-9/Page.ts new file mode 100644 index 00000000000..079c4f04cfb --- /dev/null +++ b/code/frameworks/web-components-webpack5/template/cli/ts-4-9/Page.ts @@ -0,0 +1,73 @@ +import { html } from 'lit'; + +import { Header } from './Header'; +import './page.css'; + +type User = { + name: string; +}; + +export interface PageProps { + user?: User; + onLogin?: () => void; + onLogout?: () => void; + onCreateAccount?: () => void; +} + +export const Page = ({ user, onLogin, onLogout, onCreateAccount }: PageProps) => html` +
+ ${Header({ + user, + onLogin, + onLogout, + onCreateAccount, + })} + +
+

Pages in Storybook

+

+ We recommend building UIs with a + + component-driven process starting with atomic components and ending with pages. +

+

+ Render pages with mock data. This makes it easy to build and review page states without + needing to navigate to them in your app. Here are some handy patterns for managing page data + in Storybook: +

+
    +
  • + Use a higher-level connected component. Storybook helps you compose such data from the + "args" of child component stories +
    • +
  • + Assemble data in the page component from your services. You can mock these services out + using Storybook. +
    • +
+

+ Get a guided tutorial on component-driven development at + + Storybook tutorials + + . Read more in the + docs + . +

+
+ Tip Adjust the width of the canvas with the + + + + + + Viewports addon in the toolbar +
+
+
+`; From 338b629abe337d712d71c717bc93d4d8af945f3e Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Fri, 7 Mar 2025 16:44:36 +0100 Subject: [PATCH 092/108] Update package.json files to include template directory in published files Include template directories in the files array for multiple framework packages to ensure template files are packaged and distributed correctly --- code/frameworks/react-vite/package.json | 1 + code/frameworks/svelte-vite/package.json | 1 + code/frameworks/svelte-webpack5/package.json | 1 + code/frameworks/sveltekit/package.json | 1 + code/frameworks/vue3-vite/package.json | 1 + code/frameworks/vue3-webpack5/package.json | 1 + code/frameworks/web-components-vite/package.json | 1 + code/frameworks/web-components-webpack5/package.json | 1 + 8 files changed, 8 insertions(+) diff --git a/code/frameworks/react-vite/package.json b/code/frameworks/react-vite/package.json index c3eaf8e46e8..c9ff913ecf1 100644 --- a/code/frameworks/react-vite/package.json +++ b/code/frameworks/react-vite/package.json @@ -56,6 +56,7 @@ }, "files": [ "dist/**/*", + "template/**/*", "README.md", "*.js", "*.d.ts", diff --git a/code/frameworks/svelte-vite/package.json b/code/frameworks/svelte-vite/package.json index d3e292d4051..8bb28098bc8 100644 --- a/code/frameworks/svelte-vite/package.json +++ b/code/frameworks/svelte-vite/package.json @@ -43,6 +43,7 @@ "types": "dist/index.d.ts", "files": [ "dist/**/*", + "template/**/*", "README.md", "*.js", "*.d.ts", diff --git a/code/frameworks/svelte-webpack5/package.json b/code/frameworks/svelte-webpack5/package.json index 7ac7af6decf..55f2f14aa28 100644 --- a/code/frameworks/svelte-webpack5/package.json +++ b/code/frameworks/svelte-webpack5/package.json @@ -43,6 +43,7 @@ "types": "dist/index.d.ts", "files": [ "dist/**/*", + "templates/**/*", "README.md", "*.js", "*.d.ts", diff --git a/code/frameworks/sveltekit/package.json b/code/frameworks/sveltekit/package.json index d3c602c9a1a..8b972dc17a0 100644 --- a/code/frameworks/sveltekit/package.json +++ b/code/frameworks/sveltekit/package.json @@ -54,6 +54,7 @@ "types": "dist/index.d.ts", "files": [ "dist/**/*", + "template/**/*", "README.md", "*.js", "*.d.ts", diff --git a/code/frameworks/vue3-vite/package.json b/code/frameworks/vue3-vite/package.json index 49e0cc2aa71..dbdb637ea2d 100644 --- a/code/frameworks/vue3-vite/package.json +++ b/code/frameworks/vue3-vite/package.json @@ -48,6 +48,7 @@ "types": "dist/index.d.ts", "files": [ "dist/**/*", + "template/**/*", "README.md", "*.js", "*.d.ts", diff --git a/code/frameworks/vue3-webpack5/package.json b/code/frameworks/vue3-webpack5/package.json index 438e09442f1..c46b6f71387 100644 --- a/code/frameworks/vue3-webpack5/package.json +++ b/code/frameworks/vue3-webpack5/package.json @@ -43,6 +43,7 @@ "types": "dist/index.d.ts", "files": [ "dist/**/*", + "template/**/*", "README.md", "*.js", "*.d.ts", diff --git a/code/frameworks/web-components-vite/package.json b/code/frameworks/web-components-vite/package.json index 06537c12974..549bb897aac 100644 --- a/code/frameworks/web-components-vite/package.json +++ b/code/frameworks/web-components-vite/package.json @@ -43,6 +43,7 @@ "types": "dist/index.d.ts", "files": [ "dist/**/*", + "template/**/*", "README.md", "*.js", "*.d.ts", diff --git a/code/frameworks/web-components-webpack5/package.json b/code/frameworks/web-components-webpack5/package.json index f7a59969d41..e13ae030089 100644 --- a/code/frameworks/web-components-webpack5/package.json +++ b/code/frameworks/web-components-webpack5/package.json @@ -46,6 +46,7 @@ "types": "dist/index.d.ts", "files": [ "dist/**/*", + "template/**/*", "README.md", "*.js", "*.d.ts", From 3c3e423d0e33f29166f30ed55ce8705c682db4db Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Fri, 7 Mar 2025 21:08:03 +0100 Subject: [PATCH 093/108] Disable benchmark scripts --- .circleci/config.yml | 27 +++++++++++++++------------ 1 file changed, 15 insertions(+), 12 deletions(-) diff --git a/.circleci/config.yml b/.circleci/config.yml index b2567e7d37f..6a99d5190b6 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -878,10 +878,11 @@ workflows: parallelism: 4 requires: - create-sandboxes - - bench-sandboxes: - parallelism: 5 - requires: - - create-sandboxes +# TODO: don't forget to reenable this +# - bench-sandboxes: +# parallelism: 5 +# requires: +# - create-sandboxes - test-ui-testing-module: requires: - build @@ -965,10 +966,11 @@ workflows: - test-init-features: requires: - build - - bench-sandboxes: - parallelism: 5 - requires: - - create-sandboxes +# TODO: don't forget to reenable this +# - bench-sandboxes: +# parallelism: 5 +# requires: +# - create-sandboxes # TODO: reenable once we find out the source of flakyness # - test-runner-dev: # parallelism: 4 @@ -1059,10 +1061,11 @@ workflows: # --smoke-test is not supported for the angular builder right now # - "angular-cli" - "lit-vite-ts" - - bench-sandboxes: - parallelism: 5 - requires: - - create-sandboxes +# TODO: don't forget to reenable this +# - bench-sandboxes: +# parallelism: 5 +# requires: +# - create-sandboxes # TODO: reenable once we find out the source of flakyness # - test-runner-dev: From 773405dfec8acc8bc26f4a27ab1a5e484d0c472a Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Sun, 9 Mar 2025 20:11:12 +0100 Subject: [PATCH 094/108] Update MIGRATION.md Co-authored-by: Norbert de Langen --- MIGRATION.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/MIGRATION.md b/MIGRATION.md index c06fc59dce9..8bde2228682 100644 --- a/MIGRATION.md +++ b/MIGRATION.md @@ -444,9 +444,9 @@ The following packages have been consolidated into the main `storybook` package: | Old Package | New Path | | ---------------------- | ------------------------------ | -| @storybook/manager-api | storybook/internal/manager-api | -| @storybook/preview-api | storybook/internal/preview-api | -| @storybook/theming | storybook/internal/theming | +| @storybook/manager-api | storybook/manager-api | +| @storybook/preview-api | storybook/preview-api | +| @storybook/theming | storybook/theming | | @storybook/test | storybook/test | Please un-install these packages, and ensure you have the `storybook` package installed. From 27012fe87564ec6ea5beeb0ce2afb805e64c943e Mon Sep 17 00:00:00 2001 From: Jeppe Reinhold Date: Mon, 10 Mar 2025 08:53:16 +0100 Subject: [PATCH 095/108] don't use crypto.randomUUID in UniversalStore --- .../src/shared/universal-store/index.test.ts | 69 ++++++++++--------- code/core/src/shared/universal-store/index.ts | 5 +- 2 files changed, 36 insertions(+), 38 deletions(-) diff --git a/code/core/src/shared/universal-store/index.test.ts b/code/core/src/shared/universal-store/index.test.ts index ced89580978..c589a79539f 100644 --- a/code/core/src/shared/universal-store/index.test.ts +++ b/code/core/src/shared/universal-store/index.test.ts @@ -46,9 +46,12 @@ const mockChannel = { describe('UniversalStore', () => { beforeEach((context) => { vi.useFakeTimers(); - let randomUUIDCounter = 0; - vi.spyOn(globalThis.crypto, 'randomUUID').mockImplementation(() => { - return `mocked-random-uuid-v4-${randomUUIDCounter++}`; + + // Mock Date and Math.random to make the actorId deterministic + let randomNumberCounter = 1; + vi.setSystemTime(new Date('2025-02-14')); + vi.spyOn(Math, 'random').mockImplementation(() => { + return randomNumberCounter++ / 10; }); // Always prepare the store, unless the test is specifically for unprepared state @@ -57,7 +60,7 @@ describe('UniversalStore', () => { } return () => { - randomUUIDCounter = 0; + randomNumberCounter = 0; vi.clearAllTimers(); mockedInstances.clearAllEnvironments(); mockChannelListeners.clear(); @@ -78,7 +81,7 @@ describe('UniversalStore', () => { // Assert - the store should be created with the initial state and actor expect(store.getState()).toEqual({ count: 0 }); expect(store.actor.type).toBe('LEADER'); - expect(store.actor.id).toBe('mocked-random-uuid-v4-0'); + expect(store.actor.id).toBe('m7405c003lllllllllm'); }); it('should throw when trying to create an instance with the constructor directly', () => { @@ -195,7 +198,6 @@ You should reuse the existing instance instead of trying to create a new one.`); // Arrange - create an initial leader and follower vi.spyOn(console, 'error').mockImplementation(() => {}); - vi.spyOn(globalThis.crypto, 'randomUUID').mockReturnValueOnce('first-uuid-1-2-3-4'); const firstLeader = UniversalStore.create({ id: 'env1:test', leader: true, @@ -203,7 +205,6 @@ You should reuse the existing instance instead of trying to create a new one.`); }); // Act - create the second leader - vi.spyOn(globalThis.crypto, 'randomUUID').mockReturnValueOnce('second-uuid-1-2-3-4'); const secondLeader = UniversalStore.create({ id: 'env2:test', leader: true, @@ -250,12 +251,12 @@ You should reuse the existing instance instead of trying to create a new one.`); Only one leader can exists at a time, your stores are now in an invalid state. Leaders detected: this: { - "id": "second-uuid-1-2-3-4", + "id": "m7405c0077777777778", "type": "LEADER", "environment": "MANAGER" } other: { - "id": "first-uuid-1-2-3-4", + "id": "m7405c003lllllllllm", "type": "LEADER", "environment": "MANAGER" }` @@ -266,12 +267,12 @@ You should reuse the existing instance instead of trying to create a new one.`); Only one leader can exists at a time, your stores are now in an invalid state. Leaders detected: this: { - "id": "first-uuid-1-2-3-4", + "id": "m7405c003lllllllllm", "type": "LEADER", "environment": "MANAGER" } other: { - "id": "second-uuid-1-2-3-4", + "id": "m7405c0077777777778", "type": "LEADER", "environment": "MANAGER" }` @@ -290,7 +291,7 @@ You should reuse the existing instance instead of trying to create a new one.`); // Assert - the store should be created with the initial state and actor expect(store.getState()).toEqual(undefined); expect(store.actor.type).toBe('FOLLOWER'); - expect(store.actor.id).toBe('mocked-random-uuid-v4-0'); + expect(store.actor.id).toBe('m7405c003lllllllllm'); }); it('should get existing state when a follower is created without initialState', async () => { @@ -325,7 +326,7 @@ You should reuse the existing instance instead of trying to create a new one.`); "eventInfo": { "actor": { "environment": "MANAGER", - "id": "mocked-random-uuid-v4-0", + "id": "m7405c003lllllllllm", "type": "LEADER", }, }, @@ -340,7 +341,7 @@ You should reuse the existing instance instead of trying to create a new one.`); "eventInfo": { "actor": { "environment": "MANAGER", - "id": "mocked-random-uuid-v4-1", + "id": "m7405c0077777777778", "type": "FOLLOWER", }, }, @@ -355,7 +356,7 @@ You should reuse the existing instance instead of trying to create a new one.`); "eventInfo": { "actor": { "environment": "MANAGER", - "id": "mocked-random-uuid-v4-1", + "id": "m7405c0077777777778", "type": "FOLLOWER", }, }, @@ -370,12 +371,12 @@ You should reuse the existing instance instead of trying to create a new one.`); "eventInfo": { "actor": { "environment": "MANAGER", - "id": "mocked-random-uuid-v4-1", + "id": "m7405c0077777777778", "type": "FOLLOWER", }, "forwardingActor": { "environment": "MANAGER", - "id": "mocked-random-uuid-v4-0", + "id": "m7405c003lllllllllm", "type": "LEADER", }, }, @@ -393,7 +394,7 @@ You should reuse the existing instance instead of trying to create a new one.`); "eventInfo": { "actor": { "environment": "MANAGER", - "id": "mocked-random-uuid-v4-0", + "id": "m7405c003lllllllllm", "type": "LEADER", }, }, @@ -437,7 +438,7 @@ You should reuse the existing instance instead of trying to create a new one.`); "eventInfo": { "actor": { "environment": "MANAGER", - "id": "mocked-random-uuid-v4-0", + "id": "m7405c003lllllllllm", "type": "LEADER", }, }, @@ -452,7 +453,7 @@ You should reuse the existing instance instead of trying to create a new one.`); "eventInfo": { "actor": { "environment": "MANAGER", - "id": "mocked-random-uuid-v4-1", + "id": "m7405c0077777777778", "type": "FOLLOWER", }, }, @@ -467,7 +468,7 @@ You should reuse the existing instance instead of trying to create a new one.`); "eventInfo": { "actor": { "environment": "MANAGER", - "id": "mocked-random-uuid-v4-1", + "id": "m7405c0077777777778", "type": "FOLLOWER", }, }, @@ -482,12 +483,12 @@ You should reuse the existing instance instead of trying to create a new one.`); "eventInfo": { "actor": { "environment": "MANAGER", - "id": "mocked-random-uuid-v4-1", + "id": "m7405c0077777777778", "type": "FOLLOWER", }, "forwardingActor": { "environment": "MANAGER", - "id": "mocked-random-uuid-v4-0", + "id": "m7405c003lllllllllm", "type": "LEADER", }, }, @@ -505,7 +506,7 @@ You should reuse the existing instance instead of trying to create a new one.`); "eventInfo": { "actor": { "environment": "MANAGER", - "id": "mocked-random-uuid-v4-0", + "id": "m7405c003lllllllllm", "type": "LEADER", }, }, @@ -560,7 +561,7 @@ You should reuse the existing instance instead of trying to create a new one.`); "eventInfo": { "actor": { "environment": "MANAGER", - "id": "mocked-random-uuid-v4-0", + "id": "m7405c003lllllllllm", "type": "LEADER", }, }, @@ -575,7 +576,7 @@ You should reuse the existing instance instead of trying to create a new one.`); "eventInfo": { "actor": { "environment": "MANAGER", - "id": "mocked-random-uuid-v4-1", + "id": "m7405c0077777777778", "type": "FOLLOWER", }, }, @@ -590,7 +591,7 @@ You should reuse the existing instance instead of trying to create a new one.`); "eventInfo": { "actor": { "environment": "MANAGER", - "id": "mocked-random-uuid-v4-1", + "id": "m7405c0077777777778", "type": "FOLLOWER", }, }, @@ -605,12 +606,12 @@ You should reuse the existing instance instead of trying to create a new one.`); "eventInfo": { "actor": { "environment": "MANAGER", - "id": "mocked-random-uuid-v4-1", + "id": "m7405c0077777777778", "type": "FOLLOWER", }, "forwardingActor": { "environment": "MANAGER", - "id": "mocked-random-uuid-v4-0", + "id": "m7405c003lllllllllm", "type": "LEADER", }, }, @@ -628,7 +629,7 @@ You should reuse the existing instance instead of trying to create a new one.`); "eventInfo": { "actor": { "environment": "MANAGER", - "id": "mocked-random-uuid-v4-0", + "id": "m7405c003lllllllllm", "type": "LEADER", }, }, @@ -664,7 +665,7 @@ You should reuse the existing instance instead of trying to create a new one.`); "eventInfo": { "actor": { "environment": "MANAGER", - "id": "mocked-random-uuid-v4-0", + "id": "m7405c003lllllllllm", "type": "FOLLOWER", }, }, @@ -679,7 +680,7 @@ You should reuse the existing instance instead of trying to create a new one.`); "eventInfo": { "actor": { "environment": "MANAGER", - "id": "mocked-random-uuid-v4-0", + "id": "m7405c003lllllllllm", "type": "FOLLOWER", }, }, @@ -951,7 +952,7 @@ You should reuse the existing instance instead of trying to create a new one.`); }, "id": "env2:test", "actor": { - "id": "mocked-random-uuid-v4-1", + "id": "m7405c0077777777778", "type": "FOLLOWER", "environment": "MANAGER" }, @@ -1136,7 +1137,7 @@ You should reuse the existing instance instead of trying to create a new one.`); }, "id": "env2:test", "actor": { - "id": "mocked-random-uuid-v4-1", + "id": "m7405c0077777777778", "type": "FOLLOWER", "environment": "MANAGER" }, diff --git a/code/core/src/shared/universal-store/index.ts b/code/core/src/shared/universal-store/index.ts index 3e033c0c5e1..df94ca009c4 100644 --- a/code/core/src/shared/universal-store/index.ts +++ b/code/core/src/shared/universal-store/index.ts @@ -259,10 +259,7 @@ export class UniversalStore< UniversalStore.isInternalConstructing = false; this.id = options.id; - this.actorId = globalThis.crypto - ? globalThis.crypto.randomUUID() - : // TODO: remove this fallback in SB 9.0 when we no longer support Node 18 - Date.now().toString(36) + Math.random().toString(36).substring(2); + this.actorId = Date.now().toString(36) + Math.random().toString(36).substring(2); this.actorType = options.leader ? UniversalStore.ActorType.LEADER : UniversalStore.ActorType.FOLLOWER; From 2d731810d385afed70b512d542ea1acf08bb33d2 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Mon, 10 Mar 2025 09:40:11 +0100 Subject: [PATCH 096/108] Remove missingStorybookDependencies automigrate fix This commit removes the missingStorybookDependencies fix from the automigrate process, including the implementation file, test file, and its import in the index. The fix appears to have been deprecated or replaced by another mechanism. --- .../src/automigrate/fixes/index.ts | 2 - .../missing-storybook-dependencies.test.ts | 130 ----------------- .../fixes/missing-storybook-dependencies.ts | 137 ------------------ 3 files changed, 269 deletions(-) delete mode 100644 code/lib/cli-storybook/src/automigrate/fixes/missing-storybook-dependencies.test.ts delete mode 100644 code/lib/cli-storybook/src/automigrate/fixes/missing-storybook-dependencies.ts diff --git a/code/lib/cli-storybook/src/automigrate/fixes/index.ts b/code/lib/cli-storybook/src/automigrate/fixes/index.ts index c5953c59605..87f11b33690 100644 --- a/code/lib/cli-storybook/src/automigrate/fixes/index.ts +++ b/code/lib/cli-storybook/src/automigrate/fixes/index.ts @@ -16,7 +16,6 @@ import { initialGlobals } from './initial-globals'; import { mdx1to3 } from './mdx-1-to-3'; import { mdxgfm } from './mdx-gfm'; import { mdxToCSF } from './mdx-to-csf'; -import { missingStorybookDependencies } from './missing-storybook-dependencies'; import { newFrameworks } from './new-frameworks'; import { removeReactDependency } from './prompt-remove-react'; import { reactDocgen } from './react-docgen'; @@ -37,7 +36,6 @@ import { wrapRequire } from './wrap-require'; export * from '../types'; export const allFixes: Fix[] = [ - missingStorybookDependencies, addonsAPI, newFrameworks, cra5, diff --git a/code/lib/cli-storybook/src/automigrate/fixes/missing-storybook-dependencies.test.ts b/code/lib/cli-storybook/src/automigrate/fixes/missing-storybook-dependencies.test.ts deleted file mode 100644 index 3663cf3f0bd..00000000000 --- a/code/lib/cli-storybook/src/automigrate/fixes/missing-storybook-dependencies.test.ts +++ /dev/null @@ -1,130 +0,0 @@ -import { describe, expect, it, vi } from 'vitest'; - -import type { JsPackageManager } from 'storybook/internal/common'; - -import stripAnsi from 'strip-ansi'; - -import { missingStorybookDependencies } from './missing-storybook-dependencies'; - -vi.mock('globby', () => ({ - __esModule: true, - globby: vi.fn().mockResolvedValue(['.storybook/manager.ts', 'path/to/file.stories.tsx']), -})); - -vi.mock('node:fs/promises', async (importOriginal) => { - const original = (await importOriginal()) as typeof import('node:fs/promises'); - return { - ...original, - readFile: vi.fn().mockResolvedValue(` - // these are NOT installed, will be reported - import { someFunction } from '@storybook/preview-api'; - import { anotherFunction } from '@storybook/manager-api'; - import { SomeError } from '@storybook/core-events/server-errors'; - // this IS installed, will not be reported - import { yetAnotherFunction } from '@storybook/theming'; - `), - }; -}); - -vi.mock('../../helpers', () => ({ - getStorybookVersionSpecifier: vi.fn().mockReturnValue('^8.1.10'), -})); - -const check = async ({ - packageManager, - storybookVersion = '8.1.10', -}: { - packageManager: JsPackageManager; - storybookVersion?: string; -}) => { - return missingStorybookDependencies.check({ - packageManager, - mainConfig: {} as any, - storybookVersion, - }); -}; - -describe('missingStorybookDependencies', () => { - const mockPackageManager = { - findInstallations: vi.fn().mockResolvedValue({ - dependencies: { - '@storybook/react': '8.1.0', - '@storybook/theming': '8.1.0', - }, - }), - retrievePackageJson: vi.fn().mockResolvedValue({ - dependencies: { - storybook: '8.1.0', - }, - }), - addDependencies: vi.fn().mockResolvedValue(undefined), - } as Partial; - - describe('check function', () => { - it('should identify missing dependencies', async () => { - const result = await check({ - packageManager: mockPackageManager as JsPackageManager, - }); - - expect(Object.keys(result!.packageUsage)).not.includes('@storybook/theming'); - expect(result).toEqual({ - packageUsage: { - '@storybook/preview-api': ['.storybook/manager.ts', 'path/to/file.stories.tsx'], - '@storybook/manager-api': ['.storybook/manager.ts', 'path/to/file.stories.tsx'], - '@storybook/core-events': ['.storybook/manager.ts', 'path/to/file.stories.tsx'], - }, - }); - }); - }); - - describe('prompt function', () => { - it('should provide a proper message with the missing dependencies', () => { - const packageUsage = { - '@storybook/preview-api': ['.storybook/manager.ts'], - '@storybook/manager-api': ['path/to/file.stories.tsx'], - }; - - const message = missingStorybookDependencies.prompt({ packageUsage }); - - expect(stripAnsi(message)).toMatchInlineSnapshot(` - "Found the following Storybook packages used in your project, but they are missing from your project dependencies: - - @storybook/manager-api: (1 file) - - @storybook/preview-api: (1 file) - - Referencing missing packages can cause your project to crash. We can automatically add them to your dependencies. - - More info: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#failed-to-resolve-import-storybookx-error" - `); - }); - }); - - describe('run function', () => { - it('should add missing dependencies', async () => { - const dryRun = false; - const packageUsage = { - '@storybook/preview-api': ['.storybook/manager.ts'], - '@storybook/manager-api': ['path/to/file.stories.tsx'], - }; - - await missingStorybookDependencies.run!({ - result: { packageUsage }, - dryRun, - packageJson: {}, - mainConfig: { stories: [] }, - packageManager: mockPackageManager as JsPackageManager, - mainConfigPath: 'path/to/main-config.js', - }); - - expect(mockPackageManager.addDependencies).toHaveBeenNthCalledWith( - 1, - { installAsDevDependencies: true }, - ['@storybook/preview-api@8.1.0', '@storybook/manager-api@8.1.0'] - ); - expect(mockPackageManager.addDependencies).toHaveBeenNthCalledWith( - 2, - { installAsDevDependencies: true, skipInstall: true, packageJson: expect.anything() }, - ['@storybook/preview-api@8.1.0', '@storybook/manager-api@8.1.0'] - ); - }); - }); -}); diff --git a/code/lib/cli-storybook/src/automigrate/fixes/missing-storybook-dependencies.ts b/code/lib/cli-storybook/src/automigrate/fixes/missing-storybook-dependencies.ts deleted file mode 100644 index 4834cacce5d..00000000000 --- a/code/lib/cli-storybook/src/automigrate/fixes/missing-storybook-dependencies.ts +++ /dev/null @@ -1,137 +0,0 @@ -import { readFile } from 'node:fs/promises'; - -import { getStorybookVersionSpecifier } from 'storybook/internal/cli'; -import type { InstallationMetadata, JsPackageManager } from 'storybook/internal/common'; - -import picocolors from 'picocolors'; -import { dedent } from 'ts-dedent'; - -import { consolidatedPackages } from '../helpers/consolidated-packages'; -import type { Fix } from '../types'; - -const logger = console; - -type PackageUsage = Record; - -interface MissingStorybookDependenciesOptions { - packageUsage: PackageUsage; -} - -async function checkInstallations( - packageManager: JsPackageManager, - packages: string[] -): Promise { - let result: Record = {}; - - // go through each package and get installation info at depth 0 to make sure - // the dependency is directly installed, else they could come from other dependencies - const promises = packages.map((pkg) => packageManager.findInstallations([pkg], { depth: 0 })); - - const analyses = await Promise.all(promises); - - analyses.forEach((analysis) => { - if (analysis?.dependencies) { - result = { - ...result, - ...analysis.dependencies, - }; - } - }); - - return result; -} - -/** Find usage of Storybook packages in the project files which are not present in the dependencies. */ -export const missingStorybookDependencies: Fix = { - id: 'missingStorybookDependencies', - promptType: 'auto', - versionRange: ['<8.2', '<9.0'], - - async check({ packageManager }) { - // Dynamically import globby because it is a pure ESM module - // eslint-disable-next-line depend/ban-dependencies - const { globby } = await import('globby'); - - const result = await checkInstallations(packageManager, Object.keys(consolidatedPackages)); - if (!result) { - return null; - } - - const installedDependencies = Object.keys(result).sort(); - const dependenciesToCheck = Object.keys(consolidatedPackages).filter( - (pkg) => !installedDependencies.includes(pkg) - ); - - const patterns = ['**/.storybook/*', '**/*.stories.*', '**/*.story.*']; - - const files = await globby(patterns, { - ignore: ['**/node_modules/**'], - }); - const packageUsage: PackageUsage = {}; - - for (const file of files) { - const content = await readFile(file, 'utf-8'); - dependenciesToCheck.forEach((pkg) => { - // match imports like @storybook/theming or @storybook/theming/create - const regex = new RegExp(`['"]${pkg}(/[^'"]*)?['"]`); - if (regex.test(content)) { - if (!packageUsage[pkg]) { - packageUsage[pkg] = []; - } - packageUsage[pkg].push(file); - } - }); - } - - return Object.keys(packageUsage).length > 0 ? { packageUsage } : null; - }, - - prompt({ packageUsage }) { - return dedent` - Found the following Storybook packages used in your project, but they are missing from your project dependencies: - ${Object.entries(packageUsage) - .map( - ([pkg, files]) => - `- ${picocolors.cyan(pkg)}: (${files.length} ${files.length === 1 ? 'file' : 'files'})` - ) - .sort() - .join('\n')} - - Referencing missing packages can cause your project to crash. We can automatically add them to your dependencies. - - More info: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#failed-to-resolve-import-storybookx-error - `; - }, - - async run({ result: { packageUsage }, dryRun, packageManager }) { - logger.info( - `✅ Installing the following packages as devDependencies: ${Object.keys(packageUsage)}` - ); - if (!dryRun) { - console.log(packageManager.retrievePackageJson()); - const dependenciesToInstall = Object.keys(packageUsage); - const versionToInstall = getStorybookVersionSpecifier( - await packageManager.retrievePackageJson() - ); - - const versionToInstallWithoutModifiers = versionToInstall?.replace(/[\^~]/, ''); - - /** - * WORKAROUND: necessary for the following scenario: Storybook latest is currently at 8.2.2 - * User has all Storybook deps at ^8.2.1 We run e.g. npm install with the dependency@^8.2.1 - * The package.json will have ^8.2.1 but install 8.2.2 So we first install the exact version, - * then run code again to write to package.json to add the caret back, but without running - * install - */ - await packageManager.addDependencies( - { installAsDevDependencies: true }, - dependenciesToInstall.map((pkg) => `${pkg}@${versionToInstallWithoutModifiers}`) - ); - const packageJson = await packageManager.retrievePackageJson(); - await packageManager.addDependencies( - { installAsDevDependencies: true, skipInstall: true, packageJson }, - dependenciesToInstall.map((pkg) => `${pkg}@${versionToInstall}`) - ); - } - }, -}; From 09837b34171bb3b752d6739470202224ca2cde47 Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Mon, 10 Mar 2025 11:44:00 +0100 Subject: [PATCH 097/108] Pin svelte2tsx --- code/frameworks/svelte-vite/package.json | 2 +- code/yarn.lock | 10 +++++----- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/code/frameworks/svelte-vite/package.json b/code/frameworks/svelte-vite/package.json index 8bb28098bc8..f955b7a08c1 100644 --- a/code/frameworks/svelte-vite/package.json +++ b/code/frameworks/svelte-vite/package.json @@ -58,7 +58,7 @@ "@storybook/svelte": "workspace:*", "magic-string": "^0.30.0", "svelte-preprocess": "^5.1.1", - "svelte2tsx": "^0.7.13", + "svelte2tsx": "0.7.34", "sveltedoc-parser": "^4.2.1", "ts-dedent": "^2.2.0", "typescript": "^4.9.4 || ^5.0.0" diff --git a/code/yarn.lock b/code/yarn.lock index e2d5e9158b0..4584a568854 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -7447,7 +7447,7 @@ __metadata: magic-string: "npm:^0.30.0" svelte: "npm:^5.0.5" svelte-preprocess: "npm:^5.1.1" - svelte2tsx: "npm:^0.7.13" + svelte2tsx: "npm:0.7.34" sveltedoc-parser: "npm:^4.2.1" ts-dedent: "npm:^2.2.0" typescript: "npm:^5.7.3" @@ -28399,16 +28399,16 @@ __metadata: languageName: node linkType: hard -"svelte2tsx@npm:^0.7.13": - version: 0.7.13 - resolution: "svelte2tsx@npm:0.7.13" +"svelte2tsx@npm:0.7.34": + version: 0.7.34 + resolution: "svelte2tsx@npm:0.7.34" dependencies: dedent-js: "npm:^1.0.1" pascal-case: "npm:^3.1.1" peerDependencies: svelte: ^3.55 || ^4.0.0-next.0 || ^4.0 || ^5.0.0-next.0 typescript: ^4.9.4 || ^5.0.0 - checksum: 10c0/a6df2873e551d116bae8b4664b1838a52c6aa50ad50e30e41611e8bf390c525ceb97b53d034f2e0030a640e157e1f88ac33d52b6e4abb54861b3fc120aae82f7 + checksum: 10c0/31f049bd4dc7db151a8d13773d3cdd6e30c205735da44d369ec06365039926332779fe6d441015d7c6647755e47674acc96ec9ccea68d1b225767f5e04d82d9c languageName: node linkType: hard From c0b816b1e2fbd8a33a5f64e5b850dc4d556720ef Mon Sep 17 00:00:00 2001 From: Jeppe Reinhold Date: Mon, 10 Mar 2025 14:00:28 +0100 Subject: [PATCH 098/108] use internalHelpers from svelte2tsx to get name of render function --- code/frameworks/svelte-vite/package.json | 2 +- .../svelte-vite/src/plugins/generateDocgen.ts | 6 ++++-- code/yarn.lock | 10 +++++----- 3 files changed, 10 insertions(+), 8 deletions(-) diff --git a/code/frameworks/svelte-vite/package.json b/code/frameworks/svelte-vite/package.json index f955b7a08c1..a29ea282b3a 100644 --- a/code/frameworks/svelte-vite/package.json +++ b/code/frameworks/svelte-vite/package.json @@ -58,7 +58,7 @@ "@storybook/svelte": "workspace:*", "magic-string": "^0.30.0", "svelte-preprocess": "^5.1.1", - "svelte2tsx": "0.7.34", + "svelte2tsx": "^0.7.35", "sveltedoc-parser": "^4.2.1", "ts-dedent": "^2.2.0", "typescript": "^4.9.4 || ^5.0.0" diff --git a/code/frameworks/svelte-vite/src/plugins/generateDocgen.ts b/code/frameworks/svelte-vite/src/plugins/generateDocgen.ts index eff343fbfe0..01905776d96 100644 --- a/code/frameworks/svelte-vite/src/plugins/generateDocgen.ts +++ b/code/frameworks/svelte-vite/src/plugins/generateDocgen.ts @@ -1,6 +1,6 @@ import path from 'node:path'; -import svelte2tsx from 'svelte2tsx'; +import svelte2tsx, { internalHelpers } from 'svelte2tsx'; import { VERSION } from 'svelte/compiler'; import ts from 'typescript'; @@ -411,7 +411,9 @@ export function generateDocgen(targetFileName: string, cache: DocgenCache): Docg // Get render function generated by svelte2tsx const renderFunction = sourceFile.statements.find((statement) => { - return ts.isFunctionDeclaration(statement) && statement.name?.text === 'render'; + return ( + ts.isFunctionDeclaration(statement) && statement.name?.text === internalHelpers.renderName + ); }) as ts.FunctionDeclaration | undefined; if (renderFunction === undefined) { return { diff --git a/code/yarn.lock b/code/yarn.lock index 4584a568854..7688dbeee27 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -7447,7 +7447,7 @@ __metadata: magic-string: "npm:^0.30.0" svelte: "npm:^5.0.5" svelte-preprocess: "npm:^5.1.1" - svelte2tsx: "npm:0.7.34" + svelte2tsx: "npm:^0.7.35" sveltedoc-parser: "npm:^4.2.1" ts-dedent: "npm:^2.2.0" typescript: "npm:^5.7.3" @@ -28399,16 +28399,16 @@ __metadata: languageName: node linkType: hard -"svelte2tsx@npm:0.7.34": - version: 0.7.34 - resolution: "svelte2tsx@npm:0.7.34" +"svelte2tsx@npm:^0.7.35": + version: 0.7.35 + resolution: "svelte2tsx@npm:0.7.35" dependencies: dedent-js: "npm:^1.0.1" pascal-case: "npm:^3.1.1" peerDependencies: svelte: ^3.55 || ^4.0.0-next.0 || ^4.0 || ^5.0.0-next.0 typescript: ^4.9.4 || ^5.0.0 - checksum: 10c0/31f049bd4dc7db151a8d13773d3cdd6e30c205735da44d369ec06365039926332779fe6d441015d7c6647755e47674acc96ec9ccea68d1b225767f5e04d82d9c + checksum: 10c0/7e17fecff452654ec8178871037051d79d998e570006a49006e8640678ec39392f6b6409acfb0a12139dff4e344796cb56f5ebfc18a6c52941486ee74faa0d0a languageName: node linkType: hard From a50ff746804d7d1d6db44662f8c71827f87b8ae1 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Tue, 11 Mar 2025 00:15:54 +0800 Subject: [PATCH 099/108] CLI: Fix test install in RNW projects --- code/lib/create-storybook/src/generators/baseGenerator.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/code/lib/create-storybook/src/generators/baseGenerator.ts b/code/lib/create-storybook/src/generators/baseGenerator.ts index 39464e6717f..9d332674c68 100644 --- a/code/lib/create-storybook/src/generators/baseGenerator.ts +++ b/code/lib/create-storybook/src/generators/baseGenerator.ts @@ -224,6 +224,7 @@ export async function baseGenerator( ProjectType.SVELTE, ProjectType.SVELTEKIT, ProjectType.WEB_COMPONENTS, + ProjectType.REACT_NATIVE_WEB, ]; const supportsTestAddon = projectType === ProjectType.NEXTJS || From c4179a7146dd12bb7d03fcdf0fc88f0132fe5cac Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Tue, 11 Mar 2025 11:08:21 +0100 Subject: [PATCH 100/108] Add @angular-devkit/build-angular to default installed pacakages in angular --- code/lib/create-storybook/src/generators/ANGULAR/index.ts | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/code/lib/create-storybook/src/generators/ANGULAR/index.ts b/code/lib/create-storybook/src/generators/ANGULAR/index.ts index dfea1b03b31..1fa1bc2c53a 100644 --- a/code/lib/create-storybook/src/generators/ANGULAR/index.ts +++ b/code/lib/create-storybook/src/generators/ANGULAR/index.ts @@ -73,7 +73,10 @@ const generator: Generator<{ projectName: string }> = async ( 'angular', { extraAddons: [`@storybook/addon-onboarding`], - ...(useCompodoc && { extraPackages: ['@compodoc/compodoc', '@storybook/addon-docs'] }), + extraPackages: [ + '@angular-devkit/build-angular', + ...(useCompodoc ? ['@compodoc/compodoc', '@storybook/addon-docs'] : []), + ], addScripts: false, componentsDestinationPath: root ? `${root}/src/stories` : undefined, storybookConfigFolder: storybookFolder, From b721e2518c7ac9b390ae3a32fc23232032688b48 Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Tue, 11 Mar 2025 11:46:17 +0100 Subject: [PATCH 101/108] Add new dependencies to Vite optimizeDeps to fix #30789 --- code/builders/builder-vite/src/optimizeDeps.ts | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/code/builders/builder-vite/src/optimizeDeps.ts b/code/builders/builder-vite/src/optimizeDeps.ts index 5caa431d378..9f982da5a36 100644 --- a/code/builders/builder-vite/src/optimizeDeps.ts +++ b/code/builders/builder-vite/src/optimizeDeps.ts @@ -9,10 +9,12 @@ import { listStories } from './list-stories'; // It ensures that vite converts cjs deps into esm without vite having to find them during startup and then having to log a message about them and restart // TODO: Many of the deps might be prebundled now though, so probably worth trying to remove and see what happens const INCLUDE_CANDIDATES = [ + '@ampproject/remapping', '@base2/pretty-print-object', '@emotion/core', '@emotion/is-prop-valid', '@emotion/styled', + '@jridgewell/sourcemap-codec', '@storybook/addon-a11y/preview', '@storybook/addon-backgrounds/preview', '@storybook/addon-designs/blocks', @@ -62,7 +64,9 @@ const INCLUDE_CANDIDATES = [ 'acorn', 'airbnb-js-shims', 'ansi-to-html', + 'aria-query', 'axe-core', + 'axobject-query', 'chromatic/isChromatic', 'color-convert', 'deep-object-diff', From b6980365ac22d07024de57e352979ebb5abd9e7e Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Tue, 11 Mar 2025 11:56:15 +0100 Subject: [PATCH 102/108] Force @angular-devkit/build-angular @ next in prerelease sandbox --- code/lib/cli-storybook/src/sandbox-templates.ts | 3 +++ 1 file changed, 3 insertions(+) diff --git a/code/lib/cli-storybook/src/sandbox-templates.ts b/code/lib/cli-storybook/src/sandbox-templates.ts index d6000075ca0..3177a982082 100644 --- a/code/lib/cli-storybook/src/sandbox-templates.ts +++ b/code/lib/cli-storybook/src/sandbox-templates.ts @@ -499,6 +499,9 @@ export const baseTemplates = { renderer: '@storybook/angular', builder: '@storybook/builder-webpack5', }, + modifications: { + extraDependencies: ['@angular-devkit/build-angular@next'], + }, skipTasks: ['e2e-tests-dev', 'bench', 'vitest-integration'], }, 'angular-cli/default-ts': { From cba56e9418b9c922a589e0b3cc9c4f7eb1b16c6e Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Tue, 11 Mar 2025 14:24:40 +0100 Subject: [PATCH 103/108] Remove nxCloudAccessToken from nx.json --- code/nx.json | 1 - 1 file changed, 1 deletion(-) diff --git a/code/nx.json b/code/nx.json index eaaabd089ea..3d2d4ec59f5 100644 --- a/code/nx.json +++ b/code/nx.json @@ -1,7 +1,6 @@ { "$schema": "./node_modules/nx/schemas/nx-schema.json", "extends": "nx/presets/npm.json", - "nxCloudAccessToken": "NGVmYTkxMmItYzY3OS00MjkxLTk1ZDktZDFmYTFmNmVlNGY4fHJlYWQ=", "defaultBase": "next", "useLegacyCache": true, "parallel": 8, From 8022616f116433f146124b65033ad8eaa9b5e772 Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Tue, 11 Mar 2025 14:38:13 +0100 Subject: [PATCH 104/108] Revert "Remove nxCloudAccessToken from nx.json" This reverts commit cba56e9418b9c922a589e0b3cc9c4f7eb1b16c6e. --- code/nx.json | 1 + 1 file changed, 1 insertion(+) diff --git a/code/nx.json b/code/nx.json index 3d2d4ec59f5..eaaabd089ea 100644 --- a/code/nx.json +++ b/code/nx.json @@ -1,6 +1,7 @@ { "$schema": "./node_modules/nx/schemas/nx-schema.json", "extends": "nx/presets/npm.json", + "nxCloudAccessToken": "NGVmYTkxMmItYzY3OS00MjkxLTk1ZDktZDFmYTFmNmVlNGY4fHJlYWQ=", "defaultBase": "next", "useLegacyCache": true, "parallel": 8, From 9c882d8394a16bc2f3c458bd36ac4665799fce38 Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Tue, 11 Mar 2025 14:39:22 +0100 Subject: [PATCH 105/108] Handle non-storybook packages with a specific versions --- .../core/src/common/js-package-manager/JsPackageManager.ts | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/code/core/src/common/js-package-manager/JsPackageManager.ts b/code/core/src/common/js-package-manager/JsPackageManager.ts index 3d3ecfacfa2..a63a8efcc55 100644 --- a/code/core/src/common/js-package-manager/JsPackageManager.ts +++ b/code/core/src/common/js-package-manager/JsPackageManager.ts @@ -333,6 +333,13 @@ export abstract class JsPackageManager { return Promise.all( packages.map(async (pkg) => { const [packageName, packageVersion] = getPackageDetails(pkg); + + // If the packageVersion is specified and we are not dealing with a storybook package, + // just return the requested version. + if (packageVersion && !(packageName in storybookPackagesVersions)) { + return pkg; + } + const latestInRange = await this.latestVersion(packageName, packageVersion); const k = packageName as keyof typeof storybookPackagesVersions; From 8a6b6ecf8b32d1f29a08344fa032e431196f7e8e Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Tue, 11 Mar 2025 15:39:55 +0100 Subject: [PATCH 106/108] Adjust test --- .../src/common/js-package-manager/JsPackageManager.test.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/code/core/src/common/js-package-manager/JsPackageManager.test.ts b/code/core/src/common/js-package-manager/JsPackageManager.test.ts index 153edd0be59..3ccdd59b084 100644 --- a/code/core/src/common/js-package-manager/JsPackageManager.test.ts +++ b/code/core/src/common/js-package-manager/JsPackageManager.test.ts @@ -43,12 +43,12 @@ describe('JsPackageManager', () => { expect(result).toEqual(['@storybook/react@8.3.0']); }); - it('should return the latest stable release version when there is no current version', async () => { + it('should get the requested version when the package is not in the monorepo', async () => { mockLatestVersion.mockResolvedValue('2.0.0'); - const result = await jsPackageManager.getVersionedPackages(['@storybook/new-addon@^8.3.0']); + const result = await jsPackageManager.getVersionedPackages(['@storybook/new-addon@^next']); - expect(result).toEqual(['@storybook/new-addon@^2.0.0']); + expect(result).toEqual(['@storybook/new-addon@^next']); }); }); }); From fa13b91673749ae642181f43597f16df9e30bdff Mon Sep 17 00:00:00 2001 From: storybook-bot <32066757+storybook-bot@users.noreply.github.com> Date: Tue, 11 Mar 2025 15:05:59 +0000 Subject: [PATCH 107/108] Write changelog for 9.0.0-alpha.3 [skip ci] --- CHANGELOG.prerelease.md | 18 ++++++++++++++++++ code/package.json | 3 ++- docs/versions/next.json | 2 +- 3 files changed, 21 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.prerelease.md b/CHANGELOG.prerelease.md index 6b5ffbc6fcf..cf388a310b1 100644 --- a/CHANGELOG.prerelease.md +++ b/CHANGELOG.prerelease.md @@ -1,3 +1,21 @@ +## 9.0.0-alpha.3 + +- Addon A11y: Promote @storybook/global to full dependency - [#30723](https://github.com/storybookjs/storybook/pull/30723), thanks @mrginglymus! +- Addon Test: Improve unhandled error messages - [#30755](https://github.com/storybookjs/storybook/pull/30755), thanks @yannbf! +- Angular: Add @angular-devkit/build-angular to default installed pacakages in angular - [#30790](https://github.com/storybookjs/storybook/pull/30790), thanks @kasperpeulen! +- Automigrate: Disable `missingStorybookDependencies` for 9.0 - [#30769](https://github.com/storybookjs/storybook/pull/30769), thanks @ndelangen! +- CLI: Fix test install in RNW projects - [#30786](https://github.com/storybookjs/storybook/pull/30786), thanks @shilman! +- Core: Re-Export renderers from frameworks - [#30771](https://github.com/storybookjs/storybook/pull/30771), thanks @ndelangen! +- Core: Replace 'min' instead of 'm' in printDuration - [#30668](https://github.com/storybookjs/storybook/pull/30668), thanks @wlewis-formative! +- Migration: Add auto-automigration for merged packages - [#30753](https://github.com/storybookjs/storybook/pull/30753), thanks @ndelangen! +- Next.js: Upgrade image-size to 2.0 - [#30741](https://github.com/storybookjs/storybook/pull/30741), thanks @valentinpalkovic! +- Next.js: Use latest version when init in empty directory - [#30659](https://github.com/storybookjs/storybook/pull/30659), thanks @valentinpalkovic! +- Svelte: Fix Vite crashing on virtual module imports - [#26838](https://github.com/storybookjs/storybook/pull/26838), thanks @rChaoz! +- Svelte: Fix automatic argTypes inference coming up empty with `svelte2tsx@0.7.35` - [#30784](https://github.com/storybookjs/storybook/pull/30784), thanks @JReinhold! +- Svelte: Pin svelte2tsx to solve argType regression - [#30783](https://github.com/storybookjs/storybook/pull/30783), thanks @kasperpeulen! +- Test: Move `@storybook/test` into `storybook/test` - [#30742](https://github.com/storybookjs/storybook/pull/30742), thanks @valentinpalkovic! +- Universal Store: Don't use `crypto.randomUUID` - [#30781](https://github.com/storybookjs/storybook/pull/30781), thanks @JReinhold! + ## 9.0.0-alpha.2 - AutoBlocker: Add major version upgrade blocker - [#30714](https://github.com/storybookjs/storybook/pull/30714), thanks @ndelangen! diff --git a/code/package.json b/code/package.json index d57e39be782..e47578db904 100644 --- a/code/package.json +++ b/code/package.json @@ -297,5 +297,6 @@ "Dependency Upgrades" ] ] - } + }, + "deferredNextVersion": "9.0.0-alpha.3" } diff --git a/docs/versions/next.json b/docs/versions/next.json index eccb6d96066..91287ca910b 100644 --- a/docs/versions/next.json +++ b/docs/versions/next.json @@ -1 +1 @@ -{"version":"9.0.0-alpha.2","info":{"plain":"- AutoBlocker: Add major version upgrade blocker - [#30714](https://github.com/storybookjs/storybook/pull/30714), thanks @ndelangen!\n- CLI: Add index command / API - [#30071](https://github.com/storybookjs/storybook/pull/30071), thanks @shilman!\n- CSF Factories: Align addon-essentials import with other addons - [#30716](https://github.com/storybookjs/storybook/pull/30716), thanks @kasperpeulen!\n- Core: Move @storybook/instrumenter into core - [#30740](https://github.com/storybookjs/storybook/pull/30740), thanks @valentinpalkovic!\n- Core: Support TS3.8+ again - [#30700](https://github.com/storybookjs/storybook/pull/30700), thanks @kasperpeulen!\n- Maintenance: Merge `@storybook/core` with `storybook` - [#30168](https://github.com/storybookjs/storybook/pull/30168), thanks @ndelangen!\n- Maintenance: Remove deprecated packages - [#30690](https://github.com/storybookjs/storybook/pull/30690), thanks @ndelangen!\n- Manager: Add Content-Type to prevent reliance on content type sniffing, fixing Cloud IDEs - [#30606](https://github.com/storybookjs/storybook/pull/30606), thanks @GCHQDeveloper548!\n- Next: Support Next 15.2 - [#30702](https://github.com/storybookjs/storybook/pull/30702), thanks @kasperpeulen!\n- React: Export returntype of ReactMeta#story - [#30580](https://github.com/storybookjs/storybook/pull/30580), thanks @mrginglymus!\n- Revert \\\"CLI: Don't initially select Documentation and Testing features\\\" - [#30694](https://github.com/storybookjs/storybook/pull/30694), thanks @shilman!\n- Test Addon: Stabilize and remove experimental status - [#30727](https://github.com/storybookjs/storybook/pull/30727), thanks @valentinpalkovic!\n- Typescript: Drop Typescript < 4.9 support - [#30736](https://github.com/storybookjs/storybook/pull/30736), thanks @valentinpalkovic!\n- Vite: Improve handling of preview annotations - [#28798](https://github.com/storybookjs/storybook/pull/28798), thanks @tobiasdiez!\n- Vite: Include `node_modules` in stats file - [#30711](https://github.com/storybookjs/storybook/pull/30711), thanks @JReinhold!"}} +{"version":"9.0.0-alpha.3","info":{"plain":"- Addon A11y: Promote @storybook/global to full dependency - [#30723](https://github.com/storybookjs/storybook/pull/30723), thanks @mrginglymus!\n- Addon Test: Improve unhandled error messages - [#30755](https://github.com/storybookjs/storybook/pull/30755), thanks @yannbf!\n- Angular: Add @angular-devkit/build-angular to default installed pacakages in angular - [#30790](https://github.com/storybookjs/storybook/pull/30790), thanks @kasperpeulen!\n- Automigrate: Disable `missingStorybookDependencies` for 9.0 - [#30769](https://github.com/storybookjs/storybook/pull/30769), thanks @ndelangen!\n- CLI: Fix test install in RNW projects - [#30786](https://github.com/storybookjs/storybook/pull/30786), thanks @shilman!\n- Core: Re-Export renderers from frameworks - [#30771](https://github.com/storybookjs/storybook/pull/30771), thanks @ndelangen!\n- Core: Replace 'min' instead of 'm' in printDuration - [#30668](https://github.com/storybookjs/storybook/pull/30668), thanks @wlewis-formative!\n- Migration: Add auto-automigration for merged packages - [#30753](https://github.com/storybookjs/storybook/pull/30753), thanks @ndelangen!\n- Next.js: Upgrade image-size to 2.0 - [#30741](https://github.com/storybookjs/storybook/pull/30741), thanks @valentinpalkovic!\n- Next.js: Use latest version when init in empty directory - [#30659](https://github.com/storybookjs/storybook/pull/30659), thanks @valentinpalkovic!\n- Svelte: Fix Vite crashing on virtual module imports - [#26838](https://github.com/storybookjs/storybook/pull/26838), thanks @rChaoz!\n- Svelte: Fix automatic argTypes inference coming up empty with `svelte2tsx@0.7.35` - [#30784](https://github.com/storybookjs/storybook/pull/30784), thanks @JReinhold!\n- Svelte: Pin svelte2tsx to solve argType regression - [#30783](https://github.com/storybookjs/storybook/pull/30783), thanks @kasperpeulen!\n- Test: Move `@storybook/test` into `storybook/test` - [#30742](https://github.com/storybookjs/storybook/pull/30742), thanks @valentinpalkovic!\n- Universal Store: Don't use `crypto.randomUUID` - [#30781](https://github.com/storybookjs/storybook/pull/30781), thanks @JReinhold!"}} From b748af8a710fe144efcbccda2746a4b1ea305c8e Mon Sep 17 00:00:00 2001 From: storybook-bot <32066757+storybook-bot@users.noreply.github.com> Date: Tue, 11 Mar 2025 15:41:18 +0000 Subject: [PATCH 108/108] Bump version from "9.0.0-alpha.2" to "9.0.0-alpha.3" [skip ci] --- code/addons/a11y/package.json | 2 +- code/addons/actions/package.json | 2 +- code/addons/backgrounds/package.json | 2 +- code/addons/controls/package.json | 2 +- code/addons/docs/package.json | 2 +- code/addons/essentials/package.json | 2 +- code/addons/gfm/package.json | 2 +- code/addons/highlight/package.json | 2 +- code/addons/interactions/package.json | 2 +- code/addons/jest/package.json | 2 +- code/addons/links/package.json | 2 +- code/addons/measure/package.json | 2 +- code/addons/onboarding/package.json | 2 +- code/addons/outline/package.json | 2 +- code/addons/storysource/package.json | 2 +- code/addons/test/package.json | 2 +- code/addons/themes/package.json | 2 +- code/addons/toolbars/package.json | 2 +- code/addons/viewport/package.json | 2 +- code/builders/builder-vite/package.json | 2 +- code/builders/builder-webpack5/package.json | 2 +- code/core/package.json | 2 +- code/core/src/common/versions.ts | 128 +++++++++--------- code/core/src/manager-api/version.ts | 2 +- code/frameworks/angular/package.json | 2 +- code/frameworks/ember/package.json | 2 +- .../experimental-nextjs-vite/package.json | 2 +- code/frameworks/html-vite/package.json | 2 +- code/frameworks/html-webpack5/package.json | 2 +- code/frameworks/nextjs/package.json | 2 +- code/frameworks/preact-vite/package.json | 2 +- code/frameworks/preact-webpack5/package.json | 2 +- .../react-native-web-vite/package.json | 2 +- code/frameworks/react-vite/package.json | 2 +- code/frameworks/react-webpack5/package.json | 2 +- code/frameworks/server-webpack5/package.json | 2 +- code/frameworks/svelte-vite/package.json | 2 +- code/frameworks/svelte-webpack5/package.json | 2 +- code/frameworks/sveltekit/package.json | 2 +- code/frameworks/vue3-vite/package.json | 2 +- code/frameworks/vue3-webpack5/package.json | 2 +- .../web-components-vite/package.json | 2 +- .../web-components-webpack5/package.json | 2 +- code/lib/blocks/package.json | 2 +- code/lib/cli-sb/package.json | 2 +- code/lib/cli-storybook/package.json | 2 +- code/lib/codemod/package.json | 2 +- code/lib/core-webpack/package.json | 2 +- code/lib/create-storybook/package.json | 2 +- code/lib/csf-plugin/package.json | 2 +- code/lib/react-dom-shim/package.json | 2 +- code/lib/source-loader/package.json | 2 +- code/package.json | 5 +- code/presets/create-react-app/package.json | 2 +- code/presets/html-webpack/package.json | 2 +- code/presets/preact-webpack/package.json | 2 +- code/presets/react-webpack/package.json | 2 +- code/presets/server-webpack/package.json | 2 +- code/presets/svelte-webpack/package.json | 2 +- code/presets/vue3-webpack/package.json | 2 +- code/renderers/html/package.json | 2 +- code/renderers/preact/package.json | 2 +- code/renderers/react/package.json | 2 +- code/renderers/server/package.json | 2 +- code/renderers/svelte/package.json | 2 +- code/renderers/vue3/package.json | 2 +- code/renderers/web-components/package.json | 2 +- 67 files changed, 131 insertions(+), 132 deletions(-) diff --git a/code/addons/a11y/package.json b/code/addons/a11y/package.json index 3c956180d7c..6c537af6e90 100644 --- a/code/addons/a11y/package.json +++ b/code/addons/a11y/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-a11y", - "version": "9.0.0-alpha.2", + "version": "9.0.0-alpha.3", "description": "Test component compliance with web accessibility standards", "keywords": [ "a11y", diff --git a/code/addons/actions/package.json b/code/addons/actions/package.json index 58b88b30fe0..6ffd0dfbf7d 100644 --- a/code/addons/actions/package.json +++ b/code/addons/actions/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-actions", - "version": "9.0.0-alpha.2", + "version": "9.0.0-alpha.3", "description": "Get UI feedback when an action is performed on an interactive element", "keywords": [ "storybook", diff --git a/code/addons/backgrounds/package.json b/code/addons/backgrounds/package.json index cd8699a7f7b..b4cdcc29743 100644 --- a/code/addons/backgrounds/package.json +++ b/code/addons/backgrounds/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-backgrounds", - "version": "9.0.0-alpha.2", + "version": "9.0.0-alpha.3", "description": "Switch backgrounds to view components in different settings", "keywords": [ "addon", diff --git a/code/addons/controls/package.json b/code/addons/controls/package.json index 65245513ade..b0da70a1afb 100644 --- a/code/addons/controls/package.json +++ b/code/addons/controls/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-controls", - "version": "9.0.0-alpha.2", + "version": "9.0.0-alpha.3", "description": "Interact with component inputs dynamically in the Storybook UI", "keywords": [ "addon", diff --git a/code/addons/docs/package.json b/code/addons/docs/package.json index ce5ebd4a3a8..31dbb391b2c 100644 --- a/code/addons/docs/package.json +++ b/code/addons/docs/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-docs", - "version": "9.0.0-alpha.2", + "version": "9.0.0-alpha.3", "description": "Document component usage and properties in Markdown", "keywords": [ "addon", diff --git a/code/addons/essentials/package.json b/code/addons/essentials/package.json index 3cee6fdbca7..353f9bf69c6 100644 --- a/code/addons/essentials/package.json +++ b/code/addons/essentials/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-essentials", - "version": "9.0.0-alpha.2", + "version": "9.0.0-alpha.3", "description": "Curated addons to bring out the best of Storybook", "keywords": [ "addon", diff --git a/code/addons/gfm/package.json b/code/addons/gfm/package.json index 0c23f48bdb1..1875c5e01cc 100644 --- a/code/addons/gfm/package.json +++ b/code/addons/gfm/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-mdx-gfm", - "version": "9.0.0-alpha.2", + "version": "9.0.0-alpha.3", "description": "GitHub Flavored Markdown in Storybook", "keywords": [ "addon", diff --git a/code/addons/highlight/package.json b/code/addons/highlight/package.json index 432b629d833..2f8d7f750ea 100644 --- a/code/addons/highlight/package.json +++ b/code/addons/highlight/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-highlight", - "version": "9.0.0-alpha.2", + "version": "9.0.0-alpha.3", "description": "Highlight DOM nodes within your stories", "keywords": [ "storybook-addons", diff --git a/code/addons/interactions/package.json b/code/addons/interactions/package.json index bd35a619b7e..71e1efedd71 100644 --- a/code/addons/interactions/package.json +++ b/code/addons/interactions/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-interactions", - "version": "9.0.0-alpha.2", + "version": "9.0.0-alpha.3", "description": "Automate, test and debug user interactions", "keywords": [ "storybook-addons", diff --git a/code/addons/jest/package.json b/code/addons/jest/package.json index c75acf41f3c..d1df7e70a9b 100644 --- a/code/addons/jest/package.json +++ b/code/addons/jest/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-jest", - "version": "9.0.0-alpha.2", + "version": "9.0.0-alpha.3", "description": "React storybook addon that show component jest report", "keywords": [ "addon", diff --git a/code/addons/links/package.json b/code/addons/links/package.json index 6bc26746082..db9002b43d5 100644 --- a/code/addons/links/package.json +++ b/code/addons/links/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-links", - "version": "9.0.0-alpha.2", + "version": "9.0.0-alpha.3", "description": "Link stories together to build demos and prototypes with your UI components", "keywords": [ "storybook-addons", diff --git a/code/addons/measure/package.json b/code/addons/measure/package.json index 8986a9b95d1..59c417681f8 100644 --- a/code/addons/measure/package.json +++ b/code/addons/measure/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-measure", - "version": "9.0.0-alpha.2", + "version": "9.0.0-alpha.3", "description": "Inspect layouts by visualizing the box model", "keywords": [ "storybook-addons", diff --git a/code/addons/onboarding/package.json b/code/addons/onboarding/package.json index 441cfbb600e..c03453074e4 100644 --- a/code/addons/onboarding/package.json +++ b/code/addons/onboarding/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-onboarding", - "version": "9.0.0-alpha.2", + "version": "9.0.0-alpha.3", "description": "Storybook Addon Onboarding - Introduces a new onboarding experience", "keywords": [ "storybook-addons", diff --git a/code/addons/outline/package.json b/code/addons/outline/package.json index 58f18c118d0..94016c27ca9 100644 --- a/code/addons/outline/package.json +++ b/code/addons/outline/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-outline", - "version": "9.0.0-alpha.2", + "version": "9.0.0-alpha.3", "description": "Outline all elements with CSS to help with layout placement and alignment", "keywords": [ "storybook-addons", diff --git a/code/addons/storysource/package.json b/code/addons/storysource/package.json index 1de6dfb130a..54094511e67 100644 --- a/code/addons/storysource/package.json +++ b/code/addons/storysource/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-storysource", - "version": "9.0.0-alpha.2", + "version": "9.0.0-alpha.3", "description": "View a story’s source code to see how it works and paste into your app", "keywords": [ "addon", diff --git a/code/addons/test/package.json b/code/addons/test/package.json index 9be7b02b5ae..4d0d2ad1cfe 100644 --- a/code/addons/test/package.json +++ b/code/addons/test/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-test", - "version": "9.0.0-alpha.2", + "version": "9.0.0-alpha.3", "description": "Storybook addon for testing components", "keywords": [ "storybook-addons", diff --git a/code/addons/themes/package.json b/code/addons/themes/package.json index c4439a562a3..6f40319eed5 100644 --- a/code/addons/themes/package.json +++ b/code/addons/themes/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-themes", - "version": "9.0.0-alpha.2", + "version": "9.0.0-alpha.3", "description": "Switch between multiple themes for you components in Storybook", "keywords": [ "css", diff --git a/code/addons/toolbars/package.json b/code/addons/toolbars/package.json index 2f954e3bb1d..46291a827b8 100644 --- a/code/addons/toolbars/package.json +++ b/code/addons/toolbars/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-toolbars", - "version": "9.0.0-alpha.2", + "version": "9.0.0-alpha.3", "description": "Create your own toolbar items that control story rendering", "keywords": [ "addon", diff --git a/code/addons/viewport/package.json b/code/addons/viewport/package.json index bba79aa3f68..4ca2dcf600e 100644 --- a/code/addons/viewport/package.json +++ b/code/addons/viewport/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-viewport", - "version": "9.0.0-alpha.2", + "version": "9.0.0-alpha.3", "description": "Build responsive components by adjusting Storybook’s viewport size and orientation", "keywords": [ "addon", diff --git a/code/builders/builder-vite/package.json b/code/builders/builder-vite/package.json index 0d54f4cd2b9..c6565756621 100644 --- a/code/builders/builder-vite/package.json +++ b/code/builders/builder-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/builder-vite", - "version": "9.0.0-alpha.2", + "version": "9.0.0-alpha.3", "description": "A plugin to run and build Storybooks with Vite", "homepage": "https://github.com/storybookjs/storybook/tree/next/code/builders/builder-vite/#readme", "bugs": { diff --git a/code/builders/builder-webpack5/package.json b/code/builders/builder-webpack5/package.json index e7633d16ade..80cd42b0fdb 100644 --- a/code/builders/builder-webpack5/package.json +++ b/code/builders/builder-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/builder-webpack5", - "version": "9.0.0-alpha.2", + "version": "9.0.0-alpha.3", "description": "Storybook framework-agnostic API", "keywords": [ "storybook" diff --git a/code/core/package.json b/code/core/package.json index 02f8bcf7823..762c393d2e2 100644 --- a/code/core/package.json +++ b/code/core/package.json @@ -1,6 +1,6 @@ { "name": "storybook", - "version": "9.0.0-alpha.2", + "version": "9.0.0-alpha.3", "description": "Storybook framework-agnostic API", "keywords": [ "storybook" diff --git a/code/core/src/common/versions.ts b/code/core/src/common/versions.ts index dad63691e83..a288c5f3efb 100644 --- a/code/core/src/common/versions.ts +++ b/code/core/src/common/versions.ts @@ -1,67 +1,67 @@ // auto generated file, do not edit export default { - '@storybook/addon-a11y': '9.0.0-alpha.2', - '@storybook/addon-actions': '9.0.0-alpha.2', - '@storybook/addon-backgrounds': '9.0.0-alpha.2', - '@storybook/addon-controls': '9.0.0-alpha.2', - '@storybook/addon-docs': '9.0.0-alpha.2', - '@storybook/addon-essentials': '9.0.0-alpha.2', - '@storybook/addon-mdx-gfm': '9.0.0-alpha.2', - '@storybook/addon-highlight': '9.0.0-alpha.2', - '@storybook/addon-interactions': '9.0.0-alpha.2', - '@storybook/addon-jest': '9.0.0-alpha.2', - '@storybook/addon-links': '9.0.0-alpha.2', - '@storybook/addon-measure': '9.0.0-alpha.2', - '@storybook/addon-onboarding': '9.0.0-alpha.2', - '@storybook/addon-outline': '9.0.0-alpha.2', - '@storybook/addon-storysource': '9.0.0-alpha.2', - '@storybook/addon-test': '9.0.0-alpha.2', - '@storybook/addon-themes': '9.0.0-alpha.2', - '@storybook/addon-toolbars': '9.0.0-alpha.2', - '@storybook/addon-viewport': '9.0.0-alpha.2', - '@storybook/builder-vite': '9.0.0-alpha.2', - '@storybook/builder-webpack5': '9.0.0-alpha.2', - storybook: '9.0.0-alpha.2', - '@storybook/angular': '9.0.0-alpha.2', - '@storybook/ember': '9.0.0-alpha.2', - '@storybook/experimental-nextjs-vite': '9.0.0-alpha.2', - '@storybook/html-vite': '9.0.0-alpha.2', - '@storybook/html-webpack5': '9.0.0-alpha.2', - '@storybook/nextjs': '9.0.0-alpha.2', - '@storybook/preact-vite': '9.0.0-alpha.2', - '@storybook/preact-webpack5': '9.0.0-alpha.2', - '@storybook/react-native-web-vite': '9.0.0-alpha.2', - '@storybook/react-vite': '9.0.0-alpha.2', - '@storybook/react-webpack5': '9.0.0-alpha.2', - '@storybook/server-webpack5': '9.0.0-alpha.2', - '@storybook/svelte-vite': '9.0.0-alpha.2', - '@storybook/svelte-webpack5': '9.0.0-alpha.2', - '@storybook/sveltekit': '9.0.0-alpha.2', - '@storybook/vue3-vite': '9.0.0-alpha.2', - '@storybook/vue3-webpack5': '9.0.0-alpha.2', - '@storybook/web-components-vite': '9.0.0-alpha.2', - '@storybook/web-components-webpack5': '9.0.0-alpha.2', - '@storybook/blocks': '9.0.0-alpha.2', - sb: '9.0.0-alpha.2', - '@storybook/cli': '9.0.0-alpha.2', - '@storybook/codemod': '9.0.0-alpha.2', - '@storybook/core-webpack': '9.0.0-alpha.2', - 'create-storybook': '9.0.0-alpha.2', - '@storybook/csf-plugin': '9.0.0-alpha.2', - '@storybook/react-dom-shim': '9.0.0-alpha.2', - '@storybook/source-loader': '9.0.0-alpha.2', - '@storybook/preset-create-react-app': '9.0.0-alpha.2', - '@storybook/preset-html-webpack': '9.0.0-alpha.2', - '@storybook/preset-preact-webpack': '9.0.0-alpha.2', - '@storybook/preset-react-webpack': '9.0.0-alpha.2', - '@storybook/preset-server-webpack': '9.0.0-alpha.2', - '@storybook/preset-svelte-webpack': '9.0.0-alpha.2', - '@storybook/preset-vue3-webpack': '9.0.0-alpha.2', - '@storybook/html': '9.0.0-alpha.2', - '@storybook/preact': '9.0.0-alpha.2', - '@storybook/react': '9.0.0-alpha.2', - '@storybook/server': '9.0.0-alpha.2', - '@storybook/svelte': '9.0.0-alpha.2', - '@storybook/vue3': '9.0.0-alpha.2', - '@storybook/web-components': '9.0.0-alpha.2', + '@storybook/addon-a11y': '9.0.0-alpha.3', + '@storybook/addon-actions': '9.0.0-alpha.3', + '@storybook/addon-backgrounds': '9.0.0-alpha.3', + '@storybook/addon-controls': '9.0.0-alpha.3', + '@storybook/addon-docs': '9.0.0-alpha.3', + '@storybook/addon-essentials': '9.0.0-alpha.3', + '@storybook/addon-mdx-gfm': '9.0.0-alpha.3', + '@storybook/addon-highlight': '9.0.0-alpha.3', + '@storybook/addon-interactions': '9.0.0-alpha.3', + '@storybook/addon-jest': '9.0.0-alpha.3', + '@storybook/addon-links': '9.0.0-alpha.3', + '@storybook/addon-measure': '9.0.0-alpha.3', + '@storybook/addon-onboarding': '9.0.0-alpha.3', + '@storybook/addon-outline': '9.0.0-alpha.3', + '@storybook/addon-storysource': '9.0.0-alpha.3', + '@storybook/addon-test': '9.0.0-alpha.3', + '@storybook/addon-themes': '9.0.0-alpha.3', + '@storybook/addon-toolbars': '9.0.0-alpha.3', + '@storybook/addon-viewport': '9.0.0-alpha.3', + '@storybook/builder-vite': '9.0.0-alpha.3', + '@storybook/builder-webpack5': '9.0.0-alpha.3', + storybook: '9.0.0-alpha.3', + '@storybook/angular': '9.0.0-alpha.3', + '@storybook/ember': '9.0.0-alpha.3', + '@storybook/experimental-nextjs-vite': '9.0.0-alpha.3', + '@storybook/html-vite': '9.0.0-alpha.3', + '@storybook/html-webpack5': '9.0.0-alpha.3', + '@storybook/nextjs': '9.0.0-alpha.3', + '@storybook/preact-vite': '9.0.0-alpha.3', + '@storybook/preact-webpack5': '9.0.0-alpha.3', + '@storybook/react-native-web-vite': '9.0.0-alpha.3', + '@storybook/react-vite': '9.0.0-alpha.3', + '@storybook/react-webpack5': '9.0.0-alpha.3', + '@storybook/server-webpack5': '9.0.0-alpha.3', + '@storybook/svelte-vite': '9.0.0-alpha.3', + '@storybook/svelte-webpack5': '9.0.0-alpha.3', + '@storybook/sveltekit': '9.0.0-alpha.3', + '@storybook/vue3-vite': '9.0.0-alpha.3', + '@storybook/vue3-webpack5': '9.0.0-alpha.3', + '@storybook/web-components-vite': '9.0.0-alpha.3', + '@storybook/web-components-webpack5': '9.0.0-alpha.3', + '@storybook/blocks': '9.0.0-alpha.3', + sb: '9.0.0-alpha.3', + '@storybook/cli': '9.0.0-alpha.3', + '@storybook/codemod': '9.0.0-alpha.3', + '@storybook/core-webpack': '9.0.0-alpha.3', + 'create-storybook': '9.0.0-alpha.3', + '@storybook/csf-plugin': '9.0.0-alpha.3', + '@storybook/react-dom-shim': '9.0.0-alpha.3', + '@storybook/source-loader': '9.0.0-alpha.3', + '@storybook/preset-create-react-app': '9.0.0-alpha.3', + '@storybook/preset-html-webpack': '9.0.0-alpha.3', + '@storybook/preset-preact-webpack': '9.0.0-alpha.3', + '@storybook/preset-react-webpack': '9.0.0-alpha.3', + '@storybook/preset-server-webpack': '9.0.0-alpha.3', + '@storybook/preset-svelte-webpack': '9.0.0-alpha.3', + '@storybook/preset-vue3-webpack': '9.0.0-alpha.3', + '@storybook/html': '9.0.0-alpha.3', + '@storybook/preact': '9.0.0-alpha.3', + '@storybook/react': '9.0.0-alpha.3', + '@storybook/server': '9.0.0-alpha.3', + '@storybook/svelte': '9.0.0-alpha.3', + '@storybook/vue3': '9.0.0-alpha.3', + '@storybook/web-components': '9.0.0-alpha.3', }; diff --git a/code/core/src/manager-api/version.ts b/code/core/src/manager-api/version.ts index 0506d929ae6..4c267c031d1 100644 --- a/code/core/src/manager-api/version.ts +++ b/code/core/src/manager-api/version.ts @@ -1 +1 @@ -export const version = '9.0.0-alpha.2'; +export const version = '9.0.0-alpha.3'; diff --git a/code/frameworks/angular/package.json b/code/frameworks/angular/package.json index b006a2685b4..37026f6bad7 100644 --- a/code/frameworks/angular/package.json +++ b/code/frameworks/angular/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/angular", - "version": "9.0.0-alpha.2", + "version": "9.0.0-alpha.3", "description": "Storybook for Angular: Develop Angular components in isolation with hot reloading.", "keywords": [ "storybook", diff --git a/code/frameworks/ember/package.json b/code/frameworks/ember/package.json index dd304597a93..67718f63577 100644 --- a/code/frameworks/ember/package.json +++ b/code/frameworks/ember/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/ember", - "version": "9.0.0-alpha.2", + "version": "9.0.0-alpha.3", "description": "Storybook for Ember: Develop Ember Component in isolation with Hot Reloading.", "homepage": "https://github.com/storybookjs/storybook/tree/next/code/frameworks/ember", "bugs": { diff --git a/code/frameworks/experimental-nextjs-vite/package.json b/code/frameworks/experimental-nextjs-vite/package.json index 02cd4b01cb7..b4251763c2c 100644 --- a/code/frameworks/experimental-nextjs-vite/package.json +++ b/code/frameworks/experimental-nextjs-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/experimental-nextjs-vite", - "version": "9.0.0-alpha.2", + "version": "9.0.0-alpha.3", "description": "Storybook for Next.js and Vite", "keywords": [ "storybook", diff --git a/code/frameworks/html-vite/package.json b/code/frameworks/html-vite/package.json index eab5f547178..36b44461387 100644 --- a/code/frameworks/html-vite/package.json +++ b/code/frameworks/html-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/html-vite", - "version": "9.0.0-alpha.2", + "version": "9.0.0-alpha.3", "description": "Storybook for HTML and Vite: Develop HTML in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/html-webpack5/package.json b/code/frameworks/html-webpack5/package.json index f36024196c6..65c856c27c1 100644 --- a/code/frameworks/html-webpack5/package.json +++ b/code/frameworks/html-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/html-webpack5", - "version": "9.0.0-alpha.2", + "version": "9.0.0-alpha.3", "description": "Storybook for HTML: View HTML snippets in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/nextjs/package.json b/code/frameworks/nextjs/package.json index 1192820ad4d..0bc130dccd4 100644 --- a/code/frameworks/nextjs/package.json +++ b/code/frameworks/nextjs/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/nextjs", - "version": "9.0.0-alpha.2", + "version": "9.0.0-alpha.3", "description": "Storybook for Next.js", "keywords": [ "storybook", diff --git a/code/frameworks/preact-vite/package.json b/code/frameworks/preact-vite/package.json index 314d77bab74..2253f224daf 100644 --- a/code/frameworks/preact-vite/package.json +++ b/code/frameworks/preact-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preact-vite", - "version": "9.0.0-alpha.2", + "version": "9.0.0-alpha.3", "description": "Storybook for Preact and Vite: Develop Preact components in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/preact-webpack5/package.json b/code/frameworks/preact-webpack5/package.json index e96359e91a1..77e02cd99ba 100644 --- a/code/frameworks/preact-webpack5/package.json +++ b/code/frameworks/preact-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preact-webpack5", - "version": "9.0.0-alpha.2", + "version": "9.0.0-alpha.3", "description": "Storybook for Preact: Develop Preact Component in isolation.", "keywords": [ "storybook" diff --git a/code/frameworks/react-native-web-vite/package.json b/code/frameworks/react-native-web-vite/package.json index a81f3b1b723..95b1794c2b5 100644 --- a/code/frameworks/react-native-web-vite/package.json +++ b/code/frameworks/react-native-web-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/react-native-web-vite", - "version": "9.0.0-alpha.2", + "version": "9.0.0-alpha.3", "description": "Develop react-native components an isolated web environment with hot reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/react-vite/package.json b/code/frameworks/react-vite/package.json index c9ff913ecf1..0bb64b76ba1 100644 --- a/code/frameworks/react-vite/package.json +++ b/code/frameworks/react-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/react-vite", - "version": "9.0.0-alpha.2", + "version": "9.0.0-alpha.3", "description": "Storybook for React and Vite: Develop React components in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/react-webpack5/package.json b/code/frameworks/react-webpack5/package.json index 4cbbcaa3490..23acdcd85e5 100644 --- a/code/frameworks/react-webpack5/package.json +++ b/code/frameworks/react-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/react-webpack5", - "version": "9.0.0-alpha.2", + "version": "9.0.0-alpha.3", "description": "Storybook for React: Develop React Component in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/server-webpack5/package.json b/code/frameworks/server-webpack5/package.json index 747a30a06ea..2a0d367b32f 100644 --- a/code/frameworks/server-webpack5/package.json +++ b/code/frameworks/server-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/server-webpack5", - "version": "9.0.0-alpha.2", + "version": "9.0.0-alpha.3", "description": "Storybook for Server: View HTML snippets from a server in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/svelte-vite/package.json b/code/frameworks/svelte-vite/package.json index a29ea282b3a..595f52fb7ed 100644 --- a/code/frameworks/svelte-vite/package.json +++ b/code/frameworks/svelte-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/svelte-vite", - "version": "9.0.0-alpha.2", + "version": "9.0.0-alpha.3", "description": "Storybook for Svelte and Vite: Develop Svelte components in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/svelte-webpack5/package.json b/code/frameworks/svelte-webpack5/package.json index 55f2f14aa28..a42f5eb1507 100644 --- a/code/frameworks/svelte-webpack5/package.json +++ b/code/frameworks/svelte-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/svelte-webpack5", - "version": "9.0.0-alpha.2", + "version": "9.0.0-alpha.3", "description": "Storybook for Svelte: Develop Svelte Component in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/sveltekit/package.json b/code/frameworks/sveltekit/package.json index 8b972dc17a0..1c1ef886290 100644 --- a/code/frameworks/sveltekit/package.json +++ b/code/frameworks/sveltekit/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/sveltekit", - "version": "9.0.0-alpha.2", + "version": "9.0.0-alpha.3", "description": "Storybook for SvelteKit", "keywords": [ "storybook", diff --git a/code/frameworks/vue3-vite/package.json b/code/frameworks/vue3-vite/package.json index dbdb637ea2d..022248c746a 100644 --- a/code/frameworks/vue3-vite/package.json +++ b/code/frameworks/vue3-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/vue3-vite", - "version": "9.0.0-alpha.2", + "version": "9.0.0-alpha.3", "description": "Storybook for Vue3 and Vite: Develop Vue3 components in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/vue3-webpack5/package.json b/code/frameworks/vue3-webpack5/package.json index c46b6f71387..603b93809e5 100644 --- a/code/frameworks/vue3-webpack5/package.json +++ b/code/frameworks/vue3-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/vue3-webpack5", - "version": "9.0.0-alpha.2", + "version": "9.0.0-alpha.3", "description": "Storybook for Vue 3: Develop Vue 3 Components in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/web-components-vite/package.json b/code/frameworks/web-components-vite/package.json index 549bb897aac..f7c3b6b697a 100644 --- a/code/frameworks/web-components-vite/package.json +++ b/code/frameworks/web-components-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/web-components-vite", - "version": "9.0.0-alpha.2", + "version": "9.0.0-alpha.3", "description": "Storybook for web-components and Vite: Develop Web Components in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/web-components-webpack5/package.json b/code/frameworks/web-components-webpack5/package.json index e13ae030089..d78e57f1d5d 100644 --- a/code/frameworks/web-components-webpack5/package.json +++ b/code/frameworks/web-components-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/web-components-webpack5", - "version": "9.0.0-alpha.2", + "version": "9.0.0-alpha.3", "description": "Storybook for web-components: View web components snippets in isolation with Hot Reloading.", "keywords": [ "lit", diff --git a/code/lib/blocks/package.json b/code/lib/blocks/package.json index c8bd492d886..32c5830cdb9 100644 --- a/code/lib/blocks/package.json +++ b/code/lib/blocks/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/blocks", - "version": "9.0.0-alpha.2", + "version": "9.0.0-alpha.3", "description": "Storybook Doc Blocks", "keywords": [ "storybook" diff --git a/code/lib/cli-sb/package.json b/code/lib/cli-sb/package.json index cb439047903..5f6252f09af 100644 --- a/code/lib/cli-sb/package.json +++ b/code/lib/cli-sb/package.json @@ -1,6 +1,6 @@ { "name": "sb", - "version": "9.0.0-alpha.2", + "version": "9.0.0-alpha.3", "description": "Storybook CLI", "keywords": [ "storybook" diff --git a/code/lib/cli-storybook/package.json b/code/lib/cli-storybook/package.json index 7a5ea23cf2a..072811e46fa 100644 --- a/code/lib/cli-storybook/package.json +++ b/code/lib/cli-storybook/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/cli", - "version": "9.0.0-alpha.2", + "version": "9.0.0-alpha.3", "description": "Storybook CLI", "keywords": [ "storybook" diff --git a/code/lib/codemod/package.json b/code/lib/codemod/package.json index 917b3738f2c..35095ef63af 100644 --- a/code/lib/codemod/package.json +++ b/code/lib/codemod/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/codemod", - "version": "9.0.0-alpha.2", + "version": "9.0.0-alpha.3", "description": "A collection of codemod scripts written with JSCodeshift", "keywords": [ "storybook" diff --git a/code/lib/core-webpack/package.json b/code/lib/core-webpack/package.json index e0f0b4eee7d..e4dadd31773 100644 --- a/code/lib/core-webpack/package.json +++ b/code/lib/core-webpack/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/core-webpack", - "version": "9.0.0-alpha.2", + "version": "9.0.0-alpha.3", "description": "Storybook framework-agnostic API", "keywords": [ "storybook" diff --git a/code/lib/create-storybook/package.json b/code/lib/create-storybook/package.json index e368c7dd381..e6ab8199284 100644 --- a/code/lib/create-storybook/package.json +++ b/code/lib/create-storybook/package.json @@ -1,6 +1,6 @@ { "name": "create-storybook", - "version": "9.0.0-alpha.2", + "version": "9.0.0-alpha.3", "description": "Initialize Storybook into your project", "homepage": "https://github.com/storybookjs/storybook/tree/next/code/lib/create-storybook", "bugs": { diff --git a/code/lib/csf-plugin/package.json b/code/lib/csf-plugin/package.json index 8011d729078..ee741c1444d 100644 --- a/code/lib/csf-plugin/package.json +++ b/code/lib/csf-plugin/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/csf-plugin", - "version": "9.0.0-alpha.2", + "version": "9.0.0-alpha.3", "description": "Enrich CSF files via static analysis", "keywords": [ "storybook" diff --git a/code/lib/react-dom-shim/package.json b/code/lib/react-dom-shim/package.json index 67c6dd04430..a29c9993444 100644 --- a/code/lib/react-dom-shim/package.json +++ b/code/lib/react-dom-shim/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/react-dom-shim", - "version": "9.0.0-alpha.2", + "version": "9.0.0-alpha.3", "description": "", "keywords": [ "storybook" diff --git a/code/lib/source-loader/package.json b/code/lib/source-loader/package.json index edad14fd425..87b0d2b6b7c 100644 --- a/code/lib/source-loader/package.json +++ b/code/lib/source-loader/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/source-loader", - "version": "9.0.0-alpha.2", + "version": "9.0.0-alpha.3", "description": "Source loader", "keywords": [ "lib", diff --git a/code/package.json b/code/package.json index e47578db904..836b9f3c934 100644 --- a/code/package.json +++ b/code/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/root", - "version": "9.0.0-alpha.2", + "version": "9.0.0-alpha.3", "private": true, "description": "Storybook root", "homepage": "https://storybook.js.org/", @@ -297,6 +297,5 @@ "Dependency Upgrades" ] ] - }, - "deferredNextVersion": "9.0.0-alpha.3" + } } diff --git a/code/presets/create-react-app/package.json b/code/presets/create-react-app/package.json index f3b2b4621af..d52dbee17e7 100644 --- a/code/presets/create-react-app/package.json +++ b/code/presets/create-react-app/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preset-create-react-app", - "version": "9.0.0-alpha.2", + "version": "9.0.0-alpha.3", "description": "Storybook for Create React App preset", "keywords": [ "storybook" diff --git a/code/presets/html-webpack/package.json b/code/presets/html-webpack/package.json index d086dfeed34..e07a2ca6906 100644 --- a/code/presets/html-webpack/package.json +++ b/code/presets/html-webpack/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preset-html-webpack", - "version": "9.0.0-alpha.2", + "version": "9.0.0-alpha.3", "description": "Storybook for HTML: View HTML snippets in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/presets/preact-webpack/package.json b/code/presets/preact-webpack/package.json index 9cfe174b25c..c1fbb31e0ce 100644 --- a/code/presets/preact-webpack/package.json +++ b/code/presets/preact-webpack/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preset-preact-webpack", - "version": "9.0.0-alpha.2", + "version": "9.0.0-alpha.3", "description": "Storybook for Preact: Develop Preact Component in isolation.", "keywords": [ "storybook" diff --git a/code/presets/react-webpack/package.json b/code/presets/react-webpack/package.json index 6d0429b93b9..0cad50b2b8c 100644 --- a/code/presets/react-webpack/package.json +++ b/code/presets/react-webpack/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preset-react-webpack", - "version": "9.0.0-alpha.2", + "version": "9.0.0-alpha.3", "description": "Storybook for React: Develop React Component in isolation with Hot Reloading", "keywords": [ "storybook" diff --git a/code/presets/server-webpack/package.json b/code/presets/server-webpack/package.json index 7593d492ff4..b6440e1064a 100644 --- a/code/presets/server-webpack/package.json +++ b/code/presets/server-webpack/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preset-server-webpack", - "version": "9.0.0-alpha.2", + "version": "9.0.0-alpha.3", "description": "Storybook for Server: View HTML snippets from a server in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/presets/svelte-webpack/package.json b/code/presets/svelte-webpack/package.json index d8a519bb055..24118cc4027 100644 --- a/code/presets/svelte-webpack/package.json +++ b/code/presets/svelte-webpack/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preset-svelte-webpack", - "version": "9.0.0-alpha.2", + "version": "9.0.0-alpha.3", "description": "Storybook for Svelte: Develop Svelte Component in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/presets/vue3-webpack/package.json b/code/presets/vue3-webpack/package.json index b6cceeb16bd..f1eefa542b6 100644 --- a/code/presets/vue3-webpack/package.json +++ b/code/presets/vue3-webpack/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preset-vue3-webpack", - "version": "9.0.0-alpha.2", + "version": "9.0.0-alpha.3", "description": "Storybook for Vue 3: Develop Vue 3 Components in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/renderers/html/package.json b/code/renderers/html/package.json index ddc42029ade..a5c24cbbde1 100644 --- a/code/renderers/html/package.json +++ b/code/renderers/html/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/html", - "version": "9.0.0-alpha.2", + "version": "9.0.0-alpha.3", "description": "Storybook HTML renderer", "keywords": [ "storybook" diff --git a/code/renderers/preact/package.json b/code/renderers/preact/package.json index 07853a3dd54..e10fd8e7472 100644 --- a/code/renderers/preact/package.json +++ b/code/renderers/preact/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preact", - "version": "9.0.0-alpha.2", + "version": "9.0.0-alpha.3", "description": "Storybook Preact renderer", "keywords": [ "storybook" diff --git a/code/renderers/react/package.json b/code/renderers/react/package.json index 9f4e0098a13..a8cb19dcc2a 100644 --- a/code/renderers/react/package.json +++ b/code/renderers/react/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/react", - "version": "9.0.0-alpha.2", + "version": "9.0.0-alpha.3", "description": "Storybook React renderer", "keywords": [ "storybook" diff --git a/code/renderers/server/package.json b/code/renderers/server/package.json index de530374c97..9d1e1534dfb 100644 --- a/code/renderers/server/package.json +++ b/code/renderers/server/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/server", - "version": "9.0.0-alpha.2", + "version": "9.0.0-alpha.3", "description": "Storybook Server renderer", "keywords": [ "storybook" diff --git a/code/renderers/svelte/package.json b/code/renderers/svelte/package.json index cbb4a1fa34b..5411f409f4c 100644 --- a/code/renderers/svelte/package.json +++ b/code/renderers/svelte/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/svelte", - "version": "9.0.0-alpha.2", + "version": "9.0.0-alpha.3", "description": "Storybook Svelte renderer", "keywords": [ "storybook" diff --git a/code/renderers/vue3/package.json b/code/renderers/vue3/package.json index 2412ab2da34..6db43ee7a51 100644 --- a/code/renderers/vue3/package.json +++ b/code/renderers/vue3/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/vue3", - "version": "9.0.0-alpha.2", + "version": "9.0.0-alpha.3", "description": "Storybook Vue 3 renderer", "keywords": [ "storybook" diff --git a/code/renderers/web-components/package.json b/code/renderers/web-components/package.json index a2e7afd4e69..7fa44111eff 100644 --- a/code/renderers/web-components/package.json +++ b/code/renderers/web-components/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/web-components", - "version": "9.0.0-alpha.2", + "version": "9.0.0-alpha.3", "description": "Storybook web-components renderer", "keywords": [ "lit",