From add44fcc6aaa1860b2eb20e2a6a46663fad3ac0c Mon Sep 17 00:00:00 2001 From: Jeppe Reinhold Date: Tue, 28 Nov 2023 09:54:54 +0100 Subject: [PATCH 001/136] dynamic import vite to force ESM mode --- code/frameworks/svelte-vite/src/plugins/svelte-docgen.ts | 5 +++-- code/frameworks/svelte-vite/src/preset.ts | 2 +- .../sveltekit/src/plugins/mock-sveltekit-stores.ts | 5 +++-- code/frameworks/sveltekit/src/preset.ts | 2 +- code/frameworks/vue-vite/src/plugins/vue-docgen.ts | 4 ++-- code/frameworks/vue-vite/src/preset.ts | 2 +- code/frameworks/vue3-vite/src/plugins/vue-docgen.ts | 4 ++-- code/frameworks/vue3-vite/src/preset.ts | 5 +++-- 8 files changed, 16 insertions(+), 13 deletions(-) diff --git a/code/frameworks/svelte-vite/src/plugins/svelte-docgen.ts b/code/frameworks/svelte-vite/src/plugins/svelte-docgen.ts index 5ee6f7e53ce..1e33174e11a 100644 --- a/code/frameworks/svelte-vite/src/plugins/svelte-docgen.ts +++ b/code/frameworks/svelte-vite/src/plugins/svelte-docgen.ts @@ -6,7 +6,6 @@ import svelteDoc from 'sveltedoc-parser'; import type { SvelteComponentDoc, SvelteParserOptions } from 'sveltedoc-parser'; import { logger } from '@storybook/node-logger'; import { preprocess } from 'svelte/compiler'; -import { createFilter } from 'vite'; import { replace, typescript } from 'svelte-preprocess'; /* @@ -59,10 +58,12 @@ function getNameFromFilename(filename: string) { return base[0].toUpperCase() + base.slice(1); } -export function svelteDocgen(svelteOptions: Record = {}): PluginOption { +export async function svelteDocgen(svelteOptions: Record = {}): Promise { const cwd = process.cwd(); const { preprocess: preprocessOptions, logDocgen = false } = svelteOptions; const include = /\.(svelte)$/; + const { createFilter } = await import('vite'); + const filter = createFilter(include); let docPreprocessOptions: Parameters[1] | undefined; diff --git a/code/frameworks/svelte-vite/src/preset.ts b/code/frameworks/svelte-vite/src/preset.ts index 220812cf7c5..2abc47c9d8b 100644 --- a/code/frameworks/svelte-vite/src/preset.ts +++ b/code/frameworks/svelte-vite/src/preset.ts @@ -26,7 +26,7 @@ export const viteFinal: NonNullable = async (confi } // Add docgen plugin - plugins.push(svelteDocgen(svelteConfig)); + plugins.push(await svelteDocgen(svelteConfig)); await handleSvelteKit(plugins, options); diff --git a/code/frameworks/sveltekit/src/plugins/mock-sveltekit-stores.ts b/code/frameworks/sveltekit/src/plugins/mock-sveltekit-stores.ts index 873ce8bf351..62031b412bc 100644 --- a/code/frameworks/sveltekit/src/plugins/mock-sveltekit-stores.ts +++ b/code/frameworks/sveltekit/src/plugins/mock-sveltekit-stores.ts @@ -1,7 +1,8 @@ import { resolve } from 'node:path'; -import { mergeConfig, type Plugin } from 'vite'; +import type { Plugin } from 'vite'; -export function mockSveltekitStores() { +export async function mockSveltekitStores() { + const { mergeConfig } = await import('vite'); return { name: 'storybook:sveltekit-mock-stores', enforce: 'post', diff --git a/code/frameworks/sveltekit/src/preset.ts b/code/frameworks/sveltekit/src/preset.ts index 45cfe7d0a6d..bef848c9250 100644 --- a/code/frameworks/sveltekit/src/preset.ts +++ b/code/frameworks/sveltekit/src/preset.ts @@ -32,7 +32,7 @@ export const viteFinal: NonNullable = async (confi ]) ) .concat(configOverrides()) - .concat(mockSveltekitStores()); + .concat(await mockSveltekitStores()); return { ...baseConfig, plugins }; }; diff --git a/code/frameworks/vue-vite/src/plugins/vue-docgen.ts b/code/frameworks/vue-vite/src/plugins/vue-docgen.ts index e80ca52d60c..4fb6107e5bc 100644 --- a/code/frameworks/vue-vite/src/plugins/vue-docgen.ts +++ b/code/frameworks/vue-vite/src/plugins/vue-docgen.ts @@ -1,10 +1,10 @@ import { parse } from 'vue-docgen-api'; import type { PluginOption } from 'vite'; -import { createFilter } from 'vite'; import MagicString from 'magic-string'; -export function vueDocgen(): PluginOption { +export async function vueDocgen(): Promise { const include = /\.(vue)$/; + const { createFilter } = await import('vite'); const filter = createFilter(include); return { diff --git a/code/frameworks/vue-vite/src/preset.ts b/code/frameworks/vue-vite/src/preset.ts index 3030587afaa..598b325d1b0 100644 --- a/code/frameworks/vue-vite/src/preset.ts +++ b/code/frameworks/vue-vite/src/preset.ts @@ -1,6 +1,5 @@ import { dirname, join } from 'path'; import type { PresetProperty } from '@storybook/types'; -import { mergeConfig } from 'vite'; import type { StorybookConfig } from './types'; import { vueDocgen } from './plugins/vue-docgen'; @@ -21,6 +20,7 @@ export const core: PresetProperty<'core', StorybookConfig> = async (config, opti }; export const viteFinal: StorybookConfig['viteFinal'] = async (config, { presets }) => { + const { mergeConfig } = await import('vite'); return mergeConfig(config, { plugins: [vueDocgen()], resolve: { diff --git a/code/frameworks/vue3-vite/src/plugins/vue-docgen.ts b/code/frameworks/vue3-vite/src/plugins/vue-docgen.ts index 6bed6a1fed9..f8008fc3a4b 100644 --- a/code/frameworks/vue3-vite/src/plugins/vue-docgen.ts +++ b/code/frameworks/vue3-vite/src/plugins/vue-docgen.ts @@ -1,10 +1,10 @@ import { parse } from 'vue-docgen-api'; import type { PluginOption } from 'vite'; -import { createFilter } from 'vite'; import MagicString from 'magic-string'; -export function vueDocgen(): PluginOption { +export async function vueDocgen(): Promise { const include = /\.(vue)$/; + const { createFilter } = await import('vite'); const filter = createFilter(include); return { diff --git a/code/frameworks/vue3-vite/src/preset.ts b/code/frameworks/vue3-vite/src/preset.ts index b987f0381c0..bc9fd7752d1 100644 --- a/code/frameworks/vue3-vite/src/preset.ts +++ b/code/frameworks/vue3-vite/src/preset.ts @@ -1,6 +1,6 @@ import { hasVitePlugins } from '@storybook/builder-vite'; import type { PresetProperty } from '@storybook/types'; -import { mergeConfig, type PluginOption } from 'vite'; +import type { PluginOption } from 'vite'; import { dirname, join } from 'path'; import type { StorybookConfig } from './types'; import { vueDocgen } from './plugins/vue-docgen'; @@ -23,8 +23,9 @@ export const viteFinal: StorybookConfig['viteFinal'] = async (config, { presets } // Add docgen plugin - plugins.push(vueDocgen()); + plugins.push(await vueDocgen()); + const { mergeConfig } = await import('vite'); return mergeConfig(config, { plugins, resolve: { From 78f1c3569f55c1500aa6ab96ab45dddabd3fcaf5 Mon Sep 17 00:00:00 2001 From: Jeppe Reinhold Date: Tue, 28 Nov 2023 09:56:48 +0100 Subject: [PATCH 002/136] improve readability of list of sandbox templates --- scripts/utils/options.ts | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/scripts/utils/options.ts b/scripts/utils/options.ts index f5340c037a8..b6e7c930b9f 100644 --- a/scripts/utils/options.ts +++ b/scripts/utils/options.ts @@ -140,11 +140,12 @@ export function getOptions( const checkStringValue = (raw: string) => { if (option.values && !option.values.includes(raw)) { - const possibleOptions = chalk.cyan(option.values.join(', ')); + const possibleOptions = chalk.cyan(option.values.join('\n')); throw new Error( dedent`Unexpected value '${chalk.yellow(raw)}' for option '${chalk.magenta(key)}'. - These are the possible options: ${possibleOptions}\n\n` + These are the possible options: + ${possibleOptions}\n\n` ); } return raw; From 3fc9be5f3f03a54f535845427c597aa92676b53c Mon Sep 17 00:00:00 2001 From: Jeppe Reinhold Date: Tue, 28 Nov 2023 10:34:26 +0100 Subject: [PATCH 003/136] add eslint rule to enforce dynamic vite imports --- code/.eslintrc.js | 12 ++++++++++++ code/builders/builder-vite/src/vite-config.test.ts | 1 + .../sveltekit/src/plugins/config-overrides.ts | 2 +- code/ui/.storybook/main.ts | 1 + 4 files changed, 15 insertions(+), 1 deletion(-) diff --git a/code/.eslintrc.js b/code/.eslintrc.js index 953ccaf79d2..ab453987a3e 100644 --- a/code/.eslintrc.js +++ b/code/.eslintrc.js @@ -34,6 +34,18 @@ module.exports = { allowIndexSignaturePropertyAccess: true, }, ], + '@typescript-eslint/no-restricted-imports': [ + 'error', + { + paths: [ + { + name: 'vite', + message: 'Please dynamically import from vite instead, to force the use of ESM', + allowTypeImports: true, + }, + ], + }, + ], }, overrides: [ { diff --git a/code/builders/builder-vite/src/vite-config.test.ts b/code/builders/builder-vite/src/vite-config.test.ts index c4f2f212be4..a373bf7dce1 100644 --- a/code/builders/builder-vite/src/vite-config.test.ts +++ b/code/builders/builder-vite/src/vite-config.test.ts @@ -1,4 +1,5 @@ import type { Options, Presets } from '@storybook/types'; +// eslint-disable-next-line @typescript-eslint/no-restricted-imports import { loadConfigFromFile } from 'vite'; import { commonConfig } from './vite-config'; diff --git a/code/frameworks/sveltekit/src/plugins/config-overrides.ts b/code/frameworks/sveltekit/src/plugins/config-overrides.ts index d132764d6e5..db5294a1324 100644 --- a/code/frameworks/sveltekit/src/plugins/config-overrides.ts +++ b/code/frameworks/sveltekit/src/plugins/config-overrides.ts @@ -1,4 +1,4 @@ -import { type Plugin } from 'vite'; +import type { Plugin } from 'vite'; export function configOverrides() { return { diff --git a/code/ui/.storybook/main.ts b/code/ui/.storybook/main.ts index 4800dda1e18..a15c3a4fd98 100644 --- a/code/ui/.storybook/main.ts +++ b/code/ui/.storybook/main.ts @@ -1,5 +1,6 @@ import path from 'path'; import pluginTurbosnap from 'vite-plugin-turbosnap'; +// eslint-disable-next-line @typescript-eslint/no-restricted-imports import { mergeConfig } from 'vite'; import type { StorybookConfig } from '../../frameworks/react-vite'; From 6f48577909205c3fa35fb030316d17eb243e7198 Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Fri, 15 Dec 2023 13:59:14 +0100 Subject: [PATCH 004/136] Remove action args TS magic in favor of explicit fn args --- code/renderers/react/src/public-types.test.tsx | 15 +++++++++------ code/renderers/react/src/public-types.ts | 13 +------------ 2 files changed, 10 insertions(+), 18 deletions(-) diff --git a/code/renderers/react/src/public-types.test.tsx b/code/renderers/react/src/public-types.test.tsx index 270552dce5b..a9b8715bec8 100644 --- a/code/renderers/react/src/public-types.test.tsx +++ b/code/renderers/react/src/public-types.test.tsx @@ -87,7 +87,7 @@ describe('Args can be provided in multiple ways', () => { }); }); -test('✅ All void functions are optional', () => { +test('✅ Void functions are not changed', () => { interface CmpProps { label: string; disabled: boolean; @@ -105,13 +105,16 @@ test('✅ All void functions are optional', () => { }); const Basic: StoryObj = { - args: { disabled: false, onLoading: () =>
Loading...
}, + args: { + disabled: false, + onLoading: () =>
Loading...
, + onKeyDown: fn(), + onClick: fn(), + submitAction: fn(), + }, }; - type Expected = ReactStory< - CmpProps, - SetOptional - >; + type Expected = ReactStory>; expectTypeOf(Basic).toEqualTypeOf(); }); diff --git a/code/renderers/react/src/public-types.ts b/code/renderers/react/src/public-types.ts index 95ad7111a3e..838daf868d2 100644 --- a/code/renderers/react/src/public-types.ts +++ b/code/renderers/react/src/public-types.ts @@ -57,7 +57,7 @@ export type StoryObj = [TMetaOrCmpOrArgs] extends [ ? StoryAnnotations< ReactRenderer, AddMocks, - SetOptional)> + SetOptional > : never : TMetaOrCmpOrArgs extends ComponentType @@ -74,17 +74,6 @@ type AddMocks = Simplify<{ : TArgs[T]; }>; -type ActionArgs = { - // This can be read as: filter TArgs on functions where we can assign a void function to that function. - // The docs addon argsEnhancers can only safely provide a default value for void functions. - // Other kind of required functions should be provided by the user. - [P in keyof TArgs as TArgs[P] extends (...args: any[]) => any - ? ((...args: any[]) => void) extends TArgs[P] - ? P - : never - : never]: TArgs[P]; -}; - /** * @deprecated Use `Meta` instead, e.g. ComponentMeta -> Meta. * From a4edb55d28981f767e8beccc506679b1676a4936 Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Fri, 15 Dec 2023 14:27:47 +0100 Subject: [PATCH 005/136] Remove addSpies as implicit actions can not be used as spy anymore in 8.0. Explicit spies should be used instead. --- code/addons/interactions/src/preview.ts | 76 +------------------------ 1 file changed, 1 insertion(+), 75 deletions(-) diff --git a/code/addons/interactions/src/preview.ts b/code/addons/interactions/src/preview.ts index 54c7c18faab..5ef2520b6b7 100644 --- a/code/addons/interactions/src/preview.ts +++ b/code/addons/interactions/src/preview.ts @@ -1,79 +1,5 @@ -/* eslint-disable no-param-reassign,no-underscore-dangle */ -/// - -import { addons } from '@storybook/preview-api'; -import { global } from '@storybook/global'; -import { FORCE_REMOUNT, STORY_RENDER_PHASE_CHANGED } from '@storybook/core-events'; -import type { - Renderer, - ArgsEnhancer, - PlayFunction, - PlayFunctionContext, - StepLabel, - Args, -} from '@storybook/types'; +import type { PlayFunction, PlayFunctionContext, StepLabel } from '@storybook/types'; import { instrument } from '@storybook/instrumenter'; -import { ModuleMocker } from 'jest-mock'; - -const JestMock = new ModuleMocker(global); -const fn = JestMock.fn.bind(JestMock); - -// Aliasing `fn` to `action` here, so we get a more descriptive label in the UI. -const { action } = instrument({ action: fn }, { retain: true }); -const channel = addons.getChannel(); -const spies: any[] = []; - -channel.on(FORCE_REMOUNT, () => spies.forEach((mock) => mock?.mockClear?.())); -channel.on(STORY_RENDER_PHASE_CHANGED, ({ newPhase }) => { - if (newPhase === 'loading') spies.forEach((mock) => mock?.mockClear?.()); -}); - -const addSpies = (id: string, val: any, key?: string): any => { - try { - if (Object.prototype.toString.call(val) === '[object Object]') { - // We have to mutate the original object for this to survive HMR. - // eslint-disable-next-line no-restricted-syntax - for (const [k, v] of Object.entries(val)) val[k] = addSpies(id, v, k); - return val; - } - if (Array.isArray(val)) { - return val.map((item, index) => addSpies(id, item, `${key}[${index}]`)); - } - if (typeof val === 'function' && val.isAction && !val._isMockFunction) { - Object.defineProperty(val, 'name', { value: key, writable: false }); - Object.defineProperty(val, '__storyId__', { value: id, writable: false }); - const spy = action(val); - spies.push(spy); - return spy; - } - } catch (e) { - // ignore - } - return val; -}; - -const addActionsFromArgTypes: ArgsEnhancer = ({ id, initialArgs }) => - addSpies(id, initialArgs); - -const instrumentSpies: ArgsEnhancer = ({ initialArgs }) => { - const argTypesWithAction = Object.entries(initialArgs).filter( - ([, value]) => - typeof value === 'function' && - '_isMockFunction' in value && - value._isMockFunction && - !value._instrumented - ); - - return argTypesWithAction.reduce((acc, [key, value]) => { - const instrumented = instrument({ [key]: () => value }, { retain: true })[key]; - acc[key] = instrumented(); - // this enhancer is being called multiple times - value._instrumented = true; - return acc; - }, {} as Args); -}; - -export const argsEnhancers = [addActionsFromArgTypes, instrumentSpies]; export const { step: runStep } = instrument( { From 00bc7f8a278b15f39f0a48862288f882e993f19f Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Fri, 15 Dec 2023 14:34:18 +0100 Subject: [PATCH 006/136] Turn disallowImplicitActionsInRenderV8 feature flag on by default --- code/lib/core-server/src/presets/common-preset.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/lib/core-server/src/presets/common-preset.ts b/code/lib/core-server/src/presets/common-preset.ts index f94a6fb365e..b243ad3d67c 100644 --- a/code/lib/core-server/src/presets/common-preset.ts +++ b/code/lib/core-server/src/presets/common-preset.ts @@ -192,7 +192,7 @@ export const features: PresetProperty<'features'> = async (existing) => ({ storyStoreV7: true, argTypeTargetsV7: true, legacyDecoratorFileOrder: false, - disallowImplicitActionsInRenderV8: false, + disallowImplicitActionsInRenderV8: true, }); export const csfIndexer: Indexer = { From d1c850a215d762584c87b4ce116db945f90bfcf4 Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Fri, 15 Dec 2023 14:36:13 +0100 Subject: [PATCH 007/136] Remove argTypesRegex from sb init --- code/lib/cli/src/generators/configure.test.ts | 2 -- code/lib/cli/src/generators/configure.ts | 1 - code/lib/csf-tools/src/getStorySortParameter.test.ts | 2 -- 3 files changed, 5 deletions(-) diff --git a/code/lib/cli/src/generators/configure.test.ts b/code/lib/cli/src/generators/configure.test.ts index 42af44a893b..ea00391e2e3 100644 --- a/code/lib/cli/src/generators/configure.test.ts +++ b/code/lib/cli/src/generators/configure.test.ts @@ -158,7 +158,6 @@ describe('configurePreview', () => { const preview: Preview = { parameters: { - actions: { argTypesRegex: '^on[A-Z].*' }, controls: { matchers: { color: /(background|color)$/i, @@ -209,7 +208,6 @@ describe('configurePreview', () => { const preview: Preview = { parameters: { - actions: { argTypesRegex: '^on[A-Z].*' }, controls: { matchers: { color: /(background|color)$/i, diff --git a/code/lib/cli/src/generators/configure.ts b/code/lib/cli/src/generators/configure.ts index bbc9992be1e..38cd265df83 100644 --- a/code/lib/cli/src/generators/configure.ts +++ b/code/lib/cli/src/generators/configure.ts @@ -152,7 +152,6 @@ export async function configurePreview(options: ConfigurePreviewOptions) { : '' }const preview${isTypescript ? ': Preview' : ''} = { parameters: { - actions: { argTypesRegex: '^on[A-Z].*' }, controls: { matchers: { color: /(background|color)$/i, diff --git a/code/lib/csf-tools/src/getStorySortParameter.test.ts b/code/lib/csf-tools/src/getStorySortParameter.test.ts index d62c21cc985..1cd44f4b6ac 100644 --- a/code/lib/csf-tools/src/getStorySortParameter.test.ts +++ b/code/lib/csf-tools/src/getStorySortParameter.test.ts @@ -291,7 +291,6 @@ describe('getStorySortParameter', () => { expect( getStorySortParameter(dedent` const config = { - actions: { argTypesRegex: '^on[A-Z].*' }, controls: { matchers: { color: /(background|color)$/i, @@ -309,7 +308,6 @@ describe('getStorySortParameter', () => { expect( getStorySortParameter(dedent` const parameters = { - actions: { argTypesRegex: '^on[A-Z].*' }, controls: { matchers: { color: /(background|color)$/i, From a87e90994c29f7e70b7bd5194eeefa4b291d0ee1 Mon Sep 17 00:00:00 2001 From: jonniebigodes Date: Fri, 15 Dec 2023 21:19:27 +0000 Subject: [PATCH 008/136] Docs: Documentation updates for known limitations --- docs/api/doc-block-controls.md | 2 +- docs/api/doc-block-source.md | 12 ++++++++++++ docs/api/doc-block-story.md | 6 ++++++ docs/writing-docs/autodocs.md | 4 ++++ docs/writing-docs/mdx.md | 4 ++++ 5 files changed, 27 insertions(+), 1 deletion(-) diff --git a/docs/api/doc-block-controls.md b/docs/api/doc-block-controls.md index d199c1f3ec9..0320d3e4eba 100644 --- a/docs/api/doc-block-controls.md +++ b/docs/api/doc-block-controls.md @@ -31,7 +31,7 @@ import * as ButtonStories from './Button.stories' -The Controls doc block will only have functioning UI controls if you have also installed and registered [`@storybook/addon-controls`](../essentials/controls.md) (included in [`@storybook/addon-essentials`](../essentials/index.md)). +The Controls doc block will only have functioning UI controls if you have also installed and registered [`@storybook/addon-controls`](../essentials/controls.md) (included in [`@storybook/addon-essentials`](../essentials/index.md)) and haven't turned off inline stories with the [`inlineStories`](./doc-block-story.md#inline) configuration option. diff --git a/docs/api/doc-block-source.md b/docs/api/doc-block-source.md index c4a46005043..479a1518e09 100644 --- a/docs/api/doc-block-source.md +++ b/docs/api/doc-block-source.md @@ -98,6 +98,18 @@ Light mode is only supported when the `Source` block is rendered independently. + + +### `excludeDecorators` + +Type: + +Default: `parameters.docs.source.excludeDecorators` + +Determines if [decorators](../writing-stories/decorators.md) are rendered in the source code snippet. + + + ### `format` Type: `boolean | 'dedent' | BuiltInParserName` diff --git a/docs/api/doc-block-story.md b/docs/api/doc-block-story.md index 0a3470429ac..179d683a2f4 100644 --- a/docs/api/doc-block-story.md +++ b/docs/api/doc-block-story.md @@ -96,6 +96,12 @@ Default: `parameters.docs.story.inline` or `true` (for [supported frameworks](.. Determines whether the story is rendered `inline` (in the same browser frame as the other docs content) or in an iframe. + + +Setting the `inline` option to false will prevent the associated [controls](./doc-block-controls.md) from updating the story within the documentation page. This is a known limitation of the current implementation and will be addressed in a future release. + + + ### `meta` Type: CSF file exports diff --git a/docs/writing-docs/autodocs.md b/docs/writing-docs/autodocs.md index 96c42c8ba83..d8452ce4eb7 100644 --- a/docs/writing-docs/autodocs.md +++ b/docs/writing-docs/autodocs.md @@ -286,6 +286,10 @@ Additionally, if you're developing using TypeScript, you may need to update Stor If you're still encountering issues, we recommend reaching out to the community using the default communication channels (e.g., [GitHub discussions](https://github.com/storybookjs/storybook/discussions/new?category=help)). +### The controls are not updating the story within the auto-generated documentation + +If you turned off inline rendering for your stories via the [`inlineStories`](../api/doc-block-story.md) configuration option, you would run into a situation where the associated controls are not updating the story within the documentation page. This is a known limitation of the current implementation and will be addressed in a future release. + #### Learn more about Storybook documentation - Autodocs for creating documentation for your stories diff --git a/docs/writing-docs/mdx.md b/docs/writing-docs/mdx.md index bd31e66374a..ce73db8692f 100644 --- a/docs/writing-docs/mdx.md +++ b/docs/writing-docs/mdx.md @@ -455,6 +455,10 @@ Additionally, if you're working with VSCode, you can add the [MDX extension](htt If you're still encountering issues, we recommend reaching out to the community using the default communication channels (e.g., [GitHub discussions](https://github.com/storybookjs/storybook/discussions/new?category=help)). +### The controls are not updating the story within the MDX documentation page + +If you turned off inline rendering for your stories via the [`inlineStories`](../api/doc-block-story.md) configuration option, you would run into a situation where the associated controls are not updating the story within the documentation page. This is a known limitation of the current implementation and will be addressed in a future release. + #### Learn more about Storybook documentation - [Autodocs](./autodocs.md) for creating documentation for your stories From 62488ecc8f35a50b23d0124f220e5dbe49c8433c Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Tue, 19 Dec 2023 11:37:40 +0100 Subject: [PATCH 009/136] add uniqueness to cacheDir --- .../src/utils/resolve-path-in-sb-cache.ts | 6 ++--- code/lib/core-server/src/build-dev.ts | 25 +++++++++++++------ code/lib/core-server/src/build-static.ts | 8 +++--- code/yarn.lock | 6 ++--- 4 files changed, 27 insertions(+), 18 deletions(-) diff --git a/code/lib/core-common/src/utils/resolve-path-in-sb-cache.ts b/code/lib/core-common/src/utils/resolve-path-in-sb-cache.ts index de88c2e2c00..af7135817af 100644 --- a/code/lib/core-common/src/utils/resolve-path-in-sb-cache.ts +++ b/code/lib/core-common/src/utils/resolve-path-in-sb-cache.ts @@ -9,9 +9,9 @@ import findCacheDirectory from 'find-cache-dir'; * @param fileOrDirectoryName {string} Name of the file or directory * @return {string} Absolute path to the file or directory */ -export function resolvePathInStorybookCache(fileOrDirectoryName: string): string { +export function resolvePathInStorybookCache(fileOrDirectoryName: string, sub = 'default'): string { let cacheDirectory = findCacheDirectory({ name: 'storybook' }); - cacheDirectory ||= path.join(process.cwd(), '.cache/storybook'); + cacheDirectory ||= path.join(process.cwd(), '.cache', 'storybook'); - return path.join(cacheDirectory, fileOrDirectoryName); + return path.join(cacheDirectory, sub, fileOrDirectoryName); } diff --git a/code/lib/core-server/src/build-dev.ts b/code/lib/core-server/src/build-dev.ts index 5e8a0a955c2..cc76cf411e4 100644 --- a/code/lib/core-server/src/build-dev.ts +++ b/code/lib/core-server/src/build-dev.ts @@ -1,5 +1,6 @@ import type { BuilderOptions, CLIOptions, LoadOptions, Options } from '@storybook/types'; import { + getProjectRoot, loadAllPresets, loadMainConfig, resolveAddonName, @@ -10,9 +11,9 @@ import { import prompts from 'prompts'; import invariant from 'tiny-invariant'; import { global } from '@storybook/global'; -import { telemetry } from '@storybook/telemetry'; +import { telemetry, oneWayHash } from '@storybook/telemetry'; -import { join, resolve } from 'path'; +import { join, relative, resolve } from 'path'; import { deprecate } from '@storybook/node-logger'; import dedent from 'ts-dedent'; import { readFile } from 'fs-extra'; @@ -49,17 +50,27 @@ export async function buildDevStandalone( name: 'shouldChangePort', message: `Port ${options.port} is not available. Would you like to run Storybook on port ${port} instead?`, }); - if (!shouldChangePort) process.exit(1); + if (!shouldChangePort) { + process.exit(1); + } + } + + const rootDir = getProjectRoot(); + const configDir = resolve(options.configDir); + const uniqueId = oneWayHash(relative(rootDir, configDir)); + + const cacheOutputDir = resolvePathInStorybookCache('public', uniqueId); + let outputDir = resolve(options.outputDir || cacheOutputDir); + if (options.smokeTest) { + outputDir = cacheOutputDir; } /* eslint-disable no-param-reassign */ options.port = port; options.versionCheck = versionCheck; options.configType = 'DEVELOPMENT'; - options.configDir = resolve(options.configDir); - options.outputDir = options.smokeTest - ? resolvePathInStorybookCache('public') - : resolve(options.outputDir || resolvePathInStorybookCache('public')); + options.configDir = configDir; + options.outputDir = outputDir; options.serverChannelUrl = getServerChannelUrl(port, options); /* eslint-enable no-param-reassign */ diff --git a/code/lib/core-server/src/build-static.ts b/code/lib/core-server/src/build-static.ts index b85932ca246..2bce822caae 100644 --- a/code/lib/core-server/src/build-static.ts +++ b/code/lib/core-server/src/build-static.ts @@ -1,6 +1,6 @@ import chalk from 'chalk'; import { copy, emptyDir, ensureDir } from 'fs-extra'; -import { dirname, isAbsolute, join, resolve } from 'path'; +import { dirname, join, relative, resolve } from 'path'; import { global } from '@storybook/global'; import { deprecate, logger } from '@storybook/node-logger'; import { getPrecedingUpgrade, telemetry } from '@storybook/telemetry'; @@ -45,13 +45,11 @@ export async function buildStaticStandalone(options: BuildStaticStandaloneOption throw new Error("Won't copy root directory. Check your staticDirs!"); } - options.outputDir = isAbsolute(options.outputDir) - ? options.outputDir - : join(process.cwd(), options.outputDir); + options.outputDir = resolve(options.outputDir); options.configDir = resolve(options.configDir); /* eslint-enable no-param-reassign */ - logger.info(chalk`=> Cleaning outputDir: {cyan ${options.outputDir.replace(process.cwd(), '')}}`); + logger.info(chalk`=> Cleaning outputDir: {cyan ${relative(options.outputDir, process.cwd())}}`); if (options.outputDir === '/') { throw new Error("Won't remove directory '/'. Check your outputDir!"); } diff --git a/code/yarn.lock b/code/yarn.lock index c711feb0477..a4f41f0a85e 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -11336,9 +11336,9 @@ __metadata: linkType: hard "caniuse-lite@npm:^1.0.30001406, caniuse-lite@npm:^1.0.30001538, caniuse-lite@npm:^1.0.30001565": - version: 1.0.30001566 - resolution: "caniuse-lite@npm:1.0.30001566" - checksum: cd163075b1a9feaf9c9f657c3551279fcdac471471d67ee57ab2286c7b5480168e6336e359741b469fa40e94716f0f95ec185d87bd57d58894d66d8c21d7db04 + version: 1.0.30001570 + resolution: "caniuse-lite@npm:1.0.30001570" + checksum: e47230d2016edea56e002fa462a5289f697b48dcfbf703fb01aecc6c98ad4ecaf945ab23c253cb7af056c2d05f266e4e4cbebf45132100e2c9367439cb95b95b languageName: node linkType: hard From 0d3c71ee1b599fd4865b4bb6ed4e1c5f0286722d Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Tue, 19 Dec 2023 11:40:22 +0100 Subject: [PATCH 010/136] print relative paths and only print static dirs when they matter --- code/lib/core-server/src/build-static.ts | 2 +- .../src/utils/copy-all-static-files.ts | 28 ++++++++++++++----- 2 files changed, 22 insertions(+), 8 deletions(-) diff --git a/code/lib/core-server/src/build-static.ts b/code/lib/core-server/src/build-static.ts index 2bce822caae..e524aaec7f9 100644 --- a/code/lib/core-server/src/build-static.ts +++ b/code/lib/core-server/src/build-static.ts @@ -49,7 +49,7 @@ export async function buildStaticStandalone(options: BuildStaticStandaloneOption options.configDir = resolve(options.configDir); /* eslint-enable no-param-reassign */ - logger.info(chalk`=> Cleaning outputDir: {cyan ${relative(options.outputDir, process.cwd())}}`); + logger.info(chalk`=> Cleaning outputDir: {cyan ${relative(process.cwd(), options.outputDir)}}`); if (options.outputDir === '/') { throw new Error("Won't remove directory '/'. Check your outputDir!"); } diff --git a/code/lib/core-server/src/utils/copy-all-static-files.ts b/code/lib/core-server/src/utils/copy-all-static-files.ts index 44f7bf12d31..4871e6adb8d 100644 --- a/code/lib/core-server/src/utils/copy-all-static-files.ts +++ b/code/lib/core-server/src/utils/copy-all-static-files.ts @@ -1,6 +1,6 @@ import chalk from 'chalk'; import fs from 'fs-extra'; -import path from 'path'; +import { join, relative } from 'path'; import { logger } from '@storybook/node-logger'; import { getDirectoryFromWorkingDir } from '@storybook/core-common'; import { parseStaticDir } from './server-statics'; @@ -11,11 +11,17 @@ export async function copyAllStaticFiles(staticDirs: any[] | undefined, outputDi staticDirs.map(async (dir) => { try { const { staticDir, staticPath, targetDir } = await parseStaticDir(dir); - const targetPath = path.join(outputDir, targetDir); - logger.info(chalk`=> Copying static files: {cyan ${staticDir}} => {cyan ${targetDir}}`); + const targetPath = join(outputDir, targetDir); + if (!staticDir.includes('node_modules')) { + logger.info( + chalk`=> Copying static files: {cyan ${print(staticDir)}} => {cyan ${print( + targetDir + )}}` + ); + } // Storybook's own files should not be overwritten, so we skip such files if we find them - const skipPaths = ['index.html', 'iframe.html'].map((f) => path.join(targetPath, f)); + const skipPaths = ['index.html', 'iframe.html'].map((f) => join(targetPath, f)); await fs.copy(staticPath, targetPath, { dereference: true, preserveTimestamps: true, @@ -49,9 +55,14 @@ export async function copyAllStaticFilesRelativeToMain( }) ); - const targetPath = path.join(outputDir, to); - const skipPaths = ['index.html', 'iframe.html'].map((f) => path.join(targetPath, f)); - logger.info(chalk`=> Copying static files: {cyan ${from}} at {cyan ${targetPath}}`); + const targetPath = join(outputDir, to); + const skipPaths = ['index.html', 'iframe.html'].map((f) => join(targetPath, f)); + if (!from.includes('node_modules')) { + logger.info( + chalk`=> Copying static files: {cyan ${print(from)}} at {cyan ${print(targetPath)}}` + ); + } + // logger.info(chalk`=> Copying static files: {cyan ${from}} at {cyan ${targetPath}}`); await fs.copy(from, targetPath, { dereference: true, preserveTimestamps: true, @@ -59,3 +70,6 @@ export async function copyAllStaticFilesRelativeToMain( }); }, Promise.resolve()); } +function print(p: string): string { + return relative(process.cwd(), p); +} From 3b94da1a9f4e5942dae067f277c2a4672271cf2e Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Tue, 19 Dec 2023 12:04:12 +0100 Subject: [PATCH 011/136] force builder-manager to output to 'namespaced' directory correctly --- code/builders/builder-manager/src/index.ts | 4 +--- .../builders/builder-manager/src/utils/managerEntries.ts | 6 +++--- code/builders/builder-vite/src/vite-config.ts | 9 +++++++-- code/lib/core-server/src/build-dev.ts | 5 +++-- code/lib/types/src/modules/core-common.ts | 1 + 5 files changed, 15 insertions(+), 10 deletions(-) diff --git a/code/builders/builder-manager/src/index.ts b/code/builders/builder-manager/src/index.ts index 89b9846184e..b7923a64a2b 100644 --- a/code/builders/builder-manager/src/index.ts +++ b/code/builders/builder-manager/src/index.ts @@ -40,10 +40,8 @@ export const getConfig: ManagerBuilder['getConfig'] = async (options) => { ? [...addonsEntryPoints, customManagerEntryPoint] : addonsEntryPoints; - const realEntryPoints = await wrapManagerEntries(entryPoints); - return { - entryPoints: realEntryPoints, + entryPoints: await wrapManagerEntries(entryPoints, options.cacheKey), outdir: join(options.outputDir || './', 'sb-addons'), format: 'iife', write: false, diff --git a/code/builders/builder-manager/src/utils/managerEntries.ts b/code/builders/builder-manager/src/utils/managerEntries.ts index 51413bfb852..c30357851dd 100644 --- a/code/builders/builder-manager/src/utils/managerEntries.ts +++ b/code/builders/builder-manager/src/utils/managerEntries.ts @@ -1,5 +1,5 @@ -import findCacheDirectory from 'find-cache-dir'; import fs from 'fs-extra'; +import { resolvePathInStorybookCache } from '@storybook/core-common'; import { join, parse, relative, sep } from 'node:path'; import slash from 'slash'; @@ -34,11 +34,11 @@ const sanitizeFinal = (path: string) => { * * We need to wrap each managerEntry with a try-catch because if we do not, a failing managerEntry can stop execution of other managerEntries. */ -export async function wrapManagerEntries(entrypoints: string[]) { +export async function wrapManagerEntries(entrypoints: string[], uniqueId?: string) { return Promise.all( entrypoints.map(async (entry, i) => { const { name, dir } = parse(entry); - const cacheLocation = findCacheDirectory({ name: 'sb-manager' }); + const cacheLocation = resolvePathInStorybookCache('sb-manager', uniqueId); if (!cacheLocation) { throw new Error('Could not create/find cache directory'); diff --git a/code/builders/builder-vite/src/vite-config.ts b/code/builders/builder-vite/src/vite-config.ts index b4d1744d383..f0fd546293f 100644 --- a/code/builders/builder-vite/src/vite-config.ts +++ b/code/builders/builder-vite/src/vite-config.ts @@ -7,7 +7,12 @@ import type { UserConfig as ViteConfig, InlineConfig, } from 'vite'; -import { isPreservingSymlinks, getFrameworkName, getBuilderOptions } from '@storybook/core-common'; +import { + isPreservingSymlinks, + getFrameworkName, + getBuilderOptions, + resolvePathInStorybookCache, +} from '@storybook/core-common'; import { globalsNameReferenceMap } from '@storybook/preview/globals'; import type { Options } from '@storybook/types'; import { @@ -54,7 +59,7 @@ export async function commonConfig( const sbConfig: InlineConfig = { configFile: false, - cacheDir: findCacheDirectory({ name: 'sb-vite' }), + cacheDir: resolvePathInStorybookCache('sb-vite', options.cacheKey), root: projectRoot, // Allow storybook deployed as subfolder. See https://github.com/storybookjs/builder-vite/issues/238 base: './', diff --git a/code/lib/core-server/src/build-dev.ts b/code/lib/core-server/src/build-dev.ts index cc76cf411e4..b0455108540 100644 --- a/code/lib/core-server/src/build-dev.ts +++ b/code/lib/core-server/src/build-dev.ts @@ -57,9 +57,9 @@ export async function buildDevStandalone( const rootDir = getProjectRoot(); const configDir = resolve(options.configDir); - const uniqueId = oneWayHash(relative(rootDir, configDir)); + const cacheKey = oneWayHash(relative(rootDir, configDir)); - const cacheOutputDir = resolvePathInStorybookCache('public', uniqueId); + const cacheOutputDir = resolvePathInStorybookCache('public', cacheKey); let outputDir = resolve(options.outputDir || cacheOutputDir); if (options.smokeTest) { outputDir = cacheOutputDir; @@ -70,6 +70,7 @@ export async function buildDevStandalone( options.versionCheck = versionCheck; options.configType = 'DEVELOPMENT'; options.configDir = configDir; + options.cacheKey = cacheKey; options.outputDir = outputDir; options.serverChannelUrl = getServerChannelUrl(port, options); /* eslint-enable no-param-reassign */ diff --git a/code/lib/types/src/modules/core-common.ts b/code/lib/types/src/modules/core-common.ts index 53dcecdcc68..8f848909d8e 100644 --- a/code/lib/types/src/modules/core-common.ts +++ b/code/lib/types/src/modules/core-common.ts @@ -157,6 +157,7 @@ export interface LoadOptions { packageJson: PackageJson; outputDir?: string; configDir?: string; + cacheKey?: string; ignorePreview?: boolean; extendServer?: (server: Server) => void; } From 8bf26a02e61be7f465cdfcb0c4bc637abfbd8ecb Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Tue, 19 Dec 2023 12:18:20 +0100 Subject: [PATCH 012/136] cleanup --- code/builders/builder-manager/package.json | 2 -- code/builders/builder-vite/src/vite-config.ts | 1 - code/yarn.lock | 2 -- 3 files changed, 5 deletions(-) diff --git a/code/builders/builder-manager/package.json b/code/builders/builder-manager/package.json index 5eca5d7a6e7..aad8a8b3509 100644 --- a/code/builders/builder-manager/package.json +++ b/code/builders/builder-manager/package.json @@ -49,14 +49,12 @@ "@storybook/manager": "workspace:*", "@storybook/node-logger": "workspace:*", "@types/ejs": "^3.1.1", - "@types/find-cache-dir": "^3.2.1", "@yarnpkg/esbuild-plugin-pnp": "^3.0.0-rc.10", "browser-assert": "^1.2.1", "ejs": "^3.1.8", "esbuild": "^0.18.0", "esbuild-plugin-alias": "^0.2.1", "express": "^4.17.3", - "find-cache-dir": "^3.0.0", "fs-extra": "^11.1.0", "process": "^0.11.10", "util": "^0.12.4" diff --git a/code/builders/builder-vite/src/vite-config.ts b/code/builders/builder-vite/src/vite-config.ts index f0fd546293f..f4f258902b2 100644 --- a/code/builders/builder-vite/src/vite-config.ts +++ b/code/builders/builder-vite/src/vite-config.ts @@ -1,5 +1,4 @@ import * as path from 'path'; -import findCacheDirectory from 'find-cache-dir'; import type { ConfigEnv, InlineConfig as ViteInlineConfig, diff --git a/code/yarn.lock b/code/yarn.lock index cad239a20bd..2a4128434ef 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -5204,14 +5204,12 @@ __metadata: "@storybook/manager": "workspace:*" "@storybook/node-logger": "workspace:*" "@types/ejs": "npm:^3.1.1" - "@types/find-cache-dir": "npm:^3.2.1" "@yarnpkg/esbuild-plugin-pnp": "npm:^3.0.0-rc.10" browser-assert: "npm:^1.2.1" ejs: "npm:^3.1.8" esbuild: "npm:^0.18.0" esbuild-plugin-alias: "npm:^0.2.1" express: "npm:^4.17.3" - find-cache-dir: "npm:^3.0.0" fs-extra: "npm:^11.1.0" process: "npm:^0.11.10" slash: "npm:^5.0.0" From 94f4361eaba818bc01433b47908ad9ae75d90724 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Tue, 19 Dec 2023 12:51:35 +0100 Subject: [PATCH 013/136] remove the -s flag from build & dev --- code/lib/cli/src/generate.ts | 2 -- code/lib/core-server/src/build-static.ts | 19 +------------------ .../core-server/src/presets/common-preset.ts | 2 +- .../core-server/src/utils/server-statics.ts | 8 -------- 4 files changed, 2 insertions(+), 29 deletions(-) diff --git a/code/lib/cli/src/generate.ts b/code/lib/cli/src/generate.ts index 2594863f0e9..c964767da54 100644 --- a/code/lib/cli/src/generate.ts +++ b/code/lib/cli/src/generate.ts @@ -196,7 +196,6 @@ command('doctor') command('dev') .option('-p, --port ', 'Port to run Storybook', (str) => parseInt(str, 10)) .option('-h, --host ', 'Host to run Storybook') - .option('-s, --static-dir ', 'Directory where to load static files from', parseList) .option('-c, --config-dir ', 'Directory where to load Storybook configurations from') .option( '--https', @@ -251,7 +250,6 @@ command('dev') }); command('build') - .option('-s, --static-dir ', 'Directory where to load static files from', parseList) .option('-o, --output-dir ', 'Directory where to store built files') .option('-c, --config-dir ', 'Directory where to load Storybook configurations from') .option('--quiet', 'Suppress verbose build output') diff --git a/code/lib/core-server/src/build-static.ts b/code/lib/core-server/src/build-static.ts index b85932ca246..7437ed39432 100644 --- a/code/lib/core-server/src/build-static.ts +++ b/code/lib/core-server/src/build-static.ts @@ -12,21 +12,15 @@ import { normalizeStories, resolveAddonName, } from '@storybook/core-common'; -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, - copyAllStaticFilesRelativeToMain, -} from './utils/copy-all-static-files'; +import { copyAllStaticFilesRelativeToMain } from './utils/copy-all-static-files'; import { getBuilders } from './utils/get-builders'; import { extractStoriesJson } from './utils/stories-json'; import { extractStorybookMetadata } from './utils/metadata'; import { StoryIndexGenerator } from './utils/StoryIndexGenerator'; import { summarizeIndex } from './utils/summarizeIndex'; -import { defaultStaticDirs } from './utils/constants'; import { buildOrThrow } from './utils/build-or-throw'; export type BuildStaticStandaloneOptions = CLIOptions & @@ -41,10 +35,6 @@ export async function buildStaticStandalone(options: BuildStaticStandaloneOption throw new Error("Won't remove current directory. Check your outputDir!"); } - if (options.staticDir?.includes('/')) { - throw new Error("Won't copy root directory. Check your staticDirs!"); - } - options.outputDir = isAbsolute(options.outputDir) ? options.outputDir : join(process.cwd(), options.outputDir); @@ -131,10 +121,6 @@ export async function buildStaticStandalone(options: BuildStaticStandaloneOption build, }; - if (options.staticDir && !isEqual(staticDirs, defaultStaticDirs)) { - throw new ConflictingStaticDirConfigError(); - } - const effects: Promise[] = []; global.FEATURES = features; @@ -148,9 +134,6 @@ export async function buildStaticStandalone(options: BuildStaticStandaloneOption copyAllStaticFilesRelativeToMain(staticDirs, options.outputDir, options.configDir) ); } - if (options.staticDir) { - effects.push(copyAllStaticFiles(options.staticDir, options.outputDir)); - } const coreServerPublicDir = join( dirname(require.resolve('@storybook/core-server/package.json')), diff --git a/code/lib/core-server/src/presets/common-preset.ts b/code/lib/core-server/src/presets/common-preset.ts index 815b9cb7241..350872f3889 100644 --- a/code/lib/core-server/src/presets/common-preset.ts +++ b/code/lib/core-server/src/presets/common-preset.ts @@ -55,7 +55,7 @@ export const favicon = async ( const statics = staticDirsValue ? staticDirsValue.map((dir) => (typeof dir === 'string' ? dir : `${dir.from}:${dir.to}`)) - : options.staticDir; + : []; if (statics && statics.length > 0) { const lists = await Promise.all( diff --git a/code/lib/core-server/src/utils/server-statics.ts b/code/lib/core-server/src/utils/server-statics.ts index 386db92d143..aa687c5bcc8 100644 --- a/code/lib/core-server/src/utils/server-statics.ts +++ b/code/lib/core-server/src/utils/server-statics.ts @@ -1,28 +1,20 @@ import { logger } from '@storybook/node-logger'; import type { Options } from '@storybook/types'; import { getDirectoryFromWorkingDir } from '@storybook/core-common'; -import { ConflictingStaticDirConfigError } from '@storybook/core-events/server-errors'; import chalk from 'chalk'; import type { Router } from 'express'; import express from 'express'; import { pathExists } from 'fs-extra'; import path, { basename, isAbsolute } from 'path'; -import isEqual from 'lodash/isEqual.js'; import { dedent } from 'ts-dedent'; -import { defaultStaticDirs } from './constants'; export async function useStatics(router: Router, options: Options) { const staticDirs = (await options.presets.apply('staticDirs')) ?? []; const faviconPath = await options.presets.apply('favicon'); - if (options.staticDir && !isEqual(staticDirs, defaultStaticDirs)) { - throw new ConflictingStaticDirConfigError(); - } - const statics = [ ...staticDirs.map((dir) => (typeof dir === 'string' ? dir : `${dir.from}:${dir.to}`)), - ...(options.staticDir || []), ]; if (statics && statics.length > 0) { From 3539f3bc875406f916a3dc52e4b12333bc958956 Mon Sep 17 00:00:00 2001 From: Steve Axtmann Date: Tue, 19 Dec 2023 16:03:03 +0100 Subject: [PATCH 014/136] a11y: link to the docs for the test runner --- code/addons/a11y/README.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/code/addons/a11y/README.md b/code/addons/a11y/README.md index 7ff0d885ec0..64730ef6103 100755 --- a/code/addons/a11y/README.md +++ b/code/addons/a11y/README.md @@ -193,6 +193,10 @@ export const inaccessible = () => ( ); ``` +## Automate accessibility tests with test runner + +The test runner does not apply any rules that you have set on your stories by default. You can configure the runner to correctly apply the rules by [following the guide on the Storybook docs](https://storybook.js.org/docs/writing-tests/accessibility-testing#automate-accessibility-tests-with-test-runner). + ## Roadmap - Make UI accessible From bf43fe01e460a10acced1f5bd32d2100fee37923 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Wed, 20 Dec 2023 12:43:21 +0800 Subject: [PATCH 015/136] NextJS: Autoconfigure public directory for new projects --- code/lib/cli/src/generators/NEXTJS/index.ts | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/code/lib/cli/src/generators/NEXTJS/index.ts b/code/lib/cli/src/generators/NEXTJS/index.ts index 2588b387312..27d220321dd 100644 --- a/code/lib/cli/src/generators/NEXTJS/index.ts +++ b/code/lib/cli/src/generators/NEXTJS/index.ts @@ -1,14 +1,20 @@ +import { join } from 'path'; +import { existsSync } from 'fs'; import { CoreBuilder } from '../../project_types'; import { baseGenerator } from '../baseGenerator'; import type { Generator } from '../types'; const generator: Generator = async (packageManager, npmOptions, options) => { + let staticDir; + if (existsSync(join(process.cwd(), 'public'))) staticDir = 'public'; + await baseGenerator( packageManager, npmOptions, { ...options, builder: CoreBuilder.Webpack5 }, 'react', { + staticDir, extraAddons: ['@storybook/addon-onboarding'], }, 'nextjs' From ae976da849108b8282605babb3c0a66f82a02415 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Wed, 20 Dec 2023 14:45:28 +0100 Subject: [PATCH 016/136] fixes semver deps --- code/frameworks/nextjs/package.json | 1 + code/lib/cli/package.json | 1 - code/lib/manager-api/package.json | 3 ++- code/presets/create-react-app/package.json | 1 + code/yarn.lock | 3 +++ 5 files changed, 7 insertions(+), 2 deletions(-) diff --git a/code/frameworks/nextjs/package.json b/code/frameworks/nextjs/package.json index 8eb6878e1a8..2c259c54756 100644 --- a/code/frameworks/nextjs/package.json +++ b/code/frameworks/nextjs/package.json @@ -98,6 +98,7 @@ "@storybook/preview-api": "workspace:*", "@storybook/react": "workspace:*", "@types/node": "^18.0.0", + "@types/semver": "^7.3.4", "css-loader": "^6.7.3", "find-up": "^5.0.0", "fs-extra": "^11.1.0", diff --git a/code/lib/cli/package.json b/code/lib/cli/package.json index a1869def7aa..d4493a1bc4a 100644 --- a/code/lib/cli/package.json +++ b/code/lib/cli/package.json @@ -101,7 +101,6 @@ "devDependencies": { "@types/cross-spawn": "^6.0.2", "@types/prompts": "^2.0.9", - "@types/semver": "^7.3.4", "@types/util-deprecate": "^1.0.0", "boxen": "^5.1.2", "slash": "^5.0.0", diff --git a/code/lib/manager-api/package.json b/code/lib/manager-api/package.json index 749e3cee113..5a9c979c9e1 100644 --- a/code/lib/manager-api/package.json +++ b/code/lib/manager-api/package.json @@ -54,7 +54,6 @@ "dequal": "^2.0.2", "lodash": "^4.17.21", "memoizerific": "^1.11.3", - "semver": "^7.3.7", "store2": "^2.14.2", "telejson": "^7.2.0", "ts-dedent": "^2.0.0" @@ -63,10 +62,12 @@ "@jest/globals": "^29.3.1", "@types/lodash": "^4.14.167", "@types/qs": "^6", + "@types/semver": "^7.3.4", "flush-promises": "^1.0.2", "qs": "^6.10.0", "react": "^18.2.0", "react-dom": "^18.2.0", + "semver": "^7.3.7", "typescript": "^5.3.2" }, "publishConfig": { diff --git a/code/presets/create-react-app/package.json b/code/presets/create-react-app/package.json index 6257783889c..9a5f30a1b3c 100644 --- a/code/presets/create-react-app/package.json +++ b/code/presets/create-react-app/package.json @@ -53,6 +53,7 @@ "@storybook/react-docgen-typescript-plugin": "1.0.6--canary.9.0c3f3b7.0", "@storybook/types": "workspace:*", "@types/babel__core": "^7.1.7", + "@types/semver": "^7.3.4", "pnp-webpack-plugin": "^1.7.0", "semver": "^7.3.5" }, diff --git a/code/yarn.lock b/code/yarn.lock index c410acdff97..dfee4c87dc4 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -5793,6 +5793,7 @@ __metadata: "@storybook/types": "workspace:*" "@types/lodash": "npm:^4.14.167" "@types/qs": "npm:^6" + "@types/semver": "npm:^7.3.4" dequal: "npm:^2.0.2" flush-promises: "npm:^1.0.2" lodash: "npm:^4.17.21" @@ -5890,6 +5891,7 @@ __metadata: "@types/babel__preset-env": "npm:^7" "@types/loader-utils": "npm:^2.0.5" "@types/node": "npm:^18.0.0" + "@types/semver": "npm:^7.3.4" css-loader: "npm:^6.7.3" find-up: "npm:^5.0.0" fs-extra: "npm:^11.1.0" @@ -5995,6 +5997,7 @@ __metadata: "@storybook/types": "workspace:*" "@types/babel__core": "npm:^7.1.7" "@types/node": "npm:^18.0.0" + "@types/semver": "npm:^7.3.4" pnp-webpack-plugin: "npm:^1.7.0" semver: "npm:^7.3.5" typescript: "npm:^5.3.2" From 5c3a3db29af8fef987f24b70d2f7432079811ead Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Wed, 20 Dec 2023 15:46:06 +0100 Subject: [PATCH 017/136] Skip check for no framework given when ignorePreview is true --- code/lib/core-server/src/build-dev.ts | 11 ++++++++--- code/lib/core-server/src/build-static.ts | 2 +- 2 files changed, 9 insertions(+), 4 deletions(-) diff --git a/code/lib/core-server/src/build-dev.ts b/code/lib/core-server/src/build-dev.ts index 5e8a0a955c2..4995785b895 100644 --- a/code/lib/core-server/src/build-dev.ts +++ b/code/lib/core-server/src/build-dev.ts @@ -67,10 +67,15 @@ export async function buildDevStandalone( const { framework } = config; const corePresets = []; - const frameworkName = typeof framework === 'string' ? framework : framework?.name; - validateFrameworkName(frameworkName); + let frameworkName = typeof framework === 'string' ? framework : framework?.name; + if (!options.ignorePreview) { + validateFrameworkName(frameworkName); + } + if (frameworkName) { + corePresets.push(join(frameworkName, 'preset')); + } - corePresets.push(join(frameworkName, 'preset')); + frameworkName = frameworkName || 'custom'; try { await warnOnIncompatibleAddons(config); diff --git a/code/lib/core-server/src/build-static.ts b/code/lib/core-server/src/build-static.ts index b85932ca246..a35b834647e 100644 --- a/code/lib/core-server/src/build-static.ts +++ b/code/lib/core-server/src/build-static.ts @@ -65,7 +65,7 @@ export async function buildStaticStandalone(options: BuildStaticStandaloneOption const frameworkName = typeof framework === 'string' ? framework : framework?.name; if (frameworkName) { corePresets.push(join(frameworkName, 'preset')); - } else { + } else if (!options.ignorePreview) { logger.warn(`you have not specified a framework in your ${options.configDir}/main.js`); } From 1ccd12543d541f9fa02e32e9e051a275e9bb0c34 Mon Sep 17 00:00:00 2001 From: jonniebigodes Date: Wed, 20 Dec 2023 21:21:18 +0000 Subject: [PATCH 018/136] Docs: Remove static dir flag remval --- docs/api/cli-options.md | 4 +--- docs/configure/images-and-assets.md | 8 +------- docs/get-started/setup.md | 4 +--- 3 files changed, 3 insertions(+), 13 deletions(-) diff --git a/docs/api/cli-options.md b/docs/api/cli-options.md index 1ccbb4d1f12..ee164e45e49 100644 --- a/docs/api/cli-options.md +++ b/docs/api/cli-options.md @@ -30,7 +30,6 @@ Options include: | `-V`, `--version` | Output the version number
`storybook dev -V` | | `-p`, `--port [number]` | Port to run Storybook
`storybook dev -p 9009` | | `-h`, `--host [string]` | Host to run Storybook
`storybook dev -h my-host.com` | -| `-s`, `--static-dir` | **Deprecated** [see note](#static-dir-deprecation). Directory where to load static files from, comma-separated list
`storybook dev -s public` | | `-c`, `--config-dir [dir-name]` | Directory where to load Storybook configurations from
`storybook dev -c .storybook` | | `--https` | Serve Storybook over HTTPS. Note: You must provide your own certificate information
`storybook dev --https` | | `--ssl-ca` | Provide an SSL certificate authority. (Optional with --https, required if using a self-signed certificate)
`storybook dev --ssl-ca my-certificate` | @@ -47,7 +46,7 @@ Options include: -Starting in 6.4 the `-s` flag is deprecated. Instead, use a configuration object in your `.storybook/main.js` file. See the [images and assets documentation](../configure/images-and-assets.md#serving-static-files-via-storybook) for more information. +With the release of Storybook 8, the `-s` CLI flag was removed. We recommend using the [static directory](../configure/images-and-assets.md#serving-static-files-via-storybook) instead if you need to serve static files. @@ -65,7 +64,6 @@ Options include: | ------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `-h`, `--help` | Output usage information
`storybook build --help` | | `-V`, `--version` | Output the version number
`storybook build -V` | -| `-s`, `--static-dir` | **Deprecated** [see note](#static-dir-deprecation).
Directory where to load static files from, comma-separated list
`storybook build -s public` | | `-o`, `--output-dir [dir-name]` | Directory where to store built files
`storybook build -o /my-deployed-storybook` | | `-c`, `--config-dir [dir-name]` | Directory where to load Storybook configurations from
`storybook build -c .storybook` | | `--loglevel [level]` | Controls level of logging during build.
Available options: `silly`, `verbose`, `info` (default), `warn`, `error`, `silent`
`storybook build --loglevel warn` | diff --git a/docs/configure/images-and-assets.md b/docs/configure/images-and-assets.md index 7b4a0c071ad..3ff5ad2f899 100644 --- a/docs/configure/images-and-assets.md +++ b/docs/configure/images-and-assets.md @@ -101,10 +101,6 @@ Or even use a configuration object to define the directories: -### **[⚠️ Deprecated]** Serving static files via Storybook CLI - -Using `--static-dir` or `-s` option with Storybook CLI is deprecated. It is recommended to use [Storybook static directory configuration option](#serving-static-files-via-storybook-configuration) instead. - ### Reference assets from a CDN Upload your files to an online CDN and reference them. In this example, we’re using a placeholder image service. @@ -143,9 +139,7 @@ Suppose you are serving assets in a [static directory](#serving-static-files-via ### Referencing Fonts in Stories -After configuring Storybook to serve assets from your static folder, you can reference those assets in Storybook. For example, you can reference and apply a custom font in your stories. - -Inside the `.storybook/` configuration folder, create `preview-head.html`, then use `` to reference your font. +After configuring Storybook to serve assets from your static folder, you can reference those assets in Storybook. For example, you can reference and apply a custom font to your stories. To do this, create a [`preview-head.html`](./story-rendering.md) file inside the configuration directory (i.e., `.storybook`) and add a `` tag to reference your font. diff --git a/docs/get-started/setup.md b/docs/get-started/setup.md index 5bc7d986e82..ee0d0c6f4dd 100644 --- a/docs/get-started/setup.md +++ b/docs/get-started/setup.md @@ -116,6 +116,4 @@ Use [decorators](../writing-stories/decorators.md) to “wrap” every story in ## Load assets and resources -If you want to [link to static files](../configure/images-and-assets.md) in your project or stories (e.g., `/fonts/XYZ.woff`), use the `-s path/to/folder` flag to specify a static folder to serve from when you start up Storybook. To do so, edit the `storybook` and `build-storybook` scripts in `package.json`. - -We recommend serving external resources and assets requested in your components statically with Storybook. It ensures that assets are always available to your stories. +We recommend serving external resources and assets requested in your components statically with Storybook. It ensures that assets are always available to your stories. Read our [documentation](../configure/images-and-assets.md) to learn how to hosting static files with Storybook. From 851d9c268c9bb331d1c3b6afb4b9dd4ace2c0f29 Mon Sep 17 00:00:00 2001 From: Jeppe Reinhold Date: Thu, 21 Dec 2023 10:17:15 +0100 Subject: [PATCH 019/136] disable INCOMPATIBLE_PEER_DEPENDENCY error for SvelteKit sandboxes --- scripts/utils/yarn.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/scripts/utils/yarn.ts b/scripts/utils/yarn.ts index 2f1fdc8b838..006aac905f8 100644 --- a/scripts/utils/yarn.ts +++ b/scripts/utils/yarn.ts @@ -97,8 +97,8 @@ export const configureYarn2ForVerdaccio = async ({ `yarn config set enableImmutableInstalls false`, ]; - if (key === 'svelte-kit/prerelease-ts') { - // Don't error with INCOMPATIBLE_PEER_DEPENDENCY for SvelteKit prerelease, it is expected + if (key.includes('svelte-kit')) { + // Don't error with INCOMPATIBLE_PEER_DEPENDENCY for SvelteKit sandboxes, it is expected to happen with @sveltejs/vite-plugin-svelte command.push( `yarn config set logFilters --json '[ { "code": "YN0013", "level": "discard" } ]'` ); From 977570c8cbd481b59c8e1ae2fcf60062009b6749 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Thu, 21 Dec 2023 12:54:08 +0100 Subject: [PATCH 020/136] improvements --- code/lib/core-server/src/utils/copy-all-static-files.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/code/lib/core-server/src/utils/copy-all-static-files.ts b/code/lib/core-server/src/utils/copy-all-static-files.ts index 4871e6adb8d..5b0fb522735 100644 --- a/code/lib/core-server/src/utils/copy-all-static-files.ts +++ b/code/lib/core-server/src/utils/copy-all-static-files.ts @@ -12,6 +12,8 @@ export async function copyAllStaticFiles(staticDirs: any[] | undefined, outputDi try { const { staticDir, staticPath, targetDir } = await parseStaticDir(dir); const targetPath = join(outputDir, targetDir); + + // we copy prebuild static files from node_modules/@storybook/manager & preview if (!staticDir.includes('node_modules')) { logger.info( chalk`=> Copying static files: {cyan ${print(staticDir)}} => {cyan ${print( @@ -62,7 +64,6 @@ export async function copyAllStaticFilesRelativeToMain( chalk`=> Copying static files: {cyan ${print(from)}} at {cyan ${print(targetPath)}}` ); } - // logger.info(chalk`=> Copying static files: {cyan ${from}} at {cyan ${targetPath}}`); await fs.copy(from, targetPath, { dereference: true, preserveTimestamps: true, From 6b5d9c7446284e442f8356991a2a8b73c701421f Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Wed, 20 Dec 2023 11:54:51 -0300 Subject: [PATCH 021/136] fix upgrade command --- code/lib/cli/src/upgrade.test.ts | 2 +- code/lib/cli/src/upgrade.ts | 38 +++++++++++++++---- .../core-events/src/errors/server-errors.ts | 34 ++++++++++++++++- 3 files changed, 64 insertions(+), 10 deletions(-) diff --git a/code/lib/cli/src/upgrade.test.ts b/code/lib/cli/src/upgrade.test.ts index 3acb5fd92a0..6fcea5f8459 100644 --- a/code/lib/cli/src/upgrade.test.ts +++ b/code/lib/cli/src/upgrade.test.ts @@ -63,7 +63,7 @@ describe('addNxPackagesToReject', () => { const flags = ['--reject', '/preset-create-react-app/', '--some-flag', 'hello']; expect(addNxPackagesToReject(flags)).toMatchObject([ '--reject', - '/(preset-create-react-app|@nrwl/storybook|@nx/storybook)/', + '"/(preset-create-react-app|@nrwl/storybook|@nx/storybook)/"', '--some-flag', 'hello', ]); diff --git a/code/lib/cli/src/upgrade.ts b/code/lib/cli/src/upgrade.ts index aefd6bc8bc0..12ef940a090 100644 --- a/code/lib/cli/src/upgrade.ts +++ b/code/lib/cli/src/upgrade.ts @@ -3,6 +3,10 @@ import { telemetry, getStorybookCoreVersion } from '@storybook/telemetry'; import semver from 'semver'; import { logger } from '@storybook/node-logger'; import { withTelemetry } from '@storybook/core-server'; +import { + ConflictingVersionTagsError, + UpgradeStorybookPackagesError, +} from '@storybook/core-events/server-errors'; import type { PackageJsonWithMaybeDeps, PackageManagerName } from './js-package-manager'; import { getPackageDetails, JsPackageManagerFactory, useNpmWarning } from './js-package-manager'; @@ -117,7 +121,7 @@ export const addNxPackagesToReject = (flags: string[]) => { if (newFlags[index + 1].endsWith('/') && newFlags[index + 1].startsWith('/')) { // Remove last and first slash so that I can add the parentheses newFlags[index + 1] = newFlags[index + 1].substring(1, newFlags[index + 1].length - 1); - newFlags[index + 1] = `/(${newFlags[index + 1]}|@nrwl/storybook|@nx/storybook)/`; + newFlags[index + 1] = `"/(${newFlags[index + 1]}|@nrwl/storybook|@nx/storybook)/"`; } else { // Adding the two packages as comma-separated values // If the existing rejects are in regex format, they will be ignored. @@ -163,12 +167,10 @@ export const doUpgrade = async ({ const beforeVersion = await getStorybookCoreVersion(); - commandLog(`Checking for latest versions of '@storybook/*' packages`); + commandLog(`Checking for latest versions of '@storybook/*' packages\n`); if (tag && prerelease) { - throw new Error( - `Cannot set both --tag and --prerelease. Use --tag next to get the latest prereleae` - ); + throw new ConflictingVersionTagsError(); } let target = 'latest'; @@ -187,20 +189,40 @@ export const doUpgrade = async ({ flags.push(target); flags = addExtraFlags(EXTRA_FLAGS, flags, await packageManager.retrievePackageJson()); flags = addNxPackagesToReject(flags); - const check = spawnSync('npx', ['npm-check-updates@latest', '/storybook/', ...flags], { + + const command = 'npx'; + const checkArgs = ['npm-check-updates@latest', '/storybook/', ...flags]; + const check = spawnSync(command, checkArgs, { stdio: 'pipe', shell: true, }); + + if (check.stderr && !check.stderr.toString().includes('npm notice')) { + throw new UpgradeStorybookPackagesError({ + command, + args: checkArgs, + errorMessage: check.stderr.toString(), + }); + } + logger.info(check.stdout.toString()); - logger.info(check.stderr.toString()); - const checkSb = spawnSync('npx', ['npm-check-updates@latest', 'sb', ...flags], { + const checkSbArgs = ['npm-check-updates@latest', 'sb', ...flags]; + const checkSb = spawnSync(command, checkSbArgs, { stdio: 'pipe', shell: true, }); logger.info(checkSb.stdout.toString()); logger.info(checkSb.stderr.toString()); + if (checkSb.stderr && !checkSb.stderr.toString().includes('npm notice')) { + throw new UpgradeStorybookPackagesError({ + command, + args: checkSbArgs, + errorMessage: checkSb.stderr.toString(), + }); + } + if (!dryRun) { commandLog(`Installing upgrades`); await packageManager.installDependencies(); diff --git a/code/lib/core-events/src/errors/server-errors.ts b/code/lib/core-events/src/errors/server-errors.ts index bacdd7d6055..5f9f98d7ec8 100644 --- a/code/lib/core-events/src/errors/server-errors.ts +++ b/code/lib/core-events/src/errors/server-errors.ts @@ -422,7 +422,7 @@ export class GenerateNewProjectOnInitError extends StorybookError { super(); } - template(): string { + template() { return dedent` There was an error while using ${this.data.packageManager} to create a new ${ this.data.projectType @@ -432,3 +432,35 @@ export class GenerateNewProjectOnInitError extends StorybookError { `; } } + +export class ConflictingVersionTagsError extends StorybookError { + readonly category = Category.CLI_UPGRADE; + + readonly code = 1; + + template() { + return 'Cannot set both --tag and --prerelease. Use --tag=next to get the latest prerelease.'; + } +} + +export class UpgradeStorybookPackagesError extends StorybookError { + readonly category = Category.CLI_UPGRADE; + + readonly code = 2; + + constructor(public data: { command: string; args: string[]; errorMessage: string }) { + super(); + } + + template() { + return dedent` + There was an error while trying to upgrade your Storybook dependencies. + + Command: + ${this.data.command} ${this.data.args.join(' ')} + + Error: + ${this.data.errorMessage} + `; + } +} From cee492fad2238a2e08deb6aff55be7ab9e8a41b8 Mon Sep 17 00:00:00 2001 From: Joe Karow <58997957+JoeKarow@users.noreply.github.com> Date: Thu, 21 Dec 2023 16:12:17 -0500 Subject: [PATCH 022/136] fix typo --- MIGRATION.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/MIGRATION.md b/MIGRATION.md index 787e893df97..c69c72a1fc6 100644 --- a/MIGRATION.md +++ b/MIGRATION.md @@ -549,7 +549,7 @@ To summarize: #### typescript.skipBabel deprecated -We will remove the `typescript.skipBabel` option in Storybook 8.0.0. Please use `typescirpt.skipCompiler` instead. +We will remove the `typescript.skipBabel` option in Storybook 8.0.0. Please use `typescript.skipCompiler` instead. #### Primary doc block accepts of prop From 7c71684fbb4f5faed3bd47ecd1fba0be095ab405 Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Fri, 22 Dec 2023 11:48:16 +0100 Subject: [PATCH 023/136] Make sure story play function fails if there are any unhandled error --- code/addons/interactions/src/Panel.tsx | 20 ++++--- .../src/components/Interaction.tsx | 6 +- .../src/components/InteractionsPanel.tsx | 55 +++++++++++++++---- code/addons/interactions/src/utils.ts | 23 ++++++++ code/lib/core-events/src/index.ts | 7 +-- code/lib/instrumenter/src/instrumenter.ts | 16 +----- .../modules/preview-web/render/StoryRender.ts | 28 +++++++++- code/ui/manager/src/globals/exports.ts | 2 +- 8 files changed, 113 insertions(+), 44 deletions(-) create mode 100644 code/addons/interactions/src/utils.ts diff --git a/code/addons/interactions/src/Panel.tsx b/code/addons/interactions/src/Panel.tsx index 3d5733710d1..084aee8d892 100644 --- a/code/addons/interactions/src/Panel.tsx +++ b/code/addons/interactions/src/Panel.tsx @@ -4,10 +4,10 @@ import React, { Fragment, memo, useEffect, useMemo, useRef, useState } from 'rea import { useAddonState, useChannel, useParameter } from '@storybook/manager-api'; import { FORCE_REMOUNT, - IGNORED_EXCEPTION, STORY_RENDER_PHASE_CHANGED, STORY_THREW_EXCEPTION, PLAY_FUNCTION_THREW_EXCEPTION, + UNHANDLED_ERRORS_DURING_PLAYING, } from '@storybook/core-events'; import { EVENTS, type Call, CallStates, type LogItem } from '@storybook/instrumenter'; @@ -91,6 +91,7 @@ export const Panel = memo<{ storyId: string }>(function PanelMemoized({ storyId hasException: false, caughtException: undefined, interactionsCount: 0, + unhandledErrors: undefined, }); // local state @@ -104,6 +105,7 @@ export const Panel = memo<{ storyId: string }>(function PanelMemoized({ storyId interactions = [], isPlaying = false, caughtException = undefined, + unhandledErrors = undefined, } = addonState; // Log and calls are tracked in a ref so we don't needlessly rerender. @@ -157,6 +159,7 @@ export const Panel = memo<{ storyId: string }>(function PanelMemoized({ storyId hasException: false, caughtException: undefined, interactionsCount: 0, + unhandledErrors: undefined, }); return; } @@ -180,11 +183,10 @@ export const Panel = memo<{ storyId: string }>(function PanelMemoized({ storyId set((s) => ({ ...s, isErrored: true })); }, [PLAY_FUNCTION_THREW_EXCEPTION]: (e) => { - if (e?.message !== IGNORED_EXCEPTION.message) { - set((s) => ({ ...s, caughtException: e })); - } else { - set((s) => ({ ...s, caughtException: undefined })); - } + set((s) => ({ ...s, caughtException: e })); + }, + [UNHANDLED_ERRORS_DURING_PLAYING]: (e) => { + set((s) => ({ ...s, unhandledErrors: e })); }, }, [collapsed] @@ -224,7 +226,10 @@ export const Panel = memo<{ storyId: string }>(function PanelMemoized({ storyId const [fileName] = storyFilePath.toString().split('/').slice(-1); const scrollToTarget = () => scrollTarget?.scrollIntoView({ behavior: 'smooth', block: 'end' }); - const hasException = !!caughtException || interactions.some((v) => v.status === CallStates.ERROR); + const hasException = + !!caughtException || + !!unhandledErrors || + interactions.some((v) => v.status === CallStates.ERROR); if (isErrored) { return ; @@ -240,6 +245,7 @@ export const Panel = memo<{ storyId: string }>(function PanelMemoized({ storyId fileName={fileName} hasException={hasException} caughtException={caughtException} + unhandledErrors={unhandledErrors} isPlaying={isPlaying} pausedAt={pausedAt} endRef={endRef} diff --git a/code/addons/interactions/src/components/Interaction.tsx b/code/addons/interactions/src/components/Interaction.tsx index 5c817e71a0a..c5e5e41f3d5 100644 --- a/code/addons/interactions/src/components/Interaction.tsx +++ b/code/addons/interactions/src/components/Interaction.tsx @@ -10,6 +10,7 @@ import { MethodCall } from './MethodCall'; import { StatusIcon } from './StatusIcon'; import type { Controls } from './InteractionsPanel'; +import { isJestError } from '../utils'; const MethodCallWrapper = styled.div(() => ({ fontFamily: typography.fonts.mono, @@ -112,8 +113,8 @@ const RowMessage = styled('div')(({ theme }) => ({ }, })); -const Exception = ({ exception }: { exception: Call['exception'] }) => { - if (exception.message.startsWith('expect(')) { +export const Exception = ({ exception }: { exception: Call['exception'] }) => { + if (isJestError(exception)) { return ; } const paragraphs = exception.message.split('\n\n'); @@ -121,7 +122,6 @@ const Exception = ({ exception }: { exception: Call['exception'] }) => { return ( 
{paragraphs[0]}
- {exception.showDiff && exception.diff ? ( <>
diff --git a/code/addons/interactions/src/components/InteractionsPanel.tsx b/code/addons/interactions/src/components/InteractionsPanel.tsx index 6fad03daaf4..3f56926af3a 100644 --- a/code/addons/interactions/src/components/InteractionsPanel.tsx +++ b/code/addons/interactions/src/components/InteractionsPanel.tsx @@ -1,3 +1,4 @@ +/* eslint-disable react/no-array-index-key */ import * as React from 'react'; import { Link, Placeholder } from '@storybook/components'; import { type Call, CallStates, type ControlStates } from '@storybook/instrumenter'; @@ -7,6 +8,7 @@ import { transparentize } from 'polished'; import { Subnav } from './Subnav'; import { Interaction } from './Interaction'; +import { isTestAssertionError } from '../utils'; export interface Controls { start: (args: any) => void; @@ -30,6 +32,7 @@ interface InteractionsPanelProps { fileName?: string; hasException?: boolean; caughtException?: Error; + unhandledErrors?: SerializedError[]; isPlaying?: boolean; pausedAt?: Call['id']; calls: Map; @@ -37,16 +40,15 @@ interface InteractionsPanelProps { onScrollToEnd?: () => void; } -const Container = styled.div<{ withException: boolean }>(({ theme, withException }) => ({ +const Container = styled.div(({ theme }) => ({ minHeight: '100%', background: theme.background.content, - ...(withException && { - backgroundColor: - theme.base === 'dark' ? transparentize(0.93, theme.color.negative) : theme.background.warning, - }), })); const CaughtException = styled.div(({ theme }) => ({ + borderBottom: `1px solid ${theme.appBorderColor}`, + backgroundColor: + theme.base === 'dark' ? transparentize(0.93, theme.color.negative) : theme.background.warning, padding: 15, fontSize: theme.typography.size.s2 - 1, lineHeight: '19px', @@ -69,9 +71,13 @@ const CaughtExceptionDescription = styled.p({ margin: 0, padding: '0 0 20px', }); + const CaughtExceptionStack = styled.pre(({ theme }) => ({ margin: 0, padding: 0, + '&:not(:last-child)': { + paddingBottom: 16, + }, fontSize: theme.typography.size.s1 - 1, })); @@ -84,13 +90,14 @@ export const InteractionsPanel: React.FC = React.memo( fileName, hasException, caughtException, + unhandledErrors, isPlaying, pausedAt, onScrollToEnd, endRef, }) { return ( - + {(interactions.length > 0 || hasException) && ( = React.memo( /> ))} - {caughtException && !caughtException.message?.startsWith('ignoredException') && ( + {caughtException && !isTestAssertionError(caughtException) && ( Caught exception in play function - - This story threw an error after it finished rendering which means your interactions - couldn' t be run.Go to this story' s play function in {fileName} to fix. - - {caughtException.stack || `${caughtException.name}: ${caughtException.message}`} + {printSerializedError(caughtException)} )} + {unhandledErrors && ( + + Unhandled Errors + + Found {unhandledErrors.length} unhandled error{unhandledErrors.length > 1 ? 's' : ''}{' '} + while running the play function. This might cause false positive assertions. Resolve + unhandled errors or ignore unhandled errors with setting the + test.dangerouslyIgnoreUnhandledErrors{' '} + parameter to true. + + + {unhandledErrors.map((error, i) => ( + + {printSerializedError(error)} + + ))} + + )}
{!isPlaying && !caughtException && interactions.length === 0 && ( @@ -150,3 +171,13 @@ export const InteractionsPanel: React.FC = React.memo( ); } ); + +interface SerializedError { + name: string; + stack?: string; + message: string; +} + +function printSerializedError(error: SerializedError) { + return error.stack || `${error.name}: ${error.message}`; +} diff --git a/code/addons/interactions/src/utils.ts b/code/addons/interactions/src/utils.ts new file mode 100644 index 00000000000..1b08eca12a2 --- /dev/null +++ b/code/addons/interactions/src/utils.ts @@ -0,0 +1,23 @@ +export function isTestAssertionError(error: unknown) { + return isChaiError(error) || isJestError(error); +} + +export function isChaiError(error: unknown) { + return ( + error && + typeof error === 'object' && + 'name' in error && + typeof error.name === 'string' && + error.name === 'AssertionError' + ); +} + +export function isJestError(error: unknown) { + return ( + error && + typeof error === 'object' && + 'message' in error && + typeof error.message === 'string' && + error.message.startsWith('expect(') + ); +} diff --git a/code/lib/core-events/src/index.ts b/code/lib/core-events/src/index.ts index d8d6c41c01d..aa9677930a8 100644 --- a/code/lib/core-events/src/index.ts +++ b/code/lib/core-events/src/index.ts @@ -38,6 +38,8 @@ enum events { STORY_RENDER_PHASE_CHANGED = 'storyRenderPhaseChanged', // Emitted when the play function throws PLAY_FUNCTION_THREW_EXCEPTION = 'playFunctionThrewException', + // Emitted when there were unhandled errors during playing the story + UNHANDLED_ERRORS_DURING_PLAYING = 'unhandledErrorsDuringPlaying', // Tell the story store to update (a subset of) a stories arg values UPDATE_STORY_ARGS = 'updateStoryArgs', // The values of a stories args just changed @@ -88,6 +90,7 @@ export const { GLOBALS_UPDATED, NAVIGATE_URL, PLAY_FUNCTION_THREW_EXCEPTION, + UNHANDLED_ERRORS_DURING_PLAYING, PRELOAD_ENTRIES, PREVIEW_BUILDER_PROGRESS, PREVIEW_KEYDOWN, @@ -124,10 +127,6 @@ export const { TELEMETRY_ERROR, } = events; -// Used to break out of the current render without showing a redbox -// eslint-disable-next-line local-rules/no-uncategorized-errors -export const IGNORED_EXCEPTION = new Error('ignoredException'); - export interface WhatsNewCache { lastDismissedPost?: string; lastReadPost?: string; diff --git a/code/lib/instrumenter/src/instrumenter.ts b/code/lib/instrumenter/src/instrumenter.ts index 51d6989a9c7..ef171b4bcd0 100644 --- a/code/lib/instrumenter/src/instrumenter.ts +++ b/code/lib/instrumenter/src/instrumenter.ts @@ -2,11 +2,10 @@ import type { Channel } from '@storybook/channels'; import { addons } from '@storybook/preview-api'; import type { StoryId } from '@storybook/types'; -import { once, logger } from '@storybook/client-logger'; +import { once } from '@storybook/client-logger'; import './typings.d.ts'; import { FORCE_REMOUNT, - IGNORED_EXCEPTION, SET_CURRENT_STORY, STORY_RENDER_PHASE_CHANGED, } from '@storybook/core-events'; @@ -403,10 +402,6 @@ export class Instrumenter { } invoke(fn: Function, object: Record, call: Call, options: Options) { - // TODO this doesnt work because the abortSignal we have here is the newly created one - // const { abortSignal } = global.window.__STORYBOOK_PREVIEW__ || {}; - // if (abortSignal && abortSignal.aborted) throw IGNORED_EXCEPTION; - const { callRefsByResult, renderPhase } = this.getState(call.storyId); // Map complex values to a JSON-serializable representation. @@ -475,7 +470,7 @@ export class Instrumenter { diff = undefined, actual = undefined, expected = undefined, - } = processError(e); + } = e.name === 'AssertionError' ? processError(e) : e; const exception = { name, message, stack, callId, showDiff, diff, actual, expected }; this.update({ ...info, status: CallStates.ERROR, exception }); @@ -495,13 +490,6 @@ export class Instrumenter { } throw e; } - - // We need to throw to break out of the play function, but we don't want to trigger a redbox - // so we throw an ignoredException, which is caught and silently ignored by Storybook. - if (e !== alreadyCompletedException) { - logger.warn(e); - throw IGNORED_EXCEPTION; - } } throw e; }; diff --git a/code/lib/preview-api/src/modules/preview-web/render/StoryRender.ts b/code/lib/preview-api/src/modules/preview-web/render/StoryRender.ts index b50489ecb78..8c72fe3b213 100644 --- a/code/lib/preview-api/src/modules/preview-web/render/StoryRender.ts +++ b/code/lib/preview-api/src/modules/preview-web/render/StoryRender.ts @@ -1,3 +1,4 @@ +/* eslint-disable no-console */ import type { Renderer, RenderContext, @@ -12,11 +13,11 @@ import type { ViewMode, } from '@storybook/types'; import type { Channel } from '@storybook/channels'; -import { logger } from '@storybook/client-logger'; import { STORY_RENDER_PHASE_CHANGED, STORY_RENDERED, PLAY_FUNCTION_THREW_EXCEPTION, + UNHANDLED_ERRORS_DURING_PLAYING, } from '@storybook/core-events'; import type { StoryStore } from '../../store'; import type { Render, RenderType } from './Render'; @@ -218,22 +219,43 @@ export class StoryRender implements Render = new Set(); + const onError = (event: ErrorEvent | PromiseRejectionEvent) => + unhandledErrors.add('error' in event ? event.error : event.reason); + // The phase should be 'rendering' but it might be set to 'aborted' by another render cycle if (this.renderOptions.autoplay && forceRemount && playFunction && this.phase !== 'errored') { + window.addEventListener('error', onError); + window.addEventListener('unhandledrejection', onError); this.disableKeyListeners = true; try { await this.runPhase(abortSignal, 'playing', async () => { await playFunction(renderContext.storyContext); }); - await this.runPhase(abortSignal, 'played'); + if (!ignoreUnhandledErrors && unhandledErrors.size > 0) { + await this.runPhase(abortSignal, 'errored'); + } else { + await this.runPhase(abortSignal, 'played'); + } } catch (error) { - logger.error(error); await this.runPhase(abortSignal, 'errored', async () => { this.channel.emit(PLAY_FUNCTION_THREW_EXCEPTION, serializeError(error)); }); if (this.story.parameters.throwPlayFunctionExceptions !== false) throw error; + console.error(error); + } + if (!ignoreUnhandledErrors && unhandledErrors.size > 0) { + this.channel.emit( + UNHANDLED_ERRORS_DURING_PLAYING, + Array.from(unhandledErrors).map(serializeError) + ); } this.disableKeyListeners = false; + window.removeEventListener('unhandledrejection', onError); + window.removeEventListener('error', onError); if (abortSignal.aborted) return; } diff --git a/code/ui/manager/src/globals/exports.ts b/code/ui/manager/src/globals/exports.ts index adeceb1a1e8..ad0f76d5588 100644 --- a/code/ui/manager/src/globals/exports.ts +++ b/code/ui/manager/src/globals/exports.ts @@ -139,7 +139,6 @@ export default { 'FORCE_REMOUNT', 'FORCE_RE_RENDER', 'GLOBALS_UPDATED', - 'IGNORED_EXCEPTION', 'NAVIGATE_URL', 'PLAY_FUNCTION_THREW_EXCEPTION', 'PRELOAD_ENTRIES', @@ -173,6 +172,7 @@ export default { 'STORY_UNCHANGED', 'TELEMETRY_ERROR', 'TOGGLE_WHATS_NEW_NOTIFICATIONS', + 'UNHANDLED_ERRORS_DURING_PLAYING', 'UPDATE_GLOBALS', 'UPDATE_QUERY_PARAMS', 'UPDATE_STORY_ARGS', From ec290ea8692ef423eb202adc81ec93e195742907 Mon Sep 17 00:00:00 2001 From: jonniebigodes Date: Fri, 22 Dec 2023 12:27:52 +0000 Subject: [PATCH 024/136] Fix links --- docs/api/doc-block-controls.md | 2 +- docs/api/doc-block-source.md | 2 +- docs/writing-docs/autodocs.md | 2 +- docs/writing-docs/mdx.md | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/docs/api/doc-block-controls.md b/docs/api/doc-block-controls.md index 0320d3e4eba..fa753933cb3 100644 --- a/docs/api/doc-block-controls.md +++ b/docs/api/doc-block-controls.md @@ -31,7 +31,7 @@ import * as ButtonStories from './Button.stories' -The Controls doc block will only have functioning UI controls if you have also installed and registered [`@storybook/addon-controls`](../essentials/controls.md) (included in [`@storybook/addon-essentials`](../essentials/index.md)) and haven't turned off inline stories with the [`inlineStories`](./doc-block-story.md#inline) configuration option. +The Controls doc block will only have functioning UI controls if you have also installed and registered [`@storybook/addon-controls`](../essentials/controls.md) (included in [`@storybook/addon-essentials`](../essentials/index.md)) and haven't turned off inline stories with the [`inline`](./doc-block-story.md#inline) configuration option. diff --git a/docs/api/doc-block-source.md b/docs/api/doc-block-source.md index 479a1518e09..1c4c68c5051 100644 --- a/docs/api/doc-block-source.md +++ b/docs/api/doc-block-source.md @@ -102,7 +102,7 @@ Light mode is only supported when the `Source` block is rendered independently. ### `excludeDecorators` -Type: +Type: `boolean` Default: `parameters.docs.source.excludeDecorators` diff --git a/docs/writing-docs/autodocs.md b/docs/writing-docs/autodocs.md index d8452ce4eb7..4e066de59f6 100644 --- a/docs/writing-docs/autodocs.md +++ b/docs/writing-docs/autodocs.md @@ -288,7 +288,7 @@ If you're still encountering issues, we recommend reaching out to the community ### The controls are not updating the story within the auto-generated documentation -If you turned off inline rendering for your stories via the [`inlineStories`](../api/doc-block-story.md) configuration option, you would run into a situation where the associated controls are not updating the story within the documentation page. This is a known limitation of the current implementation and will be addressed in a future release. +If you turned off inline rendering for your stories via the [`inline`](../api/doc-block-story.md#inline) configuration option, you would run into a situation where the associated controls are not updating the story within the documentation page. This is a known limitation of the current implementation and will be addressed in a future release. #### Learn more about Storybook documentation diff --git a/docs/writing-docs/mdx.md b/docs/writing-docs/mdx.md index ce73db8692f..cfe98b9bc4a 100644 --- a/docs/writing-docs/mdx.md +++ b/docs/writing-docs/mdx.md @@ -457,7 +457,7 @@ If you're still encountering issues, we recommend reaching out to the community ### The controls are not updating the story within the MDX documentation page -If you turned off inline rendering for your stories via the [`inlineStories`](../api/doc-block-story.md) configuration option, you would run into a situation where the associated controls are not updating the story within the documentation page. This is a known limitation of the current implementation and will be addressed in a future release. +If you turned off inline rendering for your stories via the [`inline`](../api/doc-block-story.md#inline) configuration option, you would run into a situation where the associated controls are not updating the story within the documentation page. This is a known limitation of the current implementation and will be addressed in a future release. #### Learn more about Storybook documentation From 5423ff44ff5531b00c7611da219be7c7cea0b13d Mon Sep 17 00:00:00 2001 From: storybook-bot <32066757+storybook-bot@users.noreply.github.com> Date: Fri, 22 Dec 2023 13:02:51 +0000 Subject: [PATCH 025/136] Write changelog for 8.0.0-alpha.5 [skip ci] --- CHANGELOG.prerelease.md | 8 ++++++++ code/package.json | 3 ++- docs/versions/next.json | 2 +- 3 files changed, 11 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.prerelease.md b/CHANGELOG.prerelease.md index b9883dc793e..11c0c137f62 100644 --- a/CHANGELOG.prerelease.md +++ b/CHANGELOG.prerelease.md @@ -1,3 +1,11 @@ +## 8.0.0-alpha.5 + +- Core: Remove the `-s` flag from build & dev - [#25266](https://github.com/storybookjs/storybook/pull/25266), thanks [@ndelangen](https://github.com/ndelangen)! +- Core: Skip no-framework error when ignorePreview=true - [#25286](https://github.com/storybookjs/storybook/pull/25286), thanks [@ndelangen](https://github.com/ndelangen)! +- Core: Unique outputDir/cacheDir for each configDir - [#25264](https://github.com/storybookjs/storybook/pull/25264), thanks [@ndelangen](https://github.com/ndelangen)! +- Dependencies: Semver dependency fixes - [#25283](https://github.com/storybookjs/storybook/pull/25283), thanks [@ndelangen](https://github.com/ndelangen)! +- NextJS: Mock out `server-only` package for RSC - [#25263](https://github.com/storybookjs/storybook/pull/25263), thanks [@shilman](https://github.com/shilman)! + ## 8.0.0-alpha.4 - API: Remove stories.json support - [#25236](https://github.com/storybookjs/storybook/pull/25236), thanks [@shilman](https://github.com/shilman)! diff --git a/code/package.json b/code/package.json index 2f60707b53b..92db8268bb8 100644 --- a/code/package.json +++ b/code/package.json @@ -308,5 +308,6 @@ "Dependency Upgrades" ] ] - } + }, + "deferredNextVersion": "8.0.0-alpha.5" } diff --git a/docs/versions/next.json b/docs/versions/next.json index 060cd5ca7ef..5244617df4d 100644 --- a/docs/versions/next.json +++ b/docs/versions/next.json @@ -1 +1 @@ -{"version":"8.0.0-alpha.4","info":{"plain":"- API: Remove stories.json support - [#25236](https://github.com/storybookjs/storybook/pull/25236), thanks [@shilman](https://github.com/shilman)!\n- Addon Docs: Remove `react` peer dependency - [#24881](https://github.com/storybookjs/storybook/pull/24881), thanks [@JReinhold](https://github.com/JReinhold)!\n- Addon-docs: Support `` and `` in source viewer - [#19785](https://github.com/storybookjs/storybook/pull/19785), thanks [@zhyd1997](https://github.com/zhyd1997)!\n- Angular: Add random attribute to bootstrapped selector - [#24972](https://github.com/storybookjs/storybook/pull/24972), thanks [@Marklb](https://github.com/Marklb)!\n- Angular: Reduce the warnings from `ts-loader` via stricter list of `includes` - [#24531](https://github.com/storybookjs/storybook/pull/24531), thanks [@ndelangen](https://github.com/ndelangen)!\n- Blocks: Render colors in the same order as provided - [#25001](https://github.com/storybookjs/storybook/pull/25001), thanks [@kaelig](https://github.com/kaelig)!\n- CLI: Add prompt-only automigrate asking for react-removal - [#25215](https://github.com/storybookjs/storybook/pull/25215), thanks [@ndelangen](https://github.com/ndelangen)!\n- CLI: No longer add react in init - [#25196](https://github.com/storybookjs/storybook/pull/25196), thanks [@ndelangen](https://github.com/ndelangen)!\n- Core: Set bundle target to `node18` - [#25239](https://github.com/storybookjs/storybook/pull/25239), thanks [@shilman](https://github.com/shilman)!\n- SvelteKit: Fix missing `$app` modules - [#25132](https://github.com/storybookjs/storybook/pull/25132), thanks [@paoloricciuti](https://github.com/paoloricciuti)!\n- SvelteKit: Support 2.0 modules with mocks - [#25244](https://github.com/storybookjs/storybook/pull/25244), thanks [@paoloricciuti](https://github.com/paoloricciuti)!\n- UI: Embed `react-textarea-autosize` types - [#25235](https://github.com/storybookjs/storybook/pull/25235), thanks [@ndelangen](https://github.com/ndelangen)!"}} +{"version":"8.0.0-alpha.5","info":{"plain":"- Core: Remove the `-s` flag from build & dev - [#25266](https://github.com/storybookjs/storybook/pull/25266), thanks [@ndelangen](https://github.com/ndelangen)!\n- Core: Skip no-framework error when ignorePreview=true - [#25286](https://github.com/storybookjs/storybook/pull/25286), thanks [@ndelangen](https://github.com/ndelangen)!\n- Core: Unique outputDir/cacheDir for each configDir - [#25264](https://github.com/storybookjs/storybook/pull/25264), thanks [@ndelangen](https://github.com/ndelangen)!\n- Dependencies: Semver dependency fixes - [#25283](https://github.com/storybookjs/storybook/pull/25283), thanks [@ndelangen](https://github.com/ndelangen)!\n- NextJS: Mock out `server-only` package for RSC - [#25263](https://github.com/storybookjs/storybook/pull/25263), thanks [@shilman](https://github.com/shilman)!"}} From 146cd79790a04374573abfb4d72cf10dd6ec214e Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Fri, 22 Dec 2023 16:44:51 +0100 Subject: [PATCH 026/136] Adjust all tests --- .../nextjs/template/cli/ts-3-8/Header.tsx | 6 ++--- .../nextjs/template/cli/ts-4-9/Header.tsx | 6 ++--- code/lib/cli/src/generators/configure.test.ts | 1 - .../lib/instrumenter/src/instrumenter.test.ts | 23 +++++++++++-------- .../modules/preview-web/PreviewWeb.test.ts | 22 +++--------------- code/lib/preview-api/vitest.config.ts | 2 +- .../html/template/cli/ts-3-8/Header.ts | 6 ++--- .../html/template/cli/ts-4-9/Header.ts | 6 ++--- .../react/template/cli/ts-3-8/Header.tsx | 6 ++--- .../react/template/cli/ts-4-9/Header.tsx | 6 ++--- code/renderers/svelte/src/render.ts | 2 +- .../template/cli/ts-3-8/Header.ts | 6 ++--- .../template/cli/ts-3-8/Page.ts | 6 ++--- .../template/cli/ts-4-9/Header.ts | 6 ++--- .../template/cli/ts-4-9/Page.ts | 6 ++--- .../src/components/layout/Layout.stories.tsx | 2 ++ 16 files changed, 50 insertions(+), 62 deletions(-) diff --git a/code/frameworks/nextjs/template/cli/ts-3-8/Header.tsx b/code/frameworks/nextjs/template/cli/ts-3-8/Header.tsx index 01504601311..c806ddf023e 100644 --- a/code/frameworks/nextjs/template/cli/ts-3-8/Header.tsx +++ b/code/frameworks/nextjs/template/cli/ts-3-8/Header.tsx @@ -9,9 +9,9 @@ type User = { interface HeaderProps { user?: User; - onLogin: () => void; - onLogout: () => void; - onCreateAccount: () => void; + onLogin?: () => void; + onLogout?: () => void; + onCreateAccount?: () => void; } export const Header = ({ user, onLogin, onLogout, onCreateAccount }: HeaderProps) => ( diff --git a/code/frameworks/nextjs/template/cli/ts-4-9/Header.tsx b/code/frameworks/nextjs/template/cli/ts-4-9/Header.tsx index 01504601311..c806ddf023e 100644 --- a/code/frameworks/nextjs/template/cli/ts-4-9/Header.tsx +++ b/code/frameworks/nextjs/template/cli/ts-4-9/Header.tsx @@ -9,9 +9,9 @@ type User = { interface HeaderProps { user?: User; - onLogin: () => void; - onLogout: () => void; - onCreateAccount: () => void; + onLogin?: () => void; + onLogout?: () => void; + onCreateAccount?: () => void; } export const Header = ({ user, onLogin, onLogout, onCreateAccount }: HeaderProps) => ( diff --git a/code/lib/cli/src/generators/configure.test.ts b/code/lib/cli/src/generators/configure.test.ts index 98c48e41aba..c65710124fa 100644 --- a/code/lib/cli/src/generators/configure.test.ts +++ b/code/lib/cli/src/generators/configure.test.ts @@ -128,7 +128,6 @@ describe('configurePreview', () => { "/** @type { import('@storybook/react').Preview } */ const preview = { parameters: { - actions: { argTypesRegex: '^on[A-Z].*' }, controls: { matchers: { color: /(background|color)$/i, diff --git a/code/lib/instrumenter/src/instrumenter.test.ts b/code/lib/instrumenter/src/instrumenter.test.ts index a2266ba8ac8..980c930ab3b 100644 --- a/code/lib/instrumenter/src/instrumenter.test.ts +++ b/code/lib/instrumenter/src/instrumenter.test.ts @@ -1,7 +1,6 @@ /* eslint-disable no-underscore-dangle */ import { addons, mockChannel } from '@storybook/preview-api'; import { describe, beforeEach, afterEach, it, expect, vi } from 'vitest'; -import { logger } from '@storybook/client-logger'; import { FORCE_REMOUNT, SET_CURRENT_STORY, @@ -418,23 +417,23 @@ describe('Instrumenter', () => { ); }); - it('catches thrown errors and throws an ignoredException instead', () => { + it('rethrows errors', () => { const { fn } = instrument({ fn: () => { throw new Error('Boom!'); }, }); - expect(fn).toThrow('ignoredException'); + expect(fn).toThrow('Boom!'); }); - it('catches nested exceptions and throws an ignoredException instead', () => { + it('catches nested exceptions and rethrows', () => { const { fn1, fn2 } = instrument({ fn1: (_: any) => {}, fn2: () => { throw new Error('Boom!'); }, }); - expect(() => fn1(fn2())).toThrow('ignoredException'); + expect(() => fn1(fn2())).toThrow('Boom!'); }); it('bubbles child exceptions up to parent (in callback)', () => { @@ -448,15 +447,19 @@ describe('Instrumenter', () => { vi.spyOn(instrumented, 'fn1'); const { fn1, fn2 } = instrumented; - expect(() => + let error; + try { fn1(() => { fn2(); - }) - ).toThrow('ignoredException'); + }); + } catch (e) { + error = e; + } expect(fn1).toHaveBeenCalled(); - expect(logger.warn).toHaveBeenCalledWith(new Error('Boom!')); - expect((logger.warn as any).mock.calls[0][0].callId).toBe('kind--story [0] fn1 [0] fn2'); + expect(error).toEqual(new Error('Boom!')); + // @ts-expect-error callId is what is tested + expect(error.callId).toBe('kind--story [0] fn1 [0] fn2'); }); it("re-throws anything that isn't an error", () => { diff --git a/code/lib/preview-api/src/modules/preview-web/PreviewWeb.test.ts b/code/lib/preview-api/src/modules/preview-web/PreviewWeb.test.ts index 84a5bd78252..79188c8c8d9 100644 --- a/code/lib/preview-api/src/modules/preview-web/PreviewWeb.test.ts +++ b/code/lib/preview-api/src/modules/preview-web/PreviewWeb.test.ts @@ -12,7 +12,6 @@ import { FORCE_REMOUNT, FORCE_RE_RENDER, GLOBALS_UPDATED, - IGNORED_EXCEPTION, PREVIEW_KEYDOWN, RESET_STORY_ARGS, SET_CURRENT_STORY, @@ -130,6 +129,9 @@ beforeEach(() => { projectAnnotations.decorators[0].mockClear(); docsRenderer.render.mockClear(); vi.mocked(logger.warn).mockClear(); + // eslint-disable-next-line no-console + vi.mocked(console.error).mockReset(); + mockStoryIndex.mockReset().mockReturnValue(storyIndex); addons.setChannel(mockChannel as any); @@ -629,24 +631,6 @@ describe('PreviewWeb', () => { expect(mockChannel.emit).toHaveBeenCalledWith(STORY_RENDERED, 'component-one--a'); }); - - it('does not show error display if the render function throws IGNORED_EXCEPTION', async () => { - document.location.search = '?id=component-one--a'; - projectAnnotations.renderToCanvas.mockImplementation(() => { - throw IGNORED_EXCEPTION; - }); - - const preview = new PreviewWeb(); - await preview.initialize({ importFn, getProjectAnnotations }); - - await waitForRender(); - - expect(mockChannel.emit).toHaveBeenCalledWith( - STORY_THREW_EXCEPTION, - serializeError(IGNORED_EXCEPTION) - ); - expect(preview.view.showErrorDisplay).not.toHaveBeenCalled(); - }); }); describe('CSF docs entries', () => { diff --git a/code/lib/preview-api/vitest.config.ts b/code/lib/preview-api/vitest.config.ts index ddec70e554d..622642938f2 100644 --- a/code/lib/preview-api/vitest.config.ts +++ b/code/lib/preview-api/vitest.config.ts @@ -6,7 +6,7 @@ export default mergeConfig( vitestCommonConfig, defineConfig({ test: { - environment: 'node', + environment: 'jsdom', name: __dirname.split(sep).slice(-2).join(posix.sep), }, }) diff --git a/code/renderers/html/template/cli/ts-3-8/Header.ts b/code/renderers/html/template/cli/ts-3-8/Header.ts index 7bee7625965..5c6cec5c81b 100644 --- a/code/renderers/html/template/cli/ts-3-8/Header.ts +++ b/code/renderers/html/template/cli/ts-3-8/Header.ts @@ -3,9 +3,9 @@ import { createButton } from './Button'; export interface HeaderProps { user?: { name: string }; - onLogin: () => void; - onLogout: () => void; - onCreateAccount: () => void; + onLogin?: () => void; + onLogout?: () => void; + onCreateAccount?: () => void; } export const createHeader = ({ user, onLogout, onLogin, onCreateAccount }: HeaderProps) => { diff --git a/code/renderers/html/template/cli/ts-4-9/Header.ts b/code/renderers/html/template/cli/ts-4-9/Header.ts index 7bee7625965..5c6cec5c81b 100644 --- a/code/renderers/html/template/cli/ts-4-9/Header.ts +++ b/code/renderers/html/template/cli/ts-4-9/Header.ts @@ -3,9 +3,9 @@ import { createButton } from './Button'; export interface HeaderProps { user?: { name: string }; - onLogin: () => void; - onLogout: () => void; - onCreateAccount: () => void; + onLogin?: () => void; + onLogout?: () => void; + onCreateAccount?: () => void; } export const createHeader = ({ user, onLogout, onLogin, onCreateAccount }: HeaderProps) => { diff --git a/code/renderers/react/template/cli/ts-3-8/Header.tsx b/code/renderers/react/template/cli/ts-3-8/Header.tsx index 01504601311..c806ddf023e 100644 --- a/code/renderers/react/template/cli/ts-3-8/Header.tsx +++ b/code/renderers/react/template/cli/ts-3-8/Header.tsx @@ -9,9 +9,9 @@ type User = { interface HeaderProps { user?: User; - onLogin: () => void; - onLogout: () => void; - onCreateAccount: () => void; + onLogin?: () => void; + onLogout?: () => void; + onCreateAccount?: () => void; } export const Header = ({ user, onLogin, onLogout, onCreateAccount }: HeaderProps) => ( diff --git a/code/renderers/react/template/cli/ts-4-9/Header.tsx b/code/renderers/react/template/cli/ts-4-9/Header.tsx index 01504601311..c806ddf023e 100644 --- a/code/renderers/react/template/cli/ts-4-9/Header.tsx +++ b/code/renderers/react/template/cli/ts-4-9/Header.tsx @@ -9,9 +9,9 @@ type User = { interface HeaderProps { user?: User; - onLogin: () => void; - onLogout: () => void; - onCreateAccount: () => void; + onLogin?: () => void; + onLogout?: () => void; + onCreateAccount?: () => void; } export const Header = ({ user, onLogin, onLogout, onCreateAccount }: HeaderProps) => ( diff --git a/code/renderers/svelte/src/render.ts b/code/renderers/svelte/src/render.ts index b1821b69235..05fc9daf852 100644 --- a/code/renderers/svelte/src/render.ts +++ b/code/renderers/svelte/src/render.ts @@ -36,7 +36,7 @@ function teardown(canvasElement: SvelteRenderer['canvasElement']) { function createRoot(target: HTMLElement, props: any) { if ((svelte as any).createRoot) { // Svelte v5 - return svelte.createRoot(PreviewRender, { + return (svelte as any).createRoot(PreviewRender, { target, props, }); diff --git a/code/renderers/web-components/template/cli/ts-3-8/Header.ts b/code/renderers/web-components/template/cli/ts-3-8/Header.ts index d1ca01450c8..7c3c8b89375 100644 --- a/code/renderers/web-components/template/cli/ts-3-8/Header.ts +++ b/code/renderers/web-components/template/cli/ts-3-8/Header.ts @@ -9,9 +9,9 @@ type User = { export interface HeaderProps { user?: User; - onLogin: () => void; - onLogout: () => void; - onCreateAccount: () => void; + onLogin?: () => void; + onLogout?: () => void; + onCreateAccount?: () => void; } export const Header = ({ user, onLogin, onLogout, onCreateAccount }: HeaderProps) => html` diff --git a/code/renderers/web-components/template/cli/ts-3-8/Page.ts b/code/renderers/web-components/template/cli/ts-3-8/Page.ts index 74711e4aa7e..62be582343f 100644 --- a/code/renderers/web-components/template/cli/ts-3-8/Page.ts +++ b/code/renderers/web-components/template/cli/ts-3-8/Page.ts @@ -8,9 +8,9 @@ type User = { export interface PageProps { user?: User; - onLogin: () => void; - onLogout: () => void; - onCreateAccount: () => void; + onLogin?: () => void; + onLogout?: () => void; + onCreateAccount?: () => void; } export const Page = ({ user, onLogin, onLogout, onCreateAccount }: PageProps) => html` diff --git a/code/renderers/web-components/template/cli/ts-4-9/Header.ts b/code/renderers/web-components/template/cli/ts-4-9/Header.ts index d1ca01450c8..7c3c8b89375 100644 --- a/code/renderers/web-components/template/cli/ts-4-9/Header.ts +++ b/code/renderers/web-components/template/cli/ts-4-9/Header.ts @@ -9,9 +9,9 @@ type User = { export interface HeaderProps { user?: User; - onLogin: () => void; - onLogout: () => void; - onCreateAccount: () => void; + onLogin?: () => void; + onLogout?: () => void; + onCreateAccount?: () => void; } export const Header = ({ user, onLogin, onLogout, onCreateAccount }: HeaderProps) => html` diff --git a/code/renderers/web-components/template/cli/ts-4-9/Page.ts b/code/renderers/web-components/template/cli/ts-4-9/Page.ts index 74711e4aa7e..62be582343f 100644 --- a/code/renderers/web-components/template/cli/ts-4-9/Page.ts +++ b/code/renderers/web-components/template/cli/ts-4-9/Page.ts @@ -8,9 +8,9 @@ type User = { export interface PageProps { user?: User; - onLogin: () => void; - onLogout: () => void; - onCreateAccount: () => void; + onLogin?: () => void; + onLogout?: () => void; + onCreateAccount?: () => void; } export const Page = ({ user, onLogin, onLogout, onCreateAccount }: PageProps) => html` diff --git a/code/ui/manager/src/components/layout/Layout.stories.tsx b/code/ui/manager/src/components/layout/Layout.stories.tsx index 593e83dea5a..aea6f4a1a5f 100644 --- a/code/ui/manager/src/components/layout/Layout.stories.tsx +++ b/code/ui/manager/src/components/layout/Layout.stories.tsx @@ -4,6 +4,7 @@ import React, { useState } from 'react'; import { styled } from '@storybook/theming'; import type { Meta, StoryObj } from '@storybook/react'; +import { fn } from '@storybook/test'; import { Layout } from './Layout'; import { LayoutProvider } from './LayoutProvider'; import MobileNavigationStoriesMeta from '../mobile/navigation/MobileNavigation.stories'; @@ -58,6 +59,7 @@ const meta = { slotSidebar: , slotPanel: , slotPages: , + setManagerLayoutState: fn(), }, parameters: { theme: 'light', From 2ae4efa484232d027460f0edadd8d021b6181cff Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Sat, 23 Dec 2023 19:45:01 +0800 Subject: [PATCH 027/136] Vue3: Fix pnp by making compiler-core a dependency --- code/renderers/vue3/package.json | 3 +-- code/yarn.lock | 24 +++++++++++++++++++++--- 2 files changed, 22 insertions(+), 5 deletions(-) diff --git a/code/renderers/vue3/package.json b/code/renderers/vue3/package.json index 9fb1fe52e4c..907da3c0b31 100644 --- a/code/renderers/vue3/package.json +++ b/code/renderers/vue3/package.json @@ -51,6 +51,7 @@ "@storybook/global": "^5.0.0", "@storybook/preview-api": "workspace:*", "@storybook/types": "workspace:*", + "@vue/compiler-core": "^3.0.0", "lodash": "^4.17.21", "ts-dedent": "^2.0.0", "type-fest": "~2.19", @@ -60,13 +61,11 @@ "@digitak/esrun": "^3.2.2", "@types/prettier": "2.7.2", "@vitejs/plugin-vue": "^4.4.0", - "@vue/compiler-core": "^3.3.4", "typescript": "^5.3.2", "vue": "^3.2.47", "vue-tsc": "latest" }, "peerDependencies": { - "@vue/compiler-core": "^3.0.0", "vue": "^3.0.0" }, "engines": { diff --git a/code/yarn.lock b/code/yarn.lock index 6fe3d551d31..1a55377378c 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -6764,7 +6764,7 @@ __metadata: "@storybook/types": "workspace:*" "@types/prettier": "npm:2.7.2" "@vitejs/plugin-vue": "npm:^4.4.0" - "@vue/compiler-core": "npm:^3.3.4" + "@vue/compiler-core": "npm:^3.0.0" lodash: "npm:^4.17.21" ts-dedent: "npm:^2.0.0" type-fest: "npm:~2.19" @@ -6773,7 +6773,6 @@ __metadata: vue-component-type-helpers: "npm:latest" vue-tsc: "npm:latest" peerDependencies: - "@vue/compiler-core": ^3.0.0 vue: ^3.0.0 languageName: unknown linkType: soft @@ -8712,7 +8711,7 @@ __metadata: languageName: node linkType: hard -"@vue/compiler-core@npm:3.3.11, @vue/compiler-core@npm:^3.3.4": +"@vue/compiler-core@npm:3.3.11": version: 3.3.11 resolution: "@vue/compiler-core@npm:3.3.11" dependencies: @@ -8724,6 +8723,18 @@ __metadata: languageName: node linkType: hard +"@vue/compiler-core@npm:^3.0.0": + version: 3.3.13 + resolution: "@vue/compiler-core@npm:3.3.13" + dependencies: + "@babel/parser": "npm:^7.23.5" + "@vue/shared": "npm:3.3.13" + estree-walker: "npm:^2.0.2" + source-map-js: "npm:^1.0.2" + checksum: d0544ef5c12adb1f25523349dfb5468ee59928892c8476c491b66806840ab7de7a2c15b943ae3805dc8adcfd1a88435db08b97a0d23977eafe7e448a2a001754 + languageName: node + linkType: hard + "@vue/compiler-dom@npm:3.0.0": version: 3.0.0 resolution: "@vue/compiler-dom@npm:3.0.0" @@ -8928,6 +8939,13 @@ __metadata: languageName: node linkType: hard +"@vue/shared@npm:3.3.13": + version: 3.3.13 + resolution: "@vue/shared@npm:3.3.13" + checksum: 8f49e0ee51f7f1edce16aa7a97b5a7a36d8cf36dfd03c9dba194b6eb0e9685eb71335f0a2b17af17753b742fa2346f96ec371a3c0a56677a4e7eeb0f13426a56 + languageName: node + linkType: hard + "@vue/typescript@npm:1.8.15": version: 1.8.15 resolution: "@vue/typescript@npm:1.8.15" From d4cfbbc441c0b984de248c4315336ffa0f970853 Mon Sep 17 00:00:00 2001 From: storybook-bot <32066757+storybook-bot@users.noreply.github.com> Date: Sun, 24 Dec 2023 10:12:14 +0000 Subject: [PATCH 028/136] Bump version from "8.0.0-alpha.4" to "8.0.0-alpha.5" [skip ci] --- code/addons/a11y/package.json | 2 +- code/addons/actions/package.json | 2 +- code/addons/backgrounds/package.json | 2 +- code/addons/controls/package.json | 2 +- code/addons/docs/package.json | 2 +- code/addons/essentials/package.json | 2 +- code/addons/gfm/package.json | 2 +- code/addons/highlight/package.json | 2 +- code/addons/interactions/package.json | 2 +- code/addons/jest/package.json | 2 +- code/addons/links/package.json | 2 +- code/addons/measure/package.json | 2 +- code/addons/outline/package.json | 2 +- code/addons/storysource/package.json | 2 +- code/addons/themes/package.json | 2 +- code/addons/toolbars/package.json | 2 +- code/addons/viewport/package.json | 2 +- code/builders/builder-manager/package.json | 2 +- code/builders/builder-vite/package.json | 2 +- code/builders/builder-webpack5/package.json | 2 +- code/frameworks/angular/package.json | 2 +- code/frameworks/ember/package.json | 2 +- code/frameworks/html-vite/package.json | 2 +- code/frameworks/html-webpack5/package.json | 2 +- code/frameworks/nextjs/package.json | 2 +- code/frameworks/preact-vite/package.json | 2 +- code/frameworks/preact-webpack5/package.json | 2 +- code/frameworks/react-vite/package.json | 2 +- code/frameworks/react-webpack5/package.json | 2 +- code/frameworks/server-webpack5/package.json | 2 +- code/frameworks/svelte-vite/package.json | 2 +- code/frameworks/svelte-webpack5/package.json | 2 +- code/frameworks/sveltekit/package.json | 2 +- code/frameworks/vue3-vite/package.json | 2 +- code/frameworks/vue3-webpack5/package.json | 2 +- .../web-components-vite/package.json | 2 +- .../web-components-webpack5/package.json | 2 +- code/lib/channels/package.json | 2 +- code/lib/cli-sb/package.json | 2 +- code/lib/cli-storybook/package.json | 2 +- code/lib/cli/package.json | 2 +- code/lib/cli/src/versions.ts | 160 +++++++++--------- code/lib/client-logger/package.json | 2 +- code/lib/codemod/package.json | 2 +- code/lib/core-common/package.json | 2 +- code/lib/core-events/package.json | 2 +- code/lib/core-server/package.json | 2 +- code/lib/core-webpack/package.json | 2 +- code/lib/csf-plugin/package.json | 2 +- code/lib/csf-tools/package.json | 2 +- code/lib/docs-tools/package.json | 2 +- code/lib/instrumenter/package.json | 2 +- code/lib/manager-api/package.json | 2 +- code/lib/manager-api/src/version.ts | 2 +- code/lib/node-logger/package.json | 2 +- code/lib/preview-api/package.json | 2 +- code/lib/preview/package.json | 2 +- code/lib/react-dom-shim/package.json | 2 +- code/lib/router/package.json | 2 +- code/lib/source-loader/package.json | 2 +- code/lib/telemetry/package.json | 2 +- code/lib/test/package.json | 2 +- code/lib/theming/package.json | 2 +- code/lib/types/package.json | 2 +- code/package.json | 5 +- code/presets/create-react-app/package.json | 2 +- code/presets/html-webpack/package.json | 2 +- code/presets/preact-webpack/package.json | 2 +- code/presets/react-webpack/package.json | 2 +- code/presets/server-webpack/package.json | 2 +- code/presets/svelte-webpack/package.json | 2 +- code/presets/vue3-webpack/package.json | 2 +- .../web-components-webpack/package.json | 2 +- code/renderers/html/package.json | 2 +- code/renderers/preact/package.json | 2 +- code/renderers/react/package.json | 2 +- code/renderers/server/package.json | 2 +- code/renderers/svelte/package.json | 2 +- code/renderers/vue3/package.json | 2 +- code/renderers/web-components/package.json | 2 +- code/ui/blocks/package.json | 2 +- code/ui/components/package.json | 2 +- code/ui/manager/package.json | 2 +- 83 files changed, 163 insertions(+), 164 deletions(-) diff --git a/code/addons/a11y/package.json b/code/addons/a11y/package.json index a62171ca2e4..d951986511c 100644 --- a/code/addons/a11y/package.json +++ b/code/addons/a11y/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-a11y", - "version": "8.0.0-alpha.4", + "version": "8.0.0-alpha.5", "description": "Test component compliance with web accessibility standards", "keywords": [ "a11y", diff --git a/code/addons/actions/package.json b/code/addons/actions/package.json index da85fef889d..b0c35163d7d 100644 --- a/code/addons/actions/package.json +++ b/code/addons/actions/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-actions", - "version": "8.0.0-alpha.4", + "version": "8.0.0-alpha.5", "description": "Get UI feedback when an action is performed on an interactive element", "keywords": [ "storybook", diff --git a/code/addons/backgrounds/package.json b/code/addons/backgrounds/package.json index bad8d53c24b..2133e680bd2 100644 --- a/code/addons/backgrounds/package.json +++ b/code/addons/backgrounds/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-backgrounds", - "version": "8.0.0-alpha.4", + "version": "8.0.0-alpha.5", "description": "Switch backgrounds to view components in different settings", "keywords": [ "addon", diff --git a/code/addons/controls/package.json b/code/addons/controls/package.json index 8580c7c8c91..9af8033cb9e 100644 --- a/code/addons/controls/package.json +++ b/code/addons/controls/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-controls", - "version": "8.0.0-alpha.4", + "version": "8.0.0-alpha.5", "description": "Interact with component inputs dynamically in the Storybook UI", "keywords": [ "addon", diff --git a/code/addons/docs/package.json b/code/addons/docs/package.json index ba80d582f9f..84eb2c858ec 100644 --- a/code/addons/docs/package.json +++ b/code/addons/docs/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-docs", - "version": "8.0.0-alpha.4", + "version": "8.0.0-alpha.5", "description": "Document component usage and properties in Markdown", "keywords": [ "addon", diff --git a/code/addons/essentials/package.json b/code/addons/essentials/package.json index 8844085a583..ab47a59356b 100644 --- a/code/addons/essentials/package.json +++ b/code/addons/essentials/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-essentials", - "version": "8.0.0-alpha.4", + "version": "8.0.0-alpha.5", "description": "Curated addons to bring out the best of Storybook", "keywords": [ "addon", diff --git a/code/addons/gfm/package.json b/code/addons/gfm/package.json index 357ab8cae1e..0794b44e106 100644 --- a/code/addons/gfm/package.json +++ b/code/addons/gfm/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-mdx-gfm", - "version": "8.0.0-alpha.4", + "version": "8.0.0-alpha.5", "description": "GitHub Flavored Markdown in Storybook", "keywords": [ "addon", diff --git a/code/addons/highlight/package.json b/code/addons/highlight/package.json index 4da655f3e8c..7ee96e846df 100644 --- a/code/addons/highlight/package.json +++ b/code/addons/highlight/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-highlight", - "version": "8.0.0-alpha.4", + "version": "8.0.0-alpha.5", "description": "Highlight DOM nodes within your stories", "keywords": [ "storybook-addons", diff --git a/code/addons/interactions/package.json b/code/addons/interactions/package.json index a221e1c7169..2b81da285f7 100644 --- a/code/addons/interactions/package.json +++ b/code/addons/interactions/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-interactions", - "version": "8.0.0-alpha.4", + "version": "8.0.0-alpha.5", "description": "Automate, test and debug user interactions", "keywords": [ "storybook-addons", diff --git a/code/addons/jest/package.json b/code/addons/jest/package.json index 030b19ae4b2..a17caffadef 100644 --- a/code/addons/jest/package.json +++ b/code/addons/jest/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-jest", - "version": "8.0.0-alpha.4", + "version": "8.0.0-alpha.5", "description": "React storybook addon that show component jest report", "keywords": [ "addon", diff --git a/code/addons/links/package.json b/code/addons/links/package.json index 28d53b499f8..ea391377950 100644 --- a/code/addons/links/package.json +++ b/code/addons/links/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-links", - "version": "8.0.0-alpha.4", + "version": "8.0.0-alpha.5", "description": "Link stories together to build demos and prototypes with your UI components", "keywords": [ "addon", diff --git a/code/addons/measure/package.json b/code/addons/measure/package.json index ed43ed640a7..57248481805 100644 --- a/code/addons/measure/package.json +++ b/code/addons/measure/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-measure", - "version": "8.0.0-alpha.4", + "version": "8.0.0-alpha.5", "description": "Inspect layouts by visualizing the box model", "keywords": [ "storybook-addons", diff --git a/code/addons/outline/package.json b/code/addons/outline/package.json index f0816abfe22..179dce716ba 100644 --- a/code/addons/outline/package.json +++ b/code/addons/outline/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-outline", - "version": "8.0.0-alpha.4", + "version": "8.0.0-alpha.5", "description": "Outline all elements with CSS to help with layout placement and alignment", "keywords": [ "storybook-addons", diff --git a/code/addons/storysource/package.json b/code/addons/storysource/package.json index a2c0a79d15f..8545b0d959d 100644 --- a/code/addons/storysource/package.json +++ b/code/addons/storysource/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-storysource", - "version": "8.0.0-alpha.4", + "version": "8.0.0-alpha.5", "description": "View a story’s source code to see how it works and paste into your app", "keywords": [ "addon", diff --git a/code/addons/themes/package.json b/code/addons/themes/package.json index d06cacc7c11..bbac3186102 100644 --- a/code/addons/themes/package.json +++ b/code/addons/themes/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-themes", - "version": "8.0.0-alpha.4", + "version": "8.0.0-alpha.5", "description": "Switch between multiple themes for you components in Storybook", "keywords": [ "css", diff --git a/code/addons/toolbars/package.json b/code/addons/toolbars/package.json index 4b6b4912bae..3a8e32e9ca5 100644 --- a/code/addons/toolbars/package.json +++ b/code/addons/toolbars/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-toolbars", - "version": "8.0.0-alpha.4", + "version": "8.0.0-alpha.5", "description": "Create your own toolbar items that control story rendering", "keywords": [ "addon", diff --git a/code/addons/viewport/package.json b/code/addons/viewport/package.json index a5277fd1b8f..c110c4fba7f 100644 --- a/code/addons/viewport/package.json +++ b/code/addons/viewport/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-viewport", - "version": "8.0.0-alpha.4", + "version": "8.0.0-alpha.5", "description": "Build responsive components by adjusting Storybook’s viewport size and orientation", "keywords": [ "addon", diff --git a/code/builders/builder-manager/package.json b/code/builders/builder-manager/package.json index 528677690f6..e2e435f837b 100644 --- a/code/builders/builder-manager/package.json +++ b/code/builders/builder-manager/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/builder-manager", - "version": "8.0.0-alpha.4", + "version": "8.0.0-alpha.5", "description": "Storybook manager builder", "keywords": [ "storybook" diff --git a/code/builders/builder-vite/package.json b/code/builders/builder-vite/package.json index c8ecb6885ea..e0459493dbd 100644 --- a/code/builders/builder-vite/package.json +++ b/code/builders/builder-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/builder-vite", - "version": "8.0.0-alpha.4", + "version": "8.0.0-alpha.5", "description": "A plugin to run and build Storybooks with Vite", "homepage": "https://github.com/storybookjs/storybook/tree/next/code/builders/builder-vite/#readme", "bugs": { diff --git a/code/builders/builder-webpack5/package.json b/code/builders/builder-webpack5/package.json index cb2b8fe3d02..e38893b42bc 100644 --- a/code/builders/builder-webpack5/package.json +++ b/code/builders/builder-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/builder-webpack5", - "version": "8.0.0-alpha.4", + "version": "8.0.0-alpha.5", "description": "Storybook framework-agnostic API", "keywords": [ "storybook" diff --git a/code/frameworks/angular/package.json b/code/frameworks/angular/package.json index 1f532e8e7d2..ef030dd8bf5 100644 --- a/code/frameworks/angular/package.json +++ b/code/frameworks/angular/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/angular", - "version": "8.0.0-alpha.4", + "version": "8.0.0-alpha.5", "description": "Storybook for Angular: Develop Angular components in isolation with hot reloading.", "keywords": [ "storybook", diff --git a/code/frameworks/ember/package.json b/code/frameworks/ember/package.json index bfb7e1d3ff3..c843c7712cd 100644 --- a/code/frameworks/ember/package.json +++ b/code/frameworks/ember/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/ember", - "version": "8.0.0-alpha.4", + "version": "8.0.0-alpha.5", "description": "Storybook for Ember: Develop Ember Component in isolation with Hot Reloading.", "homepage": "https://github.com/storybookjs/storybook/tree/next/code/frameworks/ember", "bugs": { diff --git a/code/frameworks/html-vite/package.json b/code/frameworks/html-vite/package.json index f29f1567786..010de8d6a3d 100644 --- a/code/frameworks/html-vite/package.json +++ b/code/frameworks/html-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/html-vite", - "version": "8.0.0-alpha.4", + "version": "8.0.0-alpha.5", "description": "Storybook for HTML and Vite: Develop HTML in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/html-webpack5/package.json b/code/frameworks/html-webpack5/package.json index da35b84d27f..825bccbf896 100644 --- a/code/frameworks/html-webpack5/package.json +++ b/code/frameworks/html-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/html-webpack5", - "version": "8.0.0-alpha.4", + "version": "8.0.0-alpha.5", "description": "Storybook for HTML: View HTML snippets in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/nextjs/package.json b/code/frameworks/nextjs/package.json index 2c259c54756..ed10bbe5c11 100644 --- a/code/frameworks/nextjs/package.json +++ b/code/frameworks/nextjs/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/nextjs", - "version": "8.0.0-alpha.4", + "version": "8.0.0-alpha.5", "description": "Storybook for Next.js", "keywords": [ "storybook", diff --git a/code/frameworks/preact-vite/package.json b/code/frameworks/preact-vite/package.json index bccba808391..d9a44ff4fc4 100644 --- a/code/frameworks/preact-vite/package.json +++ b/code/frameworks/preact-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preact-vite", - "version": "8.0.0-alpha.4", + "version": "8.0.0-alpha.5", "description": "Storybook for Preact and Vite: Develop Preact components in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/preact-webpack5/package.json b/code/frameworks/preact-webpack5/package.json index 5ed8ab87fd2..7b49a2845fa 100644 --- a/code/frameworks/preact-webpack5/package.json +++ b/code/frameworks/preact-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preact-webpack5", - "version": "8.0.0-alpha.4", + "version": "8.0.0-alpha.5", "description": "Storybook for Preact: Develop Preact Component in isolation.", "keywords": [ "storybook" diff --git a/code/frameworks/react-vite/package.json b/code/frameworks/react-vite/package.json index ec13392db39..58bba3326b4 100644 --- a/code/frameworks/react-vite/package.json +++ b/code/frameworks/react-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/react-vite", - "version": "8.0.0-alpha.4", + "version": "8.0.0-alpha.5", "description": "Storybook for React and Vite: Develop React components in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/react-webpack5/package.json b/code/frameworks/react-webpack5/package.json index 44da3c64216..c63b840d607 100644 --- a/code/frameworks/react-webpack5/package.json +++ b/code/frameworks/react-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/react-webpack5", - "version": "8.0.0-alpha.4", + "version": "8.0.0-alpha.5", "description": "Storybook for React: Develop React Component in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/server-webpack5/package.json b/code/frameworks/server-webpack5/package.json index 06bdc2b2bbe..959f06e435b 100644 --- a/code/frameworks/server-webpack5/package.json +++ b/code/frameworks/server-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/server-webpack5", - "version": "8.0.0-alpha.4", + "version": "8.0.0-alpha.5", "description": "Storybook for Server: View HTML snippets from a server in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/svelte-vite/package.json b/code/frameworks/svelte-vite/package.json index 9dedf2eaf71..d8abba1f31d 100644 --- a/code/frameworks/svelte-vite/package.json +++ b/code/frameworks/svelte-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/svelte-vite", - "version": "8.0.0-alpha.4", + "version": "8.0.0-alpha.5", "description": "Storybook for Svelte and Vite: Develop Svelte components in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/svelte-webpack5/package.json b/code/frameworks/svelte-webpack5/package.json index bd7c166692e..7c5441c1989 100644 --- a/code/frameworks/svelte-webpack5/package.json +++ b/code/frameworks/svelte-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/svelte-webpack5", - "version": "8.0.0-alpha.4", + "version": "8.0.0-alpha.5", "description": "Storybook for Svelte: Develop Svelte Component in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/sveltekit/package.json b/code/frameworks/sveltekit/package.json index f52a2a20e56..d3330cb5cfb 100644 --- a/code/frameworks/sveltekit/package.json +++ b/code/frameworks/sveltekit/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/sveltekit", - "version": "8.0.0-alpha.4", + "version": "8.0.0-alpha.5", "description": "Storybook for SvelteKit", "keywords": [ "storybook", diff --git a/code/frameworks/vue3-vite/package.json b/code/frameworks/vue3-vite/package.json index 37d49111999..ece127b9e62 100644 --- a/code/frameworks/vue3-vite/package.json +++ b/code/frameworks/vue3-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/vue3-vite", - "version": "8.0.0-alpha.4", + "version": "8.0.0-alpha.5", "description": "Storybook for Vue3 and Vite: Develop Vue3 components in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/vue3-webpack5/package.json b/code/frameworks/vue3-webpack5/package.json index 184583a7cf1..d588c430fe3 100644 --- a/code/frameworks/vue3-webpack5/package.json +++ b/code/frameworks/vue3-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/vue3-webpack5", - "version": "8.0.0-alpha.4", + "version": "8.0.0-alpha.5", "description": "Storybook for Vue 3: Develop Vue 3 Components in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/web-components-vite/package.json b/code/frameworks/web-components-vite/package.json index f72f4754705..1c860ecda8e 100644 --- a/code/frameworks/web-components-vite/package.json +++ b/code/frameworks/web-components-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/web-components-vite", - "version": "8.0.0-alpha.4", + "version": "8.0.0-alpha.5", "description": "Storybook for web-components and Vite: Develop Web Components in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/web-components-webpack5/package.json b/code/frameworks/web-components-webpack5/package.json index d41a40ea985..9e7ff1aca55 100644 --- a/code/frameworks/web-components-webpack5/package.json +++ b/code/frameworks/web-components-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/web-components-webpack5", - "version": "8.0.0-alpha.4", + "version": "8.0.0-alpha.5", "description": "Storybook for web-components: View web components snippets in isolation with Hot Reloading.", "keywords": [ "lit", diff --git a/code/lib/channels/package.json b/code/lib/channels/package.json index 5faa33d3f95..41f91523894 100644 --- a/code/lib/channels/package.json +++ b/code/lib/channels/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/channels", - "version": "8.0.0-alpha.4", + "version": "8.0.0-alpha.5", "description": "", "keywords": [ "storybook" diff --git a/code/lib/cli-sb/package.json b/code/lib/cli-sb/package.json index f336503e3e2..f4598c113a4 100644 --- a/code/lib/cli-sb/package.json +++ b/code/lib/cli-sb/package.json @@ -1,6 +1,6 @@ { "name": "sb", - "version": "8.0.0-alpha.4", + "version": "8.0.0-alpha.5", "description": "Storybook CLI", "keywords": [ "storybook" diff --git a/code/lib/cli-storybook/package.json b/code/lib/cli-storybook/package.json index 4aa75cf6a4a..483f4a14819 100644 --- a/code/lib/cli-storybook/package.json +++ b/code/lib/cli-storybook/package.json @@ -1,6 +1,6 @@ { "name": "storybook", - "version": "8.0.0-alpha.4", + "version": "8.0.0-alpha.5", "description": "Storybook CLI", "keywords": [ "storybook" diff --git a/code/lib/cli/package.json b/code/lib/cli/package.json index d4493a1bc4a..bfaba5b57ac 100644 --- a/code/lib/cli/package.json +++ b/code/lib/cli/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/cli", - "version": "8.0.0-alpha.4", + "version": "8.0.0-alpha.5", "description": "Storybook's CLI - install, dev, build, upgrade, and more", "keywords": [ "cli", diff --git a/code/lib/cli/src/versions.ts b/code/lib/cli/src/versions.ts index 49bb1276857..25a82dcb02a 100644 --- a/code/lib/cli/src/versions.ts +++ b/code/lib/cli/src/versions.ts @@ -1,83 +1,83 @@ // auto generated file, do not edit export default { - '@storybook/addon-a11y': '8.0.0-alpha.4', - '@storybook/addon-actions': '8.0.0-alpha.4', - '@storybook/addon-backgrounds': '8.0.0-alpha.4', - '@storybook/addon-controls': '8.0.0-alpha.4', - '@storybook/addon-docs': '8.0.0-alpha.4', - '@storybook/addon-essentials': '8.0.0-alpha.4', - '@storybook/addon-highlight': '8.0.0-alpha.4', - '@storybook/addon-interactions': '8.0.0-alpha.4', - '@storybook/addon-jest': '8.0.0-alpha.4', - '@storybook/addon-links': '8.0.0-alpha.4', - '@storybook/addon-mdx-gfm': '8.0.0-alpha.4', - '@storybook/addon-measure': '8.0.0-alpha.4', - '@storybook/addon-outline': '8.0.0-alpha.4', - '@storybook/addon-storysource': '8.0.0-alpha.4', - '@storybook/addon-themes': '8.0.0-alpha.4', - '@storybook/addon-toolbars': '8.0.0-alpha.4', - '@storybook/addon-viewport': '8.0.0-alpha.4', - '@storybook/angular': '8.0.0-alpha.4', - '@storybook/blocks': '8.0.0-alpha.4', - '@storybook/builder-manager': '8.0.0-alpha.4', - '@storybook/builder-vite': '8.0.0-alpha.4', - '@storybook/builder-webpack5': '8.0.0-alpha.4', - '@storybook/channels': '8.0.0-alpha.4', - '@storybook/cli': '8.0.0-alpha.4', - '@storybook/client-logger': '8.0.0-alpha.4', - '@storybook/codemod': '8.0.0-alpha.4', - '@storybook/components': '8.0.0-alpha.4', - '@storybook/core-common': '8.0.0-alpha.4', - '@storybook/core-events': '8.0.0-alpha.4', - '@storybook/core-server': '8.0.0-alpha.4', - '@storybook/core-webpack': '8.0.0-alpha.4', - '@storybook/csf-plugin': '8.0.0-alpha.4', - '@storybook/csf-tools': '8.0.0-alpha.4', - '@storybook/docs-tools': '8.0.0-alpha.4', - '@storybook/ember': '8.0.0-alpha.4', - '@storybook/html': '8.0.0-alpha.4', - '@storybook/html-vite': '8.0.0-alpha.4', - '@storybook/html-webpack5': '8.0.0-alpha.4', - '@storybook/instrumenter': '8.0.0-alpha.4', - '@storybook/manager': '8.0.0-alpha.4', - '@storybook/manager-api': '8.0.0-alpha.4', - '@storybook/nextjs': '8.0.0-alpha.4', - '@storybook/node-logger': '8.0.0-alpha.4', - '@storybook/preact': '8.0.0-alpha.4', - '@storybook/preact-vite': '8.0.0-alpha.4', - '@storybook/preact-webpack5': '8.0.0-alpha.4', - '@storybook/preset-create-react-app': '8.0.0-alpha.4', - '@storybook/preset-html-webpack': '8.0.0-alpha.4', - '@storybook/preset-preact-webpack': '8.0.0-alpha.4', - '@storybook/preset-react-webpack': '8.0.0-alpha.4', - '@storybook/preset-server-webpack': '8.0.0-alpha.4', - '@storybook/preset-svelte-webpack': '8.0.0-alpha.4', - '@storybook/preset-vue3-webpack': '8.0.0-alpha.4', - '@storybook/preset-web-components-webpack': '8.0.0-alpha.4', - '@storybook/preview': '8.0.0-alpha.4', - '@storybook/preview-api': '8.0.0-alpha.4', - '@storybook/react': '8.0.0-alpha.4', - '@storybook/react-dom-shim': '8.0.0-alpha.4', - '@storybook/react-vite': '8.0.0-alpha.4', - '@storybook/react-webpack5': '8.0.0-alpha.4', - '@storybook/router': '8.0.0-alpha.4', - '@storybook/server': '8.0.0-alpha.4', - '@storybook/server-webpack5': '8.0.0-alpha.4', - '@storybook/source-loader': '8.0.0-alpha.4', - '@storybook/svelte': '8.0.0-alpha.4', - '@storybook/svelte-vite': '8.0.0-alpha.4', - '@storybook/svelte-webpack5': '8.0.0-alpha.4', - '@storybook/sveltekit': '8.0.0-alpha.4', - '@storybook/telemetry': '8.0.0-alpha.4', - '@storybook/test': '8.0.0-alpha.4', - '@storybook/theming': '8.0.0-alpha.4', - '@storybook/types': '8.0.0-alpha.4', - '@storybook/vue3': '8.0.0-alpha.4', - '@storybook/vue3-vite': '8.0.0-alpha.4', - '@storybook/vue3-webpack5': '8.0.0-alpha.4', - '@storybook/web-components': '8.0.0-alpha.4', - '@storybook/web-components-vite': '8.0.0-alpha.4', - '@storybook/web-components-webpack5': '8.0.0-alpha.4', - sb: '8.0.0-alpha.4', - storybook: '8.0.0-alpha.4', + '@storybook/addon-a11y': '8.0.0-alpha.5', + '@storybook/addon-actions': '8.0.0-alpha.5', + '@storybook/addon-backgrounds': '8.0.0-alpha.5', + '@storybook/addon-controls': '8.0.0-alpha.5', + '@storybook/addon-docs': '8.0.0-alpha.5', + '@storybook/addon-essentials': '8.0.0-alpha.5', + '@storybook/addon-highlight': '8.0.0-alpha.5', + '@storybook/addon-interactions': '8.0.0-alpha.5', + '@storybook/addon-jest': '8.0.0-alpha.5', + '@storybook/addon-links': '8.0.0-alpha.5', + '@storybook/addon-mdx-gfm': '8.0.0-alpha.5', + '@storybook/addon-measure': '8.0.0-alpha.5', + '@storybook/addon-outline': '8.0.0-alpha.5', + '@storybook/addon-storysource': '8.0.0-alpha.5', + '@storybook/addon-themes': '8.0.0-alpha.5', + '@storybook/addon-toolbars': '8.0.0-alpha.5', + '@storybook/addon-viewport': '8.0.0-alpha.5', + '@storybook/angular': '8.0.0-alpha.5', + '@storybook/blocks': '8.0.0-alpha.5', + '@storybook/builder-manager': '8.0.0-alpha.5', + '@storybook/builder-vite': '8.0.0-alpha.5', + '@storybook/builder-webpack5': '8.0.0-alpha.5', + '@storybook/channels': '8.0.0-alpha.5', + '@storybook/cli': '8.0.0-alpha.5', + '@storybook/client-logger': '8.0.0-alpha.5', + '@storybook/codemod': '8.0.0-alpha.5', + '@storybook/components': '8.0.0-alpha.5', + '@storybook/core-common': '8.0.0-alpha.5', + '@storybook/core-events': '8.0.0-alpha.5', + '@storybook/core-server': '8.0.0-alpha.5', + '@storybook/core-webpack': '8.0.0-alpha.5', + '@storybook/csf-plugin': '8.0.0-alpha.5', + '@storybook/csf-tools': '8.0.0-alpha.5', + '@storybook/docs-tools': '8.0.0-alpha.5', + '@storybook/ember': '8.0.0-alpha.5', + '@storybook/html': '8.0.0-alpha.5', + '@storybook/html-vite': '8.0.0-alpha.5', + '@storybook/html-webpack5': '8.0.0-alpha.5', + '@storybook/instrumenter': '8.0.0-alpha.5', + '@storybook/manager': '8.0.0-alpha.5', + '@storybook/manager-api': '8.0.0-alpha.5', + '@storybook/nextjs': '8.0.0-alpha.5', + '@storybook/node-logger': '8.0.0-alpha.5', + '@storybook/preact': '8.0.0-alpha.5', + '@storybook/preact-vite': '8.0.0-alpha.5', + '@storybook/preact-webpack5': '8.0.0-alpha.5', + '@storybook/preset-create-react-app': '8.0.0-alpha.5', + '@storybook/preset-html-webpack': '8.0.0-alpha.5', + '@storybook/preset-preact-webpack': '8.0.0-alpha.5', + '@storybook/preset-react-webpack': '8.0.0-alpha.5', + '@storybook/preset-server-webpack': '8.0.0-alpha.5', + '@storybook/preset-svelte-webpack': '8.0.0-alpha.5', + '@storybook/preset-vue3-webpack': '8.0.0-alpha.5', + '@storybook/preset-web-components-webpack': '8.0.0-alpha.5', + '@storybook/preview': '8.0.0-alpha.5', + '@storybook/preview-api': '8.0.0-alpha.5', + '@storybook/react': '8.0.0-alpha.5', + '@storybook/react-dom-shim': '8.0.0-alpha.5', + '@storybook/react-vite': '8.0.0-alpha.5', + '@storybook/react-webpack5': '8.0.0-alpha.5', + '@storybook/router': '8.0.0-alpha.5', + '@storybook/server': '8.0.0-alpha.5', + '@storybook/server-webpack5': '8.0.0-alpha.5', + '@storybook/source-loader': '8.0.0-alpha.5', + '@storybook/svelte': '8.0.0-alpha.5', + '@storybook/svelte-vite': '8.0.0-alpha.5', + '@storybook/svelte-webpack5': '8.0.0-alpha.5', + '@storybook/sveltekit': '8.0.0-alpha.5', + '@storybook/telemetry': '8.0.0-alpha.5', + '@storybook/test': '8.0.0-alpha.5', + '@storybook/theming': '8.0.0-alpha.5', + '@storybook/types': '8.0.0-alpha.5', + '@storybook/vue3': '8.0.0-alpha.5', + '@storybook/vue3-vite': '8.0.0-alpha.5', + '@storybook/vue3-webpack5': '8.0.0-alpha.5', + '@storybook/web-components': '8.0.0-alpha.5', + '@storybook/web-components-vite': '8.0.0-alpha.5', + '@storybook/web-components-webpack5': '8.0.0-alpha.5', + sb: '8.0.0-alpha.5', + storybook: '8.0.0-alpha.5', }; diff --git a/code/lib/client-logger/package.json b/code/lib/client-logger/package.json index 157ba7ae102..baf663a3a7a 100644 --- a/code/lib/client-logger/package.json +++ b/code/lib/client-logger/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/client-logger", - "version": "8.0.0-alpha.4", + "version": "8.0.0-alpha.5", "description": "", "keywords": [ "storybook" diff --git a/code/lib/codemod/package.json b/code/lib/codemod/package.json index f3dda81527b..1c745d055ff 100644 --- a/code/lib/codemod/package.json +++ b/code/lib/codemod/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/codemod", - "version": "8.0.0-alpha.4", + "version": "8.0.0-alpha.5", "description": "A collection of codemod scripts written with JSCodeshift", "keywords": [ "storybook" diff --git a/code/lib/core-common/package.json b/code/lib/core-common/package.json index 12485ad7e4b..7a3c1b08720 100644 --- a/code/lib/core-common/package.json +++ b/code/lib/core-common/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/core-common", - "version": "8.0.0-alpha.4", + "version": "8.0.0-alpha.5", "description": "Storybook framework-agnostic API", "keywords": [ "storybook" diff --git a/code/lib/core-events/package.json b/code/lib/core-events/package.json index 8ed6a52ddfa..54a3c2cd289 100644 --- a/code/lib/core-events/package.json +++ b/code/lib/core-events/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/core-events", - "version": "8.0.0-alpha.4", + "version": "8.0.0-alpha.5", "description": "Event names used in storybook core", "keywords": [ "storybook" diff --git a/code/lib/core-server/package.json b/code/lib/core-server/package.json index 2fb8d372ff2..b12fe37ae24 100644 --- a/code/lib/core-server/package.json +++ b/code/lib/core-server/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/core-server", - "version": "8.0.0-alpha.4", + "version": "8.0.0-alpha.5", "description": "Storybook framework-agnostic API", "keywords": [ "storybook" diff --git a/code/lib/core-webpack/package.json b/code/lib/core-webpack/package.json index cdc7af4d91d..cba0e22e48e 100644 --- a/code/lib/core-webpack/package.json +++ b/code/lib/core-webpack/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/core-webpack", - "version": "8.0.0-alpha.4", + "version": "8.0.0-alpha.5", "description": "Storybook framework-agnostic API", "keywords": [ "storybook" diff --git a/code/lib/csf-plugin/package.json b/code/lib/csf-plugin/package.json index c5a678fc825..185efb16679 100644 --- a/code/lib/csf-plugin/package.json +++ b/code/lib/csf-plugin/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/csf-plugin", - "version": "8.0.0-alpha.4", + "version": "8.0.0-alpha.5", "description": "Enrich CSF files via static analysis", "keywords": [ "storybook" diff --git a/code/lib/csf-tools/package.json b/code/lib/csf-tools/package.json index 9fac705c176..b8d58d1e7b2 100644 --- a/code/lib/csf-tools/package.json +++ b/code/lib/csf-tools/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/csf-tools", - "version": "8.0.0-alpha.4", + "version": "8.0.0-alpha.5", "description": "Parse and manipulate CSF and Storybook config files", "keywords": [ "storybook" diff --git a/code/lib/docs-tools/package.json b/code/lib/docs-tools/package.json index 183f4409000..d5745cdaadc 100644 --- a/code/lib/docs-tools/package.json +++ b/code/lib/docs-tools/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/docs-tools", - "version": "8.0.0-alpha.4", + "version": "8.0.0-alpha.5", "description": "Shared utility functions for frameworks to implement docs", "keywords": [ "storybook" diff --git a/code/lib/instrumenter/package.json b/code/lib/instrumenter/package.json index 7b959d261b6..8db3b33e4df 100644 --- a/code/lib/instrumenter/package.json +++ b/code/lib/instrumenter/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/instrumenter", - "version": "8.0.0-alpha.4", + "version": "8.0.0-alpha.5", "description": "", "keywords": [ "storybook" diff --git a/code/lib/manager-api/package.json b/code/lib/manager-api/package.json index 5a9c979c9e1..3c2db98451d 100644 --- a/code/lib/manager-api/package.json +++ b/code/lib/manager-api/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/manager-api", - "version": "8.0.0-alpha.4", + "version": "8.0.0-alpha.5", "description": "Core Storybook Manager API & Context", "keywords": [ "storybook" diff --git a/code/lib/manager-api/src/version.ts b/code/lib/manager-api/src/version.ts index d8c01196cc9..1065b862dca 100644 --- a/code/lib/manager-api/src/version.ts +++ b/code/lib/manager-api/src/version.ts @@ -1 +1 @@ -export const version = '8.0.0-alpha.4'; +export const version = '8.0.0-alpha.5'; diff --git a/code/lib/node-logger/package.json b/code/lib/node-logger/package.json index 0665c34bb0b..d77ce7c5439 100644 --- a/code/lib/node-logger/package.json +++ b/code/lib/node-logger/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/node-logger", - "version": "8.0.0-alpha.4", + "version": "8.0.0-alpha.5", "description": "", "keywords": [ "storybook" diff --git a/code/lib/preview-api/package.json b/code/lib/preview-api/package.json index 79b6f15a5af..b4bce180dc2 100644 --- a/code/lib/preview-api/package.json +++ b/code/lib/preview-api/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preview-api", - "version": "8.0.0-alpha.4", + "version": "8.0.0-alpha.5", "description": "", "keywords": [ "storybook" diff --git a/code/lib/preview/package.json b/code/lib/preview/package.json index e915b1cf7e4..a3aa0f54ad9 100644 --- a/code/lib/preview/package.json +++ b/code/lib/preview/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preview", - "version": "8.0.0-alpha.4", + "version": "8.0.0-alpha.5", "description": "", "keywords": [ "storybook" diff --git a/code/lib/react-dom-shim/package.json b/code/lib/react-dom-shim/package.json index bd3b107a83f..0fabfac1448 100644 --- a/code/lib/react-dom-shim/package.json +++ b/code/lib/react-dom-shim/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/react-dom-shim", - "version": "8.0.0-alpha.4", + "version": "8.0.0-alpha.5", "description": "", "keywords": [ "storybook" diff --git a/code/lib/router/package.json b/code/lib/router/package.json index 08744e7192e..bf53c948683 100644 --- a/code/lib/router/package.json +++ b/code/lib/router/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/router", - "version": "8.0.0-alpha.4", + "version": "8.0.0-alpha.5", "description": "Core Storybook Router", "keywords": [ "storybook" diff --git a/code/lib/source-loader/package.json b/code/lib/source-loader/package.json index ee5d0745df1..5680040c33c 100644 --- a/code/lib/source-loader/package.json +++ b/code/lib/source-loader/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/source-loader", - "version": "8.0.0-alpha.4", + "version": "8.0.0-alpha.5", "description": "Source loader", "keywords": [ "lib", diff --git a/code/lib/telemetry/package.json b/code/lib/telemetry/package.json index 382868ca56c..2d273baae41 100644 --- a/code/lib/telemetry/package.json +++ b/code/lib/telemetry/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/telemetry", - "version": "8.0.0-alpha.4", + "version": "8.0.0-alpha.5", "description": "Telemetry logging for crash reports and usage statistics", "keywords": [ "storybook" diff --git a/code/lib/test/package.json b/code/lib/test/package.json index ccbf58aea9a..4977b44c0c2 100644 --- a/code/lib/test/package.json +++ b/code/lib/test/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/test", - "version": "8.0.0-alpha.4", + "version": "8.0.0-alpha.5", "description": "", "keywords": [ "storybook" diff --git a/code/lib/theming/package.json b/code/lib/theming/package.json index 01cb4665f94..234dc86976a 100644 --- a/code/lib/theming/package.json +++ b/code/lib/theming/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/theming", - "version": "8.0.0-alpha.4", + "version": "8.0.0-alpha.5", "description": "Core Storybook Components", "keywords": [ "storybook" diff --git a/code/lib/types/package.json b/code/lib/types/package.json index f96b1bacb75..8eba56ce78b 100644 --- a/code/lib/types/package.json +++ b/code/lib/types/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/types", - "version": "8.0.0-alpha.4", + "version": "8.0.0-alpha.5", "description": "Core Storybook TS Types", "keywords": [ "storybook" diff --git a/code/package.json b/code/package.json index 92db8268bb8..6c3ff474588 100644 --- a/code/package.json +++ b/code/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/root", - "version": "8.0.0-alpha.4", + "version": "8.0.0-alpha.5", "private": true, "description": "Storybook root", "homepage": "https://storybook.js.org/", @@ -308,6 +308,5 @@ "Dependency Upgrades" ] ] - }, - "deferredNextVersion": "8.0.0-alpha.5" + } } diff --git a/code/presets/create-react-app/package.json b/code/presets/create-react-app/package.json index 9a5f30a1b3c..13411ebf33a 100644 --- a/code/presets/create-react-app/package.json +++ b/code/presets/create-react-app/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preset-create-react-app", - "version": "8.0.0-alpha.4", + "version": "8.0.0-alpha.5", "description": "Storybook for Create React App preset", "keywords": [ "storybook" diff --git a/code/presets/html-webpack/package.json b/code/presets/html-webpack/package.json index f7bd2136473..ec63833fe6f 100644 --- a/code/presets/html-webpack/package.json +++ b/code/presets/html-webpack/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preset-html-webpack", - "version": "8.0.0-alpha.4", + "version": "8.0.0-alpha.5", "description": "Storybook for HTML: View HTML snippets in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/presets/preact-webpack/package.json b/code/presets/preact-webpack/package.json index 5337cd7fc1b..e430127e413 100644 --- a/code/presets/preact-webpack/package.json +++ b/code/presets/preact-webpack/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preset-preact-webpack", - "version": "8.0.0-alpha.4", + "version": "8.0.0-alpha.5", "description": "Storybook for Preact: Develop Preact Component in isolation.", "keywords": [ "storybook" diff --git a/code/presets/react-webpack/package.json b/code/presets/react-webpack/package.json index 5f53ffa47e3..42457e27d99 100644 --- a/code/presets/react-webpack/package.json +++ b/code/presets/react-webpack/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preset-react-webpack", - "version": "8.0.0-alpha.4", + "version": "8.0.0-alpha.5", "description": "Storybook for React: Develop React Component in isolation with Hot Reloading", "keywords": [ "storybook" diff --git a/code/presets/server-webpack/package.json b/code/presets/server-webpack/package.json index f6230eb9945..253017711ca 100644 --- a/code/presets/server-webpack/package.json +++ b/code/presets/server-webpack/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preset-server-webpack", - "version": "8.0.0-alpha.4", + "version": "8.0.0-alpha.5", "description": "Storybook for Server: View HTML snippets from a server in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/presets/svelte-webpack/package.json b/code/presets/svelte-webpack/package.json index c600ccf2270..f8ad27912e6 100644 --- a/code/presets/svelte-webpack/package.json +++ b/code/presets/svelte-webpack/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preset-svelte-webpack", - "version": "8.0.0-alpha.4", + "version": "8.0.0-alpha.5", "description": "Storybook for Svelte: Develop Svelte Component in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/presets/vue3-webpack/package.json b/code/presets/vue3-webpack/package.json index 81cf91bd55a..c5e9d67c208 100644 --- a/code/presets/vue3-webpack/package.json +++ b/code/presets/vue3-webpack/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preset-vue3-webpack", - "version": "8.0.0-alpha.4", + "version": "8.0.0-alpha.5", "description": "Storybook for Vue 3: Develop Vue 3 Components in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/presets/web-components-webpack/package.json b/code/presets/web-components-webpack/package.json index d81881d241c..43e7f784170 100644 --- a/code/presets/web-components-webpack/package.json +++ b/code/presets/web-components-webpack/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preset-web-components-webpack", - "version": "8.0.0-alpha.4", + "version": "8.0.0-alpha.5", "description": "Storybook for web-components: View web components snippets in isolation with Hot Reloading.", "keywords": [ "lit", diff --git a/code/renderers/html/package.json b/code/renderers/html/package.json index 932080a04f5..9fecf06b8fe 100644 --- a/code/renderers/html/package.json +++ b/code/renderers/html/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/html", - "version": "8.0.0-alpha.4", + "version": "8.0.0-alpha.5", "description": "Storybook HTML renderer", "keywords": [ "storybook" diff --git a/code/renderers/preact/package.json b/code/renderers/preact/package.json index b2674fdf89b..1a2b75d77c5 100644 --- a/code/renderers/preact/package.json +++ b/code/renderers/preact/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preact", - "version": "8.0.0-alpha.4", + "version": "8.0.0-alpha.5", "description": "Storybook Preact renderer", "keywords": [ "storybook" diff --git a/code/renderers/react/package.json b/code/renderers/react/package.json index 9ac2e9253e4..b49b1b48d39 100644 --- a/code/renderers/react/package.json +++ b/code/renderers/react/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/react", - "version": "8.0.0-alpha.4", + "version": "8.0.0-alpha.5", "description": "Storybook React renderer", "keywords": [ "storybook" diff --git a/code/renderers/server/package.json b/code/renderers/server/package.json index 908b0fd9efb..16b6fb4c3f2 100644 --- a/code/renderers/server/package.json +++ b/code/renderers/server/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/server", - "version": "8.0.0-alpha.4", + "version": "8.0.0-alpha.5", "description": "Storybook Server renderer", "keywords": [ "storybook" diff --git a/code/renderers/svelte/package.json b/code/renderers/svelte/package.json index 590a8154058..2c7ceeefef1 100644 --- a/code/renderers/svelte/package.json +++ b/code/renderers/svelte/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/svelte", - "version": "8.0.0-alpha.4", + "version": "8.0.0-alpha.5", "description": "Storybook Svelte renderer", "keywords": [ "storybook" diff --git a/code/renderers/vue3/package.json b/code/renderers/vue3/package.json index 9fb1fe52e4c..beccc0f8a1f 100644 --- a/code/renderers/vue3/package.json +++ b/code/renderers/vue3/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/vue3", - "version": "8.0.0-alpha.4", + "version": "8.0.0-alpha.5", "description": "Storybook Vue 3 renderer", "keywords": [ "storybook" diff --git a/code/renderers/web-components/package.json b/code/renderers/web-components/package.json index e43e1a46de1..a14f941475a 100644 --- a/code/renderers/web-components/package.json +++ b/code/renderers/web-components/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/web-components", - "version": "8.0.0-alpha.4", + "version": "8.0.0-alpha.5", "description": "Storybook web-components renderer", "keywords": [ "lit", diff --git a/code/ui/blocks/package.json b/code/ui/blocks/package.json index 3584ccf1253..ed0f5f5c144 100644 --- a/code/ui/blocks/package.json +++ b/code/ui/blocks/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/blocks", - "version": "8.0.0-alpha.4", + "version": "8.0.0-alpha.5", "description": "Storybook Doc Blocks", "keywords": [ "storybook" diff --git a/code/ui/components/package.json b/code/ui/components/package.json index b406cdfe20d..f56cf5480e5 100644 --- a/code/ui/components/package.json +++ b/code/ui/components/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/components", - "version": "8.0.0-alpha.4", + "version": "8.0.0-alpha.5", "description": "Core Storybook Components", "keywords": [ "storybook" diff --git a/code/ui/manager/package.json b/code/ui/manager/package.json index 46ceaa8859b..2ed814f9dbd 100644 --- a/code/ui/manager/package.json +++ b/code/ui/manager/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/manager", - "version": "8.0.0-alpha.4", + "version": "8.0.0-alpha.5", "description": "Core Storybook UI", "keywords": [ "storybook" From e3479a02fade42353ec6a1900c191f62f5de1845 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Wed, 27 Dec 2023 00:16:38 +0800 Subject: [PATCH 029/136] Viewport: Store viewport, rotation in globals --- code/addons/essentials/package.json | 4 +- .../addons/essentials/src/viewport/preview.ts | 2 + code/addons/viewport/package.json | 4 ++ code/addons/viewport/preview.js | 1 + code/addons/viewport/src/Tool.tsx | 72 +++++++++---------- code/addons/viewport/src/preview.ts | 1 + code/addons/viewport/src/shortcuts.ts | 31 ++++---- 7 files changed, 57 insertions(+), 58 deletions(-) create mode 100644 code/addons/essentials/src/viewport/preview.ts create mode 100644 code/addons/viewport/preview.js create mode 100644 code/addons/viewport/src/preview.ts diff --git a/code/addons/essentials/package.json b/code/addons/essentials/package.json index ab47a59356b..bd0ef466715 100644 --- a/code/addons/essentials/package.json +++ b/code/addons/essentials/package.json @@ -43,6 +43,7 @@ "./outline/manager": "./dist/outline/manager.js", "./toolbars/manager": "./dist/toolbars/manager.js", "./viewport/manager": "./dist/viewport/manager.js", + "./viewport/preview": "./dist/viewport/preview.js", "./package.json": "./package.json" }, "main": "dist/index.js", @@ -102,7 +103,8 @@ "./src/docs/preview.ts", "./src/highlight/preview.ts", "./src/measure/preview.ts", - "./src/outline/preview.ts" + "./src/outline/preview.ts", + "./src/viewport/preview.ts" ] }, "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae17" diff --git a/code/addons/essentials/src/viewport/preview.ts b/code/addons/essentials/src/viewport/preview.ts new file mode 100644 index 00000000000..34ee7de4561 --- /dev/null +++ b/code/addons/essentials/src/viewport/preview.ts @@ -0,0 +1,2 @@ +// @ts-expect-error (no types needed for this) +export * from '@storybook/addon-viewport/preview'; diff --git a/code/addons/viewport/package.json b/code/addons/viewport/package.json index c110c4fba7f..1537d5d54f0 100644 --- a/code/addons/viewport/package.json +++ b/code/addons/viewport/package.json @@ -29,6 +29,7 @@ "require": "./dist/index.js", "import": "./dist/index.mjs" }, + "./preview": "./dist/preview.js", "./manager": "./dist/manager.js", "./package.json": "./package.json" }, @@ -72,6 +73,9 @@ ], "managerEntries": [ "./src/manager.tsx" + ], + "previewEntries": [ + "./src/preview.ts" ] }, "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae17", diff --git a/code/addons/viewport/preview.js b/code/addons/viewport/preview.js new file mode 100644 index 00000000000..6a4da7cfa95 --- /dev/null +++ b/code/addons/viewport/preview.js @@ -0,0 +1 @@ +export { globals } from './dist/preview'; diff --git a/code/addons/viewport/src/Tool.tsx b/code/addons/viewport/src/Tool.tsx index 093d16bb57b..229f5e21baf 100644 --- a/code/addons/viewport/src/Tool.tsx +++ b/code/addons/viewport/src/Tool.tsx @@ -6,10 +6,10 @@ import { styled, Global, type Theme, withTheme } from '@storybook/theming'; import { IconButton, WithTooltip, TooltipLinkList } from '@storybook/components'; -import { useStorybookApi, useParameter, useAddonState } from '@storybook/manager-api'; +import { useStorybookApi, useParameter, useGlobals } from '@storybook/manager-api'; import { GrowIcon, TransferIcon } from '@storybook/icons'; import { registerShortcuts } from './shortcuts'; -import { PARAM_KEY, ADDON_ID } from './constants'; +import { PARAM_KEY } from './constants'; import { MINIMAL_VIEWPORTS } from './defaults'; import type { ViewportAddonParameter, ViewportMap, ViewportStyles, Styles } from './models'; @@ -35,19 +35,21 @@ const responsiveViewport: ViewportItem = { const baseViewports: ViewportItem[] = [responsiveViewport]; -const toLinks = memoize(50)((list: ViewportItem[], active: LinkBase, set, state, close): Link[] => { - return list - .filter((i) => i.id !== responsiveViewport.id || active.id !== i.id) - .map((i) => { - return { - ...i, - onClick: () => { - set({ ...state, selected: i.id }); - close(); - }, - }; - }); -}); +const toLinks = memoize(50)( + (list: ViewportItem[], active: LinkBase, updateGlobals, close): Link[] => { + return list + .filter((i) => i.id !== responsiveViewport.id || active.id !== i.id) + .map((i) => { + return { + ...i, + onClick: () => { + updateGlobals({ viewport: i.id }); + close(); + }, + }; + }); + } +); interface LinkBase { id: string; @@ -95,11 +97,6 @@ const IconButtonLabel = styled.div(({ theme }) => ({ marginLeft: 10, })); -interface ViewportToolState { - isRotated: boolean; - selected: string | null; -} - const getStyles = ( prevStyles: ViewportStyles | undefined, styles: Styles, @@ -115,16 +112,14 @@ const getStyles = ( export const ViewportTool: FC = memo( withTheme(({ theme }: { theme: Theme }) => { + const [globals, updateGlobals] = useGlobals(); + const { viewports = MINIMAL_VIEWPORTS, defaultOrientation = 'portrait', - defaultViewport = responsiveViewport.id, + defaultViewport = globals.viewport || responsiveViewport.id, disable, } = useParameter(PARAM_KEY, {}); - const [state, setState] = useAddonState(ADDON_ID, { - selected: defaultViewport, - isRotated: defaultOrientation === 'landscape', - }); const list = toList(viewports); const api = useStorybookApi(); @@ -138,28 +133,29 @@ export const ViewportTool: FC = memo( } useEffect(() => { - registerShortcuts(api, setState, Object.keys(viewports)); - }, [viewports]); + registerShortcuts(api, globals, updateGlobals, Object.keys(viewports)); + }, [viewports, globals.viewport]); useEffect(() => { - setState({ - selected: + updateGlobals({ + viewport: defaultViewport || - (state.selected && viewports[state.selected] ? state.selected : responsiveViewport.id), - isRotated: defaultOrientation === 'landscape', + (globals.viewport && viewports[globals.viewport] + ? globals.viewport + : responsiveViewport.id), + viewportRotated: defaultOrientation === 'landscape', }); }, [defaultOrientation, defaultViewport]); - const { selected, isRotated } = state; const item = - list.find((i) => i.id === selected) || + list.find((i) => i.id === globals.viewport) || list.find((i) => i.id === defaultViewport) || list.find((i) => i.default) || responsiveViewport; const ref = useRef(); - const styles = getStyles(ref.current, item.styles, isRotated); + const styles = getStyles(ref.current, item.styles, globals.viewportRotated); useEffect(() => { ref.current = styles; @@ -174,7 +170,7 @@ export const ViewportTool: FC = memo( ( - + )} closeOnOutsideClick onVisibleChange={setIsTooltipVisible} @@ -184,13 +180,13 @@ export const ViewportTool: FC = memo( title="Change the size of the preview" active={isTooltipVisible || !!styles} onDoubleClick={() => { - setState({ ...state, selected: responsiveViewport.id }); + updateGlobals({ viewport: responsiveViewport.id }); }} > {styles ? ( - {isRotated ? `${item.title} (L)` : `${item.title} (P)`} + {globals.viewportRotated ? `${item.title} (L)` : `${item.title} (P)`} ) : null} @@ -215,7 +211,7 @@ export const ViewportTool: FC = memo( key="viewport-rotate" title="Rotate viewport" onClick={() => { - setState({ ...state, isRotated: !isRotated }); + updateGlobals({ viewportRotated: !globals.viewportRotated }); }} > diff --git a/code/addons/viewport/src/preview.ts b/code/addons/viewport/src/preview.ts new file mode 100644 index 00000000000..afe0f1b5f0b --- /dev/null +++ b/code/addons/viewport/src/preview.ts @@ -0,0 +1 @@ +export const globals = { viewport: 'reset', viewportRotated: false }; diff --git a/code/addons/viewport/src/shortcuts.ts b/code/addons/viewport/src/shortcuts.ts index 39cff92af12..47fd37cbb99 100644 --- a/code/addons/viewport/src/shortcuts.ts +++ b/code/addons/viewport/src/shortcuts.ts @@ -1,10 +1,6 @@ import type { API } from '@storybook/manager-api'; import { ADDON_ID } from './constants'; - -type State = { - selected: string; - isRotated: boolean; -}; +import { globals as defaultGlobals } from './preview'; const getCurrentViewportIndex = (viewportsKeys: string[], current: string): number => viewportsKeys.indexOf(current); @@ -23,16 +19,19 @@ const getPreviousViewport = (viewportsKeys: string[], current: string): string = : viewportsKeys[currentViewportIndex - 1]; }; -export const registerShortcuts = async (api: API, setState: any, viewportsKeys: string[]) => { +export const registerShortcuts = async ( + api: API, + globals: any, + updateGlobals: any, + viewportsKeys: string[] +) => { await api.setAddonShortcut(ADDON_ID, { label: 'Previous viewport', defaultShortcut: ['shift', 'V'], actionName: 'previous', action: () => { - const { selected, isRotated } = api.getAddonState(ADDON_ID); - setState({ - selected: getPreviousViewport(viewportsKeys, selected), - isRotated, + updateGlobals({ + viewport: getPreviousViewport(viewportsKeys, globals.viewport), }); }, }); @@ -42,10 +41,8 @@ export const registerShortcuts = async (api: API, setState: any, viewportsKeys: defaultShortcut: ['V'], actionName: 'next', action: () => { - const { selected, isRotated } = api.getAddonState(ADDON_ID); - setState({ - selected: getNextViewport(viewportsKeys, selected), - isRotated, + updateGlobals({ + viewport: getNextViewport(viewportsKeys, globals.viewport), }); }, }); @@ -55,11 +52,7 @@ export const registerShortcuts = async (api: API, setState: any, viewportsKeys: defaultShortcut: ['alt', 'V'], actionName: 'reset', action: () => { - const { isRotated } = api.getAddonState(ADDON_ID); - setState({ - selected: 'reset', - isRotated, - }); + updateGlobals(defaultGlobals); }, }); }; From 093ef7d49046fd0bcf77a2f6cc5a66c588314929 Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Wed, 27 Dec 2023 16:13:00 +0100 Subject: [PATCH 030/136] Adjust tests --- .../stories/docspage/basic.stories.ts | 3 +- code/addons/interactions/src/preview.ts | 30 ++++++++++++++++++- .../template/stories/basics.stories.ts | 17 ++++++----- .../react/template/cli/js/Button.stories.js | 4 +++ .../template/cli/ts-3-8/Button.stories.ts | 4 +++ .../template/cli/ts-4-9/Button.stories.ts | 5 +++- 6 files changed, 52 insertions(+), 11 deletions(-) diff --git a/code/addons/docs/template/stories/docspage/basic.stories.ts b/code/addons/docs/template/stories/docspage/basic.stories.ts index 6eb3f19523b..9982b444a48 100644 --- a/code/addons/docs/template/stories/docspage/basic.stories.ts +++ b/code/addons/docs/template/stories/docspage/basic.stories.ts @@ -1,9 +1,10 @@ import { global as globalThis } from '@storybook/global'; +import { fn } from '@storybook/test'; export default { component: globalThis.Components.Button, tags: ['autodocs'], - args: { label: 'Click Me!' }, + args: { label: 'Click Me!', onClick: fn() }, parameters: { chromatic: { disable: true } }, }; diff --git a/code/addons/interactions/src/preview.ts b/code/addons/interactions/src/preview.ts index 5ef2520b6b7..80515b644da 100644 --- a/code/addons/interactions/src/preview.ts +++ b/code/addons/interactions/src/preview.ts @@ -1,4 +1,11 @@ -import type { PlayFunction, PlayFunctionContext, StepLabel } from '@storybook/types'; +/* eslint-disable no-underscore-dangle */ +import type { + Args, + LoaderFunction, + PlayFunction, + PlayFunctionContext, + StepLabel, +} from '@storybook/types'; import { instrument } from '@storybook/instrumenter'; export const { step: runStep } = instrument( @@ -9,6 +16,27 @@ export const { step: runStep } = instrument( { intercept: true } ); +const instrumentSpies: LoaderFunction = ({ initialArgs }) => { + const argTypesWithAction = Object.entries(initialArgs).filter( + ([, value]) => + typeof value === 'function' && + '_isMockFunction' in value && + value._isMockFunction && + !value._instrumented + ); + + return argTypesWithAction.reduce((acc, [key, value]) => { + const instrumented = instrument({ [key]: () => value }, { retain: true })[key]; + acc[key] = instrumented(); + // this enhancer is being called multiple times + // eslint-disable-next-line no-param-reassign + value._instrumented = true; + return acc; + }, {} as Args); +}; + +export const argsEnhancers = [instrumentSpies]; + export const parameters = { throwPlayFunctionExceptions: false, }; diff --git a/code/addons/interactions/template/stories/basics.stories.ts b/code/addons/interactions/template/stories/basics.stories.ts index e8c14245aa9..62c14b81c19 100644 --- a/code/addons/interactions/template/stories/basics.stories.ts +++ b/code/addons/interactions/template/stories/basics.stories.ts @@ -1,17 +1,18 @@ import { global as globalThis } from '@storybook/global'; import { - within, - waitFor, + expect, + fn, fireEvent, userEvent, + waitFor, waitForElementToBeRemoved, -} from '@storybook/testing-library'; -import { expect } from '@storybook/jest'; + within, +} from '@storybook/test'; export default { component: globalThis.Components.Form, - argTypes: { - onSuccess: { type: 'function' }, + args: { + onSuccess: fn(), }, }; @@ -102,14 +103,14 @@ export const UserEventSetup = { const user = userEvent.setup(); const canvas = within(canvasElement); await step('Select, type and paste on input using user-event v14 setup', async () => { - const input = await canvas.getByRole('textbox'); + const input = canvas.getByRole('textbox'); await user.click(input); await user.type(input, 'Pasting: '); await user.paste('foobar'); }); await step('Tab and press enter on submit button', async () => { await user.pointer([ - { keys: '[TouchA>]', target: await canvas.getByRole('textbox') }, + { keys: '[TouchA>]', target: canvas.getByRole('textbox') }, { keys: '[/TouchA]' }, ]); await user.tab(); diff --git a/code/renderers/react/template/cli/js/Button.stories.js b/code/renderers/react/template/cli/js/Button.stories.js index 3a3f67ec8fb..bf369d2f349 100644 --- a/code/renderers/react/template/cli/js/Button.stories.js +++ b/code/renderers/react/template/cli/js/Button.stories.js @@ -1,3 +1,4 @@ +import { fn } from '@storybook/test'; import { Button } from './Button'; // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export @@ -14,6 +15,9 @@ export default { argTypes: { backgroundColor: { control: 'color' }, }, + args: { + onClick: fn(), + }, }; // More on writing stories with args: https://storybook.js.org/docs/writing-stories/args diff --git a/code/renderers/react/template/cli/ts-3-8/Button.stories.ts b/code/renderers/react/template/cli/ts-3-8/Button.stories.ts index b65080126a4..7c1d859a4dd 100644 --- a/code/renderers/react/template/cli/ts-3-8/Button.stories.ts +++ b/code/renderers/react/template/cli/ts-3-8/Button.stories.ts @@ -1,4 +1,5 @@ import type { Meta, StoryObj } from '@storybook/react'; +import { fn } from '@storybook/test'; import { Button } from './Button'; @@ -16,6 +17,9 @@ const meta: Meta = { argTypes: { backgroundColor: { control: 'color' }, }, + args: { + onClick: fn(), + }, }; export default meta; diff --git a/code/renderers/react/template/cli/ts-4-9/Button.stories.ts b/code/renderers/react/template/cli/ts-4-9/Button.stories.ts index 742c3aa7b02..aaacee4465a 100644 --- a/code/renderers/react/template/cli/ts-4-9/Button.stories.ts +++ b/code/renderers/react/template/cli/ts-4-9/Button.stories.ts @@ -1,5 +1,5 @@ import type { Meta, StoryObj } from '@storybook/react'; - +import { fn } from '@storybook/test'; import { Button } from './Button'; // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export @@ -16,6 +16,9 @@ const meta = { argTypes: { backgroundColor: { control: 'color' }, }, + args: { + onClick: fn(), + }, } satisfies Meta; export default meta; From 028652d7c0bd6a1f04308f50940fa625a517f87a Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Wed, 27 Dec 2023 14:45:28 -0300 Subject: [PATCH 031/136] Vite: Fix pre-transform error in Vite 5 --- code/builders/builder-vite/src/vite-server.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/code/builders/builder-vite/src/vite-server.ts b/code/builders/builder-vite/src/vite-server.ts index ce4631cabae..0b1e8043502 100644 --- a/code/builders/builder-vite/src/vite-server.ts +++ b/code/builders/builder-vite/src/vite-server.ts @@ -11,6 +11,8 @@ export async function createViteServer(options: Options, devServer: Server) { const config = { ...commonCfg, + // Needed in Vite 5: https://github.com/storybookjs/storybook/issues/25256 + assetsInclude: ['/sb-preview/**'], // Set up dev server server: { middlewareMode: true, From 7a6b26a8de1e9e4f7b9c05d8a6bc18fef86485d2 Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Thu, 28 Dec 2023 10:03:39 +0100 Subject: [PATCH 032/136] Assign explicit actions to CLI stories --- code/frameworks/angular/src/client/public-types.ts | 11 ++++++++--- .../frameworks/angular/template/cli/button.stories.ts | 9 ++------- .../nextjs/template/cli/js/Button.stories.js | 2 ++ .../nextjs/template/cli/ts-3-8/Button.stories.ts | 3 ++- .../nextjs/template/cli/ts-4-9/Button.stories.ts | 3 ++- code/renderers/html/template/cli/js/Button.stories.js | 2 ++ .../html/template/cli/ts-3-8/Button.stories.ts | 2 ++ .../html/template/cli/ts-4-9/Button.stories.ts | 2 ++ code/renderers/preact/template/cli/Button.stories.jsx | 2 ++ .../react/template/cli/ts-3-8/Button.stories.ts | 4 +--- .../react/template/cli/ts-4-9/Button.stories.ts | 4 +--- .../svelte/template/cli/js/Button.stories.js | 2 ++ .../svelte/template/cli/ts-3-8/Button.stories.ts | 3 ++- .../svelte/template/cli/ts-4-9/Button.stories.ts | 3 ++- .../vue3/template/cli/ts-3-8/Button.stories.ts | 4 ++-- .../vue3/template/cli/ts-4-9/Button.stories.ts | 4 ++-- 16 files changed, 36 insertions(+), 24 deletions(-) diff --git a/code/frameworks/angular/src/client/public-types.ts b/code/frameworks/angular/src/client/public-types.ts index 7d81b1dfbd6..e96e3d89c15 100644 --- a/code/frameworks/angular/src/client/public-types.ts +++ b/code/frameworks/angular/src/client/public-types.ts @@ -9,6 +9,7 @@ import { StrictArgs, ProjectAnnotations, } from '@storybook/types'; +import { EventEmitter } from '@angular/core'; import { AngularRenderer } from './types'; export type { Args, ArgTypes, Parameters, StrictArgs } from '@storybook/types'; @@ -20,21 +21,21 @@ export type { AngularRenderer }; * * @see [Default export](https://storybook.js.org/docs/formats/component-story-format/#default-export) */ -export type Meta = ComponentAnnotations; +export type Meta = ComponentAnnotations>; /** * Story function that represents a CSFv2 component example. * * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports) */ -export type StoryFn = AnnotatedStoryFn; +export type StoryFn = AnnotatedStoryFn>; /** * Story function that represents a CSFv3 component example. * * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports) */ -export type StoryObj = StoryAnnotations; +export type StoryObj = StoryAnnotations>; /** * @deprecated Use `StoryFn` instead. @@ -51,3 +52,7 @@ export type Decorator = DecoratorFunction = LoaderFunction; export type StoryContext = GenericStoryContext; export type Preview = ProjectAnnotations; + +type TransformEventType = { + [K in keyof T]: T[K] extends EventEmitter ? (e: E) => void : T[K]; +}; diff --git a/code/frameworks/angular/template/cli/button.stories.ts b/code/frameworks/angular/template/cli/button.stories.ts index 19661b149fd..1d81f2b13bf 100644 --- a/code/frameworks/angular/template/cli/button.stories.ts +++ b/code/frameworks/angular/template/cli/button.stories.ts @@ -1,5 +1,5 @@ import type { Meta, StoryObj } from '@storybook/angular'; - +import { fn } from '@storybook/test'; import { ButtonComponent } from './button.component'; // More on how to set up stories at: https://storybook.js.org/docs/writing-stories @@ -7,17 +7,12 @@ const meta: Meta = { title: 'Example/Button', component: ButtonComponent, tags: ['autodocs'], - render: (args: ButtonComponent) => ({ - props: { - backgroundColor: null, - ...args, - }, - }), argTypes: { backgroundColor: { control: 'color', }, }, + args: { onClick: fn() }, }; export default meta; diff --git a/code/frameworks/nextjs/template/cli/js/Button.stories.js b/code/frameworks/nextjs/template/cli/js/Button.stories.js index 3a3f67ec8fb..b8ddeae8fde 100644 --- a/code/frameworks/nextjs/template/cli/js/Button.stories.js +++ b/code/frameworks/nextjs/template/cli/js/Button.stories.js @@ -1,3 +1,4 @@ +import { fn } from '@storybook/test'; import { Button } from './Button'; // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export @@ -14,6 +15,7 @@ export default { argTypes: { backgroundColor: { control: 'color' }, }, + args: { onClick: fn() }, }; // More on writing stories with args: https://storybook.js.org/docs/writing-stories/args diff --git a/code/frameworks/nextjs/template/cli/ts-3-8/Button.stories.ts b/code/frameworks/nextjs/template/cli/ts-3-8/Button.stories.ts index b65080126a4..141d252ceb5 100644 --- a/code/frameworks/nextjs/template/cli/ts-3-8/Button.stories.ts +++ b/code/frameworks/nextjs/template/cli/ts-3-8/Button.stories.ts @@ -1,5 +1,5 @@ import type { Meta, StoryObj } from '@storybook/react'; - +import { fn } from '@storybook/test'; import { Button } from './Button'; // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export @@ -16,6 +16,7 @@ const meta: Meta = { argTypes: { backgroundColor: { control: 'color' }, }, + args: { onClick: fn() }, }; export default meta; diff --git a/code/frameworks/nextjs/template/cli/ts-4-9/Button.stories.ts b/code/frameworks/nextjs/template/cli/ts-4-9/Button.stories.ts index 742c3aa7b02..ef1b519d111 100644 --- a/code/frameworks/nextjs/template/cli/ts-4-9/Button.stories.ts +++ b/code/frameworks/nextjs/template/cli/ts-4-9/Button.stories.ts @@ -1,5 +1,5 @@ import type { Meta, StoryObj } from '@storybook/react'; - +import { fn } from '@storybook/test'; import { Button } from './Button'; // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export @@ -16,6 +16,7 @@ const meta = { argTypes: { backgroundColor: { control: 'color' }, }, + args: { onClick: fn() }, } satisfies Meta; export default meta; diff --git a/code/renderers/html/template/cli/js/Button.stories.js b/code/renderers/html/template/cli/js/Button.stories.js index 81d0ba1fb15..49edd3b0c92 100644 --- a/code/renderers/html/template/cli/js/Button.stories.js +++ b/code/renderers/html/template/cli/js/Button.stories.js @@ -1,3 +1,4 @@ +import { fn } from '@storybook/test'; import { createButton } from './Button'; // More on how to set up stories at: https://storybook.js.org/docs/writing-stories @@ -19,6 +20,7 @@ export default { options: ['small', 'medium', 'large'], }, }, + args: { onClick: fn() }, }; // More on writing stories with args: https://storybook.js.org/docs/writing-stories/args diff --git a/code/renderers/html/template/cli/ts-3-8/Button.stories.ts b/code/renderers/html/template/cli/ts-3-8/Button.stories.ts index f91d91ae731..0df63f59178 100644 --- a/code/renderers/html/template/cli/ts-3-8/Button.stories.ts +++ b/code/renderers/html/template/cli/ts-3-8/Button.stories.ts @@ -1,4 +1,5 @@ import type { StoryObj, Meta } from '@storybook/html'; +import { fn } from '@storybook/test'; import type { ButtonProps } from './Button'; import { createButton } from './Button'; @@ -21,6 +22,7 @@ const meta: Meta = { options: ['small', 'medium', 'large'], }, }, + args: { onClick: fn() }, }; export default meta; diff --git a/code/renderers/html/template/cli/ts-4-9/Button.stories.ts b/code/renderers/html/template/cli/ts-4-9/Button.stories.ts index 2a86ecbec3b..ba7a79e01c4 100644 --- a/code/renderers/html/template/cli/ts-4-9/Button.stories.ts +++ b/code/renderers/html/template/cli/ts-4-9/Button.stories.ts @@ -1,4 +1,5 @@ import type { StoryObj, Meta } from '@storybook/html'; +import { fn } from '@storybook/test'; import type { ButtonProps } from './Button'; import { createButton } from './Button'; @@ -21,6 +22,7 @@ const meta = { options: ['small', 'medium', 'large'], }, }, + args: { onClick: fn() }, } satisfies Meta; export default meta; diff --git a/code/renderers/preact/template/cli/Button.stories.jsx b/code/renderers/preact/template/cli/Button.stories.jsx index 53ce0d71dd4..58d9b3c2923 100644 --- a/code/renderers/preact/template/cli/Button.stories.jsx +++ b/code/renderers/preact/template/cli/Button.stories.jsx @@ -1,3 +1,4 @@ +import { fn } from '@storybook/test'; import { Button } from './Button'; // More on how to set up stories at: https://storybook.js.org/docs/writing-stories @@ -9,6 +10,7 @@ export default { backgroundColor: { control: 'color' }, onClick: { action: 'onClick' }, }, + args: { onClick: fn() }, }; // More on writing stories with args: https://storybook.js.org/docs/writing-stories/args diff --git a/code/renderers/react/template/cli/ts-3-8/Button.stories.ts b/code/renderers/react/template/cli/ts-3-8/Button.stories.ts index 7c1d859a4dd..f890b6d932d 100644 --- a/code/renderers/react/template/cli/ts-3-8/Button.stories.ts +++ b/code/renderers/react/template/cli/ts-3-8/Button.stories.ts @@ -17,9 +17,7 @@ const meta: Meta = { argTypes: { backgroundColor: { control: 'color' }, }, - args: { - onClick: fn(), - }, + args: { onClick: fn() }, }; export default meta; diff --git a/code/renderers/react/template/cli/ts-4-9/Button.stories.ts b/code/renderers/react/template/cli/ts-4-9/Button.stories.ts index aaacee4465a..ef1b519d111 100644 --- a/code/renderers/react/template/cli/ts-4-9/Button.stories.ts +++ b/code/renderers/react/template/cli/ts-4-9/Button.stories.ts @@ -16,9 +16,7 @@ const meta = { argTypes: { backgroundColor: { control: 'color' }, }, - args: { - onClick: fn(), - }, + args: { onClick: fn() }, } satisfies Meta; export default meta; diff --git a/code/renderers/svelte/template/cli/js/Button.stories.js b/code/renderers/svelte/template/cli/js/Button.stories.js index c5c88776d6b..32151bd1cdc 100644 --- a/code/renderers/svelte/template/cli/js/Button.stories.js +++ b/code/renderers/svelte/template/cli/js/Button.stories.js @@ -1,3 +1,4 @@ +import { fn } from '@storybook/test'; import Button from './Button.svelte'; // More on how to set up stories at: https://storybook.js.org/docs/writing-stories @@ -12,6 +13,7 @@ export default { options: ['small', 'medium', 'large'], }, }, + args: { onClick: fn() }, }; // More on writing stories with args: https://storybook.js.org/docs/writing-stories/args diff --git a/code/renderers/svelte/template/cli/ts-3-8/Button.stories.ts b/code/renderers/svelte/template/cli/ts-3-8/Button.stories.ts index 55f3b1c8e50..258afdd7e18 100644 --- a/code/renderers/svelte/template/cli/ts-3-8/Button.stories.ts +++ b/code/renderers/svelte/template/cli/ts-3-8/Button.stories.ts @@ -1,5 +1,5 @@ import type { Meta, StoryObj } from '@storybook/svelte'; - +import { fn } from '@storybook/test'; import Button from './Button.svelte'; // More on how to set up stories at: https://storybook.js.org/docs/writing-stories @@ -14,6 +14,7 @@ const meta: Meta + + `) + ).toMatchInlineSnapshot(` + import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from 'react/jsx-runtime'; + import { useMDXComponents as _provideComponents } from '@mdx-js/react'; + import { Button } from '@storybook/react/demo'; + import { Story, Meta } from '@storybook/addon-docs'; + function _createMdxContent(props) { + const _components = { + h1: 'h1', + ..._provideComponents(), + ...props.components, + }; + return _jsxs(_Fragment, { + children: [ + _jsx(Meta, { + title: 'Button', + args: { + a: 1, + b: 2, + }, + argTypes: { + a: { + name: 'A', + }, + b: { + name: 'B', + }, + }, + }), + '\\n', + _jsx(_components.h1, { + children: 'Args', + }), + '\\n', + _jsx(Story, { + name: 'component notes', + children: _jsx(Button, { + children: 'Component notes', + }), + }), + ], + }); + } + export default function MDXContent(props = {}) { + const { wrapper: MDXLayout } = { + ..._provideComponents(), + ...props.components, + }; + return MDXLayout + ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props, + }), + }) + : _createMdxContent(props); + } + `); + }); + + it('component-id.mdx', () => { + expect( + clean(dedent` + import { Button } from '@storybook/react/demo'; + import { Story, Meta } from '@storybook/addon-docs'; + + + + + + + `) + ).toMatchInlineSnapshot(` + import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from 'react/jsx-runtime'; + import { useMDXComponents as _provideComponents } from '@mdx-js/react'; + import { Button } from '@storybook/react/demo'; + import { Story, Meta } from '@storybook/addon-docs'; + function _createMdxContent(props) { + return _jsxs(_Fragment, { + children: [ + _jsx(Meta, { + title: 'Button', + component: Button, + id: 'button-id', + }), + '\\n', + _jsx(Story, { + name: 'component notes', + children: _jsx(Button, { + children: 'Component notes', + }), + }), + ], + }); + } + export default function MDXContent(props = {}) { + const { wrapper: MDXLayout } = { + ..._provideComponents(), + ...props.components, + }; + return MDXLayout + ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props, + }), + }) + : _createMdxContent(props); + } + `); + }); + + it('csf-imports.mdx', () => { + expect( + clean(dedent` + import { Story, Meta, Canvas } from '@storybook/addon-docs'; + import { Welcome, Button } from '@storybook/angular/demo'; + import * as MyStories from './My.stories'; + import { Other } from './Other.stories'; + + + + # Stories from CSF imports + + + + + + + + + `) + ).toMatchInlineSnapshot(` + import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from 'react/jsx-runtime'; + import { useMDXComponents as _provideComponents } from '@mdx-js/react'; + import { Story, Meta, Canvas } from '@storybook/addon-docs'; + import { Welcome, Button } from '@storybook/angular/demo'; + import * as MyStories from './My.stories'; + import { Other } from './Other.stories'; + function _createMdxContent(props) { + const _components = { + h1: 'h1', + ..._provideComponents(), + ...props.components, + }; + return _jsxs(_Fragment, { + children: [ + _jsx(Meta, { + title: 'MDX/CSF imports', + }), + '\\n', + _jsx(_components.h1, { + children: 'Stories from CSF imports', + }), + '\\n', + _jsx(Story, { + story: MyStories.Basic, + }), + '\\n', + _jsx(Canvas, { + children: _jsx(Story, { + story: Other, + }), + }), + '\\n', + _jsx(Story, { + name: 'renamed', + story: MyStories.Foo, + }), + ], + }); + } + export default function MDXContent(props = {}) { + const { wrapper: MDXLayout } = { + ..._provideComponents(), + ...props.components, + }; + return MDXLayout + ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props, + }), + }) + : _createMdxContent(props); + } + `); + }); + + it('decorators.mdx', () => { + expect( + clean(dedent` + import { Button } from '@storybook/react/demo'; + import { Story, Meta } from '@storybook/addon-docs'; + +
{storyFn()}
]} + /> + + # Decorated story + +
{storyFn()}
]}> + + + `) + ).toMatchInlineSnapshot(` + import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from 'react/jsx-runtime'; + import { useMDXComponents as _provideComponents } from '@mdx-js/react'; + import { Button } from '@storybook/react/demo'; + import { Story, Meta } from '@storybook/addon-docs'; + function _createMdxContent(props) { + const _components = { + div: 'div', + h1: 'h1', + ..._provideComponents(), + ...props.components, + }; + return _jsxs(_Fragment, { + children: [ + _jsx(Meta, { + title: 'Button', + decorators: [ + (storyFn) => + _jsx(_components.div, { + style: { + backgroundColor: 'yellow', + }, + children: storyFn(), + }), + ], + }), + '\\n', + _jsx(_components.h1, { + children: 'Decorated story', + }), + '\\n', + _jsx(Story, { + name: 'one', + decorators: [ + (storyFn) => + _jsx(_components.div, { + className: 'local', + children: storyFn(), + }), + ], + children: _jsx(Button, { + children: 'One', + }), + }), + ], + }); + } + export default function MDXContent(props = {}) { + const { wrapper: MDXLayout } = { + ..._provideComponents(), + ...props.components, + }; + return MDXLayout + ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props, + }), + }) + : _createMdxContent(props); + } + `); + }); + + it('docs-only.mdx', () => { + expect( + clean(dedent` + import { Meta } from '@storybook/addon-docs'; + + + + # Documentation only + + This is a documentation-only MDX file which cleans a dummy 'docsOnly: true' story. + `) + ).toMatchInlineSnapshot(` + import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from 'react/jsx-runtime'; + import { useMDXComponents as _provideComponents } from '@mdx-js/react'; + import { Meta } from '@storybook/addon-docs'; + function _createMdxContent(props) { + const _components = { + h1: 'h1', + p: 'p', + ..._provideComponents(), + ...props.components, + }; + return _jsxs(_Fragment, { + children: [ + _jsx(Meta, { + title: 'docs-only', + }), + '\\n', + _jsx(_components.h1, { + children: 'Documentation only', + }), + '\\n', + _jsx(_components.p, { + children: + "This is a documentation-only MDX file which cleans a dummy 'docsOnly: true' story.", + }), + ], + }); + } + export default function MDXContent(props = {}) { + const { wrapper: MDXLayout } = { + ..._provideComponents(), + ...props.components, + }; + return MDXLayout + ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props, + }), + }) + : _createMdxContent(props); + } + `); + }); + + it('loaders.mdx', () => { + expect( + clean(dedent` + import { Button } from '@storybook/react/demo'; + import { Story, Meta } from '@storybook/addon-docs'; + + ({ foo: 1 })]} /> + + # Story with loader + + ({ bar: 2 })]}> + + + `) + ).toMatchInlineSnapshot(` + import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from 'react/jsx-runtime'; + import { useMDXComponents as _provideComponents } from '@mdx-js/react'; + import { Button } from '@storybook/react/demo'; + import { Story, Meta } from '@storybook/addon-docs'; + function _createMdxContent(props) { + const _components = { + h1: 'h1', + ..._provideComponents(), + ...props.components, + }; + return _jsxs(_Fragment, { + children: [ + _jsx(Meta, { + title: 'Button', + loaders: [ + async () => ({ + foo: 1, + }), + ], + }), + '\\n', + _jsx(_components.h1, { + children: 'Story with loader', + }), + '\\n', + _jsx(Story, { + name: 'one', + loaders: [ + async () => ({ + bar: 2, + }), + ], + children: _jsx(Button, { + children: 'One', + }), + }), + ], + }); + } + export default function MDXContent(props = {}) { + const { wrapper: MDXLayout } = { + ..._provideComponents(), + ...props.components, + }; + return MDXLayout + ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props, + }), + }) + : _createMdxContent(props); + } + `); + }); + + it('meta-quotes-in-title.mdx', () => { + expect( + clean(dedent` + import { Meta } from '@storybook/addon-docs'; + + + `) + ).toMatchInlineSnapshot(` + import { jsx as _jsx } from 'react/jsx-runtime'; + import { useMDXComponents as _provideComponents } from '@mdx-js/react'; + import { Meta } from '@storybook/addon-docs'; + function _createMdxContent(props) { + return _jsx(Meta, { + title: "Addons/Docs/what's in a title?", + }); + } + export default function MDXContent(props = {}) { + const { wrapper: MDXLayout } = { + ..._provideComponents(), + ...props.components, + }; + return MDXLayout + ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props, + }), + }) + : _createMdxContent(props); + } + `); + }); + + it('non-story-exports.mdx', () => { + expect( + clean(dedent` + import { Button } from '@storybook/react/demo'; + import { Story, Meta } from '@storybook/addon-docs'; + + + + # Story definition + + + + + + export const two = 2; + + + + + `) + ).toMatchInlineSnapshot(` + import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from 'react/jsx-runtime'; + import { useMDXComponents as _provideComponents } from '@mdx-js/react'; + import { Button } from '@storybook/react/demo'; + import { Story, Meta } from '@storybook/addon-docs'; + export const two = 2; + function _createMdxContent(props) { + const _components = { + h1: 'h1', + ..._provideComponents(), + ...props.components, + }; + return _jsxs(_Fragment, { + children: [ + _jsx(Meta, { + title: 'Button', + }), + '\\n', + _jsx(_components.h1, { + children: 'Story definition', + }), + '\\n', + _jsx(Story, { + name: 'one', + children: _jsx(Button, { + children: 'One', + }), + }), + '\\n', + '\\n', + _jsx(Story, { + name: 'hello story', + children: _jsx(Button, { + children: 'Hello button', + }), + }), + ], + }); + } + export default function MDXContent(props = {}) { + const { wrapper: MDXLayout } = { + ..._provideComponents(), + ...props.components, + }; + return MDXLayout + ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props, + }), + }) + : _createMdxContent(props); + } + `); + }); + + it('parameters.mdx', () => { + expect( + clean(dedent` + import { Button } from '@storybook/react/demo'; + import { Story, Meta } from '@storybook/addon-docs'; + + + + + + + + + + + `) + ).toMatchInlineSnapshot(` + import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from 'react/jsx-runtime'; + import { useMDXComponents as _provideComponents } from '@mdx-js/react'; + import { Button } from '@storybook/react/demo'; + import { Story, Meta } from '@storybook/addon-docs'; + function _createMdxContent(props) { + return _jsxs(_Fragment, { + children: [ + _jsx(Meta, { + title: 'Button', + component: Button, + parameters: { + notes: 'component notes', + }, + }), + '\\n', + _jsx(Story, { + name: 'component notes', + children: _jsx(Button, { + children: 'Component notes', + }), + }), + '\\n', + _jsx(Story, { + name: 'story notes', + parameters: { + notes: 'story notes', + }, + children: _jsx(Button, { + children: 'Story notes', + }), + }), + ], + }); + } + export default function MDXContent(props = {}) { + const { wrapper: MDXLayout } = { + ..._provideComponents(), + ...props.components, + }; + return MDXLayout + ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props, + }), + }) + : _createMdxContent(props); + } + `); + }); + + it('previews.mdx', () => { + expect( + clean(dedent` + import { Button } from '@storybook/react/demo'; + import { Canvas, Story, Meta } from '@storybook/addon-docs'; + + + + # Canvas + + Canvases can contain normal components, stories, and story references + + + + + + + + + + + + + Canvas without a story + + + + + `) + ).toMatchInlineSnapshot(` + import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from 'react/jsx-runtime'; + import { useMDXComponents as _provideComponents } from '@mdx-js/react'; + import { Button } from '@storybook/react/demo'; + import { Canvas, Story, Meta } from '@storybook/addon-docs'; + function _createMdxContent(props) { + const _components = { + h1: 'h1', + p: 'p', + ..._provideComponents(), + ...props.components, + }; + return _jsxs(_Fragment, { + children: [ + _jsx(Meta, { + title: 'Button', + component: Button, + parameters: { + notes: 'component notes', + }, + }), + '\\n', + _jsx(_components.h1, { + children: 'Canvas', + }), + '\\n', + _jsx(_components.p, { + children: 'Canvases can contain normal components, stories, and story references', + }), + '\\n', + _jsxs(Canvas, { + children: [ + _jsx(Button, { + children: 'Just a button', + }), + _jsx(Story, { + name: 'hello button', + children: _jsx(Button, { + children: 'Hello button', + }), + }), + _jsx(Story, { + name: 'two', + children: _jsx(Button, { + children: 'Two', + }), + }), + _jsx(Story, { + id: 'welcome--welcome', + }), + ], + }), + '\\n', + _jsx(_components.p, { + children: 'Canvas without a story', + }), + '\\n', + _jsx(Canvas, { + children: _jsx(Button, { + children: 'Just a button', + }), + }), + ], + }); + } + export default function MDXContent(props = {}) { + const { wrapper: MDXLayout } = { + ..._provideComponents(), + ...props.components, + }; + return MDXLayout + ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props, + }), + }) + : _createMdxContent(props); + } + `); + }); + + it('story-args.mdx', () => { + expect( + clean(dedent` + import { Button } from '@storybook/react/demo'; + import { Story, Meta } from '@storybook/addon-docs'; + + + + # Args + + export const Template = (args) => ; + + + {Template.bind({})} + + `) + ).toMatchInlineSnapshot(` + import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from 'react/jsx-runtime'; + import { useMDXComponents as _provideComponents } from '@mdx-js/react'; + import { Button } from '@storybook/react/demo'; + import { Story, Meta } from '@storybook/addon-docs'; + export const Template = (args) => + _jsx(Button, { + children: 'Component notes', + }); + function _createMdxContent(props) { + const _components = { + h1: 'h1', + ..._provideComponents(), + ...props.components, + }; + return _jsxs(_Fragment, { + children: [ + _jsx(Meta, { + title: 'Button', + }), + '\\n', + _jsx(_components.h1, { + children: 'Args', + }), + '\\n', + '\\n', + _jsx(Story, { + name: 'component notes', + args: { + a: 1, + b: 2, + }, + argTypes: { + a: { + name: 'A', + }, + b: { + name: 'B', + }, + }, + children: Template.bind({}), + }), + ], + }); + } + export default function MDXContent(props = {}) { + const { wrapper: MDXLayout } = { + ..._provideComponents(), + ...props.components, + }; + return MDXLayout + ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props, + }), + }) + : _createMdxContent(props); + } + `); + }); + + it('story-current.mdx', () => { + expect( + clean(dedent` + import { Story } from '@storybook/addon-docs'; + + # Current story + + + `) + ).toMatchInlineSnapshot(` + import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from 'react/jsx-runtime'; + import { useMDXComponents as _provideComponents } from '@mdx-js/react'; + import { Story } from '@storybook/addon-docs'; + function _createMdxContent(props) { + const _components = { + h1: 'h1', + ..._provideComponents(), + ...props.components, + }; + return _jsxs(_Fragment, { + children: [ + _jsx(_components.h1, { + children: 'Current story', + }), + '\\n', + _jsx(Story, { + id: '.', + }), + ], + }); + } + export default function MDXContent(props = {}) { + const { wrapper: MDXLayout } = { + ..._provideComponents(), + ...props.components, + }; + return MDXLayout + ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props, + }), + }) + : _createMdxContent(props); + } + `); + }); + + it('story-def-text-only.mdx', () => { + expect( + clean(dedent` + import { Story, Meta } from '@storybook/addon-docs'; + + + + # Story definition + + Plain text + `) + ).toMatchInlineSnapshot(` + import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from 'react/jsx-runtime'; + import { useMDXComponents as _provideComponents } from '@mdx-js/react'; + import { Story, Meta } from '@storybook/addon-docs'; + function _createMdxContent(props) { + const _components = { + h1: 'h1', + ..._provideComponents(), + ...props.components, + }; + return _jsxs(_Fragment, { + children: [ + _jsx(Meta, { + title: 'Text', + }), + '\\n', + _jsx(_components.h1, { + children: 'Story definition', + }), + '\\n', + _jsx(Story, { + name: 'text', + children: 'Plain text', + }), + ], + }); + } + export default function MDXContent(props = {}) { + const { wrapper: MDXLayout } = { + ..._provideComponents(), + ...props.components, + }; + return MDXLayout + ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props, + }), + }) + : _createMdxContent(props); + } + `); + }); + + it('story-definitions.mdx', () => { + expect( + clean(dedent` + import { Button } from '@storybook/react/demo'; + import { Story, Meta } from '@storybook/addon-docs'; + + + + # Story definition + + + + + + + + + + + + + + + + + `) + ).toMatchInlineSnapshot(` + import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from 'react/jsx-runtime'; + import { useMDXComponents as _provideComponents } from '@mdx-js/react'; + import { Button } from '@storybook/react/demo'; + import { Story, Meta } from '@storybook/addon-docs'; + function _createMdxContent(props) { + const _components = { + h1: 'h1', + ..._provideComponents(), + ...props.components, + }; + return _jsxs(_Fragment, { + children: [ + _jsx(Meta, { + title: 'Button', + }), + '\\n', + _jsx(_components.h1, { + children: 'Story definition', + }), + '\\n', + _jsx(Story, { + name: 'one', + children: _jsx(Button, { + children: 'One', + }), + }), + '\\n', + _jsx(Story, { + name: 'hello story', + children: _jsx(Button, { + children: 'Hello button', + }), + }), + '\\n', + _jsx(Story, { + name: 'w/punctuation', + children: _jsx(Button, { + children: 'with punctuation', + }), + }), + '\\n', + _jsx(Story, { + name: '1 fine day', + children: _jsx(Button, { + children: 'starts with number', + }), + }), + ], + }); + } + export default function MDXContent(props = {}) { + const { wrapper: MDXLayout } = { + ..._provideComponents(), + ...props.components, + }; + return MDXLayout + ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props, + }), + }) + : _createMdxContent(props); + } + `); + }); + + it('story-function-var.mdx', () => { + expect( + clean(dedent` + import { Meta, Story } from '@storybook/addon-docs'; + + + + export const basicFn = () => + `) + ).toMatchInlineSnapshot(` + import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from 'react/jsx-runtime'; + import { useMDXComponents as _provideComponents } from '@mdx-js/react'; + import { Button } from '@storybook/react/demo'; + function _createMdxContent(props) { + const _components = { + h1: 'h1', + p: 'p', + ..._provideComponents(), + ...props.components, + }; + return _jsxs(_Fragment, { + children: [ + _jsx(_components.h1, { + children: 'Hello MDX', + }), + '\\n', + _jsx(_components.p, { + children: 'This is some random content.', + }), + '\\n', + _jsx(Button, { + children: 'Hello button', + }), + ], + }); + } + export default function MDXContent(props = {}) { + const { wrapper: MDXLayout } = { + ..._provideComponents(), + ...props.components, + }; + return MDXLayout + ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props, + }), + }) + : _createMdxContent(props); + } + `); + }); + + describe('csf3', () => { + it('auto-title-docs-only.mdx', () => { + expect( + clean(dedent` + import { Meta } from '@storybook/addon-docs'; + + + + # Auto-title Docs Only + + Spme **markdown** here! + `) + ).toMatchInlineSnapshot(` + import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from 'react/jsx-runtime'; + import { useMDXComponents as _provideComponents } from '@mdx-js/react'; + import { Meta } from '@storybook/addon-docs'; + function _createMdxContent(props) { + const _components = { + h1: 'h1', + p: 'p', + strong: 'strong', + ..._provideComponents(), + ...props.components, + }; + return _jsxs(_Fragment, { + children: [ + _jsx(Meta, {}), + '\\n', + _jsx(_components.h1, { + children: 'Auto-title Docs Only', + }), + '\\n', + _jsxs(_components.p, { + children: [ + 'Spme ', + _jsx(_components.strong, { + children: 'markdown', + }), + ' here!', + ], + }), + ], + }); + } + export default function MDXContent(props = {}) { + const { wrapper: MDXLayout } = { + ..._provideComponents(), + ...props.components, + }; + return MDXLayout + ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props, + }), + }) + : _createMdxContent(props); + } + `); + }); + + it('auto-title.mdx', () => { + expect( + clean(dedent` + import { Button } from '@storybook/react/demo'; + import { Story, Meta } from '@storybook/addon-docs'; + + + + + + + `) + ).toMatchInlineSnapshot(` + import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from 'react/jsx-runtime'; + import { useMDXComponents as _provideComponents } from '@mdx-js/react'; + import { Button } from '@storybook/react/demo'; + import { Story, Meta } from '@storybook/addon-docs'; + function _createMdxContent(props) { + return _jsxs(_Fragment, { + children: [ + _jsx(Meta, { + component: Button, + }), + '\\n', + _jsx(Story, { + name: 'Basic', + children: _jsx(Button, { + children: 'Basic', + }), + }), + ], + }); + } + export default function MDXContent(props = {}) { + const { wrapper: MDXLayout } = { + ..._provideComponents(), + ...props.components, + }; + return MDXLayout + ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props, + }), + }) + : _createMdxContent(props); + } + `); + }); + + it('default-render.mdx', () => { + expect( + clean(dedent` + import { Button } from '@storybook/react/demo'; + import { Story, Meta } from '@storybook/addon-docs'; + + + + + `) + ).toMatchInlineSnapshot(` + import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from 'react/jsx-runtime'; + import { useMDXComponents as _provideComponents } from '@mdx-js/react'; + import { Button } from '@storybook/react/demo'; + import { Story, Meta } from '@storybook/addon-docs'; + function _createMdxContent(props) { + return _jsxs(_Fragment, { + children: [ + _jsx(Meta, { + title: 'Button', + component: Button, + }), + '\\n', + _jsx(Story, { + name: 'Basic', + }), + ], + }); + } + export default function MDXContent(props = {}) { + const { wrapper: MDXLayout } = { + ..._provideComponents(), + ...props.components, + }; + return MDXLayout + ? _jsx(MDXLayout, { + ...props, + children: _jsx(_createMdxContent, { + ...props, + }), + }) + : _createMdxContent(props); + } + `); + }); + + it('component-render.mdx', () => { + expect( + clean(dedent` + import { Button } from '@storybook/react/demo'; + import { Story, Meta } from '@storybook/addon-docs'; + + ', + }, + }; + const componentMeta = { + title: 'Button', + args: { + a: 1, + b: 2, + }, + argTypes: { + a: { + name: 'A', + }, + b: { + name: 'B', + }, + }, + tags: ['stories-mdx'], + includeStories: ['componentNotes'], + }; + componentMeta.parameters = componentMeta.parameters || {}; + componentMeta.parameters.docs = { + ...(componentMeta.parameters.docs || {}), + page: MDXContent, + }; + export default componentMeta; `); }); @@ -429,42 +423,29 @@ describe('docs-mdx-compiler-plugin', () => { `) ).toMatchInlineSnapshot(` - import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from 'react/jsx-runtime'; - import { useMDXComponents as _provideComponents } from '@mdx-js/react'; - import { Button } from '@storybook/react/demo'; - import { Story, Meta } from '@storybook/addon-docs'; - function _createMdxContent(props) { - return _jsxs(_Fragment, { - children: [ - _jsx(Meta, { - title: 'Button', - component: Button, - id: 'button-id', - }), - '\\n', - _jsx(Story, { - name: 'component notes', - children: _jsx(Button, { - children: 'Component notes', - }), - }), - ], + export const componentNotes = () => + /*#__PURE__*/ _jsx(Button, { + children: 'Component notes', }); - } - export default function MDXContent(props = {}) { - const { wrapper: MDXLayout } = { - ..._provideComponents(), - ...props.components, - }; - return MDXLayout - ? _jsx(MDXLayout, { - ...props, - children: _jsx(_createMdxContent, { - ...props, - }), - }) - : _createMdxContent(props); - } + componentNotes.storyName = 'component notes'; + componentNotes.parameters = { + storySource: { + source: '', + }, + }; + const componentMeta = { + title: 'Button', + id: 'button-id', + component: Button, + tags: ['stories-mdx'], + includeStories: ['componentNotes'], + }; + componentMeta.parameters = componentMeta.parameters || {}; + componentMeta.parameters.docs = { + ...(componentMeta.parameters.docs || {}), + page: MDXContent, + }; + export default componentMeta; `); }); @@ -489,59 +470,21 @@ describe('docs-mdx-compiler-plugin', () => { `) ).toMatchInlineSnapshot(` - import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from 'react/jsx-runtime'; - import { useMDXComponents as _provideComponents } from '@mdx-js/react'; - import { Story, Meta, Canvas } from '@storybook/addon-docs'; - import { Welcome, Button } from '@storybook/angular/demo'; - import * as MyStories from './My.stories'; - import { Other } from './Other.stories'; - function _createMdxContent(props) { - const _components = { - h1: 'h1', - ..._provideComponents(), - ...props.components, - }; - return _jsxs(_Fragment, { - children: [ - _jsx(Meta, { - title: 'MDX/CSF imports', - }), - '\\n', - _jsx(_components.h1, { - children: 'Stories from CSF imports', - }), - '\\n', - _jsx(Story, { - story: MyStories.Basic, - }), - '\\n', - _jsx(Canvas, { - children: _jsx(Story, { - story: Other, - }), - }), - '\\n', - _jsx(Story, { - name: 'renamed', - story: MyStories.Foo, - }), - ], - }); - } - export default function MDXContent(props = {}) { - const { wrapper: MDXLayout } = { - ..._provideComponents(), - ...props.components, - }; - return MDXLayout - ? _jsx(MDXLayout, { - ...props, - children: _jsx(_createMdxContent, { - ...props, - }), - }) - : _createMdxContent(props); - } + export const _Basic_ = MyStories.Basic; + export const _Other_ = Other; + export const _Foo_ = MyStories.Foo; + _Foo_.storyName = 'renamed'; + const componentMeta = { + title: 'MDX/CSF imports', + tags: ['stories-mdx'], + includeStories: ['_Basic_', '_Other_', '_Foo_'], + }; + componentMeta.parameters = componentMeta.parameters || {}; + componentMeta.parameters.docs = { + ...(componentMeta.parameters.docs || {}), + page: MDXContent, + }; + export default componentMeta; `); }); @@ -563,66 +506,43 @@ describe('docs-mdx-compiler-plugin', () => { `) ).toMatchInlineSnapshot(` - import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from 'react/jsx-runtime'; - import { useMDXComponents as _provideComponents } from '@mdx-js/react'; - import { Button } from '@storybook/react/demo'; - import { Story, Meta } from '@storybook/addon-docs'; - function _createMdxContent(props) { - const _components = { - div: 'div', - h1: 'h1', - ..._provideComponents(), - ...props.components, - }; - return _jsxs(_Fragment, { - children: [ - _jsx(Meta, { - title: 'Button', - decorators: [ - (storyFn) => - _jsx(_components.div, { - style: { - backgroundColor: 'yellow', - }, - children: storyFn(), - }), - ], - }), - '\\n', - _jsx(_components.h1, { - children: 'Decorated story', - }), - '\\n', - _jsx(Story, { - name: 'one', - decorators: [ - (storyFn) => - _jsx(_components.div, { - className: 'local', - children: storyFn(), - }), - ], - children: _jsx(Button, { - children: 'One', - }), - }), - ], + export const one = () => + /*#__PURE__*/ _jsx(Button, { + children: 'One', }); - } - export default function MDXContent(props = {}) { - const { wrapper: MDXLayout } = { - ..._provideComponents(), - ...props.components, - }; - return MDXLayout - ? _jsx(MDXLayout, { - ...props, - children: _jsx(_createMdxContent, { - ...props, - }), - }) - : _createMdxContent(props); - } + one.storyName = 'one'; + one.parameters = { + storySource: { + source: '', + }, + }; + one.decorators = [ + (storyFn) => + /*#__PURE__*/ _jsx('div', { + className: 'local', + children: storyFn(), + }), + ]; + const componentMeta = { + title: 'Button', + decorators: [ + (storyFn) => + /*#__PURE__*/ _jsx('div', { + style: { + backgroundColor: 'yellow', + }, + children: storyFn(), + }), + ], + tags: ['stories-mdx'], + includeStories: ['one'], + }; + componentMeta.parameters = componentMeta.parameters || {}; + componentMeta.parameters.docs = { + ...(componentMeta.parameters.docs || {}), + page: MDXContent, + }; + export default componentMeta; `); }); @@ -638,47 +558,23 @@ describe('docs-mdx-compiler-plugin', () => { This is a documentation-only MDX file which cleans a dummy 'docsOnly: true' story. `) ).toMatchInlineSnapshot(` - import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from 'react/jsx-runtime'; - import { useMDXComponents as _provideComponents } from '@mdx-js/react'; - import { Meta } from '@storybook/addon-docs'; - function _createMdxContent(props) { - const _components = { - h1: 'h1', - p: 'p', - ..._provideComponents(), - ...props.components, - }; - return _jsxs(_Fragment, { - children: [ - _jsx(Meta, { - title: 'docs-only', - }), - '\\n', - _jsx(_components.h1, { - children: 'Documentation only', - }), - '\\n', - _jsx(_components.p, { - children: - "This is a documentation-only MDX file which cleans a dummy 'docsOnly: true' story.", - }), - ], - }); - } - export default function MDXContent(props = {}) { - const { wrapper: MDXLayout } = { - ..._provideComponents(), - ...props.components, - }; - return MDXLayout - ? _jsx(MDXLayout, { - ...props, - children: _jsx(_createMdxContent, { - ...props, - }), - }) - : _createMdxContent(props); - } + export const __page = () => { + throw new Error('Docs-only story'); + }; + __page.parameters = { + docsOnly: true, + }; + const componentMeta = { + title: 'docs-only', + tags: ['stories-mdx'], + includeStories: ['__page'], + }; + componentMeta.parameters = componentMeta.parameters || {}; + componentMeta.parameters.docs = { + ...(componentMeta.parameters.docs || {}), + page: MDXContent, + }; + export default componentMeta; `); }); @@ -697,59 +593,37 @@ describe('docs-mdx-compiler-plugin', () => { `) ).toMatchInlineSnapshot(` - import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from 'react/jsx-runtime'; - import { useMDXComponents as _provideComponents } from '@mdx-js/react'; - import { Button } from '@storybook/react/demo'; - import { Story, Meta } from '@storybook/addon-docs'; - function _createMdxContent(props) { - const _components = { - h1: 'h1', - ..._provideComponents(), - ...props.components, - }; - return _jsxs(_Fragment, { - children: [ - _jsx(Meta, { - title: 'Button', - loaders: [ - async () => ({ - foo: 1, - }), - ], - }), - '\\n', - _jsx(_components.h1, { - children: 'Story with loader', - }), - '\\n', - _jsx(Story, { - name: 'one', - loaders: [ - async () => ({ - bar: 2, - }), - ], - children: _jsx(Button, { - children: 'One', - }), - }), - ], + export const one = () => + /*#__PURE__*/ _jsx(Button, { + children: 'One', }); - } - export default function MDXContent(props = {}) { - const { wrapper: MDXLayout } = { - ..._provideComponents(), - ...props.components, - }; - return MDXLayout - ? _jsx(MDXLayout, { - ...props, - children: _jsx(_createMdxContent, { - ...props, - }), - }) - : _createMdxContent(props); - } + one.storyName = 'one'; + one.parameters = { + storySource: { + source: '', + }, + }; + one.loaders = [ + async () => ({ + bar: 2, + }), + ]; + const componentMeta = { + title: 'Button', + loaders: [ + async () => ({ + foo: 1, + }), + ], + tags: ['stories-mdx'], + includeStories: ['one'], + }; + componentMeta.parameters = componentMeta.parameters || {}; + componentMeta.parameters.docs = { + ...(componentMeta.parameters.docs || {}), + page: MDXContent, + }; + export default componentMeta; `); }); @@ -761,28 +635,23 @@ describe('docs-mdx-compiler-plugin', () => { `) ).toMatchInlineSnapshot(` - import { jsx as _jsx } from 'react/jsx-runtime'; - import { useMDXComponents as _provideComponents } from '@mdx-js/react'; - import { Meta } from '@storybook/addon-docs'; - function _createMdxContent(props) { - return _jsx(Meta, { - title: "Addons/Docs/what's in a title?", - }); - } - export default function MDXContent(props = {}) { - const { wrapper: MDXLayout } = { - ..._provideComponents(), - ...props.components, - }; - return MDXLayout - ? _jsx(MDXLayout, { - ...props, - children: _jsx(_createMdxContent, { - ...props, - }), - }) - : _createMdxContent(props); - } + export const __page = () => { + throw new Error('Docs-only story'); + }; + __page.parameters = { + docsOnly: true, + }; + const componentMeta = { + title: "Addons/Docs/what's in a title?", + tags: ['stories-mdx'], + includeStories: ['__page'], + }; + componentMeta.parameters = componentMeta.parameters || {}; + componentMeta.parameters.docs = { + ...(componentMeta.parameters.docs || {}), + page: MDXContent, + }; + export default componentMeta; `); }); @@ -807,58 +676,37 @@ describe('docs-mdx-compiler-plugin', () => { `) ).toMatchInlineSnapshot(` - import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from 'react/jsx-runtime'; - import { useMDXComponents as _provideComponents } from '@mdx-js/react'; - import { Button } from '@storybook/react/demo'; - import { Story, Meta } from '@storybook/addon-docs'; - export const two = 2; - function _createMdxContent(props) { - const _components = { - h1: 'h1', - ..._provideComponents(), - ...props.components, - }; - return _jsxs(_Fragment, { - children: [ - _jsx(Meta, { - title: 'Button', - }), - '\\n', - _jsx(_components.h1, { - children: 'Story definition', - }), - '\\n', - _jsx(Story, { - name: 'one', - children: _jsx(Button, { - children: 'One', - }), - }), - '\\n', - '\\n', - _jsx(Story, { - name: 'hello story', - children: _jsx(Button, { - children: 'Hello button', - }), - }), - ], + export const one = () => + /*#__PURE__*/ _jsx(Button, { + children: 'One', }); - } - export default function MDXContent(props = {}) { - const { wrapper: MDXLayout } = { - ..._provideComponents(), - ...props.components, - }; - return MDXLayout - ? _jsx(MDXLayout, { - ...props, - children: _jsx(_createMdxContent, { - ...props, - }), - }) - : _createMdxContent(props); - } + one.storyName = 'one'; + one.parameters = { + storySource: { + source: '', + }, + }; + export const helloStory = () => + /*#__PURE__*/ _jsx(Button, { + children: 'Hello button', + }); + helloStory.storyName = 'hello story'; + helloStory.parameters = { + storySource: { + source: '', + }, + }; + const componentMeta = { + title: 'Button', + tags: ['stories-mdx'], + includeStories: ['one', 'helloStory'], + }; + componentMeta.parameters = componentMeta.parameters || {}; + componentMeta.parameters.docs = { + ...(componentMeta.parameters.docs || {}), + page: MDXContent, + }; + export default componentMeta; `); }); @@ -879,54 +727,44 @@ describe('docs-mdx-compiler-plugin', () => { `) ).toMatchInlineSnapshot(` - import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from 'react/jsx-runtime'; - import { useMDXComponents as _provideComponents } from '@mdx-js/react'; - import { Button } from '@storybook/react/demo'; - import { Story, Meta } from '@storybook/addon-docs'; - function _createMdxContent(props) { - return _jsxs(_Fragment, { - children: [ - _jsx(Meta, { - title: 'Button', - component: Button, - parameters: { - notes: 'component notes', - }, - }), - '\\n', - _jsx(Story, { - name: 'component notes', - children: _jsx(Button, { - children: 'Component notes', - }), - }), - '\\n', - _jsx(Story, { - name: 'story notes', - parameters: { - notes: 'story notes', - }, - children: _jsx(Button, { - children: 'Story notes', - }), - }), - ], + export const componentNotes = () => + /*#__PURE__*/ _jsx(Button, { + children: 'Component notes', }); - } - export default function MDXContent(props = {}) { - const { wrapper: MDXLayout } = { - ..._provideComponents(), - ...props.components, - }; - return MDXLayout - ? _jsx(MDXLayout, { - ...props, - children: _jsx(_createMdxContent, { - ...props, - }), - }) - : _createMdxContent(props); - } + componentNotes.storyName = 'component notes'; + componentNotes.parameters = { + storySource: { + source: '', + }, + }; + export const storyNotes = () => + /*#__PURE__*/ _jsx(Button, { + children: 'Story notes', + }); + storyNotes.storyName = 'story notes'; + storyNotes.parameters = { + storySource: { + source: '', + }, + ...{ + notes: 'story notes', + }, + }; + const componentMeta = { + title: 'Button', + parameters: { + notes: 'component notes', + }, + component: Button, + tags: ['stories-mdx'], + includeStories: ['componentNotes', 'storyNotes'], + }; + componentMeta.parameters = componentMeta.parameters || {}; + componentMeta.parameters.docs = { + ...(componentMeta.parameters.docs || {}), + page: MDXContent, + }; + export default componentMeta; `); }); @@ -960,84 +798,41 @@ describe('docs-mdx-compiler-plugin', () => { `) ).toMatchInlineSnapshot(` - import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from 'react/jsx-runtime'; - import { useMDXComponents as _provideComponents } from '@mdx-js/react'; - import { Button } from '@storybook/react/demo'; - import { Canvas, Story, Meta } from '@storybook/addon-docs'; - function _createMdxContent(props) { - const _components = { - h1: 'h1', - p: 'p', - ..._provideComponents(), - ...props.components, - }; - return _jsxs(_Fragment, { - children: [ - _jsx(Meta, { - title: 'Button', - component: Button, - parameters: { - notes: 'component notes', - }, - }), - '\\n', - _jsx(_components.h1, { - children: 'Canvas', - }), - '\\n', - _jsx(_components.p, { - children: 'Canvases can contain normal components, stories, and story references', - }), - '\\n', - _jsxs(Canvas, { - children: [ - _jsx(Button, { - children: 'Just a button', - }), - _jsx(Story, { - name: 'hello button', - children: _jsx(Button, { - children: 'Hello button', - }), - }), - _jsx(Story, { - name: 'two', - children: _jsx(Button, { - children: 'Two', - }), - }), - _jsx(Story, { - id: 'welcome--welcome', - }), - ], - }), - '\\n', - _jsx(_components.p, { - children: 'Canvas without a story', - }), - '\\n', - _jsx(Canvas, { - children: _jsx(Button, { - children: 'Just a button', - }), - }), - ], + export const helloButton = () => + /*#__PURE__*/ _jsx(Button, { + children: 'Hello button', }); - } - export default function MDXContent(props = {}) { - const { wrapper: MDXLayout } = { - ..._provideComponents(), - ...props.components, - }; - return MDXLayout - ? _jsx(MDXLayout, { - ...props, - children: _jsx(_createMdxContent, { - ...props, - }), - }) - : _createMdxContent(props); - } + helloButton.storyName = 'hello button'; + helloButton.parameters = { + storySource: { + source: '', + }, + }; + export const two = () => + /*#__PURE__*/ _jsx(Button, { + children: 'Two', + }); + two.storyName = 'two'; + two.parameters = { + storySource: { + source: '', + }, + }; + const componentMeta = { + title: 'Button', + parameters: { + notes: 'component notes', + }, + component: Button, + tags: ['stories-mdx'], + includeStories: ['helloButton', 'two'], + }; + componentMeta.parameters = componentMeta.parameters || {}; + componentMeta.parameters.docs = { + ...(componentMeta.parameters.docs || {}), + page: MDXContent, + }; + export default componentMeta; `); }); @@ -1062,64 +857,36 @@ describe('docs-mdx-compiler-plugin', () => { `) ).toMatchInlineSnapshot(` - import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from 'react/jsx-runtime'; - import { useMDXComponents as _provideComponents } from '@mdx-js/react'; - import { Button } from '@storybook/react/demo'; - import { Story, Meta } from '@storybook/addon-docs'; - export const Template = (args) => - _jsx(Button, { - children: 'Component notes', - }); - function _createMdxContent(props) { - const _components = { - h1: 'h1', - ..._provideComponents(), - ...props.components, - }; - return _jsxs(_Fragment, { - children: [ - _jsx(Meta, { - title: 'Button', - }), - '\\n', - _jsx(_components.h1, { - children: 'Args', - }), - '\\n', - '\\n', - _jsx(Story, { - name: 'component notes', - args: { - a: 1, - b: 2, - }, - argTypes: { - a: { - name: 'A', - }, - b: { - name: 'B', - }, - }, - children: Template.bind({}), - }), - ], - }); - } - export default function MDXContent(props = {}) { - const { wrapper: MDXLayout } = { - ..._provideComponents(), - ...props.components, - }; - return MDXLayout - ? _jsx(MDXLayout, { - ...props, - children: _jsx(_createMdxContent, { - ...props, - }), - }) - : _createMdxContent(props); - } + export const componentNotes = Template.bind({}); + componentNotes.storyName = 'component notes'; + componentNotes.argTypes = { + a: { + name: 'A', + }, + b: { + name: 'B', + }, + }; + componentNotes.args = { + a: 1, + b: 2, + }; + componentNotes.parameters = { + storySource: { + source: 'args => ', + }, + }; + const componentMeta = { + title: 'Button', + tags: ['stories-mdx'], + includeStories: ['componentNotes'], + }; + componentMeta.parameters = componentMeta.parameters || {}; + componentMeta.parameters.docs = { + ...(componentMeta.parameters.docs || {}), + page: MDXContent, + }; + export default componentMeta; `); }); @@ -1133,41 +900,15 @@ describe('docs-mdx-compiler-plugin', () => { `) ).toMatchInlineSnapshot(` - import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from 'react/jsx-runtime'; - import { useMDXComponents as _provideComponents } from '@mdx-js/react'; - import { Story } from '@storybook/addon-docs'; - function _createMdxContent(props) { - const _components = { - h1: 'h1', - ..._provideComponents(), - ...props.components, - }; - return _jsxs(_Fragment, { - children: [ - _jsx(_components.h1, { - children: 'Current story', - }), - '\\n', - _jsx(Story, { - id: '.', - }), - ], - }); - } - export default function MDXContent(props = {}) { - const { wrapper: MDXLayout } = { - ..._provideComponents(), - ...props.components, - }; - return MDXLayout - ? _jsx(MDXLayout, { - ...props, - children: _jsx(_createMdxContent, { - ...props, - }), - }) - : _createMdxContent(props); - } + const componentMeta = { + includeStories: [], + }; + componentMeta.parameters = componentMeta.parameters || {}; + componentMeta.parameters.docs = { + ...(componentMeta.parameters.docs || {}), + page: MDXContent, + }; + export default componentMeta; `); }); @@ -1183,46 +924,24 @@ describe('docs-mdx-compiler-plugin', () => { Plain text `) ).toMatchInlineSnapshot(` - import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from 'react/jsx-runtime'; - import { useMDXComponents as _provideComponents } from '@mdx-js/react'; - import { Story, Meta } from '@storybook/addon-docs'; - function _createMdxContent(props) { - const _components = { - h1: 'h1', - ..._provideComponents(), - ...props.components, - }; - return _jsxs(_Fragment, { - children: [ - _jsx(Meta, { - title: 'Text', - }), - '\\n', - _jsx(_components.h1, { - children: 'Story definition', - }), - '\\n', - _jsx(Story, { - name: 'text', - children: 'Plain text', - }), - ], - }); - } - export default function MDXContent(props = {}) { - const { wrapper: MDXLayout } = { - ..._provideComponents(), - ...props.components, - }; - return MDXLayout - ? _jsx(MDXLayout, { - ...props, - children: _jsx(_createMdxContent, { - ...props, - }), - }) - : _createMdxContent(props); - } + export const text = () => 'Plain text'; + text.storyName = 'text'; + text.parameters = { + storySource: { + source: '"Plain text"', + }, + }; + const componentMeta = { + title: 'Text', + tags: ['stories-mdx'], + includeStories: ['text'], + }; + componentMeta.parameters = componentMeta.parameters || {}; + componentMeta.parameters.docs = { + ...(componentMeta.parameters.docs || {}), + page: MDXContent, + }; + export default componentMeta; `); }); @@ -1253,70 +972,57 @@ describe('docs-mdx-compiler-plugin', () => { `) ).toMatchInlineSnapshot(` - import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from 'react/jsx-runtime'; - import { useMDXComponents as _provideComponents } from '@mdx-js/react'; - import { Button } from '@storybook/react/demo'; - import { Story, Meta } from '@storybook/addon-docs'; - function _createMdxContent(props) { - const _components = { - h1: 'h1', - ..._provideComponents(), - ...props.components, - }; - return _jsxs(_Fragment, { - children: [ - _jsx(Meta, { - title: 'Button', - }), - '\\n', - _jsx(_components.h1, { - children: 'Story definition', - }), - '\\n', - _jsx(Story, { - name: 'one', - children: _jsx(Button, { - children: 'One', - }), - }), - '\\n', - _jsx(Story, { - name: 'hello story', - children: _jsx(Button, { - children: 'Hello button', - }), - }), - '\\n', - _jsx(Story, { - name: 'w/punctuation', - children: _jsx(Button, { - children: 'with punctuation', - }), - }), - '\\n', - _jsx(Story, { - name: '1 fine day', - children: _jsx(Button, { - children: 'starts with number', - }), - }), - ], + export const one = () => + /*#__PURE__*/ _jsx(Button, { + children: 'One', }); - } - export default function MDXContent(props = {}) { - const { wrapper: MDXLayout } = { - ..._provideComponents(), - ...props.components, - }; - return MDXLayout - ? _jsx(MDXLayout, { - ...props, - children: _jsx(_createMdxContent, { - ...props, - }), - }) - : _createMdxContent(props); - } + one.storyName = 'one'; + one.parameters = { + storySource: { + source: '', + }, + }; + export const helloStory = () => + /*#__PURE__*/ _jsx(Button, { + children: 'Hello button', + }); + helloStory.storyName = 'hello story'; + helloStory.parameters = { + storySource: { + source: '', + }, + }; + export const wPunctuation = () => + /*#__PURE__*/ _jsx(Button, { + children: 'with punctuation', + }); + wPunctuation.storyName = 'w/punctuation'; + wPunctuation.parameters = { + storySource: { + source: '', + }, + }; + export const _1FineDay = () => + /*#__PURE__*/ _jsx(Button, { + children: 'starts with number', + }); + _1FineDay.storyName = '1 fine day'; + _1FineDay.parameters = { + storySource: { + source: '', + }, + }; + const componentMeta = { + title: 'Button', + tags: ['stories-mdx'], + includeStories: ['one', 'helloStory', 'wPunctuation', '_1FineDay'], + }; + componentMeta.parameters = componentMeta.parameters || {}; + componentMeta.parameters.docs = { + ...(componentMeta.parameters.docs || {}), + page: MDXContent, + }; + export default componentMeta; `); }); @@ -1336,66 +1042,24 @@ describe('docs-mdx-compiler-plugin', () => { {basicFn} `) ).toMatchInlineSnapshot(` - import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from 'react/jsx-runtime'; - import { useMDXComponents as _provideComponents } from '@mdx-js/react'; - import { Meta, Story } from '@storybook/addon-docs'; - export const basicFn = () => { - const { Button } = _provideComponents() || {}; - if (!Button) _missingMdxReference('Button', true); - return _jsx(Button, {}); + export const basic = assertIsFn(basicFn); + basic.storyName = 'basic'; + basic.parameters = { + storySource: { + source: 'basicFn', + }, }; - function _createMdxContent(props) { - const _components = { - h1: 'h1', - p: 'p', - ..._provideComponents(), - ...props.components, - }; - return _jsxs(_Fragment, { - children: [ - _jsx(Meta, { - title: 'story-function-var', - }), - '\\n', - '\\n', - _jsx(_components.h1, { - children: 'Button', - }), - '\\n', - _jsx(_components.p, { - children: 'I can define a story with the function defined in CSF:', - }), - '\\n', - _jsx(Story, { - name: 'basic', - children: basicFn, - }), - ], - }); - } - export default function MDXContent(props = {}) { - const { wrapper: MDXLayout } = { - ..._provideComponents(), - ...props.components, - }; - return MDXLayout - ? _jsx(MDXLayout, { - ...props, - children: _jsx(_createMdxContent, { - ...props, - }), - }) - : _createMdxContent(props); - } - function _missingMdxReference(id, component) { - throw new Error( - 'Expected ' + - (component ? 'component' : 'object') + - ' \`' + - id + - '\` to be defined: you likely forgot to import, pass, or provide it.' - ); - } + const componentMeta = { + title: 'story-function-var', + tags: ['stories-mdx'], + includeStories: ['basic'], + }; + componentMeta.parameters = componentMeta.parameters || {}; + componentMeta.parameters.docs = { + ...(componentMeta.parameters.docs || {}), + page: MDXContent, + }; + export default componentMeta; `); }); @@ -1412,48 +1076,28 @@ describe('docs-mdx-compiler-plugin', () => { `) ).toMatchInlineSnapshot(` - import { jsx as _jsx } from 'react/jsx-runtime'; - import { useMDXComponents as _provideComponents } from '@mdx-js/react'; - function _createMdxContent(props) { - const { Story } = { - ..._provideComponents(), - ...props.components, - }; - if (!Story) _missingMdxReference('Story', true); - return _jsx(Story, { - name: 'function', - height: '100px', - children: () => { - const btn = document.createElement('button'); - btn.innerHTML = 'Hello Button'; - btn.addEventListener('click', action('Click')); - return btn; - }, - }); - } - export default function MDXContent(props = {}) { - const { wrapper: MDXLayout } = { - ..._provideComponents(), - ...props.components, - }; - return MDXLayout - ? _jsx(MDXLayout, { - ...props, - children: _jsx(_createMdxContent, { - ...props, - }), - }) - : _createMdxContent(props); - } - function _missingMdxReference(id, component) { - throw new Error( - 'Expected ' + - (component ? 'component' : 'object') + - ' \`' + - id + - '\` to be defined: you likely forgot to import, pass, or provide it.' - ); - } + export const functionStory = () => { + const btn = document.createElement('button'); + btn.innerHTML = 'Hello Button'; + btn.addEventListener('click', action('Click')); + return btn; + }; + functionStory.storyName = 'function'; + functionStory.parameters = { + storySource: { + source: + '() => {\\n const btn = document.createElement("button");\\n btn.innerHTML = "Hello Button";\\n btn.addEventListener("click", action("Click"));\\n return btn;\\n}', + }, + }; + const componentMeta = { + includeStories: ['functionStory'], + }; + componentMeta.parameters = componentMeta.parameters || {}; + componentMeta.parameters.docs = { + ...(componentMeta.parameters.docs || {}), + page: MDXContent, + }; + export default componentMeta; `); }); @@ -1472,53 +1116,34 @@ describe('docs-mdx-compiler-plugin', () => { `) ).toMatchInlineSnapshot(` - import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from 'react/jsx-runtime'; - import { useMDXComponents as _provideComponents } from '@mdx-js/react'; - import { Story, Meta } from '@storybook/addon-docs'; - function _createMdxContent(props) { - const _components = { - h1: 'h1', - ..._provideComponents(), - ...props.components, - }; - return _jsxs(_Fragment, { + export const multipleChildren = () => + /*#__PURE__*/ _jsxs(_Fragment, { children: [ - _jsx(Meta, { - title: 'Multiple', - }), - '\\n', - _jsx(_components.h1, { - children: 'Multiple children', + /*#__PURE__*/ _jsx('p', { + children: 'Hello Child #1', }), - '\\n', - _jsxs(Story, { - name: 'multiple children', - children: [ - _jsx('p', { - children: 'Hello Child #1', - }), - _jsx('p', { - children: 'Hello Child #2', - }), - ], + /*#__PURE__*/ _jsx('p', { + children: 'Hello Child #2', }), ], }); - } - export default function MDXContent(props = {}) { - const { wrapper: MDXLayout } = { - ..._provideComponents(), - ...props.components, - }; - return MDXLayout - ? _jsx(MDXLayout, { - ...props, - children: _jsx(_createMdxContent, { - ...props, - }), - }) - : _createMdxContent(props); - } + multipleChildren.storyName = 'multiple children'; + multipleChildren.parameters = { + storySource: { + source: '

{"Hello Child #1"}

\\n

{"Hello Child #2"}

', + }, + }; + const componentMeta = { + title: 'Multiple', + tags: ['stories-mdx'], + includeStories: ['multipleChildren'], + }; + componentMeta.parameters = componentMeta.parameters || {}; + componentMeta.parameters.docs = { + ...(componentMeta.parameters.docs || {}), + page: MDXContent, + }; + export default componentMeta; `); }); @@ -1546,58 +1171,33 @@ describe('docs-mdx-compiler-plugin', () => { `) ).toMatchInlineSnapshot(` - import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from 'react/jsx-runtime'; - import { useMDXComponents as _provideComponents } from '@mdx-js/react'; - import { Story, Meta } from '@storybook/addon-docs'; - import { Welcome, Button } from '@storybook/angular/demo'; - import { linkTo } from '@storybook/addon-links'; - function _createMdxContent(props) { - const _components = { - h1: 'h1', - ..._provideComponents(), - ...props.components, - }; - return _jsxs(_Fragment, { - children: [ - _jsx(Meta, { - title: 'MDX|Welcome', - }), - '\\n', - _jsx(_components.h1, { - children: 'Story object', - }), - '\\n', - _jsx(Story, { - name: 'to storybook', - height: '300px', - children: { - template: - '', - props: { - showApp: linkTo('Button'), - }, - moduleMetadata: { - declarations: [Welcome], - }, - }, - }), - ], - }); - } - export default function MDXContent(props = {}) { - const { wrapper: MDXLayout } = { - ..._provideComponents(), - ...props.components, - }; - return MDXLayout - ? _jsx(MDXLayout, { - ...props, - children: _jsx(_createMdxContent, { - ...props, - }), - }) - : _createMdxContent(props); - } + export const toStorybook = () => ({ + template: '', + props: { + showApp: linkTo('Button'), + }, + moduleMetadata: { + declarations: [Welcome], + }, + }); + toStorybook.storyName = 'to storybook'; + toStorybook.parameters = { + storySource: { + source: + '{\\n template: "",\\n props: {\\n showApp: linkTo("Button")\\n },\\n moduleMetadata: {\\n declarations: [Welcome]\\n }\\n}', + }, + }; + const componentMeta = { + title: 'MDX|Welcome', + tags: ['stories-mdx'], + includeStories: ['toStorybook'], + }; + componentMeta.parameters = componentMeta.parameters || {}; + componentMeta.parameters.docs = { + ...(componentMeta.parameters.docs || {}), + page: MDXContent, + }; + export default componentMeta; `); }); @@ -1611,41 +1211,15 @@ describe('docs-mdx-compiler-plugin', () => { `) ).toMatchInlineSnapshot(` - import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from 'react/jsx-runtime'; - import { useMDXComponents as _provideComponents } from '@mdx-js/react'; - import { Story } from '@storybook/addon-docs'; - function _createMdxContent(props) { - const _components = { - h1: 'h1', - ..._provideComponents(), - ...props.components, - }; - return _jsxs(_Fragment, { - children: [ - _jsx(_components.h1, { - children: 'Story reference', - }), - '\\n', - _jsx(Story, { - id: 'welcome--welcome', - }), - ], - }); - } - export default function MDXContent(props = {}) { - const { wrapper: MDXLayout } = { - ..._provideComponents(), - ...props.components, - }; - return MDXLayout - ? _jsx(MDXLayout, { - ...props, - children: _jsx(_createMdxContent, { - ...props, - }), - }) - : _createMdxContent(props); - } + const componentMeta = { + includeStories: [], + }; + componentMeta.parameters = componentMeta.parameters || {}; + componentMeta.parameters.docs = { + ...(componentMeta.parameters.docs || {}), + page: MDXContent, + }; + export default componentMeta; `); }); @@ -1661,29 +1235,23 @@ describe('docs-mdx-compiler-plugin', () => { ].join('\n') ) ).toMatchInlineSnapshot(` - import { jsx as _jsx } from 'react/jsx-runtime'; - import { useMDXComponents as _provideComponents } from '@mdx-js/react'; - import { Meta, Story } from '@storybook/addon-docs'; - import { titleFunction } from '../title-generators'; - function _createMdxContent(props) { - return _jsx(Meta, { - title: \`\${titleFunction('template')}\`, - }); - } - export default function MDXContent(props = {}) { - const { wrapper: MDXLayout } = { - ..._provideComponents(), - ...props.components, - }; - return MDXLayout - ? _jsx(MDXLayout, { - ...props, - children: _jsx(_createMdxContent, { - ...props, - }), - }) - : _createMdxContent(props); - } + export const __page = () => { + throw new Error('Docs-only story'); + }; + __page.parameters = { + docsOnly: true, + }; + const componentMeta = { + title: \`\${titleFunction('template')}\`, + tags: ['stories-mdx'], + includeStories: ['__page'], + }; + componentMeta.parameters = componentMeta.parameters || {}; + componentMeta.parameters.docs = { + ...(componentMeta.parameters.docs || {}), + page: MDXContent, + }; + export default componentMeta; `); }); @@ -1699,49 +1267,63 @@ describe('docs-mdx-compiler-plugin', () => { `) ).toMatchInlineSnapshot(` - import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from 'react/jsx-runtime'; - import { useMDXComponents as _provideComponents } from '@mdx-js/react'; - import { Button } from '@storybook/react/demo'; - function _createMdxContent(props) { - const _components = { - h1: 'h1', - p: 'p', - ..._provideComponents(), - ...props.components, - }; - return _jsxs(_Fragment, { - children: [ - _jsx(_components.h1, { - children: 'Hello MDX', - }), - '\\n', - _jsx(_components.p, { - children: 'This is some random content.', - }), - '\\n', - _jsx(Button, { - children: 'Hello button', - }), - ], - }); - } - export default function MDXContent(props = {}) { - const { wrapper: MDXLayout } = { - ..._provideComponents(), - ...props.components, - }; - return MDXLayout - ? _jsx(MDXLayout, { - ...props, - children: _jsx(_createMdxContent, { - ...props, - }), - }) - : _createMdxContent(props); - } + const componentMeta = { + includeStories: [], + }; + componentMeta.parameters = componentMeta.parameters || {}; + componentMeta.parameters.docs = { + ...(componentMeta.parameters.docs || {}), + page: MDXContent, + }; + export default componentMeta; `); }); + it('errors on missing story props', async () => { + await expect(async () => + clean(dedent` + import { Button } from '@storybook/react/demo'; + import { Story, Meta } from '@storybook/addon-docs'; + + + + # Bad story + + + + + `) + ).rejects.toThrow('Expected a Story name, id, or story attribute'); + }); + + it("errors on story 'of' prop", async () => { + await expect(async () => + clean(dedent` + import * as MyStories from './My.stories'; + import { Story, Meta } from '@storybook/addon-docs'; + + + + # Bad story + + + `) + ).rejects.toThrow(`The 'of' prop is not supported in .stories.mdx files, only .mdx files. + See https://storybook.js.org/docs/7.0/react/writing-docs/mdx on how to write MDX files and stories separately.`); + }); + + it("errors on meta 'of' prop", async () => { + await expect(async () => + clean(dedent` + import * as MyStories from './My.stories'; + import { Meta } from '@storybook/addon-docs'; + + + `) + ).rejects.toThrow(`The 'of' prop is not supported in .stories.mdx files, only .mdx files. + See https://storybook.js.org/docs/7.0/react/writing-docs/mdx on how to write MDX files and stories separately.`); + }); + describe('csf3', () => { it('auto-title-docs-only.mdx', () => { expect( @@ -1755,51 +1337,22 @@ describe('docs-mdx-compiler-plugin', () => { Spme **markdown** here! `) ).toMatchInlineSnapshot(` - import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from 'react/jsx-runtime'; - import { useMDXComponents as _provideComponents } from '@mdx-js/react'; - import { Meta } from '@storybook/addon-docs'; - function _createMdxContent(props) { - const _components = { - h1: 'h1', - p: 'p', - strong: 'strong', - ..._provideComponents(), - ...props.components, - }; - return _jsxs(_Fragment, { - children: [ - _jsx(Meta, {}), - '\\n', - _jsx(_components.h1, { - children: 'Auto-title Docs Only', - }), - '\\n', - _jsxs(_components.p, { - children: [ - 'Spme ', - _jsx(_components.strong, { - children: 'markdown', - }), - ' here!', - ], - }), - ], - }); - } - export default function MDXContent(props = {}) { - const { wrapper: MDXLayout } = { - ..._provideComponents(), - ...props.components, - }; - return MDXLayout - ? _jsx(MDXLayout, { - ...props, - children: _jsx(_createMdxContent, { - ...props, - }), - }) - : _createMdxContent(props); - } + export const __page = () => { + throw new Error('Docs-only story'); + }; + __page.parameters = { + docsOnly: true, + }; + const componentMeta = { + tags: ['stories-mdx'], + includeStories: ['__page'], + }; + componentMeta.parameters = componentMeta.parameters || {}; + componentMeta.parameters.docs = { + ...(componentMeta.parameters.docs || {}), + page: MDXContent, + }; + export default componentMeta; `); }); @@ -1816,40 +1369,27 @@ describe('docs-mdx-compiler-plugin', () => { `) ).toMatchInlineSnapshot(` - import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from 'react/jsx-runtime'; - import { useMDXComponents as _provideComponents } from '@mdx-js/react'; - import { Button } from '@storybook/react/demo'; - import { Story, Meta } from '@storybook/addon-docs'; - function _createMdxContent(props) { - return _jsxs(_Fragment, { - children: [ - _jsx(Meta, { - component: Button, - }), - '\\n', - _jsx(Story, { - name: 'Basic', - children: _jsx(Button, { - children: 'Basic', - }), - }), - ], + export const basic = () => + /*#__PURE__*/ _jsx(Button, { + children: 'Basic', }); - } - export default function MDXContent(props = {}) { - const { wrapper: MDXLayout } = { - ..._provideComponents(), - ...props.components, - }; - return MDXLayout - ? _jsx(MDXLayout, { - ...props, - children: _jsx(_createMdxContent, { - ...props, - }), - }) - : _createMdxContent(props); - } + basic.storyName = 'Basic'; + basic.parameters = { + storySource: { + source: '', + }, + }; + const componentMeta = { + component: Button, + tags: ['stories-mdx'], + includeStories: ['basic'], + }; + componentMeta.parameters = componentMeta.parameters || {}; + componentMeta.parameters.docs = { + ...(componentMeta.parameters.docs || {}), + page: MDXContent, + }; + export default componentMeta; `); }); @@ -1864,38 +1404,25 @@ describe('docs-mdx-compiler-plugin', () => { `) ).toMatchInlineSnapshot(` - import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from 'react/jsx-runtime'; - import { useMDXComponents as _provideComponents } from '@mdx-js/react'; - import { Button } from '@storybook/react/demo'; - import { Story, Meta } from '@storybook/addon-docs'; - function _createMdxContent(props) { - return _jsxs(_Fragment, { - children: [ - _jsx(Meta, { - title: 'Button', - component: Button, - }), - '\\n', - _jsx(Story, { - name: 'Basic', - }), - ], - }); - } - export default function MDXContent(props = {}) { - const { wrapper: MDXLayout } = { - ..._provideComponents(), - ...props.components, - }; - return MDXLayout - ? _jsx(MDXLayout, { - ...props, - children: _jsx(_createMdxContent, { - ...props, - }), - }) - : _createMdxContent(props); - } + export const basic = {}; + basic.storyName = 'Basic'; + basic.parameters = { + storySource: { + source: '{}', + }, + }; + const componentMeta = { + title: 'Button', + component: Button, + tags: ['stories-mdx'], + includeStories: ['basic'], + }; + componentMeta.parameters = componentMeta.parameters || {}; + componentMeta.parameters.docs = { + ...(componentMeta.parameters.docs || {}), + page: MDXContent, + }; + export default componentMeta; `); }); @@ -1910,42 +1437,29 @@ describe('docs-mdx-compiler-plugin', () => { `) ).toMatchInlineSnapshot(` - import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from 'react/jsx-runtime'; - import { useMDXComponents as _provideComponents } from '@mdx-js/react'; - import { Button } from '@storybook/react/demo'; - import { Story, Meta } from '@storybook/addon-docs'; - function _createMdxContent(props) { - return _jsxs(_Fragment, { - children: [ - _jsx(Meta, { - title: 'Button', - component: Button, - render: (args) => - _jsx(Button, { - ...args, - }), - }), - '\\n', - _jsx(Story, { - name: 'Basic', - }), - ], - }); - } - export default function MDXContent(props = {}) { - const { wrapper: MDXLayout } = { - ..._provideComponents(), - ...props.components, - }; - return MDXLayout - ? _jsx(MDXLayout, { - ...props, - children: _jsx(_createMdxContent, { - ...props, - }), - }) - : _createMdxContent(props); - } + export const basic = {}; + basic.storyName = 'Basic'; + basic.parameters = { + storySource: { + source: '{}', + }, + }; + const componentMeta = { + title: 'Button', + component: Button, + render: (args) => + /*#__PURE__*/ _jsx(Button, { + ...args, + }), + tags: ['stories-mdx'], + includeStories: ['basic'], + }; + componentMeta.parameters = componentMeta.parameters || {}; + componentMeta.parameters.docs = { + ...(componentMeta.parameters.docs || {}), + page: MDXContent, + }; + export default componentMeta; `); }); @@ -1960,42 +1474,29 @@ describe('docs-mdx-compiler-plugin', () => { - - `) - ).toMatchInlineSnapshot(` - export const componentNotes = () => - /*#__PURE__*/ _jsx(Button, { - children: 'Component notes', - }); - componentNotes.storyName = 'component notes'; - componentNotes.parameters = { - storySource: { - source: '', - }, - }; - const componentMeta = { - title: 'Button', - args: { - a: 1, - b: 2, - }, - argTypes: { - a: { - name: 'A', - }, - b: { - name: 'B', - }, - }, - tags: ['stories-mdx'], - includeStories: ['componentNotes'], - }; - componentMeta.parameters = componentMeta.parameters || {}; - componentMeta.parameters.docs = { - ...(componentMeta.parameters.docs || {}), - page: MDXContent, - }; - export default componentMeta; - `); - }); - - it('component-id.mdx', () => { - expect( - clean(dedent` - import { Button } from '@storybook/react/demo'; - import { Story, Meta } from '@storybook/addon-docs'; - - - - - - - `) - ).toMatchInlineSnapshot(` - export const componentNotes = () => - /*#__PURE__*/ _jsx(Button, { - children: 'Component notes', - }); - componentNotes.storyName = 'component notes'; - componentNotes.parameters = { - storySource: { - source: '', - }, - }; - const componentMeta = { - title: 'Button', - id: 'button-id', - component: Button, - tags: ['stories-mdx'], - includeStories: ['componentNotes'], - }; - componentMeta.parameters = componentMeta.parameters || {}; - componentMeta.parameters.docs = { - ...(componentMeta.parameters.docs || {}), - page: MDXContent, - }; - export default componentMeta; - `); - }); - it('csf-imports.mdx', () => { expect( - clean(dedent` + clean( + compileSync(dedent` import { Story, Meta, Canvas } from '@storybook/addon-docs'; import { Welcome, Button } from '@storybook/angular/demo'; import * as MyStories from './My.stories'; @@ -461,94 +315,47 @@ describe('docs-mdx-compiler-plugin', () => { # Stories from CSF imports - + - + - - - `) - ).toMatchInlineSnapshot(` - export const _Basic_ = MyStories.Basic; - export const _Other_ = Other; - export const _Foo_ = MyStories.Foo; - _Foo_.storyName = 'renamed'; - const componentMeta = { - title: 'MDX/CSF imports', - tags: ['stories-mdx'], - includeStories: ['_Basic_', '_Other_', '_Foo_'], - }; - componentMeta.parameters = componentMeta.parameters || {}; - componentMeta.parameters.docs = { - ...(componentMeta.parameters.docs || {}), - page: MDXContent, - }; - export default componentMeta; - `); - }); - - it('decorators.mdx', () => { - expect( - clean(dedent` - import { Button } from '@storybook/react/demo'; - import { Story, Meta } from '@storybook/addon-docs'; - -
{storyFn()}
]} - /> - - # Decorated story - -
{storyFn()}
]}> - - `) + ) ).toMatchInlineSnapshot(` - export const one = () => - /*#__PURE__*/ _jsx(Button, { - children: 'One', + import {Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs} from "react/jsx-runtime"; + import {useMDXComponents as _provideComponents} from "@mdx-js/react"; + import {Story, Meta, Canvas} from '@storybook/addon-docs'; + import {Welcome, Button} from '@storybook/angular/demo'; + import * as MyStories from './My.stories'; + import {Other} from './Other.stories'; + function _createMdxContent(props) { + const _components = { + h1: "h1", + ..._provideComponents(), + ...props.components + }; + return _jsxs(_Fragment, { + children: [_jsx(Meta, { + title: "MDX/CSF imports" + }), "\\n", _jsx(_components.h1, { + children: "Stories from CSF imports" + }), "\\n", _jsx(Story, { + of: MyStories.Basic + }), "\\n", _jsx(Canvas, { + children: _jsx(Story, { + of: Other + }) + })] }); - one.storyName = 'one'; - one.parameters = { - storySource: { - source: '', - }, - }; - one.decorators = [ - (storyFn) => - /*#__PURE__*/ _jsx('div', { - className: 'local', - children: storyFn(), - }), - ]; - const componentMeta = { - title: 'Button', - decorators: [ - (storyFn) => - /*#__PURE__*/ _jsx('div', { - style: { - backgroundColor: 'yellow', - }, - children: storyFn(), - }), - ], - tags: ['stories-mdx'], - includeStories: ['one'], - }; - componentMeta.parameters = componentMeta.parameters || {}; - componentMeta.parameters.docs = { - ...(componentMeta.parameters.docs || {}), - page: MDXContent, - }; - export default componentMeta; + } `); }); it('docs-only.mdx', () => { expect( - clean(dedent` + clean( + compileSync(dedent` import { Meta } from '@storybook/addon-docs'; @@ -557,107 +364,56 @@ describe('docs-mdx-compiler-plugin', () => { This is a documentation-only MDX file which cleans a dummy 'docsOnly: true' story. `) + ) ).toMatchInlineSnapshot(` - export const __page = () => { - throw new Error('Docs-only story'); - }; - __page.parameters = { - docsOnly: true, - }; - const componentMeta = { - title: 'docs-only', - tags: ['stories-mdx'], - includeStories: ['__page'], - }; - componentMeta.parameters = componentMeta.parameters || {}; - componentMeta.parameters.docs = { - ...(componentMeta.parameters.docs || {}), - page: MDXContent, - }; - export default componentMeta; - `); - }); - - it('loaders.mdx', () => { - expect( - clean(dedent` - import { Button } from '@storybook/react/demo'; - import { Story, Meta } from '@storybook/addon-docs'; - - ({ foo: 1 })]} /> - - # Story with loader - - ({ bar: 2 })]}> - - - `) - ).toMatchInlineSnapshot(` - export const one = () => - /*#__PURE__*/ _jsx(Button, { - children: 'One', + import {Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs} from "react/jsx-runtime"; + import {useMDXComponents as _provideComponents} from "@mdx-js/react"; + import {Meta} from '@storybook/addon-docs'; + function _createMdxContent(props) { + const _components = { + h1: "h1", + p: "p", + ..._provideComponents(), + ...props.components + }; + return _jsxs(_Fragment, { + children: [_jsx(Meta, { + title: "docs-only" + }), "\\n", _jsx(_components.h1, { + children: "Documentation only" + }), "\\n", _jsx(_components.p, { + children: "This is a documentation-only MDX file which cleans a dummy 'docsOnly: true' story." + })] }); - one.storyName = 'one'; - one.parameters = { - storySource: { - source: '', - }, - }; - one.loaders = [ - async () => ({ - bar: 2, - }), - ]; - const componentMeta = { - title: 'Button', - loaders: [ - async () => ({ - foo: 1, - }), - ], - tags: ['stories-mdx'], - includeStories: ['one'], - }; - componentMeta.parameters = componentMeta.parameters || {}; - componentMeta.parameters.docs = { - ...(componentMeta.parameters.docs || {}), - page: MDXContent, - }; - export default componentMeta; + } `); }); it('meta-quotes-in-title.mdx', () => { expect( - clean(dedent` + clean( + compileSync(dedent` import { Meta } from '@storybook/addon-docs'; `) + ) ).toMatchInlineSnapshot(` - export const __page = () => { - throw new Error('Docs-only story'); - }; - __page.parameters = { - docsOnly: true, - }; - const componentMeta = { - title: "Addons/Docs/what's in a title?", - tags: ['stories-mdx'], - includeStories: ['__page'], - }; - componentMeta.parameters = componentMeta.parameters || {}; - componentMeta.parameters.docs = { - ...(componentMeta.parameters.docs || {}), - page: MDXContent, - }; - export default componentMeta; + import {jsx as _jsx} from "react/jsx-runtime"; + import {useMDXComponents as _provideComponents} from "@mdx-js/react"; + import {Meta} from '@storybook/addon-docs'; + function _createMdxContent(props) { + return _jsx(Meta, { + title: "Addons/Docs/what's in a title?" + }); + } `); }); it('non-story-exports.mdx', () => { expect( - clean(dedent` + clean( + compileSync(dedent` import { Button } from '@storybook/react/demo'; import { Story, Meta } from '@storybook/addon-docs'; @@ -665,879 +421,193 @@ describe('docs-mdx-compiler-plugin', () => { # Story definition - - - + export const two = 2; - - - - - `) - ).toMatchInlineSnapshot(` - export const one = () => - /*#__PURE__*/ _jsx(Button, { - children: 'One', - }); - one.storyName = 'one'; - one.parameters = { - storySource: { - source: '', - }, - }; - export const helloStory = () => - /*#__PURE__*/ _jsx(Button, { - children: 'Hello button', - }); - helloStory.storyName = 'hello story'; - helloStory.parameters = { - storySource: { - source: '', - }, - }; - const componentMeta = { - title: 'Button', - tags: ['stories-mdx'], - includeStories: ['one', 'helloStory'], - }; - componentMeta.parameters = componentMeta.parameters || {}; - componentMeta.parameters.docs = { - ...(componentMeta.parameters.docs || {}), - page: MDXContent, - }; - export default componentMeta; - `); - }); - - it('parameters.mdx', () => { - expect( - clean(dedent` - import { Button } from '@storybook/react/demo'; - import { Story, Meta } from '@storybook/addon-docs'; - - - - - - - - - - - `) - ).toMatchInlineSnapshot(` - export const componentNotes = () => - /*#__PURE__*/ _jsx(Button, { - children: 'Component notes', - }); - componentNotes.storyName = 'component notes'; - componentNotes.parameters = { - storySource: { - source: '', - }, - }; - export const storyNotes = () => - /*#__PURE__*/ _jsx(Button, { - children: 'Story notes', - }); - storyNotes.storyName = 'story notes'; - storyNotes.parameters = { - storySource: { - source: '', - }, - ...{ - notes: 'story notes', - }, - }; - const componentMeta = { - title: 'Button', - parameters: { - notes: 'component notes', - }, - component: Button, - tags: ['stories-mdx'], - includeStories: ['componentNotes', 'storyNotes'], - }; - componentMeta.parameters = componentMeta.parameters || {}; - componentMeta.parameters.docs = { - ...(componentMeta.parameters.docs || {}), - page: MDXContent, - }; - export default componentMeta; - `); - }); - - it('previews.mdx', () => { - expect( - clean(dedent` - import { Button } from '@storybook/react/demo'; - import { Canvas, Story, Meta } from '@storybook/addon-docs'; - - - - # Canvas - - Canvases can contain normal components, stories, and story references - - - - - - - - - - - - - Canvas without a story - - - - `) + ) ).toMatchInlineSnapshot(` - export const helloButton = () => - /*#__PURE__*/ _jsx(Button, { - children: 'Hello button', - }); - helloButton.storyName = 'hello button'; - helloButton.parameters = { - storySource: { - source: '', - }, - }; - export const two = () => - /*#__PURE__*/ _jsx(Button, { - children: 'Two', + import {Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs} from "react/jsx-runtime"; + import {useMDXComponents as _provideComponents} from "@mdx-js/react"; + import {Button} from '@storybook/react/demo'; + import {Story, Meta} from '@storybook/addon-docs'; + export const two = 2; + function _createMdxContent(props) { + const _components = { + h1: "h1", + ..._provideComponents(), + ...props.components + }; + return _jsxs(_Fragment, { + children: [_jsx(Meta, { + title: "Button" + }), "\\n", _jsx(_components.h1, { + children: "Story definition" + }), "\\n", _jsx(Story, { + of: Button + })] }); - two.storyName = 'two'; - two.parameters = { - storySource: { - source: '', - }, - }; - const componentMeta = { - title: 'Button', - parameters: { - notes: 'component notes', - }, - component: Button, - tags: ['stories-mdx'], - includeStories: ['helloButton', 'two'], - }; - componentMeta.parameters = componentMeta.parameters || {}; - componentMeta.parameters.docs = { - ...(componentMeta.parameters.docs || {}), - page: MDXContent, - }; - export default componentMeta; - `); - }); - - it('story-args.mdx', () => { - expect( - clean(dedent` - import { Button } from '@storybook/react/demo'; - import { Story, Meta } from '@storybook/addon-docs'; - - - - # Args - - export const Template = (args) => ; - - - {Template.bind({})} - - `) - ).toMatchInlineSnapshot(` - export const componentNotes = Template.bind({}); - componentNotes.storyName = 'component notes'; - componentNotes.argTypes = { - a: { - name: 'A', - }, - b: { - name: 'B', - }, - }; - componentNotes.args = { - a: 1, - b: 2, - }; - componentNotes.parameters = { - storySource: { - source: 'args => ', - }, - }; - const componentMeta = { - title: 'Button', - tags: ['stories-mdx'], - includeStories: ['componentNotes'], - }; - componentMeta.parameters = componentMeta.parameters || {}; - componentMeta.parameters.docs = { - ...(componentMeta.parameters.docs || {}), - page: MDXContent, - }; - export default componentMeta; + } `); }); it('story-current.mdx', () => { expect( - clean(dedent` + clean( + compileSync(dedent` import { Story } from '@storybook/addon-docs'; # Current story `) + ) ).toMatchInlineSnapshot(` - const componentMeta = { - includeStories: [], - }; - componentMeta.parameters = componentMeta.parameters || {}; - componentMeta.parameters.docs = { - ...(componentMeta.parameters.docs || {}), - page: MDXContent, - }; - export default componentMeta; - `); - }); - - it('story-def-text-only.mdx', () => { - expect( - clean(dedent` - import { Story, Meta } from '@storybook/addon-docs'; - - - - # Story definition - - Plain text - `) - ).toMatchInlineSnapshot(` - export const text = () => 'Plain text'; - text.storyName = 'text'; - text.parameters = { - storySource: { - source: '"Plain text"', - }, - }; - const componentMeta = { - title: 'Text', - tags: ['stories-mdx'], - includeStories: ['text'], - }; - componentMeta.parameters = componentMeta.parameters || {}; - componentMeta.parameters.docs = { - ...(componentMeta.parameters.docs || {}), - page: MDXContent, - }; - export default componentMeta; - `); - }); - - it('story-definitions.mdx', () => { - expect( - clean(dedent` - import { Button } from '@storybook/react/demo'; - import { Story, Meta } from '@storybook/addon-docs'; - - - - # Story definition - - - - - - - - - - - - - - - - - `) - ).toMatchInlineSnapshot(` - export const one = () => - /*#__PURE__*/ _jsx(Button, { - children: 'One', - }); - one.storyName = 'one'; - one.parameters = { - storySource: { - source: '', - }, - }; - export const helloStory = () => - /*#__PURE__*/ _jsx(Button, { - children: 'Hello button', - }); - helloStory.storyName = 'hello story'; - helloStory.parameters = { - storySource: { - source: '', - }, - }; - export const wPunctuation = () => - /*#__PURE__*/ _jsx(Button, { - children: 'with punctuation', - }); - wPunctuation.storyName = 'w/punctuation'; - wPunctuation.parameters = { - storySource: { - source: '', - }, - }; - export const _1FineDay = () => - /*#__PURE__*/ _jsx(Button, { - children: 'starts with number', - }); - _1FineDay.storyName = '1 fine day'; - _1FineDay.parameters = { - storySource: { - source: '', - }, - }; - const componentMeta = { - title: 'Button', - tags: ['stories-mdx'], - includeStories: ['one', 'helloStory', 'wPunctuation', '_1FineDay'], - }; - componentMeta.parameters = componentMeta.parameters || {}; - componentMeta.parameters.docs = { - ...(componentMeta.parameters.docs || {}), - page: MDXContent, - }; - export default componentMeta; - `); - }); - - it('story-function-var.mdx', () => { - expect( - clean(dedent` - import { Meta, Story } from '@storybook/addon-docs'; - - - - export const basicFn = () => - `) - ).toMatchInlineSnapshot(` - const componentMeta = { - includeStories: [], - }; - componentMeta.parameters = componentMeta.parameters || {}; - componentMeta.parameters.docs = { - ...(componentMeta.parameters.docs || {}), - page: MDXContent, - }; - export default componentMeta; + import {jsx as _jsx} from "react/jsx-runtime"; + import {useMDXComponents as _provideComponents} from "@mdx-js/react"; + import {Meta, Story} from '@storybook/addon-docs'; + import {titleFunction} from '../title-generators'; + function _createMdxContent(props) { + return _jsx(Meta, { + title: \`\${titleFunction('template')}\` + }); + } `); }); - it('errors on missing story props', async () => { - await expect(async () => - clean(dedent` - import { Button } from '@storybook/react/demo'; - import { Story, Meta } from '@storybook/addon-docs'; - - - - # Bad story - - - - - `) - ).rejects.toThrow('Expected a Story name, id, or story attribute'); - }); - - it("errors on story 'of' prop", async () => { - await expect(async () => - clean(dedent` - import * as MyStories from './My.stories'; - import { Story, Meta } from '@storybook/addon-docs'; - - - - # Bad story - - - `) - ).rejects.toThrow(`The 'of' prop is not supported in .stories.mdx files, only .mdx files. - See https://storybook.js.org/docs/7.0/react/writing-docs/mdx on how to write MDX files and stories separately.`); - }); - - it("errors on meta 'of' prop", async () => { - await expect(async () => - clean(dedent` - import * as MyStories from './My.stories'; - import { Meta } from '@storybook/addon-docs'; - - - `) - ).rejects.toThrow(`The 'of' prop is not supported in .stories.mdx files, only .mdx files. - See https://storybook.js.org/docs/7.0/react/writing-docs/mdx on how to write MDX files and stories separately.`); - }); - describe('csf3', () => { it('auto-title-docs-only.mdx', () => { expect( - clean(dedent` + clean( + compileSync(dedent` import { Meta } from '@storybook/addon-docs'; # Auto-title Docs Only - Spme **markdown** here! + Some **markdown** here! `) + ) ).toMatchInlineSnapshot(` - export const __page = () => { - throw new Error('Docs-only story'); - }; - __page.parameters = { - docsOnly: true, - }; - const componentMeta = { - tags: ['stories-mdx'], - includeStories: ['__page'], - }; - componentMeta.parameters = componentMeta.parameters || {}; - componentMeta.parameters.docs = { - ...(componentMeta.parameters.docs || {}), - page: MDXContent, - }; - export default componentMeta; + import {Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs} from "react/jsx-runtime"; + import {useMDXComponents as _provideComponents} from "@mdx-js/react"; + import {Meta} from '@storybook/addon-docs'; + function _createMdxContent(props) { + const _components = { + h1: "h1", + p: "p", + strong: "strong", + ..._provideComponents(), + ...props.components + }; + return _jsxs(_Fragment, { + children: [_jsx(Meta, {}), "\\n", _jsx(_components.h1, { + children: "Auto-title Docs Only" + }), "\\n", _jsxs(_components.p, { + children: ["Some ", _jsx(_components.strong, { + children: "markdown" + }), " here!"] + })] + }); + } `); }); it('auto-title.mdx', () => { expect( - clean(dedent` + clean( + compileSync(dedent` import { Button } from '@storybook/react/demo'; import { Story, Meta } from '@storybook/addon-docs'; - - - - - `) - ).toMatchInlineSnapshot(` - export const basic = () => - /*#__PURE__*/ _jsx(Button, { - children: 'Basic', - }); - basic.storyName = 'Basic'; - basic.parameters = { - storySource: { - source: '', - }, - }; - const componentMeta = { - component: Button, - tags: ['stories-mdx'], - includeStories: ['basic'], - }; - componentMeta.parameters = componentMeta.parameters || {}; - componentMeta.parameters.docs = { - ...(componentMeta.parameters.docs || {}), - page: MDXContent, - }; - export default componentMeta; - `); - }); - - it('default-render.mdx', () => { - expect( - clean(dedent` - import { Button } from '@storybook/react/demo'; - import { Story, Meta } from '@storybook/addon-docs'; - - - - - `) - ).toMatchInlineSnapshot(` - export const basic = {}; - basic.storyName = 'Basic'; - basic.parameters = { - storySource: { - source: '{}', - }, - }; - const componentMeta = { - title: 'Button', - component: Button, - tags: ['stories-mdx'], - includeStories: ['basic'], - }; - componentMeta.parameters = componentMeta.parameters || {}; - componentMeta.parameters.docs = { - ...(componentMeta.parameters.docs || {}), - page: MDXContent, - }; - export default componentMeta; - `); - }); - - it('component-render.mdx', () => { - expect( - clean(dedent` - import { Button } from '@storybook/react/demo'; - import { Story, Meta } from '@storybook/addon-docs'; - - +
+ +
Open source software maintained by{' '} Chromatic and the{' '} From 79654375d4501805c4585a955fbab6426931a98b Mon Sep 17 00:00:00 2001 From: Charles de Dreuille Date: Mon, 1 Jan 2024 09:23:41 +0100 Subject: [PATCH 068/136] Fix alignment in tabs header --- code/ui/manager/src/settings/index.tsx | 16 +++++++++++++--- 1 file changed, 13 insertions(+), 3 deletions(-) diff --git a/code/ui/manager/src/settings/index.tsx b/code/ui/manager/src/settings/index.tsx index eec87d2ae18..0a370874436 100644 --- a/code/ui/manager/src/settings/index.tsx +++ b/code/ui/manager/src/settings/index.tsx @@ -1,5 +1,5 @@ import { useStorybookApi, useStorybookState, types } from '@storybook/manager-api'; -import { IconButton, FlexBar, TabBar, TabButton, ScrollArea } from '@storybook/components'; +import { IconButton, TabBar, TabButton, ScrollArea } from '@storybook/components'; import { Location, Route } from '@storybook/router'; import { styled } from '@storybook/theming'; import { global } from '@storybook/global'; @@ -15,6 +15,16 @@ import { matchesModifiers, matchesKeyCode } from '../keybinding'; const { document } = global; +const Header = styled.div(({ theme }) => ({ + display: 'flex', + justifyContent: 'space-between', + alignItems: 'center', + height: 40, + boxShadow: `${theme.appBorderColor} 0 -1px 0 0 inset`, + background: theme.barBg, + paddingRight: 8, +})); + const TabBarButton = React.memo(function TabBarButton({ changeTab, id, @@ -70,7 +80,7 @@ const Pages: FC<{ return ( - +
{enableWhatsNew && ( @@ -87,7 +97,7 @@ const Pages: FC<{ > - +
From 26d83b3663755e37baf3f3f35d9c10257e9c4b25 Mon Sep 17 00:00:00 2001 From: Charles de Dreuille Date: Mon, 1 Jan 2024 09:30:50 +0100 Subject: [PATCH 069/136] Fix buttons in about footer --- code/ui/.storybook/main.ts | 1 + code/ui/manager/src/settings/whats_new.tsx | 46 +++++++--------------- 2 files changed, 15 insertions(+), 32 deletions(-) diff --git a/code/ui/.storybook/main.ts b/code/ui/.storybook/main.ts index 4800dda1e18..aab89b2a2c0 100644 --- a/code/ui/.storybook/main.ts +++ b/code/ui/.storybook/main.ts @@ -65,6 +65,7 @@ const config: StorybookConfig = { }, core: { disableTelemetry: true, + disableWhatsNewNotifications: false, }, viteFinal: (viteConfig, { configType }) => mergeConfig(viteConfig, { diff --git a/code/ui/manager/src/settings/whats_new.tsx b/code/ui/manager/src/settings/whats_new.tsx index ee6aba4e6c5..4b69aaa56ee 100644 --- a/code/ui/manager/src/settings/whats_new.tsx +++ b/code/ui/manager/src/settings/whats_new.tsx @@ -1,7 +1,7 @@ import type { ComponentProps, FC } from 'react'; import React, { Fragment, useEffect, useState } from 'react'; import { styled, useTheme } from '@storybook/theming'; -import { Button, IconButton, Loader } from '@storybook/components'; +import { Button, Loader } from '@storybook/components'; import { useStorybookApi, useStorybookState } from '@storybook/manager-api'; import { global } from '@storybook/global'; import { EyeCloseIcon, EyeIcon, HeartIcon, AlertIcon as AlertIconSvg } from '@storybook/icons'; @@ -42,22 +42,6 @@ const Container = styled.div(({ theme }) => ({ justifyContent: 'space-between', })); -const ToggleNotificationButton = styled(IconButton)(({ theme }) => ({ - fontWeight: theme.typography.weight.regular, - color: theme.color.mediumdark, - margin: 0, -})); - -const CopyButton = styled(Button)(({ theme }) => ({ - '&&': { - fontSize: `13px`, - color: theme.color.defaultText, - margin: 0, - padding: 0, - borderRadius: 0, - }, -})); - export const WhatsNewFooter = ({ isNotificationsEnabled, onToggleNotifications, @@ -80,23 +64,21 @@ export const WhatsNewFooter = ({
Share this with your team.
- +
- - {isNotificationsEnabled ? ( - <> - -  Hide notifications - - ) : ( - <> - -  Show notifications - - )} - + {isNotificationsEnabled ? ( + + ) : ( + + )} ); }; From e723495665d3b55c77f40ad34845ea5db8abf3a6 Mon Sep 17 00:00:00 2001 From: Charles de Dreuille Date: Mon, 1 Jan 2024 09:38:44 +0100 Subject: [PATCH 070/136] Update main.ts --- code/ui/.storybook/main.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/code/ui/.storybook/main.ts b/code/ui/.storybook/main.ts index aab89b2a2c0..4800dda1e18 100644 --- a/code/ui/.storybook/main.ts +++ b/code/ui/.storybook/main.ts @@ -65,7 +65,6 @@ const config: StorybookConfig = { }, core: { disableTelemetry: true, - disableWhatsNewNotifications: false, }, viteFinal: (viteConfig, { configType }) => mergeConfig(viteConfig, { From b57c765b28323cdd277599b7c19b6722606d4e8c Mon Sep 17 00:00:00 2001 From: storybook-bot <32066757+storybook-bot@users.noreply.github.com> Date: Mon, 1 Jan 2024 16:13:52 +0000 Subject: [PATCH 071/136] Update CHANGELOG.md for v7.6.7 [skip ci] --- CHANGELOG.md | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 96041db16ab..a2458954ccd 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,10 @@ +## 7.6.7 + +- Core: Skip no-framework error when ignorePreview=true - [#25286](https://github.com/storybookjs/storybook/pull/25286), thanks [@ndelangen](https://github.com/ndelangen)! +- Dependencies: Semver dependency fixes - [#25283](https://github.com/storybookjs/storybook/pull/25283), thanks [@ndelangen](https://github.com/ndelangen)! +- Vite: Fix pre-transform error in Vite 5 - [#25329](https://github.com/storybookjs/storybook/pull/25329), thanks [@yannbf](https://github.com/yannbf)! +- Vue3: Fix pnp by making compiler-core a dependency - [#25311](https://github.com/storybookjs/storybook/pull/25311), thanks [@shilman](https://github.com/shilman)! + ## 7.6.6 - SvelteKit: Support 2.0 modules with mocks - [#25244](https://github.com/storybookjs/storybook/pull/25244), thanks [@paoloricciuti](https://github.com/paoloricciuti)! From 1a0943bc8cb5996a83a02d90eef97321df89abf7 Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Tue, 2 Jan 2024 12:01:11 +0100 Subject: [PATCH 072/136] Make sure vue shows play function errors in interactions panel --- .../stories/unhandled-errors.stories.ts | 3 +++ code/renderers/vue3/src/render.ts | 19 ++++++++++++++++--- 2 files changed, 19 insertions(+), 3 deletions(-) diff --git a/code/addons/interactions/template/stories/unhandled-errors.stories.ts b/code/addons/interactions/template/stories/unhandled-errors.stories.ts index b752d92002d..fcaf0144ccd 100644 --- a/code/addons/interactions/template/stories/unhandled-errors.stories.ts +++ b/code/addons/interactions/template/stories/unhandled-errors.stories.ts @@ -6,6 +6,9 @@ export default { args: { label: 'Button', }, + argTypes: { + onClick: { type: 'function' }, + }, parameters: { actions: { argTypesRegex: '^on[A-Z].*' }, }, diff --git a/code/renderers/vue3/src/render.ts b/code/renderers/vue3/src/render.ts index cf27f67357c..4e03a2e835f 100644 --- a/code/renderers/vue3/src/render.ts +++ b/code/renderers/vue3/src/render.ts @@ -1,9 +1,10 @@ -/* eslint-disable local-rules/no-uncategorized-errors */ +/* eslint-disable local-rules/no-uncategorized-errors,no-underscore-dangle */ /* eslint-disable no-param-reassign */ import type { App } from 'vue'; -import { createApp, h, reactive, isVNode, isReactive } from 'vue'; +import { createApp, h, isReactive, isVNode, reactive } from 'vue'; import type { ArgsStoryFn, RenderContext } from '@storybook/types'; import type { Args, StoryContext } from '@storybook/csf'; +import type { PreviewWeb } from '@storybook/preview-api'; import type { StoryFnVueReturnType, StoryID, VueRenderer } from './types'; export const render: ArgsStoryFn = (props, context) => { @@ -79,7 +80,19 @@ export async function renderToCanvas( }, }); - vueApp.config.errorHandler = (e: unknown) => showException(e as Error); + vueApp.config.errorHandler = (e: unknown, instance, info) => { + const preview = (window as Record) + .__STORYBOOK_PREVIEW__ as PreviewWeb; + const isPlaying = preview?.storyRenders.some( + (renderer) => renderer.id === id && renderer.phase === 'playing' + ); + // Errors thrown during playing need be shown in the interactions panel. + if (isPlaying) { + throw e; + } else { + showException(e as Error); + } + }; await runSetupFunctions(vueApp, storyContext); vueApp.mount(canvasElement); From 2071832d8d47cc45fa852afc832ab1f783d1364d Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Tue, 2 Jan 2024 08:30:49 -0300 Subject: [PATCH 073/136] remove jsxOptions from addon-docs --- MIGRATION.md | 4 ++-- code/addons/docs/README.md | 3 --- code/addons/docs/src/compiler/index.ts | 4 ++-- code/addons/docs/src/compiler/types.ts | 12 ------------ code/addons/docs/src/preset.ts | 3 +-- docs/essentials/index.md | 1 - ...ook-main-full-individual-essentials-config.js.mdx | 1 - ...ook-main-full-individual-essentials-config.ts.mdx | 1 - 8 files changed, 5 insertions(+), 24 deletions(-) diff --git a/MIGRATION.md b/MIGRATION.md index fad5e550dee..c78ed3febee 100644 --- a/MIGRATION.md +++ b/MIGRATION.md @@ -392,10 +392,10 @@ Storybook now uses MDX3 under the hood. This change contains many improvements a #### Dropping support for *.stories.mdx (CSF in MDX) format -_Has automigration_ - In Storybook 7, we deprecated the ability of using MDX both for documentation and for defining stories in the same .stories.mdx file. It is now removed, and Storybook won't support .stories.mdx files anymore. We provide migration scripts to help you onto the new format. +Alongside with this change, the `jsxOptions` configuration was removed as it is not used anymore. + [More info here](https://storybook.js.org/docs/writing-docs/mdx#automigration). #### Dropping support for id, name and story in Story block diff --git a/code/addons/docs/README.md b/code/addons/docs/README.md index 379b23f2d8a..9495cf2c150 100644 --- a/code/addons/docs/README.md +++ b/code/addons/docs/README.md @@ -129,7 +129,6 @@ export default { { name: '@storybook/addon-docs', options: { - jsxOptions: {}, csfPluginOptions: null, mdxPluginOptions: {}, }, @@ -138,8 +137,6 @@ export default { }; ``` -`jsxOptions` are options that will be passed to `@babel/preset-react` for `.md` and `.mdx` files. - `csfPluginOptions` is an object for configuring `@storybook/csf-plugin`. When set to `null` it tells docs not to run the `csf-plugin` at all, which can be used as an optimization, or if you're already using `csf-plugin` in your `main.js`. > With the release of version 7.0, it is no longer possible to import `.md` files directly into Storybook using the `transcludeMarkdown` [option](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#importing-plain-markdown-files-with-transcludemarkdown-has-changed). Instead, we recommend using the [`Markdown`](https://storybook.js.org/docs/react/api/doc-block-markdown) Doc Block for importing Markdown files into your Storybook documentation. diff --git a/code/addons/docs/src/compiler/index.ts b/code/addons/docs/src/compiler/index.ts index f71159e5081..79af50d3fb1 100644 --- a/code/addons/docs/src/compiler/index.ts +++ b/code/addons/docs/src/compiler/index.ts @@ -1,8 +1,8 @@ import { compile as mdxCompile, compileSync as mdxCompileSync } from '@mdx-js/mdx'; -import type { CompileOptions, MdxCompileOptions, JSXOptions } from './types'; +import type { CompileOptions, MdxCompileOptions } from './types'; -export type { CompileOptions, MdxCompileOptions, JSXOptions }; +export type { CompileOptions, MdxCompileOptions }; export const compile = async (input: string, { mdxCompileOptions = {} }: CompileOptions = {}) => { const options = getCompilerOptions(mdxCompileOptions); diff --git a/code/addons/docs/src/compiler/types.ts b/code/addons/docs/src/compiler/types.ts index 65436823939..9ef068b0aee 100644 --- a/code/addons/docs/src/compiler/types.ts +++ b/code/addons/docs/src/compiler/types.ts @@ -1,19 +1,7 @@ import type { compile as mdxCompile } from '@mdx-js/mdx'; -import type { transformAsync } from '@babel/core'; - -export interface JSXOptions { - pragma?: string; - pragmaFrag?: string; - throwIfNamespace?: false; - runtime?: 'classic' | 'automatic'; - importSource?: string; -} export type MdxCompileOptions = Parameters[1]; -export type BabelOptions = Parameters[1]; export interface CompileOptions { - skipCsf?: boolean; mdxCompileOptions?: MdxCompileOptions; - jsxOptions?: JSXOptions; } diff --git a/code/addons/docs/src/preset.ts b/code/addons/docs/src/preset.ts index b6b0cc76775..8d623fe5b97 100644 --- a/code/addons/docs/src/preset.ts +++ b/code/addons/docs/src/preset.ts @@ -5,7 +5,7 @@ import remarkExternalLinks from 'remark-external-links'; import type { DocsOptions, Options, PresetProperty } from '@storybook/types'; import type { CsfPluginOptions } from '@storybook/csf-plugin'; import { logger } from '@storybook/node-logger'; -import type { CompileOptions, JSXOptions } from './compiler'; +import type { CompileOptions } from './compiler'; /** * Get the resolvedReact preset, which points either to @@ -31,7 +31,6 @@ async function webpack( webpackConfig: any = {}, options: Options & { csfPluginOptions: CsfPluginOptions | null; - jsxOptions?: JSXOptions; mdxPluginOptions?: CompileOptions; } /* & Parameters< typeof createCompiler diff --git a/docs/essentials/index.md b/docs/essentials/index.md index 4cddae864fe..2ef9254bfab 100644 --- a/docs/essentials/index.md +++ b/docs/essentials/index.md @@ -92,7 +92,6 @@ Below is an abridged configuration and table with all the available options for | `@storybook/addon-actions` | N/A | N/A | | `@storybook/addon-viewport` | N/A | N/A | | `@storybook/addon-docs` | `csfPluginOptions` | Provides additional configuration for Storybook's CSF plugin. Can be disabled with `null`. | -| | `jsxOptions` | Extends the default Babel configuration options for processing Markdown and MDX files. | | | `mdxPluginOptions` | Provides additional configuration options and plugin configuration for [MDX documentation](../writing-docs/mdx.md#lack-of-github-flavored-markdown-gfm). | | `@storybook/addon-controls` | N/A | N/A | | `@storybook/addon-backgrounds` | N/A | N/A | diff --git a/docs/snippets/common/storybook-main-full-individual-essentials-config.js.mdx b/docs/snippets/common/storybook-main-full-individual-essentials-config.js.mdx index 07391e43ad0..0c11bf383b6 100644 --- a/docs/snippets/common/storybook-main-full-individual-essentials-config.js.mdx +++ b/docs/snippets/common/storybook-main-full-individual-essentials-config.js.mdx @@ -13,7 +13,6 @@ export default { name: '@storybook/addon-docs', options: { csfPluginOptions: null, - jsxOptions: {}, mdxPluginOptions: { mdxCompileOptions: { remarkPlugins: [], diff --git a/docs/snippets/common/storybook-main-full-individual-essentials-config.ts.mdx b/docs/snippets/common/storybook-main-full-individual-essentials-config.ts.mdx index b2407522632..5ddd5f067d6 100644 --- a/docs/snippets/common/storybook-main-full-individual-essentials-config.ts.mdx +++ b/docs/snippets/common/storybook-main-full-individual-essentials-config.ts.mdx @@ -15,7 +15,6 @@ const config: StorybookConfig = { name: '@storybook/addon-docs', options: { csfPluginOptions: null, - jsxOptions: {}, mdxPluginOptions: { mdxCompileOptions: { remarkPlugins: [], From ca6f060fbc7c5ba8252cc653e9146671bfedb042 Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Tue, 2 Jan 2024 08:31:12 -0300 Subject: [PATCH 074/136] refactor mdx-loader logic --- code/addons/docs/src/mdx-loader.ts | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) diff --git a/code/addons/docs/src/mdx-loader.ts b/code/addons/docs/src/mdx-loader.ts index e075ab72683..639fb0c70f0 100644 --- a/code/addons/docs/src/mdx-loader.ts +++ b/code/addons/docs/src/mdx-loader.ts @@ -6,7 +6,6 @@ export type MdxCompileOptions = Parameters[1]; export type BabelOptions = Parameters[1]; export interface CompileOptions { - skipCsf?: boolean; mdxCompileOptions?: MdxCompileOptions; } @@ -30,16 +29,14 @@ async function loader(this: LoaderContext, content: string): Promise { const callback = this.async(); const options = { ...this.getOptions(), filepath: this.resourcePath }; - let result: string; try { - result = await compile(content, options); + const result = await compile(content, options); + const code = `${DEFAULT_RENDERER}\n${result}`; + return callback(null, code); } catch (err: any) { console.error('Error loading:', this.resourcePath); return callback(err); } - - const code = `${DEFAULT_RENDERER}\n${result}`; - return callback(null, code); } export default loader; From 7c4e18ec1cbc2b8bb58e93733dd42dc95eedcc92 Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Tue, 2 Jan 2024 09:43:32 -0300 Subject: [PATCH 075/136] upgrade docs-mdx --- code/lib/core-server/package.json | 2 +- code/yarn.lock | 10 +++++----- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/code/lib/core-server/package.json b/code/lib/core-server/package.json index da55fcfa5e1..c7a08287b5d 100644 --- a/code/lib/core-server/package.json +++ b/code/lib/core-server/package.json @@ -68,7 +68,7 @@ "@storybook/core-events": "workspace:*", "@storybook/csf": "^0.1.2", "@storybook/csf-tools": "workspace:*", - "@storybook/docs-mdx": "0.1.1-next.3", + "@storybook/docs-mdx": "3.0.0", "@storybook/global": "^5.0.0", "@storybook/manager": "workspace:*", "@storybook/node-logger": "workspace:*", diff --git a/code/yarn.lock b/code/yarn.lock index e09c14b5bf6..e89fe99af27 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -5491,7 +5491,7 @@ __metadata: "@storybook/core-events": "workspace:*" "@storybook/csf": "npm:^0.1.2" "@storybook/csf-tools": "workspace:*" - "@storybook/docs-mdx": "npm:0.1.1-next.3" + "@storybook/docs-mdx": "npm:3.0.0" "@storybook/global": "npm:^5.0.0" "@storybook/manager": "workspace:*" "@storybook/node-logger": "workspace:*" @@ -5624,10 +5624,10 @@ __metadata: languageName: node linkType: hard -"@storybook/docs-mdx@npm:0.1.1-next.3": - version: 0.1.1-next.3 - resolution: "@storybook/docs-mdx@npm:0.1.1-next.3" - checksum: 39a0652cee247fe04e52681dd60ba00dee8a39b1f2919566c9fdaf916e493e5ba892ed6c73386b395909b38ea7ad67f0c4150965c4745ebcabada8a9e2b35ce5 +"@storybook/docs-mdx@npm:3.0.0": + version: 3.0.0 + resolution: "@storybook/docs-mdx@npm:3.0.0" + checksum: 4f4242fc05b57e8dc239204c71fd0d1481c9abbf20d12dd0f3dace74f77a7ff7cbe0bd07d7d785873b45747be64cad273423d3dc0cf89b52e9f117592a4b054f languageName: node linkType: hard From 281856e45c29897b94958fdc5e0c20faa1978d76 Mon Sep 17 00:00:00 2001 From: Charles de Dreuille Date: Tue, 2 Jan 2024 15:11:35 +0100 Subject: [PATCH 076/136] Fix menu icon styles --- .../src/components/sidebar/Menu.stories.tsx | 11 +- .../manager/src/components/sidebar/Menu.tsx | 112 ++++++------------ 2 files changed, 43 insertions(+), 80 deletions(-) diff --git a/code/ui/manager/src/components/sidebar/Menu.stories.tsx b/code/ui/manager/src/components/sidebar/Menu.stories.tsx index e04811e76bf..ebc234f75ef 100644 --- a/code/ui/manager/src/components/sidebar/Menu.stories.tsx +++ b/code/ui/manager/src/components/sidebar/Menu.stories.tsx @@ -8,7 +8,7 @@ import { styled } from '@storybook/theming'; import { screen, userEvent, within } from '@storybook/testing-library'; import type { State } from '@storybook/manager-api'; import { LinkIcon } from '@storybook/icons'; -import { SidebarMenu, ToolbarMenu } from './Menu'; +import { SidebarMenu } from './Menu'; import { useMenu } from '../../container/Menu'; import { LayoutProvider } from '../layout/LayoutProvider'; @@ -34,11 +34,10 @@ export const Items: Story = { }; export const Real: Story = { - render: () => , -}; - -export const Toolbar = { - render: () => , + args: { + isHighlighted: true, + }, + render: (args) => , }; const DoubleThemeRenderingHack = styled.div({ diff --git a/code/ui/manager/src/components/sidebar/Menu.tsx b/code/ui/manager/src/components/sidebar/Menu.tsx index 95290acbc09..1765c6e13a6 100644 --- a/code/ui/manager/src/components/sidebar/Menu.tsx +++ b/code/ui/manager/src/components/sidebar/Menu.tsx @@ -22,48 +22,42 @@ const Icon = styled(Icons)(sharedStyles, ({ theme }) => ({ color: theme.color.secondary, })); -export const SidebarIconButton: FC< - ComponentProps & { highlighted: boolean; active: boolean } -> = styled(IconButton)< - ComponentProps & { - highlighted: boolean; - active: boolean; - } ->(({ highlighted, active, theme }) => ({ - position: 'relative', - overflow: 'visible', - color: theme.textMutedColor, - marginTop: 0, - zIndex: 1, - - ...(highlighted && { - '&:before, &:after': { - content: '""', - position: 'absolute', - top: 6, - right: 6, - width: 5, - height: 5, - zIndex: 2, - borderRadius: '50%', - background: theme.background.app, - border: `1px solid ${theme.background.app}`, - boxShadow: `0 0 0 2px ${theme.background.app}`, - }, - '&:after': { - background: theme.color.positive, - border: `1px solid rgba(0, 0, 0, 0.1)`, - boxShadow: `0 0 0 2px ${theme.background.app}`, - }, - - '&:hover:after, &:focus-visible:after': { - boxShadow: `0 0 0 2px ${transparentize(0.88, theme.color.secondary)}`, - }, - }), - ...(active && { - color: theme.color.secondary, - }), -})); +export const SidebarIconButton: FC & { highlighted: boolean }> = + styled(IconButton)< + ComponentProps & { + highlighted: boolean; + } + >(({ highlighted, theme }) => ({ + position: 'relative', + overflow: 'visible', + marginTop: 0, + zIndex: 1, + + ...(highlighted && { + '&:before, &:after': { + content: '""', + position: 'absolute', + top: 6, + right: 6, + width: 5, + height: 5, + zIndex: 2, + borderRadius: '50%', + background: theme.background.app, + border: `1px solid ${theme.background.app}`, + boxShadow: `0 0 0 2px ${theme.background.app}`, + }, + '&:after': { + background: theme.color.positive, + border: `1px solid rgba(0, 0, 0, 0.1)`, + boxShadow: `0 0 0 2px ${theme.background.app}`, + }, + + '&:hover:after, &:focus-visible:after': { + boxShadow: `0 0 0 2px ${transparentize(0.88, theme.color.secondary)}`, + }, + }), + })); const MenuButtonGroup = styled.div({ display: 'flex', @@ -134,13 +128,13 @@ export const SidebarMenu: FC = ({ menu, isHighlighted, onClick > - setMobileMenuOpen(false)} > - + ); } @@ -163,33 +157,3 @@ export const SidebarMenu: FC = ({ menu, isHighlighted, onClick ); }; - -export const ToolbarMenu: FC<{ - menu: MenuList; -}> = ({ menu }) => { - return ( - } - > - - - - - ); -}; - -// We should not have to reset the margin-top here -// TODO: remove this once we have a the new IconButton component -const CloseIconButton = styled(IconButton)({ - marginTop: 0, -}); From 578adba0415b6216715ec053beefcd42b530babb Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Tue, 2 Jan 2024 15:13:40 +0100 Subject: [PATCH 077/136] Fix vue renderer in build --- code/renderers/vue3/src/render.ts | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/code/renderers/vue3/src/render.ts b/code/renderers/vue3/src/render.ts index 4e03a2e835f..c7051ac847f 100644 --- a/code/renderers/vue3/src/render.ts +++ b/code/renderers/vue3/src/render.ts @@ -88,7 +88,10 @@ export async function renderToCanvas( ); // Errors thrown during playing need be shown in the interactions panel. if (isPlaying) { - throw e; + // Make sure that Vue won't swallow this error, by stacking it as a different event. + setTimeout(() => { + throw e; + }, 0); } else { showException(e as Error); } From b892c7ee506c105e5af7d8a751c62c5e8567a4f5 Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Tue, 2 Jan 2024 11:30:56 -0300 Subject: [PATCH 078/136] remove unused import --- code/ui/manager/src/components/sidebar/Menu.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/ui/manager/src/components/sidebar/Menu.tsx b/code/ui/manager/src/components/sidebar/Menu.tsx index 1765c6e13a6..9dadfa2b156 100644 --- a/code/ui/manager/src/components/sidebar/Menu.tsx +++ b/code/ui/manager/src/components/sidebar/Menu.tsx @@ -5,7 +5,7 @@ import { styled } from '@storybook/theming'; import { transparentize } from 'polished'; import type { Button, TooltipLinkListLink } from '@storybook/components'; import { WithTooltip, TooltipLinkList, Icons, IconButton } from '@storybook/components'; -import { CloseIcon, CogIcon, MenuIcon } from '@storybook/icons'; +import { CloseIcon, CogIcon } from '@storybook/icons'; import { useLayout } from '../layout/LayoutProvider'; export type MenuList = ComponentProps['links']; From 7ed846e33cc7dc53f040242db90c6becac6c80e5 Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Tue, 2 Jan 2024 15:49:54 +0100 Subject: [PATCH 079/136] Ignore angular, as they have no implicit action errors --- code/e2e-tests/addon-interactions.spec.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/e2e-tests/addon-interactions.spec.ts b/code/e2e-tests/addon-interactions.spec.ts index bdb3d27d510..1aad004848b 100644 --- a/code/e2e-tests/addon-interactions.spec.ts +++ b/code/e2e-tests/addon-interactions.spec.ts @@ -16,7 +16,7 @@ test.describe('addon-interactions', () => { // templateName is e.g. 'vue-cli/default-js' test.skip( // eslint-disable-next-line jest/valid-title - /^(lit)/i.test(`${templateName}`), + /^(lit|angular)/i.test(`${templateName}`), `Skipping ${templateName}, which does not support addon-interactions` ); From bdf758d3962652181e2f0bad7b1f0ec75086b318 Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Tue, 2 Jan 2024 16:24:19 +0100 Subject: [PATCH 080/136] Ignore angular, as they have no implicit action errors --- code/e2e-tests/addon-interactions.spec.ts | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/code/e2e-tests/addon-interactions.spec.ts b/code/e2e-tests/addon-interactions.spec.ts index 1aad004848b..5169f3fe733 100644 --- a/code/e2e-tests/addon-interactions.spec.ts +++ b/code/e2e-tests/addon-interactions.spec.ts @@ -1,4 +1,4 @@ -/* eslint-disable jest/no-disabled-tests */ +/* eslint-disable jest/no-disabled-tests,jest/valid-title */ import { test, expect } from '@playwright/test'; import process from 'process'; import { SbPage } from './util'; @@ -15,8 +15,7 @@ test.describe('addon-interactions', () => { test('should have interactions', async ({ page }) => { // templateName is e.g. 'vue-cli/default-js' test.skip( - // eslint-disable-next-line jest/valid-title - /^(lit|angular)/i.test(`${templateName}`), + /^(lit)/i.test(`${templateName}`), `Skipping ${templateName}, which does not support addon-interactions` ); @@ -44,7 +43,6 @@ test.describe('addon-interactions', () => { test('should step through interactions', async ({ page }) => { // templateName is e.g. 'vue-cli/default-js' test.skip( - // eslint-disable-next-line jest/valid-title /^(lit)/i.test(`${templateName}`), `Skipping ${templateName}, which does not support addon-interactions` ); @@ -119,10 +117,11 @@ test.describe('addon-interactions', () => { test('should show unhandled errors', async ({ page }) => { test.skip( - // eslint-disable-next-line jest/valid-title /^(lit)/i.test(`${templateName}`), `Skipping ${templateName}, which does not support addon-interactions` ); + // We trigger the implicit action error here, but angular works a bit different with implicit actions. + test.skip(/^(angular)/i.test(`${templateName}`)); const sbPage = new SbPage(page); From 18ce80bc8dc2db25715742362fd7fd5f7cfd62d2 Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Tue, 2 Jan 2024 16:52:01 +0100 Subject: [PATCH 081/136] Update code/renderers/vue3/template/cli/ts-3-8/Button.stories.ts Co-authored-by: Yann Braga --- code/renderers/vue3/template/cli/ts-3-8/Button.stories.ts | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/code/renderers/vue3/template/cli/ts-3-8/Button.stories.ts b/code/renderers/vue3/template/cli/ts-3-8/Button.stories.ts index 596cc38711c..872a7a03f8d 100644 --- a/code/renderers/vue3/template/cli/ts-3-8/Button.stories.ts +++ b/code/renderers/vue3/template/cli/ts-3-8/Button.stories.ts @@ -12,7 +12,10 @@ const meta: Meta = { size: { control: 'select', options: ['small', 'medium', 'large'] }, backgroundColor: { control: 'color' }, }, - args: { primary: false, onClick: fn() }, // default value + args: { + primary: false, + onClick: fn() + }, }; export default meta; From 3f1914622497e3a317f0c18617b7632006ed6453 Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Tue, 2 Jan 2024 16:52:22 +0100 Subject: [PATCH 082/136] Update scripts/release/__tests__/label-patches.test.ts Co-authored-by: Yann Braga --- scripts/release/__tests__/label-patches.test.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/scripts/release/__tests__/label-patches.test.ts b/scripts/release/__tests__/label-patches.test.ts index 12fdefa1ff9..29da21758c6 100644 --- a/scripts/release/__tests__/label-patches.test.ts +++ b/scripts/release/__tests__/label-patches.test.ts @@ -138,8 +138,7 @@ it('should label the PR associated with cherry picks in the current branch', asy .trim() : text ) - // eslint-disable-next-line @typescript-eslint/no-shadow - .filter((it) => it !== ''); + .filter((text) => text !== ''); expect(stderrCalls).toMatchInlineSnapshot(` [ From 748b7e4c591a9ec48018404e693abf323fa012a2 Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Tue, 2 Jan 2024 16:55:04 +0100 Subject: [PATCH 083/136] Roll back svelte change --- code/renderers/svelte/src/public-types.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/renderers/svelte/src/public-types.ts b/code/renderers/svelte/src/public-types.ts index 40f10aa534b..3e5abbb2867 100644 --- a/code/renderers/svelte/src/public-types.ts +++ b/code/renderers/svelte/src/public-types.ts @@ -41,7 +41,7 @@ export type StoryFn = TCmpOrArgs extends SvelteComponentTyped * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports) */ export type StoryObj = MetaOrCmpOrArgs extends { - render?: ArgsStoryFn; + render?: ArgsStoryFn; component?: ComponentType; args?: infer DefaultArgs; } From 2a4413bfc93c48d5ec0113b3244c5d9c00659dd3 Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Wed, 27 Dec 2023 14:14:22 -0300 Subject: [PATCH 084/136] CLI: Add Storyshots migration notice --- README.md | 6 +- code/addons/docs/README.md | 14 ----- code/lib/cli/src/automigrate/fixes/index.ts | 2 + .../fixes/storyshots-migration.test.ts | 60 +++++++++++++++++++ .../automigrate/fixes/storyshots-migration.ts | 30 ++++++++++ docs/configure/frameworks-feature-support.md | 2 +- docs/writing-tests/snapshot-testing.md | 2 +- 7 files changed, 98 insertions(+), 18 deletions(-) create mode 100644 code/lib/cli/src/automigrate/fixes/storyshots-migration.test.ts create mode 100644 code/lib/cli/src/automigrate/fixes/storyshots-migration.ts diff --git a/README.md b/README.md index 7c174bdcc25..263ee639e99 100644 --- a/README.md +++ b/README.md @@ -136,7 +136,7 @@ For additional help, share your issue in [the repo's GitHub Discussions](https:/ See [Addon / Framework Support Table](https://storybook.js.org/docs/react/api/frameworks-feature-support) -### Deprecated Addons +### Deprecated/Removed Addons | Addons | | | -------------------------------------------------------------------------------------------- | ---------------------------------------------------------- | @@ -147,12 +147,14 @@ See [Addon / Framework Support Table](https://storybook.js.org/docs/react/api/fr | [options](https://www.npmjs.com/package/@storybook/addon-options) | Customize the Storybook UI in code | | [storyshots](https://github.com/storybookjs/storybook/tree/main/code/addons/storyshots-core) | Snapshot testing for components in Storybook | -To continue improving your experience, we have to eventually deprecate certain addons in favor of new and better tools. +To continue improving your experience, we have to eventually deprecate or remove certain addons in favor of new and better tools. If you're using info/notes, we highly recommend you migrate to [docs](code/addons/docs/) instead, and [here is a guide](code/addons/docs/docs/recipes.md#migrating-from-notesinfo-addons) to help you. If you're using contexts, we highly recommend you migrate to [toolbars](https://github.com/storybookjs/storybook/tree/next/code/addons/toolbars) and [here is a guide](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-addon-contexts) to help you. +If you're using addon-storyshots, we highly recommend you migrate to the Storybook [test-runner](https://github.com/storybookjs/test-runner) and [here is a guide](https://storybook.js.org/docs/writing-tests/storyshots-migration-guide) to help you. + ## Badges & Presentation materials We have a badge! Link it to your live Storybook example. diff --git a/code/addons/docs/README.md b/code/addons/docs/README.md index 9a9a3debad2..379b23f2d8a 100644 --- a/code/addons/docs/README.md +++ b/code/addons/docs/README.md @@ -110,20 +110,6 @@ export default { }; ``` -If using in conjunction with the [storyshots add-on](https://github.com/storybookjs/storybook/blob/next/code/addons/storyshots-core/README.md), you will need to -configure Jest to transform MDX stories into something Storyshots can understand: - -Add the following to your Jest configuration: - -```json -{ - "transform": { - "^.+\\.[tj]sx?$": "babel-jest", - "^.+\\.mdx$": "@storybook/addon-docs/jest-transform-mdx" - } -} -``` - ### Be sure to check framework specific installation needs - [React](https://github.com/storybookjs/storybook/tree/next/code/addons/docs/react) (covered here) diff --git a/code/lib/cli/src/automigrate/fixes/index.ts b/code/lib/cli/src/automigrate/fixes/index.ts index bd33074805d..0c6202f2426 100644 --- a/code/lib/cli/src/automigrate/fixes/index.ts +++ b/code/lib/cli/src/automigrate/fixes/index.ts @@ -19,6 +19,7 @@ import { incompatibleAddons } from './incompatible-addons'; import { angularBuildersMultiproject } from './angular-builders-multiproject'; import { wrapRequire } from './wrap-require'; import { reactDocgen } from './react-docgen'; +import { storyshotsMigration } from './storyshots-migration'; export * from '../types'; @@ -42,6 +43,7 @@ export const allFixes: Fix[] = [ angularBuilders, wrapRequire, reactDocgen, + storyshotsMigration, ]; export const initFixes: Fix[] = [missingBabelRc, eslintPlugin]; diff --git a/code/lib/cli/src/automigrate/fixes/storyshots-migration.test.ts b/code/lib/cli/src/automigrate/fixes/storyshots-migration.test.ts new file mode 100644 index 00000000000..4a7ccc9d335 --- /dev/null +++ b/code/lib/cli/src/automigrate/fixes/storyshots-migration.test.ts @@ -0,0 +1,60 @@ +import { describe, afterEach, it, expect, vi } from 'vitest'; + +import type { StorybookConfig } from '@storybook/types'; +import { storyshotsMigration } from './storyshots-migration'; +import type { JsPackageManager } from '../../js-package-manager'; + +const check = async ({ + packageManager, + main: mainConfig = {}, + storybookVersion = '8.0.0', +}: { + packageManager: Partial; + main?: Partial & Record; + storybookVersion?: string; +}) => { + return storyshotsMigration.check({ + packageManager: packageManager as any, + configDir: '', + mainConfig: mainConfig as any, + storybookVersion, + }); +}; + +describe('storyshots-migration fix', () => { + afterEach(() => { + vi.restoreAllMocks(); + }); + + it('should detect storyshots registered in main.js', async () => { + await expect( + check({ + packageManager: { + getAllDependencies: async () => ({}), + }, + main: { addons: ['@storybook/addon-storyshots'] }, + }) + ).resolves.toBeTruthy(); + }); + + it('should detect storyshots in package.json', async () => { + await expect( + check({ + packageManager: { + getAllDependencies: async () => ({ '@storybook/addon-storyshots': '7.0.0' }), + }, + }) + ).resolves.toBeTruthy(); + }); + + it('no-op when storyshots is not present', async () => { + await expect( + check({ + packageManager: { + getAllDependencies: async () => ({}), + }, + main: { addons: ['@storybook/essentials'] }, + }) + ).resolves.toBeNull(); + }); +}); diff --git a/code/lib/cli/src/automigrate/fixes/storyshots-migration.ts b/code/lib/cli/src/automigrate/fixes/storyshots-migration.ts new file mode 100644 index 00000000000..6d047f88449 --- /dev/null +++ b/code/lib/cli/src/automigrate/fixes/storyshots-migration.ts @@ -0,0 +1,30 @@ +import chalk from 'chalk'; +import dedent from 'ts-dedent'; +import type { Fix } from '../types'; + +export const storyshotsMigration: Fix = { + id: 'storyshots-migration', + promptOnly: true, + + async check({ mainConfig, packageManager }) { + const allDeps = await packageManager.getAllDependencies(); + const hasStoryshots = + allDeps['@storybook/addon-storyshots'] || + mainConfig.addons?.find((addon) => { + const addonName = typeof addon === 'string' ? addon : addon.name; + return addonName.includes('@storybook/addon-storyshots'); + }); + + return hasStoryshots ?? null; + }, + prompt() { + return dedent` + ${chalk.bold( + 'Attention' + )}: Storyshots is now officially deprecated, is no longer being maintained, and was removed in Storybook 8. + + We recommend following the migration guide we've prepared to help you during this transition period: + ${chalk.yellow('https://storybook.js.org/docs/writing-tests/storyshots-migration-guide')} + `; + }, +}; diff --git a/docs/configure/frameworks-feature-support.md b/docs/configure/frameworks-feature-support.md index 306ee9e9416..498d984cabe 100644 --- a/docs/configure/frameworks-feature-support.md +++ b/docs/configure/frameworks-feature-support.md @@ -113,5 +113,5 @@ To align the Storybook ecosystem with the current state of frontend development, | Feature | Status | | -------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | [Knobs](https://github.com/storybookjs/addon-knobs) | The Knobs addon was officially deprecated with the release of Storybook 6.3 and is no longer actively maintained. We recommend using the [controls](../essentials/controls.md) instead. | -| [Storyshots](../writing-tests/snapshot-testing.md) | The Storyshots addon was officially deprecated with the release of Storybook 7.6 and is no longer actively maintained. See the [migration guide](../writing-tests/storyshots-migration-guide.md) for the available alternatives. | +| [Storyshots](../writing-tests/snapshot-testing.md) | The Storyshots addon was officially deprecated with the release of Storybook 7.6, is no longer actively maintained and was removed in Storybook 8. See the [migration guide](../writing-tests/storyshots-migration-guide.md) for the available alternatives. | | [`StoriesOf`](https://github.com/storybookjs/storybook/blob/next/code/lib/preview-api/docs/storiesOf.md) | The `storiesOf` API was officially deprecated with the release of Storybook 7.5 and is no longer actively maintained. We recommend using the [CSF API](../api/csf.md) instead for writing stories.
See the [migration guide](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#storystorev6-and-storiesof-is-deprecated) for more information. | diff --git a/docs/writing-tests/snapshot-testing.md b/docs/writing-tests/snapshot-testing.md index 8570dd37617..438258b36ad 100644 --- a/docs/writing-tests/snapshot-testing.md +++ b/docs/writing-tests/snapshot-testing.md @@ -16,7 +16,7 @@ The Storyshots addon was the original testing solution for Storybook, offering a -The Storyshots addon has been deprecated and will be removed in a future release of Storybook. See the [migration guide](./storyshots-migration-guide.md) for more information. +The Storyshots addon was deprecated and has been removed in Storybook 8. See the [migration guide](./storyshots-migration-guide.md) for more information. From f347c154214ac1e0c6ef024dc749e304db481579 Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Wed, 27 Dec 2023 16:00:16 -0300 Subject: [PATCH 085/136] add test timeout --- .../src/modules/preview-web/PreviewWeb.integration.test.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/code/lib/preview-api/src/modules/preview-web/PreviewWeb.integration.test.ts b/code/lib/preview-api/src/modules/preview-web/PreviewWeb.integration.test.ts index b3d7aa04bde..494ceec4c7a 100644 --- a/code/lib/preview-api/src/modules/preview-web/PreviewWeb.integration.test.ts +++ b/code/lib/preview-api/src/modules/preview-web/PreviewWeb.integration.test.ts @@ -111,7 +111,9 @@ describe('PreviewWeb', () => { await waitForRender(); expect(docsRoot.outerHTML).toMatchInlineSnapshot('"
INSIDE
"'); - }); + // Extended timeout to try and avoid + // Error: Event was not emitted in time: storyRendered,docsRendered,storyThrewException,storyErrored,storyMissing + }, 10_000); // TODO @tmeasday please help fixing this test it.skip('sends docs rendering exceptions to showException', async () => { From ea26963386635645c765654ab0b26b96dfaf281a Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Tue, 2 Jan 2024 09:59:20 -0300 Subject: [PATCH 086/136] add storyshots migration guide to migration notes --- MIGRATION.md | 20 +++++++++++--------- 1 file changed, 11 insertions(+), 9 deletions(-) diff --git a/MIGRATION.md b/MIGRATION.md index c69c72a1fc6..f5e956711c6 100644 --- a/MIGRATION.md +++ b/MIGRATION.md @@ -407,22 +407,24 @@ Addon authors are advised to upgrade to react v18. #### Storyshots has been removed -Storyshots was an addon for storybook which allowed users to turn their stories into automated snapshot-tests. +Storyshots was an addon for Storybook which allowed users to turn their stories into automated snapshot tests. -Every story would automatically be taken into account and created a snapshot-file for. +Every story would automatically be taken into account and create a snapshot file. -Snapshot-testing has since fallen out of favor and is no longer recommended. +Snapshot testing has since fallen out of favor and is no longer recommended. -In addition to it's limited use, and high chance of false-positives, storyshots ran code developed to run in the browser in NodeJS via JSDOM. -JSDOM has limitations and is not a perfect emulation of the browser environment; therefore storyshots was always a pain to setup and maintain. +In addition to its limited use, and high chance of false positives, Storyshots ran code developed to run in the browser in NodeJS via JSDOM. +JSDOM has limitations and is not a perfect emulation of the browser environment; therefore, Storyshots was always a pain to set up and maintain. -The storybook team has build the test-runner as a direct replacement, which utilizes playwright to connect to an actual browser where storybook runs the code. +The Storybook team has built the test-runner as a direct replacement, which utilizes Playwright to connect to an actual browser where Storybook runs the code. -In addition CSF has expanded to allow for play-function to be defined on stories, which allows for more complex testing scenarios, fully integrated within storybook itself (and supported by the test-runner, and not storyshots). +In addition, CSF has expanded to allow for play functions to be defined on stories, which allows for more complex testing scenarios, fully integrated within Storybook itself (and supported by the test-runner, and not Storyshots). -Finally `storyStoreV7: true` (the default and only options in storybook 8), was not supported by storyshots. +Finally, storyStoreV7: true (the default and only option in Storybook 8), was not supported by Storyshots. -By removing storyshots, the storybook team was unblocked from moving (eventually) to an ESM-only storybook, which is a big step towards a more modern storybook. +By removing Storyshots, the Storybook team was unblocked from moving (eventually) to an ESM-only Storybook, which is a big step towards a more modern Storybook. + +Please check the [migration guide](https://storybook.js.org/docs/writing-tests/storyshots-migration-guide) that we prepared. #### UI layout state has changed shape From 6db8c1b3e42ac2b03e1b0b42de9a6bd4279acf56 Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Tue, 2 Jan 2024 14:55:34 -0300 Subject: [PATCH 087/136] add comment to deprecation notice --- .../src/components/Button/Button.tsx | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/code/ui/components/src/components/Button/Button.tsx b/code/ui/components/src/components/Button/Button.tsx index 5045f0621ed..37b64a78649 100644 --- a/code/ui/components/src/components/Button/Button.tsx +++ b/code/ui/components/src/components/Button/Button.tsx @@ -15,23 +15,23 @@ export interface ButtonProps extends ButtonHTMLAttributes { active?: boolean; animation?: 'none' | 'rotate360' | 'glow' | 'jiggle'; - /** @deprecated Use {@link asChild} instead */ + /** @deprecated Use {@link asChild} instead. This will be removed in Storybook 9.0 */ isLink?: boolean; - /** @deprecated Use {@link variant} instead */ + /** @deprecated Use {@link variant} instead. This will be removed in Storybook 9.0 */ primary?: boolean; - /** @deprecated Use {@link variant} instead */ + /** @deprecated Use {@link variant} instead. This will be removed in Storybook 9.0 */ secondary?: boolean; - /** @deprecated Use {@link variant} instead */ + /** @deprecated Use {@link variant} instead. This will be removed in Storybook 9.0 */ tertiary?: boolean; - /** @deprecated Use {@link variant} instead */ + /** @deprecated Use {@link variant} instead. This will be removed in Storybook 9.0 */ gray?: boolean; - /** @deprecated Use {@link variant} instead */ + /** @deprecated Use {@link variant} instead. This will be removed in Storybook 9.0 */ inForm?: boolean; - /** @deprecated Use {@link size} instead */ + /** @deprecated Use {@link size} instead. This will be removed in Storybook 9.0 */ small?: boolean; - /** @deprecated Use {@link variant} instead */ + /** @deprecated Use {@link variant} instead. This will be removed in Storybook 9.0 */ outline?: boolean; - /** @deprecated Add your icon as a child directly */ + /** @deprecated Add your icon as a child directly. This will be removed in Storybook 9.0 */ containsIcon?: boolean; } From 6bf2bce9d42c25d162042f684dc54fa467257eb0 Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Tue, 2 Jan 2024 17:20:55 -0300 Subject: [PATCH 088/136] Core: Remove unused warnOnLegacyHierarchySeparator type --- code/lib/core-server/src/presets/common-preset.ts | 1 - code/lib/core-server/src/utils/getStoryIndexGenerator.ts | 1 - code/lib/types/src/modules/core-common.ts | 6 ------ 3 files changed, 8 deletions(-) diff --git a/code/lib/core-server/src/presets/common-preset.ts b/code/lib/core-server/src/presets/common-preset.ts index 350872f3889..e1248f1f8dd 100644 --- a/code/lib/core-server/src/presets/common-preset.ts +++ b/code/lib/core-server/src/presets/common-preset.ts @@ -187,7 +187,6 @@ export const previewAnnotations = async (base: any, options: Options) => { export const features: PresetProperty<'features'> = async (existing) => ({ ...existing, - warnOnLegacyHierarchySeparator: true, buildStoriesJson: false, storyStoreV7: true, argTypeTargetsV7: true, diff --git a/code/lib/core-server/src/utils/getStoryIndexGenerator.ts b/code/lib/core-server/src/utils/getStoryIndexGenerator.ts index 74401020256..810b95244c7 100644 --- a/code/lib/core-server/src/utils/getStoryIndexGenerator.ts +++ b/code/lib/core-server/src/utils/getStoryIndexGenerator.ts @@ -10,7 +10,6 @@ export async function getStoryIndexGenerator( buildStoriesJson?: boolean; storyStoreV7?: boolean; argTypeTargetsV7?: boolean; - warnOnLegacyHierarchySeparator?: boolean; }, options: Options, serverChannel: ServerChannel diff --git a/code/lib/types/src/modules/core-common.ts b/code/lib/types/src/modules/core-common.ts index 8f848909d8e..1affaa649a9 100644 --- a/code/lib/types/src/modules/core-common.ts +++ b/code/lib/types/src/modules/core-common.ts @@ -375,12 +375,6 @@ export interface StorybookConfigRaw { */ argTypeTargetsV7?: boolean; - /** - * Warn when there is a pre-6.0 hierarchy separator ('.' / '|') in the story title. - * Will be removed in 7.0. - */ - warnOnLegacyHierarchySeparator?: boolean; - /** * Use legacy MDX1, to help smooth migration to 7.0 */ From fe7297ae396bf4a12cacaf124b5e36e22104f8ab Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Wed, 3 Jan 2024 12:37:43 +0800 Subject: [PATCH 089/136] Simplify viewports logic --- code/addons/viewport/src/Tool.tsx | 29 ++++++++++++++++------------- 1 file changed, 16 insertions(+), 13 deletions(-) diff --git a/code/addons/viewport/src/Tool.tsx b/code/addons/viewport/src/Tool.tsx index 229f5e21baf..8a2f97c6b1a 100644 --- a/code/addons/viewport/src/Tool.tsx +++ b/code/addons/viewport/src/Tool.tsx @@ -116,8 +116,8 @@ export const ViewportTool: FC = memo( const { viewports = MINIMAL_VIEWPORTS, - defaultOrientation = 'portrait', - defaultViewport = globals.viewport || responsiveViewport.id, + defaultOrientation, + defaultViewport, disable, } = useParameter(PARAM_KEY, {}); @@ -125,7 +125,7 @@ export const ViewportTool: FC = memo( const api = useStorybookApi(); const [isTooltipVisible, setIsTooltipVisible] = useState(false); - if (!list.find((i) => i.id === defaultViewport)) { + if (defaultViewport && !list.find((i) => i.id === defaultViewport)) { // eslint-disable-next-line no-console console.warn( `Cannot find "defaultViewport" of "${defaultViewport}" in addon-viewport configs, please check the "viewports" setting in the configuration.` @@ -134,18 +134,21 @@ export const ViewportTool: FC = memo( useEffect(() => { registerShortcuts(api, globals, updateGlobals, Object.keys(viewports)); - }, [viewports, globals.viewport]); + }, [viewports]); useEffect(() => { - updateGlobals({ - viewport: - defaultViewport || - (globals.viewport && viewports[globals.viewport] - ? globals.viewport - : responsiveViewport.id), - viewportRotated: defaultOrientation === 'landscape', - }); - }, [defaultOrientation, defaultViewport]); + const defaultRotated = defaultOrientation === 'landscape'; + + if ( + (defaultViewport && globals.viewport !== defaultViewport) || + (defaultOrientation && globals.viewportRotated !== defaultRotated) + ) { + updateGlobals({ + viewport: defaultViewport, + viewportRotated: defaultRotated, + }); + } + }, [defaultOrientation, defaultViewport, globals, updateGlobals]); const item = list.find((i) => i.id === globals.viewport) || From bd8236d9a364f5c837b77bba1f1bf226aeec7134 Mon Sep 17 00:00:00 2001 From: Jeppe Reinhold Date: Wed, 3 Jan 2024 10:02:14 +0100 Subject: [PATCH 090/136] restructure migration deprecations, add svelte 4 section --- MIGRATION.md | 47 ++++++++++++++++++++++++++++++++--------------- 1 file changed, 32 insertions(+), 15 deletions(-) diff --git a/MIGRATION.md b/MIGRATION.md index c69c72a1fc6..467fc0e5969 100644 --- a/MIGRATION.md +++ b/MIGRATION.md @@ -10,12 +10,17 @@ - [UI layout state has changed shape](#ui-layout-state-has-changed-shape) - [New UI and props for Button and IconButton components](#new-ui-and-props-for-button-and-iconbutton-components) - [Icons is deprecated](#icons-is-deprecated) - - [React-docgen component analysis by default](#react-docgen-component-analysis-by-default) - [Removed postinstall](#removed-postinstall) - [Removed stories.json](#removed-storiesjson) - [Framework-specific changes](#framework-specific-changes) - - [Angular: Drop support for Angular \< 15](#angular-drop-support-for-angular--15) - - [Next.js: Drop support for version \< 13.5](#nextjs-drop-support-for-version--135) + - [React](#react) + - [`react-docgen` component analysis by default](#react-docgen-component-analysis-by-default) + - [Next.js](#nextjs) + - [Require Next.js 13.5 and up](#require-nextjs-135-and-up) + - [Angular](#angular) + - [Require Angular 15 and up](#require-angular-15-and-up) + - [Svelte](#svelte) + - [Require Svelte 4 and up](#require-svelte-4-and-up) - [From version 7.5.0 to 7.6.0](#from-version-750-to-760) - [CommonJS with Vite is deprecated](#commonjs-with-vite-is-deprecated) - [Using implicit actions during rendering is deprecated](#using-implicit-actions-during-rendering-is-deprecated) @@ -454,7 +459,21 @@ The `IconButton` doesn't have any deprecated props but it now uses the new `Butt In Storybook 8.0 we are introducing a new icon library available with `@storybook/icons`. We are deprecating the `Icons` component in `@storybook/components` and recommend that addon creators and Storybook maintainers use the new `@storybook/icons` component instead. -#### React-docgen component analysis by default +#### Removed postinstall + +We removed the `@storybook/postinstall` package, which provided some utilities for addons to programmatically modify user configuration files on install. This package was years out of date, so this should be a non-disruptive change. If your addon used the package, you can view the old source code [here](https://github.com/storybookjs/storybook/tree/release-7-5/code/lib/postinstall) and adapt it into your addon. + +#### Removed stories.json + +In addition to the built storybook, `storybook build` generates two files, `index.json` and `stories.json`, that list out the contents of the Storybook. `stories.json` is a legacy format and we included it for backwards compatibility. As of 8.0 we no longer build `stories.json` by default, and we will remove it completely in 9.0. + +In the meantime if you have code that relies on `stories.json`, you can find code that transforms the "v4" `index.json` to the "v3" `stories.json` format (and their respective TS types): https://github.com/storybookjs/storybook/blob/release-7-5/code/lib/core-server/src/utils/stories-json.ts#L71-L91 + +### Framework-specific changes + +#### React + +##### `react-docgen` component analysis by default In Storybook 7, we used `react-docgen-typescript` to analyze React component props and auto-generate controls. In Storybook 8, we have moved to `react-docgen` as the new default. `react-docgen` is dramatically more efficient, shaving seconds off of dev startup times. However, it only analyzes basic TypeScript constructs. @@ -470,25 +489,23 @@ export default { For more information see: https://storybook.js.org/docs/react/api/main-config-typescript#reactdocgen -#### Removed postinstall - -We removed the `@storybook/postinstall` package, which provided some utilities for addons to programmatically modify user configuration files on install. This package was years out of date, so this should be a non-disruptive change. If your addon used the package, you can view the old source code [here](https://github.com/storybookjs/storybook/tree/release-7-5/code/lib/postinstall) and adapt it into your addon. +#### Next.js -#### Removed stories.json +##### Require Next.js 13.5 and up -In addition to the built storybook, `storybook build` generates two files, `index.json` and `stories.json`, that list out the contents of the Storybook. `stories.json` is a legacy format and we included it for backwards compatibility. As of 8.0 we no longer build `stories.json` by default, and we will remove it completely in 9.0. +Starting in 8.0, Storybook requires Next.js 13.5 and up. -In the meantime if you have code that relies on `stories.json`, you can find code that transforms the "v4" `index.json` to the "v3" `stories.json` format (and their respective TS types): https://github.com/storybookjs/storybook/blob/release-7-5/code/lib/core-server/src/utils/stories-json.ts#L71-L91 +#### Angular -### Framework-specific changes +##### Require Angular 15 and up -#### Angular: Drop support for Angular \< 15 +Starting in 8.0, Storybook requires Angular 15 and up. -Starting in 8.0, we drop support for Angular < 15 +#### Svelte -#### Next.js: Drop support for version \< 13.5 +##### Require Svelte 4 and up -Starting in 8.0, we drop support for Next.js < 13.5. +Starting in 8.0, Storybook requires Svelte 4 and up. ## From version 7.5.0 to 7.6.0 From 90e96d05b25b70bda717220d7e9cebaa146530ff Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Wed, 3 Jan 2024 10:50:24 +0100 Subject: [PATCH 091/136] Documentation over fn action arg --- code/frameworks/angular/template/cli/button.stories.ts | 1 + code/frameworks/nextjs/template/cli/js/Button.stories.js | 1 + .../frameworks/nextjs/template/cli/ts-3-8/Button.stories.ts | 1 + .../frameworks/nextjs/template/cli/ts-4-9/Button.stories.ts | 1 + code/renderers/html/template/cli/js/Button.stories.js | 1 + code/renderers/html/template/cli/ts-3-8/Button.stories.ts | 1 + code/renderers/html/template/cli/ts-4-9/Button.stories.ts | 1 + code/renderers/preact/template/cli/Button.stories.jsx | 1 + code/renderers/react/template/cli/js/Button.stories.js | 5 ++--- code/renderers/react/template/cli/ts-3-8/Button.stories.ts | 1 + code/renderers/react/template/cli/ts-4-9/Button.stories.ts | 1 + code/renderers/vue3/template/cli/js/Button.stories.js | 1 + code/renderers/vue3/template/cli/ts-3-8/Button.stories.ts | 3 ++- code/renderers/vue3/template/cli/ts-4-9/Button.stories.ts | 6 +++++- 14 files changed, 20 insertions(+), 5 deletions(-) diff --git a/code/frameworks/angular/template/cli/button.stories.ts b/code/frameworks/angular/template/cli/button.stories.ts index 1d81f2b13bf..886310bed9a 100644 --- a/code/frameworks/angular/template/cli/button.stories.ts +++ b/code/frameworks/angular/template/cli/button.stories.ts @@ -12,6 +12,7 @@ const meta: Meta = { control: 'color', }, }, + // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args args: { onClick: fn() }, }; diff --git a/code/frameworks/nextjs/template/cli/js/Button.stories.js b/code/frameworks/nextjs/template/cli/js/Button.stories.js index b8ddeae8fde..97b9ec0ed85 100644 --- a/code/frameworks/nextjs/template/cli/js/Button.stories.js +++ b/code/frameworks/nextjs/template/cli/js/Button.stories.js @@ -15,6 +15,7 @@ export default { argTypes: { backgroundColor: { control: 'color' }, }, + // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args args: { onClick: fn() }, }; diff --git a/code/frameworks/nextjs/template/cli/ts-3-8/Button.stories.ts b/code/frameworks/nextjs/template/cli/ts-3-8/Button.stories.ts index 141d252ceb5..2054fc59231 100644 --- a/code/frameworks/nextjs/template/cli/ts-3-8/Button.stories.ts +++ b/code/frameworks/nextjs/template/cli/ts-3-8/Button.stories.ts @@ -16,6 +16,7 @@ const meta: Meta = { argTypes: { backgroundColor: { control: 'color' }, }, + // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args args: { onClick: fn() }, }; diff --git a/code/frameworks/nextjs/template/cli/ts-4-9/Button.stories.ts b/code/frameworks/nextjs/template/cli/ts-4-9/Button.stories.ts index ef1b519d111..455a9d8601c 100644 --- a/code/frameworks/nextjs/template/cli/ts-4-9/Button.stories.ts +++ b/code/frameworks/nextjs/template/cli/ts-4-9/Button.stories.ts @@ -16,6 +16,7 @@ const meta = { argTypes: { backgroundColor: { control: 'color' }, }, + // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args args: { onClick: fn() }, } satisfies Meta; diff --git a/code/renderers/html/template/cli/js/Button.stories.js b/code/renderers/html/template/cli/js/Button.stories.js index 49edd3b0c92..5898325eb57 100644 --- a/code/renderers/html/template/cli/js/Button.stories.js +++ b/code/renderers/html/template/cli/js/Button.stories.js @@ -20,6 +20,7 @@ export default { options: ['small', 'medium', 'large'], }, }, + // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args args: { onClick: fn() }, }; diff --git a/code/renderers/html/template/cli/ts-3-8/Button.stories.ts b/code/renderers/html/template/cli/ts-3-8/Button.stories.ts index 0df63f59178..90ce057cae5 100644 --- a/code/renderers/html/template/cli/ts-3-8/Button.stories.ts +++ b/code/renderers/html/template/cli/ts-3-8/Button.stories.ts @@ -22,6 +22,7 @@ const meta: Meta = { options: ['small', 'medium', 'large'], }, }, + // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args args: { onClick: fn() }, }; diff --git a/code/renderers/html/template/cli/ts-4-9/Button.stories.ts b/code/renderers/html/template/cli/ts-4-9/Button.stories.ts index ba7a79e01c4..a9a7ff7b3bc 100644 --- a/code/renderers/html/template/cli/ts-4-9/Button.stories.ts +++ b/code/renderers/html/template/cli/ts-4-9/Button.stories.ts @@ -22,6 +22,7 @@ const meta = { options: ['small', 'medium', 'large'], }, }, + // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args args: { onClick: fn() }, } satisfies Meta; diff --git a/code/renderers/preact/template/cli/Button.stories.jsx b/code/renderers/preact/template/cli/Button.stories.jsx index 58d9b3c2923..5017c7144be 100644 --- a/code/renderers/preact/template/cli/Button.stories.jsx +++ b/code/renderers/preact/template/cli/Button.stories.jsx @@ -10,6 +10,7 @@ export default { backgroundColor: { control: 'color' }, onClick: { action: 'onClick' }, }, + // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args args: { onClick: fn() }, }; diff --git a/code/renderers/react/template/cli/js/Button.stories.js b/code/renderers/react/template/cli/js/Button.stories.js index bf369d2f349..97b9ec0ed85 100644 --- a/code/renderers/react/template/cli/js/Button.stories.js +++ b/code/renderers/react/template/cli/js/Button.stories.js @@ -15,9 +15,8 @@ export default { argTypes: { backgroundColor: { control: 'color' }, }, - args: { - onClick: fn(), - }, + // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args + args: { onClick: fn() }, }; // More on writing stories with args: https://storybook.js.org/docs/writing-stories/args diff --git a/code/renderers/react/template/cli/ts-3-8/Button.stories.ts b/code/renderers/react/template/cli/ts-3-8/Button.stories.ts index f890b6d932d..18be3ab1aa1 100644 --- a/code/renderers/react/template/cli/ts-3-8/Button.stories.ts +++ b/code/renderers/react/template/cli/ts-3-8/Button.stories.ts @@ -17,6 +17,7 @@ const meta: Meta = { argTypes: { backgroundColor: { control: 'color' }, }, + // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args args: { onClick: fn() }, }; diff --git a/code/renderers/react/template/cli/ts-4-9/Button.stories.ts b/code/renderers/react/template/cli/ts-4-9/Button.stories.ts index ef1b519d111..455a9d8601c 100644 --- a/code/renderers/react/template/cli/ts-4-9/Button.stories.ts +++ b/code/renderers/react/template/cli/ts-4-9/Button.stories.ts @@ -16,6 +16,7 @@ const meta = { argTypes: { backgroundColor: { control: 'color' }, }, + // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args args: { onClick: fn() }, } satisfies Meta; diff --git a/code/renderers/vue3/template/cli/js/Button.stories.js b/code/renderers/vue3/template/cli/js/Button.stories.js index 6641841c712..8374e0636bc 100644 --- a/code/renderers/vue3/template/cli/js/Button.stories.js +++ b/code/renderers/vue3/template/cli/js/Button.stories.js @@ -10,6 +10,7 @@ export default { size: { control: { type: 'select' }, options: ['small', 'medium', 'large'] }, backgroundColor: { control: 'color' }, }, + // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args args: { onClick: fn() }, }; diff --git a/code/renderers/vue3/template/cli/ts-3-8/Button.stories.ts b/code/renderers/vue3/template/cli/ts-3-8/Button.stories.ts index 872a7a03f8d..60d4690fa46 100644 --- a/code/renderers/vue3/template/cli/ts-3-8/Button.stories.ts +++ b/code/renderers/vue3/template/cli/ts-3-8/Button.stories.ts @@ -14,7 +14,8 @@ const meta: Meta = { }, args: { primary: false, - onClick: fn() + // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args + onClick: fn(), }, }; diff --git a/code/renderers/vue3/template/cli/ts-4-9/Button.stories.ts b/code/renderers/vue3/template/cli/ts-4-9/Button.stories.ts index 8dfb69f6de7..a69991a58bf 100644 --- a/code/renderers/vue3/template/cli/ts-4-9/Button.stories.ts +++ b/code/renderers/vue3/template/cli/ts-4-9/Button.stories.ts @@ -12,7 +12,11 @@ const meta = { size: { control: 'select', options: ['small', 'medium', 'large'] }, backgroundColor: { control: 'color' }, }, - args: { primary: false, onClick: fn() }, // default value + args: { + primary: false, + // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args + onClick: fn(), + }, } satisfies Meta; export default meta; From d4efd04da29e36b98855888acdcece7d20120e59 Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Wed, 3 Jan 2024 10:53:11 +0100 Subject: [PATCH 092/136] during playing -> while playing --- code/lib/core-events/src/errors/preview-errors.ts | 2 +- code/lib/core-events/src/index.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/code/lib/core-events/src/errors/preview-errors.ts b/code/lib/core-events/src/errors/preview-errors.ts index 50cb0609861..26544d7efd8 100644 --- a/code/lib/core-events/src/errors/preview-errors.ts +++ b/code/lib/core-events/src/errors/preview-errors.ts @@ -63,7 +63,7 @@ export class ImplicitActionsDuringRendering extends StorybookError { template() { return dedent` - We detected that you use an implicit action arg during ${this.data.phase} of your story. + We detected that you use an implicit action arg while ${this.data.phase} of your story. ${this.data.deprecated ? `\nThis is deprecated and won't work in Storybook 8 anymore.\n` : ``} Please provide an explicit spy to your args like this: import { fn } from '@storybook/test'; diff --git a/code/lib/core-events/src/index.ts b/code/lib/core-events/src/index.ts index 2e9654885db..6d98e629120 100644 --- a/code/lib/core-events/src/index.ts +++ b/code/lib/core-events/src/index.ts @@ -38,7 +38,7 @@ enum events { STORY_RENDER_PHASE_CHANGED = 'storyRenderPhaseChanged', // Emitted when the play function throws PLAY_FUNCTION_THREW_EXCEPTION = 'playFunctionThrewException', - // Emitted when there were unhandled errors during playing the story + // Emitted when there were unhandled errors while playing the story UNHANDLED_ERRORS_WHILE_PLAYING = 'unhandledErrorsWhilePlaying', // Tell the story store to update (a subset of) a stories arg values UPDATE_STORY_ARGS = 'updateStoryArgs', From 64eef7cb3f4a3902279c0b700095a23648689b29 Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Wed, 3 Jan 2024 11:30:02 +0100 Subject: [PATCH 093/136] Remove vite plugins and drop Vite 3 support --- code/builders/builder-vite/package.json | 6 +- code/frameworks/preact-vite/package.json | 3 +- code/frameworks/preact-vite/src/preset.ts | 10 -- code/frameworks/react-vite/package.json | 3 +- code/frameworks/react-vite/src/preset.ts | 7 - code/frameworks/svelte-vite/package.json | 5 +- code/frameworks/svelte-vite/src/preset.ts | 8 +- code/frameworks/vue3-vite/package.json | 3 +- code/frameworks/vue3-vite/src/preset.ts | 7 - code/yarn.lock | 156 ++-------------------- 10 files changed, 22 insertions(+), 186 deletions(-) diff --git a/code/builders/builder-vite/package.json b/code/builders/builder-vite/package.json index 081fcf17090..59bb5dc7e3f 100644 --- a/code/builders/builder-vite/package.json +++ b/code/builders/builder-vite/package.json @@ -57,14 +57,12 @@ "express": "^4.17.3", "find-cache-dir": "^3.0.0", "fs-extra": "^11.1.0", - "magic-string": "^0.30.0", - "rollup": "^2.25.0 || ^3.3.0" + "magic-string": "^0.30.0" }, "devDependencies": { "@types/express": "^4.17.13", "@types/node": "^18.0.0", "glob": "^10.0.0", - "rollup": "^3.20.1", "slash": "^5.0.0", "typescript": "^5.3.2", "vite": "^4.0.4" @@ -72,7 +70,7 @@ "peerDependencies": { "@preact/preset-vite": "*", "typescript": ">= 4.3.x", - "vite": "^3.0.0 || ^4.0.0 || ^5.0.0", + "vite": "^4.0.0 || ^5.0.0", "vite-plugin-glimmerx": "*" }, "peerDependenciesMeta": { diff --git a/code/frameworks/preact-vite/package.json b/code/frameworks/preact-vite/package.json index caad949fb1a..96c6e744dcf 100644 --- a/code/frameworks/preact-vite/package.json +++ b/code/frameworks/preact-vite/package.json @@ -47,7 +47,6 @@ "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@preact/preset-vite": "^2.0.0", "@storybook/builder-vite": "workspace:*", "@storybook/preact": "workspace:*" }, @@ -58,7 +57,7 @@ }, "peerDependencies": { "preact": ">=10", - "vite": "^3.0.0 || ^4.0.0 || ^5.0.0" + "vite": "^4.0.0 || ^5.0.0" }, "engines": { "node": ">=16" diff --git a/code/frameworks/preact-vite/src/preset.ts b/code/frameworks/preact-vite/src/preset.ts index 2d4e18d77e9..4002182ea92 100644 --- a/code/frameworks/preact-vite/src/preset.ts +++ b/code/frameworks/preact-vite/src/preset.ts @@ -1,6 +1,4 @@ -import { hasVitePlugins } from '@storybook/builder-vite'; import type { PresetProperty } from '@storybook/types'; -import preact from '@preact/preset-vite'; import { dirname, join } from 'path'; import type { StorybookConfig } from './types'; @@ -13,14 +11,6 @@ export const core: PresetProperty<'core', StorybookConfig> = { }; export const viteFinal: StorybookConfig['viteFinal'] = async (config) => { - const { plugins = [] } = config; - - // Add Preact plugin if not present - if (!(await hasVitePlugins(plugins, ['vite:preact-jsx']))) { - plugins.push(preact()); - } - // TODO: Add docgen plugin per issue https://github.com/storybookjs/storybook/issues/19739 - return config; }; diff --git a/code/frameworks/react-vite/package.json b/code/frameworks/react-vite/package.json index d06ab648e3c..a5c9895676a 100644 --- a/code/frameworks/react-vite/package.json +++ b/code/frameworks/react-vite/package.json @@ -51,7 +51,6 @@ "@rollup/pluginutils": "^5.0.2", "@storybook/builder-vite": "workspace:*", "@storybook/react": "workspace:*", - "@vitejs/plugin-react": "^3.0.1", "magic-string": "^0.30.0", "react-docgen": "^7.0.0" }, @@ -63,7 +62,7 @@ "peerDependencies": { "react": "^16.8.0 || ^17.0.0 || ^18.0.0", "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0", - "vite": "^3.0.0 || ^4.0.0 || ^5.0.0" + "vite": "^4.0.0 || ^5.0.0" }, "engines": { "node": ">=16" diff --git a/code/frameworks/react-vite/src/preset.ts b/code/frameworks/react-vite/src/preset.ts index 207f60988eb..0defee00396 100644 --- a/code/frameworks/react-vite/src/preset.ts +++ b/code/frameworks/react-vite/src/preset.ts @@ -1,6 +1,5 @@ /* eslint-disable global-require */ import type { PresetProperty } from '@storybook/types'; -import { hasVitePlugins } from '@storybook/builder-vite'; import { dirname, join } from 'path'; import type { StorybookConfig } from './types'; @@ -15,12 +14,6 @@ export const core: PresetProperty<'core', StorybookConfig> = { export const viteFinal: StorybookConfig['viteFinal'] = async (config, { presets }) => { const { plugins = [] } = config; - // Add react plugin if not present - if (!(await hasVitePlugins(plugins, ['vite:react-babel', 'vite:react-swc']))) { - const { default: react } = await import('@vitejs/plugin-react'); - plugins.push(react()); - } - // Add docgen plugin const { reactDocgen: reactDocgenOption, reactDocgenTypescriptOptions } = await presets.apply( 'typescript', diff --git a/code/frameworks/svelte-vite/package.json b/code/frameworks/svelte-vite/package.json index 22357db9e54..654cca9a9e0 100644 --- a/code/frameworks/svelte-vite/package.json +++ b/code/frameworks/svelte-vite/package.json @@ -50,21 +50,22 @@ "@storybook/builder-vite": "workspace:*", "@storybook/node-logger": "workspace:*", "@storybook/svelte": "workspace:*", - "@sveltejs/vite-plugin-svelte": "^2.4.2", "magic-string": "^0.30.0", "svelte-preprocess": "^5.1.1", "sveltedoc-parser": "^4.2.1", "ts-dedent": "^2.2.0" }, "devDependencies": { + "@sveltejs/vite-plugin-svelte": "^3.0.1", "@types/node": "^18.0.0", "svelte": "^5.0.0-next.16", "typescript": "^5.3.2", "vite": "^4.0.0" }, "peerDependencies": { + "@sveltejs/vite-plugin-svelte": "^2.0.0 || ^3.0.0", "svelte": "^4.0.0 || ^5.0.0-next.16", - "vite": "^3.0.0 || ^4.0.0 || ^5.0.0" + "vite": "^4.0.0 || ^5.0.0" }, "engines": { "node": "^14.18 || >=16" diff --git a/code/frameworks/svelte-vite/src/preset.ts b/code/frameworks/svelte-vite/src/preset.ts index 220812cf7c5..95966bd3f9c 100644 --- a/code/frameworks/svelte-vite/src/preset.ts +++ b/code/frameworks/svelte-vite/src/preset.ts @@ -1,4 +1,3 @@ -import { hasVitePlugins } from '@storybook/builder-vite'; import type { PresetProperty } from '@storybook/types'; import { dirname, join } from 'path'; import type { StorybookConfig } from './types'; @@ -17,14 +16,9 @@ export const viteFinal: NonNullable = async (confi const { plugins = [] } = config; // TODO: set up eslint import to use typescript resolver // eslint-disable-next-line import/no-unresolved - const { svelte, loadSvelteConfig } = await import('@sveltejs/vite-plugin-svelte'); + const { loadSvelteConfig } = await import('@sveltejs/vite-plugin-svelte'); const svelteConfig = await loadSvelteConfig(); - // Add svelte plugin if the user does not have a Vite config of their own - if (!(await hasVitePlugins(plugins, ['vite-plugin-svelte']))) { - plugins.push(svelte()); - } - // Add docgen plugin plugins.push(svelteDocgen(svelteConfig)); diff --git a/code/frameworks/vue3-vite/package.json b/code/frameworks/vue3-vite/package.json index b2793bc7be1..28eeb77722e 100644 --- a/code/frameworks/vue3-vite/package.json +++ b/code/frameworks/vue3-vite/package.json @@ -50,7 +50,6 @@ "@storybook/builder-vite": "workspace:*", "@storybook/core-server": "workspace:*", "@storybook/vue3": "workspace:*", - "@vitejs/plugin-vue": "^4.0.0", "magic-string": "^0.30.0", "vue-docgen-api": "^4.40.0" }, @@ -60,7 +59,7 @@ "vite": "^4.0.0" }, "peerDependencies": { - "vite": "^3.0.0 || ^4.0.0 || ^5.0.0" + "vite": "^4.0.0 || ^5.0.0" }, "engines": { "node": "^14.18 || >=16" diff --git a/code/frameworks/vue3-vite/src/preset.ts b/code/frameworks/vue3-vite/src/preset.ts index c0d97bd8da8..2fb65169d33 100644 --- a/code/frameworks/vue3-vite/src/preset.ts +++ b/code/frameworks/vue3-vite/src/preset.ts @@ -1,4 +1,3 @@ -import { hasVitePlugins } from '@storybook/builder-vite'; import type { PresetProperty } from '@storybook/types'; import { mergeConfig, type PluginOption } from 'vite'; import { dirname, join } from 'path'; @@ -16,12 +15,6 @@ export const core: PresetProperty<'core'> = { export const viteFinal: StorybookConfig['viteFinal'] = async (config, { presets }) => { const plugins: PluginOption[] = []; - // Add vue plugin if not present - if (!(config.plugins && (await hasVitePlugins(config.plugins, ['vite:vue'])))) { - const { default: vue } = await import('@vitejs/plugin-vue'); - plugins.push(vue()); - } - // Add docgen plugin plugins.push(vueDocgen()); diff --git a/code/yarn.lock b/code/yarn.lock index 1a55377378c..16eded012b9 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -4130,64 +4130,6 @@ __metadata: languageName: node linkType: hard -"@preact/preset-vite@npm:^2.0.0": - version: 2.7.0 - resolution: "@preact/preset-vite@npm:2.7.0" - dependencies: - "@babel/plugin-transform-react-jsx": "npm:^7.22.15" - "@babel/plugin-transform-react-jsx-development": "npm:^7.22.5" - "@prefresh/vite": "npm:^2.4.1" - "@rollup/pluginutils": "npm:^4.1.1" - babel-plugin-transform-hook-names: "npm:^1.0.2" - debug: "npm:^4.3.4" - kolorist: "npm:^1.8.0" - resolve: "npm:^1.22.8" - peerDependencies: - "@babel/core": 7.x - vite: 2.x || 3.x || 4.x || 5.x - checksum: 95a5a87d804d9f33d98f7c8db93fe27de0d626b2794e745734bcad7a7d89db5a3ad37712feb188f1857d834658de33167f524b3040e8cea48ef422da6a1e74db - languageName: node - linkType: hard - -"@prefresh/babel-plugin@npm:0.5.1": - version: 0.5.1 - resolution: "@prefresh/babel-plugin@npm:0.5.1" - checksum: f9153c210427adbddb4403502f8fa845f6207516de2d162f5d550683a87173dc3eaabc6be2bb4f1206b882cdd23339f2092567be8d09794a3d06a5626942b1e4 - languageName: node - linkType: hard - -"@prefresh/core@npm:^1.5.1": - version: 1.5.2 - resolution: "@prefresh/core@npm:1.5.2" - peerDependencies: - preact: ^10.0.0 - checksum: 53d1ce714ed098ccc11f3a8e2826ff6b90237445c24df6281eb162791b534d1d7626a43c0c1c7427139d2ade658e1ba7020963c001135bbdbeeb15073008529b - languageName: node - linkType: hard - -"@prefresh/utils@npm:^1.2.0": - version: 1.2.0 - resolution: "@prefresh/utils@npm:1.2.0" - checksum: 38cdc6cbb5e18df36996161214eb1097db3361cb0b6402a8012cbe500ba8fb5bcbdc39a687d3b6d67e99f6c340ed77d59f27ab167dfc1655eb4d783740d87d52 - languageName: node - linkType: hard - -"@prefresh/vite@npm:^2.4.1": - version: 2.4.4 - resolution: "@prefresh/vite@npm:2.4.4" - dependencies: - "@babel/core": "npm:^7.22.1" - "@prefresh/babel-plugin": "npm:0.5.1" - "@prefresh/core": "npm:^1.5.1" - "@prefresh/utils": "npm:^1.2.0" - "@rollup/pluginutils": "npm:^4.2.1" - peerDependencies: - preact: ^10.4.0 - vite: ">=2.0.0" - checksum: 31c3fcdcfbfd31921d41f01ca027515d4411f4169c2d3810578bf87b61609d155a1a410c977f098839982adb8da2d88674382cc4a5e55b6fe249a59be60a2483 - languageName: node - linkType: hard - "@radix-ui/number@npm:1.0.1": version: 1.0.1 resolution: "@radix-ui/number@npm:1.0.1" @@ -4366,16 +4308,6 @@ __metadata: languageName: node linkType: hard -"@rollup/pluginutils@npm:^4.1.1, @rollup/pluginutils@npm:^4.2.1": - version: 4.2.1 - resolution: "@rollup/pluginutils@npm:4.2.1" - dependencies: - estree-walker: "npm:^2.0.1" - picomatch: "npm:^2.2.2" - checksum: 3ee56b2c8f1ed8dfd0a92631da1af3a2dfdd0321948f089b3752b4de1b54dc5076701eadd0e5fc18bd191b77af594ac1db6279e83951238ba16bf8a414c64c48 - languageName: node - linkType: hard - "@rollup/pluginutils@npm:^5.0.2": version: 5.1.0 resolution: "@rollup/pluginutils@npm:5.1.0" @@ -5172,14 +5104,13 @@ __metadata: fs-extra: "npm:^11.1.0" glob: "npm:^10.0.0" magic-string: "npm:^0.30.0" - rollup: "npm:^3.20.1" slash: "npm:^5.0.0" typescript: "npm:^5.3.2" vite: "npm:^4.0.4" peerDependencies: "@preact/preset-vite": "*" typescript: ">= 4.3.x" - vite: ^3.0.0 || ^4.0.0 || ^5.0.0 + vite: ^4.0.0 || ^5.0.0 vite-plugin-glimmerx: "*" peerDependenciesMeta: "@preact/preset-vite": @@ -5941,7 +5872,6 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/preact-vite@workspace:frameworks/preact-vite" dependencies: - "@preact/preset-vite": "npm:^2.0.0" "@storybook/builder-vite": "workspace:*" "@storybook/preact": "workspace:*" "@types/node": "npm:^18.0.0" @@ -5949,7 +5879,7 @@ __metadata: vite: "npm:^4.0.0" peerDependencies: preact: ">=10" - vite: ^3.0.0 || ^4.0.0 || ^5.0.0 + vite: ^4.0.0 || ^5.0.0 languageName: unknown linkType: soft @@ -6224,7 +6154,6 @@ __metadata: "@storybook/builder-vite": "workspace:*" "@storybook/react": "workspace:*" "@types/node": "npm:^18.0.0" - "@vitejs/plugin-react": "npm:^3.0.1" magic-string: "npm:^0.30.0" react-docgen: "npm:^7.0.0" typescript: "npm:^5.3.2" @@ -6232,7 +6161,7 @@ __metadata: peerDependencies: react: ^16.8.0 || ^17.0.0 || ^18.0.0 react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 - vite: ^3.0.0 || ^4.0.0 || ^5.0.0 + vite: ^4.0.0 || ^5.0.0 languageName: unknown linkType: soft @@ -6536,7 +6465,7 @@ __metadata: "@storybook/builder-vite": "workspace:*" "@storybook/node-logger": "workspace:*" "@storybook/svelte": "workspace:*" - "@sveltejs/vite-plugin-svelte": "npm:^2.4.2" + "@sveltejs/vite-plugin-svelte": "npm:^3.0.1" "@types/node": "npm:^18.0.0" magic-string: "npm:^0.30.0" svelte: "npm:^5.0.0-next.16" @@ -6546,8 +6475,9 @@ __metadata: typescript: "npm:^5.3.2" vite: "npm:^4.0.0" peerDependencies: + "@sveltejs/vite-plugin-svelte": ^2.0.0 || ^3.0.0 svelte: ^4.0.0 || ^5.0.0-next.16 - vite: ^3.0.0 || ^4.0.0 || ^5.0.0 + vite: ^4.0.0 || ^5.0.0 languageName: unknown linkType: soft @@ -6723,13 +6653,12 @@ __metadata: "@storybook/core-server": "workspace:*" "@storybook/vue3": "workspace:*" "@types/node": "npm:^18.0.0" - "@vitejs/plugin-vue": "npm:^4.0.0" magic-string: "npm:^0.30.0" typescript: "npm:^5.3.2" vite: "npm:^4.0.0" vue-docgen-api: "npm:^4.40.0" peerDependencies: - vite: ^3.0.0 || ^4.0.0 || ^5.0.0 + vite: ^4.0.0 || ^5.0.0 languageName: unknown linkType: soft @@ -6838,19 +6767,6 @@ __metadata: languageName: node linkType: hard -"@sveltejs/vite-plugin-svelte-inspector@npm:^1.0.4": - version: 1.0.4 - resolution: "@sveltejs/vite-plugin-svelte-inspector@npm:1.0.4" - dependencies: - debug: "npm:^4.3.4" - peerDependencies: - "@sveltejs/vite-plugin-svelte": ^2.2.0 - svelte: ^3.54.0 || ^4.0.0 - vite: ^4.0.0 - checksum: f21cb6bde0d8cce505c558dcb786d00e514c270848d9ff21dca12bc8335588e1bd05215fe3cd7478c8a6779bae7a75629b68d484fcdf309d759f25ee58ea771e - languageName: node - linkType: hard - "@sveltejs/vite-plugin-svelte-inspector@npm:^2.0.0-next.0 || ^2.0.0": version: 2.0.0 resolution: "@sveltejs/vite-plugin-svelte-inspector@npm:2.0.0" @@ -6864,24 +6780,6 @@ __metadata: languageName: node linkType: hard -"@sveltejs/vite-plugin-svelte@npm:^2.4.2": - version: 2.5.3 - resolution: "@sveltejs/vite-plugin-svelte@npm:2.5.3" - dependencies: - "@sveltejs/vite-plugin-svelte-inspector": "npm:^1.0.4" - debug: "npm:^4.3.4" - deepmerge: "npm:^4.3.1" - kleur: "npm:^4.1.5" - magic-string: "npm:^0.30.3" - svelte-hmr: "npm:^0.15.3" - vitefu: "npm:^0.2.4" - peerDependencies: - svelte: ^3.54.0 || ^4.0.0 || ^5.0.0-next.0 - vite: ^4.0.0 - checksum: 613a4ad18a946ddee7b82cae0d892040a9459a5ac5137cbaa91a4b7b67d504409b5dbc02d268136a740b09e42531b7516f80a0f687ca4fe2b0d99e6e483c5d06 - languageName: node - linkType: hard - "@sveltejs/vite-plugin-svelte@npm:^3.0.1": version: 3.0.1 resolution: "@sveltejs/vite-plugin-svelte@npm:3.0.1" @@ -8523,7 +8421,7 @@ __metadata: languageName: node linkType: hard -"@vitejs/plugin-vue@npm:^4.0.0, @vitejs/plugin-vue@npm:^4.4.0": +"@vitejs/plugin-vue@npm:^4.4.0": version: 4.5.2 resolution: "@vitejs/plugin-vue@npm:4.5.2" peerDependencies: @@ -10208,15 +10106,6 @@ __metadata: languageName: node linkType: hard -"babel-plugin-transform-hook-names@npm:^1.0.2": - version: 1.0.2 - resolution: "babel-plugin-transform-hook-names@npm:1.0.2" - peerDependencies: - "@babel/core": ^7.12.10 - checksum: 517b85fe0611d742b3fffad5d0e119fcbd29bf69f95c6970b9ede4cb66453c7106a2d3bf048b35255b78a9d6a9565ad37e73b46c0be1fe557e941c792fad79f0 - languageName: node - linkType: hard - "babel-preset-current-node-syntax@npm:^1.0.0": version: 1.0.1 resolution: "babel-preset-current-node-syntax@npm:1.0.1" @@ -18654,13 +18543,6 @@ __metadata: languageName: node linkType: hard -"kolorist@npm:^1.8.0": - version: 1.8.0 - resolution: "kolorist@npm:1.8.0" - checksum: 73075db44a692bf6c34a649f3b4b3aea4993b84f6b754cbf7a8577e7c7db44c0bad87752bd23b0ce533f49de2244ce2ce03b7b1b667a85ae170a94782cc50f9b - languageName: node - linkType: hard - "language-subtag-registry@npm:~0.3.2": version: 0.3.22 resolution: "language-subtag-registry@npm:0.3.22" @@ -19314,7 +19196,7 @@ __metadata: languageName: node linkType: hard -"magic-string@npm:0.30.5, magic-string@npm:^0.30.0, magic-string@npm:^0.30.3, magic-string@npm:^0.30.4, magic-string@npm:^0.30.5": +"magic-string@npm:0.30.5, magic-string@npm:^0.30.0, magic-string@npm:^0.30.4, magic-string@npm:^0.30.5": version: 0.30.5 resolution: "magic-string@npm:0.30.5" dependencies: @@ -22429,7 +22311,7 @@ __metadata: languageName: node linkType: hard -"picomatch@npm:^2.0.4, picomatch@npm:^2.2.1, picomatch@npm:^2.2.2, picomatch@npm:^2.2.3, picomatch@npm:^2.3.0, picomatch@npm:^2.3.1": +"picomatch@npm:^2.0.4, picomatch@npm:^2.2.1, picomatch@npm:^2.2.3, picomatch@npm:^2.3.0, picomatch@npm:^2.3.1": version: 2.3.1 resolution: "picomatch@npm:2.3.1" checksum: 26c02b8d06f03206fc2ab8d16f19960f2ff9e81a658f831ecb656d8f17d9edc799e8364b1f4a7873e89d9702dff96204be0fa26fe4181f6843f040f819dac4be @@ -24666,7 +24548,7 @@ __metadata: languageName: node linkType: hard -"resolve@npm:1.22.8, resolve@npm:^1.10.0, resolve@npm:^1.12.0, resolve@npm:^1.13.1, resolve@npm:^1.14.2, resolve@npm:^1.15.1, resolve@npm:^1.17.0, resolve@npm:^1.19.0, resolve@npm:^1.22.1, resolve@npm:^1.22.4, resolve@npm:^1.22.8, resolve@npm:^1.4.0": +"resolve@npm:1.22.8, resolve@npm:^1.10.0, resolve@npm:^1.12.0, resolve@npm:^1.13.1, resolve@npm:^1.14.2, resolve@npm:^1.15.1, resolve@npm:^1.17.0, resolve@npm:^1.19.0, resolve@npm:^1.22.1, resolve@npm:^1.22.4, resolve@npm:^1.4.0": version: 1.22.8 resolution: "resolve@npm:1.22.8" dependencies: @@ -24692,7 +24574,7 @@ __metadata: languageName: node linkType: hard -"resolve@patch:resolve@npm%3A1.22.8#optional!builtin, resolve@patch:resolve@npm%3A^1.10.0#optional!builtin, resolve@patch:resolve@npm%3A^1.12.0#optional!builtin, resolve@patch:resolve@npm%3A^1.13.1#optional!builtin, resolve@patch:resolve@npm%3A^1.14.2#optional!builtin, resolve@patch:resolve@npm%3A^1.15.1#optional!builtin, resolve@patch:resolve@npm%3A^1.17.0#optional!builtin, resolve@patch:resolve@npm%3A^1.19.0#optional!builtin, resolve@patch:resolve@npm%3A^1.22.1#optional!builtin, resolve@patch:resolve@npm%3A^1.22.4#optional!builtin, resolve@patch:resolve@npm%3A^1.22.8#optional!builtin, resolve@patch:resolve@npm%3A^1.4.0#optional!builtin": +"resolve@patch:resolve@npm%3A1.22.8#optional!builtin, resolve@patch:resolve@npm%3A^1.10.0#optional!builtin, resolve@patch:resolve@npm%3A^1.12.0#optional!builtin, resolve@patch:resolve@npm%3A^1.13.1#optional!builtin, resolve@patch:resolve@npm%3A^1.14.2#optional!builtin, resolve@patch:resolve@npm%3A^1.15.1#optional!builtin, resolve@patch:resolve@npm%3A^1.17.0#optional!builtin, resolve@patch:resolve@npm%3A^1.19.0#optional!builtin, resolve@patch:resolve@npm%3A^1.22.1#optional!builtin, resolve@patch:resolve@npm%3A^1.22.4#optional!builtin, resolve@patch:resolve@npm%3A^1.4.0#optional!builtin": version: 1.22.8 resolution: "resolve@patch:resolve@npm%3A1.22.8#optional!builtin::version=1.22.8&hash=c3c19d" dependencies: @@ -24845,7 +24727,7 @@ __metadata: languageName: node linkType: hard -"rollup@npm:^3.20.1, rollup@npm:^3.27.1": +"rollup@npm:^3.27.1": version: 3.29.4 resolution: "rollup@npm:3.29.4" dependencies: @@ -28485,18 +28367,6 @@ __metadata: languageName: node linkType: hard -"vitefu@npm:^0.2.4": - version: 0.2.4 - resolution: "vitefu@npm:0.2.4" - peerDependencies: - vite: ^3.0.0 || ^4.0.0 - peerDependenciesMeta: - vite: - optional: true - checksum: 78d5e7071c0c4fdfc010f15a3e5bac2d31090ddd48789446fce5b7d0f01496fc6a041b65d3add904365bb0ac6576bb93635f700971c16ffd27cd7c0bee9eb1ae - languageName: node - linkType: hard - "vitefu@npm:^0.2.5": version: 0.2.5 resolution: "vitefu@npm:0.2.5" From 5bd0359a804e0026d6f39f5955bdbd2a308d3738 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Wed, 3 Jan 2024 11:37:56 +0100 Subject: [PATCH 094/136] fix https://github.com/storybookjs/storybook/issues/25404 --- code/ui/manager/src/container/Sidebar.tsx | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/code/ui/manager/src/container/Sidebar.tsx b/code/ui/manager/src/container/Sidebar.tsx index 9041badfd5d..7eec79fc83c 100755 --- a/code/ui/manager/src/container/Sidebar.tsx +++ b/code/ui/manager/src/container/Sidebar.tsx @@ -1,7 +1,8 @@ import React, { useMemo } from 'react'; import type { Combo, StoriesHash } from '@storybook/manager-api'; -import { types, Consumer } from '@storybook/manager-api'; +import { Consumer } from '@storybook/manager-api'; +import { Addon_TypesEnum } from '@storybook/types'; import type { SidebarProps as SidebarComponentProps } from '../components/sidebar/Sidebar'; import { Sidebar as SidebarComponent } from '../components/sidebar/Sidebar'; @@ -41,9 +42,12 @@ const Sidebar = React.memo(function Sideber({ onMenuClick }: SidebarProps) { const whatsNewNotificationsEnabled = state.whatsNewData?.status === 'SUCCESS' && !state.disableWhatsNewNotifications; - const items = api.getElements(types.experimental_SIDEBAR_BOTTOM); - const bottom = useMemo(() => Object.values(items), [items]); - const top = useMemo(() => Object.values(api.getElements(types.experimental_SIDEBAR_TOP)), []); + const bottomItems = api.getElements(Addon_TypesEnum.experimental_SIDEBAR_BOTTOM); + const topItems = api.getElements(Addon_TypesEnum.experimental_SIDEBAR_TOP); + // eslint-disable-next-line react-hooks/exhaustive-deps + const bottom = useMemo(() => Object.values(bottomItems), [...Object.values(bottomItems)]); + // eslint-disable-next-line react-hooks/exhaustive-deps + const top = useMemo(() => Object.values(topItems), [...Object.values(topItems)]); return { title: name, From acc9f4814a8bf0e924bc997c0deecd94a119118f Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Wed, 3 Jan 2024 12:29:55 +0100 Subject: [PATCH 095/136] Add migration note --- MIGRATION.md | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/MIGRATION.md b/MIGRATION.md index c69c72a1fc6..9459baa398a 100644 --- a/MIGRATION.md +++ b/MIGRATION.md @@ -331,6 +331,21 @@ ## From version 7.x to 8.0.0 +### Framework specific vite plugins have to be explicitly added + +In Storybook 7 we would automatically add frameworks specific vite plugins, e.g. `@vitejs/plugin-react`, if they were not installed. +In Storybook 8 those plugins have to be added explicitly in the user's `vite.config.ts`: + +```ts +import { defineConfig } from 'vite'; +import react from '@vitejs/plugin-react'; + +// https://vitejs.dev/config/ +export default defineConfig({ + plugins: [react()], +}); +``` + ### Implicit actions can not be used during rendering (for example in the play function) In Storybook 7, we inferred if the component accepts any action props, From e70b3d473873a359e8c1dfbe7597198f8424b9bd Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Wed, 3 Jan 2024 12:31:15 +0100 Subject: [PATCH 096/136] Add link to migration note --- MIGRATION.md | 1 + 1 file changed, 1 insertion(+) diff --git a/MIGRATION.md b/MIGRATION.md index 1c1e1d92408..26567a230b6 100644 --- a/MIGRATION.md +++ b/MIGRATION.md @@ -1,6 +1,7 @@

Migration

- [From version 7.x to 8.0.0](#from-version-7x-to-800) + - [Framework specific vite plugins have to be explicitly added](#framework-specific-vite-plugins-have-to-be-explicitly-added) - [Implicit actions can not be used during rendering (for example in the play function)](#implicit-actions-can-not-be-used-during-rendering-for-example-in-the-play-function) - [Core changes](#core-changes) - [Dropping support for Node.js 16](#dropping-support-for-nodejs-16) From 3251604e2d5a01737e135f0d4b1987cde05c9d70 Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Wed, 3 Jan 2024 12:47:36 +0100 Subject: [PATCH 097/136] Update MIGRATION.md Co-authored-by: Valentin Palkovic --- MIGRATION.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/MIGRATION.md b/MIGRATION.md index 26567a230b6..c983fde4390 100644 --- a/MIGRATION.md +++ b/MIGRATION.md @@ -337,7 +337,7 @@ ## From version 7.x to 8.0.0 -### Framework specific vite plugins have to be explicitly added +### Framework-specific Vite plugins have to be explicitly added In Storybook 7 we would automatically add frameworks specific vite plugins, e.g. `@vitejs/plugin-react`, if they were not installed. In Storybook 8 those plugins have to be added explicitly in the user's `vite.config.ts`: From 2fd026c05faa1db1fd8b3d64f382b961a9632284 Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Wed, 3 Jan 2024 12:47:44 +0100 Subject: [PATCH 098/136] Update MIGRATION.md Co-authored-by: Valentin Palkovic --- MIGRATION.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/MIGRATION.md b/MIGRATION.md index c983fde4390..9a5a8858585 100644 --- a/MIGRATION.md +++ b/MIGRATION.md @@ -339,7 +339,7 @@ ### Framework-specific Vite plugins have to be explicitly added -In Storybook 7 we would automatically add frameworks specific vite plugins, e.g. `@vitejs/plugin-react`, if they were not installed. +In Storybook 7, we would automatically add frameworks-specific Vite plugins, e.g. `@vitejs/plugin-react` if not installed. In Storybook 8 those plugins have to be added explicitly in the user's `vite.config.ts`: ```ts From a88b242f0cbda0390de24491a0d5d5b59273515b Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Wed, 3 Jan 2024 12:56:20 +0100 Subject: [PATCH 099/136] Remove unneeded mergeConfig --- code/frameworks/sveltekit/src/plugins/mock-sveltekit-stores.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/code/frameworks/sveltekit/src/plugins/mock-sveltekit-stores.ts b/code/frameworks/sveltekit/src/plugins/mock-sveltekit-stores.ts index 58855bbd9df..32f6eb0c41b 100644 --- a/code/frameworks/sveltekit/src/plugins/mock-sveltekit-stores.ts +++ b/code/frameworks/sveltekit/src/plugins/mock-sveltekit-stores.ts @@ -2,7 +2,6 @@ import { resolve } from 'node:path'; import type { Plugin } from 'vite'; export async function mockSveltekitStores() { - const { mergeConfig } = await import('vite'); return { name: 'storybook:sveltekit-mock-stores', config: () => ({ From d6d5c7af0e2ea41231d5c7ba6dc9d5c3b58707eb Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Tue, 2 Jan 2024 17:02:06 -0300 Subject: [PATCH 100/136] remove --use-npm flag from CLI --- MIGRATION.md | 8 ++++++++ code/lib/cli/src/add.ts | 15 ++++----------- code/lib/cli/src/automigrate/index.ts | 12 +----------- code/lib/cli/src/automigrate/types.ts | 1 - code/lib/cli/src/generate.ts | 4 ---- code/lib/cli/src/generators/types.ts | 1 - code/lib/cli/src/initiate.ts | 9 ++------- .../cli/src/js-package-manager/deprecations.ts | 8 -------- code/lib/cli/src/js-package-manager/index.ts | 2 -- code/lib/cli/src/upgrade.ts | 9 +-------- 10 files changed, 16 insertions(+), 53 deletions(-) delete mode 100644 code/lib/cli/src/js-package-manager/deprecations.ts diff --git a/MIGRATION.md b/MIGRATION.md index 467fc0e5969..5ffcc0e6116 100644 --- a/MIGRATION.md +++ b/MIGRATION.md @@ -21,6 +21,8 @@ - [Require Angular 15 and up](#require-angular-15-and-up) - [Svelte](#svelte) - [Require Svelte 4 and up](#require-svelte-4-and-up) + - [Deprecations which are now removed](#deprecations-which-are-now-removed) + - [--use-npm flag in storybook CLI](#--use-npm-flag-in-storybook-cli) - [From version 7.5.0 to 7.6.0](#from-version-750-to-760) - [CommonJS with Vite is deprecated](#commonjs-with-vite-is-deprecated) - [Using implicit actions during rendering is deprecated](#using-implicit-actions-during-rendering-is-deprecated) @@ -507,6 +509,12 @@ Starting in 8.0, Storybook requires Angular 15 and up. Starting in 8.0, Storybook requires Svelte 4 and up. +### Deprecations which are now removed + +#### --use-npm flag in storybook CLI + +The `--use-npm` is now removed. Use `--package-manager=npm` instead. [More info here](#cli-option---use-npm-deprecated). + ## From version 7.5.0 to 7.6.0 #### CommonJS with Vite is deprecated diff --git a/code/lib/cli/src/add.ts b/code/lib/cli/src/add.ts index 20e1c42bc81..3c730d68da5 100644 --- a/code/lib/cli/src/add.ts +++ b/code/lib/cli/src/add.ts @@ -4,11 +4,7 @@ import { isAbsolute, join } from 'path'; import SemVer from 'semver'; import dedent from 'ts-dedent'; -import { - JsPackageManagerFactory, - useNpmWarning, - type PackageManagerName, -} from './js-package-manager'; +import { JsPackageManagerFactory, type PackageManagerName } from './js-package-manager'; import { getStorybookVersion, isCorePackage } from './utils'; const logger = console; @@ -71,13 +67,10 @@ const checkInstalled = (addonName: string, main: any) => { */ export async function add( addon: string, - options: { useNpm: boolean; packageManager: PackageManagerName; skipPostinstall: boolean } + options: { packageManager: PackageManagerName; skipPostinstall: boolean } ) { - let { packageManager: pkgMgr } = options; - if (options.useNpm) { - useNpmWarning(); - pkgMgr = 'npm'; - } + const { packageManager: pkgMgr } = options; + const packageManager = JsPackageManagerFactory.getPackageManager({ force: pkgMgr }); const packageJson = await packageManager.retrievePackageJson(); const { mainConfig, configDir } = getStorybookInfo(packageJson); diff --git a/code/lib/cli/src/automigrate/index.ts b/code/lib/cli/src/automigrate/index.ts index 1ef8ec9ce1a..3fd322e724d 100644 --- a/code/lib/cli/src/automigrate/index.ts +++ b/code/lib/cli/src/automigrate/index.ts @@ -9,7 +9,7 @@ import dedent from 'ts-dedent'; import { join } from 'path'; import { getStorybookInfo, loadMainConfig } from '@storybook/core-common'; import invariant from 'tiny-invariant'; -import { JsPackageManagerFactory, useNpmWarning } from '../js-package-manager'; +import { JsPackageManagerFactory } from '../js-package-manager'; import type { PackageManagerName } from '../js-package-manager'; import type { Fix, FixId, FixOptions, FixSummary } from './fixes'; @@ -55,7 +55,6 @@ export const automigrate = async ({ fixes: inputFixes, dryRun, yes, - useNpm, packageManager: pkgMgr, list, configDir: userSpecifiedConfigDir, @@ -86,7 +85,6 @@ export const automigrate = async ({ const { fixResults, fixSummary, preCheckFailure } = await runFixes({ fixes, - useNpm, pkgMgr, userSpecifiedConfigDir, rendererPackage, @@ -129,7 +127,6 @@ export async function runFixes({ fixes, dryRun, yes, - useNpm, pkgMgr, userSpecifiedConfigDir, rendererPackage, @@ -138,7 +135,6 @@ export async function runFixes({ fixes: Fix[]; yes?: boolean; dryRun?: boolean; - useNpm?: boolean; pkgMgr?: PackageManagerName; userSpecifiedConfigDir?: string; rendererPackage?: string; @@ -148,12 +144,6 @@ export async function runFixes({ fixResults: Record; fixSummary: FixSummary; }> { - if (useNpm) { - useNpmWarning(); - // eslint-disable-next-line no-param-reassign - pkgMgr = 'npm'; - } - const packageManager = JsPackageManagerFactory.getPackageManager({ force: pkgMgr }); const fixResults = {} as Record; diff --git a/code/lib/cli/src/automigrate/types.ts b/code/lib/cli/src/automigrate/types.ts index 1befb24bf22..5949d70db98 100644 --- a/code/lib/cli/src/automigrate/types.ts +++ b/code/lib/cli/src/automigrate/types.ts @@ -41,7 +41,6 @@ export interface FixOptions { fixes?: Fix[]; yes?: boolean; dryRun?: boolean; - useNpm?: boolean; packageManager?: PackageManagerName; configDir?: string; renderer?: string; diff --git a/code/lib/cli/src/generate.ts b/code/lib/cli/src/generate.ts index c964767da54..5ee5c9d89ab 100644 --- a/code/lib/cli/src/generate.ts +++ b/code/lib/cli/src/generate.ts @@ -48,7 +48,6 @@ command('init') .option('-f --force', 'Force add Storybook') .option('-s --skip-install', 'Skip installing deps') .option('--package-manager ', 'Force package manager for installing deps') - .option('-N --use-npm', 'Use npm to install deps (deprecated)') .option('--use-pnp', 'Enable pnp mode for Yarn 2+') .option('-p --parser ', 'jscodeshift parser') .option('-t --type ', 'Add Storybook for a specific project type') @@ -65,7 +64,6 @@ command('add ') '--package-manager ', 'Force package manager for installing dependencies' ) - .option('-N --use-npm', 'Use NPM to install dependencies (deprecated)') .option('-s --skip-postinstall', 'Skip package specific postinstall config modifications') .action((addonName: string, options: any) => add(addonName, options)); @@ -79,7 +77,6 @@ command('upgrade') '--package-manager ', 'Force package manager for installing dependencies' ) - .option('-N --use-npm', 'Use NPM to install dependencies (deprecated)') .option('-y --yes', 'Skip prompting the user') .option('-n --dry-run', 'Only check for upgrades, do not install') .option('-t --tag ', 'Upgrade to a certain npm dist-tag (e.g. next, prerelease)') @@ -167,7 +164,6 @@ command('automigrate [fixId]') .option('-y --yes', 'Skip prompting the user') .option('-n --dry-run', 'Only check for fixes, do not actually run them') .option('--package-manager ', 'Force package manager') - .option('-N --use-npm', 'Use npm as package manager (deprecated)') .option('-l --list', 'List available migrations') .option('-c, --config-dir ', 'Directory of Storybook configurations to migrate') .option('-s --skip-install', 'Skip installing deps') diff --git a/code/lib/cli/src/generators/types.ts b/code/lib/cli/src/generators/types.ts index 2f97a34df12..85ed0dbc600 100644 --- a/code/lib/cli/src/generators/types.ts +++ b/code/lib/cli/src/generators/types.ts @@ -41,7 +41,6 @@ export type Generator = ( export type CommandOptions = { packageManager: PackageManagerName; - useNpm?: boolean; usePnp?: boolean; type?: ProjectType; force?: any; diff --git a/code/lib/cli/src/initiate.ts b/code/lib/cli/src/initiate.ts index 5217bca197a..c0dbf5a3c7b 100644 --- a/code/lib/cli/src/initiate.ts +++ b/code/lib/cli/src/initiate.ts @@ -29,7 +29,7 @@ import svelteKitGenerator from './generators/SVELTEKIT'; import solidGenerator from './generators/SOLID'; import serverGenerator from './generators/SERVER'; import type { JsPackageManager } from './js-package-manager'; -import { JsPackageManagerFactory, useNpmWarning } from './js-package-manager'; +import { JsPackageManagerFactory } from './js-package-manager'; import type { NpmOptions } from './NpmOptions'; import type { CommandOptions, GeneratorOptions } from './generators/types'; import { HandledError } from './HandledError'; @@ -235,12 +235,7 @@ async function doInitiate( } | { shouldRunDev: false } > { - let { packageManager: pkgMgr } = options; - if (options.useNpm) { - useNpmWarning(); - - pkgMgr = 'npm'; - } + const { packageManager: pkgMgr } = options; const packageManager = JsPackageManagerFactory.getPackageManager({ force: pkgMgr, diff --git a/code/lib/cli/src/js-package-manager/deprecations.ts b/code/lib/cli/src/js-package-manager/deprecations.ts deleted file mode 100644 index 5883fad3a29..00000000000 --- a/code/lib/cli/src/js-package-manager/deprecations.ts +++ /dev/null @@ -1,8 +0,0 @@ -import deprecate from 'util-deprecate'; - -export const useNpmWarning = deprecate( - () => {}, - `\`--use-npm\` is deprecated and will be removed in Storybook 8.0. -Please use the \`--package-manager=npm\` option instead. -Read more at https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#cli-option---use-npm-deprecated` -); diff --git a/code/lib/cli/src/js-package-manager/index.ts b/code/lib/cli/src/js-package-manager/index.ts index d9849cbff26..f95d6f9659b 100644 --- a/code/lib/cli/src/js-package-manager/index.ts +++ b/code/lib/cli/src/js-package-manager/index.ts @@ -1,5 +1,3 @@ -export * from './deprecations'; - export * from './JsPackageManagerFactory'; export * from './JsPackageManager'; diff --git a/code/lib/cli/src/upgrade.ts b/code/lib/cli/src/upgrade.ts index aefd6bc8bc0..1938e18ba33 100644 --- a/code/lib/cli/src/upgrade.ts +++ b/code/lib/cli/src/upgrade.ts @@ -5,7 +5,7 @@ import { logger } from '@storybook/node-logger'; import { withTelemetry } from '@storybook/core-server'; import type { PackageJsonWithMaybeDeps, PackageManagerName } from './js-package-manager'; -import { getPackageDetails, JsPackageManagerFactory, useNpmWarning } from './js-package-manager'; +import { getPackageDetails, JsPackageManagerFactory } from './js-package-manager'; import { coerceSemver, commandLog } from './helpers'; import { automigrate } from './automigrate'; import { isCorePackage } from './utils'; @@ -135,7 +135,6 @@ export interface UpgradeOptions { tag: string; prerelease: boolean; skipCheck: boolean; - useNpm: boolean; packageManager: PackageManagerName; dryRun: boolean; yes: boolean; @@ -147,18 +146,12 @@ export const doUpgrade = async ({ tag, prerelease, skipCheck, - useNpm, packageManager: pkgMgr, dryRun, configDir, yes, ...options }: UpgradeOptions) => { - if (useNpm) { - useNpmWarning(); - // eslint-disable-next-line no-param-reassign - pkgMgr = 'npm'; - } const packageManager = JsPackageManagerFactory.getPackageManager({ force: pkgMgr }); const beforeVersion = await getStorybookCoreVersion(); From 85af265d3a761b762281a4fec32ae1ef4e9c1a28 Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Wed, 3 Jan 2024 10:08:09 -0300 Subject: [PATCH 101/136] Update MIGRATION.md --- MIGRATION.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/MIGRATION.md b/MIGRATION.md index c78ed3febee..76f884a0fb2 100644 --- a/MIGRATION.md +++ b/MIGRATION.md @@ -396,7 +396,7 @@ In Storybook 7, we deprecated the ability of using MDX both for documentation an Alongside with this change, the `jsxOptions` configuration was removed as it is not used anymore. -[More info here](https://storybook.js.org/docs/writing-docs/mdx#automigration). +[More info here](https://storybook.js.org/docs/migration-guide#storiesmdx-to-mdxcsf). #### Dropping support for id, name and story in Story block From 2c6afe2fff16f4dae18ffc70ffd46eca11051556 Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Wed, 3 Jan 2024 10:08:45 -0300 Subject: [PATCH 102/136] Update MIGRATION.md --- MIGRATION.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/MIGRATION.md b/MIGRATION.md index 76f884a0fb2..74c009340d0 100644 --- a/MIGRATION.md +++ b/MIGRATION.md @@ -388,7 +388,7 @@ To summarize: #### MDX is upgraded to v3 -Storybook now uses MDX3 under the hood. This change contains many improvements and a few small breaking changes that possibly won't affect you. However we recommend checking the [migration notes from MDX here](https://mdxjs.com/blog/v3/). +Storybook now uses MDX3 under the hood. This change contains many improvements and a few small breaking changes that probably won't affect you. However we recommend checking the [migration notes from MDX here](https://mdxjs.com/blog/v3/). #### Dropping support for *.stories.mdx (CSF in MDX) format From d43f6c5b5ae7905b16b4cbdbedf2e2b2a5a0039d Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Wed, 3 Jan 2024 22:41:09 +0800 Subject: [PATCH 103/136] Viewport: Fix keyboard shortcut --- code/addons/viewport/src/Tool.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/addons/viewport/src/Tool.tsx b/code/addons/viewport/src/Tool.tsx index 8a2f97c6b1a..f365fb65d04 100644 --- a/code/addons/viewport/src/Tool.tsx +++ b/code/addons/viewport/src/Tool.tsx @@ -134,7 +134,7 @@ export const ViewportTool: FC = memo( useEffect(() => { registerShortcuts(api, globals, updateGlobals, Object.keys(viewports)); - }, [viewports]); + }, [viewports, globals.viewport]); useEffect(() => { const defaultRotated = defaultOrientation === 'landscape'; From 70f85f67f35e48d235a54e6595f21f20d7fe12fc Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Wed, 3 Jan 2024 15:49:36 +0100 Subject: [PATCH 104/136] add migration notes about the removal of the shim packages --- MIGRATION.md | 18 +++++++++++++++++- 1 file changed, 17 insertions(+), 1 deletion(-) diff --git a/MIGRATION.md b/MIGRATION.md index 8d6310ddce1..6b7050f4f5f 100644 --- a/MIGRATION.md +++ b/MIGRATION.md @@ -1,7 +1,8 @@

Migration

- [From version 7.x to 8.0.0](#from-version-7x-to-800) - - [Framework specific vite plugins have to be explicitly added](#framework-specific-vite-plugins-have-to-be-explicitly-added) + - [Removed deprecated shim packages](#removed-deprecated-shim-packages) + - [Framework-specific Vite plugins have to be explicitly added](#framework-specific-vite-plugins-have-to-be-explicitly-added) - [Implicit actions can not be used during rendering (for example in the play function)](#implicit-actions-can-not-be-used-during-rendering-for-example-in-the-play-function) - [Core changes](#core-changes) - [Dropping support for Node.js 16](#dropping-support-for-nodejs-16) @@ -339,6 +340,21 @@ ## From version 7.x to 8.0.0 +### Removed deprecated shim packages + +In Storybook 7, these packages existed for backwards compatibility, but were marked as deprecated: + +- `@storybook/addons` - this package has been split into 2 packages: `@storybook/preview-api` and `@storybook/manager-api`, see more here: [New Addons API](#new-addons-api). +- `@storybook/channel-postmessage` - this package has been merged into `@storybook/channel`. +- `@storybook/channel-websocket` - this package has been merged into `@storybook/channel`. +- `@storybook/client-api` - this package has been merged into `@storybook/preview-api`. +- `@storybook/core-client` - this package has been merged into `@storybook/preview-api`. +- `@storybook/preview-web` - this package has been merged into `@storybook/preview-api`. +- `@storybook/store` - this package has been merged into `@storybook/preview-api`. +- `@storybook/api` - this package has been replaced with `@storybook/manager-api`. + +This section explains the rationale, and the required changed you might have to make: [New Addons API](#new-addons-api) + ### Framework-specific Vite plugins have to be explicitly added In Storybook 7, we would automatically add frameworks-specific Vite plugins, e.g. `@vitejs/plugin-react` if not installed. From 71b8c2fa2505f066b530ede3db8af6f20431715a Mon Sep 17 00:00:00 2001 From: wuzhuobin Date: Wed, 3 Jan 2024 22:53:39 +0800 Subject: [PATCH 105/136] Update button-story-default-export-with-component.ts.mdx Fix incorrect export doc --- .../button-story-default-export-with-component.ts.mdx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/docs/snippets/web-components/button-story-default-export-with-component.ts.mdx b/docs/snippets/web-components/button-story-default-export-with-component.ts.mdx index 805431b359c..8ddd34a485c 100644 --- a/docs/snippets/web-components/button-story-default-export-with-component.ts.mdx +++ b/docs/snippets/web-components/button-story-default-export-with-component.ts.mdx @@ -3,7 +3,8 @@ import type { Meta } from '@storybook/web-components'; -export default { +const meta: Meta = { + title: 'Button', component: 'demo-button', }; From 97ae40467cecacccf9face24edc8b93785d6845d Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Wed, 3 Jan 2024 11:56:44 -0300 Subject: [PATCH 106/136] remove legacy mdx 1 feature documentation --- MIGRATION.md | 6 ++++-- .../docs/src/plugins/mdx-plugin.types.d.ts | 1 - docs/api/main-config-features.md | 17 ---------------- docs/configure/index.md | 1 - docs/migration-guide.md | 20 ------------------- .../storybook-fallback-mdx-install.npm.js.mdx | 3 --- ...storybook-fallback-mdx-install.pnpm.js.mdx | 3 --- ...storybook-fallback-mdx-install.yarn.js.mdx | 3 --- scripts/verdaccio.yaml | 8 -------- 9 files changed, 4 insertions(+), 58 deletions(-) delete mode 100644 code/addons/docs/src/plugins/mdx-plugin.types.d.ts delete mode 100644 docs/snippets/common/storybook-fallback-mdx-install.npm.js.mdx delete mode 100644 docs/snippets/common/storybook-fallback-mdx-install.pnpm.js.mdx delete mode 100644 docs/snippets/common/storybook-fallback-mdx-install.yarn.js.mdx diff --git a/MIGRATION.md b/MIGRATION.md index 74c009340d0..2708d5e0e19 100644 --- a/MIGRATION.md +++ b/MIGRATION.md @@ -4,7 +4,7 @@ - [Implicit actions can not be used during rendering (for example in the play function)](#implicit-actions-can-not-be-used-during-rendering-for-example-in-the-play-function) - [MDX related changes](#mdx-related-changes) - [MDX is upgraded to v3](#mdx-is-upgraded-to-v3) - - [Dropping support for \*.stories.mdx (CSF in MDX) format](#dropping-support-for-storiesmdx-csf-in-mdx-format) + - [Dropping support for \*.stories.mdx (CSF in MDX) format and MDX1 support](#dropping-support-for-storiesmdx-csf-in-mdx-format-and-mdx1-support) - [Dropping support for id, name and story in Story block](#dropping-support-for-id-name-and-story-in-story-block) - [Core changes](#core-changes) - [Dropping support for Node.js 16](#dropping-support-for-nodejs-16) @@ -390,10 +390,12 @@ To summarize: Storybook now uses MDX3 under the hood. This change contains many improvements and a few small breaking changes that probably won't affect you. However we recommend checking the [migration notes from MDX here](https://mdxjs.com/blog/v3/). -#### Dropping support for *.stories.mdx (CSF in MDX) format +#### Dropping support for *.stories.mdx (CSF in MDX) format and MDX1 support In Storybook 7, we deprecated the ability of using MDX both for documentation and for defining stories in the same .stories.mdx file. It is now removed, and Storybook won't support .stories.mdx files anymore. We provide migration scripts to help you onto the new format. +If you were using the [legacy MDX1 format](#legacy-mdx1-support), you will have to remove the `legacyMdx1` main.js feature flag and the `@storybook/mdx1-csf` package. + Alongside with this change, the `jsxOptions` configuration was removed as it is not used anymore. [More info here](https://storybook.js.org/docs/migration-guide#storiesmdx-to-mdxcsf). diff --git a/code/addons/docs/src/plugins/mdx-plugin.types.d.ts b/code/addons/docs/src/plugins/mdx-plugin.types.d.ts deleted file mode 100644 index fea94f85dc2..00000000000 --- a/code/addons/docs/src/plugins/mdx-plugin.types.d.ts +++ /dev/null @@ -1 +0,0 @@ -declare module '@storybook/mdx1-csf'; diff --git a/docs/api/main-config-features.md b/docs/api/main-config-features.md index 81a80502a7b..f92ae24139a 100644 --- a/docs/api/main-config-features.md +++ b/docs/api/main-config-features.md @@ -54,23 +54,6 @@ Apply decorators from preview.js before decorators from addons or frameworks. [M -## `legacyMdx1` - -Type: `boolean` - -Enables support for MDX version 1 as a fallback. Requires [@storybook/mdx1-csf](https://github.com/storybookjs/mdx1-csf) to be installed. - - - - - - - ## `storyStoreV7` Type: `boolean` diff --git a/docs/configure/index.md b/docs/configure/index.md index ee38fd9a456..f8c904c925d 100644 --- a/docs/configure/index.md +++ b/docs/configure/index.md @@ -56,7 +56,6 @@ Additionally, you can also provide additional feature flags to your Storybook co | --------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `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/migration-guide.md b/docs/migration-guide.md index e0cf30691b0..c2a40c5968f 100644 --- a/docs/migration-guide.md +++ b/docs/migration-guide.md @@ -94,26 +94,6 @@ This shows the errors visually in your editor, which speeds things up a lot. Her ![MDX errors showing in VS Code](./assets/mdx-vs-code-extension-errors.gif) -#### MDX1 as fallback - -If, for some reason, you are unable to get MDX2 working, we’ve implemented legacy MDX1 support as a last resort. MDX1 is deprecated and opt-in, and we recommend against it unless you really need it. - -To use MDX1: - -1. Install `@storybook/mdx1-csf` as a dev dependency -2. Add the `legacyMdx1` feature flag to your `.storybook/main.js`: - - - - - - - ### storiesOf support discontinued by default If you use Storybook’s legacy `storiesOf` API, it is no longer supported by default in Storybook 7. diff --git a/docs/snippets/common/storybook-fallback-mdx-install.npm.js.mdx b/docs/snippets/common/storybook-fallback-mdx-install.npm.js.mdx deleted file mode 100644 index bb7ce17277e..00000000000 --- a/docs/snippets/common/storybook-fallback-mdx-install.npm.js.mdx +++ /dev/null @@ -1,3 +0,0 @@ -```shell -npm install @storybook/mdx1-csf --save-dev -``` diff --git a/docs/snippets/common/storybook-fallback-mdx-install.pnpm.js.mdx b/docs/snippets/common/storybook-fallback-mdx-install.pnpm.js.mdx deleted file mode 100644 index 624f84077d4..00000000000 --- a/docs/snippets/common/storybook-fallback-mdx-install.pnpm.js.mdx +++ /dev/null @@ -1,3 +0,0 @@ -```shell -pnpm add --save-dev @storybook/mdx1-csf -``` diff --git a/docs/snippets/common/storybook-fallback-mdx-install.yarn.js.mdx b/docs/snippets/common/storybook-fallback-mdx-install.yarn.js.mdx deleted file mode 100644 index 02fadab4735..00000000000 --- a/docs/snippets/common/storybook-fallback-mdx-install.yarn.js.mdx +++ /dev/null @@ -1,3 +0,0 @@ -```shell -yarn add --dev @storybook/mdx1-csf -``` diff --git a/scripts/verdaccio.yaml b/scripts/verdaccio.yaml index e0139f305f0..6ab5ce64918 100644 --- a/scripts/verdaccio.yaml +++ b/scripts/verdaccio.yaml @@ -87,14 +87,6 @@ packages: access: $all publish: $all proxy: npmjs - '@storybook/mdx1-csf': - access: $all - publish: $all - proxy: npmjs - '@storybook/mdx2-csf': - access: $all - publish: $all - proxy: npmjs '@storybook/expect': access: $all publish: $all From 303eb6377775f92cca66992b0c47dc9a6590e352 Mon Sep 17 00:00:00 2001 From: storybook-bot <32066757+storybook-bot@users.noreply.github.com> Date: Wed, 3 Jan 2024 19:44:17 +0000 Subject: [PATCH 107/136] Write changelog for 8.0.0-alpha.7 [skip ci] --- CHANGELOG.prerelease.md | 13 +++++++++++++ code/package.json | 3 ++- docs/versions/next.json | 2 +- 3 files changed, 16 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.prerelease.md b/CHANGELOG.prerelease.md index 0930b04e6a7..077e7014776 100644 --- a/CHANGELOG.prerelease.md +++ b/CHANGELOG.prerelease.md @@ -1,3 +1,16 @@ +## 8.0.0-alpha.7 + +- Addon-Docs: Upgrade to MDX3 - [#25303](https://github.com/storybookjs/storybook/pull/25303), thanks [@yannbf](https://github.com/yannbf)! +- CLI: Add Storyshots migration notice - [#25327](https://github.com/storybookjs/storybook/pull/25327), thanks [@yannbf](https://github.com/yannbf)! +- CLI: Fix regex used in upgrade command - [#25284](https://github.com/storybookjs/storybook/pull/25284), thanks [@yannbf](https://github.com/yannbf)! +- CLI: Remove --use-npm flag - [#25414](https://github.com/storybookjs/storybook/pull/25414), thanks [@yannbf](https://github.com/yannbf)! +- Core: Remove unused warnOnLegacyHierarchySeparator type - [#25416](https://github.com/storybookjs/storybook/pull/25416), thanks [@yannbf](https://github.com/yannbf)! +- Core: Remove vite plugins and drop Vite 3 support - [#25427](https://github.com/storybookjs/storybook/pull/25427), thanks [@kasperpeulen](https://github.com/kasperpeulen)! +- Maintenance: Add comment to deprecation notice in Button component - [#25411](https://github.com/storybookjs/storybook/pull/25411), thanks [@yannbf](https://github.com/yannbf)! +- UI: Fix about page layout - [#25396](https://github.com/storybookjs/storybook/pull/25396), thanks [@cdedreuille](https://github.com/cdedreuille)! +- Viewport: Store viewport, rotation in globals - [#25423](https://github.com/storybookjs/storybook/pull/25423), thanks [@shilman](https://github.com/shilman)! +- Vite: Fix Vite 5 CJS warnings - [#25005](https://github.com/storybookjs/storybook/pull/25005), thanks [@JReinhold](https://github.com/JReinhold)! + ## 8.0.0-alpha.6 - NextJS: Autoconfigure public directory for new projects - [#25279](https://github.com/storybookjs/storybook/pull/25279), thanks [@shilman](https://github.com/shilman)! diff --git a/code/package.json b/code/package.json index dfb9615ac3f..6d32eef356b 100644 --- a/code/package.json +++ b/code/package.json @@ -308,5 +308,6 @@ "Dependency Upgrades" ] ] - } + }, + "deferredNextVersion": "8.0.0-alpha.7" } diff --git a/docs/versions/next.json b/docs/versions/next.json index 9731c646282..fcd9f1cce99 100644 --- a/docs/versions/next.json +++ b/docs/versions/next.json @@ -1 +1 @@ -{"version":"8.0.0-alpha.6","info":{"plain":"- NextJS: Autoconfigure public directory for new projects - [#25279](https://github.com/storybookjs/storybook/pull/25279), thanks [@shilman](https://github.com/shilman)!\n- Vite: Fix pre-transform error in Vite 5 - [#25329](https://github.com/storybookjs/storybook/pull/25329), thanks [@yannbf](https://github.com/yannbf)!\n- Vue3: Fix pnp by making compiler-core a dependency - [#25311](https://github.com/storybookjs/storybook/pull/25311), thanks [@shilman](https://github.com/shilman)!"}} +{"version":"8.0.0-alpha.7","info":{"plain":"- Addon-Docs: Upgrade to MDX3 - [#25303](https://github.com/storybookjs/storybook/pull/25303), thanks [@yannbf](https://github.com/yannbf)!\n- CLI: Add Storyshots migration notice - [#25327](https://github.com/storybookjs/storybook/pull/25327), thanks [@yannbf](https://github.com/yannbf)!\n- CLI: Fix regex used in upgrade command - [#25284](https://github.com/storybookjs/storybook/pull/25284), thanks [@yannbf](https://github.com/yannbf)!\n- CLI: Remove --use-npm flag - [#25414](https://github.com/storybookjs/storybook/pull/25414), thanks [@yannbf](https://github.com/yannbf)!\n- Core: Remove unused warnOnLegacyHierarchySeparator type - [#25416](https://github.com/storybookjs/storybook/pull/25416), thanks [@yannbf](https://github.com/yannbf)!\n- Core: Remove vite plugins and drop Vite 3 support - [#25427](https://github.com/storybookjs/storybook/pull/25427), thanks [@kasperpeulen](https://github.com/kasperpeulen)!\n- Maintenance: Add comment to deprecation notice in Button component - [#25411](https://github.com/storybookjs/storybook/pull/25411), thanks [@yannbf](https://github.com/yannbf)!\n- UI: Fix about page layout - [#25396](https://github.com/storybookjs/storybook/pull/25396), thanks [@cdedreuille](https://github.com/cdedreuille)!\n- Viewport: Store viewport, rotation in globals - [#25423](https://github.com/storybookjs/storybook/pull/25423), thanks [@shilman](https://github.com/shilman)!\n- Vite: Fix Vite 5 CJS warnings - [#25005](https://github.com/storybookjs/storybook/pull/25005), thanks [@JReinhold](https://github.com/JReinhold)!"}} From 328712a95fe54821b10392eb122558204fc172f7 Mon Sep 17 00:00:00 2001 From: storybook-bot <32066757+storybook-bot@users.noreply.github.com> Date: Thu, 4 Jan 2024 01:19:47 +0000 Subject: [PATCH 108/136] Bump version from "8.0.0-alpha.6" to "8.0.0-alpha.7" [skip ci] --- code/addons/a11y/package.json | 2 +- code/addons/actions/package.json | 2 +- code/addons/backgrounds/package.json | 2 +- code/addons/controls/package.json | 2 +- code/addons/docs/package.json | 2 +- code/addons/essentials/package.json | 2 +- code/addons/gfm/package.json | 2 +- code/addons/highlight/package.json | 2 +- code/addons/interactions/package.json | 2 +- code/addons/jest/package.json | 2 +- code/addons/links/package.json | 2 +- code/addons/measure/package.json | 2 +- code/addons/outline/package.json | 2 +- code/addons/storysource/package.json | 2 +- code/addons/themes/package.json | 2 +- code/addons/toolbars/package.json | 2 +- code/addons/viewport/package.json | 2 +- code/builders/builder-manager/package.json | 2 +- code/builders/builder-vite/package.json | 2 +- code/builders/builder-webpack5/package.json | 2 +- code/frameworks/angular/package.json | 2 +- code/frameworks/ember/package.json | 2 +- code/frameworks/html-vite/package.json | 2 +- code/frameworks/html-webpack5/package.json | 2 +- code/frameworks/nextjs/package.json | 2 +- code/frameworks/preact-vite/package.json | 2 +- code/frameworks/preact-webpack5/package.json | 2 +- code/frameworks/react-vite/package.json | 2 +- code/frameworks/react-webpack5/package.json | 2 +- code/frameworks/server-webpack5/package.json | 2 +- code/frameworks/svelte-vite/package.json | 2 +- code/frameworks/svelte-webpack5/package.json | 2 +- code/frameworks/sveltekit/package.json | 2 +- code/frameworks/vue3-vite/package.json | 2 +- code/frameworks/vue3-webpack5/package.json | 2 +- .../web-components-vite/package.json | 2 +- .../web-components-webpack5/package.json | 2 +- code/lib/channels/package.json | 2 +- code/lib/cli-sb/package.json | 2 +- code/lib/cli-storybook/package.json | 2 +- code/lib/cli/package.json | 2 +- code/lib/cli/src/versions.ts | 160 +++++++++--------- code/lib/client-logger/package.json | 2 +- code/lib/codemod/package.json | 2 +- code/lib/core-common/package.json | 2 +- code/lib/core-events/package.json | 2 +- code/lib/core-server/package.json | 2 +- code/lib/core-webpack/package.json | 2 +- code/lib/csf-plugin/package.json | 2 +- code/lib/csf-tools/package.json | 2 +- code/lib/docs-tools/package.json | 2 +- code/lib/instrumenter/package.json | 2 +- code/lib/manager-api/package.json | 2 +- code/lib/manager-api/src/version.ts | 2 +- code/lib/node-logger/package.json | 2 +- code/lib/preview-api/package.json | 2 +- code/lib/preview/package.json | 2 +- code/lib/react-dom-shim/package.json | 2 +- code/lib/router/package.json | 2 +- code/lib/source-loader/package.json | 2 +- code/lib/telemetry/package.json | 2 +- code/lib/test/package.json | 2 +- code/lib/theming/package.json | 2 +- code/lib/types/package.json | 2 +- code/package.json | 5 +- code/presets/create-react-app/package.json | 2 +- code/presets/html-webpack/package.json | 2 +- code/presets/preact-webpack/package.json | 2 +- code/presets/react-webpack/package.json | 2 +- code/presets/server-webpack/package.json | 2 +- code/presets/svelte-webpack/package.json | 2 +- code/presets/vue3-webpack/package.json | 2 +- .../web-components-webpack/package.json | 2 +- code/renderers/html/package.json | 2 +- code/renderers/preact/package.json | 2 +- code/renderers/react/package.json | 2 +- code/renderers/server/package.json | 2 +- code/renderers/svelte/package.json | 2 +- code/renderers/vue3/package.json | 2 +- code/renderers/web-components/package.json | 2 +- code/ui/blocks/package.json | 2 +- code/ui/components/package.json | 2 +- code/ui/manager/package.json | 2 +- 83 files changed, 163 insertions(+), 164 deletions(-) diff --git a/code/addons/a11y/package.json b/code/addons/a11y/package.json index 725c72bc82d..0cc3f893fe2 100644 --- a/code/addons/a11y/package.json +++ b/code/addons/a11y/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-a11y", - "version": "8.0.0-alpha.6", + "version": "8.0.0-alpha.7", "description": "Test component compliance with web accessibility standards", "keywords": [ "a11y", diff --git a/code/addons/actions/package.json b/code/addons/actions/package.json index ec21bedcb88..4fd60be0ab0 100644 --- a/code/addons/actions/package.json +++ b/code/addons/actions/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-actions", - "version": "8.0.0-alpha.6", + "version": "8.0.0-alpha.7", "description": "Get UI feedback when an action is performed on an interactive element", "keywords": [ "storybook", diff --git a/code/addons/backgrounds/package.json b/code/addons/backgrounds/package.json index 7614d3505fb..57acc688799 100644 --- a/code/addons/backgrounds/package.json +++ b/code/addons/backgrounds/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-backgrounds", - "version": "8.0.0-alpha.6", + "version": "8.0.0-alpha.7", "description": "Switch backgrounds to view components in different settings", "keywords": [ "addon", diff --git a/code/addons/controls/package.json b/code/addons/controls/package.json index a3610a0c2da..642a2da8c85 100644 --- a/code/addons/controls/package.json +++ b/code/addons/controls/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-controls", - "version": "8.0.0-alpha.6", + "version": "8.0.0-alpha.7", "description": "Interact with component inputs dynamically in the Storybook UI", "keywords": [ "addon", diff --git a/code/addons/docs/package.json b/code/addons/docs/package.json index bfe3168c5f8..7fec0d5520e 100644 --- a/code/addons/docs/package.json +++ b/code/addons/docs/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-docs", - "version": "8.0.0-alpha.6", + "version": "8.0.0-alpha.7", "description": "Document component usage and properties in Markdown", "keywords": [ "addon", diff --git a/code/addons/essentials/package.json b/code/addons/essentials/package.json index 8b312611663..2f48b5a214d 100644 --- a/code/addons/essentials/package.json +++ b/code/addons/essentials/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-essentials", - "version": "8.0.0-alpha.6", + "version": "8.0.0-alpha.7", "description": "Curated addons to bring out the best of Storybook", "keywords": [ "addon", diff --git a/code/addons/gfm/package.json b/code/addons/gfm/package.json index 8d00e6d3332..ddb374be238 100644 --- a/code/addons/gfm/package.json +++ b/code/addons/gfm/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-mdx-gfm", - "version": "8.0.0-alpha.6", + "version": "8.0.0-alpha.7", "description": "GitHub Flavored Markdown in Storybook", "keywords": [ "addon", diff --git a/code/addons/highlight/package.json b/code/addons/highlight/package.json index 9073afc0b09..daec5b70435 100644 --- a/code/addons/highlight/package.json +++ b/code/addons/highlight/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-highlight", - "version": "8.0.0-alpha.6", + "version": "8.0.0-alpha.7", "description": "Highlight DOM nodes within your stories", "keywords": [ "storybook-addons", diff --git a/code/addons/interactions/package.json b/code/addons/interactions/package.json index 9859da92e83..cb50480fb19 100644 --- a/code/addons/interactions/package.json +++ b/code/addons/interactions/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-interactions", - "version": "8.0.0-alpha.6", + "version": "8.0.0-alpha.7", "description": "Automate, test and debug user interactions", "keywords": [ "storybook-addons", diff --git a/code/addons/jest/package.json b/code/addons/jest/package.json index bf1d92d1308..0ec3ceacc94 100644 --- a/code/addons/jest/package.json +++ b/code/addons/jest/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-jest", - "version": "8.0.0-alpha.6", + "version": "8.0.0-alpha.7", "description": "React storybook addon that show component jest report", "keywords": [ "addon", diff --git a/code/addons/links/package.json b/code/addons/links/package.json index 284e9842609..aaf4354d46d 100644 --- a/code/addons/links/package.json +++ b/code/addons/links/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-links", - "version": "8.0.0-alpha.6", + "version": "8.0.0-alpha.7", "description": "Link stories together to build demos and prototypes with your UI components", "keywords": [ "addon", diff --git a/code/addons/measure/package.json b/code/addons/measure/package.json index 4a97a31cb95..c22e7d1de6e 100644 --- a/code/addons/measure/package.json +++ b/code/addons/measure/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-measure", - "version": "8.0.0-alpha.6", + "version": "8.0.0-alpha.7", "description": "Inspect layouts by visualizing the box model", "keywords": [ "storybook-addons", diff --git a/code/addons/outline/package.json b/code/addons/outline/package.json index 14693dea3e3..e3d4ff62edc 100644 --- a/code/addons/outline/package.json +++ b/code/addons/outline/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-outline", - "version": "8.0.0-alpha.6", + "version": "8.0.0-alpha.7", "description": "Outline all elements with CSS to help with layout placement and alignment", "keywords": [ "storybook-addons", diff --git a/code/addons/storysource/package.json b/code/addons/storysource/package.json index 539fa9b3e7d..19e66c086f5 100644 --- a/code/addons/storysource/package.json +++ b/code/addons/storysource/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-storysource", - "version": "8.0.0-alpha.6", + "version": "8.0.0-alpha.7", "description": "View a story’s source code to see how it works and paste into your app", "keywords": [ "addon", diff --git a/code/addons/themes/package.json b/code/addons/themes/package.json index cb3966ae74d..520b8817d1a 100644 --- a/code/addons/themes/package.json +++ b/code/addons/themes/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-themes", - "version": "8.0.0-alpha.6", + "version": "8.0.0-alpha.7", "description": "Switch between multiple themes for you components in Storybook", "keywords": [ "css", diff --git a/code/addons/toolbars/package.json b/code/addons/toolbars/package.json index 8b428ade8fe..d16d850f086 100644 --- a/code/addons/toolbars/package.json +++ b/code/addons/toolbars/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-toolbars", - "version": "8.0.0-alpha.6", + "version": "8.0.0-alpha.7", "description": "Create your own toolbar items that control story rendering", "keywords": [ "addon", diff --git a/code/addons/viewport/package.json b/code/addons/viewport/package.json index 03dcd8dc74a..340f9bba270 100644 --- a/code/addons/viewport/package.json +++ b/code/addons/viewport/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-viewport", - "version": "8.0.0-alpha.6", + "version": "8.0.0-alpha.7", "description": "Build responsive components by adjusting Storybook’s viewport size and orientation", "keywords": [ "addon", diff --git a/code/builders/builder-manager/package.json b/code/builders/builder-manager/package.json index f7b6e719e8e..b5d28ac2f81 100644 --- a/code/builders/builder-manager/package.json +++ b/code/builders/builder-manager/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/builder-manager", - "version": "8.0.0-alpha.6", + "version": "8.0.0-alpha.7", "description": "Storybook manager builder", "keywords": [ "storybook" diff --git a/code/builders/builder-vite/package.json b/code/builders/builder-vite/package.json index 59bb5dc7e3f..a4fb5f8d101 100644 --- a/code/builders/builder-vite/package.json +++ b/code/builders/builder-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/builder-vite", - "version": "8.0.0-alpha.6", + "version": "8.0.0-alpha.7", "description": "A plugin to run and build Storybooks with Vite", "homepage": "https://github.com/storybookjs/storybook/tree/next/code/builders/builder-vite/#readme", "bugs": { diff --git a/code/builders/builder-webpack5/package.json b/code/builders/builder-webpack5/package.json index 5e90605cbfb..5a884a32031 100644 --- a/code/builders/builder-webpack5/package.json +++ b/code/builders/builder-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/builder-webpack5", - "version": "8.0.0-alpha.6", + "version": "8.0.0-alpha.7", "description": "Storybook framework-agnostic API", "keywords": [ "storybook" diff --git a/code/frameworks/angular/package.json b/code/frameworks/angular/package.json index 291b33013d2..e9bc67d1d44 100644 --- a/code/frameworks/angular/package.json +++ b/code/frameworks/angular/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/angular", - "version": "8.0.0-alpha.6", + "version": "8.0.0-alpha.7", "description": "Storybook for Angular: Develop Angular components in isolation with hot reloading.", "keywords": [ "storybook", diff --git a/code/frameworks/ember/package.json b/code/frameworks/ember/package.json index 5362cd5f776..2fca03fb9f3 100644 --- a/code/frameworks/ember/package.json +++ b/code/frameworks/ember/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/ember", - "version": "8.0.0-alpha.6", + "version": "8.0.0-alpha.7", "description": "Storybook for Ember: Develop Ember Component in isolation with Hot Reloading.", "homepage": "https://github.com/storybookjs/storybook/tree/next/code/frameworks/ember", "bugs": { diff --git a/code/frameworks/html-vite/package.json b/code/frameworks/html-vite/package.json index 49d2b2cc8aa..96b5f549e39 100644 --- a/code/frameworks/html-vite/package.json +++ b/code/frameworks/html-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/html-vite", - "version": "8.0.0-alpha.6", + "version": "8.0.0-alpha.7", "description": "Storybook for HTML and Vite: Develop HTML in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/html-webpack5/package.json b/code/frameworks/html-webpack5/package.json index ef76aa3b91a..8317873fcfa 100644 --- a/code/frameworks/html-webpack5/package.json +++ b/code/frameworks/html-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/html-webpack5", - "version": "8.0.0-alpha.6", + "version": "8.0.0-alpha.7", "description": "Storybook for HTML: View HTML snippets in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/nextjs/package.json b/code/frameworks/nextjs/package.json index fed4116ab96..8386f63952a 100644 --- a/code/frameworks/nextjs/package.json +++ b/code/frameworks/nextjs/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/nextjs", - "version": "8.0.0-alpha.6", + "version": "8.0.0-alpha.7", "description": "Storybook for Next.js", "keywords": [ "storybook", diff --git a/code/frameworks/preact-vite/package.json b/code/frameworks/preact-vite/package.json index 96c6e744dcf..5bb53bb5b12 100644 --- a/code/frameworks/preact-vite/package.json +++ b/code/frameworks/preact-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preact-vite", - "version": "8.0.0-alpha.6", + "version": "8.0.0-alpha.7", "description": "Storybook for Preact and Vite: Develop Preact components in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/preact-webpack5/package.json b/code/frameworks/preact-webpack5/package.json index 7a34d38a110..69457f02adb 100644 --- a/code/frameworks/preact-webpack5/package.json +++ b/code/frameworks/preact-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preact-webpack5", - "version": "8.0.0-alpha.6", + "version": "8.0.0-alpha.7", "description": "Storybook for Preact: Develop Preact Component in isolation.", "keywords": [ "storybook" diff --git a/code/frameworks/react-vite/package.json b/code/frameworks/react-vite/package.json index a5c9895676a..5d1d517be0d 100644 --- a/code/frameworks/react-vite/package.json +++ b/code/frameworks/react-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/react-vite", - "version": "8.0.0-alpha.6", + "version": "8.0.0-alpha.7", "description": "Storybook for React and Vite: Develop React components in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/react-webpack5/package.json b/code/frameworks/react-webpack5/package.json index 489f3624734..de1bf261cbd 100644 --- a/code/frameworks/react-webpack5/package.json +++ b/code/frameworks/react-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/react-webpack5", - "version": "8.0.0-alpha.6", + "version": "8.0.0-alpha.7", "description": "Storybook for React: Develop React Component in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/server-webpack5/package.json b/code/frameworks/server-webpack5/package.json index 0151eb0a0e3..73ecd20a495 100644 --- a/code/frameworks/server-webpack5/package.json +++ b/code/frameworks/server-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/server-webpack5", - "version": "8.0.0-alpha.6", + "version": "8.0.0-alpha.7", "description": "Storybook for Server: View HTML snippets from a server in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/svelte-vite/package.json b/code/frameworks/svelte-vite/package.json index 654cca9a9e0..d7a40cefbda 100644 --- a/code/frameworks/svelte-vite/package.json +++ b/code/frameworks/svelte-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/svelte-vite", - "version": "8.0.0-alpha.6", + "version": "8.0.0-alpha.7", "description": "Storybook for Svelte and Vite: Develop Svelte components in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/svelte-webpack5/package.json b/code/frameworks/svelte-webpack5/package.json index f65d8894104..516ad8caa70 100644 --- a/code/frameworks/svelte-webpack5/package.json +++ b/code/frameworks/svelte-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/svelte-webpack5", - "version": "8.0.0-alpha.6", + "version": "8.0.0-alpha.7", "description": "Storybook for Svelte: Develop Svelte Component in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/sveltekit/package.json b/code/frameworks/sveltekit/package.json index be2a606e2aa..cb6d6723464 100644 --- a/code/frameworks/sveltekit/package.json +++ b/code/frameworks/sveltekit/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/sveltekit", - "version": "8.0.0-alpha.6", + "version": "8.0.0-alpha.7", "description": "Storybook for SvelteKit", "keywords": [ "storybook", diff --git a/code/frameworks/vue3-vite/package.json b/code/frameworks/vue3-vite/package.json index 28eeb77722e..30503127648 100644 --- a/code/frameworks/vue3-vite/package.json +++ b/code/frameworks/vue3-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/vue3-vite", - "version": "8.0.0-alpha.6", + "version": "8.0.0-alpha.7", "description": "Storybook for Vue3 and Vite: Develop Vue3 components in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/vue3-webpack5/package.json b/code/frameworks/vue3-webpack5/package.json index 5a12541c048..9b975613769 100644 --- a/code/frameworks/vue3-webpack5/package.json +++ b/code/frameworks/vue3-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/vue3-webpack5", - "version": "8.0.0-alpha.6", + "version": "8.0.0-alpha.7", "description": "Storybook for Vue 3: Develop Vue 3 Components in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/web-components-vite/package.json b/code/frameworks/web-components-vite/package.json index 285104c64a4..5c4a0d6832f 100644 --- a/code/frameworks/web-components-vite/package.json +++ b/code/frameworks/web-components-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/web-components-vite", - "version": "8.0.0-alpha.6", + "version": "8.0.0-alpha.7", "description": "Storybook for web-components and Vite: Develop Web Components in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/web-components-webpack5/package.json b/code/frameworks/web-components-webpack5/package.json index a6b8b5b5b8a..fbd4b057071 100644 --- a/code/frameworks/web-components-webpack5/package.json +++ b/code/frameworks/web-components-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/web-components-webpack5", - "version": "8.0.0-alpha.6", + "version": "8.0.0-alpha.7", "description": "Storybook for web-components: View web components snippets in isolation with Hot Reloading.", "keywords": [ "lit", diff --git a/code/lib/channels/package.json b/code/lib/channels/package.json index 7130740c516..8bce7271329 100644 --- a/code/lib/channels/package.json +++ b/code/lib/channels/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/channels", - "version": "8.0.0-alpha.6", + "version": "8.0.0-alpha.7", "description": "", "keywords": [ "storybook" diff --git a/code/lib/cli-sb/package.json b/code/lib/cli-sb/package.json index a9fbaee5a6b..31291d5c217 100644 --- a/code/lib/cli-sb/package.json +++ b/code/lib/cli-sb/package.json @@ -1,6 +1,6 @@ { "name": "sb", - "version": "8.0.0-alpha.6", + "version": "8.0.0-alpha.7", "description": "Storybook CLI", "keywords": [ "storybook" diff --git a/code/lib/cli-storybook/package.json b/code/lib/cli-storybook/package.json index 72fb870cdc3..70238bee936 100644 --- a/code/lib/cli-storybook/package.json +++ b/code/lib/cli-storybook/package.json @@ -1,6 +1,6 @@ { "name": "storybook", - "version": "8.0.0-alpha.6", + "version": "8.0.0-alpha.7", "description": "Storybook CLI", "keywords": [ "storybook" diff --git a/code/lib/cli/package.json b/code/lib/cli/package.json index c2d18e181ca..4eeef07be2f 100644 --- a/code/lib/cli/package.json +++ b/code/lib/cli/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/cli", - "version": "8.0.0-alpha.6", + "version": "8.0.0-alpha.7", "description": "Storybook's CLI - install, dev, build, upgrade, and more", "keywords": [ "cli", diff --git a/code/lib/cli/src/versions.ts b/code/lib/cli/src/versions.ts index b253d740701..8341aa2952d 100644 --- a/code/lib/cli/src/versions.ts +++ b/code/lib/cli/src/versions.ts @@ -1,83 +1,83 @@ // auto generated file, do not edit export default { - '@storybook/addon-a11y': '8.0.0-alpha.6', - '@storybook/addon-actions': '8.0.0-alpha.6', - '@storybook/addon-backgrounds': '8.0.0-alpha.6', - '@storybook/addon-controls': '8.0.0-alpha.6', - '@storybook/addon-docs': '8.0.0-alpha.6', - '@storybook/addon-essentials': '8.0.0-alpha.6', - '@storybook/addon-highlight': '8.0.0-alpha.6', - '@storybook/addon-interactions': '8.0.0-alpha.6', - '@storybook/addon-jest': '8.0.0-alpha.6', - '@storybook/addon-links': '8.0.0-alpha.6', - '@storybook/addon-mdx-gfm': '8.0.0-alpha.6', - '@storybook/addon-measure': '8.0.0-alpha.6', - '@storybook/addon-outline': '8.0.0-alpha.6', - '@storybook/addon-storysource': '8.0.0-alpha.6', - '@storybook/addon-themes': '8.0.0-alpha.6', - '@storybook/addon-toolbars': '8.0.0-alpha.6', - '@storybook/addon-viewport': '8.0.0-alpha.6', - '@storybook/angular': '8.0.0-alpha.6', - '@storybook/blocks': '8.0.0-alpha.6', - '@storybook/builder-manager': '8.0.0-alpha.6', - '@storybook/builder-vite': '8.0.0-alpha.6', - '@storybook/builder-webpack5': '8.0.0-alpha.6', - '@storybook/channels': '8.0.0-alpha.6', - '@storybook/cli': '8.0.0-alpha.6', - '@storybook/client-logger': '8.0.0-alpha.6', - '@storybook/codemod': '8.0.0-alpha.6', - '@storybook/components': '8.0.0-alpha.6', - '@storybook/core-common': '8.0.0-alpha.6', - '@storybook/core-events': '8.0.0-alpha.6', - '@storybook/core-server': '8.0.0-alpha.6', - '@storybook/core-webpack': '8.0.0-alpha.6', - '@storybook/csf-plugin': '8.0.0-alpha.6', - '@storybook/csf-tools': '8.0.0-alpha.6', - '@storybook/docs-tools': '8.0.0-alpha.6', - '@storybook/ember': '8.0.0-alpha.6', - '@storybook/html': '8.0.0-alpha.6', - '@storybook/html-vite': '8.0.0-alpha.6', - '@storybook/html-webpack5': '8.0.0-alpha.6', - '@storybook/instrumenter': '8.0.0-alpha.6', - '@storybook/manager': '8.0.0-alpha.6', - '@storybook/manager-api': '8.0.0-alpha.6', - '@storybook/nextjs': '8.0.0-alpha.6', - '@storybook/node-logger': '8.0.0-alpha.6', - '@storybook/preact': '8.0.0-alpha.6', - '@storybook/preact-vite': '8.0.0-alpha.6', - '@storybook/preact-webpack5': '8.0.0-alpha.6', - '@storybook/preset-create-react-app': '8.0.0-alpha.6', - '@storybook/preset-html-webpack': '8.0.0-alpha.6', - '@storybook/preset-preact-webpack': '8.0.0-alpha.6', - '@storybook/preset-react-webpack': '8.0.0-alpha.6', - '@storybook/preset-server-webpack': '8.0.0-alpha.6', - '@storybook/preset-svelte-webpack': '8.0.0-alpha.6', - '@storybook/preset-vue3-webpack': '8.0.0-alpha.6', - '@storybook/preset-web-components-webpack': '8.0.0-alpha.6', - '@storybook/preview': '8.0.0-alpha.6', - '@storybook/preview-api': '8.0.0-alpha.6', - '@storybook/react': '8.0.0-alpha.6', - '@storybook/react-dom-shim': '8.0.0-alpha.6', - '@storybook/react-vite': '8.0.0-alpha.6', - '@storybook/react-webpack5': '8.0.0-alpha.6', - '@storybook/router': '8.0.0-alpha.6', - '@storybook/server': '8.0.0-alpha.6', - '@storybook/server-webpack5': '8.0.0-alpha.6', - '@storybook/source-loader': '8.0.0-alpha.6', - '@storybook/svelte': '8.0.0-alpha.6', - '@storybook/svelte-vite': '8.0.0-alpha.6', - '@storybook/svelte-webpack5': '8.0.0-alpha.6', - '@storybook/sveltekit': '8.0.0-alpha.6', - '@storybook/telemetry': '8.0.0-alpha.6', - '@storybook/test': '8.0.0-alpha.6', - '@storybook/theming': '8.0.0-alpha.6', - '@storybook/types': '8.0.0-alpha.6', - '@storybook/vue3': '8.0.0-alpha.6', - '@storybook/vue3-vite': '8.0.0-alpha.6', - '@storybook/vue3-webpack5': '8.0.0-alpha.6', - '@storybook/web-components': '8.0.0-alpha.6', - '@storybook/web-components-vite': '8.0.0-alpha.6', - '@storybook/web-components-webpack5': '8.0.0-alpha.6', - sb: '8.0.0-alpha.6', - storybook: '8.0.0-alpha.6', + '@storybook/addon-a11y': '8.0.0-alpha.7', + '@storybook/addon-actions': '8.0.0-alpha.7', + '@storybook/addon-backgrounds': '8.0.0-alpha.7', + '@storybook/addon-controls': '8.0.0-alpha.7', + '@storybook/addon-docs': '8.0.0-alpha.7', + '@storybook/addon-essentials': '8.0.0-alpha.7', + '@storybook/addon-highlight': '8.0.0-alpha.7', + '@storybook/addon-interactions': '8.0.0-alpha.7', + '@storybook/addon-jest': '8.0.0-alpha.7', + '@storybook/addon-links': '8.0.0-alpha.7', + '@storybook/addon-mdx-gfm': '8.0.0-alpha.7', + '@storybook/addon-measure': '8.0.0-alpha.7', + '@storybook/addon-outline': '8.0.0-alpha.7', + '@storybook/addon-storysource': '8.0.0-alpha.7', + '@storybook/addon-themes': '8.0.0-alpha.7', + '@storybook/addon-toolbars': '8.0.0-alpha.7', + '@storybook/addon-viewport': '8.0.0-alpha.7', + '@storybook/angular': '8.0.0-alpha.7', + '@storybook/blocks': '8.0.0-alpha.7', + '@storybook/builder-manager': '8.0.0-alpha.7', + '@storybook/builder-vite': '8.0.0-alpha.7', + '@storybook/builder-webpack5': '8.0.0-alpha.7', + '@storybook/channels': '8.0.0-alpha.7', + '@storybook/cli': '8.0.0-alpha.7', + '@storybook/client-logger': '8.0.0-alpha.7', + '@storybook/codemod': '8.0.0-alpha.7', + '@storybook/components': '8.0.0-alpha.7', + '@storybook/core-common': '8.0.0-alpha.7', + '@storybook/core-events': '8.0.0-alpha.7', + '@storybook/core-server': '8.0.0-alpha.7', + '@storybook/core-webpack': '8.0.0-alpha.7', + '@storybook/csf-plugin': '8.0.0-alpha.7', + '@storybook/csf-tools': '8.0.0-alpha.7', + '@storybook/docs-tools': '8.0.0-alpha.7', + '@storybook/ember': '8.0.0-alpha.7', + '@storybook/html': '8.0.0-alpha.7', + '@storybook/html-vite': '8.0.0-alpha.7', + '@storybook/html-webpack5': '8.0.0-alpha.7', + '@storybook/instrumenter': '8.0.0-alpha.7', + '@storybook/manager': '8.0.0-alpha.7', + '@storybook/manager-api': '8.0.0-alpha.7', + '@storybook/nextjs': '8.0.0-alpha.7', + '@storybook/node-logger': '8.0.0-alpha.7', + '@storybook/preact': '8.0.0-alpha.7', + '@storybook/preact-vite': '8.0.0-alpha.7', + '@storybook/preact-webpack5': '8.0.0-alpha.7', + '@storybook/preset-create-react-app': '8.0.0-alpha.7', + '@storybook/preset-html-webpack': '8.0.0-alpha.7', + '@storybook/preset-preact-webpack': '8.0.0-alpha.7', + '@storybook/preset-react-webpack': '8.0.0-alpha.7', + '@storybook/preset-server-webpack': '8.0.0-alpha.7', + '@storybook/preset-svelte-webpack': '8.0.0-alpha.7', + '@storybook/preset-vue3-webpack': '8.0.0-alpha.7', + '@storybook/preset-web-components-webpack': '8.0.0-alpha.7', + '@storybook/preview': '8.0.0-alpha.7', + '@storybook/preview-api': '8.0.0-alpha.7', + '@storybook/react': '8.0.0-alpha.7', + '@storybook/react-dom-shim': '8.0.0-alpha.7', + '@storybook/react-vite': '8.0.0-alpha.7', + '@storybook/react-webpack5': '8.0.0-alpha.7', + '@storybook/router': '8.0.0-alpha.7', + '@storybook/server': '8.0.0-alpha.7', + '@storybook/server-webpack5': '8.0.0-alpha.7', + '@storybook/source-loader': '8.0.0-alpha.7', + '@storybook/svelte': '8.0.0-alpha.7', + '@storybook/svelte-vite': '8.0.0-alpha.7', + '@storybook/svelte-webpack5': '8.0.0-alpha.7', + '@storybook/sveltekit': '8.0.0-alpha.7', + '@storybook/telemetry': '8.0.0-alpha.7', + '@storybook/test': '8.0.0-alpha.7', + '@storybook/theming': '8.0.0-alpha.7', + '@storybook/types': '8.0.0-alpha.7', + '@storybook/vue3': '8.0.0-alpha.7', + '@storybook/vue3-vite': '8.0.0-alpha.7', + '@storybook/vue3-webpack5': '8.0.0-alpha.7', + '@storybook/web-components': '8.0.0-alpha.7', + '@storybook/web-components-vite': '8.0.0-alpha.7', + '@storybook/web-components-webpack5': '8.0.0-alpha.7', + sb: '8.0.0-alpha.7', + storybook: '8.0.0-alpha.7', }; diff --git a/code/lib/client-logger/package.json b/code/lib/client-logger/package.json index e3a3c035649..7e756ad1c06 100644 --- a/code/lib/client-logger/package.json +++ b/code/lib/client-logger/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/client-logger", - "version": "8.0.0-alpha.6", + "version": "8.0.0-alpha.7", "description": "", "keywords": [ "storybook" diff --git a/code/lib/codemod/package.json b/code/lib/codemod/package.json index 1a412737a35..88c83896047 100644 --- a/code/lib/codemod/package.json +++ b/code/lib/codemod/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/codemod", - "version": "8.0.0-alpha.6", + "version": "8.0.0-alpha.7", "description": "A collection of codemod scripts written with JSCodeshift", "keywords": [ "storybook" diff --git a/code/lib/core-common/package.json b/code/lib/core-common/package.json index 9736a95f255..8e35a8aff93 100644 --- a/code/lib/core-common/package.json +++ b/code/lib/core-common/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/core-common", - "version": "8.0.0-alpha.6", + "version": "8.0.0-alpha.7", "description": "Storybook framework-agnostic API", "keywords": [ "storybook" diff --git a/code/lib/core-events/package.json b/code/lib/core-events/package.json index c763c8cb39f..7a55c13f114 100644 --- a/code/lib/core-events/package.json +++ b/code/lib/core-events/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/core-events", - "version": "8.0.0-alpha.6", + "version": "8.0.0-alpha.7", "description": "Event names used in storybook core", "keywords": [ "storybook" diff --git a/code/lib/core-server/package.json b/code/lib/core-server/package.json index af46533e121..94d8dc73207 100644 --- a/code/lib/core-server/package.json +++ b/code/lib/core-server/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/core-server", - "version": "8.0.0-alpha.6", + "version": "8.0.0-alpha.7", "description": "Storybook framework-agnostic API", "keywords": [ "storybook" diff --git a/code/lib/core-webpack/package.json b/code/lib/core-webpack/package.json index b8f47fedee1..2e78d2be65c 100644 --- a/code/lib/core-webpack/package.json +++ b/code/lib/core-webpack/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/core-webpack", - "version": "8.0.0-alpha.6", + "version": "8.0.0-alpha.7", "description": "Storybook framework-agnostic API", "keywords": [ "storybook" diff --git a/code/lib/csf-plugin/package.json b/code/lib/csf-plugin/package.json index f80ddeb250c..18cdd0b0f8c 100644 --- a/code/lib/csf-plugin/package.json +++ b/code/lib/csf-plugin/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/csf-plugin", - "version": "8.0.0-alpha.6", + "version": "8.0.0-alpha.7", "description": "Enrich CSF files via static analysis", "keywords": [ "storybook" diff --git a/code/lib/csf-tools/package.json b/code/lib/csf-tools/package.json index be49894c142..a60526888b3 100644 --- a/code/lib/csf-tools/package.json +++ b/code/lib/csf-tools/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/csf-tools", - "version": "8.0.0-alpha.6", + "version": "8.0.0-alpha.7", "description": "Parse and manipulate CSF and Storybook config files", "keywords": [ "storybook" diff --git a/code/lib/docs-tools/package.json b/code/lib/docs-tools/package.json index 8dd6de9587a..e386f975f9a 100644 --- a/code/lib/docs-tools/package.json +++ b/code/lib/docs-tools/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/docs-tools", - "version": "8.0.0-alpha.6", + "version": "8.0.0-alpha.7", "description": "Shared utility functions for frameworks to implement docs", "keywords": [ "storybook" diff --git a/code/lib/instrumenter/package.json b/code/lib/instrumenter/package.json index 4d861082993..b4a997503d0 100644 --- a/code/lib/instrumenter/package.json +++ b/code/lib/instrumenter/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/instrumenter", - "version": "8.0.0-alpha.6", + "version": "8.0.0-alpha.7", "description": "", "keywords": [ "storybook" diff --git a/code/lib/manager-api/package.json b/code/lib/manager-api/package.json index 7e39bfd44a6..5bb850cf1c8 100644 --- a/code/lib/manager-api/package.json +++ b/code/lib/manager-api/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/manager-api", - "version": "8.0.0-alpha.6", + "version": "8.0.0-alpha.7", "description": "Core Storybook Manager API & Context", "keywords": [ "storybook" diff --git a/code/lib/manager-api/src/version.ts b/code/lib/manager-api/src/version.ts index 6b9c443ce79..95cfa4d9848 100644 --- a/code/lib/manager-api/src/version.ts +++ b/code/lib/manager-api/src/version.ts @@ -1 +1 @@ -export const version = '8.0.0-alpha.6'; +export const version = '8.0.0-alpha.7'; diff --git a/code/lib/node-logger/package.json b/code/lib/node-logger/package.json index 9665e7393c8..a7072d0eac0 100644 --- a/code/lib/node-logger/package.json +++ b/code/lib/node-logger/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/node-logger", - "version": "8.0.0-alpha.6", + "version": "8.0.0-alpha.7", "description": "", "keywords": [ "storybook" diff --git a/code/lib/preview-api/package.json b/code/lib/preview-api/package.json index ea03c87e717..9427f98ad86 100644 --- a/code/lib/preview-api/package.json +++ b/code/lib/preview-api/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preview-api", - "version": "8.0.0-alpha.6", + "version": "8.0.0-alpha.7", "description": "", "keywords": [ "storybook" diff --git a/code/lib/preview/package.json b/code/lib/preview/package.json index 7e3ec1d0e2e..4ffacc49c87 100644 --- a/code/lib/preview/package.json +++ b/code/lib/preview/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preview", - "version": "8.0.0-alpha.6", + "version": "8.0.0-alpha.7", "description": "", "keywords": [ "storybook" diff --git a/code/lib/react-dom-shim/package.json b/code/lib/react-dom-shim/package.json index 90c2bf75025..482a69d83c1 100644 --- a/code/lib/react-dom-shim/package.json +++ b/code/lib/react-dom-shim/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/react-dom-shim", - "version": "8.0.0-alpha.6", + "version": "8.0.0-alpha.7", "description": "", "keywords": [ "storybook" diff --git a/code/lib/router/package.json b/code/lib/router/package.json index 1757592b217..8b1279d46ff 100644 --- a/code/lib/router/package.json +++ b/code/lib/router/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/router", - "version": "8.0.0-alpha.6", + "version": "8.0.0-alpha.7", "description": "Core Storybook Router", "keywords": [ "storybook" diff --git a/code/lib/source-loader/package.json b/code/lib/source-loader/package.json index 3f30aa7536a..77ea29a9690 100644 --- a/code/lib/source-loader/package.json +++ b/code/lib/source-loader/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/source-loader", - "version": "8.0.0-alpha.6", + "version": "8.0.0-alpha.7", "description": "Source loader", "keywords": [ "lib", diff --git a/code/lib/telemetry/package.json b/code/lib/telemetry/package.json index ba07afeac9d..d8ade437260 100644 --- a/code/lib/telemetry/package.json +++ b/code/lib/telemetry/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/telemetry", - "version": "8.0.0-alpha.6", + "version": "8.0.0-alpha.7", "description": "Telemetry logging for crash reports and usage statistics", "keywords": [ "storybook" diff --git a/code/lib/test/package.json b/code/lib/test/package.json index 1198da2f8e8..2c96d06ae7f 100644 --- a/code/lib/test/package.json +++ b/code/lib/test/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/test", - "version": "8.0.0-alpha.6", + "version": "8.0.0-alpha.7", "description": "", "keywords": [ "storybook" diff --git a/code/lib/theming/package.json b/code/lib/theming/package.json index 2cd2416d82c..3483ca3fc3c 100644 --- a/code/lib/theming/package.json +++ b/code/lib/theming/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/theming", - "version": "8.0.0-alpha.6", + "version": "8.0.0-alpha.7", "description": "Core Storybook Components", "keywords": [ "storybook" diff --git a/code/lib/types/package.json b/code/lib/types/package.json index 30a81bc9839..40f0b0b9987 100644 --- a/code/lib/types/package.json +++ b/code/lib/types/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/types", - "version": "8.0.0-alpha.6", + "version": "8.0.0-alpha.7", "description": "Core Storybook TS Types", "keywords": [ "storybook" diff --git a/code/package.json b/code/package.json index 6d32eef356b..4d5db16e620 100644 --- a/code/package.json +++ b/code/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/root", - "version": "8.0.0-alpha.6", + "version": "8.0.0-alpha.7", "private": true, "description": "Storybook root", "homepage": "https://storybook.js.org/", @@ -308,6 +308,5 @@ "Dependency Upgrades" ] ] - }, - "deferredNextVersion": "8.0.0-alpha.7" + } } diff --git a/code/presets/create-react-app/package.json b/code/presets/create-react-app/package.json index 8707409cae4..81c2824615f 100644 --- a/code/presets/create-react-app/package.json +++ b/code/presets/create-react-app/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preset-create-react-app", - "version": "8.0.0-alpha.6", + "version": "8.0.0-alpha.7", "description": "Storybook for Create React App preset", "keywords": [ "storybook" diff --git a/code/presets/html-webpack/package.json b/code/presets/html-webpack/package.json index 54d14a4d74a..3bee502d3fb 100644 --- a/code/presets/html-webpack/package.json +++ b/code/presets/html-webpack/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preset-html-webpack", - "version": "8.0.0-alpha.6", + "version": "8.0.0-alpha.7", "description": "Storybook for HTML: View HTML snippets in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/presets/preact-webpack/package.json b/code/presets/preact-webpack/package.json index ab85cf95358..d7bf0a6fc58 100644 --- a/code/presets/preact-webpack/package.json +++ b/code/presets/preact-webpack/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preset-preact-webpack", - "version": "8.0.0-alpha.6", + "version": "8.0.0-alpha.7", "description": "Storybook for Preact: Develop Preact Component in isolation.", "keywords": [ "storybook" diff --git a/code/presets/react-webpack/package.json b/code/presets/react-webpack/package.json index 2895034392c..fec3a26cf72 100644 --- a/code/presets/react-webpack/package.json +++ b/code/presets/react-webpack/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preset-react-webpack", - "version": "8.0.0-alpha.6", + "version": "8.0.0-alpha.7", "description": "Storybook for React: Develop React Component in isolation with Hot Reloading", "keywords": [ "storybook" diff --git a/code/presets/server-webpack/package.json b/code/presets/server-webpack/package.json index 555f4650042..30dcd273034 100644 --- a/code/presets/server-webpack/package.json +++ b/code/presets/server-webpack/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preset-server-webpack", - "version": "8.0.0-alpha.6", + "version": "8.0.0-alpha.7", "description": "Storybook for Server: View HTML snippets from a server in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/presets/svelte-webpack/package.json b/code/presets/svelte-webpack/package.json index a2278c7cea7..d2324eebc00 100644 --- a/code/presets/svelte-webpack/package.json +++ b/code/presets/svelte-webpack/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preset-svelte-webpack", - "version": "8.0.0-alpha.6", + "version": "8.0.0-alpha.7", "description": "Storybook for Svelte: Develop Svelte Component in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/presets/vue3-webpack/package.json b/code/presets/vue3-webpack/package.json index 4e5739accf3..c6107dba203 100644 --- a/code/presets/vue3-webpack/package.json +++ b/code/presets/vue3-webpack/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preset-vue3-webpack", - "version": "8.0.0-alpha.6", + "version": "8.0.0-alpha.7", "description": "Storybook for Vue 3: Develop Vue 3 Components in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/presets/web-components-webpack/package.json b/code/presets/web-components-webpack/package.json index 7a3a267b051..725c8028614 100644 --- a/code/presets/web-components-webpack/package.json +++ b/code/presets/web-components-webpack/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preset-web-components-webpack", - "version": "8.0.0-alpha.6", + "version": "8.0.0-alpha.7", "description": "Storybook for web-components: View web components snippets in isolation with Hot Reloading.", "keywords": [ "lit", diff --git a/code/renderers/html/package.json b/code/renderers/html/package.json index bd69c8a242d..59b01b05b12 100644 --- a/code/renderers/html/package.json +++ b/code/renderers/html/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/html", - "version": "8.0.0-alpha.6", + "version": "8.0.0-alpha.7", "description": "Storybook HTML renderer", "keywords": [ "storybook" diff --git a/code/renderers/preact/package.json b/code/renderers/preact/package.json index 8b33105333b..ab5b02ac821 100644 --- a/code/renderers/preact/package.json +++ b/code/renderers/preact/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preact", - "version": "8.0.0-alpha.6", + "version": "8.0.0-alpha.7", "description": "Storybook Preact renderer", "keywords": [ "storybook" diff --git a/code/renderers/react/package.json b/code/renderers/react/package.json index cb7d0b9df25..b6cdf5691fe 100644 --- a/code/renderers/react/package.json +++ b/code/renderers/react/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/react", - "version": "8.0.0-alpha.6", + "version": "8.0.0-alpha.7", "description": "Storybook React renderer", "keywords": [ "storybook" diff --git a/code/renderers/server/package.json b/code/renderers/server/package.json index b274de9bd2a..5a271fc210d 100644 --- a/code/renderers/server/package.json +++ b/code/renderers/server/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/server", - "version": "8.0.0-alpha.6", + "version": "8.0.0-alpha.7", "description": "Storybook Server renderer", "keywords": [ "storybook" diff --git a/code/renderers/svelte/package.json b/code/renderers/svelte/package.json index 7af7817715d..2fa0829227d 100644 --- a/code/renderers/svelte/package.json +++ b/code/renderers/svelte/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/svelte", - "version": "8.0.0-alpha.6", + "version": "8.0.0-alpha.7", "description": "Storybook Svelte renderer", "keywords": [ "storybook" diff --git a/code/renderers/vue3/package.json b/code/renderers/vue3/package.json index a01d44cbf0e..19cadb7167b 100644 --- a/code/renderers/vue3/package.json +++ b/code/renderers/vue3/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/vue3", - "version": "8.0.0-alpha.6", + "version": "8.0.0-alpha.7", "description": "Storybook Vue 3 renderer", "keywords": [ "storybook" diff --git a/code/renderers/web-components/package.json b/code/renderers/web-components/package.json index 14b1b194e58..b920b75aaab 100644 --- a/code/renderers/web-components/package.json +++ b/code/renderers/web-components/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/web-components", - "version": "8.0.0-alpha.6", + "version": "8.0.0-alpha.7", "description": "Storybook web-components renderer", "keywords": [ "lit", diff --git a/code/ui/blocks/package.json b/code/ui/blocks/package.json index 9e33c51a1e3..b231db2f281 100644 --- a/code/ui/blocks/package.json +++ b/code/ui/blocks/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/blocks", - "version": "8.0.0-alpha.6", + "version": "8.0.0-alpha.7", "description": "Storybook Doc Blocks", "keywords": [ "storybook" diff --git a/code/ui/components/package.json b/code/ui/components/package.json index 62a80140671..148a6097ae5 100644 --- a/code/ui/components/package.json +++ b/code/ui/components/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/components", - "version": "8.0.0-alpha.6", + "version": "8.0.0-alpha.7", "description": "Core Storybook Components", "keywords": [ "storybook" diff --git a/code/ui/manager/package.json b/code/ui/manager/package.json index 1c580e8553c..866fa7b60f9 100644 --- a/code/ui/manager/package.json +++ b/code/ui/manager/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/manager", - "version": "8.0.0-alpha.6", + "version": "8.0.0-alpha.7", "description": "Core Storybook UI", "keywords": [ "storybook" From 645439adfbb543b5dadb28a471f2da7166c1c6b1 Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Wed, 3 Jan 2024 15:36:54 -0300 Subject: [PATCH 109/136] React: Remove deprecated setGlobalConfig portable stories api --- MIGRATION.md | 9 +++++++++ code/renderers/react/src/testing-api.ts | 12 ------------ 2 files changed, 9 insertions(+), 12 deletions(-) diff --git a/MIGRATION.md b/MIGRATION.md index 6e673bbea53..20cdbd102b0 100644 --- a/MIGRATION.md +++ b/MIGRATION.md @@ -29,6 +29,7 @@ - [Require Svelte 4 and up](#require-svelte-4-and-up) - [Deprecations which are now removed](#deprecations-which-are-now-removed) - [--use-npm flag in storybook CLI](#--use-npm-flag-in-storybook-cli) + - [`setGlobalConfig` from `@storybook/react`](#setglobalconfig-from-storybookreact) - [From version 7.5.0 to 7.6.0](#from-version-750-to-760) - [CommonJS with Vite is deprecated](#commonjs-with-vite-is-deprecated) - [Using implicit actions during rendering is deprecated](#using-implicit-actions-during-rendering-is-deprecated) @@ -573,6 +574,14 @@ Starting in 8.0, Storybook requires Svelte 4 and up. The `--use-npm` is now removed. Use `--package-manager=npm` instead. [More info here](#cli-option---use-npm-deprecated). +##### `setGlobalConfig` from `@storybook/react` + +The `setGlobalConfig` (used for reusing stories in your tests) is now removed in favor of `setProjectAnnotations`. + +```ts +import { setProjectAnnotations } from `@storybook/testing-react`. +``` + ## From version 7.5.0 to 7.6.0 #### CommonJS with Vite is deprecated diff --git a/code/renderers/react/src/testing-api.ts b/code/renderers/react/src/testing-api.ts index 545147fab2d..385e0dc4c80 100644 --- a/code/renderers/react/src/testing-api.ts +++ b/code/renderers/react/src/testing-api.ts @@ -10,7 +10,6 @@ import type { Store_CSFExports, StoriesWithPartialProps, } from '@storybook/types'; -import { deprecate } from '@storybook/client-logger'; import { render } from './render'; import type { Meta } from './public-types'; @@ -37,17 +36,6 @@ export function setProjectAnnotations( originalSetProjectAnnotations(projectAnnotations); } -/** Preserved for users migrating from `@storybook/testing-react`. - * - * @deprecated Use setProjectAnnotations instead - */ -export function setGlobalConfig( - projectAnnotations: ProjectAnnotations | ProjectAnnotations[] -) { - deprecate(`setGlobalConfig is deprecated. Use setProjectAnnotations instead.`); - setProjectAnnotations(projectAnnotations); -} - // This will not be necessary once we have auto preset loading const defaultProjectAnnotations: ProjectAnnotations = { render, From 8c305f9d53d7e3bf5d0b60c7dbe6880e77c25dae Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Wed, 3 Jan 2024 14:35:13 -0300 Subject: [PATCH 110/136] Builder Vite: Remove StorybookViteConfig type in favor of StorybookConfig --- MIGRATION.md | 13 +++++++++++-- code/builders/builder-vite/src/index.ts | 13 ++----------- 2 files changed, 13 insertions(+), 13 deletions(-) diff --git a/MIGRATION.md b/MIGRATION.md index 20cdbd102b0..7eb83edaf83 100644 --- a/MIGRATION.md +++ b/MIGRATION.md @@ -29,7 +29,8 @@ - [Require Svelte 4 and up](#require-svelte-4-and-up) - [Deprecations which are now removed](#deprecations-which-are-now-removed) - [--use-npm flag in storybook CLI](#--use-npm-flag-in-storybook-cli) - - [`setGlobalConfig` from `@storybook/react`](#setglobalconfig-from-storybookreact) + - [`setGlobalConfig` from `@storybook/react`](#setglobalconfig-from-storybookreact) + - [StorybookViteConfig type from @storybook/builder-vite](#storybookviteconfig-type-from-storybookbuilder-vite) - [From version 7.5.0 to 7.6.0](#from-version-750-to-760) - [CommonJS with Vite is deprecated](#commonjs-with-vite-is-deprecated) - [Using implicit actions during rendering is deprecated](#using-implicit-actions-during-rendering-is-deprecated) @@ -574,7 +575,7 @@ Starting in 8.0, Storybook requires Svelte 4 and up. The `--use-npm` is now removed. Use `--package-manager=npm` instead. [More info here](#cli-option---use-npm-deprecated). -##### `setGlobalConfig` from `@storybook/react` +#### `setGlobalConfig` from `@storybook/react` The `setGlobalConfig` (used for reusing stories in your tests) is now removed in favor of `setProjectAnnotations`. @@ -582,6 +583,14 @@ The `setGlobalConfig` (used for reusing stories in your tests) is now removed in import { setProjectAnnotations } from `@storybook/testing-react`. ``` +#### StorybookViteConfig type from @storybook/builder-vite + +The `StorybookViteConfig` type is now removed in favor of `StorybookConfig`: + +```ts +import type { StorybookConfig } from '@storybook/react-vite'; +``` + ## From version 7.5.0 to 7.6.0 #### CommonJS with Vite is deprecated diff --git a/code/builders/builder-vite/src/index.ts b/code/builders/builder-vite/src/index.ts index 80b1ac87537..9cdac7233d6 100644 --- a/code/builders/builder-vite/src/index.ts +++ b/code/builders/builder-vite/src/index.ts @@ -5,26 +5,17 @@ import type { RequestHandler } from 'express'; import type { ViteDevServer } from 'vite'; import express from 'express'; import { dirname, join, parse } from 'path'; -import type { Options, StorybookConfig as StorybookBaseConfig } from '@storybook/types'; +import type { Options } from '@storybook/types'; import { transformIframeHtml } from './transform-iframe-html'; import { createViteServer } from './vite-server'; import { build as viteBuild } from './build'; -import type { ViteBuilder, StorybookConfigVite } from './types'; +import type { ViteBuilder } from './types'; export { withoutVitePlugins } from './utils/without-vite-plugins'; export { hasVitePlugins } from './utils/has-vite-plugins'; export * from './types'; -/** - * @deprecated - * - * Import `StorybookConfig` from your framework, such as: - * - * `import type { StorybookConfig } from '@storybook/react-vite';` - */ -export type StorybookViteConfig = StorybookBaseConfig & StorybookConfigVite; - const getAbsolutePath = (input: I): I => dirname(require.resolve(join(input, 'package.json'))) as any; From 4211d75ad50d02bf9d8b6668317de6577a066842 Mon Sep 17 00:00:00 2001 From: Jeppe Reinhold Date: Thu, 4 Jan 2024 13:29:48 +0100 Subject: [PATCH 111/136] add svelte dependency to root --- code/frameworks/svelte-vite/package.json | 2 +- code/package.json | 1 + code/renderers/svelte/package.json | 2 +- code/yarn.lock | 33 +++++------------------- 4 files changed, 10 insertions(+), 28 deletions(-) diff --git a/code/frameworks/svelte-vite/package.json b/code/frameworks/svelte-vite/package.json index 22357db9e54..7383b0bb6e1 100644 --- a/code/frameworks/svelte-vite/package.json +++ b/code/frameworks/svelte-vite/package.json @@ -58,7 +58,7 @@ }, "devDependencies": { "@types/node": "^18.0.0", - "svelte": "^5.0.0-next.16", + "svelte": "^5.0.0-next.28", "typescript": "^5.3.2", "vite": "^4.0.0" }, diff --git a/code/package.json b/code/package.json index dfb9615ac3f..047d951a787 100644 --- a/code/package.json +++ b/code/package.json @@ -229,6 +229,7 @@ "react-dom": "^18.2.0", "semver": "^7.3.7", "serve-static": "^1.14.1", + "svelte": "^5.0.0-next.28", "trash": "^7.0.0", "ts-dedent": "^2.0.0", "ts-node": "^10.9.1", diff --git a/code/renderers/svelte/package.json b/code/renderers/svelte/package.json index 7af7817715d..5ed332d0421 100644 --- a/code/renderers/svelte/package.json +++ b/code/renderers/svelte/package.json @@ -64,7 +64,7 @@ "devDependencies": { "@sveltejs/vite-plugin-svelte": "^3.0.1", "expect-type": "^0.15.0", - "svelte": "^5.0.0-next.22", + "svelte": "^5.0.0-next.28", "svelte-check": "^3.6.1", "typescript": "^5.3.2" }, diff --git a/code/yarn.lock b/code/yarn.lock index 1a55377378c..4642de78dc2 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -6440,6 +6440,7 @@ __metadata: react-dom: "npm:^18.2.0" semver: "npm:^7.3.7" serve-static: "npm:^1.14.1" + svelte: "npm:^5.0.0-next.28" trash: "npm:^7.0.0" ts-dedent: "npm:^2.0.0" ts-node: "npm:^10.9.1" @@ -6539,7 +6540,7 @@ __metadata: "@sveltejs/vite-plugin-svelte": "npm:^2.4.2" "@types/node": "npm:^18.0.0" magic-string: "npm:^0.30.0" - svelte: "npm:^5.0.0-next.16" + svelte: "npm:^5.0.0-next.28" svelte-preprocess: "npm:^5.1.1" sveltedoc-parser: "npm:^4.2.1" ts-dedent: "npm:^2.2.0" @@ -6581,7 +6582,7 @@ __metadata: "@storybook/types": "workspace:*" "@sveltejs/vite-plugin-svelte": "npm:^3.0.1" expect-type: "npm:^0.15.0" - svelte: "npm:^5.0.0-next.22" + svelte: "npm:^5.0.0-next.28" svelte-check: "npm:^3.6.1" sveltedoc-parser: "npm:^4.2.1" ts-dedent: "npm:^2.0.0" @@ -26674,9 +26675,9 @@ __metadata: languageName: node linkType: hard -"svelte@npm:^5.0.0-next.16": - version: 5.0.0-next.22 - resolution: "svelte@npm:5.0.0-next.22" +"svelte@npm:^5.0.0-next.28": + version: 5.0.0-next.28 + resolution: "svelte@npm:5.0.0-next.28" dependencies: "@ampproject/remapping": "npm:^2.2.1" "@jridgewell/sourcemap-codec": "npm:^1.4.15" @@ -26690,27 +26691,7 @@ __metadata: locate-character: "npm:^3.0.0" magic-string: "npm:^0.30.4" zimmerframe: "npm:^1.1.0" - checksum: 121c0ffe925f3393581742a970d58588ac642f15d17062af16f46b4729064d48214ee158261fbcdff78b6ee143f4da361d3e696507c8c7c31580e2040e366539 - languageName: node - linkType: hard - -"svelte@npm:^5.0.0-next.22": - version: 5.0.0-next.26 - resolution: "svelte@npm:5.0.0-next.26" - dependencies: - "@ampproject/remapping": "npm:^2.2.1" - "@jridgewell/sourcemap-codec": "npm:^1.4.15" - acorn: "npm:^8.10.0" - acorn-typescript: "npm:^1.4.11" - aria-query: "npm:^5.3.0" - axobject-query: "npm:^4.0.0" - esm-env: "npm:^1.0.0" - esrap: "npm:^1.2.1" - is-reference: "npm:^3.0.1" - locate-character: "npm:^3.0.0" - magic-string: "npm:^0.30.4" - zimmerframe: "npm:^1.1.0" - checksum: 76e5874b7afd8f9770b716ea3422c5d0e7e45a85c01bc1fa7daa43b3ae4d38ee073da7a958e3826d0370718fbdf9477769785754b8606a7403460e027f034b60 + checksum: d309cd3d1a9fe16c67a626af867288b02f6e7c49311c851aeb0f36feb5ab9603ca5594338fb933dbbada41b26faea6dcef52ed6ab3e86f54626545e53059eb28 languageName: node linkType: hard From 5e7c18524f076196d8ba725c1e5d3a8922dd29d7 Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Thu, 4 Jan 2024 12:25:39 -0300 Subject: [PATCH 112/136] remove type and reference for --static-dir flag --- code/lib/core-events/src/errors/server-errors.ts | 3 ++- code/lib/core-server/src/presets/common-preset.ts | 2 +- code/lib/core-server/src/utils/server-statics.ts | 2 +- code/lib/types/src/modules/core-common.ts | 4 ---- 4 files changed, 4 insertions(+), 7 deletions(-) diff --git a/code/lib/core-events/src/errors/server-errors.ts b/code/lib/core-events/src/errors/server-errors.ts index bacdd7d6055..47ecfc8b5d2 100644 --- a/code/lib/core-events/src/errors/server-errors.ts +++ b/code/lib/core-events/src/errors/server-errors.ts @@ -120,6 +120,8 @@ export class CouldNotEvaluateFrameworkError extends StorybookError { } } +// this error is not used anymore, but we keep it to maintain unique its error code +// which is used for telemetry export class ConflictingStaticDirConfigError extends StorybookError { readonly category = Category.CORE_SERVER; @@ -138,7 +140,6 @@ export class ConflictingStaticDirConfigError extends StorybookError { `; } } - export class InvalidStoriesEntryError extends StorybookError { readonly category = Category.CORE_COMMON; diff --git a/code/lib/core-server/src/presets/common-preset.ts b/code/lib/core-server/src/presets/common-preset.ts index 350872f3889..9a4f176f796 100644 --- a/code/lib/core-server/src/presets/common-preset.ts +++ b/code/lib/core-server/src/presets/common-preset.ts @@ -46,7 +46,7 @@ export const staticDirs: PresetPropertyFn<'staticDirs'> = async (values = []) => export const favicon = async ( value: string | undefined, - options: Pick + options: Pick ) => { if (value) { return value; diff --git a/code/lib/core-server/src/utils/server-statics.ts b/code/lib/core-server/src/utils/server-statics.ts index aa687c5bcc8..2a0b93e1ca4 100644 --- a/code/lib/core-server/src/utils/server-statics.ts +++ b/code/lib/core-server/src/utils/server-statics.ts @@ -69,7 +69,7 @@ export const parseStaticDir = async (arg: string) => { throw new Error( dedent(chalk` Failed to load static files, no such directory: {cyan ${staticPath}} - Make sure this directory exists, or omit the {bold -s (--static-dir)} option. + Make sure this directory exists. `) ); } diff --git a/code/lib/types/src/modules/core-common.ts b/code/lib/types/src/modules/core-common.ts index 8f848909d8e..f3984252758 100644 --- a/code/lib/types/src/modules/core-common.ts +++ b/code/lib/types/src/modules/core-common.ts @@ -172,10 +172,6 @@ export interface CLIOptions { host?: string; initialPath?: string; exactPort?: boolean; - /** - * @deprecated Use 'staticDirs' Storybook Configuration option instead - */ - staticDir?: string[]; configDir?: string; https?: boolean; sslCa?: string[]; From 38cc3ee76996fa2a1c312107a03fa9e713a04cca Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Wed, 3 Jan 2024 14:22:34 -0300 Subject: [PATCH 113/136] UI: Remove deprecated WithTooltip props --- MIGRATION.md | 15 ++++++++++++ .../src/components/tooltip/WithTooltip.tsx | 24 +++---------------- 2 files changed, 18 insertions(+), 21 deletions(-) diff --git a/MIGRATION.md b/MIGRATION.md index 7eb83edaf83..cb0df4acf69 100644 --- a/MIGRATION.md +++ b/MIGRATION.md @@ -31,6 +31,7 @@ - [--use-npm flag in storybook CLI](#--use-npm-flag-in-storybook-cli) - [`setGlobalConfig` from `@storybook/react`](#setglobalconfig-from-storybookreact) - [StorybookViteConfig type from @storybook/builder-vite](#storybookviteconfig-type-from-storybookbuilder-vite) + - [props from WithTooltipComponent from @storybook/components](#props-from-withtooltipcomponent-from-storybookcomponents) - [From version 7.5.0 to 7.6.0](#from-version-750-to-760) - [CommonJS with Vite is deprecated](#commonjs-with-vite-is-deprecated) - [Using implicit actions during rendering is deprecated](#using-implicit-actions-during-rendering-is-deprecated) @@ -591,6 +592,20 @@ The `StorybookViteConfig` type is now removed in favor of `StorybookConfig`: import type { StorybookConfig } from '@storybook/react-vite'; ``` +#### props from WithTooltipComponent from @storybook/components + +The deprecated properties `tooltipShown`, `closeOnClick`, and `onVisibilityChange` of `WithTooltipComponent` from `@storybook/components` are now removed. Please replace them: + +```tsx + + ... + +``` + ## From version 7.5.0 to 7.6.0 #### CommonJS with Vite is deprecated diff --git a/code/ui/components/src/components/tooltip/WithTooltip.tsx b/code/ui/components/src/components/tooltip/WithTooltip.tsx index bece4bc6427..e76c898d6dd 100644 --- a/code/ui/components/src/components/tooltip/WithTooltip.tsx +++ b/code/ui/components/src/components/tooltip/WithTooltip.tsx @@ -36,18 +36,6 @@ export interface WithTooltipPureProps tooltip: ReactNode | ((p: WithHideFn) => ReactNode); children: ReactNode; onDoubleClick?: () => void; - /** - * @deprecated use `defaultVisible` property instead. This property will be removed in SB 8.0 - */ - tooltipShown?: boolean; - /** - * @deprecated use `closeOnOutsideClick` property instead. This property will be removed in SB 8.0 - */ - closeOnClick?: boolean; - /** - * @deprecated use `onVisibleChange` property instead. This property will be removed in SB 8.0 - */ - onVisibilityChange?: (visibility: boolean) => void | boolean; /** * If `true`, a click outside the trigger element closes the tooltip * @default false @@ -68,9 +56,6 @@ const WithTooltipPure: FC = ({ children, closeOnTriggerHidden, mutationObserverOptions, - closeOnClick, - tooltipShown, - onVisibilityChange, defaultVisible, delayHide, visible, @@ -94,15 +79,12 @@ const WithTooltipPure: FC = ({ { trigger, placement, - defaultVisible: defaultVisible ?? tooltipShown, + defaultVisible, delayHide, interactive, - closeOnOutsideClick: closeOnOutsideClick ?? closeOnClick, + closeOnOutsideClick, closeOnTriggerHidden, - onVisibleChange: (_isVisible) => { - onVisibilityChange?.(_isVisible); - onVisibleChange?.(_isVisible); - }, + onVisibleChange, delayShow, followCursor, mutationObserverOptions, From 1185e6ff29898d3a03f308df66c446d8a86de72b Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Wed, 3 Jan 2024 14:23:06 -0300 Subject: [PATCH 114/136] replace deprecated props in addon themes --- code/addons/themes/src/theme-switcher.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/addons/themes/src/theme-switcher.tsx b/code/addons/themes/src/theme-switcher.tsx index 4fc7ffa8925..7e366fe8359 100644 --- a/code/addons/themes/src/theme-switcher.tsx +++ b/code/addons/themes/src/theme-switcher.tsx @@ -57,7 +57,7 @@ export const ThemeSwitcher = () => { { return ( Date: Wed, 3 Jan 2024 14:23:30 -0300 Subject: [PATCH 115/136] add tests in tooltip stories --- code/ui/components/package.json | 1 + .../src/components/tooltip/WithTooltip.stories.tsx | 12 ++++++++++++ code/yarn.lock | 1 + 3 files changed, 14 insertions(+) diff --git a/code/ui/components/package.json b/code/ui/components/package.json index 148a6097ae5..74d3f290d88 100644 --- a/code/ui/components/package.json +++ b/code/ui/components/package.json @@ -72,6 +72,7 @@ "devDependencies": { "@popperjs/core": "^2.6.0", "@radix-ui/react-scroll-area": "^1.0.5", + "@storybook/test": "workspace:*", "@types/react-syntax-highlighter": "11.0.5", "@types/util-deprecate": "^1.0.0", "css": "^3.0.0", diff --git a/code/ui/components/src/components/tooltip/WithTooltip.stories.tsx b/code/ui/components/src/components/tooltip/WithTooltip.stories.tsx index 76eab8d7c11..6b6e772c8db 100644 --- a/code/ui/components/src/components/tooltip/WithTooltip.stories.tsx +++ b/code/ui/components/src/components/tooltip/WithTooltip.stories.tsx @@ -1,6 +1,7 @@ import type { FunctionComponent, ComponentProps } from 'react'; import React from 'react'; import type { StoryObj } from '@storybook/react'; +import { within, expect, userEvent, screen } from '@storybook/test'; import { styled } from '@storybook/theming'; import { TooltipMessage } from './TooltipMessage'; import { WithToolTipState as WithTooltip } from './WithTooltip'; @@ -104,6 +105,9 @@ export const SimpleClickStartOpen: StoryObj> Click me! ), + play: async () => { + await expect(await screen.findByText('Lorem ipsum dolor sit')).toBeInTheDocument(); + }, }; export const SimpleClickCloseOnClick: StoryObj> = { @@ -116,6 +120,14 @@ export const SimpleClickCloseOnClick: StoryObjClick me! ), + play: async (context) => { + const canvas = within(context.canvasElement); + const trigger = canvas.getByText('Click me!'); + await userEvent.click(trigger); + + await expect(await screen.findByText('Lorem ipsum dolor sit')).toBeInTheDocument(); + await userEvent.click(document.body); + }, }; export const WithoutChrome: StoryObj> = { diff --git a/code/yarn.lock b/code/yarn.lock index 91d091fbeda..74dd259de1d 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -5343,6 +5343,7 @@ __metadata: "@storybook/csf": "npm:^0.1.2" "@storybook/global": "npm:^5.0.0" "@storybook/icons": "npm:^1.2.1" + "@storybook/test": "workspace:*" "@storybook/theming": "workspace:*" "@storybook/types": "workspace:*" "@types/react-syntax-highlighter": "npm:11.0.5" From 92b821544616b829e425bb687d64a8bd576a6010 Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Wed, 3 Jan 2024 15:24:52 -0300 Subject: [PATCH 116/136] resolve snapshot flakiness once and for all --- code/ui/blocks/package.json | 1 + code/ui/blocks/src/blocks/Story.stories.tsx | 14 ++++++++++++++ code/ui/blocks/src/examples/SimpleSizeTest.tsx | 2 +- code/yarn.lock | 1 + 4 files changed, 17 insertions(+), 1 deletion(-) diff --git a/code/ui/blocks/package.json b/code/ui/blocks/package.json index b231db2f281..a8199801e1a 100644 --- a/code/ui/blocks/package.json +++ b/code/ui/blocks/package.json @@ -71,6 +71,7 @@ }, "devDependencies": { "@storybook/addon-actions": "workspace:*", + "@storybook/test": "workspace:*", "@types/color-convert": "^2.0.0" }, "peerDependencies": { diff --git a/code/ui/blocks/src/blocks/Story.stories.tsx b/code/ui/blocks/src/blocks/Story.stories.tsx index dce6292a643..e46c5672890 100644 --- a/code/ui/blocks/src/blocks/Story.stories.tsx +++ b/code/ui/blocks/src/blocks/Story.stories.tsx @@ -1,5 +1,6 @@ import React from 'react'; import type { Meta, StoryObj } from '@storybook/react'; +import { expect, waitFor } from '@storybook/test'; import { Story as StoryBlock } from './Story'; import * as ButtonStories from '../examples/Button.stories'; @@ -86,6 +87,19 @@ export const IFrameProps: Story = { of: StoryParametersStories.NoParameters, inline: false, }, + play: async ({ canvasElement }) => { + // this is mostly to fix flakiness in chromatic, specifically on Safari + // where the scrollbar appears inconsistently and causes the snapshot to be different + await waitFor( + async () => { + const iframeEl = canvasElement.querySelector('iframe'); + await expect( + iframeEl.contentDocument.querySelector('[data-testid="sb-iframe-text"]') + ).toBeVisible(); + }, + { timeout: 10000 } + ); + }, }; export const IFrameWithParameter: Story = { diff --git a/code/ui/blocks/src/examples/SimpleSizeTest.tsx b/code/ui/blocks/src/examples/SimpleSizeTest.tsx index 72e43ab4585..34021666c62 100644 --- a/code/ui/blocks/src/examples/SimpleSizeTest.tsx +++ b/code/ui/blocks/src/examples/SimpleSizeTest.tsx @@ -12,7 +12,7 @@ export const SimpleSizeTest = () => { margin: '-4rem -20px', }} > -

+

This story does nothing. Its only purpose is to show how its size renders in different conditions (inline/iframe/fixed height) when used in a {''} block.

diff --git a/code/yarn.lock b/code/yarn.lock index 74dd259de1d..d97a6fb453c 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -5070,6 +5070,7 @@ __metadata: "@storybook/icons": "npm:^1.2.1" "@storybook/manager-api": "workspace:*" "@storybook/preview-api": "workspace:*" + "@storybook/test": "workspace:*" "@storybook/theming": "workspace:*" "@storybook/types": "workspace:*" "@types/color-convert": "npm:^2.0.0" From caf164463d339e4a2a987a7330c7f8826c313095 Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Thu, 4 Jan 2024 09:29:54 -0300 Subject: [PATCH 117/136] add chromatic delay --- code/ui/blocks/src/blocks/Story.stories.tsx | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/code/ui/blocks/src/blocks/Story.stories.tsx b/code/ui/blocks/src/blocks/Story.stories.tsx index e46c5672890..d9bcb4060e8 100644 --- a/code/ui/blocks/src/blocks/Story.stories.tsx +++ b/code/ui/blocks/src/blocks/Story.stories.tsx @@ -87,6 +87,11 @@ export const IFrameProps: Story = { of: StoryParametersStories.NoParameters, inline: false, }, + parameters: { + chromatic: { + delay: 3000, + }, + }, play: async ({ canvasElement }) => { // this is mostly to fix flakiness in chromatic, specifically on Safari // where the scrollbar appears inconsistently and causes the snapshot to be different From 6ab33203299441d8f380c6ec83110326c1be6747 Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Thu, 4 Jan 2024 16:16:42 -0300 Subject: [PATCH 118/136] fix ts error in story --- code/ui/blocks/src/blocks/Story.stories.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/ui/blocks/src/blocks/Story.stories.tsx b/code/ui/blocks/src/blocks/Story.stories.tsx index d9bcb4060e8..b3f8108feb2 100644 --- a/code/ui/blocks/src/blocks/Story.stories.tsx +++ b/code/ui/blocks/src/blocks/Story.stories.tsx @@ -99,7 +99,7 @@ export const IFrameProps: Story = { async () => { const iframeEl = canvasElement.querySelector('iframe'); await expect( - iframeEl.contentDocument.querySelector('[data-testid="sb-iframe-text"]') + iframeEl!.contentDocument!.querySelector('[data-testid="sb-iframe-text"]') ).toBeVisible(); }, { timeout: 10000 } From d3f2e4349e4f66a3d4605965529577b6832a7b03 Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Thu, 4 Jan 2024 16:42:43 -0300 Subject: [PATCH 119/136] remove play fn --- .../src/components/tooltip/WithTooltip.stories.tsx | 10 +--------- 1 file changed, 1 insertion(+), 9 deletions(-) diff --git a/code/ui/components/src/components/tooltip/WithTooltip.stories.tsx b/code/ui/components/src/components/tooltip/WithTooltip.stories.tsx index 6b6e772c8db..8ccb459095a 100644 --- a/code/ui/components/src/components/tooltip/WithTooltip.stories.tsx +++ b/code/ui/components/src/components/tooltip/WithTooltip.stories.tsx @@ -1,7 +1,7 @@ import type { FunctionComponent, ComponentProps } from 'react'; import React from 'react'; import type { StoryObj } from '@storybook/react'; -import { within, expect, userEvent, screen } from '@storybook/test'; +import { expect, screen } from '@storybook/test'; import { styled } from '@storybook/theming'; import { TooltipMessage } from './TooltipMessage'; import { WithToolTipState as WithTooltip } from './WithTooltip'; @@ -120,14 +120,6 @@ export const SimpleClickCloseOnClick: StoryObjClick me! ), - play: async (context) => { - const canvas = within(context.canvasElement); - const trigger = canvas.getByText('Click me!'); - await userEvent.click(trigger); - - await expect(await screen.findByText('Lorem ipsum dolor sit')).toBeInTheDocument(); - await userEvent.click(document.body); - }, }; export const WithoutChrome: StoryObj> = { From a576dc725d78460d88e5c9a5b125b0ba79e77c16 Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Tue, 2 Jan 2024 18:10:54 -0300 Subject: [PATCH 120/136] Addon Links: Remove LinkTo from direct import --- MIGRATION.md | 13 +++++++++++++ code/addons/links/src/index.ts | 19 ------------------- 2 files changed, 13 insertions(+), 19 deletions(-) diff --git a/MIGRATION.md b/MIGRATION.md index cb0df4acf69..2b610abe8d4 100644 --- a/MIGRATION.md +++ b/MIGRATION.md @@ -32,6 +32,7 @@ - [`setGlobalConfig` from `@storybook/react`](#setglobalconfig-from-storybookreact) - [StorybookViteConfig type from @storybook/builder-vite](#storybookviteconfig-type-from-storybookbuilder-vite) - [props from WithTooltipComponent from @storybook/components](#props-from-withtooltipcomponent-from-storybookcomponents) + - [LinkTo direct import from addon-links](#linkto-direct-import-from-addon-links) - [From version 7.5.0 to 7.6.0](#from-version-750-to-760) - [CommonJS with Vite is deprecated](#commonjs-with-vite-is-deprecated) - [Using implicit actions during rendering is deprecated](#using-implicit-actions-during-rendering-is-deprecated) @@ -606,6 +607,18 @@ The deprecated properties `tooltipShown`, `closeOnClick`, and `onVisibilityChang ``` +#### LinkTo direct import from addon-links + +The `LinkTo` (React component) direct import from `@storybook/addon-links` is now removed. You have to import it from `@storybook/addon-links/react` instead. + +```ts +// before +import LinkTo from '@storybook/addon-links'; + +// after +import LinkTo from '@storybook/addon-links/react'; +``` + ## From version 7.5.0 to 7.6.0 #### CommonJS with Vite is deprecated diff --git a/code/addons/links/src/index.ts b/code/addons/links/src/index.ts index 47751e59968..524558abc6c 100644 --- a/code/addons/links/src/index.ts +++ b/code/addons/links/src/index.ts @@ -1,20 +1 @@ -import { dedent } from 'ts-dedent'; - -let hasWarned = false; - -/** - * @deprecated please import this specific function from @storybook/addon-links/react - */ -export function LinkTo(): null { - if (!hasWarned) { - // eslint-disable-next-line no-console - console.error(dedent` - LinkTo has moved to addon-links/react: - import LinkTo from '@storybook/addon-links/react'; - `); - hasWarned = true; - } - return null; -} - export { linkTo, hrefTo, withLinks, navigate } from './utils'; From ff474770a2e923d9ec14ec2bcf76c78aa13ac6c1 Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Fri, 5 Jan 2024 11:51:42 -0300 Subject: [PATCH 121/136] Types: Remove Story, ComponentStory, ComponentStoryObj, ComponentStoryFn and ComponentMeta types --- MIGRATION.md | 7 ++ code/renderers/html/src/public-types.ts | 11 --- code/renderers/preact/src/public-types.ts | 11 --- code/renderers/react/src/public-types.ts | 71 +------------------ code/renderers/server/src/public-types.ts | 11 --- code/renderers/vue3/src/public-types.ts | 11 --- .../web-components/src/public-types.ts | 11 --- 7 files changed, 8 insertions(+), 125 deletions(-) diff --git a/MIGRATION.md b/MIGRATION.md index 2b610abe8d4..d45dd2d66c8 100644 --- a/MIGRATION.md +++ b/MIGRATION.md @@ -33,6 +33,7 @@ - [StorybookViteConfig type from @storybook/builder-vite](#storybookviteconfig-type-from-storybookbuilder-vite) - [props from WithTooltipComponent from @storybook/components](#props-from-withtooltipcomponent-from-storybookcomponents) - [LinkTo direct import from addon-links](#linkto-direct-import-from-addon-links) + - [Story, ComponentStory, ComponentStoryObj, ComponentStoryFn and ComponentMeta TypeScript types](#story-componentstory-componentstoryobj-componentstoryfn-and-componentmeta-typescript-types) - [From version 7.5.0 to 7.6.0](#from-version-750-to-760) - [CommonJS with Vite is deprecated](#commonjs-with-vite-is-deprecated) - [Using implicit actions during rendering is deprecated](#using-implicit-actions-during-rendering-is-deprecated) @@ -619,6 +620,12 @@ import LinkTo from '@storybook/addon-links'; import LinkTo from '@storybook/addon-links/react'; ``` +#### Story, ComponentStory, ComponentStoryObj, ComponentStoryFn and ComponentMeta TypeScript types + +The `Story` type is now removed in favor of `StoryFn` and `StoryObj`. More info [here](##story-type-deprecated). + +Additionally, for React, the `ComponentStory`, `ComponentStoryObj`, `ComponentStoryFn` and `ComponentMeta` types are now removed in favor of `StoryFn`, `StoryObj` and `Meta`. More info [here](#componentstory-componentstoryobj-componentstoryfn-and-componentmeta-types-are-deprecated). + ## From version 7.5.0 to 7.6.0 #### CommonJS with Vite is deprecated diff --git a/code/renderers/html/src/public-types.ts b/code/renderers/html/src/public-types.ts index e0b41f5bc62..2dff13d9aa9 100644 --- a/code/renderers/html/src/public-types.ts +++ b/code/renderers/html/src/public-types.ts @@ -35,17 +35,6 @@ export type StoryFn = AnnotatedStoryFn; */ export type StoryObj = StoryAnnotations; -/** - * @deprecated Use `StoryFn` instead. - * Use `StoryObj` if you want to migrate to CSF3, which uses objects instead of functions to represent stories. - * You can read more about the CSF3 format here: https://storybook.js.org/blog/component-story-format-3-0/ - * - * Story function that represents a CSFv2 component example. - * - * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports) - */ -export type Story = StoryFn; - export type Decorator = DecoratorFunction; export type Loader = LoaderFunction; export type StoryContext = GenericStoryContext; diff --git a/code/renderers/preact/src/public-types.ts b/code/renderers/preact/src/public-types.ts index b8f62d0dfca..bb0f10559e9 100644 --- a/code/renderers/preact/src/public-types.ts +++ b/code/renderers/preact/src/public-types.ts @@ -35,17 +35,6 @@ export type StoryFn = AnnotatedStoryFn; */ export type StoryObj = StoryAnnotations; -/** - * @deprecated Use `StoryFn` instead. - * Use `StoryObj` if you want to migrate to CSF3, which uses objects instead of functions to represent stories. - * You can read more about the CSF3 format here: https://storybook.js.org/blog/component-story-format-3-0/ - * - * Story function that represents a CSFv2 component example. - * - * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports) - */ -export type Story = StoryFn; - export type Decorator = DecoratorFunction; export type Loader = LoaderFunction; export type StoryContext = GenericStoryContext; diff --git a/code/renderers/react/src/public-types.ts b/code/renderers/react/src/public-types.ts index 838daf868d2..eaacc7fa14d 100644 --- a/code/renderers/react/src/public-types.ts +++ b/code/renderers/react/src/public-types.ts @@ -11,15 +11,13 @@ import type { StrictArgs, ProjectAnnotations, } from '@storybook/types'; -import type { ComponentProps, ComponentType, JSXElementConstructor } from 'react'; +import type { ComponentProps, ComponentType } from 'react'; import type { SetOptional, Simplify } from 'type-fest'; import type { ReactRenderer } from './types'; export type { Args, ArgTypes, Parameters, StrictArgs } from '@storybook/types'; export type { ReactRenderer }; -type JSXElement = keyof JSX.IntrinsicElements | JSXElementConstructor; - /** * Metadata to configure the stories for a component. * @@ -74,73 +72,6 @@ type AddMocks = Simplify<{ : TArgs[T]; }>; -/** - * @deprecated Use `Meta` instead, e.g. ComponentMeta -> Meta. - * - * For the common case where a component's stories are simple components that receives args as props: - * - * ```tsx - * export default { ... } as ComponentMeta; - * ``` - */ -export type ComponentMeta = Meta>; - -/** - * @deprecated Use `StoryFn` instead, e.g. ComponentStoryFn -> StoryFn. - * Use `StoryObj` if you want to migrate to CSF3, which uses objects instead of functions to represent stories. - * You can read more about the CSF3 format here: https://storybook.js.org/blog/component-story-format-3-0/ - * - * For the common case where a (CSFv2) story is a simple component that receives args as props: - * - * ```tsx - * const Template: ComponentStoryFn = (args) =>
- )) as DecoratorFn, + )) as Decorator, ], }; diff --git a/test-storybooks/external-docs/components/AccountForm.stories.tsx b/test-storybooks/external-docs/components/AccountForm.stories.tsx index c4579abaf5e..10280adb253 100644 --- a/test-storybooks/external-docs/components/AccountForm.stories.tsx +++ b/test-storybooks/external-docs/components/AccountForm.stories.tsx @@ -1,6 +1,6 @@ /* eslint-disable storybook/use-storybook-testing-library */ // @TODO: use addon-interactions and remove the rule disable above -import type { ComponentStoryObj, ComponentMeta } from '@storybook/react'; +import type { StoryObj, Meta } from '@storybook/react'; import { screen } from '@testing-library/dom'; import userEvent from '@testing-library/user-event'; import { AccountForm } from './AccountForm'; @@ -12,9 +12,9 @@ export default { parameters: { layout: 'centered', }, -} as ComponentMeta; +} as Meta; -type Story = ComponentStoryObj; +type Story = StoryObj; export const Standard: Story = { args: { passwordVerification: false }, @@ -54,7 +54,7 @@ export const StandardFailHover: Story = { }, }; -export const Verification: ComponentStoryObj = { +export const Verification: StoryObj = { args: { passwordVerification: true }, }; From 4c7e5458a8b5621ff82d5d75c9e8241b7efc10df Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Fri, 5 Jan 2024 15:30:20 -0300 Subject: [PATCH 124/136] add codemod to migration notes --- MIGRATION.md | 47 ++++++++++++++++++++++++++++++++++++++--------- 1 file changed, 38 insertions(+), 9 deletions(-) diff --git a/MIGRATION.md b/MIGRATION.md index bc9405d5112..995cd649dc8 100644 --- a/MIGRATION.md +++ b/MIGRATION.md @@ -33,7 +33,7 @@ - [StorybookViteConfig type from @storybook/builder-vite](#storybookviteconfig-type-from-storybookbuilder-vite) - [props from WithTooltipComponent from @storybook/components](#props-from-withtooltipcomponent-from-storybookcomponents) - [LinkTo direct import from addon-links](#linkto-direct-import-from-addon-links) - - [Story, ComponentStory, ComponentStoryObj, ComponentStoryFn and ComponentMeta TypeScript types](#story-componentstory-componentstoryobj-componentstoryfn-and-componentmeta-typescript-types) + - [DecoratorFn, Story, ComponentStory, ComponentStoryObj, ComponentStoryFn and ComponentMeta TypeScript types](#decoratorfn-story-componentstory-componentstoryobj-componentstoryfn-and-componentmeta-typescript-types) - [From version 7.5.0 to 7.6.0](#from-version-750-to-760) - [CommonJS with Vite is deprecated](#commonjs-with-vite-is-deprecated) - [Using implicit actions during rendering is deprecated](#using-implicit-actions-during-rendering-is-deprecated) @@ -620,11 +620,13 @@ import LinkTo from '@storybook/addon-links'; import LinkTo from '@storybook/addon-links/react'; ``` -#### Story, ComponentStory, ComponentStoryObj, ComponentStoryFn and ComponentMeta TypeScript types +#### DecoratorFn, Story, ComponentStory, ComponentStoryObj, ComponentStoryFn and ComponentMeta TypeScript types The `Story` type is now removed in favor of `StoryFn` and `StoryObj`. More info [here](#story-type-deprecated). -Additionally, for React, the `ComponentStory`, `ComponentStoryObj`, `ComponentStoryFn` and `ComponentMeta` types are now removed in favor of `StoryFn`, `StoryObj` and `Meta`. More info [here](#componentstory-componentstoryobj-componentstoryfn-and-componentmeta-types-are-deprecated). +The `DecoratorFn` type is now removed in favor of `Decorator`. [More info](#renamed-decoratorfn-to-decorator). + +For React, the `ComponentStory`, `ComponentStoryObj`, `ComponentStoryFn` and `ComponentMeta` types are now removed in favor of `StoryFn`, `StoryObj` and `Meta`. [More info](#componentstory-componentstoryobj-componentstoryfn-and-componentmeta-types-are-deprecated). ## From version 7.5.0 to 7.6.0 @@ -2221,6 +2223,8 @@ During the 7.0 dev cycle we will be preparing recommendations and utilities to m #### `Story` type deprecated +_Has codemod_ + In 6.x you were able to do this: ```ts @@ -2229,24 +2233,43 @@ import type { Story } from '@storybook/react'; export const MyStory: Story = () =>
; ``` -But this will produce a deprecation warning in 7.0 because `Story` has been deprecated. -To fix the deprecation warning, use the `StoryFn` type: +However with the introduction of CSF3, the `Story` type has been deprecated in favor of two other types: `StoryFn` for CSF2 and `StoryObj` for CSF3. ```ts -import type { StoryFn } from '@storybook/react'; +import type { StoryFn, StoryObj } from '@storybook/react'; -export const MyStory: StoryFn = () =>
; +export const MyCsf2Story: StoryFn = () =>
; +export const MyCsf3Story: StoryObj = { + render: () =>
+}; ``` This change is part of our move to CSF3, which uses objects instead of functions to represent stories. You can read more about the CSF3 format here: https://storybook.js.org/blog/component-story-format-3-0/ +We have set up a codemod that attempts to automatically migrate your code for you (update the glob to suit your needs): + +``` +npx storybook@next migrate upgrade-deprecated-types --glob="**/*.stories.tsx" +``` + #### `ComponentStory`, `ComponentStoryObj`, `ComponentStoryFn` and `ComponentMeta` types are deprecated -The type of StoryObj and StoryFn have been changed in 7.0 so that both the "component" as "the props of the component" will be accepted as the generic parameter. +_Has codemod_ + +The type of `StoryObj` and `StoryFn` have been changed in 7.0 so that both the "component" as "the props of the component" will be accepted as the generic parameter. You can now replace the types: + +``` +ComponentStory -> StoryFn (CSF2) or StoryObj (CSF3) +ComponentStoryObj -> StoryObj +ComponentStoryFn -> StoryFn +ComponentMeta -> Meta +``` + +Here are a few examples: ```ts -import type { Story } from '@storybook/react'; +import type { StoryFn, StoryObj } from '@storybook/react'; import { Button, ButtonProps } from './Button'; // This works in 7.0, making the ComponentX types redundant. @@ -2266,6 +2289,12 @@ export const CSF2Story: StoryFn = (args) => ; -}; -\`\`\` - -\`\`\` -code block with with no language -const a = fn({ -b: 2, -}); -\`\`\` -`, - }, -}; -export const Children: Story = { - render: (args) => ( - - {`# My Example Markdown - -An \`inline\` codeblock - -\`\`\`tsx -// TypeScript React code block -export const MyStory = () => { -return ; -}; -\`\`\` - -\`\`\` -code block with with no language -const a = fn({ -b: 2, -}); -\`\`\` -`} - - ), -}; diff --git a/docs/api/doc-block-description.md b/docs/api/doc-block-description.md index 1c188a23934..ce8254d7f57 100644 --- a/docs/api/doc-block-description.md +++ b/docs/api/doc-block-description.md @@ -37,30 +37,6 @@ Specifies where to pull the description from. It can either point to a story or Descriptions are pulled from the JSDoc comments or parameters, and they are rendered as markdown. See [Writing descriptions](#writing-descriptions) for more details. -### `children` - -(⛔️ **Deprecated**) - -Type: `string` - -See [Migration guide](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#description-block-parametersnotes-and-parametersinfo). - -### `markdown` - -(⛔️ **Deprecated**) - -Type: `string` - -See [Migration guide](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#description-block-parametersnotes-and-parametersinfo). - -### `type` - -(⛔️ **Deprecated**) - -Type: `'info' | 'notes' | 'docgen' | 'auto'` - -See [Migration guide](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#description-block-parametersnotes-and-parametersinfo). - ## Writing descriptions There are multiple places to write the description of a component/story, depending on what you want to achieve. Descriptions can be written at the story level to describe each story of a component, or they can be written at the meta or component level to describe the component in general. From e82fe806a63c1997f70dcddcc795b5d8c5974f26 Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Fri, 5 Jan 2024 18:26:58 -0300 Subject: [PATCH 133/136] Core: Remove collapseAll and expandAll methods --- MIGRATION.md | 13 +++++++++++++ code/lib/manager-api/src/modules/channel.ts | 17 ----------------- 2 files changed, 13 insertions(+), 17 deletions(-) diff --git a/MIGRATION.md b/MIGRATION.md index c7e2dacfb62..9d894c1b89c 100644 --- a/MIGRATION.md +++ b/MIGRATION.md @@ -39,6 +39,7 @@ - [storyIndexers](#storyindexers) - [Deprecated docs parameters](#deprecated-docs-parameters) - [Description Doc block properties](#description-doc-block-properties) + - [Manager API expandAll and collapseAll methods](#manager-api-expandall-and-collapseall-methods) - [From version 7.5.0 to 7.6.0](#from-version-750-to-760) - [CommonJS with Vite is deprecated](#commonjs-with-vite-is-deprecated) - [Using implicit actions during rendering is deprecated](#using-implicit-actions-during-rendering-is-deprecated) @@ -676,6 +677,18 @@ More info [here](#autodocs-changes) and [here](#source-block). `children`, `markdown` and `type` are now removed in favor of the `of` property. [More info](#doc-blocks). +#### Manager API expandAll and collapseAll methods + +The `collapseAll` and `expandAll` APIs (possibly used by addons) are now removed. Please emit events for these actions instead: + +```ts +import { STORIES_COLLAPSE_ALL, STORIES_EXPAND_ALL } from '@storybook/core-events'; +import { useStorybookApi } from '@storybook/manager-api'; + +const api = useStorybookApi() +api.collapseAll() // becomes api.emit(STORIES_COLLAPSE_ALL) +api.expandAll() // becomes api.emit(STORIES_EXPAND_ALL) +``` ## From version 7.5.0 to 7.6.0 diff --git a/code/lib/manager-api/src/modules/channel.ts b/code/lib/manager-api/src/modules/channel.ts index 0ab1dc91008..64df9b32a4c 100644 --- a/code/lib/manager-api/src/modules/channel.ts +++ b/code/lib/manager-api/src/modules/channel.ts @@ -1,5 +1,4 @@ /* eslint-disable no-param-reassign */ -import { STORIES_COLLAPSE_ALL, STORIES_EXPAND_ALL } from '@storybook/core-events'; import type { Listener } from '@storybook/channels'; import type { API_Provider } from '@storybook/types'; @@ -38,16 +37,6 @@ export interface SubAPI { * @param handler - The callback function to be called when the event is emitted. */ once: (type: string, handler: Listener) => void; - /** - * Emits an event to collapse all stories in the UI. - * @deprecated Use `emit(STORIES_COLLAPSE_ALL)` instead. This API will be removed in Storybook 8.0. - */ - collapseAll: () => void; - /** - * Emits an event to expand all stories in the UI. - * @deprecated Use `emit(STORIES_EXPAND_ALL)` instead. This API will be removed in Storybook 8.0. - */ - expandAll: () => void; } export type SubState = Record; @@ -75,12 +64,6 @@ export const init: ModuleFn = ({ provider }) => { } provider.channel?.emit(type, data, ...args); }, - collapseAll: () => { - api.emit(STORIES_COLLAPSE_ALL, {}); - }, - expandAll: () => { - api.emit(STORIES_EXPAND_ALL); - }, }; return { api, state: {} }; }; From 548a5ba474ac77ea7e8b166c0dd580d195ac17ce Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Fri, 5 Jan 2024 19:03:32 -0300 Subject: [PATCH 134/136] Documentation: Add note about Yarn 1 dropped support --- MIGRATION.md | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/MIGRATION.md b/MIGRATION.md index c7e2dacfb62..38970bcfd1b 100644 --- a/MIGRATION.md +++ b/MIGRATION.md @@ -9,6 +9,7 @@ - [Dropping support for \*.stories.mdx (CSF in MDX) format and MDX1 support](#dropping-support-for-storiesmdx-csf-in-mdx-format-and-mdx1-support) - [Dropping support for id, name and story in Story block](#dropping-support-for-id-name-and-story-in-story-block) - [Core changes](#core-changes) + - [Dropping support for Yarn 1](#dropping-support-for-yarn-1) - [Dropping support for Node.js 16](#dropping-support-for-nodejs-16) - [Autotitle breaking fixes](#autotitle-breaking-fixes) - [React v18 in the manager UI (including addons)](#react-v18-in-the-manager-ui-including-addons) @@ -455,6 +456,10 @@ Referencing stories by `id`, `name` or `story` in the Story block is not possibl ### Core changes +#### Dropping support for Yarn 1 + +Storybook will stop providing fixes aimed at Yarn 1 projects. This does not necessarily mean that Storybook will stop working for Yarn 1 projects, just that the team won't provide more fixes aimed at it. For context, it's been 6 years since the release of Yarn 1, and Yarn is currently in version 4, which was [released in October 2023](https://yarnpkg.com/blog/release/4.0). + #### Dropping support for Node.js 16 In Storybook 8, we have dropped Node.js 16 support since it reached end-of-life on 2023-09-11. Storybook 8 supports Node.js 18 and above. From d70a3bfb75157bcdd284a36ae86235be26400ec0 Mon Sep 17 00:00:00 2001 From: storybook-bot <32066757+storybook-bot@users.noreply.github.com> Date: Fri, 5 Jan 2024 22:35:21 +0000 Subject: [PATCH 135/136] Write changelog for 8.0.0-alpha.8 [skip ci] --- CHANGELOG.prerelease.md | 17 +++++++++++++++++ code/package.json | 3 ++- docs/versions/next.json | 2 +- 3 files changed, 20 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.prerelease.md b/CHANGELOG.prerelease.md index 077e7014776..05f683fc465 100644 --- a/CHANGELOG.prerelease.md +++ b/CHANGELOG.prerelease.md @@ -1,3 +1,20 @@ +## 8.0.0-alpha.8 + +- Addon Links: Remove LinkTo from direct import - [#25418](https://github.com/storybookjs/storybook/pull/25418), thanks [@yannbf](https://github.com/yannbf)! +- Addon docs: Remove deprecated parameters - [#25469](https://github.com/storybookjs/storybook/pull/25469), thanks [@yannbf](https://github.com/yannbf)! +- Builder Vite: Remove StorybookViteConfig type in favor of StorybookConfig - [#25441](https://github.com/storybookjs/storybook/pull/25441), thanks [@yannbf](https://github.com/yannbf)! +- Core: Error on explicit actions while rendering or playing - [#25238](https://github.com/storybookjs/storybook/pull/25238), thanks [@kasperpeulen](https://github.com/kasperpeulen)! +- Core: Remove collapseAll and expandAll methods - [#25486](https://github.com/storybookjs/storybook/pull/25486), thanks [@yannbf](https://github.com/yannbf)! +- Core: Remove storyIndexers in favor of experimental_indexers - [#25468](https://github.com/storybookjs/storybook/pull/25468), thanks [@yannbf](https://github.com/yannbf)! +- Core: Remove unused staticDir type - [#25415](https://github.com/storybookjs/storybook/pull/25415), thanks [@yannbf](https://github.com/yannbf)! +- Doc blocks: Remove deprecated props from Description block - [#25457](https://github.com/storybookjs/storybook/pull/25457), thanks [@yannbf](https://github.com/yannbf)! +- Manager API: Remove deprecated navigateToSettingsPage method - [#25467](https://github.com/storybookjs/storybook/pull/25467), thanks [@yannbf](https://github.com/yannbf)! +- React: Remove deprecated setGlobalConfig portable stories api - [#25442](https://github.com/storybookjs/storybook/pull/25442), thanks [@yannbf](https://github.com/yannbf)! +- TypeScript: Remove deprecated addons module types - [#25485](https://github.com/storybookjs/storybook/pull/25485), thanks [@yannbf](https://github.com/yannbf)! +- Types: Remove DecoratorFn, Story, ComponentStory, ComponentStoryObj, ComponentStoryFn and ComponentMeta types - [#25477](https://github.com/storybookjs/storybook/pull/25477), thanks [@yannbf](https://github.com/yannbf)! +- Types: Remove Framework in favor of Renderer types - [#25476](https://github.com/storybookjs/storybook/pull/25476), thanks [@yannbf](https://github.com/yannbf)! +- UI: Remove deprecated WithTooltip props - [#25440](https://github.com/storybookjs/storybook/pull/25440), thanks [@yannbf](https://github.com/yannbf)! + ## 8.0.0-alpha.7 - Addon-Docs: Upgrade to MDX3 - [#25303](https://github.com/storybookjs/storybook/pull/25303), thanks [@yannbf](https://github.com/yannbf)! diff --git a/code/package.json b/code/package.json index cbf48360276..d9c52efe757 100644 --- a/code/package.json +++ b/code/package.json @@ -309,5 +309,6 @@ "Dependency Upgrades" ] ] - } + }, + "deferredNextVersion": "8.0.0-alpha.8" } diff --git a/docs/versions/next.json b/docs/versions/next.json index fcd9f1cce99..7de16aa408a 100644 --- a/docs/versions/next.json +++ b/docs/versions/next.json @@ -1 +1 @@ -{"version":"8.0.0-alpha.7","info":{"plain":"- Addon-Docs: Upgrade to MDX3 - [#25303](https://github.com/storybookjs/storybook/pull/25303), thanks [@yannbf](https://github.com/yannbf)!\n- CLI: Add Storyshots migration notice - [#25327](https://github.com/storybookjs/storybook/pull/25327), thanks [@yannbf](https://github.com/yannbf)!\n- CLI: Fix regex used in upgrade command - [#25284](https://github.com/storybookjs/storybook/pull/25284), thanks [@yannbf](https://github.com/yannbf)!\n- CLI: Remove --use-npm flag - [#25414](https://github.com/storybookjs/storybook/pull/25414), thanks [@yannbf](https://github.com/yannbf)!\n- Core: Remove unused warnOnLegacyHierarchySeparator type - [#25416](https://github.com/storybookjs/storybook/pull/25416), thanks [@yannbf](https://github.com/yannbf)!\n- Core: Remove vite plugins and drop Vite 3 support - [#25427](https://github.com/storybookjs/storybook/pull/25427), thanks [@kasperpeulen](https://github.com/kasperpeulen)!\n- Maintenance: Add comment to deprecation notice in Button component - [#25411](https://github.com/storybookjs/storybook/pull/25411), thanks [@yannbf](https://github.com/yannbf)!\n- UI: Fix about page layout - [#25396](https://github.com/storybookjs/storybook/pull/25396), thanks [@cdedreuille](https://github.com/cdedreuille)!\n- Viewport: Store viewport, rotation in globals - [#25423](https://github.com/storybookjs/storybook/pull/25423), thanks [@shilman](https://github.com/shilman)!\n- Vite: Fix Vite 5 CJS warnings - [#25005](https://github.com/storybookjs/storybook/pull/25005), thanks [@JReinhold](https://github.com/JReinhold)!"}} +{"version":"8.0.0-alpha.8","info":{"plain":"- Addon Links: Remove LinkTo from direct import - [#25418](https://github.com/storybookjs/storybook/pull/25418), thanks [@yannbf](https://github.com/yannbf)!\n- Addon docs: Remove deprecated parameters - [#25469](https://github.com/storybookjs/storybook/pull/25469), thanks [@yannbf](https://github.com/yannbf)!\n- Builder Vite: Remove StorybookViteConfig type in favor of StorybookConfig - [#25441](https://github.com/storybookjs/storybook/pull/25441), thanks [@yannbf](https://github.com/yannbf)!\n- Core: Error on explicit actions while rendering or playing - [#25238](https://github.com/storybookjs/storybook/pull/25238), thanks [@kasperpeulen](https://github.com/kasperpeulen)!\n- Core: Remove collapseAll and expandAll methods - [#25486](https://github.com/storybookjs/storybook/pull/25486), thanks [@yannbf](https://github.com/yannbf)!\n- Core: Remove storyIndexers in favor of experimental_indexers - [#25468](https://github.com/storybookjs/storybook/pull/25468), thanks [@yannbf](https://github.com/yannbf)!\n- Core: Remove unused staticDir type - [#25415](https://github.com/storybookjs/storybook/pull/25415), thanks [@yannbf](https://github.com/yannbf)!\n- Doc blocks: Remove deprecated props from Description block - [#25457](https://github.com/storybookjs/storybook/pull/25457), thanks [@yannbf](https://github.com/yannbf)!\n- Manager API: Remove deprecated navigateToSettingsPage method - [#25467](https://github.com/storybookjs/storybook/pull/25467), thanks [@yannbf](https://github.com/yannbf)!\n- React: Remove deprecated setGlobalConfig portable stories api - [#25442](https://github.com/storybookjs/storybook/pull/25442), thanks [@yannbf](https://github.com/yannbf)!\n- TypeScript: Remove deprecated addons module types - [#25485](https://github.com/storybookjs/storybook/pull/25485), thanks [@yannbf](https://github.com/yannbf)!\n- Types: Remove DecoratorFn, Story, ComponentStory, ComponentStoryObj, ComponentStoryFn and ComponentMeta types - [#25477](https://github.com/storybookjs/storybook/pull/25477), thanks [@yannbf](https://github.com/yannbf)!\n- Types: Remove Framework in favor of Renderer types - [#25476](https://github.com/storybookjs/storybook/pull/25476), thanks [@yannbf](https://github.com/yannbf)!\n- UI: Remove deprecated WithTooltip props - [#25440](https://github.com/storybookjs/storybook/pull/25440), thanks [@yannbf](https://github.com/yannbf)!"}} From f37059053bff395f9e488c7dcf48efa845292a0b Mon Sep 17 00:00:00 2001 From: storybook-bot <32066757+storybook-bot@users.noreply.github.com> Date: Sat, 6 Jan 2024 03:42:24 +0000 Subject: [PATCH 136/136] Bump version from "8.0.0-alpha.7" to "8.0.0-alpha.8" [skip ci] --- code/addons/a11y/package.json | 2 +- code/addons/actions/package.json | 2 +- code/addons/backgrounds/package.json | 2 +- code/addons/controls/package.json | 2 +- code/addons/docs/package.json | 2 +- code/addons/essentials/package.json | 2 +- code/addons/gfm/package.json | 2 +- code/addons/highlight/package.json | 2 +- code/addons/interactions/package.json | 2 +- code/addons/jest/package.json | 2 +- code/addons/links/package.json | 2 +- code/addons/measure/package.json | 2 +- code/addons/outline/package.json | 2 +- code/addons/storysource/package.json | 2 +- code/addons/themes/package.json | 2 +- code/addons/toolbars/package.json | 2 +- code/addons/viewport/package.json | 2 +- code/builders/builder-manager/package.json | 2 +- code/builders/builder-vite/package.json | 2 +- code/builders/builder-webpack5/package.json | 2 +- code/frameworks/angular/package.json | 2 +- code/frameworks/ember/package.json | 2 +- code/frameworks/html-vite/package.json | 2 +- code/frameworks/html-webpack5/package.json | 2 +- code/frameworks/nextjs/package.json | 2 +- code/frameworks/preact-vite/package.json | 2 +- code/frameworks/preact-webpack5/package.json | 2 +- code/frameworks/react-vite/package.json | 2 +- code/frameworks/react-webpack5/package.json | 2 +- code/frameworks/server-webpack5/package.json | 2 +- code/frameworks/svelte-vite/package.json | 2 +- code/frameworks/svelte-webpack5/package.json | 2 +- code/frameworks/sveltekit/package.json | 2 +- code/frameworks/vue3-vite/package.json | 2 +- code/frameworks/vue3-webpack5/package.json | 2 +- .../web-components-vite/package.json | 2 +- .../web-components-webpack5/package.json | 2 +- code/lib/channels/package.json | 2 +- code/lib/cli-sb/package.json | 2 +- code/lib/cli-storybook/package.json | 2 +- code/lib/cli/package.json | 2 +- code/lib/cli/src/versions.ts | 160 +++++++++--------- code/lib/client-logger/package.json | 2 +- code/lib/codemod/package.json | 2 +- code/lib/core-common/package.json | 2 +- code/lib/core-events/package.json | 2 +- code/lib/core-server/package.json | 2 +- code/lib/core-webpack/package.json | 2 +- code/lib/csf-plugin/package.json | 2 +- code/lib/csf-tools/package.json | 2 +- code/lib/docs-tools/package.json | 2 +- code/lib/instrumenter/package.json | 2 +- code/lib/manager-api/package.json | 2 +- code/lib/manager-api/src/version.ts | 2 +- code/lib/node-logger/package.json | 2 +- code/lib/preview-api/package.json | 2 +- code/lib/preview/package.json | 2 +- code/lib/react-dom-shim/package.json | 2 +- code/lib/router/package.json | 2 +- code/lib/source-loader/package.json | 2 +- code/lib/telemetry/package.json | 2 +- code/lib/test/package.json | 2 +- code/lib/theming/package.json | 2 +- code/lib/types/package.json | 2 +- code/package.json | 5 +- code/presets/create-react-app/package.json | 2 +- code/presets/html-webpack/package.json | 2 +- code/presets/preact-webpack/package.json | 2 +- code/presets/react-webpack/package.json | 2 +- code/presets/server-webpack/package.json | 2 +- code/presets/svelte-webpack/package.json | 2 +- code/presets/vue3-webpack/package.json | 2 +- .../web-components-webpack/package.json | 2 +- code/renderers/html/package.json | 2 +- code/renderers/preact/package.json | 2 +- code/renderers/react/package.json | 2 +- code/renderers/server/package.json | 2 +- code/renderers/svelte/package.json | 2 +- code/renderers/vue3/package.json | 2 +- code/renderers/web-components/package.json | 2 +- code/ui/blocks/package.json | 2 +- code/ui/components/package.json | 2 +- code/ui/manager/package.json | 2 +- 83 files changed, 163 insertions(+), 164 deletions(-) diff --git a/code/addons/a11y/package.json b/code/addons/a11y/package.json index 0cc3f893fe2..4dafd318f36 100644 --- a/code/addons/a11y/package.json +++ b/code/addons/a11y/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-a11y", - "version": "8.0.0-alpha.7", + "version": "8.0.0-alpha.8", "description": "Test component compliance with web accessibility standards", "keywords": [ "a11y", diff --git a/code/addons/actions/package.json b/code/addons/actions/package.json index 4fd60be0ab0..436300a6343 100644 --- a/code/addons/actions/package.json +++ b/code/addons/actions/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-actions", - "version": "8.0.0-alpha.7", + "version": "8.0.0-alpha.8", "description": "Get UI feedback when an action is performed on an interactive element", "keywords": [ "storybook", diff --git a/code/addons/backgrounds/package.json b/code/addons/backgrounds/package.json index 57acc688799..53caf8806c8 100644 --- a/code/addons/backgrounds/package.json +++ b/code/addons/backgrounds/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-backgrounds", - "version": "8.0.0-alpha.7", + "version": "8.0.0-alpha.8", "description": "Switch backgrounds to view components in different settings", "keywords": [ "addon", diff --git a/code/addons/controls/package.json b/code/addons/controls/package.json index 642a2da8c85..c8765ea4feb 100644 --- a/code/addons/controls/package.json +++ b/code/addons/controls/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-controls", - "version": "8.0.0-alpha.7", + "version": "8.0.0-alpha.8", "description": "Interact with component inputs dynamically in the Storybook UI", "keywords": [ "addon", diff --git a/code/addons/docs/package.json b/code/addons/docs/package.json index 6645021a4ed..ae3b1d031d1 100644 --- a/code/addons/docs/package.json +++ b/code/addons/docs/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-docs", - "version": "8.0.0-alpha.7", + "version": "8.0.0-alpha.8", "description": "Document component usage and properties in Markdown", "keywords": [ "addon", diff --git a/code/addons/essentials/package.json b/code/addons/essentials/package.json index 2f48b5a214d..252e0af86de 100644 --- a/code/addons/essentials/package.json +++ b/code/addons/essentials/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-essentials", - "version": "8.0.0-alpha.7", + "version": "8.0.0-alpha.8", "description": "Curated addons to bring out the best of Storybook", "keywords": [ "addon", diff --git a/code/addons/gfm/package.json b/code/addons/gfm/package.json index ddb374be238..78ebee0bc0c 100644 --- a/code/addons/gfm/package.json +++ b/code/addons/gfm/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-mdx-gfm", - "version": "8.0.0-alpha.7", + "version": "8.0.0-alpha.8", "description": "GitHub Flavored Markdown in Storybook", "keywords": [ "addon", diff --git a/code/addons/highlight/package.json b/code/addons/highlight/package.json index daec5b70435..438504d733f 100644 --- a/code/addons/highlight/package.json +++ b/code/addons/highlight/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-highlight", - "version": "8.0.0-alpha.7", + "version": "8.0.0-alpha.8", "description": "Highlight DOM nodes within your stories", "keywords": [ "storybook-addons", diff --git a/code/addons/interactions/package.json b/code/addons/interactions/package.json index cb50480fb19..dd322662ce3 100644 --- a/code/addons/interactions/package.json +++ b/code/addons/interactions/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-interactions", - "version": "8.0.0-alpha.7", + "version": "8.0.0-alpha.8", "description": "Automate, test and debug user interactions", "keywords": [ "storybook-addons", diff --git a/code/addons/jest/package.json b/code/addons/jest/package.json index 0ec3ceacc94..264d5c218b5 100644 --- a/code/addons/jest/package.json +++ b/code/addons/jest/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-jest", - "version": "8.0.0-alpha.7", + "version": "8.0.0-alpha.8", "description": "React storybook addon that show component jest report", "keywords": [ "addon", diff --git a/code/addons/links/package.json b/code/addons/links/package.json index aaf4354d46d..89d399d22d4 100644 --- a/code/addons/links/package.json +++ b/code/addons/links/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-links", - "version": "8.0.0-alpha.7", + "version": "8.0.0-alpha.8", "description": "Link stories together to build demos and prototypes with your UI components", "keywords": [ "addon", diff --git a/code/addons/measure/package.json b/code/addons/measure/package.json index c22e7d1de6e..fceabf0e9de 100644 --- a/code/addons/measure/package.json +++ b/code/addons/measure/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-measure", - "version": "8.0.0-alpha.7", + "version": "8.0.0-alpha.8", "description": "Inspect layouts by visualizing the box model", "keywords": [ "storybook-addons", diff --git a/code/addons/outline/package.json b/code/addons/outline/package.json index e3d4ff62edc..77f90fabe7a 100644 --- a/code/addons/outline/package.json +++ b/code/addons/outline/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-outline", - "version": "8.0.0-alpha.7", + "version": "8.0.0-alpha.8", "description": "Outline all elements with CSS to help with layout placement and alignment", "keywords": [ "storybook-addons", diff --git a/code/addons/storysource/package.json b/code/addons/storysource/package.json index 19e66c086f5..905e79f7962 100644 --- a/code/addons/storysource/package.json +++ b/code/addons/storysource/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-storysource", - "version": "8.0.0-alpha.7", + "version": "8.0.0-alpha.8", "description": "View a story’s source code to see how it works and paste into your app", "keywords": [ "addon", diff --git a/code/addons/themes/package.json b/code/addons/themes/package.json index 520b8817d1a..ba7d6ad06b3 100644 --- a/code/addons/themes/package.json +++ b/code/addons/themes/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-themes", - "version": "8.0.0-alpha.7", + "version": "8.0.0-alpha.8", "description": "Switch between multiple themes for you components in Storybook", "keywords": [ "css", diff --git a/code/addons/toolbars/package.json b/code/addons/toolbars/package.json index d16d850f086..cdef7ec7a8e 100644 --- a/code/addons/toolbars/package.json +++ b/code/addons/toolbars/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-toolbars", - "version": "8.0.0-alpha.7", + "version": "8.0.0-alpha.8", "description": "Create your own toolbar items that control story rendering", "keywords": [ "addon", diff --git a/code/addons/viewport/package.json b/code/addons/viewport/package.json index 340f9bba270..ec8dfcea2fd 100644 --- a/code/addons/viewport/package.json +++ b/code/addons/viewport/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-viewport", - "version": "8.0.0-alpha.7", + "version": "8.0.0-alpha.8", "description": "Build responsive components by adjusting Storybook’s viewport size and orientation", "keywords": [ "addon", diff --git a/code/builders/builder-manager/package.json b/code/builders/builder-manager/package.json index b5d28ac2f81..3dc07399dec 100644 --- a/code/builders/builder-manager/package.json +++ b/code/builders/builder-manager/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/builder-manager", - "version": "8.0.0-alpha.7", + "version": "8.0.0-alpha.8", "description": "Storybook manager builder", "keywords": [ "storybook" diff --git a/code/builders/builder-vite/package.json b/code/builders/builder-vite/package.json index a4fb5f8d101..c4b0712b60c 100644 --- a/code/builders/builder-vite/package.json +++ b/code/builders/builder-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/builder-vite", - "version": "8.0.0-alpha.7", + "version": "8.0.0-alpha.8", "description": "A plugin to run and build Storybooks with Vite", "homepage": "https://github.com/storybookjs/storybook/tree/next/code/builders/builder-vite/#readme", "bugs": { diff --git a/code/builders/builder-webpack5/package.json b/code/builders/builder-webpack5/package.json index 5a884a32031..5796195c88b 100644 --- a/code/builders/builder-webpack5/package.json +++ b/code/builders/builder-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/builder-webpack5", - "version": "8.0.0-alpha.7", + "version": "8.0.0-alpha.8", "description": "Storybook framework-agnostic API", "keywords": [ "storybook" diff --git a/code/frameworks/angular/package.json b/code/frameworks/angular/package.json index e9bc67d1d44..52924cc3fb4 100644 --- a/code/frameworks/angular/package.json +++ b/code/frameworks/angular/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/angular", - "version": "8.0.0-alpha.7", + "version": "8.0.0-alpha.8", "description": "Storybook for Angular: Develop Angular components in isolation with hot reloading.", "keywords": [ "storybook", diff --git a/code/frameworks/ember/package.json b/code/frameworks/ember/package.json index 2fca03fb9f3..af49a0b41b5 100644 --- a/code/frameworks/ember/package.json +++ b/code/frameworks/ember/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/ember", - "version": "8.0.0-alpha.7", + "version": "8.0.0-alpha.8", "description": "Storybook for Ember: Develop Ember Component in isolation with Hot Reloading.", "homepage": "https://github.com/storybookjs/storybook/tree/next/code/frameworks/ember", "bugs": { diff --git a/code/frameworks/html-vite/package.json b/code/frameworks/html-vite/package.json index 96b5f549e39..3b0eec15fc1 100644 --- a/code/frameworks/html-vite/package.json +++ b/code/frameworks/html-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/html-vite", - "version": "8.0.0-alpha.7", + "version": "8.0.0-alpha.8", "description": "Storybook for HTML and Vite: Develop HTML in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/html-webpack5/package.json b/code/frameworks/html-webpack5/package.json index 8317873fcfa..dc9fad92e94 100644 --- a/code/frameworks/html-webpack5/package.json +++ b/code/frameworks/html-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/html-webpack5", - "version": "8.0.0-alpha.7", + "version": "8.0.0-alpha.8", "description": "Storybook for HTML: View HTML snippets in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/nextjs/package.json b/code/frameworks/nextjs/package.json index 8386f63952a..80be950d751 100644 --- a/code/frameworks/nextjs/package.json +++ b/code/frameworks/nextjs/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/nextjs", - "version": "8.0.0-alpha.7", + "version": "8.0.0-alpha.8", "description": "Storybook for Next.js", "keywords": [ "storybook", diff --git a/code/frameworks/preact-vite/package.json b/code/frameworks/preact-vite/package.json index 5bb53bb5b12..296ce62a0f3 100644 --- a/code/frameworks/preact-vite/package.json +++ b/code/frameworks/preact-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preact-vite", - "version": "8.0.0-alpha.7", + "version": "8.0.0-alpha.8", "description": "Storybook for Preact and Vite: Develop Preact components in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/preact-webpack5/package.json b/code/frameworks/preact-webpack5/package.json index 69457f02adb..285a187a920 100644 --- a/code/frameworks/preact-webpack5/package.json +++ b/code/frameworks/preact-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preact-webpack5", - "version": "8.0.0-alpha.7", + "version": "8.0.0-alpha.8", "description": "Storybook for Preact: Develop Preact Component in isolation.", "keywords": [ "storybook" diff --git a/code/frameworks/react-vite/package.json b/code/frameworks/react-vite/package.json index 5d1d517be0d..3b6d1e3b338 100644 --- a/code/frameworks/react-vite/package.json +++ b/code/frameworks/react-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/react-vite", - "version": "8.0.0-alpha.7", + "version": "8.0.0-alpha.8", "description": "Storybook for React and Vite: Develop React components in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/react-webpack5/package.json b/code/frameworks/react-webpack5/package.json index de1bf261cbd..b849bafa047 100644 --- a/code/frameworks/react-webpack5/package.json +++ b/code/frameworks/react-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/react-webpack5", - "version": "8.0.0-alpha.7", + "version": "8.0.0-alpha.8", "description": "Storybook for React: Develop React Component in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/server-webpack5/package.json b/code/frameworks/server-webpack5/package.json index 73ecd20a495..5b5ab6b6fe3 100644 --- a/code/frameworks/server-webpack5/package.json +++ b/code/frameworks/server-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/server-webpack5", - "version": "8.0.0-alpha.7", + "version": "8.0.0-alpha.8", "description": "Storybook for Server: View HTML snippets from a server in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/svelte-vite/package.json b/code/frameworks/svelte-vite/package.json index 5dac6552c58..eece06f117b 100644 --- a/code/frameworks/svelte-vite/package.json +++ b/code/frameworks/svelte-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/svelte-vite", - "version": "8.0.0-alpha.7", + "version": "8.0.0-alpha.8", "description": "Storybook for Svelte and Vite: Develop Svelte components in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/svelte-webpack5/package.json b/code/frameworks/svelte-webpack5/package.json index 516ad8caa70..40ea6428710 100644 --- a/code/frameworks/svelte-webpack5/package.json +++ b/code/frameworks/svelte-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/svelte-webpack5", - "version": "8.0.0-alpha.7", + "version": "8.0.0-alpha.8", "description": "Storybook for Svelte: Develop Svelte Component in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/sveltekit/package.json b/code/frameworks/sveltekit/package.json index cb6d6723464..b97ffa27aad 100644 --- a/code/frameworks/sveltekit/package.json +++ b/code/frameworks/sveltekit/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/sveltekit", - "version": "8.0.0-alpha.7", + "version": "8.0.0-alpha.8", "description": "Storybook for SvelteKit", "keywords": [ "storybook", diff --git a/code/frameworks/vue3-vite/package.json b/code/frameworks/vue3-vite/package.json index 30503127648..e055410a8bb 100644 --- a/code/frameworks/vue3-vite/package.json +++ b/code/frameworks/vue3-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/vue3-vite", - "version": "8.0.0-alpha.7", + "version": "8.0.0-alpha.8", "description": "Storybook for Vue3 and Vite: Develop Vue3 components in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/vue3-webpack5/package.json b/code/frameworks/vue3-webpack5/package.json index 9b975613769..f133bd90aab 100644 --- a/code/frameworks/vue3-webpack5/package.json +++ b/code/frameworks/vue3-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/vue3-webpack5", - "version": "8.0.0-alpha.7", + "version": "8.0.0-alpha.8", "description": "Storybook for Vue 3: Develop Vue 3 Components in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/web-components-vite/package.json b/code/frameworks/web-components-vite/package.json index 5c4a0d6832f..97451f9f0dd 100644 --- a/code/frameworks/web-components-vite/package.json +++ b/code/frameworks/web-components-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/web-components-vite", - "version": "8.0.0-alpha.7", + "version": "8.0.0-alpha.8", "description": "Storybook for web-components and Vite: Develop Web Components in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/web-components-webpack5/package.json b/code/frameworks/web-components-webpack5/package.json index fbd4b057071..391c4279903 100644 --- a/code/frameworks/web-components-webpack5/package.json +++ b/code/frameworks/web-components-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/web-components-webpack5", - "version": "8.0.0-alpha.7", + "version": "8.0.0-alpha.8", "description": "Storybook for web-components: View web components snippets in isolation with Hot Reloading.", "keywords": [ "lit", diff --git a/code/lib/channels/package.json b/code/lib/channels/package.json index 8bce7271329..9b3659e76b9 100644 --- a/code/lib/channels/package.json +++ b/code/lib/channels/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/channels", - "version": "8.0.0-alpha.7", + "version": "8.0.0-alpha.8", "description": "", "keywords": [ "storybook" diff --git a/code/lib/cli-sb/package.json b/code/lib/cli-sb/package.json index 31291d5c217..2bedf547a13 100644 --- a/code/lib/cli-sb/package.json +++ b/code/lib/cli-sb/package.json @@ -1,6 +1,6 @@ { "name": "sb", - "version": "8.0.0-alpha.7", + "version": "8.0.0-alpha.8", "description": "Storybook CLI", "keywords": [ "storybook" diff --git a/code/lib/cli-storybook/package.json b/code/lib/cli-storybook/package.json index 70238bee936..d1cc935b29a 100644 --- a/code/lib/cli-storybook/package.json +++ b/code/lib/cli-storybook/package.json @@ -1,6 +1,6 @@ { "name": "storybook", - "version": "8.0.0-alpha.7", + "version": "8.0.0-alpha.8", "description": "Storybook CLI", "keywords": [ "storybook" diff --git a/code/lib/cli/package.json b/code/lib/cli/package.json index 4eeef07be2f..671a4f309bd 100644 --- a/code/lib/cli/package.json +++ b/code/lib/cli/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/cli", - "version": "8.0.0-alpha.7", + "version": "8.0.0-alpha.8", "description": "Storybook's CLI - install, dev, build, upgrade, and more", "keywords": [ "cli", diff --git a/code/lib/cli/src/versions.ts b/code/lib/cli/src/versions.ts index 8341aa2952d..efd8bdb1d81 100644 --- a/code/lib/cli/src/versions.ts +++ b/code/lib/cli/src/versions.ts @@ -1,83 +1,83 @@ // auto generated file, do not edit export default { - '@storybook/addon-a11y': '8.0.0-alpha.7', - '@storybook/addon-actions': '8.0.0-alpha.7', - '@storybook/addon-backgrounds': '8.0.0-alpha.7', - '@storybook/addon-controls': '8.0.0-alpha.7', - '@storybook/addon-docs': '8.0.0-alpha.7', - '@storybook/addon-essentials': '8.0.0-alpha.7', - '@storybook/addon-highlight': '8.0.0-alpha.7', - '@storybook/addon-interactions': '8.0.0-alpha.7', - '@storybook/addon-jest': '8.0.0-alpha.7', - '@storybook/addon-links': '8.0.0-alpha.7', - '@storybook/addon-mdx-gfm': '8.0.0-alpha.7', - '@storybook/addon-measure': '8.0.0-alpha.7', - '@storybook/addon-outline': '8.0.0-alpha.7', - '@storybook/addon-storysource': '8.0.0-alpha.7', - '@storybook/addon-themes': '8.0.0-alpha.7', - '@storybook/addon-toolbars': '8.0.0-alpha.7', - '@storybook/addon-viewport': '8.0.0-alpha.7', - '@storybook/angular': '8.0.0-alpha.7', - '@storybook/blocks': '8.0.0-alpha.7', - '@storybook/builder-manager': '8.0.0-alpha.7', - '@storybook/builder-vite': '8.0.0-alpha.7', - '@storybook/builder-webpack5': '8.0.0-alpha.7', - '@storybook/channels': '8.0.0-alpha.7', - '@storybook/cli': '8.0.0-alpha.7', - '@storybook/client-logger': '8.0.0-alpha.7', - '@storybook/codemod': '8.0.0-alpha.7', - '@storybook/components': '8.0.0-alpha.7', - '@storybook/core-common': '8.0.0-alpha.7', - '@storybook/core-events': '8.0.0-alpha.7', - '@storybook/core-server': '8.0.0-alpha.7', - '@storybook/core-webpack': '8.0.0-alpha.7', - '@storybook/csf-plugin': '8.0.0-alpha.7', - '@storybook/csf-tools': '8.0.0-alpha.7', - '@storybook/docs-tools': '8.0.0-alpha.7', - '@storybook/ember': '8.0.0-alpha.7', - '@storybook/html': '8.0.0-alpha.7', - '@storybook/html-vite': '8.0.0-alpha.7', - '@storybook/html-webpack5': '8.0.0-alpha.7', - '@storybook/instrumenter': '8.0.0-alpha.7', - '@storybook/manager': '8.0.0-alpha.7', - '@storybook/manager-api': '8.0.0-alpha.7', - '@storybook/nextjs': '8.0.0-alpha.7', - '@storybook/node-logger': '8.0.0-alpha.7', - '@storybook/preact': '8.0.0-alpha.7', - '@storybook/preact-vite': '8.0.0-alpha.7', - '@storybook/preact-webpack5': '8.0.0-alpha.7', - '@storybook/preset-create-react-app': '8.0.0-alpha.7', - '@storybook/preset-html-webpack': '8.0.0-alpha.7', - '@storybook/preset-preact-webpack': '8.0.0-alpha.7', - '@storybook/preset-react-webpack': '8.0.0-alpha.7', - '@storybook/preset-server-webpack': '8.0.0-alpha.7', - '@storybook/preset-svelte-webpack': '8.0.0-alpha.7', - '@storybook/preset-vue3-webpack': '8.0.0-alpha.7', - '@storybook/preset-web-components-webpack': '8.0.0-alpha.7', - '@storybook/preview': '8.0.0-alpha.7', - '@storybook/preview-api': '8.0.0-alpha.7', - '@storybook/react': '8.0.0-alpha.7', - '@storybook/react-dom-shim': '8.0.0-alpha.7', - '@storybook/react-vite': '8.0.0-alpha.7', - '@storybook/react-webpack5': '8.0.0-alpha.7', - '@storybook/router': '8.0.0-alpha.7', - '@storybook/server': '8.0.0-alpha.7', - '@storybook/server-webpack5': '8.0.0-alpha.7', - '@storybook/source-loader': '8.0.0-alpha.7', - '@storybook/svelte': '8.0.0-alpha.7', - '@storybook/svelte-vite': '8.0.0-alpha.7', - '@storybook/svelte-webpack5': '8.0.0-alpha.7', - '@storybook/sveltekit': '8.0.0-alpha.7', - '@storybook/telemetry': '8.0.0-alpha.7', - '@storybook/test': '8.0.0-alpha.7', - '@storybook/theming': '8.0.0-alpha.7', - '@storybook/types': '8.0.0-alpha.7', - '@storybook/vue3': '8.0.0-alpha.7', - '@storybook/vue3-vite': '8.0.0-alpha.7', - '@storybook/vue3-webpack5': '8.0.0-alpha.7', - '@storybook/web-components': '8.0.0-alpha.7', - '@storybook/web-components-vite': '8.0.0-alpha.7', - '@storybook/web-components-webpack5': '8.0.0-alpha.7', - sb: '8.0.0-alpha.7', - storybook: '8.0.0-alpha.7', + '@storybook/addon-a11y': '8.0.0-alpha.8', + '@storybook/addon-actions': '8.0.0-alpha.8', + '@storybook/addon-backgrounds': '8.0.0-alpha.8', + '@storybook/addon-controls': '8.0.0-alpha.8', + '@storybook/addon-docs': '8.0.0-alpha.8', + '@storybook/addon-essentials': '8.0.0-alpha.8', + '@storybook/addon-highlight': '8.0.0-alpha.8', + '@storybook/addon-interactions': '8.0.0-alpha.8', + '@storybook/addon-jest': '8.0.0-alpha.8', + '@storybook/addon-links': '8.0.0-alpha.8', + '@storybook/addon-mdx-gfm': '8.0.0-alpha.8', + '@storybook/addon-measure': '8.0.0-alpha.8', + '@storybook/addon-outline': '8.0.0-alpha.8', + '@storybook/addon-storysource': '8.0.0-alpha.8', + '@storybook/addon-themes': '8.0.0-alpha.8', + '@storybook/addon-toolbars': '8.0.0-alpha.8', + '@storybook/addon-viewport': '8.0.0-alpha.8', + '@storybook/angular': '8.0.0-alpha.8', + '@storybook/blocks': '8.0.0-alpha.8', + '@storybook/builder-manager': '8.0.0-alpha.8', + '@storybook/builder-vite': '8.0.0-alpha.8', + '@storybook/builder-webpack5': '8.0.0-alpha.8', + '@storybook/channels': '8.0.0-alpha.8', + '@storybook/cli': '8.0.0-alpha.8', + '@storybook/client-logger': '8.0.0-alpha.8', + '@storybook/codemod': '8.0.0-alpha.8', + '@storybook/components': '8.0.0-alpha.8', + '@storybook/core-common': '8.0.0-alpha.8', + '@storybook/core-events': '8.0.0-alpha.8', + '@storybook/core-server': '8.0.0-alpha.8', + '@storybook/core-webpack': '8.0.0-alpha.8', + '@storybook/csf-plugin': '8.0.0-alpha.8', + '@storybook/csf-tools': '8.0.0-alpha.8', + '@storybook/docs-tools': '8.0.0-alpha.8', + '@storybook/ember': '8.0.0-alpha.8', + '@storybook/html': '8.0.0-alpha.8', + '@storybook/html-vite': '8.0.0-alpha.8', + '@storybook/html-webpack5': '8.0.0-alpha.8', + '@storybook/instrumenter': '8.0.0-alpha.8', + '@storybook/manager': '8.0.0-alpha.8', + '@storybook/manager-api': '8.0.0-alpha.8', + '@storybook/nextjs': '8.0.0-alpha.8', + '@storybook/node-logger': '8.0.0-alpha.8', + '@storybook/preact': '8.0.0-alpha.8', + '@storybook/preact-vite': '8.0.0-alpha.8', + '@storybook/preact-webpack5': '8.0.0-alpha.8', + '@storybook/preset-create-react-app': '8.0.0-alpha.8', + '@storybook/preset-html-webpack': '8.0.0-alpha.8', + '@storybook/preset-preact-webpack': '8.0.0-alpha.8', + '@storybook/preset-react-webpack': '8.0.0-alpha.8', + '@storybook/preset-server-webpack': '8.0.0-alpha.8', + '@storybook/preset-svelte-webpack': '8.0.0-alpha.8', + '@storybook/preset-vue3-webpack': '8.0.0-alpha.8', + '@storybook/preset-web-components-webpack': '8.0.0-alpha.8', + '@storybook/preview': '8.0.0-alpha.8', + '@storybook/preview-api': '8.0.0-alpha.8', + '@storybook/react': '8.0.0-alpha.8', + '@storybook/react-dom-shim': '8.0.0-alpha.8', + '@storybook/react-vite': '8.0.0-alpha.8', + '@storybook/react-webpack5': '8.0.0-alpha.8', + '@storybook/router': '8.0.0-alpha.8', + '@storybook/server': '8.0.0-alpha.8', + '@storybook/server-webpack5': '8.0.0-alpha.8', + '@storybook/source-loader': '8.0.0-alpha.8', + '@storybook/svelte': '8.0.0-alpha.8', + '@storybook/svelte-vite': '8.0.0-alpha.8', + '@storybook/svelte-webpack5': '8.0.0-alpha.8', + '@storybook/sveltekit': '8.0.0-alpha.8', + '@storybook/telemetry': '8.0.0-alpha.8', + '@storybook/test': '8.0.0-alpha.8', + '@storybook/theming': '8.0.0-alpha.8', + '@storybook/types': '8.0.0-alpha.8', + '@storybook/vue3': '8.0.0-alpha.8', + '@storybook/vue3-vite': '8.0.0-alpha.8', + '@storybook/vue3-webpack5': '8.0.0-alpha.8', + '@storybook/web-components': '8.0.0-alpha.8', + '@storybook/web-components-vite': '8.0.0-alpha.8', + '@storybook/web-components-webpack5': '8.0.0-alpha.8', + sb: '8.0.0-alpha.8', + storybook: '8.0.0-alpha.8', }; diff --git a/code/lib/client-logger/package.json b/code/lib/client-logger/package.json index 7e756ad1c06..328a6502566 100644 --- a/code/lib/client-logger/package.json +++ b/code/lib/client-logger/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/client-logger", - "version": "8.0.0-alpha.7", + "version": "8.0.0-alpha.8", "description": "", "keywords": [ "storybook" diff --git a/code/lib/codemod/package.json b/code/lib/codemod/package.json index 88c83896047..f0401dc52f7 100644 --- a/code/lib/codemod/package.json +++ b/code/lib/codemod/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/codemod", - "version": "8.0.0-alpha.7", + "version": "8.0.0-alpha.8", "description": "A collection of codemod scripts written with JSCodeshift", "keywords": [ "storybook" diff --git a/code/lib/core-common/package.json b/code/lib/core-common/package.json index 8e35a8aff93..7bd54a9428a 100644 --- a/code/lib/core-common/package.json +++ b/code/lib/core-common/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/core-common", - "version": "8.0.0-alpha.7", + "version": "8.0.0-alpha.8", "description": "Storybook framework-agnostic API", "keywords": [ "storybook" diff --git a/code/lib/core-events/package.json b/code/lib/core-events/package.json index 7a55c13f114..0041af7942d 100644 --- a/code/lib/core-events/package.json +++ b/code/lib/core-events/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/core-events", - "version": "8.0.0-alpha.7", + "version": "8.0.0-alpha.8", "description": "Event names used in storybook core", "keywords": [ "storybook" diff --git a/code/lib/core-server/package.json b/code/lib/core-server/package.json index 94d8dc73207..cdea9a4b00d 100644 --- a/code/lib/core-server/package.json +++ b/code/lib/core-server/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/core-server", - "version": "8.0.0-alpha.7", + "version": "8.0.0-alpha.8", "description": "Storybook framework-agnostic API", "keywords": [ "storybook" diff --git a/code/lib/core-webpack/package.json b/code/lib/core-webpack/package.json index 2e78d2be65c..a3dc0ce82f6 100644 --- a/code/lib/core-webpack/package.json +++ b/code/lib/core-webpack/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/core-webpack", - "version": "8.0.0-alpha.7", + "version": "8.0.0-alpha.8", "description": "Storybook framework-agnostic API", "keywords": [ "storybook" diff --git a/code/lib/csf-plugin/package.json b/code/lib/csf-plugin/package.json index 18cdd0b0f8c..b3769a22ca3 100644 --- a/code/lib/csf-plugin/package.json +++ b/code/lib/csf-plugin/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/csf-plugin", - "version": "8.0.0-alpha.7", + "version": "8.0.0-alpha.8", "description": "Enrich CSF files via static analysis", "keywords": [ "storybook" diff --git a/code/lib/csf-tools/package.json b/code/lib/csf-tools/package.json index a60526888b3..4da5a9f0429 100644 --- a/code/lib/csf-tools/package.json +++ b/code/lib/csf-tools/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/csf-tools", - "version": "8.0.0-alpha.7", + "version": "8.0.0-alpha.8", "description": "Parse and manipulate CSF and Storybook config files", "keywords": [ "storybook" diff --git a/code/lib/docs-tools/package.json b/code/lib/docs-tools/package.json index e386f975f9a..c623f5ad7f4 100644 --- a/code/lib/docs-tools/package.json +++ b/code/lib/docs-tools/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/docs-tools", - "version": "8.0.0-alpha.7", + "version": "8.0.0-alpha.8", "description": "Shared utility functions for frameworks to implement docs", "keywords": [ "storybook" diff --git a/code/lib/instrumenter/package.json b/code/lib/instrumenter/package.json index b4a997503d0..3dc3263f781 100644 --- a/code/lib/instrumenter/package.json +++ b/code/lib/instrumenter/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/instrumenter", - "version": "8.0.0-alpha.7", + "version": "8.0.0-alpha.8", "description": "", "keywords": [ "storybook" diff --git a/code/lib/manager-api/package.json b/code/lib/manager-api/package.json index 5bb850cf1c8..84b5a21eea9 100644 --- a/code/lib/manager-api/package.json +++ b/code/lib/manager-api/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/manager-api", - "version": "8.0.0-alpha.7", + "version": "8.0.0-alpha.8", "description": "Core Storybook Manager API & Context", "keywords": [ "storybook" diff --git a/code/lib/manager-api/src/version.ts b/code/lib/manager-api/src/version.ts index 95cfa4d9848..12c1391d88a 100644 --- a/code/lib/manager-api/src/version.ts +++ b/code/lib/manager-api/src/version.ts @@ -1 +1 @@ -export const version = '8.0.0-alpha.7'; +export const version = '8.0.0-alpha.8'; diff --git a/code/lib/node-logger/package.json b/code/lib/node-logger/package.json index a7072d0eac0..73e1e9f5c26 100644 --- a/code/lib/node-logger/package.json +++ b/code/lib/node-logger/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/node-logger", - "version": "8.0.0-alpha.7", + "version": "8.0.0-alpha.8", "description": "", "keywords": [ "storybook" diff --git a/code/lib/preview-api/package.json b/code/lib/preview-api/package.json index 9427f98ad86..5eef064e569 100644 --- a/code/lib/preview-api/package.json +++ b/code/lib/preview-api/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preview-api", - "version": "8.0.0-alpha.7", + "version": "8.0.0-alpha.8", "description": "", "keywords": [ "storybook" diff --git a/code/lib/preview/package.json b/code/lib/preview/package.json index 4ffacc49c87..f7e34a1d9cd 100644 --- a/code/lib/preview/package.json +++ b/code/lib/preview/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preview", - "version": "8.0.0-alpha.7", + "version": "8.0.0-alpha.8", "description": "", "keywords": [ "storybook" diff --git a/code/lib/react-dom-shim/package.json b/code/lib/react-dom-shim/package.json index 482a69d83c1..e13b5b2f3f9 100644 --- a/code/lib/react-dom-shim/package.json +++ b/code/lib/react-dom-shim/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/react-dom-shim", - "version": "8.0.0-alpha.7", + "version": "8.0.0-alpha.8", "description": "", "keywords": [ "storybook" diff --git a/code/lib/router/package.json b/code/lib/router/package.json index 8b1279d46ff..04883c6c9d8 100644 --- a/code/lib/router/package.json +++ b/code/lib/router/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/router", - "version": "8.0.0-alpha.7", + "version": "8.0.0-alpha.8", "description": "Core Storybook Router", "keywords": [ "storybook" diff --git a/code/lib/source-loader/package.json b/code/lib/source-loader/package.json index 77ea29a9690..154007cfc6a 100644 --- a/code/lib/source-loader/package.json +++ b/code/lib/source-loader/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/source-loader", - "version": "8.0.0-alpha.7", + "version": "8.0.0-alpha.8", "description": "Source loader", "keywords": [ "lib", diff --git a/code/lib/telemetry/package.json b/code/lib/telemetry/package.json index d8ade437260..877b60b0b3e 100644 --- a/code/lib/telemetry/package.json +++ b/code/lib/telemetry/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/telemetry", - "version": "8.0.0-alpha.7", + "version": "8.0.0-alpha.8", "description": "Telemetry logging for crash reports and usage statistics", "keywords": [ "storybook" diff --git a/code/lib/test/package.json b/code/lib/test/package.json index 2c96d06ae7f..15da6f44b61 100644 --- a/code/lib/test/package.json +++ b/code/lib/test/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/test", - "version": "8.0.0-alpha.7", + "version": "8.0.0-alpha.8", "description": "", "keywords": [ "storybook" diff --git a/code/lib/theming/package.json b/code/lib/theming/package.json index 3483ca3fc3c..4c9a709946b 100644 --- a/code/lib/theming/package.json +++ b/code/lib/theming/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/theming", - "version": "8.0.0-alpha.7", + "version": "8.0.0-alpha.8", "description": "Core Storybook Components", "keywords": [ "storybook" diff --git a/code/lib/types/package.json b/code/lib/types/package.json index 40f0b0b9987..082aa0769ac 100644 --- a/code/lib/types/package.json +++ b/code/lib/types/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/types", - "version": "8.0.0-alpha.7", + "version": "8.0.0-alpha.8", "description": "Core Storybook TS Types", "keywords": [ "storybook" diff --git a/code/package.json b/code/package.json index d9c52efe757..1141320db2f 100644 --- a/code/package.json +++ b/code/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/root", - "version": "8.0.0-alpha.7", + "version": "8.0.0-alpha.8", "private": true, "description": "Storybook root", "homepage": "https://storybook.js.org/", @@ -309,6 +309,5 @@ "Dependency Upgrades" ] ] - }, - "deferredNextVersion": "8.0.0-alpha.8" + } } diff --git a/code/presets/create-react-app/package.json b/code/presets/create-react-app/package.json index 81c2824615f..00e0c3ae3f6 100644 --- a/code/presets/create-react-app/package.json +++ b/code/presets/create-react-app/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preset-create-react-app", - "version": "8.0.0-alpha.7", + "version": "8.0.0-alpha.8", "description": "Storybook for Create React App preset", "keywords": [ "storybook" diff --git a/code/presets/html-webpack/package.json b/code/presets/html-webpack/package.json index 3bee502d3fb..79310af1d1e 100644 --- a/code/presets/html-webpack/package.json +++ b/code/presets/html-webpack/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preset-html-webpack", - "version": "8.0.0-alpha.7", + "version": "8.0.0-alpha.8", "description": "Storybook for HTML: View HTML snippets in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/presets/preact-webpack/package.json b/code/presets/preact-webpack/package.json index d7bf0a6fc58..b037246b106 100644 --- a/code/presets/preact-webpack/package.json +++ b/code/presets/preact-webpack/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preset-preact-webpack", - "version": "8.0.0-alpha.7", + "version": "8.0.0-alpha.8", "description": "Storybook for Preact: Develop Preact Component in isolation.", "keywords": [ "storybook" diff --git a/code/presets/react-webpack/package.json b/code/presets/react-webpack/package.json index fec3a26cf72..3dedeab48ff 100644 --- a/code/presets/react-webpack/package.json +++ b/code/presets/react-webpack/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preset-react-webpack", - "version": "8.0.0-alpha.7", + "version": "8.0.0-alpha.8", "description": "Storybook for React: Develop React Component in isolation with Hot Reloading", "keywords": [ "storybook" diff --git a/code/presets/server-webpack/package.json b/code/presets/server-webpack/package.json index 30dcd273034..fb78b0d00d8 100644 --- a/code/presets/server-webpack/package.json +++ b/code/presets/server-webpack/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preset-server-webpack", - "version": "8.0.0-alpha.7", + "version": "8.0.0-alpha.8", "description": "Storybook for Server: View HTML snippets from a server in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/presets/svelte-webpack/package.json b/code/presets/svelte-webpack/package.json index d2324eebc00..f026579c323 100644 --- a/code/presets/svelte-webpack/package.json +++ b/code/presets/svelte-webpack/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preset-svelte-webpack", - "version": "8.0.0-alpha.7", + "version": "8.0.0-alpha.8", "description": "Storybook for Svelte: Develop Svelte Component in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/presets/vue3-webpack/package.json b/code/presets/vue3-webpack/package.json index c6107dba203..7ae5f8e5920 100644 --- a/code/presets/vue3-webpack/package.json +++ b/code/presets/vue3-webpack/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preset-vue3-webpack", - "version": "8.0.0-alpha.7", + "version": "8.0.0-alpha.8", "description": "Storybook for Vue 3: Develop Vue 3 Components in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/presets/web-components-webpack/package.json b/code/presets/web-components-webpack/package.json index 725c8028614..2e87f7d3a20 100644 --- a/code/presets/web-components-webpack/package.json +++ b/code/presets/web-components-webpack/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preset-web-components-webpack", - "version": "8.0.0-alpha.7", + "version": "8.0.0-alpha.8", "description": "Storybook for web-components: View web components snippets in isolation with Hot Reloading.", "keywords": [ "lit", diff --git a/code/renderers/html/package.json b/code/renderers/html/package.json index 59b01b05b12..07796f7497f 100644 --- a/code/renderers/html/package.json +++ b/code/renderers/html/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/html", - "version": "8.0.0-alpha.7", + "version": "8.0.0-alpha.8", "description": "Storybook HTML renderer", "keywords": [ "storybook" diff --git a/code/renderers/preact/package.json b/code/renderers/preact/package.json index ab5b02ac821..1329733fc1d 100644 --- a/code/renderers/preact/package.json +++ b/code/renderers/preact/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preact", - "version": "8.0.0-alpha.7", + "version": "8.0.0-alpha.8", "description": "Storybook Preact renderer", "keywords": [ "storybook" diff --git a/code/renderers/react/package.json b/code/renderers/react/package.json index b6cdf5691fe..77b8bc412b1 100644 --- a/code/renderers/react/package.json +++ b/code/renderers/react/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/react", - "version": "8.0.0-alpha.7", + "version": "8.0.0-alpha.8", "description": "Storybook React renderer", "keywords": [ "storybook" diff --git a/code/renderers/server/package.json b/code/renderers/server/package.json index 5a271fc210d..ce81de49cdc 100644 --- a/code/renderers/server/package.json +++ b/code/renderers/server/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/server", - "version": "8.0.0-alpha.7", + "version": "8.0.0-alpha.8", "description": "Storybook Server renderer", "keywords": [ "storybook" diff --git a/code/renderers/svelte/package.json b/code/renderers/svelte/package.json index fa35804f1f7..386a15f4d13 100644 --- a/code/renderers/svelte/package.json +++ b/code/renderers/svelte/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/svelte", - "version": "8.0.0-alpha.7", + "version": "8.0.0-alpha.8", "description": "Storybook Svelte renderer", "keywords": [ "storybook" diff --git a/code/renderers/vue3/package.json b/code/renderers/vue3/package.json index 19cadb7167b..f710f9a92c4 100644 --- a/code/renderers/vue3/package.json +++ b/code/renderers/vue3/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/vue3", - "version": "8.0.0-alpha.7", + "version": "8.0.0-alpha.8", "description": "Storybook Vue 3 renderer", "keywords": [ "storybook" diff --git a/code/renderers/web-components/package.json b/code/renderers/web-components/package.json index b920b75aaab..27d7384a2b8 100644 --- a/code/renderers/web-components/package.json +++ b/code/renderers/web-components/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/web-components", - "version": "8.0.0-alpha.7", + "version": "8.0.0-alpha.8", "description": "Storybook web-components renderer", "keywords": [ "lit", diff --git a/code/ui/blocks/package.json b/code/ui/blocks/package.json index a8199801e1a..1141822b19d 100644 --- a/code/ui/blocks/package.json +++ b/code/ui/blocks/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/blocks", - "version": "8.0.0-alpha.7", + "version": "8.0.0-alpha.8", "description": "Storybook Doc Blocks", "keywords": [ "storybook" diff --git a/code/ui/components/package.json b/code/ui/components/package.json index 74d3f290d88..a2ebf3bd843 100644 --- a/code/ui/components/package.json +++ b/code/ui/components/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/components", - "version": "8.0.0-alpha.7", + "version": "8.0.0-alpha.8", "description": "Core Storybook Components", "keywords": [ "storybook" diff --git a/code/ui/manager/package.json b/code/ui/manager/package.json index 866fa7b60f9..92ba5532c00 100644 --- a/code/ui/manager/package.json +++ b/code/ui/manager/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/manager", - "version": "8.0.0-alpha.7", + "version": "8.0.0-alpha.8", "description": "Core Storybook UI", "keywords": [ "storybook"