From 3ff3e13bffba90d197407c00658ed4eddf3b8806 Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Fri, 29 Mar 2024 10:38:36 +0100 Subject: [PATCH 01/82] Implement module mocking in storybook --- code/builders/builder-vite/src/vite-config.ts | 1 + .../src/preview/base-webpack.config.ts | 8 ++++++ .../modules/preview-web/render/StoryRender.ts | 4 ++- .../stories/module-mocking.stories.ts | 27 +++++++++++++++++++ code/lib/test/template/stories/utils.mock.ts | 4 +++ code/lib/test/template/stories/utils.ts | 1 + scripts/tasks/sandbox-parts.ts | 19 +++++++++++++ scripts/tasks/sandbox.ts | 4 ++- 8 files changed, 66 insertions(+), 2 deletions(-) create mode 100644 code/lib/test/template/stories/module-mocking.stories.ts create mode 100644 code/lib/test/template/stories/utils.mock.ts create mode 100644 code/lib/test/template/stories/utils.ts diff --git a/code/builders/builder-vite/src/vite-config.ts b/code/builders/builder-vite/src/vite-config.ts index 4a1c2fb3ee44..95d68543a22e 100644 --- a/code/builders/builder-vite/src/vite-config.ts +++ b/code/builders/builder-vite/src/vite-config.ts @@ -65,6 +65,7 @@ export async function commonConfig( base: './', plugins: await pluginConfig(options), resolve: { + conditions: ['storybook', 'stories', 'test'], preserveSymlinks: isPreservingSymlinks(), alias: { assert: require.resolve('browser-assert'), diff --git a/code/builders/builder-webpack5/src/preview/base-webpack.config.ts b/code/builders/builder-webpack5/src/preview/base-webpack.config.ts index 8a2d60743661..38961e89085d 100644 --- a/code/builders/builder-webpack5/src/preview/base-webpack.config.ts +++ b/code/builders/builder-webpack5/src/preview/base-webpack.config.ts @@ -85,6 +85,14 @@ export async function createDefaultWebpackConfig( }, resolve: { ...storybookBaseConfig.resolve, + // see https://github.com/webpack/webpack/issues/17692#issuecomment-1866272674 for the docs + conditionNames: [ + ...(storybookBaseConfig.resolve?.conditionNames ?? []), + 'storybook', + 'stories', + 'test', + '...', + ], fallback: { crypto: false, assert: false, 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 ff3449b7a437..72b554d38cd2 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 @@ -172,7 +172,9 @@ export class StoryRender implements Render); + // TODO add this to CSF + canvasElement, + } as unknown as StoryContextForLoaders); }); if (abortSignal.aborted) { return; diff --git a/code/lib/test/template/stories/module-mocking.stories.ts b/code/lib/test/template/stories/module-mocking.stories.ts new file mode 100644 index 000000000000..d81e86715e02 --- /dev/null +++ b/code/lib/test/template/stories/module-mocking.stories.ts @@ -0,0 +1,27 @@ +import { global as globalThis } from '@storybook/global'; +// @ts-expect-error This alias is set in the sandbox +// eslint-disable-next-line import/no-unresolved +import { foo } from '#utils'; +import { expect, fn, isMockFunction, mocked } from '@storybook/test'; + +export default { + component: globalThis.Components.Button, + args: { + onClick: fn(), + label: 'Mock story', + }, + parameters: { + chromatic: { + disable: true, + }, + }, + loaders: () => { + mocked(foo).mockReturnValue('mocked'); + }, + async play() { + await expect(isMockFunction(foo)).toBe(true); + await expect(foo()).toBe('mocked'); + }, +}; + +export const Basic = {}; diff --git a/code/lib/test/template/stories/utils.mock.ts b/code/lib/test/template/stories/utils.mock.ts new file mode 100644 index 000000000000..15c648e88c00 --- /dev/null +++ b/code/lib/test/template/stories/utils.mock.ts @@ -0,0 +1,4 @@ +import { fn } from '@storybook/test'; +import * as utils from './utils'; + +export const foo = fn(utils.foo); diff --git a/code/lib/test/template/stories/utils.ts b/code/lib/test/template/stories/utils.ts new file mode 100644 index 000000000000..5a80b1903c1f --- /dev/null +++ b/code/lib/test/template/stories/utils.ts @@ -0,0 +1 @@ +export const foo = () => 'not mocked'; diff --git a/scripts/tasks/sandbox-parts.ts b/scripts/tasks/sandbox-parts.ts index cd7dc643a185..ed52cd272ede 100644 --- a/scripts/tasks/sandbox-parts.ts +++ b/scripts/tasks/sandbox-parts.ts @@ -467,6 +467,12 @@ export const addStories: Task['run'] = async ( cwd, disableDocs, }); + + await linkPackageStories(await workspacePath('core package', '@storybook/test'), { + mainConfig, + cwd, + disableDocs, + }); } const mainAddons = (mainConfig.getSafeFieldValue(['addons']) || []).reduce( @@ -554,6 +560,19 @@ export const extendMain: Task['run'] = async ({ template, sandboxDir }, { disabl await writeConfig(mainConfig); }; +export async function setImportMap(cwd: string) { + const packageJson = await readJson(join(cwd, 'package.json')); + + packageJson.imports = { + '#utils': { + storybook: './template-stories/lib/test/utils.mock.ts', + default: './template-stories/lib/test/utils.ts', + }, + }; + + await writeJson(join(cwd, 'package.json'), packageJson, { spaces: 2 }); +} + /** * Sets compodoc option in angular.json projects to false. We have to generate compodoc * manually to avoid symlink issues related to the template-stories folder. diff --git a/scripts/tasks/sandbox.ts b/scripts/tasks/sandbox.ts index ee57d64a0c38..1d3a1e1af74f 100644 --- a/scripts/tasks/sandbox.ts +++ b/scripts/tasks/sandbox.ts @@ -37,7 +37,7 @@ export const sandbox: Task = { await remove(details.sandboxDir); } - const { create, install, addStories, extendMain, init, addExtraDependencies } = + const { create, install, addStories, extendMain, init, addExtraDependencies, setImportMap } = // @ts-expect-error esbuild for some reason exports a default object // eslint-disable-next-line import/extensions (await import('./sandbox-parts.ts')).default; @@ -84,6 +84,8 @@ export const sandbox: Task = { await extendMain(details, options); + await setImportMap(details.sandboxDir); + logger.info(`✅ Storybook sandbox created at ${details.sandboxDir}`); }, }; From 3d146f526ba9b86630746da2f2cd8a012da46e89 Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Fri, 29 Mar 2024 12:33:10 +0100 Subject: [PATCH 02/82] Fix check --- .../src/js-package-manager/Yarn2Proxy.test.ts | 1 - .../src/js-package-manager/Yarn2Proxy.ts | 49 ++----------------- .../src/__test__/portable-stories.test.tsx | 7 ++- 3 files changed, 9 insertions(+), 48 deletions(-) diff --git a/code/lib/core-common/src/js-package-manager/Yarn2Proxy.test.ts b/code/lib/core-common/src/js-package-manager/Yarn2Proxy.test.ts index f024d19c1133..985d0dbecf83 100644 --- a/code/lib/core-common/src/js-package-manager/Yarn2Proxy.test.ts +++ b/code/lib/core-common/src/js-package-manager/Yarn2Proxy.test.ts @@ -1,5 +1,4 @@ import { describe, beforeEach, it, expect, vi } from 'vitest'; -import dedent from 'ts-dedent'; import { Yarn2Proxy } from './Yarn2Proxy'; describe('Yarn 2 Proxy', () => { diff --git a/code/lib/core-common/src/js-package-manager/Yarn2Proxy.ts b/code/lib/core-common/src/js-package-manager/Yarn2Proxy.ts index 7014357cc44b..71b7a5391a7b 100644 --- a/code/lib/core-common/src/js-package-manager/Yarn2Proxy.ts +++ b/code/lib/core-common/src/js-package-manager/Yarn2Proxy.ts @@ -36,49 +36,6 @@ const CRITICAL_YARN2_ERROR_CODES = { YN0083: 'AUTOMERGE_GIT_ERROR', }; -const YARN2_ERROR_CODES = { - ...CRITICAL_YARN2_ERROR_CODES, - YN0000: 'UNNAMED', - YN0002: 'MISSING_PEER_DEPENDENCY', - YN0003: 'CYCLIC_DEPENDENCIES', - YN0004: 'DISABLED_BUILD_SCRIPTS', - YN0005: 'BUILD_DISABLED', - YN0006: 'SOFT_LINK_BUILD', - YN0007: 'MUST_BUILD', - YN0008: 'MUST_REBUILD', - YN0013: 'FETCH_NOT_CACHED', - YN0017: 'RESOLUTION_PACK', - YN0018: 'CACHE_CHECKSUM_MISMATCH', - YN0019: 'UNUSED_CACHE_ENTRY', - YN0022: 'TOO_MANY_MATCHING_WORKSPACES', - YN0023: 'CONSTRAINTS_MISSING_DEPENDENCY', - YN0024: 'CONSTRAINTS_INCOMPATIBLE_DEPENDENCY', - YN0025: 'CONSTRAINTS_EXTRANEOUS_DEPENDENCY', - YN0026: 'CONSTRAINTS_INVALID_DEPENDENCY', - YN0027: 'CANT_SUGGEST_RESOLUTIONS', - YN0029: 'CROSS_DRIVE_VIRTUAL_LOCAL', - YN0031: 'DANGEROUS_NODE_MODULES', - YN0032: 'NODE_GYP_INJECTED', - YN0047: 'AUTOMERGE_IMMUTABLE', - YN0048: 'AUTOMERGE_SUCCESS', - YN0049: 'AUTOMERGE_REQUIRED', - YN0050: 'DEPRECATED_CLI_SETTINGS', - YN0059: 'INVALID_RANGE_PEER_DEPENDENCY', - YN0060: 'INCOMPATIBLE_PEER_DEPENDENCY', - YN0061: 'DEPRECATED_PACKAGE', - YN0068: 'UNUSED_PACKAGE_EXTENSION', - YN0069: 'REDUNDANT_PACKAGE_EXTENSION', - YN0074: 'NM_HARDLINKS_MODE_DOWNGRADED', - YN0077: 'GHOST_ARCHITECTURE', - YN0080: 'NETWORK_DISABLED', - YN0085: 'UPDATED_RESOLUTION_RECORD', - YN0086: 'EXPLAIN_PEER_DEPENDENCIES_CTA', - YN0087: 'MIGRATION_SUCCESS', - YN0088: 'VERSION_NOTICE', - YN0089: 'TIPS_NOTICE', - YN0090: 'OFFLINE_MODE_ENABLED', -}; - // This encompasses both yarn 2 and yarn 3 export class Yarn2Proxy extends JsPackageManager { readonly type = 'yarn2'; @@ -306,10 +263,12 @@ export class Yarn2Proxy extends JsPackageManager { while ((match = regex.exec(logs)) !== null) { const code = match[1]; const message = match[2].replace(/[┌│└]/g, '').trim(); - if (CRITICAL_YARN2_ERROR_CODES[code]) { + if (code in CRITICAL_YARN2_ERROR_CODES) { errorCodesWithMessages.push({ code, - message: `${CRITICAL_YARN2_ERROR_CODES[code]}\n-> ${message}\n`, + message: `${ + CRITICAL_YARN2_ERROR_CODES[code as keyof typeof CRITICAL_YARN2_ERROR_CODES] + }\n-> ${message}\n`, }); } } diff --git a/code/renderers/react/src/__test__/portable-stories.test.tsx b/code/renderers/react/src/__test__/portable-stories.test.tsx index f80a1bbd2cc6..41cc6ac38e60 100644 --- a/code/renderers/react/src/__test__/portable-stories.test.tsx +++ b/code/renderers/react/src/__test__/portable-stories.test.tsx @@ -3,7 +3,6 @@ import React from 'react'; import { vi, it, expect, afterEach, describe } from 'vitest'; import { render, screen, cleanup } from '@testing-library/react'; import { addons } from '@storybook/preview-api'; -//@ts-expect-error our tsconfig.jsn#moduleResolution is set to 'node', which doesn't support this import import * as addonInteractionsPreview from '@storybook/addon-interactions/preview'; @@ -92,7 +91,11 @@ describe('projectAnnotations', () => { }); it('has spies when addon-interactions annotations are added', async () => { - const Story = composeStory(stories.WithActionArg, stories.default, addonInteractionsPreview); + const Story = composeStory( + stories.WithActionArg, + stories.default, + addonInteractionsPreview as any + ); expect(vi.mocked(Story.args.someActionArg!).mock).toBeDefined(); const { container } = render(); From 08c3f247615c41d0b547cbf8d64d1db36d8ff392 Mon Sep 17 00:00:00 2001 From: Jeppe Reinhold Date: Thu, 4 Apr 2024 12:44:12 +0200 Subject: [PATCH 03/82] reload window when tearing down during 'loading' phase --- .../preview-web/render/StoryRender.test.ts | 183 +++++++++++++++--- .../modules/preview-web/render/StoryRender.ts | 5 +- 2 files changed, 155 insertions(+), 33 deletions(-) diff --git a/code/lib/preview-api/src/modules/preview-web/render/StoryRender.test.ts b/code/lib/preview-api/src/modules/preview-web/render/StoryRender.test.ts index df4b37b840ae..e4942c11aab8 100644 --- a/code/lib/preview-api/src/modules/preview-web/render/StoryRender.test.ts +++ b/code/lib/preview-api/src/modules/preview-web/render/StoryRender.test.ts @@ -15,43 +15,17 @@ const entry = { importPath: './component.stories.ts', } as StoryIndexEntry; -const createGate = (): [Promise, (_?: any) => void] => { - let openGate = (_?: any) => {}; - const gate = new Promise((resolve) => { +const createGate = (): [Promise, () => void] => { + let openGate = () => {}; + const gate = new Promise((resolve) => { openGate = resolve; }); return [gate, openGate]; }; -describe('StoryRender', () => { - it('throws PREPARE_ABORTED if torndown during prepare', async () => { - const [importGate, openImportGate] = createGate(); - const mockStore = { - loadStory: vi.fn(async () => { - await importGate; - return {}; - }), - cleanupStory: vi.fn(), - }; - - const render = new StoryRender( - new Channel({}), - mockStore as unknown as StoryStore, - vi.fn(), - {} as any, - entry.id, - 'story' - ); - - const preparePromise = render.prepare(); - - render.teardown(); - - openImportGate(); - - await expect(preparePromise).rejects.toThrowError(PREPARE_ABORTED); - }); +window.location = { reload: vi.fn() } as any; +describe('StoryRender', () => { it('does run play function if passed autoplay=true', async () => { const story = { id: 'id', @@ -105,4 +79,151 @@ describe('StoryRender', () => { await render.renderToElement({} as any); expect(story.playFunction).not.toHaveBeenCalled(); }); + + describe('teardown', () => { + const teardownAndWaitForReload = (render: StoryRender) => { + // 1. immediately teardown the story + render.teardown(); + + return new Promise((resolve) => { + setInterval(() => { + try { + // 2. assert that the window is reloaded and move on + expect(window.location.reload).toHaveBeenCalledOnce(); + resolve(); + } catch { + // empty catch to ignore the assertion failing + } + }, 0); + }); + }; + + it('throws PREPARE_ABORTED if torndown during prepare', async () => { + const [importGate, openImportGate] = createGate(); + const mockStore = { + loadStory: vi.fn(async () => { + await importGate; + return {}; + }), + cleanupStory: vi.fn(), + }; + + const render = new StoryRender( + new Channel({}), + mockStore as unknown as StoryStore, + vi.fn(), + {} as any, + entry.id, + 'story' + ); + + const preparePromise = render.prepare(); + + render.teardown(); + + openImportGate(); + + await expect(preparePromise).rejects.toThrowError(PREPARE_ABORTED); + }); + + it('reloads the page when tearing down during loading', async () => { + const story = { + id: 'id', + title: 'title', + name: 'name', + tags: [], + applyLoaders: vi.fn(), + unboundStoryFn: vi.fn(), + playFunction: vi.fn(), + prepareContext: vi.fn(), + }; + const store = { getStoryContext: () => ({}), cleanupStory: vi.fn() }; + + const render = new StoryRender( + new Channel({}), + store as any, + vi.fn() as any, + {} as any, + entry.id, + 'story', + { autoplay: true }, + story as any + ); + + story.applyLoaders.mockImplementation(() => teardownAndWaitForReload(render)); + + await render.renderToElement({} as any); + + expect(story.applyLoaders).toHaveBeenCalledOnce(); + expect(store.cleanupStory).toHaveBeenCalledOnce(); + expect(window.location.reload).toHaveBeenCalledOnce(); + }); + + it('reloads the page when tearing down during rendering', async () => { + const story = { + id: 'id', + title: 'title', + name: 'name', + tags: [], + applyLoaders: vi.fn(), + unboundStoryFn: vi.fn(), + playFunction: vi.fn(), + prepareContext: vi.fn(), + }; + const store = { getStoryContext: () => ({}), cleanupStory: vi.fn() }; + const renderToScreen = vi.fn(); + + const render = new StoryRender( + new Channel({}), + store as any, + renderToScreen as any, + {} as any, + entry.id, + 'story', + { autoplay: true }, + story as any + ); + + renderToScreen.mockImplementation(() => teardownAndWaitForReload(render)); + + await render.renderToElement({} as any); + + expect(renderToScreen).toHaveBeenCalledOnce(); + expect(store.cleanupStory).toHaveBeenCalledOnce(); + expect(window.location.reload).toHaveBeenCalledOnce(); + }); + + it('reloads the page when tearing down during playing', async () => { + const story = { + id: 'id', + title: 'title', + name: 'name', + tags: [], + applyLoaders: vi.fn(), + unboundStoryFn: vi.fn(), + playFunction: vi.fn(), + prepareContext: vi.fn(), + }; + const store = { getStoryContext: () => ({}), cleanupStory: vi.fn() }; + + const render = new StoryRender( + new Channel({}), + store as any, + vi.fn() as any, + {} as any, + entry.id, + 'story', + { autoplay: true }, + story as any + ); + + story.playFunction.mockImplementation(() => teardownAndWaitForReload(render)); + + await render.renderToElement({} as any); + + expect(story.playFunction).toHaveBeenCalledOnce(); + expect(store.cleanupStory).toHaveBeenCalledOnce(); + expect(window.location.reload).toHaveBeenCalledOnce(); + }); + }); }); 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 72b554d38cd2..f17759baf8f0 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 @@ -120,7 +120,8 @@ export class StoryRender implements Render implements Render Date: Fri, 5 Apr 2024 12:35:43 +0200 Subject: [PATCH 04/82] remove unnecessary test --- .../modules/preview-web/PreviewWeb.test.ts | 33 ------------------- 1 file changed, 33 deletions(-) diff --git a/code/lib/preview-api/src/modules/preview-web/PreviewWeb.test.ts b/code/lib/preview-api/src/modules/preview-web/PreviewWeb.test.ts index e20af13752a6..0506167666b9 100644 --- a/code/lib/preview-api/src/modules/preview-web/PreviewWeb.test.ts +++ b/code/lib/preview-api/src/modules/preview-web/PreviewWeb.test.ts @@ -2141,39 +2141,6 @@ describe('PreviewWeb', () => { window.location = { ...originalLocation, reload: originalLocation.reload }; }); - it('stops initial story after loaders if running', async () => { - const [gate, openGate] = createGate(); - componentOneExports.default.loaders[0].mockImplementationOnce(async () => gate); - - document.location.search = '?id=component-one--a'; - await new PreviewWeb(importFn, getProjectAnnotations).ready(); - await waitForRenderPhase('loading'); - - emitter.emit(SET_CURRENT_STORY, { - storyId: 'component-one--b', - viewMode: 'story', - }); - await waitForSetCurrentStory(); - await waitForRender(); - - // Now let the loader resolve - openGate({ l: 8 }); - await waitForRender(); - - // Story gets rendered with updated args - expect(projectAnnotations.renderToCanvas).toHaveBeenCalledTimes(1); - expect(projectAnnotations.renderToCanvas).toHaveBeenCalledWith( - expect.objectContaining({ - forceRemount: true, - storyContext: expect.objectContaining({ - id: 'component-one--b', - loaded: { l: 7 }, - }), - }), - 'story-element' - ); - }); - it('aborts render for initial story', async () => { const [gate, openGate] = createGate(); From 6f6fe5fc843fb5a53eb44ce012491be45a909062 Mon Sep 17 00:00:00 2001 From: Jeppe Reinhold Date: Fri, 5 Apr 2024 13:22:35 +0200 Subject: [PATCH 05/82] improve readability of StoryRender.test flow --- .../preview-web/render/StoryRender.test.ts | 58 ++++++++++++++----- 1 file changed, 42 insertions(+), 16 deletions(-) diff --git a/code/lib/preview-api/src/modules/preview-web/render/StoryRender.test.ts b/code/lib/preview-api/src/modules/preview-web/render/StoryRender.test.ts index e4942c11aab8..5b000454397b 100644 --- a/code/lib/preview-api/src/modules/preview-web/render/StoryRender.test.ts +++ b/code/lib/preview-api/src/modules/preview-web/render/StoryRender.test.ts @@ -22,6 +22,7 @@ const createGate = (): [Promise, () => void] => { }); return [gate, openGate]; }; +const tick = () => new Promise((resolve) => setTimeout(resolve, 0)); window.location = { reload: vi.fn() } as any; @@ -127,18 +128,19 @@ describe('StoryRender', () => { }); it('reloads the page when tearing down during loading', async () => { + // Arrange - setup StoryRender and async gate blocking applyLoaders + const [loaderGate, openLoaderGate] = createGate(); const story = { id: 'id', title: 'title', name: 'name', tags: [], - applyLoaders: vi.fn(), + applyLoaders: vi.fn(() => loaderGate), unboundStoryFn: vi.fn(), playFunction: vi.fn(), prepareContext: vi.fn(), }; const store = { getStoryContext: () => ({}), cleanupStory: vi.fn() }; - const render = new StoryRender( new Channel({}), store as any, @@ -150,16 +152,24 @@ describe('StoryRender', () => { story as any ); - story.applyLoaders.mockImplementation(() => teardownAndWaitForReload(render)); - - await render.renderToElement({} as any); - + // Act - render, blocked by loaders, teardown + // ... Assert - window is reloaded + const renderPromise = render.renderToElement({} as any); expect(story.applyLoaders).toHaveBeenCalledOnce(); + await teardownAndWaitForReload(render); + + // Assert - everything is actually cleaned up, just in case expect(store.cleanupStory).toHaveBeenCalledOnce(); expect(window.location.reload).toHaveBeenCalledOnce(); + + // clear dangling promise + openLoaderGate(); + await renderPromise; }); it('reloads the page when tearing down during rendering', async () => { + // Arrange - setup StoryRender and async gate blocking renderToScreen + const [renderGate, openRenderGate] = createGate(); const story = { id: 'id', title: 'title', @@ -171,7 +181,7 @@ describe('StoryRender', () => { prepareContext: vi.fn(), }; const store = { getStoryContext: () => ({}), cleanupStory: vi.fn() }; - const renderToScreen = vi.fn(); + const renderToScreen = vi.fn(() => renderGate); const render = new StoryRender( new Channel({}), @@ -184,16 +194,25 @@ describe('StoryRender', () => { story as any ); - renderToScreen.mockImplementation(() => teardownAndWaitForReload(render)); - - await render.renderToElement({} as any); - + // Act - render, blocked by renderToScreen, teardown + // ... Assert - window is reloaded + const renderPromise = render.renderToElement({} as any); + await tick(); // go from 'loading' to 'rendering' phase expect(renderToScreen).toHaveBeenCalledOnce(); + await teardownAndWaitForReload(render); + + // Assert - everything is actually cleaned up, just in case expect(store.cleanupStory).toHaveBeenCalledOnce(); expect(window.location.reload).toHaveBeenCalledOnce(); + + // clear dangling promise + openRenderGate(); + await renderPromise; }); it('reloads the page when tearing down during playing', async () => { + // Arrange - setup StoryRender and async gate blocking playing + const [playGate, openPlayGate] = createGate(); const story = { id: 'id', title: 'title', @@ -201,7 +220,7 @@ describe('StoryRender', () => { tags: [], applyLoaders: vi.fn(), unboundStoryFn: vi.fn(), - playFunction: vi.fn(), + playFunction: vi.fn(() => playGate), prepareContext: vi.fn(), }; const store = { getStoryContext: () => ({}), cleanupStory: vi.fn() }; @@ -217,13 +236,20 @@ describe('StoryRender', () => { story as any ); - story.playFunction.mockImplementation(() => teardownAndWaitForReload(render)); - - await render.renderToElement({} as any); - + // Act - render, blocked by renderToScreen, teardown + // ... Assert - window is reloaded + const renderPromise = render.renderToElement({} as any); + await tick(); // go from 'loading' to 'playing' phase expect(story.playFunction).toHaveBeenCalledOnce(); + await teardownAndWaitForReload(render); + + // Assert - everything is actually cleaned up, just in case expect(store.cleanupStory).toHaveBeenCalledOnce(); expect(window.location.reload).toHaveBeenCalledOnce(); + + // clear dangling promise + openPlayGate(); + await renderPromise; }); }); }); From 1c1003411d529759f2655adbd1a050662cc3a0c5 Mon Sep 17 00:00:00 2001 From: Jeppe Reinhold Date: Fri, 5 Apr 2024 13:26:37 +0200 Subject: [PATCH 06/82] assert render phase --- .../preview-web/render/StoryRender.test.ts | 15 +++++++++------ 1 file changed, 9 insertions(+), 6 deletions(-) diff --git a/code/lib/preview-api/src/modules/preview-web/render/StoryRender.test.ts b/code/lib/preview-api/src/modules/preview-web/render/StoryRender.test.ts index 5b000454397b..7974840c58c2 100644 --- a/code/lib/preview-api/src/modules/preview-web/render/StoryRender.test.ts +++ b/code/lib/preview-api/src/modules/preview-web/render/StoryRender.test.ts @@ -152,10 +152,11 @@ describe('StoryRender', () => { story as any ); - // Act - render, blocked by loaders, teardown - // ... Assert - window is reloaded + // Act - render, blocked by loaders const renderPromise = render.renderToElement({} as any); expect(story.applyLoaders).toHaveBeenCalledOnce(); + expect(render.phase).toBe('loading'); + // Act & Assert - teardown, assert window is reloaded await teardownAndWaitForReload(render); // Assert - everything is actually cleaned up, just in case @@ -194,11 +195,12 @@ describe('StoryRender', () => { story as any ); - // Act - render, blocked by renderToScreen, teardown - // ... Assert - window is reloaded + // Act - render, blocked by renderToScreen const renderPromise = render.renderToElement({} as any); await tick(); // go from 'loading' to 'rendering' phase expect(renderToScreen).toHaveBeenCalledOnce(); + expect(render.phase).toBe('rendering'); + // Act & Assert - teardown, assert window is reloaded await teardownAndWaitForReload(render); // Assert - everything is actually cleaned up, just in case @@ -236,11 +238,12 @@ describe('StoryRender', () => { story as any ); - // Act - render, blocked by renderToScreen, teardown - // ... Assert - window is reloaded + // Act - render, blocked by playFn const renderPromise = render.renderToElement({} as any); await tick(); // go from 'loading' to 'playing' phase expect(story.playFunction).toHaveBeenCalledOnce(); + expect(render.phase).toBe('playing'); + // Act & Assert - teardown, assert window is reloaded await teardownAndWaitForReload(render); // Assert - everything is actually cleaned up, just in case From 91d0f8ab4186ed4b97d4e8e0657496712b4c8224 Mon Sep 17 00:00:00 2001 From: Jeppe Reinhold Date: Fri, 5 Apr 2024 14:43:01 +0200 Subject: [PATCH 07/82] teardown on remount --- .../modules/preview-web/PreviewWeb.test.ts | 3 ++ .../preview-web/render/StoryRender.test.ts | 53 +++++++++++++++++++ .../modules/preview-web/render/StoryRender.ts | 1 + 3 files changed, 57 insertions(+) diff --git a/code/lib/preview-api/src/modules/preview-web/PreviewWeb.test.ts b/code/lib/preview-api/src/modules/preview-web/PreviewWeb.test.ts index 0506167666b9..aac800d6ac52 100644 --- a/code/lib/preview-api/src/modules/preview-web/PreviewWeb.test.ts +++ b/code/lib/preview-api/src/modules/preview-web/PreviewWeb.test.ts @@ -1502,6 +1502,9 @@ describe('PreviewWeb', () => { openGate(); await waitForRenderPhase('aborted'); + // allow teardown to complete its retries + vi.runOnlyPendingTimers(); + await waitForRenderPhase('rendering'); expect(projectAnnotations.renderToCanvas).toHaveBeenCalledTimes(2); diff --git a/code/lib/preview-api/src/modules/preview-web/render/StoryRender.test.ts b/code/lib/preview-api/src/modules/preview-web/render/StoryRender.test.ts index 7974840c58c2..b5223bb92f75 100644 --- a/code/lib/preview-api/src/modules/preview-web/render/StoryRender.test.ts +++ b/code/lib/preview-api/src/modules/preview-web/render/StoryRender.test.ts @@ -254,5 +254,58 @@ describe('StoryRender', () => { openPlayGate(); await renderPromise; }); + + it('reloads the page when remounting during loading', async () => { + // Arrange - setup StoryRender and async gate blocking applyLoaders + const [loaderGate, openLoaderGate] = createGate(); + const story = { + id: 'id', + title: 'title', + name: 'name', + tags: [], + applyLoaders: vi.fn(() => loaderGate), + unboundStoryFn: vi.fn(), + playFunction: vi.fn(), + prepareContext: vi.fn(), + }; + const store = { getStoryContext: () => ({}), cleanupStory: vi.fn() }; + const render = new StoryRender( + new Channel({}), + store as any, + vi.fn() as any, + {} as any, + entry.id, + 'story', + { autoplay: true }, + story as any + ); + + // Act - render, blocked by loaders + const renderPromise = render.renderToElement({} as any); + expect(story.applyLoaders).toHaveBeenCalledOnce(); + expect(render.phase).toBe('loading'); + // Act - remount + render.remount(); + + // Assert - window is reloaded, keep ticking until it happens + await new Promise((resolve) => { + setInterval(() => { + try { + expect(window.location.reload).toHaveBeenCalledOnce(); + resolve(); + } catch { + // empty catch to ignore the assertion failing + } + }, 0); + }); + + // Assert - everything is actually cleaned up, just in case + expect(store.cleanupStory).toHaveBeenCalledOnce(); + expect(window.location.reload).toHaveBeenCalledOnce(); + + // clear dangling promise + openLoaderGate(); + await renderPromise; + }); }); }); 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 f17759baf8f0..406b3deb3b95 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 @@ -275,6 +275,7 @@ export class StoryRender implements Render Date: Fri, 5 Apr 2024 19:47:59 +0200 Subject: [PATCH 08/82] simplify StoryRender tests --- .../preview-web/render/StoryRender.test.ts | 80 +++++++------------ 1 file changed, 27 insertions(+), 53 deletions(-) diff --git a/code/lib/preview-api/src/modules/preview-web/render/StoryRender.test.ts b/code/lib/preview-api/src/modules/preview-web/render/StoryRender.test.ts index 7974840c58c2..57822b9de6dd 100644 --- a/code/lib/preview-api/src/modules/preview-web/render/StoryRender.test.ts +++ b/code/lib/preview-api/src/modules/preview-web/render/StoryRender.test.ts @@ -82,23 +82,6 @@ describe('StoryRender', () => { }); describe('teardown', () => { - const teardownAndWaitForReload = (render: StoryRender) => { - // 1. immediately teardown the story - render.teardown(); - - return new Promise((resolve) => { - setInterval(() => { - try { - // 2. assert that the window is reloaded and move on - expect(window.location.reload).toHaveBeenCalledOnce(); - resolve(); - } catch { - // empty catch to ignore the assertion failing - } - }, 0); - }); - }; - it('throws PREPARE_ABORTED if torndown during prepare', async () => { const [importGate, openImportGate] = createGate(); const mockStore = { @@ -129,7 +112,7 @@ describe('StoryRender', () => { it('reloads the page when tearing down during loading', async () => { // Arrange - setup StoryRender and async gate blocking applyLoaders - const [loaderGate, openLoaderGate] = createGate(); + const [loaderGate] = createGate(); const story = { id: 'id', title: 'title', @@ -152,25 +135,22 @@ describe('StoryRender', () => { story as any ); - // Act - render, blocked by loaders - const renderPromise = render.renderToElement({} as any); + // Act - render (blocked by loaders), teardown + render.renderToElement({} as any); expect(story.applyLoaders).toHaveBeenCalledOnce(); expect(render.phase).toBe('loading'); - // Act & Assert - teardown, assert window is reloaded - await teardownAndWaitForReload(render); - - // Assert - everything is actually cleaned up, just in case - expect(store.cleanupStory).toHaveBeenCalledOnce(); - expect(window.location.reload).toHaveBeenCalledOnce(); + render.teardown(); - // clear dangling promise - openLoaderGate(); - await renderPromise; + // Assert - window is reloaded + await vi.waitFor(() => { + expect(window.location.reload).toHaveBeenCalledOnce(); + expect(store.cleanupStory).toHaveBeenCalledOnce(); + }); }); it('reloads the page when tearing down during rendering', async () => { // Arrange - setup StoryRender and async gate blocking renderToScreen - const [renderGate, openRenderGate] = createGate(); + const [renderGate] = createGate(); const story = { id: 'id', title: 'title', @@ -195,26 +175,23 @@ describe('StoryRender', () => { story as any ); - // Act - render, blocked by renderToScreen - const renderPromise = render.renderToElement({} as any); + // Act - render (blocked by renderToScreen), teardown + render.renderToElement({} as any); await tick(); // go from 'loading' to 'rendering' phase expect(renderToScreen).toHaveBeenCalledOnce(); expect(render.phase).toBe('rendering'); - // Act & Assert - teardown, assert window is reloaded - await teardownAndWaitForReload(render); - - // Assert - everything is actually cleaned up, just in case - expect(store.cleanupStory).toHaveBeenCalledOnce(); - expect(window.location.reload).toHaveBeenCalledOnce(); + render.teardown(); - // clear dangling promise - openRenderGate(); - await renderPromise; + // Assert - window is reloaded + await vi.waitFor(() => { + expect(window.location.reload).toHaveBeenCalledOnce(); + expect(store.cleanupStory).toHaveBeenCalledOnce(); + }); }); it('reloads the page when tearing down during playing', async () => { // Arrange - setup StoryRender and async gate blocking playing - const [playGate, openPlayGate] = createGate(); + const [playGate] = createGate(); const story = { id: 'id', title: 'title', @@ -238,21 +215,18 @@ describe('StoryRender', () => { story as any ); - // Act - render, blocked by playFn - const renderPromise = render.renderToElement({} as any); + // Act - render (blocked by playFn), teardown + render.renderToElement({} as any); await tick(); // go from 'loading' to 'playing' phase expect(story.playFunction).toHaveBeenCalledOnce(); expect(render.phase).toBe('playing'); - // Act & Assert - teardown, assert window is reloaded - await teardownAndWaitForReload(render); - - // Assert - everything is actually cleaned up, just in case - expect(store.cleanupStory).toHaveBeenCalledOnce(); - expect(window.location.reload).toHaveBeenCalledOnce(); + render.teardown(); - // clear dangling promise - openPlayGate(); - await renderPromise; + // Assert - window is reloaded + await vi.waitFor(() => { + expect(window.location.reload).toHaveBeenCalledOnce(); + expect(store.cleanupStory).toHaveBeenCalledOnce(); + }); }); }); }); From cad8ece0b0a45d4ada5ce59e2ec60dfebd3fa259 Mon Sep 17 00:00:00 2001 From: Jeppe Reinhold Date: Fri, 5 Apr 2024 20:11:34 +0200 Subject: [PATCH 09/82] simplify StoryRender test --- .../preview-web/render/StoryRender.test.ts | 26 +++++-------------- 1 file changed, 6 insertions(+), 20 deletions(-) diff --git a/code/lib/preview-api/src/modules/preview-web/render/StoryRender.test.ts b/code/lib/preview-api/src/modules/preview-web/render/StoryRender.test.ts index 4ed892760d7c..7b21484558a6 100644 --- a/code/lib/preview-api/src/modules/preview-web/render/StoryRender.test.ts +++ b/code/lib/preview-api/src/modules/preview-web/render/StoryRender.test.ts @@ -231,7 +231,7 @@ describe('StoryRender', () => { it('reloads the page when remounting during loading', async () => { // Arrange - setup StoryRender and async gate blocking applyLoaders - const [loaderGate, openLoaderGate] = createGate(); + const [loaderGate] = createGate(); const story = { id: 'id', title: 'title', @@ -255,31 +255,17 @@ describe('StoryRender', () => { ); // Act - render, blocked by loaders - const renderPromise = render.renderToElement({} as any); + render.renderToElement({} as any); expect(story.applyLoaders).toHaveBeenCalledOnce(); expect(render.phase).toBe('loading'); // Act - remount render.remount(); - // Assert - window is reloaded, keep ticking until it happens - await new Promise((resolve) => { - setInterval(() => { - try { - expect(window.location.reload).toHaveBeenCalledOnce(); - resolve(); - } catch { - // empty catch to ignore the assertion failing - } - }, 0); + // Assert - window is reloaded + await vi.waitFor(() => { + expect(window.location.reload).toHaveBeenCalledOnce(); + expect(store.cleanupStory).toHaveBeenCalledOnce(); }); - - // Assert - everything is actually cleaned up, just in case - expect(store.cleanupStory).toHaveBeenCalledOnce(); - expect(window.location.reload).toHaveBeenCalledOnce(); - - // clear dangling promise - openLoaderGate(); - await renderPromise; }); }); }); From 1a3129313519841621f4c84d19d8185b65c50dca Mon Sep 17 00:00:00 2001 From: Jeppe Reinhold Date: Mon, 8 Apr 2024 14:12:14 +0200 Subject: [PATCH 10/82] only rerender once when triggered multiple times while a render is pending. --- .../preview-web/render/StoryRender.test.ts | 52 +++++++++++++++++++ .../modules/preview-web/render/StoryRender.ts | 19 ++++++- 2 files changed, 70 insertions(+), 1 deletion(-) diff --git a/code/lib/preview-api/src/modules/preview-web/render/StoryRender.test.ts b/code/lib/preview-api/src/modules/preview-web/render/StoryRender.test.ts index 7b21484558a6..5b4261a368c0 100644 --- a/code/lib/preview-api/src/modules/preview-web/render/StoryRender.test.ts +++ b/code/lib/preview-api/src/modules/preview-web/render/StoryRender.test.ts @@ -81,6 +81,58 @@ describe('StoryRender', () => { expect(story.playFunction).not.toHaveBeenCalled(); }); + it.only('only rerenders once when triggered multiple times while pending', async () => { + // Arrange - setup StoryRender and async gate blocking applyLoaders + const [loaderGate, openLoaderGate] = createGate(); + const story = { + id: 'id', + title: 'title', + name: 'name', + tags: [], + applyLoaders: vi.fn(() => loaderGate), + unboundStoryFn: vi.fn(), + playFunction: vi.fn(), + prepareContext: vi.fn(), + }; + const store = { getStoryContext: () => ({}), cleanupStory: vi.fn() }; + const renderToScreen = vi.fn(); + const render = new StoryRender( + new Channel({}), + store as any, + renderToScreen, + {} as any, + entry.id, + 'story', + { autoplay: true }, + story as any + ); + // Arrange - render (blocked by loaders) + render.renderToElement({} as any); + expect(story.applyLoaders).toHaveBeenCalledOnce(); + expect(render.phase).toBe('loading'); + + // Act - rerender 3x + render.rerender(); + render.rerender(); + render.rerender(); + + // Assert - still loading, not yet rendered + expect(story.applyLoaders).toHaveBeenCalledOnce(); + expect(render.phase).toBe('loading'); + expect(renderToScreen).not.toHaveBeenCalled(); + + // Act - finish loading + openLoaderGate(); + + // Assert - loaded and rendered twice, played once + await vi.waitFor(async () => { + console.log(render.phase); + expect(story.applyLoaders).toHaveBeenCalledTimes(2); + expect(renderToScreen).toHaveBeenCalledTimes(2); + expect(story.playFunction).toHaveBeenCalledOnce(); + }); + }); + describe('teardown', () => { it('throws PREPARE_ABORTED if torndown during prepare', async () => { const [importGate, openImportGate] = createGate(); 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 406b3deb3b95..9120628623f0 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 @@ -56,6 +56,8 @@ export class StoryRender implements Render {}; @@ -268,10 +270,25 @@ export class StoryRender implements Render Date: Mon, 8 Apr 2024 16:10:26 +0200 Subject: [PATCH 11/82] add story and e2e to test rendering race conditions --- ...review-web.spec.ts => preview-api.spec.ts} | 40 ++++++++++++++++++- .../template/stories/rendering.stories.ts | 28 +++++++++++++ 2 files changed, 67 insertions(+), 1 deletion(-) rename code/e2e-tests/{preview-web.spec.ts => preview-api.spec.ts} (56%) diff --git a/code/e2e-tests/preview-web.spec.ts b/code/e2e-tests/preview-api.spec.ts similarity index 56% rename from code/e2e-tests/preview-web.spec.ts rename to code/e2e-tests/preview-api.spec.ts index b4a96c4b6001..b0f5c48ddb79 100644 --- a/code/e2e-tests/preview-web.spec.ts +++ b/code/e2e-tests/preview-api.spec.ts @@ -5,7 +5,9 @@ import { SbPage } from './util'; const storybookUrl = process.env.STORYBOOK_URL || 'http://localhost:8001'; const templateName = process.env.STORYBOOK_TEMPLATE_NAME || ''; -test.describe('preview-web', () => { +const wait = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms)); + +test.describe('preview-api', () => { test.beforeEach(async ({ page }) => { await page.goto(storybookUrl); @@ -50,4 +52,40 @@ test.describe('preview-web', () => { await sbPage.previewRoot().getByRole('button').getByText('Submit').first().press('Alt+s'); await expect(sbPage.page.locator('.sidebar-container')).not.toBeVisible(); }); + + // if rerenders where interleaved the button would have rendered something like "Loading... Done. Done. Done. Done. Changed arg" + test('should only render once at a time when rapidly changing args', async ({ page }) => { + const sbPage = new SbPage(page); + await sbPage.navigateToStory('lib/preview-api/rendering', 'slow-loader'); + + const root = sbPage.previewRoot(); + + const labelControl = await sbPage.page.locator('#control-label'); + + await expect(root.getByText('Loading... Done. Click me')).toBeVisible(); + await expect(labelControl).toBeVisible(); + + await labelControl.fill(''); + await labelControl.type('Changed arg', { delay: 50 }); + await labelControl.blur(); + + await expect(root.getByText('Loading... Done. Changed arg')).toBeVisible(); + }); + + test('should reload plage when remounting while loading', async ({ page }) => { + const sbPage = new SbPage(page); + await sbPage.navigateToStory('lib/preview-api/rendering', 'slow-loader'); + + const root = sbPage.previewRoot(); + + await expect(root.getByText('Loading... Done. Click me')).toBeVisible(); + + await sbPage.page.getByRole('button', { name: 'Remount component' }).click(); + await wait(200); + await sbPage.page.getByRole('button', { name: 'Remount component' }).click(); + + // the loading spinner indicates the iframe is being fully reloaded + await expect(sbPage.previewIframe().locator('.sb-preparing-story > .sb-loader')).toBeVisible(); + await expect(root.getByText('Loading... Done. Click me')).toBeVisible(); + }); }); diff --git a/code/lib/preview-api/template/stories/rendering.stories.ts b/code/lib/preview-api/template/stories/rendering.stories.ts index 477e07137987..f21893042369 100644 --- a/code/lib/preview-api/template/stories/rendering.stories.ts +++ b/code/lib/preview-api/template/stories/rendering.stories.ts @@ -66,3 +66,31 @@ export const ChangeArgs = { await expect(button).toHaveFocus(); }, }; + +let loadedLabel = 'Initial'; + +/** + * This story demonstrates what happens when rendering (loaders) have side effects, and can possibly interleave with each other + * Triggering multiple force remounts quickly should only result in a single remount in the end + * and the label should be 'Loading... Done. Click Me' at the end. If loaders are interleaving it could result in a label of 'Loading... Done. Done. Done. Done. Click Me' + * Similarly, changing args rapidly should only cause one rerender at a time, producing the same result. + */ +export const SlowLoader = { + loaders: [ + async () => { + loadedLabel = 'Loading...'; + await new Promise((resolve) => setTimeout(resolve, 1000)); + loadedLabel += ' Done.'; + return { label: loadedLabel }; + }, + ], + decorators: [ + (storyFn: any, context: any) => + storyFn({ + args: { + ...context.args, + label: `${context.loaded.label} ${context.args.label}`, + }, + }), + ], +}; From 9fab232eb27798fa8059179656c431b2f6c8b01b Mon Sep 17 00:00:00 2001 From: Jeppe Reinhold Date: Mon, 8 Apr 2024 23:55:11 +0200 Subject: [PATCH 12/82] fix tests --- .../src/modules/preview-web/render/StoryRender.test.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/lib/preview-api/src/modules/preview-web/render/StoryRender.test.ts b/code/lib/preview-api/src/modules/preview-web/render/StoryRender.test.ts index 5b4261a368c0..d9c5bdcc0863 100644 --- a/code/lib/preview-api/src/modules/preview-web/render/StoryRender.test.ts +++ b/code/lib/preview-api/src/modules/preview-web/render/StoryRender.test.ts @@ -81,7 +81,7 @@ describe('StoryRender', () => { expect(story.playFunction).not.toHaveBeenCalled(); }); - it.only('only rerenders once when triggered multiple times while pending', async () => { + it('only rerenders once when triggered multiple times while pending', async () => { // Arrange - setup StoryRender and async gate blocking applyLoaders const [loaderGate, openLoaderGate] = createGate(); const story = { From 0c6f1fdeb8d288b48070b8b52c9b03c0cfd784be Mon Sep 17 00:00:00 2001 From: Jeppe Reinhold Date: Tue, 9 Apr 2024 12:24:54 +0200 Subject: [PATCH 13/82] clearer loading label --- code/e2e-tests/preview-api.spec.ts | 10 +++++----- .../preview-api/template/stories/rendering.stories.ts | 4 ++-- 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/code/e2e-tests/preview-api.spec.ts b/code/e2e-tests/preview-api.spec.ts index b0f5c48ddb79..662a638bc84c 100644 --- a/code/e2e-tests/preview-api.spec.ts +++ b/code/e2e-tests/preview-api.spec.ts @@ -53,7 +53,7 @@ test.describe('preview-api', () => { await expect(sbPage.page.locator('.sidebar-container')).not.toBeVisible(); }); - // if rerenders where interleaved the button would have rendered something like "Loading... Done. Done. Done. Done. Changed arg" + // if rerenders were interleaved the button would have rendered "Error: Interleaved loaders. Changed arg" test('should only render once at a time when rapidly changing args', async ({ page }) => { const sbPage = new SbPage(page); await sbPage.navigateToStory('lib/preview-api/rendering', 'slow-loader'); @@ -62,14 +62,14 @@ test.describe('preview-api', () => { const labelControl = await sbPage.page.locator('#control-label'); - await expect(root.getByText('Loading... Done. Click me')).toBeVisible(); + await expect(root.getByText('Loaded. Click me')).toBeVisible(); await expect(labelControl).toBeVisible(); await labelControl.fill(''); await labelControl.type('Changed arg', { delay: 50 }); await labelControl.blur(); - await expect(root.getByText('Loading... Done. Changed arg')).toBeVisible(); + await expect(root.getByText('Loaded. Changed arg')).toBeVisible(); }); test('should reload plage when remounting while loading', async ({ page }) => { @@ -78,7 +78,7 @@ test.describe('preview-api', () => { const root = sbPage.previewRoot(); - await expect(root.getByText('Loading... Done. Click me')).toBeVisible(); + await expect(root.getByText('Loaded. Click me')).toBeVisible(); await sbPage.page.getByRole('button', { name: 'Remount component' }).click(); await wait(200); @@ -86,6 +86,6 @@ test.describe('preview-api', () => { // the loading spinner indicates the iframe is being fully reloaded await expect(sbPage.previewIframe().locator('.sb-preparing-story > .sb-loader')).toBeVisible(); - await expect(root.getByText('Loading... Done. Click me')).toBeVisible(); + await expect(root.getByText('Loaded. Click me')).toBeVisible(); }); }); diff --git a/code/lib/preview-api/template/stories/rendering.stories.ts b/code/lib/preview-api/template/stories/rendering.stories.ts index f21893042369..cfa655bf7b11 100644 --- a/code/lib/preview-api/template/stories/rendering.stories.ts +++ b/code/lib/preview-api/template/stories/rendering.stories.ts @@ -72,7 +72,7 @@ let loadedLabel = 'Initial'; /** * This story demonstrates what happens when rendering (loaders) have side effects, and can possibly interleave with each other * Triggering multiple force remounts quickly should only result in a single remount in the end - * and the label should be 'Loading... Done. Click Me' at the end. If loaders are interleaving it could result in a label of 'Loading... Done. Done. Done. Done. Click Me' + * and the label should be 'Loaded. Click Me' at the end. If loaders are interleaving it would result in a label of 'Error: Interleaved loaders. Click Me' * Similarly, changing args rapidly should only cause one rerender at a time, producing the same result. */ export const SlowLoader = { @@ -80,7 +80,7 @@ export const SlowLoader = { async () => { loadedLabel = 'Loading...'; await new Promise((resolve) => setTimeout(resolve, 1000)); - loadedLabel += ' Done.'; + loadedLabel = loadedLabel === 'Loading...' ? 'Loaded.' : 'Error: Interleaved loaders.'; return { label: loadedLabel }; }, ], From b9c48bedcd489e689c51cebc2716b452a050b85b Mon Sep 17 00:00:00 2001 From: Jeppe Reinhold Date: Tue, 9 Apr 2024 14:14:46 +0200 Subject: [PATCH 14/82] dont enqueue rerender during playing --- .../src/modules/preview-web/render/StoryRender.ts | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) 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 9120628623f0..74e88bfecd2c 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 @@ -280,11 +280,13 @@ export class StoryRender implements Render Date: Wed, 10 Apr 2024 10:56:34 +0200 Subject: [PATCH 15/82] Implement beforeEach --- code/addons/links/package.json | 2 +- code/lib/codemod/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 +- .../src/modules/store/csf/composeConfigs.ts | 1 + .../store/csf/normalizeProjectAnnotations.ts | 2 + .../src/modules/store/csf/normalizeStory.ts | 5 +++ .../src/modules/store/csf/prepareStory.ts | 13 ++++++ 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 | 42 +++++++++---------- 17 files changed, 54 insertions(+), 33 deletions(-) diff --git a/code/addons/links/package.json b/code/addons/links/package.json index fe80a6e7e176..9a5d6bd5478e 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.2", + "@storybook/csf": "0.1.4--canary.82.941efd8.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 fb16575f724e..c779463f6fab 100644 --- a/code/lib/codemod/package.json +++ b/code/lib/codemod/package.json @@ -57,7 +57,7 @@ "@babel/core": "^7.23.2", "@babel/preset-env": "^7.23.2", "@babel/types": "^7.23.0", - "@storybook/csf": "^0.1.2", + "@storybook/csf": "0.1.4--canary.82.941efd8.0", "@storybook/csf-tools": "workspace:*", "@storybook/node-logger": "workspace:*", "@storybook/types": "workspace:*", diff --git a/code/lib/core-server/package.json b/code/lib/core-server/package.json index 3ca426d6bfb0..4651e33ad50d 100644 --- a/code/lib/core-server/package.json +++ b/code/lib/core-server/package.json @@ -62,7 +62,7 @@ "@storybook/channels": "workspace:*", "@storybook/core-common": "workspace:*", "@storybook/core-events": "workspace:*", - "@storybook/csf": "^0.1.2", + "@storybook/csf": "0.1.4--canary.82.941efd8.0", "@storybook/csf-tools": "workspace:*", "@storybook/docs-mdx": "3.0.0", "@storybook/global": "^5.0.0", diff --git a/code/lib/csf-tools/package.json b/code/lib/csf-tools/package.json index 2b0affad76f0..d2c46c488401 100644 --- a/code/lib/csf-tools/package.json +++ b/code/lib/csf-tools/package.json @@ -46,7 +46,7 @@ "@babel/parser": "^7.23.0", "@babel/traverse": "^7.23.2", "@babel/types": "^7.23.0", - "@storybook/csf": "^0.1.2", + "@storybook/csf": "0.1.4--canary.82.941efd8.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 8b48054b414f..88f920aa794e 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.2", + "@storybook/csf": "0.1.4--canary.82.941efd8.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 74c00aad57c9..7a53ee32cbb5 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.2", + "@storybook/csf": "0.1.4--canary.82.941efd8.0", "@storybook/global": "^5.0.0", "@storybook/types": "workspace:*", "@types/qs": "^6.9.5", diff --git a/code/lib/preview-api/src/modules/store/csf/composeConfigs.ts b/code/lib/preview-api/src/modules/store/csf/composeConfigs.ts index e5785a6a3f01..12bf9fc9e050 100644 --- a/code/lib/preview-api/src/modules/store/csf/composeConfigs.ts +++ b/code/lib/preview-api/src/modules/store/csf/composeConfigs.ts @@ -58,6 +58,7 @@ export function composeConfigs( globals: getObjectField(moduleExportList, 'globals'), globalTypes: getObjectField(moduleExportList, 'globalTypes'), loaders: getArrayField(moduleExportList, 'loaders'), + beforeEach: getArrayField(moduleExportList, 'beforeEach'), render: getSingletonField(moduleExportList, 'render'), renderToCanvas: getSingletonField(moduleExportList, 'renderToCanvas'), renderToDOM: getSingletonField(moduleExportList, 'renderToDOM'), // deprecated diff --git a/code/lib/preview-api/src/modules/store/csf/normalizeProjectAnnotations.ts b/code/lib/preview-api/src/modules/store/csf/normalizeProjectAnnotations.ts index e2e6a88db31e..60cca0023352 100644 --- a/code/lib/preview-api/src/modules/store/csf/normalizeProjectAnnotations.ts +++ b/code/lib/preview-api/src/modules/store/csf/normalizeProjectAnnotations.ts @@ -16,6 +16,7 @@ export function normalizeProjectAnnotations({ argTypesEnhancers, decorators, loaders, + beforeEach, ...annotations }: ProjectAnnotations): NormalizedProjectAnnotations { return { @@ -23,6 +24,7 @@ export function normalizeProjectAnnotations({ ...(globalTypes && { globalTypes: normalizeInputTypes(globalTypes) }), decorators: normalizeArrays(decorators), loaders: normalizeArrays(loaders), + beforeEach: normalizeArrays(beforeEach), argTypesEnhancers: [ ...(argTypesEnhancers || []), inferArgTypes, diff --git a/code/lib/preview-api/src/modules/store/csf/normalizeStory.ts b/code/lib/preview-api/src/modules/store/csf/normalizeStory.ts index 9a96bc4a332e..fc228251d82e 100644 --- a/code/lib/preview-api/src/modules/store/csf/normalizeStory.ts +++ b/code/lib/preview-api/src/modules/store/csf/normalizeStory.ts @@ -54,6 +54,10 @@ export function normalizeStory( const args = { ...story?.args, ...storyObject.args }; const argTypes = { ...(story?.argTypes as ArgTypes), ...(storyObject.argTypes as ArgTypes) }; const loaders = [...normalizeArrays(storyObject.loaders), ...normalizeArrays(story?.loaders)]; + const beforeEach = [ + ...normalizeArrays(storyObject.beforeEach), + ...normalizeArrays(story?.beforeEach), + ]; const { render, play, tags = [] } = storyObject; // eslint-disable-next-line no-underscore-dangle @@ -68,6 +72,7 @@ export function normalizeStory( args, argTypes: normalizeInputTypes(argTypes), loaders, + beforeEach, ...(render && { render }), ...(userStoryFn && { userStoryFn }), ...(play && { play }), diff --git a/code/lib/preview-api/src/modules/store/csf/prepareStory.ts b/code/lib/preview-api/src/modules/store/csf/prepareStory.ts index 0e5ea37500cd..96ade956ea05 100644 --- a/code/lib/preview-api/src/modules/store/csf/prepareStory.ts +++ b/code/lib/preview-api/src/modules/store/csf/prepareStory.ts @@ -65,6 +65,19 @@ export function prepareStory( const loaded: Record = Object.assign({}, ...loadResults); updatedContext = { ...updatedContext, loaded: { ...updatedContext.loaded, ...loaded } }; } + + // TODO: What to do with those? + const cleanups = new Array<() => unknown>(); + for (const beforeEach of [ + ...normalizeArrays(projectAnnotations.beforeEach), + ...normalizeArrays(componentAnnotations.beforeEach), + ...normalizeArrays(storyAnnotations.beforeEach), + ]) { + const cleanup = await beforeEach(updatedContext); + if (cleanup) { + cleanups.push(cleanup); + } + } return updatedContext; }; diff --git a/code/lib/source-loader/package.json b/code/lib/source-loader/package.json index 54c5bb179319..887cdd991197 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.2", + "@storybook/csf": "0.1.4--canary.82.941efd8.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 d3f6b1dd7217..ae17e6f42abb 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.2", + "@storybook/csf": "0.1.4--canary.82.941efd8.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 399bf6dd0b11..cc041241fd05 100644 --- a/code/package.json +++ b/code/package.json @@ -127,7 +127,7 @@ "@storybook/core-events": "workspace:*", "@storybook/core-server": "workspace:*", "@storybook/core-webpack": "workspace:*", - "@storybook/csf": "^0.1.2", + "@storybook/csf": "0.1.4--canary.82.941efd8.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 8d81e4f749cc..21273de7423e 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.2", + "@storybook/csf": "0.1.4--canary.82.941efd8.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 e132238b4fe3..8cf6fe475bf7 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.2", + "@storybook/csf": "0.1.4--canary.82.941efd8.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 3ea8cec3af85..c7086603a7a5 100644 --- a/code/ui/components/package.json +++ b/code/ui/components/package.json @@ -61,7 +61,7 @@ "dependencies": { "@radix-ui/react-slot": "^1.0.2", "@storybook/client-logger": "workspace:*", - "@storybook/csf": "^0.1.2", + "@storybook/csf": "0.1.4--canary.82.941efd8.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 f4deb1517325..f4e9a440a185 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -4940,7 +4940,7 @@ __metadata: dependencies: "@storybook/client-logger": "workspace:*" "@storybook/core-events": "workspace:*" - "@storybook/csf": "npm:^0.1.2" + "@storybook/csf": "npm:0.1.4--canary.82.941efd8.0" "@storybook/global": "npm:^5.0.0" "@storybook/manager-api": "workspace:*" "@storybook/preview-api": "workspace:*" @@ -5208,7 +5208,7 @@ __metadata: "@storybook/client-logger": "workspace:*" "@storybook/components": "workspace:*" "@storybook/core-events": "workspace:*" - "@storybook/csf": "npm:^0.1.2" + "@storybook/csf": "npm:0.1.4--canary.82.941efd8.0" "@storybook/docs-tools": "workspace:*" "@storybook/global": "npm:^5.0.0" "@storybook/icons": "npm:^1.2.5" @@ -5439,7 +5439,7 @@ __metadata: "@babel/core": "npm:^7.23.2" "@babel/preset-env": "npm:^7.23.2" "@babel/types": "npm:^7.23.0" - "@storybook/csf": "npm:^0.1.2" + "@storybook/csf": "npm:0.1.4--canary.82.941efd8.0" "@storybook/csf-tools": "workspace:*" "@storybook/node-logger": "workspace:*" "@storybook/types": "workspace:*" @@ -5475,7 +5475,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.2" + "@storybook/csf": "npm:0.1.4--canary.82.941efd8.0" "@storybook/global": "npm:^5.0.0" "@storybook/icons": "npm:^1.2.5" "@storybook/test": "workspace:*" @@ -5568,7 +5568,7 @@ __metadata: "@storybook/channels": "workspace:*" "@storybook/core-common": "workspace:*" "@storybook/core-events": "workspace:*" - "@storybook/csf": "npm:^0.1.2" + "@storybook/csf": "npm:0.1.4--canary.82.941efd8.0" "@storybook/csf-tools": "workspace:*" "@storybook/docs-mdx": "npm:3.0.0" "@storybook/global": "npm:^5.0.0" @@ -5648,7 +5648,7 @@ __metadata: "@babel/parser": "npm:^7.23.0" "@babel/traverse": "npm:^7.23.2" "@babel/types": "npm:^7.23.0" - "@storybook/csf": "npm:^0.1.2" + "@storybook/csf": "npm:0.1.4--canary.82.941efd8.0" "@storybook/types": "workspace:*" "@types/fs-extra": "npm:^11.0.1" "@types/js-yaml": "npm:^4.0.5" @@ -5660,6 +5660,15 @@ __metadata: languageName: unknown linkType: soft +"@storybook/csf@npm:0.1.4--canary.82.941efd8.0": + version: 0.1.4--canary.82.941efd8.0 + resolution: "@storybook/csf@npm:0.1.4--canary.82.941efd8.0" + dependencies: + type-fest: "npm:^2.19.0" + checksum: 10c0/73eca2cf2ae69061ea68db6b5c8fd663615c3f5f9f802ed51aba47cb9a4f50d294959b0d1a90045252c9380512dbb8d9840b88c4c26d49b61d04ed0b6581bedf + languageName: node + linkType: hard + "@storybook/csf@npm:^0.0.1": version: 0.0.1 resolution: "@storybook/csf@npm:0.0.1" @@ -5669,15 +5678,6 @@ __metadata: languageName: node linkType: hard -"@storybook/csf@npm:^0.1.2": - version: 0.1.2 - resolution: "@storybook/csf@npm:0.1.2" - dependencies: - type-fest: "npm:^2.19.0" - checksum: 10c0/b51a55292e5d2af8b1d135a28ecaa94f8860ddfedcb393adfa2cca1ee23853156066f737d8be1cb5412f572781aa525dc0b2f6e4a6f6ce805489f0149efe837c - languageName: node - linkType: hard - "@storybook/docs-mdx@npm:3.0.0": version: 3.0.0 resolution: "@storybook/docs-mdx@npm:3.0.0" @@ -5845,7 +5845,7 @@ __metadata: "@storybook/channels": "workspace:*" "@storybook/client-logger": "workspace:*" "@storybook/core-events": "workspace:*" - "@storybook/csf": "npm:^0.1.2" + "@storybook/csf": "npm:0.1.4--canary.82.941efd8.0" "@storybook/global": "npm:^5.0.0" "@storybook/icons": "npm:^1.2.5" "@storybook/router": "workspace:*" @@ -6177,7 +6177,7 @@ __metadata: "@storybook/client-logger": "workspace:*" "@storybook/core-common": "workspace:*" "@storybook/core-events": "workspace:*" - "@storybook/csf": "npm:^0.1.2" + "@storybook/csf": "npm:0.1.4--canary.82.941efd8.0" "@storybook/global": "npm:^5.0.0" "@storybook/types": "workspace:*" "@types/qs": "npm:^6.9.5" @@ -6362,7 +6362,7 @@ __metadata: "@storybook/core-events": "workspace:*" "@storybook/core-server": "workspace:*" "@storybook/core-webpack": "workspace:*" - "@storybook/csf": "npm:^0.1.2" + "@storybook/csf": "npm:0.1.4--canary.82.941efd8.0" "@storybook/csf-plugin": "workspace:*" "@storybook/csf-tools": "workspace:*" "@storybook/docs-tools": "workspace:*" @@ -6517,7 +6517,7 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/server@workspace:renderers/server" dependencies: - "@storybook/csf": "npm:^0.1.2" + "@storybook/csf": "npm:0.1.4--canary.82.941efd8.0" "@storybook/csf-tools": "workspace:*" "@storybook/global": "npm:^5.0.0" "@storybook/preview-api": "workspace:*" @@ -6534,7 +6534,7 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/source-loader@workspace:lib/source-loader" dependencies: - "@storybook/csf": "npm:^0.1.2" + "@storybook/csf": "npm:0.1.4--canary.82.941efd8.0" "@storybook/types": "workspace:*" estraverse: "npm:^5.2.0" lodash: "npm:^4.17.21" @@ -6712,7 +6712,7 @@ __metadata: resolution: "@storybook/types@workspace:lib/types" dependencies: "@storybook/channels": "workspace:*" - "@storybook/csf": "npm:^0.1.2" + "@storybook/csf": "npm:0.1.4--canary.82.941efd8.0" "@types/express": "npm:^4.7.0" "@types/fs-extra": "npm:^11.0.1" "@types/node": "npm:^18.0.0" From b459208498c24f58c762baea8c6de7e83c4ae761 Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Fri, 5 Apr 2024 13:09:21 +0200 Subject: [PATCH 16/82] Next.js: Add next/headers mocks --- code/frameworks/nextjs/package.json | 3 + code/frameworks/nextjs/src/headers/cookies.ts | 111 ++++++++++++++++++ code/frameworks/nextjs/src/headers/headers.ts | 104 ++++++++++++++++ code/frameworks/nextjs/src/headers/index.ts | 2 + code/frameworks/nextjs/src/headers/webpack.ts | 9 ++ code/frameworks/nextjs/src/preset.ts | 2 + code/frameworks/nextjs/src/preview.tsx | 6 + .../NextHeader.stories.tsx | 13 ++ .../stories_nextjs-default-ts/NextHeader.tsx | 20 ++++ code/yarn.lock | 1 + 10 files changed, 271 insertions(+) create mode 100644 code/frameworks/nextjs/src/headers/cookies.ts create mode 100644 code/frameworks/nextjs/src/headers/headers.ts create mode 100644 code/frameworks/nextjs/src/headers/index.ts create mode 100644 code/frameworks/nextjs/src/headers/webpack.ts create mode 100644 code/frameworks/nextjs/template/stories_nextjs-default-ts/NextHeader.stories.tsx create mode 100644 code/frameworks/nextjs/template/stories_nextjs-default-ts/NextHeader.tsx diff --git a/code/frameworks/nextjs/package.json b/code/frameworks/nextjs/package.json index b918ba86c2a0..7689995156d5 100644 --- a/code/frameworks/nextjs/package.json +++ b/code/frameworks/nextjs/package.json @@ -47,6 +47,7 @@ "require": "./dist/next-image-loader-stub.js", "import": "./dist/next-image-loader-stub.mjs" }, + "./headers": "./dist/headers/index.mjs", "./package.json": "./package.json" }, "main": "dist/index.js", @@ -97,6 +98,7 @@ "@storybook/preset-react-webpack": "workspace:*", "@storybook/preview-api": "workspace:*", "@storybook/react": "workspace:*", + "@storybook/test": "workspace:*", "@storybook/types": "workspace:*", "@types/node": "^18.0.0", "@types/semver": "^7.3.4", @@ -158,6 +160,7 @@ "./src/index.ts", "./src/preset.ts", "./src/preview.tsx", + "./src/headers/index.ts", "./src/next-image-loader-stub.ts", "./src/images/decorator.tsx", "./src/images/next-legacy-image.tsx", diff --git a/code/frameworks/nextjs/src/headers/cookies.ts b/code/frameworks/nextjs/src/headers/cookies.ts new file mode 100644 index 000000000000..77124fb73339 --- /dev/null +++ b/code/frameworks/nextjs/src/headers/cookies.ts @@ -0,0 +1,111 @@ +/* eslint-disable no-underscore-dangle */ +import { fn } from '@storybook/test'; +import { headers } from './headers'; +import { + parseCookie, + stringifyCookie, + type RequestCookie, +} from 'next/dist/compiled/@edge-runtime/cookies'; + +// Mostly copied from https://github.com/vercel/edge-runtime/blob/c25e2ded39104e2a3be82efc08baf8dc8fb436b3/packages/cookies/src/request-cookies.ts#L7 +class CookieStore { + /** @internal */ + readonly _headers?: Headers; + + store = new Map(); + + _parsed: Map = new Map(); + + constructor(requestHeaders?: Headers) { + this._headers = requestHeaders; + const header = requestHeaders?.get('cookie'); + if (header) { + const parsed = parseCookie(header); + for (const [name, value] of parsed) { + this._parsed.set(name, { name, value }); + } + } + } + + /** @internal */ + mockRestore = () => { + this.clear(); + }; + + get size(): number { + return this._parsed.size; + } + + get = fn((...args: [name: string] | [RequestCookie]) => { + const name = typeof args[0] === 'string' ? args[0] : args[0].name; + return this._parsed.get(name); + }).mockName('cookies().get'); + + getAll = fn((...args: [name: string] | [RequestCookie] | []) => { + const all = Array.from(this._parsed); + if (!args.length) { + return all.map(([_, value]) => value); + } + + const name = typeof args[0] === 'string' ? args[0] : args[0]?.name; + return all.filter(([n]) => n === name).map(([_, value]) => value); + }).mockName('cookies().getAll'); + + has = fn((name: string) => { + return this._parsed.has(name); + }).mockName('cookies().has'); + + set = fn((...args: [key: string, value: string] | [options: RequestCookie]): this => { + const [name, value] = args.length === 1 ? [args[0].name, args[0].value] : args; + + const map = this._parsed; + map.set(name, { name, value }); + + this._headers?.set( + 'cookie', + Array.from(map) + .map(([_, v]) => stringifyCookie(v)) + .join('; ') + ); + return this; + }).mockName('cookies().set'); + + /** + * Delete the cookies matching the passed name or names in the request. + */ + delete = fn( + ( + /** Name or names of the cookies to be deleted */ + names: string | string[] + ): boolean | boolean[] => { + const map = this._parsed; + const result = !Array.isArray(names) + ? map.delete(names) + : names.map((name) => map.delete(name)); + this._headers?.set( + 'cookie', + Array.from(map) + .map(([_, value]) => stringifyCookie(value)) + .join('; ') + ); + return result; + } + ).mockName('cookies().delete'); + + /** + * Delete all the cookies in the cookies in the request. + */ + clear = fn((): this => { + this.delete(Array.from(this._parsed.keys())); + return this; + }).mockName('cookies().clear'); +} + +let cookieStore: CookieStore; + +export const cookies = (): CookieStore => { + if (!cookieStore) { + cookieStore = new CookieStore(headers()); + } + return cookieStore; +}; diff --git a/code/frameworks/nextjs/src/headers/headers.ts b/code/frameworks/nextjs/src/headers/headers.ts new file mode 100644 index 000000000000..c1ddc679a337 --- /dev/null +++ b/code/frameworks/nextjs/src/headers/headers.ts @@ -0,0 +1,104 @@ +import { fn } from '@storybook/test'; +import type { IncomingHttpHeaders } from 'http'; + +// Mostly copied from https://github.com/vercel/next.js/blob/763b9a660433ec5278a10e59d7ae89d4010ba212/packages/next/src/server/web/spec-extension/adapters/headers.ts#L20 +export class HeadersStore extends Headers { + private readonly headers: IncomingHttpHeaders = {}; + + /** @internal */ + mockRestore = () => { + this.forEach((key) => this.delete(key)); + }; + + /** + * Merges a header value into a string. This stores multiple values as an + * array, so we need to merge them into a string. + * + * @param value a header value + * @returns a merged header value (a string) + */ + private merge(value: string | string[]): string { + if (Array.isArray(value)) return value.join(', '); + + return value; + } + + public append = fn((name: string, value: string): void => { + const existing = this.headers[name]; + if (typeof existing === 'string') { + this.headers[name] = [existing, value]; + } else if (Array.isArray(existing)) { + existing.push(value); + } else { + this.headers[name] = value; + } + }).mockName('headers().append'); + + public delete = fn((name: string) => { + delete this.headers[name]; + }).mockName('headers().delete'); + + public get = fn((name: string): string | null => { + const value = this.headers[name]; + if (typeof value !== 'undefined') return this.merge(value); + + return null; + }).mockName('headers().get'); + + public has = fn((name: string): boolean => { + return typeof this.headers[name] !== 'undefined'; + }).mockName('headers().has'); + + public set = fn((name: string, value: string): void => { + this.headers[name] = value; + }).mockName('headers().set'); + + public forEach = fn( + (callbackfn: (value: string, name: string, parent: Headers) => void, thisArg?: any): void => { + for (const [name, value] of this.entries()) { + callbackfn.call(thisArg, value, name, this); + } + } + ).mockName('headers().forEach'); + + public *entries(): IterableIterator<[string, string]> { + for (const key of Object.keys(this.headers)) { + const name = key.toLowerCase(); + // We assert here that this is a string because we got it from the + // Object.keys() call above. + const value = this.get(name) as string; + + yield [name, value] as [string, string]; + } + } + + public *keys(): IterableIterator { + for (const key of Object.keys(this.headers)) { + const name = key.toLowerCase(); + yield name; + } + } + + public *values(): IterableIterator { + for (const key of Object.keys(this.headers)) { + // We assert here that this is a string because we got it from the + // Object.keys() call above. + const value = this.get(key) as string; + + yield value; + } + } + + public [Symbol.iterator](): IterableIterator<[string, string]> { + return this.entries(); + } +} + +let headerStore: HeadersStore; + +export const headers = (): HeadersStore => { + if (!headerStore) { + headerStore = new HeadersStore(); + } + return headerStore; +}; diff --git a/code/frameworks/nextjs/src/headers/index.ts b/code/frameworks/nextjs/src/headers/index.ts new file mode 100644 index 000000000000..160b2e6f37f7 --- /dev/null +++ b/code/frameworks/nextjs/src/headers/index.ts @@ -0,0 +1,2 @@ +export * from './headers'; +export * from './cookies'; diff --git a/code/frameworks/nextjs/src/headers/webpack.ts b/code/frameworks/nextjs/src/headers/webpack.ts new file mode 100644 index 000000000000..794a89adc1fe --- /dev/null +++ b/code/frameworks/nextjs/src/headers/webpack.ts @@ -0,0 +1,9 @@ +import type { Configuration as WebpackConfig } from 'webpack'; + +export const configureNextHeaders = (baseConfig: WebpackConfig): void => { + const resolve = baseConfig.resolve ?? {}; + resolve.alias = { + ...resolve.alias, + 'next/headers': require.resolve('@storybook/nextjs/headers'), + }; +}; diff --git a/code/frameworks/nextjs/src/preset.ts b/code/frameworks/nextjs/src/preset.ts index e76db8104d1b..855dd3961582 100644 --- a/code/frameworks/nextjs/src/preset.ts +++ b/code/frameworks/nextjs/src/preset.ts @@ -23,6 +23,7 @@ import { configureBabelLoader } from './babel/loader'; import { configureFastRefresh } from './fastRefresh/webpack'; import { configureAliases } from './aliases/webpack'; import { logger } from '@storybook/node-logger'; +import { configureNextHeaders } from './headers/webpack'; export const addons: PresetProperty<'addons'> = [ dirname(require.resolve(join('@storybook/preset-react-webpack', 'package.json'))), @@ -134,6 +135,7 @@ export const webpackFinal: StorybookConfig['webpackFinal'] = async (baseConfig, configureStyledJsx(baseConfig); configureNodePolyfills(baseConfig); configureAliases(baseConfig); + configureNextHeaders(baseConfig); if (isDevelopment) { configureFastRefresh(baseConfig); diff --git a/code/frameworks/nextjs/src/preview.tsx b/code/frameworks/nextjs/src/preview.tsx index 9f30af9d787d..0d0b30f9d3ac 100644 --- a/code/frameworks/nextjs/src/preview.tsx +++ b/code/frameworks/nextjs/src/preview.tsx @@ -4,6 +4,7 @@ import { ImageDecorator } from './images/decorator'; import { RouterDecorator } from './routing/decorator'; import { StyledJsxDecorator } from './styledJsx/decorator'; import { HeadManagerDecorator } from './head-manager/decorator'; +import { cookies, headers } from './headers'; function addNextHeadCount() { const meta = document.createElement('meta'); @@ -21,6 +22,11 @@ export const decorators: Addon_DecoratorFunction[] = [ HeadManagerDecorator, ]; +export const loaders = async () => { + cookies().mockRestore(); + headers().mockRestore(); +}; + export const parameters = { docs: { source: { 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 new file mode 100644 index 000000000000..f62323bff6f2 --- /dev/null +++ b/code/frameworks/nextjs/template/stories_nextjs-default-ts/NextHeader.stories.tsx @@ -0,0 +1,13 @@ +import NextHeader from './NextHeader'; +import { cookies, headers } from '@storybook/nextjs/headers'; + +export default { + component: NextHeader, +}; + +export const Default = { + loaders: async () => { + cookies().set('fullName', 'Jane Doe'); + headers().set('timezone', 'Central European Summer Time'); + }, +}; diff --git a/code/frameworks/nextjs/template/stories_nextjs-default-ts/NextHeader.tsx b/code/frameworks/nextjs/template/stories_nextjs-default-ts/NextHeader.tsx new file mode 100644 index 000000000000..e5f80e4b0e96 --- /dev/null +++ b/code/frameworks/nextjs/template/stories_nextjs-default-ts/NextHeader.tsx @@ -0,0 +1,20 @@ +import React from 'react'; +import { cookies, headers } from 'next/headers'; + +export default function Component() { + return ( + <> +

Headers:

+
+

Name: "timezone"

+

Value: "{headers().get('timezone')}"

+
+ +

Cookies:

+
+

Name: "fullName"

+

Value: "{JSON.stringify(cookies().get('fullName'))}"

+
+ + ); +} diff --git a/code/yarn.lock b/code/yarn.lock index bbfe0f55b128..aa1315007109 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -5948,6 +5948,7 @@ __metadata: "@storybook/preset-react-webpack": "workspace:*" "@storybook/preview-api": "workspace:*" "@storybook/react": "workspace:*" + "@storybook/test": "workspace:*" "@storybook/types": "workspace:*" "@types/babel__core": "npm:^7" "@types/babel__plugin-transform-runtime": "npm:^7" From e881b95ff9a4c4f5c6c60b827894b4e7a52377ef Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Fri, 5 Apr 2024 13:09:49 +0200 Subject: [PATCH 17/82] temporarily prebundle @testing-library/dom --- 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 24379945cc57..08e71286c31c 100644 --- a/code/lib/test/package.json +++ b/code/lib/test/package.json @@ -69,7 +69,6 @@ "./src/index.ts" ], "noExternal": [ - "@testing-library/dom", "@testing-library/jest-dom", "@testing-library/user-event", "chai" From 00d5614a8d222e6f211d129da18cfc2e594cf45b Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Fri, 5 Apr 2024 17:34:03 +0200 Subject: [PATCH 18/82] address review comments --- code/frameworks/nextjs/src/headers/cookies.ts | 48 ++++++++++++------- code/frameworks/nextjs/src/headers/headers.ts | 11 ++++- .../NextHeader.stories.tsx | 21 ++++++-- .../stories_nextjs-default-ts/NextHeader.tsx | 39 +++++++++++---- code/lib/test/package.json | 1 + 5 files changed, 88 insertions(+), 32 deletions(-) diff --git a/code/frameworks/nextjs/src/headers/cookies.ts b/code/frameworks/nextjs/src/headers/cookies.ts index 77124fb73339..0335527367fc 100644 --- a/code/frameworks/nextjs/src/headers/cookies.ts +++ b/code/frameworks/nextjs/src/headers/cookies.ts @@ -1,22 +1,28 @@ /* eslint-disable no-underscore-dangle */ import { fn } from '@storybook/test'; +import type { HeadersStore } from './headers'; import { headers } from './headers'; +import type { RequestCookies } from 'next/dist/compiled/@edge-runtime/cookies'; import { parseCookie, stringifyCookie, type RequestCookie, } from 'next/dist/compiled/@edge-runtime/cookies'; +const stringifyCookies = (map: Map) => { + return Array.from(map) + .map(([_, v]) => stringifyCookie(v).replace(/; /, '')) + .join('; '); +}; + // Mostly copied from https://github.com/vercel/edge-runtime/blob/c25e2ded39104e2a3be82efc08baf8dc8fb436b3/packages/cookies/src/request-cookies.ts#L7 -class CookieStore { +class CookieStore implements RequestCookies { /** @internal */ - readonly _headers?: Headers; - - store = new Map(); + private readonly _headers: HeadersStore; _parsed: Map = new Map(); - constructor(requestHeaders?: Headers) { + constructor(requestHeaders: HeadersStore) { this._headers = requestHeaders; const header = requestHeaders?.get('cookie'); if (header) { @@ -27,9 +33,14 @@ class CookieStore { } } + [Symbol.iterator]() { + return this._parsed[Symbol.iterator](); + } + /** @internal */ mockRestore = () => { this.clear(); + this._headers.mockRestore(); }; get size(): number { @@ -61,12 +72,7 @@ class CookieStore { const map = this._parsed; map.set(name, { name, value }); - this._headers?.set( - 'cookie', - Array.from(map) - .map(([_, v]) => stringifyCookie(v)) - .join('; ') - ); + this._headers.set('cookie', stringifyCookies(map)); return this; }).mockName('cookies().set'); @@ -82,12 +88,7 @@ class CookieStore { const result = !Array.isArray(names) ? map.delete(names) : names.map((name) => map.delete(name)); - this._headers?.set( - 'cookie', - Array.from(map) - .map(([_, value]) => stringifyCookie(value)) - .join('; ') - ); + this._headers.set('cookie', stringifyCookies(map)); return result; } ).mockName('cookies().delete'); @@ -99,6 +100,19 @@ class CookieStore { this.delete(Array.from(this._parsed.keys())); return this; }).mockName('cookies().clear'); + + /** + * Format the cookies in the request as a string for logging + */ + [Symbol.for('edge-runtime.inspect.custom')]() { + return `RequestCookies ${JSON.stringify(Object.fromEntries(this._parsed))}`; + } + + toString() { + return [...this._parsed.values()] + .map((v) => `${v.name}=${encodeURIComponent(v.value)}`) + .join('; '); + } } let cookieStore: CookieStore; diff --git a/code/frameworks/nextjs/src/headers/headers.ts b/code/frameworks/nextjs/src/headers/headers.ts index c1ddc679a337..386574054d90 100644 --- a/code/frameworks/nextjs/src/headers/headers.ts +++ b/code/frameworks/nextjs/src/headers/headers.ts @@ -1,9 +1,13 @@ import { fn } from '@storybook/test'; +import { action } from '@storybook/addon-actions'; import type { IncomingHttpHeaders } from 'http'; +import type { HeadersAdapter } from 'next/dist/server/web/spec-extension/adapters/headers'; // Mostly copied from https://github.com/vercel/next.js/blob/763b9a660433ec5278a10e59d7ae89d4010ba212/packages/next/src/server/web/spec-extension/adapters/headers.ts#L20 -export class HeadersStore extends Headers { - private readonly headers: IncomingHttpHeaders = {}; +// @ts-expect-error unfortunately the headers property is private (and not protected) in HeadersAdapter +// and we can't access it so we need to redefine it, but that clashes with the type, hence the ts-expect-error comment. +export class HeadersStore extends Headers implements HeadersAdapter { + private headers: IncomingHttpHeaders = {}; /** @internal */ mockRestore = () => { @@ -32,6 +36,7 @@ export class HeadersStore extends Headers { } else { this.headers[name] = value; } + action('append')(name, value); }).mockName('headers().append'); public delete = fn((name: string) => { @@ -51,6 +56,8 @@ export class HeadersStore extends Headers { public set = fn((name: string, value: string): void => { this.headers[name] = value; + console.log({ name, value }); + action('set')(name, value); }).mockName('headers().set'); public forEach = fn( 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 f62323bff6f2..fe7c8ed9f34a 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,13 +1,28 @@ import NextHeader from './NextHeader'; +import type { Meta } from '@storybook/react'; +import type { StoryObj } from '@storybook/react'; +import { expect, userEvent, within } from '@storybook/test'; import { cookies, headers } from '@storybook/nextjs/headers'; export default { component: NextHeader, -}; +} as Meta; + +type Story = StoryObj; -export const Default = { +export const Default: Story = { loaders: async () => { - cookies().set('fullName', 'Jane Doe'); + cookies().set('firstName', 'Jane'); + cookies().set({ + name: 'lastName', + value: 'Doe', + }); headers().set('timezone', 'Central European Summer Time'); }, + play: async ({ canvasElement }) => { + const canvas = within(canvasElement); + const submitButton = await canvas.findByRole('button'); + await userEvent.click(submitButton); + expect(headers().get('cookie')).toContain('user-id=encrypted-id'); + }, }; diff --git a/code/frameworks/nextjs/template/stories_nextjs-default-ts/NextHeader.tsx b/code/frameworks/nextjs/template/stories_nextjs-default-ts/NextHeader.tsx index e5f80e4b0e96..bb70c020699c 100644 --- a/code/frameworks/nextjs/template/stories_nextjs-default-ts/NextHeader.tsx +++ b/code/frameworks/nextjs/template/stories_nextjs-default-ts/NextHeader.tsx @@ -1,20 +1,39 @@ import React from 'react'; import { cookies, headers } from 'next/headers'; -export default function Component() { +export default async function Component() { + async function handleClick() { + 'use server'; + cookies().set('user-id', 'encrypted-id'); + } + return ( <> +

Cookies:

+ {cookies() + .getAll() + .map(({ name, value }) => { + return ( +

+ Name: {name} + Value: {value} +

+ ); + })} +

Headers:

-
-

Name: "timezone"

-

Value: "{headers().get('timezone')}"

-
+ {Array.from(headers()).map(([name, value]: [string, string]) => { + return ( +

+ Name: {name} + Value: {value} +

+ ); + })} -

Cookies:

-
-

Name: "fullName"

-

Value: "{JSON.stringify(cookies().get('fullName'))}"

-
+
+ +
); } diff --git a/code/lib/test/package.json b/code/lib/test/package.json index 08e71286c31c..24379945cc57 100644 --- a/code/lib/test/package.json +++ b/code/lib/test/package.json @@ -69,6 +69,7 @@ "./src/index.ts" ], "noExternal": [ + "@testing-library/dom", "@testing-library/jest-dom", "@testing-library/user-event", "chai" From ec0e0afdcea090b1ffc73c461dc54131fbadd7c1 Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Mon, 8 Apr 2024 12:44:20 +0200 Subject: [PATCH 19/82] cleanup --- code/frameworks/nextjs/src/headers/headers.ts | 4 ---- 1 file changed, 4 deletions(-) diff --git a/code/frameworks/nextjs/src/headers/headers.ts b/code/frameworks/nextjs/src/headers/headers.ts index 386574054d90..e4b0696c00d2 100644 --- a/code/frameworks/nextjs/src/headers/headers.ts +++ b/code/frameworks/nextjs/src/headers/headers.ts @@ -1,5 +1,4 @@ import { fn } from '@storybook/test'; -import { action } from '@storybook/addon-actions'; import type { IncomingHttpHeaders } from 'http'; import type { HeadersAdapter } from 'next/dist/server/web/spec-extension/adapters/headers'; @@ -36,7 +35,6 @@ export class HeadersStore extends Headers implements HeadersAdapter { } else { this.headers[name] = value; } - action('append')(name, value); }).mockName('headers().append'); public delete = fn((name: string) => { @@ -56,8 +54,6 @@ export class HeadersStore extends Headers implements HeadersAdapter { public set = fn((name: string, value: string): void => { this.headers[name] = value; - console.log({ name, value }); - action('set')(name, value); }).mockName('headers().set'); public forEach = fn( From b95a503edad1945c2becbbfeeb5f6a3fd0949187 Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Tue, 9 Apr 2024 14:06:29 +0200 Subject: [PATCH 20/82] Update package.json and jest.config.js for next/headers alias --- code/frameworks/nextjs/package.json | 6 +- code/frameworks/nextjs/src/headers/webpack.ts | 9 +- .../nextjs/jest.config.js | 4 + .../nextjs/stories/NextHeader.stories.tsx | 28 +++ .../nextjs/stories/NextHeader.tsx | 36 +++ .../portable-stories.test.tsx.snap | 94 +++++++ .../nextjs/stories/portable-stories.test.tsx | 2 + .../nextjs/yarn.lock | 229 +++++++++--------- 8 files changed, 292 insertions(+), 116 deletions(-) create mode 100644 test-storybooks/portable-stories-kitchen-sink/nextjs/stories/NextHeader.stories.tsx create mode 100644 test-storybooks/portable-stories-kitchen-sink/nextjs/stories/NextHeader.tsx diff --git a/code/frameworks/nextjs/package.json b/code/frameworks/nextjs/package.json index 7689995156d5..ed1946d4a6ce 100644 --- a/code/frameworks/nextjs/package.json +++ b/code/frameworks/nextjs/package.json @@ -47,7 +47,11 @@ "require": "./dist/next-image-loader-stub.js", "import": "./dist/next-image-loader-stub.mjs" }, - "./headers": "./dist/headers/index.mjs", + "./headers": { + "types": "./dist/headers/index.d.ts", + "require": "./dist/headers/index.js", + "import": "./dist/headers/index.mjs" + }, "./package.json": "./package.json" }, "main": "dist/index.js", diff --git a/code/frameworks/nextjs/src/headers/webpack.ts b/code/frameworks/nextjs/src/headers/webpack.ts index 794a89adc1fe..8f2d63a165ca 100644 --- a/code/frameworks/nextjs/src/headers/webpack.ts +++ b/code/frameworks/nextjs/src/headers/webpack.ts @@ -1,9 +1,16 @@ +import { dirname, join } from 'path'; import type { Configuration as WebpackConfig } from 'webpack'; export const configureNextHeaders = (baseConfig: WebpackConfig): void => { const resolve = baseConfig.resolve ?? {}; + const headersPath = join( + dirname(require.resolve('@storybook/nextjs/package.json')), + '/dist/headers/index.mjs' + ); + resolve.alias = { ...resolve.alias, - 'next/headers': require.resolve('@storybook/nextjs/headers'), + 'next/headers': headersPath, + '@storybook/nextjs/headers': headersPath, }; }; diff --git a/test-storybooks/portable-stories-kitchen-sink/nextjs/jest.config.js b/test-storybooks/portable-stories-kitchen-sink/nextjs/jest.config.js index 5689702fae31..1869752aaa5d 100644 --- a/test-storybooks/portable-stories-kitchen-sink/nextjs/jest.config.js +++ b/test-storybooks/portable-stories-kitchen-sink/nextjs/jest.config.js @@ -11,6 +11,10 @@ const customJestConfig = { testEnvironment: 'jsdom', // Add more setup options before each test is run setupFilesAfterEnv: ['./jest.setup.ts'], + // TODO add docs about this: alias next/headers to @storybook/nextjs/headers + moduleNameMapper: { + '^next/headers$': '@storybook/nextjs/headers', + }, }; // createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async diff --git a/test-storybooks/portable-stories-kitchen-sink/nextjs/stories/NextHeader.stories.tsx b/test-storybooks/portable-stories-kitchen-sink/nextjs/stories/NextHeader.stories.tsx new file mode 100644 index 000000000000..d6b0cf7f922b --- /dev/null +++ b/test-storybooks/portable-stories-kitchen-sink/nextjs/stories/NextHeader.stories.tsx @@ -0,0 +1,28 @@ +import type { Meta } from '@storybook/react'; +import type { StoryObj } from '@storybook/react'; +import { expect, userEvent, within } from '@storybook/test'; +import { cookies, headers } from '@storybook/nextjs/headers'; +import NextHeader from './NextHeader'; + +export default { + component: NextHeader, +} as Meta; + +type Story = StoryObj; + +export const Default: Story = { + loaders: async () => { + cookies().set('firstName', 'Jane'); + cookies().set({ + name: 'lastName', + value: 'Doe', + }); + headers().set('timezone', 'Central European Summer Time'); + }, + play: async ({ canvasElement }) => { + const canvas = within(canvasElement); + const submitButton = await canvas.findByRole('button'); + await userEvent.click(submitButton); + expect(headers().get('cookie')).toContain('user-id=encrypted-id'); + }, +}; diff --git a/test-storybooks/portable-stories-kitchen-sink/nextjs/stories/NextHeader.tsx b/test-storybooks/portable-stories-kitchen-sink/nextjs/stories/NextHeader.tsx new file mode 100644 index 000000000000..8321a9820141 --- /dev/null +++ b/test-storybooks/portable-stories-kitchen-sink/nextjs/stories/NextHeader.tsx @@ -0,0 +1,36 @@ +import React from 'react'; +import { cookies, headers } from 'next/headers'; + +export default function Component() { + function handleClick() { + cookies().set('user-id', 'encrypted-id'); + } + + return ( + <> +

Cookies:

+ {cookies() + .getAll() + .map(({ name, value }) => { + return ( +

+ Name: {name} + Value: {value} +

+ ); + })} + +

Headers:

+ {Array.from(headers()).map(([name, value]: [string, string]) => { + return ( +

+ Name: {name} + Value: {value} +

+ ); + })} + + + + ); +} diff --git a/test-storybooks/portable-stories-kitchen-sink/nextjs/stories/__snapshots__/portable-stories.test.tsx.snap b/test-storybooks/portable-stories-kitchen-sink/nextjs/stories/__snapshots__/portable-stories.test.tsx.snap index 18101d01d48d..7f5212f2f6a3 100644 --- a/test-storybooks/portable-stories-kitchen-sink/nextjs/stories/__snapshots__/portable-stories.test.tsx.snap +++ b/test-storybooks/portable-stories-kitchen-sink/nextjs/stories/__snapshots__/portable-stories.test.tsx.snap @@ -729,6 +729,100 @@ exports[`renders navigationStories stories renders Default 1`] = ` `; +exports[`renders nextHeaderStories stories renders Default 1`] = ` + +
+
+ Global Decorator +
+

+ Cookies: +

+

+ + Name: + + + + firstName + + + Value: + + + + Jane + +

+

+ + Name: + + + + lastName + + + Value: + + + + Doe + +

+

+ Headers: +

+

+ + Name: + + + + cookie + + + Value: + + + + firstName=Jane; lastName=Doe + +

+

+ + Name: + + + + timezone + + + Value: + + + + Central European Summer Time + +

+ +
+
+ +`; + exports[`renders routerStories stories renders Default 1`] = `
diff --git a/test-storybooks/portable-stories-kitchen-sink/nextjs/stories/portable-stories.test.tsx b/test-storybooks/portable-stories-kitchen-sink/nextjs/stories/portable-stories.test.tsx index c17fd43fc746..d6789edde932 100644 --- a/test-storybooks/portable-stories-kitchen-sink/nextjs/stories/portable-stories.test.tsx +++ b/test-storybooks/portable-stories-kitchen-sink/nextjs/stories/portable-stories.test.tsx @@ -11,6 +11,7 @@ import * as styledJsxStories from './StyledJsx.stories'; import * as dynamicImportStories from './DynamicImport.stories'; import * as fontStories from './Font.stories'; import * as headStories from './Head.stories'; +import * as nextHeaderStories from './NextHeader.stories'; import * as getImagePropsStories from './GetImageProps.stories'; // example with composeStories, returns an object with all stories composed with args/decorators @@ -30,6 +31,7 @@ const runTests = (name: string, storiesModule: any) => { // // example with composeStory, returns a single story composed with args/decorators describe('renders', () => { + runTests('nextHeaderStories', nextHeaderStories); runTests('navigationStories', navigationStories); runTests('linkStories', linkStories); runTests('routerStories', routerStories); diff --git a/test-storybooks/portable-stories-kitchen-sink/nextjs/yarn.lock b/test-storybooks/portable-stories-kitchen-sink/nextjs/yarn.lock index e621c6f62567..c9002d189472 100644 --- a/test-storybooks/portable-stories-kitchen-sink/nextjs/yarn.lock +++ b/test-storybooks/portable-stories-kitchen-sink/nextjs/yarn.lock @@ -2378,8 +2378,8 @@ __metadata: linkType: hard "@storybook/addon-actions@file:../../../code/addons/actions::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.5 - resolution: "@storybook/addon-actions@file:../../../code/addons/actions#../../../code/addons/actions::hash=e88010&locator=portable-stories-nextjs%40workspace%3A." + version: 8.1.0-alpha.6 + resolution: "@storybook/addon-actions@file:../../../code/addons/actions#../../../code/addons/actions::hash=65179b&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/core-events": "workspace:*" "@storybook/global": "npm:^5.0.0" @@ -2387,18 +2387,18 @@ __metadata: dequal: "npm:^2.0.2" polished: "npm:^4.2.2" uuid: "npm:^9.0.0" - checksum: 10/9e15238cca3e78b2e24c8cd78c10bc7541a467c0d495bc64312d1e963e5085c049167650e55a6d049340f2a9c552751e2655fabcd320cd7b6b78415c77808aac + checksum: 10/9ed534d56ffd4ae256837a80af482961a5881624cb85eb46983e913497bbdcd8c441deac96ea76bf99eb1f7b0fb523b60a7eec4059a78eadf00e92aa6bf977b3 languageName: node linkType: hard "@storybook/addon-backgrounds@file:../../../code/addons/backgrounds::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.5 - resolution: "@storybook/addon-backgrounds@file:../../../code/addons/backgrounds#../../../code/addons/backgrounds::hash=ae8cf2&locator=portable-stories-nextjs%40workspace%3A." + version: 8.1.0-alpha.6 + resolution: "@storybook/addon-backgrounds@file:../../../code/addons/backgrounds#../../../code/addons/backgrounds::hash=026986&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/global": "npm:^5.0.0" memoizerific: "npm:^1.11.3" ts-dedent: "npm:^2.0.0" - checksum: 10/73e820d4ee0c7fc6b3c0c6c92783617ed516d558f00b9dbd6573fad96dd4069f93a5a5b895eda32972266595de8cd48fbda061d28e0b4d30756ed831556942f4 + checksum: 10/99d407bf5df62a7e85233e5a484ec0801ed309c3b910af79c65bbcceabeb1a7e8619c89178ada8ea20c1dae9196d559dbd75905732fe6a181374bf8c8d305993 languageName: node linkType: hard @@ -2418,8 +2418,8 @@ __metadata: linkType: hard "@storybook/addon-docs@file:../../../code/addons/docs::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.5 - resolution: "@storybook/addon-docs@file:../../../code/addons/docs#../../../code/addons/docs::hash=20043e&locator=portable-stories-nextjs%40workspace%3A." + version: 8.1.0-alpha.6 + resolution: "@storybook/addon-docs@file:../../../code/addons/docs#../../../code/addons/docs::hash=58d358&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@babel/core": "npm:^7.12.3" "@mdx-js/react": "npm:^3.0.0" @@ -2441,13 +2441,13 @@ __metadata: rehype-external-links: "npm:^3.0.0" rehype-slug: "npm:^6.0.0" ts-dedent: "npm:^2.0.0" - checksum: 10/4e28ead6b979994717c2184eb2b8a38297ef363bd4289e932d0d72af09783edbb87e0cd706223517b90f9b5cb9d6b8fccd91d74295b4259d9d0d76d6bb75c1c5 + checksum: 10/e794088e3f6cdad1c5ea178ab7d07db27da5729bbb380bee957a46d185f19125ad91519d56d2a3d68b7d60afd9e31a9a72edb2f24f5ba68866a531a25e97ef35 languageName: node linkType: hard "@storybook/addon-essentials@file:../../../code/addons/essentials::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.5 - resolution: "@storybook/addon-essentials@file:../../../code/addons/essentials#../../../code/addons/essentials::hash=516d29&locator=portable-stories-nextjs%40workspace%3A." + version: 8.1.0-alpha.6 + resolution: "@storybook/addon-essentials@file:../../../code/addons/essentials#../../../code/addons/essentials::hash=5092fe&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/addon-actions": "workspace:*" "@storybook/addon-backgrounds": "workspace:*" @@ -2463,22 +2463,22 @@ __metadata: "@storybook/node-logger": "workspace:*" "@storybook/preview-api": "workspace:*" ts-dedent: "npm:^2.0.0" - checksum: 10/a112d664bbbb4e027c3302ddc47f41a94c8b77b31282e927d3c639388cf8c475c5be21c0311d9c7e3e042e4571367641f257818cb42b48de3809ca06bbbaeef0 + checksum: 10/6e482c766038f53305099b1cad8195bb546bb2b18a701b2f85491e9c5393e39e715b6505672ffb36616d5ae5baa9f06d16dd6f4a86d3faa31ee550d045a4bc57 languageName: node linkType: hard "@storybook/addon-highlight@file:../../../code/addons/highlight::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.5 - resolution: "@storybook/addon-highlight@file:../../../code/addons/highlight#../../../code/addons/highlight::hash=1b0e4c&locator=portable-stories-nextjs%40workspace%3A." + version: 8.1.0-alpha.6 + resolution: "@storybook/addon-highlight@file:../../../code/addons/highlight#../../../code/addons/highlight::hash=a69c2f&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/global": "npm:^5.0.0" - checksum: 10/2dbc0b704c71ed09839d4a2cef0758e47f67b7864d1963d2a41a56cf71d90a73fdb1934fe35f6b4457036894149cb1bc7acbffa5dc46744a1dbf7968dd626648 + checksum: 10/e61e168997b91f2ab729f02de3e186a26c697c0851d188d7ece1ec145fcd84c7fea3cd3fac3608269bb4944c9b4e13436493f65ddf8c0a808e30bb5ece70d9f3 languageName: node linkType: hard "@storybook/addon-interactions@file:../../../code/addons/interactions::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.5 - resolution: "@storybook/addon-interactions@file:../../../code/addons/interactions#../../../code/addons/interactions::hash=08cdfe&locator=portable-stories-nextjs%40workspace%3A." + version: 8.1.0-alpha.6 + resolution: "@storybook/addon-interactions@file:../../../code/addons/interactions#../../../code/addons/interactions::hash=3e90ca&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/global": "npm:^5.0.0" "@storybook/instrumenter": "workspace:*" @@ -2486,49 +2486,49 @@ __metadata: "@storybook/types": "workspace:*" polished: "npm:^4.2.2" ts-dedent: "npm:^2.2.0" - checksum: 10/3614ecd2a3265ac36e540416030ec9435fc41127fcdd4e457c52099193f0aeb6553cf56bef179cf2d13053b68843869ddab2c7863dd6b69280375dd3f5c64603 + checksum: 10/18c21704ebc20d55fe75e735f89e8c5926b6fe3a44e7025de16d666cf3c6435e9fc19ada8dc3714f4406ce1f3b3117120610c7c8bcfefb86c913a6bbf14f668a languageName: node linkType: hard "@storybook/addon-measure@file:../../../code/addons/measure::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.5 - resolution: "@storybook/addon-measure@file:../../../code/addons/measure#../../../code/addons/measure::hash=fcfca4&locator=portable-stories-nextjs%40workspace%3A." + version: 8.1.0-alpha.6 + resolution: "@storybook/addon-measure@file:../../../code/addons/measure#../../../code/addons/measure::hash=086736&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/global": "npm:^5.0.0" tiny-invariant: "npm:^1.3.1" - checksum: 10/74778d016ac62b314e1029419403c29d0218ba08e061bb51da6a273e1ffbc89675739dac85f2c7cc8f28552847410996ebcad6513074ea1fbf7eb571a2c6582b + checksum: 10/3f9a7ddab76235f46cfaa96386074964a311908344e5a4617025dcbab610742e48672b8f236a0d4a5c254273ae4b959ef9114bf31e22ebfcae085c17309c2f47 languageName: node linkType: hard "@storybook/addon-outline@file:../../../code/addons/outline::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.5 - resolution: "@storybook/addon-outline@file:../../../code/addons/outline#../../../code/addons/outline::hash=df13d0&locator=portable-stories-nextjs%40workspace%3A." + version: 8.1.0-alpha.6 + resolution: "@storybook/addon-outline@file:../../../code/addons/outline#../../../code/addons/outline::hash=c2049c&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/global": "npm:^5.0.0" ts-dedent: "npm:^2.0.0" - checksum: 10/c2ee4e8e4fb74916918bc16c1a76f24f88c8313aec39b8f8cee5c53c3c1e9e9808ab82f236cf53da416d985bdcf8104f3e896401d8d3f3390b6f15c43ae30731 + checksum: 10/6935af0b38fdb46c5bee74c22a170b2f10ffcbff14ee039ddc8488f3b6eb1c2d3f11c35c9761eaa8ddfafe3fecaef3ace12a5a30610fc4d1c9a5b161d7fbba53 languageName: node linkType: hard "@storybook/addon-toolbars@file:../../../code/addons/toolbars::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.5 - resolution: "@storybook/addon-toolbars@file:../../../code/addons/toolbars#../../../code/addons/toolbars::hash=16af1f&locator=portable-stories-nextjs%40workspace%3A." - checksum: 10/aa26ca213d4191b2af638a44841d2cab0034092b27c426879be7037c3f2f3cfd9dcd668dbc15824e9129b002e9babb9b78638abb42f4c0e5a26070d24c35eb43 + version: 8.1.0-alpha.6 + resolution: "@storybook/addon-toolbars@file:../../../code/addons/toolbars#../../../code/addons/toolbars::hash=7413c4&locator=portable-stories-nextjs%40workspace%3A." + checksum: 10/a428f3c5b3530cd56c81c83a7e05c2f364a75a7e358dbd9f082eb1b88b875a5e721db0cb7050f1ac48117ed0d4b95a8b35e07e8f3e4b17e6cdd0076a4d959bc7 languageName: node linkType: hard "@storybook/addon-viewport@file:../../../code/addons/viewport::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.5 - resolution: "@storybook/addon-viewport@file:../../../code/addons/viewport#../../../code/addons/viewport::hash=bb6a19&locator=portable-stories-nextjs%40workspace%3A." + version: 8.1.0-alpha.6 + resolution: "@storybook/addon-viewport@file:../../../code/addons/viewport#../../../code/addons/viewport::hash=57d9d2&locator=portable-stories-nextjs%40workspace%3A." dependencies: memoizerific: "npm:^1.11.3" - checksum: 10/02aaa2b1d56d2f348712b49be2f034c7875b2e8ab5afd431785c25d089b42a1c103059335790b54e655ae38048dfdefe2d6ef8db0af1ee7182e314d1852fa94e + checksum: 10/752aa713b8b924944dbf1b3b904dd31e4508651ef9b8437dc3a60444890f760a7f76fcbbe80037c0f8e790e31a37d062aa6aa27182c1cd0784eba000745a44f2 languageName: node linkType: hard "@storybook/blocks@file:../../../code/ui/blocks::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.5 - resolution: "@storybook/blocks@file:../../../code/ui/blocks#../../../code/ui/blocks::hash=11aaa5&locator=portable-stories-nextjs%40workspace%3A." + version: 8.1.0-alpha.6 + resolution: "@storybook/blocks@file:../../../code/ui/blocks#../../../code/ui/blocks::hash=07fbe6&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/channels": "workspace:*" "@storybook/client-logger": "workspace:*" @@ -2562,13 +2562,13 @@ __metadata: optional: true react-dom: optional: true - checksum: 10/edb8ff4f8f87654a18a45368043f272c26a4b8d04ef8ac4c6c67893c503fff1af666d62de426f56ce0eafc93db39763519140b08b3cf1734f3687c20ceeaec6c + checksum: 10/b20b19cd047db66bc11227d9c64d66285b29d34da8c085d675c948355edc0a66e36b08bd95626536ad15ce970461c19528326a38f083c8533a9aeb3223fca6ee languageName: node linkType: hard "@storybook/builder-manager@file:../../../code/builders/builder-manager::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.5 - resolution: "@storybook/builder-manager@file:../../../code/builders/builder-manager#../../../code/builders/builder-manager::hash=40c69f&locator=portable-stories-nextjs%40workspace%3A." + version: 8.1.0-alpha.6 + resolution: "@storybook/builder-manager@file:../../../code/builders/builder-manager#../../../code/builders/builder-manager::hash=727c53&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@fal-works/esbuild-plugin-global-externals": "npm:^2.1.2" "@storybook/core-common": "workspace:*" @@ -2584,13 +2584,13 @@ __metadata: fs-extra: "npm:^11.1.0" process: "npm:^0.11.10" util: "npm:^0.12.4" - checksum: 10/92ae16c32ced613cd0a603ff2f139356c1bf81f2aae2268ef6de2ca6345cb7e7de49b6aea356c7828d752efb05fff3c14ef949ab58dffe1ae08979a37524ff6c + checksum: 10/1e3f751ec4dd12ca12d8a3190fb104644041cd08fb4c1548567105dabea9c20af0d25e19333e9c9da51225e0dd5159c2d2614cb3ac78b6f6b2e06c866f543eaf languageName: node linkType: hard "@storybook/builder-webpack5@file:../../../code/builders/builder-webpack5::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.5 - resolution: "@storybook/builder-webpack5@file:../../../code/builders/builder-webpack5#../../../code/builders/builder-webpack5::hash=5fa617&locator=portable-stories-nextjs%40workspace%3A." + version: 8.1.0-alpha.6 + resolution: "@storybook/builder-webpack5@file:../../../code/builders/builder-webpack5#../../../code/builders/builder-webpack5::hash=ad9e5e&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/channels": "workspace:*" "@storybook/client-logger": "workspace:*" @@ -2629,20 +2629,20 @@ __metadata: peerDependenciesMeta: typescript: optional: true - checksum: 10/8576dca36ea1621e2b7c1723b4729a96d648a54c372175081a11763ad346ba1209a02fb6819beae592a0cc6a69a55cab44f47e92a05ce8552ca729434520a836 + checksum: 10/1dbbad195f6f0cb506b0b693c825c494f1a88cd71ca7784b06e0410f080468cac67d35adff1bc6f785b3f7d55cfe8e794684df01b4f440799955f0e787d8963a languageName: node linkType: hard "@storybook/channels@file:../../../code/lib/channels::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.5 - resolution: "@storybook/channels@file:../../../code/lib/channels#../../../code/lib/channels::hash=dc1f24&locator=portable-stories-nextjs%40workspace%3A." + version: 8.1.0-alpha.6 + resolution: "@storybook/channels@file:../../../code/lib/channels#../../../code/lib/channels::hash=78c3de&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/client-logger": "workspace:*" "@storybook/core-events": "workspace:*" "@storybook/global": "npm:^5.0.0" telejson: "npm:^7.2.0" tiny-invariant: "npm:^1.3.1" - checksum: 10/fa9b6ab69319c46e17a6b9eb3fee4bb3ef12d12c02ee068077a920e9aa08df7fb9b666fafd4c67b686a330f5a37488c2e504427dd748accd7fb76f7cc21dbf3e + checksum: 10/d161eff9c0218c7a6628e44dceed5299b253f997fc36fd344a428937b901a3f0755a067240394636ca0e33611848cfc4b43e07a259f4232a7ea3c409418da5fc languageName: node linkType: hard @@ -2694,17 +2694,17 @@ __metadata: linkType: hard "@storybook/client-logger@file:../../../code/lib/client-logger::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.5 - resolution: "@storybook/client-logger@file:../../../code/lib/client-logger#../../../code/lib/client-logger::hash=c3badc&locator=portable-stories-nextjs%40workspace%3A." + version: 8.1.0-alpha.6 + resolution: "@storybook/client-logger@file:../../../code/lib/client-logger#../../../code/lib/client-logger::hash=54f3a6&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/global": "npm:^5.0.0" - checksum: 10/3b4619cefc5256d914bddae60d853762addb185eb0dbd4052bb4aae9db3b59f3ca2db3a1bbf7e81547a4e047415f52c1f8b9208717741a6d332d47f99d1ed7c0 + checksum: 10/234fc62dd3bbf8350049d6b149d035eae31b804dd6b8ef175c84ac7bc7ef32943976197a204f4d059952d47de3b97c56a8d2238f0bebcd10e29665b112ba0e1f languageName: node linkType: hard "@storybook/codemod@file:../../../code/lib/codemod::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.5 - resolution: "@storybook/codemod@file:../../../code/lib/codemod#../../../code/lib/codemod::hash=34bae5&locator=portable-stories-nextjs%40workspace%3A." + version: 8.1.0-alpha.6 + resolution: "@storybook/codemod@file:../../../code/lib/codemod#../../../code/lib/codemod::hash=a56758&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@babel/core": "npm:^7.23.2" "@babel/preset-env": "npm:^7.23.2" @@ -2721,13 +2721,13 @@ __metadata: prettier: "npm:^3.1.1" recast: "npm:^0.23.5" tiny-invariant: "npm:^1.3.1" - checksum: 10/004e68f27b836994ae7cf798d05e4e71230230b3d2bb23237ba60f91930db9ad213eb4a1fdf99d66bb2ce27b4dc2c8603b3eeacc8d3350975321bb207f0076b2 + checksum: 10/281ccf2a77c876f5c76629a2d40c19c90d5c5244acb1bb0480e8317c79a1d71e52cae72d542368b0b3192f8775b8dc380141d0ba8ecfc3677970ac43de5eab4f languageName: node linkType: hard "@storybook/components@file:../../../code/ui/components::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.5 - resolution: "@storybook/components@file:../../../code/ui/components#../../../code/ui/components::hash=3b9d9f&locator=portable-stories-nextjs%40workspace%3A." + version: 8.1.0-alpha.6 + resolution: "@storybook/components@file:../../../code/ui/components#../../../code/ui/components::hash=df917d&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@radix-ui/react-slot": "npm:^1.0.2" "@storybook/client-logger": "workspace:*" @@ -2741,7 +2741,7 @@ __metadata: peerDependencies: react: ^16.8.0 || ^17.0.0 || ^18.0.0 react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 - checksum: 10/a3580c09bb4fb59402e496a50334f00f9bcf426af95499c351c5ca186b2eed7bf3f35afc88ffe1ea626886fddef4be415cc929ece95827a6a3989f33d7203bce + checksum: 10/70d228121e8d87efe766d01665df20448f310c0413edf80d7496ad887e876c7d24bae7786c89a0746d2b1fced8d89f1c7d5a20d52d39bbeee0de269512232b0c languageName: node linkType: hard @@ -2782,17 +2782,17 @@ __metadata: linkType: hard "@storybook/core-events@file:../../../code/lib/core-events::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.5 - resolution: "@storybook/core-events@file:../../../code/lib/core-events#../../../code/lib/core-events::hash=398882&locator=portable-stories-nextjs%40workspace%3A." + version: 8.1.0-alpha.6 + resolution: "@storybook/core-events@file:../../../code/lib/core-events#../../../code/lib/core-events::hash=00e230&locator=portable-stories-nextjs%40workspace%3A." dependencies: ts-dedent: "npm:^2.0.0" - checksum: 10/4b324946e1c4a859417f99a67f0033696d43ed699c7b6715c136455039cbafb23079ac1e49ca5f8b3891abb9fd91f5dd33dbe6873f566ea722da4a111ebad830 + checksum: 10/04b637e0c32d0cf6b8b7f13a9c3366ae2f8d1881ac1e0024cb2d02cf4f38052a2655676c67876644c81fd4c351ebbf138afb6873d2449d3b8bcbecf4596b22b5 languageName: node linkType: hard "@storybook/core-server@file:../../../code/lib/core-server::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.5 - resolution: "@storybook/core-server@file:../../../code/lib/core-server#../../../code/lib/core-server::hash=be7821&locator=portable-stories-nextjs%40workspace%3A." + version: 8.1.0-alpha.6 + resolution: "@storybook/core-server@file:../../../code/lib/core-server#../../../code/lib/core-server::hash=6e21ef&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@aw-web-design/x-default-browser": "npm:1.4.126" "@babel/core": "npm:^7.23.9" @@ -2837,36 +2837,36 @@ __metadata: util-deprecate: "npm:^1.0.2" watchpack: "npm:^2.2.0" ws: "npm:^8.2.3" - checksum: 10/e479f05a9461416849ffa168f31a3cb1b3584b6521e618e9478d92f1061dcfc67e80f80ed29315a72e1ea19552ed475a890194597c2bba4eaf9c3d313ca507d1 + checksum: 10/052920abcb3352dc422ed230cda74a60996475600ce4bf23e0566dfeb25d2b5b86e7d84a19a47240b518a067bd74dec1bfae7674d68b3c59099c0ebd16e588d7 languageName: node linkType: hard "@storybook/core-webpack@file:../../../code/lib/core-webpack::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.5 - resolution: "@storybook/core-webpack@file:../../../code/lib/core-webpack#../../../code/lib/core-webpack::hash=149c77&locator=portable-stories-nextjs%40workspace%3A." + version: 8.1.0-alpha.6 + resolution: "@storybook/core-webpack@file:../../../code/lib/core-webpack#../../../code/lib/core-webpack::hash=a48486&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/core-common": "workspace:*" "@storybook/node-logger": "workspace:*" "@storybook/types": "workspace:*" "@types/node": "npm:^18.0.0" ts-dedent: "npm:^2.0.0" - checksum: 10/1280b36bad4121176016ff5d7c9c4677361ac6aa61d0319daf9812ca29bba2bb52a5acd9696a7cc749b4559e2e459808bbb97aaa75dc00d3a1a355367f58beeb + checksum: 10/f605ac68389a0ea374291444486bf82be36f01bf75ff1756bbc0d7de2a836095a695a072cdc14fbd941d4f49745cc775e3e02b29b9ed42065902e2fdd8091835 languageName: node linkType: hard "@storybook/csf-plugin@file:../../../code/lib/csf-plugin::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.5 - resolution: "@storybook/csf-plugin@file:../../../code/lib/csf-plugin#../../../code/lib/csf-plugin::hash=82231f&locator=portable-stories-nextjs%40workspace%3A." + version: 8.1.0-alpha.6 + resolution: "@storybook/csf-plugin@file:../../../code/lib/csf-plugin#../../../code/lib/csf-plugin::hash=786030&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/csf-tools": "workspace:*" unplugin: "npm:^1.3.1" - checksum: 10/de0d6aa14f4317ddeaf95d2fb481c9ca074d324a2d234f9f6faccf60f5e2980c4100732532071a4cdd57cb9036e6d1a119ffa2eaf0133f53a399fbeb974cd6a3 + checksum: 10/76d71cc728d93f09e0869a052b131c8b2d2307355c09c4396706e61b948c63fe7991110e8a1e6eb91f7802fe2030b53070292067adf2496f8924326f36c760f8 languageName: node linkType: hard "@storybook/csf-tools@file:../../../code/lib/csf-tools::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.5 - resolution: "@storybook/csf-tools@file:../../../code/lib/csf-tools#../../../code/lib/csf-tools::hash=add4b8&locator=portable-stories-nextjs%40workspace%3A." + version: 8.1.0-alpha.6 + resolution: "@storybook/csf-tools@file:../../../code/lib/csf-tools#../../../code/lib/csf-tools::hash=edd208&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@babel/generator": "npm:^7.23.0" "@babel/parser": "npm:^7.23.0" @@ -2877,7 +2877,7 @@ __metadata: fs-extra: "npm:^11.1.0" recast: "npm:^0.23.5" ts-dedent: "npm:^2.0.0" - checksum: 10/ecd61bff068425cfa58dc33ea9a6f11c2952a1be42309980af22a1ae6bbe80cc9dfaab90b0d7ebd7c42ef8264fdd2176e85a70bf296239adec6b04223d425291 + checksum: 10/d0205249b09db44b07382c14308e54bf527cf4f872a7ce5769486fb2099455fad045c7098c4faf133f8cf43c94fdc082f91c9165856fe6d98993553213f2a6f3 languageName: node linkType: hard @@ -2907,8 +2907,8 @@ __metadata: linkType: hard "@storybook/docs-tools@file:../../../code/lib/docs-tools::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.5 - resolution: "@storybook/docs-tools@file:../../../code/lib/docs-tools#../../../code/lib/docs-tools::hash=64b2ff&locator=portable-stories-nextjs%40workspace%3A." + version: 8.1.0-alpha.6 + resolution: "@storybook/docs-tools@file:../../../code/lib/docs-tools#../../../code/lib/docs-tools::hash=40a697&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/core-common": "workspace:*" "@storybook/preview-api": "workspace:*" @@ -2917,7 +2917,7 @@ __metadata: assert: "npm:^2.1.0" doctrine: "npm:^3.0.0" lodash: "npm:^4.17.21" - checksum: 10/3b50a5959d8fbd8e71b5341e9d57b0da51ad4292b9252b7e218b98c59b9a9f889eb7fcae8f51661cb3b58c33b11e79e46c0594caa9b4aaee262794cdf8188e03 + checksum: 10/5b0d4e375559fa833a2d206469993635b41a134d7ec2c20b5dcac7c5919c598134148ed10848773ce294e7a82af472090d790a09d207022627da1a6220972437 languageName: node linkType: hard @@ -2939,8 +2939,8 @@ __metadata: linkType: hard "@storybook/instrumenter@file:../../../code/lib/instrumenter::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.5 - resolution: "@storybook/instrumenter@file:../../../code/lib/instrumenter#../../../code/lib/instrumenter::hash=56e904&locator=portable-stories-nextjs%40workspace%3A." + version: 8.1.0-alpha.6 + resolution: "@storybook/instrumenter@file:../../../code/lib/instrumenter#../../../code/lib/instrumenter::hash=9f8861&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/channels": "workspace:*" "@storybook/client-logger": "workspace:*" @@ -2949,13 +2949,13 @@ __metadata: "@storybook/preview-api": "workspace:*" "@vitest/utils": "npm:^1.3.1" util: "npm:^0.12.4" - checksum: 10/1a320261c9124db9c502de624acae1e098dc8bb0ab6813b377fed432eafb1f732ad0808f2164bcfbdd0b1aefed6b894f7058a9ea8e796fc123d9f3afe4ac6df7 + checksum: 10/5328defaee67eb906c05673839abbf388cca0ddb2e66f1eb5fad6c8bca89a8b9df122d5e1b2ab409670f245e37744c3433e1c92c49ad9116fa981c80feac51b3 languageName: node linkType: hard "@storybook/manager-api@file:../../../code/lib/manager-api::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.5 - resolution: "@storybook/manager-api@file:../../../code/lib/manager-api#../../../code/lib/manager-api::hash=92b465&locator=portable-stories-nextjs%40workspace%3A." + version: 8.1.0-alpha.6 + resolution: "@storybook/manager-api@file:../../../code/lib/manager-api#../../../code/lib/manager-api::hash=73f66e&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/channels": "workspace:*" "@storybook/client-logger": "workspace:*" @@ -2972,20 +2972,20 @@ __metadata: store2: "npm:^2.14.2" telejson: "npm:^7.2.0" ts-dedent: "npm:^2.0.0" - checksum: 10/a2580bef8fa439ce74a2e9f7c4f1642bd94a508ea31b8f9876e0d8a856f2d8dc78d6e8d942fb4c5d482f91c482708f3cf42708fe05807899fd8a5a1fc9254171 + checksum: 10/16915e26260d957b65691178ffc5b57550b2750e6be44407885673e2df4f4e532cb513844405179e6cba0ae22e0f6d76811c741c0d4ff424703e4e78339c03c1 languageName: node linkType: hard "@storybook/manager@file:../../../code/ui/manager::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.5 - resolution: "@storybook/manager@file:../../../code/ui/manager#../../../code/ui/manager::hash=4b786e&locator=portable-stories-nextjs%40workspace%3A." - checksum: 10/8415ceca059644634f0c46e2536713c5f889a4e949a73fc5502ac9bc4c3fc1562ec9633a2910053cff233a06e90279dd1b4a8f6a63c0ae98459224046a2fac7e + version: 8.1.0-alpha.6 + resolution: "@storybook/manager@file:../../../code/ui/manager#../../../code/ui/manager::hash=ca1cc8&locator=portable-stories-nextjs%40workspace%3A." + checksum: 10/b99169a99791cda6a1eb5e34a00aff80433a8d8a2af0766035da5eca4a6f36be2dc885ed8f2ca4955aa913dcd80b7a3d0641cd5f0dabd2f5e91d2f87fa5fc7bd languageName: node linkType: hard "@storybook/nextjs@file:../../../code/frameworks/nextjs::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.5 - resolution: "@storybook/nextjs@file:../../../code/frameworks/nextjs#../../../code/frameworks/nextjs::hash=07534e&locator=portable-stories-nextjs%40workspace%3A." + version: 8.1.0-alpha.6 + resolution: "@storybook/nextjs@file:../../../code/frameworks/nextjs#../../../code/frameworks/nextjs::hash=06106f&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@babel/core": "npm:^7.23.2" "@babel/plugin-syntax-bigint": "npm:^7.8.3" @@ -3009,6 +3009,7 @@ __metadata: "@storybook/preset-react-webpack": "workspace:*" "@storybook/preview-api": "workspace:*" "@storybook/react": "workspace:*" + "@storybook/test": "workspace:*" "@storybook/types": "workspace:*" "@types/node": "npm:^18.0.0" "@types/semver": "npm:^7.3.4" @@ -3042,20 +3043,20 @@ __metadata: optional: true webpack: optional: true - checksum: 10/fe6e9c489eea6455ff7e5021777715a157b70ac54cf2e85f1f73d8afd5a55e964a08ebda581172d51fb3f4a6a2c33b48f2299ba24e54bdd7d65a11bfd6c96863 + checksum: 10/65a8ba601d1ab74a5b8af2e4399629e6cb1715a3003828664264792eabf68b403d15251287a819d930c25b612325ff58eb1fe603036f65f51d51682501672f6e languageName: node linkType: hard "@storybook/node-logger@file:../../../code/lib/node-logger::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.5 - resolution: "@storybook/node-logger@file:../../../code/lib/node-logger#../../../code/lib/node-logger::hash=ee9425&locator=portable-stories-nextjs%40workspace%3A." - checksum: 10/2cef663554d4c27c7e49d51432e53d7a847c1ad5072ef479201b648a61a5d039f136451583175b0798fcacee2a1bd824fd6ca0eb3a87f6a81ebca26170821ef7 + version: 8.1.0-alpha.6 + resolution: "@storybook/node-logger@file:../../../code/lib/node-logger#../../../code/lib/node-logger::hash=0d0b98&locator=portable-stories-nextjs%40workspace%3A." + checksum: 10/a3370020de702f0645ebe90da5e61d2a5d04bf719f6cda3b4c09e2b3f377c49a3d2c922175d2909d00fae0b7ef9453ac6f7ffee14399bd18ae3a6f9783736504 languageName: node linkType: hard "@storybook/preset-react-webpack@file:../../../code/presets/react-webpack::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.5 - resolution: "@storybook/preset-react-webpack@file:../../../code/presets/react-webpack#../../../code/presets/react-webpack::hash=b3541b&locator=portable-stories-nextjs%40workspace%3A." + version: 8.1.0-alpha.6 + resolution: "@storybook/preset-react-webpack@file:../../../code/presets/react-webpack#../../../code/presets/react-webpack::hash=72b9b2&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/core-webpack": "workspace:*" "@storybook/docs-tools": "workspace:*" @@ -3078,13 +3079,13 @@ __metadata: peerDependenciesMeta: typescript: optional: true - checksum: 10/eebfdb7f679a3909d2d7905b2b83acc4ef359c1d4c78048128725c2fce667725c75588fc9d89eaf28998df6f5a6daeee36ff2dee570aa4210b3a92bc83d84ff9 + checksum: 10/f0304ce896fb0dc5d0aa170b82a567daccf7d2f45425da0c8ed9136d6f4ec0acd544474e37933145c639bd706e6846f8ec6d766a04b6a92cb00420f9fb498865 languageName: node linkType: hard "@storybook/preview-api@file:../../../code/lib/preview-api::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.5 - resolution: "@storybook/preview-api@file:../../../code/lib/preview-api#../../../code/lib/preview-api::hash=249991&locator=portable-stories-nextjs%40workspace%3A." + version: 8.1.0-alpha.6 + resolution: "@storybook/preview-api@file:../../../code/lib/preview-api#../../../code/lib/preview-api::hash=8ed046&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/channels": "workspace:*" "@storybook/client-logger": "workspace:*" @@ -3100,14 +3101,14 @@ __metadata: tiny-invariant: "npm:^1.3.1" ts-dedent: "npm:^2.0.0" util-deprecate: "npm:^1.0.2" - checksum: 10/8c479853d76c40af94ce80270579f312989465d3e9ba72bbf91d244e58ecbd1d096892ccb739af223600b36e6e585505a59fd103266da99ee6d03421fec654c2 + checksum: 10/d5a6dc59d0cf9660869c7059567ffe09e1d590835aa781a5a94fc109ae67ae961f82db05a5e983b209e76a595ef3b9669f25897a174701fbcd2846a321ddd8e6 languageName: node linkType: hard "@storybook/preview@file:../../../code/lib/preview::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.5 - resolution: "@storybook/preview@file:../../../code/lib/preview#../../../code/lib/preview::hash=0b541b&locator=portable-stories-nextjs%40workspace%3A." - checksum: 10/a8cccf3680dd96e3855c2ebba9eaa66b37bc142023fbdf189ccd60053bb883d201a02bceda3f5682e9fc3878ceebe474a483f110e05caf365f8a2f632ac24aba + version: 8.1.0-alpha.6 + resolution: "@storybook/preview@file:../../../code/lib/preview#../../../code/lib/preview::hash=1b46c6&locator=portable-stories-nextjs%40workspace%3A." + checksum: 10/6f32462ffef399955e23eda2f74ab4de1187eb9f81490207002fd36cb1801ad7f34cc7a86de10613f0a971c0dad8d7b9790b593fed87b994257b87a5874c7db2 languageName: node linkType: hard @@ -3130,18 +3131,18 @@ __metadata: linkType: hard "@storybook/react-dom-shim@file:../../../code/lib/react-dom-shim::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.5 - resolution: "@storybook/react-dom-shim@file:../../../code/lib/react-dom-shim#../../../code/lib/react-dom-shim::hash=b5101f&locator=portable-stories-nextjs%40workspace%3A." + version: 8.1.0-alpha.6 + resolution: "@storybook/react-dom-shim@file:../../../code/lib/react-dom-shim#../../../code/lib/react-dom-shim::hash=cb4d21&locator=portable-stories-nextjs%40workspace%3A." peerDependencies: react: ^16.8.0 || ^17.0.0 || ^18.0.0 react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 - checksum: 10/2c271219da5c20c6a952df9b07313652bf67f00e426370b9bbf93c9b890f7438c24fe005e3cde6c2eeae648f4bd8928b6ec58c40e07299b5be9dc3eec532d75a + checksum: 10/fd2ab770da0b3450f92cad74f068d297cba56d51730987c2e9a866a01b3507335d913ba705e0c39bd53050f6de3415a6fb5fe32e25f01c246df05de76c888d01 languageName: node linkType: hard "@storybook/react@file:../../../code/renderers/react::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.5 - resolution: "@storybook/react@file:../../../code/renderers/react#../../../code/renderers/react::hash=074121&locator=portable-stories-nextjs%40workspace%3A." + version: 8.1.0-alpha.6 + resolution: "@storybook/react@file:../../../code/renderers/react#../../../code/renderers/react::hash=feef2f&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/client-logger": "workspace:*" "@storybook/docs-tools": "workspace:*" @@ -3171,24 +3172,24 @@ __metadata: peerDependenciesMeta: typescript: optional: true - checksum: 10/82db446f16311861c75d9aab37d5db52f2e8c3d015e033fc7f723895609431e9fa8e741c0e634f6b0548fdf3f4d7fb740781d146e3ed9d37495d4f95abfbd641 + checksum: 10/c302a3188a07344a4ed6ff1d5e563eecba774f766433ee6c00a8db0817002cd228d2163247e8a7f0e77930aeb654ccaca2d4240f34aec578de6e1914c1d5ad3f languageName: node linkType: hard "@storybook/router@file:../../../code/lib/router::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.5 - resolution: "@storybook/router@file:../../../code/lib/router#../../../code/lib/router::hash=7a6ed9&locator=portable-stories-nextjs%40workspace%3A." + version: 8.1.0-alpha.6 + resolution: "@storybook/router@file:../../../code/lib/router#../../../code/lib/router::hash=12e846&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/client-logger": "workspace:*" memoizerific: "npm:^1.11.3" qs: "npm:^6.10.0" - checksum: 10/3cef95a81959cc85dd6e43966f0c10b32f29b592e354088b76369b29a357db83d5eb35a637f90b5120222543f65b139de3ba865eb806b565de3525285c8ac846 + checksum: 10/211a8eb4828a583ef4b882860a8eebdc9d20e79b576e46f2a53f9b87cfda6c6d95de53344cfdb767bdf64c465f55b70ffe7b2e85a800443ea8867f937bd6f452 languageName: node linkType: hard "@storybook/telemetry@file:../../../code/lib/telemetry::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.5 - resolution: "@storybook/telemetry@file:../../../code/lib/telemetry#../../../code/lib/telemetry::hash=6e2d8d&locator=portable-stories-nextjs%40workspace%3A." + version: 8.1.0-alpha.6 + resolution: "@storybook/telemetry@file:../../../code/lib/telemetry#../../../code/lib/telemetry::hash=23a3d9&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/client-logger": "workspace:*" "@storybook/core-common": "workspace:*" @@ -3198,13 +3199,13 @@ __metadata: fetch-retry: "npm:^5.0.2" fs-extra: "npm:^11.1.0" read-pkg-up: "npm:^7.0.1" - checksum: 10/eb476498e119b62ac7fc0e06073cc440902ffc859b0f49bb2a6072d3ef949033cd4b675cb93b8847f2b5dd9bfe9ae1e9ee191ff9de5898a32ab873dcdeb1d6eb + checksum: 10/609dd2f7509d5b8611fead6e310e485dbd0ee4ad9c02d75c7cd66be068fbecb77e2f95f8b7879c01b2767b1e566031e9eae5c616ce36fab23df92d7d6d5f05fc languageName: node linkType: hard "@storybook/test@file:../../../code/lib/test::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.5 - resolution: "@storybook/test@file:../../../code/lib/test#../../../code/lib/test::hash=45d0f8&locator=portable-stories-nextjs%40workspace%3A." + version: 8.1.0-alpha.6 + resolution: "@storybook/test@file:../../../code/lib/test#../../../code/lib/test::hash=b5fbc8&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/client-logger": "workspace:*" "@storybook/core-events": "workspace:*" @@ -3217,13 +3218,13 @@ __metadata: "@vitest/spy": "npm:^1.3.1" chai: "npm:^4.4.1" util: "npm:^0.12.4" - checksum: 10/6101f14b80197cb9a500e4a7872f873abc7c93f6946e5890b2d49b77c503c52ff7b7a4125fb2263466fd0345754c64538a41be6222364660b35e33cc2b549ce9 + checksum: 10/47a026e105e8e42c6942b48d87bf8d96310a8507da9a2f6f923aa3dbb45a75846d59779d2e69b66a3fddbfe355de1e00dd49f8753b4b04939cc755127149f4b8 languageName: node linkType: hard "@storybook/theming@file:../../../code/lib/theming::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.5 - resolution: "@storybook/theming@file:../../../code/lib/theming#../../../code/lib/theming::hash=acc5fc&locator=portable-stories-nextjs%40workspace%3A." + version: 8.1.0-alpha.6 + resolution: "@storybook/theming@file:../../../code/lib/theming#../../../code/lib/theming::hash=cf2697&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@emotion/use-insertion-effect-with-fallbacks": "npm:^1.0.1" "@storybook/client-logger": "workspace:*" @@ -3237,7 +3238,7 @@ __metadata: optional: true react-dom: optional: true - checksum: 10/95ee62ab3810f96e3d16924110bc2a267973e32b67b1cd08b57e6111616f8d488c9cfd8f354bda8ee3db343437b8acdaa5f9ee923671b8783efbcffc4fc3397c + checksum: 10/c87b12f79a54319df221805988e5da6955265e1a76f67daba34c401959ca0d12c77b19a53c5ed824782979b09f19eec774e68f6d9bd126e0d0640d8197a2d381 languageName: node linkType: hard @@ -12068,14 +12069,14 @@ __metadata: linkType: hard "storybook@file:../../../code/lib/cli-storybook::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.5 - resolution: "storybook@file:../../../code/lib/cli-storybook#../../../code/lib/cli-storybook::hash=6f2e56&locator=portable-stories-nextjs%40workspace%3A." + version: 8.1.0-alpha.6 + resolution: "storybook@file:../../../code/lib/cli-storybook#../../../code/lib/cli-storybook::hash=f0c1b6&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/cli": "workspace:*" bin: sb: ./index.js storybook: ./index.js - checksum: 10/d2acea2b4b4a262aab8a97f90847cb53f62e004b1c18d2f583983f43bf781ef5f3cb2a0cec84b8ac00c8ad0f030982f5cb07643c078bccf403a629986d66871d + checksum: 10/941843aa4b11da491079c9ee193117cf88153d3836dc58771c7a4f743779e88ed941157d55101925d7fd372fdb9d2160e4b156f4e30227e3785525311f75d93d languageName: node linkType: hard From 594c9c3347284fc0dec3eb32afe79dccb0c5b5f5 Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Tue, 9 Apr 2024 14:35:39 +0200 Subject: [PATCH 21/82] Update package.json and jest.config.js for next/headers alias --- code/frameworks/nextjs/package.json | 3 +++ code/frameworks/nextjs/src/headers/cookies.ts | 6 ++++-- code/frameworks/nextjs/src/preview.tsx | 5 ++++- .../portable-stories-kitchen-sink/nextjs/yarn.lock | 4 ++-- 4 files changed, 13 insertions(+), 5 deletions(-) diff --git a/code/frameworks/nextjs/package.json b/code/frameworks/nextjs/package.json index ed1946d4a6ce..1501ff6f23a0 100644 --- a/code/frameworks/nextjs/package.json +++ b/code/frameworks/nextjs/package.json @@ -64,6 +64,9 @@ ], "dist/image-context": [ "dist/image-context.d.ts" + ], + "headers": [ + "dist/headers/index.d.ts" ] } }, diff --git a/code/frameworks/nextjs/src/headers/cookies.ts b/code/frameworks/nextjs/src/headers/cookies.ts index 0335527367fc..5b6117d5a86b 100644 --- a/code/frameworks/nextjs/src/headers/cookies.ts +++ b/code/frameworks/nextjs/src/headers/cookies.ts @@ -1,13 +1,15 @@ /* eslint-disable no-underscore-dangle */ import { fn } from '@storybook/test'; -import type { HeadersStore } from './headers'; -import { headers } from './headers'; import type { RequestCookies } from 'next/dist/compiled/@edge-runtime/cookies'; import { parseCookie, stringifyCookie, type RequestCookie, } from 'next/dist/compiled/@edge-runtime/cookies'; +// 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 { headers, type HeadersStore } from '@storybook/nextjs/headers'; const stringifyCookies = (map: Map) => { return Array.from(map) diff --git a/code/frameworks/nextjs/src/preview.tsx b/code/frameworks/nextjs/src/preview.tsx index 0d0b30f9d3ac..7181a948e4ab 100644 --- a/code/frameworks/nextjs/src/preview.tsx +++ b/code/frameworks/nextjs/src/preview.tsx @@ -4,7 +4,10 @@ import { ImageDecorator } from './images/decorator'; import { RouterDecorator } from './routing/decorator'; import { StyledJsxDecorator } from './styledJsx/decorator'; import { HeadManagerDecorator } from './head-manager/decorator'; -import { cookies, headers } from './headers'; +// 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 { cookies, headers } from '@storybook/nextjs/headers'; function addNextHeadCount() { const meta = document.createElement('meta'); diff --git a/test-storybooks/portable-stories-kitchen-sink/nextjs/yarn.lock b/test-storybooks/portable-stories-kitchen-sink/nextjs/yarn.lock index c9002d189472..b67bf0e79b9a 100644 --- a/test-storybooks/portable-stories-kitchen-sink/nextjs/yarn.lock +++ b/test-storybooks/portable-stories-kitchen-sink/nextjs/yarn.lock @@ -2985,7 +2985,7 @@ __metadata: "@storybook/nextjs@file:../../../code/frameworks/nextjs::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 - resolution: "@storybook/nextjs@file:../../../code/frameworks/nextjs#../../../code/frameworks/nextjs::hash=06106f&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/nextjs@file:../../../code/frameworks/nextjs#../../../code/frameworks/nextjs::hash=449323&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@babel/core": "npm:^7.23.2" "@babel/plugin-syntax-bigint": "npm:^7.8.3" @@ -3043,7 +3043,7 @@ __metadata: optional: true webpack: optional: true - checksum: 10/65a8ba601d1ab74a5b8af2e4399629e6cb1715a3003828664264792eabf68b403d15251287a819d930c25b612325ff58eb1fe603036f65f51d51682501672f6e + checksum: 10/cca75d58487e2dcba461dc15fb913f2ec60afa0fddbd0038eba3983f5286fa6555ab4c00e94b6eb1048fad85656a88fb7e5fd6534ec0907c3c46049ace5551dc languageName: node linkType: hard From d1fcfd5c3b751a8d590c3bdf2ad9bff7f3162be8 Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Tue, 9 Apr 2024 15:11:35 +0200 Subject: [PATCH 22/82] Add explanation to webpack alias --- code/frameworks/nextjs/src/headers/webpack.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/code/frameworks/nextjs/src/headers/webpack.ts b/code/frameworks/nextjs/src/headers/webpack.ts index 8f2d63a165ca..9e78fc459cac 100644 --- a/code/frameworks/nextjs/src/headers/webpack.ts +++ b/code/frameworks/nextjs/src/headers/webpack.ts @@ -3,6 +3,8 @@ import type { Configuration as WebpackConfig } from 'webpack'; export const configureNextHeaders = (baseConfig: WebpackConfig): void => { const resolve = baseConfig.resolve ?? {}; + // Use headersPath for both next/headers and @storybook/nextjs/headers imports + // to make sure they all serve the MJS version of the file const headersPath = join( dirname(require.resolve('@storybook/nextjs/package.json')), '/dist/headers/index.mjs' From 3209c59b5806dfa284c4c223934953741f52fc4f Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Wed, 10 Apr 2024 10:19:40 +0200 Subject: [PATCH 23/82] fix type generation --- code/frameworks/nextjs/package.json | 3 ++- code/frameworks/nextjs/src/headers/cookies.ts | 2 ++ code/frameworks/nextjs/src/preview.tsx | 7 +++++-- 3 files changed, 9 insertions(+), 3 deletions(-) diff --git a/code/frameworks/nextjs/package.json b/code/frameworks/nextjs/package.json index 1501ff6f23a0..7175bb476a05 100644 --- a/code/frameworks/nextjs/package.json +++ b/code/frameworks/nextjs/package.json @@ -166,8 +166,9 @@ "./src/image-context.ts", "./src/index.ts", "./src/preset.ts", + "./src/headers/cookies.ts", + "./src/headers/headers.ts", "./src/preview.tsx", - "./src/headers/index.ts", "./src/next-image-loader-stub.ts", "./src/images/decorator.tsx", "./src/images/next-legacy-image.tsx", diff --git a/code/frameworks/nextjs/src/headers/cookies.ts b/code/frameworks/nextjs/src/headers/cookies.ts index 5b6117d5a86b..d7c9524ac43f 100644 --- a/code/frameworks/nextjs/src/headers/cookies.ts +++ b/code/frameworks/nextjs/src/headers/cookies.ts @@ -9,6 +9,8 @@ import { // 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 +// 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, type HeadersStore } from '@storybook/nextjs/headers'; const stringifyCookies = (map: Map) => { diff --git a/code/frameworks/nextjs/src/preview.tsx b/code/frameworks/nextjs/src/preview.tsx index 7181a948e4ab..0bb931dbd85e 100644 --- a/code/frameworks/nextjs/src/preview.tsx +++ b/code/frameworks/nextjs/src/preview.tsx @@ -1,12 +1,15 @@ -import type { Addon_DecoratorFunction } from '@storybook/types'; +import type { Addon_DecoratorFunction, Addon_LoaderFunction } from '@storybook/types'; import './config/preview'; import { ImageDecorator } from './images/decorator'; import { RouterDecorator } from './routing/decorator'; import { StyledJsxDecorator } from './styledJsx/decorator'; import { HeadManagerDecorator } from './head-manager/decorator'; + // 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 +// 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 { cookies, headers } from '@storybook/nextjs/headers'; function addNextHeadCount() { @@ -25,7 +28,7 @@ export const decorators: Addon_DecoratorFunction[] = [ HeadManagerDecorator, ]; -export const loaders = async () => { +export const loaders: Addon_LoaderFunction = async () => { cookies().mockRestore(); headers().mockRestore(); }; From 6220e9365d1d9ec6c35b32be633674852d6a381c Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Wed, 10 Apr 2024 11:04:06 +0200 Subject: [PATCH 24/82] add more spies --- code/frameworks/nextjs/src/headers/headers.ts | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/code/frameworks/nextjs/src/headers/headers.ts b/code/frameworks/nextjs/src/headers/headers.ts index e4b0696c00d2..46f30fe0c171 100644 --- a/code/frameworks/nextjs/src/headers/headers.ts +++ b/code/frameworks/nextjs/src/headers/headers.ts @@ -64,25 +64,25 @@ export class HeadersStore extends Headers implements HeadersAdapter { } ).mockName('headers().forEach'); - public *entries(): IterableIterator<[string, string]> { + public entries = fn(function* (this: HeadersStore): IterableIterator<[string, string]> { for (const key of Object.keys(this.headers)) { const name = key.toLowerCase(); // We assert here that this is a string because we got it from the // Object.keys() call above. const value = this.get(name) as string; - yield [name, value] as [string, string]; + yield [name, value]; } - } + }).mockName('headers().entries'); - public *keys(): IterableIterator { + public keys = fn(function* (this: HeadersStore): IterableIterator { for (const key of Object.keys(this.headers)) { const name = key.toLowerCase(); yield name; } - } + }).mockName('headers().keys'); - public *values(): IterableIterator { + public values = fn(function* (this: HeadersStore): IterableIterator { for (const key of Object.keys(this.headers)) { // We assert here that this is a string because we got it from the // Object.keys() call above. @@ -90,7 +90,7 @@ export class HeadersStore extends Headers implements HeadersAdapter { yield value; } - } + }).mockName('headers().values'); public [Symbol.iterator](): IterableIterator<[string, string]> { return this.entries(); From 57d2ec396c309a82d0e5f8abb813993a187a4351 Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Wed, 10 Apr 2024 11:07:43 +0200 Subject: [PATCH 25/82] fix entrypoint --- code/frameworks/nextjs/package.json | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/code/frameworks/nextjs/package.json b/code/frameworks/nextjs/package.json index 7175bb476a05..83f28e8756e3 100644 --- a/code/frameworks/nextjs/package.json +++ b/code/frameworks/nextjs/package.json @@ -166,8 +166,7 @@ "./src/image-context.ts", "./src/index.ts", "./src/preset.ts", - "./src/headers/cookies.ts", - "./src/headers/headers.ts", + "./src/headers/index.ts", "./src/preview.tsx", "./src/next-image-loader-stub.ts", "./src/images/decorator.tsx", From 14d4f0f4d54de13fe67e573ffbefe76548de99bc Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Wed, 10 Apr 2024 11:07:58 +0200 Subject: [PATCH 26/82] improve tests --- .../NextHeader.stories.tsx | 26 ++++++++++++++++--- .../stories_nextjs-default-ts/NextHeader.tsx | 2 +- 2 files changed, 23 insertions(+), 5 deletions(-) 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 fe7c8ed9f34a..4ef5a3d7466b 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 @@ -19,10 +19,28 @@ export const Default: Story = { }); headers().set('timezone', 'Central European Summer Time'); }, - play: async ({ canvasElement }) => { + play: async ({ canvasElement, step }) => { const canvas = within(canvasElement); - const submitButton = await canvas.findByRole('button'); - await userEvent.click(submitButton); - expect(headers().get('cookie')).toContain('user-id=encrypted-id'); + const headersMock = headers(); + const cookiesMock = cookies(); + await step('Cookie and header store apis are called upon rendering', async () => { + await expect(cookiesMock.getAll).toHaveBeenCalled(); + await expect(headersMock.entries).toHaveBeenCalled(); + }); + + await step('Upon clicking on submit, the user-id cookie is set', async () => { + const submitButton = await canvas.findByRole('button'); + await userEvent.click(submitButton); + + await expect(cookiesMock.set).toHaveBeenCalledWith('user-id', 'encrypted-id'); + }); + + await step('The user-id cookie is available in cookie and header stores', async () => { + await expect(headersMock.get('cookie')).toContain('user-id=encrypted-id'); + await expect(cookiesMock.get('user-id')).toEqual({ + name: 'user-id', + value: 'encrypted-id', + }); + }); }, }; diff --git a/code/frameworks/nextjs/template/stories_nextjs-default-ts/NextHeader.tsx b/code/frameworks/nextjs/template/stories_nextjs-default-ts/NextHeader.tsx index bb70c020699c..b93c9611c774 100644 --- a/code/frameworks/nextjs/template/stories_nextjs-default-ts/NextHeader.tsx +++ b/code/frameworks/nextjs/template/stories_nextjs-default-ts/NextHeader.tsx @@ -22,7 +22,7 @@ export default async function Component() { })}

Headers:

- {Array.from(headers()).map(([name, value]: [string, string]) => { + {Array.from(headers().entries()).map(([name, value]: [string, string]) => { return (

Name: {name} From 34ca025f5b897fc6f3c5b8a568de7fae6220a8cc Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Wed, 10 Apr 2024 11:09:49 +0200 Subject: [PATCH 27/82] Change entrypoint to `@storybook/nextjs/headers.mock` --- code/frameworks/nextjs/package.json | 4 ++-- code/frameworks/nextjs/src/headers/cookies.ts | 2 +- code/frameworks/nextjs/src/headers/webpack.ts | 2 +- code/frameworks/nextjs/src/preview.tsx | 2 +- .../template/stories_nextjs-default-ts/NextHeader.stories.tsx | 2 +- .../portable-stories-kitchen-sink/nextjs/jest.config.js | 2 +- .../nextjs/stories/NextHeader.stories.tsx | 2 +- 7 files changed, 8 insertions(+), 8 deletions(-) diff --git a/code/frameworks/nextjs/package.json b/code/frameworks/nextjs/package.json index 83f28e8756e3..e30984136eae 100644 --- a/code/frameworks/nextjs/package.json +++ b/code/frameworks/nextjs/package.json @@ -47,7 +47,7 @@ "require": "./dist/next-image-loader-stub.js", "import": "./dist/next-image-loader-stub.mjs" }, - "./headers": { + "./headers.mock": { "types": "./dist/headers/index.d.ts", "require": "./dist/headers/index.js", "import": "./dist/headers/index.mjs" @@ -65,7 +65,7 @@ "dist/image-context": [ "dist/image-context.d.ts" ], - "headers": [ + "headers.mock": [ "dist/headers/index.d.ts" ] } diff --git a/code/frameworks/nextjs/src/headers/cookies.ts b/code/frameworks/nextjs/src/headers/cookies.ts index d7c9524ac43f..13bc7779d3ef 100644 --- a/code/frameworks/nextjs/src/headers/cookies.ts +++ b/code/frameworks/nextjs/src/headers/cookies.ts @@ -11,7 +11,7 @@ import { // is the only way to achieve it actually being a singleton // 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, type HeadersStore } from '@storybook/nextjs/headers'; +import { headers, type HeadersStore } from '@storybook/nextjs/headers.mock'; const stringifyCookies = (map: Map) => { return Array.from(map) diff --git a/code/frameworks/nextjs/src/headers/webpack.ts b/code/frameworks/nextjs/src/headers/webpack.ts index 9e78fc459cac..fceb5049f6d2 100644 --- a/code/frameworks/nextjs/src/headers/webpack.ts +++ b/code/frameworks/nextjs/src/headers/webpack.ts @@ -13,6 +13,6 @@ export const configureNextHeaders = (baseConfig: WebpackConfig): void => { resolve.alias = { ...resolve.alias, 'next/headers': headersPath, - '@storybook/nextjs/headers': headersPath, + '@storybook/nextjs/headers.mock': headersPath, }; }; diff --git a/code/frameworks/nextjs/src/preview.tsx b/code/frameworks/nextjs/src/preview.tsx index 0bb931dbd85e..7fb164d1f0de 100644 --- a/code/frameworks/nextjs/src/preview.tsx +++ b/code/frameworks/nextjs/src/preview.tsx @@ -10,7 +10,7 @@ import { HeadManagerDecorator } from './head-manager/decorator'; // is the only way to achieve it actually being a singleton // 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 { cookies, headers } from '@storybook/nextjs/headers'; +import { cookies, headers } from '@storybook/nextjs/headers.mock'; function addNextHeadCount() { const meta = document.createElement('meta'); 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 4ef5a3d7466b..d8abfe11bdd1 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 @@ -2,7 +2,7 @@ import NextHeader from './NextHeader'; import type { Meta } from '@storybook/react'; import type { StoryObj } from '@storybook/react'; import { expect, userEvent, within } from '@storybook/test'; -import { cookies, headers } from '@storybook/nextjs/headers'; +import { cookies, headers } from '@storybook/nextjs/headers.mock'; export default { component: NextHeader, diff --git a/test-storybooks/portable-stories-kitchen-sink/nextjs/jest.config.js b/test-storybooks/portable-stories-kitchen-sink/nextjs/jest.config.js index 1869752aaa5d..deb85e5a4b0e 100644 --- a/test-storybooks/portable-stories-kitchen-sink/nextjs/jest.config.js +++ b/test-storybooks/portable-stories-kitchen-sink/nextjs/jest.config.js @@ -13,7 +13,7 @@ const customJestConfig = { setupFilesAfterEnv: ['./jest.setup.ts'], // TODO add docs about this: alias next/headers to @storybook/nextjs/headers moduleNameMapper: { - '^next/headers$': '@storybook/nextjs/headers', + '^next/headers$': '@storybook/nextjs/headers.mock', }, }; diff --git a/test-storybooks/portable-stories-kitchen-sink/nextjs/stories/NextHeader.stories.tsx b/test-storybooks/portable-stories-kitchen-sink/nextjs/stories/NextHeader.stories.tsx index d6b0cf7f922b..edbe082ef0f0 100644 --- a/test-storybooks/portable-stories-kitchen-sink/nextjs/stories/NextHeader.stories.tsx +++ b/test-storybooks/portable-stories-kitchen-sink/nextjs/stories/NextHeader.stories.tsx @@ -1,7 +1,7 @@ import type { Meta } from '@storybook/react'; import type { StoryObj } from '@storybook/react'; import { expect, userEvent, within } from '@storybook/test'; -import { cookies, headers } from '@storybook/nextjs/headers'; +import { cookies, headers } from '@storybook/nextjs/headers.mock'; import NextHeader from './NextHeader'; export default { From 5c20e9514414e465eb7bd68903b00cc4266d5b4f Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Wed, 10 Apr 2024 11:12:21 +0200 Subject: [PATCH 28/82] update portable stories test --- .../nextjs/stories/NextHeader.stories.tsx | 26 +++- .../nextjs/yarn.lock | 144 +++++++++--------- 2 files changed, 94 insertions(+), 76 deletions(-) diff --git a/test-storybooks/portable-stories-kitchen-sink/nextjs/stories/NextHeader.stories.tsx b/test-storybooks/portable-stories-kitchen-sink/nextjs/stories/NextHeader.stories.tsx index edbe082ef0f0..1c75f64375ea 100644 --- a/test-storybooks/portable-stories-kitchen-sink/nextjs/stories/NextHeader.stories.tsx +++ b/test-storybooks/portable-stories-kitchen-sink/nextjs/stories/NextHeader.stories.tsx @@ -19,10 +19,28 @@ export const Default: Story = { }); headers().set('timezone', 'Central European Summer Time'); }, - play: async ({ canvasElement }) => { + play: async ({ canvasElement, step }) => { const canvas = within(canvasElement); - const submitButton = await canvas.findByRole('button'); - await userEvent.click(submitButton); - expect(headers().get('cookie')).toContain('user-id=encrypted-id'); + const headersMock = headers(); + const cookiesMock = cookies(); + await step('Cookie and header store apis are called upon rendering', async () => { + await expect(cookiesMock.getAll).toHaveBeenCalled(); + await expect(headersMock.entries).toHaveBeenCalled(); + }); + + await step('Upon clicking on submit, the user-id cookie is set', async () => { + const submitButton = await canvas.findByRole('button'); + await userEvent.click(submitButton); + + await expect(cookiesMock.set).toHaveBeenCalledWith('user-id', 'encrypted-id'); + }); + + await step('The user-id cookie is available in cookie and header stores', async () => { + await expect(headersMock.get('cookie')).toContain('user-id=encrypted-id'); + await expect(cookiesMock.get('user-id')).toEqual({ + name: 'user-id', + value: 'encrypted-id', + }); + }); }, }; diff --git a/test-storybooks/portable-stories-kitchen-sink/nextjs/yarn.lock b/test-storybooks/portable-stories-kitchen-sink/nextjs/yarn.lock index b67bf0e79b9a..7b54b424d5b9 100644 --- a/test-storybooks/portable-stories-kitchen-sink/nextjs/yarn.lock +++ b/test-storybooks/portable-stories-kitchen-sink/nextjs/yarn.lock @@ -2379,7 +2379,7 @@ __metadata: "@storybook/addon-actions@file:../../../code/addons/actions::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 - resolution: "@storybook/addon-actions@file:../../../code/addons/actions#../../../code/addons/actions::hash=65179b&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/addon-actions@file:../../../code/addons/actions#../../../code/addons/actions::hash=99649f&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/core-events": "workspace:*" "@storybook/global": "npm:^5.0.0" @@ -2387,18 +2387,18 @@ __metadata: dequal: "npm:^2.0.2" polished: "npm:^4.2.2" uuid: "npm:^9.0.0" - checksum: 10/9ed534d56ffd4ae256837a80af482961a5881624cb85eb46983e913497bbdcd8c441deac96ea76bf99eb1f7b0fb523b60a7eec4059a78eadf00e92aa6bf977b3 + checksum: 10/79a14c7a74591e404e5ec22c2b6c9eaa03dd48bf3316470dd2642e3c70abd7c90b168fd350e729b617967c7d759df2ef0107534d218d1138b12e737c8a3e888e languageName: node linkType: hard "@storybook/addon-backgrounds@file:../../../code/addons/backgrounds::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 - resolution: "@storybook/addon-backgrounds@file:../../../code/addons/backgrounds#../../../code/addons/backgrounds::hash=026986&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/addon-backgrounds@file:../../../code/addons/backgrounds#../../../code/addons/backgrounds::hash=bbac2f&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/global": "npm:^5.0.0" memoizerific: "npm:^1.11.3" ts-dedent: "npm:^2.0.0" - checksum: 10/99d407bf5df62a7e85233e5a484ec0801ed309c3b910af79c65bbcceabeb1a7e8619c89178ada8ea20c1dae9196d559dbd75905732fe6a181374bf8c8d305993 + checksum: 10/aaae35c1f570d788cded175bad9b07ce9826023fa320e6d276c62678953d07cfe98f636005d7ce0456d0b5df699e16377317edcfdb7d304d3b05cc4d1683bb72 languageName: node linkType: hard @@ -2419,7 +2419,7 @@ __metadata: "@storybook/addon-docs@file:../../../code/addons/docs::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 - resolution: "@storybook/addon-docs@file:../../../code/addons/docs#../../../code/addons/docs::hash=58d358&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/addon-docs@file:../../../code/addons/docs#../../../code/addons/docs::hash=c90446&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@babel/core": "npm:^7.12.3" "@mdx-js/react": "npm:^3.0.0" @@ -2441,13 +2441,13 @@ __metadata: rehype-external-links: "npm:^3.0.0" rehype-slug: "npm:^6.0.0" ts-dedent: "npm:^2.0.0" - checksum: 10/e794088e3f6cdad1c5ea178ab7d07db27da5729bbb380bee957a46d185f19125ad91519d56d2a3d68b7d60afd9e31a9a72edb2f24f5ba68866a531a25e97ef35 + checksum: 10/6cb03b37a894e2a563a67bcc1179194a7e48f202ed438763cce7b6255697fd6dd192607076dad6503d7be4a1d094daf9d18daf50b8aebae71ededfe020f151f1 languageName: node linkType: hard "@storybook/addon-essentials@file:../../../code/addons/essentials::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 - resolution: "@storybook/addon-essentials@file:../../../code/addons/essentials#../../../code/addons/essentials::hash=5092fe&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/addon-essentials@file:../../../code/addons/essentials#../../../code/addons/essentials::hash=584ec5&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/addon-actions": "workspace:*" "@storybook/addon-backgrounds": "workspace:*" @@ -2463,22 +2463,22 @@ __metadata: "@storybook/node-logger": "workspace:*" "@storybook/preview-api": "workspace:*" ts-dedent: "npm:^2.0.0" - checksum: 10/6e482c766038f53305099b1cad8195bb546bb2b18a701b2f85491e9c5393e39e715b6505672ffb36616d5ae5baa9f06d16dd6f4a86d3faa31ee550d045a4bc57 + checksum: 10/986829238ed66c8818ab27995effd47614c4182aa326e70de645d38babf58f2cab76c7a2f1825a34cecab07ca78ca2bb5e69938da2dec3bb9837905f7e43ec9b languageName: node linkType: hard "@storybook/addon-highlight@file:../../../code/addons/highlight::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 - resolution: "@storybook/addon-highlight@file:../../../code/addons/highlight#../../../code/addons/highlight::hash=a69c2f&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/addon-highlight@file:../../../code/addons/highlight#../../../code/addons/highlight::hash=291b82&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/global": "npm:^5.0.0" - checksum: 10/e61e168997b91f2ab729f02de3e186a26c697c0851d188d7ece1ec145fcd84c7fea3cd3fac3608269bb4944c9b4e13436493f65ddf8c0a808e30bb5ece70d9f3 + checksum: 10/ecf6c7aecffb3b61cd08468d9a8f0f67b191ff8c4d9df0022b077f3e0cb6a42b109a8d844745c14a62ae740131708c606b3b5e359fbf5921559b0e02a85cc686 languageName: node linkType: hard "@storybook/addon-interactions@file:../../../code/addons/interactions::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 - resolution: "@storybook/addon-interactions@file:../../../code/addons/interactions#../../../code/addons/interactions::hash=3e90ca&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/addon-interactions@file:../../../code/addons/interactions#../../../code/addons/interactions::hash=e7e04a&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/global": "npm:^5.0.0" "@storybook/instrumenter": "workspace:*" @@ -2486,43 +2486,43 @@ __metadata: "@storybook/types": "workspace:*" polished: "npm:^4.2.2" ts-dedent: "npm:^2.2.0" - checksum: 10/18c21704ebc20d55fe75e735f89e8c5926b6fe3a44e7025de16d666cf3c6435e9fc19ada8dc3714f4406ce1f3b3117120610c7c8bcfefb86c913a6bbf14f668a + checksum: 10/c66d7db9c1356903d444211962054b0a692a56f7ed5debcaa1f2e40fd57575975b8de86c2fb3be3a140e69cdc8f36b25f81be6e2ca55fb4facf826694d8be65f languageName: node linkType: hard "@storybook/addon-measure@file:../../../code/addons/measure::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 - resolution: "@storybook/addon-measure@file:../../../code/addons/measure#../../../code/addons/measure::hash=086736&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/addon-measure@file:../../../code/addons/measure#../../../code/addons/measure::hash=43b2ca&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/global": "npm:^5.0.0" tiny-invariant: "npm:^1.3.1" - checksum: 10/3f9a7ddab76235f46cfaa96386074964a311908344e5a4617025dcbab610742e48672b8f236a0d4a5c254273ae4b959ef9114bf31e22ebfcae085c17309c2f47 + checksum: 10/ce880ee3acae8c6a5994a5905724040f1cb9b7a1c1654c6ab6dfec0f61298db78afc78309aa966eecf1dbdc2e59f48cb2108c7514305ca701eeb19262477bfc8 languageName: node linkType: hard "@storybook/addon-outline@file:../../../code/addons/outline::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 - resolution: "@storybook/addon-outline@file:../../../code/addons/outline#../../../code/addons/outline::hash=c2049c&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/addon-outline@file:../../../code/addons/outline#../../../code/addons/outline::hash=772f7e&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/global": "npm:^5.0.0" ts-dedent: "npm:^2.0.0" - checksum: 10/6935af0b38fdb46c5bee74c22a170b2f10ffcbff14ee039ddc8488f3b6eb1c2d3f11c35c9761eaa8ddfafe3fecaef3ace12a5a30610fc4d1c9a5b161d7fbba53 + checksum: 10/17d761b1298d08adc15d65dfb3efb91440cc73e6828ab7ee290703e36f9c2756546a99220119c15d03697c5ac2b71ccdd7b98fba4ebb87faab9caf9ba053dbdc languageName: node linkType: hard "@storybook/addon-toolbars@file:../../../code/addons/toolbars::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 - resolution: "@storybook/addon-toolbars@file:../../../code/addons/toolbars#../../../code/addons/toolbars::hash=7413c4&locator=portable-stories-nextjs%40workspace%3A." - checksum: 10/a428f3c5b3530cd56c81c83a7e05c2f364a75a7e358dbd9f082eb1b88b875a5e721db0cb7050f1ac48117ed0d4b95a8b35e07e8f3e4b17e6cdd0076a4d959bc7 + resolution: "@storybook/addon-toolbars@file:../../../code/addons/toolbars#../../../code/addons/toolbars::hash=ce7192&locator=portable-stories-nextjs%40workspace%3A." + checksum: 10/fd28942b5da079e25cd778e7b134b34e07289044553622b1a1636e7e2da5075ddf16f66934619eb7ba3514d98425102365ea8dd8cebbf17fec4bb6849ef38ec5 languageName: node linkType: hard "@storybook/addon-viewport@file:../../../code/addons/viewport::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 - resolution: "@storybook/addon-viewport@file:../../../code/addons/viewport#../../../code/addons/viewport::hash=57d9d2&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/addon-viewport@file:../../../code/addons/viewport#../../../code/addons/viewport::hash=1fd57e&locator=portable-stories-nextjs%40workspace%3A." dependencies: memoizerific: "npm:^1.11.3" - checksum: 10/752aa713b8b924944dbf1b3b904dd31e4508651ef9b8437dc3a60444890f760a7f76fcbbe80037c0f8e790e31a37d062aa6aa27182c1cd0784eba000745a44f2 + checksum: 10/00e25bcdc41c2ac49405c62004b0946ca24f73ee7d65678ea25ddd222ac44e44ed6716ab6c66d6743b8dd4bb89123cce0edd4bafb14883257cb133f3a8a4198a languageName: node linkType: hard @@ -2568,7 +2568,7 @@ __metadata: "@storybook/builder-manager@file:../../../code/builders/builder-manager::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 - resolution: "@storybook/builder-manager@file:../../../code/builders/builder-manager#../../../code/builders/builder-manager::hash=727c53&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/builder-manager@file:../../../code/builders/builder-manager#../../../code/builders/builder-manager::hash=875996&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@fal-works/esbuild-plugin-global-externals": "npm:^2.1.2" "@storybook/core-common": "workspace:*" @@ -2584,13 +2584,13 @@ __metadata: fs-extra: "npm:^11.1.0" process: "npm:^0.11.10" util: "npm:^0.12.4" - checksum: 10/1e3f751ec4dd12ca12d8a3190fb104644041cd08fb4c1548567105dabea9c20af0d25e19333e9c9da51225e0dd5159c2d2614cb3ac78b6f6b2e06c866f543eaf + checksum: 10/b776c568ef58940649b06b746b4002b221b88b0c9c4d56bb136b8997cfa88f77e3a05954c59c815ca2ecf19285607e2ef717198f42c11dac2235ed6b01a07c9d languageName: node linkType: hard "@storybook/builder-webpack5@file:../../../code/builders/builder-webpack5::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 - resolution: "@storybook/builder-webpack5@file:../../../code/builders/builder-webpack5#../../../code/builders/builder-webpack5::hash=ad9e5e&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/builder-webpack5@file:../../../code/builders/builder-webpack5#../../../code/builders/builder-webpack5::hash=983659&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/channels": "workspace:*" "@storybook/client-logger": "workspace:*" @@ -2629,20 +2629,20 @@ __metadata: peerDependenciesMeta: typescript: optional: true - checksum: 10/1dbbad195f6f0cb506b0b693c825c494f1a88cd71ca7784b06e0410f080468cac67d35adff1bc6f785b3f7d55cfe8e794684df01b4f440799955f0e787d8963a + checksum: 10/f84f41cd8ac80376ba603f4bb58da565f2b0e95ed37593279d85c4e5573de64633f10b7c6f2bd399f6d40057f1c97934760b969326520250f6de5efd07ac967b languageName: node linkType: hard "@storybook/channels@file:../../../code/lib/channels::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 - resolution: "@storybook/channels@file:../../../code/lib/channels#../../../code/lib/channels::hash=78c3de&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/channels@file:../../../code/lib/channels#../../../code/lib/channels::hash=3a33a2&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/client-logger": "workspace:*" "@storybook/core-events": "workspace:*" "@storybook/global": "npm:^5.0.0" telejson: "npm:^7.2.0" tiny-invariant: "npm:^1.3.1" - checksum: 10/d161eff9c0218c7a6628e44dceed5299b253f997fc36fd344a428937b901a3f0755a067240394636ca0e33611848cfc4b43e07a259f4232a7ea3c409418da5fc + checksum: 10/cda1b155f07fdac919a29e5a5287ae33ef4b3ed9c5c9816c29e17e3aa0dd788dc59da8775c40341ebcbd426ecf4f9ab629949dfe945834f48db7ca6053c062f1 languageName: node linkType: hard @@ -2695,16 +2695,16 @@ __metadata: "@storybook/client-logger@file:../../../code/lib/client-logger::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 - resolution: "@storybook/client-logger@file:../../../code/lib/client-logger#../../../code/lib/client-logger::hash=54f3a6&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/client-logger@file:../../../code/lib/client-logger#../../../code/lib/client-logger::hash=f3ac76&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/global": "npm:^5.0.0" - checksum: 10/234fc62dd3bbf8350049d6b149d035eae31b804dd6b8ef175c84ac7bc7ef32943976197a204f4d059952d47de3b97c56a8d2238f0bebcd10e29665b112ba0e1f + checksum: 10/00b5cfade208483f5ec85c8aa59cabf402502a4cf1d9c3ee24a311a396e65ce97f0a3d4356aac9f413c8d84c9804ccb07aaeda6f3d553799e6e036960f4a2fbe languageName: node linkType: hard "@storybook/codemod@file:../../../code/lib/codemod::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 - resolution: "@storybook/codemod@file:../../../code/lib/codemod#../../../code/lib/codemod::hash=a56758&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/codemod@file:../../../code/lib/codemod#../../../code/lib/codemod::hash=13e51b&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@babel/core": "npm:^7.23.2" "@babel/preset-env": "npm:^7.23.2" @@ -2721,13 +2721,13 @@ __metadata: prettier: "npm:^3.1.1" recast: "npm:^0.23.5" tiny-invariant: "npm:^1.3.1" - checksum: 10/281ccf2a77c876f5c76629a2d40c19c90d5c5244acb1bb0480e8317c79a1d71e52cae72d542368b0b3192f8775b8dc380141d0ba8ecfc3677970ac43de5eab4f + checksum: 10/5cfc52e72455178e503ff226dd3fa1a0917e7f14a86f58b914aa5971f5288e45b68246b0d550169a9af941d5bdb2293c160831de4c466894ddabb609092dbace languageName: node linkType: hard "@storybook/components@file:../../../code/ui/components::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 - resolution: "@storybook/components@file:../../../code/ui/components#../../../code/ui/components::hash=df917d&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/components@file:../../../code/ui/components#../../../code/ui/components::hash=2c348b&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@radix-ui/react-slot": "npm:^1.0.2" "@storybook/client-logger": "workspace:*" @@ -2741,7 +2741,7 @@ __metadata: peerDependencies: react: ^16.8.0 || ^17.0.0 || ^18.0.0 react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 - checksum: 10/70d228121e8d87efe766d01665df20448f310c0413edf80d7496ad887e876c7d24bae7786c89a0746d2b1fced8d89f1c7d5a20d52d39bbeee0de269512232b0c + checksum: 10/5ca7607bebb485e1dbb5c26f5dc3482e661d1646381be3ae26284c1e82cb0e2de51e05f5c4272ebe4d5fa6536aecb8dcd46e3da871aad90ba67a2e7e8987d278 languageName: node linkType: hard @@ -2783,16 +2783,16 @@ __metadata: "@storybook/core-events@file:../../../code/lib/core-events::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 - resolution: "@storybook/core-events@file:../../../code/lib/core-events#../../../code/lib/core-events::hash=00e230&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/core-events@file:../../../code/lib/core-events#../../../code/lib/core-events::hash=840150&locator=portable-stories-nextjs%40workspace%3A." dependencies: ts-dedent: "npm:^2.0.0" - checksum: 10/04b637e0c32d0cf6b8b7f13a9c3366ae2f8d1881ac1e0024cb2d02cf4f38052a2655676c67876644c81fd4c351ebbf138afb6873d2449d3b8bcbecf4596b22b5 + checksum: 10/ccfa4397af9c114f401ac87d232f66c0cb37e7ee104647b36dd34e7bf598ff7e3a22fb18a6fb9d1529cef35f053056e34fa3f7626e62c5e133d31bd58fd6b5cb languageName: node linkType: hard "@storybook/core-server@file:../../../code/lib/core-server::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 - resolution: "@storybook/core-server@file:../../../code/lib/core-server#../../../code/lib/core-server::hash=6e21ef&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/core-server@file:../../../code/lib/core-server#../../../code/lib/core-server::hash=2c034c&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@aw-web-design/x-default-browser": "npm:1.4.126" "@babel/core": "npm:^7.23.9" @@ -2837,36 +2837,36 @@ __metadata: util-deprecate: "npm:^1.0.2" watchpack: "npm:^2.2.0" ws: "npm:^8.2.3" - checksum: 10/052920abcb3352dc422ed230cda74a60996475600ce4bf23e0566dfeb25d2b5b86e7d84a19a47240b518a067bd74dec1bfae7674d68b3c59099c0ebd16e588d7 + checksum: 10/83c58dfa24e67e8ea10107858e723eebe3ebafa17580fbe9526022e02d1ba2467ef5e75ba3b303436c470a7151f183ad2d781b4cef1201a73cdf8f10d317cc57 languageName: node linkType: hard "@storybook/core-webpack@file:../../../code/lib/core-webpack::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 - resolution: "@storybook/core-webpack@file:../../../code/lib/core-webpack#../../../code/lib/core-webpack::hash=a48486&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/core-webpack@file:../../../code/lib/core-webpack#../../../code/lib/core-webpack::hash=d17dda&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/core-common": "workspace:*" "@storybook/node-logger": "workspace:*" "@storybook/types": "workspace:*" "@types/node": "npm:^18.0.0" ts-dedent: "npm:^2.0.0" - checksum: 10/f605ac68389a0ea374291444486bf82be36f01bf75ff1756bbc0d7de2a836095a695a072cdc14fbd941d4f49745cc775e3e02b29b9ed42065902e2fdd8091835 + checksum: 10/2e56db38374ec96f01c00c0fa4c8a9090c1db1d56c8c611a93d1a0c60769aa6a2c751ed29fa6c3a3a7adbf99d457287908e8e01ee1848ab6c59f6837934d81bf languageName: node linkType: hard "@storybook/csf-plugin@file:../../../code/lib/csf-plugin::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 - resolution: "@storybook/csf-plugin@file:../../../code/lib/csf-plugin#../../../code/lib/csf-plugin::hash=786030&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/csf-plugin@file:../../../code/lib/csf-plugin#../../../code/lib/csf-plugin::hash=5ec6ec&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/csf-tools": "workspace:*" unplugin: "npm:^1.3.1" - checksum: 10/76d71cc728d93f09e0869a052b131c8b2d2307355c09c4396706e61b948c63fe7991110e8a1e6eb91f7802fe2030b53070292067adf2496f8924326f36c760f8 + checksum: 10/592fd4a3cc9af877bce352c7ad61aaf442b2b65dfcb9f27cbd3d6f29d48649f1c3d001fb68d4abdea376b57c277f25ccd25f41e6d6d23780ae4e498daaf37014 languageName: node linkType: hard "@storybook/csf-tools@file:../../../code/lib/csf-tools::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 - resolution: "@storybook/csf-tools@file:../../../code/lib/csf-tools#../../../code/lib/csf-tools::hash=edd208&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/csf-tools@file:../../../code/lib/csf-tools#../../../code/lib/csf-tools::hash=69584a&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@babel/generator": "npm:^7.23.0" "@babel/parser": "npm:^7.23.0" @@ -2877,7 +2877,7 @@ __metadata: fs-extra: "npm:^11.1.0" recast: "npm:^0.23.5" ts-dedent: "npm:^2.0.0" - checksum: 10/d0205249b09db44b07382c14308e54bf527cf4f872a7ce5769486fb2099455fad045c7098c4faf133f8cf43c94fdc082f91c9165856fe6d98993553213f2a6f3 + checksum: 10/7fce79866ace04b9a2bc78a66a03e27e6e770b4279e1b40c08634bce01eb57be22f5f192f73c6a65cc959c8910f63a3d35e31a71fe3ac821aea095722e324710 languageName: node linkType: hard @@ -2908,7 +2908,7 @@ __metadata: "@storybook/docs-tools@file:../../../code/lib/docs-tools::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 - resolution: "@storybook/docs-tools@file:../../../code/lib/docs-tools#../../../code/lib/docs-tools::hash=40a697&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/docs-tools@file:../../../code/lib/docs-tools#../../../code/lib/docs-tools::hash=4be280&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/core-common": "workspace:*" "@storybook/preview-api": "workspace:*" @@ -2917,7 +2917,7 @@ __metadata: assert: "npm:^2.1.0" doctrine: "npm:^3.0.0" lodash: "npm:^4.17.21" - checksum: 10/5b0d4e375559fa833a2d206469993635b41a134d7ec2c20b5dcac7c5919c598134148ed10848773ce294e7a82af472090d790a09d207022627da1a6220972437 + checksum: 10/121355441e903b87a0b9e590eca45a9b355af949148da6d23434f59b2aa753f00e0ffb8bc625d4ca91cf01e5e9782caceb561537d62729a2b2e240b6e640a0f4 languageName: node linkType: hard @@ -2940,7 +2940,7 @@ __metadata: "@storybook/instrumenter@file:../../../code/lib/instrumenter::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 - resolution: "@storybook/instrumenter@file:../../../code/lib/instrumenter#../../../code/lib/instrumenter::hash=9f8861&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/instrumenter@file:../../../code/lib/instrumenter#../../../code/lib/instrumenter::hash=ffe9d7&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/channels": "workspace:*" "@storybook/client-logger": "workspace:*" @@ -2949,13 +2949,13 @@ __metadata: "@storybook/preview-api": "workspace:*" "@vitest/utils": "npm:^1.3.1" util: "npm:^0.12.4" - checksum: 10/5328defaee67eb906c05673839abbf388cca0ddb2e66f1eb5fad6c8bca89a8b9df122d5e1b2ab409670f245e37744c3433e1c92c49ad9116fa981c80feac51b3 + checksum: 10/84948fcfafe05e5934117e6c514a1788f9d146d28f749c11313e5f65c60f3f20be0e659e97f14a6b5ce405b01afa4941571f644a9cb88d8b3a956c2c79413723 languageName: node linkType: hard "@storybook/manager-api@file:../../../code/lib/manager-api::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 - resolution: "@storybook/manager-api@file:../../../code/lib/manager-api#../../../code/lib/manager-api::hash=73f66e&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/manager-api@file:../../../code/lib/manager-api#../../../code/lib/manager-api::hash=3e3312&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/channels": "workspace:*" "@storybook/client-logger": "workspace:*" @@ -2972,20 +2972,20 @@ __metadata: store2: "npm:^2.14.2" telejson: "npm:^7.2.0" ts-dedent: "npm:^2.0.0" - checksum: 10/16915e26260d957b65691178ffc5b57550b2750e6be44407885673e2df4f4e532cb513844405179e6cba0ae22e0f6d76811c741c0d4ff424703e4e78339c03c1 + checksum: 10/dcc92a7797ccf0f986ef2eb9077884799e4cc92603ca52a69071b4943ca149fd17d771c64bd1fd474c8287b4bda5385c7b24bada7acc9f7413deac152ec32157 languageName: node linkType: hard "@storybook/manager@file:../../../code/ui/manager::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 - resolution: "@storybook/manager@file:../../../code/ui/manager#../../../code/ui/manager::hash=ca1cc8&locator=portable-stories-nextjs%40workspace%3A." - checksum: 10/b99169a99791cda6a1eb5e34a00aff80433a8d8a2af0766035da5eca4a6f36be2dc885ed8f2ca4955aa913dcd80b7a3d0641cd5f0dabd2f5e91d2f87fa5fc7bd + resolution: "@storybook/manager@file:../../../code/ui/manager#../../../code/ui/manager::hash=257346&locator=portable-stories-nextjs%40workspace%3A." + checksum: 10/cdfcb34cdfaa7b7fbd388c54f2ecc85e0b4276ba1d915cc4b36dfcdd9ab8c5391815ae502089aa77e5dad8e51a064f86771969f20e9d10b5b14973d8e4e80a8b languageName: node linkType: hard "@storybook/nextjs@file:../../../code/frameworks/nextjs::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 - resolution: "@storybook/nextjs@file:../../../code/frameworks/nextjs#../../../code/frameworks/nextjs::hash=449323&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/nextjs@file:../../../code/frameworks/nextjs#../../../code/frameworks/nextjs::hash=a5b14e&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@babel/core": "npm:^7.23.2" "@babel/plugin-syntax-bigint": "npm:^7.8.3" @@ -3043,20 +3043,20 @@ __metadata: optional: true webpack: optional: true - checksum: 10/cca75d58487e2dcba461dc15fb913f2ec60afa0fddbd0038eba3983f5286fa6555ab4c00e94b6eb1048fad85656a88fb7e5fd6534ec0907c3c46049ace5551dc + checksum: 10/86d287d5088a26adabce7b6ca5e56eebedf44df95bd07b1085253e095bea2d1d54898eed384ff7ca75866b00ffa36dd0a0c8f252edc1b4feb48725b6ca2ca851 languageName: node linkType: hard "@storybook/node-logger@file:../../../code/lib/node-logger::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 - resolution: "@storybook/node-logger@file:../../../code/lib/node-logger#../../../code/lib/node-logger::hash=0d0b98&locator=portable-stories-nextjs%40workspace%3A." - checksum: 10/a3370020de702f0645ebe90da5e61d2a5d04bf719f6cda3b4c09e2b3f377c49a3d2c922175d2909d00fae0b7ef9453ac6f7ffee14399bd18ae3a6f9783736504 + resolution: "@storybook/node-logger@file:../../../code/lib/node-logger#../../../code/lib/node-logger::hash=0d5379&locator=portable-stories-nextjs%40workspace%3A." + checksum: 10/ba3b49b55a325ec5d885898e5cd61370c19ad27a54315025c315bb08b6a09a64cfd3097748225be1f4b07aad42245a239ac9ba6e957c854ebb48718a43e5c215 languageName: node linkType: hard "@storybook/preset-react-webpack@file:../../../code/presets/react-webpack::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 - resolution: "@storybook/preset-react-webpack@file:../../../code/presets/react-webpack#../../../code/presets/react-webpack::hash=72b9b2&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/preset-react-webpack@file:../../../code/presets/react-webpack#../../../code/presets/react-webpack::hash=3c5b01&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/core-webpack": "workspace:*" "@storybook/docs-tools": "workspace:*" @@ -3079,13 +3079,13 @@ __metadata: peerDependenciesMeta: typescript: optional: true - checksum: 10/f0304ce896fb0dc5d0aa170b82a567daccf7d2f45425da0c8ed9136d6f4ec0acd544474e37933145c639bd706e6846f8ec6d766a04b6a92cb00420f9fb498865 + checksum: 10/3baffd6ce4e642f852c370ccd4ae8098a5e730f4493ce43c8414f0b44e59c8bc8a99d9975cf5149b655f1808e54d274754044f45983b9f1be7c9a28f00931ac2 languageName: node linkType: hard "@storybook/preview-api@file:../../../code/lib/preview-api::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 - resolution: "@storybook/preview-api@file:../../../code/lib/preview-api#../../../code/lib/preview-api::hash=8ed046&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/preview-api@file:../../../code/lib/preview-api#../../../code/lib/preview-api::hash=2e825a&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/channels": "workspace:*" "@storybook/client-logger": "workspace:*" @@ -3101,14 +3101,14 @@ __metadata: tiny-invariant: "npm:^1.3.1" ts-dedent: "npm:^2.0.0" util-deprecate: "npm:^1.0.2" - checksum: 10/d5a6dc59d0cf9660869c7059567ffe09e1d590835aa781a5a94fc109ae67ae961f82db05a5e983b209e76a595ef3b9669f25897a174701fbcd2846a321ddd8e6 + checksum: 10/8cb6df33b082d43c40daa182241aef50e583fc3c45d954730df0fbf305645926b2904b5177661a7a6294969014bda8c647f24960afd6114333e7c4bb00caa869 languageName: node linkType: hard "@storybook/preview@file:../../../code/lib/preview::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 - resolution: "@storybook/preview@file:../../../code/lib/preview#../../../code/lib/preview::hash=1b46c6&locator=portable-stories-nextjs%40workspace%3A." - checksum: 10/6f32462ffef399955e23eda2f74ab4de1187eb9f81490207002fd36cb1801ad7f34cc7a86de10613f0a971c0dad8d7b9790b593fed87b994257b87a5874c7db2 + resolution: "@storybook/preview@file:../../../code/lib/preview#../../../code/lib/preview::hash=dccd68&locator=portable-stories-nextjs%40workspace%3A." + checksum: 10/834521c05fe7496e5d411dd9dc8cd3d2e3902bd101fcfe9e1caa2bace894fb6698d035fd190072a3cf2e294c86324315f30732c16bc30f75a1307feab53c16d1 languageName: node linkType: hard @@ -3132,17 +3132,17 @@ __metadata: "@storybook/react-dom-shim@file:../../../code/lib/react-dom-shim::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 - resolution: "@storybook/react-dom-shim@file:../../../code/lib/react-dom-shim#../../../code/lib/react-dom-shim::hash=cb4d21&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/react-dom-shim@file:../../../code/lib/react-dom-shim#../../../code/lib/react-dom-shim::hash=062b74&locator=portable-stories-nextjs%40workspace%3A." peerDependencies: react: ^16.8.0 || ^17.0.0 || ^18.0.0 react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 - checksum: 10/fd2ab770da0b3450f92cad74f068d297cba56d51730987c2e9a866a01b3507335d913ba705e0c39bd53050f6de3415a6fb5fe32e25f01c246df05de76c888d01 + checksum: 10/ba63271a1f2d663cd53354798c490d306787b8033586a1062175b89fe4409759cbc959aa34dad12ff8f9bf2e9c141a391784eda81f23cbc9d13495128c9e1611 languageName: node linkType: hard "@storybook/react@file:../../../code/renderers/react::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 - resolution: "@storybook/react@file:../../../code/renderers/react#../../../code/renderers/react::hash=feef2f&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/react@file:../../../code/renderers/react#../../../code/renderers/react::hash=f60a6b&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/client-logger": "workspace:*" "@storybook/docs-tools": "workspace:*" @@ -3172,24 +3172,24 @@ __metadata: peerDependenciesMeta: typescript: optional: true - checksum: 10/c302a3188a07344a4ed6ff1d5e563eecba774f766433ee6c00a8db0817002cd228d2163247e8a7f0e77930aeb654ccaca2d4240f34aec578de6e1914c1d5ad3f + checksum: 10/aa5c6739bfda7f26dcf2155cc61cc02c7387046fd3f1ef0029fa851b56024e5c81e69ef11c7a3f167bf66715161586abc2e29bbcdd5e3ea4ff9f0a34bbdac095 languageName: node linkType: hard "@storybook/router@file:../../../code/lib/router::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 - resolution: "@storybook/router@file:../../../code/lib/router#../../../code/lib/router::hash=12e846&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/router@file:../../../code/lib/router#../../../code/lib/router::hash=f3d914&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/client-logger": "workspace:*" memoizerific: "npm:^1.11.3" qs: "npm:^6.10.0" - checksum: 10/211a8eb4828a583ef4b882860a8eebdc9d20e79b576e46f2a53f9b87cfda6c6d95de53344cfdb767bdf64c465f55b70ffe7b2e85a800443ea8867f937bd6f452 + checksum: 10/ae4218eb5cb26c1fd31b334a5431a228a4fd6f30bff1e4feb68c188317ceece7b91510c0c98c4a2d4fe419baebb2da21ea03d65dfe5123257befdb8ad9e0770c languageName: node linkType: hard "@storybook/telemetry@file:../../../code/lib/telemetry::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 - resolution: "@storybook/telemetry@file:../../../code/lib/telemetry#../../../code/lib/telemetry::hash=23a3d9&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/telemetry@file:../../../code/lib/telemetry#../../../code/lib/telemetry::hash=ef1a5d&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/client-logger": "workspace:*" "@storybook/core-common": "workspace:*" @@ -3199,13 +3199,13 @@ __metadata: fetch-retry: "npm:^5.0.2" fs-extra: "npm:^11.1.0" read-pkg-up: "npm:^7.0.1" - checksum: 10/609dd2f7509d5b8611fead6e310e485dbd0ee4ad9c02d75c7cd66be068fbecb77e2f95f8b7879c01b2767b1e566031e9eae5c616ce36fab23df92d7d6d5f05fc + checksum: 10/b4d3d4aa974ea59a259584466abf9dc7ca07b926833e8e4cd53e43bd47a37ead871f2f4458cc2f8d3c9776e41b3daac9a1fe3363d210190b4d45585de86453f7 languageName: node linkType: hard "@storybook/test@file:../../../code/lib/test::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 - resolution: "@storybook/test@file:../../../code/lib/test#../../../code/lib/test::hash=b5fbc8&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/test@file:../../../code/lib/test#../../../code/lib/test::hash=cd3c93&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/client-logger": "workspace:*" "@storybook/core-events": "workspace:*" @@ -3218,13 +3218,13 @@ __metadata: "@vitest/spy": "npm:^1.3.1" chai: "npm:^4.4.1" util: "npm:^0.12.4" - checksum: 10/47a026e105e8e42c6942b48d87bf8d96310a8507da9a2f6f923aa3dbb45a75846d59779d2e69b66a3fddbfe355de1e00dd49f8753b4b04939cc755127149f4b8 + checksum: 10/783d04972494921194bbf60ba366dd62c81340257671acdb2693156dc64c709c64a51efc5fcf528c5a43d11167b2193d4582d24e5012e86407b64fbeda4c1c66 languageName: node linkType: hard "@storybook/theming@file:../../../code/lib/theming::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 - resolution: "@storybook/theming@file:../../../code/lib/theming#../../../code/lib/theming::hash=cf2697&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/theming@file:../../../code/lib/theming#../../../code/lib/theming::hash=9cc340&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@emotion/use-insertion-effect-with-fallbacks": "npm:^1.0.1" "@storybook/client-logger": "workspace:*" @@ -3238,7 +3238,7 @@ __metadata: optional: true react-dom: optional: true - checksum: 10/c87b12f79a54319df221805988e5da6955265e1a76f67daba34c401959ca0d12c77b19a53c5ed824782979b09f19eec774e68f6d9bd126e0d0640d8197a2d381 + checksum: 10/e64850170fec111310877caa5a994ad53c9e072f324d0871d98e34f7d30688dadd7b24914441b3c50f3e9dc3f80909c60fa292e61f7fe6b257a6e19521a6c8e1 languageName: node linkType: hard From d9a4ab1c2c7c9f6c7248ad25f5047557996e3db8 Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Wed, 10 Apr 2024 11:18:12 +0200 Subject: [PATCH 29/82] Use beforeEach in test --- .../actions/template/stories/spies.stories.ts | 20 +++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/code/addons/actions/template/stories/spies.stories.ts b/code/addons/actions/template/stories/spies.stories.ts index 824494bda1c9..9749cfb3e492 100644 --- a/code/addons/actions/template/stories/spies.stories.ts +++ b/code/addons/actions/template/stories/spies.stories.ts @@ -1,24 +1,24 @@ import { global as globalThis } from '@storybook/global'; import { spyOn } from '@storybook/test'; -export default { +const meta = { component: globalThis.Components.Button, - loaders() { + beforeEach() { spyOn(console, 'log').mockName('console.log'); - }, - args: { - label: 'Button', - }, - parameters: { - chromatic: { disable: true }, + console.log('first'); }, }; +export default meta; + export const ShowSpyOnInActions = { + beforeEach() { + console.log('second'); + }, args: { + label: 'Button', onClick: () => { - console.log('first'); - console.log('second'); + console.log('third'); }, }, }; From 4d452f3b80714ee810c0a9c537cd69a5f5e0bbce Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Wed, 10 Apr 2024 11:46:34 +0200 Subject: [PATCH 30/82] fix inner class context --- code/frameworks/nextjs/src/headers/headers.ts | 61 +++++++++++-------- 1 file changed, 35 insertions(+), 26 deletions(-) diff --git a/code/frameworks/nextjs/src/headers/headers.ts b/code/frameworks/nextjs/src/headers/headers.ts index 46f30fe0c171..b71bece89695 100644 --- a/code/frameworks/nextjs/src/headers/headers.ts +++ b/code/frameworks/nextjs/src/headers/headers.ts @@ -8,9 +8,12 @@ import type { HeadersAdapter } from 'next/dist/server/web/spec-extension/adapter export class HeadersStore extends Headers implements HeadersAdapter { private headers: IncomingHttpHeaders = {}; - /** @internal */ + /** Used to restore the mocks. Called internally by @storybook/nextjs + * to ensure that the mocks are restored between stories. + * @internal + * */ mockRestore = () => { - this.forEach((key) => this.delete(key)); + this.forEach((key: string) => this.delete(key)); }; /** @@ -64,33 +67,39 @@ export class HeadersStore extends Headers implements HeadersAdapter { } ).mockName('headers().forEach'); - public entries = fn(function* (this: HeadersStore): IterableIterator<[string, string]> { - for (const key of Object.keys(this.headers)) { - const name = key.toLowerCase(); - // We assert here that this is a string because we got it from the - // Object.keys() call above. - const value = this.get(name) as string; + public entries = fn( + function* (this: HeadersStore): IterableIterator<[string, string]> { + for (const key of Object.keys(this.headers)) { + const name = key.toLowerCase(); + // We assert here that this is a string because we got it from the + // Object.keys() call above. + const value = this.get(name) as string; - yield [name, value]; - } - }).mockName('headers().entries'); - - public keys = fn(function* (this: HeadersStore): IterableIterator { - for (const key of Object.keys(this.headers)) { - const name = key.toLowerCase(); - yield name; - } - }).mockName('headers().keys'); + yield [name, value]; + } + }.bind(this) + ).mockName('headers().entries'); + + public keys = fn( + function* (this: HeadersStore): IterableIterator { + for (const key of Object.keys(this.headers)) { + const name = key.toLowerCase(); + yield name; + } + }.bind(this) + ).mockName('headers().keys'); - public values = fn(function* (this: HeadersStore): IterableIterator { - for (const key of Object.keys(this.headers)) { - // We assert here that this is a string because we got it from the - // Object.keys() call above. - const value = this.get(key) as string; + public values = fn( + function* (this: HeadersStore): IterableIterator { + for (const key of Object.keys(this.headers)) { + // We assert here that this is a string because we got it from the + // Object.keys() call above. + const value = this.get(key) as string; - yield value; - } - }).mockName('headers().values'); + yield value; + } + }.bind(this) + ).mockName('headers().values'); public [Symbol.iterator](): IterableIterator<[string, string]> { return this.entries(); From fbb33d122bc277cb9a90ffa364bf2a59055eb1eb Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Wed, 10 Apr 2024 11:49:12 +0200 Subject: [PATCH 31/82] Refactor cookies.ts to add internal documentation for mockRestore method --- code/frameworks/nextjs/src/headers/cookies.ts | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/code/frameworks/nextjs/src/headers/cookies.ts b/code/frameworks/nextjs/src/headers/cookies.ts index 13bc7779d3ef..6466ad439c55 100644 --- a/code/frameworks/nextjs/src/headers/cookies.ts +++ b/code/frameworks/nextjs/src/headers/cookies.ts @@ -41,7 +41,10 @@ class CookieStore implements RequestCookies { return this._parsed[Symbol.iterator](); } - /** @internal */ + /** Used to restore the mocks. Called internally by @storybook/nextjs + * to ensure that the mocks are restored between stories. + * @internal + * */ mockRestore = () => { this.clear(); this._headers.mockRestore(); From 7db928e22c47a008d5481a86c4ea9c2d614ddd9a Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Mon, 8 Apr 2024 17:54:06 +0200 Subject: [PATCH 32/82] NextJS: Spy next/router and next/navigation useRouter hooks --- code/frameworks/nextjs/package.json | 7 +- .../nextjs/src/routing/decorator.tsx | 7 +- .../{ => navigation}/app-router-provider.tsx | 29 +----- .../nextjs/src/routing/navigation/index.ts | 47 ++++++++++ .../src/routing/page-router-provider.tsx | 69 -------------- .../nextjs/src/routing/router/index.ts | 82 ++++++++++++++++ .../routing/router/page-router-provider.tsx | 34 +++++++ .../Router.stories.jsx | 23 ++++- .../Navigation.stories.tsx | 23 ++++- .../Router.stories.tsx | 93 +++++++++++++++++++ code/yarn.lock | 1 - 11 files changed, 310 insertions(+), 105 deletions(-) rename code/frameworks/nextjs/src/routing/{ => navigation}/app-router-provider.tsx (70%) create mode 100644 code/frameworks/nextjs/src/routing/navigation/index.ts delete mode 100644 code/frameworks/nextjs/src/routing/page-router-provider.tsx create mode 100644 code/frameworks/nextjs/src/routing/router/index.ts create mode 100644 code/frameworks/nextjs/src/routing/router/page-router-provider.tsx create mode 100644 code/frameworks/nextjs/template/stories_nextjs-default-ts/Router.stories.tsx diff --git a/code/frameworks/nextjs/package.json b/code/frameworks/nextjs/package.json index e30984136eae..ad48325066c4 100644 --- a/code/frameworks/nextjs/package.json +++ b/code/frameworks/nextjs/package.json @@ -52,6 +52,8 @@ "require": "./dist/headers/index.js", "import": "./dist/headers/index.mjs" }, + "./router": "./dist/routing/router/index.mjs", + "./navigation": "./dist/routing/navigation/index.mjs", "./package.json": "./package.json" }, "main": "dist/index.js", @@ -97,7 +99,6 @@ "@babel/preset-typescript": "^7.23.2", "@babel/runtime": "^7.23.2", "@pmmmwh/react-refresh-webpack-plugin": "^0.5.11", - "@storybook/addon-actions": "workspace:*", "@storybook/builder-webpack5": "workspace:*", "@storybook/core-common": "workspace:*", "@storybook/core-events": "workspace:*", @@ -168,6 +169,8 @@ "./src/preset.ts", "./src/headers/index.ts", "./src/preview.tsx", + "./src/routing/router/index.ts", + "./src/routing/navigation/index.ts", "./src/next-image-loader-stub.ts", "./src/images/decorator.tsx", "./src/images/next-legacy-image.tsx", @@ -184,4 +187,4 @@ "platform": "node" }, "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae17" -} +} \ No newline at end of file diff --git a/code/frameworks/nextjs/src/routing/decorator.tsx b/code/frameworks/nextjs/src/routing/decorator.tsx index 939c3ed0114b..d45f61b69c14 100644 --- a/code/frameworks/nextjs/src/routing/decorator.tsx +++ b/code/frameworks/nextjs/src/routing/decorator.tsx @@ -1,8 +1,7 @@ import * as React from 'react'; import type { Addon_StoryContext } from '@storybook/types'; -import { action } from '@storybook/addon-actions'; -import { AppRouterProvider } from './app-router-provider'; -import { PageRouterProvider } from './page-router-provider'; +import { AppRouterProvider } from './navigation/app-router-provider'; +import { PageRouterProvider } from './router/page-router-provider'; import type { RouteParams, NextAppDirectory } from './types'; const defaultRouterParams: RouteParams = { @@ -23,7 +22,6 @@ export const RouterDecorator = ( } return ( (...args: any[]) => void; routeParams: RouteParams; }; @@ -28,7 +28,6 @@ const getParallelRoutes = (segmentsList: Array): FlightRouterState => { export const AppRouterProvider: React.FC> = ({ children, - action, routeParams, }) => { const { pathname, query, segments = [], ...restRouteParams } = routeParams; @@ -55,29 +54,7 @@ export const AppRouterProvider: React.FC - { - action('nextNavigation.refresh')(); - }, - ...restRouteParams, - }} - > + { + if (!navigationAPI) { + const navigationActions = { + push: fn().mockName('nextNavigation.push'), + replace: fn().mockName('nextNavigation.replace'), + forward: fn().mockName('nextNavigation.forward'), + back: fn().mockName('nextNavigation.back'), + prefetch: fn().mockName('nextNavigation.prefetch'), + refresh: fn().mockName('nextNavigation.refresh'), + }; + + if (overrides) { + Object.keys(navigationActions).forEach((key) => { + if (key in overrides) { + (navigationActions as any)[key] = fn((...args: any[]) => { + return (overrides as any)[key](...args); + }).mockName(`nextNavigation.${key}`); + } + }); + } + + navigationAPI = navigationActions; + } + + return navigationAPI; +}; + +export const useRouter = () => { + if (!navigationAPI) { + // TODO: improve error message + throw new Error('The router mock was not created yet. This is probably a bug.'); + } + + return navigationAPI; +}; diff --git a/code/frameworks/nextjs/src/routing/page-router-provider.tsx b/code/frameworks/nextjs/src/routing/page-router-provider.tsx deleted file mode 100644 index 066e7f32b3fd..000000000000 --- a/code/frameworks/nextjs/src/routing/page-router-provider.tsx +++ /dev/null @@ -1,69 +0,0 @@ -import type { Globals } from '@storybook/csf'; -import { RouterContext } from 'next/dist/shared/lib/router-context.shared-runtime'; -import type { PropsWithChildren } from 'react'; -import React from 'react'; -import type { RouteParams } from './types'; - -type PageRouterProviderProps = { - action: (name: string) => (...args: any[]) => void; - routeParams: RouteParams; - globals: Globals; -}; - -export const PageRouterProvider: React.FC> = ({ - children, - action, - routeParams, - globals, -}) => ( - - {children} - -); diff --git a/code/frameworks/nextjs/src/routing/router/index.ts b/code/frameworks/nextjs/src/routing/router/index.ts new file mode 100644 index 000000000000..7c0253147385 --- /dev/null +++ b/code/frameworks/nextjs/src/routing/router/index.ts @@ -0,0 +1,82 @@ +import type { Mock } from '@storybook/test'; +import { fn } from '@storybook/test'; +import type { NextRouter } from 'next/router'; + +let routerAPI: { + push: Mock; + replace: Mock; + reload: Mock; + back: Mock; + forward: Mock; + prefetch: Mock; + beforePopState: Mock; + events: { + on: Mock; + off: Mock; + emit: Mock; + }; +}; + +export const createRouter = ({ overrides }: { overrides?: Partial }) => { + if (!routerAPI) { + const routerActions: Partial = { + push: fn((..._args: any[]) => { + return Promise.resolve(true); + }).mockName('nextRouter.push'), + replace: fn((..._args: any[]) => { + return Promise.resolve(true); + }).mockName('nextRouter.replace'), + reload: fn((..._args: any[]) => {}).mockName('nextRouter.reload'), + back: fn((..._args: any[]) => {}).mockName('nextRouter.back'), + forward: fn(() => {}).mockName('nextRouter.forward'), + prefetch: fn((..._args: any[]) => { + return Promise.resolve(); + }).mockName('nextRouter.prefetch'), + beforePopState: fn((..._args: any[]) => {}).mockName('nextRouter.beforePopState'), + }; + + const routerEvents: Partial = { + events: { + on: fn((..._args: any[]) => {}).mockName('nextRouter.events.on'), + off: fn((..._args: any[]) => {}).mockName('nextRouter.events.off'), + emit: fn((..._args: any[]) => {}).mockName('nextRouter.events.emit'), + }, + }; + + if (overrides) { + Object.keys(routerActions).forEach((key) => { + if (key in overrides) { + (routerActions as any)[key] = fn((...args: any[]) => { + return (overrides as any)[key](...args); + }).mockName(`nextRouter.${key}`); + } + }); + } + + if (overrides?.events) { + Object.keys(routerEvents.events!).forEach((key) => { + if (key in routerEvents.events!) { + (routerEvents.events as any)[key] = fn((...args: any[]) => { + return (overrides.events as any)[key](...args); + }).mockName(`nextRouter.events.${key}`); + } + }); + } + + routerAPI = { + ...routerActions, + // @ts-expect-error TODO improve typings + events: routerEvents.events, + }; + } + + return routerAPI; +}; + +export const useRouter = () => { + if (!routerAPI) { + throw new Error('Router not created yet'); + } + + return routerAPI; +}; diff --git a/code/frameworks/nextjs/src/routing/router/page-router-provider.tsx b/code/frameworks/nextjs/src/routing/router/page-router-provider.tsx new file mode 100644 index 000000000000..99dcf4924ba3 --- /dev/null +++ b/code/frameworks/nextjs/src/routing/router/page-router-provider.tsx @@ -0,0 +1,34 @@ +import type { Globals } from '@storybook/csf'; +import { RouterContext } from 'next/dist/shared/lib/router-context.shared-runtime'; +import type { PropsWithChildren } from 'react'; +import React from 'react'; +import type { RouteParams } from '../types'; +import { createRouter } from './index'; + +type PageRouterProviderProps = { + routeParams: RouteParams; + globals: Globals; +}; + +export const PageRouterProvider: React.FC> = ({ + children, + routeParams, + globals, +}) => ( + + {children} + +); diff --git a/code/frameworks/nextjs/template/stories_nextjs-default-js/Router.stories.jsx b/code/frameworks/nextjs/template/stories_nextjs-default-js/Router.stories.jsx index 2ea7511a2f4e..ceee12ad3666 100644 --- a/code/frameworks/nextjs/template/stories_nextjs-default-js/Router.stories.jsx +++ b/code/frameworks/nextjs/template/stories_nextjs-default-js/Router.stories.jsx @@ -1,3 +1,5 @@ +import { expect, within, userEvent } from '@storybook/test'; +import { useRouter as useRouterMock } from '@storybook/nextjs/router'; import { useRouter } from 'next/router'; import React from 'react'; @@ -61,9 +63,28 @@ export default { query: { foo: 'bar', }, + prefetch: () => { + console.log('custom prefetch'); + }, }, }, }, }; -export const Default = {}; +export const Default = { + play: async ({ canvasElement, step }) => { + const canvas = within(canvasElement); + + await step('Asserts whether forward hook is called', async () => { + const forwardBtn = await canvas.findByText('Go forward'); + await userEvent.click(forwardBtn); + await expect(useRouterMock().forward).toHaveBeenCalled(); + }); + + await step('Asserts whether custom prefetch hook is called', async () => { + const prefetchBtn = await canvas.findByText('Prefetch'); + await userEvent.click(prefetchBtn); + await expect(useRouterMock().prefetch).toHaveBeenCalledWith('/prefetched-html'); + }); + }, +}; diff --git a/code/frameworks/nextjs/template/stories_nextjs-default-ts/Navigation.stories.tsx b/code/frameworks/nextjs/template/stories_nextjs-default-ts/Navigation.stories.tsx index 6287d5ae2a73..79520290c716 100644 --- a/code/frameworks/nextjs/template/stories_nextjs-default-ts/Navigation.stories.tsx +++ b/code/frameworks/nextjs/template/stories_nextjs-default-ts/Navigation.stories.tsx @@ -2,6 +2,8 @@ import { useRouter, usePathname, useSearchParams } from 'next/navigation'; import React from 'react'; import type { Meta, StoryObj } from '@storybook/react'; +import { expect, userEvent, within } from '@storybook/test'; +import { useRouter as useRouterMock } from '@storybook/nextjs/navigation'; function Component() { const router = useRouter(); @@ -73,9 +75,28 @@ export default { query: { foo: 'bar', }, + prefetch: () => { + console.log('custom prefetch'); + }, }, }, }, } as Meta; -export const Default: StoryObj = {}; +export const Default: StoryObj = { + play: async ({ canvasElement, step }) => { + const canvas = within(canvasElement); + + await step('Asserts whether forward hook is called', async () => { + const forwardBtn = await canvas.findByText('Go forward'); + await userEvent.click(forwardBtn); + await expect(useRouterMock().forward).toHaveBeenCalled(); + }); + + await step('Asserts whether custom prefetch hook is called', async () => { + const prefetchBtn = await canvas.findByText('Prefetch'); + await userEvent.click(prefetchBtn); + await expect(useRouterMock().prefetch).toHaveBeenCalledWith('/prefetched-html'); + }); + }, +}; diff --git a/code/frameworks/nextjs/template/stories_nextjs-default-ts/Router.stories.tsx b/code/frameworks/nextjs/template/stories_nextjs-default-ts/Router.stories.tsx new file mode 100644 index 000000000000..0319e17efa02 --- /dev/null +++ b/code/frameworks/nextjs/template/stories_nextjs-default-ts/Router.stories.tsx @@ -0,0 +1,93 @@ +import React from 'react'; +import type { Meta, StoryObj } from '@storybook/react'; +import { expect, within, userEvent } from '@storybook/test'; +import { useRouter as useRouterMock } from '@storybook/nextjs/router'; +import { useRouter } from 'next/router'; + +function Component() { + const router = useRouter(); + const searchParams = router.query; + + const routerActions = [ + { + cb: () => router.back(), + name: 'Go back', + }, + { + cb: () => router.forward(), + name: 'Go forward', + }, + { + cb: () => router.prefetch('/prefetched-html'), + name: 'Prefetch', + }, + { + // @ts-expect-error (old API) + cb: () => router.push('/push-html', { forceOptimisticNavigation: true }), + name: 'Push HTML', + }, + { + // @ts-expect-error (old API) + cb: () => router.replace('/replaced-html', { forceOptimisticNavigation: true }), + name: 'Replace', + }, + ]; + + return ( +

+
pathname: {router.pathname}
+
+ searchparams:{' '} +
    + {Object.entries(searchParams).map(([key, value]) => ( +
  • + {key}: {value} +
    • + ))} +
+
+ {routerActions.map(({ cb, name }) => ( +
+ +
+ ))} +
+ ); +} + +export default { + component: Component, + parameters: { + nextjs: { + router: { + pathname: '/hello', + query: { + foo: 'bar', + }, + prefetch: () => { + console.log('custom prefetch'); + }, + }, + }, + }, +} as Meta; + +export const Default: StoryObj = { + play: async ({ canvasElement, step }) => { + const canvas = within(canvasElement); + + await step('Asserts whether forward hook is called', async () => { + const forwardBtn = await canvas.findByText('Go forward'); + await userEvent.click(forwardBtn); + await expect(useRouterMock().forward).toHaveBeenCalled(); + }); + + await step('Asserts whether custom prefetch hook is called', async () => { + const prefetchBtn = await canvas.findByText('Prefetch'); + await userEvent.click(prefetchBtn); + await expect(useRouterMock().prefetch).toHaveBeenCalledWith('/prefetched-html'); + }); + }, +}; diff --git a/code/yarn.lock b/code/yarn.lock index aa1315007109..a0839ce820a0 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -5940,7 +5940,6 @@ __metadata: "@babel/runtime": "npm:^7.23.2" "@babel/types": "npm:^7.23.0" "@pmmmwh/react-refresh-webpack-plugin": "npm:^0.5.11" - "@storybook/addon-actions": "workspace:*" "@storybook/builder-webpack5": "workspace:*" "@storybook/core-common": "workspace:*" "@storybook/core-events": "workspace:*" From 501301a4072734e9e610da70bc86d26f553ac0e6 Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Tue, 9 Apr 2024 11:13:37 +0200 Subject: [PATCH 33/82] fix default Router mock export, add improvements --- .../nextjs/src/routing/navigation/index.ts | 8 +-- .../nextjs/src/routing/router/index.ts | 49 +++++++++++++------ .../routing/router/page-router-provider.tsx | 12 +---- .../Router.stories.tsx | 10 +++- .../core-events/src/errors/preview-errors.ts | 17 +++++++ 5 files changed, 67 insertions(+), 29 deletions(-) diff --git a/code/frameworks/nextjs/src/routing/navigation/index.ts b/code/frameworks/nextjs/src/routing/navigation/index.ts index 3c9a84f4df92..23e34cb0c190 100644 --- a/code/frameworks/nextjs/src/routing/navigation/index.ts +++ b/code/frameworks/nextjs/src/routing/navigation/index.ts @@ -1,5 +1,6 @@ import type { Mock } from '@storybook/test'; import { fn } from '@storybook/test'; +import { NextjsRouterMocksNotAvailable } from '@storybook/core-events/preview-errors'; let navigationAPI: { push: Mock; @@ -10,7 +11,7 @@ let navigationAPI: { refresh: Mock; }; -export const createNavigation = ({ overrides }: { overrides?: any }) => { +export const createNavigation = (overrides: any) => { if (!navigationAPI) { const navigationActions = { push: fn().mockName('nextNavigation.push'), @@ -39,8 +40,9 @@ export const createNavigation = ({ overrides }: { overrides?: any }) => { export const useRouter = () => { if (!navigationAPI) { - // TODO: improve error message - throw new Error('The router mock was not created yet. This is probably a bug.'); + throw new NextjsRouterMocksNotAvailable({ + importType: 'next/navigation', + }); } return navigationAPI; diff --git a/code/frameworks/nextjs/src/routing/router/index.ts b/code/frameworks/nextjs/src/routing/router/index.ts index 7c0253147385..5332c4111d74 100644 --- a/code/frameworks/nextjs/src/routing/router/index.ts +++ b/code/frameworks/nextjs/src/routing/router/index.ts @@ -1,6 +1,20 @@ import type { Mock } from '@storybook/test'; import { fn } from '@storybook/test'; +import { NextjsRouterMocksNotAvailable } from '@storybook/core-events/preview-errors'; import type { NextRouter } from 'next/router'; +import singletonRouter from 'next/router'; + +const defaultRouterState = { + route: '/', + asPath: '/', + basePath: '/', + pathname: '/', + query: {}, + isFallback: false, + isLocaleDomain: false, + isReady: true, + isPreview: false, +}; let routerAPI: { push: Mock; @@ -15,9 +29,9 @@ let routerAPI: { off: Mock; emit: Mock; }; -}; +} & typeof defaultRouterState; -export const createRouter = ({ overrides }: { overrides?: Partial }) => { +export const createRouter = (overrides?: Partial) => { if (!routerAPI) { const routerActions: Partial = { push: fn((..._args: any[]) => { @@ -35,12 +49,10 @@ export const createRouter = ({ overrides }: { overrides?: Partial }) beforePopState: fn((..._args: any[]) => {}).mockName('nextRouter.beforePopState'), }; - const routerEvents: Partial = { - events: { - on: fn((..._args: any[]) => {}).mockName('nextRouter.events.on'), - off: fn((..._args: any[]) => {}).mockName('nextRouter.events.off'), - emit: fn((..._args: any[]) => {}).mockName('nextRouter.events.emit'), - }, + const routerEvents: NextRouter['events'] = { + on: fn((..._args: any[]) => {}).mockName('nextRouter.events.on'), + off: fn((..._args: any[]) => {}).mockName('nextRouter.events.off'), + emit: fn((..._args: any[]) => {}).mockName('nextRouter.events.emit'), }; if (overrides) { @@ -54,9 +66,9 @@ export const createRouter = ({ overrides }: { overrides?: Partial }) } if (overrides?.events) { - Object.keys(routerEvents.events!).forEach((key) => { - if (key in routerEvents.events!) { - (routerEvents.events as any)[key] = fn((...args: any[]) => { + Object.keys(routerEvents).forEach((key) => { + if (key in routerEvents) { + (routerEvents as any)[key] = fn((...args: any[]) => { return (overrides.events as any)[key](...args); }).mockName(`nextRouter.events.${key}`); } @@ -64,18 +76,27 @@ export const createRouter = ({ overrides }: { overrides?: Partial }) } routerAPI = { + ...defaultRouterState, + ...overrides, ...routerActions, // @ts-expect-error TODO improve typings - events: routerEvents.events, + events: routerEvents, }; + + // overwrite the singleton router from next/router + singletonRouter.router = routerAPI as any; + singletonRouter.readyCallbacks.forEach((cb) => cb()); + singletonRouter.readyCallbacks = []; } - return routerAPI; + return routerAPI as unknown as NextRouter; }; export const useRouter = () => { if (!routerAPI) { - throw new Error('Router not created yet'); + throw new NextjsRouterMocksNotAvailable({ + importType: 'next/router', + }); } return routerAPI; diff --git a/code/frameworks/nextjs/src/routing/router/page-router-provider.tsx b/code/frameworks/nextjs/src/routing/router/page-router-provider.tsx index 99dcf4924ba3..abd948d0d9dd 100644 --- a/code/frameworks/nextjs/src/routing/router/page-router-provider.tsx +++ b/code/frameworks/nextjs/src/routing/router/page-router-provider.tsx @@ -16,18 +16,10 @@ export const PageRouterProvider: React.FC ( {children} diff --git a/code/frameworks/nextjs/template/stories_nextjs-default-ts/Router.stories.tsx b/code/frameworks/nextjs/template/stories_nextjs-default-ts/Router.stories.tsx index 0319e17efa02..ea524e55f9b8 100644 --- a/code/frameworks/nextjs/template/stories_nextjs-default-ts/Router.stories.tsx +++ b/code/frameworks/nextjs/template/stories_nextjs-default-ts/Router.stories.tsx @@ -77,17 +77,23 @@ export default { export const Default: StoryObj = { play: async ({ canvasElement, step }) => { const canvas = within(canvasElement); + const routerMock = useRouterMock(); + + await step('Router property overrides should be available', async () => { + await expect(routerMock.pathname).toBe('/hello'); + await expect(routerMock.query).toEqual({ foo: 'bar' }); + }); await step('Asserts whether forward hook is called', async () => { const forwardBtn = await canvas.findByText('Go forward'); await userEvent.click(forwardBtn); - await expect(useRouterMock().forward).toHaveBeenCalled(); + await expect(routerMock.forward).toHaveBeenCalled(); }); await step('Asserts whether custom prefetch hook is called', async () => { const prefetchBtn = await canvas.findByText('Prefetch'); await userEvent.click(prefetchBtn); - await expect(useRouterMock().prefetch).toHaveBeenCalledWith('/prefetched-html'); + await expect(routerMock.prefetch).toHaveBeenCalledWith('/prefetched-html'); }); }, }; diff --git a/code/lib/core-events/src/errors/preview-errors.ts b/code/lib/core-events/src/errors/preview-errors.ts index fb33c42688b3..0872718a03c1 100644 --- a/code/lib/core-events/src/errors/preview-errors.ts +++ b/code/lib/core-events/src/errors/preview-errors.ts @@ -27,6 +27,7 @@ export enum Category { RENDERER_VUE = 'RENDERER_VUE', RENDERER_VUE3 = 'RENDERER_VUE3', RENDERER_WEB_COMPONENTS = 'RENDERER_WEB-COMPONENTS', + FRAMEWORK_NEXTJS = 'FRAMEWORK_NEXTJS', } export class MissingStoryAfterHmrError extends StorybookError { @@ -235,3 +236,19 @@ export class StoryStoreAccessedBeforeInitializationError extends StorybookError remove access to the store entirely`; } } + +export class NextjsRouterMocksNotAvailable extends StorybookError { + readonly category = Category.FRAMEWORK_NEXTJS; + + readonly code = 1; + + constructor(public data: { importType: string }) { + super(); + } + + template() { + return dedent` + Tried to access router mocks from ${this.data.importType} but they were not created yet. You might be running code in an unsupported environment. + `; + } +} From a6de166b3620d294a93dcd72b3b3bcd9ae496c0a Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Tue, 9 Apr 2024 11:17:30 +0200 Subject: [PATCH 34/82] add portable stories tests --- code/frameworks/nextjs/package.json | 12 ++++++-- .../Navigation.stories.tsx | 5 ++-- .../nextjs/stories/Navigation.stories.tsx | 24 ++++++++++++++- .../nextjs/stories/Router.stories.tsx | 30 +++++++++++++++++-- .../nextjs/stories/portable-stories.test.tsx | 2 +- .../nextjs/yarn.lock | 1 - 6 files changed, 64 insertions(+), 10 deletions(-) diff --git a/code/frameworks/nextjs/package.json b/code/frameworks/nextjs/package.json index ad48325066c4..24a235df9501 100644 --- a/code/frameworks/nextjs/package.json +++ b/code/frameworks/nextjs/package.json @@ -52,8 +52,16 @@ "require": "./dist/headers/index.js", "import": "./dist/headers/index.mjs" }, - "./router": "./dist/routing/router/index.mjs", - "./navigation": "./dist/routing/navigation/index.mjs", + "./router": { + "types": "./dist/routing/router/index.d.ts", + "require": "./dist/routing/router/index.js", + "import": "./dist/routing/router/index.mjs" + }, + "./navigation": { + "types": "./dist/routing/navigation/index.d.ts", + "require": "./dist/routing/navigation/index.js", + "import": "./dist/routing/navigation/index.mjs" + }, "./package.json": "./package.json" }, "main": "dist/index.js", diff --git a/code/frameworks/nextjs/template/stories_nextjs-default-ts/Navigation.stories.tsx b/code/frameworks/nextjs/template/stories_nextjs-default-ts/Navigation.stories.tsx index 79520290c716..1049d345c6d4 100644 --- a/code/frameworks/nextjs/template/stories_nextjs-default-ts/Navigation.stories.tsx +++ b/code/frameworks/nextjs/template/stories_nextjs-default-ts/Navigation.stories.tsx @@ -86,17 +86,18 @@ export default { export const Default: StoryObj = { play: async ({ canvasElement, step }) => { const canvas = within(canvasElement); + const routerMock = useRouterMock(); await step('Asserts whether forward hook is called', async () => { const forwardBtn = await canvas.findByText('Go forward'); await userEvent.click(forwardBtn); - await expect(useRouterMock().forward).toHaveBeenCalled(); + await expect(routerMock.forward).toHaveBeenCalled(); }); await step('Asserts whether custom prefetch hook is called', async () => { const prefetchBtn = await canvas.findByText('Prefetch'); await userEvent.click(prefetchBtn); - await expect(useRouterMock().prefetch).toHaveBeenCalledWith('/prefetched-html'); + await expect(routerMock.prefetch).toHaveBeenCalledWith('/prefetched-html'); }); }, }; diff --git a/test-storybooks/portable-stories-kitchen-sink/nextjs/stories/Navigation.stories.tsx b/test-storybooks/portable-stories-kitchen-sink/nextjs/stories/Navigation.stories.tsx index 6287d5ae2a73..1049d345c6d4 100644 --- a/test-storybooks/portable-stories-kitchen-sink/nextjs/stories/Navigation.stories.tsx +++ b/test-storybooks/portable-stories-kitchen-sink/nextjs/stories/Navigation.stories.tsx @@ -2,6 +2,8 @@ import { useRouter, usePathname, useSearchParams } from 'next/navigation'; import React from 'react'; import type { Meta, StoryObj } from '@storybook/react'; +import { expect, userEvent, within } from '@storybook/test'; +import { useRouter as useRouterMock } from '@storybook/nextjs/navigation'; function Component() { const router = useRouter(); @@ -73,9 +75,29 @@ export default { query: { foo: 'bar', }, + prefetch: () => { + console.log('custom prefetch'); + }, }, }, }, } as Meta; -export const Default: StoryObj = {}; +export const Default: StoryObj = { + play: async ({ canvasElement, step }) => { + const canvas = within(canvasElement); + const routerMock = useRouterMock(); + + await step('Asserts whether forward hook is called', async () => { + const forwardBtn = await canvas.findByText('Go forward'); + await userEvent.click(forwardBtn); + await expect(routerMock.forward).toHaveBeenCalled(); + }); + + await step('Asserts whether custom prefetch hook is called', async () => { + const prefetchBtn = await canvas.findByText('Prefetch'); + await userEvent.click(prefetchBtn); + await expect(routerMock.prefetch).toHaveBeenCalledWith('/prefetched-html'); + }); + }, +}; diff --git a/test-storybooks/portable-stories-kitchen-sink/nextjs/stories/Router.stories.tsx b/test-storybooks/portable-stories-kitchen-sink/nextjs/stories/Router.stories.tsx index 2ea7511a2f4e..0319e17efa02 100644 --- a/test-storybooks/portable-stories-kitchen-sink/nextjs/stories/Router.stories.tsx +++ b/test-storybooks/portable-stories-kitchen-sink/nextjs/stories/Router.stories.tsx @@ -1,5 +1,8 @@ -import { useRouter } from 'next/router'; import React from 'react'; +import type { Meta, StoryObj } from '@storybook/react'; +import { expect, within, userEvent } from '@storybook/test'; +import { useRouter as useRouterMock } from '@storybook/nextjs/router'; +import { useRouter } from 'next/router'; function Component() { const router = useRouter(); @@ -19,10 +22,12 @@ function Component() { name: 'Prefetch', }, { + // @ts-expect-error (old API) cb: () => router.push('/push-html', { forceOptimisticNavigation: true }), name: 'Push HTML', }, { + // @ts-expect-error (old API) cb: () => router.replace('/replaced-html', { forceOptimisticNavigation: true }), name: 'Replace', }, @@ -61,9 +66,28 @@ export default { query: { foo: 'bar', }, + prefetch: () => { + console.log('custom prefetch'); + }, }, }, }, -}; +} as Meta; -export const Default = {}; +export const Default: StoryObj = { + play: async ({ canvasElement, step }) => { + const canvas = within(canvasElement); + + await step('Asserts whether forward hook is called', async () => { + const forwardBtn = await canvas.findByText('Go forward'); + await userEvent.click(forwardBtn); + await expect(useRouterMock().forward).toHaveBeenCalled(); + }); + + await step('Asserts whether custom prefetch hook is called', async () => { + const prefetchBtn = await canvas.findByText('Prefetch'); + await userEvent.click(prefetchBtn); + await expect(useRouterMock().prefetch).toHaveBeenCalledWith('/prefetched-html'); + }); + }, +}; diff --git a/test-storybooks/portable-stories-kitchen-sink/nextjs/stories/portable-stories.test.tsx b/test-storybooks/portable-stories-kitchen-sink/nextjs/stories/portable-stories.test.tsx index d6789edde932..79684dc595e0 100644 --- a/test-storybooks/portable-stories-kitchen-sink/nextjs/stories/portable-stories.test.tsx +++ b/test-storybooks/portable-stories-kitchen-sink/nextjs/stories/portable-stories.test.tsx @@ -29,7 +29,7 @@ const runTests = (name: string, storiesModule: any) => { }) } -// // example with composeStory, returns a single story composed with args/decorators +// example with composeStory, returns a single story composed with args/decorators describe('renders', () => { runTests('nextHeaderStories', nextHeaderStories); runTests('navigationStories', navigationStories); diff --git a/test-storybooks/portable-stories-kitchen-sink/nextjs/yarn.lock b/test-storybooks/portable-stories-kitchen-sink/nextjs/yarn.lock index 7b54b424d5b9..46d9fd1b8d40 100644 --- a/test-storybooks/portable-stories-kitchen-sink/nextjs/yarn.lock +++ b/test-storybooks/portable-stories-kitchen-sink/nextjs/yarn.lock @@ -3001,7 +3001,6 @@ __metadata: "@babel/preset-typescript": "npm:^7.23.2" "@babel/runtime": "npm:^7.23.2" "@pmmmwh/react-refresh-webpack-plugin": "npm:^0.5.11" - "@storybook/addon-actions": "workspace:*" "@storybook/builder-webpack5": "workspace:*" "@storybook/core-common": "workspace:*" "@storybook/core-events": "workspace:*" From 6037744e0729357e0012f99a8673e507c640bbc9 Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Tue, 9 Apr 2024 12:27:37 +0200 Subject: [PATCH 35/82] set up mocks in loaders instead of decorators --- code/frameworks/nextjs/src/preview.tsx | 14 ++++++++++- .../nextjs/src/routing/decorator.tsx | 10 ++------ .../navigation/app-router-provider.tsx | 6 ++--- .../nextjs/src/routing/router/index.ts | 2 +- .../routing/router/page-router-provider.tsx | 24 +++---------------- .../Router.stories.tsx | 16 +++++++++---- .../core-events/src/errors/preview-errors.ts | 2 +- .../nextjs/stories/Router.stories.tsx | 20 +++++++++++++--- 8 files changed, 52 insertions(+), 42 deletions(-) diff --git a/code/frameworks/nextjs/src/preview.tsx b/code/frameworks/nextjs/src/preview.tsx index 7fb164d1f0de..7dbfb344861b 100644 --- a/code/frameworks/nextjs/src/preview.tsx +++ b/code/frameworks/nextjs/src/preview.tsx @@ -11,6 +11,8 @@ import { HeadManagerDecorator } from './head-manager/decorator'; // 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 { cookies, headers } from '@storybook/nextjs/headers.mock'; +import { createRouter } from './routing/router'; +import { createNavigation } from './routing/navigation'; function addNextHeadCount() { const meta = document.createElement('meta'); @@ -28,9 +30,19 @@ export const decorators: Addon_DecoratorFunction[] = [ HeadManagerDecorator, ]; -export const loaders: Addon_LoaderFunction = async () => { +export const loaders: Addon_LoaderFunction = async ({ globals, parameters }) => { cookies().mockRestore(); headers().mockRestore(); + + const { router, appDirectory } = parameters.nextjs ?? {}; + if (appDirectory) { + createNavigation(router); + } else { + createRouter({ + locale: globals.locale, + ...router, + }); + } }; export const parameters = { diff --git a/code/frameworks/nextjs/src/routing/decorator.tsx b/code/frameworks/nextjs/src/routing/decorator.tsx index d45f61b69c14..4edd87812b3f 100644 --- a/code/frameworks/nextjs/src/routing/decorator.tsx +++ b/code/frameworks/nextjs/src/routing/decorator.tsx @@ -11,7 +11,7 @@ const defaultRouterParams: RouteParams = { export const RouterDecorator = ( Story: React.FC, - { globals, parameters }: Addon_StoryContext + { parameters }: Addon_StoryContext ): React.ReactNode => { const nextAppDirectory = (parameters.nextjs?.appDirectory as NextAppDirectory | undefined) ?? false; @@ -33,13 +33,7 @@ export const RouterDecorator = ( } return ( - + ); diff --git a/code/frameworks/nextjs/src/routing/navigation/app-router-provider.tsx b/code/frameworks/nextjs/src/routing/navigation/app-router-provider.tsx index d4fcd1501676..efd122bae7c3 100644 --- a/code/frameworks/nextjs/src/routing/navigation/app-router-provider.tsx +++ b/code/frameworks/nextjs/src/routing/navigation/app-router-provider.tsx @@ -10,7 +10,7 @@ import { } from 'next/dist/shared/lib/hooks-client-context.shared-runtime'; import type { FlightRouterState } from 'next/dist/server/app-render/types'; import type { RouteParams } from '../types'; -import { createNavigation } from './index'; +import { useRouter } from './index'; type AppRouterProviderProps = { routeParams: RouteParams; @@ -30,7 +30,7 @@ export const AppRouterProvider: React.FC { - const { pathname, query, segments = [], ...restRouteParams } = routeParams; + const { pathname, query, segments = [] } = routeParams; const tree: FlightRouterState = [pathname, { children: getParallelRoutes([...segments]) }]; @@ -54,7 +54,7 @@ export const AppRouterProvider: React.FC - + ) => { +export const createRouter = (overrides: Partial) => { if (!routerAPI) { const routerActions: Partial = { push: fn((..._args: any[]) => { diff --git a/code/frameworks/nextjs/src/routing/router/page-router-provider.tsx b/code/frameworks/nextjs/src/routing/router/page-router-provider.tsx index abd948d0d9dd..b56dd5f97e9c 100644 --- a/code/frameworks/nextjs/src/routing/router/page-router-provider.tsx +++ b/code/frameworks/nextjs/src/routing/router/page-router-provider.tsx @@ -1,26 +1,8 @@ -import type { Globals } from '@storybook/csf'; import { RouterContext } from 'next/dist/shared/lib/router-context.shared-runtime'; import type { PropsWithChildren } from 'react'; import React from 'react'; -import type { RouteParams } from '../types'; -import { createRouter } from './index'; +import { useRouter } from './index'; -type PageRouterProviderProps = { - routeParams: RouteParams; - globals: Globals; -}; - -export const PageRouterProvider: React.FC> = ({ - children, - routeParams, - globals, -}) => ( - - {children} - +export const PageRouterProvider: React.FC = ({ children }) => ( + {children} ); diff --git a/code/frameworks/nextjs/template/stories_nextjs-default-ts/Router.stories.tsx b/code/frameworks/nextjs/template/stories_nextjs-default-ts/Router.stories.tsx index ea524e55f9b8..7f3a60a787f0 100644 --- a/code/frameworks/nextjs/template/stories_nextjs-default-ts/Router.stories.tsx +++ b/code/frameworks/nextjs/template/stories_nextjs-default-ts/Router.stories.tsx @@ -2,7 +2,7 @@ import React from 'react'; import type { Meta, StoryObj } from '@storybook/react'; import { expect, within, userEvent } from '@storybook/test'; import { useRouter as useRouterMock } from '@storybook/nextjs/router'; -import { useRouter } from 'next/router'; +import Router, { useRouter } from 'next/router'; function Component() { const router = useRouter(); @@ -79,11 +79,19 @@ export const Default: StoryObj = { const canvas = within(canvasElement); const routerMock = useRouterMock(); - await step('Router property overrides should be available', async () => { - await expect(routerMock.pathname).toBe('/hello'); - await expect(routerMock.query).toEqual({ foo: 'bar' }); + await step('Router property overrides should be available in useRouter fn', async () => { + await expect(Router.pathname).toBe('/hello'); + await expect(Router.query).toEqual({ foo: 'bar' }); }); + await step( + 'Router property overrides should be available in default export from next/router', + async () => { + await expect(Router.pathname).toBe('/hello'); + await expect(Router.query).toEqual({ foo: 'bar' }); + } + ); + await step('Asserts whether forward hook is called', async () => { const forwardBtn = await canvas.findByText('Go forward'); await userEvent.click(forwardBtn); diff --git a/code/lib/core-events/src/errors/preview-errors.ts b/code/lib/core-events/src/errors/preview-errors.ts index 0872718a03c1..5821e6444509 100644 --- a/code/lib/core-events/src/errors/preview-errors.ts +++ b/code/lib/core-events/src/errors/preview-errors.ts @@ -248,7 +248,7 @@ export class NextjsRouterMocksNotAvailable extends StorybookError { template() { return dedent` - Tried to access router mocks from ${this.data.importType} but they were not created yet. You might be running code in an unsupported environment. + Tried to access router mocks from "${this.data.importType}" but they were not created yet. You might be running code in an unsupported environment. `; } } diff --git a/test-storybooks/portable-stories-kitchen-sink/nextjs/stories/Router.stories.tsx b/test-storybooks/portable-stories-kitchen-sink/nextjs/stories/Router.stories.tsx index 0319e17efa02..7f3a60a787f0 100644 --- a/test-storybooks/portable-stories-kitchen-sink/nextjs/stories/Router.stories.tsx +++ b/test-storybooks/portable-stories-kitchen-sink/nextjs/stories/Router.stories.tsx @@ -2,7 +2,7 @@ import React from 'react'; import type { Meta, StoryObj } from '@storybook/react'; import { expect, within, userEvent } from '@storybook/test'; import { useRouter as useRouterMock } from '@storybook/nextjs/router'; -import { useRouter } from 'next/router'; +import Router, { useRouter } from 'next/router'; function Component() { const router = useRouter(); @@ -77,17 +77,31 @@ export default { export const Default: StoryObj = { play: async ({ canvasElement, step }) => { const canvas = within(canvasElement); + const routerMock = useRouterMock(); + + await step('Router property overrides should be available in useRouter fn', async () => { + await expect(Router.pathname).toBe('/hello'); + await expect(Router.query).toEqual({ foo: 'bar' }); + }); + + await step( + 'Router property overrides should be available in default export from next/router', + async () => { + await expect(Router.pathname).toBe('/hello'); + await expect(Router.query).toEqual({ foo: 'bar' }); + } + ); await step('Asserts whether forward hook is called', async () => { const forwardBtn = await canvas.findByText('Go forward'); await userEvent.click(forwardBtn); - await expect(useRouterMock().forward).toHaveBeenCalled(); + await expect(routerMock.forward).toHaveBeenCalled(); }); await step('Asserts whether custom prefetch hook is called', async () => { const prefetchBtn = await canvas.findByText('Prefetch'); await userEvent.click(prefetchBtn); - await expect(useRouterMock().prefetch).toHaveBeenCalledWith('/prefetched-html'); + await expect(routerMock.prefetch).toHaveBeenCalledWith('/prefetched-html'); }); }, }; From d229729d5bb2281dfc9f5fbe9daa476512b4c4a8 Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Tue, 9 Apr 2024 14:24:19 +0200 Subject: [PATCH 36/82] Update imports to use @storybook/nextjs/router and @storybook/nextjs/navigation in nextjs package.json and source files --- code/frameworks/nextjs/package.json | 6 ++++++ code/frameworks/nextjs/src/preview.tsx | 4 ++-- .../nextjs/src/routing/navigation/app-router-provider.tsx | 5 ++++- .../nextjs/src/routing/router/page-router-provider.tsx | 5 ++++- 4 files changed, 16 insertions(+), 4 deletions(-) diff --git a/code/frameworks/nextjs/package.json b/code/frameworks/nextjs/package.json index 24a235df9501..b2c0f1d13fe5 100644 --- a/code/frameworks/nextjs/package.json +++ b/code/frameworks/nextjs/package.json @@ -77,6 +77,12 @@ ], "headers.mock": [ "dist/headers/index.d.ts" + ], + "router": [ + "dist/routing/router/index.d.ts" + ], + "navigation": [ + "dist/routing/navigation/index.d.ts" ] } }, diff --git a/code/frameworks/nextjs/src/preview.tsx b/code/frameworks/nextjs/src/preview.tsx index 7dbfb344861b..32380e899684 100644 --- a/code/frameworks/nextjs/src/preview.tsx +++ b/code/frameworks/nextjs/src/preview.tsx @@ -11,8 +11,8 @@ import { HeadManagerDecorator } from './head-manager/decorator'; // 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 { cookies, headers } from '@storybook/nextjs/headers.mock'; -import { createRouter } from './routing/router'; -import { createNavigation } from './routing/navigation'; +import { createRouter } from '@storybook/nextjs/router'; +import { createNavigation } from '@storybook/nextjs/navigation'; function addNextHeadCount() { const meta = document.createElement('meta'); diff --git a/code/frameworks/nextjs/src/routing/navigation/app-router-provider.tsx b/code/frameworks/nextjs/src/routing/navigation/app-router-provider.tsx index efd122bae7c3..e34759453be2 100644 --- a/code/frameworks/nextjs/src/routing/navigation/app-router-provider.tsx +++ b/code/frameworks/nextjs/src/routing/navigation/app-router-provider.tsx @@ -10,7 +10,10 @@ import { } from 'next/dist/shared/lib/hooks-client-context.shared-runtime'; import type { FlightRouterState } from 'next/dist/server/app-render/types'; import type { RouteParams } from '../types'; -import { useRouter } from './index'; +// 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 { useRouter } from '@storybook/nextjs/navigation'; type AppRouterProviderProps = { routeParams: RouteParams; diff --git a/code/frameworks/nextjs/src/routing/router/page-router-provider.tsx b/code/frameworks/nextjs/src/routing/router/page-router-provider.tsx index b56dd5f97e9c..90554245d5f1 100644 --- a/code/frameworks/nextjs/src/routing/router/page-router-provider.tsx +++ b/code/frameworks/nextjs/src/routing/router/page-router-provider.tsx @@ -1,7 +1,10 @@ import { RouterContext } from 'next/dist/shared/lib/router-context.shared-runtime'; import type { PropsWithChildren } from 'react'; import React from 'react'; -import { useRouter } from './index'; +// 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 { useRouter } from '@storybook/nextjs/router'; export const PageRouterProvider: React.FC = ({ children }) => ( {children} From 22b79632b84dce79700eca7188d28916832dfc83 Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Wed, 10 Apr 2024 13:01:45 +0200 Subject: [PATCH 37/82] fix singleton logic --- .../nextjs/src/routing/navigation/index.ts | 38 ++++--- .../nextjs/src/routing/router/index.ts | 100 +++++++++--------- 2 files changed, 67 insertions(+), 71 deletions(-) diff --git a/code/frameworks/nextjs/src/routing/navigation/index.ts b/code/frameworks/nextjs/src/routing/navigation/index.ts index 23e34cb0c190..804492c34d26 100644 --- a/code/frameworks/nextjs/src/routing/navigation/index.ts +++ b/code/frameworks/nextjs/src/routing/navigation/index.ts @@ -12,29 +12,27 @@ let navigationAPI: { }; export const createNavigation = (overrides: any) => { - if (!navigationAPI) { - const navigationActions = { - push: fn().mockName('nextNavigation.push'), - replace: fn().mockName('nextNavigation.replace'), - forward: fn().mockName('nextNavigation.forward'), - back: fn().mockName('nextNavigation.back'), - prefetch: fn().mockName('nextNavigation.prefetch'), - refresh: fn().mockName('nextNavigation.refresh'), - }; - - if (overrides) { - Object.keys(navigationActions).forEach((key) => { - if (key in overrides) { - (navigationActions as any)[key] = fn((...args: any[]) => { - return (overrides as any)[key](...args); - }).mockName(`nextNavigation.${key}`); - } - }); - } + const navigationActions = { + push: fn().mockName('nextNavigation.push'), + replace: fn().mockName('nextNavigation.replace'), + forward: fn().mockName('nextNavigation.forward'), + back: fn().mockName('nextNavigation.back'), + prefetch: fn().mockName('nextNavigation.prefetch'), + refresh: fn().mockName('nextNavigation.refresh'), + }; - navigationAPI = navigationActions; + if (overrides) { + Object.keys(navigationActions).forEach((key) => { + if (key in overrides) { + (navigationActions as any)[key] = fn((...args: any[]) => { + return (overrides as any)[key](...args); + }).mockName(`nextNavigation.${key}`); + } + }); } + navigationAPI = navigationActions; + return navigationAPI; }; diff --git a/code/frameworks/nextjs/src/routing/router/index.ts b/code/frameworks/nextjs/src/routing/router/index.ts index 587ab08a4791..120063353e84 100644 --- a/code/frameworks/nextjs/src/routing/router/index.ts +++ b/code/frameworks/nextjs/src/routing/router/index.ts @@ -32,62 +32,60 @@ let routerAPI: { } & typeof defaultRouterState; export const createRouter = (overrides: Partial) => { - if (!routerAPI) { - const routerActions: Partial = { - push: fn((..._args: any[]) => { - return Promise.resolve(true); - }).mockName('nextRouter.push'), - replace: fn((..._args: any[]) => { - return Promise.resolve(true); - }).mockName('nextRouter.replace'), - reload: fn((..._args: any[]) => {}).mockName('nextRouter.reload'), - back: fn((..._args: any[]) => {}).mockName('nextRouter.back'), - forward: fn(() => {}).mockName('nextRouter.forward'), - prefetch: fn((..._args: any[]) => { - return Promise.resolve(); - }).mockName('nextRouter.prefetch'), - beforePopState: fn((..._args: any[]) => {}).mockName('nextRouter.beforePopState'), - }; + const routerActions: Partial = { + push: fn((..._args: any[]) => { + return Promise.resolve(true); + }).mockName('nextRouter.push'), + replace: fn((..._args: any[]) => { + return Promise.resolve(true); + }).mockName('nextRouter.replace'), + reload: fn((..._args: any[]) => {}).mockName('nextRouter.reload'), + back: fn((..._args: any[]) => {}).mockName('nextRouter.back'), + forward: fn(() => {}).mockName('nextRouter.forward'), + prefetch: fn((..._args: any[]) => { + return Promise.resolve(); + }).mockName('nextRouter.prefetch'), + beforePopState: fn((..._args: any[]) => {}).mockName('nextRouter.beforePopState'), + }; - const routerEvents: NextRouter['events'] = { - on: fn((..._args: any[]) => {}).mockName('nextRouter.events.on'), - off: fn((..._args: any[]) => {}).mockName('nextRouter.events.off'), - emit: fn((..._args: any[]) => {}).mockName('nextRouter.events.emit'), - }; + const routerEvents: NextRouter['events'] = { + on: fn((..._args: any[]) => {}).mockName('nextRouter.events.on'), + off: fn((..._args: any[]) => {}).mockName('nextRouter.events.off'), + emit: fn((..._args: any[]) => {}).mockName('nextRouter.events.emit'), + }; - if (overrides) { - Object.keys(routerActions).forEach((key) => { - if (key in overrides) { - (routerActions as any)[key] = fn((...args: any[]) => { - return (overrides as any)[key](...args); - }).mockName(`nextRouter.${key}`); - } - }); - } + if (overrides) { + Object.keys(routerActions).forEach((key) => { + if (key in overrides) { + (routerActions as any)[key] = fn((...args: any[]) => { + return (overrides as any)[key](...args); + }).mockName(`nextRouter.${key}`); + } + }); + } - if (overrides?.events) { - Object.keys(routerEvents).forEach((key) => { - if (key in routerEvents) { - (routerEvents as any)[key] = fn((...args: any[]) => { - return (overrides.events as any)[key](...args); - }).mockName(`nextRouter.events.${key}`); - } - }); - } + if (overrides?.events) { + Object.keys(routerEvents).forEach((key) => { + if (key in routerEvents) { + (routerEvents as any)[key] = fn((...args: any[]) => { + return (overrides.events as any)[key](...args); + }).mockName(`nextRouter.events.${key}`); + } + }); + } - routerAPI = { - ...defaultRouterState, - ...overrides, - ...routerActions, - // @ts-expect-error TODO improve typings - events: routerEvents, - }; + routerAPI = { + ...defaultRouterState, + ...overrides, + ...routerActions, + // @ts-expect-error TODO improve typings + events: routerEvents, + }; - // overwrite the singleton router from next/router - singletonRouter.router = routerAPI as any; - singletonRouter.readyCallbacks.forEach((cb) => cb()); - singletonRouter.readyCallbacks = []; - } + // overwrite the singleton router from next/router + singletonRouter.router = routerAPI as any; + singletonRouter.readyCallbacks.forEach((cb) => cb()); + singletonRouter.readyCallbacks = []; return routerAPI as unknown as NextRouter; }; From ace01fd9b68fc1e71a6d6180392a8484d102fd64 Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Wed, 10 Apr 2024 13:04:42 +0200 Subject: [PATCH 38/82] Update imports to use @storybook/nextjs/router.mock and @storybook/nextjs/navigation.mock --- code/frameworks/nextjs/package.json | 10 +- code/frameworks/nextjs/src/preview.tsx | 8 +- .../navigation/app-router-provider.tsx | 6 +- .../nextjs/src/routing/navigation/index.ts | 21 +-- .../nextjs/src/routing/router/index.ts | 31 +++-- .../routing/router/page-router-provider.tsx | 6 +- .../Router.stories.jsx | 25 +++- .../Navigation.stories.tsx | 4 +- .../Router.stories.tsx | 5 +- .../nextjs/stories/Navigation.stories.tsx | 4 +- .../nextjs/stories/Router.stories.tsx | 5 +- .../portable-stories.test.tsx.snap | 4 + .../nextjs/yarn.lock | 126 +++++++++--------- 13 files changed, 146 insertions(+), 109 deletions(-) diff --git a/code/frameworks/nextjs/package.json b/code/frameworks/nextjs/package.json index b2c0f1d13fe5..a9cac9d5a6ec 100644 --- a/code/frameworks/nextjs/package.json +++ b/code/frameworks/nextjs/package.json @@ -52,12 +52,12 @@ "require": "./dist/headers/index.js", "import": "./dist/headers/index.mjs" }, - "./router": { + "./router.mock": { "types": "./dist/routing/router/index.d.ts", "require": "./dist/routing/router/index.js", "import": "./dist/routing/router/index.mjs" }, - "./navigation": { + "./navigation.mock": { "types": "./dist/routing/navigation/index.d.ts", "require": "./dist/routing/navigation/index.js", "import": "./dist/routing/navigation/index.mjs" @@ -78,10 +78,10 @@ "headers.mock": [ "dist/headers/index.d.ts" ], - "router": [ + "router.mock": [ "dist/routing/router/index.d.ts" ], - "navigation": [ + "navigation.mock": [ "dist/routing/navigation/index.d.ts" ] } @@ -201,4 +201,4 @@ "platform": "node" }, "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae17" -} \ No newline at end of file +} diff --git a/code/frameworks/nextjs/src/preview.tsx b/code/frameworks/nextjs/src/preview.tsx index 32380e899684..e65e76bf4854 100644 --- a/code/frameworks/nextjs/src/preview.tsx +++ b/code/frameworks/nextjs/src/preview.tsx @@ -11,8 +11,12 @@ import { HeadManagerDecorator } from './head-manager/decorator'; // 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 { cookies, headers } from '@storybook/nextjs/headers.mock'; -import { createRouter } from '@storybook/nextjs/router'; -import { createNavigation } from '@storybook/nextjs/navigation'; +// 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 { createRouter } from '@storybook/nextjs/router.mock'; +// 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 { createNavigation } from '@storybook/nextjs/navigation.mock'; function addNextHeadCount() { const meta = document.createElement('meta'); diff --git a/code/frameworks/nextjs/src/routing/navigation/app-router-provider.tsx b/code/frameworks/nextjs/src/routing/navigation/app-router-provider.tsx index e34759453be2..7e26b54e050f 100644 --- a/code/frameworks/nextjs/src/routing/navigation/app-router-provider.tsx +++ b/code/frameworks/nextjs/src/routing/navigation/app-router-provider.tsx @@ -13,7 +13,9 @@ import type { RouteParams } from '../types'; // 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 { useRouter } from '@storybook/nextjs/navigation'; +// 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 { getRouter } from '@storybook/nextjs/navigation.mock'; type AppRouterProviderProps = { routeParams: RouteParams; @@ -57,7 +59,7 @@ export const AppRouterProvider: React.FC - + { const navigationActions = { - push: fn().mockName('nextNavigation.push'), - replace: fn().mockName('nextNavigation.replace'), - forward: fn().mockName('nextNavigation.forward'), - back: fn().mockName('nextNavigation.back'), - prefetch: fn().mockName('nextNavigation.prefetch'), - refresh: fn().mockName('nextNavigation.refresh'), + push: fn().mockName('useRouter().push'), + replace: fn().mockName('useRouter().replace'), + forward: fn().mockName('useRouter().forward'), + back: fn().mockName('useRouter().back'), + prefetch: fn().mockName('useRouter().prefetch'), + refresh: fn().mockName('useRouter().refresh'), }; if (overrides) { @@ -26,7 +31,7 @@ export const createNavigation = (overrides: any) => { if (key in overrides) { (navigationActions as any)[key] = fn((...args: any[]) => { return (overrides as any)[key](...args); - }).mockName(`nextNavigation.${key}`); + }).mockName(`useRouter().${key}`); } }); } @@ -36,7 +41,7 @@ export const createNavigation = (overrides: any) => { return navigationAPI; }; -export const useRouter = () => { +export const getRouter = () => { if (!navigationAPI) { throw new NextjsRouterMocksNotAvailable({ importType: 'next/navigation', diff --git a/code/frameworks/nextjs/src/routing/router/index.ts b/code/frameworks/nextjs/src/routing/router/index.ts index 120063353e84..922ccca2e5a4 100644 --- a/code/frameworks/nextjs/src/routing/router/index.ts +++ b/code/frameworks/nextjs/src/routing/router/index.ts @@ -31,27 +31,32 @@ let routerAPI: { }; } & typeof defaultRouterState; +/** + * Creates a next/router router API mock. Used internally. + * @ignore + * @internal + * */ export const createRouter = (overrides: Partial) => { const routerActions: Partial = { push: fn((..._args: any[]) => { return Promise.resolve(true); - }).mockName('nextRouter.push'), + }).mockName('useRouter().push'), replace: fn((..._args: any[]) => { return Promise.resolve(true); - }).mockName('nextRouter.replace'), - reload: fn((..._args: any[]) => {}).mockName('nextRouter.reload'), - back: fn((..._args: any[]) => {}).mockName('nextRouter.back'), - forward: fn(() => {}).mockName('nextRouter.forward'), + }).mockName('useRouter().replace'), + reload: fn((..._args: any[]) => {}).mockName('useRouter().reload'), + back: fn((..._args: any[]) => {}).mockName('useRouter().back'), + forward: fn(() => {}).mockName('useRouter().forward'), prefetch: fn((..._args: any[]) => { return Promise.resolve(); - }).mockName('nextRouter.prefetch'), - beforePopState: fn((..._args: any[]) => {}).mockName('nextRouter.beforePopState'), + }).mockName('useRouter().prefetch'), + beforePopState: fn((..._args: any[]) => {}).mockName('useRouter().beforePopState'), }; const routerEvents: NextRouter['events'] = { - on: fn((..._args: any[]) => {}).mockName('nextRouter.events.on'), - off: fn((..._args: any[]) => {}).mockName('nextRouter.events.off'), - emit: fn((..._args: any[]) => {}).mockName('nextRouter.events.emit'), + on: fn((..._args: any[]) => {}).mockName('useRouter().events.on'), + off: fn((..._args: any[]) => {}).mockName('useRouter().events.off'), + emit: fn((..._args: any[]) => {}).mockName('useRouter().events.emit'), }; if (overrides) { @@ -59,7 +64,7 @@ export const createRouter = (overrides: Partial) => { if (key in overrides) { (routerActions as any)[key] = fn((...args: any[]) => { return (overrides as any)[key](...args); - }).mockName(`nextRouter.${key}`); + }).mockName(`useRouter().${key}`); } }); } @@ -69,7 +74,7 @@ export const createRouter = (overrides: Partial) => { if (key in routerEvents) { (routerEvents as any)[key] = fn((...args: any[]) => { return (overrides.events as any)[key](...args); - }).mockName(`nextRouter.events.${key}`); + }).mockName(`useRouter().events.${key}`); } }); } @@ -90,7 +95,7 @@ export const createRouter = (overrides: Partial) => { return routerAPI as unknown as NextRouter; }; -export const useRouter = () => { +export const getRouter = () => { if (!routerAPI) { throw new NextjsRouterMocksNotAvailable({ importType: 'next/router', diff --git a/code/frameworks/nextjs/src/routing/router/page-router-provider.tsx b/code/frameworks/nextjs/src/routing/router/page-router-provider.tsx index 90554245d5f1..e536a16db547 100644 --- a/code/frameworks/nextjs/src/routing/router/page-router-provider.tsx +++ b/code/frameworks/nextjs/src/routing/router/page-router-provider.tsx @@ -4,8 +4,10 @@ import React from 'react'; // 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 { useRouter } from '@storybook/nextjs/router'; +// 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 { getRouter } from '@storybook/nextjs/router.mock'; export const PageRouterProvider: React.FC = ({ children }) => ( - {children} + {children} ); diff --git a/code/frameworks/nextjs/template/stories_nextjs-default-js/Router.stories.jsx b/code/frameworks/nextjs/template/stories_nextjs-default-js/Router.stories.jsx index ceee12ad3666..9813958be952 100644 --- a/code/frameworks/nextjs/template/stories_nextjs-default-js/Router.stories.jsx +++ b/code/frameworks/nextjs/template/stories_nextjs-default-js/Router.stories.jsx @@ -1,7 +1,7 @@ -import { expect, within, userEvent } from '@storybook/test'; -import { useRouter as useRouterMock } from '@storybook/nextjs/router'; -import { useRouter } from 'next/router'; import React from 'react'; +import { expect, within, userEvent } from '@storybook/test'; +import { getRouter } from '@storybook/nextjs/router.mock'; +import Router, { useRouter } from 'next/router'; function Component() { const router = useRouter(); @@ -32,6 +32,7 @@ function Component() { return (
+
Router pathname: {Router.pathname}
pathname: {router.pathname}
searchparams:{' '} @@ -74,17 +75,31 @@ export default { export const Default = { play: async ({ canvasElement, step }) => { const canvas = within(canvasElement); + const routerMock = getRouter(); + + await step('Router property overrides should be available in useRouter fn', async () => { + await expect(Router.pathname).toBe('/hello'); + await expect(Router.query).toEqual({ foo: 'bar' }); + }); + + await step( + 'Router property overrides should be available in default export from next/router', + async () => { + await expect(Router.pathname).toBe('/hello'); + await expect(Router.query).toEqual({ foo: 'bar' }); + } + ); await step('Asserts whether forward hook is called', async () => { const forwardBtn = await canvas.findByText('Go forward'); await userEvent.click(forwardBtn); - await expect(useRouterMock().forward).toHaveBeenCalled(); + await expect(routerMock.forward).toHaveBeenCalled(); }); await step('Asserts whether custom prefetch hook is called', async () => { const prefetchBtn = await canvas.findByText('Prefetch'); await userEvent.click(prefetchBtn); - await expect(useRouterMock().prefetch).toHaveBeenCalledWith('/prefetched-html'); + await expect(routerMock.prefetch).toHaveBeenCalledWith('/prefetched-html'); }); }, }; diff --git a/code/frameworks/nextjs/template/stories_nextjs-default-ts/Navigation.stories.tsx b/code/frameworks/nextjs/template/stories_nextjs-default-ts/Navigation.stories.tsx index 1049d345c6d4..c477cb785c58 100644 --- a/code/frameworks/nextjs/template/stories_nextjs-default-ts/Navigation.stories.tsx +++ b/code/frameworks/nextjs/template/stories_nextjs-default-ts/Navigation.stories.tsx @@ -3,7 +3,7 @@ import { useRouter, usePathname, useSearchParams } from 'next/navigation'; import React from 'react'; import type { Meta, StoryObj } from '@storybook/react'; import { expect, userEvent, within } from '@storybook/test'; -import { useRouter as useRouterMock } from '@storybook/nextjs/navigation'; +import { getRouter } from '@storybook/nextjs/navigation.mock'; function Component() { const router = useRouter(); @@ -86,7 +86,7 @@ export default { export const Default: StoryObj = { play: async ({ canvasElement, step }) => { const canvas = within(canvasElement); - const routerMock = useRouterMock(); + const routerMock = getRouter(); await step('Asserts whether forward hook is called', async () => { const forwardBtn = await canvas.findByText('Go forward'); diff --git a/code/frameworks/nextjs/template/stories_nextjs-default-ts/Router.stories.tsx b/code/frameworks/nextjs/template/stories_nextjs-default-ts/Router.stories.tsx index 7f3a60a787f0..f5a840241fb4 100644 --- a/code/frameworks/nextjs/template/stories_nextjs-default-ts/Router.stories.tsx +++ b/code/frameworks/nextjs/template/stories_nextjs-default-ts/Router.stories.tsx @@ -1,7 +1,7 @@ import React from 'react'; import type { Meta, StoryObj } from '@storybook/react'; import { expect, within, userEvent } from '@storybook/test'; -import { useRouter as useRouterMock } from '@storybook/nextjs/router'; +import { getRouter } from '@storybook/nextjs/router.mock'; import Router, { useRouter } from 'next/router'; function Component() { @@ -35,6 +35,7 @@ function Component() { return (
+
Router pathname: {Router.pathname}
pathname: {router.pathname}
searchparams:{' '} @@ -77,7 +78,7 @@ export default { export const Default: StoryObj = { play: async ({ canvasElement, step }) => { const canvas = within(canvasElement); - const routerMock = useRouterMock(); + const routerMock = getRouter(); await step('Router property overrides should be available in useRouter fn', async () => { await expect(Router.pathname).toBe('/hello'); diff --git a/test-storybooks/portable-stories-kitchen-sink/nextjs/stories/Navigation.stories.tsx b/test-storybooks/portable-stories-kitchen-sink/nextjs/stories/Navigation.stories.tsx index 1049d345c6d4..c477cb785c58 100644 --- a/test-storybooks/portable-stories-kitchen-sink/nextjs/stories/Navigation.stories.tsx +++ b/test-storybooks/portable-stories-kitchen-sink/nextjs/stories/Navigation.stories.tsx @@ -3,7 +3,7 @@ import { useRouter, usePathname, useSearchParams } from 'next/navigation'; import React from 'react'; import type { Meta, StoryObj } from '@storybook/react'; import { expect, userEvent, within } from '@storybook/test'; -import { useRouter as useRouterMock } from '@storybook/nextjs/navigation'; +import { getRouter } from '@storybook/nextjs/navigation.mock'; function Component() { const router = useRouter(); @@ -86,7 +86,7 @@ export default { export const Default: StoryObj = { play: async ({ canvasElement, step }) => { const canvas = within(canvasElement); - const routerMock = useRouterMock(); + const routerMock = getRouter(); await step('Asserts whether forward hook is called', async () => { const forwardBtn = await canvas.findByText('Go forward'); diff --git a/test-storybooks/portable-stories-kitchen-sink/nextjs/stories/Router.stories.tsx b/test-storybooks/portable-stories-kitchen-sink/nextjs/stories/Router.stories.tsx index 7f3a60a787f0..f5a840241fb4 100644 --- a/test-storybooks/portable-stories-kitchen-sink/nextjs/stories/Router.stories.tsx +++ b/test-storybooks/portable-stories-kitchen-sink/nextjs/stories/Router.stories.tsx @@ -1,7 +1,7 @@ import React from 'react'; import type { Meta, StoryObj } from '@storybook/react'; import { expect, within, userEvent } from '@storybook/test'; -import { useRouter as useRouterMock } from '@storybook/nextjs/router'; +import { getRouter } from '@storybook/nextjs/router.mock'; import Router, { useRouter } from 'next/router'; function Component() { @@ -35,6 +35,7 @@ function Component() { return (
+
Router pathname: {Router.pathname}
pathname: {router.pathname}
searchparams:{' '} @@ -77,7 +78,7 @@ export default { export const Default: StoryObj = { play: async ({ canvasElement, step }) => { const canvas = within(canvasElement); - const routerMock = useRouterMock(); + const routerMock = getRouter(); await step('Router property overrides should be available in useRouter fn', async () => { await expect(Router.pathname).toBe('/hello'); diff --git a/test-storybooks/portable-stories-kitchen-sink/nextjs/stories/__snapshots__/portable-stories.test.tsx.snap b/test-storybooks/portable-stories-kitchen-sink/nextjs/stories/__snapshots__/portable-stories.test.tsx.snap index 7f5212f2f6a3..2b8af2b9cd59 100644 --- a/test-storybooks/portable-stories-kitchen-sink/nextjs/stories/__snapshots__/portable-stories.test.tsx.snap +++ b/test-storybooks/portable-stories-kitchen-sink/nextjs/stories/__snapshots__/portable-stories.test.tsx.snap @@ -832,6 +832,10 @@ exports[`renders routerStories stories renders Default 1`] = ` Global Decorator
+
+ Router pathname: + /hello +
pathname: /hello diff --git a/test-storybooks/portable-stories-kitchen-sink/nextjs/yarn.lock b/test-storybooks/portable-stories-kitchen-sink/nextjs/yarn.lock index 46d9fd1b8d40..1846f8c034a2 100644 --- a/test-storybooks/portable-stories-kitchen-sink/nextjs/yarn.lock +++ b/test-storybooks/portable-stories-kitchen-sink/nextjs/yarn.lock @@ -2379,7 +2379,7 @@ __metadata: "@storybook/addon-actions@file:../../../code/addons/actions::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 - resolution: "@storybook/addon-actions@file:../../../code/addons/actions#../../../code/addons/actions::hash=99649f&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/addon-actions@file:../../../code/addons/actions#../../../code/addons/actions::hash=a58e61&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/core-events": "workspace:*" "@storybook/global": "npm:^5.0.0" @@ -2387,7 +2387,7 @@ __metadata: dequal: "npm:^2.0.2" polished: "npm:^4.2.2" uuid: "npm:^9.0.0" - checksum: 10/79a14c7a74591e404e5ec22c2b6c9eaa03dd48bf3316470dd2642e3c70abd7c90b168fd350e729b617967c7d759df2ef0107534d218d1138b12e737c8a3e888e + checksum: 10/448ef050488c32b161113c707a9bd3e4eb734f7a23f350d7cb05dd30927785c19b0eb1b2f01f8f5f7106e8f46dcc2cfc9496a089dee818754dc83ae5403d8ee6 languageName: node linkType: hard @@ -2403,17 +2403,13 @@ __metadata: linkType: hard "@storybook/addon-controls@file:../../../code/addons/controls::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.5 - resolution: "@storybook/addon-controls@file:../../../code/addons/controls#../../../code/addons/controls::hash=358687&locator=portable-stories-nextjs%40workspace%3A." + version: 8.1.0-alpha.6 + resolution: "@storybook/addon-controls@file:../../../code/addons/controls#../../../code/addons/controls::hash=b28ca0&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/blocks": "workspace:*" - "@storybook/core-common": "workspace:*" - cjs-module-lexer: "npm:^1.2.3" - es-module-lexer: "npm:^1.5.0" - globby: "npm:^14.0.1" lodash: "npm:^4.17.21" ts-dedent: "npm:^2.0.0" - checksum: 10/feb098e18f942562769dfdfb4afc70655f67f11e6d14acf8e3ca4cfe9a22e09e89ede9f17be6ff1c07a56bed8a6fa1961fa044137a3e7a34471345bcccd091f2 + checksum: 10/f68a13e40bda392c1abc4cee2f2294fe98f11e8b34af8213532ae14027327efbafb3c9a8d75d300a3c58fb8d036a09f349e60cd064dd8dbde504add2945bab6b languageName: node linkType: hard @@ -2478,7 +2474,7 @@ __metadata: "@storybook/addon-interactions@file:../../../code/addons/interactions::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 - resolution: "@storybook/addon-interactions@file:../../../code/addons/interactions#../../../code/addons/interactions::hash=e7e04a&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/addon-interactions@file:../../../code/addons/interactions#../../../code/addons/interactions::hash=43a156&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/global": "npm:^5.0.0" "@storybook/instrumenter": "workspace:*" @@ -2486,7 +2482,7 @@ __metadata: "@storybook/types": "workspace:*" polished: "npm:^4.2.2" ts-dedent: "npm:^2.2.0" - checksum: 10/c66d7db9c1356903d444211962054b0a692a56f7ed5debcaa1f2e40fd57575975b8de86c2fb3be3a140e69cdc8f36b25f81be6e2ca55fb4facf826694d8be65f + checksum: 10/7ab50dfb5ccfde231d5ebde1e695512c5bb3706e5fe9bc580fbf23d5298ac7685e9648fbbc5f65605779954dc2f04ac1ce799e47b387d7eaaff5c9d7e8485602 languageName: node linkType: hard @@ -2590,7 +2586,7 @@ __metadata: "@storybook/builder-webpack5@file:../../../code/builders/builder-webpack5::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 - resolution: "@storybook/builder-webpack5@file:../../../code/builders/builder-webpack5#../../../code/builders/builder-webpack5::hash=983659&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/builder-webpack5@file:../../../code/builders/builder-webpack5#../../../code/builders/builder-webpack5::hash=c0c586&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/channels": "workspace:*" "@storybook/client-logger": "workspace:*" @@ -2629,26 +2625,26 @@ __metadata: peerDependenciesMeta: typescript: optional: true - checksum: 10/f84f41cd8ac80376ba603f4bb58da565f2b0e95ed37593279d85c4e5573de64633f10b7c6f2bd399f6d40057f1c97934760b969326520250f6de5efd07ac967b + checksum: 10/f4fe0264184b91d9a96baf2d35fc7c7c212b516901650c852f61c2aec2e6b7d81f6828b7ca7ce34f1623bab5cd838936d5877d982df0fa75cab577af78ce79ef languageName: node linkType: hard "@storybook/channels@file:../../../code/lib/channels::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 - resolution: "@storybook/channels@file:../../../code/lib/channels#../../../code/lib/channels::hash=3a33a2&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/channels@file:../../../code/lib/channels#../../../code/lib/channels::hash=413c8e&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/client-logger": "workspace:*" "@storybook/core-events": "workspace:*" "@storybook/global": "npm:^5.0.0" telejson: "npm:^7.2.0" tiny-invariant: "npm:^1.3.1" - checksum: 10/cda1b155f07fdac919a29e5a5287ae33ef4b3ed9c5c9816c29e17e3aa0dd788dc59da8775c40341ebcbd426ecf4f9ab629949dfe945834f48db7ca6053c062f1 + checksum: 10/6091e0ca5a19b46589877a6a17cac725ef863a8cdf61d812261673e16227490f8b80fcf26daa8924dbcaad434c91118ac399f3a610c7eec5ed094e7b0dfd0947 languageName: node linkType: hard "@storybook/cli@file:../../../code/lib/cli::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.5 - resolution: "@storybook/cli@file:../../../code/lib/cli#../../../code/lib/cli::hash=49e395&locator=portable-stories-nextjs%40workspace%3A." + version: 8.1.0-alpha.6 + resolution: "@storybook/cli@file:../../../code/lib/cli#../../../code/lib/cli::hash=2914c7&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@babel/core": "npm:^7.23.0" "@babel/types": "npm:^7.23.0" @@ -2689,16 +2685,16 @@ __metadata: bin: getstorybook: ./bin/index.js sb: ./bin/index.js - checksum: 10/37be78e7b11cfb9d712f9b948e3017665fcee970e1b3a4806f3f8307ea9db7e39f4b12fa919086a53efbe4e24a5e6196b2daafb958c11145e9e5d224fa70af55 + checksum: 10/6c967c34ef47687aa6ccbc70d82f22e375be79af1bf5eec3e1163c7774b65fda69a414c0aa712039062a9f184bc84d70e7fcf713712c28d4a121cc3848a32600 languageName: node linkType: hard "@storybook/client-logger@file:../../../code/lib/client-logger::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 - resolution: "@storybook/client-logger@file:../../../code/lib/client-logger#../../../code/lib/client-logger::hash=f3ac76&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/client-logger@file:../../../code/lib/client-logger#../../../code/lib/client-logger::hash=6408e1&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/global": "npm:^5.0.0" - checksum: 10/00b5cfade208483f5ec85c8aa59cabf402502a4cf1d9c3ee24a311a396e65ce97f0a3d4356aac9f413c8d84c9804ccb07aaeda6f3d553799e6e036960f4a2fbe + checksum: 10/ff3312279cf1bcaa3fcf91149951e4b7b6cba79ddbb0f80e488126a38bf1f7ceab4ad43cf40324b5ec9c3a8a786695042bc7cd47a0ae0a4835f06dddc5fb214e languageName: node linkType: hard @@ -2727,7 +2723,7 @@ __metadata: "@storybook/components@file:../../../code/ui/components::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 - resolution: "@storybook/components@file:../../../code/ui/components#../../../code/ui/components::hash=2c348b&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/components@file:../../../code/ui/components#../../../code/ui/components::hash=636348&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@radix-ui/react-slot": "npm:^1.0.2" "@storybook/client-logger": "workspace:*" @@ -2741,13 +2737,13 @@ __metadata: peerDependencies: react: ^16.8.0 || ^17.0.0 || ^18.0.0 react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 - checksum: 10/5ca7607bebb485e1dbb5c26f5dc3482e661d1646381be3ae26284c1e82cb0e2de51e05f5c4272ebe4d5fa6536aecb8dcd46e3da871aad90ba67a2e7e8987d278 + checksum: 10/02326f8b50631922d80cf64163abf4e723c5a1fd78c1ae1b276c95ff7992c0a826736badf1b7222038d83775b2937ef60de426aab7a6d5262a7b1152f5825abc languageName: node linkType: hard "@storybook/core-common@file:../../../code/lib/core-common::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.5 - resolution: "@storybook/core-common@file:../../../code/lib/core-common#../../../code/lib/core-common::hash=55d292&locator=portable-stories-nextjs%40workspace%3A." + version: 8.1.0-alpha.6 + resolution: "@storybook/core-common@file:../../../code/lib/core-common#../../../code/lib/core-common::hash=26f1e6&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/core-events": "workspace:*" "@storybook/csf-tools": "workspace:*" @@ -2777,22 +2773,22 @@ __metadata: tiny-invariant: "npm:^1.3.1" ts-dedent: "npm:^2.0.0" util: "npm:^0.12.4" - checksum: 10/e9308c3683651e2c925823e4bee0f91156ba544b0dc72ee6291810e7bd2e17690bce3f426c10d942fd5e18eb545589e5a3347cd02eb6ecceb058dad7a56bb775 + checksum: 10/7b692d71f9d170253ad376d67d364d351eff3d6f9b21fcf2471aefbf78fe4fdfb61a24f444630ad0bcbe3d560b92350271087e03f7e040cedbbfbb142ef0bc7b languageName: node linkType: hard "@storybook/core-events@file:../../../code/lib/core-events::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 - resolution: "@storybook/core-events@file:../../../code/lib/core-events#../../../code/lib/core-events::hash=840150&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/core-events@file:../../../code/lib/core-events#../../../code/lib/core-events::hash=3d1227&locator=portable-stories-nextjs%40workspace%3A." dependencies: ts-dedent: "npm:^2.0.0" - checksum: 10/ccfa4397af9c114f401ac87d232f66c0cb37e7ee104647b36dd34e7bf598ff7e3a22fb18a6fb9d1529cef35f053056e34fa3f7626e62c5e133d31bd58fd6b5cb + checksum: 10/9ecdadbfc30f79f4ef930595681e39197e8545d32308b9e9a1829f3f67047521d44c66664386f6be62a75019abe67e5b37d08bd9ced83eeee28c0602f8bed5fa languageName: node linkType: hard "@storybook/core-server@file:../../../code/lib/core-server::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 - resolution: "@storybook/core-server@file:../../../code/lib/core-server#../../../code/lib/core-server::hash=2c034c&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/core-server@file:../../../code/lib/core-server#../../../code/lib/core-server::hash=e5bcbd&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@aw-web-design/x-default-browser": "npm:1.4.126" "@babel/core": "npm:^7.23.9" @@ -2817,9 +2813,11 @@ __metadata: "@types/semver": "npm:^7.3.4" better-opn: "npm:^3.0.2" chalk: "npm:^4.1.0" + cjs-module-lexer: "npm:^1.2.3" cli-table3: "npm:^0.6.1" compression: "npm:^1.7.4" detect-port: "npm:^1.3.0" + es-module-lexer: "npm:^1.5.0" express: "npm:^4.17.3" fs-extra: "npm:^11.1.0" globby: "npm:^14.0.1" @@ -2837,20 +2835,20 @@ __metadata: util-deprecate: "npm:^1.0.2" watchpack: "npm:^2.2.0" ws: "npm:^8.2.3" - checksum: 10/83c58dfa24e67e8ea10107858e723eebe3ebafa17580fbe9526022e02d1ba2467ef5e75ba3b303436c470a7151f183ad2d781b4cef1201a73cdf8f10d317cc57 + checksum: 10/1f4f9495d5d3158613966a1b84f8fb19d8fcee6d05f06c885d27315cf8416fe36b18c898d577ff2a5ad72157d7f7e63171d9b49bf0191cdc45519f224e5c5ad7 languageName: node linkType: hard "@storybook/core-webpack@file:../../../code/lib/core-webpack::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 - resolution: "@storybook/core-webpack@file:../../../code/lib/core-webpack#../../../code/lib/core-webpack::hash=d17dda&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/core-webpack@file:../../../code/lib/core-webpack#../../../code/lib/core-webpack::hash=1c6e9a&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/core-common": "workspace:*" "@storybook/node-logger": "workspace:*" "@storybook/types": "workspace:*" "@types/node": "npm:^18.0.0" ts-dedent: "npm:^2.0.0" - checksum: 10/2e56db38374ec96f01c00c0fa4c8a9090c1db1d56c8c611a93d1a0c60769aa6a2c751ed29fa6c3a3a7adbf99d457287908e8e01ee1848ab6c59f6837934d81bf + checksum: 10/af79e1e751158c7d47475736c052cf1fd6535fbaa131168141a06eef2ed5f178165771dba4e4995a567d5d180d4af33a4e75c573153ec39a838901cbb16aa4c1 languageName: node linkType: hard @@ -2866,7 +2864,7 @@ __metadata: "@storybook/csf-tools@file:../../../code/lib/csf-tools::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 - resolution: "@storybook/csf-tools@file:../../../code/lib/csf-tools#../../../code/lib/csf-tools::hash=69584a&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/csf-tools@file:../../../code/lib/csf-tools#../../../code/lib/csf-tools::hash=703916&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@babel/generator": "npm:^7.23.0" "@babel/parser": "npm:^7.23.0" @@ -2877,7 +2875,7 @@ __metadata: fs-extra: "npm:^11.1.0" recast: "npm:^0.23.5" ts-dedent: "npm:^2.0.0" - checksum: 10/7fce79866ace04b9a2bc78a66a03e27e6e770b4279e1b40c08634bce01eb57be22f5f192f73c6a65cc959c8910f63a3d35e31a71fe3ac821aea095722e324710 + checksum: 10/b597a467657223667710c73bcdd8d85e481a7c088e816539dd9513f2a42cb825e1d3fdd5461772d969201d2f6901280c30a9712d8711b7e12661a01d692f6871 languageName: node linkType: hard @@ -2908,7 +2906,7 @@ __metadata: "@storybook/docs-tools@file:../../../code/lib/docs-tools::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 - resolution: "@storybook/docs-tools@file:../../../code/lib/docs-tools#../../../code/lib/docs-tools::hash=4be280&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/docs-tools@file:../../../code/lib/docs-tools#../../../code/lib/docs-tools::hash=0f1a92&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/core-common": "workspace:*" "@storybook/preview-api": "workspace:*" @@ -2917,7 +2915,7 @@ __metadata: assert: "npm:^2.1.0" doctrine: "npm:^3.0.0" lodash: "npm:^4.17.21" - checksum: 10/121355441e903b87a0b9e590eca45a9b355af949148da6d23434f59b2aa753f00e0ffb8bc625d4ca91cf01e5e9782caceb561537d62729a2b2e240b6e640a0f4 + checksum: 10/6efb67c748bf9616313844cc482a31b49834d7b94767a544b7a5ed9a2e2d28c3d8a945162040b09f39af3f36c5288c00a83a67166c5d6a91b38875b8ff039acd languageName: node linkType: hard @@ -2940,7 +2938,7 @@ __metadata: "@storybook/instrumenter@file:../../../code/lib/instrumenter::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 - resolution: "@storybook/instrumenter@file:../../../code/lib/instrumenter#../../../code/lib/instrumenter::hash=ffe9d7&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/instrumenter@file:../../../code/lib/instrumenter#../../../code/lib/instrumenter::hash=da2c8f&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/channels": "workspace:*" "@storybook/client-logger": "workspace:*" @@ -2949,13 +2947,13 @@ __metadata: "@storybook/preview-api": "workspace:*" "@vitest/utils": "npm:^1.3.1" util: "npm:^0.12.4" - checksum: 10/84948fcfafe05e5934117e6c514a1788f9d146d28f749c11313e5f65c60f3f20be0e659e97f14a6b5ce405b01afa4941571f644a9cb88d8b3a956c2c79413723 + checksum: 10/a55b3615eee655ef969641128c408ad5a6f3a0196af135e4ea1aa9289b9a2c98d84b34c3a57a25ca8cf6e619faad5fe6440232097fb99ecf7fc0341395a8ce16 languageName: node linkType: hard "@storybook/manager-api@file:../../../code/lib/manager-api::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 - resolution: "@storybook/manager-api@file:../../../code/lib/manager-api#../../../code/lib/manager-api::hash=3e3312&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/manager-api@file:../../../code/lib/manager-api#../../../code/lib/manager-api::hash=4ab1f3&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/channels": "workspace:*" "@storybook/client-logger": "workspace:*" @@ -2972,20 +2970,20 @@ __metadata: store2: "npm:^2.14.2" telejson: "npm:^7.2.0" ts-dedent: "npm:^2.0.0" - checksum: 10/dcc92a7797ccf0f986ef2eb9077884799e4cc92603ca52a69071b4943ca149fd17d771c64bd1fd474c8287b4bda5385c7b24bada7acc9f7413deac152ec32157 + checksum: 10/ef8fe488bd220f3b895d26895e5a55a9bc110ee799f062f06d3c32dfa5ccd834c04074d96d8d4dc8c41336e322b2d3a4e0f93dc518442b22a9b36ddbfc92f990 languageName: node linkType: hard "@storybook/manager@file:../../../code/ui/manager::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 - resolution: "@storybook/manager@file:../../../code/ui/manager#../../../code/ui/manager::hash=257346&locator=portable-stories-nextjs%40workspace%3A." - checksum: 10/cdfcb34cdfaa7b7fbd388c54f2ecc85e0b4276ba1d915cc4b36dfcdd9ab8c5391815ae502089aa77e5dad8e51a064f86771969f20e9d10b5b14973d8e4e80a8b + resolution: "@storybook/manager@file:../../../code/ui/manager#../../../code/ui/manager::hash=645d43&locator=portable-stories-nextjs%40workspace%3A." + checksum: 10/9708627cc2f3a886c53dfec9402088f6b18b40ba8f472289d08c6b25c0e2e1e71871d6a79f19e57586751b287b55506c72372d1a0fab2efa89847719bf7c50f7 languageName: node linkType: hard "@storybook/nextjs@file:../../../code/frameworks/nextjs::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 - resolution: "@storybook/nextjs@file:../../../code/frameworks/nextjs#../../../code/frameworks/nextjs::hash=a5b14e&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/nextjs@file:../../../code/frameworks/nextjs#../../../code/frameworks/nextjs::hash=e17c4a&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@babel/core": "npm:^7.23.2" "@babel/plugin-syntax-bigint": "npm:^7.8.3" @@ -3042,20 +3040,20 @@ __metadata: optional: true webpack: optional: true - checksum: 10/86d287d5088a26adabce7b6ca5e56eebedf44df95bd07b1085253e095bea2d1d54898eed384ff7ca75866b00ffa36dd0a0c8f252edc1b4feb48725b6ca2ca851 + checksum: 10/c683698db1894bd29caa5bedf5f9bef0378e5e9e391b8d986144ecc95a625bc22574fab9e60d56703975a69c558baa1d6a652eabdf5760aafb1a8f23d97798d9 languageName: node linkType: hard "@storybook/node-logger@file:../../../code/lib/node-logger::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 - resolution: "@storybook/node-logger@file:../../../code/lib/node-logger#../../../code/lib/node-logger::hash=0d5379&locator=portable-stories-nextjs%40workspace%3A." - checksum: 10/ba3b49b55a325ec5d885898e5cd61370c19ad27a54315025c315bb08b6a09a64cfd3097748225be1f4b07aad42245a239ac9ba6e957c854ebb48718a43e5c215 + resolution: "@storybook/node-logger@file:../../../code/lib/node-logger#../../../code/lib/node-logger::hash=76992b&locator=portable-stories-nextjs%40workspace%3A." + checksum: 10/39a64d0cfc1ab16e4e808edc63fb9b5b76c038acb864b00d756260f9b5cf66116a758f6969dcc06daab8e69a8965fceef11c1d3cab8b524de1021b97dfd5b0e4 languageName: node linkType: hard "@storybook/preset-react-webpack@file:../../../code/presets/react-webpack::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 - resolution: "@storybook/preset-react-webpack@file:../../../code/presets/react-webpack#../../../code/presets/react-webpack::hash=3c5b01&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/preset-react-webpack@file:../../../code/presets/react-webpack#../../../code/presets/react-webpack::hash=f3317c&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/core-webpack": "workspace:*" "@storybook/docs-tools": "workspace:*" @@ -3078,13 +3076,13 @@ __metadata: peerDependenciesMeta: typescript: optional: true - checksum: 10/3baffd6ce4e642f852c370ccd4ae8098a5e730f4493ce43c8414f0b44e59c8bc8a99d9975cf5149b655f1808e54d274754044f45983b9f1be7c9a28f00931ac2 + checksum: 10/ee2981fac009bed8163403a304fc34ea8e6f307bd11c26dc6b9e1682e5116facfef0a1e6c59dafe179977b1f5e366912db7e6cac7530cd7074a7c2dd071bd91e languageName: node linkType: hard "@storybook/preview-api@file:../../../code/lib/preview-api::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 - resolution: "@storybook/preview-api@file:../../../code/lib/preview-api#../../../code/lib/preview-api::hash=2e825a&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/preview-api@file:../../../code/lib/preview-api#../../../code/lib/preview-api::hash=8ed046&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/channels": "workspace:*" "@storybook/client-logger": "workspace:*" @@ -3100,14 +3098,14 @@ __metadata: tiny-invariant: "npm:^1.3.1" ts-dedent: "npm:^2.0.0" util-deprecate: "npm:^1.0.2" - checksum: 10/8cb6df33b082d43c40daa182241aef50e583fc3c45d954730df0fbf305645926b2904b5177661a7a6294969014bda8c647f24960afd6114333e7c4bb00caa869 + checksum: 10/d5a6dc59d0cf9660869c7059567ffe09e1d590835aa781a5a94fc109ae67ae961f82db05a5e983b209e76a595ef3b9669f25897a174701fbcd2846a321ddd8e6 languageName: node linkType: hard "@storybook/preview@file:../../../code/lib/preview::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 - resolution: "@storybook/preview@file:../../../code/lib/preview#../../../code/lib/preview::hash=dccd68&locator=portable-stories-nextjs%40workspace%3A." - checksum: 10/834521c05fe7496e5d411dd9dc8cd3d2e3902bd101fcfe9e1caa2bace894fb6698d035fd190072a3cf2e294c86324315f30732c16bc30f75a1307feab53c16d1 + resolution: "@storybook/preview@file:../../../code/lib/preview#../../../code/lib/preview::hash=364559&locator=portable-stories-nextjs%40workspace%3A." + checksum: 10/cda37fa779743c888a72cc6329ce2d2d7d0171ae2c45d5854c90cf49a834c53e8334d36d95c255254440f4e6304251789f600c64a8f7925df1dc52e76aa18277 languageName: node linkType: hard @@ -3131,17 +3129,17 @@ __metadata: "@storybook/react-dom-shim@file:../../../code/lib/react-dom-shim::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 - resolution: "@storybook/react-dom-shim@file:../../../code/lib/react-dom-shim#../../../code/lib/react-dom-shim::hash=062b74&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/react-dom-shim@file:../../../code/lib/react-dom-shim#../../../code/lib/react-dom-shim::hash=4a12a1&locator=portable-stories-nextjs%40workspace%3A." peerDependencies: react: ^16.8.0 || ^17.0.0 || ^18.0.0 react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 - checksum: 10/ba63271a1f2d663cd53354798c490d306787b8033586a1062175b89fe4409759cbc959aa34dad12ff8f9bf2e9c141a391784eda81f23cbc9d13495128c9e1611 + checksum: 10/1328cd24014a00ea7b07c2359c0d6af7fd7973a8635e1e42ff8f462524ad0961fccfc3200f25f86e1fdd75d151f2f50038db70e88c5fb4c9ff7a93cfa387d4dd languageName: node linkType: hard "@storybook/react@file:../../../code/renderers/react::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 - resolution: "@storybook/react@file:../../../code/renderers/react#../../../code/renderers/react::hash=f60a6b&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/react@file:../../../code/renderers/react#../../../code/renderers/react::hash=e02d2f&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/client-logger": "workspace:*" "@storybook/docs-tools": "workspace:*" @@ -3171,18 +3169,18 @@ __metadata: peerDependenciesMeta: typescript: optional: true - checksum: 10/aa5c6739bfda7f26dcf2155cc61cc02c7387046fd3f1ef0029fa851b56024e5c81e69ef11c7a3f167bf66715161586abc2e29bbcdd5e3ea4ff9f0a34bbdac095 + checksum: 10/bc3d21e78b36c3fa4133532858d0b32f1686a8227096c1079c4575cc29461e32ebeb742b74671c0c43523b738ec8186a1368036d3e9406f6e4cf561a67fc2b79 languageName: node linkType: hard "@storybook/router@file:../../../code/lib/router::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 - resolution: "@storybook/router@file:../../../code/lib/router#../../../code/lib/router::hash=f3d914&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/router@file:../../../code/lib/router#../../../code/lib/router::hash=2f121e&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/client-logger": "workspace:*" memoizerific: "npm:^1.11.3" qs: "npm:^6.10.0" - checksum: 10/ae4218eb5cb26c1fd31b334a5431a228a4fd6f30bff1e4feb68c188317ceece7b91510c0c98c4a2d4fe419baebb2da21ea03d65dfe5123257befdb8ad9e0770c + checksum: 10/8fcccb54ade96e59e716e74c9985633d6ff4a9e025f80e83cb1c8c61443910cb3205d2b2753f7a455544b8d39be832c456db4ecff2e58753b0fd45a0f828b6b6 languageName: node linkType: hard @@ -3204,7 +3202,7 @@ __metadata: "@storybook/test@file:../../../code/lib/test::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 - resolution: "@storybook/test@file:../../../code/lib/test#../../../code/lib/test::hash=cd3c93&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/test@file:../../../code/lib/test#../../../code/lib/test::hash=4192cc&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/client-logger": "workspace:*" "@storybook/core-events": "workspace:*" @@ -3217,13 +3215,13 @@ __metadata: "@vitest/spy": "npm:^1.3.1" chai: "npm:^4.4.1" util: "npm:^0.12.4" - checksum: 10/783d04972494921194bbf60ba366dd62c81340257671acdb2693156dc64c709c64a51efc5fcf528c5a43d11167b2193d4582d24e5012e86407b64fbeda4c1c66 + checksum: 10/ae7add4394f4c590aaac487da53f0e335051560ecd18f0e831f6e62ffb15aad2299060f58e6149bf3637dd8ed48217e7ae3bd54b58a5ea35ab8fea3982aabbc2 languageName: node linkType: hard "@storybook/theming@file:../../../code/lib/theming::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 - resolution: "@storybook/theming@file:../../../code/lib/theming#../../../code/lib/theming::hash=9cc340&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/theming@file:../../../code/lib/theming#../../../code/lib/theming::hash=f968b9&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@emotion/use-insertion-effect-with-fallbacks": "npm:^1.0.1" "@storybook/client-logger": "workspace:*" @@ -3237,18 +3235,18 @@ __metadata: optional: true react-dom: optional: true - checksum: 10/e64850170fec111310877caa5a994ad53c9e072f324d0871d98e34f7d30688dadd7b24914441b3c50f3e9dc3f80909c60fa292e61f7fe6b257a6e19521a6c8e1 + checksum: 10/e603c954ca9f8a99cb82deac40c66f1fd71d170900f6c8a4e0f3157921b6b1da6c0d644519960312eefa1def67a99c50a4e4cd6c6e92fd121d99a9fcb822f6b9 languageName: node linkType: hard "@storybook/types@file:../../../code/lib/types::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.5 - resolution: "@storybook/types@file:../../../code/lib/types#../../../code/lib/types::hash=0524c9&locator=portable-stories-nextjs%40workspace%3A." + version: 8.1.0-alpha.6 + resolution: "@storybook/types@file:../../../code/lib/types#../../../code/lib/types::hash=c292b3&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/channels": "workspace:*" "@types/express": "npm:^4.7.0" file-system-cache: "npm:2.3.0" - checksum: 10/b2835c9386c22e535e62263fe03ead9c43a1c9762b6524ed8a9b1954887e8853311d580caa7711d57a1eecc9ce30cd7cfd9d814a45723e8434397b7adced1871 + checksum: 10/66db65b0e5185de6e9df7fb239b4a45beaf5e42d1f558ae465346b850f8626909aa7d415b49ed0ba0b837219ded47021c42bffff83f13eba29867ee8eafe7b0c languageName: node linkType: hard From b468667360a4a77697e270fc1eefa3d894051bbc Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Wed, 10 Apr 2024 16:03:45 +0200 Subject: [PATCH 39/82] Refactor cookies/headers a bit --- code/frameworks/nextjs/src/headers/cookies.ts | 30 ++--- code/frameworks/nextjs/src/headers/headers.ts | 31 ++--- code/frameworks/nextjs/src/preview.tsx | 5 - .../nextjs/yarn.lock | 126 +++++++++--------- 4 files changed, 90 insertions(+), 102 deletions(-) diff --git a/code/frameworks/nextjs/src/headers/cookies.ts b/code/frameworks/nextjs/src/headers/cookies.ts index 6466ad439c55..75022baaea26 100644 --- a/code/frameworks/nextjs/src/headers/cookies.ts +++ b/code/frameworks/nextjs/src/headers/cookies.ts @@ -20,7 +20,7 @@ const stringifyCookies = (map: Map) => { }; // Mostly copied from https://github.com/vercel/edge-runtime/blob/c25e2ded39104e2a3be82efc08baf8dc8fb436b3/packages/cookies/src/request-cookies.ts#L7 -class CookieStore implements RequestCookies { +class RequestCookiesMock implements RequestCookies { /** @internal */ private readonly _headers: HeadersStore; @@ -41,15 +41,6 @@ class CookieStore implements RequestCookies { return this._parsed[Symbol.iterator](); } - /** Used to restore the mocks. Called internally by @storybook/nextjs - * to ensure that the mocks are restored between stories. - * @internal - * */ - mockRestore = () => { - this.clear(); - this._headers.mockRestore(); - }; - get size(): number { return this._parsed.size; } @@ -122,11 +113,20 @@ class CookieStore implements RequestCookies { } } -let cookieStore: CookieStore; +let requestCookiesMock: RequestCookiesMock; -export const cookies = (): CookieStore => { - if (!cookieStore) { - cookieStore = new CookieStore(headers()); +export const cookies = fn(() => { + if (!requestCookiesMock) { + requestCookiesMock = new RequestCookiesMock(headers()); } - return cookieStore; + return requestCookiesMock; +}); + +const originalRestore = cookies.mockRestore.bind(null); + +// will be called automatically by the test loader +cookies.mockRestore = () => { + originalRestore(); + headers.mockRestore(); + requestCookiesMock = new RequestCookiesMock(headers()); }; diff --git a/code/frameworks/nextjs/src/headers/headers.ts b/code/frameworks/nextjs/src/headers/headers.ts index b71bece89695..13d55b95e7d4 100644 --- a/code/frameworks/nextjs/src/headers/headers.ts +++ b/code/frameworks/nextjs/src/headers/headers.ts @@ -5,17 +5,9 @@ import type { HeadersAdapter } from 'next/dist/server/web/spec-extension/adapter // Mostly copied from https://github.com/vercel/next.js/blob/763b9a660433ec5278a10e59d7ae89d4010ba212/packages/next/src/server/web/spec-extension/adapters/headers.ts#L20 // @ts-expect-error unfortunately the headers property is private (and not protected) in HeadersAdapter // and we can't access it so we need to redefine it, but that clashes with the type, hence the ts-expect-error comment. -export class HeadersStore extends Headers implements HeadersAdapter { +export class HeadersAdapterMock extends Headers implements HeadersAdapter { private headers: IncomingHttpHeaders = {}; - /** Used to restore the mocks. Called internally by @storybook/nextjs - * to ensure that the mocks are restored between stories. - * @internal - * */ - mockRestore = () => { - this.forEach((key: string) => this.delete(key)); - }; - /** * Merges a header value into a string. This stores multiple values as an * array, so we need to merge them into a string. @@ -68,7 +60,7 @@ export class HeadersStore extends Headers implements HeadersAdapter { ).mockName('headers().forEach'); public entries = fn( - function* (this: HeadersStore): IterableIterator<[string, string]> { + function* (this: HeadersAdapterMock): IterableIterator<[string, string]> { for (const key of Object.keys(this.headers)) { const name = key.toLowerCase(); // We assert here that this is a string because we got it from the @@ -81,7 +73,7 @@ export class HeadersStore extends Headers implements HeadersAdapter { ).mockName('headers().entries'); public keys = fn( - function* (this: HeadersStore): IterableIterator { + function* (this: HeadersAdapterMock): IterableIterator { for (const key of Object.keys(this.headers)) { const name = key.toLowerCase(); yield name; @@ -90,7 +82,7 @@ export class HeadersStore extends Headers implements HeadersAdapter { ).mockName('headers().keys'); public values = fn( - function* (this: HeadersStore): IterableIterator { + function* (this: HeadersAdapterMock): IterableIterator { for (const key of Object.keys(this.headers)) { // We assert here that this is a string because we got it from the // Object.keys() call above. @@ -106,11 +98,14 @@ export class HeadersStore extends Headers implements HeadersAdapter { } } -let headerStore: HeadersStore; +let headersAdapterMock: HeadersAdapterMock; -export const headers = (): HeadersStore => { - if (!headerStore) { - headerStore = new HeadersStore(); - } - return headerStore; +export const headers = () => { + if (!headersAdapterMock) headersAdapterMock = new HeadersAdapterMock(); + return headersAdapterMock; +}; + +// This fn is called by ./cookies to restore the headers in the right order +headers.mockRestore = () => { + headersAdapterMock = new HeadersAdapterMock(); }; diff --git a/code/frameworks/nextjs/src/preview.tsx b/code/frameworks/nextjs/src/preview.tsx index 7fb164d1f0de..cb4800a20a35 100644 --- a/code/frameworks/nextjs/src/preview.tsx +++ b/code/frameworks/nextjs/src/preview.tsx @@ -28,11 +28,6 @@ export const decorators: Addon_DecoratorFunction[] = [ HeadManagerDecorator, ]; -export const loaders: Addon_LoaderFunction = async () => { - cookies().mockRestore(); - headers().mockRestore(); -}; - export const parameters = { docs: { source: { diff --git a/test-storybooks/portable-stories-kitchen-sink/nextjs/yarn.lock b/test-storybooks/portable-stories-kitchen-sink/nextjs/yarn.lock index 7b54b424d5b9..ecd18b4c87b1 100644 --- a/test-storybooks/portable-stories-kitchen-sink/nextjs/yarn.lock +++ b/test-storybooks/portable-stories-kitchen-sink/nextjs/yarn.lock @@ -2379,7 +2379,7 @@ __metadata: "@storybook/addon-actions@file:../../../code/addons/actions::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 - resolution: "@storybook/addon-actions@file:../../../code/addons/actions#../../../code/addons/actions::hash=99649f&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/addon-actions@file:../../../code/addons/actions#../../../code/addons/actions::hash=a58e61&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/core-events": "workspace:*" "@storybook/global": "npm:^5.0.0" @@ -2387,7 +2387,7 @@ __metadata: dequal: "npm:^2.0.2" polished: "npm:^4.2.2" uuid: "npm:^9.0.0" - checksum: 10/79a14c7a74591e404e5ec22c2b6c9eaa03dd48bf3316470dd2642e3c70abd7c90b168fd350e729b617967c7d759df2ef0107534d218d1138b12e737c8a3e888e + checksum: 10/448ef050488c32b161113c707a9bd3e4eb734f7a23f350d7cb05dd30927785c19b0eb1b2f01f8f5f7106e8f46dcc2cfc9496a089dee818754dc83ae5403d8ee6 languageName: node linkType: hard @@ -2403,17 +2403,13 @@ __metadata: linkType: hard "@storybook/addon-controls@file:../../../code/addons/controls::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.5 - resolution: "@storybook/addon-controls@file:../../../code/addons/controls#../../../code/addons/controls::hash=358687&locator=portable-stories-nextjs%40workspace%3A." + version: 8.1.0-alpha.6 + resolution: "@storybook/addon-controls@file:../../../code/addons/controls#../../../code/addons/controls::hash=b28ca0&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/blocks": "workspace:*" - "@storybook/core-common": "workspace:*" - cjs-module-lexer: "npm:^1.2.3" - es-module-lexer: "npm:^1.5.0" - globby: "npm:^14.0.1" lodash: "npm:^4.17.21" ts-dedent: "npm:^2.0.0" - checksum: 10/feb098e18f942562769dfdfb4afc70655f67f11e6d14acf8e3ca4cfe9a22e09e89ede9f17be6ff1c07a56bed8a6fa1961fa044137a3e7a34471345bcccd091f2 + checksum: 10/f68a13e40bda392c1abc4cee2f2294fe98f11e8b34af8213532ae14027327efbafb3c9a8d75d300a3c58fb8d036a09f349e60cd064dd8dbde504add2945bab6b languageName: node linkType: hard @@ -2478,7 +2474,7 @@ __metadata: "@storybook/addon-interactions@file:../../../code/addons/interactions::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 - resolution: "@storybook/addon-interactions@file:../../../code/addons/interactions#../../../code/addons/interactions::hash=e7e04a&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/addon-interactions@file:../../../code/addons/interactions#../../../code/addons/interactions::hash=43a156&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/global": "npm:^5.0.0" "@storybook/instrumenter": "workspace:*" @@ -2486,7 +2482,7 @@ __metadata: "@storybook/types": "workspace:*" polished: "npm:^4.2.2" ts-dedent: "npm:^2.2.0" - checksum: 10/c66d7db9c1356903d444211962054b0a692a56f7ed5debcaa1f2e40fd57575975b8de86c2fb3be3a140e69cdc8f36b25f81be6e2ca55fb4facf826694d8be65f + checksum: 10/7ab50dfb5ccfde231d5ebde1e695512c5bb3706e5fe9bc580fbf23d5298ac7685e9648fbbc5f65605779954dc2f04ac1ce799e47b387d7eaaff5c9d7e8485602 languageName: node linkType: hard @@ -2590,7 +2586,7 @@ __metadata: "@storybook/builder-webpack5@file:../../../code/builders/builder-webpack5::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 - resolution: "@storybook/builder-webpack5@file:../../../code/builders/builder-webpack5#../../../code/builders/builder-webpack5::hash=983659&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/builder-webpack5@file:../../../code/builders/builder-webpack5#../../../code/builders/builder-webpack5::hash=c0c586&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/channels": "workspace:*" "@storybook/client-logger": "workspace:*" @@ -2629,26 +2625,26 @@ __metadata: peerDependenciesMeta: typescript: optional: true - checksum: 10/f84f41cd8ac80376ba603f4bb58da565f2b0e95ed37593279d85c4e5573de64633f10b7c6f2bd399f6d40057f1c97934760b969326520250f6de5efd07ac967b + checksum: 10/f4fe0264184b91d9a96baf2d35fc7c7c212b516901650c852f61c2aec2e6b7d81f6828b7ca7ce34f1623bab5cd838936d5877d982df0fa75cab577af78ce79ef languageName: node linkType: hard "@storybook/channels@file:../../../code/lib/channels::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 - resolution: "@storybook/channels@file:../../../code/lib/channels#../../../code/lib/channels::hash=3a33a2&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/channels@file:../../../code/lib/channels#../../../code/lib/channels::hash=413c8e&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/client-logger": "workspace:*" "@storybook/core-events": "workspace:*" "@storybook/global": "npm:^5.0.0" telejson: "npm:^7.2.0" tiny-invariant: "npm:^1.3.1" - checksum: 10/cda1b155f07fdac919a29e5a5287ae33ef4b3ed9c5c9816c29e17e3aa0dd788dc59da8775c40341ebcbd426ecf4f9ab629949dfe945834f48db7ca6053c062f1 + checksum: 10/6091e0ca5a19b46589877a6a17cac725ef863a8cdf61d812261673e16227490f8b80fcf26daa8924dbcaad434c91118ac399f3a610c7eec5ed094e7b0dfd0947 languageName: node linkType: hard "@storybook/cli@file:../../../code/lib/cli::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.5 - resolution: "@storybook/cli@file:../../../code/lib/cli#../../../code/lib/cli::hash=49e395&locator=portable-stories-nextjs%40workspace%3A." + version: 8.1.0-alpha.6 + resolution: "@storybook/cli@file:../../../code/lib/cli#../../../code/lib/cli::hash=2914c7&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@babel/core": "npm:^7.23.0" "@babel/types": "npm:^7.23.0" @@ -2689,16 +2685,16 @@ __metadata: bin: getstorybook: ./bin/index.js sb: ./bin/index.js - checksum: 10/37be78e7b11cfb9d712f9b948e3017665fcee970e1b3a4806f3f8307ea9db7e39f4b12fa919086a53efbe4e24a5e6196b2daafb958c11145e9e5d224fa70af55 + checksum: 10/6c967c34ef47687aa6ccbc70d82f22e375be79af1bf5eec3e1163c7774b65fda69a414c0aa712039062a9f184bc84d70e7fcf713712c28d4a121cc3848a32600 languageName: node linkType: hard "@storybook/client-logger@file:../../../code/lib/client-logger::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 - resolution: "@storybook/client-logger@file:../../../code/lib/client-logger#../../../code/lib/client-logger::hash=f3ac76&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/client-logger@file:../../../code/lib/client-logger#../../../code/lib/client-logger::hash=6408e1&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/global": "npm:^5.0.0" - checksum: 10/00b5cfade208483f5ec85c8aa59cabf402502a4cf1d9c3ee24a311a396e65ce97f0a3d4356aac9f413c8d84c9804ccb07aaeda6f3d553799e6e036960f4a2fbe + checksum: 10/ff3312279cf1bcaa3fcf91149951e4b7b6cba79ddbb0f80e488126a38bf1f7ceab4ad43cf40324b5ec9c3a8a786695042bc7cd47a0ae0a4835f06dddc5fb214e languageName: node linkType: hard @@ -2727,7 +2723,7 @@ __metadata: "@storybook/components@file:../../../code/ui/components::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 - resolution: "@storybook/components@file:../../../code/ui/components#../../../code/ui/components::hash=2c348b&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/components@file:../../../code/ui/components#../../../code/ui/components::hash=636348&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@radix-ui/react-slot": "npm:^1.0.2" "@storybook/client-logger": "workspace:*" @@ -2741,13 +2737,13 @@ __metadata: peerDependencies: react: ^16.8.0 || ^17.0.0 || ^18.0.0 react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 - checksum: 10/5ca7607bebb485e1dbb5c26f5dc3482e661d1646381be3ae26284c1e82cb0e2de51e05f5c4272ebe4d5fa6536aecb8dcd46e3da871aad90ba67a2e7e8987d278 + checksum: 10/02326f8b50631922d80cf64163abf4e723c5a1fd78c1ae1b276c95ff7992c0a826736badf1b7222038d83775b2937ef60de426aab7a6d5262a7b1152f5825abc languageName: node linkType: hard "@storybook/core-common@file:../../../code/lib/core-common::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.5 - resolution: "@storybook/core-common@file:../../../code/lib/core-common#../../../code/lib/core-common::hash=55d292&locator=portable-stories-nextjs%40workspace%3A." + version: 8.1.0-alpha.6 + resolution: "@storybook/core-common@file:../../../code/lib/core-common#../../../code/lib/core-common::hash=26f1e6&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/core-events": "workspace:*" "@storybook/csf-tools": "workspace:*" @@ -2777,22 +2773,22 @@ __metadata: tiny-invariant: "npm:^1.3.1" ts-dedent: "npm:^2.0.0" util: "npm:^0.12.4" - checksum: 10/e9308c3683651e2c925823e4bee0f91156ba544b0dc72ee6291810e7bd2e17690bce3f426c10d942fd5e18eb545589e5a3347cd02eb6ecceb058dad7a56bb775 + checksum: 10/7b692d71f9d170253ad376d67d364d351eff3d6f9b21fcf2471aefbf78fe4fdfb61a24f444630ad0bcbe3d560b92350271087e03f7e040cedbbfbb142ef0bc7b languageName: node linkType: hard "@storybook/core-events@file:../../../code/lib/core-events::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 - resolution: "@storybook/core-events@file:../../../code/lib/core-events#../../../code/lib/core-events::hash=840150&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/core-events@file:../../../code/lib/core-events#../../../code/lib/core-events::hash=8a7a19&locator=portable-stories-nextjs%40workspace%3A." dependencies: ts-dedent: "npm:^2.0.0" - checksum: 10/ccfa4397af9c114f401ac87d232f66c0cb37e7ee104647b36dd34e7bf598ff7e3a22fb18a6fb9d1529cef35f053056e34fa3f7626e62c5e133d31bd58fd6b5cb + checksum: 10/ac72fe623b6bf6a6897db1cce99539e67c75ce958d29c09b53930e696e7b6aa6d23cfe0fe41a3415b8f281e972b5c010efe89b9fd8783960a0c982088ecbe928 languageName: node linkType: hard "@storybook/core-server@file:../../../code/lib/core-server::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 - resolution: "@storybook/core-server@file:../../../code/lib/core-server#../../../code/lib/core-server::hash=2c034c&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/core-server@file:../../../code/lib/core-server#../../../code/lib/core-server::hash=e5bcbd&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@aw-web-design/x-default-browser": "npm:1.4.126" "@babel/core": "npm:^7.23.9" @@ -2817,9 +2813,11 @@ __metadata: "@types/semver": "npm:^7.3.4" better-opn: "npm:^3.0.2" chalk: "npm:^4.1.0" + cjs-module-lexer: "npm:^1.2.3" cli-table3: "npm:^0.6.1" compression: "npm:^1.7.4" detect-port: "npm:^1.3.0" + es-module-lexer: "npm:^1.5.0" express: "npm:^4.17.3" fs-extra: "npm:^11.1.0" globby: "npm:^14.0.1" @@ -2837,20 +2835,20 @@ __metadata: util-deprecate: "npm:^1.0.2" watchpack: "npm:^2.2.0" ws: "npm:^8.2.3" - checksum: 10/83c58dfa24e67e8ea10107858e723eebe3ebafa17580fbe9526022e02d1ba2467ef5e75ba3b303436c470a7151f183ad2d781b4cef1201a73cdf8f10d317cc57 + checksum: 10/1f4f9495d5d3158613966a1b84f8fb19d8fcee6d05f06c885d27315cf8416fe36b18c898d577ff2a5ad72157d7f7e63171d9b49bf0191cdc45519f224e5c5ad7 languageName: node linkType: hard "@storybook/core-webpack@file:../../../code/lib/core-webpack::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 - resolution: "@storybook/core-webpack@file:../../../code/lib/core-webpack#../../../code/lib/core-webpack::hash=d17dda&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/core-webpack@file:../../../code/lib/core-webpack#../../../code/lib/core-webpack::hash=1c6e9a&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/core-common": "workspace:*" "@storybook/node-logger": "workspace:*" "@storybook/types": "workspace:*" "@types/node": "npm:^18.0.0" ts-dedent: "npm:^2.0.0" - checksum: 10/2e56db38374ec96f01c00c0fa4c8a9090c1db1d56c8c611a93d1a0c60769aa6a2c751ed29fa6c3a3a7adbf99d457287908e8e01ee1848ab6c59f6837934d81bf + checksum: 10/af79e1e751158c7d47475736c052cf1fd6535fbaa131168141a06eef2ed5f178165771dba4e4995a567d5d180d4af33a4e75c573153ec39a838901cbb16aa4c1 languageName: node linkType: hard @@ -2866,7 +2864,7 @@ __metadata: "@storybook/csf-tools@file:../../../code/lib/csf-tools::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 - resolution: "@storybook/csf-tools@file:../../../code/lib/csf-tools#../../../code/lib/csf-tools::hash=69584a&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/csf-tools@file:../../../code/lib/csf-tools#../../../code/lib/csf-tools::hash=703916&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@babel/generator": "npm:^7.23.0" "@babel/parser": "npm:^7.23.0" @@ -2877,7 +2875,7 @@ __metadata: fs-extra: "npm:^11.1.0" recast: "npm:^0.23.5" ts-dedent: "npm:^2.0.0" - checksum: 10/7fce79866ace04b9a2bc78a66a03e27e6e770b4279e1b40c08634bce01eb57be22f5f192f73c6a65cc959c8910f63a3d35e31a71fe3ac821aea095722e324710 + checksum: 10/b597a467657223667710c73bcdd8d85e481a7c088e816539dd9513f2a42cb825e1d3fdd5461772d969201d2f6901280c30a9712d8711b7e12661a01d692f6871 languageName: node linkType: hard @@ -2908,7 +2906,7 @@ __metadata: "@storybook/docs-tools@file:../../../code/lib/docs-tools::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 - resolution: "@storybook/docs-tools@file:../../../code/lib/docs-tools#../../../code/lib/docs-tools::hash=4be280&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/docs-tools@file:../../../code/lib/docs-tools#../../../code/lib/docs-tools::hash=0f1a92&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/core-common": "workspace:*" "@storybook/preview-api": "workspace:*" @@ -2917,7 +2915,7 @@ __metadata: assert: "npm:^2.1.0" doctrine: "npm:^3.0.0" lodash: "npm:^4.17.21" - checksum: 10/121355441e903b87a0b9e590eca45a9b355af949148da6d23434f59b2aa753f00e0ffb8bc625d4ca91cf01e5e9782caceb561537d62729a2b2e240b6e640a0f4 + checksum: 10/6efb67c748bf9616313844cc482a31b49834d7b94767a544b7a5ed9a2e2d28c3d8a945162040b09f39af3f36c5288c00a83a67166c5d6a91b38875b8ff039acd languageName: node linkType: hard @@ -2940,7 +2938,7 @@ __metadata: "@storybook/instrumenter@file:../../../code/lib/instrumenter::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 - resolution: "@storybook/instrumenter@file:../../../code/lib/instrumenter#../../../code/lib/instrumenter::hash=ffe9d7&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/instrumenter@file:../../../code/lib/instrumenter#../../../code/lib/instrumenter::hash=da2c8f&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/channels": "workspace:*" "@storybook/client-logger": "workspace:*" @@ -2949,13 +2947,13 @@ __metadata: "@storybook/preview-api": "workspace:*" "@vitest/utils": "npm:^1.3.1" util: "npm:^0.12.4" - checksum: 10/84948fcfafe05e5934117e6c514a1788f9d146d28f749c11313e5f65c60f3f20be0e659e97f14a6b5ce405b01afa4941571f644a9cb88d8b3a956c2c79413723 + checksum: 10/a55b3615eee655ef969641128c408ad5a6f3a0196af135e4ea1aa9289b9a2c98d84b34c3a57a25ca8cf6e619faad5fe6440232097fb99ecf7fc0341395a8ce16 languageName: node linkType: hard "@storybook/manager-api@file:../../../code/lib/manager-api::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 - resolution: "@storybook/manager-api@file:../../../code/lib/manager-api#../../../code/lib/manager-api::hash=3e3312&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/manager-api@file:../../../code/lib/manager-api#../../../code/lib/manager-api::hash=4ab1f3&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/channels": "workspace:*" "@storybook/client-logger": "workspace:*" @@ -2972,20 +2970,20 @@ __metadata: store2: "npm:^2.14.2" telejson: "npm:^7.2.0" ts-dedent: "npm:^2.0.0" - checksum: 10/dcc92a7797ccf0f986ef2eb9077884799e4cc92603ca52a69071b4943ca149fd17d771c64bd1fd474c8287b4bda5385c7b24bada7acc9f7413deac152ec32157 + checksum: 10/ef8fe488bd220f3b895d26895e5a55a9bc110ee799f062f06d3c32dfa5ccd834c04074d96d8d4dc8c41336e322b2d3a4e0f93dc518442b22a9b36ddbfc92f990 languageName: node linkType: hard "@storybook/manager@file:../../../code/ui/manager::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 - resolution: "@storybook/manager@file:../../../code/ui/manager#../../../code/ui/manager::hash=257346&locator=portable-stories-nextjs%40workspace%3A." - checksum: 10/cdfcb34cdfaa7b7fbd388c54f2ecc85e0b4276ba1d915cc4b36dfcdd9ab8c5391815ae502089aa77e5dad8e51a064f86771969f20e9d10b5b14973d8e4e80a8b + resolution: "@storybook/manager@file:../../../code/ui/manager#../../../code/ui/manager::hash=645d43&locator=portable-stories-nextjs%40workspace%3A." + checksum: 10/9708627cc2f3a886c53dfec9402088f6b18b40ba8f472289d08c6b25c0e2e1e71871d6a79f19e57586751b287b55506c72372d1a0fab2efa89847719bf7c50f7 languageName: node linkType: hard "@storybook/nextjs@file:../../../code/frameworks/nextjs::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 - resolution: "@storybook/nextjs@file:../../../code/frameworks/nextjs#../../../code/frameworks/nextjs::hash=a5b14e&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/nextjs@file:../../../code/frameworks/nextjs#../../../code/frameworks/nextjs::hash=8cda79&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@babel/core": "npm:^7.23.2" "@babel/plugin-syntax-bigint": "npm:^7.8.3" @@ -3043,20 +3041,20 @@ __metadata: optional: true webpack: optional: true - checksum: 10/86d287d5088a26adabce7b6ca5e56eebedf44df95bd07b1085253e095bea2d1d54898eed384ff7ca75866b00ffa36dd0a0c8f252edc1b4feb48725b6ca2ca851 + checksum: 10/6a1ccdb267a0a9dfc99716dc16fff89d1ec49d4abcf56631185ec57107a8a7a500771e65174e65b7c2f14a5049a17777bb3934034d9ec7793c685a945c3c93f5 languageName: node linkType: hard "@storybook/node-logger@file:../../../code/lib/node-logger::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 - resolution: "@storybook/node-logger@file:../../../code/lib/node-logger#../../../code/lib/node-logger::hash=0d5379&locator=portable-stories-nextjs%40workspace%3A." - checksum: 10/ba3b49b55a325ec5d885898e5cd61370c19ad27a54315025c315bb08b6a09a64cfd3097748225be1f4b07aad42245a239ac9ba6e957c854ebb48718a43e5c215 + resolution: "@storybook/node-logger@file:../../../code/lib/node-logger#../../../code/lib/node-logger::hash=76992b&locator=portable-stories-nextjs%40workspace%3A." + checksum: 10/39a64d0cfc1ab16e4e808edc63fb9b5b76c038acb864b00d756260f9b5cf66116a758f6969dcc06daab8e69a8965fceef11c1d3cab8b524de1021b97dfd5b0e4 languageName: node linkType: hard "@storybook/preset-react-webpack@file:../../../code/presets/react-webpack::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 - resolution: "@storybook/preset-react-webpack@file:../../../code/presets/react-webpack#../../../code/presets/react-webpack::hash=3c5b01&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/preset-react-webpack@file:../../../code/presets/react-webpack#../../../code/presets/react-webpack::hash=f3317c&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/core-webpack": "workspace:*" "@storybook/docs-tools": "workspace:*" @@ -3079,13 +3077,13 @@ __metadata: peerDependenciesMeta: typescript: optional: true - checksum: 10/3baffd6ce4e642f852c370ccd4ae8098a5e730f4493ce43c8414f0b44e59c8bc8a99d9975cf5149b655f1808e54d274754044f45983b9f1be7c9a28f00931ac2 + checksum: 10/ee2981fac009bed8163403a304fc34ea8e6f307bd11c26dc6b9e1682e5116facfef0a1e6c59dafe179977b1f5e366912db7e6cac7530cd7074a7c2dd071bd91e languageName: node linkType: hard "@storybook/preview-api@file:../../../code/lib/preview-api::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 - resolution: "@storybook/preview-api@file:../../../code/lib/preview-api#../../../code/lib/preview-api::hash=2e825a&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/preview-api@file:../../../code/lib/preview-api#../../../code/lib/preview-api::hash=8ed046&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/channels": "workspace:*" "@storybook/client-logger": "workspace:*" @@ -3101,14 +3099,14 @@ __metadata: tiny-invariant: "npm:^1.3.1" ts-dedent: "npm:^2.0.0" util-deprecate: "npm:^1.0.2" - checksum: 10/8cb6df33b082d43c40daa182241aef50e583fc3c45d954730df0fbf305645926b2904b5177661a7a6294969014bda8c647f24960afd6114333e7c4bb00caa869 + checksum: 10/d5a6dc59d0cf9660869c7059567ffe09e1d590835aa781a5a94fc109ae67ae961f82db05a5e983b209e76a595ef3b9669f25897a174701fbcd2846a321ddd8e6 languageName: node linkType: hard "@storybook/preview@file:../../../code/lib/preview::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 - resolution: "@storybook/preview@file:../../../code/lib/preview#../../../code/lib/preview::hash=dccd68&locator=portable-stories-nextjs%40workspace%3A." - checksum: 10/834521c05fe7496e5d411dd9dc8cd3d2e3902bd101fcfe9e1caa2bace894fb6698d035fd190072a3cf2e294c86324315f30732c16bc30f75a1307feab53c16d1 + resolution: "@storybook/preview@file:../../../code/lib/preview#../../../code/lib/preview::hash=98d894&locator=portable-stories-nextjs%40workspace%3A." + checksum: 10/a528ce775b0cbd9572b870f14837025294d771f9717f6f8d6cbb8ccab6c05b6d3392d5a4211f09a8ec3073080beaef18d86ebeb1f00d137b49f71f15815d2d51 languageName: node linkType: hard @@ -3132,17 +3130,17 @@ __metadata: "@storybook/react-dom-shim@file:../../../code/lib/react-dom-shim::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 - resolution: "@storybook/react-dom-shim@file:../../../code/lib/react-dom-shim#../../../code/lib/react-dom-shim::hash=062b74&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/react-dom-shim@file:../../../code/lib/react-dom-shim#../../../code/lib/react-dom-shim::hash=4a12a1&locator=portable-stories-nextjs%40workspace%3A." peerDependencies: react: ^16.8.0 || ^17.0.0 || ^18.0.0 react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 - checksum: 10/ba63271a1f2d663cd53354798c490d306787b8033586a1062175b89fe4409759cbc959aa34dad12ff8f9bf2e9c141a391784eda81f23cbc9d13495128c9e1611 + checksum: 10/1328cd24014a00ea7b07c2359c0d6af7fd7973a8635e1e42ff8f462524ad0961fccfc3200f25f86e1fdd75d151f2f50038db70e88c5fb4c9ff7a93cfa387d4dd languageName: node linkType: hard "@storybook/react@file:../../../code/renderers/react::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 - resolution: "@storybook/react@file:../../../code/renderers/react#../../../code/renderers/react::hash=f60a6b&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/react@file:../../../code/renderers/react#../../../code/renderers/react::hash=bd65ea&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/client-logger": "workspace:*" "@storybook/docs-tools": "workspace:*" @@ -3172,18 +3170,18 @@ __metadata: peerDependenciesMeta: typescript: optional: true - checksum: 10/aa5c6739bfda7f26dcf2155cc61cc02c7387046fd3f1ef0029fa851b56024e5c81e69ef11c7a3f167bf66715161586abc2e29bbcdd5e3ea4ff9f0a34bbdac095 + checksum: 10/cd74c903f1353af291132c4a3a04f6dbdae6a131723d41f8cf38fb6181a0dc1c0b1a292e293338386f72b29f1f9cb2e4e660ab50ac61914e5236fad1f376a290 languageName: node linkType: hard "@storybook/router@file:../../../code/lib/router::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 - resolution: "@storybook/router@file:../../../code/lib/router#../../../code/lib/router::hash=f3d914&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/router@file:../../../code/lib/router#../../../code/lib/router::hash=2f121e&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/client-logger": "workspace:*" memoizerific: "npm:^1.11.3" qs: "npm:^6.10.0" - checksum: 10/ae4218eb5cb26c1fd31b334a5431a228a4fd6f30bff1e4feb68c188317ceece7b91510c0c98c4a2d4fe419baebb2da21ea03d65dfe5123257befdb8ad9e0770c + checksum: 10/8fcccb54ade96e59e716e74c9985633d6ff4a9e025f80e83cb1c8c61443910cb3205d2b2753f7a455544b8d39be832c456db4ecff2e58753b0fd45a0f828b6b6 languageName: node linkType: hard @@ -3205,7 +3203,7 @@ __metadata: "@storybook/test@file:../../../code/lib/test::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 - resolution: "@storybook/test@file:../../../code/lib/test#../../../code/lib/test::hash=cd3c93&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/test@file:../../../code/lib/test#../../../code/lib/test::hash=4192cc&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/client-logger": "workspace:*" "@storybook/core-events": "workspace:*" @@ -3218,13 +3216,13 @@ __metadata: "@vitest/spy": "npm:^1.3.1" chai: "npm:^4.4.1" util: "npm:^0.12.4" - checksum: 10/783d04972494921194bbf60ba366dd62c81340257671acdb2693156dc64c709c64a51efc5fcf528c5a43d11167b2193d4582d24e5012e86407b64fbeda4c1c66 + checksum: 10/ae7add4394f4c590aaac487da53f0e335051560ecd18f0e831f6e62ffb15aad2299060f58e6149bf3637dd8ed48217e7ae3bd54b58a5ea35ab8fea3982aabbc2 languageName: node linkType: hard "@storybook/theming@file:../../../code/lib/theming::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 - resolution: "@storybook/theming@file:../../../code/lib/theming#../../../code/lib/theming::hash=9cc340&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/theming@file:../../../code/lib/theming#../../../code/lib/theming::hash=f968b9&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@emotion/use-insertion-effect-with-fallbacks": "npm:^1.0.1" "@storybook/client-logger": "workspace:*" @@ -3238,18 +3236,18 @@ __metadata: optional: true react-dom: optional: true - checksum: 10/e64850170fec111310877caa5a994ad53c9e072f324d0871d98e34f7d30688dadd7b24914441b3c50f3e9dc3f80909c60fa292e61f7fe6b257a6e19521a6c8e1 + checksum: 10/e603c954ca9f8a99cb82deac40c66f1fd71d170900f6c8a4e0f3157921b6b1da6c0d644519960312eefa1def67a99c50a4e4cd6c6e92fd121d99a9fcb822f6b9 languageName: node linkType: hard "@storybook/types@file:../../../code/lib/types::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.5 - resolution: "@storybook/types@file:../../../code/lib/types#../../../code/lib/types::hash=0524c9&locator=portable-stories-nextjs%40workspace%3A." + version: 8.1.0-alpha.6 + resolution: "@storybook/types@file:../../../code/lib/types#../../../code/lib/types::hash=c292b3&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/channels": "workspace:*" "@types/express": "npm:^4.7.0" file-system-cache: "npm:2.3.0" - checksum: 10/b2835c9386c22e535e62263fe03ead9c43a1c9762b6524ed8a9b1954887e8853311d580caa7711d57a1eecc9ce30cd7cfd9d814a45723e8434397b7adced1871 + checksum: 10/66db65b0e5185de6e9df7fb239b4a45beaf5e42d1f558ae465346b850f8626909aa7d415b49ed0ba0b837219ded47021c42bffff83f13eba29867ee8eafe7b0c languageName: node linkType: hard From 74370476e80c0a253fdfb655cf95c2186fca223f Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Wed, 10 Apr 2024 16:33:43 +0200 Subject: [PATCH 40/82] fix lockfile conflicts --- .../nextjs/yarn.lock | 32 ++----------------- 1 file changed, 2 insertions(+), 30 deletions(-) diff --git a/test-storybooks/portable-stories-kitchen-sink/nextjs/yarn.lock b/test-storybooks/portable-stories-kitchen-sink/nextjs/yarn.lock index b8ebbeb27d8c..f2523cdcfdc0 100644 --- a/test-storybooks/portable-stories-kitchen-sink/nextjs/yarn.lock +++ b/test-storybooks/portable-stories-kitchen-sink/nextjs/yarn.lock @@ -2779,17 +2779,10 @@ __metadata: "@storybook/core-events@file:../../../code/lib/core-events::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 -<<<<<<< HEAD - resolution: "@storybook/core-events@file:../../../code/lib/core-events#../../../code/lib/core-events::hash=8a7a19&locator=portable-stories-nextjs%40workspace%3A." - dependencies: - ts-dedent: "npm:^2.0.0" - checksum: 10/ac72fe623b6bf6a6897db1cce99539e67c75ce958d29c09b53930e696e7b6aa6d23cfe0fe41a3415b8f281e972b5c010efe89b9fd8783960a0c982088ecbe928 -======= resolution: "@storybook/core-events@file:../../../code/lib/core-events#../../../code/lib/core-events::hash=3d1227&locator=portable-stories-nextjs%40workspace%3A." dependencies: ts-dedent: "npm:^2.0.0" checksum: 10/9ecdadbfc30f79f4ef930595681e39197e8545d32308b9e9a1829f3f67047521d44c66664386f6be62a75019abe67e5b37d08bd9ced83eeee28c0602f8bed5fa ->>>>>>> origin/yann/nextjs-headers-mocks languageName: node linkType: hard @@ -2990,11 +2983,7 @@ __metadata: "@storybook/nextjs@file:../../../code/frameworks/nextjs::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 -<<<<<<< HEAD - resolution: "@storybook/nextjs@file:../../../code/frameworks/nextjs#../../../code/frameworks/nextjs::hash=8cda79&locator=portable-stories-nextjs%40workspace%3A." -======= - resolution: "@storybook/nextjs@file:../../../code/frameworks/nextjs#../../../code/frameworks/nextjs::hash=e17c4a&locator=portable-stories-nextjs%40workspace%3A." ->>>>>>> origin/yann/nextjs-headers-mocks + resolution: "@storybook/nextjs@file:../../../code/frameworks/nextjs#../../../code/frameworks/nextjs::hash=54d145&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@babel/core": "npm:^7.23.2" "@babel/plugin-syntax-bigint": "npm:^7.8.3" @@ -3051,11 +3040,7 @@ __metadata: optional: true webpack: optional: true -<<<<<<< HEAD - checksum: 10/6a1ccdb267a0a9dfc99716dc16fff89d1ec49d4abcf56631185ec57107a8a7a500771e65174e65b7c2f14a5049a17777bb3934034d9ec7793c685a945c3c93f5 -======= - checksum: 10/c683698db1894bd29caa5bedf5f9bef0378e5e9e391b8d986144ecc95a625bc22574fab9e60d56703975a69c558baa1d6a652eabdf5760aafb1a8f23d97798d9 ->>>>>>> origin/yann/nextjs-headers-mocks + checksum: 10/0cf1a6cb4f106b7073a4932f2b2432b946bae36378fe53443eda98a867c2a1cd4271ea34d737016ea9a21c43f71d70202894084232164444d12784bd81726ebc languageName: node linkType: hard @@ -3119,13 +3104,8 @@ __metadata: "@storybook/preview@file:../../../code/lib/preview::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 -<<<<<<< HEAD - resolution: "@storybook/preview@file:../../../code/lib/preview#../../../code/lib/preview::hash=98d894&locator=portable-stories-nextjs%40workspace%3A." - checksum: 10/a528ce775b0cbd9572b870f14837025294d771f9717f6f8d6cbb8ccab6c05b6d3392d5a4211f09a8ec3073080beaef18d86ebeb1f00d137b49f71f15815d2d51 -======= resolution: "@storybook/preview@file:../../../code/lib/preview#../../../code/lib/preview::hash=364559&locator=portable-stories-nextjs%40workspace%3A." checksum: 10/cda37fa779743c888a72cc6329ce2d2d7d0171ae2c45d5854c90cf49a834c53e8334d36d95c255254440f4e6304251789f600c64a8f7925df1dc52e76aa18277 ->>>>>>> origin/yann/nextjs-headers-mocks languageName: node linkType: hard @@ -3159,11 +3139,7 @@ __metadata: "@storybook/react@file:../../../code/renderers/react::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 -<<<<<<< HEAD - resolution: "@storybook/react@file:../../../code/renderers/react#../../../code/renderers/react::hash=bd65ea&locator=portable-stories-nextjs%40workspace%3A." -======= resolution: "@storybook/react@file:../../../code/renderers/react#../../../code/renderers/react::hash=e02d2f&locator=portable-stories-nextjs%40workspace%3A." ->>>>>>> origin/yann/nextjs-headers-mocks dependencies: "@storybook/client-logger": "workspace:*" "@storybook/docs-tools": "workspace:*" @@ -3193,11 +3169,7 @@ __metadata: peerDependenciesMeta: typescript: optional: true -<<<<<<< HEAD - checksum: 10/cd74c903f1353af291132c4a3a04f6dbdae6a131723d41f8cf38fb6181a0dc1c0b1a292e293338386f72b29f1f9cb2e4e660ab50ac61914e5236fad1f376a290 -======= checksum: 10/bc3d21e78b36c3fa4133532858d0b32f1686a8227096c1079c4575cc29461e32ebeb742b74671c0c43523b738ec8186a1368036d3e9406f6e4cf561a67fc2b79 ->>>>>>> origin/yann/nextjs-headers-mocks languageName: node linkType: hard From 0b7a912fb0c4ec0768fbff2849fe568c596e8b8d Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Wed, 10 Apr 2024 20:12:26 +0200 Subject: [PATCH 41/82] fix create sandbox issue --- code/lib/test/template/stories/module-mocking.stories.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/code/lib/test/template/stories/module-mocking.stories.ts b/code/lib/test/template/stories/module-mocking.stories.ts index d81e86715e02..f0ddc417fbc6 100644 --- a/code/lib/test/template/stories/module-mocking.stories.ts +++ b/code/lib/test/template/stories/module-mocking.stories.ts @@ -1,5 +1,6 @@ import { global as globalThis } from '@storybook/global'; -// @ts-expect-error This alias is set in the sandbox +// 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. // eslint-disable-next-line import/no-unresolved import { foo } from '#utils'; import { expect, fn, isMockFunction, mocked } from '@storybook/test'; From 707b7b088272f46401de91b1511537a4242758b9 Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Thu, 11 Apr 2024 07:46:02 +0200 Subject: [PATCH 42/82] fix e2e test --- code/e2e-tests/framework-nextjs.spec.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/code/e2e-tests/framework-nextjs.spec.ts b/code/e2e-tests/framework-nextjs.spec.ts index 61233dd5ac25..e8d141d5ff5b 100644 --- a/code/e2e-tests/framework-nextjs.spec.ts +++ b/code/e2e-tests/framework-nextjs.spec.ts @@ -56,7 +56,7 @@ test.describe('Next.js', () => { await sbPage.viewAddonPanel('Actions'); const logItem = await page.locator('#storybook-panel-root #panel-tab-content', { - hasText: `nextNavigation.${action}`, + hasText: `useRouter().${action}`, }); await expect(logItem).toBeVisible(); }); @@ -91,7 +91,7 @@ test.describe('Next.js', () => { await sbPage.viewAddonPanel('Actions'); const logItem = await page.locator('#storybook-panel-root #panel-tab-content', { - hasText: `nextRouter.${action}`, + hasText: `useRouter().${action}`, }); await expect(logItem).toBeVisible(); }); From 1cca11e06861b5ec394efd229b5dd68fbdcb7c83 Mon Sep 17 00:00:00 2001 From: Jeppe Reinhold Date: Thu, 11 Apr 2024 12:21:18 +0200 Subject: [PATCH 43/82] fix tests to match new rerender pipeline --- .../modules/preview-web/PreviewWeb.test.ts | 93 ++++++++----------- 1 file changed, 38 insertions(+), 55 deletions(-) diff --git a/code/lib/preview-api/src/modules/preview-web/PreviewWeb.test.ts b/code/lib/preview-api/src/modules/preview-web/PreviewWeb.test.ts index aac800d6ac52..23329caf5d29 100644 --- a/code/lib/preview-api/src/modules/preview-web/PreviewWeb.test.ts +++ b/code/lib/preview-api/src/modules/preview-web/PreviewWeb.test.ts @@ -907,64 +907,74 @@ describe('PreviewWeb', () => { }); describe('while story is still rendering', () => { - it('runs loaders again', async () => { + it('runs loaders again after renderToCanvas is done', async () => { + // Arrange - set up a gate to control when the loaders run const [loadersRanGate, openLoadersRanGate] = createGate(); const [blockLoadersGate, openBlockLoadersGate] = createGate(); document.location.search = '?id=component-one--a'; - componentOneExports.default.loaders[0].mockImplementationOnce(async () => { + componentOneExports.default.loaders[0].mockImplementationOnce(async (input) => { openLoadersRanGate(); return blockLoadersGate; }); + // Act - render the first time await new PreviewWeb(importFn, getProjectAnnotations).ready(); await loadersRanGate; + // Assert - loader to be called the first time + expect(componentOneExports.default.loaders[0]).toHaveBeenCalledOnce(); expect(componentOneExports.default.loaders[0]).toHaveBeenCalledWith( expect.objectContaining({ args: { foo: 'a', one: 'mapped-1' }, }) ); - componentOneExports.default.loaders[0].mockClear(); + // Act - update the args (while loader is still running) emitter.emit(UPDATE_STORY_ARGS, { storyId: 'component-one--a', updatedArgs: { new: 'arg' }, }); - await waitForRender(); - expect(componentOneExports.default.loaders[0]).toHaveBeenCalledWith( - expect.objectContaining({ - args: { foo: 'a', new: 'arg', one: 'mapped-1' }, - }) - ); + // Arrange - open the gate to let the loader finish and wait for render + openBlockLoadersGate({ l: 8 }); + await waitForRender(); - // Story gets rendered with updated args - expect(projectAnnotations.renderToCanvas).toHaveBeenCalledTimes(1); + // Assert - renderToCanvas to be called the first time with initial args + expect(projectAnnotations.renderToCanvas).toHaveBeenCalledOnce(); expect(projectAnnotations.renderToCanvas).toHaveBeenCalledWith( expect.objectContaining({ - forceRemount: true, // Wasn't yet rendered so we need to force remount + forceRemount: true, storyContext: expect.objectContaining({ - loaded: { l: 7 }, // This is the value returned by the *second* loader call + loaded: { l: 8 }, // This is the value returned by the *first* loader call args: { foo: 'a', new: 'arg', one: 'mapped-1' }, }), }), 'story-element' ); + // Assert - loaders are not run again yet + expect(componentOneExports.default.loaders[0]).toHaveBeenCalledOnce(); - // Now let the first loader call resolve + // Arrange - wait for loading and rendering to finish a second time mockChannel.emit.mockClear(); - projectAnnotations.renderToCanvas.mockClear(); - openBlockLoadersGate({ l: 8 }); await waitForRender(); + // Assert - loader is called a second time with updated args + await vi.waitFor(() => { + expect(projectAnnotations.renderToCanvas).toHaveBeenCalledTimes(2); + expect(componentOneExports.default.loaders[0]).toHaveBeenCalledWith( + expect.objectContaining({ + args: { foo: 'a', new: 'arg', one: 'mapped-1' }, + }) + ); + }); - // Now the first call comes through, but picks up the new args - // Note this isn't a particularly realistic case (the second loader being quicker than the first) - expect(projectAnnotations.renderToCanvas).toHaveBeenCalledTimes(1); + // Assert - renderToCanvas is called a second time with updated args + expect(projectAnnotations.renderToCanvas).toHaveBeenCalledTimes(2); expect(projectAnnotations.renderToCanvas).toHaveBeenCalledWith( expect.objectContaining({ + forceRemount: false, storyContext: expect.objectContaining({ - loaded: { l: 8 }, + loaded: { l: 7 }, // This is the value returned by the *second* loader call args: { foo: 'a', new: 'arg', one: 'mapped-1' }, }), }), @@ -972,7 +982,7 @@ describe('PreviewWeb', () => { ); }); - it('renders a second time if renderToCanvas is running', async () => { + it('renders a second time after the already running renderToCanvas is done', async () => { const [gate, openGate] = createGate(); document.location.search = '?id=component-one--a'; @@ -986,11 +996,9 @@ describe('PreviewWeb', () => { updatedArgs: { new: 'arg' }, }); - // Now let the renderToCanvas call resolve + // Now let the first renderToCanvas call resolve openGate(); - await waitForRender(); - - expect(projectAnnotations.renderToCanvas).toHaveBeenCalledTimes(2); + expect(projectAnnotations.renderToCanvas).toHaveBeenCalledTimes(1); expect(projectAnnotations.renderToCanvas).toHaveBeenCalledWith( expect.objectContaining({ forceRemount: true, @@ -1001,39 +1009,14 @@ describe('PreviewWeb', () => { }), 'story-element' ); - expect(projectAnnotations.renderToCanvas).toHaveBeenCalledWith( - expect.objectContaining({ - forceRemount: false, - storyContext: expect.objectContaining({ - loaded: { l: 7 }, - args: { foo: 'a', new: 'arg', one: 'mapped-1' }, - }), - }), - 'story-element' - ); - }); - it('works if it is called directly from inside non async renderToCanvas', async () => { - document.location.search = '?id=component-one--a'; - projectAnnotations.renderToCanvas.mockImplementation(() => { - emitter.emit(UPDATE_STORY_ARGS, { - storyId: 'component-one--a', - updatedArgs: { new: 'arg' }, - }); - }); - await createAndRenderPreview(); + // Wait for the second render to finish + mockChannel.emit.mockClear(); + await waitForRender(); + await waitForRenderPhase('rendering'); + // Expect the second render to have the updated args expect(projectAnnotations.renderToCanvas).toHaveBeenCalledTimes(2); - expect(projectAnnotations.renderToCanvas).toHaveBeenCalledWith( - expect.objectContaining({ - forceRemount: true, - storyContext: expect.objectContaining({ - loaded: { l: 7 }, - args: { foo: 'a', one: 'mapped-1' }, - }), - }), - 'story-element' - ); expect(projectAnnotations.renderToCanvas).toHaveBeenCalledWith( expect.objectContaining({ forceRemount: false, From 8ff588c0795d0ca5b511c3b914bfcfc212481610 Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Thu, 11 Apr 2024 14:10:27 +0200 Subject: [PATCH 44/82] Implement beforeEach cleanup callbacks --- code/addons/links/package.json | 2 +- code/lib/codemod/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 | 37 ++++++++++++++----- .../src/modules/store/StoryStore.test.ts | 2 +- .../src/modules/store/StoryStore.ts | 15 +++++++- .../src/modules/store/csf/portable-stories.ts | 10 ++++- .../src/modules/store/csf/prepareStory.ts | 18 +++++---- code/lib/source-loader/package.json | 2 +- code/lib/types/package.json | 2 +- code/lib/types/src/modules/story.ts | 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 | 32 ++++++++-------- 19 files changed, 92 insertions(+), 48 deletions(-) diff --git a/code/addons/links/package.json b/code/addons/links/package.json index 185e175e8b4d..048e4517d406 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.4--canary.82.941efd8.0", + "@storybook/csf": "0.1.4--canary.82.5e73744.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 a211cb45bb62..7d278075a5ec 100644 --- a/code/lib/codemod/package.json +++ b/code/lib/codemod/package.json @@ -57,7 +57,7 @@ "@babel/core": "^7.23.2", "@babel/preset-env": "^7.23.2", "@babel/types": "^7.23.0", - "@storybook/csf": "0.1.4--canary.82.941efd8.0", + "@storybook/csf": "0.1.4--canary.82.5e73744.0", "@storybook/csf-tools": "workspace:*", "@storybook/node-logger": "workspace:*", "@storybook/types": "workspace:*", diff --git a/code/lib/core-server/package.json b/code/lib/core-server/package.json index 26d8f722de51..b0d66fa7a13b 100644 --- a/code/lib/core-server/package.json +++ b/code/lib/core-server/package.json @@ -62,7 +62,7 @@ "@storybook/channels": "workspace:*", "@storybook/core-common": "workspace:*", "@storybook/core-events": "workspace:*", - "@storybook/csf": "0.1.4--canary.82.941efd8.0", + "@storybook/csf": "0.1.4--canary.82.5e73744.0", "@storybook/csf-tools": "workspace:*", "@storybook/docs-mdx": "3.0.0", "@storybook/global": "^5.0.0", diff --git a/code/lib/csf-tools/package.json b/code/lib/csf-tools/package.json index a32324b49302..b0f2a794d498 100644 --- a/code/lib/csf-tools/package.json +++ b/code/lib/csf-tools/package.json @@ -46,7 +46,7 @@ "@babel/parser": "^7.23.0", "@babel/traverse": "^7.23.2", "@babel/types": "^7.23.0", - "@storybook/csf": "0.1.4--canary.82.941efd8.0", + "@storybook/csf": "0.1.4--canary.82.5e73744.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 2040c41a358a..222964c69636 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.4--canary.82.941efd8.0", + "@storybook/csf": "0.1.4--canary.82.5e73744.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 d6be9113e22c..63457c32639b 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.4--canary.82.941efd8.0", + "@storybook/csf": "0.1.4--canary.82.5e73744.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 72b554d38cd2..12ec070dc339 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 @@ -27,6 +27,7 @@ const { AbortController } = globalThis; export type RenderPhase = | 'preparing' | 'loading' + | 'beforeEach' | 'rendering' | 'playing' | 'played' @@ -101,7 +102,7 @@ export class StoryRender implements Render); + await this.store.cleanupStory(this.story as PreparedStory); throw PREPARE_ABORTED; } } @@ -120,7 +121,7 @@ export class StoryRender implements Render implements Render implements Render); }); - if (abortSignal.aborted) { - return; - } + if (abortSignal.aborted) return; const renderStoryContext: StoryContext = { ...loadedContext!, @@ -189,6 +198,14 @@ export class StoryRender implements Render { + const cleanupCallbacks = await applyBeforeEach(renderStoryContext); + this.store.addCleanupCallbacks(story, cleanupCallbacks); + }); + + if (abortSignal.aborted) return; + const renderContext: RenderContext = { componentId, title, @@ -290,8 +307,10 @@ export class StoryRender implements Render { const { hooks } = store.getStoryContext(story) as { hooks: HooksContext }; hooks.clean = vi.fn(); - store.cleanupStory(story); + await store.cleanupStory(story); expect(hooks.clean).toHaveBeenCalled(); }); }); diff --git a/code/lib/preview-api/src/modules/store/StoryStore.ts b/code/lib/preview-api/src/modules/store/StoryStore.ts index 123ea5b984c8..ebfe582cdfe2 100644 --- a/code/lib/preview-api/src/modules/store/StoryStore.ts +++ b/code/lib/preview-api/src/modules/store/StoryStore.ts @@ -40,6 +40,7 @@ import { normalizeProjectAnnotations, prepareContext, } from './csf'; +import type { CleanupCallback } from '@storybook/csf'; // TODO -- what are reasonable values for these? const CSF_CACHE_SIZE = 1000; @@ -56,6 +57,8 @@ export class StoryStore { hooks: Record>; + cleanupCallbacks: Record; + cachedCSFFiles?: Record>; processCSFFileWithCache: typeof processCSFFile; @@ -79,6 +82,7 @@ export class StoryStore { this.args = new ArgsStore(); this.globals = new GlobalsStore({ globals, globalTypes }); this.hooks = {}; + this.cleanupCallbacks = {}; // We use a cache for these two functions for two reasons: // 1. For performance @@ -234,8 +238,17 @@ export class StoryStore { }); } - cleanupStory(story: PreparedStory): void { + addCleanupCallbacks(story: PreparedStory, callbacks: CleanupCallback[]) { + this.cleanupCallbacks[story.id] = callbacks; + } + + async cleanupStory(story: PreparedStory): Promise { this.hooks[story.id].clean(); + + const callbacks = this.cleanupCallbacks[story.id]; + if (callbacks) for (const callback of [...callbacks].reverse()) await callback(); + + delete this.cleanupCallbacks[story.id]; } extract( 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 57e8fcda9a2b..42dc379d6487 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 @@ -1,6 +1,6 @@ /* eslint-disable no-underscore-dangle */ /* eslint-disable @typescript-eslint/naming-convention */ -import { isExportStory } from '@storybook/csf'; +import { type CleanupCallback, isExportStory } from '@storybook/csf'; import dedent from 'ts-dedent'; import type { Renderer, @@ -47,6 +47,8 @@ export function setProjectAnnotations( globalProjectAnnotations = composeConfigs(annotations.map(extractAnnotation)); } +const cleanupCallbacks: CleanupCallback[] = []; + export function composeStory( storyAnnotations: LegacyStoryAnnotationsOrFn, componentAnnotations: ComponentAnnotations, @@ -126,8 +128,14 @@ export function composeStory { + // First run any registerd cleanup function + for (const callback of [...cleanupCallbacks].reverse()) await callback(); + cleanupCallbacks.length = 0; + const loadedContext = await story.applyLoaders(context); context.loaded = loadedContext.loaded; + + cleanupCallbacks.push(...(await story.applyBeforeEach(context))); }, args: story.initialArgs as Partial, parameters: story.parameters as Parameters, diff --git a/code/lib/preview-api/src/modules/store/csf/prepareStory.ts b/code/lib/preview-api/src/modules/store/csf/prepareStory.ts index 96ade956ea05..22b2ede3f51c 100644 --- a/code/lib/preview-api/src/modules/store/csf/prepareStory.ts +++ b/code/lib/preview-api/src/modules/store/csf/prepareStory.ts @@ -20,7 +20,7 @@ import type { StoryContextForLoaders, StrictArgTypes, } from '@storybook/types'; -import { includeConditionalArg } from '@storybook/csf'; +import { type CleanupCallback, includeConditionalArg } from '@storybook/csf'; import { applyHooks } from '../../addons'; import { combineParameters } from '../parameters'; @@ -66,19 +66,20 @@ export function prepareStory( updatedContext = { ...updatedContext, loaded: { ...updatedContext.loaded, ...loaded } }; } - // TODO: What to do with those? - const cleanups = new Array<() => unknown>(); + return updatedContext; + }; + + const applyBeforeEach = async (context: StoryContext): Promise => { + const cleanupCallbacks = new Array<() => unknown>(); for (const beforeEach of [ ...normalizeArrays(projectAnnotations.beforeEach), ...normalizeArrays(componentAnnotations.beforeEach), ...normalizeArrays(storyAnnotations.beforeEach), ]) { - const cleanup = await beforeEach(updatedContext); - if (cleanup) { - cleanups.push(cleanup); - } + const cleanup = await beforeEach(context); + if (cleanup) cleanupCallbacks.push(cleanup); } - return updatedContext; + return cleanupCallbacks; }; const undecoratedStoryFn = (context: StoryContext) => @@ -130,6 +131,7 @@ export function prepareStory( undecoratedStoryFn, unboundStoryFn, applyLoaders, + applyBeforeEach, playFunction, }; } diff --git a/code/lib/source-loader/package.json b/code/lib/source-loader/package.json index 82f7b21021a0..4514307f350e 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.4--canary.82.941efd8.0", + "@storybook/csf": "0.1.4--canary.82.5e73744.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 70f8e859c2ff..81d3c83827f8 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.4--canary.82.941efd8.0", + "@storybook/csf": "0.1.4--canary.82.5e73744.0", "@types/fs-extra": "^11.0.1", "@types/node": "^18.0.0", "typescript": "^5.3.2" diff --git a/code/lib/types/src/modules/story.ts b/code/lib/types/src/modules/story.ts index ee34ad43ce79..041aaed2e709 100644 --- a/code/lib/types/src/modules/story.ts +++ b/code/lib/types/src/modules/story.ts @@ -3,6 +3,7 @@ import type { ProjectAnnotations as CsfProjectAnnotations, DecoratorFunction, LoaderFunction, + CleanupCallback, } from '@storybook/csf'; import type { @@ -103,6 +104,7 @@ export type PreparedStory = applyLoaders: ( context: StoryContextForLoaders ) => Promise & { loaded: StoryContext['loaded'] }>; + applyBeforeEach: (context: StoryContext) => Promise; playFunction?: (context: StoryContext) => Promise | void; }; diff --git a/code/package.json b/code/package.json index 080ffc86d037..558aee0c82f5 100644 --- a/code/package.json +++ b/code/package.json @@ -127,7 +127,7 @@ "@storybook/core-events": "workspace:*", "@storybook/core-server": "workspace:*", "@storybook/core-webpack": "workspace:*", - "@storybook/csf": "0.1.4--canary.82.941efd8.0", + "@storybook/csf": "0.1.4--canary.82.5e73744.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 a87fa2768637..5d2c95108b0f 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.4--canary.82.941efd8.0", + "@storybook/csf": "0.1.4--canary.82.5e73744.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 545beca9f679..cfb0eaca5bf0 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.4--canary.82.941efd8.0", + "@storybook/csf": "0.1.4--canary.82.5e73744.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 e06d7ec283c9..981097fc67b4 100644 --- a/code/ui/components/package.json +++ b/code/ui/components/package.json @@ -61,7 +61,7 @@ "dependencies": { "@radix-ui/react-slot": "^1.0.2", "@storybook/client-logger": "workspace:*", - "@storybook/csf": "0.1.4--canary.82.941efd8.0", + "@storybook/csf": "0.1.4--canary.82.5e73744.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 4614eb8d61a1..188f18ea2dc1 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -4947,7 +4947,7 @@ __metadata: dependencies: "@storybook/client-logger": "workspace:*" "@storybook/core-events": "workspace:*" - "@storybook/csf": "npm:0.1.4--canary.82.941efd8.0" + "@storybook/csf": "npm:0.1.4--canary.82.5e73744.0" "@storybook/global": "npm:^5.0.0" "@storybook/manager-api": "workspace:*" "@storybook/preview-api": "workspace:*" @@ -5215,7 +5215,7 @@ __metadata: "@storybook/client-logger": "workspace:*" "@storybook/components": "workspace:*" "@storybook/core-events": "workspace:*" - "@storybook/csf": "npm:0.1.4--canary.82.941efd8.0" + "@storybook/csf": "npm:0.1.4--canary.82.5e73744.0" "@storybook/docs-tools": "workspace:*" "@storybook/global": "npm:^5.0.0" "@storybook/icons": "npm:^1.2.5" @@ -5446,7 +5446,7 @@ __metadata: "@babel/core": "npm:^7.23.2" "@babel/preset-env": "npm:^7.23.2" "@babel/types": "npm:^7.23.0" - "@storybook/csf": "npm:0.1.4--canary.82.941efd8.0" + "@storybook/csf": "npm:0.1.4--canary.82.5e73744.0" "@storybook/csf-tools": "workspace:*" "@storybook/node-logger": "workspace:*" "@storybook/types": "workspace:*" @@ -5482,7 +5482,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.4--canary.82.941efd8.0" + "@storybook/csf": "npm:0.1.4--canary.82.5e73744.0" "@storybook/global": "npm:^5.0.0" "@storybook/icons": "npm:^1.2.5" "@storybook/test": "workspace:*" @@ -5575,7 +5575,7 @@ __metadata: "@storybook/channels": "workspace:*" "@storybook/core-common": "workspace:*" "@storybook/core-events": "workspace:*" - "@storybook/csf": "npm:0.1.4--canary.82.941efd8.0" + "@storybook/csf": "npm:0.1.4--canary.82.5e73744.0" "@storybook/csf-tools": "workspace:*" "@storybook/docs-mdx": "npm:3.0.0" "@storybook/global": "npm:^5.0.0" @@ -5657,7 +5657,7 @@ __metadata: "@babel/parser": "npm:^7.23.0" "@babel/traverse": "npm:^7.23.2" "@babel/types": "npm:^7.23.0" - "@storybook/csf": "npm:0.1.4--canary.82.941efd8.0" + "@storybook/csf": "npm:0.1.4--canary.82.5e73744.0" "@storybook/types": "workspace:*" "@types/fs-extra": "npm:^11.0.1" "@types/js-yaml": "npm:^4.0.5" @@ -5669,12 +5669,12 @@ __metadata: languageName: unknown linkType: soft -"@storybook/csf@npm:0.1.4--canary.82.941efd8.0": - version: 0.1.4--canary.82.941efd8.0 - resolution: "@storybook/csf@npm:0.1.4--canary.82.941efd8.0" +"@storybook/csf@npm:0.1.4--canary.82.5e73744.0": + version: 0.1.4--canary.82.5e73744.0 + resolution: "@storybook/csf@npm:0.1.4--canary.82.5e73744.0" dependencies: type-fest: "npm:^2.19.0" - checksum: 10c0/73eca2cf2ae69061ea68db6b5c8fd663615c3f5f9f802ed51aba47cb9a4f50d294959b0d1a90045252c9380512dbb8d9840b88c4c26d49b61d04ed0b6581bedf + checksum: 10c0/c12790d228be49bd3d7d2639ab31fb3c336946e7507b92f6da8eeba283a23a84dc1525ced8b75edf3bb0db5224b2195fc02605f2aa1221c9fc1b7f6acd7a9d98 languageName: node linkType: hard @@ -5854,7 +5854,7 @@ __metadata: "@storybook/channels": "workspace:*" "@storybook/client-logger": "workspace:*" "@storybook/core-events": "workspace:*" - "@storybook/csf": "npm:0.1.4--canary.82.941efd8.0" + "@storybook/csf": "npm:0.1.4--canary.82.5e73744.0" "@storybook/global": "npm:^5.0.0" "@storybook/icons": "npm:^1.2.5" "@storybook/router": "workspace:*" @@ -6187,7 +6187,7 @@ __metadata: "@storybook/client-logger": "workspace:*" "@storybook/core-common": "workspace:*" "@storybook/core-events": "workspace:*" - "@storybook/csf": "npm:0.1.4--canary.82.941efd8.0" + "@storybook/csf": "npm:0.1.4--canary.82.5e73744.0" "@storybook/global": "npm:^5.0.0" "@storybook/types": "workspace:*" "@types/qs": "npm:^6.9.5" @@ -6372,7 +6372,7 @@ __metadata: "@storybook/core-events": "workspace:*" "@storybook/core-server": "workspace:*" "@storybook/core-webpack": "workspace:*" - "@storybook/csf": "npm:0.1.4--canary.82.941efd8.0" + "@storybook/csf": "npm:0.1.4--canary.82.5e73744.0" "@storybook/csf-plugin": "workspace:*" "@storybook/csf-tools": "workspace:*" "@storybook/docs-tools": "workspace:*" @@ -6527,7 +6527,7 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/server@workspace:renderers/server" dependencies: - "@storybook/csf": "npm:0.1.4--canary.82.941efd8.0" + "@storybook/csf": "npm:0.1.4--canary.82.5e73744.0" "@storybook/csf-tools": "workspace:*" "@storybook/global": "npm:^5.0.0" "@storybook/preview-api": "workspace:*" @@ -6544,7 +6544,7 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/source-loader@workspace:lib/source-loader" dependencies: - "@storybook/csf": "npm:0.1.4--canary.82.941efd8.0" + "@storybook/csf": "npm:0.1.4--canary.82.5e73744.0" "@storybook/types": "workspace:*" estraverse: "npm:^5.2.0" lodash: "npm:^4.17.21" @@ -6723,7 +6723,7 @@ __metadata: resolution: "@storybook/types@workspace:lib/types" dependencies: "@storybook/channels": "workspace:*" - "@storybook/csf": "npm:0.1.4--canary.82.941efd8.0" + "@storybook/csf": "npm:0.1.4--canary.82.5e73744.0" "@types/express": "npm:^4.7.0" "@types/fs-extra": "npm:^11.0.1" "@types/node": "npm:^18.0.0" From aa24b2401b18180f7e0fe9b6d371fa836022352b Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Thu, 11 Apr 2024 15:32:29 +0200 Subject: [PATCH 45/82] Update csf --- code/addons/links/package.json | 2 +- code/lib/codemod/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/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 | 32 ++++++++++++++--------------- 13 files changed, 28 insertions(+), 28 deletions(-) diff --git a/code/addons/links/package.json b/code/addons/links/package.json index 048e4517d406..6ae0722cfc8f 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.4--canary.82.5e73744.0", + "@storybook/csf": "0.1.4--canary.82.2a09ac2.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 7d278075a5ec..36de62dbfcf0 100644 --- a/code/lib/codemod/package.json +++ b/code/lib/codemod/package.json @@ -57,7 +57,7 @@ "@babel/core": "^7.23.2", "@babel/preset-env": "^7.23.2", "@babel/types": "^7.23.0", - "@storybook/csf": "0.1.4--canary.82.5e73744.0", + "@storybook/csf": "0.1.4--canary.82.2a09ac2.0", "@storybook/csf-tools": "workspace:*", "@storybook/node-logger": "workspace:*", "@storybook/types": "workspace:*", diff --git a/code/lib/core-server/package.json b/code/lib/core-server/package.json index b0d66fa7a13b..797258e060d3 100644 --- a/code/lib/core-server/package.json +++ b/code/lib/core-server/package.json @@ -62,7 +62,7 @@ "@storybook/channels": "workspace:*", "@storybook/core-common": "workspace:*", "@storybook/core-events": "workspace:*", - "@storybook/csf": "0.1.4--canary.82.5e73744.0", + "@storybook/csf": "0.1.4--canary.82.2a09ac2.0", "@storybook/csf-tools": "workspace:*", "@storybook/docs-mdx": "3.0.0", "@storybook/global": "^5.0.0", diff --git a/code/lib/csf-tools/package.json b/code/lib/csf-tools/package.json index b0f2a794d498..a8b6fdf5ec81 100644 --- a/code/lib/csf-tools/package.json +++ b/code/lib/csf-tools/package.json @@ -46,7 +46,7 @@ "@babel/parser": "^7.23.0", "@babel/traverse": "^7.23.2", "@babel/types": "^7.23.0", - "@storybook/csf": "0.1.4--canary.82.5e73744.0", + "@storybook/csf": "0.1.4--canary.82.2a09ac2.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 222964c69636..06ffc46be6a7 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.4--canary.82.5e73744.0", + "@storybook/csf": "0.1.4--canary.82.2a09ac2.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 63457c32639b..c666a90fa74b 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.4--canary.82.5e73744.0", + "@storybook/csf": "0.1.4--canary.82.2a09ac2.0", "@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 4514307f350e..0c68ff7cda5a 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.4--canary.82.5e73744.0", + "@storybook/csf": "0.1.4--canary.82.2a09ac2.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 81d3c83827f8..e2f830db5924 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.4--canary.82.5e73744.0", + "@storybook/csf": "0.1.4--canary.82.2a09ac2.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 558aee0c82f5..5037ec794b73 100644 --- a/code/package.json +++ b/code/package.json @@ -127,7 +127,7 @@ "@storybook/core-events": "workspace:*", "@storybook/core-server": "workspace:*", "@storybook/core-webpack": "workspace:*", - "@storybook/csf": "0.1.4--canary.82.5e73744.0", + "@storybook/csf": "0.1.4--canary.82.2a09ac2.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 5d2c95108b0f..a87f0f15700d 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.4--canary.82.5e73744.0", + "@storybook/csf": "0.1.4--canary.82.2a09ac2.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 cfb0eaca5bf0..a42dcf5d314b 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.4--canary.82.5e73744.0", + "@storybook/csf": "0.1.4--canary.82.2a09ac2.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 981097fc67b4..f93c613015f1 100644 --- a/code/ui/components/package.json +++ b/code/ui/components/package.json @@ -61,7 +61,7 @@ "dependencies": { "@radix-ui/react-slot": "^1.0.2", "@storybook/client-logger": "workspace:*", - "@storybook/csf": "0.1.4--canary.82.5e73744.0", + "@storybook/csf": "0.1.4--canary.82.2a09ac2.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 188f18ea2dc1..60868d2982d9 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -4947,7 +4947,7 @@ __metadata: dependencies: "@storybook/client-logger": "workspace:*" "@storybook/core-events": "workspace:*" - "@storybook/csf": "npm:0.1.4--canary.82.5e73744.0" + "@storybook/csf": "npm:0.1.4--canary.82.2a09ac2.0" "@storybook/global": "npm:^5.0.0" "@storybook/manager-api": "workspace:*" "@storybook/preview-api": "workspace:*" @@ -5215,7 +5215,7 @@ __metadata: "@storybook/client-logger": "workspace:*" "@storybook/components": "workspace:*" "@storybook/core-events": "workspace:*" - "@storybook/csf": "npm:0.1.4--canary.82.5e73744.0" + "@storybook/csf": "npm:0.1.4--canary.82.2a09ac2.0" "@storybook/docs-tools": "workspace:*" "@storybook/global": "npm:^5.0.0" "@storybook/icons": "npm:^1.2.5" @@ -5446,7 +5446,7 @@ __metadata: "@babel/core": "npm:^7.23.2" "@babel/preset-env": "npm:^7.23.2" "@babel/types": "npm:^7.23.0" - "@storybook/csf": "npm:0.1.4--canary.82.5e73744.0" + "@storybook/csf": "npm:0.1.4--canary.82.2a09ac2.0" "@storybook/csf-tools": "workspace:*" "@storybook/node-logger": "workspace:*" "@storybook/types": "workspace:*" @@ -5482,7 +5482,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.4--canary.82.5e73744.0" + "@storybook/csf": "npm:0.1.4--canary.82.2a09ac2.0" "@storybook/global": "npm:^5.0.0" "@storybook/icons": "npm:^1.2.5" "@storybook/test": "workspace:*" @@ -5575,7 +5575,7 @@ __metadata: "@storybook/channels": "workspace:*" "@storybook/core-common": "workspace:*" "@storybook/core-events": "workspace:*" - "@storybook/csf": "npm:0.1.4--canary.82.5e73744.0" + "@storybook/csf": "npm:0.1.4--canary.82.2a09ac2.0" "@storybook/csf-tools": "workspace:*" "@storybook/docs-mdx": "npm:3.0.0" "@storybook/global": "npm:^5.0.0" @@ -5657,7 +5657,7 @@ __metadata: "@babel/parser": "npm:^7.23.0" "@babel/traverse": "npm:^7.23.2" "@babel/types": "npm:^7.23.0" - "@storybook/csf": "npm:0.1.4--canary.82.5e73744.0" + "@storybook/csf": "npm:0.1.4--canary.82.2a09ac2.0" "@storybook/types": "workspace:*" "@types/fs-extra": "npm:^11.0.1" "@types/js-yaml": "npm:^4.0.5" @@ -5669,12 +5669,12 @@ __metadata: languageName: unknown linkType: soft -"@storybook/csf@npm:0.1.4--canary.82.5e73744.0": - version: 0.1.4--canary.82.5e73744.0 - resolution: "@storybook/csf@npm:0.1.4--canary.82.5e73744.0" +"@storybook/csf@npm:0.1.4--canary.82.2a09ac2.0": + version: 0.1.4--canary.82.2a09ac2.0 + resolution: "@storybook/csf@npm:0.1.4--canary.82.2a09ac2.0" dependencies: type-fest: "npm:^2.19.0" - checksum: 10c0/c12790d228be49bd3d7d2639ab31fb3c336946e7507b92f6da8eeba283a23a84dc1525ced8b75edf3bb0db5224b2195fc02605f2aa1221c9fc1b7f6acd7a9d98 + checksum: 10c0/85f88a3451d62e2591c4bcf3136ef854397e3850ca5cd4e061b05e01437a472dc96f8520e5935f8d991fd679174d650bce2a797aef1c4e735c3c8130e6c8d11e languageName: node linkType: hard @@ -5854,7 +5854,7 @@ __metadata: "@storybook/channels": "workspace:*" "@storybook/client-logger": "workspace:*" "@storybook/core-events": "workspace:*" - "@storybook/csf": "npm:0.1.4--canary.82.5e73744.0" + "@storybook/csf": "npm:0.1.4--canary.82.2a09ac2.0" "@storybook/global": "npm:^5.0.0" "@storybook/icons": "npm:^1.2.5" "@storybook/router": "workspace:*" @@ -6187,7 +6187,7 @@ __metadata: "@storybook/client-logger": "workspace:*" "@storybook/core-common": "workspace:*" "@storybook/core-events": "workspace:*" - "@storybook/csf": "npm:0.1.4--canary.82.5e73744.0" + "@storybook/csf": "npm:0.1.4--canary.82.2a09ac2.0" "@storybook/global": "npm:^5.0.0" "@storybook/types": "workspace:*" "@types/qs": "npm:^6.9.5" @@ -6372,7 +6372,7 @@ __metadata: "@storybook/core-events": "workspace:*" "@storybook/core-server": "workspace:*" "@storybook/core-webpack": "workspace:*" - "@storybook/csf": "npm:0.1.4--canary.82.5e73744.0" + "@storybook/csf": "npm:0.1.4--canary.82.2a09ac2.0" "@storybook/csf-plugin": "workspace:*" "@storybook/csf-tools": "workspace:*" "@storybook/docs-tools": "workspace:*" @@ -6527,7 +6527,7 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/server@workspace:renderers/server" dependencies: - "@storybook/csf": "npm:0.1.4--canary.82.5e73744.0" + "@storybook/csf": "npm:0.1.4--canary.82.2a09ac2.0" "@storybook/csf-tools": "workspace:*" "@storybook/global": "npm:^5.0.0" "@storybook/preview-api": "workspace:*" @@ -6544,7 +6544,7 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/source-loader@workspace:lib/source-loader" dependencies: - "@storybook/csf": "npm:0.1.4--canary.82.5e73744.0" + "@storybook/csf": "npm:0.1.4--canary.82.2a09ac2.0" "@storybook/types": "workspace:*" estraverse: "npm:^5.2.0" lodash: "npm:^4.17.21" @@ -6723,7 +6723,7 @@ __metadata: resolution: "@storybook/types@workspace:lib/types" dependencies: "@storybook/channels": "workspace:*" - "@storybook/csf": "npm:0.1.4--canary.82.5e73744.0" + "@storybook/csf": "npm:0.1.4--canary.82.2a09ac2.0" "@types/express": "npm:^4.7.0" "@types/fs-extra": "npm:^11.0.1" "@types/node": "npm:^18.0.0" From 54243d23103283402d6ad841f6b9bde4f27f2a08 Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Thu, 11 Apr 2024 15:41:54 +0200 Subject: [PATCH 46/82] Fix type error --- .../lib/preview-api/src/modules/store/csf/prepareStory.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/code/lib/preview-api/src/modules/store/csf/prepareStory.ts b/code/lib/preview-api/src/modules/store/csf/prepareStory.ts index 22b2ede3f51c..84439187c4de 100644 --- a/code/lib/preview-api/src/modules/store/csf/prepareStory.ts +++ b/code/lib/preview-api/src/modules/store/csf/prepareStory.ts @@ -265,10 +265,10 @@ export function prepareContext< return acc; } - const mappingFn = (originalValue: any) => - originalValue in targetedContext.argTypes[key].mapping - ? targetedContext.argTypes[key].mapping[originalValue] - : originalValue; + const mappingFn = (originalValue: any) => { + const mapping = targetedContext.argTypes[key].mapping; + return mapping && originalValue in mapping ? mapping[originalValue] : originalValue; + }; acc[key] = Array.isArray(val) ? val.map(mappingFn) : mappingFn(val); From df6c1ad5d47809223afb1def9be9d12ed323dd69 Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Thu, 11 Apr 2024 16:00:21 +0200 Subject: [PATCH 47/82] Fix type errors --- code/addons/links/package.json | 2 +- code/lib/codemod/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/types/package.json | 2 +- code/package.json | 2 +- code/renderers/server/package.json | 2 +- code/renderers/server/src/render.ts | 3 +- code/ui/blocks/package.json | 2 +- .../blocks/src/components/ArgsTable/types.ts | 4 +-- code/ui/components/package.json | 2 +- code/yarn.lock | 32 +++++++++---------- 15 files changed, 32 insertions(+), 31 deletions(-) diff --git a/code/addons/links/package.json b/code/addons/links/package.json index 6ae0722cfc8f..a32f72851b17 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.4--canary.82.2a09ac2.0", + "@storybook/csf": "0.1.4--canary.82.eb42c88.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 36de62dbfcf0..e530755b7795 100644 --- a/code/lib/codemod/package.json +++ b/code/lib/codemod/package.json @@ -57,7 +57,7 @@ "@babel/core": "^7.23.2", "@babel/preset-env": "^7.23.2", "@babel/types": "^7.23.0", - "@storybook/csf": "0.1.4--canary.82.2a09ac2.0", + "@storybook/csf": "0.1.4--canary.82.eb42c88.0", "@storybook/csf-tools": "workspace:*", "@storybook/node-logger": "workspace:*", "@storybook/types": "workspace:*", diff --git a/code/lib/core-server/package.json b/code/lib/core-server/package.json index 797258e060d3..3a022dbf7260 100644 --- a/code/lib/core-server/package.json +++ b/code/lib/core-server/package.json @@ -62,7 +62,7 @@ "@storybook/channels": "workspace:*", "@storybook/core-common": "workspace:*", "@storybook/core-events": "workspace:*", - "@storybook/csf": "0.1.4--canary.82.2a09ac2.0", + "@storybook/csf": "0.1.4--canary.82.eb42c88.0", "@storybook/csf-tools": "workspace:*", "@storybook/docs-mdx": "3.0.0", "@storybook/global": "^5.0.0", diff --git a/code/lib/csf-tools/package.json b/code/lib/csf-tools/package.json index a8b6fdf5ec81..1207ccfbe38f 100644 --- a/code/lib/csf-tools/package.json +++ b/code/lib/csf-tools/package.json @@ -46,7 +46,7 @@ "@babel/parser": "^7.23.0", "@babel/traverse": "^7.23.2", "@babel/types": "^7.23.0", - "@storybook/csf": "0.1.4--canary.82.2a09ac2.0", + "@storybook/csf": "0.1.4--canary.82.eb42c88.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 06ffc46be6a7..03d368380a9f 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.4--canary.82.2a09ac2.0", + "@storybook/csf": "0.1.4--canary.82.eb42c88.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 c666a90fa74b..f2a7d5856bb8 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.4--canary.82.2a09ac2.0", + "@storybook/csf": "0.1.4--canary.82.eb42c88.0", "@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 0c68ff7cda5a..27da53aee4ac 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.4--canary.82.2a09ac2.0", + "@storybook/csf": "0.1.4--canary.82.eb42c88.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 e2f830db5924..c5011426fc02 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.4--canary.82.2a09ac2.0", + "@storybook/csf": "0.1.4--canary.82.eb42c88.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 5037ec794b73..cbd113dd93fa 100644 --- a/code/package.json +++ b/code/package.json @@ -127,7 +127,7 @@ "@storybook/core-events": "workspace:*", "@storybook/core-server": "workspace:*", "@storybook/core-webpack": "workspace:*", - "@storybook/csf": "0.1.4--canary.82.2a09ac2.0", + "@storybook/csf": "0.1.4--canary.82.eb42c88.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 a87f0f15700d..915e952ae7c3 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.4--canary.82.2a09ac2.0", + "@storybook/csf": "0.1.4--canary.82.eb42c88.0", "@storybook/csf-tools": "workspace:*", "@storybook/global": "^5.0.0", "@storybook/preview-api": "workspace:*", diff --git a/code/renderers/server/src/render.ts b/code/renderers/server/src/render.ts index 0a768647d740..0c910f7ba706 100644 --- a/code/renderers/server/src/render.ts +++ b/code/renderers/server/src/render.ts @@ -22,7 +22,8 @@ const buildStoryArgs = (args: Args, argTypes: ArgTypes) => { Object.keys(argTypes).forEach((key: string) => { const argType = argTypes[key]; const { control } = argType; - const controlType = control && control.type.toLowerCase(); + const controlType = + control && typeof control === 'object' && 'type' in control && control.type?.toLowerCase(); const argValue = storyArgs[key]; switch (controlType) { case 'date': diff --git a/code/ui/blocks/package.json b/code/ui/blocks/package.json index a42dcf5d314b..358ce8515d9b 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.4--canary.82.2a09ac2.0", + "@storybook/csf": "0.1.4--canary.82.eb42c88.0", "@storybook/docs-tools": "workspace:*", "@storybook/global": "^5.0.0", "@storybook/icons": "^1.2.5", diff --git a/code/ui/blocks/src/components/ArgsTable/types.ts b/code/ui/blocks/src/components/ArgsTable/types.ts index 653bf236acdb..7efb484fe6a9 100644 --- a/code/ui/blocks/src/components/ArgsTable/types.ts +++ b/code/ui/blocks/src/components/ArgsTable/types.ts @@ -46,11 +46,11 @@ export interface ArgType { disable?: boolean; subcategory?: string; defaultValue?: { - summary: string; + summary?: string; detail?: string; }; type?: { - summary: string; + summary?: string; detail?: string; }; readonly?: boolean; diff --git a/code/ui/components/package.json b/code/ui/components/package.json index f93c613015f1..e5f901c7f290 100644 --- a/code/ui/components/package.json +++ b/code/ui/components/package.json @@ -61,7 +61,7 @@ "dependencies": { "@radix-ui/react-slot": "^1.0.2", "@storybook/client-logger": "workspace:*", - "@storybook/csf": "0.1.4--canary.82.2a09ac2.0", + "@storybook/csf": "0.1.4--canary.82.eb42c88.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 60868d2982d9..38f36fad686f 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -4947,7 +4947,7 @@ __metadata: dependencies: "@storybook/client-logger": "workspace:*" "@storybook/core-events": "workspace:*" - "@storybook/csf": "npm:0.1.4--canary.82.2a09ac2.0" + "@storybook/csf": "npm:0.1.4--canary.82.eb42c88.0" "@storybook/global": "npm:^5.0.0" "@storybook/manager-api": "workspace:*" "@storybook/preview-api": "workspace:*" @@ -5215,7 +5215,7 @@ __metadata: "@storybook/client-logger": "workspace:*" "@storybook/components": "workspace:*" "@storybook/core-events": "workspace:*" - "@storybook/csf": "npm:0.1.4--canary.82.2a09ac2.0" + "@storybook/csf": "npm:0.1.4--canary.82.eb42c88.0" "@storybook/docs-tools": "workspace:*" "@storybook/global": "npm:^5.0.0" "@storybook/icons": "npm:^1.2.5" @@ -5446,7 +5446,7 @@ __metadata: "@babel/core": "npm:^7.23.2" "@babel/preset-env": "npm:^7.23.2" "@babel/types": "npm:^7.23.0" - "@storybook/csf": "npm:0.1.4--canary.82.2a09ac2.0" + "@storybook/csf": "npm:0.1.4--canary.82.eb42c88.0" "@storybook/csf-tools": "workspace:*" "@storybook/node-logger": "workspace:*" "@storybook/types": "workspace:*" @@ -5482,7 +5482,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.4--canary.82.2a09ac2.0" + "@storybook/csf": "npm:0.1.4--canary.82.eb42c88.0" "@storybook/global": "npm:^5.0.0" "@storybook/icons": "npm:^1.2.5" "@storybook/test": "workspace:*" @@ -5575,7 +5575,7 @@ __metadata: "@storybook/channels": "workspace:*" "@storybook/core-common": "workspace:*" "@storybook/core-events": "workspace:*" - "@storybook/csf": "npm:0.1.4--canary.82.2a09ac2.0" + "@storybook/csf": "npm:0.1.4--canary.82.eb42c88.0" "@storybook/csf-tools": "workspace:*" "@storybook/docs-mdx": "npm:3.0.0" "@storybook/global": "npm:^5.0.0" @@ -5657,7 +5657,7 @@ __metadata: "@babel/parser": "npm:^7.23.0" "@babel/traverse": "npm:^7.23.2" "@babel/types": "npm:^7.23.0" - "@storybook/csf": "npm:0.1.4--canary.82.2a09ac2.0" + "@storybook/csf": "npm:0.1.4--canary.82.eb42c88.0" "@storybook/types": "workspace:*" "@types/fs-extra": "npm:^11.0.1" "@types/js-yaml": "npm:^4.0.5" @@ -5669,12 +5669,12 @@ __metadata: languageName: unknown linkType: soft -"@storybook/csf@npm:0.1.4--canary.82.2a09ac2.0": - version: 0.1.4--canary.82.2a09ac2.0 - resolution: "@storybook/csf@npm:0.1.4--canary.82.2a09ac2.0" +"@storybook/csf@npm:0.1.4--canary.82.eb42c88.0": + version: 0.1.4--canary.82.eb42c88.0 + resolution: "@storybook/csf@npm:0.1.4--canary.82.eb42c88.0" dependencies: type-fest: "npm:^2.19.0" - checksum: 10c0/85f88a3451d62e2591c4bcf3136ef854397e3850ca5cd4e061b05e01437a472dc96f8520e5935f8d991fd679174d650bce2a797aef1c4e735c3c8130e6c8d11e + checksum: 10c0/ecf33ccc2fbadf2d7e8add3a38f7dcd993c4168619b61709295231fd741fa9a1cabcd6471bfc5b870418c300461ac021345eea7bdde5188811acd0ddc44bb9f8 languageName: node linkType: hard @@ -5854,7 +5854,7 @@ __metadata: "@storybook/channels": "workspace:*" "@storybook/client-logger": "workspace:*" "@storybook/core-events": "workspace:*" - "@storybook/csf": "npm:0.1.4--canary.82.2a09ac2.0" + "@storybook/csf": "npm:0.1.4--canary.82.eb42c88.0" "@storybook/global": "npm:^5.0.0" "@storybook/icons": "npm:^1.2.5" "@storybook/router": "workspace:*" @@ -6187,7 +6187,7 @@ __metadata: "@storybook/client-logger": "workspace:*" "@storybook/core-common": "workspace:*" "@storybook/core-events": "workspace:*" - "@storybook/csf": "npm:0.1.4--canary.82.2a09ac2.0" + "@storybook/csf": "npm:0.1.4--canary.82.eb42c88.0" "@storybook/global": "npm:^5.0.0" "@storybook/types": "workspace:*" "@types/qs": "npm:^6.9.5" @@ -6372,7 +6372,7 @@ __metadata: "@storybook/core-events": "workspace:*" "@storybook/core-server": "workspace:*" "@storybook/core-webpack": "workspace:*" - "@storybook/csf": "npm:0.1.4--canary.82.2a09ac2.0" + "@storybook/csf": "npm:0.1.4--canary.82.eb42c88.0" "@storybook/csf-plugin": "workspace:*" "@storybook/csf-tools": "workspace:*" "@storybook/docs-tools": "workspace:*" @@ -6527,7 +6527,7 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/server@workspace:renderers/server" dependencies: - "@storybook/csf": "npm:0.1.4--canary.82.2a09ac2.0" + "@storybook/csf": "npm:0.1.4--canary.82.eb42c88.0" "@storybook/csf-tools": "workspace:*" "@storybook/global": "npm:^5.0.0" "@storybook/preview-api": "workspace:*" @@ -6544,7 +6544,7 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/source-loader@workspace:lib/source-loader" dependencies: - "@storybook/csf": "npm:0.1.4--canary.82.2a09ac2.0" + "@storybook/csf": "npm:0.1.4--canary.82.eb42c88.0" "@storybook/types": "workspace:*" estraverse: "npm:^5.2.0" lodash: "npm:^4.17.21" @@ -6723,7 +6723,7 @@ __metadata: resolution: "@storybook/types@workspace:lib/types" dependencies: "@storybook/channels": "workspace:*" - "@storybook/csf": "npm:0.1.4--canary.82.2a09ac2.0" + "@storybook/csf": "npm:0.1.4--canary.82.eb42c88.0" "@types/express": "npm:^4.7.0" "@types/fs-extra": "npm:^11.0.1" "@types/node": "npm:^18.0.0" From e56b6d789df7254f8173cac1624326a0e2557bf1 Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Thu, 11 Apr 2024 16:36:54 +0200 Subject: [PATCH 48/82] Fix type errors --- code/addons/controls/src/ControlsPanel.tsx | 6 ++-- code/addons/links/package.json | 2 +- code/lib/codemod/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/types/package.json | 2 +- code/package.json | 2 +- code/renderers/server/package.json | 2 +- .../vue3/src/docs/extractArgTypes.ts | 2 +- code/ui/blocks/package.json | 2 +- code/ui/components/package.json | 2 +- code/yarn.lock | 32 +++++++++---------- 15 files changed, 33 insertions(+), 31 deletions(-) diff --git a/code/addons/controls/src/ControlsPanel.tsx b/code/addons/controls/src/ControlsPanel.tsx index 09d3bc45e44e..1f1a90cce007 100644 --- a/code/addons/controls/src/ControlsPanel.tsx +++ b/code/addons/controls/src/ControlsPanel.tsx @@ -35,8 +35,10 @@ export const ControlsPanel: FC = () => { const hasControls = Object.values(rows).some((arg) => arg?.control); const withPresetColors = Object.entries(rows).reduce((acc, [key, arg]) => { - if (arg?.control?.type !== 'color' || arg?.control?.presetColors) acc[key] = arg; - else acc[key] = { ...arg, control: { ...arg.control, presetColors } }; + const control = arg?.control; + if (typeof control !== 'object' || control?.type !== 'color' || control?.presetColors) + acc[key] = arg; + else acc[key] = { ...arg, control: { ...control, presetColors } }; return acc; }, {} as ArgTypes); diff --git a/code/addons/links/package.json b/code/addons/links/package.json index a32f72851b17..848d3ed70599 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.4--canary.82.eb42c88.0", + "@storybook/csf": "0.1.4--canary.82.07bccd8.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 e530755b7795..4cb0e7778ba4 100644 --- a/code/lib/codemod/package.json +++ b/code/lib/codemod/package.json @@ -57,7 +57,7 @@ "@babel/core": "^7.23.2", "@babel/preset-env": "^7.23.2", "@babel/types": "^7.23.0", - "@storybook/csf": "0.1.4--canary.82.eb42c88.0", + "@storybook/csf": "0.1.4--canary.82.07bccd8.0", "@storybook/csf-tools": "workspace:*", "@storybook/node-logger": "workspace:*", "@storybook/types": "workspace:*", diff --git a/code/lib/core-server/package.json b/code/lib/core-server/package.json index 3a022dbf7260..bc74ea549e1b 100644 --- a/code/lib/core-server/package.json +++ b/code/lib/core-server/package.json @@ -62,7 +62,7 @@ "@storybook/channels": "workspace:*", "@storybook/core-common": "workspace:*", "@storybook/core-events": "workspace:*", - "@storybook/csf": "0.1.4--canary.82.eb42c88.0", + "@storybook/csf": "0.1.4--canary.82.07bccd8.0", "@storybook/csf-tools": "workspace:*", "@storybook/docs-mdx": "3.0.0", "@storybook/global": "^5.0.0", diff --git a/code/lib/csf-tools/package.json b/code/lib/csf-tools/package.json index 1207ccfbe38f..0a983a1f65fe 100644 --- a/code/lib/csf-tools/package.json +++ b/code/lib/csf-tools/package.json @@ -46,7 +46,7 @@ "@babel/parser": "^7.23.0", "@babel/traverse": "^7.23.2", "@babel/types": "^7.23.0", - "@storybook/csf": "0.1.4--canary.82.eb42c88.0", + "@storybook/csf": "0.1.4--canary.82.07bccd8.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 03d368380a9f..a7580cc35300 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.4--canary.82.eb42c88.0", + "@storybook/csf": "0.1.4--canary.82.07bccd8.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 f2a7d5856bb8..8beec3506bf5 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.4--canary.82.eb42c88.0", + "@storybook/csf": "0.1.4--canary.82.07bccd8.0", "@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 27da53aee4ac..0c23f1962e7a 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.4--canary.82.eb42c88.0", + "@storybook/csf": "0.1.4--canary.82.07bccd8.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 c5011426fc02..07665e44d705 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.4--canary.82.eb42c88.0", + "@storybook/csf": "0.1.4--canary.82.07bccd8.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 cbd113dd93fa..6d9b8d414a69 100644 --- a/code/package.json +++ b/code/package.json @@ -127,7 +127,7 @@ "@storybook/core-events": "workspace:*", "@storybook/core-server": "workspace:*", "@storybook/core-webpack": "workspace:*", - "@storybook/csf": "0.1.4--canary.82.eb42c88.0", + "@storybook/csf": "0.1.4--canary.82.07bccd8.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 915e952ae7c3..7316820ce51a 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.4--canary.82.eb42c88.0", + "@storybook/csf": "0.1.4--canary.82.07bccd8.0", "@storybook/csf-tools": "workspace:*", "@storybook/global": "^5.0.0", "@storybook/preview-api": "workspace:*", diff --git a/code/renderers/vue3/src/docs/extractArgTypes.ts b/code/renderers/vue3/src/docs/extractArgTypes.ts index d466cea2e1cd..66bc7efcf7da 100644 --- a/code/renderers/vue3/src/docs/extractArgTypes.ts +++ b/code/renderers/vue3/src/docs/extractArgTypes.ts @@ -127,7 +127,7 @@ export const extractFromVueDocgenApi = ( type: sbType ? { ...sbType, required } : { name: 'other', value: type ?? '' }, table: { type: type ? { summary: type } : undefined, - defaultValue: extractedProp?.propDef.defaultValue, + defaultValue: extractedProp?.propDef.defaultValue ?? undefined, jsDocTags: extractedProp?.propDef.jsDocTags, category: section, }, diff --git a/code/ui/blocks/package.json b/code/ui/blocks/package.json index 358ce8515d9b..2ed20ed7407e 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.4--canary.82.eb42c88.0", + "@storybook/csf": "0.1.4--canary.82.07bccd8.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 e5f901c7f290..e4310e0e3cd0 100644 --- a/code/ui/components/package.json +++ b/code/ui/components/package.json @@ -61,7 +61,7 @@ "dependencies": { "@radix-ui/react-slot": "^1.0.2", "@storybook/client-logger": "workspace:*", - "@storybook/csf": "0.1.4--canary.82.eb42c88.0", + "@storybook/csf": "0.1.4--canary.82.07bccd8.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 ac37658ede03..5584607d30bc 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -4947,7 +4947,7 @@ __metadata: dependencies: "@storybook/client-logger": "workspace:*" "@storybook/core-events": "workspace:*" - "@storybook/csf": "npm:0.1.4--canary.82.eb42c88.0" + "@storybook/csf": "npm:0.1.4--canary.82.07bccd8.0" "@storybook/global": "npm:^5.0.0" "@storybook/manager-api": "workspace:*" "@storybook/preview-api": "workspace:*" @@ -5215,7 +5215,7 @@ __metadata: "@storybook/client-logger": "workspace:*" "@storybook/components": "workspace:*" "@storybook/core-events": "workspace:*" - "@storybook/csf": "npm:0.1.4--canary.82.eb42c88.0" + "@storybook/csf": "npm:0.1.4--canary.82.07bccd8.0" "@storybook/docs-tools": "workspace:*" "@storybook/global": "npm:^5.0.0" "@storybook/icons": "npm:^1.2.5" @@ -5446,7 +5446,7 @@ __metadata: "@babel/core": "npm:^7.23.2" "@babel/preset-env": "npm:^7.23.2" "@babel/types": "npm:^7.23.0" - "@storybook/csf": "npm:0.1.4--canary.82.eb42c88.0" + "@storybook/csf": "npm:0.1.4--canary.82.07bccd8.0" "@storybook/csf-tools": "workspace:*" "@storybook/node-logger": "workspace:*" "@storybook/types": "workspace:*" @@ -5482,7 +5482,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.4--canary.82.eb42c88.0" + "@storybook/csf": "npm:0.1.4--canary.82.07bccd8.0" "@storybook/global": "npm:^5.0.0" "@storybook/icons": "npm:^1.2.5" "@storybook/test": "workspace:*" @@ -5575,7 +5575,7 @@ __metadata: "@storybook/channels": "workspace:*" "@storybook/core-common": "workspace:*" "@storybook/core-events": "workspace:*" - "@storybook/csf": "npm:0.1.4--canary.82.eb42c88.0" + "@storybook/csf": "npm:0.1.4--canary.82.07bccd8.0" "@storybook/csf-tools": "workspace:*" "@storybook/docs-mdx": "npm:3.0.0" "@storybook/global": "npm:^5.0.0" @@ -5657,7 +5657,7 @@ __metadata: "@babel/parser": "npm:^7.23.0" "@babel/traverse": "npm:^7.23.2" "@babel/types": "npm:^7.23.0" - "@storybook/csf": "npm:0.1.4--canary.82.eb42c88.0" + "@storybook/csf": "npm:0.1.4--canary.82.07bccd8.0" "@storybook/types": "workspace:*" "@types/fs-extra": "npm:^11.0.1" "@types/js-yaml": "npm:^4.0.5" @@ -5669,12 +5669,12 @@ __metadata: languageName: unknown linkType: soft -"@storybook/csf@npm:0.1.4--canary.82.eb42c88.0": - version: 0.1.4--canary.82.eb42c88.0 - resolution: "@storybook/csf@npm:0.1.4--canary.82.eb42c88.0" +"@storybook/csf@npm:0.1.4--canary.82.07bccd8.0": + version: 0.1.4--canary.82.07bccd8.0 + resolution: "@storybook/csf@npm:0.1.4--canary.82.07bccd8.0" dependencies: type-fest: "npm:^2.19.0" - checksum: 10c0/ecf33ccc2fbadf2d7e8add3a38f7dcd993c4168619b61709295231fd741fa9a1cabcd6471bfc5b870418c300461ac021345eea7bdde5188811acd0ddc44bb9f8 + checksum: 10c0/1e00891cfdbf9b9d82f5b5713c463e9499107f96b2e8062f6710f41c586e6abcbf20bdc7d98823e11aff53f2f31ae01608ba06b5c0fb12f142f284c8508ad729 languageName: node linkType: hard @@ -5854,7 +5854,7 @@ __metadata: "@storybook/channels": "workspace:*" "@storybook/client-logger": "workspace:*" "@storybook/core-events": "workspace:*" - "@storybook/csf": "npm:0.1.4--canary.82.eb42c88.0" + "@storybook/csf": "npm:0.1.4--canary.82.07bccd8.0" "@storybook/global": "npm:^5.0.0" "@storybook/icons": "npm:^1.2.5" "@storybook/router": "workspace:*" @@ -6187,7 +6187,7 @@ __metadata: "@storybook/client-logger": "workspace:*" "@storybook/core-common": "workspace:*" "@storybook/core-events": "workspace:*" - "@storybook/csf": "npm:0.1.4--canary.82.eb42c88.0" + "@storybook/csf": "npm:0.1.4--canary.82.07bccd8.0" "@storybook/global": "npm:^5.0.0" "@storybook/types": "workspace:*" "@types/qs": "npm:^6.9.5" @@ -6372,7 +6372,7 @@ __metadata: "@storybook/core-events": "workspace:*" "@storybook/core-server": "workspace:*" "@storybook/core-webpack": "workspace:*" - "@storybook/csf": "npm:0.1.4--canary.82.eb42c88.0" + "@storybook/csf": "npm:0.1.4--canary.82.07bccd8.0" "@storybook/csf-plugin": "workspace:*" "@storybook/csf-tools": "workspace:*" "@storybook/docs-tools": "workspace:*" @@ -6527,7 +6527,7 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/server@workspace:renderers/server" dependencies: - "@storybook/csf": "npm:0.1.4--canary.82.eb42c88.0" + "@storybook/csf": "npm:0.1.4--canary.82.07bccd8.0" "@storybook/csf-tools": "workspace:*" "@storybook/global": "npm:^5.0.0" "@storybook/preview-api": "workspace:*" @@ -6544,7 +6544,7 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/source-loader@workspace:lib/source-loader" dependencies: - "@storybook/csf": "npm:0.1.4--canary.82.eb42c88.0" + "@storybook/csf": "npm:0.1.4--canary.82.07bccd8.0" "@storybook/types": "workspace:*" estraverse: "npm:^5.2.0" lodash: "npm:^4.17.21" @@ -6723,7 +6723,7 @@ __metadata: resolution: "@storybook/types@workspace:lib/types" dependencies: "@storybook/channels": "workspace:*" - "@storybook/csf": "npm:0.1.4--canary.82.eb42c88.0" + "@storybook/csf": "npm:0.1.4--canary.82.07bccd8.0" "@types/express": "npm:^4.7.0" "@types/fs-extra": "npm:^11.0.1" "@types/node": "npm:^18.0.0" From 2bc6536b40fcb904d58912c41a2174ed1da4490d Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Thu, 11 Apr 2024 17:02:09 +0200 Subject: [PATCH 49/82] Fix type errors --- code/addons/links/package.json | 2 +- .../angular/src/client/docs/compodoc.ts | 2 +- code/lib/codemod/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 +- .../src/modules/store/args.test.ts | 1 + .../src/modules/store/inferControls.test.ts | 6 ++-- code/lib/source-loader/package.json | 2 +- code/lib/types/package.json | 2 +- code/package.json | 2 +- .../react/src/docs/extractArgTypes.ts | 4 +-- code/renderers/server/package.json | 2 +- code/ui/blocks/package.json | 2 +- .../options/SelectOptions.stories.tsx | 2 +- code/ui/components/package.json | 2 +- code/yarn.lock | 32 +++++++++---------- 18 files changed, 37 insertions(+), 34 deletions(-) diff --git a/code/addons/links/package.json b/code/addons/links/package.json index 848d3ed70599..12db1a5d5ee3 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.4--canary.82.07bccd8.0", + "@storybook/csf": "0.1.4--canary.82.934057e.0", "@storybook/global": "^5.0.0", "ts-dedent": "^2.0.0" }, diff --git a/code/frameworks/angular/src/client/docs/compodoc.ts b/code/frameworks/angular/src/client/docs/compodoc.ts index 9785842648d0..cc6425c6e545 100644 --- a/code/frameworks/angular/src/client/docs/compodoc.ts +++ b/code/frameworks/angular/src/client/docs/compodoc.ts @@ -200,7 +200,7 @@ const extractDefaultValueFromComments = (property: Property, value: any) => { const extractDefaultValue = (property: Property) => { try { - let value: string | boolean = property.defaultValue?.replace(/^'(.*)'$/, '$1'); + let value: string = property.defaultValue?.replace(/^'(.*)'$/, '$1'); value = castDefaultValue(property, value); if (value == null && property.jsdoctags?.length > 0) { diff --git a/code/lib/codemod/package.json b/code/lib/codemod/package.json index 4cb0e7778ba4..3b22056f004d 100644 --- a/code/lib/codemod/package.json +++ b/code/lib/codemod/package.json @@ -57,7 +57,7 @@ "@babel/core": "^7.23.2", "@babel/preset-env": "^7.23.2", "@babel/types": "^7.23.0", - "@storybook/csf": "0.1.4--canary.82.07bccd8.0", + "@storybook/csf": "0.1.4--canary.82.934057e.0", "@storybook/csf-tools": "workspace:*", "@storybook/node-logger": "workspace:*", "@storybook/types": "workspace:*", diff --git a/code/lib/core-server/package.json b/code/lib/core-server/package.json index bc74ea549e1b..ab90a994ccbf 100644 --- a/code/lib/core-server/package.json +++ b/code/lib/core-server/package.json @@ -62,7 +62,7 @@ "@storybook/channels": "workspace:*", "@storybook/core-common": "workspace:*", "@storybook/core-events": "workspace:*", - "@storybook/csf": "0.1.4--canary.82.07bccd8.0", + "@storybook/csf": "0.1.4--canary.82.934057e.0", "@storybook/csf-tools": "workspace:*", "@storybook/docs-mdx": "3.0.0", "@storybook/global": "^5.0.0", diff --git a/code/lib/csf-tools/package.json b/code/lib/csf-tools/package.json index 0a983a1f65fe..cef69b34d75d 100644 --- a/code/lib/csf-tools/package.json +++ b/code/lib/csf-tools/package.json @@ -46,7 +46,7 @@ "@babel/parser": "^7.23.0", "@babel/traverse": "^7.23.2", "@babel/types": "^7.23.0", - "@storybook/csf": "0.1.4--canary.82.07bccd8.0", + "@storybook/csf": "0.1.4--canary.82.934057e.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 a7580cc35300..67512185ecba 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.4--canary.82.07bccd8.0", + "@storybook/csf": "0.1.4--canary.82.934057e.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 8beec3506bf5..06c8223ef583 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.4--canary.82.07bccd8.0", + "@storybook/csf": "0.1.4--canary.82.934057e.0", "@storybook/global": "^5.0.0", "@storybook/types": "workspace:*", "@types/qs": "^6.9.5", diff --git a/code/lib/preview-api/src/modules/store/args.test.ts b/code/lib/preview-api/src/modules/store/args.test.ts index 0d39874c766f..ed8ed42c483e 100644 --- a/code/lib/preview-api/src/modules/store/args.test.ts +++ b/code/lib/preview-api/src/modules/store/args.test.ts @@ -243,6 +243,7 @@ describe('validateOptions', () => { }); it('ignores options and logs an error if options is not an array', () => { + // @ts-expect-error This should give TS error indeed (finally!) expect(validateOptions({ a: 1 }, { a: { options: { 2: 'two' } } })).toStrictEqual({ a: 1 }); expect(once.error).toHaveBeenCalledWith( expect.stringContaining("Invalid argType: 'a.options' should be an array") diff --git a/code/lib/preview-api/src/modules/store/inferControls.test.ts b/code/lib/preview-api/src/modules/store/inferControls.test.ts index 8d754372439d..9293bf771e69 100644 --- a/code/lib/preview-api/src/modules/store/inferControls.test.ts +++ b/code/lib/preview-api/src/modules/store/inferControls.test.ts @@ -58,7 +58,8 @@ describe('inferControls', () => { }) ); - expect(inferredControls.background.control.type).toEqual('color'); + const control = inferredControls.background.control; + expect(typeof control === 'object' && control.type).toEqual('color'); }); it('should return inferred type when using color matcher but arg passed is not a string', () => { @@ -97,7 +98,8 @@ describe('inferControls', () => { ); expect(warnSpy).toHaveBeenCalled(); - expect(inferredControls.background.control.type).toEqual(type.name); + const control = inferredControls.background.control; + expect(typeof control === 'object' && control.type).toEqual(type.name); }); }); }); diff --git a/code/lib/source-loader/package.json b/code/lib/source-loader/package.json index 0c23f1962e7a..01058e3feae1 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.4--canary.82.07bccd8.0", + "@storybook/csf": "0.1.4--canary.82.934057e.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 07665e44d705..a3e81084dcd4 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.4--canary.82.07bccd8.0", + "@storybook/csf": "0.1.4--canary.82.934057e.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 6d9b8d414a69..9a0c12960595 100644 --- a/code/package.json +++ b/code/package.json @@ -127,7 +127,7 @@ "@storybook/core-events": "workspace:*", "@storybook/core-server": "workspace:*", "@storybook/core-webpack": "workspace:*", - "@storybook/csf": "0.1.4--canary.82.07bccd8.0", + "@storybook/csf": "0.1.4--canary.82.934057e.0", "@storybook/csf-plugin": "workspace:*", "@storybook/csf-tools": "workspace:*", "@storybook/docs-tools": "workspace:*", diff --git a/code/renderers/react/src/docs/extractArgTypes.ts b/code/renderers/react/src/docs/extractArgTypes.ts index 2da2e2724e7d..7c4c55911255 100644 --- a/code/renderers/react/src/docs/extractArgTypes.ts +++ b/code/renderers/react/src/docs/extractArgTypes.ts @@ -22,9 +22,9 @@ export const extractArgTypes: ArgTypesExtractor = (component) => { description, type: { required, ...sbType }, table: { - type, + type: type ?? undefined, jsDocTags, - defaultValue: defaultSummary, + defaultValue: defaultSummary ?? undefined, }, }; return acc; diff --git a/code/renderers/server/package.json b/code/renderers/server/package.json index 7316820ce51a..cb2d80c1f475 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.4--canary.82.07bccd8.0", + "@storybook/csf": "0.1.4--canary.82.934057e.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 2ed20ed7407e..186c47bc3f61 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.4--canary.82.07bccd8.0", + "@storybook/csf": "0.1.4--canary.82.934057e.0", "@storybook/docs-tools": "workspace:*", "@storybook/global": "^5.0.0", "@storybook/icons": "^1.2.5", diff --git a/code/ui/blocks/src/controls/options/SelectOptions.stories.tsx b/code/ui/blocks/src/controls/options/SelectOptions.stories.tsx index d417c24bd313..6d52b80f625e 100644 --- a/code/ui/blocks/src/controls/options/SelectOptions.stories.tsx +++ b/code/ui/blocks/src/controls/options/SelectOptions.stories.tsx @@ -20,7 +20,7 @@ const argTypeMultiSelect = { options: arrayOptions, }, }, -}; +} as const; const meta = { title: 'Controls/Options/Select', diff --git a/code/ui/components/package.json b/code/ui/components/package.json index e4310e0e3cd0..361a9f30c003 100644 --- a/code/ui/components/package.json +++ b/code/ui/components/package.json @@ -61,7 +61,7 @@ "dependencies": { "@radix-ui/react-slot": "^1.0.2", "@storybook/client-logger": "workspace:*", - "@storybook/csf": "0.1.4--canary.82.07bccd8.0", + "@storybook/csf": "0.1.4--canary.82.934057e.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 5584607d30bc..34ba29c88209 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -4947,7 +4947,7 @@ __metadata: dependencies: "@storybook/client-logger": "workspace:*" "@storybook/core-events": "workspace:*" - "@storybook/csf": "npm:0.1.4--canary.82.07bccd8.0" + "@storybook/csf": "npm:0.1.4--canary.82.934057e.0" "@storybook/global": "npm:^5.0.0" "@storybook/manager-api": "workspace:*" "@storybook/preview-api": "workspace:*" @@ -5215,7 +5215,7 @@ __metadata: "@storybook/client-logger": "workspace:*" "@storybook/components": "workspace:*" "@storybook/core-events": "workspace:*" - "@storybook/csf": "npm:0.1.4--canary.82.07bccd8.0" + "@storybook/csf": "npm:0.1.4--canary.82.934057e.0" "@storybook/docs-tools": "workspace:*" "@storybook/global": "npm:^5.0.0" "@storybook/icons": "npm:^1.2.5" @@ -5446,7 +5446,7 @@ __metadata: "@babel/core": "npm:^7.23.2" "@babel/preset-env": "npm:^7.23.2" "@babel/types": "npm:^7.23.0" - "@storybook/csf": "npm:0.1.4--canary.82.07bccd8.0" + "@storybook/csf": "npm:0.1.4--canary.82.934057e.0" "@storybook/csf-tools": "workspace:*" "@storybook/node-logger": "workspace:*" "@storybook/types": "workspace:*" @@ -5482,7 +5482,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.4--canary.82.07bccd8.0" + "@storybook/csf": "npm:0.1.4--canary.82.934057e.0" "@storybook/global": "npm:^5.0.0" "@storybook/icons": "npm:^1.2.5" "@storybook/test": "workspace:*" @@ -5575,7 +5575,7 @@ __metadata: "@storybook/channels": "workspace:*" "@storybook/core-common": "workspace:*" "@storybook/core-events": "workspace:*" - "@storybook/csf": "npm:0.1.4--canary.82.07bccd8.0" + "@storybook/csf": "npm:0.1.4--canary.82.934057e.0" "@storybook/csf-tools": "workspace:*" "@storybook/docs-mdx": "npm:3.0.0" "@storybook/global": "npm:^5.0.0" @@ -5657,7 +5657,7 @@ __metadata: "@babel/parser": "npm:^7.23.0" "@babel/traverse": "npm:^7.23.2" "@babel/types": "npm:^7.23.0" - "@storybook/csf": "npm:0.1.4--canary.82.07bccd8.0" + "@storybook/csf": "npm:0.1.4--canary.82.934057e.0" "@storybook/types": "workspace:*" "@types/fs-extra": "npm:^11.0.1" "@types/js-yaml": "npm:^4.0.5" @@ -5669,12 +5669,12 @@ __metadata: languageName: unknown linkType: soft -"@storybook/csf@npm:0.1.4--canary.82.07bccd8.0": - version: 0.1.4--canary.82.07bccd8.0 - resolution: "@storybook/csf@npm:0.1.4--canary.82.07bccd8.0" +"@storybook/csf@npm:0.1.4--canary.82.934057e.0": + version: 0.1.4--canary.82.934057e.0 + resolution: "@storybook/csf@npm:0.1.4--canary.82.934057e.0" dependencies: type-fest: "npm:^2.19.0" - checksum: 10c0/1e00891cfdbf9b9d82f5b5713c463e9499107f96b2e8062f6710f41c586e6abcbf20bdc7d98823e11aff53f2f31ae01608ba06b5c0fb12f142f284c8508ad729 + checksum: 10c0/137cdd7e15540352d9a861689d830e3e0d2f0e247e2650f55390394fc9b5c4df698718f4a5ebfde8dcd9d728ab5d7634a840eefac8874e036f4e532384bcced4 languageName: node linkType: hard @@ -5854,7 +5854,7 @@ __metadata: "@storybook/channels": "workspace:*" "@storybook/client-logger": "workspace:*" "@storybook/core-events": "workspace:*" - "@storybook/csf": "npm:0.1.4--canary.82.07bccd8.0" + "@storybook/csf": "npm:0.1.4--canary.82.934057e.0" "@storybook/global": "npm:^5.0.0" "@storybook/icons": "npm:^1.2.5" "@storybook/router": "workspace:*" @@ -6187,7 +6187,7 @@ __metadata: "@storybook/client-logger": "workspace:*" "@storybook/core-common": "workspace:*" "@storybook/core-events": "workspace:*" - "@storybook/csf": "npm:0.1.4--canary.82.07bccd8.0" + "@storybook/csf": "npm:0.1.4--canary.82.934057e.0" "@storybook/global": "npm:^5.0.0" "@storybook/types": "workspace:*" "@types/qs": "npm:^6.9.5" @@ -6372,7 +6372,7 @@ __metadata: "@storybook/core-events": "workspace:*" "@storybook/core-server": "workspace:*" "@storybook/core-webpack": "workspace:*" - "@storybook/csf": "npm:0.1.4--canary.82.07bccd8.0" + "@storybook/csf": "npm:0.1.4--canary.82.934057e.0" "@storybook/csf-plugin": "workspace:*" "@storybook/csf-tools": "workspace:*" "@storybook/docs-tools": "workspace:*" @@ -6527,7 +6527,7 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/server@workspace:renderers/server" dependencies: - "@storybook/csf": "npm:0.1.4--canary.82.07bccd8.0" + "@storybook/csf": "npm:0.1.4--canary.82.934057e.0" "@storybook/csf-tools": "workspace:*" "@storybook/global": "npm:^5.0.0" "@storybook/preview-api": "workspace:*" @@ -6544,7 +6544,7 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/source-loader@workspace:lib/source-loader" dependencies: - "@storybook/csf": "npm:0.1.4--canary.82.07bccd8.0" + "@storybook/csf": "npm:0.1.4--canary.82.934057e.0" "@storybook/types": "workspace:*" estraverse: "npm:^5.2.0" lodash: "npm:^4.17.21" @@ -6723,7 +6723,7 @@ __metadata: resolution: "@storybook/types@workspace:lib/types" dependencies: "@storybook/channels": "workspace:*" - "@storybook/csf": "npm:0.1.4--canary.82.07bccd8.0" + "@storybook/csf": "npm:0.1.4--canary.82.934057e.0" "@types/express": "npm:^4.7.0" "@types/fs-extra": "npm:^11.0.1" "@types/node": "npm:^18.0.0" From 7b0781a8c56d5e056ef2ec8bb6a857e091c4d4d5 Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Fri, 12 Apr 2024 10:54:17 +0200 Subject: [PATCH 50/82] Adjust tests --- .../preview-web/render/StoryRender.test.ts | 44 ++++++++-- .../src/modules/store/StoryStore.test.ts | 3 + .../modules/store/csf/composeConfigs.test.ts | 10 +++ .../modules/store/csf/normalizeStory.test.ts | 4 + .../modules/store/csf/prepareStory.test.ts | 1 + .../10017-ts-union/argTypes.snapshot | 2 +- .../argTypes.snapshot | 2 +- .../argTypes.snapshot | 6 +- .../8143-ts-imported-types/argTypes.snapshot | 2 +- .../argTypes.snapshot | 2 +- .../9023-js-hoc/argTypes.snapshot | 4 +- .../9399-js-proptypes-shape/argTypes.snapshot | 2 +- .../9493-ts-display-name/argTypes.snapshot | 2 +- .../9586-js-react-memo/argTypes.snapshot | 4 +- .../9591-ts-import-types/argTypes.snapshot | 2 +- .../argTypes.snapshot | 4 +- .../argTypes.snapshot | 2 +- .../9764-ts-extend-props/argTypes.snapshot | 6 +- .../9827-ts-default-values/argTypes.snapshot | 4 +- .../9922-ts-component-props/argTypes.snapshot | 2 +- .../docgen-components/jsdoc/argTypes.snapshot | 86 +++++++++---------- .../ts-types/argTypes.snapshot | 2 +- .../extractArgTypes.test.ts.snap | 42 ++++----- 23 files changed, 142 insertions(+), 96 deletions(-) diff --git a/code/lib/preview-api/src/modules/preview-web/render/StoryRender.test.ts b/code/lib/preview-api/src/modules/preview-web/render/StoryRender.test.ts index d9c5bdcc0863..d327f6bb05f3 100644 --- a/code/lib/preview-api/src/modules/preview-web/render/StoryRender.test.ts +++ b/code/lib/preview-api/src/modules/preview-web/render/StoryRender.test.ts @@ -34,6 +34,7 @@ describe('StoryRender', () => { name: 'name', tags: [], applyLoaders: vi.fn(), + applyBeforeEach: vi.fn(), unboundStoryFn: vi.fn(), playFunction: vi.fn(), prepareContext: vi.fn(), @@ -41,7 +42,7 @@ describe('StoryRender', () => { const render = new StoryRender( new Channel({}), - { getStoryContext: () => ({}) } as any, + { getStoryContext: () => ({}), addCleanupCallbacks: vi.fn() } as any, vi.fn() as any, {} as any, entry.id, @@ -61,6 +62,7 @@ describe('StoryRender', () => { name: 'name', tags: [], applyLoaders: vi.fn(), + applyBeforeEach: vi.fn(), unboundStoryFn: vi.fn(), playFunction: vi.fn(), prepareContext: vi.fn(), @@ -68,7 +70,7 @@ describe('StoryRender', () => { const render = new StoryRender( new Channel({}), - { getStoryContext: () => ({}) } as any, + { getStoryContext: () => ({}), addCleanupCallbacks: vi.fn() } as any, vi.fn() as any, {} as any, entry.id, @@ -90,11 +92,16 @@ describe('StoryRender', () => { name: 'name', tags: [], applyLoaders: vi.fn(() => loaderGate), + applyBeforeEach: vi.fn(), unboundStoryFn: vi.fn(), playFunction: vi.fn(), prepareContext: vi.fn(), }; - const store = { getStoryContext: () => ({}), cleanupStory: vi.fn() }; + const store = { + getStoryContext: () => ({}), + cleanupStory: vi.fn(), + addCleanupCallbacks: vi.fn(), + }; const renderToScreen = vi.fn(); const render = new StoryRender( new Channel({}), @@ -171,11 +178,16 @@ describe('StoryRender', () => { name: 'name', tags: [], applyLoaders: vi.fn(() => loaderGate), + applyBeforeEach: vi.fn(), unboundStoryFn: vi.fn(), playFunction: vi.fn(), prepareContext: vi.fn(), }; - const store = { getStoryContext: () => ({}), cleanupStory: vi.fn() }; + const store = { + getStoryContext: () => ({}), + cleanupStory: vi.fn(), + addCleanupCallbacks: vi.fn(), + }; const render = new StoryRender( new Channel({}), store as any, @@ -209,11 +221,16 @@ describe('StoryRender', () => { name: 'name', tags: [], applyLoaders: vi.fn(), + applyBeforeEach: vi.fn(), unboundStoryFn: vi.fn(), playFunction: vi.fn(), prepareContext: vi.fn(), }; - const store = { getStoryContext: () => ({}), cleanupStory: vi.fn() }; + const store = { + getStoryContext: () => ({}), + cleanupStory: vi.fn(), + addCleanupCallbacks: vi.fn(), + }; const renderToScreen = vi.fn(() => renderGate); const render = new StoryRender( @@ -250,11 +267,16 @@ describe('StoryRender', () => { name: 'name', tags: [], applyLoaders: vi.fn(), + applyBeforeEach: vi.fn(), unboundStoryFn: vi.fn(), playFunction: vi.fn(() => playGate), prepareContext: vi.fn(), }; - const store = { getStoryContext: () => ({}), cleanupStory: vi.fn() }; + const store = { + getStoryContext: () => ({}), + cleanupStory: vi.fn(), + addCleanupCallbacks: vi.fn(), + }; const render = new StoryRender( new Channel({}), @@ -269,7 +291,8 @@ describe('StoryRender', () => { // Act - render (blocked by playFn), teardown render.renderToElement({} as any); - await tick(); // go from 'loading' to 'playing' phase + await tick(); // go from 'loading' to 'beforeEach' phase + await tick(); // go from 'beforeEach' to 'playing' phase expect(story.playFunction).toHaveBeenCalledOnce(); expect(render.phase).toBe('playing'); render.teardown(); @@ -290,11 +313,16 @@ describe('StoryRender', () => { name: 'name', tags: [], applyLoaders: vi.fn(() => loaderGate), + applyBeforeEach: vi.fn(), unboundStoryFn: vi.fn(), playFunction: vi.fn(), prepareContext: vi.fn(), }; - const store = { getStoryContext: () => ({}), cleanupStory: vi.fn() }; + const store = { + getStoryContext: () => ({}), + cleanupStory: vi.fn(), + addCleanupCallbacks: vi.fn(), + }; const render = new StoryRender( new Channel({}), store as any, diff --git a/code/lib/preview-api/src/modules/store/StoryStore.test.ts b/code/lib/preview-api/src/modules/store/StoryStore.test.ts index 85ba8a584e42..6117e5592f4e 100644 --- a/code/lib/preview-api/src/modules/store/StoryStore.test.ts +++ b/code/lib/preview-api/src/modules/store/StoryStore.test.ts @@ -621,6 +621,7 @@ describe('StoryStore', () => { expect(store.raw()).toMatchInlineSnapshot(` [ { + "applyBeforeEach": [Function], "applyLoaders": [Function], "argTypes": { "a": { @@ -666,6 +667,7 @@ describe('StoryStore', () => { "undecoratedStoryFn": [Function], }, { + "applyBeforeEach": [Function], "applyLoaders": [Function], "argTypes": { "a": { @@ -711,6 +713,7 @@ describe('StoryStore', () => { "undecoratedStoryFn": [Function], }, { + "applyBeforeEach": [Function], "applyLoaders": [Function], "argTypes": { "a": { diff --git a/code/lib/preview-api/src/modules/store/csf/composeConfigs.test.ts b/code/lib/preview-api/src/modules/store/csf/composeConfigs.test.ts index 147038a5a8d2..bfad2ebe5f21 100644 --- a/code/lib/preview-api/src/modules/store/csf/composeConfigs.test.ts +++ b/code/lib/preview-api/src/modules/store/csf/composeConfigs.test.ts @@ -21,6 +21,7 @@ describe('composeConfigs', () => { globals: {}, globalTypes: {}, loaders: [], + beforeEach: [], runStep: expect.any(Function), }); }); @@ -45,6 +46,7 @@ describe('composeConfigs', () => { globals: {}, globalTypes: {}, loaders: [], + beforeEach: [], runStep: expect.any(Function), }); }); @@ -73,6 +75,7 @@ describe('composeConfigs', () => { globals: {}, globalTypes: {}, loaders: [], + beforeEach: [], runStep: expect.any(Function), }); }); @@ -107,6 +110,7 @@ describe('composeConfigs', () => { globals: { x: '2', y: '1', z: '2', obj: { a: '2', c: '2' } }, globalTypes: { x: '2', y: '1', z: '2', obj: { a: '2', c: '2' } }, loaders: [], + beforeEach: [], runStep: expect.any(Function), }); }); @@ -144,6 +148,7 @@ describe('composeConfigs', () => { globals: { x: '2', y: '1', z: '2', obj: { a: '2', c: '2' } }, globalTypes: { x: '2', y: '1', z: '2', obj: { a: '2', c: '2' } }, loaders: [], + beforeEach: [], runStep: expect.any(Function), }); }); @@ -172,6 +177,7 @@ describe('composeConfigs', () => { globals: {}, globalTypes: {}, loaders: ['1', '2', '3', '4'], + beforeEach: [], runStep: expect.any(Function), }); }); @@ -200,6 +206,7 @@ describe('composeConfigs', () => { globals: {}, globalTypes: {}, loaders: ['1', '2', '3'], + beforeEach: [], runStep: expect.any(Function), }); }); @@ -224,6 +231,7 @@ describe('composeConfigs', () => { globals: {}, globalTypes: {}, loaders: [], + beforeEach: [], runStep: expect.any(Function), }); }); @@ -249,6 +257,7 @@ describe('composeConfigs', () => { globals: {}, globalTypes: {}, loaders: [], + beforeEach: [], runStep: expect.any(Function), }); }); @@ -277,6 +286,7 @@ describe('composeConfigs', () => { globals: {}, globalTypes: {}, loaders: [], + beforeEach: [], render: 'render-2', renderToCanvas: 'renderToCanvas-2', applyDecorators: 'applyDecorators-2', diff --git a/code/lib/preview-api/src/modules/store/csf/normalizeStory.test.ts b/code/lib/preview-api/src/modules/store/csf/normalizeStory.test.ts index a4bf5a04fdeb..f9e4b9cdca92 100644 --- a/code/lib/preview-api/src/modules/store/csf/normalizeStory.test.ts +++ b/code/lib/preview-api/src/modules/store/csf/normalizeStory.test.ts @@ -51,6 +51,7 @@ describe('normalizeStory', () => { { "argTypes": {}, "args": {}, + "beforeEach": [], "decorators": [], "id": "title--story-export", "loaders": [], @@ -120,6 +121,7 @@ describe('normalizeStory', () => { { "argTypes": {}, "args": {}, + "beforeEach": [], "decorators": [], "id": "title--story-export", "loaders": [], @@ -156,6 +158,7 @@ describe('normalizeStory', () => { "args": { "storyArg": "val", }, + "beforeEach": [], "decorators": [ [Function], ], @@ -211,6 +214,7 @@ describe('normalizeStory', () => { "storyArg": "val", "storyArg2": "legacy", }, + "beforeEach": [], "decorators": [ [Function], [Function], 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 b05485e5a506..5d5389beeb36 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 @@ -718,6 +718,7 @@ describe('prepareMeta', () => { name: storyName, story, applyLoaders, + applyBeforeEach, originalStoryFn, unboundStoryFn, undecoratedStoryFn, diff --git a/code/renderers/react/template/stories/docgen-components/10017-ts-union/argTypes.snapshot b/code/renderers/react/template/stories/docgen-components/10017-ts-union/argTypes.snapshot index a8f478974310..0b533788e837 100644 --- a/code/renderers/react/template/stories/docgen-components/10017-ts-union/argTypes.snapshot +++ b/code/renderers/react/template/stories/docgen-components/10017-ts-union/argTypes.snapshot @@ -6,7 +6,7 @@ "description": "specify icon="search" or icon={IconComponent}", "name": "icon", "table": { - "defaultValue": null, + "defaultValue": undefined, "jsDocTags": undefined, "type": { "detail": undefined, diff --git a/code/renderers/react/template/stories/docgen-components/10278-ts-multiple-components/argTypes.snapshot b/code/renderers/react/template/stories/docgen-components/10278-ts-multiple-components/argTypes.snapshot index 78a50d36f3ca..82355abfb51b 100644 --- a/code/renderers/react/template/stories/docgen-components/10278-ts-multiple-components/argTypes.snapshot +++ b/code/renderers/react/template/stories/docgen-components/10278-ts-multiple-components/argTypes.snapshot @@ -6,7 +6,7 @@ "description": "", "name": "aProperty", "table": { - "defaultValue": null, + "defaultValue": undefined, "jsDocTags": undefined, "type": { "detail": undefined, diff --git a/code/renderers/react/template/stories/docgen-components/8140-js-prop-types-oneof/argTypes.snapshot b/code/renderers/react/template/stories/docgen-components/8140-js-prop-types-oneof/argTypes.snapshot index 7b21f298a2b6..af4ea9528f45 100644 --- a/code/renderers/react/template/stories/docgen-components/8140-js-prop-types-oneof/argTypes.snapshot +++ b/code/renderers/react/template/stories/docgen-components/8140-js-prop-types-oneof/argTypes.snapshot @@ -6,7 +6,7 @@ "description": "No background or border if static alert", "name": "blank", "table": { - "defaultValue": null, + "defaultValue": undefined, "jsDocTags": undefined, "type": { "detail": undefined, @@ -25,7 +25,7 @@ "description": "Allows icon override, accepts material icon name", "name": "icon", "table": { - "defaultValue": null, + "defaultValue": undefined, "jsDocTags": undefined, "type": { "detail": undefined, @@ -44,7 +44,7 @@ "description": "", "name": "message", "table": { - "defaultValue": null, + "defaultValue": undefined, "jsDocTags": undefined, "type": { "detail": undefined, diff --git a/code/renderers/react/template/stories/docgen-components/8143-ts-imported-types/argTypes.snapshot b/code/renderers/react/template/stories/docgen-components/8143-ts-imported-types/argTypes.snapshot index f95af2d02b91..ac64197be1b9 100644 --- a/code/renderers/react/template/stories/docgen-components/8143-ts-imported-types/argTypes.snapshot +++ b/code/renderers/react/template/stories/docgen-components/8143-ts-imported-types/argTypes.snapshot @@ -6,7 +6,7 @@ "description": "", "name": "bar", "table": { - "defaultValue": null, + "defaultValue": undefined, "jsDocTags": undefined, "type": { "detail": undefined, diff --git a/code/renderers/react/template/stories/docgen-components/8428-js-static-prop-types/argTypes.snapshot b/code/renderers/react/template/stories/docgen-components/8428-js-static-prop-types/argTypes.snapshot index 4e6031c33335..70cdd2d53019 100644 --- a/code/renderers/react/template/stories/docgen-components/8428-js-static-prop-types/argTypes.snapshot +++ b/code/renderers/react/template/stories/docgen-components/8428-js-static-prop-types/argTypes.snapshot @@ -6,7 +6,7 @@ "description": "Please work...", "name": "test", "table": { - "defaultValue": null, + "defaultValue": undefined, "jsDocTags": undefined, "type": { "detail": undefined, diff --git a/code/renderers/react/template/stories/docgen-components/9023-js-hoc/argTypes.snapshot b/code/renderers/react/template/stories/docgen-components/9023-js-hoc/argTypes.snapshot index a243641da870..32718313fe4e 100644 --- a/code/renderers/react/template/stories/docgen-components/9023-js-hoc/argTypes.snapshot +++ b/code/renderers/react/template/stories/docgen-components/9023-js-hoc/argTypes.snapshot @@ -6,7 +6,7 @@ "description": "", "name": "classes", "table": { - "defaultValue": null, + "defaultValue": undefined, "jsDocTags": undefined, "type": { "detail": undefined, @@ -47,7 +47,7 @@ "description": "", "name": "icon", "table": { - "defaultValue": null, + "defaultValue": undefined, "jsDocTags": undefined, "type": { "detail": undefined, diff --git a/code/renderers/react/template/stories/docgen-components/9399-js-proptypes-shape/argTypes.snapshot b/code/renderers/react/template/stories/docgen-components/9399-js-proptypes-shape/argTypes.snapshot index 619552956691..08e3d4d50f67 100644 --- a/code/renderers/react/template/stories/docgen-components/9399-js-proptypes-shape/argTypes.snapshot +++ b/code/renderers/react/template/stories/docgen-components/9399-js-proptypes-shape/argTypes.snapshot @@ -6,7 +6,7 @@ "description": "", "name": "areas", "table": { - "defaultValue": null, + "defaultValue": undefined, "jsDocTags": undefined, "type": { "detail": "[object]", diff --git a/code/renderers/react/template/stories/docgen-components/9493-ts-display-name/argTypes.snapshot b/code/renderers/react/template/stories/docgen-components/9493-ts-display-name/argTypes.snapshot index 1937e2f0b929..5b86db7699ab 100644 --- a/code/renderers/react/template/stories/docgen-components/9493-ts-display-name/argTypes.snapshot +++ b/code/renderers/react/template/stories/docgen-components/9493-ts-display-name/argTypes.snapshot @@ -6,7 +6,7 @@ "description": "A message alerting about Empire activities.", "name": "message", "table": { - "defaultValue": null, + "defaultValue": undefined, "jsDocTags": undefined, "type": { "detail": undefined, diff --git a/code/renderers/react/template/stories/docgen-components/9586-js-react-memo/argTypes.snapshot b/code/renderers/react/template/stories/docgen-components/9586-js-react-memo/argTypes.snapshot index 08c5a1cadec0..927cda14fc96 100644 --- a/code/renderers/react/template/stories/docgen-components/9586-js-react-memo/argTypes.snapshot +++ b/code/renderers/react/template/stories/docgen-components/9586-js-react-memo/argTypes.snapshot @@ -6,7 +6,7 @@ "description": "", "name": "label", "table": { - "defaultValue": null, + "defaultValue": undefined, "jsDocTags": undefined, "type": { "detail": undefined, @@ -22,7 +22,7 @@ "description": "", "name": "onClick", "table": { - "defaultValue": null, + "defaultValue": undefined, "jsDocTags": undefined, "type": { "detail": undefined, diff --git a/code/renderers/react/template/stories/docgen-components/9591-ts-import-types/argTypes.snapshot b/code/renderers/react/template/stories/docgen-components/9591-ts-import-types/argTypes.snapshot index d6450dd81aae..83d91924fb0c 100644 --- a/code/renderers/react/template/stories/docgen-components/9591-ts-import-types/argTypes.snapshot +++ b/code/renderers/react/template/stories/docgen-components/9591-ts-import-types/argTypes.snapshot @@ -6,7 +6,7 @@ "description": "", "name": "other", "table": { - "defaultValue": null, + "defaultValue": undefined, "jsDocTags": undefined, "type": { "detail": undefined, diff --git a/code/renderers/react/template/stories/docgen-components/9668-js-proptypes-no-jsdoc/argTypes.snapshot b/code/renderers/react/template/stories/docgen-components/9668-js-proptypes-no-jsdoc/argTypes.snapshot index 42a58cd67545..590f3741b90b 100644 --- a/code/renderers/react/template/stories/docgen-components/9668-js-proptypes-no-jsdoc/argTypes.snapshot +++ b/code/renderers/react/template/stories/docgen-components/9668-js-proptypes-no-jsdoc/argTypes.snapshot @@ -6,7 +6,7 @@ "description": "", "name": "heads", "table": { - "defaultValue": null, + "defaultValue": undefined, "jsDocTags": undefined, "type": { "detail": undefined, @@ -23,7 +23,7 @@ "description": "", "name": "onAddClick", "table": { - "defaultValue": null, + "defaultValue": undefined, "jsDocTags": undefined, "type": { "detail": undefined, diff --git a/code/renderers/react/template/stories/docgen-components/9721-ts-deprecated-jsdoc/argTypes.snapshot b/code/renderers/react/template/stories/docgen-components/9721-ts-deprecated-jsdoc/argTypes.snapshot index fbce25797699..e58f2727aefc 100644 --- a/code/renderers/react/template/stories/docgen-components/9721-ts-deprecated-jsdoc/argTypes.snapshot +++ b/code/renderers/react/template/stories/docgen-components/9721-ts-deprecated-jsdoc/argTypes.snapshot @@ -6,7 +6,7 @@ "description": "The size (replaces width)", "name": "size", "table": { - "defaultValue": null, + "defaultValue": undefined, "jsDocTags": undefined, "type": { "detail": undefined, diff --git a/code/renderers/react/template/stories/docgen-components/9764-ts-extend-props/argTypes.snapshot b/code/renderers/react/template/stories/docgen-components/9764-ts-extend-props/argTypes.snapshot index 61caa309227d..5c8758c8de31 100644 --- a/code/renderers/react/template/stories/docgen-components/9764-ts-extend-props/argTypes.snapshot +++ b/code/renderers/react/template/stories/docgen-components/9764-ts-extend-props/argTypes.snapshot @@ -6,7 +6,7 @@ "description": "", "name": "checked", "table": { - "defaultValue": null, + "defaultValue": undefined, "jsDocTags": undefined, "type": { "detail": undefined, @@ -25,7 +25,7 @@ "description": "", "name": "defaultChecked", "table": { - "defaultValue": null, + "defaultValue": undefined, "jsDocTags": undefined, "type": { "detail": undefined, @@ -44,7 +44,7 @@ "description": "The input content value", "name": "value", "table": { - "defaultValue": null, + "defaultValue": undefined, "jsDocTags": undefined, "type": { "detail": undefined, diff --git a/code/renderers/react/template/stories/docgen-components/9827-ts-default-values/argTypes.snapshot b/code/renderers/react/template/stories/docgen-components/9827-ts-default-values/argTypes.snapshot index 78780fc49909..84a578fb287c 100644 --- a/code/renderers/react/template/stories/docgen-components/9827-ts-default-values/argTypes.snapshot +++ b/code/renderers/react/template/stories/docgen-components/9827-ts-default-values/argTypes.snapshot @@ -6,7 +6,7 @@ "description": "", "name": "bar", "table": { - "defaultValue": null, + "defaultValue": undefined, "jsDocTags": undefined, "type": { "detail": undefined, @@ -31,7 +31,7 @@ "description": "", "name": "foo", "table": { - "defaultValue": null, + "defaultValue": undefined, "jsDocTags": undefined, "type": { "detail": undefined, diff --git a/code/renderers/react/template/stories/docgen-components/9922-ts-component-props/argTypes.snapshot b/code/renderers/react/template/stories/docgen-components/9922-ts-component-props/argTypes.snapshot index 222aace445d3..2d1174767e7b 100644 --- a/code/renderers/react/template/stories/docgen-components/9922-ts-component-props/argTypes.snapshot +++ b/code/renderers/react/template/stories/docgen-components/9922-ts-component-props/argTypes.snapshot @@ -6,7 +6,7 @@ "description": "", "name": "spacing", "table": { - "defaultValue": null, + "defaultValue": undefined, "jsDocTags": undefined, "type": { "detail": undefined, diff --git a/code/renderers/react/template/stories/docgen-components/jsdoc/argTypes.snapshot b/code/renderers/react/template/stories/docgen-components/jsdoc/argTypes.snapshot index c37916b55746..492640c6e1be 100644 --- a/code/renderers/react/template/stories/docgen-components/jsdoc/argTypes.snapshot +++ b/code/renderers/react/template/stories/docgen-components/jsdoc/argTypes.snapshot @@ -6,7 +6,7 @@ "description": "simple description.", "name": "case1", "table": { - "defaultValue": null, + "defaultValue": undefined, "jsDocTags": undefined, "type": { "detail": undefined, @@ -22,7 +22,7 @@ "description": "param with name", "name": "case10", "table": { - "defaultValue": null, + "defaultValue": undefined, "jsDocTags": { "deprecated": null, "ignore": false, @@ -48,7 +48,7 @@ "description": "param with name & type", "name": "case11", "table": { - "defaultValue": null, + "defaultValue": undefined, "jsDocTags": { "deprecated": null, "ignore": false, @@ -74,7 +74,7 @@ "description": "param with name, type & description", "name": "case12", "table": { - "defaultValue": null, + "defaultValue": undefined, "jsDocTags": { "deprecated": null, "ignore": false, @@ -100,7 +100,7 @@ "description": "param with type", "name": "case13", "table": { - "defaultValue": null, + "defaultValue": undefined, "jsDocTags": { "deprecated": null, "ignore": false, @@ -126,7 +126,7 @@ "description": "param with type & description", "name": "case14", "table": { - "defaultValue": null, + "defaultValue": undefined, "jsDocTags": undefined, "type": { "detail": undefined, @@ -142,7 +142,7 @@ "description": "param with name & description", "name": "case15", "table": { - "defaultValue": null, + "defaultValue": undefined, "jsDocTags": { "deprecated": null, "ignore": false, @@ -168,7 +168,7 @@ "description": "autofix event-", "name": "case16", "table": { - "defaultValue": null, + "defaultValue": undefined, "jsDocTags": { "deprecated": null, "ignore": false, @@ -194,7 +194,7 @@ "description": "autofix event.", "name": "case17", "table": { - "defaultValue": null, + "defaultValue": undefined, "jsDocTags": { "deprecated": null, "ignore": false, @@ -227,7 +227,7 @@ "description": "with an empty param.", "name": "case18", "table": { - "defaultValue": null, + "defaultValue": undefined, "jsDocTags": undefined, "type": { "detail": undefined, @@ -243,7 +243,7 @@ "description": "with multiple empty params.", "name": "case19", "table": { - "defaultValue": null, + "defaultValue": undefined, "jsDocTags": undefined, "type": { "detail": undefined, @@ -264,7 +264,7 @@ lines description", "name": "case2", "table": { - "defaultValue": null, + "defaultValue": undefined, "jsDocTags": undefined, "type": { "detail": undefined, @@ -280,7 +280,7 @@ description", "description": "with arg alias.", "name": "case20", "table": { - "defaultValue": null, + "defaultValue": undefined, "jsDocTags": { "deprecated": null, "ignore": false, @@ -306,7 +306,7 @@ description", "description": "with argument alias.", "name": "case21", "table": { - "defaultValue": null, + "defaultValue": undefined, "jsDocTags": { "deprecated": null, "ignore": false, @@ -332,7 +332,7 @@ description", "description": "with multiple params.", "name": "case22", "table": { - "defaultValue": null, + "defaultValue": undefined, "jsDocTags": { "deprecated": null, "ignore": false, @@ -366,7 +366,7 @@ description", "description": "with an empty returns", "name": "case23", "table": { - "defaultValue": null, + "defaultValue": undefined, "jsDocTags": undefined, "type": { "detail": undefined, @@ -382,7 +382,7 @@ description", "description": "with a returns with a type", "name": "case24", "table": { - "defaultValue": null, + "defaultValue": undefined, "jsDocTags": { "deprecated": null, "ignore": false, @@ -410,7 +410,7 @@ description", "description": "with a returns with a type & description", "name": "case25", "table": { - "defaultValue": null, + "defaultValue": undefined, "jsDocTags": { "deprecated": null, "ignore": false, @@ -438,7 +438,7 @@ description", "description": "single param and a returns", "name": "case26", "table": { - "defaultValue": null, + "defaultValue": undefined, "jsDocTags": { "deprecated": null, "ignore": false, @@ -471,7 +471,7 @@ description", "description": "multiple params and a returns", "name": "case27", "table": { - "defaultValue": null, + "defaultValue": undefined, "jsDocTags": { "deprecated": null, "ignore": false, @@ -508,7 +508,7 @@ description", "description": "multiple returns", "name": "case28", "table": { - "defaultValue": null, + "defaultValue": undefined, "jsDocTags": { "deprecated": null, "ignore": false, @@ -536,7 +536,7 @@ description", "description": "param with unsupported JSDoc tags", "name": "case29", "table": { - "defaultValue": null, + "defaultValue": undefined, "jsDocTags": { "deprecated": null, "ignore": false, @@ -565,7 +565,7 @@ description", "description": "*description* **with** `formatting`", "name": "case3", "table": { - "defaultValue": null, + "defaultValue": undefined, "jsDocTags": undefined, "type": { "detail": undefined, @@ -581,7 +581,7 @@ description", "description": "param record type", "name": "case30", "table": { - "defaultValue": null, + "defaultValue": undefined, "jsDocTags": { "deprecated": null, "ignore": false, @@ -607,7 +607,7 @@ description", "description": "param array type", "name": "case31", "table": { - "defaultValue": null, + "defaultValue": undefined, "jsDocTags": { "deprecated": null, "ignore": false, @@ -633,7 +633,7 @@ description", "description": "param union type", "name": "case32", "table": { - "defaultValue": null, + "defaultValue": undefined, "jsDocTags": { "deprecated": null, "ignore": false, @@ -659,7 +659,7 @@ description", "description": "param any type", "name": "case33", "table": { - "defaultValue": null, + "defaultValue": undefined, "jsDocTags": { "deprecated": null, "ignore": false, @@ -685,7 +685,7 @@ description", "description": "param repeatable type", "name": "case34", "table": { - "defaultValue": null, + "defaultValue": undefined, "jsDocTags": { "deprecated": null, "ignore": false, @@ -711,7 +711,7 @@ description", "description": "optional param", "name": "case35", "table": { - "defaultValue": null, + "defaultValue": undefined, "jsDocTags": { "deprecated": null, "ignore": false, @@ -737,7 +737,7 @@ description", "description": "optional param", "name": "case36", "table": { - "defaultValue": null, + "defaultValue": undefined, "jsDocTags": { "deprecated": null, "ignore": false, @@ -763,7 +763,7 @@ description", "description": "dot in param name", "name": "case37", "table": { - "defaultValue": null, + "defaultValue": undefined, "jsDocTags": { "deprecated": null, "ignore": false, @@ -789,7 +789,7 @@ description", "description": "returns record type", "name": "case38", "table": { - "defaultValue": null, + "defaultValue": undefined, "jsDocTags": { "deprecated": null, "ignore": false, @@ -834,7 +834,7 @@ description", "description": "returns array type", "name": "case39", "table": { - "defaultValue": null, + "defaultValue": undefined, "jsDocTags": { "deprecated": null, "ignore": false, @@ -874,7 +874,7 @@ description", "description": "simple description and dummy JSDoc tag.", "name": "case4", "table": { - "defaultValue": null, + "defaultValue": undefined, "jsDocTags": { "deprecated": null, "ignore": false, @@ -900,7 +900,7 @@ description", "description": "returns union type", "name": "case40", "table": { - "defaultValue": null, + "defaultValue": undefined, "jsDocTags": { "deprecated": null, "ignore": false, @@ -937,7 +937,7 @@ description", "description": "returns any type", "name": "case41", "table": { - "defaultValue": null, + "defaultValue": undefined, "jsDocTags": { "deprecated": null, "ignore": false, @@ -964,7 +964,7 @@ description", "description": "returns primitive", "name": "case42", "table": { - "defaultValue": null, + "defaultValue": undefined, "jsDocTags": { "deprecated": null, "ignore": false, @@ -992,7 +992,7 @@ description", "description": "returns void", "name": "case43", "table": { - "defaultValue": null, + "defaultValue": undefined, "jsDocTags": { "deprecated": null, "ignore": false, @@ -1023,7 +1023,7 @@ description", "description": "", "name": "case5", "table": { - "defaultValue": null, + "defaultValue": undefined, "jsDocTags": { "deprecated": null, "ignore": false, @@ -1052,7 +1052,7 @@ description", "description": "simple description with a @.", "name": "case6", "table": { - "defaultValue": null, + "defaultValue": undefined, "jsDocTags": undefined, "type": { "detail": undefined, @@ -1068,7 +1068,7 @@ description", "description": "", "name": "case7", "table": { - "defaultValue": null, + "defaultValue": undefined, "jsDocTags": undefined, "type": { "detail": undefined, @@ -1084,7 +1084,7 @@ description", "description": "func with a simple description.", "name": "case8", "table": { - "defaultValue": null, + "defaultValue": undefined, "jsDocTags": undefined, "type": { "detail": undefined, @@ -1100,7 +1100,7 @@ description", "description": "", "name": "case9", "table": { - "defaultValue": null, + "defaultValue": undefined, "jsDocTags": { "deprecated": null, "ignore": false, diff --git a/code/renderers/react/template/stories/docgen-components/ts-types/argTypes.snapshot b/code/renderers/react/template/stories/docgen-components/ts-types/argTypes.snapshot index 73094699e177..21ff1cd3a802 100644 --- a/code/renderers/react/template/stories/docgen-components/ts-types/argTypes.snapshot +++ b/code/renderers/react/template/stories/docgen-components/ts-types/argTypes.snapshot @@ -365,7 +365,7 @@ "description": undefined, "name": "nullableComplexTypeUndefinedDefaultValue", "table": { - "defaultValue": null, + "defaultValue": undefined, "jsDocTags": undefined, "type": { "detail": undefined, diff --git a/code/renderers/vue3/src/docs/__snapshots__/extractArgTypes.test.ts.snap b/code/renderers/vue3/src/docs/__snapshots__/extractArgTypes.test.ts.snap index 164f338725e3..cbe74a47b7d6 100644 --- a/code/renderers/vue3/src/docs/__snapshots__/extractArgTypes.test.ts.snap +++ b/code/renderers/vue3/src/docs/__snapshots__/extractArgTypes.test.ts.snap @@ -66,7 +66,7 @@ exports[`extractArgTypes (vue-docgen-api) > should extract events for component "name": "bar", "table": { "category": "events", - "defaultValue": null, + "defaultValue": undefined, "jsDocTags": undefined, "type": { "summary": "{ year: number; title?: any }", @@ -86,7 +86,7 @@ exports[`extractArgTypes (vue-docgen-api) > should extract events for component "name": "baz", "table": { "category": "events", - "defaultValue": null, + "defaultValue": undefined, "jsDocTags": undefined, "type": undefined, }, @@ -109,7 +109,7 @@ exports[`extractArgTypes (vue-docgen-api) > should extract expose for component "name": "count", "table": { "category": "expose", - "defaultValue": null, + "defaultValue": undefined, "jsDocTags": undefined, "type": undefined, }, @@ -126,7 +126,7 @@ exports[`extractArgTypes (vue-docgen-api) > should extract expose for component "name": "label", "table": { "category": "expose", - "defaultValue": null, + "defaultValue": undefined, "jsDocTags": undefined, "type": undefined, }, @@ -510,7 +510,7 @@ exports[`extractArgTypes (vue-docgen-api) > should extract props for component 2 "name": "array", "table": { "category": "props", - "defaultValue": null, + "defaultValue": undefined, "jsDocTags": undefined, "type": { "summary": "MyNestedProps[]", @@ -527,7 +527,7 @@ exports[`extractArgTypes (vue-docgen-api) > should extract props for component 2 "name": "arrayOptional", "table": { "category": "props", - "defaultValue": null, + "defaultValue": undefined, "jsDocTags": undefined, "type": { "summary": "MyNestedProps[]", @@ -562,7 +562,7 @@ exports[`extractArgTypes (vue-docgen-api) > should extract props for component 2 "name": "baz", "table": { "category": "props", - "defaultValue": null, + "defaultValue": undefined, "jsDocTags": undefined, "type": { "summary": "boolean", @@ -578,7 +578,7 @@ exports[`extractArgTypes (vue-docgen-api) > should extract props for component 2 "name": "enumValue", "table": { "category": "props", - "defaultValue": null, + "defaultValue": undefined, "jsDocTags": undefined, "type": { "summary": "MyEnum", @@ -595,7 +595,7 @@ exports[`extractArgTypes (vue-docgen-api) > should extract props for component 2 "name": "foo", "table": { "category": "props", - "defaultValue": null, + "defaultValue": undefined, "jsDocTags": undefined, "type": { "summary": "string", @@ -611,7 +611,7 @@ exports[`extractArgTypes (vue-docgen-api) > should extract props for component 2 "name": "inlined", "table": { "category": "props", - "defaultValue": null, + "defaultValue": undefined, "jsDocTags": undefined, "type": { "summary": "{ foo: string }", @@ -628,7 +628,7 @@ exports[`extractArgTypes (vue-docgen-api) > should extract props for component 2 "name": "literalFromContext", "table": { "category": "props", - "defaultValue": null, + "defaultValue": undefined, "jsDocTags": undefined, "type": { "summary": "MyCategories", @@ -645,7 +645,7 @@ exports[`extractArgTypes (vue-docgen-api) > should extract props for component 2 "name": "nested", "table": { "category": "props", - "defaultValue": null, + "defaultValue": undefined, "jsDocTags": undefined, "type": { "summary": "MyNestedProps", @@ -662,7 +662,7 @@ exports[`extractArgTypes (vue-docgen-api) > should extract props for component 2 "name": "nestedIntersection", "table": { "category": "props", - "defaultValue": null, + "defaultValue": undefined, "jsDocTags": undefined, "type": { "summary": "MyNestedProps & { @@ -684,7 +684,7 @@ exports[`extractArgTypes (vue-docgen-api) > should extract props for component 2 "name": "nestedOptional", "table": { "category": "props", - "defaultValue": null, + "defaultValue": undefined, "jsDocTags": undefined, "type": { "summary": "MyNestedProps | MyIgnoredNestedProps", @@ -710,7 +710,7 @@ exports[`extractArgTypes (vue-docgen-api) > should extract props for component 2 "name": "recursive", "table": { "category": "props", - "defaultValue": null, + "defaultValue": undefined, "jsDocTags": undefined, "type": { "summary": "MyNestedRecursiveProps", @@ -746,7 +746,7 @@ exports[`extractArgTypes (vue-docgen-api) > should extract props for component 2 "name": "union", "table": { "category": "props", - "defaultValue": null, + "defaultValue": undefined, "jsDocTags": undefined, "type": { "summary": "string | number", @@ -770,7 +770,7 @@ exports[`extractArgTypes (vue-docgen-api) > should extract props for component 2 "name": "unionOptional", "table": { "category": "props", - "defaultValue": null, + "defaultValue": undefined, "jsDocTags": undefined, "type": { "summary": "string | number | boolean", @@ -802,7 +802,7 @@ exports[`extractArgTypes (vue-docgen-api) > should extract slots for component 1 "name": "default", "table": { "category": "slots", - "defaultValue": null, + "defaultValue": undefined, "jsDocTags": undefined, "type": { "summary": "{ num: unknown }", @@ -819,7 +819,7 @@ exports[`extractArgTypes (vue-docgen-api) > should extract slots for component 1 "name": "named", "table": { "category": "slots", - "defaultValue": null, + "defaultValue": undefined, "jsDocTags": undefined, "type": { "summary": "{ str: unknown }", @@ -836,7 +836,7 @@ exports[`extractArgTypes (vue-docgen-api) > should extract slots for component 1 "name": "no-bind", "table": { "category": "slots", - "defaultValue": null, + "defaultValue": undefined, "jsDocTags": undefined, "type": undefined, }, @@ -851,7 +851,7 @@ exports[`extractArgTypes (vue-docgen-api) > should extract slots for component 1 "name": "vbind", "table": { "category": "slots", - "defaultValue": null, + "defaultValue": undefined, "jsDocTags": undefined, "type": { "summary": "{ num: unknown; str: unknown }", From a4add692d9ed9e41059fa8539666389ede8a7658 Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Thu, 11 Apr 2024 16:05:55 +0200 Subject: [PATCH 51/82] Nextjs: Extend mocks for headers, router and navigation + add cache mocks --- code/frameworks/nextjs/package.json | 34 +++++++++++-------- code/frameworks/nextjs/src/cache/index.ts | 4 +++ .../nextjs/src/export-mocks/cache/index.ts | 7 ++++ .../src/{ => export-mocks}/headers/cookies.ts | 0 .../src/{ => export-mocks}/headers/headers.ts | 2 +- .../nextjs/src/export-mocks/headers/index.ts | 6 ++++ .../navigation/index.ts | 12 +++++-- .../{routing => export-mocks}/router/index.ts | 21 ++++++++---- .../nextjs/src/export-mocks/webpack.ts | 33 ++++++++++++++++++ code/frameworks/nextjs/src/globals.d.ts | 12 +++++++ code/frameworks/nextjs/src/headers/index.ts | 2 -- code/frameworks/nextjs/src/headers/webpack.ts | 18 ---------- code/frameworks/nextjs/src/preset.ts | 4 +-- .../{navigation => }/app-router-provider.tsx | 2 +- .../nextjs/src/routing/decorator.tsx | 4 +-- .../{router => }/page-router-provider.tsx | 0 16 files changed, 111 insertions(+), 50 deletions(-) create mode 100644 code/frameworks/nextjs/src/cache/index.ts create mode 100644 code/frameworks/nextjs/src/export-mocks/cache/index.ts rename code/frameworks/nextjs/src/{ => export-mocks}/headers/cookies.ts (100%) rename code/frameworks/nextjs/src/{ => export-mocks}/headers/headers.ts (97%) create mode 100644 code/frameworks/nextjs/src/export-mocks/headers/index.ts rename code/frameworks/nextjs/src/{routing => export-mocks}/navigation/index.ts (81%) rename code/frameworks/nextjs/src/{routing => export-mocks}/router/index.ts (81%) create mode 100644 code/frameworks/nextjs/src/export-mocks/webpack.ts delete mode 100644 code/frameworks/nextjs/src/headers/index.ts delete mode 100644 code/frameworks/nextjs/src/headers/webpack.ts rename code/frameworks/nextjs/src/routing/{navigation => }/app-router-provider.tsx (98%) rename code/frameworks/nextjs/src/routing/{router => }/page-router-provider.tsx (100%) diff --git a/code/frameworks/nextjs/package.json b/code/frameworks/nextjs/package.json index bddeadc7f71e..dd016db3fb95 100644 --- a/code/frameworks/nextjs/package.json +++ b/code/frameworks/nextjs/package.json @@ -48,19 +48,19 @@ "import": "./dist/next-image-loader-stub.mjs" }, "./headers.mock": { - "types": "./dist/headers/index.d.ts", - "require": "./dist/headers/index.js", - "import": "./dist/headers/index.mjs" + "types": "./dist/export-mocks/headers/index.d.ts", + "require": "./dist/export-mocks/headers/index.js", + "import": "./dist/export-mocks/headers/index.mjs" }, "./router.mock": { - "types": "./dist/routing/router/index.d.ts", - "require": "./dist/routing/router/index.js", - "import": "./dist/routing/router/index.mjs" + "types": "./dist/export-mocks/router/index.d.ts", + "require": "./dist/export-mocks/router/index.js", + "import": "./dist/export-mocks/router/index.mjs" }, "./navigation.mock": { - "types": "./dist/routing/navigation/index.d.ts", - "require": "./dist/routing/navigation/index.js", - "import": "./dist/routing/navigation/index.mjs" + "types": "./dist/export-mocks/navigation/index.d.ts", + "require": "./dist/export-mocks/navigation/index.js", + "import": "./dist/export-mocks/navigation/index.mjs" }, "./package.json": "./package.json" }, @@ -75,14 +75,17 @@ "dist/image-context": [ "dist/image-context.d.ts" ], + "cache.mock": [ + "dist/export-mocks/cache/index.d.ts" + ], "headers.mock": [ - "dist/headers/index.d.ts" + "dist/export-mocks/headers/index.d.ts" ], "router.mock": [ - "dist/routing/router/index.d.ts" + "dist/export-mocks/router/index.d.ts" ], "navigation.mock": [ - "dist/routing/navigation/index.d.ts" + "dist/export-mocks/navigation/index.d.ts" ] } }, @@ -183,10 +186,11 @@ "./src/image-context.ts", "./src/index.ts", "./src/preset.ts", - "./src/headers/index.ts", "./src/preview.tsx", - "./src/routing/router/index.ts", - "./src/routing/navigation/index.ts", + "./src/export-mocks/cache/index.ts", + "./src/export-mocks/headers/index.ts", + "./src/export-mocks/router/index.ts", + "./src/export-mocks/navigation/index.ts", "./src/next-image-loader-stub.ts", "./src/images/decorator.tsx", "./src/images/next-legacy-image.tsx", diff --git a/code/frameworks/nextjs/src/cache/index.ts b/code/frameworks/nextjs/src/cache/index.ts new file mode 100644 index 000000000000..c08124c90813 --- /dev/null +++ b/code/frameworks/nextjs/src/cache/index.ts @@ -0,0 +1,4 @@ +import { fn } from '@storybook/test'; + +export * from 'next/cache.actual'; +export const revalidatePath = fn().mockName('revalidatePath'); diff --git a/code/frameworks/nextjs/src/export-mocks/cache/index.ts b/code/frameworks/nextjs/src/export-mocks/cache/index.ts new file mode 100644 index 000000000000..d0a330792713 --- /dev/null +++ b/code/frameworks/nextjs/src/export-mocks/cache/index.ts @@ -0,0 +1,7 @@ +import { fn } from '@storybook/test'; + +// re-exports of the actual module +export * from 'next/cache.actual'; + +// mock utilities/overrides +export const revalidatePath = fn().mockName('revalidatePath'); diff --git a/code/frameworks/nextjs/src/headers/cookies.ts b/code/frameworks/nextjs/src/export-mocks/headers/cookies.ts similarity index 100% rename from code/frameworks/nextjs/src/headers/cookies.ts rename to code/frameworks/nextjs/src/export-mocks/headers/cookies.ts diff --git a/code/frameworks/nextjs/src/headers/headers.ts b/code/frameworks/nextjs/src/export-mocks/headers/headers.ts similarity index 97% rename from code/frameworks/nextjs/src/headers/headers.ts rename to code/frameworks/nextjs/src/export-mocks/headers/headers.ts index 13d55b95e7d4..a7511064fa1f 100644 --- a/code/frameworks/nextjs/src/headers/headers.ts +++ b/code/frameworks/nextjs/src/export-mocks/headers/headers.ts @@ -5,7 +5,7 @@ import type { HeadersAdapter } from 'next/dist/server/web/spec-extension/adapter // Mostly copied from https://github.com/vercel/next.js/blob/763b9a660433ec5278a10e59d7ae89d4010ba212/packages/next/src/server/web/spec-extension/adapters/headers.ts#L20 // @ts-expect-error unfortunately the headers property is private (and not protected) in HeadersAdapter // and we can't access it so we need to redefine it, but that clashes with the type, hence the ts-expect-error comment. -export class HeadersAdapterMock extends Headers implements HeadersAdapter { +class HeadersAdapterMock extends Headers implements HeadersAdapter { private headers: IncomingHttpHeaders = {}; /** diff --git a/code/frameworks/nextjs/src/export-mocks/headers/index.ts b/code/frameworks/nextjs/src/export-mocks/headers/index.ts new file mode 100644 index 000000000000..7c2114456dc0 --- /dev/null +++ b/code/frameworks/nextjs/src/export-mocks/headers/index.ts @@ -0,0 +1,6 @@ +// re-exports of the actual module +export * from 'next/headers.actual'; + +// mock utilities/overrides +export { headers } from './headers'; +export { cookies } from './cookies'; diff --git a/code/frameworks/nextjs/src/routing/navigation/index.ts b/code/frameworks/nextjs/src/export-mocks/navigation/index.ts similarity index 81% rename from code/frameworks/nextjs/src/routing/navigation/index.ts rename to code/frameworks/nextjs/src/export-mocks/navigation/index.ts index e8373107bb86..bba55c218065 100644 --- a/code/frameworks/nextjs/src/routing/navigation/index.ts +++ b/code/frameworks/nextjs/src/export-mocks/navigation/index.ts @@ -16,7 +16,7 @@ let navigationAPI: { * @ignore * @internal * */ -export const createNavigation = (overrides: any) => { +const createNavigation = (overrides: any) => { const navigationActions = { push: fn().mockName('useRouter().push'), replace: fn().mockName('useRouter().replace'), @@ -41,7 +41,7 @@ export const createNavigation = (overrides: any) => { return navigationAPI; }; -export const getRouter = () => { +const getRouter = () => { if (!navigationAPI) { throw new NextjsRouterMocksNotAvailable({ importType: 'next/navigation', @@ -50,3 +50,11 @@ export const getRouter = () => { return navigationAPI; }; + +// re-exports of the actual module +export * from 'next/navigation.actual'; + +// mock utilities/overrides +export const redirect = fn().mockName('redirect'); + +export { createNavigation, getRouter }; diff --git a/code/frameworks/nextjs/src/routing/router/index.ts b/code/frameworks/nextjs/src/export-mocks/router/index.ts similarity index 81% rename from code/frameworks/nextjs/src/routing/router/index.ts rename to code/frameworks/nextjs/src/export-mocks/router/index.ts index 922ccca2e5a4..a28fcce2aaae 100644 --- a/code/frameworks/nextjs/src/routing/router/index.ts +++ b/code/frameworks/nextjs/src/export-mocks/router/index.ts @@ -1,8 +1,8 @@ import type { Mock } from '@storybook/test'; import { fn } from '@storybook/test'; import { NextjsRouterMocksNotAvailable } from '@storybook/core-events/preview-errors'; -import type { NextRouter } from 'next/router'; -import singletonRouter from 'next/router'; +import type { NextRouter, SingletonRouter } from 'next/router'; +import singletonRouter from 'next/router.actual'; const defaultRouterState = { route: '/', @@ -36,7 +36,7 @@ let routerAPI: { * @ignore * @internal * */ -export const createRouter = (overrides: Partial) => { +const createRouter = (overrides: Partial) => { const routerActions: Partial = { push: fn((..._args: any[]) => { return Promise.resolve(true); @@ -88,14 +88,14 @@ export const createRouter = (overrides: Partial) => { }; // overwrite the singleton router from next/router - singletonRouter.router = routerAPI as any; - singletonRouter.readyCallbacks.forEach((cb) => cb()); - singletonRouter.readyCallbacks = []; + (singletonRouter as unknown as SingletonRouter).router = routerAPI as any; + (singletonRouter as unknown as SingletonRouter).readyCallbacks.forEach((cb) => cb()); + (singletonRouter as unknown as SingletonRouter).readyCallbacks = []; return routerAPI as unknown as NextRouter; }; -export const getRouter = () => { +const getRouter = () => { if (!routerAPI) { throw new NextjsRouterMocksNotAvailable({ importType: 'next/router', @@ -104,3 +104,10 @@ export const getRouter = () => { return routerAPI; }; + +// re-exports of the actual module +export * from 'next/router.actual'; +export default singletonRouter; + +// mock utilities/overrides +export { createRouter, getRouter }; diff --git a/code/frameworks/nextjs/src/export-mocks/webpack.ts b/code/frameworks/nextjs/src/export-mocks/webpack.ts new file mode 100644 index 000000000000..74d048cd5706 --- /dev/null +++ b/code/frameworks/nextjs/src/export-mocks/webpack.ts @@ -0,0 +1,33 @@ +import { dirname, join } from 'path'; +import type { Configuration as WebpackConfig } from 'webpack'; + +export const configureNextExportMocks = (baseConfig: WebpackConfig): void => { + const resolve = baseConfig.resolve ?? {}; + const packageLocation = dirname(require.resolve('@storybook/nextjs/package.json')); + // Use paths for both next/xyz and @storybook/nextjs/xyz imports + // to make sure they all serve the MJS version of the file + const headersPath = join(packageLocation, '/dist/export-mocks/headers/index.mjs'); + const navigationPath = join(packageLocation, '/dist/export-mocks/navigation/index.mjs'); + const cachePath = join(packageLocation, '/dist/export-mocks/cache/index.mjs'); + const routerPath = join(packageLocation, '/dist/export-mocks/router/index.mjs'); + + resolve.alias = { + ...resolve.alias, + // *.actual paths are used as reexports of the original module + 'next/headers.actual': require.resolve('next/headers'), + 'next/headers': headersPath, + '@storybook/nextjs/headers.mock': headersPath, + + 'next/navigation.actual': require.resolve('next/navigation'), + 'next/navigation': navigationPath, + '@storybook/nextjs/navigation.mock': navigationPath, + + 'next/router.actual': require.resolve('next/router'), + 'next/router': routerPath, + '@storybook/nextjs/router.mock': routerPath, + + 'next/cache.actual': require.resolve('next/cache'), + 'next/cache': cachePath, + '@storybook/nextjs/cache.mock': cachePath, + }; +}; diff --git a/code/frameworks/nextjs/src/globals.d.ts b/code/frameworks/nextjs/src/globals.d.ts index e966d7072a32..58b3cfdf6114 100644 --- a/code/frameworks/nextjs/src/globals.d.ts +++ b/code/frameworks/nextjs/src/globals.d.ts @@ -1,3 +1,15 @@ declare module 'next/dist/compiled'; declare module 'next/dist/compiled/babel/plugin-transform-modules-commonjs'; declare module 'next/dist/compiled/babel/plugin-syntax-jsx'; +declare module 'next/navigation.actual' { + export * from 'next/navigation'; +} +declare module 'next/router.actual' { + export * from 'next/router'; +} +declare module 'next/cache.actual' { + export * from 'next/cache'; +} +declare module 'next/headers.actual' { + export * from 'next/headers'; +} diff --git a/code/frameworks/nextjs/src/headers/index.ts b/code/frameworks/nextjs/src/headers/index.ts deleted file mode 100644 index 160b2e6f37f7..000000000000 --- a/code/frameworks/nextjs/src/headers/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export * from './headers'; -export * from './cookies'; diff --git a/code/frameworks/nextjs/src/headers/webpack.ts b/code/frameworks/nextjs/src/headers/webpack.ts deleted file mode 100644 index fceb5049f6d2..000000000000 --- a/code/frameworks/nextjs/src/headers/webpack.ts +++ /dev/null @@ -1,18 +0,0 @@ -import { dirname, join } from 'path'; -import type { Configuration as WebpackConfig } from 'webpack'; - -export const configureNextHeaders = (baseConfig: WebpackConfig): void => { - const resolve = baseConfig.resolve ?? {}; - // Use headersPath for both next/headers and @storybook/nextjs/headers imports - // to make sure they all serve the MJS version of the file - const headersPath = join( - dirname(require.resolve('@storybook/nextjs/package.json')), - '/dist/headers/index.mjs' - ); - - resolve.alias = { - ...resolve.alias, - 'next/headers': headersPath, - '@storybook/nextjs/headers.mock': headersPath, - }; -}; diff --git a/code/frameworks/nextjs/src/preset.ts b/code/frameworks/nextjs/src/preset.ts index 855dd3961582..0eb9abed9b04 100644 --- a/code/frameworks/nextjs/src/preset.ts +++ b/code/frameworks/nextjs/src/preset.ts @@ -23,7 +23,7 @@ import { configureBabelLoader } from './babel/loader'; import { configureFastRefresh } from './fastRefresh/webpack'; import { configureAliases } from './aliases/webpack'; import { logger } from '@storybook/node-logger'; -import { configureNextHeaders } from './headers/webpack'; +import { configureNextExportMocks } from './export-mocks/webpack'; export const addons: PresetProperty<'addons'> = [ dirname(require.resolve(join('@storybook/preset-react-webpack', 'package.json'))), @@ -135,7 +135,7 @@ export const webpackFinal: StorybookConfig['webpackFinal'] = async (baseConfig, configureStyledJsx(baseConfig); configureNodePolyfills(baseConfig); configureAliases(baseConfig); - configureNextHeaders(baseConfig); + configureNextExportMocks(baseConfig); if (isDevelopment) { configureFastRefresh(baseConfig); diff --git a/code/frameworks/nextjs/src/routing/navigation/app-router-provider.tsx b/code/frameworks/nextjs/src/routing/app-router-provider.tsx similarity index 98% rename from code/frameworks/nextjs/src/routing/navigation/app-router-provider.tsx rename to code/frameworks/nextjs/src/routing/app-router-provider.tsx index 7e26b54e050f..356a8c2b9ed4 100644 --- a/code/frameworks/nextjs/src/routing/navigation/app-router-provider.tsx +++ b/code/frameworks/nextjs/src/routing/app-router-provider.tsx @@ -9,7 +9,7 @@ import { SearchParamsContext, } from 'next/dist/shared/lib/hooks-client-context.shared-runtime'; import type { FlightRouterState } from 'next/dist/server/app-render/types'; -import type { RouteParams } from '../types'; +import type { RouteParams } from './types'; // 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 diff --git a/code/frameworks/nextjs/src/routing/decorator.tsx b/code/frameworks/nextjs/src/routing/decorator.tsx index 4edd87812b3f..4979b6e3b08a 100644 --- a/code/frameworks/nextjs/src/routing/decorator.tsx +++ b/code/frameworks/nextjs/src/routing/decorator.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import type { Addon_StoryContext } from '@storybook/types'; -import { AppRouterProvider } from './navigation/app-router-provider'; -import { PageRouterProvider } from './router/page-router-provider'; +import { AppRouterProvider } from './app-router-provider'; +import { PageRouterProvider } from './page-router-provider'; import type { RouteParams, NextAppDirectory } from './types'; const defaultRouterParams: RouteParams = { diff --git a/code/frameworks/nextjs/src/routing/router/page-router-provider.tsx b/code/frameworks/nextjs/src/routing/page-router-provider.tsx similarity index 100% rename from code/frameworks/nextjs/src/routing/router/page-router-provider.tsx rename to code/frameworks/nextjs/src/routing/page-router-provider.tsx From 87fae49f852e3a28970bf717fb21203879457977 Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Thu, 11 Apr 2024 16:26:50 +0200 Subject: [PATCH 52/82] add server actions stories --- .../ServerActions.stories.tsx | 75 +++++++++++++++++++ .../server-actions.tsx | 28 +++++++ 2 files changed, 103 insertions(+) create mode 100644 code/frameworks/nextjs/template/stories_nextjs-default-ts/ServerActions.stories.tsx create mode 100644 code/frameworks/nextjs/template/stories_nextjs-default-ts/server-actions.tsx 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 new file mode 100644 index 000000000000..17d364429726 --- /dev/null +++ b/code/frameworks/nextjs/template/stories_nextjs-default-ts/ServerActions.stories.tsx @@ -0,0 +1,75 @@ +import React from 'react'; +import type { Meta, StoryObj } from '@storybook/react'; +import { expect, within, userEvent } from '@storybook/test'; +import { cookies } from '@storybook/nextjs/headers.mock'; +import { revalidatePath } from '@storybook/nextjs/cache.mock'; +import { redirect } from '@storybook/nextjs/navigation.mock'; + +import { accessRoute, login, logout } from './server-actions'; + +function Component() { + return ( +
+
+ +
+
+ +
+
+ +
+
+ ); +} + +export default { + component: Component, +} as Meta; + +export const Default: StoryObj = { + play: async ({ canvasElement, step }) => { + const canvas = within(canvasElement); + + const loginBtn = canvas.getByText('Login'); + const logoutBtn = canvas.getByText('Logout'); + const accessRouteBtn = canvas.getByText('Access protected route'); + + await step('accessRoute flow - logged out', async () => { + await userEvent.click(accessRouteBtn); + await expect(cookies().get).toHaveBeenCalledWith('user'); + await expect(redirect).toHaveBeenCalledWith('/'); + }); + + await step('accessRoute flow - logged', async () => { + cookies.mockRestore(); + cookies().set('user', 'storybookjs'); + await userEvent.click(accessRouteBtn); + await expect(cookies().get).toHaveBeenCalledWith('user'); + await expect(revalidatePath).toHaveBeenCalledWith('/'); + await expect(redirect).toHaveBeenCalledWith('/protected'); + }); + + await step('logout flow', async () => { + cookies.mockRestore(); + await userEvent.click(logoutBtn); + await expect(cookies().delete).toHaveBeenCalled(); + await expect(revalidatePath).toHaveBeenCalledWith('/'); + await expect(redirect).toHaveBeenCalledWith('/'); + }); + + await step('login flow', async () => { + cookies.mockRestore(); + await userEvent.click(loginBtn); + await expect(cookies().set).toHaveBeenCalledWith('user', 'storybookjs'); + await expect(revalidatePath).toHaveBeenCalledWith('/'); + await expect(redirect).toHaveBeenCalledWith('/'); + }); + }, +}; diff --git a/code/frameworks/nextjs/template/stories_nextjs-default-ts/server-actions.tsx b/code/frameworks/nextjs/template/stories_nextjs-default-ts/server-actions.tsx new file mode 100644 index 000000000000..ffeba72ab848 --- /dev/null +++ b/code/frameworks/nextjs/template/stories_nextjs-default-ts/server-actions.tsx @@ -0,0 +1,28 @@ +'use server'; + +import { cookies } from 'next/headers'; +import { revalidatePath } from 'next/cache'; +import { redirect } from 'next/navigation'; + +export async function accessRoute() { + const user = cookies().get('user'); + + if (!user) { + redirect('/'); + } + + revalidatePath('/'); + redirect(`/protected`); +} + +export async function logout() { + cookies().delete('user'); + revalidatePath('/'); + redirect('/'); +} + +export async function login() { + cookies().set('user', 'storybookjs'); + revalidatePath('/'); + redirect('/'); +} From 28652af61584c880cbbe9845461e85ced358e0f5 Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Thu, 11 Apr 2024 16:47:15 +0200 Subject: [PATCH 53/82] add export passthroughs in the mocks --- .../nextjs/src/export-mocks/cache/index.ts | 3 +- .../nextjs/src/export-mocks/headers/index.ts | 9 ++++- .../src/export-mocks/navigation/index.ts | 37 +++++++++++++++++-- .../nextjs/src/export-mocks/router/index.ts | 37 +++++++++++++++++-- 4 files changed, 78 insertions(+), 8 deletions(-) diff --git a/code/frameworks/nextjs/src/export-mocks/cache/index.ts b/code/frameworks/nextjs/src/export-mocks/cache/index.ts index d0a330792713..7529a220aa76 100644 --- a/code/frameworks/nextjs/src/export-mocks/cache/index.ts +++ b/code/frameworks/nextjs/src/export-mocks/cache/index.ts @@ -3,5 +3,6 @@ import { fn } from '@storybook/test'; // re-exports of the actual module export * from 'next/cache.actual'; -// mock utilities/overrides +// mock utilities/overrides (as of Next v14.2.0) export const revalidatePath = fn().mockName('revalidatePath'); +export const revalidateTag = fn().mockName('revalidateTag'); diff --git a/code/frameworks/nextjs/src/export-mocks/headers/index.ts b/code/frameworks/nextjs/src/export-mocks/headers/index.ts index 7c2114456dc0..d14507fdfb2e 100644 --- a/code/frameworks/nextjs/src/export-mocks/headers/index.ts +++ b/code/frameworks/nextjs/src/export-mocks/headers/index.ts @@ -1,6 +1,13 @@ +import { fn } from '@storybook/test'; +import * as originalHeaders from 'next/headers.actual'; + // re-exports of the actual module export * from 'next/headers.actual'; -// mock utilities/overrides +// mock utilities/overrides (as of Next v14.2.0) export { headers } from './headers'; export { cookies } from './cookies'; + +// passthrough mocks - keep original implementation but allow for spying +const draftMode = fn(originalHeaders.draftMode).mockName('draftMode'); +export { draftMode }; diff --git a/code/frameworks/nextjs/src/export-mocks/navigation/index.ts b/code/frameworks/nextjs/src/export-mocks/navigation/index.ts index bba55c218065..bb369815366f 100644 --- a/code/frameworks/nextjs/src/export-mocks/navigation/index.ts +++ b/code/frameworks/nextjs/src/export-mocks/navigation/index.ts @@ -1,6 +1,7 @@ import type { Mock } from '@storybook/test'; import { fn } from '@storybook/test'; import { NextjsRouterMocksNotAvailable } from '@storybook/core-events/preview-errors'; +import * as originalNavigation from 'next/navigation.actual'; let navigationAPI: { push: Mock; @@ -54,7 +55,37 @@ const getRouter = () => { // re-exports of the actual module export * from 'next/navigation.actual'; -// mock utilities/overrides -export const redirect = fn().mockName('redirect'); +// mock utilities/overrides (as of Next v14.2.0) +const redirect = fn().mockName('redirect'); -export { createNavigation, getRouter }; +// passthrough mocks - keep original implementation but allow for spying +const useSearchParams = fn(originalNavigation.useSearchParams).mockName('useSearchParams'); +const usePathname = fn(originalNavigation.usePathname).mockName('usePathname'); +const useSelectedLayoutSegment = fn(originalNavigation.useSelectedLayoutSegment).mockName( + 'useSelectedLayoutSegment' +); +const useSelectedLayoutSegments = fn(originalNavigation.useSelectedLayoutSegments).mockName( + 'useSelectedLayoutSegments' +); +const useParams = fn(originalNavigation.useParams).mockName('useParams'); +const useRouter = fn(originalNavigation.useRouter).mockName('useRouter'); +const useServerInsertedHTML = fn(originalNavigation.useServerInsertedHTML).mockName( + 'useServerInsertedHTML' +); +const notFound = fn(originalNavigation.notFound).mockName('notFound'); +const permanentRedirect = fn(originalNavigation.permanentRedirect).mockName('permanentRedirect'); + +export { + createNavigation, + getRouter, + redirect, + useSearchParams, + usePathname, + useSelectedLayoutSegment, + useSelectedLayoutSegments, + useParams, + useRouter, + useServerInsertedHTML, + notFound, + permanentRedirect, +}; diff --git a/code/frameworks/nextjs/src/export-mocks/router/index.ts b/code/frameworks/nextjs/src/export-mocks/router/index.ts index a28fcce2aaae..9058b3de752f 100644 --- a/code/frameworks/nextjs/src/export-mocks/router/index.ts +++ b/code/frameworks/nextjs/src/export-mocks/router/index.ts @@ -2,7 +2,7 @@ import type { Mock } from '@storybook/test'; import { fn } from '@storybook/test'; import { NextjsRouterMocksNotAvailable } from '@storybook/core-events/preview-errors'; import type { NextRouter, SingletonRouter } from 'next/router'; -import singletonRouter from 'next/router.actual'; +import singletonRouter, * as originalRouter from 'next/router.actual'; const defaultRouterState = { route: '/', @@ -109,5 +109,36 @@ const getRouter = () => { export * from 'next/router.actual'; export default singletonRouter; -// mock utilities/overrides -export { createRouter, getRouter }; +// mock utilities/overrides (as of Next v14.2.0) +// passthrough mocks - keep original implementation but allow for spying +const useSearchParams = fn(originalRouter.useSearchParams).mockName('useSearchParams'); +const usePathname = fn(originalRouter.usePathname).mockName('usePathname'); +const useSelectedLayoutSegment = fn(originalRouter.useSelectedLayoutSegment).mockName( + 'useSelectedLayoutSegment' +); +const useSelectedLayoutSegments = fn(originalRouter.useSelectedLayoutSegments).mockName( + 'useSelectedLayoutSegments' +); +const useParams = fn(originalRouter.useParams).mockName('useParams'); +const useRouter = fn(originalRouter.useRouter).mockName('useRouter'); +const useServerInsertedHTML = fn(originalRouter.useServerInsertedHTML).mockName( + 'useServerInsertedHTML' +); +const notFound = fn(originalRouter.notFound).mockName('notFound'); +const redirect = fn(originalRouter.redirect).mockName('redirect'); +const permanentRedirect = fn(originalRouter.permanentRedirect).mockName('permanentRedirect'); + +export { + createRouter, + getRouter, + useSearchParams, + usePathname, + useSelectedLayoutSegment, + useSelectedLayoutSegments, + useParams, + useRouter, + useServerInsertedHTML, + notFound, + redirect, + permanentRedirect, +}; From 2eb2d48962c2be3f801d5652300a20ea450eb96d Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Thu, 11 Apr 2024 17:05:32 +0200 Subject: [PATCH 54/82] fix next/router exports --- .../nextjs/src/export-mocks/router/index.ts | 31 ++----------------- 1 file changed, 2 insertions(+), 29 deletions(-) diff --git a/code/frameworks/nextjs/src/export-mocks/router/index.ts b/code/frameworks/nextjs/src/export-mocks/router/index.ts index 9058b3de752f..49e89a6c5eb7 100644 --- a/code/frameworks/nextjs/src/export-mocks/router/index.ts +++ b/code/frameworks/nextjs/src/export-mocks/router/index.ts @@ -111,34 +111,7 @@ export default singletonRouter; // mock utilities/overrides (as of Next v14.2.0) // passthrough mocks - keep original implementation but allow for spying -const useSearchParams = fn(originalRouter.useSearchParams).mockName('useSearchParams'); -const usePathname = fn(originalRouter.usePathname).mockName('usePathname'); -const useSelectedLayoutSegment = fn(originalRouter.useSelectedLayoutSegment).mockName( - 'useSelectedLayoutSegment' -); -const useSelectedLayoutSegments = fn(originalRouter.useSelectedLayoutSegments).mockName( - 'useSelectedLayoutSegments' -); -const useParams = fn(originalRouter.useParams).mockName('useParams'); const useRouter = fn(originalRouter.useRouter).mockName('useRouter'); -const useServerInsertedHTML = fn(originalRouter.useServerInsertedHTML).mockName( - 'useServerInsertedHTML' -); -const notFound = fn(originalRouter.notFound).mockName('notFound'); -const redirect = fn(originalRouter.redirect).mockName('redirect'); -const permanentRedirect = fn(originalRouter.permanentRedirect).mockName('permanentRedirect'); +const withRouter = fn(originalRouter.withRouter).mockName('withRouter'); -export { - createRouter, - getRouter, - useSearchParams, - usePathname, - useSelectedLayoutSegment, - useSelectedLayoutSegments, - useParams, - useRouter, - useServerInsertedHTML, - notFound, - redirect, - permanentRedirect, -}; +export { createRouter, getRouter, useRouter, withRouter }; From cbaf6327707dc327e3e9391ba64e96d86749be31 Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Fri, 12 Apr 2024 08:22:51 +0200 Subject: [PATCH 55/82] fix build issues --- .../frameworks/nextjs/src/export-mocks/navigation/index.ts | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/code/frameworks/nextjs/src/export-mocks/navigation/index.ts b/code/frameworks/nextjs/src/export-mocks/navigation/index.ts index bb369815366f..dabfdece7881 100644 --- a/code/frameworks/nextjs/src/export-mocks/navigation/index.ts +++ b/code/frameworks/nextjs/src/export-mocks/navigation/index.ts @@ -67,7 +67,6 @@ const useSelectedLayoutSegment = fn(originalNavigation.useSelectedLayoutSegment) const useSelectedLayoutSegments = fn(originalNavigation.useSelectedLayoutSegments).mockName( 'useSelectedLayoutSegments' ); -const useParams = fn(originalNavigation.useParams).mockName('useParams'); const useRouter = fn(originalNavigation.useRouter).mockName('useRouter'); const useServerInsertedHTML = fn(originalNavigation.useServerInsertedHTML).mockName( 'useServerInsertedHTML' @@ -75,6 +74,12 @@ const useServerInsertedHTML = fn(originalNavigation.useServerInsertedHTML).mockN const notFound = fn(originalNavigation.notFound).mockName('notFound'); const permanentRedirect = fn(originalNavigation.permanentRedirect).mockName('permanentRedirect'); +// Params, not exported by Next.js, is manually declared to avoid inference issues. +interface Params { + [key: string]: string | string[]; +} +const useParams = fn<[], Params>(originalNavigation.useParams).mockName('useParams'); + export { createNavigation, getRouter, From ec8b5e0b3c9637f117cc036a968591df60042337 Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Fri, 12 Apr 2024 10:12:52 +0200 Subject: [PATCH 56/82] add getPackageAliases helper for jest portable stories --- MIGRATION.md | 55 ++++++++++---- code/frameworks/nextjs/package.json | 9 +++ .../nextjs/src/export-mocks/index.ts | 1 + .../nextjs/src/export-mocks/webpack.ts | 26 ++++--- .../nextjs/jest.config.js | 4 +- .../nextjs/yarn.lock | 72 +++++++++---------- 6 files changed, 107 insertions(+), 60 deletions(-) create mode 100644 code/frameworks/nextjs/src/export-mocks/index.ts diff --git a/MIGRATION.md b/MIGRATION.md index eecaf94950a2..2cd7d04f6fff 100644 --- a/MIGRATION.md +++ b/MIGRATION.md @@ -1,7 +1,10 @@

Migration

-- [From version 7.x to 8.0.0](#from-version-7x-to-800) +- [From version 8.0.x to 8.1.x](#from-version-80x-to-81x) - [Portable stories](#portable-stories) + - [@storybook/nextjs requires specific path aliases to be setup](#storybooknextjs-requires-specific-path-aliases-to-be-setup) +- [From version 7.x to 8.0.0](#from-version-7x-to-800) + - [Portable stories](#portable-stories-1) - [Project annotations are now merged instead of overwritten in composeStory](#project-annotations-are-now-merged-instead-of-overwritten-in-composestory) - [Type change in `composeStories` API](#type-change-in-composestories-api) - [Composed Vue stories are now components instead of functions](#composed-vue-stories-are-now-components-instead-of-functions) @@ -90,17 +93,17 @@ - [Tab addons cannot manually route, Tool addons can filter their visibility via tabId](#tab-addons-cannot-manually-route-tool-addons-can-filter-their-visibility-via-tabid) - [Removed `config` preset](#removed-config-preset-1) - [From version 7.5.0 to 7.6.0](#from-version-750-to-760) - - [CommonJS with Vite is deprecated](#commonjs-with-vite-is-deprecated) - - [Using implicit actions during rendering is deprecated](#using-implicit-actions-during-rendering-is-deprecated) - - [typescript.skipBabel deprecated](#typescriptskipbabel-deprecated) - - [Primary doc block accepts of prop](#primary-doc-block-accepts-of-prop) - - [Addons no longer need a peer dependency on React](#addons-no-longer-need-a-peer-dependency-on-react) + - [CommonJS with Vite is deprecated](#commonjs-with-vite-is-deprecated) + - [Using implicit actions during rendering is deprecated](#using-implicit-actions-during-rendering-is-deprecated) + - [typescript.skipBabel deprecated](#typescriptskipbabel-deprecated) + - [Primary doc block accepts of prop](#primary-doc-block-accepts-of-prop) + - [Addons no longer need a peer dependency on React](#addons-no-longer-need-a-peer-dependency-on-react) - [From version 7.4.0 to 7.5.0](#from-version-740-to-750) - - [`storyStoreV6` and `storiesOf` is deprecated](#storystorev6-and-storiesof-is-deprecated) - - [`storyIndexers` is replaced with `experimental_indexers`](#storyindexers-is-replaced-with-experimental_indexers) + - [`storyStoreV6` and `storiesOf` is deprecated](#storystorev6-and-storiesof-is-deprecated) + - [`storyIndexers` is replaced with `experimental_indexers`](#storyindexers-is-replaced-with-experimental_indexers) - [From version 7.0.0 to 7.2.0](#from-version-700-to-720) - - [Addon API is more type-strict](#addon-api-is-more-type-strict) - - [Addon-controls hideNoControlsWarning parameter is deprecated](#addon-controls-hidenocontrolswarning-parameter-is-deprecated) + - [Addon API is more type-strict](#addon-api-is-more-type-strict) + - [Addon-controls hideNoControlsWarning parameter is deprecated](#addon-controls-hidenocontrolswarning-parameter-is-deprecated) - [From version 6.5.x to 7.0.0](#from-version-65x-to-700) - [7.0 breaking changes](#70-breaking-changes) - [Dropped support for Node 15 and below](#dropped-support-for-node-15-and-below) @@ -126,7 +129,7 @@ - [Deploying build artifacts](#deploying-build-artifacts) - [Dropped support for file URLs](#dropped-support-for-file-urls) - [Serving with nginx](#serving-with-nginx) - - [Ignore story files from node_modules](#ignore-story-files-from-node_modules) + - [Ignore story files from node\_modules](#ignore-story-files-from-node_modules) - [7.0 Core changes](#70-core-changes) - [7.0 feature flags removed](#70-feature-flags-removed) - [Story context is prepared before for supporting fine grained updates](#story-context-is-prepared-before-for-supporting-fine-grained-updates) @@ -140,7 +143,7 @@ - [Addon-interactions: Interactions debugger is now default](#addon-interactions-interactions-debugger-is-now-default) - [7.0 Vite changes](#70-vite-changes) - [Vite builder uses Vite config automatically](#vite-builder-uses-vite-config-automatically) - - [Vite cache moved to node_modules/.cache/.vite-storybook](#vite-cache-moved-to-node_modulescachevite-storybook) + - [Vite cache moved to node\_modules/.cache/.vite-storybook](#vite-cache-moved-to-node_modulescachevite-storybook) - [7.0 Webpack changes](#70-webpack-changes) - [Webpack4 support discontinued](#webpack4-support-discontinued) - [Babel mode v7 exclusively](#babel-mode-v7-exclusively) @@ -190,7 +193,7 @@ - [Dropped addon-docs manual babel configuration](#dropped-addon-docs-manual-babel-configuration) - [Dropped addon-docs manual configuration](#dropped-addon-docs-manual-configuration) - [Autoplay in docs](#autoplay-in-docs) - - [Removed STORYBOOK_REACT_CLASSES global](#removed-storybook_react_classes-global) + - [Removed STORYBOOK\_REACT\_CLASSES global](#removed-storybook_react_classes-global) - [7.0 Deprecations and default changes](#70-deprecations-and-default-changes) - [storyStoreV7 enabled by default](#storystorev7-enabled-by-default) - [`Story` type deprecated](#story-type-deprecated) @@ -403,6 +406,32 @@ - [Packages renaming](#packages-renaming) - [Deprecated embedded addons](#deprecated-embedded-addons) +## From version 8.0.x to 8.1.x + +### Portable stories + +#### @storybook/nextjs requires specific path aliases to be setup + +In order to properly mock the `next/router`, `next/header`, `next/navigation` and `next/cache` APIs, the `@storybook/nextjs` framework includes internal Webpack aliases to those modules. If you use portable stories in your Jest configuration, you will run into the following issue: + +``` +Cannot find module 'next/navigation.actual' from 'node_modules/@storybook/nextjs/dist/export-mocks/navigation/index.js' +``` + +To fix it, you should set the aliases in your Jest config files `moduleNameMapper` property using the `getPackageAliases` helper from `@storybook/nextjs/export-mocks`: + +```js +const nextJest = require("next/jest.js"); +const { getPackageAliases } = require("@storybook/nextjs/export-mocks"); +const createJestConfig = nextJest(); +const customJestConfig = { + moduleNameMapper: { + ...getPackageAliases(), // Add aliases for @storybook/nextjs mocks + }, +}; +module.exports = createJestConfig(customJestConfig); +``` + ## From version 7.x to 8.0.0 ### Portable stories diff --git a/code/frameworks/nextjs/package.json b/code/frameworks/nextjs/package.json index dd016db3fb95..b09b2f383295 100644 --- a/code/frameworks/nextjs/package.json +++ b/code/frameworks/nextjs/package.json @@ -47,6 +47,11 @@ "require": "./dist/next-image-loader-stub.js", "import": "./dist/next-image-loader-stub.mjs" }, + "./export-mocks": { + "types": "./dist/export-mocks/index.d.ts", + "require": "./dist/export-mocks/index.js", + "import": "./dist/export-mocks/index.mjs" + }, "./headers.mock": { "types": "./dist/export-mocks/headers/index.d.ts", "require": "./dist/export-mocks/headers/index.js", @@ -75,6 +80,9 @@ "dist/image-context": [ "dist/image-context.d.ts" ], + "export-mocks": [ + "dist/export-mocks/index.d.ts" + ], "cache.mock": [ "dist/export-mocks/cache/index.d.ts" ], @@ -187,6 +195,7 @@ "./src/index.ts", "./src/preset.ts", "./src/preview.tsx", + "./src/export-mocks/index.ts", "./src/export-mocks/cache/index.ts", "./src/export-mocks/headers/index.ts", "./src/export-mocks/router/index.ts", diff --git a/code/frameworks/nextjs/src/export-mocks/index.ts b/code/frameworks/nextjs/src/export-mocks/index.ts new file mode 100644 index 000000000000..111ad162ec3f --- /dev/null +++ b/code/frameworks/nextjs/src/export-mocks/index.ts @@ -0,0 +1 @@ +export { getPackageAliases } from './webpack'; diff --git a/code/frameworks/nextjs/src/export-mocks/webpack.ts b/code/frameworks/nextjs/src/export-mocks/webpack.ts index 74d048cd5706..5f217df13ffe 100644 --- a/code/frameworks/nextjs/src/export-mocks/webpack.ts +++ b/code/frameworks/nextjs/src/export-mocks/webpack.ts @@ -1,19 +1,18 @@ import { dirname, join } from 'path'; import type { Configuration as WebpackConfig } from 'webpack'; -export const configureNextExportMocks = (baseConfig: WebpackConfig): void => { - const resolve = baseConfig.resolve ?? {}; +export const getPackageAliases = ({ useESM = false }: { useESM?: boolean } = {}) => { + const extension = useESM ? 'mjs' : 'js'; const packageLocation = dirname(require.resolve('@storybook/nextjs/package.json')); // Use paths for both next/xyz and @storybook/nextjs/xyz imports // to make sure they all serve the MJS version of the file - const headersPath = join(packageLocation, '/dist/export-mocks/headers/index.mjs'); - const navigationPath = join(packageLocation, '/dist/export-mocks/navigation/index.mjs'); - const cachePath = join(packageLocation, '/dist/export-mocks/cache/index.mjs'); - const routerPath = join(packageLocation, '/dist/export-mocks/router/index.mjs'); + const headersPath = join(packageLocation, `/dist/export-mocks/headers/index.${extension}`); + const navigationPath = join(packageLocation, `/dist/export-mocks/navigation/index.${extension}`); + const cachePath = join(packageLocation, `/dist/export-mocks/cache/index.${extension}`); + const routerPath = join(packageLocation, `/dist/export-mocks/router/index.${extension}`); - resolve.alias = { - ...resolve.alias, - // *.actual paths are used as reexports of the original module + return { + // "*.actual" paths are used as reexports of the original module 'next/headers.actual': require.resolve('next/headers'), 'next/headers': headersPath, '@storybook/nextjs/headers.mock': headersPath, @@ -31,3 +30,12 @@ export const configureNextExportMocks = (baseConfig: WebpackConfig): void => { '@storybook/nextjs/cache.mock': cachePath, }; }; + +export const configureNextExportMocks = (baseConfig: WebpackConfig): void => { + const resolve = baseConfig.resolve ?? {}; + + resolve.alias = { + ...resolve.alias, + ...getPackageAliases(), + }; +}; diff --git a/test-storybooks/portable-stories-kitchen-sink/nextjs/jest.config.js b/test-storybooks/portable-stories-kitchen-sink/nextjs/jest.config.js index deb85e5a4b0e..3867a50e7bc7 100644 --- a/test-storybooks/portable-stories-kitchen-sink/nextjs/jest.config.js +++ b/test-storybooks/portable-stories-kitchen-sink/nextjs/jest.config.js @@ -1,4 +1,5 @@ const nextJest = require('next/jest.js'); +const { getPackageAliases } = require('@storybook/nextjs/export-mocks'); const createJestConfig = nextJest({ // Provide the path to your Next.js app to load next.config.js and .env files in your test environment @@ -11,9 +12,8 @@ const customJestConfig = { testEnvironment: 'jsdom', // Add more setup options before each test is run setupFilesAfterEnv: ['./jest.setup.ts'], - // TODO add docs about this: alias next/headers to @storybook/nextjs/headers moduleNameMapper: { - '^next/headers$': '@storybook/nextjs/headers.mock', + ...getPackageAliases() }, }; diff --git a/test-storybooks/portable-stories-kitchen-sink/nextjs/yarn.lock b/test-storybooks/portable-stories-kitchen-sink/nextjs/yarn.lock index f2523cdcfdc0..7e95fae96fcf 100644 --- a/test-storybooks/portable-stories-kitchen-sink/nextjs/yarn.lock +++ b/test-storybooks/portable-stories-kitchen-sink/nextjs/yarn.lock @@ -2586,7 +2586,7 @@ __metadata: "@storybook/builder-webpack5@file:../../../code/builders/builder-webpack5::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 - resolution: "@storybook/builder-webpack5@file:../../../code/builders/builder-webpack5#../../../code/builders/builder-webpack5::hash=c0c586&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/builder-webpack5@file:../../../code/builders/builder-webpack5#../../../code/builders/builder-webpack5::hash=983659&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/channels": "workspace:*" "@storybook/client-logger": "workspace:*" @@ -2625,20 +2625,20 @@ __metadata: peerDependenciesMeta: typescript: optional: true - checksum: 10/f4fe0264184b91d9a96baf2d35fc7c7c212b516901650c852f61c2aec2e6b7d81f6828b7ca7ce34f1623bab5cd838936d5877d982df0fa75cab577af78ce79ef + checksum: 10/f84f41cd8ac80376ba603f4bb58da565f2b0e95ed37593279d85c4e5573de64633f10b7c6f2bd399f6d40057f1c97934760b969326520250f6de5efd07ac967b languageName: node linkType: hard "@storybook/channels@file:../../../code/lib/channels::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 - resolution: "@storybook/channels@file:../../../code/lib/channels#../../../code/lib/channels::hash=413c8e&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/channels@file:../../../code/lib/channels#../../../code/lib/channels::hash=3a33a2&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/client-logger": "workspace:*" "@storybook/core-events": "workspace:*" "@storybook/global": "npm:^5.0.0" telejson: "npm:^7.2.0" tiny-invariant: "npm:^1.3.1" - checksum: 10/6091e0ca5a19b46589877a6a17cac725ef863a8cdf61d812261673e16227490f8b80fcf26daa8924dbcaad434c91118ac399f3a610c7eec5ed094e7b0dfd0947 + checksum: 10/cda1b155f07fdac919a29e5a5287ae33ef4b3ed9c5c9816c29e17e3aa0dd788dc59da8775c40341ebcbd426ecf4f9ab629949dfe945834f48db7ca6053c062f1 languageName: node linkType: hard @@ -2691,10 +2691,10 @@ __metadata: "@storybook/client-logger@file:../../../code/lib/client-logger::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 - resolution: "@storybook/client-logger@file:../../../code/lib/client-logger#../../../code/lib/client-logger::hash=6408e1&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/client-logger@file:../../../code/lib/client-logger#../../../code/lib/client-logger::hash=f3ac76&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/global": "npm:^5.0.0" - checksum: 10/ff3312279cf1bcaa3fcf91149951e4b7b6cba79ddbb0f80e488126a38bf1f7ceab4ad43cf40324b5ec9c3a8a786695042bc7cd47a0ae0a4835f06dddc5fb214e + checksum: 10/00b5cfade208483f5ec85c8aa59cabf402502a4cf1d9c3ee24a311a396e65ce97f0a3d4356aac9f413c8d84c9804ccb07aaeda6f3d553799e6e036960f4a2fbe languageName: node linkType: hard @@ -2743,7 +2743,7 @@ __metadata: "@storybook/core-common@file:../../../code/lib/core-common::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 - resolution: "@storybook/core-common@file:../../../code/lib/core-common#../../../code/lib/core-common::hash=26f1e6&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/core-common@file:../../../code/lib/core-common#../../../code/lib/core-common::hash=be2541&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/core-events": "workspace:*" "@storybook/csf-tools": "workspace:*" @@ -2773,16 +2773,16 @@ __metadata: tiny-invariant: "npm:^1.3.1" ts-dedent: "npm:^2.0.0" util: "npm:^0.12.4" - checksum: 10/7b692d71f9d170253ad376d67d364d351eff3d6f9b21fcf2471aefbf78fe4fdfb61a24f444630ad0bcbe3d560b92350271087e03f7e040cedbbfbb142ef0bc7b + checksum: 10/b8502748d79920a961510e19eb759172ff2a04699b16c458a6d00dd8e73552a41e15873d57bddfc5f87904d11c8fb308061a507aa445fbf34306d92ffb329c2c languageName: node linkType: hard "@storybook/core-events@file:../../../code/lib/core-events::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 - resolution: "@storybook/core-events@file:../../../code/lib/core-events#../../../code/lib/core-events::hash=3d1227&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/core-events@file:../../../code/lib/core-events#../../../code/lib/core-events::hash=11b404&locator=portable-stories-nextjs%40workspace%3A." dependencies: ts-dedent: "npm:^2.0.0" - checksum: 10/9ecdadbfc30f79f4ef930595681e39197e8545d32308b9e9a1829f3f67047521d44c66664386f6be62a75019abe67e5b37d08bd9ced83eeee28c0602f8bed5fa + checksum: 10/5c276f3805d92b799c0c7c4c111fff2f59522900b855c634472bdb925b5b917a34d28c41ff4b4d5ed88bbb3b78671a6a36764b67ae99085d9758052d6fa51e09 languageName: node linkType: hard @@ -2841,14 +2841,14 @@ __metadata: "@storybook/core-webpack@file:../../../code/lib/core-webpack::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 - resolution: "@storybook/core-webpack@file:../../../code/lib/core-webpack#../../../code/lib/core-webpack::hash=1c6e9a&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/core-webpack@file:../../../code/lib/core-webpack#../../../code/lib/core-webpack::hash=d17dda&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/core-common": "workspace:*" "@storybook/node-logger": "workspace:*" "@storybook/types": "workspace:*" "@types/node": "npm:^18.0.0" ts-dedent: "npm:^2.0.0" - checksum: 10/af79e1e751158c7d47475736c052cf1fd6535fbaa131168141a06eef2ed5f178165771dba4e4995a567d5d180d4af33a4e75c573153ec39a838901cbb16aa4c1 + checksum: 10/2e56db38374ec96f01c00c0fa4c8a9090c1db1d56c8c611a93d1a0c60769aa6a2c751ed29fa6c3a3a7adbf99d457287908e8e01ee1848ab6c59f6837934d81bf languageName: node linkType: hard @@ -2864,7 +2864,7 @@ __metadata: "@storybook/csf-tools@file:../../../code/lib/csf-tools::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 - resolution: "@storybook/csf-tools@file:../../../code/lib/csf-tools#../../../code/lib/csf-tools::hash=703916&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/csf-tools@file:../../../code/lib/csf-tools#../../../code/lib/csf-tools::hash=69584a&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@babel/generator": "npm:^7.23.0" "@babel/parser": "npm:^7.23.0" @@ -2875,7 +2875,7 @@ __metadata: fs-extra: "npm:^11.1.0" recast: "npm:^0.23.5" ts-dedent: "npm:^2.0.0" - checksum: 10/b597a467657223667710c73bcdd8d85e481a7c088e816539dd9513f2a42cb825e1d3fdd5461772d969201d2f6901280c30a9712d8711b7e12661a01d692f6871 + checksum: 10/7fce79866ace04b9a2bc78a66a03e27e6e770b4279e1b40c08634bce01eb57be22f5f192f73c6a65cc959c8910f63a3d35e31a71fe3ac821aea095722e324710 languageName: node linkType: hard @@ -2906,7 +2906,7 @@ __metadata: "@storybook/docs-tools@file:../../../code/lib/docs-tools::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 - resolution: "@storybook/docs-tools@file:../../../code/lib/docs-tools#../../../code/lib/docs-tools::hash=0f1a92&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/docs-tools@file:../../../code/lib/docs-tools#../../../code/lib/docs-tools::hash=55c8ec&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/core-common": "workspace:*" "@storybook/preview-api": "workspace:*" @@ -2915,7 +2915,7 @@ __metadata: assert: "npm:^2.1.0" doctrine: "npm:^3.0.0" lodash: "npm:^4.17.21" - checksum: 10/6efb67c748bf9616313844cc482a31b49834d7b94767a544b7a5ed9a2e2d28c3d8a945162040b09f39af3f36c5288c00a83a67166c5d6a91b38875b8ff039acd + checksum: 10/59ee342654240884ea89aa3f66d86fbab06759af23b3897635b1976c75c77dcb08b908b46528138294febc5347eb5564728e956cd66d0ee170b3438ec8269a49 languageName: node linkType: hard @@ -2938,7 +2938,7 @@ __metadata: "@storybook/instrumenter@file:../../../code/lib/instrumenter::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 - resolution: "@storybook/instrumenter@file:../../../code/lib/instrumenter#../../../code/lib/instrumenter::hash=da2c8f&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/instrumenter@file:../../../code/lib/instrumenter#../../../code/lib/instrumenter::hash=ffe9d7&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/channels": "workspace:*" "@storybook/client-logger": "workspace:*" @@ -2947,7 +2947,7 @@ __metadata: "@storybook/preview-api": "workspace:*" "@vitest/utils": "npm:^1.3.1" util: "npm:^0.12.4" - checksum: 10/a55b3615eee655ef969641128c408ad5a6f3a0196af135e4ea1aa9289b9a2c98d84b34c3a57a25ca8cf6e619faad5fe6440232097fb99ecf7fc0341395a8ce16 + checksum: 10/84948fcfafe05e5934117e6c514a1788f9d146d28f749c11313e5f65c60f3f20be0e659e97f14a6b5ce405b01afa4941571f644a9cb88d8b3a956c2c79413723 languageName: node linkType: hard @@ -2983,7 +2983,7 @@ __metadata: "@storybook/nextjs@file:../../../code/frameworks/nextjs::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 - resolution: "@storybook/nextjs@file:../../../code/frameworks/nextjs#../../../code/frameworks/nextjs::hash=54d145&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/nextjs@file:../../../code/frameworks/nextjs#../../../code/frameworks/nextjs::hash=fbb1b0&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@babel/core": "npm:^7.23.2" "@babel/plugin-syntax-bigint": "npm:^7.8.3" @@ -3040,20 +3040,20 @@ __metadata: optional: true webpack: optional: true - checksum: 10/0cf1a6cb4f106b7073a4932f2b2432b946bae36378fe53443eda98a867c2a1cd4271ea34d737016ea9a21c43f71d70202894084232164444d12784bd81726ebc + checksum: 10/c7e8437a541d526982a78e734592a1e5ce09053dbda221b7d4717b657d4595a2ff5fd9af17d55e695a6fde6610c4c856ec15f8039372d18237daa1fb7ccc86a4 languageName: node linkType: hard "@storybook/node-logger@file:../../../code/lib/node-logger::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 - resolution: "@storybook/node-logger@file:../../../code/lib/node-logger#../../../code/lib/node-logger::hash=76992b&locator=portable-stories-nextjs%40workspace%3A." - checksum: 10/39a64d0cfc1ab16e4e808edc63fb9b5b76c038acb864b00d756260f9b5cf66116a758f6969dcc06daab8e69a8965fceef11c1d3cab8b524de1021b97dfd5b0e4 + resolution: "@storybook/node-logger@file:../../../code/lib/node-logger#../../../code/lib/node-logger::hash=0d5379&locator=portable-stories-nextjs%40workspace%3A." + checksum: 10/ba3b49b55a325ec5d885898e5cd61370c19ad27a54315025c315bb08b6a09a64cfd3097748225be1f4b07aad42245a239ac9ba6e957c854ebb48718a43e5c215 languageName: node linkType: hard "@storybook/preset-react-webpack@file:../../../code/presets/react-webpack::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 - resolution: "@storybook/preset-react-webpack@file:../../../code/presets/react-webpack#../../../code/presets/react-webpack::hash=f3317c&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/preset-react-webpack@file:../../../code/presets/react-webpack#../../../code/presets/react-webpack::hash=3c5b01&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/core-webpack": "workspace:*" "@storybook/docs-tools": "workspace:*" @@ -3076,13 +3076,13 @@ __metadata: peerDependenciesMeta: typescript: optional: true - checksum: 10/ee2981fac009bed8163403a304fc34ea8e6f307bd11c26dc6b9e1682e5116facfef0a1e6c59dafe179977b1f5e366912db7e6cac7530cd7074a7c2dd071bd91e + checksum: 10/3baffd6ce4e642f852c370ccd4ae8098a5e730f4493ce43c8414f0b44e59c8bc8a99d9975cf5149b655f1808e54d274754044f45983b9f1be7c9a28f00931ac2 languageName: node linkType: hard "@storybook/preview-api@file:../../../code/lib/preview-api::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 - resolution: "@storybook/preview-api@file:../../../code/lib/preview-api#../../../code/lib/preview-api::hash=8ed046&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/preview-api@file:../../../code/lib/preview-api#../../../code/lib/preview-api::hash=76c183&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/channels": "workspace:*" "@storybook/client-logger": "workspace:*" @@ -3098,14 +3098,14 @@ __metadata: tiny-invariant: "npm:^1.3.1" ts-dedent: "npm:^2.0.0" util-deprecate: "npm:^1.0.2" - checksum: 10/d5a6dc59d0cf9660869c7059567ffe09e1d590835aa781a5a94fc109ae67ae961f82db05a5e983b209e76a595ef3b9669f25897a174701fbcd2846a321ddd8e6 + checksum: 10/93ed5df1d57acb2b5ef4284914e46d0b3c24182d9778ee7ef724a9f48e12e924dc200230453973810999e559a15e0b09604317dc3fb55188068f27ac7aaf07e3 languageName: node linkType: hard "@storybook/preview@file:../../../code/lib/preview::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 - resolution: "@storybook/preview@file:../../../code/lib/preview#../../../code/lib/preview::hash=364559&locator=portable-stories-nextjs%40workspace%3A." - checksum: 10/cda37fa779743c888a72cc6329ce2d2d7d0171ae2c45d5854c90cf49a834c53e8334d36d95c255254440f4e6304251789f600c64a8f7925df1dc52e76aa18277 + resolution: "@storybook/preview@file:../../../code/lib/preview#../../../code/lib/preview::hash=f82bd0&locator=portable-stories-nextjs%40workspace%3A." + checksum: 10/79efae3201ef9d5cbb8abc309969394e33da8ee853b13d478389bf8d913a851c8804bc8a3e4ff28d05b589e32172e898b3988cd34af9f25016db0d0c26a94688 languageName: node linkType: hard @@ -3129,17 +3129,17 @@ __metadata: "@storybook/react-dom-shim@file:../../../code/lib/react-dom-shim::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 - resolution: "@storybook/react-dom-shim@file:../../../code/lib/react-dom-shim#../../../code/lib/react-dom-shim::hash=4a12a1&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/react-dom-shim@file:../../../code/lib/react-dom-shim#../../../code/lib/react-dom-shim::hash=062b74&locator=portable-stories-nextjs%40workspace%3A." peerDependencies: react: ^16.8.0 || ^17.0.0 || ^18.0.0 react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 - checksum: 10/1328cd24014a00ea7b07c2359c0d6af7fd7973a8635e1e42ff8f462524ad0961fccfc3200f25f86e1fdd75d151f2f50038db70e88c5fb4c9ff7a93cfa387d4dd + checksum: 10/ba63271a1f2d663cd53354798c490d306787b8033586a1062175b89fe4409759cbc959aa34dad12ff8f9bf2e9c141a391784eda81f23cbc9d13495128c9e1611 languageName: node linkType: hard "@storybook/react@file:../../../code/renderers/react::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 - resolution: "@storybook/react@file:../../../code/renderers/react#../../../code/renderers/react::hash=e02d2f&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/react@file:../../../code/renderers/react#../../../code/renderers/react::hash=4e9581&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/client-logger": "workspace:*" "@storybook/docs-tools": "workspace:*" @@ -3169,7 +3169,7 @@ __metadata: peerDependenciesMeta: typescript: optional: true - checksum: 10/bc3d21e78b36c3fa4133532858d0b32f1686a8227096c1079c4575cc29461e32ebeb742b74671c0c43523b738ec8186a1368036d3e9406f6e4cf561a67fc2b79 + checksum: 10/79b77645790d408373d15fad673b0c768d36f66cfa615c50b32b9a3ead0eb94656eaa3b2521b12ec5f82d8c3c23500c0da9c4a75c6bcb314fa38ee813b636c6b languageName: node linkType: hard @@ -3202,7 +3202,7 @@ __metadata: "@storybook/test@file:../../../code/lib/test::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 - resolution: "@storybook/test@file:../../../code/lib/test#../../../code/lib/test::hash=4192cc&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/test@file:../../../code/lib/test#../../../code/lib/test::hash=22f2be&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/client-logger": "workspace:*" "@storybook/core-events": "workspace:*" @@ -3215,7 +3215,7 @@ __metadata: "@vitest/spy": "npm:^1.3.1" chai: "npm:^4.4.1" util: "npm:^0.12.4" - checksum: 10/ae7add4394f4c590aaac487da53f0e335051560ecd18f0e831f6e62ffb15aad2299060f58e6149bf3637dd8ed48217e7ae3bd54b58a5ea35ab8fea3982aabbc2 + checksum: 10/786f471e95d2413a8a7e405dafa0dfe429884853cb119d5faa7c390f893710a83e64a97f5f6bee0dacea6efcac4c6a7a258e1c8830e691f39c14e851a59ec781 languageName: node linkType: hard @@ -3241,12 +3241,12 @@ __metadata: "@storybook/types@file:../../../code/lib/types::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 - resolution: "@storybook/types@file:../../../code/lib/types#../../../code/lib/types::hash=c292b3&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/types@file:../../../code/lib/types#../../../code/lib/types::hash=efc120&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/channels": "workspace:*" "@types/express": "npm:^4.7.0" file-system-cache: "npm:2.3.0" - checksum: 10/66db65b0e5185de6e9df7fb239b4a45beaf5e42d1f558ae465346b850f8626909aa7d415b49ed0ba0b837219ded47021c42bffff83f13eba29867ee8eafe7b0c + checksum: 10/1d6a4dfbab18342f2286c6d8234c84e9e2dd3638e670863c5679d444d70a629820391a5edb3df8c7a67a049b0a62ca615942ca5a5eb3525fb3dcdd92cf79d5f3 languageName: node linkType: hard From 7374e1255d1406ddebd13932043d031d50a1152a Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Fri, 12 Apr 2024 10:18:57 +0200 Subject: [PATCH 57/82] use esm in nextjs webpack aliases --- code/frameworks/nextjs/src/export-mocks/webpack.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/frameworks/nextjs/src/export-mocks/webpack.ts b/code/frameworks/nextjs/src/export-mocks/webpack.ts index 5f217df13ffe..64d7d37a33fb 100644 --- a/code/frameworks/nextjs/src/export-mocks/webpack.ts +++ b/code/frameworks/nextjs/src/export-mocks/webpack.ts @@ -36,6 +36,6 @@ export const configureNextExportMocks = (baseConfig: WebpackConfig): void => { resolve.alias = { ...resolve.alias, - ...getPackageAliases(), + ...getPackageAliases({ useESM: true }), }; }; From 780a73bf51e55799c4b0ed6652b6ad8819ab4012 Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Fri, 12 Apr 2024 14:37:41 +0200 Subject: [PATCH 58/82] Update csf --- code/addons/links/package.json | 2 +- code/lib/codemod/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/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 | 42 ++++++++++++++--------------- 13 files changed, 33 insertions(+), 33 deletions(-) diff --git a/code/addons/links/package.json b/code/addons/links/package.json index cbe50306d3f7..e46356ddde07 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.4", + "@storybook/csf": "0.1.5--canary.82.2c2dd28.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 46f9ad028a5e..d549cd0d3516 100644 --- a/code/lib/codemod/package.json +++ b/code/lib/codemod/package.json @@ -57,7 +57,7 @@ "@babel/core": "^7.23.2", "@babel/preset-env": "^7.23.2", "@babel/types": "^7.23.0", - "@storybook/csf": "^0.1.4", + "@storybook/csf": "0.1.5--canary.82.2c2dd28.0", "@storybook/csf-tools": "workspace:*", "@storybook/node-logger": "workspace:*", "@storybook/types": "workspace:*", diff --git a/code/lib/core-server/package.json b/code/lib/core-server/package.json index 391bfbda11fc..daca55fc5454 100644 --- a/code/lib/core-server/package.json +++ b/code/lib/core-server/package.json @@ -62,7 +62,7 @@ "@storybook/channels": "workspace:*", "@storybook/core-common": "workspace:*", "@storybook/core-events": "workspace:*", - "@storybook/csf": "^0.1.4", + "@storybook/csf": "0.1.5--canary.82.2c2dd28.0", "@storybook/csf-tools": "workspace:*", "@storybook/docs-mdx": "3.0.0", "@storybook/global": "^5.0.0", diff --git a/code/lib/csf-tools/package.json b/code/lib/csf-tools/package.json index 430b347c2451..1e21150e2c91 100644 --- a/code/lib/csf-tools/package.json +++ b/code/lib/csf-tools/package.json @@ -46,7 +46,7 @@ "@babel/parser": "^7.23.0", "@babel/traverse": "^7.23.2", "@babel/types": "^7.23.0", - "@storybook/csf": "^0.1.4", + "@storybook/csf": "0.1.5--canary.82.2c2dd28.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 28893f10f5c7..d4225118d01c 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.4", + "@storybook/csf": "0.1.5--canary.82.2c2dd28.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 48bb90cfb6b0..ba88c4a07962 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.4", + "@storybook/csf": "0.1.5--canary.82.2c2dd28.0", "@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 1b480d450fe8..5f91ce085448 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.4", + "@storybook/csf": "0.1.5--canary.82.2c2dd28.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 bbac0e65beb1..408fed0dac92 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.4", + "@storybook/csf": "0.1.5--canary.82.2c2dd28.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 29dc543f11e8..5ec395af56bd 100644 --- a/code/package.json +++ b/code/package.json @@ -127,7 +127,7 @@ "@storybook/core-events": "workspace:*", "@storybook/core-server": "workspace:*", "@storybook/core-webpack": "workspace:*", - "@storybook/csf": "^0.1.4", + "@storybook/csf": "0.1.5--canary.82.2c2dd28.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 f7c4cfa88ef0..03d3644b447c 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.4", + "@storybook/csf": "0.1.5--canary.82.2c2dd28.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 edae82e2f19d..ba759f8a3bb6 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.4", + "@storybook/csf": "0.1.5--canary.82.2c2dd28.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 200b81381b85..383ee1b44bff 100644 --- a/code/ui/components/package.json +++ b/code/ui/components/package.json @@ -61,7 +61,7 @@ "dependencies": { "@radix-ui/react-slot": "^1.0.2", "@storybook/client-logger": "workspace:*", - "@storybook/csf": "^0.1.4", + "@storybook/csf": "0.1.5--canary.82.2c2dd28.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 815b6cae1984..cd8dd6fae5b0 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -5131,7 +5131,7 @@ __metadata: dependencies: "@storybook/client-logger": "workspace:*" "@storybook/core-events": "workspace:*" - "@storybook/csf": "npm:^0.1.4" + "@storybook/csf": "npm:0.1.5--canary.82.2c2dd28.0" "@storybook/global": "npm:^5.0.0" "@storybook/manager-api": "workspace:*" "@storybook/preview-api": "workspace:*" @@ -5399,7 +5399,7 @@ __metadata: "@storybook/client-logger": "workspace:*" "@storybook/components": "workspace:*" "@storybook/core-events": "workspace:*" - "@storybook/csf": "npm:^0.1.4" + "@storybook/csf": "npm:0.1.5--canary.82.2c2dd28.0" "@storybook/docs-tools": "workspace:*" "@storybook/global": "npm:^5.0.0" "@storybook/icons": "npm:^1.2.5" @@ -5630,7 +5630,7 @@ __metadata: "@babel/core": "npm:^7.23.2" "@babel/preset-env": "npm:^7.23.2" "@babel/types": "npm:^7.23.0" - "@storybook/csf": "npm:^0.1.4" + "@storybook/csf": "npm:0.1.5--canary.82.2c2dd28.0" "@storybook/csf-tools": "workspace:*" "@storybook/node-logger": "workspace:*" "@storybook/types": "workspace:*" @@ -5666,7 +5666,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.4" + "@storybook/csf": "npm:0.1.5--canary.82.2c2dd28.0" "@storybook/global": "npm:^5.0.0" "@storybook/icons": "npm:^1.2.5" "@storybook/test": "workspace:*" @@ -5759,7 +5759,7 @@ __metadata: "@storybook/channels": "workspace:*" "@storybook/core-common": "workspace:*" "@storybook/core-events": "workspace:*" - "@storybook/csf": "npm:^0.1.4" + "@storybook/csf": "npm:0.1.5--canary.82.2c2dd28.0" "@storybook/csf-tools": "workspace:*" "@storybook/docs-mdx": "npm:3.0.0" "@storybook/global": "npm:^5.0.0" @@ -5841,7 +5841,7 @@ __metadata: "@babel/parser": "npm:^7.23.0" "@babel/traverse": "npm:^7.23.2" "@babel/types": "npm:^7.23.0" - "@storybook/csf": "npm:^0.1.4" + "@storybook/csf": "npm:0.1.5--canary.82.2c2dd28.0" "@storybook/types": "workspace:*" "@types/fs-extra": "npm:^11.0.1" "@types/js-yaml": "npm:^4.0.5" @@ -5853,6 +5853,15 @@ __metadata: languageName: unknown linkType: soft +"@storybook/csf@npm:0.1.5--canary.82.2c2dd28.0": + version: 0.1.5--canary.82.2c2dd28.0 + resolution: "@storybook/csf@npm:0.1.5--canary.82.2c2dd28.0" + dependencies: + type-fest: "npm:^2.19.0" + checksum: 10c0/9e75a9bdf865ef441c809b3e480fbd218b5f5c90c2d676702e1b98499be67f5b1d4a32e6dd4bfc03e7f9bbf5097ae3f6bc940a89a4573cbd57d4a6d89f670d09 + languageName: node + linkType: hard + "@storybook/csf@npm:^0.0.1": version: 0.0.1 resolution: "@storybook/csf@npm:0.0.1" @@ -5862,15 +5871,6 @@ __metadata: languageName: node linkType: hard -"@storybook/csf@npm:^0.1.4": - version: 0.1.4 - resolution: "@storybook/csf@npm:0.1.4" - dependencies: - type-fest: "npm:^2.19.0" - checksum: 10c0/a988e37d5dd3e6fcd44c16b08f4778b1bf1f4b46491d1331afac9366852208b64214425331f1496c3666fd284ad42c14ef8b5f678ade94fe82534d1e631c4ae8 - languageName: node - linkType: hard - "@storybook/docs-mdx@npm:3.0.0": version: 3.0.0 resolution: "@storybook/docs-mdx@npm:3.0.0" @@ -6038,7 +6038,7 @@ __metadata: "@storybook/channels": "workspace:*" "@storybook/client-logger": "workspace:*" "@storybook/core-events": "workspace:*" - "@storybook/csf": "npm:^0.1.4" + "@storybook/csf": "npm:0.1.5--canary.82.2c2dd28.0" "@storybook/global": "npm:^5.0.0" "@storybook/icons": "npm:^1.2.5" "@storybook/router": "workspace:*" @@ -6374,7 +6374,7 @@ __metadata: "@storybook/client-logger": "workspace:*" "@storybook/core-common": "workspace:*" "@storybook/core-events": "workspace:*" - "@storybook/csf": "npm:^0.1.4" + "@storybook/csf": "npm:0.1.5--canary.82.2c2dd28.0" "@storybook/global": "npm:^5.0.0" "@storybook/types": "workspace:*" "@types/qs": "npm:^6.9.5" @@ -6559,7 +6559,7 @@ __metadata: "@storybook/core-events": "workspace:*" "@storybook/core-server": "workspace:*" "@storybook/core-webpack": "workspace:*" - "@storybook/csf": "npm:^0.1.4" + "@storybook/csf": "npm:0.1.5--canary.82.2c2dd28.0" "@storybook/csf-plugin": "workspace:*" "@storybook/csf-tools": "workspace:*" "@storybook/docs-tools": "workspace:*" @@ -6714,7 +6714,7 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/server@workspace:renderers/server" dependencies: - "@storybook/csf": "npm:^0.1.4" + "@storybook/csf": "npm:0.1.5--canary.82.2c2dd28.0" "@storybook/csf-tools": "workspace:*" "@storybook/global": "npm:^5.0.0" "@storybook/preview-api": "workspace:*" @@ -6731,7 +6731,7 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/source-loader@workspace:lib/source-loader" dependencies: - "@storybook/csf": "npm:^0.1.4" + "@storybook/csf": "npm:0.1.5--canary.82.2c2dd28.0" "@storybook/types": "workspace:*" estraverse: "npm:^5.2.0" lodash: "npm:^4.17.21" @@ -6910,7 +6910,7 @@ __metadata: resolution: "@storybook/types@workspace:lib/types" dependencies: "@storybook/channels": "workspace:*" - "@storybook/csf": "npm:^0.1.4" + "@storybook/csf": "npm:0.1.5--canary.82.2c2dd28.0" "@types/express": "npm:^4.7.0" "@types/fs-extra": "npm:^11.0.1" "@types/node": "npm:^18.0.0" From fcf2b846fe9bcb9f92908e21d5a2ada5acf30412 Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Fri, 12 Apr 2024 16:13:58 +0200 Subject: [PATCH 59/82] Add test --- .../template/stories/before-each.stories.ts | 29 +++++++++++++++++++ 1 file changed, 29 insertions(+) create mode 100644 code/lib/test/template/stories/before-each.stories.ts diff --git a/code/lib/test/template/stories/before-each.stories.ts b/code/lib/test/template/stories/before-each.stories.ts new file mode 100644 index 000000000000..842d9d7c2f5b --- /dev/null +++ b/code/lib/test/template/stories/before-each.stories.ts @@ -0,0 +1,29 @@ +import { global as globalThis } from '@storybook/global'; +import { expect, mocked, getByRole, spyOn, userEvent } from '@storybook/test'; + +const meta = { + component: globalThis.Components.Button, + beforeEach() { + spyOn(console, 'log').mockName('console.log'); + console.log('first'); + }, +}; + +export default meta; + +export const BeforeEachOrder = { + beforeEach() { + console.log('second'); + }, + args: { + label: 'Button', + onClick: () => { + console.log('third'); + }, + }, + async play({ canvasElement }) { + await userEvent.click(getByRole(canvasElement, 'button')); + + await expect(mocked(console.log).mock.calls).toEqual([['first'], ['second'], ['third']]); + }, +}; From f0cd70d786be816857287a417848d6351111de2d Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Fri, 12 Apr 2024 16:45:29 +0200 Subject: [PATCH 60/82] add beforeEach tests in portable stories --- .../store/csf/portable-stories.test.ts | 69 +++++++++++++++++++ .../src/modules/store/csf/portable-stories.ts | 2 +- 2 files changed, 70 insertions(+), 1 deletion(-) diff --git a/code/lib/preview-api/src/modules/store/csf/portable-stories.test.ts b/code/lib/preview-api/src/modules/store/csf/portable-stories.test.ts index a3aa544c4827..de01ac98ef5e 100644 --- a/code/lib/preview-api/src/modules/store/csf/portable-stories.test.ts +++ b/code/lib/preview-api/src/modules/store/csf/portable-stories.test.ts @@ -167,6 +167,75 @@ describe('composeStory', () => { expect(spyFn).toHaveBeenCalled(); }); + it('should work with spies set up in beforeEach', async () => { + const spyFn = vi.fn(); + + const Story: Story = { + args: { + spyFn, + }, + beforeEach: async () => { + spyFn.mockReturnValue('mockedData'); + }, + render: (args) => { + const data = args.spyFn(); + expect(data).toBe('mockedData'); + }, + }; + + const composedStory = composeStory(Story, {}); + await composedStory.load(); + composedStory(); + expect(spyFn).toHaveBeenCalled(); + }); + + it('should call beforeEach from Project, Meta and Story level', async () => { + const beforeEachSpy = vi.fn(); + const cleanupSpy = vi.fn(); + + const metaObj: Meta = { + beforeEach: async () => { + beforeEachSpy('define from meta'); + + return () => { + cleanupSpy('cleanup from meta'); + }; + }, + }; + + const Story: Story = { + render: () => 'foo', + beforeEach: async () => { + beforeEachSpy('define from story'); + + return () => { + cleanupSpy('cleanup from story'); + }; + }, + }; + + const composedStory = composeStory(Story, metaObj, { + beforeEach: async () => { + beforeEachSpy('define from project'); + + return () => { + cleanupSpy('cleanup from project'); + }; + }, + }); + await composedStory.load(); + composedStory(); + expect(beforeEachSpy).toHaveBeenNthCalledWith(1, 'define from project'); + expect(beforeEachSpy).toHaveBeenNthCalledWith(2, 'define from meta'); + expect(beforeEachSpy).toHaveBeenNthCalledWith(3, 'define from story'); + + // simulate the next story's load to trigger cleanup + await composedStory.load(); + expect(cleanupSpy).toHaveBeenNthCalledWith(1, 'cleanup from story'); + expect(cleanupSpy).toHaveBeenNthCalledWith(2, 'cleanup from meta'); + expect(cleanupSpy).toHaveBeenNthCalledWith(3, 'cleanup from project'); + }); + it('should throw an error if Story is undefined', () => { expect(() => { // @ts-expect-error (invalid input) 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 42dc379d6487..c4aa34874040 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 @@ -128,7 +128,7 @@ export function composeStory { - // First run any registerd cleanup function + // First run any registered cleanup function for (const callback of [...cleanupCallbacks].reverse()) await callback(); cleanupCallbacks.length = 0; From 43ae81810e93203947c0c115f36a3a7a9b8cd2bb Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Fri, 12 Apr 2024 16:50:50 +0200 Subject: [PATCH 61/82] add one more portable stories test --- .../store/csf/portable-stories.test.ts | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) diff --git a/code/lib/preview-api/src/modules/store/csf/portable-stories.test.ts b/code/lib/preview-api/src/modules/store/csf/portable-stories.test.ts index de01ac98ef5e..832ad437139f 100644 --- a/code/lib/preview-api/src/modules/store/csf/portable-stories.test.ts +++ b/code/lib/preview-api/src/modules/store/csf/portable-stories.test.ts @@ -236,6 +236,25 @@ describe('composeStory', () => { expect(cleanupSpy).toHaveBeenNthCalledWith(3, 'cleanup from project'); }); + it('should call beforeEach after loaders', async () => { + const spyFn = vi.fn(); + + const Story: Story = { + render: () => 'foo', + loaders: async () => { + spyFn('from loaders'); + }, + beforeEach: async () => { + spyFn('from beforeEach'); + }, + }; + + const composedStory = composeStory(Story, {}); + await composedStory.load(); + expect(spyFn).toHaveBeenNthCalledWith(1, 'from loaders'); + expect(spyFn).toHaveBeenNthCalledWith(2, 'from beforeEach'); + }); + it('should throw an error if Story is undefined', () => { expect(() => { // @ts-expect-error (invalid input) From e3c678f2ab4e268648976f65394cd3e4db567326 Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Mon, 15 Apr 2024 12:16:08 +0200 Subject: [PATCH 62/82] use next.js internal paths instead of *.actual paths --- MIGRATION.md | 10 +- code/frameworks/nextjs/src/cache/index.ts | 4 - .../nextjs/src/export-mocks/cache/index.ts | 19 +- .../nextjs/src/export-mocks/headers/index.ts | 4 +- .../src/export-mocks/navigation/index.ts | 4 +- .../nextjs/src/export-mocks/router/index.ts | 4 +- .../nextjs/src/export-mocks/webpack.ts | 5 - code/frameworks/nextjs/src/globals.d.ts | 12 - .../nextjs/yarn.lock | 814 +++++++++--------- 9 files changed, 431 insertions(+), 445 deletions(-) delete mode 100644 code/frameworks/nextjs/src/cache/index.ts diff --git a/MIGRATION.md b/MIGRATION.md index 2cd7d04f6fff..b9e46b719dba 100644 --- a/MIGRATION.md +++ b/MIGRATION.md @@ -412,13 +412,7 @@ #### @storybook/nextjs requires specific path aliases to be setup -In order to properly mock the `next/router`, `next/header`, `next/navigation` and `next/cache` APIs, the `@storybook/nextjs` framework includes internal Webpack aliases to those modules. If you use portable stories in your Jest configuration, you will run into the following issue: - -``` -Cannot find module 'next/navigation.actual' from 'node_modules/@storybook/nextjs/dist/export-mocks/navigation/index.js' -``` - -To fix it, you should set the aliases in your Jest config files `moduleNameMapper` property using the `getPackageAliases` helper from `@storybook/nextjs/export-mocks`: +In order to properly mock the `next/router`, `next/header`, `next/navigation` and `next/cache` APIs, the `@storybook/nextjs` framework includes internal Webpack aliases to those modules. If you use portable stories in your Jest tests, you should set the aliases in your Jest config files `moduleNameMapper` property using the `getPackageAliases` helper from `@storybook/nextjs/export-mocks`: ```js const nextJest = require("next/jest.js"); @@ -432,6 +426,8 @@ const customJestConfig = { module.exports = createJestConfig(customJestConfig); ``` +This will make sure you end using the correct implementation of the packages and avoid having issues in your tests. + ## From version 7.x to 8.0.0 ### Portable stories diff --git a/code/frameworks/nextjs/src/cache/index.ts b/code/frameworks/nextjs/src/cache/index.ts deleted file mode 100644 index c08124c90813..000000000000 --- a/code/frameworks/nextjs/src/cache/index.ts +++ /dev/null @@ -1,4 +0,0 @@ -import { fn } from '@storybook/test'; - -export * from 'next/cache.actual'; -export const revalidatePath = fn().mockName('revalidatePath'); diff --git a/code/frameworks/nextjs/src/export-mocks/cache/index.ts b/code/frameworks/nextjs/src/export-mocks/cache/index.ts index 7529a220aa76..1692979f0159 100644 --- a/code/frameworks/nextjs/src/export-mocks/cache/index.ts +++ b/code/frameworks/nextjs/src/export-mocks/cache/index.ts @@ -1,8 +1,17 @@ import { fn } from '@storybook/test'; - -// re-exports of the actual module -export * from 'next/cache.actual'; +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'; // mock utilities/overrides (as of Next v14.2.0) -export const revalidatePath = fn().mockName('revalidatePath'); -export const revalidateTag = fn().mockName('revalidateTag'); +const revalidatePath = fn().mockName('revalidatePath'); +const revalidateTag = fn().mockName('revalidateTag'); + +const cacheExports = { + unstable_cache, + revalidateTag, + revalidatePath, + unstable_noStore, +}; + +export default cacheExports; +export { unstable_cache, revalidateTag, revalidatePath, unstable_noStore }; diff --git a/code/frameworks/nextjs/src/export-mocks/headers/index.ts b/code/frameworks/nextjs/src/export-mocks/headers/index.ts index d14507fdfb2e..1ec2cbd2915f 100644 --- a/code/frameworks/nextjs/src/export-mocks/headers/index.ts +++ b/code/frameworks/nextjs/src/export-mocks/headers/index.ts @@ -1,8 +1,8 @@ import { fn } from '@storybook/test'; -import * as originalHeaders from 'next/headers.actual'; +import * as originalHeaders from 'next/dist/client/components/headers'; // re-exports of the actual module -export * from 'next/headers.actual'; +export * from 'next/dist/client/components/headers'; // mock utilities/overrides (as of Next v14.2.0) export { headers } from './headers'; diff --git a/code/frameworks/nextjs/src/export-mocks/navigation/index.ts b/code/frameworks/nextjs/src/export-mocks/navigation/index.ts index dabfdece7881..47a7e5801b56 100644 --- a/code/frameworks/nextjs/src/export-mocks/navigation/index.ts +++ b/code/frameworks/nextjs/src/export-mocks/navigation/index.ts @@ -1,7 +1,7 @@ import type { Mock } from '@storybook/test'; import { fn } from '@storybook/test'; import { NextjsRouterMocksNotAvailable } from '@storybook/core-events/preview-errors'; -import * as originalNavigation from 'next/navigation.actual'; +import * as originalNavigation from 'next/dist/client/components/navigation'; let navigationAPI: { push: Mock; @@ -53,7 +53,7 @@ const getRouter = () => { }; // re-exports of the actual module -export * from 'next/navigation.actual'; +export * from 'next/dist/client/components/navigation'; // mock utilities/overrides (as of Next v14.2.0) const redirect = fn().mockName('redirect'); diff --git a/code/frameworks/nextjs/src/export-mocks/router/index.ts b/code/frameworks/nextjs/src/export-mocks/router/index.ts index 49e89a6c5eb7..c9f81f3a72be 100644 --- a/code/frameworks/nextjs/src/export-mocks/router/index.ts +++ b/code/frameworks/nextjs/src/export-mocks/router/index.ts @@ -2,7 +2,7 @@ import type { Mock } from '@storybook/test'; import { fn } from '@storybook/test'; import { NextjsRouterMocksNotAvailable } from '@storybook/core-events/preview-errors'; import type { NextRouter, SingletonRouter } from 'next/router'; -import singletonRouter, * as originalRouter from 'next/router.actual'; +import singletonRouter, * as originalRouter from 'next/dist/client/router'; const defaultRouterState = { route: '/', @@ -106,7 +106,7 @@ const getRouter = () => { }; // re-exports of the actual module -export * from 'next/router.actual'; +export * from 'next/dist/client/router'; export default singletonRouter; // mock utilities/overrides (as of Next v14.2.0) diff --git a/code/frameworks/nextjs/src/export-mocks/webpack.ts b/code/frameworks/nextjs/src/export-mocks/webpack.ts index 64d7d37a33fb..789dc1df21cd 100644 --- a/code/frameworks/nextjs/src/export-mocks/webpack.ts +++ b/code/frameworks/nextjs/src/export-mocks/webpack.ts @@ -12,20 +12,15 @@ export const getPackageAliases = ({ useESM = false }: { useESM?: boolean } = {}) const routerPath = join(packageLocation, `/dist/export-mocks/router/index.${extension}`); return { - // "*.actual" paths are used as reexports of the original module - 'next/headers.actual': require.resolve('next/headers'), 'next/headers': headersPath, '@storybook/nextjs/headers.mock': headersPath, - 'next/navigation.actual': require.resolve('next/navigation'), 'next/navigation': navigationPath, '@storybook/nextjs/navigation.mock': navigationPath, - 'next/router.actual': require.resolve('next/router'), 'next/router': routerPath, '@storybook/nextjs/router.mock': routerPath, - 'next/cache.actual': require.resolve('next/cache'), 'next/cache': cachePath, '@storybook/nextjs/cache.mock': cachePath, }; diff --git a/code/frameworks/nextjs/src/globals.d.ts b/code/frameworks/nextjs/src/globals.d.ts index 58b3cfdf6114..e966d7072a32 100644 --- a/code/frameworks/nextjs/src/globals.d.ts +++ b/code/frameworks/nextjs/src/globals.d.ts @@ -1,15 +1,3 @@ declare module 'next/dist/compiled'; declare module 'next/dist/compiled/babel/plugin-transform-modules-commonjs'; declare module 'next/dist/compiled/babel/plugin-syntax-jsx'; -declare module 'next/navigation.actual' { - export * from 'next/navigation'; -} -declare module 'next/router.actual' { - export * from 'next/router'; -} -declare module 'next/cache.actual' { - export * from 'next/cache'; -} -declare module 'next/headers.actual' { - export * from 'next/headers'; -} diff --git a/test-storybooks/portable-stories-kitchen-sink/nextjs/yarn.lock b/test-storybooks/portable-stories-kitchen-sink/nextjs/yarn.lock index 7e95fae96fcf..e0efcfd9d6d9 100644 --- a/test-storybooks/portable-stories-kitchen-sink/nextjs/yarn.lock +++ b/test-storybooks/portable-stories-kitchen-sink/nextjs/yarn.lock @@ -1566,6 +1566,15 @@ __metadata: languageName: node linkType: hard +"@emnapi/runtime@npm:^1.1.0": + version: 1.1.1 + resolution: "@emnapi/runtime@npm:1.1.1" + dependencies: + tslib: "npm:^2.4.0" + checksum: 10/9c804f79453aa378fbcd0106e67216b9dc2514ec6d4c0ce06aa5483ba853c6f92e1b84cc60b4253276df7355daf40eda5c929b4613e7179bed4f4d3be7d74d83 + languageName: node + linkType: hard + "@emotion/use-insertion-effect-with-fallbacks@npm:^1.0.1": version: 1.0.1 resolution: "@emotion/use-insertion-effect-with-fallbacks@npm:1.0.1" @@ -1810,6 +1819,181 @@ __metadata: languageName: node linkType: hard +"@img/sharp-darwin-arm64@npm:0.33.3": + version: 0.33.3 + resolution: "@img/sharp-darwin-arm64@npm:0.33.3" + dependencies: + "@img/sharp-libvips-darwin-arm64": "npm:1.0.2" + dependenciesMeta: + "@img/sharp-libvips-darwin-arm64": + optional: true + conditions: os=darwin & cpu=arm64 + languageName: node + linkType: hard + +"@img/sharp-darwin-x64@npm:0.33.3": + version: 0.33.3 + resolution: "@img/sharp-darwin-x64@npm:0.33.3" + dependencies: + "@img/sharp-libvips-darwin-x64": "npm:1.0.2" + dependenciesMeta: + "@img/sharp-libvips-darwin-x64": + optional: true + conditions: os=darwin & cpu=x64 + languageName: node + linkType: hard + +"@img/sharp-libvips-darwin-arm64@npm:1.0.2": + version: 1.0.2 + resolution: "@img/sharp-libvips-darwin-arm64@npm:1.0.2" + conditions: os=darwin & cpu=arm64 + languageName: node + linkType: hard + +"@img/sharp-libvips-darwin-x64@npm:1.0.2": + version: 1.0.2 + resolution: "@img/sharp-libvips-darwin-x64@npm:1.0.2" + conditions: os=darwin & cpu=x64 + languageName: node + linkType: hard + +"@img/sharp-libvips-linux-arm64@npm:1.0.2": + version: 1.0.2 + resolution: "@img/sharp-libvips-linux-arm64@npm:1.0.2" + conditions: os=linux & cpu=arm64 & libc=glibc + languageName: node + linkType: hard + +"@img/sharp-libvips-linux-arm@npm:1.0.2": + version: 1.0.2 + resolution: "@img/sharp-libvips-linux-arm@npm:1.0.2" + conditions: os=linux & cpu=arm & libc=glibc + languageName: node + linkType: hard + +"@img/sharp-libvips-linux-s390x@npm:1.0.2": + version: 1.0.2 + resolution: "@img/sharp-libvips-linux-s390x@npm:1.0.2" + conditions: os=linux & cpu=s390x & libc=glibc + languageName: node + linkType: hard + +"@img/sharp-libvips-linux-x64@npm:1.0.2": + version: 1.0.2 + resolution: "@img/sharp-libvips-linux-x64@npm:1.0.2" + conditions: os=linux & cpu=x64 & libc=glibc + languageName: node + linkType: hard + +"@img/sharp-libvips-linuxmusl-arm64@npm:1.0.2": + version: 1.0.2 + resolution: "@img/sharp-libvips-linuxmusl-arm64@npm:1.0.2" + conditions: os=linux & cpu=arm64 & libc=musl + languageName: node + linkType: hard + +"@img/sharp-libvips-linuxmusl-x64@npm:1.0.2": + version: 1.0.2 + resolution: "@img/sharp-libvips-linuxmusl-x64@npm:1.0.2" + conditions: os=linux & cpu=x64 & libc=musl + languageName: node + linkType: hard + +"@img/sharp-linux-arm64@npm:0.33.3": + version: 0.33.3 + resolution: "@img/sharp-linux-arm64@npm:0.33.3" + dependencies: + "@img/sharp-libvips-linux-arm64": "npm:1.0.2" + dependenciesMeta: + "@img/sharp-libvips-linux-arm64": + optional: true + conditions: os=linux & cpu=arm64 & libc=glibc + languageName: node + linkType: hard + +"@img/sharp-linux-arm@npm:0.33.3": + version: 0.33.3 + resolution: "@img/sharp-linux-arm@npm:0.33.3" + dependencies: + "@img/sharp-libvips-linux-arm": "npm:1.0.2" + dependenciesMeta: + "@img/sharp-libvips-linux-arm": + optional: true + conditions: os=linux & cpu=arm & libc=glibc + languageName: node + linkType: hard + +"@img/sharp-linux-s390x@npm:0.33.3": + version: 0.33.3 + resolution: "@img/sharp-linux-s390x@npm:0.33.3" + dependencies: + "@img/sharp-libvips-linux-s390x": "npm:1.0.2" + dependenciesMeta: + "@img/sharp-libvips-linux-s390x": + optional: true + conditions: os=linux & cpu=s390x & libc=glibc + languageName: node + linkType: hard + +"@img/sharp-linux-x64@npm:0.33.3": + version: 0.33.3 + resolution: "@img/sharp-linux-x64@npm:0.33.3" + dependencies: + "@img/sharp-libvips-linux-x64": "npm:1.0.2" + dependenciesMeta: + "@img/sharp-libvips-linux-x64": + optional: true + conditions: os=linux & cpu=x64 & libc=glibc + languageName: node + linkType: hard + +"@img/sharp-linuxmusl-arm64@npm:0.33.3": + version: 0.33.3 + resolution: "@img/sharp-linuxmusl-arm64@npm:0.33.3" + dependencies: + "@img/sharp-libvips-linuxmusl-arm64": "npm:1.0.2" + dependenciesMeta: + "@img/sharp-libvips-linuxmusl-arm64": + optional: true + conditions: os=linux & cpu=arm64 & libc=musl + languageName: node + linkType: hard + +"@img/sharp-linuxmusl-x64@npm:0.33.3": + version: 0.33.3 + resolution: "@img/sharp-linuxmusl-x64@npm:0.33.3" + dependencies: + "@img/sharp-libvips-linuxmusl-x64": "npm:1.0.2" + dependenciesMeta: + "@img/sharp-libvips-linuxmusl-x64": + optional: true + conditions: os=linux & cpu=x64 & libc=musl + languageName: node + linkType: hard + +"@img/sharp-wasm32@npm:0.33.3": + version: 0.33.3 + resolution: "@img/sharp-wasm32@npm:0.33.3" + dependencies: + "@emnapi/runtime": "npm:^1.1.0" + conditions: cpu=wasm32 + languageName: node + linkType: hard + +"@img/sharp-win32-ia32@npm:0.33.3": + version: 0.33.3 + resolution: "@img/sharp-win32-ia32@npm:0.33.3" + conditions: os=win32 & cpu=ia32 + languageName: node + linkType: hard + +"@img/sharp-win32-x64@npm:0.33.3": + version: 0.33.3 + resolution: "@img/sharp-win32-x64@npm:0.33.3" + conditions: os=win32 & cpu=x64 + languageName: node + linkType: hard + "@isaacs/cliui@npm:^8.0.2": version: 8.0.2 resolution: "@isaacs/cliui@npm:8.0.2" @@ -2378,8 +2562,8 @@ __metadata: linkType: hard "@storybook/addon-actions@file:../../../code/addons/actions::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.6 - resolution: "@storybook/addon-actions@file:../../../code/addons/actions#../../../code/addons/actions::hash=a58e61&locator=portable-stories-nextjs%40workspace%3A." + version: 8.1.0-alpha.7 + resolution: "@storybook/addon-actions@file:../../../code/addons/actions#../../../code/addons/actions::hash=d59fc8&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/core-events": "workspace:*" "@storybook/global": "npm:^5.0.0" @@ -2387,35 +2571,35 @@ __metadata: dequal: "npm:^2.0.2" polished: "npm:^4.2.2" uuid: "npm:^9.0.0" - checksum: 10/448ef050488c32b161113c707a9bd3e4eb734f7a23f350d7cb05dd30927785c19b0eb1b2f01f8f5f7106e8f46dcc2cfc9496a089dee818754dc83ae5403d8ee6 + checksum: 10/8e77a9ceaec6076a498ead78455d792ce995d184ce5391415b65dff69e90d63bcb2aa9df49c282d68ed4c90c02301af94d1e7e2c34351182c22e3bc21525c71a languageName: node linkType: hard "@storybook/addon-backgrounds@file:../../../code/addons/backgrounds::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.6 - resolution: "@storybook/addon-backgrounds@file:../../../code/addons/backgrounds#../../../code/addons/backgrounds::hash=bbac2f&locator=portable-stories-nextjs%40workspace%3A." + version: 8.1.0-alpha.7 + resolution: "@storybook/addon-backgrounds@file:../../../code/addons/backgrounds#../../../code/addons/backgrounds::hash=445bce&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/global": "npm:^5.0.0" memoizerific: "npm:^1.11.3" ts-dedent: "npm:^2.0.0" - checksum: 10/aaae35c1f570d788cded175bad9b07ce9826023fa320e6d276c62678953d07cfe98f636005d7ce0456d0b5df699e16377317edcfdb7d304d3b05cc4d1683bb72 + checksum: 10/7f2c66b7516beeeb976d227f27f0cebd600ac5d3abada7d5e01c30d10cc053059f15b607cb78f1c2d03c82a8294fb61598cbca41c3c5f3cf432e79587d4d15a2 languageName: node linkType: hard "@storybook/addon-controls@file:../../../code/addons/controls::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.6 - resolution: "@storybook/addon-controls@file:../../../code/addons/controls#../../../code/addons/controls::hash=b28ca0&locator=portable-stories-nextjs%40workspace%3A." + version: 8.1.0-alpha.7 + resolution: "@storybook/addon-controls@file:../../../code/addons/controls#../../../code/addons/controls::hash=784f9c&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/blocks": "workspace:*" lodash: "npm:^4.17.21" ts-dedent: "npm:^2.0.0" - checksum: 10/f68a13e40bda392c1abc4cee2f2294fe98f11e8b34af8213532ae14027327efbafb3c9a8d75d300a3c58fb8d036a09f349e60cd064dd8dbde504add2945bab6b + checksum: 10/6e4db5b470f526bb357af93fd6757fe8d4976f4fdb1c3856b828f408780e27645038bdc70e318de40f8fc069a359d4d822ada860df8cffd41daf5506b5468642 languageName: node linkType: hard "@storybook/addon-docs@file:../../../code/addons/docs::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.6 - resolution: "@storybook/addon-docs@file:../../../code/addons/docs#../../../code/addons/docs::hash=c90446&locator=portable-stories-nextjs%40workspace%3A." + version: 8.1.0-alpha.7 + resolution: "@storybook/addon-docs@file:../../../code/addons/docs#../../../code/addons/docs::hash=9997b1&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@babel/core": "npm:^7.12.3" "@mdx-js/react": "npm:^3.0.0" @@ -2437,13 +2621,13 @@ __metadata: rehype-external-links: "npm:^3.0.0" rehype-slug: "npm:^6.0.0" ts-dedent: "npm:^2.0.0" - checksum: 10/6cb03b37a894e2a563a67bcc1179194a7e48f202ed438763cce7b6255697fd6dd192607076dad6503d7be4a1d094daf9d18daf50b8aebae71ededfe020f151f1 + checksum: 10/f5ddf6fea8bce15a81e067cfae26adfc76b751c4a58539efbcdb22c5e8c4195bb156ff97316d3066026c810b3855dbe7cc091eff0ede9b12914d261629b7a828 languageName: node linkType: hard "@storybook/addon-essentials@file:../../../code/addons/essentials::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.6 - resolution: "@storybook/addon-essentials@file:../../../code/addons/essentials#../../../code/addons/essentials::hash=584ec5&locator=portable-stories-nextjs%40workspace%3A." + version: 8.1.0-alpha.7 + resolution: "@storybook/addon-essentials@file:../../../code/addons/essentials#../../../code/addons/essentials::hash=80691b&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/addon-actions": "workspace:*" "@storybook/addon-backgrounds": "workspace:*" @@ -2459,22 +2643,22 @@ __metadata: "@storybook/node-logger": "workspace:*" "@storybook/preview-api": "workspace:*" ts-dedent: "npm:^2.0.0" - checksum: 10/986829238ed66c8818ab27995effd47614c4182aa326e70de645d38babf58f2cab76c7a2f1825a34cecab07ca78ca2bb5e69938da2dec3bb9837905f7e43ec9b + checksum: 10/0479f4d2f488ab30b371fd9f2bd5c12b7dcd029aac9a1f8f774701886d941b63c0ec4f50c221469ea220582ce4720d7386b9458cf15a29bf2c03eb51a6c70d13 languageName: node linkType: hard "@storybook/addon-highlight@file:../../../code/addons/highlight::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.6 - resolution: "@storybook/addon-highlight@file:../../../code/addons/highlight#../../../code/addons/highlight::hash=291b82&locator=portable-stories-nextjs%40workspace%3A." + version: 8.1.0-alpha.7 + resolution: "@storybook/addon-highlight@file:../../../code/addons/highlight#../../../code/addons/highlight::hash=7ee0d6&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/global": "npm:^5.0.0" - checksum: 10/ecf6c7aecffb3b61cd08468d9a8f0f67b191ff8c4d9df0022b077f3e0cb6a42b109a8d844745c14a62ae740131708c606b3b5e359fbf5921559b0e02a85cc686 + checksum: 10/1e7db616fd4ddc6dd32583e6aff3df57d0ff001d2a5de8f990de53625d041b9f09bc6ec729accd0b528f24d54a954e10677bfbeeed07e938c00cbaed1d19c5b9 languageName: node linkType: hard "@storybook/addon-interactions@file:../../../code/addons/interactions::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.6 - resolution: "@storybook/addon-interactions@file:../../../code/addons/interactions#../../../code/addons/interactions::hash=43a156&locator=portable-stories-nextjs%40workspace%3A." + version: 8.1.0-alpha.7 + resolution: "@storybook/addon-interactions@file:../../../code/addons/interactions#../../../code/addons/interactions::hash=811a2a&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/global": "npm:^5.0.0" "@storybook/instrumenter": "workspace:*" @@ -2482,55 +2666,55 @@ __metadata: "@storybook/types": "workspace:*" polished: "npm:^4.2.2" ts-dedent: "npm:^2.2.0" - checksum: 10/7ab50dfb5ccfde231d5ebde1e695512c5bb3706e5fe9bc580fbf23d5298ac7685e9648fbbc5f65605779954dc2f04ac1ce799e47b387d7eaaff5c9d7e8485602 + checksum: 10/b13a075c0deb2578a7535c42c124adc1fb6f097187f119ccfdfd3e54e867f8a1f448ebc86a7631ac49dcf52a79512a872fa72737a4ebf2ddbe9cb3ae9c707750 languageName: node linkType: hard "@storybook/addon-measure@file:../../../code/addons/measure::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.6 - resolution: "@storybook/addon-measure@file:../../../code/addons/measure#../../../code/addons/measure::hash=43b2ca&locator=portable-stories-nextjs%40workspace%3A." + version: 8.1.0-alpha.7 + resolution: "@storybook/addon-measure@file:../../../code/addons/measure#../../../code/addons/measure::hash=1bf2c0&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/global": "npm:^5.0.0" tiny-invariant: "npm:^1.3.1" - checksum: 10/ce880ee3acae8c6a5994a5905724040f1cb9b7a1c1654c6ab6dfec0f61298db78afc78309aa966eecf1dbdc2e59f48cb2108c7514305ca701eeb19262477bfc8 + checksum: 10/dbb3076c99da811d94598070cb57ed19b2a00c875668fc8d586f93d59585b6f2485f04998f61294cd037b43f8d03f21b53d1918c73d1bb9c8652bf6aa6737530 languageName: node linkType: hard "@storybook/addon-outline@file:../../../code/addons/outline::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.6 - resolution: "@storybook/addon-outline@file:../../../code/addons/outline#../../../code/addons/outline::hash=772f7e&locator=portable-stories-nextjs%40workspace%3A." + version: 8.1.0-alpha.7 + resolution: "@storybook/addon-outline@file:../../../code/addons/outline#../../../code/addons/outline::hash=2a387b&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/global": "npm:^5.0.0" ts-dedent: "npm:^2.0.0" - checksum: 10/17d761b1298d08adc15d65dfb3efb91440cc73e6828ab7ee290703e36f9c2756546a99220119c15d03697c5ac2b71ccdd7b98fba4ebb87faab9caf9ba053dbdc + checksum: 10/bc58cf5bb670333b33fa2c2414b17b0bf97ffdf92bafe89eef04f1965479f7833c388087ebb478f152780c9119f8795ae169125291419fd7e74d11cbb1410540 languageName: node linkType: hard "@storybook/addon-toolbars@file:../../../code/addons/toolbars::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.6 - resolution: "@storybook/addon-toolbars@file:../../../code/addons/toolbars#../../../code/addons/toolbars::hash=ce7192&locator=portable-stories-nextjs%40workspace%3A." - checksum: 10/fd28942b5da079e25cd778e7b134b34e07289044553622b1a1636e7e2da5075ddf16f66934619eb7ba3514d98425102365ea8dd8cebbf17fec4bb6849ef38ec5 + version: 8.1.0-alpha.7 + resolution: "@storybook/addon-toolbars@file:../../../code/addons/toolbars#../../../code/addons/toolbars::hash=dba398&locator=portable-stories-nextjs%40workspace%3A." + checksum: 10/14efee7b4f58d0ee846a71aa6d614a0927a80e32c90f677325e17d0d2402ed38effc226a69c9856073dbb809d84c4c7606c339f99be6b46a6a12e0f3ce2f075b languageName: node linkType: hard "@storybook/addon-viewport@file:../../../code/addons/viewport::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.6 - resolution: "@storybook/addon-viewport@file:../../../code/addons/viewport#../../../code/addons/viewport::hash=1fd57e&locator=portable-stories-nextjs%40workspace%3A." + version: 8.1.0-alpha.7 + resolution: "@storybook/addon-viewport@file:../../../code/addons/viewport#../../../code/addons/viewport::hash=939ad5&locator=portable-stories-nextjs%40workspace%3A." dependencies: memoizerific: "npm:^1.11.3" - checksum: 10/00e25bcdc41c2ac49405c62004b0946ca24f73ee7d65678ea25ddd222ac44e44ed6716ab6c66d6743b8dd4bb89123cce0edd4bafb14883257cb133f3a8a4198a + checksum: 10/ab29c073f7d3ce1e9466672441885600429ebbba1742bc2eb0f8656853f25d9a0d86ff865f41a5b76f0809d6929a955cbc7dba716d3834887300fd3813bfa045 languageName: node linkType: hard "@storybook/blocks@file:../../../code/ui/blocks::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.6 - resolution: "@storybook/blocks@file:../../../code/ui/blocks#../../../code/ui/blocks::hash=07fbe6&locator=portable-stories-nextjs%40workspace%3A." + version: 8.1.0-alpha.7 + resolution: "@storybook/blocks@file:../../../code/ui/blocks#../../../code/ui/blocks::hash=cbda5d&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/channels": "workspace:*" "@storybook/client-logger": "workspace:*" "@storybook/components": "workspace:*" "@storybook/core-events": "workspace:*" - "@storybook/csf": "npm:^0.1.2" + "@storybook/csf": "npm:0.1.5--canary.82.2c2dd28.0" "@storybook/docs-tools": "workspace:*" "@storybook/global": "npm:^5.0.0" "@storybook/icons": "npm:^1.2.5" @@ -2558,13 +2742,13 @@ __metadata: optional: true react-dom: optional: true - checksum: 10/b20b19cd047db66bc11227d9c64d66285b29d34da8c085d675c948355edc0a66e36b08bd95626536ad15ce970461c19528326a38f083c8533a9aeb3223fca6ee + checksum: 10/fbe2906d5016e49ff0019e7360047430bd60e277b0d2e45b90f257c72b586a89eff378a98e06b8441943015bf6eadb78a7ab8a386a43e91cd562efea9658f465 languageName: node linkType: hard "@storybook/builder-manager@file:../../../code/builders/builder-manager::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.6 - resolution: "@storybook/builder-manager@file:../../../code/builders/builder-manager#../../../code/builders/builder-manager::hash=875996&locator=portable-stories-nextjs%40workspace%3A." + version: 8.1.0-alpha.7 + resolution: "@storybook/builder-manager@file:../../../code/builders/builder-manager#../../../code/builders/builder-manager::hash=cdb753&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@fal-works/esbuild-plugin-global-externals": "npm:^2.1.2" "@storybook/core-common": "workspace:*" @@ -2580,13 +2764,13 @@ __metadata: fs-extra: "npm:^11.1.0" process: "npm:^0.11.10" util: "npm:^0.12.4" - checksum: 10/b776c568ef58940649b06b746b4002b221b88b0c9c4d56bb136b8997cfa88f77e3a05954c59c815ca2ecf19285607e2ef717198f42c11dac2235ed6b01a07c9d + checksum: 10/32bdfc42175480e59defece1f67634d40d2d039668c81e372736ac6990b2144cdd2676f9f9859250fbb5d7855cd12729f0107a64a07e32eb6a9704daf76d816b languageName: node linkType: hard "@storybook/builder-webpack5@file:../../../code/builders/builder-webpack5::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.6 - resolution: "@storybook/builder-webpack5@file:../../../code/builders/builder-webpack5#../../../code/builders/builder-webpack5::hash=983659&locator=portable-stories-nextjs%40workspace%3A." + version: 8.1.0-alpha.7 + resolution: "@storybook/builder-webpack5@file:../../../code/builders/builder-webpack5#../../../code/builders/builder-webpack5::hash=a8e558&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/channels": "workspace:*" "@storybook/client-logger": "workspace:*" @@ -2619,32 +2803,32 @@ __metadata: util: "npm:^0.12.4" util-deprecate: "npm:^1.0.2" webpack: "npm:5" - webpack-dev-middleware: "npm:^6.1.1" + webpack-dev-middleware: "npm:^6.1.2" webpack-hot-middleware: "npm:^2.25.1" webpack-virtual-modules: "npm:^0.5.0" peerDependenciesMeta: typescript: optional: true - checksum: 10/f84f41cd8ac80376ba603f4bb58da565f2b0e95ed37593279d85c4e5573de64633f10b7c6f2bd399f6d40057f1c97934760b969326520250f6de5efd07ac967b + checksum: 10/a6b42481cf0694efbbee23ee57657cf700da49c5b6744a87667b6c6cea7e1381c5cf67bc49640231083f7c0387f96a82a9cb853bdba0a9add540fef0dd924bf1 languageName: node linkType: hard "@storybook/channels@file:../../../code/lib/channels::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.6 - resolution: "@storybook/channels@file:../../../code/lib/channels#../../../code/lib/channels::hash=3a33a2&locator=portable-stories-nextjs%40workspace%3A." + version: 8.1.0-alpha.7 + resolution: "@storybook/channels@file:../../../code/lib/channels#../../../code/lib/channels::hash=c002e8&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/client-logger": "workspace:*" "@storybook/core-events": "workspace:*" "@storybook/global": "npm:^5.0.0" telejson: "npm:^7.2.0" tiny-invariant: "npm:^1.3.1" - checksum: 10/cda1b155f07fdac919a29e5a5287ae33ef4b3ed9c5c9816c29e17e3aa0dd788dc59da8775c40341ebcbd426ecf4f9ab629949dfe945834f48db7ca6053c062f1 + checksum: 10/011d5c3631e39ecb2e0bee1d18c238d27a3b2523f674775ced4a187b589a3165504f2e685b77334347f01c415fb07b2ecf748ad0ad12c926b188a8450db6e5b2 languageName: node linkType: hard "@storybook/cli@file:../../../code/lib/cli::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.6 - resolution: "@storybook/cli@file:../../../code/lib/cli#../../../code/lib/cli::hash=2914c7&locator=portable-stories-nextjs%40workspace%3A." + version: 8.1.0-alpha.7 + resolution: "@storybook/cli@file:../../../code/lib/cli#../../../code/lib/cli::hash=4c4245&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@babel/core": "npm:^7.23.0" "@babel/types": "npm:^7.23.0" @@ -2685,27 +2869,27 @@ __metadata: bin: getstorybook: ./bin/index.js sb: ./bin/index.js - checksum: 10/6c967c34ef47687aa6ccbc70d82f22e375be79af1bf5eec3e1163c7774b65fda69a414c0aa712039062a9f184bc84d70e7fcf713712c28d4a121cc3848a32600 + checksum: 10/6e3c6c9e15ddafb9444d51c973b5fa83b11d57943dd339cfaa5f51386b1590da12e43cc84f15707080d69cee3edbef79d9dac8d18a0ed4a9c950f180b52e239e languageName: node linkType: hard "@storybook/client-logger@file:../../../code/lib/client-logger::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.6 - resolution: "@storybook/client-logger@file:../../../code/lib/client-logger#../../../code/lib/client-logger::hash=f3ac76&locator=portable-stories-nextjs%40workspace%3A." + version: 8.1.0-alpha.7 + resolution: "@storybook/client-logger@file:../../../code/lib/client-logger#../../../code/lib/client-logger::hash=3fcc66&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/global": "npm:^5.0.0" - checksum: 10/00b5cfade208483f5ec85c8aa59cabf402502a4cf1d9c3ee24a311a396e65ce97f0a3d4356aac9f413c8d84c9804ccb07aaeda6f3d553799e6e036960f4a2fbe + checksum: 10/b9659c0914a46c81a0c8b2ab88741832504b4d87da0e785219ea5182154690d5d37107b42923143f598f36bf263b15a6f4dfa14522bdcada8abd97a581981ca3 languageName: node linkType: hard "@storybook/codemod@file:../../../code/lib/codemod::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.6 - resolution: "@storybook/codemod@file:../../../code/lib/codemod#../../../code/lib/codemod::hash=13e51b&locator=portable-stories-nextjs%40workspace%3A." + version: 8.1.0-alpha.7 + resolution: "@storybook/codemod@file:../../../code/lib/codemod#../../../code/lib/codemod::hash=581658&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@babel/core": "npm:^7.23.2" "@babel/preset-env": "npm:^7.23.2" "@babel/types": "npm:^7.23.0" - "@storybook/csf": "npm:^0.1.2" + "@storybook/csf": "npm:0.1.5--canary.82.2c2dd28.0" "@storybook/csf-tools": "workspace:*" "@storybook/node-logger": "workspace:*" "@storybook/types": "workspace:*" @@ -2717,17 +2901,17 @@ __metadata: prettier: "npm:^3.1.1" recast: "npm:^0.23.5" tiny-invariant: "npm:^1.3.1" - checksum: 10/5cfc52e72455178e503ff226dd3fa1a0917e7f14a86f58b914aa5971f5288e45b68246b0d550169a9af941d5bdb2293c160831de4c466894ddabb609092dbace + checksum: 10/8b1a4034f0548b3b15cd4295ba0c665b352548fe801986b73ede2c6706bbab75f35168120cb16d202d7af916fa448cce4259543fe3693356d4e0045af8b969d6 languageName: node linkType: hard "@storybook/components@file:../../../code/ui/components::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.6 - resolution: "@storybook/components@file:../../../code/ui/components#../../../code/ui/components::hash=636348&locator=portable-stories-nextjs%40workspace%3A." + version: 8.1.0-alpha.7 + resolution: "@storybook/components@file:../../../code/ui/components#../../../code/ui/components::hash=0a4eda&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@radix-ui/react-slot": "npm:^1.0.2" "@storybook/client-logger": "workspace:*" - "@storybook/csf": "npm:^0.1.2" + "@storybook/csf": "npm:0.1.5--canary.82.2c2dd28.0" "@storybook/global": "npm:^5.0.0" "@storybook/icons": "npm:^1.2.5" "@storybook/theming": "workspace:*" @@ -2737,13 +2921,13 @@ __metadata: peerDependencies: react: ^16.8.0 || ^17.0.0 || ^18.0.0 react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 - checksum: 10/02326f8b50631922d80cf64163abf4e723c5a1fd78c1ae1b276c95ff7992c0a826736badf1b7222038d83775b2937ef60de426aab7a6d5262a7b1152f5825abc + checksum: 10/81638bcf22893395a49cc7bfbd088f9e5e0c2bdf29aa2a57dfe48635654ab042234944f8f0b4a359f9092ec9b0b390f1fcceca71358b01442d717126d01de747 languageName: node linkType: hard "@storybook/core-common@file:../../../code/lib/core-common::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.6 - resolution: "@storybook/core-common@file:../../../code/lib/core-common#../../../code/lib/core-common::hash=be2541&locator=portable-stories-nextjs%40workspace%3A." + version: 8.1.0-alpha.7 + resolution: "@storybook/core-common@file:../../../code/lib/core-common#../../../code/lib/core-common::hash=dbe335&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/core-events": "workspace:*" "@storybook/csf-tools": "workspace:*" @@ -2773,22 +2957,22 @@ __metadata: tiny-invariant: "npm:^1.3.1" ts-dedent: "npm:^2.0.0" util: "npm:^0.12.4" - checksum: 10/b8502748d79920a961510e19eb759172ff2a04699b16c458a6d00dd8e73552a41e15873d57bddfc5f87904d11c8fb308061a507aa445fbf34306d92ffb329c2c + checksum: 10/dfbf13670cad14ad25ff129e96aa4b66256bb1d6bd5374a9f655106780daf2e41e9595816240e5c010b8102c333adb43a7502d0144bb58a2658873f4e0be2a38 languageName: node linkType: hard "@storybook/core-events@file:../../../code/lib/core-events::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.6 - resolution: "@storybook/core-events@file:../../../code/lib/core-events#../../../code/lib/core-events::hash=11b404&locator=portable-stories-nextjs%40workspace%3A." + version: 8.1.0-alpha.7 + resolution: "@storybook/core-events@file:../../../code/lib/core-events#../../../code/lib/core-events::hash=16f155&locator=portable-stories-nextjs%40workspace%3A." dependencies: ts-dedent: "npm:^2.0.0" - checksum: 10/5c276f3805d92b799c0c7c4c111fff2f59522900b855c634472bdb925b5b917a34d28c41ff4b4d5ed88bbb3b78671a6a36764b67ae99085d9758052d6fa51e09 + checksum: 10/ea59a9de87e8525efbf5a5d760bdec7f7e36744cab68215c8e3623b8e6b69741ab664f1b24568d96a46d0a3225fb00047b744c258eb9c7fc30a644bdd7080029 languageName: node linkType: hard "@storybook/core-server@file:../../../code/lib/core-server::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.6 - resolution: "@storybook/core-server@file:../../../code/lib/core-server#../../../code/lib/core-server::hash=e5bcbd&locator=portable-stories-nextjs%40workspace%3A." + version: 8.1.0-alpha.7 + resolution: "@storybook/core-server@file:../../../code/lib/core-server#../../../code/lib/core-server::hash=8a7d23&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@aw-web-design/x-default-browser": "npm:1.4.126" "@babel/core": "npm:^7.23.9" @@ -2797,7 +2981,7 @@ __metadata: "@storybook/channels": "workspace:*" "@storybook/core-common": "workspace:*" "@storybook/core-events": "workspace:*" - "@storybook/csf": "npm:^0.1.2" + "@storybook/csf": "npm:0.1.5--canary.82.2c2dd28.0" "@storybook/csf-tools": "workspace:*" "@storybook/docs-mdx": "npm:3.0.0" "@storybook/global": "npm:^5.0.0" @@ -2835,47 +3019,56 @@ __metadata: util-deprecate: "npm:^1.0.2" watchpack: "npm:^2.2.0" ws: "npm:^8.2.3" - checksum: 10/1f4f9495d5d3158613966a1b84f8fb19d8fcee6d05f06c885d27315cf8416fe36b18c898d577ff2a5ad72157d7f7e63171d9b49bf0191cdc45519f224e5c5ad7 + checksum: 10/1ea774a68abdc96f1aeebf7bcb25905cacd160bc8901fcb9505f3f1c38d475674d294b1a2cd24f8db6ed2b166d2a1c3284299b22396ef76935c431960a3a4dd3 languageName: node linkType: hard "@storybook/core-webpack@file:../../../code/lib/core-webpack::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.6 - resolution: "@storybook/core-webpack@file:../../../code/lib/core-webpack#../../../code/lib/core-webpack::hash=d17dda&locator=portable-stories-nextjs%40workspace%3A." + version: 8.1.0-alpha.7 + resolution: "@storybook/core-webpack@file:../../../code/lib/core-webpack#../../../code/lib/core-webpack::hash=c7e54c&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/core-common": "workspace:*" "@storybook/node-logger": "workspace:*" "@storybook/types": "workspace:*" "@types/node": "npm:^18.0.0" ts-dedent: "npm:^2.0.0" - checksum: 10/2e56db38374ec96f01c00c0fa4c8a9090c1db1d56c8c611a93d1a0c60769aa6a2c751ed29fa6c3a3a7adbf99d457287908e8e01ee1848ab6c59f6837934d81bf + checksum: 10/4bebf551445b0567fd2f47d5827839c6f8f0c8ffb4bb0968a4ffe20a3704a6cfe6928447b6bedbb3bcb95bd574f9a87184692d17e9f23eef16aebf2348ddd599 languageName: node linkType: hard "@storybook/csf-plugin@file:../../../code/lib/csf-plugin::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.6 - resolution: "@storybook/csf-plugin@file:../../../code/lib/csf-plugin#../../../code/lib/csf-plugin::hash=5ec6ec&locator=portable-stories-nextjs%40workspace%3A." + version: 8.1.0-alpha.7 + resolution: "@storybook/csf-plugin@file:../../../code/lib/csf-plugin#../../../code/lib/csf-plugin::hash=af3a0b&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/csf-tools": "workspace:*" unplugin: "npm:^1.3.1" - checksum: 10/592fd4a3cc9af877bce352c7ad61aaf442b2b65dfcb9f27cbd3d6f29d48649f1c3d001fb68d4abdea376b57c277f25ccd25f41e6d6d23780ae4e498daaf37014 + checksum: 10/675bedecfbd0d0deffa986ee402ef9aabc74ea3d91ee1c30d02d297ba3dc262bb148d59cfdcfe331ab920c1dde904df808c1f74f51a7feb46b90a7860ccd4ab9 languageName: node linkType: hard "@storybook/csf-tools@file:../../../code/lib/csf-tools::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.6 - resolution: "@storybook/csf-tools@file:../../../code/lib/csf-tools#../../../code/lib/csf-tools::hash=69584a&locator=portable-stories-nextjs%40workspace%3A." + version: 8.1.0-alpha.7 + resolution: "@storybook/csf-tools@file:../../../code/lib/csf-tools#../../../code/lib/csf-tools::hash=7e5a6b&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@babel/generator": "npm:^7.23.0" "@babel/parser": "npm:^7.23.0" "@babel/traverse": "npm:^7.23.2" "@babel/types": "npm:^7.23.0" - "@storybook/csf": "npm:^0.1.2" + "@storybook/csf": "npm:0.1.5--canary.82.2c2dd28.0" "@storybook/types": "workspace:*" fs-extra: "npm:^11.1.0" recast: "npm:^0.23.5" ts-dedent: "npm:^2.0.0" - checksum: 10/7fce79866ace04b9a2bc78a66a03e27e6e770b4279e1b40c08634bce01eb57be22f5f192f73c6a65cc959c8910f63a3d35e31a71fe3ac821aea095722e324710 + checksum: 10/304b91074bdf94d8f2d9187ff7f590b6efae17f7a66f397aa39de1d816c2b9b5bda3207da16893b5b26a6f5a2c96453671607cd940856a3de3065788582778ac + languageName: node + linkType: hard + +"@storybook/csf@npm:0.1.5--canary.82.2c2dd28.0": + version: 0.1.5--canary.82.2c2dd28.0 + resolution: "@storybook/csf@npm:0.1.5--canary.82.2c2dd28.0" + dependencies: + type-fest: "npm:^2.19.0" + checksum: 10/8d7bd16e848f518f6ee001d4360fba73ce30a95dad6c6bf52ad69ec4a7387e6919cc3f6c1cc09abf27c524ca1501ed669b2f82ed1882a4d19a6c5d9b7b8e6a7c languageName: node linkType: hard @@ -2888,15 +3081,6 @@ __metadata: languageName: node linkType: hard -"@storybook/csf@npm:^0.1.2": - version: 0.1.2 - resolution: "@storybook/csf@npm:0.1.2" - dependencies: - type-fest: "npm:^2.19.0" - checksum: 10/11168df65e7b6bd0e5d31e7e805c8ba80397fc190cb33424e043b72bbd85d8f826dba082503992d7f606b72484337ab9d091eca947550613e241fbef57780d4c - languageName: node - linkType: hard - "@storybook/docs-mdx@npm:3.0.0": version: 3.0.0 resolution: "@storybook/docs-mdx@npm:3.0.0" @@ -2905,8 +3089,8 @@ __metadata: linkType: hard "@storybook/docs-tools@file:../../../code/lib/docs-tools::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.6 - resolution: "@storybook/docs-tools@file:../../../code/lib/docs-tools#../../../code/lib/docs-tools::hash=55c8ec&locator=portable-stories-nextjs%40workspace%3A." + version: 8.1.0-alpha.7 + resolution: "@storybook/docs-tools@file:../../../code/lib/docs-tools#../../../code/lib/docs-tools::hash=025eed&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/core-common": "workspace:*" "@storybook/preview-api": "workspace:*" @@ -2915,7 +3099,7 @@ __metadata: assert: "npm:^2.1.0" doctrine: "npm:^3.0.0" lodash: "npm:^4.17.21" - checksum: 10/59ee342654240884ea89aa3f66d86fbab06759af23b3897635b1976c75c77dcb08b908b46528138294febc5347eb5564728e956cd66d0ee170b3438ec8269a49 + checksum: 10/55050db778123e7bb41ddc2ccab88fb7abef014e40b27186e7b914bb7dab765745a546f9af3c8a5f7b50928dedfe9bbc7c6f17e6c5c38b58177540af584c0267 languageName: node linkType: hard @@ -2937,8 +3121,8 @@ __metadata: linkType: hard "@storybook/instrumenter@file:../../../code/lib/instrumenter::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.6 - resolution: "@storybook/instrumenter@file:../../../code/lib/instrumenter#../../../code/lib/instrumenter::hash=ffe9d7&locator=portable-stories-nextjs%40workspace%3A." + version: 8.1.0-alpha.7 + resolution: "@storybook/instrumenter@file:../../../code/lib/instrumenter#../../../code/lib/instrumenter::hash=cdd3b4&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/channels": "workspace:*" "@storybook/client-logger": "workspace:*" @@ -2947,18 +3131,18 @@ __metadata: "@storybook/preview-api": "workspace:*" "@vitest/utils": "npm:^1.3.1" util: "npm:^0.12.4" - checksum: 10/84948fcfafe05e5934117e6c514a1788f9d146d28f749c11313e5f65c60f3f20be0e659e97f14a6b5ce405b01afa4941571f644a9cb88d8b3a956c2c79413723 + checksum: 10/040d6c9b45ba8a021deb572ae198e31d12a0bdce95846abaa6d603e7db6cfeb7c2e9f28d7fafdcc4b358a2c4e836436958fc92792388e6cc3adeffca978d9c46 languageName: node linkType: hard "@storybook/manager-api@file:../../../code/lib/manager-api::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.6 - resolution: "@storybook/manager-api@file:../../../code/lib/manager-api#../../../code/lib/manager-api::hash=4ab1f3&locator=portable-stories-nextjs%40workspace%3A." + version: 8.1.0-alpha.7 + resolution: "@storybook/manager-api@file:../../../code/lib/manager-api#../../../code/lib/manager-api::hash=bc7e8b&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/channels": "workspace:*" "@storybook/client-logger": "workspace:*" "@storybook/core-events": "workspace:*" - "@storybook/csf": "npm:^0.1.2" + "@storybook/csf": "npm:0.1.5--canary.82.2c2dd28.0" "@storybook/global": "npm:^5.0.0" "@storybook/icons": "npm:^1.2.5" "@storybook/router": "workspace:*" @@ -2970,20 +3154,20 @@ __metadata: store2: "npm:^2.14.2" telejson: "npm:^7.2.0" ts-dedent: "npm:^2.0.0" - checksum: 10/ef8fe488bd220f3b895d26895e5a55a9bc110ee799f062f06d3c32dfa5ccd834c04074d96d8d4dc8c41336e322b2d3a4e0f93dc518442b22a9b36ddbfc92f990 + checksum: 10/f65075271f76c1e8133d5e6f946516892f72212c0c6b563f8054851f598b0e9f2811e1fe75862833ba063f8bb1813067d51a9cb6ed149524dec75cd6d0b61df3 languageName: node linkType: hard "@storybook/manager@file:../../../code/ui/manager::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.6 - resolution: "@storybook/manager@file:../../../code/ui/manager#../../../code/ui/manager::hash=645d43&locator=portable-stories-nextjs%40workspace%3A." - checksum: 10/9708627cc2f3a886c53dfec9402088f6b18b40ba8f472289d08c6b25c0e2e1e71871d6a79f19e57586751b287b55506c72372d1a0fab2efa89847719bf7c50f7 + version: 8.1.0-alpha.7 + resolution: "@storybook/manager@file:../../../code/ui/manager#../../../code/ui/manager::hash=285a67&locator=portable-stories-nextjs%40workspace%3A." + checksum: 10/504a6998bfc2d2b8f8e9b1c4fa2f958abc7802eb0bb0f318fcdce4bc2e55960e2c201827c70ef50a969511e51435e17b4500ed10113776c3783719bee8bfaf3d languageName: node linkType: hard "@storybook/nextjs@file:../../../code/frameworks/nextjs::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.6 - resolution: "@storybook/nextjs@file:../../../code/frameworks/nextjs#../../../code/frameworks/nextjs::hash=fbb1b0&locator=portable-stories-nextjs%40workspace%3A." + version: 8.1.0-alpha.7 + resolution: "@storybook/nextjs@file:../../../code/frameworks/nextjs#../../../code/frameworks/nextjs::hash=246816&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@babel/core": "npm:^7.23.2" "@babel/plugin-syntax-bigint": "npm:^7.8.3" @@ -3024,7 +3208,7 @@ __metadata: resolve-url-loader: "npm:^5.0.0" sass-loader: "npm:^12.4.0" semver: "npm:^7.3.5" - sharp: "npm:^0.32.6" + sharp: "npm:^0.33.3" style-loader: "npm:^3.3.1" styled-jsx: "npm:5.1.1" ts-dedent: "npm:^2.0.0" @@ -3035,25 +3219,28 @@ __metadata: react: ^16.8.0 || ^17.0.0 || ^18.0.0 react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 webpack: ^5.0.0 + dependenciesMeta: + sharp: + optional: true peerDependenciesMeta: typescript: optional: true webpack: optional: true - checksum: 10/c7e8437a541d526982a78e734592a1e5ce09053dbda221b7d4717b657d4595a2ff5fd9af17d55e695a6fde6610c4c856ec15f8039372d18237daa1fb7ccc86a4 + checksum: 10/71732cc220e381872106dab3824883f4a77dcbb60901c939f58599bf92f156564a34fe646ce1159c307702be03cf532fbffaa1a515e271a6623f340d19000283 languageName: node linkType: hard "@storybook/node-logger@file:../../../code/lib/node-logger::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.6 - resolution: "@storybook/node-logger@file:../../../code/lib/node-logger#../../../code/lib/node-logger::hash=0d5379&locator=portable-stories-nextjs%40workspace%3A." - checksum: 10/ba3b49b55a325ec5d885898e5cd61370c19ad27a54315025c315bb08b6a09a64cfd3097748225be1f4b07aad42245a239ac9ba6e957c854ebb48718a43e5c215 + version: 8.1.0-alpha.7 + resolution: "@storybook/node-logger@file:../../../code/lib/node-logger#../../../code/lib/node-logger::hash=d94edd&locator=portable-stories-nextjs%40workspace%3A." + checksum: 10/1095793116385c3d2247349869659cd7147094c2a77efa4cd925a051a0d03742563d74dd7cbc578e1de9a06d0637247a06bcafa665c43cb2f482240f3bb178af languageName: node linkType: hard "@storybook/preset-react-webpack@file:../../../code/presets/react-webpack::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.6 - resolution: "@storybook/preset-react-webpack@file:../../../code/presets/react-webpack#../../../code/presets/react-webpack::hash=3c5b01&locator=portable-stories-nextjs%40workspace%3A." + version: 8.1.0-alpha.7 + resolution: "@storybook/preset-react-webpack@file:../../../code/presets/react-webpack#../../../code/presets/react-webpack::hash=3d1792&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/core-webpack": "workspace:*" "@storybook/docs-tools": "workspace:*" @@ -3076,18 +3263,18 @@ __metadata: peerDependenciesMeta: typescript: optional: true - checksum: 10/3baffd6ce4e642f852c370ccd4ae8098a5e730f4493ce43c8414f0b44e59c8bc8a99d9975cf5149b655f1808e54d274754044f45983b9f1be7c9a28f00931ac2 + checksum: 10/77a6a3b5ee2db73619642b72aa8976bf54cbc454c5aa781b6499bf55694b0f28fc4bed4f3e683d4e4964646ce793e5054a567d5d789ac5d5fd5d09794490b9a3 languageName: node linkType: hard "@storybook/preview-api@file:../../../code/lib/preview-api::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.6 - resolution: "@storybook/preview-api@file:../../../code/lib/preview-api#../../../code/lib/preview-api::hash=76c183&locator=portable-stories-nextjs%40workspace%3A." + version: 8.1.0-alpha.7 + resolution: "@storybook/preview-api@file:../../../code/lib/preview-api#../../../code/lib/preview-api::hash=c27159&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/channels": "workspace:*" "@storybook/client-logger": "workspace:*" "@storybook/core-events": "workspace:*" - "@storybook/csf": "npm:^0.1.2" + "@storybook/csf": "npm:0.1.5--canary.82.2c2dd28.0" "@storybook/global": "npm:^5.0.0" "@storybook/types": "workspace:*" "@types/qs": "npm:^6.9.5" @@ -3098,14 +3285,14 @@ __metadata: tiny-invariant: "npm:^1.3.1" ts-dedent: "npm:^2.0.0" util-deprecate: "npm:^1.0.2" - checksum: 10/93ed5df1d57acb2b5ef4284914e46d0b3c24182d9778ee7ef724a9f48e12e924dc200230453973810999e559a15e0b09604317dc3fb55188068f27ac7aaf07e3 + checksum: 10/96cf3839371262b03e47fe55e0a0c317e979fa731fdf1c9224ca22055fb79b1aed53fc260428846cffde4b83d85e5f138e4e5a8dd5c390cca2057df5637ea92c languageName: node linkType: hard "@storybook/preview@file:../../../code/lib/preview::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.6 - resolution: "@storybook/preview@file:../../../code/lib/preview#../../../code/lib/preview::hash=f82bd0&locator=portable-stories-nextjs%40workspace%3A." - checksum: 10/79efae3201ef9d5cbb8abc309969394e33da8ee853b13d478389bf8d913a851c8804bc8a3e4ff28d05b589e32172e898b3988cd34af9f25016db0d0c26a94688 + version: 8.1.0-alpha.7 + resolution: "@storybook/preview@file:../../../code/lib/preview#../../../code/lib/preview::hash=e2c59f&locator=portable-stories-nextjs%40workspace%3A." + checksum: 10/21e589270a0be81396f6219c7f8d4788d20ad791b8016fe9981550a457c91af805bec0447684b1d12cc8e9cd0d7ae73387a423281c413dd794b31dec18628363 languageName: node linkType: hard @@ -3128,18 +3315,18 @@ __metadata: linkType: hard "@storybook/react-dom-shim@file:../../../code/lib/react-dom-shim::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.6 - resolution: "@storybook/react-dom-shim@file:../../../code/lib/react-dom-shim#../../../code/lib/react-dom-shim::hash=062b74&locator=portable-stories-nextjs%40workspace%3A." + version: 8.1.0-alpha.7 + resolution: "@storybook/react-dom-shim@file:../../../code/lib/react-dom-shim#../../../code/lib/react-dom-shim::hash=3e505c&locator=portable-stories-nextjs%40workspace%3A." peerDependencies: react: ^16.8.0 || ^17.0.0 || ^18.0.0 react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 - checksum: 10/ba63271a1f2d663cd53354798c490d306787b8033586a1062175b89fe4409759cbc959aa34dad12ff8f9bf2e9c141a391784eda81f23cbc9d13495128c9e1611 + checksum: 10/983e0f5f9dc3449173eb42e8a98a65fbac1247cf8b2f102b3438eec53ff4fdce51c84b0eb7aa7a34f002600e84a17c632397290e9614a8bb8d363fa0cb68a01a languageName: node linkType: hard "@storybook/react@file:../../../code/renderers/react::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.6 - resolution: "@storybook/react@file:../../../code/renderers/react#../../../code/renderers/react::hash=4e9581&locator=portable-stories-nextjs%40workspace%3A." + version: 8.1.0-alpha.7 + resolution: "@storybook/react@file:../../../code/renderers/react#../../../code/renderers/react::hash=cd73fa&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/client-logger": "workspace:*" "@storybook/docs-tools": "workspace:*" @@ -3169,24 +3356,24 @@ __metadata: peerDependenciesMeta: typescript: optional: true - checksum: 10/79b77645790d408373d15fad673b0c768d36f66cfa615c50b32b9a3ead0eb94656eaa3b2521b12ec5f82d8c3c23500c0da9c4a75c6bcb314fa38ee813b636c6b + checksum: 10/834084c0092a8b179f7048c1111308b6a2381cf3ee119372ed2940833b02e13577b5bc334c3f14c3224bd2d8b786939a74fbaf4dea6e8423ff610b34047412b4 languageName: node linkType: hard "@storybook/router@file:../../../code/lib/router::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.6 - resolution: "@storybook/router@file:../../../code/lib/router#../../../code/lib/router::hash=2f121e&locator=portable-stories-nextjs%40workspace%3A." + version: 8.1.0-alpha.7 + resolution: "@storybook/router@file:../../../code/lib/router#../../../code/lib/router::hash=bd2ec4&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/client-logger": "workspace:*" memoizerific: "npm:^1.11.3" qs: "npm:^6.10.0" - checksum: 10/8fcccb54ade96e59e716e74c9985633d6ff4a9e025f80e83cb1c8c61443910cb3205d2b2753f7a455544b8d39be832c456db4ecff2e58753b0fd45a0f828b6b6 + checksum: 10/226f011fb5068ed708650f9e6ff2cbf8fdf84dd7eee43dfdeb36c828aca0551a78f53f6e6fadf0c477a74b8f9c70a66c6c6ef637e5bf2684c4a8e46e74ba58ae languageName: node linkType: hard "@storybook/telemetry@file:../../../code/lib/telemetry::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.6 - resolution: "@storybook/telemetry@file:../../../code/lib/telemetry#../../../code/lib/telemetry::hash=ef1a5d&locator=portable-stories-nextjs%40workspace%3A." + version: 8.1.0-alpha.7 + resolution: "@storybook/telemetry@file:../../../code/lib/telemetry#../../../code/lib/telemetry::hash=9296ee&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/client-logger": "workspace:*" "@storybook/core-common": "workspace:*" @@ -3196,13 +3383,13 @@ __metadata: fetch-retry: "npm:^5.0.2" fs-extra: "npm:^11.1.0" read-pkg-up: "npm:^7.0.1" - checksum: 10/b4d3d4aa974ea59a259584466abf9dc7ca07b926833e8e4cd53e43bd47a37ead871f2f4458cc2f8d3c9776e41b3daac9a1fe3363d210190b4d45585de86453f7 + checksum: 10/0c7be274ef3ee1108857d012827ef3c0ceec404f11c4e3a7c2cadd69245737d8e46678ea30c581d2b52dbf0980f9893d4521f96330b335b702d07224c837f068 languageName: node linkType: hard "@storybook/test@file:../../../code/lib/test::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.6 - resolution: "@storybook/test@file:../../../code/lib/test#../../../code/lib/test::hash=22f2be&locator=portable-stories-nextjs%40workspace%3A." + version: 8.1.0-alpha.7 + resolution: "@storybook/test@file:../../../code/lib/test#../../../code/lib/test::hash=a11c5e&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/client-logger": "workspace:*" "@storybook/core-events": "workspace:*" @@ -3215,13 +3402,13 @@ __metadata: "@vitest/spy": "npm:^1.3.1" chai: "npm:^4.4.1" util: "npm:^0.12.4" - checksum: 10/786f471e95d2413a8a7e405dafa0dfe429884853cb119d5faa7c390f893710a83e64a97f5f6bee0dacea6efcac4c6a7a258e1c8830e691f39c14e851a59ec781 + checksum: 10/88eec54537e529a1887fb20c63e9ba7d19a564c9eb58b5df0e6f9b9ba305e064e4de27b1f5bf413b7f255f5de0a2203433268b332b73aa21c54ea41a33ed73c4 languageName: node linkType: hard "@storybook/theming@file:../../../code/lib/theming::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.6 - resolution: "@storybook/theming@file:../../../code/lib/theming#../../../code/lib/theming::hash=f968b9&locator=portable-stories-nextjs%40workspace%3A." + version: 8.1.0-alpha.7 + resolution: "@storybook/theming@file:../../../code/lib/theming#../../../code/lib/theming::hash=444382&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@emotion/use-insertion-effect-with-fallbacks": "npm:^1.0.1" "@storybook/client-logger": "workspace:*" @@ -3235,18 +3422,18 @@ __metadata: optional: true react-dom: optional: true - checksum: 10/e603c954ca9f8a99cb82deac40c66f1fd71d170900f6c8a4e0f3157921b6b1da6c0d644519960312eefa1def67a99c50a4e4cd6c6e92fd121d99a9fcb822f6b9 + checksum: 10/fce2b08b28299dab7ebb21b2e66153bfa1fa592f55bdf40893f34618fa95e89839b3acd752a62065278148886bc144c272b330285f555ebfebeaceb996456f56 languageName: node linkType: hard "@storybook/types@file:../../../code/lib/types::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.6 - resolution: "@storybook/types@file:../../../code/lib/types#../../../code/lib/types::hash=efc120&locator=portable-stories-nextjs%40workspace%3A." + version: 8.1.0-alpha.7 + resolution: "@storybook/types@file:../../../code/lib/types#../../../code/lib/types::hash=ac9abc&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/channels": "workspace:*" "@types/express": "npm:^4.7.0" file-system-cache: "npm:2.3.0" - checksum: 10/1d6a4dfbab18342f2286c6d8234c84e9e2dd3638e670863c5679d444d70a629820391a5edb3df8c7a67a049b0a62ca615942ca5a5eb3525fb3dcdd92cf79d5f3 + checksum: 10/2f04be63d68783e750ec7fcbed3097427beca0e28b9fd4eb643d299f1fe16e8d349181cabba627bbd37319fb32e745de229db2592667478c8dc7d7468372071b languageName: node linkType: hard @@ -4603,13 +4790,6 @@ __metadata: languageName: node linkType: hard -"b4a@npm:^1.6.4": - version: 1.6.6 - resolution: "b4a@npm:1.6.6" - checksum: 10/6154a36bd78b53ecd2843a829352532a1bf9fc8081dab339ba06ca3c9ffcf25d340c3b18fe4ba0fc17a546a54c1ed814cea92cd6b895f6bd2837ca4ee0fc9f52 - languageName: node - linkType: hard - "babel-core@npm:^7.0.0-bridge.0": version: 7.0.0-bridge.0 resolution: "babel-core@npm:7.0.0-bridge.0" @@ -4751,41 +4931,6 @@ __metadata: languageName: node linkType: hard -"bare-events@npm:^2.0.0, bare-events@npm:^2.2.0": - version: 2.2.0 - resolution: "bare-events@npm:2.2.0" - checksum: 10/01f36735615a11529b30e6de2907b6ed032f773b364d19bd13cdf491c8010713af178c9137ad4be68c79363977b476acbd1b203b82b49fca6cc42aaf01d600d0 - languageName: node - linkType: hard - -"bare-fs@npm:^2.1.1": - version: 2.2.0 - resolution: "bare-fs@npm:2.2.0" - dependencies: - bare-events: "npm:^2.0.0" - bare-os: "npm:^2.0.0" - bare-path: "npm:^2.0.0" - streamx: "npm:^2.13.0" - checksum: 10/a12acbaec915cf723dcdf71866df937dd0d27ff47f40b1c76f8c5fb87442ee07af6d74ec376eb87aa72d143df3c95c7dec3e9e6ffdf1c90d77b1c9064b6f96d9 - languageName: node - linkType: hard - -"bare-os@npm:^2.0.0, bare-os@npm:^2.1.0": - version: 2.2.0 - resolution: "bare-os@npm:2.2.0" - checksum: 10/3b32a72a61bd4e4245f27963e34869ff39732c641953dbe5f0f8bff5e3e8826c24aa51b45766762b9a7cd18473c1d83f0ec2b8ff751d6a2169e8e8cdad0ad4de - languageName: node - linkType: hard - -"bare-path@npm:^2.0.0, bare-path@npm:^2.1.0": - version: 2.1.0 - resolution: "bare-path@npm:2.1.0" - dependencies: - bare-os: "npm:^2.1.0" - checksum: 10/811b9414448e8523a1323bc49d773673be0c72b3e008c99041b1bea516064227a530f27e8a35bd91cabc0d1026c5a0898f09ab5347cb3afd5a13fa519e6e973e - languageName: node - linkType: hard - "base64-js@npm:^1.3.1": version: 1.5.1 resolution: "base64-js@npm:1.5.1" @@ -5875,15 +6020,6 @@ __metadata: languageName: node linkType: hard -"decompress-response@npm:^6.0.0": - version: 6.0.0 - resolution: "decompress-response@npm:6.0.0" - dependencies: - mimic-response: "npm:^3.1.0" - checksum: 10/d377cf47e02d805e283866c3f50d3d21578b779731e8c5072d6ce8c13cc31493db1c2f6784da9d1d5250822120cefa44f1deab112d5981015f2e17444b763812 - languageName: node - linkType: hard - "dedent@npm:^0.7.0": version: 0.7.0 resolution: "dedent@npm:0.7.0" @@ -5938,13 +6074,6 @@ __metadata: languageName: node linkType: hard -"deep-extend@npm:^0.6.0": - version: 0.6.0 - resolution: "deep-extend@npm:0.6.0" - checksum: 10/7be7e5a8d468d6b10e6a67c3de828f55001b6eb515d014f7aeb9066ce36bd5717161eb47d6a0f7bed8a9083935b465bc163ee2581c8b128d29bf61092fdf57a7 - languageName: node - linkType: hard - "deep-is@npm:^0.1.3": version: 0.1.4 resolution: "deep-is@npm:0.1.4" @@ -6075,10 +6204,10 @@ __metadata: languageName: node linkType: hard -"detect-libc@npm:^2.0.0, detect-libc@npm:^2.0.2": - version: 2.0.2 - resolution: "detect-libc@npm:2.0.2" - checksum: 10/6118f30c0c425b1e56b9d2609f29bec50d35a6af0b762b6ad127271478f3bbfda7319ce869230cf1a351f2b219f39332cde290858553336d652c77b970f15de8 +"detect-libc@npm:^2.0.3": + version: 2.0.3 + resolution: "detect-libc@npm:2.0.3" + checksum: 10/b4ea018d623e077bd395f168a9e81db77370dde36a5b01d067f2ad7989924a81d31cb547ff764acb2aa25d50bb7fdde0b0a93bec02212b0cb430621623246d39 languageName: node linkType: hard @@ -6858,13 +6987,6 @@ __metadata: languageName: node linkType: hard -"expand-template@npm:^2.0.3": - version: 2.0.3 - resolution: "expand-template@npm:2.0.3" - checksum: 10/588c19847216421ed92befb521767b7018dc88f88b0576df98cb242f20961425e96a92cbece525ef28cc5becceae5d544ae0f5b9b5e2aa05acb13716ca5b3099 - languageName: node - linkType: hard - "expect@npm:^29.7.0": version: 29.7.0 resolution: "expect@npm:29.7.0" @@ -6931,13 +7053,6 @@ __metadata: languageName: node linkType: hard -"fast-fifo@npm:^1.1.0, fast-fifo@npm:^1.2.0": - version: 1.3.2 - resolution: "fast-fifo@npm:1.3.2" - checksum: 10/6bfcba3e4df5af7be3332703b69a7898a8ed7020837ec4395bb341bd96cc3a6d86c3f6071dd98da289618cf2234c70d84b2a6f09a33dd6f988b1ff60d8e54275 - languageName: node - linkType: hard - "fast-glob@npm:^3.2.9, fast-glob@npm:^3.3.2": version: 3.3.2 resolution: "fast-glob@npm:3.3.2" @@ -7404,13 +7519,6 @@ __metadata: languageName: node linkType: hard -"github-from-package@npm:0.0.0": - version: 0.0.0 - resolution: "github-from-package@npm:0.0.0" - checksum: 10/2a091ba07fbce22205642543b4ea8aaf068397e1433c00ae0f9de36a3607baf5bcc14da97fbb798cfca6393b3c402031fca06d8b491a44206d6efef391c58537 - languageName: node - linkType: hard - "github-slugger@npm:^2.0.0": version: 2.0.0 resolution: "github-slugger@npm:2.0.0" @@ -7977,13 +8085,6 @@ __metadata: languageName: node linkType: hard -"ini@npm:~1.3.0": - version: 1.3.8 - resolution: "ini@npm:1.3.8" - checksum: 10/314ae176e8d4deb3def56106da8002b462221c174ddb7ce0c49ee72c8cd1f9044f7b10cc555a7d8850982c3b9ca96fc212122749f5234bc2b6fb05fb942ed566 - languageName: node - linkType: hard - "internal-slot@npm:^1.0.4": version: 1.0.7 resolution: "internal-slot@npm:1.0.7" @@ -9579,13 +9680,6 @@ __metadata: languageName: node linkType: hard -"mimic-response@npm:^3.1.0": - version: 3.1.0 - resolution: "mimic-response@npm:3.1.0" - checksum: 10/7e719047612411fe071332a7498cf0448bbe43c485c0d780046c76633a771b223ff49bd00267be122cedebb897037fdb527df72335d0d0f74724604ca70b37ad - languageName: node - linkType: hard - "min-indent@npm:^1.0.0, min-indent@npm:^1.0.1": version: 1.0.1 resolution: "min-indent@npm:1.0.1" @@ -9634,7 +9728,7 @@ __metadata: languageName: node linkType: hard -"minimist@npm:^1.2.0, minimist@npm:^1.2.3, minimist@npm:^1.2.5, minimist@npm:^1.2.6": +"minimist@npm:^1.2.5, minimist@npm:^1.2.6": version: 1.2.8 resolution: "minimist@npm:1.2.8" checksum: 10/908491b6cc15a6c440ba5b22780a0ba89b9810e1aea684e253e43c4e3b8d56ec1dcdd7ea96dde119c29df59c936cde16062159eae4225c691e19c70b432b6e6f @@ -9725,7 +9819,7 @@ __metadata: languageName: node linkType: hard -"mkdirp-classic@npm:^0.5.2, mkdirp-classic@npm:^0.5.3": +"mkdirp-classic@npm:^0.5.2": version: 0.5.3 resolution: "mkdirp-classic@npm:0.5.3" checksum: 10/3f4e088208270bbcc148d53b73e9a5bd9eef05ad2cbf3b3d0ff8795278d50dd1d11a8ef1875ff5aea3fa888931f95bfcb2ad5b7c1061cfefd6284d199e6776ac @@ -9771,13 +9865,6 @@ __metadata: languageName: node linkType: hard -"napi-build-utils@npm:^1.0.1": - version: 1.0.2 - resolution: "napi-build-utils@npm:1.0.2" - checksum: 10/276feb8e30189fe18718e85b6f82e4f952822baa2e7696f771cc42571a235b789dc5907a14d9ffb6838c3e4ff4c25717c2575e5ce1cf6e02e496e204c11e57f6 - languageName: node - linkType: hard - "natural-compare@npm:^1.4.0": version: 1.4.0 resolution: "natural-compare@npm:1.4.0" @@ -9864,15 +9951,6 @@ __metadata: languageName: node linkType: hard -"node-abi@npm:^3.3.0": - version: 3.55.0 - resolution: "node-abi@npm:3.55.0" - dependencies: - semver: "npm:^7.3.5" - checksum: 10/3dc8699c5eeebd3ed229c246b409dcf38de6a7cb1d0d76aa0345cd364b56bce517294a7026286fcd7a6a54a10429523bda49b6b06d6aab309de06fac6125f614 - languageName: node - linkType: hard - "node-abort-controller@npm:^3.0.1": version: 3.1.1 resolution: "node-abort-controller@npm:3.1.1" @@ -9880,15 +9958,6 @@ __metadata: languageName: node linkType: hard -"node-addon-api@npm:^6.1.0": - version: 6.1.0 - resolution: "node-addon-api@npm:6.1.0" - dependencies: - node-gyp: "npm:latest" - checksum: 10/8eea1d4d965930a177a0508695beb0d89b4c1d80bf330646a035357a1e8fc31e0d09686e2374996e96e757b947a7ece319f98ede3146683f162597c0bcb4df90 - languageName: node - linkType: hard - "node-dir@npm:^0.1.17": version: 0.1.17 resolution: "node-dir@npm:0.1.17" @@ -10735,28 +10804,6 @@ __metadata: languageName: node linkType: hard -"prebuild-install@npm:^7.1.1": - version: 7.1.1 - resolution: "prebuild-install@npm:7.1.1" - dependencies: - detect-libc: "npm:^2.0.0" - expand-template: "npm:^2.0.3" - github-from-package: "npm:0.0.0" - minimist: "npm:^1.2.3" - mkdirp-classic: "npm:^0.5.3" - napi-build-utils: "npm:^1.0.1" - node-abi: "npm:^3.3.0" - pump: "npm:^3.0.0" - rc: "npm:^1.2.7" - simple-get: "npm:^4.0.0" - tar-fs: "npm:^2.0.0" - tunnel-agent: "npm:^0.6.0" - bin: - prebuild-install: bin.js - checksum: 10/6c70a2f82fbda8903497c560a761b000d861a3e772322c8bed012be0f0a084b5aaca4438a3fad1bd3a24210765f4fae06ddd89ea04dc4c034dde693cc0d9d5f4 - languageName: node - linkType: hard - "prelude-ls@npm:^1.2.1": version: 1.2.1 resolution: "prelude-ls@npm:1.2.1" @@ -10986,13 +11033,6 @@ __metadata: languageName: node linkType: hard -"queue-tick@npm:^1.0.1": - version: 1.0.1 - resolution: "queue-tick@npm:1.0.1" - checksum: 10/f447926c513b64a857906f017a3b350f7d11277e3c8d2a21a42b7998fa1a613d7a829091e12d142bb668905c8f68d8103416c7197856efb0c72fa835b8e254b5 - languageName: node - linkType: hard - "queue@npm:6.0.2": version: 6.0.2 resolution: "queue@npm:6.0.2" @@ -11047,20 +11087,6 @@ __metadata: languageName: node linkType: hard -"rc@npm:^1.2.7": - version: 1.2.8 - resolution: "rc@npm:1.2.8" - dependencies: - deep-extend: "npm:^0.6.0" - ini: "npm:~1.3.0" - minimist: "npm:^1.2.0" - strip-json-comments: "npm:~2.0.1" - bin: - rc: ./cli.js - checksum: 10/5c4d72ae7eec44357171585938c85ce066da8ca79146b5635baf3d55d74584c92575fa4e2c9eac03efbed3b46a0b2e7c30634c012b4b4fa40d654353d3c163eb - languageName: node - linkType: hard - "react-colorful@npm:^5.1.2": version: 5.6.1 resolution: "react-colorful@npm:5.6.1" @@ -11665,7 +11691,7 @@ __metadata: languageName: node linkType: hard -"semver@npm:^7.3.5, semver@npm:^7.3.7, semver@npm:^7.5.3, semver@npm:^7.5.4": +"semver@npm:^7.3.5, semver@npm:^7.3.7, semver@npm:^7.5.3, semver@npm:^7.5.4, semver@npm:^7.6.0": version: 7.6.0 resolution: "semver@npm:7.6.0" dependencies: @@ -11779,20 +11805,72 @@ __metadata: languageName: node linkType: hard -"sharp@npm:^0.32.6": - version: 0.32.6 - resolution: "sharp@npm:0.32.6" - dependencies: +"sharp@npm:^0.33.3": + version: 0.33.3 + resolution: "sharp@npm:0.33.3" + dependencies: + "@img/sharp-darwin-arm64": "npm:0.33.3" + "@img/sharp-darwin-x64": "npm:0.33.3" + "@img/sharp-libvips-darwin-arm64": "npm:1.0.2" + "@img/sharp-libvips-darwin-x64": "npm:1.0.2" + "@img/sharp-libvips-linux-arm": "npm:1.0.2" + "@img/sharp-libvips-linux-arm64": "npm:1.0.2" + "@img/sharp-libvips-linux-s390x": "npm:1.0.2" + "@img/sharp-libvips-linux-x64": "npm:1.0.2" + "@img/sharp-libvips-linuxmusl-arm64": "npm:1.0.2" + "@img/sharp-libvips-linuxmusl-x64": "npm:1.0.2" + "@img/sharp-linux-arm": "npm:0.33.3" + "@img/sharp-linux-arm64": "npm:0.33.3" + "@img/sharp-linux-s390x": "npm:0.33.3" + "@img/sharp-linux-x64": "npm:0.33.3" + "@img/sharp-linuxmusl-arm64": "npm:0.33.3" + "@img/sharp-linuxmusl-x64": "npm:0.33.3" + "@img/sharp-wasm32": "npm:0.33.3" + "@img/sharp-win32-ia32": "npm:0.33.3" + "@img/sharp-win32-x64": "npm:0.33.3" color: "npm:^4.2.3" - detect-libc: "npm:^2.0.2" - node-addon-api: "npm:^6.1.0" - node-gyp: "npm:latest" - prebuild-install: "npm:^7.1.1" - semver: "npm:^7.5.4" - simple-get: "npm:^4.0.1" - tar-fs: "npm:^3.0.4" - tunnel-agent: "npm:^0.6.0" - checksum: 10/f0e4a86881e590f86b05ea463229f62cd29afc2dca08b3f597889f872f118c2c456f382bf2c3e90e934b7a1d30f109cf5ed584cf5a23e79d6b6403a8dc0ebe32 + detect-libc: "npm:^2.0.3" + semver: "npm:^7.6.0" + dependenciesMeta: + "@img/sharp-darwin-arm64": + optional: true + "@img/sharp-darwin-x64": + optional: true + "@img/sharp-libvips-darwin-arm64": + optional: true + "@img/sharp-libvips-darwin-x64": + optional: true + "@img/sharp-libvips-linux-arm": + optional: true + "@img/sharp-libvips-linux-arm64": + optional: true + "@img/sharp-libvips-linux-s390x": + optional: true + "@img/sharp-libvips-linux-x64": + optional: true + "@img/sharp-libvips-linuxmusl-arm64": + optional: true + "@img/sharp-libvips-linuxmusl-x64": + optional: true + "@img/sharp-linux-arm": + optional: true + "@img/sharp-linux-arm64": + optional: true + "@img/sharp-linux-s390x": + optional: true + "@img/sharp-linux-x64": + optional: true + "@img/sharp-linuxmusl-arm64": + optional: true + "@img/sharp-linuxmusl-x64": + optional: true + "@img/sharp-wasm32": + optional: true + "@img/sharp-win32-ia32": + optional: true + "@img/sharp-win32-x64": + optional: true + checksum: 10/02bed36749a73c6d56219b86b880458565917d0815746b046aac69dba4afa980d34f3a20631d3146c07bdecd717eb80bf9303df14bcf323575471299ac756da6 languageName: node linkType: hard @@ -11838,24 +11916,6 @@ __metadata: languageName: node linkType: hard -"simple-concat@npm:^1.0.0": - version: 1.0.1 - resolution: "simple-concat@npm:1.0.1" - checksum: 10/4d211042cc3d73a718c21ac6c4e7d7a0363e184be6a5ad25c8a1502e49df6d0a0253979e3d50dbdd3f60ef6c6c58d756b5d66ac1e05cda9cacd2e9fc59e3876a - languageName: node - linkType: hard - -"simple-get@npm:^4.0.0, simple-get@npm:^4.0.1": - version: 4.0.1 - resolution: "simple-get@npm:4.0.1" - dependencies: - decompress-response: "npm:^6.0.0" - once: "npm:^1.3.1" - simple-concat: "npm:^1.0.0" - checksum: 10/93f1b32319782f78f2f2234e9ce34891b7ab6b990d19d8afefaa44423f5235ce2676aae42d6743fecac6c8dfff4b808d4c24fe5265be813d04769917a9a44f36 - languageName: node - linkType: hard - "simple-swizzle@npm:^0.2.2": version: 0.2.2 resolution: "simple-swizzle@npm:0.2.2" @@ -12066,14 +12126,14 @@ __metadata: linkType: hard "storybook@file:../../../code/lib/cli-storybook::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.6 - resolution: "storybook@file:../../../code/lib/cli-storybook#../../../code/lib/cli-storybook::hash=f0c1b6&locator=portable-stories-nextjs%40workspace%3A." + version: 8.1.0-alpha.7 + resolution: "storybook@file:../../../code/lib/cli-storybook#../../../code/lib/cli-storybook::hash=f4ae08&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/cli": "workspace:*" bin: sb: ./index.js storybook: ./index.js - checksum: 10/941843aa4b11da491079c9ee193117cf88153d3836dc58771c7a4f743779e88ed941157d55101925d7fd372fdb9d2160e4b156f4e30227e3785525311f75d93d + checksum: 10/4975a0a1000ff520cc202c55d6ba047b5fb2512a91d86d3c92fb90a894f3c7e2f1f482069ff3e88f076cd0984d2839c8a9800aa372e126b8827ff3448231281c languageName: node linkType: hard @@ -12113,20 +12173,6 @@ __metadata: languageName: node linkType: hard -"streamx@npm:^2.13.0, streamx@npm:^2.15.0": - version: 2.16.1 - resolution: "streamx@npm:2.16.1" - dependencies: - bare-events: "npm:^2.2.0" - fast-fifo: "npm:^1.1.0" - queue-tick: "npm:^1.0.1" - dependenciesMeta: - bare-events: - optional: true - checksum: 10/f6d0899adf089385d9c58a630fc705dc6c3931b18181c32860e5013955a339a3b763a4df62168f37c7fc56b1f7bb2a38db989fa9df487995278cb5d46f248da6 - languageName: node - linkType: hard - "string-length@npm:^4.0.1": version: 4.0.2 resolution: "string-length@npm:4.0.2" @@ -12248,13 +12294,6 @@ __metadata: languageName: node linkType: hard -"strip-json-comments@npm:~2.0.1": - version: 2.0.1 - resolution: "strip-json-comments@npm:2.0.1" - checksum: 10/1074ccb63270d32ca28edfb0a281c96b94dc679077828135141f27d52a5a398ef5e78bcf22809d23cadc2b81dfbe345eb5fd8699b385c8b1128907dec4a7d1e1 - languageName: node - linkType: hard - "style-loader@npm:^3.3.1": version: 3.3.4 resolution: "style-loader@npm:3.3.4" @@ -12328,7 +12367,7 @@ __metadata: languageName: node linkType: hard -"tar-fs@npm:^2.0.0, tar-fs@npm:^2.1.1": +"tar-fs@npm:^2.1.1": version: 2.1.1 resolution: "tar-fs@npm:2.1.1" dependencies: @@ -12340,23 +12379,6 @@ __metadata: languageName: node linkType: hard -"tar-fs@npm:^3.0.4": - version: 3.0.5 - resolution: "tar-fs@npm:3.0.5" - dependencies: - bare-fs: "npm:^2.1.1" - bare-path: "npm:^2.1.0" - pump: "npm:^3.0.0" - tar-stream: "npm:^3.1.5" - dependenciesMeta: - bare-fs: - optional: true - bare-path: - optional: true - checksum: 10/a15c18e80b872918c7dff22ff29db367c8014d1b3d34b0ec57cfe11645836dc01487c078a975a9d5e358f078f59e7b8adc5c671cc0848ba27b9b429669722bd8 - languageName: node - linkType: hard - "tar-stream@npm:^2.1.4": version: 2.2.0 resolution: "tar-stream@npm:2.2.0" @@ -12370,17 +12392,6 @@ __metadata: languageName: node linkType: hard -"tar-stream@npm:^3.1.5": - version: 3.1.7 - resolution: "tar-stream@npm:3.1.7" - dependencies: - b4a: "npm:^1.6.4" - fast-fifo: "npm:^1.2.0" - streamx: "npm:^2.15.0" - checksum: 10/b21a82705a72792544697c410451a4846af1f744176feb0ff11a7c3dd0896961552e3def5e1c9a6bbee4f0ae298b8252a1f4c9381e9f991553b9e4847976f05c - languageName: node - linkType: hard - "tar@npm:^6.1.11, tar@npm:^6.1.2, tar@npm:^6.2.0": version: 6.2.0 resolution: "tar@npm:6.2.0" @@ -12672,15 +12683,6 @@ __metadata: languageName: node linkType: hard -"tunnel-agent@npm:^0.6.0": - version: 0.6.0 - resolution: "tunnel-agent@npm:0.6.0" - dependencies: - safe-buffer: "npm:^5.0.1" - checksum: 10/7f0d9ed5c22404072b2ae8edc45c071772affd2ed14a74f03b4e71b4dd1a14c3714d85aed64abcaaee5fec2efc79002ba81155c708f4df65821b444abb0cfade - languageName: node - linkType: hard - "type-check@npm:^0.4.0, type-check@npm:~0.4.0": version: 0.4.0 resolution: "type-check@npm:0.4.0" @@ -13099,9 +13101,9 @@ __metadata: languageName: node linkType: hard -"webpack-dev-middleware@npm:^6.1.1": - version: 6.1.1 - resolution: "webpack-dev-middleware@npm:6.1.1" +"webpack-dev-middleware@npm:^6.1.2": + version: 6.1.3 + resolution: "webpack-dev-middleware@npm:6.1.3" dependencies: colorette: "npm:^2.0.10" memfs: "npm:^3.4.12" @@ -13113,7 +13115,7 @@ __metadata: peerDependenciesMeta: webpack: optional: true - checksum: 10/b0637584f18b02174fd7fc2e6278efb8e2fb5308abe4ffe73658e59ff53a62c05686f161b06bd5c41d42611aa395b8c8f087d7ff8cf2304232c097a694a5b94e + checksum: 10/ee699430c33c4dfa2a016becc85e32a9b04aa0b6edbce0bb173c4dfd29c80c77d192d14fd2f2ec500dbdede4e0f1c5557993aa20a04a44190750a1e8e13f6d67 languageName: node linkType: hard From 30de294cae6bee0874b416fe18d9988ef5cc70cf Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Tue, 16 Apr 2024 11:42:57 +0200 Subject: [PATCH 63/82] Try another mock naming convention --- .../nextjs/src/export-mocks/cache/index.ts | 4 +- .../src/export-mocks/headers/cookies.ts | 112 ++---------------- .../src/export-mocks/headers/headers.ts | 98 ++------------- .../src/export-mocks/navigation/index.ts | 59 ++++----- .../nextjs/src/export-mocks/router/index.ts | 30 +++-- 5 files changed, 64 insertions(+), 239 deletions(-) diff --git a/code/frameworks/nextjs/src/export-mocks/cache/index.ts b/code/frameworks/nextjs/src/export-mocks/cache/index.ts index 1692979f0159..b9f2fa8dd431 100644 --- a/code/frameworks/nextjs/src/export-mocks/cache/index.ts +++ b/code/frameworks/nextjs/src/export-mocks/cache/index.ts @@ -3,8 +3,8 @@ import { unstable_cache } from 'next/dist/server/web/spec-extension/unstable-cac import { unstable_noStore } from 'next/dist/server/web/spec-extension/unstable-no-store'; // mock utilities/overrides (as of Next v14.2.0) -const revalidatePath = fn().mockName('revalidatePath'); -const revalidateTag = fn().mockName('revalidateTag'); +const revalidatePath = fn().mockName('next/cache::revalidatePath'); +const revalidateTag = fn().mockName('next/cache::revalidateTag'); const cacheExports = { unstable_cache, diff --git a/code/frameworks/nextjs/src/export-mocks/headers/cookies.ts b/code/frameworks/nextjs/src/export-mocks/headers/cookies.ts index 75022baaea26..c3272dc0e335 100644 --- a/code/frameworks/nextjs/src/export-mocks/headers/cookies.ts +++ b/code/frameworks/nextjs/src/export-mocks/headers/cookies.ts @@ -1,116 +1,22 @@ -/* eslint-disable no-underscore-dangle */ import { fn } from '@storybook/test'; -import type { RequestCookies } from 'next/dist/compiled/@edge-runtime/cookies'; -import { - parseCookie, - stringifyCookie, - type RequestCookie, -} from 'next/dist/compiled/@edge-runtime/cookies'; +import { RequestCookies } from 'next/dist/compiled/@edge-runtime/cookies'; // 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 // 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, type HeadersStore } from '@storybook/nextjs/headers.mock'; +import { headers } from '@storybook/nextjs/headers.mock'; -const stringifyCookies = (map: Map) => { - return Array.from(map) - .map(([_, v]) => stringifyCookie(v).replace(/; /, '')) - .join('; '); -}; - -// Mostly copied from https://github.com/vercel/edge-runtime/blob/c25e2ded39104e2a3be82efc08baf8dc8fb436b3/packages/cookies/src/request-cookies.ts#L7 -class RequestCookiesMock implements RequestCookies { - /** @internal */ - private readonly _headers: HeadersStore; - - _parsed: Map = new Map(); - - constructor(requestHeaders: HeadersStore) { - this._headers = requestHeaders; - const header = requestHeaders?.get('cookie'); - if (header) { - const parsed = parseCookie(header); - for (const [name, value] of parsed) { - this._parsed.set(name, { name, value }); - } - } - } - - [Symbol.iterator]() { - return this._parsed[Symbol.iterator](); - } - - get size(): number { - return this._parsed.size; - } +class RequestCookiesMock extends RequestCookies { + get = fn(super.get).mockName('next/headers::get'); - get = fn((...args: [name: string] | [RequestCookie]) => { - const name = typeof args[0] === 'string' ? args[0] : args[0].name; - return this._parsed.get(name); - }).mockName('cookies().get'); + getAll = fn(super.getAll).mockName('next/headers::cookies().getAll'); - getAll = fn((...args: [name: string] | [RequestCookie] | []) => { - const all = Array.from(this._parsed); - if (!args.length) { - return all.map(([_, value]) => value); - } + has = fn(super.has).mockName('next/headers::cookies().has'); - const name = typeof args[0] === 'string' ? args[0] : args[0]?.name; - return all.filter(([n]) => n === name).map(([_, value]) => value); - }).mockName('cookies().getAll'); + set = fn(super.set).mockName('next/headers::cookies().set'); - has = fn((name: string) => { - return this._parsed.has(name); - }).mockName('cookies().has'); - - set = fn((...args: [key: string, value: string] | [options: RequestCookie]): this => { - const [name, value] = args.length === 1 ? [args[0].name, args[0].value] : args; - - const map = this._parsed; - map.set(name, { name, value }); - - this._headers.set('cookie', stringifyCookies(map)); - return this; - }).mockName('cookies().set'); - - /** - * Delete the cookies matching the passed name or names in the request. - */ - delete = fn( - ( - /** Name or names of the cookies to be deleted */ - names: string | string[] - ): boolean | boolean[] => { - const map = this._parsed; - const result = !Array.isArray(names) - ? map.delete(names) - : names.map((name) => map.delete(name)); - this._headers.set('cookie', stringifyCookies(map)); - return result; - } - ).mockName('cookies().delete'); - - /** - * Delete all the cookies in the cookies in the request. - */ - clear = fn((): this => { - this.delete(Array.from(this._parsed.keys())); - return this; - }).mockName('cookies().clear'); - - /** - * Format the cookies in the request as a string for logging - */ - [Symbol.for('edge-runtime.inspect.custom')]() { - return `RequestCookies ${JSON.stringify(Object.fromEntries(this._parsed))}`; - } - - toString() { - return [...this._parsed.values()] - .map((v) => `${v.name}=${encodeURIComponent(v.value)}`) - .join('; '); - } + delete = fn(super.delete).mockName('next/headers::cookies().delete'); } let requestCookiesMock: RequestCookiesMock; @@ -120,7 +26,7 @@ export const cookies = fn(() => { requestCookiesMock = new RequestCookiesMock(headers()); } return requestCookiesMock; -}); +}).mockName('next/headers::cookies()'); const originalRestore = cookies.mockRestore.bind(null); diff --git a/code/frameworks/nextjs/src/export-mocks/headers/headers.ts b/code/frameworks/nextjs/src/export-mocks/headers/headers.ts index a7511064fa1f..02703265e583 100644 --- a/code/frameworks/nextjs/src/export-mocks/headers/headers.ts +++ b/code/frameworks/nextjs/src/export-mocks/headers/headers.ts @@ -1,101 +1,29 @@ import { fn } from '@storybook/test'; -import type { IncomingHttpHeaders } from 'http'; -import type { HeadersAdapter } from 'next/dist/server/web/spec-extension/adapters/headers'; -// Mostly copied from https://github.com/vercel/next.js/blob/763b9a660433ec5278a10e59d7ae89d4010ba212/packages/next/src/server/web/spec-extension/adapters/headers.ts#L20 -// @ts-expect-error unfortunately the headers property is private (and not protected) in HeadersAdapter -// and we can't access it so we need to redefine it, but that clashes with the type, hence the ts-expect-error comment. -class HeadersAdapterMock extends Headers implements HeadersAdapter { - private headers: IncomingHttpHeaders = {}; +import { HeadersAdapter } from 'next/dist/server/web/spec-extension/adapters/headers'; - /** - * Merges a header value into a string. This stores multiple values as an - * array, so we need to merge them into a string. - * - * @param value a header value - * @returns a merged header value (a string) - */ - private merge(value: string | string[]): string { - if (Array.isArray(value)) return value.join(', '); - - return value; +class HeadersAdapterMock extends HeadersAdapter { + constructor() { + super({}); } - public append = fn((name: string, value: string): void => { - const existing = this.headers[name]; - if (typeof existing === 'string') { - this.headers[name] = [existing, value]; - } else if (Array.isArray(existing)) { - existing.push(value); - } else { - this.headers[name] = value; - } - }).mockName('headers().append'); - - public delete = fn((name: string) => { - delete this.headers[name]; - }).mockName('headers().delete'); - - public get = fn((name: string): string | null => { - const value = this.headers[name]; - if (typeof value !== 'undefined') return this.merge(value); + append = fn(super.append).mockName('next/headers::headers().append'); - return null; - }).mockName('headers().get'); + delete = fn(super.delete).mockName('next/headers::headers().delete'); - public has = fn((name: string): boolean => { - return typeof this.headers[name] !== 'undefined'; - }).mockName('headers().has'); + get = fn(super.get).mockName('next/headers::headers().get'); - public set = fn((name: string, value: string): void => { - this.headers[name] = value; - }).mockName('headers().set'); + has = fn(super.has).mockName('next/headers::headers().has'); - public forEach = fn( - (callbackfn: (value: string, name: string, parent: Headers) => void, thisArg?: any): void => { - for (const [name, value] of this.entries()) { - callbackfn.call(thisArg, value, name, this); - } - } - ).mockName('headers().forEach'); + set = fn(super.set).mockName('next/headers::headers().set'); - public entries = fn( - function* (this: HeadersAdapterMock): IterableIterator<[string, string]> { - for (const key of Object.keys(this.headers)) { - const name = key.toLowerCase(); - // We assert here that this is a string because we got it from the - // Object.keys() call above. - const value = this.get(name) as string; + forEach = fn(super.forEach).mockName('next/headers::headers().forEach'); - yield [name, value]; - } - }.bind(this) - ).mockName('headers().entries'); + entries = fn(super.entries).mockName('next/headers::headers().entries'); - public keys = fn( - function* (this: HeadersAdapterMock): IterableIterator { - for (const key of Object.keys(this.headers)) { - const name = key.toLowerCase(); - yield name; - } - }.bind(this) - ).mockName('headers().keys'); + keys = fn(super.keys).mockName('next/headers::headers().keys'); - public values = fn( - function* (this: HeadersAdapterMock): IterableIterator { - for (const key of Object.keys(this.headers)) { - // We assert here that this is a string because we got it from the - // Object.keys() call above. - const value = this.get(key) as string; - - yield value; - } - }.bind(this) - ).mockName('headers().values'); - - public [Symbol.iterator](): IterableIterator<[string, string]> { - return this.entries(); - } + values = fn(super.values).mockName('next/headers::headers().values'); } let headersAdapterMock: HeadersAdapterMock; diff --git a/code/frameworks/nextjs/src/export-mocks/navigation/index.ts b/code/frameworks/nextjs/src/export-mocks/navigation/index.ts index 47a7e5801b56..fbbeb8ced25c 100644 --- a/code/frameworks/nextjs/src/export-mocks/navigation/index.ts +++ b/code/frameworks/nextjs/src/export-mocks/navigation/index.ts @@ -17,14 +17,14 @@ let navigationAPI: { * @ignore * @internal * */ -const createNavigation = (overrides: any) => { +export const createNavigation = (overrides: any) => { const navigationActions = { - push: fn().mockName('useRouter().push'), - replace: fn().mockName('useRouter().replace'), - forward: fn().mockName('useRouter().forward'), - back: fn().mockName('useRouter().back'), - prefetch: fn().mockName('useRouter().prefetch'), - refresh: fn().mockName('useRouter().refresh'), + push: fn().mockName('next/navigation::useRouter().push'), + replace: fn().mockName('next/navigation::useRouter().replace'), + forward: fn().mockName('next/navigation::useRouter().forward'), + back: fn().mockName('next/navigation::useRouter().back'), + prefetch: fn().mockName('next/navigation::useRouter().prefetch'), + refresh: fn().mockName('next/navigation::useRouter().refresh'), }; if (overrides) { @@ -42,7 +42,7 @@ const createNavigation = (overrides: any) => { return navigationAPI; }; -const getRouter = () => { +export const getRouter = () => { if (!navigationAPI) { throw new NextjsRouterMocksNotAvailable({ importType: 'next/navigation', @@ -56,41 +56,34 @@ const getRouter = () => { export * from 'next/dist/client/components/navigation'; // mock utilities/overrides (as of Next v14.2.0) -const redirect = fn().mockName('redirect'); +export const redirect = fn().mockName('next/navigation::redirect'); // passthrough mocks - keep original implementation but allow for spying -const useSearchParams = fn(originalNavigation.useSearchParams).mockName('useSearchParams'); -const usePathname = fn(originalNavigation.usePathname).mockName('usePathname'); -const useSelectedLayoutSegment = fn(originalNavigation.useSelectedLayoutSegment).mockName( +export const useSearchParams = fn(originalNavigation.useSearchParams).mockName( + 'next/navigation::useSearchParams' +); +export const usePathname = fn(originalNavigation.usePathname).mockName( + 'next/navigation::usePathname' +); +export const useSelectedLayoutSegment = fn(originalNavigation.useSelectedLayoutSegment).mockName( 'useSelectedLayoutSegment' ); -const useSelectedLayoutSegments = fn(originalNavigation.useSelectedLayoutSegments).mockName( +export const useSelectedLayoutSegments = fn(originalNavigation.useSelectedLayoutSegments).mockName( 'useSelectedLayoutSegments' ); -const useRouter = fn(originalNavigation.useRouter).mockName('useRouter'); -const useServerInsertedHTML = fn(originalNavigation.useServerInsertedHTML).mockName( +export const useRouter = fn(originalNavigation.useRouter).mockName('next/navigation::useRouter'); +export const useServerInsertedHTML = fn(originalNavigation.useServerInsertedHTML).mockName( 'useServerInsertedHTML' ); -const notFound = fn(originalNavigation.notFound).mockName('notFound'); -const permanentRedirect = fn(originalNavigation.permanentRedirect).mockName('permanentRedirect'); +export const notFound = fn(originalNavigation.notFound).mockName('next/navigation::notFound'); +export const permanentRedirect = fn(originalNavigation.permanentRedirect).mockName( + 'permanentRedirect' +); // Params, not exported by Next.js, is manually declared to avoid inference issues. interface Params { [key: string]: string | string[]; } -const useParams = fn<[], Params>(originalNavigation.useParams).mockName('useParams'); - -export { - createNavigation, - getRouter, - redirect, - useSearchParams, - usePathname, - useSelectedLayoutSegment, - useSelectedLayoutSegments, - useParams, - useRouter, - useServerInsertedHTML, - notFound, - permanentRedirect, -}; +export const useParams = fn<[], Params>(originalNavigation.useParams).mockName( + 'next/navigation::useParams' +); diff --git a/code/frameworks/nextjs/src/export-mocks/router/index.ts b/code/frameworks/nextjs/src/export-mocks/router/index.ts index c9f81f3a72be..b3c5e37faa43 100644 --- a/code/frameworks/nextjs/src/export-mocks/router/index.ts +++ b/code/frameworks/nextjs/src/export-mocks/router/index.ts @@ -36,27 +36,27 @@ let routerAPI: { * @ignore * @internal * */ -const createRouter = (overrides: Partial) => { +export const createRouter = (overrides: Partial) => { const routerActions: Partial = { push: fn((..._args: any[]) => { return Promise.resolve(true); - }).mockName('useRouter().push'), + }).mockName('next/router::useRouter().push'), replace: fn((..._args: any[]) => { return Promise.resolve(true); - }).mockName('useRouter().replace'), - reload: fn((..._args: any[]) => {}).mockName('useRouter().reload'), - back: fn((..._args: any[]) => {}).mockName('useRouter().back'), - forward: fn(() => {}).mockName('useRouter().forward'), + }).mockName('next/router::useRouter().replace'), + reload: fn((..._args: any[]) => {}).mockName('next/router::useRouter().reload'), + back: fn((..._args: any[]) => {}).mockName('next/router::useRouter().back'), + forward: fn(() => {}).mockName('next/router::useRouter().forward'), prefetch: fn((..._args: any[]) => { return Promise.resolve(); - }).mockName('useRouter().prefetch'), - beforePopState: fn((..._args: any[]) => {}).mockName('useRouter().beforePopState'), + }).mockName('next/router::useRouter().prefetch'), + beforePopState: fn((..._args: any[]) => {}).mockName('next/router::useRouter().beforePopState'), }; const routerEvents: NextRouter['events'] = { - on: fn((..._args: any[]) => {}).mockName('useRouter().events.on'), - off: fn((..._args: any[]) => {}).mockName('useRouter().events.off'), - emit: fn((..._args: any[]) => {}).mockName('useRouter().events.emit'), + on: fn((..._args: any[]) => {}).mockName('next/router::useRouter().events.on'), + off: fn((..._args: any[]) => {}).mockName('next/router::useRouter().events.off'), + emit: fn((..._args: any[]) => {}).mockName('next/router::useRouter().events.emit'), }; if (overrides) { @@ -95,7 +95,7 @@ const createRouter = (overrides: Partial) => { return routerAPI as unknown as NextRouter; }; -const getRouter = () => { +export const getRouter = () => { if (!routerAPI) { throw new NextjsRouterMocksNotAvailable({ importType: 'next/router', @@ -111,7 +111,5 @@ export default singletonRouter; // mock utilities/overrides (as of Next v14.2.0) // passthrough mocks - keep original implementation but allow for spying -const useRouter = fn(originalRouter.useRouter).mockName('useRouter'); -const withRouter = fn(originalRouter.withRouter).mockName('withRouter'); - -export { createRouter, getRouter, useRouter, withRouter }; +export const useRouter = fn(originalRouter.useRouter).mockName('next/router::useRouter'); +export const withRouter = fn(originalRouter.withRouter).mockName('next/router::withRouter'); From 310aaf5aaffd0cdc14d2afe86340bb6f44aefbd2 Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Tue, 16 Apr 2024 12:11:13 +0200 Subject: [PATCH 64/82] Bind this --- .../nextjs/src/export-mocks/headers/cookies.ts | 10 +++++----- .../nextjs/src/export-mocks/headers/headers.ts | 18 +++++++++--------- .../nextjs/yarn.lock | 8 ++++---- 3 files changed, 18 insertions(+), 18 deletions(-) diff --git a/code/frameworks/nextjs/src/export-mocks/headers/cookies.ts b/code/frameworks/nextjs/src/export-mocks/headers/cookies.ts index c3272dc0e335..3fc9fdc1ae59 100644 --- a/code/frameworks/nextjs/src/export-mocks/headers/cookies.ts +++ b/code/frameworks/nextjs/src/export-mocks/headers/cookies.ts @@ -8,15 +8,15 @@ import { RequestCookies } from 'next/dist/compiled/@edge-runtime/cookies'; import { headers } from '@storybook/nextjs/headers.mock'; class RequestCookiesMock extends RequestCookies { - get = fn(super.get).mockName('next/headers::get'); + get = fn(super.get.bind(this)).mockName('next/headers::get'); - getAll = fn(super.getAll).mockName('next/headers::cookies().getAll'); + getAll = fn(super.getAll.bind(this)).mockName('next/headers::cookies().getAll'); - has = fn(super.has).mockName('next/headers::cookies().has'); + has = fn(super.has.bind(this)).mockName('next/headers::cookies().has'); - set = fn(super.set).mockName('next/headers::cookies().set'); + set = fn(super.set.bind(this)).mockName('next/headers::cookies().set'); - delete = fn(super.delete).mockName('next/headers::cookies().delete'); + delete = fn(super.delete.bind(this)).mockName('next/headers::cookies().delete'); } let requestCookiesMock: RequestCookiesMock; diff --git a/code/frameworks/nextjs/src/export-mocks/headers/headers.ts b/code/frameworks/nextjs/src/export-mocks/headers/headers.ts index 02703265e583..d9eb5177b447 100644 --- a/code/frameworks/nextjs/src/export-mocks/headers/headers.ts +++ b/code/frameworks/nextjs/src/export-mocks/headers/headers.ts @@ -7,23 +7,23 @@ class HeadersAdapterMock extends HeadersAdapter { super({}); } - append = fn(super.append).mockName('next/headers::headers().append'); + append = fn(super.append.bind(this)).mockName('next/headers::headers().append'); - delete = fn(super.delete).mockName('next/headers::headers().delete'); + delete = fn(super.delete.bind(this)).mockName('next/headers::headers().delete'); - get = fn(super.get).mockName('next/headers::headers().get'); + get = fn(super.get.bind(this)).mockName('next/headers::headers().get'); - has = fn(super.has).mockName('next/headers::headers().has'); + has = fn(super.has.bind(this)).mockName('next/headers::headers().has'); - set = fn(super.set).mockName('next/headers::headers().set'); + set = fn(super.set.bind(this)).mockName('next/headers::headers().set'); - forEach = fn(super.forEach).mockName('next/headers::headers().forEach'); + forEach = fn(super.forEach.bind(this)).mockName('next/headers::headers().forEach'); - entries = fn(super.entries).mockName('next/headers::headers().entries'); + entries = fn(super.entries.bind(this)).mockName('next/headers::headers().entries'); - keys = fn(super.keys).mockName('next/headers::headers().keys'); + keys = fn(super.keys.bind(this)).mockName('next/headers::headers().keys'); - values = fn(super.values).mockName('next/headers::headers().values'); + values = fn(super.values.bind(this)).mockName('next/headers::headers().values'); } let headersAdapterMock: HeadersAdapterMock; diff --git a/test-storybooks/portable-stories-kitchen-sink/nextjs/yarn.lock b/test-storybooks/portable-stories-kitchen-sink/nextjs/yarn.lock index e0efcfd9d6d9..71f8b86f9807 100644 --- a/test-storybooks/portable-stories-kitchen-sink/nextjs/yarn.lock +++ b/test-storybooks/portable-stories-kitchen-sink/nextjs/yarn.lock @@ -3167,7 +3167,7 @@ __metadata: "@storybook/nextjs@file:../../../code/frameworks/nextjs::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.7 - resolution: "@storybook/nextjs@file:../../../code/frameworks/nextjs#../../../code/frameworks/nextjs::hash=246816&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/nextjs@file:../../../code/frameworks/nextjs#../../../code/frameworks/nextjs::hash=28a407&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@babel/core": "npm:^7.23.2" "@babel/plugin-syntax-bigint": "npm:^7.8.3" @@ -3227,7 +3227,7 @@ __metadata: optional: true webpack: optional: true - checksum: 10/71732cc220e381872106dab3824883f4a77dcbb60901c939f58599bf92f156564a34fe646ce1159c307702be03cf532fbffaa1a515e271a6623f340d19000283 + checksum: 10/fd9a469074e0b7aba065a0b0f81f272e75e708370362ff047a653d9a19c5b753fcfab8b2f30b3f9ae226a12739b7b11054358afe4707e8d7185b9dca11c75a7c languageName: node linkType: hard @@ -3326,7 +3326,7 @@ __metadata: "@storybook/react@file:../../../code/renderers/react::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.7 - resolution: "@storybook/react@file:../../../code/renderers/react#../../../code/renderers/react::hash=cd73fa&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/react@file:../../../code/renderers/react#../../../code/renderers/react::hash=faf3f4&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/client-logger": "workspace:*" "@storybook/docs-tools": "workspace:*" @@ -3356,7 +3356,7 @@ __metadata: peerDependenciesMeta: typescript: optional: true - checksum: 10/834084c0092a8b179f7048c1111308b6a2381cf3ee119372ed2940833b02e13577b5bc334c3f14c3224bd2d8b786939a74fbaf4dea6e8423ff610b34047412b4 + checksum: 10/f89fb42e87e17377af48b57b337dd4708053ae83d8558a0ae35af479b1faa6d7206b07934e18113707febed5ebcf94510caa89b8c92bc87cf7b5391296bbfef2 languageName: node linkType: hard From 0b243bd26d08c2b8f5aa32df503403d1baf93563 Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Tue, 16 Apr 2024 13:02:34 +0200 Subject: [PATCH 65/82] Update snapshot --- .../nextjs/stories/__snapshots__/portable-stories.test.tsx.snap | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test-storybooks/portable-stories-kitchen-sink/nextjs/stories/__snapshots__/portable-stories.test.tsx.snap b/test-storybooks/portable-stories-kitchen-sink/nextjs/stories/__snapshots__/portable-stories.test.tsx.snap index 2b8af2b9cd59..a22fa06a8ab3 100644 --- a/test-storybooks/portable-stories-kitchen-sink/nextjs/stories/__snapshots__/portable-stories.test.tsx.snap +++ b/test-storybooks/portable-stories-kitchen-sink/nextjs/stories/__snapshots__/portable-stories.test.tsx.snap @@ -794,7 +794,7 @@ exports[`renders nextHeaderStories stories renders Default 1`] = ` - firstName=Jane; lastName=Doe + firstName=Jane; ; lastName=Doe;

Date: Tue, 16 Apr 2024 13:11:55 +0200 Subject: [PATCH 66/82] Fix name --- code/frameworks/nextjs/src/export-mocks/headers/cookies.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/frameworks/nextjs/src/export-mocks/headers/cookies.ts b/code/frameworks/nextjs/src/export-mocks/headers/cookies.ts index 3fc9fdc1ae59..3d84ecba3885 100644 --- a/code/frameworks/nextjs/src/export-mocks/headers/cookies.ts +++ b/code/frameworks/nextjs/src/export-mocks/headers/cookies.ts @@ -8,7 +8,7 @@ import { RequestCookies } from 'next/dist/compiled/@edge-runtime/cookies'; import { headers } from '@storybook/nextjs/headers.mock'; class RequestCookiesMock extends RequestCookies { - get = fn(super.get.bind(this)).mockName('next/headers::get'); + get = fn(super.get.bind(this)).mockName('next/headers::cookies().get'); getAll = fn(super.getAll.bind(this)).mockName('next/headers::cookies().getAll'); From b51db447ed09e16d19cc734787552680eb42b343 Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Tue, 16 Apr 2024 14:08:31 +0200 Subject: [PATCH 67/82] Hide some junk of next for nwo --- code/addons/actions/src/loaders.ts | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) diff --git a/code/addons/actions/src/loaders.ts b/code/addons/actions/src/loaders.ts index d49a048da231..a1fff870b7be 100644 --- a/code/addons/actions/src/loaders.ts +++ b/code/addons/actions/src/loaders.ts @@ -18,7 +18,19 @@ const logActionsWhenMockCalled: LoaderFunction = (context) => { typeof global.__STORYBOOK_TEST_ON_MOCK_CALL__ === 'function' ) { const onMockCall = global.__STORYBOOK_TEST_ON_MOCK_CALL__ as typeof onMockCallType; - onMockCall((mock, args) => action(mock.getMockName())(args)); + onMockCall((mock, args) => { + const name = mock.getMockName(); + + // TODO: Make this a configurable API in 8.2 + if ( + !/^next\/.*::/.test(name) || + ((name.startsWith('next/headers::cookies()') || + name.startsWith('next/headers::headers()')) && + (name.endsWith('set') || name.endsWith('delete'))) + ) { + action(name)(args); + } + }); subscribed = true; } }; From a1d631b8748f7d08b44f97a67c0953aef9f1af3a Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Tue, 16 Apr 2024 14:13:47 +0200 Subject: [PATCH 68/82] Update code/frameworks/nextjs/src/export-mocks/navigation/index.ts Co-authored-by: Yann Braga --- code/frameworks/nextjs/src/export-mocks/navigation/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/frameworks/nextjs/src/export-mocks/navigation/index.ts b/code/frameworks/nextjs/src/export-mocks/navigation/index.ts index fbbeb8ced25c..61344102c242 100644 --- a/code/frameworks/nextjs/src/export-mocks/navigation/index.ts +++ b/code/frameworks/nextjs/src/export-mocks/navigation/index.ts @@ -77,7 +77,7 @@ export const useServerInsertedHTML = fn(originalNavigation.useServerInsertedHTML ); export const notFound = fn(originalNavigation.notFound).mockName('next/navigation::notFound'); export const permanentRedirect = fn(originalNavigation.permanentRedirect).mockName( - 'permanentRedirect' + 'next/navigation::permanentRedirect' ); // Params, not exported by Next.js, is manually declared to avoid inference issues. From 2beb7ba087f771ee85d1126d5cc025359853b2d3 Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Tue, 16 Apr 2024 14:13:53 +0200 Subject: [PATCH 69/82] Update code/frameworks/nextjs/src/export-mocks/navigation/index.ts Co-authored-by: Yann Braga --- code/frameworks/nextjs/src/export-mocks/navigation/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/frameworks/nextjs/src/export-mocks/navigation/index.ts b/code/frameworks/nextjs/src/export-mocks/navigation/index.ts index 61344102c242..2973c65120ed 100644 --- a/code/frameworks/nextjs/src/export-mocks/navigation/index.ts +++ b/code/frameworks/nextjs/src/export-mocks/navigation/index.ts @@ -66,7 +66,7 @@ export const usePathname = fn(originalNavigation.usePathname).mockName( 'next/navigation::usePathname' ); export const useSelectedLayoutSegment = fn(originalNavigation.useSelectedLayoutSegment).mockName( - 'useSelectedLayoutSegment' + 'next/navigation::useSelectedLayoutSegment' ); export const useSelectedLayoutSegments = fn(originalNavigation.useSelectedLayoutSegments).mockName( 'useSelectedLayoutSegments' From d83691a92415159962ce34fef32ebb6fef3d6cba Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Tue, 16 Apr 2024 14:14:02 +0200 Subject: [PATCH 70/82] Update code/frameworks/nextjs/src/export-mocks/navigation/index.ts Co-authored-by: Yann Braga --- code/frameworks/nextjs/src/export-mocks/navigation/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/frameworks/nextjs/src/export-mocks/navigation/index.ts b/code/frameworks/nextjs/src/export-mocks/navigation/index.ts index 2973c65120ed..63458b0fc927 100644 --- a/code/frameworks/nextjs/src/export-mocks/navigation/index.ts +++ b/code/frameworks/nextjs/src/export-mocks/navigation/index.ts @@ -73,7 +73,7 @@ export const useSelectedLayoutSegments = fn(originalNavigation.useSelectedLayout ); export const useRouter = fn(originalNavigation.useRouter).mockName('next/navigation::useRouter'); export const useServerInsertedHTML = fn(originalNavigation.useServerInsertedHTML).mockName( - 'useServerInsertedHTML' + 'next/navigation::useServerInsertedHTML' ); export const notFound = fn(originalNavigation.notFound).mockName('next/navigation::notFound'); export const permanentRedirect = fn(originalNavigation.permanentRedirect).mockName( From 1aa833d1a3cd079433f004d8f3f464b2579eb3ab Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Tue, 16 Apr 2024 14:14:07 +0200 Subject: [PATCH 71/82] Update code/frameworks/nextjs/src/export-mocks/navigation/index.ts Co-authored-by: Yann Braga --- code/frameworks/nextjs/src/export-mocks/navigation/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/frameworks/nextjs/src/export-mocks/navigation/index.ts b/code/frameworks/nextjs/src/export-mocks/navigation/index.ts index 63458b0fc927..dd9e9a692e6f 100644 --- a/code/frameworks/nextjs/src/export-mocks/navigation/index.ts +++ b/code/frameworks/nextjs/src/export-mocks/navigation/index.ts @@ -69,7 +69,7 @@ export const useSelectedLayoutSegment = fn(originalNavigation.useSelectedLayoutS 'next/navigation::useSelectedLayoutSegment' ); export const useSelectedLayoutSegments = fn(originalNavigation.useSelectedLayoutSegments).mockName( - 'useSelectedLayoutSegments' + 'next/navigation::useSelectedLayoutSegments' ); export const useRouter = fn(originalNavigation.useRouter).mockName('next/navigation::useRouter'); export const useServerInsertedHTML = fn(originalNavigation.useServerInsertedHTML).mockName( From 8b6bbbfefcd640434944a2d478e258ad6b54a1cd Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Tue, 16 Apr 2024 14:19:52 +0200 Subject: [PATCH 72/82] Hide some junk of next for now --- code/addons/actions/src/loaders.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/code/addons/actions/src/loaders.ts b/code/addons/actions/src/loaders.ts index a1fff870b7be..7f279bba5775 100644 --- a/code/addons/actions/src/loaders.ts +++ b/code/addons/actions/src/loaders.ts @@ -24,6 +24,8 @@ const logActionsWhenMockCalled: LoaderFunction = (context) => { // TODO: Make this a configurable API in 8.2 if ( !/^next\/.*::/.test(name) || + name.startsWith('next/router::useRouter()') || + name.startsWith('next/navigation::useRouter()') || ((name.startsWith('next/headers::cookies()') || name.startsWith('next/headers::headers()')) && (name.endsWith('set') || name.endsWith('delete'))) From 8dbd04c4c73b6a55fc9e77b129435fc8fde0e7be Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Tue, 16 Apr 2024 15:09:15 +0200 Subject: [PATCH 73/82] Show redirect and next/cache spies --- code/addons/actions/src/loaders.ts | 15 ++++++++++----- 1 file changed, 10 insertions(+), 5 deletions(-) diff --git a/code/addons/actions/src/loaders.ts b/code/addons/actions/src/loaders.ts index 7f279bba5775..eebb09acb71b 100644 --- a/code/addons/actions/src/loaders.ts +++ b/code/addons/actions/src/loaders.ts @@ -24,11 +24,16 @@ const logActionsWhenMockCalled: LoaderFunction = (context) => { // TODO: Make this a configurable API in 8.2 if ( !/^next\/.*::/.test(name) || - name.startsWith('next/router::useRouter()') || - name.startsWith('next/navigation::useRouter()') || - ((name.startsWith('next/headers::cookies()') || - name.startsWith('next/headers::headers()')) && - (name.endsWith('set') || name.endsWith('delete'))) + [ + 'next/router::useRouter()', + 'next/navigation::useRouter()', + 'next/navigation::redirect', + 'next/cache::', + 'next/headers::cookies().set', + 'next/headers::cookies().delete', + 'next/headers::headers().set', + 'next/headers::headers().delete', + ].some((prefix) => name.startsWith(prefix)) ) { action(name)(args); } From 7a189bba259f818aeb68823c58b963dc1af4805d Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Wed, 17 Apr 2024 11:01:37 +0200 Subject: [PATCH 74/82] Add new actions to the bottom of the panel and auto scroll --- .../src/components/ActionLogger/index.tsx | 74 +++++++++++-------- .../src/containers/ActionLogger/index.tsx | 4 +- .../src/components/ScrollArea/ScrollArea.tsx | 65 ++++++++-------- 3 files changed, 76 insertions(+), 67 deletions(-) diff --git a/code/addons/actions/src/components/ActionLogger/index.tsx b/code/addons/actions/src/components/ActionLogger/index.tsx index a3e48337107f..4244f75cf449 100644 --- a/code/addons/actions/src/components/ActionLogger/index.tsx +++ b/code/addons/actions/src/components/ActionLogger/index.tsx @@ -1,22 +1,23 @@ -import type { FC, PropsWithChildren } from 'react'; -import React, { Fragment } from 'react'; -import { styled, withTheme } from '@storybook/theming'; +import type { ElementRef, ReactNode } from 'react'; +import React, { forwardRef, Fragment, useEffect, useRef } from 'react'; import type { Theme } from '@storybook/theming'; +import { styled, withTheme } from '@storybook/theming'; import { Inspector } from 'react-inspector'; import { ActionBar, ScrollArea } from '@storybook/components'; -import { Action, InspectorContainer, Counter } from './style'; +import { Action, Counter, InspectorContainer } from './style'; import type { ActionDisplay } from '../../models'; -const UnstyledWrapped: FC> = ({ - children, - className, -}) => ( - - {children} - +const UnstyledWrapped = forwardRef( + ({ children, className }, ref) => ( + + {children} + + ) ); +UnstyledWrapped.displayName = 'UnstyledWrapped'; + export const Wrapper = styled(UnstyledWrapped)({ margin: 0, padding: '10px 5px 20px', @@ -39,24 +40,33 @@ interface ActionLoggerProps { onClear: () => void; } -export const ActionLogger = ({ actions, onClear }: ActionLoggerProps) => ( - - - {actions.map((action: ActionDisplay) => ( - - {action.count > 1 && {action.count}} - - - - - ))} - - - - -); +export const ActionLogger = ({ actions, onClear }: ActionLoggerProps) => { + const wrapperRef = useRef>(null); + const wrapper = wrapperRef.current; + const wasAtBottom = wrapper && wrapper.scrollHeight - wrapper.scrollTop === wrapper.clientHeight; + + useEffect(() => { + if (wasAtBottom) wrapperRef.current.scrollTop = wrapperRef.current.scrollHeight; + }, [wasAtBottom, actions.length]); + + return ( + + + {actions.map((action: ActionDisplay) => ( + + {action.count > 1 && {action.count}} + + + + + ))} + + + + ); +}; diff --git a/code/addons/actions/src/containers/ActionLogger/index.tsx b/code/addons/actions/src/containers/ActionLogger/index.tsx index bb88fd7f5b2a..6f5d5f3a1366 100644 --- a/code/addons/actions/src/containers/ActionLogger/index.tsx +++ b/code/addons/actions/src/containers/ActionLogger/index.tsx @@ -63,12 +63,12 @@ export default class ActionLogger extends Component { this.setState((prevState: ActionLoggerState) => { const actions = [...prevState.actions]; - const previous = actions.length && actions[0]; + const previous = actions.length && actions[actions.length - 1]; if (previous && safeDeepEqual(previous.data, action.data)) { previous.count++; } else { action.count = 1; - actions.unshift(action); + actions.push(action); } return { actions: actions.slice(0, action.options.limit) }; }); diff --git a/code/ui/components/src/components/ScrollArea/ScrollArea.tsx b/code/ui/components/src/components/ScrollArea/ScrollArea.tsx index f3f965af8783..cd697523d44d 100644 --- a/code/ui/components/src/components/ScrollArea/ScrollArea.tsx +++ b/code/ui/components/src/components/ScrollArea/ScrollArea.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { forwardRef } from 'react'; import { styled } from '@storybook/theming'; import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area'; @@ -75,36 +75,35 @@ const ScrollAreaThumb = styled(ScrollAreaPrimitive.Thumb)(({ theme }) => ({ }, })); -export const ScrollArea = ({ - children, - horizontal = false, - vertical = false, - offset = 2, - scrollbarSize = 6, - className, -}: ScrollAreaProps) => ( - - {children} - {horizontal && ( - - - - )} - {vertical && ( - - - - )} - {horizontal && vertical && } - +export const ScrollArea = forwardRef( + ( + { children, horizontal = false, vertical = false, offset = 2, scrollbarSize = 6, className }, + ref + ) => ( + + {children} + {horizontal && ( + + + + )} + {vertical && ( + + + + )} + {horizontal && vertical && } + + ) ); +ScrollArea.displayName = 'ScrollArea'; From beb0fd74d2426bec3b8e411e526aac9fd50f4ccd Mon Sep 17 00:00:00 2001 From: Jeppe Reinhold Date: Wed, 17 Apr 2024 14:37:05 +0200 Subject: [PATCH 75/82] add cache.mock entrypoint to nextjs --- code/frameworks/nextjs/package.json | 15 ++++++++++----- 1 file changed, 10 insertions(+), 5 deletions(-) diff --git a/code/frameworks/nextjs/package.json b/code/frameworks/nextjs/package.json index b09b2f383295..04757586be87 100644 --- a/code/frameworks/nextjs/package.json +++ b/code/frameworks/nextjs/package.json @@ -52,21 +52,26 @@ "require": "./dist/export-mocks/index.js", "import": "./dist/export-mocks/index.mjs" }, + "./cache.mock": { + "types": "./dist/export-mocks/cache/index.d.ts", + "require": "./dist/export-mocks/cache/index.js", + "import": "./dist/export-mocks/cache/index.mjs" + }, "./headers.mock": { "types": "./dist/export-mocks/headers/index.d.ts", "require": "./dist/export-mocks/headers/index.js", "import": "./dist/export-mocks/headers/index.mjs" }, - "./router.mock": { - "types": "./dist/export-mocks/router/index.d.ts", - "require": "./dist/export-mocks/router/index.js", - "import": "./dist/export-mocks/router/index.mjs" - }, "./navigation.mock": { "types": "./dist/export-mocks/navigation/index.d.ts", "require": "./dist/export-mocks/navigation/index.js", "import": "./dist/export-mocks/navigation/index.mjs" }, + "./router.mock": { + "types": "./dist/export-mocks/router/index.d.ts", + "require": "./dist/export-mocks/router/index.js", + "import": "./dist/export-mocks/router/index.mjs" + }, "./package.json": "./package.json" }, "main": "dist/index.js", From a3565f2d544cfc124b38fc4b450190c2e49218c9 Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Wed, 17 Apr 2024 15:16:35 +0200 Subject: [PATCH 76/82] Address review --- code/addons/actions/src/components/ActionLogger/index.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/code/addons/actions/src/components/ActionLogger/index.tsx b/code/addons/actions/src/components/ActionLogger/index.tsx index 4244f75cf449..ec2e6ca2e102 100644 --- a/code/addons/actions/src/components/ActionLogger/index.tsx +++ b/code/addons/actions/src/components/ActionLogger/index.tsx @@ -46,6 +46,7 @@ export const ActionLogger = ({ actions, onClear }: ActionLoggerProps) => { const wasAtBottom = wrapper && wrapper.scrollHeight - wrapper.scrollTop === wrapper.clientHeight; useEffect(() => { + // Scroll to bottom, when the action panel was already scrolled down if (wasAtBottom) wrapperRef.current.scrollTop = wrapperRef.current.scrollHeight; }, [wasAtBottom, actions.length]); From a3e482a6d3e9053c7831c60d1feaf501ecb8cef7 Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Tue, 30 Apr 2024 11:12:35 +0200 Subject: [PATCH 77/82] Update @storybook/csf dependency to ^0.1.6 --- code/addons/links/package.json | 2 +- code/lib/codemod/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/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 | 32 ++++++++++++++--------------- 13 files changed, 28 insertions(+), 28 deletions(-) diff --git a/code/addons/links/package.json b/code/addons/links/package.json index fca532085ff4..c19d89b78b0a 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.5", + "@storybook/csf": "^0.1.6", "@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 c5569f29bd04..70424ea04fb2 100644 --- a/code/lib/codemod/package.json +++ b/code/lib/codemod/package.json @@ -57,7 +57,7 @@ "@babel/core": "^7.23.2", "@babel/preset-env": "^7.23.2", "@babel/types": "^7.23.0", - "@storybook/csf": "^0.1.5", + "@storybook/csf": "^0.1.6", "@storybook/csf-tools": "workspace:*", "@storybook/node-logger": "workspace:*", "@storybook/types": "workspace:*", diff --git a/code/lib/core-server/package.json b/code/lib/core-server/package.json index 334ae373b36e..c3c2ecdcaac3 100644 --- a/code/lib/core-server/package.json +++ b/code/lib/core-server/package.json @@ -62,7 +62,7 @@ "@storybook/channels": "workspace:*", "@storybook/core-common": "workspace:*", "@storybook/core-events": "workspace:*", - "@storybook/csf": "^0.1.5", + "@storybook/csf": "^0.1.6", "@storybook/csf-tools": "workspace:*", "@storybook/docs-mdx": "3.0.0", "@storybook/global": "^5.0.0", diff --git a/code/lib/csf-tools/package.json b/code/lib/csf-tools/package.json index d04ab9d94884..a05ad6c933bb 100644 --- a/code/lib/csf-tools/package.json +++ b/code/lib/csf-tools/package.json @@ -46,7 +46,7 @@ "@babel/parser": "^7.23.0", "@babel/traverse": "^7.23.2", "@babel/types": "^7.23.0", - "@storybook/csf": "^0.1.5", + "@storybook/csf": "^0.1.6", "@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 a111b3a232f6..0a68b927b820 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.5", + "@storybook/csf": "^0.1.6", "@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 d5678327d9e2..36797a9265e2 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.5", + "@storybook/csf": "^0.1.6", "@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 833850ad8d5e..4c8916ae6631 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.5", + "@storybook/csf": "^0.1.6", "@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 d7469d928ae0..57eae04e53f5 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.5", + "@storybook/csf": "^0.1.6", "@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 aa77cb859fb2..5ec6ae44ccf9 100644 --- a/code/package.json +++ b/code/package.json @@ -127,7 +127,7 @@ "@storybook/core-events": "workspace:*", "@storybook/core-server": "workspace:*", "@storybook/core-webpack": "workspace:*", - "@storybook/csf": "^0.1.5", + "@storybook/csf": "^0.1.6", "@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 ef60a8071fbf..b045700b4373 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.5", + "@storybook/csf": "^0.1.6", "@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 5e59af48f6da..3369d91ea08e 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.5", + "@storybook/csf": "^0.1.6", "@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 eb45b1b3ddcc..a3c861bfbf6b 100644 --- a/code/ui/components/package.json +++ b/code/ui/components/package.json @@ -61,7 +61,7 @@ "dependencies": { "@radix-ui/react-slot": "^1.0.2", "@storybook/client-logger": "workspace:*", - "@storybook/csf": "^0.1.5", + "@storybook/csf": "^0.1.6", "@storybook/global": "^5.0.0", "@storybook/icons": "^1.2.5", "@storybook/theming": "workspace:*", diff --git a/code/yarn.lock b/code/yarn.lock index f0aefa9c64d2..8a8276734808 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -5140,7 +5140,7 @@ __metadata: dependencies: "@storybook/client-logger": "workspace:*" "@storybook/core-events": "workspace:*" - "@storybook/csf": "npm:^0.1.5" + "@storybook/csf": "npm:^0.1.6" "@storybook/global": "npm:^5.0.0" "@storybook/manager-api": "workspace:*" "@storybook/preview-api": "workspace:*" @@ -5408,7 +5408,7 @@ __metadata: "@storybook/client-logger": "workspace:*" "@storybook/components": "workspace:*" "@storybook/core-events": "workspace:*" - "@storybook/csf": "npm:^0.1.5" + "@storybook/csf": "npm:^0.1.6" "@storybook/docs-tools": "workspace:*" "@storybook/global": "npm:^5.0.0" "@storybook/icons": "npm:^1.2.5" @@ -5639,7 +5639,7 @@ __metadata: "@babel/core": "npm:^7.23.2" "@babel/preset-env": "npm:^7.23.2" "@babel/types": "npm:^7.23.0" - "@storybook/csf": "npm:^0.1.5" + "@storybook/csf": "npm:^0.1.6" "@storybook/csf-tools": "workspace:*" "@storybook/node-logger": "workspace:*" "@storybook/types": "workspace:*" @@ -5675,7 +5675,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.5" + "@storybook/csf": "npm:^0.1.6" "@storybook/global": "npm:^5.0.0" "@storybook/icons": "npm:^1.2.5" "@storybook/test": "workspace:*" @@ -5777,7 +5777,7 @@ __metadata: "@storybook/channels": "workspace:*" "@storybook/core-common": "workspace:*" "@storybook/core-events": "workspace:*" - "@storybook/csf": "npm:^0.1.5" + "@storybook/csf": "npm:^0.1.6" "@storybook/csf-tools": "workspace:*" "@storybook/docs-mdx": "npm:3.0.0" "@storybook/global": "npm:^5.0.0" @@ -5860,7 +5860,7 @@ __metadata: "@babel/parser": "npm:^7.23.0" "@babel/traverse": "npm:^7.23.2" "@babel/types": "npm:^7.23.0" - "@storybook/csf": "npm:^0.1.5" + "@storybook/csf": "npm:^0.1.6" "@storybook/types": "workspace:*" "@types/fs-extra": "npm:^11.0.1" "@types/js-yaml": "npm:^4.0.5" @@ -5881,12 +5881,12 @@ __metadata: languageName: node linkType: hard -"@storybook/csf@npm:^0.1.5": - version: 0.1.5 - resolution: "@storybook/csf@npm:0.1.5" +"@storybook/csf@npm:^0.1.6": + version: 0.1.6 + resolution: "@storybook/csf@npm:0.1.6" dependencies: type-fest: "npm:^2.19.0" - checksum: 10c0/d7a5514a2e985e4ff0a01716034474f41ac61b9c889e7ff0abc1a4a7941c9e78783b77aa98c6b127fbd1cab0a9e3f90acc15b9e476e95b86865272d3d7b913f8 + checksum: 10c0/81d1ee28a258381ed1cd5e0f9177f2ee06a3b7488ac2cfc9182ba4276662eee8b93f3941f4a141f8f11479991efee55696bf9f442137188255934bbd1de98226 languageName: node linkType: hard @@ -6058,7 +6058,7 @@ __metadata: "@storybook/channels": "workspace:*" "@storybook/client-logger": "workspace:*" "@storybook/core-events": "workspace:*" - "@storybook/csf": "npm:^0.1.5" + "@storybook/csf": "npm:^0.1.6" "@storybook/global": "npm:^5.0.0" "@storybook/icons": "npm:^1.2.5" "@storybook/router": "workspace:*" @@ -6394,7 +6394,7 @@ __metadata: "@storybook/client-logger": "workspace:*" "@storybook/core-common": "workspace:*" "@storybook/core-events": "workspace:*" - "@storybook/csf": "npm:^0.1.5" + "@storybook/csf": "npm:^0.1.6" "@storybook/global": "npm:^5.0.0" "@storybook/types": "workspace:*" "@types/qs": "npm:^6.9.5" @@ -6579,7 +6579,7 @@ __metadata: "@storybook/core-events": "workspace:*" "@storybook/core-server": "workspace:*" "@storybook/core-webpack": "workspace:*" - "@storybook/csf": "npm:^0.1.5" + "@storybook/csf": "npm:^0.1.6" "@storybook/csf-plugin": "workspace:*" "@storybook/csf-tools": "workspace:*" "@storybook/docs-tools": "workspace:*" @@ -6734,7 +6734,7 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/server@workspace:renderers/server" dependencies: - "@storybook/csf": "npm:^0.1.5" + "@storybook/csf": "npm:^0.1.6" "@storybook/csf-tools": "workspace:*" "@storybook/global": "npm:^5.0.0" "@storybook/preview-api": "workspace:*" @@ -6751,7 +6751,7 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/source-loader@workspace:lib/source-loader" dependencies: - "@storybook/csf": "npm:^0.1.5" + "@storybook/csf": "npm:^0.1.6" "@storybook/types": "workspace:*" estraverse: "npm:^5.2.0" lodash: "npm:^4.17.21" @@ -6930,7 +6930,7 @@ __metadata: resolution: "@storybook/types@workspace:lib/types" dependencies: "@storybook/channels": "workspace:*" - "@storybook/csf": "npm:^0.1.5" + "@storybook/csf": "npm:^0.1.6" "@types/express": "npm:^4.7.0" "@types/fs-extra": "npm:^11.0.1" "@types/node": "npm:^18.0.0" From fd1b05b08e1becb8dafea291c4fca2a7e9c25f09 Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Tue, 30 Apr 2024 15:24:39 +0200 Subject: [PATCH 78/82] Fix unit test --- .../portable-stories.test.tsx.snap | 2 +- .../nextjs/yarn.lock | 106 +++++++++--------- 2 files changed, 54 insertions(+), 54 deletions(-) diff --git a/test-storybooks/portable-stories-kitchen-sink/nextjs/stories/__snapshots__/portable-stories.test.tsx.snap b/test-storybooks/portable-stories-kitchen-sink/nextjs/stories/__snapshots__/portable-stories.test.tsx.snap index 2f6747019333..5e046e9b7a0b 100644 --- a/test-storybooks/portable-stories-kitchen-sink/nextjs/stories/__snapshots__/portable-stories.test.tsx.snap +++ b/test-storybooks/portable-stories-kitchen-sink/nextjs/stories/__snapshots__/portable-stories.test.tsx.snap @@ -1010,7 +1010,7 @@ exports[`renders nextHeaderStories stories renders Default 1`] = ` - firstName=Jane; ; lastName=Doe; + firstName=Jane; lastName=Doe

Date: Wed, 1 May 2024 10:05:22 +0200 Subject: [PATCH 79/82] Address review --- code/addons/actions/template/stories/spies.stories.ts | 3 +++ code/lib/preview-api/template/stories/rendering.stories.ts | 3 +++ code/lib/test/template/stories/before-each.stories.ts | 4 +++- 3 files changed, 9 insertions(+), 1 deletion(-) diff --git a/code/addons/actions/template/stories/spies.stories.ts b/code/addons/actions/template/stories/spies.stories.ts index 9749cfb3e492..9d84cae3d361 100644 --- a/code/addons/actions/template/stories/spies.stories.ts +++ b/code/addons/actions/template/stories/spies.stories.ts @@ -12,6 +12,9 @@ const meta = { export default meta; export const ShowSpyOnInActions = { + parameters: { + chromatic: { disable: true }, + }, beforeEach() { console.log('second'); }, diff --git a/code/lib/preview-api/template/stories/rendering.stories.ts b/code/lib/preview-api/template/stories/rendering.stories.ts index cfa655bf7b11..aa521c6fed91 100644 --- a/code/lib/preview-api/template/stories/rendering.stories.ts +++ b/code/lib/preview-api/template/stories/rendering.stories.ts @@ -76,6 +76,9 @@ let loadedLabel = 'Initial'; * Similarly, changing args rapidly should only cause one rerender at a time, producing the same result. */ export const SlowLoader = { + parameters: { + chromatic: { disable: true }, + }, loaders: [ async () => { loadedLabel = 'Loading...'; diff --git a/code/lib/test/template/stories/before-each.stories.ts b/code/lib/test/template/stories/before-each.stories.ts index 842d9d7c2f5b..9af203a7baaf 100644 --- a/code/lib/test/template/stories/before-each.stories.ts +++ b/code/lib/test/template/stories/before-each.stories.ts @@ -1,4 +1,3 @@ -import { global as globalThis } from '@storybook/global'; import { expect, mocked, getByRole, spyOn, userEvent } from '@storybook/test'; const meta = { @@ -12,6 +11,9 @@ const meta = { export default meta; export const BeforeEachOrder = { + parameters: { + chromatic: { disable: true }, + }, beforeEach() { console.log('second'); }, From 9bd94fed5d1bf67db72e4713f2516f530e5b7d88 Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Wed, 1 May 2024 10:07:31 +0200 Subject: [PATCH 80/82] Change to beforeEach --- code/lib/test/template/stories/module-mocking.stories.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/lib/test/template/stories/module-mocking.stories.ts b/code/lib/test/template/stories/module-mocking.stories.ts index f0ddc417fbc6..8332183005a2 100644 --- a/code/lib/test/template/stories/module-mocking.stories.ts +++ b/code/lib/test/template/stories/module-mocking.stories.ts @@ -16,7 +16,7 @@ export default { disable: true, }, }, - loaders: () => { + beforeEach: () => { mocked(foo).mockReturnValue('mocked'); }, async play() { From 069cf670ea2bec271d6a6519b357ce351c6f9cd5 Mon Sep 17 00:00:00 2001 From: Kyle Gach Date: Wed, 1 May 2024 10:23:11 -0600 Subject: [PATCH 81/82] Fix vue snippets --- docs/get-started/vue3-webpack5.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/docs/get-started/vue3-webpack5.md b/docs/get-started/vue3-webpack5.md index 283ba4fbe2d3..d5aa4c7913a8 100644 --- a/docs/get-started/vue3-webpack5.md +++ b/docs/get-started/vue3-webpack5.md @@ -74,9 +74,9 @@ First, install the framework: @@ -118,8 +118,8 @@ Finally, update your `.storybook/main.js|ts` to change the framework property: From 7b8d07659bc7fcf1e7c1671bc2862ceba7487d58 Mon Sep 17 00:00:00 2001 From: Kyle Gach Date: Wed, 1 May 2024 10:25:44 -0600 Subject: [PATCH 82/82] Fix typo in playwright portable stories snippet --- docs/api/portable-stories-playwright.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/api/portable-stories-playwright.md b/docs/api/portable-stories-playwright.md index d043ca7abd59..6c1f2764bb34 100644 --- a/docs/api/portable-stories-playwright.md +++ b/docs/api/portable-stories-playwright.md @@ -219,7 +219,7 @@ If your stories behave differently based on [globals](../essentials/toolbars-and ```tsx // Button.portable.ts -import { test } from 'vitest'; +import { test } from 'playwright'; import { render } from '@testing-library/react'; import { composeStory } from '@storybook/react';