@storybook/angular 7.3.2 → 7.4.0-alpha.1

package/template/stories/basics/ng-module/angular-src/chips-group.component.ts

@@ -1,49 +0,0 @@
-import { Component, Input, 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();
-}

package/template/stories/basics/ng-module/angular-src/chips.module.ts

@@ -1,31 +0,0 @@
-import { ModuleWithProviders, NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { ChipComponent } from './chip.component';
-import { ChipsGroupComponent } from './chips-group.component';
-import { ChipTextPipe } from './chip-text.pipe';
-import { CHIP_COLOR } from './chip-color.token';
-
-@NgModule({
-  imports: [CommonModule],
-  exports: [ChipsGroupComponent, ChipComponent],
-  declarations: [ChipsGroupComponent, ChipComponent, ChipTextPipe],
-  providers: [
-    {
-      provide: CHIP_COLOR,
-      useValue: '#eeeeee',
-    },
-  ],
-})
-export class ChipsModule {
-  public static forRoot(): ModuleWithProviders<ChipsModule> {
-    return {
-      ngModule: ChipsModule,
-      providers: [
-        {
-          provide: CHIP_COLOR,
-          useValue: '#ff5454',
-        },
-      ],
-    };
-  }
-}

package/template/stories/basics/ng-module/import-module-chip.stories.ts

@@ -1,23 +0,0 @@
-import { StoryFn, Meta, moduleMetadata } from '@storybook/angular';
-import { ChipsModule } from './angular-src/chips.module';
-import { ChipComponent } from './angular-src/chip.component';
-
-export default {
-  component: ChipComponent,
-  decorators: [
-    moduleMetadata({
-      imports: [ChipsModule],
-    }),
-  ],
-} as Meta;
-
-export const Chip: StoryFn = (args) => ({
-  props: args,
-});
-
-Chip.args = {
-  displayText: 'Chip',
-};
-Chip.argTypes = {
-  removeClicked: { action: 'Remove icon clicked' },
-};

package/template/stories/basics/ng-module/import-module-for-root.stories.ts

@@ -1,50 +0,0 @@
-import { StoryFn, Meta, moduleMetadata } from '@storybook/angular';
-import { ChipsModule } from './angular-src/chips.module';
-import { ChipsGroupComponent } from './angular-src/chips-group.component';
-import { CHIP_COLOR } from './angular-src/chip-color.token';
-
-export default {
-  // title: 'Basics / NgModule / forRoot() pattern',
-  component: ChipsGroupComponent,
-  decorators: [
-    moduleMetadata({
-      imports: [ChipsModule.forRoot()],
-    }),
-  ],
-  args: {
-    chips: [
-      {
-        id: 1,
-        text: 'Chip 1',
-      },
-      {
-        id: 2,
-        text: 'Chip 2',
-      },
-    ],
-  },
-  argTypes: {
-    removeChipClick: { action: 'Remove chip' },
-    removeAllChipsClick: { action: 'Remove all chips clicked' },
-  },
-} as Meta;
-
-const Template = (): StoryFn => (args) => ({
-  props: args,
-});
-
-export const Base = Template();
-Base.storyName = 'Chips group';
-
-export const WithCustomProvider = Template();
-WithCustomProvider.decorators = [
-  moduleMetadata({
-    providers: [
-      {
-        provide: CHIP_COLOR,
-        useValue: 'yellow',
-      },
-    ],
-  }),
-];
-WithCustomProvider.storyName = 'Chips group with overridden provider';

package/template/stories/basics/ng-module/import-module.stories.ts

@@ -1,35 +0,0 @@
-import { StoryFn, Meta, moduleMetadata } from '@storybook/angular';
-import { ChipsModule } from './angular-src/chips.module';
-import { ChipsGroupComponent } from './angular-src/chips-group.component';
-
-export default {
-  // title: 'Basics / NgModule / Module with multiple component',
-  component: ChipsGroupComponent,
-  decorators: [
-    moduleMetadata({
-      imports: [ChipsModule],
-    }),
-  ],
-} as Meta;
-
-export const ChipsGroup: StoryFn = (args) => ({
-  props: args,
-});
-
-ChipsGroup.args = {
-  chips: [
-    {
-      id: 1,
-      text: 'Chip 1',
-    },
-    {
-      id: 2,
-      text: 'Chip 2',
-    },
-  ],
-};
-
-ChipsGroup.argTypes = {
-  removeChipClick: { action: 'Remove chip' },
-  removeAllChipsClick: { action: 'Remove all chips clicked' },
-};

package/template/stories/button.component.ts

@@ -1,26 +0,0 @@
-import { Component, Input, Output, EventEmitter } from '@angular/core';
-
-@Component({
-  selector: 'storybook-button-component',
-  template: ` <button (click)="onClick.emit($event)">{{ text }}</button> `,
-  styles: [
-    `
-      button {
-        border: 1px solid #eee;
-        border-radius: 3px;
-        background-color: #ffffff;
-        cursor: pointer;
-        font-size: 15px;
-        padding: 3px 10px;
-        margin: 10px;
-      }
-    `,
-  ],
-})
-export default class ButtonComponent {
-  @Input()
-  text = '';
-
-  @Output()
-  onClick = new EventEmitter<any>();
-}

package/template/stories/core/README.stories.mdx

@@ -1,7 +0,0 @@
-import { Meta } from '@storybook/addon-docs';
-
-<Meta title="stories / frameworks / angular / core / README" />
-
-# Examples for Storybook native features
-
-These examples highlight Storybook's native functionality. It does not require any special addon

package/template/stories/core/applicationConfig/with-browser-animations.stories.ts

@@ -1,40 +0,0 @@
-import { Meta, StoryObj, applicationConfig } from '@storybook/angular';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { within, userEvent } from '@storybook/testing-library';
-import { expect } from '@storybook/jest';
-import { importProvidersFrom } from '@angular/core';
-import { OpenCloseComponent } from '../moduleMetadata/angular-src/open-close-component/open-close.component';
-
-const meta: Meta = {
-  component: OpenCloseComponent,
-  decorators: [
-    applicationConfig({
-      providers: [importProvidersFrom(BrowserAnimationsModule)],
-    }),
-  ],
-  parameters: {
-    chromatic: { delay: 100 },
-  },
-};
-
-export default meta;
-
-type Story = StoryObj<typeof OpenCloseComponent>;
-
-export const WithBrowserAnimations: Story = {
-  render: () => ({
-    template: `<app-open-close></app-open-close>`,
-    moduleMetadata: {
-      declarations: [OpenCloseComponent],
-    },
-  }),
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    const opened = canvas.getByText('The box is now Open!');
-    expect(opened).toBeDefined();
-    const submitButton = canvas.getByRole('button');
-    await userEvent.click(submitButton);
-    const closed = canvas.getByText('The box is now Closed!');
-    expect(closed).toBeDefined();
-  },
-};

