storybookjs · shilman · Feb 20, 2024 · Aug 2, 2023 · Aug 2, 2023 · Aug 2, 2023
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,8 @@
+## 7.6.17
+
+- Addon-docs: Fix Table of Contents heading leak - [#23677](https://github.com/storybookjs/storybook/pull/23677), thanks [@vmizg](https://github.com/vmizg)!
+- Core: Update ip version to fix CVE-2023-42282 - [#26086](https://github.com/storybookjs/storybook/pull/26086), thanks [@drik98](https://github.com/drik98)!
+
 ## 7.6.16
 
 - Addon Themes: Make type generic less strict - [#26042](https://github.com/storybookjs/storybook/pull/26042), thanks [@yannbf](https://github.com/yannbf)!

diff --git a/CHANGELOG.prerelease.md b/CHANGELOG.prerelease.md
@@ -1,3 +1,22 @@
+## 8.0.0-beta.4
+
+- Addon-actions: Warn when argTypesRegex is used together with the visual test addon - [#26094](https://github.com/storybookjs/storybook/pull/26094), thanks [@kasperpeulen](https://github.com/kasperpeulen)!
+- Addon-docs: Fix Table of Contents heading leak - [#23677](https://github.com/storybookjs/storybook/pull/23677), thanks [@vmizg](https://github.com/vmizg)!
+- CLI: Add `legacyMdx1` & `@storybook/mdx1-csf` automigration - [#26102](https://github.com/storybookjs/storybook/pull/26102), thanks [@ndelangen](https://github.com/ndelangen)!
+- CLI: Add line ignoring storybook's `.log` files upon `init` - [#26099](https://github.com/storybookjs/storybook/pull/26099), thanks [@ndelangen](https://github.com/ndelangen)!
+- CLI: Add support for custom vite config to autoblocker - [#26087](https://github.com/storybookjs/storybook/pull/26087), thanks [@ndelangen](https://github.com/ndelangen)!
+- CLI: Add webpack5 compiler automigration - [#26000](https://github.com/storybookjs/storybook/pull/26000), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)!
+- CLI: Remove argTypesRegex automigration - [#26001](https://github.com/storybookjs/storybook/pull/26001), thanks [@kasperpeulen](https://github.com/kasperpeulen)!
+- CLI: Remove the logging to file feature from autoblockers - [#26100](https://github.com/storybookjs/storybook/pull/26100), thanks [@ndelangen](https://github.com/ndelangen)!
+- Core: Add addon removal telemetry - [#26077](https://github.com/storybookjs/storybook/pull/26077), thanks [@shilman](https://github.com/shilman)!
+- Core: Fix fail to load `main.ts` error message - [#26035](https://github.com/storybookjs/storybook/pull/26035), thanks [@ndelangen](https://github.com/ndelangen)!
+- Core: Update ip version to fix CVE-2023-42282 - [#26086](https://github.com/storybookjs/storybook/pull/26086), thanks [@drik98](https://github.com/drik98)!
+- Next.js: Support getImageProps API - [#25745](https://github.com/storybookjs/storybook/pull/25745), thanks [@piratetaco](https://github.com/piratetaco)!
+- Svelte: Remove deprecated SvelteComponentTyped in favor of SvelteComponent - [#26113](https://github.com/storybookjs/storybook/pull/26113), thanks [@kasperpeulen](https://github.com/kasperpeulen)!
+- Vite: Fix bug that meant we always warned about TS plugin - [#26051](https://github.com/storybookjs/storybook/pull/26051), thanks [@tmeasday](https://github.com/tmeasday)!
+- Vite: Fix config typing issue of the `typescript` property - [#26046](https://github.com/storybookjs/storybook/pull/26046), thanks [@ndelangen](https://github.com/ndelangen)!
+- Vite: Fix issue getting preview stats with Vite builder - [#26093](https://github.com/storybookjs/storybook/pull/26093), thanks [@tmeasday](https://github.com/tmeasday)!
+
 ## 8.0.0-beta.3
 
 - Addon-actions: Add spy to action for explicit actions - [#26033](https://github.com/storybookjs/storybook/pull/26033), thanks [@kasperpeulen](https://github.com/kasperpeulen)!

diff --git a/code/builders/builder-vite/src/build.ts b/code/builders/builder-vite/src/build.ts
@@ -41,7 +41,7 @@ export async function build(options: Options) {
 
   const turbosnapPluginName = 'rollup-plugin-turbosnap';
   const hasTurbosnapPlugin =
-    finalConfig.plugins && hasVitePlugins(finalConfig.plugins, [turbosnapPluginName]);
+    finalConfig.plugins && (await hasVitePlugins(finalConfig.plugins, [turbosnapPluginName]));
   if (hasTurbosnapPlugin) {
     logger.warn(dedent`Found '${turbosnapPluginName}' which is now included by default in Storybook 8.
       Removing from your plugins list. Ensure you pass \`--webpack-stats-json\` to generate stats.
@@ -53,6 +53,9 @@ export async function build(options: Options) {
 
   await viteBuild(await sanitizeEnvVars(options, finalConfig));
 
-  const statsPlugin = findPlugin(finalConfig, 'rollup-plugin-webpack-stats') as WebpackStatsPlugin;
+  const statsPlugin = findPlugin(
+    finalConfig,
+    'storybook:rollup-plugin-webpack-stats'
+  ) as WebpackStatsPlugin;
   return statsPlugin?.storybookGetStats();
 }
diff --git a/code/e2e-tests/addon-docs.spec.ts b/code/e2e-tests/addon-docs.spec.ts
@@ -34,8 +34,7 @@ test.describe('addon-docs', () => {
     await expect(anotherStory).toContainText('Another button, just to show multiple stories');
   });
 
-  // FIXME - get rid of the flake
-  test.skip('should show source=code view for stories', async ({ page }) => {
+  test('should show source=code view for stories', async ({ page }) => {
     const skipped = [
       // SSv6 does not render stories in the correct order in our sandboxes
       'internal\\/ssv6',

diff --git a/code/e2e-tests/tags.spec.ts b/code/e2e-tests/tags.spec.ts
@@ -3,8 +3,7 @@ import { SbPage } from './util';
 
 const storybookUrl = process.env.STORYBOOK_URL || 'http://localhost:8001';
 
-// FIXME - get rid of the flake
-test.describe.skip('tags', () => {
+test.describe('tags', () => {
   test.beforeEach(async ({ page }) => {
     await page.goto(storybookUrl);
     await new SbPage(page).waitUntilLoaded();

diff --git a/code/frameworks/nextjs/package.json b/code/frameworks/nextjs/package.json
@@ -128,7 +128,7 @@
     "@types/babel__preset-env": "^7",
     "@types/loader-utils": "^2.0.5",
     "@types/react-refresh": "^0",
-    "next": "^14.0.2",
+    "next": "^14.1.0",
     "typescript": "^5.3.2",
     "webpack": "^5.65.0"
   },

diff --git a/code/frameworks/nextjs/src/images/next-image.tsx b/code/frameworks/nextjs/src/images/next-image.tsx
@@ -1,7 +1,8 @@
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore import is aliased in webpack config
-import OriginalNextImage from 'sb-original/next/image';
+import * as NextImageNamespace from 'sb-original/next/image';
 import type * as _NextImage from 'next/image';
+
 import React from 'react';
 
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -11,6 +12,8 @@ import { ImageContext as ImageContextValue } from '@storybook/nextjs/dist/image-
 import { type ImageContext as ImageContextType } from '../image-context';
 import { defaultLoader } from './next-image-default-loader';
 
+const OriginalNextImage = NextImageNamespace.default;
+const { getImageProps: originalGetImageProps } = NextImageNamespace;
 const ImageContext = ImageContextValue as typeof ImageContextType;
 
 const MockedNextImage = React.forwardRef<HTMLImageElement, _NextImage.ImageProps>(
@@ -30,4 +33,7 @@ const MockedNextImage = React.forwardRef<HTMLImageElement, _NextImage.ImageProps
 
 MockedNextImage.displayName = 'NextImage';
 
+export const getImageProps = (props: _NextImage.ImageProps) =>
+  originalGetImageProps?.({ loader: defaultLoader, ...props });
+
 export default MockedNextImage;
diff --git a/code/frameworks/nextjs/src/preset.ts b/code/frameworks/nextjs/src/preset.ts
@@ -117,7 +117,8 @@ export const webpackFinal: StorybookConfig['webpackFinal'] = async (baseConfig,
   });
 
   const babelRCPath = join(getProjectRoot(), '.babelrc');
-  const hasBabelConfig = fs.existsSync(babelRCPath);
+  const babelConfigPath = join(getProjectRoot(), 'babel.config.js');
+  const hasBabelConfig = fs.existsSync(babelRCPath) || fs.existsSync(babelConfigPath);
   const nextjsVersion = getNextjsVersion();
   const isDevelopment = options.configType !== 'PRODUCTION';
 

diff --git a/code/frameworks/nextjs/src/swc/next-swc-loader-patch.ts b/code/frameworks/nextjs/src/swc/next-swc-loader-patch.ts
@@ -92,6 +92,8 @@ async function loaderTransform(this: any, parentTrace: any, source?: string, inp
     swcCacheDir,
     relativeFilePathFromRoot,
     serverComponents,
+    // @ts-expect-error Relevant for Next.js < 14.1
+    // TODO: Remove this when Next.js < 14.1 is no longer supported
     isReactServerLayer,
   });
 

diff --git a/code/frameworks/nextjs/template/stories_nextjs-default-js/GetImageProps.stories.jsx b/code/frameworks/nextjs/template/stories_nextjs-default-js/GetImageProps.stories.jsx
@@ -0,0 +1,33 @@
+import { getImageProps } from 'next/image';
+import React from 'react';
+
+import Accessibility from '../../assets/accessibility.svg';
+import Testing from '../../assets/testing.png';
+
+// referenced from https://nextjs.org/docs/pages/api-reference/components/image#theme-detection-picture
+const Component = (props) => {
+  const {
+    props: { srcSet: dark },
+  } = getImageProps({ src: Accessibility, ...props });
+  const {
+    // capture rest on one to spread to img as default; it doesn't matter which barring art direction
+    props: { srcSet: light, ...rest },
+  } = getImageProps({ src: Testing, ...props });
+
+  return (
+    <picture>
+      <source media="(prefers-color-scheme: dark)" srcSet={dark} />
+      <source media="(prefers-color-scheme: light)" srcSet={light} />
+      <img {...rest} />
+    </picture>
+  );
+};
+
+export default {
+  component: Component,
+  args: {
+    alt: 'getImageProps Example',
+  },
+};
+
+export const Default = {};
diff --git a/code/frameworks/react-vite/src/types.ts b/code/frameworks/react-vite/src/types.ts
@@ -56,7 +56,7 @@ type TypescriptOptions = TypescriptOptionsBase & {
  */
 export type StorybookConfig = Omit<
   StorybookConfigBase,
-  keyof StorybookConfigVite | keyof StorybookConfigFramework
+  keyof StorybookConfigVite | keyof StorybookConfigFramework | 'typescript'
 > &
   StorybookConfigVite &
   StorybookConfigFramework & {

diff --git a/code/lib/cli/package.json b/code/lib/cli/package.json
@@ -56,6 +56,7 @@
     "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
+    "@babel/core": "^7.23.0",
     "@babel/types": "^7.23.0",
     "@ndelangen/get-tarball": "^3.0.7",
     "@storybook/codemod": "workspace:*",
@@ -98,6 +99,7 @@
     "@types/util-deprecate": "^1.0.0",
     "boxen": "^7.1.1",
     "slash": "^5.0.0",
+    "strip-ansi": "^7.1.0",
     "strip-json-comments": "^3.1.1",
     "typescript": "^5.3.2"
   },

diff --git a/code/lib/cli/src/autoblock/block-dependencies-versions.ts b/code/lib/cli/src/autoblock/block-dependencies-versions.ts
@@ -43,9 +43,6 @@ export const blocker = createBlocker({
       return acc;
     }, false);
   },
-  message(options, data) {
-    return `Found ${data.packageName} version: ${data.installedVersion}, please upgrade to ${data.minimumVersion} or higher.`;
-  },
   log(options, data) {
     switch (data.packageName) {
       case 'react-scripts':

diff --git a/code/lib/cli/src/autoblock/block-node-version.ts b/code/lib/cli/src/autoblock/block-node-version.ts
@@ -11,9 +11,6 @@ export const blocker = createBlocker({
     }
     return false;
   },
-  message(options, data) {
-    return `Please use Node.js v18 or higher.`;
-  },
   log(options, data) {
     return dedent`
       We've detected you're using Node.js v${data.nodeVersion}.

diff --git a/code/lib/cli/src/autoblock/block-stories-mdx.ts b/code/lib/cli/src/autoblock/block-stories-mdx.ts
@@ -11,12 +11,7 @@ export const blocker = createBlocker({
     }
     return { files };
   },
-  message(options, data) {
-    return `Found ${data.files.length} stories.mdx ${
-      data.files.length === 1 ? 'file' : 'files'
-    }, these must be migrated.`;
-  },
-  log() {
+  log(options, data) {
     return dedent`
       Support for *.stories.mdx files has been removed.
       Please see the migration guide for more information:
@@ -26,6 +21,10 @@ export const blocker = createBlocker({
       Check the migration guide for more information:
       https://mdxjs.com/blog/v3/
 
+      Found ${data.files.length} stories.mdx ${
+        data.files.length === 1 ? 'file' : 'files'
+      }, these must be migrated.
+
       Manually run the migration script to convert your stories.mdx files to CSF format documented here:
       https://storybook.js.org/docs/migration-guide#storiesmdx-to-mdxcsf
     `;

diff --git a/code/lib/cli/src/autoblock/block-storystorev6.ts b/code/lib/cli/src/autoblock/block-storystorev6.ts
@@ -1,4 +1,3 @@
-import { relative } from 'path';
 import { createBlocker } from './types';
 import { dedent } from 'ts-dedent';
 import type { StorybookConfigRaw } from '@storybook/types';
@@ -15,10 +14,6 @@ export const blocker = createBlocker({
     }
     return false;
   },
-  message(options, data) {
-    const mainConfigPath = relative(process.cwd(), options.mainConfigPath);
-    return `StoryStoreV7 feature must be removed from ${mainConfigPath}`;
-  },
   log() {
     return dedent`
       StoryStoreV7 feature must be removed from your Storybook configuration.

diff --git a/code/lib/cli/src/autoblock/index.test.ts b/code/lib/cli/src/autoblock/index.test.ts
@@ -2,8 +2,8 @@ import { expect, test, vi } from 'vitest';
 import { autoblock } from './index';
 import { JsPackageManagerFactory } from '@storybook/core-common';
 import { createBlocker } from './types';
-import { writeFile as writeFileRaw } from 'node:fs/promises';
-import { logger } from '@storybook/node-logger';
+import { logger as loggerRaw } from '@storybook/node-logger';
+import stripAnsi from 'strip-ansi';
 
 vi.mock('node:fs/promises', () => ({
   writeFile: vi.fn(),
@@ -19,26 +19,23 @@ vi.mock('@storybook/node-logger', () => ({
   },
 }));
 
-const writeFile = vi.mocked(writeFileRaw);
+const logger = vi.mocked(loggerRaw);
 
 const blockers = {
   alwaysPass: createBlocker({
     id: 'alwaysPass',
     check: async () => false,
-    message: () => 'Always pass',
     log: () => 'Always pass',
   }),
   alwaysFail: createBlocker({
     id: 'alwaysFail',
     check: async () => ({ bad: true }),
-    message: () => 'Always fail',
-    log: () => '...',
+    log: () => 'Always fail',
   }),
   alwaysFail2: createBlocker({
     id: 'alwaysFail2',
     check: async () => ({ disaster: true }),
-    message: () => 'Always fail 2',
-    log: () => '...',
+    log: () => 'Always fail 2',
   }),
 } as const;
 
@@ -75,17 +72,15 @@ test('1 fail', async () => {
     Promise.resolve({ blocker: blockers.alwaysPass }),
     Promise.resolve({ blocker: blockers.alwaysFail }),
   ]);
-  expect(writeFile).toHaveBeenCalledWith(
-    expect.any(String),
-    expect.stringContaining('alwaysFail'),
-    expect.any(Object)
-  );
+
   expect(result).toBe('alwaysFail');
   expect(logger.plain).toHaveBeenCalledWith(expect.stringContaining('Oh no..'));
+  expect(stripAnsi(logger.plain.mock.calls[1][0])).toMatchInlineSnapshot(`
+    "Blocking your upgrade because of the following issues:
+
+    Always fail
 
-  expect(writeFile.mock.calls[0][1]).toMatchInlineSnapshot(`
-    "(alwaysFail):
-    ..."
+    Fix the above issues and try running the upgrade command again."
   `);
 });
 
@@ -95,14 +90,14 @@ test('multiple fails', async () => {
     Promise.resolve({ blocker: blockers.alwaysFail }),
     Promise.resolve({ blocker: blockers.alwaysFail2 }),
   ]);
-  expect(writeFile.mock.calls[0][1]).toMatchInlineSnapshot(`
-    "(alwaysFail):
-    ...
+  expect(stripAnsi(logger.plain.mock.calls[1][0])).toMatchInlineSnapshot(`
+    "Blocking your upgrade because of the following issues:
+
+    Always fail
 
-    ----
+    Always fail 2
 
-    (alwaysFail2):
-    ..."
+    Fix the above issues and try running the upgrade command again."
   `);
 
   expect(result).toBe('alwaysFail');

diff --git a/code/lib/cli/src/autoblock/index.ts b/code/lib/cli/src/autoblock/index.ts
@@ -2,7 +2,6 @@ import type { AutoblockOptions, Blocker } from './types';
 import { logger } from '@storybook/node-logger';
 import chalk from 'chalk';
 import boxen from 'boxen';
-import { writeFile } from 'node:fs/promises';
 
 const excludesFalse = <T>(x: T | false): x is T => x !== false;
 
@@ -34,7 +33,6 @@ export const autoblock = async (
         return {
           id: blocker.id,
           value: true,
-          message: blocker.message(options, result),
           log: blocker.log(options, result),
         };
       } else {
@@ -46,35 +44,23 @@ export const autoblock = async (
   const faults = out.filter(excludesFalse);
 
   if (faults.length > 0) {
-    const LOG_FILE_NAME = 'migration-storybook.log';
-
     const messages = {
       welcome: `Blocking your upgrade because of the following issues:`,
       reminder: chalk.yellow('Fix the above issues and try running the upgrade command again.'),
-      logfile: chalk.yellow(`You can find more details in ./${LOG_FILE_NAME}.`),
     };
     const borderColor = '#FC521F';
 
     logger.plain('Oh no..');
     logger.plain(
       boxen(
         [messages.welcome]
-          .concat(faults.map((i) => i.message))
+          .concat(faults.map((i) => i.log))
           .concat([messages.reminder])
-          .concat([messages.logfile])
           .join('\n\n'),
         { borderStyle: 'round', padding: 1, borderColor }
       )
     );
 
-    await writeFile(
-      LOG_FILE_NAME,
-      faults.map((i) => '(' + i.id + '):\n' + i.log).join('\n\n----\n\n'),
-      {
-        encoding: 'utf-8',
-      }
-    );
-
     return faults[0].id;
   }
 

diff --git a/code/lib/cli/src/autoblock/types.ts b/code/lib/cli/src/autoblock/types.ts
@@ -21,13 +21,6 @@ export interface Blocker<T> {
    * @returns A truthy value to activate the block, return false to proceed.
    */
   check: (options: AutoblockOptions) => Promise<T | false>;
-  /**
-   * Format a message to be printed to the log-file.
-   * @param context
-   * @param data returned from the check method.
-   * @returns The string to print to the terminal.
-   */
-  message: (options: AutoblockOptions, data: T) => string;
   /**
    * Format a message to be printed to the log-file.
    * @param context