ng-form-foundry 0.0.1

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

@@ -0,0 +1,71 @@
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { LeafRendererComponent } from './leaf-renderer/leaf-renderer.component';
+import { NodeGroup, NodeType } from '../types/dynamic-recursive.types';
+import {
+  FormArray,
+  FormControl,
+  FormGroup,
+  ReactiveFormsModule,
+} from '@angular/forms';
+import { NodeGroupListRendererComponent } from './node-group-list-renderer/node-group-list-renderer.component';
+import { LeafListRendererComponent } from './leaf-list-renderer/leaf-list-renderer.component';
+import { MatExpansionModule } from '@angular/material/expansion';
+import { MatIconModule } from '@angular/material/icon';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCardModule } from '@angular/material/card';
+import { NgTemplateOutlet } from '@angular/common';
+import { asFormArray, asFormControl, asFormGroup } from '../core/utils';
+
+@Component({
+  imports: [
+    LeafRendererComponent,
+    NodeGroupListRendererComponent,
+    LeafListRendererComponent,
+    ReactiveFormsModule,
+    MatExpansionModule,
+    MatIconModule,
+    MatButtonModule,
+    NgTemplateOutlet,
+    MatCardModule,
+    MatExpansionModule,
+  ],
+  selector: 'nff-dynamic-recursive-form',
+  standalone: true,
+  styleUrl: './dynamic-recursive-form.component.scss',
+  templateUrl: './dynamic-recursive-form.component.html',
+})
+export class DynamicRecursiveFormComponent implements OnInit {
+  @Input({ required: true }) schema!: NodeGroup;
+  @Input() initialValue!: any;
+  @Input() formGroup = new FormGroup<any>({});
+  @Input() index: number | null = null;
+  @Input() removable: boolean = false;
+  @Output() remove = new EventEmitter();
+  @Input() title!: string;
+  @Input() editable = false;
+  root: boolean = false;
+
+  ngOnInit() {
+    this.root = this.schema.root ?? false;
+    if (this.initialValue) {
+      this.formGroup.patchValue(this.initialValue);
+      console.log(this.formGroup.value);
+    }
+  }
+
+  get nodeGroupChildrenList(): Array<{ key: string; value: NodeType }> {
+    const children = this.schema.children ?? {};
+    return Object.entries(children).map(([key, value]) => ({
+      key,
+      value: value as NodeType,
+    }));
+  }
+
+  emitRemoveEvent() {
+    this.remove.emit();
+  }
+
+  protected readonly asFormGroup = asFormGroup;
+  protected readonly asFormArray = asFormArray;
+  protected readonly asFormControl = asFormControl;
+}

package/src/lib/dynamic-recursive-form/dynamic-recursive-form.stories.ts

@@ -0,0 +1,36 @@
+import { Meta, StoryObj } from '@storybook/angular';
+import { DynamicRecursiveFormComponent } from './dynamic-recursive-form.component';
+import { buildFormFromSchema } from '../core/dynamic-recursive-forms-builder';
+import { DUConfigSchema, sampleValue } from '../types/examples/complex-oai'
+
+const meta: Meta<DynamicRecursiveFormComponent> = {
+  title: 'ng-form-foundry/DynamicRecursiveFormComponent',
+  component:DynamicRecursiveFormComponent,
+};
+export default meta;
+
+type Story = StoryObj<DynamicRecursiveFormComponent>;
+
+export const complex: Story = ({
+  name: "Complex Form",
+  args: {
+    schema: DUConfigSchema,
+    initialValue: sampleValue,
+  },
+  render: (args) => {
+    const formGroup = buildFormFromSchema(args.schema);
+    return {
+      props: {
+        ...args,
+        formGroup,
+      },
+      template: `
+        <nff-dynamic-recursive-form
+            [schema]="DUConfigSchema"
+            [formGroup]="formGroup"
+            [initialValue]="sampleValue"
+        ></nff-dynamic-recursive-form>
+      `,
+    }
+  }
+});

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

@@ -0,0 +1,8 @@
+<mat-form-field [appearance]="editable ? 'fill' : 'outline'">
+  <mat-label>{{ leafEnum.label ?? leafEnum.name }}</mat-label>
+  <mat-select [formControl]="control" value="{{ control.value }}">
+    @for (option of leafEnum.enum; track $index) {
+      <mat-option [value]="option">{{ leafEnum.enumLabel?.[$index] ?? option }}</mat-option>
+    }
+  </mat-select>
+</mat-form-field>

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

