Merge branch 'next' into svelte-autodoc-ts

.circleci/config.yml

@@ -390,7 +390,7 @@ jobs:
       parallelism:
         type: integer
     executor:
-      class: medium
+      class: large
       name: sb_playwright
     parallelism: << parameters.parallelism >>
     steps:

CHANGELOG.md

@@ -1,3 +1,23 @@
+## 8.2.6
+
+- CPC: Fix missing exports for addon-kit - [#28691](https://github.com/storybookjs/storybook/pull/28691), thanks @ndelangen!
+
+## 8.2.5
+
+- CPC: Add the globals export for manager - [#28650](https://github.com/storybookjs/storybook/pull/28650), thanks @ndelangen!
+- CPC: Correct path to the `@storybook/theming/create` alias - [#28643](https://github.com/storybookjs/storybook/pull/28643), thanks @Averethel!
+- Components: Remove external overrides - [#28632](https://github.com/storybookjs/storybook/pull/28632), thanks @kasperpeulen!
+- Core: Fix header for MountMustBeDestructuredError message - [#28590](https://github.com/storybookjs/storybook/pull/28590), thanks @0916dhkim!
+- Onboarding: Fix code snippet when story name differs from export name - [#28649](https://github.com/storybookjs/storybook/pull/28649), thanks @ghengeveld!
+- Telemetry: Add mount, beforeEach, moduleMock stats - [#28624](https://github.com/storybookjs/storybook/pull/28624), thanks @shilman!
+- Telemetry: CSF feature usage - [#28622](https://github.com/storybookjs/storybook/pull/28622), thanks @shilman!
+
+## 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!

CHANGELOG.prerelease.md

@@ -1,3 +1,31 @@
+## 8.3.0-alpha.2
+
+- Addon-Interactions: Fix status in panel tab - [#28580](https://github.com/storybookjs/storybook/pull/28580), thanks @yannbf!
+- Build: Remove external overrides, use package.json as source of truth - [#28632](https://github.com/storybookjs/storybook/pull/28632), thanks @kasperpeulen!
+- CLI: Add conditional logging for manager and preview start - [#28603](https://github.com/storybookjs/storybook/pull/28603), thanks @tobiasdiez!
+- CPC: Add the globals export for manager - [#28650](https://github.com/storybookjs/storybook/pull/28650), thanks @ndelangen!
+- CPC: Correct path to the `@storybook/theming/create` alias - [#28643](https://github.com/storybookjs/storybook/pull/28643), thanks @Averethel!
+- Core: Fix manager-builder `tsconfig` to emit `react-jsx` - [#28541](https://github.com/storybookjs/storybook/pull/28541), thanks @williamhelmrath!
+- Fix: Add header for MountMustBeDestructuredError message - [#28590](https://github.com/storybookjs/storybook/pull/28590), thanks @0916dhkim!
+- Fix: Prevent iframe from capturing mouse events in composed Storybooks - [#28568](https://github.com/storybookjs/storybook/pull/28568), thanks @Vincentdevreede!
+- Onboarding: Fix code snippet when story name differs from export name - [#28649](https://github.com/storybookjs/storybook/pull/28649), thanks @ghengeveld!
+- Vue: Fix out of memory error when using vue-component-meta - [#28589](https://github.com/storybookjs/storybook/pull/28589), thanks @larsrickert!
+
+## 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
 
 

code/.storybook/main.ts

@@ -8,34 +8,78 @@ const managerApiPath = path.join(__dirname, '../core/src/manager-api');
 
 const config: StorybookConfig = {
   stories: [
+    {
+      directory: '../core/template/stories',
+      titlePrefix: 'core',
+    },
     {
       directory: '../core/src/manager',
-      titlePrefix: '@manager',
+      titlePrefix: 'manager',
     },
     {
       directory: '../core/src/preview-api',
-      titlePrefix: '@preview',
+      titlePrefix: 'preview',
+    },
+    {
+      directory: '../core/src/components/brand',
+      titlePrefix: 'brand',
     },
     {
-      directory: '../core/src/components',
-      titlePrefix: '@components',
+      directory: '../core/src/components/components',
+      titlePrefix: 'components',
     },
     {
       directory: '../lib/blocks/src',
-      titlePrefix: '@blocks',
+      titlePrefix: 'blocks',
+    },
+    {
+      directory: '../addons/a11y/template/stories',
+      titlePrefix: 'addons/a11y',
+    },
+    {
+      directory: '../addons/actions/template/stories',
+      titlePrefix: 'addons/actions',
+    },
+    {
+      directory: '../addons/backgrounds/template/stories',
+      titlePrefix: 'addons/backgrounds',
     },
     {
       directory: '../addons/controls/src',
-      titlePrefix: '@addons/controls',
+      titlePrefix: 'addons/controls',
+    },
+    {
+      directory: '../addons/controls/template/stories',
+      titlePrefix: 'addons/controls',
+    },
+    {
+      directory: '../addons/docs/template/stories',
+      titlePrefix: 'addons/docs',
+    },
+    {
+      directory: '../addons/links/template/stories',
+      titlePrefix: 'addons/links',
+    },
+    {
+      directory: '../addons/viewport/template/stories',
+      titlePrefix: 'addons/viewport',
+    },
+    {
+      directory: '../addons/toolbars/template/stories',
+      titlePrefix: 'addons/toolbars',
     },
     {
       directory: '../addons/onboarding/src',
-      titlePrefix: '@addons/onboarding',
+      titlePrefix: 'addons/onboarding',
     },
     {
       directory: '../addons/interactions/src',
-      titlePrefix: '@addons/interactions',
+      titlePrefix: 'addons/interactions',
     },
+    // {
+    //   directory: '../addons/interactions/template/stories',
+    //   titlePrefix: 'addons/interactions',
+    // },
   ],
   addons: [
     '@storybook/addon-links',
@@ -46,6 +90,11 @@ const config: StorybookConfig = {
     '@storybook/addon-a11y',
     '@chromatic-com/storybook',
   ],
+  previewAnnotations: [
+    './core/template/stories/preview.ts',
+    './addons/toolbars/template/stories/preview.ts',
+    './renderers/react/template/components/index.js',
+  ],
   build: {
     test: {
       // we have stories for the blocks here, we can't exclude them
@@ -58,9 +107,21 @@ const config: StorybookConfig = {
     name: '@storybook/react-vite',
     options: {},
   },
+  refs: {
+    icons: {
+      title: 'Icons',
+      url: 'https://main--64b56e737c0aeefed9d5e675.chromatic.com',
+      expanded: false,
+    },
+  },
   core: {
     disableTelemetry: true,
   },
+  features: {
+    viewportStoryGlobals: true,
+    themesStoryGlobals: true,
+    backgroundsStoryGlobals: true,
+  },
   viteFinal: (viteConfig, { configType }) =>
     mergeConfig(viteConfig, {
       resolve: {
@@ -81,7 +142,7 @@ const config: StorybookConfig = {
         sourcemap: process.env.CI !== 'true',
       },
     }),
-  logLevel: 'debug',
+  // logLevel: 'debug',
 };
 
 export default config;

code/.storybook/preview.tsx

@@ -296,20 +296,3 @@ export const parameters = {
     ],
   },
 };
-
-export const globalTypes = {
-  theme: {
-    name: 'Theme',
-    description: 'Global theme for components',
-    toolbar: {
-      icon: 'circlehollow',
-      title: 'Theme',
-      items: [
-        { value: 'light', icon: 'circlehollow', title: 'light' },
-        { value: 'dark', icon: 'circle', title: 'dark' },
-        { value: 'side-by-side', icon: 'sidebar', title: 'side by side' },
-        { value: 'stacked', icon: 'bottombar', title: 'stacked' },
-      ],
-    },
-  },
-};

code/addons/a11y/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-a11y",
-  "version": "8.3.0-alpha.0",
+  "version": "8.3.0-alpha.2",
   "description": "Test component compliance with web accessibility standards",
   "keywords": [
     "a11y",

code/addons/actions/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-actions",
-  "version": "8.3.0-alpha.0",
+  "version": "8.3.0-alpha.2",
   "description": "Get UI feedback when an action is performed on an interactive element",
   "keywords": [
     "storybook",

code/addons/backgrounds/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-backgrounds",
-  "version": "8.3.0-alpha.0",
+  "version": "8.3.0-alpha.2",
   "description": "Switch backgrounds to view components in different settings",
   "keywords": [
     "addon",

code/addons/controls/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-controls",
-  "version": "8.3.0-alpha.0",
+  "version": "8.3.0-alpha.2",
   "description": "Interact with component inputs dynamically in the Storybook UI",
   "keywords": [
     "addon",

code/addons/docs/docs/recipes.md

@@ -184,7 +184,7 @@ The Storybook UI is a workshop for developing components in isolation. Storybook
 To address this, we’ve added a CLI flag to only export the docs. This flag is also available in dev mode:
 
 ```sh
-yarn build-storybook --docs
+yarn storybook build --docs
 ```
 
 ## Disabling docs stories

code/addons/docs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-docs",
-  "version": "8.3.0-alpha.0",
+  "version": "8.3.0-alpha.2",
   "description": "Document component usage and properties in Markdown",
   "keywords": [
     "addon",

code/addons/docs/src/preset.ts

@@ -68,11 +68,11 @@ async function webpack(
    *
    * In the future the `@storybook/theming` and `@storybook/components` can be removed, as they should be singletons in the future due to the peerDependency on `storybook` package.
    */
-  const cliPath = require.resolve('storybook/package.json');
-  const themingPath = join(cliPath, '..', 'core', 'theming', 'index.js');
+  const cliPath = dirname(require.resolve('storybook/package.json'));
+  const themingPath = join(cliPath, 'core', 'theming', 'index.js');
   const themingCreatePath = join(cliPath, 'core', 'theming', 'create.js');
 
-  const componentsPath = join(cliPath, '..', 'core', 'components', 'index.js');
+  const componentsPath = join(cliPath, 'core', 'components', 'index.js');
   const blocksPath = dirname(require.resolve('@storybook/blocks/package.json'));
   if (Array.isArray(webpackConfig.resolve?.alias)) {
     alias = [...webpackConfig.resolve?.alias];

code/addons/essentials/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-essentials",
-  "version": "8.3.0-alpha.0",
+  "version": "8.3.0-alpha.2",
   "description": "Curated addons to bring out the best of Storybook",
   "keywords": [
     "addon",

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.2",
   "description": "GitHub Flavored Markdown in Storybook",
   "keywords": [
     "addon",

code/addons/highlight/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-highlight",
-  "version": "8.3.0-alpha.0",
+  "version": "8.3.0-alpha.2",
   "description": "Highlight DOM nodes within your stories",
   "keywords": [
     "storybook-addons",

code/addons/interactions/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-interactions",
-  "version": "8.3.0-alpha.0",
+  "version": "8.3.0-alpha.2",
   "description": "Automate, test and debug user interactions",
   "keywords": [
     "storybook-addons",

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]

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>
   );

code/addons/interactions/template/stories/unhandled-errors.stories.ts

@@ -13,6 +13,7 @@ export default {
     actions: { argTypesRegex: '^on[A-Z].*' },
     chromatic: { disable: true },
   },
+  tags: ['test-skip'],
 };
 
 export const Default = {

code/addons/jest/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-jest",
-  "version": "8.3.0-alpha.0",
+  "version": "8.3.0-alpha.2",
   "description": "React storybook addon that show component jest report",
   "keywords": [
     "addon",

code/addons/links/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-links",
-  "version": "8.3.0-alpha.0",
+  "version": "8.3.0-alpha.2",
   "description": "Link stories together to build demos and prototypes with your UI components",
   "keywords": [
     "addon",
@@ -67,7 +67,7 @@
     "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/addon-bundle.ts"
   },
   "dependencies": {
-    "@storybook/csf": "0.1.11",
+    "@storybook/csf": "^0.1.11",
     "@storybook/global": "^5.0.0",
     "ts-dedent": "^2.0.0"
   },

code/addons/measure/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-measure",
-  "version": "8.3.0-alpha.0",
+  "version": "8.3.0-alpha.2",
   "description": "Inspect layouts by visualizing the box model",
   "keywords": [
     "storybook-addons",