react-admin-crud-manager 1.0.0

package/src/components/Form/components/RenderFields.jsx

@@ -0,0 +1,181 @@
+import React from "react";
+import Select from "./Select";
+import Switch from "./Switch";
+import PhoneInput from "./PhoneInput";
+import { TextArea } from "./TextArea";
+import ImagePicker from "./ImagePicker";
+import { Input } from "./Input";
+import TinyEditor from "./TinyEditor";
+import Checkbox from "./Checkbox";
+
+const RenderFields = ({ field, formData, handleChange }) => {
+  const {
+    key,
+    label,
+    type,
+    options,
+    placeholder,
+    rows,
+    inputClass,
+    search,
+    accept,
+    text,
+    required = false,
+    minLength,
+    dragDrop,
+    parentClass,
+    countriesList,
+    defaultCountry,
+    multiple,
+    dropdownMaxHeight,
+    editorKey,
+    fontFamily,
+    disabled,
+  } = field;
+
+  let value = formData?.[key];
+  if (value === undefined || value === null) {
+    value = "";
+  }
+
+  const finalPlaceholder =
+    placeholder || (type === "select" ? `Select ${label}` : `Enter ${label}`);
+
+  const baseClass =
+    "w-full px-3 py-2 rounded-md border border-gray-300 dark:border-gray-600 text-sm focus:outline-none focus:ring-1 focus:ring-blue-200 bg-white text-black dark:bg-gray-700 dark:text-white";
+
+  switch (type) {
+    case "select":
+      return (
+        <Select
+          options={options || []}
+          value={value}
+          onChange={(val) => handleChange(key, val)}
+          placeholder={finalPlaceholder}
+          className={inputClass || ""}
+          search={search}
+          required={required}
+          label={label}
+          name={key}
+          disabled={disabled}
+          parentClass={parentClass}
+          multiple={multiple}
+          dropdownMaxHeight={dropdownMaxHeight}
+        />
+      );
+
+    case "checkbox":
+      return (
+        <Checkbox
+          name={key}
+          label={label}
+          options={options || []}
+          value={value}
+          onChange={(val) => handleChange(key, val)}
+          required={required}
+          parentClass={parentClass}
+          className={inputClass || ""}
+          multiSelect={multiple}
+          disabled={disabled}
+        />
+      );
+
+    case "switch":
+      return (
+        <Switch
+          value={value}
+          onChange={(val) => handleChange(key, val)}
+          text={text}
+          options={options || []}
+          label={label}
+          required={required}
+          name={key}
+          disabled={disabled}
+          parentClass={parentClass}
+        />
+      );
+
+    case "phone":
+      return (
+        <PhoneInput
+          value={value}
+          onChange={(val) => handleChange(key, val)}
+          countriesList={countriesList}
+          defaultCountry={defaultCountry}
+          required={required}
+          placeholder={finalPlaceholder}
+          search={search}
+          label={label}
+          name={key}
+          disabled={disabled}
+          parentClass={parentClass}
+        />
+      );
+
+    case "textarea":
+      return (
+        <TextArea
+          value={value}
+          onChange={(e) => handleChange(key, e.target.value)}
+          placeholder={finalPlaceholder}
+          rows={rows || 3}
+          className={`${baseClass} ${inputClass || ""}`}
+          required={required}
+          name={key}
+          label={label}
+          disabled={disabled}
+          parentClass={parentClass}
+        />
+      );
+
+    case "image":
+      return (
+        <ImagePicker
+          value={value}
+          onChange={(imgObj) => handleChange(key, imgObj)}
+          required={required}
+          accept={accept || "image/*"}
+          id={`file-${key}`}
+          dragDrop={dragDrop}
+          label={label}
+          name={key}
+          parentClass={parentClass}
+        />
+      );
+
+    case "tinyEditor":
+      return (
+        <TinyEditor
+          value={value}
+          onChange={(newValue) => handleChange(key, newValue)}
+          required={required}
+          key={`editor-${key}`}
+          placeholder={finalPlaceholder}
+          label={label}
+          parentClass={parentClass}
+          fontFamily={fontFamily}
+          editorKey={editorKey}
+          disabled={disabled}
+        />
+      );
+
+    default:
+      return (
+        <Input
+          type={type || "text"}
+          value={value}
+          onChange={(e) => handleChange(key, e.target.value)}
+          placeholder={finalPlaceholder}
+          className={`${baseClass} ${inputClass || ""}`}
+          required={required}
+          name={key}
+          minLength={minLength}
+          label={label}
+          parentClass={parentClass}
+          disabled={disabled}
+        />
+      );
+  }
+};
+
+export default RenderFields;

