├── .editorconfig ├── .gitignore ├── .prettierignore ├── .prettierrc ├── .vscode └── extensions.json ├── README.md ├── angular.json ├── apps ├── .gitkeep ├── api │ ├── jest.config.js │ ├── src │ │ ├── app │ │ │ ├── .gitkeep │ │ │ ├── app.controller.spec.ts │ │ │ ├── app.controller.ts │ │ │ ├── app.module.ts │ │ │ ├── app.service.spec.ts │ │ │ └── app.service.ts │ │ ├── assets │ │ │ └── .gitkeep │ │ ├── environments │ │ │ ├── environment.prod.ts │ │ │ └── environment.ts │ │ └── main.ts │ ├── tsconfig.app.json │ ├── tsconfig.json │ ├── tsconfig.spec.json │ └── tslint.json ├── my-app-e2e │ ├── cypress.json │ ├── src │ │ ├── fixtures │ │ │ └── example.json │ │ ├── integration │ │ │ └── app.spec.ts │ │ ├── plugins │ │ │ └── index.ts │ │ └── support │ │ │ ├── app.po.ts │ │ │ ├── commands.ts │ │ │ └── index.ts │ ├── tsconfig.e2e.json │ └── tsconfig.json └── my-app │ ├── browserslist │ ├── jest.config.js │ ├── src │ ├── app │ │ ├── app.scss │ │ ├── app.spec.tsx │ │ └── app.tsx │ ├── assets │ │ └── .gitkeep │ ├── environments │ │ ├── environment.prod.ts │ │ └── environment.ts │ ├── favicon.ico │ ├── index.html │ ├── main.tsx │ ├── polyfills.ts │ └── styles.scss │ ├── tsconfig.app.json │ ├── tsconfig.json │ ├── tsconfig.spec.json │ └── tslint.json ├── jest.config.js ├── libs ├── .gitkeep ├── gifs │ ├── README.md │ ├── jest.config.js │ ├── src │ │ ├── index.ts │ │ └── lib │ │ │ ├── .gitkeep │ │ │ ├── gifs.scss │ │ │ ├── gifs.spec.tsx │ │ │ └── gifs.tsx │ ├── tsconfig.json │ ├── tsconfig.lib.json │ ├── tsconfig.spec.json │ └── tslint.json └── home │ ├── README.md │ ├── jest.config.js │ ├── src │ ├── index.ts │ └── lib │ │ ├── .gitkeep │ │ ├── home.scss │ │ ├── home.spec.tsx │ │ └── home.tsx │ ├── tsconfig.json │ ├── tsconfig.lib.json │ ├── tsconfig.spec.json │ └── tslint.json ├── nx.json ├── package.json ├── tools ├── schematics │ ├── .gitkeep │ └── react-component │ │ ├── files │ │ ├── __fileName__.spec.tsx__tmpl__ │ │ └── __fileName__.tsx__tmpl__ │ │ ├── index.ts │ │ └── schema.json └── tsconfig.tools.json ├── tsconfig.json ├── tslint.json └── yarn.lock /.editorconfig: -------------------------------------------------------------------------------- 1 | # Editor configuration, see http://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | charset = utf-8 6 | indent_style = space 7 | indent_size = 2 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | 11 | [*.md] 12 | max_line_length = off 13 | trim_trailing_whitespace = false 14 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See http://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # compiled output 4 | /dist 5 | /tmp 6 | /out-tsc 7 | 8 | # dependencies 9 | /node_modules 10 | 11 | # IDEs and editors 12 | /.idea 13 | .project 14 | .classpath 15 | .c9/ 16 | *.launch 17 | .settings/ 18 | *.sublime-workspace 19 | 20 | # IDE - VSCode 21 | .vscode/* 22 | !.vscode/settings.json 23 | !.vscode/tasks.json 24 | !.vscode/launch.json 25 | !.vscode/extensions.json 26 | 27 | # misc 28 | /.sass-cache 29 | /connect.lock 30 | /coverage 31 | /libpeerconnection.log 32 | npm-debug.log 33 | yarn-error.log 34 | testem.log 35 | /typings 36 | 37 | # System Files 38 | .DS_Store 39 | Thumbs.db 40 | -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | # Add files here to ignore them from prettier formatting 2 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "singleQuote": true 3 | } 4 | -------------------------------------------------------------------------------- /.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": [ 3 | "nrwl.angular-console", 4 | "angular.ng-template", 5 | "ms-vscode.vscode-typescript-tslint-plugin", 6 | "esbenp.prettier-vscode" 7 | ] 8 | } 9 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # MyApp 2 | 3 | This project was generated using [Nx](https://nx.dev). 4 | 5 |

