Fix #25786 dotCMS Fields: create a contenttype fields library

* dev: create contenttype-fields lib

* dev: create contenttype-fields-builder app

* dev: configure storybook in the contenttype-fields

* dev: add command to generate contenttype-fields.js

* feedback: fix lint

* feedback: fix tests

* feedbak: add REAADME.md description for contenttype-fields lib

* feedback: remove lib from lint exclude list

* feedback: fix typo

* dev: remove contenttype-fields-buolder-e2e app

core-web/apps/contenttype-fields-builder/.eslintrc.json

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

core-web/apps/contenttype-fields-builder/jest.config.ts

@@ -0,0 +1,22 @@
+/* eslint-disable */
+export default {
+    displayName: 'contenttype-fields-builder',
+    preset: '../../jest.preset.js',
+    setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
+    globals: {
+        'ts-jest': {
+            tsconfig: '<rootDir>/tsconfig.spec.json',
+            stringifyContentPathRegex: '\\.(html|svg)$'
+        }
+    },
+    coverageDirectory: '../../coverage/apps/contenttype-fields-builder',
+    transform: {
+        '^.+\\.(ts|mjs|js|html)$': 'jest-preset-angular'
+    },
+    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'
+    ]
+};

core-web/apps/contenttype-fields-builder/project.json

@@ -0,0 +1,104 @@
+{
+    "name": "contenttype-fields-builder",
+    "$schema": "../node_modules/nx/schemas/project-schema.json",
+    "projectType": "application",
+    "sourceRoot": "apps/contenttype-fields-builder/src",
+    "prefix": "dotcms",
+    "targets": {
+        "build": {
+            "executor": "@angular-devkit/build-angular:browser",
+            "outputs": ["{options.outputPath}"],
+            "options": {
+                "outputPath": "dist/apps/contenttype-fields-builder",
+                "index": "apps/contenttype-fields-builder/src/index.html",
+                "main": "apps/contenttype-fields-builder/src/main.ts",
+                "polyfills": ["zone.js"],
+                "tsConfig": "apps/contenttype-fields-builder/tsconfig.app.json",
+                "inlineStyleLanguage": "scss",
+                "assets": [
+                    "apps/contenttype-fields-builder/src/favicon.ico",
+                    "apps/contenttype-fields-builder/src/assets"
+                ],
+                "styles": ["apps/contenttype-fields-builder/src/styles.scss"],
+                "stylePreprocessorOptions": {
+                    "includePaths": ["libs/dotcms-scss/angular"]
+                },
+                "scripts": [
+                    {
+                        "bundleName": "generator-runtime",
+                        "input": "node_modules/regenerator-runtime/runtime.js"
+                    }
+                ]
+            },
+            "configurations": {
+                "production": {
+                    "budgets": [
+                        {
+                            "type": "initial",
+                            "maximumWarning": "500kb",
+                            "maximumError": "1mb"
+                        },
+                        {
+                            "type": "anyComponentStyle",
+                            "maximumWarning": "2kb",
+                            "maximumError": "4kb"
+                        }
+                    ],
+                    "outputHashing": "all"
+                },
+                "development": {
+                    "buildOptimizer": false,
+                    "optimization": false,
+                    "vendorChunk": true,
+                    "extractLicenses": false,
+                    "sourceMap": true,
+                    "namedChunks": true
+                }
+            },
+            "defaultConfiguration": "production"
+        },
+        "serve": {
+            "executor": "@angular-devkit/build-angular:dev-server",
+            "configurations": {
+                "production": {
+                    "browserTarget": "contenttype-fields-builder:build:production"
+                },
+                "development": {
+                    "browserTarget": "contenttype-fields-builder:build:development"
+                }
+            },
+            "defaultConfiguration": "development"
+        },
+        "extract-i18n": {
+            "executor": "@angular-devkit/build-angular:extract-i18n",
+            "options": {
+                "browserTarget": "contenttype-fields-builder:build"
+            }
+        },
+        "lint": {
+            "executor": "@nrwl/linter:eslint",
+            "outputs": ["{options.outputFile}"],
+            "options": {
+                "lintFilePatterns": [
+                    "apps/contenttype-fields-builder/**/*.ts",
+                    "apps/contenttype-fields-builder/**/*.html"
+                ]
+            }
+        },
+        "test": {
+            "executor": "@nrwl/jest:jest",
+            "outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
+            "options": {
+                "jestConfig": "apps/contenttype-fields-builder/jest.config.ts",
+                "passWithNoTests": true
+            },
+            "configurations": {
+                "ci": {
+                    "ci": true,
+                    "codeCoverage": true
+                }
+            }
+        }
+    },
+    "tags": []
+}

