@storybook/angular 7.0.0-alpha.8 → 7.0.0-beta.1

package/template/stories/basics/angular-forms/customControlValueAccessor/custom-cva-component.stories.ts

@@ -0,0 +1,27 @@
+import { FormsModule } from '@angular/forms';
+import { Meta, StoryFn, moduleMetadata } from '@storybook/angular';
+import { CustomCvaComponent } from './custom-cva.component';
+
+export default {
+  // title: 'Basics / Angular forms / ControlValueAccessor',
+  component: CustomCvaComponent,
+  decorators: [
+    moduleMetadata({
+      imports: [FormsModule],
+    }),
+    (storyFn) => {
+      const story = storyFn();
+      console.log(story);
+      return story;
+    },
+  ],
+} as Meta;
+
+export const SimpleInput: StoryFn = () => ({
+  props: {
+    ngModel: 'Type anything',
+    ngModelChange: () => {},
+  },
+});
+
+SimpleInput.storyName = 'Simple input';

package/template/stories/basics/angular-forms/customControlValueAccessor/custom-cva.component.ts

@@ -0,0 +1,57 @@
+import { Component, forwardRef } from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+
+const NOOP = () => {};
+
+@Component({
+  selector: 'storybook-custom-cva-component',
+  template: `
+    <div>{{ value }}</div>
+    <input type="text" [(ngModel)]="value" />
+  `,
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => CustomCvaComponent),
+      multi: true,
+    },
+  ],
+})
+export class CustomCvaComponent implements ControlValueAccessor {
+  disabled?: boolean;
+
+  protected onChange: (value: any) => void = NOOP;
+
+  protected onTouch: () => void = NOOP;
+
+  protected internalValue: any;
+
+  get value(): any {
+    return this.internalValue;
+  }
+
+  set value(value: any) {
+    if (value !== this.internalValue) {
+      this.internalValue = value;
+      this.onChange(value);
+    }
+  }
+
+  writeValue(value: any): void {
+    if (value !== this.internalValue) {
+      this.internalValue = value;
+    }
+  }
+
+  registerOnChange(fn: any): void {
+    this.onChange = fn;
+  }
+
+  registerOnTouched(fn: any): void {
+    this.onTouch = fn;
+  }
+
+  setDisabledState(isDisabled: boolean): void {
+    this.disabled = isDisabled;
+  }
+}

package/template/stories/basics/component-with-complex-selectors/attribute-selector.component.ts

@@ -0,0 +1,19 @@
+import { ComponentFactoryResolver, ElementRef, Component } from '@angular/core';
+
+@Component({
+  selector: 'storybook-attribute-selector[foo=bar]',
+  template: `<h3>Attribute selector</h3>
+    Selector: {{ selectors }} <br />
+    Generated template: {{ generatedTemplate }}`,
+})
+export class AttributeSelectorComponent {
+  generatedTemplate!: string;
+
+  selectors!: string;
+
+  constructor(public el: ElementRef, private resolver: ComponentFactoryResolver) {
+    const factory = this.resolver.resolveComponentFactory(AttributeSelectorComponent);
+    this.selectors = factory.selector;
+    this.generatedTemplate = el.nativeElement.outerHTML;
+  }
+}

package/template/stories/basics/component-with-complex-selectors/attribute-selectors.component.stories.ts

@@ -0,0 +1,8 @@
+import { AttributeSelectorComponent } from './attribute-selector.component';
+
+export default {
+  // title: 'Basics / Component / With Complex Selectors',
+  component: AttributeSelectorComponent,
+};
+
+export const AttributeSelectors = {};

package/template/stories/basics/component-with-complex-selectors/class-selector.component.stories.ts

@@ -0,0 +1,8 @@
+import { ClassSelectorComponent } from './class-selector.component';
+
+export default {
+  // title: 'Basics / Component / With Complex Selectors',
+  component: ClassSelectorComponent,
+};
+
+export const ClassSelectors = {};

package/template/stories/basics/component-with-complex-selectors/class-selector.component.ts

@@ -0,0 +1,19 @@
+import { ComponentFactoryResolver, ElementRef, Component } from '@angular/core';
+
+@Component({
+  selector: 'storybook-class-selector.foo, storybook-class-selector.bar',
+  template: `<h3>Class selector</h3>
+    Selector: {{ selectors }} <br />
+    Generated template: {{ generatedTemplate }}`,
+})
+export class ClassSelectorComponent {
+  generatedTemplate!: string;
+
+  selectors!: string;
+
+  constructor(public el: ElementRef, private resolver: ComponentFactoryResolver) {
+    const factory = this.resolver.resolveComponentFactory(ClassSelectorComponent);
+    this.selectors = factory.selector;
+    this.generatedTemplate = el.nativeElement.outerHTML;
+  }
+}

package/template/stories/basics/component-with-complex-selectors/multiple-class-selector.component.stories.ts

@@ -0,0 +1,8 @@
+import { MultipleClassSelectorComponent } from './multiple-selector.component';
+
+export default {
+  // title: 'Basics / Component / With Complex Selectors',
+  component: MultipleClassSelectorComponent,
+};
+
+export const MultipleClassSelectors = {};

package/template/stories/basics/component-with-complex-selectors/multiple-selector.component.stories.ts

@@ -0,0 +1,8 @@
+import { MultipleSelectorComponent } from './multiple-selector.component';
+
+export default {
+  // title: 'Basics / Component / With Complex Selectors',
+  component: MultipleSelectorComponent,
+};
+
+export const MultipleSelectors = {};

package/template/stories/basics/component-with-complex-selectors/multiple-selector.component.ts

@@ -0,0 +1,37 @@
+import { ComponentFactoryResolver, ElementRef, Component } from '@angular/core';
+
+@Component({
+  selector: 'storybook-multiple-selector, storybook-multiple-selector2',
+  template: `<h3>Multiple selector</h3>
+    Selector: {{ selectors }} <br />
+    Generated template: {{ generatedTemplate }}`,
+})
+export class MultipleSelectorComponent {
+  generatedTemplate!: string;
+
+  selectors!: string;
+
+  constructor(public el: ElementRef, private resolver: ComponentFactoryResolver) {
+    const factory = this.resolver.resolveComponentFactory(MultipleClassSelectorComponent);
+    this.selectors = factory.selector;
+    this.generatedTemplate = el.nativeElement.outerHTML;
+  }
+}
+
+@Component({
+  selector: 'storybook-button, button[foo], .button[foo], button[baz]',
+  template: `<h3>Multiple selector</h3>
+    Selector: {{ selectors }} <br />
+    Generated template: {{ generatedTemplate }}`,
+})
+export class MultipleClassSelectorComponent {
+  generatedTemplate!: string;
+
+  selectors!: string;
+
+  constructor(public el: ElementRef, private resolver: ComponentFactoryResolver) {
+    const factory = this.resolver.resolveComponentFactory(MultipleClassSelectorComponent);
+    this.selectors = factory.selector;
+    this.generatedTemplate = el.nativeElement.outerHTML;
+  }
+}

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

@@ -0,0 +1,8 @@
+<div>
+  <div>unionType: {{ unionType }}</div>
+  <div>aliasedUnionType: {{ aliasedUnionType }}</div>
+  <div>enumNumeric: {{ enumNumeric }}</div>
+  <div>enumNumericInitial: {{ enumNumericInitial }}</div>
+  <div>enumStrings: {{ enumStrings }}</div>
+  <div>enumAlias: {{ enumAlias }}</div>
+</div>

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