tessl/npm-storybook--cli

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

—

Pending

Overview

Eval results

Files

Automigration System

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

Detect and automatically fix compatibility issues, deprecated patterns, and configuration problems. The automigration system provides a comprehensive suite of automated fixes that keep Storybook configurations up-to-date and resolve common issues without manual intervention.

Capabilities

Automigrate Command

Automatically detect and apply fixes for known compatibility and configuration issues.

storybook automigrate [fixId] [options]

Parameters:
  fixId                                Optional specific fix ID to run

Options:
  -y, --yes                            Skip prompting the user
  -n, --dry-run                        Only check for fixes, do not actually run them
  --package-manager <npm|pnpm|yarn1|yarn2|bun>  Force package manager
  -l, --list                           List available migrations
  -c, --config-dir <dir-name>          Directory of Storybook configurations to migrate
  -s, --skip-install                   Skip installing deps
  --renderer <renderer-pkg-name>       The renderer package for the framework Storybook is using
  --skip-doctor                       Skip doctor check

Usage Examples:

# Run all applicable automigrations
npx storybook automigrate

# List available automigrations
npx storybook automigrate --list

# Run specific automigration by ID
npx storybook automigrate addon-docs-config

# Dry run to see what would be fixed
npx storybook automigrate --dry-run

# Run without prompts
npx storybook automigrate --yes

# Skip dependency installation
npx storybook automigrate --skip-install

# Specify custom config directory
npx storybook automigrate --config-dir .custom-storybook

# Force specific package manager
npx storybook automigrate --package-manager yarn1

Fix Categories

Automigrations are organized into several categories:

Configuration Fixes

main.js/ts updates - Modernize configuration format
Framework configuration - Update framework-specific settings
Builder configuration - Migrate builder options
Addon configuration - Fix addon configurations

Dependency Fixes

Package updates - Update outdated dependencies
Peer dependency resolution - Fix peer dependency issues
Duplicate dependency removal - Clean up duplicate packages
Version compatibility - Resolve version conflicts

Code Fixes

Import statement updates - Modernize import patterns
API migrations - Update deprecated API usage
TypeScript fixes - Fix TypeScript configuration issues
ESLint rule updates - Update ESLint configurations

Framework-Specific Fixes

React fixes - React-specific automigrations
Vue fixes - Vue-specific automigrations
Angular fixes - Angular-specific automigrations
Web Components fixes - Web Components automigrations

Fix Status Types

Each fix can have one of several statuses:

enum FixStatus {
  SKIPPED = "skipped",           // Fix was not applicable
  APPLIED = "applied",           // Fix was successfully applied
  FAILED = "failed",             // Fix failed to apply
  UNNECESSARY = "unnecessary",   // Fix was not needed
  CHECK_FAILED = "check_failed"  // Pre-check failed
}

Multi-Project Support

Handle monorepos and multiple Storybook configurations:

# Automatically discover and migrate all Storybook projects
npx storybook automigrate

# Specify multiple config directories
npx storybook automigrate --config-dir packages/app/.storybook --config-dir packages/lib/.storybook

Available Automigrations

Common automigrations include:

Addon Migrations

addon-docs-config - Update addon-docs configuration
addon-controls-config - Migrate addon-controls settings
addon-actions-config - Update addon-actions configuration
remove-addon-interactions - Remove deprecated addon-interactions

Framework Migrations

react-vite-config - Update React + Vite configuration
nextjs-config - Migrate Next.js Storybook setup
angular-config - Update Angular Storybook configuration

Core Migrations

webpack5-config - Migrate to Webpack 5
main-config-format - Update main.js format
preview-config-format - Update preview.js format
typescript-config - Fix TypeScript configuration

Interactive vs Automated Mode

Interactive Mode (default)

Prompts for confirmation before applying fixes
Shows detailed information about each fix
Allows selective application of fixes

Automated Mode (`--yes`)

Applies all applicable fixes without prompts
Ideal for CI/CD pipelines
Provides summary of applied fixes

Dry Run Mode

Preview what fixes would be applied without making changes:

# See what would be fixed
npx storybook automigrate --dry-run

# Dry run for specific fix
npx storybook automigrate addon-docs-config --dry-run

Integration with Other Commands

Automigrations are automatically triggered by:

upgrade command - Runs relevant migrations after version upgrades
add command - Applies addon-specific fixes when adding addons
doctor command - Suggests automigrations for detected issues

Programmatic Usage

import { doAutomigrate, runAutomigrations } from "@storybook/cli";

/**
 * Main automigration entry point
 * @param options - Automigration configuration
 */
function doAutomigrate(options: AutofixOptions): Promise<void>;

/**
 * Run automigrations across multiple projects
 * @param projects - List of project configurations
 * @param options - Automigration options
 */
function runAutomigrations(
  projects: CollectProjectsSuccessResult[], 
  options: AutofixOptions
): Promise<AutomigrationResult[]>;

interface AutofixOptions {
  fixId?: string;
  yes?: boolean;
  dryRun?: boolean;
  packageManager?: PackageManagerName;
  list?: boolean;
  configDir?: string;
  skipInstall?: boolean;
  renderer?: string;
  skipDoctor?: boolean;
}

interface AutomigrationResult {
  fixId: string;
  status: FixStatus;
  description?: string;
  details?: string;
}

interface Fix {
  id: string;
  name: string;
  description: string;
  check: (options: CheckOptions) => Promise<CheckResult>;
  run: (options: RunOptions) => Promise<RunResult>;
}

Programmatic Examples:

import { doAutomigrate } from "@storybook/cli";

// Run all automigrations programmatically
await doAutomigrate({
  yes: true,
  dryRun: false,
  packageManager: "npm"
});

// Run specific fix programmatically
await doAutomigrate({
  fixId: "addon-docs-config",
  yes: true
});

Custom Fix Development

Create custom automigrations for your specific needs:

interface CustomFix extends Fix {
  id: string;
  name: string;
  description: string;
  
  // Check if fix is applicable
  check(options: CheckOptions): Promise<CheckResult>;
  
  // Apply the fix
  run(options: RunOptions): Promise<RunResult>;
}