mui-custom-form 1.0.1 → 1.1.0

package/README.md

@@ -1,6 +1,6 @@
 # 📝 CustomForm
 
-`CustomForm` is a versatile React form component designed to simplify your form-building journey. Powered by MUI components and the flexibility of `react-hook-form`, this package offers an intuitive way to create dynamic and responsive forms.
+`CustomForm` is a versatile React form component designed to simplify your form-building journey. Powered by MUI components and the flexibility of `react-hook-form`, this package offers an intuitive way to create dynamic and responsive forms with a wide range of field types and customization options.
 
 ## 📚 Table of Contents
 
@@ -8,7 +8,13 @@
 - [✨ Features](#features)
 - [🚀 Usage](#usage)
   - [🔧 Props](#props)
+    - [CustomForm Component](#customform-component)
+    - [CustomField Configuration](#customfield-configuration)
+  - [🧩 Custom Components](#custom-components)
 - [📖 Examples](#examples)
+  - [Basic Form](#basic-form)
+  - [Form with Zod Validation](#form-with-zod-validation)
+  - [Comprehensive Example with All Field Types](#comprehensive-example-with-all-field-types)
 - [🤝 Contribution](#contribution)
 - [📜 License](#license)
 
@@ -18,17 +24,15 @@
 npm install mui-custom-form
 ```
 
-📦 **Dependencies**:
-
-- `@mui/material`
-- `@mui/x-date-pickers`
-- `react-hook-form`
-
 ## ✨ Features
 
-- 🎛 **Dynamic Field Types**
-- 🎨 **MUI Integration**
-- 📱 **Responsive Design**
+- 🎛 **Dynamic Field Types**: Supports a wide range of field types including `text`, `number`, `password`, `textarea`, `date`, `file`, `switch`, `checkbox-group`, `radio-group`, and `custom` components.
+- 🎨 **MUI Integration**: Seamlessly integrates with Material-UI components for a consistent and polished UI.
+- 📱 **Responsive Design**: Utilizes MUI's grid system to ensure forms are responsive and well-organized across different screen sizes.
+- 🛠 **Customizable Input Props**: Allows passing additional properties to input fields for enhanced customization.
+- 🧩 **Custom Components**: Enables integration of custom components that adhere to the `value` and `onChange` interface, providing maximum flexibility.
+- 🔄 **Form Control Integration**: Leverages `react-hook-form` for efficient form state management and validation.
+- 🧰 **Validation Support**: Supports schema-based validation with Zod.
 
 ## 🚀 Usage
 
@@ -38,37 +42,82 @@ npm install mui-custom-form
 
 | Name                     | Description                                                        | Is Required? |
 | ------------------------ | ------------------------------------------------------------------ | ------------ |
-| `fieldsGroups`           | 2D array representing groups of fields in the form.                | Yes          |
-| `onSubmit`               | Array containing functions for form submission and error handling. | Yes          |
-| `formControl`            | Control object from `react-hook-form`.                             | Yes          |
-| `submitButton`           | Boolean to toggle the visibility of the submit button.             | No           |
-| `resetButton`            | Boolean to toggle the visibility of the reset button.              | No           |
-| `actionButtonsPlacement` | CSS property for button placement.                                 | No           |
-| `otherProps`             | Any additional props to pass down to the form component.           | No           |
-
-#### CustomField 2D Array
-
-| Name         | Description                                 | Is Required? |
-| ------------ | ------------------------------------------- | ------------ |
-| `label`      | The display label of the field.             | Yes          |
-| `name`       | The name attribute of the field.            | Yes          |
-| `type`       | The type of the field.                      | Yes          |
-| `list`       | An array of options for select type fields. | Conditional  |
-| `required`   | Is the field mandatory?                     | No           |
-| `otherProps` | Any additional props.                       | No           |
-| `span`       | Grid span for the field.                    | No           |
-
-#### \* `list` prop is required when the type is `single-select` or `multi-select`.
+| `fieldsGroups`           | 2D array representing groups of fields in the form.                | **Yes**      |
+| `onSubmit`               | Tuple containing functions for form submission and error handling. | **Yes**      |
+| `formControl`            | Control object from `react-hook-form`.                             | **Yes**      |
+| `submitButton`           | Boolean or `ButtonProps` to toggle and customize the submit button.| **No**       |
+| `resetButton`            | Boolean or `ButtonProps` to toggle and customize the reset button. | **No**       |
+| `actionButtonsPlacement` | CSS property for button placement (e.g., `flex-end`, `center`).    | **No**       |
+| `otherProps`             | Any additional props to pass down to the form component.           | **No**       |
+
+#### CustomField Configuration
+
+| Name         | Description                                 | Is Required?     |
+| ------------ | ------------------------------------------- | ---------------- |
+| `label`      | The display label of the field.             | **Yes**          |
+| `name`       | The name attribute of the field.            | **Yes**          |
+| `type`       | The type of the field.                      | **Yes**          |
+| `list`       | An array of options for select type fields. | *Conditional*    |
+| `required`   | Is the field mandatory?                     | **No**           |
+| `otherProps` | Any additional props.                       | **No**           |
+| `span`       | Grid span for the field (1-12).             | **No**           |
+| `component`  | Custom React component for the field.       | *Conditional*    |
+
+> **Notes**: 
+> - The `list` prop is **required** when the `type` is `single-select`, `multi-select`, `checkbox-group`, or `radio-group`.
+> - The `component` prop is **required** when the `type` is `custom`.
+
+### 🧩 Custom Components
+
+To integrate custom components into your forms, ensure they adhere to the `CustomComponentProps` interface, which requires `value` and `onChange` props.
+
+```typescript
+export interface CustomComponentProps {
+  value: any;
+  onChange: (value: any) => void;
+  [key: string]: any; // Allow additional props
+}
+```
 
----
+**Example of a Custom Component:**
+
+```tsx
+// CustomComponents.tsx
+import React from "react";
+import { TextField } from "@mui/material";
+import { CustomComponentProps } from "./types";
+
+export const CustomTextComponent: React.FC<CustomComponentProps> = ({
+  value,
+  onChange,
+  placeholder,
+}) => {
+  return (
+    <TextField
+      value={value || ""}
+      onChange={(e) => onChange(e.target.value)}
+      placeholder={placeholder}
+      fullWidth
+    />
+  );
+};
+```
 
 ## 📖 Examples
 
 ### Basic Form
 
-```ts
+A simple form demonstrating basic field types like `text` and `date`.
+
+```tsx
+// BasicForm.tsx
+import React from "react";
+import { useForm } from "react-hook-form";
+import { CustomForm } from "mui-custom-form";
+import { IFieldGroup } from "mui-custom-form/types";
+
 const BasicForm = () => {
-  const formControl = useForm<{ username: string; birthdate: string }>()
+  const formControl = useForm<{ username: string; birthdate: string }>();
 
   const fieldsGroups: IFieldGroup = [
     [
@@ -77,23 +126,26 @@ const BasicForm = () => {
         name: "username",
         type: "text",
         required: true,
+        otherProps: { placeholder: "Enter your username" },
+        span: 6,
       },
       {
         label: "Birthdate",
         name: "birthdate",
         type: "date",
         required: true,
+        span: 6,
       },
     ],
-  ]
+  ];
 
   const handleSubmit = (data: { username: string; birthdate: string }) => {
-    console.log({ success: data })
-  }
+    console.log({ success: data });
+  };
 
-  const submitError = (data: unknown) => {
-    console.log({ error: data })
-  }
+  const submitError = (errors: any) => {
+    console.log({ error: errors });
+  };
 
   return (
     <CustomForm
@@ -101,31 +153,54 @@ const BasicForm = () => {
       onSubmit={[handleSubmit, submitError]}
       formControl={formControl}
     />
-  )
-}
+  );
+};
+
+export default BasicForm;
 ```
 
 ### Form with Zod Validation
 
-```ts
-const GENDERS = ["Male", "Female"] as const
-const HOBBIES = ["Coding", "Collections", "Hiking"] as const
+A form demonstrating advanced field types and schema-based validation using Zod.
+
+```tsx
+// FormWithZod.tsx
+import React from "react";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+import { CustomForm } from "mui-custom-form";
+import { IFieldGroup } from "mui-custom-form/types";
+
+const GENDERS = ["Male", "Female", "Other"] as const;
+const HOBBIES = ["Coding", "Collections", "Hiking"] as const;
 
 const Fields = z.object({
-  username: z.string(),
-  age: z.number().min(16).max(80),
-  gender: z.enum(GENDERS),
-  hobbies: z.array(z.enum(HOBBIES)).nonempty("Please choose one"),
-  birthDate: z.date(),
+  username: z.string().min(1, "Username is required"),
+  age: z
+    .number({
+      required_error: "Age is required",
+      invalid_type_error: "Age must be a number",
+    })
+    .min(16, "Minimum age is 16")
+    .max(80, "Maximum age is 80"),
+  gender: z.enum(GENDERS, { required_error: "Gender is required" }),
+  hobbies: z
+    .array(z.enum(HOBBIES), { required_error: "Hobbies are required" })
+    .nonempty("Please choose at least one hobby"),
+  birthDate: z.date({ required_error: "Birthdate is required" }),
   file: z.instanceof(File).optional(),
-})
+});
 
-type FieldTypes = z.infer<typeof Fields>
+type FieldTypes = z.infer<typeof Fields>;
 
 const FormWithZod = () => {
   const formControl = useForm<FieldTypes>({
     resolver: zodResolver(Fields),
-  })
+    defaultValues: {
+      hobbies: [],
+    },
+  });
 
   const fieldsGroups: IFieldGroup<FieldTypes> = [
     [
@@ -134,57 +209,308 @@ const FormWithZod = () => {
         name: "username",
         type: "text",
         required: true,
+        otherProps: { placeholder: "Enter your username" },
+        span: 6,
       },
       {
         label: "Age",
         name: "age",
         type: "number",
         required: true,
+        otherProps: { min: 16, max: 80 },
+        span: 6,
       },
     ],
     [
       {
         label: "Gender",
         name: "gender",
-        type: "single-select",
+        type: "radio-group",
         list: GENDERS.map((gender) => ({ label: gender, value: gender })),
+        required: true,
+        otherProps: { row: true },
+        span: 6,
       },
       {
         label: "Hobbies",
         name: "hobbies",
-        type: "multi-select",
+        type: "checkbox-group",
         list: HOBBIES.map((hobby) => ({ label: hobby, value: hobby })),
         required: true,
+        span: 6,
       },
     ],
     [
       {
-        label: "Date of birth",
+        label: "Birthdate",
         name: "birthDate",
         type: "date",
+        required: true,
+        span: 6,
       },
       {
         label: "Upload Image",
         name: "file",
         type: "file",
+        required: false,
+        span: 6,
       },
     ],
-  ]
+  ];
 
   const onSubmit = (data: FieldTypes) => {
-    console.log({ success: data })
-  }
+    console.log({ success: data });
+  };
+
+  const submitError = (errors: any) => {
+    console.log({ errors });
+  };
 
   return (
     <CustomForm
       fieldsGroups={fieldsGroups}
-      onSubmit={[onSubmit]}
+      onSubmit={[onSubmit, submitError]}
       formControl={formControl}
     />
-  )
-}
+  );
+};
+
+export default FormWithZod;
+```
+
+### Comprehensive Example with All Field Types
+
+An extensive example showcasing all supported field types, customizable input props, and custom components.
+
+```tsx
+// ComprehensiveForm.tsx
+import React from "react";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+import { Container, Typography, ButtonProps } from "@mui/material";
+import { CustomForm } from "mui-custom-form";
+import { IFieldGroup } from "mui-custom-form/types";
+import {
+  CustomTextComponent,
+  DateRangePickerComponent,
+} from "./CustomComponents"; // Ensure correct import path
+
+const GENDERS = ["Male", "Female", "Other"] as const;
+const HOBBIES = ["Coding", "Collections", "Hiking"] as const;
+
+const Fields = z.object({
+  username: z.string().min(1, "Username is required"),
+  password: z.string().min(6, "Password must be at least 6 characters"),
+  bio: z.string().optional(),
+  subscribe: z.boolean().optional(),
+  age: z
+    .number({
+      required_error: "Age is required",
+      invalid_type_error: "Age must be a number",
+    })
+    .min(16, "Minimum age is 16")
+    .max(80, "Maximum age is 80"),
+  gender: z.enum(GENDERS, { required_error: "Gender is required" }),
+  hobbies: z
+    .array(z.enum(HOBBIES), { required_error: "Hobbies are required" })
+    .nonempty("Please choose at least one hobby"),
+  birthDate: z.date({ required_error: "Birthdate is required" }),
+  file: z.instanceof(File).optional(),
+  customField: z.string().optional(),
+  eventDates: z
+    .tuple([z.date().nullable(), z.date().nullable()])
+    .optional(),
+});
+
+type FieldTypes = z.infer<typeof Fields>;
+
+const ComprehensiveForm = () => {
+  const formControl = useForm<FieldTypes>({
+    resolver: zodResolver(Fields),
+    defaultValues: {
+      subscribe: false,
+      hobbies: [],
+      eventDates: [null, null],
+    },
+  });
+
+  const fieldsGroups: IFieldGroup<FieldTypes> = [
+    [
+      {
+        label: "Username",
+        name: "username",
+        type: "text",
+        required: true,
+        otherProps: { placeholder: "Enter your username" },
+        span: 6,
+      },
+      {
+        label: "Password",
+        name: "password",
+        type: "password",
+        required: true,
+        otherProps: { placeholder: "Enter your password" },
+        span: 6,
+      },
+    ],
+    [
+      {
+        label: "Bio",
+        name: "bio",
+        type: "textarea",
+        required: false,
+        otherProps: { rows: 5, placeholder: "Tell us about yourself" },
+        span: 12,
+      },
+    ],
+    [
+      {
+        label: "Subscribe to Newsletter",
+        name: "subscribe",
+        type: "switch",
+        required: false,
+        otherProps: { color: "primary" },
+        span: 6,
+      },
+    ],
+    [
+      {
+        label: "Age",
+        name: "age",
+        type: "number",
+        required: true,
+        otherProps: { min: 16, max: 80 },
+        span: 6,
+      },
+      {
+        label: "Gender",
+        name: "gender",
+        type: "radio-group",
+        list: GENDERS.map((gender) => ({
+          label: gender,
+          value: gender,
+        })),
+        required: true,
+        otherProps: { row: true },
+        span: 6,
+      },
+    ],
+    [
+      {
+        label: "Hobbies",
+        name: "hobbies",
+        type: "checkbox-group",
+        list: HOBBIES.map((hobby) => ({ label: hobby, value: hobby })),
+        required: true,
+        span: 6,
+      },
+      {
+        label: "Birthdate",
+        name: "birthDate",
+        type: "date",
+        required: true,
+        span: 6,
+      },
+    ],
+    [
+      {
+        label: "Event Dates",
+        name: "eventDates",
+        type: "custom",
+        component: DateRangePickerComponent,
+        required: false,
+        span: 6,
+      },
+      {
+        label: "Upload Image",
+        name: "file",
+        type: "file",
+        required: false,
+        span: 6,
+      },
+    ],
+    [
+      {
+        label: "Custom Text Field",
+        name: "customField",
+        type: "custom",
+        component: CustomTextComponent,
+        required: false,
+        otherProps: { placeholder: "Custom input here" },
+        span: 12,
+      },
+    ],
+  ];
+
+  const onSubmit = (data: FieldTypes) => {
+    console.log({ success: data });
+  };
+
+  const submitError = (errors: any) => {
+    console.log({ errors });
+  };
+
+  const submitButtonProps: ButtonProps = {
+    variant: "contained",
+    color: "primary",
+  };
+
+  const resetButtonProps: ButtonProps = {
+    variant: "outlined",
+    color: "secondary",
+  };
+
+  return (
+    <Container maxWidth="md" sx={{ mt: 4, mb: 4 }}>
+      <Typography variant="h4" gutterBottom>
+        Comprehensive Form
+      </Typography>
+      <CustomForm
+        fieldsGroups={fieldsGroups}
+        onSubmit={[onSubmit, submitError]}
+        formControl={formControl}
+        submitButton={submitButtonProps}
+        resetButton={resetButtonProps}
+        actionButtonsPlacement="flex-end"
+        otherProps={{ spacing: 2 }}
+      />
+    </Container>
+  );
+};
+
+export default ComprehensiveForm;
 ```
 
+## 🤝 Contribution
+
+Your contributions are always welcome! Whether it's reporting bugs, suggesting features, or submitting pull requests, we appreciate your support in making `CustomForm` better for everyone.
+
+1. **Fork the Repository**
+2. **Create a Feature Branch**
+   ```bash
+   git checkout -b feature/YourFeature
+   ```
+3. **Commit Your Changes**
+   ```bash
+   git commit -m "Add YourFeature"
+   ```
+4. **Push to the Branch**
+   ```bash
+   git push origin feature/YourFeature
+   ```
+5. **Open a Pull Request**
+
+Please ensure your code follows the project's coding standards and includes relevant tests where applicable.
+
+## 📜 License
+
+This project is licensed under the [MIT license](https://github.com/DevOsamaIslam/mui-custom-form/blob/master/LICENSE).
+
+---
+
+If you have any questions or need further assistance, feel free to reach out or open an issue in the repository!
+
 ---
 
 ## 🤝 Contribution

package/dist/CustomForm.js

@@ -10,11 +10,21 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CustomForm = void 0;
+// CustomForm.tsx
 var material_1 = require("@mui/material");
 var x_date_pickers_1 = require("@mui/x-date-pickers");
 var react_1 = __importDefault(require("react"));
@@ -26,6 +36,7 @@ var CustomForm = function (_a) {
         switch (field.type) {
             case "text":
             case "number":
+            case "password":
                 return (react_1.default.createElement(react_hook_form_1.Controller, { name: field.name, control: control, rules: { required: field.required }, render: function (_a) {
                         var controlField = _a.field, error = _a.fieldState.error;
                         return (react_1.default.createElement(material_1.TextField, __assign({}, controlField, { value: controlField.value || "" }, 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, onChange: function (e) {
@@ -36,9 +47,15 @@ var CustomForm = function (_a) {
                                     : e.target.value);
                             } })));
                     } }));
+            case "textarea":
+                return (react_1.default.createElement(react_hook_form_1.Controller, { name: field.name, control: control, rules: { required: field.required }, render: function (_a) {
+                        var _b;
+                        var controlField = _a.field, error = _a.fieldState.error;
+                        return (react_1.default.createElement(material_1.TextField, __assign({}, controlField, { value: controlField.value || "" }, field.otherProps, { label: field.label, type: "text", fullWidth: true, required: field.required, multiline: true, rows: ((_b = field.otherProps) === null || _b === void 0 ? void 0 : _b.rows) || 4, error: !!error, helperText: error === null || error === void 0 ? void 0 : error.message, onChange: controlField.onChange })));
+                    } }));
             case "single-select":
             case "multi-select":
-                return (react_1.default.createElement(react_hook_form_1.Controller, { name: field.name, control: control, render: function (_a) {
+                return (react_1.default.createElement(react_hook_form_1.Controller, { name: field.name, control: control, rules: { required: field.required }, 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 },
@@ -48,29 +65,70 @@ var CustomForm = function (_a) {
                             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) {
+                return (react_1.default.createElement(react_hook_form_1.Controller, { name: field.name, control: control, rules: { required: field.required }, render: function (_a) {
                         var controlField = _a.field, error = _a.fieldState.error;
-                        return (react_1.default.createElement(x_date_pickers_1.DatePicker, __assign({}, controlField, { value: controlField.value || null }, 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,
-                                },
-                            } })));
+                        return (react_1.default.createElement(x_date_pickers_1.DatePicker, __assign({}, controlField, { value: controlField.value || null }, field.otherProps, { label: field.label, onChange: function (date) { return controlField.onChange(date); }, renderInput: function (params) { return (react_1.default.createElement(material_1.TextField, __assign({}, params, { 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),
+                return (react_1.default.createElement(material_1.FormControl, { fullWidth: true, error: !!field.required },
+                    react_1.default.createElement(material_1.FormLabel, { component: "legend", required: field.required }, 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
+                        react_1.default.createElement("input", __assign({ type: "file", hidden: true, onChange: function (e) {
                                 var fileValue = e.target.files && e.target.files.length > 0
                                     ? e.target.files[0]
                                     : undefined;
                                 setValue(field.name, fileValue);
-                            } }))));
+                            } }, field.otherProps)))));
+            case "switch":
+                return (react_1.default.createElement(react_hook_form_1.Controller, { name: field.name, control: control, rules: { required: field.required }, render: function (_a) {
+                        var controlField = _a.field, error = _a.fieldState.error;
+                        return (react_1.default.createElement(material_1.FormControlLabel, { control: react_1.default.createElement(material_1.Switch, __assign({}, controlField, { checked: !!controlField.value, onChange: function (e) { return controlField.onChange(e.target.checked); } }, field.otherProps)), label: field.label }));
+                    } }));
+            case "checkbox-group":
+                return (react_1.default.createElement(react_hook_form_1.Controller, { name: field.name, control: control, rules: { required: field.required }, render: function (_a) {
+                        var _b;
+                        var controlField = _a.field, error = _a.fieldState.error;
+                        return (react_1.default.createElement(material_1.FormControl, { component: "fieldset", error: !!error },
+                            react_1.default.createElement(material_1.FormLabel, { component: "legend", required: field.required }, field.label),
+                            react_1.default.createElement(material_1.Stack, { direction: "row", spacing: 2 }, (_b = field.list) === null || _b === void 0 ? void 0 : _b.map(function (option) {
+                                var _a;
+                                return (react_1.default.createElement(material_1.FormControlLabel, { key: option.value, control: react_1.default.createElement(material_1.Checkbox, __assign({ checked: ((_a = controlField.value) === null || _a === void 0 ? void 0 : _a.includes(option.value)) || false, onChange: function (e) {
+                                            var checked = e.target.checked;
+                                            var value = option.value;
+                                            if (checked) {
+                                                controlField.onChange(__spreadArray(__spreadArray([], (controlField.value || []), true), [
+                                                    value,
+                                                ], false));
+                                            }
+                                            else {
+                                                controlField.onChange((controlField.value || []).filter(function (v) { return v !== value; }));
+                                            }
+                                        } }, field.otherProps)), label: option.label }));
+                            })),
+                            error && react_1.default.createElement(material_1.FormHelperText, null, error.message)));
+                    } }));
+            case "radio-group":
+                return (react_1.default.createElement(react_hook_form_1.Controller, { name: field.name, control: control, rules: { required: field.required }, render: function (_a) {
+                        var _b, _c;
+                        var controlField = _a.field, error = _a.fieldState.error;
+                        return (react_1.default.createElement(material_1.FormControl, { component: "fieldset", error: !!error },
+                            react_1.default.createElement(material_1.FormLabel, { component: "legend", required: field.required }, field.label),
+                            react_1.default.createElement(material_1.RadioGroup, __assign({}, controlField, { value: controlField.value || "", onChange: function (e) { return controlField.onChange(e.target.value); }, row: ((_b = field.otherProps) === null || _b === void 0 ? void 0 : _b.row) || false }), (_c = field.list) === null || _c === void 0 ? void 0 : _c.map(function (option) { return (react_1.default.createElement(material_1.FormControlLabel, { key: option.value, value: option.value, control: react_1.default.createElement(material_1.Radio, __assign({}, field.otherProps)), label: option.label })); })),
+                            error && react_1.default.createElement(material_1.FormHelperText, null, error.message)));
+                    } }));
+            case "custom":
+                if (field.component) {
+                    var CustomComponent_1 = field.component;
+                    return (react_1.default.createElement(react_hook_form_1.Controller, { name: field.name, control: control, rules: { required: field.required }, render: function (_a) {
+                            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.FormLabel, { component: "legend", required: field.required }, field.label),
+                                react_1.default.createElement(CustomComponent_1, __assign({ value: controlField.value, onChange: controlField.onChange }, field.otherProps)),
+                                error && react_1.default.createElement(material_1.FormHelperText, null, error.message)));
+                        } }));
+                }
+                return null;
             default:
                 return null;
         }
@@ -78,8 +136,8 @@ var CustomForm = function (_a) {
     var submitButtonProps = submitButton && submitButton !== true ? submitButton : {};
     var resetButtonProps = resetButton && resetButton !== true ? resetButton : {};
     return (react_1.default.createElement(material_1.Stack, __assign({ component: "form", onSubmit: formControl.handleSubmit(onSubmit[0], onSubmit[1]), 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))); }))); })),
-        react_1.default.createElement(material_1.Stack, { direction: "row", justifyContent: actionButtonsPlacement },
+        react_1.default.createElement(material_1.Grid2, { container: true, spacing: 1 }, fieldsGroups.map(function (fields, rowIndex) { return (react_1.default.createElement(material_1.Grid2, { container: true, key: rowIndex, spacing: 2 }, fields.map(function (field, fieldIndex) { return (react_1.default.createElement(material_1.Grid2, { key: fieldIndex, size: field.span || 12 }, renderField(field))); }))); })),
+        react_1.default.createElement(material_1.Stack, { direction: "row", justifyContent: actionButtonsPlacement || "flex-end", spacing: 2 },
             resetButton && (react_1.default.createElement(material_1.Button, __assign({ type: "reset", variant: "contained", onClick: function () { return reset(); } }, resetButtonProps), "Reset")),
             submitButton && (react_1.default.createElement(material_1.Button, __assign({ type: "submit", variant: "contained" }, submitButtonProps), "Submit")))));
 };

package/dist/types.d.ts

@@ -3,7 +3,7 @@ import { CSSProperties } from "react";
 import { FieldValues, SubmitErrorHandler, SubmitHandler, useForm } from "react-hook-form";
 type name<T> = T extends string ? string : keyof T;
 type SelectTypes = "single-select" | "multi-select";
-type BaseTypes = "text" | "number" | "date" | "file";
+type BaseTypes = "text" | "number" | "date" | "file" | "password" | "textarea" | "switch" | "checkbox-group" | "radio-group" | "custom";
 export interface ISelectField {
     type: SelectTypes;
     list: $option[];
@@ -11,11 +11,12 @@ export interface ISelectField {
 export interface IOtherField {
     type: BaseTypes;
     list?: $option[];
+    component?: React.ComponentType<CustomComponentProps>;
 }
 export type ICustomField<T = string> = {
     label: string;
     name: name<T> | name<T>[];
-    required?: true;
+    required?: boolean;
     otherProps?: any;
     span?: number;
 } & ({
@@ -23,6 +24,8 @@ export type ICustomField<T = string> = {
     list: $option[];
 } | {
     type: BaseTypes;
+    list?: $option[];
+    component?: React.ComponentType<CustomComponentProps>;
 });
 export type $option<T = any> = {
     icon?: React.ReactNode;
@@ -39,4 +42,9 @@ export interface ICustomForm<T extends FieldValues> {
     resetButton?: ButtonProps | boolean;
     otherProps?: any;
 }
+export interface CustomComponentProps {
+    value: any;
+    onChange: (value: any) => void;
+    [key: string]: any;
+}
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mui-custom-form",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "description": "A versatile React form component utilizing MUI components and react-hook-form.",
   "main": "dist/CustomForm.js",
   "types": "dist/CustomForm.d.ts",
@@ -26,19 +26,19 @@
   },
   "homepage": "https://github.com/DevOsamaIslam/mui-custom-form#readme",
   "peerDependencies": {
-    "@mui/material": "5.14.2",
-    "@mui/x-date-pickers": "^6.10.2",
+    "@mui/material": "6.0.1",
+    "@mui/x-date-pickers": "^7.15.0",
     "react-hook-form": "^7.45.2",
-    "date-fns": "^2.30.0",
+    "date-fns": "^4.1.0",
     "dayjs": "^1.11.9",
     "moment": "^2.29.4"
   },
   "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"
+    "@types/node": "^22.7.0",
+    "@types/react": "^18.3.9",
+    "typescript": "^5.6.2"
   },
   "dependencies": {}
 }