tessl/npm-storybook--angular

Storybook for Angular: Develop, document, and test UI components in isolation

—

Pending

Overview

Eval results

Files

Angular CLI Builders

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

Angular CLI builders for starting and building Storybook applications integrated with Angular's build system.

Capabilities

Start Storybook Builder

Angular CLI builder for starting Storybook in development mode with hot reloading and Angular build integration.

/**
 * Angular CLI builder for starting Storybook in development mode
 * Builder name: @storybook/angular:start-storybook
 */
type StorybookStartBuilderOptions = JsonObject & {
  /** Angular browser target to use for build configuration */
  browserTarget?: string | null;
  /** Path to TypeScript configuration file */
  tsConfig?: string;
  /** Whether to run compodoc for documentation generation */
  compodoc: boolean;
  /** Arguments to pass to compodoc */
  compodocArgs: string[];
  /** Enable Angular production mode optimizations */
  enableProdMode?: boolean;
  /** Additional styles to include */
  styles?: StyleElement[];
  /** Style preprocessor options */
  stylePreprocessorOptions?: StylePreprocessorOptions;
  /** Additional assets to include */
  assets?: AssetPattern[];
  /** Preserve symlinks in module resolution */
  preserveSymlinks?: boolean;
  /** Enable source maps */
  sourceMap?: SourceMapUnion;
  /** Enable experimental zoneless change detection */
  experimentalZoneless?: boolean;
} & Pick<CLIOptions, 
  | 'port'
  | 'host' 
  | 'configDir'
  | 'https'
  | 'sslCa'
  | 'sslCert'
  | 'sslKey'
  | 'smokeTest'
  | 'ci'
  | 'quiet'
  | 'disableTelemetry'
  | 'initialPath'
  | 'open'
  | 'docs'
  | 'debugWebpack'
  | 'webpackStatsJson'
  | 'statsJson'
  | 'loglevel'
  | 'previewUrl'
>;

Usage in angular.json:

{
  "projects": {
    "my-app": {
      "architect": {
        "storybook": {
          "builder": "@storybook/angular:start-storybook",
          "options": {
            "configDir": ".storybook",
            "browserTarget": "my-app:build",
            "port": 6006,
            "compodoc": true,
            "compodocArgs": [
              "-e", "json",
              "-d", "."
            ]
          },
          "configurations": {
            "ci": {
              "quiet": true,
              "ci": true
            }
          }
        }
      }
    }
  }
}

CLI Usage:

# Start Storybook with default options
ng run my-app:storybook

# Start with specific configuration
ng run my-app:storybook:ci

# Start with custom port and enable docs
ng run my-app:storybook --port=9009 --docs

# Start with debugging enabled
ng run my-app:storybook --debugWebpack

Build Storybook Builder

Angular CLI builder for building static Storybook output for production deployment.

/**
 * Angular CLI builder for building static Storybook for production
 * Builder name: @storybook/angular:build-storybook
 */
type StorybookBuildBuilderOptions = JsonObject & {
  /** Angular browser target to use for build configuration */
  browserTarget?: string | null;
  /** Path to TypeScript configuration file */
  tsConfig?: string;
  /** Enable test mode for CI environments */
  test: boolean;
  /** Enable docs generation */
  docs: boolean;
  /** Whether to run compodoc for documentation generation */
  compodoc: boolean;
  /** Arguments to pass to compodoc */
  compodocArgs: string[];
  /** Enable Angular production mode optimizations */
  enableProdMode?: boolean;
  /** Additional styles to include */
  styles?: StyleElement[];
  /** Style preprocessor options */
  stylePreprocessorOptions?: StylePreprocessorOptions;
  /** Preserve symlinks in module resolution */
  preserveSymlinks?: boolean;
  /** Additional assets to include */
  assets?: AssetPattern[];
  /** Enable source maps */
  sourceMap?: SourceMapUnion;
  /** Enable experimental zoneless change detection */
  experimentalZoneless?: boolean;
} & Pick<CLIOptions,
  | 'outputDir'
  | 'configDir'
  | 'loglevel'
  | 'quiet'
  | 'test'
  | 'webpackStatsJson'
  | 'statsJson'
  | 'disableTelemetry'
  | 'debugWebpack'
  | 'previewUrl'
>;

Usage in angular.json:

{
  "projects": {
    "my-app": {
      "architect": {
        "build-storybook": {
          "builder": "@storybook/angular:build-storybook",
          "options": {
            "configDir": ".storybook",
            "browserTarget": "my-app:build:production",
            "outputDir": "dist/storybook",
            "compodoc": true,
            "compodocArgs": [
              "-e", "json",
              "-d", ".",
              "--silent"
            ]
          },
          "configurations": {
            "ci": {
              "test": true,
              "quiet": true,
              "disableTelemetry": true
            }
          }
        }
      }
    }
  }
}

CLI Usage:

# Build Storybook for production
ng run my-app:build-storybook

# Build with test mode for CI
ng run my-app:build-storybook:ci

# Build to custom output directory
ng run my-app:build-storybook --outputDir=dist/my-storybook

# Build with webpack stats for analysis
ng run my-app:build-storybook --webpackStatsJson

Configuration Options

Common Options

Options available for both start and build builders:

