@contractspec/lib.contracts-runtime-client-react 2.0.0

package/dist/form-render.impl.js

@@ -0,0 +1,360 @@
+// @bun
+// src/form-render.impl.tsx
+import React, { useEffect, useMemo, useState } from "react";
+import {
+  Controller,
+  useFieldArray,
+  useForm
+} from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import {
+  buildZodWithRelations,
+  evalPredicate
+} from "@contractspec/lib.contracts-spec/forms";
+import { jsxDEV, Fragment } from "react/jsx-dev-runtime";
+"use client";
+function toOptionsArray(src) {
+  if (!src)
+    return;
+  if (Array.isArray(src))
+    return { kind: "static", options: src };
+  return src;
+}
+function getAtPath(values, path) {
+  if (!path)
+    return;
+  const segs = path.replace(/\[(\d+)\]/g, ".$1").split(".").filter(Boolean);
+  let cur = values;
+  for (const s of segs) {
+    if (cur == null)
+      return;
+    cur = cur[s];
+  }
+  return cur;
+}
+function makeDepsKey(values, deps) {
+  if (!deps || deps.length === 0)
+    return "[]";
+  try {
+    return JSON.stringify(deps.map((d) => getAtPath(values, d)));
+  } catch {
+    return "[]";
+  }
+}
+function useResolvedOptions(values, source, resolvers) {
+  const [opts, setOpts] = useState([]);
+  const depKey = useMemo(() => {
+    if (!source)
+      return "nil";
+    if (source.kind === "static")
+      return JSON.stringify(source.options ?? []);
+    return makeDepsKey(values, source.deps);
+  }, [source, values]);
+  useEffect(() => {
+    let mounted = true;
+    const run = async () => {
+      if (!source)
+        return setOpts([]);
+      if (source.kind === "static")
+        return setOpts([...source.options ?? []]);
+      const fn = resolvers?.[source.resolverKey];
+      if (!fn)
+        return setOpts([]);
+      const res = await fn(values, source.args);
+      if (mounted)
+        setOpts([...res ?? []]);
+    };
+    run();
+    return () => {
+      mounted = false;
+    };
+  }, [
+    depKey,
+    source && source.kind === "resolver" ? source.resolverKey : undefined
+  ]);
+  return opts;
+}
+function fieldPath(parent, name, arrayIndex) {
+  if (!name)
+    return parent ?? "";
+  const child = typeof arrayIndex === "number" ? `${name.replace(/^\$index$/, String(arrayIndex))}` : name;
+  return parent ? `${parent}${typeof arrayIndex === "number" ? `.${arrayIndex}` : ""}.${child}`.replace(/\.+/g, ".") : child;
+}
+function createFormRenderer(base) {
+  const conf = base;
+  const { driver } = conf;
+  function InternalForm(props) {
+    const { spec, options, merged } = props;
+    const baseZod = useMemo(() => buildZodWithRelations(spec), [spec]);
+    const form = useForm({
+      ...merged.formOptions,
+      resolver: zodResolver(baseZod),
+      defaultValues: options?.defaultValues
+    });
+    const values = form.watch();
+    const renderOne = (f, parent, arrayIndex) => {
+      const DriverField = driver.Field;
+      const DriverLabel = driver.FieldLabel;
+      const DriverDesc = driver.FieldDescription;
+      const DriverError = driver.FieldError;
+      const name = fieldPath(parent, f.name, arrayIndex);
+      const visible = evalPredicate(values, f.visibleWhen);
+      const enabled = evalPredicate(values, f.enabledWhen);
+      const invalid = Boolean(form.getFieldState(name)?.invalid);
+      if (!visible)
+        return null;
+      const id = name?.replace(/\./g, "-");
+      const commonWrapProps = {
+        "data-invalid": invalid,
+        hidden: !visible,
+        disabled: !enabled
+      };
+      const labelNode = f.labelI18n ? /* @__PURE__ */ jsxDEV(DriverLabel, {
+        htmlFor: id,
+        children: f.labelI18n
+      }, undefined, false, undefined, this) : null;
+      const descNode = f.descriptionI18n ? /* @__PURE__ */ jsxDEV(DriverDesc, {
+        children: f.descriptionI18n
+      }, undefined, false, undefined, this) : null;
+      if (f.kind === "group") {
+        const children = f.fields.map((c, i) => /* @__PURE__ */ jsxDEV(React.Fragment, {
+          children: renderOne(c, name, arrayIndex)
+        }, `${name}-${i}`, false, undefined, this));
+        return /* @__PURE__ */ jsxDEV(DriverField, {
+          ...commonWrapProps,
+          children: [
+            labelNode,
+            children,
+            descNode
+          ]
+        }, undefined, true, undefined, this);
+      }
+      if (f.kind === "array") {
+        return renderArray(f, parent);
+      }
+      return /* @__PURE__ */ jsxDEV(Controller, {
+        name,
+        control: form.control,
+        render: ({ field, fieldState }) => {
+          const err = fieldState.error ? [fieldState.error] : [];
+          const ariaInvalid = fieldState.invalid || undefined;
+          if (f.kind === "text") {
+            const textField = f;
+            const Input = driver.Input;
+            return /* @__PURE__ */ jsxDEV(DriverField, {
+              ...commonWrapProps,
+              children: [
+                labelNode,
+                /* @__PURE__ */ jsxDEV(Input, {
+                  id,
+                  "aria-invalid": ariaInvalid,
+                  placeholder: f.placeholderI18n,
+                  autoComplete: textField.autoComplete,
+                  inputMode: textField.inputMode,
+                  maxLength: textField.maxLength,
+                  minLength: textField.minLength,
+                  disabled: !enabled,
+                  ...field,
+                  ...f.uiProps
+                }, undefined, false, undefined, this),
+                descNode,
+                fieldState.invalid ? /* @__PURE__ */ jsxDEV(DriverError, {
+                  errors: err
+                }, undefined, false, undefined, this) : null
+              ]
+            }, undefined, true, undefined, this);
+          }
+          if (f.kind === "textarea") {
+            const textareaField = f;
+            const Textarea = driver.Textarea;
+            return /* @__PURE__ */ jsxDEV(DriverField, {
+              ...commonWrapProps,
+              children: [
+                labelNode,
+                /* @__PURE__ */ jsxDEV(Textarea, {
+                  id,
+                  "aria-invalid": ariaInvalid,
+                  placeholder: f.placeholderI18n,
+                  rows: textareaField.rows,
+                  maxLength: textareaField.maxLength,
+                  disabled: !enabled,
+                  ...field,
+                  ...f.uiProps
+                }, undefined, false, undefined, this),
+                descNode,
+                fieldState.invalid ? /* @__PURE__ */ jsxDEV(DriverError, {
+                  errors: err
+                }, undefined, false, undefined, this) : null
+              ]
+            }, undefined, true, undefined, this);
+          }
+          if (f.kind === "select") {
+            const selectField = f;
+            const Select = driver.Select;
+            const src = toOptionsArray(selectField.options);
+            const opts = useResolvedOptions(values, src, merged.resolvers);
+            return /* @__PURE__ */ jsxDEV(DriverField, {
+              ...commonWrapProps,
+              children: [
+                labelNode,
+                /* @__PURE__ */ jsxDEV(Select, {
+                  id,
+                  name,
+                  "aria-invalid": ariaInvalid,
+                  disabled: !enabled,
+                  value: field.value,
+                  onChange: (v) => field.onChange(v),
+                  options: opts,
+                  ...f.uiProps
+                }, undefined, false, undefined, this),
+                descNode,
+                fieldState.invalid ? /* @__PURE__ */ jsxDEV(DriverError, {
+                  errors: err
+                }, undefined, false, undefined, this) : null
+              ]
+            }, undefined, true, undefined, this);
+          }
+          if (f.kind === "checkbox") {
+            const Checkbox = driver.Checkbox;
+            return /* @__PURE__ */ jsxDEV(DriverField, {
+              ...commonWrapProps,
+              children: [
+                labelNode,
+                /* @__PURE__ */ jsxDEV(Checkbox, {
+                  id,
+                  name,
+                  disabled: !enabled,
+                  checked: !!field.value,
+                  onCheckedChange: (v) => field.onChange(v),
+                  ...f.uiProps
+                }, undefined, false, undefined, this),
+                descNode,
+                fieldState.invalid ? /* @__PURE__ */ jsxDEV(DriverError, {
+                  errors: err
+                }, undefined, false, undefined, this) : null
+              ]
+            }, undefined, true, undefined, this);
+          }
+          if (f.kind === "radio") {
+            const radioField = f;
+            const RadioGroup = driver.RadioGroup;
+            const src = toOptionsArray(radioField.options);
+            const opts = useResolvedOptions(values, src, merged.resolvers);
+            return /* @__PURE__ */ jsxDEV(DriverField, {
+              ...commonWrapProps,
+              children: [
+                labelNode,
+                /* @__PURE__ */ jsxDEV(RadioGroup, {
+                  id,
+                  name,
+                  disabled: !enabled,
+                  value: field.value,
+                  onValueChange: (v) => field.onChange(v),
+                  options: opts,
+                  ...f.uiProps
+                }, undefined, false, undefined, this),
+                descNode,
+                fieldState.invalid ? /* @__PURE__ */ jsxDEV(DriverError, {
+                  errors: err
+                }, undefined, false, undefined, this) : null
+              ]
+            }, undefined, true, undefined, this);
+          }
+          if (f.kind === "switch") {
+            const Switch = driver.Switch;
+            return /* @__PURE__ */ jsxDEV(DriverField, {
+              ...commonWrapProps,
+              children: [
+                labelNode,
+                /* @__PURE__ */ jsxDEV(Switch, {
+                  id,
+                  name,
+                  disabled: !enabled,
+                  checked: !!field.value,
+                  onCheckedChange: (v) => field.onChange(v),
+                  ...f.uiProps
+                }, undefined, false, undefined, this),
+                descNode,
+                fieldState.invalid ? /* @__PURE__ */ jsxDEV(DriverError, {
+                  errors: err
+                }, undefined, false, undefined, this) : null
+              ]
+            }, undefined, true, undefined, this);
+          }
+          return /* @__PURE__ */ jsxDEV(Fragment, {}, undefined, false, undefined, this);
+        }
+      }, name, false, undefined, this);
+    };
+    const renderArray = (f, parent) => {
+      const name = fieldPath(parent, f.name);
+      const { fields, append, remove } = useFieldArray({
+        control: form.control,
+        name
+      });
+      const canAdd = f.max == null || fields.length < f.max;
+      const canRemove = (idx) => (f.min == null ? fields.length > 0 : fields.length > f.min) && idx >= 0;
+      const Button2 = driver.Button;
+      const Label = driver.FieldLabel;
+      return /* @__PURE__ */ jsxDEV("div", {
+        children: [
+          f.labelI18n ? /* @__PURE__ */ jsxDEV(Label, {
+            children: f.labelI18n
+          }, undefined, false, undefined, this) : null,
+          fields.map((row, idx) => /* @__PURE__ */ jsxDEV("div", {
+            children: [
+              renderOne(f.of, name, idx),
+              canRemove(idx) ? /* @__PURE__ */ jsxDEV(Button2, {
+                type: "button",
+                variant: "ghost",
+                size: "sm",
+                onClick: () => remove(idx),
+                children: "Remove"
+              }, undefined, false, undefined, this) : null
+            ]
+          }, row.id ?? idx, true, undefined, this)),
+          canAdd ? /* @__PURE__ */ jsxDEV(Button2, {
+            type: "button",
+            variant: "outline",
+            size: "sm",
+            onClick: () => append({}),
+            children: "Add"
+          }, undefined, false, undefined, this) : null
+        ]
+      }, name, true, undefined, this);
+    };
+    const onSubmit = async (data) => {
+      const actionKey = spec.actions?.[0]?.key ?? "submit";
+      if (merged.onSubmitOverride) {
+        return merged.onSubmitOverride(data, actionKey);
+      }
+    };
+    const Button = driver.Button;
+    return /* @__PURE__ */ jsxDEV("form", {
+      onSubmit: form.handleSubmit(onSubmit),
+      children: [
+        (spec.fields || []).map((f, i) => /* @__PURE__ */ jsxDEV(React.Fragment, {
+          children: renderOne(f)
+        }, i, false, undefined, this)),
+        spec.actions && spec.actions.length ? /* @__PURE__ */ jsxDEV("div", {
+          children: spec.actions.map((a) => /* @__PURE__ */ jsxDEV(Button, {
+            type: "submit",
+            children: a.labelI18n
+          }, a.key, false, undefined, this))
+        }, undefined, false, undefined, this) : null
+      ]
+    }, undefined, true, undefined, this);
+  }
+  return {
+    render: (spec, options) => /* @__PURE__ */ jsxDEV(InternalForm, {
+      spec,
+      options,
+      merged: {
+        ...conf,
+        ...options?.overrides ?? {}
+      }
+    }, undefined, false, undefined, this)
+  };
+}
+export {
+  createFormRenderer
+};