feat(ZCH-59): add zupit icon

package.json

@@ -72,6 +72,7 @@
     "@swc/helpers": "~0.5.0",
     "rxjs": "~7.8.0",
     "tslib": "~2.5.0",
-    "zone.js": "0.13.0"
+    "zone.js": "0.13.0",
+    "zupit-fantasticon": "1.0.0"
   }
 }

packages/zu-icon/.eslintrc.json

@@ -0,0 +1,36 @@
+{
+  "extends": ["../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts"],
+      "rules": {
+        "@angular-eslint/directive-selector": [
+          "error",
+          {
+            "type": "attribute",
+            "prefix": "zuIcon",
+            "style": "camelCase"
+          }
+        ],
+        "@angular-eslint/component-selector": [
+          "error",
+          {
+            "type": "element",
+            "prefix": "zu-icon",
+            "style": "kebab-case"
+          }
+        ]
+      },
+      "extends": [
+        "plugin:@nx/angular",
+        "plugin:@angular-eslint/template/process-inline-templates"
+      ]
+    },
+    {
+      "files": ["*.html"],
+      "extends": ["plugin:@nx/angular-template"],
+      "rules": {}
+    }
+  ]
+}

packages/zu-icon/README.md

@@ -0,0 +1,36 @@
+# zu-icon
+
+This library provides a helper component for the [zupit-fantasticon](https://www.npmjs.com/package/zupit-fantasticon) package. It allows you to easily use the icons generated by `zupit-fantasticon` in your Angular application.
+
+## Usage
+
+Once installed `zupit-fantasticon` and generated the icons, you can use the `ZuIconComponent` to display the icons in your Angular application.
+First you will need to import the `ZuIconModule` and to provide the `CUSTOM_ICONS_ENUM` injection token with the enum generated by `zupit-fantasticon`:
+
+
+`app.module.ts`:
+```typescript
+import {Icons} from "../path-to-your-icons-enum";
+import {CUSTOM_ICONS_ENUM, ZuIconModule} from "@zupit-it/zu-icon";
+
+@NgModule({
+    imports: [
+        ZuIconModule,
+    ],
+    providers: [
+        {provide: CUSTOM_ICONS_ENUM, useValue: Icons},
+    ]
+})
+export class AppModule {}
+```
+
+Then you can use the `zu-icon` component in your templates:
+
+```html
+<zu-icon [icon]="Icons.MyIcon"></zu-icon>
+```
+
+If you don't provide a valid icon (i.e. an icon that is not in the enum), the component will not be displayed and an error will be thrown in the console.
+
+
+

packages/zu-icon/jest.config.ts

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

packages/zu-icon/ng-package.json

@@ -0,0 +1,8 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/packages/zu-icon",
+  "lib": {
+    "entryFile": "src/index.ts"
+  },
+  "assets": ["CHANGELOG.md", "README.md"]
+}

packages/zu-icon/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "@zupit-it/zu-icon",
+  "version": "0.0.1",
+  "peerDependencies": {
+    "@angular/common": "^16.2.0",
+    "@angular/core": "^16.2.0"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "sideEffects": false,
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/zupit-it/zupit-angular.git"
+  }
+}

packages/zu-icon/project.json

@@ -0,0 +1,84 @@
+{
+  "name": "zu-icon",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "packages/zu-icon/src",
+  "prefix": "zupit-it",
+  "tags": [],
+  "projectType": "library",
+  "targets": {
+    "build": {
+      "executor": "@nx/angular:ng-packagr-lite",
+      "outputs": ["{workspaceRoot}/dist/{projectRoot}"],
+      "options": {
+        "project": "packages/zu-icon/ng-package.json"
+      },
+      "configurations": {
+        "production": {
+          "tsConfig": "packages/zu-icon/tsconfig.lib.prod.json"
+        },
+        "development": {
+          "tsConfig": "packages/zu-icon/tsconfig.lib.json"
+        }
+      },
+      "defaultConfiguration": "production"
+    },
+    "format": {
+      "executor": "nx:run-commands",
+      "options": {
+        "commands": [
+          {
+            "command": "npx nx format:check --projects zu-icon"
+          }
+        ],
+        "parallel": false
+      }
+    },
+    "lint": {
+      "executor": "@nx/linter:eslint",
+      "outputs": ["{options.outputFile}"],
+      "options": {
+        "lintFilePatterns": [
+          "packages/zu-icon/**/*.ts",
+          "packages/zu-icon/**/*.html",
+          "packages/zu-icon/package.json"
+        ]
+      }
+    },
+    "test": {
+      "executor": "@nx/jest:jest",
+      "outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
+      "options": {
+        "jestConfig": "packages/zu-icon/jest.config.ts",
+        "passWithNoTests": true
+      },
+      "configurations": {
+        "ci": {
+          "ci": true,
+          "codeCoverage": true
+        }
+      }
+    },
+    "release": {
+      "executor": "@jscutlery/semver:version",
+      "options": {
+        "preset": "conventional",
+        "postTargets": ["zu-icon:release:github", "zu-icon:publish"],
+        "push": true
+      }
+    },
+    "release:github": {
+      "executor": "@jscutlery/semver:github",
+      "options": {
+        "tag": "${tag}",
+        "notes": "${notes}"
+      }
+    },
+    "publish": {
+      "executor": "ngx-deploy-npm:deploy",
+      "options": {
+        "access": "public",
+        "buildTarget": "production"
+      }
+    }
+  }
+}

