Release: Prerelease 7.4.0-alpha.2

.gitignore

@@ -50,3 +50,5 @@ code/playwright-results/
 code/playwright-report/
 code/playwright/.cache/
 code/bench-results/
+
+/packs

CHANGELOG.prerelease.md

@@ -1,3 +1,17 @@
+## 7.4.0-alpha.2
+
+- Addon-docs: Resolve `mdx-react-shim` & `@storybook/global` correctly - [#23941](https://github.com/storybookjs/storybook/pull/23941), thanks [@ndelangen](https://github.com/ndelangen)!
+- Addons: Fix key is not a prop warning - [#23935](https://github.com/storybookjs/storybook/pull/23935), thanks [@kasperpeulen](https://github.com/kasperpeulen)!
+- CLI: Pass package manager to postinstall - [#23913](https://github.com/storybookjs/storybook/pull/23913), thanks [@Integrayshaun](https://github.com/Integrayshaun)!
+- CLI: Provide guidance for users who try to initialize Storybook on an empty dir - [#23874](https://github.com/storybookjs/storybook/pull/23874), thanks [@yannbf](https://github.com/yannbf)!
+- Logger: Fix double error messages/stack - [#23919](https://github.com/storybookjs/storybook/pull/23919), thanks [@ndelangen](https://github.com/ndelangen)!
+- Maintenance: Categorize server errors - [#23912](https://github.com/storybookjs/storybook/pull/23912), thanks [@yannbf](https://github.com/yannbf)!
+- Maintenance: Remove need for `react` as peerDependency - [#23897](https://github.com/storybookjs/storybook/pull/23897), thanks [@ndelangen](https://github.com/ndelangen)!
+- Maintenance: Remove sourcemaps generation - [#23936](https://github.com/storybookjs/storybook/pull/23936), thanks [@ndelangen](https://github.com/ndelangen)!
+- Preset: Add common preset overrides mechanism - [#23915](https://github.com/storybookjs/storybook/pull/23915), thanks [@yannbf](https://github.com/yannbf)!
+- UI: Add an experimental API for adding sidebar bottom toolbar - [#23778](https://github.com/storybookjs/storybook/pull/23778), thanks [@ndelangen](https://github.com/ndelangen)!
+- UI: Add an experimental API for adding sidebar top toolbar - [#23811](https://github.com/storybookjs/storybook/pull/23811), thanks [@ndelangen](https://github.com/ndelangen)!
+
 ## 7.4.0-alpha.1
 
 - Build: Migrate @storybook/scripts to strict-ts - [#23818](https://github.com/storybookjs/storybook/pull/23818), thanks [@stilt0n](https://github.com/stilt0n)!

code/addons/docs/src/preset.ts

@@ -1,4 +1,5 @@
 import fs from 'fs-extra';
+import { dirname, join } from 'path';
 import remarkSlug from 'remark-slug';
 import remarkExternalLinks from 'remark-external-links';
 import { dedent } from 'ts-dedent';
@@ -50,7 +51,10 @@ async function webpack(
     skipCsf: true,
     ...mdxPluginOptions,
     mdxCompileOptions: {
-      providerImportSource: '@storybook/addon-docs/mdx-react-shim',
+      providerImportSource: join(
+        dirname(require.resolve('@storybook/addon-docs/package.json')),
+        '/dist/shims/mdx-react-shim'
+      ),
       ...mdxPluginOptions.mdxCompileOptions,
       remarkPlugins: [remarkSlug, remarkExternalLinks].concat(
         mdxPluginOptions?.mdxCompileOptions?.remarkPlugins ?? []

code/addons/essentials/src/docs/preset.ts

@@ -1,8 +1,13 @@
-/* eslint-disable import/export */
+import { dirname, join } from 'path';
+
+// eslint-disable-next-line import/export
 export * from '@storybook/addon-docs/dist/preset';
 
 export const mdxLoaderOptions = async (config: any) => {
   // eslint-disable-next-line no-param-reassign
-  config.mdxCompileOptions.providerImportSource = '@storybook/addon-essentials/docs/mdx-react-shim';
+  config.mdxCompileOptions.providerImportSource = join(
+    dirname(require.resolve('@storybook/addon-docs/package.json')),
+    '/dist/shims/mdx-react-shim'
+  );
   return config;
 };

code/addons/themes/package.json

@@ -43,7 +43,8 @@
       "require": "./dist/preview.js",
       "import": "./dist/preview.mjs"
     },
-    "./package.json": "./package.json"
+    "./package.json": "./package.json",
+    "./postinstall": "./postinstall.js"
   },
   "main": "dist/index.js",
   "module": "dist/index.mjs",

code/addons/themes/postinstall.js

@@ -0,0 +1,17 @@
+const { spawn } = require('child_process');
+
+const PACKAGE_MANAGER_TO_COMMAND = {
+  npm: 'npx',
+  yarn1: 'yarn dlx',
+  yarn2: 'yarn dlx',
+  pnpm: 'pnpm dlx',
+};
+
+module.exports = function postinstall(options) {
+  const command = PACKAGE_MANAGER_TO_COMMAND[options.packageManager];
+
+  spawn(command, ['@storybook/auto-config', 'themes'], {
+    stdio: 'inherit',
+    cwd: process.cwd(),
+  });
+};

code/builders/builder-manager/src/index.ts

@@ -72,7 +72,7 @@ export const getConfig: ManagerBuilder['getConfig'] = async (options) => {
     platform: 'browser',
     bundle: true,
     minify: true,
-    sourcemap: true,
+    sourcemap: false,
     conditions: ['browser', 'module', 'default'],
 
     jsxFactory: 'React.createElement',

code/builders/builder-vite/src/plugins/mdx-plugin.ts

@@ -3,6 +3,7 @@ import type { Plugin } from 'vite';
 import remarkSlug from 'remark-slug';
 import remarkExternalLinks from 'remark-external-links';
 import { createFilter } from 'vite';
+import { dirname, join } from 'path';
 
 const isStorybookMdx = (id: string) => id.endsWith('stories.mdx') || id.endsWith('story.mdx');
 
@@ -33,7 +34,10 @@ export async function mdxPlugin(options: Options): Promise<Plugin> {
       const mdxLoaderOptions = await options.presets.apply('mdxLoaderOptions', {
         ...mdxPluginOptions,
         mdxCompileOptions: {
-          providerImportSource: '@storybook/addon-docs/mdx-react-shim',
+          providerImportSource: join(
+            dirname(require.resolve('@storybook/addon-docs/package.json')),
+            '/dist/shims/mdx-react-shim'
+          ),
           ...mdxPluginOptions?.mdxCompileOptions,
           remarkPlugins: [remarkSlug, remarkExternalLinks].concat(
             mdxPluginOptions?.mdxCompileOptions?.remarkPlugins ?? []

code/builders/builder-webpack5/package.json

@@ -56,23 +56,15 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@babel/core": "^7.22.9",
-    "@storybook/addons": "workspace:*",
+    "@babel/core": "^7.22.0",
     "@storybook/channels": "workspace:*",
-    "@storybook/client-api": "workspace:*",
     "@storybook/client-logger": "workspace:*",
-    "@storybook/components": "workspace:*",
     "@storybook/core-common": "workspace:*",
     "@storybook/core-events": "workspace:*",
     "@storybook/core-webpack": "workspace:*",
-    "@storybook/global": "^5.0.0",
-    "@storybook/manager-api": "workspace:*",
     "@storybook/node-logger": "workspace:*",
     "@storybook/preview": "workspace:*",
     "@storybook/preview-api": "workspace:*",
-    "@storybook/router": "workspace:*",
-    "@storybook/store": "workspace:*",
-    "@storybook/theming": "workspace:*",
     "@swc/core": "^1.3.49",
     "@types/node": "^16.0.0",
     "@types/semver": "^7.3.4",
@@ -110,10 +102,6 @@
     "slash": "^5.0.0",
     "typescript": "~4.9.3"
   },
-  "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
-    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
-  },
   "peerDependenciesMeta": {
     "typescript": {
       "optional": true

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

@@ -29,24 +29,35 @@ import { createBabelLoader, createSWCLoader } from './loaders';
 
 const getAbsolutePath = <I extends string>(input: I): I =>
   dirname(require.resolve(join(input, 'package.json'))) as any;
+const maybeGetAbsolutePath = <I extends string>(input: I): I | false => {
+  try {
+    return getAbsolutePath(input);
+  } catch (e) {
+    return false;
+  }
+};
 
+const managerAPIPath = maybeGetAbsolutePath(`@storybook/manager-api`);
+const componentsPath = maybeGetAbsolutePath(`@storybook/components`);
+const globalPath = maybeGetAbsolutePath(`@storybook/global`);
+const routerPath = maybeGetAbsolutePath(`@storybook/router`);
+const themingPath = maybeGetAbsolutePath(`@storybook/theming`);
+
+// these packages are not pre-bundled because of react dependencies.
+// these are not dependencies of the builder anymore, thus resolving them can fail.
+// we should remove the aliases in 8.0, I'm not sure why they are here in the first place.
 const storybookPaths: Record<string, string> = {
-  ...[
-    // these packages are not pre-bundled because of react dependencies
-    'components',
-    'global',
-    'manager-api',
-    'router',
-    'theming',
-  ].reduce(
-    (acc, sbPackage) => ({
-      ...acc,
-      [`@storybook/${sbPackage}`]: getAbsolutePath(`@storybook/${sbPackage}`),
-    }),
-    {}
-  ),
-  // deprecated, remove in 8.0
-  [`@storybook/api`]: getAbsolutePath(`@storybook/manager-api`),
+  ...(managerAPIPath
+    ? {
+        // deprecated, remove in 8.0
+        [`@storybook/api`]: managerAPIPath,
+        [`@storybook/manager-api`]: managerAPIPath,
+      }
+    : {}),
+  ...(componentsPath ? { [`@storybook/components`]: componentsPath } : {}),
+  ...(globalPath ? { [`@storybook/global`]: globalPath } : {}),
+  ...(routerPath ? { [`@storybook/router`]: routerPath } : {}),
+  ...(themingPath ? { [`@storybook/theming`]: themingPath } : {}),
 };
 
 export default async (

code/frameworks/angular/src/builders/utils/error-handler.ts

@@ -12,7 +12,7 @@ export const printErrorDetails = (error: any): void => {
     } else if ((error as any).stats && (error as any).stats.compilation.errors) {
       (error as any).stats.compilation.errors.forEach((e: any) => logger.plain(e));
     } else {
-      logger.error(error as any);
+      logger.error(error);
     }
   } else if (error.compilation?.errors) {
     error.compilation.errors.forEach((e: any) => logger.plain(e));

code/lib/cli/src/add.ts

@@ -1,5 +1,6 @@
 import { getStorybookInfo } from '@storybook/core-common';
 import { readConfig, writeConfig } from '@storybook/csf-tools';
+import SemVer from 'semver';
 
 import {
   JsPackageManagerFactory,
@@ -10,15 +11,19 @@ import { getStorybookVersion } from './utils';
 
 const logger = console;
 
-const postinstallAddon = async (addonName: string) => {
+interface PostinstallOptions {
+  packageManager: PackageManagerName;
+}
+
+const postinstallAddon = async (addonName: string, options: PostinstallOptions) => {
   try {
     const modulePath = require.resolve(`${addonName}/postinstall`, { paths: [process.cwd()] });
     // eslint-disable-next-line import/no-dynamic-require, global-require
     const postinstall = require(modulePath);
 
     try {
       logger.log(`Running postinstall script for ${addonName}`);
-      await postinstall();
+      await postinstall(options);
     } catch (e) {
       logger.error(`Error running postinstall script for ${addonName}`);
       logger.error(e);
@@ -73,7 +78,9 @@ export async function add(
   const isStorybookAddon = addonName.startsWith('@storybook/');
   const storybookVersion = await getStorybookVersion(packageManager);
   const version = versionSpecifier || (isStorybookAddon ? storybookVersion : latestVersion);
-  const addonWithVersion = `${addonName}@^${version}`;
+  const addonWithVersion = SemVer.valid(version)
+    ? `${addonName}@^${version}`
+    : `${addonName}@${version}`;
   logger.log(`Installing ${addonWithVersion}`);
   await packageManager.addDependencies({ installAsDevDependencies: true }, [addonWithVersion]);
 
@@ -83,6 +90,6 @@ export async function add(
   await writeConfig(main);
 
   if (!options.skipPostinstall && isStorybookAddon) {
-    await postinstallAddon(addonName);
+    await postinstallAddon(addonName, { packageManager: pkgMgr });
   }
 }

code/lib/cli/src/detect.ts

@@ -15,6 +15,7 @@ import {
 } from './project_types';
 import { commandLog, isNxProject } from './helpers';
 import type { JsPackageManager, PackageJsonWithMaybeDeps } from './js-package-manager';
+import { HandledError } from './HandledError';
 
 const viteConfigFiles = ['vite.config.ts', 'vite.config.js', 'vite.config.mjs'];
 const webpackConfigFiles = ['webpack.config.js'];
@@ -135,16 +136,23 @@ export async function detectBuilder(packageManager: JsPackageManager, projectTyp
       return CoreBuilder.Webpack5;
     default:
       // eslint-disable-next-line no-case-declarations
-      const { builder } = await prompts({
-        type: 'select',
-        name: 'builder',
-        message:
-          'We were not able to detect the right builder for your project. Please select one:',
-        choices: [
-          { title: 'Vite', value: CoreBuilder.Vite },
-          { title: 'Webpack 5', value: CoreBuilder.Webpack5 },
-        ],
-      });
+      const { builder } = await prompts(
+        {
+          type: 'select',
+          name: 'builder',
+          message:
+            '\nWe were not able to detect the right builder for your project. Please select one:',
+          choices: [
+            { title: 'Vite', value: CoreBuilder.Vite },
+            { title: 'Webpack 5', value: CoreBuilder.Webpack5 },
+          ],
+        },
+        {
+          onCancel: () => {
+            throw new HandledError('Canceled by the user');
+          },
+        }
+      );
 
       return builder;
   }

code/lib/cli/src/generators/EMBER/index.ts

@@ -1,16 +1,23 @@
+import { CoreBuilder } from '../../project_types';
 import { baseGenerator } from '../baseGenerator';
 import type { Generator } from '../types';
 
 const generator: Generator = async (packageManager, npmOptions, options) => {
-  await baseGenerator(packageManager, npmOptions, options, 'ember', {
-    extraPackages: [
-      // babel-plugin-ember-modules-api-polyfill is a peerDep of @storybook/ember
-      'babel-plugin-ember-modules-api-polyfill',
-      // babel-plugin-htmlbars-inline-precompile is a peerDep of @storybook/ember
-      'babel-plugin-htmlbars-inline-precompile',
-    ],
-    staticDir: 'dist',
-  });
+  await baseGenerator(
+    packageManager,
+    npmOptions,
+    { ...options, builder: CoreBuilder.Webpack5 },
+    'ember',
+    {
+      extraPackages: [
+        // babel-plugin-ember-modules-api-polyfill is a peerDep of @storybook/ember
+        'babel-plugin-ember-modules-api-polyfill',
+        // babel-plugin-htmlbars-inline-precompile is a peerDep of @storybook/ember
+        'babel-plugin-htmlbars-inline-precompile',
+      ],
+      staticDir: 'dist',
+    }
+  );
 };
 
 export default generator;

code/lib/cli/src/generators/NEXTJS/index.ts

@@ -1,11 +1,12 @@
+import { CoreBuilder } from '../../project_types';
 import { baseGenerator } from '../baseGenerator';
 import type { Generator } from '../types';
 
 const generator: Generator = async (packageManager, npmOptions, options) => {
   await baseGenerator(
     packageManager,
     npmOptions,
-    options,
+    { ...options, builder: CoreBuilder.Webpack5 },
     'react',
     {
       extraAddons: ['@storybook/addon-onboarding'],