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

package/template/components/index.js

@@ -0,0 +1,8 @@
+import globalThis from 'global';
+
+import Button from './button.component';
+import Html from './html.component';
+import Pre from './pre.component';
+import Form from './form.component';
+
+globalThis.Components = { Button, Html, Pre, Form };

package/template/components/pre.component.ts

@@ -0,0 +1,29 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'storybook-pre',
+  template: `<pre data-testid="pre" [ngStyle]="style">{{ finalText }}</pre>`,
+})
+export default class PreComponent {
+  /**
+   * Styles to apply to the component
+   */
+  @Input()
+  style?: Object;
+
+  /**
+   * An object to render
+   */
+  @Input()
+  object?: Object;
+
+  /**
+   * The code to render
+   */
+  @Input()
+  text?: string;
+
+  get finalText() {
+    return this.object ? JSON.stringify(this.object, null, 2) : this.text;
+  }
+}

package/template/stories/angular-mdx.stories.mdx

@@ -0,0 +1,25 @@
+import globalThis from 'global';
+import { moduleMetadata } from '@storybook/angular';
+import { Meta, Story, Canvas } from '@storybook/addon-docs';
+
+export const Button = globalThis.Components.Button;
+
+<Meta
+  title="angular/angular-mdx"
+  component={Button}
+  decorators={[moduleMetadata({ declarations: [Button] })]}
+/>
+
+# Angular-specific MDX Stories
+
+<Canvas>
+  <Story name="Angular Story">
+    {{
+      template: `<storybook-framework-button [label]="text" (onClick)="onClick($event)"></storybook-framework-button>`,
+      props: {
+        text: 'hello button',
+        onClick: () => {},
+      },
+    }}
+  </Story>
+</Canvas>

package/template/stories/argTypes/doc-button/doc-button.component.html

@@ -0,0 +1,7 @@
+<button [disabled]="isDisabled" [ngClass]="classes" #buttonRef>
+  <img
+    width="100"
+    src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOS4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAyNTAgMjUwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyNTAgMjUwOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPg0KCS5zdDB7ZmlsbDojREQwMDMxO30NCgkuc3Qxe2ZpbGw6I0MzMDAyRjt9DQoJLnN0MntmaWxsOiNGRkZGRkY7fQ0KPC9zdHlsZT4NCjxnPg0KCTxwb2x5Z29uIGNsYXNzPSJzdDAiIHBvaW50cz0iMTI1LDMwIDEyNSwzMCAxMjUsMzAgMzEuOSw2My4yIDQ2LjEsMTg2LjMgMTI1LDIzMCAxMjUsMjMwIDEyNSwyMzAgMjAzLjksMTg2LjMgMjE4LjEsNjMuMiAJIi8+DQoJPHBvbHlnb24gY2xhc3M9InN0MSIgcG9pbnRzPSIxMjUsMzAgMTI1LDUyLjIgMTI1LDUyLjEgMTI1LDE1My40IDEyNSwxNTMuNCAxMjUsMjMwIDEyNSwyMzAgMjAzLjksMTg2LjMgMjE4LjEsNjMuMiAxMjUsMzAgCSIvPg0KCTxwYXRoIGNsYXNzPSJzdDIiIGQ9Ik0xMjUsNTIuMUw2Ni44LDE4Mi42aDBoMjEuN2gwbDExLjctMjkuMmg0OS40bDExLjcsMjkuMmgwaDIxLjdoMEwxMjUsNTIuMUwxMjUsNTIuMUwxMjUsNTIuMUwxMjUsNTIuMQ0KCQlMMTI1LDUyLjF6IE0xNDIsMTM1LjRIMTA4bDE3LTQwLjlMMTQyLDEzNS40eiIvPg0KPC9nPg0KPC9zdmc+DQo="
+  />
+  {{ label }}
+</button>

package/template/stories/argTypes/doc-button/doc-button.component.scss

@@ -0,0 +1,3 @@
+.btn-primary {
+  background-color: #ff9899;
+}

package/template/stories/argTypes/doc-button/doc-button.component.ts

