react-smart-fields 1.0.2 → 1.1.0

package/.gitattributes

@@ -0,0 +1,2 @@
+# Auto detect text files and perform LF normalization
+* text=auto

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Pratikpanchal25.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,23 +1,86 @@
-# 🧩 react-dynamic-fields
+# 🧩 DynamicFields React Component
 
-> 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.
+A flexible, fully-styled dynamic form generator built with **React** and **Tailwind CSS**, supporting custom input types, validation, and class overrides. Ideal for building forms quickly with full control over design and behavior.
 
 ---
 
-## 🚀 Features
+## ✨ Features
 
-✅ Supports all HTML field types (text, number, select, radio, checkbox, etc.)  
-✅ Real-time error validation (required & custom)  
-✅ Style customization with `style` or `className`  
-✅ Minimal setup – just pass a `fields` config  
-✅ React 18+ support  
-✅ TypeScript ready
+- 📦 Supports `text`, `number`, `checkbox`, `radio`, and `select` fields
+- 💅 Fully customizable via Tailwind-compatible className props
+- 🧠 Built-in required field validation
+- 🧱 Extensible for advanced usage
+- 🌓 Full **dark mode** support
+- 🔄 Real-time `onChange` callback with live `formData` and `errors`
 
 ---
 
 ## 📦 Installation
 
-```bash
-npm install react-dynamic-fields
-# or
-yarn add react-dynamic-fields
+Copy the `DynamicFields.tsx` file into your React project.
+
+Make sure you have Tailwind CSS and React configured in your app.
+
+---
+
+## 🚀 Usage
+
+### Basic Example
+
+```tsx
+import React from "react";
+import DynamicFields from "./DynamicFields";
+
+const fields = [
+  {
+    name: "username",
+    label: "Username",
+    type: "text",
+    required: true,
+  },
+  {
+    name: "email",
+    label: "Email",
+    type: "text",
+    required: true,
+  },
+  {
+    name: "gender",
+    label: "Gender",
+    type: "radio",
+    required: true,
+    options: [
+      { label: "Male", value: "male" },
+      { label: "Female", value: "female" },
+    ],
+  },
+  {
+    name: "country",
+    label: "Country",
+    type: "select",
+    options: [
+      { label: "USA", value: "us" },
+      { label: "India", value: "in" },
+    ],
+  },
+  {
+    name: "subscribe",
+    label: "Subscribe",
+    type: "checkbox",
+  }
+];
+
+function App() {
+  const handleChange = (data) => {
+    console.log("Form Data:", data);
+  };
+
+  return (
+    <DynamicFields
+      fields={fields}
+      title="Sign Up"
+      description="Please fill all fields"
+      onChange={handleChange}
+    />
+  );
+}

package/dist/components/DynamicFields.d.ts

@@ -0,0 +1,31 @@
+import React 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 declare const DynamicFields: React.FC<DynamicFieldsProps>;

package/dist/components/DynamicFields.js

@@ -0,0 +1,97 @@
+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/dist/index.d.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/dist/index.js

@@ -1 +1 @@
-export { DynamicFields } from "./components/DynamicField";
+export { DynamicFields } from "./components/DynamicFields";

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "react-smart-fields",
-    "version": "1.0.2",
+    "version": "1.1.0",
     "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/dist/components/DynamicField.d.ts

@@ -1,27 +0,0 @@
-import React 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 declare const DynamicFields: React.FC<DynamicFieldsProps>;
-export {};

package/dist/components/DynamicField.js

@@ -1,44 +0,0 @@
-import React, { useState } from "react";
-export const DynamicFields = ({ fields, onChange, }) => {
-    const [formData, setFormData] = useState(() => {
-        const initial = {};
-        fields.forEach((f) => {
-            initial[f.name] =
-                f.type === "checkbox"
-                    ? f.defaultValue ?? false
-                    : f.defaultValue ?? "";
-        });
-        return initial;
-    });
-    const [errors, setErrors] = useState({});
-    const validateField = (field, value) => {
-        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, value, field) => {
-        const newFormData = { ...formData, [name]: value };
-        const error = validateField(field, value);
-        const newErrors = { ...errors, [name]: error };
-        setFormData(newFormData);
-        setErrors(newErrors);
-        if (onChange)
-            onChange(newFormData, newErrors);
-    };
-    return (React.createElement(React.Fragment, null, fields.map((field) => (React.createElement("div", { key: field.name, style: { marginBottom: "1rem" } },
-        field.label && (React.createElement("label", { htmlFor: field.name, style: { display: "block" } }, field.label)),
-        field.type === "select" && (React.createElement("select", { name: field.name, className: field.className, style: field.style, value: formData[field.name], onChange: (e) => handleChange(field.name, e.target.value, field) },
-            React.createElement("option", { value: "" }, "Select an option"),
-            field.options?.map((opt) => (React.createElement("option", { key: String(opt.value), value: String(opt.value) }, opt.label))))),
-        field.type === "radio" &&
-            field.options?.map((opt) => (React.createElement("label", { key: String(opt.value), style: { marginRight: "1rem" } },
-                React.createElement("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))),
-        field.type === "checkbox" && (React.createElement("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) })),
-        !["select", "radio", "checkbox"].includes(field.type) && (React.createElement("input", { type: field.type, name: field.name, value: formData[field.name], className: field.className, style: field.style, onChange: (e) => handleChange(field.name, e.target.value, field) })),
-        errors[field.name] && (React.createElement("p", { style: { color: "red", marginTop: "0.25rem" } }, errors[field.name])))))));
-};