package/template/stories/core/applicationConfig/with-noop-browser-animations.stories.ts

@@ -1,35 +0,0 @@
-import { Meta, StoryObj } from '@storybook/angular';
-import { NoopAnimationsModule } from '@angular/platform-browser/animations';
-import { within, userEvent } from '@storybook/testing-library';
-import { expect } from '@storybook/jest';
-import { importProvidersFrom } from '@angular/core';
-import { OpenCloseComponent } from '../moduleMetadata/angular-src/open-close-component/open-close.component';
-
-const meta: Meta = {
-  component: OpenCloseComponent,
-};
-
-export default meta;
-
-type Story = StoryObj<typeof OpenCloseComponent>;
-
-export const WithNoopBrowserAnimations: Story = {
-  render: () => ({
-    template: `<app-open-close></app-open-close>`,
-    applicationConfig: {
-      providers: [importProvidersFrom(NoopAnimationsModule)],
-    },
-    moduleMetadata: {
-      declarations: [OpenCloseComponent],
-    },
-  }),
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    const opened = canvas.getByText('The box is now Open!');
-    expect(opened).toBeDefined();
-    const submitButton = canvas.getByRole('button');
-    await userEvent.click(submitButton);
-    const closed = canvas.getByText('The box is now Closed!');
-    expect(closed).toBeDefined();
-  },
-};

package/template/stories/core/decorators/componentWrapperDecorator/child.component.ts

@@ -1,20 +0,0 @@
-import { Component, Input, Output, EventEmitter } from '@angular/core';
-
-@Component({
-  selector: 'child-component',
-  template: `
-    Child<br />
-    Input text: {{ childText }} <br />
-    Output : <button (click)="onClickChild.emit($event)">Click here !</button> <br />
-    Private text: {{ childPrivateText }} <br />
-  `,
-})
-export default class ChildComponent {
-  @Input()
-  childText = '';
-
-  childPrivateText = '';
-
-  @Output()
-  onClickChild = new EventEmitter<any>();
-}

package/template/stories/core/decorators/componentWrapperDecorator/decorators.stories.ts

