@storybook/angular 7.0.0-alpha.46 → 7.0.0-alpha.47

package/template/stories/basics/component-with-enums/enums.component.stories.ts

@@ -0,0 +1,24 @@
+import { Meta, StoryFn } from '@storybook/angular';
+import {
+  EnumsComponent,
+  EnumNumeric,
+  EnumNumericInitial,
+  EnumStringValues,
+} from './enums.component';
+
+export default {
+  // title: 'Basics / Component / With Enum Types',
+  component: EnumsComponent,
+} as Meta;
+
+export const Basic: StoryFn = (args) => ({
+  props: args,
+});
+Basic.args = {
+  unionType: 'union a',
+  aliasedUnionType: 'Type Alias 1',
+  enumNumeric: EnumNumeric.FIRST,
+  enumNumericInitial: EnumNumericInitial.UNO,
+  enumStrings: EnumStringValues.PRIMARY,
+  enumAlias: EnumNumeric.FIRST,
+};

package/template/stories/basics/component-with-enums/enums.component.ts

@@ -0,0 +1,53 @@
+import { Component, Input } from '@angular/core';
+
+/**
+ * This component is used for testing the various forms of enum types
+ */
+@Component({
+  selector: 'app-enums',
+  templateUrl: './enums.component.html',
+})
+export class EnumsComponent {
+  /** Union Type of string literals */
+  @Input() unionType?: 'Union A' | 'Union B' | 'Union C';
+
+  /** Union Type assigned as a Type Alias */
+  @Input() aliasedUnionType?: TypeAlias;
+
+  /** Base Enum Type with no assigned values */
+  @Input() enumNumeric?: EnumNumeric;
+
+  /** Enum with initial numeric value and auto-incrementing subsequent values */
+  @Input() enumNumericInitial?: EnumNumericInitial;
+
+  /** Enum with string values */
+  @Input() enumStrings?: EnumStringValues;
+
+  /** Type Aliased Enum Type */
+  @Input() enumAlias?: EnumAlias;
+}
+
+/**
+ * Button Priority
+ */
+export enum EnumNumeric {
+  FIRST,
+  SECOND,
+  THIRD,
+}
+
+export enum EnumNumericInitial {
+  UNO = 1,
+  DOS,
+  TRES,
+}
+
+export enum EnumStringValues {
+  PRIMARY = 'PRIMARY',
+  SECONDARY = 'SECONDARY',
+  TERTIARY = 'TERTIARY',
+}
+
+export type EnumAlias = EnumNumeric;
+
+type TypeAlias = 'Type Alias 1' | 'Type Alias 2' | 'Type Alias 3';

package/template/stories/basics/component-with-inheritance/base-button.component.ts

@@ -0,0 +1,10 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: `storybook-base-button`,
+  template: ` <button>{{ label }}</button> `,
+})
+export class BaseButtonComponent {
+  @Input()
+  label?: string;
+}

package/template/stories/basics/component-with-inheritance/base-button.stories.ts

@@ -0,0 +1,12 @@
+import { BaseButtonComponent } from './base-button.component';
+
+export default {
+  // title: 'Basics / Component / With Inheritance',
+  component: BaseButtonComponent,
+};
+
+export const BaseButton = () => ({
+  props: {
+    label: 'this is label',
+  },
+});

package/template/stories/basics/component-with-inheritance/icon-button.component.ts

@@ -0,0 +1,11 @@
+import { Component, Input } from '@angular/core';
+import { BaseButtonComponent } from './base-button.component';
+
+@Component({
+  selector: `storybook-icon-button`,
+  template: ` <button>{{ label }} - {{ icon }}</button> `,
+})
+export class IconButtonComponent extends BaseButtonComponent {
+  @Input()
+  icon?: string;
+}

package/template/stories/basics/component-with-inheritance/icon-button.stories.ts

@@ -0,0 +1,13 @@
+import { IconButtonComponent } from './icon-button.component';
+
+export default {
+  // title: 'Basics / Component / With Inheritance',
+  component: IconButtonComponent,
+};
+
+export const IconButton = () => ({
+  props: {
+    icon: 'this is icon',
+    label: 'this is label',
+  },
+});

package/template/stories/basics/component-with-ng-content/ng-content-about-parent.stories.ts

