@storybook/angular 7.0.0-alpha.7 → 7.0.0-beta.0

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' };

package/template/stories/basics/ng-module/angular-src/chip-color.token.ts

@@ -0,0 +1,3 @@
+import { InjectionToken } from '@angular/core';
+
+export const CHIP_COLOR = new InjectionToken<string>('chip-color');

package/template/stories/basics/ng-module/angular-src/chip-text.pipe.ts

@@ -0,0 +1,29 @@
+import { PipeTransform, Pipe } from '@angular/core';
+
+@Pipe({
+  name: 'chipText',
+})
+export class ChipTextPipe implements PipeTransform {
+  transform(value: string): string {
+    return Array.from(value)
+      .map((char) => this.accentVowel(char))
+      .join('');
+  }
+
+  accentVowel(char: string): string {
+    switch (char) {
+      case 'a':
+        return 'á';
+      case 'e':
+        return 'é';
+      case 'i':
+        return 'í';
+      case 'o':
+        return 'ó';
+      case 'u':
+        return 'ú';
+      default:
+        return char;
+    }
+  }
+}

package/template/stories/basics/ng-module/angular-src/chip.component.ts

@@ -0,0 +1,60 @@
+import { Component, Input, Output, EventEmitter, Inject, HostBinding } from '@angular/core';
+import { CHIP_COLOR } from './chip-color.token';
+
+@Component({
+  selector: 'storybook-chip',
+  template: `
+    <span class="text">{{ displayText | chipText }}</span>
+    <div class="remove" (click)="removeClicked.emit()">
+      <span class="x">✕</span>
+    </div>
+  `,
+  styles: [
+    `
+      :host {
+        display: inline-flex;
+        cursor: default;
+        align-items: center;
+        justify-content: center;
+        padding: 0.2rem 0.5rem;
+        border-radius: 1rem;
+        border: solid 0.1rem transparent;
+      }
+      :host:hover {
+        border-color: black;
+      }
+      .text {
+        font-family: inherit;
+      }
+      .remove {
+        margin-left: 1rem;
+        background-color: lightgrey;
+        border-radius: 50%;
+        width: 1rem;
+        height: 1rem;
+        text-align: center;
+      }
+      .remove:hover {
+        background-color: palevioletred;
+      }
+      .x {
+        display: inline-block;
+        color: #eeeeee;
+        text-align: center;
+        vertical-align: baseline;
+        line-height: 1rem;
+      }
+    `,
+  ],
+})
+export class ChipComponent {
+  @Input() displayText?: string;
+
+  @Output() removeClicked = new EventEmitter();
+
+  @HostBinding('style.background-color') backgroundColor: string;
+
+  constructor(@Inject(CHIP_COLOR) chipColor: string) {
+    this.backgroundColor = chipColor;
+  }
+}

package/template/stories/basics/ng-module/angular-src/chips-group.component.ts

@@ -0,0 +1,49 @@
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+
+@Component({
+  selector: 'storybook-chips-group',
+  template: `
+    <storybook-chip
+      *ngFor="let chip of chips"
+      class="chip"
+      [displayText]="chip.text"
+      (removeClicked)="removeChipClick.emit(chip.id)"
+    ></storybook-chip>
+    <div *ngIf="chips.length > 1" class="remove-all" (click)="removeAllChipsClick.emit()">
+      Remove All
+    </div>
+  `,
+  styles: [
+    `
+      :host {
+        display: flex;
+        align-content: center;
+        padding: 0.5rem;
+        background-color: lightgrey;
+        border-radius: 0.5rem;
+        width: fit-content;
+      }
+      .chip:not(:first-of-type) {
+        margin-left: 0.5rem;
+      }
+      .remove-all {
+        margin-left: 0.5rem;
+        padding: 0.2rem 0.5rem;
+        border: solid 0.1rem #eeeeee;
+      }
+      .remove-all:hover {
+        background-color: palevioletred;
+      }
+    `,
+  ],
+})
+export class ChipsGroupComponent {
+  @Input() chips?: {
+    id: number;
+    text: string;
+  }[];
+
+  @Output() removeChipClick = new EventEmitter<number>();
+
+  @Output() removeAllChipsClick = new EventEmitter();
+}

package/template/stories/basics/ng-module/angular-src/chips.module.ts

