mui-custom-form 0.1.8 → 1.0.0

package/dist/CustomForm.d.ts

@@ -1,25 +1,4 @@
-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<any>>;
-    submitButton?: boolean;
-    otherProps?: any;
-}
-export declare const CustomForm: React.FC<ICustomForm>;
-export {};
+import { FieldValues } from "react-hook-form";
+import { ICustomForm } from "./types";
+export declare const CustomForm: <T extends FieldValues>({ fieldsGroups, onSubmit, formControl, submitButton, resetButton, actionButtonsPlacement, otherProps, }: ICustomForm<T>) => React.JSX.Element;

package/dist/CustomForm.js

@@ -17,18 +17,24 @@ 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 react_hook_form_1 = require("react-hook-form");
 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 fieldsGroups = _a.fieldsGroups, onSubmit = _a.onSubmit, formControl = _a.formControl, _b = _a.submitButton, submitButton = _b === void 0 ? true : _b, resetButton = _a.resetButton, actionButtonsPlacement = _a.actionButtonsPlacement, otherProps = _a.otherProps;
+    var control = formControl.control, setValue = formControl.setValue, reset = formControl.reset, register = formControl.register;
     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) {
+                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, 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 })));
+                        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) {
+                                if (!e.target.value)
+                                    return controlField.onChange(undefined);
+                                controlField.onChange(field.type === "number"
+                                    ? parseFloat(e.target.value)
+                                    : e.target.value);
+                            } })));
                     } }));
             case "single-select":
             case "multi-select":
@@ -37,13 +43,14 @@ var CustomForm = 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.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)); })),
+                            react_1.default.createElement(material_1.Select, __assign({ label: field.label }, controlField, { value: controlField.value ||
+                                    (field.type === "multi-select" ? [] : "") }, 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: {
+                        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,
@@ -68,9 +75,13 @@ var CustomForm = function (_a) {
                 return null;
         }
     };
-    return (react_1.default.createElement(material_1.Stack, __assign({ component: "form", onSubmit: onSubmit, noValidate: true }, otherProps, { spacing: 3 }),
+    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))); }))); })),
-        submitButton && (react_1.default.createElement(material_1.Button, { type: "submit", variant: "contained" }, "Submit"))));
+        react_1.default.createElement(material_1.Stack, { direction: "row", justifyContent: actionButtonsPlacement },
+            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")))));
 };
 exports.CustomForm = CustomForm;
 //# sourceMappingURL=CustomForm.js.map

package/dist/types.d.ts

@@ -0,0 +1,42 @@
+import { ButtonProps } from "@mui/material";
+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";
+export interface ISelectField {
+    type: SelectTypes;
+    list: $option[];
+}
+export interface IOtherField {
+    type: BaseTypes;
+    list?: $option[];
+}
+export type ICustomField<T = string> = {
+    label: string;
+    name: name<T> | name<T>[];
+    required?: true;
+    otherProps?: any;
+    span?: number;
+} & ({
+    type: SelectTypes;
+    list: $option[];
+} | {
+    type: BaseTypes;
+});
+export type $option<T = any> = {
+    icon?: React.ReactNode;
+    label: string;
+    value: T;
+};
+export type IFieldGroup<T = any> = ICustomField<T>[][];
+export interface ICustomForm<T extends FieldValues> {
+    fieldsGroups: IFieldGroup<any>;
+    onSubmit: [SubmitHandler<T>, SubmitErrorHandler<T>?];
+    formControl: ReturnType<typeof useForm<T>>;
+    actionButtonsPlacement?: CSSProperties["justifyContent"];
+    submitButton?: ButtonProps | boolean;
+    resetButton?: ButtonProps | boolean;
+    otherProps?: any;
+}
+export {};

package/dist/types.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=types.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mui-custom-form",
-  "version": "0.1.8",
+  "version": "1.0.0",
   "description": "A versatile React form component utilizing MUI components and react-hook-form.",
   "main": "dist/CustomForm.js",
   "types": "dist/CustomForm.d.ts",

package/readme.md

@@ -1,84 +1,76 @@
-## CustomForm
+# 📝 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.
+`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.
 
-### Table of Contents
+## 📚 Table of Contents
 
-- [Installation](#installation)
-- [Features](#features)
-- [Usage](#usage)
-  - [Props](#props)
-- [Example](#example)
-- [Contribution](#contribution)
-- [License](#license)
+- [🛠 Installation](#installation)
+- [✨ Features](#features)
+- [🚀 Usage](#usage)
+  - [🔧 Props](#props)
+- [📖 Examples](#examples)
+- [🤝 Contribution](#contribution)
+- [📜 License](#license)
 
-### Installation
-
-To add `CustomForm` to your project, use the following command:
+## 🛠 Installation
 
 ```bash
 npm install mui-custom-form
 ```
 
-Ensure that you have the required peer dependencies installed:
+📦 **Dependencies**:
 
 - `@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
