ng-form-foundry 0.0.1

package/README.md

@@ -0,0 +1,63 @@
+# NgFormFoundry
+
+This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 20.3.0.
+
+## Code scaffolding
+
+Angular CLI includes powerful code scaffolding tools. To generate a new component, run:
+
+```bash
+ng generate component component-name
+```
+
+For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:
+
+```bash
+ng generate --help
+```
+
+## Building
+
+To build the library, run:
+
+```bash
+ng build ng-form-foundry
+```
+
+This command will compile your project, and the build artifacts will be placed in the `dist/` directory.
+
+### Publishing the Library
+
+Once the project is built, you can publish your library by following these steps:
+
+1. Navigate to the `dist` directory:
+   ```bash
+   cd dist/ng-form-foundry
+   ```
+
+2. Run the `npm publish` command to publish your library to the npm registry:
+   ```bash
+   npm publish
+   ```
+
+## Running unit tests
+
+To execute unit tests with the [Karma](https://karma-runner.github.io) test runner, use the following command:
+
+```bash
+ng test
+```
+
+## Running end-to-end tests
+
+For end-to-end (e2e) testing, run:
+
+```bash
+ng e2e
+```
+
+Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.
+
+## Additional Resources
+
+For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.

package/ng-package.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/ng-form-foundry",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  }
+}

package/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "ng-form-foundry",
+  "version": "0.0.1",
+  "peerDependencies": {
+    "@angular/common": "^20.3.0",
+    "@angular/core": "^20.3.0"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "sideEffects": false
+}

package/src/lib/core/dynamic-recursive-forms-builder.ts

@@ -0,0 +1,129 @@
+import {
+  FormArray,
+  FormControl,
+  FormGroup,
+  ValidatorFn,
+  Validators,
+} from '@angular/forms';
+import {
+  DFormControl,
+  DFormGroup,
+  FormGroupType,
+  Leaf,
+  LeafEnum,
+  LeafList,
+  LeafRuntimeType,
+  NodeGroup,
+  NodeGroupList,
+  NodeType,
+} from '../types/dynamic-recursive.types';
+
+// --- type guards
+function isLeaf(node: NodeType): node is Leaf {
+  return node.kind === 'leaf';
+}
+
+function isLeafList(node: NodeType): node is LeafList {
+  return node.kind === 'leafList';
+}
+function isNodeGroup(node: NodeType): node is NodeGroup {
+  return node.kind === 'nodeGroup';
+}
+function isNodeGroupList(node: NodeType): node is NodeGroupList {
+  return node.kind === 'nodeGroupList';
+}
+
+function enumValidator(choices: readonly (string | number)[]): ValidatorFn {
+  const set = new Set(choices);
+  return (ctrl) =>
+    ctrl.value == null || set.has(ctrl.value) ? null : { enum: true };
+}
+
+function buildLeafControl<L extends Leaf>(
+  leaf: L,
+  initial?: unknown,
+): FormControl<LeafRuntimeType<L['type']>> {
+  const validators: ValidatorFn[] = [];
+  if ('required' in leaf && leaf.required) validators.push(Validators.required);
+  if ('type' in leaf && leaf.type === 'enum') {
+    const choices = (leaf as LeafEnum).enum as (string | number)[];
+    validators.push(enumValidator(choices));
+  }
+  const defaultValue =
+    initial ?? ('default' in leaf ? (leaf as any).default : undefined) ?? null;
+  return new FormControl<LeafRuntimeType<L['type']>>(defaultValue, {
+    nonNullable: true,
+    validators,
+  });
+}
+
+function buildLeafListControl<L extends LeafList>(
+  list: L,
+  initial: LeafRuntimeType<L['type']>[] | null,
+): FormArray<FormControl<LeafRuntimeType<LeafList['type']> | null>> {
+  const values = (Array.isArray(initial) ? initial : undefined) ??
+    list.default ?? [null];
+  return new FormArray(values.map((v) => new FormControl(v)));
+}
+
+function buildNodeGroupControl<G extends NodeGroup>(
+  group: G,
+  initial?: Record<string, unknown> | null,
+): DFormGroup<G> {
+  const controls: any = {} as Partial<FormGroupType<G>>;
+  for (const key in group.children) {
+    const child = group.children[key];
+    controls[key] = buildControl(
+      child,
+      initial,
+    ) as FormGroupType<G>[typeof key];
+  }
+  return new FormGroup(controls as FormGroupType<G>) as DFormGroup<G>;
+}
+
+function buildNodeGroupListControl<GL extends NodeGroupList>(
+  list: GL,
+  initial: GL[] | null = null,
+): FormArray<DFormGroup<GL['type']>> {
+  const values = Array.isArray(initial) ? initial : [null];
+  return new FormArray(
+    values.map((v) => buildNodeGroupControl(list.type, v as any)),
+  );
+}
+
+export function buildControl<T extends NodeType>(
+  node: T,
+  initial?: unknown | null,
+): DFormControl<T> | FormControl<LeafRuntimeType<any>> | FormArray<any> {
+  if (isLeaf(node)) {
+    return buildLeafControl(node, initial);
+  }
+  if (isLeafList(node)) {
+    return buildLeafListControl(
+      node,
+      initial !== null
+        ? (initial as LeafRuntimeType<(T & LeafList)['type']>[])
+        : initial,
+    ) as DFormControl<T>;
+  }
+  if (isNodeGroup(node)) {
+    return buildNodeGroupControl(
+      node,
+      initial ? (initial as Record<string, unknown>) : null,
+    ) as DFormControl<T>;
+  }
+  if (isNodeGroupList(node)) {
+    return buildNodeGroupListControl(
+      node,
+      initial ? (initial as NodeGroupList[]) : null,
+    ) as DFormControl<T>;
+  }
+  return new FormControl(initial ?? '') as DFormControl<T>;
+}
+
+export function buildFormFromSchema<S extends NodeGroup>(
+  schema: S,
+  initial: Record<string, unknown> | null = null,
+): DFormGroup<S> {
+  return buildNodeGroupControl<S>(schema, initial);
+}