6 | 7 | 🔎 **Nx is a set of Angular CLI power-ups for modern development.** 8 | 9 | ## Quick Start & Documentation 10 | 11 | [30-minute video showing all Nx features](https://nx.dev/getting-started/what-is-nx) 12 | 13 | [Interactive tutorial](https://nx.dev/tutorial/01-create-application) 14 | 15 | ## Generate your first application 16 | 17 | Run `ng g app myapp` to generate an application. When using Nx, you can create multiple applications and libraries in the same CLI workspace. 18 | 19 | ## Development server 20 | 21 | Run `ng serve myapp` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files. 22 | 23 | ## Code scaffolding 24 | 25 | Run `ng generate component component-name --project=myapp` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`. 26 | 27 | ## Build 28 | 29 | Run `ng build myapp` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build. 30 | 31 | ## Running unit tests 32 | 33 | Run `ng test` to execute the unit tests via [Jest](https://karma-runner.github.io). 34 | 35 | ## Running end-to-end tests 36 | 37 | Run `ng e2e` to execute the end-to-end tests via [Cypress](http://www.protractortest.org/). 38 | 39 | ## Further help 40 | 41 | To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md). 42 | -------------------------------------------------------------------------------- /angular.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "./node_modules/@angular/cli/lib/config/schema.json", 3 | "version": 1, 4 | "newProjectRoot": "", 5 | "projects": { 6 | "my-app": { 7 | "root": "apps/my-app/", 8 | "sourceRoot": "apps/my-app/src", 9 | "projectType": "application", 10 | "prefix": "my-app", 11 | "schematics": { 12 | "@nrwl/schematics:component": { 13 | "style": "scss" 14 | } 15 | }, 16 | "architect": { 17 | "build": { 18 | "builder": "@nrwl/builders:web-build", 19 | "options": { 20 | "outputPath": "dist/apps/my-app", 21 | "index": "apps/my-app/src/index.html", 22 | "main": "apps/my-app/src/main.tsx", 23 | "polyfills": "apps/my-app/src/polyfills.ts", 24 | "tsConfig": "apps/my-app/tsconfig.app.json", 25 | "assets": [ 26 | "apps/my-app/src/favicon.ico", 27 | "apps/my-app/src/assets" 28 | ], 29 | "styles": [ 30 | "apps/my-app/src/styles.scss" 31 | ], 32 | "scripts": [] 33 | }, 34 | "configurations": { 35 | "production": { 36 | "fileReplacements": [ 37 | { 38 | "replace": "apps/my-app/src/environments/environment.ts", 39 | "with": "apps/my-app/src/environments/environment.prod.ts" 40 | } 41 | ], 42 | "optimization": true, 43 | "outputHashing": "all", 44 | "sourceMap": false, 45 | "extractCss": true, 46 | "namedChunks": false, 47 | "extractLicenses": true, 48 | "vendorChunk": false, 49 | "budgets": [ 50 | { 51 | "type": "initial", 52 | "maximumWarning": "2mb", 53 | "maximumError": "5mb" 54 | } 55 | ] 56 | } 57 | } 58 | }, 59 | "serve": { 60 | "builder": "@nrwl/builders:web-dev-server", 61 | "options": { 62 | "buildTarget": "my-app:build" 63 | }, 64 | "configurations": { 65 | "production": { 66 | "buildTarget": "my-app:build:production" 67 | } 68 | } 69 | }, 70 | "lint": { 71 | "builder": "@angular-devkit/build-angular:tslint", 72 | "options": { 73 | "tsConfig": [ 74 | "apps/my-app/tsconfig.app.json", 75 | "apps/my-app/tsconfig.spec.json" 76 | ], 77 | "exclude": [ 78 | "**/node_modules/**" 79 | ] 80 | } 81 | }, 82 | "test": { 83 | "builder": "@nrwl/builders:jest", 84 | "options": { 85 | "jestConfig": "apps/my-app/jest.config.js", 86 | "tsConfig": "apps/my-app/tsconfig.spec.json" 87 | } 88 | } 89 | } 90 | }, 91 | "my-app-e2e": { 92 | "root": "apps/my-app-e2e", 93 | "projectType": "application", 94 | "prefix": "", 95 | "architect": { 96 | "e2e": { 97 | "builder": "@nrwl/builders:cypress", 98 | "options": { 99 | "cypressConfig": "apps/my-app-e2e/cypress.json", 100 | "tsConfig": "apps/my-app-e2e/tsconfig.e2e.json", 101 | "devServerTarget": "my-app:serve" 102 | }, 103 | "configurations": { 104 | "production": { 105 | "devServerTarget": "my-app:serve:production" 106 | } 107 | } 108 | }, 109 | "lint": { 110 | "builder": "@angular-devkit/build-angular:tslint", 111 | "options": { 112 | "tsConfig": "apps/my-app-e2e/tsconfig.e2e.json", 113 | "exclude": [ 114 | "**/node_modules/**" 115 | ] 116 | } 117 | } 118 | } 119 | }, 120 | "home": { 121 | "root": "libs/home", 122 | "sourceRoot": "libs/home/src", 123 | "projectType": "library", 124 | "prefix": "my-app", 125 | "architect": { 126 | "lint": { 127 | "builder": "@angular-devkit/build-angular:tslint", 128 | "options": { 129 | "tsConfig": [ 130 | "libs/home/tsconfig.lib.json", 131 | "libs/home/tsconfig.spec.json" 132 | ], 133 | "exclude": [ 134 | "**/node_modules/**" 135 | ] 136 | } 137 | }, 138 | "test": { 139 | "builder": "@nrwl/builders:jest", 140 | "options": { 141 | "jestConfig": "libs/home/jest.config.js", 142 | "tsConfig": "libs/home/tsconfig.spec.json" 143 | } 144 | } 145 | }, 146 | "schematics": { 147 | "@nrwl/schematics:component": { 148 | "styleext": "scss" 149 | } 150 | } 151 | }, 152 | "gifs": { 153 | "root": "libs/gifs", 154 | "sourceRoot": "libs/gifs/src", 155 | "projectType": "library", 156 | "prefix": "my-app", 157 | "architect": { 158 | "lint": { 159 | "builder": "@angular-devkit/build-angular:tslint", 160 | "options": { 161 | "tsConfig": [ 162 | "libs/gifs/tsconfig.lib.json", 163 | "libs/gifs/tsconfig.spec.json" 164 | ], 165 | "exclude": [ 166 | "**/node_modules/**" 167 | ] 168 | } 169 | }, 170 | "test": { 171 | "builder": "@nrwl/builders:jest", 172 | "options": { 173 | "jestConfig": "libs/gifs/jest.config.js", 174 | "tsConfig": "libs/gifs/tsconfig.spec.json" 175 | } 176 | } 177 | }, 178 | "schematics": { 179 | "@nrwl/schematics:component": { 180 | "styleext": "scss" 181 | } 182 | } 183 | }, 184 | "api": { 185 | "root": "apps/api", 186 | "sourceRoot": "apps/api/src", 187 | "projectType": "application", 188 | "prefix": "api", 189 | "schematics": {}, 190 | "architect": { 191 | "build": { 192 | "builder": "@nrwl/builders:node-build", 193 | "options": { 194 | "outputPath": "dist/apps/api", 195 | "main": "apps/api/src/main.ts", 196 | "tsConfig": "apps/api/tsconfig.app.json", 197 | "assets": [ 198 | "apps/api/src/assets" 199 | ] 200 | }, 201 | "configurations": { 202 | "production": { 203 | "optimization": true, 204 | "extractLicenses": true, 205 | "inspect": false, 206 | "fileReplacements": [ 207 | { 208 | "replace": "apps/api/src/environments/environment.ts", 209 | "with": "apps/api/src/environments/environment.prod.ts" 210 | } 211 | ], 212 | "externalDependencies": "none" 213 | } 214 | } 215 | }, 216 | "serve": { 217 | "builder": "@nrwl/builders:node-execute", 218 | "options": { 219 | "buildTarget": "api:build" 220 | } 221 | }, 222 | "lint": { 223 | "builder": "@angular-devkit/build-angular:tslint", 224 | "options": { 225 | "tsConfig": [ 226 | "apps/api/tsconfig.app.json", 227 | "apps/api/tsconfig.spec.json" 228 | ], 229 | "exclude": [ 230 | "**/node_modules/**" 231 | ] 232 | } 233 | }, 234 | "test": { 235 | "builder": "@nrwl/builders:jest", 236 | "options": { 237 | "jestConfig": "apps/api/jest.config.js", 238 | "tsConfig": "apps/api/tsconfig.spec.json" 239 | } 240 | } 241 | } 242 | } 243 | }, 244 | "cli": { 245 | "warnings": { 246 | "typescriptMismatch": false, 247 | "versionMismatch": false 248 | }, 249 | "defaultCollection": "@nrwl/schematics" 250 | }, 251 | "schematics": { 252 | "@nrwl/schematics:application": { 253 | "style": "scss", 254 | "framework": "react" 255 | }, 256 | "@nrwl/schematics:library": { 257 | "style": "scss" 258 | } 259 | }, 260 | "defaultProject": "my-app" 261 | } 262 | -------------------------------------------------------------------------------- /apps/.gitkeep: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /apps/api/jest.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | name: 'api', 3 | preset: '../../jest.config.js', 4 | coverageDirectory: '../../coverage/apps/api' 5 | }; 6 | -------------------------------------------------------------------------------- /apps/api/src/app/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nrwl/react-nx-example/ff8243c5c2b224bc8b36cc30b709a376ddfba51f/apps/api/src/app/.gitkeep -------------------------------------------------------------------------------- /apps/api/src/app/app.controller.spec.ts: -------------------------------------------------------------------------------- 1 | import { Test, TestingModule } from '@nestjs/testing'; 2 | 3 | import { AppController } from './app.controller'; 4 | import { AppService } from './app.service'; 5 | 6 | describe('AppController', () => { 7 | let app: TestingModule; 8 | 9 | beforeAll(async () => { 10 | app = await Test.createTestingModule({ 11 | controllers: [AppController], 12 | providers: [AppService], 13 | }).compile(); 14 | }); 15 | 16 | describe('getData', () => { 17 | it('should return "Welcome to api!"', () => { 18 | const appController = app.get(AppController); 19 | expect(appController.getData()).toEqual({message: 'Welcome to api!'}); 20 | }); 21 | }); 22 | }); 23 | -------------------------------------------------------------------------------- /apps/api/src/app/app.controller.ts: -------------------------------------------------------------------------------- 1 | import { Controller, Get } from '@nestjs/common'; 2 | 3 | import { AppService } from './app.service'; 4 | 5 | @Controller() 6 | export class AppController { 7 | constructor(private readonly appService: AppService) {} 8 | 9 | @Get() 10 | getData() { 11 | return this.appService.getData(); 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /apps/api/src/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import { Module } from '@nestjs/common'; 2 | 3 | import { AppController } from './app.controller'; 4 | import { AppService } from './app.service'; 5 | 6 | @Module({ 7 | imports: [], 8 | controllers: [AppController], 9 | providers: [AppService], 10 | }) 11 | export class AppModule {} 12 | -------------------------------------------------------------------------------- /apps/api/src/app/app.service.spec.ts: -------------------------------------------------------------------------------- 1 | import { Test } from '@nestjs/testing'; 2 | 3 | import { AppService } from './app.service'; 4 | 5 | describe('AppService', () => { 6 | let service: AppService; 7 | 8 | beforeAll(async () => { 9 | const app = await Test.createTestingModule({ 10 | providers: [AppService], 11 | }).compile(); 12 | 13 | service = app.get(AppService); 14 | }); 15 | 16 | describe('getData', () => { 17 | it('should return "Welcome to api!"', () => { 18 | expect(service.getData()).toEqual({message: 'Welcome to api!'}); 19 | }); 20 | }); 21 | }); 22 | -------------------------------------------------------------------------------- /apps/api/src/app/app.service.ts: -------------------------------------------------------------------------------- 1 | import { Injectable } from '@nestjs/common'; 2 | 3 | @Injectable() 4 | export class AppService { 5 | getData(): { message: string } { 6 | return ({ message: 'Welcome to api!' }); 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /apps/api/src/assets/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nrwl/react-nx-example/ff8243c5c2b224bc8b36cc30b709a376ddfba51f/apps/api/src/assets/.gitkeep -------------------------------------------------------------------------------- /apps/api/src/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true 3 | }; 4 | -------------------------------------------------------------------------------- /apps/api/src/environments/environment.ts: -------------------------------------------------------------------------------- 1 | // This file can be replaced during build by using the `fileReplacements` array. 2 | // `ng build ---prod` replaces `environment.ts` with `environment.prod.ts`. 3 | // The list of file replacements can be found in `angular.json`. 4 | 5 | export const environment = { 6 | production: false 7 | }; 8 | -------------------------------------------------------------------------------- /apps/api/src/main.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * This is not a production server yet! 3 | * This is only a minimal backend to get started. 4 | **/ 5 | 6 | import { NestFactory } from '@nestjs/core'; 7 | 8 | import { AppModule } from './app/app.module'; 9 | 10 | async function bootstrap() { 11 | const app = await NestFactory.create(AppModule); 12 | app.setGlobalPrefix(`api`); 13 | const port = process.env.port || 3333; 14 | await app.listen(port, () => { 15 | console.log(`Listening at http://localhost:${port}`); 16 | }); 17 | } 18 | 19 | bootstrap(); 20 | -------------------------------------------------------------------------------- /apps/api/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../../dist/out-tsc/apps/api", 5 | "types": ["node"] 6 | }, 7 | "exclude": ["**/*.spec.ts"], 8 | "include": ["**/*.ts"] 9 | } 10 | -------------------------------------------------------------------------------- /apps/api/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "compilerOptions": { 4 | "types": [ 5 | "node", 6 | "jest" 7 | ] 8 | }, 9 | "include": [ 10 | "**/*.ts" 11 | ] 12 | } 13 | -------------------------------------------------------------------------------- /apps/api/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../../dist/out-tsc/apps/api", 5 | "module": "commonjs", 6 | "types": ["jest", "node"] 7 | }, 8 | "include": [ 9 | "**/*.spec.ts", 10 | "**/*.d.ts" 11 | ] 12 | } 13 | -------------------------------------------------------------------------------- /apps/api/tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tslint.json", 3 | "rules": {} 4 | } 5 | -------------------------------------------------------------------------------- /apps/my-app-e2e/cypress.json: -------------------------------------------------------------------------------- 1 | { 2 | "fileServerFolder": "../../dist/out-tsc/apps/my-app-e2e", 3 | "fixturesFolder": "../../dist/out-tsc/apps/my-app-e2e/src/fixtures", 4 | "integrationFolder": "../../dist/out-tsc/apps/my-app-e2e/src/integration", 5 | "pluginsFile": "../../dist/out-tsc/apps/my-app-e2e/src/plugins/index.js", 6 | "supportFile": false, 7 | "video": true, 8 | "videosFolder": "../../dist/out-tsc/apps/my-app-e2e/videos", 9 | "screenshotsFolder": "../../dist/out-tsc/apps/my-app-e2e/screenshots", 10 | "chromeWebSecurity": false 11 | } 12 | -------------------------------------------------------------------------------- /apps/my-app-e2e/src/fixtures/example.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Using fixtures to represent data", 3 | "email": "hello@cypress.io" 4 | } 5 | -------------------------------------------------------------------------------- /apps/my-app-e2e/src/integration/app.spec.ts: -------------------------------------------------------------------------------- 1 | import { getGreeting } from "../support/app.po"; 2 | 3 | describe("Hello Nx", () => { 4 | beforeEach(() => cy.visit("/")); 5 | 6 | it("should display welcome message", () => { 7 | getGreeting().contains("Welcome to my-app!"); 8 | }); 9 | }); 10 | -------------------------------------------------------------------------------- /apps/my-app-e2e/src/plugins/index.ts: -------------------------------------------------------------------------------- 1 | // *********************************************************** 2 | // This example plugins/index.js can be used to load plugins 3 | // 4 | // You can change the location of this file or turn off loading 5 | // the plugins file with the 'pluginsFile' configuration option. 6 | // 7 | // You can read more here: 8 | // https://on.cypress.io/plugins-guide 9 | // *********************************************************** 10 | 11 | // This function is called when a project is opened or re-opened (e.g. due to 12 | // the project's config changing) 13 | 14 | module.exports = (on: Cypress.Actions, config: Cypress.ConfigOptions) => { 15 | // `on` is used to hook into various events Cypress emits 16 | // `config` is the resolved Cypress config 17 | }; 18 | -------------------------------------------------------------------------------- /apps/my-app-e2e/src/support/app.po.ts: -------------------------------------------------------------------------------- 1 | export const getGreeting = () => cy.get("h1"); 2 | -------------------------------------------------------------------------------- /apps/my-app-e2e/src/support/commands.ts: -------------------------------------------------------------------------------- 1 | // *********************************************** 2 | // This example commands.js shows you how to 3 | // create various custom commands and overwrite 4 | // existing commands. 5 | // 6 | // For more comprehensive examples of custom 7 | // commands please read more here: 8 | // https://on.cypress.io/custom-commands 9 | // *********************************************** 10 | // 11 | // 12 | // -- This is a parent command -- 13 | // Cypress.Commands.add("login", (email, password) => { ... }) 14 | // 15 | // 16 | // -- This is a child command -- 17 | // Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... }) 18 | // 19 | // 20 | // -- This is a dual command -- 21 | // Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... }) 22 | // 23 | // 24 | // -- This will overwrite an existing command -- 25 | // Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... }) 26 | -------------------------------------------------------------------------------- /apps/my-app-e2e/src/support/index.ts: -------------------------------------------------------------------------------- 1 | // *********************************************************** 2 | // This example support/index.js is processed and 3 | // loaded automatically before your test files. 4 | // 5 | // This is a great place to put global configuration and 6 | // behavior that modifies Cypress. 7 | // 8 | // You can change the location of this file or turn off 9 | // automatically serving support files with the 10 | // 'supportFile' configuration option. 11 | // 12 | // You can read more here: 13 | // https://on.cypress.io/configuration 14 | // *********************************************************** 15 | 16 | // Import commands.js using ES2015 syntax: 17 | import "./commands"; 18 | -------------------------------------------------------------------------------- /apps/my-app-e2e/tsconfig.e2e.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "sourceMap": false, 5 | "outDir": "../../dist/out-tsc/apps/my-app-e2e/src" 6 | }, 7 | "include": ["src/**/*.ts"] 8 | } 9 | -------------------------------------------------------------------------------- /apps/my-app-e2e/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "compilerOptions": { 4 | "jsx": "react", 5 | "allowJs": true, 6 | "types": ["cypress", "node"] 7 | }, 8 | "include": ["**/*.ts", "**/*.tsx"] 9 | } 10 | -------------------------------------------------------------------------------- /apps/my-app/browserslist: -------------------------------------------------------------------------------- 1 | # This file is currently used by autoprefixer to adjust CSS to support the below specified browsers 2 | # For additional information regarding the format and rule options, please see: 3 | # https://github.com/browserslist/browserslist#queries 4 | # 5 | # For IE 9-11 support, please remove 'not' from the last line of the file and adjust as needed 6 | 7 | > 0.5% 8 | last 2 versions 9 | Firefox ESR 10 | not dead 11 | not IE 9-11 -------------------------------------------------------------------------------- /apps/my-app/jest.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | name: "my-app", 3 | preset: "../../jest.config.js", 4 | transform: { 5 | "^.+\\.[tj]sx?$": "ts-jest" 6 | }, 7 | moduleFileExtensions: ["ts", "tsx", "js", "jsx", "html"], 8 | coverageDirectory: "../../coverage/apps/my-app/" 9 | }; 10 | -------------------------------------------------------------------------------- /apps/my-app/src/app/app.scss: -------------------------------------------------------------------------------- 1 | .app { 2 | font-family: 'Helvetica Neue', Helvetica, sans-serif; 3 | display: flex; 4 | 5 | h1 { 6 | font-weight: 100; 7 | margin: 0; 8 | } 9 | } 10 | 11 | .app-nav { 12 | width: 20vw; 13 | margin-right: 20px; 14 | } 15 | 16 | .app-content { 17 | flex: 1; 18 | } 19 | 20 | -------------------------------------------------------------------------------- /apps/my-app/src/app/app.spec.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import { render, cleanup } from "react-testing-library"; 3 | 4 | import { App } from "./app"; 5 | 6 | describe("App", () => { 7 | afterEach(cleanup); 8 | 9 | it("should render successfully", () => { 10 | const { baseElement } = render(); 11 | expect(baseElement).toBeTruthy(); 12 | }); 13 | 14 | it("should have a greeting as the title", () => { 15 | const { getByText } = render(); 16 | expect(getByText("Welcome to my-app!")).toBeTruthy(); 17 | }); 18 | }); 19 | -------------------------------------------------------------------------------- /apps/my-app/src/app/app.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { BrowserRouter, Route, Link } from 'react-router-dom'; 3 | import { Home } from '@my-app/home'; 4 | import { Gifs } from '@my-app/gifs'; 5 | import { environment } from '../environments/environment'; 6 | 7 | import './app.scss'; 8 | 9 | export const App = () => ( 10 | 11 |
12 | 22 |
23 | 24 | } 27 | /> 28 |
29 |
30 | 31 | ); 32 | -------------------------------------------------------------------------------- /apps/my-app/src/assets/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nrwl/react-nx-example/ff8243c5c2b224bc8b36cc30b709a376ddfba51f/apps/my-app/src/assets/.gitkeep -------------------------------------------------------------------------------- /apps/my-app/src/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true 3 | }; 4 | -------------------------------------------------------------------------------- /apps/my-app/src/environments/environment.ts: -------------------------------------------------------------------------------- 1 | // This file can be replaced during build by using the `fileReplacements` array. 2 | // `ng build --prod` replaces `environment.ts` with `environment.prod.ts`. 3 | // The list of file replacements can be found in `angular.json`. 4 | 5 | export const environment = { 6 | production: false, 7 | giphy: { 8 | apiKey: 'dc6zaTOxFJmzC' 9 | } 10 | }; 11 | 12 | /* 13 | * For easier debugging in development mode, you can import the following file 14 | * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`. 15 | * 16 | * This import should be commented out in production mode because it will have a negative impact 17 | * on performance if an error is thrown. 18 | */ 19 | // import 'zone.js/dist/zone-error'; // Included with Angular CLI. 20 | -------------------------------------------------------------------------------- /apps/my-app/src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nrwl/react-nx-example/ff8243c5c2b224bc8b36cc30b709a376ddfba51f/apps/my-app/src/favicon.ico -------------------------------------------------------------------------------- /apps/my-app/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | MyApp 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /apps/my-app/src/main.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import * as ReactDOM from "react-dom"; 3 | 4 | import { App } from "./app/app"; 5 | 6 | ReactDOM.render(, document.querySelector("my-app-root")); 7 | -------------------------------------------------------------------------------- /apps/my-app/src/polyfills.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * This file contains polyfills loaded on all browsers 3 | **/ 4 | -------------------------------------------------------------------------------- /apps/my-app/src/styles.scss: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | -------------------------------------------------------------------------------- /apps/my-app/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../../dist/out-tsc/apps/my-app", 5 | "types": [] 6 | }, 7 | "exclude": ["src/test-setup.ts", "**/*.spec.ts"], 8 | "include": ["**/*.ts"] 9 | } 10 | -------------------------------------------------------------------------------- /apps/my-app/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "compilerOptions": { 4 | "jsx": "react", 5 | "allowJs": true, 6 | "types": ["node", "jest"] 7 | }, 8 | "include": ["**/*.ts", "**/*.tsx"] 9 | } 10 | -------------------------------------------------------------------------------- /apps/my-app/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../../dist/out-tsc/apps/my-app/", 5 | "module": "commonjs", 6 | "types": ["jest", "node"] 7 | }, 8 | "include": [ 9 | "**/*.spec.ts", 10 | "**/*.spec.tsx", 11 | "**/*.spec.js", 12 | "**/*.spec.jsx", 13 | "**/*.d.ts" 14 | ] 15 | } 16 | -------------------------------------------------------------------------------- /apps/my-app/tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tslint.json", 3 | "rules": [] 4 | } 5 | -------------------------------------------------------------------------------- /jest.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | testMatch: ["**/+(*.)+(spec|test).+(ts|js)?(x)"], 3 | transform: { 4 | "^.+\\.(ts|js|html)$": "ts-jest" 5 | }, 6 | resolver: "@nrwl/builders/plugins/jest/resolver", 7 | moduleFileExtensions: ["ts", "js", "html"], 8 | collectCoverage: true, 9 | coverageReporters: ["html"] 10 | }; 11 | -------------------------------------------------------------------------------- /libs/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nrwl/react-nx-example/ff8243c5c2b224bc8b36cc30b709a376ddfba51f/libs/.gitkeep -------------------------------------------------------------------------------- /libs/gifs/README.md: -------------------------------------------------------------------------------- 1 | # Gifs 2 | 3 | This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 7.2.0. 4 | 5 | ## Code scaffolding 6 | 7 | Run `ng generate component component-name --project gifs` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project gifs`. 8 | 9 | > Note: Don't forget to add `--project gifs` or else it will be added to the default project in your `angular.json` file. 10 | 11 | ## Build 12 | 13 | Run `ng build gifs` to build the project. The build artifacts will be stored in the `dist/` directory. 14 | 15 | ## Publishing 16 | 17 | After building your library with `ng build gifs`, go to the dist folder `cd dist/gifs` and run `npm publish`. 18 | 19 | ## Running unit tests 20 | 21 | Run `ng test gifs` to execute the unit tests via [Karma](https://karma-runner.github.io). 22 | 23 | ## Further help 24 | 25 | To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md). 26 | -------------------------------------------------------------------------------- /libs/gifs/jest.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | name: 'gifs', 3 | preset: '../../jest.config.js', 4 | transform: { 5 | '^.+\\.[tj]sx?$': 'ts-jest' 6 | }, 7 | moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'html'], 8 | coverageDirectory: '../../coverage/libs/gifs' 9 | }; 10 | -------------------------------------------------------------------------------- /libs/gifs/src/index.ts: -------------------------------------------------------------------------------- 1 | export * from './lib/gifs'; 2 | -------------------------------------------------------------------------------- /libs/gifs/src/lib/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nrwl/react-nx-example/ff8243c5c2b224bc8b36cc30b709a376ddfba51f/libs/gifs/src/lib/.gitkeep -------------------------------------------------------------------------------- /libs/gifs/src/lib/gifs.scss: -------------------------------------------------------------------------------- 1 | .gif-search-input { 2 | width: 500px; 3 | display: block; 4 | font-size: 24px; 5 | margin: 10px 0; 6 | } 7 | 8 | .gif-list { 9 | display: grid; 10 | grid-template-columns: repeat(5, calc(20% - 5px)); 11 | grid-gap: 5px; 12 | } 13 | 14 | .gif-list-item { 15 | width: 100%; 16 | a, 17 | img { 18 | display: block; 19 | width: 100%; 20 | height: 100%; 21 | object-fit: cover; 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /libs/gifs/src/lib/gifs.spec.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { render, cleanup } from 'react-testing-library'; 3 | 4 | import { Gifs } from './gifs'; 5 | 6 | describe('Gifs', () => { 7 | afterEach(cleanup); 8 | 9 | it('should render successfully', () => { 10 | const { getByText } = render(); 11 | expect(getByText('gifs works!')).toBeTruthy(); 12 | }); 13 | }); 14 | -------------------------------------------------------------------------------- /libs/gifs/src/lib/gifs.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { useCallback, useEffect } from 'react'; 3 | import axios from 'axios'; 4 | import './gifs.scss'; 5 | 6 | interface GifsProps { 7 | apiKey: string; 8 | } 9 | 10 | export const Gifs = (props: GifsProps) => { 11 | const [gifs, setGifs] = React.useState([]); 12 | const [query, setQuery] = React.useState(''); 13 | 14 | const getFetchUrl = useCallback( 15 | () => 16 | query 17 | ? `https://api.giphy.com/v1/gifs/search?api_key=${ 18 | props.apiKey 19 | }&q=${query}` 20 | : null, 21 | [query] 22 | ); 23 | 24 | useEffect( 25 | () => { 26 | async function fetchData() { 27 | const url = getFetchUrl(); 28 | if (url) { 29 | const result = await axios(url); 30 | setGifs( 31 | result.data.data.map(x => ({ 32 | id: x.id, 33 | preview: x.images.preview_gif, 34 | url: x.url 35 | })) 36 | ); 37 | } else { 38 | setGifs([]); 39 | } 40 | } 41 | 42 | fetchData(); 43 | }, 44 | 45 | [getFetchUrl] 46 | ); 47 | 48 | return ( 49 | 50 |

