react-smart-fields 1.0.1 → 1.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "react-smart-fields",
-    "version": "1.0.1",
+    "version": "1.0.2",
     "description": "> A flexible, customizable, and developer-friendly component to generate dynamic form fields in React. Supports all HTML inputs, validation, and styling out of the box.",
     "license": "MIT",
     "author": "Pratik Panchal",

package/src/components/DynamicFields.tsx

@@ -0,0 +1,259 @@
+import React, { useState, useEffect, useRef } from "react";
+
+export interface FieldOption {
+    label: string;
+    value: string | number | boolean;
+}
+
+export interface FieldConfig {
+    name: string;
+    label?: string;
+    type: "text" | "number" | "select" | "radio" | "checkbox";
+    options?: FieldOption[];
+    required?: boolean;
+    placeholder?: string;
+    description?: string;
+}
+
+export interface DynamicFieldsProps {
+    fields: FieldConfig[];
+    onChange: (data: Record<string, any>) => void;
+    className?: string;
+    inputClassName?: string;
+    labelClassName?: string;
+    mainFieldClassName?: string;
+    fieldClassName?: string;
+    errorClassName?: string;
+    selectClassName?: string;
+    optionClassName?: string;
+    checkboxClassName?: string;
+    radioClassName?: string;
+    title?: string;
+    description?: string;
+}
+
+export const DynamicFields: React.FC<DynamicFieldsProps> = ({
+    fields,
+    onChange,
+    className = "",
+    inputClassName = "",
+    labelClassName = "",
+    mainFieldClassName = "",
+    fieldClassName = "",
+    errorClassName = "",
+    selectClassName = "",
+    optionClassName = "",
+    checkboxClassName = "",
+    radioClassName = "",
+    title,
+    description
+}) => {
+    const [formData, setFormData] = useState<Record<string, any>>({});
+    const [formErrors, setFormErrors] = useState<Record<string, string>>({});
+    const [openDropdowns, setOpenDropdowns] = useState<Record<string, boolean>>({});
+    const dropdownRefs = useRef<Record<string, HTMLDivElement | null>>({});
+
+    // Consistent styling for all components with dark mode support
+
+    const defaultInputClassName = "w-full rounded-lg bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 px-4 py-2 text-sm text-gray-800 dark:text-gray-200 placeholder:text-gray-500 dark:placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 focus:border-blue-500 dark:focus:border-blue-400 shadow-sm transition-colors";
+
+    const defaultLabelClassName = "flex text-sm font-medium text-gray-800 dark:text-gray-200 leading-none mb-2";
+
+    const defaultFieldClassName = "w-full";
+
+    const defaultErrorClassName = "text-sm font-medium text-red-500 dark:text-red-400";
+
+    const defaultSelectClassName = "w-full rounded-lg bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 px-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 focus:border-blue-500 dark:focus:border-blue-400 cursor-pointer shadow-sm";
+
+    const defaultCheckboxClassName = "h-4 w-4 rounded border border-gray-200 dark:border-gray-600 bg-white dark:bg-gray-700 shadow-sm focus:outline-none transition-colors checked:bg-blue-500 dark:checked:bg-blue-400 checked:border-blue-500 dark:checked:border-blue-400";
+
+    const defaultRadioClassName = "select-none h-4 w-4 rounded-full border border-gray-200 dark:border-gray-600 bg-white dark:bg-gray-700 shadow-sm focus:outline-none transition-colors checked:bg-blue-500 dark:checked:bg-blue-400 checked:border-blue-500 dark:checked:border-blue-400";
+
+    const defaultOptionClassName = "py-2 px-4 text-sm text-gray-800 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-700 cursor-pointer first:rounded-t-lg last:rounded-b-lg transition-colors";
+
+    useEffect(() => {
+        const initialData: Record<string, any> = {};
+        fields.forEach((f) => {
+            initialData[f.name] = f.type === "checkbox" ? false : "";
+        });
+        setFormData(initialData);
+    }, [fields]);
+
+    useEffect(() => {
+        const handleClickOutside = (event: MouseEvent) => {
+            Object.keys(dropdownRefs.current).forEach((fieldName) => {
+                const ref = dropdownRefs.current[fieldName];
+                if (ref && !ref.contains(event.target as Node)) {
+                    setOpenDropdowns(prev => ({ ...prev, [fieldName]: false }));
+                }
+            });
+        };
+
+        document.addEventListener('mousedown', handleClickOutside);
+        return () => document.removeEventListener('mousedown', handleClickOutside);
+    }, []);
+
+    const toggleDropdown = (fieldName: string) => {
+        setOpenDropdowns(prev => ({ ...prev, [fieldName]: !prev[fieldName] }));
+    };
+
+    const selectOption = (fieldName: string, value: any) => {
+        handleChange(fieldName, value);
+        setOpenDropdowns(prev => ({ ...prev, [fieldName]: false }));
+    };
+
+    const handleChange = (name: string, value: any) => {
+        const updatedData = { ...formData, [name]: value };
+        setFormData(updatedData);
+        onChange(updatedData);
+
+        const field = fields.find((f) => f.name === name);
+        if (field?.required && (value === "" || value === null || value === undefined)) {
+            setFormErrors((prev) => ({ ...prev, [name]: "This field is required" }));
+        } else {
+            setFormErrors((prev) => {
+                const newErrors = { ...prev };
+                delete newErrors[name];
+                return newErrors;
+            });
+        }
+    };
+
+    const renderField = (field: FieldConfig) => {
+        const error = formErrors[field.name];
+        const finalInputClassName = `${defaultInputClassName} ${inputClassName || ""}`.trim();
+        const finalLabelClassName = `${defaultLabelClassName} ${labelClassName || ""}`.trim();
+        const finalFieldClassName = `${defaultFieldClassName} ${fieldClassName || ""}`.trim();
+        const finalErrorClassName = `${defaultErrorClassName} ${errorClassName || ""}`.trim();
+        const finalSelectClassName = `${defaultSelectClassName} ${selectClassName || ""}`.trim();
+        const finalCheckboxClassName = `${defaultCheckboxClassName} ${checkboxClassName || ""}`.trim();
+        const finalRadioClassName = `${defaultRadioClassName} ${radioClassName || ""}`.trim();
+        const finalOptionClassName = `${defaultOptionClassName} ${optionClassName || ""}`.trim();
+        const inputClassWithError = `${finalInputClassName} ${error ? "border-red-500 dark:border-red-400 focus:ring-red-500 dark:focus:ring-red-400 focus:border-red-500 dark:focus:border-red-400" : ""}`;
+        const selectClassWithError = `${finalSelectClassName} ${error ? "border-red-500 dark:border-red-400 focus:ring-red-500 dark:focus:ring-red-400 focus:border-red-500 dark:focus:border-red-400" : ""}`;
+
+        return (
+            <div key={field.name} className={finalFieldClassName}>
+                {field.label && field.type !== "checkbox" && (
+                    <label htmlFor={field.name} className={finalLabelClassName}>
+                        {field.label}
+                        {field.required && <span className="text-red-500 dark:text-red-400 ml-1">*</span>}
+                    </label>
+                )}
+
+                {field.description && field.type !== "checkbox" && (
+                    <p className="text-sm text-gray-500 dark:text-gray-400">{field.description}</p>
+                )}
+
+                {field.type === "select" && field.options ? (
+                    <div
+                        ref={el => { dropdownRefs.current[field.name] = el; }}
+                        className="relative"
+                    >
+                        <div
+                            className={`${selectClassWithError} flex items-center justify-between`}
+                            onClick={() => toggleDropdown(field.name)}
+                        >
+                            <span className={formData[field.name] ? "text-gray-800 dark:text-gray-200" : "text-gray-500 dark:text-gray-400"}>
+                                {formData[field.name]
+                                    ? field.options.find(opt => String(opt.value) === String(formData[field.name]))?.label
+                                    : field.placeholder || "Select an option..."
+                                }
+                            </span>
+                            <svg
+                                className={`w-4 h-4 text-gray-400 dark:text-gray-500 transform transition-transform ${openDropdowns[field.name] ? 'rotate-180' : ''}`}
+                                fill="none"
+                                stroke="currentColor"
+                                viewBox="0 0 24 24"
+                            >
+                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+                            </svg>
+                        </div>
+
+                        {openDropdowns[field.name] && (
+                            <div className="absolute z-50 w-full mt-1 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-lg dark:shadow-2xl overflow-hidden">
+                                {field.options.map((opt, index) => (
+                                    <div
+                                        key={String(opt.value)}
+                                        className={`${finalOptionClassName} ${index === 0 ? 'rounded-t-lg' : ''} ${index === field.options!.length - 1 ? 'rounded-b-lg' : ''}`}
+                                        onClick={() => selectOption(field.name, opt.value)}
+                                    >
+                                        {opt.label}
+                                    </div>
+                                ))}
+                            </div>
+                        )}
+                    </div>
+                ) : field.type === "radio" && field.options ? (
+                    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
+                        {field.options.map((opt) => (
+                            <div key={String(opt.value)} className="flex items-center space-x-2">
+                                <input
+                                    type="radio"
+                                    id={`${field.name}-${opt.value}`}
+                                    name={field.name}
+                                    value={String(opt.value)}
+                                    checked={formData[field.name] === opt.value}
+                                    onChange={() => handleChange(field.name, opt.value)}
+                                    className={finalRadioClassName}
+                                />
+                                <label
+                                    htmlFor={`${field.name}-${opt.value}`}
+                                    className="select-none text-sm font-medium text-gray-800 dark:text-gray-200 leading-none cursor-pointer"
+                                >
+                                    {opt.label}
+                                </label>
+                            </div>
+                        ))}
+                    </div>
+                ) : field.type === "checkbox" ? (
+                    <div className="flex items-center space-x-2">
+                        <input
+                            type="checkbox"
+                            id={field.name}
+                            checked={formData[field.name] || false}
+                            onChange={(e) => handleChange(field.name, e.target.checked)}
+                            className={finalCheckboxClassName}
+                        />
+                        <label htmlFor={field.name} className="text-sm font-medium text-gray-800 dark:text-gray-200 leading-none cursor-pointer">
+                            {field.label}
+                            {field.required && <span className="text-red-500 dark:text-red-400 ml-1">*</span>}
+                        </label>
+                        {field.description && (
+                            <p className="text-sm text-gray-500 dark:text-gray-400 ml-6">{field.description}</p>
+                        )}
+                    </div>
+                ) : (
+                    <input
+                        type={field.type}
+                        id={field.name}
+                        name={field.name}
+                        placeholder={field.placeholder}
+                        className={inputClassWithError}
+                        value={formData[field.name] ?? ""}
+                        onChange={(e) => handleChange(field.name, field.type === "number" ? Number(e.target.value) || "" : e.target.value)}
+                    />
+                )}
+
+                {error && <p className={finalErrorClassName}>{error}</p>}
+            </div>
+        );
+    };
+
+    return (
+        <div className={`w-full max-w-2xl mx-auto p-6 bg-white dark:bg-gray-900 text-gray-800 dark:text-gray-200 rounded-lg border border-gray-200 dark:border-gray-700 shadow-sm dark:shadow-2xl ${className}`}>
+            {title && (
+                <div>
+                    <h2 className="text-2xl font-semibold text-gray-800 dark:text-gray-100 tracking-tight">{title}</h2>
+                    {description && (
+                        <p className="text-sm text-gray-500 dark:text-gray-400">{description}</p>
+                    )}
+                </div>
+            )}
+
+            <div className={`space-y-2 ${mainFieldClassName}`}>
+                {fields.map(renderField)}
+            </div>
+        </div>
+    );
+};

