refactor: move libs

apps/angular/16-master-dependency-injection/.eslintrc.json

@@ -4,23 +4,16 @@
   "overrides": [
     {
       "files": ["*.ts"],
+      "rules": {},
       "extends": [
         "plugin:@nx/angular",
         "plugin:@angular-eslint/template/process-inline-templates"
-      ],
-      "rules": {}
+      ]
     },
     {
       "files": ["*.html"],
       "extends": ["plugin:@nx/angular-template"],
       "rules": {}
-    },
-    {
-      "files": ["*.json"],
-      "parser": "jsonc-eslint-parser",
-      "rules": {
-        "@nx/dependency-checks": "error"
-      }
     }
   ]
 }

apps/angular/16-master-dependency-injection/README.md

@@ -1,7 +1,13 @@
-# angular-master-dependency-injection
+# Master Dependancy Injection
 
-This library was generated with [Nx](https://nx.dev).
+> author: thomas-laforge
 
-## Running unit tests
+### Run Application
 
-Run `nx test angular-master-dependency-injection` to execute the unit tests.
+```bash
+npx nx serve angular-master-dependency-injection
+```
+
+### Documentation and Instruction
+
+Challenge documentation is [here](https://angular-challenges.vercel.app/challenges/angular/16-di/).

apps/angular/16-master-dependency-injection/jest.config.ts

@@ -1,23 +0,0 @@
-/* eslint-disable */
-export default {
-  displayName: 'angular-master-dependency-injection',
-  preset: '../../../jest.preset.js',
-  setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
-  coverageDirectory:
-    '../../../coverage/apps/angular/16-master-dependency-injection',
-  transform: {
-    '^.+\\.(ts|mjs|js|html)$': [
-      'jest-preset-angular',
-      {
-        tsconfig: '<rootDir>/tsconfig.spec.json',
-        stringifyContentPathRegex: '\\.(html|svg)$',
-      },
-    ],
-  },
-  transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'],
-  snapshotSerializers: [
-    'jest-preset-angular/build/serializers/no-ng-attributes',
-    'jest-preset-angular/build/serializers/ng-snapshot',
-    'jest-preset-angular/build/serializers/html-comment',
-  ],
-};

apps/angular/16-master-dependency-injection/ng-package.json

@@ -1,7 +0,0 @@
-{
-  "$schema": "../../../node_modules/ng-packagr/ng-package.schema.json",
-  "dest": "../../../dist/apps/angular/16-master-dependency-injection",
-  "lib": {
-    "entryFile": "src/index.ts"
-  }
-}

apps/angular/16-master-dependency-injection/package.json

@@ -1,12 +0,0 @@
-{
-  "name": "angular-master-dependency-injection",
-  "version": "0.0.1",
-  "peerDependencies": {
-    "@angular/common": "^16.2.0",
-    "@angular/core": "^16.2.0"
-  },
-  "dependencies": {
-    "tslib": "^2.3.0"
-  },
-  "sideEffects": false
-}

apps/angular/16-master-dependency-injection/project.json

@@ -1,36 +1,77 @@
 {
   "name": "angular-master-dependency-injection",
   "$schema": "../../../node_modules/nx/schemas/project-schema.json",
+  "projectType": "application",
   "sourceRoot": "apps/angular/16-master-dependency-injection/src",
-  "prefix": "lib",
-  "tags": [],
-  "projectType": "library",
+  "prefix": "app",
   "targets": {
     "build": {
-      "executor": "@nx/angular:ng-packagr-lite",
-      "outputs": ["{workspaceRoot}/dist/{projectRoot}"],
+      "executor": "@angular-devkit/build-angular:browser",
+      "outputs": ["{options.outputPath}"],
       "options": {
-        "project": "apps/angular/16-master-dependency-injection/ng-package.json"
+        "outputPath": "dist/apps/angular/16-master-dependency-injection",
+        "index": "apps/angular/16-master-dependency-injection/src/index.html",
+        "main": "apps/angular/16-master-dependency-injection/src/main.ts",
+        "polyfills": ["zone.js"],
+        "tsConfig": "apps/angular/16-master-dependency-injection/tsconfig.app.json",
+        "inlineStyleLanguage": "scss",
+        "assets": [
+          "apps/angular/16-master-dependency-injection/src/favicon.ico",
+          "apps/angular/16-master-dependency-injection/src/assets"
+        ],
+        "styles": [
+          "apps/angular/16-master-dependency-injection/src/styles.scss"
+        ],
+        "scripts": []
       },
       "configurations": {
         "production": {
-          "tsConfig": "apps/angular/16-master-dependency-injection/tsconfig.lib.prod.json"
+          "budgets": [
+            {
+              "type": "initial",
+              "maximumWarning": "500kb",
+              "maximumError": "1mb"
+            },
+            {
+              "type": "anyComponentStyle",
+              "maximumWarning": "2kb",
+              "maximumError": "4kb"
+            }
+          ],
+          "outputHashing": "all"
         },
         "development": {
-          "tsConfig": "apps/angular/16-master-dependency-injection/tsconfig.lib.json"
+          "buildOptimizer": false,
+          "optimization": false,
+          "vendorChunk": true,
+          "extractLicenses": false,
+          "sourceMap": true,
+          "namedChunks": true
         }
       },
       "defaultConfiguration": "production"
     },
-    "test": {
-      "executor": "@nx/jest:jest",
-      "outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
+    "serve": {
+      "executor": "@angular-devkit/build-angular:dev-server",
+      "configurations": {
+        "production": {
+          "buildTarget": "angular-master-dependency-injection:build:production"
+        },
+        "development": {
+          "buildTarget": "angular-master-dependency-injection:build:development"
+        }
+      },
+      "defaultConfiguration": "development"
+    },
+    "extract-i18n": {
+      "executor": "@angular-devkit/build-angular:extract-i18n",
       "options": {
-        "jestConfig": "apps/angular/16-master-dependency-injection/jest.config.ts"
+        "buildTarget": "angular-master-dependency-injection:build"
       }
     },
     "lint": {
       "executor": "@nx/eslint:lint"
     }
-  }
+  },
+  "tags": []
 }

apps/angular/16-master-dependency-injection/src/app/app.component.ts

@@ -0,0 +1,53 @@
+import { TableComponent } from '@angular-challenges/shared/ui';
+import { AsyncPipe, NgFor } from '@angular/common';
+import { Component, Directive } from '@angular/core';
+import { CurrencyPipe } from './currency.pipe';
+import { CurrencyService } from './currency.service';
+import { Product, products } from './product.model';
+
+interface ProductContext {
+  $implicit: Product;
+}
+
+@Directive({
+  selector: 'ng-template[product]',
+  standalone: true,
+})
+export class ProductDirective {
+  static ngTemplateContextGuard(
+    dir: ProductDirective,
+    ctx: unknown,
+  ): ctx is ProductContext {
+    return true;
+  }
+}
+
+@Component({
+  standalone: true,
+  imports: [TableComponent, CurrencyPipe, AsyncPipe, NgFor, ProductDirective],
+  providers: [CurrencyService],
+  selector: 'app-root',
+  template: `
+    <table [items]="products">
+      <ng-template #header>
+        <tr>
+          <th *ngFor="let col of displayedColumns">
+            {{ col }}
+          </th>
+        </tr>
+      </ng-template>
+      <ng-template #body product let-product>
+        <tr>
+          <td>{{ product.name }}</td>
+          <td>{{ product.priceA | currency | async }}</td>
+          <td>{{ product.priceB | currency | async }}</td>
+          <td>{{ product.priceC | currency | async }}</td>
+        </tr>
+      </ng-template>
+    </table>
+  `,
+})
+export class AppComponent {
+  products = products;
+  displayedColumns = ['name', 'priceA', 'priceB', 'priceC'];
+}

apps/angular/16-master-dependency-injection/src/app/currency.pipe.ts

@@ -0,0 +1,17 @@
+import { inject, Pipe, PipeTransform } from '@angular/core';
+import { map } from 'rxjs';
+import { CurrencyService } from './currency.service';
+
+@Pipe({
+  name: 'currency',
+  standalone: true,
+})
+export class CurrencyPipe implements PipeTransform {
+  currencyService = inject(CurrencyService);
+
+  transform(price: number) {
+    return this.currencyService.symbol$.pipe(
+      map((s) => `${String(price)}${s}`),
+    );
+  }
+}

apps/angular/16-master-dependency-injection/src/app/currency.service.ts

@@ -0,0 +1,29 @@
+import { Injectable } from '@angular/core';
+import { ComponentStore } from '@ngrx/component-store';
+import { map } from 'rxjs';
+
+export interface Currency {
+  name: string;
+  code: string;
+  symbol: string;
+}
+
+export const currency: Currency[] = [
+  { name: 'Euro', code: 'EUR', symbol: '€' },
+  { name: 'Dollar US', code: 'USD', symbol: 'US$' },
+  { name: 'Dollar Autralien', code: 'AUD', symbol: 'AU$' },
+  { name: 'Livre Sterling', code: 'GBP', symbol: '£' },
+  { name: 'Dollar Canadien', code: 'CAD', symbol: 'CAD' },
+];
+
+@Injectable()
+export class CurrencyService extends ComponentStore<{ code: string }> {
+  readonly code$ = this.select((state) => state.code);
+  readonly symbol$ = this.code$.pipe(
+    map((code) => currency.find((c) => c.code === code)?.symbol ?? code),
+  );
+
+  constructor() {
+    super({ code: 'EUR' });
+  }
+}

apps/angular/16-master-dependency-injection/src/app/product.model.ts

@@ -0,0 +1,55 @@
+export interface Product {
+  name: string;
+  priceA: number;
+  priceB: number;
+  priceC: number;
+  currencyCode: string;
+}
+
+export const products: Product[] = [
+  {
+    name: 'bike',
+    priceA: 1000,
+    priceB: 2000,
+    priceC: 2200,
+    currencyCode: 'USD',
+  },
+  { name: 'tent', priceA: 112, priceB: 120, priceC: 41, currencyCode: 'EUR' },
+  {
+    name: 'sofa',
+    priceA: 500,
+    priceB: 422,
+    priceC: 5000,
+    currencyCode: 'EUR',
+  },
+  {
+    name: 'watch',
+    priceA: 50,
+    priceB: 130,
+    priceC: 150,
+    currencyCode: 'AUD',
+  },
+  {
+    name: 'computer',
+    priceA: 1000,
+    priceB: 2200,
+    priceC: 3500,
+    currencyCode: 'GBP',
+  },
+  { name: 'mug', priceA: 10, priceB: 15, priceC: 20, currencyCode: 'EUR' },
+  {
+    name: 'headset',
+    priceA: 100,
+    priceB: 150,
+    priceC: 220,
+    currencyCode: 'CAD',
+  },
+  { name: 'cable', priceA: 5, priceB: 10, priceC: 15, currencyCode: 'EUR' },
+  {
+    name: 'table',
+    priceA: 100,
+    priceB: 20,
+    priceC: 500,
+    currencyCode: 'EUR',
+  },
+];

apps/angular/16-master-dependency-injection/src/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Di</title>
+    <base href="/" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="icon" type="image/x-icon" href="favicon.ico" />
+  </head>
+  <body>
+    <app-root></app-root>
+  </body>
+</html>

apps/angular/16-master-dependency-injection/src/index.ts

@@ -1 +0,0 @@
-export { TableComponent } from './lib/table.component';

apps/angular/16-master-dependency-injection/src/lib/table.component.ts

@@ -1,29 +0,0 @@
-import { NgFor, NgTemplateOutlet } from '@angular/common';
-import { Component, ContentChild, Input, TemplateRef } from '@angular/core';
-
-@Component({
-  selector: 'table',
-  standalone: true,
-  imports: [NgTemplateOutlet, NgFor],
-  template: `
-    <thead>
-      <ng-container *ngTemplateOutlet="headerTemplate"></ng-container>
-    </thead>
-    <tbody *ngFor="let item of items">
-      <ng-container
-        *ngTemplateOutlet="
-          bodyTemplate;
-          context: { $implicit: item }
-        "></ng-container>
-    </tbody>
-  `,
-})
-export class TableComponent<T> {
-  @Input() items!: T[];
-
-  @ContentChild('header', { read: TemplateRef })
-  headerTemplate!: TemplateRef<void>;
-
-  @ContentChild('body', { read: TemplateRef })
-  bodyTemplate!: TemplateRef<{ $implicit: T }>;
-}

apps/angular/16-master-dependency-injection/src/main.ts

@@ -0,0 +1,4 @@
+import { bootstrapApplication } from '@angular/platform-browser';
+import { AppComponent } from './app/app.component';
+
+bootstrapApplication(AppComponent).catch((err) => console.error(err));

apps/angular/16-master-dependency-injection/src/styles.scss

@@ -0,0 +1,21 @@
+table {
+  width: 100%;
+}
+
+table thead > tr > th {
+  text-align: left;
+  padding: 1rem 1rem;
+  border: 1px solid #dee2e6;
+  border-width: 0 0 1px 0;
+  font-weight: 700;
+  color: #343a40;
+  background: #f8f9fa;
+  transition: box-shadow 0.2s;
+}
+
+table tbody > tr > td {
+  text-align: left;
+  border: 1px solid #dee2e6;
+  border-width: 0 0 1px 0;
+  padding: 1rem 1rem;
+}

apps/angular/16-master-dependency-injection/src/test-setup.ts

@@ -1,8 +0,0 @@
-// @ts-expect-error https://thymikee.github.io/jest-preset-angular/docs/getting-started/test-environment
-globalThis.ngJest = {
-  testEnvironmentOptions: {
-    errorOnUnknownElements: true,
-    errorOnUnknownProperties: true,
-  },
-};
-import 'jest-preset-angular/setup-jest';

apps/angular/16-master-dependency-injection/tsconfig.app.json

@@ -0,0 +1,10 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../../dist/out-tsc",
+    "types": []
+  },
+  "files": ["src/main.ts"],
+  "include": ["src/**/*.d.ts"],
+  "exclude": ["jest.config.ts", "src/**/*.test.ts", "src/**/*.spec.ts"]
+}

