@digiform/wizard 0.2.9 → 0.2.11

package/wizard/src/features/form-runtime/config/templateConfig.js

@@ -0,0 +1,156 @@
+"use client";
+/* empty css                               */
+import { getTemplateTypeFromId as o } from "../../../../../ui/src/lib/utils/templateUtils.js";
+const a = {
+  generic: {
+    permissions: {
+      // Generic templates are completely locked - only navigation and step title can be changed
+      canAddComponents: !1,
+      canRemoveComponents: !1,
+      canEditComponentProperties: !1,
+      canAddSections: !1,
+      canRemoveSections: !1,
+      canEditSectionProperties: !1,
+      canEditStepTitle: !0,
+      // Allow title customization for generic templates
+      canEditNavigation: !0,
+      // Allow navigation customization
+      canEditActions: !1,
+      canDuplicate: !1,
+      // Generic templates cannot be duplicated
+      canDelete: !0
+      // But they can be removed from forms
+    },
+    display: {
+      type: "generic",
+      isReadonly: !0,
+      showLockIcon: !0,
+      themeClass: "bg-indigo-50 border-indigo-200 text-indigo-900 hover:bg-indigo-100",
+      iconColor: "text-indigo-600",
+      lockTooltip: "Generic template - Only title and navigation can be customized",
+      badgeText: "Generic"
+    },
+    rules: {
+      lockMessage: "This is a generic template. Only the step title and navigation settings can be modified.",
+      supportsMultipleSteps: !0,
+      defaultNavigation: {
+        next: { label: "Next", enabled: !0 },
+        previous: { label: "Previous", enabled: !0 }
+      }
+    }
+  },
+  team: {
+    permissions: {
+      // Team templates allow full editing like normal steps
+      canAddComponents: !0,
+      canRemoveComponents: !0,
+      canEditComponentProperties: !0,
+      canAddSections: !0,
+      canRemoveSections: !0,
+      canEditSectionProperties: !0,
+      canEditStepTitle: !0,
+      canEditNavigation: !0,
+      canEditActions: !0,
+      canDuplicate: !0,
+      canDelete: !0
+    },
+    display: {
+      type: "team",
+      isReadonly: !1,
+      showLockIcon: !1,
+      themeClass: "bg-emerald-50 border-emerald-200 text-emerald-900 hover:bg-emerald-100",
+      iconColor: "text-emerald-600",
+      badgeText: "Team"
+    },
+    rules: {
+      lockMessage: "",
+      // No restrictions for team templates
+      supportsMultipleSteps: !0,
+      defaultNavigation: {
+        next: { label: "Next", enabled: !0 },
+        previous: { label: "Previous", enabled: !0 }
+      }
+    }
+  }
+}, s = {
+  permissions: {
+    canAddComponents: !0,
+    canRemoveComponents: !0,
+    canEditComponentProperties: !0,
+    canAddSections: !0,
+    canRemoveSections: !0,
+    canEditSectionProperties: !0,
+    canEditStepTitle: !0,
+    canEditNavigation: !0,
+    canEditActions: !0,
+    canDuplicate: !0,
+    canDelete: !0
+  },
+  display: {
+    type: null,
+    isReadonly: !1,
+    showLockIcon: !1,
+    themeClass: "bg-white border-muted",
+    iconColor: "text-muted-foreground"
+  },
+  rules: {
+    lockMessage: "",
+    supportsMultipleSteps: !1,
+    defaultNavigation: {
+      next: { label: "Next", enabled: !0 },
+      previous: { label: "Previous", enabled: !0 }
+    }
+  }
+};
+function i(e) {
+  let t = null;
+  if (typeof e == "string" ? t = e : "templateId" in e && (t = e.templateId), !t)
+    return s;
+  const n = o(t);
+  return n && a[n] ? a[n] : s;
+}
+function u(e) {
+  return i(e).permissions;
+}
+function g(e) {
+  return i(e).display;
+}
+function d(e, t) {
+  return u(e)[t];
+}
+function T(e, t) {
+  return "templateId" in e ? i(e).display.isReadonly : t ? i(t.templateId).display.isReadonly : !1;
+}
+function p(e) {
+  return i(e).rules.lockMessage;
+}
+function y(e, t) {
+  if (d(e, t))
+    return { allowed: !0 };
+  const l = p(e), c = i(e);
+  return {
+    allowed: !1,
+    message: l || `This action is not allowed for ${c.display.badgeText || "this"} templates.`
+  };
+}
+function r(e) {
+  return typeof e == "string" ? o(e) : "templateId" in e ? o(e.templateId) : null;
+}
+function b(e) {
+  return r(e) === "generic";
+}
+function v(e) {
+  return r(e) === "team";
+}
+export {
+  p as getLockMessage,
+  i as getTemplateConfig,
+  g as getTemplateDisplayConfig,
+  u as getTemplatePermissions,
+  r as getTemplateTypeFromInput,
+  d as isActionAllowed,
+  b as isGenericTemplateInput,
+  T as isStepLocked,
+  v as isTeamTemplateInput,
+  y as validateTemplateAction
+};