@@ -0,0 +1,233 @@
+/* eslint-disable no-console */
+/* eslint-disable no-underscore-dangle */
+import {
+  Component,
+  EventEmitter,
+  HostBinding,
+  HostListener,
+  Input,
+  Output,
+  ViewChild,
+  ElementRef,
+} from '@angular/core';
+
+export const exportedConstant = 'An exported constant';
+
+export type ButtonSize = 'small' | 'medium' | 'large' | 'xlarge';
+
+export interface ISomeInterface {
+  one: string;
+  two: boolean;
+  three: any[];
+}
+
+export enum ButtonAccent {
+  'Normal' = 'Normal',
+  'High' = 'High',
+}
+
+/**
+ * This is a simple button that demonstrates various JSDoc handling in Storybook Docs for Angular.
+ *
+ * It supports [markdown](https://en.wikipedia.org/wiki/Markdown), so you can embed formatted text,
+ * like **bold**, _italic_, and `inline code`.
+ *
+ * > How you like dem apples?! It's never been easier to document all your components.
+ *
+ * @string Hello world
+ * @link [Example](http://example.com)
+ * @code `ThingThing`
+ * @html <span class="badge">aaa</span>
+ */
+@Component({
+  selector: 'my-button',
+  templateUrl: './doc-button.component.html',
+  styleUrls: ['./doc-button.component.scss'],
+})
+export class DocButtonComponent<T> {
+  @ViewChild('buttonRef', { static: false }) buttonRef!: ElementRef;
+
+  /** Test default value. */
+  @Input()
+  public theDefaultValue = 'Default value in component';
+
+  /**
+   * Setting default value here because compodoc won't get the default value for accessors
+   * @default Another default value
+   * */
+  @Input()
+  get anotherDefaultValue() {
+    return this._anotherDefaultValue;
+  }
+
+  set anotherDefaultValue(v: string) {
+    this._anotherDefaultValue = v;
+  }
+
+  _anotherDefaultValue = 'Another default value';
+
+  /** Test null default value. */
+  @Input()
+  public aNullValue: string | null = null;
+
+  /** Test null default value. */
+  @Input()
+  // @ts-expect-error intentionally undefined
+  public anUndefinedValue;
+
+  /** Test numeric default value. */
+  @Input()
+  public aNumericValue = 123;
+
+  /** Appearance style of the button. */
+  @Input()
+  public appearance: 'primary' | 'secondary' = 'secondary';
+
+  /** Sets the button to a disabled state. */
+  @Input()
+  public isDisabled = false;
+
+  /** Specify the accent-type of the button */
+  @Input()
+  public accent: ButtonAccent = ButtonAccent.Normal;
+
+  /** Specifies some arbitrary object. This comment is to test certain chars like apostrophes - it's working */
+  @Input() public someDataObject!: ISomeInterface;
+
+  /**
+   * The inner text of the button.
+   *
+   * @required
+   */
+  @Input()
+  public label!: string;
+
+  /** Size of the button. */
+  @Input()
+  public size?: ButtonSize = 'medium';
+
+  /**
+   * Some input you shouldn't use.
+   *
+   * @deprecated
+   */
+  @Input()
+  public somethingYouShouldNotUse = false;
+
+  /**
+   * Handler to be called when the button is clicked by a user.
+   *
+   * Will also block the emission of the event if `isDisabled` is true.
+   */
+  @Output()
+  public onClick = new EventEmitter<Event>();
+
+  /**
+   * This is an internal method that we don't want to document and have added the `ignore` annotation to.
+   *
+   * @ignore
+   */
+  public handleClick(event: Event) {
+    event.stopPropagation();
+
+    if (!this.isDisabled) {
+      this.onClick.emit(event);
+    }
+  }
+
+  private _inputValue = 'some value';
+
+  /** Setter for `inputValue` that is also an `@Input`. */
+  @Input()
+  public set inputValue(value: string) {
+    this._inputValue = value;
+  }
+
+  /** Getter for `inputValue`. */
+  public get inputValue() {
+    return this._inputValue;
+  }
+
+  @HostListener('click', ['$event'])
+  onClickListener(event: Event) {
+    console.log('button', event.target);
+    this.handleClick(event);
+  }
+
+  @HostBinding('class.focused') focus = false;
+
+  /**
+   * Returns all the CSS classes for the button.
+   *
+   * @ignore
+   */
+  public get classes(): string[] {
+    return [this.appearance, this.size]
+      .filter((_class) => !!_class)
+      .map((_class) => `btn-${_class}`);
+  }
+
+  /**
+   * @ignore
+   */
+  public ignoredProperty = 'Ignore me';
+
+  /** Public value. */
+  public internalProperty = 'Public hello';
+
+  /** Private value. */
+  private _value = 'Private hello';
+
+  /** Set the private value. */
+  public set value(value: string | number) {
+    this._value = `${value}`;
+  }
+
+  /** Get the private value. */
+  public get value(): string | number {
+    return this._value;
+  }
+
+  /**
+   * An internal calculation method which adds `x` and `y` together.
+   *
+   * @param x Some number you'd like to use.
+   * @param y Some other number or string you'd like to use, will have `parseInt()` applied before calculation.
+   */
+  public calc(x: number, y: string | number): number {
+    return x + parseInt(`${y}`, 10);
+  }
+
+  /** A public method using an interface. */
+  public publicMethod(things: ISomeInterface) {
+    console.log(things);
+  }
+
+  /**
+   * A protected method.
+   *
+   * @param id Some `id`.
+   */
+  protected protectedMethod(id?: number) {
+    console.log(id);
+  }
+
+  /**
+   * A private method.
+   *
+   * @param password Some `password`.
+   */
+  private privateMethod(password: string) {
+    console.log(password);
+  }
+
+  @Input('showKeyAlias')
+  public showKey!: keyof T;
+
+  @Input()
+  public set item(item: T[]) {
+    this.processedItem = item;
+  }
+
+  public processedItem!: T[];
+}

