react-smart-fields 1.1.6 → 2.2.0

package/dist/components/DynamicFields.js

@@ -1,97 +0,0 @@
-import React, { useState, useEffect, useRef } from "react";
-export const DynamicFields = ({ fields, onChange, className = "", inputClassName = "", labelClassName = "", mainFieldClassName = "", fieldClassName = "", errorClassName = "", selectClassName = "", optionClassName = "", checkboxClassName = "", radioClassName = "", title, description }) => {
-    const [formData, setFormData] = useState({});
-    const [formErrors, setFormErrors] = useState({});
-    const [openDropdowns, setOpenDropdowns] = useState({});
-    const dropdownRefs = useRef({});
-    // 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 = {};
-        fields.forEach((f) => {
-            initialData[f.name] = f.type === "checkbox" ? false : "";
-        });
-        setFormData(initialData);
-    }, [fields]);
-    useEffect(() => {
-        const handleClickOutside = (event) => {
-            Object.keys(dropdownRefs.current).forEach((fieldName) => {
-                const ref = dropdownRefs.current[fieldName];
-                if (ref && !ref.contains(event.target)) {
-                    setOpenDropdowns(prev => ({ ...prev, [fieldName]: false }));
-                }
-            });
-        };
-        document.addEventListener('mousedown', handleClickOutside);
-        return () => document.removeEventListener('mousedown', handleClickOutside);
-    }, []);
-    const toggleDropdown = (fieldName) => {
-        setOpenDropdowns(prev => ({ ...prev, [fieldName]: !prev[fieldName] }));
-    };
-    const selectOption = (fieldName, value) => {
-        handleChange(fieldName, value);
-        setOpenDropdowns(prev => ({ ...prev, [fieldName]: false }));
-    };
-    const handleChange = (name, value) => {
-        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) => {
-        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 (React.createElement("div", { key: field.name, className: finalFieldClassName },
-            field.label && field.type !== "checkbox" && (React.createElement("label", { htmlFor: field.name, className: finalLabelClassName },
-                field.label,
-                field.required && React.createElement("span", { className: "text-red-500 dark:text-red-400 ml-1" }, "*"))),
-            field.description && field.type !== "checkbox" && (React.createElement("p", { className: "text-sm text-gray-500 dark:text-gray-400" }, field.description)),
-            field.type === "select" && field.options ? (React.createElement("div", { ref: el => { dropdownRefs.current[field.name] = el; }, className: "relative" },
-                React.createElement("div", { className: `${selectClassWithError} flex items-center justify-between`, onClick: () => toggleDropdown(field.name) },
-                    React.createElement("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..."),
-                    React.createElement("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" },
-                        React.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }))),
-                openDropdowns[field.name] && (React.createElement("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) => (React.createElement("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))))))) : field.type === "radio" && field.options ? (React.createElement("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3" }, field.options.map((opt) => (React.createElement("div", { key: String(opt.value), className: "flex items-center space-x-2" },
-                React.createElement("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 }),
-                React.createElement("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)))))) : field.type === "checkbox" ? (React.createElement("div", { className: "flex items-center space-x-2" },
-                React.createElement("input", { type: "checkbox", id: field.name, checked: formData[field.name] || false, onChange: (e) => handleChange(field.name, e.target.checked), className: finalCheckboxClassName }),
-                React.createElement("label", { htmlFor: field.name, className: "text-sm font-medium text-gray-800 dark:text-gray-200 leading-none cursor-pointer" },
-                    field.label,
-                    field.required && React.createElement("span", { className: "text-red-500 dark:text-red-400 ml-1" }, "*")),
-                field.description && (React.createElement("p", { className: "text-sm text-gray-500 dark:text-gray-400 ml-6" }, field.description)))) : (React.createElement("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 && React.createElement("p", { className: finalErrorClassName }, error)));
-    };
-    return (React.createElement("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 && (React.createElement("div", null,
-            React.createElement("h2", { className: "text-2xl font-semibold text-gray-800 dark:text-gray-100 tracking-tight" }, title),
-            description && (React.createElement("p", { className: "text-sm text-gray-500 dark:text-gray-400" }, description)))),
-        React.createElement("div", { className: `space-y-2 ${mainFieldClassName}` }, fields.map(renderField))));
-};

package/src/components/DynamicFields.tsx

@@ -1,259 +0,0 @@
-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 +0,0 @@
-export { DynamicFields } from "./components/DynamicFields";
-export type { FieldConfig, FieldOption } from "./components/DynamicFields";

package/tsconfig.json

@@ -1,13 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "ESNext",
-    "module": "ESNext",
-    "jsx": "react",
-    "declaration": true,
-    "outDir": "dist",
-    "strict": true,
-    "esModuleInterop": true,
-    "moduleResolution": "Node"
-  },
-  "include": ["src"]
-}