Merge branch 'next' into marklb/fix-non-dot-notation-in-tpl

storybookjs · Jul 18, 2024 · 2a822b6 · 2a822b6
2 parents cb5f303 + 3590a1c
commit 2a822b6
Show file tree

Hide file tree

Showing 126 changed files with 693 additions and 332 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,20 @@
+## 8.2.4
+
+- CLI: Add diagnostic when the `storybook` package is missing - [#28604](https://github.com/storybookjs/storybook/pull/28604), thanks @kasperpeulen!
+- CLI: Make a few automigrations run on all version upgrades - [#28601](https://github.com/storybookjs/storybook/pull/28601), thanks @yannbf!
+- CPC: Direct dependencies on shim packages in renderers - [#28599](https://github.com/storybookjs/storybook/pull/28599), thanks @ndelangen!
+
+## 8.2.3
+
+- Bug: Fix invalid docs links in Configure.mdx template page - [#28560](https://github.com/storybookjs/storybook/pull/28560), thanks @kylegach!
+- CLI: Add "missing-storybook-dependencies" automigration - [#28579](https://github.com/storybookjs/storybook/pull/28579), thanks @yannbf!
+- CPC: Add `theming/create` aliases in docs preset - [#28570](https://github.com/storybookjs/storybook/pull/28570), thanks @ndelangen!
+- CPC: Fix incorrect re-export in `core-events` - [#28573](https://github.com/storybookjs/storybook/pull/28573), thanks @ndelangen!
+- CPC: Fix Vite builder had wrong conditions - [#28581](https://github.com/storybookjs/storybook/pull/28581), thanks @ndelangen!
+- CSF: Fix small typing issue - [#28587](https://github.com/storybookjs/storybook/pull/28587), thanks @valentinpalkovic!
+- Portable stories: Remove unused types - [#28548](https://github.com/storybookjs/storybook/pull/28548), thanks @kasperpeulen!
+- Webpack: Fix sourceMap generation in csf-tools - [#28585](https://github.com/storybookjs/storybook/pull/28585), thanks @valentinpalkovic!
+
 ## 8.2.2
 
 - CPC: Add `ESM` export to `docs-tools` & `node-logger` packages - [#28539](https://github.com/storybookjs/storybook/pull/28539), thanks @ndelangen!

diff --git a/CHANGELOG.prerelease.md b/CHANGELOG.prerelease.md
@@ -1,3 +1,18 @@
+## 8.3.0-alpha.1
+
+- Bug: Fix invalid docs links in Configure.mdx template page - [#28560](https://github.com/storybookjs/storybook/pull/28560), thanks @kylegach!
+- CLI: Add "missing-storybook-dependencies" automigration - [#28579](https://github.com/storybookjs/storybook/pull/28579), thanks @yannbf!
+- CLI: Add diagnostic when the `storybook` package is missing - [#28604](https://github.com/storybookjs/storybook/pull/28604), thanks @kasperpeulen!
+- CLI: Make a few automigrations run on all version upgrades - [#28601](https://github.com/storybookjs/storybook/pull/28601), thanks @yannbf!
+- CPC: Add `theming/create` aliases in docs preset - [#28570](https://github.com/storybookjs/storybook/pull/28570), thanks @ndelangen!
+- CPC: Direct dependencies on shim packages in renderers - [#28599](https://github.com/storybookjs/storybook/pull/28599), thanks @ndelangen!
+- CPC: Fix Vite builder had wrong conditions - [#28581](https://github.com/storybookjs/storybook/pull/28581), thanks @ndelangen!
+- CPC: Fix incorrect re-export in `core-events` - [#28573](https://github.com/storybookjs/storybook/pull/28573), thanks @ndelangen!
+- CSF: Fix small typing issue - [#28587](https://github.com/storybookjs/storybook/pull/28587), thanks @valentinpalkovic!
+- Core: Upgrade docs-mdx for smaller install - [#28552](https://github.com/storybookjs/storybook/pull/28552), thanks @shilman!
+- Portable stories: Remove unused types - [#28548](https://github.com/storybookjs/storybook/pull/28548), thanks @kasperpeulen!
+- Webpack: Fix sourceMap generation in csf-tools - [#28585](https://github.com/storybookjs/storybook/pull/28585), thanks @valentinpalkovic!
+
 ## 8.3.0-alpha.0
 
 

diff --git a/code/addons/a11y/package.json b/code/addons/a11y/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-a11y",
-  "version": "8.3.0-alpha.0",
+  "version": "8.3.0-alpha.1",
   "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": "8.3.0-alpha.0",
+  "version": "8.3.0-alpha.1",
   "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": "8.3.0-alpha.0",
+  "version": "8.3.0-alpha.1",
   "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": "8.3.0-alpha.0",
+  "version": "8.3.0-alpha.1",
   "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": "8.3.0-alpha.0",
+  "version": "8.3.0-alpha.1",
   "description": "Document component usage and properties in Markdown",
   "keywords": [
     "addon",

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

diff --git a/code/addons/gfm/package.json b/code/addons/gfm/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-mdx-gfm",
-  "version": "8.3.0-alpha.0",
+  "version": "8.3.0-alpha.1",
   "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": "8.3.0-alpha.0",
+  "version": "8.3.0-alpha.1",
   "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": "8.3.0-alpha.0",
+  "version": "8.3.0-alpha.1",
   "description": "Automate, test and debug user interactions",
   "keywords": [
     "storybook-addons",

diff --git a/code/addons/interactions/src/Panel.tsx b/code/addons/interactions/src/Panel.tsx
@@ -180,13 +180,13 @@ export const Panel = memo<{ storyId: string }>(function PanelMemoized({ storyId
         });
       },
       [STORY_THREW_EXCEPTION]: () => {
-        set((s) => ({ ...s, isErrored: true }));
+        set((s) => ({ ...s, isErrored: true, hasException: true }));
       },
       [PLAY_FUNCTION_THREW_EXCEPTION]: (e) => {
-        set((s) => ({ ...s, caughtException: e }));
+        set((s) => ({ ...s, caughtException: e, hasException: true }));
       },
       [UNHANDLED_ERRORS_WHILE_PLAYING]: (e) => {
-        set((s) => ({ ...s, unhandledErrors: e }));
+        set((s) => ({ ...s, unhandledErrors: e, hasException: true }));
       },
     },
     [collapsed]

diff --git a/code/addons/interactions/src/components/TabStatus.tsx b/code/addons/interactions/src/components/TabStatus.tsx
diff --git a/code/addons/interactions/src/manager.tsx b/code/addons/interactions/src/manager.tsx
@@ -2,10 +2,8 @@ import React, { useCallback } from 'react';
 import type { Combo } from 'storybook/internal/manager-api';
 import { addons, Consumer, types, useAddonState } from 'storybook/internal/manager-api';
 import { AddonPanel, Badge, Spaced } from 'storybook/internal/components';
-import { CallStates } from '@storybook/instrumenter';
 import { ADDON_ID, PANEL_ID } from './constants';
 import { Panel } from './Panel';
-import { TabIcon } from './components/TabStatus';
 
 function Title() {
   const [addonState = {}] = useAddonState(ADDON_ID);
@@ -18,7 +16,7 @@ function Title() {
         {interactionsCount && !hasException ? (
           <Badge status="neutral">{interactionsCount}</Badge>
         ) : null}
-        {hasException ? <TabIcon status={CallStates.ERROR} /> : null}
+        {hasException ? <Badge status="negative">{interactionsCount}</Badge> : null}
       </Spaced>
     </div>
   );

diff --git a/code/addons/jest/package.json b/code/addons/jest/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-jest",
-  "version": "8.3.0-alpha.0",
+  "version": "8.3.0-alpha.1",
   "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": "8.3.0-alpha.0",
+  "version": "8.3.0-alpha.1",
   "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": "8.3.0-alpha.0",
+  "version": "8.3.0-alpha.1",
   "description": "Inspect layouts by visualizing the box model",
   "keywords": [
     "storybook-addons",

diff --git a/code/addons/onboarding/package.json b/code/addons/onboarding/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-onboarding",
-  "version": "8.3.0-alpha.0",
+  "version": "8.3.0-alpha.1",
   "description": "Storybook Addon Onboarding - Introduces a new onboarding experience",
   "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": "8.3.0-alpha.0",
+  "version": "8.3.0-alpha.1",
   "description": "Outline all elements with CSS to help with layout placement and alignment",
   "keywords": [
     "storybook-addons",

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

diff --git a/code/addons/toolbars/package.json b/code/addons/toolbars/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-toolbars",
-  "version": "8.3.0-alpha.0",
+  "version": "8.3.0-alpha.1",
   "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": "8.3.0-alpha.0",
+  "version": "8.3.0-alpha.1",
   "description": "Build responsive components by adjusting Storybook’s viewport size and orientation",
   "keywords": [
     "addon",

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

diff --git a/code/core/assets/server/addon.tsconfig.json b/code/core/assets/server/addon.tsconfig.json
@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "jsx": "react",
+    "jsx": "react-jsx",
     "jsxImportSource": "react"
   }
 }
diff --git a/code/core/package.json b/code/core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/core",
-  "version": "8.3.0-alpha.0",
+  "version": "8.3.0-alpha.1",
   "description": "Storybook framework-agnostic API",
   "keywords": [
     "storybook"

diff --git a/code/core/scripts/entries.ts b/code/core/scripts/entries.ts
@@ -28,12 +28,7 @@ export const getEntries = (cwd: string) => {
     define('src/preview-api/index.ts', ['browser', 'node'], true),
     define('src/manager-api/index.ts', ['browser', 'node'], true, ['react']),
     define('src/router/index.ts', ['browser', 'node'], true, ['react']),
-    define('src/components/index.ts', ['browser', 'node'], true, [
-      'react',
-      'react-dom',
-      '@storybook/csf',
-      '@storybook/global',
-    ]),
+    define('src/components/index.ts', ['browser', 'node'], true, ['react', 'react-dom']),
     define('src/theming/index.ts', ['browser', 'node'], true, ['react']),
     define('src/theming/create.ts', ['browser', 'node'], true, ['react']),
     define('src/docs-tools/index.ts', ['browser', 'node'], true),

diff --git a/code/core/src/builder-manager/index.ts b/code/core/src/builder-manager/index.ts
@@ -126,7 +126,9 @@ const starter: StarterFunction = async function* starterGeneratorFn({
   options,
   router,
 }) {
-  logger.info('=> Starting manager..');
+  if (!options.quiet) {
+    logger.info('=> Starting manager..');
+  }
 
   const {
     config,

diff --git a/code/core/src/common/js-package-manager/JsPackageManager.ts b/code/core/src/common/js-package-manager/JsPackageManager.ts
@@ -500,6 +500,10 @@ export abstract class JsPackageManager {
     stdio?: 'inherit' | 'pipe'
   ): string;
   public abstract findInstallations(pattern?: string[]): Promise<InstallationMetadata | undefined>;
+  public abstract findInstallations(
+    pattern?: string[],
+    options?: { depth: number }
+  ): Promise<InstallationMetadata | undefined>;
   public abstract parseErrorFromLogs(logs?: string): string;
 
   public executeCommandSync({

diff --git a/code/core/src/common/js-package-manager/NPMProxy.ts b/code/core/src/common/js-package-manager/NPMProxy.ts
@@ -132,28 +132,28 @@ export class NPMProxy extends JsPackageManager {
     });
   }
 
-  public async findInstallations(pattern: string[]) {
-    const exec = async ({ depth }: { depth: number }) => {
+  public async findInstallations(pattern: string[], { depth = 99 }: { depth?: number } = {}) {
+    const exec = async ({ packageDepth }: { packageDepth: number }) => {
       const pipeToNull = platform() === 'win32' ? '2>NUL' : '2>/dev/null';
       return this.executeCommand({
         command: 'npm',
-        args: ['ls', '--json', `--depth=${depth}`, pipeToNull],
+        args: ['ls', '--json', `--depth=${packageDepth}`, pipeToNull],
         env: {
           FORCE_COLOR: 'false',
         },
       });
     };
 
     try {
-      const commandResult = await exec({ depth: 99 });
+      const commandResult = await exec({ packageDepth: depth });
       const parsedOutput = JSON.parse(commandResult);
 
       return this.mapDependencies(parsedOutput, pattern);
     } catch (e) {
       // when --depth is higher than 0, npm can return a non-zero exit code
       // in case the user's project has peer dependency issues. So we try again with no depth
       try {
-        const commandResult = await exec({ depth: 0 });
+        const commandResult = await exec({ packageDepth: 0 });
         const parsedOutput = JSON.parse(commandResult);
 
         return this.mapDependencies(parsedOutput, pattern);

diff --git a/code/core/src/common/js-package-manager/PNPMProxy.ts b/code/core/src/common/js-package-manager/PNPMProxy.ts
@@ -98,16 +98,16 @@ export class PNPMProxy extends JsPackageManager {
     });
   }
 
-  public async findInstallations(pattern: string[]) {
-    const commandResult = await this.executeCommand({
-      command: 'pnpm',
-      args: ['list', pattern.map((p) => `"${p}"`).join(' '), '--json', '--depth=99'],
-      env: {
-        FORCE_COLOR: 'false',
-      },
-    });
-
+  public async findInstallations(pattern: string[], { depth = 99 }: { depth?: number } = {}) {
     try {
+      const commandResult = await this.executeCommand({
+        command: 'pnpm',
+        args: ['list', pattern.map((p) => `"${p}"`).join(' '), '--json', `--depth=${depth}`],
+        env: {
+          FORCE_COLOR: 'false',
+        },
+      });
+
       const parsedOutput = JSON.parse(commandResult);
       return this.mapDependencies(parsedOutput, pattern);
     } catch (e) {

diff --git a/code/core/src/common/js-package-manager/Yarn1Proxy.ts b/code/core/src/common/js-package-manager/Yarn1Proxy.ts
@@ -83,16 +83,22 @@ export class Yarn1Proxy extends JsPackageManager {
     return JSON.parse(readFileSync(packageJsonPath, 'utf-8')) as Record<string, any>;
   }
 
-  public async findInstallations(pattern: string[]) {
-    const commandResult = await this.executeCommand({
-      command: 'yarn',
-      args: ['list', '--pattern', pattern.map((p) => `"${p}"`).join(' '), '--recursive', '--json'],
-      env: {
-        FORCE_COLOR: 'false',
-      },
-    });
+  public async findInstallations(pattern: string[], { depth = 99 }: { depth?: number } = {}) {
+    const yarnArgs = ['list', '--pattern', pattern.map((p) => `"${p}"`).join(' '), '--json'];
+
+    if (depth !== 0) {
+      yarnArgs.push('--recursive');
+    }
 
     try {
+      const commandResult = await this.executeCommand({
+        command: 'yarn',
+        args: yarnArgs.concat(pattern),
+        env: {
+          FORCE_COLOR: 'false',
+        },
+      });
+
       const parsedOutput = JSON.parse(commandResult);
       return this.mapDependencies(parsedOutput, pattern);
     } catch (e) {