@@ -0,0 +1,58 @@
+import { Component, Input } from '@angular/core';
+import { componentWrapperDecorator, Meta, StoryFn } from '@storybook/angular';
+
+@Component({
+  selector: 'sb-button',
+  template: `<button [style.background-color]="color"><ng-content></ng-content></button>`,
+  styles: [
+    `
+      button {
+        padding: 4px;
+      }
+    `,
+  ],
+})
+class SbButtonComponent {
+  @Input()
+  color = '#5eadf5';
+}
+
+export default {
+  // title: 'Basics / Component / With ng-content / Button with different contents',
+  // Implicitly declares the component to Angular
+  // This will be the component described by the addon docs
+  component: SbButtonComponent,
+  decorators: [
+    // Wrap all stories with this template
+    componentWrapperDecorator(
+      (story) => `<sb-button [color]="propsColor">${story}</sb-button>`,
+
+      ({ args }) => ({ propsColor: args['color'] })
+    ),
+  ],
+  argTypes: {
+    color: { control: 'color' },
+  },
+} as Meta;
+
+// By default storybook uses the default export component if no template or component is defined in the story
+// So Storybook nests the component twice because it is first added by the componentWrapperDecorator.
+export const AlwaysDefineTemplateOrComponent: StoryFn = () => ({});
+
+export const EmptyButton: StoryFn = () => ({
+  template: '',
+});
+
+export const WithDynamicContentAndArgs: StoryFn = (args) => ({
+  template: `${args['content']}`,
+});
+WithDynamicContentAndArgs.argTypes = {
+  content: { control: 'text' },
+};
+WithDynamicContentAndArgs.args = { content: 'My button text' };
+
+export const InH1: StoryFn = () => ({
+  template: 'My button in h1',
+});
+InH1.decorators = [componentWrapperDecorator((story) => `<h1>${story}</h1>`)];
+InH1.storyName = 'In <h1>';

package/template/stories/basics/component-with-ng-content/ng-content-simple.stories.ts

@@ -0,0 +1,29 @@
+import { Component } from '@angular/core';
+
+import { Meta, StoryFn } from '@storybook/angular/';
+
+@Component({
+  selector: 'storybook-with-ng-content',
+  template: `Content value:
+    <div style="color: #1e88e5;"><ng-content></ng-content></div>`,
+})
+class WithNgContentComponent {}
+
+export default {
+  // title: 'Basics / Component / With ng-content / Simple',
+  component: WithNgContentComponent,
+} as Meta;
+
+export const OnlyComponent: StoryFn = () => ({});
+
+export const Default: StoryFn = () => ({
+  template: `<storybook-with-ng-content><h1>This is rendered in ng-content</h1></storybook-with-ng-content>`,
+});
+
+export const WithDynamicContentAndArgs: StoryFn = (args) => ({
+  template: `<storybook-with-ng-content><h1>${args['content']}</h1></storybook-with-ng-content>`,
+});
+WithDynamicContentAndArgs.argTypes = {
+  content: { control: 'text' },
+};
+WithDynamicContentAndArgs.args = { content: 'Default content' };

package/template/stories/basics/component-with-ng-on-destroy/component-with-on-destroy.stories.ts

@@ -0,0 +1,42 @@
+import { OnDestroy, OnInit, Component } from '@angular/core';
+import { Meta, StoryFn } from '@storybook/angular';
+
+@Component({
+  selector: 'on-destroy',
+  template: `Current time: {{ time }} <br />
+    📝 The current time in console should no longer display after a change of story`,
+})
+class OnDestroyComponent implements OnInit, OnDestroy {
+  time?: string;
+
+  interval: any;
+
+  ngOnInit(): void {
+    const myTimer = () => {
+      const d = new Date();
+      this.time = d.toLocaleTimeString();
+      console.info(`Current time: ${this.time}`);
+    };
+
+    myTimer();
+    this.interval = setInterval(myTimer, 3000);
+  }
+
+  ngOnDestroy(): void {
+    clearInterval(this.interval);
+  }
+}
+
+export default {
+  // title: 'Basics / Component / with ngOnDestroy',
+  component: OnDestroyComponent,
+  parameters: {
+    // disabled due to new Date()
+    storyshots: { disable: true },
+    chromatic: { disable: true },
+  },
+} as Meta;
+
+export const SimpleComponent: StoryFn = () => ({
+  component: OnDestroyComponent,
+});

package/template/stories/basics/component-with-on-push/on-push-box.component.ts

