Release: Prerelease 10.1.0-beta.4

CHANGELOG.prerelease.md

@@ -1,3 +1,13 @@
+## 10.1.0-beta.4
+
+- Angular: Migrate from RxJS to async/await in command builders and run Compodoc utility as spinner - [#33156](https://github.com/storybookjs/storybook/pull/33156), thanks @valentinpalkovic!
+- CLI: Fix 'beforeVersion' evaluation for Storybook package - [#33141](https://github.com/storybookjs/storybook/pull/33141), thanks @valentinpalkovic!
+- CLI: Update clack - [#33151](https://github.com/storybookjs/storybook/pull/33151), thanks @valentinpalkovic!
+- Checklist: Data improvements - [#33129](https://github.com/storybookjs/storybook/pull/33129), thanks @ghengeveld!
+- Guide: Collapse checklist items by default - [#33160](https://github.com/storybookjs/storybook/pull/33160), thanks @ghengeveld!
+- React: Add isPackage flag to component imports for better package identification - [#33090](https://github.com/storybookjs/storybook/pull/33090), thanks @kasperpeulen!
+- UI: Improve status handling in sidebar nodes - [#32965](https://github.com/storybookjs/storybook/pull/32965), thanks @yannbf!
+
 ## 10.1.0-beta.3
 
 - A11y: Make search clear button keyboard accessible - [#32590](https://github.com/storybookjs/storybook/pull/32590), thanks @ritoban23!

code/addons/vitest/src/manager.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 
-import { Addon_TypesEnum } from 'storybook/internal/types';
+import { Addon_TypesEnum, SupportedBuilder } from 'storybook/internal/types';
 
 import {
   a11yStatusStore,
@@ -23,8 +23,7 @@ import {
 import { useTestProvider } from './use-test-provider-state';
 
 addons.register(ADDON_ID, (api) => {
-  const storybookBuilder = (globalThis as any).STORYBOOK_BUILDER || '';
-  if (storybookBuilder.includes('vite')) {
+  if (globalThis.STORYBOOK_BUILDER === SupportedBuilder.VITE) {
     const openPanel = (panelId: string) => {
       api.setSelectedPanel(panelId);
       api.togglePanel(true);

code/addons/vitest/src/typings.d.ts

@@ -1,5 +1,5 @@
 declare const BROWSER_CONFIG: object;
-declare var STORYBOOK_BUILDER: string | undefined;
+declare var STORYBOOK_BUILDER: import('storybook/internal/types').SupportedBuilder | undefined;
 
 interface ImportMetaEnv {
   __STORYBOOK_URL__?: string;

code/core/package.json

@@ -220,7 +220,7 @@
     "@babel/parser": "^7.26.9",
     "@babel/traverse": "^7.26.9",
     "@babel/types": "^7.26.8",
-    "@clack/prompts": "1.0.0-alpha.6",
+    "@clack/prompts": "1.0.0-alpha.7",
     "@devtools-ds/object-inspector": "^1.1.2",
     "@discoveryjs/json-ext": "^0.5.3",
     "@emotion/cache": "^11.14.0",

code/core/src/builder-manager/utils/framework.ts

@@ -1,59 +1,27 @@
-import { sep } from 'node:path';
-
-import { extractRenderer, getFrameworkName } from 'storybook/internal/common';
-import type { Options } from 'storybook/internal/types';
-
-interface PropertyObject {
-  name: string;
-  options?: Record<string, any>;
-}
-
-type Property = string | PropertyObject | undefined;
-
-export const pluckNameFromConfigProperty = (property: Property) => {
-  if (!property) {
-    return undefined;
-  }
-
-  return typeof property === 'string' ? property : property.name;
-};
-
-// For replacing Windows backslashes with forward slashes
-const normalizePath = (packagePath: string) => packagePath.replaceAll(sep, '/');
-
-export const pluckStorybookPackageFromPath = (packagePath: string) =>
-  normalizePath(packagePath).match(/(@storybook\/.*)$/)?.[1];
-
-export const pluckThirdPartyPackageFromPath = (packagePath: string) =>
-  normalizePath(packagePath).split('node_modules/')[1] ?? packagePath;
+import {
+  extractFrameworkPackageName,
+  frameworkPackages,
+  frameworkToRenderer,
+  getFrameworkName,
+} from 'storybook/internal/common';
+import { type Options, SupportedBuilder } from 'storybook/internal/types';
 
 export const buildFrameworkGlobalsFromOptions = async (options: Options) => {
-  const globals: Record<string, any> = {};
+  const globals: Record<string, string | undefined> = {};
 
-  const { builder } = await options.presets.apply('core');
+  const builderConfig = (await options.presets.apply('core')).builder;
+  const builderName = typeof builderConfig === 'string' ? builderConfig : builderConfig?.name;
+  const builder = Object.values(SupportedBuilder).find((builder) => builderName?.includes(builder));
 
   const frameworkName = await getFrameworkName(options);
-  const rendererName = await extractRenderer(frameworkName);
-
-  if (rendererName) {
-    globals.STORYBOOK_RENDERER = rendererName ?? undefined;
-  }
-
-  const resolvedPreviewBuilder = pluckNameFromConfigProperty(builder);
-  if (resolvedPreviewBuilder) {
-    globals.STORYBOOK_BUILDER =
-      pluckStorybookPackageFromPath(resolvedPreviewBuilder) ??
-      pluckThirdPartyPackageFromPath(resolvedPreviewBuilder);
-  }
-
-  const framework = pluckNameFromConfigProperty(await options.presets.apply('framework'));
-  if (framework) {
-    globals.STORYBOOK_FRAMEWORK = framework;
-  }
-
-  if (options.networkAddress) {
-    globals.STORYBOOK_NETWORK_ADDRESS = options.networkAddress;
-  }
+  const frameworkPackageName = extractFrameworkPackageName(frameworkName);
+  const framework = frameworkPackages[frameworkPackageName];
+  const renderer = frameworkToRenderer[framework];
+
+  globals.STORYBOOK_BUILDER = builder;
+  globals.STORYBOOK_FRAMEWORK = framework;
+  globals.STORYBOOK_RENDERER = renderer;
+  globals.STORYBOOK_NETWORK_ADDRESS = options.networkAddress;
 
   return globals;
 };

code/core/src/cli/AddonVitestService.constants.ts

@@ -0,0 +1,13 @@
+import { SupportedFramework } from '../types';
+
+export const SUPPORTED_FRAMEWORKS: readonly SupportedFramework[] = [
+  SupportedFramework.HTML_VITE,
+  SupportedFramework.NEXTJS_VITE,
+  SupportedFramework.PREACT_VITE,
+  SupportedFramework.REACT_NATIVE_WEB_VITE,
+  SupportedFramework.REACT_VITE,
+  SupportedFramework.SVELTE_VITE,
+  SupportedFramework.SVELTEKIT,
+  SupportedFramework.VUE3_VITE,
+  SupportedFramework.WEB_COMPONENTS_VITE,
+];

code/core/src/cli/AddonVitestService.ts

@@ -12,7 +12,8 @@ import * as find from 'empathic/find';
 import { coerce, minVersion, satisfies, validRange } from 'semver';
 import { dedent } from 'ts-dedent';
 
-import { SupportedBuilder, SupportedFramework } from '../types';
+import { SupportedBuilder, type SupportedFramework } from '../types';
+import { SUPPORTED_FRAMEWORKS } from './AddonVitestService.constants';
 
 type Result = {
   compatible: boolean;
@@ -38,17 +39,6 @@ export interface AddonVitestCompatibilityOptions {
 export class AddonVitestService {
   constructor(private readonly packageManager: JsPackageManager) {}
 
-  readonly supportedFrameworks: SupportedFramework[] = [
-    SupportedFramework.HTML_VITE,
-    SupportedFramework.NEXTJS_VITE,
-    SupportedFramework.PREACT_VITE,
-    SupportedFramework.REACT_NATIVE_WEB_VITE,
-    SupportedFramework.REACT_VITE,
-    SupportedFramework.SVELTE_VITE,
-    SupportedFramework.SVELTEKIT,
-    SupportedFramework.VUE3_VITE,
-    SupportedFramework.WEB_COMPONENTS_VITE,
-  ];
   /**
    * Collect all dependencies needed for @storybook/addon-vitest
    *
@@ -196,7 +186,7 @@ export class AddonVitestService {
     }
 
     // Check renderer/framework support
-    const isFrameworkSupported = this.supportedFrameworks.some(
+    const isFrameworkSupported = SUPPORTED_FRAMEWORKS.some(
       (framework) => options.framework === framework
     );
 

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

@@ -89,7 +89,10 @@ export class BUNProxy extends JsPackageManager {
 
   public async getModulePackageJSON(packageName: string): Promise<PackageJson | null> {
     const wantedPath = join('node_modules', packageName, 'package.json');
-    const packageJsonPath = find.up(wantedPath, { cwd: this.cwd, last: getProjectRoot() });
+    const packageJsonPath = find.up(wantedPath, {
+      cwd: this.primaryPackageJson.operationDir,
+      last: getProjectRoot(),
+    });
 
     if (!packageJsonPath) {
       return null;

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

@@ -105,7 +105,7 @@ export abstract class JsPackageManager {
   abstract getRunCommand(command: string): string;
 
   /** Get the package.json file for a given module. */
-  abstract getModulePackageJSON(packageName: string): Promise<PackageJson | null>;
+  abstract getModulePackageJSON(packageName: string, cwd?: string): Promise<PackageJson | null>;
 
   isStorybookInMonorepo() {
     const turboJsonPath = find.up(`turbo.json`, { last: getProjectRoot() });

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

@@ -78,7 +78,10 @@ export class NPMProxy extends JsPackageManager {
 
   async getModulePackageJSON(packageName: string): Promise<PackageJson | null> {
     const wantedPath = join('node_modules', packageName, 'package.json');
-    const packageJsonPath = find.up(wantedPath, { cwd: this.cwd, last: getProjectRoot() });
+    const packageJsonPath = find.up(wantedPath, {
+      cwd: this.primaryPackageJson.operationDir,
+      last: getProjectRoot(),
+    });
 
     if (!packageJsonPath) {
       return null;

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

@@ -158,7 +158,10 @@ export class PNPMProxy extends JsPackageManager {
     }
 
     const wantedPath = join('node_modules', packageName, 'package.json');
-    const packageJsonPath = find.up(wantedPath, { cwd: this.cwd, last: getProjectRoot() });
+    const packageJsonPath = find.up(wantedPath, {
+      cwd: this.primaryPackageJson.operationDir,
+      last: getProjectRoot(),
+    });
 
     if (!packageJsonPath) {
       return null;

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

@@ -78,7 +78,10 @@ export class Yarn1Proxy extends JsPackageManager {
 
   public async getModulePackageJSON(packageName: string): Promise<PackageJson | null> {
     const wantedPath = join('node_modules', packageName, 'package.json');
-    const packageJsonPath = find.up(wantedPath, { cwd: this.cwd, last: getProjectRoot() });
+    const packageJsonPath = find.up(wantedPath, {
+      cwd: this.primaryPackageJson.operationDir,
+      last: getProjectRoot(),
+    });
 
     if (!packageJsonPath) {
       return null;

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

@@ -148,7 +148,7 @@ export class Yarn2Proxy extends JsPackageManager {
   // TODO: Remove pnp compatibility code in SB11
   async getModulePackageJSON(packageName: string): Promise<PackageJson | null> {
     const pnpapiPath = find.any(['.pnp.js', '.pnp.cjs'], {
-      cwd: this.cwd,
+      cwd: this.primaryPackageJson.operationDir,
       last: getProjectRoot(),
     });
 

code/core/src/common/utils/cli.ts

@@ -10,7 +10,6 @@ import uniqueString from 'unique-string';
 import type { JsPackageManager } from '../js-package-manager';
 import satelliteAddons from '../satellite-addons';
 import storybookPackagesVersions from '../versions';
-import { rendererPackages } from './get-storybook-info';
 
 const tempDir = () => realpath(os.tmpdir());
 
@@ -67,25 +66,6 @@ export function parseList(str: string): string[] {
     .filter((item) => item.length > 0);
 }
 
-/**
- * Given a package manager, returns the coerced version of Storybook. It tries to find renderer
- * packages in the project and returns the coerced version of the first one found. Example: If
- *
- * @storybook/react version 8.0.0-alpha.14 is installed, it returns the coerced version 8.0.0
- */
-export async function getCoercedStorybookVersion(packageManager: JsPackageManager) {
-  const packages = (
-    await Promise.all(
-      Object.keys(rendererPackages).map(async (pkg) => ({
-        name: pkg,
-        version: (await packageManager.getModulePackageJSON(pkg))?.version ?? null,
-      }))
-    )
-  ).filter(({ version }) => !!version);
-
-  return packages[0]?.version || storybookPackagesVersions.storybook;
-}
-
 export function getEnvConfig(program: Record<string, any>, configEnv: Record<string, any>): void {
   Object.keys(configEnv).forEach((fieldName) => {
     const envVarName = configEnv[fieldName];

code/core/src/common/utils/get-storybook-info.ts

@@ -150,12 +150,12 @@ export const getStorybookInfo = async (
   const frameworkValue = mainConfig.framework;
   const frameworkField = typeof frameworkValue === 'string' ? frameworkValue : frameworkValue?.name;
   const addons = getAddonNames(mainConfig);
-  const version = getStorybookVersionSpecifier(configDir);
+  const versionSpecifier = getStorybookVersionSpecifier(configDir);
 
   if (!frameworkField) {
     return {
       ...configInfo,
-      version,
+      versionSpecifier,
       addons,
       mainConfig,
       mainConfigPath: configInfo.mainConfigPath ?? undefined,
@@ -183,7 +183,7 @@ export const getStorybookInfo = async (
     addons,
     mainConfig,
     framework,
-    version,
+    versionSpecifier,
     renderer: renderer ?? undefined,
     builder: builder ?? undefined,
     frameworkPackage,

code/core/src/manager-api/typings.d.ts

@@ -7,6 +7,6 @@ declare var REFS: any;
 declare var VERSIONCHECK: any;
 declare var LOGLEVEL: 'trace' | 'debug' | 'info' | 'warn' | 'error' | 'silent' | undefined;
 declare var STORYBOOK_ADDON_STATE: Record<string, any>;
-declare var STORYBOOK_RENDERER: string | undefined;
-declare var STORYBOOK_BUILDER: string | undefined;
-declare var STORYBOOK_FRAMEWORK: string | undefined;
+declare var STORYBOOK_FRAMEWORK: import('storybook/internal/types').SupportedFramework | undefined;
+declare var STORYBOOK_RENDERER: import('storybook/internal/types').SupportedRenderer | undefined;
+declare var STORYBOOK_BUILDER: import('storybook/internal/types').SupportedBuilder | undefined;

code/core/src/manager/components/sidebar/ChecklistWidget.stories.tsx

@@ -38,6 +38,7 @@ const meta = preview.meta({
         ...initialState.items,
         controls: { status: 'accepted' },
         renderComponent: { status: 'done' },
+        installVitest: { status: 'done' },
         moreComponents: { status: 'skipped' },
         moreStories: { status: 'skipped' },
       },
@@ -57,6 +58,7 @@ const play: PlayFunction = async ({ step }) => {
         ...initialState.items,
         controls: { status: 'accepted' },
         renderComponent: { status: 'done' },
+        installVitest: { status: 'done' },
         viewports: { status: 'done' },
         moreComponents: { status: 'skipped' },
         moreStories: { status: 'skipped' },
@@ -73,10 +75,11 @@ const play: PlayFunction = async ({ step }) => {
         ...initialState.items,
         controls: { status: 'accepted' },
         renderComponent: { status: 'done' },
+        installVitest: { status: 'done' },
         viewports: { status: 'done' },
         moreComponents: { status: 'skipped' },
         moreStories: { status: 'skipped' },
-        installVitest: { status: 'skipped' },
+        writeInteractions: { status: 'skipped' },
       },
     });
   });