@@ -1,99 +0,0 @@
-// your-component.stories.ts
-
-import { Args, Meta, Story, componentWrapperDecorator, moduleMetadata } from '@storybook/angular';
-import ChildComponent from './child.component';
-import ParentComponent from './parent.component';
-
-export default {
-  // title: 'Core / Decorators / ComponentWrapperDecorator',
-  component: ChildComponent,
-  decorators: [
-    componentWrapperDecorator(
-      (story) => `Grandparent<br><div style="margin: 3em; border:solid;">${story}</div>`
-    ),
-  ],
-  args: { childText: 'Child text', childPrivateText: 'Child private text' },
-  argTypes: { onClickChild: { action: 'onClickChild' } },
-} as Meta;
-
-export const WithTemplate = (args: Args) => ({
-  template: `Child Template`,
-  props: {
-    ...args,
-  },
-});
-
-export const WithComponent = (args: Args) => ({
-  props: {
-    ...args,
-  },
-});
-
-export const WithLegacyComponent = (args: Args) => ({
-  component: ChildComponent,
-  props: {
-    ...args,
-  },
-});
-
-export const WithComponentWrapperDecorator = (args: Args) => ({
-  component: ChildComponent,
-  props: {
-    ...args,
-  },
-});
-WithComponentWrapperDecorator.decorators = [
-  moduleMetadata({ declarations: [ParentComponent] }),
-  componentWrapperDecorator(ParentComponent),
-];
-
-export const WithComponentWrapperDecoratorAndProps = (args: Args) => ({
-  component: ChildComponent,
-  props: {
-    ...args,
-  },
-});
-WithComponentWrapperDecoratorAndProps.decorators = [
-  moduleMetadata({ declarations: [ParentComponent] }),
-  componentWrapperDecorator(ParentComponent, {
-    parentText: 'Parent text',
-    onClickParent: () => {
-      console.log('onClickParent');
-    },
-  }),
-];
-
-export const WithComponentWrapperDecoratorAndArgs = (args: Args) => ({
-  component: ChildComponent,
-  props: {
-    ...args,
-  },
-});
-WithComponentWrapperDecoratorAndArgs.argTypes = {
-  parentText: { control: { type: 'text' } },
-  onClickParent: { action: 'onClickParent' },
-};
-WithComponentWrapperDecoratorAndArgs.decorators = [
-  moduleMetadata({ declarations: [ParentComponent] }),
-  componentWrapperDecorator(ParentComponent, ({ args }) => ({
-    parentText: args.parentText,
-    onClickParent: args.onClickParent,
-  })),
-];
-
-export const WithCustomDecorator = (args: Args) => ({
-  template: `Child Template`,
-  props: {
-    ...args,
-  },
-});
-WithCustomDecorator.decorators = [
-  (storyFunc) => {
-    const story = storyFunc();
-
-    return {
-      ...story,
-      template: `Custom Decorator <div style="margin: 3em">${story.template}</div>`,
-    };
-  },
-] as Story['decorators'];

package/template/stories/core/decorators/componentWrapperDecorator/parent.component.ts

@@ -1,18 +0,0 @@
-import { Component, Input, Output, EventEmitter } from '@angular/core';
-
-@Component({
-  selector: 'parent-component',
-  template: `
-    Parent<br />
-    Input text: {{ parentText }} <br />
-    Output : <button (click)="onClickParent.emit($event)">Click here !</button> <br />
-    <div style="margin: 3em; border:solid;"><ng-content></ng-content></div>
-  `,
-})
-export default class ParentComponent {
-  @Input()
-  parentText = '';
-
-  @Output()
-  onClickParent = new EventEmitter<any>();
-}

package/template/stories/core/decorators/theme-decorator/decorators.stories.ts

@@ -1,20 +0,0 @@
-import { Args, Meta, componentWrapperDecorator } from '@storybook/angular';
-
-export const Base = (args: Args) => ({
-  template: 'Change theme with the brush in toolbar',
-  props: {
-    ...args,
-  },
-});
-
-export default {
-  // title: 'Core / Decorators / Theme Decorators',
-  component: Base,
-  decorators: [
-    componentWrapperDecorator(
-      (story) => `<div [class]="myTheme">${story}</div>`,
-
-      ({ globals }) => ({ myTheme: `${globals['theme']}-theme` })
-    ),
-  ],
-} as Meta;

package/template/stories/core/moduleMetadata/angular-src/custom.pipe.ts

@@ -1,10 +0,0 @@
-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/core/moduleMetadata/angular-src/dummy.service.ts

@@ -1,14 +0,0 @@
-import { Injectable } from '@angular/core';
-
-@Injectable({ providedIn: 'root' })
-export class DummyService {
-  constructor() {}
-
-  getItems() {
-    return new Promise((resolve) => {
-      setTimeout(() => {
-        resolve(['Joe', 'Jane']);
-      }, 2000);
-    });
-  }
-}

package/template/stories/core/moduleMetadata/angular-src/open-close-component/open-close.component.css

