@digiform/wizard 0.2.10 → 0.2.16

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

@@ -0,0 +1,138 @@
+"use client";
+/* empty css                               */
+import { isTemplateStep as d } from "../../../../../ui/src/lib/types/guards.js";
+class u {
+  schemaBuilder;
+  constructor(t) {
+    this.schemaBuilder = t;
+  }
+  /**
+   * Validates a single field
+   */
+  async validateField(t, i) {
+    try {
+      const e = await i.parseAsync(t);
+      return {
+        isValid: !0,
+        errors: [],
+        value: e
+      };
+    } catch (e) {
+      let r = [];
+      return e && typeof e == "object" && "errors" in e ? r = e.errors.map((a) => a.message) : r = ["Validation failed"], {
+        isValid: !1,
+        errors: r,
+        value: t
+      };
+    }
+  }
+  /**
+   * Validates a single field synchronously
+   */
+  validateFieldSync(t, i) {
+    let e = t;
+    t == null && (e = ""), console.log("🔍 [ValidationExecutor] validateFieldSync input:", {
+      originalValue: t,
+      normalizedValue: e,
+      valueType: typeof t,
+      normalizedValueType: typeof e,
+      valueLength: typeof e == "string" ? e.length : "N/A",
+      schema: i._def
+    });
+    try {
+      const r = i.parse(e);
+      return console.log("🔍 [ValidationExecutor] validateFieldSync SUCCESS:", {
+        value: t,
+        result: r,
+        isValid: !0
+      }), {
+        isValid: !0,
+        errors: [],
+        value: r
+      };
+    } catch (r) {
+      console.log("🔍 [ValidationExecutor] validateFieldSync ERROR:", {
+        value: t,
+        error: r,
+        errorType: typeof r
+      });
+      let s = [];
+      if (r && typeof r == "object" && "errors" in r) {
+        const a = r;
+        s = a.errors.map((o) => o.message), console.log("🔍 [ValidationExecutor] DETAILED Zod errors:", {
+          fullZodError: a,
+          individualErrors: a.errors.map((o) => ({
+            message: o.message,
+            path: o.path,
+            code: o.code,
+            fullError: o
+          })),
+          inputValue: t,
+          inputType: typeof t,
+          schemaType: i._def?.typeName || "unknown"
+        });
+      } else
+        s = ["Validation failed"];
+      return {
+        isValid: !1,
+        errors: s,
+        value: e
+      };
+    }
+  }
+  /**
+   * Validates a step
+   */
+  async validateStep(t, i) {
+    try {
+      return await i.parseAsync(t), {
+        isValid: !0,
+        fieldErrors: {},
+        generalErrors: []
+      };
+    } catch (e) {
+      const r = {};
+      let s = [];
+      if (e && typeof e == "object" && "errors" in e) {
+        const a = e;
+        for (const o of a.errors)
+          if (o.path.length > 0) {
+            const l = o.path[0].toString();
+            r[l] || (r[l] = []), r[l].push(o.message);
+          } else
+            s.push(o.message);
+      } else
+        s = ["Step validation failed"];
+      return {
+        isValid: !1,
+        fieldErrors: r,
+        generalErrors: s
+      };
+    }
+  }
+  /**
+   * Validates a form
+   */
+  async validateForm(t, i) {
+    const e = {}, r = [];
+    let s = !0;
+    for (const a of t.steps) {
+      if (d(a)) {
+        r.push(
+          `Template step '${a.id}' needs to be resolved before validation`
+        ), s = !1;
+        continue;
+      }
+      const o = a, l = this.schemaBuilder.createStepSchema(o), n = await this.validateStep(i, l);
+      n.isValid || (s = !1, Object.assign(e, n.fieldErrors), r.push(...n.generalErrors));
+    }
+    return {
+      isValid: s,
+      fieldErrors: e,
+      generalErrors: r
+    };
+  }
+}
+export {
+  u as ValidationExecutor
+};

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

