From 2485a118603e0f2371da2448ee12943ff98b4bc7 Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Wed, 26 Jun 2024 17:24:29 +0200 Subject: [PATCH 01/16] Add canvas to the context in the test package --- code/lib/test/src/index.ts | 24 ++++++++++++++++++++---- 1 file changed, 20 insertions(+), 4 deletions(-) diff --git a/code/lib/test/src/index.ts b/code/lib/test/src/index.ts index 1dcd78c457b..0514d612705 100644 --- a/code/lib/test/src/index.ts +++ b/code/lib/test/src/index.ts @@ -1,5 +1,5 @@ import { instrument } from '@storybook/instrumenter'; -import { type LoaderFunction } from '@storybook/csf'; +import type { LoaderFunction } from '@storybook/types'; import chai from 'chai'; import { global } from '@storybook/global'; import { expect as rawExpect } from './expect'; @@ -11,10 +11,16 @@ import { resetAllMocks, restoreAllMocks, } from './spy'; -import type { Renderer } from '@storybook/types'; +import { type queries, within } from './testing-library'; export * from './spy'; +type Queries = ReturnType>; + +declare module '@storybook/types' { + interface Canvas extends Queries {} +} + export const { expect } = instrument( { expect: rawExpect }, { @@ -84,12 +90,22 @@ export const traverseArgs = (value: unknown, depth = 0, key?: string): unknown = return value; }; -const nameSpiesAndWrapActionsInSpies: LoaderFunction = ({ initialArgs }) => { +const nameSpiesAndWrapActionsInSpies: LoaderFunction = ({ initialArgs }) => { traverseArgs(initialArgs); }; +const addCanvas: LoaderFunction = (context) => { + if (globalThis.HTMLElement && context.canvasElement instanceof globalThis.HTMLElement) { + context.canvas = within(context.canvasElement); + } +}; + // We are using this as a default Storybook loader, when the test package is used. This avoids the need for optional peer dependency workarounds. // eslint-disable-next-line no-underscore-dangle -(global as any).__STORYBOOK_TEST_LOADERS__ = [resetAllMocksLoader, nameSpiesAndWrapActionsInSpies]; +(global as any).__STORYBOOK_TEST_LOADERS__ = [ + resetAllMocksLoader, + nameSpiesAndWrapActionsInSpies, + addCanvas, +]; // eslint-disable-next-line no-underscore-dangle (global as any).__STORYBOOK_TEST_ON_MOCK_CALL__ = onMockCall; From 67c490cc734809c1aba8a5215946fb19505d752c Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Thu, 27 Jun 2024 11:35:11 +0200 Subject: [PATCH 02/16] Add default canvas as empty object --- code/addons/links/package.json | 2 +- code/lib/codemod/package.json | 2 +- code/lib/core-events/package.json | 2 +- code/lib/core-server/package.json | 2 +- code/lib/csf-tools/package.json | 2 +- code/lib/manager-api/package.json | 2 +- code/lib/preview-api/package.json | 2 +- .../modules/preview-web/render/StoryRender.ts | 6 ++-- .../src/modules/store/StoryStore.ts | 12 ++++--- .../src/modules/store/csf/portable-stories.ts | 1 + code/lib/source-loader/package.json | 2 +- code/lib/types/package.json | 2 +- code/package.json | 2 +- code/renderers/server/package.json | 2 +- code/ui/blocks/package.json | 2 +- code/ui/components/package.json | 2 +- code/yarn.lock | 34 +++++++++---------- 17 files changed, 41 insertions(+), 38 deletions(-) diff --git a/code/addons/links/package.json b/code/addons/links/package.json index 2be96a5f6d9..f9a797a50a9 100644 --- a/code/addons/links/package.json +++ b/code/addons/links/package.json @@ -67,7 +67,7 @@ "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/addon-bundle.ts" }, "dependencies": { - "@storybook/csf": "0.1.10--canary.d841bb4.0", + "@storybook/csf": "0.1.10--canary.99.ba76785.0", "@storybook/global": "^5.0.0", "ts-dedent": "^2.0.0" }, diff --git a/code/lib/codemod/package.json b/code/lib/codemod/package.json index b70bc3016fc..d2659f5c935 100644 --- a/code/lib/codemod/package.json +++ b/code/lib/codemod/package.json @@ -57,7 +57,7 @@ "@babel/core": "^7.24.4", "@babel/preset-env": "^7.24.4", "@babel/types": "^7.24.0", - "@storybook/csf": "0.1.10--canary.d841bb4.0", + "@storybook/csf": "0.1.10--canary.99.ba76785.0", "@storybook/csf-tools": "workspace:*", "@storybook/node-logger": "workspace:*", "@storybook/types": "workspace:*", diff --git a/code/lib/core-events/package.json b/code/lib/core-events/package.json index d4bd5bf31d2..5617c2595e2 100644 --- a/code/lib/core-events/package.json +++ b/code/lib/core-events/package.json @@ -78,7 +78,7 @@ "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/csf": "0.1.10--canary.d841bb4.0", + "@storybook/csf": "0.1.10--canary.99.ba76785.0", "ts-dedent": "^2.0.0" }, "devDependencies": { diff --git a/code/lib/core-server/package.json b/code/lib/core-server/package.json index adec4bbecd9..5c2e9e94ae5 100644 --- a/code/lib/core-server/package.json +++ b/code/lib/core-server/package.json @@ -63,7 +63,7 @@ "@storybook/channels": "workspace:*", "@storybook/core-common": "workspace:*", "@storybook/core-events": "workspace:*", - "@storybook/csf": "0.1.10--canary.d841bb4.0", + "@storybook/csf": "0.1.10--canary.99.ba76785.0", "@storybook/csf-tools": "workspace:*", "@storybook/docs-mdx": "3.1.0-next.0", "@storybook/global": "^5.0.0", diff --git a/code/lib/csf-tools/package.json b/code/lib/csf-tools/package.json index 07718df5b84..9331c739ff2 100644 --- a/code/lib/csf-tools/package.json +++ b/code/lib/csf-tools/package.json @@ -46,7 +46,7 @@ "@babel/parser": "^7.24.4", "@babel/traverse": "^7.24.1", "@babel/types": "^7.24.0", - "@storybook/csf": "0.1.10--canary.d841bb4.0", + "@storybook/csf": "0.1.10--canary.99.ba76785.0", "@storybook/types": "workspace:*", "fs-extra": "^11.1.0", "recast": "^0.23.5", diff --git a/code/lib/manager-api/package.json b/code/lib/manager-api/package.json index 36eef08b673..9659bd3eab3 100644 --- a/code/lib/manager-api/package.json +++ b/code/lib/manager-api/package.json @@ -47,7 +47,7 @@ "@storybook/channels": "workspace:*", "@storybook/client-logger": "workspace:*", "@storybook/core-events": "workspace:*", - "@storybook/csf": "0.1.10--canary.d841bb4.0", + "@storybook/csf": "0.1.10--canary.99.ba76785.0", "@storybook/global": "^5.0.0", "@storybook/icons": "^1.2.5", "@storybook/router": "workspace:*", diff --git a/code/lib/preview-api/package.json b/code/lib/preview-api/package.json index 1256f3d16b1..100ff42fa21 100644 --- a/code/lib/preview-api/package.json +++ b/code/lib/preview-api/package.json @@ -47,7 +47,7 @@ "@storybook/channels": "workspace:*", "@storybook/client-logger": "workspace:*", "@storybook/core-events": "workspace:*", - "@storybook/csf": "0.1.10--canary.d841bb4.0", + "@storybook/csf": "0.1.10--canary.99.ba76785.0", "@storybook/global": "^5.0.0", "@storybook/types": "workspace:*", "@types/qs": "^6.9.5", diff --git a/code/lib/preview-api/src/modules/preview-web/render/StoryRender.ts b/code/lib/preview-api/src/modules/preview-web/render/StoryRender.ts index 02840259614..b07dde502eb 100644 --- a/code/lib/preview-api/src/modules/preview-web/render/StoryRender.ts +++ b/code/lib/preview-api/src/modules/preview-web/render/StoryRender.ts @@ -6,7 +6,6 @@ import type { PreparedStory, TeardownRenderToCanvas, StoryContext, - StoryContextForLoaders, StoryId, StoryRenderOptions, } from '@storybook/types'; @@ -181,14 +180,15 @@ export class StoryRender implements Render = { - ...(this.storyContext() as StoryContextForLoaders), + ...this.storyContext(), viewMode: this.viewMode, abortSignal, canvasElement, loaded: {}, step: (label, play) => runStep(label, play, context), + context: null!, + canvas: {}, }; - context.context = context; const renderContext: RenderContext = { diff --git a/code/lib/preview-api/src/modules/store/StoryStore.ts b/code/lib/preview-api/src/modules/store/StoryStore.ts index 8e2c6e444f8..05702d9b263 100644 --- a/code/lib/preview-api/src/modules/store/StoryStore.ts +++ b/code/lib/preview-api/src/modules/store/StoryStore.ts @@ -17,7 +17,6 @@ import type { V3CompatIndexEntry, StoryContext, StoryContextForEnhancers, - StoryContextForLoaders, StoryId, PreparedMeta, } from '@storybook/types'; @@ -226,10 +225,7 @@ export class StoryStore { // A prepared story does not include args, globals or hooks. These are stored in the story store // and updated separtely to the (immutable) story. - getStoryContext( - story: PreparedStory, - { forceInitialArgs = false } = {} - ): Omit { + getStoryContext(story: PreparedStory, { forceInitialArgs = false } = {}) { return prepareContext({ ...story, args: forceInitialArgs ? story.initialArgs : this.args.get(story.id), @@ -369,6 +365,12 @@ export class StoryStore { storyFn: (update) => { const context = { ...this.getStoryContext(story), + abortSignal: new AbortController().signal, + canvasElement: null!, + loaded: {}, + step: (label, play) => story.runStep(label, play, context), + context: null!, + canvas: {}, viewMode: 'story', } as StoryContext; diff --git a/code/lib/preview-api/src/modules/store/csf/portable-stories.ts b/code/lib/preview-api/src/modules/store/csf/portable-stories.ts index bb69130559d..e46968c2563 100644 --- a/code/lib/preview-api/src/modules/store/csf/portable-stories.ts +++ b/code/lib/preview-api/src/modules/store/csf/portable-stories.ts @@ -106,6 +106,7 @@ export function composeStory story.runStep(label, play, context), canvasElement: globalThis?.document?.body, context: null!, + canvas: {}, ...story, }; diff --git a/code/lib/source-loader/package.json b/code/lib/source-loader/package.json index c9f90b9df49..51e32f84e1b 100644 --- a/code/lib/source-loader/package.json +++ b/code/lib/source-loader/package.json @@ -45,7 +45,7 @@ "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/csf": "0.1.10--canary.d841bb4.0", + "@storybook/csf": "0.1.10--canary.99.ba76785.0", "@storybook/types": "workspace:*", "estraverse": "^5.2.0", "lodash": "^4.17.21", diff --git a/code/lib/types/package.json b/code/lib/types/package.json index 81057ffcd97..d9221ee98d0 100644 --- a/code/lib/types/package.json +++ b/code/lib/types/package.json @@ -49,7 +49,7 @@ "file-system-cache": "2.3.0" }, "devDependencies": { - "@storybook/csf": "0.1.10--canary.d841bb4.0", + "@storybook/csf": "0.1.10--canary.99.ba76785.0", "@types/fs-extra": "^11.0.1", "@types/node": "^18.0.0", "typescript": "^5.3.2" diff --git a/code/package.json b/code/package.json index f2dadf392dc..74405cd784b 100644 --- a/code/package.json +++ b/code/package.json @@ -126,7 +126,7 @@ "@storybook/core-events": "workspace:*", "@storybook/core-server": "workspace:*", "@storybook/core-webpack": "workspace:*", - "@storybook/csf": "0.1.10--canary.d841bb4.0", + "@storybook/csf": "0.1.10--canary.99.ba76785.0", "@storybook/csf-plugin": "workspace:*", "@storybook/csf-tools": "workspace:*", "@storybook/docs-tools": "workspace:*", diff --git a/code/renderers/server/package.json b/code/renderers/server/package.json index 437d1d93794..78c79b07115 100644 --- a/code/renderers/server/package.json +++ b/code/renderers/server/package.json @@ -46,7 +46,7 @@ "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/csf": "0.1.10--canary.d841bb4.0", + "@storybook/csf": "0.1.10--canary.99.ba76785.0", "@storybook/csf-tools": "workspace:*", "@storybook/global": "^5.0.0", "@storybook/preview-api": "workspace:*", diff --git a/code/ui/blocks/package.json b/code/ui/blocks/package.json index d34881e2a9d..7e18c120c94 100644 --- a/code/ui/blocks/package.json +++ b/code/ui/blocks/package.json @@ -48,7 +48,7 @@ "@storybook/client-logger": "workspace:*", "@storybook/components": "workspace:*", "@storybook/core-events": "workspace:*", - "@storybook/csf": "0.1.10--canary.d841bb4.0", + "@storybook/csf": "0.1.10--canary.99.ba76785.0", "@storybook/docs-tools": "workspace:*", "@storybook/global": "^5.0.0", "@storybook/icons": "^1.2.5", diff --git a/code/ui/components/package.json b/code/ui/components/package.json index 52c5c887492..70d154d7f28 100644 --- a/code/ui/components/package.json +++ b/code/ui/components/package.json @@ -62,7 +62,7 @@ "@radix-ui/react-dialog": "^1.0.5", "@radix-ui/react-slot": "^1.0.2", "@storybook/client-logger": "workspace:*", - "@storybook/csf": "0.1.10--canary.d841bb4.0", + "@storybook/csf": "0.1.10--canary.99.ba76785.0", "@storybook/global": "^5.0.0", "@storybook/icons": "^1.2.5", "@storybook/theming": "workspace:*", diff --git a/code/yarn.lock b/code/yarn.lock index 3afc12623ca..1285c190ba0 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -5307,7 +5307,7 @@ __metadata: dependencies: "@storybook/client-logger": "workspace:*" "@storybook/core-events": "workspace:*" - "@storybook/csf": "npm:0.1.10--canary.d841bb4.0" + "@storybook/csf": "npm:0.1.10--canary.99.ba76785.0" "@storybook/global": "npm:^5.0.0" "@storybook/manager-api": "workspace:*" "@storybook/preview-api": "workspace:*" @@ -5574,7 +5574,7 @@ __metadata: "@storybook/client-logger": "workspace:*" "@storybook/components": "workspace:*" "@storybook/core-events": "workspace:*" - "@storybook/csf": "npm:0.1.10--canary.d841bb4.0" + "@storybook/csf": "npm:0.1.10--canary.99.ba76785.0" "@storybook/docs-tools": "workspace:*" "@storybook/global": "npm:^5.0.0" "@storybook/icons": "npm:^1.2.5" @@ -5804,7 +5804,7 @@ __metadata: "@babel/core": "npm:^7.24.4" "@babel/preset-env": "npm:^7.24.4" "@babel/types": "npm:^7.24.0" - "@storybook/csf": "npm:0.1.10--canary.d841bb4.0" + "@storybook/csf": "npm:0.1.10--canary.99.ba76785.0" "@storybook/csf-tools": "workspace:*" "@storybook/node-logger": "workspace:*" "@storybook/types": "workspace:*" @@ -5841,7 +5841,7 @@ __metadata: "@radix-ui/react-scroll-area": "npm:^1.0.5" "@radix-ui/react-slot": "npm:^1.0.2" "@storybook/client-logger": "workspace:*" - "@storybook/csf": "npm:0.1.10--canary.d841bb4.0" + "@storybook/csf": "npm:0.1.10--canary.99.ba76785.0" "@storybook/global": "npm:^5.0.0" "@storybook/icons": "npm:^1.2.5" "@storybook/test": "workspace:*" @@ -5924,7 +5924,7 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/core-events@workspace:lib/core-events" dependencies: - "@storybook/csf": "npm:0.1.10--canary.d841bb4.0" + "@storybook/csf": "npm:0.1.10--canary.99.ba76785.0" chalk: "npm:^4.1.0" ts-dedent: "npm:^2.0.0" typescript: "npm:^5.3.2" @@ -5944,7 +5944,7 @@ __metadata: "@storybook/channels": "workspace:*" "@storybook/core-common": "workspace:*" "@storybook/core-events": "workspace:*" - "@storybook/csf": "npm:0.1.10--canary.d841bb4.0" + "@storybook/csf": "npm:0.1.10--canary.99.ba76785.0" "@storybook/csf-tools": "workspace:*" "@storybook/docs-mdx": "npm:3.1.0-next.0" "@storybook/global": "npm:^5.0.0" @@ -6026,7 +6026,7 @@ __metadata: "@babel/parser": "npm:^7.24.4" "@babel/traverse": "npm:^7.24.1" "@babel/types": "npm:^7.24.0" - "@storybook/csf": "npm:0.1.10--canary.d841bb4.0" + "@storybook/csf": "npm:0.1.10--canary.99.ba76785.0" "@storybook/types": "workspace:*" "@types/fs-extra": "npm:^11.0.1" "@types/js-yaml": "npm:^4.0.5" @@ -6038,12 +6038,12 @@ __metadata: languageName: unknown linkType: soft -"@storybook/csf@npm:0.1.10--canary.d841bb4.0": - version: 0.1.10--canary.d841bb4.0 - resolution: "@storybook/csf@npm:0.1.10--canary.d841bb4.0" +"@storybook/csf@npm:0.1.10--canary.99.ba76785.0": + version: 0.1.10--canary.99.ba76785.0 + resolution: "@storybook/csf@npm:0.1.10--canary.99.ba76785.0" dependencies: type-fest: "npm:^2.19.0" - checksum: 10c0/35a9b5cf88a3378fb362d0a1988265ec218aa98d54b82b56e78a4c1142b3beed6e2ee42bd8731bac009fd8133e085c92af43541028468865b51c0b1220ded338 + checksum: 10c0/8c99e2e1d458d69fbe8156ee6da22f3b9365cb3cb7051f051c1aa3cbd819033112decf16f2a4263163cedf8a6729a382ac82e77e9d704fbae498493788508d2c languageName: node linkType: hard @@ -6225,7 +6225,7 @@ __metadata: "@storybook/channels": "workspace:*" "@storybook/client-logger": "workspace:*" "@storybook/core-events": "workspace:*" - "@storybook/csf": "npm:0.1.10--canary.d841bb4.0" + "@storybook/csf": "npm:0.1.10--canary.99.ba76785.0" "@storybook/global": "npm:^5.0.0" "@storybook/icons": "npm:^1.2.5" "@storybook/router": "workspace:*" @@ -6565,7 +6565,7 @@ __metadata: "@storybook/client-logger": "workspace:*" "@storybook/core-common": "workspace:*" "@storybook/core-events": "workspace:*" - "@storybook/csf": "npm:0.1.10--canary.d841bb4.0" + "@storybook/csf": "npm:0.1.10--canary.99.ba76785.0" "@storybook/global": "npm:^5.0.0" "@storybook/types": "workspace:*" "@types/qs": "npm:^6.9.5" @@ -6752,7 +6752,7 @@ __metadata: "@storybook/core-events": "workspace:*" "@storybook/core-server": "workspace:*" "@storybook/core-webpack": "workspace:*" - "@storybook/csf": "npm:0.1.10--canary.d841bb4.0" + "@storybook/csf": "npm:0.1.10--canary.99.ba76785.0" "@storybook/csf-plugin": "workspace:*" "@storybook/csf-tools": "workspace:*" "@storybook/docs-tools": "workspace:*" @@ -6904,7 +6904,7 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/server@workspace:renderers/server" dependencies: - "@storybook/csf": "npm:0.1.10--canary.d841bb4.0" + "@storybook/csf": "npm:0.1.10--canary.99.ba76785.0" "@storybook/csf-tools": "workspace:*" "@storybook/global": "npm:^5.0.0" "@storybook/preview-api": "workspace:*" @@ -6921,7 +6921,7 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/source-loader@workspace:lib/source-loader" dependencies: - "@storybook/csf": "npm:0.1.10--canary.d841bb4.0" + "@storybook/csf": "npm:0.1.10--canary.99.ba76785.0" "@storybook/types": "workspace:*" estraverse: "npm:^5.2.0" lodash: "npm:^4.17.21" @@ -7091,7 +7091,7 @@ __metadata: resolution: "@storybook/types@workspace:lib/types" dependencies: "@storybook/channels": "workspace:*" - "@storybook/csf": "npm:0.1.10--canary.d841bb4.0" + "@storybook/csf": "npm:0.1.10--canary.99.ba76785.0" "@types/express": "npm:^4.17.21" "@types/fs-extra": "npm:^11.0.1" "@types/node": "npm:^18.0.0" From 9bdf213d8d4ec896bf344bb4ff6eef007a9a42bb Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Thu, 27 Jun 2024 15:43:51 +0200 Subject: [PATCH 03/16] Fix type issue --- code/ui/blocks/src/blocks/Source.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/ui/blocks/src/blocks/Source.tsx b/code/ui/blocks/src/blocks/Source.tsx index 59906aa77c4..a59b4c02332 100644 --- a/code/ui/blocks/src/blocks/Source.tsx +++ b/code/ui/blocks/src/blocks/Source.tsx @@ -75,7 +75,7 @@ const getSnippet = ({ transformFromProps, }: { snippet: string; - storyContext: StoryContextForLoaders; + storyContext: ReturnType; typeFromProps: SourceType; transformFromProps?: SourceProps['transform']; }): string => { From a7bd8d31ed5395a5c56a7aefd9cc6a2215234044 Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Thu, 27 Jun 2024 15:44:50 +0200 Subject: [PATCH 04/16] Don't prebundle @storybook/csf as module augmentation fails that way --- .../stories/docspage/autoplay.stories.ts | 10 +++---- .../template/stories/basics.stories.ts | 27 +++++++------------ code/lib/test/package.json | 1 + code/lib/test/src/index.ts | 2 +- .../test/template/stories/canvas.stories.ts | 17 ++++++++++++ code/lib/types/package.json | 4 +-- .../blocks/src/controls/Boolean.stories.tsx | 5 ++-- 7 files changed, 37 insertions(+), 29 deletions(-) create mode 100644 code/lib/test/template/stories/canvas.stories.ts diff --git a/code/addons/docs/template/stories/docspage/autoplay.stories.ts b/code/addons/docs/template/stories/docspage/autoplay.stories.ts index 6ebdc43b3ad..0a16abc4290 100644 --- a/code/addons/docs/template/stories/docspage/autoplay.stories.ts +++ b/code/addons/docs/template/stories/docspage/autoplay.stories.ts @@ -1,5 +1,5 @@ import { global as globalThis } from '@storybook/global'; -import { expect, within } from '@storybook/test'; +import { expect } from '@storybook/test'; export default { component: globalThis.Components.Pre, @@ -10,8 +10,8 @@ export default { // Should not autoplay export const NoAutoplay = { - play: async ({ viewMode, canvasElement }) => { - const pre = await within(canvasElement).findByText('Play has not run'); + play: async ({ viewMode, canvas }) => { + const pre = await canvas.findByText('Play has not run'); if (viewMode === 'docs') { pre.innerText = 'Play should not have run!'; // Sort of pointless @@ -25,8 +25,8 @@ export const NoAutoplay = { // Should autoplay export const Autoplay = { parameters: { docs: { story: { autoplay: true } } }, - play: async ({ canvasElement }) => { - const pre = await within(canvasElement).findByText('Play has not run'); + play: async ({ canvas }) => { + const pre = await canvas.findByText('Play has not run'); pre.innerText = 'Play has run'; }, }; diff --git a/code/addons/interactions/template/stories/basics.stories.ts b/code/addons/interactions/template/stories/basics.stories.ts index cf6e34eddf2..b04817bb42d 100644 --- a/code/addons/interactions/template/stories/basics.stories.ts +++ b/code/addons/interactions/template/stories/basics.stories.ts @@ -1,12 +1,11 @@ import { global as globalThis } from '@storybook/global'; import { expect, - fn, fireEvent, + fn, userEvent, waitFor, waitForElementToBeRemoved, - within, } from '@storybook/test'; export default { @@ -18,8 +17,7 @@ export default { export const Validation = { play: async (context) => { - const { args, canvasElement, step } = context; - const canvas = within(canvasElement); + const { args, canvas, step } = context; await step('Submit', async () => fireEvent.click(canvas.getByRole('button'))); @@ -28,8 +26,7 @@ export const Validation = { }; export const Type = { - play: async ({ canvasElement }) => { - const canvas = within(canvasElement); + play: async ({ canvas }) => { await userEvent.type(canvas.getByTestId('value'), 'foobar'); }, }; @@ -41,8 +38,7 @@ export const Step = { }; export const TypeAndClear = { - play: async ({ canvasElement }) => { - const canvas = within(canvasElement); + play: async ({ canvas }) => { await userEvent.type(canvas.getByTestId('value'), 'initial value'); await userEvent.clear(canvas.getByTestId('value')); await userEvent.type(canvas.getByTestId('value'), 'final value'); @@ -50,8 +46,7 @@ export const TypeAndClear = { }; export const Callback = { - play: async ({ args, canvasElement, step }) => { - const canvas = within(canvasElement); + play: async ({ args, canvas, step }) => { await step('Enter value', Type.play); await step('Submit', async () => { @@ -65,24 +60,21 @@ export const Callback = { // NOTE: of course you can use `findByText()` to implicitly waitFor, but we want // an explicit test here export const SyncWaitFor = { - play: async ({ canvasElement, step }) => { - const canvas = within(canvasElement); + play: async ({ canvas, step }) => { await step('Submit form', Callback.play); await waitFor(() => canvas.getByText('Completed!!')); }, }; export const AsyncWaitFor = { - play: async ({ canvasElement, step }) => { - const canvas = within(canvasElement); + play: async ({ canvas, step }) => { await step('Submit form', Callback.play); await waitFor(async () => canvas.getByText('Completed!!')); }, }; export const WaitForElementToBeRemoved = { - play: async ({ canvasElement, step }) => { - const canvas = within(canvasElement); + play: async ({ canvas, step }) => { await step('SyncWaitFor play fn', SyncWaitFor.play); await waitForElementToBeRemoved(() => canvas.queryByText('Completed!!'), { timeout: 2000, @@ -99,9 +91,8 @@ export const WithLoaders = { export const UserEventSetup = { play: async (context) => { - const { args, canvasElement, step } = context; + const { args, canvas, step } = context; const user = userEvent.setup(); - const canvas = within(canvasElement); await step('Select and type on input using user-event v14 setup', async () => { const input = canvas.getByRole('textbox'); await user.click(input); diff --git a/code/lib/test/package.json b/code/lib/test/package.json index c037ed4b622..6c03c4fa072 100644 --- a/code/lib/test/package.json +++ b/code/lib/test/package.json @@ -48,6 +48,7 @@ "@storybook/core-events": "workspace:*", "@storybook/instrumenter": "workspace:*", "@storybook/preview-api": "workspace:*", + "@storybook/csf": "0.1.10--canary.99.ba76785.0", "@testing-library/dom": "10.1.0", "@testing-library/jest-dom": "6.4.5", "@testing-library/user-event": "14.5.2", diff --git a/code/lib/test/src/index.ts b/code/lib/test/src/index.ts index 0514d612705..a9d30c86b56 100644 --- a/code/lib/test/src/index.ts +++ b/code/lib/test/src/index.ts @@ -17,7 +17,7 @@ export * from './spy'; type Queries = ReturnType>; -declare module '@storybook/types' { +declare module '@storybook/csf' { interface Canvas extends Queries {} } diff --git a/code/lib/test/template/stories/canvas.stories.ts b/code/lib/test/template/stories/canvas.stories.ts new file mode 100644 index 00000000000..a8aca3b8108 --- /dev/null +++ b/code/lib/test/template/stories/canvas.stories.ts @@ -0,0 +1,17 @@ +/* eslint-disable @typescript-eslint/naming-convention,storybook/prefer-pascal-case */ +import { expect, within } from '@storybook/test'; + +const meta = { + component: globalThis.Components.Button, + args: { label: 'Button' }, +}; + +export default meta; + +export const canvas_is_equal_to_within_canvas_element = { + parameters: { chromatic: { disable: true } }, + async play({ canvas, canvasElement }) { + const oldCanvas = within(canvasElement); + await expect(canvas satisfies typeof oldCanvas).toEqual(within(canvasElement)); + }, +}; diff --git a/code/lib/types/package.json b/code/lib/types/package.json index d9221ee98d0..4df3847c154 100644 --- a/code/lib/types/package.json +++ b/code/lib/types/package.json @@ -46,10 +46,10 @@ "dependencies": { "@storybook/channels": "workspace:*", "@types/express": "^4.17.21", - "file-system-cache": "2.3.0" + "file-system-cache": "2.3.0", + "@storybook/csf": "0.1.10--canary.99.ba76785.0" }, "devDependencies": { - "@storybook/csf": "0.1.10--canary.99.ba76785.0", "@types/fs-extra": "^11.0.1", "@types/node": "^18.0.0", "typescript": "^5.3.2" diff --git a/code/ui/blocks/src/controls/Boolean.stories.tsx b/code/ui/blocks/src/controls/Boolean.stories.tsx index 4629f2cc364..398fce9aa8a 100644 --- a/code/ui/blocks/src/controls/Boolean.stories.tsx +++ b/code/ui/blocks/src/controls/Boolean.stories.tsx @@ -1,5 +1,5 @@ import type { Meta, StoryObj } from '@storybook/react'; -import { within, fireEvent, waitFor, expect, fn } from '@storybook/test'; +import { expect, fireEvent, fn, waitFor } from '@storybook/test'; import { addons } from '@storybook/preview-api'; import { RESET_STORY_ARGS, STORY_ARGS_UPDATED } from '@storybook/core-events'; import { BooleanControl } from './Boolean'; @@ -48,7 +48,7 @@ export const Toggling: Story = { value: undefined, name: 'Toggling', }, - play: async ({ canvasElement, id, args, step }) => { + play: async ({ canvas, id, args, step }) => { const channel = addons.getChannel(); channel.emit(RESET_STORY_ARGS, { storyId: id }); @@ -56,7 +56,6 @@ export const Toggling: Story = { channel.once(STORY_ARGS_UPDATED, resolve); }); - const canvas = within(canvasElement); await step('Change from Undefined to False', async () => { const setBooleanControl = canvas.getByText('Set boolean'); await fireEvent.click(setBooleanControl); From 281b1b3fbd28acf98287195fa9912ad8129ed6e4 Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Thu, 27 Jun 2024 16:49:10 +0200 Subject: [PATCH 05/16] Fix yarn lock --- code/lib/test/package.json | 2 +- code/lib/types/package.json | 4 ++-- code/yarn.lock | 1 + 3 files changed, 4 insertions(+), 3 deletions(-) diff --git a/code/lib/test/package.json b/code/lib/test/package.json index 6c03c4fa072..46bfcbf7692 100644 --- a/code/lib/test/package.json +++ b/code/lib/test/package.json @@ -46,9 +46,9 @@ "dependencies": { "@storybook/client-logger": "workspace:*", "@storybook/core-events": "workspace:*", + "@storybook/csf": "0.1.10--canary.99.ba76785.0", "@storybook/instrumenter": "workspace:*", "@storybook/preview-api": "workspace:*", - "@storybook/csf": "0.1.10--canary.99.ba76785.0", "@testing-library/dom": "10.1.0", "@testing-library/jest-dom": "6.4.5", "@testing-library/user-event": "14.5.2", diff --git a/code/lib/types/package.json b/code/lib/types/package.json index 4df3847c154..69003ce4601 100644 --- a/code/lib/types/package.json +++ b/code/lib/types/package.json @@ -45,9 +45,9 @@ }, "dependencies": { "@storybook/channels": "workspace:*", + "@storybook/csf": "0.1.10--canary.99.ba76785.0", "@types/express": "^4.17.21", - "file-system-cache": "2.3.0", - "@storybook/csf": "0.1.10--canary.99.ba76785.0" + "file-system-cache": "2.3.0" }, "devDependencies": { "@types/fs-extra": "^11.0.1", diff --git a/code/yarn.lock b/code/yarn.lock index 66b7e366d7e..f05e31d6cb3 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -7041,6 +7041,7 @@ __metadata: dependencies: "@storybook/client-logger": "workspace:*" "@storybook/core-events": "workspace:*" + "@storybook/csf": "npm:0.1.10--canary.99.ba76785.0" "@storybook/instrumenter": "workspace:*" "@storybook/preview-api": "workspace:*" "@testing-library/dom": "npm:10.1.0" From 53cae2db8363184e4ea3480816f7ccafa7a2449a Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Fri, 28 Jun 2024 10:41:49 +0200 Subject: [PATCH 06/16] Add userEvent as well, closes #17988 --- .../src/components/Interaction.stories.tsx | 5 ++--- .../src/components/InteractionsPanel.stories.tsx | 5 ++--- .../template/stories/unhandled-errors.stories.ts | 4 +--- code/lib/test/src/index.ts | 10 +++++++--- ...anvas.stories.ts => loader-enhancements.stories.ts} | 10 ++++++++-- .../components/mobile/about/MobileAbout.stories.tsx | 5 ++--- .../ui/manager/src/components/sidebar/Menu.stories.tsx | 5 ++--- .../manager/src/components/sidebar/Sidebar.stories.tsx | 7 +++---- 8 files changed, 27 insertions(+), 24 deletions(-) rename code/lib/test/template/stories/{canvas.stories.ts => loader-enhancements.stories.ts} (63%) diff --git a/code/addons/interactions/src/components/Interaction.stories.tsx b/code/addons/interactions/src/components/Interaction.stories.tsx index a6f8bd3a3b4..b58ccc9270e 100644 --- a/code/addons/interactions/src/components/Interaction.stories.tsx +++ b/code/addons/interactions/src/components/Interaction.stories.tsx @@ -1,6 +1,6 @@ import type { StoryObj, Meta } from '@storybook/react'; import { CallStates } from '@storybook/instrumenter'; -import { userEvent, within, expect } from '@storybook/test'; +import { expect } from '@storybook/test'; import { getCalls } from '../mocks'; import { Interaction } from './Interaction'; @@ -58,8 +58,7 @@ export const Hovered: Story = { // Set light theme to avoid stacked theme in chromatic theme: 'light', }, - play: async ({ canvasElement }) => { - const canvas = within(canvasElement); + play: async ({ canvas, userEvent }) => { await userEvent.hover(canvas.getByRole('button')); await expect(canvas.getByTestId('icon-active')).toBeInTheDocument(); }, diff --git a/code/addons/interactions/src/components/InteractionsPanel.stories.tsx b/code/addons/interactions/src/components/InteractionsPanel.stories.tsx index 65d16a1b68a..6dd3bcca5e2 100644 --- a/code/addons/interactions/src/components/InteractionsPanel.stories.tsx +++ b/code/addons/interactions/src/components/InteractionsPanel.stories.tsx @@ -2,7 +2,7 @@ import React from 'react'; import type { StoryObj, Meta } from '@storybook/react'; import { CallStates } from '@storybook/instrumenter'; import { styled } from '@storybook/theming'; -import { userEvent, within, waitFor, expect } from '@storybook/test'; +import { waitFor, expect } from '@storybook/test'; import { isChromatic } from '../../../../ui/.storybook/isChromatic'; import { getCalls, getInteractions } from '../mocks'; @@ -61,9 +61,8 @@ export const Passing: Story = { interactions: getInteractions(CallStates.DONE), }, }; -Passing.play = async ({ args, canvasElement }) => { +Passing.play = async ({ args, canvas, userEvent }) => { if (isChromatic()) return; - const canvas = within(canvasElement); await waitFor(async () => { await userEvent.click(canvas.getByLabelText('Go to start')); diff --git a/code/addons/interactions/template/stories/unhandled-errors.stories.ts b/code/addons/interactions/template/stories/unhandled-errors.stories.ts index 336c44b72f3..3717ce31756 100644 --- a/code/addons/interactions/template/stories/unhandled-errors.stories.ts +++ b/code/addons/interactions/template/stories/unhandled-errors.stories.ts @@ -1,5 +1,4 @@ import { global as globalThis } from '@storybook/global'; -import { userEvent, within } from '@storybook/test'; export default { component: globalThis.Components.Button, @@ -17,8 +16,7 @@ export default { export const Default = { play: async (context) => { - const { args, canvasElement } = context; - const canvas = within(canvasElement); + const { userEvent, canvas } = context; await userEvent.click(canvas.getByRole('button')); }, }; diff --git a/code/lib/test/src/index.ts b/code/lib/test/src/index.ts index a9d30c86b56..34a00911e16 100644 --- a/code/lib/test/src/index.ts +++ b/code/lib/test/src/index.ts @@ -11,7 +11,7 @@ import { resetAllMocks, restoreAllMocks, } from './spy'; -import { type queries, within } from './testing-library'; +import { type queries, within, userEvent } from './testing-library'; export * from './spy'; @@ -19,6 +19,9 @@ type Queries = ReturnType>; declare module '@storybook/csf' { interface Canvas extends Queries {} + interface StoryContext { + userEvent: ReturnType; + } } export const { expect } = instrument( @@ -94,9 +97,10 @@ const nameSpiesAndWrapActionsInSpies: LoaderFunction = ({ initialArgs }) => { traverseArgs(initialArgs); }; -const addCanvas: LoaderFunction = (context) => { +const enhanceContext: LoaderFunction = (context) => { if (globalThis.HTMLElement && context.canvasElement instanceof globalThis.HTMLElement) { context.canvas = within(context.canvasElement); + context.userEvent = userEvent.setup(); } }; @@ -105,7 +109,7 @@ const addCanvas: LoaderFunction = (context) => { (global as any).__STORYBOOK_TEST_LOADERS__ = [ resetAllMocksLoader, nameSpiesAndWrapActionsInSpies, - addCanvas, + enhanceContext, ]; // eslint-disable-next-line no-underscore-dangle (global as any).__STORYBOOK_TEST_ON_MOCK_CALL__ = onMockCall; diff --git a/code/lib/test/template/stories/canvas.stories.ts b/code/lib/test/template/stories/loader-enhancements.stories.ts similarity index 63% rename from code/lib/test/template/stories/canvas.stories.ts rename to code/lib/test/template/stories/loader-enhancements.stories.ts index a8aca3b8108..0541325ef53 100644 --- a/code/lib/test/template/stories/canvas.stories.ts +++ b/code/lib/test/template/stories/loader-enhancements.stories.ts @@ -1,17 +1,23 @@ /* eslint-disable @typescript-eslint/naming-convention,storybook/prefer-pascal-case */ -import { expect, within } from '@storybook/test'; +import { expect, within, userEvent as globalUserEvent } from '@storybook/test'; const meta = { component: globalThis.Components.Button, + parameters: { chromatic: { disable: true } }, args: { label: 'Button' }, }; export default meta; export const canvas_is_equal_to_within_canvas_element = { - parameters: { chromatic: { disable: true } }, async play({ canvas, canvasElement }) { const oldCanvas = within(canvasElement); await expect(canvas satisfies typeof oldCanvas).toEqual(within(canvasElement)); }, }; + +export const context_user_event_is_equal_to_user_event_setup = { + async play({ userEvent }) { + await expect(userEvent satisfies typeof globalUserEvent).toEqual(globalUserEvent.setup()); + }, +}; diff --git a/code/ui/manager/src/components/mobile/about/MobileAbout.stories.tsx b/code/ui/manager/src/components/mobile/about/MobileAbout.stories.tsx index b36e2e0854f..cdf9853166c 100644 --- a/code/ui/manager/src/components/mobile/about/MobileAbout.stories.tsx +++ b/code/ui/manager/src/components/mobile/about/MobileAbout.stories.tsx @@ -1,7 +1,6 @@ import type { Meta, StoryObj } from '@storybook/react'; import { ManagerContext } from '@storybook/manager-api'; import React, { useEffect } from 'react'; -import { within } from '@storybook/test'; import { MobileAbout } from './MobileAbout'; import { LayoutProvider, useLayout } from '../../layout/LayoutProvider'; @@ -60,9 +59,9 @@ export const Dark: Story = { }; export const Closed: Story = { - play: async ({ canvasElement }) => { + play: async ({ canvas }) => { await new Promise((resolve) => setTimeout(resolve, 1000)); - const closeButton = await within(canvasElement).getByTitle('Close about section'); + const closeButton = await canvas.getByTitle('Close about section'); await closeButton.click(); }, }; diff --git a/code/ui/manager/src/components/sidebar/Menu.stories.tsx b/code/ui/manager/src/components/sidebar/Menu.stories.tsx index ca57b4780a6..972b93c6384 100644 --- a/code/ui/manager/src/components/sidebar/Menu.stories.tsx +++ b/code/ui/manager/src/components/sidebar/Menu.stories.tsx @@ -4,7 +4,7 @@ import type { Meta, StoryObj } from '@storybook/react'; import { TooltipLinkList } from '@storybook/components'; import { styled } from '@storybook/theming'; -import { screen, userEvent, within, expect } from '@storybook/test'; +import { screen, within, expect } from '@storybook/test'; import type { State } from '@storybook/manager-api'; import { LinkIcon } from '@storybook/icons'; import { SidebarMenu } from './Menu'; @@ -69,8 +69,7 @@ export const Expanded: Story = { ); }, - play: async ({ canvasElement }) => { - const canvas = within(canvasElement); + play: async ({ canvas, userEvent }) => { await new Promise((res) => { setTimeout(res, 500); }); diff --git a/code/ui/manager/src/components/sidebar/Sidebar.stories.tsx b/code/ui/manager/src/components/sidebar/Sidebar.stories.tsx index 6d49c03923b..4d0f68e6777 100644 --- a/code/ui/manager/src/components/sidebar/Sidebar.stories.tsx +++ b/code/ui/manager/src/components/sidebar/Sidebar.stories.tsx @@ -3,7 +3,7 @@ import React from 'react'; import type { IndexHash, State } from '@storybook/manager-api'; import { ManagerContext, types } from '@storybook/manager-api'; import type { StoryObj, Meta } from '@storybook/react'; -import { within, userEvent, expect, fn } from '@storybook/test'; +import { within, expect, fn } from '@storybook/test'; import type { Addon_SidebarTopType } from '@storybook/types'; import { Button, IconButton } from '@storybook/components'; import { FaceHappyIcon } from '@storybook/icons'; @@ -207,7 +207,7 @@ export const StatusesOpen: Story = { export const Searching: Story = { ...StatusesOpen, parameters: { chromatic: { delay: 2200 } }, - play: async ({ canvasElement, step }) => { + play: async ({ canvasElement, step, userEvent }) => { await step('wait 2000ms', () => wait(2000)); const canvas = await within(canvasElement); const search = await canvas.findByPlaceholderText('Find components'); @@ -286,8 +286,7 @@ export const Scrolled: Story = { ); }, - play: async ({ canvasElement, step }) => { - const canvas = await within(canvasElement); + play: async ({ canvasElement, canvas, step, userEvent }) => { const scrollable = await canvasElement.querySelector('[data-radix-scroll-area-viewport]'); await step('expand component', async () => { const componentNode = await canvas.queryAllByText('Child A2')[1]; From 1c4cacf7dfcbe00d82b89af96e5171269eb40298 Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Fri, 28 Jun 2024 11:50:07 +0200 Subject: [PATCH 07/16] Rollback --- .../stories/docspage/autoplay.stories.ts | 10 +++---- .../src/components/Interaction.stories.tsx | 5 ++-- .../components/InteractionsPanel.stories.tsx | 5 ++-- .../template/stories/basics.stories.ts | 27 ++++++++++++------- .../stories/unhandled-errors.stories.ts | 4 ++- .../blocks/src/controls/Boolean.stories.tsx | 5 ++-- .../mobile/about/MobileAbout.stories.tsx | 5 ++-- .../src/components/sidebar/Menu.stories.tsx | 5 ++-- .../components/sidebar/Sidebar.stories.tsx | 7 ++--- 9 files changed, 45 insertions(+), 28 deletions(-) diff --git a/code/addons/docs/template/stories/docspage/autoplay.stories.ts b/code/addons/docs/template/stories/docspage/autoplay.stories.ts index 0a16abc4290..6ebdc43b3ad 100644 --- a/code/addons/docs/template/stories/docspage/autoplay.stories.ts +++ b/code/addons/docs/template/stories/docspage/autoplay.stories.ts @@ -1,5 +1,5 @@ import { global as globalThis } from '@storybook/global'; -import { expect } from '@storybook/test'; +import { expect, within } from '@storybook/test'; export default { component: globalThis.Components.Pre, @@ -10,8 +10,8 @@ export default { // Should not autoplay export const NoAutoplay = { - play: async ({ viewMode, canvas }) => { - const pre = await canvas.findByText('Play has not run'); + play: async ({ viewMode, canvasElement }) => { + const pre = await within(canvasElement).findByText('Play has not run'); if (viewMode === 'docs') { pre.innerText = 'Play should not have run!'; // Sort of pointless @@ -25,8 +25,8 @@ export const NoAutoplay = { // Should autoplay export const Autoplay = { parameters: { docs: { story: { autoplay: true } } }, - play: async ({ canvas }) => { - const pre = await canvas.findByText('Play has not run'); + play: async ({ canvasElement }) => { + const pre = await within(canvasElement).findByText('Play has not run'); pre.innerText = 'Play has run'; }, }; diff --git a/code/addons/interactions/src/components/Interaction.stories.tsx b/code/addons/interactions/src/components/Interaction.stories.tsx index b58ccc9270e..a6f8bd3a3b4 100644 --- a/code/addons/interactions/src/components/Interaction.stories.tsx +++ b/code/addons/interactions/src/components/Interaction.stories.tsx @@ -1,6 +1,6 @@ import type { StoryObj, Meta } from '@storybook/react'; import { CallStates } from '@storybook/instrumenter'; -import { expect } from '@storybook/test'; +import { userEvent, within, expect } from '@storybook/test'; import { getCalls } from '../mocks'; import { Interaction } from './Interaction'; @@ -58,7 +58,8 @@ export const Hovered: Story = { // Set light theme to avoid stacked theme in chromatic theme: 'light', }, - play: async ({ canvas, userEvent }) => { + play: async ({ canvasElement }) => { + const canvas = within(canvasElement); await userEvent.hover(canvas.getByRole('button')); await expect(canvas.getByTestId('icon-active')).toBeInTheDocument(); }, diff --git a/code/addons/interactions/src/components/InteractionsPanel.stories.tsx b/code/addons/interactions/src/components/InteractionsPanel.stories.tsx index 6dd3bcca5e2..65d16a1b68a 100644 --- a/code/addons/interactions/src/components/InteractionsPanel.stories.tsx +++ b/code/addons/interactions/src/components/InteractionsPanel.stories.tsx @@ -2,7 +2,7 @@ import React from 'react'; import type { StoryObj, Meta } from '@storybook/react'; import { CallStates } from '@storybook/instrumenter'; import { styled } from '@storybook/theming'; -import { waitFor, expect } from '@storybook/test'; +import { userEvent, within, waitFor, expect } from '@storybook/test'; import { isChromatic } from '../../../../ui/.storybook/isChromatic'; import { getCalls, getInteractions } from '../mocks'; @@ -61,8 +61,9 @@ export const Passing: Story = { interactions: getInteractions(CallStates.DONE), }, }; -Passing.play = async ({ args, canvas, userEvent }) => { +Passing.play = async ({ args, canvasElement }) => { if (isChromatic()) return; + const canvas = within(canvasElement); await waitFor(async () => { await userEvent.click(canvas.getByLabelText('Go to start')); diff --git a/code/addons/interactions/template/stories/basics.stories.ts b/code/addons/interactions/template/stories/basics.stories.ts index b04817bb42d..cf6e34eddf2 100644 --- a/code/addons/interactions/template/stories/basics.stories.ts +++ b/code/addons/interactions/template/stories/basics.stories.ts @@ -1,11 +1,12 @@ import { global as globalThis } from '@storybook/global'; import { expect, - fireEvent, fn, + fireEvent, userEvent, waitFor, waitForElementToBeRemoved, + within, } from '@storybook/test'; export default { @@ -17,7 +18,8 @@ export default { export const Validation = { play: async (context) => { - const { args, canvas, step } = context; + const { args, canvasElement, step } = context; + const canvas = within(canvasElement); await step('Submit', async () => fireEvent.click(canvas.getByRole('button'))); @@ -26,7 +28,8 @@ export const Validation = { }; export const Type = { - play: async ({ canvas }) => { + play: async ({ canvasElement }) => { + const canvas = within(canvasElement); await userEvent.type(canvas.getByTestId('value'), 'foobar'); }, }; @@ -38,7 +41,8 @@ export const Step = { }; export const TypeAndClear = { - play: async ({ canvas }) => { + play: async ({ canvasElement }) => { + const canvas = within(canvasElement); await userEvent.type(canvas.getByTestId('value'), 'initial value'); await userEvent.clear(canvas.getByTestId('value')); await userEvent.type(canvas.getByTestId('value'), 'final value'); @@ -46,7 +50,8 @@ export const TypeAndClear = { }; export const Callback = { - play: async ({ args, canvas, step }) => { + play: async ({ args, canvasElement, step }) => { + const canvas = within(canvasElement); await step('Enter value', Type.play); await step('Submit', async () => { @@ -60,21 +65,24 @@ export const Callback = { // NOTE: of course you can use `findByText()` to implicitly waitFor, but we want // an explicit test here export const SyncWaitFor = { - play: async ({ canvas, step }) => { + play: async ({ canvasElement, step }) => { + const canvas = within(canvasElement); await step('Submit form', Callback.play); await waitFor(() => canvas.getByText('Completed!!')); }, }; export const AsyncWaitFor = { - play: async ({ canvas, step }) => { + play: async ({ canvasElement, step }) => { + const canvas = within(canvasElement); await step('Submit form', Callback.play); await waitFor(async () => canvas.getByText('Completed!!')); }, }; export const WaitForElementToBeRemoved = { - play: async ({ canvas, step }) => { + play: async ({ canvasElement, step }) => { + const canvas = within(canvasElement); await step('SyncWaitFor play fn', SyncWaitFor.play); await waitForElementToBeRemoved(() => canvas.queryByText('Completed!!'), { timeout: 2000, @@ -91,8 +99,9 @@ export const WithLoaders = { export const UserEventSetup = { play: async (context) => { - const { args, canvas, step } = context; + const { args, canvasElement, step } = context; const user = userEvent.setup(); + const canvas = within(canvasElement); await step('Select and type on input using user-event v14 setup', async () => { const input = canvas.getByRole('textbox'); await user.click(input); diff --git a/code/addons/interactions/template/stories/unhandled-errors.stories.ts b/code/addons/interactions/template/stories/unhandled-errors.stories.ts index 3717ce31756..336c44b72f3 100644 --- a/code/addons/interactions/template/stories/unhandled-errors.stories.ts +++ b/code/addons/interactions/template/stories/unhandled-errors.stories.ts @@ -1,4 +1,5 @@ import { global as globalThis } from '@storybook/global'; +import { userEvent, within } from '@storybook/test'; export default { component: globalThis.Components.Button, @@ -16,7 +17,8 @@ export default { export const Default = { play: async (context) => { - const { userEvent, canvas } = context; + const { args, canvasElement } = context; + const canvas = within(canvasElement); await userEvent.click(canvas.getByRole('button')); }, }; diff --git a/code/ui/blocks/src/controls/Boolean.stories.tsx b/code/ui/blocks/src/controls/Boolean.stories.tsx index 398fce9aa8a..4629f2cc364 100644 --- a/code/ui/blocks/src/controls/Boolean.stories.tsx +++ b/code/ui/blocks/src/controls/Boolean.stories.tsx @@ -1,5 +1,5 @@ import type { Meta, StoryObj } from '@storybook/react'; -import { expect, fireEvent, fn, waitFor } from '@storybook/test'; +import { within, fireEvent, waitFor, expect, fn } from '@storybook/test'; import { addons } from '@storybook/preview-api'; import { RESET_STORY_ARGS, STORY_ARGS_UPDATED } from '@storybook/core-events'; import { BooleanControl } from './Boolean'; @@ -48,7 +48,7 @@ export const Toggling: Story = { value: undefined, name: 'Toggling', }, - play: async ({ canvas, id, args, step }) => { + play: async ({ canvasElement, id, args, step }) => { const channel = addons.getChannel(); channel.emit(RESET_STORY_ARGS, { storyId: id }); @@ -56,6 +56,7 @@ export const Toggling: Story = { channel.once(STORY_ARGS_UPDATED, resolve); }); + const canvas = within(canvasElement); await step('Change from Undefined to False', async () => { const setBooleanControl = canvas.getByText('Set boolean'); await fireEvent.click(setBooleanControl); diff --git a/code/ui/manager/src/components/mobile/about/MobileAbout.stories.tsx b/code/ui/manager/src/components/mobile/about/MobileAbout.stories.tsx index cdf9853166c..b36e2e0854f 100644 --- a/code/ui/manager/src/components/mobile/about/MobileAbout.stories.tsx +++ b/code/ui/manager/src/components/mobile/about/MobileAbout.stories.tsx @@ -1,6 +1,7 @@ import type { Meta, StoryObj } from '@storybook/react'; import { ManagerContext } from '@storybook/manager-api'; import React, { useEffect } from 'react'; +import { within } from '@storybook/test'; import { MobileAbout } from './MobileAbout'; import { LayoutProvider, useLayout } from '../../layout/LayoutProvider'; @@ -59,9 +60,9 @@ export const Dark: Story = { }; export const Closed: Story = { - play: async ({ canvas }) => { + play: async ({ canvasElement }) => { await new Promise((resolve) => setTimeout(resolve, 1000)); - const closeButton = await canvas.getByTitle('Close about section'); + const closeButton = await within(canvasElement).getByTitle('Close about section'); await closeButton.click(); }, }; diff --git a/code/ui/manager/src/components/sidebar/Menu.stories.tsx b/code/ui/manager/src/components/sidebar/Menu.stories.tsx index 972b93c6384..ca57b4780a6 100644 --- a/code/ui/manager/src/components/sidebar/Menu.stories.tsx +++ b/code/ui/manager/src/components/sidebar/Menu.stories.tsx @@ -4,7 +4,7 @@ import type { Meta, StoryObj } from '@storybook/react'; import { TooltipLinkList } from '@storybook/components'; import { styled } from '@storybook/theming'; -import { screen, within, expect } from '@storybook/test'; +import { screen, userEvent, within, expect } from '@storybook/test'; import type { State } from '@storybook/manager-api'; import { LinkIcon } from '@storybook/icons'; import { SidebarMenu } from './Menu'; @@ -69,7 +69,8 @@ export const Expanded: Story = { ); }, - play: async ({ canvas, userEvent }) => { + play: async ({ canvasElement }) => { + const canvas = within(canvasElement); await new Promise((res) => { setTimeout(res, 500); }); diff --git a/code/ui/manager/src/components/sidebar/Sidebar.stories.tsx b/code/ui/manager/src/components/sidebar/Sidebar.stories.tsx index 4d0f68e6777..6d49c03923b 100644 --- a/code/ui/manager/src/components/sidebar/Sidebar.stories.tsx +++ b/code/ui/manager/src/components/sidebar/Sidebar.stories.tsx @@ -3,7 +3,7 @@ import React from 'react'; import type { IndexHash, State } from '@storybook/manager-api'; import { ManagerContext, types } from '@storybook/manager-api'; import type { StoryObj, Meta } from '@storybook/react'; -import { within, expect, fn } from '@storybook/test'; +import { within, userEvent, expect, fn } from '@storybook/test'; import type { Addon_SidebarTopType } from '@storybook/types'; import { Button, IconButton } from '@storybook/components'; import { FaceHappyIcon } from '@storybook/icons'; @@ -207,7 +207,7 @@ export const StatusesOpen: Story = { export const Searching: Story = { ...StatusesOpen, parameters: { chromatic: { delay: 2200 } }, - play: async ({ canvasElement, step, userEvent }) => { + play: async ({ canvasElement, step }) => { await step('wait 2000ms', () => wait(2000)); const canvas = await within(canvasElement); const search = await canvas.findByPlaceholderText('Find components'); @@ -286,7 +286,8 @@ export const Scrolled: Story = { ); }, - play: async ({ canvasElement, canvas, step, userEvent }) => { + play: async ({ canvasElement, step }) => { + const canvas = await within(canvasElement); const scrollable = await canvasElement.querySelector('[data-radix-scroll-area-viewport]'); await step('expand component', async () => { const componentNode = await canvas.queryAllByText('Child A2')[1]; From 8087ad7ff97f205f4ebdee85369e5cb70905529d Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Fri, 28 Jun 2024 12:18:44 +0200 Subject: [PATCH 08/16] Rollback userEvent --- code/lib/test/src/index.ts | 10 ++++++---- .../template/stories/loader-enhancements.stories.ts | 11 ++++++----- 2 files changed, 12 insertions(+), 9 deletions(-) diff --git a/code/lib/test/src/index.ts b/code/lib/test/src/index.ts index 34a00911e16..aea46596a53 100644 --- a/code/lib/test/src/index.ts +++ b/code/lib/test/src/index.ts @@ -1,5 +1,5 @@ import { instrument } from '@storybook/instrumenter'; -import type { LoaderFunction } from '@storybook/types'; +import type { LoaderFunction } from '@storybook/csf'; import chai from 'chai'; import { global } from '@storybook/global'; import { expect as rawExpect } from './expect'; @@ -11,7 +11,7 @@ import { resetAllMocks, restoreAllMocks, } from './spy'; -import { type queries, within, userEvent } from './testing-library'; +import { type queries, within } from './testing-library'; export * from './spy'; @@ -20,7 +20,8 @@ type Queries = ReturnType>; declare module '@storybook/csf' { interface Canvas extends Queries {} interface StoryContext { - userEvent: ReturnType; + // TODO enable this in a later PR, once we have time to QA this properly + // userEvent: ReturnType; } } @@ -100,7 +101,8 @@ const nameSpiesAndWrapActionsInSpies: LoaderFunction = ({ initialArgs }) => { const enhanceContext: LoaderFunction = (context) => { if (globalThis.HTMLElement && context.canvasElement instanceof globalThis.HTMLElement) { context.canvas = within(context.canvasElement); - context.userEvent = userEvent.setup(); + // TODO enable this in a later PR, once we have time to QA this properly + // context.userEvent = userEvent.setup(); } }; diff --git a/code/lib/test/template/stories/loader-enhancements.stories.ts b/code/lib/test/template/stories/loader-enhancements.stories.ts index 0541325ef53..7b41994f178 100644 --- a/code/lib/test/template/stories/loader-enhancements.stories.ts +++ b/code/lib/test/template/stories/loader-enhancements.stories.ts @@ -16,8 +16,9 @@ export const canvas_is_equal_to_within_canvas_element = { }, }; -export const context_user_event_is_equal_to_user_event_setup = { - async play({ userEvent }) { - await expect(userEvent satisfies typeof globalUserEvent).toEqual(globalUserEvent.setup()); - }, -}; +// TODO enable this in a later PR, once we have time to QA this properly +// export const context_user_event_is_equal_to_user_event_setup = { +// async play({ userEvent }) { +// await expect(userEvent satisfies typeof globalUserEvent).toEqual(globalUserEvent.setup()); +// }, +// }; From b9f4f0401bcc479b27d3250d483e54c7a9a78c31 Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Fri, 28 Jun 2024 14:07:54 +0200 Subject: [PATCH 09/16] Fix test type --- .../preview-api/src/modules/store/csf/prepareStory.test.ts | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/code/lib/preview-api/src/modules/store/csf/prepareStory.test.ts b/code/lib/preview-api/src/modules/store/csf/prepareStory.test.ts index 7818d2bd475..123f682dac5 100644 --- a/code/lib/preview-api/src/modules/store/csf/prepareStory.test.ts +++ b/code/lib/preview-api/src/modules/store/csf/prepareStory.test.ts @@ -49,7 +49,7 @@ export function prepareStory( const addExtraContext = ( context: PreparedStory & Pick ): StoryContext => { - const extraContext = { + const extraContext: StoryContext = { ...context, hooks: new HooksContext(), viewMode: 'story' as const, @@ -57,7 +57,8 @@ const addExtraContext = ( abortSignal: new AbortController().signal, canvasElement: {}, step: vi.fn(), - context: undefined! as StoryContext, + context: null! as StoryContext, + canvas: null!, }; extraContext.context = extraContext; return extraContext; From 5ff5a084ba81083aa69e7ae0aa22e6c2c85f8276 Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Fri, 28 Jun 2024 15:15:14 +0200 Subject: [PATCH 10/16] Fix angular types in test --- code/frameworks/angular/src/client/decorators.test.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/code/frameworks/angular/src/client/decorators.test.ts b/code/frameworks/angular/src/client/decorators.test.ts index f31678fbd0c..d8c9bebe80b 100644 --- a/code/frameworks/angular/src/client/decorators.test.ts +++ b/code/frameworks/angular/src/client/decorators.test.ts @@ -26,6 +26,7 @@ const defaultContext: Addon_StoryContext = { canvasElement: undefined, step: undefined, context: undefined, + canvas: undefined, }; defaultContext.context = defaultContext; From 880e081405ae4bc90c45e3aa3e94fe88bdc1d543 Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Fri, 28 Jun 2024 17:52:13 +0200 Subject: [PATCH 11/16] Update code/lib/test/template/stories/loader-enhancements.stories.ts Co-authored-by: Gert Hengeveld --- code/lib/test/template/stories/loader-enhancements.stories.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/lib/test/template/stories/loader-enhancements.stories.ts b/code/lib/test/template/stories/loader-enhancements.stories.ts index 7b41994f178..997b40e1264 100644 --- a/code/lib/test/template/stories/loader-enhancements.stories.ts +++ b/code/lib/test/template/stories/loader-enhancements.stories.ts @@ -12,7 +12,7 @@ export default meta; export const canvas_is_equal_to_within_canvas_element = { async play({ canvas, canvasElement }) { const oldCanvas = within(canvasElement); - await expect(canvas satisfies typeof oldCanvas).toEqual(within(canvasElement)); + await expect(canvas satisfies typeof oldCanvas).toEqual(oldCanvas); }, }; From 777df33152b35e6e2812fc79b215343cfb2b9fcd Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Tue, 2 Jul 2024 10:19:00 +0200 Subject: [PATCH 12/16] Use stable csf release --- code/addons/links/package.json | 2 +- code/lib/codemod/package.json | 2 +- code/lib/core-events/package.json | 2 +- code/lib/core-server/package.json | 2 +- code/lib/csf-tools/package.json | 2 +- code/lib/manager-api/package.json | 2 +- code/lib/preview-api/package.json | 2 +- code/lib/source-loader/package.json | 2 +- code/lib/test/package.json | 2 +- code/lib/types/package.json | 2 +- code/package.json | 2 +- code/renderers/server/package.json | 2 +- code/ui/blocks/package.json | 2 +- code/ui/components/package.json | 2 +- code/yarn.lock | 36 ++++++++++++++--------------- 15 files changed, 32 insertions(+), 32 deletions(-) diff --git a/code/addons/links/package.json b/code/addons/links/package.json index f9a797a50a9..13d5586606e 100644 --- a/code/addons/links/package.json +++ b/code/addons/links/package.json @@ -67,7 +67,7 @@ "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/addon-bundle.ts" }, "dependencies": { - "@storybook/csf": "0.1.10--canary.99.ba76785.0", + "@storybook/csf": "0.1.10", "@storybook/global": "^5.0.0", "ts-dedent": "^2.0.0" }, diff --git a/code/lib/codemod/package.json b/code/lib/codemod/package.json index d2659f5c935..5ac1e057195 100644 --- a/code/lib/codemod/package.json +++ b/code/lib/codemod/package.json @@ -57,7 +57,7 @@ "@babel/core": "^7.24.4", "@babel/preset-env": "^7.24.4", "@babel/types": "^7.24.0", - "@storybook/csf": "0.1.10--canary.99.ba76785.0", + "@storybook/csf": "0.1.10", "@storybook/csf-tools": "workspace:*", "@storybook/node-logger": "workspace:*", "@storybook/types": "workspace:*", diff --git a/code/lib/core-events/package.json b/code/lib/core-events/package.json index 5617c2595e2..ba465558e31 100644 --- a/code/lib/core-events/package.json +++ b/code/lib/core-events/package.json @@ -78,7 +78,7 @@ "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/csf": "0.1.10--canary.99.ba76785.0", + "@storybook/csf": "0.1.10", "ts-dedent": "^2.0.0" }, "devDependencies": { diff --git a/code/lib/core-server/package.json b/code/lib/core-server/package.json index 5c2e9e94ae5..49ddcb20dde 100644 --- a/code/lib/core-server/package.json +++ b/code/lib/core-server/package.json @@ -63,7 +63,7 @@ "@storybook/channels": "workspace:*", "@storybook/core-common": "workspace:*", "@storybook/core-events": "workspace:*", - "@storybook/csf": "0.1.10--canary.99.ba76785.0", + "@storybook/csf": "0.1.10", "@storybook/csf-tools": "workspace:*", "@storybook/docs-mdx": "3.1.0-next.0", "@storybook/global": "^5.0.0", diff --git a/code/lib/csf-tools/package.json b/code/lib/csf-tools/package.json index 9331c739ff2..0d1d64ab340 100644 --- a/code/lib/csf-tools/package.json +++ b/code/lib/csf-tools/package.json @@ -46,7 +46,7 @@ "@babel/parser": "^7.24.4", "@babel/traverse": "^7.24.1", "@babel/types": "^7.24.0", - "@storybook/csf": "0.1.10--canary.99.ba76785.0", + "@storybook/csf": "0.1.10", "@storybook/types": "workspace:*", "fs-extra": "^11.1.0", "recast": "^0.23.5", diff --git a/code/lib/manager-api/package.json b/code/lib/manager-api/package.json index 9659bd3eab3..7bdfbbfb778 100644 --- a/code/lib/manager-api/package.json +++ b/code/lib/manager-api/package.json @@ -47,7 +47,7 @@ "@storybook/channels": "workspace:*", "@storybook/client-logger": "workspace:*", "@storybook/core-events": "workspace:*", - "@storybook/csf": "0.1.10--canary.99.ba76785.0", + "@storybook/csf": "0.1.10", "@storybook/global": "^5.0.0", "@storybook/icons": "^1.2.5", "@storybook/router": "workspace:*", diff --git a/code/lib/preview-api/package.json b/code/lib/preview-api/package.json index 100ff42fa21..c746b6b800b 100644 --- a/code/lib/preview-api/package.json +++ b/code/lib/preview-api/package.json @@ -47,7 +47,7 @@ "@storybook/channels": "workspace:*", "@storybook/client-logger": "workspace:*", "@storybook/core-events": "workspace:*", - "@storybook/csf": "0.1.10--canary.99.ba76785.0", + "@storybook/csf": "0.1.10", "@storybook/global": "^5.0.0", "@storybook/types": "workspace:*", "@types/qs": "^6.9.5", diff --git a/code/lib/source-loader/package.json b/code/lib/source-loader/package.json index 51e32f84e1b..f054c9c2bb8 100644 --- a/code/lib/source-loader/package.json +++ b/code/lib/source-loader/package.json @@ -45,7 +45,7 @@ "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/csf": "0.1.10--canary.99.ba76785.0", + "@storybook/csf": "0.1.10", "@storybook/types": "workspace:*", "estraverse": "^5.2.0", "lodash": "^4.17.21", diff --git a/code/lib/test/package.json b/code/lib/test/package.json index 46bfcbf7692..6209f505897 100644 --- a/code/lib/test/package.json +++ b/code/lib/test/package.json @@ -46,7 +46,7 @@ "dependencies": { "@storybook/client-logger": "workspace:*", "@storybook/core-events": "workspace:*", - "@storybook/csf": "0.1.10--canary.99.ba76785.0", + "@storybook/csf": "0.1.10", "@storybook/instrumenter": "workspace:*", "@storybook/preview-api": "workspace:*", "@testing-library/dom": "10.1.0", diff --git a/code/lib/types/package.json b/code/lib/types/package.json index 69003ce4601..6d30bfb9020 100644 --- a/code/lib/types/package.json +++ b/code/lib/types/package.json @@ -45,7 +45,7 @@ }, "dependencies": { "@storybook/channels": "workspace:*", - "@storybook/csf": "0.1.10--canary.99.ba76785.0", + "@storybook/csf": "0.1.10", "@types/express": "^4.17.21", "file-system-cache": "2.3.0" }, diff --git a/code/package.json b/code/package.json index 74405cd784b..4e00c7360c0 100644 --- a/code/package.json +++ b/code/package.json @@ -126,7 +126,7 @@ "@storybook/core-events": "workspace:*", "@storybook/core-server": "workspace:*", "@storybook/core-webpack": "workspace:*", - "@storybook/csf": "0.1.10--canary.99.ba76785.0", + "@storybook/csf": "0.1.10", "@storybook/csf-plugin": "workspace:*", "@storybook/csf-tools": "workspace:*", "@storybook/docs-tools": "workspace:*", diff --git a/code/renderers/server/package.json b/code/renderers/server/package.json index 78c79b07115..5f6e36657e5 100644 --- a/code/renderers/server/package.json +++ b/code/renderers/server/package.json @@ -46,7 +46,7 @@ "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/csf": "0.1.10--canary.99.ba76785.0", + "@storybook/csf": "0.1.10", "@storybook/csf-tools": "workspace:*", "@storybook/global": "^5.0.0", "@storybook/preview-api": "workspace:*", diff --git a/code/ui/blocks/package.json b/code/ui/blocks/package.json index 7e18c120c94..ec40a41b2af 100644 --- a/code/ui/blocks/package.json +++ b/code/ui/blocks/package.json @@ -48,7 +48,7 @@ "@storybook/client-logger": "workspace:*", "@storybook/components": "workspace:*", "@storybook/core-events": "workspace:*", - "@storybook/csf": "0.1.10--canary.99.ba76785.0", + "@storybook/csf": "0.1.10", "@storybook/docs-tools": "workspace:*", "@storybook/global": "^5.0.0", "@storybook/icons": "^1.2.5", diff --git a/code/ui/components/package.json b/code/ui/components/package.json index 70d154d7f28..19c0361edb0 100644 --- a/code/ui/components/package.json +++ b/code/ui/components/package.json @@ -62,7 +62,7 @@ "@radix-ui/react-dialog": "^1.0.5", "@radix-ui/react-slot": "^1.0.2", "@storybook/client-logger": "workspace:*", - "@storybook/csf": "0.1.10--canary.99.ba76785.0", + "@storybook/csf": "0.1.10", "@storybook/global": "^5.0.0", "@storybook/icons": "^1.2.5", "@storybook/theming": "workspace:*", diff --git a/code/yarn.lock b/code/yarn.lock index 37d0e912c50..e9ec7f44fc9 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -5288,7 +5288,7 @@ __metadata: dependencies: "@storybook/client-logger": "workspace:*" "@storybook/core-events": "workspace:*" - "@storybook/csf": "npm:0.1.10--canary.99.ba76785.0" + "@storybook/csf": "npm:0.1.10" "@storybook/global": "npm:^5.0.0" "@storybook/manager-api": "workspace:*" "@storybook/preview-api": "workspace:*" @@ -5555,7 +5555,7 @@ __metadata: "@storybook/client-logger": "workspace:*" "@storybook/components": "workspace:*" "@storybook/core-events": "workspace:*" - "@storybook/csf": "npm:0.1.10--canary.99.ba76785.0" + "@storybook/csf": "npm:0.1.10" "@storybook/docs-tools": "workspace:*" "@storybook/global": "npm:^5.0.0" "@storybook/icons": "npm:^1.2.5" @@ -5785,7 +5785,7 @@ __metadata: "@babel/core": "npm:^7.24.4" "@babel/preset-env": "npm:^7.24.4" "@babel/types": "npm:^7.24.0" - "@storybook/csf": "npm:0.1.10--canary.99.ba76785.0" + "@storybook/csf": "npm:0.1.10" "@storybook/csf-tools": "workspace:*" "@storybook/node-logger": "workspace:*" "@storybook/types": "workspace:*" @@ -5822,7 +5822,7 @@ __metadata: "@radix-ui/react-scroll-area": "npm:^1.0.5" "@radix-ui/react-slot": "npm:^1.0.2" "@storybook/client-logger": "workspace:*" - "@storybook/csf": "npm:0.1.10--canary.99.ba76785.0" + "@storybook/csf": "npm:0.1.10" "@storybook/global": "npm:^5.0.0" "@storybook/icons": "npm:^1.2.5" "@storybook/test": "workspace:*" @@ -5905,7 +5905,7 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/core-events@workspace:lib/core-events" dependencies: - "@storybook/csf": "npm:0.1.10--canary.99.ba76785.0" + "@storybook/csf": "npm:0.1.10" chalk: "npm:^4.1.0" ts-dedent: "npm:^2.0.0" typescript: "npm:^5.3.2" @@ -5925,7 +5925,7 @@ __metadata: "@storybook/channels": "workspace:*" "@storybook/core-common": "workspace:*" "@storybook/core-events": "workspace:*" - "@storybook/csf": "npm:0.1.10--canary.99.ba76785.0" + "@storybook/csf": "npm:0.1.10" "@storybook/csf-tools": "workspace:*" "@storybook/docs-mdx": "npm:3.1.0-next.0" "@storybook/global": "npm:^5.0.0" @@ -6007,7 +6007,7 @@ __metadata: "@babel/parser": "npm:^7.24.4" "@babel/traverse": "npm:^7.24.1" "@babel/types": "npm:^7.24.0" - "@storybook/csf": "npm:0.1.10--canary.99.ba76785.0" + "@storybook/csf": "npm:0.1.10" "@storybook/types": "workspace:*" "@types/fs-extra": "npm:^11.0.1" "@types/js-yaml": "npm:^4.0.5" @@ -6019,12 +6019,12 @@ __metadata: languageName: unknown linkType: soft -"@storybook/csf@npm:0.1.10--canary.99.ba76785.0": - version: 0.1.10--canary.99.ba76785.0 - resolution: "@storybook/csf@npm:0.1.10--canary.99.ba76785.0" +"@storybook/csf@npm:0.1.10": + version: 0.1.10 + resolution: "@storybook/csf@npm:0.1.10" dependencies: type-fest: "npm:^2.19.0" - checksum: 10c0/8c99e2e1d458d69fbe8156ee6da22f3b9365cb3cb7051f051c1aa3cbd819033112decf16f2a4263163cedf8a6729a382ac82e77e9d704fbae498493788508d2c + checksum: 10c0/c5bd17b92aeb8be5918cfad238bfef4c08553f8c60b6284e1cabb8646aeb6f8d6ab4343a77954a5c9924ca717cf306c239c0b061915918137136aa0c9b4be5ab languageName: node linkType: hard @@ -6206,7 +6206,7 @@ __metadata: "@storybook/channels": "workspace:*" "@storybook/client-logger": "workspace:*" "@storybook/core-events": "workspace:*" - "@storybook/csf": "npm:0.1.10--canary.99.ba76785.0" + "@storybook/csf": "npm:0.1.10" "@storybook/global": "npm:^5.0.0" "@storybook/icons": "npm:^1.2.5" "@storybook/router": "workspace:*" @@ -6546,7 +6546,7 @@ __metadata: "@storybook/client-logger": "workspace:*" "@storybook/core-common": "workspace:*" "@storybook/core-events": "workspace:*" - "@storybook/csf": "npm:0.1.10--canary.99.ba76785.0" + "@storybook/csf": "npm:0.1.10" "@storybook/global": "npm:^5.0.0" "@storybook/types": "workspace:*" "@types/qs": "npm:^6.9.5" @@ -6734,7 +6734,7 @@ __metadata: "@storybook/core-events": "workspace:*" "@storybook/core-server": "workspace:*" "@storybook/core-webpack": "workspace:*" - "@storybook/csf": "npm:0.1.10--canary.99.ba76785.0" + "@storybook/csf": "npm:0.1.10" "@storybook/csf-plugin": "workspace:*" "@storybook/csf-tools": "workspace:*" "@storybook/docs-tools": "workspace:*" @@ -6886,7 +6886,7 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/server@workspace:renderers/server" dependencies: - "@storybook/csf": "npm:0.1.10--canary.99.ba76785.0" + "@storybook/csf": "npm:0.1.10" "@storybook/csf-tools": "workspace:*" "@storybook/global": "npm:^5.0.0" "@storybook/preview-api": "workspace:*" @@ -6903,7 +6903,7 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/source-loader@workspace:lib/source-loader" dependencies: - "@storybook/csf": "npm:0.1.10--canary.99.ba76785.0" + "@storybook/csf": "npm:0.1.10" "@storybook/types": "workspace:*" estraverse: "npm:^5.2.0" lodash: "npm:^4.17.21" @@ -7022,7 +7022,7 @@ __metadata: dependencies: "@storybook/client-logger": "workspace:*" "@storybook/core-events": "workspace:*" - "@storybook/csf": "npm:0.1.10--canary.99.ba76785.0" + "@storybook/csf": "npm:0.1.10" "@storybook/instrumenter": "workspace:*" "@storybook/preview-api": "workspace:*" "@testing-library/dom": "npm:10.1.0" @@ -7074,7 +7074,7 @@ __metadata: resolution: "@storybook/types@workspace:lib/types" dependencies: "@storybook/channels": "workspace:*" - "@storybook/csf": "npm:0.1.10--canary.99.ba76785.0" + "@storybook/csf": "npm:0.1.10" "@types/express": "npm:^4.17.21" "@types/fs-extra": "npm:^11.0.1" "@types/node": "npm:^18.0.0" From e7c6a8f9b3b286f3790edb6757c5d8f3f3286695 Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Tue, 2 Jul 2024 10:39:08 +0200 Subject: [PATCH 13/16] Fix test package.json --- code/lib/test/package.json | 1 - 1 file changed, 1 deletion(-) diff --git a/code/lib/test/package.json b/code/lib/test/package.json index e3bdda82205..d4fa0740848 100644 --- a/code/lib/test/package.json +++ b/code/lib/test/package.json @@ -44,7 +44,6 @@ "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/instrumenter": "workspace:*", "@storybook/csf": "0.1.10", "@storybook/instrumenter": "workspace:*", "@testing-library/dom": "10.1.0", From c48a6847eb9dbc96074de02469aad19bdc36b752 Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Tue, 2 Jul 2024 11:12:52 +0200 Subject: [PATCH 14/16] Fix yarn.lock --- code/yarn.lock | 22 ++++++++++++++++------ 1 file changed, 16 insertions(+), 6 deletions(-) diff --git a/code/yarn.lock b/code/yarn.lock index d1d7d566a17..6eea252025a 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -5270,7 +5270,7 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/addon-links@workspace:addons/links" dependencies: - "@storybook/csf": "npm:0.1.10--canary.d841bb4.0" + "@storybook/csf": "npm:0.1.10" "@storybook/global": "npm:^5.0.0" fs-extra: "npm:^11.1.0" ts-dedent: "npm:^2.0.0" @@ -5493,7 +5493,7 @@ __metadata: resolution: "@storybook/blocks@workspace:lib/blocks" dependencies: "@storybook/addon-actions": "workspace:*" - "@storybook/csf": "npm:0.1.10--canary.d841bb4.0" + "@storybook/csf": "npm:0.1.10" "@storybook/global": "npm:^5.0.0" "@storybook/icons": "npm:^1.2.5" "@storybook/test": "workspace:*" @@ -5645,7 +5645,7 @@ __metadata: "@babel/preset-env": "npm:^7.24.4" "@babel/types": "npm:^7.24.0" "@storybook/core": "workspace:*" - "@storybook/csf": "npm:0.1.10--canary.d841bb4.0" + "@storybook/csf": "npm:0.1.10" "@types/cross-spawn": "npm:^6.0.2" "@types/jscodeshift": "npm:^0.11.10" ansi-regex: "npm:^5.0.1" @@ -5875,6 +5875,15 @@ __metadata: languageName: unknown linkType: soft +"@storybook/csf@npm:0.1.10": + version: 0.1.10 + resolution: "@storybook/csf@npm:0.1.10" + dependencies: + type-fest: "npm:^2.19.0" + checksum: 10c0/c5bd17b92aeb8be5918cfad238bfef4c08553f8c60b6284e1cabb8646aeb6f8d6ab4343a77954a5c9924ca717cf306c239c0b061915918137136aa0c9b4be5ab + languageName: node + linkType: hard + "@storybook/csf@npm:0.1.10--canary.d841bb4.0": version: 0.1.10--canary.d841bb4.0 resolution: "@storybook/csf@npm:0.1.10--canary.d841bb4.0" @@ -6472,7 +6481,7 @@ __metadata: "@storybook/codemod": "workspace:*" "@storybook/core": "workspace:*" "@storybook/core-webpack": "workspace:*" - "@storybook/csf": "npm:0.1.10--canary.d841bb4.0" + "@storybook/csf": "npm:0.1.10" "@storybook/csf-plugin": "workspace:*" "@storybook/ember": "workspace:*" "@storybook/eslint-config-storybook": "npm:^4.0.0" @@ -6607,7 +6616,7 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/server@workspace:renderers/server" dependencies: - "@storybook/csf": "npm:0.1.10--canary.d841bb4.0" + "@storybook/csf": "npm:0.1.10" "@storybook/global": "npm:^5.0.0" "@types/fs-extra": "npm:^11.0.1" fs-extra: "npm:^11.1.0" @@ -6623,7 +6632,7 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/source-loader@workspace:lib/source-loader" dependencies: - "@storybook/csf": "npm:0.1.10--canary.d841bb4.0" + "@storybook/csf": "npm:0.1.10" estraverse: "npm:^5.2.0" lodash: "npm:^4.17.21" prettier: "npm:^3.1.1" @@ -6725,6 +6734,7 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/test@workspace:lib/test" dependencies: + "@storybook/csf": "npm:0.1.10" "@storybook/instrumenter": "workspace:*" "@testing-library/dom": "npm:10.1.0" "@testing-library/jest-dom": "npm:6.4.5" From 47c00ee3b1a19b488a0b4ee8ce7d8a24fb08fa78 Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Tue, 2 Jul 2024 11:39:51 +0200 Subject: [PATCH 15/16] Fix import --- code/renderers/vue3/src/render.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/code/renderers/vue3/src/render.ts b/code/renderers/vue3/src/render.ts index 1942c2a8639..0b3e930a2e9 100644 --- a/code/renderers/vue3/src/render.ts +++ b/code/renderers/vue3/src/render.ts @@ -2,8 +2,7 @@ import type { App } from 'vue'; import { createApp, h, isReactive, isVNode, reactive } from 'vue'; -import type { ArgsStoryFn, RenderContext } from 'storybook/internal/types'; -import type { Args, StoryContext } from '@storybook/csf'; +import type { ArgsStoryFn, RenderContext, StoryContext, Args } from 'storybook/internal/types'; import type { PreviewWeb } from 'storybook/internal/preview-api'; import type { StoryFnVueReturnType, StoryID, VueRenderer } from './types'; From e9910ce059096af27643a86770d5d213a9321fb7 Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Tue, 2 Jul 2024 11:56:40 +0200 Subject: [PATCH 16/16] Fix dependencies --- code/core/package.json | 3 +-- .../decorators.stories.ts | 2 +- code/yarn.lock | 11 +---------- 3 files changed, 3 insertions(+), 13 deletions(-) diff --git a/code/core/package.json b/code/core/package.json index 1815dd44c23..17c634822cf 100644 --- a/code/core/package.json +++ b/code/core/package.json @@ -244,7 +244,7 @@ "prep": "bun ./scripts/prep.ts" }, "dependencies": { - "@storybook/csf": "0.1.10--canary.d841bb4.0", + "@storybook/csf": "0.1.10", "@types/express": "^4.17.21", "@types/node": "^18.0.0", "browser-assert": "^1.2.1", @@ -276,7 +276,6 @@ "@radix-ui/react-dialog": "^1.0.5", "@radix-ui/react-scroll-area": "^1.0.5", "@radix-ui/react-slot": "^1.0.2", - "@storybook/csf": "0.1.10--canary.d841bb4.0", "@storybook/docs-mdx": "3.1.0-next.0", "@storybook/global": "^5.0.0", "@storybook/icons": "^1.2.5", diff --git a/code/renderers/vue3/template/stories_vue3-vite-default-ts/decorators.stories.ts b/code/renderers/vue3/template/stories_vue3-vite-default-ts/decorators.stories.ts index fc771785a0f..4600cdf4256 100644 --- a/code/renderers/vue3/template/stories_vue3-vite-default-ts/decorators.stories.ts +++ b/code/renderers/vue3/template/stories_vue3-vite-default-ts/decorators.stories.ts @@ -1,4 +1,4 @@ -import type { DecoratorFunction } from '@storybook/csf'; +import type { DecoratorFunction } from 'storybook/internal/types'; import { global as globalThis } from '@storybook/global'; import type { Meta, StoryObj, VueRenderer } from '@storybook/vue3'; import { h } from 'vue'; diff --git a/code/yarn.lock b/code/yarn.lock index 6eea252025a..d5b02d499d5 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -5739,7 +5739,7 @@ __metadata: "@radix-ui/react-dialog": "npm:^1.0.5" "@radix-ui/react-scroll-area": "npm:^1.0.5" "@radix-ui/react-slot": "npm:^1.0.2" - "@storybook/csf": "npm:0.1.10--canary.d841bb4.0" + "@storybook/csf": "npm:0.1.10" "@storybook/docs-mdx": "npm:3.1.0-next.0" "@storybook/global": "npm:^5.0.0" "@storybook/icons": "npm:^1.2.5" @@ -5884,15 +5884,6 @@ __metadata: languageName: node linkType: hard -"@storybook/csf@npm:0.1.10--canary.d841bb4.0": - version: 0.1.10--canary.d841bb4.0 - resolution: "@storybook/csf@npm:0.1.10--canary.d841bb4.0" - dependencies: - type-fest: "npm:^2.19.0" - checksum: 10c0/35a9b5cf88a3378fb362d0a1988265ec218aa98d54b82b56e78a4c1142b3beed6e2ee42bd8731bac009fd8133e085c92af43541028468865b51c0b1220ded338 - languageName: node - linkType: hard - "@storybook/csf@npm:^0.0.1": version: 0.0.1 resolution: "@storybook/csf@npm:0.0.1"