@aatulwork/customform-renderer 1.9.0 → 1.10.0

package/dist/fields.js

@@ -0,0 +1,1230 @@
+'use strict';
+
+var reactHookForm = require('react-hook-form');
+var material = require('@mui/material');
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var RefreshIcon = require('@mui/icons-material/Refresh');
+var DatePicker = require('@mui/x-date-pickers/DatePicker');
+var DateTimePicker = require('@mui/x-date-pickers/DateTimePicker');
+var TimePicker = require('@mui/x-date-pickers/TimePicker');
+var LocalizationProvider = require('@mui/x-date-pickers/LocalizationProvider');
+var AdapterDayjs = require('@mui/x-date-pickers/AdapterDayjs');
+var dayjs = require('dayjs');
+var ckeditor5React = require('@ckeditor/ckeditor5-react');
+var CloseIcon = require('@mui/icons-material/Close');
+var CloudUploadIcon = require('@mui/icons-material/CloudUpload');
+var InsertDriveFileIcon = require('@mui/icons-material/InsertDriveFile');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var RefreshIcon__default = /*#__PURE__*/_interopDefault(RefreshIcon);
+var dayjs__default = /*#__PURE__*/_interopDefault(dayjs);
+var CloseIcon__default = /*#__PURE__*/_interopDefault(CloseIcon);
+var CloudUploadIcon__default = /*#__PURE__*/_interopDefault(CloudUploadIcon);
+var InsertDriveFileIcon__default = /*#__PURE__*/_interopDefault(InsertDriveFileIcon);
+
+// src/components/fields/TextField.tsx
+var TextField = ({ field, control, defaultValue, rules, errors }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactHookForm.Controller,
+    {
+      name: field.name,
+      control,
+      defaultValue,
+      rules,
+      render: ({ field: formField }) => /* @__PURE__ */ jsxRuntime.jsxs(
+        material.FormControl,
+        {
+          fullWidth: true,
+          required: field.required,
+          error: !!errors[field.name],
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(material.FormLabel, { children: [
+              " ",
+              field.label
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              material.TextField,
+              {
+                ...formField,
+                type: field.type === "number" ? "number" : field.type,
+                placeholder: field.placeholder || "Enter value",
+                fullWidth: true,
+                size: "small",
+                required: field.required,
+                error: !!errors[field.name],
+                helperText: errors[field.name]?.message,
+                inputProps: field.type === "number" ? {
+                  min: field.validation?.min,
+                  max: field.validation?.max
+                } : void 0
+              }
+            )
+          ]
+        }
+      )
+    },
+    field.name
+  );
+};
+
+// src/utils/fieldHelpers.ts
+var formatFileSize = (bytes) => {
+  if (bytes === 0) return "0 Bytes";
+  const k = 1024;
+  const sizes = ["Bytes", "KB", "MB", "GB"];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  return Math.round(bytes / Math.pow(k, i) * 100) / 100 + " " + sizes[i];
+};
+var validateFile = (file, field) => {
+  if (field.validation?.allowedFileTypes && field.validation.allowedFileTypes.length > 0) {
+    const fileExtension = file.name.split(".").pop()?.toLowerCase();
+    const allowedTypes = field.validation.allowedFileTypes.map((t) => t.toLowerCase().replace(".", ""));
+    if (!fileExtension || !allowedTypes.includes(fileExtension)) {
+      return `File type not allowed. Allowed types: ${field.validation.allowedFileTypes.join(", ")}`;
+    }
+  }
+  if (field.validation?.maxFileSize) {
+    if (file.size > field.validation.maxFileSize) {
+      const maxSizeFormatted = formatFileSize(field.validation.maxFileSize);
+      return `File size exceeds maximum allowed size of ${maxSizeFormatted}`;
+    }
+  }
+  return true;
+};
+var buildFieldRules = (field) => {
+  const rules = {};
+  if (field.required) {
+    rules.required = `${field.label} is required`;
+  }
+  if (field.type === "file") {
+    rules.validate = (value) => {
+      if (field.required) {
+        if (field.allowMultiple) {
+          const files = Array.isArray(value) ? value : [];
+          if (files.length === 0) {
+            return `${field.label} is required`;
+          }
+          const hasValidFiles = files.some(
+            (file) => file && typeof file === "object" && ("fileName" in file || "fileUrl" in file)
+          );
+          if (!hasValidFiles) {
+            return `${field.label} is required`;
+          }
+        } else {
+          if (!value || typeof value === "object" && !("fileName" in value || "fileUrl" in value)) {
+            return `${field.label} is required`;
+          }
+        }
+      }
+      return true;
+    };
+  }
+  if ((field.type === "select" || field.type === "formReference" || field.type === "apiReference") && field.allowMultiple) {
+    rules.validate = (value) => {
+      const values = value;
+      if (!values || values.length === 0) {
+        if (field.required) {
+          return `${field.label} is required`;
+        }
+        return true;
+      }
+      return true;
+    };
+  }
+  return rules;
+};
+var normalizeOptions = (options) => {
+  if (!options) return [];
+  return options.map((opt) => {
+    if (typeof opt === "string") {
+      return { label: opt, value: opt };
+    }
+    return opt;
+  });
+};
+var SimpleSelect = ({
+  label,
+  value,
+  onChange,
+  options,
+  placeholder,
+  helperText,
+  fullWidth = true,
+  size = "small",
+  required = false,
+  error = false,
+  disabled = false,
+  multiple = false,
+  isLoading = false,
+  filterable = true,
+  filterPlaceholder = "Filter...",
+  refreshable = false,
+  onRefresh
+}) => {
+  const [filterText, setFilterText] = react.useState("");
+  const handleChange = (event) => {
+    const val = event.target.value;
+    if (val === "__refresh__") {
+      onRefresh?.();
+      return;
+    }
+    onChange(val);
+  };
+  const filteredOptions = filterable && filterText ? options.filter(
+    (opt) => String(opt.label).toLowerCase().includes(filterText.toLowerCase())
+  ) : options;
+  const handleFilterChange = (e) => {
+    setFilterText(e.target.value);
+  };
+  const handleClose = () => {
+    setFilterText("");
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(material.FormControl, { fullWidth, size, required, error, disabled, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(material.InputLabel, { children: label }),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      material.Select,
+      {
+        value: value ?? (multiple ? [] : ""),
+        onChange: handleChange,
+        onClose: handleClose,
+        input: /* @__PURE__ */ jsxRuntime.jsx(material.OutlinedInput, { label }),
+        MenuProps: {
+          autoFocus: false
+        },
+        multiple,
+        disabled: disabled || isLoading,
+        endAdornment: isLoading ? /* @__PURE__ */ jsxRuntime.jsx(material.CircularProgress, { size: 20 }) : refreshable && onRefresh ? /* @__PURE__ */ jsxRuntime.jsx(material.InputAdornment, { position: "end", sx: { mr: 2 }, children: /* @__PURE__ */ jsxRuntime.jsx(
+          material.IconButton,
+          {
+            size: "small",
+            onClick: (e) => {
+              e.stopPropagation();
+              onRefresh();
+            },
+            disabled,
+            "aria-label": "Refresh options",
+            children: /* @__PURE__ */ jsxRuntime.jsx(RefreshIcon__default.default, { fontSize: "small" })
+          }
+        ) }) : void 0,
+        renderValue: (selected) => {
+          if (multiple) {
+            const selectedValues = selected;
+            if (selectedValues.length === 0) {
+              return /* @__PURE__ */ jsxRuntime.jsx("em", { children: placeholder || "Select..." });
+            }
+            return /* @__PURE__ */ jsxRuntime.jsx(material.Box, { sx: { display: "flex", flexWrap: "wrap", gap: 0.5 }, children: selectedValues.map((val) => {
+              const option2 = options.find((opt) => opt.value === val);
+              return /* @__PURE__ */ jsxRuntime.jsx(
+                material.Chip,
+                {
+                  label: option2?.label || val,
+                  size: "small"
+                },
+                val
+              );
+            }) });
+          }
+          const option = options.find((opt) => opt.value === selected);
+          return option?.label || selected || /* @__PURE__ */ jsxRuntime.jsx("em", { children: placeholder || "Select..." });
+        },
+        children: [
+          filterable && /* @__PURE__ */ jsxRuntime.jsx(
+            material.ListSubheader,
+            {
+              sx: { py: 1 },
+              onMouseDown: (e) => e.stopPropagation(),
+              onClick: (e) => e.stopPropagation(),
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                material.TextField,
+                {
+                  size: "small",
+                  fullWidth: true,
+                  placeholder: filterPlaceholder,
+                  value: filterText,
+                  onChange: handleFilterChange,
+                  variant: "outlined",
+                  sx: { mt: -0.5 },
+                  autoFocus: true
+                }
+              )
+            }
+          ),
+          filteredOptions.map((option) => /* @__PURE__ */ jsxRuntime.jsx(material.MenuItem, { value: option.value, children: option.label }, option.value))
+        ]
+      }
+    ),
+    helperText && /* @__PURE__ */ jsxRuntime.jsx(material.FormHelperText, { children: helperText })
+  ] });
+};
+var SelectField = ({ field, control, defaultValue, rules, errors }) => {
+  const isMultiple = field.allowMultiple || false;
+  const normalizedOptions = normalizeOptions(field.options);
+  const selectOptions = react.useMemo(() => {
+    return normalizedOptions.map((opt) => ({
+      value: String(opt.value),
+      label: opt.label
+    }));
+  }, [normalizedOptions]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactHookForm.Controller,
+    {
+      name: field.name,
+      control,
+      defaultValue,
+      rules,
+      render: ({ field: formField }) => {
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          SimpleSelect,
+          {
+            label: field.label,
+            value: formField.value,
+            onChange: (value) => {
+              formField.onChange(value);
+            },
+            options: selectOptions,
+            placeholder: field.placeholder || "Select...",
+            helperText: errors[field.name]?.message,
+            fullWidth: true,
+            size: "small",
+            required: field.required,
+            error: !!errors[field.name],
+            disabled: false,
+            multiple: isMultiple
+          }
+        );
+      }
+    },
+    field.name
+  );
+};
+var CheckboxField = ({ field, control, defaultValue, rules }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactHookForm.Controller,
+    {
+      name: field.name,
+      control,
+      defaultValue,
+      rules,
+      render: ({ field: formField }) => /* @__PURE__ */ jsxRuntime.jsx(
+        material.FormControlLabel,
+        {
+          control: /* @__PURE__ */ jsxRuntime.jsx(
+            material.Checkbox,
+            {
+              ...formField,
+              checked: formField.value || false,
+              size: "small"
+            }
+          ),
+          label: field.label
+        }
+      )
+    },
+    field.name
+  );
+};
+var RadioField = ({ field, control, defaultValue, rules, errors }) => {
+  const normalizedOptions = normalizeOptions(field.options);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactHookForm.Controller,
+    {
+      name: field.name,
+      control,
+      defaultValue,
+      rules,
+      render: ({ field: formField }) => /* @__PURE__ */ jsxRuntime.jsxs(material.FormControl, { component: "fieldset", required: field.required, error: !!errors[field.name], children: [
+        /* @__PURE__ */ jsxRuntime.jsx(material.FormLabel, { required: field.required, error: !!errors[field.name], children: field.label }),
+        /* @__PURE__ */ jsxRuntime.jsx(material.RadioGroup, { ...formField, row: true, children: normalizedOptions.map((option, index) => /* @__PURE__ */ jsxRuntime.jsx(
+          material.FormControlLabel,
+          {
+            value: option.value,
+            control: /* @__PURE__ */ jsxRuntime.jsx(material.Radio, { size: "small" }),
+            label: option.label
+          },
+          index
+        )) })
+      ] })
+    },
+    field.name
+  );
+};
+var ToggleField = ({ field, control, defaultValue, rules, errors }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactHookForm.Controller,
+    {
+      name: field.name,
+      control,
+      defaultValue,
+      rules,
+      render: ({ field: formField }) => /* @__PURE__ */ jsxRuntime.jsx(
+        material.FormControlLabel,
+        {
+          control: /* @__PURE__ */ jsxRuntime.jsx(
+            material.Switch,
+            {
+              ...formField,
+              checked: formField.value || false,
+              size: "medium"
+            }
+          ),
+          label: /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(material.Typography, { variant: "body2", children: [
+              field.label,
+              " ",
+              field.required && "*"
+            ] }),
+            errors[field.name] && /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "caption", color: "error", sx: { display: "block", mt: 0.5 }, children: errors[field.name]?.message })
+          ] })
+        }
+      )
+    },
+    field.name
+  );
+};
+var ColorField = ({ field, control, defaultValue, rules, errors }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactHookForm.Controller,
+    {
+      name: field.name,
+      control,
+      defaultValue,
+      rules,
+      render: ({ field: formField }) => /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: { display: "flex", alignItems: "center", gap: 2, width: "100%" }, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          material.FormLabel,
+          {
+            required: field.required,
+            error: !!errors[field.name],
+            children: field.label
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: { display: "flex", flexDirection: "column", flex: 1, maxWidth: 200 }, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            material.Input,
+            {
+              ...formField,
+              type: "color",
+              sx: {
+                width: "20%",
+                height: "40px",
+                cursor: "pointer",
+                border: errors[field.name] ? "1px solid red" : "1px solid rgba(0, 0, 0, 0.23)",
+                borderRadius: "4px",
+                padding: "1px"
+              },
+              inputProps: {
+                style: {
+                  height: "100%",
+                  cursor: "pointer"
+                }
+              }
+            }
+          ),
+          errors[field.name] && /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "caption", color: "error", sx: { mt: 0.5 }, children: errors[field.name]?.message })
+        ] })
+      ] })
+    },
+    field.name
+  );
+};
+var textFieldSlotProps = (field, errors) => ({
+  fullWidth: true,
+  size: "small",
+  required: field.required,
+  error: !!errors[field.name],
+  helperText: errors[field.name]?.message
+});
+function resolveDatePickerMode(field) {
+  if (field.datePickerMode) return field.datePickerMode;
+  return field?.displayTime ? "datetime" : "date";
+}
+var DateTimePickerField = ({ field, control, defaultValue, rules, errors }) => {
+  const mode = resolveDatePickerMode(field);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactHookForm.Controller,
+    {
+      name: field.name,
+      control,
+      defaultValue,
+      rules,
+      render: ({ field: formField }) => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          material.FormLabel,
+          {
+            required: field.required,
+            error: !!errors[field.name],
+            children: field.label
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs(LocalizationProvider.LocalizationProvider, { dateAdapter: AdapterDayjs.AdapterDayjs, children: [
+          mode === "date" && /* @__PURE__ */ jsxRuntime.jsx(
+            DatePicker.DatePicker,
+            {
+              format: "DD-MM-YYYY",
+              value: formField.value ? dayjs__default.default(formField.value) : null,
+              onChange: (date) => formField.onChange(date?.toISOString() ?? null),
+              slotProps: { textField: textFieldSlotProps(field, errors) }
+            }
+          ),
+          mode === "datetime" && /* @__PURE__ */ jsxRuntime.jsx(
+            DateTimePicker.DateTimePicker,
+            {
+              format: "DD-MM-YYYY  hh:mm A",
+              value: formField.value ? dayjs__default.default(formField.value) : null,
+              onChange: (date) => formField.onChange(date?.toISOString() ?? null),
+              slotProps: { textField: textFieldSlotProps(field, errors) }
+            }
+          ),
+          mode === "time" && /* @__PURE__ */ jsxRuntime.jsx(
+            TimePicker.TimePicker,
+            {
+              format: "hh:mm A",
+              value: formField.value ? dayjs__default.default(formField.value) : null,
+              onChange: (date) => formField.onChange(date?.toISOString() ?? null),
+              slotProps: { textField: textFieldSlotProps(field, errors) }
+            }
+          )
+        ] })
+      ] })
+    },
+    field.name
+  );
+};
+var useFormColors = (customColors) => {
+  const theme = material.useTheme();
+  return {
+    primary: customColors?.primary || theme.palette.primary.main,
+    secondary: customColors?.secondary || theme.palette.secondary.main,
+    error: customColors?.error || theme.palette.error.main,
+    success: customColors?.success || theme.palette.success.main,
+    warning: customColors?.warning || theme.palette.warning.main,
+    info: customColors?.info || theme.palette.info.main,
+    textPrimary: customColors?.textPrimary || theme.palette.text.primary,
+    textSecondary: customColors?.textSecondary || theme.palette.text.secondary,
+    divider: customColors?.divider || theme.palette.divider,
+    background: customColors?.background || theme.palette.background.default,
+    backgroundPaper: customColors?.backgroundPaper || theme.palette.background.paper
+  };
+};
+var defaultFileUploadService = {
+  uploadFiles: async () => {
+    throw new Error("File upload service not provided. Please provide a fileUpload service in FormServices.");
+  }
+};
+var defaultFormReferenceService = {
+  fetchOptions: async () => {
+    throw new Error("Form reference service not provided. Please provide a formReference service in FormServices.");
+  }
+};
+var defaultApiReferenceService = {
+  fetchOptions: async () => {
+    throw new Error("API reference service not provided. Please provide an apiReference service in FormServices.");
+  }
+};
+
+// src/utils/ckeditorLoader.ts
+var loadCKEditor = (scriptPath = "/lib/ckeditor/ckeditor.js") => {
+  return new Promise((resolve, reject) => {
+    if (window.ClassicEditor) {
+      resolve();
+      return;
+    }
+    const existingScript = document.querySelector(`script[src="${scriptPath}"]`);
+    if (existingScript) {
+      existingScript.addEventListener("load", () => {
+        if (window.ClassicEditor) {
+          resolve();
+        } else {
+          reject(new Error("CKEditor script loaded but ClassicEditor not found on window"));
+        }
+      });
+      existingScript.addEventListener("error", () => {
+        reject(new Error("Failed to load CKEditor script"));
+      });
+      return;
+    }
+    const script = document.createElement("script");
+    script.src = scriptPath;
+    script.async = true;
+    script.onload = () => {
+      const checkInterval = setInterval(() => {
+        if (window.ClassicEditor) {
+          clearInterval(checkInterval);
+          resolve();
+        }
+      }, 100);
+      setTimeout(() => {
+        clearInterval(checkInterval);
+        if (!window.ClassicEditor) {
+          reject(
+            new Error(
+              "CKEditor script loaded but ClassicEditor was not found on window. Ensure you are using the package-provided build from lib/ckeditor/ckeditor.js (see CKEDITOR_SETUP.md)."
+            )
+          );
+        }
+      }, 1e4);
+    };
+    script.onerror = () => {
+      reject(
+        new Error(
+          `Failed to load CKEditor from ${scriptPath}. Ensure the file exists at that URL (e.g. copy from node_modules/@aatulwork/customform-renderer/lib/ckeditor/ckeditor.js to public/lib/ckeditor/ckeditor.js) or set services.ckEditorScriptPath to a working URL.`
+        )
+      );
+    };
+    document.head.appendChild(script);
+  });
+};
+var isCKEditorAvailable = () => {
+  return typeof window !== "undefined" && typeof window.ClassicEditor !== "undefined";
+};
+var waitForCKEditor = (timeout = 1e4) => {
+  return new Promise((resolve, reject) => {
+    if (isCKEditorAvailable()) {
+      resolve();
+      return;
+    }
+    const startTime = Date.now();
+    const checkInterval = setInterval(() => {
+      if (isCKEditorAvailable()) {
+        clearInterval(checkInterval);
+        resolve();
+      } else if (Date.now() - startTime > timeout) {
+        clearInterval(checkInterval);
+        reject(new Error("CKEditor not available after timeout"));
+      }
+    }, 100);
+  });
+};
+
+// src/hooks/useCKEditor.ts
+var useCKEditor = (options = {}) => {
+  const {
+    scriptPath = "/lib/ckeditor/ckeditor.js",
+    autoLoad = true,
+    timeout = 1e4
+  } = options;
+  const [isReady, setIsReady] = react.useState(false);
+  const [isLoading, setIsLoading] = react.useState(false);
+  const [error, setError] = react.useState(null);
+  const load = async () => {
+    if (isCKEditorAvailable()) {
+      setIsReady(true);
+      setIsLoading(false);
+      return;
+    }
+    setIsLoading(true);
+    setError(null);
+    try {
+      await loadCKEditor(scriptPath);
+      setIsReady(true);
+    } catch (err) {
+      const error2 = err instanceof Error ? err : new Error("Failed to load CKEditor");
+      setError(error2);
+      setIsReady(false);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+  react.useEffect(() => {
+    if (isCKEditorAvailable()) {
+      setIsReady(true);
+      return;
+    }
+    if (autoLoad) {
+      load();
+    } else {
+      waitForCKEditor(timeout).then(() => setIsReady(true)).catch((err) => setError(err instanceof Error ? err : new Error("CKEditor not available")));
+    }
+  }, [scriptPath, autoLoad, timeout]);
+  return {
+    isReady,
+    isLoading,
+    error,
+    load
+  };
+};
+var CKEditorField = ({ field, control, defaultValue, rules, errors, setValue, formSchema, services, colors }) => {
+  const theme = material.useTheme();
+  const formColors = useFormColors(colors);
+  const editorContainerRef = react.useRef(null);
+  const editorInstanceRef = react.useRef(null);
+  const isUserTypingRef = react.useRef(false);
+  const fileUploadService = services?.fileUpload || defaultFileUploadService;
+  const fileBaseUrl = services?.fileBaseUrl || "";
+  const licenseKey = services?.ckEditorLicenseKey || "GPL";
+  const ckEditorScriptPath = services?.ckEditorScriptPath || "/lib/ckeditor/ckeditor.js";
+  const { isReady: isCKEditorReady, isLoading: isCKEditorLoading, error: ckEditorError } = useCKEditor({
+    scriptPath: ckEditorScriptPath,
+    autoLoad: true
+  });
+  const watchedValue = reactHookForm.useWatch({
+    control,
+    name: field.name,
+    defaultValue: defaultValue || ""
+  });
+  react.useEffect(() => {
+    if (editorInstanceRef.current && isCKEditorReady && !isUserTypingRef.current) {
+      const currentEditorData = editorInstanceRef.current.getData();
+      const formValue = watchedValue || "";
+      if (currentEditorData !== formValue) {
+        editorInstanceRef.current.setData(formValue);
+      }
+    }
+    isUserTypingRef.current = false;
+  }, [watchedValue, isCKEditorReady]);
+  const createCustomUploadAdapter = react.useCallback((loader) => {
+    return {
+      upload: async () => {
+        if (!formSchema?.name) {
+          throw new Error("Form schema name is required for image uploads");
+        }
+        try {
+          const file = await loader.file;
+          if (!file) {
+            throw new Error("No file provided");
+          }
+          if (!file.type.startsWith("image/")) {
+            throw new Error("Only image files are allowed");
+          }
+          const uploadedFiles = await fileUploadService.uploadFiles(
+            formSchema.name,
+            field.name,
+            [file]
+          );
+          if (uploadedFiles && uploadedFiles.length > 0 && uploadedFiles[0].fileUrl) {
+            const fileUrl = uploadedFiles[0].fileUrl;
+            const isFullUrl = fileUrl.startsWith("http://") || fileUrl.startsWith("https://");
+            const url = isFullUrl ? fileUrl : fileBaseUrl + fileUrl;
+            return {
+              default: url
+            };
+          }
+          throw new Error("Upload failed: No file URL returned");
+        } catch (error) {
+          console.error("Upload error:", error);
+          const errorMessage = error.response?.data?.message || error.message || "Upload failed";
+          throw new Error(errorMessage);
+        }
+      },
+      abort: () => {
+        console.log("Upload aborted");
+      }
+    };
+  }, [formSchema?.name, field.name, fileUploadService, fileBaseUrl]);
+  if (isCKEditorLoading) {
+    return /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(material.FormLabel, { required: field.required, error: !!errors[field.name], children: field.label }),
+      /* @__PURE__ */ jsxRuntime.jsx(material.Box, { sx: { p: 2, textAlign: "center", color: formColors.textSecondary }, children: "Loading editor..." })
+    ] });
+  }
+  if (ckEditorError || !isCKEditorReady) {
+    const message = ckEditorError?.message || `CKEditor failed to load. Script path: ${ckEditorScriptPath}. Copy ckeditor.js to public/lib/ckeditor/ or set services.ckEditorScriptPath. See CKEDITOR_SETUP.md.`;
+    return /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(material.FormLabel, { required: field.required, error: !!errors[field.name], children: field.label }),
+      /* @__PURE__ */ jsxRuntime.jsx(material.Box, { sx: { p: 2, border: "1px solid", borderColor: formColors.error, borderRadius: 1 }, children: /* @__PURE__ */ jsxRuntime.jsx(material.FormHelperText, { error: true, children: message }) })
+    ] });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactHookForm.Controller,
+    {
+      name: field.name,
+      control,
+      defaultValue: defaultValue || "",
+      rules,
+      render: ({ field: formField }) => /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          material.FormLabel,
+          {
+            required: field.required,
+            error: !!errors[field.name],
+            children: field.label
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          material.Box,
+          {
+            ref: editorContainerRef,
+            sx: {
+              "& .ck-editor": {
+                borderRadius: "4px",
+                "& .ck-toolbar": {
+                  width: "100%",
+                  maxWidth: "100%",
+                  overflow: "visible",
+                  display: "flex",
+                  flexWrap: "wrap",
+                  "& .ck-toolbar__items": {
+                    display: "flex",
+                    flexWrap: "wrap !important",
+                    width: "100%",
+                    maxWidth: "100%",
+                    "& > *": {
+                      flexShrink: 0
+                    }
+                  }
+                },
+                "& .ck-editor__editable": {
+                  minHeight: "100px"
+                },
+                "&:hover": {
+                  borderColor: errors[field.name] ? formColors.error : theme.palette.mode === "dark" ? "rgba(255, 255, 255, 0.87)" : formColors.primary
+                },
+                "& .ck-focused": {
+                  border: errors[field.name] ? `1px solid ${formColors.error} !important` : `1px solid ${theme.palette.mode === "dark" ? "rgba(255, 255, 255, 0.23)" : formColors.primary} !important`,
+                  boxShadow: errors[field.name] ? `0 0 0 1px ${formColors.error}` : `0 0 0 1px ${material.alpha(formColors.primary, 0.5)} !important`
+                }
+              }
+            },
+            children: window.ClassicEditor && isCKEditorReady && /* @__PURE__ */ jsxRuntime.jsx(
+              ckeditor5React.CKEditor,
+              {
+                editor: window.ClassicEditor,
+                config: {
+                  licenseKey,
+                  initialData: formField.value || ""
+                },
+                data: formField.value || "",
+                onReady: (editor) => {
+                  editorInstanceRef.current = editor;
+                  if (formSchema?.name) {
+                    try {
+                      const fileRepository = editor.plugins.get("FileRepository");
+                      if (fileRepository) {
+                        fileRepository.createUploadAdapter = (loader) => {
+                          return createCustomUploadAdapter(loader);
+                        };
+                      } else {
+                        console.warn("FileRepository plugin not found");
+                      }
+                    } catch (error) {
+                      console.error("Error setting up upload adapter:", error);
+                    }
+                  } else {
+                    console.warn("Form schema name not available, upload adapter not set");
+                  }
+                  if (defaultValue && !formField.value) {
+                    editor.setData(defaultValue);
+                    setValue?.(field.name, defaultValue);
+                  }
+                },
+                onChange: (_event, editor) => {
+                  const data = editor.getData();
+                  isUserTypingRef.current = true;
+                  formField.onChange(data);
+                },
+                onBlur: () => {
+                  formField.onBlur();
+                }
+              }
+            )
+          }
+        ),
+        errors[field.name] && /* @__PURE__ */ jsxRuntime.jsx(material.FormHelperText, { error: true, sx: { mt: 0.5, mx: 0 }, children: errors[field.name]?.message })
+      ] })
+    },
+    field.name
+  );
+};
+var FileField = ({
+  field,
+  control,
+  defaultValue,
+  rules,
+  errors,
+  formSchema,
+  uploadingFiles = {},
+  setUploadingFiles,
+  setError,
+  clearErrors,
+  services,
+  colors
+}) => {
+  const theme = material.useTheme();
+  const isMobile = material.useMediaQuery(theme.breakpoints.down("md"));
+  const formColors = useFormColors(colors);
+  const acceptTypes = field.validation?.allowedFileTypes ? field.validation.allowedFileTypes.map((type) => `.${type.replace(".", "")}`).join(",") : void 0;
+  const isMultiple = field.allowMultiple || false;
+  const fileUploadService = services?.fileUpload || defaultFileUploadService;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactHookForm.Controller,
+    {
+      name: field.name,
+      control,
+      defaultValue,
+      rules,
+      render: ({ field: formField }) => {
+        const isUploading = uploadingFiles[field.name] || false;
+        let files = [];
+        if (isMultiple) {
+          files = Array.isArray(formField.value) ? formField.value : [];
+        } else {
+          files = formField.value ? [formField.value] : [];
+        }
+        const hasFiles = files.length > 0;
+        return /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            material.FormLabel,
+            {
+              required: field.required,
+              error: !!errors[field.name],
+              children: field.label
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            material.Box,
+            {
+              component: "label",
+              htmlFor: `file-input-${field.name}`,
+              sx: {
+                display: "flex",
+                flexDirection: "column",
+                alignItems: "center",
+                justifyContent: "center",
+                border: "1px dashed",
+                borderColor: errors[field.name] ? formColors.error : isUploading ? formColors.primary : hasFiles ? formColors.primary : formColors.divider,
+                p: 1,
+                cursor: isUploading ? "wait" : "pointer",
+                transition: "all 0.2s ease-in-out",
+                backgroundColor: isUploading || hasFiles ? "action.hover" : formColors.backgroundPaper,
+                opacity: isUploading ? 0.7 : 1,
+                pointerEvents: isUploading ? "none" : "auto",
+                "&:hover": {
+                  borderColor: isUploading ? formColors.primary : formColors.primary,
+                  backgroundColor: "action.hover"
+                }
+              },
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "input",
+                  {
+                    id: `file-input-${field.name}`,
+                    type: "file",
+                    hidden: true,
+                    multiple: isMultiple,
+                    accept: acceptTypes,
+                    onChange: async (e) => {
+                      const fileList = e.target.files;
+                      if (!fileList || fileList.length === 0) return;
+                      const newFiles = Array.from(fileList);
+                      const isUploading2 = uploadingFiles[field.name] || false;
+                      if (isUploading2) {
+                        e.target.value = "";
+                        return;
+                      }
+                      for (const file of newFiles) {
+                        const validationResult = validateFile(file, field);
+                        if (validationResult !== true) {
+                          setError?.(field.name, {
+                            type: "manual",
+                            message: validationResult
+                          });
+                          e.target.value = "";
+                          return;
+                        }
+                      }
+                      try {
+                        setUploadingFiles?.((prev) => ({ ...prev, [field.name]: true }));
+                        clearErrors?.(field.name);
+                        if (!formSchema?.name) {
+                          throw new Error("Form schema name is required for file uploads");
+                        }
+                        const uploadedFiles = await fileUploadService.uploadFiles(
+                          formSchema.name,
+                          field.name,
+                          newFiles
+                        );
+                        if (isMultiple) {
+                          const currentValue = formField.value;
+                          const existingFiles = Array.isArray(currentValue) ? currentValue.filter((item) => item && typeof item === "object" && "fileName" in item) : [];
+                          const allUploadedFiles = [...existingFiles, ...uploadedFiles];
+                          formField.onChange(allUploadedFiles);
+                        } else {
+                          formField.onChange(uploadedFiles[0] || null);
+                        }
+                      } catch (error) {
+                        console.error(`Failed to upload files for field ${field.name}:`, error);
+                        const errorMessage = error.response?.data?.message || error.message || "Failed to upload files";
+                        setError?.(field.name, {
+                          type: "manual",
+                          message: `Failed to upload files: ${errorMessage}`
+                        });
+                      } finally {
+                        setUploadingFiles?.((prev) => ({ ...prev, [field.name]: false }));
+                        e.target.value = "";
+                      }
+                    },
+                    disabled: uploadingFiles[field.name] || false
+                  }
+                ),
+                isUploading ? /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: { display: "flex", flexDirection: "column", alignItems: "center", gap: 1, py: 3, width: "100%" }, children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(material.CircularProgress, { size: 40 }),
+                  /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "body2", sx: { fontWeight: 500, color: formColors.primary }, children: "Uploading files..." }),
+                  /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "caption", sx: { color: formColors.textSecondary }, children: "Please wait while files are being uploaded" })
+                ] }) : !hasFiles ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(CloudUploadIcon__default.default, { sx: { fontSize: 40, color: formColors.textSecondary, mb: 1 } }),
+                  /* @__PURE__ */ jsxRuntime.jsxs(material.Typography, { variant: "caption", sx: { color: formColors.textSecondary }, children: [
+                    "Click to upload or drag and drop",
+                    isMultiple && " (multiple files allowed)"
+                  ] }),
+                  field.validation?.allowedFileTypes && field.validation.allowedFileTypes.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(material.Typography, { variant: "caption", sx: { mt: 0.5, color: formColors.textSecondary }, children: [
+                    "Allowed: ",
+                    field.validation.allowedFileTypes.join(", ")
+                  ] }),
+                  field.validation?.maxFileSize && /* @__PURE__ */ jsxRuntime.jsxs(material.Typography, { variant: "caption", sx: { mt: 0.5, color: formColors.textSecondary }, children: [
+                    "Max size: ",
+                    formatFileSize(field.validation.maxFileSize),
+                    " per file"
+                  ] })
+                ] }) : /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: { width: "100%" }, children: [
+                  isMultiple && /* @__PURE__ */ jsxRuntime.jsxs(material.Typography, { variant: "body2", sx: { fontWeight: 500, mb: 1.5 }, children: [
+                    files.length,
+                    " file",
+                    files.length !== 1 ? "s" : "",
+                    " uploaded"
+                  ] }),
+                  files.length === 1 && !isMultiple ? /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: { display: "flex", alignItems: "center", gap: 2, width: "100%" }, children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(InsertDriveFileIcon__default.default, { sx: { fontSize: 40, color: formColors.primary } }),
+                    /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: { flexGrow: 1, minWidth: 0 }, children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "body2", sx: { fontWeight: 500, overflow: "hidden", textOverflow: "ellipsis", maxWidth: isMobile ? "200px" : "300px" }, children: files[0] instanceof File ? files[0].name : files[0].originalName || files[0].fileName }),
+                      /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "caption", sx: { color: formColors.textSecondary }, children: formatFileSize(files[0].size || 0) })
+                    ] }),
+                    /* @__PURE__ */ jsxRuntime.jsx(material.Tooltip, { title: "Remove file", placement: "bottom", arrow: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+                      material.IconButton,
+                      {
+                        size: "small",
+                        onClick: (e) => {
+                          e.preventDefault();
+                          e.stopPropagation();
+                          formField.onChange(null);
+                          const fileInput = document.getElementById(`file-input-${field.name}`);
+                          if (fileInput) {
+                            fileInput.value = "";
+                          }
+                        },
+                        sx: { color: formColors.error },
+                        children: /* @__PURE__ */ jsxRuntime.jsx(CloseIcon__default.default, { fontSize: "small" })
+                      }
+                    ) })
+                  ] }) : /* @__PURE__ */ jsxRuntime.jsx(material.Box, { sx: { display: "flex", flexDirection: "column", gap: 1, width: "100%" }, children: files.map((file, index) => {
+                    const fileName = file instanceof File ? file.name : file.originalName || file.fileName;
+                    return /* @__PURE__ */ jsxRuntime.jsxs(
+                      material.Box,
+                      {
+                        sx: {
+                          display: "flex",
+                          alignItems: "center",
+                          gap: 1.5,
+                          p: 1,
+                          borderRadius: 1,
+                          backgroundColor: formColors.background,
+                          border: "1px solid",
+                          borderColor: formColors.divider
+                        },
+                        children: [
+                          /* @__PURE__ */ jsxRuntime.jsx(InsertDriveFileIcon__default.default, { sx: { fontSize: 32, color: formColors.primary } }),
+                          /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: { flexGrow: 1, minWidth: 0 }, children: [
+                            /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "body2", sx: { fontWeight: 500, overflow: "hidden", textOverflow: "ellipsis" }, children: fileName }),
+                            /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "caption", sx: { color: formColors.textSecondary }, children: formatFileSize(file.size || 0) })
+                          ] }),
+                          /* @__PURE__ */ jsxRuntime.jsx(material.Tooltip, { title: "Remove file", placement: "bottom", arrow: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+                            material.IconButton,
+                            {
+                              size: "small",
+                              onClick: (e) => {
+                                e.preventDefault();
+                                e.stopPropagation();
+                                if (isMultiple) {
+                                  const updatedFiles = files.filter((_, i) => i !== index);
+                                  formField.onChange(updatedFiles.length > 0 ? updatedFiles : []);
+                                } else {
+                                  formField.onChange(null);
+                                }
+                              },
+                              sx: { color: formColors.error },
+                              children: /* @__PURE__ */ jsxRuntime.jsx(CloseIcon__default.default, { fontSize: "small" })
+                            }
+                          ) })
+                        ]
+                      },
+                      `${fileName}-${index}`
+                    );
+                  }) })
+                ] })
+              ]
+            }
+          ),
+          errors[field.name] && /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "caption", sx: { mt: 1, display: "block", color: formColors.error }, children: errors[field.name]?.message })
+        ] });
+      }
+    },
+    field.name
+  );
+};
+
+// src/utils/formHelpers.ts
+var getDefaultValue = (field) => {
+  switch (field.type) {
+    case "checkbox":
+    case "toggle":
+      return false;
+    case "datepicker":
+      return null;
+    case "file":
+      return field.allowMultiple ? [] : null;
+    case "select":
+    case "formReference":
+    case "apiReference":
+      return field.allowMultiple ? [] : "";
+    case "text":
+    case "email":
+    case "number":
+    case "radio":
+    case "ckeditor":
+    default:
+      return "";
+  }
+};
+var FormReferenceField = ({ field, control, defaultValue, rules, errors, services }) => {
+  const isMultiple = field.allowMultiple || false;
+  const [options, setOptions] = react.useState([]);
+  const [isLoading, setIsLoading] = react.useState(false);
+  const formReferenceService = services?.formReference || defaultFormReferenceService;
+  const fetchOptions = react.useCallback(() => {
+    if (!field.referenceFormName || !field.referenceFieldName) return;
+    setIsLoading(true);
+    formReferenceService.fetchOptions(field.referenceFormName, field.referenceFieldName).then((opts) => {
+      setOptions(opts);
+    }).catch((error) => {
+      console.error("Failed to fetch form reference options:", error);
+      setOptions([]);
+    }).finally(() => {
+      setIsLoading(false);
+    });
+  }, [field.referenceFormName, field.referenceFieldName, formReferenceService]);
+  react.useEffect(() => {
+    fetchOptions();
+  }, [fetchOptions]);
+  const selectOptions = react.useMemo(() => {
+    return options.map((opt) => ({
+      value: String(opt.value),
+      label: opt.label
+    }));
+  }, [options]);
+  const fieldDefaultValue = defaultValue ?? getDefaultValue(field);
+  const fieldRules = rules ?? buildFieldRules(field);
+  const isDisabled = !field.referenceFormName || !field.referenceFieldName;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactHookForm.Controller,
+    {
+      name: field.name,
+      control,
+      defaultValue: fieldDefaultValue,
+      rules: fieldRules,
+      render: ({ field: formField }) => {
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          SimpleSelect,
+          {
+            label: field.label,
+            value: formField.value,
+            onChange: (value) => {
+              formField.onChange(value);
+            },
+            options: selectOptions,
+            placeholder: field.placeholder || "Search and select...",
+            helperText: errors[field.name]?.message,
+            fullWidth: true,
+            size: "small",
+            required: field.required,
+            error: !!errors[field.name],
+            disabled: isDisabled || isLoading,
+            multiple: isMultiple,
+            isLoading,
+            refreshable: true,
+            onRefresh: fetchOptions
+          }
+        );
+      }
+    },
+    field.name
+  );
+};
+var ApiReferenceField = ({ field, control, defaultValue, rules, errors, services }) => {
+  const isMultiple = field.allowMultiple || false;
+  const [options, setOptions] = react.useState([]);
+  const [isLoading, setIsLoading] = react.useState(false);
+  const apiReferenceService = services?.apiReference || defaultApiReferenceService;
+  const fetchOptions = react.useCallback(() => {
+    if (!field.apiEndpoint || !field.apiLabelField) return;
+    setIsLoading(true);
+    apiReferenceService.fetchOptions(field.apiEndpoint, field.apiLabelField, field.apiValueField || "_id").then((opts) => {
+      setOptions(opts);
+    }).catch((error) => {
+      console.error("Failed to fetch API reference options:", error);
+      setOptions([]);
+    }).finally(() => {
+      setIsLoading(false);
+    });
+  }, [field.apiEndpoint, field.apiLabelField, field.apiValueField, apiReferenceService]);
+  react.useEffect(() => {
+    fetchOptions();
+  }, [fetchOptions]);
+  const selectOptions = react.useMemo(() => {
+    return options.map((opt) => ({
+      value: String(opt.value),
+      label: opt.label
+    }));
+  }, [options]);
+  const fieldDefaultValue = defaultValue ?? getDefaultValue(field);
+  const fieldRules = rules ?? buildFieldRules(field);
+  const isDisabled = !field.apiEndpoint || !field.apiLabelField;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactHookForm.Controller,
+    {
+      name: field.name,
+      control,
+      defaultValue: fieldDefaultValue,
+      rules: fieldRules,
+      render: ({ field: formField }) => {
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          SimpleSelect,
+          {
+            label: field.label,
+            value: formField.value,
+            onChange: (value) => {
+              formField.onChange(value);
+            },
+            options: selectOptions,
+            placeholder: field.placeholder || "Search and select...",
+            helperText: errors[field.name]?.message,
+            fullWidth: true,
+            size: "small",
+            required: field.required,
+            error: !!errors[field.name],
+            disabled: isDisabled || isLoading,
+            multiple: isMultiple,
+            isLoading,
+            refreshable: true,
+            onRefresh: fetchOptions
+          }
+        );
+      }
+    },
+    field.name
+  );
+};
+
+exports.ApiReferenceField = ApiReferenceField;
+exports.CKEditorField = CKEditorField;
+exports.CheckboxField = CheckboxField;
+exports.ColorField = ColorField;
+exports.DateTimePickerField = DateTimePickerField;
+exports.FileField = FileField;
+exports.FormReferenceField = FormReferenceField;
+exports.RadioField = RadioField;
+exports.SelectField = SelectField;
+exports.TextField = TextField;
+exports.ToggleField = ToggleField;
+//# sourceMappingURL=fields.js.map
+//# sourceMappingURL=fields.js.map