From 5b201856d199bbee65974be3d82026b790a7a93a Mon Sep 17 00:00:00 2001
From: Johannes Kirschbauer <hsjobeki@gmail.com>
Date: Tue, 12 Nov 2024 18:35:55 +0100
Subject: [PATCH] UI/modules: dynamic rendering of public module interfaces

---
 pkgs/webview-ui/app/src/Form/base/index.tsx   | 128 +++
 pkgs/webview-ui/app/src/Form/base/label.tsx   |  15 +
 .../app/src/Form/fields/FormSection.tsx       |   8 +
 .../webview-ui/app/src/Form/fields/Select.tsx | 226 +++++
 .../app/src/Form/fields/TextInput.tsx         |  68 ++
 pkgs/webview-ui/app/src/Form/fields/index.ts  |   2 +
 pkgs/webview-ui/app/src/Form/form/index.tsx   | 896 ++++++++++++++++++
 .../app/src/routes/modules/details.tsx        | 164 +---
 8 files changed, 1351 insertions(+), 156 deletions(-)
 create mode 100644 pkgs/webview-ui/app/src/Form/base/index.tsx
 create mode 100644 pkgs/webview-ui/app/src/Form/base/label.tsx
 create mode 100644 pkgs/webview-ui/app/src/Form/fields/FormSection.tsx
 create mode 100644 pkgs/webview-ui/app/src/Form/fields/Select.tsx
 create mode 100644 pkgs/webview-ui/app/src/Form/fields/TextInput.tsx
 create mode 100644 pkgs/webview-ui/app/src/Form/fields/index.ts
 create mode 100644 pkgs/webview-ui/app/src/Form/form/index.tsx