package/src/components/Form/components/Select.jsx

@@ -0,0 +1,191 @@
+import React, { useState, useEffect, useRef } from "react";
+import { ChevronDown, Search, Check } from "lucide-react";
+import InputLabel from "./InputLabel";
+
+const Select = ({
+  options = [],
+  value,
+  onChange,
+  placeholder = "Select option",
+  className = "",
+  disabled = false,
+  search = false,
+  label = "",
+  required = false,
+  name = "",
+  parentClass = "",
+  multiple = false, // ✅ NEW
+  dropdownMaxHeight = "",
+}) => {
+  const [open, setOpen] = useState(false);
+  const [searchTerm, setSearchTerm] = useState("");
+  const [showAboveState, setShowAboveState] = useState(true);
+  const dropdownRef = useRef(null);
+  const searchInputRef = useRef(null);
+
+  const normalize = (val) =>
+    typeof val === "boolean" ? String(val) : String(val ?? "");
+
+  const normalizedValue = multiple
+    ? (value || []).map(normalize)
+    : normalize(value);
+
+  const filteredOptions = options.filter((option) =>
+    option.label.toLowerCase().includes(searchTerm.toLowerCase()),
+  );
+
+  const isSelected = (optionValue) => {
+    const normalized = normalize(optionValue);
+    if (multiple) {
+      return normalizedValue.includes(normalized);
+    }
+    return normalized === normalizedValue;
+  };
+
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+        setOpen(false);
+        setSearchTerm("");
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+
+  useEffect(() => {
+    if (open && dropdownRef.current) {
+      const rect = dropdownRef.current.getBoundingClientRect();
+      const viewportHeight = window.innerHeight;
+      const spaceBelow = viewportHeight - rect.bottom;
+      const dropdownHeight = 200;
+      setShowAboveState(spaceBelow < dropdownHeight);
+    }
+  }, [open]);
+
+  useEffect(() => {
+    if (open && searchInputRef.current) {
+      searchInputRef.current.focus();
+    }
+  }, [open]);
+
+  const handleOptionClick = (optionValue) => {
+    let finalValue = optionValue;
+    if (optionValue === "true") finalValue = true;
+    else if (optionValue === "false") finalValue = false;
+
+    if (multiple) {
+      const exists = normalizedValue.includes(normalize(optionValue));
+
+      let newValues;
+      if (exists) {
+        newValues = value.filter(
+          (v) => normalize(v) !== normalize(optionValue),
+        );
+      } else {
+        newValues = [...(value || []), finalValue];
+      }
+
+      onChange(newValues);
+    } else {
+      onChange(finalValue);
+      setOpen(false);
+    }
+
+    setSearchTerm("");
+  };
+
+  const selectedLabels = multiple
+    ? options
+        .filter((opt) => isSelected(opt.value))
+        .map((opt) => opt.label)
+        .join(", ")
+    : options.find((opt) => isSelected(opt.value))?.label;
+
+  return (
+    <div key={name} className={parentClass || "col-span-12"}>
+      <InputLabel label={label} required={required} />
+
+      <div className={`relative ${className}`} ref={dropdownRef}>
+        <button
+          type="button"
+          onClick={() => !disabled && setOpen(!open)}
+          disabled={disabled}
+          className={`w-full h-10 px-3 border border-gray-300 dark:border-gray-600 rounded-md text-left text-sm flex items-center justify-between 
+          ${
+            !selectedLabels
+              ? "text-gray-500 dark:text-gray-400"
+              : "dark:text-white"
+          } 
+          ${disabled ? "opacity-50 cursor-not-allowed" : "dark:bg-gray-700"}`}
+        >
+          <span className="truncate">{selectedLabels || placeholder}</span>
+
+          <ChevronDown
+            className={`w-4 h-4 transition-transform ${
+              open ? "rotate-180" : ""
+            }`}
+          />
+        </button>
+
+        {open && (
+          <div
+            className={`absolute z-50 w-full border rounded-md bg-white dark:bg-gray-700 shadow-lg 
+            ${showAboveState ? "bottom-full mb-1" : "top-full mt-1"}`}
+          >
+            {search && (
+              <div className="p-2 border-b border-gray-200 dark:border-gray-600">
+                <div className="relative">
+                  <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" />
+                  <input
+                    ref={searchInputRef}
+                    type="text"
+                    value={searchTerm}
+                    onChange={(e) => setSearchTerm(e.target.value)}
+                    placeholder="Search..."
+                    className="w-full pl-9 pr-3 py-2 text-sm border rounded-md bg-white dark:bg-gray-800 dark:text-white placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none"
+                  />
+                </div>
+              </div>
+            )}
+
+            <div
+              className={`max-h-40 overflow-y-auto`}
+              style={{
+                maxHeight: dropdownMaxHeight || "",
+              }}
+            >
+              {filteredOptions.length > 0 ? (
+                filteredOptions.map((option) => (
+                  <button
+                    key={String(option.value)}
+                    type="button"
+                    onClick={() => handleOptionClick(String(option.value))}
+                    className={`w-full px-3 py-2 text-left text-sm flex items-center justify-between hover:bg-gray-100 dark:hover:bg-gray-600 
+                    ${
+                      isSelected(option.value)
+                        ? "bg-blue-50 dark:bg-blue-900/20 text-blue-700 dark:text-blue-300"
+                        : ""
+                    }`}
+                  >
+                    <span>{option.label}</span>
+
+                    {multiple && isSelected(option.value) && (
+                      <Check className="w-4 h-4" />
+                    )}
+                  </button>
+                ))
+              ) : (
+                <div className="px-3 py-2 text-sm text-gray-500 dark:text-gray-400">
+                  No options found
+                </div>
+              )}
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default Select;

package/src/components/Form/components/Switch.jsx

@@ -0,0 +1,64 @@
+import React from "react";
+import InputLabel from "./InputLabel";
+
+const Switch = ({
+  value = true,
+  onChange,
+  text,
+  options = [],
+  label,
+  required,
+  name = "",
+  disabled = false,
+  parentClass = "",
+}) => {
+  const radioOptions =
+    options.length > 0
+      ? options
+      : [
+          { label: "Active", value: true },
+          { label: "Inactive", value: false },
+        ];
+
+  return (
+    <>
+      <div key={name} className={parentClass || "col-span-12"}>
+        <InputLabel label={label} required={required} />
+        <div className="flex items-center justify-between h-10 gap-4 bg-gray-100 dark:bg-gray-700 px-3 rounded-md border border-gray-100 dark:border-gray-600">
+          {/* Left Text */}
+          {text && (
+            <p className="text-xs text-gray-600 dark:text-gray-400 flex-shrink overflow-hidden text-ellipsis whitespace-nowrap max-w-[200px]">
+              {text}
+            </p>
+          )}
+
+          {/* Radio Buttons */}
+          <div className="flex items-center gap-6">
+            {radioOptions.map((opt, idx) => (
+              <label
+                key={idx}
+                className="flex items-center gap-2 cursor-pointer select-none"
+              >
+                <input
+                  type="radio"
+                  name="switch-field"
+                  required={required && idx === 0}
+                  value={opt.value}
+                  disabled={disabled}
+                  checked={value === opt.value}
+                  onChange={() => onChange(opt.value)}
+                  className="w-4 h-4  border-gray-300 cursor-pointer"
+                />
+                <span className="text-sm text-gray-700 dark:text-white">
+                  {opt.label}
+                </span>
+              </label>
+            ))}
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default Switch;

package/src/components/Form/components/TextArea.jsx

@@ -0,0 +1,31 @@
+import React, { useState } from "react";
+import InputLabel from "./InputLabel";
+
+const TextArea = React.forwardRef(
+  ({ className = "", label, required, ...props }, ref) => {
+    const combinedClassName = `
+      placeholder-gray-400 dark:placeholder-gray-400
+      ${className}
+    `.trim();
+
+    return (
+      <>
+        <div key={props.name} className={props.parentClass || "col-span-12"}>
+          <InputLabel label={label} required={required} />
+          <div className="relative">
+            <textarea
+              className={combinedClassName}
+              ref={ref}
+              required={required}
+              {...props}
+            />
+          </div>
+        </div>
+      </>
+    );
+  },
+);
+
+TextArea.displayName = "TextArea";
+
+export { TextArea };

package/src/components/Form/components/TinyEditor.jsx

@@ -0,0 +1,113 @@
+import React from "react";
+import { Editor } from "@tinymce/tinymce-react";
+import InputLabel from "./InputLabel";
+
+const TinyEditor = ({
+  key,
+  editorKey = "",
+  value = "",
+  onChange,
+  label = "",
+  required = false,
+  placeholder = "",
+  parentClass = "col-span-12",
+  height = 400,
+  inline = false,
+  disabled = false,
+  plugins,
+  toolbar,
+  menubar = false,
+  fontFamily = "Inter, sans-serif",
+  initConfig = {},
+  imageUploadHandler, // ✅ Promise function passed from parent
+}) => {
+  const defaultPlugins = [
+    "advlist",
+    "autolink",
+    "lists",
+    "link",
+    "image",
+    "charmap",
+    "preview",
+    "anchor",
+    "searchreplace",
+    "visualblocks",
+    "code",
+    "fullscreen",
+    "insertdatetime",
+    "media",
+    "table",
+    "help",
+    "wordcount",
+  ];
+
+  const defaultToolbar =
+    "undo redo | blocks | bold italic underline forecolor backcolor | " +
+    "alignleft aligncenter alignright alignjustify | " +
+    "bullist numlist outdent indent | link image media table | " +
+    "removeformat | code fullscreen preview";
+
+  // ✅ Handle Image Upload via Promise
+  const handleImageUpload = (blobInfo) => {
+    return new Promise((resolve, reject) => {
+      if (!imageUploadHandler) {
+        // fallback to base64 if no handler provided
+        resolve(`data:${blobInfo.blob().type};base64,${blobInfo.base64()}`);
+        return;
+      }
+
+      imageUploadHandler(blobInfo)
+        .then((url) => {
+          if (!url) {
+            reject("Upload failed: No URL returned");
+          } else {
+            resolve(url);
+          }
+        })
+        .catch((error) => {
+          reject(
+            typeof error === "string"
+              ? error
+              : error?.message || "Image upload failed",
+          );
+        });
+    });
+  };
+
+  return (
+    <div key={key} className={parentClass}>
+      {label && <InputLabel label={label} required={required} />}
+
+      <Editor
+        apiKey={editorKey}
+        value={value}
+        disabled={disabled}
+        init={{
+          height,
+          inline,
+          menubar,
+          branding: false,
+          statusbar: true,
+          automatic_uploads: true,
+          images_upload_handler: handleImageUpload,
+          plugins: plugins ?? defaultPlugins,
+          toolbar: toolbar ?? defaultToolbar,
+          placeholder,
+          content_style: `
+            body {
+                font-family: ${fontFamily};
+            }
+            `,
+          ...initConfig,
+        }}
+        onEditorChange={(content) => {
+          if (onChange) {
+            onChange(content);
+          }
+        }}
+      />
+    </div>
+  );
+};
+
+export default TinyEditor;

package/src/components/Loader/Spinner.jsx

@@ -0,0 +1,21 @@
+import React from 'react';
+
+const Spinner = ({ size = 'lg', className = '', color = 'border-blue-500' }) => {
+  const sizeClasses = {
+    sm: 'w-4 h-4 border-2',
+    md: 'w-6 h-6 border-4', 
+    lg: 'w-8 h-8 border-4',
+    xl: 'w-12 h-12 border-8',
+  };
+
+  return (
+    <div
+      className={`rounded-full border-4 border-blue-500 border-t-gray-200 animate-spin ${sizeClasses[size]} ${className}`}
+      style={{
+        borderTopColor: color,
+      }}
+    />
+  );
+};
+
+export default Spinner;