From c94ff14ba39782ec741b5c139306a9563a8ab888 Mon Sep 17 00:00:00 2001 From: Shrey Purohit <91727034+ShreyPurohit@users.noreply.github.com> Date: Wed, 4 Sep 2024 14:47:36 +0530 Subject: [PATCH] Add files via upload --- npm-dynamic-form/README.md | 7 +- npm-dynamic-form/dist/assets/interfaces.d.ts | 5 +- .../dist/components/DynamicForm.d.ts | 6 +- .../dist/components/DynamicForm.js | 58 ++++++++++------ npm-dynamic-form/package-lock.json | 4 +- npm-dynamic-form/package.json | 5 +- npm-dynamic-form/src/assets/interfaces.ts | 3 +- .../src/components/DynamicForm.tsx | 68 +++++++++---------- 8 files changed, 90 insertions(+), 66 deletions(-) diff --git a/npm-dynamic-form/README.md b/npm-dynamic-form/README.md index 1ae21ea..99ebd68 100644 --- a/npm-dynamic-form/README.md +++ b/npm-dynamic-form/README.md @@ -119,14 +119,19 @@ const App = () => { }, ]; + // Form Submission Function const handleFormSubmit = (data: Record) => { console.log('Form Data:', data); }; + // Return Based On Type Of CSS ('Tailwind CSS' || 'Bootstrap') return (

Dynamic Form Example

