From a58289ce3b18f38868d88e2a1efa009ad7d113d9 Mon Sep 17 00:00:00 2001 From: jonniebigodes Date: Thu, 1 Feb 2024 12:38:33 +0000 Subject: [PATCH 1/8] Docs: Remove deprecated props from Canvas Doc Block --- docs/api/doc-block-canvas.md | 48 ------------------------------------ 1 file changed, 48 deletions(-) diff --git a/docs/api/doc-block-canvas.md b/docs/api/doc-block-canvas.md index 4deda4611680..ad84f57929bc 100644 --- a/docs/api/doc-block-canvas.md +++ b/docs/api/doc-block-canvas.md @@ -203,51 +203,3 @@ Type: `boolean` Default: `parameters.docs.canvas.withToolbar` Determines whether to render a toolbar containing tools to interact with the story. - -### `children` - -(⛔️ **Deprecated**) - -Type: `React.ReactNode` - -Expects only [Story](./doc-block-story.md) children. Reference the story with the `of` prop instead. - -### `columns` - -(⛔️ **Deprecated**) - -Type: `number` - -Splits the stories based on the number of defined columns. Multiple stories are not supported. - -### `isColumn` - -(⛔️ **Deprecated**) - -Type: `boolean` - -Displays the stories one above the other. Multiple stories are not supported. - -### `mdxSource` - -(⛔️ **Deprecated**) - -Type: `string` - -Provides source to display. Use [`source.code`](#source) instead. - -### `withSource` - -(⛔️ **Deprecated**) - -Type: `'open' | 'closed' | 'none'` - -Controls the source code block visibility. Use [`sourceState`](#sourcestate) instead. - -### `withToolbar` - -(⛔️ **Deprecated**) - -Type: `boolean` - -Sets the Canvas toolbar visibility. Use [`story.withToolbar`](#story) instead. From 3476e531bc56e3958f8daa7182a308513795a5b2 Mon Sep 17 00:00:00 2001 From: Tom Coleman Date: Fri, 2 Feb 2024 16:04:40 +1100 Subject: [PATCH 2/8] Remove CSF batching, as it isn't required any more for Chromatic Revert "Batch the loading of CSF files for `extract()` etc" This reverts commit 8e52fb71df73605c346a020fc3b9663f1544b53a. --- .../src/modules/store/StoryStore.test.ts | 24 --------- .../src/modules/store/StoryStore.ts | 53 ++++++++----------- 2 files changed, 21 insertions(+), 56 deletions(-) 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 7d796970b560..65f225c8ef6e 100644 --- a/code/lib/preview-api/src/modules/store/StoryStore.test.ts +++ b/code/lib/preview-api/src/modules/store/StoryStore.test.ts @@ -28,14 +28,6 @@ vi.mock('@storybook/global', async (importOriginal) => ({ vi.mock('@storybook/client-logger'); -const createGate = (): [Promise, (_?: any) => void] => { - let openGate = (_?: any) => {}; - const gate = new Promise((resolve) => { - openGate = resolve; - }); - return [gate, openGate]; -}; - const componentOneExports = { default: { title: 'Component One' }, a: { args: { foo: 'a' } }, @@ -435,22 +427,6 @@ describe('StoryStore', () => { './src/ComponentTwo.stories.js', ]); }); - - it('imports in batches', async () => { - const [gate, openGate] = createGate(); - const blockedImportFn = vi.fn(async (file) => { - await gate; - return importFn(file); - }); - const store = new StoryStore(storyIndex, blockedImportFn, projectAnnotations); - - const promise = store.loadAllCSFFiles({ batchSize: 1 }); - expect(blockedImportFn).toHaveBeenCalledTimes(1); - - openGate(); - await promise; - expect(blockedImportFn).toHaveBeenCalledTimes(3); - }); }); describe('extract', () => { diff --git a/code/lib/preview-api/src/modules/store/StoryStore.ts b/code/lib/preview-api/src/modules/store/StoryStore.ts index c779f13ddd2c..34162544ce94 100644 --- a/code/lib/preview-api/src/modules/store/StoryStore.ts +++ b/code/lib/preview-api/src/modules/store/StoryStore.ts @@ -41,9 +41,9 @@ import { prepareContext, } from './csf'; +// TODO -- what are reasonable values for these? const CSF_CACHE_SIZE = 1000; const STORY_CACHE_SIZE = 10000; -const EXTRACT_BATCH_SIZE = 20; export class StoryStore { public storyIndex: StoryIndexStore; @@ -127,38 +127,27 @@ export class StoryStore { return this.processCSFFileWithCache(moduleExports, importPath, title); } - async loadAllCSFFiles({ batchSize = EXTRACT_BATCH_SIZE } = {}): Promise< - StoryStore['cachedCSFFiles'] - > { - const importPaths = Object.entries(this.storyIndex.entries).map(([storyId, { importPath }]) => [ - importPath, - storyId, - ]); - - const loadInBatches = async ( - remainingImportPaths: typeof importPaths - ): Promise<{ importPath: Path; csfFile: CSFFile }[]> => { - if (remainingImportPaths.length === 0) return Promise.resolve([]); - - const csfFilePromiseList = remainingImportPaths - .slice(0, batchSize) - .map(async ([importPath, storyId]) => ({ - importPath, - csfFile: await this.loadCSFFileByStoryId(storyId), - })); - - const firstResults = await Promise.all(csfFilePromiseList); - const restResults = await loadInBatches(remainingImportPaths.slice(batchSize)); - return firstResults.concat(restResults); - }; + async loadAllCSFFiles(): Promise['cachedCSFFiles']> { + const importPaths: Record = {}; + Object.entries(this.storyIndex.entries).forEach(([storyId, { importPath }]) => { + importPaths[importPath] = storyId; + }); - const list = await loadInBatches(importPaths); - return list.reduce( - (acc, { importPath, csfFile }) => { - acc[importPath] = csfFile; - return acc; - }, - {} as Record> + const csfFilePromiseList = Object.entries(importPaths).map(([importPath, storyId]) => + this.loadCSFFileByStoryId(storyId).then((csfFile) => ({ + importPath, + csfFile, + })) + ); + + return Promise.all(csfFilePromiseList).then((list) => + list.reduce( + (acc, { importPath, csfFile }) => { + acc[importPath] = csfFile; + return acc; + }, + {} as Record> + ) ); } From 7977f3b1bafca21aec38d159b7ce9c74479347cb Mon Sep 17 00:00:00 2001 From: Tom Coleman Date: Fri, 2 Feb 2024 16:17:26 +1100 Subject: [PATCH 3/8] Refactor code to use `await` --- .../src/modules/store/StoryStore.ts | 20 +++++++++---------- 1 file changed, 9 insertions(+), 11 deletions(-) diff --git a/code/lib/preview-api/src/modules/store/StoryStore.ts b/code/lib/preview-api/src/modules/store/StoryStore.ts index 34162544ce94..123ea5b984c8 100644 --- a/code/lib/preview-api/src/modules/store/StoryStore.ts +++ b/code/lib/preview-api/src/modules/store/StoryStore.ts @@ -133,21 +133,19 @@ export class StoryStore { importPaths[importPath] = storyId; }); - const csfFilePromiseList = Object.entries(importPaths).map(([importPath, storyId]) => - this.loadCSFFileByStoryId(storyId).then((csfFile) => ({ + const list = await Promise.all( + Object.entries(importPaths).map(async ([importPath, storyId]) => ({ importPath, - csfFile, + csfFile: await this.loadCSFFileByStoryId(storyId), })) ); - return Promise.all(csfFilePromiseList).then((list) => - list.reduce( - (acc, { importPath, csfFile }) => { - acc[importPath] = csfFile; - return acc; - }, - {} as Record> - ) + return list.reduce( + (acc, { importPath, csfFile }) => { + acc[importPath] = csfFile; + return acc; + }, + {} as Record> ); } From 14a66e6c045c1b7f00c41dcef8be49c8537e7e40 Mon Sep 17 00:00:00 2001 From: Tom Coleman Date: Fri, 2 Feb 2024 16:20:04 +1100 Subject: [PATCH 4/8] Added migration note --- MIGRATION.md | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/MIGRATION.md b/MIGRATION.md index b168c0931fcd..15b17681953b 100644 --- a/MIGRATION.md +++ b/MIGRATION.md @@ -28,6 +28,7 @@ - [Removed stories.json](#removed-storiesjson) - [Removed `sb babelrc` command](#removed-sb-babelrc-command) - [Changed interfaces for `@storybook/router` components](#changed-interfaces-for-storybookrouter-components) + - [Extract no longer batches](#extract-no-longer-batches) - [Framework-specific changes](#framework-specific-changes) - [React](#react) - [`react-docgen` component analysis by default](#react-docgen-component-analysis-by-default) @@ -712,6 +713,10 @@ The reasoning behind is to condense and provide some clarity to what's happened The `hideOnly` prop has been removed from the `` component in `@storybook/router`. If needed this can be implemented manually with the `` component. +#### Extract no longer batches + +`Preview.extract()` no longer loads CSF files in batches. This was a workaround for resource limitations that slowed down extract. This shouldn't affect behaviour. + ### Framework-specific changes #### React From ca9a7c36642f26f76ab465827288f3ccef3bc55f Mon Sep 17 00:00:00 2001 From: Vanessa Yuen <6842965+vanessayuenn@users.noreply.github.com> Date: Fri, 2 Feb 2024 10:43:22 +0100 Subject: [PATCH 5/8] Revert "Build: Fix CI" --- code/lib/cli/src/generators/baseGenerator.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/code/lib/cli/src/generators/baseGenerator.ts b/code/lib/cli/src/generators/baseGenerator.ts index dc5593ba6a4d..3c3cae9e5e5e 100644 --- a/code/lib/cli/src/generators/baseGenerator.ts +++ b/code/lib/cli/src/generators/baseGenerator.ts @@ -224,8 +224,8 @@ export async function baseGenerator( extraAddonsToInstall.push( '@storybook/addon-links', - '@storybook/addon-essentials' - // '@chromatic-com/storybook@^1' + '@storybook/addon-essentials', + '@chromatic-com/storybook@^1' ); // added to main.js From 98a575d77bfb3205c59a068eb3d3c6424b765081 Mon Sep 17 00:00:00 2001 From: Daniel Williams Date: Sat, 3 Feb 2024 22:07:07 +0000 Subject: [PATCH 6/8] React Native: Remove watcher from init --- code/lib/cli/src/generators/REACT_NATIVE/index.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/code/lib/cli/src/generators/REACT_NATIVE/index.ts b/code/lib/cli/src/generators/REACT_NATIVE/index.ts index 94724ba1af59..ba0105282803 100644 --- a/code/lib/cli/src/generators/REACT_NATIVE/index.ts +++ b/code/lib/cli/src/generators/REACT_NATIVE/index.ts @@ -47,7 +47,6 @@ const generator = async ( packageManager.addScripts({ 'storybook-generate': 'sb-rn-get-stories', - 'storybook-watch': 'sb-rn-watcher', }); const storybookConfigFolder = '.storybook'; From 8b80246a1cbfd2ca35f46b668c5fca22cd850629 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Mon, 5 Feb 2024 12:08:37 +0100 Subject: [PATCH 7/8] Next.js: Fix frameworkOptions resolution --- code/frameworks/nextjs/src/preset.ts | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/code/frameworks/nextjs/src/preset.ts b/code/frameworks/nextjs/src/preset.ts index 027d5bad0b2b..bb7ac0ddf153 100644 --- a/code/frameworks/nextjs/src/preset.ts +++ b/code/frameworks/nextjs/src/preset.ts @@ -110,10 +110,7 @@ export const babel: PresetProperty<'babel'> = async (baseConfig: TransformOption }; export const webpackFinal: StorybookConfig['webpackFinal'] = async (baseConfig, options) => { - const frameworkOptions = await options.presets.apply<{ options: FrameworkOptions }>( - 'frameworkOptions' - ); - const { options: { nextConfigPath } = {} } = frameworkOptions; + const { nextConfigPath } = await options.presets.apply('frameworkOptions'); const nextConfig = await configureConfig({ baseConfig, nextConfigPath, From 10de51692b0ea4ec40010975ef329d04f7dca832 Mon Sep 17 00:00:00 2001 From: Daniel Williams Date: Mon, 5 Feb 2024 11:21:42 +0000 Subject: [PATCH 8/8] React Native: Fix init fails when package is already installed --- code/lib/cli/src/generators/REACT_NATIVE/index.ts | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/code/lib/cli/src/generators/REACT_NATIVE/index.ts b/code/lib/cli/src/generators/REACT_NATIVE/index.ts index ba0105282803..c8e4582382dd 100644 --- a/code/lib/cli/src/generators/REACT_NATIVE/index.ts +++ b/code/lib/cli/src/generators/REACT_NATIVE/index.ts @@ -14,12 +14,15 @@ const generator = async ( const reactVersion = packageJson.dependencies.react; - const packagesToResolve = [ - // addon-ondevice-controls peer deps + const controlsPeerDependencies = [ 'react-native-safe-area-context', '@react-native-async-storage/async-storage', '@react-native-community/datetimepicker', '@react-native-community/slider', + ].filter((dep) => !packageJson.dependencies[dep] && !packageJson.devDependencies[dep]); + + const packagesToResolve = [ + ...controlsPeerDependencies, '@storybook/addon-ondevice-controls', '@storybook/addon-ondevice-actions', '@storybook/react-native',