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',
+        radioInputsList: [
+          { label: 'radio-num-1', value: '1' },
+          { label: 'radio-num-2', value: '2' },
+        ],
+      },
+    },
     {
       id: 'form-checkbox-1',
       groupType: 'form',
@@ -193,30 +208,6 @@ export function App() {
         formId: '18',
         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: {},
-            },
-          },
-        ],
       },
     },
   ];

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,27 @@
+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 { Dependesies, FormId, Id } from '../../../types/public.types';
+import { Rule } from '../../../types/validation.types';
+
+export type RadioProps = Omit<FormControlLabelProps, 'control'> & {
+  radioInputProps?: MuiRadioProps;
+};
+
+export type RadioGroupProps = MuiRadioGroupProps & {
+  id: Id;
+  formId: FormId;
+  script?: Script;
+  dependesies?: Dependesies;
+  propsController?: Record<string, any>;
+  api?: Api;
+  rule?: Rule;
+  show?: boolean;
+  radioInputsList: 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, radioInputsList } = useRadioGroup(props);
+
+  return (
+    <MuiRadioGroup {...getRadioGroupProps()}>
+      {radioInputsList.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 });
+
+  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,
+    radioInputsList,
+    ...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, radioInputsList };
+};
+
+export default useRadioGroup;

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

@@ -6,6 +6,7 @@ import {
   AutoCompleteProps,
 } from '../components/fields/autoComplete/autoComplete.types';
 import { CheckboxProps } from '../components/fields/checkbox/checkbox.types';
+import { RadioGroupProps } from '../components/fields/radio/radio.types';
 import { TextProps } from '../components/fields/text/text.types';
 import { Form } from '../hooks/useForms/useForms.types';
 
@@ -19,13 +20,15 @@ export type FormTypes =
   | 'field-text'
   | 'action-submit'
   | 'auto-complete'
-  | 'checkbox';
+  | 'checkbox'
+  | 'radio';
 
 export type FieldProps =
   | TextProps
   | SubmitFieldProps
   | AutoCompleteProps<AutoCompleteOptions>
-  | CheckboxProps;
+  | CheckboxProps
+  | RadioGroupProps;
 
 export type Dependesies = string[];
 

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

@@ -6,6 +6,7 @@ import {
   AutoCompleteProps,
 } from '../../components/fields/autoComplete/autoComplete.types';
 import { CheckboxProps } from '../../components/fields/checkbox/checkbox.types';
+import { RadioGroupProps } from '../../components/fields/radio/radio.types';
 import { TextProps } from '../../components/fields/text/text.types';
 import { FormSelectorProps } from './formSelector.types';
 
@@ -67,6 +68,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>
+      );
+
     default:
       SelectedComponent = Fragment;