@@ -0,0 +1,17 @@
+"use client";
+import { ValidationEngine as a, defaultValidationEngine as r } from "./ValidationEngine.js";
+function c(e, n = "withLabel") {
+  return new a({ messageStyle: n }).getComponentSchema(e);
+}
+function u(e, n, t = "withLabel") {
+  const i = new a({ messageStyle: t }).validateField(e, n);
+  return i.isValid ? void 0 : i.errors[0];
+}
+function d(e, n) {
+  return r.validateField(e, n).errors;
+}
+export {
+  c as createTanStackSchema,
+  u as validateWithTanStack,
+  d as validateWithTanStackReturnArray
+};

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

@@ -0,0 +1,74 @@
+"use client";
+import { ValidationEngine as c } from "./ValidationEngine.js";
+const s = new c();
+async function d(t, e) {
+  const n = await s.validateFieldDebounced(
+    t,
+    e
+  );
+  return n.isValid ? void 0 : n.errors[0];
+}
+async function l(t, e) {
+  return (await s.validateFieldDebounced(
+    t,
+    e
+  )).errors;
+}
+function a(t) {
+  return "sections" in t && Array.isArray(t.sections);
+}
+function f(t, e) {
+  for (const n of t.steps)
+    if (a(n))
+      for (const i of n.sections || []) {
+        const o = (i.components || []).find(
+          (r) => r.id === e
+        );
+        if (o) return o;
+      }
+}
+function p(t, e) {
+  const n = t.steps.find((o) => o.id === e);
+  if (!n || !a(n)) return [];
+  const i = [];
+  return n.sections?.forEach((o) => {
+    o.components?.forEach((r) => {
+      i.push(r);
+    });
+  }), i;
+}
+function m(t) {
+  const e = [];
+  return t.steps.forEach((n) => {
+    a(n) && n.sections?.forEach((i) => {
+      i.components?.forEach((o) => {
+        e.push(o);
+      });
+    });
+  }), e;
+}
+async function v(t, e, n) {
+  const i = t.steps.find((r) => r.id === e);
+  return !i || !a(i) ? {} : (await s.validateStep(i, n)).fieldErrors;
+}
+async function y(t, e, n) {
+  const i = t.steps.find((r) => r.id === e);
+  return !i || !a(i) ? !0 : (await s.validateStep(i, n)).isValid;
+}
+async function E(t, e) {
+  return (await s.validateForm(t, e)).fieldErrors;
+}
+async function F(t, e) {
+  return (await s.validateForm(t, e)).isValid;
+}
+export {
+  f as findComponentById,
+  m as getAllComponents,
+  p as getStepComponents,
+  F as isFormValid,
+  y as isStepValid,
+  d as validateField,
+  l as validateFieldReturnArray,
+  E as validateForm,
+  v as validateStep
+};

package/wizard/src/renderer/wizardRenderer.js

