@storybook/angular 7.3.2 → 7.4.0-alpha.1

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

@@ -1,12 +0,0 @@
-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

@@ -1,11 +0,0 @@
-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

@@ -1,13 +0,0 @@
-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

@@ -1,58 +0,0 @@
-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

@@ -1,29 +0,0 @@
-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

@@ -1,40 +0,0 @@
-import { OnDestroy, OnInit, Component } from '@angular/core';
-import { Meta, StoryObj } 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: StoryObj = {};

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

@@ -1,21 +0,0 @@
-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

@@ -1,21 +0,0 @@
-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

@@ -1,31 +0,0 @@
-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

@@ -1,10 +0,0 @@
-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

@@ -1,10 +0,0 @@
-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

@@ -1,7 +0,0 @@
-<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

@@ -1,26 +0,0 @@
-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

@@ -1,28 +0,0 @@
-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

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

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

@@ -1,5 +0,0 @@
-<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

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

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

@@ -1,10 +0,0 @@
-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

@@ -1,8 +0,0 @@
-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

@@ -1,73 +0,0 @@
-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: 'Color', 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

@@ -1,71 +0,0 @@
-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: 'Color', color: 'chartreuse' };
-WithComponentFactoryResolver.decorators = [
-  moduleMetadata({
-    declarations: [ComponentFactoryWrapperComponent],
-  }),
-  componentWrapperDecorator(ComponentFactoryWrapperComponent, ({ args }) => ({
-    args,
-    componentOutlet: WithoutSelectorComponent,
-  })),
-];

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

@@ -1,30 +0,0 @@
-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

@@ -1,30 +0,0 @@
-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: 'Color', color: 'red' };

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

@@ -1,3 +0,0 @@
-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

@@ -1,29 +0,0 @@
-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

@@ -1,60 +0,0 @@
-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;
-  }
-}