@digiform/wizard 0.3.6 → 0.5.0

package/wizard/src/features/form-runtime/components/FormFooter.js

@@ -1,29 +1,28 @@
 "use client";
 import { jsx as h, jsxs as F } from "react/jsx-runtime";
 import { clsx as b } from "clsx";
-/* empty css                               */
-import { useFormContext as S } from "../hooks/useFormContext.js";
-import { useFormEditing as g } from "../../../../../ui/src/lib/providers/FormEditingContext.js";
+import { useFormEditing as S } from "../../../../../core/src/providers/FormEditingContext.js";
+import { useFormContext as g } from "../hooks/useFormContext.js";
 import { useFormMachine as N } from "../../state-management/machines/useFormMachine.js";
 import { Button as A } from "@rijkshuisstijl-community/components-react";
 const I = ({
   navigation: r,
   children: a,
-  isDisplayOnly: e = !1,
+  isDisplayOnly: t = !1,
   onNext: c,
-  isLastStep: p = !1,
+  isLastStep: u = !1,
   isDisabled: n = !1,
   labels: i,
   ...o
 }) => {
   const l = () => {
-    e || n || c?.();
-  }, m = r?.next?.label || (p ? i?.finish ?? "Voltooien" : i?.next ?? "Volgende");
+    t || n || c?.();
+  }, m = r?.next?.label || (u ? i?.finish ?? "Voltooien" : i?.next ?? "Volgende");
   return /* @__PURE__ */ F(
     "div",
     {
       className: b(
-        (n || e) && "opacity-50",
+        (n || t) && "opacity-50",
         o.className
       ),
       ...o,
@@ -34,45 +33,45 @@ const I = ({
           {
             appearance: "primary-action-button",
             onClick: l,
-            disabled: n || e,
+            disabled: n || t,
             children: m
           }
         )
       ]
     }
   );
