feat(form): actions (submit & base button) in form (#5)

apps/docs/src/app/app.tsx

@@ -1,15 +1,58 @@
-import { Route, Routes, Link } from 'react-router-dom';
-
-// import { Form } from '@mui-builder/form';
-import { Builder, GROUP_TYPE } from '@mui-builder/core';
-import { FIELD_TYPE } from 'packages/components/form/src/types/public.types';
+import { Link, Route, Routes } from 'react-router-dom';
+import { Builder, IFormTextBuilderProps } from '@mui-builder/core';
 
 export function App() {
+  const groupList: IFormTextBuilderProps[] = [
+    {
+      id: '1',
+      groupType: 'form',
+      type: 'field-text',
+      props: {
+        id: 'type-1',
+        formId: '20',
+      },
+    },
+    {
+      id: '2',
+      groupType: 'form',
+      type: 'field-text',
+      props: {
+        id: 'type-2',
+        formId: '20',
+        helperText: 'mmd',
+      },
+    },
+    {
+      id: '3',
+      groupType: 'form',
+      type: 'field-text',
+      props: {
+        id: 'type-2',
+        formId: '21',
+        helperText: 'mmd',
+      },
+    },
+    {
+      id: '4',
+      groupType: 'form',
+      type: 'action-submit',
+      props: {
+        formId: '21',
+        children: 'submit 21',
+      },
+    },
+    {
+      id: '4',
+      groupType: 'form',
+      type: 'action-submit',
+      props: {
+        formId: '20',
+        children: 'submit 20',
+      },
+    },
+  ];
   return (
     <div>
-      <br />
-      <hr />
-      <br />
       <div role="navigation">
         <ul>
           <li>
@@ -33,55 +76,8 @@ export function App() {
             </div>
           }
         />
-        {/* <Route path="/form" element={<Form />} /> */}
-        <Route
-          path="/"
-          element={
-            <Builder
-              groupList={[
-                {
-                  id: '1',
-                  groupType: GROUP_TYPE.FORM,
-                  type: FIELD_TYPE.TEXT,
-                  props: {
-                    id: 'type-1',
-                    formId: '20',
-                  },
-                },
-                {
-                  id: '2',
-                  groupType: GROUP_TYPE.FORM,
-                  type: FIELD_TYPE.TEXT,
-                  props: {
-                    id: 'type-2',
-                    formId: '20',
-                    helperText: 'mmd',
-                  },
-                },
-                {
-                  id: '3',
-                  groupType: GROUP_TYPE.FORM,
-                  type: FIELD_TYPE.TEXT,
-                  props: {
-                    id: 'type-2',
-                    formId: '21',
-                    helperText: 'mmd',
-                  },
-                },
-              ]}
-            />
-          }
-        />
-        <Route
-          path="/page-2"
-          element={
-            <div>
-              <Link to="/">Click here to go back to root page.</Link>
-            </div>
-          }
-        />
+        <Route path="/" element={<Builder groupList={groupList} />} />
       </Routes>
-      {/* END: routes */}
     </div>
   );
 }

package.json

@@ -10,6 +10,7 @@
     "@changesets/cli": "^2.27.1",
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.0",
+    "@mui/lab": "^5.0.0-alpha.167",
     "@mui/material": "^5.15.11",
     "react": "18.2.0",
     "react-dom": "18.2.0",

packages/components/form/src/components/actions/base/actionBase.tsx

@@ -0,0 +1,9 @@
+import { LoadingButton } from '@mui/lab';
+import { FC } from 'react';
+import { ActionBaseProps } from './actionBase.types';
+
+const ActionBase: FC<ActionBaseProps> = ({ children, ...actionBaseProps }) => {
+  return <LoadingButton {...actionBaseProps}>{children}</LoadingButton>;
+};
+
+export default ActionBase;

packages/components/form/src/components/actions/base/actionBase.types.ts

@@ -0,0 +1,6 @@
+import { LoadingButtonProps } from '@mui/lab';
+import { ReactNode } from 'react';
+
+export type ActionBaseProps = LoadingButtonProps &  {
+  children: ReactNode;
+};

packages/components/form/src/components/actions/submit/submit.tsx

@@ -0,0 +1,25 @@
+import { Button } from '@mui/material';
+import { FC } from 'react';
+import { ActionSubmitFieldProps } from './submit.types';
+import useForms from '../../../hooks/useForms/useForms';
+import { FieldValues } from 'react-hook-form';
+
+const ActionSubmit: FC<ActionSubmitFieldProps> = ({
+  formId,
+  children,
+  ...submitFieldProps
+}) => {
+  const forms = useForms((state) => state.forms);
+  const { handleSubmit } = forms[formId];
+  const onSubmit = (values: FieldValues) => {
+    console.log(values);
+  };
+
+  return (
+    <Button {...submitFieldProps} onClick={handleSubmit(onSubmit)}>
+      {children}
+    </Button>
+  );
+};
+
+export default ActionSubmit;

packages/components/form/src/components/actions/submit/submit.types.ts

@@ -0,0 +1,4 @@
+import { FormId } from '../../../types/public.types';
+import { ActionBaseProps } from '../base/actionBase.types';
+
+export type ActionSubmitFieldProps = ActionBaseProps & FormId;

packages/components/form/src/components/builder/builder.types.ts

@@ -1,6 +1,6 @@
-import { FIELD_TYPE, FieldProps } from '../../types/public.types';
+import { FormTypes, FieldProps } from '../../types/public.types';
 
 export interface BuilderProps {
-  fieldType: FIELD_TYPE;
+  fieldType: FormTypes;
   fieldProps: FieldProps;
-}
+}

packages/components/form/src/components/text/text.tsx → packages/components/form/src/components/fields/text/text.tsx

@@ -2,7 +2,7 @@ import { TextField } from '@mui/material';
 import { FC } from 'react';
 import { useController } from 'react-hook-form';
 import { TextProps } from './text.types';
-import useForms from '../../hooks/useForms/useForms';
+import useForms from '../../../hooks/useForms/useForms';
 
 const Text: FC<TextProps> = ({ formId, ...textFieldProps }) => {
   const { forms } = useForms();
@@ -12,7 +12,7 @@ const Text: FC<TextProps> = ({ formId, ...textFieldProps }) => {
     control: formMethod.control,
     rules: { required: true },
   });
-  
+
   return <TextField {...field} {...textFieldProps} value={field.value ?? ''} />;
 };
 

packages/components/form/src/components/text/text.types.ts → packages/components/form/src/components/fields/text/text.types.ts

@@ -1,4 +1,4 @@
 import { TextFieldProps } from "@mui/material";
-import { FormId, Id } from "../../types/public.types";
+import { FormId, Id } from "../../../types/public.types";
 
 export type TextProps = TextFieldProps & Id & FormId;

packages/components/form/src/types/public.types.ts

@@ -1,13 +1,12 @@
-import { TextProps } from "../components/text/text.types";
+import { ActionSubmitFieldProps } from "../components/actions/submit/submit.types";
+import { TextProps } from "../components/fields/text/text.types";
 
 export type FormId = { formId: string };
 
 export type Id = {
   id: string;
 };
 
-export enum FIELD_TYPE {
-  TEXT = 'text',
-}
+export type FormTypes = 'field-text' | "action-submit";
 
-export type FieldProps = TextProps;
+export type FieldProps = TextProps | ActionSubmitFieldProps;