@@ -0,0 +1,9 @@
+:host {
+  flex: 1;
+  min-width: 0;
+  width: 100%;
+}
+
+mat-form-field {
+  width: 100%;
+}

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

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

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

@@ -0,0 +1,21 @@
+import { Component, Input } from '@angular/core';
+import { LeafEnum } from '../../types/dynamic-recursive.types';
+import { FormControl, ReactiveFormsModule } from '@angular/forms';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatSelectModule } from '@angular/material/select';
+
+@Component({
+  selector: 'nff-leaf-enum-renderer',
+  standalone: true,
+  imports: [ReactiveFormsModule, MatFormFieldModule, MatSelectModule],
+  templateUrl: './leaf-enum-renderer.component.html',
+  styleUrl: './leaf-enum-renderer.component.scss',
+})
+export class LeafEnumRendererComponent {
+  @Input() leafEnum!: LeafEnum;
+  @Input() initialValue!: string;
+  @Input() control = new FormControl();
+  @Input() removable: boolean = false;
+  @Input() remove: any;
+  @Input() editable: boolean = true;
+}

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

@@ -0,0 +1,31 @@
+@if (formArray && leaf_) {
+  <div class="fields">
+    @for (control of formArray.controls; track $index) {
+      <div class="field-item">
+        <nff-anon-leaf-renderer
+          [AnonLeaf]="leaf_" [control]="control"
+          [removable]="minItems == null || formArray.length > minItems"
+          [index]="$index"
+          [editable]="editable"
+          [label]="leaf_.label ?? leaf_.name"
+          (remove)="removeItem($index)"
+        />
+        <div class="actions">
+          @if (formArray.length > minItems && editable) {
+            <button class="remove-button small-icon-button" matIconButton (click)="removeItem($index)">
+              <mat-icon matPrefix>delete</mat-icon>
+            </button>
+          }
+          @if ($last) {
+            @if (editable) {
+              <button class="add-button small-icon-button" matIconButton (click)="addItem()">
+                <mat-icon matPrefix>add</mat-icon>
+              </button>
+            }
+          }
+          <div class="actions-spacer"></div>
+        </div>
+      </div>
+    }
+  </div>
+}

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

@@ -0,0 +1,57 @@
+@use '@angular/material' as mat;
+
+:host {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+}
+
+.fields-container {
+  position: relative;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  align-items: baseline;
+}
+
+.field-item {
+  display: flex;
+  flex-direction: row;
+  gap: 8px;
+  align-items: center;
+}
+
+.actions {
+  z-index: 100;
+  display: flex;
+  flex-direction: column;    /* stack buttons vertically */
+  align-items: flex-end;
+  gap: 4px;
+  height: 100%;
+}
+
+.actions-spacer {
+  height: 20px;
+}
+
+nff-anon-leaf-renderer {
+  width: 100%;
+}
+
+.add-button {
+  background-color: var(--mat-sys-primary-container);
+  @include mat.elevation(1);
+}
+
+.remove-button {
+  background-color: var(--mat-sys-error-container);
+  @include mat.elevation(1);
+}
+
+.title {
+  display: flex;
+  flex-direction: row;
+  gap: 8px;
+  align-items: center;
+}
+

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

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

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

@@ -0,0 +1,52 @@
+import { Component, EventEmitter, inject, Input, OnInit, Output } from '@angular/core';
+import { LeafList } from '../../types/dynamic-recursive.types';
+import { FormControl } from '@angular/forms';
+import { MatIconModule } from '@angular/material/icon';
+import { AnonLeafRendererComponent } from '../anon-leaf-renderer/anon-leaf-renderer.component';
+import { MatButtonModule } from '@angular/material/button';
+import { MatDialog } from '@angular/material/dialog';
+import { MatPrefix } from '@angular/material/input';
+
+@Component({
+  selector: 'nff-leaf-list-renderer',
+  standalone: true,
+  imports: [
+    MatIconModule,
+    AnonLeafRendererComponent,
+    MatButtonModule,
+    MatPrefix,
+  ],
+  templateUrl: './leaf-list-renderer.component.html',
+  styleUrl: './leaf-list-renderer.component.scss',
+})
+export class LeafListRendererComponent implements OnInit {
+  @Input() leaf_!: LeafList;
+  @Input() initialValue!: number[] | string[] | boolean[];
+  @Input() formArray!: any;
+  @Input() editable: boolean = true;
+  @Input() minItems: number = 1;
+  @Output() message = new EventEmitter();
+
+  matDialog = inject(MatDialog);
+
+  ngOnInit() {
+    if (this.initialValue) {
+      this.formArray.patchValue(this.initialValue);
+    }
+  }
+
+  removeItem($index: number) {
+    if (this.formArray.length <= this.minItems) {
+      this.message.emit({
+        message: 'You cannot remove the last item!',
+        type: 'error',
+      })
+      return;
+    }
+    this.formArray.removeAt($index);
+  }
+
+  addItem() {
+    this.formArray.push(new FormControl());
+  }
+}

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