diff --git a/pkgs/webview-ui/app/src/Form/base/index.tsx b/pkgs/webview-ui/app/src/Form/base/index.tsx
new file mode 100644
index 000000000..71ff78bbb
--- /dev/null
+++ b/pkgs/webview-ui/app/src/Form/base/index.tsx
@@ -0,0 +1,128 @@
+import { createEffect, createMemo, createSignal, onCleanup } from "solid-js";
+import type {
+  ComputePositionConfig,
+  ComputePositionReturn,
+  ReferenceElement,
+} from "@floating-ui/dom";
+import { computePosition } from "@floating-ui/dom";
+
+export interface UseFloatingOptions<
+  R extends ReferenceElement,
+  F extends HTMLElement,
+> extends Partial<ComputePositionConfig> {
+  whileElementsMounted?: (
+    reference: R,
+    floating: F,
+    update: () => void,
+  ) => // eslint-disable-next-line @typescript-eslint/no-invalid-void-type
+  void | (() => void);
+}
+
+interface UseFloatingState extends Omit<ComputePositionReturn, "x" | "y"> {
+  x?: number | null;
+  y?: number | null;
+}
+
+export interface UseFloatingResult extends UseFloatingState {
+  update(): void;
+}
+
+export function useFloating<R extends ReferenceElement, F extends HTMLElement>(
+  reference: () => R | undefined | null,
+  floating: () => F | undefined | null,
+  options?: UseFloatingOptions<R, F>,
+): UseFloatingResult {
+  const placement = () => options?.placement ?? "bottom";
+  const strategy = () => options?.strategy ?? "absolute";
+
+  const [data, setData] = createSignal<UseFloatingState>({
+    x: null,
+    y: null,
+    placement: placement(),
+    strategy: strategy(),
+    middlewareData: {},
+  });
+
+  const [error, setError] = createSignal<{ value: unknown } | undefined>();
+
+  createEffect(() => {
+    const currentError = error();
+    if (currentError) {
+      throw currentError.value;
+    }
+  });
+
+  const version = createMemo(() => {
+    reference();
+    floating();
+    return {};
+  });
+
+  function update() {
+    const currentReference = reference();
+    const currentFloating = floating();
+
+    if (currentReference && currentFloating) {
+      const capturedVersion = version();
+      computePosition(currentReference, currentFloating, {
+        middleware: options?.middleware,
+        placement: placement(),
+        strategy: strategy(),
+      }).then(
+        (currentData) => {
+          // Check if it's still valid
+          if (capturedVersion === version()) {
+            setData(currentData);
+          }
+        },
+        (err) => {
+          setError(err);
+        },
+      );
+    }
+  }
+
+  createEffect(() => {
+    const currentReference = reference();
+    const currentFloating = floating();
+
+    options?.middleware;
+    placement();
+    strategy();
+
+    if (currentReference && currentFloating) {
+      if (options?.whileElementsMounted) {
+        const cleanup = options.whileElementsMounted(
+          currentReference,
+          currentFloating,
+          update,
+        );
+
+        if (cleanup) {
+          onCleanup(cleanup);
+        }
+      } else {
+        update();
+      }
+    }
+  });
+
+  return {
+    get x() {
+      return data().x;
+    },
+    get y() {
+      return data().y;
+    },
+    get placement() {
+      return data().placement;
+    },
+    get strategy() {
+      return data().strategy;
+    },
+    get middlewareData() {
+      return data().middlewareData;
+    },
+    update,
+  };
+}
diff --git a/pkgs/webview-ui/app/src/Form/base/label.tsx b/pkgs/webview-ui/app/src/Form/base/label.tsx
new file mode 100644
index 000000000..28cfb9b79
--- /dev/null
+++ b/pkgs/webview-ui/app/src/Form/base/label.tsx
@@ -0,0 +1,15 @@
+import type { JSX } from "solid-js";
+interface LabelProps {
+  label: JSX.Element;
+  required?: boolean;
+}
+export const Label = (props: LabelProps) => (
+  <span
+    class="label-text block"
+    classList={{
+      "after:ml-0.5 after:text-primary after:content-['*']": props.required,
+    }}
+  >
+    {props.label}
+  </span>
+);
diff --git a/pkgs/webview-ui/app/src/Form/fields/FormSection.tsx b/pkgs/webview-ui/app/src/Form/fields/FormSection.tsx
new file mode 100644
index 000000000..d3633f0b2
--- /dev/null
+++ b/pkgs/webview-ui/app/src/Form/fields/FormSection.tsx
@@ -0,0 +1,8 @@
+import { JSX } from "solid-js";
+
+interface FormSectionProps {
+  children: JSX.Element;
+}
+export const FormSection = (props: FormSectionProps) => {
+  return <div class="p-2">{props.children}</div>;
+};
diff --git a/pkgs/webview-ui/app/src/Form/fields/Select.tsx b/pkgs/webview-ui/app/src/Form/fields/Select.tsx
new file mode 100644
index 000000000..b059a81c9
--- /dev/null
+++ b/pkgs/webview-ui/app/src/Form/fields/Select.tsx
@@ -0,0 +1,226 @@
+import {
+  createUniqueId,
+  createSignal,
+  Show,
+  type JSX,
+  For,
+  createMemo,
+} from "solid-js";
+import { Portal } from "solid-js/web";
+import cx from "classnames";
+import { Label } from "../base/label";
+import { useFloating } from "../base";
+import { autoUpdate, flip, hide, shift, size } from "@floating-ui/dom";
+
+export type Option = { value: string; label: string };
+interface SelectInputpProps {
+  value: string[] | string;
+  selectProps: JSX.InputHTMLAttributes<HTMLSelectElement>;
+  options: Option[];
+  label: JSX.Element;
+  altLabel?: JSX.Element;
+  helperText?: JSX.Element;
+  error?: string;
+  required?: boolean;
+  type?: string;
+  inlineLabel?: JSX.Element;
+  class?: string;
+  adornment?: {
+    position: "start" | "end";
+    content: JSX.Element;
+  };
+  disabled?: boolean;
+  placeholder?: string;
+  multiple?: boolean;
+}
+
+export function SelectInput(props: SelectInputpProps) {
+  const _id = createUniqueId();
+
+  const [reference, setReference] = createSignal<HTMLElement>();
+  const [floating, setFloating] = createSignal<HTMLElement>();
+
+  // `position` is a reactive object.
+  const position = useFloating(reference, floating, {
+    placement: "bottom-start",
+
+    // pass options. Ensure the cleanup function is returned.
+    whileElementsMounted: (reference, floating, update) =>
+      autoUpdate(reference, floating, update, {
+        animationFrame: true,
+      }),
+    middleware: [
+      size({
+        apply({ rects, elements }) {
+          Object.assign(elements.floating.style, {
+            minWidth: `${rects.reference.width}px`,
+          });
+        },
+      }),
+      shift(),
+      flip(),
+      hide({
+        strategy: "referenceHidden",
+      }),
+    ],
+  });
+
+  // Create values list
+  const getValues = createMemo(() => {
+    return Array.isArray(props.value)
+      ? (props.value as string[])
+      : typeof props.value === "string"
+        ? [props.value]
+        : [];
+  });
+
+  // const getSingleValue = createMemo(() => {
+  //   const values = getValues();
+  //   return values.length > 0 ? values[0] : "";
+  // });
+
+  const handleClickOption = (opt: Option) => {
+    if (!props.multiple) {
+      // @ts-ignore
+      props.selectProps.onInput({
+        currentTarget: {
+          value: opt.value,
+        },
+      });
+      return;
+    }
+    let currValues = getValues();
+
+    if (currValues.includes(opt.value)) {
+      currValues = currValues.filter((o) => o !== opt.value);
+    } else {
+      currValues.push(opt.value);
+    }
+    // @ts-ignore
+    props.selectProps.onInput({
+      currentTarget: {
+        options: currValues.map((value) => ({
+          value,
+          selected: true,
+          disabled: false,
+        })),
+      },
+    });
+  };
+
+  return (
+    <>
+      <label
+        class={cx("form-control w-full", props.class)}
+        aria-disabled={props.disabled}
+      >
+        <div class="label">
+          <Label label={props.label} required={props.required} />
+          <span class="label-text-alt block">{props.altLabel}</span>
+        </div>
+        <button
+          type="button"
+          class="select select-bordered flex items-center gap-2"
+          ref={setReference}
+          popovertarget={_id}
+        >
+          <Show when={props.adornment && props.adornment.position === "start"}>
+            {props.adornment?.content}
+          </Show>
+          {props.inlineLabel}
+          <div class="flex flex-row gap-2 cursor-default">
+            <For each={getValues()} fallback={"Select"}>
+              {(item) => (
+                <div class="text-sm rounded-xl bg-slate-800 text-white px-4 py-1">
+                  {item}
+                  <Show when={props.multiple}>
+                    <button
+                      class="btn-xs btn-ghost"
+                      type="button"
+                      onClick={(_e) => {
+                        // @ts-ignore
+                        props.selectProps.onInput({
+                          currentTarget: {
+                            options: getValues()
+                              .filter((o) => o !== item)
+                              .map((value) => ({
+                                value,
+                                selected: true,
+                                disabled: false,
+                              })),
+                          },
+                        });
+                      }}
+                    >
+                      X
+                    </button>
+                  </Show>
+                </div>
+              )}
+            </For>
+          </div>
+          <select
+            class="hidden"
+            multiple
+            {...props.selectProps}
+            required={props.required}
+          >
+            <For each={props.options}>
+              {({ label, value }) => (
+                <option value={value} selected={getValues().includes(value)}>
+                  {label}
+                </option>
+              )}
+            </For>
+          </select>
+          <Show when={props.adornment && props.adornment.position === "end"}>
+            {props.adornment?.content}
+          </Show>
+        </button>
+        <Portal mount={document.body}>
+          <div
+            id={_id}
+            popover
+            ref={setFloating}
+            style={{
+              margin: 0,
+              position: position.strategy,
+              top: `${position.y ?? 0}px`,
+              left: `${position.x ?? 0}px`,
+            }}
+            class="dropdown-content bg-base-100 rounded-b-box z-[1] shadow"
+          >
+            <ul class="menu flex flex-col gap-1 max-h-96 overflow-y-scroll overflow-x-hidden">
+              <For each={props.options}>
+                {(opt) => (
+                  <>
+                    <li>
+                      <button
+                        onClick={() => handleClickOption(opt)}
+                        classList={{
+                          active: getValues().includes(opt.value),
+                        }}
+                      >
+                        {opt.label}
+                      </button>
+                    </li>
+                  </>
+                )}
+              </For>
+            </ul>
+          </div>
+        </Portal>
+        <div class="label">
+          {props.helperText && (
+            <span class="label-text text-neutral">{props.helperText}</span>
+          )}
+          {props.error && (
+            <span class="label-text-alt font-bold text-error">
+              {props.error}
+            </span>
+          )}
+        </div>
+      </label>
+    </>
+  );
+}
diff --git a/pkgs/webview-ui/app/src/Form/fields/TextInput.tsx b/pkgs/webview-ui/app/src/Form/fields/TextInput.tsx
new file mode 100644
index 000000000..e9d15d454
--- /dev/null
+++ b/pkgs/webview-ui/app/src/Form/fields/TextInput.tsx
@@ -0,0 +1,68 @@
+import { createEffect, Show, type JSX } from "solid-js";
+import cx from "classnames";
+import { Label } from "../base/label";
+
+interface TextInputProps {
+  value: string;
+  inputProps?: JSX.InputHTMLAttributes<HTMLInputElement>;
+  label: JSX.Element;
+  altLabel?: JSX.Element;
+  helperText?: JSX.Element;
+  error?: string;
+  required?: boolean;
+  type?: string;
+  inlineLabel?: JSX.Element;
+  class?: string;
+  adornment?: {
+    position: "start" | "end";
+    content: JSX.Element;
+  };
+  disabled?: boolean;
+  placeholder?: string;
+}
+
+export function TextInput(props: TextInputProps) {
+  const value = () => props.value;
+
+  return (
+    <label
+      class={cx("form-control w-full", props.class)}
+      aria-disabled={props.disabled}
+    >
+      <div class="label">
+        <Label label={props.label} required={props.required} />
+        <span class="label-text-alt block">{props.altLabel}</span>
+      </div>
+
+      <div class="input input-bordered flex items-center gap-2">
+        <Show when={props.adornment && props.adornment.position === "start"}>
+          {props.adornment?.content}
+        </Show>
+        {props.inlineLabel}
+        <input
+          {...props.inputProps}
+          value={value()}
+          type={props.type ? props.type : "text"}
+          class="grow"
+          classList={{
+            "input-disabled": props.disabled,
+          }}
+          placeholder={`${props.placeholder || props.label}`}
+          required
+          disabled={props.disabled}
+        />
+        <Show when={props.adornment && props.adornment.position === "end"}>
+          {props.adornment?.content}
+        </Show>
+      </div>
+      <div class="label">
+        {props.helperText && (
+          <span class="label-text text-neutral">{props.helperText}</span>
+        )}
+        {props.error && (
+          <span class="label-text-alt font-bold text-error">{props.error}</span>
+        )}
+      </div>
+    </label>
+  );
+}
diff --git a/pkgs/webview-ui/app/src/Form/fields/index.ts b/pkgs/webview-ui/app/src/Form/fields/index.ts
new file mode 100644
index 000000000..46efa5eec
--- /dev/null
+++ b/pkgs/webview-ui/app/src/Form/fields/index.ts
@@ -0,0 +1,2 @@
+export * from "./FormSection";
+export * from "./TextInput";
diff --git a/pkgs/webview-ui/app/src/Form/form/index.tsx b/pkgs/webview-ui/app/src/Form/form/index.tsx
new file mode 100644
index 000000000..56a8eb3ef
--- /dev/null
+++ b/pkgs/webview-ui/app/src/Form/form/index.tsx
@@ -0,0 +1,896 @@
+import {
+  createForm,
+  Field,
+  FieldArray,
+  FieldElement,
+  FieldValues,
+  FormStore,
+  getValue,
+  minLength,
+  pattern,
+  ResponseData,
+  setValue,
+  getValues,
+  insert,
+  SubmitHandler,
+  swap,
+  reset,
+  remove,
+  move,
+  setError,
+  setValues,
+} from "@modular-forms/solid";
+import { JSONSchema7, JSONSchema7Type, validate } from "json-schema";
+import { TextInput } from "../fields/TextInput";
+import {
+  children,
+  Component,
+  createEffect,
+  For,
+  JSX,
+  Match,
+  Show,
+  Switch,
+} from "solid-js";
+import cx from "classnames";
+import { Label } from "../base/label";
+import { SelectInput } from "../fields/Select";
+
+function generateDefaults(schema: JSONSchema7): any {
+  switch (schema.type) {
+    case "string":
+      return ""; // Default value for string
+
+    case "number":
+    case "integer":
+      return 0; // Default value for number/integer
+
+    case "boolean":
+      return false; // Default value for boolean
+
+    case "array":
+      return []; // Default empty array if no items schema or items is true/false
+
+    case "object":
+      const obj: { [key: string]: any } = {};
+      if (schema.properties) {
+        Object.entries(schema.properties).forEach(([key, propSchema]) => {
+          if (typeof propSchema === "boolean") {
+          } else {
+            // if (schema.required  schema.required.includes(key))
+            obj[key] = generateDefaults(propSchema);
+          }
+        });
+      }
+      return obj;
+
+    default:
+      return null; // Default for unknown types or nulls
+  }
+}
+
+interface FormProps {
+  schema: JSONSchema7;
+  initialValues?: NonNullable<unknown>;
+  handleSubmit?: SubmitHandler<NonNullable<unknown>>;
+  initialPath?: string[];
+  components?: {
+    before?: JSX.Element;
+    after?: JSX.Element;
+  };
+  readonly?: boolean;
+  formProps?: JSX.InputHTMLAttributes<HTMLFormElement>;
+  errorContext?: string;
+  resetOnSubmit?: boolean;
+}
+export const DynForm = (props: FormProps) => {
+  const [formStore, { Field, Form: ModuleForm }] = createForm({
+    initialValues: props.initialValues,
+  });
+
+  const handleSubmit: SubmitHandler<NonNullable<unknown>> = async (
+    values,
+    event,
+  ) => {
+    console.log("Submitting form values", values, props.errorContext);
+    props.handleSubmit?.(values, event);
+    // setValue(formStore, "root", null);
+    if (props.resetOnSubmit) {
+      console.log("Resetting form", values, props.initialValues);
+      reset(formStore);
+    }
+  };
+
+  createEffect(() => {
+    console.log("FormStore", formStore);
+  });
+
+  return (
+    <>
+      <ModuleForm {...props.formProps} onSubmit={handleSubmit}>
+        {props.components?.before}
+        <SchemaFields
+          schema={props.schema}
+          Field={Field}
+          formStore={formStore}
+          path={props.initialPath || []}
+          readonly={!!props.readonly}
+          parent={props.schema}
+        />
+        {props.components?.after}
+      </ModuleForm>
+    </>
+  );
+};
+
+interface UnsupportedProps {
+  schema: JSONSchema7;
+  error?: string;
+}
+
+const Unsupported = (props: UnsupportedProps) => (
+  <div>
+    {props.error && <div class="font-bold text-error">{props.error}</div>}
+    <span>
+      Invalid or unsupported schema entry of type:{" "}
+      <b>{JSON.stringify(props.schema.type)}</b>
+    </span>
+    <pre>
+      <code>{JSON.stringify(props.schema, null, 2)}</code>
+    </pre>
+  </div>
+);
+
+interface SchemaFieldsProps<T extends FieldValues, R extends ResponseData> {
+  formStore: FormStore<T, R>;
+  Field: typeof Field<T, R, never>;
+  schema: JSONSchema7;
+  path: string[];
+  readonly: boolean;
+  parent: JSONSchema7;
+}
+export function SchemaFields<T extends FieldValues, R extends ResponseData>(
+  props: SchemaFieldsProps<T, R>,
+) {
+  return (
+    <Switch fallback={<Unsupported schema={props.schema} />}>
+      {/* Simple types */}
+      <Match when={props.schema.type === "boolean"}>bool</Match>
+
+      <Match when={props.schema.type === "integer"}>
+        <StringField {...props} schema={props.schema} />
+      </Match>
+      <Match when={props.schema.type === "number"}>
+        <StringField {...props} schema={props.schema} />
+      </Match>
+      <Match when={props.schema.type === "string"}>
+        <StringField {...props} schema={props.schema} />
+      </Match>
+      {/* Composed types */}
+      <Match when={props.schema.type === "array"}>
+        <ArrayFields {...props} schema={props.schema} />
+      </Match>
+      <Match when={props.schema.type === "object"}>
+        <ObjectFields {...props} schema={props.schema} />
+      </Match>
+      {/* Empty / Null */}
+      <Match when={props.schema.type === "null"}>
+        Dont know how to rendner InputType null
+        <Unsupported schema={props.schema} />
+      </Match>
+    </Switch>
+  );
+}
+
+export function StringField<T extends FieldValues, R extends ResponseData>(
+  props: SchemaFieldsProps<T, R>,
+) {
+  if (
+    props.schema.type !== "string" &&
+    props.schema.type !== "number" &&
+    props.schema.type !== "integer"
+  ) {
+    return (
+      <span class="text-error">
+        Error cannot render the following as String input.
+        <Unsupported schema={props.schema} />
+      </span>
+    );
+  }
+  const { Field } = props;
+
+  const validate = props.schema.pattern
+    ? pattern(
+        new RegExp(props.schema.pattern),
+        `String should follow pattern ${props.schema.pattern}`,
+      )
+    : undefined;
+
+  const commonProps = {
+    label: props.schema.title || props.path.join("."),
+    required:
+      props.parent.required &&
+      props.parent.required.some(
+        (r) => r === props.path[props.path.length - 1],
+      ),
+  };
+  const readonly = props.readonly;
+  return (
+    <Switch fallback={<Unsupported schema={props.schema} />}>
+      <Match
+        when={props.schema.type === "number" || props.schema.type === "integer"}
+      >
+        {(s) => (
+          <Field
+            // @ts-expect-error: We dont know dynamic names while type checking
+            name={props.path.join(".")}
+            validate={validate}
+          >
+            {(field, fieldProps) => (
+              <>
+                <TextInput
+                  inputProps={{
+                    ...fieldProps,
+                    inputmode: "numeric",
+                    pattern: "[0-9.]*",
+                    readonly,
+                  }}
+                  {...commonProps}
+                  value={(field.value as unknown as string) || ""}
+                  error={field.error}
+                  // required
+                  // altLabel="Leave empty to accept the default"
+                  // helperText="Configure how dude connects"
+                  // error="Something is wrong now"
+                />
+              </>
+            )}
+          </Field>
+        )}
+      </Match>
+      <Match when={props.schema.enum}>
+        {(_enumSchemas) => (
+          <Field
+            // @ts-expect-error: We dont know dynamic names while type checking
+            name={props.path.join(".")}
+          >
+            {(field, fieldProps) => (
+              <OnlyStringItems itemspec={props.schema}>
+                {(options) => (
+                  <SelectInput
+                    error={field.error}
+                    altLabel={props.schema.title}
+                    label={props.path.join(".")}
+                    helperText={props.schema.description}
+                    value={field.value || []}
+                    options={options.map((o) => ({
+                      value: o,
+                      label: o,
+                    }))}
+                    selectProps={fieldProps}
+                    required={!!props.schema.minItems}
+                  />
+                )}
+              </OnlyStringItems>
+            )}
+          </Field>
+        )}
+      </Match>
+      <Match when={props.schema.writeOnly && props.schema}>
+        {(s) => (
+          <Field
+            // @ts-expect-error: We dont know dynamic names while type checking
+            name={props.path.join(".")}
+            validate={validate}
+          >
+            {(field, fieldProps) => (
+              <TextInput
+                inputProps={{ ...fieldProps, readonly }}
+                value={field.value as unknown as string}
+                type="password"
+                error={field.error}
+                {...commonProps}
+                // required
+                // altLabel="Leave empty to accept the default"
+                // helperText="Configure how dude connects"
+                // error="Something is wrong now"
+              />
+            )}
+          </Field>
+        )}
+      </Match>
+      {/* TODO: when is it a normal string input? */}
+      <Match when={props.schema}>
+        {(s) => (
+          <Field
+            // @ts-expect-error: We dont know dynamic names while type checking
+            name={props.path.join(".")}
+            validate={validate}
+          >
+            {(field, fieldProps) => (
+              <TextInput
+                inputProps={{ ...fieldProps, readonly }}
+                value={field.value as unknown as string}
+                error={field.error}
+                {...commonProps}
+                // placeholder="foobar"
+                // inlineLabel={
+                //   <div class="label">
+                //     <span class="label-text"></span>
+                //   </div>
+                // }
+                // required
+                // altLabel="Leave empty to accept the default"
+                // helperText="Configure how dude connects"
+                // error="Something is wrong now"
+              />
+            )}
+          </Field>
+        )}
+      </Match>
+    </Switch>
+  );
+}
+
+interface OptionSchemaProps {
+  itemSpec: JSONSchema7Type;
+}
+export function OptionSchema(props: OptionSchemaProps) {
+  return (
+    <Switch fallback={<option class="text-error">Item spec unhandled</option>}>
+      <Match when={typeof props.itemSpec === "string" && props.itemSpec}>
+        {(o) => <option>{o()}</option>}
+      </Match>
+    </Switch>
+  );
+}
+
+interface ValueDisplayProps<T extends FieldValues, R extends ResponseData>
+  extends SchemaFieldsProps<T, R> {
+  children: JSX.Element;
+  listFieldName: string;
+  idx: number;
+  of: number;
+}
+export function ListValueDisplay<T extends FieldValues, R extends ResponseData>(
+  props: ValueDisplayProps<T, R>,
+) {
+  const removeItem = (e: Event) => {
+    e.preventDefault();
+    remove(
+      props.formStore,
+      // @ts-ignore
+      props.listFieldName,
+      { at: props.idx },
+    );
+  };
+  const moveItemBy = (dir: number) => (e: Event) => {
+    e.preventDefault();
+    move(
+      props.formStore,
+      // @ts-ignore
+      props.listFieldName,
+      { from: props.idx, to: props.idx + dir },
+    );
+  };
+  const topMost = () => props.idx === props.of - 1;
+  const bottomMost = () => props.idx === 0;
+
+  return (
+    <div class="border-l-4 border-gray-300 w-full">
+      <div class="flex w-full gap-2 items-end px-4">
+        {props.children}
+        <div class="pb-4 ml-4 min-w-fit">
+          <button class="btn" onClick={moveItemBy(1)} disabled={topMost()}>
+            ↓
+          </button>
+          <button class="btn" onClick={moveItemBy(-1)} disabled={bottomMost()}>
+            ↑
+          </button>
+          <button class="btn btn-error" onClick={removeItem}>
+            x
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+const findDuplicates = (arr: any[]) => {
+  const seen = new Set();
+  const duplicates: number[] = [];
+
+  arr.forEach((obj, idx) => {
+    const serializedObj = JSON.stringify(obj);
+
+    if (seen.has(serializedObj)) {
+      duplicates.push(idx);
+    } else {
+      seen.add(serializedObj);
+    }
+  });
+
+  return duplicates;
+};
+
+interface OnlyStringItems {
+  children: (items: string[]) => JSX.Element;
+  itemspec: JSONSchema7;
+}
+const OnlyStringItems = (props: OnlyStringItems) => {
+  return (
+    <Show
+      when={
+        Array.isArray(props.itemspec.enum) &&
+        typeof props.itemspec.type === "string" &&
+        props.itemspec
+      }
+      fallback={
+        <Unsupported
+          schema={props.itemspec}
+          error="Unsupported array item type"
+        />
+      }
+    >
+      {props.children(props.itemspec.enum as string[])}
+    </Show>
+  );
+};
+
+export function ArrayFields<T extends FieldValues, R extends ResponseData>(
+  props: SchemaFieldsProps<T, R>,
+) {
+  if (props.schema.type !== "array") {
+    return (
+      <span class="text-error">
+        Error cannot render the following as array.
+        <Unsupported schema={props.schema} />
+      </span>
+    );
+  }
+  const { Field } = props;
+
+  const listFieldName = props.path.join(".");
+
+  return (
+    <>
+      <Switch fallback={<Unsupported schema={props.schema} />}>
+        <Match
+          when={
+            !Array.isArray(props.schema.items) &&
+            typeof props.schema.items === "object" &&
+            props.schema.items
+          }
+        >
+          {(itemsSchema) => (
+            <>
+              <Switch fallback={<Unsupported schema={props.schema} />}>
+                <Match when={itemsSchema().type === "array"}>
+                  <Unsupported
+                    schema={props.schema}
+                    error="Array of Array is not supported yet."
+                  />
+                </Match>
+                <Match
+                  when={itemsSchema().type === "string" && itemsSchema().enum}
+                >
+                  <Field
+                    // @ts-ignore
+                    name={listFieldName}
+                    // @ts-ignore
+                    type="string[]"
+                    validateOn="touched"
+                    revalidateOn="touched"
+                    validate={() => {
+                      let error = "";
+                      // @ts-ignore
+                      const values: any[] = getValues(
+                        props.formStore,
+                        // @ts-ignore
+                        listFieldName,
+                        // @ts-ignore
+                      )?.strings?.selection;
+                      console.log("vali", { values });
+                      if (props.schema.uniqueItems) {
+                        const duplicates = findDuplicates(values);
+                        if (duplicates.length) {
+                          error = `Duplicate entries are not allowed. Please make sure each entry is unique.`;
+                        }
+                      }
+                      if (
+                        props.schema.maxItems &&
+                        values.length > props.schema.maxItems
+                      ) {
+                        error = `You can only select up to ${props.schema.maxItems} items`;
+                      }
+                      if (
+                        props.schema.minItems &&
+                        values.length < props.schema.minItems
+                      ) {
+                        error = `Please select at least ${props.schema.minItems} items.`;
+                      }
+                      return error;
+                    }}
+                  >
+                    {(field, fieldProps) => (
+                      <OnlyStringItems itemspec={itemsSchema()}>
+                        {(options) => (
+                          <SelectInput
+                            multiple
+                            error={field.error}
+                            altLabel={props.schema.title}
+                            label={listFieldName}
+                            helperText={props.schema.description}
+                            value={field.value || ""}
+                            options={options.map((o) => ({
+                              value: o,
+                              label: o,
+                            }))}
+                            selectProps={fieldProps}
+                            required={!!props.schema.minItems}
+                          />
+                        )}
+                      </OnlyStringItems>
+                    )}
+                  </Field>
+                </Match>
+
+                <Match
+                  when={
+                    itemsSchema().type === "string" ||
+                    itemsSchema().type === "object"
+                  }
+                >
+                  {/* !Important: Register the parent field to gain access to array items*/}
+                  <FieldArray
+                    // @ts-ignore
+                    name={listFieldName}
+                    of={props.formStore}
+                    validateOn="touched"
+                    revalidateOn="touched"
+                    validate={() => {
+                      let error = "";
+                      // @ts-ignore
+                      const values: any[] = getValues(
+                        props.formStore,
+                        // @ts-ignore
+                        listFieldName,
+                      );
+                      if (props.schema.uniqueItems) {
+                        const duplicates = findDuplicates(values);
+                        if (duplicates.length) {
+                          error = `Duplicate entries are not allowed. Please make sure each entry is unique.`;
+                        }
+                      }
+                      if (
+                        props.schema.maxItems &&
+                        values.length > props.schema.maxItems
+                      ) {
+                        error = `You can only add up to ${props.schema.maxItems} items`;
+                      }
+                      if (
+                        props.schema.minItems &&
+                        values.length < props.schema.minItems
+                      ) {
+                        error = `Please add at least ${props.schema.minItems} items.`;
+                      }
+
+                      return error;
+                    }}
+                  >
+                    {(fieldArray) => (
+                      <>
+                        {/* Render existing items */}
+                        <For
+                          each={fieldArray.items}
+                          fallback={
+                            // Empty list
+                            <span class="text-neutral-500">No items</span>
+                          }
+                        >
+                          {(item, idx) => (
+                            <ListValueDisplay
+                              {...props}
+                              listFieldName={listFieldName}
+                              idx={idx()}
+                              of={fieldArray.items.length}
+                            >
+                              <Field
+                                // @ts-ignore: field names are not know ahead of time
+                                name={`${listFieldName}.${idx()}`}
+                              >
+                                {(f, fp) => (
+                                  <>
+                                    <DynForm
+                                      formProps={{
+                                        class: cx("w-full"),
+                                      }}
+                                      resetOnSubmit={true}
+                                      schema={itemsSchema()}
+                                      initialValues={
+                                        itemsSchema().type === "object"
+                                          ? f.value
+                                          : { "": f.value }
+                                      }
+                                      readonly={true}
+                                    ></DynForm>
+                                  </>
+                                )}
+                              </Field>
+                            </ListValueDisplay>
+                          )}
+                        </For>
+                        <span class="label-text-alt font-bold text-error">
+                          {fieldArray.error}
+                        </span>
+
+                        {/* Add new item */}
+                        <DynForm
+                          formProps={{
+                            class: cx("px-2 w-full"),
+                          }}
+                          schema={{ ...itemsSchema(), title: "Add entry" }}
+                          initialPath={["root"]}
+                          // Reset the input field for list items
+                          resetOnSubmit={true}
+                          initialValues={{
+                            root: generateDefaults(itemsSchema()),
+                          }}
+                          // Button for adding new items
+                          components={{
+                            before: <button class="btn">Add ↑</button>,
+                          }}
+                          // Add the new item to the FieldArray
+                          handleSubmit={(values, event) => {
+                            // @ts-ignore
+                            const prev: any[] = getValues(
+                              props.formStore,
+                              // @ts-ignore
+                              listFieldName,
+                            );
+                            if (itemsSchema().type === "object") {
+                              const newIdx = prev.length;
+                              setValue(
+                                props.formStore,
+                                // @ts-ignore
+                                `${listFieldName}.${newIdx}`,
+                                // @ts-ignore
+                                values.root,
+                              );
+                            }
+                            // @ts-ignore
+                            insert(props.formStore, listFieldName, {
+                              // @ts-ignore
+                              value: values.root,
+                            });
+                          }}
+                        />
+                      </>
+                    )}
+                  </FieldArray>
+                </Match>
+              </Switch>
+            </>
+          )}
+        </Match>
+      </Switch>
+    </>
+  );
+}
+
+interface ObjectFieldPropertyLabelProps {
+  schema: JSONSchema7;
+  fallback: JSX.Element;
+}
+export function ObjectFieldPropertyLabel(props: ObjectFieldPropertyLabelProps) {
+  return (
+    <Switch fallback={props.fallback}>
+      {/* @ts-ignore */}
+      <Match when={props.schema?.$exportedModuleInfo?.path}>
+        {(path) => path()[path().length - 1]}
+      </Match>
+    </Switch>
+  );
+}
+
+export function ObjectFields<T extends FieldValues, R extends ResponseData>(
+  props: SchemaFieldsProps<T, R>,
+) {
+  if (props.schema.type !== "object") {
+    return (
+      <span class="text-error">
+        Error cannot render the following as Object
+        <Unsupported schema={props.schema} />
+      </span>
+    );
+  }
+
+  const fieldName = props.path.join(".");
+  const { Field } = props;
+
+  return (
+    <Switch
+      fallback={
+        <Unsupported
+          schema={props.schema}
+          error="Dont know how to render objectFields"
+        />
+      }
+    >
+      <Match
+        when={!props.schema.additionalProperties && props.schema.properties}
+      >
+        {(properties) => (
+          <For each={Object.entries(properties())}>
+            {([propName, propSchema]) => (
+              <div
+                class={cx(
+                  "w-full grid grid-cols-1 gap-4 justify-items-start",
+                  `p-${props.path.length * 2}`,
+                )}
+              >
+                <Label
+                  label={propName}
+                  required={props.schema.required?.some((r) => r === propName)}
+                />
+
+                {typeof propSchema === "object" && (
+                  <SchemaFields
+                    {...props}
+                    schema={propSchema}
+                    path={[...props.path, propName]}
+                  />
+                )}
+                {typeof propSchema === "boolean" && (
+                  <span class="text-error">
+                    Schema: Object of Boolean not supported
+                  </span>
+                )}
+              </div>
+            )}
+          </For>
+        )}
+      </Match>
+      {/* Objects where people can define their own keys
+        - Trivial Key-value pairs. Where the value is a string a number or a list of strings (trivial select).
+        - Non-trivial Key-value pairs. Where the value is an object or a list
+      */}
+      <Match
+        when={
+          typeof props.schema.additionalProperties === "object" &&
+          props.schema.additionalProperties
+        }
+      >
+        {(additionalPropertiesSchema) => (
+          <Switch
+            fallback={
+              <Unsupported
+                schema={additionalPropertiesSchema()}
+                error="type of additionalProperties not supported yet"
+              />
+            }
+          >
+            {/* Non-trivival cases */}
+            <Match
+              when={
+                additionalPropertiesSchema().type === "object" &&
+                additionalPropertiesSchema()
+              }
+            >
+              {(itemSchema) => (
+                <Field
+                  // Important!: Register the object field to gain access to the dynamic object properties
+                  // @ts-ignore
+                  name={fieldName}
+                >
+                  {(objectField, fp) => (
+                    <>
+                      <For
+                        fallback={
+                          <>
+                            <label class="label-text">
+                              No{" "}
+                              <ObjectFieldPropertyLabel
+                                schema={itemSchema()}
+                                fallback={"No entries"}
+                              />{" "}
+                              yet.
+                            </label>
+                          </>
+                        }
+                        each={Object.entries(objectField.value || {})}
+                      >
+                        {([key, relatedValue]) => (
+                          <Field
+                            // @ts-ignore
+                            name={`${fieldName}.${key}`}
+                          >
+                            {(f, fp) => (
+                              <div class="border-l-4 border-gray-300 pl-4 w-full">
+                                <DynForm
+                                  formProps={{
+                                    class: cx("w-full"),
+                                  }}
+                                  schema={itemSchema()}
+                                  initialValues={f.value}
+                                  components={{
+                                    before: (
+                                      <div class="flex w-full">
+                                        <span class="text-xl font-semibold">
+                                          {key}
+                                        </span>
+                                        <button
+                                          class="btn btn-sm btn-warning ml-auto"
+                                          type="button"
+                                          onClick={(_e) => {
+                                            const copy = {
+                                              // @ts-ignore
+                                              ...objectField.value,
+                                            };
+                                            delete copy[key];
+                                            setValue(
+                                              props.formStore,
+                                              // @ts-ignore
+                                              `${fieldName}`,
+                                              // @ts-ignore
+                                              copy,
+                                            );
+                                          }}
+                                        >
+                                          Remove
+                                        </button>
+                                      </div>
+                                    ),
+                                  }}
+                                />
+                              </div>
+                            )}
+                          </Field>
+                        )}
+                      </For>
+                      {/* Replace this with a normal input ?*/}
+                      <DynForm
+                        formProps={{
+                          class: cx("w-full"),
+                        }}
+                        resetOnSubmit={true}
+                        initialValues={{ "": "" }}
+                        schema={{
+                          type: "string",
+                          title: `Entry title or key`,
+                        }}
+                        handleSubmit={(values, event) => {
+                          setValue(
+                            props.formStore,
+                            // @ts-ignore
+                            `${fieldName}`,
+                            // @ts-ignore
+                            { ...objectField.value, [values[""]]: {} },
+                          );
+                        }}
+                      />
+                    </>
+                  )}
+                </Field>
+              )}
+            </Match>
+            <Match
+              when={
+                additionalPropertiesSchema().type === "array" &&
+                additionalPropertiesSchema()
+              }
+            >
+              {(itemSchema) => (
+                <Unsupported
+                  schema={itemSchema()}
+                  error="dynamic arrays are not implemented yet"
+                />
+              )}
+            </Match>
+            {/* TODO: Trivial cases */}
+          </Switch>
+        )}
+      </Match>
+    </Switch>
+  );
+}
diff --git a/pkgs/webview-ui/app/src/routes/modules/details.tsx b/pkgs/webview-ui/app/src/routes/modules/details.tsx
index 61d882b40..1161eb4ff 100644
--- a/pkgs/webview-ui/app/src/routes/modules/details.tsx
+++ b/pkgs/webview-ui/app/src/routes/modules/details.tsx
@@ -24,6 +24,7 @@ import {
   setValue,
   SubmitHandler,
 } from "@modular-forms/solid";
+import { DynForm } from "@/src/Form/form";
 
 export const ModuleDetails = () => {
   const params = useParams();
@@ -167,7 +168,6 @@ export const ModuleForm = (props: { id: string }) => {
     console.log("Schema Query", schemaQuery.data?.[props.id]);
   });
 
-  const [formStore, { Form, Field }] = createForm();
   const handleSubmit: SubmitHandler<NonNullable<unknown>> = async (
     values,
     event,
@@ -175,156 +175,6 @@ export const ModuleForm = (props: { id: string }) => {
     console.log("Submitted form values", values);
   };
 
-  const [newKey, setNewKey] = createSignal<string>("");
-
-  const handleChangeKey: JSX.ChangeEventHandler<HTMLInputElement, Event> = (
-    e,
-  ) => {
-    setNewKey(e.currentTarget.value);
-  };
-  const SchemaForm = (props: SchemaFormProps) => {
-    return (
-      <div>
-        <Switch
-          fallback={<Unsupported what={"schema"} schema={props.schema} />}
-        >
-          <Match when={props.schema.type === "object"}>
-            <Switch
-              fallback={<Unsupported what={"object"} schema={props.schema} />}
-            >
-              <Match
-                when={
-                  !props.schema.additionalProperties && props.schema.properties
-                }
-              >
-                {(properties) => (
-                  <For each={Object.entries(properties())}>
-                    {([key, value]) => (
-                      <Switch fallback={`Cannot render sub-schema of ${value}`}>
-                        <Match when={typeof value === "object" && value}>
-                          {(sub) => (
-                            <SchemaForm
-                              title={key}
-                              schema={sub()}
-                              path={[...props.path, key]}
-                            />
-                          )}
-                        </Match>
-                      </Switch>
-                    )}
-                  </For>
-                )}
-              </Match>
-              <Match
-                when={
-                  typeof props.schema.additionalProperties == "object" &&
-                  props.schema.additionalProperties
-                }
-              >
-                {(additionalProperties) => (
-                  <>
-                    <div>{props.title}</div>
-                    {/* @ts-expect-error: We don't know the field names ahead of time */}
-                    <Field name={props.title}>
-                      {(f, p) => (
-                        <>
-                          <Show when={f.value}>
-                            <For
-                              each={Object.entries(
-                                f.value as Record<string, unknown>,
-                              )}
-                            >
-                              {(v) => (
-                                <div>
-                                  <div>
-                                    {removeTrailingS(props.title)}: {v[0]}
-                                  </div>
-                                  <div>
-                                    <SchemaForm
-                                      path={[...props.path, v[0]]}
-                                      schema={additionalProperties()}
-                                      title={v[0]}
-                                    />{" "}
-                                  </div>
-                                </div>
-                              )}
-                            </For>
-                          </Show>
-                          <input
-                            value={newKey()}
-                            onChange={handleChangeKey}
-                            type={"text"}
-                            placeholder={`Name of ${removeTrailingS(props.title)}`}
-                            required
-                          />
-                          <button
-                            class="btn btn-ghost"
-                            onClick={(e) => {
-                              e.preventDefault();
-                              const value = getValue(formStore, props.title);
-                              if (!newKey()) return;
-
-                              if (value === undefined) {
-                                setValue(formStore, props.title, {
-                                  [newKey()]: {},
-                                });
-                                setNewKey("");
-                              } else if (
-                                typeof value === "object" &&
-                                value !== null &&
-                                !(newKey() in value)
-                              ) {
-                                setValue(formStore, props.title, {
-                                  ...value,
-                                  [newKey()]: {},
-                                });
-                                setNewKey("");
-                              } else {
-                                console.debug(
-                                  "Unsupported key value pair. (attrsOf t)",
-                                  { value },
-                                );
-                              }
-                            }}
-                          >
-                            Add new {removeTrailingS(props.title)}
-                          </button>
-                        </>
-                      )}
-                    </Field>
-                  </>
-                )}
-              </Match>
-            </Switch>
-          </Match>
-          <Match when={props.schema.type === "array"}>
-            TODO: Array field "{props.title}"
-          </Match>
-          <Match when={props.schema.type === "string"}>
-            {/* @ts-expect-error: We dont know the field names ahead of time */}
-            <Field name={props.path.join(".")}>
-              {(field, fieldProps) => (
-                <TextInput
-                  formStore={formStore}
-                  inputProps={fieldProps}
-                  label={props.title}
-                  // @ts-expect-error: It is a string, otherwise the json schema would be invalid
-                  value={field.value ?? ""}
-                  placeholder={`${props.schema.default || ""}`.replace(
-                    "\u2039name\u203a",
-                    `${props.path.at(-2)}`,
-                  )}
-                  error={field.error}
-                  required={!props.schema.default}
-                />
-              )}
-            </Field>
-          </Match>
-        </Switch>
-      </div>
-    );
-  };
-
   return (
     <div id="ModuleForm">
       <Switch fallback={"No Schema found"}>
@@ -337,11 +187,13 @@ export const ModuleForm = (props: { id: string }) => {
                 {([role, schema]) => (
                   <div class="my-2">
                     <h4 class="text-xl">{role}</h4>
-                    <Form onSubmit={handleSubmit}>
-                      <SchemaForm title={role} schema={schema} path={[]} />
-                      <br />
-                      <button class="btn btn-primary">Save</button>
-                    </Form>
+                    <DynForm
+                      handleSubmit={handleSubmit}
+                      schema={schema}
+                      components={{
+                        after: <button class="btn btn-primary">Submit</button>,
+                      }}
+                    />
                   </div>
                 )}
               </For>