@@ -0,0 +1,31 @@
+import { ModuleWithProviders, NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ChipComponent } from './chip.component';
+import { ChipsGroupComponent } from './chips-group.component';
+import { ChipTextPipe } from './chip-text.pipe';
+import { CHIP_COLOR } from './chip-color.token';
+
+@NgModule({
+  imports: [CommonModule],
+  exports: [ChipsGroupComponent, ChipComponent],
+  declarations: [ChipsGroupComponent, ChipComponent, ChipTextPipe],
+  providers: [
+    {
+      provide: CHIP_COLOR,
+      useValue: '#eeeeee',
+    },
+  ],
+})
+export class ChipsModule {
+  public static forRoot(): ModuleWithProviders<ChipsModule> {
+    return {
+      ngModule: ChipsModule,
+      providers: [
+        {
+          provide: CHIP_COLOR,
+          useValue: '#ff5454',
+        },
+      ],
+    };
+  }
+}

package/template/stories/basics/ng-module/import-module-for-root.stories.ts

@@ -0,0 +1,50 @@
+import { StoryFn, Meta, moduleMetadata } from '@storybook/angular';
+import { ChipsModule } from './angular-src/chips.module';
+import { ChipsGroupComponent } from './angular-src/chips-group.component';
+import { CHIP_COLOR } from './angular-src/chip-color.token';
+
+export default {
+  // title: 'Basics / NgModule / forRoot() pattern',
+  component: ChipsGroupComponent,
+  decorators: [
+    moduleMetadata({
+      imports: [ChipsModule.forRoot()],
+    }),
+  ],
+  args: {
+    chips: [
+      {
+        id: 1,
+        text: 'Chip 1',
+      },
+      {
+        id: 2,
+        text: 'Chip 2',
+      },
+    ],
+  },
+  argTypes: {
+    removeChipClick: { action: 'Remove chip' },
+    removeAllChipsClick: { action: 'Remove all chips clicked' },
+  },
+} as Meta;
+
+const Template = (): StoryFn => (args) => ({
+  props: args,
+});
+
+export const Base = Template();
+Base.storyName = 'Chips group';
+
+export const WithCustomProvider = Template();
+WithCustomProvider.decorators = [
+  moduleMetadata({
+    providers: [
+      {
+        provide: CHIP_COLOR,
+        useValue: 'yellow',
+      },
+    ],
+  }),
+];
+WithCustomProvider.storyName = 'Chips group with overridden provider';

package/template/stories/basics/ng-module/import-module.stories.ts

@@ -0,0 +1,46 @@
+import { StoryFn, Meta, moduleMetadata } from '@storybook/angular';
+import { ChipsModule } from './angular-src/chips.module';
+import { ChipsGroupComponent } from './angular-src/chips-group.component';
+import { ChipComponent } from './angular-src/chip.component';
+
+export default {
+  // title: 'Basics / NgModule / Module with multiple component',
+  component: ChipsGroupComponent,
+  decorators: [
+    moduleMetadata({
+      imports: [ChipsModule],
+    }),
+  ],
+} as Meta;
+
+export const ChipsGroup: StoryFn = (args) => ({
+  component: ChipsGroupComponent,
+  props: args,
+});
+ChipsGroup.args = {
+  chips: [
+    {
+      id: 1,
+      text: 'Chip 1',
+    },
+    {
+      id: 2,
+      text: 'Chip 2',
+    },
+  ],
+};
+ChipsGroup.argTypes = {
+  removeChipClick: { action: 'Remove chip' },
+  removeAllChipsClick: { action: 'Remove all chips clicked' },
+};
+
+export const Chip: StoryFn = (args) => ({
+  component: ChipComponent,
+  props: args,
+});
+Chip.args = {
+  displayText: 'Chip',
+};
+Chip.argTypes = {
+  removeClicked: { action: 'Remove icon clicked' },
+};

package/template/stories/button.component.ts

@@ -0,0 +1,26 @@
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+
+@Component({
+  selector: 'storybook-button-component',
+  template: ` <button (click)="onClick.emit($event)">{{ text }}</button> `,
+  styles: [
+    `
+      button {
+        border: 1px solid #eee;
+        border-radius: 3px;
+        background-color: #ffffff;
+        cursor: pointer;
+        font-size: 15px;
+        padding: 3px 10px;
+        margin: 10px;
+      }
+    `,
+  ],
+})
+export default class ButtonComponent {
+  @Input()
+  text = '';
+
+  @Output()
+  onClick = new EventEmitter<any>();
+}

package/template/stories/core/README.stories.mdx

@@ -0,0 +1,7 @@
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title="stories / frameworks / angular / core / README" />
+
+# Examples for Storybook native features
+
+These examples highlight Storybook's native functionality. It does not require any special addon

package/template/stories/core/decorators/componentWrapperDecorator/child.component.ts

