Core: Split Storybook CLI

code/core/package.json

@@ -147,6 +147,11 @@
       "import": "./dist/preview/globals.js",
       "require": "./dist/preview/globals.cjs"
     },
+    "./cli": {
+      "types": "./dist/cli/index.d.ts",
+      "import": "./dist/cli/index.js",
+      "require": "./dist/cli/index.cjs"
+    },
     "./package.json": "./package.json"
   },
   "main": "dist/index.cjs",
@@ -231,6 +236,9 @@
       ],
       "preview/globals": [
         "./dist/preview/globals.d.ts"
+      ],
+      "cli": [
+        "./dist/cli/index.d.ts"
       ]
     }
   },
@@ -254,6 +262,8 @@
     "express": "^4.19.2",
     "process": "^0.11.10",
     "recast": "^0.23.5",
+    "semver": "^7.6.2",
+    "tempy": "^3.1.0",
     "util": "^0.12.4",
     "ws": "^8.2.3"
   },
@@ -273,6 +283,7 @@
     "@emotion/use-insertion-effect-with-fallbacks": "^1.0.1",
     "@fal-works/esbuild-plugin-global-externals": "^2.1.2",
     "@ndelangen/fs-extra-unified": "^1.0.3",
+    "@ndelangen/get-tarball": "^3.0.7",
     "@popperjs/core": "^2.6.0",
     "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-scroll-area": "^1.0.5",
@@ -296,10 +307,11 @@
     "@types/picomatch": "^2.3.0",
     "@types/prettier": "^3.0.0",
     "@types/pretty-hrtime": "^1.0.0",
+    "@types/prompts": "^2.0.9",
     "@types/qs": "^6",
     "@types/react-syntax-highlighter": "11.0.5",
     "@types/react-transition-group": "^4",
-    "@types/semver": "^7.3.4",
+    "@types/semver": "^7.5.8",
     "@types/ws": "^8",
     "@vitest/utils": "^1.3.1",
     "@yarnpkg/esbuild-plugin-pnp": "^3.0.0-rc.10",
@@ -315,13 +327,15 @@
     "chai": "^4.4.1",
     "chalk": "^5.3.0",
     "cli-table3": "^0.6.1",
+    "commander": "^6.2.1",
     "comment-parser": "^1.4.1",
     "compression": "^1.7.4",
     "copy-to-clipboard": "^3.3.1",
     "cross-spawn": "^7.0.3",
     "css": "^3.0.0",
     "deep-object-diff": "^1.1.0",
     "dequal": "^2.0.2",
+    "detect-indent": "^6.1.0",
     "detect-package-manager": "^3.0.2",
     "detect-port": "^1.3.0",
     "diff": "^5.2.0",
@@ -339,12 +353,14 @@
     "flush-promises": "^1.0.2",
     "fs-extra": "^11.1.0",
     "fuse.js": "^3.6.1",
+    "get-npm-tarball-url": "^2.0.3",
     "glob": "^10.0.0",
     "globby": "^14.0.1",
     "handlebars": "^4.7.7",
     "js-yaml": "^4.1.0",
     "jsdoc-type-pratt-parser": "^4.0.0",
     "lazy-universal-dotenv": "^4.0.0",
+    "leven": "^3.1.0",
     "lodash": "^4.17.21",
     "markdown-to-jsx": "^7.4.5",
     "memoizerific": "^1.11.3",
@@ -370,9 +386,9 @@
     "react-transition-group": "^4.4.5",
     "require-from-string": "^2.0.2",
     "resolve-from": "^5.0.0",
-    "semver": "^7.3.7",
     "slash": "^5.0.0",
     "store2": "^2.14.2",
+    "strip-json-comments": "^3.1.1",
     "telejson": "^7.2.0",
     "tiny-invariant": "^1.3.1",
     "tinyspy": "^2.2.0",

code/core/scripts/entries.ts

@@ -40,6 +40,7 @@ export const getEntries = (cwd: string) => {
 
     define('src/manager/globals-module-info.ts', ['node'], true),
     define('src/preview/globals.ts', ['node'], true),
+    define('src/cli/index.ts', ['node'], true),
   ];
 };
 

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

