Merge pull request #28907 from storybookjs/yann/introduce-project-ann…

…otations-to-other-packages

Core: Introduce setProjectAnnotations API to more renderers and frameworks

.circleci/config.yml

@@ -403,7 +403,7 @@ jobs:
       parallelism:
         type: integer
     executor:
-      class: large
+      class: xlarge
       name: sb_playwright
     parallelism: << parameters.parallelism >>
     steps:

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';
 

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<any>
+    | NamedOrDefaultProjectAnnotations<any>[]
+): NormalizedProjectAnnotations<AngularRenderer> {
+  setDefaultProjectAnnotations(INTERNAL_DEFAULT_PROJECT_ANNOTATIONS);
+  return originalSetProjectAnnotations(
+    projectAnnotations
+  ) as NormalizedProjectAnnotations<AngularRenderer>;
+}

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';
  *

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';
  *

code/frameworks/sveltekit/src/index.ts

@@ -1 +1,2 @@
 export * from './types';
+export * from './portable-stories';

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<any>
+    | NamedOrDefaultProjectAnnotations<any>[]
+): NormalizedProjectAnnotations<SvelteRenderer> {
+  setDefaultProjectAnnotations(INTERNAL_DEFAULT_PROJECT_ANNOTATIONS);
+  return originalSetProjectAnnotations(
+    projectAnnotations
+  ) as NormalizedProjectAnnotations<SvelteRenderer>;
+}
+
+// This will not be necessary once we have auto preset loading
+const INTERNAL_DEFAULT_PROJECT_ANNOTATIONS: ProjectAnnotations<SvelteRenderer> = composeConfigs([
+  svelteAnnotations,
+  svelteKitAnnotations,
+]);

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
 

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<any>
+    | NamedOrDefaultProjectAnnotations<any>[]
+): NormalizedProjectAnnotations<HtmlRenderer> {
+  setDefaultProjectAnnotations(INTERNAL_DEFAULT_PROJECT_ANNOTATIONS);
+  return originalSetProjectAnnotations(
+    projectAnnotations
+  ) as NormalizedProjectAnnotations<HtmlRenderer>;
+}

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
 

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<any>
+    | NamedOrDefaultProjectAnnotations<any>[]
+): NormalizedProjectAnnotations<PreactRenderer> {
+  setDefaultProjectAnnotations(INTERNAL_DEFAULT_PROJECT_ANNOTATIONS);
+  return originalSetProjectAnnotations(
+    projectAnnotations
+  ) as NormalizedProjectAnnotations<PreactRenderer>;
+}

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';
  *

code/renderers/svelte/src/portable-stories.ts

@@ -49,7 +49,7 @@ type MapToComposed<TModule> = {
  * Example:
  *
  * ```jsx
- * // setup.js (for jest)
+ * // setup-file.js
  * import { setProjectAnnotations } from '@storybook/svelte';
  * import projectAnnotations from './.storybook/preview';
  *

code/renderers/vue3/src/portable-stories.ts

@@ -39,7 +39,7 @@ type MapToJSXAble<T> = {
  * Example:
  *
  * ```jsx
- * // setup.js (for jest)
+ * // setup-file.js
  * import { setProjectAnnotations } from '@storybook/vue3';
  * import projectAnnotations from './.storybook/preview';
  *

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) {

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<any>
+    | NamedOrDefaultProjectAnnotations<any>[]
+): NormalizedProjectAnnotations<WebComponentsRenderer> {
+  setDefaultProjectAnnotations(webComponentsAnnotations);
+  return originalSetProjectAnnotations(
+    projectAnnotations
+  ) as NormalizedProjectAnnotations<WebComponentsRenderer>;
+}

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