Merge branch 'next' into yann/throw-error-on-empty-stories

storybookjs · Aug 28, 2023 · ab405f4 · ab405f4
2 parents a7437c8 + a20c2d8
commit ab405f4
Show file tree

Hide file tree

Showing 145 changed files with 882 additions and 371 deletions.
diff --git a/.gitignore b/.gitignore
@@ -50,3 +50,5 @@ code/playwright-results/
 code/playwright-report/
 code/playwright/.cache/
 code/bench-results/
+
+/packs
diff --git a/CHANGELOG.prerelease.md b/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)!

diff --git a/code/addons/a11y/package.json b/code/addons/a11y/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-a11y",
-  "version": "7.4.0-alpha.1",
+  "version": "7.4.0-alpha.2",
   "description": "Test component compliance with web accessibility standards",
   "keywords": [
     "a11y",

diff --git a/code/addons/actions/package.json b/code/addons/actions/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-actions",
-  "version": "7.4.0-alpha.1",
+  "version": "7.4.0-alpha.2",
   "description": "Get UI feedback when an action is performed on an interactive element",
   "keywords": [
     "storybook",

diff --git a/code/addons/backgrounds/package.json b/code/addons/backgrounds/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-backgrounds",
-  "version": "7.4.0-alpha.1",
+  "version": "7.4.0-alpha.2",
   "description": "Switch backgrounds to view components in different settings",
   "keywords": [
     "addon",

diff --git a/code/addons/controls/package.json b/code/addons/controls/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-controls",
-  "version": "7.4.0-alpha.1",
+  "version": "7.4.0-alpha.2",
   "description": "Interact with component inputs dynamically in the Storybook UI",
   "keywords": [
     "addon",

diff --git a/code/addons/docs/package.json b/code/addons/docs/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-docs",
-  "version": "7.4.0-alpha.1",
+  "version": "7.4.0-alpha.2",
   "description": "Document component usage and properties in Markdown",
   "keywords": [
     "addon",

diff --git a/code/addons/docs/src/preset.ts b/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 ?? []

diff --git a/code/addons/essentials/package.json b/code/addons/essentials/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-essentials",
-  "version": "7.4.0-alpha.1",
+  "version": "7.4.0-alpha.2",
   "description": "Curated addons to bring out the best of Storybook",
   "keywords": [
     "addon",

diff --git a/code/addons/essentials/src/docs/preset.ts b/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;
 };
diff --git a/code/addons/gfm/package.json b/code/addons/gfm/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-mdx-gfm",
-  "version": "7.4.0-alpha.1",
+  "version": "7.4.0-alpha.2",
   "description": "GitHub Flavored Markdown in Storybook",
   "keywords": [
     "addon",

diff --git a/code/addons/highlight/package.json b/code/addons/highlight/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-highlight",
-  "version": "7.4.0-alpha.1",
+  "version": "7.4.0-alpha.2",
   "description": "Highlight DOM nodes within your stories",
   "keywords": [
     "storybook-addons",

diff --git a/code/addons/interactions/package.json b/code/addons/interactions/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-interactions",
-  "version": "7.4.0-alpha.1",
+  "version": "7.4.0-alpha.2",
   "description": "Automate, test and debug user interactions",
   "keywords": [
     "storybook-addons",

diff --git a/code/addons/jest/package.json b/code/addons/jest/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-jest",
-  "version": "7.4.0-alpha.1",
+  "version": "7.4.0-alpha.2",
   "description": "React storybook addon that show component jest report",
   "keywords": [
     "addon",

diff --git a/code/addons/links/package.json b/code/addons/links/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-links",
-  "version": "7.4.0-alpha.1",
+  "version": "7.4.0-alpha.2",
   "description": "Link stories together to build demos and prototypes with your UI components",
   "keywords": [
     "addon",

diff --git a/code/addons/measure/package.json b/code/addons/measure/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-measure",
-  "version": "7.4.0-alpha.1",
+  "version": "7.4.0-alpha.2",
   "description": "Inspect layouts by visualizing the box model",
   "keywords": [
     "storybook-addons",

diff --git a/code/addons/outline/package.json b/code/addons/outline/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-outline",
-  "version": "7.4.0-alpha.1",
+  "version": "7.4.0-alpha.2",
   "description": "Outline all elements with CSS to help with layout placement and alignment",
   "keywords": [
     "storybook-addons",

diff --git a/code/addons/storyshots-core/package.json b/code/addons/storyshots-core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-storyshots",
-  "version": "7.4.0-alpha.1",
+  "version": "7.4.0-alpha.2",
   "description": "Take a code snapshot of every story automatically with Jest",
   "keywords": [
     "addon",

diff --git a/code/addons/storyshots-puppeteer/package.json b/code/addons/storyshots-puppeteer/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-storyshots-puppeteer",
-  "version": "7.4.0-alpha.1",
+  "version": "7.4.0-alpha.2",
   "description": "Image snapshots addition to StoryShots based on puppeteer",
   "keywords": [
     "addon",

diff --git a/code/addons/storysource/package.json b/code/addons/storysource/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-storysource",
-  "version": "7.4.0-alpha.1",
+  "version": "7.4.0-alpha.2",
   "description": "View a story’s source code to see how it works and paste into your app",
   "keywords": [
     "addon",

diff --git a/code/addons/themes/package.json b/code/addons/themes/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-themes",
-  "version": "7.4.0-alpha.1",
+  "version": "7.4.0-alpha.2",
   "description": "Switch between multiple themes for you components in Storybook",
   "keywords": [
     "css",
@@ -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",

diff --git a/code/addons/themes/postinstall.js b/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(),
+  });
+};
diff --git a/code/addons/toolbars/package.json b/code/addons/toolbars/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-toolbars",
-  "version": "7.4.0-alpha.1",
+  "version": "7.4.0-alpha.2",
   "description": "Create your own toolbar items that control story rendering",
   "keywords": [
     "addon",

diff --git a/code/addons/viewport/package.json b/code/addons/viewport/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-viewport",
-  "version": "7.4.0-alpha.1",
+  "version": "7.4.0-alpha.2",
   "description": "Build responsive components by adjusting Storybook’s viewport size and orientation",
   "keywords": [
     "addon",

diff --git a/code/builders/builder-manager/package.json b/code/builders/builder-manager/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/builder-manager",
-  "version": "7.4.0-alpha.1",
+  "version": "7.4.0-alpha.2",
   "description": "Storybook manager builder",
   "keywords": [
     "storybook"

diff --git a/code/builders/builder-vite/package.json b/code/builders/builder-vite/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/builder-vite",
-  "version": "7.4.0-alpha.1",
+  "version": "7.4.0-alpha.2",
   "description": "A plugin to run and build Storybooks with Vite",
   "homepage": "https://github.com/storybookjs/storybook/tree/next/code/builders/builder-vite/#readme",
   "bugs": {

diff --git a/code/builders/builder-vite/src/plugins/mdx-plugin.ts b/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 ?? []

diff --git a/code/builders/builder-webpack5/package.json b/code/builders/builder-webpack5/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/builder-webpack5",
-  "version": "7.4.0-alpha.1",
+  "version": "7.4.0-alpha.2",
   "description": "Storybook framework-agnostic API",
   "keywords": [
     "storybook"
@@ -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

diff --git a/code/builders/builder-webpack5/src/preview/iframe-webpack.config.ts b/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 (

diff --git a/code/deprecated/addons/package.json b/code/deprecated/addons/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addons",
-  "version": "7.4.0-alpha.1",
+  "version": "7.4.0-alpha.2",
   "description": "Storybook addons store",
   "keywords": [
     "storybook"

diff --git a/code/deprecated/channel-postmessage/package.json b/code/deprecated/channel-postmessage/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/channel-postmessage",
-  "version": "7.4.0-alpha.1",
+  "version": "7.4.0-alpha.2",
   "description": "",
   "keywords": [
     "storybook"

diff --git a/code/deprecated/channel-websocket/package.json b/code/deprecated/channel-websocket/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/channel-websocket",
-  "version": "7.4.0-alpha.1",
+  "version": "7.4.0-alpha.2",
   "description": "",
   "keywords": [
     "storybook"