tessl/npm-storybook--cli

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

—

Pending

Overview

Eval results

Files

Development Tools

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

Create sandbox environments, link repositories, and manage development workflows. These tools help developers experiment with Storybook configurations, test reproductions, and contribute to the Storybook ecosystem.

Capabilities

Sandbox Command

Create sandbox environments from predefined templates for testing and experimentation.

storybook sandbox [filterValue] [options]

Parameters:
  filterValue                          Optional filter to narrow template selection

Options:
  -o, --output <outDir>                Define an output directory
  --no-init                           Whether to download a template without an initialized Storybook (default: false)

Alias: repro (for backward compatibility)

Usage Examples:

# Create sandbox with interactive template selection
npx storybook sandbox

# Filter templates by name
npx storybook sandbox react

# Create sandbox in specific directory
npx storybook sandbox react --output my-react-sandbox

# Download template without Storybook initialization
npx storybook sandbox vue --no-init

# Using the legacy alias
npx storybook repro angular

Link Command

Pull down a repository from URL or local directory, link it, and run Storybook for testing reproductions.

storybook link <repo-url-or-directory> [options]

Parameters:
  repo-url-or-directory                Target repository URL or local directory path

Options:
  --local                             Link a local directory already in your file system
  --no-start                          Start the storybook (default: true)

Usage Examples:

# Link and run remote repository
npx storybook link https://github.com/user/storybook-repro

# Link local directory
npx storybook link ./local-storybook-project --local

# Link without starting Storybook
npx storybook link https://github.com/user/repro --no-start

# Link local directory and start immediately
npx storybook link ../my-storybook-project --local

Template System

The sandbox command provides access to extensive templates:

Framework Templates

React - Create React App, Next.js, custom React setups
Vue - Vue CLI, Nuxt.js, custom Vue configurations
Angular - Angular CLI projects with Storybook
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 with Storybook

Builder Templates

Webpack 5 - Templates using Webpack 5 builder
Vite - Templates using Vite builder for faster builds

Specialized Templates

TypeScript - TypeScript-configured templates
Monorepo - Monorepo setup examples
Custom Webpack - Advanced Webpack configuration examples
Testing - Templates with testing setup (Jest, Vitest)

Template Organization

Templates are organized by release cadence:

interface Template {
  name: string;
  script: string;
  cadence: TemplateCadence;
  skipTasks?: string[];
  inDevelopment?: boolean;
  expected: {
    framework: string;
    renderer: string;
    builder: string;
  };
}

type TemplateCadence = "ci" | "daily" | "weekly";
type TemplateKey = string;

Release Cadences

CI - Tested on every commit, most stable
Daily - Tested daily, generally stable
Weekly - Tested weekly, may have issues

Repository Linking

The link command supports various repository sources:

Remote Repositories

# GitHub repositories
npx storybook link https://github.com/storybookjs/storybook

# GitLab repositories  
npx storybook link https://gitlab.com/user/project

# Bitbucket repositories
npx storybook link https://bitbucket.org/user/repo

# Raw git URLs
npx storybook link git@github.com:user/repo.git

Local Directories

# Relative paths
npx storybook link ../my-project --local

# Absolute paths
npx storybook link /Users/dev/projects/storybook-app --local

# Current directory
npx storybook link . --local

Sandbox Workflow

Complete workflow for sandbox creation:

Template Selection - Choose from available templates
Download - Pull template from repository
Installation - Install dependencies with detected package manager
Configuration - Set up Storybook if --init is enabled
Launch - Start development server (optional)

Link Workflow

Complete workflow for repository linking:

Repository Cloning - Clone or copy repository
Dependency Installation - Install project dependencies
Storybook Detection - Detect existing Storybook configuration
Link Setup - Configure linking if needed
Development Server - Start Storybook (unless --no-start)

Package Manager Integration

Both commands work with all supported package managers:

npm - Standard npm workflows
Yarn Classic - Yarn 1.x support
Yarn Berry - Yarn 2+ with PnP support
pnpm - pnpm with workspace support
Bun - Bun package manager support

Development Use Cases

Bug Reproduction

# Create minimal reproduction environment
npx storybook sandbox react --output bug-repro
cd bug-repro
# Add minimal code to reproduce issue

Feature Testing

# Test new features in sandbox
npx storybook sandbox vue --output feature-test
cd feature-test
# Install and test new addons or features

Framework Exploration

# Explore different framework setups
npx storybook sandbox angular --output angular-exploration
npx storybook sandbox svelte --output svelte-exploration

Contribution Testing

# Test contributions against existing projects
npx storybook link https://github.com/user/storybook-issue-repro
# Test your changes against the reproduction

Programmatic Usage

import { sandbox, link } from "@storybook/cli";

/**
 * Create sandbox programmatically
 * @param options - Sandbox configuration
 */
function sandbox(options: SandboxOptions): Promise<void>;

/**
 * Link repositories programmatically
 * @param options - Link configuration
 */
function link(options: LinkOptions): Promise<void>;

interface SandboxOptions {
  filterValue?: string;
  output?: string;
  branch?: string;
  init?: boolean;
  packageManager: PackageManagerName;
}

interface LinkOptions {
  target: string;
  local?: boolean;
  start: boolean;
}

/**
 * Execute shell commands with logging
 * @param command - Command to execute
 * @param options - Execution options
 * @param config - Additional configuration
 */
function exec(
  command: string, 
  options?: ExecOptions,
  config?: ExecConfig
): Promise<unknown>;

Programmatic Examples:

import { sandbox, link } from "@storybook/cli";

// Create sandbox programmatically
await sandbox({
  filterValue: "react",
  output: "my-sandbox",
  init: true,
  packageManager: "npm"
});

// Link repository programmatically
await link({
  target: "https://github.com/user/repro",
  local: false,
  start: true
});

Advanced Features

Custom Output Directories

# Organize sandboxes by purpose
npx storybook sandbox react --output sandboxes/react-testing
npx storybook sandbox vue --output sandboxes/vue-debugging

Template Filtering

# Filter by framework
npx storybook sandbox react

# Filter by builder  
npx storybook sandbox vite

# Filter by specific template name
npx storybook sandbox "react-typescript"

Selective Initialization

# Download template without Storybook setup
npx storybook sandbox react --no-init

# Manually initialize later
cd react-template
npx storybook@latest init

Install with Tessl CLI