+## ✨ Features
 
-#### Props
+- 🎛 **Dynamic Field Types**
+- 🎨 **MUI Integration**
+- 📱 **Responsive Design**
 
-- CustomForm component
+## 🚀 Usage
 
-| 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. |
+### 🔧 Props
 
-- CustomField 2D array
+#### CustomForm Component
 
-The `ICustomField` interface is used to define each field in the form. Below are its properties:
+| 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           |
 
-| Name         | Description                                                                               |
-| ------------ | ----------------------------------------------------------------------------------------- |
-| `label`      | The display label of the field.                                                           |
-| `name`       | The name attribute of the field, used for form data identification.                       |
-| `type`       | The type of the field, determining its behavior and appearance.                           |
-| `list`       | An array of options for select type fields. Each option has a label and a value.          |
-| `required`   | Indicates whether the field is mandatory or not.                                          |
-| `otherProps` | Any additional props to pass to the underlying MUI component.                             |
-| `span`       | A number between 1 and 12, representing the grid span for the field in MUI's grid system. |
+#### CustomField 2D Array
 
-The `list` array, has the following structure:
+| 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           |
 
-| Name    | Description                                                |
-| ------- | ---------------------------------------------------------- |
-| `icon`  | An optional icon to display alongside the option.          |
-| `label` | The display label of the option.                           |
-| `value` | The value of the option, used when the option is selected. |
+#### \* `list` prop is required when the type is `single-select` or `multi-select`.
 
 ---
 
-### Example
+## 📖 Examples
 
-Here's a simple example showcasing how to implement a `CustomForm`:
+### Basic Form
 
-```typescript
-const MyComponent = () => {
-  const formControl = useForm()
+```ts
+const BasicForm = () => {
+  const formControl = useForm<{ username: string; birthdate: string }>()
 
-  const fieldsGroups: ICustomField[][] = [
+  const fieldsGroups: IFieldGroup = [
     [
       {
         label: "Username",
@@ -90,40 +82,52 @@ const MyComponent = () => {
         label: "Birthdate",
         name: "birthdate",
         type: "date",
+        required: true,
       },
     ],
   ]
 
-  const handleSubmit = (data: unknown) => {
+  const handleSubmit = (data: { username: string; birthdate: string }) => {
     console.log({ success: data })
   }
 
+  const submitError = (data: unknown) => {
+    console.log({ error: data })
+  }
+
   return (
     <CustomForm
       fieldsGroups={fieldsGroups}
-      onSubmit={formControl.handleSubmit(handleSubmit)}
+      onSubmit={[handleSubmit, submitError]}
       formControl={formControl}
     />
   )
 }
 ```
 
-Usage with zod
+### Form with Zod Validation
+
+```ts
+const GENDERS = ["Male", "Female"] as const
+const HOBBIES = ["Coding", "Collections", "Hiking"] as const
 
-```typescript
 const Fields = z.object({
   username: z.string(),
-  age: 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(),
+  file: z.instanceof(File).optional(),
 })
 
 type FieldTypes = z.infer<typeof Fields>
 
-function MyComponent() {
+const FormWithZod = () => {
   const formControl = useForm<FieldTypes>({
     resolver: zodResolver(Fields),
   })
 
-  const fieldsGroups: ICustomField<FieldTypes>[][] = [
+  const fieldsGroups: IFieldGroup<FieldTypes> = [
     [
       {
         label: "Username",
@@ -138,6 +142,33 @@ function MyComponent() {
         required: true,
       },
     ],
+    [
+      {
+        label: "Gender",
+        name: "gender",
+        type: "single-select",
+        list: GENDERS.map((gender) => ({ label: gender, value: gender })),
+      },
+      {
+        label: "Hobbies",
+        name: "hobbies",
+        type: "multi-select",
+        list: HOBBIES.map((hobby) => ({ label: hobby, value: hobby })),
+        required: true,
+      },
+    ],
+    [
+      {
+        label: "Date of birth",
+        name: "birthDate",
+        type: "date",
+      },
+      {
+        label: "Upload Image",
+        name: "file",
+        type: "file",
+      },
+    ],
   ]
 
   const onSubmit = (data: FieldTypes) => {
@@ -147,17 +178,15 @@ function MyComponent() {
   return (
     <CustomForm
       fieldsGroups={fieldsGroups}
-      onSubmit={formControl.handleSubmit(onSubmit, (fail) =>
-        console.log({ fail })
-      )}
+      onSubmit={[onSubmit]}
       formControl={formControl}
     />
   )
 }
 ```
 
-### Contribution
+---
 
-Your contributions are always welcome! Please create a pull request and we'll review your suggestion.
+## 🤝 Contribution
 
----
+Your contributions are always welcome!