CLI: Modernize Storybook CLI with new init workflow, Clack UI, and Generator System

.circleci/config.yml

@@ -950,7 +950,7 @@ jobs:
                     mkdir features-1
                     cd features-1
                     npm set registry http://localhost:6001
-                    npx create-storybook --yes --package-manager npm --features dev docs test
+                    npx create-storybook --yes --package-manager npm --features docs test a11y
                     npx vitest
                 environment:
                     IN_STORYBOOK_SANDBOX: true

.circleci/src/jobs/test-init-features.yml

@@ -26,7 +26,7 @@ steps:
         mkdir features-1
         cd features-1
         npm set registry http://localhost:6001
-        npx create-storybook --yes --package-manager npm --features dev docs test
+        npx create-storybook --yes --package-manager npm --features docs test a11y --loglevel=debug
         npx vitest
       environment:
         IN_STORYBOOK_SANDBOX: true

code/addons/a11y/src/postinstall.ts

@@ -1,32 +1,29 @@
-// eslint-disable-next-line depend/ban-dependencies
-import { execa } from 'execa';
+import { JsPackageManagerFactory } from 'storybook/internal/common';
 
 import type { PostinstallOptions } from '../../../lib/cli-storybook/src/add';
 
-const $ = execa({
-  preferLocal: true,
-  stdio: 'inherit',
-  // we stream the stderr to the console
-  reject: false,
-});
-
 export default async function postinstall(options: PostinstallOptions) {
-  const command = ['storybook', 'automigrate', 'addon-a11y-addon-test'];
+  const args = ['storybook', 'automigrate', 'addon-a11y-addon-test'];
 
-  command.push('--loglevel', 'silent');
-  command.push('--skip-doctor');
+  args.push('--loglevel', 'silent');
+  args.push('--skip-doctor');
 
   if (options.yes) {
-    command.push('--yes');
+    args.push('--yes');
   }
 
   if (options.packageManager) {
-    command.push('--package-manager', options.packageManager);
+    args.push('--package-manager', options.packageManager);
   }
 
   if (options.configDir) {
-    command.push('--config-dir', `"${options.configDir}"`);
+    args.push('--config-dir', options.configDir);
   }
 
-  await $`${command.join(' ')}`;
+  const jsPackageManager = JsPackageManagerFactory.getPackageManager({
+    force: options.packageManager,
+    configDir: options.configDir,
+  });
+
+  await jsPackageManager.runPackageCommand({ args });
 }

code/addons/themes/src/postinstall.ts