@@ -0,0 +1,21 @@
+import { Component, Input, ChangeDetectionStrategy, HostBinding } from '@angular/core';
+
+@Component({
+  selector: 'storybook-on-push-box',
+  template: ` Word of the day: {{ word }} `,
+  styles: [
+    `
+      :host {
+        display: block;
+        padding: 1rem;
+        width: fit-content;
+      }
+    `,
+  ],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class OnPushBoxComponent {
+  @Input() word?: string;
+
+  @Input() @HostBinding('style.background-color') bgColor?: string;
+}

package/template/stories/basics/component-with-on-push/on-push.stories.ts

@@ -0,0 +1,21 @@
+import { Meta, StoryFn } from '@storybook/angular';
+import { OnPushBoxComponent } from './on-push-box.component';
+
+export default {
+  // title: 'Basics / Component / With OnPush strategy',
+  component: OnPushBoxComponent,
+  argTypes: {
+    word: { control: 'text' },
+    bgColor: { control: 'color' },
+  },
+  args: {
+    word: 'The text',
+    bgColor: '#FFF000',
+  },
+} as Meta;
+
+export const ClassSpecifiedComponentWithOnPushAndArgs: StoryFn = (args) => ({
+  props: args,
+});
+ClassSpecifiedComponentWithOnPushAndArgs.storyName =
+  'Class-specified component with OnPush and Args';

package/template/stories/basics/component-with-pipe/custom-pipes.stories.ts

@@ -0,0 +1,31 @@
+import { Meta, StoryFn, moduleMetadata } from '@storybook/angular';
+
+import { CustomPipePipe } from './custom.pipe';
+import { WithPipeComponent } from './with-pipe.component';
+
+export default {
+  // title: 'Basics / Component / With Pipes',
+  component: WithPipeComponent,
+  decorators: [
+    moduleMetadata({
+      declarations: [CustomPipePipe],
+    }),
+  ],
+} as Meta;
+
+export const Simple: StoryFn = () => ({
+  props: {
+    field: 'foobar',
+  },
+});
+
+export const WithArgsStory: StoryFn = (args) => ({
+  props: args,
+});
+WithArgsStory.storyName = 'With args';
+WithArgsStory.argTypes = {
+  field: { control: 'text' },
+};
+WithArgsStory.args = {
+  field: 'Foo Bar',
+};

package/template/stories/basics/component-with-pipe/custom.pipe.ts

@@ -0,0 +1,10 @@
+import { PipeTransform, Pipe } from '@angular/core';
+
+@Pipe({
+  name: 'customPipe',
+})
+export class CustomPipePipe implements PipeTransform {
+  transform(value: any, args?: any): any {
+    return `CustomPipe: ${value}`;
+  }
+}

package/template/stories/basics/component-with-pipe/with-pipe.component.ts

@@ -0,0 +1,10 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'storybook-with-pipe',
+  template: ` <h1>{{ field | customPipe }}</h1> `,
+})
+export class WithPipeComponent {
+  @Input()
+  field: any;
+}

package/template/stories/basics/component-with-provider/di.component.html

@@ -0,0 +1,7 @@
+<div>
+  <div>All dependencies are defined: {{ isAllDeps() }}</div>
+  <div>Title: {{ title }}</div>
+  <div>Injector: {{ injector.constructor.toString() }}</div>
+  <div>ElementRef: {{ elRefStr() }}</div>
+  <div>TestToken: {{ testToken }}</div>
+</div>

package/template/stories/basics/component-with-provider/di.component.stories.ts

@@ -0,0 +1,26 @@
+import { Args } from '@storybook/angular';
+import { DiComponent } from './di.component';
+
+export default {
+  // title: 'Basics / Component / With Provider',
+  component: DiComponent,
+};
+
+export const InputsAndInjectDependencies = () => ({
+  props: {
+    title: 'Component dependencies',
+  },
+});
+
+InputsAndInjectDependencies.storyName = 'inputs and inject dependencies';
+
+export const InputsAndInjectDependenciesWithArgs = (args: Args) => ({
+  props: args,
+});
+InputsAndInjectDependenciesWithArgs.storyName = 'inputs and inject dependencies with args';
+InputsAndInjectDependenciesWithArgs.argTypes = {
+  title: { control: 'text' },
+};
+InputsAndInjectDependenciesWithArgs.args = {
+  title: 'Component dependencies',
+};

package/template/stories/basics/component-with-provider/di.component.ts

@@ -0,0 +1,28 @@
+import { Injector, ElementRef, Component, Input, InjectionToken, Inject } from '@angular/core';
+import { stringify } from 'telejson';
+
+export const TEST_TOKEN = new InjectionToken<string>('test');
+
+@Component({
+  selector: 'storybook-di-component',
+  templateUrl: './di.component.html',
+  providers: [{ provide: TEST_TOKEN, useValue: 123 }],
+})
+export class DiComponent {
+  @Input()
+  title?: string;
+
+  constructor(
+    protected injector: Injector,
+    protected elRef: ElementRef,
+    @Inject(TEST_TOKEN) protected testToken: number
+  ) {}
+
+  isAllDeps(): boolean {
+    return Boolean(this.testToken && this.elRef && this.injector && this.title);
+  }
+
+  elRefStr(): string {
+    return stringify(this.elRef, { maxDepth: 1 });
+  }
+}