@@ -0,0 +1,20 @@
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+
+@Component({
+  selector: 'child-component',
+  template: `
+    Child<br />
+    Input text: {{ childText }} <br />
+    Output : <button (click)="onClickChild.emit($event)">Click here !</button> <br />
+    Private text: {{ childPrivateText }} <br />
+  `,
+})
+export default class ChildComponent {
+  @Input()
+  childText = '';
+
+  childPrivateText = '';
+
+  @Output()
+  onClickChild = new EventEmitter<any>();
+}

package/template/stories/core/decorators/componentWrapperDecorator/decorators.stories.ts

@@ -0,0 +1,117 @@
+// your-component.stories.ts
+
+import { Args, Meta, Story, componentWrapperDecorator, moduleMetadata } from '@storybook/angular';
+import ChildComponent from './child.component';
+import ParentComponent from './parent.component';
+
+export default {
+  // title: 'Core / Decorators / ComponentWrapperDecorator',
+  component: ChildComponent,
+  decorators: [
+    componentWrapperDecorator(
+      (story) => `Grandparent<br><div style="margin: 3em; border:solid;">${story}</div>`
+    ),
+  ],
+  args: { childText: 'Child text', childPrivateText: 'Child private text' },
+  argTypes: { onClickChild: { action: 'onClickChild' } },
+} as Meta;
+
+export const WithTemplate = (args: Args) => ({
+  template: `Child Template`,
+  props: {
+    ...args,
+  },
+});
+
+export const WithComponent = (args: Args) => ({
+  props: {
+    ...args,
+  },
+});
+
+export const WithLegacyComponent = (args: Args) => ({
+  component: ChildComponent,
+  props: {
+    ...args,
+  },
+});
+
+export const WithComponentWrapperDecorator = (args: Args) => ({
+  component: ChildComponent,
+  props: {
+    ...args,
+  },
+});
+WithComponentWrapperDecorator.decorators = [
+  moduleMetadata({ declarations: [ParentComponent] }),
+  componentWrapperDecorator(ParentComponent),
+];
+
+export const WithComponentWrapperDecoratorAndProps = (args: Args) => ({
+  component: ChildComponent,
+  props: {
+    ...args,
+  },
+});
+WithComponentWrapperDecoratorAndProps.decorators = [
+  moduleMetadata({ declarations: [ParentComponent] }),
+  componentWrapperDecorator(ParentComponent, {
+    parentText: 'Parent text',
+    onClickParent: () => {
+      console.log('onClickParent');
+    },
+  }),
+];
+
+export const WithComponentWrapperDecoratorAndArgs = (args: Args) => ({
+  component: ChildComponent,
+  props: {
+    ...args,
+  },
+});
+WithComponentWrapperDecoratorAndArgs.argTypes = {
+  parentText: { control: { type: 'text' } },
+  onClickParent: { action: 'onClickParent' },
+};
+WithComponentWrapperDecoratorAndArgs.decorators = [
+  moduleMetadata({ declarations: [ParentComponent] }),
+  componentWrapperDecorator(ParentComponent, ({ args }) => ({
+    parentText: args.parentText,
+    onClickParent: args.onClickParent,
+  })),
+];
+
+export const WithCustomDecorator = (args: Args) => ({
+  template: `Child Template`,
+  props: {
+    ...args,
+  },
+});
+WithCustomDecorator.decorators = [
+  (storyFunc) => {
+    const story = storyFunc();
+
+    return {
+      ...story,
+      template: `Custom Decorator <div style="margin: 3em">${story.template}</div>`,
+    };
+  },
+] as Story['decorators'];
+
+export const AngularLegacyRendering = (args: Args) => ({
+  template: `Child Template`,
+  props: {
+    ...args,
+  },
+});
+AngularLegacyRendering.parameters = { angularLegacyRendering: true };
+AngularLegacyRendering.decorators = [
+  (storyFunc) => {
+    const story = storyFunc();
+
+    return {
+      ...story,
+      template: `Custom Decorator <div style="margin: 3em">${story.template}</div>`,
+    };
+  },
+] as Story['decorators'];

package/template/stories/core/decorators/componentWrapperDecorator/parent.component.ts

@@ -0,0 +1,18 @@
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+
+@Component({
+  selector: 'parent-component',
+  template: `
+    Parent<br />
+    Input text: {{ parentText }} <br />
+    Output : <button (click)="onClickParent.emit($event)">Click here !</button> <br />
+    <div style="margin: 3em; border:solid;"><ng-content></ng-content></div>
+  `,
+})
+export default class ParentComponent {
+  @Input()
+  parentText = '';
+
+  @Output()
+  onClickParent = new EventEmitter<any>();
+}