@@ -1,4 +1,4 @@
-import { spawn } from 'child_process';
+import { spawnSync } from 'child_process';
 
 const PACKAGE_MANAGER_TO_COMMAND = {
   npm: 'npx',
@@ -12,11 +12,11 @@ const selectPackageManagerCommand = (packageManager: string) =>
   PACKAGE_MANAGER_TO_COMMAND[packageManager as keyof typeof PACKAGE_MANAGER_TO_COMMAND];
 
 export default async function postinstall({ packageManager = 'npm' }) {
-  const command = selectPackageManagerCommand(packageManager);
+  const commandString = selectPackageManagerCommand(packageManager);
+  const [command, ...commandArgs] = commandString.split(' ');
 
-  await spawn(`${command} @storybook/auto-config themes`, {
+  spawnSync(command, [...commandArgs, '@storybook/auto-config', 'themes'], {
     stdio: 'inherit',
     cwd: process.cwd(),
-    shell: true,
   });
 }

code/addons/vitest/package.json

@@ -73,9 +73,7 @@
   },
   "dependencies": {
     "@storybook/global": "^5.0.0",
-    "@storybook/icons": "^2.0.0",
-    "prompts": "^2.4.0",
-    "ts-dedent": "^2.2.0"
+    "@storybook/icons": "^2.0.0"
   },
   "devDependencies": {
     "@types/istanbul-lib-report": "^3.0.3",
@@ -84,10 +82,8 @@
     "@types/semver": "^7",
     "@vitest/browser-playwright": "^4.0.1",
     "@vitest/runner": "^4.0.1",
-    "boxen": "^8.0.1",
     "empathic": "^2.0.0",
     "es-toolkit": "^1.36.0",
-    "execa": "^8.0.1",
     "istanbul-lib-report": "^3.0.1",
     "micromatch": "^4.0.8",
     "pathe": "^1.1.2",

code/addons/vitest/src/constants.ts

@@ -18,19 +18,6 @@ export const DOCUMENTATION_FATAL_ERROR_LINK = `${DOCUMENTATION_LINK}#what-happen
 
 export const COVERAGE_DIRECTORY = 'coverage';
 
-export const SUPPORTED_FRAMEWORKS = [
-  '@storybook/nextjs',
-  '@storybook/nextjs-vite',
-  '@storybook/react-vite',
-  '@storybook/preact-vite',
-  '@storybook/svelte-vite',
-  '@storybook/vue3-vite',
-  '@storybook/html-vite',
-  '@storybook/web-components-vite',
-  '@storybook/sveltekit',
-  '@storybook/react-native-web-vite',
-];
-
 export const storeOptions = {
   id: ADDON_ID,
   initialState: {

code/addons/vitest/src/logger.ts

@@ -1,7 +1,15 @@
+import { logger } from 'storybook/internal/node-logger';
+
 import picocolors from 'picocolors';
 
 import { ADDON_ID } from './constants';
 
 export const log = (message: any) => {
-  console.log(`${picocolors.magenta(ADDON_ID)}: ${message.toString().trim()}`);
+  logger.log(
+    `${picocolors.magenta(ADDON_ID)}: ${message
+      .toString()
+      // Counteracts the default logging behavior of the clack prompt library
+      .replaceAll(/(│\n|│  )/g, '')
+      .trim()}`
+  );
 };

code/addons/vitest/src/node/boot-test-runner.test.ts

@@ -3,42 +3,55 @@ import { join } from 'node:path';
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 
 import { Channel, type ChannelTransport } from 'storybook/internal/channels';
+import { executeNodeCommand } from 'storybook/internal/common';
 import type { Options } from 'storybook/internal/types';
 
-// eslint-disable-next-line depend/ban-dependencies
-import { execaNode } from 'execa';
-
 import { storeOptions } from '../constants';
 import { log } from '../logger';
 import type { StoreEvent } from '../types';
 import type { StoreState } from '../types';
 import { killTestRunner, runTestRunner } from './boot-test-runner';
 
-let stdout: (chunk: any) => void;
-let stderr: (chunk: any) => void;
-let message: (event: any) => void;
+let stdout: (chunk: Buffer | string) => void;
+let stderr: (chunk: Buffer | string) => void;
+let message: (event: { type: string; args?: unknown[]; payload?: unknown }) => void;
 
 const child = vi.hoisted(() => ({
   stdout: {
-    on: vi.fn((event, callback) => {
-      stdout = callback;
+    on: vi.fn((event: string, callback: (chunk: Buffer | string) => void) => {
+      if (event === 'data') {
+        stdout = callback;
+      }
     }),
   },
   stderr: {
-    on: vi.fn((event, callback) => {
-      stderr = callback;
+    on: vi.fn((event: string, callback: (chunk: Buffer | string) => void) => {
+      if (event === 'data') {
+        stderr = callback;
+      }
     }),
   },
-  on: vi.fn((event, callback) => {
-    message = callback;
-  }),
+  on: vi.fn(
+    (
+      event: string,
+      callback: (event: { type: string; args?: unknown[]; payload?: unknown }) => void
+    ) => {
+      if (event === 'message') {
+        message = callback;
+      }
+    }
+  ),
   send: vi.fn(),
   kill: vi.fn(),
 }));
 
-vi.mock('execa', () => ({
-  execaNode: vi.fn().mockReturnValue(child),
-}));
+vi.mock('storybook/internal/common', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('storybook/internal/common')>();
+  return {
+    ...actual,
+    executeNodeCommand: vi.fn().mockReturnValue(child),
+  };
+});
 
 vi.mock('../logger', () => ({
   log: vi.fn(),
@@ -47,27 +60,18 @@ vi.mock('../logger', () => ({
 vi.mock('../../../../core/src/shared/utils/module', () => ({
   importMetaResolve: vi
     .fn()
-    .mockImplementation(
-      (a) => 'file://' + join(__dirname, '..', '..', 'dist', 'node', 'vitest.js')
-    ),
+    .mockImplementation(() => 'file://' + join(__dirname, '..', '..', 'dist', 'node', 'vitest.js')),
 }));
 
-let statusStoreSubscriber = vi.hoisted(() => undefined);
-let testProviderStoreSubscriber = vi.hoisted(() => undefined);
-
 vi.mock('storybook/internal/core-server', async (importOriginal) => {
   const actual = await importOriginal<typeof import('storybook/internal/core-server')>();
   return {
     ...actual,
     internal_universalStatusStore: {
-      subscribe: (listener: any) => {
-        statusStoreSubscriber = listener;
-      },
+      subscribe: vi.fn(() => () => {}),
     },
     internal_universalTestProviderStore: {
-      subscribe: (listener: any) => {
-        testProviderStoreSubscriber = listener;
-      },
+      subscribe: vi.fn(() => () => {}),
     },
   };
 });
@@ -85,7 +89,12 @@ const transport = { setHandler: vi.fn(), send: vi.fn() } satisfies ChannelTransp
 const mockChannel = new Channel({ transport });
 
 describe('bootTestRunner', () => {
-  let mockStore: any;
+  let mockStore: InstanceType<
+    typeof import('storybook/internal/core-server').experimental_MockUniversalStore<
+      StoreState,
+      StoreEvent
+    >
+  >;
   const mockOptions = {
     configDir: '.storybook',
   } as Options;
@@ -95,28 +104,38 @@ describe('bootTestRunner', () => {
       'storybook/internal/core-server'
     );
     mockStore = new MockUniversalStore<StoreState, StoreEvent>(storeOptions);
+    vi.mocked(executeNodeCommand).mockClear();
+    vi.mocked(log).mockClear();
+    child.send.mockClear();
   });
 
   it('should execute vitest.js', async () => {
-    runTestRunner({ channel: mockChannel, store: mockStore, options: mockOptions });
-    expect(execaNode).toHaveBeenCalledWith(expect.stringMatching(/vitest\.js$/), {
-      env: {
-        NODE_ENV: 'test',
-        TEST: 'true',
-        VITEST: 'true',
-        VITEST_CHILD_PROCESS: 'true',
-        STORYBOOK_CONFIG_DIR: '.storybook',
+    const promise = runTestRunner({ channel: mockChannel, store: mockStore, options: mockOptions });
+    expect(vi.mocked(executeNodeCommand)).toHaveBeenCalledWith({
+      scriptPath: expect.stringMatching(/vitest\.js$/),
+      options: {
+        env: {
+          NODE_ENV: 'test',
+          TEST: 'true',
+          VITEST: 'true',
+          VITEST_CHILD_PROCESS: 'true',
+          STORYBOOK_CONFIG_DIR: '.storybook',
+        },
+        extendEnv: true,
       },
-      extendEnv: true,
     });
+    message({ type: 'ready' });
+    await promise;
   });
 
   it('should log stdout and stderr', async () => {
-    runTestRunner({ channel: mockChannel, store: mockStore, options: mockOptions });
+    const promise = runTestRunner({ channel: mockChannel, store: mockStore, options: mockOptions });
     stdout('foo');
     stderr('bar');
-    expect(log).toHaveBeenCalledWith('foo');
-    expect(log).toHaveBeenCalledWith('bar');
+    message({ type: 'ready' });
+    await promise;
+    expect(vi.mocked(log)).toHaveBeenCalledWith('foo');
+    expect(vi.mocked(log)).toHaveBeenCalledWith('bar');
   });
 
   it('should wait for vitest to be ready', async () => {
@@ -145,8 +164,9 @@ describe('bootTestRunner', () => {
   });
 
   it('should forward universal store events', async () => {
-    runTestRunner({ channel: mockChannel, store: mockStore, options: mockOptions });
+    const promise = runTestRunner({ channel: mockChannel, store: mockStore, options: mockOptions });
     message({ type: 'ready' });
+    await promise;
 
     mockStore.send({ type: 'TRIGGER_RUN', payload: { triggeredBy: 'global', storyIds: ['foo'] } });
     expect(child.send).toHaveBeenCalledWith({
@@ -174,14 +194,15 @@ describe('bootTestRunner', () => {
   });
 
   it('should resend init event', async () => {
-    runTestRunner({
+    const promise = runTestRunner({
       channel: mockChannel,
       store: mockStore,
       options: mockOptions,
       initEvent: 'init',
       initArgs: ['foo'],
     });
     message({ type: 'ready' });
+    await promise;
     expect(child.send).toHaveBeenCalledWith({
       args: ['foo'],
       from: 'server',

code/addons/vitest/src/node/boot-test-runner.ts

@@ -2,14 +2,13 @@ import { type ChildProcess } from 'node:child_process';
 import { fileURLToPath } from 'node:url';
 
 import type { Channel } from 'storybook/internal/channels';
+import { executeNodeCommand } from 'storybook/internal/common';
 import {
   internal_universalStatusStore,
   internal_universalTestProviderStore,
 } from 'storybook/internal/core-server';
 import type { EventInfo, Options } from 'storybook/internal/types';
 
-// eslint-disable-next-line depend/ban-dependencies
-import { execaNode } from 'execa';
 import { normalize } from 'pathe';
 
 import { importMetaResolve } from '../../../../core/src/shared/utils/module';
@@ -77,15 +76,18 @@ const bootTestRunner = async ({
 
   const startChildProcess = () =>
     new Promise<void>((resolve, reject) => {
-      child = execaNode(vitestModulePath, {
-        env: {
-          VITEST: 'true',
-          TEST: 'true',
-          VITEST_CHILD_PROCESS: 'true',
-          NODE_ENV: process.env.NODE_ENV ?? 'test',
-          STORYBOOK_CONFIG_DIR: normalize(options.configDir),
+      child = executeNodeCommand({
+        scriptPath: vitestModulePath,
+        options: {
+          env: {
+            VITEST: 'true',
+            TEST: 'true',
+            VITEST_CHILD_PROCESS: 'true',
+            NODE_ENV: process.env.NODE_ENV ?? 'test',
+            STORYBOOK_CONFIG_DIR: normalize(options.configDir),
+          },
+          extendEnv: true,
         },
-        extendEnv: true,
       });
       stderr = [];