interface CommonBuilderOptions {
  /** Angular browser target (e.g., "my-app:build" or "my-app:build:production") */
  browserTarget?: string | null;
  /** Path to TypeScript configuration file */
  tsConfig?: string;
  /** Whether to run compodoc for documentation generation */
  compodoc: boolean;
  /** Arguments to pass to compodoc command */
  compodocArgs: string[];
  /** Enable Angular production mode optimizations */
  enableProdMode?: boolean;
  /** Additional styles to include in the build */
  styles?: StyleElement[];
  /** Style preprocessor options (Sass, Less, etc.) */
  stylePreprocessorOptions?: StylePreprocessorOptions;
  /** Additional assets to copy to the output */
  assets?: AssetPattern[];
  /** Preserve symlinks during module resolution */
  preserveSymlinks?: boolean;
  /** Enable source map generation */
  sourceMap?: SourceMapUnion;
  /** Enable experimental zoneless change detection */
  experimentalZoneless?: boolean;
}

Browser Target Integration

The browserTarget option allows Storybook to inherit configuration from existing Angular build targets:

{
  "build": {
    "builder": "@angular-devkit/build-angular:browser",
    "options": {
      "outputPath": "dist/my-app",
      "index": "src/index.html",
      "main": "src/main.ts",
      "polyfills": "src/polyfills.ts",
      "tsConfig": "tsconfig.app.json",
      "assets": ["src/favicon.ico", "src/assets"],
      "styles": ["src/styles.scss"],
      "stylePreprocessorOptions": {
        "includePaths": ["src/styles"]
      }
    }
  },
  "storybook": {
    "builder": "@storybook/angular:start-storybook",
    "options": {
      "browserTarget": "my-app:build",
      // Inherits: tsConfig, assets, styles, stylePreprocessorOptions
      "configDir": ".storybook"
    }
  }
}

Compodoc Integration

Compodoc generates documentation from Angular components for use in Storybook docs:

{
  "build-storybook": {
    "builder": "@storybook/angular:build-storybook",
    "options": {
      "compodoc": true,
      "compodocArgs": [
        "-e", "json",
        "-d", ".",
        "--tsconfig", "tsconfig.doc.json",
        "--silent"
      ]
    }
  }
}

Asset and Style Configuration

Include additional assets and styles specifically for Storybook:

{
  "storybook": {
    "builder": "@storybook/angular:start-storybook",
    "options": {
      "assets": [
        "src/favicon.ico",
        "src/assets",
        {
          "glob": "**/*",
          "input": "src/storybook-assets",
          "output": "/storybook-assets"
        }
      ],
      "styles": [
        "src/styles.scss",
        "src/storybook-specific.scss"
      ],
      "stylePreprocessorOptions": {
        "includePaths": [
          "src/styles",
          "node_modules"
        ]
      }
    }
  }
}

Builder Output Types

Start Builder Output

type StorybookStartBuilderOutput = JsonObject & BuilderOutput & {
  /** Whether the build was successful */
  success: boolean;
  /** Information about the running server */
  info: {
    /** Port number where Storybook is running */
    port: number;
  };
};

Build Builder Output

type StorybookBuildBuilderOutput = JsonObject & BuilderOutput & {
  /** Whether the build was successful */
  success: boolean;
  /** Additional build information */
  [key: string]: any;
};

Environment Variables

Builders support environment variable configuration:

# Start builder environment variables
export SBCONFIG_PORT=9009
export SBCONFIG_HOSTNAME=0.0.0.0
export SBCONFIG_STATIC_DIR=./public
export SBCONFIG_CONFIG_DIR=./.storybook
export CI=true

# Build builder environment variables
export SBCONFIG_OUTPUT_DIR=./storybook-static
export SBCONFIG_CONFIG_DIR=./.storybook
export SBCONFIG_STATIC_DIR=./public

Advanced Usage Examples

Multi-Project Setup

For Angular workspaces with multiple projects:

{
  "projects": {
    "shared-components": {
      "architect": {
        "storybook": {
          "builder": "@storybook/angular:start-storybook",
          "options": {
            "configDir": "projects/shared-components/.storybook",
            "browserTarget": "shared-components:build"
          }
        }
      }
    },
    "admin-app": {
      "architect": {
        "storybook": {
          "builder": "@storybook/angular:start-storybook",
          "options": {
            "configDir": "projects/admin-app/.storybook",
            "browserTarget": "admin-app:build",
            "port": 6007
          }
        }
      }
    }
  }
}

CI/CD Integration

Optimized configuration for continuous integration:

{
  "build-storybook": {
    "builder": "@storybook/angular:build-storybook",
    "configurations": {
      "ci": {
        "test": true,
        "quiet": true,
        "disableTelemetry": true,
        "enableProdMode": true,
        "sourceMap": false,
        "compodoc": true,
        "compodocArgs": ["--silent"]
      }
    }
  }
}

Development vs Production

Different configurations for development and production builds:

{
  "storybook": {
    "builder": "@storybook/angular:start-storybook",
    "options": {
      "browserTarget": "my-app:build",
      "enableProdMode": false,
      "sourceMap": true
    },
    "configurations": {
      "production": {
        "browserTarget": "my-app:build:production",
        "enableProdMode": true,
        "sourceMap": false
      }
    }
  }
}

Install with Tessl CLI

npx tessl i tessl/npm-storybook--angular

docs

template-utilities.md

tile.json