CLI: Add "intents" question & auto-install test addon & improve test-addon compatibility

code/.eslintrc.js

@@ -58,7 +58,16 @@ module.exports = {
       },
     },
     {
-      files: ['*.js', '*.jsx', '*.json', '*.html', '**/.storybook/*.ts', '**/.storybook/*.tsx'],
+      files: [
+        '*.js',
+        '*.jsx',
+        '*.json',
+        '*.html',
+        '**/.storybook/*.ts',
+        '**/.storybook/*.tsx',
+        '**/.storybook/**/*.ts',
+        '**/.storybook/**/*.tsx',
+      ],
       parserOptions: {
         project: null,
       },

code/.storybook/main.ts

@@ -4,7 +4,7 @@ import type { StorybookConfig } from '../frameworks/react-vite';
 
 const componentsPath = join(__dirname, '../core/src/components');
 const managerApiPath = join(__dirname, '../core/src/manager-api');
-const imageContextPath = join(__dirname, '..//frameworks/nextjs/src/image-context.ts');
+const imageContextPath = join(__dirname, '../frameworks/nextjs/src/image-context.ts');
 
 const config: StorybookConfig = {
   stories: [
@@ -159,6 +159,7 @@ const config: StorybookConfig = {
       build: {
         // disable sourcemaps in CI to not run out of memory
         sourcemap: process.env.CI !== 'true',
+        target: ['chrome100'],
       },
       server: {
         watch: {

code/addons/test/src/postinstall.ts

@@ -299,8 +299,7 @@ export default async function postInstall(options: PostinstallOptions) {
     args: ['playwright', 'install', 'chromium', '--with-deps'],
   });
 
-  const fileExtension =
-    allDeps['typescript'] || (await findFile('tsconfig', ['.json'])) ? 'ts' : 'js';
+  const fileExtension = allDeps.typescript || (await findFile('tsconfig', ['.json'])) ? 'ts' : 'js';
 
   const vitestSetupFile = resolve(options.configDir, `vitest.setup.${fileExtension}`);
   if (existsSync(vitestSetupFile)) {

code/core/scripts/prep.ts

@@ -1,5 +1,5 @@
 /* eslint-disable local-rules/no-uncategorized-errors */
-import { existsSync, mkdirSync, watch } from 'node:fs';
+import { existsSync, watch } from 'node:fs';
 import { mkdir, rm, writeFile } from 'node:fs/promises';
 import { dirname, join } from 'node:path';
 
@@ -124,6 +124,11 @@ async function run() {
       platform: 'neutral',
       mainFields: ['main', 'module', 'node'],
       conditions: ['node', 'module', 'import', 'require'],
+      plugins: [],
+      define: {
+        'process.env.NODE_ENV': '"production"',
+        'process.env.DEV': '"false"',
+      },
     } satisfies EsbuildContextOptions;
 
     const browserAliases = {

code/core/src/cli/bin/index.ts

@@ -108,7 +108,9 @@ command('build')
   .option('--docs', 'Build a documentation-only site using addon-docs')
   .option('--test', 'Build stories optimized for testing purposes.')
   .action(async (options) => {
-    process.env.NODE_ENV = process.env.NODE_ENV || 'production';
+    const { env } = process;
+    env.NODE_ENV = env.NODE_ENV || 'production';
+
     logger.setLevel(options.loglevel);
     consoleLogger.log(picocolors.bold(`${pkg.name} v${pkg.version}\n`));
 

code/core/src/cli/dev.ts

@@ -40,7 +40,8 @@ function printError(error: any) {
 }
 
 export const dev = async (cliOptions: CLIOptions) => {
-  process.env.NODE_ENV = process.env.NODE_ENV || 'development';
+  const { env } = process;
+  env.NODE_ENV = env.NODE_ENV || 'development';
 
   const packageJson = await findPackage(__dirname);
   invariant(packageJson, 'Failed to find the closest package.json file.');

code/core/src/core-server/utils/doTelemetry.ts

@@ -1,7 +1,7 @@
 import { getPrecedingUpgrade, telemetry } from '@storybook/core/telemetry';
 import type { CoreConfig, Options } from '@storybook/core/types';
 
-import type Polka from 'polka';
+import type { Polka } from 'polka';
 import invariant from 'tiny-invariant';
 
 import { sendTelemetryError } from '../withTelemetry';
@@ -11,7 +11,7 @@ import { summarizeIndex } from './summarizeIndex';
 import { versionStatus } from './versionStatus';
 
 export async function doTelemetry(
-  app: Polka.Polka,
+  app: Polka,
   core: CoreConfig,
   initializedStoryIndexGenerator: Promise<StoryIndexGenerator | undefined>,
   options: Options

code/core/src/core-server/utils/getStoryIndexGenerator.ts

@@ -1,14 +1,14 @@
 import { normalizeStories } from '@storybook/core/common';
 import type { DocsOptions, Options } from '@storybook/core/types';
 
-import type Polka from 'polka';
+import type { Polka } from 'polka';
 
 import { StoryIndexGenerator } from './StoryIndexGenerator';
 import type { ServerChannel } from './get-server-channel';
 import { useStoriesJson } from './stories-json';
 
 export async function getStoryIndexGenerator(
-  app: Polka.Polka,
+  app: Polka,
   options: Options,
   serverChannel: ServerChannel
 ): Promise<StoryIndexGenerator | undefined> {

code/core/src/core-server/utils/metadata.ts

@@ -2,15 +2,15 @@ import { writeFile } from 'node:fs/promises';
 
 import { getStorybookMetadata } from '@storybook/core/telemetry';
 
-import type Polka from 'polka';
+import type { Polka } from 'polka';
 
 export async function extractStorybookMetadata(outputFile: string, configDir: string) {
   const storybookMetadata = await getStorybookMetadata(configDir);
 
   await writeFile(outputFile, JSON.stringify(storybookMetadata));
 }
 
-export function useStorybookMetadata(app: Polka.Polka, configDir?: string) {
+export function useStorybookMetadata(app: Polka, configDir?: string) {
   app.use('/project.json', async (req, res) => {
     const storybookMetadata = await getStorybookMetadata(configDir);
     res.setHeader('Content-Type', 'application/json');

code/core/src/core-server/utils/server-statics.ts

@@ -7,11 +7,11 @@ import type { Options, StorybookConfigRaw } from '@storybook/core/types';
 import { logger } from '@storybook/core/node-logger';
 
 import picocolors from 'picocolors';
-import type Polka from 'polka';
+import type { Polka } from 'polka';
 import sirv from 'sirv';
 import { dedent } from 'ts-dedent';
 
-export async function useStatics(app: Polka.Polka, options: Options): Promise<void> {
+export async function useStatics(app: Polka, options: Options): Promise<void> {
   const staticDirs = (await options.presets.apply('staticDirs')) ?? [];
   const faviconPath = await options.presets.apply<string>('favicon');
 

code/core/src/core-server/utils/stories-json.test.ts

@@ -7,7 +7,7 @@ import { normalizeStoriesEntry } from '@storybook/core/common';
 import { STORY_INDEX_INVALIDATED } from '@storybook/core/core-events';
 
 import { debounce } from 'es-toolkit/compat';
-import type Polka from 'polka';
+import type { Polka, Request, Response } from 'polka';
 import Watchpack from 'watchpack';
 
 import { csfIndexer } from '../presets/common-preset';
@@ -58,10 +58,10 @@ const getInitializedStoryIndexGenerator = async (
 
 describe('useStoriesJson', () => {
   const use = vi.fn();
-  const app: Polka.Polka = { use } as any;
+  const app: Polka = { use } as any;
   const end = vi.fn();
   const write = vi.fn();
-  const response: Polka.Response = {
+  const response: Response = {
     header: vi.fn(),
     send: vi.fn(),
     status: vi.fn(),
@@ -81,7 +81,7 @@ describe('useStoriesJson', () => {
     Watchpack.mockClear();
   });
 
-  const request: Polka.Request = {
+  const request: Request = {
     headers: { accept: 'application/json' },
   } as any;
 

code/core/src/core-server/utils/stories-json.ts

@@ -6,7 +6,7 @@ import type { NormalizedStoriesSpecifier, StoryIndex } from '@storybook/core/typ
 import { STORY_INDEX_INVALIDATED } from '@storybook/core/core-events';
 
 import { debounce } from 'es-toolkit/compat';
-import type Polka from 'polka';
+import type { Polka } from 'polka';
 
 import type { StoryIndexGenerator } from './StoryIndexGenerator';
 import type { ServerChannel } from './get-server-channel';
@@ -33,7 +33,7 @@ export function useStoriesJson({
   serverChannel,
   normalizedStories,
 }: {
-  app: Polka.Polka;
+  app: Polka;
   initializedStoryIndexGenerator: Promise<StoryIndexGenerator>;
   serverChannel: ServerChannel;
   workingDir?: string;

code/core/src/telemetry/index.ts

@@ -29,7 +29,7 @@ export const telemetry = async (
 ) => {
   // Don't notify on boot since it can lead to double notification in `sb init`.
   // The notification will happen when the actual command runs.
-  if (eventType !== 'boot') {
+  if (eventType !== 'boot' && options.notify !== false) {
     await notify();
   }
   const telemetryData: TelemetryData = {

code/core/src/telemetry/types.ts

@@ -83,6 +83,7 @@ export interface Options {
   configDir?: string;
   enableCrashReports?: boolean;
   stripMetadata?: boolean;
+  notify?: boolean;
 }
 
 export interface TelemetryData {

code/core/tsconfig.json

@@ -2,6 +2,7 @@
   "extends": "../tsconfig.json",
   "compilerOptions": {
     "resolveJsonModule": true,
+    "moduleResolution": "bundler",
     "module": "ES2022"
   },
   "include": ["src/**/*", "scripts/**/*", "*.d.ts"]

code/lib/cli-storybook/bin/index.cjs

@@ -23,4 +23,7 @@ process.once('uncaughtException', (error) => {
   throw error;
 });
 
-require('../dist/bin/index.cjs');
+import('../dist/bin/index.js').catch((error) => {
+  console.error(error);
+  process.exit(1);
+});

code/lib/cli-storybook/package.json

@@ -22,10 +22,11 @@
   "author": "Storybook Team",
   "type": "module",
   "exports": {
-    "./bin/index.cjs": {
-      "node": "./bin/index.cjs",
-      "require": "./bin/index.cjs"
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
     },
+    "./bin/index.cjs": "./bin/index.cjs",
     "./package.json": "./package.json"
   },
   "bin": "./bin/index.cjs",
@@ -78,7 +79,9 @@
       "./src/index.ts",
       "./src/bin/index.ts"
     ],
-    "platform": "node"
+    "formats": [
+      "node-esm"
+    ]
   },
   "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae16"
 }

code/lib/cli-storybook/src/automigrate/fixes/mdx-to-csf.ts

@@ -5,7 +5,7 @@ import { runCodemod } from '@storybook/codemod';
 // eslint-disable-next-line depend/ban-dependencies
 import { glob } from 'glob';
 import picocolors from 'picocolors';
-import { prompt } from 'prompts';
+import prompts from 'prompts';
 import { dedent } from 'ts-dedent';
 
 import { updateMainConfig } from '../helpers/mainConfigFile';
@@ -121,7 +121,7 @@ export const mdxToCSF: Fix<BareMdxStoriesGlobRunOptions> = {
       ${JSON.stringify(nextStoriesEntries, null, 2)}`);
 
     if (!dryRun) {
-      const { glob: globString } = await prompt({
+      const { glob: globString } = await prompts.prompt({
         type: 'text',
         name: 'glob',
         message: 'Please enter the glob for your MDX stories',

code/lib/cli-storybook/src/sandbox-templates.ts

@@ -90,7 +90,7 @@ type BaseTemplates = Template & {
     | 'TypeScript'})`;
 };
 
-const baseTemplates = {
+export const baseTemplates = {
   'cra/default-js': {
     name: 'Create React App Latest (Webpack | JavaScript)',
     script: `

code/lib/cli-storybook/src/sandbox.ts

@@ -7,7 +7,6 @@ import { JsPackageManagerFactory } from 'storybook/internal/common';
 import { versions } from 'storybook/internal/common';
 
 import boxen from 'boxen';
-import { initiate } from 'create-storybook';
 import { downloadTemplate } from 'giget';
 import picocolors from 'picocolors';
 import prompts from 'prompts';
@@ -225,6 +224,7 @@ export const sandbox = async ({
         const before = process.cwd();
         process.chdir(templateDestination);
         // we run doInitiate, instead of initiate, to avoid sending this init event to telemetry, because it's not a real world project
+        const { initiate } = await import('create-storybook');
         await initiate({
           dev: process.env.CI !== 'true' && process.env.IN_STORYBOOK_SANBOX !== 'true',
           ...options,

code/lib/cli-storybook/test/helpers.cjs

@@ -5,9 +5,9 @@ const CLI_PATH = path.join(__dirname, '..', 'bin', 'index.cjs');
 
 /**
  * Execute command
- * @param {String[]} args - args to be passed in
- * @param {Object} options - customize the behavior
  *
+ * @param {String[]} args - Args to be passed in
+ * @param {Object} options - Customize the behavior
  * @returns {Object}
  */
 const run = (args, options = {}) => spawnSync('node', [CLI_PATH].concat(args), options);

code/lib/cli/bin/index.cjs

@@ -23,4 +23,7 @@ process.once('uncaughtException', (error) => {
   throw error;
 });
 
-require('../dist/proxy.cjs');
+import('../dist/proxy.js').catch((error) => {
+  console.error(error);
+  process.exit(1);
+});

code/lib/cli/package.json

@@ -32,13 +32,9 @@
       "import": "./dist/index.js",
       "require": "./dist/index.cjs"
     },
-    "./bin/index.cjs": {
-      "node": "./bin/index.cjs",
-      "require": "./bin/index.cjs"
-    },
+    "./bin/index.cjs": "./bin/index.cjs",
     "./core-path": {
       "types": "./dist/core-path.d.ts",
-      "node": "./dist/core-path.cjs",
       "import": "./dist/core-path.js",
       "require": "./dist/core-path.cjs"
     },
@@ -338,7 +334,10 @@
       "./src/core-path.ts",
       "./src/index.ts"
     ],
-    "platform": "node"
+    "formats": [
+      "cjs",
+      "node-esm"
+    ]
   },
   "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae16"
 }

code/lib/cli/src/proxy.ts

@@ -5,7 +5,10 @@ import { spawn } from 'child_process';
 const args = process.argv.slice(2);
 
 if (['dev', 'build'].includes(args[0])) {
-  require('@storybook/core/cli/bin');
+  import('@storybook/core/cli/bin').catch((e) => {
+    console.error('Failed to load @storybook/core/cli/bin', e);
+    process.exit(1);
+  });
 } else {
   const proxiedArgs =
     args[0] === 'init'

code/lib/create-storybook/bin/index.cjs

@@ -23,4 +23,7 @@ process.once('uncaughtException', (error) => {
   throw error;
 });
 
-require('../dist/bin/index.cjs');
+import('../dist/bin/index.js').catch((error) => {
+  console.error(error);
+  process.exit(1);
+});