@@ -0,0 +1,123 @@
+"use client";
+import { jsx as r, jsxs as p } from "react/jsx-runtime";
+/* empty css                         */
+import { Alert as c, AlertDescription as u } from "../../../ui/src/components/alert/alert.js";
+import { Button as h } from "../../../ui/src/components/button/button.js";
+import { Checkbox as y } from "../../../ui/src/components/checkbox/checkbox.js";
+import { Input as b } from "../../../ui/src/components/input/input.js";
+import { RadioGroup as f, RadioGroupItem as m } from "../../../ui/src/components/radio-group/radio-group.js";
+import { Select as g, SelectTrigger as v, SelectValue as x, SelectContent as B, SelectItem as A } from "../../../ui/src/components/select/select.js";
+import { Textarea as S } from "../../../ui/src/components/textarea/textarea.js";
+import { ProgressLoaderBar as k } from "../../../ui/src/components/ProgressLoaderBar/ProgressLoaderBar.js";
+const M = ({
+  component: n,
+  value: o,
+  onChange: d,
+  isFormView: l
+}) => {
+  const e = n.properties ?? {};
+  switch (n.type) {
+    case "text":
+    case "email":
+    case "tel":
+    case "number":
+    case "date":
+      return /* @__PURE__ */ r(
+        b,
+        {
+          type: n.type,
+          value: typeof o == "string" ? o : "",
+          disabled: !!e.disabled,
+          readOnly: !!e.readOnly || !l,
+          placeholder: typeof e.placeholder == "string" ? e.placeholder : void 0,
+          onChange: l ? (a) => d(a.target.value) : void 0
+        }
+      );
+    case "textarea":
+      return /* @__PURE__ */ r(
+        S,
+        {
+          value: typeof o == "string" ? o : "",
+          disabled: !!e.disabled,
+          readOnly: !!e.readOnly || !l,
+          placeholder: typeof e.placeholder == "string" ? e.placeholder : void 0,
+          onChange: l ? (a) => d(a.target.value) : void 0
+        }
+      );
+    case "checkbox":
+      return /* @__PURE__ */ r(
+        y,
+        {
+          checked: !!o,
+          disabled: !!e.disabled,
+          onCheckedChange: l ? (a) => d(a === !0) : void 0
+        }
+      );
+    case "radioGroup": {
+      const a = Array.isArray(e.options) ? e.options : [];
+      return /* @__PURE__ */ r(
+        f,
+        {
+          value: typeof o == "string" ? o : "",
+          onValueChange: l ? (t) => d(t) : void 0,
+          disabled: !!e.disabled,
+          children: a.map((t) => /* @__PURE__ */ r(m, { value: t.value, children: t.label }, t.value))
+        }
+      );
+    }
+    case "dropdown": {
+      const a = Array.isArray(e.options) ? e.options : [];
+      return /* @__PURE__ */ p(
+        g,
+        {
+          value: typeof o == "string" ? o : "",
+          onValueChange: l ? (t) => d(t) : void 0,
+          disabled: !!e.disabled,
+          children: [
+            /* @__PURE__ */ r(v, { children: /* @__PURE__ */ r(
+              x,
+              {
+                placeholder: typeof e.placeholder == "string" ? e.placeholder : ""
+              }
+            ) }),
+            /* @__PURE__ */ r(B, { children: a.map((t) => /* @__PURE__ */ r(A, { value: t.value, children: t.label }, t.value)) })
+          ]
+        }
+      );
+    }
+    case "button":
+      return /* @__PURE__ */ r(
+        h,
+        {
+          type: "button",
+          disabled: !!e.disabled,
+          onClick: l ? () => d(null) : void 0,
+          children: typeof e.label == "string" ? e.label : "Submit"
+        }
+      );
+    case "heading": {
+      const a = typeof e.level == "number" ? e.level : void 0, t = a !== void 0 ? Math.min(6, Math.max(1, a)) : 2, i = typeof e.text == "string" ? e.text : "", s = `h${t}`;
+      return /* @__PURE__ */ r(s, { children: i });
+    }
+    case "paragraph":
+      return /* @__PURE__ */ r("p", { children: typeof e.text == "string" ? e.text : "" });
+    case "alert":
+      return /* @__PURE__ */ r(c, { variant: "default", children: /* @__PURE__ */ r(u, { children: typeof e.message == "string" ? e.message : "" }) });
+    case "progress-loader":
+      return /* @__PURE__ */ r(
+        k,
+        {
+          mode: typeof e.mode == "string" ? e.mode : "indeterminate",
+          status: "loading",
+          label: typeof e.label == "string" ? e.label : void 0
+        }
+      );
+    default:
+      return console.warn(
+        `[wizardRenderer] Unsupported component type: ${n.type}`
+      ), null;
+  }
+};
+export {
+  M as wizardDefaultRenderer
+};

package/README.md

