feat(html-tag): add package to render any html tags

angular.json

@@ -45,6 +45,53 @@
       },
       "tags": ["components", "core"]
     },
+    "html-tag": {
+      "projectType": "library",
+      "root": "libs/html-tag",
+      "sourceRoot": "libs/html-tag/src",
+      "prefix": "orc",
+      "architect": {
+        "build": {
+          "builder": "@nrwl/angular:package",
+          "outputs": ["dist/libs/html-tag"],
+          "options": {
+            "project": "libs/html-tag/ng-package.json"
+          },
+          "configurations": {
+            "production": {
+              "tsConfig": "libs/html-tag/tsconfig.lib.prod.json"
+            },
+            "development": {
+              "tsConfig": "libs/html-tag/tsconfig.lib.json"
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "test": {
+          "builder": "@nrwl/jest:jest",
+          "outputs": ["coverage/libs/html-tag"],
+          "options": {
+            "jestConfig": "libs/html-tag/jest.config.js",
+            "passWithNoTests": true
+          },
+          "configurations": {
+            "watch": {
+              "watch": true
+            }
+          }
+        },
+        "lint": {
+          "builder": "@nrwl/linter:eslint",
+          "options": {
+            "lintFilePatterns": [
+              "libs/html-tag/src/**/*.ts",
+              "libs/html-tag/src/**/*.html"
+            ]
+          }
+        }
+      },
+      "tags": ["components", "ui"]
+    },
     "layout": {
       "root": "libs/layout",
       "sourceRoot": "libs/layout/src",

libs/html-tag/.browserslistrc

@@ -0,0 +1,16 @@
+# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
+# For additional information regarding the format and rule options, please see:
+# https://github.com/browserslist/browserslist#queries
+
+# For the full list of supported browsers by the Angular framework, please see:
+# https://angular.io/guide/browser-support
+
+# You can see what browsers were selected by your queries by running:
+#   npx browserslist
+
+last 1 Chrome version
+last 1 Firefox version
+last 2 Edge major versions
+last 2 Safari major versions
+last 2 iOS major versions
+Firefox ESR

libs/html-tag/.eslintrc.json

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

libs/html-tag/README.md

@@ -0,0 +1,26 @@
+# @orchestrator/html-tag
+
+> A component that allows to render any HTML elements for Orchestrator library.
+
+![@orchestrator/html-tag](https://img.shields.io/npm/v/@orchestrator/html-tag)
+
+## Registration
+
+```ts
+import { NgModule } from '@angular/core';
+import { OrchestratorCoreModule } from '@orchestrator/core';
+import { HtmlTagModule } from '@orchestrator/html-tag';
+
+@NgModule({
+  imports: [OrchestratorCoreModule.forRoot(), HtmlTagModule.forRoot()],
+})
+export class AppModule {}
+```
+
+## Components list
+
+| Component                                                             | Description |
+| --------------------------------------------------------------------- | ----------- |
+| [orc-html-tag](/libs/html-tag/src/lib/html-tag/html-tag-config.ts)    | Html Tag    |
+| [orc-html-text](/libs/html-tag/src/lib/html-text/html-text-config.ts) | HTML Text   |
+|                                                                       |             |

libs/html-tag/jest.config.js

@@ -0,0 +1,12 @@
+module.exports = {
+  displayName: 'html-tag',
+  preset: '../../jest.preset.js',
+  setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
+  globals: {
+    'ts-jest': {
+      tsconfig: '<rootDir>/tsconfig.spec.json',
+      stringifyContentPathRegex: '\\.(html|svg)$',
+    },
+  },
+  coverageDirectory: '../../coverage/libs/html-tag',
+};

libs/html-tag/ng-package.json

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

libs/html-tag/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "@orchestrator/html-tag",
+  "version": "0.0.1",
+  "peerDependencies": {
+    "@angular/common": "^12.0.0 || ^13.0.0",
+    "@angular/core": "^12.0.0 || ^13.0.0",
+    "@orchestrator/core": "^2.0.0",
+    "rxjs": "^6.0.0 || ^7.0.0"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "scripts": {
+    "prepare": "node ../../tools/scripts/prepare-lib.js"
+  }
+}

libs/html-tag/src/index.ts

@@ -0,0 +1 @@
+export * from './public_api';

libs/html-tag/src/lib/html-tag.module.ts

@@ -0,0 +1,24 @@
+import { CommonModule } from '@angular/common';
+import { ModuleWithProviders, NgModule } from '@angular/core';
+import { OrchestratorCoreModule } from '@orchestrator/core';
+import { HtmlTagComponent } from './html-tag/html-tag.component';
+import { HtmlTextComponent } from './html-text/html-text.component';
+
+@NgModule({
+  imports: [OrchestratorCoreModule, CommonModule],
+  exports: [HtmlTagComponent, HtmlTextComponent],
+  declarations: [HtmlTagComponent, HtmlTextComponent],
+})
+export class HtmlTagModule {
+  static forRoot(): ModuleWithProviders<HtmlTagModule> {
+    return {
+      ngModule: HtmlTagModule,
+      providers: [
+        ...OrchestratorCoreModule.registerComponents([
+          HtmlTagComponent,
+          HtmlTextComponent,
+        ]),
+      ],
+    };
+  }
+}

libs/html-tag/src/lib/html-tag/html-tag-config.spec.ts

@@ -0,0 +1,90 @@
+import { TestBed } from '@angular/core/testing';
+import {
+  ConfigurationService,
+  ErrorStrategy,
+  ThrowErrorStrategy,
+} from '@orchestrator/core';
+
+import { HtmlTagConfig } from './html-tag-config';
+
+describe('HtmlTagConfig', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [
+        ConfigurationService,
+        { provide: ErrorStrategy, useClass: ThrowErrorStrategy },
+      ],
+    });
+  });
+
+  it('should exist', () => {
+    expect(HtmlTagConfig).toBeTruthy();
+  });
+
+  describe('tag prop', () => {
+    const { testValid, testInvalid } = testValidProp('tag');
+
+    testValid(undefined);
+    testValid(null);
+    testValid('value', 'strings');
+
+    testInvalid(123, 'numbers');
+    testInvalid(true, 'booleans');
+    testInvalid({}, 'objects');
+  });
+
+  describe('namespace prop', () => {
+    const { testValid, testInvalid } = testValidProp('namespace');
+
+    testValid(undefined);
+    testValid(null);
+    testValid('value', 'strings');
+
+    testInvalid(123, 'numbers');
+    testInvalid(true, 'booleans');
+    testInvalid({}, 'objects');
+  });
+
+  describe('attributes prop', () => {
+    const { testValid, testInvalid } = testValidProp('attributes');
+
+    testValid(undefined);
+    testValid(null);
+    testValid(
+      { attr1: 'value1', attr2: 'value2' },
+      'object records of strings',
+    );
+    testValid({}, 'empty objects');
+
+    testInvalid('value', 'strings');
+    testInvalid(123, 'numbers');
+    testInvalid(true, 'booleans');
+    testInvalid([], 'arrays');
+    testInvalid({ attr1: 123 }, 'object records of numbers');
+    testInvalid({ attr1: true }, 'object records of booleans');
+    testInvalid({ attr1: [] }, 'object records of arrays');
+    testInvalid({ attr1: {} }, 'object records of objects');
+  });
+});
+
+function testValidProp(prop: string) {
+  const testValid = (val: unknown, name?: string) =>
+    it(`should allow ${name || val}`, () => {
+      expect(() =>
+        getConfigService().validate(HtmlTagConfig, { [prop]: val }),
+      ).not.toThrow();
+    });
+
+  const testInvalid = (val: unknown, name?: string) =>
+    it(`should NOT allow ${name || val}`, () => {
+      expect(() =>
+        getConfigService().validate(HtmlTagConfig, { [prop]: val }),
+      ).toThrow();
+    });
+
+  return { testValid, testInvalid };
+}
+
+function getConfigService(): ConfigurationService {
+  return TestBed.inject(ConfigurationService);
+}

libs/html-tag/src/lib/html-tag/html-tag-config.ts

@@ -0,0 +1,21 @@
+import { Injectable } from '@angular/core';
+import { Option, OptionTypeFactory } from '@orchestrator/core';
+import { record, string } from 'io-ts';
+
+@Injectable({ providedIn: 'root' })
+export class HtmlTagConfig {
+  @Option()
+  tag?: string;
+
+  @Option()
+  namespace?: string;
+
+  @OptionTypeFactory(() => record(string, string))
+  attributes?: { [attr: string]: string };
+
+  @Option()
+  text?: string;
+
+  @Option()
+  html?: string;
+}

libs/html-tag/src/lib/html-tag/html-tag.component.html

@@ -0,0 +1,4 @@
+<ng-template #tagContentAnchor></ng-template>
+<ng-template #contentTpl>
+  <orc-render-item *ngFor="let item of items" [item]="item"></orc-render-item>
+</ng-template>