feat(pmp-web): ui lib for picture-label element

angular.json

@@ -675,7 +675,7 @@
       "sourceRoot": "libs/pmp-web/user/single-user-statistics/feature/src",
       "projectType": "library",
       "schematics": {},
-      "prefix": "pimp-my-pr",
+      "prefix": "pmp",
       "architect": {
         "lint": {
           "builder": "@angular-devkit/build-angular:tslint",
@@ -794,6 +794,32 @@
           "styleext": "scss"
         }
       }
+    },
+    "pmp-web-shared-ui-picture-label": {
+      "root": "libs/pmp-web/shared/ui-picture-label",
+      "sourceRoot": "libs/pmp-web/shared/ui-picture-label/src",
+      "projectType": "library",
+      "schematics": {},
+      "prefix": "pmp",
+      "architect": {
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": [
+              "libs/pmp-web/shared/ui-picture-label/tsconfig.lib.json",
+              "libs/pmp-web/shared/ui-picture-label/tsconfig.spec.json"
+            ],
+            "exclude": ["**/node_modules/**", "!libs/pmp-web/shared/ui-picture-label/**"]
+          }
+        },
+        "test": {
+          "builder": "@nrwl/jest:jest",
+          "options": {
+            "jestConfig": "libs/pmp-web/shared/ui-picture-label/jest.config.js",
+            "tsConfig": "libs/pmp-web/shared/ui-picture-label/tsconfig.spec.json"
+          }
+        }
+      }
     }
   },
   "cli": {

libs/pmp-web/shared/ui-picture-label/README.md

@@ -0,0 +1,7 @@
+# pmp-web-shared-ui-picture-label
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `ng test pmp-web-shared-ui-picture-label` to execute the unit tests via [Jest](https://jestjs.io).

libs/pmp-web/shared/ui-picture-label/jest.config.js

@@ -0,0 +1,9 @@
+module.exports = {
+  name: 'pmp-web-shared-ui-picture-label',
+  preset: '../../../../jest.config.js',
+  transform: {
+    '^.+\\.[tj]sx?$': 'ts-jest'
+  },
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'html'],
+  coverageDirectory: '../../../../coverage/libs/pmp-web/shared/ui-picture-label'
+};

libs/pmp-web/shared/ui-picture-label/src/index.ts

@@ -0,0 +1 @@
+export * from './lib/pmp-web-shared-ui-picture-label.module';

libs/pmp-web/shared/ui-picture-label/src/lib/components/picture-label/picture-label.component.html

@@ -0,0 +1,6 @@
+<div>
+  <img [src]="picture" [style.width]="pictureSize + 'px'" />
+  <span>
+    {{ label }}
+  </span>
+</div>

libs/pmp-web/shared/ui-picture-label/src/lib/components/picture-label/picture-label.component.scss

@@ -0,0 +1,12 @@
+div {
+  display: flex;
+  align-items: center;
+}
+
+img {
+  border-radius: 50%;
+}
+
+span {
+  margin-left: 1em;
+}

libs/pmp-web/shared/ui-picture-label/src/lib/components/picture-label/picture-label.component.ts

@@ -0,0 +1,12 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'pmp-picture-label',
+  templateUrl: './picture-label.component.html',
+  styleUrls: ['./picture-label.component.scss']
+})
+export class PictureLabelComponent {
+  @Input() label: string;
+  @Input() picture: string;
+  @Input() pictureSize = 32;
+}

libs/pmp-web/shared/ui-picture-label/src/lib/pmp-web-shared-ui-picture-label.module.ts

@@ -0,0 +1,11 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { PictureLabelComponent } from './components/picture-label/picture-label.component';
+
+@NgModule({
+  imports: [CommonModule],
+  declarations: [PictureLabelComponent],
+  exports: [PictureLabelComponent]
+})
+export class PmpWebSharedUiPictureLabelModule {}

libs/pmp-web/shared/ui-picture-label/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "extends": "../../../../tsconfig.json",
+  "compilerOptions": {
+    "types": ["node", "jest"]
+  },
+  "include": ["**/*.ts"]
+}

libs/pmp-web/shared/ui-picture-label/tsconfig.lib.json

@@ -0,0 +1,9 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../../../dist/out-tsc",
+    "types": []
+  },
+  "exclude": ["**/*.spec.ts"],
+  "include": ["**/*.ts"]
+}

libs/pmp-web/shared/ui-picture-label/tsconfig.spec.json

