Allow optional component declaration (#6346)

Allow optional component declaration

addons/storyshots/storyshots-core/src/frameworks/angular/helpers.ts

@@ -32,17 +32,32 @@ const createComponentFromTemplate = (template: string) => {
 };
 
 export const initModuleData = (storyObj: NgStory): any => {
-  const { component, template, props, moduleMetadata = {} } = storyObj;
+  const {
+    component,
+    template,
+    props,
+    moduleMetadata = {},
+    requiresComponentDeclaration = true,
+  } = storyObj;
+
+  const isCreatingComponentFromTemplate = Boolean(template);
+
+  const AnnotatedComponent = isCreatingComponentFromTemplate
+    ? createComponentFromTemplate(template)
+    : component;
 
-  const AnnotatedComponent = template ? createComponentFromTemplate(template) : component;
+  const componentDeclarations =
+    isCreatingComponentFromTemplate || requiresComponentDeclaration
+      ? [AppComponent, AnnotatedComponent]
+      : [AppComponent];
 
   const story = {
     component: AnnotatedComponent,
     props,
   };
 
   const moduleMeta = getModuleMeta(
-    [AppComponent, AnnotatedComponent],
+    componentDeclarations,
     [AnnotatedComponent],
     [AppComponent],
     story,

addons/storyshots/storyshots-core/src/frameworks/angular/types.ts

@@ -12,6 +12,7 @@ export interface ICollection {
 
 export interface NgStory {
   component?: any;
+  requiresComponentDeclaration?: boolean;
   props: ICollection;
   propsMeta?: ICollection;
   moduleMetadata?: NgModuleMetadata;

app/angular/index.d.ts

@@ -45,6 +45,7 @@ export interface IStory {
   props?: ICollection;
   moduleMetadata?: Partial<NgModuleMetadata>;
   component?: any;
+  requiresComponentDeclaration?: boolean;
   template?: string;
 }
 

app/angular/src/client/preview/angular/helpers.ts

@@ -49,17 +49,33 @@ const createComponentFromTemplate = (template: string, styles: string[]) => {
 
 const initModule = (storyFn: IStoryFn) => {
   const storyObj = storyFn();
-  const { component, template, props, styles, moduleMetadata = {} } = storyObj;
+  const {
+    component,
+    template,
+    props,
+    styles,
+    moduleMetadata = {},
+    requiresComponentDeclaration = true,
+  } = storyObj;
+
+  const isCreatingComponentFromTemplate = Boolean(template);
+
+  const AnnotatedComponent = isCreatingComponentFromTemplate
+    ? createComponentFromTemplate(template, styles)
+    : component;
 
-  const AnnotatedComponent = template ? createComponentFromTemplate(template, styles) : component;
+  const componentDeclarations =
+    isCreatingComponentFromTemplate || requiresComponentDeclaration
+      ? [AppComponent, AnnotatedComponent]
+      : [AppComponent];
 
   const story = {
     component: AnnotatedComponent,
     props,
   };
 
   return getModule(
-    [AppComponent, AnnotatedComponent],
+    componentDeclarations,
     [AnnotatedComponent],
     [AppComponent],
     story,

app/angular/src/client/preview/angular/types.ts

@@ -12,6 +12,7 @@ export interface ICollection {
 
 export interface NgStory {
   component?: any;
+  requiresComponentDeclaration?: boolean;
   props: ICollection;
   propsMeta?: ICollection;
   moduleMetadata?: NgModuleMetadata;

examples/angular-cli/src/stories/module-context/__snapshots__/module-context.stories.storyshot

@@ -0,0 +1,134 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Custom|Feature Module as Context Component with default providers 1`] = `
+<storybook-dynamic-app-root
+  cfr={[Function CodegenComponentFactoryResolver]}
+  data={[Function Object]}
+  target={[Function ViewContainerRef_]}
+>
+  <storybook-chip
+    _nghost-a-c15=""
+    style="background-color: rgb(238, 238, 238);"
+  >
+    <span
+      _ngcontent-a-c15=""
+      class="text"
+    >
+      My Chíp
+    </span>
+    <div
+      _ngcontent-a-c15=""
+      class="remove"
+    >
+      <span
+        _ngcontent-a-c15=""
+        class="x"
+      >
+        ✕
+      </span>
+    </div>
+  </storybook-chip>
+</storybook-dynamic-app-root>
+`;
+
+exports[`Storyshots Custom|Feature Module as Context Component with overridden provider 1`] = `
+<storybook-dynamic-app-root
+  cfr={[Function CodegenComponentFactoryResolver]}
+  data={[Function Object]}
+  target={[Function ViewContainerRef_]}
+>
+  <storybook-chip
+    _nghost-a-c16=""
+    style="background-color: yellow;"
+  >
+    <span
+      _ngcontent-a-c16=""
+      class="text"
+    >
+      My Chíp
+    </span>
+    <div
+      _ngcontent-a-c16=""
+      class="remove"
+    >
+      <span
+        _ngcontent-a-c16=""
+        class="x"
+      >
+        ✕
+      </span>
+    </div>
+  </storybook-chip>
+</storybook-dynamic-app-root>
+`;
+
+exports[`Storyshots Custom|Feature Module as Context Component with self and dependencies declared in its feature module 1`] = `
+<storybook-dynamic-app-root
+  cfr={[Function CodegenComponentFactoryResolver]}
+  data={[Function Object]}
+  target={[Function ViewContainerRef_]}
+>
+  <storybook-chips-group
+    _nghost-a-c13=""
+  >
+
+    <storybook-chip
+      _ngcontent-a-c13=""
+      _nghost-a-c14=""
+      class="chip"
+      ng-reflect-display-text="Chip 1"
+      style="background-color: rgb(238, 238, 238);"
+    >
+      <span
+        _ngcontent-a-c14=""
+        class="text"
+      >
+        Chíp 1
+      </span>
+      <div
+        _ngcontent-a-c14=""
+        class="remove"
+      >
+        <span
+          _ngcontent-a-c14=""
+          class="x"
+        >
+          ✕
+        </span>
+      </div>
+    </storybook-chip>
+    <storybook-chip
+      _ngcontent-a-c13=""
+      _nghost-a-c14=""
+      class="chip"
+      ng-reflect-display-text="Chip 2"
+      style="background-color: rgb(238, 238, 238);"
+    >
+      <span
+        _ngcontent-a-c14=""
+        class="text"
+      >
+        Chíp 2
+      </span>
+      <div
+        _ngcontent-a-c14=""
+        class="remove"
+      >
+        <span
+          _ngcontent-a-c14=""
+          class="x"
+        >
+          ✕
+        </span>
+      </div>
+    </storybook-chip>
+
+    <div
+      _ngcontent-a-c13=""
+      class="remove-all"
+    >
+       Remove All 
+    </div>
+  </storybook-chips-group>
+</storybook-dynamic-app-root>
+`;

examples/angular-cli/src/stories/module-context/chip-color.token.ts

@@ -0,0 +1,3 @@
+import { InjectionToken } from '@angular/core';
+
+export const CHIP_COLOR = new InjectionToken<string>('chip-color');

examples/angular-cli/src/stories/module-context/chip-text.pipe.ts

@@ -0,0 +1,29 @@
+import { Pipe, PipeTransform } 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;
+    }
+  }
+}

examples/angular-cli/src/stories/module-context/chip.component.ts

@@ -0,0 +1,68 @@
+import {
+  Component,
+  Input,
+  ChangeDetectionStrategy,
+  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;
+  }
+}

examples/angular-cli/src/stories/module-context/chips-group.component.ts

@@ -0,0 +1,49 @@
+import { Component, Input, ChangeDetectionStrategy, Output, EventEmitter } from '@angular/core';
+
+@Component({
+  selector: 'storybook-chips-group',
+  template: `
+    <storybook-chip
+      *ngFor="let chip of chips"
+      class="chip"
+      [displayText]="chip.text"
+      (removeClicked)="removeChipClick.emit(chip.id)"
+    ></storybook-chip>
+    <div *ngIf="chips.length > 1" class="remove-all" (click)="removeAllChipsClick.emit()">
+      Remove All
+    </div>
+  `,
+  styles: [
+    `
+      :host {
+        display: flex;
+        align-content: center;
+        padding: 0.5rem;
+        background-color: lightgrey;
+        border-radius: 0.5rem;
+        width: fit-content;
+      }
+      .chip:not(:first-of-type) {
+        margin-left: 0.5rem;
+      }
+      .remove-all {
+        margin-left: 0.5rem;
+        padding: 0.2rem 0.5rem;
+        border: solid 0.1rem #eeeeee;
+      }
+      .remove-all:hover {
+        background-color: palevioletred;
+      }
+    `,
+  ],
+})
+export class ChipsGroupComponent {
+  @Input() chips: {
+    id: number;
+    text: string;
+  }[];
+
+  @Output() removeChipClick = new EventEmitter<number>();
+
+  @Output() removeAllChipsClick = new EventEmitter();
+}