core-web/apps/contenttype-fields-builder/src/app/app.component.spec.ts

@@ -0,0 +1,23 @@
+import { TestBed } from '@angular/core/testing';
+
+import { AppComponent } from './app.component';
+
+describe('AppComponent', () => {
+    beforeEach(async () => {
+        await TestBed.configureTestingModule({
+            declarations: [AppComponent]
+        }).compileComponents();
+    });
+
+    it('should create the app', () => {
+        const fixture = TestBed.createComponent(AppComponent);
+        const app = fixture.componentInstance;
+        expect(app).toBeTruthy();
+    });
+
+    it(`should have as title 'contenttype-fields-builder'`, () => {
+        const fixture = TestBed.createComponent(AppComponent);
+        const app = fixture.componentInstance;
+        expect(app.title).toEqual('contenttype-fields-builder');
+    });
+});

core-web/apps/contenttype-fields-builder/src/app/app.component.ts

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector: 'dotcms-root',
+    templateUrl: './app.component.html'
+})
+export class AppComponent {
+    title = 'contenttype-fields-builder';
+}

core-web/apps/contenttype-fields-builder/src/app/app.module.ts

@@ -0,0 +1,42 @@
+import { DoBootstrap, Injector, NgModule, Type } from '@angular/core';
+import { createCustomElement } from '@angular/elements';
+import { BrowserModule } from '@angular/platform-browser';
+
+import { AppComponent } from './app.component';
+
+interface ContenttypeFieldElement {
+    tag: string;
+    component: Type<unknown>; // Expected to be a component
+}
+
+const CONTENTTYPE_FIELDS: ContenttypeFieldElement[] = [];
+
+@NgModule({
+    declarations: [AppComponent],
+    imports: [BrowserModule],
+    bootstrap: [AppComponent]
+})
+export class AppModule implements DoBootstrap {
+    constructor(private readonly injector: Injector) {}
+
+    ngDoBootstrap(): void {
+        try {
+            CONTENTTYPE_FIELDS.forEach(({ tag, component }) => {
+                // prevent 'has already been defined as a custom element' error
+                if (customElements.get(tag)) {
+                    return;
+                }
+
+                // create custom elements from angular components
+                const el = createCustomElement(component, {
+                    injector: this.injector
+                });
+
+                // define in browser registry
+                customElements.define(tag, el);
+            });
+        } catch (err) {
+            console.error(err);
+        }
+    }
+}

core-web/apps/contenttype-fields-builder/src/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8" />
+        <title>ContenttypeFieldsBuilder</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>
+        <dotcms-root></dotcms-root>
+    </body>
+</html>

core-web/apps/contenttype-fields-builder/src/main.ts

@@ -0,0 +1,7 @@
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app/app.module';
+
+platformBrowserDynamic()
+    .bootstrapModule(AppModule)
+    .catch((err) => console.error(err));

core-web/apps/contenttype-fields-builder/src/styles.scss

@@ -0,0 +1 @@
+/* You can add global styles to this file, and also import other style files */

core-web/apps/contenttype-fields-builder/src/test-setup.ts

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

core-web/apps/contenttype-fields-builder/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"]
+}

core-web/apps/contenttype-fields-builder/tsconfig.editor.json

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

core-web/apps/contenttype-fields-builder/tsconfig.json

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

core-web/apps/contenttype-fields-builder/tsconfig.spec.json

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

core-web/apps/dotcms-ui/.storybook/main.js

@@ -11,7 +11,8 @@ module.exports = {
         '../src/**/*.stories.mdx',
         '../src/**/*.stories.@(js|jsx|ts|tsx)',
         '../../../libs/template-builder/**/*.stories.@(js|jsx|ts|tsx|mdx)',
-        '../../../libs/block-editor/**/*.stories.@(js|jsx|ts|tsx|mdx)'
+        '../../../libs/block-editor/**/*.stories.@(js|jsx|ts|tsx|mdx)',
+        '../../../libs/contenttype-fields/**/*.stories.@(js|jsx|ts|tsx|mdx)'
     ],
     addons: ['storybook-design-token', '@storybook/addon-essentials', ...rootMain.addons],
     features: {

core-web/apps/dotcms-ui/.storybook/tsconfig.json

@@ -7,6 +7,7 @@
     "include": [
         "../src/**/*",
         "../../../**/template-builder/**/src/lib/**/*.stories.ts",
-        "../../../**/block-editor/**/src/lib/**/*.stories.ts"
+        "../../../**/block-editor/**/src/lib/**/*.stories.ts",
+        "../../../**/contenttype-fields/**/src/lib/**/*.stories.ts"
     ]
 }

core-web/libs/contenttype-fields/.eslintrc.json

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