package/src/lib/core/utils.ts

@@ -0,0 +1,33 @@
+import { FormArray, FormControl, FormGroup } from '@angular/forms';
+import { Leaf, NodeGroup, NodeGroupList, NodeType } from '../types/dynamic-recursive.types';
+
+export function nodeGroupChildrenList(schema: NodeGroup): Array<{ key: string; value: NodeType }> {
+  const children = schema.children ?? {};
+  return Object.entries(children).map(([key, value]) => ({
+    key,
+    value: value as NodeType,
+  }));
+}
+
+export function nodeGroupChildrenLeafs(schema: NodeGroup): Array<{ key: string; value: Leaf }> {
+  const children = schema.children ?? {};
+  return Object.entries(children).reduce((acc, [key, value]) => {
+    if (value.kind === 'leaf') {
+      acc.push({ key, value: value as Leaf });
+    }
+    return acc;
+  }, [] as Array<{ key: string; value: Leaf }>);
+}
+
+export function asFormControl(control: any) {
+  return control as FormControl;
+}
+
+export function asFormArray(control: any) {
+  return control as FormArray;
+}
+
+export function asFormGroup(control: any) {
+  return control as FormGroup;
+}
+

package/src/lib/dynamic-recursive-form/anon-leaf-renderer/anon-leaf-renderer.component.html

