From d4504f108058e667afeddf38c4ff9d3dcf0d1e5b Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Thu, 20 Apr 2023 12:00:48 +0200 Subject: [PATCH 001/312] Build: Migrate @storybook/addon-backgrounds to strict-ts --- .../backgrounds/src/containers/BackgroundSelector.tsx | 6 +++--- code/addons/backgrounds/src/helpers/index.ts | 8 ++++---- code/addons/backgrounds/src/types/index.ts | 2 +- code/addons/backgrounds/tsconfig.json | 2 +- 4 files changed, 9 insertions(+), 9 deletions(-) diff --git a/code/addons/backgrounds/src/containers/BackgroundSelector.tsx b/code/addons/backgrounds/src/containers/BackgroundSelector.tsx index 078a2752a5e3..d941f178b788 100644 --- a/code/addons/backgrounds/src/containers/BackgroundSelector.tsx +++ b/code/addons/backgrounds/src/containers/BackgroundSelector.tsx @@ -18,10 +18,10 @@ import { getBackgroundColorByName } from '../helpers'; const createBackgroundSelectorItem = memoize(1000)( ( - id: string, + id: string | null, name: string, value: string, - hasSwatch: boolean, + hasSwatch: boolean | null, change: (arg: { selected: string; name: string }) => void, active: boolean ): BackgroundSelectorItem => ({ @@ -102,7 +102,7 @@ export const BackgroundSelector: FC = memo(function BackgroundSelector() { } const onBackgroundChange = useCallback( - (value: string) => { + (value: string | undefined) => { updateGlobals({ [BACKGROUNDS_PARAM_KEY]: { ...globals[BACKGROUNDS_PARAM_KEY], value } }); }, [backgroundsConfig, globals, updateGlobals] diff --git a/code/addons/backgrounds/src/helpers/index.ts b/code/addons/backgrounds/src/helpers/index.ts index 39065eec6648..c1af13cde407 100644 --- a/code/addons/backgrounds/src/helpers/index.ts +++ b/code/addons/backgrounds/src/helpers/index.ts @@ -15,7 +15,7 @@ export const isReduceMotionEnabled = () => { export const getBackgroundColorByName = ( currentSelectedValue: string, backgrounds: Background[] = [], - defaultName: string + defaultName: string | null | undefined ): string => { if (currentSelectedValue === 'transparent') { return 'transparent'; @@ -52,7 +52,7 @@ export const clearStyles = (selector: string | string[]) => { const clearStyle = (selector: string) => { const element = document.getElementById(selector) as HTMLElement; if (element) { - element.parentElement.removeChild(element); + element.parentElement?.removeChild(element); } }; @@ -70,7 +70,7 @@ export const addGridStyle = (selector: string, css: string) => { } }; -export const addBackgroundStyle = (selector: string, css: string, storyId: string) => { +export const addBackgroundStyle = (selector: string, css: string, storyId: string | null) => { const existingStyle = document.getElementById(selector) as HTMLElement; if (existingStyle) { if (existingStyle.innerHTML !== css) { @@ -85,7 +85,7 @@ export const addBackgroundStyle = (selector: string, css: string, storyId: strin // If grids already exist, we want to add the style tag BEFORE it so the background doesn't override grid const existingGridStyle = document.getElementById(gridStyleSelector) as HTMLElement; if (existingGridStyle) { - existingGridStyle.parentElement.insertBefore(style, existingGridStyle); + existingGridStyle.parentElement?.insertBefore(style, existingGridStyle); } else { document.head.appendChild(style); } diff --git a/code/addons/backgrounds/src/types/index.ts b/code/addons/backgrounds/src/types/index.ts index f1f0285ac319..1439f4cd1329 100644 --- a/code/addons/backgrounds/src/types/index.ts +++ b/code/addons/backgrounds/src/types/index.ts @@ -20,7 +20,7 @@ export interface Background { } export interface BackgroundsParameter { - default?: string; + default?: string | null; disable?: boolean; values: Background[]; } diff --git a/code/addons/backgrounds/tsconfig.json b/code/addons/backgrounds/tsconfig.json index 4c6f20a1be4d..b5a2f9a70918 100644 --- a/code/addons/backgrounds/tsconfig.json +++ b/code/addons/backgrounds/tsconfig.json @@ -2,6 +2,6 @@ "extends": "../../tsconfig.json", "include": ["src/**/*"], "compilerOptions": { - "strict": false + "strict": true } } From 645c7cd335a8a771bceaa18166ee189725d50c9c Mon Sep 17 00:00:00 2001 From: Bruno Bufolin Date: Sun, 23 Apr 2023 18:06:44 -0300 Subject: [PATCH 002/312] fix: adjust tree node alignment when using a different font --- .../src/components/sidebar/TreeNode.tsx | 43 +++++++++++++++---- 1 file changed, 34 insertions(+), 9 deletions(-) diff --git a/code/ui/manager/src/components/sidebar/TreeNode.tsx b/code/ui/manager/src/components/sidebar/TreeNode.tsx index f71c7c0e9202..f869fb53ba67 100644 --- a/code/ui/manager/src/components/sidebar/TreeNode.tsx +++ b/code/ui/manager/src/components/sidebar/TreeNode.tsx @@ -9,7 +9,6 @@ export const CollapseIcon = styled.span<{ isExpanded: boolean }>(({ theme, isExp display: 'inline-block', width: 0, height: 0, - marginTop: 6, marginLeft: 8, marginRight: 5, color: transparentize(0.4, theme.textMutedColor), @@ -41,8 +40,6 @@ const TypeIcon = styled(Icons)<{ docsMode?: boolean }>( { width: 12, height: 12, - padding: 1, - marginTop: 3, marginRight: 5, flex: '0 0 auto', }, @@ -145,6 +142,26 @@ export const RootNode = styled.div(({ theme }) => ({ color: theme.textMutedColor, })); +const Wrapper = styled.div({ + display: 'flex', + alignItems: 'center', +}); + +const InvisibleText = styled.p({ + margin: 0, + width: 0, +}); + +// Make the content have a min-height equal to one line of text +export const IconsWrapper: FunctionComponent<{ children?: React.ReactNode }> = ({ children }) => { + return ( + +   + {children} + + ); +}; + export const GroupNode: FunctionComponent< ComponentProps & { isExpanded?: boolean; isExpandable?: boolean } > = React.memo(function GroupNode({ @@ -155,8 +172,10 @@ export const GroupNode: FunctionComponent< }) { return ( - {isExpandable ? : null} - + + {isExpandable ? : null} + + {children} ); @@ -166,8 +185,10 @@ export const ComponentNode: FunctionComponent> function ComponentNode({ theme, children, isExpanded, isExpandable, isSelected, ...props }) { return ( - {isExpandable && } - + + {isExpandable && } + + {children} ); @@ -179,7 +200,9 @@ export const DocumentNode: FunctionComponent< > = React.memo(function DocumentNode({ theme, children, docsMode, ...props }) { return ( - + + + {children} ); @@ -189,7 +212,9 @@ export const StoryNode: FunctionComponent> = Rea function StoryNode({ theme, children, ...props }) { return ( - + + + {children} ); From d45f0bd93ed0fe5f459caa698bd7df63cfdb180a Mon Sep 17 00:00:00 2001 From: Hikaru Yoshino Date: Wed, 26 Apr 2023 22:37:22 +0900 Subject: [PATCH 003/312] fix: use secondary-based color as background when BranchNode is hovered or focused. --- code/ui/manager/src/components/sidebar/TreeNode.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/ui/manager/src/components/sidebar/TreeNode.tsx b/code/ui/manager/src/components/sidebar/TreeNode.tsx index f71c7c0e9202..3a7b66bb39ee 100644 --- a/code/ui/manager/src/components/sidebar/TreeNode.tsx +++ b/code/ui/manager/src/components/sidebar/TreeNode.tsx @@ -75,7 +75,7 @@ const BranchNode = styled.button<{ fontSize: `${theme.typography.size.s2 - 1}px`, background: 'transparent', '&:hover, &:focus': { - background: theme.background.hoverable, + background: transparentize(0.93, theme.color.secondary), outline: 'none', }, })); From 9093fbbe040a84f9a31f9c345523867bb3a7deb0 Mon Sep 17 00:00:00 2001 From: Hikaru Yoshino Date: Wed, 26 Apr 2023 22:37:50 +0900 Subject: [PATCH 004/312] fix: use secondary-based color as background when LeafNode is hovered or focused. --- code/ui/manager/src/components/sidebar/TreeNode.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/ui/manager/src/components/sidebar/TreeNode.tsx b/code/ui/manager/src/components/sidebar/TreeNode.tsx index 3a7b66bb39ee..6814a3e7bb59 100644 --- a/code/ui/manager/src/components/sidebar/TreeNode.tsx +++ b/code/ui/manager/src/components/sidebar/TreeNode.tsx @@ -92,7 +92,7 @@ const LeafNode = styled.a<{ depth?: number }>(({ theme, depth = 0 }) => ({ background: 'transparent', '&:hover, &:focus': { outline: 'none', - background: theme.background.hoverable, + background: transparentize(0.93, theme.color.secondary), }, '&[data-selected="true"]': { color: theme.color.lightest, From acb8076e88eb7d6e1cb32cbf29af527dcdbeb0f1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jo=C3=A3o=20Nuno=20Mota?= Date: Mon, 1 May 2023 17:29:05 +0100 Subject: [PATCH 005/312] Log stdout and stderr from npm-check-updates separately Prevents commas from being logged on the terminal Adds newline between stdout and stderr --- code/lib/cli/src/upgrade.ts | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/code/lib/cli/src/upgrade.ts b/code/lib/cli/src/upgrade.ts index 6d25ed46c138..5585d4e0d10f 100644 --- a/code/lib/cli/src/upgrade.ts +++ b/code/lib/cli/src/upgrade.ts @@ -193,14 +193,16 @@ export const doUpgrade = async ({ const check = spawnSync('npx', ['npm-check-updates@latest', '/storybook/', ...flags], { stdio: 'pipe', shell: true, - }).output.toString(); - logger.info(check); + }); + logger.info(check.stdout.toString()); + logger.info(check.stderr.toString()); const checkSb = spawnSync('npx', ['npm-check-updates@latest', 'sb', ...flags], { stdio: 'pipe', shell: true, - }).output.toString(); - logger.info(checkSb); + }); + logger.info(checkSb.stdout.toString()); + logger.info(checkSb.stderr.toString()); if (!dryRun) { commandLog(`Installing upgrades`); From 8e477597c522c2d808dc31ec9b0d237ddfa8f36d Mon Sep 17 00:00:00 2001 From: Jeppe Reinhold Date: Tue, 9 May 2023 09:05:16 +0200 Subject: [PATCH 006/312] make sandbox names consistent --- code/lib/cli/src/sandbox-templates.ts | 58 +++++++++++++-------------- 1 file changed, 29 insertions(+), 29 deletions(-) diff --git a/code/lib/cli/src/sandbox-templates.ts b/code/lib/cli/src/sandbox-templates.ts index 6b3bc9b96668..c0072ff0f375 100644 --- a/code/lib/cli/src/sandbox-templates.ts +++ b/code/lib/cli/src/sandbox-templates.ts @@ -66,7 +66,7 @@ export type Template = { const baseTemplates = { 'cra/default-js': { - name: 'Create React App (Javascript)', + name: 'Create React App (JavaScript)', script: 'npx create-react-app .', expected: { // TODO: change this to @storybook/cra once that package is created @@ -77,7 +77,7 @@ const baseTemplates = { skipTasks: ['e2e-tests-dev'], }, 'cra/default-ts': { - name: 'Create React App (Typescript)', + name: 'Create React App (TypeScript)', script: 'npx create-react-app . --template typescript', // Re-enable once https://github.com/storybookjs/storybook/issues/19351 is fixed. skipTasks: ['smoke-test'], @@ -120,7 +120,7 @@ const baseTemplates = { skipTasks: ['e2e-tests-dev'], }, 'react-vite/default-js': { - name: 'React Vite (JS)', + name: 'React Vite (JavaScript)', script: 'npm create vite@latest --yes . -- --template react', expected: { framework: '@storybook/react-vite', @@ -130,7 +130,7 @@ const baseTemplates = { skipTasks: ['e2e-tests-dev'], }, 'react-vite/default-ts': { - name: 'React Vite (TS)', + name: 'React Vite (TypeScript)', script: 'npm create vite@latest --yes . -- --template react-ts', expected: { framework: '@storybook/react-vite', @@ -139,7 +139,7 @@ const baseTemplates = { }, }, 'react-webpack/18-ts': { - name: 'React 18 Webpack5 (TS)', + name: 'React Webpack (TypeScript)', script: 'yarn create webpack5-react .', expected: { framework: '@storybook/react-webpack5', @@ -149,7 +149,7 @@ const baseTemplates = { skipTasks: ['e2e-tests-dev'], }, 'react-webpack/17-ts': { - name: 'React 17 Webpack5 (TS)', + name: 'React v17 Webpack (TypeScript)', script: 'yarn create webpack5-react . --version-react="17" --version-react-dom="17"', expected: { framework: '@storybook/react-webpack5', @@ -159,7 +159,7 @@ const baseTemplates = { skipTasks: ['e2e-tests-dev'], }, 'solid-vite/default-js': { - name: 'SolidJS Vite (JS)', + name: 'SolidJS Vite (JavaScript)', script: 'npx degit solidjs/templates/js .', expected: { framework: 'storybook-solidjs-vite', @@ -171,7 +171,7 @@ const baseTemplates = { skipTasks: ['e2e-tests-dev'], }, 'solid-vite/default-ts': { - name: 'SolidJS Vite (TS)', + name: 'SolidJS Vite (TypeScript)', script: 'npx degit solidjs/templates/ts .', expected: { framework: 'storybook-solidjs-vite', @@ -183,7 +183,7 @@ const baseTemplates = { skipTasks: ['e2e-tests-dev'], }, 'vue3-vite/default-js': { - name: 'Vue3 Vite (JS)', + name: 'Vue v3 Vite (JavaScript)', script: 'npm create vite@latest --yes . -- --template vue', expected: { framework: '@storybook/vue3-vite', @@ -193,7 +193,7 @@ const baseTemplates = { skipTasks: ['e2e-tests-dev'], }, 'vue3-vite/default-ts': { - name: 'Vue3 Vite (TS)', + name: 'Vue v3 Vite (TypeScript)', script: 'npm create vite@latest --yes . -- --template vue-ts', expected: { framework: '@storybook/vue3-vite', @@ -203,7 +203,7 @@ const baseTemplates = { skipTasks: ['e2e-tests-dev'], }, 'vue2-vite/2.7-js': { - name: 'Vue2 Vite (vue 2.7 JS)', + name: 'Vue v2 Vite (JavaScript)', script: 'npx create-vue@2 {{beforeDir}} --default', expected: { framework: '@storybook/vue-vite', @@ -214,7 +214,7 @@ const baseTemplates = { skipTasks: ['smoke-test', 'e2e-tests-dev'], }, 'html-webpack/default': { - name: 'HTML Webpack5', + name: 'HTML Webpack', script: 'yarn create webpack5-html .', expected: { framework: '@storybook/html-webpack5', @@ -224,7 +224,7 @@ const baseTemplates = { skipTasks: ['e2e-tests-dev'], }, 'html-vite/default-js': { - name: 'HTML Vite JS', + name: 'HTML Vite (JavaScript)', script: 'npm create vite@latest --yes . -- --template vanilla && echo "export default {}" > vite.config.js', expected: { @@ -235,7 +235,7 @@ const baseTemplates = { skipTasks: ['e2e-tests-dev'], }, 'html-vite/default-ts': { - name: 'HTML Vite TS', + name: 'HTML Vite (TypeScript)', script: 'npm create vite@latest --yes . -- --template vanilla-ts && echo "export default {}" > vite.config.js', expected: { @@ -246,7 +246,7 @@ const baseTemplates = { skipTasks: ['e2e-tests-dev'], }, 'svelte-vite/default-js': { - name: 'Svelte Vite (JS)', + name: 'Svelte Vite (JavaScript)', script: 'npm create vite@latest --yes . -- --template svelte', expected: { framework: '@storybook/svelte-vite', @@ -256,7 +256,7 @@ const baseTemplates = { skipTasks: ['e2e-tests-dev'], }, 'svelte-vite/default-ts': { - name: 'Svelte Vite (TS)', + name: 'Svelte Vite (TypeScript)', script: 'npm create vite@latest --yes . -- --template svelte-ts', expected: { framework: '@storybook/svelte-vite', @@ -278,7 +278,7 @@ const baseTemplates = { skipTasks: ['e2e-tests-dev'], }, 'angular-cli/default-ts': { - name: 'Angular CLI (latest)', + name: 'Angular CLI', script: 'npx -p @angular/cli ng new angular-latest --directory . --routing=true --minimal=true --style=scss --strict --skip-git --skip-install --package-manager=yarn', expected: { @@ -289,7 +289,7 @@ const baseTemplates = { skipTasks: ['e2e-tests-dev'], }, 'angular-cli/14-ts': { - name: 'Angular CLI (Version 14)', + name: 'Angular CLI v14', script: 'npx -p @angular/cli@14 ng new angular-v14 --directory . --routing=true --minimal=true --style=scss --strict --skip-git --skip-install --package-manager=yarn', expected: { @@ -300,7 +300,7 @@ const baseTemplates = { skipTasks: ['e2e-tests-dev'], }, 'svelte-kit/skeleton-js': { - name: 'Svelte Kit (JS)', + name: 'SvelteKit (JavaScript)', script: 'yarn create svelte-with-args --name=svelte-kit/skeleton-js --directory=. --template=skeleton --types=null --no-prettier --no-eslint --no-playwright --no-vitest', expected: { @@ -311,7 +311,7 @@ const baseTemplates = { skipTasks: ['e2e-tests-dev'], }, 'svelte-kit/skeleton-ts': { - name: 'Svelte Kit (TS)', + name: 'SvelteKit (TypeScript)', script: 'yarn create svelte-with-args --name=svelte-kit/skeleton-ts --directory=. --template=skeleton --types=typescript --no-prettier --no-eslint --no-playwright --no-vitest', expected: { @@ -322,7 +322,7 @@ const baseTemplates = { skipTasks: ['e2e-tests-dev'], }, 'lit-vite/default-js': { - name: 'Lit Vite (JS)', + name: 'Lit Vite (JavaScript)', script: 'npm create vite@latest --yes . -- --template lit && echo "export default {}" > vite.config.js', expected: { @@ -334,7 +334,7 @@ const baseTemplates = { skipTasks: ['smoke-test', 'e2e-tests-dev'], }, 'lit-vite/default-ts': { - name: 'Lit Vite (TS)', + name: 'Lit Vite (TypeScript)', script: 'npm create vite@latest --yes . -- --template lit-ts && echo "export default {}" > vite.config.js', expected: { @@ -346,7 +346,7 @@ const baseTemplates = { skipTasks: ['smoke-test', 'e2e-tests-dev'], }, 'vue-cli/default-js': { - name: 'Vue-CLI (Default JS)', + name: 'Vue v3 CLI (JavaScript)', script: 'npx -p @vue/cli vue create . --default --packageManager=yarn --force --merge', expected: { framework: '@storybook/vue3-webpack5', @@ -357,7 +357,7 @@ const baseTemplates = { skipTasks: ['smoke-test', 'e2e-tests-dev'], }, 'vue-cli/vue2-default-js': { - name: 'Vue-CLI (Vue2 JS)', + name: 'Vue v2 CLI (JavaScript)', script: 'npx -p @vue/cli vue create . --default --packageManager=yarn --force --merge --preset="Default (Vue 2)"', expected: { @@ -369,7 +369,7 @@ const baseTemplates = { skipTasks: ['smoke-test', 'e2e-tests-dev'], }, 'preact-webpack5/default-js': { - name: 'Preact CLI (Default JS)', + name: 'Preact CLI (JavaScript)', script: 'npx preact-cli create default {{beforeDir}} --name preact-app --yarn --no-install', expected: { framework: '@storybook/preact-webpack5', @@ -379,7 +379,7 @@ const baseTemplates = { skipTasks: ['e2e-tests-dev'], }, 'preact-webpack5/default-ts': { - name: 'Preact CLI (Default TS)', + name: 'Preact CLI (TypeScript)', script: 'npx preact-cli create typescript {{beforeDir}} --name preact-app --yarn --no-install', expected: { framework: '@storybook/preact-webpack5', @@ -389,7 +389,7 @@ const baseTemplates = { skipTasks: ['e2e-tests-dev'], }, 'preact-vite/default-js': { - name: 'Preact Vite (JS)', + name: 'Preact Vite (JavaScript)', script: 'npm create vite@latest --yes . -- --template preact', expected: { framework: '@storybook/preact-vite', @@ -399,7 +399,7 @@ const baseTemplates = { skipTasks: ['e2e-tests-dev'], }, 'preact-vite/default-ts': { - name: 'Preact Vite (TS)', + name: 'Preact Vite (TypeScript)', script: 'npm create vite@latest --yes . -- --template preact-ts', expected: { framework: '@storybook/preact-vite', @@ -409,7 +409,7 @@ const baseTemplates = { skipTasks: ['e2e-tests-dev'], }, 'qwik-vite/default-ts': { - name: 'Qwik CLI (Default TS)', + name: 'Qwik CLI (TypeScript)', script: 'yarn create qwik basic {{beforeDir}} --no-install', // TODO: The community template does not provide standard stories, which is required for e2e tests. Reenable once it does. inDevelopment: true, From 9e9458cc02a4da8fbdf03e821c2f918444ce17eb Mon Sep 17 00:00:00 2001 From: Jeppe Reinhold Date: Wed, 10 May 2023 13:37:11 +0200 Subject: [PATCH 007/312] other sandbox naming scheme --- code/lib/cli/src/sandbox-templates.ts | 69 ++++++++++++++------------- 1 file changed, 37 insertions(+), 32 deletions(-) diff --git a/code/lib/cli/src/sandbox-templates.ts b/code/lib/cli/src/sandbox-templates.ts index c0072ff0f375..ae7be781c769 100644 --- a/code/lib/cli/src/sandbox-templates.ts +++ b/code/lib/cli/src/sandbox-templates.ts @@ -13,6 +13,11 @@ export type Cadence = keyof typeof templatesByCadence; export type Template = { /** * Readable name for the template, which will be used for feedback and the status page + * Follows the naming scheme when it makes sense: + * [- ] (JS|TS) + * React Latest - Webpack (TS) + * Next.js v12 (JS) + * Angular CLI Prerelease */ name: string; /** @@ -66,7 +71,7 @@ export type Template = { const baseTemplates = { 'cra/default-js': { - name: 'Create React App (JavaScript)', + name: 'Create React App Latest (JS)', script: 'npx create-react-app .', expected: { // TODO: change this to @storybook/cra once that package is created @@ -77,7 +82,7 @@ const baseTemplates = { skipTasks: ['e2e-tests-dev'], }, 'cra/default-ts': { - name: 'Create React App (TypeScript)', + name: 'Create React App Latest (TS)', script: 'npx create-react-app . --template typescript', // Re-enable once https://github.com/storybookjs/storybook/issues/19351 is fixed. skipTasks: ['smoke-test'], @@ -89,7 +94,7 @@ const baseTemplates = { }, }, 'nextjs/12-js': { - name: 'Next.js v12 (JavaScript)', + name: 'Next.js v12 (JS)', script: 'yarn create next-app {{beforeDir}} -e https://github.com/vercel/next.js/tree/next-12-3-2/examples/hello-world && cd {{beforeDir}} && npm pkg set "dependencies.next"="^12.2.0" && yarn && git add . && git commit --amend --no-edit && cd ..', expected: { @@ -100,7 +105,7 @@ const baseTemplates = { skipTasks: ['e2e-tests-dev'], }, 'nextjs/default-js': { - name: 'Next.js (JavaScript)', + name: 'Next.js Latest (JS)', script: 'yarn create next-app {{beforeDir}} --javascript --eslint', expected: { framework: '@storybook/nextjs', @@ -110,7 +115,7 @@ const baseTemplates = { skipTasks: ['e2e-tests-dev'], }, 'nextjs/default-ts': { - name: 'Next.js (TypeScript)', + name: 'Next.js Latest (TS)', script: 'yarn create next-app {{beforeDir}} --typescript --eslint', expected: { framework: '@storybook/nextjs', @@ -120,7 +125,7 @@ const baseTemplates = { skipTasks: ['e2e-tests-dev'], }, 'react-vite/default-js': { - name: 'React Vite (JavaScript)', + name: 'React Vite (JS)', script: 'npm create vite@latest --yes . -- --template react', expected: { framework: '@storybook/react-vite', @@ -130,7 +135,7 @@ const baseTemplates = { skipTasks: ['e2e-tests-dev'], }, 'react-vite/default-ts': { - name: 'React Vite (TypeScript)', + name: 'React Latest - Vite (TS)', script: 'npm create vite@latest --yes . -- --template react-ts', expected: { framework: '@storybook/react-vite', @@ -139,7 +144,7 @@ const baseTemplates = { }, }, 'react-webpack/18-ts': { - name: 'React Webpack (TypeScript)', + name: 'React Latest - Webpack (TS)', script: 'yarn create webpack5-react .', expected: { framework: '@storybook/react-webpack5', @@ -149,7 +154,7 @@ const baseTemplates = { skipTasks: ['e2e-tests-dev'], }, 'react-webpack/17-ts': { - name: 'React v17 Webpack (TypeScript)', + name: 'React v17 - Webpack (TS)', script: 'yarn create webpack5-react . --version-react="17" --version-react-dom="17"', expected: { framework: '@storybook/react-webpack5', @@ -159,7 +164,7 @@ const baseTemplates = { skipTasks: ['e2e-tests-dev'], }, 'solid-vite/default-js': { - name: 'SolidJS Vite (JavaScript)', + name: 'SolidJS Latest - Vite (JS)', script: 'npx degit solidjs/templates/js .', expected: { framework: 'storybook-solidjs-vite', @@ -171,7 +176,7 @@ const baseTemplates = { skipTasks: ['e2e-tests-dev'], }, 'solid-vite/default-ts': { - name: 'SolidJS Vite (TypeScript)', + name: 'SolidJS Latest - Vite (TS)', script: 'npx degit solidjs/templates/ts .', expected: { framework: 'storybook-solidjs-vite', @@ -183,7 +188,7 @@ const baseTemplates = { skipTasks: ['e2e-tests-dev'], }, 'vue3-vite/default-js': { - name: 'Vue v3 Vite (JavaScript)', + name: 'Vue v3 - Vite (JS)', script: 'npm create vite@latest --yes . -- --template vue', expected: { framework: '@storybook/vue3-vite', @@ -193,7 +198,7 @@ const baseTemplates = { skipTasks: ['e2e-tests-dev'], }, 'vue3-vite/default-ts': { - name: 'Vue v3 Vite (TypeScript)', + name: 'Vue v3 - Vite (TS)', script: 'npm create vite@latest --yes . -- --template vue-ts', expected: { framework: '@storybook/vue3-vite', @@ -203,7 +208,7 @@ const baseTemplates = { skipTasks: ['e2e-tests-dev'], }, 'vue2-vite/2.7-js': { - name: 'Vue v2 Vite (JavaScript)', + name: 'Vue v2 - Vite (JS)', script: 'npx create-vue@2 {{beforeDir}} --default', expected: { framework: '@storybook/vue-vite', @@ -214,7 +219,7 @@ const baseTemplates = { skipTasks: ['smoke-test', 'e2e-tests-dev'], }, 'html-webpack/default': { - name: 'HTML Webpack', + name: 'HTML - Webpack', script: 'yarn create webpack5-html .', expected: { framework: '@storybook/html-webpack5', @@ -224,7 +229,7 @@ const baseTemplates = { skipTasks: ['e2e-tests-dev'], }, 'html-vite/default-js': { - name: 'HTML Vite (JavaScript)', + name: 'HTML - Vite (JS)', script: 'npm create vite@latest --yes . -- --template vanilla && echo "export default {}" > vite.config.js', expected: { @@ -235,7 +240,7 @@ const baseTemplates = { skipTasks: ['e2e-tests-dev'], }, 'html-vite/default-ts': { - name: 'HTML Vite (TypeScript)', + name: 'HTML - Vite (TS)', script: 'npm create vite@latest --yes . -- --template vanilla-ts && echo "export default {}" > vite.config.js', expected: { @@ -246,7 +251,7 @@ const baseTemplates = { skipTasks: ['e2e-tests-dev'], }, 'svelte-vite/default-js': { - name: 'Svelte Vite (JavaScript)', + name: 'Svelte Latest - Vite (JS)', script: 'npm create vite@latest --yes . -- --template svelte', expected: { framework: '@storybook/svelte-vite', @@ -256,7 +261,7 @@ const baseTemplates = { skipTasks: ['e2e-tests-dev'], }, 'svelte-vite/default-ts': { - name: 'Svelte Vite (TypeScript)', + name: 'Svelte Latest - Vite (TS)', script: 'npm create vite@latest --yes . -- --template svelte-ts', expected: { framework: '@storybook/svelte-vite', @@ -267,7 +272,7 @@ const baseTemplates = { skipTasks: ['smoke-test', 'e2e-tests-dev'], }, 'angular-cli/prerelease': { - name: 'Angular CLI (Prerelease)', + name: 'Angular CLI Prerelease', script: 'npx -p @angular/cli@next ng new angular-v16 --directory . --routing=true --minimal=true --style=scss --strict --skip-git --skip-install --package-manager=yarn', expected: { @@ -278,7 +283,7 @@ const baseTemplates = { skipTasks: ['e2e-tests-dev'], }, 'angular-cli/default-ts': { - name: 'Angular CLI', + name: 'Angular CLI Latest', script: 'npx -p @angular/cli ng new angular-latest --directory . --routing=true --minimal=true --style=scss --strict --skip-git --skip-install --package-manager=yarn', expected: { @@ -300,7 +305,7 @@ const baseTemplates = { skipTasks: ['e2e-tests-dev'], }, 'svelte-kit/skeleton-js': { - name: 'SvelteKit (JavaScript)', + name: 'SvelteKit Latest (JS)', script: 'yarn create svelte-with-args --name=svelte-kit/skeleton-js --directory=. --template=skeleton --types=null --no-prettier --no-eslint --no-playwright --no-vitest', expected: { @@ -311,7 +316,7 @@ const baseTemplates = { skipTasks: ['e2e-tests-dev'], }, 'svelte-kit/skeleton-ts': { - name: 'SvelteKit (TypeScript)', + name: 'SvelteKit Latest (TS)', script: 'yarn create svelte-with-args --name=svelte-kit/skeleton-ts --directory=. --template=skeleton --types=typescript --no-prettier --no-eslint --no-playwright --no-vitest', expected: { @@ -322,7 +327,7 @@ const baseTemplates = { skipTasks: ['e2e-tests-dev'], }, 'lit-vite/default-js': { - name: 'Lit Vite (JavaScript)', + name: 'Lit Latest - Vite (JS)', script: 'npm create vite@latest --yes . -- --template lit && echo "export default {}" > vite.config.js', expected: { @@ -334,7 +339,7 @@ const baseTemplates = { skipTasks: ['smoke-test', 'e2e-tests-dev'], }, 'lit-vite/default-ts': { - name: 'Lit Vite (TypeScript)', + name: 'Lit Latest - Vite (TS)', script: 'npm create vite@latest --yes . -- --template lit-ts && echo "export default {}" > vite.config.js', expected: { @@ -346,7 +351,7 @@ const baseTemplates = { skipTasks: ['smoke-test', 'e2e-tests-dev'], }, 'vue-cli/default-js': { - name: 'Vue v3 CLI (JavaScript)', + name: 'Vue v3 CLI (JS)', script: 'npx -p @vue/cli vue create . --default --packageManager=yarn --force --merge', expected: { framework: '@storybook/vue3-webpack5', @@ -357,7 +362,7 @@ const baseTemplates = { skipTasks: ['smoke-test', 'e2e-tests-dev'], }, 'vue-cli/vue2-default-js': { - name: 'Vue v2 CLI (JavaScript)', + name: 'Vue v2 CLI (JS)', script: 'npx -p @vue/cli vue create . --default --packageManager=yarn --force --merge --preset="Default (Vue 2)"', expected: { @@ -369,7 +374,7 @@ const baseTemplates = { skipTasks: ['smoke-test', 'e2e-tests-dev'], }, 'preact-webpack5/default-js': { - name: 'Preact CLI (JavaScript)', + name: 'Preact Latest CLI (JS)', script: 'npx preact-cli create default {{beforeDir}} --name preact-app --yarn --no-install', expected: { framework: '@storybook/preact-webpack5', @@ -379,7 +384,7 @@ const baseTemplates = { skipTasks: ['e2e-tests-dev'], }, 'preact-webpack5/default-ts': { - name: 'Preact CLI (TypeScript)', + name: 'Preact Latest CLI (TS)', script: 'npx preact-cli create typescript {{beforeDir}} --name preact-app --yarn --no-install', expected: { framework: '@storybook/preact-webpack5', @@ -389,7 +394,7 @@ const baseTemplates = { skipTasks: ['e2e-tests-dev'], }, 'preact-vite/default-js': { - name: 'Preact Vite (JavaScript)', + name: 'Preact Latest - Vite (JS)', script: 'npm create vite@latest --yes . -- --template preact', expected: { framework: '@storybook/preact-vite', @@ -399,7 +404,7 @@ const baseTemplates = { skipTasks: ['e2e-tests-dev'], }, 'preact-vite/default-ts': { - name: 'Preact Vite (TypeScript)', + name: 'Preact Latest - Vite (TS)', script: 'npm create vite@latest --yes . -- --template preact-ts', expected: { framework: '@storybook/preact-vite', @@ -409,7 +414,7 @@ const baseTemplates = { skipTasks: ['e2e-tests-dev'], }, 'qwik-vite/default-ts': { - name: 'Qwik CLI (TypeScript)', + name: 'Qwik Latest CLI (TS)', script: 'yarn create qwik basic {{beforeDir}} --no-install', // TODO: The community template does not provide standard stories, which is required for e2e tests. Reenable once it does. inDevelopment: true, From 8c5354b37548952bcbc1565367f2fea23832d5ea Mon Sep 17 00:00:00 2001 From: Daniel Tschinder <231804+danez@users.noreply.github.com> Date: Sun, 30 Apr 2023 11:56:01 +0200 Subject: [PATCH 008/312] update react-docgen to 6.0.0-rc.9 --- code/frameworks/react-vite/package.json | 3 +- .../docgen-handlers/actualNameHandler.ts | 54 +++-- .../react-vite/src/plugins/react-docgen.ts | 28 ++- code/yarn.lock | 212 ++++++++++++++++-- 4 files changed, 240 insertions(+), 57 deletions(-) diff --git a/code/frameworks/react-vite/package.json b/code/frameworks/react-vite/package.json index bddd43ea47b3..71e92185b882 100644 --- a/code/frameworks/react-vite/package.json +++ b/code/frameworks/react-vite/package.json @@ -52,9 +52,8 @@ "@storybook/builder-vite": "7.1.0-alpha.20", "@storybook/react": "7.1.0-alpha.20", "@vitejs/plugin-react": "^3.0.1", - "ast-types": "^0.14.2", "magic-string": "^0.27.0", - "react-docgen": "6.0.0-alpha.3" + "react-docgen": "6.0.0-rc.9" }, "devDependencies": { "@types/node": "^16.0.0", diff --git a/code/frameworks/react-vite/src/plugins/docgen-handlers/actualNameHandler.ts b/code/frameworks/react-vite/src/plugins/docgen-handlers/actualNameHandler.ts index efa6717b47b2..01889ddf9dcf 100644 --- a/code/frameworks/react-vite/src/plugins/docgen-handlers/actualNameHandler.ts +++ b/code/frameworks/react-vite/src/plugins/docgen-handlers/actualNameHandler.ts @@ -9,40 +9,46 @@ * directly from displayNameHandler, using the same approach as babel-plugin-react-docgen. */ -import { namedTypes as t } from 'ast-types'; -import type { NodePath } from 'ast-types/lib/node-path'; -import { getNameOrValue, isReactForwardRefCall } from 'react-docgen/dist/utils'; -import type { Importer } from 'react-docgen/dist/parse'; -import type Documentation from 'react-docgen/dist/Documentation'; +import type { Handler, NodePath, babelTypes as t } from 'react-docgen'; +import { utils } from 'react-docgen'; -export default function actualNameHandler( - documentation: Documentation, - path: NodePath, - importer: Importer -): void { - if (t.ClassDeclaration.check(path.node) || t.FunctionDeclaration.check(path.node)) { - documentation.set('actualName', getNameOrValue(path.get('id'))); +const { getNameOrValue, isReactForwardRefCall } = utils; + +const actualNameHandler: Handler = function actualNameHandler(documentation, componentDefinition) { + if ( + (componentDefinition.isClassDeclaration() || componentDefinition.isFunctionDeclaration()) && + componentDefinition.has('id') + ) { + documentation.set( + 'actualName', + getNameOrValue(componentDefinition.get('id') as NodePath) + ); } else if ( - t.ArrowFunctionExpression.check(path.node) || - t.FunctionExpression.check(path.node) || - isReactForwardRefCall(path, importer) + componentDefinition.isArrowFunctionExpression() || + componentDefinition.isFunctionExpression() || + isReactForwardRefCall(componentDefinition) ) { - let currentPath = path; - while (currentPath.parent) { - if (t.VariableDeclarator.check(currentPath.parent.node)) { - documentation.set('actualName', getNameOrValue(currentPath.parent.get('id'))); + let currentPath: NodePath = componentDefinition; + + while (currentPath.parentPath) { + if (currentPath.parentPath.isVariableDeclarator()) { + documentation.set('actualName', getNameOrValue(currentPath.parentPath.get('id'))); return; } - if (t.AssignmentExpression.check(currentPath.parent.node)) { - const leftPath = currentPath.parent.get('left'); - if (t.Identifier.check(leftPath.node) || t.Literal.check(leftPath.node)) { + if (currentPath.parentPath.isAssignmentExpression()) { + const leftPath = currentPath.parentPath.get('left'); + + if (leftPath.isIdentifier() || leftPath.isLiteral()) { documentation.set('actualName', getNameOrValue(leftPath)); return; } } - currentPath = currentPath.parent; + + currentPath = currentPath.parentPath; } // Could not find an actual name documentation.set('actualName', ''); } -} +}; + +export default actualNameHandler; diff --git a/code/frameworks/react-vite/src/plugins/react-docgen.ts b/code/frameworks/react-vite/src/plugins/react-docgen.ts index 0561456f8618..40a56c78502e 100644 --- a/code/frameworks/react-vite/src/plugins/react-docgen.ts +++ b/code/frameworks/react-vite/src/plugins/react-docgen.ts @@ -1,22 +1,23 @@ import path from 'path'; import { createFilter } from '@rollup/pluginutils'; +import type { Documentation } from 'react-docgen'; import { + ERROR_CODES, parse, - handlers as docgenHandlers, - resolver as docgenResolver, - importers as docgenImporters, + builtinHandlers as docgenHandlers, + builtinResolvers as docgenResolver, + builtinImporters as docgenImporters, } from 'react-docgen'; -import type { DocumentationObject } from 'react-docgen/dist/Documentation'; import MagicString from 'magic-string'; import type { PluginOption } from 'vite'; import actualNameHandler from './docgen-handlers/actualNameHandler'; -type DocObj = DocumentationObject & { actualName: string }; +type DocObj = Documentation & { actualName: string }; // TODO: None of these are able to be overridden, so `default` is aspirational here. const defaultHandlers = Object.values(docgenHandlers).map((handler) => handler); -const defaultResolver = docgenResolver.findAllExportedComponentDefinitions; -const defaultImporter = docgenImporters.makeFsImporter(); +const defaultResolver = new docgenResolver.FindExportedDefinitionsResolver(); +const defaultImporter = docgenImporters.fsImporter; const handlers = [...defaultHandlers, actualNameHandler]; type Options = { @@ -39,8 +40,9 @@ export function reactDocgen({ if (!filter(relPath)) return; try { - // Since we're using `findAllExportedComponentDefinitions`, this will always be an array. - const docgenResults = parse(src, defaultResolver, handlers, { + const docgenResults = parse(src, { + resolver: defaultResolver, + handlers, importer: defaultImporter, filename: id, }) as DocObj[]; @@ -60,9 +62,11 @@ export function reactDocgen({ map: s.generateMap(), }; } catch (e) { - // Usually this is just an error from react-docgen that it couldn't find a component - // Only uncomment for troubleshooting - // console.error(e); + // Ignore the error when react-docgen cannot find a react component + if (e.code === ERROR_CODES.MISSING_DEFINITION) { + return; + } + throw e; } }, }; diff --git a/code/yarn.lock b/code/yarn.lock index 54d9003fe74e..eac5f0119907 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -407,6 +407,13 @@ __metadata: languageName: node linkType: hard +"@babel/compat-data@npm:^7.21.5": + version: 7.21.7 + resolution: "@babel/compat-data@npm:7.21.7" + checksum: cd6bc85364a569cc74bcf0bfdc27161a1cb423c60c624e06f44b53c9e6fe7708bd0af3e389d376aec8ed9b2795907c43d01e4163dbc2a3a3142a2de55464a51d + languageName: node + linkType: hard + "@babel/core@npm:7.19.3": version: 7.19.3 resolution: "@babel/core@npm:7.19.3" @@ -476,6 +483,29 @@ __metadata: languageName: node linkType: hard +"@babel/core@npm:^7.18.9": + version: 7.21.8 + resolution: "@babel/core@npm:7.21.8" + dependencies: + "@ampproject/remapping": ^2.2.0 + "@babel/code-frame": ^7.21.4 + "@babel/generator": ^7.21.5 + "@babel/helper-compilation-targets": ^7.21.5 + "@babel/helper-module-transforms": ^7.21.5 + "@babel/helpers": ^7.21.5 + "@babel/parser": ^7.21.8 + "@babel/template": ^7.20.7 + "@babel/traverse": ^7.21.5 + "@babel/types": ^7.21.5 + convert-source-map: ^1.7.0 + debug: ^4.1.0 + gensync: ^1.0.0-beta.2 + json5: ^2.2.2 + semver: ^6.3.0 + checksum: bf6bb92bd78fb8b6628bb0612ac0915407b996b179e1404108f92ed32972978340b4457b08f2abf86390a58fb51815cab419edb2dbbc8846efc39eaa61b8cde3 + languageName: node + linkType: hard + "@babel/generator@npm:7.21.4, @babel/generator@npm:^7.12.11, @babel/generator@npm:^7.19.3, @babel/generator@npm:^7.21.4, @babel/generator@npm:^7.7.2, @babel/generator@npm:^7.8.7, @babel/generator@npm:~7.21.1": version: 7.21.4 resolution: "@babel/generator@npm:7.21.4" @@ -488,6 +518,18 @@ __metadata: languageName: node linkType: hard +"@babel/generator@npm:^7.21.5": + version: 7.21.5 + resolution: "@babel/generator@npm:7.21.5" + dependencies: + "@babel/types": ^7.21.5 + "@jridgewell/gen-mapping": ^0.3.2 + "@jridgewell/trace-mapping": ^0.3.17 + jsesc: ^2.5.1 + checksum: e98b51440cbbcee68e66c66684b5334f5929dba512067a6c3c1aecc77131b308bf61eca74a5ae1fb73028089d22a188ca2219c364596117f27695102afc18e95 + languageName: node + linkType: hard + "@babel/helper-annotate-as-pure@npm:7.18.6, @babel/helper-annotate-as-pure@npm:^7.18.6": version: 7.18.6 resolution: "@babel/helper-annotate-as-pure@npm:7.18.6" @@ -522,6 +564,21 @@ __metadata: languageName: node linkType: hard +"@babel/helper-compilation-targets@npm:^7.21.5": + version: 7.21.5 + resolution: "@babel/helper-compilation-targets@npm:7.21.5" + dependencies: + "@babel/compat-data": ^7.21.5 + "@babel/helper-validator-option": ^7.21.0 + browserslist: ^4.21.3 + lru-cache: ^5.1.1 + semver: ^6.3.0 + peerDependencies: + "@babel/core": ^7.0.0 + checksum: 36752452eb70d6a6f52f68846344a739089374a97619e5a4857e31e7d067bdad8270efd9dd0dd5dfc483dd2d98bf0c1c6f08e3315fe949e7bfffef67eaf669ad + languageName: node + linkType: hard + "@babel/helper-create-class-features-plugin@npm:^7.18.6, @babel/helper-create-class-features-plugin@npm:^7.21.0": version: 7.21.4 resolution: "@babel/helper-create-class-features-plugin@npm:7.21.4" @@ -575,6 +632,13 @@ __metadata: languageName: node linkType: hard +"@babel/helper-environment-visitor@npm:^7.21.5": + version: 7.21.5 + resolution: "@babel/helper-environment-visitor@npm:7.21.5" + checksum: d3f965d9691e3e2e11036d23ba9993a42d18f9be3d4589d3bb3d09d02e9d4d204026965633e36fb43b35fde905c2dfe753fb59b72ae0c3841f5a627fb1738d8a + languageName: node + linkType: hard + "@babel/helper-explode-assignable-expression@npm:^7.18.6": version: 7.18.6 resolution: "@babel/helper-explode-assignable-expression@npm:7.18.6" @@ -637,6 +701,22 @@ __metadata: languageName: node linkType: hard +"@babel/helper-module-transforms@npm:^7.21.5": + version: 7.21.5 + resolution: "@babel/helper-module-transforms@npm:7.21.5" + dependencies: + "@babel/helper-environment-visitor": ^7.21.5 + "@babel/helper-module-imports": ^7.21.4 + "@babel/helper-simple-access": ^7.21.5 + "@babel/helper-split-export-declaration": ^7.18.6 + "@babel/helper-validator-identifier": ^7.19.1 + "@babel/template": ^7.20.7 + "@babel/traverse": ^7.21.5 + "@babel/types": ^7.21.5 + checksum: a3b6ceaa995bf35e7a072066c3c9ba9ee6983cf36605f0c6a0ffcaab94d6dc13eba21b00434a023bf99d66c080fec335cf464619b97f7af39e1a5269cf0d7169 + languageName: node + linkType: hard + "@babel/helper-optimise-call-expression@npm:^7.18.6": version: 7.18.6 resolution: "@babel/helper-optimise-call-expression@npm:7.18.6" @@ -690,6 +770,15 @@ __metadata: languageName: node linkType: hard +"@babel/helper-simple-access@npm:^7.21.5": + version: 7.21.5 + resolution: "@babel/helper-simple-access@npm:7.21.5" + dependencies: + "@babel/types": ^7.21.5 + checksum: 682cd80b47c2424c31afe70bcc8ad3e401c612f6923c432e4b8245c5b6bc5ccddf3e405ea41ba890ccab79c0b5b95da3db125944ac0decc8d31d48469e593a0e + languageName: node + linkType: hard + "@babel/helper-skip-transparent-expression-wrappers@npm:^7.20.0": version: 7.20.0 resolution: "@babel/helper-skip-transparent-expression-wrappers@npm:7.20.0" @@ -715,6 +804,13 @@ __metadata: languageName: node linkType: hard +"@babel/helper-string-parser@npm:^7.21.5": + version: 7.21.5 + resolution: "@babel/helper-string-parser@npm:7.21.5" + checksum: 4d0834c4a67c283e9277f5e565551fede00b7d68007e368c95c776e13d05002e8f9861716e11613880889d6f3463329d2af687ceea5fc5263f8b3d25a53d31da + languageName: node + linkType: hard + "@babel/helper-validator-identifier@npm:^7.18.6, @babel/helper-validator-identifier@npm:^7.19.1": version: 7.19.1 resolution: "@babel/helper-validator-identifier@npm:7.19.1" @@ -752,6 +848,17 @@ __metadata: languageName: node linkType: hard +"@babel/helpers@npm:^7.21.5": + version: 7.21.5 + resolution: "@babel/helpers@npm:7.21.5" + dependencies: + "@babel/template": ^7.20.7 + "@babel/traverse": ^7.21.5 + "@babel/types": ^7.21.5 + checksum: 5e58854afa1d0896185dcb12a1b6feacefb7d913d52bafa84792274651af2d3172923bdc26d1320fd6b04a2e208dc0d6730951043f17d10c08ca87231e5b84ec + languageName: node + linkType: hard + "@babel/highlight@npm:^7.18.6": version: 7.18.6 resolution: "@babel/highlight@npm:7.18.6" @@ -772,6 +879,15 @@ __metadata: languageName: node linkType: hard +"@babel/parser@npm:^7.21.5, @babel/parser@npm:^7.21.8": + version: 7.21.8 + resolution: "@babel/parser@npm:7.21.8" + bin: + parser: ./bin/babel-parser.js + checksum: 58789e972e5acce3abbd9dd4c8d4be7e15e071818d2038d195bc56664722f238abb8842d91da5c8894ab0b8f8c0841eabc675f681925c2fba12675bf3ec5c5fc + languageName: node + linkType: hard + "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@npm:^7.18.6": version: 7.18.6 resolution: "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@npm:7.18.6" @@ -1996,6 +2112,24 @@ __metadata: languageName: node linkType: hard +"@babel/traverse@npm:^7.18.9, @babel/traverse@npm:^7.21.5": + version: 7.21.5 + resolution: "@babel/traverse@npm:7.21.5" + dependencies: + "@babel/code-frame": ^7.21.4 + "@babel/generator": ^7.21.5 + "@babel/helper-environment-visitor": ^7.21.5 + "@babel/helper-function-name": ^7.21.0 + "@babel/helper-hoist-variables": ^7.18.6 + "@babel/helper-split-export-declaration": ^7.18.6 + "@babel/parser": ^7.21.5 + "@babel/types": ^7.21.5 + debug: ^4.1.0 + globals: ^11.1.0 + checksum: 1b126b71b98aaff01ec1f0f0389d08beb6eda3d0b71878af4c6cf386686933a076d969240f270c6a01910d8036a1fb9013d53bd5c136b9b24025204a4dc48d03 + languageName: node + linkType: hard + "@babel/types@npm:^7.0.0, @babel/types@npm:^7.11.5, @babel/types@npm:^7.18.6, @babel/types@npm:^7.18.8, @babel/types@npm:^7.18.9, @babel/types@npm:^7.19.3, @babel/types@npm:^7.2.0, @babel/types@npm:^7.20.0, @babel/types@npm:^7.20.2, @babel/types@npm:^7.20.5, @babel/types@npm:^7.20.7, @babel/types@npm:^7.21.0, @babel/types@npm:^7.21.2, @babel/types@npm:^7.21.4, @babel/types@npm:^7.3.0, @babel/types@npm:^7.3.3, @babel/types@npm:^7.4.4, @babel/types@npm:^7.6.1, @babel/types@npm:^7.7.0, @babel/types@npm:^7.7.2, @babel/types@npm:^7.8.3, @babel/types@npm:^7.8.6, @babel/types@npm:^7.8.7, @babel/types@npm:^7.9.6, @babel/types@npm:~7.21.2": version: 7.21.4 resolution: "@babel/types@npm:7.21.4" @@ -2007,6 +2141,17 @@ __metadata: languageName: node linkType: hard +"@babel/types@npm:^7.21.5": + version: 7.21.5 + resolution: "@babel/types@npm:7.21.5" + dependencies: + "@babel/helper-string-parser": ^7.21.5 + "@babel/helper-validator-identifier": ^7.19.1 + to-fast-properties: ^2.0.0 + checksum: 23c943aa2c0d11b798e9298b55b1993da8b386504aac2f781a49b4bbf2cf2ad5e1003409241578574e421c999ff7a3aab2cf30ad3581d33eb9053d82b9e20408 + languageName: node + linkType: hard + "@base2/pretty-print-object@npm:1.0.1": version: 1.0.1 resolution: "@base2/pretty-print-object@npm:1.0.1" @@ -6744,9 +6889,8 @@ __metadata: "@storybook/react": 7.1.0-alpha.20 "@types/node": ^16.0.0 "@vitejs/plugin-react": ^3.0.1 - ast-types: ^0.14.2 magic-string: ^0.27.0 - react-docgen: 6.0.0-alpha.3 + react-docgen: 6.0.0-rc.9 typescript: ~4.9.3 vite: ^4.0.0 peerDependencies: @@ -7763,7 +7907,7 @@ __metadata: languageName: node linkType: hard -"@types/babel__core@npm:^7, @types/babel__core@npm:^7.0.0, @types/babel__core@npm:^7.1.14, @types/babel__core@npm:^7.1.7": +"@types/babel__core@npm:^7, @types/babel__core@npm:^7.0.0, @types/babel__core@npm:^7.1.14, @types/babel__core@npm:^7.1.7, @types/babel__core@npm:^7.18.0": version: 7.20.0 resolution: "@types/babel__core@npm:7.20.0" dependencies: @@ -7818,6 +7962,15 @@ __metadata: languageName: node linkType: hard +"@types/babel__traverse@npm:^7.18.0": + version: 7.18.5 + resolution: "@types/babel__traverse@npm:7.18.5" + dependencies: + "@babel/types": ^7.3.0 + checksum: e5170da740e720212a514add53f3a66ba6c64056e1c284c16bc549cc972bab962bdf0610c6ee710d63da24d28b75c065e2032575404b01ff768d6a9d3974a085 + languageName: node + linkType: hard + "@types/body-parser@npm:*": version: 1.19.2 resolution: "@types/body-parser@npm:1.19.2" @@ -7922,6 +8075,13 @@ __metadata: languageName: node linkType: hard +"@types/doctrine@npm:^0.0.5": + version: 0.0.5 + resolution: "@types/doctrine@npm:0.0.5" + checksum: 9b38d1b110e94fa34632e21f83b64ed05116f6349b5666c11bc0d4081c793f9b0be25b9d8b34df0ec38d440741836c17d4c84576e22dc00a18fe972f96688bf3 + languageName: node + linkType: hard + "@types/ejs@npm:^3.1.1": version: 3.1.2 resolution: "@types/ejs@npm:3.1.2" @@ -8474,6 +8634,13 @@ __metadata: languageName: node linkType: hard +"@types/resolve@npm:^1.20.2": + version: 1.20.2 + resolution: "@types/resolve@npm:1.20.2" + checksum: c5b7e1770feb5ccfb6802f6ad82a7b0d50874c99331e0c9b259e415e55a38d7a86ad0901c57665d93f75938be2a6a0bc9aa06c9749192cadb2e4512800bbc6e6 + languageName: node + linkType: hard + "@types/retry@npm:0.12.0": version: 0.12.0 resolution: "@types/retry@npm:0.12.0" @@ -21900,7 +22067,7 @@ __metadata: languageName: node linkType: hard -"min-indent@npm:^1.0.0": +"min-indent@npm:^1.0.0, min-indent@npm:^1.0.1": version: 1.0.1 resolution: "min-indent@npm:1.0.1" checksum: 7e207bd5c20401b292de291f02913230cb1163abca162044f7db1d951fa245b174dc00869d40dd9a9f32a885ad6a5f3e767ee104cf278f399cb4e92d3f582d5c @@ -25217,23 +25384,21 @@ __metadata: languageName: node linkType: hard -"react-docgen@npm:6.0.0-alpha.3": - version: 6.0.0-alpha.3 - resolution: "react-docgen@npm:6.0.0-alpha.3" +"react-docgen@npm:6.0.0-rc.9": + version: 6.0.0-rc.9 + resolution: "react-docgen@npm:6.0.0-rc.9" dependencies: - "@babel/core": ^7.7.5 - "@babel/generator": ^7.12.11 - ast-types: ^0.14.2 - commander: ^2.19.0 + "@babel/core": ^7.18.9 + "@babel/traverse": ^7.18.9 + "@babel/types": ^7.18.9 + "@types/babel__core": ^7.18.0 + "@types/babel__traverse": ^7.18.0 + "@types/doctrine": ^0.0.5 + "@types/resolve": ^1.20.2 doctrine: ^3.0.0 - estree-to-babel: ^3.1.0 - neo-async: ^2.6.1 - node-dir: ^0.1.10 - resolve: ^1.17.0 - strip-indent: ^3.0.0 - bin: - react-docgen: bin/react-docgen.js - checksum: 284bba5528d5e9084c3ed36b2d2fec8fc5d55f3fb8ca544ec3a0d1ab98c39001ecb7db6e03a1088b82eb3d750c1343cde2fc9b7729540277eda40e10f38912d8 + resolve: ^1.22.1 + strip-indent: ^4.0.0 + checksum: f75226b13175b7ceb1282f485ffb0c1cec1e179f870f7583ab3939cc28c874bce8dad31acf30915ecb7e8549b3a25d998dc4277d7c9def70578e673aa61ac15a languageName: node linkType: hard @@ -28072,6 +28237,15 @@ __metadata: languageName: node linkType: hard +"strip-indent@npm:^4.0.0": + version: 4.0.0 + resolution: "strip-indent@npm:4.0.0" + dependencies: + min-indent: ^1.0.1 + checksum: 6b1fb4e22056867f5c9e7a6f3f45922d9a2436cac758607d58aeaac0d3b16ec40b1c43317de7900f1b8dd7a4107352fa47fb960f2c23566538c51e8585c8870e + languageName: node + linkType: hard + "strip-json-comments@npm:^2.0.0": version: 2.0.1 resolution: "strip-json-comments@npm:2.0.1" From 578cbbff4ba2926d08ffecd1d80055eb8dde6578 Mon Sep 17 00:00:00 2001 From: sook Date: Mon, 22 May 2023 20:25:56 +0900 Subject: [PATCH 009/312] fix: sandbox package.json when pre-existing NODE_OPTIONS value contains whitespaces --- scripts/tasks/sandbox-parts.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/scripts/tasks/sandbox-parts.ts b/scripts/tasks/sandbox-parts.ts index e32ce51214b8..63b4285c5e8c 100644 --- a/scripts/tasks/sandbox-parts.ts +++ b/scripts/tasks/sandbox-parts.ts @@ -131,7 +131,7 @@ export const install: Task['run'] = async ( } const nodeOptionsString = nodeOptions.join(' '); - const prefix = `NODE_OPTIONS="${nodeOptionsString}" STORYBOOK_TELEMETRY_URL="http://localhost:6007/event-log"`; + const prefix = `NODE_OPTIONS='${nodeOptionsString}' STORYBOOK_TELEMETRY_URL="http://localhost:6007/event-log"`; await updatePackageScripts({ cwd, From a26c431ae98abf46ac918b73c9165ece6da11576 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Mon, 22 May 2023 13:53:53 +0200 Subject: [PATCH 010/312] fix type issues --- code/frameworks/react-vite/src/plugins/react-docgen.ts | 2 +- code/frameworks/react-vite/tsconfig.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/code/frameworks/react-vite/src/plugins/react-docgen.ts b/code/frameworks/react-vite/src/plugins/react-docgen.ts index 40a56c78502e..9c35568f45ba 100644 --- a/code/frameworks/react-vite/src/plugins/react-docgen.ts +++ b/code/frameworks/react-vite/src/plugins/react-docgen.ts @@ -61,7 +61,7 @@ export function reactDocgen({ code: s.toString(), map: s.generateMap(), }; - } catch (e) { + } catch (e: any) { // Ignore the error when react-docgen cannot find a react component if (e.code === ERROR_CODES.MISSING_DEFINITION) { return; diff --git a/code/frameworks/react-vite/tsconfig.json b/code/frameworks/react-vite/tsconfig.json index 3bfb79fdded7..4475d9c518e6 100644 --- a/code/frameworks/react-vite/tsconfig.json +++ b/code/frameworks/react-vite/tsconfig.json @@ -4,7 +4,7 @@ "rootDir": "./src", "types": ["node"], "resolveJsonModule": true, - "strict": true + "skipLibCheck": true }, "include": ["src/**/*"] } From 183ab1bcb69b4c92aff6351c00918fc7d4ebf76c Mon Sep 17 00:00:00 2001 From: Josanghyeon <05lazy.dev@gmail.com> Date: Sat, 27 May 2023 12:37:05 +0900 Subject: [PATCH 011/312] getting started add install cli yarn --- docs/get-started/install.md | 1 + 1 file changed, 1 insertion(+) diff --git a/docs/get-started/install.md b/docs/get-started/install.md index 15861bb46364..94a53d5ab4e5 100644 --- a/docs/get-started/install.md +++ b/docs/get-started/install.md @@ -9,6 +9,7 @@ Use the Storybook CLI to install it in a single command. Run this inside your _e From f9b9e76d86efee523aff3da5dc059f74e9d2d5e8 Mon Sep 17 00:00:00 2001 From: Daniel Tschinder <231804+danez@users.noreply.github.com> Date: Wed, 21 Jun 2023 13:03:32 +0200 Subject: [PATCH 012/312] fix: update to 6.0 final --- code/frameworks/react-vite/package.json | 2 +- code/yarn.lock | 38 ++++++++++++------------- 2 files changed, 20 insertions(+), 20 deletions(-) diff --git a/code/frameworks/react-vite/package.json b/code/frameworks/react-vite/package.json index 71e92185b882..5a45fc3ae7ec 100644 --- a/code/frameworks/react-vite/package.json +++ b/code/frameworks/react-vite/package.json @@ -53,7 +53,7 @@ "@storybook/react": "7.1.0-alpha.20", "@vitejs/plugin-react": "^3.0.1", "magic-string": "^0.27.0", - "react-docgen": "6.0.0-rc.9" + "react-docgen": "^6.0.1" }, "devDependencies": { "@types/node": "^16.0.0", diff --git a/code/yarn.lock b/code/yarn.lock index eac5f0119907..4b13b7282c74 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -6890,7 +6890,7 @@ __metadata: "@types/node": ^16.0.0 "@vitejs/plugin-react": ^3.0.1 magic-string: ^0.27.0 - react-docgen: 6.0.0-rc.9 + react-docgen: ^6.0.1 typescript: ~4.9.3 vite: ^4.0.0 peerDependencies: @@ -25384,24 +25384,6 @@ __metadata: languageName: node linkType: hard -"react-docgen@npm:6.0.0-rc.9": - version: 6.0.0-rc.9 - resolution: "react-docgen@npm:6.0.0-rc.9" - dependencies: - "@babel/core": ^7.18.9 - "@babel/traverse": ^7.18.9 - "@babel/types": ^7.18.9 - "@types/babel__core": ^7.18.0 - "@types/babel__traverse": ^7.18.0 - "@types/doctrine": ^0.0.5 - "@types/resolve": ^1.20.2 - doctrine: ^3.0.0 - resolve: ^1.22.1 - strip-indent: ^4.0.0 - checksum: f75226b13175b7ceb1282f485ffb0c1cec1e179f870f7583ab3939cc28c874bce8dad31acf30915ecb7e8549b3a25d998dc4277d7c9def70578e673aa61ac15a - languageName: node - linkType: hard - "react-docgen@npm:^5.0.0": version: 5.4.3 resolution: "react-docgen@npm:5.4.3" @@ -25422,6 +25404,24 @@ __metadata: languageName: node linkType: hard +"react-docgen@npm:^6.0.1": + version: 6.0.1 + resolution: "react-docgen@npm:6.0.1" + dependencies: + "@babel/core": ^7.18.9 + "@babel/traverse": ^7.18.9 + "@babel/types": ^7.18.9 + "@types/babel__core": ^7.18.0 + "@types/babel__traverse": ^7.18.0 + "@types/doctrine": ^0.0.5 + "@types/resolve": ^1.20.2 + doctrine: ^3.0.0 + resolve: ^1.22.1 + strip-indent: ^4.0.0 + checksum: 361d72685d42afbaeb0d214c2e0d4bd9fa29b7a3621586b87bcf2b3f86c5853b591229aa59d67a0ec8055a422e8a7c363fe564f88f21d5fc056cf75a0814fa9c + languageName: node + linkType: hard + "react-dom@npm:^16.8.0": version: 16.14.0 resolution: "react-dom@npm:16.14.0" From f5621205dc714499563f9cb9061f421756a1d632 Mon Sep 17 00:00:00 2001 From: Bruno Bufolin Date: Sun, 25 Jun 2023 22:52:03 -0300 Subject: [PATCH 013/312] refactor: change FunctionComponent for FC to type components --- code/ui/manager/src/components/sidebar/TreeNode.tsx | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/code/ui/manager/src/components/sidebar/TreeNode.tsx b/code/ui/manager/src/components/sidebar/TreeNode.tsx index f869fb53ba67..e6a60d0e2003 100644 --- a/code/ui/manager/src/components/sidebar/TreeNode.tsx +++ b/code/ui/manager/src/components/sidebar/TreeNode.tsx @@ -2,7 +2,7 @@ import { styled } from '@storybook/theming'; import type { Color, Theme } from '@storybook/theming'; import { Icons } from '@storybook/components'; import { transparentize } from 'polished'; -import type { FunctionComponent, ComponentProps } from 'react'; +import type { FC, ComponentProps } from 'react'; import React from 'react'; export const CollapseIcon = styled.span<{ isExpanded: boolean }>(({ theme, isExpanded }) => ({ @@ -153,7 +153,7 @@ const InvisibleText = styled.p({ }); // Make the content have a min-height equal to one line of text -export const IconsWrapper: FunctionComponent<{ children?: React.ReactNode }> = ({ children }) => { +export const IconsWrapper: FC<{ children?: React.ReactNode }> = ({ children }) => { return (   @@ -162,7 +162,7 @@ export const IconsWrapper: FunctionComponent<{ children?: React.ReactNode }> = ( ); }; -export const GroupNode: FunctionComponent< +export const GroupNode: FC< ComponentProps & { isExpanded?: boolean; isExpandable?: boolean } > = React.memo(function GroupNode({ children, @@ -181,7 +181,7 @@ export const GroupNode: FunctionComponent< ); }); -export const ComponentNode: FunctionComponent> = React.memo( +export const ComponentNode: FC> = React.memo( function ComponentNode({ theme, children, isExpanded, isExpandable, isSelected, ...props }) { return ( @@ -195,7 +195,7 @@ export const ComponentNode: FunctionComponent> } ); -export const DocumentNode: FunctionComponent< +export const DocumentNode: FC< ComponentProps & { docsMode: boolean } > = React.memo(function DocumentNode({ theme, children, docsMode, ...props }) { return ( @@ -208,7 +208,7 @@ export const DocumentNode: FunctionComponent< ); }); -export const StoryNode: FunctionComponent> = React.memo( +export const StoryNode: FC> = React.memo( function StoryNode({ theme, children, ...props }) { return ( From 5dcec37414cbde00d607a01018c89d05913fb98d Mon Sep 17 00:00:00 2001 From: serious Date: Thu, 29 Jun 2023 16:03:21 +0200 Subject: [PATCH 014/312] set file-system-cache to ^2.4.1 --- code/lib/core-common/package.json | 2 +- code/lib/types/package.json | 2 +- code/yarn.lock | 12 ++++++------ 3 files changed, 8 insertions(+), 8 deletions(-) diff --git a/code/lib/core-common/package.json b/code/lib/core-common/package.json index 19660af656e4..7ab6766c0ee6 100644 --- a/code/lib/core-common/package.json +++ b/code/lib/core-common/package.json @@ -52,7 +52,7 @@ "chalk": "^4.1.0", "esbuild": "^0.18.0", "esbuild-register": "^3.4.0", - "file-system-cache": "2.3.0", + "file-system-cache": "^2.4.1", "find-cache-dir": "^3.0.0", "find-up": "^5.0.0", "fs-extra": "^11.1.0", diff --git a/code/lib/types/package.json b/code/lib/types/package.json index 8065aa73f205..5ba5d4c94582 100644 --- a/code/lib/types/package.json +++ b/code/lib/types/package.json @@ -46,7 +46,7 @@ "@storybook/channels": "7.1.0-alpha.41", "@types/babel__core": "^7.0.0", "@types/express": "^4.7.0", - "file-system-cache": "2.3.0" + "file-system-cache": "^2.4.1" }, "devDependencies": { "@storybook/csf": "^0.1.0", diff --git a/code/yarn.lock b/code/yarn.lock index 938050052b72..aeb9e9e4ee4e 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -6146,7 +6146,7 @@ __metadata: chalk: ^4.1.0 esbuild: ^0.18.0 esbuild-register: ^3.4.0 - file-system-cache: 2.3.0 + file-system-cache: ^2.4.1 find-cache-dir: ^3.0.0 find-up: ^5.0.0 fs-extra: ^11.1.0 @@ -7455,7 +7455,7 @@ __metadata: "@types/babel__core": ^7.0.0 "@types/express": ^4.7.0 "@types/node": ^16.0.0 - file-system-cache: 2.3.0 + file-system-cache: ^2.4.1 typescript: ~4.9.3 languageName: unknown linkType: soft @@ -16002,13 +16002,13 @@ __metadata: languageName: node linkType: hard -"file-system-cache@npm:2.3.0": - version: 2.3.0 - resolution: "file-system-cache@npm:2.3.0" +"file-system-cache@npm:^2.4.1": + version: 2.4.1 + resolution: "file-system-cache@npm:2.4.1" dependencies: fs-extra: 11.1.1 ramda: 0.29.0 - checksum: 43de19f0db32e6546bb7abeecb1d6ea83c1eca23b38905c9415a29f6219cc9d6d87b0c1a6aca92c46a0f1bc276241a339f2f68b8aa0ca5c2eb64b6e1e3e4da01 + checksum: 7f370924f8ef547fb746797e1be7efc22464e7263fbe3e202f8103da7a9d00280ca297ff044ca8fdd8b333d01c27d4cbf8772d01a85cbc276e8450096e1e7584 languageName: node linkType: hard From 1de752eb9ea27986500c56a83e92177cb88aa0ea Mon Sep 17 00:00:00 2001 From: Bruno Bufolin Date: Thu, 29 Jun 2023 23:14:56 -0300 Subject: [PATCH 015/312] refactor: format file --- .../src/components/sidebar/TreeNode.tsx | 34 ++++++++++--------- 1 file changed, 18 insertions(+), 16 deletions(-) diff --git a/code/ui/manager/src/components/sidebar/TreeNode.tsx b/code/ui/manager/src/components/sidebar/TreeNode.tsx index e6a60d0e2003..879b8077852b 100644 --- a/code/ui/manager/src/components/sidebar/TreeNode.tsx +++ b/code/ui/manager/src/components/sidebar/TreeNode.tsx @@ -195,28 +195,30 @@ export const ComponentNode: FC> = React.memo( } ); -export const DocumentNode: FC< - ComponentProps & { docsMode: boolean } -> = React.memo(function DocumentNode({ theme, children, docsMode, ...props }) { - return ( - - - - - {children} - - ); -}); - -export const StoryNode: FC> = React.memo( - function StoryNode({ theme, children, ...props }) { +export const DocumentNode: FC & { docsMode: boolean }> = React.memo( + function DocumentNode({ theme, children, docsMode, ...props }) { return ( - + {children} ); } ); + +export const StoryNode: FC> = React.memo(function StoryNode({ + theme, + children, + ...props +}) { + return ( + + + + + {children} + + ); +}); From 2a9b09e3636cf4b06a35bab3d8cbe0b9725cc003 Mon Sep 17 00:00:00 2001 From: Jon Badgett Date: Wed, 17 May 2023 08:40:07 -0500 Subject: [PATCH 016/312] docs: add information about @storybook/preview-api useArgs hook Provide example for those migrating from v6 to v7 and were previously using the @storybook/client-api useArgs hook --- docs/writing-stories/args.md | 37 ++++++++++++++++++++++++++++++++++++ 1 file changed, 37 insertions(+) diff --git a/docs/writing-stories/args.md b/docs/writing-stories/args.md index 4d3a53652ff7..f329e1fb0453 100644 --- a/docs/writing-stories/args.md +++ b/docs/writing-stories/args.md @@ -207,6 +207,43 @@ Similarly, special formats are available for dates and colors. Date objects will Args specified through the URL will extend and override any default values of args set on the story. +## Setting args from withihn a story + +Components with interactivity often need their containing component, or page, to respond to events, modify their state, then pass a changed arg back to the rendered component to reflect the change. For example, you would want a Switch component to be checked by a user and the arg shown in Storybook to reflect the change. This can be accomplished by using the `useArgs` hook exported by `@storybook/preview-api`: + +```ts +// my-component/component.stories.tsx + +import { StoryObj, Meta } from "@storybook/react"; +import { useArgs } from "@storybook/preview-api"; +import { Switch } from "."; + +export const meta: Meta = { + title: "Inputs/Switch", + component: Switch +}; +export default meta; + +type Story = StoryObj; + +export const Standard = { + ...template, + args: { + isChecked: false, + label: "Switch Me!" + }, + render: (args) => { + const [{ isChecked }, updateArgs] = useArgs(); + + function onChange() { + updateArgs({ isChecked: !isChecked }); + } + + return ; + } +}; +``` + ## Mapping to complex arg values Complex values such as JSX elements cannot be serialized to the manager (e.g., the Controls addon) or synced with the URL. Arg values can be "mapped" from a simple string to a complex type using the `mapping` property in `argTypes` to work around this limitation. It works in any arg but makes the most sense when used with the `select` control type. From 9e5f9817d641177f365a321a0ecce963573f8a9e Mon Sep 17 00:00:00 2001 From: Jon Badgett Date: Wed, 17 May 2023 08:46:31 -0500 Subject: [PATCH 017/312] docs: fix issue with code sample Removed remnant of template method. Shoudl be GTG now. --- docs/writing-stories/args.md | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/docs/writing-stories/args.md b/docs/writing-stories/args.md index f329e1fb0453..50440ee76564 100644 --- a/docs/writing-stories/args.md +++ b/docs/writing-stories/args.md @@ -226,8 +226,7 @@ export default meta; type Story = StoryObj; -export const Standard = { - ...template, +export const Example = { args: { isChecked: false, label: "Switch Me!" From b701f0fa547361f730769cffcaad511310612b12 Mon Sep 17 00:00:00 2001 From: Jon Badgett Date: Wed, 17 May 2023 09:03:41 -0500 Subject: [PATCH 018/312] docs: fix code block - remove unnecessary export Removed unnecessary export --- docs/writing-stories/args.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/writing-stories/args.md b/docs/writing-stories/args.md index 50440ee76564..17dbe3bc8754 100644 --- a/docs/writing-stories/args.md +++ b/docs/writing-stories/args.md @@ -218,7 +218,7 @@ import { StoryObj, Meta } from "@storybook/react"; import { useArgs } from "@storybook/preview-api"; import { Switch } from "."; -export const meta: Meta = { +const meta: Meta = { title: "Inputs/Switch", component: Switch }; From aade9cc5f33fdf327f24460c5deb5c0fc5e48fa1 Mon Sep 17 00:00:00 2001 From: Jon Badgett Date: Wed, 17 May 2023 09:25:39 -0500 Subject: [PATCH 019/312] docs: now passes eslint Made changes to code block to ensure that it will pass eslint rule `react-hooks/rules-of-hooks` --- docs/writing-stories/args.md | 23 +++++++++++++---------- 1 file changed, 13 insertions(+), 10 deletions(-) diff --git a/docs/writing-stories/args.md b/docs/writing-stories/args.md index 17dbe3bc8754..4006ca9d9f7a 100644 --- a/docs/writing-stories/args.md +++ b/docs/writing-stories/args.md @@ -216,7 +216,7 @@ Components with interactivity often need their containing component, or page, to import { StoryObj, Meta } from "@storybook/react"; import { useArgs } from "@storybook/preview-api"; -import { Switch } from "."; +import { Switch, SwitchProps } from "."; const meta: Meta = { title: "Inputs/Switch", @@ -226,20 +226,23 @@ export default meta; type Story = StoryObj; +// Separate render logic into a new function that will not cause issues with eslint rule `react-hooks/rules-of-hooks` +const WrappedComponent = (args: SwitchProps) => { + const [{ isChecked }, updateArgs] = UseArgs(); + + function onChange() { + updateArgs({ isChecked: !isChecked }); + } + + return ; +} + export const Example = { args: { isChecked: false, label: "Switch Me!" }, - render: (args) => { - const [{ isChecked }, updateArgs] = useArgs(); - - function onChange() { - updateArgs({ isChecked: !isChecked }); - } - - return ; - } + render: (args) => }; ``` From 1d5413028689b53bcb01fca97ed7685ce0a8f7af Mon Sep 17 00:00:00 2001 From: Jon Badgett Date: Wed, 17 May 2023 12:38:52 -0500 Subject: [PATCH 020/312] docs: change code block to be minimum example that does not cause eslint or storybook errors --- docs/writing-stories/args.md | 24 +++++++++++------------- 1 file changed, 11 insertions(+), 13 deletions(-) diff --git a/docs/writing-stories/args.md b/docs/writing-stories/args.md index 4006ca9d9f7a..5a353bec6dd9 100644 --- a/docs/writing-stories/args.md +++ b/docs/writing-stories/args.md @@ -216,7 +216,7 @@ Components with interactivity often need their containing component, or page, to import { StoryObj, Meta } from "@storybook/react"; import { useArgs } from "@storybook/preview-api"; -import { Switch, SwitchProps } from "."; +import { Switch } from "."; const meta: Meta = { title: "Inputs/Switch", @@ -226,23 +226,21 @@ export default meta; type Story = StoryObj; -// Separate render logic into a new function that will not cause issues with eslint rule `react-hooks/rules-of-hooks` -const WrappedComponent = (args: SwitchProps) => { - const [{ isChecked }, updateArgs] = UseArgs(); - - function onChange() { - updateArgs({ isChecked: !isChecked }); - } - - return ; -} - export const Example = { args: { isChecked: false, label: "Switch Me!" }, - render: (args) => + render: (args) => { + // eslint-disable-next-line + const [{ isChecked }, updateArgs] = UseArgs(); + + function onChange() { + updateArgs({ isChecked: !isChecked }); + } + + return ; + } }; ``` From d12518c66788c47fd0aa0e3c67d5873a93b3b156 Mon Sep 17 00:00:00 2001 From: Jon Badgett Date: Wed, 17 May 2023 12:42:48 -0500 Subject: [PATCH 021/312] docs: fix typo in header --- docs/writing-stories/args.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/writing-stories/args.md b/docs/writing-stories/args.md index 5a353bec6dd9..811d5d06a781 100644 --- a/docs/writing-stories/args.md +++ b/docs/writing-stories/args.md @@ -207,7 +207,7 @@ Similarly, special formats are available for dates and colors. Date objects will Args specified through the URL will extend and override any default values of args set on the story. -## Setting args from withihn a story +## Setting args from within a story Components with interactivity often need their containing component, or page, to respond to events, modify their state, then pass a changed arg back to the rendered component to reflect the change. For example, you would want a Switch component to be checked by a user and the arg shown in Storybook to reflect the change. This can be accomplished by using the `useArgs` hook exported by `@storybook/preview-api`: From 665c1a88a6760f3d3167834e2dae1513979a9f2a Mon Sep 17 00:00:00 2001 From: Jon Badgett Date: Thu, 18 May 2023 08:00:59 -0500 Subject: [PATCH 022/312] docs: align code pattern to ensure no eslint or storybook issues --- docs/writing-stories/args.md | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/docs/writing-stories/args.md b/docs/writing-stories/args.md index 811d5d06a781..89337d510193 100644 --- a/docs/writing-stories/args.md +++ b/docs/writing-stories/args.md @@ -231,8 +231,7 @@ export const Example = { isChecked: false, label: "Switch Me!" }, - render: (args) => { - // eslint-disable-next-line + render: function Render(args) { const [{ isChecked }, updateArgs] = UseArgs(); function onChange() { From 449b0529a0031ca0ef8256502d19de02af03a5ff Mon Sep 17 00:00:00 2001 From: Jon Badgett Date: Fri, 16 Jun 2023 15:04:41 -0500 Subject: [PATCH 023/312] make changes per recommendations --- .../react/page-story-args-within-story.js.mdx | 27 ++++++++++++ .../react/page-story-args-within-story.ts.mdx | 31 ++++++++++++++ docs/writing-stories/args.md | 41 +++++-------------- 3 files changed, 68 insertions(+), 31 deletions(-) create mode 100644 docs/snippets/react/page-story-args-within-story.js.mdx create mode 100644 docs/snippets/react/page-story-args-within-story.ts.mdx diff --git a/docs/snippets/react/page-story-args-within-story.js.mdx b/docs/snippets/react/page-story-args-within-story.js.mdx new file mode 100644 index 000000000000..c523c2682eb3 --- /dev/null +++ b/docs/snippets/react/page-story-args-within-story.js.mdx @@ -0,0 +1,27 @@ +```ts +// my-component/component.stories.js|jsx + +import { useArgs } from '@storybook/preview-api'; +import { Switch } from '.'; + +export const meta = { + title: 'Inputs/Switch', + component: Switch, +}; + +export const Example = { + args: { + isChecked: false, + label: 'Switch Me!', + }, + render: function Render(args) { + const [{ isChecked }, updateArgs] = UseArgs(); + + function onChange() { + updateArgs({ isChecked: !isChecked }); + } + + return ; + }, +}; +``` diff --git a/docs/snippets/react/page-story-args-within-story.ts.mdx b/docs/snippets/react/page-story-args-within-story.ts.mdx new file mode 100644 index 000000000000..fb0fdff989a0 --- /dev/null +++ b/docs/snippets/react/page-story-args-within-story.ts.mdx @@ -0,0 +1,31 @@ +```ts +// my-component/component.stories.ts|tsx + +import { StoryObj, Meta } from '@storybook/react'; +import { useArgs } from '@storybook/preview-api'; +import { Switch } from '.'; + +const meta: Meta = { + title: 'Inputs/Switch', + component: Switch, +}; +export default meta; + +type Story = StoryObj; + +export const Example = { + args: { + isChecked: false, + label: 'Switch Me!', + }, + render: function Render(args) { + const [{ isChecked }, updateArgs] = UseArgs(); + + function onChange() { + updateArgs({ isChecked: !isChecked }); + } + + return ; + }, +}; +``` diff --git a/docs/writing-stories/args.md b/docs/writing-stories/args.md index 89337d510193..ea83df908531 100644 --- a/docs/writing-stories/args.md +++ b/docs/writing-stories/args.md @@ -211,37 +211,16 @@ Args specified through the URL will extend and override any default values of ar Components with interactivity often need their containing component, or page, to respond to events, modify their state, then pass a changed arg back to the rendered component to reflect the change. For example, you would want a Switch component to be checked by a user and the arg shown in Storybook to reflect the change. This can be accomplished by using the `useArgs` hook exported by `@storybook/preview-api`: -```ts -// my-component/component.stories.tsx - -import { StoryObj, Meta } from "@storybook/react"; -import { useArgs } from "@storybook/preview-api"; -import { Switch } from "."; - -const meta: Meta = { - title: "Inputs/Switch", - component: Switch -}; -export default meta; - -type Story = StoryObj; - -export const Example = { - args: { - isChecked: false, - label: "Switch Me!" - }, - render: function Render(args) { - const [{ isChecked }, updateArgs] = UseArgs(); - - function onChange() { - updateArgs({ isChecked: !isChecked }); - } - - return ; - } -}; -``` + + + + + ## Mapping to complex arg values From cec457628d99c542e4d09465e939b619131842b4 Mon Sep 17 00:00:00 2001 From: Jon Badgett Date: Fri, 16 Jun 2023 15:18:45 -0500 Subject: [PATCH 024/312] fix typos; align style to other js code snippets --- .../react/page-story-args-within-story.js.mdx | 11 ++++++++--- .../react/page-story-args-within-story.ts.mdx | 7 ++++++- 2 files changed, 14 insertions(+), 4 deletions(-) diff --git a/docs/snippets/react/page-story-args-within-story.js.mdx b/docs/snippets/react/page-story-args-within-story.js.mdx index c523c2682eb3..ceec5acabc65 100644 --- a/docs/snippets/react/page-story-args-within-story.js.mdx +++ b/docs/snippets/react/page-story-args-within-story.js.mdx @@ -1,10 +1,10 @@ -```ts +```js // my-component/component.stories.js|jsx import { useArgs } from '@storybook/preview-api'; import { Switch } from '.'; -export const meta = { +export default { title: 'Inputs/Switch', component: Switch, }; @@ -14,8 +14,13 @@ export const Example = { isChecked: false, label: 'Switch Me!', }, + /** + * πŸ‘‡ React things the Storybook function "useArgs" is a hook, but it's really not. + * Using a named capital-letter function prevents an ESLint warning related to this. + * Don't lint? You can use an arrow function instead. + */ render: function Render(args) { - const [{ isChecked }, updateArgs] = UseArgs(); + const [{ isChecked }, updateArgs] = useArgs(); function onChange() { updateArgs({ isChecked: !isChecked }); diff --git a/docs/snippets/react/page-story-args-within-story.ts.mdx b/docs/snippets/react/page-story-args-within-story.ts.mdx index fb0fdff989a0..9c1dc3c601d1 100644 --- a/docs/snippets/react/page-story-args-within-story.ts.mdx +++ b/docs/snippets/react/page-story-args-within-story.ts.mdx @@ -18,8 +18,13 @@ export const Example = { isChecked: false, label: 'Switch Me!', }, + /** + * πŸ‘‡ React things the Storybook function "useArgs" is a hook, but it's really not. + * Using a named capital-letter function prevents an ESLint warning related to this. + * Don't lint? You can use an arrow function instead. + */ render: function Render(args) { - const [{ isChecked }, updateArgs] = UseArgs(); + const [{ isChecked }, updateArgs] = useArgs(); function onChange() { updateArgs({ isChecked: !isChecked }); From 8add32d6d97614d82b64bdec03a6b627ccbef2bd Mon Sep 17 00:00:00 2001 From: Jon Badgett Date: Fri, 16 Jun 2023 15:21:47 -0500 Subject: [PATCH 025/312] fix mispelling in comments --- docs/snippets/react/page-story-args-within-story.js.mdx | 2 +- docs/snippets/react/page-story-args-within-story.ts.mdx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/snippets/react/page-story-args-within-story.js.mdx b/docs/snippets/react/page-story-args-within-story.js.mdx index ceec5acabc65..8b8391d786d7 100644 --- a/docs/snippets/react/page-story-args-within-story.js.mdx +++ b/docs/snippets/react/page-story-args-within-story.js.mdx @@ -15,7 +15,7 @@ export const Example = { label: 'Switch Me!', }, /** - * πŸ‘‡ React things the Storybook function "useArgs" is a hook, but it's really not. + * πŸ‘‡ React believes the Storybook function "useArgs" is a hook, but it's really not. * Using a named capital-letter function prevents an ESLint warning related to this. * Don't lint? You can use an arrow function instead. */ diff --git a/docs/snippets/react/page-story-args-within-story.ts.mdx b/docs/snippets/react/page-story-args-within-story.ts.mdx index 9c1dc3c601d1..1e232015c992 100644 --- a/docs/snippets/react/page-story-args-within-story.ts.mdx +++ b/docs/snippets/react/page-story-args-within-story.ts.mdx @@ -19,7 +19,7 @@ export const Example = { label: 'Switch Me!', }, /** - * πŸ‘‡ React things the Storybook function "useArgs" is a hook, but it's really not. + * πŸ‘‡ React believes the Storybook function "useArgs" is a hook, but it's really not. * Using a named capital-letter function prevents an ESLint warning related to this. * Don't lint? You can use an arrow function instead. */ From 73165b42eb6ff366356ebf6b50a8cce09c1740ee Mon Sep 17 00:00:00 2001 From: serious Date: Sun, 9 Jul 2023 13:43:55 +0200 Subject: [PATCH 026/312] set file-system-cache to ^2.4.2 --- code/lib/core-common/package.json | 2 +- code/lib/types/package.json | 2 +- code/yarn.lock | 38 ++++++++++++++++++++++++++----- 3 files changed, 34 insertions(+), 8 deletions(-) diff --git a/code/lib/core-common/package.json b/code/lib/core-common/package.json index faf92ab281cb..62f2985c2efa 100644 --- a/code/lib/core-common/package.json +++ b/code/lib/core-common/package.json @@ -52,7 +52,7 @@ "chalk": "^4.1.0", "esbuild": "^0.18.0", "esbuild-register": "^3.4.0", - "file-system-cache": "^2.4.1", + "file-system-cache": "^2.4.2", "find-cache-dir": "^3.0.0", "find-up": "^5.0.0", "fs-extra": "^11.1.0", diff --git a/code/lib/types/package.json b/code/lib/types/package.json index c2d3c45fb708..206a8dcc0aea 100644 --- a/code/lib/types/package.json +++ b/code/lib/types/package.json @@ -46,7 +46,7 @@ "@storybook/channels": "7.1.0-alpha.42", "@types/babel__core": "^7.0.0", "@types/express": "^4.7.0", - "file-system-cache": "^2.4.1" + "file-system-cache": "^2.4.2" }, "devDependencies": { "@storybook/csf": "^0.1.0", diff --git a/code/yarn.lock b/code/yarn.lock index a526d5252bcb..27f6e56e0fa8 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -6146,7 +6146,7 @@ __metadata: chalk: ^4.1.0 esbuild: ^0.18.0 esbuild-register: ^3.4.0 - file-system-cache: ^2.4.1 + file-system-cache: ^2.4.2 find-cache-dir: ^3.0.0 find-up: ^5.0.0 fs-extra: ^11.1.0 @@ -7455,7 +7455,7 @@ __metadata: "@types/babel__core": ^7.0.0 "@types/express": ^4.7.0 "@types/node": ^16.0.0 - file-system-cache: ^2.4.1 + file-system-cache: ^2.4.2 typescript: ~4.9.3 languageName: unknown linkType: soft @@ -8699,6 +8699,15 @@ __metadata: languageName: node linkType: hard +"@types/ramda@npm:0.29.3": + version: 0.29.3 + resolution: "@types/ramda@npm:0.29.3" + dependencies: + types-ramda: ^0.29.4 + checksum: 9c62a4600f5df5e65a01ffe4a470500c98f7c0d093fde47e0d4257675f1ec50effe4696cb004a6b53227948db67ea26a2345dbc91819ecc868105c0f64cecd1e + languageName: node + linkType: hard + "@types/range-parser@npm:*": version: 1.2.4 resolution: "@types/range-parser@npm:1.2.4" @@ -16002,13 +16011,14 @@ __metadata: languageName: node linkType: hard -"file-system-cache@npm:^2.4.1": - version: 2.4.1 - resolution: "file-system-cache@npm:2.4.1" +"file-system-cache@npm:^2.4.2": + version: 2.4.2 + resolution: "file-system-cache@npm:2.4.2" dependencies: + "@types/ramda": 0.29.3 fs-extra: 11.1.1 ramda: 0.29.0 - checksum: 7f370924f8ef547fb746797e1be7efc22464e7263fbe3e202f8103da7a9d00280ca297ff044ca8fdd8b333d01c27d4cbf8772d01a85cbc276e8450096e1e7584 + checksum: fe7f348b7a88501656173f82269ac509dfc7fca720aecea26dc549996c253878e6a0af302afd30ffd5eea275f6801db7d17584031c31ee4ad01e1b89db5503c6 languageName: node linkType: hard @@ -29445,6 +29455,13 @@ __metadata: languageName: node linkType: hard +"ts-toolbelt@npm:^9.6.0": + version: 9.6.0 + resolution: "ts-toolbelt@npm:9.6.0" + checksum: 838f9a2f0fe881d5065257a23b402c41315b33ff987b73db3e2b39fcb70640c4c7220e1ef118ed5676763543724fdbf4eda7b0e2c17acb667ed1401336af9f8c + languageName: node + linkType: hard + "tsconfig-paths-webpack-plugin@npm:^4.0.1": version: 4.0.1 resolution: "tsconfig-paths-webpack-plugin@npm:4.0.1" @@ -29608,6 +29625,15 @@ __metadata: languageName: node linkType: hard +"types-ramda@npm:^0.29.4": + version: 0.29.4 + resolution: "types-ramda@npm:0.29.4" + dependencies: + ts-toolbelt: ^9.6.0 + checksum: 7f73719de87ad49ffa48bdece4feb41d9707f945cad649c5bd1c0b1c2f80703d9eb90cc9003411a5af4d4eee3c0c582f8baa86af069be29e9c46f802db203825 + languageName: node + linkType: hard + "typescript@npm:^3 || ^4, typescript@npm:^4.9.3, typescript@npm:~4.9.3": version: 4.9.5 resolution: "typescript@npm:4.9.5" From c12baf29e99cab71e56d9604edc6e3dcd2d1d451 Mon Sep 17 00:00:00 2001 From: serious Date: Sun, 9 Jul 2023 21:22:04 +0200 Subject: [PATCH 027/312] file-system-cache requires @types/fs-extra as devDependency --- code/lib/core-common/package.json | 1 + code/lib/types/package.json | 1 + code/yarn.lock | 2 ++ 3 files changed, 4 insertions(+) diff --git a/code/lib/core-common/package.json b/code/lib/core-common/package.json index ceb3ad2a4e23..67977f76a0a6 100644 --- a/code/lib/core-common/package.json +++ b/code/lib/core-common/package.json @@ -67,6 +67,7 @@ "ts-dedent": "^2.0.0" }, "devDependencies": { + "@types/fs-extra": "^11.0.1", "@types/mock-fs": "^4.13.1", "@types/picomatch": "^2.3.0", "mock-fs": "^5.2.0", diff --git a/code/lib/types/package.json b/code/lib/types/package.json index 76e6c384d3e5..986415c091c9 100644 --- a/code/lib/types/package.json +++ b/code/lib/types/package.json @@ -50,6 +50,7 @@ }, "devDependencies": { "@storybook/csf": "^0.1.0", + "@types/fs-extra": "^11.0.1", "@types/node": "^16.0.0", "typescript": "~4.9.3" }, diff --git a/code/yarn.lock b/code/yarn.lock index 95a0d497f0c0..9628ecbfd11d 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -6139,6 +6139,7 @@ __metadata: "@storybook/node-logger": 7.1.0-beta.1 "@storybook/types": 7.1.0-beta.1 "@types/find-cache-dir": ^3.2.1 + "@types/fs-extra": ^11.0.1 "@types/mock-fs": ^4.13.1 "@types/node": ^16.0.0 "@types/node-fetch": ^2.6.4 @@ -7455,6 +7456,7 @@ __metadata: "@storybook/csf": ^0.1.0 "@types/babel__core": ^7.0.0 "@types/express": ^4.7.0 + "@types/fs-extra": ^11.0.1 "@types/node": ^16.0.0 file-system-cache: ^2.4.2 typescript: ~4.9.3 From 16d0156fa17306ecfc94938dc425d75917ad9944 Mon Sep 17 00:00:00 2001 From: Gavin King Date: Fri, 14 Jul 2023 11:42:28 +0200 Subject: [PATCH 028/312] search label for attribute doesn't match id of input (fixes #23463) The for attribute value was not set to match the hardcoded value used for the search input id. --- code/ui/manager/src/components/sidebar/Search.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/code/ui/manager/src/components/sidebar/Search.tsx b/code/ui/manager/src/components/sidebar/Search.tsx index 9bd4b6839954..675351ddc552 100644 --- a/code/ui/manager/src/components/sidebar/Search.tsx +++ b/code/ui/manager/src/components/sidebar/Search.tsx @@ -345,9 +345,13 @@ export const Search = React.memo<{ onBlur: () => setPlaceholder('Find components'), }); + const labelProps = getLabelProps({ + htmlFor: 'storybook-explorer-searchfield', + }); + return ( <> - Search for components + Search for components Date: Tue, 1 Aug 2023 20:34:16 +0900 Subject: [PATCH 029/312] add aliases that resolve react & react-dom to next/dist/compiled/ --- code/frameworks/nextjs/src/config/webpack.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/code/frameworks/nextjs/src/config/webpack.ts b/code/frameworks/nextjs/src/config/webpack.ts index a5f99fd51864..13c1a251cebe 100644 --- a/code/frameworks/nextjs/src/config/webpack.ts +++ b/code/frameworks/nextjs/src/config/webpack.ts @@ -17,6 +17,8 @@ export const configureConfig = async ({ const nextConfig = await resolveNextConfig({ baseConfig, nextConfigPath, configDir }); addScopedAlias(baseConfig, 'next/config'); + addScopedAlias(baseConfig, 'react', 'next/dist/compiled/react'); + addScopedAlias(baseConfig, 'react-dom', 'next/dist/compiled/react-dom'); setupRuntimeConfig(baseConfig, nextConfig); return nextConfig; From ebbff0d7410106fb9610f149d7fa68aedcfb9e68 Mon Sep 17 00:00:00 2001 From: Trevor Sears Date: Thu, 3 Aug 2023 03:55:02 -0400 Subject: [PATCH 030/312] Added more portable path handling code to better support win32-style paths. --- .../webpack/loader/local/get-font-face-declarations.ts | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/code/frameworks/nextjs/src/font/webpack/loader/local/get-font-face-declarations.ts b/code/frameworks/nextjs/src/font/webpack/loader/local/get-font-face-declarations.ts index 20e1df8deeb2..006c7f126f5b 100644 --- a/code/frameworks/nextjs/src/font/webpack/loader/local/get-font-face-declarations.ts +++ b/code/frameworks/nextjs/src/font/webpack/loader/local/get-font-face-declarations.ts @@ -11,7 +11,7 @@ export async function getFontFaceDeclarations(options: LoaderOptions, rootContex const localFontSrc = options.props.src as LocalFontSrc; // Parent folder relative to the root context - const parentFolder = options.filename.split('/').slice(0, -1).join('/').replace(rootContext, ''); + const parentFolder = path.dirname(options.filename).replace(rootContext, ''); const { validateData } = require('../utils/local-font-utils'); const { weight, style, variable } = validateData('', options.props); @@ -23,9 +23,13 @@ export async function getFontFaceDeclarations(options: LoaderOptions, rootContex 6 )}`; + const arePathsWin32Format = /^[a-z]:\\/iu.test(options.filename); + const cleanWin32Path = (pathString: string): string => + arePathsWin32Format ? pathString.replace(/\\/gu, '/') : pathString; + const getFontFaceCSS = () => { if (typeof localFontSrc === 'string') { - const localFontPath = path.join(parentFolder, localFontSrc); + const localFontPath = cleanWin32Path(path.join(parentFolder, localFontSrc)); return `@font-face { font-family: ${id}; @@ -34,7 +38,7 @@ export async function getFontFaceDeclarations(options: LoaderOptions, rootContex } return localFontSrc .map((font) => { - const localFontPath = path.join(parentFolder, font.path); + const localFontPath = cleanWin32Path(path.join(parentFolder, font.path)); return `@font-face { font-family: ${id}; From caf8e1be0f5beaec6a1a169376b7d1ff6153efc8 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Fri, 4 Aug 2023 17:29:37 +0200 Subject: [PATCH 031/312] Remove broken dangerouslySetInnerHTML property on mounting div in InlineStory --- code/ui/blocks/src/components/Story.tsx | 11 +---------- 1 file changed, 1 insertion(+), 10 deletions(-) diff --git a/code/ui/blocks/src/components/Story.tsx b/code/ui/blocks/src/components/Story.tsx index 2718197456f1..089df560b2d8 100644 --- a/code/ui/blocks/src/components/Story.tsx +++ b/code/ui/blocks/src/components/Story.tsx @@ -64,9 +64,6 @@ const InlineStory: FunctionComponent = (props) => { }; }, [autoplay, renderStoryToElement, story]); - // We do this so React doesn't complain when we replace the span in a secondary render - const htmlContents = ``; - if (error) { return ( 
@@ -83,13 +80,7 @@ const InlineStory: FunctionComponent = (props) => {
         )} { min-height: ${height}; transform: translateZ(0); overflow: auto }`}
       ) : null}
       {showLoader && }
-      

+      

     
   );
 };

From 20a7d21cb41af58237cc2bad717e46b7a8413972 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C3=A3o=20Nuno=20Mota?= 
Date: Wed, 9 Aug 2023 19:56:54 +0100
Subject: [PATCH 032/312] Expand Ref for selected story

---
 code/ui/manager/src/components/sidebar/Refs.tsx | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/code/ui/manager/src/components/sidebar/Refs.tsx b/code/ui/manager/src/components/sidebar/Refs.tsx
index a7696ee696ca..ebbbbe6d92ff 100644
--- a/code/ui/manager/src/components/sidebar/Refs.tsx
+++ b/code/ui/manager/src/components/sidebar/Refs.tsx
@@ -1,5 +1,5 @@
 import type { FC, MutableRefObject } from 'react';
-import React, { useMemo, useState, useRef, useCallback } from 'react';
+import React, { useEffect, useMemo, useState, useRef, useCallback } from 'react';
 import type { State } from '@storybook/manager-api';
 import { useStorybookApi, useStorybookState } from '@storybook/manager-api';
 import { styled } from '@storybook/theming';
@@ -131,6 +131,12 @@ export const Ref: FC = React.
   const state = getStateType(isLoading, isAuthRequired, isError, isEmpty);
   const [isExpanded, setExpanded] = useState(expanded);
 
+  useEffect(() => {
+    if (index && selectedStoryId && index[selectedStoryId]) {
+      setExpanded(true);
+    }
+  }, [setExpanded, index, selectedStoryId]);
+
   const handleClick = useCallback(() => setExpanded((value) => !value), [setExpanded]);
 
   const setHighlightedItemId = useCallback(

From f9e2e0d5d8161a29136e0046957e75ffd6122e03 Mon Sep 17 00:00:00 2001
From: Jon Badgett 
Date: Fri, 11 Aug 2023 16:05:10 -0500
Subject: [PATCH 033/312] add typescript 4.9 snippet

---
 .../react/page-story-args-within-story.js.mdx | 15 ++++----
 .../page-story-args-within-story.ts-4-9.mdx   | 35 +++++++++++++++++++
 .../react/page-story-args-within-story.ts.mdx | 21 ++++++-----
 docs/writing-stories/args.md                  |  8 ++---
 node_modules/.package-lock.json               |  6 ++++
 5 files changed, 62 insertions(+), 23 deletions(-)
 create mode 100644 docs/snippets/react/page-story-args-within-story.ts-4-9.mdx
 create mode 100644 node_modules/.package-lock.json

diff --git a/docs/snippets/react/page-story-args-within-story.js.mdx b/docs/snippets/react/page-story-args-within-story.js.mdx
index 8b8391d786d7..282e81f79cf7 100644
--- a/docs/snippets/react/page-story-args-within-story.js.mdx
+++ b/docs/snippets/react/page-story-args-within-story.js.mdx
@@ -2,22 +2,21 @@
 // my-component/component.stories.js|jsx
 
 import { useArgs } from '@storybook/preview-api';
-import { Switch } from '.';
+import { Checkbox } from './checkbox';
 
 export default {
-  title: 'Inputs/Switch',
-  component: Switch,
+  title: 'Inputs/Checkbox',
+  component: Checkbox,
 };
 
 export const Example = {
   args: {
     isChecked: false,
-    label: 'Switch Me!',
+    label: 'Try Me!',
   },
   /**
-   * πŸ‘‡ React believes the Storybook function "useArgs" is a hook, but it's really not.
-   * Using a named capital-letter function prevents an ESLint warning related to this.
-   * Don't lint? You can use an arrow function instead.
+   * πŸ‘‡ To avoid linting issues, it is recommended to use a function with a capitalized name.
+   * If you are not concerned with linting, you may use an arrow function.
    */
   render: function Render(args) {
     const [{ isChecked }, updateArgs] = useArgs();
@@ -26,7 +25,7 @@ export const Example = {
       updateArgs({ isChecked: !isChecked });
     }
 
-    return ;
+    return ;
   },
 };
 ```
diff --git a/docs/snippets/react/page-story-args-within-story.ts-4-9.mdx b/docs/snippets/react/page-story-args-within-story.ts-4-9.mdx
new file mode 100644
index 000000000000..5a23cb8f523e
--- /dev/null
+++ b/docs/snippets/react/page-story-args-within-story.ts-4-9.mdx
@@ -0,0 +1,35 @@
+```ts
+// my-component/component.stories.ts|tsx
+
+import { StoryObj, Meta } from '@storybook/react';
+import { useArgs } from '@storybook/preview-api';
+import { Checkbox } from './checkbox';
+
+const meta = {
+  title: 'Inputs/Checkbox',
+  component: Checkbox,
+} satisfies Meta;
+export default meta;
+
+type Story = StoryObj;
+
+export const Example = {
+  args: {
+    isChecked: false,
+    label: 'Try Me!',
+  },
+  /**
+   * πŸ‘‡ To avoid linting issues, it is recommended to use a function with a capitalized name.
+   * If you are not concerned with linting, you may use an arrow function.
+   */
+  render: function Render(args) {
+    const [{ isChecked }, updateArgs] = useArgs();
+
+    function onChange() {
+      updateArgs({ isChecked: !isChecked });
+    }
+
+    return ;
+  },
+} satisfies Story;
+```
diff --git a/docs/snippets/react/page-story-args-within-story.ts.mdx b/docs/snippets/react/page-story-args-within-story.ts.mdx
index 1e232015c992..137e37cbf3d6 100644
--- a/docs/snippets/react/page-story-args-within-story.ts.mdx
+++ b/docs/snippets/react/page-story-args-within-story.ts.mdx
@@ -3,25 +3,24 @@
 
 import { StoryObj, Meta } from '@storybook/react';
 import { useArgs } from '@storybook/preview-api';
-import { Switch } from '.';
+import { Checkbox } from './checkbox';
 
-const meta: Meta = {
-  title: 'Inputs/Switch',
-  component: Switch,
+const meta: Meta = {
+  title: 'Inputs/Checkbox',
+  component: Checkbox,
 };
 export default meta;
 
-type Story = StoryObj;
+type Story = StoryObj;
 
-export const Example = {
+export const Example: Story = {
   args: {
     isChecked: false,
-    label: 'Switch Me!',
+    label: 'Try Me!',
   },
   /**
-   * πŸ‘‡ React believes the Storybook function "useArgs" is a hook, but it's really not.
-   * Using a named capital-letter function prevents an ESLint warning related to this.
-   * Don't lint? You can use an arrow function instead.
+   * πŸ‘‡ To avoid linting issues, it is recommended to use a function with a capitalized name.
+   * If you are not concerned with linting, you may use an arrow function.
    */
   render: function Render(args) {
     const [{ isChecked }, updateArgs] = useArgs();
@@ -30,7 +29,7 @@ export const Example = {
       updateArgs({ isChecked: !isChecked });
     }
 
-    return ;
+    return ;
   },
 };
 ```
diff --git a/docs/writing-stories/args.md b/docs/writing-stories/args.md
index 6c6b98b1fbf7..dbf89e71aed7 100644
--- a/docs/writing-stories/args.md
+++ b/docs/writing-stories/args.md
@@ -215,14 +215,14 @@ Args specified through the URL will extend and override any default values of ar
 
 ## Setting args from within a story
 
-Components with interactivity often need their containing component, or page, to respond to events, modify their state, then pass a changed arg back to the rendered component to reflect the change. For example, you would want a Switch component to be checked by a user and the arg shown in Storybook to reflect the change. This can be accomplished by using the `useArgs` hook exported by `@storybook/preview-api`:
+Components with interactivity often need their containing component, or page, to respond to events, modify their state, then pass a changed arg back to the rendered component to reflect the change. For example, you would want a Checkbox component to be checked by a user and the arg shown in Storybook to reflect the change. This can be accomplished by using the `useArgs` hook exported by `@storybook/preview-api`:
 
 
 
 
 
diff --git a/node_modules/.package-lock.json b/node_modules/.package-lock.json
new file mode 100644
index 000000000000..b157d40c0f7a
--- /dev/null
+++ b/node_modules/.package-lock.json
@@ -0,0 +1,6 @@
+{
+  "name": "@storybook/root",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {}
+}

From 44fa3c34c7667b5eef546afe9d4e58b20aa8aa35 Mon Sep 17 00:00:00 2001
From: Jon Badgett 
Date: Fri, 11 Aug 2023 16:09:27 -0500
Subject: [PATCH 034/312] removed added file. Why wasn't this excluded via
 .gitignore???

---
 node_modules/.package-lock.json | 6 ------
 1 file changed, 6 deletions(-)
 delete mode 100644 node_modules/.package-lock.json

diff --git a/node_modules/.package-lock.json b/node_modules/.package-lock.json
deleted file mode 100644
index b157d40c0f7a..000000000000
--- a/node_modules/.package-lock.json
+++ /dev/null
@@ -1,6 +0,0 @@
-{
-  "name": "@storybook/root",
-  "lockfileVersion": 3,
-  "requires": true,
-  "packages": {}
-}

From 504fefa0160a02b369318e9a820caf44fb2cbf1f Mon Sep 17 00:00:00 2001
From: Jon Badgett 
Date: Fri, 11 Aug 2023 16:14:47 -0500
Subject: [PATCH 035/312] modify text to align to pull request comment

---
 docs/writing-stories/args.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/writing-stories/args.md b/docs/writing-stories/args.md
index dbf89e71aed7..c0a9bf0d2519 100644
--- a/docs/writing-stories/args.md
+++ b/docs/writing-stories/args.md
@@ -215,7 +215,7 @@ Args specified through the URL will extend and override any default values of ar
 
 ## Setting args from within a story
 
-Components with interactivity often need their containing component, or page, to respond to events, modify their state, then pass a changed arg back to the rendered component to reflect the change. For example, you would want a Checkbox component to be checked by a user and the arg shown in Storybook to reflect the change. This can be accomplished by using the `useArgs` hook exported by `@storybook/preview-api`:
+Interactive components often need to be controlled by their containing component or page to respond to events, modify their state and reflect those changes in the UI. For example, when a user toggles a switch component, the switch should be checked, and the arg shown in Storybook should reflect the change. To enable this, you can use the [`useArgs`](../addons/addons-api.md#useargs) API exported by `@storybook/preview-api`:
 
 
 

From 41d8edf15fda19a3be37dd4e0a04e82b841cab82 Mon Sep 17 00:00:00 2001
From: Jon Badgett 
Date: Fri, 11 Aug 2023 16:43:41 -0500
Subject: [PATCH 036/312] remove link to incorrect api

---
 docs/writing-stories/args.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/writing-stories/args.md b/docs/writing-stories/args.md
index c0a9bf0d2519..240b96dc3d4d 100644
--- a/docs/writing-stories/args.md
+++ b/docs/writing-stories/args.md
@@ -215,7 +215,7 @@ Args specified through the URL will extend and override any default values of ar
 
 ## Setting args from within a story
 
-Interactive components often need to be controlled by their containing component or page to respond to events, modify their state and reflect those changes in the UI. For example, when a user toggles a switch component, the switch should be checked, and the arg shown in Storybook should reflect the change. To enable this, you can use the [`useArgs`](../addons/addons-api.md#useargs) API exported by `@storybook/preview-api`:
+Interactive components often need to be controlled by their containing component or page to respond to events, modify their state and reflect those changes in the UI. For example, when a user toggles a switch component, the switch should be checked, and the arg shown in Storybook should reflect the change. To enable this, you can use the `useArgs` API exported by `@storybook/preview-api`:
 
 
 

From d174979a6035394b42c20baef2bd0ae4811e12d3 Mon Sep 17 00:00:00 2001
From: Michael Shilman 
Date: Sun, 13 Aug 2023 14:49:57 +0800
Subject: [PATCH 037/312] Upgrade to react-docgen 6.0.2

---
 code/frameworks/react-vite/package.json |   2 +-
 code/yarn.lock                          | 273 ++++++++++++++++++++++--
 2 files changed, 251 insertions(+), 24 deletions(-)

diff --git a/code/frameworks/react-vite/package.json b/code/frameworks/react-vite/package.json
index 810de99893dd..af7876ed0478 100644
--- a/code/frameworks/react-vite/package.json
+++ b/code/frameworks/react-vite/package.json
@@ -53,7 +53,7 @@
     "@storybook/react": "7.1.0-alpha.37",
     "@vitejs/plugin-react": "^3.0.1",
     "magic-string": "^0.30.0",
-    "react-docgen": "6.0.0-alpha.3"
+    "react-docgen": "^6.0.2"
   },
   "devDependencies": {
     "@types/node": "^16.0.0",
diff --git a/code/yarn.lock b/code/yarn.lock
index 100260faecdd..ac86b3d34443 100644
--- a/code/yarn.lock
+++ b/code/yarn.lock
@@ -365,6 +365,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/code-frame@npm:^7.22.10":
+  version: 7.22.10
+  resolution: "@babel/code-frame@npm:7.22.10"
+  dependencies:
+    "@babel/highlight": ^7.22.10
+    chalk: ^2.4.2
+  checksum: fc5fe681eda128f15b928287b6c8e2ccec45776b8662524945cde005fba725642cc47ab0cfef4e7ff9ba5acccb3e907eebc2b3a7f075b8b31b19011229170b27
+  languageName: node
+  linkType: hard
+
 "@babel/compat-data@npm:^7.17.7, @babel/compat-data@npm:^7.20.5, @babel/compat-data@npm:^7.21.4, @babel/compat-data@npm:^7.22.5":
   version: 7.22.5
   resolution: "@babel/compat-data@npm:7.22.5"
@@ -379,6 +389,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/compat-data@npm:^7.22.9":
+  version: 7.22.9
+  resolution: "@babel/compat-data@npm:7.22.9"
+  checksum: 1334264b041f8ad4e33036326970c9c26754eb5c04b3af6c223fe6da988cbb8a8542b5526f49ec1ac488210d2f710484a0e4bcd30256294ae3f261d0141febad
+  languageName: node
+  linkType: hard
+
 "@babel/core@npm:7.21.4":
   version: 7.21.4
   resolution: "@babel/core@npm:7.21.4"
@@ -471,6 +488,29 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/core@npm:^7.18.9":
+  version: 7.22.10
+  resolution: "@babel/core@npm:7.22.10"
+  dependencies:
+    "@ampproject/remapping": ^2.2.0
+    "@babel/code-frame": ^7.22.10
+    "@babel/generator": ^7.22.10
+    "@babel/helper-compilation-targets": ^7.22.10
+    "@babel/helper-module-transforms": ^7.22.9
+    "@babel/helpers": ^7.22.10
+    "@babel/parser": ^7.22.10
+    "@babel/template": ^7.22.5
+    "@babel/traverse": ^7.22.10
+    "@babel/types": ^7.22.10
+    convert-source-map: ^1.7.0
+    debug: ^4.1.0
+    gensync: ^1.0.0-beta.2
+    json5: ^2.2.2
+    semver: ^6.3.1
+  checksum: aebc08abfc4d4370d3023b1c5a22db2edd896ddbe21ed54f11c654660481f598b08fd456f9a5aa90cd2d81e0ea6767cd73f72fc11f7ad04d897f8fb20671cc1c
+  languageName: node
+  linkType: hard
+
 "@babel/generator@npm:7.21.4":
   version: 7.21.4
   resolution: "@babel/generator@npm:7.21.4"
@@ -507,6 +547,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/generator@npm:^7.22.10":
+  version: 7.22.10
+  resolution: "@babel/generator@npm:7.22.10"
+  dependencies:
+    "@babel/types": ^7.22.10
+    "@jridgewell/gen-mapping": ^0.3.2
+    "@jridgewell/trace-mapping": ^0.3.17
+    jsesc: ^2.5.1
+  checksum: 2f26ac64f0b606cd9e7799eb2bc42d371b378ba2cb3c7c92c01a3bfccca271371990bcd2dc67fee5547721ba3e1fa83ca03fe3aab30bdf417c3078b9759d2f10
+  languageName: node
+  linkType: hard
+
 "@babel/helper-annotate-as-pure@npm:7.18.6":
   version: 7.18.6
   resolution: "@babel/helper-annotate-as-pure@npm:7.18.6"
@@ -564,6 +616,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/helper-compilation-targets@npm:^7.22.10":
+  version: 7.22.10
+  resolution: "@babel/helper-compilation-targets@npm:7.22.10"
+  dependencies:
+    "@babel/compat-data": ^7.22.9
+    "@babel/helper-validator-option": ^7.22.5
+    browserslist: ^4.21.9
+    lru-cache: ^5.1.1
+    semver: ^6.3.1
+  checksum: edef207b819f491ded9462ac73858eadb155f4a0afe6cf3951459e47ad23b743ed56d7bd8a1b3f63fd25b39543db42ea58fea7b2193dcb4c98a511d7f1ad547a
+  languageName: node
+  linkType: hard
+
 "@babel/helper-create-class-features-plugin@npm:^7.18.6, @babel/helper-create-class-features-plugin@npm:^7.21.0, @babel/helper-create-class-features-plugin@npm:^7.22.5":
   version: 7.22.5
   resolution: "@babel/helper-create-class-features-plugin@npm:7.22.5"
@@ -711,6 +776,21 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/helper-module-transforms@npm:^7.22.9":
+  version: 7.22.9
+  resolution: "@babel/helper-module-transforms@npm:7.22.9"
+  dependencies:
+    "@babel/helper-environment-visitor": ^7.22.5
+    "@babel/helper-module-imports": ^7.22.5
+    "@babel/helper-simple-access": ^7.22.5
+    "@babel/helper-split-export-declaration": ^7.22.6
+    "@babel/helper-validator-identifier": ^7.22.5
+  peerDependencies:
+    "@babel/core": ^7.0.0
+  checksum: 1844dc2c9049552d13d40385cb196704a754feab60ef8c370a5e1c431a4f64b0ddd7bb1dddaa5c98288cafd5c08cd4d8e6d5aba9a11e1133b8b999ab7c9defd1
+  languageName: node
+  linkType: hard
+
 "@babel/helper-optimise-call-expression@npm:^7.22.5":
   version: 7.22.5
   resolution: "@babel/helper-optimise-call-expression@npm:7.22.5"
@@ -800,6 +880,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/helper-split-export-declaration@npm:^7.22.6":
+  version: 7.22.6
+  resolution: "@babel/helper-split-export-declaration@npm:7.22.6"
+  dependencies:
+    "@babel/types": ^7.22.5
+  checksum: d83e4b623eaa9622c267d3c83583b72f3aac567dc393dda18e559d79187961cb29ae9c57b2664137fc3d19508370b12ec6a81d28af73a50e0846819cb21c6e44
+  languageName: node
+  linkType: hard
+
 "@babel/helper-string-parser@npm:^7.21.5":
   version: 7.21.5
   resolution: "@babel/helper-string-parser@npm:7.21.5"
@@ -869,6 +958,28 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/helpers@npm:^7.22.10":
+  version: 7.22.10
+  resolution: "@babel/helpers@npm:7.22.10"
+  dependencies:
+    "@babel/template": ^7.22.5
+    "@babel/traverse": ^7.22.10
+    "@babel/types": ^7.22.10
+  checksum: 14c2f4fe0663bf4042b82a09ea6eaa53b0844ed04c70d69be8fff0db504ab25a729c72ff427e84320a328e19853b4a8d9897a3d2379c0e70751053e6e23a7992
+  languageName: node
+  linkType: hard
+
+"@babel/highlight@npm:^7.22.10":
+  version: 7.22.10
+  resolution: "@babel/highlight@npm:7.22.10"
+  dependencies:
+    "@babel/helper-validator-identifier": ^7.22.5
+    chalk: ^2.4.2
+    js-tokens: ^4.0.0
+  checksum: ac321ed90d37f76df74a44addc1692658eff64060375550bfb64919959573b14000ac83744e1ed30cc51b8b2f1291b0f0e98a3398d3c33c9c4548dd326a898fc
+  languageName: node
+  linkType: hard
+
 "@babel/highlight@npm:^7.22.5":
   version: 7.22.5
   resolution: "@babel/highlight@npm:7.22.5"
@@ -898,6 +1009,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/parser@npm:^7.22.10":
+  version: 7.22.10
+  resolution: "@babel/parser@npm:7.22.10"
+  bin:
+    parser: ./bin/babel-parser.js
+  checksum: 22de4b5b2e20dd5b44a73963e5fceef44501bacdd14f0b3b96fc16975826553c83c3e424e2ea906b4f2fb8c2129b176bcee33ae99e30de9006ceb28ded5c6ac7
+  languageName: node
+  linkType: hard
+
 "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@npm:^7.18.6, @babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@npm:^7.22.5":
   version: 7.22.5
   resolution: "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@npm:7.22.5"
@@ -2494,6 +2614,24 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/traverse@npm:^7.18.9, @babel/traverse@npm:^7.22.10":
+  version: 7.22.10
+  resolution: "@babel/traverse@npm:7.22.10"
+  dependencies:
+    "@babel/code-frame": ^7.22.10
+    "@babel/generator": ^7.22.10
+    "@babel/helper-environment-visitor": ^7.22.5
+    "@babel/helper-function-name": ^7.22.5
+    "@babel/helper-hoist-variables": ^7.22.5
+    "@babel/helper-split-export-declaration": ^7.22.6
+    "@babel/parser": ^7.22.10
+    "@babel/types": ^7.22.10
+    debug: ^4.1.0
+    globals: ^11.1.0
+  checksum: 8e8b63b053962908408ed9d954810e93f241122222db115327ed5876d020f420fc115ef2d79623c2a4928447ddc002ec220be2a152b241d19de2480c88e10cfb
+  languageName: node
+  linkType: hard
+
 "@babel/traverse@npm:^7.21.5":
   version: 7.21.5
   resolution: "@babel/traverse@npm:7.21.5"
@@ -2523,6 +2661,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/types@npm:^7.18.9, @babel/types@npm:^7.22.10":
+  version: 7.22.10
+  resolution: "@babel/types@npm:7.22.10"
+  dependencies:
+    "@babel/helper-string-parser": ^7.22.5
+    "@babel/helper-validator-identifier": ^7.22.5
+    to-fast-properties: ^2.0.0
+  checksum: 34aad930339664a3a5423d6f1d6d2738e30cd73786ff6dfd0a40bfc8f45017e70e24ef397877c86f4e7dee8ada0a53b8fd9f3d86bc0137d09a44e4b3733090f7
+  languageName: node
+  linkType: hard
+
 "@babel/types@npm:^7.21.5":
   version: 7.21.5
   resolution: "@babel/types@npm:7.21.5"
@@ -7100,7 +7249,7 @@ __metadata:
     "@types/node": ^16.0.0
     "@vitejs/plugin-react": ^3.0.1
     magic-string: ^0.30.0
-    react-docgen: 6.0.0-alpha.3
+    react-docgen: ^6.0.2
     typescript: ~4.9.3
     vite: ^4.0.0
   peerDependencies:
@@ -8140,6 +8289,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/babel__core@npm:^7.18.0":
+  version: 7.20.1
+  resolution: "@types/babel__core@npm:7.20.1"
+  dependencies:
+    "@babel/parser": ^7.20.7
+    "@babel/types": ^7.20.7
+    "@types/babel__generator": "*"
+    "@types/babel__template": "*"
+    "@types/babel__traverse": "*"
+  checksum: c83402fc7ef8abd1f94ffe350b8bde9a35ccb6c3624bc8e39b6a7e1a675d112f6b70ac1b05391a579ca3b126baffe66b0b94f954edef086c4482b97d293c3659
+  languageName: node
+  linkType: hard
+
 "@types/babel__generator@npm:*":
   version: 7.6.4
   resolution: "@types/babel__generator@npm:7.6.4"
@@ -8173,7 +8335,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/babel__traverse@npm:*, @types/babel__traverse@npm:^7.0.6":
+"@types/babel__traverse@npm:*, @types/babel__traverse@npm:^7.0.6, @types/babel__traverse@npm:^7.18.0":
   version: 7.20.1
   resolution: "@types/babel__traverse@npm:7.20.1"
   dependencies:
@@ -8298,6 +8460,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/doctrine@npm:^0.0.5":
+  version: 0.0.5
+  resolution: "@types/doctrine@npm:0.0.5"
+  checksum: 9b38d1b110e94fa34632e21f83b64ed05116f6349b5666c11bc0d4081c793f9b0be25b9d8b34df0ec38d440741836c17d4c84576e22dc00a18fe972f96688bf3
+  languageName: node
+  linkType: hard
+
 "@types/ejs@npm:^3.1.1":
   version: 3.1.2
   resolution: "@types/ejs@npm:3.1.2"
@@ -8863,6 +9032,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/resolve@npm:^1.20.2":
+  version: 1.20.2
+  resolution: "@types/resolve@npm:1.20.2"
+  checksum: c5b7e1770feb5ccfb6802f6ad82a7b0d50874c99331e0c9b259e415e55a38d7a86ad0901c57665d93f75938be2a6a0bc9aa06c9749192cadb2e4512800bbc6e6
+  languageName: node
+  linkType: hard
+
 "@types/responselike@npm:^1.0.0":
   version: 1.0.0
   resolution: "@types/responselike@npm:1.0.0"
@@ -11735,6 +11911,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"browserslist@npm:^4.21.9":
+  version: 4.21.10
+  resolution: "browserslist@npm:4.21.10"
+  dependencies:
+    caniuse-lite: ^1.0.30001517
+    electron-to-chromium: ^1.4.477
+    node-releases: ^2.0.13
+    update-browserslist-db: ^1.0.11
+  bin:
+    browserslist: cli.js
+  checksum: e8c98496e5f2a5128d0e2f1f186dc0416bfc49c811e568b19c9e07a56cccc1f7f415fa4f532488e6a13dfacbe3332a9b55b152082ff125402696a11a158a0894
+  languageName: node
+  linkType: hard
+
 "bs-logger@npm:0.x, bs-logger@npm:^0.2.6":
   version: 0.2.6
   resolution: "bs-logger@npm:0.2.6"
@@ -12070,6 +12260,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"caniuse-lite@npm:^1.0.30001517":
+  version: 1.0.30001520
+  resolution: "caniuse-lite@npm:1.0.30001520"
+  checksum: 48daf0d55e72e343f09fe17cbd47303a5bf4d65f6ec08ef68cc998c4fed073c9789d710e296496140e8179138dccb4667b786e260ca5451e1663786ef889db3b
+  languageName: node
+  linkType: hard
+
 "case-sensitive-paths-webpack-plugin@npm:^2.4.0":
   version: 2.4.0
   resolution: "case-sensitive-paths-webpack-plugin@npm:2.4.0"
@@ -14356,6 +14553,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"electron-to-chromium@npm:^1.4.477":
+  version: 1.4.490
+  resolution: "electron-to-chromium@npm:1.4.490"
+  checksum: d205e3c9f4bf14cbaaa2be5bf3f3d498e161ec0cc6f10da7bfdd2c355e4ae1937244335fabe8b376e970d14ba2b2c415aa2a2d89ea61c000f54e6ed137853bb9
+  languageName: node
+  linkType: hard
+
 "elliptic@npm:^6.5.3":
   version: 6.5.4
   resolution: "elliptic@npm:6.5.4"
@@ -22221,7 +22425,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"min-indent@npm:^1.0.0":
+"min-indent@npm:^1.0.0, min-indent@npm:^1.0.1":
   version: 1.0.1
   resolution: "min-indent@npm:1.0.1"
   checksum: 7e207bd5c20401b292de291f02913230cb1163abca162044f7db1d951fa245b174dc00869d40dd9a9f32a885ad6a5f3e767ee104cf278f399cb4e92d3f582d5c
@@ -22978,6 +23182,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"node-releases@npm:^2.0.13":
+  version: 2.0.13
+  resolution: "node-releases@npm:2.0.13"
+  checksum: 2fb44bf70fc949d27f3a48a7fd1a9d1d603ddad4ccd091f26b3fb8b1da976605d919330d7388ccd55ca2ade0dc8b2e12841ba19ef249c8bb29bf82532d401af7
+  languageName: node
+  linkType: hard
+
 "nopt@npm:^6.0.0":
   version: 6.0.0
   resolution: "nopt@npm:6.0.0"
@@ -25714,26 +25925,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-docgen@npm:6.0.0-alpha.3":
-  version: 6.0.0-alpha.3
-  resolution: "react-docgen@npm:6.0.0-alpha.3"
-  dependencies:
-    "@babel/core": ^7.7.5
-    "@babel/generator": ^7.12.11
-    ast-types: ^0.14.2
-    commander: ^2.19.0
-    doctrine: ^3.0.0
-    estree-to-babel: ^3.1.0
-    neo-async: ^2.6.1
-    node-dir: ^0.1.10
-    resolve: ^1.17.0
-    strip-indent: ^3.0.0
-  bin:
-    react-docgen: bin/react-docgen.js
-  checksum: 284bba5528d5e9084c3ed36b2d2fec8fc5d55f3fb8ca544ec3a0d1ab98c39001ecb7db6e03a1088b82eb3d750c1343cde2fc9b7729540277eda40e10f38912d8
-  languageName: node
-  linkType: hard
-
 "react-docgen@npm:^5.0.0":
   version: 5.4.3
   resolution: "react-docgen@npm:5.4.3"
@@ -25754,6 +25945,24 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-docgen@npm:^6.0.2":
+  version: 6.0.2
+  resolution: "react-docgen@npm:6.0.2"
+  dependencies:
+    "@babel/core": ^7.18.9
+    "@babel/traverse": ^7.18.9
+    "@babel/types": ^7.18.9
+    "@types/babel__core": ^7.18.0
+    "@types/babel__traverse": ^7.18.0
+    "@types/doctrine": ^0.0.5
+    "@types/resolve": ^1.20.2
+    doctrine: ^3.0.0
+    resolve: ^1.22.1
+    strip-indent: ^4.0.0
+  checksum: 040f9b460982d6b4690ed5381b6181c58f6a2cd9cd6d70cfc449663527eaf93908cc6f7f06b018d9bc345b65d0cb87cb3d05541403556f20c1feab28342b0b4c
+  languageName: node
+  linkType: hard
+
 "react-dom@npm:^16.8.0":
   version: 16.14.0
   resolution: "react-dom@npm:16.14.0"
@@ -27492,6 +27701,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"semver@npm:^6.3.1":
+  version: 6.3.1
+  resolution: "semver@npm:6.3.1"
+  bin:
+    semver: bin/semver.js
+  checksum: e3d79b609071caa78bcb6ce2ad81c7966a46a7431d9d58b8800cfa9cb6a63699b3899a0e4bcce36167a284578212d9ae6942b6929ba4aa5015c079a67751d42d
+  languageName: node
+  linkType: hard
+
 "semver@npm:~7.0.0":
   version: 7.0.0
   resolution: "semver@npm:7.0.0"
@@ -28577,6 +28795,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"strip-indent@npm:^4.0.0":
+  version: 4.0.0
+  resolution: "strip-indent@npm:4.0.0"
+  dependencies:
+    min-indent: ^1.0.1
+  checksum: 6b1fb4e22056867f5c9e7a6f3f45922d9a2436cac758607d58aeaac0d3b16ec40b1c43317de7900f1b8dd7a4107352fa47fb960f2c23566538c51e8585c8870e
+  languageName: node
+  linkType: hard
+
 "strip-json-comments@npm:^2.0.0":
   version: 2.0.1
   resolution: "strip-json-comments@npm:2.0.1"

From c6ab522efec8261e7c1864ab4ee9c2fb19fc030d Mon Sep 17 00:00:00 2001
From: Michael Shilman 
Date: Sun, 13 Aug 2023 18:34:39 +0800
Subject: [PATCH 038/312] Docs-tools: Fix react-docgen enum handling

---
 .../src/argTypes/convert/proptypes/convert.ts       | 12 ++----------
 .../src/argTypes/convert/typescript/convert.ts      | 13 +++++++++++++
 .../src/argTypes/convert/typescript/types.ts        |  2 +-
 code/lib/docs-tools/src/argTypes/convert/utils.ts   |  7 +++++++
 4 files changed, 23 insertions(+), 11 deletions(-)

diff --git a/code/lib/docs-tools/src/argTypes/convert/proptypes/convert.ts b/code/lib/docs-tools/src/argTypes/convert/proptypes/convert.ts
index 6caa89a5d268..82b85c0333e1 100644
--- a/code/lib/docs-tools/src/argTypes/convert/proptypes/convert.ts
+++ b/code/lib/docs-tools/src/argTypes/convert/proptypes/convert.ts
@@ -2,7 +2,7 @@
 import mapValues from 'lodash/mapValues.js';
 import type { SBType } from '@storybook/types';
 import type { PTType } from './types';
-import { includesQuotes, trimQuotes } from '../utils';
+import { parseLiteral } from '../utils';
 
 const SIGNATURE_REGEXP = /^\(.*\) => /;
 
@@ -13,15 +13,7 @@ export const convert = (type: PTType): SBType | any => {
 
   switch (name) {
     case 'enum': {
-      const values = computed
-        ? value
-        : value.map((v: PTType) => {
-            const trimmedValue = trimQuotes(v.value);
-
-            return includesQuotes(v.value) || Number.isNaN(Number(trimmedValue))
-              ? trimmedValue
-              : Number(trimmedValue);
-          });
+      const values = computed ? value : value.map((v: PTType) => parseLiteral(v.value));
       return { ...base, name, value: values };
     }
     case 'string':
diff --git a/code/lib/docs-tools/src/argTypes/convert/typescript/convert.ts b/code/lib/docs-tools/src/argTypes/convert/typescript/convert.ts
index 4683b933f845..ffec5b18db20 100644
--- a/code/lib/docs-tools/src/argTypes/convert/typescript/convert.ts
+++ b/code/lib/docs-tools/src/argTypes/convert/typescript/convert.ts
@@ -1,6 +1,7 @@
 /* eslint-disable no-case-declarations */
 import type { SBType } from '@storybook/types';
 import type { TSType, TSSigType } from './types';
+import { parseLiteral } from '../utils';
 
 const convertSig = (type: TSSigType) => {
   switch (type.type) {
@@ -37,6 +38,18 @@ export const convert = (type: TSType): SBType | void => {
     case 'signature':
       return { ...base, ...convertSig(type) };
     case 'union':
+      let result;
+      if (type.elements.every((element) => element.name === 'literal')) {
+        result = {
+          ...base,
+          name: 'enum',
+          // @ts-expect-error fix types
+          value: type.elements.map((v) => parseLiteral(v.value)),
+        };
+      } else {
+        result = { ...base, name, value: type.elements.map(convert) };
+      }
+      return result;
     case 'intersection':
       return { ...base, name, value: type.elements.map(convert) };
     default:
diff --git a/code/lib/docs-tools/src/argTypes/convert/typescript/types.ts b/code/lib/docs-tools/src/argTypes/convert/typescript/types.ts
index dee016d76734..aed18f3f4160 100644
--- a/code/lib/docs-tools/src/argTypes/convert/typescript/types.ts
+++ b/code/lib/docs-tools/src/argTypes/convert/typescript/types.ts
@@ -33,7 +33,7 @@ type TSObjectSigType = TSBaseType & {
 };
 
 type TSScalarType = TSBaseType & {
-  name: 'any' | 'boolean' | 'number' | 'void' | 'string' | 'symbol';
+  name: 'any' | 'boolean' | 'number' | 'void' | 'string' | 'symbol' | 'literal';
 };
 
 type TSArrayType = TSBaseType & {
diff --git a/code/lib/docs-tools/src/argTypes/convert/utils.ts b/code/lib/docs-tools/src/argTypes/convert/utils.ts
index 6523490388a8..8af215e69aec 100644
--- a/code/lib/docs-tools/src/argTypes/convert/utils.ts
+++ b/code/lib/docs-tools/src/argTypes/convert/utils.ts
@@ -1,3 +1,10 @@
 const QUOTE_REGEX = /^['"]|['"]$/g;
 export const trimQuotes = (str: string) => str.replace(QUOTE_REGEX, '');
 export const includesQuotes = (str: string) => QUOTE_REGEX.test(str);
+export const parseLiteral = (str: string) => {
+  const trimmedValue = trimQuotes(str);
+
+  return includesQuotes(str) || Number.isNaN(Number(trimmedValue))
+    ? trimmedValue
+    : Number(trimmedValue);
+};

From f86b57b56168feabe0673e09967974e6ae5a7755 Mon Sep 17 00:00:00 2001
From: Nathan Heaps <1282393+nsheaps@users.noreply.github.com>
Date: Fri, 18 Aug 2023 15:15:30 -0400
Subject: [PATCH 039/312] Update error message to be useful when google fonts
 fail to load

Helpful for debugging which fonts need to be mocked

related: https://github.com/storybookjs/storybook/issues/23332
---
 .../font/webpack/loader/google/get-font-face-declarations.ts  | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/code/frameworks/nextjs/src/font/webpack/loader/google/get-font-face-declarations.ts b/code/frameworks/nextjs/src/font/webpack/loader/google/get-font-face-declarations.ts
index 9526072fe0bf..3f45a5d085e4 100644
--- a/code/frameworks/nextjs/src/font/webpack/loader/google/get-font-face-declarations.ts
+++ b/code/frameworks/nextjs/src/font/webpack/loader/google/get-font-face-declarations.ts
@@ -33,7 +33,7 @@ export async function getFontFaceDeclarations(options: LoaderOptions) {
       cssCache.delete(url);
     }
     if (fontFaceCSS === null) {
-      throw Error(`Failed to fetch \`${fontFamily}\` from Google Fonts.`);
+      throw Error(`Failed to fetch \`${fontFamily}\` from Google Fonts. URL: \`${url}\``);
     }
 
     return {
@@ -45,6 +45,6 @@ export async function getFontFaceDeclarations(options: LoaderOptions) {
       variable,
     };
   } catch (error) {
-    throw new Error("Google Fonts couldn't be loaded.");
+    throw new Error("Google Fonts couldn't be loaded.", {cause: error});
   }
 }

From 1f5b00b9b5c2b8e0a37cd2037f6d772539950b21 Mon Sep 17 00:00:00 2001
From: Nathan Heaps <1282393+nsheaps@users.noreply.github.com>
Date: Fri, 18 Aug 2023 15:29:57 -0400
Subject: [PATCH 040/312] basic docs (will add code references in a moment)

---
 .../build-pages-with-storybook.md             | 21 +++++++++++++++++++
 1 file changed, 21 insertions(+)

diff --git a/docs/writing-stories/build-pages-with-storybook.md b/docs/writing-stories/build-pages-with-storybook.md
index 4307a31020f4..90e0508a8a9f 100644
--- a/docs/writing-stories/build-pages-with-storybook.md
+++ b/docs/writing-stories/build-pages-with-storybook.md
@@ -394,3 +394,24 @@ If you’ve set up `GlobalContainerContext`, you’ll need to set up a decorator
 />
 
 
+
+### Mocking fonts
+
+If your application uses fonts from a Google, occasionally fetching these fonts may fail as part of your storybook build. It is highly recommended to mock these requests, as those failures can cause your pipeline to fail as well.
+
+#### Mocking fonts in Next.js
+
+Next.js [supports](https://github.com/vercel/next.js/blob/725ddc7371f80cca273779d37f961c3e20356f95/packages/font/src/google/fetch-css-from-google-fonts.ts#L36)https://github.com/vercel/next.js/blob/725ddc7371f80cca273779d37f961c3e20356f95/packages/font/src/google/fetch-css-from-google-fonts.ts#L36 mocking fonts via a javascript module located where the env var `NEXT_FONT_GOOGLE_MOCKED_RESPONSES` references.
+
+
+
+
+
+

From 9fb47bd45d06ba68d6fe840445581f3b48f23068 Mon Sep 17 00:00:00 2001
From: Nathan Heaps <1282393+nsheaps@users.noreply.github.com>
Date: Fri, 18 Aug 2023 15:42:00 -0400
Subject: [PATCH 041/312] Update docs

---
 docs/sharing/publish-storybook.md             |  6 ++++
 ...hromatic-github-action-with-mocking.js.mdx | 10 +++++++
 .../common/mocked-google-fonts.js.mdx         | 29 +++++++++++++++++++
 .../build-pages-with-storybook.md             |  6 ++--
 4 files changed, 47 insertions(+), 4 deletions(-)
 create mode 100644 docs/snippets/common/chromatic-github-action-with-mocking.js.mdx
 create mode 100644 docs/snippets/common/mocked-google-fonts.js.mdx

diff --git a/docs/sharing/publish-storybook.md b/docs/sharing/publish-storybook.md
index 0c89b6978653..ad011fc3b7ab 100644
--- a/docs/sharing/publish-storybook.md
+++ b/docs/sharing/publish-storybook.md
@@ -109,6 +109,12 @@ In your project's root directory, add a new file called `chromatic.yml` inside t
 
 

 
+

+
+πŸ’‘ External font resources may occasionally fail to load at build timefor a variety of reasons. If you have issues with them, a good way to get around that problem is to [mock the fonts](../writing-stories/build-pages-with-storybook.md#mocking-fonts) your application requires
+
+

+
 Commit and push the file. Congratulations, you've successfully automated publishing your Storybook. Now whenever you open a PR you’ll get a handy link to your published Storybook in your PR checks.
 
 ![PR check publish](./prbadge-publish.png)
diff --git a/docs/snippets/common/chromatic-github-action-with-mocking.js.mdx b/docs/snippets/common/chromatic-github-action-with-mocking.js.mdx
new file mode 100644
index 000000000000..2b4ae573a5e5
--- /dev/null
+++ b/docs/snippets/common/chromatic-github-action-with-mocking.js.mdx
@@ -0,0 +1,10 @@
+```shell
+      - uses: chromaui/action@v1
+        env:
+          #πŸ‘‡ the location of mocked fonts to use
+          NEXT_FONT_GOOGLE_MOCKED_RESPONSES: ${{ github.workspace }}/mocked-google-fonts.js
+        with:
+          #πŸ‘‡ Chromatic projectToken,
+          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
+          token: ${{ secrets.GITHUB_TOKEN }}
+```
diff --git a/docs/snippets/common/mocked-google-fonts.js.mdx b/docs/snippets/common/mocked-google-fonts.js.mdx
new file mode 100644
index 000000000000..ccc04bd0efab
--- /dev/null
+++ b/docs/snippets/common/mocked-google-fonts.js.mdx
@@ -0,0 +1,29 @@
+```js
+// mocked-google-fonts.js
+
+//πŸ‘‡ Mocked responses of google fonts
+// If you run into errors during your build, easiest is to fetch them yourself and drop them in here
+// so the URL requested explicitly matches the mocks rather than trying to determine it yourself.
+module.exports = {
+  "https://fonts.googleapis.com/css?family=Inter:wght@400;500;600;800&display=block": `
+    /* cyrillic-ext */
+    @font-face {
+      font-family: 'Inter';
+      font-style: normal;
+      font-weight: 400;
+      font-display: block;
+      src: url(https://fonts.gstatic.com/s/inter/v12/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuLyfAZJhiJ-Ek-_EeAmM.woff2) format('woff2');
+      unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+    }
+    /* more font declarations go here */
+    /* latin */
+    @font-face {
+      font-family: 'Inter';
+      font-style: normal;
+      font-weight: 400;
+      font-display: block;
+      src: url(https://fonts.gstatic.com/s/inter/v12/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuLyfAZ9hiJ-Ek-_EeA.woff2) format('woff2');
+      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+    }`,
+}
+```
diff --git a/docs/writing-stories/build-pages-with-storybook.md b/docs/writing-stories/build-pages-with-storybook.md
index 90e0508a8a9f..6553d19cdf1d 100644
--- a/docs/writing-stories/build-pages-with-storybook.md
+++ b/docs/writing-stories/build-pages-with-storybook.md
@@ -407,10 +407,8 @@ Next.js [supports](https://github.com/vercel/next.js/blob/725ddc7371f80cca273779
 
 
 

From 6405f3646ca2935ff9eb882a6d6e131cceed3452 Mon Sep 17 00:00:00 2001
From: Nathan Heaps <1282393+nsheaps@users.noreply.github.com>
Date: Fri, 18 Aug 2023 15:44:34 -0400
Subject: [PATCH 042/312] add missing space

---
 docs/sharing/publish-storybook.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/sharing/publish-storybook.md b/docs/sharing/publish-storybook.md
index ad011fc3b7ab..1e3b4145ff20 100644
--- a/docs/sharing/publish-storybook.md
+++ b/docs/sharing/publish-storybook.md
@@ -111,7 +111,7 @@ In your project's root directory, add a new file called `chromatic.yml` inside t
 
 

 
-πŸ’‘ External font resources may occasionally fail to load at build timefor a variety of reasons. If you have issues with them, a good way to get around that problem is to [mock the fonts](../writing-stories/build-pages-with-storybook.md#mocking-fonts) your application requires
+πŸ’‘ External font resources may occasionally fail to load at build time for a variety of reasons. If you have issues with them, a good way to get around that problem is to [mock the fonts](../writing-stories/build-pages-with-storybook.md#mocking-fonts) your application requires
 
 

 

From 9d84f42bca9e03b435da00d9bde5f4e18447a3c7 Mon Sep 17 00:00:00 2001
From: Nathan Heaps <1282393+nsheaps@users.noreply.github.com>
Date: Fri, 18 Aug 2023 15:48:22 -0400
Subject: [PATCH 043/312] remove extra word

---
 docs/writing-stories/build-pages-with-storybook.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/writing-stories/build-pages-with-storybook.md b/docs/writing-stories/build-pages-with-storybook.md
index 6553d19cdf1d..53f1de9efb93 100644
--- a/docs/writing-stories/build-pages-with-storybook.md
+++ b/docs/writing-stories/build-pages-with-storybook.md
@@ -397,7 +397,7 @@ If you’ve set up `GlobalContainerContext`, you’ll need to set up a decorator
 
 ### Mocking fonts
 
-If your application uses fonts from a Google, occasionally fetching these fonts may fail as part of your storybook build. It is highly recommended to mock these requests, as those failures can cause your pipeline to fail as well.
+If your application uses fonts from Google, occasionally fetching these fonts may fail as part of your storybook build. It is highly recommended to mock these requests, as those failures can cause your pipeline to fail as well.
 
 #### Mocking fonts in Next.js
 

From 6b00ed9263ed94ca79146bf3ce56c4a0276b1def Mon Sep 17 00:00:00 2001
From: Martin Nabhan <7613182+martinnabhan@users.noreply.github.com>
Date: Sun, 20 Aug 2023 11:30:42 +0900
Subject: [PATCH 044/312] Make sure the Next.js Image Context is reused instead
 of recreated when imported

---
 code/frameworks/nextjs/package.json | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/code/frameworks/nextjs/package.json b/code/frameworks/nextjs/package.json
index 14ec26a04924..3d1f45e1718a 100644
--- a/code/frameworks/nextjs/package.json
+++ b/code/frameworks/nextjs/package.json
@@ -141,12 +141,15 @@
       "./src/preview.tsx",
       "./src/next-image-loader-stub.ts",
       "./src/images/context.ts",
+      "./src/images/decorator.tsx",
       "./src/images/next-future-image.tsx",
       "./src/images/next-legacy-image.tsx",
       "./src/images/next-image.tsx",
       "./src/font/webpack/loader/storybook-nextjs-font-loader.ts"
     ],
     "externals": [
+      "./context",
+      "./images/decorator",
       "sb-original/next/image",
       "sb-original/next/future/image",
       "sb-original/next/legacy/image"

From 13a729ca5501d4297e52dbf64c98eb7eef74964b Mon Sep 17 00:00:00 2001
From: Nathan Heaps <1282393+nsheaps@users.noreply.github.com>
Date: Mon, 21 Aug 2023 09:51:58 -0400
Subject: [PATCH 045/312] linting

---
 .../font/webpack/loader/google/get-font-face-declarations.ts    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/code/frameworks/nextjs/src/font/webpack/loader/google/get-font-face-declarations.ts b/code/frameworks/nextjs/src/font/webpack/loader/google/get-font-face-declarations.ts
index 3f45a5d085e4..8da5b6acf833 100644
--- a/code/frameworks/nextjs/src/font/webpack/loader/google/get-font-face-declarations.ts
+++ b/code/frameworks/nextjs/src/font/webpack/loader/google/get-font-face-declarations.ts
@@ -45,6 +45,6 @@ export async function getFontFaceDeclarations(options: LoaderOptions) {
       variable,
     };
   } catch (error) {
-    throw new Error("Google Fonts couldn't be loaded.", {cause: error});
+    throw new Error("Google Fonts couldn't be loaded.", { cause: error });
   }
 }

From abf551fa1037b8d2eca81b2ea723964019a09588 Mon Sep 17 00:00:00 2001
From: Nathan Heaps 
Date: Mon, 21 Aug 2023 09:59:52 -0400
Subject: [PATCH 046/312] prettier linting

---
 docs/snippets/common/mocked-google-fonts.js.mdx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/snippets/common/mocked-google-fonts.js.mdx b/docs/snippets/common/mocked-google-fonts.js.mdx
index ccc04bd0efab..a56429147f1d 100644
--- a/docs/snippets/common/mocked-google-fonts.js.mdx
+++ b/docs/snippets/common/mocked-google-fonts.js.mdx
@@ -5,7 +5,7 @@
 // If you run into errors during your build, easiest is to fetch them yourself and drop them in here
 // so the URL requested explicitly matches the mocks rather than trying to determine it yourself.
 module.exports = {
-  "https://fonts.googleapis.com/css?family=Inter:wght@400;500;600;800&display=block": `
+  'https://fonts.googleapis.com/css?family=Inter:wght@400;500;600;800&display=block': `
     /* cyrillic-ext */
     @font-face {
       font-family: 'Inter';
@@ -25,5 +25,5 @@ module.exports = {
       src: url(https://fonts.gstatic.com/s/inter/v12/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuLyfAZ9hiJ-Ek-_EeA.woff2) format('woff2');
       unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
     }`,
-}
+};
 ```

From 4d509a51811427e625f619f359db46c8117eee65 Mon Sep 17 00:00:00 2001
From: storybook-bot <32066757+storybook-bot@users.noreply.github.com>
Date: Wed, 23 Aug 2023 10:10:04 +0000
Subject: [PATCH 047/312] Update ./docs/versions/next.json for v7.4.0-alpha.1

---
 docs/versions/next.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/versions/next.json b/docs/versions/next.json
index 13e20888799b..1c94da1365b5 100644
--- a/docs/versions/next.json
+++ b/docs/versions/next.json
@@ -1 +1 @@
-{"version":"7.4.0-alpha.0","info":{"plain":"- Index: Fix `*.story.*` CSF indexing - [#23852](https://github.com/storybookjs/storybook/pull/23852), thanks [@shilman](https://github.com/shilman)!"}}
+{"version":"7.4.0-alpha.1","info":{"plain":"- Build: Migrate @storybook/scripts to strict-ts - [#23818](https://github.com/storybookjs/storybook/pull/23818), thanks [@stilt0n](https://github.com/stilt0n)!\n- CLI: Exclude addon-styling from upgrade - [#23841](https://github.com/storybookjs/storybook/pull/23841), thanks [@Integrayshaun](https://github.com/Integrayshaun)!\n- Core: Add error categorization framework - [#23653](https://github.com/storybookjs/storybook/pull/23653), thanks [@yannbf](https://github.com/yannbf)!\n- Core: Fix error thrown if `docs.defaultName` is unset - [#23893](https://github.com/storybookjs/storybook/pull/23893), thanks [@stilt0n](https://github.com/stilt0n)!\n- Core: Fix race-condition relating to `addons.setConfig` - [#23802](https://github.com/storybookjs/storybook/pull/23802), thanks [@ndelangen](https://github.com/ndelangen)!\n- Maintenance: Move filtering of sidebar into the state - [#23911](https://github.com/storybookjs/storybook/pull/23911), thanks [@ndelangen](https://github.com/ndelangen)!\n- Maintenance: Revert \"WebpackBuilder: Remove need for `react` as peerDependency\" - [#23882](https://github.com/storybookjs/storybook/pull/23882), thanks [@vanessayuenn](https://github.com/vanessayuenn)!\n- Manager API: Fix `api.getAddonState`default value - [#23804](https://github.com/storybookjs/storybook/pull/23804), thanks [@sookmax](https://github.com/sookmax)!\n- Publish: Don't distribute src files or unnecessary template files - [#23853](https://github.com/storybookjs/storybook/pull/23853), thanks [@shilman](https://github.com/shilman)!\n- UI: Add an experimental API for adding sidebar filter functions at runtime - [#23722](https://github.com/storybookjs/storybook/pull/23722), thanks [@ndelangen](https://github.com/ndelangen)!\n- UI: Removal of experimental components - [#23907](https://github.com/storybookjs/storybook/pull/23907), thanks [@ndelangen](https://github.com/ndelangen)!\n- Vue3: Add support for  Global Apps install - [#23772](https://github.com/storybookjs/storybook/pull/23772), thanks [@chakAs3](https://github.com/chakAs3)!\n- Vue3: Use slot value directly if it's a string in source decorator - [#23784](https://github.com/storybookjs/storybook/pull/23784), thanks [@nasvillanueva](https://github.com/nasvillanueva)!"}}

From de8ab0988a98aaeb4732c010e8ae5860ebd450cf Mon Sep 17 00:00:00 2001
From: Jeppe Reinhold 
Date: Wed, 23 Aug 2023 14:00:19 +0200
Subject: [PATCH 048/312] add migration notes for storyIndexers

---
 MIGRATION.md | 65 ++++++++++++++++++++++++++++++++++++++++++++--------
 1 file changed, 56 insertions(+), 9 deletions(-)

diff --git a/MIGRATION.md b/MIGRATION.md
index 5022eefb59bd..0736a8c3e0ed 100644
--- a/MIGRATION.md
+++ b/MIGRATION.md
@@ -1,7 +1,9 @@
 
Migration

 
+- [From version 7.3.0 to 7.4.0](#from-version-730-to-740)
+  - [`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 API is more type-strict](#addon-api-is-more-type-strict)
 - [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)
@@ -27,7 +29,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)
@@ -39,7 +41,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)
@@ -89,7 +91,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)
@@ -302,6 +304,50 @@
   - [Packages renaming](#packages-renaming)
   - [Deprecated embedded addons](#deprecated-embedded-addons)
 
+## From version 7.3.0 to 7.4.0
+
+#### `storyIndexers` is replaced with `experimental_indexers`
+
+Defining custom indexers for stories has become a more official - yet still experimental - API which is now configured at `experimental_indexers` instead of `storyIndexers` in `main.ts`. `storyIndexers` has been deprecated and will be fully removed in version 8.0.0.
+
+The new experimental indexers are documented [here](TODO!!!). The most notable change from `storyIndexers` is that the indexer must now return a list of [`IndexInput`](https://github.com/storybookjs/storybook/blob/next/code/lib/types/src/modules/indexer.ts#L104-L148) instead of `CsfFile`. It's possible to construct an `IndexInput` from a `CsfFile` using the `CsfFile.indexInputs` getter.
+
+That means you can convert an existing story indexer like this:
+
+```diff
+// .storybook/main.ts
+
+import { readFileSync } from 'fs';
+import { loadCsf } from '@storybook/csf-tools';
+
+export default {
+-  storyIndexers = (indexers) => {
+-    const indexer = async (fileName, opts) => {
++  experimental_indexers = (indexers) => {
++    const index = async (fileName, opts) => {
+      const code = readFileSync(fileName, { encoding: 'utf-8' });
+      const makeTitle = (userTitle) => {
+        // Do something with the auto title retrieved by Storybook
+        return userTitle;
+      };
+
+      // Parse the CSF file with makeTitle as a custom context
+-      return loadCsf(code, { ...compilationOptions, makeTitle, fileName }).parse();
++      return loadCsf(code, { ...compilationOptions, makeTitle, fileName }).parse().indexInputs;
+    };
+
+    return [
+      {
+        test: /(stories|story)\.[tj]sx?$/,
+-        indexer,
++        index,
+      },
+      ...(indexers || []),
+    ];
+  },
+};
+```
+
 ## From version 7.0.0 to 7.2.0
 
 #### Addon API is more type-strict
@@ -311,6 +357,7 @@ When registering an addon using `@storybook/manager-api`, the addon API is now m
 The `type` property is now a required field, and the `id` property should not be set anymore.
 
 Here's a correct example:
+
 ```tsx
 import { addons, types } from '@storybook/manager-api';
 
@@ -318,7 +365,7 @@ addons.register('my-addon', () => {
   addons.add('my-addon/panel', {
     type: types.PANEL,
     title: 'My Addon',
-    render: ({ active }) => active ? 
Hello World
 : null,
+    render: ({ active }) => (active ? 
Hello World
 : null),
   });
 });
 ```
@@ -869,16 +916,16 @@ Given the following `main.js`:
 
 ```js
 export default {
-  stories: ['../**/*.stories.*']
-}
+  stories: ['../**/*.stories.*'],
+};
 ```
 
 If you want to restore the previous behavior to include `node_modules`, you can update it to:
 
 ```js
 export default {
-  stories: ['../**/*.stories.*', '../**/node_modules/**/*.stories.*']
-}
+  stories: ['../**/*.stories.*', '../**/node_modules/**/*.stories.*'],
+};
 ```
 
 The first glob would have node_modules automatically excluded by Storybook, and the second glob would include all stories that are under a nested `node_modules` directory.

From 8b81a5f3657e52384c31f6117372514e1d22026d Mon Sep 17 00:00:00 2001
From: Jeppe Reinhold 
Date: Wed, 23 Aug 2023 14:03:22 +0200
Subject: [PATCH 049/312] deprecate storyIndexers

---
 code/lib/core-server/src/utils/StoryIndexGenerator.ts | 10 +++++-----
 code/lib/types/src/modules/core-common.ts             |  2 +-
 code/lib/types/src/modules/indexer.ts                 |  4 ++--
 3 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/code/lib/core-server/src/utils/StoryIndexGenerator.ts b/code/lib/core-server/src/utils/StoryIndexGenerator.ts
index d2a195a31463..7a501a95a5f0 100644
--- a/code/lib/core-server/src/utils/StoryIndexGenerator.ts
+++ b/code/lib/core-server/src/utils/StoryIndexGenerator.ts
@@ -25,7 +25,7 @@ import type {
 } from '@storybook/types';
 import { userOrAutoTitleFromSpecifier, sortStoriesV7 } from '@storybook/preview-api';
 import { commonGlobOptions, normalizeStoryPath } from '@storybook/core-common';
-import { logger, once } from '@storybook/node-logger';
+import { deprecate, logger, once } from '@storybook/node-logger';
 import { getStorySortParameter } from '@storybook/csf-tools';
 import { storyNameFromExport, toId } from '@storybook/csf';
 import { analyze } from '@storybook/docs-mdx';
@@ -120,10 +120,10 @@ export class StoryIndexGenerator {
   ) {
     this.specifierToCache = new Map();
     if (options.storyIndexers.length > 1) {
-      // TODO: write migration notes before enabling this warning
-      // deprecate(
-      //   "'storyIndexers' is deprecated, please use 'indexers' instead. See migration notes at XXX"
-      // );
+      deprecate(
+        dedent`'storyIndexers' is deprecated, please use 'experimental_indexers' instead.
+        Please refer to the migration guide at https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#storyindexers-is-replaced-with-experimental_indexers`
+      );
     }
   }
 
diff --git a/code/lib/types/src/modules/core-common.ts b/code/lib/types/src/modules/core-common.ts
index 45d94e585eb3..0f2a9f54c271 100644
--- a/code/lib/types/src/modules/core-common.ts
+++ b/code/lib/types/src/modules/core-common.ts
@@ -369,7 +369,7 @@ export interface StorybookConfig {
 
   /**
    * Process CSF files for the story index.
-   * @soonDeprecated use {@link experimental_indexers} instead
+   * @deprecated use {@link experimental_indexers} instead
    */
   storyIndexers?: PresetValue;
 
diff --git a/code/lib/types/src/modules/indexer.ts b/code/lib/types/src/modules/indexer.ts
index ccd1ddaef206..5346f7d41f5a 100644
--- a/code/lib/types/src/modules/indexer.ts
+++ b/code/lib/types/src/modules/indexer.ts
@@ -68,7 +68,7 @@ export type Indexer = BaseIndexer & {
    */
   index: (fileName: string, options: IndexerOptions) => Promise;
   /**
-   * @soonDeprecated Use {@link index} instead
+   * @deprecated Use {@link index} instead
    */
   indexer?: never;
 };
@@ -79,7 +79,7 @@ export type DeprecatedIndexer = BaseIndexer & {
 };
 
 /**
- * @soonDeprecated Use {@link Indexer} instead
+ * @deprecated Use {@link Indexer} instead
  */
 export type StoryIndexer = Indexer | DeprecatedIndexer;
 

From 20111e41517b30334505b4ab9ae2c4ec56d3bd4d Mon Sep 17 00:00:00 2001
From: Marcin 
Date: Wed, 23 Aug 2023 08:45:48 -0700
Subject: [PATCH 050/312] removed.

---
 scripts/run-registry.ts      |  2 +-
 scripts/utils/concurrency.js | 27 ---------------------------
 scripts/utils/concurrency.ts |  9 +++++++++
 3 files changed, 10 insertions(+), 28 deletions(-)
 delete mode 100644 scripts/utils/concurrency.js
 create mode 100644 scripts/utils/concurrency.ts

diff --git a/scripts/run-registry.ts b/scripts/run-registry.ts
index 34e5e8920920..54d82739d762 100755
--- a/scripts/run-registry.ts
+++ b/scripts/run-registry.ts
@@ -7,7 +7,7 @@ import program from 'commander';
 import { runServer, parseConfigFile } from 'verdaccio';
 import pLimit from 'p-limit';
 import type { Server } from 'http';
-// @ts-expect-error (Converted from ts-ignore)
+
 import { maxConcurrentTasks } from './utils/concurrency';
 import { listOfPackages } from './utils/list-packages';
 
diff --git a/scripts/utils/concurrency.js b/scripts/utils/concurrency.js
deleted file mode 100644
index 6745f3649014..000000000000
--- a/scripts/utils/concurrency.js
+++ /dev/null
@@ -1,27 +0,0 @@
-const os = require('os');
-
-/**
- * The maximum number of concurrent tasks we want to have on some CLI and CI tasks.
- * The amount of CPUS minus one, arbitrary limited to 15 to not overload CI executors.
- * @type {number}
- */
-const maxConcurrentTasks = Math.min(Math.max(1, os.cpus().length - 1), 15);
-
-/**
- * Use a simple round robin to filter input data according to the CI node currently running the script
- * @param {Array} arrayOfData An array of anything you want
- * @returns {Array} An array containing only the data that shoud be used by current CI node.
- */
-function filterDataForCurrentCircleCINode(arrayOfData) {
-  const nodeIndex = +process.env.CIRCLE_NODE_INDEX || 0;
-  const numberOfNodes = +process.env.CIRCLE_NODE_TOTAL || 1;
-
-  return arrayOfData.filter((_, index) => {
-    return index % numberOfNodes === nodeIndex;
-  });
-}
-
-module.exports = {
-  maxConcurrentTasks,
-  filterDataForCurrentCircleCINode,
-};
diff --git a/scripts/utils/concurrency.ts b/scripts/utils/concurrency.ts
new file mode 100644
index 000000000000..ab49dc41e8f5
--- /dev/null
+++ b/scripts/utils/concurrency.ts
@@ -0,0 +1,9 @@
+const os = require('os');
+
+/**
+ * The maximum number of concurrent tasks we want to have on some CLI and CI tasks.
+ * The amount of CPUS minus one, arbitrary limited to 15 to not overload CI executors.
+ * @type {number}
+ */
+export const maxConcurrentTasks = Math.min(Math.max(1, os.cpus().length - 1), 15);
+

From 8fd8bcacbd9c498a78c7533b78e76238353b5cb8 Mon Sep 17 00:00:00 2001
From: Marcin 
Date: Wed, 23 Aug 2023 10:06:23 -0700
Subject: [PATCH 051/312] Fix type checking.

---
 .../src/js-package-manager/PNPMProxy.test.ts  | 10 ++++-
 .../src/docs/typeScript/handleProp.test.tsx   | 44 +++++++------------
 2 files changed, 23 insertions(+), 31 deletions(-)

diff --git a/code/lib/cli/src/js-package-manager/PNPMProxy.test.ts b/code/lib/cli/src/js-package-manager/PNPMProxy.test.ts
index e59bd7354bcc..fc89fd2b32f6 100644
--- a/code/lib/cli/src/js-package-manager/PNPMProxy.test.ts
+++ b/code/lib/cli/src/js-package-manager/PNPMProxy.test.ts
@@ -213,9 +213,14 @@ describe('PNPM Proxy', () => {
         .spyOn(pnpmProxy, 'writePackageJson')
         .mockImplementation(jest.fn());
 
+      const basePackageAttributes = {
+        dependencies: {},
+        devDependencies: {},
+      };
+
       jest.spyOn(pnpmProxy, 'retrievePackageJson').mockImplementation(
-        // @ts-expect-error (not strict)
-        jest.fn(() => ({
+        jest.fn(async () => ({
+          ...basePackageAttributes,
           overrides: {
             bar: 'x.x.x',
           },
@@ -228,6 +233,7 @@ describe('PNPM Proxy', () => {
       await pnpmProxy.addPackageResolutions(versions);
 
       expect(writePackageSpy).toHaveBeenCalledWith({
+        ...basePackageAttributes,
         overrides: {
           ...versions,
           bar: 'x.x.x',
diff --git a/code/renderers/react/src/docs/typeScript/handleProp.test.tsx b/code/renderers/react/src/docs/typeScript/handleProp.test.tsx
index 37527fd501df..ce74acf8be7c 100644
--- a/code/renderers/react/src/docs/typeScript/handleProp.test.tsx
+++ b/code/renderers/react/src/docs/typeScript/handleProp.test.tsx
@@ -64,7 +64,7 @@ function extractPropDef(component: Component, rawDefaultProp?: any): PropDef {
 describe('enhanceTypeScriptProp', () => {
   describe('defaultValue', () => {
     function createTestComponent(
-      defaultValue: DocgenPropDefaultValue,
+      defaultValue: DocgenPropDefaultValue | undefined,
       typeName = 'anything-is-fine'
     ): Component {
       return createComponent({
@@ -295,8 +295,7 @@ describe('enhanceTypeScriptProp', () => {
       });
 
       it('should support strings', () => {
-        // @ts-expect-error (not strict)
-        const component = createTestComponent(null);
+        const component = createTestComponent(undefined);
 
         const { defaultValue } = extractPropDef(component, 'foo');
 
@@ -305,8 +304,7 @@ describe('enhanceTypeScriptProp', () => {
       });
 
       it('should support array of primitives', () => {
-        // @ts-expect-error (not strict)
-        const component = createTestComponent(null);
+        const component = createTestComponent(undefined);
 
         const { defaultValue } = extractPropDef(component, [1, 2, 3]);
 
@@ -315,8 +313,7 @@ describe('enhanceTypeScriptProp', () => {
       });
 
       it('should support array of short object', () => {
-        // @ts-expect-error (not strict)
-        const component = createTestComponent(null);
+        const component = createTestComponent(undefined);
 
         const { defaultValue } = extractPropDef(component, [{ foo: 'bar' }]);
 
@@ -325,8 +322,7 @@ describe('enhanceTypeScriptProp', () => {
       });
 
       it('should support array of long object', () => {
-        // @ts-expect-error (not strict)
-        const component = createTestComponent(null);
+        const component = createTestComponent(undefined);
 
         const { defaultValue } = extractPropDef(component, [{ foo: 'bar', bar: 'foo', hey: 'ho' }]);
 
@@ -342,8 +338,7 @@ describe('enhanceTypeScriptProp', () => {
       });
 
       it('should support short object', () => {
-        // @ts-expect-error (not strict)
-        const component = createTestComponent(null);
+        const component = createTestComponent(undefined);
 
         const { defaultValue } = extractPropDef(component, { foo: 'bar' });
 
@@ -352,8 +347,7 @@ describe('enhanceTypeScriptProp', () => {
       });
 
       it('should support long object', () => {
-        // @ts-expect-error (not strict)
-        const component = createTestComponent(null);
+        const component = createTestComponent(undefined);
 
         const { defaultValue } = extractPropDef(component, { foo: 'bar', bar: 'foo', hey: 'ho' });
 
@@ -369,8 +363,7 @@ describe('enhanceTypeScriptProp', () => {
       });
 
       it('should support anonymous function', () => {
-        // @ts-expect-error (not strict)
-        const component = createTestComponent(null);
+        const component = createTestComponent(undefined);
 
         const { defaultValue } = extractPropDef(component, () => 'hey!');
 
@@ -379,8 +372,7 @@ describe('enhanceTypeScriptProp', () => {
       });
 
       it('should support named function', () => {
-        // @ts-expect-error (not strict)
-        const component = createTestComponent(null);
+        const component = createTestComponent(undefined);
 
         const { defaultValue } = extractPropDef(component, function hello() {
           return 'world!';
@@ -391,8 +383,7 @@ describe('enhanceTypeScriptProp', () => {
       });
 
       it('should support named function with params', () => {
-        // @ts-expect-error (not strict)
-        const component = createTestComponent(null);
+        const component = createTestComponent(undefined);
 
         const { defaultValue } = extractPropDef(component, function add(a: number, b: number) {
           return a + b;
@@ -403,8 +394,7 @@ describe('enhanceTypeScriptProp', () => {
       });
 
       it('should support React element', () => {
-        // @ts-expect-error (not strict)
-        const component = createTestComponent(null);
+        const component = createTestComponent(undefined);
 
         const defaultProp = ;
         // Simulate babel-plugin-add-react-displayname.
@@ -417,8 +407,7 @@ describe('enhanceTypeScriptProp', () => {
       });
 
       it('should support React element with props', () => {
-        // @ts-expect-error (not strict)
-        const component = createTestComponent(null);
+        const component = createTestComponent(undefined);
 
         // @ts-expect-error (Converted from ts-ignore)
         const defaultProp = ;
@@ -432,8 +421,7 @@ describe('enhanceTypeScriptProp', () => {
       });
 
       it('should support short HTML element', () => {
-        // @ts-expect-error (not strict)
-        const component = createTestComponent(null);
+        const component = createTestComponent(undefined);
 
         const { defaultValue } = extractPropDef(component, 
HTML element
);
 
@@ -442,8 +430,7 @@ describe('enhanceTypeScriptProp', () => {
       });
 
       it('should support long HTML element', () => {
-        // @ts-expect-error (not strict)
-        const component = createTestComponent(null);
+        const component = createTestComponent(undefined);
 
         const { defaultValue } = extractPropDef(
           component,
@@ -514,8 +501,7 @@ describe('enhanceTypeScriptProp', () => {
         });
 
         it(`should support inlined named React functional component with props for ${x}`, () => {
-          // @ts-expect-error (not strict)
-          const component = createTestComponent(null, x);
+          const component = createTestComponent(undefined, x);
 
           const { defaultValue } = extractPropDef(
             component,

From f7c77b073f8c997aec9d31b6a60152bf4a081e03 Mon Sep 17 00:00:00 2001
From: Marcin 
Date: Wed, 23 Aug 2023 10:13:02 -0700
Subject: [PATCH 052/312] fix error for title

---
 code/addons/links/src/utils.test.ts | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/code/addons/links/src/utils.test.ts b/code/addons/links/src/utils.test.ts
index f2dd2871501c..47a477b4104f 100644
--- a/code/addons/links/src/utils.test.ts
+++ b/code/addons/links/src/utils.test.ts
@@ -41,8 +41,7 @@ describe('preview', () => {
 
     it('should select the story (only) provided', () => {
       // simulate a currently selected, but not found as ID
-      // @ts-expect-error (not strict)
-      const handler = linkTo(undefined, 'name');
+      const handler = linkTo('title', 'name');
       handler();
 
       expect(channel.emit).toHaveBeenCalledWith(SELECT_STORY, {

From d1526a3c946548e0a6e7539da3b4b2b0c89801df Mon Sep 17 00:00:00 2001
From: Marcin 
Date: Wed, 23 Aug 2023 10:26:24 -0700
Subject: [PATCH 053/312] more fixes.

---
 .../react/src/docs/typeScript/handleProp.test.tsx    | 12 ++++--------
 1 file changed, 4 insertions(+), 8 deletions(-)

diff --git a/code/renderers/react/src/docs/typeScript/handleProp.test.tsx b/code/renderers/react/src/docs/typeScript/handleProp.test.tsx
index ce74acf8be7c..a230f0229b5a 100644
--- a/code/renderers/react/src/docs/typeScript/handleProp.test.tsx
+++ b/code/renderers/react/src/docs/typeScript/handleProp.test.tsx
@@ -448,8 +448,7 @@ describe('enhanceTypeScriptProp', () => {
 
       ['element', 'elementType'].forEach((x) => {
         it(`should support inlined React class component for ${x}`, () => {
-          // @ts-expect-error (not strict)
-          const component = createTestComponent(null, x);
+          const component = createTestComponent(undefined, x);
 
           const { defaultValue } = extractPropDef(
             component,
@@ -465,8 +464,7 @@ describe('enhanceTypeScriptProp', () => {
         });
 
         it(`should support inlined anonymous React functional component for ${x}`, () => {
-          // @ts-expect-error (not strict)
-          const component = createTestComponent(null, x);
+          const component = createTestComponent(undefined, x);
 
           const { defaultValue } = extractPropDef(component, () => {
             return 
Inlined FunctionalComponent!
;
@@ -477,8 +475,7 @@ describe('enhanceTypeScriptProp', () => {
         });
 
         it(`should support inlined anonymous React functional component with props for ${x}`, () => {
-          // @ts-expect-error (not strict)
-          const component = createTestComponent(null, x);
+          const component = createTestComponent(undefined, x);
 
           const { defaultValue } = extractPropDef(component, ({ foo }: { foo: string }) => {
             return 
{foo}
;
@@ -489,8 +486,7 @@ describe('enhanceTypeScriptProp', () => {
         });
 
         it(`should support inlined named React functional component for ${x}`, () => {
-          // @ts-expect-error (not strict)
-          const component = createTestComponent(null, x);
+          const component = createTestComponent(undefined, x);
 
           const { defaultValue } = extractPropDef(component, function InlinedFunctionalComponent() {
             return 
Inlined FunctionalComponent!
;

From 01dea7ccf7d8524fb27f56dbe33456be352ef423 Mon Sep 17 00:00:00 2001
From: Jeppe Reinhold 
Date: Thu, 24 Aug 2023 10:58:04 +0200
Subject: [PATCH 054/312] add deprecation warnings and migration notes for
 storyStoreV6

---
 MIGRATION.md                                  | 21 +++++++++++++++++++
 .../src/utils/StoryIndexGenerator.ts          |  8 ++++++-
 2 files changed, 28 insertions(+), 1 deletion(-)

diff --git a/MIGRATION.md b/MIGRATION.md
index 0736a8c3e0ed..31c92a7a8ca0 100644
--- a/MIGRATION.md
+++ b/MIGRATION.md
@@ -1,6 +1,7 @@
 
Migration

 
 - [From version 7.3.0 to 7.4.0](#from-version-730-to-740)
+  - [`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)
@@ -306,6 +307,26 @@
 
 ## From version 7.3.0 to 7.4.0
 
+#### `storyStoreV6` and `storiesOf` is deprecated
+
+`storyStoreV6` and `storiesOf` is deprecated and will be completely removed in Storybook 8.0.0.
+
+If you're using `storiesOf` we recommend you migrate your stories to CSF3 for a better story writing experience.
+In many cases you can get started with the migration by using two migration scripts:
+
+```bash
+
+# 1. convert storiesOf to CSF
+npx storybook@latest migrate storiesof-to-csf --glob="**/*.stories.tsx" --parser=tsx
+
+# 2. Convert CSF 2 to CSF 3
+npx storybook@latest migrate csf-2-to-3 --glob="**/*.stories.tsx" --parser=tsx
+```
+
+They won't do a perfect migration so we recommend that you manually go through each file afterwards.
+
+Alternatively you can build your own `storiesOf` implementation by leveraging the new (experimental) indexer API ([documentation](TODO), [migration](#storyindexers-is-replaced-with-experimental_indexers)). A proof of concept of such an implementation can be seen in [this StackBlitz demo](https://stackblitz.com/edit/github-h2rgfk?file=README.md). See the demo's `README.md` for a deeper explanation of the implementation.
+
 #### `storyIndexers` is replaced with `experimental_indexers`
 
 Defining custom indexers for stories has become a more official - yet still experimental - API which is now configured at `experimental_indexers` instead of `storyIndexers` in `main.ts`. `storyIndexers` has been deprecated and will be fully removed in version 8.0.0.
diff --git a/code/lib/core-server/src/utils/StoryIndexGenerator.ts b/code/lib/core-server/src/utils/StoryIndexGenerator.ts
index 7a501a95a5f0..88393bde2e6a 100644
--- a/code/lib/core-server/src/utils/StoryIndexGenerator.ts
+++ b/code/lib/core-server/src/utils/StoryIndexGenerator.ts
@@ -122,7 +122,13 @@ export class StoryIndexGenerator {
     if (options.storyIndexers.length > 1) {
       deprecate(
         dedent`'storyIndexers' is deprecated, please use 'experimental_indexers' instead.
-        Please refer to the migration guide at https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#storyindexers-is-replaced-with-experimental_indexers`
+        Refer to the migration guide at https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#storyindexers-is-replaced-with-experimental_indexers`
+      );
+    }
+    if (options.storyStoreV7 === false) {
+      deprecate(
+        dedent`storyStoreV6 is deprecated, please migrate to storyStoreV7 instead.
+        Refer to the migration guide at https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#storystorev6-and-storiesof-is-deprecated`
       );
     }
   }

From 1a5e4eea04c574dd30c3c40f84f1a610319fb920 Mon Sep 17 00:00:00 2001
From: Jeppe Reinhold 
Date: Thu, 24 Aug 2023 11:10:37 +0200
Subject: [PATCH 055/312] move deprecation warning to build and dev

---
 code/lib/core-server/src/build-static.ts              | 10 +++++++++-
 code/lib/core-server/src/dev-server.ts                |  9 +++++++++
 code/lib/core-server/src/utils/StoryIndexGenerator.ts |  8 +-------
 3 files changed, 19 insertions(+), 8 deletions(-)

diff --git a/code/lib/core-server/src/build-static.ts b/code/lib/core-server/src/build-static.ts
index 810c871724fd..659dbf834767 100644
--- a/code/lib/core-server/src/build-static.ts
+++ b/code/lib/core-server/src/build-static.ts
@@ -2,7 +2,7 @@ import chalk from 'chalk';
 import { copy, emptyDir, ensureDir } from 'fs-extra';
 import { dirname, isAbsolute, join, resolve } from 'path';
 import { global } from '@storybook/global';
-import { logger } from '@storybook/node-logger';
+import { deprecate, logger } from '@storybook/node-logger';
 import { telemetry, getPrecedingUpgrade } from '@storybook/telemetry';
 import type {
   BuilderOptions,
@@ -23,6 +23,7 @@ import {
 import { ConflictingStaticDirConfigError } from '@storybook/core-events/server-errors';
 
 import isEqual from 'lodash/isEqual.js';
+import dedent from 'ts-dedent';
 import { outputStats } from './utils/output-stats';
 import {
   copyAllStaticFiles,
@@ -122,6 +123,13 @@ export async function buildStaticStandalone(options: BuildStaticStandaloneOption
       presets.apply('docs', {}),
     ]);
 
+  if (features?.storyStoreV7 === false) {
+    deprecate(
+      dedent`storyStoreV6 is deprecated, please migrate to storyStoreV7 instead.
+        - Refer to the migration guide at https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#storystorev6-and-storiesof-is-deprecated`
+    );
+  }
+
   const fullOptions: Options = {
     ...options,
     presets,
diff --git a/code/lib/core-server/src/dev-server.ts b/code/lib/core-server/src/dev-server.ts
index 2eb1ea420cda..2941c1a06c73 100644
--- a/code/lib/core-server/src/dev-server.ts
+++ b/code/lib/core-server/src/dev-server.ts
@@ -5,7 +5,9 @@ import invariant from 'tiny-invariant';
 import type { CoreConfig, Options, StorybookConfig } from '@storybook/types';
 
 import { logConfig } from '@storybook/core-common';
+import { deprecate } from '@storybook/node-logger';
 
+import dedent from 'ts-dedent';
 import { getMiddleware } from './utils/middleware';
 import { getServerAddresses } from './utils/server-address';
 import { getServer } from './utils/server-init';
@@ -35,6 +37,13 @@ export async function storybookDevServer(options: Options) {
     getServerChannel(server)
   );
 
+  if (features?.storyStoreV7 === false) {
+    deprecate(
+      dedent`storyStoreV6 is deprecated, please migrate to storyStoreV7 instead.
+      - Refer to the migration guide at https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#storystorev6-and-storiesof-is-deprecated`
+    );
+  }
+
   let indexError: Error | undefined;
   // try get index generator, if failed, send telemetry without storyCount, then rethrow the error
   const initializedStoryIndexGenerator: Promise =
diff --git a/code/lib/core-server/src/utils/StoryIndexGenerator.ts b/code/lib/core-server/src/utils/StoryIndexGenerator.ts
index 88393bde2e6a..bdcb626a3132 100644
--- a/code/lib/core-server/src/utils/StoryIndexGenerator.ts
+++ b/code/lib/core-server/src/utils/StoryIndexGenerator.ts
@@ -122,13 +122,7 @@ export class StoryIndexGenerator {
     if (options.storyIndexers.length > 1) {
       deprecate(
         dedent`'storyIndexers' is deprecated, please use 'experimental_indexers' instead.
-        Refer to the migration guide at https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#storyindexers-is-replaced-with-experimental_indexers`
-      );
-    }
-    if (options.storyStoreV7 === false) {
-      deprecate(
-        dedent`storyStoreV6 is deprecated, please migrate to storyStoreV7 instead.
-        Refer to the migration guide at https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#storystorev6-and-storiesof-is-deprecated`
+        - Refer to the migration guide at https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#storyindexers-is-replaced-with-experimental_indexers`
       );
     }
   }

From eb4d699434bd760a6833aa03e68596007335e502 Mon Sep 17 00:00:00 2001
From: Jeppe Reinhold 
Date: Thu, 24 Aug 2023 11:24:56 +0200
Subject: [PATCH 056/312] update docs snippets for indexers

---
 docs/snippets/common/storybook-main-csf-indexer.ts.mdx    | 8 ++++----
 .../common/storybook-main-story-indexer-main.ts.mdx       | 8 ++++----
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/docs/snippets/common/storybook-main-csf-indexer.ts.mdx b/docs/snippets/common/storybook-main-csf-indexer.ts.mdx
index 09f6f85f02e9..0c533f8152ee 100644
--- a/docs/snippets/common/storybook-main-csf-indexer.ts.mdx
+++ b/docs/snippets/common/storybook-main-csf-indexer.ts.mdx
@@ -5,16 +5,16 @@ import { readFileSync } from 'fs';
 import { loadCsf } from '@storybook/csf-tools';
 
 export default {
-  storyIndexers = (indexers) => {
-    const indexer = async (fileName, opts) => {
+  experimental_indexers = (indexers) => {
+    const index = async (fileName, opts) => {
       const code = readFileSync(fileName, { encoding: 'utf-8' });
-      return loadCsf(code, { ...opts, fileName }).parse();
+      return loadCsf(code, { ...opts, fileName }).parse().indexInputs;
     };
 
     return [
       {
         test: /(stories|story)\.[tj]sx?$/,
-        indexer,
+        index,
       },
       ...(indexers || []),
     ];
diff --git a/docs/snippets/common/storybook-main-story-indexer-main.ts.mdx b/docs/snippets/common/storybook-main-story-indexer-main.ts.mdx
index 7c4885028a5d..77c9363b4f62 100644
--- a/docs/snippets/common/storybook-main-story-indexer-main.ts.mdx
+++ b/docs/snippets/common/storybook-main-story-indexer-main.ts.mdx
@@ -9,8 +9,8 @@ import type { StorybookConfig } from '@storybook/your-framework';
 import { parseCode } from './parseCode';
 
 const config: StorybookConfig = {
-  storyIndexers: (indexers, addonOptions) => {
-    const indexer = async (fileName, compilationOptions) => {
+  experimental_indexers: (indexers, addonOptions) => {
+    const index = async (fileName, compilationOptions) => {
       const code = parseCode(fileName, addonOptions);
       const makeTitle = (userTitle) => {
         // Do something with the auto title retrieved by Storybook
@@ -18,13 +18,13 @@ const config: StorybookConfig = {
       };
 
       // Parse the CSF file with makeTitle as a custom context
-      return loadCsf(code, { ...compilationOptions, makeTitle, fileName }).parse();
+      return loadCsf(code, { ...compilationOptions, makeTitle, fileName }).parse().indexInputs;
     };
 
     return [
       {
         test: /\.(md|html)$/,
-        indexer,
+        index,
       },
       ...(indexers || []),
     ];

From da3a4208779649f736c6d067e3b7e196a4973b59 Mon Sep 17 00:00:00 2001
From: storybook-bot <32066757+storybook-bot@users.noreply.github.com>
Date: Fri, 25 Aug 2023 16:12:35 +0000
Subject: [PATCH 057/312] Update ./docs/versions/next.json for v7.4.0-alpha.2

---
 docs/versions/next.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/versions/next.json b/docs/versions/next.json
index 1c94da1365b5..b44395b73796 100644
--- a/docs/versions/next.json
+++ b/docs/versions/next.json
@@ -1 +1 @@
-{"version":"7.4.0-alpha.1","info":{"plain":"- Build: Migrate @storybook/scripts to strict-ts - [#23818](https://github.com/storybookjs/storybook/pull/23818), thanks [@stilt0n](https://github.com/stilt0n)!\n- CLI: Exclude addon-styling from upgrade - [#23841](https://github.com/storybookjs/storybook/pull/23841), thanks [@Integrayshaun](https://github.com/Integrayshaun)!\n- Core: Add error categorization framework - [#23653](https://github.com/storybookjs/storybook/pull/23653), thanks [@yannbf](https://github.com/yannbf)!\n- Core: Fix error thrown if `docs.defaultName` is unset - [#23893](https://github.com/storybookjs/storybook/pull/23893), thanks [@stilt0n](https://github.com/stilt0n)!\n- Core: Fix race-condition relating to `addons.setConfig` - [#23802](https://github.com/storybookjs/storybook/pull/23802), thanks [@ndelangen](https://github.com/ndelangen)!\n- Maintenance: Move filtering of sidebar into the state - [#23911](https://github.com/storybookjs/storybook/pull/23911), thanks [@ndelangen](https://github.com/ndelangen)!\n- Maintenance: Revert \"WebpackBuilder: Remove need for `react` as peerDependency\" - [#23882](https://github.com/storybookjs/storybook/pull/23882), thanks [@vanessayuenn](https://github.com/vanessayuenn)!\n- Manager API: Fix `api.getAddonState`default value - [#23804](https://github.com/storybookjs/storybook/pull/23804), thanks [@sookmax](https://github.com/sookmax)!\n- Publish: Don't distribute src files or unnecessary template files - [#23853](https://github.com/storybookjs/storybook/pull/23853), thanks [@shilman](https://github.com/shilman)!\n- UI: Add an experimental API for adding sidebar filter functions at runtime - [#23722](https://github.com/storybookjs/storybook/pull/23722), thanks [@ndelangen](https://github.com/ndelangen)!\n- UI: Removal of experimental components - [#23907](https://github.com/storybookjs/storybook/pull/23907), thanks [@ndelangen](https://github.com/ndelangen)!\n- Vue3: Add support for  Global Apps install - [#23772](https://github.com/storybookjs/storybook/pull/23772), thanks [@chakAs3](https://github.com/chakAs3)!\n- Vue3: Use slot value directly if it's a string in source decorator - [#23784](https://github.com/storybookjs/storybook/pull/23784), thanks [@nasvillanueva](https://github.com/nasvillanueva)!"}}
+{"version":"7.4.0-alpha.2","info":{"plain":"- Addon-docs: Resolve `mdx-react-shim` & `@storybook/global` correctly - [#23941](https://github.com/storybookjs/storybook/pull/23941), thanks [@ndelangen](https://github.com/ndelangen)!\n- Addons: Fix key is not a prop warning - [#23935](https://github.com/storybookjs/storybook/pull/23935), thanks [@kasperpeulen](https://github.com/kasperpeulen)!\n- CLI: Pass package manager to postinstall - [#23913](https://github.com/storybookjs/storybook/pull/23913), thanks [@Integrayshaun](https://github.com/Integrayshaun)!\n- CLI: Provide guidance for users who try to initialize Storybook on an empty dir - [#23874](https://github.com/storybookjs/storybook/pull/23874), thanks [@yannbf](https://github.com/yannbf)!\n- Logger: Fix double error messages/stack - [#23919](https://github.com/storybookjs/storybook/pull/23919), thanks [@ndelangen](https://github.com/ndelangen)!\n- Maintenance: Categorize server errors - [#23912](https://github.com/storybookjs/storybook/pull/23912), thanks [@yannbf](https://github.com/yannbf)!\n- Maintenance: Remove need for `react` as peerDependency - [#23897](https://github.com/storybookjs/storybook/pull/23897), thanks [@ndelangen](https://github.com/ndelangen)!\n- Maintenance: Remove sourcemaps generation - [#23936](https://github.com/storybookjs/storybook/pull/23936), thanks [@ndelangen](https://github.com/ndelangen)!\n- Preset: Add common preset overrides mechanism - [#23915](https://github.com/storybookjs/storybook/pull/23915), thanks [@yannbf](https://github.com/yannbf)!\n- UI: Add an experimental API for adding sidebar bottom toolbar - [#23778](https://github.com/storybookjs/storybook/pull/23778), thanks [@ndelangen](https://github.com/ndelangen)!\n- UI: Add an experimental API for adding sidebar top toolbar - [#23811](https://github.com/storybookjs/storybook/pull/23811), thanks [@ndelangen](https://github.com/ndelangen)!"}}

From 5a2ed3d0a8982e4064caeb1c6da27d74d9be3500 Mon Sep 17 00:00:00 2001
From: jonniebigodes 
Date: Sat, 26 Aug 2023 17:07:24 +0100
Subject: [PATCH 058/312] Extra Doc blocks videos

---
 docs/api/doc-block-colorpalette.md | 2 ++
 docs/api/doc-block-icongallery.md  | 2 ++
 docs/api/doc-block-typeset.md      | 2 ++
 3 files changed, 6 insertions(+)

diff --git a/docs/api/doc-block-colorpalette.md b/docs/api/doc-block-colorpalette.md
index 3229612173c3..b97c6ec67b50 100644
--- a/docs/api/doc-block-colorpalette.md
+++ b/docs/api/doc-block-colorpalette.md
@@ -2,6 +2,8 @@
 title: 'ColorPalette'
 ---
 
+
+
 The `ColorPalette` block allows you to document all color-related items (e.g., swatches) used throughout your project.
 
 ![Screenshot of ColorPalette and ColorItem blocks](./doc-block-colorpalette.png)
diff --git a/docs/api/doc-block-icongallery.md b/docs/api/doc-block-icongallery.md
index db16ee30ed53..c89f511f2b68 100644
--- a/docs/api/doc-block-icongallery.md
+++ b/docs/api/doc-block-icongallery.md
@@ -2,6 +2,8 @@
 title: 'IconGallery'
 ---
 
+
+
 The `IconGallery` block enables you to easily document React icon components associated with your project, displayed in a neat grid.
 
 ![Screenshot of IconGallery and IconItem blocks](./doc-block-icongallery.png)
diff --git a/docs/api/doc-block-typeset.md b/docs/api/doc-block-typeset.md
index 854cd140232f..22933dc5f521 100644
--- a/docs/api/doc-block-typeset.md
+++ b/docs/api/doc-block-typeset.md
@@ -2,6 +2,8 @@
 title: 'Typeset'
 ---
 
+
+
 The `Typeset` block helps document the fonts used throughout your project.
 
 ![Screenshot of Typeset block](./doc-block-typeset.png)

From f5430d37636a711c7dcc368a0bf36dc36829ab7d Mon Sep 17 00:00:00 2001
From: Jeppe Reinhold 
Date: Mon, 28 Aug 2023 15:37:37 +0200
Subject: [PATCH 059/312] rename release preparement workflows

---
 ...release.yml => prepare-hotfix-release.yml} |  4 +-
 ...rerelease.yml => prepare-next-release.yml} |  2 +-
 CONTRIBUTING/RELEASING.md                     | 70 ++++++++++---------
 scripts/release/generate-pr-description.ts    |  6 +-
 4 files changed, 44 insertions(+), 38 deletions(-)
 rename .github/workflows/{prepare-patch-release.yml => prepare-hotfix-release.yml} (99%)
 rename .github/workflows/{prepare-prerelease.yml => prepare-next-release.yml} (99%)

diff --git a/.github/workflows/prepare-patch-release.yml b/.github/workflows/prepare-hotfix-release.yml
similarity index 99%
rename from .github/workflows/prepare-patch-release.yml
rename to .github/workflows/prepare-hotfix-release.yml
index c88022c7ea01..6ee8d3091c18 100644
--- a/.github/workflows/prepare-patch-release.yml
+++ b/.github/workflows/prepare-hotfix-release.yml
@@ -16,8 +16,8 @@ concurrency:
   cancel-in-progress: true
 
 jobs:
-  prepare-patch-pull-request:
-    name: Prepare patch pull request
+  prepare-hotfix-pull-request:
+    name: Prepare hotfix pull request
     runs-on: ubuntu-latest
     environment: release
     defaults:
diff --git a/.github/workflows/prepare-prerelease.yml b/.github/workflows/prepare-next-release.yml
similarity index 99%
rename from .github/workflows/prepare-prerelease.yml
rename to .github/workflows/prepare-next-release.yml
index 1250aedcfaa3..42695e823cc6 100644
--- a/.github/workflows/prepare-prerelease.yml
+++ b/.github/workflows/prepare-next-release.yml
@@ -34,7 +34,7 @@ concurrency:
   cancel-in-progress: true
 
 jobs:
-  prepare-prerelease-pull-request:
+  prepare-next-pull-request:
     name: Prepare prerelease pull request
     runs-on: ubuntu-latest
     environment: release
diff --git a/CONTRIBUTING/RELEASING.md b/CONTRIBUTING/RELEASING.md
index 0997b757b6ea..e81029088f8c 100644
--- a/CONTRIBUTING/RELEASING.md
+++ b/CONTRIBUTING/RELEASING.md
@@ -8,8 +8,8 @@
 - [Introduction](#introduction)
   - [Branches](#branches)
 - [Release Pull Requests](#release-pull-requests)
-  - [Prereleases](#prereleases)
-  - [Patch Releases](#patch-releases)
+  - [`next`-releases](#next-releases)
+  - [Hotfix Releases](#hotfix-releases)
   - [Publishing](#publishing)
 - [πŸ‘‰ How to Release](#-how-to-release)
   - [1. Find the Prepared Pull Request](#1-find-the-prepared-pull-request)
@@ -21,6 +21,8 @@
   - [7. See the "Publish" Workflow Finish](#7-see-the-publish-workflow-finish)
 - [Releasing Locally in an Emergency 🚨](#releasing-locally-in-an-emergency-)
 - [Canary Releases](#canary-releases)
+  - [With GitHub UI](#with-github-ui)
+  - [With the CLI](#with-the-cli)
 - [Versioning Scenarios](#versioning-scenarios)
   - [Prereleases - `7.1.0-alpha.12` -\> `7.1.0-alpha.13`](#prereleases---710-alpha12---710-alpha13)
   - [Prerelease promotions - `7.1.0-alpha.13` -\> `7.1.0-beta.0`](#prerelease-promotions---710-alpha13---710-beta0)
@@ -31,7 +33,7 @@
   - [Prerelease of upcoming patch release - `7.0.20` -\> `7.0.21-alpha.0`](#prerelease-of-upcoming-patch-release---7020---7021-alpha0)
   - [Merges to `main` without versioning](#merges-to-main-without-versioning)
 - [FAQ](#faq)
-  - [When should I use the "patch" label?](#when-should-i-use-the-patch-label)
+  - [When should I use the "patch:yes" label?](#when-should-i-use-the-patchyes-label)
   - [How do I make changes to the release tooling/process?](#how-do-i-make-changes-to-the-release-toolingprocess)
   - [Why do I need to re-trigger workflows to update the changelog?](#why-do-i-need-to-re-trigger-workflows-to-update-the-changelog)
   - [Which combination of inputs creates the version bump I need?](#which-combination-of-inputs-creates-the-version-bump-i-need)
@@ -50,8 +52,8 @@ The release process is based on automatically created "Release Pull Requests", t
 
 A designated Releaser -- which may rotate between core team members -- will go through the release process in the current Release PR. This process is implemented with NodeJS scripts in [`scripts/release`](../scripts/release/) and three GitHub Actions workflows:
 
-- [Prepare Prerelease PR](../.github/workflows/prepare-prerelease.yml)
-- [Prepare Patch PR](../.github/workflows/prepare-patch-release.yml)
+- [Prepare `next` PR](../.github/workflows/prepare-next-release.yml)
+- [Prepare hotfix PR](../.github/workflows/prepare-hotfix-release.yml)
 - [Publish](../.github/workflows/publish.yml)
 
 > **Note**
@@ -115,18 +117,18 @@ A few key points to note in this flow:
 - The changelogs are committed during the preparation, but the packages are not version bumped and not published until later.
 - The release pull requests don't target their working branches (`next` and `main`), but rather `next-release` and `latest-release`.
 
-### Prereleases
+### `next`-releases
 
 > **Note**
-> Workflow: [`prepare-prerelease.yml`](../.github/workflows/prepare-prerelease.yml)
+> Workflow: [`prepare-next-release.yml`](../.github/workflows/prepare-next-release.yml)
 
-Prereleases are prepared with all content from the `next` branch. The changelog is generated by examining the git history, and looking up all the commits and pull requests between the current prerelease (on `next-release`) and `HEAD` of `next`.
+`next`-releases are prepared with all content from the `next` branch. The changelog is generated by examining the git history, and looking up all the commits and pull requests between the current prerelease (on `next-release`) and `HEAD` of `next`.
 
 The default versioning strategy is to increase the current prerelease number, as described in [Prereleases - `7.1.0-alpha.12` -> `7.1.0-alpha.13`](#prereleases---710-alpha12---710-alpha13). If there is no prerelease number (i.e., we just released a new stable minor/major version), it will add one to a patch bump, so it would go from `7.2.0` to `7.2.1-0` by default.
 
 Prerelease PRs are only created if there are actual changes to release. Content labeled with "build" or "documentation" is [not considered "releasable"](#which-changes-are-considered-releasable-and-what-does-it-mean) and is not user-facing, so it doesn't make sense to create a release. This is explained in more detail in [Why are no release PRs being prepared?](#why-are-no-release-prs-being-prepared).
 
-The preparation workflow will create a new branch from `next`, called `version-prerelease-from-`, and open a pull request targeting `next-release`. When the Releaser merges it, the [publish workflow](#publishing) will merge `next-release` into `next`.
+The preparation workflow will create a new branch from `next`, called `version-next-from-`, and open a pull request targeting `next-release`. When the Releaser merges it, the [publish workflow](#publishing) will merge `next-release` into `next`.
 
 Here's an example of a workflow where a feature and a bugfix have been created and then released to a new `7.1.0-alpha.29` version. All the commits highlighted with square dots are the ones that will be considered when generating the changelog.
 
@@ -157,20 +159,20 @@ gitGraph
     merge next-release
 ```
 
-### Patch Releases
+### Hotfix Releases
 
 > **Note**
-> Workflow: [`prepare-patch-release.yml`](../.github/workflows/prepare-patch-release.yml)
+> Workflow: [`prepare-hotfix-release.yml`](../.github/workflows/prepare-hotfix-release.yml)
 
-Patch releases are created by [cherry-picking](https://www.atlassian.com/git/tutorials/cherry-pick) any merged, unreleased pull requests that have the "**patch**" label applied to the `next` branch. The merge commit of said pull requests are cherry-picked.
+Hotfix releases are created by [cherry-picking](https://www.atlassian.com/git/tutorials/cherry-pick) any merged, unreleased pull requests that have the "**patch:yes**" label applied to the `next` branch. The merge commit of said pull requests are cherry-picked.
 
-Sometimes it is desired to pick pull requests back to `main` even if they are not considered "releasable". Unlike prerelease preparation, patch releases will not be canceled if the content is not releasable. It might not make sense to create a new patch release if the changes are only for documentation and/or internal build systems. However, getting the changes back to `main` is the only way to deploy the documentation to the production docs site. You may also want to cherry-pick changes to internal CI to fix issues. These are valid scenarios where you want to cherry-pick the changes without being blocked on "releasable" content. In these cases, where all cherry picks are non-releasable, the preparation workflow creates a "merging" pull request instead of a "releasing" pull request. This pull request does not bump versions or update changelogs; it just cherry-picks the changes and allows you to merge them into `latest-release` -> `main`.
+Sometimes it is desired to pick pull requests back to `main` even if they are not considered "releasable". Unlike `next`-release preparation, hotfix releases will not be canceled if the content is not releasable. It might not make sense to create a new hotfix release if the changes are only for documentation and/or internal build systems. However, getting the changes back to `main` is the only way to deploy the documentation to the production docs site. You may also want to cherry-pick changes to internal CI to fix issues. These are valid scenarios where you want to cherry-pick the changes without being blocked on "releasable" content. In these cases, where all cherry picks are non-releasable, the preparation workflow creates a "merging" pull request instead of a "releasing" pull request. This pull request does not bump versions or update changelogs; it just cherry-picks the changes and allows you to merge them into `latest-release` -> `main`.
 
 The preparation workflow sequentially cherry-picks each patch pull request to its branch. If this cherry-picking fails due to conflicts or other reasons, it is ignored and the next pull request is processed. All failing cherry-picks are listed in the release pull request's description, for the Releaser to manually cherry-pick during the release process. This problem occurs more often when `main` and `next` diverge, i.e. the longer it has been since a stable major/minor release.
 
-Similar to the prerelease flow, the preparation workflow for patches will create a new branch from `main` called `version-patch-from-`, and open a pull request that targets `latest-release`. When the pull request is merged by the Releaser, the [publish workflow](#publishing) will eventually merge `latest-release` into `main`.
+Similar to the `next`-release flow, the preparation workflow for patches will create a new branch from `main` called `version-hotfix-from-`, and open a pull request that targets `latest-release`. When the pull request is merged by the Releaser, the [publish workflow](#publishing) will eventually merge `latest-release` into `main`.
 
-Here is an example of a workflow where a feature and two bug fixes have been merged to `next`. Only the bug fixes have the "**patch**" label, so only those two go into the new `7.0.19` release. Note that it is the merge commits to `next` that are cherry-picked, not the commits on the bugfix branches.
+Here is an example of a workflow where a feature and two bug fixes have been merged to `next`. Only the bug fixes have the "**patch:yes**" label, so only those two go into the new `7.0.19` release. Note that it is the merge commits to `next` that are cherry-picked, not the commits on the bugfix branches.
 
 ```mermaid
 gitGraph
@@ -213,16 +215,15 @@ gitGraph
 > **Note**
 > Workflow: [`publish.yml`](../.github/workflows/publish.yml)
 
-When either a prerelease or a patch release branch is merged into `main` or `next-release`, the publishing workflow is triggered. This workflow performs the following tasks:
+When either a `next`-release or a hotfix release branch is merged into `latest-release` or `next-release`, the publishing workflow is triggered. This workflow performs the following tasks:
 
 1. Bump versions of all packages according to the plan from the prepared PRs
 2. Install dependencies and build all packages.
 3. Publish packages to npm.
-4. (If this is a patch release, add the "**picked**" label to all relevant pull requests.)
+4. (If this is a hotfix release, add the "**patch:done**" label to all relevant pull requests.)
 5. Create a new GitHub Release, including a version tag in the release branch (`latest-release` or `next-release`).
 6. Merge the release branch into the core branch (`main` or `next`).
-7. (If this is a patch release, copy the `CHANGELOG.md` changes from `main` to `next`.)
-8. (If this is [a promotion from a prerelease to a stable release](#minormajor-releases---710-rc2---710-or-800-rc3---800), force push `next` to `main`.)
+7. (If this is a hotfix release, copy the `CHANGELOG.md` changes from `main` to `next`.)
 
 The publish workflow runs in the "release" GitHub environment, which has the npm token required to publish packages to the `@storybook` npm organization. For security reasons, this environment can only be accessed from the four "core" branches: `main`, `next`, `latest-release` and `next-release`.
 
@@ -300,10 +301,10 @@ When triggering the workflows, always choose the `next` branch as the base, unle
 
 The workflows can be triggered here:
 
-- [Prepare prerelease PR](https://github.com/storybookjs/storybook/actions/workflows/prepare-prerelease.yml)
-- [Prepare patch PR](https://github.com/storybookjs/storybook/actions/workflows/prepare-patch-release.yml)
+- [Prepare prerelease PR](https://github.com/storybookjs/storybook/actions/workflows/prepare-next-release.yml)
+- [Prepare patch PR](https://github.com/storybookjs/storybook/actions/workflows/prepare-hotfix-release.yml)
 
-Crucially for prereleases, this is also where you change the versioning strategy if you need something else than the default as described in [Preparing - Prereleases](#prereleases). When triggering the prerelease workflow manually, you can optionally add inputs:
+Crucially for prereleases, this is also where you change the versioning strategy if you need something else than the default as described in [Preparing - `next`-releases](#next-releases). When triggering the prerelease workflow manually, you can optionally add inputs:
 
 ![Screenshot of triggering the prerelease workflow in GitHub Actions, with a form that shows a release type selector and a prerelease identifier text field](prerelease-workflow-inputs.png)
 
@@ -434,7 +435,7 @@ There are multiple types of releases that use the same principles, but are done
 
 ### Prereleases - `7.1.0-alpha.12` -> `7.1.0-alpha.13`
 
-This is the default strategy for prereleases, there's nothing special needed to trigger this scenario.
+This is the default strategy for `next`-releases, there's nothing special needed to trigger this scenario.
 
 ### Prerelease promotions - `7.1.0-alpha.13` -> `7.1.0-beta.0`
 
@@ -445,14 +446,14 @@ To promote a prerelease to a new prerelease ID, during the [Re-trigger the Workf
 
 ### Minor/major releases - `7.1.0-rc.2` -> `7.1.0` or `8.0.0-rc.3` -> `8.0.0`
 
-To promote a prerelease to a new prerelease ID, during the [Re-trigger the Workflow](#4-re-trigger-the-workflow) step, choose:
+To promote a prerelease to a stable reelase, during the [Re-trigger the Workflow](#4-re-trigger-the-workflow) step, choose:
 
 - Release type: Patch
 - Prerelease ID: Leave empty
 
 The "Patch" release type ensures the current prerelease version gets promoted to a stable version without any major/minor/patch bumps.
 
-This scenario is special as it turns the `next` branch into a stable branch (until the next prerelease). Therefore, this will also force push `next` to `main`, to ensure that `main` contains the latest stable release. Consequently, the history for `main` is lost.
+This scenario is special as it will target `latest-release` instead of `next-release`, and thus merge into `main` when done, and not `next`. So it goes `next` -> `version-from- `latest-release` -> `main`. When this is done, the Releaser will need to trigger a new release on `next` that bumps the version to a new prerelease minor as described [just below](#first-prerelease-of-new-majorminor---710---720-alpha0-or-800-alpha0).
 
 ### First prerelease of new major/minor - `7.1.0` -> `7.2.0-alpha.0` or `8.0.0-alpha.0`
 
@@ -463,7 +464,7 @@ This is the first prerelease after a stable major/minor has been released. The d
 
 ### Patch releases to stable - subset of `7.1.0-alpha.13` -> `7.0.14`
 
-This is the default patch release scenario, which cherry picks patches to `main`.
+This is the default hotfix release scenario, which cherry picks patches to `main`.
 
 ### Patch releases to earlier versions - subset of `7.1.0-alpha.13` -> `6.5.14`
 
@@ -477,17 +478,17 @@ No process is defined for this.
 
 ### Merges to `main` without versioning
 
-As described in more details in [the Patch Releases section](#patch-releases), there are scenarios where you want to patch [unreleasable](#which-changes-are-considered-releasable-and-what-does-it-mean) content back to `main` without bumping versions or publishing a new release. This happens automatically as long as all the unpicked patch pull requests have unreleasable labels. In that case the prepared patch pull request will change form slighty, to just cherry-picking the patches without bumping the versions.
+As described in more details in [the Hotfix Releases section](#hotfix-releases), there are scenarios where you want to patch [unreleasable](#which-changes-are-considered-releasable-and-what-does-it-mean) content back to `main` without bumping versions or publishing a new release. This happens automatically as long as all the unpicked patch pull requests have unreleasable labels. In that case the prepared patch pull request will change form slighty, to just cherry-picking the patches without bumping the versions.
 
 ## FAQ
 
-### When should I use the "patch" label?
+### When should I use the "patch:yes" label?
 
-Not all pull requests need to be patched back to the stable release, which is why only those with the **"patch"** label gets that treatment. But how do you decide whether or not a give pull requests should have that label?
+Not all pull requests need to be patched back to the stable release, which is why only those with the **"patch:yes"** label gets that treatment. But how do you decide whether or not a give pull requests should have that label?
 
-First of all, patches are only for fixes and minor improvements, and not completely new features. A pull request that introduces a new feature shouldn't be patched back to the stable release.
+First of all, patches are only for important and time-sensitive fixes, and not minor improvements or completely new features. A pull request that introduces a new feature shouldn't be patched back to the stable release.
 
-Second, any destabilizing changes shouldn't be patched back either. Breaking changes are reserved for major releases, but changes can be destabilizing without being strictly breaking, and those shouldn't be patched back either. An example is moving the settings panel in the manager to a completely different place, but with the same functionality. Many wouldn't consider this breaking because no usage will stop working because of this, but it can be considered a destabilizing change because user behavior have to change as a result of this.
+Second, PRs that changes the code in a big architectural way should ideally not be patched back either, because that makes merge conflicts more likely in the future.
 
 When in doubt ask the core team for their input.
 
@@ -497,12 +498,15 @@ The whole process is based on [GitHub Action workflows](../.github/workflows/) a
 
 The short answer to "how", is to make changes as a regular pull request that is also patched back to `main`.
 
-There's a longer answer too, but it's pretty confusing:
+

+  There's a longer answer too, but it's pretty confusing
 
 The scripts run from either `main` or `next`, so if you're changing a release script, you must patch it back to `main` for it to have an effect on patch releases. If you need the change to take effect immediately, you must manually cherry pick it to `main`.
 
 For workflow file changes, they usually run from `next`, but patching them back is recommended for consistency. The "publish" workflow runs from `latest-release` and `next-release`, so you should always patch changes back for _that_. πŸ™ƒ
 
+

+
 ### Why do I need to re-trigger workflows to update the changelog?
 
 Changes to pull requests' titles, labels or even reverts won't be reflected in the release pull request. This is because the workflow only triggers on pushes to `next`, not when pull request meta data is changed.
@@ -536,7 +540,7 @@ If a pull request does not have any of the above labels at the time of release,
 
 This is most likely because `next` only contains [unreleasable changes](#which-changes-are-considered-releasable-and-what-does-it-mean), which causes the preparation workflow to cancel itself. That's because it doesn't make sense to prepare a new release if all the changes are unreleasable, as that wouldn't bump the version nor write a new changelog entry, so "releasing" it would just merge it back to `next` without any differences.
 
-You can always see the workflows and if they have been cancelled [here for prereleases](https://github.com/storybookjs/storybook/actions/workflows/prepare-prerelease.yml) and [here for patch releases](https://github.com/storybookjs/storybook/actions/workflows/prepare-patch-release.yml).
+You can always see the workflows and if they have been cancelled [here for `next`-releases](https://github.com/storybookjs/storybook/actions/workflows/prepare-next-release.yml) and [here for hotfix releases](https://github.com/storybookjs/storybook/actions/workflows/prepare-hotfix-release.yml).
 
 ### Why do we need separate release branches?
 
diff --git a/scripts/release/generate-pr-description.ts b/scripts/release/generate-pr-description.ts
index 16a6928e994f..f912c5885225 100644
--- a/scripts/release/generate-pr-description.ts
+++ b/scripts/release/generate-pr-description.ts
@@ -141,7 +141,9 @@ export const generateReleaseDescription = ({
   changelogText: string;
   manualCherryPicks?: string;
 }): string => {
-  const workflow = semver.prerelease(nextVersion) ? 'prepare-prerelease' : 'prepare-patch-release';
+  const workflow = semver.prerelease(nextVersion)
+    ? 'prepare-next-release'
+    : 'prepare-hotfix-release';
   const workflowUrl = `https://github.com/storybookjs/storybook/actions/workflows/${workflow}.yml`;
 
   return (
@@ -215,7 +217,7 @@ export const generateNonReleaseDescription = (
 
   ${manualCherryPicks || ''}
 
-  If you've made any changes (change PR titles, revert PRs), manually trigger a re-generation of this PR with [this workflow](https://github.com/storybookjs/storybook/actions/workflows/prepare-patch-release.yml) and wait for it to finish.
+  If you've made any changes (change PR titles, revert PRs), manually trigger a re-generation of this PR with [this workflow](https://github.com/storybookjs/storybook/actions/workflows/prepare-hotfix-release.yml) and wait for it to finish.
   
   Feel free to manually commit any changes necessary to this branch **after** you've done the last re-generation, following the [Make Manual Changes](https://github.com/storybookjs/storybook/blob/next/CONTRIBUTING/RELEASING.md#5-make-manual-changes) section in the docs.
 

From 643eec1e14a5179d97c436afb99d04910e562373 Mon Sep 17 00:00:00 2001
From: Marcin 
Date: Mon, 28 Aug 2023 07:21:31 -0700
Subject: [PATCH 060/312] updated.

---
 code/addons/links/src/utils.test.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/code/addons/links/src/utils.test.ts b/code/addons/links/src/utils.test.ts
index 47a477b4104f..25499e4958d7 100644
--- a/code/addons/links/src/utils.test.ts
+++ b/code/addons/links/src/utils.test.ts
@@ -45,6 +45,7 @@ describe('preview', () => {
       handler();
 
       expect(channel.emit).toHaveBeenCalledWith(SELECT_STORY, {
+        kind: 'title',
         story: 'name',
       });
     });

From b652cd111292a0b74fe12db4319ac20d23b83ae5 Mon Sep 17 00:00:00 2001
From: Marcin 
Date: Mon, 28 Aug 2023 08:32:03 -0700
Subject: [PATCH 061/312] MERGED

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 8bef7c303587..4633f6efc0b8 100644
--- a/README.md
+++ b/README.md
@@ -97,7 +97,7 @@ For additional help, join us in the [Storybook Discord](https://discord.gg/story
 
 ### Supported Frameworks
 
-| Renderer                                                        | Demo                                                                                                                                                                         |                                                                                                                                                       |
+| Renderer                                                       | Demo                                                                                                                                                                         |                                                                                                                                                       |
 | -------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- |
 | [React](code/renderers/react)                                  | [![Storybook demo](https://img.shields.io/npm/v/@storybook/react/latest?style=flat-square&color=blue&label)](https://next--630511d655df72125520f051.chromatic.com/)          | [![React](https://img.shields.io/npm/dm/@storybook/react?style=flat-square&color=eee)](code/renderers/react)                                          |
 | [Angular](code/frameworks/angular/)                            | [![Storybook demo](https://img.shields.io/npm/v/@storybook/angular/latest?style=flat-square&color=blue&label)](https://next--6322ce6af69825592bbb28fc.chromatic.com/)        | [![Angular](https://img.shields.io/npm/dm/@storybook/angular?style=flat-square&color=eee)](code/frameworks/angular/)                                  |

From be61d0a4ebfc8ddef2e1ce059611c74d3f200841 Mon Sep 17 00:00:00 2001
From: Marcin 
Date: Mon, 28 Aug 2023 08:32:46 -0700
Subject: [PATCH 062/312] MERGED

---
 .circleci/config.yml      | 5 +++++
 docs/versions/latest.json | 2 +-
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/.circleci/config.yml b/.circleci/config.yml
index 7d187778889f..5e7cc4a22d24 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -195,6 +195,11 @@ jobs:
           command: |
             cd scripts
             yarn get-template --check
+      - run:
+          name: Type check
+          command: |
+            cd scripts
+            yarn check
       - run:
           name: Run tests
           command: |
diff --git a/docs/versions/latest.json b/docs/versions/latest.json
index 1a5c7ebf786b..7618803cf164 100644
--- a/docs/versions/latest.json
+++ b/docs/versions/latest.json
@@ -1 +1 @@
-{"version":"7.3.2","info":{"plain":"- Maintenance: Revert \"WebpackBuilder: Remove need for `react` as peerDependency\" - [#23882](https://github.com/storybookjs/storybook/pull/23882), thanks [@vanessayuenn](https://github.com/vanessayuenn)!"}}
+{"version":"7.3.0","info":{"plain":"- Core: Improve `composeStories` typings - [#23577](https://github.com/storybookjs/storybook/pull/23577), thanks [@yannbf](https://github.com/yannbf)!"}}

From d548caafc29571b4dbd3adf047307f84a02c832f Mon Sep 17 00:00:00 2001
From: Marcin 
Date: Mon, 28 Aug 2023 08:37:52 -0700
Subject: [PATCH 063/312] added

---
 scripts/run-registry.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/scripts/run-registry.ts b/scripts/run-registry.ts
index 6735e9811a0b..9184e885b4d6 100755
--- a/scripts/run-registry.ts
+++ b/scripts/run-registry.ts
@@ -9,7 +9,7 @@ import pLimit from 'p-limit';
 import type { Server } from 'http';
 import { mkdir } from 'fs/promises';
 import { PACKS_DIRECTORY } from './utils/constants';
-// @ts-expect-error (Converted from ts-ignore)
+
 import { maxConcurrentTasks } from './utils/concurrency';
 import { listOfPackages } from './utils/list-packages';
 

From 01717a64519e9bfb1692d6c675452a062ea66c54 Mon Sep 17 00:00:00 2001
From: Marcin 
Date: Mon, 28 Aug 2023 08:41:55 -0700
Subject: [PATCH 064/312] reverted

---
 code/addons/links/src/utils.test.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/code/addons/links/src/utils.test.ts b/code/addons/links/src/utils.test.ts
index 25499e4958d7..f2dd2871501c 100644
--- a/code/addons/links/src/utils.test.ts
+++ b/code/addons/links/src/utils.test.ts
@@ -41,11 +41,11 @@ describe('preview', () => {
 
     it('should select the story (only) provided', () => {
       // simulate a currently selected, but not found as ID
-      const handler = linkTo('title', 'name');
+      // @ts-expect-error (not strict)
+      const handler = linkTo(undefined, 'name');
       handler();
 
       expect(channel.emit).toHaveBeenCalledWith(SELECT_STORY, {
-        kind: 'title',
         story: 'name',
       });
     });

From f4a1021902b903d2a1c425da3bb089e336b1ab53 Mon Sep 17 00:00:00 2001
From: Martin Nabhan <7613182+martinnabhan@users.noreply.github.com>
Date: Tue, 29 Aug 2023 18:13:39 +0900
Subject: [PATCH 065/312] Make sure the Next.js Image Context is reused instead
 of recreated when imported

---
 code/frameworks/nextjs/package.json                   |  8 +++++++-
 .../src/{images/context.ts => image-context.ts}       |  0
 code/frameworks/nextjs/src/images/decorator.tsx       |  3 ++-
 .../nextjs/src/images/next-future-image.tsx           | 11 ++++-------
 code/frameworks/nextjs/src/images/next-image.tsx      |  9 ++++-----
 .../nextjs/src/images/next-legacy-image.tsx           | 11 ++++-------
 6 files changed, 21 insertions(+), 21 deletions(-)
 rename code/frameworks/nextjs/src/{images/context.ts => image-context.ts} (100%)

diff --git a/code/frameworks/nextjs/package.json b/code/frameworks/nextjs/package.json
index acdeb7177946..00afe2a336e5 100644
--- a/code/frameworks/nextjs/package.json
+++ b/code/frameworks/nextjs/package.json
@@ -27,6 +27,11 @@
       "require": "./dist/index.js",
       "import": "./dist/index.mjs"
     },
+    "./image-context": {
+      "types": "./dist/image-context.d.ts",
+      "require": "./dist/image-context.js",
+      "import": "./dist/image-context.mjs"
+    },
     "./preset": {
       "types": "./dist/preset.d.ts",
       "require": "./dist/preset.js"
@@ -136,11 +141,12 @@
   },
   "bundler": {
     "entries": [
+      "./src/image-context.ts",
       "./src/index.ts",
       "./src/preset.ts",
       "./src/preview.tsx",
       "./src/next-image-loader-stub.ts",
-      "./src/images/context.ts",
+      "./src/images/decorator.tsx",
       "./src/images/next-future-image.tsx",
       "./src/images/next-legacy-image.tsx",
       "./src/images/next-image.tsx",
diff --git a/code/frameworks/nextjs/src/images/context.ts b/code/frameworks/nextjs/src/image-context.ts
similarity index 100%
rename from code/frameworks/nextjs/src/images/context.ts
rename to code/frameworks/nextjs/src/image-context.ts
diff --git a/code/frameworks/nextjs/src/images/decorator.tsx b/code/frameworks/nextjs/src/images/decorator.tsx
index f0917b3a3b50..0ee445f8707b 100644
--- a/code/frameworks/nextjs/src/images/decorator.tsx
+++ b/code/frameworks/nextjs/src/images/decorator.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import type { Addon_StoryContext } from '@storybook/types';
-import { ImageContext } from './context';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { ImageContext } from '@storybook/nextjs/dist/image-context';
 
 export const ImageDecorator = (
   Story: React.FC,
diff --git a/code/frameworks/nextjs/src/images/next-future-image.tsx b/code/frameworks/nextjs/src/images/next-future-image.tsx
index 559d2e857d39..0b841452d1fc 100644
--- a/code/frameworks/nextjs/src/images/next-future-image.tsx
+++ b/code/frameworks/nextjs/src/images/next-future-image.tsx
@@ -3,18 +3,15 @@ import type * as _NextImage from 'next/image';
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore import is aliased in webpack config
 import OriginalNextFutureImage from 'sb-original/next/future/image';
-import { ImageContext } from './context';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { ImageContext } from '@storybook/nextjs/dist/image-context';
 import { defaultLoader } from './next-image-default-loader';
 
-function NextFutureImage(props: _NextImage.ImageProps) {
+function NextFutureImage({ loader, ...props }: _NextImage.ImageProps) {
   const imageParameters = React.useContext(ImageContext);
 
   return (
-    
+    
   );
 }
 
diff --git a/code/frameworks/nextjs/src/images/next-image.tsx b/code/frameworks/nextjs/src/images/next-image.tsx
index 74e252d93a7d..34cf6d242bc4 100644
--- a/code/frameworks/nextjs/src/images/next-image.tsx
+++ b/code/frameworks/nextjs/src/images/next-image.tsx
@@ -3,15 +3,14 @@
 import OriginalNextImage from 'sb-original/next/image';
 import type * as _NextImage from 'next/image';
 import React from 'react';
-import { ImageContext } from './context';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { ImageContext } from '@storybook/nextjs/dist/image-context';
 import { defaultLoader } from './next-image-default-loader';
 
-const MockedNextImage = (props: _NextImage.ImageProps) => {
+const MockedNextImage = ({ loader, ...props }: _NextImage.ImageProps) => {
   const imageParameters = React.useContext(ImageContext);
 
-  return (
-    
-  );
+  return ;
 };
 
 export default MockedNextImage;
diff --git a/code/frameworks/nextjs/src/images/next-legacy-image.tsx b/code/frameworks/nextjs/src/images/next-legacy-image.tsx
index 8d899cc341a5..1e2f8d9df20c 100644
--- a/code/frameworks/nextjs/src/images/next-legacy-image.tsx
+++ b/code/frameworks/nextjs/src/images/next-legacy-image.tsx
@@ -3,18 +3,15 @@
 import OriginalNextLegacyImage from 'sb-original/next/legacy/image';
 import type * as _NextLegacyImage from 'next/legacy/image';
 import React from 'react';
-import { ImageContext } from './context';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { ImageContext } from '@storybook/nextjs/dist/image-context';
 import { defaultLoader } from './next-image-default-loader';
 
-function NextLegacyImage(props: _NextLegacyImage.ImageProps) {
+function NextLegacyImage({ loader, ...props }: _NextLegacyImage.ImageProps) {
   const imageParameters = React.useContext(ImageContext);
 
   return (
-    
+    
   );
 }
 

From 2ae443208da90905cbbf098a96cd661358f35f45 Mon Sep 17 00:00:00 2001
From: Almog Haimovitch 
Date: Tue, 29 Aug 2023 12:33:05 +0300
Subject: [PATCH 066/312] CSS changes is fixing the toc is not scrollable with
 large content

---
 code/ui/blocks/src/components/TableOfContents.tsx | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/code/ui/blocks/src/components/TableOfContents.tsx b/code/ui/blocks/src/components/TableOfContents.tsx
index 892f1e137f20..872019104332 100644
--- a/code/ui/blocks/src/components/TableOfContents.tsx
+++ b/code/ui/blocks/src/components/TableOfContents.tsx
@@ -40,9 +40,12 @@ const Wrapper = styled.div(({ theme }) => ({
 
 const Content = styled.div(({ theme }) => ({
   position: 'fixed',
+  bottom: 0,
   top: 0,
   width: '10rem',
   paddingTop: '4rem',
+  paddingBottom: '2rem',
+  overflowY: 'auto',
 
   fontFamily: theme.typography.fonts.base,
   fontSize: theme.typography.size.s2,

From 3b7bfba9858f630ad8b27fa78040dcb5bcae1425 Mon Sep 17 00:00:00 2001
From: serious 
Date: Tue, 29 Aug 2023 11:36:26 +0200
Subject: [PATCH 067/312] Updated file-system-cache dependency to 2.4.4

---
 code/lib/core-common/package.json |  2 +-
 code/lib/types/package.json       |  2 +-
 code/yarn.lock                    | 15 ++++++++-------
 3 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/code/lib/core-common/package.json b/code/lib/core-common/package.json
index 67977f76a0a6..0eb4267420df 100644
--- a/code/lib/core-common/package.json
+++ b/code/lib/core-common/package.json
@@ -52,7 +52,7 @@
     "chalk": "^4.1.0",
     "esbuild": "^0.18.0",
     "esbuild-register": "^3.4.0",
-    "file-system-cache": "^2.4.2",
+    "file-system-cache": "^2.4.4",
     "find-cache-dir": "^3.0.0",
     "find-up": "^5.0.0",
     "fs-extra": "^11.1.0",
diff --git a/code/lib/types/package.json b/code/lib/types/package.json
index 986415c091c9..d9acca432833 100644
--- a/code/lib/types/package.json
+++ b/code/lib/types/package.json
@@ -46,7 +46,7 @@
     "@storybook/channels": "7.1.0-beta.1",
     "@types/babel__core": "^7.0.0",
     "@types/express": "^4.7.0",
-    "file-system-cache": "^2.4.2"
+    "file-system-cache": "^2.4.4"
   },
   "devDependencies": {
     "@storybook/csf": "^0.1.0",
diff --git a/code/yarn.lock b/code/yarn.lock
index 9628ecbfd11d..35bcec7fecbe 100644
--- a/code/yarn.lock
+++ b/code/yarn.lock
@@ -6148,7 +6148,7 @@ __metadata:
     chalk: ^4.1.0
     esbuild: ^0.18.0
     esbuild-register: ^3.4.0
-    file-system-cache: ^2.4.2
+    file-system-cache: ^2.4.4
     find-cache-dir: ^3.0.0
     find-up: ^5.0.0
     fs-extra: ^11.1.0
@@ -7458,7 +7458,7 @@ __metadata:
     "@types/express": ^4.7.0
     "@types/fs-extra": ^11.0.1
     "@types/node": ^16.0.0
-    file-system-cache: ^2.4.2
+    file-system-cache: ^2.4.4
     typescript: ~4.9.3
   languageName: unknown
   linkType: soft
@@ -8268,7 +8268,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/fs-extra@npm:^11.0.1":
+"@types/fs-extra@npm:11.0.1, @types/fs-extra@npm:^11.0.1":
   version: 11.0.1
   resolution: "@types/fs-extra@npm:11.0.1"
   dependencies:
@@ -16014,14 +16014,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"file-system-cache@npm:^2.4.2":
-  version: 2.4.2
-  resolution: "file-system-cache@npm:2.4.2"
+"file-system-cache@npm:^2.4.4":
+  version: 2.4.4
+  resolution: "file-system-cache@npm:2.4.4"
   dependencies:
+    "@types/fs-extra": 11.0.1
     "@types/ramda": 0.29.3
     fs-extra: 11.1.1
     ramda: 0.29.0
-  checksum: fe7f348b7a88501656173f82269ac509dfc7fca720aecea26dc549996c253878e6a0af302afd30ffd5eea275f6801db7d17584031c31ee4ad01e1b89db5503c6
+  checksum: 274bd9c2f8f81d0c3b2cc0d077807c969b48cac4857ae77f87b4b480548252aa42d3a43b3e9d4bb54df567eb70f0c384782514fcea74b78765543e9496e27e2d
   languageName: node
   linkType: hard
 

From cf42d9775776e8b23a1df31bd8f3054d992e3116 Mon Sep 17 00:00:00 2001
From: Jeppe Reinhold 
Date: Tue, 29 Aug 2023 12:49:56 +0200
Subject: [PATCH 068/312] add strict type to name

---
 code/lib/cli/src/sandbox-templates.ts | 34 ++++++++++++++++-----------
 1 file changed, 20 insertions(+), 14 deletions(-)

diff --git a/code/lib/cli/src/sandbox-templates.ts b/code/lib/cli/src/sandbox-templates.ts
index f4332722424e..4a2656d4c6fd 100644
--- a/code/lib/cli/src/sandbox-templates.ts
+++ b/code/lib/cli/src/sandbox-templates.ts
@@ -19,7 +19,7 @@ export type Template = {
   /**
    * Readable name for the template, which will be used for feedback and the status page
    * Follows the naming scheme when it makes sense:
-   *   [- ] (JS|TS)
+   *  <"v"version|"Latest"|"Prerelease"> [-  ](JS|TS)
    * React Latest - Webpack (TS)
    * Next.js v12 (JS)
    * Angular CLI Prerelease
@@ -76,6 +76,12 @@ export type Template = {
   isInternal?: boolean;
 };
 
+type BaseTemplates = Template & {
+  name: `${string} ${`v${number}` | 'Latest' | 'Prerelease'} ${`- ${string} ` | ''}(${
+    | 'JS'
+    | 'TS'})`;
+};
+
 const baseTemplates = {
   'cra/default-js': {
     name: 'Create React App Latest (JS)',
@@ -132,7 +138,7 @@ const baseTemplates = {
     skipTasks: ['e2e-tests-dev', 'bench'],
   },
   'react-vite/default-js': {
-    name: 'React Vite (JS)',
+    name: 'React Latest - Vite (JS)',
     script: 'npm create vite@latest --yes {{beforeDir}} -- --template react',
     expected: {
       framework: '@storybook/react-vite',
@@ -228,7 +234,7 @@ const baseTemplates = {
     skipTasks: ['smoke-test', 'e2e-tests-dev', 'bench'],
   },
   'html-webpack/default': {
-    name: 'HTML - Webpack',
+    name: 'HTML Latest - Webpack (JS)',
     script: 'yarn create webpack5-html {{beforeDir}}',
     expected: {
       framework: '@storybook/html-webpack5',
@@ -238,7 +244,7 @@ const baseTemplates = {
     skipTasks: ['e2e-tests-dev', 'bench'],
   },
   'html-vite/default-js': {
-    name: 'HTML - Vite (JS)',
+    name: 'HTML Latest - Vite (JS)',
     script:
       'npm create vite@latest --yes {{beforeDir}} -- --template vanilla && cd {{beforeDir}} && echo "export default {}" > vite.config.js',
     expected: {
@@ -249,7 +255,7 @@ const baseTemplates = {
     skipTasks: ['e2e-tests-dev', 'bench'],
   },
   'html-vite/default-ts': {
-    name: 'HTML - Vite (TS)',
+    name: 'HTML Latest - Vite (TS)',
     script:
       'npm create vite@latest --yes {{beforeDir}} -- --template vanilla-ts && cd {{beforeDir}} && echo "export default {}" > vite.config.js',
     expected: {
@@ -281,7 +287,7 @@ const baseTemplates = {
     skipTasks: ['smoke-test', 'e2e-tests-dev', 'bench'],
   },
   'angular-cli/prerelease': {
-    name: 'Angular CLI Prerelease',
+    name: 'Angular CLI Prerelease (TS)',
     script:
       'npx -p @angular/cli@next ng new angular-v16 --directory {{beforeDir}} --routing=true --minimal=true --style=scss --strict --skip-git --skip-install --package-manager=yarn',
     expected: {
@@ -292,7 +298,7 @@ const baseTemplates = {
     skipTasks: ['e2e-tests-dev', 'bench'],
   },
   'angular-cli/default-ts': {
-    name: 'Angular CLI Latest',
+    name: 'Angular CLI Latest (TS)',
     script:
       'npx -p @angular/cli ng new angular-latest --directory {{beforeDir}} --routing=true --minimal=true --style=scss --strict --skip-git --skip-install --package-manager=yarn',
     expected: {
@@ -303,7 +309,7 @@ const baseTemplates = {
     skipTasks: ['e2e-tests-dev', 'bench'],
   },
   'angular-cli/15-ts': {
-    name: 'Angular CLI v15',
+    name: 'Angular CLI v15 (TS)',
     script:
       'npx -p @angular/cli@15 ng new angular-v15 --directory {{beforeDir}} --routing=true --minimal=true --style=scss --strict --skip-git --skip-install --package-manager=yarn',
     expected: {
@@ -360,7 +366,7 @@ const baseTemplates = {
     skipTasks: ['smoke-test', 'e2e-tests-dev', 'bench'],
   },
   'vue-cli/default-js': {
-    name: 'Vue v3 CLI (JS)',
+    name: 'Vue v3 - CLI (JS)',
     script:
       'npx -p @vue/cli vue create {{beforeDir}} --default --packageManager=yarn --force --merge && cd {{beforeDir}} && echo "module.exports = {}" > webpack.config.js',
     expected: {
@@ -372,7 +378,7 @@ const baseTemplates = {
     skipTasks: ['smoke-test', 'e2e-tests-dev', 'bench'],
   },
   'vue-cli/vue2-default-js': {
-    name: 'Vue v2 CLI (JS)',
+    name: 'Vue v2 - CLI (JS)',
     script:
       'npx -p @vue/cli vue create {{beforeDir}} --default --packageManager=yarn --force --merge --preset="Default (Vue 2)" && cd {{beforeDir}} && echo "module.exports = {}" > webpack.config.js',
     expected: {
@@ -384,7 +390,7 @@ const baseTemplates = {
     skipTasks: ['smoke-test', 'e2e-tests-dev', 'bench'],
   },
   'preact-webpack5/default-js': {
-    name: 'Preact Latest CLI (JS)',
+    name: 'Preact Latest - CLI (JS)',
     script:
       'npx preact-cli create default {{beforeDir}} --name preact-app --yarn --no-install && cd {{beforeDir}} && echo "module.exports = {}" > webpack.config.js',
     expected: {
@@ -395,7 +401,7 @@ const baseTemplates = {
     skipTasks: ['e2e-tests-dev', 'bench'],
   },
   'preact-webpack5/default-ts': {
-    name: 'Preact Latest CLI (TS)',
+    name: 'Preact Latest - CLI (TS)',
     script:
       'npx preact-cli create typescript {{beforeDir}} --name preact-app --yarn --no-install && cd {{beforeDir}} && echo "module.exports = {}" > webpack.config.js',
     expected: {
@@ -426,7 +432,7 @@ const baseTemplates = {
     skipTasks: ['e2e-tests-dev', 'bench'],
   },
   'qwik-vite/default-ts': {
-    name: 'Qwik Latest CLI (TS)',
+    name: 'Qwik Latest - CLI (TS)',
     script: 'yarn create qwik basic {{beforeDir}}',
     // TODO: The community template does not provide standard stories, which is required for e2e tests. Reenable once it does.
     inDevelopment: true,
@@ -438,7 +444,7 @@ const baseTemplates = {
     // TODO: The community template does not provide standard stories, which is required for e2e tests.
     skipTasks: ['e2e-tests', 'e2e-tests-dev', 'bench'],
   },
-} satisfies Record;
+} satisfies Record;
 
 /**
  * Internal templates reuse config from other templates and add extra config on top.

From 8d582d7e4dd66b0b1c85044afcf8228240eb1f8e Mon Sep 17 00:00:00 2001
From: Jeppe Reinhold 
Date: Tue, 29 Aug 2023 14:28:23 +0200
Subject: [PATCH 069/312] merge stable to latest-release instead of
 next-release, resolving merge conflicts

---
 .github/workflows/prepare-hotfix-release.yml |  4 +--
 .github/workflows/prepare-next-release.yml   | 27 +++++++++++++++-----
 CONTRIBUTING/RELEASING.md                    | 16 ++++++------
 scripts/release/generate-pr-description.ts   |  1 +
 scripts/release/is-pr-frozen.ts              |  6 ++---
 5 files changed, 35 insertions(+), 19 deletions(-)

diff --git a/.github/workflows/prepare-hotfix-release.yml b/.github/workflows/prepare-hotfix-release.yml
index 6ee8d3091c18..2a331fb5f3ea 100644
--- a/.github/workflows/prepare-hotfix-release.yml
+++ b/.github/workflows/prepare-hotfix-release.yml
@@ -56,7 +56,7 @@ jobs:
         id: check-frozen
         env:
           GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-        run: yarn release:is-pr-frozen --patch
+        run: yarn release:is-pr-frozen --hotfix
 
       - name: Cancel when frozen
         if: steps.check-frozen.outputs.frozen == 'true' && github.event_name != 'workflow_dispatch'
@@ -121,7 +121,7 @@ jobs:
           git config --global user.email '32066757+storybook-bot@users.noreply.github.com'
           git checkout -b version-patch-from-${{ steps.versions.outputs.current }}
           git add .
-          git commit -m "Write changelog for ${{ steps.versions.outputs.next }}" || true
+          git commit -m "Write changelog for ${{ steps.versions.outputs.next }} [skip ci]" || true
           git push --force origin version-patch-from-${{ steps.versions.outputs.current }}
 
       - name: Generate PR description
diff --git a/.github/workflows/prepare-next-release.yml b/.github/workflows/prepare-next-release.yml
index 42695e823cc6..ad79b5f1b3fe 100644
--- a/.github/workflows/prepare-next-release.yml
+++ b/.github/workflows/prepare-next-release.yml
@@ -112,21 +112,35 @@ jobs:
         run: |
           yarn release:version --deferred --release-type ${{ inputs.release-type || 'prerelease' }} ${{ inputs.pre-id && format('{0} {1}', '--pre-id', inputs.pre-id) || '' }} --verbose
 
+      - name: Check release vs prerelease
+        id: is-prerelease
+        run: yarn release:is-prerelease ${{ steps.bump-version.outputs.next-version }}
+
       - name: Write changelog
         env:
           GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
         run: |
           yarn release:write-changelog ${{ steps.bump-version.outputs.next-version }} --verbose
 
-      - name: 'Commit changes to branch: version-prerelease-from-${{ steps.bump-version.outputs.current-version }}'
+      - name: 'Commit changes to branch: version-next-from-${{ steps.bump-version.outputs.current-version }}'
         working-directory: .
         run: |
           git config --global user.name 'storybook-bot'
           git config --global user.email '32066757+storybook-bot@users.noreply.github.com'
-          git checkout -b version-prerelease-from-${{ steps.bump-version.outputs.current-version }}
+          git checkout -b version-next-from-${{ steps.bump-version.outputs.current-version }}
+          git add .
+          git commit -m "Write changelog for ${{ steps.bump-version.outputs.next-version }} [skip ci]" || true
+          git push --force origin version-next-from-${{ steps.bump-version.outputs.current-version }}
+
+      - name: Resolve merge-conflicts with base branch
+        if: steps.is-prerelease.outputs.prerelease == 'true'
+        env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        run: |
+          git pull origin latest-release
+          git checkout --ours .
           git add .
-          git commit -m "Write changelog for ${{ steps.bump-version.outputs.next-version }}" || true
-          git push --force origin version-prerelease-from-${{ steps.bump-version.outputs.current-version }}
+          git commit -m "Merge latest-release into version-1 with conflicts resolved to ours [skip ci]"
 
       - name: Generate PR description
         id: description
@@ -144,14 +158,15 @@ jobs:
             gh pr edit \
               --repo "${{github.repository }}" \
               --title "Release: $CAPITALIZED_RELEASE_TYPE ${{ inputs.pre-id && format('{0} ', inputs.pre-id) }}${{ steps.bump-version.outputs.next-version }}" \
+              --base ${{ steps.is-prerelease.outputs.prerelease == 'true' && 'next-release' || 'latest-release' }} \
               --body "${{ steps.description.outputs.description }}"
           else
             gh pr create \
               --repo "${{github.repository }}"\
               --title "Release: $CAPITALIZED_RELEASE_TYPE ${{ inputs.pre-id && format('{0} ', inputs.pre-id) }}${{ steps.bump-version.outputs.next-version }}" \
               --label "release" \
-              --base next-release \
-              --head version-prerelease-from-${{ steps.bump-version.outputs.current-version }} \
+              --base ${{ steps.is-prerelease.outputs.prerelease == 'true' && 'next-release' || 'latest-release' }} \
+              --head version-next-from-${{ steps.bump-version.outputs.current-version }} \
               --body "${{ steps.description.outputs.description }}"
           fi
 
diff --git a/CONTRIBUTING/RELEASING.md b/CONTRIBUTING/RELEASING.md
index e81029088f8c..ab71e8fe6b4d 100644
--- a/CONTRIBUTING/RELEASING.md
+++ b/CONTRIBUTING/RELEASING.md
@@ -150,10 +150,10 @@ gitGraph
     commit
     checkout next
     merge some-bugfix type: HIGHLIGHT
-    branch version-prerelease-from-7.1.0-alpha.28
+    branch version-next-from-7.1.0-alpha.28
     commit id: "write changelog"
     checkout next-release
-    merge version-prerelease-from-7.1.0-alpha.28
+    merge version-next-from-7.1.0-alpha.28
     commit id: "bump versions" tag: "7.1.0-alpha.29"
     checkout next
     merge next-release
@@ -562,11 +562,11 @@ gitGraph
     branch some-simultaneous-bugfix
     commit
     checkout next
-    branch version-prerelease-from-7.1.0-alpha.28
+    branch version-next-from-7.1.0-alpha.28
     commit id
     checkout next
     merge some-simultaneous-bugfix type: HIGHLIGHT id: "whoops!"
-    merge version-prerelease-from-7.1.0-alpha.28 tag: "v7.1.0-alpha.29"
+    merge version-next-from-7.1.0-alpha.28 tag: "v7.1.0-alpha.29"
 ```
 
 When publishing at the last commit with tag `v7.1.0-alpha.29`, it will publish whatever the content is at that point (all the square dots), which includes the "whoops!" commit from merging the bugfix. But the bugfix was never part of the release pull request because it got prepared before the bugfix was merged in.
@@ -586,19 +586,19 @@ gitGraph
     branch some-simultanous-bugfix
     commit
     checkout next
-    branch version-prerelease-from-7.1.0-alpha.28
+    branch version-next-from-7.1.0-alpha.28
     commit id: "write changelog"
     checkout next
     merge some-simultanous-bugfix id: "whoops!"
     checkout next-release
-    merge version-prerelease-from-7.1.0-alpha.28
+    merge version-next-from-7.1.0-alpha.28
     commit id: "bump versions" tag: "v7.1.0-alpha.29"
     checkout next
     merge next-release
-    branch version-prerelease-from-7.1.0-alpha.29
+    branch version-next-from-7.1.0-alpha.29
     commit id: "write changelog again"
     checkout next-release
-    merge version-prerelease-from-7.1.0-alpha.29
+    merge version-next-from-7.1.0-alpha.29
     commit id: "bump versions again" tag: "v7.1.0-alpha.30"
     checkout next
     merge next-release
diff --git a/scripts/release/generate-pr-description.ts b/scripts/release/generate-pr-description.ts
index f912c5885225..7049a1aa44c8 100644
--- a/scripts/release/generate-pr-description.ts
+++ b/scripts/release/generate-pr-description.ts
@@ -52,6 +52,7 @@ const CHANGE_TITLES_TO_IGNORE = [
   /\[ci skip\]/i,
   /^Update CHANGELOG\.md for.*/i,
   /^Release: (Pre)?(Patch|Minor|Major|Release).*\d+$/i,
+  /^Update \.\/docs\/versions/,
 ];
 
 export const mapToChangelist = ({
diff --git a/scripts/release/is-pr-frozen.ts b/scripts/release/is-pr-frozen.ts
index 70289b5369d8..27d3a37b7653 100644
--- a/scripts/release/is-pr-frozen.ts
+++ b/scripts/release/is-pr-frozen.ts
@@ -12,7 +12,7 @@ program
   .description(
     'returns true if the versioning pull request associated with the current branch has the "freeze" label'
   )
-  .option('-P, --patch', 'Look for patch PR instead of prerelease PR', false)
+  .option('-P, --patch', 'Look for hotfix PR instead of next PR', false)
   .option('-V, --verbose', 'Enable verbose logging', false);
 
 const CODE_DIR_PATH = path.join(__dirname, '..', '..', 'code');
@@ -43,10 +43,10 @@ const getRepo = async (verbose?: boolean): Promise => {
 };
 
 export const run = async (options: unknown) => {
-  const { verbose, patch } = options as { verbose?: boolean; patch?: boolean };
+  const { verbose, hotfix } = options as { verbose?: boolean; hotfix?: boolean };
 
   const version = await getCurrentVersion();
-  const branch = `version-${patch ? 'patch' : 'prerelease'}-from-${version}`;
+  const branch = `version-${hotfix ? 'hotfix' : 'next'}-from-${version}`;
 
   console.log(`πŸ’¬ Determining if pull request from branch '${chalk.blue(branch)}' is frozen`);
 

From 1161b7ada4b93a0f0bb6a9dda7a34abacbf479dd Mon Sep 17 00:00:00 2001
From: Jeppe Reinhold 
Date: Tue, 29 Aug 2023 14:42:41 +0200
Subject: [PATCH 070/312] more renaming of new release workflows

---
 CONTRIBUTING/RELEASING.md                  | 42 +++++++++++-----------
 scripts/release/generate-pr-description.ts |  2 +-
 scripts/release/is-pr-frozen.ts            |  2 +-
 3 files changed, 22 insertions(+), 24 deletions(-)

diff --git a/CONTRIBUTING/RELEASING.md b/CONTRIBUTING/RELEASING.md
index ab71e8fe6b4d..05533fccb387 100644
--- a/CONTRIBUTING/RELEASING.md
+++ b/CONTRIBUTING/RELEASING.md
@@ -45,8 +45,8 @@
 
 This document explains the release process for the Storybook monorepo. There are two types:
 
-1. Prereleases and major/minor releases - releasing any content that is on the `next` branch
-2. Patch releases - picking any content from `next` to `main`, that needs to be patched back to the current stable minor release
+1. `next`-releases - releasing any content that is on the `next` branch, either prereleases or stable releases
+2. Hotfix releases - picking any content from `next` to `main`, that needs to be patched back to the current stable minor release
 
 The release process is based on automatically created "Release Pull Requests", that when merged will trigger a new version to be released.
 
@@ -57,7 +57,7 @@ A designated Releaser -- which may rotate between core team members -- will go t
 - [Publish](../.github/workflows/publish.yml)
 
 > **Note**
-> This document distinguishes between **patch** releases and **prereleases**. This is a simplification; stable major and minor releases work the same way as prereleases. The distinction reflects the difference between patching an existing minor version on `main` or releasing a new minor/major/prerelease from `next`.
+> This document distinguishes between **`next`-releases** and **hotfix** releases. The distinction reflects the difference between patching an existing minor version on `main` or releasing a new minor/major/prerelease from `next`.
 
 ### Branches
 
@@ -103,7 +103,7 @@ Two GitHub Actions workflows automatically create release pull requests, one for
 The high-level flow is:
 
 1. When a PR is merged to `next` (or a commit is pushed), both release pull requests are (re)generated.
-2. They create a new branch - `version-(patch|prerelease)-from-`.
+2. They create a new branch - `version-(hotfix|next)-from-`.
 3. They calculate which version to bump to according to the version strategy.
 4. They update `CHANGELOG(.prerelease).md` with all changes detected.
 5. They commit everything.
@@ -126,7 +126,7 @@ A few key points to note in this flow:
 
 The default versioning strategy is to increase the current prerelease number, as described in [Prereleases - `7.1.0-alpha.12` -> `7.1.0-alpha.13`](#prereleases---710-alpha12---710-alpha13). If there is no prerelease number (i.e., we just released a new stable minor/major version), it will add one to a patch bump, so it would go from `7.2.0` to `7.2.1-0` by default.
 
-Prerelease PRs are only created if there are actual changes to release. Content labeled with "build" or "documentation" is [not considered "releasable"](#which-changes-are-considered-releasable-and-what-does-it-mean) and is not user-facing, so it doesn't make sense to create a release. This is explained in more detail in [Why are no release PRs being prepared?](#why-are-no-release-prs-being-prepared).
+`next`-PRs are only created if there are actual changes to release. Content labeled with "build" or "documentation" is [not considered "releasable"](#which-changes-are-considered-releasable-and-what-does-it-mean) and is not user-facing, so it doesn't make sense to create a release. This is explained in more detail in [Why are no release PRs being prepared?](#why-are-no-release-prs-being-prepared).
 
 The preparation workflow will create a new branch from `next`, called `version-next-from-`, and open a pull request targeting `next-release`. When the Releaser merges it, the [publish workflow](#publishing) will merge `next-release` into `next`.
 
@@ -245,9 +245,9 @@ The high-level workflow for a Releaser is:
 
 Look for the release pull request that has been prepared for the type of release you're about to release:
 
-- "Release: Prerelease ``" for prereleases
-- "Release: Patch ``" for patch releases
-- "Release: Merge patches to `main` (without version bump)" for patches without releases
+- "Release: Prerelease|Minor|Major ``" for releases from `next`
+- "Release: Hotfix ``" for hotfix releases
+- "Release: Merge patches to `main` (without version bump)" for hotfixes without releases
 
 For example: https://github.com/storybookjs/storybook/pull/23148
 
@@ -267,7 +267,7 @@ It is important to verify that the release includes the right content. Key eleme
 
 For example, check if it's a breaking change that isn't allowed in a minor prerelease, or if it's a new feature in a patch release. If it's not suitable, revert the pull request and notify the author.
 
-Sometimes when doing a patch release, a pull request can have the "patch" label but you don't want that change to be part of this release. Maybe you're not confident in the change, or you require more input from maintainers before releasing it. In those situations you should remove the "patch" label from the pull request and follow through with the release (make sure to re-trigger the workflow). When the release is done, add the patch label back again, so it will be part of the next release.
+Sometimes when doing a patch release, a pull request can have the "patch:yes" label but you don't want that change to be part of this release. Maybe you're not confident in the change, or you require more input from maintainers before releasing it. In those situations you should remove the "patch:yes" label from the pull request and follow through with the release (make sure to re-trigger the workflow). When the release is done, add the "patch:yes" label back again, so it will be part of the next release.
 
 2. Is the pull request title correct?
 
@@ -280,9 +280,9 @@ If a pull request changes multiple places, it can be hard to choose an area - th
 
 Some labels have specific meanings when it comes to releases. It's important that each pull request has labels that accurately describe the change, as labels can determine if a pull request is included in the changelog or not. This is explained further in the [Which changes are considered "releasable", and what does it mean?](#which-changes-are-considered-releasable-and-what-does-it-mean) section.
 
-4. Patches: has it already been released in a prerelease?
+4. Hotfixes: has it already been released in a prerelease?
 
-If this is a patch release, make sure that all pull requests have already been released in a prerelease. If some haven't, create a new prerelease first.
+If this is a hotfix release, make sure that all pull requests have already been released in a prerelease. If some haven't, create a new prerelease first.
 
 This is not a technical requirement, but it's a good practice to ensure that a change doesn't break a prerelease before releasing it to stable.
 
@@ -301,12 +301,12 @@ When triggering the workflows, always choose the `next` branch as the base, unle
 
 The workflows can be triggered here:
 
-- [Prepare prerelease PR](https://github.com/storybookjs/storybook/actions/workflows/prepare-next-release.yml)
-- [Prepare patch PR](https://github.com/storybookjs/storybook/actions/workflows/prepare-hotfix-release.yml)
+- [Prepare next PR](https://github.com/storybookjs/storybook/actions/workflows/prepare-next-release.yml)
+- [Prepare hotfix PR](https://github.com/storybookjs/storybook/actions/workflows/prepare-hotfix-release.yml)
 
 Crucially for prereleases, this is also where you change the versioning strategy if you need something else than the default as described in [Preparing - `next`-releases](#next-releases). When triggering the prerelease workflow manually, you can optionally add inputs:
 
-![Screenshot of triggering the prerelease workflow in GitHub Actions, with a form that shows a release type selector and a prerelease identifier text field](prerelease-workflow-inputs.png)
+![Screenshot of triggering the next-release workflow in GitHub Actions, with a form that shows a release type selector and a prerelease identifier text field](prerelease-workflow-inputs.png)
 
 See [Versioning Scenarios](#versioning-scenarios) for a description of each version bump scenario, how to activate it and what it does, and [Which combination of inputs creates the version bump I need?](#which-combination-of-inputs-creates-the-version-bump-i-need) for a detailed description of the workflow inputs.
 
@@ -340,11 +340,11 @@ You can inspect the workflows to see what they are running and copy that, but he
 
 Before you start you should make sure that your working tree is clean and the repository is in a clean state by running `git clean -xdf`.
 
-1. Create a new branch from either `next` (prereleases) or `main` (patches)
+1. Create a new branch from either `next` or `main` (hotfixes)
 2. Get all tags: `git fetch --tags origin`
 3. Install dependencies: `yarn task --task=install --start-from=install`
 4. `cd scripts`
-5. (If patch release) Cherry pick:
+5. (If hotfix release) Cherry pick:
    1. `yarn release:pick-patches`
    2. Manually cherry pick any necessary patches based on the previous output
 6. Bump versions:
@@ -362,21 +362,21 @@ Before you start you should make sure that your working tree is clean and the re
 12. (If automatic publishing is still working, it should kick in now and the rest of the steps can be skipped)
 13. `cd ..`
 14. Publish to the registry: `YARN_NPM_AUTH_TOKEN= yarn release:publish --tag <"next" OR "latest"> --verbose`
-15. (If patch release) `yarn release:label-patches`
+15. (If hotfix release) `yarn release:label-patches`
 16. Manually create a GitHub Release with a tag that is the new version and the target being `latest-release` or `next-release`.
 17. Merge to core branch:
     1. `git checkout <"next"|"main">`
     2. `git pull`
     3. `git merge <"next-release"|"latest-release">`
     4. `git push origin`
-18. (If patch release) Sync `CHANGELOG.md` to `next` with:
+18. (If hotfix release) Sync `CHANGELOG.md` to `next` with:
     1. `git checkout next`
     2. `git pull`
     3. `git checkout origin/main ./CHANGELOG.md`
     4. `git add ./CHANGELOG.md`
     5. `git commit -m "Update CHANGELOG.md for v"`
     6. `git push origin`
-19. (If prerelease) Sync `versions/next.json` from `next` to `main`
+19. (If `next`-release) Sync `versions/next.json` from `next` to `main`
     1. `git checkout main`
     2. `git pull`
     3. `git checkout origin/next ./docs/versions/next.json`
@@ -448,11 +448,9 @@ To promote a prerelease to a new prerelease ID, during the [Re-trigger the Workf
 
 To promote a prerelease to a stable reelase, during the [Re-trigger the Workflow](#4-re-trigger-the-workflow) step, choose:
 
-- Release type: Patch
+- Release type: Patch, Minor or Major
 - Prerelease ID: Leave empty
 
-The "Patch" release type ensures the current prerelease version gets promoted to a stable version without any major/minor/patch bumps.
-
 This scenario is special as it will target `latest-release` instead of `next-release`, and thus merge into `main` when done, and not `next`. So it goes `next` -> `version-from- `latest-release` -> `main`. When this is done, the Releaser will need to trigger a new release on `next` that bumps the version to a new prerelease minor as described [just below](#first-prerelease-of-new-majorminor---710---720-alpha0-or-800-alpha0).
 
 ### First prerelease of new major/minor - `7.1.0` -> `7.2.0-alpha.0` or `8.0.0-alpha.0`
diff --git a/scripts/release/generate-pr-description.ts b/scripts/release/generate-pr-description.ts
index 7049a1aa44c8..aa7dfe7e53e0 100644
--- a/scripts/release/generate-pr-description.ts
+++ b/scripts/release/generate-pr-description.ts
@@ -18,7 +18,7 @@ program
     'Which version to generate changelog from, eg. "7.0.7". Defaults to the version at code/package.json'
   )
   .option('-N, --next-version ', 'Which version to generate changelog to, eg. "7.0.8"')
-  .option('-P, --unpicked-patches', 'Set to only consider PRs labeled with "patch" label')
+  .option('-P, --unpicked-patches', 'Set to only consider PRs labeled with "patch:yes" label')
   .option(
     '-M, --manual-cherry-picks ',
     'A stringified JSON array of commit hashes, of patch PRs that needs to be cherry-picked manually'
diff --git a/scripts/release/is-pr-frozen.ts b/scripts/release/is-pr-frozen.ts
index 27d3a37b7653..56f75d0ba33b 100644
--- a/scripts/release/is-pr-frozen.ts
+++ b/scripts/release/is-pr-frozen.ts
@@ -12,7 +12,7 @@ program
   .description(
     'returns true if the versioning pull request associated with the current branch has the "freeze" label'
   )
-  .option('-P, --patch', 'Look for hotfix PR instead of next PR', false)
+  .option('-H, --hotfix', 'Look for hotfix PR instead of next PR', false)
   .option('-V, --verbose', 'Enable verbose logging', false);
 
 const CODE_DIR_PATH = path.join(__dirname, '..', '..', 'code');

From f70acaa31675e5931fbb8f4bd1fae0677d87bf02 Mon Sep 17 00:00:00 2001
From: Kyle Gach 
Date: Wed, 16 Aug 2023 13:25:36 -0600
Subject: [PATCH 071/312] Document deprecation of storyshots

- Add equivalent test-runner instructions
---
 docs/faq.md                            |  6 +++
 docs/writing-tests/snapshot-testing.md | 51 +++++++++++++++++++++++++-
 docs/writing-tests/visual-testing.md   |  2 +-
 3 files changed, 56 insertions(+), 3 deletions(-)

diff --git a/docs/faq.md b/docs/faq.md
index 83756f4152c9..02c7e58f3ff1 100644
--- a/docs/faq.md
+++ b/docs/faq.md
@@ -374,6 +374,12 @@ Yes, with the release of version 6.2, Storybook now includes support for Vue 3.
 
 ## Is snapshot testing with Storyshots supported for Vue 3?
 
+

+
+⛔️ Storyshots has been deprecated in favor of [test runner](./writing-tests/test-runner.md), which you can use for both snapshot and [visual testing](./writing-tests/visual-testing.md).
+
+

+
 Yes, with the release of version 6.2, the [`Storyshots addon`](https://www.npmjs.com/package/@storybook/addon-storyshots) will automatically detect Vue 3 projects.
 
 If you run into a situation where this is not the case, you can adjust the `config` object and manually specify the framework (e.g., `vue3`).
diff --git a/docs/writing-tests/snapshot-testing.md b/docs/writing-tests/snapshot-testing.md
index 29f3489add07..2cbf003c4b04 100644
--- a/docs/writing-tests/snapshot-testing.md
+++ b/docs/writing-tests/snapshot-testing.md
@@ -8,9 +8,56 @@ Storybook is a helpful tool for snapshot testing because every story is essentia
 
 ![Example Snapshot test](./snapshot-test.png)
 
-## Setup Storyshots
+## Set up test runner
 
-[Storyshots](https://storybook.js.org/addons/@storybook/addon-storyshots/) is the official Storybook addon that enables snapshot testing, powered by [Jest](https://jestjs.io/docs/getting-started).
+Storybook test runner turns all of your stories into executable tests. It is powered by [Jest](https://jestjs.io/) and [Playwright](https://playwright.dev/).
+
+Follow the [setup instructions](./test-runner#setup) to install and run the test runner.
+
+Then, you can use the [test hook API](./test-runner#test-hook-api-experimental) to snapshot the HTML of each story:
+
+```js
+// .storybook/test-runner.js
+
+module.exports = {
+  async postRender(page, context) {
+    // the #storybook-root element wraps each story
+    const elementHandler = await page.$('#storybook-root');
+    const innerHTML = await elementHandler.innerHTML();
+    expect(innerHTML).toMatchSnapshot();
+  },
+};
+```
+
+When running in [stories.json mode](./test-runner#storiesjson-mode), tests are generated in a temporary folder and snapshots get stored alongside them. You will need to [`--eject`](./test-runner#configure) and configure a custom [`snapshotResolver`](https://jestjs.io/docs/configuration#snapshotresolver-string) to store them elsewhere, e.g. in your working directory:
+
+```js
+// ./test-runner-jest.config.js
+
+const path = require('path');
+
+module.exports = {
+  resolveSnapshotPath: (testPath, snapshotExtension) =>
+    path.join(process.cwd(), '__snapshots__', path.basename(testPath) + snapshotExtension),
+  resolveTestPath: (snapshotFilePath, snapshotExtension) =>
+    path.join(process.env.TEST_ROOT, path.basename(snapshotFilePath, snapshotExtension)),
+  testPathForConsistencyCheck: path.join(process.env.TEST_ROOT, 'example.test.js'),
+};
+```
+
+Finally, you can [set up test runner to run your tests in CI](/test-runner#set-up-ci-to-run-tests).
+
+There are many other configuration options available, such as watch mode and coverage. Please reference the [test runner documentation](./test-runner) for more information.
+
+## Set up Storyshots
+
+

+
+⛔️ Storyshots has been deprecated in favor of [test runner](./test-runner.md), which you can use for both snapshot and [visual testing](./visual-testing.md).
+
+

+
+[Storyshots](https://storybook.js.org/addons/@storybook/addon-storyshots/) is a Storybook addon that enables snapshot testing, powered by [Jest](https://jestjs.io/docs/getting-started).
 
 Run the following command to install Storyshots:
 
diff --git a/docs/writing-tests/visual-testing.md b/docs/writing-tests/visual-testing.md
index a62cbdd9d593..7e303fcfa4aa 100644
--- a/docs/writing-tests/visual-testing.md
+++ b/docs/writing-tests/visual-testing.md
@@ -15,7 +15,7 @@ Ideal for verifying what the user sees: layout, color, size, and contrast. Story
 
 There are [many tools](https://github.com/mojoaxel/awesome-regression-testing) for visual testing. We recommend [Chromatic](https://www.chromatic.com?utm_source=storybook_website&utm_medium=link&utm_campaign=storybook) by Storybook maintainers to run visual tests in a lightning-fast cloud browser environment.
 
-For a self-managed alternative to Chromatic, we offer [StoryShots](https://github.com/storybookjs/storybook/tree/next/code/addons/storyshots-core). It allows you to run visual tests on stories by integrating with [jest-image-snapshot](https://github.com/storybookjs/storybook/tree/main/code/addons/storyshots-puppeteer#imagesnapshots).
+For a self-managed alternative to Chromatic, we offer [test runner](./test-runner.md). It allows you to run visual tests on stories by integrating with [Jest](https://jestjs.io/) and [Playwright](https://playwright.dev/). Here's an example [recipe for visual testing stories](https://github.com/storybookjs/test-runner#image-snapshot-recipe).
 
 ## Setup Chromatic addon
 

From ad881b92d43664cde50287fa0bbae25a5369766c Mon Sep 17 00:00:00 2001
From: Kyle Gach 
Date: Mon, 21 Aug 2023 11:12:55 -0600
Subject: [PATCH 072/312] Remove no longer needed FAQ question

---
 docs/faq.md | 15 ---------------
 1 file changed, 15 deletions(-)

diff --git a/docs/faq.md b/docs/faq.md
index 02c7e58f3ff1..9be3455a3be9 100644
--- a/docs/faq.md
+++ b/docs/faq.md
@@ -22,7 +22,6 @@ Here are some answers to frequently asked questions. If you have a question, you
 - [What icons are available for my toolbar or my addon?](#what-icons-are-available-for-my-toolbar-or-my-addon)
 - [I see a "No Preview" error with a Storybook production build](#i-see-a-no-preview-error-with-a-storybook-production-build)
 - [Can I use Storybook with Vue 3?](#can-i-use-storybook-with-vue-3)
-- [Is snapshot testing with Storyshots supported for Vue 3?](#is-snapshot-testing-with-storyshots-supported-for-vue-3)
 - [Why aren't my code blocks highlighted with Storybook MDX](#why-arent-my-code-blocks-highlighted-with-storybook-mdx)
 - [Why aren't my MDX 2 stories working in Storybook?](#why-arent-my-mdx-2-stories-working-in-storybook)
 - [Why are my mocked GraphQL queries failing with Storybook's MSW addon?](#why-are-my-mocked-graphql-queries-failing-with-storybooks-msw-addon)
@@ -372,20 +371,6 @@ Suppose you don't want to run the command above frequently. Add http-serve
 
 Yes, with the release of version 6.2, Storybook now includes support for Vue 3. See the [install page](./get-started/install.md) for instructions.
 
-## Is snapshot testing with Storyshots supported for Vue 3?
-
-

-
-⛔️ Storyshots has been deprecated in favor of [test runner](./writing-tests/test-runner.md), which you can use for both snapshot and [visual testing](./writing-tests/visual-testing.md).
-
-

-
-Yes, with the release of version 6.2, the [`Storyshots addon`](https://www.npmjs.com/package/@storybook/addon-storyshots) will automatically detect Vue 3 projects.
-
-If you run into a situation where this is not the case, you can adjust the `config` object and manually specify the framework (e.g., `vue3`).
-
-See our documentation on how to customize the [Storyshots configuration](./writing-tests/snapshot-testing.md).
-
 ## Why aren't my code blocks highlighted with Storybook MDX
 
 Out of the box, Storybook provides syntax highlighting for a set of languages (e.g., Javascript, Markdown, CSS, HTML, Typescript, GraphQL) you can use with your code blocks. Currently, there's a know limitation when you try and register a custom language to get syntax highlighting. We're working on a fix for this And will update this section once it's available.

From 1fe1d34327259da1a7399658ee4901deb07abc4f Mon Sep 17 00:00:00 2001
From: Kyle Gach 
Date: Fri, 25 Aug 2023 09:18:17 -0600
Subject: [PATCH 073/312] Address feedback

- Turn code example into snippets
- Fix link
---
 .../common/test-runner-snapshot.js.mdx        | 12 ++++++++++
 .../common/test-runner-snapshot.ts.mdx        | 16 ++++++++++++++
 docs/writing-tests/snapshot-testing.md        | 22 +++++++++----------
 3 files changed, 38 insertions(+), 12 deletions(-)
 create mode 100644 docs/snippets/common/test-runner-snapshot.js.mdx
 create mode 100644 docs/snippets/common/test-runner-snapshot.ts.mdx

diff --git a/docs/snippets/common/test-runner-snapshot.js.mdx b/docs/snippets/common/test-runner-snapshot.js.mdx
new file mode 100644
index 000000000000..9786372faf5f
--- /dev/null
+++ b/docs/snippets/common/test-runner-snapshot.js.mdx
@@ -0,0 +1,12 @@
+```js
+// .storybook/test-runner.js
+
+export default {
+  async postRender(page, context) {
+    // the #storybook-root element wraps each story
+    const elementHandler = await page.$('#storybook-root');
+    const innerHTML = await elementHandler.innerHTML();
+    expect(innerHTML).toMatchSnapshot();
+  },
+};
+```
\ No newline at end of file
diff --git a/docs/snippets/common/test-runner-snapshot.ts.mdx b/docs/snippets/common/test-runner-snapshot.ts.mdx
new file mode 100644
index 000000000000..9df97e638935
--- /dev/null
+++ b/docs/snippets/common/test-runner-snapshot.ts.mdx
@@ -0,0 +1,16 @@
+```ts
+// .storybook/test-runner.ts
+
+import type { TestRunnerConfig } from '@storybook/test-runner';
+
+const config: TestRunnerConfig = {
+  async postRender(page, context) {
+    // the #storybook-root element wraps each story
+    const elementHandler = await page.$('#storybook-root');
+    const innerHTML = await elementHandler.innerHTML();
+    expect(innerHTML).toMatchSnapshot();
+  },
+};
+
+export default config;
+```
\ No newline at end of file
diff --git a/docs/writing-tests/snapshot-testing.md b/docs/writing-tests/snapshot-testing.md
index 2cbf003c4b04..6d693b44b5fc 100644
--- a/docs/writing-tests/snapshot-testing.md
+++ b/docs/writing-tests/snapshot-testing.md
@@ -16,18 +16,16 @@ Follow the [setup instructions](./test-runner#setup) to install and run the test
 
 Then, you can use the [test hook API](./test-runner#test-hook-api-experimental) to snapshot the HTML of each story:
 
-```js
-// .storybook/test-runner.js
+
 
-module.exports = {
-  async postRender(page, context) {
-    // the #storybook-root element wraps each story
-    const elementHandler = await page.$('#storybook-root');
-    const innerHTML = await elementHandler.innerHTML();
-    expect(innerHTML).toMatchSnapshot();
-  },
-};
-```
+
+
+
 
 When running in [stories.json mode](./test-runner#storiesjson-mode), tests are generated in a temporary folder and snapshots get stored alongside them. You will need to [`--eject`](./test-runner#configure) and configure a custom [`snapshotResolver`](https://jestjs.io/docs/configuration#snapshotresolver-string) to store them elsewhere, e.g. in your working directory:
 
@@ -45,7 +43,7 @@ module.exports = {
 };
 ```
 
-Finally, you can [set up test runner to run your tests in CI](/test-runner#set-up-ci-to-run-tests).
+Finally, you can [set up test runner to run your tests in CI](./test-runner.md#set-up-ci-to-run-tests).
 
 There are many other configuration options available, such as watch mode and coverage. Please reference the [test runner documentation](./test-runner) for more information.
 

From 1f89b847c7229b8622548a6eff050d95167931c4 Mon Sep 17 00:00:00 2001
From: Kyle Gach 
Date: Tue, 29 Aug 2023 11:09:20 -0600
Subject: [PATCH 074/312] Update `stories.json` -> `index.json`

---
 docs/api/main-config-features.md              |  4 ++-
 docs/configure/overview.md                    | 10 +++----
 docs/configure/sidebar-and-urls.md            |  2 +-
 docs/sharing/publish-storybook.md             |  2 +-
 docs/sharing/storybook-composition.md         | 16 +++++-----
 ...est-runner-disable-stories-json.npm.js.mdx |  3 --
 ...st-runner-disable-stories-json.pnpm.js.mdx |  3 --
 ...st-runner-disable-stories-json.yarn.js.mdx |  3 --
 ...k-test-runner-with-stories-json.npm.js.mdx |  3 --
 ...-test-runner-with-stories-json.pnpm.js.mdx |  3 --
 ...-test-runner-with-stories-json.yarn.js.mdx |  3 --
 .../test-runner-no-index-json.npm.js.mdx      |  3 ++
 .../test-runner-no-index-json.pnpm.js.mdx     |  3 ++
 .../test-runner-no-index-json.yarn.js.mdx     |  3 ++
 .../test-runner-with-index-json.npm.js.mdx    |  3 ++
 .../test-runner-with-index-json.pnpm.js.mdx   |  3 ++
 .../test-runner-with-index-json.yarn.js.mdx   |  3 ++
 docs/writing-tests/snapshot-testing.md        |  2 +-
 docs/writing-tests/test-runner.md             | 30 +++++++++----------
 19 files changed, 52 insertions(+), 50 deletions(-)
 delete mode 100644 docs/snippets/common/storybook-test-runner-disable-stories-json.npm.js.mdx
 delete mode 100644 docs/snippets/common/storybook-test-runner-disable-stories-json.pnpm.js.mdx
 delete mode 100644 docs/snippets/common/storybook-test-runner-disable-stories-json.yarn.js.mdx
 delete mode 100644 docs/snippets/common/storybook-test-runner-with-stories-json.npm.js.mdx
 delete mode 100644 docs/snippets/common/storybook-test-runner-with-stories-json.pnpm.js.mdx
 delete mode 100644 docs/snippets/common/storybook-test-runner-with-stories-json.yarn.js.mdx
 create mode 100644 docs/snippets/common/test-runner-no-index-json.npm.js.mdx
 create mode 100644 docs/snippets/common/test-runner-no-index-json.pnpm.js.mdx
 create mode 100644 docs/snippets/common/test-runner-no-index-json.yarn.js.mdx
 create mode 100644 docs/snippets/common/test-runner-with-index-json.npm.js.mdx
 create mode 100644 docs/snippets/common/test-runner-with-index-json.pnpm.js.mdx
 create mode 100644 docs/snippets/common/test-runner-with-index-json.yarn.js.mdx

diff --git a/docs/api/main-config-features.md b/docs/api/main-config-features.md
index b556e8323110..81a80502a7bc 100644
--- a/docs/api/main-config-features.md
+++ b/docs/api/main-config-features.md
@@ -22,7 +22,9 @@ Enables Storybook's additional features.
 
 Type: `boolean`
 
-Generates a `stories.json` file to help story loading with the on-demand mode.
+Default: `true`, when [`storyStoreV7`](#storystorev7) is `true`
+
+Generates a `index.json` and `stories.json` files to help story loading with the on-demand mode.
 
 
 
diff --git a/docs/configure/overview.md b/docs/configure/overview.md
index 14faf978e1a2..a5e877a03e46 100644
--- a/docs/configure/overview.md
+++ b/docs/configure/overview.md
@@ -51,11 +51,11 @@ Storybook's main configuration (i.e., the `main.js|ts`) defines your Storybook p
 
 Additionally, you can also provide additional feature flags to your Storybook configuration. Below is an abridged list of available features that are currently available.
 
-| Configuration element | Description                                                                                                                                                       |
-| --------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `storyStoreV7`        | Configures Storybook to load stories [on demand](#on-demand-story-loading), rather than during boot up 
 `features: { storyStoreV7: true }`                   |
-| `buildStoriesJson`    | Generates a `stories.json` file to help story loading with the on-demand mode 
 `features: { buildStoriesJson: true }`                                        |
-| `legacyMdx1`          | Enables support for MDX version 1 as a fallback. Requires [`@storybook/mdx1-csf`](https://github.com/storybookjs/mdx1-csf) 
 `features: { legacyMdx1: true }` |
+| Configuration element | Description                                                                                                                                                                                   |
+| --------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `storyStoreV7`        | Configures Storybook to load stories [on demand](#on-demand-story-loading), rather than during boot up (defaults to `true` as of `v7.0`) 
 `features: { storyStoreV7: true }`             |
+| `buildStoriesJson`    | Generates `index.json` and `stories.json` files to help story loading with the on-demand mode (defaults to `true` when `storyStoreV7` is `true`) 
 `features: { buildStoriesJson: true }` |
+| `legacyMdx1`          | Enables support for MDX version 1 as a fallback. Requires [`@storybook/mdx1-csf`](https://github.com/storybookjs/mdx1-csf) 
 `features: { legacyMdx1: true }`                             |
 
 ## Configure story loading
 
diff --git a/docs/configure/sidebar-and-urls.md b/docs/configure/sidebar-and-urls.md
index 094add432b1d..0d3bc106cb9b 100644
--- a/docs/configure/sidebar-and-urls.md
+++ b/docs/configure/sidebar-and-urls.md
@@ -149,7 +149,7 @@ When Storybook generates the titles for all matching stories, they'll retain the
 
 ### Story Indexers
 
-Story Indexers are a set of heuristics used by Storybook to crawl your filesystem based on a given glob pattern searching for matching stories, which is then used to generate an index.json (formerly stories.json) file responsible for populating the sidebar with the necessary information. By default, this heuristic will look for files that contain the following scheme \*.stories.@(js|jsx|mjs|ts|tsx). However, if you need, you can create your custom story indexer that you can use to include stories that have a different naming convention. For example:
+Story Indexers are a set of heuristics used by Storybook to crawl your filesystem based on a given glob pattern searching for matching stories, which is then used to generate an `index.json` (formerly `stories.json`) file responsible for populating the sidebar with the necessary information. By default, this heuristic will look for files that contain the following scheme \*.stories.@(js|jsx|mjs|ts|tsx). However, if you need, you can create your custom story indexer that you can use to include stories that have a different naming convention. For example:
 
 
 
diff --git a/docs/sharing/publish-storybook.md b/docs/sharing/publish-storybook.md
index 0c89b6978653..1748a54049b9 100644
--- a/docs/sharing/publish-storybook.md
+++ b/docs/sharing/publish-storybook.md
@@ -151,7 +151,7 @@ Storybook can communicate with services that host built Storybooks online. This
 This level of service serves published Storybooks and makes the following available:
 
 - Versioned endpoints, URLs that resolve to different published Storybooks depending on a `version=x.y.z` query parameter (where `x.y.z` is the released version of the package).
-- Support for `/stories.json`
+- Support for `/index.json` (formerly `/stories.json`) endpoint, which returns a list of stories and their metadata.
 - Support for `/metadata.json` and the `releases` field.
 
 Example: [Chromatic](https://www.chromatic.com/?utm_source=storybook_website&utm_medium=link&utm_campaign=storybook)
diff --git a/docs/sharing/storybook-composition.md b/docs/sharing/storybook-composition.md
index b9dde4a0e094..04aa8440c533 100644
--- a/docs/sharing/storybook-composition.md
+++ b/docs/sharing/storybook-composition.md
@@ -78,7 +78,7 @@ So far, we've seen how we can use composition with local or published Storybooks
 
 ### With feature flags
 
-If you're using Storybook 6.4, or higher, you can optimize your composition via the `buildStoriesJson` feature flag, allowing you to generate a `stories.json` file with the required information, providing you with a seamless integration without the need for additional dependencies. For example:
+If you're using Storybook 6.4, or higher, you can optimize your composition via the `buildStoriesJson` feature flag, allowing you to generate `index.json` and `stories.json` files with the required information, providing you with a seamless integration without the need for additional dependencies. For example:
 
 
 
@@ -93,11 +93,11 @@ If you're using Storybook 6.4, or higher, you can optimize your composition via
 
 

 
-πŸ’‘ If you already enabled automatic code splitting via the [`storyStoreV7`](https://storybook.js.org/docs/react/builders/webpack#code-splitting), you won't need this flag as it will automatically generate the `stories.json` file.
+πŸ’‘ If you already enabled automatic code splitting via the [`storyStoreV7`](https://storybook.js.org/docs/react/builders/webpack#code-splitting), you won't need this flag as it will automatically generate the `index.json` file.
 
 

 
-When you compose a Storybook featuring this flag, it will use the information retrieved from the file to populate the UI with your composed Storybook stories automatically. Here's an example of the output generated by the `stories.json` file:
+When you compose a Storybook featuring this flag, it will use the information retrieved from the file to populate the UI with your composed Storybook stories automatically. Here's an example of the output generated by the `index.json` file:
 
 
 
@@ -111,7 +111,7 @@ When you compose a Storybook featuring this flag, it will use the information re
 
 ### With the CLI
 
-If you're working with an outdated Storybook version or have a project-specific requirement that prevents you from enabling the `buildStoriesJson` feature flag. In that case, you can use Storybook's CLI to automatically generate the `stories.json` file when you deploy your Storybook. For example:
+If you're working with an outdated Storybook version or have a project-specific requirement that prevents you from enabling the `buildStoriesJson` feature flag. In that case, you can use Storybook's CLI to automatically generate the `index.json` file when you deploy your Storybook. For example:
 
 ```shell
 npx storybook extract
@@ -123,7 +123,7 @@ npx storybook extract
 
 

 
-Although a good approach to improve composition, it comes with a cost, as it will require an additional dependency being added and increased build times. Once it finishes executing, it will generate a `stories.json` file in the default build directory (`storybook-static`) with the information related to your Storybook. Here’s an example of the file contents:
+Although a good approach to improve composition, it comes with a cost, as it will require an additional dependency being added and increased build times. Once it finishes executing, it will generate an `index.json` file in the default build directory (`storybook-static`) with the information related to your Storybook. Here’s an example of the file contents:
 
 
 
@@ -137,13 +137,13 @@ Although a good approach to improve composition, it comes with a cost, as it wil
 
 Linking to a Storybook deployed using this approach will yield all the stories and other relevant information displayed in the UI.
 
-If you need, you can also add additional arguments to this command. For instance, if you want to generate the stories.json file into a custom directory, you can use the following:
+If you need, you can also add additional arguments to this command. For instance, if you want to generate the `index.json` file into a custom directory, you can use the following:
 
 ```shell
-npx storybook extract my-built-storybook-directory my-other-directory/stories.json
+npx storybook extract my-built-storybook-directory my-other-directory/index.json
 ```
 
-When executed, it will look up a built Storybook in the `my-built-storybook-directory` and create the `stories.json` file in the `my-other-directory` with all the necessary information.
+When executed, it will look up a built Storybook in the `my-built-storybook-directory` and create the `index.json` file in the `my-other-directory` with all the necessary information.
 
 

 
diff --git a/docs/snippets/common/storybook-test-runner-disable-stories-json.npm.js.mdx b/docs/snippets/common/storybook-test-runner-disable-stories-json.npm.js.mdx
deleted file mode 100644
index 33555a01dc65..000000000000
--- a/docs/snippets/common/storybook-test-runner-disable-stories-json.npm.js.mdx
+++ /dev/null
@@ -1,3 +0,0 @@
-```shell
-npm run test-storybook -- --no-stories-json
-```
diff --git a/docs/snippets/common/storybook-test-runner-disable-stories-json.pnpm.js.mdx b/docs/snippets/common/storybook-test-runner-disable-stories-json.pnpm.js.mdx
deleted file mode 100644
index ca79b95665fc..000000000000
--- a/docs/snippets/common/storybook-test-runner-disable-stories-json.pnpm.js.mdx
+++ /dev/null
@@ -1,3 +0,0 @@
-```shell
-pnpm run test-storybook --no-stories-json
-```
diff --git a/docs/snippets/common/storybook-test-runner-disable-stories-json.yarn.js.mdx b/docs/snippets/common/storybook-test-runner-disable-stories-json.yarn.js.mdx
deleted file mode 100644
index 3a8b80a39889..000000000000
--- a/docs/snippets/common/storybook-test-runner-disable-stories-json.yarn.js.mdx
+++ /dev/null
@@ -1,3 +0,0 @@
-```shell
-yarn test-storybook --no-stories-json
-```
diff --git a/docs/snippets/common/storybook-test-runner-with-stories-json.npm.js.mdx b/docs/snippets/common/storybook-test-runner-with-stories-json.npm.js.mdx
deleted file mode 100644
index b0a1f2f3909c..000000000000
--- a/docs/snippets/common/storybook-test-runner-with-stories-json.npm.js.mdx
+++ /dev/null
@@ -1,3 +0,0 @@
-```shell
-npm run test-storybook -- --stories-json
-```
diff --git a/docs/snippets/common/storybook-test-runner-with-stories-json.pnpm.js.mdx b/docs/snippets/common/storybook-test-runner-with-stories-json.pnpm.js.mdx
deleted file mode 100644
index 7d1e764ea21c..000000000000
--- a/docs/snippets/common/storybook-test-runner-with-stories-json.pnpm.js.mdx
+++ /dev/null
@@ -1,3 +0,0 @@
-```shell
-pnpm run test-storybook --stories-json
-```
diff --git a/docs/snippets/common/storybook-test-runner-with-stories-json.yarn.js.mdx b/docs/snippets/common/storybook-test-runner-with-stories-json.yarn.js.mdx
deleted file mode 100644
index eeebd6fb444a..000000000000
--- a/docs/snippets/common/storybook-test-runner-with-stories-json.yarn.js.mdx
+++ /dev/null
@@ -1,3 +0,0 @@
-```shell
-yarn test-storybook --stories-json
-```
diff --git a/docs/snippets/common/test-runner-no-index-json.npm.js.mdx b/docs/snippets/common/test-runner-no-index-json.npm.js.mdx
new file mode 100644
index 000000000000..eec0635b27e8
--- /dev/null
+++ b/docs/snippets/common/test-runner-no-index-json.npm.js.mdx
@@ -0,0 +1,3 @@
+```shell
+npm run test-storybook -- --no-index-json
+```
diff --git a/docs/snippets/common/test-runner-no-index-json.pnpm.js.mdx b/docs/snippets/common/test-runner-no-index-json.pnpm.js.mdx
new file mode 100644
index 000000000000..326202bcc218
--- /dev/null
+++ b/docs/snippets/common/test-runner-no-index-json.pnpm.js.mdx
@@ -0,0 +1,3 @@
+```shell
+pnpm run test-storybook --no-index-json
+```
diff --git a/docs/snippets/common/test-runner-no-index-json.yarn.js.mdx b/docs/snippets/common/test-runner-no-index-json.yarn.js.mdx
new file mode 100644
index 000000000000..f53c2b82672a
--- /dev/null
+++ b/docs/snippets/common/test-runner-no-index-json.yarn.js.mdx
@@ -0,0 +1,3 @@
+```shell
+yarn test-storybook --no-index-json
+```
diff --git a/docs/snippets/common/test-runner-with-index-json.npm.js.mdx b/docs/snippets/common/test-runner-with-index-json.npm.js.mdx
new file mode 100644
index 000000000000..e0cc8c5cfd76
--- /dev/null
+++ b/docs/snippets/common/test-runner-with-index-json.npm.js.mdx
@@ -0,0 +1,3 @@
+```shell
+npm run test-storybook -- --index-json
+```
diff --git a/docs/snippets/common/test-runner-with-index-json.pnpm.js.mdx b/docs/snippets/common/test-runner-with-index-json.pnpm.js.mdx
new file mode 100644
index 000000000000..d008d5bc5e0a
--- /dev/null
+++ b/docs/snippets/common/test-runner-with-index-json.pnpm.js.mdx
@@ -0,0 +1,3 @@
+```shell
+pnpm run test-storybook --index-json
+```
diff --git a/docs/snippets/common/test-runner-with-index-json.yarn.js.mdx b/docs/snippets/common/test-runner-with-index-json.yarn.js.mdx
new file mode 100644
index 000000000000..b852aa053dc7
--- /dev/null
+++ b/docs/snippets/common/test-runner-with-index-json.yarn.js.mdx
@@ -0,0 +1,3 @@
+```shell
+yarn test-storybook --index-json
+```
diff --git a/docs/writing-tests/snapshot-testing.md b/docs/writing-tests/snapshot-testing.md
index 6d693b44b5fc..69b0c17c680a 100644
--- a/docs/writing-tests/snapshot-testing.md
+++ b/docs/writing-tests/snapshot-testing.md
@@ -27,7 +27,7 @@ Then, you can use the [test hook API](./test-runner#test-hook-api-experimental)
 
 
 
-When running in [stories.json mode](./test-runner#storiesjson-mode), tests are generated in a temporary folder and snapshots get stored alongside them. You will need to [`--eject`](./test-runner#configure) and configure a custom [`snapshotResolver`](https://jestjs.io/docs/configuration#snapshotresolver-string) to store them elsewhere, e.g. in your working directory:
+When running in [index.json mode](./test-runner#indexjson-mode), tests are generated in a temporary folder and snapshots get stored alongside them. You will need to [`--eject`](./test-runner#configure) and configure a custom [`snapshotResolver`](https://jestjs.io/docs/configuration#snapshotresolver-string) to store them elsewhere, e.g. in your working directory:
 
 ```js
 // ./test-runner-jest.config.js
diff --git a/docs/writing-tests/test-runner.md b/docs/writing-tests/test-runner.md
index 4ef6b07315ab..27716c0deda1 100644
--- a/docs/writing-tests/test-runner.md
+++ b/docs/writing-tests/test-runner.md
@@ -82,8 +82,8 @@ If you're already using any of those flags in your project, you should be able t
 | Options                         | Description                                                                                                                                                                   |
 | ------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | `--help`                        | Output usage information 
`test-storybook --help`                                                                                                                         |
-| `-s`, `--stories-json`          | Run in stories json mode. Automatically detected (requires a compatible Storybook) 
`test-storybook --stories-json`          |
-| `--no-stories-json`             | Disables stories json mode 
`test-storybook --no-stories-json`                                                               |
+| `-s`, `--index-json`            | Run in index json mode. Automatically detected (requires a compatible Storybook) 
`test-storybook --index-json`                                                           |
+| `--no-index-json`               | Disables index json mode 
`test-storybook --no-index-json`                                                                                                                |
 | `-c`, `--config-dir [dir-name]` | Directory where to load Storybook configurations from 
`test-storybook -c .storybook`                                                                                     |
 | `--watch`                       | Run in watch mode 
`test-storybook --watch`                                                                                                                               |
 | `--watchAll`                    | Watch files for changes and rerun all tests when something changes.
`test-storybook --watchAll`                                                                           |
@@ -254,21 +254,21 @@ The test-runner exports a few helpers that can be used to make your tests more r
 
 
 
-### Stories.json mode
+### Index.json mode
 
-The test-runner transforms your story files into tests when testing a local Storybook. For a remote Storybook, it uses the Storybook's [stories.json](../configure/overview.md#feature-flags) file (a static index of all the stories) to run the tests.
+The test-runner transforms your story files into tests when testing a local Storybook. For a remote Storybook, it uses the Storybook's [index.json](../configure/overview.md#feature-flags) (formerly `stories.json`) file (a static index of all the stories) to run the tests.
 
 #### Why?
 
-Suppose you run into a situation where the local and remote Storybooks appear out of sync, or you might not even have access to the code. In that case, the `stories.json` file is guaranteed to be the most accurate representation of the deployed Storybook you are testing. To test a local Storybook using this feature, use the `--stories-json` flag as follows:
+Suppose you run into a situation where the local and remote Storybooks appear out of sync, or you might not even have access to the code. In that case, the `index.json` file is guaranteed to be the most accurate representation of the deployed Storybook you are testing. To test a local Storybook using this feature, use the `--index-json` flag as follows:
 
 
 
 
 
@@ -276,27 +276,27 @@ Suppose you run into a situation where the local and remote Storybooks appear ou
 
 

 
-πŸ’‘ The `stories.json` mode is not compatible with watch mode.
+πŸ’‘ The `index.json` mode is not compatible with watch mode.
 
 

 
-If you need to disable it, use the `--no-stories-json` flag:
+If you need to disable it, use the `--no-index-json` flag:
 
 
 
 
 
 
 
-#### How do I check if my Storybook has a `stories.json` file?
+#### How do I check if my Storybook has a `index.json` file?
 
-Stories.json mode requires a `stories.json` file. Open a browser window and navigate to your deployed Storybook instance (for example, `https://your-storybook-url-here.com/stories.json`). You should see a JSON file that starts with a `"v": 3` key, immediately followed by another key called "stories", which contains a map of story IDs to JSON objects. If that is the case, your Storybook supports [stories.json mode](../configure/overview.md#feature-flags).
+Index.json mode requires a `index.json` file. Open a browser window and navigate to your deployed Storybook instance (for example, `https://your-storybook-url-here.com/index.json`). You should see a JSON file that starts with a `"v": 3` key, immediately followed by another key called "stories", which contains a map of story IDs to JSON objects. If that is the case, your Storybook supports [index.json mode](../configure/overview.md#feature-flags).
 
 ---
 

From aa5510a1b39b3c3001dc1fdc1cba1f94b9dd2df1 Mon Sep 17 00:00:00 2001
From: Kyle Gach 
Date: Tue, 29 Aug 2023 11:49:23 -0600
Subject: [PATCH 075/312] Rename snippets

- Remove superfluous `storybook-` prefix
- Formatting
---
 ....js.mdx => test-runner-a11y-config.js.mdx} |  0
 ....ts.mdx => test-runner-a11y-config.ts.mdx} |  0
 ....mdx => test-runner-a11y-configure.js.mdx} |  0
 ....mdx => test-runner-a11y-configure.ts.mdx} |  0
 ...js.mdx => test-runner-a11y-disable.js.mdx} |  0
 ...ts.mdx => test-runner-a11y-disable.ts.mdx} |  0
 ... => test-runner-axe-playwright.npm.js.mdx} |  0
 ...=> test-runner-axe-playwright.pnpm.js.mdx} |  0
 ...=> test-runner-axe-playwright.yarn.js.mdx} |  0
 ...js.mdx => test-runner-coverage.npm.js.mdx} |  0
 ...s.mdx => test-runner-coverage.pnpm.js.mdx} |  0
 ...s.mdx => test-runner-coverage.yarn.js.mdx} |  0
 ...test-runner-execute-with-flags.npm.js.mdx} |  0
 ...est-runner-execute-with-flags.pnpm.js.mdx} |  0
 ...est-runner-execute-with-flags.yarn.js.mdx} |  0
 ...st-runner-execute-with-url.env-var.js.mdx} |  0
 ...> test-runner-execute-with-url.npm.js.mdx} |  0
 ... test-runner-execute-with-url.pnpm.js.mdx} |  0
 ... test-runner-execute-with-url.yarn.js.mdx} |  0
 ....js.mdx => test-runner-execute.npm.js.mdx} |  0
 ...js.mdx => test-runner-execute.pnpm.js.mdx} |  0
 ...js.mdx => test-runner-execute.yarn.js.mdx} |  0
 ...mdx => test-runner-helper-function.js.mdx} |  0
 ...mdx => test-runner-helper-function.ts.mdx} |  0
 ...s.mdx => test-runner-hooks-example.js.mdx} |  0
 ...s.mdx => test-runner-hooks-example.ts.mdx} |  0
 ....js.mdx => test-runner-install.npm.js.mdx} |  0
 ...js.mdx => test-runner-install.pnpm.js.mdx} |  0
 ...js.mdx => test-runner-install.yarn.js.mdx} |  0
 ... test-runner-local-build-workflow.yml.mdx} |  0
 .../common/test-runner-snapshot.js.mdx        |  2 +-
 .../common/test-runner-snapshot.ts.mdx        |  2 +-
 ...runner-with-deploy-event-workflow.yml.mdx} |  0
 docs/writing-tests/accessibility-testing.md   | 18 ++++-----
 docs/writing-tests/interaction-testing.md     |  6 +--
 docs/writing-tests/test-coverage.md           |  6 +--
 docs/writing-tests/test-runner.md             | 39 +++++++++----------
 37 files changed, 36 insertions(+), 37 deletions(-)
 rename docs/snippets/common/{storybook-test-runner-a11y-config.js.mdx => test-runner-a11y-config.js.mdx} (100%)
 rename docs/snippets/common/{storybook-test-runner-a11y-config.ts.mdx => test-runner-a11y-config.ts.mdx} (100%)
 rename docs/snippets/common/{storybook-test-runner-a11y-configure.js.mdx => test-runner-a11y-configure.js.mdx} (100%)
 rename docs/snippets/common/{storybook-test-runner-a11y-configure.ts.mdx => test-runner-a11y-configure.ts.mdx} (100%)
 rename docs/snippets/common/{storybook-test-runner-a11y-disable.js.mdx => test-runner-a11y-disable.js.mdx} (100%)
 rename docs/snippets/common/{storybook-test-runner-a11y-disable.ts.mdx => test-runner-a11y-disable.ts.mdx} (100%)
 rename docs/snippets/common/{storybook-test-runner-axe-playwright.npm.js.mdx => test-runner-axe-playwright.npm.js.mdx} (100%)
 rename docs/snippets/common/{storybook-test-runner-axe-playwright.pnpm.js.mdx => test-runner-axe-playwright.pnpm.js.mdx} (100%)
 rename docs/snippets/common/{storybook-test-runner-axe-playwright.yarn.js.mdx => test-runner-axe-playwright.yarn.js.mdx} (100%)
 rename docs/snippets/common/{storybook-test-runner-coverage.npm.js.mdx => test-runner-coverage.npm.js.mdx} (100%)
 rename docs/snippets/common/{storybook-test-runner-coverage.pnpm.js.mdx => test-runner-coverage.pnpm.js.mdx} (100%)
 rename docs/snippets/common/{storybook-test-runner-coverage.yarn.js.mdx => test-runner-coverage.yarn.js.mdx} (100%)
 rename docs/snippets/common/{storybook-test-runner-execute-with-flags.npm.js.mdx => test-runner-execute-with-flags.npm.js.mdx} (100%)
 rename docs/snippets/common/{storybook-test-runner-execute-with-flags.pnpm.js.mdx => test-runner-execute-with-flags.pnpm.js.mdx} (100%)
 rename docs/snippets/common/{storybook-test-runner-execute-with-flags.yarn.js.mdx => test-runner-execute-with-flags.yarn.js.mdx} (100%)
 rename docs/snippets/common/{storybook-test-runner-execute-with-url.env-var.js.mdx => test-runner-execute-with-url.env-var.js.mdx} (100%)
 rename docs/snippets/common/{storybook-test-runner-execute-with-url.npm.js.mdx => test-runner-execute-with-url.npm.js.mdx} (100%)
 rename docs/snippets/common/{storybook-test-runner-execute-with-url.pnpm.js.mdx => test-runner-execute-with-url.pnpm.js.mdx} (100%)
 rename docs/snippets/common/{storybook-test-runner-execute-with-url.yarn.js.mdx => test-runner-execute-with-url.yarn.js.mdx} (100%)
 rename docs/snippets/common/{storybook-test-runner-execute.npm.js.mdx => test-runner-execute.npm.js.mdx} (100%)
 rename docs/snippets/common/{storybook-test-runner-execute.pnpm.js.mdx => test-runner-execute.pnpm.js.mdx} (100%)
 rename docs/snippets/common/{storybook-test-runner-execute.yarn.js.mdx => test-runner-execute.yarn.js.mdx} (100%)
 rename docs/snippets/common/{storybook-test-runner-helper-function.js.mdx => test-runner-helper-function.js.mdx} (100%)
 rename docs/snippets/common/{storybook-test-runner-helper-function.ts.mdx => test-runner-helper-function.ts.mdx} (100%)
 rename docs/snippets/common/{storybook-test-runner-hooks-example.js.mdx => test-runner-hooks-example.js.mdx} (100%)
 rename docs/snippets/common/{storybook-test-runner-hooks-example.ts.mdx => test-runner-hooks-example.ts.mdx} (100%)
 rename docs/snippets/common/{storybook-test-runner-install.npm.js.mdx => test-runner-install.npm.js.mdx} (100%)
 rename docs/snippets/common/{storybook-test-runner-install.pnpm.js.mdx => test-runner-install.pnpm.js.mdx} (100%)
 rename docs/snippets/common/{storybook-test-runner-install.yarn.js.mdx => test-runner-install.yarn.js.mdx} (100%)
 rename docs/snippets/common/{storybook-test-runner-local-build-workflow.yml.mdx => test-runner-local-build-workflow.yml.mdx} (100%)
 rename docs/snippets/common/{storybook-test-runner-with-deploy-event-workflow.yml.mdx => test-runner-with-deploy-event-workflow.yml.mdx} (100%)

diff --git a/docs/snippets/common/storybook-test-runner-a11y-config.js.mdx b/docs/snippets/common/test-runner-a11y-config.js.mdx
similarity index 100%
rename from docs/snippets/common/storybook-test-runner-a11y-config.js.mdx
rename to docs/snippets/common/test-runner-a11y-config.js.mdx
diff --git a/docs/snippets/common/storybook-test-runner-a11y-config.ts.mdx b/docs/snippets/common/test-runner-a11y-config.ts.mdx
similarity index 100%
rename from docs/snippets/common/storybook-test-runner-a11y-config.ts.mdx
rename to docs/snippets/common/test-runner-a11y-config.ts.mdx
diff --git a/docs/snippets/common/storybook-test-runner-a11y-configure.js.mdx b/docs/snippets/common/test-runner-a11y-configure.js.mdx
similarity index 100%
rename from docs/snippets/common/storybook-test-runner-a11y-configure.js.mdx
rename to docs/snippets/common/test-runner-a11y-configure.js.mdx
diff --git a/docs/snippets/common/storybook-test-runner-a11y-configure.ts.mdx b/docs/snippets/common/test-runner-a11y-configure.ts.mdx
similarity index 100%
rename from docs/snippets/common/storybook-test-runner-a11y-configure.ts.mdx
rename to docs/snippets/common/test-runner-a11y-configure.ts.mdx
diff --git a/docs/snippets/common/storybook-test-runner-a11y-disable.js.mdx b/docs/snippets/common/test-runner-a11y-disable.js.mdx
similarity index 100%
rename from docs/snippets/common/storybook-test-runner-a11y-disable.js.mdx
rename to docs/snippets/common/test-runner-a11y-disable.js.mdx
diff --git a/docs/snippets/common/storybook-test-runner-a11y-disable.ts.mdx b/docs/snippets/common/test-runner-a11y-disable.ts.mdx
similarity index 100%
rename from docs/snippets/common/storybook-test-runner-a11y-disable.ts.mdx
rename to docs/snippets/common/test-runner-a11y-disable.ts.mdx
diff --git a/docs/snippets/common/storybook-test-runner-axe-playwright.npm.js.mdx b/docs/snippets/common/test-runner-axe-playwright.npm.js.mdx
similarity index 100%
rename from docs/snippets/common/storybook-test-runner-axe-playwright.npm.js.mdx
rename to docs/snippets/common/test-runner-axe-playwright.npm.js.mdx
diff --git a/docs/snippets/common/storybook-test-runner-axe-playwright.pnpm.js.mdx b/docs/snippets/common/test-runner-axe-playwright.pnpm.js.mdx
similarity index 100%
rename from docs/snippets/common/storybook-test-runner-axe-playwright.pnpm.js.mdx
rename to docs/snippets/common/test-runner-axe-playwright.pnpm.js.mdx
diff --git a/docs/snippets/common/storybook-test-runner-axe-playwright.yarn.js.mdx b/docs/snippets/common/test-runner-axe-playwright.yarn.js.mdx
similarity index 100%
rename from docs/snippets/common/storybook-test-runner-axe-playwright.yarn.js.mdx
rename to docs/snippets/common/test-runner-axe-playwright.yarn.js.mdx
diff --git a/docs/snippets/common/storybook-test-runner-coverage.npm.js.mdx b/docs/snippets/common/test-runner-coverage.npm.js.mdx
similarity index 100%
rename from docs/snippets/common/storybook-test-runner-coverage.npm.js.mdx
rename to docs/snippets/common/test-runner-coverage.npm.js.mdx
diff --git a/docs/snippets/common/storybook-test-runner-coverage.pnpm.js.mdx b/docs/snippets/common/test-runner-coverage.pnpm.js.mdx
similarity index 100%
rename from docs/snippets/common/storybook-test-runner-coverage.pnpm.js.mdx
rename to docs/snippets/common/test-runner-coverage.pnpm.js.mdx
diff --git a/docs/snippets/common/storybook-test-runner-coverage.yarn.js.mdx b/docs/snippets/common/test-runner-coverage.yarn.js.mdx
similarity index 100%
rename from docs/snippets/common/storybook-test-runner-coverage.yarn.js.mdx
rename to docs/snippets/common/test-runner-coverage.yarn.js.mdx
diff --git a/docs/snippets/common/storybook-test-runner-execute-with-flags.npm.js.mdx b/docs/snippets/common/test-runner-execute-with-flags.npm.js.mdx
similarity index 100%
rename from docs/snippets/common/storybook-test-runner-execute-with-flags.npm.js.mdx
rename to docs/snippets/common/test-runner-execute-with-flags.npm.js.mdx
diff --git a/docs/snippets/common/storybook-test-runner-execute-with-flags.pnpm.js.mdx b/docs/snippets/common/test-runner-execute-with-flags.pnpm.js.mdx
similarity index 100%
rename from docs/snippets/common/storybook-test-runner-execute-with-flags.pnpm.js.mdx
rename to docs/snippets/common/test-runner-execute-with-flags.pnpm.js.mdx
diff --git a/docs/snippets/common/storybook-test-runner-execute-with-flags.yarn.js.mdx b/docs/snippets/common/test-runner-execute-with-flags.yarn.js.mdx
similarity index 100%
rename from docs/snippets/common/storybook-test-runner-execute-with-flags.yarn.js.mdx
rename to docs/snippets/common/test-runner-execute-with-flags.yarn.js.mdx
diff --git a/docs/snippets/common/storybook-test-runner-execute-with-url.env-var.js.mdx b/docs/snippets/common/test-runner-execute-with-url.env-var.js.mdx
similarity index 100%
rename from docs/snippets/common/storybook-test-runner-execute-with-url.env-var.js.mdx
rename to docs/snippets/common/test-runner-execute-with-url.env-var.js.mdx
diff --git a/docs/snippets/common/storybook-test-runner-execute-with-url.npm.js.mdx b/docs/snippets/common/test-runner-execute-with-url.npm.js.mdx
similarity index 100%
rename from docs/snippets/common/storybook-test-runner-execute-with-url.npm.js.mdx
rename to docs/snippets/common/test-runner-execute-with-url.npm.js.mdx
diff --git a/docs/snippets/common/storybook-test-runner-execute-with-url.pnpm.js.mdx b/docs/snippets/common/test-runner-execute-with-url.pnpm.js.mdx
similarity index 100%
rename from docs/snippets/common/storybook-test-runner-execute-with-url.pnpm.js.mdx
rename to docs/snippets/common/test-runner-execute-with-url.pnpm.js.mdx
diff --git a/docs/snippets/common/storybook-test-runner-execute-with-url.yarn.js.mdx b/docs/snippets/common/test-runner-execute-with-url.yarn.js.mdx
similarity index 100%
rename from docs/snippets/common/storybook-test-runner-execute-with-url.yarn.js.mdx
rename to docs/snippets/common/test-runner-execute-with-url.yarn.js.mdx
diff --git a/docs/snippets/common/storybook-test-runner-execute.npm.js.mdx b/docs/snippets/common/test-runner-execute.npm.js.mdx
similarity index 100%
rename from docs/snippets/common/storybook-test-runner-execute.npm.js.mdx
rename to docs/snippets/common/test-runner-execute.npm.js.mdx
diff --git a/docs/snippets/common/storybook-test-runner-execute.pnpm.js.mdx b/docs/snippets/common/test-runner-execute.pnpm.js.mdx
similarity index 100%
rename from docs/snippets/common/storybook-test-runner-execute.pnpm.js.mdx
rename to docs/snippets/common/test-runner-execute.pnpm.js.mdx
diff --git a/docs/snippets/common/storybook-test-runner-execute.yarn.js.mdx b/docs/snippets/common/test-runner-execute.yarn.js.mdx
similarity index 100%
rename from docs/snippets/common/storybook-test-runner-execute.yarn.js.mdx
rename to docs/snippets/common/test-runner-execute.yarn.js.mdx
diff --git a/docs/snippets/common/storybook-test-runner-helper-function.js.mdx b/docs/snippets/common/test-runner-helper-function.js.mdx
similarity index 100%
rename from docs/snippets/common/storybook-test-runner-helper-function.js.mdx
rename to docs/snippets/common/test-runner-helper-function.js.mdx
diff --git a/docs/snippets/common/storybook-test-runner-helper-function.ts.mdx b/docs/snippets/common/test-runner-helper-function.ts.mdx
similarity index 100%
rename from docs/snippets/common/storybook-test-runner-helper-function.ts.mdx
rename to docs/snippets/common/test-runner-helper-function.ts.mdx
diff --git a/docs/snippets/common/storybook-test-runner-hooks-example.js.mdx b/docs/snippets/common/test-runner-hooks-example.js.mdx
similarity index 100%
rename from docs/snippets/common/storybook-test-runner-hooks-example.js.mdx
rename to docs/snippets/common/test-runner-hooks-example.js.mdx
diff --git a/docs/snippets/common/storybook-test-runner-hooks-example.ts.mdx b/docs/snippets/common/test-runner-hooks-example.ts.mdx
similarity index 100%
rename from docs/snippets/common/storybook-test-runner-hooks-example.ts.mdx
rename to docs/snippets/common/test-runner-hooks-example.ts.mdx
diff --git a/docs/snippets/common/storybook-test-runner-install.npm.js.mdx b/docs/snippets/common/test-runner-install.npm.js.mdx
similarity index 100%
rename from docs/snippets/common/storybook-test-runner-install.npm.js.mdx
rename to docs/snippets/common/test-runner-install.npm.js.mdx
diff --git a/docs/snippets/common/storybook-test-runner-install.pnpm.js.mdx b/docs/snippets/common/test-runner-install.pnpm.js.mdx
similarity index 100%
rename from docs/snippets/common/storybook-test-runner-install.pnpm.js.mdx
rename to docs/snippets/common/test-runner-install.pnpm.js.mdx
diff --git a/docs/snippets/common/storybook-test-runner-install.yarn.js.mdx b/docs/snippets/common/test-runner-install.yarn.js.mdx
similarity index 100%
rename from docs/snippets/common/storybook-test-runner-install.yarn.js.mdx
rename to docs/snippets/common/test-runner-install.yarn.js.mdx
diff --git a/docs/snippets/common/storybook-test-runner-local-build-workflow.yml.mdx b/docs/snippets/common/test-runner-local-build-workflow.yml.mdx
similarity index 100%
rename from docs/snippets/common/storybook-test-runner-local-build-workflow.yml.mdx
rename to docs/snippets/common/test-runner-local-build-workflow.yml.mdx
diff --git a/docs/snippets/common/test-runner-snapshot.js.mdx b/docs/snippets/common/test-runner-snapshot.js.mdx
index 9786372faf5f..d62224bc0989 100644
--- a/docs/snippets/common/test-runner-snapshot.js.mdx
+++ b/docs/snippets/common/test-runner-snapshot.js.mdx
@@ -9,4 +9,4 @@ export default {
     expect(innerHTML).toMatchSnapshot();
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/test-runner-snapshot.ts.mdx b/docs/snippets/common/test-runner-snapshot.ts.mdx
index 9df97e638935..1874d5d9fe27 100644
--- a/docs/snippets/common/test-runner-snapshot.ts.mdx
+++ b/docs/snippets/common/test-runner-snapshot.ts.mdx
@@ -13,4 +13,4 @@ const config: TestRunnerConfig = {
 };
 
 export default config;
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/storybook-test-runner-with-deploy-event-workflow.yml.mdx b/docs/snippets/common/test-runner-with-deploy-event-workflow.yml.mdx
similarity index 100%
rename from docs/snippets/common/storybook-test-runner-with-deploy-event-workflow.yml.mdx
rename to docs/snippets/common/test-runner-with-deploy-event-workflow.yml.mdx
diff --git a/docs/writing-tests/accessibility-testing.md b/docs/writing-tests/accessibility-testing.md
index 0efa6436d3c4..d6dbba00d27a 100644
--- a/docs/writing-tests/accessibility-testing.md
+++ b/docs/writing-tests/accessibility-testing.md
@@ -182,9 +182,9 @@ Run the following command to install the required dependencies.
 
 
 
@@ -196,8 +196,8 @@ Add a new [configuration file](./test-runner.md#test-hook-api-experimental) insi
 
 
 
@@ -223,8 +223,8 @@ The test runner provides [helper methods](./test-runner.md#helpers), allowing ac
 
 
 
@@ -238,8 +238,8 @@ Additionally, if you have already [disabled accessibility](#how-to-disable-a11y-
 
 
 
diff --git a/docs/writing-tests/interaction-testing.md b/docs/writing-tests/interaction-testing.md
index 01df1b1283e4..8f0fdd9cbab8 100644
--- a/docs/writing-tests/interaction-testing.md
+++ b/docs/writing-tests/interaction-testing.md
@@ -160,9 +160,9 @@ Storybook only runs the interaction test when you're viewing a story. Therefore,
 
 
 
diff --git a/docs/writing-tests/test-coverage.md b/docs/writing-tests/test-coverage.md
index a3025ced5a85..b0df76cbf73a 100644
--- a/docs/writing-tests/test-coverage.md
+++ b/docs/writing-tests/test-coverage.md
@@ -70,9 +70,9 @@ Finally, open a new terminal window and run the test-runner with:
 
 
 
diff --git a/docs/writing-tests/test-runner.md b/docs/writing-tests/test-runner.md
index 27716c0deda1..32376be58060 100644
--- a/docs/writing-tests/test-runner.md
+++ b/docs/writing-tests/test-runner.md
@@ -19,9 +19,9 @@ Run the following command to install it.
 
 
 
@@ -62,9 +62,9 @@ Finally, open a new terminal window and run the test-runner with:
 
 
 
@@ -104,14 +104,13 @@ If you're already using any of those flags in your project, you should be able t
 | `--shard [index/count]`         | Requires CI. Splits the test suite execution into multiple machines 
 `test-storybook --shard=1/8`                                                                        |
 | `--failOnConsole`               | Makes tests fail on browser console errors
`test-storybook --failOnConsole`                                                                                               |
 
-
 
 
 
 
@@ -125,10 +124,10 @@ By default, the test-runner assumes that you're running it against a locally ser
 
 
 
@@ -146,7 +145,7 @@ If you're publishing your Storybook with services such as [Vercel](https://verce
 
 
 
@@ -166,7 +165,7 @@ You can use your CI provider (for example, [GitHub Actions](https://github.com/f
 
 
 
@@ -217,8 +216,8 @@ To enable the hooks API, you'll need to add a new configuration file inside your
 
 
 
@@ -247,8 +246,8 @@ The test-runner exports a few helpers that can be used to make your tests more r
 
 
 

From 9656e436cef98d767eb91e870a22b4a8ecd768c6 Mon Sep 17 00:00:00 2001
From: Shaun Lloyd 
Date: Tue, 29 Aug 2023 16:06:17 -0400
Subject: [PATCH 076/312] Scripts: Fix the changelog writer to escape
 doublequotes

---
 .../release/__tests__/write-changelog.test.ts | 39 +++++++++++++++++++
 scripts/release/write-changelog.ts            |  2 +-
 2 files changed, 40 insertions(+), 1 deletion(-)

diff --git a/scripts/release/__tests__/write-changelog.test.ts b/scripts/release/__tests__/write-changelog.test.ts
index 383d3169dec4..7431222f975a 100644
--- a/scripts/release/__tests__/write-changelog.test.ts
+++ b/scripts/release/__tests__/write-changelog.test.ts
@@ -82,6 +82,45 @@ describe('Write changelog', () => {
     `);
   });
 
+  it('should escape double quotes for json files', async () => {
+    getChangesMock.mockResolvedValue({
+      changes: [],
+      changelogText: `## 7.0.1
+
+- React: Make it reactive
+- Revert "CLI: Not UI"
+- CLI: Not UI`,
+    });
+
+    await writeChangelog(['7.0.1'], {});
+
+    expect(fsExtra.writeFile).toHaveBeenCalledTimes(1);
+    expect(fsExtra.writeFile.mock.calls[0][0]).toBe(STABLE_CHANGELOG_PATH);
+    expect(fsExtra.writeFile.mock.calls[0][1]).toMatchInlineSnapshot(`
+      "## 7.0.1
+
+      - React: Make it reactive
+      - Revert "CLI: Not UI"
+      - CLI: Not UI
+
+      ## 7.0.0
+
+      - Core: Some change"
+    `);
+    expect(fsExtra.writeJson).toBeCalledTimes(1);
+    expect(fsExtra.writeJson.mock.calls[0][0]).toBe(LATEST_VERSION_PATH);
+    expect(fsExtra.writeJson.mock.calls[0][1]).toMatchInlineSnapshot(`
+      {
+        "info": {
+          "plain": "- React: Make it reactive
+      - Revert \\"CLI: Not UI\\"
+      - CLI: Not UI",
+        },
+        "version": "7.0.1",
+      }
+    `);
+  });
+
   it('should write to prerelase changelogs and version files in docs', async () => {
     getChangesMock.mockResolvedValue({
       changes: [],
diff --git a/scripts/release/write-changelog.ts b/scripts/release/write-changelog.ts
index e97a7acc70d1..41bc9b72bd36 100644
--- a/scripts/release/write-changelog.ts
+++ b/scripts/release/write-changelog.ts
@@ -94,7 +94,7 @@ const writeToDocsVersionFile = async ({
     console.log(`πŸ“ Writing changelog to ${chalk.blue(path)}`);
   }
 
-  const textWithoutHeading = changelogText.split('\n').slice(2).join('\n');
+  const textWithoutHeading = changelogText.split('\n').slice(2).join('\n').replaceAll('"', '\\"');
 
   const content = {
     version,

From 711776c870f914171eaa8781b5c86dc0a9dc76b5 Mon Sep 17 00:00:00 2001
From: Shaun Lloyd 
Date: Tue, 29 Aug 2023 16:14:12 -0400
Subject: [PATCH 077/312] Fix broken JSON

---
 docs/versions/latest.json | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/docs/versions/latest.json b/docs/versions/latest.json
index 18bc602521be..4325d5d96acf 100644
--- a/docs/versions/latest.json
+++ b/docs/versions/latest.json
@@ -1 +1,6 @@
-{"version":"7.4.0","info":{"plain":"- Addon-docs: Resolve `mdx-react-shim` & `@storybook/global` correctly - [#23941](https://github.com/storybookjs/storybook/pull/23941), thanks [@ndelangen](https://github.com/ndelangen)!\n- Addons: Fix key is not a prop warning - [#23935](https://github.com/storybookjs/storybook/pull/23935), thanks [@kasperpeulen](https://github.com/kasperpeulen)!\n- Build: Migrate @storybook/scripts to strict-ts - [#23818](https://github.com/storybookjs/storybook/pull/23818), thanks [@stilt0n](https://github.com/stilt0n)!\n- CLI: Exclude addon-styling from upgrade - [#23841](https://github.com/storybookjs/storybook/pull/23841), thanks [@Integrayshaun](https://github.com/Integrayshaun)!\n- CLI: Improve autotitle stories format handling in GFM automigration - [#23964](https://github.com/storybookjs/storybook/pull/23964), thanks [@yannbf](https://github.com/yannbf)!\n- CLI: Install latest version of non-core addon - [#23956](https://github.com/storybookjs/storybook/pull/23956), thanks [@Integrayshaun](https://github.com/Integrayshaun)!\n- CLI: Pass package manager to postinstall - [#23913](https://github.com/storybookjs/storybook/pull/23913), thanks [@Integrayshaun](https://github.com/Integrayshaun)!\n- CLI: Provide guidance for users who try to initialize Storybook on an empty dir - [#23874](https://github.com/storybookjs/storybook/pull/23874), thanks [@yannbf](https://github.com/yannbf)!\n- CLI: Set server init generator to use Webpack5 - [#23971](https://github.com/storybookjs/storybook/pull/23971), thanks [@yannbf](https://github.com/yannbf)!\n- Core: Add error categorization framework - [#23653](https://github.com/storybookjs/storybook/pull/23653), thanks [@yannbf](https://github.com/yannbf)!\n- Core: Fix error thrown if `docs.defaultName` is unset - [#23893](https://github.com/storybookjs/storybook/pull/23893), thanks [@stilt0n](https://github.com/stilt0n)!\n- Core: Fix indexing for non-prefixed `stories.*` stories - [#23974](https://github.com/storybookjs/storybook/pull/23974), thanks [@shilman](https://github.com/shilman)!\n- Core: Fix race-condition relating to `addons.setConfig` - [#23802](https://github.com/storybookjs/storybook/pull/23802), thanks [@ndelangen](https://github.com/ndelangen)!\n- Core: Throw an error when detecting empty stories field - [#23942](https://github.com/storybookjs/storybook/pull/23942), thanks [@yannbf](https://github.com/yannbf)!\n- Dependencies: Upgrade `escodegen` to fix security issue - [#23973](https://github.com/storybookjs/storybook/pull/23973), thanks [@shilman](https://github.com/shilman)!\n- Index: Fix `*.story.*` CSF indexing - [#23852](https://github.com/storybookjs/storybook/pull/23852), thanks [@shilman](https://github.com/shilman)!\n- Logger: Fix double error messages/stack - [#23919](https://github.com/storybookjs/storybook/pull/23919), thanks [@ndelangen](https://github.com/ndelangen)!\n- Maintenance: Categorize server errors - [#23912](https://github.com/storybookjs/storybook/pull/23912), thanks [@yannbf](https://github.com/yannbf)!\n- Maintenance: Move filtering of sidebar into the state - [#23911](https://github.com/storybookjs/storybook/pull/23911), thanks [@ndelangen](https://github.com/ndelangen)!\n- Maintenance: Remove need for `react` as peerDependency - [#23897](https://github.com/storybookjs/storybook/pull/23897), thanks [@ndelangen](https://github.com/ndelangen)!\n- Maintenance: Remove sourcemaps generation - [#23936](https://github.com/storybookjs/storybook/pull/23936), thanks [@ndelangen](https://github.com/ndelangen)!\n- Maintenance: Revert "WebpackBuilder: Remove need for `react` as peerDependency" - [#23882](https://github.com/storybookjs/storybook/pull/23882), thanks [@vanessayuenn](https://github.com/vanessayuenn)!\n- Manager API: Fix `api.getAddonState`default value - [#23804](https://github.com/storybookjs/storybook/pull/23804), thanks [@sookmax](https://github.com/sookmax)!\n- Preset: Add common preset overrides mechanism - [#23915](https://github.com/storybookjs/storybook/pull/23915), thanks [@yannbf](https://github.com/yannbf)!\n- Publish: Don't distribute src files or unnecessary template files - [#23853](https://github.com/storybookjs/storybook/pull/23853), thanks [@shilman](https://github.com/shilman)!\n- Shortcuts: Execute preventDefault only if keyboard shortcuts are enabled - [#23412](https://github.com/storybookjs/storybook/pull/23412), thanks [@Spielboerg](https://github.com/Spielboerg)!\n- Types: Fix `React.ReactElement` not found - [#23967](https://github.com/storybookjs/storybook/pull/23967), thanks [@abu-osos](https://github.com/abu-osos)!\n- UI: Add an experimental API for adding sidebar bottom toolbar - [#23778](https://github.com/storybookjs/storybook/pull/23778), thanks [@ndelangen](https://github.com/ndelangen)!\n- UI: Add an experimental API for adding sidebar filter functions at runtime - [#23722](https://github.com/storybookjs/storybook/pull/23722), thanks [@ndelangen](https://github.com/ndelangen)!\n- UI: Add an experimental API for adding sidebar top toolbar - [#23811](https://github.com/storybookjs/storybook/pull/23811), thanks [@ndelangen](https://github.com/ndelangen)!\n- UI: Removal of experimental components - [#23907](https://github.com/storybookjs/storybook/pull/23907), thanks [@ndelangen](https://github.com/ndelangen)!\n- Vue3: Add support for Global Apps install - [#23772](https://github.com/storybookjs/storybook/pull/23772), thanks [@chakAs3](https://github.com/chakAs3)!\n- Vue3: Use slot value directly if it's a string in source decorator - [#23784](https://github.com/storybookjs/storybook/pull/23784), thanks [@nasvillanueva](https://github.com/nasvillanueva)!"}}
+{
+  "version": "7.4.0",
+  "info": {
+    "plain": "- Addon-docs: Resolve `mdx-react-shim` & `@storybook/global` correctly - [#23941](https://github.com/storybookjs/storybook/pull/23941), thanks [@ndelangen](https://github.com/ndelangen)!\n- Addons: Fix key is not a prop warning - [#23935](https://github.com/storybookjs/storybook/pull/23935), thanks [@kasperpeulen](https://github.com/kasperpeulen)!\n- Build: Migrate @storybook/scripts to strict-ts - [#23818](https://github.com/storybookjs/storybook/pull/23818), thanks [@stilt0n](https://github.com/stilt0n)!\n- CLI: Exclude addon-styling from upgrade - [#23841](https://github.com/storybookjs/storybook/pull/23841), thanks [@Integrayshaun](https://github.com/Integrayshaun)!\n- CLI: Improve autotitle stories format handling in GFM automigration - [#23964](https://github.com/storybookjs/storybook/pull/23964), thanks [@yannbf](https://github.com/yannbf)!\n- CLI: Install latest version of non-core addon - [#23956](https://github.com/storybookjs/storybook/pull/23956), thanks [@Integrayshaun](https://github.com/Integrayshaun)!\n- CLI: Pass package manager to postinstall - [#23913](https://github.com/storybookjs/storybook/pull/23913), thanks [@Integrayshaun](https://github.com/Integrayshaun)!\n- CLI: Provide guidance for users who try to initialize Storybook on an empty dir - [#23874](https://github.com/storybookjs/storybook/pull/23874), thanks [@yannbf](https://github.com/yannbf)!\n- CLI: Set server init generator to use Webpack5 - [#23971](https://github.com/storybookjs/storybook/pull/23971), thanks [@yannbf](https://github.com/yannbf)!\n- Core: Add error categorization framework - [#23653](https://github.com/storybookjs/storybook/pull/23653), thanks [@yannbf](https://github.com/yannbf)!\n- Core: Fix error thrown if `docs.defaultName` is unset - [#23893](https://github.com/storybookjs/storybook/pull/23893), thanks [@stilt0n](https://github.com/stilt0n)!\n- Core: Fix indexing for non-prefixed `stories.*` stories - [#23974](https://github.com/storybookjs/storybook/pull/23974), thanks [@shilman](https://github.com/shilman)!\n- Core: Fix race-condition relating to `addons.setConfig` - [#23802](https://github.com/storybookjs/storybook/pull/23802), thanks [@ndelangen](https://github.com/ndelangen)!\n- Core: Throw an error when detecting empty stories field - [#23942](https://github.com/storybookjs/storybook/pull/23942), thanks [@yannbf](https://github.com/yannbf)!\n- Dependencies: Upgrade `escodegen` to fix security issue - [#23973](https://github.com/storybookjs/storybook/pull/23973), thanks [@shilman](https://github.com/shilman)!\n- Index: Fix `*.story.*` CSF indexing - [#23852](https://github.com/storybookjs/storybook/pull/23852), thanks [@shilman](https://github.com/shilman)!\n- Logger: Fix double error messages/stack - [#23919](https://github.com/storybookjs/storybook/pull/23919), thanks [@ndelangen](https://github.com/ndelangen)!\n- Maintenance: Categorize server errors - [#23912](https://github.com/storybookjs/storybook/pull/23912), thanks [@yannbf](https://github.com/yannbf)!\n- Maintenance: Move filtering of sidebar into the state - [#23911](https://github.com/storybookjs/storybook/pull/23911), thanks [@ndelangen](https://github.com/ndelangen)!\n- Maintenance: Remove need for `react` as peerDependency - [#23897](https://github.com/storybookjs/storybook/pull/23897), thanks [@ndelangen](https://github.com/ndelangen)!\n- Maintenance: Remove sourcemaps generation - [#23936](https://github.com/storybookjs/storybook/pull/23936), thanks [@ndelangen](https://github.com/ndelangen)!\n- Maintenance: Revert \"WebpackBuilder: Remove need for `react` as peerDependency\" - [#23882](https://github.com/storybookjs/storybook/pull/23882), thanks [@vanessayuenn](https://github.com/vanessayuenn)!\n- Manager API: Fix `api.getAddonState`default value - [#23804](https://github.com/storybookjs/storybook/pull/23804), thanks [@sookmax](https://github.com/sookmax)!\n- Preset: Add common preset overrides mechanism - [#23915](https://github.com/storybookjs/storybook/pull/23915), thanks [@yannbf](https://github.com/yannbf)!\n- Publish: Don't distribute src files or unnecessary template files - [#23853](https://github.com/storybookjs/storybook/pull/23853), thanks [@shilman](https://github.com/shilman)!\n- Shortcuts: Execute preventDefault only if keyboard shortcuts are enabled - [#23412](https://github.com/storybookjs/storybook/pull/23412), thanks [@Spielboerg](https://github.com/Spielboerg)!\n- Types: Fix `React.ReactElement` not found - [#23967](https://github.com/storybookjs/storybook/pull/23967), thanks [@abu-osos](https://github.com/abu-osos)!\n- UI: Add an experimental API for adding sidebar bottom toolbar - [#23778](https://github.com/storybookjs/storybook/pull/23778), thanks [@ndelangen](https://github.com/ndelangen)!\n- UI: Add an experimental API for adding sidebar filter functions at runtime - [#23722](https://github.com/storybookjs/storybook/pull/23722), thanks [@ndelangen](https://github.com/ndelangen)!\n- UI: Add an experimental API for adding sidebar top toolbar - [#23811](https://github.com/storybookjs/storybook/pull/23811), thanks [@ndelangen](https://github.com/ndelangen)!\n- UI: Removal of experimental components - [#23907](https://github.com/storybookjs/storybook/pull/23907), thanks [@ndelangen](https://github.com/ndelangen)!\n- Vue3: Add support for Global Apps install - [#23772](https://github.com/storybookjs/storybook/pull/23772), thanks [@chakAs3](https://github.com/chakAs3)!\n- Vue3: Use slot value directly if it's a string in source decorator - [#23784](https://github.com/storybookjs/storybook/pull/23784), thanks [@nasvillanueva](https://github.com/nasvillanueva)!"
+  }
+}

From e8d1b046f5ee86360a1b91538b22b677c66c8d27 Mon Sep 17 00:00:00 2001
From: Michael Shilman 
Date: Wed, 30 Aug 2023 12:42:54 +0800
Subject: [PATCH 078/312] Telemetry: Filter addon options to protect sensitive
 info

---
 .../telemetry/src/storybook-metadata.test.ts  | 27 +++++++++++++++++++
 code/lib/telemetry/src/storybook-metadata.ts  |  4 ++-
 2 files changed, 30 insertions(+), 1 deletion(-)

diff --git a/code/lib/telemetry/src/storybook-metadata.test.ts b/code/lib/telemetry/src/storybook-metadata.test.ts
index ab64dc26e9a1..83a206a92761 100644
--- a/code/lib/telemetry/src/storybook-metadata.test.ts
+++ b/code/lib/telemetry/src/storybook-metadata.test.ts
@@ -349,6 +349,33 @@ describe('storybook-metadata', () => {
       expect(res.refCount).toEqual(2);
     });
 
+    test('only reports addon options for addon-essentials', async () => {
+      const res = await computeStorybookMetadata({
+        packageJson: packageJsonMock,
+        mainConfig: {
+          ...mainJsMock,
+          addons: [
+            { name: '@storybook/addon-essentials', options: { controls: false } },
+            { name: 'addon-foo', options: { foo: 'bar' } },
+          ],
+        },
+      });
+      expect(res.addons).toMatchInlineSnapshot(`
+        Object {
+          "@storybook/addon-essentials": Object {
+            "options": Object {
+              "controls": false,
+            },
+            "version": "x.x.x",
+          },
+          "addon-foo": Object {
+            "options": undefined,
+            "version": "x.x.x",
+          },
+        }
+      `);
+    });
+
     test.each(Object.entries(metaFrameworks))(
       'should detect the supported metaframework: %s',
       async (metaFramework, name) => {
diff --git a/code/lib/telemetry/src/storybook-metadata.ts b/code/lib/telemetry/src/storybook-metadata.ts
index 01a54d9c9ec0..2c70b566f97d 100644
--- a/code/lib/telemetry/src/storybook-metadata.ts
+++ b/code/lib/telemetry/src/storybook-metadata.ts
@@ -114,7 +114,9 @@ export const computeStorybookMetadata = async ({
       if (typeof addon === 'string') {
         addonName = sanitizeAddonName(addon);
       } else {
-        options = addon.options;
+        if (addon.name.includes('addon-essentials')) {
+          options = addon.options;
+        }
         addonName = sanitizeAddonName(addon.name);
       }
 

From 3de6d1a19f6d21bac4ab5d16cd79f6b6bdd29bb8 Mon Sep 17 00:00:00 2001
From: Jeppe Reinhold 
Date: Wed, 30 Aug 2023 08:37:18 +0200
Subject: [PATCH 079/312] add more information to storybook info

---
 code/lib/cli/src/generate.ts | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/code/lib/cli/src/generate.ts b/code/lib/cli/src/generate.ts
index f12564b0d9c5..49a8eed9401f 100644
--- a/code/lib/cli/src/generate.ts
+++ b/code/lib/cli/src/generate.ts
@@ -88,14 +88,14 @@ command('upgrade')
 command('info')
   .description('Prints debugging information about the local environment')
   .action(() => {
-    consoleLogger.log(chalk.bold('\nEnvironment Info:'));
+    consoleLogger.log(chalk.bold('\nStorybook Environment Info:'));
     envinfo
       .run({
-        System: ['OS', 'CPU'],
-        Binaries: ['Node', 'Yarn', 'npm'],
+        System: ['OS', 'CPU', 'Shell'],
+        Binaries: ['Node', 'Yarn', 'npm', 'pnpm'],
         Browsers: ['Chrome', 'Edge', 'Firefox', 'Safari'],
-        npmPackages: '@storybook/*',
-        npmGlobalPackages: '@storybook/*',
+        npmPackages: '{@storybook/*,*storybook*,sb,chromatic}',
+        npmGlobalPackages: '{@storybook/*,*storybook*,sb,chromatic}',
       })
       .then(consoleLogger.log);
   });

From 788ceadae3167f98141a96dfd67aa9134f851fbd Mon Sep 17 00:00:00 2001
From: Jeppe Reinhold 
Date: Wed, 30 Aug 2023 08:45:47 +0200
Subject: [PATCH 080/312] fix textarea type for bug templates

---
 .github/ISSUE_TEMPLATE/bug_report.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/ISSUE_TEMPLATE/bug_report.yml b/.github/ISSUE_TEMPLATE/bug_report.yml
index cbf53f0d9ac1..871971bac231 100644
--- a/.github/ISSUE_TEMPLATE/bug_report.yml
+++ b/.github/ISSUE_TEMPLATE/bug_report.yml
@@ -30,7 +30,7 @@ body:
     attributes:
       label: System
       description: Please paste the results of `npx storybook@latest info` here.
-      render: shell
+      render: bash
   - type: textarea
     id: context
     attributes:

From 148c524edf18135c928b8d165605c63f17c546ab Mon Sep 17 00:00:00 2001
From: Jeppe Reinhold 
Date: Wed, 30 Aug 2023 08:59:11 +0200
Subject: [PATCH 081/312] change name template

---
 code/lib/cli/src/sandbox-templates.ts | 72 +++++++++++++--------------
 1 file changed, 36 insertions(+), 36 deletions(-)

diff --git a/code/lib/cli/src/sandbox-templates.ts b/code/lib/cli/src/sandbox-templates.ts
index 4a2656d4c6fd..ba040e993b69 100644
--- a/code/lib/cli/src/sandbox-templates.ts
+++ b/code/lib/cli/src/sandbox-templates.ts
@@ -77,14 +77,14 @@ export type Template = {
 };
 
 type BaseTemplates = Template & {
-  name: `${string} ${`v${number}` | 'Latest' | 'Prerelease'} ${`- ${string} ` | ''}(${
-    | 'JS'
-    | 'TS'})`;
+  name: `${string} ${`v${number}` | 'Latest' | 'Prerelease'} (${'Webpack' | 'Vite'} | ${
+    | 'JavaScript'
+    | 'TypeScript'})`;
 };
 
 const baseTemplates = {
   'cra/default-js': {
-    name: 'Create React App Latest (JS)',
+    name: 'Create React App Latest (Webpack | JavaScript)',
     script: 'npx create-react-app {{beforeDir}}',
     expected: {
       // TODO: change this to @storybook/cra once that package is created
@@ -95,7 +95,7 @@ const baseTemplates = {
     skipTasks: ['e2e-tests-dev', 'bench'],
   },
   'cra/default-ts': {
-    name: 'Create React App Latest (TS)',
+    name: 'Create React App Latest (Webpack | TypeScript)',
     script: 'npx create-react-app {{beforeDir}} --template typescript',
     // Re-enable once https://github.com/storybookjs/storybook/issues/19351 is fixed.
     skipTasks: ['smoke-test', 'bench'],
@@ -107,7 +107,7 @@ const baseTemplates = {
     },
   },
   'nextjs/12-js': {
-    name: 'Next.js v12 (JS)',
+    name: 'Next.js v12 (Webpack | JavaScript)',
     script:
       'yarn create next-app {{beforeDir}} -e https://github.com/vercel/next.js/tree/next-12-3-2/examples/hello-world && cd {{beforeDir}} && npm pkg set "dependencies.next"="^12.2.0" && yarn && git add . && git commit --amend --no-edit && cd ..',
     expected: {
@@ -118,7 +118,7 @@ const baseTemplates = {
     skipTasks: ['e2e-tests-dev', 'bench'],
   },
   'nextjs/default-js': {
-    name: 'Next.js Latest (JS)',
+    name: 'Next.js Latest (Webpack | JavaScript)',
     script: 'yarn create next-app {{beforeDir}} --javascript --eslint',
     expected: {
       framework: '@storybook/nextjs',
@@ -128,7 +128,7 @@ const baseTemplates = {
     skipTasks: ['e2e-tests-dev', 'bench'],
   },
   'nextjs/default-ts': {
-    name: 'Next.js Latest (TS)',
+    name: 'Next.js Latest (Webpack | TypeScript)',
     script: 'yarn create next-app {{beforeDir}} --typescript --eslint',
     expected: {
       framework: '@storybook/nextjs',
@@ -138,7 +138,7 @@ const baseTemplates = {
     skipTasks: ['e2e-tests-dev', 'bench'],
   },
   'react-vite/default-js': {
-    name: 'React Latest - Vite (JS)',
+    name: 'React Latest (Vite | JavaScript)',
     script: 'npm create vite@latest --yes {{beforeDir}} -- --template react',
     expected: {
       framework: '@storybook/react-vite',
@@ -148,7 +148,7 @@ const baseTemplates = {
     skipTasks: ['e2e-tests-dev', 'bench'],
   },
   'react-vite/default-ts': {
-    name: 'React Latest - Vite (TS)',
+    name: 'React Latest (Vite | TypeScript)',
     script: 'npm create vite@latest --yes {{beforeDir}} -- --template react-ts',
     expected: {
       framework: '@storybook/react-vite',
@@ -158,7 +158,7 @@ const baseTemplates = {
     skipTasks: ['bench'],
   },
   'react-webpack/18-ts': {
-    name: 'React Latest - Webpack (TS)',
+    name: 'React Latest (Webpack | TypeScript)',
     script: 'yarn create webpack5-react {{beforeDir}}',
     expected: {
       framework: '@storybook/react-webpack5',
@@ -168,7 +168,7 @@ const baseTemplates = {
     skipTasks: ['e2e-tests-dev', 'bench'],
   },
   'react-webpack/17-ts': {
-    name: 'React v17 - Webpack (TS)',
+    name: 'React v17 (Webpack | TypeScript)',
     script:
       'yarn create webpack5-react {{beforeDir}} --version-react="17" --version-react-dom="17"',
     expected: {
@@ -179,7 +179,7 @@ const baseTemplates = {
     skipTasks: ['e2e-tests-dev', 'bench'],
   },
   'solid-vite/default-js': {
-    name: 'SolidJS Latest - Vite (JS)',
+    name: 'SolidJS Latest (Vite | JavaScript)',
     script: 'npx degit solidjs/templates/js {{beforeDir}}',
     expected: {
       framework: 'storybook-solidjs-vite',
@@ -191,7 +191,7 @@ const baseTemplates = {
     skipTasks: ['e2e-tests-dev', 'bench'],
   },
   'solid-vite/default-ts': {
-    name: 'SolidJS Latest - Vite (TS)',
+    name: 'SolidJS Latest (Vite | TypeScript)',
     script: 'npx degit solidjs/templates/ts {{beforeDir}}',
     expected: {
       framework: 'storybook-solidjs-vite',
@@ -203,7 +203,7 @@ const baseTemplates = {
     skipTasks: ['e2e-tests-dev', 'bench'],
   },
   'vue3-vite/default-js': {
-    name: 'Vue v3 - Vite (JS)',
+    name: 'Vue v3 (Vite | JavaScript)',
     script: 'npm create vite@latest --yes {{beforeDir}} -- --template vue',
     expected: {
       framework: '@storybook/vue3-vite',
@@ -213,7 +213,7 @@ const baseTemplates = {
     skipTasks: ['e2e-tests-dev', 'bench'],
   },
   'vue3-vite/default-ts': {
-    name: 'Vue v3 - Vite (TS)',
+    name: 'Vue v3 (Vite | TypeScript)',
     script: 'npm create vite@latest --yes {{beforeDir}} -- --template vue-ts',
     expected: {
       framework: '@storybook/vue3-vite',
@@ -223,7 +223,7 @@ const baseTemplates = {
     skipTasks: ['e2e-tests-dev', 'bench'],
   },
   'vue2-vite/2.7-js': {
-    name: 'Vue v2 - Vite (JS)',
+    name: 'Vue v2 (Vite | JavaScript)',
     script: 'npx create-vue@2 {{beforeDir}} --default',
     expected: {
       framework: '@storybook/vue-vite',
@@ -234,7 +234,7 @@ const baseTemplates = {
     skipTasks: ['smoke-test', 'e2e-tests-dev', 'bench'],
   },
   'html-webpack/default': {
-    name: 'HTML Latest - Webpack (JS)',
+    name: 'HTML Latest (Webpack | JavaScript)',
     script: 'yarn create webpack5-html {{beforeDir}}',
     expected: {
       framework: '@storybook/html-webpack5',
@@ -244,7 +244,7 @@ const baseTemplates = {
     skipTasks: ['e2e-tests-dev', 'bench'],
   },
   'html-vite/default-js': {
-    name: 'HTML Latest - Vite (JS)',
+    name: 'HTML Latest (Vite | JavaScript)',
     script:
       'npm create vite@latest --yes {{beforeDir}} -- --template vanilla && cd {{beforeDir}} && echo "export default {}" > vite.config.js',
     expected: {
@@ -255,7 +255,7 @@ const baseTemplates = {
     skipTasks: ['e2e-tests-dev', 'bench'],
   },
   'html-vite/default-ts': {
-    name: 'HTML Latest - Vite (TS)',
+    name: 'HTML Latest (Vite | TypeScript)',
     script:
       'npm create vite@latest --yes {{beforeDir}} -- --template vanilla-ts && cd {{beforeDir}} && echo "export default {}" > vite.config.js',
     expected: {
@@ -266,7 +266,7 @@ const baseTemplates = {
     skipTasks: ['e2e-tests-dev', 'bench'],
   },
   'svelte-vite/default-js': {
-    name: 'Svelte Latest - Vite (JS)',
+    name: 'Svelte Latest (Vite | JavaScript)',
     script: 'npm create vite@latest --yes {{beforeDir}} -- --template svelte',
     expected: {
       framework: '@storybook/svelte-vite',
@@ -276,7 +276,7 @@ const baseTemplates = {
     skipTasks: ['e2e-tests-dev', 'bench'],
   },
   'svelte-vite/default-ts': {
-    name: 'Svelte Latest - Vite (TS)',
+    name: 'Svelte Latest (Vite | TypeScript)',
     script: 'npm create vite@latest --yes {{beforeDir}} -- --template svelte-ts',
     expected: {
       framework: '@storybook/svelte-vite',
@@ -287,7 +287,7 @@ const baseTemplates = {
     skipTasks: ['smoke-test', 'e2e-tests-dev', 'bench'],
   },
   'angular-cli/prerelease': {
-    name: 'Angular CLI Prerelease (TS)',
+    name: 'Angular CLI Prerelease (Webpack | TypeScript)',
     script:
       'npx -p @angular/cli@next ng new angular-v16 --directory {{beforeDir}} --routing=true --minimal=true --style=scss --strict --skip-git --skip-install --package-manager=yarn',
     expected: {
@@ -298,7 +298,7 @@ const baseTemplates = {
     skipTasks: ['e2e-tests-dev', 'bench'],
   },
   'angular-cli/default-ts': {
-    name: 'Angular CLI Latest (TS)',
+    name: 'Angular CLI Latest (Webpack | TypeScript)',
     script:
       'npx -p @angular/cli ng new angular-latest --directory {{beforeDir}} --routing=true --minimal=true --style=scss --strict --skip-git --skip-install --package-manager=yarn',
     expected: {
@@ -309,7 +309,7 @@ const baseTemplates = {
     skipTasks: ['e2e-tests-dev', 'bench'],
   },
   'angular-cli/15-ts': {
-    name: 'Angular CLI v15 (TS)',
+    name: 'Angular CLI v15 (Webpack | TypeScript)',
     script:
       'npx -p @angular/cli@15 ng new angular-v15 --directory {{beforeDir}} --routing=true --minimal=true --style=scss --strict --skip-git --skip-install --package-manager=yarn',
     expected: {
@@ -320,7 +320,7 @@ const baseTemplates = {
     skipTasks: ['e2e-tests-dev', 'bench'],
   },
   'svelte-kit/skeleton-js': {
-    name: 'SvelteKit Latest (JS)',
+    name: 'SvelteKit Latest (Vite | JavaScript)',
     script:
       'yarn create svelte-with-args --name=svelte-kit/skeleton-js --directory={{beforeDir}} --template=skeleton --types=null --no-prettier --no-eslint --no-playwright --no-vitest',
     expected: {
@@ -331,7 +331,7 @@ const baseTemplates = {
     skipTasks: ['e2e-tests-dev', 'bench'],
   },
   'svelte-kit/skeleton-ts': {
-    name: 'SvelteKit Latest (TS)',
+    name: 'SvelteKit Latest (Vite | TypeScript)',
     script:
       'yarn create svelte-with-args --name=svelte-kit/skeleton-ts --directory={{beforeDir}} --template=skeleton --types=typescript --no-prettier --no-eslint --no-playwright --no-vitest',
     expected: {
@@ -342,7 +342,7 @@ const baseTemplates = {
     skipTasks: ['e2e-tests-dev', 'bench'],
   },
   'lit-vite/default-js': {
-    name: 'Lit Latest - Vite (JS)',
+    name: 'Lit Latest (Vite | JavaScript)',
     script:
       'npm create vite@latest --yes {{beforeDir}} -- --template lit && cd {{beforeDir}} && echo "export default {}" > vite.config.js',
     expected: {
@@ -354,7 +354,7 @@ const baseTemplates = {
     skipTasks: ['smoke-test', 'e2e-tests-dev', 'bench'],
   },
   'lit-vite/default-ts': {
-    name: 'Lit Latest - Vite (TS)',
+    name: 'Lit Latest (Vite | TypeScript)',
     script:
       'npm create vite@latest --yes {{beforeDir}} -- --template lit-ts && cd {{beforeDir}} && echo "export default {}" > vite.config.js',
     expected: {
@@ -366,7 +366,7 @@ const baseTemplates = {
     skipTasks: ['smoke-test', 'e2e-tests-dev', 'bench'],
   },
   'vue-cli/default-js': {
-    name: 'Vue v3 - CLI (JS)',
+    name: 'Vue CLI v3 (Webpack | JavaScript)',
     script:
       'npx -p @vue/cli vue create {{beforeDir}} --default --packageManager=yarn --force --merge && cd {{beforeDir}} && echo "module.exports = {}" > webpack.config.js',
     expected: {
@@ -378,7 +378,7 @@ const baseTemplates = {
     skipTasks: ['smoke-test', 'e2e-tests-dev', 'bench'],
   },
   'vue-cli/vue2-default-js': {
-    name: 'Vue v2 - CLI (JS)',
+    name: 'Vue CLI v2 (Webpack | JavaScript)',
     script:
       'npx -p @vue/cli vue create {{beforeDir}} --default --packageManager=yarn --force --merge --preset="Default (Vue 2)" && cd {{beforeDir}} && echo "module.exports = {}" > webpack.config.js',
     expected: {
@@ -390,7 +390,7 @@ const baseTemplates = {
     skipTasks: ['smoke-test', 'e2e-tests-dev', 'bench'],
   },
   'preact-webpack5/default-js': {
-    name: 'Preact Latest - CLI (JS)',
+    name: 'Preact CLI Latest (Webpack | JavaScript)',
     script:
       'npx preact-cli create default {{beforeDir}} --name preact-app --yarn --no-install && cd {{beforeDir}} && echo "module.exports = {}" > webpack.config.js',
     expected: {
@@ -401,7 +401,7 @@ const baseTemplates = {
     skipTasks: ['e2e-tests-dev', 'bench'],
   },
   'preact-webpack5/default-ts': {
-    name: 'Preact Latest - CLI (TS)',
+    name: 'Preact CLI Latest (Webpack | TypeScript)',
     script:
       'npx preact-cli create typescript {{beforeDir}} --name preact-app --yarn --no-install && cd {{beforeDir}} && echo "module.exports = {}" > webpack.config.js',
     expected: {
@@ -412,7 +412,7 @@ const baseTemplates = {
     skipTasks: ['e2e-tests-dev', 'bench'],
   },
   'preact-vite/default-js': {
-    name: 'Preact Latest - Vite (JS)',
+    name: 'Preact Latest (Vite | JavaScript)',
     script: 'npm create vite@latest --yes {{beforeDir}} -- --template preact',
     expected: {
       framework: '@storybook/preact-vite',
@@ -422,7 +422,7 @@ const baseTemplates = {
     skipTasks: ['e2e-tests-dev', 'bench'],
   },
   'preact-vite/default-ts': {
-    name: 'Preact Latest - Vite (TS)',
+    name: 'Preact Latest (Vite | TypeScript)',
     script: 'npm create vite@latest --yes {{beforeDir}} -- --template preact-ts',
     expected: {
       framework: '@storybook/preact-vite',
@@ -432,7 +432,7 @@ const baseTemplates = {
     skipTasks: ['e2e-tests-dev', 'bench'],
   },
   'qwik-vite/default-ts': {
-    name: 'Qwik Latest - CLI (TS)',
+    name: 'Qwik CLI Latest (Vite | TypeScript)',
     script: 'yarn create qwik basic {{beforeDir}}',
     // TODO: The community template does not provide standard stories, which is required for e2e tests. Reenable once it does.
     inDevelopment: true,

From d6297bff9975b1e1d2949eab0461fe0ac24338e0 Mon Sep 17 00:00:00 2001
From: Jeppe Reinhold 
Date: Wed, 30 Aug 2023 09:19:30 +0200
Subject: [PATCH 082/312] only commit changelog changes when there are actual
 changes

---
 .github/workflows/publish.yml | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml
index 18e23c174162..e52af0dc1c78 100644
--- a/.github/workflows/publish.yml
+++ b/.github/workflows/publish.yml
@@ -160,8 +160,10 @@ jobs:
           git pull
           git checkout origin/main ./CHANGELOG.md
           git add ./CHANGELOG.md
-          git commit -m "Update CHANGELOG.md for v${{ steps.version.outputs.current-version }} [skip ci]"
-          git push origin next
+          if ! git diff-index --quiet HEAD; then
+            git commit -m "Update CHANGELOG.md for v${{ steps.version.outputs.current-version }} [skip ci]"
+            git push origin next
+          fi
 
       - name: Sync version JSONs from `next-release` to `main`
         if: github.ref_name == 'next-release'

From 670bc5167af3f3ec70653460c864e5c91dadb633 Mon Sep 17 00:00:00 2001
From: Jeppe Reinhold 
Date: Wed, 30 Aug 2023 10:01:55 +0200
Subject: [PATCH 083/312] add comments

---
 .github/workflows/publish.yml | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml
index e52af0dc1c78..821bbf1d15e6 100644
--- a/.github/workflows/publish.yml
+++ b/.github/workflows/publish.yml
@@ -111,6 +111,12 @@ jobs:
         id: target
         run: echo "target=${{ github.ref_name == 'next-release' && 'next' || 'main' }}" >> $GITHUB_OUTPUT
 
+        # TODO: create a commit on next that does the following:
+        # bump version accordingly
+        # update changelog
+        # update version JSONs
+        # push to next
+        # TODO: ensure all of this logic works if a release from next targets latest-release. steps.targets.outputs?
       - name: Get changelog for ${{ steps.version.outputs.current-version }}
         if: steps.publish-needed.outputs.published == 'false'
         id: changelog
@@ -160,6 +166,7 @@ jobs:
           git pull
           git checkout origin/main ./CHANGELOG.md
           git add ./CHANGELOG.md
+          # only commit if there are changes
           if ! git diff-index --quiet HEAD; then
             git commit -m "Update CHANGELOG.md for v${{ steps.version.outputs.current-version }} [skip ci]"
             git push origin next

From 60e8ee0355440fb51e5dc19a162a34315c87660c Mon Sep 17 00:00:00 2001
From: Jeppe Reinhold 
Date: Wed, 30 Aug 2023 10:22:08 +0200
Subject: [PATCH 084/312] highlight active package manager in info cli

---
 code/lib/cli/src/generate.ts | 28 ++++++++++++++++++----------
 1 file changed, 18 insertions(+), 10 deletions(-)

diff --git a/code/lib/cli/src/generate.ts b/code/lib/cli/src/generate.ts
index 49a8eed9401f..fa52682ee278 100644
--- a/code/lib/cli/src/generate.ts
+++ b/code/lib/cli/src/generate.ts
@@ -22,6 +22,7 @@ import { dev } from './dev';
 import { build } from './build';
 import { parseList, getEnvConfig } from './utils';
 import versions from './versions';
+import { JsPackageManagerFactory } from './js-package-manager';
 
 addToGlobalContext('cliVersion', versions.storybook);
 
@@ -87,17 +88,24 @@ command('upgrade')
 
 command('info')
   .description('Prints debugging information about the local environment')
-  .action(() => {
+  .action(async () => {
     consoleLogger.log(chalk.bold('\nStorybook Environment Info:'));
-    envinfo
-      .run({
-        System: ['OS', 'CPU', 'Shell'],
-        Binaries: ['Node', 'Yarn', 'npm', 'pnpm'],
-        Browsers: ['Chrome', 'Edge', 'Firefox', 'Safari'],
-        npmPackages: '{@storybook/*,*storybook*,sb,chromatic}',
-        npmGlobalPackages: '{@storybook/*,*storybook*,sb,chromatic}',
-      })
-      .then(consoleLogger.log);
+    const pkgManager = await JsPackageManagerFactory.getPackageManager();
+    const activePackageManager = pkgManager.type.replace(/\d/, ''); // 'yarn1' -> 'yarn'
+    const output = await envinfo.run({
+      System: ['OS', 'CPU', 'Shell'],
+      Binaries: ['Node', 'Yarn', 'npm', 'pnpm'],
+      Browsers: ['Chrome', 'Edge', 'Firefox', 'Safari'],
+      npmPackages: '{@storybook/*,*storybook*,sb,chromatic}',
+      npmGlobalPackages: '{@storybook/*,*storybook*,sb,chromatic}',
+    });
+    const activePackageManagerLine = output.match(new RegExp(`${activePackageManager}:.*`, 'i'));
+    consoleLogger.log(
+      output.replace(
+        activePackageManagerLine,
+        chalk.bold(`${activePackageManagerLine} <----- active`)
+      )
+    );
   });
 
 command('migrate [migration]')

From 3eec835f8c0710a17b8ca4fa91501671e443e6f4 Mon Sep 17 00:00:00 2001
From: Jeppe Reinhold 
Date: Wed, 30 Aug 2023 10:24:54 +0200
Subject: [PATCH 085/312] update template comment

---
 code/lib/cli/src/sandbox-templates.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/code/lib/cli/src/sandbox-templates.ts b/code/lib/cli/src/sandbox-templates.ts
index ba040e993b69..9d06a8054953 100644
--- a/code/lib/cli/src/sandbox-templates.ts
+++ b/code/lib/cli/src/sandbox-templates.ts
@@ -19,7 +19,7 @@ export type Template = {
   /**
    * Readable name for the template, which will be used for feedback and the status page
    * Follows the naming scheme when it makes sense:
-   *  <"v"version|"Latest"|"Prerelease"> [-  ](JS|TS)
+   *  <"v"version|"Latest"|"Prerelease"> (<"Webpack"|"Vite"> | <"JavaScript"|"TypeScript">)
    * React Latest - Webpack (TS)
    * Next.js v12 (JS)
    * Angular CLI Prerelease

From d5df684fc7c107bceffddfa176d2799c60c9a58e Mon Sep 17 00:00:00 2001
From: Jeppe Reinhold 
Date: Wed, 30 Aug 2023 10:44:03 +0200
Subject: [PATCH 086/312] simplify

---
 .github/workflows/publish.yml | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml
index 821bbf1d15e6..47e9798ca46f 100644
--- a/.github/workflows/publish.yml
+++ b/.github/workflows/publish.yml
@@ -166,11 +166,8 @@ jobs:
           git pull
           git checkout origin/main ./CHANGELOG.md
           git add ./CHANGELOG.md
-          # only commit if there are changes
-          if ! git diff-index --quiet HEAD; then
-            git commit -m "Update CHANGELOG.md for v${{ steps.version.outputs.current-version }} [skip ci]"
-            git push origin next
-          fi
+          git commit -m "Update CHANGELOG.md for v${{ steps.version.outputs.current-version }} [skip ci]" || true
+          git push origin next
 
       - name: Sync version JSONs from `next-release` to `main`
         if: github.ref_name == 'next-release'

From c31c498a39445696957f424a1453b1f2bd40dba9 Mon Sep 17 00:00:00 2001
From: Norbert de Langen 
Date: Wed, 30 Aug 2023 11:44:01 +0200
Subject: [PATCH 087/312] add ability to remove via setting `null` add ability
 to update status via a state-setter-function

---
 code/lib/manager-api/src/modules/stories.ts   | 23 ++++-
 .../lib/manager-api/src/tests/stories.test.ts | 84 +++++++++++++++++++
 code/lib/types/src/modules/api-stories.ts     |  2 +-
 3 files changed, 105 insertions(+), 4 deletions(-)

diff --git a/code/lib/manager-api/src/modules/stories.ts b/code/lib/manager-api/src/modules/stories.ts
index c69e5e23cdb5..aff85aabcea3 100644
--- a/code/lib/manager-api/src/modules/stories.ts
+++ b/code/lib/manager-api/src/modules/stories.ts
@@ -263,7 +263,10 @@ export interface SubAPI {
    * @param {StatusUpdate} update - An object containing the updated status information.
    * @returns {Promise} A promise that resolves when the status has been updated.
    */
-  experimental_updateStatus: (addonId: string, update: API_StatusUpdate) => Promise;
+  experimental_updateStatus: (
+    addonId: string,
+    update: API_StatusUpdate | ((state: API_StatusState) => API_StatusUpdate)
+  ) => Promise;
   /**
    * Updates the filtering of the index.
    *
@@ -581,13 +584,27 @@ export const init: ModuleFn = ({
     },
 
     /* EXPERIMENTAL APIs */
-    experimental_updateStatus: async (id, update) => {
+    experimental_updateStatus: async (id, input) => {
       const { status, internal_index: index } = store.getState();
       const newStatus = { ...status };
 
+      const update = typeof input === 'function' ? input(status) : input;
+
+      if (Object.keys(update).length === 0) {
+        return;
+      }
+
       Object.entries(update).forEach(([storyId, value]) => {
         newStatus[storyId] = { ...(newStatus[storyId] || {}) };
-        newStatus[storyId][id] = value;
+        if (value === null) {
+          delete newStatus[storyId][id];
+        } else {
+          newStatus[storyId][id] = value;
+        }
+
+        if (Object.keys(newStatus[storyId]).length === 0) {
+          delete newStatus[storyId];
+        }
       });
 
       await store.setState({ status: newStatus }, { persistence: 'session' });
diff --git a/code/lib/manager-api/src/tests/stories.test.ts b/code/lib/manager-api/src/tests/stories.test.ts
index 0ee0c9be4ebb..a93cd1df9a99 100644
--- a/code/lib/manager-api/src/tests/stories.test.ts
+++ b/code/lib/manager-api/src/tests/stories.test.ts
@@ -1273,6 +1273,90 @@ describe('stories API', () => {
         }
       `);
     });
+    it('delete when value is null', async () => {
+      const moduleArgs = createMockModuleArgs({});
+      const { api } = initStories(moduleArgs as unknown as ModuleArgs);
+      const { store } = moduleArgs;
+
+      await api.setIndex({ v: 4, entries: mockEntries });
+
+      await expect(
+        api.experimental_updateStatus('a-addon-id', {
+          'a-story-id': {
+            status: 'pending',
+            title: 'an addon title',
+            description: 'an addon description',
+          },
+          'another-story-id': { status: 'success', title: 'a addon title', description: '' },
+        })
+      ).resolves.not.toThrow();
+
+      // do a second update, this time with null
+      await expect(
+        api.experimental_updateStatus('a-addon-id', {
+          'a-story-id': null,
+          'another-story-id': { status: 'success', title: 'a addon title', description: '' },
+        })
+      ).resolves.not.toThrow();
+
+      expect(store.getState().status).toMatchInlineSnapshot(`
+        Object {
+          "another-story-id": Object {
+            "a-addon-id": Object {
+              "description": "",
+              "status": "success",
+              "title": "a addon title",
+            },
+          },
+        }
+      `);
+    });
+    it('updates with a function', async () => {
+      const moduleArgs = createMockModuleArgs({});
+      const { api } = initStories(moduleArgs as unknown as ModuleArgs);
+      const { store } = moduleArgs;
+
+      await api.setIndex({ v: 4, entries: mockEntries });
+
+      // setup initial state
+      await expect(
+        api.experimental_updateStatus('a-addon-id', () => ({
+          'a-story-id': {
+            status: 'pending',
+            title: 'an addon title',
+            description: 'an addon description',
+          },
+          'another-story-id': { status: 'success', title: 'a addon title', description: '' },
+        }))
+      ).resolves.not.toThrow();
+
+      // use existing state in function
+      await expect(
+        api.experimental_updateStatus('a-addon-id', (current) => {
+          return Object.fromEntries(
+            Object.entries(current).map(([k, v]) => [k, { ...v['a-addon-id'], status: 'success' }])
+          );
+        })
+      ).resolves.not.toThrow();
+      expect(store.getState().status).toMatchInlineSnapshot(`
+        Object {
+          "a-story-id": Object {
+            "a-addon-id": Object {
+              "description": "an addon description",
+              "status": "success",
+              "title": "an addon title",
+            },
+          },
+          "another-story-id": Object {
+            "a-addon-id": Object {
+              "description": "",
+              "status": "success",
+              "title": "a addon title",
+            },
+          },
+        }
+      `);
+    });
   });
   describe('experimental_setFilter', () => {
     it('is included in the initial state', async () => {
diff --git a/code/lib/types/src/modules/api-stories.ts b/code/lib/types/src/modules/api-stories.ts
index 3df42dd812ec..45acc19e35c7 100644
--- a/code/lib/types/src/modules/api-stories.ts
+++ b/code/lib/types/src/modules/api-stories.ts
@@ -186,5 +186,5 @@ export type API_StatusState = Record>;
 export type API_StatusUpdate = Record;
 
 export type API_FilterFunction = (
-  item: API_PreparedIndexEntry & { status: Record }
+  item: API_PreparedIndexEntry & { status: Record }
 ) => boolean;

From 07846ac1a946b0b28bd618e9bfdec5ce6255e12d Mon Sep 17 00:00:00 2001
From: Nathan Heaps <1282393+nsheaps@users.noreply.github.com>
Date: Wed, 30 Aug 2023 09:28:03 -0400
Subject: [PATCH 088/312] PR feedback - move docs into nextjs specific readme

---
 code/frameworks/nextjs/README.md              | 46 +++++++++++++++++++
 docs/sharing/publish-storybook.md             |  6 ---
 ...hromatic-github-action-with-mocking.js.mdx | 10 ----
 .../common/mocked-google-fonts.js.mdx         | 29 ------------
 .../build-pages-with-storybook.md             | 19 --------
 5 files changed, 46 insertions(+), 64 deletions(-)
 delete mode 100644 docs/snippets/common/chromatic-github-action-with-mocking.js.mdx
 delete mode 100644 docs/snippets/common/mocked-google-fonts.js.mdx

diff --git a/code/frameworks/nextjs/README.md b/code/frameworks/nextjs/README.md
index 4d9ea8542470..d1e1a33bcc85 100644
--- a/code/frameworks/nextjs/README.md
+++ b/code/frameworks/nextjs/README.md
@@ -19,6 +19,7 @@
     - [next/font/google](#nextfontgoogle)
     - [next/font/local](#nextfontlocal)
     - [Not supported features of next/font](#not-supported-features-of-nextfont)
+    - [Mocking fonts during testing](#mocking-fonts-during-testing)
   - [Next.js Routing](#nextjs-routing)
     - [Overriding defaults](#overriding-defaults)
     - [Global Defaults](#global-defaults)
@@ -271,6 +272,51 @@ The following features are not supported (yet). Support for these features might
 - [preload](https://nextjs.org/docs/api-reference/next/font#preload) option gets ignored. Storybook handles Font loading its own way.
 - [display](https://nextjs.org/docs/api-reference/next/font#display) option gets ignored. All fonts are loaded with display set to "block" to make Storybook load the font properly.
 
+#### Mocking fonts during testing
+
+Occasionally fetching fonts from google may fail as part of your storybook build. It is highly recommended to mock these requests, as those failures can cause your pipeline to fail as well. Next.js [supports](https://github.com/vercel/next.js/blob/725ddc7371f80cca273779d37f961c3e20356f95/packages/font/src/google/fetch-css-from-google-fonts.ts#L36)https://github.com/vercel/next.js/blob/725ddc7371f80cca273779d37f961c3e20356f95/packages/font/src/google/fetch-css-from-google-fonts.ts#L36 mocking fonts via a javascript module located where the env var `NEXT_FONT_GOOGLE_MOCKED_RESPONSES` references.
+
+For example, using [GitHub Actions](https://www.chromatic.com/docs/github-actions):
+
+```shell
+      - uses: chromaui/action@v1
+        env:
+          #πŸ‘‡ the location of mocked fonts to use
+          NEXT_FONT_GOOGLE_MOCKED_RESPONSES: ${{ github.workspace }}/mocked-google-fonts.js
+        with:
+          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
+          token: ${{ secrets.GITHUB_TOKEN }}
+```
+
+Your mocked fonts will look something lke this:
+
+```js
+// mocked-google-fonts.js
+//πŸ‘‡ Mocked responses of google fonts with the URL as the key
+module.exports = {
+  'https://fonts.googleapis.com/css?family=Inter:wght@400;500;600;800&display=block': `
+    /* cyrillic-ext */
+    @font-face {
+      font-family: 'Inter';
+      font-style: normal;
+      font-weight: 400;
+      font-display: block;
+      src: url(https://fonts.gstatic.com/s/inter/v12/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuLyfAZJhiJ-Ek-_EeAmM.woff2) format('woff2');
+      unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+    }
+    /* more font declarations go here */
+    /* latin */
+    @font-face {
+      font-family: 'Inter';
+      font-style: normal;
+      font-weight: 400;
+      font-display: block;
+      src: url(https://fonts.gstatic.com/s/inter/v12/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuLyfAZ9hiJ-Ek-_EeA.woff2) format('woff2');
+      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+    }`,
+};
+```
+
 ### Next.js Routing
 
 [Next.js's router](https://nextjs.org/docs/routing/introduction) is automatically stubbed for you so that when the router is interacted with, all of its interactions are automatically logged to the Actions ctions panel if you have the [Storybook actions addon](https://storybook.js.org/docs/react/essentials/actions).
diff --git a/docs/sharing/publish-storybook.md b/docs/sharing/publish-storybook.md
index 1e3b4145ff20..0c89b6978653 100644
--- a/docs/sharing/publish-storybook.md
+++ b/docs/sharing/publish-storybook.md
@@ -109,12 +109,6 @@ In your project's root directory, add a new file called `chromatic.yml` inside t
 
 

 
-

-
-πŸ’‘ External font resources may occasionally fail to load at build time for a variety of reasons. If you have issues with them, a good way to get around that problem is to [mock the fonts](../writing-stories/build-pages-with-storybook.md#mocking-fonts) your application requires
-
-

-
 Commit and push the file. Congratulations, you've successfully automated publishing your Storybook. Now whenever you open a PR you’ll get a handy link to your published Storybook in your PR checks.
 
 ![PR check publish](./prbadge-publish.png)
diff --git a/docs/snippets/common/chromatic-github-action-with-mocking.js.mdx b/docs/snippets/common/chromatic-github-action-with-mocking.js.mdx
deleted file mode 100644
index 2b4ae573a5e5..000000000000
--- a/docs/snippets/common/chromatic-github-action-with-mocking.js.mdx
+++ /dev/null
@@ -1,10 +0,0 @@
-```shell
-      - uses: chromaui/action@v1
-        env:
-          #πŸ‘‡ the location of mocked fonts to use
-          NEXT_FONT_GOOGLE_MOCKED_RESPONSES: ${{ github.workspace }}/mocked-google-fonts.js
-        with:
-          #πŸ‘‡ Chromatic projectToken,
-          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
-          token: ${{ secrets.GITHUB_TOKEN }}
-```
diff --git a/docs/snippets/common/mocked-google-fonts.js.mdx b/docs/snippets/common/mocked-google-fonts.js.mdx
deleted file mode 100644
index a56429147f1d..000000000000
--- a/docs/snippets/common/mocked-google-fonts.js.mdx
+++ /dev/null
@@ -1,29 +0,0 @@
-```js
-// mocked-google-fonts.js
-
-//πŸ‘‡ Mocked responses of google fonts
-// If you run into errors during your build, easiest is to fetch them yourself and drop them in here
-// so the URL requested explicitly matches the mocks rather than trying to determine it yourself.
-module.exports = {
-  'https://fonts.googleapis.com/css?family=Inter:wght@400;500;600;800&display=block': `
-    /* cyrillic-ext */
-    @font-face {
-      font-family: 'Inter';
-      font-style: normal;
-      font-weight: 400;
-      font-display: block;
-      src: url(https://fonts.gstatic.com/s/inter/v12/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuLyfAZJhiJ-Ek-_EeAmM.woff2) format('woff2');
-      unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
-    }
-    /* more font declarations go here */
-    /* latin */
-    @font-face {
-      font-family: 'Inter';
-      font-style: normal;
-      font-weight: 400;
-      font-display: block;
-      src: url(https://fonts.gstatic.com/s/inter/v12/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuLyfAZ9hiJ-Ek-_EeA.woff2) format('woff2');
-      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-    }`,
-};
-```
diff --git a/docs/writing-stories/build-pages-with-storybook.md b/docs/writing-stories/build-pages-with-storybook.md
index 53f1de9efb93..4307a31020f4 100644
--- a/docs/writing-stories/build-pages-with-storybook.md
+++ b/docs/writing-stories/build-pages-with-storybook.md
@@ -394,22 +394,3 @@ If you’ve set up `GlobalContainerContext`, you’ll need to set up a decorator
 />
 
 
-
-### Mocking fonts
-
-If your application uses fonts from Google, occasionally fetching these fonts may fail as part of your storybook build. It is highly recommended to mock these requests, as those failures can cause your pipeline to fail as well.
-
-#### Mocking fonts in Next.js
-
-Next.js [supports](https://github.com/vercel/next.js/blob/725ddc7371f80cca273779d37f961c3e20356f95/packages/font/src/google/fetch-css-from-google-fonts.ts#L36)https://github.com/vercel/next.js/blob/725ddc7371f80cca273779d37f961c3e20356f95/packages/font/src/google/fetch-css-from-google-fonts.ts#L36 mocking fonts via a javascript module located where the env var `NEXT_FONT_GOOGLE_MOCKED_RESPONSES` references.
-
-
-
-
-
-

From 4c16fd2c4f84be2915be6d874ed2ca0f0170f391 Mon Sep 17 00:00:00 2001
From: Yann Braga 
Date: Wed, 30 Aug 2023 19:45:53 +0200
Subject: [PATCH 089/312] add uncaughtException handler in the CLI

---
 code/lib/cli/bin/index.js | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/code/lib/cli/bin/index.js b/code/lib/cli/bin/index.js
index 812bff5291c2..7131e95a311d 100755
--- a/code/lib/cli/bin/index.js
+++ b/code/lib/cli/bin/index.js
@@ -6,4 +6,21 @@ if (majorNodeVersion < 16) {
   process.exit(1);
 }
 
+// The Storybook CLI has a catch block for all of its commands, but if an error
+// occurs before the command even runs, for instance, if an import fails, then
+// such error will fall under the uncaughtException handler.
+// This is the earliest moment we can catch such errors.
+process.once('uncaughtException', (error) => {
+  if (error.message.includes('string-width')) {
+    console.error(
+      [
+        'πŸ”΄ Error: It looks like you are having a known issue with package hoisting.',
+        'Please check the following issue for details and solutions: https://github.com/storybookjs/storybook/issues/22431#issuecomment-1630086092\n\n',
+      ].join('\n')
+    );
+  }
+
+  throw error;
+});
+
 require('../dist/generate.js');

From 3bd204616c4f6b4f44bf0763460e933dd25e09d2 Mon Sep 17 00:00:00 2001
From: Yann Braga 
Date: Wed, 30 Aug 2023 22:56:15 +0200
Subject: [PATCH 090/312] add visual tests addon to storybook:ui

---
 code/ui/.storybook/main.ts      |   8 +
 code/ui/components/package.json |   1 +
 code/yarn.lock                  | 321 +++++++++++++++++++++++++++++++-
 3 files changed, 322 insertions(+), 8 deletions(-)

diff --git a/code/ui/.storybook/main.ts b/code/ui/.storybook/main.ts
index 5f979898a5c2..190a5e4b84da 100644
--- a/code/ui/.storybook/main.ts
+++ b/code/ui/.storybook/main.ts
@@ -51,6 +51,14 @@ const config: StorybookConfig = {
     '@storybook/addon-interactions',
     '@storybook/addon-storysource',
     '@storybook/addon-designs',
+    {
+      name: '@chromaui/addon-visual-tests',
+      options: {
+        projectId: 'Project:635781f3500dd2c49e189caf',
+        projectToken: '80b312430ec4',
+        buildScriptName: 'storybook:ui:build',
+      },
+    },
   ],
   framework: {
     name: '@storybook/react-vite',
diff --git a/code/ui/components/package.json b/code/ui/components/package.json
index 9b170beb3b75..9921b6ef1122 100644
--- a/code/ui/components/package.json
+++ b/code/ui/components/package.json
@@ -71,6 +71,7 @@
     "util-deprecate": "^1.0.2"
   },
   "devDependencies": {
+    "@chromaui/addon-visual-tests": "^0.0.49",
     "@popperjs/core": "^2.6.0",
     "@storybook/icons": "^1.1.6",
     "@types/react-syntax-highlighter": "11.0.5",
diff --git a/code/yarn.lock b/code/yarn.lock
index debf9c20cd8d..82f1d07dbd2d 100644
--- a/code/yarn.lock
+++ b/code/yarn.lock
@@ -5,6 +5,18 @@ __metadata:
   version: 6
   cacheKey: 8c0
 
+"@0no-co/graphql.web@npm:^1.0.1":
+  version: 1.0.4
+  resolution: "@0no-co/graphql.web@npm:1.0.4"
+  peerDependencies:
+    graphql: ^14.0.0 || ^15.0.0 || ^16.0.0
+  peerDependenciesMeta:
+    graphql:
+      optional: true
+  checksum: bf63cb5b017063363c9a9e06dc17532abc1c2da402c7ebcbc7b5ab2a0601ec93b02de93af9e50d9daffb3b747eddcf0b1e5418a46d1182c5b8087b7d7a1768ad
+  languageName: node
+  linkType: hard
+
 "@aashutoshrathi/word-wrap@npm:^1.2.3":
   version: 1.2.6
   resolution: "@aashutoshrathi/word-wrap@npm:1.2.6"
@@ -2238,6 +2250,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/runtime@npm:^7.1.2":
+  version: 7.22.10
+  resolution: "@babel/runtime@npm:7.22.10"
+  dependencies:
+    regenerator-runtime: ^0.14.0
+  checksum: d3a006fe2cbaf4048b935fb18f55d9ed52c26292182537b442cee57bf524dbb483367c57f464b1a5a96648d9d8d0fdcda848d58a8a09e18ed3f8971dcd684c6c
+  languageName: node
+  linkType: hard
+
 "@babel/runtime@npm:^7.10.2, @babel/runtime@npm:^7.11.2, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.13.10, @babel/runtime@npm:^7.14.8, @babel/runtime@npm:^7.17.8, @babel/runtime@npm:^7.18.3, @babel/runtime@npm:^7.20.13, @babel/runtime@npm:^7.20.7, @babel/runtime@npm:^7.21.0, @babel/runtime@npm:^7.22.6, @babel/runtime@npm:^7.3.1, @babel/runtime@npm:^7.7.6, @babel/runtime@npm:^7.8.4, @babel/runtime@npm:^7.9.2":
   version: 7.22.6
   resolution: "@babel/runtime@npm:7.22.6"
@@ -2321,6 +2342,38 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@chromaui/addon-visual-tests@npm:^0.0.49":
+  version: 0.0.49
+  resolution: "@chromaui/addon-visual-tests@npm:0.0.49"
+  dependencies:
+    "@storybook/csf-tools": 7.4.0
+    "@storybook/design-system": ^7.15.15
+    chromatic: 6.24.0
+    date-fns: ^2.30.0
+    pluralize: ^8.0.0
+    ts-dedent: ^2.2.0
+    urql: ^4.0.3
+    uuid: ^9.0.0
+  peerDependencies:
+    "@storybook/blocks": ^7.2.0
+    "@storybook/client-logger": ^7.2.0
+    "@storybook/components": ^7.2.0
+    "@storybook/core-events": ^7.2.0
+    "@storybook/manager-api": ^7.2.0
+    "@storybook/preview-api": ^7.2.0
+    "@storybook/theming": ^7.2.0
+    "@storybook/types": ^7.2.0
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
+  peerDependenciesMeta:
+    react:
+      optional: true
+    react-dom:
+      optional: true
+  checksum: af5860520f2652d866017ca24d11fc38c18030c7452ba430c2f399c41ef5808af9187ded1f1fdcf936e97c68e821f8cce53495a54d8f40a75b07dfc7b94da3c4
+  languageName: node
+  linkType: hard
+
 "@colors/colors@npm:1.5.0":
   version: 1.5.0
   resolution: "@colors/colors@npm:1.5.0"
@@ -2614,7 +2667,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@emotion/weak-memoize@npm:^0.3.1":
+"@emotion/weak-memoize@npm:^0.3.0, @emotion/weak-memoize@npm:^0.3.1":
   version: 0.3.1
   resolution: "@emotion/weak-memoize@npm:0.3.1"
   checksum: ed514b3cb94bbacece4ac2450d98898066c0a0698bdeda256e312405ca53634cb83c75889b25cd8bbbe185c80f4c05a1f0a0091e1875460ba6be61d0334f0b8a
@@ -3347,6 +3400,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@hypnosphi/create-react-context@npm:^0.3.1":
+  version: 0.3.1
+  resolution: "@hypnosphi/create-react-context@npm:0.3.1"
+  dependencies:
+    gud: ^1.0.0
+    warning: ^4.0.3
+  peerDependencies:
+    prop-types: ^15.0.0
+    react: ">=0.14.0"
+  checksum: e8072221f9f9c2c47c3ebc5bc6079f9a71938e181d2b4aa3e1d3922707bc097336d5260dad088cf47c1d6e1ff34839fa21f2505a95bddda0d7548c5a955b5691
+  languageName: node
+  linkType: hard
+
 "@isaacs/cliui@npm:^8.0.2":
   version: 8.0.2
   resolution: "@isaacs/cliui@npm:8.0.2"
@@ -6665,6 +6731,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@storybook/components@workspace:ui/components"
   dependencies:
+    "@chromaui/addon-visual-tests": ^0.0.49
     "@popperjs/core": ^2.6.0
     "@radix-ui/react-select": ^1.2.2
     "@radix-ui/react-toolbar": ^1.0.4
@@ -6833,7 +6900,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/csf-tools@workspace:*, @storybook/csf-tools@workspace:lib/csf-tools":
+"@storybook/csf-tools@7.4.0, @storybook/csf-tools@workspace:*, @storybook/csf-tools@workspace:lib/csf-tools":
   version: 0.0.0-use.local
   resolution: "@storybook/csf-tools@workspace:lib/csf-tools"
   dependencies:
@@ -6871,6 +6938,32 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@storybook/design-system@npm:^7.15.15":
+  version: 7.15.15
+  resolution: "@storybook/design-system@npm:7.15.15"
+  dependencies:
+    "@emotion/weak-memoize": ^0.3.0
+    "@storybook/theming": ^7.0.2
+    "@types/pluralize": ^0.0.29
+    "@types/prismjs": ^1.16.6
+    "@types/react-modal": ^3.12.1
+    "@types/uuid": ^8.3.1
+    copy-to-clipboard: ^3.3.1
+    human-format: ^0.11.0
+    pluralize: ^8.0.0
+    polished: ^3.6.4
+    prismjs: 1.25.0
+    react-github-button: ^0.1.11
+    react-modal: ^3.11.2
+    react-popper-tooltip: ^2.11.1
+    uuid: ^3.3.3
+  peerDependencies:
+    react: ^15.0.0 || ^16.0.0 || ^17.0.0
+    react-dom: ^15.0.0 || ^16.0.0 || ^17.0.0
+  checksum: 3f2ea63556aed966e906b8e56fa0ef12fd67f919426a63350a7ecba5a6cff277b8e18362d680530f7fdfa7240c8ceb890984a0594f5129f2b9d972e991b297cf
+  languageName: node
+  linkType: hard
+
 "@storybook/docs-mdx@npm:^0.1.0":
   version: 0.1.0
   resolution: "@storybook/docs-mdx@npm:0.1.0"
@@ -8003,7 +8096,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/theming@workspace:*, @storybook/theming@workspace:lib/theming":
+"@storybook/theming@^7.0.2, @storybook/theming@workspace:*, @storybook/theming@workspace:lib/theming":
   version: 0.0.0-use.local
   resolution: "@storybook/theming@workspace:lib/theming"
   dependencies:
@@ -9193,6 +9286,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/pluralize@npm:^0.0.29":
+  version: 0.0.29
+  resolution: "@types/pluralize@npm:0.0.29"
+  checksum: 840796fa1db158eb4d9787758d134736e29d9a8035f5b0cbad06e3801fc64b79112ba944c83f9a1a5b94da08703f505b8315b7e0f28bfc0f8e9e1ccfead7b083
+  languageName: node
+  linkType: hard
+
 "@types/prettier@npm:2.7.2":
   version: 2.7.2
   resolution: "@types/prettier@npm:2.7.2"
@@ -9214,6 +9314,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/prismjs@npm:^1.16.6":
+  version: 1.26.0
+  resolution: "@types/prismjs@npm:1.26.0"
+  checksum: dce1388a626c20b95fa2715917deef5a401eec33e9e181f202840ee3b3c7d8a84d5558c834af4c29b8e007741a6a18639b074db8ecccdd6e7de15280fc4dfdd2
+  languageName: node
+  linkType: hard
+
 "@types/prompts@npm:^2.0.9":
   version: 2.4.4
   resolution: "@types/prompts@npm:2.4.4"
@@ -9288,6 +9395,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/react-modal@npm:^3.12.1":
+  version: 3.16.0
+  resolution: "@types/react-modal@npm:3.16.0"
+  dependencies:
+    "@types/react": "*"
+  checksum: ee65eb9f47e6c953bed23d716442ee1fcac3c2d586409924317043c8df2e38475c2232ef04e3c57d7d7387d7a319a97732278e92864d7363596e54fc5ebcd0cb
+  languageName: node
+  linkType: hard
+
 "@types/react-syntax-highlighter@npm:11.0.5":
   version: 11.0.5
   resolution: "@types/react-syntax-highlighter@npm:11.0.5"
@@ -9500,6 +9616,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/uuid@npm:^8.3.1":
+  version: 8.3.4
+  resolution: "@types/uuid@npm:8.3.4"
+  checksum: b9ac98f82fcf35962317ef7dc44d9ac9e0f6fdb68121d384c88fe12ea318487d5585d3480fa003cf28be86a3bbe213ca688ba786601dce4a97724765eb5b1cf2
+  languageName: node
+  linkType: hard
+
 "@types/uuid@npm:^9.0.1":
   version: 9.0.2
   resolution: "@types/uuid@npm:9.0.2"
@@ -9743,6 +9866,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@urql/core@npm:^4.1.0":
+  version: 4.1.1
+  resolution: "@urql/core@npm:4.1.1"
+  dependencies:
+    "@0no-co/graphql.web": ^1.0.1
+    wonka: ^6.3.2
+  checksum: 1f2077a0ce6cc7e34f03107f6e51f7b4ae77a9ef8f81ac37a81d61828b8ec4fa7b937eb315ead84108164ecd01e442b21f8ad3701fb8df881fa1c63cba114e68
+  languageName: node
+  linkType: hard
+
 "@vitejs/plugin-basic-ssl@npm:1.0.1":
   version: 1.0.1
   resolution: "@vitejs/plugin-basic-ssl@npm:1.0.1"
@@ -12721,6 +12854,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"chromatic@npm:6.24.0":
+  version: 6.24.0
+  resolution: "chromatic@npm:6.24.0"
+  bin:
+    chroma: dist/bin.js
+    chromatic: dist/bin.js
+    chromatic-cli: dist/bin.js
+  checksum: e5ebc1ff78076e5112d79fd5f4f133febf789cb4713149507f755741cd069daf3f0a2c7f13b7b176becde7734cf010d1d7628a22f3e28087a6faa17f28ffd798
+  languageName: node
+  linkType: hard
+
 "chrome-trace-event@npm:^1.0.2":
   version: 1.0.3
   resolution: "chrome-trace-event@npm:1.0.3"
@@ -13966,7 +14110,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"date-fns@npm:^2.0.1":
+"date-fns@npm:^2.0.1, date-fns@npm:^2.30.0":
   version: 2.30.0
   resolution: "date-fns@npm:2.30.0"
   dependencies:
@@ -14075,6 +14219,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"deep-equal@npm:^1.1.1":
+  version: 1.1.1
+  resolution: "deep-equal@npm:1.1.1"
+  dependencies:
+    is-arguments: ^1.0.4
+    is-date-object: ^1.0.1
+    is-regex: ^1.0.4
+    object-is: ^1.0.1
+    object-keys: ^1.1.1
+    regexp.prototype.flags: ^1.2.0
+  checksum: 473d5dd1d707afd5ad3068864765590591b049d0e0d9a01931599dbbd820e35f09d0a42faa6e4644deb7cf6b7dc90f7bfdf5559f42279d67f714209b62036212
+  languageName: node
+  linkType: hard
+
 "deep-equal@npm:^2.0.5":
   version: 2.2.2
   resolution: "deep-equal@npm:2.2.2"
@@ -16155,6 +16313,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"exenv@npm:^1.2.0":
+  version: 1.2.2
+  resolution: "exenv@npm:1.2.2"
+  checksum: 4e96b355a6b9b9547237288ca779dd673b2e698458b409e88b50df09feb7c85ef94c07354b6b87bc3ed0193a94009a6f7a3c71956da12f45911c0d0f5aa3caa0
+  languageName: node
+  linkType: hard
+
 "exit@npm:^0.1.2":
   version: 0.1.2
   resolution: "exit@npm:0.1.2"
@@ -17826,6 +17991,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"gud@npm:^1.0.0":
+  version: 1.0.0
+  resolution: "gud@npm:1.0.0"
+  checksum: a4db6edc18e2c4e3a22dc9e639e40a4e5650d53dae9cf384a96d5380dfa17ddda376cf6b7797a5c30d140d2532e5a69d167bdb70c2c151dd673253bac6b027f3
+  languageName: node
+  linkType: hard
+
 "gunzip-maybe@npm:^1.4.2":
   version: 1.4.2
   resolution: "gunzip-maybe@npm:1.4.2"
@@ -18496,6 +18668,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"human-format@npm:^0.11.0":
+  version: 0.11.0
+  resolution: "human-format@npm:0.11.0"
+  checksum: 83cc87af67036b4abb6dc585533fcc232279373f8a3a7a4fc1f6d988f6aa35664f986adb818d04d9de3dee240648ec94a9944a8ab1852df21eb67c254e991ea7
+  languageName: node
+  linkType: hard
+
 "human-signals@npm:^2.1.0":
   version: 2.1.0
   resolution: "human-signals@npm:2.1.0"
@@ -19359,7 +19538,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-regex@npm:^1.0.3, is-regex@npm:^1.0.5, is-regex@npm:^1.1.0, is-regex@npm:^1.1.4":
+"is-regex@npm:^1.0.3, is-regex@npm:^1.0.4, is-regex@npm:^1.0.5, is-regex@npm:^1.1.0, is-regex@npm:^1.1.4":
   version: 1.1.4
   resolution: "is-regex@npm:1.1.4"
   dependencies:
@@ -25162,6 +25341,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"polished@npm:^3.6.4":
+  version: 3.7.2
+  resolution: "polished@npm:3.7.2"
+  dependencies:
+    "@babel/runtime": ^7.12.5
+  checksum: c36439946b5bfbac16c06dd7b00a89f45e07410427344e909c540ce3ddeb9b44d2ae9cc035a9d77f4551e07b9803419ae77767aec85958a0978158a95c0115d8
+  languageName: node
+  linkType: hard
+
 "polished@npm:^4.2.2":
   version: 4.2.2
   resolution: "polished@npm:4.2.2"
@@ -25171,6 +25359,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"popper.js@npm:^1.14.4":
+  version: 1.16.1
+  resolution: "popper.js@npm:1.16.1"
+  checksum: 1c1a826f757edb5b8c2049dfd7a9febf6ae1e9d0e51342fc715b49a0c1020fced250d26484619883651e097c5764bbcacd2f31496e3646027f079dd83e072681
+  languageName: node
+  linkType: hard
+
 "portfinder@npm:^1.0.28":
   version: 1.0.32
   resolution: "portfinder@npm:1.0.32"
@@ -25520,6 +25715,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"prismjs@npm:1.25.0":
+  version: 1.25.0
+  resolution: "prismjs@npm:1.25.0"
+  checksum: 0c3853a6c815b23a07bef77700f60a40b2a12018a383a75cd7d108718717b73927c809e7dd08ac0ae9f16fbe1e005b337262bc95952cf9cfc91914f986b07bd3
+  languageName: node
+  linkType: hard
+
 "prismjs@npm:^1.27.0":
   version: 1.29.0
   resolution: "prismjs@npm:1.29.0"
@@ -25662,7 +25864,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"prop-types@npm:^15.6.2, prop-types@npm:^15.7.2, prop-types@npm:^15.8.1":
+"prop-types@npm:^15.5.10, prop-types@npm:^15.6.1, prop-types@npm:^15.6.2, prop-types@npm:^15.7.2, prop-types@npm:^15.8.1":
   version: 15.8.1
   resolution: "prop-types@npm:15.8.1"
   dependencies:
@@ -26247,6 +26449,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-github-button@npm:^0.1.11":
+  version: 0.1.11
+  resolution: "react-github-button@npm:0.1.11"
+  dependencies:
+    prop-types: ^15.5.10
+  checksum: e00fa4f3b2dee74f45fff0c9d68d7d75eefa495d27a56ef2e2391f9600623d16b8a9f99c1d35a7b4f620dfb95dd8ed0b1a76fbbfece4be0843cd507c17a37dfa
+  languageName: node
+  linkType: hard
+
 "react-helmet-async@npm:^1.0.7":
   version: 1.3.0
   resolution: "react-helmet-async@npm:1.3.0"
@@ -26300,6 +26511,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-lifecycles-compat@npm:^3.0.0":
+  version: 3.0.4
+  resolution: "react-lifecycles-compat@npm:3.0.4"
+  checksum: 1d0df3c85af79df720524780f00c064d53a9dd1899d785eddb7264b378026979acbddb58a4b7e06e7d0d12aa1494fd5754562ee55d32907b15601068dae82c27
+  languageName: node
+  linkType: hard
+
 "react-merge-refs@npm:^1.0.0":
   version: 1.1.0
   resolution: "react-merge-refs@npm:1.1.0"
@@ -26307,6 +26525,34 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-modal@npm:^3.11.2":
+  version: 3.16.1
+  resolution: "react-modal@npm:3.16.1"
+  dependencies:
+    exenv: ^1.2.0
+    prop-types: ^15.7.2
+    react-lifecycles-compat: ^3.0.0
+    warning: ^4.0.3
+  peerDependencies:
+    react: ^0.14.0 || ^15.0.0 || ^16 || ^17 || ^18
+    react-dom: ^0.14.0 || ^15.0.0 || ^16 || ^17 || ^18
+  checksum: 7b56e2c505b2b924736c471a34754a4211df40ac2d6fb0949cf095aea5e65d3326bd9f111fa7898acf40afa54f526809ad8aa47e02b8328663d11422568dc7b1
+  languageName: node
+  linkType: hard
+
+"react-popper-tooltip@npm:^2.11.1":
+  version: 2.11.1
+  resolution: "react-popper-tooltip@npm:2.11.1"
+  dependencies:
+    "@babel/runtime": ^7.9.2
+    react-popper: ^1.3.7
+  peerDependencies:
+    react: ^16.6.0
+    react-dom: ^16.6.0
+  checksum: f81278f1ea87899ffa57fed85c2531fa583ebca424ae5522e3a1b05c5635c014b3467391e77fb9c48bbc8e7b9f1050fa9302e8ee6134a9333858b5a6e0ae1b49
+  languageName: node
+  linkType: hard
+
 "react-popper-tooltip@npm:^4.4.2":
   version: 4.4.2
   resolution: "react-popper-tooltip@npm:4.4.2"
@@ -26321,6 +26567,23 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-popper@npm:^1.3.7":
+  version: 1.3.11
+  resolution: "react-popper@npm:1.3.11"
+  dependencies:
+    "@babel/runtime": ^7.1.2
+    "@hypnosphi/create-react-context": ^0.3.1
+    deep-equal: ^1.1.1
+    popper.js: ^1.14.4
+    prop-types: ^15.6.1
+    typed-styles: ^0.0.7
+    warning: ^4.0.2
+  peerDependencies:
+    react: 0.14.x || ^15.0.0 || ^16.0.0 || ^17.0.0
+  checksum: d5dd1d0d4b5a3407134681b42a079fce525c94bce892ad177515d54a8cf64203eecbc30231476367e916aaff91221f5b6abd5afc207a86c698f35b7254178488
+  languageName: node
+  linkType: hard
+
 "react-popper@npm:^2.3.0":
   version: 2.3.0
   resolution: "react-popper@npm:2.3.0"
@@ -26815,6 +27078,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"regenerator-runtime@npm:^0.14.0":
+  version: 0.14.0
+  resolution: "regenerator-runtime@npm:0.14.0"
+  checksum: e25f062c1a183f81c99681691a342760e65c55e8d3a4d4fe347ebe72433b123754b942b70b622959894e11f8a9131dc549bd3c9a5234677db06a4af42add8d12
+  languageName: node
+  linkType: hard
+
 "regenerator-transform@npm:^0.15.1":
   version: 0.15.1
   resolution: "regenerator-transform@npm:0.15.1"
@@ -26841,7 +27111,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"regexp.prototype.flags@npm:^1.4.3, regexp.prototype.flags@npm:^1.5.0":
+"regexp.prototype.flags@npm:^1.2.0, regexp.prototype.flags@npm:^1.4.3, regexp.prototype.flags@npm:^1.5.0":
   version: 1.5.0
   resolution: "regexp.prototype.flags@npm:1.5.0"
   dependencies:
@@ -30162,6 +30432,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"typed-styles@npm:^0.0.7":
+  version: 0.0.7
+  resolution: "typed-styles@npm:0.0.7"
+  checksum: ec159f0e538364750cf9b8f19136375df64ad364fda355e6f7a7216ebffc67f18b436722c5c6853c89f70e6507eb69e5061ceb9334fa1f54902c0f6be1b985fe
+  languageName: node
+  linkType: hard
+
 "typedarray@npm:^0.0.6":
   version: 0.0.6
   resolution: "typedarray@npm:0.0.6"
@@ -30723,6 +31000,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"urql@npm:^4.0.3":
+  version: 4.0.5
+  resolution: "urql@npm:4.0.5"
+  dependencies:
+    "@urql/core": ^4.1.0
+    wonka: ^6.3.2
+  peerDependencies:
+    react: ">= 16.8.0"
+  checksum: 9560d04b3c2fe72c921bdb21e969039b776e07999704d23bce35f815eb537c9357b6c7322a1b8cd43957550798c30cd15f5130ddd054dfd8a890d17d2be85282
+  languageName: node
+  linkType: hard
+
 "use-callback-ref@npm:^1.3.0":
   version: 1.3.0
   resolution: "use-callback-ref@npm:1.3.0"
@@ -30867,6 +31156,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"uuid@npm:^3.3.3":
+  version: 3.4.0
+  resolution: "uuid@npm:3.4.0"
+  bin:
+    uuid: ./bin/uuid
+  checksum: 1c13950df865c4f506ebfe0a24023571fa80edf2e62364297a537c80af09c618299797bbf2dbac6b1f8ae5ad182ba474b89db61e0e85839683991f7e08795347
+  languageName: node
+  linkType: hard
+
 "uuid@npm:^9.0.0":
   version: 9.0.0
   resolution: "uuid@npm:9.0.0"
@@ -31480,7 +31778,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"warning@npm:^4.0.2":
+"warning@npm:^4.0.2, warning@npm:^4.0.3":
   version: 4.0.3
   resolution: "warning@npm:4.0.3"
   dependencies:
@@ -31952,6 +32250,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"wonka@npm:^6.3.2":
+  version: 6.3.4
+  resolution: "wonka@npm:6.3.4"
+  checksum: 77329eea673da07717476e1b8f1a22f1e1a4f261bb9a58fa446c03d3da13dbd5b254664f8aded5928d953f33ee5b399a17a4f70336e8b236e478209c0e78cda4
+  languageName: node
+  linkType: hard
+
 "wordwrap@npm:^1.0.0":
   version: 1.0.0
   resolution: "wordwrap@npm:1.0.0"

From 431ec639fe559b0911427087a8f1d3c0b53cea53 Mon Sep 17 00:00:00 2001
From: Jeppe Reinhold 
Date: Thu, 31 Aug 2023 11:14:00 +0200
Subject: [PATCH 091/312] ensure next is always ahead of main during stable
 releases

---
 .github/workflows/publish.yml | 38 ++++++++++++++++++++++++++---------
 1 file changed, 28 insertions(+), 10 deletions(-)

diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml
index 47e9798ca46f..c31ef7c6a0d3 100644
--- a/.github/workflows/publish.yml
+++ b/.github/workflows/publish.yml
@@ -63,7 +63,6 @@ jobs:
           yarn install
 
       - name: Apply deferred version bump and commit
-        id: version-bump
         working-directory: .
         run: |
           CURRENT_VERSION=$(cat ./code/package.json | jq '.version')
@@ -111,11 +110,6 @@ jobs:
         id: target
         run: echo "target=${{ github.ref_name == 'next-release' && 'next' || 'main' }}" >> $GITHUB_OUTPUT
 
-        # TODO: create a commit on next that does the following:
-        # bump version accordingly
-        # update changelog
-        # update version JSONs
-        # push to next
         # TODO: ensure all of this logic works if a release from next targets latest-release. steps.targets.outputs?
       - name: Get changelog for ${{ steps.version.outputs.current-version }}
         if: steps.publish-needed.outputs.published == 'false'
@@ -129,6 +123,7 @@ jobs:
 
       # when this is a patch release from main, label any patch PRs included in the release
       # when this is a stable release from next, label ALL patch PRs found, as they will per definition be "patched" now
+      # TODO: this won't work anymore for releases from next to latest-release
       - name: Label patch PRs as picked
         if: github.ref_name == 'latest-release' || (steps.publish-needed.outputs.published == 'false' && steps.target.outputs.target == 'next' && !steps.is-prerelease.outputs.prerelease)
         env:
@@ -157,6 +152,33 @@ jobs:
           git merge ${{ github.ref_name }}
           git push origin ${{ steps.target.outputs.target }}
 
+      # This step ensures that next is always one minor ahead of main
+      # this is needed when releasing a stable from next
+      # next will be at eg. 7.4.0-alpha.4, and main will be at 7.3.0
+      # then we release 7.4.0 by merging next to latest-release to main
+      # we then ensure here that next is bumped to 7.5.0 - without releasing it
+      # if this is a hotfix release bumping main to 7.3.1, next will not be touched because it's already ahead
+      - name: Ensure `next` is a minor version ahead of `main`
+        if: github.ref_name == 'latest-release'
+        run: |
+          git checkout next
+          git pull
+
+          CODE_PKG_JSON=$(cat ../code/package.json)
+          VERSION_ON_NEXT=$(echo $CODE_PKG_JSON | jq --raw-output '.version')
+          VERSION_ON_MAIN="${{ steps.version.outputs.current-version }}"
+
+          # check if next is behind current version
+          if NEXT_IS_BEHIND=$(npx semver --include-prerelease --range "<$VERSION_ON_MAIN" "$VERSION_ON_NEXT" 2>/dev/null); then
+            # temporarily set the version on next to be the same as main...
+            echo "$CODE_PKG_JSON" | jq --arg version "$VERSION_ON_MAIN" '.version = $version' > ../code/package.json
+            # ... then bump it by one minor
+            yarn release:version --release-type minor
+            git add ..
+            git commit -m "Bump next to be one minor ahead of main [skip ci]"
+            git push origin next
+          fi
+
       - name: Sync CHANGELOG.md from `main` to `next`
         if: github.ref_name == 'latest-release'
         working-directory: .
@@ -182,10 +204,6 @@ jobs:
           git commit -m "Update $VERSION_FILE for v${{ steps.version.outputs.current-version }}"
           git push origin main
 
-      - name: Overwrite main with next
-        if: steps.target.outputs.target == 'next' && steps.is-prerelease.outputs.prerelease == 'false'
-        run: git push --force origin next:main
-
       - name: Report job failure to Discord
         if: failure()
         env:

From 15b8f838be36f30a6783b9a17ccbb98ecdab6590 Mon Sep 17 00:00:00 2001
From: Yann Braga 
Date: Thu, 31 Aug 2023 11:58:11 +0200
Subject: [PATCH 092/312] sanitize ansi codes in error message and stack

---
 code/lib/telemetry/src/sanitize.test.ts | 16 ++++++++++++++++
 code/lib/telemetry/src/sanitize.ts      | 15 ++++++++++++++-
 2 files changed, 30 insertions(+), 1 deletion(-)

diff --git a/code/lib/telemetry/src/sanitize.test.ts b/code/lib/telemetry/src/sanitize.test.ts
index f5b3a742d3e6..a3389c83df79 100644
--- a/code/lib/telemetry/src/sanitize.test.ts
+++ b/code/lib/telemetry/src/sanitize.test.ts
@@ -1,7 +1,23 @@
+/* eslint-disable local-rules/no-uncategorized-errors */
 import { sanitizeError, cleanPaths } from './sanitize';
 
 describe(`Errors Helpers`, () => {
   describe(`sanitizeError`, () => {
+    it(`Sanitizes ansi codes in error`, () => {
+      const errorMessage = `\u001B[4mStorybook\u001B[0m`;
+      let e: any;
+      try {
+        throw new Error(errorMessage);
+      } catch (error) {
+        e = error;
+      }
+
+      const sanitizedError = sanitizeError(e);
+
+      expect(sanitizedError.message).toEqual('Storybook');
+      expect(sanitizedError.stack).toContain('Error: Storybook');
+    });
+
     it(`Sanitizes current path from error stacktraces`, () => {
       const errorMessage = `this is a test`;
       let e: any;
diff --git a/code/lib/telemetry/src/sanitize.ts b/code/lib/telemetry/src/sanitize.ts
index 4c68ed50db94..a611dbea1a13 100644
--- a/code/lib/telemetry/src/sanitize.ts
+++ b/code/lib/telemetry/src/sanitize.ts
@@ -12,6 +12,11 @@ function regexpEscape(str: string): string {
   return str.replace(/[-[/{}()*+?.\\^$|]/g, `\\$&`);
 }
 
+export function removeAnsiEscapeCodes(input: string): string {
+  // eslint-disable-next-line no-control-regex
+  return input.replace(/\u001B\[[0-9;]*m/g, '');
+}
+
 export function cleanPaths(str: string, separator: string = sep): string {
   if (!str) return str;
 
@@ -35,7 +40,15 @@ export function cleanPaths(str: string, separator: string = sep): string {
 export function sanitizeError(error: Error, pathSeparator: string = sep) {
   try {
     // Hack because Node
-    error = JSON.parse(JSON.stringify(error, Object.getOwnPropertyNames(error)));
+    error = JSON.parse(
+      JSON.stringify(error, [...Object.getOwnPropertyNames(error), 'message', 'name'])
+    );
+    if (error.message) {
+      error.message = removeAnsiEscapeCodes(error.message);
+    }
+    if (error.stack) {
+      error.stack = removeAnsiEscapeCodes(error.stack);
+    }
 
     // Removes all user paths
     const errorString = cleanPaths(JSON.stringify(error), pathSeparator);

From 507516571bdf628c944632e78c136d859c7ee68e Mon Sep 17 00:00:00 2001
From: Jeppe Reinhold 
Date: Thu, 31 Aug 2023 12:51:27 +0200
Subject: [PATCH 093/312] improve readability of publish script

---
 .github/workflows/publish.yml | 31 +++++++++++++++----------------
 1 file changed, 15 insertions(+), 16 deletions(-)

diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml
index c31ef7c6a0d3..4f71006b7633 100644
--- a/.github/workflows/publish.yml
+++ b/.github/workflows/publish.yml
@@ -110,7 +110,6 @@ jobs:
         id: target
         run: echo "target=${{ github.ref_name == 'next-release' && 'next' || 'main' }}" >> $GITHUB_OUTPUT
 
-        # TODO: ensure all of this logic works if a release from next targets latest-release. steps.targets.outputs?
       - name: Get changelog for ${{ steps.version.outputs.current-version }}
         if: steps.publish-needed.outputs.published == 'false'
         id: changelog
@@ -122,13 +121,11 @@ jobs:
         run: git fetch --tags origin
 
       # when this is a patch release from main, label any patch PRs included in the release
-      # when this is a stable release from next, label ALL patch PRs found, as they will per definition be "patched" now
-      # TODO: this won't work anymore for releases from next to latest-release
       - name: Label patch PRs as picked
-        if: github.ref_name == 'latest-release' || (steps.publish-needed.outputs.published == 'false' && steps.target.outputs.target == 'next' && !steps.is-prerelease.outputs.prerelease)
+        if: github.ref_name == 'latest-release'
         env:
           GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-        run: yarn release:label-patches ${{ steps.target.outputs.target == 'next' && '--all' || '' }}
+        run: yarn release:label-patches
 
       - name: Create GitHub Release
         if: steps.publish-needed.outputs.published == 'false'
@@ -159,7 +156,7 @@ jobs:
       # we then ensure here that next is bumped to 7.5.0 - without releasing it
       # if this is a hotfix release bumping main to 7.3.1, next will not be touched because it's already ahead
       - name: Ensure `next` is a minor version ahead of `main`
-        if: github.ref_name == 'latest-release'
+        if: steps.target.outputs.target == 'main'
         run: |
           git checkout next
           git pull
@@ -168,19 +165,21 @@ jobs:
           VERSION_ON_NEXT=$(echo $CODE_PKG_JSON | jq --raw-output '.version')
           VERSION_ON_MAIN="${{ steps.version.outputs.current-version }}"
 
-          # check if next is behind current version
-          if NEXT_IS_BEHIND=$(npx semver --include-prerelease --range "<$VERSION_ON_MAIN" "$VERSION_ON_NEXT" 2>/dev/null); then
-            # temporarily set the version on next to be the same as main...
-            echo "$CODE_PKG_JSON" | jq --arg version "$VERSION_ON_MAIN" '.version = $version' > ../code/package.json
-            # ... then bump it by one minor
-            yarn release:version --release-type minor
-            git add ..
-            git commit -m "Bump next to be one minor ahead of main [skip ci]"
-            git push origin next
+          # skip if next is already ahead of main
+          if NEXT_IS_AHEAD=$(npx semver --include-prerelease --range ">=$VERSION_ON_MAIN" "$VERSION_ON_NEXT" 2>/dev/null); then
+            return
           fi
 
+          # temporarily set the version on next to be the same as main...
+          echo "$CODE_PKG_JSON" | jq --arg version "$VERSION_ON_MAIN" '.version = $version' > ../code/package.json
+          # ... then bump it by one minor
+          yarn release:version --release-type minor
+          git add ..
+          git commit -m "Bump next to be one minor ahead of main [skip ci]"
+          git push origin next
+
       - name: Sync CHANGELOG.md from `main` to `next`
-        if: github.ref_name == 'latest-release'
+        if: steps.target.outputs.target == 'main'
         working-directory: .
         run: |
           git fetch origin next

From 44e988cd10aac138cf5da37a9335618e3b68935e Mon Sep 17 00:00:00 2001
From: Jeppe Reinhold 
Date: Thu, 31 Aug 2023 12:53:37 +0200
Subject: [PATCH 094/312] pul all release workflows in same concurrency group

---
 .github/workflows/prepare-hotfix-release.yml | 4 ++--
 .github/workflows/prepare-next-release.yml   | 4 ++--
 .github/workflows/publish.yml                | 3 ++-
 3 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/.github/workflows/prepare-hotfix-release.yml b/.github/workflows/prepare-hotfix-release.yml
index 2a331fb5f3ea..83109bcf52ca 100644
--- a/.github/workflows/prepare-hotfix-release.yml
+++ b/.github/workflows/prepare-hotfix-release.yml
@@ -12,8 +12,8 @@ env:
   PUPPETEER_SKIP_CHROMIUM_DOWNLOAD: 1
 
 concurrency:
-  group: ${{ github.workflow }}
-  cancel-in-progress: true
+  group: release-group
+  cancel-in-progress: false
 
 jobs:
   prepare-hotfix-pull-request:
diff --git a/.github/workflows/prepare-next-release.yml b/.github/workflows/prepare-next-release.yml
index ad79b5f1b3fe..4add96125d3d 100644
--- a/.github/workflows/prepare-next-release.yml
+++ b/.github/workflows/prepare-next-release.yml
@@ -30,8 +30,8 @@ env:
   PUPPETEER_SKIP_CHROMIUM_DOWNLOAD: 1
 
 concurrency:
-  group: ${{ github.workflow }}
-  cancel-in-progress: true
+  group: release-group
+  cancel-in-progress: false
 
 jobs:
   prepare-next-pull-request:
diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml
index 4f71006b7633..f2ee9cbc12a2 100644
--- a/.github/workflows/publish.yml
+++ b/.github/workflows/publish.yml
@@ -16,7 +16,8 @@ permissions:
   pull-requests: write
 
 concurrency:
-  group: ${{ github.workflow }}-${{ github.ref_name }}
+  group: release-group
+  cancel-in-progress: false
 
 jobs:
   publish:

From e2e9c24ba9c454c6fcfc8c5958ce1b65ad9a07e3 Mon Sep 17 00:00:00 2001
From: Jeppe Reinhold 
Date: Thu, 31 Aug 2023 15:03:03 +0200
Subject: [PATCH 095/312] use node 18 to generate angular sandboxes

---
 .github/workflows/generate-sandboxes-main.yml | 57 -------------------
 ...dboxes-next.yml => generate-sandboxes.yml} | 25 ++++++--
 scripts/sandbox/generate.ts                   | 25 +++++++-
 3 files changed, 42 insertions(+), 65 deletions(-)
 delete mode 100644 .github/workflows/generate-sandboxes-main.yml
 rename .github/workflows/{generate-sandboxes-next.yml => generate-sandboxes.yml} (69%)

diff --git a/.github/workflows/generate-sandboxes-main.yml b/.github/workflows/generate-sandboxes-main.yml
deleted file mode 100644
index 66cd1b800d37..000000000000
--- a/.github/workflows/generate-sandboxes-main.yml
+++ /dev/null
@@ -1,57 +0,0 @@
-name: Generate and push sandboxes (main)
-
-on:
-  schedule:
-    - cron: '2 2 */1 * *'
-  workflow_dispatch:
-  # To test fixes on push rather than wait for the scheduling, do the following:
-  # 1. Uncomment the lines below and add your branch.
-  # push:
-  #   branches:
-  #     - 
-  # 2. change the "ref" value to  in the actions/checkout step below.
-  # 3. πŸ‘‰ DON'T FORGET TO UNDO THE VALUES BACK TO `main` BEFORE YOU MERGE YOUR CHANGES!
-
-jobs:
-  generate:
-    runs-on: ubuntu-latest
-    env:
-      YARN_ENABLE_IMMUTABLE_INSTALLS: false
-      CLEANUP_SANDBOX_NODE_MODULES: true
-    steps:
-      - uses: actions/setup-node@v3
-        with:
-          node-version: 16
-      - uses: actions/checkout@v3
-        with:
-          ref: main
-      - name: Setup git user
-        run: |
-          git config --global user.name "Storybook Bot"
-          git config --global user.email "bot@storybook.js.org"
-      - name: Install dependencies
-        run: node ./scripts/check-dependencies.js
-      - name: Compile Storybook libraries
-        run: yarn task --task compile --start-from=auto --no-link
-      - name: Publishing to local registry
-        run: yarn local-registry --publish
-        working-directory: ./code
-      - name: Running local registry
-        run: yarn local-registry --open &
-        working-directory: ./code
-      - name: Wait for registry
-        run: yarn wait-on http://localhost:6001
-        working-directory: ./code
-      - name: Generate
-        run: yarn generate-sandboxes --local-registry
-        working-directory: ./code
-      - name: Publish
-        run: yarn publish-sandboxes --remote=https://storybook-bot:${{ secrets.PAT_STORYBOOK_BOT}}@github.com/storybookjs/sandboxes.git --push --branch=main
-        working-directory: ./code
-      - name: The job has failed
-        if: ${{ failure() || cancelled() }}
-        env:
-          DISCORD_WEBHOOK: ${{ secrets.DISCORD_MONITORING_URL }}
-        uses: Ilshidur/action-discord@master
-        with:
-          args: 'The generation of sandboxes in the **main** branch has failed. [View Run](https://github.com/${{ github.repository }}/actions/runs/${{ github.run_id }})'
diff --git a/.github/workflows/generate-sandboxes-next.yml b/.github/workflows/generate-sandboxes.yml
similarity index 69%
rename from .github/workflows/generate-sandboxes-next.yml
rename to .github/workflows/generate-sandboxes.yml
index f22e7cb4a50b..c37ecb643fa8 100644
--- a/.github/workflows/generate-sandboxes-next.yml
+++ b/.github/workflows/generate-sandboxes.yml
@@ -1,4 +1,4 @@
-name: Generate and push sandboxes (next)
+name: Generate and push sandboxes
 
 on:
   schedule:
@@ -18,13 +18,26 @@ jobs:
     env:
       YARN_ENABLE_IMMUTABLE_INSTALLS: false
       CLEANUP_SANDBOX_NODE_MODULES: true
+    strategy:
+      matrix:
+        node_version:
+          - 16
+          - 18
+        branch:
+          - main
+          - next
+        include:
+          - node_version: 16
+            excludeTemplates: 'angular-cli/prerelease'
+          - node_version: 18
+            includeTemplates: 'angular-cli/prerelease'
     steps:
       - uses: actions/setup-node@v3
         with:
-          node-version: 16
+          node-version: ${{ matrix.node_version }}
       - uses: actions/checkout@v3
         with:
-          ref: next
+          ref: ${{ matrix.branch }}
       - name: Setup git user
         run: |
           git config --global user.name "Storybook Bot"
@@ -43,10 +56,10 @@ jobs:
         run: yarn wait-on http://localhost:6001
         working-directory: ./code
       - name: Generate
-        run: yarn generate-sandboxes --local-registry
+        run: yarn generate-sandboxes --local-registry --includeTemplates "${{matrix.includeTemplates}}" --excludeTemplates "${{matrix.excludeTemplates}}"
         working-directory: ./code
       - name: Publish
-        run: yarn publish-sandboxes --remote=https://storybook-bot:${{ secrets.PAT_STORYBOOK_BOT}}@github.com/storybookjs/sandboxes.git --push --branch=next
+        run: yarn publish-sandboxes --remote=https://storybook-bot:${{ secrets.PAT_STORYBOOK_BOT}}@github.com/storybookjs/sandboxes.git --push --branch=${{ matrix.branch }}}
         working-directory: ./code
       - name: The job has failed
         if: ${{ failure() || cancelled() }}
@@ -54,4 +67,4 @@ jobs:
           DISCORD_WEBHOOK: ${{ secrets.DISCORD_MONITORING_URL }}
         uses: Ilshidur/action-discord@master
         with:
-          args: 'The generation of sandboxes in the **next** branch has failed. [View Run](https://github.com/${{ github.repository }}/actions/runs/${{ github.run_id }})'
+          args: 'The generation of sandboxes in the **${{ matrix.branch }}** branch has failed. [View Run](https://github.com/${{ github.repository }}/actions/runs/${{ github.run_id }})'
diff --git a/scripts/sandbox/generate.ts b/scripts/sandbox/generate.ts
index b74ae5a28d03..6c2455d0d937 100755
--- a/scripts/sandbox/generate.ts
+++ b/scripts/sandbox/generate.ts
@@ -207,6 +207,17 @@ export const options = createOptions({
     description: 'Which template would you like to create?',
     values: Object.keys(sandboxTemplates),
   },
+  includeTemplates: {
+    type: 'string',
+    description: 'Comma-delimited list of templates to include',
+    promptType: false,
+  },
+  excludeTemplates: {
+    type: 'string',
+    description:
+      'Comma-delimited list of templates to exclude. Takes precedence over --includedTemplates',
+    promptType: false,
+  },
   localRegistry: {
     type: 'boolean',
     description: 'Generate reproduction from local registry?',
@@ -221,6 +232,8 @@ export const options = createOptions({
 
 export const generate = async ({
   template,
+  includeTemplates,
+  excludeTemplates,
   localRegistry,
   debug,
 }: OptionValues) => {
@@ -233,8 +246,11 @@ export const generate = async ({
       if (template) {
         return dirName === template;
       }
-
-      return true;
+      let include = includeTemplates ? includeTemplates.split(',').includes(dirName) : true;
+      if (excludeTemplates && include) {
+        include = !excludeTemplates.split(',').includes(dirName);
+      }
+      return include;
     });
 
   await runGenerators(generatorConfigs, localRegistry, debug);
@@ -244,6 +260,11 @@ if (require.main === module) {
   program
     .description('Generate sandboxes from a set of possible templates')
     .option('--template