GIF Search

51 | setQuery(evt.target.value)} 56 | /> 57 |
58 | {gifs.map(gif => ( 59 |
60 | 61 | 62 | 63 |
64 | ))} 65 |
66 | 67 | ); 68 | }; 69 | -------------------------------------------------------------------------------- /libs/gifs/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "compilerOptions": { 4 | "jsx": "react", 5 | "types": ["node", "jest"] 6 | }, 7 | "include": ["**/*.ts", "**/*.tsx"] 8 | } 9 | -------------------------------------------------------------------------------- /libs/gifs/tsconfig.lib.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../../dist/out-tsc/libs/gifs", 5 | "target": "es2015", 6 | "module": "es2015", 7 | "moduleResolution": "node", 8 | "declaration": true, 9 | "sourceMap": true, 10 | "inlineSources": true, 11 | "emitDecoratorMetadata": true, 12 | "experimentalDecorators": true, 13 | "importHelpers": true, 14 | "types": [], 15 | "lib": ["dom", "es2018"] 16 | }, 17 | "exclude": ["src/test.ts", "**/*.spec.ts"] 18 | } 19 | -------------------------------------------------------------------------------- /libs/gifs/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../../dist/out-tsc/libs/gifs", 5 | "module": "commonjs", 6 | "types": ["jest", "node"] 7 | }, 8 | "include": [ 9 | "**/*.spec.ts", 10 | "**/*.spec.tsx", 11 | "**/*.spec.js", 12 | "**/*.spec.jsx", 13 | "**/*.d.ts" 14 | ] 15 | } 16 | -------------------------------------------------------------------------------- /libs/gifs/tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tslint.json", 3 | "rules": [] 4 | } 5 | -------------------------------------------------------------------------------- /libs/home/README.md: -------------------------------------------------------------------------------- 1 | # Home 2 | 3 | This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 7.2.0. 4 | 5 | ## Code scaffolding 6 | 7 | Run `ng generate component component-name --project home` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project home`. 8 | 9 | > Note: Don't forget to add `--project home` or else it will be added to the default project in your `angular.json` file. 10 | 11 | ## Build 12 | 13 | Run `ng build home` to build the project. The build artifacts will be stored in the `dist/` directory. 14 | 15 | ## Publishing 16 | 17 | After building your library with `ng build home`, go to the dist folder `cd dist/home` and run `npm publish`. 18 | 19 | ## Running unit tests 20 | 21 | Run `ng test home` to execute the unit tests via [Karma](https://karma-runner.github.io). 22 | 23 | ## Further help 24 | 25 | To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md). 26 | -------------------------------------------------------------------------------- /libs/home/jest.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | name: 'home', 3 | preset: '../../jest.config.js', 4 | transform: { 5 | '^.+\\.[tj]sx?$': 'ts-jest' 6 | }, 7 | moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'html'], 8 | coverageDirectory: '../../coverage/libs/home' 9 | }; 10 | -------------------------------------------------------------------------------- /libs/home/src/index.ts: -------------------------------------------------------------------------------- 1 | export * from './lib/home'; 2 | -------------------------------------------------------------------------------- /libs/home/src/lib/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nrwl/react-nx-example/ff8243c5c2b224bc8b36cc30b709a376ddfba51f/libs/home/src/lib/.gitkeep -------------------------------------------------------------------------------- /libs/home/src/lib/home.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nrwl/react-nx-example/ff8243c5c2b224bc8b36cc30b709a376ddfba51f/libs/home/src/lib/home.scss -------------------------------------------------------------------------------- /libs/home/src/lib/home.spec.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { render, cleanup } from 'react-testing-library'; 3 | 4 | import { Home } from './home'; 5 | 6 | describe('Home', () => { 7 | afterEach(cleanup); 8 | 9 | it('should render successfully', () => { 10 | const { getByText } = render(); 11 | expect(getByText('home works!')).toBeTruthy(); 12 | }); 13 | }); 14 | -------------------------------------------------------------------------------- /libs/home/src/lib/home.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | 3 | export const Home = () => ( 4 | 5 |