@@ -0,0 +1,17 @@
+@if ('name' in leaf_) {
+  @if (leaf_.type === 'string') {
+    <mat-form-field [appearance]="editable ? 'fill' : 'outline'">
+      <mat-label>{{ leaf_.label ?? leaf_.name }}</mat-label>
+      <input [readonly]="!editable" matInput type="text" [formControl]="control">
+    </mat-form-field>
+  } @else if (leaf_.type === 'number') {
+    <mat-form-field [appearance]="editable ? 'fill' : 'outline'">
+      <mat-label>{{ leaf_.label ?? leaf_.name  }}</mat-label>
+      <input [readonly]="!editable"  matInput type="number" [formControl]="control">
+    </mat-form-field>
+  } @else if (leaf_.type === 'boolean') {
+    <mat-checkbox [formControl]="control">{{ leaf_.label ?? leaf_.name }}</mat-checkbox>
+  } @else if (leaf_.type === 'enum') {
+    <nff-leaf-enum-renderer [editable]="editable" [leafEnum]="leaf_" [control]="control"></nff-leaf-enum-renderer>
+  }
+}

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

@@ -0,0 +1,11 @@
+:host {
+  display: flex;
+  flex: 1 1 0;
+  min-width: 20%;
+}
+
+mat-form-field {
+  flex: 1;
+  min-width: 0;
+}
+

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

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

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

@@ -0,0 +1,41 @@
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { AnonLeaf, Leaf } from '../../types/dynamic-recursive.types';
+import { FormControl, ReactiveFormsModule } from '@angular/forms';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatSelectModule } from '@angular/material/select';
+import { MatIconModule } from '@angular/material/icon';
+import { MatButtonModule } from '@angular/material/button';
+import { LeafEnumRendererComponent } from '../leaf-enum-renderer/leaf-enum-renderer.component';
+
+@Component({
+  selector: 'nff-leaf-renderer',
+  standalone: true,
+  imports: [
+    MatFormFieldModule,
+    ReactiveFormsModule,
+    MatInputModule,
+    MatCheckboxModule,
+    MatSelectModule,
+    MatIconModule,
+    MatButtonModule,
+    LeafEnumRendererComponent,
+  ],
+  templateUrl: './leaf-renderer.component.html',
+  styleUrl: './leaf-renderer.component.scss',
+})
+export class LeafRendererComponent implements OnInit {
+  @Input() leaf_!: Leaf | AnonLeaf;
+  @Input() control: FormControl = new FormControl();
+  @Input() initialValue?: any;
+  @Input() removable: boolean = false;
+  @Input() editable = true;
+  @Output() remove: EventEmitter<number> = new EventEmitter();
+
+  ngOnInit(): void {
+    if (this.initialValue) {
+      this.control.patchValue(this.initialValue);
+    }
+  }
+}

package/src/lib/dynamic-recursive-form/node-group-list-renderer/node-group-list-renderer.component.html

@@ -0,0 +1,24 @@
+@if (formArray && nodeGroupList) {
+  <div class="fields-container">
+      @for (group of formArray.controls; track $index) {
+        <div class="field-item">
+        <nff-dynamic-recursive-form
+          [schema]="nodeGroupList.type"
+          [formGroup]="asFormGroup(group)"
+          [title]="getTitle($index)"
+          [index]="$index"
+          [removable]="formArray.length > minItems"
+          (remove)="removeItem($index)"
+          [editable]="editable"
+        />
+          <div class="actions">
+            <button matIconButton class="small-icon-button"
+                    matTooltip=" + Add new {{ nodeGroupList.type.label ?? nodeGroupList.type.name  }}"
+                    (click)="addItem()">
+              <mat-icon>add</mat-icon>
+            </button>
+          </div>
+        </div>
+      }
+  </div>
+}

