chore: Move some schematics into @nrwl/angular

packages/angular/collection.json

@@ -52,6 +52,27 @@
       "factory": "./src/schematics/upgrade-module/upgrade-module",
       "schema": "./src/schematics/upgrade-module/schema.json",
       "description": "Add an upgrade module"
+    },
+
+    "stories": {
+      "factory": "./src/schematics/stories/stories",
+      "schema": "./src/schematics/stories/schema.json",
+      "description": "Create stories/specs for all components declared in a library",
+      "hidden": false
+    },
+
+    "component-cypress-spec": {
+      "factory": "./src/schematics/component-cypress-spec/component-cypress-spec",
+      "schema": "./src/schematics/component-cypress-spec/schema.json",
+      "description": "Create a cypress spec for a ui component that has a story",
+      "hidden": true
+    },
+
+    "component-story": {
+      "factory": "./src/schematics/component-story/component-story",
+      "schema": "./src/schematics/component-story/schema.json",
+      "description": "Create a stories.ts file for a component",
+      "hidden": true
     }
   }
 }

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

@@ -1,34 +1,30 @@
 import {
+  apply,
   chain,
-  externalSchematic,
+  mergeWith,
+  move,
   Rule,
-  Tree,
   SchematicContext,
-  mergeWith,
-  apply,
-  url,
+  SchematicsException,
   template,
-  move,
-  SchematicsException
+  Tree,
+  url
 } from '@angular-devkit/schematics';
 import {
-  getSourceNodes,
   findNodes,
-  getDecoratorMetadata,
-  findNode
+  getDecoratorMetadata
 } from '@schematics/angular/utility/ast-utils';
+import { getProject } from '@schematics/angular/utility/project';
 import {
-  SyntaxKind,
+  PropertyAssignment,
   PropertyDeclaration,
-  PropertyAssignment
+  SyntaxKind
 } from 'typescript';
+import { getTsSourceFile } from '../../utils/ast-utils';
 import {
-  CreateComponentStoriesFileSchema,
   getInputPropertyDeclarations,
   getKnobType
 } from '../component-story/component-story';
