feat: 🎸 form builder + components shared library

libs/shared/components/.eslintrc.json

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

libs/shared/components/README.md

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

libs/shared/components/jest.config.ts

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

libs/shared/components/ng-package.json

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

libs/shared/components/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "@angular-cli-gui/shared/components",
+  "version": "0.0.1",
+  "peerDependencies": {
+    "@angular/common": "^15.1.0",
+    "@angular/core": "^15.1.0"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "sideEffects": false
+}

libs/shared/components/project.json

@@ -0,0 +1,50 @@
+{
+  "name": "shared-components",
+  "$schema": "../node_modules/nx/schemas/project-schema.json",
+  "projectType": "library",
+  "sourceRoot": "libs/shared/components/src",
+  "prefix": "cli",
+  "targets": {
+    "build": {
+      "executor": "@nrwl/angular:ng-packagr-lite",
+      "outputs": ["{workspaceRoot}/dist/{projectRoot}"],
+      "options": {
+        "project": "libs/shared/components/ng-package.json"
+      },
+      "configurations": {
+        "production": {
+          "tsConfig": "libs/shared/components/tsconfig.lib.prod.json"
+        },
+        "development": {
+          "tsConfig": "libs/shared/components/tsconfig.lib.json"
+        }
+      },
+      "defaultConfiguration": "production"
+    },
+    "test": {
+      "executor": "@nrwl/jest:jest",
+      "outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
+      "options": {
+        "jestConfig": "libs/shared/components/jest.config.ts",
+        "passWithNoTests": true
+      },
+      "configurations": {
+        "ci": {
+          "ci": true,
+          "codeCoverage": true
+        }
+      }
+    },
+    "lint": {
+      "executor": "@nrwl/linter:eslint",
+      "outputs": ["{options.outputFile}"],
+      "options": {
+        "lintFilePatterns": [
+          "libs/shared/components/**/*.ts",
+          "libs/shared/components/**/*.html"
+        ]
+      }
+    }
+  },
+  "tags": []
+}

libs/shared/components/src/index.ts

@@ -0,0 +1 @@
+export * from './lib/form-builder/form-builder.component';

libs/shared/components/src/lib/form-builder/form-builder.component.html

@@ -0,0 +1,9 @@
+<form [formGroup]="form" (ngSubmit)="onSubmit()">
+  <formly-form
+    [model]="formData"
+    [fields]="formFields"
+    [options]="formOptions"
+    [form]="form"
+  ></formly-form>
+  <button mat-button type="submit">Submit</button>
+</form>

libs/shared/components/src/lib/form-builder/form-builder.component.spec.ts

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

libs/shared/components/src/lib/form-builder/form-builder.component.ts

@@ -0,0 +1,45 @@
+import { CommonModule } from '@angular/common';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  EventEmitter,
+  Input,
+  Output,
+} from '@angular/core';
+import { FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
+import {
+  IFormData,
+  IFormFields,
+  IFormOptions,
+} from '@angular-cli-gui/shared/data';
+import { FormlyModule } from '@ngx-formly/core';
+import { FormlyMaterialModule } from '@ngx-formly/material';
+
+@Component({
+  selector: 'cli-form-builder',
+  standalone: true,
+  imports: [
+    CommonModule,
+    FormlyModule,
+    FormlyMaterialModule,
+    ReactiveFormsModule,
+    MatButtonModule,
+  ],
+  templateUrl: './form-builder.component.html',
+  styleUrls: ['./form-builder.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class FormBuilderComponent {
+  @Input() formData: IFormData = {};
+  @Input() formFields: IFormFields = [];
+  @Input() formOptions: IFormOptions = {};
+
+  form = new FormGroup({});
+
+  @Output() formSubmit = new EventEmitter<IFormData>();
+
+  public onSubmit(): void {
+    this.formSubmit.emit(this.formData);
+  }
+}

libs/shared/components/src/test-setup.ts

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

libs/shared/components/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
+  }
+}

libs/shared/components/tsconfig.lib.json

@@ -0,0 +1,17 @@
+{
+  "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"]
+}

libs/shared/components/tsconfig.lib.prod.json

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

libs/shared/components/tsconfig.spec.json

@@ -0,0 +1,15 @@
+{
+  "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"
+  ]
+}

libs/shared/data/src/index.ts

@@ -1,3 +1,4 @@
 export * from './lib/exec-result.interface';
 export * from './lib/generate-component-args.interface';
 export * from './lib/directory.interface';
+export * from './lib/form-builder.interface';

libs/shared/data/src/lib/form-builder.interface.ts

@@ -0,0 +1,11 @@
+import { FormlyFieldConfig, FormlyFormOptions } from '@ngx-formly/core';
+
+export interface IFormData {
+  [key: string]: any;
+}
+
+export type IFormField = FormlyFieldConfig;
+
+export type IFormFields = Array<IFormField>;
+
+export type IFormOptions = FormlyFormOptions;

tsconfig.base.json

@@ -18,6 +18,9 @@
       "@angular-cli-gui/configuration": ["libs/configuration/src/index.ts"],
       "@angular-cli-gui/executors": ["libs/executors/src/index.ts"],
       "@angular-cli-gui/generators": ["libs/generators/src/index.ts"],
+      "@angular-cli-gui/shared/components": [
+        "libs/shared/components/src/index.ts"
+      ],
       "@angular-cli-gui/shared/data": ["libs/shared/data/src/index.ts"],
       "@angular-cli-gui/workspace-manager": [
         "libs/workspace-manager/src/index.ts"