@@ -0,0 +1,9 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../../../dist/out-tsc",
+    "module": "commonjs",
+    "types": ["jest", "node"]
+  },
+  "include": ["**/*.spec.ts", "**/*.spec.tsx", "**/*.spec.js", "**/*.spec.jsx", "**/*.d.ts"]
+}

libs/pmp-web/shared/ui-picture-label/tslint.json

@@ -0,0 +1 @@
+{ "extends": "../../../../tslint.json", "rules": [] }

libs/pmp-web/user/single-user-statistics/feature/src/lib/containers/single-user-statistics/single-user-statistics.component.html

@@ -1,5 +1,10 @@
 <div class="user-statistics">
   <div *ngFor="let repo of mockedData">
-    {{ repo.repository.name }}
+    <pmp-picture-label
+      [label]="repo.repository.name"
+      [picture]="repo.repository.picture"
+      [pictureSize]="32"
+    >
+    </pmp-picture-label>
   </div>
 </div>

libs/pmp-web/user/single-user-statistics/feature/src/lib/containers/single-user-statistics/single-user-statistics.component.ts

@@ -4,7 +4,10 @@ import { first } from 'rxjs/operators';
 
 const mockedData = [
   {
-    repository: { name: 'java', picture: '' },
+    repository: {
+      name: 'java',
+      picture: 'https://d301sr5gafysq2.cloudfront.net/39e6dc2e5ab0/img/repo-avatars/java.png'
+    },
     data: [
       {
         title: 'crud users',
@@ -41,7 +44,10 @@ const mockedData = [
     ]
   },
   {
-    repository: { name: 'php', picture: '' },
+    repository: {
+      name: 'php',
+      picture: 'https://d301sr5gafysq2.cloudfront.net/39e6dc2e5ab0/img/repo-avatars/php.png'
+    },
     data: [
       {
         title: 'crud users',
@@ -81,7 +87,7 @@ const mockedData = [
 
 @Component({
   // tslint:disable-next-line:component-selector
-  selector: 'pimp-my-pr-single-user-statistics',
+  selector: 'pmp-single-user-statistics',
   templateUrl: './single-user-statistics.component.html',
   styleUrls: ['./single-user-statistics.component.scss']
 })

libs/pmp-web/user/single-user-statistics/feature/src/lib/pmp-web-user-single-user-statistics-feature.module.ts

@@ -2,9 +2,14 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { PmpWebUserSingleUserStatisticsRoutingModule } from './pmp-web-user-single-user-statistics-routing.module';
 import { SingleUserStatisticsComponent } from './containers/single-user-statistics/single-user-statistics.component';
+import { PmpWebSharedUiPictureLabelModule } from '@pimp-my-pr/pmp-web/shared/ui-picture-label';
 
 @NgModule({
-  imports: [CommonModule, PmpWebUserSingleUserStatisticsRoutingModule],
+  imports: [
+    CommonModule,
+    PmpWebUserSingleUserStatisticsRoutingModule,
+    PmpWebSharedUiPictureLabelModule
+  ],
   declarations: [SingleUserStatisticsComponent]
 })
 export class PmpWebUserSingleUserStatisticsFeatureModule {}

nx.json

@@ -74,6 +74,9 @@
     "pmp-web-user-single-user-statistics-feature": {
       "tags": ["scope:pmp-web-user", "type:feature"]
     },
+    "pmp-web-shared-ui-picture-label": {
+      "tags": ["scope:pmp-web-shared", "type:ui"]
+    },
     "pmp-web-user-data-access": {
       "tags": ["scope:pmp-web-user", "type:data-access"]
     },

tsconfig.json

@@ -54,6 +54,9 @@
       "@pimp-my-pr/pmp-web/user/domain": ["libs/pmp-web/user/domain/src/index.ts"],
       "@pimp-my-pr/pmp-web/repository/data-access-repository-statistics": [
         "libs/pmp-web/repository/data-access-repository-statistics/src/index.ts"
+      ],
+      "@pimp-my-pr/pmp-web/shared/ui-picture-label": [
+        "libs/pmp-web/shared/ui-picture-label/src/index.ts"
       ]
     }
   },

tslint.json

@@ -136,7 +136,7 @@
       }
     ],
     "directive-selector": [true, "attribute", "app", "camelCase"],
-    "component-selector": [true, "element", "app", "kebab-case"],
+    "component-selector": [true, "element", "app", "kebab-case", "pmp"],
     "no-conflicting-lifecycle": true,
     "no-host-metadata-property": true,
     "no-input-rename": true,