-}, k = ({ children: r, labels: a, ...e }) => {
-  const { isEditing: c } = g(), [p, n, i] = N(), { currentStep: o, isLastStep: l, nextStep: m } = i, { navigation: u } = o, s = S(), x = () => {
+}, _ = ({ children: r, labels: a, ...t }) => {
+  const { isEditing: c } = S(), [u, n, i] = N(), { currentStep: o, isLastStep: l, nextStep: m } = i, { navigation: p } = o, s = g(), x = () => {
     const d = Object.keys(s.state.fieldMeta).filter((f) => {
-      const t = s.state.fieldMeta[f];
-      return !t.isValid && t.errors?.length > 0;
+      const e = s.state.fieldMeta[f];
+      return !e.isValid && e.errors?.length > 0;
     });
     d.length > 0 && n({ type: "TRIGGER_STEP_VALIDATION", fieldIds: d });
   };
   return /* @__PURE__ */ h(
     I,
     {
-      navigation: u,
+      navigation: p,
       onNext: async () => {
         if (!s.state.canSubmit) {
           x();
           return;
         }
-        const f = (o.actions ?? []).some((t) => t.trigger === "onStepFinish");
+        const f = (o.actions ?? []).some((e) => e.trigger === "onStepFinish");
         try {
           f ? await s.handleSubmit() : m();
-        } catch (t) {
-          console.error("Form submission failed:", t);
+        } catch (e) {
+          console.error("Form submission failed:", e);
         }
       },
       isLastStep: l,
       isDisabled: c,
       labels: a,
-      ...e,
+      ...t,
       children: /* @__PURE__ */ h(s.Subscribe, { children: r })
     }
   );
 };
 export {
-  k as default
+  _ as default
 };

package/wizard/src/features/form-runtime/components/FormHeader.js

@@ -2,10 +2,10 @@
 import { jsx as u } from "react/jsx-runtime";
 /* empty css                               */
 import { FormHeaderBase as c } from "../../../../../ui/src/components/form-header-base/form-header-base.js";
-import { useFormMachine as l } from "../../state-management/machines/useFormMachine.js";
-import { useFormEditing as d } from "../../../../../ui/src/lib/providers/FormEditingContext.js";
+import { useFormEditing as l } from "../../../../../core/src/providers/FormEditingContext.js";
+import { useFormMachine as d } from "../../state-management/machines/useFormMachine.js";
 const N = (t) => {
-  const { isEditing: o } = d(), [, , i] = l(), { steps: n, currentStep: e, currentStepIndex: s, previousStep: a, goToStep: m } = i, p = (r) => {
+  const { isEditing: o } = l(), [, , i] = d(), { steps: n, currentStep: e, currentStepIndex: s, previousStep: a, goToStep: m } = i, p = (r) => {
     r === "previous" ? a() : m(r);
   };
   return /* @__PURE__ */ u(

package/wizard/src/features/form-runtime/components/FormStep/FormStep.js

@@ -1,8 +1,7 @@
 "use client";
 import { jsxs as f, jsx as r, Fragment as _ } from "react/jsx-runtime";
 import g from "./FormStep.module.css.js";
-/* empty css                                  */
-import { logger as w } from "../../../../../../ui/src/lib/logger.js";
+import { logger as w } from "../../../../../../core/src/utils/logger.js";
 import { useForm as I } from "@tanstack/react-form";
 import { useRef as p } from "react";
 import { LoaderProvider as M, useLoaderContext as C } from "../../context/LoaderContext.js";

package/wizard/src/features/form-runtime/components/renderers/DisplayModeRenderer/DisplayModeRenderer.js

@@ -1,28 +1,19 @@
 "use client";
 import { jsxs as p, jsx as r } from "react/jsx-runtime";
-import { clsx as a } from "clsx";
-import d from "./DisplayModeRenderer.module.css.js";
-import { FormFieldWrapper as m } from "../../../../../../../ui/src/design-system/components/FormFieldWrapper.js";
-import { renderComponentDisplayValue as t } from "../../../utils/componentDisplayValue.js";
-const u = ({
+import { clsx as d } from "clsx";
+import a from "./DisplayModeRenderer.module.css.js";
+import { renderComponentDisplayValue as m } from "../../../utils/componentDisplayValue.js";
+const y = ({
   component: e,
   fieldValue: s
 }) => {
-  const l = t(e, s), i = e.properties?.description, o = /* @__PURE__ */ p("div", { className: "form-field-display", children: [
+  const l = m(e, s), i = e.properties?.description, o = /* @__PURE__ */ p("div", { className: "form-field-display", children: [
     /* @__PURE__ */ r("div", { className: "rhc-form-field-label", children: e.properties?.label }),
     l,
     i && /* @__PURE__ */ r("p", { className: "rhc-form-field-description", children: i })
   ] });
-  return /* @__PURE__ */ r(
-    m,
-    {
-      invalid: !1,
-      errorMessage: void 0,
-      className: a("form-field-wrapper form-field-display-mode", d.displayWrapper),
-      input: o
-    }
-  );
+  return /* @__PURE__ */ r("div", { className: d("form-field-wrapper form-field-display-mode", a.displayWrapper), children: o });
 };
 export {
-  u as DisplayModeRenderer
+  y as DisplayModeRenderer
 };

package/wizard/src/features/form-runtime/components/renderers/InteractiveFieldRenderer/InteractiveFieldRenderer.js

@@ -1,56 +1,43 @@
 "use client";
-import { jsx as o } from "react/jsx-runtime";
-import { clsx as u } from "clsx";
-import v from "./InteractiveFieldRenderer.module.css.js";
-import { FormFieldWrapper as g } from "../../../../../../../ui/src/design-system/components/FormFieldWrapper.js";
-import { adaptComponentForRegistry as y } from "../../../ComponentAdapterComplete/ComponentAdapterComplete.js";
-import { shouldShowValidationError as E, getDisplayErrorMessage as F, markFieldAsUserInteracted as w } from "../../../utils/validationUX.js";
-const O = ({
+import { jsx as p } from "react/jsx-runtime";
+import h from "./InteractiveFieldRenderer.module.css.js";
+import { adaptComponentForRegistry as u } from "../../../ComponentAdapterComplete/ComponentAdapterComplete.js";
+import { shouldShowValidationError as v, getDisplayErrorMessage as g, markFieldAsUserInteracted as E } from "../../../utils/validationUX.js";
+const w = ({
   component: e,
   field: r,
-  readOnly: n,
-  needsFormFieldWrapper: d,
+  readOnly: a,
   isSubmitAttempted: t,
-  onChange: l,
-  onBlur: m
+  onChange: n,
+  onBlur: i
 }) => {
-  const p = r.state.value, c = r.state.meta.errors || [], f = !r.state.meta.isValid && c.length > 0, s = E(
+  const d = r.state.value, l = r.state.meta.errors || [], c = !r.state.meta.isValid && l.length > 0, s = v(
     r.state.meta,
     t,
     e.id
     // Pass component ID for validation cache
-  ), a = F(
+  ), o = g(
     r.state.meta,
     t
-  ), h = y(
+  ), m = u(
     e,
-    p,
-    l,
+    d,
     n,
+    a,
     () => {
-      w(e.id), m();
+      E(e.id), i();
     },
     void 0,
     // errors parameter
-    void 0
+    void 0,
     // state parameter
-  ), i = /* @__PURE__ */ o(
-    "div",
-    {
-      style: { display: "contents" },
-      children: h
-    }
+    !!(s && c),
+    // invalid
+    s && o ? o : void 0
+    // errorMessage
   );
-  return d ? /* @__PURE__ */ o(
-    g,
-    {
-      invalid: s && f,
-      errorMessage: s && a ? a : void 0,
-      className: u("form-field-wrapper", v.fieldWrapper),
-      input: i
-    }
-  ) : /* @__PURE__ */ o("div", { className: "form-field", children: i });
+  return /* @__PURE__ */ p("div", { className: h.fieldWrapper, children: m });
 };
 export {
-  O as InteractiveFieldRenderer
+  w as InteractiveFieldRenderer
 };

package/wizard/src/features/form-runtime/utils/formDataBuilder.js

@@ -1,10 +1,9 @@
 "use client";
-/* empty css                               */
-import { isFormField as r, getDefaultValue as s } from "../../../../../ui/src/lib/utils/componentUtils.js";
-const u = (i) => (i.sections ?? []).flatMap((e) => e.components).filter((e) => r(e.type)).reduce(
-  (e, t) => (e[t.id] = s(t.type), e),
+import { isFormField as i, getDefaultValue as r } from "../../../../../core/src/utils/componentUtils.js";
+const n = (s) => (s.sections ?? []).flatMap((e) => e.components).filter((e) => i(e.type)).reduce(
+  (e, t) => (e[t.id] = r(t.type), e),
   {}
 );
 export {
-  u as buildDefaultValues
+  n as buildDefaultValues
 };

package/wizard/src/features/validation-system/validation/ActionValidation.js

@@ -1,8 +1,7 @@
 "use client";
-/* empty css                               */
-import { isTemplateDialogConfig as p } from "../../../../../ui/src/lib/types/guards.js";
-import { resolveTemplateDialog as d } from "../../../../../ui/src/lib/utils/templateDialogResolver.js";
-class m extends Error {
+import { resolveTemplateDialog as p } from "../../../../../core/src/utils/templateDialogResolver.js";
+import { isTemplateDialogConfig as d } from "../../../../../core/src/types/guards.js";
+class v extends Error {
   constructor(t, e, i, r) {
     super(i), this.actionId = t, this.actionType = e, this.details = r, this.name = "ActionValidationError";
   }
@@ -72,7 +71,7 @@ class n {
    */
   static validateDialogConfig(t) {
     const e = [];
-    if (p(t))
+    if (d(t))
       return n.validateTemplateDialogConfig(t);
     const i = t;
     if (i.title || e.push("Dialog title is required"), i.content || e.push("Dialog content is required"), i.type ? ["modal", "toast", "sidebar"].includes(i.type) || e.push("Invalid dialog type") : e.push("Dialog type is required"), !i.buttons || i.buttons.length === 0)
@@ -100,7 +99,7 @@ class n {
     if ((!t.template.typeId || t.template.typeId.trim() === "") && e.push("Template typeId is required"), (!t.template.config || typeof t.template.config != "object") && e.push("Template config is required and must be an object"), e.length > 0)
       return e;
     try {
-      const i = d(t);
+      const i = p(t);
       return n.validateResolvedDialogConfig(i);
     } catch (i) {
       e.push(
@@ -207,7 +206,7 @@ class n {
         try {
           const s = o.config;
           let a;
-          if (p(s) ? a = d(s) : a = s, a.buttons) {
+          if (d(s) ? a = p(s) : a = s, a.buttons) {
             for (const u of a.buttons)
               if (u.action.type === "navigate" && u.action.targetStep) {
                 const l = u.action.targetStep;
@@ -229,6 +228,6 @@ class n {
   }
 }
 export {
-  m as ActionValidationError,
+  v as ActionValidationError,
   n as ActionValidator
 };

package/wizard/src/renderer/RHCRenderer.js

@@ -0,0 +1,160 @@
+"use client";
+import { jsx as r } from "react/jsx-runtime";
+import { SelectOption as b, FormFieldRadio as f, FormFieldCheckboxGroup as g, FormFieldCheckboxOption as h } from "@rijkshuisstijl-community/components-react";
+import { wizardFieldTypeMap as v } from "./rhc-field-type-map.js";
+const m = v, x = {
+  digits: "[0-9]*",
+  letters: "[a-zA-Z]*",
+  alphanumeric: "[a-zA-Z0-9]*"
+}, O = ({
+  component: u,
+  value: i,
+  onChange: s,
+  isFormView: c,
+  invalid: d,
+  errorMessage: p
+}) => {
+  const y = m[u.type];
+  if (!y)
+    return console.warn(`[RHCRenderer] No RHC component registered for type: ${u.type}`), null;
+  const e = u.properties ?? {}, l = {};
+  for (const t of y.included)
+    t in e && (l[t] = e[t]);
+  const o = y.component;
+  switch (u.type) {
+    case "text":
+    case "email":
+    case "tel":
+    case "number":
+    case "date":
+      return /* @__PURE__ */ r(
+        o,
+        {
+          type: u.type,
+          value: typeof i == "string" ? i : "",
+          ...l,
+          invalid: d,
+          errorMessage: p,
+          readOnly: !!l.readOnly || !c,
+          onChange: c ? (t) => s(t.target.value) : void 0
+        }
+      );
+    case "textarea":
+      return /* @__PURE__ */ r(
+        o,
+        {
+          value: typeof i == "string" ? i : "",
+          ...l,
+          invalid: d,
+          errorMessage: p,
+          readOnly: !!l.readOnly || !c,
+          onChange: c ? (t) => s(t.target.value) : void 0
+        }
+      );
+    case "checkbox": {
+      const t = typeof e.label == "string" ? e.label : "", n = typeof e.description == "string" ? e.description : void 0;
+      return /* @__PURE__ */ r(
+        g,
+        {
+          label: t,
+          description: n,
+          invalid: d,
+          errorMessage: p,
+          children: /* @__PURE__ */ r(
+            h,
+            {
+              label: t,
+              checked: !!i,
+              disabled: !!e.disabled,
+              onChange: c ? (a) => s(a.target.checked) : void 0
+            }
+          )
+        }
+      );
+    }
+    case "radioGroup": {
+      const t = Array.isArray(e.options) ? e.options : [];
+      return /* @__PURE__ */ r(
+        o,
+        {
+          ...l,
+          invalid: d,
+          errorMessage: p,
+          children: t.map((n) => /* @__PURE__ */ r(
+            f,
+            {
+              label: n.label,
+              value: n.value,
+              checked: i === n.value,
+              onChange: c ? () => s(n.value) : void 0
+            },
+            n.value
+          ))
+        }
+      );
+    }
+    case "dropdown": {
+      const t = Array.isArray(e.options) ? e.options : [], n = typeof e.label == "string" ? e.label : "";
+      return /* @__PURE__ */ r(
+        o,
+        {
+          label: n,
+          value: typeof i == "string" ? i : "",
+          ...l,
+          invalid: d,
+          errorMessage: p,
+          onChange: c ? (a) => s(a.target.value) : void 0,
+          children: t.map((a) => /* @__PURE__ */ r(b, { value: a.value, children: a.label }, a.value))
+        }
+      );
+    }
+    case "button":
+      return /* @__PURE__ */ r(
+        o,
+        {
+          type: "button",
+          ...l,
+          onClick: c ? () => s(null) : void 0,
+          children: typeof e.label == "string" ? e.label : "Submit"
+        }
+      );
+    case "heading": {
+      const t = typeof e.level == "number" ? e.level : 2, n = Math.min(6, Math.max(1, t)), a = typeof e.text == "string" ? e.text : "";
+      return /* @__PURE__ */ r(o, { level: n, children: a });
+    }
+    case "paragraph":
+      return /* @__PURE__ */ r(o, { children: typeof e.text == "string" ? e.text : "" });
+    case "alert":
+      return /* @__PURE__ */ r(o, { role: "alert", children: typeof e.message == "string" ? e.message : "" });
+    case "progress-loader":
+      return /* @__PURE__ */ r(
+        o,
+        {
+          mode: typeof e.mode == "string" ? e.mode : "indeterminate",
+          status: "loading",
+          label: typeof e.label == "string" ? e.label : void 0
+        }
+      );
+    case "code-input": {
+      const t = typeof e.pattern == "string" ? e.pattern : void 0, n = t && t !== "none" ? x[t] : void 0;
+      return /* @__PURE__ */ r(
+        o,
+        {
+          codeLength: Number(e.codeLength ?? 6) || 6,
+          label: typeof e.label == "string" ? e.label : void 0,
+          invalid: d,
+          errorMessage: p,
+          capitalize: !!e.capitalize,
+          pattern: n,
+          disabled: !!e.disabled,
+          onChange: (a) => s(a)
+        }
+      );
+    }
+    default:
+      return /* @__PURE__ */ r(o, { ...l });
+  }
+};
+export {
+  O as rhcRenderer
+};

package/wizard/src/renderer/rhc-field-type-map.js

@@ -0,0 +1,25 @@
+"use client";
+import { CodeInputGroup as d, Alert as l, Paragraph as o, Heading as n, Button as a, FormFieldSelect as i, FormFieldRadioGroup as r, FormFieldCheckboxGroup as c, FormFieldTextarea as t, FormFieldTextInput as e } from "@rijkshuisstijl-community/components-react";
+/* empty css                         */
+import { ProgressLoaderBar as p } from "../../../ui/src/components/ProgressLoaderBar/ProgressLoaderBar.js";
+const s = {
+  text: { component: e, included: ["label", "description", "value", "placeholder", "disabled", "readOnly"] },
+  email: { component: e, included: ["label", "description", "value", "placeholder", "disabled", "readOnly"] },
+  tel: { component: e, included: ["label", "description", "value", "placeholder", "disabled", "readOnly"] },
+  number: { component: e, included: ["label", "description", "value", "placeholder", "disabled", "readOnly"] },
+  date: { component: e, included: ["label", "description", "value", "placeholder", "disabled", "readOnly"] },
+  textarea: { component: t, included: ["label", "description", "value", "placeholder", "disabled", "readOnly"] },
+  // checkbox: handled entirely in RHCRenderer switch case via FormFieldCheckboxGroup + FormFieldCheckboxOption
+  checkbox: { component: c, included: [] },
+  radioGroup: { component: r, included: ["label", "description"] },
+  dropdown: { component: i, included: ["label", "description", "disabled"] },
+  button: { component: a, included: ["disabled"] },
+  heading: { component: n, included: ["level"] },
+  paragraph: { component: o, included: [] },
+  alert: { component: l, included: [] },
+  "progress-loader": { component: p, included: ["mode", "label"] },
+  "code-input": { component: d, included: ["label", "codeLength", "capitalize", "pattern", "disabled"] }
+};
+export {
+  s as wizardFieldTypeMap
+};

package/renderer/wizardRenderer.d.ts

@@ -1,2 +0,0 @@
-import { RenderComponentFn } from '../../../ui/src/index.ts';
-export declare const wizardDefaultRenderer: RenderComponentFn;

package/ui/src/components/checkbox/checkbox.js

@@ -1,20 +0,0 @@
-"use client";
-import { jsx as o } from "react/jsx-runtime";
-import * as e from "@radix-ui/react-checkbox";
-import { Check as i } from "lucide-react";
-import * as s from "react";
-import { clsx as t } from "clsx";
-import c from "./checkbox.module.css.js";
-const l = s.forwardRef(({ className: r, ...m }, a) => /* @__PURE__ */ o(
-  e.Root,
-  {
-    ref: a,
-    className: t(c.checkbox, r),
-    ...m,
-    children: /* @__PURE__ */ o(e.Indicator, { className: c.checkboxIndicator, children: /* @__PURE__ */ o(i, { className: c.checkboxIcon }) })
-  }
-));
-l.displayName = e.Root.displayName;
-export {
-  l as Checkbox
-};

package/ui/src/components/checkbox/checkbox.module.css.js

@@ -1,10 +0,0 @@
-"use client";
-const c = "fb-checkbox_wsic0", o = "fb-checkboxIndicator_31Q4N", e = {
-  checkbox: c,
-  checkboxIndicator: o
-};
-export {
-  c as checkbox,
-  o as checkboxIndicator,
-  e as default
-};

package/ui/src/components/input/input.js

@@ -1,20 +0,0 @@
-"use client";
-import { jsx as p } from "react/jsx-runtime";
-import * as s from "react";
-import { clsx as e } from "clsx";
-import i from "./input.module.css.js";
-const a = s.forwardRef(
-  ({ className: t, type: r, ...o }, m) => /* @__PURE__ */ p(
-    "input",
-    {
-      type: r,
-      className: e(i.input, t),
-      ref: m,
-      ...o
-    }
-  )
-);
-a.displayName = "Input";
-export {
-  a as Input
-};

package/ui/src/components/input/input.module.css.js

@@ -1,8 +0,0 @@
-"use client";
-const t = "fb-input_RJ7IM", n = {
-  input: t
-};
-export {
-  n as default,
-  t as input
-};

package/ui/src/components/radio-group/radio-group.js

@@ -1,30 +0,0 @@
-"use client";
-import { jsx as r } from "react/jsx-runtime";
-import * as o from "@radix-ui/react-radio-group";
-import { Circle as d } from "lucide-react";
-import * as t from "react";
-import { clsx as s } from "clsx";
-import a from "./radio-group.module.css.js";
-const c = t.forwardRef(({ className: i, ...e }, m) => /* @__PURE__ */ r(
-  o.Root,
-  {
-    className: s(a.radioGroup, i),
-    ...e,
-    ref: m
-  }
-));
-c.displayName = o.Root.displayName;
-const p = t.forwardRef(({ className: i, ...e }, m) => /* @__PURE__ */ r(
-  o.Item,
-  {
-    ref: m,
-    className: s(a.radioGroupItem, i),
-    ...e,
-    children: /* @__PURE__ */ r(o.Indicator, { className: a.radioIndicator, children: /* @__PURE__ */ r(d, { className: a.radioIndicatorIcon }) })
-  }
-));
-p.displayName = o.Item.displayName;
-export {
-  c as RadioGroup,
-  p as RadioGroupItem
-};

package/ui/src/components/radio-group/radio-group.module.css.js

@@ -1,14 +0,0 @@
-"use client";
-const o = "fb-radioGroup_PqpPn", r = "fb-radioGroupItem_r91M1", a = "fb-radioIndicator_PFyGX", d = "fb-radioIndicatorIcon_vSsbY", i = {
-  radioGroup: o,
-  radioGroupItem: r,
-  radioIndicator: a,
-  radioIndicatorIcon: d
-};
-export {
-  i as default,
-  o as radioGroup,
-  r as radioGroupItem,
-  a as radioIndicator,
-  d as radioIndicatorIcon
-};