@@ -0,0 +1,143 @@
+import program from 'commander';
+import chalk from 'chalk';
+import leven from 'leven';
+import { findPackageSync } from 'fd-package-json';
+import invariant from 'tiny-invariant';
+
+import { logger } from '@storybook/core/node-logger';
+import { addToGlobalContext } from '@storybook/core/telemetry';
+import { parseList, getEnvConfig, versions } from '@storybook/core/common';
+
+import { dev } from '../dev';
+import { build } from '../build';
+
+addToGlobalContext('cliVersion', versions.storybook);
+
+const pkg = findPackageSync(__dirname);
+invariant(pkg, 'Failed to find the closest package.json file.');
+const consoleLogger = console;
+
+const command = (name: string) =>
+  program
+    .command(name)
+    .option(
+      '--disable-telemetry',
+      'Disable sending telemetry data',
+      // default value is false, but if the user sets STORYBOOK_DISABLE_TELEMETRY, it can be true
+      process.env.STORYBOOK_DISABLE_TELEMETRY && process.env.STORYBOOK_DISABLE_TELEMETRY !== 'false'
+    )
+    .option('--debug', 'Get more logs in debug mode', false)
+    .option('--enable-crash-reports', 'Enable sending crash reports to telemetry data');
+
+command('dev')
+  .option('-p, --port <number>', 'Port to run Storybook', (str) => parseInt(str, 10))
+  .option('-h, --host <string>', 'Host to run Storybook')
+  .option('-c, --config-dir <dir-name>', 'Directory where to load Storybook configurations from')
+  .option(
+    '--https',
+    'Serve Storybook over HTTPS. Note: You must provide your own certificate information.'
+  )
+  .option(
+    '--ssl-ca <ca>',
+    'Provide an SSL certificate authority. (Optional with --https, required if using a self-signed certificate)',
+    parseList
+  )
+  .option('--ssl-cert <cert>', 'Provide an SSL certificate. (Required with --https)')
+  .option('--ssl-key <key>', 'Provide an SSL key. (Required with --https)')
+  .option('--smoke-test', 'Exit after successful start')
+  .option('--ci', "CI mode (skip interactive prompts, don't open browser)")
+  .option('--no-open', 'Do not open Storybook automatically in the browser')
+  .option('--loglevel <level>', 'Control level of logging during build')
+  .option('--quiet', 'Suppress verbose build output')
+  .option('--no-version-updates', 'Suppress update check', true)
+  .option('--debug-webpack', 'Display final webpack configurations for debugging purposes')
+  .option(
+    '--webpack-stats-json [directory]',
+    'Write Webpack stats JSON to disk (synonym for `--stats-json`)'
+  )
+  .option('--stats-json [directory]', 'Write stats JSON to disk')
+  .option(
+    '--preview-url <string>',
+    'Disables the default storybook preview and lets your use your own'
+  )
+  .option('--force-build-preview', 'Build the preview iframe even if you are using --preview-url')
+  .option('--docs', 'Build a documentation-only site using addon-docs')
+  .option('--exact-port', 'Exit early if the desired port is not available')
+  .option(
+    '--initial-path [path]',
+    'URL path to be appended when visiting Storybook for the first time'
+  )
+  .action(async (options) => {
+    logger.setLevel(program.loglevel);
+    consoleLogger.log(chalk.bold(`${pkg.name} v${pkg.version}`) + chalk.reset('\n'));
+
+    // The key is the field created in `options` variable for
+    // each command line argument. Value is the env variable.
+    getEnvConfig(options, {
+      port: 'SBCONFIG_PORT',
+      host: 'SBCONFIG_HOSTNAME',
+      staticDir: 'SBCONFIG_STATIC_DIR',
+      configDir: 'SBCONFIG_CONFIG_DIR',
+      ci: 'CI',
+    });
+
+    if (parseInt(`${options.port}`, 10)) {
+      options.port = parseInt(`${options.port}`, 10);
+    }
+
+    await dev({ ...options, packageJson: pkg }).catch(() => process.exit(1));
+  });
+
+command('build')
+  .option('-o, --output-dir <dir-name>', 'Directory where to store built files')
+  .option('-c, --config-dir <dir-name>', 'Directory where to load Storybook configurations from')
+  .option('--quiet', 'Suppress verbose build output')
+  .option('--loglevel <level>', 'Control level of logging during build')
+  .option('--debug-webpack', 'Display final webpack configurations for debugging purposes')
+  .option(
+    '--webpack-stats-json [directory]',
+    'Write Webpack stats JSON to disk (synonym for `--stats-json`)'
+  )
+  .option('--stats-json [directory]', 'Write stats JSON to disk')
+  .option(
+    '--preview-url <string>',
+    'Disables the default storybook preview and lets your use your own'
+  )
+  .option('--force-build-preview', 'Build the preview iframe even if you are using --preview-url')
+  .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';
+    logger.setLevel(program.loglevel);
+    consoleLogger.log(chalk.bold(`${pkg.name} v${pkg.version}\n`));
+
+    // The key is the field created in `options` variable for
+    // each command line argument. Value is the env variable.
+    getEnvConfig(options, {
+      staticDir: 'SBCONFIG_STATIC_DIR',
+      outputDir: 'SBCONFIG_OUTPUT_DIR',
+      configDir: 'SBCONFIG_CONFIG_DIR',
+    });
+
+    await build({
+      ...options,
+      packageJson: pkg,
+      test: !!options.test || process.env.SB_TESTBUILD === 'true',
+    }).catch(() => process.exit(1));
+  });
+
+program.on('command:*', ([invalidCmd]) => {
+  consoleLogger.error(
+    ' Invalid command: %s.\n See --help for a list of available commands.',
+    invalidCmd
+  );
+  // eslint-disable-next-line no-underscore-dangle
+  const availableCommands = program.commands.map((cmd) => cmd._name);
+  const suggestion = availableCommands.find((cmd) => leven(cmd, invalidCmd) < 3);
+  if (suggestion) {
+    consoleLogger.info(`\n Did you mean ${suggestion}?`);
+  }
+  process.exit(1);
+});
+
+program.usage('<command> [options]').version(String(pkg.version)).parse(process.argv);

