From 239a4cf9998f89472be190f0273b8242be9c8acb Mon Sep 17 00:00:00 2001
From: erfan moghadasi <97363934+erfanmoghadasi@users.noreply.github.com>
Date: Mon, 8 Jul 2024 16:23:30 +0330
Subject: [PATCH 1/2] Feat(form) select 46 (#48)

* feat(form): initial select component

* feat(form): select input prop types

* fix(form): set controller field props

* fix(form): select input label align

* fix: some issue on dependesies and inputLableProps and options select component

* fix: Options in select and sutocomplete

* fix: formID

---------

Co-authored-by: mrbadri <mrbadri.dev@gmail.com>
---
 apps/docs/src/app/app.tsx                     | 271 ++++++++++--------
 .../fields/autoComplete/autoComplete.tsx      |   5 +-
 .../autoComplete/autoComplete.types.tsx       |  11 +-
 .../fields/autoComplete/useAutoComplete.tsx   |  23 +-
 .../fields/checkbox/checkbox.types.ts         |   2 +-
 .../components/fields/checkbox/useCheckbox.ts |   4 +-
 .../src/components/fields/select/select.tsx   |  35 +++
 .../components/fields/select/select.types.ts  |  26 ++
 .../src/components/fields/select/useSelect.ts | 113 ++++++++
 .../src/components/fields/text/text.types.ts  |   2 +-
 .../src/components/fields/text/useText.ts     |   4 +-
 .../modules/form/src/types/public.types.ts    |  21 +-
 .../form/src/utils/selector/formSelector.tsx  |  22 +-
 13 files changed, 378 insertions(+), 161 deletions(-)
 create mode 100644 packages/core/src/modules/form/src/components/fields/select/select.tsx
 create mode 100644 packages/core/src/modules/form/src/components/fields/select/select.types.ts
 create mode 100644 packages/core/src/modules/form/src/components/fields/select/useSelect.ts

diff --git a/apps/docs/src/app/app.tsx b/apps/docs/src/app/app.tsx
index ef530a9..c2b704b 100644
--- a/apps/docs/src/app/app.tsx
+++ b/apps/docs/src/app/app.tsx
@@ -9,123 +9,123 @@ import Tabs, { TabData } from '@mui-builder/tab';
 export function App() {
   const children: BuilderProps[] = [
     // Fields
-    {
-      id: 'form-field-1',
-      groupType: 'form',
-      type: 'field-text',
-      props: {
-        id: 'Field-One',
-        formId: '20',
-        label: 'Field One (Form Id: 20)',
-        dependesies: ['FieldTwo'],
-        script: `
-          if(formMethod.getValues()?.FieldTwo === "erfan"){
-            setProps('FieldTwo' , {label:'i can'});
-            return {};
-          }`,
-        api: {
-          configs: {
-            url: `return ("https://jsonplaceholder.typicode.com/todo8888s/" + formMethod.getValues()?.FieldTwo);`,
-            method: 'post',
-            data: {
-              test: '1',
-            },
-          },
-          queries: {
-            enable: `
-            if(formMethod.getValues()?.FieldTwo === 'api'){
-              return true;
-            }
-            return false;
-            `,
-          },
-        },
-        defaultValue: 'default value field one',
-      },
-    },
-    {
-      id: 'form-field-2',
-      groupType: 'form',
-      type: 'field-text',
-      props: {
-        id: 'FieldTwo',
-        formId: '20',
-        label: 'Field Two (Form Id: 20)',
-      },
-    },
+    // {
+    //   id: 'form-field-1',
+    //   groupType: 'form',
+    //   type: 'field-text',
+    //   props: {
+    //     id: 'Field-One',
+    //     formId: '20',
+    //     label: 'Field One (Form Id: 20)',
+    //     dependencies: ['FieldTwo'],
+    //     script: `
+    //       if(formMethod.getValues()?.FieldTwo === "erfan"){
+    //         setProps('FieldTwo' , {label:'i can'});
+    //         return {};
+    //       }`,
+    //     api: {
+    //       configs: {
+    //         url: `return ("https://jsonplaceholder.typicode.com/todo8888s/" + formMethod.getValues()?.FieldTwo);`,
+    //         method: 'post',
+    //         data: {
+    //           test: '1',
+    //         },
+    //       },
+    //       queries: {
+    //         enable: `
+    //         if(formMethod.getValues()?.FieldTwo === 'api'){
+    //           return true;
+    //         }
+    //         return false;
+    //         `,
+    //       },
+    //     },
+    //     defaultValue: 'default value field one',
+    //   },
+    // },
+    // {
+    //   id: 'form-field-2',
+    //   groupType: 'form',
+    //   type: 'field-text',
+    //   props: {
+    //     id: 'FieldTwo',
+    //     formId: '20',
+    //     label: 'Field Two (Form Id: 20)',
+    //   },
+    // },
 
-    {
-      id: 'form-field-273',
-      groupType: 'grid',
-      type: 'container',
-      props: {
-        rowSpacing: 2,
-        columnSpacing: 2,
-        children: [
-          {
-            id: 'form-field-4kldjd',
-            groupType: 'grid',
-            type: 'item',
-            props: {
-              children: {
-                id: 'form-field-4',
-                groupType: 'form',
-                type: 'field-text',
-                props: {
-                  id: 'Field4',
-                  formId: '20',
-                  label: 'Field 4 (Form Id: 20)',
-                },
-              },
-            },
-          },
+    // {
+    //   id: 'form-field-273',
+    //   groupType: 'grid',
+    //   type: 'container',
+    //   props: {
+    //     rowSpacing: 2,
+    //     columnSpacing: 2,
+    //     children: [
+    //       {
+    //         id: 'form-field-4kldjd',
+    //         groupType: 'grid',
+    //         type: 'item',
+    //         props: {
+    //           children: {
+    //             id: 'form-field-4',
+    //             groupType: 'form',
+    //             type: 'field-text',
+    //             props: {
+    //               id: 'Field4',
+    //               formId: '20',
+    //               label: 'Field 4 (Form Id: 20)',
+    //             },
+    //           },
+    //         },
+    //       },
 
-          {
-            id: 'form-field-5',
-            groupType: 'grid',
-            type: 'item',
-            props: {
-              children: {
-                id: 'form-field-4',
-                groupType: 'form',
-                type: 'field-text',
-                props: {
-                  id: 'Field4',
-                  formId: '20',
-                  label: 'Field 5 (Form Id: 20)',
-                },
-              },
-            },
-          },
-        ],
-      },
-    },
+    //       {
+    //         id: 'form-field-5',
+    //         groupType: 'grid',
+    //         type: 'item',
+    //         props: {
+    //           children: {
+    //             id: 'form-field-4',
+    //             groupType: 'form',
+    //             type: 'field-text',
+    //             props: {
+    //               id: 'Field4',
+    //               formId: '20',
+    //               label: 'Field 5 (Form Id: 20)',
+    //             },
+    //           },
+    //         },
+    //       },
+    //     ],
+    //   },
+    // },
 
-    {
-      id: 'form-field-3',
-      groupType: 'form',
-      type: 'field-text',
-      props: {
-        id: 'Field-Three',
-        formId: '21',
-        label: 'Field Three (Form Id: 21)',
-        // helperText: 'Helper Text',
-        rule: {
-          // required: {
-          //   message: 'this is required',
-          //   value: true,
-          // },
-          // validate: (value, formValues) => {
-          //   if(value === 'val')
-          //   return 'rule validate';
-          // },
-          validate: `
-          if(value === 'val')
-            return 'rule validate';
-          `,
-        },
-      },
-    },
+    // {
+    //   id: 'form-field-3',
+    //   groupType: 'form',
+    //   type: 'field-text',
+    //   props: {
+    //     id: 'Field-Three',
+    //     formId: '21',
+    //     label: 'Field Three (Form Id: 21)',
+    //     // helperText: 'Helper Text',
+    //     rule: {
+    //       // required: {
+    //       //   message: 'this is required',
+    //       //   value: true,
+    //       // },
+    //       // validate: (value, formValues) => {
+    //       //   if(value === 'val')
+    //       //   return 'rule validate';
+    //       // },
+    //       validate: `
+    //       if(value === 'val')
+    //         return 'rule validate';
+    //       `,
+    //     },
+    //   },
+    // },
 
     // Actions
     {
@@ -171,7 +171,7 @@ export function App() {
       type: 'auto-complete',
       props: {
         id: 'auto-complete-1',
-        formId: '18',
+        formId: '21',
         options: [
           { name: 'folan lab', id: 'fo val' },
           { name: 'folan lab22', id: 'fo val22' },
@@ -190,7 +190,7 @@ export function App() {
       type: 'checkbox',
       props: {
         id: 'checkbox-1',
-        formId: '18',
+        formId: '21',
         label: 'label 1',
         checkboxProps: {},
         children: [
@@ -219,6 +219,43 @@ export function App() {
         ],
       },
     },
+    {
+      id: 'select-form-1',
+      groupType: 'form',
+      type: 'select',
+      props: {
+        formId: '20',
+        children: 'child',
+        id: 'select-1',
+        sx: { width: '200px' },
+        fullWidth: true,
+        // multiple: true,
+        defaultValue: '',
+        inputLabelProps: {
+          children: 'select label',
+        },
+        options: [
+          { name: 'first', id: '1' },
+          { name: 'second', id: '2' },
+        ],
+      },
+    },
+    //   id: 'select-form-1',
+    //   groupType: 'form',
+    //   type: 'select',
+    //   props:{
+    //     formId: '18',
+    //     variant: 'contained',
+    //     options:[{
+    //       title: 'menu 1',
+    //       value: 'm1'
+    //     }],
+    //     formControlProps:{
+    //       title: 'select input',
+    //       variant: 'standard'
+    //     },
+    //   }
+    // }
   ];
 
   const [tabs, setTabs] = useState<TabData[]>([
@@ -229,7 +266,7 @@ export function App() {
     <div>
       <div role="navigation">
         ----
-        <Tabs tabs={tabs} setTabs={setTabs} addable />
+        {/* <Tabs tabs={tabs} setTabs={setTabs} addable /> */}
         ---
         <ul>
           <li>
diff --git a/packages/core/src/modules/form/src/components/fields/autoComplete/autoComplete.tsx b/packages/core/src/modules/form/src/components/fields/autoComplete/autoComplete.tsx
index 8377c21..b5b445d 100644
--- a/packages/core/src/modules/form/src/components/fields/autoComplete/autoComplete.tsx
+++ b/packages/core/src/modules/form/src/components/fields/autoComplete/autoComplete.tsx
@@ -4,11 +4,12 @@ import { Autocomplete, TextField } from '@mui/material';
 
 import ShowIf from '@mui-builder/utils/showIf/showIf';
 
-import { AutoCompleteOptions, AutoCompleteProps } from './autoComplete.types';
+import { Option } from '../../../types/public.types';
+import { AutoCompleteProps } from './autoComplete.types';
 
 import useAutoComplete from './useAutoComplete';
 
-const AutoComplete: FC<AutoCompleteProps<AutoCompleteOptions>> = (props) => {
+const AutoComplete: FC<AutoCompleteProps<Option>> = (props) => {
   const { show, getFieldProps, getInnerTextFieldProps } =
     useAutoComplete(props);
 
diff --git a/packages/core/src/modules/form/src/components/fields/autoComplete/autoComplete.types.tsx b/packages/core/src/modules/form/src/components/fields/autoComplete/autoComplete.types.tsx
index 33cdf18..7640d5f 100644
--- a/packages/core/src/modules/form/src/components/fields/autoComplete/autoComplete.types.tsx
+++ b/packages/core/src/modules/form/src/components/fields/autoComplete/autoComplete.types.tsx
@@ -8,14 +8,9 @@ import {
 import { Api } from '@mui-builder/types/api.types';
 import { Script } from '@mui-builder/types/script.types';
 
-import { Dependesies, FormId, Id } from '../../../types/public.types';
+import { Dependesies, FormId, Id, Option } from '../../../types/public.types';
 import { Rule } from '../../../types/validation.types';
 
-export type AutoCompleteOptions = {
-  name: number | string;
-  id: number | string;
-};
-
 export type AutoCompleteProps<
   Value,
   Multiple extends boolean | undefined = false,
@@ -29,12 +24,12 @@ export type AutoCompleteProps<
   id: Id;
   formId: FormId;
   script?: Script;
-  dependesies?: Dependesies;
+  dependencies?: Dependesies;
   propsController?: Record<string, any>;
   api?: Api;
   rule?: Rule;
   show?: boolean;
-  options: AutoCompleteOptions[];
+  options: Option[];
   renderInput?: (params: AutocompleteRenderInputParams) => React.ReactNode;
   innerTextFieldProps?: Partial<TextFieldProps>;
 };
diff --git a/packages/core/src/modules/form/src/components/fields/autoComplete/useAutoComplete.tsx b/packages/core/src/modules/form/src/components/fields/autoComplete/useAutoComplete.tsx
index 4fdddab..cbaa3d6 100644
--- a/packages/core/src/modules/form/src/components/fields/autoComplete/useAutoComplete.tsx
+++ b/packages/core/src/modules/form/src/components/fields/autoComplete/useAutoComplete.tsx
@@ -1,4 +1,3 @@
-import { useMemo } from 'react';
 import { useController, useWatch } from 'react-hook-form';
 
 import useQueryBuilder from '@mui-builder/utils/useQueryBuilder/useQueryBuilder';
@@ -6,19 +5,20 @@ import UseScript from '@mui-builder/utils/useScript/useScript';
 
 import axios from 'axios';
 
-import { AutoCompleteOptions, AutoCompleteProps } from './autoComplete.types';
+import { Option } from '../../../types/public.types';
+import { AutoCompleteProps } from './autoComplete.types';
 
 import useForms from '../../../hooks/useForms/useForms';
 import usePropsController from '../../../hooks/usePropsController/usePropsController';
 import useRule from '../../../hooks/useRule/useRule';
 
-const useAutoComplete = (props: AutoCompleteProps<AutoCompleteOptions>) => {
+const useAutoComplete = (props: AutoCompleteProps<Option>) => {
   const {
     formId,
     script,
     api,
     show = true,
-    dependesies,
+    dependencies,
     defaultValue,
     options,
     innerTextFieldProps,
@@ -45,7 +45,7 @@ const useAutoComplete = (props: AutoCompleteProps<AutoCompleteOptions>) => {
   // Handle Wtach Fields
   useWatch({
     control: formMethod.control,
-    name: dependesies ?? [],
+    name: dependencies ?? [],
   });
 
   // Controller
@@ -73,17 +73,12 @@ const useAutoComplete = (props: AutoCompleteProps<AutoCompleteOptions>) => {
 
   // Props Methods
   // -- Handle Option
-  const getOptionLabel = (option: AutoCompleteOptions) => option?.name ?? '';
+  const getOptionLabel = (option: Option) => option?.name ?? '';
 
-  const isOptionEqualToValue = (
-    option: AutoCompleteOptions,
-    value: AutoCompleteOptions
-  ) => option.id === value.id;
+  const isOptionEqualToValue = (option: Option, value: Option) =>
+    option.id === value.id;
 
-  const onChange: AutoCompleteProps<AutoCompleteOptions>['onChange'] = (
-    _,
-    value
-  ) => {
+  const onChange: AutoCompleteProps<Option>['onChange'] = (_, value) => {
     field.onChange(value ?? null);
   };
 
diff --git a/packages/core/src/modules/form/src/components/fields/checkbox/checkbox.types.ts b/packages/core/src/modules/form/src/components/fields/checkbox/checkbox.types.ts
index d404cff..5176c37 100644
--- a/packages/core/src/modules/form/src/components/fields/checkbox/checkbox.types.ts
+++ b/packages/core/src/modules/form/src/components/fields/checkbox/checkbox.types.ts
@@ -14,7 +14,7 @@ export type CheckboxProps = Omit<FormControlLabelProps, 'control'> & {
   checkboxProps: MuiCheckboxProps;
   formId: FormId;
   script?: Script;
-  dependesies?: Dependesies;
+  dependencies?: Dependesies;
   propsController?: Record<string, any>;
   api?: Api;
   rule?: Rule;
diff --git a/packages/core/src/modules/form/src/components/fields/checkbox/useCheckbox.ts b/packages/core/src/modules/form/src/components/fields/checkbox/useCheckbox.ts
index 228320c..12a692b 100644
--- a/packages/core/src/modules/form/src/components/fields/checkbox/useCheckbox.ts
+++ b/packages/core/src/modules/form/src/components/fields/checkbox/useCheckbox.ts
@@ -19,7 +19,7 @@ const useCheckbox = (props: CheckboxProps) => {
     script,
     formId,
     show = true,
-    dependesies,
+    dependencies,
     checkboxProps,
     ...formControlLabelProps
   } = props;
@@ -44,7 +44,7 @@ const useCheckbox = (props: CheckboxProps) => {
   // Handle Wtach Fields
   useWatch({
     control: formMethod.control,
-    name: dependesies ?? [],
+    name: dependencies ?? [],
   });
 
   // API Call
diff --git a/packages/core/src/modules/form/src/components/fields/select/select.tsx b/packages/core/src/modules/form/src/components/fields/select/select.tsx
new file mode 100644
index 0000000..645d3b2
--- /dev/null
+++ b/packages/core/src/modules/form/src/components/fields/select/select.tsx
@@ -0,0 +1,35 @@
+import { FC } from 'react';
+
+import {
+  FormControl,
+  InputLabel,
+  MenuItem,
+  Select as MuiSelect,
+} from '@mui/material';
+
+import { SelectProps } from './select.types';
+
+import useSelect from './useSelect';
+
+const Select: FC<SelectProps> = (props) => {
+  const {
+    options,
+    getSelectProps,
+    getMenuItemProps,
+    getInputLableProps,
+    getFormControlProps,
+  } = useSelect(props);
+
+  return (
+    <FormControl {...getFormControlProps()}>
+      <InputLabel {...getInputLableProps()}></InputLabel>
+      <MuiSelect {...getSelectProps()}>
+        {options.map((item) => (
+          <MenuItem {...getMenuItemProps(item)}>{item.name}</MenuItem>
+        ))}
+      </MuiSelect>
+    </FormControl>
+  );
+};
+
+export default Select;
diff --git a/packages/core/src/modules/form/src/components/fields/select/select.types.ts b/packages/core/src/modules/form/src/components/fields/select/select.types.ts
new file mode 100644
index 0000000..c58cb42
--- /dev/null
+++ b/packages/core/src/modules/form/src/components/fields/select/select.types.ts
@@ -0,0 +1,26 @@
+import {
+  FormControlProps,
+  MenuItemProps,
+  SelectProps as MuiSelectProps,
+} from '@mui/material';
+import { InputLabelProps } from '@mui/material/InputLabel';
+
+import { Api } from '@mui-builder/types/api.types';
+import { Script } from '@mui-builder/types/script.types';
+
+import { Dependesies, FormId, Id, Option } from '../../../types/public.types';
+import { Rule } from '../../../types/validation.types';
+
+export type SelectProps = MuiSelectProps & {
+  id: Id;
+  formId: FormId;
+  dependencies?: Dependesies;
+  api?: Api;
+  rule?: Rule;
+  show?: boolean;
+  script?: Script;
+  formControlProps: FormControlProps;
+  inputLabelProps: InputLabelProps;
+  options: Option[];
+  propsController?: Record<string, any>;
+};
diff --git a/packages/core/src/modules/form/src/components/fields/select/useSelect.ts b/packages/core/src/modules/form/src/components/fields/select/useSelect.ts
new file mode 100644
index 0000000..549492b
--- /dev/null
+++ b/packages/core/src/modules/form/src/components/fields/select/useSelect.ts
@@ -0,0 +1,113 @@
+import { useController, useWatch } from 'react-hook-form';
+
+import { InputLabelProps, MenuItemProps } from '@mui/material';
+import { SelectInputProps } from '@mui/material/Select/SelectInput';
+
+import useQueryBuilder from '@mui-builder/utils/useQueryBuilder/useQueryBuilder';
+import UseScript from '@mui-builder/utils/useScript/useScript';
+
+import axios from 'axios';
+
+import { Option } from '../../../types/public.types';
+import { SelectProps } from './select.types';
+
+import useForms from '../../../hooks/useForms/useForms';
+import usePropsController from '../../../hooks/usePropsController/usePropsController';
+import useRule from '../../../hooks/useRule/useRule';
+
+const useSelect = (props: SelectProps) => {
+  const {
+    formId,
+    api,
+    id,
+    script,
+    rule,
+    dependencies,
+    formControlProps,
+    inputLabelProps,
+    options,
+    ...restSelectProps
+  } = props;
+
+  const { configs, queries } = api || {};
+
+  const { forms } = useForms();
+  const formMethod = forms?.[formId];
+  const { setProps, propsController } = usePropsController();
+
+  const newProps = propsController?.[id] || {};
+
+  // Handle Script
+  const { scriptResult } = UseScript({
+    script,
+    formMethod,
+    forms,
+    formId,
+    setProps,
+  });
+
+  // Handle Wtach Fields
+  useWatch({
+    control: formMethod.control,
+    name: dependencies ?? [],
+  });
+
+  // API Call
+  useQueryBuilder({
+    apiInstance: axios,
+    apiConfigs: configs ?? {},
+    apiQuery: queries ?? {},
+    formMethod,
+    formId,
+    forms,
+  });
+
+  // Controller
+  const {
+    field,
+    formState: { errors },
+  } = useController({
+    name: id,
+    control: formMethod.control,
+    disabled: restSelectProps.disabled,
+    defaultValue: restSelectProps.defaultValue,
+    rules: useRule(rule),
+  });
+
+  const error = errors?.[id];
+
+  const getSelectProps = (): SelectInputProps => ({
+    ...(restSelectProps as SelectInputProps),
+    ...field,
+    error: error,
+    ...scriptResult,
+    ...newProps,
+    label: inputLabelProps.children,
+    labelId: inputLabelProps.children,
+  });
+  const getInputLableProps = (): InputLabelProps => ({
+    ...inputLabelProps,
+  });
+
+  const getFormControlProps = () => ({
+    ...formControlProps,
+  });
+
+  const getMenuItemProps = (item: Option): MenuItemProps => ({
+    key: `select-${item.id}`,
+    id: item.id.toString(),
+    // TODO: adapte with autocomplete value
+    value: item.id,
+    title: item.name,
+  });
+
+  return {
+    options,
+    getSelectProps,
+    getMenuItemProps,
+    getInputLableProps,
+    getFormControlProps,
+  };
+};
+
+export default useSelect;
diff --git a/packages/core/src/modules/form/src/components/fields/text/text.types.ts b/packages/core/src/modules/form/src/components/fields/text/text.types.ts
index 000aacb..9d0ee92 100644
--- a/packages/core/src/modules/form/src/components/fields/text/text.types.ts
+++ b/packages/core/src/modules/form/src/components/fields/text/text.types.ts
@@ -10,7 +10,7 @@ export type TextProps = TextFieldProps & {
   id: Id;
   formId: FormId;
   script?: Script;
-  dependesies?: Dependesies;
+  dependencies?: Dependesies;
   propsController?: Record<string, any>;
   api?: Api;
   rule?: Rule;
diff --git a/packages/core/src/modules/form/src/components/fields/text/useText.ts b/packages/core/src/modules/form/src/components/fields/text/useText.ts
index 0075f17..419d3aa 100644
--- a/packages/core/src/modules/form/src/components/fields/text/useText.ts
+++ b/packages/core/src/modules/form/src/components/fields/text/useText.ts
@@ -17,7 +17,7 @@ const UseText = (props: TextProps) => {
     script,
     api,
     show = true,
-    dependesies,
+    dependencies,
     helperText,
     defaultValue,
     ...textFieldProps
@@ -42,7 +42,7 @@ const UseText = (props: TextProps) => {
   // Handle Wtach Fields
   useWatch({
     control: formMethod.control,
-    name: dependesies ?? [],
+    name: dependencies ?? [],
   });
 
   // API Call
diff --git a/packages/core/src/modules/form/src/types/public.types.ts b/packages/core/src/modules/form/src/types/public.types.ts
index 55159e9..a985cb0 100644
--- a/packages/core/src/modules/form/src/types/public.types.ts
+++ b/packages/core/src/modules/form/src/types/public.types.ts
@@ -1,11 +1,11 @@
+import { ReactNode } from 'react';
+
 import { SkeletonOwnProps } from '@mui/material';
 
 import { SubmitFieldProps } from '../components/actions/submit/submit.types';
-import {
-  AutoCompleteOptions,
-  AutoCompleteProps,
-} from '../components/fields/autoComplete/autoComplete.types';
+import { AutoCompleteProps } from '../components/fields/autoComplete/autoComplete.types';
 import { CheckboxProps } from '../components/fields/checkbox/checkbox.types';
+import { SelectProps } from '../components/fields/select/select.types';
 import { TextProps } from '../components/fields/text/text.types';
 import { Form } from '../hooks/useForms/useForms.types';
 
@@ -19,13 +19,20 @@ export type FormTypes =
   | 'field-text'
   | 'action-submit'
   | 'auto-complete'
-  | 'checkbox';
+  | 'checkbox'
+  | 'select';
+
+export type Option = {
+  name: string;
+  id: number | string;
+};
 
 export type FieldProps =
   | TextProps
   | SubmitFieldProps
-  | AutoCompleteProps<AutoCompleteOptions>
-  | CheckboxProps;
+  | AutoCompleteProps<Option>
+  | CheckboxProps
+  | SelectProps;
 
 export type Dependesies = string[];
 
diff --git a/packages/core/src/modules/form/src/utils/selector/formSelector.tsx b/packages/core/src/modules/form/src/utils/selector/formSelector.tsx
index 358662c..9eb8d11 100644
--- a/packages/core/src/modules/form/src/utils/selector/formSelector.tsx
+++ b/packages/core/src/modules/form/src/utils/selector/formSelector.tsx
@@ -1,12 +1,11 @@
 import { FC, Fragment, Suspense, lazy } from 'react';
 
 import { SubmitFieldProps } from '../../components/actions/submit/submit.types';
-import {
-  AutoCompleteOptions,
-  AutoCompleteProps,
-} from '../../components/fields/autoComplete/autoComplete.types';
+import { AutoCompleteProps } from '../../components/fields/autoComplete/autoComplete.types';
 import { CheckboxProps } from '../../components/fields/checkbox/checkbox.types';
+import { SelectProps } from '../../components/fields/select/select.types';
 import { TextProps } from '../../components/fields/text/text.types';
+import { Option } from '../../types/public.types';
 import { FormSelectorProps } from './formSelector.types';
 
 import SubmitLoading from '../../components/actions/submit/submit.loading';
@@ -50,9 +49,7 @@ const FormSelector: FC<FormSelectorProps> = ({
 
       return (
         <Suspense key={fieldProps.id} fallback={<SubmitLoading {...loading} />}>
-          <SelectedComponent
-            {...(fieldProps as AutoCompleteProps<AutoCompleteOptions>)}
-          />
+          <SelectedComponent {...(fieldProps as AutoCompleteProps<Option>)} />
         </Suspense>
       );
 
@@ -67,6 +64,17 @@ const FormSelector: FC<FormSelectorProps> = ({
         </Suspense>
       );
 
+    case 'select':
+      SelectedComponent = lazy(
+        () => import('../../components/fields/select/select')
+      );
+
+      return (
+        <Suspense key={fieldProps.id} fallback={'...loading'}>
+          <SelectedComponent {...(fieldProps as SelectProps)} />
+        </Suspense>
+      );
+
     default:
       SelectedComponent = Fragment;
 

From 1bebcad6268bec1458291680333f6a17753c986e Mon Sep 17 00:00:00 2001
From: mrbadri <mrbadri.dev@gmail.com>
Date: Mon, 8 Jul 2024 16:37:02 +0330
Subject: [PATCH 2/2] fix: Correct the spelling of words

---
 .../components/fields/autoComplete/useAutoComplete.tsx | 10 +++++-----
 .../form/src/components/fields/checkbox/useCheckbox.ts |  6 +++---
 .../form/src/components/fields/select/useSelect.ts     |  7 ++++---
 .../modules/form/src/components/fields/text/useText.ts |  6 +++---
 packages/core/src/utils/useScript/useScript.ts         |  4 ++--
 5 files changed, 17 insertions(+), 16 deletions(-)

diff --git a/packages/core/src/modules/form/src/components/fields/autoComplete/useAutoComplete.tsx b/packages/core/src/modules/form/src/components/fields/autoComplete/useAutoComplete.tsx
index cbaa3d6..cfb4022 100644
--- a/packages/core/src/modules/form/src/components/fields/autoComplete/useAutoComplete.tsx
+++ b/packages/core/src/modules/form/src/components/fields/autoComplete/useAutoComplete.tsx
@@ -1,7 +1,7 @@
 import { useController, useWatch } from 'react-hook-form';
 
 import useQueryBuilder from '@mui-builder/utils/useQueryBuilder/useQueryBuilder';
-import UseScript from '@mui-builder/utils/useScript/useScript';
+import useScript from '@mui-builder/utils/useScript/useScript';
 
 import axios from 'axios';
 
@@ -42,7 +42,7 @@ const useAutoComplete = (props: AutoCompleteProps<Option>) => {
     forms,
   });
 
-  // Handle Wtach Fields
+  // Handle Watch Fields
   useWatch({
     control: formMethod.control,
     name: dependencies ?? [],
@@ -63,7 +63,7 @@ const useAutoComplete = (props: AutoCompleteProps<Option>) => {
   const error = errors?.[restAutoCompleteProps.id];
 
   // Handle Script
-  const { scriptResult } = UseScript({
+  const { scriptResult } = useScript({
     script,
     formMethod,
     forms,
@@ -82,7 +82,7 @@ const useAutoComplete = (props: AutoCompleteProps<Option>) => {
     field.onChange(value ?? null);
   };
 
-  const hanldeHelperText = () =>
+  const handleHelperText = () =>
     (error?.message as string) ?? innerTextFieldProps?.helperText ?? null;
 
   // Props
@@ -101,7 +101,7 @@ const useAutoComplete = (props: AutoCompleteProps<Option>) => {
 
   const getInnerTextFieldProps = () => ({
     ...innerTextFieldProps,
-    helperText: hanldeHelperText(),
+    helperText: handleHelperText(),
   });
 
   return { getFieldProps, show, getInnerTextFieldProps };
diff --git a/packages/core/src/modules/form/src/components/fields/checkbox/useCheckbox.ts b/packages/core/src/modules/form/src/components/fields/checkbox/useCheckbox.ts
index 12a692b..51094ee 100644
--- a/packages/core/src/modules/form/src/components/fields/checkbox/useCheckbox.ts
+++ b/packages/core/src/modules/form/src/components/fields/checkbox/useCheckbox.ts
@@ -1,7 +1,7 @@
 import { useController, useWatch } from 'react-hook-form';
 
 import useQueryBuilder from '@mui-builder/utils/useQueryBuilder/useQueryBuilder';
-import UseScript from '@mui-builder/utils/useScript/useScript';
+import useScript from '@mui-builder/utils/useScript/useScript';
 
 import axios from 'axios';
 
@@ -33,7 +33,7 @@ const useCheckbox = (props: CheckboxProps) => {
   const newProps = propsController?.[id] || {};
 
   // Handle Script
-  const { scriptResult } = UseScript({
+  const { scriptResult } = useScript({
     script,
     formMethod,
     forms,
@@ -41,7 +41,7 @@ const useCheckbox = (props: CheckboxProps) => {
     setProps,
   });
 
-  // Handle Wtach Fields
+  // Handle Watch Fields
   useWatch({
     control: formMethod.control,
     name: dependencies ?? [],
diff --git a/packages/core/src/modules/form/src/components/fields/select/useSelect.ts b/packages/core/src/modules/form/src/components/fields/select/useSelect.ts
index 549492b..44e98b8 100644
--- a/packages/core/src/modules/form/src/components/fields/select/useSelect.ts
+++ b/packages/core/src/modules/form/src/components/fields/select/useSelect.ts
@@ -4,7 +4,7 @@ import { InputLabelProps, MenuItemProps } from '@mui/material';
 import { SelectInputProps } from '@mui/material/Select/SelectInput';
 
 import useQueryBuilder from '@mui-builder/utils/useQueryBuilder/useQueryBuilder';
-import UseScript from '@mui-builder/utils/useScript/useScript';
+import useScript from '@mui-builder/utils/useScript/useScript';
 
 import axios from 'axios';
 
@@ -38,7 +38,8 @@ const useSelect = (props: SelectProps) => {
   const newProps = propsController?.[id] || {};
 
   // Handle Script
-  const { scriptResult } = UseScript({
+
+  const { scriptResult } = useScript({
     script,
     formMethod,
     forms,
@@ -46,7 +47,7 @@ const useSelect = (props: SelectProps) => {
     setProps,
   });
 
-  // Handle Wtach Fields
+  // Handle Watch Fields
   useWatch({
     control: formMethod.control,
     name: dependencies ?? [],
diff --git a/packages/core/src/modules/form/src/components/fields/text/useText.ts b/packages/core/src/modules/form/src/components/fields/text/useText.ts
index 419d3aa..1f7f7de 100644
--- a/packages/core/src/modules/form/src/components/fields/text/useText.ts
+++ b/packages/core/src/modules/form/src/components/fields/text/useText.ts
@@ -1,7 +1,7 @@
 import { useController, useWatch } from 'react-hook-form';
 
 import useQueryBuilder from '@mui-builder/utils/useQueryBuilder/useQueryBuilder';
-import UseScript from '@mui-builder/utils/useScript/useScript';
+import useScript from '@mui-builder/utils/useScript/useScript';
 
 import axios from 'axios';
 
@@ -31,7 +31,7 @@ const UseText = (props: TextProps) => {
   const newProps = propsController?.[textFieldProps?.id] || {};
 
   // Handle Script
-  const { scriptResult } = UseScript({
+  const { scriptResult } = useScript({
     script,
     formMethod,
     forms,
@@ -39,7 +39,7 @@ const UseText = (props: TextProps) => {
     setProps,
   });
 
-  // Handle Wtach Fields
+  // Handle Watch Fields
   useWatch({
     control: formMethod.control,
     name: dependencies ?? [],
diff --git a/packages/core/src/utils/useScript/useScript.ts b/packages/core/src/utils/useScript/useScript.ts
index 41958a1..4baac38 100644
--- a/packages/core/src/utils/useScript/useScript.ts
+++ b/packages/core/src/utils/useScript/useScript.ts
@@ -5,7 +5,7 @@ import convertFn from '@mui-builder/utils/convertFn/convertFn';
 import { ScriptFn } from '../../types/script.types';
 import { UseScriptProps } from './useScript.types';
 
-const UseScript = ({
+const useScript = ({
   script,
   formMethod,
   forms,
@@ -33,4 +33,4 @@ const UseScript = ({
   return { scriptResult: scriptFn(formMethod, forms, formId, setProps) };
 };
 
-export default UseScript;
+export default useScript;