From 394958d5c2b9ec5487283ce7dd33749345c1b291 Mon Sep 17 00:00:00 2001 From: Wojciech Janaszek Date: Mon, 23 Dec 2019 17:40:07 +0100 Subject: [PATCH] feat(pmp-web): shared navbar component --- angular.json | 81 ++++++++++--------- libs/pmp-web/repository/shell/tslint.json | 4 +- .../repository/users/shell/tslint.json | 4 +- libs/pmp-web/shared/ui/navbar/README.md | 7 ++ libs/pmp-web/shared/ui/navbar/jest.config.js | 9 +++ libs/pmp-web/shared/ui/navbar/src/index.ts | 1 + .../ui/navbar/src/lib/navbar.component.html | 12 +++ .../ui/navbar/src/lib/navbar.component.scss | 40 +++++++++ .../navbar/src/lib/navbar.component.spec.ts | 26 ++++++ .../ui/navbar/src/lib/navbar.component.ts | 9 +++ .../pmp-web-shared-ui-navbar.module.spec.ts | 14 ++++ .../lib/pmp-web-shared-ui-navbar.module.ts | 11 +++ .../shared/ui/navbar/src/test-setup.ts | 1 + libs/pmp-web/shared/ui/navbar/tsconfig.json | 7 ++ .../shared/ui/navbar/tsconfig.lib.json | 20 +++++ .../shared/ui/navbar/tsconfig.spec.json | 10 +++ libs/pmp-web/shared/ui/navbar/tslint.json | 7 ++ libs/pmp-web/shell/tslint.json | 4 +- nx.json | 3 + tsconfig.json | 21 ++--- 20 files changed, 230 insertions(+), 61 deletions(-) create mode 100644 libs/pmp-web/shared/ui/navbar/README.md create mode 100644 libs/pmp-web/shared/ui/navbar/jest.config.js create mode 100644 libs/pmp-web/shared/ui/navbar/src/index.ts create mode 100644 libs/pmp-web/shared/ui/navbar/src/lib/navbar.component.html create mode 100644 libs/pmp-web/shared/ui/navbar/src/lib/navbar.component.scss create mode 100644 libs/pmp-web/shared/ui/navbar/src/lib/navbar.component.spec.ts create mode 100644 libs/pmp-web/shared/ui/navbar/src/lib/navbar.component.ts create mode 100644 libs/pmp-web/shared/ui/navbar/src/lib/pmp-web-shared-ui-navbar.module.spec.ts create mode 100644 libs/pmp-web/shared/ui/navbar/src/lib/pmp-web-shared-ui-navbar.module.ts create mode 100644 libs/pmp-web/shared/ui/navbar/src/test-setup.ts create mode 100644 libs/pmp-web/shared/ui/navbar/tsconfig.json create mode 100644 libs/pmp-web/shared/ui/navbar/tsconfig.lib.json create mode 100644 libs/pmp-web/shared/ui/navbar/tsconfig.spec.json create mode 100644 libs/pmp-web/shared/ui/navbar/tslint.json diff --git a/angular.json b/angular.json index 6728816a..81d88801 100644 --- a/angular.json +++ b/angular.json @@ -21,10 +21,7 @@ "polyfills": "apps/pmp-web/src/polyfills.ts", "tsConfig": "apps/pmp-web/tsconfig.app.json", "aot": false, - "assets": [ - "apps/pmp-web/src/favicon.ico", - "apps/pmp-web/src/assets" - ], + "assets": ["apps/pmp-web/src/favicon.ico", "apps/pmp-web/src/assets"], "styles": ["apps/pmp-web/src/styles.scss"], "scripts": [] }, @@ -82,10 +79,7 @@ "lint": { "builder": "@angular-devkit/build-angular:tslint", "options": { - "tsConfig": [ - "apps/pmp-web/tsconfig.app.json", - "apps/pmp-web/tsconfig.spec.json" - ], + "tsConfig": ["apps/pmp-web/tsconfig.app.json", "apps/pmp-web/tsconfig.spec.json"], "exclude": ["**/node_modules/**", "!apps/pmp-web/**"] } }, @@ -164,10 +158,7 @@ "lint": { "builder": "@angular-devkit/build-angular:tslint", "options": { - "tsConfig": [ - "apps/pmp-api/tsconfig.app.json", - "apps/pmp-api/tsconfig.spec.json" - ], + "tsConfig": ["apps/pmp-api/tsconfig.app.json", "apps/pmp-api/tsconfig.spec.json"], "exclude": ["**/node_modules/**", "!apps/pmp-api/**"] } }, @@ -224,10 +215,7 @@ "libs/pmp-api/api-service/repository/api/tsconfig.lib.json", "libs/pmp-api/api-service/repository/api/tsconfig.spec.json" ], - "exclude": [ - "**/node_modules/**", - "!libs/pmp-api/api-service/repository/api/**" - ] + "exclude": ["**/node_modules/**", "!libs/pmp-api/api-service/repository/api/**"] } }, "test": { @@ -252,10 +240,7 @@ "libs/pmp-api/api-service/shell/tsconfig.lib.json", "libs/pmp-api/api-service/shell/tsconfig.spec.json" ], - "exclude": [ - "**/node_modules/**", - "!libs/pmp-api/api-service/shell/**" - ] + "exclude": ["**/node_modules/**", "!libs/pmp-api/api-service/shell/**"] } }, "test": { @@ -280,10 +265,7 @@ "libs/pmp-api/api-service/repository/core/tsconfig.lib.json", "libs/pmp-api/api-service/repository/core/tsconfig.spec.json" ], - "exclude": [ - "**/node_modules/**", - "!libs/pmp-api/api-service/repository/core/**" - ] + "exclude": ["**/node_modules/**", "!libs/pmp-api/api-service/repository/core/**"] } }, "test": { @@ -308,10 +290,7 @@ "libs/pmp-api/api-service/repository/data-access/tsconfig.lib.json", "libs/pmp-api/api-service/repository/data-access/tsconfig.spec.json" ], - "exclude": [ - "**/node_modules/**", - "!libs/pmp-api/api-service/repository/data-access/**" - ] + "exclude": ["**/node_modules/**", "!libs/pmp-api/api-service/repository/data-access/**"] } }, "test": { @@ -336,10 +315,7 @@ "libs/pmp-api/api-service/repository/domain/tsconfig.lib.json", "libs/pmp-api/api-service/repository/domain/tsconfig.spec.json" ], - "exclude": [ - "**/node_modules/**", - "!libs/pmp-api/api-service/repository/domain/**" - ] + "exclude": ["**/node_modules/**", "!libs/pmp-api/api-service/repository/domain/**"] } }, "test": { @@ -464,10 +440,7 @@ "libs/pmp-web/repository/users/shell/tsconfig.lib.json", "libs/pmp-web/repository/users/shell/tsconfig.spec.json" ], - "exclude": [ - "**/node_modules/**", - "!libs/pmp-web/repository/users/shell/**" - ] + "exclude": ["**/node_modules/**", "!libs/pmp-web/repository/users/shell/**"] } }, "test": { @@ -498,10 +471,7 @@ "libs/pmp-web/repository/shell/tsconfig.lib.json", "libs/pmp-web/repository/shell/tsconfig.spec.json" ], - "exclude": [ - "**/node_modules/**", - "!libs/pmp-web/repository/shell/**" - ] + "exclude": ["**/node_modules/**", "!libs/pmp-web/repository/shell/**"] } }, "test": { @@ -518,6 +488,37 @@ "styleext": "scss" } } + }, + "pmp-web-shared-ui-navbar": { + "projectType": "library", + "root": "libs/pmp-web/shared/ui/navbar", + "sourceRoot": "libs/pmp-web/shared/ui/navbar/src", + "prefix": "pimp-my-pr", + "architect": { + "lint": { + "builder": "@angular-devkit/build-angular:tslint", + "options": { + "tsConfig": [ + "libs/pmp-web/shared/ui/navbar/tsconfig.lib.json", + "libs/pmp-web/shared/ui/navbar/tsconfig.spec.json" + ], + "exclude": ["**/node_modules/**", "!libs/pmp-web/shared/ui/navbar/**"] + } + }, + "test": { + "builder": "@nrwl/jest:jest", + "options": { + "jestConfig": "libs/pmp-web/shared/ui/navbar/jest.config.js", + "tsConfig": "libs/pmp-web/shared/ui/navbar/tsconfig.spec.json", + "setupFile": "libs/pmp-web/shared/ui/navbar/src/test-setup.ts" + } + } + }, + "schematics": { + "@nrwl/angular:component": { + "styleext": "scss" + } + } } }, "cli": { diff --git a/libs/pmp-web/repository/shell/tslint.json b/libs/pmp-web/repository/shell/tslint.json index 83c38554..5534bd87 100644 --- a/libs/pmp-web/repository/shell/tslint.json +++ b/libs/pmp-web/repository/shell/tslint.json @@ -1,7 +1,7 @@ { "extends": "../../../../tslint.json", "rules": { - "directive-selector": [true, "attribute", "pimpMyPr", "camelCase"], - "component-selector": [true, "element", "pimp-my-pr", "kebab-case"] + "directive-selector": [true, "attribute", "pmp", "camelCase"], + "component-selector": [true, "element", "pmp", "kebab-case"] } } diff --git a/libs/pmp-web/repository/users/shell/tslint.json b/libs/pmp-web/repository/users/shell/tslint.json index 43ea0cf0..60476e8a 100644 --- a/libs/pmp-web/repository/users/shell/tslint.json +++ b/libs/pmp-web/repository/users/shell/tslint.json @@ -1,7 +1,7 @@ { "extends": "../../../../../tslint.json", "rules": { - "directive-selector": [true, "attribute", "pimpMyPr", "camelCase"], - "component-selector": [true, "element", "pimp-my-pr", "kebab-case"] + "directive-selector": [true, "attribute", "pmp", "camelCase"], + "component-selector": [true, "element", "pmp", "kebab-case"] } } diff --git a/libs/pmp-web/shared/ui/navbar/README.md b/libs/pmp-web/shared/ui/navbar/README.md new file mode 100644 index 00000000..19723fe9 --- /dev/null +++ b/libs/pmp-web/shared/ui/navbar/README.md @@ -0,0 +1,7 @@ +# pmp-web-shared-ui-navbar + +This library was generated with [Nx](https://nx.dev). + +## Running unit tests + +Run `nx test pmp-web-shared-ui-navbar` to execute the unit tests. diff --git a/libs/pmp-web/shared/ui/navbar/jest.config.js b/libs/pmp-web/shared/ui/navbar/jest.config.js new file mode 100644 index 00000000..718de8d9 --- /dev/null +++ b/libs/pmp-web/shared/ui/navbar/jest.config.js @@ -0,0 +1,9 @@ +module.exports = { + name: 'pmp-web-shared-ui-navbar', + preset: '../../../../../jest.config.js', + coverageDirectory: '../../../../../coverage/libs/pmp-web/shared/ui/navbar', + snapshotSerializers: [ + 'jest-preset-angular/AngularSnapshotSerializer.js', + 'jest-preset-angular/HTMLCommentSerializer.js' + ] +}; diff --git a/libs/pmp-web/shared/ui/navbar/src/index.ts b/libs/pmp-web/shared/ui/navbar/src/index.ts new file mode 100644 index 00000000..9264824d --- /dev/null +++ b/libs/pmp-web/shared/ui/navbar/src/index.ts @@ -0,0 +1 @@ +export * from './lib/pmp-web-shared-ui-navbar.module'; diff --git a/libs/pmp-web/shared/ui/navbar/src/lib/navbar.component.html b/libs/pmp-web/shared/ui/navbar/src/lib/navbar.component.html new file mode 100644 index 00000000..aca7ae24 --- /dev/null +++ b/libs/pmp-web/shared/ui/navbar/src/lib/navbar.component.html @@ -0,0 +1,12 @@ +
+
+ + pull request analyzer + +
+ +
diff --git a/libs/pmp-web/shared/ui/navbar/src/lib/navbar.component.scss b/libs/pmp-web/shared/ui/navbar/src/lib/navbar.component.scss new file mode 100644 index 00000000..d5df2df7 --- /dev/null +++ b/libs/pmp-web/shared/ui/navbar/src/lib/navbar.component.scss @@ -0,0 +1,40 @@ +.navbar__container { + background: #17304e; + color: #ffffff; + font-family: 'Roboto', sans-serif; + + display: flex; + justify-content: space-between; + padding: 16px; +} + +.navbar__title { + text-transform: uppercase; + font-size: 20px; + + display: flex; + align-items: center; +} + +.navbar__user-info { + display: flex; + + span { + display: flex; + align-items: center; + margin: 0 40px 0 20px; + } + + mat-icon { + width: 32px; + height: 32px; + font-size: 32px; + } +} + +.navbar__empty-line { + width: 32px; + height: 32px; + background: gray; + border-radius: 50%; +} diff --git a/libs/pmp-web/shared/ui/navbar/src/lib/navbar.component.spec.ts b/libs/pmp-web/shared/ui/navbar/src/lib/navbar.component.spec.ts new file mode 100644 index 00000000..0b311a3d --- /dev/null +++ b/libs/pmp-web/shared/ui/navbar/src/lib/navbar.component.spec.ts @@ -0,0 +1,26 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { NavbarComponent } from './navbar.component'; +import { MatIconModule } from '@angular/material'; + +describe('NavbarComponent', () => { + let component: NavbarComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [NavbarComponent], + imports: [MatIconModule] + }).compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(NavbarComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/libs/pmp-web/shared/ui/navbar/src/lib/navbar.component.ts b/libs/pmp-web/shared/ui/navbar/src/lib/navbar.component.ts new file mode 100644 index 00000000..2a530e55 --- /dev/null +++ b/libs/pmp-web/shared/ui/navbar/src/lib/navbar.component.ts @@ -0,0 +1,9 @@ +import { ChangeDetectionStrategy, Component } from '@angular/core'; + +@Component({ + selector: 'pmp-shared-ui-navbar', + templateUrl: './navbar.component.html', + styleUrls: ['./navbar.component.scss'], + changeDetection: ChangeDetectionStrategy.OnPush +}) +export class NavbarComponent {} diff --git a/libs/pmp-web/shared/ui/navbar/src/lib/pmp-web-shared-ui-navbar.module.spec.ts b/libs/pmp-web/shared/ui/navbar/src/lib/pmp-web-shared-ui-navbar.module.spec.ts new file mode 100644 index 00000000..17a2eb11 --- /dev/null +++ b/libs/pmp-web/shared/ui/navbar/src/lib/pmp-web-shared-ui-navbar.module.spec.ts @@ -0,0 +1,14 @@ +import { async, TestBed } from '@angular/core/testing'; +import { PmpWebSharedUiNavbarModule } from './pmp-web-shared-ui-navbar.module'; + +describe('PmpWebSharedUiNavbarModule', () => { + beforeEach(async(() => { + TestBed.configureTestingModule({ + imports: [PmpWebSharedUiNavbarModule] + }).compileComponents(); + })); + + it('should create', () => { + expect(PmpWebSharedUiNavbarModule).toBeDefined(); + }); +}); diff --git a/libs/pmp-web/shared/ui/navbar/src/lib/pmp-web-shared-ui-navbar.module.ts b/libs/pmp-web/shared/ui/navbar/src/lib/pmp-web-shared-ui-navbar.module.ts new file mode 100644 index 00000000..aab0083e --- /dev/null +++ b/libs/pmp-web/shared/ui/navbar/src/lib/pmp-web-shared-ui-navbar.module.ts @@ -0,0 +1,11 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { NavbarComponent } from './navbar.component'; +import { MatIconModule } from '@angular/material'; + +@NgModule({ + imports: [CommonModule, MatIconModule], + declarations: [NavbarComponent], + exports: [NavbarComponent] +}) +export class PmpWebSharedUiNavbarModule {} diff --git a/libs/pmp-web/shared/ui/navbar/src/test-setup.ts b/libs/pmp-web/shared/ui/navbar/src/test-setup.ts new file mode 100644 index 00000000..8d88704e --- /dev/null +++ b/libs/pmp-web/shared/ui/navbar/src/test-setup.ts @@ -0,0 +1 @@ +import 'jest-preset-angular'; diff --git a/libs/pmp-web/shared/ui/navbar/tsconfig.json b/libs/pmp-web/shared/ui/navbar/tsconfig.json new file mode 100644 index 00000000..bba47f7f --- /dev/null +++ b/libs/pmp-web/shared/ui/navbar/tsconfig.json @@ -0,0 +1,7 @@ +{ + "extends": "../../../../../tsconfig.json", + "compilerOptions": { + "types": ["node", "jest"] + }, + "include": ["**/*.ts"] +} diff --git a/libs/pmp-web/shared/ui/navbar/tsconfig.lib.json b/libs/pmp-web/shared/ui/navbar/tsconfig.lib.json new file mode 100644 index 00000000..ddea65db --- /dev/null +++ b/libs/pmp-web/shared/ui/navbar/tsconfig.lib.json @@ -0,0 +1,20 @@ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "../../../../../dist/out-tsc", + "target": "es2015", + "declaration": true, + "inlineSources": true, + "types": [], + "lib": ["dom", "es2018"] + }, + "angularCompilerOptions": { + "annotateForClosureCompiler": true, + "skipTemplateCodegen": true, + "strictMetadataEmit": true, + "fullTemplateTypeCheck": true, + "strictInjectionParameters": true, + "enableResourceInlining": true + }, + "exclude": ["src/test-setup.ts", "**/*.spec.ts"] +} diff --git a/libs/pmp-web/shared/ui/navbar/tsconfig.spec.json b/libs/pmp-web/shared/ui/navbar/tsconfig.spec.json new file mode 100644 index 00000000..3d77fc5c --- /dev/null +++ b/libs/pmp-web/shared/ui/navbar/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/pmp-web/shared/ui/navbar/tslint.json b/libs/pmp-web/shared/ui/navbar/tslint.json new file mode 100644 index 00000000..60476e8a --- /dev/null +++ b/libs/pmp-web/shared/ui/navbar/tslint.json @@ -0,0 +1,7 @@ +{ + "extends": "../../../../../tslint.json", + "rules": { + "directive-selector": [true, "attribute", "pmp", "camelCase"], + "component-selector": [true, "element", "pmp", "kebab-case"] + } +} diff --git a/libs/pmp-web/shell/tslint.json b/libs/pmp-web/shell/tslint.json index 972eee00..766faaa3 100644 --- a/libs/pmp-web/shell/tslint.json +++ b/libs/pmp-web/shell/tslint.json @@ -1,7 +1,7 @@ { "extends": "../../../tslint.json", "rules": { - "directive-selector": [true, "attribute", "pimpMyPr", "camelCase"], - "component-selector": [true, "element", "pimp-my-pr", "kebab-case"] + "directive-selector": [true, "attribute", "pmp", "camelCase"], + "component-selector": [true, "element", "pmp", "kebab-case"] } } diff --git a/nx.json b/nx.json index 3ace0d93..a404541a 100644 --- a/nx.json +++ b/nx.json @@ -52,6 +52,9 @@ }, "pmp-web-repository-shell": { "tags": ["scope:pmp-web-repository", "type:shell"] + }, + "pmp-web-shared-ui-navbar": { + "tags": ["scope:pmp-web", "type:ui"] } } } diff --git a/tsconfig.json b/tsconfig.json index 095a153d..8599e03f 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -20,9 +20,7 @@ "@pimp-my-pr/pmp-api/api-service/repository/api": [ "libs/pmp-api/api-service/repository/api/src/index.ts" ], - "@pimp-my-pr/pmp-api/api-service/shell": [ - "libs/pmp-api/api-service/shell/src/index.ts" - ], + "@pimp-my-pr/pmp-api/api-service/shell": ["libs/pmp-api/api-service/shell/src/index.ts"], "@pimp-my-pr/pmp-api/api-service/repository/core": [ "libs/pmp-api/api-service/repository/core/src/index.ts" ], @@ -32,22 +30,15 @@ "@pimp-my-pr/pmp-api/api-service/repository/domain": [ "libs/pmp-api/api-service/repository/domain/src/index.ts" ], - "@pimp-my-pr/pmp-api/shared/config": [ - "libs/pmp-api/shared/config/src/index.ts" - ], - "@pimp-my-pr/pmp-api/shared/domain": [ - "libs/pmp-api/shared/domain/src/index.ts" - ], + "@pimp-my-pr/pmp-api/shared/config": ["libs/pmp-api/shared/config/src/index.ts"], + "@pimp-my-pr/pmp-api/shared/domain": ["libs/pmp-api/shared/domain/src/index.ts"], "@pimp-my-pr/shared/domain": ["libs/shared/domain/src/index.ts"], - "@pimp-my-pr/pmp-api/shared/util": [ - "libs/pmp-api/shared/util/src/index.ts" - ], + "@pimp-my-pr/pmp-api/shared/util": ["libs/pmp-api/shared/util/src/index.ts"], "@pimp-my-pr/pmp-web/repository/users/shell": [ "libs/pmp-web/repository/users/shell/src/index.ts" ], - "@pimp-my-pr/pmp-web/repository/shell": [ - "libs/pmp-web/repository/shell/src/index.ts" - ] + "@pimp-my-pr/pmp-web/repository/shell": ["libs/pmp-web/repository/shell/src/index.ts"], + "@pimp-my-pr/pmp-web/shared/ui/navbar": ["libs/pmp-web/shared/ui/navbar/src/index.ts"] } }, "exclude": ["node_modules", "tmp"]