impact-nova 2.5.4 → 2.5.6

package/dist/form-engine/types.d.ts

@@ -14,4 +14,21 @@ export type FieldVisibilityBase = {
     cascadingDependency?: FieldDependency[];
     isDisabled?: boolean;
     doNotIncludeInSubmit?: boolean;
+    fieldGroup?: string;
+};
+/** Step/group metadata provided via `IFormConfig.steps`. */
+export type FormStepConfig = {
+    groupId: string;
+    title?: string;
+    description?: string;
+    /** When true, all required fields in this step must be valid before proceeding. Default: true. */
+    validateBeforeNext?: boolean;
+};
+/** Resolved field group produced by `buildFieldGroups`. */
+export type FieldGroup = {
+    groupId: string;
+    title?: string;
+    description?: string;
+    fieldIds: string[];
+    validateBeforeNext: boolean;
 };

package/dist/form-react/Fields/RichTextField.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { FormFieldProps } from '../types/reactHookForm.types';
+export declare const RichTextField: FC<FormFieldProps>;

package/dist/form-react/Fields/RichTextField.js

@@ -0,0 +1,214 @@
+import { jsx as n, jsxs as u } from "react/jsx-runtime";
+import { useMemo as b, useCallback as T, useRef as v, useEffect as D } from "react";
+import { Controller as L } from "react-hook-form";
+import { LexicalComposer as O } from "@lexical/react/LexicalComposer";
+import { RichTextPlugin as M } from "@lexical/react/LexicalRichTextPlugin";
+import { ContentEditable as k } from "@lexical/react/LexicalContentEditable";
+import { HistoryPlugin as _ } from "@lexical/react/LexicalHistoryPlugin";
+import { OnChangePlugin as S } from "@lexical/react/LexicalOnChangePlugin";
+import { ListPlugin as y } from "@lexical/react/LexicalListPlugin";
+import { LinkPlugin as $ } from "@lexical/react/LexicalLinkPlugin";
+import { LexicalErrorBoundary as H } from "@lexical/react/LexicalErrorBoundary";
+import { useLexicalComposerContext as N } from "@lexical/react/LexicalComposerContext";
+import { $generateHtmlFromNodes as I, $generateNodesFromDOM as w } from "@lexical/html";
+import { ListNode as A, ListItemNode as B, INSERT_UNORDERED_LIST_COMMAND as P, INSERT_ORDERED_LIST_COMMAND as q } from "@lexical/list";
+import { LinkNode as U, $toggleLink as F } from "@lexical/link";
+import { HeadingNode as j, QuoteNode as Q, $createHeadingNode as z, $createQuoteNode as X } from "@lexical/rich-text";
+import { $getRoot as G, UNDO_COMMAND as J, REDO_COMMAND as K, FORMAT_TEXT_COMMAND as m, $getSelection as g, $isRangeSelection as f } from "lexical";
+import { $setBlocksType as x } from "@lexical/selection";
+const V = {
+  paragraph: "rt-paragraph",
+  heading: { h2: "rt-h2", h3: "rt-h3" },
+  text: {
+    bold: "rt-bold",
+    italic: "rt-italic",
+    underline: "rt-underline"
+  },
+  list: {
+    ul: "rt-ul",
+    ol: "rt-ol",
+    listitem: "rt-li"
+  },
+  link: "rt-link",
+  quote: "rt-quote"
+}, W = [
+  "undo",
+  "redo",
+  "bold",
+  "italic",
+  "underline",
+  "strikethrough",
+  "heading",
+  "quote",
+  "link",
+  "bulletedList",
+  "numberedList"
+], Y = [j, Q, A, B, U];
+function Z({ items: o }) {
+  const [e] = N(), i = b(() => new Set(o), [o]), r = (t, l, s, a) => i.has(l) ? /* @__PURE__ */ n(
+    "button",
+    {
+      type: "button",
+      className: "inline-flex h-7 w-7 items-center justify-center rounded text-xs hover:bg-muted",
+      title: a ?? t,
+      onMouseDown: (d) => {
+        d.preventDefault(), s();
+      },
+      children: t
+    },
+    l
+  ) : null;
+  return /* @__PURE__ */ u("div", { className: "flex flex-wrap items-center gap-0.5 border-b px-1 py-0.5", children: [
+    r("↩", "undo", () => e.dispatchCommand(J, void 0), "Undo"),
+    r("↪", "redo", () => e.dispatchCommand(K, void 0), "Redo"),
+    (i.has("undo") || i.has("redo")) && i.size > 2 && /* @__PURE__ */ n("span", { className: "mx-0.5 h-4 w-px bg-border" }),
+    r("B", "bold", () => e.dispatchCommand(m, "bold"), "Bold"),
+    r("I", "italic", () => e.dispatchCommand(m, "italic"), "Italic"),
+    r("U", "underline", () => e.dispatchCommand(m, "underline"), "Underline"),
+    r("S", "strikethrough", () => e.dispatchCommand(m, "strikethrough"), "Strikethrough"),
+    r("H", "heading", () => {
+      e.update(() => {
+        const t = g();
+        f(t) && x(t, () => z("h2"));
+      });
+    }, "Heading"),
+    r("❝", "quote", () => {
+      e.update(() => {
+        const t = g();
+        f(t) && x(t, () => X());
+      });
+    }, "Block quote"),
+    r("🔗", "link", () => {
+      const t = prompt("URL:");
+      t && e.update(() => {
+        F(t);
+      });
+    }, "Insert link"),
+    r("•", "bulletedList", () => e.dispatchCommand(P, void 0), "Bulleted list"),
+    r("1.", "numberedList", () => e.dispatchCommand(q, void 0), "Numbered list")
+  ] });
+}
+function ee({ html: o }) {
+  const [e] = N(), i = v(!1);
+  return D(() => {
+    i.current || !o || (i.current = !0, e.update(() => {
+      const t = new DOMParser().parseFromString(o, "text/html"), l = w(e, t), s = G();
+      s.clear(), s.append(...l);
+    }));
+  }, [e, o]), null;
+}
+const Ce = ({
+  field: o,
+  validationRules: e,
+  isDisabled: i,
+  formHelpers: r
+}) => {
+  const t = o.fieldType === "rich_text" ? o : null;
+  if (!t) return null;
+  const l = t.toolbar ?? W, s = t.minHeight ?? 150;
+  return /* @__PURE__ */ n(
+    L,
+    {
+      name: o.id,
+      control: r.form.control,
+      rules: e,
+      render: ({ field: a, fieldState: d }) => {
+        const c = !!d.error;
+        return /* @__PURE__ */ n(
+          te,
+          {
+            initialHtml: a.value ?? "",
+            onChange: a.onChange,
+            disabled: i,
+            toolbar: l,
+            minHeight: s,
+            label: o.label,
+            isRequired: o.isRequired,
+            helpText: o.helpText,
+            error: c ? d.error?.message : void 0,
+            fieldId: o.id
+          }
+        );
+      }
+    }
+  );
+};
+function te({
+  initialHtml: o,
+  onChange: e,
+  disabled: i,
+  toolbar: r,
+  minHeight: t,
+  label: l,
+  isRequired: s,
+  helpText: a,
+  error: d,
+  fieldId: c
+}) {
+  const C = b(
+    () => ({
+      namespace: `rich-text-${c}`,
+      nodes: Y,
+      theme: V,
+      editable: !i,
+      onError: (p) => console.error("[RichTextField]", p)
+    }),
+    // ponytail: intentionally only fieldId — LexicalComposer reads initialConfig once
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [c]
+  ), E = T(
+    (p, h) => {
+      h.read(() => {
+        const R = I(h);
+        e(R);
+      });
+    },
+    [e]
+  );
+  return /* @__PURE__ */ u("div", { children: [
+    l && /* @__PURE__ */ u("label", { className: "mb-2 block text-xs font-medium text-content-muted", children: [
+      l,
+      s && /* @__PURE__ */ n("span", { className: "ml-1 text-destructive", children: "*" })
+    ] }),
+    /* @__PURE__ */ n(
+      "div",
+      {
+        className: "overflow-hidden rounded-md border",
+        style: i ? { opacity: 0.5, pointerEvents: "none" } : void 0,
+        children: /* @__PURE__ */ u(O, { initialConfig: C, children: [
+          /* @__PURE__ */ n(Z, { items: r }),
+          /* @__PURE__ */ n(
+            M,
+            {
+              contentEditable: /* @__PURE__ */ n(
+                k,
+                {
+                  className: "outline-none px-3 py-2",
+                  style: { minHeight: t },
+                  "aria-placeholder": l ?? c,
+                  placeholder: /* @__PURE__ */ n("div", { className: "pointer-events-none absolute left-3 top-2 text-xs text-content-muted", children: "Start typing…" })
+                }
+              ),
+              ErrorBoundary: H
+            }
+          ),
+          /* @__PURE__ */ n(_, {}),
+          /* @__PURE__ */ n(y, {}),
+          /* @__PURE__ */ n($, {}),
+          /* @__PURE__ */ n(S, { onChange: E }),
+          o && /* @__PURE__ */ n(ee, { html: o })
+        ] })
+      }
+    ),
+    (d || a) && /* @__PURE__ */ n(
+      "p",
+      {
+        className: `mt-1 text-xs ${d ? "text-destructive" : "text-content-muted"}`,
+        children: d ?? a
+      }
+    )
+  ] });
+}
+export {
+  Ce as RichTextField
+};