- + // **If You Are Using Bootstrap CSS Then**, + + // **If You Are Using Tailwind CSS Then**, +
) } diff --git a/npm-dynamic-form/dist/assets/interfaces.d.ts b/npm-dynamic-form/dist/assets/interfaces.d.ts index 6af711f..214757e 100644 --- a/npm-dynamic-form/dist/assets/interfaces.d.ts +++ b/npm-dynamic-form/dist/assets/interfaces.d.ts @@ -1,4 +1,4 @@ -import { RegisterOptions, FieldValues } from "react-hook-form"; +import { RegisterOptions } from "react-hook-form"; export interface IFormField { id: string; errorId: string; @@ -16,5 +16,6 @@ export interface IFormField { } export interface DynamicFormProps { fields: IFormField[]; - onSubmit: (data: FieldValues) => void; + onSubmit: (data: Record) => void; + cssFramework: 'tailwind' | 'bootstrap'; } diff --git a/npm-dynamic-form/dist/components/DynamicForm.d.ts b/npm-dynamic-form/dist/components/DynamicForm.d.ts index 5816559..19bbee0 100644 --- a/npm-dynamic-form/dist/components/DynamicForm.d.ts +++ b/npm-dynamic-form/dist/components/DynamicForm.d.ts @@ -1,4 +1,4 @@ -import { DynamicFormProps } from '../assets/interfaces'; import React from 'react'; -declare const DynamicForm: React.FC; -export default DynamicForm; +import { DynamicFormProps } from '../assets/interfaces'; +declare const CustomizedDynamicForm: React.FC; +export default CustomizedDynamicForm; diff --git a/npm-dynamic-form/dist/components/DynamicForm.js b/npm-dynamic-form/dist/components/DynamicForm.js index 3119c41..5a846d6 100644 --- a/npm-dynamic-form/dist/components/DynamicForm.js +++ b/npm-dynamic-form/dist/components/DynamicForm.js @@ -1,13 +1,32 @@ "use strict"; -var __importDefault = (this && this.__importDefault) || function (mod) { - return (mod && mod.__esModule) ? mod : { "default": mod }; +var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) { + if (k2 === undefined) k2 = k; + var desc = Object.getOwnPropertyDescriptor(m, k); + if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) { + desc = { enumerable: true, get: function() { return m[k]; } }; + } + Object.defineProperty(o, k2, desc); +}) : (function(o, m, k, k2) { + if (k2 === undefined) k2 = k; + o[k2] = m[k]; +})); +var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) { + Object.defineProperty(o, "default", { enumerable: true, value: v }); +}) : function(o, v) { + o["default"] = v; +}); +var __importStar = (this && this.__importStar) || function (mod) { + if (mod && mod.__esModule) return mod; + var result = {}; + if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k); + __setModuleDefault(result, mod); + return result; }; Object.defineProperty(exports, "__esModule", { value: true }); -const react_1 = require("react"); +const react_1 = __importStar(require("react")); const react_hook_form_1 = require("react-hook-form"); const ai_1 = require("react-icons/ai"); -const react_2 = __importDefault(require("react")); -const DynamicForm = ({ fields, onSubmit }) => { +const CustomizedDynamicForm = ({ fields, onSubmit, cssFramework }) => { const [showPassword, setShowPassword] = (0, react_1.useState)(false); const { register, handleSubmit, formState: { errors } } = (0, react_hook_form_1.useForm)({ mode: 'all' }); const renderField = (field) => { @@ -15,22 +34,21 @@ const DynamicForm = ({ fields, onSubmit }) => { const error = (_a = errors[field.id]) === null || _a === void 0 ? void 0 : _a.message; const isPasswordField = field.type === 'password'; const inputType = isPasswordField && showPassword ? 'text' : field.type; - return (react_2.default.createElement("div", { id: 'input-wrapper' }, - react_2.default.createElement("div", { id: 'input-container' }, field.type === 'checkbox' && field.options ? (react_2.default.createElement("div", { className: 'grid grid-cols-2 gap-4' }, field.options.map(option => (react_2.default.createElement("div", { key: option.value, className: 'flex gap-1 items-center justify-center' }, - react_2.default.createElement("label", { htmlFor: `${field.id}-${option.value}`, className: 'ml-2 mt-1' }, + return (react_1.default.createElement("div", { id: 'input-wrapper', className: cssFramework === 'bootstrap' ? 'mb-3 w-1' : '' }, + react_1.default.createElement("div", { id: 'input-container', className: cssFramework === 'bootstrap' ? 'input-group' : '' }, field.type === 'checkbox' && field.options ? (react_1.default.createElement("div", { className: cssFramework === 'bootstrap' ? 'row' : 'grid grid-cols-2 gap-4' }, field.options.map(option => (react_1.default.createElement("div", { key: option.value, className: cssFramework === 'bootstrap' ? 'col-6 d-flex align-items-center' : 'flex gap-1 justify-center' }, + react_1.default.createElement("label", { htmlFor: `${field.id}-${option.value}`, className: cssFramework === 'bootstrap' ? 'form-check-label ms-2' : 'ml-2' }, option.label, " :"), - react_2.default.createElement("input", Object.assign({ id: `${field.id}-${option.value}` }, register(field.id, Object.assign({}, field.validation)), { type: field.type, value: option.value, className: 'w-max' }))))))) : field.type === 'select' ? (react_2.default.createElement("select", Object.assign({}, register(field.id, Object.assign({}, field.validation)), { id: field.id }), (_b = field.options) === null || _b === void 0 ? void 0 : _b.map((option) => (react_2.default.createElement("option", { key: option.value, value: option.value }, option.label))))) : (react_2.default.createElement("div", { className: 'flex items-center p-1 border' }, - field.icon && react_2.default.createElement("div", { className: 'ml-2' }, field.icon), - react_2.default.createElement("input", Object.assign({ id: field.id }, register(field.id, Object.assign({}, field.validation)), { type: inputType, placeholder: field.placeholder })), - isPasswordField && (react_2.default.createElement("div", { id: "prop-icon", className: "hover:cursor-pointer mr-3", onClick: () => setShowPassword(!showPassword) }, showPassword ? react_2.default.createElement(ai_1.AiOutlineEye, null) : react_2.default.createElement(ai_1.AiOutlineEyeInvisible, null)))))), - error && react_2.default.createElement("span", { id: field.errorId }, error))); + react_1.default.createElement("input", Object.assign({ id: `${field.id}-${option.value}` }, register(field.id, Object.assign({}, field.validation)), { type: field.type, value: option.value, className: cssFramework === 'bootstrap' ? 'form-check-input ms-2' : '' }))))))) : field.type === 'select' ? (react_1.default.createElement("select", Object.assign({}, register(field.id, Object.assign({}, field.validation)), { id: field.id, className: cssFramework === 'bootstrap' ? 'form-select' : "border rounded w-full sm:py-2 sm:px-3 py-1 px-3 text-stone-600 leading-tight focus:outline-none text-sm sm:text-base" }), (_b = field.options) === null || _b === void 0 ? void 0 : _b.map((option) => (react_1.default.createElement("option", { key: option.value, value: option.value }, option.label))))) : (react_1.default.createElement("div", { className: cssFramework === 'bootstrap' ? 'input-group' : 'flex items-center p-1 border' }, + field.icon && react_1.default.createElement("div", { className: cssFramework === 'bootstrap' ? 'input-group-text' : 'ml-2' }, field.icon), + react_1.default.createElement("input", Object.assign({ id: field.id }, register(field.id, Object.assign({}, field.validation)), { type: inputType, placeholder: field.placeholder, className: cssFramework === 'bootstrap' ? `form-control ${error ? 'is-invalid' : ''}` : 'rounded w-full sm:py-2 sm:px-3 py-1 px-2 text-stone-600 leading-tight focus:outline-none text-sm sm:text-base' })), + isPasswordField && (react_1.default.createElement("div", { id: "prop-icon", className: cssFramework === 'bootstrap' ? 'input-group-text' : 'hover:cursor-pointer mr-3', onClick: () => setShowPassword(!showPassword) }, showPassword ? react_1.default.createElement(ai_1.AiOutlineEye, null) : react_1.default.createElement(ai_1.AiOutlineEyeInvisible, null)))))), + error && react_1.default.createElement("div", { className: cssFramework === 'bootstrap' ? 'text-danger' : 'text-orange-500 italic text-sm sm:text-base', id: field.errorId }, error))); }; - return (react_2.default.createElement("main", { className: 'md:w-3/4 m-auto md:h-0' }, - react_2.default.createElement("form", { onSubmit: handleSubmit(onSubmit), className: "flex flex-col md:w-1/2 m-auto p-5 gap-5 md:mt-5 md:border border-black" }, - fields.map((field) => (react_2.default.createElement("div", { key: field.id }, - react_2.default.createElement("label", { htmlFor: field.id }, field.label), - renderField(field)))), - react_2.default.createElement("button", { type: 'submit', disabled: Object.keys(errors).length ? true : false, className: 'px-4 py-2 bg-slate-400 hover:bg-slate-600 hover:transition hover:text-white rounded-lg disabled:bg-gray-600 disabled:hover:bg-gray-600' }, "Submit")))); + return (react_1.default.createElement("form", { onSubmit: handleSubmit(onSubmit), className: cssFramework === 'bootstrap' ? 'card p-4 w-50 m-auto' : 'flex flex-col md:w-1/2 m-auto p-5 gap-5 md:mt-5 md:border border-slate-400 rounded-lg' }, + fields.map((field) => (react_1.default.createElement("div", { key: field.id, className: cssFramework === 'bootstrap' ? 'mb-3' : '' }, + react_1.default.createElement("label", { htmlFor: field.id, className: cssFramework === 'bootstrap' ? "form-label" : "block text-gray-700 sm:text-lg font-bold mb-2" }, field.label), + renderField(field)))), + react_1.default.createElement("button", { type: 'submit', disabled: Object.keys(errors).length ? true : false, className: cssFramework === 'bootstrap' ? 'btn btn-primary w-100 mt-3' : 'px-4 py-2 bg-slate-400 hover:bg-slate-600 hover:transition hover:text-white rounded-lg disabled:bg-gray-600 disabled:hover:bg-gray-600 disabled:text-white' }, "Submit"))); }; -exports.default = DynamicForm; +exports.default = CustomizedDynamicForm; diff --git a/npm-dynamic-form/package-lock.json b/npm-dynamic-form/package-lock.json index 1972190..ae8c569 100644 --- a/npm-dynamic-form/package-lock.json +++ b/npm-dynamic-form/package-lock.json @@ -1,12 +1,12 @@ { "name": "dynamic-form-component", - "version": "1.0.1", + "version": "1.0.2", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "dynamic-form-component", - "version": "1.0.1", + "version": "1.0.2", "license": "MIT", "devDependencies": { "@types/react": "^18.0.0", diff --git a/npm-dynamic-form/package.json b/npm-dynamic-form/package.json index 7ff7b4b..3513d90 100644 --- a/npm-dynamic-form/package.json +++ b/npm-dynamic-form/package.json @@ -1,6 +1,6 @@ { "name": "dynamic-form-component", - "version": "1.0.12", + "version": "1.0.2", "description": "A dynamic form component for React that renders forms based on provided configuration.", "main": "dist/index.js", "types": "dist/index.d.ts", @@ -29,7 +29,8 @@ "license": "MIT", "repository": { "type": "git", - "url": "https://github.com/ShreyPurohit/Medium/tree/6c29c1c77ee5a29c4b5915e6669c28449931dbbe/React-Projects/dynamic-form-medium" + "url": "https://github.com/ShreyPurohit/Medium/tree/6c29c1c77ee5a29c4b5915e6669c28449931dbbe/React-Projects/dynamic-form-medium", + "directory": "https://github.com/ShreyPurohit/Medium/tree/6c29c1c77ee5a29c4b5915e6669c28449931dbbe/React-Projects/dynamic-form-medium" }, "keywords": [ "react", diff --git a/npm-dynamic-form/src/assets/interfaces.ts b/npm-dynamic-form/src/assets/interfaces.ts index 7c150cf..aaaa570 100644 --- a/npm-dynamic-form/src/assets/interfaces.ts +++ b/npm-dynamic-form/src/assets/interfaces.ts @@ -15,5 +15,6 @@ export interface IFormField { export interface DynamicFormProps { fields: IFormField[]; - onSubmit: (data: FieldValues) => void; + onSubmit: (data: Record) => void; + cssFramework: 'tailwind' | 'bootstrap' } \ No newline at end of file diff --git a/npm-dynamic-form/src/components/DynamicForm.tsx b/npm-dynamic-form/src/components/DynamicForm.tsx index f1a8be1..01d67c9 100644 --- a/npm-dynamic-form/src/components/DynamicForm.tsx +++ b/npm-dynamic-form/src/components/DynamicForm.tsx @@ -1,11 +1,9 @@ -import { useState } from 'react'; +import React, { useState } from 'react'; import { useForm } from 'react-hook-form'; import { AiOutlineEye, AiOutlineEyeInvisible } from 'react-icons/ai'; import { DynamicFormProps, IFormField } from '../assets/interfaces'; -import React from 'react'; - -const DynamicForm: React.FC = ({ fields, onSubmit }) => { +const CustomizedDynamicForm: React.FC = ({ fields, onSubmit, cssFramework }) => { const [showPassword, setShowPassword] = useState(false); const { register, handleSubmit, formState: { errors } } = useForm({ mode: 'all' }); @@ -17,28 +15,30 @@ const DynamicForm: React.FC = ({ fields, onSubmit }) => { const inputType = isPasswordField && showPassword ? 'text' : field.type; return ( -
-
+
+
{ field.type === 'checkbox' && field.options ? ( -
+
{field.options.map(option => ( -
- +
+
))} -
+
) : field.type === 'select' ? ( ) : ( -
- {field.icon &&
{field.icon}
} +
+ {field.icon &&
{field.icon}
} {isPasswordField && (
setShowPassword(!showPassword)} > {showPassword ? : } @@ -68,31 +69,28 @@ const DynamicForm: React.FC = ({ fields, onSubmit }) => { ) }
- {error && {error}} -
+ {error &&
{error}
} +
); }; return ( -
-
- {fields.map((field) => ( -
- - {renderField(field)} -
- )) - } - -
-
+
+ {fields.map((field) => ( +
+ + {renderField(field)} +
+ ))} + +
); }; -export default DynamicForm; \ No newline at end of file +export default CustomizedDynamicForm; \ No newline at end of file