mui-custom-form 0.1.0

package/dist/CustomForm.d.ts

@@ -0,0 +1,25 @@
+import { useForm } from "react-hook-form";
+import React from "react";
+export type $option<T = any> = {
+    icon?: React.ReactNode;
+    label: string;
+    value: T;
+};
+export interface ICustomField<T = string> {
+    label: string;
+    name: T extends string ? string : keyof T;
+    type: "text" | "number" | "single-select" | "multi-select" | "date" | "file";
+    list?: $option[];
+    required?: boolean;
+    otherProps?: any;
+    span?: number;
+}
+interface ICustomForm {
+    fieldsGroups: ICustomField<any>[][];
+    onSubmit: ReturnType<this["formControl"]["handleSubmit"]>;
+    formControl: ReturnType<typeof useForm>;
+    submitButton?: boolean;
+    otherProps?: any;
+}
+export declare const CustomForm: React.FC<ICustomForm>;
+export {};

package/dist/CustomForm.js

@@ -0,0 +1,75 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CustomForm = void 0;
+var material_1 = require("@mui/material");
+var x_date_pickers_1 = require("@mui/x-date-pickers");
+var react_hook_form_1 = require("react-hook-form");
+var react_1 = __importDefault(require("react"));
+var CustomForm = function (_a) {
+    var fieldsGroups = _a.fieldsGroups, onSubmit = _a.onSubmit, formControl = _a.formControl, _b = _a.submitButton, submitButton = _b === void 0 ? true : _b, otherProps = _a.otherProps;
+    var control = formControl.control, setValue = formControl.setValue;
+    var renderField = function (field) {
+        switch (field.type) {
+            case "text":
+            case "number":
+                return (react_1.default.createElement(react_hook_form_1.Controller, { name: field.name, control: control, render: function (_a) {
+                        var controlField = _a.field, error = _a.fieldState.error;
+                        return (react_1.default.createElement(material_1.TextField, __assign({}, controlField, field.otherProps, { label: field.label, type: field.type, fullWidth: true, required: field.required, error: !!error, helperText: error === null || error === void 0 ? void 0 : error.message })));
+                    } }));
+            case "single-select":
+            case "multi-select":
+                return (react_1.default.createElement(react_hook_form_1.Controller, { name: field.name, control: control, render: function (_a) {
+                        var _b;
+                        var controlField = _a.field, error = _a.fieldState.error;
+                        return (react_1.default.createElement(material_1.FormControl, { fullWidth: true, error: !!error },
+                            react_1.default.createElement(material_1.InputLabel, { required: field.required }, field.label),
+                            react_1.default.createElement(material_1.Select, __assign({}, controlField, field.otherProps, { multiple: field.type === "multi-select" }), (_b = field.list) === null || _b === void 0 ? void 0 : _b.map(function (item) { return (react_1.default.createElement(material_1.MenuItem, { key: item.value, value: item.value }, item.label)); })),
+                            error && react_1.default.createElement(material_1.FormHelperText, null, error.message)));
+                    } }));
+            case "date":
+                return (react_1.default.createElement(react_hook_form_1.Controller, { name: field.name, control: control, render: function (_a) {
+                        var controlField = _a.field, error = _a.fieldState.error;
+                        return (react_1.default.createElement(x_date_pickers_1.DatePicker, __assign({}, controlField, field.otherProps, { label: field.label, onChange: controlField.onChange, slotProps: {
+                                textField: {
+                                    required: field.required,
+                                    error: !!error,
+                                    helperText: error === null || error === void 0 ? void 0 : error.message,
+                                    fullWidth: true,
+                                },
+                            } })));
+                    } }));
+            case "file":
+                return (react_1.default.createElement(react_1.default.Fragment, null,
+                    react_1.default.createElement(material_1.FormLabel, { component: "legend" }, field.label),
+                    react_1.default.createElement(material_1.Button, { variant: "contained", component: "label" },
+                        "Upload File",
+                        react_1.default.createElement("input", { type: "file", hidden: true, onChange: function (e) {
+                                // Set the value to either the File instance or undefined
+                                var fileValue = e.target.files && e.target.files.length > 0
+                                    ? e.target.files[0]
+                                    : undefined;
+                                setValue(field.name, fileValue);
+                            } }))));
+            default:
+                return null;
+        }
+    };
+    return (react_1.default.createElement(material_1.Stack, __assign({ component: "form", onSubmit: onSubmit, noValidate: true }, otherProps, { spacing: 3 }),
+        react_1.default.createElement(material_1.Grid, { container: true, spacing: 1 }, fieldsGroups.map(function (fields, rowIndex) { return (react_1.default.createElement(material_1.Grid, { container: true, item: true, key: rowIndex, spacing: 2 }, fields.map(function (field, fieldIndex) { return (react_1.default.createElement(material_1.Grid, { item: true, key: fieldIndex, xs: field.span || true }, renderField(field))); }))); })),
+        submitButton && (react_1.default.createElement(material_1.Button, { type: "submit", variant: "contained" }, "Submit"))));
+};
+exports.CustomForm = CustomForm;

