diff --git a/.circleci/config.yml b/.circleci/config.yml index cd966b042091..81ea1ffde026 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -403,7 +403,7 @@ jobs: parallelism: type: integer executor: - class: large + class: xlarge name: sb_playwright parallelism: << parameters.parallelism >> steps: diff --git a/code/frameworks/angular/src/client/index.ts b/code/frameworks/angular/src/client/index.ts index 45388bcad324..221d365718d5 100644 --- a/code/frameworks/angular/src/client/index.ts +++ b/code/frameworks/angular/src/client/index.ts @@ -2,6 +2,7 @@ import './globals'; export * from './public-types'; +export * from './portable-stories'; export type { StoryFnAngularReturnType as IStory } from './types'; diff --git a/code/frameworks/angular/src/client/portable-stories.ts b/code/frameworks/angular/src/client/portable-stories.ts new file mode 100644 index 000000000000..4f4246ddf3e4 --- /dev/null +++ b/code/frameworks/angular/src/client/portable-stories.ts @@ -0,0 +1,42 @@ +import { + setProjectAnnotations as originalSetProjectAnnotations, + setDefaultProjectAnnotations, +} from 'storybook/internal/preview-api'; +import { + NamedOrDefaultProjectAnnotations, + NormalizedProjectAnnotations, +} from 'storybook/internal/types'; + +import * as INTERNAL_DEFAULT_PROJECT_ANNOTATIONS from './render'; +import { AngularRenderer } from './types'; + +/** + * Function that sets the globalConfig of your storybook. The global config is the preview module of + * your .storybook folder. + * + * It should be run a single time, so that your global config (e.g. decorators) is applied to your + * stories when using `composeStories` or `composeStory`. + * + * Example: + * + * ```jsx + * // setup-file.js + * import { setProjectAnnotations } from '@storybook/angular'; + * + * import projectAnnotations from './.storybook/preview'; + * + * setProjectAnnotations(projectAnnotations); + * ``` + * + * @param projectAnnotations - E.g. (import projectAnnotations from '../.storybook/preview') + */ +export function setProjectAnnotations( + projectAnnotations: + | NamedOrDefaultProjectAnnotations + | NamedOrDefaultProjectAnnotations[] +): NormalizedProjectAnnotations { + setDefaultProjectAnnotations(INTERNAL_DEFAULT_PROJECT_ANNOTATIONS); + return originalSetProjectAnnotations( + projectAnnotations + ) as NormalizedProjectAnnotations; +} diff --git a/code/frameworks/experimental-nextjs-vite/src/portable-stories.ts b/code/frameworks/experimental-nextjs-vite/src/portable-stories.ts index f03e89bce5b5..1fbbcc24dd8c 100644 --- a/code/frameworks/experimental-nextjs-vite/src/portable-stories.ts +++ b/code/frameworks/experimental-nextjs-vite/src/portable-stories.ts @@ -32,7 +32,7 @@ import * as nextJsAnnotations from './preview'; * Example: * * ```jsx - * // setup.js (for jest) + * // setup-file.js * import { setProjectAnnotations } from '@storybook/experimental-nextjs-vite'; * import projectAnnotations from './.storybook/preview'; * diff --git a/code/frameworks/nextjs/src/portable-stories.ts b/code/frameworks/nextjs/src/portable-stories.ts index 28295342b4c8..a49d6bdf8162 100644 --- a/code/frameworks/nextjs/src/portable-stories.ts +++ b/code/frameworks/nextjs/src/portable-stories.ts @@ -32,7 +32,7 @@ import * as nextJsAnnotations from './preview'; * Example: * * ```jsx - * // setup.js (for jest) + * // setup-file.js * import { setProjectAnnotations } from '@storybook/nextjs'; * import projectAnnotations from './.storybook/preview'; * diff --git a/code/frameworks/sveltekit/src/index.ts b/code/frameworks/sveltekit/src/index.ts index fcb073fefcd6..a904f93ec89d 100644 --- a/code/frameworks/sveltekit/src/index.ts +++ b/code/frameworks/sveltekit/src/index.ts @@ -1 +1,2 @@ export * from './types'; +export * from './portable-stories'; diff --git a/code/frameworks/sveltekit/src/portable-stories.ts b/code/frameworks/sveltekit/src/portable-stories.ts new file mode 100644 index 000000000000..9edaaf8ac55b --- /dev/null +++ b/code/frameworks/sveltekit/src/portable-stories.ts @@ -0,0 +1,51 @@ +import { + composeConfigs, + setProjectAnnotations as originalSetProjectAnnotations, + setDefaultProjectAnnotations, +} from 'storybook/internal/preview-api'; +import type { + NamedOrDefaultProjectAnnotations, + NormalizedProjectAnnotations, + ProjectAnnotations, +} from 'storybook/internal/types'; + +import type { SvelteRenderer } from '@storybook/svelte'; +import { INTERNAL_DEFAULT_PROJECT_ANNOTATIONS as svelteAnnotations } from '@storybook/svelte'; + +import * as svelteKitAnnotations from './preview'; + +/** + * Function that sets the globalConfig of your storybook. The global config is the preview module of + * your .storybook folder. + * + * It should be run a single time, so that your global config (e.g. decorators) is applied to your + * stories when using `composeStories` or `composeStory`. + * + * Example: + * + * ```jsx + * // setup-file.js + * import { setProjectAnnotations } from '@storybook/sveltekit'; + * import projectAnnotations from './.storybook/preview'; + * + * setProjectAnnotations(projectAnnotations); + * ``` + * + * @param projectAnnotations - E.g. (import projectAnnotations from '../.storybook/preview') + */ +export function setProjectAnnotations( + projectAnnotations: + | NamedOrDefaultProjectAnnotations + | NamedOrDefaultProjectAnnotations[] +): NormalizedProjectAnnotations { + setDefaultProjectAnnotations(INTERNAL_DEFAULT_PROJECT_ANNOTATIONS); + return originalSetProjectAnnotations( + projectAnnotations + ) as NormalizedProjectAnnotations; +} + +// This will not be necessary once we have auto preset loading +const INTERNAL_DEFAULT_PROJECT_ANNOTATIONS: ProjectAnnotations = composeConfigs([ + svelteAnnotations, + svelteKitAnnotations, +]); diff --git a/code/renderers/html/src/index.ts b/code/renderers/html/src/index.ts index 13fea98639ff..80c844382e83 100644 --- a/code/renderers/html/src/index.ts +++ b/code/renderers/html/src/index.ts @@ -2,6 +2,7 @@ import './globals'; export * from './public-types'; +export * from './portable-stories'; // optimization: stop HMR propagation in webpack diff --git a/code/renderers/html/src/portable-stories.ts b/code/renderers/html/src/portable-stories.ts new file mode 100644 index 000000000000..f19a5e0d6561 --- /dev/null +++ b/code/renderers/html/src/portable-stories.ts @@ -0,0 +1,41 @@ +import { + setProjectAnnotations as originalSetProjectAnnotations, + setDefaultProjectAnnotations, +} from 'storybook/internal/preview-api'; +import type { + NamedOrDefaultProjectAnnotations, + NormalizedProjectAnnotations, +} from 'storybook/internal/types'; + +import * as INTERNAL_DEFAULT_PROJECT_ANNOTATIONS from './entry-preview'; +import type { HtmlRenderer } from './types'; + +/** + * Function that sets the globalConfig of your storybook. The global config is the preview module of + * your .storybook folder. + * + * It should be run a single time, so that your global config (e.g. decorators) is applied to your + * stories when using `composeStories` or `composeStory`. + * + * Example: + * + * ```jsx + * // setup-file.js + * import { setProjectAnnotations } from '@storybook/preact'; + * import projectAnnotations from './.storybook/preview'; + * + * setProjectAnnotations(projectAnnotations); + * ``` + * + * @param projectAnnotations - E.g. (import projectAnnotations from '../.storybook/preview') + */ +export function setProjectAnnotations( + projectAnnotations: + | NamedOrDefaultProjectAnnotations + | NamedOrDefaultProjectAnnotations[] +): NormalizedProjectAnnotations { + setDefaultProjectAnnotations(INTERNAL_DEFAULT_PROJECT_ANNOTATIONS); + return originalSetProjectAnnotations( + projectAnnotations + ) as NormalizedProjectAnnotations; +} diff --git a/code/renderers/preact/src/index.ts b/code/renderers/preact/src/index.ts index 13fea98639ff..80c844382e83 100644 --- a/code/renderers/preact/src/index.ts +++ b/code/renderers/preact/src/index.ts @@ -2,6 +2,7 @@ import './globals'; export * from './public-types'; +export * from './portable-stories'; // optimization: stop HMR propagation in webpack diff --git a/code/renderers/preact/src/portable-stories.ts b/code/renderers/preact/src/portable-stories.ts new file mode 100644 index 000000000000..cc9ca05a2627 --- /dev/null +++ b/code/renderers/preact/src/portable-stories.ts @@ -0,0 +1,41 @@ +import { + setProjectAnnotations as originalSetProjectAnnotations, + setDefaultProjectAnnotations, +} from 'storybook/internal/preview-api'; +import type { + NamedOrDefaultProjectAnnotations, + NormalizedProjectAnnotations, +} from 'storybook/internal/types'; + +import * as INTERNAL_DEFAULT_PROJECT_ANNOTATIONS from './entry-preview'; +import type { PreactRenderer } from './types'; + +/** + * Function that sets the globalConfig of your storybook. The global config is the preview module of + * your .storybook folder. + * + * It should be run a single time, so that your global config (e.g. decorators) is applied to your + * stories when using `composeStories` or `composeStory`. + * + * Example: + * + * ```jsx + * // setup-file.js + * import { setProjectAnnotations } from '@storybook/preact'; + * import projectAnnotations from './.storybook/preview'; + * + * setProjectAnnotations(projectAnnotations); + * ``` + * + * @param projectAnnotations - E.g. (import projectAnnotations from '../.storybook/preview') + */ +export function setProjectAnnotations( + projectAnnotations: + | NamedOrDefaultProjectAnnotations + | NamedOrDefaultProjectAnnotations[] +): NormalizedProjectAnnotations { + setDefaultProjectAnnotations(INTERNAL_DEFAULT_PROJECT_ANNOTATIONS); + return originalSetProjectAnnotations( + projectAnnotations + ) as NormalizedProjectAnnotations; +} diff --git a/code/renderers/react/src/portable-stories.tsx b/code/renderers/react/src/portable-stories.tsx index 6969be0d65e8..2ea196e85b4b 100644 --- a/code/renderers/react/src/portable-stories.tsx +++ b/code/renderers/react/src/portable-stories.tsx @@ -31,7 +31,7 @@ import type { ReactRenderer } from './types'; * Example: * * ```jsx - * // setup.js (for jest) + * // setup-file.js * import { setProjectAnnotations } from '@storybook/react'; * import projectAnnotations from './.storybook/preview'; * diff --git a/code/renderers/svelte/src/portable-stories.ts b/code/renderers/svelte/src/portable-stories.ts index 416025c0346e..309b6c4071d4 100644 --- a/code/renderers/svelte/src/portable-stories.ts +++ b/code/renderers/svelte/src/portable-stories.ts @@ -49,7 +49,7 @@ type MapToComposed = { * Example: * * ```jsx - * // setup.js (for jest) + * // setup-file.js * import { setProjectAnnotations } from '@storybook/svelte'; * import projectAnnotations from './.storybook/preview'; * diff --git a/code/renderers/vue3/src/portable-stories.ts b/code/renderers/vue3/src/portable-stories.ts index eeba697c0023..e02b36b53628 100644 --- a/code/renderers/vue3/src/portable-stories.ts +++ b/code/renderers/vue3/src/portable-stories.ts @@ -39,7 +39,7 @@ type MapToJSXAble = { * Example: * * ```jsx - * // setup.js (for jest) + * // setup-file.js * import { setProjectAnnotations } from '@storybook/vue3'; * import projectAnnotations from './.storybook/preview'; * diff --git a/code/renderers/web-components/src/index.ts b/code/renderers/web-components/src/index.ts index 58076b752f2b..0399ac731032 100644 --- a/code/renderers/web-components/src/index.ts +++ b/code/renderers/web-components/src/index.ts @@ -7,6 +7,7 @@ const { window, EventSource } = global; export * from './public-types'; export * from './framework-api'; +export * from './portable-stories'; // TODO: disable HMR and do full page loads because of customElements.define if (typeof module !== 'undefined' && module?.hot?.decline) { diff --git a/code/renderers/web-components/src/portable-stories.ts b/code/renderers/web-components/src/portable-stories.ts new file mode 100644 index 000000000000..c5eb2c9883cd --- /dev/null +++ b/code/renderers/web-components/src/portable-stories.ts @@ -0,0 +1,41 @@ +import { + setProjectAnnotations as originalSetProjectAnnotations, + setDefaultProjectAnnotations, +} from 'storybook/internal/preview-api'; +import type { + NamedOrDefaultProjectAnnotations, + NormalizedProjectAnnotations, +} from 'storybook/internal/types'; + +import * as webComponentsAnnotations from './entry-preview'; +import type { WebComponentsRenderer } from './types'; + +/** + * Function that sets the globalConfig of your storybook. The global config is the preview module of + * your .storybook folder. + * + * It should be run a single time, so that your global config (e.g. decorators) is applied to your + * stories when using `composeStories` or `composeStory`. + * + * Example: + * + * ```jsx + * // setup-file.js + * import { setProjectAnnotations } from '@storybook/web-components'; + * import projectAnnotations from './.storybook/preview'; + * + * setProjectAnnotations(projectAnnotations); + * ``` + * + * @param projectAnnotations - E.g. (import projectAnnotations from '../.storybook/preview') + */ +export function setProjectAnnotations( + projectAnnotations: + | NamedOrDefaultProjectAnnotations + | NamedOrDefaultProjectAnnotations[] +): NormalizedProjectAnnotations { + setDefaultProjectAnnotations(webComponentsAnnotations); + return originalSetProjectAnnotations( + projectAnnotations + ) as NormalizedProjectAnnotations; +} diff --git a/scripts/tasks/sandbox-parts.ts b/scripts/tasks/sandbox-parts.ts index ed157aad2075..3bd7dc9b3624 100644 --- a/scripts/tasks/sandbox-parts.ts +++ b/scripts/tasks/sandbox-parts.ts @@ -366,7 +366,15 @@ export async function setupVitest(details: TemplateDetails, options: PassedOptio const isVue = template.expected.renderer === '@storybook/vue3'; const isNextjs = template.expected.framework.includes('nextjs'); // const isAngular = template.expected.framework === '@storybook/angular'; - const storybookPackage = isNextjs ? template.expected.framework : template.expected.renderer; + + const portableStoriesFrameworks = [ + '@storybook/nextjs', + '@storybook/experimental-nextjs-vite', + // TODO: add sveltekit and angular once we enable their sandboxes + ]; + const storybookPackage = portableStoriesFrameworks.includes(template.expected.framework) + ? template.expected.framework + : template.expected.renderer; const viteConfigPath = template.name.includes('JavaScript') ? 'vite.config.js' : 'vite.config.ts'; await writeFile( @@ -480,7 +488,8 @@ export async function setupVitest(details: TemplateDetails, options: PassedOptio packageJson.scripts = { ...packageJson.scripts, - vitest: 'vitest --pass-with-no-tests --reporter=default --reporter=hanging-process', + vitest: + 'vitest --pass-with-no-tests --reporter=default --reporter=hanging-process --test-timeout=5000', }; // This workaround is needed because Vitest seems to have issues in link mode