feat(form): radio input with radio group component

apps/docs/src/app/app.tsx

@@ -184,6 +184,21 @@ export function App() {
         },
       },
     },
+    {
+      id: 'form-radio-1',
+      groupType: 'form',
+      type: 'radio',
+      props: {
+        formId: '20',
+        id: 'radio-1',
+        name: 'fol',
+        defaultValue: '2',
+        options: [
+          { name: 'radio-num-1', value: 'value 1', id: '1' },
+          { name: 'radio-num-2', value: 'value 2', id: '2' },
+        ],
+      },
+    },
     {
       id: 'form-checkbox-1',
       groupType: 'form',
@@ -193,30 +208,6 @@ export function App() {
         formId: '21',
         label: 'label 1',
         checkboxProps: {},
-        children: [
-          {
-            id: 'form-checkbox-1-nested-1',
-            groupType: 'form',
-            type: 'checkbox',
-            props: {
-              id: 'checkbox-1-nested-1',
-              formId: '18',
-              label: 'label 2',
-              checkboxProps: {},
-            },
-          },
-          {
-            id: 'form-checkbox-1-nested-13',
-            groupType: 'form',
-            type: 'checkbox',
-            props: {
-              id: 'checkbox-1-nested-13',
-              formId: '18',
-              label: 'label 23',
-              checkboxProps: {},
-            },
-          },
-        ],
       },
     },
     {
@@ -254,7 +245,7 @@ export function App() {
         // multiple: true,
         defaultValue: '',
         inputLabelProps: {
-          children: 'select label',
+          children: 'input label',
         },
         options: [
           { name: 'first', id: '1' },

packages/core/src/modules/form/src/components/fields/radio/radio.tsx

@@ -0,0 +1,20 @@
+import { FC } from 'react';
+
+import { FormControlLabel, Radio as MuiRadio } from '@mui/material';
+
+import { RadioProps } from './radio.types';
+
+import useRadio from './useRadio';
+
+const Radio: FC<RadioProps> = (props) => {
+  const { getFormControlLabelProps, getRadioInputProps } = useRadio(props);
+
+  return (
+    <FormControlLabel
+      {...getFormControlLabelProps()}
+      control={<MuiRadio {...getRadioInputProps()} />}
+    />
+  );
+};
+
+export default Radio;

packages/core/src/modules/form/src/components/fields/radio/radio.types.ts

@@ -0,0 +1,28 @@
+import {
+  FormControlLabelProps,
+  RadioGroupProps as MuiRadioGroupProps,
+  RadioProps as MuiRadioProps,
+} from '@mui/material';
+
+import { Api } from '@mui-builder/types/api.types';
+import { Script } from '@mui-builder/types/script.types';
+
+import { Dependencies, FormId, Id, Option } from '../../../types/public.types';
+import { Rule } from '../../../types/validation.types';
+
+export type RadioProps = Omit<FormControlLabelProps, 'control' | 'label'> &
+  Option & {
+    radioInputProps?: MuiRadioProps;
+  };
+
+export type RadioGroupProps = MuiRadioGroupProps & {
+  id: Id;
+  formId: FormId;
+  script?: Script;
+  dependesies?: Dependencies;
+  propsController?: Record<string, any>;
+  api?: Api;
+  rule?: Rule;
+  show?: boolean;
+  options: RadioProps[];
+};

packages/core/src/modules/form/src/components/fields/radio/radioGroup.tsx

@@ -0,0 +1,22 @@
+import { FC } from 'react';
+
+import { RadioGroup as MuiRadioGroup } from '@mui/material';
+
+import { RadioGroupProps } from './radio.types';
+
+import Radio from './radio';
+import useRadioGroup from './useRadioGroup';
+
+const RadioGroup: FC<RadioGroupProps> = (props) => {
+  const { getRadioGroupProps, options } = useRadioGroup(props);
+
+  return (
+    <MuiRadioGroup {...getRadioGroupProps()}>
+      {options.map((radio) => (
+        <Radio key={radio.id} {...radio} />
+      ))}
+    </MuiRadioGroup>
+  );
+};
+
+export default RadioGroup;

packages/core/src/modules/form/src/components/fields/radio/useRadio.ts

@@ -0,0 +1,13 @@
+import { RadioProps } from './radio.types';
+
+const useRadio = (props: RadioProps) => {
+  const { radioInputProps, ...restRadioProps } = props;
+
+  const getRadioInputProps = () => ({ ...radioInputProps });
+
+  const getFormControlLabelProps = () => ({ ...restRadioProps, label: restRadioProps.name });
+
+  return { getRadioInputProps, getFormControlLabelProps };
+};
+
+export default useRadio;

packages/core/src/modules/form/src/components/fields/radio/useRadioGroup.ts

@@ -0,0 +1,84 @@
+import { useController, useWatch } from 'react-hook-form';
+
+import useQueryBuilder from '@mui-builder/utils/useQueryBuilder/useQueryBuilder';
+import UseScript from '@mui-builder/utils/useScript/useScript';
+
+import axios from 'axios';
+
+import { RadioGroupProps } from './radio.types';
+
+import useForms from '../../../hooks/useForms/useForms';
+import usePropsController from '../../../hooks/usePropsController/usePropsController';
+import useRule from '../../../hooks/useRule/useRule';
+
+const useRadioGroup = (props: RadioGroupProps) => {
+  const {
+    id,
+    api,
+    script,
+    formId,
+    show = true,
+    dependesies,
+    defaultValue,
+    options,
+    ...restRadioGroupProps
+  } = props;
+
+  const { configs, queries } = api || {};
+
+  const { forms } = useForms();
+  const formMethod = forms?.[formId];
+
+  const { setProps, propsController } = usePropsController();
+  const newProps = propsController?.[id] || {};
+
+  useQueryBuilder({
+    apiInstance: axios,
+    apiConfigs: configs ?? {},
+    apiQuery: queries ?? {},
+    formMethod,
+    formId,
+    forms,
+  });
+
+  // Handle Wtach Fields
+  useWatch({
+    control: formMethod.control,
+    name: dependesies ?? [],
+  });
+
+  // Controller
+  const {
+    field,
+    formState: { errors },
+  } = useController({
+    name: id,
+    control: formMethod.control,
+    // disabled: restRadioGroupProps.disabled,
+    rules: useRule(restRadioGroupProps?.rule),
+    defaultValue,
+  });
+
+  const error = errors?.[id];
+
+  // Handle Script
+  const { scriptResult } = UseScript({
+    script,
+    formMethod,
+    forms,
+    formId,
+    setProps,
+  });
+
+  const getRadioGroupProps = () => ({
+    ...field,
+    ...restRadioGroupProps,
+    error,
+    ...scriptResult,
+    ...newProps,
+  });
+
+  return { getRadioGroupProps, options };
+};
+
+export default useRadioGroup;

packages/core/src/modules/form/src/types/public.types.ts

@@ -4,9 +4,10 @@ import { SubmitFieldProps } from '../components/actions/submit/submit.types';
 import { AutoCompleteProps } from '../components/fields/autoComplete/autoComplete.types';
 import { CheckboxProps } from '../components/fields/checkbox/checkbox.types';
 import { NumberFieldProps } from '../components/fields/number/number.types';
-import { SelectProps } from '../components/fields/select/select.types';
+import { RadioGroupProps } from '../components/fields/radio/radio.types';
 import { TextProps } from '../components/fields/text/text.types';
 import { Form } from '../hooks/useForms/useForms.types';
+import { SelectProps } from '../components/fields/select/select.types';
 
 export type FormId = string;
 
@@ -21,7 +22,8 @@ export type FormTypes =
   | 'checkbox'
   | 'number'
   | 'password'
-  | 'select';
+  | 'select'
+  | 'radio';
 
 export type Option = {
   name: string;
@@ -31,8 +33,9 @@ export type Option = {
 export type FieldProps =
   | TextProps
   | SubmitFieldProps
-  | AutoCompleteProps<Option>
   | CheckboxProps
+  | RadioGroupProps
+  | AutoCompleteProps<Option>
   | NumberFieldProps
   | SelectProps;
 

packages/core/src/modules/form/src/utils/selector/formSelector.tsx

@@ -5,6 +5,7 @@ import { AutoCompleteProps } from '../../components/fields/autoComplete/autoComp
 import { CheckboxProps } from '../../components/fields/checkbox/checkbox.types';
 import { NumberFieldProps } from '../../components/fields/number/number.types';
 import { PasswordProps } from '../../components/fields/password/password.types';
+import { RadioGroupProps } from '../../components/fields/radio/radio.types';
 import { SelectProps } from '../../components/fields/select/select.types';
 import { TextProps } from '../../components/fields/text/text.types';
 import { Option } from '../../types/public.types';
@@ -68,6 +69,17 @@ const FormSelector: FC<FormSelectorProps> = ({
         </Suspense>
       );
 
+    case 'radio':
+      SelectedComponent = lazy(
+        () => import('../../components/fields/radio/radioGroup')
+      );
+
+      return (
+        <Suspense key={fieldProps.id} fallback={<SubmitLoading {...loading} />}>
+          <SelectedComponent {...(fieldProps as RadioGroupProps)} />
+        </Suspense>
+      );
+
     case 'number':
       SelectedComponent = lazy(
         () => import('../../components/fields/number/number')

packages/core/tsconfig.json

@@ -10,7 +10,7 @@
   "include": [],
   "references": [
     {
-      "path": "./tsconfig.lib.json" 
+      "path": "./tsconfig.lib.json"
     }
   ],
   "extends": "../../tsconfig.base.json"