@contractspec/lib.contracts-runtime-client-react 3.8.4 → 3.8.6

package/dist/node/form-render.impl.js

@@ -1,362 +1 @@
-import { createRequire } from "node:module";
-var __require = /* @__PURE__ */ createRequire(import.meta.url);
-
-// src/form-render.impl.tsx
-import {
-  buildZodWithRelations,
-  evalPredicate
-} from "@contractspec/lib.contracts-spec/forms";
-import { zodResolver } from "@hookform/resolvers/zod";
-import React, { useEffect, useMemo, useState } from "react";
-import {
-  Controller,
-  useFieldArray,
-  useForm
-} from "react-hook-form";
-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
-};
+import{createRequire as o}from"node:module";var Vq=o(import.meta.url);import{buildZodWithRelations as i,evalPredicate as u}from"@contractspec/lib.contracts-spec/forms";import{zodResolver as a}from"@hookform/resolvers/zod";import x,{useEffect as d,useMemo as n,useState as s}from"react";import{Controller as r,useFieldArray as e,useForm as qq}from"react-hook-form";import{jsx as Q,jsxs as M,Fragment as Qq}from"react/jsx-runtime";function v(U){if(!U)return;if(Array.isArray(U))return{kind:"static",options:U};return U}function Hq(U,H){if(!H)return;let J=H.replace(/\[(\d+)\]/g,".$1").split(".").filter(Boolean),T=U;for(let L of J){if(T==null)return;T=T[L]}return T}function Jq(U,H){if(!H||H.length===0)return"[]";try{return JSON.stringify(H.map((J)=>Hq(U,J)))}catch{return"[]"}}function p(U,H,J){let[T,L]=s([]),X=n(()=>{if(!H)return"nil";if(H.kind==="static")return JSON.stringify(H.options??[]);return Jq(U,H.deps)},[H,U]);return d(()=>{let N=!0;return(async()=>{if(!H)return L([]);if(H.kind==="static")return L([...H.options??[]]);let h=J?.[H.resolverKey];if(!h)return L([]);let k=await h(U,H.args);if(N)L([...k??[]])})(),()=>{N=!1}},[X,H&&H.kind==="resolver"?H.resolverKey:void 0]),T}function c(U,H,J){if(!H)return U??"";let T=typeof J==="number"?`${H.replace(/^\$index$/,String(J))}`:H;return U?`${U}${typeof J==="number"?`.${J}`:""}.${T}`.replace(/\.+/g,"."):T}function Tq(U){let H=U,{driver:J}=H;function T(L){let{spec:X,options:N,merged:R}=L,h=n(()=>i(X),[X]),k=qq({...R.formOptions,resolver:a(h),defaultValues:N?.defaultValues}),D=k.watch(),I=(q,w,W)=>{let{Field:Y,FieldLabel:y,FieldDescription:F,FieldError:B}=J,_=c(w,q.name,W),O=u(D,q.visibleWhen),Z=u(D,q.enabledWhen),P=Boolean(k.getFieldState(_)?.invalid);if(!O)return null;let $=_?.replace(/\./g,"-"),A={"data-invalid":P,hidden:!O,disabled:!Z},E=q.labelI18n?Q(y,{htmlFor:$,children:q.labelI18n}):null,g=q.descriptionI18n?Q(F,{children:q.descriptionI18n}):null;if(q.kind==="group"){let G=q.fields.map((z,K)=>Q(x.Fragment,{children:I(z,_,W)},`${_}-${K}`));return M(Y,{...A,children:[E,G,g]})}if(q.kind==="array")return l(q,w);return Q(r,{name:_,control:k.control,render:({field:G,fieldState:z})=>{let K=z.error?[z.error]:[],S=z.invalid||void 0;if(q.kind==="text"){let V=q,C=J.Input;return M(Y,{...A,children:[E,Q(C,{id:$,"aria-invalid":S,placeholder:q.placeholderI18n,autoComplete:V.autoComplete,inputMode:V.inputMode,maxLength:V.maxLength,minLength:V.minLength,disabled:!Z,...G,...q.uiProps}),g,z.invalid?Q(B,{errors:K}):null]})}if(q.kind==="textarea"){let V=q,C=J.Textarea;return M(Y,{...A,children:[E,Q(C,{id:$,"aria-invalid":S,placeholder:q.placeholderI18n,rows:V.rows,maxLength:V.maxLength,disabled:!Z,...G,...q.uiProps}),g,z.invalid?Q(B,{errors:K}):null]})}if(q.kind==="select"){let V=q,C=J.Select,b=v(V.options),j=p(D,b,R.resolvers);return M(Y,{...A,children:[E,Q(C,{id:$,name:_,"aria-invalid":S,disabled:!Z,value:G.value,onChange:(m)=>G.onChange(m),options:j,...q.uiProps}),g,z.invalid?Q(B,{errors:K}):null]})}if(q.kind==="checkbox"){let V=J.Checkbox;return M(Y,{...A,children:[E,Q(V,{id:$,name:_,disabled:!Z,checked:!!G.value,onCheckedChange:(C)=>G.onChange(C),...q.uiProps}),g,z.invalid?Q(B,{errors:K}):null]})}if(q.kind==="radio"){let V=q,C=J.RadioGroup,b=v(V.options),j=p(D,b,R.resolvers);return M(Y,{...A,children:[E,Q(C,{id:$,name:_,disabled:!Z,value:G.value,onValueChange:(m)=>G.onChange(m),options:j,...q.uiProps}),g,z.invalid?Q(B,{errors:K}):null]})}if(q.kind==="switch"){let V=J.Switch;return M(Y,{...A,children:[E,Q(V,{id:$,name:_,disabled:!Z,checked:!!G.value,onCheckedChange:(C)=>G.onChange(C),...q.uiProps}),g,z.invalid?Q(B,{errors:K}):null]})}return Q(Qq,{})}},_)},l=(q,w)=>{let W=c(w,q.name),{fields:Y,append:y,remove:F}=e({control:k.control,name:W}),B=q.max==null||Y.length<q.max,_=(P)=>(q.min==null?Y.length>0:Y.length>q.min)&&P>=0,O=J.Button,Z=J.FieldLabel;return M("div",{children:[q.labelI18n?Q(Z,{children:q.labelI18n}):null,Y.map((P,$)=>M("div",{children:[I(q.of,W,$),_($)?Q(O,{type:"button",variant:"ghost",size:"sm",onClick:()=>F($),children:"Remove"}):null]},P.id??$)),B?Q(O,{type:"button",variant:"outline",size:"sm",onClick:()=>y({}),children:"Add"}):null]},W)},t=async(q)=>{let w=X.actions?.[0]?.key??"submit";if(R.onSubmitOverride)return R.onSubmitOverride(q,w)},f=J.Button;return M("form",{onSubmit:k.handleSubmit(t),children:[(X.fields||[]).map((q,w)=>Q(x.Fragment,{children:I(q)},w)),X.actions&&X.actions.length?Q("div",{children:X.actions.map((q)=>Q(f,{type:"submit",children:q.labelI18n},q.key))}):null]})}return{render:(L,X)=>Q(T,{spec:L,options:X,merged:{...H,...X?.overrides??{}}})}}export{Tq as createFormRenderer};