mui-custom-form 0.1.0 → 0.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mui-custom-form",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "A versatile React form component utilizing MUI components and react-hook-form.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -10,7 +10,7 @@
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/DevOsamaIslam/muicustom-form.git"
+    "url": "git+https://github.com/DevOsamaIslam/mui-custom-form.git"
   },
   "keywords": [
     "react",
@@ -22,9 +22,9 @@
   "author": "Your Name",
   "license": "MIT",
   "bugs": {
-    "url": "https://github.com/your-github-username/custom-form/issues"
+    "url": "https://github.com/DevOsamaIslam/mui-custom-form/issues"
   },
-  "homepage": "https://github.com/your-github-username/custom-form#readme",
+  "homepage": "https://github.com/DevOsamaIslam/mui-custom-form#readme",
   "peerDependencies": {
     "@mui/material": "5.14.2",
     "@mui/x-date-pickers": "^6.10.2",

package/dist/CustomForm.d.ts

@@ -1,25 +0,0 @@
-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

@@ -1,75 +0,0 @@
-"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/src/CustomForm.tsx

@@ -1,171 +0,0 @@
-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

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