apps/angular/16-master-dependency-injection/tsconfig.editor.json

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

apps/angular/16-master-dependency-injection/tsconfig.json

@@ -13,10 +13,10 @@
   "include": [],
   "references": [
     {
-      "path": "./tsconfig.lib.json"
+      "path": "./tsconfig.app.json"
     },
     {
-      "path": "./tsconfig.spec.json"
+      "path": "./tsconfig.editor.json"
     }
   ],
   "extends": "../../../tsconfig.base.json",

apps/angular/16-master-dependency-injection/tsconfig.lib.json

@@ -1,17 +0,0 @@
-{
-  "extends": "./tsconfig.json",
-  "compilerOptions": {
-    "outDir": "../../../dist/out-tsc",
-    "declaration": true,
-    "declarationMap": true,
-    "inlineSources": true,
-    "types": []
-  },
-  "exclude": [
-    "src/**/*.spec.ts",
-    "src/test-setup.ts",
-    "jest.config.ts",
-    "src/**/*.test.ts"
-  ],
-  "include": ["src/**/*.ts"]
-}

apps/angular/16-master-dependency-injection/tsconfig.lib.prod.json

@@ -1,7 +0,0 @@
-{
-  "extends": "./tsconfig.lib.json",
-  "compilerOptions": {
-    "declarationMap": false
-  },
-  "angularCompilerOptions": {}
-}

apps/angular/16-master-dependency-injection/tsconfig.spec.json

@@ -1,16 +0,0 @@
-{
-  "extends": "./tsconfig.json",
-  "compilerOptions": {
-    "outDir": "../../../dist/out-tsc",
-    "module": "commonjs",
-    "target": "es2016",
-    "types": ["jest", "node"]
-  },
-  "files": ["src/test-setup.ts"],
-  "include": [
-    "jest.config.ts",
-    "src/**/*.test.ts",
-    "src/**/*.spec.ts",
-    "src/**/*.d.ts"
-  ]
-}