feat(react): adds and updates React schematics with more options

- Added component schematic that adds to existing project.
    * Supports CSS-in-JS styles, functional components, etc.
- Lib and app schematics now support new style, funtional components options (same as component)

docs/api-react/schematics/application.md

@@ -11,6 +11,14 @@ ng generate application ...
 
 ## Options
 
+### classComponent
+
+Default: `false`
+
+Type: `boolean`
+
+Use class components instead of functional component
+
 ### directory
 
 Type: `string`
@@ -31,6 +39,14 @@ Type: `string`
 
 The name of the application.
 
+### pascalCaseFiles
+
+Default: `false`
+
+Type: `boolean`
+
+Use pascal case component file name (e.g. App.tsx)®
+
 ### skipFormat
 
 Default: `false`

docs/api-react/schematics/component.md

@@ -0,0 +1,64 @@
+# component
+
+Create a component
+
+## Usage
+
+```bash
+ng generate component ...
+
+```
+
+## Options
+
+### classComponent
+
+Default: `false`
+
+Type: `boolean`
+
+Use class components instead of functional component
+
+### export
+
+Default: `false`
+
+Type: `boolean`
+
+When true, the component is exported from the project index.ts (if it exists).
+
+### name
+
+Type: `string`
+
+The name of the component.
+
+### pascalCaseFiles
+
+Default: `false`
+
+Type: `boolean`
+
+Use pascal case component file name (e.g. App.tsx)
+
+### project
+
+Type: `string`
+
+The name of the project (as specified in angular.json).
+
+### skipTests
+
+Default: `false`
+
+Type: `boolean`
+
+When true, does not create "spec.ts" test files for the new component.
+
+### style
+
+Default: `css`
+
+Type: `string`
+
+The file extension to be used for style files.

docs/api-react/schematics/library.md

@@ -23,6 +23,14 @@ Type: `string`
 
 Library name
 
+### pascalCaseFiles
+
+Default: `false`
+
+Type: `boolean`
+
+Use pascal case component file name (e.g. App.tsx)®
+
 ### skipFormat
 
 Default: `false`

packages/react/collection.json

@@ -22,6 +22,12 @@
       "schema": "./src/schematics/library/schema.json",
       "aliases": ["lib"],
       "description": "Create a library"
+    },
+
+    "component": {
+      "factory": "./src/schematics/component/component",
+      "schema": "./src/schematics/component/schema.json",
+      "description": "Create a component"
     }
   }
 }

packages/react/src/schematics/application/application.spec.ts