package/wizard/src/features/form-runtime/config/templateLoader.js

@@ -0,0 +1,265 @@
+"use client";
+/* empty css                               */
+import { isGenericTemplate as y, isTeamTemplate as b } from "../../../../../ui/src/lib/utils/templateUtils.js";
+async function m() {
+  try {
+    const { templateStorageService: e } = await import("@formbuilder/builder");
+    return e;
+  } catch (e) {
+    return console.warn("Template storage service not available:", e), null;
+  }
+}
+async function u() {
+  try {
+    const e = await m();
+    if (!e) return;
+    if (!e.isReady()) {
+      const r = await fetch("/form.config.json");
+      if (r.ok) {
+        const t = (await r.json()).storage?.paths?.templates;
+        t && await e.initialize(t);
+      }
+    }
+  } catch (e) {
+    console.warn("Failed to initialize template storage service:", e);
+  }
+}
+function f(e) {
+  return {
+    metadata: e.metadata,
+    stepsData: e.stepsData || [],
+    // Default to empty array if no steps
+    preview: {
+      componentCount: e.preview?.componentCount || 0,
+      sectionCount: e.preview?.sectionCount || 0
+    },
+    governance: e.governance || {
+      approved: !1,
+      complianceTags: [],
+      deprecated: !1
+    }
+  };
+}
+const p = /* @__PURE__ */ new Map(), o = {
+  "generic-contact-information": async () => {
+    const e = await fetch(
+      "/src/packages/form-wizard/admin/templates/generic/contact-information.json"
+    );
+    if (!e.ok)
+      throw new Error(
+        `Failed to fetch generic-contact-information template: ${e.status}`
+      );
+    return e.json();
+  },
+  "generic-consent-agreement": async () => {
+    const e = await fetch(
+      "/src/packages/form-wizard/admin/templates/generic/consent-agreement.json"
+    );
+    if (!e.ok)
+      throw new Error(
+        `Failed to fetch generic-consent-agreement template: ${e.status}`
+      );
+    return e.json();
+  },
+  "generic-feedback-form": async () => {
+    const e = await fetch(
+      "/src/packages/form-wizard/admin/templates/generic/feedback-form.json"
+    );
+    if (!e.ok)
+      throw new Error(
+        `Failed to fetch generic-feedback-form template: ${e.status}`
+      );
+    return e.json();
+  },
+  "generic-incident-registration": async () => {
+    const e = await fetch(
+      "/src/packages/form-wizard/admin/templates/generic/incident-registration.json"
+    );
+    if (!e.ok)
+      throw new Error(
+        `Failed to fetch generic-incident-registration template: ${e.status}`
+      );
+    return e.json();
+  }
+};
+async function v(e) {
+  if (p.has(e))
+    return p.get(e);
+  try {
+    let r;
+    if (y(e)) {
+      const i = o[e];
+      if (!i) {
+        const s = Object.keys(o);
+        throw new Error(
+          `Generic template '${e}' not found. Available generic templates: ${s.join(", ")}`
+        );
+      }
+      const t = await i();
+      r = f(
+        t
+      );
+    } else if (b(e)) {
+      await u();
+      const i = await m();
+      if (!i)
+        throw new Error(
+          `Team template '${e}' could not be loaded: template storage service is not available`
+        );
+      const t = await i.loadTemplate(
+        e,
+        "team"
+      );
+      if (!t.success)
+        throw new Error(
+          `Team template '${e}' not found: ${"error" in t && t.error?.message || "Unknown error"}`
+        );
+      r = f(t.data);
+    } else {
+      const i = o[e];
+      if (i) {
+        const t = await i();
+        r = f(
+          t
+        );
+      } else {
+        const t = Object.keys(o);
+        throw new Error(
+          `Template '${e}' not found. Available generic templates: ${t.join(", ")}`
+        );
+      }
+    }
+    if (!r.metadata || !Array.isArray(r.stepsData))
+      throw new Error(
+        `Invalid template structure for template: ${e}. Templates must have metadata and stepsData array.`
+      );
+    return p.set(e, r), r;
+  } catch (r) {
+    throw new Error(
+      `Failed to load template '${e}': ${r instanceof Error ? r.message : "Unknown error"}`
+    );
+  }
+}
+async function S(e, r, i) {
+  console.log(
+    "Resolving template step:",
+    e,
+    "stepIndex:",
+    i
+  );
+  const t = await v(e.templateId);
+  console.log("Loaded template:", t);
+  let s;
+  if (t.stepsData && Array.isArray(t.stepsData) && t.stepsData.length > 0)
+    i !== void 0 && i >= 0 && i < t.stepsData.length ? (s = t.stepsData[i], console.log(`Using template data for step ${i}:`, s)) : (s = t.stepsData[0], console.warn(
+      `Invalid stepIndex ${i} for template, using first step`
+    ));
+  else
+    throw new Error(`Template ${e.templateId} has no steps data`);
+  const h = s.sections?.map((w) => ({
+    ...w,
+    components: w.components.map((a) => {
+      const g = ((c) => `comp-${e.id}-${a.id || c}`)(a.id), n = {
+        id: g,
+        type: a.type,
+        properties: {
+          // Use properties from component.properties if it exists, otherwise fallback to root level
+          label: a.properties?.label || a.label || "",
+          placeholder: a.properties?.placeholder || a.placeholder || "",
+          description: a.properties?.description || a.description || "",
+          required: a.properties?.required || a.required || !1,
+          disabled: a.properties?.disabled || a.disabled || !1,
+          readOnly: a.properties?.readOnly || a.readOnly || !1,
+          invalid: a.properties?.invalid || !1,
+          // Add type-specific properties
+          type: a.properties?.type || a.type,
+          // Copy all other properties from component.properties if it exists
+          ...a.properties && Object.keys(a.properties).reduce(
+            (c, d) => ([
+              "label",
+              "placeholder",
+              "description",
+              "required",
+              "disabled",
+              "readOnly",
+              "invalid",
+              "type"
+            ].includes(d) || (c[d] = a.properties[d]), c),
+            {}
+          )
+        },
+        // Copy validation if it exists
+        ...a.validation && { validation: a.validation }
+      }, l = e.componentOverrides?.[g];
+      return l ? {
+        ...n,
+        ...l,
+        // Merge properties deeply to allow partial property updates
+        properties: {
+          ...n.properties,
+          ...l.properties
+        },
+        // Merge validation deeply if both exist
+        ...n.validation && l.validation && {
+          validation: {
+            ...n.validation,
+            ...l.validation
+          }
+        }
+      } : n;
+    })
+  }));
+  return {
+    id: e.id,
+    // Use the step ID from the form config
+    title: e.title || s.title,
+    displayTitle: s.displayTitle,
+    showStepNumber: e.showStepNumber !== void 0 ? e.showStepNumber : s.showStepNumber,
+    sections: h,
+    navigation: {
+      // Use default navigation, then template navigation if available, then step override
+      ...r,
+      ...s.navigation,
+      // Cast since navigation might not exist in Omit type
+      ...e.navigation
+    },
+    // Copy actions if they exist
+    ...s.actions && {
+      actions: s.actions
+    }
+  };
+}
+async function E(e) {
+  return (await v(e)).metadata;
+}
+async function D() {
+  const e = Object.keys(o);
+  try {
+    await u();
+    const r = await m();
+    if (r) {
+      const i = await r.listTemplates("team");
+      if (i.success && i.data) {
+        const t = i.data.map((s) => s.metadata.id);
+        return [...e, ...t];
+      }
+    }
+  } catch (r) {
+    console.warn("Failed to load team templates:", r);
+  }
+  return e;
+}
+function O() {
+  return Object.keys(o);
+}
+function A() {
+  p.clear();
+}
+export {
+  A as clearTemplateCache,
+  O as getAvailableGenericTemplates,
+  D as getAvailableTemplates,
+  E as getTemplateMetadata,
+  v as loadTemplate,
+  S as resolveTemplateStep
+};

