feat(storybook): update Angular Storybook to use new Storybook v6 syntax (#5398)

docs/angular/api-angular/generators/stories.md

@@ -32,6 +32,8 @@ The Cypress project to generate the stories under. This is inferred from 'name'
 
 ### generateCypressSpecs
 
+Default: `true`
+
 Type: `boolean`
 
 Automatically generate \*.spec.ts files in the cypress e2e app generated by the cypress-configure generator

docs/angular/api-angular/generators/storybook-configuration.md

@@ -26,6 +26,8 @@ nx g storybook-configuration ... --dry-run
 
 ### configureCypress
 
+Default: `true`
+
 Type: `boolean`
 
 Run the cypress-configure generator
@@ -38,15 +40,19 @@ A directory where the Cypress project will be placed. Placed at the root by defa
 
 ### generateCypressSpecs
 
+Default: `true`
+
 Type: `boolean`
 
 Automatically generate \*.spec.ts files in the cypress e2e app generated by the cypress-configure generator
 
 ### generateStories
 
+Default: `true`
+
 Type: `boolean`
 
-Automatically generate \*.stories.ts files for components declared in this library/application?
+Automatically generate \*.stories.ts files for components declared in this project?
 
 ### linter
 
@@ -62,4 +68,4 @@ The tool to use for running lint checks.
 
 Type: `string`
 
-Library or application name
+Project name

docs/angular/api-react/generators/stories.md

@@ -32,6 +32,8 @@ The Cypress project to generate the stories under. This is inferred from 'projec
 
 ### generateCypressSpecs
 
+Default: `true`
+
 Type: `boolean`
 
 Automatically generate \*.spec.ts files in the cypress e2e app generated by the cypress-configure generator.

docs/angular/api-react/generators/storybook-configuration.md

@@ -26,6 +26,8 @@ nx g storybook-configuration ... --dry-run
 
 ### configureCypress
 
+Default: `true`
+
 Type: `boolean`
 
 Run the cypress-configure generator.
@@ -38,15 +40,19 @@ A directory where the Cypress project will be placed. Placed at the root by defa
 
 ### generateCypressSpecs
 
+Default: `true`
+
 Type: `boolean`
 
 Automatically generate \*.spec.ts files in the cypress e2e app generated by the cypress-configure generator
 
 ### generateStories
 
+Default: `true`
+
 Type: `boolean`
 
-Automatically generate \*.stories.ts files for components declared in this library.
+Automatically generate \*.stories.ts files for components declared in this project?
 
 ### js
 
@@ -70,4 +76,4 @@ The tool to use for running lint checks.
 
 Type: `string`
 
-Library or application name
+Project name

docs/node/api-angular/generators/stories.md

@@ -32,6 +32,8 @@ The Cypress project to generate the stories under. This is inferred from 'name'
 
 ### generateCypressSpecs
 
+Default: `true`
+
 Type: `boolean`
 
 Automatically generate \*.spec.ts files in the cypress e2e app generated by the cypress-configure generator

docs/node/api-angular/generators/storybook-configuration.md

@@ -26,6 +26,8 @@ nx g storybook-configuration ... --dry-run
 
 ### configureCypress
 
+Default: `true`
+
 Type: `boolean`
 
 Run the cypress-configure generator
@@ -38,15 +40,19 @@ A directory where the Cypress project will be placed. Placed at the root by defa
 
 ### generateCypressSpecs
 
+Default: `true`
+
 Type: `boolean`
 
 Automatically generate \*.spec.ts files in the cypress e2e app generated by the cypress-configure generator
 
 ### generateStories
 
+Default: `true`
+
 Type: `boolean`
 
-Automatically generate \*.stories.ts files for components declared in this library/application?
+Automatically generate \*.stories.ts files for components declared in this project?
 
 ### linter
 
@@ -62,4 +68,4 @@ The tool to use for running lint checks.
 
 Type: `string`
 
-Library or application name
+Project name

docs/node/api-react/generators/stories.md

@@ -32,6 +32,8 @@ The Cypress project to generate the stories under. This is inferred from 'projec
 
 ### generateCypressSpecs
 
+Default: `true`
+
 Type: `boolean`
 
 Automatically generate \*.spec.ts files in the cypress e2e app generated by the cypress-configure generator.

docs/node/api-react/generators/storybook-configuration.md

@@ -26,6 +26,8 @@ nx g storybook-configuration ... --dry-run
 
 ### configureCypress
 
+Default: `true`
+
 Type: `boolean`
 
 Run the cypress-configure generator.
@@ -38,15 +40,19 @@ A directory where the Cypress project will be placed. Placed at the root by defa
 
 ### generateCypressSpecs
 
+Default: `true`
+
 Type: `boolean`
 
 Automatically generate \*.spec.ts files in the cypress e2e app generated by the cypress-configure generator
 
 ### generateStories
 
+Default: `true`
+
 Type: `boolean`
 
-Automatically generate \*.stories.ts files for components declared in this library.
+Automatically generate \*.stories.ts files for components declared in this project?
 
 ### js
 
@@ -70,4 +76,4 @@ The tool to use for running lint checks.
 
 Type: `string`
 
-Library or application name
+Project name

docs/react/api-angular/generators/stories.md

@@ -32,6 +32,8 @@ The Cypress project to generate the stories under. This is inferred from 'name'
 
 ### generateCypressSpecs
 
+Default: `true`
+
 Type: `boolean`
 
 Automatically generate \*.spec.ts files in the cypress e2e app generated by the cypress-configure generator

docs/react/api-angular/generators/storybook-configuration.md

@@ -26,6 +26,8 @@ nx g storybook-configuration ... --dry-run
 
 ### configureCypress
 
+Default: `true`
+
 Type: `boolean`
 
 Run the cypress-configure generator
@@ -38,15 +40,19 @@ A directory where the Cypress project will be placed. Placed at the root by defa
 
 ### generateCypressSpecs
 
+Default: `true`
+
 Type: `boolean`
 
 Automatically generate \*.spec.ts files in the cypress e2e app generated by the cypress-configure generator
 
 ### generateStories
 
+Default: `true`
+
 Type: `boolean`
 
-Automatically generate \*.stories.ts files for components declared in this library/application?
+Automatically generate \*.stories.ts files for components declared in this project?
 
 ### linter
 
@@ -62,4 +68,4 @@ The tool to use for running lint checks.
 
 Type: `string`
 
-Library or application name
+Project name

docs/react/api-react/generators/stories.md

@@ -32,6 +32,8 @@ The Cypress project to generate the stories under. This is inferred from 'projec
 
 ### generateCypressSpecs
 
+Default: `true`
+
 Type: `boolean`
 
 Automatically generate \*.spec.ts files in the cypress e2e app generated by the cypress-configure generator.

docs/react/api-react/generators/storybook-configuration.md

@@ -26,6 +26,8 @@ nx g storybook-configuration ... --dry-run
 
 ### configureCypress
 
+Default: `true`
+
 Type: `boolean`
 
 Run the cypress-configure generator.
@@ -38,15 +40,19 @@ A directory where the Cypress project will be placed. Placed at the root by defa
 
 ### generateCypressSpecs
 
+Default: `true`
+
 Type: `boolean`
 
 Automatically generate \*.spec.ts files in the cypress e2e app generated by the cypress-configure generator
 
 ### generateStories
 
+Default: `true`
+
 Type: `boolean`
 
-Automatically generate \*.stories.ts files for components declared in this library.
+Automatically generate \*.stories.ts files for components declared in this project?
 
 ### js
 
@@ -70,4 +76,4 @@ The tool to use for running lint checks.
 
 Type: `string`
 
-Library or application name
+Project name

e2e/angular/src/storybook.test.ts

@@ -10,7 +10,7 @@ import {
   tmpProjPath,
   uniq,
 } from '@nrwl/e2e/utils';
-import { mkdirSync, writeFileSync } from 'fs';
+import { writeFileSync } from 'fs';
 
 describe('Storybook schematics', () => {
   let proj: string;
@@ -60,15 +60,15 @@ describe('Storybook schematics', () => {
       const myapp = uniq('myapp');
       runCLI(`generate @nrwl/angular:app ${myapp} --no-interactive`);
 
-      const mylib = uniq('test-ui-lib');
-      createTestUILib(mylib);
-      const mylib2 = uniq('test-ui-lib-react');
-      runCLI(`generate @nrwl/react:lib ${mylib2} --no-interactive`);
+      const myAngularLib = uniq('test-ui-lib');
+      createTestUILib(myAngularLib);
+      const myReactLib = uniq('test-ui-lib-react');
+      runCLI(`generate @nrwl/react:lib ${myReactLib} --no-interactive`);
       runCLI(
-        `generate @nrwl/react:component Button --project=${mylib2} --no-interactive`
+        `generate @nrwl/react:component Button --project=${myReactLib} --no-interactive`
       );
       writeFileSync(
-        tmpProjPath(`libs/${mylib2}/src/lib/button.tsx`),
+        tmpProjPath(`libs/${myReactLib}/src/lib/button.tsx`),
         `
           import React from 'react';
 
@@ -95,7 +95,7 @@ describe('Storybook schematics', () => {
             `
       );
       writeFileSync(
-        tmpProjPath(`libs/${mylib2}/src/lib/button.stories.tsx`),
+        tmpProjPath(`libs/${myReactLib}/src/lib/button.stories.tsx`),
         `
             import React from 'react';
             import { Button, ButtonStyle } from './button';
@@ -117,18 +117,18 @@ describe('Storybook schematics', () => {
       );
 
       runCLI(
-        `generate @nrwl/angular:storybook-configuration ${mylib} --configureCypress --generateStories --generateCypressSpecs --no-interactive`
+        `generate @nrwl/angular:storybook-configuration ${myAngularLib} --configureCypress --generateStories --generateCypressSpecs --no-interactive`
       );
       runCLI(
-        `generate @nrwl/angular:stories ${mylib} --generateCypressSpecs --no-interactive`
+        `generate @nrwl/angular:stories ${myAngularLib} --generateCypressSpecs --no-interactive`
       );
 
       writeFileSync(
         tmpProjPath(
-          `apps/${mylib}-e2e/src/integration/test-button/test-button.component.spec.ts`
+          `apps/${myAngularLib}-e2e/src/integration/test-button/test-button.component.spec.ts`
         ),
         `
-            describe('test-ui-lib3726865', () => {
+            describe('${myAngularLib}', () => {
 
           it('should render the component', () => {
             cy.visit('/iframe.html?id=testbuttoncomponent--primary&knob-buttonType=button&knob-style=default&knob-age&knob-isDisabled=false');
@@ -148,12 +148,17 @@ describe('Storybook schematics', () => {
       );
 
       runCLI(
-        `generate @nrwl/react:storybook-configuration ${mylib2} --configureCypress --no-interactive`
+        `generate @nrwl/react:storybook-configuration ${myReactLib} --configureCypress --no-interactive`
       );
 
-      mkdirSync(tmpProjPath(`apps/${mylib2}-e2e/src/integration`));
+      // The following line (mkdirSync...) is not needed,
+      // since the above schematic creates this directory.
+      // So, if we leave it there, there's an error saying the directory exists.
+      // I am not sure how it worked as it was :/
+
+      // mkdirSync(tmpProjPath(`apps/${myReactLib}-e2e/src/integration`));
       writeFileSync(
-        tmpProjPath(`apps/${mylib2}-e2e/src/integration/button.spec.ts`),
+        tmpProjPath(`apps/${myReactLib}-e2e/src/integration/button.spec.ts`),
         `
         describe('react-ui', () => {
           it('should render the component', () => {
@@ -174,15 +179,15 @@ describe('Storybook schematics', () => {
       );
 
       if (runCypressTests()) {
-        expect(runCLI(`run ${mylib}-e2e:e2e --no-watch`)).toContain(
+        expect(runCLI(`run ${myAngularLib}-e2e:e2e --no-watch`)).toContain(
           'All specs passed!'
         );
       }
 
-      runCLI(`run ${mylib}:build-storybook`);
+      runCLI(`run ${myAngularLib}:build-storybook`);
 
-      checkFilesExist(`dist/storybook/${mylib}/index.html`);
-      expect(readFile(`dist/storybook/${mylib}/index.html`)).toContain(
+      checkFilesExist(`dist/storybook/${myAngularLib}/index.html`);
+      expect(readFile(`dist/storybook/${myAngularLib}/index.html`)).toContain(
         `<title>Storybook</title>`
       );
     }, 1000000);
@@ -234,6 +239,7 @@ describe('Storybook schematics', () => {
 
             export default {
               title: 'My Test Cmp',
+              component: MyTestCmpComponent,
             };
             
             let x = 'hi';
@@ -242,7 +248,6 @@ describe('Storybook schematics', () => {
               moduleMetadata: {
                 imports: [],
               },
-              component: MyTestCmpComponent,
               props: {},
             });
         `

packages/angular/src/schematics/component-cypress-spec/component-cypress-spec.ts

@@ -29,7 +29,7 @@ export default function (schema: CreateComponentSpecFileSchema): Rule {
 
 export interface CreateComponentSpecFileSchema {
   projectName: string;
-  libPath: string;
+  projectPath: string;
   componentName: string;
   componentPath: string;
   componentFileName: string;
@@ -38,7 +38,7 @@ export interface CreateComponentSpecFileSchema {
 
 export function createComponentSpecFile({
   projectName,
-  libPath,
+  projectPath,
   componentName,
   componentPath,
   componentFileName,
@@ -50,7 +50,7 @@ export function createComponentSpecFile({
       getProjectConfig(tree, e2eProjectName).sourceRoot
     }/integration`;
     const fullComponentPath = join(
-      normalize(libPath),
+      normalize(projectPath),
       componentPath,
       `${componentFileName}.ts`
     );

packages/angular/src/schematics/component-cypress-spec/schema.json

@@ -5,12 +5,12 @@
   "properties": {
     "projectName": {
       "type": "string",
-      "description": "Name of the library from angular.json",
+      "description": "Name of the project from angular.json",
       "examples": ["ui-samples"]
     },
-    "libPath": {
+    "projectPath": {
       "type": "string",
-      "description": "Path to the library",
+      "description": "Path to the project",
       "examples": ["libs/ui-samples"]
     },
     "componentName": {
@@ -20,7 +20,7 @@
     },
     "componentPath": {
       "type": "string",
-      "description": "Relative path to the component file from the library root",
+      "description": "Relative path to the component file from the project root",
       "examples": ["awesome"]
     },
     "componentFileName": {
@@ -35,7 +35,7 @@
   },
   "required": [
     "projectName",
-    "libPath",
+    "projectPath",
     "componentName",
     "componentPath",
     "componentFileName"

packages/angular/src/schematics/component-story/component-story.ts

@@ -18,7 +18,7 @@ import { join, normalize } from '@angular-devkit/core';
 import { wrapAngularDevkitSchematic } from '@nrwl/devkit/ngcli-adapter';
 
 export interface CreateComponentStoriesFileSchema {
-  libPath: string;
+  projectPath: string;
   componentName: string;
   componentPath: string;
   componentFileName: string;
@@ -29,7 +29,7 @@ export default function (schema: CreateComponentStoriesFileSchema): Rule {
 }
 
 export function createComponentStoriesFile({
-  libPath,
+  projectPath,
   componentName,
   componentPath,
   componentFileName,
@@ -37,7 +37,7 @@ export function createComponentStoriesFile({
   return (tree: Tree, context: SchematicContext): Rule => {
     const props = getInputDescriptors(
       tree,
-      join(normalize(libPath), componentPath, `${componentFileName}.ts`)
+      join(normalize(projectPath), componentPath, `${componentFileName}.ts`)
     );
     return applyWithSkipExisting(url('./files'), [
       template({
@@ -46,7 +46,7 @@ export function createComponentStoriesFile({
         props,
         tmpl: '',
       }),
-      move(`${libPath}/${componentPath}`),
+      move(`${projectPath}/${componentPath}`),
     ]);
   };
 }

packages/angular/src/schematics/component-story/files/__componentFileName__.stories.ts__tmpl__

@@ -2,14 +2,14 @@
 import { <%=componentName%> } from './<%=componentFileName%>';
 
 export default {
-  title: '<%=componentName%>'
+  title: '<%=componentName%>',
+  component: <%=componentName%>
 }
 
 export const primary = () => ({
   moduleMetadata: {
     imports: []
   },
-  component: <%=componentName%>,
   props: {<% for (let prop of props) { %>
     <%=prop.name%>: <%=prop.type%>('<%=prop.name%>', <%=prop.defaultValue%>),<% } %>
   }

packages/angular/src/schematics/component-story/schema.json

@@ -3,9 +3,9 @@
   "id": "component-story",
   "type": "object",
   "properties": {
-    "libPath": {
+    "projectPath": {
       "type": "string",
-      "description": "Path to the library",
+      "description": "Path to the project",
       "examples": ["libs/ui-samples"]
     },
     "moduleFileName": {
@@ -27,7 +27,7 @@
     },
     "componentPath": {
       "type": "string",
-      "description": "Relative path to the component file from the library root",
+      "description": "Relative path to the component file from the project root",
       "examples": ["awesome"]
     },
     "componentFileName": {
@@ -36,5 +36,10 @@
       "examples": ["awesome.component"]
     }
   },
-  "required": ["libPath", "componentName", "componentPath", "componentFileName"]
+  "required": [
+    "projectPath",
+    "componentName",
+    "componentPath",
+    "componentFileName"
+  ]
 }

packages/angular/src/schematics/stories/schema.json

@@ -14,7 +14,8 @@
     },
     "generateCypressSpecs": {
       "type": "boolean",
-      "description": "Automatically generate *.spec.ts files in the cypress e2e app generated by the cypress-configure generator"
+      "description": "Automatically generate *.spec.ts files in the cypress e2e app generated by the cypress-configure generator",
+      "default": true
     },
     "cypressProject": {
       "type": "string",

packages/angular/src/schematics/stories/stories.ts

@@ -39,12 +39,12 @@ export function createAllStories(
   cypressProject?: string
 ): Rule {
   return (tree: Tree, context: SchematicContext) => {
-    context.logger.debug('adding .storybook folder to lib');
+    context.logger.debug('adding .storybook folder to project');
 
-    const libPath = projectRootPath(tree, projectName);
+    const projectPath = projectRootPath(tree, projectName);
 
     let moduleFilePaths = [] as string[];
-    tree.getDir(libPath).visit((filePath) => {
+    tree.getDir(projectPath).visit((filePath) => {
       if (!filePath.endsWith('.module.ts')) {
         return;
       }
@@ -221,7 +221,7 @@ export function createAllStories(
             .map((info) =>
               chain([
                 schematic<CreateComponentStoriesFileSchema>('component-story', {
-                  libPath: modulePath,
+                  projectPath: modulePath,
                   componentName: info.name,
                   componentPath: info.path,
                   componentFileName: info.componentFileName,
@@ -231,7 +231,7 @@ export function createAllStories(
                       'component-cypress-spec',
                       {
                         projectName,
-                        libPath: modulePath,
+                        projectPath: modulePath,
                         cypressProject,
                         componentName: info.name,
                         componentPath: info.path,

packages/angular/src/schematics/storybook-configuration/schema.json

@@ -5,7 +5,7 @@
   "properties": {
     "name": {
       "type": "string",
-      "description": "Library or application name",
+      "description": "Project name",
       "$default": {
         "$source": "argv",
         "index": 0
@@ -14,17 +14,20 @@
     "configureCypress": {
       "type": "boolean",
       "description": "Run the cypress-configure generator",
-      "x-prompt": "Configure a cypress e2e app to run against the storybook instance?"
+      "x-prompt": "Configure a cypress e2e app to run against the storybook instance?",
+      "default": true
     },
     "generateStories": {
       "type": "boolean",
-      "description": "Automatically generate *.stories.ts files for components declared in this library/application?",
-      "x-prompt": "Automatically generate *.stories.ts files for components declared in this library/application?"
+      "description": "Automatically generate *.stories.ts files for components declared in this project?",
+      "x-prompt": "Automatically generate *.stories.ts files for components declared in this project?",
+      "default": true
     },
     "generateCypressSpecs": {
       "type": "boolean",
       "description": "Automatically generate *.spec.ts files in the cypress e2e app generated by the cypress-configure generator",
-      "x-prompt": "Automatically generate *.spec.ts files in the cypress e2e app generated by the cypress-configure generator?"
+      "x-prompt": "Automatically generate *.spec.ts files in the cypress e2e app generated by the cypress-configure generator?",
+      "default": true
     },
     "cypressDirectory": {
       "type": "string",

packages/react/src/generators/stories/schema.json

@@ -16,7 +16,8 @@
     "generateCypressSpecs": {
       "type": "boolean",
       "description": "Automatically generate *.spec.ts files in the cypress e2e app generated by the cypress-configure generator.",
-      "x-prompt": "Do you want to generate Cypress specs as well?"
+      "x-prompt": "Do you want to generate Cypress specs as well?",
+      "default": true
     },
     "cypressProject": {
       "type": "string",

packages/react/src/generators/stories/stories.ts

@@ -66,10 +66,10 @@ export async function createAllStories(
   const project = projects.get(projectName);
 
   const { sourceRoot, projectType } = project;
-  const libPath = projectRootPath(tree, sourceRoot, projectType);
+  const projectPath = projectRootPath(tree, sourceRoot, projectType);
 
   let componentPaths: string[] = [];
-  visitNotIgnoredFiles(tree, libPath, (path) => {
+  visitNotIgnoredFiles(tree, projectPath, (path) => {
     if (
       (path.endsWith('.tsx') && !path.endsWith('.spec.tsx')) ||
       (path.endsWith('.js') && !path.endsWith('.spec.js')) ||

packages/react/src/generators/storybook-configuration/schema.json

@@ -6,7 +6,7 @@
   "properties": {
     "name": {
       "type": "string",
-      "description": "Library or application name",
+      "description": "Project name",
       "$default": {
         "$source": "argv",
         "index": 0
@@ -15,17 +15,20 @@
     "configureCypress": {
       "type": "boolean",
       "description": "Run the cypress-configure generator.",
-      "x-prompt": "Configure a cypress e2e app to run against the storybook instance?"
+      "x-prompt": "Configure a cypress e2e app to run against the storybook instance?",
+      "default": true
     },
     "generateStories": {
       "type": "boolean",
-      "description": "Automatically generate *.stories.ts files for components declared in this library.",
-      "x-prompt": "Automatically generate story files for components declared in this library?"
+      "description": "Automatically generate *.stories.ts files for components declared in this project?",
+      "x-prompt": "Automatically generate *.stories.ts files for components declared in this project?",
+      "default": true
     },
     "generateCypressSpecs": {
       "type": "boolean",
       "description": "Automatically generate *.spec.ts files in the cypress e2e app generated by the cypress-configure generator",
-      "x-prompt": "Automatically generate *.spec.ts files in the cypress e2e app generated by the cypress-configure generator?"
+      "x-prompt": "Automatically generate *.spec.ts files in the cypress e2e app generated by the cypress-configure generator?",
+      "default": true
     },
     "cypressDirectory": {
       "type": "string",

packages/storybook/src/generators/configuration/configuration.ts

@@ -42,12 +42,7 @@ export async function configurationGenerator(
   });
   tasks.push(initTask);
 
-  createRootStorybookDir(
-    tree,
-    schema.name,
-    schema.js,
-    workspaceStorybookVersion
-  );
+  createRootStorybookDir(tree, schema.js, workspaceStorybookVersion);
   createProjectStorybookDir(
     tree,
     schema.name,
@@ -90,18 +85,15 @@ function normalizeSchema(schema: StorybookConfigureSchema) {
 
 function createRootStorybookDir(
   tree: Tree,
-  projectName: string,
   js: boolean,
   workspaceStorybookVersion: string
 ) {
   if (tree.exists('.storybook')) {
     return;
   }
-  const { projectType } = readProjectConfiguration(tree, projectName);
-  const projectDirectory = projectType === 'application' ? 'app' : 'lib';
   logger.debug(
-    `adding .storybook folder to ${projectDirectory} -\n
-  based on the Storybook version installed: ${workspaceStorybookVersion}, we'll bootstrap a scaffold for that particular version.`
+    `adding .storybook folder to the root directory - 
+     based on the Storybook version installed (v${workspaceStorybookVersion}), we'll bootstrap a scaffold for that particular version.`
   );
   const templatePath = join(
     __dirname,

packages/storybook/src/generators/migrate-defaults-5-to-6/migrate-defaults-5-to-6.ts

@@ -74,7 +74,7 @@ export function migrateDefaultsGenerator(
 }
 
 export function migrateAllStorybookInstances(tree: Tree, keepOld: boolean) {
-  logger.debug('adding .storybook folder to lib');
+  logger.debug('adding .storybook folder to project');
   const projects = getProjects(tree);
   const projectsThatHaveStorybookConfiguration: {
     name: string;