Merge branch 'next' into valentin/use-type-module-in-scripts

code/addons/viewport/src/defaults.ts

@@ -89,6 +89,62 @@ export const INITIAL_VIEWPORTS: ViewportMap = {
     },
     type: 'mobile',
   },
+  iphoneSE3: {
+    name: 'iPhone SE 3rd generation',
+    styles: {
+      height: '667px',
+      width: '375px',
+    },
+    type: 'mobile',
+  },
+  iphone13: {
+    name: 'iPhone 13',
+    styles: {
+      height: '844px',
+      width: '390px',
+    },
+    type: 'mobile',
+  },
+  iphone13pro: {
+    name: 'iPhone 13 Pro',
+    styles: {
+      height: '844px',
+      width: '390px',
+    },
+    type: 'mobile',
+  },
+  iphone13promax: {
+    name: 'iPhone 13 Pro Max',
+    styles: {
+      height: '926px',
+      width: '428px',
+    },
+    type: 'mobile',
+  },
+  iphone14: {
+    name: 'iPhone 14',
+    styles: {
+      height: '844px',
+      width: '390px',
+    },
+    type: 'mobile',
+  },
+  iphone14pro: {
+    name: 'iPhone 14 Pro',
+    styles: {
+      height: '852px',
+      width: '393px',
+    },
+    type: 'mobile',
+  },
+  iphone14promax: {
+    name: 'iPhone 14 Pro Max',
+    styles: {
+      height: '932px',
+      width: '430px',
+    },
+    type: 'mobile',
+  },
   ipad: {
     name: 'iPad',
     styles: {
@@ -105,6 +161,14 @@ export const INITIAL_VIEWPORTS: ViewportMap = {
     },
     type: 'tablet',
   },
+  ipad11p: {
+    name: 'iPad Pro 11-in',
+    styles: {
+      height: '1194px',
+      width: '834px',
+    },
+    type: 'tablet',
+  },
   ipad12p: {
     name: 'iPad Pro 12.9-in',
     styles: {

code/builders/builder-vite/src/transform-iframe-html.ts

@@ -22,7 +22,7 @@ export async function transformIframeHtml(html: string, options: Options) {
   }));
 
   const otherGlobals = {
-    ...(build?.test?.emptyBlocks ? { __STORYBOOK_BLOCKS_EMPTY_MODULE__: {} } : {}),
+    ...(build?.test?.disableBlocks ? { __STORYBOOK_BLOCKS_EMPTY_MODULE__: {} } : {}),
   };
 
   return html

code/builders/builder-vite/src/vite-config.ts

@@ -79,7 +79,7 @@ export async function pluginConfig(options: Options) {
   const frameworkName = await getFrameworkName(options);
   const build = await options.presets.apply('build');
 
-  if (build?.test?.emptyBlocks) {
+  if (build?.test?.disableBlocks) {
     globals['@storybook/blocks'] = '__STORYBOOK_BLOCKS_EMPTY_MODULE__';
   }
 

code/builders/builder-webpack5/src/preview/iframe-webpack.config.ts

@@ -220,7 +220,7 @@ export default async (
     `);
   }
 
-  if (build?.test?.emptyBlocks) {
+  if (build?.test?.disableBlocks) {
     globals['@storybook/blocks'] = '__STORYBOOK_BLOCKS_EMPTY_MODULE__';
   }
 
@@ -276,7 +276,7 @@ export default async (
               importPathMatcher: specifier.importPathMatcher.source,
             })),
             DOCS_OPTIONS: docsOptions,
-            ...(build?.test?.emptyBlocks ? { __STORYBOOK_BLOCKS_EMPTY_MODULE__: {} } : {}),
+            ...(build?.test?.disableBlocks ? { __STORYBOOK_BLOCKS_EMPTY_MODULE__: {} } : {}),
           },
           headHtmlSnippet,
           bodyHtmlSnippet,
@@ -323,7 +323,7 @@ export default async (
             fullySpecified: false,
           },
         },
-        builderOptions.useSWC || options.build?.test?.optimizeCompilation
+        builderOptions.useSWC || options.build?.test?.fastCompilation
           ? await createSWCLoader(Object.keys(virtualModuleMapping), options)
           : createBabelLoader(babelOptions, typescriptOptions, Object.keys(virtualModuleMapping)),
         {
@@ -362,7 +362,7 @@ export default async (
         ? {
             minimize: true,
             // eslint-disable-next-line no-nested-ternary
-            minimizer: options.build?.test?.optimizeCompilation
+            minimizer: options.build?.test?.fastCompilation
               ? [
                   new TerserWebpackPlugin<EsbuildOptions>({
                     parallel: true,

code/lib/core-common/src/presets.ts

@@ -255,15 +255,13 @@ export async function loadPreset(
 
       if (
         storybookOptions.isCritical !== true &&
-        storybookOptions.build?.test?.removeNonFastAddons
+        (storybookOptions.build?.test?.disabledAddons?.length || 0) > 0
       ) {
         filter = (i: PresetConfig) => {
           // @ts-expect-error (Converted from ts-ignore)
           const name = i.name ? i.name : i;
 
-          return (
-            !name.includes('@storybook/addon-docs') && !name.includes('@storybook/addon-coverage')
-          );
+          return !!storybookOptions.build?.test?.disabledAddons?.find((n) => name.includes(n));
         };
       }
 

code/lib/core-server/src/presets/common-override-preset.ts

@@ -1,4 +1,4 @@
-import type { PresetProperty, StorybookConfig } from '@storybook/types';
+import type { Options, PresetProperty, StorybookConfig, TestBuildFlags } from '@storybook/types';
 import { normalizeStories, commonGlobOptions } from '@storybook/core-common';
 import { isAbsolute, join } from 'path';
 import slash from 'slash';
@@ -18,7 +18,7 @@ export const framework: PresetProperty<'framework', StorybookConfig> = async (co
 };
 
 export const stories: PresetProperty<'stories', StorybookConfig> = async (entries, options) => {
-  if (options?.build?.test?.removeMDXEntries) {
+  if (options?.build?.test?.disableMDXEntries) {
     const out = (
       await Promise.all(
         normalizeStories(entries, {
@@ -49,8 +49,29 @@ export const typescript: PresetProperty<'typescript', StorybookConfig> = async (
 };
 
 export const docs: PresetProperty<'docs', StorybookConfig> = async (input, options) => {
-  if (options?.build?.test?.removeAutoDocs) {
+  if (options?.build?.test?.disableAutoDocs) {
     return {};
   }
   return input;
 };
+
+const createTestBuildFeatures = (value: boolean): Required<TestBuildFlags> => ({
+  disableBlocks: value,
+  disabledAddons: value ? ['@storybook/addon-docs', '@storybook/addon-coverage'] : [],
+  disableMDXEntries: value,
+  disableAutoDocs: value,
+  disableDocgen: value,
+  disableSourcemaps: value,
+  disableTreeShaking: value,
+  fastCompilation: value,
+});
+
+export const build = async (value: StorybookConfig['build'], options: Options) => {
+  return {
+    ...value,
+    test: {
+      ...createTestBuildFeatures(!!options.test),
+      ...value?.test,
+    },
+  };
+};

code/lib/core-server/src/presets/common-preset.ts

@@ -11,7 +11,6 @@ import {
 import type {
   CLIOptions,
   CoreConfig,
-  TestBuildFlags,
   Indexer,
   Options,
   PresetPropertyFn,
@@ -186,17 +185,6 @@ export const previewAnnotations = async (base: any, options: Options) => {
   return [...config, ...base];
 };
 
-const testBuildFeatures = (value: boolean): Required<TestBuildFlags> => ({
-  emptyBlocks: value,
-  removeNonFastAddons: value,
-  removeMDXEntries: value,
-  removeAutoDocs: value,
-  disableDocgen: value,
-  disableSourcemaps: value,
-  disableTreeShaking: value,
-  optimizeCompilation: value,
-});
-
 export const features = async (
   existing: StorybookConfig['features']
 ): Promise<StorybookConfig['features']> => ({
@@ -208,16 +196,6 @@ export const features = async (
   legacyDecoratorFileOrder: false,
 });
 
-export const build = async (value: StorybookConfig['build'], options: Options) => {
-  return {
-    ...value,
-    test: {
-      ...testBuildFeatures(!!options.test),
-      ...value?.test,
-    },
-  };
-};
-
 export const csfIndexer: Indexer = {
   test: /(stories|story)\.(m?js|ts)x?$/,
   createIndex: async (fileName, options) => (await readCsf(fileName, options)).parse().indexInputs,

code/lib/core-server/src/utils/StoryIndexGenerator.ts

@@ -337,7 +337,7 @@ export class StoryIndexGenerator {
     const createDocEntry =
       autodocs === true || (autodocs === 'tag' && hasAutodocsTag) || isStoriesMdx;
 
-    if (createDocEntry && this.options.build?.test?.removeAutoDocs !== true) {
+    if (createDocEntry && this.options.build?.test?.disableAutoDocs !== true) {
       const name = this.options.docs.defaultName ?? 'Docs';
       const { metaId } = indexInputs[0];
       const { title } = entries[0];

code/lib/types/src/modules/core-common.ts

@@ -266,19 +266,19 @@ export interface TestBuildFlags {
   /**
    * The package @storybook/blocks will be excluded from the bundle, even when imported in e.g. the preview.
    */
-  emptyBlocks?: boolean;
+  disableBlocks?: boolean;
   /**
-   * Disable all addons
+   * Disable specific addons
    */
-  removeNonFastAddons?: boolean;
+  disabledAddons?: string[];
   /**
    * Filter out .mdx stories entries
    */
-  removeMDXEntries?: boolean;
+  disableMDXEntries?: boolean;
   /**
    * Override autodocs to be disabled
    */
-  removeAutoDocs?: boolean;
+  disableAutoDocs?: boolean;
   /**
    * Override docgen to be disabled.
    */
@@ -292,9 +292,9 @@ export interface TestBuildFlags {
    */
   disableTreeShaking?: boolean;
   /**
-   * Compile/Optimize with SWC.
+   * Compile/Optimize with SWC/ESbuild.
    */
-  optimizeCompilation?: boolean;
+  fastCompilation?: boolean;
 }
 
 export interface TestBuildConfig {

code/package.json

@@ -259,6 +259,9 @@
     "vite-plugin-turbosnap": "^1.0.1",
     "wait-on": "^7.0.1"
   },
+  "devDependencies": {
+    "@chromaui/addon-visual-tests": "^0.0.114"
+  },
   "dependenciesMeta": {
     "ejs": {
       "built": false

code/ui/components/package.json

@@ -71,7 +71,6 @@
     "util-deprecate": "^1.0.2"
   },
   "devDependencies": {
-    "@chromaui/addon-visual-tests": "^0.0.77",
     "@popperjs/core": "^2.6.0",
     "@radix-ui/react-scroll-area": "^1.0.5",
     "@storybook/icons": "^1.1.6",