package/wizard/src/features/form-runtime/config/templateUtils.js

@@ -0,0 +1,14 @@
+"use client";
+/* empty css                               */
+import { getTemplateMetadata as t, getAvailableGenericTemplates as a, getAvailableTemplates as l } from "./templateLoader.js";
+import { createAsyncTemplateFunctions as n } from "../../../../../ui/src/lib/utils/templateUtils.js";
+const e = n({
+  getAvailableTemplates: l,
+  getAvailableGenericTemplates: a,
+  getTemplateMetadata: t
+}), s = e.getAvailableGenericTemplatesSync, o = e.getTemplateInfo, p = e.validateTemplateReferences;
+export {
+  s as getAvailableGenericTemplatesSync,
+  o as getTemplateInfo,
+  p as validateTemplateReferences
+};

package/wizard/src/features/form-runtime/context/LoaderContext.js

@@ -0,0 +1,36 @@
+"use client";
+import { jsx as m } from "react/jsx-runtime";
+import { memo as c, useState as u, useCallback as r, useMemo as L, createContext as C, useContext as p } from "react";
+const a = C(null), g = c(
+  ({ children: e, initialComplete: i = !1 }) => {
+    const [o, t] = u(i), s = r((l) => {
+      t(l);
+    }, []), n = r(() => {
+      t(!1);
+    }, []), d = L(
+      () => ({
+        isLoadingComplete: o,
+        setLoadingComplete: s,
+        resetLoading: n
+      }),
+      [o, s, n]
+    );
+    return /* @__PURE__ */ m(a.Provider, { value: d, children: e });
+  }
+);
+g.displayName = "LoaderProvider";
+const v = () => {
+  const e = p(a);
+  return e || {
+    isLoadingComplete: !0,
+    setLoadingComplete: () => {
+    },
+    resetLoading: () => {
+    }
+  };
+};
+export {
+  a as LoaderContext,
+  g as LoaderProvider,
+  v as useLoaderContext
+};

