feat(ui): add Storybook (#16)

* feat(ui): add `Storybook`

* feat(ui): add `Storybook` e2e test

* doc(ui): how to watch e2e

* build(dep): update storybook to `v5.3.6`

* build(dep): back to storybook `v5.3.2` due to:

- info => Using angular project 'frontend' for configuring Storybook.

* build(dep): back to storybook `v5.3.6` since it works

* test(ui-e2e): open/close `menu-bar`

.storybook/addons.js

@@ -0,0 +1 @@
+import '@storybook/addon-knobs/register';

.storybook/tsconfig.json

@@ -0,0 +1,5 @@
+{
+  "extends": "../tsconfig.json",
+  "exclude": ["../**/test.ts", "../**/*.spec.ts"],
+  "include": ["../**/*"]
+}

.storybook/webpack.config.js

@@ -0,0 +1,11 @@
+// Export a function. Accept the base config as the only param.
+module.exports = async ({ config, mode }) => {
+  // `mode` has a value of 'DEVELOPMENT' or 'PRODUCTION'
+  // You can change the configuration based on that.
+  // 'PRODUCTION' is used when building the static version of storybook.
+
+  // Make whatever fine-grained changes you need
+
+  // Return the altered config
+  return config;
+};

angular.json

@@ -135,6 +135,36 @@
             "tsConfig": "libs/ui/tsconfig.spec.json",
             "setupFile": "libs/ui/src/test-setup.ts"
           }
+        },
+        "storybook": {
+          "builder": "@nrwl/storybook:storybook",
+          "options": {
+            "uiFramework": "@storybook/angular",
+            "port": 4400,
+            "config": {
+              "configFolder": "libs/ui/.storybook"
+            }
+          },
+          "configurations": {
+            "ci": {
+              "quiet": true
+            }
+          }
+        },
+        "build-storybook": {
+          "builder": "@nrwl/storybook:build",
+          "options": {
+            "uiFramework": "@storybook/angular",
+            "outputPath": "dist/storybook/ui",
+            "config": {
+              "configFolder": "libs/ui/.storybook"
+            }
+          },
+          "configurations": {
+            "ci": {
+              "quiet": true
+            }
+          }
         }
       },
       "schematics": {
@@ -208,6 +238,33 @@
           }
         }
       }
+    },
+    "ui-e2e": {
+      "root": "apps/ui-e2e",
+      "sourceRoot": "apps/ui-e2e/src",
+      "projectType": "application",
+      "architect": {
+        "e2e": {
+          "builder": "@nrwl/cypress:cypress",
+          "options": {
+            "cypressConfig": "apps/ui-e2e/cypress.json",
+            "tsConfig": "apps/ui-e2e/tsconfig.e2e.json",
+            "devServerTarget": "ui:storybook"
+          },
+          "configurations": {
+            "production": {
+              "devServerTarget": "ui:serve:production"
+            }
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": ["apps/ui-e2e/tsconfig.e2e.json"],
+            "exclude": ["**/node_modules/**", "!apps/ui-e2e/**"]
+          }
+        }
+      }
     }
   },
   "cli": {

apps/ui-e2e/cypress.json

@@ -0,0 +1,13 @@
+{
+  "baseUrl": "http://localhost:4400",
+  "chromeWebSecurity": false,
+  "fileServerFolder": ".",
+  "fixturesFolder": "./src/fixtures",
+  "integrationFolder": "./src/integration",
+  "modifyObstructiveCode": false,
+  "pluginsFile": "./src/plugins/index",
+  "screenshotsFolder": "../../dist/cypress/apps/ui-e2e/screenshots",
+  "supportFile": "./src/support/index.ts",
+  "video": true,
+  "videosFolder": "../../dist/cypress/apps/ui-e2e/videos"
+}

apps/ui-e2e/src/fixtures/example.json

@@ -0,0 +1,4 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "hello@cypress.io"
+}