@@ -1,147 +0,0 @@
-# @digiform/wizard
-
-[![npm version](https://img.shields.io/npm/v/@digiform/wizard.svg)](https://www.npmjs.com/package/@digiform/wizard)
-[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
-
-React component for rendering configurable multi-step forms from a JSON config. Zero database dependencies.
-
----
-
-## Installation
-
-```bash
-npm install @digiform/wizard
-```
-
-> Requires React 18+, XState 5+, TanStack Form 1+, Zod 3+, and Radix UI components as peer dependencies. See `peerDependencies` in package.json for exact versions.
-
----
-
-## CSS Import
-
-> **Required:** You must import the wizard stylesheet before rendering any wizard component.
-
-```ts
-import '@digiform/wizard/styles';
-```
-
-Add this import once at your app entry point before rendering any wizard.
-
----
-
-## Quick Start
-
-```tsx
-import { FormWizard } from '@digiform/wizard';
-import '@digiform/wizard/styles';
-
-const config = { /* your FormWizardConfig */ };
-
-export function MyForm() {
-  return (
-    <FormWizard
-      config={config}
-      onSubmit={(data) => console.log(data)}
-    />
-  );
-}
-```
-
----
-
-## Framework Setup
-
-### Vite
-
-1. **Install** the package (see [Installation](#installation) above).
-
-2. **Import styles** in `src/main.tsx` (or `src/index.tsx`) before `ReactDOM.createRoot`:
-
-   ```tsx
-   // src/main.tsx
-   import React from 'react';
-   import ReactDOM from 'react-dom/client';
-   import '@digiform/wizard/styles'; // must come before App
-   import App from './App';
-
-   ReactDOM.createRoot(document.getElementById('root')!).render(
-     <React.StrictMode>
-       <App />
-     </React.StrictMode>
-   );
-   ```
-
-3. **Use `<FormWizard>`** in any component — no `vite.config.ts` changes required.
-
-   ```tsx
-   // src/components/MyForm.tsx
-   import { FormWizard } from '@digiform/wizard';
-   import type { FormWizardConfig } from '@digiform/wizard';
-
-   const config: FormWizardConfig = {
-     // your form configuration
-   };
-
-   export function MyForm() {
-     return <FormWizard config={config} onSubmit={(data) => console.log(data)} />;
-   }
-   ```
-
----
-
-### Next.js
-
-1. **Install** the package (see [Installation](#installation) above).
-
-2. **Import styles** in `app/layout.tsx` (App Router) or `pages/_app.tsx` (Pages Router):
-
-   ```tsx
-   // app/layout.tsx — App Router
-   import '@digiform/wizard/styles';
-
-   export default function RootLayout({ children }: { children: React.ReactNode }) {
-     return (
-       <html lang="en">
-         <body>{children}</body>
-       </html>
-     );
-   }
-   ```
-
-   ```tsx
-   // pages/_app.tsx — Pages Router
-   import '@digiform/wizard/styles';
-   import type { AppProps } from 'next/app';
-
-   export default function App({ Component, pageProps }: AppProps) {
-     return <Component {...pageProps} />;
-   }
-   ```
-
-3. **Mark the wrapping component with `'use client'`** — FormWizard is a client component.
-
-4. Create a form page with the `'use client'` directive:
-
-   ```tsx
-   // app/forms/page.tsx
-   'use client';
-
-   import { FormWizard } from '@digiform/wizard';
-   import type { FormWizardConfig } from '@digiform/wizard';
-
-   const config: FormWizardConfig = {
-     // your form configuration
-   };
-
-   export default function FormsPage() {
-     return <FormWizard config={config} onSubmit={(data) => console.log(data)} />;
-   }
-   ```
-
-5. No `next.config.js` changes are required for CSS.
-
----
-
-## Related
-
-Use [@digiform/builder](https://www.npmjs.com/package/@digiform/builder) to visually create and edit form configs.