package/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "mui-custom-form",
+  "version": "0.1.0",
+  "description": "A versatile React form component utilizing MUI components and react-hook-form.",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "build": "tsc",
+    "prepublishOnly": "npm run build"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/DevOsamaIslam/muicustom-form.git"
+  },
+  "keywords": [
+    "react",
+    "form",
+    "MUI",
+    "react-hook-form",
+    "customizable"
+  ],
+  "author": "Your Name",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/your-github-username/custom-form/issues"
+  },
+  "homepage": "https://github.com/your-github-username/custom-form#readme",
+  "peerDependencies": {
+    "@mui/material": "5.14.2",
+    "@mui/x-date-pickers": "^6.10.2",
+    "react-hook-form": "^7.45.2"
+  },
+  "devDependencies": {
+    "@emotion/react": "^11.11.1",
+    "@emotion/styled": "^11.11.0",
+    "@types/node": "^20.5.1",
+    "@types/react": "^18.2.20",
+    "typescript": "^5.1.6"
+  }
+}

package/readme.md

@@ -0,0 +1,94 @@
+## CustomForm
+
+`CustomForm` is a versatile React form component designed to streamline the form-building process. Utilizing the power of MUI components and the flexibility of `react-hook-form`, this package offers an intuitive way to create dynamic and responsive forms.
+
+### Table of Contents
+
+- [Installation](#installation)
+- [Features](#features)
+- [Usage](#usage)
+  - [Props](#props)
+- [Example](#example)
+- [Contribution](#contribution)
+- [License](#license)
+
+### Installation
+
+To add `CustomForm` to your project, use the following command:
+
+```bash
+npm install mui-custom-form
+```
+
+Ensure that you have the required peer dependencies installed:
+
+- `@mui/material`
+- `@mui/x-date-pickers`
+- `react-hook-form`
+
+### Features
+
+- **Dynamic Field Types**: Supports text, number, single-select, multi-select, date, and file input types.
+- **MUI Integration**: Seamless integration with MUI components for a consistent and professional look.
+- **Responsive Design**: Adaptable grid system, ensuring your form looks great on all devices.
+
+### Usage
+
+#### Props
+
+| Name           | Description                                              |
+| -------------- | -------------------------------------------------------- |
+| `fieldsGroups` | 2D array representing groups of fields in the form.      |
+| `onSubmit`     | Function called upon form submission.                    |
+| `formControl`  | Control object from `react-hook-form`.                   |
+| `submitButton` | Boolean to toggle the visibility of the submit button.   |
+| `otherProps`   | Any additional props to pass down to the form component. |
+
+### Example
+
+Here's a simple example showcasing how to implement a `CustomForm`:
+
+```typescript
+import React from "react"
+import { CustomForm } from "your-package-name"
+
+const MyComponent = () => {
+  const formControl = useForm()
+
+  const fieldsGroups = [
+    [
+      {
+        label: "Username",
+        name: "username",
+        type: "text",
+        required: true,
+      },
+      {
+        label: "Birthdate",
+        name: "birthdate",
+        type: "date",
+      },
+    ],
+  ]
+
+  const handleSubmit = (data) => {
+    console.log(data)
+  }
+
+  return (
+    <CustomForm
+      fieldsGroups={fieldsGroups}
+      onSubmit={handleSubmit}
+      formControl={formControl}
+    />
+  )
+}
+
+export default MyComponent
+```
+
+### Contribution
+
+Your contributions are always welcome! Please create a pull request and we'll review your suggestion.
+
+---

package/src/CustomForm.tsx

@@ -0,0 +1,171 @@
+import {
+  Button,
+  FormControl,
+  FormHelperText,
+  FormLabel,
+  Grid,
+  InputLabel,
+  MenuItem,
+  Select,
+  Stack,
+  TextField,
+} from "@mui/material"
+import { DatePicker } from "@mui/x-date-pickers"
+import { Controller } from "react-hook-form"
+import { useForm } from "react-hook-form"
+import React from "react"
+
+export type $option<T = any> = {
+  icon?: React.ReactNode
+  label: string
+  value: T
+}
+
+export interface ICustomField<T = string> {
+  label: string
+  name: T extends string ? string : keyof T
+  type: "text" | "number" | "single-select" | "multi-select" | "date" | "file"
+  list?: $option[]
+  required?: boolean // This can be further refined to your validation rules
+  otherProps?: any
+  span?: number // A number between 1 and 12, representing MUI's grid system
+}
+
+interface ICustomForm {
+  fieldsGroups: ICustomField<any>[][]
+  onSubmit: ReturnType<this["formControl"]["handleSubmit"]>
+  formControl: ReturnType<typeof useForm>
+  submitButton?: boolean
+  otherProps?: any
+}
+
+export const CustomForm: React.FC<ICustomForm> = ({
+  fieldsGroups,
+  onSubmit,
+  formControl,
+  submitButton = true,
+  otherProps,
+}) => {
+  const { control, setValue } = formControl
+
+  const renderField = (field: ICustomField<string>) => {
+    switch (field.type) {
+      case "text":
+      case "number":
+        return (
+          <Controller
+            name={field.name}
+            control={control}
+            render={({ field: controlField, fieldState: { error } }) => (
+              <TextField
+                {...controlField}
+                {...field.otherProps}
+                label={field.label}
+                type={field.type}
+                fullWidth
+                required={field.required}
+                error={!!error}
+                helperText={error?.message}
+              />
+            )}
+          />
+        )
+      case "single-select":
+      case "multi-select":
+        return (
+          <Controller
+            name={field.name}
+            control={control}
+            render={({ field: controlField, fieldState: { error } }) => (
+              <FormControl fullWidth error={!!error}>
+                <InputLabel required={field.required}>{field.label}</InputLabel>
+                <Select
+                  {...controlField}
+                  {...field.otherProps}
+                  multiple={field.type === "multi-select"}>
+                  {field.list?.map((item) => (
+                    <MenuItem key={item.value} value={item.value}>
+                      {item.label}
+                    </MenuItem>
+                  ))}
+                </Select>
+                {error && <FormHelperText>{error.message}</FormHelperText>}
+              </FormControl>
+            )}
+          />
+        )
+      case "date":
+        return (
+          <Controller
+            name={field.name}
+            control={control}
+            render={({ field: controlField, fieldState: { error } }) => (
+              <DatePicker
+                {...controlField}
+                {...field.otherProps}
+                label={field.label}
+                onChange={controlField.onChange}
+                slotProps={{
+                  textField: {
+                    required: field.required,
+                    error: !!error,
+                    helperText: error?.message,
+                    fullWidth: true,
+                  },
+                }}
+              />
+            )}
+          />
+        )
+      case "file":
+        return (
+          <>
+            <FormLabel component="legend">{field.label}</FormLabel>
+            <Button variant="contained" component="label">
+              Upload File
+              <input
+                type="file"
+                hidden
+                onChange={(e) => {
+                  // Set the value to either the File instance or undefined
+                  const fileValue =
+                    e.target.files && e.target.files.length > 0
+                      ? e.target.files[0]
+                      : undefined
+                  setValue(field.name, fileValue)
+                }}
+              />
+            </Button>
+          </>
+        )
+      default:
+        return null
+    }
+  }
+
+  return (
+    <Stack
+      component="form"
+      onSubmit={onSubmit}
+      noValidate
+      {...otherProps}
+      spacing={3}>
+      <Grid container spacing={1}>
+        {fieldsGroups.map((fields, rowIndex) => (
+          <Grid container item key={rowIndex} spacing={2}>
+            {fields.map((field, fieldIndex) => (
+              <Grid item key={fieldIndex} xs={field.span || true}>
+                {renderField(field as unknown as ICustomField<string>)}
+              </Grid>
+            ))}
+          </Grid>
+        ))}
+      </Grid>
+      {submitButton && (
+        <Button type="submit" variant="contained">
+          Submit
+        </Button>
+      )}
+    </Stack>
+  )
+}

package/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "module": "commonjs",
+    "jsx": "react",
+    "declaration": true,
+    "outDir": "./dist",
+    "strict": true,
+    "esModuleInterop": true
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules"]
+}