Merge branch 'next' of https://github.com/storybookjs/storybook into next

.github/workflows/linear-export.yml

@@ -12,12 +12,16 @@ jobs:
     name: Export to linear
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
-      - name: Install dependencies
-        run: yarn install
-      - name: Export to linear
-        run: >
-          yarn linear-export ${{ github.event.issue.number }}
-        env:
-          GH_TOKEN: ${{ secrets.LINEAR_GH_TOKEN }}
-          LINEAR_API_KEY: ${{ secrets.LINEAR_API_KEY }}
+      # - uses: hmarr/debug-action@v2
+      - name: Linear action
+        uses: shilman/linear-action@v1
+        with:
+          ghIssueNumber: ${{ github.event.number || github.event.issue.number }}
+          ghRepoOwner: ${{ github.event.repository.owner.login }}
+          ghRepoName: ${{ github.event.repository.name }}
+          ghToken: ${{ secrets.LINEAR_GH_TOKEN }}
+          linearIssuePrefix: SB
+          linearLabel: Storybook
+          linearPRLabel: PR
+          linearTeam: CH
+          linearApiKey: ${{ secrets.LINEAR_API_KEY }}

MIGRATION.md

@@ -1,6 +1,7 @@
 <h1>Migration</h1>
 
 - [From version 6.3.x to 6.4.0](#from-version-63x-to-640)
+  - [Automigrate](#automigrate)
   - [CRA5 upgrade](#cra5-upgrade)
   - [CSF3 enabled](#csf3-enabled)
     - [Optional titles](#optional-titles)
@@ -10,8 +11,8 @@
     - [Behavioral differences](#behavioral-differences)
     - [Main.js framework field](#mainjs-framework-field)
     - [Using the v7 store](#using-the-v7-store)
-    - [V7-style story sort](#v7-style-story-sort)
-    - [V7 Store API changes for addon authors](#v7-store-api-changes-for-addon-authors)
+    - [v7-style story sort](#v7-style-story-sort)
+    - [v7 Store API changes for addon authors](#v7-store-api-changes-for-addon-authors)
     - [Storyshots compatibility in the v7 store](#storyshots-compatibility-in-the-v7-store)
   - [Emotion11 quasi-compatibility](#emotion11-quasi-compatibility)
   - [Babel mode v7](#babel-mode-v7)
@@ -186,10 +187,25 @@
 
 ## From version 6.3.x to 6.4.0
 
+### Automigrate
+
+Automigrate is a new 6.4 feature that provides zero-config upgrades to your dependencies, configurations, and story files.
+
+Each automigration analyzes your project, and if it's is applicable, propose a change alongside relevant documentation. If you accept the changes, the automigration will update your files accordingly.
+
+For example, if you're in a webpack5 project but still use Storybook's default webpack4 builder, the automigration can detect this and propose an upgrade. If you opt-in, it will install the webpack5 builder and update your `main.js` configuration automatically.
+
+You can run the existing suite of automigrations to see which ones apply to your project. This won't update any files unless you accept the changes:
+
+```
+npx sb@next automigrate
+```
+
+The automigration suite also runs when you create a new project (`sb init`) or when you update storybook (`sb upgrade`).
+
 ### CRA5 upgrade
 
-Storybook 6.3 supports CRA5 out of the box when you install it fresh. However, if you're upgrading your project from a previous version, you'll need to
-upgrade the configuration. You can do this automatically by running:
+Storybook 6.3 supports CRA5 out of the box when you install it fresh. However, if you're upgrading your project from a previous version, you'll need to upgrade the configuration. You can do this automatically by running:
 
 ```
 npx sb@next automigrate

addons/docs/docs/recipes.md

@@ -63,7 +63,8 @@ basic.parameters = {
 
 ```md
 import { Meta, Story } from '@storybook/addon-docs';
-import \* as stories from './Button.stories.js';
+import * as stories from './Button.stories.js';
+import { Button } from './Button';
 import { SomeComponent } from 'path/to/SomeComponent';
 
 <Meta title="Demo/Button" component={Button} />

addons/docs/src/frameworks/angular/compodoc.ts

@@ -120,7 +120,7 @@ const extractTypeFromValue = (defaultValue: any) => {
 
 const extractEnumValues = (compodocType: any) => {
   const compodocJson = getCompodocJson();
-  const enumType = compodocJson?.miscellaneous.enumerations.find((x) => x.name === compodocType);
+  const enumType = compodocJson?.miscellaneous?.enumerations?.find((x) => x.name === compodocType);
 
   if (enumType?.childs.every((x) => x.value)) {
     return enumType.childs.map((x) => x.value);

examples/angular-cli/src/stories/addons/interactions/addon-interactions.stories.ts

@@ -1,27 +1,109 @@
-/* eslint-disable storybook/use-storybook-testing-library */
-// @TODO: use addon-interactions and remove the rule disable above
-import { Story, Meta } from '@storybook/angular';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { Story, Meta, moduleMetadata } from '@storybook/angular';
 import { expect } from '@storybook/jest';
-import { within } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
+import { within, userEvent, waitFor } from '@storybook/testing-library';
 
-import { CounterComponent } from './counter/counter.component';
+import { HeroForm } from './hero-form/hero-form.component';
 
 export default {
   title: 'Addons/Interactions',
-  component: CounterComponent,
-} as Meta;
+  component: HeroForm,
+  decorators: [
+    moduleMetadata({
+      imports: [CommonModule, FormsModule],
+    }),
+  ],
+} as Meta<HeroForm>;
 
-const Template: Story = (args) => ({
+const Template: Story<HeroForm> = (args) => ({
   props: args,
 });
 
-export const Default: Story = Template.bind({});
+export const Standard: Story<HeroForm> = Template.bind({});
 
-Default.play = async ({ canvasElement }) => {
+export const Filled: Story<HeroForm> = Template.bind({});
+Filled.play = async ({ canvasElement }) => {
   const canvas = within(canvasElement);
-  await userEvent.click(await canvas.findByText('Increment'));
+  const heroName = canvas.getByRole('textbox', {
+    name: /name/i,
+  });
+  await userEvent.type(heroName, 'Storm');
 
-  const count = await canvas.findByTestId('count');
-  await expect(count.textContent).toEqual('You clicked 1 times');
+  const alterEgo = canvas.getByRole('textbox', {
+    name: /alter ego/i,
+  });
+  await userEvent.type(alterEgo, 'Ororo Munroe');
+
+  const heroPower = canvas.getByRole('combobox', { name: /hero power/i });
+  await userEvent.selectOptions(heroPower, 'Weather Changer');
+};
+
+export const InvalidFields: Story<HeroForm> = Template.bind({});
+InvalidFields.play = async (context) => {
+  await Filled.play(context);
+
+  const canvas = within(context.canvasElement);
+  await userEvent.clear(
+    canvas.getByRole('textbox', {
+      name: /name/i,
+    })
+  );
+  await userEvent.clear(
+    canvas.getByRole('textbox', {
+      name: /alter ego/i,
+    })
+  );
+
+  const heroPower = canvas.getByRole('combobox', { name: /hero power/i });
+  await userEvent.selectOptions(heroPower, '');
+};
+
+export const Submitted: Story<HeroForm> = Template.bind({});
+Submitted.play = async (context) => {
+  await Filled.play(context);
+
+  const canvas = within(context.canvasElement);
+  await userEvent.click(canvas.getByText('Submit'));
+
+  await waitFor(async () => {
+    await expect(
+      canvas.getByRole('heading', {
+        name: /you submitted the following:/i,
+      })
+    ).not.toBeNull();
+    await expect(canvas.getByTestId('hero-name').textContent).toEqual('Storm');
+    await expect(canvas.getByTestId('hero-alterego').textContent).toEqual('Ororo Munroe');
+    await expect(canvas.getByTestId('hero-power').textContent).toEqual('Weather Changer');
+  });
+};
+
+export const SubmittedAndEditedAfter: Story<HeroForm> = Template.bind({});
+SubmittedAndEditedAfter.play = async (context) => {
+  await Submitted.play(context);
+
+  const canvas = within(context.canvasElement);
+  await userEvent.click(canvas.getByText('Edit'));
+
+  const heroName = canvas.getByRole('textbox', {
+    name: /name/i,
+  });
+  await userEvent.clear(heroName);
+  await userEvent.type(heroName, 'Wakanda Queen');
+
+  await userEvent.click(canvas.getByText('Submit'));
+
+  await waitFor(async () => {
+    await expect(
+      canvas.getByRole('heading', {
+        name: /you submitted the following:/i,
+      })
+    ).not.toBeNull();
+    // new value
+    await expect(canvas.getByTestId('hero-name').textContent).toEqual('Wakanda Queen');
+
+    // previous values
+    await expect(canvas.getByTestId('hero-alterego').textContent).toEqual('Ororo Munroe');
+    await expect(canvas.getByTestId('hero-power').textContent).toEqual('Weather Changer');
+  });
 };

examples/angular-cli/src/stories/addons/interactions/counter/counter.component.ts

@@ -1,24 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'my-counter',
-  template: `
-    <div>
-      <h1>Angular - Counter</h1>
-      <h2 data-testid="count">You clicked {{ count }} times</h2>
-      <button type="button" (click)="decrement()">Decrement</button>
-      <button type="button" (click)="increment()">Increment</button>
-    </div>
-  `,
-})
-export class CounterComponent {
-  count = 0;
-
-  increment() {
-    this.count += 1;
-  }
-
-  decrement() {
-    this.count -= 1;
-  }
-}

examples/angular-cli/src/stories/addons/interactions/hero-form/hero-form.component.css

@@ -0,0 +1,9 @@
+@import url('https://unpkg.com/bootstrap@4.4/dist/css/bootstrap.min.css');
+
+.ng-valid[required], .ng-valid.required  {
+  border-left: 5px solid #42A948;
+}
+
+.ng-invalid:not(form)  {
+  border-left: 5px solid #a94442;
+}

examples/angular-cli/src/stories/addons/interactions/hero-form/hero-form.component.html

@@ -0,0 +1,61 @@
+<div class="container">
+  <div [hidden]="submitted">
+    <h1>Hero Form</h1>
+    <form (ngSubmit)="onSubmit()" #heroForm="ngForm">
+      <div class="form-group">
+        <label for="name">Name</label>
+        <input type="text" class="form-control" id="name"
+               required
+               [(ngModel)]="model.name" name="name"
+               #name="ngModel">
+        <div [hidden]="name.valid || name.pristine"
+             class="alert alert-danger">
+          Name is required
+        </div>
+      </div>
+
+      <div class="form-group">
+        <label for="alterEgo">Alter Ego</label>
+        <input type="text" class="form-control" id="alterEgo"
+               [(ngModel)]="model.alterEgo" name="alterEgo">
+      </div>
+      <div class="form-group">
+        <label for="power">Hero Power</label>
+        <select class="form-control" id="power"
+                required
+                [(ngModel)]="model.power" name="power"
+                #power="ngModel">
+          <option></option>
+          <option *ngFor="let pow of powers" [value]="pow">{{pow}}</option>
+        </select>
+
+        <div [hidden]="power.valid || power.pristine" class="alert alert-danger">
+          Power is required
+        </div>
+      </div>
+
+      <button type="submit" class="btn btn-success" [disabled]="!heroForm.form.valid">
+        Submit
+        <span [hidden]="!submitting" class="spinner-border spinner-border-sm ml-2" role="status" aria-hidden="true"></span>
+      </button>
+    </form>
+  </div>
+
+  <div [hidden]="!submitted">
+    <h2>You submitted the following:</h2>
+    <div class="row">
+      <div class="col-sm-3 font-weight-bold">Name</div>
+      <div class="col-sm-9" data-testid="hero-name">{{ model.name }}</div>
+    </div>
+    <div class="row">
+      <div class="col-sm-3 font-weight-bold">Alter Ego</div>
+      <div class="col-sm-9" data-testid="hero-alterego">{{ model.alterEgo }}</div>
+    </div>
+    <div class="row">
+      <div class="col-sm-3 font-weight-bold">Power</div>
+      <div class="col-sm-9" data-testid="hero-power">{{ model.power }}</div>
+    </div>
+    <br>
+    <button class="btn btn-primary" (click)="submitted=false">Edit</button>
+  </div>
+</div>

examples/angular-cli/src/stories/addons/interactions/hero-form/hero-form.component.ts

@@ -0,0 +1,51 @@
+import { Component, NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { CommonModule } from '@angular/common';
+
+class Hero {
+  // eslint-disable-next-line no-useless-constructor
+  constructor(
+    public id: number,
+    public name: string,
+    public power: string,
+    public alterEgo?: string
+  ) {}
+}
+
+@Component({
+  selector: 'hero-form',
+  templateUrl: './hero-form.component.html',
+  styleUrls: ['./hero-form.component.css'],
+})
+export class HeroForm {
+  /**
+   * This does not work on addon-controls as it is turned into a string
+   * @ignore
+   */
+  model = new Hero(0, '', '', '');
+
+  /**
+   * This does not work on addon-controls as it is turned into a string
+   * @ignore
+   */
+  powers = ['Really Smart', 'Super Flexible', 'Super Hot', 'Weather Changer'];
+
+  submitting = false;
+
+  submitted = false;
+
+  onSubmit() {
+    this.submitting = true;
+    setTimeout(() => {
+      this.submitted = true;
+      this.submitting = false;
+    }, 1000);
+  }
+}
+
+@NgModule({
+  declarations: [HeroForm],
+  exports: [HeroForm],
+  imports: [CommonModule, FormsModule],
+})
+export class HeroFormModule {}

lib/store/src/inferArgTypes.ts

@@ -21,7 +21,9 @@ const inferType = (value: any, name: string, visited: Set<any>): SBType => {
       logger.warn(dedent`
         We've detected a cycle in arg '${name}'. Args should be JSON-serializable.
 
-        More info: https://storybook.js.org/docs/react/essentials/controls#fully-custom-args
+        Consider using the mapping feature or fully custom args:
+        - Mapping: https://storybook.js.org/docs/react/writing-stories/args#mapping-to-complex-arg-values
+        - Custom args: https://storybook.js.org/docs/react/essentials/controls#fully-custom-args
       `);
       return { name: 'other', value: 'cyclic object' };
     }