package/src/lib/dynamic-recursive-form/node-group-list-renderer/node-group-list-renderer.component.scss

@@ -0,0 +1,48 @@
+:host {
+  position: relative;
+  width: 100%;
+  flex: 1 1 0;
+}
+
+.fields {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+  width: 100%;
+}
+
+.fields-container {
+  display: flex;
+  flex-direction: column;
+}
+
+.field-item {
+  display: flex;
+  flex-direction: row;
+  gap: 8px;
+}
+
+.actions {
+  display: flex;
+  flex-direction: row;
+  gap: 8px;
+  align-items: center;
+  margin-top: 0;
+  padding: 0;
+  min-width: 24px;
+}
+
+.title {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  align-items: center;
+}
+
+nff-dynamic-recursive-form {
+  flex: 1;
+}
+
+.add-button {
+  background-color: var(--mat-sys-primary-container);
+}

package/src/lib/dynamic-recursive-form/node-group-list-renderer/node-group-list-renderer.component.spec.ts

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

package/src/lib/dynamic-recursive-form/node-group-list-renderer/node-group-list-renderer.component.ts

@@ -0,0 +1,101 @@
+import {
+  AfterViewInit,
+  ChangeDetectorRef,
+  Component,
+  EventEmitter,
+  forwardRef,
+  inject,
+  Input,
+  OnInit,
+  Output,
+  QueryList,
+  ViewChildren
+} from '@angular/core';
+import { NodeGroupList } from '../../types/dynamic-recursive.types';
+import { FormArray, FormGroup } from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { DynamicRecursiveFormComponent } from '../dynamic-recursive-form.component';
+import { buildFormFromSchema } from '../../core/dynamic-recursive-forms-builder';
+import { MatTooltipModule } from '@angular/material/tooltip';
+
+@Component({
+  selector: 'nff-node-group-list-renderer',
+  standalone: true,
+  imports: [
+    forwardRef(() => DynamicRecursiveFormComponent),
+    MatButtonModule,
+    MatIconModule,
+    MatTooltipModule,
+  ],
+  templateUrl: './node-group-list-renderer.component.html',
+  styleUrl: './node-group-list-renderer.component.scss',
+})
+export class NodeGroupListRendererComponent implements OnInit, AfterViewInit {
+  @Input() nodeGroupList!: NodeGroupList;
+  @Input() initialValue!: number[] | string[] | boolean[];
+  @Input() formArray = new FormArray<any>([]);
+  @Input() editable: boolean = true;
+  @Input() minItems: number = 1;
+  @Input() maxItems: number = 1;
+  @Output() message = new EventEmitter();
+  @ViewChildren(DynamicRecursiveFormComponent) items!: QueryList<DynamicRecursiveFormComponent>;
+
+  cdr = inject(ChangeDetectorRef);
+
+  ngOnInit() {
+    if (this.initialValue) {
+      this.formArray.patchValue(this.initialValue);
+    }
+    if (this.nodeGroupList.maxItems) {
+      this.maxItems = this.nodeGroupList.maxItems;
+    }
+    if (this.nodeGroupList.minItems) {
+      this.minItems = this.nodeGroupList.minItems;
+    }
+  }
+
+  ngAfterViewInit() {
+    this.items.changes.subscribe(() => {
+      this.setLastEditable();
+    });
+  }
+
+  removeItem($index: number) {
+    if (this.formArray.length <= this.minItems) {
+      this.message.emit({
+        message: `You cannot remove the last ${this.nodeGroupList.type.name} configuration!`,
+        type: 'error',
+      })
+      return;
+    }
+    this.formArray.removeAt($index);
+  }
+
+  addItem() {
+    this.formArray.push(buildFormFromSchema(this.nodeGroupList.type, null));
+  }
+
+  setLastEditable() {
+    const lastItem = this.items.last;
+    if (lastItem) {
+      lastItem.editable = this.editable;
+    }
+    this.cdr.detectChanges();
+  }
+
+  asFormGroup(group: any) {
+    return group as FormGroup;
+  }
+
+  getTitle($index: number) {
+    let title = `${this.nodeGroupList.type.label ?? this.nodeGroupList.type.name}`;
+    if (this.formArray.length > 1) {
+      return `${title} #${$index + 1}`;
+    }
+    else {
+      return title;
+    }
+
+  }
+}