apps/ui-e2e/src/integration/menu-bar/menu-bar.component.spec.ts

@@ -0,0 +1,40 @@
+import { UiMenuBarConfig } from '@talus/ui';
+
+const menuConfig: UiMenuBarConfig<string> = {
+  menus: [
+    {
+      label: 'Edit',
+      menuItems: [
+        {
+          icon: 'undo',
+          label: 'Undo',
+          value: 'undo()',
+        },
+        {
+          icon: 'redo',
+          label: 'Redo',
+          value: 'redo()',
+        },
+      ],
+    },
+  ],
+};
+
+describe('ui', () => {
+  beforeEach(() =>
+    cy.visit(
+      `/iframe.html?id=uimenubarcomponent--primary&knob-menuConfig=${JSON.stringify(menuConfig)}`,
+    ),
+  );
+
+  it('should render all menus/menu-items & and open/close menu', () => {
+    cy.get('ui-menu-bar').should('exist');
+
+    cy.get('.mat-menu-trigger').click();
+    cy.get('.mat-menu-content').should('have.length', menuConfig.menus.length);
+    cy.get('.mat-menu-item').should('have.length', menuConfig.menus[0].menuItems.length);
+
+    cy.get('.cdk-overlay-backdrop').click();
+    cy.get('.mat-menu-content').should('not.exist');
+  });
+});

apps/ui-e2e/src/plugins/index.js

@@ -0,0 +1,22 @@
+// ***********************************************************
+// This example plugins/index.js can be used to load plugins
+//
+// You can change the location of this file or turn off loading
+// the plugins file with the 'pluginsFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/plugins-guide
+// ***********************************************************
+
+// This function is called when a project is opened or re-opened (e.g. due to
+// the project's config changing)
+
+const { preprocessTypescript } = require('@nrwl/cypress/plugins/preprocessor');
+
+module.exports = (on, config) => {
+  // `on` is used to hook into various events Cypress emits
+  // `config` is the resolved Cypress config
+
+  // Preprocess Typescript
+  on('file:preprocessor', preprocessTypescript(config));
+};

apps/ui-e2e/src/support/commands.ts

@@ -0,0 +1,31 @@
+// ***********************************************
+// This example commands.js shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+// eslint-disable-next-line @typescript-eslint/no-namespace
+declare namespace Cypress {
+  interface Chainable<Subject> {
+    login(email: string, password: string): void;
+  }
+}
+//
+// -- This is a parent command --
+Cypress.Commands.add('login', (email, password) => {
+  console.log('Custom command example: Login', email, password);
+});
+//
+// -- This is a child command --
+// Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })

apps/ui-e2e/src/support/index.ts

@@ -0,0 +1,17 @@
+// ***********************************************************
+// This example support/index.js is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands';

apps/ui-e2e/tsconfig.e2e.json

@@ -0,0 +1,8 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "sourceMap": false,
+    "outDir": "../../dist/out-tsc"
+  },
+  "include": ["src/**/*.ts", "src/**/*.js"]
+}

apps/ui-e2e/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "types": ["cypress", "node"]
+  },
+  "include": ["**/*.ts", "**/*.js"]
+}

apps/ui-e2e/tslint.json

@@ -0,0 +1 @@
+{ "extends": "../../tslint.json", "rules": {} }

libs/ui/.storybook/addons.js

@@ -0,0 +1 @@
+import '../../../.storybook/addons';

libs/ui/.storybook/config.js

@@ -0,0 +1,5 @@
+import { addDecorator, configure } from '@storybook/angular';
+import { withKnobs } from '@storybook/addon-knobs';
+
+addDecorator(withKnobs);
+configure(require.context('../src/lib', true, /\.stories\.tsx?$/), module);

libs/ui/.storybook/preview-head.html

@@ -0,0 +1 @@
+<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />

