or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

cli-builders.mddecorators.mdframework-config.mdindex.mdportable-stories.mdstory-types.mdtemplate-utilities.md
tile.json

tessl/npm-storybook--angular

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

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@storybook/angular@9.1.x

To install, run

npx @tessl/cli install tessl/npm-storybook--angular@9.1.0

index.mddocs/

Storybook for Angular

Storybook for Angular is a comprehensive framework integration that enables Angular developers to build, develop, document, and test UI components in isolation. It provides seamless integration with Angular's build system, modern Angular features, and the broader Storybook ecosystem.

Package Information

  • Package Name: @storybook/angular
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install -D @storybook/angular storybook

Core Imports

import { Meta, StoryObj, moduleMetadata, applicationConfig } from "@storybook/angular";
import { argsToTemplate } from "@storybook/angular";

For decorators and utilities:

import { 
  moduleMetadata, 
  componentWrapperDecorator, 
  applicationConfig 
} from "@storybook/angular";

Basic Usage

import type { Meta, StoryObj } from "@storybook/angular";
import { moduleMetadata } from "@storybook/angular";
import { ButtonComponent } from "./button.component";
import { CommonModule } from "@angular/common";

const meta: Meta<ButtonComponent> = {
  title: "Example/Button",
  component: ButtonComponent,
  decorators: [
    moduleMetadata({
      imports: [CommonModule],
    }),
  ],
  parameters: {
    layout: "centered",
  },
  tags: ["autodocs"],
  argTypes: {
    backgroundColor: { control: "color" },
  },
};

export default meta;
type Story = StoryObj<meta>;

export const Primary: Story = {
  args: {
    primary: true,
    label: "Button",
  },
};

export const Secondary: Story = {
  args: {
    label: "Button",
  },
};

Architecture

Storybook for Angular is built around several key components:

  • Framework Integration: Deep integration with Angular's build system through webpack5 and Angular CLI
  • Story System: Component Story Format (CSF) v2/v3 support with Angular-specific types
  • Decorator Pattern: Angular-specific decorators for module metadata, application config, and component wrapping
  • Template System: Automatic template generation and customization utilities
  • Build Tools: Angular CLI builders for development and production builds
  • Type System: Full TypeScript integration with Angular-specific type transformations

Capabilities

Story Definition and Types

Core types and interfaces for defining Angular component stories using Component Story Format (CSF) v2 and v3.

type Meta<TArgs = Args> = ComponentAnnotations<AngularRenderer, TransformComponentType<TArgs>>;
type StoryFn<TArgs = Args> = AnnotatedStoryFn<AngularRenderer, TransformComponentType<TArgs>>;
type StoryObj<TArgs = Args> = StoryAnnotations<AngularRenderer, TransformComponentType<TArgs>>;
type Decorator<TArgs = StrictArgs> = DecoratorFunction<AngularRenderer, TArgs>;
type Preview = ProjectAnnotations<AngularRenderer>;

Story Definition and Types

Angular Decorators

Angular-specific decorators for configuring module metadata, application configuration, and component wrapping in stories.

declare function moduleMetadata<TArgs = any>(
  metadata: Partial<NgModuleMetadata>
): DecoratorFunction<AngularRenderer, TArgs>;

declare function applicationConfig<TArgs = any>(
  config: ApplicationConfig
): DecoratorFunction<AngularRenderer, TArgs>;

declare function componentWrapperDecorator<TArgs = any>(
  element: Type<unknown> | ((story: string) => string),
  props?: ICollection | ((storyContext: StoryContext<AngularRenderer, TArgs>) => ICollection)
): DecoratorFunction<AngularRenderer, TArgs>;

Angular Decorators

Template Utilities

Utilities for converting story arguments to Angular template bindings and handling dynamic template generation.

declare function argsToTemplate<A extends Record<string, any>>(
  args: A,
  options?: ArgsToTemplateOptions<keyof A>
): string;

interface ArgsToTemplateOptions<T> {
  include?: Array<T>;
  exclude?: Array<T>;
}

Template Utilities

Angular CLI Builders

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

type StorybookBuilderOptions = JsonObject & {
  browserTarget?: string | null;
  tsConfig?: string;
  compodoc: boolean;
  enableProdMode?: boolean;
  styles?: StyleElement[];
  assets?: AssetPattern[];
} & Pick<CLIOptions, 'port' | 'host' | 'configDir' | 'quiet' | 'disableTelemetry'>;

Angular CLI Builders

Framework Configuration

Framework-specific configuration options and Storybook main configuration utilities for Angular projects.

interface StorybookConfig extends StorybookConfigBase, StorybookConfigWebpack {
  framework: '@storybook/angular' | {
    name: '@storybook/angular';
    options: FrameworkOptions;
  };
}

interface FrameworkOptions extends AngularOptions {
  builder?: BuilderOptions;
}

declare function defineMain(config: StorybookConfig): StorybookConfig;

Framework Configuration

Portable Stories

Utilities for using Storybook stories outside of the Storybook environment, such as in testing frameworks.

declare function setProjectAnnotations(
  projectAnnotations: NamedOrDefaultProjectAnnotations<any> | NamedOrDefaultProjectAnnotations<any>[]
): NormalizedProjectAnnotations<AngularRenderer>;

Portable Stories

Types

Core Interfaces

interface AngularRenderer extends WebRenderer {
  component: any;
  storyResult: StoryFnAngularReturnType;
}

interface StoryFnAngularReturnType {
  props?: ICollection;
  moduleMetadata?: NgModuleMetadata;
  applicationConfig?: ApplicationConfig;
  template?: string;
  styles?: string[];
  userDefinedTemplate?: boolean;
}

interface NgModuleMetadata {
  declarations?: any[];
  entryComponents?: any[];
  imports?: any[];
  schemas?: any[];
  providers?: Provider[];
}

interface ICollection {
  [p: string]: any;
}

Configuration Types

interface AngularOptions {
  enableIvy?: boolean;
}

type Parameters = DefaultParameters & {
  bootstrapModuleOptions?: unknown;
};

type StoryContext = DefaultStoryContext<AngularRenderer> & { parameters: Parameters };