Release: Prerelease alpha 8.3.0-alpha.3

.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,17 @@
+## 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!

CHANGELOG.prerelease.md

@@ -1,3 +1,18 @@
+## 8.3.0-alpha.3
+
+- Angular: Fix Angular template error for props with a circular reference - [#28498](https://github.com/storybookjs/storybook/pull/28498), thanks @Marklb!
+- Angular: Fix template props not able to use dot notation - [#28588](https://github.com/storybookjs/storybook/pull/28588), thanks @Marklb!
+- CLI: Fix the initialization of Storybook in workspaces - [#28699](https://github.com/storybookjs/storybook/pull/28699), thanks @valentinpalkovic!
+- CPC: Fix missing exports for addon-kit - [#28691](https://github.com/storybookjs/storybook/pull/28691), thanks @ndelangen!
+- CPC: Fix type usage in renderers - [#28745](https://github.com/storybookjs/storybook/pull/28745), thanks @ndelangen!
+- Controls: Add disableSave parameter - [#28734](https://github.com/storybookjs/storybook/pull/28734), thanks @valentinpalkovic!
+- React: Avoid 'Dynamic require of react is not possible' issue - [#28730](https://github.com/storybookjs/storybook/pull/28730), thanks @valentinpalkovic!
+- 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!
+- Types: Adjust beforeAll to be non-nullable in NormalizedProjectAnnotations - [#28671](https://github.com/storybookjs/storybook/pull/28671), thanks @kasperpeulen!
+- Vue: Fix out of memory error when using vue-component-meta for events and slots - [#28674](https://github.com/storybookjs/storybook/pull/28674), thanks @larsrickert!
+- Vue: Improve generated code snippets - [#27194](https://github.com/storybookjs/storybook/pull/27194), thanks @larsrickert!
+
 ## 8.3.0-alpha.2
 
 - Addon-Interactions: Fix status in panel tab - [#28580](https://github.com/storybookjs/storybook/pull/28580), thanks @yannbf!

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/controls/src/ControlsPanel.tsx

@@ -34,6 +34,7 @@ interface ControlsParameters {
   sort?: SortType;
   expanded?: boolean;
   presetColors?: PresetColor[];
+  disableSaveFromUI?: boolean;
 }
 
 interface ControlsPanelProps {
@@ -46,7 +47,12 @@ export const ControlsPanel = ({ saveStory, createStory }: ControlsPanelProps) =>
   const [args, updateArgs, resetArgs, initialArgs] = useArgs();
   const [globals] = useGlobals();
   const rows = useArgTypes();
-  const { expanded, sort, presetColors } = useParameter<ControlsParameters>(PARAM_KEY, {});
+  const {
+    expanded,
+    sort,
+    presetColors,
+    disableSaveFromUI = false,
+  } = useParameter<ControlsParameters>(PARAM_KEY, {});
   const { path, previewInitialized } = useStorybookState();
 
   // If the story is prepared, then show the args table
@@ -84,9 +90,10 @@ export const ControlsPanel = ({ saveStory, createStory }: ControlsPanelProps) =>
         sort={sort}
         isLoading={isLoading}
       />
-      {hasControls && hasUpdatedArgs && global.CONFIG_TYPE === 'DEVELOPMENT' && (
-        <SaveStory {...{ resetArgs, saveStory, createStory }} />
-      )}
+      {hasControls &&
+        hasUpdatedArgs &&
+        global.CONFIG_TYPE === 'DEVELOPMENT' &&
+        disableSaveFromUI !== true && <SaveStory {...{ resetArgs, saveStory, createStory }} />}
     </AddonWrapper>
   );
 };

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/template/stories/docspage/error.stories.ts

@@ -2,7 +2,7 @@ import { global as globalThis } from '@storybook/global';
 
 export default {
   component: globalThis.Components.Button,
-  tags: ['autodocs'],
+  tags: ['autodocs', '!test'],
   args: { label: 'Click Me!' },
   parameters: { chromatic: { disable: true } },
 };
@@ -12,10 +12,7 @@ export default {
  */
 export const ErrorStory = {
   decorators: [
-    (storyFn) => {
-      // Don't throw in the test runner; there's no easy way to skip (yet)
-      if (window?.navigator?.userAgent?.match(/StorybookTestRunner/)) return storyFn();
-
+    () => {
       throw new Error('Story did something wrong');
     },
   ],

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'],
 };
 
 export const Default = {

code/addons/links/package.json

@@ -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/core/package.json

@@ -253,7 +253,7 @@
     "prep": "bun ./scripts/prep.ts"
   },
   "dependencies": {
-    "@storybook/csf": "0.1.11",
+    "@storybook/csf": "^0.1.11",
     "@types/express": "^4.17.21",
     "@types/node": "^18.0.0",
     "browser-assert": "^1.2.1",
@@ -285,7 +285,7 @@
     "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-scroll-area": "^1.0.5",
     "@radix-ui/react-slot": "^1.0.2",
-    "@storybook/docs-mdx": "4.0.0-next.0",
+    "@storybook/docs-mdx": "4.0.0-next.1",
     "@storybook/global": "^5.0.0",
     "@storybook/icons": "^1.2.5",
     "@tanstack/react-virtual": "^3.3.0",

code/core/src/common/js-package-manager/JsPackageManager.ts

@@ -64,22 +64,6 @@ export abstract class JsPackageManager {
     return packageJSON ? packageJSON.version ?? null : null;
   }
 
-  // NOTE: for some reason yarn prefers the npm registry in
-  // local development, so always use npm
-  async setRegistryURL(url: string) {
-    if (url) {
-      await this.executeCommand({ command: 'npm', args: ['config', 'set', 'registry', url] });
-    } else {
-      await this.executeCommand({ command: 'npm', args: ['config', 'delete', 'registry'] });
-    }
-  }
-
-  async getRegistryURL() {
-    const res = await this.executeCommand({ command: 'npm', args: ['config', 'get', 'registry'] });
-    const url = res.trim();
-    return url === 'undefined' ? undefined : url;
-  }
-
   constructor(options?: JsPackageManagerOptions) {
     this.cwd = options?.cwd || process.cwd();
   }
@@ -487,6 +471,8 @@ export abstract class JsPackageManager {
   ): // Use generic and conditional type to force `string[]` if fetchAllVersions is true and `string` if false
   Promise<T extends true ? string[] : string>;
 
+  public abstract getRegistryURL(): Promise<string | undefined>;
+
   public abstract runPackageCommand(
     command: string,
     args: string[],

code/core/src/common/js-package-manager/NPMProxy.test.ts

@@ -34,21 +34,6 @@ describe('NPM Proxy', () => {
     });
   });
 
-  describe('setRegistryUrl', () => {
-    it('should run `npm config set registry https://foo.bar`', async () => {
-      const executeCommandSpy = vi.spyOn(npmProxy, 'executeCommand').mockResolvedValueOnce('');
-
-      await npmProxy.setRegistryURL('https://foo.bar');
-
-      expect(executeCommandSpy).toHaveBeenCalledWith(
-        expect.objectContaining({
-          command: 'npm',
-          args: ['config', 'set', 'registry', 'https://foo.bar'],
-        })
-      );
-    });
-  });
-
   describe('installDependencies', () => {
     describe('npm6', () => {
       it('should run `npm install`', async () => {

code/core/src/common/js-package-manager/NPMProxy.ts

@@ -181,6 +181,17 @@ export class NPMProxy extends JsPackageManager {
     });
   }
 
+  public async getRegistryURL() {
+    const res = await this.executeCommand({
+      command: 'npm',
+      // "npm config" commands are not allowed in workspaces per default
+      // https://github.com/npm/cli/issues/6099#issuecomment-1847584792
+      args: ['config', 'get', 'registry', '-ws=false', '-iwr'],
+    });
+    const url = res.trim();
+    return url === 'undefined' ? undefined : url;
+  }
+
   protected async runAddDeps(dependencies: string[], installAsDevDependencies: boolean) {
     const { logStream, readLogFile, moveLogFile, removeLogFile } = await createLogStream();
     let args = [...dependencies];

code/core/src/common/js-package-manager/PNPMProxy.test.ts

@@ -24,21 +24,6 @@ describe('PNPM Proxy', () => {
     });
   });
 
-  describe('setRegistryUrl', () => {
-    it('should run `npm config set registry https://foo.bar`', async () => {
-      const executeCommandSpy = vi.spyOn(pnpmProxy, 'executeCommand').mockResolvedValueOnce('');
-
-      await pnpmProxy.setRegistryURL('https://foo.bar');
-
-      expect(executeCommandSpy).toHaveBeenCalledWith(
-        expect.objectContaining({
-          command: 'npm',
-          args: ['config', 'set', 'registry', 'https://foo.bar'],
-        })
-      );
-    });
-  });
-
   describe('installDependencies', () => {
     it('should run `pnpm install`', async () => {
       const executeCommandSpy = vi