@@ -0,0 +1,31 @@
+<div class="anon-leaf-container">
+@if (AnonLeaf.type === 'string') {
+  <mat-form-field [appearance]="editable ? 'fill' : 'outline'">
+    <mat-label>{{ label }} #{{ index + 1}}</mat-label>
+    <input [readonly]="!editable"
+           [formControl]="control"
+           matInput type="text" >
+    @if (removable) {
+    }
+  </mat-form-field>
+} @else if (AnonLeaf.type === 'number') {
+  <mat-form-field [appearance]="editable ? 'fill' : 'outline'">
+    <mat-label>{{ label }} #{{ index + 1}}</mat-label>
+    <input [readonly]="!editable"
+           [formControl]="control"
+           matInput type="number">
+  </mat-form-field>
+} @else if (AnonLeaf.type === 'boolean') {
+  <mat-checkbox [disabled]="!editable" [formControl]="control">value</mat-checkbox>
+}
+ @else if (AnonLeaf.type === 'enum' && 'enum' in AnonLeaf) {
+  <mat-form-field>
+    <mat-label>{{ label }} #{{ index + 1}}</mat-label>
+    <mat-select [formControl]="control">
+      @for (option of (AnonLeaf.type === 'enum' ? AnonLeaf.enum : []); track $index) {
+        <mat-option [value]="option">{{ option }}</mat-option>
+      }
+    </mat-select>
+  </mat-form-field>
+}
+</div>

package/src/lib/dynamic-recursive-form/anon-leaf-renderer/anon-leaf-renderer.component.scss

@@ -0,0 +1,11 @@
+.anon-leaf-container {
+  display: flex;
+  flex-direction: row;
+  gap: 8px;
+  align-items: center;
+  flex: 1 1 0;
+}
+
+mat-form-field {
+  flex: 1;
+}

package/src/lib/dynamic-recursive-form/anon-leaf-renderer/anon-leaf-renderer.component.spec.ts

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

package/src/lib/dynamic-recursive-form/anon-leaf-renderer/anon-leaf-renderer.component.ts

@@ -0,0 +1,39 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { AnonLeaf } from '../../types/dynamic-recursive.types';
+import { FormControl, ReactiveFormsModule } from '@angular/forms';
+import { MatSelectModule } from '@angular/material/select';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatIconModule } from '@angular/material/icon';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatInputModule } from '@angular/material/input';
+import { MatButtonModule } from '@angular/material/button';
+
+@Component({
+  selector: 'nff-anon-leaf-renderer',
+  standalone: true,
+  imports: [
+    ReactiveFormsModule,
+    MatFormFieldModule,
+    MatSelectModule,
+    MatIconModule,
+    MatCheckboxModule,
+    MatInputModule,
+    MatButtonModule,
+  ],
+  templateUrl: './anon-leaf-renderer.component.html',
+  styleUrl: './anon-leaf-renderer.component.scss',
+})
+export class AnonLeafRendererComponent {
+  @Input() AnonLeaf!: AnonLeaf;
+  @Input() initialValue!: string;
+  @Input() control = new FormControl();
+  @Input() removable: boolean = false;
+  @Input() editable: boolean = true;
+  @Input() index!: number;
+  @Output() remove = new EventEmitter();
+  @Input() label!: string;
+
+  emitRemoveEvent() {
+    this.remove.emit();
+  }
+}

package/src/lib/dynamic-recursive-form/dynamic-recursive-form.component.html

