Add files via upload

ShreyPurohit · Sep 5, 2024 · 015bf63 · 015bf63
1 parent 2c9b975
commit 015bf63
Show file tree

Hide file tree

Showing 6 changed files with 172 additions and 167 deletions.
diff --git a/README.md b/README.md
@@ -1,6 +1,6 @@
-# Dynamic Form Component
+# Customized Dynamic Form Component
 
-A highly customizable and easy-to-use dynamic form component built with React, TypeScript, and React Hook Form. This component allows you to generate a form dynamically based on an array of field configurations, making it suitable for various use cases. Compatible with Tailwind CSS And Bootstrap.
+This package provides a fully customizable dynamic form component for React, built to support various input types and customizable layouts, including support for both Tailwind and Bootstrap. Users can pass an array of form fields and control various form behaviors, CSS classes, validation rules, and form submission handlers.
 
 ## Output
 ![Dynamic Form Output](https://github.com/user-attachments/assets/c7dee211-25c4-4d89-bb80-f06a0618a773)
@@ -13,8 +13,6 @@ npm install dynamic-form-component
 
 ## Peer Dependencies
 Ensure you have the following peer dependencies installed:
-* `react`
-* `react-dom`
 * `react-hook-form`
 * `react-icons`
 
@@ -23,10 +21,18 @@ You can install them with:
 npm install react react-dom react-hook-form react-icons
 ```
 
+## Features
+* __Flexible Input Types:__ Supports `text`, `number`, `email`, `password`, `checkbox`, `radio`, `select`, and `textarea` fields.
+* __Customizable Layouts:__ Customize CSS classes for each field component (wrapper, label, input, icon, error).
+* __Icons:__ Supports React icons or any custom icons.
+* __Validation:__ Leverage React Hook Form’s validation for comprehensive form validation rules.
+* __Custom Buttons:__ Fully customizable submit or action buttons.
+* __CSS Framework Support:__ Compatible with both `Tailwind CSS` and `Bootstrap`
+
 ## Usage
 ### Importing The Component
 ```bash
-import DynamicForm, { IFormField } from 'dynamic-form-component';
+import DynamicForm, { IFormField, ISubmitButtonProps } from 'dynamic-form-component';
 ```
 ### Example Usage
 
@@ -45,126 +51,82 @@ export default {
 
 Below is an example of how to use the `DynamicForm` component in your react project:
 ```js
-import DynamicForm, { IFormField } from 'dynamic-form-component';
-import { AiOutlineLock, AiOutlineMail, AiOutlineNumber, AiOutlineUser } from 'react-icons/ai';
+import { AiOutlineUser } from 'react-icons/ai';
+import DynamicForm, { IFormField, IButtonProps } from 'your-dynamic-form-package';
 
-const App = () => {
+function App() {
     const formFields: IFormField[] = [
         {
             id: 'name',
-            errorId: 'nameErr',
             label: 'Name',
+            error: {
+                id: "nameErr",
+                css: "text-danger" // Add Bootstrap Or Tailwind CSS here
+            },
             type: 'text',
             placeholder: 'Enter your name',
-            required: true,
             validation: {
                 required: 'Name is required',
                 maxLength: {
                     value: 20,
                     message: 'Name must be less than 20 characters',
                 },
             },
-            icon: <AiOutlineUser />
-        },
-        {
-            id: 'email',
-            errorId: 'emailErr',
-            label: 'Email',
-            type: 'email',
-            placeholder: 'Enter your email',
-            validation: {
-                required: 'Email is required',
-                pattern: {
-                    value: /^\S+@\S+$/i,
-                    message: 'Enter a valid email address',
-                },
-            },
-            icon: <AiOutlineMail />
-        },
-        {
-            id: 'age',
-            errorId: 'ageError',
-            label: 'Age',
-            type: 'number',
-            placeholder: 'Enter your age',
-            validation: {
-                min: {
-                    value: 18,
-                    message: 'You must be at least 18 years old',
-                },
-            },
-            icon: <AiOutlineNumber />
-        },
-        {
-            id: 'password',
-            errorId: 'passwordErr',
-            label: 'Password',
-            type: 'password',
-            placeholder: 'Enter your Password',
-            validation: {
-                required: 'Password is required',
-            },
-            icon: <AiOutlineLock />
-        },
-        {
-            id: 'hobbies',
-            errorId: 'subscriptionErr',
-            label: 'Hobbies',
-            type: 'checkbox',
-            options: [
-                { value: 'reading', label: "Reading" },
-                { value: 'sports', label: "Sports" },
-                { value: 'music', label: "Music" },
-                { value: 'travelling', label: "Travelling" },
-            ],
-            validation: {},
-        },
-        {
-            id: 'gender',
-            errorId: 'genderErr',
-            label: 'Gender',
-            type: 'select',
-            options: [
-                { value: 'male', label: 'Male' },
-                { value: 'female', label: 'Female' },
-                { value: 'other', label: 'Other' },
-            ],
-            validation: {
-                required: 'Gender is required',
+            icon: <AiOutlineUser />,
+            css: { // Add Bootstrap Or Tailwind CSS here
+                wrapper: 'flex items-center p-1 border',
+                label: 'block text-gray-700 text-lg font-bold mb-2',
+                input: 'rounded w-full py-2 px-3 text-gray-700',
+                icon: 'ml-2',
+                error: 'text-red-500 text-sm',
             },
         },
+        // Add more form fields here
     ];
 
-    // Form Submission Function
-    const handleFormSubmit = (data: Record<string, any>) => {
-        console.log('Form Data:', data);
+    const button: IButtonProps = {
+        label: 'Submit',
+        type: 'submit',
+        css: 'btn btn-primary', //Css For Your Button
+        disabled: false,,
+        onClick?: () => {console.log("Form Button Clicked")}
+    };
+
+    const handleSubmit = (data: Record<string, any>) => {
+        console.log('Form data:', data);
     };
 
-    // Return Based On Type Of CSS ('Tailwind CSS' || 'Bootstrap')
-    return (
-        <div>
-            <h1>Dynamic Form Example</h1>
-            {/* If You Are Using Bootstrap CSS Then */}
-            <DynamicForm fields={formFields} onSubmit={handleFormSubmit} cssFramework="bootstrap" />
-            {/* If You Are Using Tailwind CSS Then */}
-            <DynamicForm fields={formFields} onSubmit={handleFormSubmit} cssFramework="tailwind" />
-        </div>
-    )
+    return <DynamicForm fields={ formFields } onSubmit={ handleSubmit } button={ button } />;
 }
 
-export default App
+export default App;
 ```
 
 ### Field Configuration
-* id: Unique identifier for the field.
-* errorId: Identifier for displaying error messages.
-* label: Label for the form field.
-* type: Type of the field (text, number, email, password, checkbox, select).
-* options: (Optional) Array of options for select and checkbox fields.
-* placeholder: (Optional) Placeholder text for the input.
-* required: (Optional) Boolean indicating if the field is required.
-* validation: (Optional) Validation rules based on React Hook Form's RegisterOptions.
-* icon: (Optional) Icon component to display alongside the input.
+__`Form Input Fields`__
+
+| Property      | Type                                                                                                           | Description                                                                                                                                                                                  | Required |
+| ------------- | -------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- |
+| `id`          | `string`                                                                                                       | Unique identifier for the form field.                                                                                                                                                        | ✅        |
+| `errorId`     | `{id: string, css: string}`                                                                                    | Options for ID and CSS for the error message element.                                                                                                                                        | ✅        |
+| `label`       | `string`                                                                                                       | Label text for the form field.                                                                                                                                                               | ✅        |
+| `type`        | `'text'` \| `'number'` \| `'email'` \| `'password'` \| `'checkbox'` \| `'select'` \| `'radio'` \| `'textarea'` | The type of input field, determining how the field will behave and be rendered.                                                                                                              | ✅        |
+| `options`     | `{ value: string; label: string }[]`                                                                           | Options for `select`, `checkbox`, or `radio` fields. Required when using these field types.                                                                                                  | ❌        |
+| `placeholder` | `string`                                                                                                       | Placeholder text for `text`, `number`, `email`, `password`, and `textarea` input fields.                                                                                                     | ❌        |
+| `required`    | `boolean`                                                                                                      | Indicates whether the form field is required to be filled.                                                                                                                                   | ❌        |
+| `validation`  | `RegisterOptions`                                                                                              | Validation rules for the field using `react-hook-form`'s `RegisterOptions`. This allows you to specify rules like `required`, `maxLength`, etc.                                              | ❌        |
+| `icon`        | `React.ReactNode`                                                                                              | Optional icon to be displayed with the input field. Can use components from libraries like `react-icons`.                                                                                    | ❌        |
+| `value`       | `string`                                                                                                       | Default value of the field if it needs to be pre-filled.                                                                                                                                     | ❌        |
+| `css`         | `{ wrapper: string, label?: string, input: string, icon?: string, error?: string }`                            | An object for defining the CSS classes used for styling different parts of the field, including the wrapper(containing the _icon_, _label_, _input field_), label, input, icon, and error message. | ✅        |
+
+__`Button Props`__
+| Property   | Type                                  | Description                                                                                 | Required |
+| ---------- | ------------------------------------- | ------------------------------------------------------------------------------------------- | -------- |
+| `type`     | `'button'` \| `'submit'` \| `'reset'` | Specifies the type of button, whether it's a normal button, submit button, or reset button. | ✅        |
+| `label`    | `string`                              | Text label displayed on the button.                                                         | ✅        |
+| `onClick`  | `() => void`                          | Function to be called when the button is clicked.                                           | ❌        |
+| `disabled` | `boolean`                             | Specifies whether the button is disabled or not.                                            | ❌        |
+| `css`      | `{ button: string }`                  | An object that defines the CSS class for the button.                                        | ✅        |
 
 ### Form Submission
 The `onSubmit` function passed to `DynamicForm` will receive the form data as a `Record<string, any>`. You can handle form submission by implementing your own logic in this function.

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "dynamic-form-component",
-  "version": "1.0.221",
+  "version": "1.1.0",
   "description": "A dynamic form component for React that renders forms based on provided configuration.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -29,8 +29,9 @@
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "https://github.com/ShreyPurohit/Medium/tree/main/React-Projects/dynamic-form-medium"
+    "url": "https://github.com/ShreyPurohit/dynamic-form-component"
   },
+  "homepage": "https://github.com/ShreyPurohit/dynamic-form-component#readme",
   "keywords": [
     "react",
     "form",

diff --git a/src/assets/interfaces.ts b/src/assets/interfaces.ts
@@ -2,19 +2,38 @@ import { RegisterOptions, FieldValues } from "react-hook-form";
 
 export interface IFormField {
     id: string;
-    errorId: string;
+    error: {
+        id: string,
+        css: string
+    };
     label: string;
-    type: 'text' | 'number' | 'email' | 'password' | 'checkbox' | 'select';
+    type: 'text' | 'number' | 'email' | 'password' | 'checkbox' | 'select' | 'textarea' | 'radio';
     options?: { value: string; label: string }[];
     placeholder?: string;
     required?: boolean;
     validation?: RegisterOptions;
     icon?: React.ReactNode;
-    value?: string
+    value?: string,
+    css: {
+        wrapper?: string,
+        label?: string,
+        input: string,
+        icon?: string,
+        error?: string
+    }
+}
+
+export interface ISubmitButtonProps {
+    id: string
+    label: string,
+    type: 'button' | 'submit' | 'reset',
+    css: string,
+    disabled?: boolean,
+    onClick?: () => void
 }
 
 export interface DynamicFormProps {
     fields: IFormField[];
-    onSubmit: (data: Record<string, any>) => void;
-    cssFramework: 'tailwind' | 'bootstrap'
+    onSubmit: (data: FieldValues) => void;
+    button: ISubmitButtonProps
 }