From cae562342d857e272fb6d9c9c7aa14bad0feae70 Mon Sep 17 00:00:00 2001 From: tim_curchod Date: Wed, 1 Sep 2021 04:32:00 +1000 Subject: [PATCH] #6 added a trendy layout --- apps/trendy/src/app/app.component.html | 116 +----------------- apps/trendy/src/app/app.component.scss | 3 - apps/trendy/src/app/app.module.ts | 16 ++- apps/trendy/src/styles.scss | 6 +- docs/trendy-client-layout.md | 7 ++ jest.config.js | 2 + libs/pictures/.eslintrc.json | 29 +++++ libs/pictures/README.md | 7 ++ libs/pictures/jest.config.js | 23 ++++ libs/pictures/src/index.ts | 1 + libs/pictures/src/lib/pictures.module.ts | 10 ++ libs/pictures/src/test-setup.ts | 1 + libs/pictures/tsconfig.json | 13 ++ libs/pictures/tsconfig.lib.json | 14 +++ libs/pictures/tsconfig.spec.json | 10 ++ libs/trendy-layout/.eslintrc.json | 29 +++++ libs/trendy-layout/README.md | 7 ++ libs/trendy-layout/jest.config.js | 23 ++++ libs/trendy-layout/src/index.ts | 1 + .../trendy-layout.component.html | 7 ++ .../trendy-layout.component.scss | 3 + .../trendy-layout.component.spec.ts | 25 ++++ .../trendy-layout/trendy-layout.component.ts | 10 ++ .../src/lib/trendy-layout.module.ts | 13 ++ libs/trendy-layout/src/test-setup.ts | 1 + libs/trendy-layout/tsconfig.json | 13 ++ libs/trendy-layout/tsconfig.lib.json | 14 +++ libs/trendy-layout/tsconfig.spec.json | 10 ++ nx.json | 6 + tsconfig.base.json | 4 +- workspace.json | 54 ++++++++ 31 files changed, 357 insertions(+), 121 deletions(-) create mode 100644 docs/trendy-client-layout.md create mode 100644 libs/pictures/.eslintrc.json create mode 100644 libs/pictures/README.md create mode 100644 libs/pictures/jest.config.js create mode 100644 libs/pictures/src/index.ts create mode 100644 libs/pictures/src/lib/pictures.module.ts create mode 100644 libs/pictures/src/test-setup.ts create mode 100644 libs/pictures/tsconfig.json create mode 100644 libs/pictures/tsconfig.lib.json create mode 100644 libs/pictures/tsconfig.spec.json create mode 100644 libs/trendy-layout/.eslintrc.json create mode 100644 libs/trendy-layout/README.md create mode 100644 libs/trendy-layout/jest.config.js create mode 100644 libs/trendy-layout/src/index.ts create mode 100644 libs/trendy-layout/src/lib/containers/trendy-layout/trendy-layout.component.html create mode 100644 libs/trendy-layout/src/lib/containers/trendy-layout/trendy-layout.component.scss create mode 100644 libs/trendy-layout/src/lib/containers/trendy-layout/trendy-layout.component.spec.ts create mode 100644 libs/trendy-layout/src/lib/containers/trendy-layout/trendy-layout.component.ts create mode 100644 libs/trendy-layout/src/lib/trendy-layout.module.ts create mode 100644 libs/trendy-layout/src/test-setup.ts create mode 100644 libs/trendy-layout/tsconfig.json create mode 100644 libs/trendy-layout/tsconfig.lib.json create mode 100644 libs/trendy-layout/tsconfig.spec.json diff --git a/apps/trendy/src/app/app.component.html b/apps/trendy/src/app/app.component.html index 970f2e4..5eea12b 100644 --- a/apps/trendy/src/app/app.component.html +++ b/apps/trendy/src/app/app.component.html @@ -1,113 +1,3 @@ -
- Nx logo -

Welcome to {{ title }}!

-
-
-

Resources & Tools

-

Thank you for using and showing some ♥ for Nx.

-
- - If you like Nx, please give it a star: -
- - - - - Star -
- -
-

Here are some links to help you get started.

- -

Next Steps

-

Here are some things you can do with Nx.