package/template/stories/argTypes/doc-button/doc-button.stories.ts

@@ -0,0 +1,24 @@
+import { Args } from '@storybook/angular';
+import { DocButtonComponent } from './doc-button.component';
+
+export default {
+  component: DocButtonComponent,
+};
+
+export const Basic = (args: Args) => ({
+  props: args,
+});
+Basic.args = { label: 'Args test', isDisabled: false };
+Basic.ArgTypes = {
+  theDefaultValue: {
+    table: {
+      defaultValue: { summary: 'Basic default value' },
+    },
+  },
+};
+
+export const WithTemplate = (args: Args) => ({
+  props: args,
+  template: '<my-button [label]="label" [appearance]="appearance"></my-button>',
+});
+WithTemplate.args = { label: 'Template test', appearance: 'primary' };

package/template/stories/argTypes/doc-directive/doc-directive.directive.ts

@@ -0,0 +1,24 @@
+import { ElementRef, AfterViewInit, Directive, Input } from '@angular/core';
+
+/**
+ * This is an Angular Directive
+ * example that has a Prop Table.
+ */
+@Directive({
+  selector: '[docDirective]',
+})
+export class DocDirective implements AfterViewInit {
+  constructor(private ref: ElementRef) {}
+
+  /**
+   * Will apply gray background color
+   * if set to true.
+   */
+  @Input() hasGrayBackground = false;
+
+  ngAfterViewInit(): void {
+    if (this.hasGrayBackground) {
+      this.ref.nativeElement.style = 'background-color: lightgray';
+    }
+  }
+}

package/template/stories/argTypes/doc-directive/doc-directive.stories.ts

@@ -0,0 +1,14 @@
+import { DocDirective } from './doc-directive.directive';
+
+export default {
+  component: DocDirective,
+};
+
+const modules = {
+  declarations: [DocDirective],
+};
+
+export const Basic = () => ({
+  moduleMetadata: modules,
+  template: '<div docDirective [hasGrayBackground]="true"><h1>DocDirective</h1></div>',
+});

package/template/stories/argTypes/doc-injectable/doc-injectable.service.ts

@@ -0,0 +1,27 @@
+import { Injectable } from '@angular/core';
+import { HttpHeaders } from '@angular/common/http';
+
+/**
+ * This is an Angular Injectable
+ * example that has a Prop Table.
+ */
+@Injectable({
+  providedIn: 'root',
+})
+export class DocInjectableService {
+  /**
+   * Auth headers to use.
+   */
+  auth: any;
+
+  constructor() {
+    this.auth = new HttpHeaders({ 'Content-Type': 'application/json' });
+  }
+
+  /**
+   * Get posts from Backend.
+   */
+  getPosts(): unknown[] {
+    return [];
+  }
+}

package/template/stories/argTypes/doc-injectable/doc-injectable.stories.ts

@@ -0,0 +1,17 @@
+import { DocInjectableService } from './doc-injectable.service';
+
+export default {
+  component: DocInjectableService,
+  parameters: {
+    controls: { hideNoControlsWarning: true },
+  },
+};
+
+const modules = {
+  provider: [DocInjectableService],
+};
+
+export const Basic = () => ({
+  moduleMetadata: modules,
+  template: '<div><h1>DocInjectable</h1></div>',
+});

package/template/stories/argTypes/doc-pipe/doc-pipe.pipe.ts

@@ -0,0 +1,18 @@
+import { PipeTransform, Pipe } from '@angular/core';
+
+/**
+ * This is an Angular Pipe
+ * example that has a Prop Table.
+ */
+@Pipe({
+  name: 'docPipe',
+})
+export class DocPipe implements PipeTransform {
+  /**
+   * Transforms a string into uppercase.
+   * @param value string
+   */
+  transform(value: string): string {
+    return value?.toUpperCase();
+  }
+}

package/template/stories/argTypes/doc-pipe/doc-pipe.stories.ts

@@ -0,0 +1,17 @@
+import { DocPipe } from './doc-pipe.pipe';
+
+export default {
+  component: DocPipe,
+  parameters: {
+    controls: { hideNoControlsWarning: true },
+  },
+};
+
+const modules = {
+  declarations: [DocPipe],
+};
+
+export const Basic = () => ({
+  moduleMetadata: modules,
+  template: `<div><h1>{{ 'DocPipe' | docPipe }}</h1></div>`,
+});

package/template/stories/basics/README.stories.mdx

@@ -0,0 +1,7 @@
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title="stories / frameworks / angular / basics / README" />
+
+# Examples for Angular features
+
+These examples serve to highlight the right Storybook operation for basics Angular features

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>