@algodomain/smart-forms 0.1.0

package/dist/chunk-IG4XDQMV.js

@@ -0,0 +1,604 @@
+import { createContext, useState, useRef, useCallback, useContext, useEffect } from 'react';
+import { z } from 'zod';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import * as LabelPrimitive from '@radix-ui/react-label';
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+import { InfoIcon, EyeOffIcon, EyeIcon } from 'lucide-react';
+
+var FormContext = createContext(null);
+var SmartFormProvider = ({
+  children,
+  config,
+  initialData = {}
+}) => {
+  const getStorageKey = () => {
+    return config.storageKey || "smart-form-data";
+  };
+  const loadFromStorage = () => {
+    if (!config.enableLocalStorage) return initialData;
+    try {
+      const stored = localStorage.getItem(getStorageKey());
+      if (stored) {
+        const parsedStored = JSON.parse(stored);
+        const merged = { ...initialData };
+        Object.keys(parsedStored).forEach((key) => {
+          const storedValue = parsedStored[key];
+          if (storedValue !== null && storedValue !== void 0 && storedValue !== "") {
+            merged[key] = storedValue;
+          }
+        });
+        return merged;
+      }
+      return initialData;
+    } catch (error) {
+      console.warn("Failed to load form data from localStorage:", error);
+      return initialData;
+    }
+  };
+  const saveToStorage = (data) => {
+    if (!config.enableLocalStorage) return;
+    try {
+      localStorage.setItem(getStorageKey(), JSON.stringify(data));
+    } catch (error) {
+      console.warn("Failed to save form data to localStorage:", error);
+    }
+  };
+  const clearStorage = () => {
+    if (!config.enableLocalStorage) return;
+    try {
+      localStorage.removeItem(getStorageKey());
+    } catch (error) {
+      console.warn("Failed to clear form data from localStorage:", error);
+    }
+  };
+  const [formData, setFormData] = useState(loadFromStorage);
+  const [errors, setErrors] = useState({});
+  const [isLoading, setIsLoading] = useState(false);
+  const [isDraftSaving, setIsDraftSaving] = useState(false);
+  const [validationRegistry, setValidationRegistry] = useState({});
+  const fieldRefs = useRef({});
+  const submitHooksRef = useRef(/* @__PURE__ */ new Map());
+  const updateField = useCallback((field, value) => {
+    setFormData((prev) => {
+      const newData = {
+        ...prev,
+        [field]: value
+      };
+      setTimeout(() => saveToStorage(newData), 0);
+      return newData;
+    });
+    if (errors[field]) {
+      setErrors((prev) => {
+        const newErrors = { ...prev };
+        delete newErrors[field];
+        return newErrors;
+      });
+    }
+  }, [errors, config.enableLocalStorage, saveToStorage]);
+  const validateField = useCallback((field, value) => {
+    const validation = validationRegistry[field];
+    if (!validation) return true;
+    try {
+      validation.parse(value);
+      return true;
+    } catch (error) {
+      if (error instanceof z.ZodError) {
+        setErrors((prev) => ({
+          ...prev,
+          [field]: error.issues[0]?.message || `Invalid ${field}`
+        }));
+        return false;
+      }
+      return false;
+    }
+  }, [validationRegistry]);
+  const registerValidation = useCallback((field, validation) => {
+    setValidationRegistry((prev) => ({
+      ...prev,
+      [field]: validation
+    }));
+  }, []);
+  const validateAllFields = useCallback(() => {
+    const allErrors = {};
+    let isValid = true;
+    for (const [field, validation] of Object.entries(validationRegistry)) {
+      if (validation && typeof validation.parse === "function") {
+        try {
+          validation.parse(formData[field]);
+        } catch (error) {
+          if (error instanceof z.ZodError) {
+            allErrors[field] = error.issues[0]?.message || `Invalid ${field}`;
+            isValid = false;
+          }
+        }
+      }
+    }
+    setErrors(allErrors);
+    return isValid;
+  }, [formData, validationRegistry]);
+  const validateFields = useCallback((fields) => {
+    const allErrors = {};
+    let isValid = true;
+    for (const field of fields) {
+      const validation = validationRegistry[field];
+      if (validation) {
+        try {
+          validation.parse(formData[field]);
+        } catch (error) {
+          if (error instanceof z.ZodError) {
+            allErrors[field] = error.issues[0]?.message || `Invalid ${field}`;
+            isValid = false;
+          }
+        }
+      }
+    }
+    setErrors((prev) => ({
+      ...prev,
+      ...allErrors
+    }));
+    return isValid;
+  }, [formData, validationRegistry]);
+  const submitForm = useCallback(async () => {
+    if (!validateAllFields()) {
+      return;
+    }
+    if (!config.api) {
+      console.warn("No API endpoint provided");
+      return;
+    }
+    if (config.logFormData) {
+      console.log("\u{1F4E4} Submitting form data:", formData);
+      console.log("\u{1F3AF} API endpoint:", config.api);
+    }
+    const toJsonSafe = (val) => {
+      if (val instanceof File) return val.name;
+      if (val instanceof Date) return val.toISOString();
+      if (Array.isArray(val)) {
+        return val.map((item) => item instanceof File ? item.name : toJsonSafe(item));
+      }
+      if (val && typeof val === "object") {
+        const out = {};
+        for (const [k, v] of Object.entries(val)) out[k] = toJsonSafe(v);
+        return out;
+      }
+      return val;
+    };
+    let jsonPayload = toJsonSafe(formData);
+    if (config.transformData) {
+      jsonPayload = config.transformData(jsonPayload);
+    }
+    setIsLoading(true);
+    try {
+      const headers = {
+        "Content-Type": "application/json"
+      };
+      if (config.authentication?.enable) {
+        const { accessTokenKey = "accessToken" } = config.authentication;
+        const token = localStorage.getItem(accessTokenKey);
+        if (token) {
+          headers.Authorization = `Bearer ${token}`;
+        }
+      }
+      const fetchOptions = {
+        method: config.method || "POST",
+        headers,
+        body: JSON.stringify(jsonPayload)
+      };
+      if (config.authentication?.enable) {
+        fetchOptions.credentials = "include";
+      }
+      let response = await fetch(config.api, fetchOptions);
+      if (response.status === 403 && config.authentication?.enable && config.authentication.refreshTokenEndpoint) {
+        const newAccessToken = await refreshAccessToken(config.authentication);
+        if (newAccessToken) {
+          headers.Authorization = `Bearer ${newAccessToken}`;
+          response = await fetch(config.api, {
+            ...fetchOptions,
+            headers
+          });
+        }
+      }
+      if (!response.ok) {
+        const errorResponse = await response.json().catch(() => ({ message: "Request failed" }));
+        console.log("Error response:", errorResponse);
+        throw new Error(JSON.stringify(errorResponse));
+      }
+      const result = await response.json();
+      if (config.onSuccess) {
+        config.onSuccess(result);
+      }
+      for (const hook of submitHooksRef.current.values()) {
+        try {
+          await hook();
+        } catch (hookError) {
+          console.error("Submit hook error:", hookError);
+        }
+      }
+    } catch (error) {
+      if (config.onError) {
+        let errorData;
+        try {
+          errorData = JSON.parse(error.message);
+        } catch {
+          let userFriendlyMessage = "An error occurred";
+          if (error.message === "Failed to fetch" || error.message?.includes("Failed to fetch")) {
+            userFriendlyMessage = "This service is temporarily unavailable. Please try again after some time.";
+          } else if (error.message?.includes("Network Error")) {
+            userFriendlyMessage = "Network error occurred. Please check your connection and try again.";
+          } else if (error.message?.includes("timeout")) {
+            userFriendlyMessage = "Request timed out. Please try again.";
+          } else if (error.message?.includes("CORS")) {
+            userFriendlyMessage = "Connection error. Please contact support if this persists.";
+          } else if (error.message && error.message !== "An error occurred") {
+            userFriendlyMessage = error.message;
+          }
+          errorData = {
+            message: userFriendlyMessage,
+            details: []
+          };
+        }
+        config.onError(errorData);
+      }
+      console.error("Form submission error:", error);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [formData, config, validateAllFields]);
+  const validateFormAndGetResult = useCallback(() => {
+    return validateAllFields();
+  }, [validateAllFields]);
+  const refreshAccessToken = useCallback(async (authConfig) => {
+    const { refreshTokenEndpoint, accessTokenKey = "accessToken", refreshTokenKey = "refreshToken" } = authConfig;
+    if (!refreshTokenEndpoint) {
+      throw new Error("Refresh token endpoint not provided");
+    }
+    try {
+      const refreshToken = localStorage.getItem(refreshTokenKey);
+      if (!refreshToken) {
+        throw new Error("No refresh token available");
+      }
+      const response = await fetch(refreshTokenEndpoint, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json"
+        },
+        body: JSON.stringify({ refreshToken })
+      });
+      if (!response.ok) {
+        throw new Error(`Token refresh failed: ${response.status}`);
+      }
+      const result = await response.json();
+      const newAccessToken = result.data?.accessToken || result.accessToken;
+      if (newAccessToken) {
+        localStorage.setItem(accessTokenKey, newAccessToken);
+        return newAccessToken;
+      }
+      throw new Error("No access token in refresh response");
+    } catch (error) {
+      console.error("Token refresh failed:", error);
+      localStorage.removeItem(accessTokenKey);
+      localStorage.removeItem(refreshTokenKey);
+      return null;
+    }
+  }, []);
+  const saveDraft = useCallback(async () => {
+    if (!config.saveDraftApi) {
+      console.warn("No save draft API endpoint provided");
+      return;
+    }
+    if (config.logFormData) {
+      console.log("\u{1F4BE} Saving draft data:", formData);
+      console.log("\u{1F3AF} Draft API endpoint:", config.saveDraftApi);
+    }
+    setIsDraftSaving(true);
+    try {
+      const headers = {
+        "Content-Type": "application/json"
+      };
+      if (config.authentication?.enable) {
+        const { accessTokenKey = "accessToken" } = config.authentication;
+        const token = localStorage.getItem(accessTokenKey);
+        if (token) {
+          headers.Authorization = `Bearer ${token}`;
+        }
+      }
+      const fetchOptions = {
+        method: "POST",
+        headers,
+        body: JSON.stringify(formData)
+      };
+      if (config.authentication?.enable) {
+        fetchOptions.credentials = "include";
+      }
+      let response = await fetch(config.saveDraftApi, fetchOptions);
+      if (response.status === 403 && config.authentication?.enable && config.authentication.refreshTokenEndpoint) {
+        const newAccessToken = await refreshAccessToken(config.authentication);
+        if (newAccessToken) {
+          headers.Authorization = `Bearer ${newAccessToken}`;
+          response = await fetch(config.saveDraftApi, {
+            ...fetchOptions,
+            headers
+          });
+        }
+      }
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`);
+      }
+      const result = await response.json();
+      console.log("Draft saved successfully:", result);
+    } catch (error) {
+      console.error("Draft save error:", error);
+    } finally {
+      setIsDraftSaving(false);
+    }
+  }, [formData, config]);
+  const resetForm = useCallback(() => {
+    setFormData(initialData);
+    setErrors({});
+    clearStorage();
+  }, [initialData, config.enableLocalStorage, clearStorage]);
+  const contextValue = {
+    formData,
+    errors,
+    isLoading,
+    isDraftSaving,
+    updateField,
+    validateField,
+    validateFields,
+    submitForm,
+    validateFormAndGetResult,
+    saveDraft,
+    resetForm,
+    fieldRefs,
+    registerValidation,
+    validationRegistry,
+    config,
+    setErrors,
+    registerSubmitHook: (key, hook) => {
+      submitHooksRef.current.set(key, hook);
+    },
+    unregisterSubmitHook: (key) => {
+      submitHooksRef.current.delete(key);
+    }
+  };
+  return /* @__PURE__ */ jsx(FormContext.Provider, { value: contextValue, children });
+};
+var useSmartForm = () => {
+  const context = useContext(FormContext);
+  if (!context) {
+    throw new Error("useSmartForm must be used within a SmartFormProvider");
+  }
+  return context;
+};
+var useFormField = (field) => {
+  const { formData, errors, updateField, fieldRefs, registerValidation } = useSmartForm();
+  return {
+    value: formData[field],
+    error: errors[field],
+    onChange: (value) => updateField(field, value),
+    fieldRef: (el) => fieldRefs.current[field] = el,
+    registerValidation
+  };
+};
+var FieldDetectionContext = createContext(null);
+var useFieldDetection = () => {
+  const context = useContext(FieldDetectionContext);
+  return context;
+};
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+function Input({ className, type, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "input",
+    {
+      type,
+      "data-slot": "input",
+      className: cn(
+        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+        "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function Textarea({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "textarea",
+    {
+      "data-slot": "textarea",
+      className: cn(
+        "border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function Label({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    LabelPrimitive.Root,
+    {
+      "data-slot": "label",
+      className: cn(
+        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function TooltipProvider({
+  delayDuration = 0,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    TooltipPrimitive.Provider,
+    {
+      "data-slot": "tooltip-provider",
+      delayDuration,
+      ...props
+    }
+  );
+}
+function Tooltip({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsx(TooltipPrimitive.Root, { "data-slot": "tooltip", ...props }) });
+}
+function TooltipTrigger({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(TooltipPrimitive.Trigger, { "data-slot": "tooltip-trigger", ...props });
+}
+function TooltipContent({
+  className,
+  sideOffset = 0,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsxs(
+    TooltipPrimitive.Content,
+    {
+      "data-slot": "tooltip-content",
+      sideOffset,
+      className: cn(
+        "bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsx(TooltipPrimitive.Arrow, { className: "bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" })
+      ]
+    }
+  ) });
+}
+var SmartInput = ({
+  field,
+  label,
+  type = "text",
+  placeholder,
+  validation,
+  className = "",
+  required = false,
+  defaultValue,
+  info,
+  subLabel
+}) => {
+  const { value, error, onChange, fieldRef, registerValidation } = useFormField(field);
+  const fieldDetection = useFieldDetection();
+  const hasRegistered = useRef(false);
+  const hasSetDefault = useRef(false);
+  const [showPassword, setShowPassword] = useState(false);
+  const togglePasswordVisibility = () => {
+    setShowPassword(!showPassword);
+  };
+  useEffect(() => {
+    if (validation && !hasRegistered.current) {
+      hasRegistered.current = true;
+      registerValidation(field, validation);
+    }
+  }, [validation, field, registerValidation]);
+  useEffect(() => {
+    if (fieldDetection?.registerField) {
+      fieldDetection.registerField(field);
+    }
+  }, [field, fieldDetection]);
+  useEffect(() => {
+    if (defaultValue !== void 0 && !hasSetDefault.current && (value === void 0 || value === null || value === "")) {
+      onChange(defaultValue);
+      hasSetDefault.current = true;
+    }
+  }, [defaultValue, value, onChange]);
+  const getPlaceholder = () => {
+    if (placeholder) return placeholder;
+    if (!label) return `Enter ${field}`;
+    if (type === "email") return `Enter ${label.toLowerCase()}`;
+    if (type === "tel") return `Enter ${label.toLowerCase()}`;
+    return `Enter ${label.toLowerCase()}`;
+  };
+  const renderInput = () => {
+    switch (type) {
+      case "textarea":
+        return /* @__PURE__ */ jsx(
+          Textarea,
+          {
+            ref: fieldRef,
+            value: value || "",
+            onChange: (e) => onChange(e.target.value),
+            className: `w-full ${error ? "border-destructive" : ""} ${className}`,
+            placeholder: getPlaceholder(),
+            rows: 4,
+            "data-field": field
+          }
+        );
+      case "password":
+        return /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              ref: fieldRef,
+              type: showPassword ? "text" : "password",
+              value: value || "",
+              onChange: (e) => onChange(e.target.value),
+              className: `w-full pr-10 ${error ? "border-destructive" : ""} ${className}`,
+              placeholder: getPlaceholder(),
+              "data-field": field
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: togglePasswordVisibility,
+              className: "absolute right-3 top-1/2 -translate-y-1/2 p-1 hover:bg-gray-100 rounded transition-colors",
+              children: showPassword ? /* @__PURE__ */ jsx(EyeOffIcon, { className: "h-4 w-4 text-muted-foreground" }) : /* @__PURE__ */ jsx(EyeIcon, { className: "h-4 w-4 text-muted-foreground" })
+            }
+          )
+        ] });
+      default:
+        return /* @__PURE__ */ jsx(
+          Input,
+          {
+            ref: fieldRef,
+            type,
+            value: value || "",
+            onChange: (e) => onChange(e.target.value),
+            className: `w-full ${error ? "border-destructive" : ""} ${className}`,
+            placeholder: getPlaceholder(),
+            "data-field": field
+          }
+        );
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { className: `flex-1 min-w-0 ${className}`, children: [
+    label && /* @__PURE__ */ jsxs("div", { className: "mb-1", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
+        /* @__PURE__ */ jsxs(Label, { className: "text-sm font-medium text-foreground", children: [
+          label,
+          " ",
+          required && /* @__PURE__ */ jsx("span", { className: "text-destructive", children: "*" })
+        ] }),
+        info && /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs(Tooltip, { children: [
+          /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(InfoIcon, { className: "h-4 w-4 text-muted-foreground cursor-pointer mr-2" }) }),
+          /* @__PURE__ */ jsx(TooltipContent, { children: /* @__PURE__ */ jsx("p", { className: "max-w-xs", children: info }) })
+        ] }) })
+      ] }),
+      subLabel && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground mt-1", children: subLabel })
+    ] }),
+    renderInput(),
+    error && /* @__PURE__ */ jsx("p", { className: "text-destructive text-sm mt-1", children: error })
+  ] });
+};
+
+export { FieldDetectionContext, Input, Label, SmartFormProvider, SmartInput, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, cn, useFieldDetection, useFormField, useSmartForm };
+//# sourceMappingURL=chunk-IG4XDQMV.js.map
+//# sourceMappingURL=chunk-IG4XDQMV.js.map