feat(form): ✨ enhance form layout and functionality

* Add FormerButtonArea component for action buttons
* Introduce FormerLayoutTop and FormerLayoutBottom for structured layout
* Update Former types to include new properties
* Implement dynamic ID generation for forms
* Refactor example to demonstrate new layout features
* Mark tasks as completed in todo.md

src/Former/stories/example.tsx

@@ -2,13 +2,20 @@ import { Button, Drawer, Group, Paper, Select, Stack, Switch } from '@mantine/co
 import { useRef, useState } from 'react';
 import { Controller } from 'react-hook-form';
 
-import type { FormerRef } from '../Former.types';
+import type { FormerProps, FormerRef } from '../Former.types';
 
 import { Former } from '../Former';
 
 export const FormTest = () => {
   const [request, setRequest] = useState<null | string>('insert');
   const [wrapped, setWrapped] = useState(false);
+  const [disableHTML, setDisableHTML] = useState(false);
+  const [layout, setLayout] = useState({
+    buttonOnTop: false,
+    title: 'Custom Former Title',
+    buttonAreaGroupProps: { justify: 'center' },
+  } as FormerProps['layout']);
+
   const [open, setOpen] = useState(false);
   const [formData, setFormData] = useState({ a: 99 });
   console.log('formData', formData);
@@ -16,16 +23,28 @@ export const FormTest = () => {
   const ref = useRef<FormerRef>(null);
   return (
     <Stack h="100%" mih="400px" w="90%">
-      <Select
-        data={['insert', 'update', 'delete', 'select', 'view']}
-        onChange={setRequest}
-        value={request}
-      />
-      <Switch
-        checked={wrapped}
-        label="Wrapped in Drawer"
-        onChange={(event) => setWrapped(event.currentTarget.checked)}
-      />
+      <Group>
+        <Select
+          data={['insert', 'update', 'delete', 'select', 'view']}
+          onChange={setRequest}
+          value={request}
+        />
+        <Switch
+          checked={wrapped}
+          label="Wrapped in Drawer"
+          onChange={(event) => setWrapped(event.currentTarget.checked)}
+        />
+        <Switch
+          checked={disableHTML}
+          label="Disable HTML Form"
+          onChange={(event) => setDisableHTML(event.currentTarget.checked)}
+        />
+        <Switch
+          checked={layout?.buttonOnTop ?? false}
+          label="Button On Top"
+          onChange={(event) => setLayout({ ...layout, buttonOnTop: event.currentTarget.checked })}
+        />
+      </Group>
       <Button onClick={() => setOpen(true)}>Open Former Drawer</Button>
       <Group>
         <Button
@@ -65,6 +84,7 @@ export const FormTest = () => {
             }, 1000);
           });
         }}
+        disableHTMlForm={disableHTML}
         onChange={setFormData}
         onClose={() => setOpen(false)}
         opened={open}
@@ -73,9 +93,10 @@ export const FormTest = () => {
         request={request as any}
         useFormProps={{ criteriaMode: 'all', shouldUseNativeValidation: false }}
         values={formData}
+        layout={layout}
         wrapper={
           wrapped
-            ? (children, opened, onClose, onOpen, getState) => {
+            ? (children, opened, onClose, _onOpen, getState) => {
                 const values = getState('values');
                 return (
                   <Drawer
@@ -107,10 +128,12 @@ export const FormTest = () => {
               rules={{ required: 'Field is required' }}
             />
           </Stack>
-          <Stack>
-            <button type="submit">Submit</button>
-            <button type="reset">Reset</button>
-          </Stack>
+          {!disableHTML && (
+            <Stack>
+              <button type="submit">HTML Submit</button>
+              <button type="reset">HTML Reset</button>
+            </Stack>
+          )}
         </Stack>
       </Former>
     </Stack>