mui-custom-form 0.1.0 → 0.1.2

package/dist/CustomForm.js

@@ -73,3 +73,4 @@ var CustomForm = function (_a) {
         submitButton && (react_1.default.createElement(material_1.Button, { type: "submit", variant: "contained" }, "Submit"))));
 };
 exports.CustomForm = CustomForm;
+//# sourceMappingURL=CustomForm.js.map

package/dist/CustomForm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CustomForm.js","sourceRoot":"","sources":["../src/CustomForm.tsx"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mui-custom-form",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "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/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"]
-}