packages/zu-icon/src/index.ts

@@ -0,0 +1,2 @@
+export * from './lib/zu-icon.module'
+export * from './lib/components/zupit-icon.component'

packages/zu-icon/src/lib/components/zupit-icon.component.html

@@ -0,0 +1 @@
+<i *ngIf="icon" [class]="'icon icon-' + icon"></i>

packages/zu-icon/src/lib/components/zupit-icon.component.ts

@@ -0,0 +1,41 @@
+import {Component, Inject, InjectionToken, Input} from '@angular/core';
+
+export interface IconsEnum {
+    [key: string]: string;
+}
+
+export const CUSTOM_ICONS_ENUM = new InjectionToken<IconsEnum>('CUSTOM_ICONS_ENUM');
+
+@Component({
+    selector: 'zu-icon',
+    templateUrl: './zupit-icon.component.html',
+    styleUrls: ['./zupit-icon.component.scss'],
+})
+export class ZupitIconComponent {
+    @Input() set icon(value: string) {
+        if (!this.validateIcon(value)) {
+            throw new Error(`Invalid icon '${value}' provided.`);
+        }
+        this._icon = value;
+    }
+
+    get icon(): string {
+        return this._icon;
+    }
+
+    private _icon: string;
+
+    private validateIcon(icon: string): boolean {
+        return Object.values(this.icons).includes(icon);
+    }
+
+    constructor(@Inject(CUSTOM_ICONS_ENUM) public icons: IconsEnum) {
+        if (!icons) {
+            throw new Error('CUSTOM_ICONS_ENUM not provided. Please provide the Icons enum.');
+        }
+
+        if(typeof icons !== "object") {
+            throw new Error('CUSTOM_ICONS_ENUM not valid. Please provide a valid Icons enum.');
+        }
+    }
+}

packages/zu-icon/src/lib/zu-icon.module.ts

@@ -0,0 +1,10 @@
+import {NgModule} from '@angular/core'
+import {CommonModule} from '@angular/common'
+import {ZupitIconComponent} from "./components/zupit-icon.component";
+
+@NgModule({
+  imports: [CommonModule],
+  declarations: [ZupitIconComponent],
+  exports: [ZupitIconComponent]
+})
+export class ZuIconModule {}

packages/zu-icon/src/test-setup.ts

@@ -0,0 +1 @@
+import 'jest-preset-angular/setup-jest'

packages/zu-icon/tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "target": "es2022",
+    "useDefineForClassFields": false
+  },
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    }
+  ],
+  "extends": "../../tsconfig.base.json"
+}

packages/zu-icon/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"]
+}

packages/zu-icon/tsconfig.lib.prod.json

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

packages/zu-icon/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"
+  ]
+}

tsconfig.base.json

@@ -17,7 +17,8 @@
     "paths": {
       "@zupit-it/ng-auth": ["packages/ng-auth/src/index.ts"],
       "@zupit-it/ng-form": ["packages/ng-form/src/index.ts"],
-      "@zupit-it/tools": ["packages/tools/src/index.ts"]
+      "@zupit-it/tools": ["packages/tools/src/index.ts"],
+      "@zupit-it/zu-icon": ["packages/zu-icon/src/index.ts"]
     }
   },
   "exclude": ["node_modules", "tmp"]