-import { getTsSourceFile } from '../../utils/utils';
-import { getProject } from '@schematics/angular/utility/project';
 
 export default function(schema: CreateComponentSpecFileSchema): Rule {
   return chain([createComponentSpecFile(schema)]);

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

@@ -1,21 +1,20 @@
 import {
+  apply,
   chain,
-  externalSchematic,
+  mergeWith,
+  move,
   Rule,
-  Tree,
   SchematicContext,
-  mergeWith,
-  apply,
-  url,
   template,
-  move
+  Tree,
+  url
 } from '@angular-devkit/schematics';
-import { PropertyDeclaration, SyntaxKind } from 'typescript';
 import {
-  getSourceNodes,
-  findNodes
+  findNodes,
+  getSourceNodes
 } from '@schematics/angular/utility/ast-utils';
-import { getTsSourceFile } from '../../utils/utils';
+import { PropertyDeclaration, SyntaxKind } from 'typescript';
+import { getTsSourceFile } from '../../utils/ast-utils';
 
 export interface CreateComponentStoriesFileSchema {
   libPath: string;

packages/storybook/src/schematics/storybook-stories/storybook-stories.spec.ts → packages/angular/src/schematics/stories/stories.spec.ts

@@ -1,18 +1,13 @@
 import { Tree } from '@angular-devkit/schematics';
-import { createEmptyWorkspace } from '@nrwl/workspace/testing';
-import { runSchematic, createTestUILib } from '../../utils/testing';
-import { readJsonInTree } from '@nrwl/workspace';
-import { join, normalize } from '@angular-devkit/core';
+import { CypressConfigureSchema } from '../../../../storybook/src/schematics/cypress-project/cypress-project';
+import { StorybookStoriesSchema } from './stories';
 import {
-  babelCoreVersion,
-  storybookAddonKnobsVersion,
-  storybookAngularVersion,
-  babelLoaderVersion
-} from '../../utils/versions';
-import { StorybookStoriesSchema } from './storybook-stories';
-import { CypressConfigureSchema } from '../cypress-configure/cypress-configure';
+  createTestUILib,
+  runSchematic,
+  runExternalSchematic
+} from '../../utils/testing';
 
-describe('schematic:storybook-stories', () => {
+describe('schematic:stories', () => {
   let appTree: Tree;
 
   beforeEach(async () => {
@@ -22,7 +17,7 @@ describe('schematic:storybook-stories', () => {
   describe('Storybook stories', () => {
     it('should generate stories.ts files', async () => {
       const tree = await runSchematic<StorybookStoriesSchema>(
-        'storybook-stories',
+        'stories',
         { name: 'test-ui-lib', generateCypressSpecs: false },
         appTree
       );
@@ -52,13 +47,14 @@ describe('schematic:storybook-stories', () => {
     });
 
     it('should generate cypress spec files', async () => {
-      let tree = await runSchematic<CypressConfigureSchema>(
-        'cypress-configure',
+      let tree = await runExternalSchematic(
+        '@nrwl/storybook',
+        'cypress-project',
         { name: 'test-ui-lib' },
         appTree
       );
       tree = await runSchematic<StorybookStoriesSchema>(
-        'storybook-stories',
+        'stories',
         { name: 'test-ui-lib', generateCypressSpecs: true },
         tree
       );
@@ -99,18 +95,19 @@ describe('schematic:storybook-stories', () => {
     });
 
     it('should run twice without errors', async () => {
-      let tree = await runSchematic<CypressConfigureSchema>(
-        'cypress-configure',
+      let tree = await runExternalSchematic(
+        '@nrwl/storybook',
+        'cypress-project',
         { name: 'test-ui-lib' },
         appTree
       );
       tree = await runSchematic<StorybookStoriesSchema>(
-        'storybook-stories',
+        'stories',
         { name: 'test-ui-lib', generateCypressSpecs: false },
         tree
       );
       tree = await runSchematic<StorybookStoriesSchema>(
-        'storybook-stories',
+        'stories',
         { name: 'test-ui-lib', generateCypressSpecs: true },
         tree
       );

packages/storybook/src/schematics/storybook-stories/storybook-stories.ts → packages/angular/src/schematics/stories/stories.ts

@@ -1,40 +1,20 @@
 import {
   chain,
-  externalSchematic,
   Rule,
-  Tree,
+  schematic,
   SchematicContext,
   SchematicsException,
-  mergeWith,
-  apply,
-  url,
-  template,
-  move,
-  schematic
+  Tree
 } from '@angular-devkit/schematics';
 import {
-  getFirstNgModuleName,
   getDecoratorMetadata,
-  getSourceNodes,
-  findNodes
+  getFirstNgModuleName
 } from '@schematics/angular/utility/ast-utils';
 import { getProject } from '@schematics/angular/utility/project';
-import {
-  SourceFile,
-  createSourceFile,
-  ScriptTarget,
-  SyntaxKind,
-  Identifier,
-  PropertyDeclaration,
-  TypeReference
-} from 'typescript';
-import { NgModule } from '@angular/core';
-import {
-  createComponentStoriesFile,
-  CreateComponentStoriesFileSchema
-} from '../component-story/component-story';
-import { getTsSourceFile } from '../../utils/utils';
+import { SyntaxKind } from 'typescript';
+import { getTsSourceFile } from '../../utils/ast-utils';
 import { CreateComponentSpecFileSchema } from '../component-cypress-spec/component-cypress-spec';
+import { CreateComponentStoriesFileSchema } from '../component-story/component-story';
 
 export interface StorybookStoriesSchema {
   name: string;

packages/angular/src/utils/ast-utils.ts

@@ -8,7 +8,7 @@ import {
   InsertChange,
   RemoveChange
 } from '@nrwl/workspace/src/utils/ast-utils';
-import { Tree } from '@angular-devkit/schematics';
+import { Tree, SchematicsException } from '@angular-devkit/schematics';
 import * as path from 'path';
 import { toFileName } from '@nrwl/workspace/src/utils/name-utils';
 
@@ -598,3 +598,19 @@ function getMatchingObjectLiteralElement(
       })[0]
   );
 }
+
+export function getTsSourceFile(host: Tree, path: string): ts.SourceFile {
+  const buffer = host.read(path);
+  if (!buffer) {
+    throw new SchematicsException(`Could not read TS file (${path}).`);
+  }
+  const content = buffer.toString();
+  const source = ts.createSourceFile(
+    path,
+    content,
+    ts.ScriptTarget.Latest,
+    true
+  );
+
+  return source;
+}

packages/angular/src/utils/testing.ts

@@ -1,17 +1,33 @@
 import { join } from 'path';
 import { SchematicTestRunner } from '@angular-devkit/schematics/testing';
-import { Tree, Rule } from '@angular-devkit/schematics';
+import { Tree, Rule, externalSchematic } from '@angular-devkit/schematics';
 import { names, toFileName } from '@nrwl/workspace/src/utils/name-utils';
+import { createEmptyWorkspace } from '@nrwl/workspace/testing';
 
 const testRunner = new SchematicTestRunner(
   '@nrwl/angular',
   join(__dirname, '../../collection.json')
 );
 
-export function runSchematic(schematicName: string, options: any, tree: Tree) {
+export function runSchematic<SchemaOptions = any>(
+  schematicName: string,
+  options: SchemaOptions,
+  tree: Tree
+) {
   return testRunner.runSchematicAsync(schematicName, options, tree).toPromise();
 }
 
+export function runExternalSchematic<SchemaOptions = any>(
+  collectionName: string,
+  schematicName: string,
+  options: SchemaOptions,
+  tree: Tree
+) {
+  return testRunner
+    .runExternalSchematicAsync(collectionName, schematicName, options, tree)
+    .toPromise();
+}
+
 export function callRule(rule: Rule, tree: Tree) {
   return testRunner.callRule(rule, tree).toPromise();
 }
@@ -150,3 +166,59 @@ export function createLib(tree: Tree, libName: string): Tree {
   );
   return tree;
 }
+
+export async function createTestUILib(): Promise<Tree> {
+  let appTree = Tree.empty();
+  appTree = createEmptyWorkspace(appTree);
+  appTree = await callRule(
+    externalSchematic('@nrwl/angular', 'library', {
+      name: 'test-ui-lib'
+    }),
+    appTree
+  );
+  appTree = await callRule(
+    externalSchematic('@schematics/angular', 'component', {
+      name: 'test-button',
+      project: 'test-ui-lib'
+    }),
+    appTree
+  );
+  appTree.overwrite(
+    'libs/test-ui-lib/src/lib/test-button/test-button.component.ts',
+    `
+import { Component, OnInit, Input } from '@angular/core';
+
+export type ButtonStyle = 'default' | 'primary' | 'accent';
+
+@Component({
+  selector: 'proj-test-button',
+  templateUrl: './test-button.component.html',
+  styleUrls: ['./test-button.component.css']
+})
+export class TestButtonComponent implements OnInit {
+  @Input('buttonType') type = 'button';
+  @Input() style: ButtonStyle = 'default';
+  @Input() age: number;
+  @Input() isOn = false;
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}
+`
+  );
+  appTree.overwrite(
+    'libs/test-ui-lib/src/lib/test-button/test-button.component.html',
+    `<button [attr.type]="type" [ngClass]="style"></button>`
+  );
+  appTree = await callRule(
+    externalSchematic('@schematics/angular', 'component', {
+      name: 'test-other',
+      project: 'test-ui-lib'
+    }),
+    appTree
+  );
+  return appTree;
+}

packages/storybook/collection.json

@@ -8,35 +8,17 @@
       "description": "Add storybook configuration to the workspace",
       "hidden": true
     },
-    "storybook-configure": {
-      "factory": "./src/schematics/storybook-configure/storybook-configure",
-      "schema": "./src/schematics/storybook-configure/schema.json",
+    "configuration": {
+      "factory": "./src/schematics/configuration/configuration",
+      "schema": "./src/schematics/configuration/schema.json",
       "description": "Add storybook configuration to a ui library",
       "hidden": false
     },
-    "storybook-stories": {
-      "factory": "./src/schematics/storybook-stories/storybook-stories",
-      "schema": "./src/schematics/storybook-stories/schema.json",
-      "description": "Create stories/specs for all components declared in a library",
-      "hidden": false
-    },
-    "cypress-configure": {
-      "factory": "./src/schematics/cypress-configure/cypress-configure",
-      "schema": "./src/schematics/cypress-configure/schema.json",
+    "cypress-project": {
+      "factory": "./src/schematics/cypress-project/cypress-project",
+      "schema": "./src/schematics/cypress-project/schema.json",
       "description": "Add cypress e2e app to test a ui library that is set up for storybook",
       "hidden": false
-    },
-    "component-cypress-spec": {
-      "factory": "./src/schematics/component-cypress-spec/component-cypress-spec",
-      "schema": "./src/schematics/component-cypress-spec/schema.json",
-      "description": "Create a cypress spec for a ui component that has a story",
-      "hidden": true
-    },
-    "component-story": {
-      "factory": "./src/schematics/component-story/component-story",
-      "schema": "./src/schematics/component-story/schema.json",
-      "description": "Create a stories.ts file for a component",
-      "hidden": true
     }
   }
 }