-
- Add UI library - 
-# Generate UI lib
-ng g @nrwl/angular:lib ui
-
-# Add a component
-ng g @nrwl/angular:component xyz --project ui
-
-
- View dependency graph - 
nx dep-graph
-
-
- Run affected commands - 
-# see what's been affected by changes
-ng affected:dep-graph
-
-# run tests for current changes
-ng affected:test
-
-# run e2e tests for current changes
-ng affected:e2e
-
-
-
- - + + + \ No newline at end of file diff --git a/apps/trendy/src/app/app.component.scss b/apps/trendy/src/app/app.component.scss index f222adf..52542da 100644 --- a/apps/trendy/src/app/app.component.scss +++ b/apps/trendy/src/app/app.component.scss @@ -4,9 +4,6 @@ :host { display: block; font-family: sans-serif; - min-width: 300px; - max-width: 600px; - margin: 50px auto; } .gutter-left { diff --git a/apps/trendy/src/app/app.module.ts b/apps/trendy/src/app/app.module.ts index 24e1bc0..940aa23 100644 --- a/apps/trendy/src/app/app.module.ts +++ b/apps/trendy/src/app/app.module.ts @@ -1,17 +1,27 @@ import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; -import { LayoutModule } from '@demo-app/layout'; import { AppComponent } from './app.component'; import { RouterModule } from '@angular/router'; +import { PicturesModule, picturesRoutes } from '@demo-app/pictures'; +import { TrendyLayoutModule } from '@demo-app/trendy-layout'; @NgModule({ declarations: [AppComponent], imports: [ BrowserModule.withServerTransition({ appId: 'serverApp' }), - RouterModule.forRoot([], { initialNavigation: 'enabled' }), + RouterModule.forRoot( + [ + { path: '', children: picturesRoutes }, + { path: 'pictures', children: picturesRoutes }, + ], + { + initialNavigation: 'enabled', + } + ), BrowserAnimationsModule, - LayoutModule, + TrendyLayoutModule, + PicturesModule, ], providers: [], bootstrap: [AppComponent], diff --git a/apps/trendy/src/styles.scss b/apps/trendy/src/styles.scss index 90d4ee0..972b817 100644 --- a/apps/trendy/src/styles.scss +++ b/apps/trendy/src/styles.scss @@ -1 +1,5 @@ -/* You can add global styles to this file, and also import other style files */ +@import '~@angular/material/prebuilt-themes/pink-bluegrey.css'; + +body { + margin: 0; +} \ No newline at end of file diff --git a/docs/trendy-client-layout.md b/docs/trendy-client-layout.md new file mode 100644 index 0000000..74bb892 --- /dev/null +++ b/docs/trendy-client-layout.md @@ -0,0 +1,7 @@ +# Trendy Client Layout + +nx generate @nrwl/angular:lib pictures --routing --parent-module=apps/trendy/src/app/app.module.ts + +nx generate @nrwl/angular:lib trendy-layout + +nx generate @nrwl/angular:component containers/trendy-layout --project=trendy-layout diff --git a/jest.config.js b/jest.config.js index 110018a..402f5f9 100644 --- a/jest.config.js +++ b/jest.config.js @@ -9,5 +9,7 @@ module.exports = { '/apps/nest-demo', '/libs/trends', '/apps/trendy', + '/libs/pictures', + '/libs/trendy-layout', ], }; diff --git a/libs/pictures/.eslintrc.json b/libs/pictures/.eslintrc.json new file mode 100644 index 0000000..d4bca0f --- /dev/null +++ b/libs/pictures/.eslintrc.json @@ -0,0 +1,29 @@ +{ + "extends": ["../../.eslintrc.json"], + "ignorePatterns": ["!**/*"], + "overrides": [ + { + "files": ["*.ts"], + "extends": [ + "plugin:@nrwl/nx/angular", + "plugin:@angular-eslint/template/process-inline-templates" + ], + "parserOptions": { "project": ["libs/pictures/tsconfig.*?.json"] }, + "rules": { + "@angular-eslint/directive-selector": [ + "error", + { "type": "attribute", "prefix": "demoApp", "style": "camelCase" } + ], + "@angular-eslint/component-selector": [ + "error", + { "type": "element", "prefix": "demo-app", "style": "kebab-case" } + ] + } + }, + { + "files": ["*.html"], + "extends": ["plugin:@nrwl/nx/angular-template"], + "rules": {} + } + ] +} diff --git a/libs/pictures/README.md b/libs/pictures/README.md new file mode 100644 index 0000000..1af5285 --- /dev/null +++ b/libs/pictures/README.md @@ -0,0 +1,7 @@ +# pictures + +This library was generated with [Nx](https://nx.dev). + +## Running unit tests + +Run `nx test pictures` to execute the unit tests. diff --git a/libs/pictures/jest.config.js b/libs/pictures/jest.config.js new file mode 100644 index 0000000..e8e803e --- /dev/null +++ b/libs/pictures/jest.config.js @@ -0,0 +1,23 @@ +module.exports = { + displayName: 'pictures', + preset: '../../jest.preset.js', + setupFilesAfterEnv: ['/src/test-setup.ts'], + globals: { + 'ts-jest': { + tsconfig: '/tsconfig.spec.json', + stringifyContentPathRegex: '\\.(html|svg)$', + astTransformers: { + before: [ + 'jest-preset-angular/build/InlineFilesTransformer', + 'jest-preset-angular/build/StripStylesTransformer', + ], + }, + }, + }, + coverageDirectory: '../../coverage/libs/pictures', + snapshotSerializers: [ + 'jest-preset-angular/build/serializers/no-ng-attributes', + 'jest-preset-angular/build/serializers/ng-snapshot', + 'jest-preset-angular/build/serializers/html-comment', + ], +}; diff --git a/libs/pictures/src/index.ts b/libs/pictures/src/index.ts new file mode 100644 index 0000000..9e82248 --- /dev/null +++ b/libs/pictures/src/index.ts @@ -0,0 +1 @@ +export * from './lib/pictures.module'; diff --git a/libs/pictures/src/lib/pictures.module.ts b/libs/pictures/src/lib/pictures.module.ts new file mode 100644 index 0000000..6ec36df --- /dev/null +++ b/libs/pictures/src/lib/pictures.module.ts @@ -0,0 +1,10 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { RouterModule, Route } from '@angular/router'; + +export const picturesRoutes: Route[] = []; + +@NgModule({ + imports: [CommonModule, RouterModule], +}) +export class PicturesModule {} diff --git a/libs/pictures/src/test-setup.ts b/libs/pictures/src/test-setup.ts new file mode 100644 index 0000000..1100b3e --- /dev/null +++ b/libs/pictures/src/test-setup.ts @@ -0,0 +1 @@ +import 'jest-preset-angular/setup-jest'; diff --git a/libs/pictures/tsconfig.json b/libs/pictures/tsconfig.json new file mode 100644 index 0000000..62ebbd9 --- /dev/null +++ b/libs/pictures/tsconfig.json @@ -0,0 +1,13 @@ +{ + "extends": "../../tsconfig.base.json", + "files": [], + "include": [], + "references": [ + { + "path": "./tsconfig.lib.json" + }, + { + "path": "./tsconfig.spec.json" + } + ] +} diff --git a/libs/pictures/tsconfig.lib.json b/libs/pictures/tsconfig.lib.json new file mode 100644 index 0000000..bbcc12b --- /dev/null +++ b/libs/pictures/tsconfig.lib.json @@ -0,0 +1,14 @@ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "../../dist/out-tsc", + "target": "es2015", + "declaration": true, + "declarationMap": true, + "inlineSources": true, + "types": [], + "lib": ["dom", "es2018"] + }, + "exclude": ["src/test-setup.ts", "**/*.spec.ts"], + "include": ["**/*.ts"] +} diff --git a/libs/pictures/tsconfig.spec.json b/libs/pictures/tsconfig.spec.json new file mode 100644 index 0000000..cfff29a --- /dev/null +++ b/libs/pictures/tsconfig.spec.json @@ -0,0 +1,10 @@ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "../../dist/out-tsc", + "module": "commonjs", + "types": ["jest", "node"] + }, + "files": ["src/test-setup.ts"], + "include": ["**/*.spec.ts", "**/*.d.ts"] +} diff --git a/libs/trendy-layout/.eslintrc.json b/libs/trendy-layout/.eslintrc.json new file mode 100644 index 0000000..f9ba36b --- /dev/null +++ b/libs/trendy-layout/.eslintrc.json @@ -0,0 +1,29 @@ +{ + "extends": ["../../.eslintrc.json"], + "ignorePatterns": ["!**/*"], + "overrides": [ + { + "files": ["*.ts"], + "extends": [ + "plugin:@nrwl/nx/angular", + "plugin:@angular-eslint/template/process-inline-templates" + ], + "parserOptions": { "project": ["libs/trendy-layout/tsconfig.*?.json"] }, + "rules": { + "@angular-eslint/directive-selector": [ + "error", + { "type": "attribute", "prefix": "demoApp", "style": "camelCase" } + ], + "@angular-eslint/component-selector": [ + "error", + { "type": "element", "prefix": "demo-app", "style": "kebab-case" } + ] + } + }, + { + "files": ["*.html"], + "extends": ["plugin:@nrwl/nx/angular-template"], + "rules": {} + } + ] +} diff --git a/libs/trendy-layout/README.md b/libs/trendy-layout/README.md new file mode 100644 index 0000000..3e066cf --- /dev/null +++ b/libs/trendy-layout/README.md @@ -0,0 +1,7 @@ +# trendy-layout + +This library was generated with [Nx](https://nx.dev). + +## Running unit tests + +Run `nx test trendy-layout` to execute the unit tests. diff --git a/libs/trendy-layout/jest.config.js b/libs/trendy-layout/jest.config.js new file mode 100644 index 0000000..d44c4e9 --- /dev/null +++ b/libs/trendy-layout/jest.config.js @@ -0,0 +1,23 @@ +module.exports = { + displayName: 'trendy-layout', + preset: '../../jest.preset.js', + setupFilesAfterEnv: ['/src/test-setup.ts'], + globals: { + 'ts-jest': { + tsconfig: '/tsconfig.spec.json', + stringifyContentPathRegex: '\\.(html|svg)$', + astTransformers: { + before: [ + 'jest-preset-angular/build/InlineFilesTransformer', + 'jest-preset-angular/build/StripStylesTransformer', + ], + }, + }, + }, + coverageDirectory: '../../coverage/libs/trendy-layout', + snapshotSerializers: [ + 'jest-preset-angular/build/serializers/no-ng-attributes', + 'jest-preset-angular/build/serializers/ng-snapshot', + 'jest-preset-angular/build/serializers/html-comment', + ], +}; diff --git a/libs/trendy-layout/src/index.ts b/libs/trendy-layout/src/index.ts new file mode 100644 index 0000000..511ba05 --- /dev/null +++ b/libs/trendy-layout/src/index.ts @@ -0,0 +1 @@ +export * from './lib/trendy-layout.module'; diff --git a/libs/trendy-layout/src/lib/containers/trendy-layout/trendy-layout.component.html b/libs/trendy-layout/src/lib/containers/trendy-layout/trendy-layout.component.html new file mode 100644 index 0000000..17e2078 --- /dev/null +++ b/libs/trendy-layout/src/lib/containers/trendy-layout/trendy-layout.component.html @@ -0,0 +1,7 @@ + + BREAKING ART +
+ Paintings +
+ + \ No newline at end of file diff --git a/libs/trendy-layout/src/lib/containers/trendy-layout/trendy-layout.component.scss b/libs/trendy-layout/src/lib/containers/trendy-layout/trendy-layout.component.scss new file mode 100644 index 0000000..e0ba333 --- /dev/null +++ b/libs/trendy-layout/src/lib/containers/trendy-layout/trendy-layout.component.scss @@ -0,0 +1,3 @@ +.right-nav { + margin-left: auto; +} \ No newline at end of file diff --git a/libs/trendy-layout/src/lib/containers/trendy-layout/trendy-layout.component.spec.ts b/libs/trendy-layout/src/lib/containers/trendy-layout/trendy-layout.component.spec.ts new file mode 100644 index 0000000..b8bf7d1 --- /dev/null +++ b/libs/trendy-layout/src/lib/containers/trendy-layout/trendy-layout.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { TrendyLayoutComponent } from './trendy-layout.component'; + +describe('TrendyLayoutComponent', () => { + let component: TrendyLayoutComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ TrendyLayoutComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(TrendyLayoutComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/libs/trendy-layout/src/lib/containers/trendy-layout/trendy-layout.component.ts b/libs/trendy-layout/src/lib/containers/trendy-layout/trendy-layout.component.ts new file mode 100644 index 0000000..666a491 --- /dev/null +++ b/libs/trendy-layout/src/lib/containers/trendy-layout/trendy-layout.component.ts @@ -0,0 +1,10 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'demo-app-trendy-layout', + templateUrl: './trendy-layout.component.html', + styleUrls: ['./trendy-layout.component.scss'] +}) +export class TrendyLayoutComponent { + +} diff --git a/libs/trendy-layout/src/lib/trendy-layout.module.ts b/libs/trendy-layout/src/lib/trendy-layout.module.ts new file mode 100644 index 0000000..e25b2d9 --- /dev/null +++ b/libs/trendy-layout/src/lib/trendy-layout.module.ts @@ -0,0 +1,13 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { MaterialModule } from '@demo-app/material'; // Added +import { RouterModule } from '@angular/router'; +import { TrendyLayoutComponent } from './containers/trendy-layout/trendy-layout.component'; // Added + + +@NgModule({ + imports: [CommonModule, MaterialModule, RouterModule], + declarations: [TrendyLayoutComponent], + exports: [TrendyLayoutComponent], +}) +export class TrendyLayoutModule {} diff --git a/libs/trendy-layout/src/test-setup.ts b/libs/trendy-layout/src/test-setup.ts new file mode 100644 index 0000000..1100b3e --- /dev/null +++ b/libs/trendy-layout/src/test-setup.ts @@ -0,0 +1 @@ +import 'jest-preset-angular/setup-jest'; diff --git a/libs/trendy-layout/tsconfig.json b/libs/trendy-layout/tsconfig.json new file mode 100644 index 0000000..62ebbd9 --- /dev/null +++ b/libs/trendy-layout/tsconfig.json @@ -0,0 +1,13 @@ +{ + "extends": "../../tsconfig.base.json", + "files": [], + "include": [], + "references": [ + { + "path": "./tsconfig.lib.json" + }, + { + "path": "./tsconfig.spec.json" + } + ] +} diff --git a/libs/trendy-layout/tsconfig.lib.json b/libs/trendy-layout/tsconfig.lib.json new file mode 100644 index 0000000..bbcc12b --- /dev/null +++ b/libs/trendy-layout/tsconfig.lib.json @@ -0,0 +1,14 @@ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "../../dist/out-tsc", + "target": "es2015", + "declaration": true, + "declarationMap": true, + "inlineSources": true, + "types": [], + "lib": ["dom", "es2018"] + }, + "exclude": ["src/test-setup.ts", "**/*.spec.ts"], + "include": ["**/*.ts"] +} diff --git a/libs/trendy-layout/tsconfig.spec.json b/libs/trendy-layout/tsconfig.spec.json new file mode 100644 index 0000000..cfff29a --- /dev/null +++ b/libs/trendy-layout/tsconfig.spec.json @@ -0,0 +1,10 @@ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "../../dist/out-tsc", + "module": "commonjs", + "types": ["jest", "node"] + }, + "files": ["src/test-setup.ts"], + "include": ["**/*.spec.ts", "**/*.d.ts"] +} diff --git a/nx.json b/nx.json index 1cbd2a3..ebe4379 100644 --- a/nx.json +++ b/nx.json @@ -56,6 +56,12 @@ }, "trendy-ssr": { "tags": [] + }, + "pictures": { + "tags": [] + }, + "trendy-layout": { + "tags": [] } } } diff --git a/tsconfig.base.json b/tsconfig.base.json index 4535de6..06bbd91 100644 --- a/tsconfig.base.json +++ b/tsconfig.base.json @@ -20,7 +20,9 @@ "@demo-app/layout": ["libs/layout/src/index.ts"], "@demo-app/material": ["libs/material/src/index.ts"], "@demo-app/products": ["libs/products/src/index.ts"], - "@demo-app/trends": ["libs/trends/src/index.ts"] + "@demo-app/trends": ["libs/trends/src/index.ts"], + "@demo-app/pictures": ["libs/pictures/src/index.ts"], + "@demo-app/trendy-layout": ["libs/trendy-layout/src/index.ts"] } }, "exclude": ["node_modules", "tmp"] diff --git a/workspace.json b/workspace.json index d79f7ac..4471baf 100644 --- a/workspace.json +++ b/workspace.json @@ -561,6 +561,60 @@ } } } + }, + "pictures": { + "projectType": "library", + "root": "libs/pictures", + "sourceRoot": "libs/pictures/src", + "prefix": "demo-app", + "targets": { + "test": { + "executor": "@nrwl/jest:jest", + "outputs": [ + "coverage/libs/pictures" + ], + "options": { + "jestConfig": "libs/pictures/jest.config.js", + "passWithNoTests": true + } + }, + "lint": { + "executor": "@nrwl/linter:eslint", + "options": { + "lintFilePatterns": [ + "libs/pictures/src/**/*.ts", + "libs/pictures/src/**/*.html" + ] + } + } + } + }, + "trendy-layout": { + "projectType": "library", + "root": "libs/trendy-layout", + "sourceRoot": "libs/trendy-layout/src", + "prefix": "demo-app", + "targets": { + "test": { + "executor": "@nrwl/jest:jest", + "outputs": [ + "coverage/libs/trendy-layout" + ], + "options": { + "jestConfig": "libs/trendy-layout/jest.config.js", + "passWithNoTests": true + } + }, + "lint": { + "executor": "@nrwl/linter:eslint", + "options": { + "lintFilePatterns": [ + "libs/trendy-layout/src/**/*.ts", + "libs/trendy-layout/src/**/*.html" + ] + } + } + } } }, "cli": {