TypeScript angular.storiesOf函数代码示例

import { centered } from '@storybook/addon-centered/angular';
import { moduleMetadata, storiesOf } from '@storybook/angular';
import { Button } from '@storybook/angular/demo';
import { AppComponent } from '../app/app.component';

storiesOf('Addon|Centered', module)
  .addDecorator(centered)
  .add('centered component', () => ({
    component: AppComponent,
    props: {},
  }));

storiesOf('Addon|Centered', module)
  .addDecorator(
    moduleMetadata({
      declarations: [Button],
    })
  )
  .addDecorator(centered)
  .add('centered template', () => ({
    template: `<storybook-button-component [text]="text" (onClick)="onClick($event)"></storybook-button-component>`,
    props: {
      text: 'Hello Button',
      onClick: (event: Event) => {
        console.log('some bindings work');
        console.log(event);
      },
    },
  }));

import { storiesOf, moduleMetadata } from '@storybook/angular';
import { withKnobs, text } from '@storybook/addon-knobs';

import { NameComponent } from './moduleMetadata/name.component';
import { CustomPipePipe } from './moduleMetadata/custom.pipe';

storiesOf('Custom|Pipes', module)
  .addDecorator(
    moduleMetadata({
      imports: [],
      schemas: [],
      declarations: [CustomPipePipe],
      providers: [],
    })
  )
  .add('Simple', () => ({
    component: NameComponent,
    props: {
      field: 'foobar',
    },
  }))
  .add(
    'With Knobs',
    () => ({
      component: NameComponent,
      props: {
        field: text('field', 'foobar'),
      },
    }),
    {
      decorators: [withKnobs],

        providers: [
            {
                provide: DirectoryExplorerToken, useValue: {
                    explore: () => void 0
                }
            },
            {
                provide: FileOpenerToken, useValue: {
                    open: () => void 0
                }
            }
        ]
    }
};

storiesOf("Execution Status Panel", module)

    .add("with pristine description", () => ({
        ...statusPanelDefualts,
        props: {
            appID: "test-app-id",
        } as Partial<ExecutionStatusComponent>
    }))
    .add("step state overview", () => ({
        ...statusPanelDefualts,
        props: {
            execution: new AppExecution("Workflow", "out", [
                new StepExecution("step_a", "Mike", "pending"),
                new StepExecution("step_b", "Bob", "started", Date.now() - 33125),
                new StepExecution("step_c", "Joe", "completed", Date.now() - 43211, Date.now()),
                new StepExecution("step_d", "Danny", "failed"),

import { storiesOf, moduleMetadata } from '@storybook/angular';
import { action } from '@storybook/addon-actions';
import { withKnobs, text } from '@storybook/addon-knobs/angular';
import { Button } from '@storybook/angular/demo';

storiesOf('Custom|Style', module)
  .addDecorator(
    moduleMetadata({
      declarations: [Button],
    })
  )
  .add('Default', () => ({
    template: `<storybook-button-component [text]="text" (onClick)="onClick($event)"></storybook-button-component>`,
    props: {
      text: 'Button with custom styles',
      onClick: action('log'),
    },
    styles: [
      `
      storybook-button-component {
        background-color: yellow;
        padding: 25px;
      }
    `,
    ],
  }))
  .addDecorator(withKnobs)
  .add('With Knobs', () => ({
    template: `<storybook-button-component [text]="text" (onClick)="onClick($event)"></storybook-button-component>`,
    props: {
      text: text('text', 'Button with custom styles'),

import { storiesOf } from '@storybook/angular';
import { action } from '@storybook/addon-actions';
import { withNotes } from '@storybook/addon-notes';
import { CustomCvaComponent } from './custom-cva.component';

const description = `
  This is an example of component that implements ControlValueAccessor interface
`;

storiesOf('Custom|ngModel', module).add(
  'custom ControlValueAccessor',
  withNotes(description)(() => ({
    component: CustomCvaComponent,
    props: {
      ngModel: 'Type anything',
      ngModelChange: action('ngModelChnange'),
    },
  }))
);

import { storiesOf } from '@storybook/angular';
import { action } from '@storybook/addon-actions';

import { withKnobs, text, number, boolean, array, select, radios, color, date, button } from '@storybook/addon-knobs';

import { SimpleKnobsComponent } from './knobs.component';
import { AllKnobsComponent } from './all-knobs.component';

storiesOf('Addon|Knobs', module)
  .addDecorator(withKnobs)
  .add('Simple', () => {
    const name = text('name', 'John Doe');
    const age = number('age', 0);
    const phoneNumber = text('phoneNumber', '555-55-55');

    return {
      moduleMetadata: {
        entryComponents: [SimpleKnobsComponent],
        declarations: [SimpleKnobsComponent],
      },
      template: `
        <h1> This is a template </h1>
        <storybook-simple-knobs-component
          [age]="age"
          [phoneNumber]="phoneNumber"
          [name]="name"
        >
        </storybook-simple-knobs-component>
      `,
      props: {
        name,

import { storiesOf, addParameters } from '@storybook/angular';
import { Button } from '@storybook/angular/demo';

const globalParameter = 'globalParameter';
const chapterParameter = 'chapterParameter';
const storyParameter = 'storyParameter';

addParameters({ globalParameter });

storiesOf('Core|Parameters', module)
  .addParameters({ chapterParameter })
  .add(
    'passed to story',
    ({ parameters: { fileName, ...parameters } }) => ({
      component: Button,
      props: {
        text: `Parameters are ${JSON.stringify(parameters)}`,
        onClick: () => 0,
      },
    }),
    { storyParameter }
  );

import { storiesOf } from '@storybook/angular';
import { AppComponent } from '../app/app.component';
import { wTests } from '../../.storybook/withTests';

storiesOf('Addon|Jest', module)
  .addDecorator(wTests('app.component'))
  .add('app.component with jest tests', () => ({
    component: AppComponent,
    props: {},
  }));

import { storiesOf, moduleMetadata } from '@storybook/angular';
import { TokenComponent, ITEMS, DEFAULT_NAME } from './moduleMetadata/token.component';
import { CustomPipePipe } from './moduleMetadata/custom.pipe';

storiesOf('Metadata|Combined', module)
  .addDecorator(
    moduleMetadata({
      imports: [],
      declarations: [TokenComponent],
      providers: [
        {
          provide: ITEMS,
          useValue: ['Joe', 'Jane'],
        },
        {
          provide: DEFAULT_NAME,
          useValue: 'Provider Name',
        },
      ],
    })
  )
  .add('Combined 1', () => ({
    template: `<storybook-simple-token-component [name]="name"></storybook-simple-token-component>`,
    props: {
      name: 'Prop Name',
    },
  }))
  .add('Combined 2', () => ({
    template: `<storybook-simple-token-component [name]="name | customPipe"></storybook-simple-token-component>`,
    props: {
      name: 'Prop Name',

import { Component } from '@angular/core';
import { storiesOf } from '@storybook/angular';

@Component({
  selector: 'storybook-with-ng-content',
  template: `<div style="color: #1e88e5;"><ng-content></ng-content></div>`,
})
class WithNgContentComponent {}

storiesOf('Custom|ng-content', module).add('Default', () => ({
  template: `<storybook-with-ng-content><h1>This is rendered in ng-content</h1></storybook-with-ng-content>`,
  moduleMetadata: {
    declarations: [WithNgContentComponent],
  },
}));