Merge branch 'next' into kasper/disable-upgrade-to-same-version-error

storybookjs · May 22, 2024 · ff1f2f4 · ff1f2f4
2 parents 7bff9d1 + 59bf7a2
commit ff1f2f4
Show file tree

Hide file tree

Showing 13 changed files with 124 additions and 89 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,8 @@
+## 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-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/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/renderers/svelte/template/components/Pre.svelte b/code/renderers/svelte/template/components/Pre.svelte
@@ -12,7 +12,7 @@
    */
   export let text = '';
 
-  const finalText = object ? JSON.stringify(object, null, 2) : text;
+  $: finalText = object ? JSON.stringify(object, null, 2) : text;
 </script>
 
 <pre data-testid="pre" {style}>{finalText}</pre>
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;
 }

diff --git a/code/ui/manager/static/fonts.css b/code/ui/manager/static/fonts.css