code/lib/cli/src/detect.ts → code/core/src/cli/detect.ts

@@ -1,5 +1,5 @@
 import * as fs from 'fs';
-import findUp from 'find-up';
+import { findUpSync } from 'find-up';
 import semver from 'semver';
 import { logger } from '@storybook/core/node-logger';
 
@@ -110,8 +110,8 @@ export function detectFrameworkPreset(
  * @returns CoreBuilder
  */
 export async function detectBuilder(packageManager: JsPackageManager, projectType: ProjectType) {
-  const viteConfig = findUp.sync(viteConfigFiles);
-  const webpackConfig = findUp.sync(webpackConfigFiles);
+  const viteConfig = findUpSync(viteConfigFiles);
+  const webpackConfig = findUpSync(webpackConfigFiles);
   const dependencies = await packageManager.getAllDependencies();
 
   if (viteConfig || (dependencies.vite && dependencies.webpack === undefined)) {
@@ -161,7 +161,7 @@ export function isStorybookInstantiated(configDir = resolve(process.cwd(), '.sto
 }
 
 export async function detectPnp() {
-  return !!findUp.sync(['.pnp.js', '.pnp.cjs']);
+  return !!findUpSync(['.pnp.js', '.pnp.cjs']);
 }
 
 export async function detectLanguage(packageManager: JsPackageManager) {

code/lib/cli/src/dirs.ts → code/core/src/cli/dirs.ts

@@ -10,10 +10,6 @@ import type { JsPackageManager } from '@storybook/core/common';
 import { versions } from '@storybook/core/common';
 import type { SupportedFrameworks } from '@storybook/core/types';
 
-export function getCliDir() {
-  return dirname(require.resolve('storybook/package.json'));
-}
-
 const resolveUsingBranchInstall = async (packageManager: JsPackageManager, request: string) => {
   const { temporaryDirectory } = await import('tempy');
   const tempDirectory = temporaryDirectory();

code/lib/cli/src/helpers.test.ts → code/core/src/cli/helpers.test.ts

@@ -38,7 +38,6 @@ vi.mock('fs', async (importOriginal) => {
 vi.mock('./dirs', () => ({
   getRendererDir: (_: JsPackageManager, renderer: string) =>
     normalizePath(`@storybook/${renderer}`),
-  getCliDir: () => normalizePath('storybook'),
 }));
 
 vi.mock('fs-extra', async (importOriginal) => {
@@ -123,11 +122,12 @@ describe('Helpers', () => {
         renderer: 'react',
         language,
         packageManager: packageManagerMock,
+        assetsDir: normalizePath('create-storybook/rendererAssets/common'),
       });
 
       expect(fse.copy).toHaveBeenNthCalledWith(
         1,
-        normalizePath('storybook/rendererAssets/common'),
+        normalizePath('create-storybook/rendererAssets/common'),
         './stories',
         expect.anything()
       );

code/lib/cli/src/helpers.ts → code/core/src/cli/helpers.ts

@@ -5,18 +5,17 @@ import path, { join } from 'path';
 import { coerce, satisfies } from 'semver';
 import stripJsonComments from 'strip-json-comments';
 
-import findUp from 'find-up';
+import { findUpSync } from 'find-up';
 import invariant from 'tiny-invariant';
-import { getCliDir, getRendererDir } from './dirs';
+import { getRendererDir } from './dirs';
 import {
   type JsPackageManager,
   type PackageJson,
   type PackageJsonWithDepsAndDevDeps,
   frameworkToRenderer as CoreFrameworkToRenderer,
 } from '@storybook/core/common';
 import type { SupportedFrameworks, SupportedRenderers } from '@storybook/core/types';
-import { CoreBuilder } from './project_types';
-import { SupportedLanguage } from './project_types';
+import { CoreBuilder, SupportedLanguage } from './project_types';
 import { versions as storybookMonorepoPackages } from '@storybook/core/common';
 
 const logger = console;
@@ -128,7 +127,7 @@ type CopyTemplateFilesOptions = {
   packageManager: JsPackageManager;
   renderer: SupportedFrameworks | SupportedRenderers;
   language: SupportedLanguage;
-  includeCommonAssets?: boolean;
+  assetsDir?: string;
   destination?: string;
 };
 
@@ -164,7 +163,7 @@ export async function copyTemplateFiles({
   renderer,
   language,
   destination,
-  includeCommonAssets = true,
+  assetsDir,
 }: CopyTemplateFilesOptions) {
   const languageFolderMapping: Record<SupportedLanguage | 'typescript', string> = {
     // keeping this for backwards compatibility in case community packages are using it
@@ -213,14 +212,14 @@ export async function copyTemplateFiles({
   };
 
   const destinationPath = destination ?? (await targetPath());
-  if (includeCommonAssets) {
-    await fse.copy(join(getCliDir(), 'rendererAssets', 'common'), destinationPath, {
+  if (assetsDir) {
+    await fse.copy(assetsDir, destinationPath, {
       overwrite: true,
     });
   }
   await fse.copy(await templatePath(), destinationPath, { overwrite: true });
 
-  if (includeCommonAssets) {
+  if (assetsDir) {
     const rendererType = frameworkToRenderer[renderer] || 'react';
     await adjustTemplate(join(destinationPath, 'Configure.mdx'), { renderer: rendererType });
   }
@@ -258,7 +257,7 @@ export function getStorybookVersionSpecifier(packageJson: PackageJsonWithDepsAnd
 }
 
 export async function isNxProject() {
-  return findUp.sync('nx.json');
+  return findUpSync('nx.json');
 }
 
 export function coerceSemver(version: string) {

code/core/src/cli/index.ts

@@ -0,0 +1,7 @@
+export * from './detect';
+export * from './helpers';
+export * from './angular/helpers';
+export * from './dirs';
+export * from './project_types';
+export * from './NpmOptions';
+export * from './eslintPlugin';

code/core/src/common/versions.ts

@@ -62,11 +62,13 @@ export default {
   '@storybook/cli': '8.3.0-alpha.0',
   '@storybook/codemod': '8.3.0-alpha.0',
   '@storybook/core-webpack': '8.3.0-alpha.0',
+  'create-storybook': '8.2.0-beta.3',
   '@storybook/csf-plugin': '8.3.0-alpha.0',
   '@storybook/instrumenter': '8.3.0-alpha.0',
   '@storybook/react-dom-shim': '8.3.0-alpha.0',
   '@storybook/source-loader': '8.3.0-alpha.0',
   '@storybook/test': '8.3.0-alpha.0',
+  '@storybook/toolbox': '8.2.0-beta.3',
   '@storybook/preset-create-react-app': '8.3.0-alpha.0',
   '@storybook/preset-html-webpack': '8.3.0-alpha.0',
   '@storybook/preset-preact-webpack': '8.3.0-alpha.0',