@secmia/openui-flow 4.0.0 → 4.1.0

package/dist/index.mjs

@@ -248,10 +248,78 @@ function clearPersistedState(persistence) {
   }
   storage.removeItem(persistence.key);
 }
-async function assertValid(result) {
-  const message = await result;
-  if (typeof message === "string" && message.trim().length > 0) {
-    throw new Error(message);
+var FlowValidationError = class extends Error {
+  constructor(message, fieldErrors) {
+    super(message);
+    this.name = "FlowValidationError";
+    this.fieldErrors = fieldErrors;
+  }
+};
+function toValidationError(issue, fallbackField) {
+  const field = issue.field ?? fallbackField;
+  if (field) {
+    return new FlowValidationError(issue.message, { [field]: issue.message });
+  }
+  return new FlowValidationError(issue.message, {});
+}
+function normalizeSchemaIssues(error, fallbackField) {
+  const fieldErrors = {};
+  const issues = error?.issues ?? [];
+  for (const issue of issues) {
+    const path = issue.path?.length ? issue.path.map(String).join(".") : fallbackField;
+    const message = issue.message?.trim() || error?.message || "Validation failed.";
+    if (path && !fieldErrors[path]) {
+      fieldErrors[path] = message;
+    }
+  }
+  if (Object.keys(fieldErrors).length === 0 && fallbackField) {
+    fieldErrors[fallbackField] = error?.message || "Validation failed.";
+  }
+  return fieldErrors;
+}
+async function assertValid(result, fallbackField) {
+  const outcome = await result;
+  if (!outcome) {
+    return;
+  }
+  if (typeof outcome === "string") {
+    const message = outcome.trim();
+    if (message.length > 0) {
+      throw new FlowValidationError(message, fallbackField ? { [fallbackField]: message } : {});
+    }
+    return;
+  }
+  if (outcome.message.trim().length > 0) {
+    throw toValidationError(outcome, fallbackField);
+  }
+}
+async function assertSchema(schema, value, fallbackField) {
+  if (!schema) {
+    return;
+  }
+  if (schema.safeParse) {
+    const result = schema.safeParse(value);
+    if (!result.success) {
+      const fieldErrors = normalizeSchemaIssues(result.error, fallbackField);
+      throw new FlowValidationError(result.error?.message || "Validation failed.", fieldErrors);
+    }
+    return;
+  }
+  if (!schema.parse) {
+    return;
+  }
+  try {
+    schema.parse(value);
+  } catch (error) {
+    const normalized = error;
+    const fieldErrors = normalizeSchemaIssues(
+      {
+        message: normalized?.message,
+        issues: normalized?.issues
+      },
+      fallbackField
+    );
+    throw new FlowValidationError(normalized?.message || "Validation failed.", fieldErrors);
   }
 }
 function resolveStyles(unstyled, styleOverrides) {
@@ -268,26 +336,20 @@ function resolveStyles(unstyled, styleOverrides) {
   }
   return resolved;
 }
-function AdaptiveFlow({
+function useAdaptiveFlow({
   adapter,
   requirements,
   requirementGraph,
   requirementGraphConfig,
   requirementResolvers,
   completeStep,
-  stepTitles,
-  renderStep,
-  stepRegistry,
   initialValue,
   onComplete,
   onError,
   onStepTransition,
-  className,
-  classNames,
-  styles,
-  unstyled = false,
   persistence,
-  validators
+  validators,
+  schemas
 }) {
   const normalizedRequirements = React.useMemo(
     () => requirements ?? defaultRequirements,
@@ -321,7 +383,6 @@ function AdaptiveFlow({
       requirementGraphConfig?.dependencies
     ]
   );
-  const uiStyles = React.useMemo(() => resolveStyles(unstyled, styles), [unstyled, styles]);
   const [context, setContext] = React.useState(() => withDefaults(initialValue));
   const [step, setStep] = React.useState(normalizedCompleteStep);
   const [missingRequirements, setMissingRequirements] = React.useState([]);
@@ -329,6 +390,7 @@ function AdaptiveFlow({
   const [busy, setBusy] = React.useState(false);
   const [message, setMessage] = React.useState(null);
   const [errorMessage, setErrorMessage] = React.useState(null);
+  const [fieldErrors, setFieldErrors] = React.useState({});
   const [oauthPendingProvider, setOauthPendingProvider] = React.useState(null);
   const [persistenceHydrated, setPersistenceHydrated] = React.useState(!persistence);
   const attemptByStepRef = React.useRef({});
@@ -356,14 +418,14 @@ function AdaptiveFlow({
     let isCancelled = false;
     const currentEvaluation = ++evaluationRef.current;
     void (async () => {
-      const [missing2, next] = await Promise.all([
+      const [missing, next] = await Promise.all([
         getMissingRequirements(context, graph),
         evaluateNextStep(context, graph, normalizedCompleteStep)
       ]);
       if (isCancelled || currentEvaluation !== evaluationRef.current) {
         return;
       }
-      setMissingRequirements(missing2);
+      setMissingRequirements(missing);
       setStep(next);
       const from = previousStepRef.current;
       const attemptKey = String(next);
@@ -383,6 +445,7 @@ function AdaptiveFlow({
         return;
       }
       const normalized = toError(error);
+      setFieldErrors({});
       setErrorMessage(normalized.message);
       onError?.(normalized);
     });
@@ -417,12 +480,21 @@ function AdaptiveFlow({
     async (job) => {
       setBusy(true);
       setErrorMessage(null);
+      setFieldErrors({});
       try {
         await job();
       } catch (error) {
-        const normalized = toError(error);
-        setErrorMessage(normalized.message);
-        onError?.(normalized);
+        if (error instanceof FlowValidationError) {
+          setFieldErrors(error.fieldErrors);
+          if (Object.keys(error.fieldErrors).length === 0) {
+            setErrorMessage(error.message);
+            onError?.(error);
+          }
+        } else {
+          const normalized = toError(error);
+          setErrorMessage(normalized.message);
+          onError?.(normalized);
+        }
       } finally {
         setBusy(false);
       }
@@ -458,8 +530,9 @@ function AdaptiveFlow({
       return;
     }
     void run(async () => {
+      await assertSchema(schemas?.email, email, "email");
       if (validators?.email) {
-        await assertValid(validators.email(email, { context }));
+        await assertValid(validators.email(email, { context }), "email");
       }
       const identity = await adapter?.lookupByEmail?.(email) ?? null;
       patchBaseContext({
@@ -491,8 +564,9 @@ function AdaptiveFlow({
       return;
     }
     void run(async () => {
+      await assertSchema(schemas?.otp, code, "otp");
       if (validators?.otp) {
-        await assertValid(validators.otp(code, { context, email: context.email }));
+        await assertValid(validators.otp(code, { context, email: context.email }), "otp");
       }
       if (adapter?.verifyOtp) {
         await adapter.verifyOtp(context.email, code);
@@ -506,8 +580,12 @@ function AdaptiveFlow({
       return;
     }
     void run(async () => {
+      await assertSchema(schemas?.password, password, "password");
       if (validators?.password) {
-        await assertValid(validators.password(password, { context, hasPassword: context.hasPassword }));
+        await assertValid(
+          validators.password(password, { context, hasPassword: context.hasPassword }),
+          "password"
+        );
       }
       if (context.hasPassword) {
         if (adapter?.signInWithPassword) {
@@ -524,8 +602,9 @@ function AdaptiveFlow({
   };
   const handleProfile = (profile) => {
     void run(async () => {
+      await assertSchema(schemas?.profile, profile, "profile");
       if (validators?.profile) {
-        await assertValid(validators.profile(profile, { context }));
+        await assertValid(validators.profile(profile, { context }), "profile");
       }
       const next = mergeContext(context, {
         profile: {
@@ -543,8 +622,9 @@ function AdaptiveFlow({
   };
   const handleTos = () => {
     void run(async () => {
+      await assertSchema(schemas?.tos, true, "tos");
       if (validators?.tos) {
-        await assertValid(validators.tos(true, { context }));
+        await assertValid(validators.tos(true, { context }), "tos");
       }
       const next = mergeContext(context, { agreedToTos: true });
       if (adapter?.acceptTos) {
@@ -565,7 +645,84 @@ function AdaptiveFlow({
       await startOAuth(provider, context);
     });
   };
-  const missing = missingRequirements;
+  return {
+    context,
+    step,
+    completeStep: normalizedCompleteStep,
+    requirements: normalizedRequirements,
+    missingRequirements,
+    transitions,
+    busy,
+    message,
+    errorMessage,
+    fieldErrors,
+    setContextPatch: patchContext,
+    run,
+    handleEmail,
+    handleOtp,
+    handlePassword,
+    handleProfile,
+    handleTos,
+    handleOAuth
+  };
+}
+function AdaptiveFlow({
+  adapter,
+  requirements,
+  requirementGraph,
+  requirementGraphConfig,
+  requirementResolvers,
+  completeStep,
+  stepTitles,
+  renderStep,
+  stepRegistry,
+  initialValue,
+  onComplete,
+  onError,
+  onStepTransition,
+  className,
+  classNames,
+  styles,
+  unstyled = false,
+  persistence,
+  validators,
+  schemas
+}) {
+  const uiStyles = React.useMemo(() => resolveStyles(unstyled, styles), [unstyled, styles]);
+  const {
+    context,
+    step,
+    completeStep: normalizedCompleteStep,
+    requirements: normalizedRequirements,
+    missingRequirements: missing,
+    transitions,
+    busy,
+    message,
+    errorMessage,
+    fieldErrors,
+    setContextPatch: patchContext,
+    run,
+    handleEmail,
+    handleOtp,
+    handlePassword,
+    handleProfile,
+    handleTos,
+    handleOAuth
+  } = useAdaptiveFlow({
+    adapter,
+    requirements,
+    requirementGraph,
+    requirementGraphConfig,
+    requirementResolvers,
+    completeStep,
+    initialValue,
+    onComplete,
+    onError,
+    onStepTransition,
+    persistence,
+    validators,
+    schemas
+  });
   const needsJobTitle = normalizedRequirements.includes("has_job_title");
   const stepLabel = stepTitles?.[step] ?? defaultStepTitle[step] ?? step;
   const defaultView = /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -574,6 +731,7 @@ function AdaptiveFlow({
       {
         onSubmit: handleEmail,
         disabled: busy,
+        error: fieldErrors.email,
         styles: uiStyles,
         classNames
       }
@@ -584,6 +742,7 @@ function AdaptiveFlow({
         onSubmit: handleOtp,
         email: context.email ?? "your email",
         disabled: busy,
+        error: fieldErrors.otp,
         styles: uiStyles,
         classNames
       }
@@ -594,6 +753,7 @@ function AdaptiveFlow({
         onSubmit: handlePassword,
         disabled: busy,
         hasPassword: context.hasPassword,
+        error: fieldErrors.password,
         styles: uiStyles,
         classNames
       }
@@ -605,6 +765,7 @@ function AdaptiveFlow({
         requireJobTitle: needsJobTitle,
         onSubmit: handleProfile,
         disabled: busy,
+        errors: fieldErrors,
         styles: uiStyles,
         classNames
       }
@@ -614,6 +775,7 @@ function AdaptiveFlow({
       {
         onSubmit: handleTos,
         disabled: busy,
+        error: fieldErrors.tos,
         styles: uiStyles,
         classNames
       }
@@ -631,6 +793,7 @@ function AdaptiveFlow({
     busy,
     message,
     errorMessage,
+    fieldErrors,
     missingRequirements: missing,
     requirements: normalizedRequirements,
     defaultView,
@@ -645,6 +808,7 @@ function AdaptiveFlow({
     busy,
     message,
     errorMessage,
+    fieldErrors,
     missingRequirements: missing,
     requirements: normalizedRequirements,
     setContextPatch: patchContext,
@@ -697,8 +861,15 @@ function AdaptiveFlow({
     ] })
   ] });
 }
-function EmailBlock({ onSubmit, disabled, styles, classNames }) {
+function EmailBlock({
+  onSubmit,
+  disabled,
+  error,
+  styles,
+  classNames
+}) {
   const [email, setEmail] = React.useState("");
+  const errorId = "adaptive-flow-email-error";
   return /* @__PURE__ */ jsxs(
     "form",
     {
@@ -719,10 +890,13 @@ function EmailBlock({ onSubmit, disabled, styles, classNames }) {
             placeholder: "Enter your email",
             value: email,
             onChange: (event) => setEmail(event.target.value),
+            "aria-invalid": Boolean(error),
+            "aria-describedby": error ? errorId : void 0,
             required: true
           }
         ),
-        /* @__PURE__ */ jsx("button", { className: classNames?.button, style: styles.button, disabled, type: "submit", children: "Continue" })
+        /* @__PURE__ */ jsx("button", { className: classNames?.button, style: styles.button, disabled, type: "submit", children: "Continue" }),
+        error ? /* @__PURE__ */ jsx("div", { id: errorId, className: classNames?.error, style: styles.error, children: error }) : null
       ]
     }
   );
@@ -731,10 +905,12 @@ function OtpBlock({
   onSubmit,
   disabled,
   email,
+  error,
   styles,
   classNames
 }) {
   const [code, setCode] = React.useState("");
+  const errorId = "adaptive-flow-otp-error";
   return /* @__PURE__ */ jsxs(
     "form",
     {
@@ -760,6 +936,8 @@ function OtpBlock({
               placeholder: "Enter 6-digit code",
               value: code,
               onChange: (event) => setCode(event.target.value.replace(/\D/g, "").slice(0, 6)),
+              "aria-invalid": Boolean(error),
+              "aria-describedby": error ? errorId : void 0,
               required: true,
               maxLength: 6,
               pattern: "[0-9]{6}"
@@ -774,7 +952,8 @@ function OtpBlock({
               type: "submit",
               children: "Verify"
             }
-          )
+          ),
+          error ? /* @__PURE__ */ jsx("div", { id: errorId, className: classNames?.error, style: styles.error, children: error }) : null
         ] })
       ]
     }
@@ -784,10 +963,12 @@ function PasswordBlock({
   onSubmit,
   disabled,
   hasPassword,
+  error,
   styles,
   classNames
 }) {
   const [password, setPassword] = React.useState("");
+  const errorId = "adaptive-flow-password-error";
   return /* @__PURE__ */ jsxs(
     "form",
     {
@@ -808,11 +989,14 @@ function PasswordBlock({
             placeholder: hasPassword ? "Enter your password" : "Create a password",
             value: password,
             onChange: (event) => setPassword(event.target.value),
+            "aria-invalid": Boolean(error),
+            "aria-describedby": error ? errorId : void 0,
             required: true,
             minLength: 8
           }
         ),
-        /* @__PURE__ */ jsx("button", { className: classNames?.button, style: styles.button, disabled, type: "submit", children: "Continue" })
+        /* @__PURE__ */ jsx("button", { className: classNames?.button, style: styles.button, disabled, type: "submit", children: "Continue" }),
+        error ? /* @__PURE__ */ jsx("div", { id: errorId, className: classNames?.error, style: styles.error, children: error }) : null
       ]
     }
   );
@@ -822,12 +1006,17 @@ function ProfileBlock({
   disabled,
   defaultValue,
   requireJobTitle,
+  errors,
   styles,
   classNames
 }) {
   const [firstName, setFirstName] = React.useState(defaultValue.firstName ?? "");
   const [lastName, setLastName] = React.useState(defaultValue.lastName ?? "");
   const [jobTitle, setJobTitle] = React.useState(defaultValue.jobTitle ?? "");
+  const firstNameError = errors?.firstName ?? errors?.["profile.firstName"];
+  const lastNameError = errors?.lastName ?? errors?.["profile.lastName"];
+  const jobTitleError = errors?.jobTitle ?? errors?.["profile.jobTitle"];
+  const profileError = errors?.profile;
   return /* @__PURE__ */ jsxs(
     "form",
     {
@@ -853,6 +1042,7 @@ function ProfileBlock({
               placeholder: "First name",
               value: firstName,
               onChange: (event) => setFirstName(event.target.value),
+              "aria-invalid": Boolean(firstNameError),
               required: true
             }
           ),
@@ -866,23 +1056,31 @@ function ProfileBlock({
               placeholder: "Last name",
               value: lastName,
               onChange: (event) => setLastName(event.target.value),
+              "aria-invalid": Boolean(lastNameError),
               required: true
             }
           )
         ] }),
-        requireJobTitle ? /* @__PURE__ */ jsx(
-          "input",
-          {
-            className: classNames?.input,
-            style: styles.input,
-            type: "text",
-            autoComplete: "organization-title",
-            placeholder: "Job title",
-            value: jobTitle,
-            onChange: (event) => setJobTitle(event.target.value),
-            required: true
-          }
-        ) : null,
+        firstNameError ? /* @__PURE__ */ jsx("div", { className: classNames?.error, style: styles.error, children: firstNameError }) : null,
+        lastNameError ? /* @__PURE__ */ jsx("div", { className: classNames?.error, style: styles.error, children: lastNameError }) : null,
+        requireJobTitle ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              className: classNames?.input,
+              style: styles.input,
+              type: "text",
+              autoComplete: "organization-title",
+              placeholder: "Job title",
+              value: jobTitle,
+              onChange: (event) => setJobTitle(event.target.value),
+              "aria-invalid": Boolean(jobTitleError),
+              required: true
+            }
+          ),
+          jobTitleError ? /* @__PURE__ */ jsx("div", { className: classNames?.error, style: styles.error, children: jobTitleError }) : null
+        ] }) : null,
+        profileError ? /* @__PURE__ */ jsx("div", { className: classNames?.error, style: styles.error, children: profileError }) : null,
         /* @__PURE__ */ jsx("button", { className: classNames?.button, style: styles.button, disabled, type: "submit", children: "Continue" })
       ]
     }
@@ -891,6 +1089,7 @@ function ProfileBlock({
 function TosBlock({
   onSubmit,
   disabled,
+  error,
   styles,
   classNames
 }) {
@@ -908,9 +1107,18 @@ function TosBlock({
       },
       children: [
         /* @__PURE__ */ jsxs("label", { className: classNames?.checkboxRow, style: styles.checkboxRow, children: [
-          /* @__PURE__ */ jsx("input", { type: "checkbox", checked, onChange: (event) => setChecked(event.target.checked) }),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "checkbox",
+              checked,
+              onChange: (event) => setChecked(event.target.checked),
+              "aria-invalid": Boolean(error)
+            }
+          ),
           /* @__PURE__ */ jsx("span", { children: "I agree to the Terms of Service and Privacy Policy." })
         ] }),
+        error ? /* @__PURE__ */ jsx("div", { className: classNames?.error, style: styles.error, children: error }) : null,
         /* @__PURE__ */ jsx(
           "button",
           {
@@ -930,7 +1138,7 @@ function CompleteBlock({
   classNames
 }) {
   return /* @__PURE__ */ jsxs("div", { className: classNames?.complete, style: styles.complete, children: [
-    /* @__PURE__ */ jsx("strong", { children: "You are fully authenticated." }),
+    /* @__PURE__ */ jsx("strong", { children: "You are all set." }),
     /* @__PURE__ */ jsx("p", { className: classNames?.caption, style: styles.caption, children: "All requirements are complete." })
   ] });
 }
@@ -1068,6 +1276,7 @@ export {
   defaultRequirements,
   evaluateNextStep,
   getMissingRequirements,
-  initialContext
+  initialContext,
+  useAdaptiveFlow
 };
 //# sourceMappingURL=index.mjs.map