package/wizard/src/features/form-runtime/hooks/useApiActions.js

@@ -0,0 +1,60 @@
+"use client";
+import { ApiCallService as c } from "../../api-integration/services/ApiCallService.js";
+import { useQuery as p, useMutation as f } from "@tanstack/react-query";
+function m(i) {
+  const { config: e, formData: t, onFieldUpdate: r, enabled: a = !0 } = i, u = e.fieldMappings ? Object.values(e.fieldMappings).reduce(
+    (o, l) => {
+      const n = String(l), s = n.startsWith("${") && n.endsWith("}") && n.slice(2, -1).split(".").pop() || n;
+      return o[s] = t[s], o;
+    },
+    {}
+  ) : {}, d = new c({ onFieldUpdate: r }).createQueryOptions(e, t);
+  return p({
+    ...d,
+    queryKey: ["api-action-get", e.url, e.method, u],
+    enabled: a && e.method === "GET",
+    refetchOnWindowFocus: !1,
+    refetchOnReconnect: !1
+  });
+}
+function g(i) {
+  const { config: e, formData: t, onFieldUpdate: r } = i, a = new c({ onFieldUpdate: r });
+  return f({
+    mutationKey: ["api-action-mutate", e.url, e.method],
+    mutationFn: async () => await a.executeApiCall(e, t),
+    retry: e.retryCount || 0
+  });
+}
+function A(i) {
+  const { config: e } = i, t = m({
+    ...i,
+    enabled: i.enabled && e.method === "GET"
+  }), r = g(i);
+  return e.method === "GET" ? {
+    data: t.data,
+    error: t.error,
+    isLoading: t.isLoading,
+    isSuccess: t.isSuccess,
+    isError: t.isError,
+    execute: () => {
+      t.refetch();
+    },
+    refetch: t.refetch
+  } : {
+    data: r.data,
+    error: r.error,
+    isLoading: r.isPending,
+    isSuccess: r.isSuccess,
+    isError: r.isError,
+    execute: () => {
+      r.mutate();
+    },
+    mutate: r.mutate,
+    reset: r.reset
+  };
+}
+export {
+  A as useApiAction,
+  m as useGetApiAction,
+  g as useMutateApiAction
+};

