From 8264edd0c76b3029453e4db64a624c742601a2d6 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Thu, 23 May 2024 16:32:36 +0200 Subject: [PATCH 01/11] Merge pull request #27256 from storybookjs/valentin/fix-hmr-issue-in-preview Vite: Fix HMR issue for Storybook preview files (cherry picked from commit 6c04751b8214f7ffb1297310472122293960bacb) --- .../builder-vite/src/codegen-modern-iframe-script.ts | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/code/builders/builder-vite/src/codegen-modern-iframe-script.ts b/code/builders/builder-vite/src/codegen-modern-iframe-script.ts index 39109c148df4..2d5da031e73d 100644 --- a/code/builders/builder-vite/src/codegen-modern-iframe-script.ts +++ b/code/builders/builder-vite/src/codegen-modern-iframe-script.ts @@ -21,9 +21,13 @@ export async function generateModernIframeScriptCode(options: Options, projectRo // and the HMR handler. We don't use the hot.accept callback params because only the changed // modules are provided, the rest are null. We can just re-import everything again in that case. const getPreviewAnnotationsFunction = ` - const getProjectAnnotations = async () => { + const getProjectAnnotations = async (hmrPreviewAnnotationModules = []) => { const configs = await Promise.all([${previewAnnotationURLs - .map((previewAnnotation) => `import('${previewAnnotation}')`) + .map( + (previewAnnotation, index) => + // Prefer the updated module from an HMR update, otherwise import the original module + `hmrPreviewAnnotationModules.at(${index}) ?? import('${previewAnnotation}')` + ) .join(',\n')}]) return composeConfigs(configs); }`; @@ -45,10 +49,10 @@ export async function generateModernIframeScriptCode(options: Options, projectRo window.__STORYBOOK_PREVIEW__.onStoriesChanged({ importFn: newModule.importFn }); }); - import.meta.hot.accept(${JSON.stringify(previewAnnotationURLs)}, () => { + import.meta.hot.accept(${JSON.stringify(previewAnnotationURLs)}, (previewAnnotationModules) => { ${getPreviewAnnotationsFunction} // getProjectAnnotations has changed so we need to patch the new one in - window.__STORYBOOK_PREVIEW__.onGetProjectAnnotationsChanged({ getProjectAnnotations }); + window.__STORYBOOK_PREVIEW__.onGetProjectAnnotationsChanged({ getProjectAnnotations: () => getProjectAnnotations(previewAnnotationModules) }); }); }`.trim(); }; From b6830a945ebc505c78c54f935ce54103fd28160b Mon Sep 17 00:00:00 2001 From: jonniebigodes Date: Thu, 23 May 2024 15:49:33 +0100 Subject: [PATCH 02/11] Merge pull request #27199 from AlirezaEbrahimkhani/fix-preview-code-snippets Docs: Correct typos in vue preview docs (cherry picked from commit 337192acf33341e96b179abe65e090817db721a5) --- docs/snippets/vue/storybook-preview-use-global-type.3.js.mdx | 2 +- docs/snippets/vue/storybook-preview-use-global-type.3.ts.mdx | 2 +- docs/snippets/vue/storybook-preview-use-global-type.ts-4-9.mdx | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/snippets/vue/storybook-preview-use-global-type.3.js.mdx b/docs/snippets/vue/storybook-preview-use-global-type.3.js.mdx index b95a6a0a5d05..81b2c59978a8 100644 --- a/docs/snippets/vue/storybook-preview-use-global-type.3.js.mdx +++ b/docs/snippets/vue/storybook-preview-use-global-type.3.js.mdx @@ -15,7 +15,7 @@ setup((app) => { const preview = { decorators: [ (story, context) => { - const theme = context.globals.theme || 'light''; + const theme = context.globals.theme || 'light'; return { components: { story, VApp }, template: ` diff --git a/docs/snippets/vue/storybook-preview-use-global-type.3.ts.mdx b/docs/snippets/vue/storybook-preview-use-global-type.3.ts.mdx index 7486233502f4..4a608b096659 100644 --- a/docs/snippets/vue/storybook-preview-use-global-type.3.ts.mdx +++ b/docs/snippets/vue/storybook-preview-use-global-type.3.ts.mdx @@ -16,7 +16,7 @@ setup((app) => { const preview: Preview = { decorators: [ (story, context) => { - const theme = context.globals.theme || 'light''; + const theme = context.globals.theme || 'light'; return { components: { story, VApp }, template: ` diff --git a/docs/snippets/vue/storybook-preview-use-global-type.ts-4-9.mdx b/docs/snippets/vue/storybook-preview-use-global-type.ts-4-9.mdx index 7486233502f4..4a608b096659 100644 --- a/docs/snippets/vue/storybook-preview-use-global-type.ts-4-9.mdx +++ b/docs/snippets/vue/storybook-preview-use-global-type.ts-4-9.mdx @@ -16,7 +16,7 @@ setup((app) => { const preview: Preview = { decorators: [ (story, context) => { - const theme = context.globals.theme || 'light''; + const theme = context.globals.theme || 'light'; return { components: { story, VApp }, template: ` From 8c488c803fdb26caf3d2258c07c3d03c07804aa4 Mon Sep 17 00:00:00 2001 From: jonniebigodes Date: Thu, 23 May 2024 16:00:03 +0100 Subject: [PATCH 03/11] Merge pull request #27150 from Girgetto/patch-1 Docs: Update Bitovi GitHub Actions snippet (cherry picked from commit 99882a3c6fdf8368ba140296919bb595344b2b60) --- docs/snippets/common/ghp-github-action.yml.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/snippets/common/ghp-github-action.yml.mdx b/docs/snippets/common/ghp-github-action.yml.mdx index d4c9b83a6bb5..6efff5954e66 100644 --- a/docs/snippets/common/ghp-github-action.yml.mdx +++ b/docs/snippets/common/ghp-github-action.yml.mdx @@ -30,7 +30,7 @@ jobs: node-version: '16.x' #👇 Add Storybook build and deploy to GitHub Pages as a step in the workflow - - uses: bitovi/github-actions-storybook-to-github-pages@v1.0.1 + - uses: bitovi/github-actions-storybook-to-github-pages@v1.0.3 with: install_command: yarn install # default: npm ci build_command: yarn build-storybook # default: npm run build-storybook From 1db34545b81ef5f585bb7888438e479201ecfd8a Mon Sep 17 00:00:00 2001 From: jonniebigodes Date: Thu, 23 May 2024 16:48:07 +0100 Subject: [PATCH 04/11] Merge pull request #27146 from kongallis/remove-unused-imports Docs: remove unused imports (cherry picked from commit 122a83f8c37076b0916ad614447cc2b9f54722a5) --- docs/snippets/react/button-story-with-args.ts-4-9.mdx | 2 +- docs/snippets/react/button-story-with-args.ts.mdx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/snippets/react/button-story-with-args.ts-4-9.mdx b/docs/snippets/react/button-story-with-args.ts-4-9.mdx index 32e4ac97662a..ddf531e2e8a8 100644 --- a/docs/snippets/react/button-story-with-args.ts-4-9.mdx +++ b/docs/snippets/react/button-story-with-args.ts-4-9.mdx @@ -3,7 +3,7 @@ import type { Meta, StoryObj } from '@storybook/react'; -import { Button, ButtonProps } from './Button'; +import { Button } from './Button'; const meta = { component: Button, diff --git a/docs/snippets/react/button-story-with-args.ts.mdx b/docs/snippets/react/button-story-with-args.ts.mdx index 3464a9dc5c27..bc92ada612e2 100644 --- a/docs/snippets/react/button-story-with-args.ts.mdx +++ b/docs/snippets/react/button-story-with-args.ts.mdx @@ -3,7 +3,7 @@ import type { Meta, StoryObj } from '@storybook/react'; -import { Button, ButtonProps } from './Button'; +import { Button } from './Button'; const meta: Meta = { component: Button, From 9bdbff57cf0733bc9cb3e91ab4590e3e696a14d4 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Fri, 24 May 2024 21:05:30 +0800 Subject: [PATCH 05/11] Merge pull request #27358 from storybookjs/shilman/27352-fix-tags-composition Tags: Fix composition with older storybooks (cherry picked from commit fc915d6c5cc3564600a13a48aba09dcc8903f8b6) --- code/e2e-tests/composition.spec.ts | 43 +++++++ .../src/utils/StoryIndexGenerator.test.ts | 32 ++--- .../src/utils/StoryIndexGenerator.ts | 2 +- .../src/utils/stories-json.test.ts | 2 +- .../src/utils/summarizeIndex.test.ts | 28 ++-- code/lib/manager-api/src/lib/stories.test.ts | 67 +++++++++- code/lib/manager-api/src/lib/stories.ts | 27 +++- code/lib/manager-api/src/tests/refs.test.ts | 26 ++-- .../lib/manager-api/src/tests/stories.test.ts | 120 +++++++++--------- .../preview-web/PreviewWeb.mockdata.ts | 2 +- .../modules/preview-web/PreviewWeb.test.ts | 8 +- .../src/modules/store/StoryIndexStore.test.ts | 4 +- .../src/modules/store/StoryIndexStore.ts | 2 +- .../src/modules/store/StoryStore.test.ts | 14 +- .../src/blocks/external/ExternalPreview.ts | 2 +- scripts/tasks/sandbox-parts.ts | 24 +++- 16 files changed, 278 insertions(+), 125 deletions(-) create mode 100644 code/e2e-tests/composition.spec.ts diff --git a/code/e2e-tests/composition.spec.ts b/code/e2e-tests/composition.spec.ts new file mode 100644 index 000000000000..2cc2e18f42ca --- /dev/null +++ b/code/e2e-tests/composition.spec.ts @@ -0,0 +1,43 @@ +import { test, expect } from '@playwright/test'; +import { SbPage } from './util'; + +const storybookUrl = process.env.STORYBOOK_URL || 'http://localhost:6006'; + +// This is a slow test, and (presumably) framework independent, so only run it on one sandbox +const skipTest = process.env.STORYBOOK_TEMPLATE_NAME !== 'react-vite/default-ts'; + +test.describe('composition', () => { + test.beforeEach(async ({ page }) => { + if (skipTest) return; + await page.goto(storybookUrl); + await new SbPage(page).waitUntilLoaded(); + }); + + test('should correctly filter composed stories', async ({ page }) => { + if (skipTest) return; + + // Expect that composed Storybooks are visible + await expect(await page.getByTitle('Storybook 8.0.0')).toBeVisible(); + await expect(await page.getByTitle('Storybook 7.6.18')).toBeVisible(); + + // Expect composed stories to be available in the sidebar + await page.locator('[id="storybook\\@8\\.0\\.0_components-badge"]').click(); + await expect( + await page.locator('[id="storybook\\@8\\.0\\.0_components-badge--default"]') + ).toBeVisible(); + + await page.locator('[id="storybook\\@7\\.6\\.18_components-badge"]').click(); + await expect( + await page.locator('[id="storybook\\@7\\.6\\.18_components-badge--default"]') + ).toBeVisible(); + + // Expect composed stories `to be available in the search + await page.getByPlaceholder('Find components').fill('Button'); + await expect( + await page.getByRole('option', { name: 'Button Storybook 8.0.0 / @blocks / examples' }) + ).toBeVisible(); + await expect( + await page.getByRole('option', { name: 'Button Storybook 7.6.18 / @blocks / examples' }) + ).toBeVisible(); + }); +}); diff --git a/code/lib/core-server/src/utils/StoryIndexGenerator.test.ts b/code/lib/core-server/src/utils/StoryIndexGenerator.test.ts index 0e51a725470a..ccce3fe481bc 100644 --- a/code/lib/core-server/src/utils/StoryIndexGenerator.test.ts +++ b/code/lib/core-server/src/utils/StoryIndexGenerator.test.ts @@ -88,7 +88,7 @@ describe('StoryIndexGenerator', () => { "type": "story", }, }, - "v": 4, + "v": 5, } `); }); @@ -119,7 +119,7 @@ describe('StoryIndexGenerator', () => { "type": "story", }, }, - "v": 4, + "v": 5, } `); }); @@ -150,7 +150,7 @@ describe('StoryIndexGenerator', () => { "type": "story", }, }, - "v": 4, + "v": 5, } `); }); @@ -192,7 +192,7 @@ describe('StoryIndexGenerator', () => { "type": "story", }, }, - "v": 4, + "v": 5, } `); }); @@ -294,7 +294,7 @@ describe('StoryIndexGenerator', () => { "type": "story", }, }, - "v": 4, + "v": 5, } `); }); @@ -440,7 +440,7 @@ describe('StoryIndexGenerator', () => { "type": "story", }, }, - "v": 4, + "v": 5, } `); }); @@ -593,7 +593,7 @@ describe('StoryIndexGenerator', () => { "type": "story", }, }, - "v": 4, + "v": 5, } `); }); @@ -656,7 +656,7 @@ describe('StoryIndexGenerator', () => { "type": "story", }, }, - "v": 4, + "v": 5, } `); }); @@ -714,7 +714,7 @@ describe('StoryIndexGenerator', () => { "type": "story", }, }, - "v": 4, + "v": 5, } `); }); @@ -771,7 +771,7 @@ describe('StoryIndexGenerator', () => { "type": "story", }, }, - "v": 4, + "v": 5, } `); }); @@ -789,7 +789,7 @@ describe('StoryIndexGenerator', () => { expect(await generator.getIndex()).toMatchInlineSnapshot(` { "entries": {}, - "v": 4, + "v": 5, } `); }); @@ -832,7 +832,7 @@ describe('StoryIndexGenerator', () => { "type": "story", }, }, - "v": 4, + "v": 5, } `); }); @@ -933,7 +933,7 @@ describe('StoryIndexGenerator', () => { "type": "docs", }, }, - "v": 4, + "v": 5, } `); }); @@ -1066,7 +1066,7 @@ describe('StoryIndexGenerator', () => { "type": "docs", }, }, - "v": 4, + "v": 5, } `); }); @@ -1127,7 +1127,7 @@ describe('StoryIndexGenerator', () => { "type": "docs", }, }, - "v": 4, + "v": 5, } `); }); @@ -1176,7 +1176,7 @@ describe('StoryIndexGenerator', () => { "type": "story", }, }, - "v": 4, + "v": 5, } `); }); diff --git a/code/lib/core-server/src/utils/StoryIndexGenerator.ts b/code/lib/core-server/src/utils/StoryIndexGenerator.ts index 34838d1e2eb7..ca8149656992 100644 --- a/code/lib/core-server/src/utils/StoryIndexGenerator.ts +++ b/code/lib/core-server/src/utils/StoryIndexGenerator.ts @@ -592,7 +592,7 @@ export class StoryIndexGenerator { ); this.lastIndex = { - v: 4, + v: 5, entries: sorted, }; diff --git a/code/lib/core-server/src/utils/stories-json.test.ts b/code/lib/core-server/src/utils/stories-json.test.ts index 21a901ada040..0a7a2f4a3b5c 100644 --- a/code/lib/core-server/src/utils/stories-json.test.ts +++ b/code/lib/core-server/src/utils/stories-json.test.ts @@ -263,7 +263,7 @@ describe('useStoriesJson', () => { "type": "story", }, }, - "v": 4, + "v": 5, } `); }, 20_000); diff --git a/code/lib/core-server/src/utils/summarizeIndex.test.ts b/code/lib/core-server/src/utils/summarizeIndex.test.ts index a2702a38a704..8d71317f3918 100644 --- a/code/lib/core-server/src/utils/summarizeIndex.test.ts +++ b/code/lib/core-server/src/utils/summarizeIndex.test.ts @@ -38,7 +38,7 @@ describe('summarizeIndex', () => { it('example stories', () => { expect( summarizeIndex({ - v: 4, + v: 5, entries: { 'example-introduction--docs': { id: 'example-introduction--docs', @@ -146,14 +146,14 @@ describe('summarizeIndex', () => { "playStoryCount": 0, "storiesMdxCount": 0, "storyCount": 0, - "version": 4, + "version": 5, } `); }); it('onboarding stories', () => { expect( summarizeIndex({ - v: 4, + v: 5, entries: { 'example-introduction--docs': { id: 'example-introduction--docs', @@ -204,14 +204,14 @@ describe('summarizeIndex', () => { "playStoryCount": 0, "storiesMdxCount": 0, "storyCount": 0, - "version": 4, + "version": 5, } `); }); it('user stories', () => { expect( summarizeIndex({ - v: 4, + v: 5, entries: { 'stories-renderers-react-errors--story-contains-unrenderable': { id: 'stories-renderers-react-errors--story-contains-unrenderable', @@ -260,14 +260,14 @@ describe('summarizeIndex', () => { "playStoryCount": 0, "storiesMdxCount": 0, "storyCount": 4, - "version": 4, + "version": 5, } `); }); it('pages', () => { expect( summarizeIndex({ - v: 4, + v: 5, entries: { 'example-page--logged-out': { id: 'example-page--logged-out', @@ -317,14 +317,14 @@ describe('summarizeIndex', () => { "playStoryCount": 1, "storiesMdxCount": 0, "storyCount": 1, - "version": 4, + "version": 5, } `); }); it('storiesMdx', () => { expect( summarizeIndex({ - v: 4, + v: 5, entries: { 'stories-renderers-react-react-mdx--docs': { id: 'stories-renderers-react-react-mdx--docs', @@ -374,14 +374,14 @@ describe('summarizeIndex', () => { "playStoryCount": 0, "storiesMdxCount": 1, "storyCount": 3, - "version": 4, + "version": 5, } `); }); it('autodocs', () => { expect( summarizeIndex({ - v: 4, + v: 5, entries: { 'example-button--docs': { id: 'example-button--docs', @@ -432,14 +432,14 @@ describe('summarizeIndex', () => { "playStoryCount": 0, "storiesMdxCount": 0, "storyCount": 0, - "version": 4, + "version": 5, } `); }); it('mdx', () => { expect( summarizeIndex({ - v: 4, + v: 5, entries: { 'example-introduction--docs': { id: 'example-introduction--docs', @@ -483,7 +483,7 @@ describe('summarizeIndex', () => { "playStoryCount": 0, "storiesMdxCount": 0, "storyCount": 0, - "version": 4, + "version": 5, } `); }); diff --git a/code/lib/manager-api/src/lib/stories.test.ts b/code/lib/manager-api/src/lib/stories.test.ts index fcce4a94d874..f8a7c5882cfb 100644 --- a/code/lib/manager-api/src/lib/stories.test.ts +++ b/code/lib/manager-api/src/lib/stories.test.ts @@ -1,6 +1,11 @@ import { describe, it, expect } from 'vitest'; -import type { StoryIndexV2, StoryIndexV3 } from '@storybook/types'; -import { transformStoryIndexV2toV3, transformStoryIndexV3toV4 } from './stories'; +import type { StoryIndexV2, StoryIndexV3, API_PreparedStoryIndex } from '@storybook/types'; +import { + transformStoryIndexV2toV3, + transformStoryIndexV3toV4, + transformStoryIndexV4toV5, +} from './stories'; +import { mockEntries } from '../tests/mockStoriesEntries'; const baseV2: StoryIndexV2['stories'][0] = { id: '1', @@ -151,3 +156,61 @@ describe('transformStoryIndexV3toV4', () => { `); }); }); + +describe('transformStoryIndexV4toV5', () => { + it('transforms a StoryIndexV4 to an API_PreparedStoryIndex correctly', () => { + const indexV4: API_PreparedStoryIndex = { + v: 4, + entries: mockEntries, + }; + + expect(transformStoryIndexV4toV5(indexV4)).toMatchInlineSnapshot(` + { + "entries": { + "component-a--docs": { + "id": "component-a--docs", + "importPath": "./path/to/component-a.ts", + "name": "Docs", + "storiesImports": [], + "tags": [ + "dev", + ], + "title": "Component A", + "type": "docs", + }, + "component-a--story-1": { + "id": "component-a--story-1", + "importPath": "./path/to/component-a.ts", + "name": "Story 1", + "tags": [ + "dev", + ], + "title": "Component A", + "type": "story", + }, + "component-a--story-2": { + "id": "component-a--story-2", + "importPath": "./path/to/component-a.ts", + "name": "Story 2", + "tags": [ + "dev", + ], + "title": "Component A", + "type": "story", + }, + "component-b--story-3": { + "id": "component-b--story-3", + "importPath": "./path/to/component-b.ts", + "name": "Story 3", + "tags": [ + "dev", + ], + "title": "Component B", + "type": "story", + }, + }, + "v": 5, + } + `); + }); +}); diff --git a/code/lib/manager-api/src/lib/stories.ts b/code/lib/manager-api/src/lib/stories.ts index 9d6b1817e677..b409754bb106 100644 --- a/code/lib/manager-api/src/lib/stories.ts +++ b/code/lib/manager-api/src/lib/stories.ts @@ -86,7 +86,7 @@ export const transformSetStoriesStoryDataToPreparedStoryIndex = ( {} as API_PreparedStoryIndex['entries'] ); - return { v: 4, entries }; + return { v: 5, entries }; }; export const transformStoryIndexV2toV3 = (index: StoryIndexV2): StoryIndexV3 => { @@ -139,6 +139,30 @@ export const transformStoryIndexV3toV4 = (index: StoryIndexV3): API_PreparedStor }; }; +/** + * Storybook 8.0 and below did not automatically tag stories with 'dev'. + * Therefore Storybook 8.1 and above would not show composed 8.0 stories by default. + * This function adds the 'dev' tag to all stories in the index to workaround this issue. + */ +export const transformStoryIndexV4toV5 = ( + index: API_PreparedStoryIndex +): API_PreparedStoryIndex => { + return { + v: 5, + entries: Object.values(index.entries).reduce( + (acc, entry) => { + acc[entry.id] = { + ...entry, + tags: entry.tags ? [...entry.tags, 'dev'] : ['dev'], + }; + + return acc; + }, + {} as API_PreparedStoryIndex['entries'] + ), + }; +}; + type ToStoriesHashOptions = { provider: API_Provider; docsOptions: DocsOptions; @@ -157,6 +181,7 @@ export const transformStoryIndexToStoriesHash = ( let index = input; index = index.v === 2 ? transformStoryIndexV2toV3(index as any) : index; index = index.v === 3 ? transformStoryIndexV3toV4(index as any) : index; + index = index.v === 4 ? transformStoryIndexV4toV5(index as any) : index; index = index as API_PreparedStoryIndex; const entryValues = Object.values(index.entries).filter((entry: any) => { diff --git a/code/lib/manager-api/src/tests/refs.test.ts b/code/lib/manager-api/src/tests/refs.test.ts index 950b5e3e7a63..022573616835 100644 --- a/code/lib/manager-api/src/tests/refs.test.ts +++ b/code/lib/manager-api/src/tests/refs.test.ts @@ -448,7 +448,7 @@ describe('Refs API', () => { setupResponses({ indexPrivate: { ok: true, - response: async () => ({ v: 4, entries: {} }), + response: async () => ({ v: 5, entries: {} }), }, storiesPrivate: { ok: true, @@ -506,7 +506,7 @@ describe('Refs API', () => { "index": {}, "internal_index": { "entries": {}, - "v": 4, + "v": 5, }, "title": "Fake", "type": "lazy", @@ -524,7 +524,7 @@ describe('Refs API', () => { "index": {}, "internal_index": { "entries": {}, - "v": 4, + "v": 5, }, "title": "Fake", "type": "lazy", @@ -542,7 +542,7 @@ describe('Refs API', () => { setupResponses({ indexPrivate: { ok: true, - response: async () => ({ v: 4, entries: {} }), + response: async () => ({ v: 5, entries: {} }), }, storiesPrivate: { ok: true, @@ -603,7 +603,7 @@ describe('Refs API', () => { "index": {}, "internal_index": { "entries": {}, - "v": 4, + "v": 5, }, "title": "Fake", "type": "lazy", @@ -622,7 +622,7 @@ describe('Refs API', () => { setupResponses({ indexPrivate: { ok: true, - response: async () => ({ v: 4, entries: {} }), + response: async () => ({ v: 5, entries: {} }), }, storiesPrivate: { ok: true, @@ -684,7 +684,7 @@ describe('Refs API', () => { "index": {}, "internal_index": { "entries": {}, - "v": 4, + "v": 5, }, "title": "Fake", "type": "lazy", @@ -781,7 +781,7 @@ describe('Refs API', () => { setupResponses({ indexPrivate: { ok: true, - response: async () => ({ v: 4, entries: {} }), + response: async () => ({ v: 5, entries: {} }), }, storiesPrivate: { ok: true, @@ -927,7 +927,7 @@ describe('Refs API', () => { setupResponses({ indexPublic: { ok: true, - response: async () => ({ v: 4, entries: {} }), + response: async () => ({ v: 5, entries: {} }), }, storiesPublic: { ok: true, @@ -989,7 +989,7 @@ describe('Refs API', () => { "index": {}, "internal_index": { "entries": {}, - "v": 4, + "v": 5, }, "title": "Fake", "type": "lazy", @@ -1008,7 +1008,7 @@ describe('Refs API', () => { setupResponses({ indexPrivate: { ok: true, - response: async () => ({ v: 4, entries: {} }), + response: async () => ({ v: 5, entries: {} }), }, storiesPrivate: { ok: true, @@ -1070,7 +1070,7 @@ describe('Refs API', () => { "index": {}, "internal_index": { "entries": {}, - "v": 4, + "v": 5, }, "title": "Fake", "type": "lazy", @@ -1206,7 +1206,7 @@ describe('Refs API', () => { describe('setRef', () => { it('can filter', async () => { const index: StoryIndex = { - v: 4, + v: 5, entries: { 'a--1': { id: 'a--1', diff --git a/code/lib/manager-api/src/tests/stories.test.ts b/code/lib/manager-api/src/tests/stories.test.ts index 9adec207d158..7fe6102d0fd4 100644 --- a/code/lib/manager-api/src/tests/stories.test.ts +++ b/code/lib/manager-api/src/tests/stories.test.ts @@ -38,7 +38,7 @@ vi.mock('../lib/events', () => ({ vi.mock('@storybook/global', () => ({ global: { ...globalThis, - fetch: vi.fn(() => ({ json: () => ({ v: 4, entries: mockGetEntries() }) })), + fetch: vi.fn(() => ({ json: () => ({ v: 5, entries: mockGetEntries() }) })), CONFIG_TYPE: 'DEVELOPMENT', }, })); @@ -97,7 +97,7 @@ describe('stories API', () => { const moduleArgs = createMockModuleArgs({}); const { api } = initStories(moduleArgs as unknown as ModuleArgs); const { store } = moduleArgs; - api.setIndex({ v: 4, entries: mockEntries }); + api.setIndex({ v: 5, entries: mockEntries }); const { index } = store.getState(); // We need exact key ordering, even if in theory JS doesn't guarantee it expect(Object.keys(index!)).toEqual([ @@ -139,7 +139,7 @@ describe('stories API', () => { const { api } = initStories(moduleArgs as unknown as ModuleArgs); const { store } = moduleArgs; api.setIndex({ - v: 4, + v: 5, entries: { 'design-system-some-component--my-story': { type: 'story', @@ -176,7 +176,7 @@ describe('stories API', () => { const { api } = initStories(moduleArgs as unknown as ModuleArgs); const { store } = moduleArgs; api.setIndex({ - v: 4, + v: 5, entries: { 'root-first--story-1': { type: 'story', @@ -213,7 +213,7 @@ describe('stories API', () => { const { store, provider } = moduleArgs; provider.getConfig.mockReturnValue({ sidebar: { showRoots: true } }); api.setIndex({ - v: 4, + v: 5, entries: { 'a-b--1': { type: 'story', @@ -252,7 +252,7 @@ describe('stories API', () => { const { store, provider } = moduleArgs; provider.getConfig.mockReturnValue({ sidebar: { showRoots: true } }); api.setIndex({ - v: 4, + v: 5, entries: { 'a--1': { type: 'story', @@ -287,7 +287,7 @@ describe('stories API', () => { const { store, provider } = moduleArgs; provider.getConfig.mockReturnValue({ sidebar: { showRoots: true } }); api.setIndex({ - v: 4, + v: 5, entries: { 'a--1': { type: 'story', title: 'a', name: '1', id: 'a--1', importPath: './a.ts' }, 'b--1': { type: 'story', title: 'b', name: '1', id: 'b--1', importPath: './b.ts' }, @@ -314,7 +314,7 @@ describe('stories API', () => { const { api } = initStories(moduleArgs as unknown as ModuleArgs); const { store } = moduleArgs; api.setIndex({ - v: 4, + v: 5, entries: { 'prepared--story': { type: 'story', @@ -344,7 +344,7 @@ describe('stories API', () => { const moduleArgs = createMockModuleArgs({ fullAPI }); const { api } = initStories(moduleArgs as unknown as ModuleArgs); const { store, provider } = moduleArgs; - api.setIndex({ v: 4, entries: mockEntries }); + api.setIndex({ v: 5, entries: mockEntries }); provider.channel.emit(STORY_PREPARED, { id: 'component-a--story-1', parameters: { a: 'b' }, @@ -357,7 +357,7 @@ describe('stories API', () => { parameters: { a: 'b' }, args: { c: 'd' }, }); - api.setIndex({ v: 4, entries: mockEntries }); + api.setIndex({ v: 5, entries: mockEntries }); // Let the promise/await chain resolve await new Promise((r) => setTimeout(r, 0)); expect(store.getState().index!['component-a--story-1'] as API_StoryEntry).toMatchObject({ @@ -373,7 +373,7 @@ describe('stories API', () => { const { api } = initStories(moduleArgs as unknown as ModuleArgs); const { store } = moduleArgs; - api.setIndex({ v: 4, entries: docsEntries }); + api.setIndex({ v: 5, entries: docsEntries }); const { index } = store.getState(); // We need exact key ordering, even if in theory JS doesn't guarantee it expect(Object.keys(index!)).toEqual([ @@ -398,7 +398,7 @@ describe('stories API', () => { docsOptions: { docsMode: true }, }); const { store } = moduleArgs; - api.setIndex({ v: 4, entries: docsEntries }); + api.setIndex({ v: 5, entries: docsEntries }); const { index } = store.getState(); expect(Object.keys(index!)).toEqual(['component-b', 'component-b--docs']); }); @@ -413,7 +413,7 @@ describe('stories API', () => { initStories(moduleArgs as unknown as ModuleArgs); const { store, provider } = moduleArgs; - provider.channel.emit(SET_INDEX, { v: 4, entries: mockEntries }); + provider.channel.emit(SET_INDEX, { v: 5, entries: mockEntries }); expect(store.getState().index).toEqual( expect.objectContaining({ 'component-a': expect.any(Object), @@ -433,7 +433,7 @@ describe('stories API', () => { getCurrentParameter: vi.fn().mockReturnValue('options'), }); - provider.channel.emit(SET_INDEX, { v: 4, entries: mockEntries }); + provider.channel.emit(SET_INDEX, { v: 5, entries: mockEntries }); expect(fullAPI.setOptions).toHaveBeenCalledWith('options'); }); }); @@ -461,7 +461,7 @@ describe('stories API', () => { status: 200, ok: true, json: () => ({ - v: 4, + v: 5, entries: { 'component-a--story-1': { type: 'story', @@ -512,7 +512,7 @@ describe('stories API', () => { status: 200, ok: true, json: () => ({ - v: 4, + v: 5, entries: { 'component-a--story-1': { type: 'story', @@ -616,7 +616,7 @@ describe('stories API', () => { const { api } = initStories(moduleArgs as unknown as ModuleArgs); const { provider, store } = moduleArgs; - api.setIndex({ v: 4, entries: preparedEntries }); + api.setIndex({ v: 5, entries: preparedEntries }); const { index } = store.getState(); expect((index!['a--1'] as API_StoryEntry).args).toEqual({ a: 'b' }); expect((index!['b--1'] as API_StoryEntry).args).toEqual({ x: 'y' }); @@ -653,7 +653,7 @@ describe('stories API', () => { const listener = vi.fn(); provider.channel.on(UPDATE_STORY_ARGS, listener); - api.setIndex({ v: 4, entries: preparedEntries }); + api.setIndex({ v: 5, entries: preparedEntries }); api.updateStoryArgs({ id: 'a--1' } as API_StoryEntry, { foo: 'bar' }); expect(listener).toHaveBeenCalledWith({ @@ -677,7 +677,7 @@ describe('stories API', () => { const listener = vi.fn(); provider.channel.on(UPDATE_STORY_ARGS, listener); - api.setIndex({ v: 4, entries: preparedEntries }); + api.setIndex({ v: 5, entries: preparedEntries }); api.updateStoryArgs({ id: 'a--1', refId: 'refId' } as API_StoryEntry, { foo: 'bar' }); expect(listener).toHaveBeenCalledWith({ storyId: 'a--1', @@ -695,7 +695,7 @@ describe('stories API', () => { const listener = vi.fn(); provider.channel.on(RESET_STORY_ARGS, listener); - api.setIndex({ v: 4, entries: preparedEntries }); + api.setIndex({ v: 5, entries: preparedEntries }); api.resetStoryArgs({ id: 'a--1' } as API_StoryEntry, ['foo']); expect(listener).toHaveBeenCalledWith({ @@ -719,7 +719,7 @@ describe('stories API', () => { const listener = vi.fn(); provider.channel.on(RESET_STORY_ARGS, listener); - api.setIndex({ v: 4, entries: preparedEntries }); + api.setIndex({ v: 5, entries: preparedEntries }); api.resetStoryArgs({ id: 'a--1', refId: 'refId' } as API_StoryEntry, ['foo']); expect(listener).toHaveBeenCalledWith({ storyId: 'a--1', @@ -738,7 +738,7 @@ describe('stories API', () => { const { api } = initStories(moduleArgs as unknown as ModuleArgs); const { navigate } = moduleArgs; - api.setIndex({ v: 4, entries: navigationEntries }); + api.setIndex({ v: 5, entries: navigationEntries }); api.jumpToStory(1); expect(navigate).toHaveBeenCalledWith('/story/a--2'); @@ -749,7 +749,7 @@ describe('stories API', () => { const { api } = initStories(moduleArgs as unknown as ModuleArgs); const { navigate } = moduleArgs; - api.setIndex({ v: 4, entries: navigationEntries }); + api.setIndex({ v: 5, entries: navigationEntries }); api.jumpToStory(-1); expect(navigate).toHaveBeenCalledWith('/story/a--1'); @@ -764,7 +764,7 @@ describe('stories API', () => { const { api } = initStories(moduleArgs as unknown as ModuleArgs); const { navigate } = moduleArgs; - api.setIndex({ v: 4, entries: navigationEntries }); + api.setIndex({ v: 5, entries: navigationEntries }); api.jumpToStory(1); expect(navigate).not.toHaveBeenCalled(); }); @@ -774,7 +774,7 @@ describe('stories API', () => { const { api } = initStories(moduleArgs as unknown as ModuleArgs); const { navigate } = moduleArgs; - api.setIndex({ v: 4, entries: navigationEntries }); + api.setIndex({ v: 5, entries: navigationEntries }); api.jumpToStory(-1); expect(navigate).not.toHaveBeenCalled(); }); @@ -784,7 +784,7 @@ describe('stories API', () => { const { api } = initStories(moduleArgs as unknown as ModuleArgs); const { navigate } = moduleArgs; - api.setIndex({ v: 4, entries: navigationEntries }); + api.setIndex({ v: 5, entries: navigationEntries }); api.jumpToStory(1); expect(navigate).not.toHaveBeenCalled(); }); @@ -797,7 +797,7 @@ describe('stories API', () => { const { api } = initStories(moduleArgs as unknown as ModuleArgs); const { store } = moduleArgs; - api.setIndex({ v: 4, entries: navigationEntries }); + api.setIndex({ v: 5, entries: navigationEntries }); const result = api.findSiblingStoryId('a--1', store.getState().index!, 1, false); expect(result).toBe('a--2'); }); @@ -807,7 +807,7 @@ describe('stories API', () => { const { api } = initStories(moduleArgs as unknown as ModuleArgs); const { store } = moduleArgs; - api.setIndex({ v: 4, entries: navigationEntries }); + api.setIndex({ v: 5, entries: navigationEntries }); const result = api.findSiblingStoryId('a--1', store.getState().index!, 1, true); expect(result).toBe('b-c--1'); }); @@ -819,7 +819,7 @@ describe('stories API', () => { const { api } = initStories(moduleArgs as unknown as ModuleArgs); const { navigate } = moduleArgs; - api.setIndex({ v: 4, entries: navigationEntries }); + api.setIndex({ v: 5, entries: navigationEntries }); api.jumpToComponent(1); expect(navigate).toHaveBeenCalledWith('/story/b-c--1'); }); @@ -833,7 +833,7 @@ describe('stories API', () => { const { api } = initStories(moduleArgs as unknown as ModuleArgs); const { navigate } = moduleArgs; - api.setIndex({ v: 4, entries: navigationEntries }); + api.setIndex({ v: 5, entries: navigationEntries }); api.jumpToComponent(-1); expect(navigate).toHaveBeenCalledWith('/story/a--1'); }); @@ -847,7 +847,7 @@ describe('stories API', () => { const { api } = initStories(moduleArgs as unknown as ModuleArgs); const { navigate } = moduleArgs; - api.setIndex({ v: 4, entries: navigationEntries }); + api.setIndex({ v: 5, entries: navigationEntries }); api.jumpToComponent(1); expect(navigate).not.toHaveBeenCalled(); }); @@ -857,7 +857,7 @@ describe('stories API', () => { const { api } = initStories(moduleArgs as unknown as ModuleArgs); const { navigate } = moduleArgs; - api.setIndex({ v: 4, entries: navigationEntries }); + api.setIndex({ v: 5, entries: navigationEntries }); api.jumpToComponent(-1); expect(navigate).not.toHaveBeenCalled(); }); @@ -869,7 +869,7 @@ describe('stories API', () => { const { api } = initStories(moduleArgs as unknown as ModuleArgs); const { navigate } = moduleArgs; - api.setIndex({ v: 4, entries: navigationEntries }); + api.setIndex({ v: 5, entries: navigationEntries }); api.selectStory('a--2'); expect(navigate).toHaveBeenCalledWith('/story/a--2'); }); @@ -880,7 +880,7 @@ describe('stories API', () => { const { navigate } = moduleArgs; api.setIndex({ - v: 4, + v: 5, entries: { ...navigationEntries, 'intro--docs': { @@ -902,7 +902,7 @@ describe('stories API', () => { const { api } = initStories(moduleArgs as unknown as ModuleArgs); const { store } = moduleArgs; - api.setIndex({ v: 4, entries: navigationEntries }); + api.setIndex({ v: 5, entries: navigationEntries }); api.selectStory('a--1'); expect(store.getState().settings.lastTrackedStoryId).toBe('a--1'); }); @@ -913,7 +913,7 @@ describe('stories API', () => { const { api } = initStories(moduleArgs as unknown as ModuleArgs); const { navigate } = moduleArgs; - api.setIndex({ v: 4, entries: navigationEntries }); + api.setIndex({ v: 5, entries: navigationEntries }); api.selectStory('a', '2'); expect(navigate).toHaveBeenCalledWith('/story/a--2'); }); @@ -923,7 +923,7 @@ describe('stories API', () => { const { api } = initStories(moduleArgs as unknown as ModuleArgs); const { navigate } = moduleArgs; - api.setIndex({ v: 4, entries: navigationEntries }); + api.setIndex({ v: 5, entries: navigationEntries }); api.selectStory(undefined, '2'); expect(navigate).toHaveBeenCalledWith('/story/a--2'); }); @@ -934,7 +934,7 @@ describe('stories API', () => { const { api } = initStories(moduleArgs as unknown as ModuleArgs); const { navigate } = moduleArgs; - api.setIndex({ v: 4, entries: navigationEntries }); + api.setIndex({ v: 5, entries: navigationEntries }); api.selectStory('a--2'); expect(navigate).toHaveBeenCalledWith('/story/a--2'); }); @@ -944,7 +944,7 @@ describe('stories API', () => { const { api } = initStories(moduleArgs as unknown as ModuleArgs); const { navigate } = moduleArgs; - api.setIndex({ v: 4, entries: navigationEntries }); + api.setIndex({ v: 5, entries: navigationEntries }); api.selectStory('a'); expect(navigate).toHaveBeenCalledWith('/story/a--1'); }); @@ -954,7 +954,7 @@ describe('stories API', () => { const { api } = initStories(moduleArgs as unknown as ModuleArgs); const { navigate } = moduleArgs; - api.setIndex({ v: 4, entries: navigationEntries }); + api.setIndex({ v: 5, entries: navigationEntries }); api.selectStory('b'); expect(navigate).toHaveBeenCalledWith('/story/b-c--1'); }); @@ -964,7 +964,7 @@ describe('stories API', () => { const { api } = initStories(moduleArgs as unknown as ModuleArgs); const { navigate } = moduleArgs; - api.setIndex({ v: 4, entries: navigationEntries }); + api.setIndex({ v: 5, entries: navigationEntries }); api.selectStory('A'); expect(navigate).toHaveBeenCalledWith('/story/a--1'); }); @@ -974,7 +974,7 @@ describe('stories API', () => { const { api } = initStories(moduleArgs as unknown as ModuleArgs); const { navigate } = moduleArgs; - api.setIndex({ v: 4, entries: navigationEntries }); + api.setIndex({ v: 5, entries: navigationEntries }); api.selectStory(); expect(navigate).toHaveBeenCalledWith('/story/a--1'); }); @@ -985,7 +985,7 @@ describe('stories API', () => { const { api } = initStories(moduleArgs as unknown as ModuleArgs); const { navigate } = moduleArgs; - api.setIndex({ v: 4, entries: navigationEntries }); + api.setIndex({ v: 5, entries: navigationEntries }); api.selectStory('b/e', '1'); expect(navigate).toHaveBeenCalledWith('/story/custom-id--1'); }); @@ -995,7 +995,7 @@ describe('stories API', () => { const { api } = initStories(moduleArgs as unknown as ModuleArgs); const { navigate } = moduleArgs; - api.setIndex({ v: 4, entries: navigationEntries }); + api.setIndex({ v: 5, entries: navigationEntries }); api.selectStory('custom-id', '1'); expect(navigate).toHaveBeenCalledWith('/story/custom-id--1'); }); @@ -1005,7 +1005,7 @@ describe('stories API', () => { const { api } = initStories(moduleArgs as unknown as ModuleArgs); const { navigate } = moduleArgs; - api.setIndex({ v: 4, entries: navigationEntries }); + api.setIndex({ v: 5, entries: navigationEntries }); api.selectStory('b/e'); expect(navigate).toHaveBeenCalledWith('/story/custom-id--1'); }); @@ -1019,7 +1019,7 @@ describe('stories API', () => { const { api } = initStories(moduleArgs as unknown as ModuleArgs); const { provider, store } = moduleArgs; - api.setIndex({ v: 4, entries: mockEntries }); + api.setIndex({ v: 5, entries: mockEntries }); provider.channel.emit(STORY_PREPARED, { id: 'component-a--story-1', @@ -1045,7 +1045,7 @@ describe('stories API', () => { const { api } = initStories(moduleArgs as unknown as ModuleArgs); const { provider } = moduleArgs; - api.setIndex({ v: 4, entries: mockEntries }); + api.setIndex({ v: 5, entries: mockEntries }); provider.channel.emit(STORY_PREPARED, { id: 'component-a--story-1', @@ -1068,7 +1068,7 @@ describe('stories API', () => { const { api } = initStories(moduleArgs as unknown as ModuleArgs); const { provider, store } = moduleArgs; - api.setIndex({ v: 4, entries: mockEntries }); + api.setIndex({ v: 5, entries: mockEntries }); provider.channel.emit(DOCS_PREPARED, { id: 'component-a--docs', @@ -1092,7 +1092,7 @@ describe('stories API', () => { const { api } = initStories(moduleArgs as unknown as ModuleArgs); const { provider, store } = moduleArgs; - api.setIndex({ v: 4, entries: mockEntries }); + api.setIndex({ v: 5, entries: mockEntries }); provider.channel.emit(CONFIG_ERROR, { message: 'Failed to run configure' }); const { previewInitialized } = store.getState(); @@ -1104,7 +1104,7 @@ describe('stories API', () => { const { api } = initStories(moduleArgs as unknown as ModuleArgs); const { provider } = moduleArgs; - api.setIndex({ v: 4, entries: mockEntries }); + api.setIndex({ v: 5, entries: mockEntries }); getEventMetadata.mockReturnValueOnce({ sourceType: 'external', @@ -1225,7 +1225,7 @@ describe('stories API', () => { const { api } = initStories(moduleArgs as unknown as ModuleArgs); const { store } = moduleArgs; - await api.setIndex({ v: 4, entries: mockEntries }); + await api.setIndex({ v: 5, entries: mockEntries }); await expect( api.experimental_updateStatus('a-addon-id', { @@ -1279,7 +1279,7 @@ describe('stories API', () => { const { api } = initStories(moduleArgs as unknown as ModuleArgs); const { store } = moduleArgs; - await api.setIndex({ v: 4, entries: mockEntries }); + await api.setIndex({ v: 5, entries: mockEntries }); await expect( api.experimental_updateStatus('a-addon-id', { @@ -1315,7 +1315,7 @@ describe('stories API', () => { const { api } = initStories(moduleArgs as unknown as ModuleArgs); const { store } = moduleArgs; - await api.setIndex({ v: 4, entries: mockEntries }); + await api.setIndex({ v: 5, entries: mockEntries }); await expect( api.experimental_updateStatus('a-addon-id', { @@ -1353,7 +1353,7 @@ describe('stories API', () => { const { api } = initStories(moduleArgs as unknown as ModuleArgs); const { store } = moduleArgs; - await api.setIndex({ v: 4, entries: mockEntries }); + await api.setIndex({ v: 5, entries: mockEntries }); // setup initial state await expect( @@ -1403,7 +1403,7 @@ describe('stories API', () => { const moduleArgs = createMockModuleArgs({}); const { state, api } = initStories(moduleArgs as unknown as ModuleArgs); - await api.setIndex({ v: 4, entries: mockEntries }); + await api.setIndex({ v: 5, entries: mockEntries }); expect(state).toEqual( expect.objectContaining({ @@ -1416,7 +1416,7 @@ describe('stories API', () => { const { api } = initStories(moduleArgs as unknown as ModuleArgs); const { store } = moduleArgs; - await api.setIndex({ v: 4, entries: mockEntries }); + await api.setIndex({ v: 5, entries: mockEntries }); api.experimental_setFilter('myCustomFilter', () => true); @@ -1434,7 +1434,7 @@ describe('stories API', () => { const { api } = initStories(moduleArgs as unknown as ModuleArgs); const { store } = moduleArgs; - await api.setIndex({ v: 4, entries: navigationEntries }); + await api.setIndex({ v: 5, entries: navigationEntries }); await api.experimental_setFilter('myCustomFilter', (item: any) => item.id.startsWith('a')); const { index } = store.getState(); @@ -1484,7 +1484,7 @@ describe('stories API', () => { const { api } = initStories(moduleArgs as unknown as ModuleArgs); const { store } = moduleArgs; - await api.setIndex({ v: 4, entries: navigationEntries }); + await api.setIndex({ v: 5, entries: navigationEntries }); await api.experimental_setFilter( 'myCustomFilter', (item: any) => @@ -1538,10 +1538,10 @@ describe('stories API', () => { const { api } = initStories(moduleArgs as unknown as ModuleArgs); const { store } = moduleArgs; - await api.setIndex({ v: 4, entries: navigationEntries }); + await api.setIndex({ v: 5, entries: navigationEntries }); await api.experimental_setFilter('myCustomFilter', (item: any) => item.id.startsWith('a')); - await api.setIndex({ v: 4, entries: navigationEntries }); + await api.setIndex({ v: 5, entries: navigationEntries }); const { index } = store.getState(); diff --git a/code/lib/preview-api/src/modules/preview-web/PreviewWeb.mockdata.ts b/code/lib/preview-api/src/modules/preview-web/PreviewWeb.mockdata.ts index 88dae40068dc..d2a7f884730d 100644 --- a/code/lib/preview-api/src/modules/preview-web/PreviewWeb.mockdata.ts +++ b/code/lib/preview-api/src/modules/preview-web/PreviewWeb.mockdata.ts @@ -76,7 +76,7 @@ export const projectAnnotations = { export const getProjectAnnotations = vi.fn(() => projectAnnotations as any); export const storyIndex: StoryIndex = { - v: 4, + v: 5, entries: { 'component-one--docs': { type: 'docs', 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 0ba45568789d..60110bc4686b 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 @@ -314,7 +314,7 @@ describe('PreviewWeb', () => { preview.onStoriesChanged({ importFn: newImportFn, storyIndex: { - v: 4, + v: 5, entries: { ...storyIndex.entries, 'component-one--missing': { @@ -369,7 +369,7 @@ describe('PreviewWeb', () => { preview.onStoriesChanged({ importFn: newImportFn, storyIndex: { - v: 4, + v: 5, entries: { ...storyIndex.entries, 'component-one--missing': { @@ -2977,7 +2977,7 @@ describe('PreviewWeb', () => { const newImportFn = vi.fn(async (path) => ({ ...componentOneExports })); const newStoryIndex = { - v: 4, + v: 5, entries: { ...storyIndex.entries, 'component-one--a': { @@ -3174,7 +3174,7 @@ describe('PreviewWeb', () => { }); const newStoryIndex = { - v: 4, + v: 5, entries: { 'component-one--b': storyIndex.entries['component-one--b'], }, diff --git a/code/lib/preview-api/src/modules/store/StoryIndexStore.test.ts b/code/lib/preview-api/src/modules/store/StoryIndexStore.test.ts index f9ec0b6102a3..84c80b5041f2 100644 --- a/code/lib/preview-api/src/modules/store/StoryIndexStore.test.ts +++ b/code/lib/preview-api/src/modules/store/StoryIndexStore.test.ts @@ -6,7 +6,7 @@ import { StoryIndexStore } from './StoryIndexStore'; vi.mock('@storybook/channel-websocket', () => () => ({ on: vi.fn() })); const storyIndex: StoryIndex = { - v: 4, + v: 5, entries: { 'component-one--a': { type: 'story', @@ -34,7 +34,7 @@ const storyIndex: StoryIndex = { const makeStoryIndex = (titlesAndNames: any) => { return { - v: 4, + v: 5, entries: Object.fromEntries( titlesAndNames.map(([title, name]: [any, any]) => { const id = `${title}--${name}`.replace('/', '-'); diff --git a/code/lib/preview-api/src/modules/store/StoryIndexStore.ts b/code/lib/preview-api/src/modules/store/StoryIndexStore.ts index 803e96553586..b56074778f6b 100644 --- a/code/lib/preview-api/src/modules/store/StoryIndexStore.ts +++ b/code/lib/preview-api/src/modules/store/StoryIndexStore.ts @@ -24,7 +24,7 @@ const getImportPathMap = memoize(1)((entries: StoryIndex['entries']) => export class StoryIndexStore { entries: StoryIndex['entries']; - constructor({ entries }: StoryIndex = { v: 4, entries: {} }) { + constructor({ entries }: StoryIndex = { v: 5, entries: {} }) { this.entries = entries; } 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 5df413e09ceb..51d7664b468d 100644 --- a/code/lib/preview-api/src/modules/store/StoryStore.test.ts +++ b/code/lib/preview-api/src/modules/store/StoryStore.test.ts @@ -49,7 +49,7 @@ const projectAnnotations: ProjectAnnotations = { }; const storyIndex: StoryIndex = { - v: 4, + v: 5, entries: { 'component-one--a': { type: 'story', @@ -183,7 +183,7 @@ describe('StoryStore', () => { expect(prepareStory).toHaveBeenCalledTimes(1); // The stories are no longer in the index - await store.onStoriesChanged({ storyIndex: { v: 4, entries: {} } }); + await store.onStoriesChanged({ storyIndex: { v: 5, entries: {} } }); await expect(store.loadStory({ storyId: 'component-one--a' })).rejects.toThrow(); @@ -202,7 +202,7 @@ describe('StoryStore', () => { // Add a new story to the index that isn't different await store.onStoriesChanged({ storyIndex: { - v: 4, + v: 5, entries: { ...storyIndex.entries, 'new-component--story': { @@ -233,7 +233,7 @@ describe('StoryStore', () => { await store.onStoriesChanged({ importFn: newImportFn, storyIndex: { - v: 4, + v: 5, entries: { 'component-one--a': { type: 'story', @@ -262,7 +262,7 @@ describe('StoryStore', () => { await store.onStoriesChanged({ importFn: newImportFn, storyIndex: { - v: 4, + v: 5, entries: { 'component-one--a': { type: 'story', @@ -334,7 +334,7 @@ describe('StoryStore', () => { it('returns them in the order they are in the index, not the file', async () => { const reversedIndex = { - v: 4, + v: 5, entries: { 'component-one--b': storyIndex.entries['component-one--b'], 'component-one--a': storyIndex.entries['component-one--a'], @@ -587,7 +587,7 @@ describe('StoryStore', () => { it('does not include (modern) docs entries ever', async () => { const unnattachedStoryIndex: StoryIndex = { - v: 4, + v: 5, entries: { ...storyIndex.entries, 'introduction--docs': { diff --git a/code/ui/blocks/src/blocks/external/ExternalPreview.ts b/code/ui/blocks/src/blocks/external/ExternalPreview.ts index bb6fc24764f2..203ac14ee3a0 100644 --- a/code/ui/blocks/src/blocks/external/ExternalPreview.ts +++ b/code/ui/blocks/src/blocks/external/ExternalPreview.ts @@ -31,7 +31,7 @@ export class ExternalPreview extends Prev private titles = new ConstantMap('title-'); - private storyIndex: StoryIndex = { v: 4, entries: {} }; + private storyIndex: StoryIndex = { v: 5, entries: {} }; private moduleExportsByImportPath: Record = {}; diff --git a/scripts/tasks/sandbox-parts.ts b/scripts/tasks/sandbox-parts.ts index bee4513a4326..d4042b130b42 100644 --- a/scripts/tasks/sandbox-parts.ts +++ b/scripts/tasks/sandbox-parts.ts @@ -282,6 +282,23 @@ function addStoriesEntry(mainConfig: ConfigFile, path: string, disableDocs: bool mainConfig.setFieldValue(['stories'], [...stories, entry]); } +// Add refs to older versions of storybook to test out composition +function addRefs(mainConfig: ConfigFile) { + const refs = mainConfig.getFieldValue(['refs']) as Record; + + mainConfig.setFieldValue(['refs'], { + ...refs, + 'storybook@8.0.0': { + title: 'Storybook 8.0.0', + url: 'https://635781f3500dd2c49e189caf-gckybvsekn.chromatic.com/', + }, + 'storybook@7.6.18': { + title: 'Storybook 7.6.18', + url: 'https://635781f3500dd2c49e189caf-oljwjdrftz.chromatic.com/', + }, + } as Record); +} + function getStoriesFolderWithVariant(variant?: string, folder = 'stories') { return variant ? `${folder}_${variant}` : folder; } @@ -516,9 +533,14 @@ export const addStories: Task['run'] = async ( await writeConfig(mainConfig); }; -export const extendMain: Task['run'] = async ({ template, sandboxDir }, { disableDocs }) => { +export const extendMain: Task['run'] = async ({ template, sandboxDir, key }, { disableDocs }) => { logger.log('📝 Extending main.js'); const mainConfig = await readMainConfig({ cwd: sandboxDir }); + + if (key === 'react-vite/default-ts') { + addRefs(mainConfig); + } + const templateConfig = template.modifications?.mainConfig || {}; const configToAdd = { ...templateConfig, From 1cd53b8e0795ec1ab39b02b809269b4f49828e5d Mon Sep 17 00:00:00 2001 From: jonniebigodes Date: Fri, 24 May 2024 14:53:20 +0100 Subject: [PATCH 06/11] Merge pull request #27350 from storybookjs/docs_test_runner_timeout_option Docs: Test runner add missing flag to the CLI options (cherry picked from commit 02b76192ed73b74331afb48ace761f497a2ffa30) --- docs/writing-tests/test-runner.md | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/docs/writing-tests/test-runner.md b/docs/writing-tests/test-runner.md index 6a39b2362ad3..759111e8ad9d 100644 --- a/docs/writing-tests/test-runner.md +++ b/docs/writing-tests/test-runner.md @@ -94,6 +94,7 @@ If you're already using any of those flags in your project, you should be able t | `--url` | Define the URL to run tests in. Useful for custom Storybook URLs
`test-storybook --url http://the-storybook-url-here.com` | | `--browsers` | Define browsers to run tests in. One or multiple of: chromium, firefox, webkit
`test-storybook --browsers firefox chromium` | | `--maxWorkers [amount]` | Specifies the maximum number of workers the worker-pool will spawn for running tests
`test-storybook --maxWorkers=2` | +| `--testTimeout [amount]` | Defines the maximum time in milliseconds that a test can run before it is automatically marked as failed. Useful for long-running tests
`test-storybook --testTimeout=60000` | | `--no-cache` | Disable the cache
`test-storybook --no-cache` | | `--clearCache` | Deletes the Jest cache directory and then exits without running tests
`test-storybook --clearCache` | | `--verbose` | Display individual test results with the test suite hierarchy
`test-storybook --verbose` | @@ -202,12 +203,12 @@ The test-runner renders a story and executes its [play function](../writing-stor The test-runner exports test hooks that can be overridden globally to enable use cases like visual or DOM snapshots. These hooks give you access to the test lifecycle _before_ and _after_ the story is rendered. Listed below are the available hooks and an overview of how to use them. -| Hook | Description | -| ----------- | ------------------------------------------------------------------------------------------------------------ | -| `prepare` | Prepares the browser for tests
`async prepare({ page, browserContext, testRunnerConfig }) {}` | -| `setup` | Executes once before all the tests run
`setup() {}` | +| Hook | Description | +| ----------- | --------------------------------------------------------------------------------------------------------------- | +| `prepare` | Prepares the browser for tests
`async prepare({ page, browserContext, testRunnerConfig }) {}` | +| `setup` | Executes once before all the tests run
`setup() {}` | | `preVisit` | Executes before a story is initially visited and rendered in the browser
`async preVisit(page, context) {}` | -| `postVisit` | Executes after the story is visited and fully rendered
`async postVisit(page, context) {}` | +| `postVisit` | Executes after the story is visited and fully rendered
`async postVisit(page, context) {}` | From fba174b87902497eedcb413e059a118c9dd1963d Mon Sep 17 00:00:00 2001 From: jonniebigodes Date: Fri, 24 May 2024 21:23:02 +0100 Subject: [PATCH 07/11] Merge pull request #27365 from storybookjs/docs_fix_msw_snippets Docs: Fix MSW snippets (cherry picked from commit d5a20abb6bb190074878d915e0bd744893b3debe) --- .../angular/msw-addon-configure-handlers-graphql.ts.mdx | 4 ++-- .../angular/msw-addon-configure-handlers-http.ts.mdx | 2 +- .../common/msw-addon-configure-handlers-http.js.mdx | 2 +- .../common/msw-addon-configure-handlers-http.ts-4-9.mdx | 2 +- .../common/msw-addon-configure-handlers-http.ts.mdx | 2 +- .../react/msw-addon-configure-handlers-graphql.js.mdx | 4 ++-- .../react/msw-addon-configure-handlers-graphql.ts-4-9.mdx | 4 ++-- .../react/msw-addon-configure-handlers-graphql.ts.mdx | 4 ++-- .../svelte/msw-addon-configure-handlers-graphql.js.mdx | 4 ++-- .../msw-addon-configure-handlers-graphql.ts-4-9.mdx | 4 ++-- .../svelte/msw-addon-configure-handlers-graphql.ts.mdx | 4 ++-- .../vue/msw-addon-configure-handlers-graphql.js.mdx | 4 ++-- .../vue/msw-addon-configure-handlers-graphql.ts-4-9.mdx | 4 ++-- .../vue/msw-addon-configure-handlers-graphql.ts.mdx | 4 ++-- .../vue/storybook-preview-use-global-type.3.js.mdx | 6 +++--- .../vue/storybook-preview-use-global-type.3.ts.mdx | 8 ++++---- .../vue/storybook-preview-use-global-type.ts-4-9.mdx | 8 ++++---- .../msw-addon-configure-handlers-http.js.mdx | 2 +- .../msw-addon-configure-handlers-http.ts.mdx | 2 +- 19 files changed, 37 insertions(+), 37 deletions(-) diff --git a/docs/snippets/angular/msw-addon-configure-handlers-graphql.ts.mdx b/docs/snippets/angular/msw-addon-configure-handlers-graphql.ts.mdx index 23599c6494de..cfbd8a0cb731 100644 --- a/docs/snippets/angular/msw-addon-configure-handlers-graphql.ts.mdx +++ b/docs/snippets/angular/msw-addon-configure-handlers-graphql.ts.mdx @@ -57,7 +57,7 @@ export const MockedSuccess: Story = { msw: { handlers: [ graphql.query('AllInfoQuery', () => { - return new HttpResponse.json({ + return HttpResponse.json({ data: { allInfo: { ...TestData, @@ -76,7 +76,7 @@ export const MockedError: Story = { handlers: [ graphql.query('AllInfoQuery', async () => { await delay(800); - return new HttpResponse.json({ + return HttpResponse.json({ errors: [ { message: 'Access denied', diff --git a/docs/snippets/angular/msw-addon-configure-handlers-http.ts.mdx b/docs/snippets/angular/msw-addon-configure-handlers-http.ts.mdx index 820857b94b48..8ba674db76b5 100644 --- a/docs/snippets/angular/msw-addon-configure-handlers-http.ts.mdx +++ b/docs/snippets/angular/msw-addon-configure-handlers-http.ts.mdx @@ -43,7 +43,7 @@ export const MockedSuccess: Story = { msw: { handlers: [ http.get('https://your-restful-endpoint/', () => { - return new HttpResponse.json(TestData); + return HttpResponse.json(TestData); }), ], }, diff --git a/docs/snippets/common/msw-addon-configure-handlers-http.js.mdx b/docs/snippets/common/msw-addon-configure-handlers-http.js.mdx index cd2138c50a0f..8311b919f53f 100644 --- a/docs/snippets/common/msw-addon-configure-handlers-http.js.mdx +++ b/docs/snippets/common/msw-addon-configure-handlers-http.js.mdx @@ -38,7 +38,7 @@ export const MockedSuccess = { msw: { handlers: [ http.get('https://your-restful-endpoint/', () => { - return new HttpResponse.json(TestData); + return HttpResponse.json(TestData); }), ], }, diff --git a/docs/snippets/common/msw-addon-configure-handlers-http.ts-4-9.mdx b/docs/snippets/common/msw-addon-configure-handlers-http.ts-4-9.mdx index 663a9fd0f1f2..fe6490665088 100644 --- a/docs/snippets/common/msw-addon-configure-handlers-http.ts-4-9.mdx +++ b/docs/snippets/common/msw-addon-configure-handlers-http.ts-4-9.mdx @@ -44,7 +44,7 @@ export const MockedSuccess: Story = { msw: { handlers: [ http.get('https://your-restful-endpoint/', () => { - return new HttpResponse.json(TestData); + return HttpResponse.json(TestData); }), ], }, diff --git a/docs/snippets/common/msw-addon-configure-handlers-http.ts.mdx b/docs/snippets/common/msw-addon-configure-handlers-http.ts.mdx index 26d7ffaae623..935fef3b2ca4 100644 --- a/docs/snippets/common/msw-addon-configure-handlers-http.ts.mdx +++ b/docs/snippets/common/msw-addon-configure-handlers-http.ts.mdx @@ -44,7 +44,7 @@ export const MockedSuccess: Story = { msw: { handlers: [ http.get('https://your-restful-endpoint/', () => { - return new HttpResponse.json(TestData); + return HttpResponse.json(TestData); }), ], }, diff --git a/docs/snippets/react/msw-addon-configure-handlers-graphql.js.mdx b/docs/snippets/react/msw-addon-configure-handlers-graphql.js.mdx index b7964e2d4925..f8aa36d87880 100644 --- a/docs/snippets/react/msw-addon-configure-handlers-graphql.js.mdx +++ b/docs/snippets/react/msw-addon-configure-handlers-graphql.js.mdx @@ -61,7 +61,7 @@ export const MockedSuccess = { msw: { handlers: [ graphql.query('AllInfoQuery', () => { - return new HttpResponse.json({ + return HttpResponse.json({ data: { allInfo: { ...TestData, @@ -80,7 +80,7 @@ export const MockedError = { handlers: [ graphql.query('AllInfoQuery', async () => { await delay(800); - return new HttpResponse.json({ + return HttpResponse.json({ errors: [ { message: 'Access denied', diff --git a/docs/snippets/react/msw-addon-configure-handlers-graphql.ts-4-9.mdx b/docs/snippets/react/msw-addon-configure-handlers-graphql.ts-4-9.mdx index ab5786361bba..5d1047b2a30a 100644 --- a/docs/snippets/react/msw-addon-configure-handlers-graphql.ts-4-9.mdx +++ b/docs/snippets/react/msw-addon-configure-handlers-graphql.ts-4-9.mdx @@ -65,7 +65,7 @@ export const MockedSuccess: Story = { msw: { handlers: [ graphql.query('AllInfoQuery', () => { - return new HttpResponse.json({ + return HttpResponse.json({ data: { allInfo: { ...TestData, @@ -84,7 +84,7 @@ export const MockedError: Story = { handlers: [ graphql.query('AllInfoQuery', async () => { await delay(800); - return new HttpResponse.json({ + return HttpResponse.json({ errors: [ { message: 'Access denied', diff --git a/docs/snippets/react/msw-addon-configure-handlers-graphql.ts.mdx b/docs/snippets/react/msw-addon-configure-handlers-graphql.ts.mdx index 4ffb616b0c66..7e28c12fb043 100644 --- a/docs/snippets/react/msw-addon-configure-handlers-graphql.ts.mdx +++ b/docs/snippets/react/msw-addon-configure-handlers-graphql.ts.mdx @@ -65,7 +65,7 @@ export const MockedSuccess: Story = { msw: { handlers: [ graphql.query('AllInfoQuery', () => { - return new HttpResponse.json({ + return HttpResponse.json({ data: { allInfo: { ...TestData, @@ -84,7 +84,7 @@ export const MockedError: Story = { handlers: [ graphql.query('AllInfoQuery', async () => { await delay(800); - return new HttpResponse.json({ + return HttpResponse.json({ errors: [ { message: 'Access denied', diff --git a/docs/snippets/svelte/msw-addon-configure-handlers-graphql.js.mdx b/docs/snippets/svelte/msw-addon-configure-handlers-graphql.js.mdx index 6c9974f74e53..72ab24c05d6f 100644 --- a/docs/snippets/svelte/msw-addon-configure-handlers-graphql.js.mdx +++ b/docs/snippets/svelte/msw-addon-configure-handlers-graphql.js.mdx @@ -40,7 +40,7 @@ export const MockedSuccess = { msw: { handlers: [ graphql.query('AllInfoQuery', () => { - return new HttpResponse.json({ + return HttpResponse.json({ data: { allInfo: { ...TestData, @@ -59,7 +59,7 @@ export const MockedError = { handlers: [ graphql.query('AllInfoQuery', async () => { await delay(800); - return new HttpResponse.json({ + return HttpResponse.json({ errors: [ { message: 'Access denied', diff --git a/docs/snippets/svelte/msw-addon-configure-handlers-graphql.ts-4-9.mdx b/docs/snippets/svelte/msw-addon-configure-handlers-graphql.ts-4-9.mdx index a099095c28f8..440b47dc992d 100644 --- a/docs/snippets/svelte/msw-addon-configure-handlers-graphql.ts-4-9.mdx +++ b/docs/snippets/svelte/msw-addon-configure-handlers-graphql.ts-4-9.mdx @@ -45,7 +45,7 @@ export const MockedSuccess: Story = { msw: { handlers: [ graphql.query('AllInfoQuery', () => { - return new HttpResponse.json({ + return HttpResponse.json({ data: { allInfo: { ...TestData, @@ -64,7 +64,7 @@ export const MockedError: Story = { handlers: [ graphql.query('AllInfoQuery', async () => { await delay(800); - return new HttpResponse.json({ + return HttpResponse.json({ errors: [ { message: 'Access denied', diff --git a/docs/snippets/svelte/msw-addon-configure-handlers-graphql.ts.mdx b/docs/snippets/svelte/msw-addon-configure-handlers-graphql.ts.mdx index cc9fef5e7cb9..a186c5183bf2 100644 --- a/docs/snippets/svelte/msw-addon-configure-handlers-graphql.ts.mdx +++ b/docs/snippets/svelte/msw-addon-configure-handlers-graphql.ts.mdx @@ -45,7 +45,7 @@ export const MockedSuccess: Story = { msw: { handlers: [ graphql.query('AllInfoQuery', () => { - return new HttpResponse.json({ + return HttpResponse.json({ data: { allInfo: { ...TestData, @@ -64,7 +64,7 @@ export const MockedError: Story = { handlers: [ graphql.query('AllInfoQuery', async () => { await delay(800); - return new HttpResponse.json({ + return HttpResponse.json({ errors: [ { message: 'Access denied', diff --git a/docs/snippets/vue/msw-addon-configure-handlers-graphql.js.mdx b/docs/snippets/vue/msw-addon-configure-handlers-graphql.js.mdx index 137d1b9a37c4..407903cf95c4 100644 --- a/docs/snippets/vue/msw-addon-configure-handlers-graphql.js.mdx +++ b/docs/snippets/vue/msw-addon-configure-handlers-graphql.js.mdx @@ -43,7 +43,7 @@ export const MockedSuccess = { msw: { handlers: [ graphql.query('AllInfoQuery', () => { - return new HttpResponse.json({ + return HttpResponse.json({ data: { allInfo: { ...TestData, @@ -62,7 +62,7 @@ export const MockedError = { handlers: [ graphql.query('AllInfoQuery', async () => { await delay(800); - return new HttpResponse.json({ + return HttpResponse.json({ errors: [ { message: 'Access denied', diff --git a/docs/snippets/vue/msw-addon-configure-handlers-graphql.ts-4-9.mdx b/docs/snippets/vue/msw-addon-configure-handlers-graphql.ts-4-9.mdx index 701fc8dddd30..b85e3d507999 100644 --- a/docs/snippets/vue/msw-addon-configure-handlers-graphql.ts-4-9.mdx +++ b/docs/snippets/vue/msw-addon-configure-handlers-graphql.ts-4-9.mdx @@ -48,7 +48,7 @@ export const MockedSuccess: Story = { msw: { handlers: [ graphql.query('AllInfoQuery', () => { - return new HttpResponse.json({ + return HttpResponse.json({ data: { allInfo: { ...TestData, @@ -67,7 +67,7 @@ export const MockedError: Story = { handlers: [ graphql.query('AllInfoQuery', async () => { await delay(800); - return new HttpResponse.json({ + return HttpResponse.json({ errors: [ { message: 'Access denied', diff --git a/docs/snippets/vue/msw-addon-configure-handlers-graphql.ts.mdx b/docs/snippets/vue/msw-addon-configure-handlers-graphql.ts.mdx index da7551e9474c..56559de2b65a 100644 --- a/docs/snippets/vue/msw-addon-configure-handlers-graphql.ts.mdx +++ b/docs/snippets/vue/msw-addon-configure-handlers-graphql.ts.mdx @@ -48,7 +48,7 @@ export const MockedSuccess: Story = { msw: { handlers: [ graphql.query('AllInfoQuery', () => { - return new HttpResponse.json({ + return HttpResponse.json({ data: { allInfo: { ...TestData, @@ -67,7 +67,7 @@ export const MockedError: Story = { handlers: [ graphql.query('AllInfoQuery', async () => { await delay(800); - return new HttpResponse.json({ + return HttpResponse.json({ errors: [ { message: 'Access denied', diff --git a/docs/snippets/vue/storybook-preview-use-global-type.3.js.mdx b/docs/snippets/vue/storybook-preview-use-global-type.3.js.mdx index 81b2c59978a8..d45c79dad770 100644 --- a/docs/snippets/vue/storybook-preview-use-global-type.3.js.mdx +++ b/docs/snippets/vue/storybook-preview-use-global-type.3.js.mdx @@ -1,11 +1,11 @@ ```js // .storybook/preview.js -import { setup } from "@storybook/vue3"; +import { setup } from '@storybook/vue3'; -import { VApp } from "vuetify/components"; +import { VApp } from 'vuetify/components'; -import { registerPlugins } from "../src/plugins"; +import { registerPlugins } from '../src/plugins'; setup((app) => { // Registers your app's plugins including Vuetify into Storybook diff --git a/docs/snippets/vue/storybook-preview-use-global-type.3.ts.mdx b/docs/snippets/vue/storybook-preview-use-global-type.3.ts.mdx index 4a608b096659..7c8816faf8dc 100644 --- a/docs/snippets/vue/storybook-preview-use-global-type.3.ts.mdx +++ b/docs/snippets/vue/storybook-preview-use-global-type.3.ts.mdx @@ -1,12 +1,12 @@ ```ts // .storybook/preview.ts -import type { Preview } from "@storybook/vue3"; -import { setup } from "@storybook/vue3"; +import type { Preview } from '@storybook/vue3'; +import { setup } from '@storybook/vue3'; -import { VApp } from "vuetify/components"; +import { VApp } from 'vuetify/components'; -import { registerPlugins } from "../src/plugins"; +import { registerPlugins } from '../src/plugins'; setup((app) => { // Registers your app's plugins including Vuetify into Storybook diff --git a/docs/snippets/vue/storybook-preview-use-global-type.ts-4-9.mdx b/docs/snippets/vue/storybook-preview-use-global-type.ts-4-9.mdx index 4a608b096659..7c8816faf8dc 100644 --- a/docs/snippets/vue/storybook-preview-use-global-type.ts-4-9.mdx +++ b/docs/snippets/vue/storybook-preview-use-global-type.ts-4-9.mdx @@ -1,12 +1,12 @@ ```ts // .storybook/preview.ts -import type { Preview } from "@storybook/vue3"; -import { setup } from "@storybook/vue3"; +import type { Preview } from '@storybook/vue3'; +import { setup } from '@storybook/vue3'; -import { VApp } from "vuetify/components"; +import { VApp } from 'vuetify/components'; -import { registerPlugins } from "../src/plugins"; +import { registerPlugins } from '../src/plugins'; setup((app) => { // Registers your app's plugins including Vuetify into Storybook diff --git a/docs/snippets/web-components/msw-addon-configure-handlers-http.js.mdx b/docs/snippets/web-components/msw-addon-configure-handlers-http.js.mdx index d1c3cda8bc9f..fd212d46c43e 100644 --- a/docs/snippets/web-components/msw-addon-configure-handlers-http.js.mdx +++ b/docs/snippets/web-components/msw-addon-configure-handlers-http.js.mdx @@ -36,7 +36,7 @@ export const MockedSuccess = { msw: { handlers: [ http.get('https://your-restful-endpoint/', () => { - return new HttpResponse.json(TestData); + return HttpResponse.json(TestData); }), ], }, diff --git a/docs/snippets/web-components/msw-addon-configure-handlers-http.ts.mdx b/docs/snippets/web-components/msw-addon-configure-handlers-http.ts.mdx index b12fd8f93a41..f92501a7df63 100644 --- a/docs/snippets/web-components/msw-addon-configure-handlers-http.ts.mdx +++ b/docs/snippets/web-components/msw-addon-configure-handlers-http.ts.mdx @@ -41,7 +41,7 @@ export const MockedSuccess: Story = { msw: { handlers: [ http.get('https://your-restful-endpoint/', () => { - return new HttpResponse.json(TestData); + return HttpResponse.json(TestData); }), ], }, From 4af74b6ecdc705de4ef7877d160b4ec5229e7913 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Wed, 22 May 2024 10:50:08 +0200 Subject: [PATCH 08/11] Merge pull request #27225 from storybookjs/valentin/disable-snapshotting-for-stories Build: Exclude stories from snapshotting (cherry picked from commit fb255d9017e1e5e4a5212440ef6052f00df2cfeb) --- code/ui/blocks/src/blocks/Story.stories.tsx | 3 +++ code/ui/blocks/src/components/Story.stories.tsx | 3 +++ 2 files changed, 6 insertions(+) diff --git a/code/ui/blocks/src/blocks/Story.stories.tsx b/code/ui/blocks/src/blocks/Story.stories.tsx index b3f8108feb23..6dcd2bfa9fb7 100644 --- a/code/ui/blocks/src/blocks/Story.stories.tsx +++ b/code/ui/blocks/src/blocks/Story.stories.tsx @@ -171,6 +171,9 @@ export const WithInteractionsAutoplayInParameters: Story = { export const ForceInitialArgs: Story = { ...StoryComponentStories.ForceInitialArgs, + parameters: { + chromatic: { disableSnapshot: true }, + }, args: { of: ButtonStories.Primary, storyExport: ButtonStories.Primary, diff --git a/code/ui/blocks/src/components/Story.stories.tsx b/code/ui/blocks/src/components/Story.stories.tsx index fa1767d747af..b393a7e4614d 100644 --- a/code/ui/blocks/src/components/Story.stories.tsx +++ b/code/ui/blocks/src/components/Story.stories.tsx @@ -82,6 +82,9 @@ export const ForceInitialArgs = { forceInitialArgs: true, renderStoryToElement, }, + parameters: { + chromatic: { disableSnapshot: true }, + }, // test that it ignores updated args by emitting an arg update and assert that it isn't reflected in the DOM play: async ({ args, canvasElement, loaded }: PlayFunctionContext) => { const docsContext = loaded.docsContext as DocsContextProps; From 5b2b0b414edb7fd743647677b466428448b3b693 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Mon, 27 May 2024 15:58:01 +0200 Subject: [PATCH 09/11] Merge pull request #27378 from storybookjs/valentin/fix-svelte-prerelease-sandbox Svelte: Support latest prerelease (cherry picked from commit a38936383e13ab8c61c00ece6cb7a0e10829c562) --- .circleci/config.yml | 33 ++++++++++--------- .../templates/SlotDecorator.svelte | 3 +- .../src/components/PreviewRender.svelte | 3 +- .../src/components/SlotDecorator.svelte | 3 +- code/renderers/svelte/src/render.ts | 2 ++ .../svelte/template/cli/js/Page.stories.js | 4 +-- .../template/cli/ts-3-8/Page.stories.ts | 4 +-- .../template/cli/ts-4-9/Page.stories.ts | 4 +-- .../svelte/template/stories/args.stories.js | 5 ++- 9 files changed, 36 insertions(+), 25 deletions(-) diff --git a/.circleci/config.yml b/.circleci/config.yml index c71bbbbae66b..72adc93ef564 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -8,7 +8,7 @@ parameters: default: "skipped" executors: - sb_node_16_classic: + sb_node_18_classic: parameters: class: description: The Resource class @@ -21,7 +21,7 @@ executors: environment: NODE_OPTIONS: --max_old_space_size=6144 resource_class: <> - sb_node_16_browsers: + sb_node_18_browsers: parameters: class: description: The Resource class @@ -99,7 +99,7 @@ jobs: pretty-docs: executor: class: medium - name: sb_node_16_classic + name: sb_node_18_classic steps: - git-shallow-clone/checkout_advanced: clone_options: "--depth 1 --verbose" @@ -125,7 +125,7 @@ jobs: build: executor: class: xlarge - name: sb_node_16_classic + name: sb_node_18_classic steps: - git-shallow-clone/checkout_advanced: clone_options: "--depth 1 --verbose" @@ -169,7 +169,7 @@ jobs: lint: executor: class: large - name: sb_node_16_classic + name: sb_node_18_classic steps: - git-shallow-clone/checkout_advanced: clone_options: "--depth 1 --verbose" @@ -185,7 +185,7 @@ jobs: check: executor: class: xlarge - name: sb_node_16_classic + name: sb_node_18_classic steps: - git-shallow-clone/checkout_advanced: clone_options: "--depth 1 --verbose" @@ -202,7 +202,7 @@ jobs: - report-workflow-on-failure - cancel-workflow-on-failure script-checks: - executor: sb_node_16_browsers + executor: sb_node_18_browsers steps: - git-shallow-clone/checkout_advanced: clone_options: "--depth 1 --verbose" @@ -230,7 +230,7 @@ jobs: unit-tests: executor: class: xlarge - name: sb_node_16_browsers + name: sb_node_18_browsers steps: - git-shallow-clone/checkout_advanced: clone_options: "--depth 1 --verbose" @@ -252,7 +252,7 @@ jobs: coverage: executor: class: small - name: sb_node_16_browsers + name: sb_node_18_browsers steps: - git-shallow-clone/checkout_advanced: clone_options: "--depth 1 --verbose" @@ -263,7 +263,7 @@ jobs: chromatic-internal-storybooks: executor: class: medium+ - name: sb_node_16_browsers + name: sb_node_18_browsers environment: NODE_OPTIONS: --max_old_space_size=6144 steps: @@ -287,13 +287,16 @@ jobs: type: integer executor: class: medium - name: sb_node_16_browsers + name: sb_node_18_browsers parallelism: << parameters.parallelism >> steps: - git-shallow-clone/checkout_advanced: clone_options: "--depth 1 --verbose" - attach_workspace: at: . + - run: + name: Enable Corepack + command: sudo corepack enable yarn - run: name: Creating Sandboxes command: yarn task --task sandbox --template $(yarn get-template --cadence << pipeline.parameters.workflow >> --task sandbox) --no-link --start-from=never --junit @@ -311,7 +314,7 @@ jobs: type: integer executor: class: medium - name: sb_node_16_browsers + name: sb_node_18_browsers parallelism: << parameters.parallelism >> steps: - git-shallow-clone/checkout_advanced: @@ -331,7 +334,7 @@ jobs: type: integer executor: class: large - name: sb_node_16_browsers + name: sb_node_18_browsers parallelism: << parameters.parallelism >> steps: - git-shallow-clone/checkout_advanced: @@ -410,7 +413,7 @@ jobs: type: integer executor: class: medium - name: sb_node_16_browsers + name: sb_node_18_browsers parallelism: << parameters.parallelism >> steps: - checkout @@ -493,7 +496,7 @@ jobs: test-empty-init: executor: class: medium - name: sb_node_16_browsers + name: sb_node_18_browsers parameters: packageManager: type: string diff --git a/code/frameworks/svelte-webpack5/templates/SlotDecorator.svelte b/code/frameworks/svelte-webpack5/templates/SlotDecorator.svelte index bd51e06f4271..ba40b6d039fb 100644 --- a/code/frameworks/svelte-webpack5/templates/SlotDecorator.svelte +++ b/code/frameworks/svelte-webpack5/templates/SlotDecorator.svelte @@ -1,5 +1,6 @@ - + diff --git a/code/renderers/svelte/src/components/SlotDecorator.svelte b/code/renderers/svelte/src/components/SlotDecorator.svelte index 9de64db04c3d..cf5849113a25 100644 --- a/code/renderers/svelte/src/components/SlotDecorator.svelte +++ b/code/renderers/svelte/src/components/SlotDecorator.svelte @@ -1,6 +1,7 @@