feat(project): delete dependancy to primeng

apps/angular/di/.eslintrc.json

@@ -4,24 +4,7 @@
   "overrides": [
     {
       "files": ["*.ts"],
-      "rules": {
+      "rules": {},
-        "@angular-eslint/directive-selector": [
-          "error",
-          {
-            "type": "attribute",
-            "prefix": "app",
-            "style": "camelCase"
-          }
-        ],
-        "@angular-eslint/component-selector": [
-          "error",
-          {
-            "type": "element",
-            "prefix": "app",
-            "style": "kebab-case"
-          }
-        ]
-      },
       "extends": [
         "plugin:@nx/angular",
         "plugin:@angular-eslint/template/process-inline-templates"

apps/angular/di/project.json

@@ -19,12 +19,7 @@
           "apps/angular/di/src/favicon.ico",
           "apps/angular/di/src/assets"
         ],
-        "styles": [
+        "styles": ["apps/angular/di/src/styles.scss"],
-          "apps/angular/di/src/styles.scss",
-          "node_modules/primeicons/primeicons.css",
-          "node_modules/primeng/resources/themes/lara-light-blue/theme.css",
-          "node_modules/primeng/resources/primeng.min.css"
-        ],
         "scripts": []
       },
       "configurations": {

apps/angular/di/src/app/app.component.ts

@@ -1,7 +1,6 @@
-/* eslint-disable @angular-eslint/directive-selector */
+import { TableComponent } from '@angular-challenges/angular/di';
 import { AsyncPipe, NgFor } from '@angular/common';
 import { Component, Directive } from '@angular/core';
-import { TableModule } from 'primeng/table';
 import { CurrencyPipe } from './currency.pipe';
 import { CurrencyService } from './currency.service';
 import { Product, products } from './product.model';
@@ -11,7 +10,7 @@ interface ProductContext {
 }
 
 @Directive({
-  selector: 'ng-template[pTemplate="body"]',
+  selector: 'ng-template[product]',
   standalone: true,
 })
 export class ProductDirective {
@@ -25,19 +24,19 @@ export class ProductDirective {
 
 @Component({
   standalone: true,
-  imports: [TableModule, CurrencyPipe, AsyncPipe, NgFor, ProductDirective],
+  imports: [TableComponent, CurrencyPipe, AsyncPipe, NgFor, ProductDirective],
   providers: [CurrencyService],
   selector: 'app-root',
   template: `
-    <p-table [value]="products">
+    <table [items]="products">
-      <ng-template pTemplate="header">
+      <ng-template #header>
         <tr>
           <th *ngFor="let col of displayedColumns">
             {{ col }}
           </th>
         </tr>
       </ng-template>
-      <ng-template pTemplate="body" let-product>
+      <ng-template #body product let-product>
         <tr>
           <td>{{ product.name }}</td>
           <td>{{ product.priceA | currency | async }}</td>
@@ -45,7 +44,7 @@ export class ProductDirective {
           <td>{{ product.priceC | currency | async }}</td>
         </tr>
       </ng-template>
-    </p-table>
+    </table>
   `,
 })
 export class AppComponent {

apps/angular/di/src/styles.scss

@@ -1 +1,21 @@
-/* You can add global styles to this file, and also import other style files */
+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;
+}

libs/angular/di/.eslintrc.json

@@ -0,0 +1,26 @@
+{
+  "extends": ["../../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts"],
+      "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"
+      }
+    }
+  ]
+}

libs/angular/di/README.md

@@ -0,0 +1,7 @@
+# angular/di
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test angular/di` to execute the unit tests.

libs/angular/di/jest.config.ts

@@ -0,0 +1,22 @@
+/* eslint-disable */
+export default {
+  displayName: 'angular/di',
+  preset: '../../../jest.preset.js',
+  setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
+  coverageDirectory: '../../../coverage/libs/angular/di',
+  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',
+  ],
+};

libs/angular/di/ng-package.json

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

libs/angular/di/package.json

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

libs/angular/di/project.json

@@ -0,0 +1,51 @@
+{
+  "name": "angular/di",
+  "$schema": "../../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "libs/angular/di/src",
+  "prefix": "lib",
+  "tags": [],
+  "projectType": "library",
+  "targets": {
+    "build": {
+      "executor": "@nx/angular:ng-packagr-lite",
+      "outputs": ["{workspaceRoot}/dist/{projectRoot}"],
+      "options": {
+        "project": "libs/angular/di/ng-package.json"
+      },
+      "configurations": {
+        "production": {
+          "tsConfig": "libs/angular/di/tsconfig.lib.prod.json"
+        },
+        "development": {
+          "tsConfig": "libs/angular/di/tsconfig.lib.json"
+        }
+      },
+      "defaultConfiguration": "production"
+    },
+    "test": {
+      "executor": "@nx/jest:jest",
+      "outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
+      "options": {
+        "jestConfig": "libs/angular/di/jest.config.ts",
+        "passWithNoTests": true
+      },
+      "configurations": {
+        "ci": {
+          "ci": true,
+          "codeCoverage": true
+        }
+      }
+    },
+    "lint": {
+      "executor": "@nx/eslint:lint",
+      "outputs": ["{options.outputFile}"],
+      "options": {
+        "lintFilePatterns": [
+          "libs/angular/di/**/*.ts",
+          "libs/angular/di/**/*.html",
+          "libs/angular/di/package.json"
+        ]
+      }
+    }
+  }
+}

libs/angular/di/src/index.ts

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

libs/angular/di/src/lib/table.component.ts

@@ -0,0 +1,29 @@
+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 }>;
+}

libs/angular/di/src/test-setup.ts

@@ -0,0 +1,8 @@
+// @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';

libs/angular/di/tsconfig.json

@@ -0,0 +1,29 @@
+{
+  "compilerOptions": {
+    "target": "es2022",
+    "useDefineForClassFields": false,
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    }
+  ],
+  "extends": "../../../tsconfig.base.json",
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
+  }
+}

libs/angular/di/tsconfig.lib.json

@@ -0,0 +1,17 @@
+{
+  "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"]
+}

libs/angular/di/tsconfig.lib.prod.json

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

libs/angular/di/tsconfig.spec.json

@@ -0,0 +1,16 @@
+{
+  "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"
+  ]
+}

package-lock.json

@@ -7,7 +7,6 @@
     "": {
       "name": "angular-challenges",
       "version": "0.0.0",
-      "hasInstallScript": true,
       "license": "MIT",
       "dependencies": {
         "@angular/animations": "~16.2.0",
@@ -32,8 +31,6 @@
         "@rx-angular/state": "^1.7.0",
         "@rx-angular/template": "^1.0.0-rc.5",
         "@swc/helpers": "0.5.3",
-        "primeicons": "6.0.1",
-        "primeng": "16.0.2",
         "rxjs": "7.8.1",
         "tailwindcss": "^3.2.1",
         "tslib": "^2.3.0",
@@ -24564,26 +24561,6 @@
         "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
-    "node_modules/primeicons": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/primeicons/-/primeicons-6.0.1.tgz",
-      "integrity": "sha512-KDeO94CbWI4pKsPnYpA1FPjo79EsY9I+M8ywoPBSf9XMXoe/0crjbUK7jcQEDHuc0ZMRIZsxH3TYLv4TUtHmAA=="
-    },
-    "node_modules/primeng": {
-      "version": "16.0.2",
-      "resolved": "https://registry.npmjs.org/primeng/-/primeng-16.0.2.tgz",
-      "integrity": "sha512-gLFUSQ0fV5948yM1fMCv9oGaJ54AS8+HHSMOeR2lHWFiZzomxjXR0MST9yyAQ0NjrOlhke3BBpl+zYjISBeEJg==",
-      "dependencies": {
-        "tslib": "^2.3.0"
-      },
-      "peerDependencies": {
-        "@angular/common": "^16.0.0",
-        "@angular/core": "^16.0.0",
-        "@angular/forms": "^16.0.0",
-        "rxjs": "^6.0.0 || ^7.8.1",
-        "zone.js": "~0.13.0"
-      }
-    },
     "node_modules/proc-log": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/proc-log/-/proc-log-3.0.0.tgz",

package.json

@@ -34,8 +34,6 @@
     "@rx-angular/state": "^1.7.0",
     "@rx-angular/template": "^1.0.0-rc.5",
     "@swc/helpers": "0.5.3",
-    "primeicons": "6.0.1",
-    "primeng": "16.0.2",
     "rxjs": "7.8.1",
     "tailwindcss": "^3.2.1",
     "tslib": "^2.3.0",
@@ -58,6 +56,7 @@
     "@ngrx/schematics": "16.0.0",
     "@nx/cypress": "17.0.1",
     "@nx/devkit": "17.0.1",
+    "@nx/eslint": "17.0.1",
     "@nx/eslint-plugin": "17.0.1",
     "@nx/jest": "17.0.1",
     "@nx/js": "17.0.1",
@@ -97,8 +96,7 @@
     "testing-library-selector": "^0.2.1",
     "ts-jest": "29.1.0",
     "ts-node": "10.9.1",
-    "typescript": "5.1.6",
+    "typescript": "5.1.6"
-    "@nx/eslint": "17.0.1"
   },
   "lint-staged": {
     "*.{ts,json,md}": [

tsconfig.base.json

@@ -75,7 +75,8 @@
       ],
       "@tomalaforge/ngrx-callstate-store": [
         "libs/shared/ngrx-callstate-store/src/index.ts"
-      ]
+      ],
+      "@angular-challenges/angular/di": ["libs/angular/di/src/index.ts"]
     }
   },
   "exclude": ["node_modules", "tmp"]