@@ -0,0 +1,168 @@
+@if (!root) {
+  <ng-template #formRender>
+    <div class="form-content" [formGroup]="formGroup">
+      <div class="leafs-container">
+        <div class="fields">
+          @for (childItem of nodeGroupChildrenList; track $index) {
+            @let child = childItem.value;
+            @if (child.kind == 'leaf') {
+              <nff-leaf-renderer
+                [leaf_]=child
+                [control]=asFormControl(formGroup.get(child.name))
+                [removable]=false
+                [editable]=editable
+                [initialValue]="formGroup.get(child.name)?.value"
+              />
+            }
+          }
+          @for (childItem of nodeGroupChildrenList; track $index) {
+            @let child = childItem.value;
+            @if (child.kind == 'leafList') {
+              <nff-leaf-list-renderer
+                [leaf_]="child"
+                [editable]=editable
+                [formArray]="asFormArray(formGroup.get(child.name))"
+                [initialValue]="formGroup.get(child.name)?.value"
+              />
+            }
+          }
+        </div>
+      </div>
+      @for (childItem of nodeGroupChildrenList; track $index) {
+        @let child = childItem.value;
+        @if (child.kind == 'nodeGroup' && child.appearance?.flatten) {
+          <nff-dynamic-recursive-form
+            [schema]="child"
+            [formGroup]="asFormGroup(formGroup.get(child.name))"
+            [initialValue]="formGroup.get(child.name)?.value"
+            [editable]="editable"
+          />
+        }
+        @else if (child.kind == 'nodeGroup'){
+          <nff-dynamic-recursive-form
+            [schema]="child"
+            [formGroup]="asFormGroup(formGroup.get(child.name))"
+            [initialValue]="formGroup.get(child.name)?.value"
+            [editable]="editable"
+          />
+        }
+      }
+
+      @for (childItem of nodeGroupChildrenList; track $index) {
+        @let child = childItem.value;
+        @if (child.kind == 'nodeGroupList') {
+          <nff-node-group-list-renderer
+            [nodeGroupList]="child"
+            [formArray]="asFormArray(formGroup.get(child.name))"
+            [initialValue]="formGroup.get(child.name)?.value"
+            [editable]="editable"
+          />
+        }
+      }
+    </div>
+  </ng-template>
+  @if (schema.appearance?.flatten) {
+    <div class="flattened-form">
+    <ng-container *ngTemplateOutlet="formRender"></ng-container>
+    @if (editable && removable) {
+      <button matIconButton  class="small-icon-button edit-icon" [class]="{ 'edit-icon': !editable}" (click)="emitRemoveEvent(); $event.stopPropagation()">
+        <mat-icon>delete</mat-icon>
+      </button>
+    }
+    </div>
+  }
+  @else {
+  <mat-card appearance="outlined" [class]="{ 'mat-card-no-broder': schema.appearance?.noBorder }">
+    <mat-card-header>
+      <div>
+        <button matIconButton class="small-icon-button"  [class]="{ 'edit-icon': !editable}"  (click)="editable = !editable">
+          <mat-icon>edit</mat-icon>
+        </button>
+        @if (editable && removable) {
+          <button matIconButton  class="small-icon-button edit-icon" [class]="{ 'edit-icon': !editable}" (click)="emitRemoveEvent(); $event.stopPropagation()">
+            <mat-icon>delete</mat-icon>
+          </button>
+        }
+      </div>
+      <mat-card-title class="config-form-subsection-card">
+        {{ title ?? schema.label ?? schema.name }}
+      </mat-card-title>
+    </mat-card-header>
+    <mat-card-content>
+      <ng-container *ngTemplateOutlet="formRender"></ng-container>
+    </mat-card-content>
+  </mat-card>
+  }
+} @else {
+  <div class="form-content" [formGroup]="formGroup">
+    <div class="leafs-container">
+      <div class="fields">
+        <button matIconButton class="small-icon-button"  [class]="{ 'edit-icon': !editable }"  (click)="editable = !editable">
+          <mat-icon>edit</mat-icon>
+        </button>
+        @for (childItem of nodeGroupChildrenList; track $index) {
+          @let child = childItem.value;
+          @if (child.kind == 'leaf') {
+            <nff-leaf-renderer
+              [leaf_]=child
+              [control]=asFormControl(formGroup.get(child.name))
+              [removable]=false
+              [editable]=editable
+              [initialValue]="formGroup.get(child.name)?.value"
+            />
+          }
+        }
+        @for (childItem of nodeGroupChildrenList; track $index) {
+          @let child = childItem.value;
+          @if (child.kind == 'leafList') {
+            <nff-leaf-list-renderer
+              [leaf_]="child"
+              [editable]=editable
+              [formArray]="asFormArray(formGroup.get(child.name))"
+              [initialValue]="formGroup.get(child.name)?.value"
+            />
+          }
+        }
+      </div>
+    </div>
+    <mat-accordion multi>
+      @for (childItem of nodeGroupChildrenList; track $index) {
+        @let child = childItem.value;
+        @if (child.kind == 'nodeGroupList') {
+          <mat-expansion-panel togglePosition="before">
+            <mat-expansion-panel-header>
+              <mat-panel-title>
+                {{ title ?? child.label ?? child.name }}
+              </mat-panel-title>
+            </mat-expansion-panel-header>
+            <nff-node-group-list-renderer
+              [nodeGroupList]="child"
+              [formArray]="asFormArray(formGroup.get(child.name))"
+              [initialValue]="formGroup.get(child.name)?.value"
+              [editable]="editable"
+            />
+          </mat-expansion-panel>
+        }
+      }
+      @for (childItem of nodeGroupChildrenList; track $index) {
+        @let child = childItem.value;
+        @if (child.kind == 'nodeGroup') {
+          <mat-expansion-panel togglePosition="before" expanded="true">
+            <mat-expansion-panel-header >
+              <mat-panel-title>
+                {{ title ?? child.label ?? child.name }}
+              </mat-panel-title>
+            </mat-expansion-panel-header>
+            <nff-dynamic-recursive-form
+              [schema]="child"
+              [formGroup]="asFormGroup(formGroup.get(child.name))"
+              [initialValue]="formGroup.get(child.name)?.value"
+              [title]="child.name ?? 'General Settings'"
+              [editable]="editable"
+            />
+          </mat-expansion-panel>
+        }
+      }
+    </mat-accordion>
+  </div>
+}

