Merge branch 'next' into remove-unused-imports

storybookjs · May 23, 2024 · be4933b · be4933b
2 parents 5f21385 + 99882a3
commit be4933b
Show file tree

Hide file tree

Showing 22 changed files with 192 additions and 118 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,13 @@
+## 8.1.3
+
+- Angular: Support v18 - [#27237](https://github.com/storybookjs/storybook/pull/27237), thanks @valentinpalkovic!
+- Telemetry: Add test packages - [#27226](https://github.com/storybookjs/storybook/pull/27226), thanks @shilman!
+
+## 8.1.2
+
+- Angular: Fix filtering of workspace config styles - [#27108](https://github.com/storybookjs/storybook/pull/27108), thanks @valentinpalkovic!
+- Next.js: Avoid interfering with the svgr loader - [#27198](https://github.com/storybookjs/storybook/pull/27198), thanks @seanparmelee!
+
 ## 8.1.1
 
 - Docgen: Only add react-docgen info when a component is defined in the file - [#26967](https://github.com/storybookjs/storybook/pull/26967), thanks @glenjamin!

diff --git a/code/addons/a11y/src/a11yRunner.ts b/code/addons/a11y/src/a11yRunner.ts
@@ -17,9 +17,9 @@ const defaultParameters = { config: {}, options: {} };
  * Handle A11yContext events.
  * Because the event are sent without manual check, we split calls
  */
-const handleRequest = async (storyId: string, input: A11yParameters = defaultParameters) => {
+const handleRequest = async (storyId: string, input: A11yParameters | null) => {
   if (!input?.manual) {
-    await run(storyId, input);
+    await run(storyId, input ?? defaultParameters);
   }
 };
 

diff --git a/code/builders/builder-manager/templates/template.ejs b/code/builders/builder-manager/templates/template.ejs
@@ -11,21 +11,39 @@
     <% } else if (favicon.endsWith('.ico')) { %>
     <link rel="icon" type="image/x-icon" href="./<%= favicon %>" />
     <% } %>
-    <link
-      rel="prefetch"
-      href="./sb-common-assets/nunito-sans-regular.woff2"
-      as="font"
-      type="font/woff2"
-      crossorigin
-    />
-    <link
-      rel="prefetch"
-      href="./sb-common-assets/nunito-sans-bold.woff2"
-      as="font"
-      type="font/woff2"
-      crossorigin
-    />
-    <link rel="stylesheet" href="./sb-common-assets/fonts.css" />
+    <style>
+      @font-face {
+        font-family: 'Nunito Sans';
+        font-style: normal;
+        font-weight: 400;
+        font-display: swap;
+        src: url('./sb-common-assets/nunito-sans-regular.woff2') format('woff2');
+      }
+
+      @font-face {
+        font-family: 'Nunito Sans';
+        font-style: italic;
+        font-weight: 400;
+        font-display: swap;
+        src: url('./sb-common-assets/nunito-sans-italic.woff2') format('woff2');
+      }
+
+      @font-face {
+        font-family: 'Nunito Sans';
+        font-style: normal;
+        font-weight: 700;
+        font-display: swap;
+        src: url('./sb-common-assets/nunito-sans-bold.woff2') format('woff2');
+      }
+
+      @font-face {
+        font-family: 'Nunito Sans';
+        font-style: italic;
+        font-weight: 700;
+        font-display: swap;
+        src: url('./sb-common-assets/nunito-sans-bold-italic.woff2') format('woff2');
+      }
+    </style>
 
     <link href="./sb-manager/runtime.js" rel="modulepreload" />
 

diff --git a/code/builders/builder-vite/input/iframe.html b/code/builders/builder-vite/input/iframe.html
@@ -6,35 +6,39 @@
     <title>Storybook</title>
     <meta name="viewport" content="width=device-width, initial-scale=1" />
 
-    <link
-      rel="prefetch"
-      href="./sb-common-assets/nunito-sans-regular.woff2"
-      as="font"
-      type="font/woff2"
-      crossorigin
-    />
-    <link
-      rel="prefetch"
-      href="./sb-common-assets/nunito-sans-italic.woff2"
-      as="font"
-      type="font/woff2"
-      crossorigin
-    />
-    <link
-      rel="prefetch"
-      href="./sb-common-assets/nunito-sans-bold.woff2"
-      as="font"
-      type="font/woff2"
-      crossorigin
-    />
-    <link
-      rel="prefetch"
-      href="./sb-common-assets/nunito-sans-bold-italic.woff2"
-      as="font"
-      type="font/woff2"
-      crossorigin
-    />
-    <link rel="stylesheet" href="./sb-common-assets/fonts.css" />
+    <style>
+      @font-face {
+        font-family: 'Nunito Sans';
+        font-style: normal;
+        font-weight: 400;
+        font-display: swap;
+        src: url('./sb-common-assets/nunito-sans-regular.woff2') format('woff2');
+      }
+
+      @font-face {
+        font-family: 'Nunito Sans';
+        font-style: italic;
+        font-weight: 400;
+        font-display: swap;
+        src: url('./sb-common-assets/nunito-sans-italic.woff2') format('woff2');
+      }
+
+      @font-face {
+        font-family: 'Nunito Sans';
+        font-style: normal;
+        font-weight: 700;
+        font-display: swap;
+        src: url('./sb-common-assets/nunito-sans-bold.woff2') format('woff2');
+      }
+
+      @font-face {
+        font-family: 'Nunito Sans';
+        font-style: italic;
+        font-weight: 700;
+        font-display: swap;
+        src: url('./sb-common-assets/nunito-sans-bold-italic.woff2') format('woff2');
+      }
+    </style>
 
     <script>
       window.CONFIG_TYPE = '[CONFIG_TYPE HERE]';

diff --git a/code/builders/builder-vite/src/build.ts b/code/builders/builder-vite/src/build.ts
@@ -23,8 +23,11 @@ export async function build(options: Options) {
       outDir: options.outputDir,
       emptyOutDir: false, // do not clean before running Vite build - Storybook has already added assets in there!
       rollupOptions: {
-        // Do not try to bundle the storybook runtime, it is copied into the output dir after the build.
-        external: ['./sb-preview/runtime.js'],
+        external: [
+          // Do not try to bundle the Storybook runtime, it is copied into the output dir after the build.
+          './sb-preview/runtime.js',
+          /\.\/sb-common-assets\/.*\.woff2/,
+        ],
       },
       ...(options.test
         ? {

diff --git a/code/builders/builder-vite/src/codegen-modern-iframe-script.ts b/code/builders/builder-vite/src/codegen-modern-iframe-script.ts
@@ -21,9 +21,13 @@ export async function generateModernIframeScriptCode(options: Options, projectRo
   // and the HMR handler.  We don't use the hot.accept callback params because only the changed
   // modules are provided, the rest are null.  We can just re-import everything again in that case.
   const getPreviewAnnotationsFunction = `
-  const getProjectAnnotations = async () => {
+  const getProjectAnnotations = async (hmrPreviewAnnotationModules = []) => {
     const configs = await Promise.all([${previewAnnotationURLs
-      .map((previewAnnotation) => `import('${previewAnnotation}')`)
+      .map(
+        (previewAnnotation, index) =>
+          // Prefer the updated module from an HMR update, otherwise import the original module
+          `hmrPreviewAnnotationModules.at(${index}) ?? import('${previewAnnotation}')`
+      )
       .join(',\n')}])
     return composeConfigs(configs);
   }`;
@@ -45,10 +49,10 @@ export async function generateModernIframeScriptCode(options: Options, projectRo
       window.__STORYBOOK_PREVIEW__.onStoriesChanged({ importFn: newModule.importFn });
       });
 
-    import.meta.hot.accept(${JSON.stringify(previewAnnotationURLs)}, () => {
+    import.meta.hot.accept(${JSON.stringify(previewAnnotationURLs)}, (previewAnnotationModules) => {
       ${getPreviewAnnotationsFunction}
       // getProjectAnnotations has changed so we need to patch the new one in
-      window.__STORYBOOK_PREVIEW__.onGetProjectAnnotationsChanged({ getProjectAnnotations });
+      window.__STORYBOOK_PREVIEW__.onGetProjectAnnotationsChanged({ getProjectAnnotations: () => getProjectAnnotations(previewAnnotationModules) });
     });
   }`.trim();
   };

diff --git a/code/builders/builder-webpack5/templates/preview.ejs b/code/builders/builder-webpack5/templates/preview.ejs
@@ -10,11 +10,39 @@
 
     <meta name="viewport" content="width=device-width, initial-scale=1" />
 
-    <link rel="prefetch" href="./sb-common-assets/nunito-sans-regular.woff2" as="font" type="font/woff2" crossorigin />
-    <link rel="prefetch" href="./sb-common-assets/nunito-sans-italic.woff2" as="font" type="font/woff2" crossorigin />
-    <link rel="prefetch" href="./sb-common-assets/nunito-sans-bold.woff2" as="font" type="font/woff2" crossorigin />
-    <link rel="prefetch" href="./sb-common-assets/nunito-sans-bold-italic.woff2" as="font" type="font/woff2" crossorigin />
-    <link rel="stylesheet" href="./sb-common-assets/fonts.css" />
+    <style>
+      @font-face {
+        font-family: 'Nunito Sans';
+        font-style: normal;
+        font-weight: 400;
+        font-display: swap;
+        src: url('./sb-common-assets/nunito-sans-regular.woff2') format('woff2');
+      }
+
+      @font-face {
+        font-family: 'Nunito Sans';
+        font-style: italic;
+        font-weight: 400;
+        font-display: swap;
+        src: url('./sb-common-assets/nunito-sans-italic.woff2') format('woff2');
+      }
+
+      @font-face {
+        font-family: 'Nunito Sans';
+        font-style: normal;
+        font-weight: 700;
+        font-display: swap;
+        src: url('./sb-common-assets/nunito-sans-bold.woff2') format('woff2');
+      }
+
+      @font-face {
+        font-family: 'Nunito Sans';
+        font-style: italic;
+        font-weight: 700;
+        font-display: swap;
+        src: url('./sb-common-assets/nunito-sans-bold-italic.woff2') format('woff2');
+      }
+    </style>
 
     <% if (typeof headHtmlSnippet !== 'undefined') { %> <%= headHtmlSnippet %> <% } %> <%
     htmlWebpackPlugin.files.css.forEach(file => { %>

diff --git a/code/frameworks/angular/package.json b/code/frameworks/angular/package.json
@@ -87,17 +87,17 @@
     "zone.js": "^0.14.2"
   },
   "peerDependencies": {
-    "@angular-devkit/architect": ">=0.1500.0 < 0.1800.0",
-    "@angular-devkit/build-angular": ">=15.0.0 < 18.0.0",
-    "@angular-devkit/core": ">=15.0.0 < 18.0.0",
-    "@angular/cli": ">=15.0.0 < 18.0.0",
-    "@angular/common": ">=15.0.0 < 18.0.0",
-    "@angular/compiler": ">=15.0.0 < 18.0.0",
-    "@angular/compiler-cli": ">=15.0.0 < 18.0.0",
-    "@angular/core": ">=15.0.0 < 18.0.0",
-    "@angular/forms": ">=15.0.0 < 18.0.0",
-    "@angular/platform-browser": ">=15.0.0 < 18.0.0",
-    "@angular/platform-browser-dynamic": ">=15.0.0 < 18.0.0",
+    "@angular-devkit/architect": ">=0.1500.0 < 0.1900.0",
+    "@angular-devkit/build-angular": ">=15.0.0 < 19.0.0",
+    "@angular-devkit/core": ">=15.0.0 < 19.0.0",
+    "@angular/cli": ">=15.0.0 < 19.0.0",
+    "@angular/common": ">=15.0.0 < 19.0.0",
+    "@angular/compiler": ">=15.0.0 < 19.0.0",
+    "@angular/compiler-cli": ">=15.0.0 < 19.0.0",
+    "@angular/core": ">=15.0.0 < 19.0.0",
+    "@angular/forms": ">=15.0.0 < 19.0.0",
+    "@angular/platform-browser": ">=15.0.0 < 19.0.0",
+    "@angular/platform-browser-dynamic": ">=15.0.0 < 19.0.0",
     "rxjs": "^6.0.0 || ^7.4.0",
     "typescript": "^4.0.0 || ^5.0.0",
     "zone.js": ">= 0.11.1 < 1.0.0"

diff --git a/code/lib/telemetry/src/storybook-metadata.ts b/code/lib/telemetry/src/storybook-metadata.ts
@@ -69,6 +69,34 @@ export const computeStorybookMetadata = async ({
     };
   }
 
+  const testPackages = [
+    'playwright',
+    'vitest',
+    'jest',
+    'cypress',
+    'nightwatch',
+    'webdriver',
+    '@web/test-runner',
+    'puppeteer',
+    'karma',
+    'jasmine',
+    'chai',
+    'testing-library',
+    '@ngneat/spectator',
+    'wdio',
+    'msw',
+    'miragejs',
+    'sinon',
+  ];
+  const testPackageDeps = Object.keys(allDependencies).filter((dep) =>
+    testPackages.find((pkg) => dep.includes(pkg))
+  );
+  metadata.testPackages = Object.fromEntries(
+    await Promise.all(
+      testPackageDeps.map(async (dep) => [dep, (await getActualPackageVersion(dep))?.version])
+    )
+  );
+
   const monorepoType = getMonorepoType();
   if (monorepoType) {
     metadata.monorepo = monorepoType;

diff --git a/code/lib/telemetry/src/types.ts b/code/lib/telemetry/src/types.ts
@@ -54,6 +54,7 @@ export type StorybookMetadata = {
     packageName: string;
     version: string;
   };
+  testPackages?: Record<string, string | undefined>;
   hasStorybookEslint?: boolean;
   hasStaticDirs?: boolean;
   hasCustomWebpack?: boolean;

diff --git a/code/lib/types/src/modules/core-common.ts b/code/lib/types/src/modules/core-common.ts
@@ -582,4 +582,4 @@ export interface CoreCommon_StorybookInfo {
  * const framework: Framework = '@storybook/nextjs'; // valid and will be autocompleted
  * const framework: Framework = path.dirname(require.resolve(path.join("@storybook/nextjs", "package.json"))) // valid
  */
-export type CompatibleString<T extends string> = T | (string & Record<string, never>);
+export type CompatibleString<T extends string> = T | (string & {});
diff --git a/code/ui/blocks/src/blocks/Story.stories.tsx b/code/ui/blocks/src/blocks/Story.stories.tsx
@@ -171,6 +171,9 @@ export const WithInteractionsAutoplayInParameters: Story = {
 
 export const ForceInitialArgs: Story = {
   ...StoryComponentStories.ForceInitialArgs,
+  parameters: {
+    chromatic: { disableSnapshot: true },
+  },
   args: {
     of: ButtonStories.Primary,
     storyExport: ButtonStories.Primary,

diff --git a/code/ui/blocks/src/components/Story.stories.tsx b/code/ui/blocks/src/components/Story.stories.tsx
@@ -82,6 +82,9 @@ export const ForceInitialArgs = {
     forceInitialArgs: true,
     renderStoryToElement,
   },
+  parameters: {
+    chromatic: { disableSnapshot: true },
+  },
   // test that it ignores updated args by emitting an arg update and assert that it isn't reflected in the DOM
   play: async ({ args, canvasElement, loaded }: PlayFunctionContext<WebRenderer>) => {
     const docsContext = loaded.docsContext as DocsContextProps;

diff --git a/code/ui/blocks/src/controls/Date.tsx b/code/ui/blocks/src/controls/Date.tsx
@@ -74,15 +74,16 @@ export const DateControl: FC<DateProps> = ({ name, value, onChange, onFocus, onB
   useEffect(() => {
     if (valid !== false) {
       if (dateRef && dateRef.current) {
-        dateRef.current.value = formatDate(value);
+        dateRef.current.value = value ? formatDate(value) : '';
       }
       if (timeRef && timeRef.current) {
-        timeRef.current.value = formatTime(value);
+        timeRef.current.value = value ? formatTime(value) : '';
       }
     }
   }, [value]);
 
   const onDateChange = (e: ChangeEvent<HTMLInputElement>) => {
+    if (!e.target.value) return onChange();
     const parsed = parseDate(e.target.value);
     const result = new Date(value);
     result.setFullYear(parsed.getFullYear(), parsed.getMonth(), parsed.getDate());
@@ -92,6 +93,7 @@ export const DateControl: FC<DateProps> = ({ name, value, onChange, onFocus, onB
   };
 
   const onTimeChange = (e: ChangeEvent<HTMLInputElement>) => {
+    if (!e.target.value) return onChange();
     const parsed = parseTime(e.target.value);
     const result = new Date(value);
     result.setHours(parsed.getHours());

diff --git a/code/ui/blocks/src/controls/types.ts b/code/ui/blocks/src/controls/types.ts
@@ -5,7 +5,7 @@ export interface ControlProps<T> {
   value?: T;
   defaultValue?: T;
   argType?: ArgType;
-  onChange: (value: T) => T | void;
+  onChange: (value?: T) => T | void;
   onFocus?: (evt: any) => void;
   onBlur?: (evt: any) => void;
 }