package/template/stories/basics/component-with-style/styled.component.css

@@ -0,0 +1,3 @@
+.red-color {
+  color: red;
+}

package/template/stories/basics/component-with-style/styled.component.html

@@ -0,0 +1,5 @@
+<div>
+  <p class="red-color">Styled with scoped CSS</p>
+  <p class="blue-color">Styled with scoped SCSS</p>
+  <p class="green-color">Styled with global CSS</p>
+</div>

package/template/stories/basics/component-with-style/styled.component.scss

@@ -0,0 +1,5 @@
+div {
+  p.blue-color {
+    color: blue;
+  }
+}

package/template/stories/basics/component-with-style/styled.component.stories.ts

@@ -0,0 +1,10 @@
+import { StyledComponent } from './styled.component';
+
+export default {
+  // title: 'Basics / Component / With StyleUrls',
+  component: StyledComponent,
+};
+
+export const ComponentWithStyles = () => ({});
+
+ComponentWithStyles.storyName = 'Component with styles';

package/template/stories/basics/component-with-style/styled.component.ts

@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'storybook-styled-component',
+  templateUrl: './styled.component.html',
+  styleUrls: ['./styled.component.css', './styled.component.scss'],
+})
+export class StyledComponent {}

package/template/stories/basics/component-without-selector/without-selector-ng-component-outlet.stories.ts

@@ -0,0 +1,73 @@
+import { OnInit, Type, Component, Injector, Input } from '@angular/core';
+import { StoryFn, Meta, componentWrapperDecorator, moduleMetadata } from '@storybook/angular';
+import { WithoutSelectorComponent, WITHOUT_SELECTOR_DATA } from './without-selector.component';
+
+export default {
+  // title: 'Basics / Component / without selector / Custom wrapper *NgComponentOutlet',
+  component: WithoutSelectorComponent,
+  decorators: [
+    moduleMetadata({
+      entryComponents: [WithoutSelectorComponent],
+    }),
+  ],
+} as Meta;
+
+// Advanced example with custom *ngComponentOutlet
+
+@Component({
+  selector: 'ng-component-outlet-wrapper',
+  template: `<ng-container
+    *ngComponentOutlet="componentOutlet; injector: componentInjector; content: componentContent"
+  ></ng-container>`,
+})
+class NgComponentOutletWrapperComponent implements OnInit {
+  @Input()
+  componentOutlet?: Type<unknown>;
+
+  @Input()
+  name?: string;
+
+  @Input()
+  color?: string;
+
+  componentInjector?: Injector;
+
+  componentContent = [
+    [document.createTextNode('Ng-content : Inspired by ')],
+    [document.createTextNode('https://angular.io/api/common/NgComponentOutlet')],
+  ];
+
+  constructor(private readonly injector: Injector) {}
+
+  ngOnInit(): void {
+    this.componentInjector = Injector.create({
+      providers: [
+        { provide: WITHOUT_SELECTOR_DATA, useValue: { color: this.color, name: this.name } },
+      ],
+      parent: this.injector,
+    });
+  }
+}
+
+// Live changing of args by controls does not work at the moment. When changing args storybook does not fully
+// reload and therefore does not take into account the change of provider.
+export const WithCustomNgComponentOutletWrapper: StoryFn = (args) => ({
+  props: args,
+});
+WithCustomNgComponentOutletWrapper.storyName = 'Custom wrapper *NgComponentOutlet';
+WithCustomNgComponentOutletWrapper.argTypes = {
+  name: { control: 'text' },
+  color: { control: 'color' },
+};
+WithCustomNgComponentOutletWrapper.args = { name: 'Dixie Normous', color: 'green' };
+WithCustomNgComponentOutletWrapper.decorators = [
+  moduleMetadata({
+    declarations: [NgComponentOutletWrapperComponent],
+  }),
+  componentWrapperDecorator(NgComponentOutletWrapperComponent, (args) => ({
+    name: args.name,
+
+    color: args['color'],
+    componentOutlet: WithoutSelectorComponent,
+  })),
+];

package/template/stories/basics/component-without-selector/without-selector-ng-factory-resolver.stories.ts