package/dist/form-react/Fields/SelectField.js

@@ -1,38 +1,37 @@
 import { jsx as c } from "react/jsx-runtime";
-import { useState as M } from "react";
-import { Controller as f } from "react-hook-form";
-import { Select as x } from "../../components/forms/select/select.js";
-import { useSelectOptions as E } from "../hooks/useSelectOptions.js";
-import { getFieldTestId as R } from "../utils/fieldTestIds.js";
-import { isEmptyValue as T } from "../../form-engine/is-empty-value.js";
-const F = ({
+import { useState as A } from "react";
+import { Controller as M } from "react-hook-form";
+import { Select as f } from "../../components/forms/select/select.js";
+import { useSelectOptions as x } from "../hooks/useSelectOptions.js";
+import { getFieldTestId as E } from "../utils/fieldTestIds.js";
+import { isEmptyValue as R } from "../../form-engine/is-empty-value.js";
+const $ = ({
   field: e,
   validationRules: p,
   isDisabled: m,
-  formHelpers: l,
-  formConfig: u,
-  supportedValues: d
+  formHelpers: s,
+  supportedValues: u
 }) => {
-  const t = e.fieldType === "select" ? e : null, [S, s] = M(!1), h = l.form.control, b = d?.[e.id], { options: g, isLoading: O, error: y, refetch: C } = E({
+  const t = e.fieldType === "select" ? e : null, [d, n] = A(!1), S = s.form.control, h = u?.[e.id], { options: g, isLoading: b, error: y, refetch: O } = x({
     apiConfig: t?.apiConfig,
-    formHelpers: l,
-    formConfig: u,
+    formHelpers: s,
     initialOptions: t?.options,
     id: e.id,
-    isEnabled: S,
+    isEnabled: d,
     getSelectOptionsName: t?.getSelectOptionsName,
-    fieldSupportedValues: b
+    fieldSupportedValues: h,
+    cascadingDependency: e.cascadingDependency
   });
   return t ? /* @__PURE__ */ c(
-    f,
+    M,
     {
       name: e.id,
-      control: h,
+      control: S,
       rules: p,
-      render: ({ field: o, fieldState: n }) => {
-        const a = !!n.error, i = o.value, A = t?.isMultiSelect ? e.id : `${e.id}-${T(i) ? "empty" : "has-value"}`;
+      render: ({ field: o, fieldState: l }) => {
+        const a = !!l.error, i = o.value, C = t?.isMultiSelect ? e.id : `${e.id}-${R(i) ? "empty" : "has-value"}`;
         return /* @__PURE__ */ c(
-          x,
+          f,
           {
             id: e.id,
             label: e.label,
@@ -56,21 +55,21 @@ const F = ({
             isSelectAllEnabled: !t?.disableSelectAll,
             labelOrientation: t?.labelOrientation || "top",
             error: a,
-            helperText: a ? n.error?.message : e.helpText,
+            helperText: a ? l.error?.message : e.helpText,
             ignoreAccents: !0,
-            isLoading: O,
+            isLoading: b,
             fetchError: y,
-            onRefetch: C,
-            onMenuOpen: () => s(!0),
-            onMenuClose: () => s(!1),
-            "data-testid": R(e.id)
+            onRefetch: O,
+            onMenuOpen: () => n(!0),
+            onMenuClose: () => n(!1),
+            "data-testid": E(e.id)
           },
-          A
+          C
         );
       }
     }
   ) : null;
 };
 export {
-  F as SelectField
+  $ as SelectField
 };

package/dist/form-react/Fields/SliderRangeField.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { FormFieldProps } from '../types/reactHookForm.types';
+export declare const SliderRangeField: FC<FormFieldProps>;

package/dist/form-react/Fields/SliderRangeField.js

@@ -0,0 +1,69 @@
+import { jsx as t, jsxs as l } from "react/jsx-runtime";
+import { Controller as g } from "react-hook-form";
+import { Slider as v } from "../../components/forms/slider/slider.js";
+const y = {
+  opacity: 0.4,
+  pointerEvents: "none"
+}, N = "bg-muted", A = ({
+  field: e,
+  validationRules: x,
+  isDisabled: o,
+  formHelpers: h
+}) => {
+  const r = e.fieldType === "slider_range" ? e : null;
+  if (!r) return null;
+  const s = r.min ?? 0, c = r.max ?? 100, p = r.step ?? 1, m = r.showValue ?? !0;
+  return /* @__PURE__ */ t(
+    g,
+    {
+      name: e.id,
+      control: h.form.control,
+      rules: x,
+      render: ({ field: i, fieldState: u }) => {
+        const d = i.value, n = Array.isArray(d) ? d : [s], a = !!u.error;
+        return /* @__PURE__ */ l("div", { style: o ? y : void 0, children: [
+          e.label ? /* @__PURE__ */ l("label", { className: "mb-2 block text-xs font-medium text-content-muted", children: [
+            e.label,
+            e.isRequired && /* @__PURE__ */ t("span", { className: "ml-1 text-destructive", children: "*" })
+          ] }) : null,
+          /* @__PURE__ */ l("div", { className: "flex items-center gap-3", children: [
+            /* @__PURE__ */ t("span", { className: "min-w-[2rem] text-right text-xs tabular-nums text-content-muted", children: m ? n[0] : s }),
+            /* @__PURE__ */ t(
+              w,
+              {
+                "aria-label": e.label ?? e.id,
+                value: n,
+                min: s,
+                max: c,
+                step: p,
+                disabled: o,
+                onValueChange: (b) => {
+                  i.onChange(b);
+                }
+              }
+            ),
+            /* @__PURE__ */ t("span", { className: "min-w-[2rem] text-xs tabular-nums text-content-muted", children: m && n.length > 1 ? n[n.length - 1] : c })
+          ] }),
+          (a || e.helpText) && /* @__PURE__ */ t(
+            "p",
+            {
+              className: `mt-1 text-xs ${a ? "text-destructive" : "text-content-muted"}`,
+              children: a ? u.error?.message : e.helpText
+            }
+          )
+        ] });
+      }
+    }
+  );
+}, w = (e) => /* @__PURE__ */ l("div", { className: "relative w-full isolate", children: [
+  /* @__PURE__ */ t(
+    "div",
+    {
+      className: `absolute left-0 right-0 top-1/2 h-1.5 -translate-y-1/2 rounded-full ${N}`
+    }
+  ),
+  /* @__PURE__ */ t(v, { ...e })
+] });
+export {
+  A as SliderRangeField
+};