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

package/template/cli/page.component.ts

@@ -0,0 +1,77 @@
+import { Component } from '@angular/core';
+import type { User } from './User';
+
+@Component({
+  selector: 'storybook-page',
+  template: `<article>
+    <storybook-header
+      [user]="user"
+      (onLogout)="doLogout()"
+      (onLogin)="doLogin()"
+      (onCreateAccount)="doCreateAccount()"
+    ></storybook-header>
+    <section>
+      <h2>Pages in Storybook</h2>
+      <p>
+        We recommend building UIs with a
+        <a href="https://componentdriven.org" target="_blank" rel="noopener noreferrer">
+          <strong>component-driven</strong>
+        </a>
+        process starting with atomic components and ending with pages.
+      </p>
+      <p>
+        Render pages with mock data. This makes it easy to build and review page states without
+        needing to navigate to them in your app. Here are some handy patterns for managing page data
+        in Storybook:
+      </p>
+      <ul>
+        <li>
+          Use a higher-level connected component. Storybook helps you compose such data from the
+          "args" of child component stories
+        </li>
+        <li>
+          Assemble data in the page component from your services. You can mock these services out
+          using Storybook.
+        </li>
+      </ul>
+      <p>
+        Get a guided tutorial on component-driven development at
+        <a href="https://storybook.js.org/tutorials/" target="_blank" rel="noopener noreferrer">
+          Storybook tutorials
+        </a>
+        . Read more in the
+        <a href="https://storybook.js.org/docs" target="_blank" rel="noopener noreferrer"> docs </a>
+        .
+      </p>
+      <div class="tip-wrapper">
+        <span class="tip">Tip</span> Adjust the width of the canvas with the
+        <svg width="10" height="10" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
+          <g fill="none" fillRule="evenodd">
+            <path
+              d="M1.5 5.2h4.8c.3 0 .5.2.5.4v5.1c-.1.2-.3.3-.4.3H1.4a.5.5 0 01-.5-.4V5.7c0-.3.2-.5.5-.5zm0-2.1h6.9c.3 0 .5.2.5.4v7a.5.5 0 01-1 0V4H1.5a.5.5 0 010-1zm0-2.1h9c.3 0 .5.2.5.4v9.1a.5.5 0 01-1 0V2H1.5a.5.5 0 010-1zm4.3 5.2H2V10h3.8V6.2z"
+              id="a"
+              fill="#999"
+            />
+          </g>
+        </svg>
+        Viewports addon in the toolbar
+      </div>
+    </section>
+  </article>`,
+  styleUrls: ['./page.css'],
+})
+export default class PageComponent {
+  user: User | null = null;
+
+  doLogout() {
+    this.user = null;
+  }
+
+  doLogin() {
+    this.user = { name: 'Jane Doe' };
+  }
+
+  doCreateAccount() {
+    this.user = { name: 'Jane Doe' };
+  }
+}

package/template/components/button.component.ts

@@ -0,0 +1,54 @@
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+
+@Component({
+  // Needs to be a different name to the CLI template button
+  selector: 'storybook-framework-button',
+  template: ` <button
+    type="button"
+    (click)="onClick.emit($event)"
+    [ngClass]="classes"
+    [ngStyle]="{ 'background-color': backgroundColor }"
+  >
+    {{ label }}
+  </button>`,
+  styleUrls: ['./button.css'],
+})
+export default class FrameworkButtonComponent {
+  /**
+   * Is this the principal call to action on the page?
+   */
+  @Input()
+  primary = false;
+
+  /**
+   * What background color to use
+   */
+  @Input()
+  backgroundColor?: string;
+
+  /**
+   * How large should the button be?
+   */
+  @Input()
+  size: 'small' | 'medium' | 'large' = 'medium';
+
+  /**
+   * Button contents
+   *
+   * @required
+   */
+  @Input()
+  label = 'Button';
+
+  /**
+   * Optional click handler
+   */
+  @Output()
+  onClick = new EventEmitter<Event>();
+
+  public get classes(): string[] {
+    const mode = this.primary ? 'storybook-button--primary' : 'storybook-button--secondary';
+
+    return ['storybook-button', `storybook-button--${this.size}`, mode];
+  }
+}

package/template/components/button.css

@@ -0,0 +1,30 @@
+.storybook-button {
+  font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  font-weight: 700;
+  border: 0;
+  border-radius: 3em;
+  cursor: pointer;
+  display: inline-block;
+  line-height: 1;
+}
+.storybook-button--primary {
+  color: white;
+  background-color: #1ea7fd;
+}
+.storybook-button--secondary {
+  color: #333;
+  background-color: transparent;
+  box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset;
+}
+.storybook-button--small {
+  font-size: 12px;
+  padding: 10px 16px;
+}
+.storybook-button--medium {
+  font-size: 14px;
+  padding: 11px 20px;
+}
+.storybook-button--large {
+  font-size: 16px;
+  padding: 12px 24px;
+}

package/template/components/form.component.ts

@@ -0,0 +1,37 @@
+import { Component, Output, EventEmitter } from '@angular/core';
+
+@Component({
+  selector: 'storybook-form',
+  template: `
+    <form id="interaction-test-form" (submit)="handleSubmit($event)">
+      <label>
+        Enter Value
+        <input type="text" data-testid="value" [value]="value" required />
+      </label>
+      <button type="submit">Submit</button>
+      <p *ngIf="complete">Completed!!</p>
+    </form>
+  `,
+})
+export default class FormComponent {
+  /**
+   * Optional success handler
+   */
+  @Output()
+  onSuccess = new EventEmitter<string>();
+
+  value = '';
+
+  complete = false;
+
+  handleSubmit(event: SubmitEvent) {
+    event.preventDefault();
+    this.onSuccess.emit(this.value);
+    setTimeout(() => {
+      this.complete = true;
+    }, 500);
+    setTimeout(() => {
+      this.complete = false;
+    }, 1500);
+  }
+}

package/template/components/html.component.ts

@@ -0,0 +1,22 @@
+import { Component, Input } from '@angular/core';
+import { DomSanitizer } from '@angular/platform-browser';
+
+@Component({
+  selector: 'storybook-html',
+  template: `<div [innerHTML]="safeContent"></div>`,
+})
+export default class HtmlComponent {
+  /**
+   * The HTML to render
+   *
+   * @required
+   */
+  @Input()
+  content = '';
+
+  constructor(private sanitizer: DomSanitizer) {}
+
+  get safeContent() {
+    return this.sanitizer.bypassSecurityTrustHtml(this.content);
+  }
+}

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