tessl/npm-storybook--cli

Storybook CLI: Develop, document, and test UI components in isolation

—

Pending

Overview

Eval results

Files

Project Initialization

Name: tessl/npm-storybook--cli
Author: tessl

Initialize Storybook in existing projects with automatic framework detection and configuration. The init command analyzes your project structure, detects the framework in use, and sets up appropriate Storybook configurations and dependencies.

Capabilities

Initialize Command

Sets up Storybook in an existing project with framework-specific configuration.

storybook init [options]

Options:
  -f, --force                           Force add Storybook
  -s, --skip-install                    Skip installing deps
  --package-manager <npm|pnpm|yarn1|yarn2>  Force package manager for installing deps
  --use-pnp                            Enable PnP mode for Yarn 2+
  -p, --parser <babel|babylon|flow|ts|tsx>  jscodeshift parser
  -t, --type <type>                    Add Storybook for a specific project type
  -y, --yes                            Answer yes to all prompts
  -b, --builder <webpack5|vite>        Builder library
  -l, --linkable                       Prepare installation for link (contributor helper)
  --dev                               Launch the development server after completing initialization (default: true)
  --no-dev                            Complete the initialization without launching the development server

Usage Examples:

# Basic initialization with automatic detection
npx storybook@latest init

# Force initialization even if Storybook already exists
npx storybook@latest init --force

# Initialize without installing dependencies
npx storybook@latest init --skip-install

# Initialize with specific package manager
npx storybook@latest init --package-manager yarn1

# Initialize for specific project type
npx storybook@latest init --type react

# Initialize with Vite builder
npx storybook@latest init --builder vite

# Initialize without starting dev server
npx storybook@latest init --no-dev

# Skip all prompts (accept defaults)
npx storybook@latest init --yes

Framework Detection

The init command automatically detects your project's framework and configures Storybook accordingly. Supported frameworks include:

React: Create React App, Next.js, custom React setups
Vue: Vue CLI, Nuxt.js, custom Vue setups
Angular: Angular CLI projects
Svelte: SvelteKit and custom Svelte projects
Web Components: Lit, Stencil, and other web component frameworks
HTML: Plain HTML/CSS/JS projects
React Native: React Native projects

Configuration Generation

During initialization, Storybook creates:

.storybook/ directory with configuration files:
- main.js/ts - Main Storybook configuration
- preview.js/ts - Global decorators and parameters
Story files - Example stories for detected components
Package.json scripts - Storybook build and dev scripts
Dependencies - Framework-specific Storybook packages

Builder Selection

Choose between different build tools:

Webpack 5 (default): Mature, well-tested build system
Vite: Faster build times, modern ESM-based bundling

# Initialize with Vite builder
npx storybook@latest init --builder vite

Development Server Control

Control whether the development server starts after initialization:

# Start dev server after init (default)
npx storybook@latest init --dev

# Don't start dev server after init
npx storybook@latest init --no-dev

Package Manager Integration

Storybook integrates with all major package managers:

# Use specific package manager
npx storybook@latest init --package-manager npm
npx storybook@latest init --package-manager yarn1  
npx storybook@latest init --package-manager yarn2
npx storybook@latest init --package-manager pnpm

# Enable Yarn PnP mode
npx storybook@latest init --package-manager yarn2 --use-pnp

Programmatic Usage

For programmatic initialization, use the create-storybook package which powers the CLI init command:

import { initiate } from "create-storybook";

/**
 * Initialize Storybook in a project programmatically
 * @param options - Configuration options for initialization
 * @returns Promise that resolves when initialization is complete
 */
function initiate(options: CommandOptions): Promise<void>;

/**
 * Lower-level initialization function that returns setup information
 * @param options - Configuration options for initialization
 * @returns Promise with initialization results and next steps
 */
function doInitiate(options: CommandOptions): Promise<
  | {
      shouldRunDev: true;
      shouldOnboard: boolean;
      projectType: ProjectType;
      packageManager: JsPackageManager;
      storybookCommand: string;
    }
  | { shouldRunDev: false }
>;

Usage Examples:

import { initiate } from "create-storybook";

// Basic programmatic initialization
await initiate({
  packageManager: "npm",
  skipInstall: false,
  yes: true,
  dev: false,
  features: ["docs", "test"]
});

// Initialize with specific builder
await initiate({
  packageManager: "yarn1",
  builder: "vite",
  type: ProjectType.REACT,
  yes: true,
  dev: false,
  features: ["docs"]
});

// Initialize and get setup information
import { doInitiate } from "create-storybook";

const result = await doInitiate({
  packageManager: "pnpm",
  yes: true,
  dev: true,
  features: ["docs", "test", "onboarding"]
});

if (result.shouldRunDev) {
  console.log(`Run: ${result.storybookCommand}`);
  console.log(`Project type: ${result.projectType}`);
}

Types

interface CommandOptions {
  packageManager: PackageManagerName;
  usePnp?: boolean;
  features: GeneratorFeature[];
  type?: ProjectType;
  force?: boolean;
  html?: boolean;
  skipInstall?: boolean;
  parser?: string;
  yes?: boolean;
  builder?: Builder;
  linkable?: boolean;
  disableTelemetry?: boolean;
  enableCrashReports?: boolean;
  debug?: boolean;
  dev?: boolean;
}

type GeneratorFeature = "docs" | "test" | "onboarding";

type Builder = CoreBuilder | string;

enum CoreBuilder {
  Webpack5 = "webpack5",
  Vite = "vite"
}

enum ProjectType {
  UNDETECTED = "UNDETECTED",
  UNSUPPORTED = "UNSUPPORTED", 
  REACT = "REACT",
  REACT_SCRIPTS = "REACT_SCRIPTS",
  REACT_NATIVE = "REACT_NATIVE",
  REACT_NATIVE_WEB = "REACT_NATIVE_WEB",
  REACT_NATIVE_AND_RNW = "REACT_NATIVE_AND_RNW",
  REACT_PROJECT = "REACT_PROJECT",
  WEBPACK_REACT = "WEBPACK_REACT",
  NEXTJS = "NEXTJS",
  VUE3 = "VUE3",
  NUXT = "NUXT",
  ANGULAR = "ANGULAR",
  EMBER = "EMBER",
  WEB_COMPONENTS = "WEB_COMPONENTS",
  HTML = "HTML",
  QWIK = "QWIK",
  PREACT = "PREACT",
  SVELTE = "SVELTE",
  SVELTEKIT = "SVELTEKIT",
  SERVER = "SERVER",
  NX = "NX",
  SOLID = "SOLID"
}

type PackageManagerName = "npm" | "pnpm" | "yarn1" | "yarn2" | "bun";

type JsPackageManager = {
  name: PackageManagerName;
  version?: string;
  exec: string;
  installArgs: string[];
  uninstallArgs: string[];
  runScript: (script: string) => string;
};

Install with Tessl CLI