mui-custom-form 0.1.4 → 0.1.6

package/dist/CustomForm.d.ts

@@ -17,7 +17,7 @@ export interface ICustomField<T = string> {
 interface ICustomForm {
     fieldsGroups: ICustomField<any>[][];
     onSubmit: ReturnType<this["formControl"]["handleSubmit"]>;
-    formControl: ReturnType<typeof useForm>;
+    formControl: ReturnType<typeof useForm<any>>;
     submitButton?: boolean;
     otherProps?: any;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mui-custom-form",
-  "version": "0.1.4",
+  "version": "0.1.6",
   "description": "A versatile React form component utilizing MUI components and react-hook-form.",
   "main": "dist/CustomForm.js",
   "types": "dist/CustomForm.d.ts",
@@ -28,6 +28,9 @@
   "peerDependencies": {
     "@mui/material": "5.14.2",
     "@mui/x-date-pickers": "^6.10.2",
+    "date-fns": "^2.30.0",
+    "dayjs": "^1.11.9",
+    "moment": "^2.29.4",
     "react-hook-form": "^7.45.2"
   },
   "devDependencies": {
@@ -36,5 +39,6 @@
     "@types/node": "^20.5.1",
     "@types/react": "^18.2.20",
     "typescript": "^5.1.6"
-  }
+  },
+  "dependencies": {}
 }

package/readme.md

@@ -55,7 +55,7 @@ import { CustomForm } from "your-package-name"
 const MyComponent = () => {
   const formControl = useForm()
 
-  const fieldsGroups = [
+  const fieldsGroups: ICustomField[][] = [
     [
       {
         label: "Username",
@@ -71,14 +71,52 @@ const MyComponent = () => {
     ],
   ]
 
-  const handleSubmit = (data) => {
+  const handleSubmit = (data: unknown) => {
     console.log(data)
   }
 
   return (
     <CustomForm
       fieldsGroups={fieldsGroups}
-      onSubmit={handleSubmit}
+      onSubmit={formControl.handleSubmit(handleSubmit)}
+      formControl={formControl}
+    />
+  )
+}
+
+export default MyComponent
+```
+
+Usage with zod
+
+```typescript
+const MyComponent = () => {
+  const formControl = useForm()
+
+  const fieldsGroups: ICustomField[][] = [
+    [
+      {
+        label: "Username",
+        name: "username",
+        type: "text",
+        required: true,
+      },
+      {
+        label: "Birthdate",
+        name: "birthdate",
+        type: "date",
+      },
+    ],
+  ]
+
+  const handleSubmit = (data: unknown) => {
+    console.log(data)
+  }
+
+  return (
+    <CustomForm
+      fieldsGroups={fieldsGroups}
+      onSubmit={formControl.handleSubmit(handleSubmit)}
       formControl={formControl}
     />
   )

package/demo/README.md

@@ -1,27 +0,0 @@
-# React + TypeScript + Vite
-
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
-
-Currently, two official plugins are available:
-
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
-
-## Expanding the ESLint configuration
-
-If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
-
-- Configure the top-level `parserOptions` property like this:
-
-```js
-   parserOptions: {
-    ecmaVersion: 'latest',
-    sourceType: 'module',
-    project: ['./tsconfig.json', './tsconfig.node.json'],
-    tsconfigRootDir: __dirname,
-   },
-```
-
-- Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked`
-- Optionally add `plugin:@typescript-eslint/stylistic-type-checked`
-- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list

package/demo/package.json

@@ -1,31 +0,0 @@
-{
-  "name": "demo",
-  "private": true,
-  "version": "0.0.0",
-  "type": "module",
-  "scripts": {
-    "dev": "vite",
-    "build": "tsc && vite build",
-    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
-    "preview": "vite preview"
-  },
-  "dependencies": {
-    "@hookform/resolvers": "^3.2.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-hook-form": "^7.45.4",
-    "zod": "^3.22.2"
-  },
-  "devDependencies": {
-    "@types/react": "^18.2.15",
-    "@types/react-dom": "^18.2.7",
-    "@typescript-eslint/eslint-plugin": "^6.0.0",
-    "@typescript-eslint/parser": "^6.0.0",
-    "@vitejs/plugin-react": "^4.0.3",
-    "eslint": "^8.45.0",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-react-refresh": "^0.4.3",
-    "typescript": "^5.0.2",
-    "vite": "^4.4.5"
-  }
-}