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/ng-fantasticon/.eslintrc.json

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

packages/ng-fantasticon/README.md

@@ -0,0 +1,32 @@
+# ng-fantasticon
+
+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.
+
+## Prerequisites
+
+Install [zupit-fantasticon](https://www.npmjs.com/package/zupit-fantasticon) and follow the [Angular setup instructions](https://www.npmjs.com/package/zupit-fantasticon#angular).
+
+## Usage
+
+You can use the `NgFantasticonComponent` to display the icons in your Angular application.
+First you will need to import the `NgFantasticonModule` and to provide your `Icons` enum generated by `zupit-fantasticon` via the `forRoot()` function:
+
+`app.module.ts`:
+
+```typescript
+import { Icons } from '../path-to-your-icons-enum'
+import { NgFantasticonModule } from '@zupit-it/ng-fantasticon'
+
+@NgModule({
+  imports: [NgFantasticonModule.forRoot(Icons)]
+})
+export class AppModule {}
+```
+
+Then you can use the `ng-fantasticon` component in your templates:
+
+```html
+<ng-fantasticon [icon]="Icons.MyIcon"></ng-fantasticon>
+```
+
+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/ng-fantasticon/jest.config.ts

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

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

packages/ng-fantasticon/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "@zupit-it/ng-fantasticon",
+  "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/ng-fantasticon/project.json

@@ -0,0 +1,87 @@
+{
+  "name": "ng-fantasticon",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "packages/ng-fantasticon/src",
+  "prefix": "zupit-it",
+  "tags": [],
+  "projectType": "library",
+  "targets": {
+    "build": {
+      "executor": "@nx/angular:ng-packagr-lite",
+      "outputs": ["{workspaceRoot}/dist/{projectRoot}"],
+      "options": {
+        "project": "packages/ng-fantasticon/ng-package.json"
+      },
+      "configurations": {
+        "production": {
+          "tsConfig": "packages/ng-fantasticon/tsconfig.lib.prod.json"
+        },
+        "development": {
+          "tsConfig": "packages/ng-fantasticon/tsconfig.lib.json"
+        }
+      },
+      "defaultConfiguration": "production"
+    },
+    "format": {
+      "executor": "nx:run-commands",
+      "options": {
+        "commands": [
+          {
+            "command": "npx nx format:check --projects ng-fantasticon"
+          }
+        ],
+        "parallel": false
+      }
+    },
+    "lint": {
+      "executor": "@nx/linter:eslint",
+      "outputs": ["{options.outputFile}"],
+      "options": {
+        "lintFilePatterns": [
+          "packages/ng-fantasticon/**/*.ts",
+          "packages/ng-fantasticon/**/*.html",
+          "packages/ng-fantasticon/package.json"
+        ]
+      }
+    },
+    "test": {
+      "executor": "@nx/jest:jest",
+      "outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
+      "options": {
+        "jestConfig": "packages/ng-fantasticon/jest.config.ts",
+        "passWithNoTests": true
+      },
+      "configurations": {
+        "ci": {
+          "ci": true,
+          "codeCoverage": true
+        }
+      }
+    },
+    "release": {
+      "executor": "@jscutlery/semver:version",
+      "options": {
+        "preset": "conventional",
+        "postTargets": [
+          "ng-fantasticon:release:github",
+          "ng-fantasticon: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/ng-fantasticon/src/index.ts

@@ -0,0 +1,2 @@
+export * from './lib/ng-fantasticon.module'
+export * from './lib/components/ng-fantasticon.component'

packages/ng-fantasticon/src/lib/components/ng-fantasticon.component.html

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

packages/ng-fantasticon/src/lib/components/ng-fantasticon.component.ts

@@ -0,0 +1,39 @@
+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'
+)
+
+export const ICONS_NAMES = new InjectionToken<Set<string>>(
+  'ICONS_NAMES_PRIVATE'
+)
+
+@Component({
+  selector: 'ng-fantasticon',
+  templateUrl: './ng-fantasticon.component.html',
+  styleUrls: ['./ng-fantasticon.component.scss']
+})
+export class NgFantasticonComponent {
+  private _icon: string
+
+  @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
+  }
+
+  constructor(@Inject(ICONS_NAMES) private iconsNames: Set<string>) {}
+
+  private validateIcon(icon: string): boolean {
+    return this.iconsNames.has(icon)
+  }
+}

packages/ng-fantasticon/src/lib/ng-fantasticon.module.ts

@@ -0,0 +1,40 @@
+import { ModuleWithProviders, NgModule } from '@angular/core'
+import { CommonModule } from '@angular/common'
+import {
+  CUSTOM_ICONS_ENUM,
+  ICONS_NAMES,
+  IconsEnum,
+  NgFantasticonComponent
+} from './components/ng-fantasticon.component'
+
+@NgModule({
+  imports: [CommonModule],
+  declarations: [NgFantasticonComponent],
+  exports: [NgFantasticonComponent]
+})
+export class NgFantasticonModule {
+  static forRoot(icons: IconsEnum): ModuleWithProviders<NgFantasticonModule> {
+    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.'
+      )
+    }
+
+    const iconsArray = Object.values(icons)
+    const iconsNames = new Set<string>(iconsArray)
+
+    return {
+      ngModule: NgFantasticonModule,
+      providers: [
+        { provide: CUSTOM_ICONS_ENUM, useValue: icons },
+        { provide: ICONS_NAMES, useValue: iconsNames }
+      ]
+    }
+  }
+}

packages/ng-fantasticon/src/test-setup.ts

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

packages/ng-fantasticon/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/ng-fantasticon/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/ng-fantasticon/tsconfig.lib.prod.json

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

packages/ng-fantasticon/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/ng-fantasticon": ["packages/ng-fantasticon/src/index.ts"]
     }
   },
   "exclude": ["node_modules", "tmp"]