@storybook/angular 7.3.2 → 7.4.0-alpha.1

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

@@ -1,232 +0,0 @@
-/* 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()
-  public anUndefinedValue: undefined;
-
-  /** 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

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

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

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

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

@@ -1,14 +0,0 @@
-import { DocInjectableService } from './doc-injectable.service';
-
-export default {
-  component: DocInjectableService,
-};
-
-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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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