Implement the UI for create files using code

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/dotcms-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",
+        "../../../**/dotcms-fields/**/src/lib/**/*.stories.ts"
     ]
 }

core-web/libs/dotcms-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": {}
+        }
+    ]
+}

core-web/libs/dotcms-fields/README.md

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

core-web/libs/dotcms-fields/jest.config.ts

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

@@ -0,0 +1,31 @@
+{
+    "name": "dotcms-fields",
+    "$schema": "../node_modules/nx/schemas/project-schema.json",
+    "projectType": "library",
+    "sourceRoot": "libs/dotcms-fields/src",
+    "prefix": "dotcms",
+    "targets": {
+        "test": {
+            "executor": "@nrwl/jest:jest",
+            "outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
+            "options": {
+                "jestConfig": "libs/dotcms-fields/jest.config.ts",
+                "passWithNoTests": true
+            },
+            "configurations": {
+                "ci": {
+                    "ci": true,
+                    "codeCoverage": true
+                }
+            }
+        },
+        "lint": {
+            "executor": "@nrwl/linter:eslint",
+            "outputs": ["{options.outputFile}"],
+            "options": {
+                "lintFilePatterns": ["libs/dotcms-fields/**/*.ts", "libs/dotcms-fields/**/*.html"]
+            }
+        }
+    },
+    "tags": []
+}

core-web/libs/dotcms-fields/src/index.ts

@@ -0,0 +1 @@
+export * from './lib/dotcms-fields.module';

core-web/libs/dotcms-fields/src/lib/components/binary-code-field/binary-code-field.component.html

@@ -0,0 +1 @@
+<p>binary-code-field works!</p>

core-web/libs/dotcms-fields/src/lib/components/binary-code-field/binary-code-field.component.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { BinaryCodeFieldComponent } from './binary-code-field.component';
+
+describe('BinaryCodeFieldComponent', () => {
+    let component: BinaryCodeFieldComponent;
+    let fixture: ComponentFixture<BinaryCodeFieldComponent>;
+
+    beforeEach(async () => {
+        await TestBed.configureTestingModule({
+            declarations: [BinaryCodeFieldComponent]
+        }).compileComponents();
+
+        fixture = TestBed.createComponent(BinaryCodeFieldComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it('should create', () => {
+        expect(component).toBeTruthy();
+    });
+});

core-web/libs/dotcms-fields/src/lib/components/binary-code-field/binary-code-field.component.stories.ts

@@ -0,0 +1,21 @@
+import { moduleMetadata, Story, Meta } from '@storybook/angular';
+
+import { BinaryCodeFieldComponent } from './binary-code-field.component';
+
+export default {
+    title: 'Dotcms fields/components/Binary Code Field Component',
+    component: BinaryCodeFieldComponent,
+    decorators: [
+        moduleMetadata({
+            imports: []
+        })
+    ]
+} as Meta<BinaryCodeFieldComponent>;
+
+const Template: Story<BinaryCodeFieldComponent> = (args: BinaryCodeFieldComponent) => ({
+    props: args
+});
+
+export const Primary = Template.bind({});
+
+Primary.args = {};

core-web/libs/dotcms-fields/src/lib/components/binary-code-field/binary-code-field.component.ts

@@ -0,0 +1,9 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+
+@Component({
+    selector: 'dotcms-binary-code-field',
+    templateUrl: './binary-code-field.component.html',
+    styleUrls: ['./binary-code-field.component.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class BinaryCodeFieldComponent {}

core-web/libs/dotcms-fields/src/lib/dotcms-fields.module.ts

@@ -0,0 +1,9 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { BinaryCodeFieldComponent } from './components/binary-code-field/binary-code-field.component';
+
+@NgModule({
+    imports: [CommonModule],
+    declarations: [BinaryCodeFieldComponent]
+})
+export class DotcmsFieldsModule {}

core-web/libs/dotcms-fields/src/test-setup.ts

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

core-web/libs/dotcms-fields/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
+    }
+}

core-web/libs/dotcms-fields/tsconfig.lib.json

@@ -0,0 +1,12 @@
+{
+    "extends": "./tsconfig.json",
+    "compilerOptions": {
+        "outDir": "../../dist/out-tsc",
+        "declaration": true,
+        "declarationMap": true,
+        "inlineSources": true,
+        "types": []
+    },
+    "exclude": ["src/test-setup.ts", "src/**/*.spec.ts", "jest.config.ts", "src/**/*.test.ts"],
+    "include": ["src/**/*.ts"]
+}

core-web/libs/dotcms-fields/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/tsconfig.base.json

@@ -25,6 +25,7 @@
             "@dotcms/dotcms": ["libs/dotcms/src/index.ts"],
             "@dotcms/dotcms-field-elements": ["libs/dotcms-field-elements/src/index.ts"],
             "@dotcms/dotcms-field-elements/loader": ["dist/libs/dotcms-field-elements/loader"],
+            "@dotcms/dotcms-fields": ["libs/dotcms-fields/src/index.ts"],
             "@dotcms/dotcms-js": ["libs/dotcms-js/src/public_api.ts"],
             "@dotcms/dotcms-models": ["libs/dotcms-models/src/index.ts"],
             "@dotcms/dotcms-webcomponents": ["libs/dotcms-webcomponents/src/index.ts"],