@@ -1,13 +0,0 @@
-:host {
-  display: block;
-  margin-top: 1rem;
-}
-
-.open-close-container {
-  border: 1px solid #dddddd;
-  margin-top: 1em;
-  padding: 20px 20px 0px 20px;
-  color: #000000;
-  font-weight: bold;
-  font-size: 20px;
-}

package/template/stories/core/moduleMetadata/angular-src/open-close-component/open-close.component.html

@@ -1,7 +0,0 @@
-<nav>
-  <button type="button" (click)="toggle()">Toggle Open/Close</button>
-</nav>
-
-<div [@openClose]="isOpen ? 'open' : 'closed'" class="open-close-container">
-  <p>The box is now {{ isOpen ? 'Open' : 'Closed' }}!</p>
-</div>

package/template/stories/core/moduleMetadata/angular-src/open-close-component/open-close.component.ts

@@ -1,39 +0,0 @@
-import { Component } from '@angular/core';
-// eslint-disable-next-line import/no-extraneous-dependencies
-import { trigger, state, style, transition, animate } from '@angular/animations';
-
-@Component({
-  selector: 'app-open-close',
-  animations: [
-    trigger('openClose', [
-      // ...
-      state(
-        'open',
-        style({
-          height: '200px',
-          opacity: 1,
-          backgroundColor: 'yellow',
-        })
-      ),
-      state(
-        'closed',
-        style({
-          height: '100px',
-          opacity: 0.8,
-          backgroundColor: 'blue',
-        })
-      ),
-      transition('open => closed', [animate('0.1s')]),
-      transition('closed => open', [animate('0.1s')]),
-    ]),
-  ],
-  templateUrl: 'open-close.component.html',
-  styleUrls: ['open-close.component.css'],
-})
-export class OpenCloseComponent {
-  isOpen = true;
-
-  toggle() {
-    this.isOpen = !this.isOpen;
-  }
-}

package/template/stories/core/moduleMetadata/angular-src/service.component.ts

@@ -1,24 +0,0 @@
-import { OnInit, Component, Input } from '@angular/core';
-import { DummyService } from './dummy.service';
-
-@Component({
-  selector: 'storybook-simple-service-component',
-  template: `
-    <p>{{ name }}:</p>
-    <ul>
-      <li *ngFor="let item of items">{{ item }}</li>
-    </ul>
-  `,
-})
-export class ServiceComponent implements OnInit {
-  items?: {};
-
-  @Input()
-  name?: any;
-
-  constructor(private dummy: DummyService) {}
-
-  async ngOnInit() {
-    this.items = (await this.dummy.getItems()) as any;
-  }
-}

package/template/stories/core/moduleMetadata/angular-src/token.component.ts

@@ -1,31 +0,0 @@
-import { Component, Input, InjectionToken, Inject, Optional } from '@angular/core';
-
-export const ITEMS = new InjectionToken<string[]>('TokenComponent.Items');
-export const DEFAULT_NAME = new InjectionToken<string>('TokenComponent.DefaultName');
-
-@Component({
-  selector: 'storybook-simple-token-component',
-  template: `
-    <h3>{{ name }}</h3>
-    <p>Items:</p>
-    <ul>
-      <li *ngFor="let item of items">{{ item }}</li>
-    </ul>
-  `,
-})
-export class TokenComponent {
-  items;
-
-  @Input()
-  name;
-
-  constructor(
-    @Optional()
-    @Inject(DEFAULT_NAME)
-    defaultName: string,
-    @Inject(ITEMS) items: string[]
-  ) {
-    this.name = defaultName;
-    this.items = items;
-  }
-}

package/template/stories/core/moduleMetadata/in-export-default.stories.ts

@@ -1,38 +0,0 @@
-import { StoryFn, Meta, moduleMetadata } from '@storybook/angular';
-import { TokenComponent, ITEMS, DEFAULT_NAME } from './angular-src/token.component';
-
-export const Story1: StoryFn = () => ({
-  template: `<storybook-simple-token-component [name]="name"></storybook-simple-token-component>`,
-  props: {
-    name: 'Prop Name',
-  },
-});
-
-Story1.storyName = 'Story 1';
-
-export const Story2: StoryFn = () => ({
-  template: `<storybook-simple-token-component></storybook-simple-token-component>`,
-});
-
-Story2.storyName = 'Story 2';
-
-export default {
-  // title: 'Core / ModuleMetadata / In export default with decorator',
-  component: Story1,
-  decorators: [
-    moduleMetadata({
-      imports: [],
-      declarations: [TokenComponent],
-      providers: [
-        {
-          provide: ITEMS,
-          useValue: ['Joe', 'Jane'],
-        },
-        {
-          provide: DEFAULT_NAME,
-          useValue: 'Provider Name',
-        },
-      ],
-    }),
-  ],
-} as Meta;