CLI: Component-driven React / Vue / Angular / Preact / Svelte templates

addons/controls/README.md

@@ -316,7 +316,7 @@ Here is the full list of available controls:
 | ----------- | ------------ | -------------------------------------------------------------- | -------------- |
 | **array**   | array        | serialize array into a comma-separated string inside a textbox | separator      |
 | **boolean** | boolean      | checkbox input                                                 | -              |
-| **number**  | number       | a numberic text box input                                      | min, max, step |
+| **number**  | number       | a numeric text box input                                       | min, max, step |
 |             | range        | a range slider input                                           | min, max, step |
 | **object**  | object       | json editor text input                                         | -              |
 | **enum**    | radio        | radio buttons input                                            | options        |

cypress/generated/addon-action.spec.ts

@@ -5,7 +5,7 @@ describe('addon-action', () => {
 
   it('should trigger an action', () => {
     // click on the button
-    cy.navigateToStory('button', 'text');
+    cy.navigateToStory('example-button', 'primary');
 
     cy.getStoryElement().contains('Button').click();
     cy.viewAddonPanel('Actions');

cypress/generated/basic.spec.ts

@@ -1,18 +1,76 @@
-describe('Basic Flow', () => {
+describe('Basic CLI', () => {
   before(() => {
     cy.visitStorybook();
   });
 
-  it('should load welcome flow', () => {
-    cy.navigateToStory('example-introduction', 'page');
+  describe('Welcome story (MDX)', () => {
+    it('should load and display', () => {
+      cy.navigateToStory('example-introduction', 'page');
+      cy.getDocsElement().should('contain.text', 'Welcome to Storybook');
+    });
+  });
+
+  describe('Button story', () => {
+    it('should load primary story', () => {
+      cy.navigateToStory('example-button', 'primary');
+      cy.getStoryElement()
+        .find('button')
+        .should('have.class', 'storybook-button')
+        .and('have.class', 'storybook-button--primary');
+    });
+
+    it('should load secondary story', () => {
+      cy.navigateToStory('example-button', 'secondary');
+      cy.getStoryElement()
+        .find('button')
+        .should('have.class', 'storybook-button')
+        .and('have.class', 'storybook-button--secondary');
+    });
+    it('should load small story', () => {
+      cy.navigateToStory('example-button', 'small');
+      cy.getStoryElement()
+        .find('button')
+        .should('have.class', 'storybook-button')
+        .and('have.class', 'storybook-button--small');
+    });
+    it('should load large story', () => {
+      cy.navigateToStory('example-button', 'large');
+      cy.getStoryElement()
+        .find('button')
+        .should('have.class', 'storybook-button')
+        .and('have.class', 'storybook-button--large');
+    });
+  });
+
+  describe('Header story', () => {
+    it('should load and display logged in', () => {
+      cy.navigateToStory('example-header', 'logged-in');
+      cy.getStoryElement().find('header').should('contain.text', 'Acme');
+      cy.getStoryElement().find('button').should('contain.text', 'Log out');
+    });
 
-    // assert url changes
-    cy.url().should('include', 'path=/story/example-introduction--page');
+    it('should load and display logged out', () => {
+      cy.navigateToStory('example-header', 'logged-out');
+      cy.getStoryElement().find('header').should('contain.text', 'Acme');
+      cy.getStoryElement().find('button').first().should('contain.text', 'Log in');
+      cy.getStoryElement().find('button').last().should('contain.text', 'Sign up');
+    });
+  });
 
-    // check for selected element
-    cy.get('#example-introduction--page').should('have.class', 'selected');
+  describe('Page story', () => {
+    it('should load and display logged in', () => {
+      cy.navigateToStory('example-page', 'logged-in');
+      cy.getStoryElement().find('header').should('contain.text', 'Acme');
+      cy.getStoryElement().find('button').should('contain.text', 'Log out');
+      cy.getStoryElement().should('contain.text', 'Pages in Storybook');
+    });
 
-    // check for content
-    cy.getDocsElement().should('contain.text', 'Welcome to Storybook');
+    it('should load and display logged out', () => {
+      cy.navigateToStory('example-page', 'logged-out');
+      cy.getStoryElement().should('contain.text', 'Acme');
+      cy.getStoryElement().find('button').first().should('contain.text', 'Log in');
+      cy.getStoryElement().find('button').last().should('contain.text', 'Sign up');
+      cy.getStoryElement().should('contain.text', 'Pages in Storybook');
+    });
   });
 });

cypress/support/commands.js

@@ -90,6 +90,10 @@ Cypress.Commands.add('navigateToStory', (kind, name) => {
   // assert url changes
   cy.url().should('include', `path=/story/${kindId}--${storyId}`);
   cy.get(storyLinkId).should('have.class', 'selected');
+
+  // A pause is good when switching stories
+  // eslint-disable-next-line cypress/no-unnecessary-waiting
+  cy.wait(50);
 });
 
 Cypress.Commands.add('viewAddonPanel', (name) => {

lib/cli/src/.eslintrc.js

@@ -33,6 +33,8 @@ module.exports = {
         'react/prop-types': ignore,
         'react/react-in-jsx-scope': ignore,
         'import/no-extraneous-dependencies': ignore,
+        'import/extensions': ignore,
+        'import/named': ignore,
       },
     },
   ],

lib/cli/src/frameworks/angular/Button.stories.ts

@@ -0,0 +1,37 @@
+import Button from './button.component';
+
+export default {
+  title: 'Example/Button',
+  component: Button,
+  argTypes: {
+    backgroundColor: { control: 'color' },
+  },
+};
+
+const Template = (args: Button) => ({
+  component: Button,
+  props: args,
+});
+
+export const Primary = Template.bind({});
+Primary.args = {
+  primary: true,
+  label: 'Button',
+};
+
+export const Secondary = Template.bind({});
+Secondary.args = {
+  label: 'Button',
+};
+
+export const Large = Template.bind({});
+Large.args = {
+  size: 'large',
+  label: 'Button',
+};
+
+export const Small = Template.bind({});
+Small.args = {
+  size: 'small',
+  label: 'Button',
+};

lib/cli/src/frameworks/angular/Header.stories.ts

@@ -0,0 +1,29 @@
+import { moduleMetadata } from '@storybook/angular';
+import { CommonModule } from '@angular/common';
+
+import Button from './button.component';
+import Header from './header.component';
+
+export default {
+  title: 'Example/Header',
+  component: Header,
+  decorators: [
+    moduleMetadata({
+      declarations: [Button],
+      imports: [CommonModule],
+    }),
+  ],
+};
+
+const Template = (args: Header) => ({
+  component: Header,
+  props: args,
+});
+
+export const LoggedIn = Template.bind({});
+LoggedIn.args = {
+  user: {},
+};
+
+export const LoggedOut = Template.bind({});
+LoggedOut.args = {};

lib/cli/src/frameworks/angular/Page.stories.ts

@@ -0,0 +1,34 @@
+import { moduleMetadata } from '@storybook/angular';
+import { CommonModule } from '@angular/common';
+
+import Button from './button.component';
+import Header from './header.component';
+import Page from './page.component';
+
+import * as HeaderStories from './Header.stories';
+
+export default {
+  title: 'Example/Page',
+  component: Header,
+  decorators: [
+    moduleMetadata({
+      declarations: [Button, Header],
+      imports: [CommonModule],
+    }),
+  ],
+};
+
+const Template = (args: Page) => ({
+  component: Page,
+  props: args,
+});
+
+export const LoggedIn = Template.bind({});
+LoggedIn.args = {
+  ...HeaderStories.LoggedIn.args,
+};
+
+export const LoggedOut = Template.bind({});
+LoggedOut.args = {
+  ...HeaderStories.LoggedOut.args,
+};

lib/cli/src/frameworks/angular/button.component.ts

@@ -1,26 +1,53 @@
 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;
-      }
-    `,
-  ],
+  selector: 'storybook-button',
+  template: ` <button
+    type="button"
+    (click)="onClick.emit($event)"
+    [ngClass]="classes"
+    [ngStyle]="{ 'background-color': backgroundColor }"
+  >
+    {{ label }}
+  </button>`,
+  styleUrls: ['./button.css'],
 })
 export default class ButtonComponent {
+  /**
+   * Is this the principal call to action on the page?
+   */
   @Input()
-  text = '';
+  primary: boolean;
 
+  /**
+   * 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: string;
+
+  /**
+   * Optional click handler
+   */
   @Output()
-  onClick = new EventEmitter<any>();
+  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];
+  }
 }