package/wizard/src/features/form-runtime/hooks/useComponentTriggers.js

@@ -0,0 +1,102 @@
+"use client";
+import { useFormMachine as M } from "../../state-management/machines/useFormMachine.js";
+import { useRef as T, useCallback as n } from "react";
+const S = ({
+  componentId: e,
+  initialValue: o,
+  onValueChange: l
+}) => {
+  const [, , f] = M(), {
+    evaluateComponentTriggers: a,
+    setComponentOriginalValue: i,
+    getComponentAlerts: h,
+    dismissComponentAlert: u,
+    hasComponentTriggers: A,
+    hasComponentActions: m,
+    getComponentTriggerState: F
+  } = f, C = T(!1), g = T(o);
+  o !== void 0 && !C.current && (i(e, o), g.current = o, C.current = !0);
+  const t = n(
+    (r, c) => {
+      console.log(
+        `🧪 [useComponentTriggers] evaluateTriggers called for ${e}:`,
+        {
+          eventType: r,
+          value: c,
+          evaluateComponentTriggers: !!a
+        }
+      ), a(e, r, c);
+    },
+    [e, a]
+  ), p = n(
+    (r, c = "api_populated") => {
+      i(e, r, c), g.current = r;
+    },
+    [e, i]
+  ), $ = h(e), b = n(
+    (r) => {
+      u(e, r);
+    },
+    [e, u]
+  ), s = A(e), B = m(e), O = F(e), R = n(
+    (r) => {
+      console.log(
+        `🧪 [useComponentTriggers] handleValueChange called for ${e}:`,
+        {
+          value: r,
+          oldValue: g.current,
+          hasTriggers: s,
+          onValueChange: !!l
+        }
+      ), g.current = r, l && l(r), s ? (console.log(
+        `🧪 [useComponentTriggers] About to call evaluateTriggers for ${e}`
+      ), t("valueChange", r)) : console.log(
+        `🧪 [useComponentTriggers] hasTriggers is false for ${e}`
+      );
+    },
+    [t, s, l, e]
+  ), V = n(() => {
+    s && t("focus", g.current);
+  }, [t, s]), d = n(() => {
+    s && t("blur", g.current);
+  }, [t, s]);
+  return {
+    evaluateTriggers: t,
+    setOriginalValue: p,
+    alerts: $,
+    dismissAlert: b,
+    hasTriggers: s,
+    hasActions: B,
+    triggerState: O,
+    handleValueChange: R,
+    handleFocus: V,
+    handleBlur: d
+  };
+}, x = (e, o) => {
+  const {
+    handleValueChange: l,
+    handleFocus: f,
+    handleBlur: a,
+    alerts: i,
+    dismissAlert: h,
+    setOriginalValue: u
+  } = S({
+    componentId: e,
+    initialValue: o
+  });
+  return {
+    // Event handlers to attach to form fields
+    onChange: l,
+    onFocus: f,
+    onBlur: a,
+    // Alert management
+    alerts: i,
+    dismissAlert: h,
+    // For setting original value after API population
+    setOriginalValue: u
+  };
+};
+export {
+  S as useComponentTriggers,
+  x as useFieldTriggerMonitor
+};

package/wizard/src/features/form-runtime/hooks/useComponentVisibility.js

@@ -0,0 +1,18 @@
+"use client";
+import { useMemo as s } from "react";
+import { useLoaderContext as n } from "../context/LoaderContext.js";
+import { getVisibilityDependencies as o, evaluateVisibility as m } from "../utils/visibilityUtils.js";
+const f = ({
+  visibilityConditions: e,
+  formData: r
+}) => {
+  const { isLoadingComplete: u } = n(), t = s(() => o(e), [e]);
+  return {
+    isVisible: s(() => e ? m(e, r) : !0, [e, r, t]),
+    dependencies: t,
+    isLoadingComplete: u
+  };
+};
+export {
+  f as useComponentVisibility
+};