@@ -0,0 +1,71 @@
+import {
+  AfterViewInit,
+  ComponentFactoryResolver,
+  Type,
+  Component,
+  Input,
+  ViewChild,
+  ViewContainerRef,
+} from '@angular/core';
+import { StoryFn, Meta, componentWrapperDecorator, moduleMetadata } from '@storybook/angular';
+
+import { WithoutSelectorComponent } from './without-selector.component';
+
+export default {
+  // title: 'Basics / Component / without selector / Custom wrapper ComponentFactoryResolver',
+  component: WithoutSelectorComponent,
+  decorators: [
+    moduleMetadata({
+      entryComponents: [WithoutSelectorComponent],
+    }),
+  ],
+} as Meta;
+
+// Advanced example with custom ComponentFactoryResolver
+
+@Component({ selector: 'component-factory-wrapper', template: '' })
+class ComponentFactoryWrapperComponent implements AfterViewInit {
+  @ViewChild('dynamicInsert', { read: ViewContainerRef }) dynamicInsert: any;
+
+  @Input()
+  componentOutlet?: Type<unknown>;
+
+  @Input()
+  args: any;
+
+  constructor(
+    private viewContainerRef: ViewContainerRef,
+    private componentFactoryResolver: ComponentFactoryResolver
+  ) {}
+
+  ngAfterViewInit() {
+    const componentFactory = this.componentFactoryResolver.resolveComponentFactory(
+      this.componentOutlet!
+    );
+    const containerRef = this.viewContainerRef;
+    containerRef.clear();
+    const dynamicComponent = containerRef.createComponent(componentFactory);
+    Object.assign(dynamicComponent.instance as any, this.args);
+  }
+}
+
+// Live changing of args by controls does not work at the moment. When changing args storybook does not fully
+// reload and therefore does not take into account the change of provider.
+export const WithComponentFactoryResolver: StoryFn = (args) => ({
+  props: args,
+});
+WithComponentFactoryResolver.storyName = 'Custom wrapper ComponentFactoryResolver';
+WithComponentFactoryResolver.argTypes = {
+  name: { control: 'text' },
+  color: { control: 'color' },
+};
+WithComponentFactoryResolver.args = { name: 'Dixie Normous', color: 'chartreuse' };
+WithComponentFactoryResolver.decorators = [
+  moduleMetadata({
+    declarations: [ComponentFactoryWrapperComponent],
+  }),
+  componentWrapperDecorator(ComponentFactoryWrapperComponent, ({ args }) => ({
+    args,
+    componentOutlet: WithoutSelectorComponent,
+  })),
+];

package/template/stories/basics/component-without-selector/without-selector.component.ts

@@ -0,0 +1,30 @@
+import { Component, Inject, InjectionToken, Optional } from '@angular/core';
+
+export const WITHOUT_SELECTOR_DATA = new InjectionToken<{ color: string; name: string }>(
+  'WITHOUT_SELECTOR_DATA'
+);
+
+@Component({
+  template: `My name in color :
+    <div [style.color]="color">{{ name }}</div>
+    <ng-content></ng-content> <ng-content></ng-content>`,
+})
+export class WithoutSelectorComponent {
+  color = '#1e88e5';
+
+  name = 'Joe Bar';
+
+  constructor(
+    @Inject(WITHOUT_SELECTOR_DATA)
+    @Optional()
+    data: {
+      color: string;
+      name: string;
+    } | null
+  ) {
+    if (data) {
+      this.color = data.color;
+      this.name = data.name;
+    }
+  }
+}

package/template/stories/basics/component-without-selector/without-selector.stories.ts

@@ -0,0 +1,30 @@
+import { StoryFn, Meta, moduleMetadata } from '@storybook/angular';
+import { WithoutSelectorComponent, WITHOUT_SELECTOR_DATA } from './without-selector.component';
+
+export default {
+  // title: 'Basics / Component / without selector',
+  component: WithoutSelectorComponent,
+  decorators: [
+    moduleMetadata({
+      entryComponents: [WithoutSelectorComponent],
+    }),
+  ],
+} as Meta;
+
+export const SimpleComponent: StoryFn = () => ({});
+
+// Live changing of args by controls does not work for now. When changing args storybook does not fully
+// reload and therefore does not take into account the change of provider.
+export const WithInjectionTokenAndArgs: StoryFn = (args) => ({
+  props: args,
+  moduleMetadata: {
+    providers: [
+      { provide: WITHOUT_SELECTOR_DATA, useValue: { color: args['color'], name: args['name'] } },
+    ],
+  },
+});
+WithInjectionTokenAndArgs.argTypes = {
+  name: { control: 'text' },
+  color: { control: 'color' },
+};
+WithInjectionTokenAndArgs.args = { name: 'Dixie Normous', color: 'red' };