package/src/index.ts

@@ -1,2 +1,2 @@
-export { DynamicFields } from "./components/DynamicField";
-export type { FieldConfig, FieldOption } from "./components/DynamicField";
+export { DynamicFields } from "./components/DynamicFields";
+export type { FieldConfig, FieldOption } from "./components/DynamicFields";

package/src/components/DynamicField.tsx

@@ -1,193 +0,0 @@
-import React, { useState } from "react";
-
-type FieldType =
-  | "text"
-  | "number"
-  | "email"
-  | "password"
-  | "date"
-  | "checkbox"
-  | "radio"
-  | "select";
-
-export interface FieldOption {
-  label: string;
-  value: string | number | boolean;
-}
-
-export interface FieldConfig {
-  name: string;
-  label?: string;
-  type: FieldType;
-  required?: boolean;
-  defaultValue?: any;
-  customValidation?: (value: any) => string | null;
-  options?: FieldOption[];
-  style?: React.CSSProperties;
-  className?: string;
-}
-
-interface DynamicFieldsProps {
-  fields: FieldConfig[];
-  onChange?: (
-    formData: { [key: string]: any },
-    errors: { [key: string]: string | null }
-  ) => void;
-}
-
-export const DynamicFields: React.FC<DynamicFieldsProps> = ({
-  fields,
-  onChange,
-}) => {
-  const [formData, setFormData] = useState<{ [key: string]: any }>(() => {
-    const initial: any = {};
-    fields.forEach((f) => {
-      initial[f.name] =
-        f.type === "checkbox"
-          ? f.defaultValue ?? false
-          : f.defaultValue ?? "";
-    });
-    return initial;
-  });
-
-  const [errors, setErrors] = useState<{ [key: string]: string | null }>({});
-
-  const validateField = (field: FieldConfig, value: any) => {
-    if (field.required && (value === "" || value === null || value === undefined || value === false)) {
-      return "This field is required";
-    }
-    if (field.customValidation) return field.customValidation(value);
-    return null;
-  };
-
-  const handleChange = (
-    name: string,
-    value: any,
-    field: FieldConfig
-  ) => {
-    const newFormData = { ...formData, [name]: value };
-    const error = validateField(field, value);
-    const newErrors = { ...errors, [name]: error };
-
-    setFormData(newFormData);
-    setErrors(newErrors);
-
-    if (onChange) onChange(newFormData, newErrors);
-  };
-
-  const defaultInputClass =
-    "padding: 0.6rem 1rem; border: 1px solid #ccc; border-radius: 8px; width: 100%; font-size: 1rem; transition: border-color 0.2s ease-in-out; outline: none;";
-  const defaultInputFocus =
-    "focus: border-color: #007BFF;";
-
-  return (
-    <>
-      {fields.map((field) => (
-        <div key={field.name} style={{ marginBottom: "1.25rem" }}>
-          {field.label && (
-            <label
-              htmlFor={field.name}
-              style={{ display: "block", marginBottom: "0.5rem", fontWeight: 600 }}
-            >
-              {field.label}
-            </label>
-          )}
-
-          {/* Select Dropdown */}
-          {field.type === "select" && (
-            <select
-              name={field.name}
-              className={field.className}
-              style={{
-                ...field.style,
-                ...{
-                  padding: "0.6rem 1rem",
-                  border: "1px solid #ccc",
-                  borderRadius: "8px",
-                  width: "100%",
-                  fontSize: "1rem",
-                },
-              }}
-              value={formData[field.name]}
-              onChange={(e) =>
-                handleChange(field.name, e.target.value, field)
-              }
-            >
-              <option value="">Select an option</option>
-              {field.options?.map((opt) => (
-                <option key={String(opt.value)} value={String(opt.value)}>
-                  {opt.label}
-                </option>
-              ))}
-            </select>
-          )}
-
-          {/* Radio Buttons */}
-          {field.type === "radio" && (
-            <div style={{ display: "flex", gap: "1rem" }}>
-              {field.options?.map((opt) => (
-                <label key={String(opt.value)} style={{ display: "flex", alignItems: "center", gap: "0.4rem" }}>
-                  <input
-                    type="radio"
-                    name={field.name}
-                    value={String(opt.value)}
-                    checked={formData[field.name] === opt.value}
-                    onChange={() => handleChange(field.name, opt.value, field)}
-                  />
-                  {opt.label}
-                </label>
-              ))}
-            </div>
-          )}
-
-          {/* Checkbox */}
-          {field.type === "checkbox" && (
-            <label style={{ display: "flex", alignItems: "center", gap: "0.5rem" }}>
-              <input
-                type="checkbox"
-                name={field.name}
-                checked={formData[field.name]}
-                className={field.className}
-                style={field.style}
-                onChange={(e) =>
-                  handleChange(field.name, e.target.checked, field)
-                }
-              />
-              {field.label}
-            </label>
-          )}
-
-          {/* Text, Email, Number, etc. */}
-          {!["select", "radio", "checkbox"].includes(field.type) && (
-            <input
-              type={field.type}
-              name={field.name}
-              value={formData[field.name]}
-              className={field.className}
-              style={{
-                ...{
-                  padding: "0.6rem 1rem",
-                  border: "1px solid #ccc",
-                  borderRadius: "8px",
-                  width: "100%",
-                  fontSize: "1rem",
-                },
-                ...field.style,
-              }}
-              onChange={(e) =>
-                handleChange(field.name, e.target.value, field)
-              }
-            />
-          )}
-
-          {/* Error Display */}
-          {errors[field.name] && (
-            <p style={{ color: "red", marginTop: "0.4rem", fontSize: "0.9rem" }}>
-              {errors[field.name]}
-            </p>
-          )}
-        </div>
-      ))}
-    </>
-  );
-};