tessl/npm-storybook--cli

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

—

Pending

Overview

Eval results

Files

Addon Management

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

Add, remove, and manage Storybook addons with automatic configuration and dependency handling. The addon management system handles package installation, configuration updates, and postinstall scripts to seamlessly integrate addons into your Storybook setup.

Capabilities

Add Addon Command

Installs and configures a Storybook addon in your project.

storybook add <addon> [options]

Parameters:
  addon                                Name of the addon package to install

Options:
  --package-manager <npm|pnpm|yarn1|yarn2|bun>  Force package manager for installing dependencies
  -c, --config-dir <dir-name>          Directory where to load Storybook configurations from
  --skip-install                       Skip installing deps
  -s, --skip-postinstall               Skip package specific postinstall config modifications  
  -y, --yes                           Skip prompting the user
  --skip-doctor                       Skip doctor check

Usage Examples:

# Add a popular addon
npx storybook add @storybook/addon-docs

# Add addon with version specifier
npx storybook add @storybook/addon-controls@^7.0.0

# Add addon and skip dependency installation
npx storybook add @storybook/addon-actions --skip-install

# Add addon with specific package manager
npx storybook add @storybook/addon-viewport --package-manager yarn1

# Add addon in custom config directory
npx storybook add @storybook/addon-knobs --config-dir .custom-storybook

# Add addon without prompts
npx storybook add @storybook/addon-backgrounds --yes

# Add addon and skip postinstall configuration
npx storybook add @storybook/addon-links --skip-postinstall

Remove Addon Command

Uninstalls and removes a Storybook addon from your project.

storybook remove <addon> [options]

Parameters:
  addon                                Name of the addon package to remove

Options:
  --package-manager <npm|pnpm|yarn1|yarn2|bun>  Force package manager for installing dependencies
  -c, --config-dir <dir-name>          Directory where to load Storybook configurations from
  -s, --skip-install                   Skip installing deps

Usage Examples:

# Remove an addon
npx storybook remove @storybook/addon-docs

# Remove addon with specific package manager
npx storybook remove @storybook/addon-controls --package-manager pnpm

# Remove addon and skip dependency uninstallation
npx storybook remove @storybook/addon-actions --skip-install

# Remove addon from custom config directory
npx storybook remove @storybook/addon-viewport --config-dir .custom-storybook

Addon Version Parsing

The system can parse addon names with version specifiers:

# Different version specification formats
npx storybook add @storybook/addon-docs@7.0.1      # Exact version
npx storybook add @storybook/addon-docs@^7.0.0     # Compatible version
npx storybook add @storybook/addon-docs@latest     # Latest version
npx storybook add addon-name@beta                  # Beta version

Configuration Integration

When adding addons, Storybook automatically:

Updates main.js/ts - Adds addon to the addons array
Installs dependencies - Adds addon package to package.json
Runs postinstall scripts - Executes addon-specific setup if available
Updates configuration - Modifies Storybook config as needed

Popular Addons

Common addons you can install:

# Essential addons
npx storybook add @storybook/addon-essentials    # Bundle of common addons
npx storybook add @storybook/addon-docs          # Documentation
npx storybook add @storybook/addon-controls      # Interactive controls
npx storybook add @storybook/addon-actions       # Action logging

# UI addons  
npx storybook add @storybook/addon-viewport      # Viewport simulation
npx storybook add @storybook/addon-backgrounds   # Background colors
npx storybook add @storybook/addon-toolbars      # Custom toolbar items

# Testing addons
npx storybook add @storybook/addon-a11y          # Accessibility testing
npx storybook add @storybook/addon-jest          # Jest test results
npx storybook add chromatic                      # Visual testing

# Design system addons
npx storybook add @storybook/addon-design-tokens # Design tokens
npx storybook add @storybook/addon-figma         # Figma integration

Postinstall System

Addons can define postinstall scripts for automatic configuration:

Configuration updates - Modify main.js, preview.js
File generation - Create example stories or configuration files
Dependency management - Install peer dependencies
Framework integration - Set up framework-specific configurations

Package Manager Support

Full integration with all major package managers:

npm - Standard npm installation and management
yarn1 - Yarn Classic support
yarn2 - Yarn Berry with PnP support
pnpm - pnpm with workspace support
bun - Bun package manager support

Programmatic Usage

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

/**
 * Add an addon programmatically
 * @param addon - The addon name/package
 * @param options - Configuration options
 */
function add(addon: string, options: PostinstallOptions): Promise<void>;

interface PostinstallOptions {
  packageManager: PackageManagerName;
  configDir: string;
  yes?: boolean;
  skipInstall?: boolean;
}

/**
 * Extract addon name and version specifier from input string
 * @param addon - The input string (e.g., "@storybook/addon-docs@7.0.1")
 * @returns Tuple of [addonName, versionSpecifier]
 */
function getVersionSpecifier(addon: string): readonly [string, string | undefined];

Programmatic Examples:

import { add, getVersionSpecifier } from "@storybook/cli";

// Add addon programmatically
await add("@storybook/addon-docs", {
  packageManager: "npm",
  configDir: ".storybook",
  yes: true
});

// Parse addon name and version
const [name, version] = getVersionSpecifier("@storybook/addon-docs@7.0.1");
// name: "@storybook/addon-docs", version: "7.0.1"

Install with Tessl CLI