package/src/lib/dynamic-recursive-form/dynamic-recursive-form.component.scss

@@ -0,0 +1,128 @@
+@use '@angular/material' as mat;
+
+:host {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+  @include mat.expansion-overrides((
+  ));
+  width: 100%;
+  margin: 8px 0;
+}
+
+.fields {
+  display: flex;
+  flex-direction: row;
+  gap: 8px;
+  flex-wrap: wrap;
+  flex: 1 1 0;
+}
+
+.mat-expansion-panel-content {
+  display: flex;
+  flex-direction: row;
+  gap: 16px;
+}
+
+
+.mat-expansion-panel-content:hover {
+  display: flex;
+  flex-direction: row;
+  gap: 16px;
+}
+
+
+.form-content {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+  width: 100%;
+}
+
+.leafs-container {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+mat-panel-description {
+  display: flex;
+  flex-direction: row;
+}
+
+.node-groups-container {
+  display: flex;
+  flex-direction: column;
+  flex-basis: 100%;
+}
+
+.section-actions {
+  display: flex;
+  flex-direction: row;
+  gap: 8px;
+  justify-content: flex-end;
+  width: 100%;
+}
+
+mat-card {
+  padding: 0;
+  width: 100%;
+}
+
+.mat-card-no-broder {
+  border: 0;
+}
+
+mat-card-content {
+  box-sizing: border-box;
+  padding: 16px;
+}
+
+mat-card-header {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  padding: 16px 16px;
+  gap: 16px;
+}
+
+.edit-icon {
+  opacity: 0.2;
+  animation: icon-released 0.5s;
+}
+
+.edit-icon:hover {
+  opacity: 1;
+  animation: icon-transition 0.5s;
+}
+
+.flattened-form {
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+}
+
+.flattened-style-actions {
+  display: flex;
+  flex-direction: row;
+  gap: 8px;
+  justify-content: flex-end;
+  align-items: flex-start;
+}
+
+@keyframes icon-hovered {
+  0% {
+    opacity: 0.4;
+  }
+  100% {}
+}
+
+@keyframes icon-released {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0.4;
+  }
+}
+

package/src/lib/dynamic-recursive-form/dynamic-recursive-form.component.spec.ts

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