libs/ui/.storybook/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "emitDecoratorMetadata": true
+  },
+  "exclude": ["../src/test.ts", "../**/*.spec.ts"],
+  "include": ["../src/**/*"]
+}

libs/ui/.storybook/webpack.config.js

@@ -0,0 +1,7 @@
+const rootWebpackConfig = require('../../../.storybook/webpack.config');
+// Export a function. Accept the base config as the only param.
+module.exports = async ({ config, mode }) => {
+  config = await rootWebpackConfig({ config, mode });
+
+  return config;
+};

libs/ui/README.md

@@ -5,3 +5,14 @@ This library was generated with [Nx](https://nx.dev).
 ## Running unit tests
 
 Run `ng test ui` to execute the unit tests.
+
+## Storybook
+
+- The [Storybook](https://storybook.js.org/) was generated with
+  `nx g @nrwl/angular:storybook-configuration ui`.
+
+- Run it with `nx run ui:storybook`
+
+- Run E2E it with `nx run ui-e2e:e2e`
+
+- Watch E2E it with `nx run ui-e2e:e2e --watch`

libs/ui/src/index.ts

@@ -2,4 +2,3 @@ export * from './lib/menu-bar';
 export * from './lib/scene-viewer';
 export * from './lib/sidenav-shell';
 export * from './lib/toolbar';
-export * from './lib/ui.module';

libs/ui/src/lib/menu-bar/menu-bar.component.spec.ts

@@ -1,6 +1,5 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { UiMenuBarModule } from '@talus/ui';
 import { UiMenuBarComponent } from './menu-bar.component';
 
@@ -38,7 +37,7 @@ describe('UiMenuBarComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      imports: [UiMenuBarModule, BrowserAnimationsModule],
+      imports: [UiMenuBarModule],
     }).compileComponents();
   }));
 

libs/ui/src/lib/menu-bar/menu-bar.component.stories.ts

@@ -0,0 +1,35 @@
+import { object } from '@storybook/addon-knobs';
+import { UiMenuBarComponent, UiMenuBarConfig } from './menu-bar.component';
+import { UiMenuBarModule } from './menu-bar.module';
+
+export default {
+  title: 'UiMenuBarComponent',
+};
+
+export const primary = () => ({
+  moduleMetadata: {
+    imports: [UiMenuBarModule],
+  },
+  component: UiMenuBarComponent,
+  props: {
+    menuConfig: object<UiMenuBarConfig<string>>('menuConfig', {
+      menus: [
+        {
+          label: 'Edit',
+          menuItems: [
+            {
+              icon: 'undo',
+              label: 'Undo',
+              value: 'Test undo value',
+            },
+            {
+              icon: 'redo',
+              label: 'Redo',
+              value: 'Test redo value',
+            },
+          ],
+        },
+      ],
+    }),
+  },
+});

libs/ui/src/lib/menu-bar/menu-bar.module.ts

@@ -1,11 +1,19 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { MatButtonModule, MatIconModule, MatMenuModule, MatToolbarModule } from '@angular/material';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { UiMenuBarComponent } from './menu-bar.component';
 
 @NgModule({
   declarations: [UiMenuBarComponent],
-  imports: [CommonModule, MatButtonModule, MatIconModule, MatMenuModule, MatToolbarModule],
+  imports: [
+    BrowserAnimationsModule,
+    CommonModule,
+    MatButtonModule,
+    MatIconModule,
+    MatMenuModule,
+    MatToolbarModule,
+  ],
   exports: [UiMenuBarComponent],
 })
 export class UiMenuBarModule {}

libs/ui/tsconfig.lib.json

@@ -16,5 +16,5 @@
     "strictInjectionParameters": true,
     "enableResourceInlining": true
   },
-  "exclude": ["src/test-setup.ts", "**/*.spec.ts"]
+  "exclude": ["src/test-setup.ts", "**/*.spec.ts", "**/*.stories.ts"]
 }