Home

6 |

Welcome to the React Example app!

7 |

Please see the sidenav for available features.

8 | 9 | ); 10 | -------------------------------------------------------------------------------- /libs/home/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "compilerOptions": { 4 | "jsx": "react", 5 | "types": ["node", "jest"] 6 | }, 7 | "include": ["**/*.ts", "**/*.tsx"] 8 | } 9 | -------------------------------------------------------------------------------- /libs/home/tsconfig.lib.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../../dist/out-tsc/libs/home", 5 | "target": "es2015", 6 | "module": "es2015", 7 | "moduleResolution": "node", 8 | "declaration": true, 9 | "sourceMap": true, 10 | "inlineSources": true, 11 | "emitDecoratorMetadata": true, 12 | "experimentalDecorators": true, 13 | "importHelpers": true, 14 | "types": [], 15 | "lib": ["dom", "es2018"] 16 | }, 17 | "exclude": ["src/test.ts", "**/*.spec.ts"] 18 | } 19 | -------------------------------------------------------------------------------- /libs/home/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../../dist/out-tsc/libs/home", 5 | "module": "commonjs", 6 | "types": ["jest", "node"] 7 | }, 8 | "include": [ 9 | "**/*.spec.ts", 10 | "**/*.spec.tsx", 11 | "**/*.spec.js", 12 | "**/*.spec.jsx", 13 | "**/*.d.ts" 14 | ] 15 | } 16 | -------------------------------------------------------------------------------- /libs/home/tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tslint.json", 3 | "rules": [] 4 | } 5 | -------------------------------------------------------------------------------- /nx.json: -------------------------------------------------------------------------------- 1 | { 2 | "npmScope": "my-app", 3 | "implicitDependencies": { 4 | "angular.json": "*", 5 | "package.json": "*", 6 | "tsconfig.json": "*", 7 | "tslint.json": "*", 8 | "nx.json": "*" 9 | }, 10 | "projects": { 11 | "my-app": { 12 | "implicitDependencies": [ 13 | "api" 14 | ], 15 | "tags": [] 16 | }, 17 | "my-app-e2e": { 18 | "tags": [] 19 | }, 20 | "home": { 21 | "tags": [] 22 | }, 23 | "gifs": { 24 | "tags": [] 25 | }, 26 | "api": { 27 | "tags": [] 28 | } 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "my-app", 3 | "version": "0.0.0", 4 | "license": "MIT", 5 | "scripts": { 6 | "ng": "ng", 7 | "start": "ng serve", 8 | "build": "ng build", 9 | "test": "ng test", 10 | "lint": "./node_modules/.bin/nx lint && ng lint", 11 | "e2e": "ng e2e", 12 | "affected:apps": "./node_modules/.bin/nx affected:apps", 13 | "affected:libs": "./node_modules/.bin/nx affected:libs", 14 | "affected:build": "./node_modules/.bin/nx affected:build", 15 | "affected:e2e": "./node_modules/.bin/nx affected:e2e", 16 | "affected:test": "./node_modules/.bin/nx affected:test", 17 | "affected:lint": "./node_modules/.bin/nx affected:lint", 18 | "affected:dep-graph": "./node_modules/.bin/nx affected:dep-graph", 19 | "affected": "./node_modules/.bin/nx affected", 20 | "format": "./node_modules/.bin/nx format:write", 21 | "format:write": "./node_modules/.bin/nx format:write", 22 | "format:check": "./node_modules/.bin/nx format:check", 23 | "update": "ng update @nrwl/schematics", 24 | "update:check": "ng update", 25 | "workspace-schematic": "./node_modules/.bin/nx workspace-schematic", 26 | "dep-graph": "./node_modules/.bin/nx dep-graph", 27 | "help": "./node_modules/.bin/nx help" 28 | }, 29 | "private": true, 30 | "dependencies": { 31 | "@nestjs/common": "5.5.0", 32 | "@nestjs/core": "5.5.0", 33 | "axios": "^0.18.0", 34 | "react": "16.8.3", 35 | "react-dom": "16.8.3", 36 | "react-router": "^5.0.0", 37 | "react-router-dom": "^5.0.0" 38 | }, 39 | "devDependencies": { 40 | "ts-jest": "24.0.0", 41 | "@nestjs/schematics": "5.11.2", 42 | "@nestjs/testing": "5.5.0", 43 | "@angular/cli": "7.3.1", 44 | "@nrwl/builders": "7.7.2", 45 | "@nrwl/schematics": "7.7.2", 46 | "@types/jest": "24.0.9", 47 | "@types/jquery": "3.3.6", 48 | "@types/node": "~8.9.4", 49 | "@types/react": "16.8.4", 50 | "@types/react-dom": "16.8.2", 51 | "cypress": "3.1.0", 52 | "dotenv": "6.2.0", 53 | "jest": "24.1.0", 54 | "prettier": "1.15.2", 55 | "react-testing-library": "6.0.0", 56 | "ts-node": "~7.0.0", 57 | "tslint": "~5.11.0", 58 | "typescript": "3.2.2" 59 | } 60 | } 61 | -------------------------------------------------------------------------------- /tools/schematics/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nrwl/react-nx-example/ff8243c5c2b224bc8b36cc30b709a376ddfba51f/tools/schematics/.gitkeep -------------------------------------------------------------------------------- /tools/schematics/react-component/files/__fileName__.spec.tsx__tmpl__: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { render, cleanup } from 'react-testing-library'; 3 | 4 | import { <%= componentName %> } from './<%= fileName %>'; 5 | 6 | describe('<%= componentName %>', () => { 7 | afterEach(cleanup); 8 | 9 | test('Rendering', async () => { 10 | const { container } = render(<<%= componentName %>>It works!>); 11 | expect(container.innerHTML).toMatch(/It works!/); 12 | }); 13 | }); 14 | -------------------------------------------------------------------------------- /tools/schematics/react-component/files/__fileName__.tsx__tmpl__: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import styled from 'styled-components'; 3 | 4 | interface <%= componentName %>Props { 5 | children?: React.ReactNode 6 | } 7 | 8 | const Container = styled.<%= tagName %>` 9 | // Put your styles here! 10 | ` 11 | 12 | export const <%= componentName %> = ({ children }: <%= componentName %>Props) => ( 13 | 14 | {children} 15 | 16 | ); 17 | -------------------------------------------------------------------------------- /tools/schematics/react-component/index.ts: -------------------------------------------------------------------------------- 1 | import { 2 | apply, 3 | chain, 4 | mergeWith, 5 | move, 6 | template, 7 | url, 8 | Tree, 9 | Rule 10 | } from '@angular-devkit/schematics'; 11 | import { strings } from '@angular-devkit/core'; 12 | import { addDepsToPackageJson } from '@nrwl/schematics/src/utils/ast-utils'; 13 | 14 | function addReactComponent(opts: any): Rule { 15 | return (host: Tree) => { 16 | // We can read files off of the Tree 17 | const angularJson = JSON.parse(host.read('angular.json').toString()); 18 | const project = angularJson.projects[opts.project]; 19 | const src = project.sourceRoot; 20 | const fileName = strings.dasherize(opts.name); 21 | const componentName = strings.classify(opts.name); 22 | const indexFile = host.read(`${src}/index.ts`); 23 | 24 | // We can also overwrite files in the Tree 25 | host.overwrite( 26 | `${src}/index.ts`, 27 | `${indexFile.toString()}\nexport * from './lib/${fileName}/${fileName}';` 28 | ); 29 | 30 | // Angular devkit comes with helper functions to perform common operations on the Tree 31 | const templateSource = apply(url('./files'), [ 32 | template({ 33 | tmpl: '', 34 | fileName, // File name is kebab-cased 35 | componentName, // Component is MixedCased 36 | tagName: opts.tag // Allows user to override default `div` element 37 | }), 38 | move(`${src}/lib/${fileName}`) 39 | ]); 40 | return mergeWith(templateSource); 41 | }; 42 | } 43 | 44 | export default function(opts: any): Rule { 45 | // The Tree here represents the filesystem 46 | return chain([ 47 | addDepsToPackageJson( 48 | { '@types/styled-components': '4.1.12', 'styled-components': '4.1.3' }, 49 | {} 50 | ), 51 | addReactComponent(opts) 52 | ]); 53 | } 54 | -------------------------------------------------------------------------------- /tools/schematics/react-component/schema.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "http://json-schema.org/schema", 3 | "id": "react-component", 4 | "type": "object", 5 | "properties": { 6 | "name": { 7 | "type": "string", 8 | "description": "Library name", 9 | "$default": { 10 | "$source": "argv", 11 | "index": 0 12 | } 13 | }, 14 | "tag": { 15 | "type": "string", 16 | "description": "Element tag name", 17 | "default": "div" 18 | } 19 | }, 20 | "required": ["name"] 21 | } 22 | -------------------------------------------------------------------------------- /tools/tsconfig.tools.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../dist/out-tsc/tools", 5 | "rootDir": ".", 6 | "module": "commonjs", 7 | "target": "es5", 8 | "types": ["node"] 9 | }, 10 | "include": ["**/*.ts"] 11 | } 12 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compileOnSave": false, 3 | "compilerOptions": { 4 | "sourceMap": true, 5 | "declaration": false, 6 | "moduleResolution": "node", 7 | "emitDecoratorMetadata": true, 8 | "experimentalDecorators": true, 9 | "importHelpers": true, 10 | "target": "es5", 11 | "module": "es2015", 12 | "typeRoots": ["node_modules/@types"], 13 | "lib": ["es2017", "dom"], 14 | "skipLibCheck": true, 15 | "skipDefaultLibCheck": true, 16 | "baseUrl": ".", 17 | "paths": { 18 | "@my-app/home": ["libs/home/src/index.ts"], 19 | "@my-app/gifs": ["libs/gifs/src/index.ts"] 20 | } 21 | }, 22 | "exclude": ["node_modules", "tmp"] 23 | } 24 | -------------------------------------------------------------------------------- /tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "rulesDirectory": ["node_modules/@nrwl/schematics/src/tslint"], 3 | "rules": { 4 | "arrow-return-shorthand": true, 5 | "callable-types": true, 6 | "class-name": true, 7 | "deprecation": { 8 | "severity": "warn" 9 | }, 10 | "forin": true, 11 | "import-blacklist": [true, "rxjs/Rx"], 12 | "interface-over-type-literal": true, 13 | "member-access": false, 14 | "member-ordering": [ 15 | true, 16 | { 17 | "order": [ 18 | "static-field", 19 | "instance-field", 20 | "static-method", 21 | "instance-method" 22 | ] 23 | } 24 | ], 25 | "no-arg": true, 26 | "no-bitwise": true, 27 | "no-console": [true, "debug", "info", "time", "timeEnd", "trace"], 28 | "no-construct": true, 29 | "no-debugger": true, 30 | "no-duplicate-super": true, 31 | "no-empty": false, 32 | "no-empty-interface": true, 33 | "no-eval": true, 34 | "no-inferrable-types": [true, "ignore-params"], 35 | "no-misused-new": true, 36 | "no-non-null-assertion": true, 37 | "no-shadowed-variable": true, 38 | "no-string-literal": false, 39 | "no-string-throw": true, 40 | "no-switch-case-fall-through": true, 41 | "no-unnecessary-initializer": true, 42 | "no-unused-expression": true, 43 | "no-use-before-declare": true, 44 | "no-var-keyword": true, 45 | "object-literal-sort-keys": false, 46 | "prefer-const": true, 47 | "radix": true, 48 | "triple-equals": [true, "allow-null-check"], 49 | "unified-signatures": true, 50 | "variable-name": false, 51 | 52 | "nx-enforce-module-boundaries": [ 53 | true, 54 | { 55 | "allow": [], 56 | "depConstraints": [ 57 | { "sourceTag": "*", "onlyDependOnLibsWithTags": ["*"] } 58 | ] 59 | } 60 | ] 61 | } 62 | } 63 | --------------------------------------------------------------------------------