@@ -192,7 +192,7 @@ describe('app', () => {
     const tree = await runSchematic(
       'app',
       {
-        name: 'my-App'
+        name: 'my-app'
       },
       appTree
     );
@@ -206,7 +206,7 @@ describe('app', () => {
     const tree = await runSchematic(
       'app',
       {
-        name: 'my-App'
+        name: 'my-app'
       },
       appTree
     );
@@ -220,7 +220,7 @@ describe('app', () => {
     const tree = await runSchematic(
       'app',
       {
-        name: 'my-App'
+        name: 'my-app'
       },
       appTree
     );
@@ -265,7 +265,7 @@ describe('app', () => {
     const tree = await runSchematic(
       'app',
       {
-        name: 'my-App'
+        name: 'my-app'
       },
       appTree
     );
@@ -284,7 +284,7 @@ describe('app', () => {
     const tree = await runSchematic(
       'app',
       {
-        name: 'my-App'
+        name: 'my-app'
       },
       appTree
     );
@@ -301,20 +301,6 @@ describe('app', () => {
     });
   });
 
-  describe('--prefix', () => {
-    it('should use the prefix in the index.html', async () => {
-      const tree = await runSchematic(
-        'app',
-        { name: 'myApp', prefix: 'prefix' },
-        appTree
-      );
-
-      expect(tree.readContent('apps/my-app/src/index.html')).toContain(
-        '<prefix-root></prefix-root>'
-      );
-    });
-  });
-
   describe('--unit-test-runner none', () => {
     it('should not generate test configuration', async () => {
       const tree = await runSchematic(
@@ -345,4 +331,115 @@ describe('app', () => {
       expect(angularJson.projects['my-app-e2e']).toBeUndefined();
     });
   });
+
+  describe('--pascalCaseFiles', () => {
+    it('should use upper case app file', async () => {
+      const tree = await runSchematic(
+        'app',
+        { name: 'myApp', pascalCaseFiles: true },
+        appTree
+      );
+
+      expect(tree.exists('apps/my-app/src/app/App.tsx')).toBeTruthy();
+      expect(tree.exists('apps/my-app/src/app/App.spec.tsx')).toBeTruthy();
+      expect(tree.exists('apps/my-app/src/app/App.css')).toBeTruthy();
+    });
+  });
+
+  it('should generate functional components by default', async () => {
+    const tree = await runSchematic('app', { name: 'myApp' }, appTree);
+
+    const appContent = tree.read('apps/my-app/src/app/app.tsx').toString();
+
+    expect(appContent).not.toMatch(/extends Component/);
+  });
+
+  describe('--class-component', () => {
+    it('should generate class components', async () => {
+      const tree = await runSchematic(
+        'app',
+        { name: 'myApp', classComponent: true },
+        appTree
+      );
+
+      const appContent = tree.read('apps/my-app/src/app/app.tsx').toString();
+
+      expect(appContent).toMatch(/extends Component/);
+    });
+  });
+
+  describe('--style styled-components', () => {
+    it('should use styled-components as the styled API library', async () => {
+      const tree = await runSchematic(
+        'app',
+        { name: 'myApp', style: 'styled-components' },
+        appTree
+      );
+
+      expect(
+        tree.exists('apps/my-app/src/app/app.styled-components')
+      ).toBeFalsy();
+      expect(tree.exists('apps/my-app/src/app/app.tsx')).toBeTruthy();
+
+      const content = tree.read('apps/my-app/src/app/app.tsx').toString();
+      expect(content).toContain('styled-component');
+      expect(content).toContain('<StyledApp>');
+    });
+
+    it('should add dependencies to package.json', async () => {
+      const tree = await runSchematic(
+        'app',
+        { name: 'myApp', style: 'styled-components' },
+        appTree
+      );
+
+      const packageJSON = readJsonInTree(tree, 'package.json');
+      expect(packageJSON.dependencies['styled-components']).toBeDefined();
+    });
+  });
+
+  describe('--style @emotion/styled', () => {
+    it('should use @emotion/styled as the styled API library', async () => {
+      const tree = await runSchematic(
+        'app',
+        { name: 'myApp', style: '@emotion/styled' },
+        appTree
+      );
+
+      expect(
+        tree.exists('apps/my-app/src/app/app.@emotion/styled')
+      ).toBeFalsy();
+      expect(tree.exists('apps/my-app/src/app/app.tsx')).toBeTruthy();
+
+      const content = tree.read('apps/my-app/src/app/app.tsx').toString();
+      expect(content).toContain('@emotion/styled');
+      expect(content).toContain('<StyledApp>');
+    });
+
+    it('should exclude styles from angular.json', async () => {
+      const tree = await runSchematic(
+        'app',
+        { name: 'myApp', style: '@emotion/styled' },
+        appTree
+      );
+
+      const angularJSON = readJsonInTree(tree, 'angular.json');
+
+      expect(
+        angularJSON.projects['my-app'].architect.build.options.styles
+      ).toEqual([]);
+    });
+
+    it('should add dependencies to package.json', async () => {
+      const tree = await runSchematic(
+        'app',
+        { name: 'myApp', style: '@emotion/styled' },
+        appTree
+      );
+
+      const packageJSON = readJsonInTree(tree, 'package.json');
+      expect(packageJSON.dependencies['@emotion/core']).toBeDefined();
+      expect(packageJSON.dependencies['@emotion/styled']).toBeDefined();
+    });
+  });
 });