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/FormerLayout.tsx

@@ -2,6 +2,8 @@ import { LoadingOverlay, ScrollAreaAutosize } from '@mantine/core';
 import { type PropsWithChildren, useEffect } from 'react';
 
 import { useFormerStore } from './Former.store';
+import { FormerLayoutBottom } from './FormerLayoutBottom';
+import { FormerLayoutTop } from './FormerLayoutTop';
 
 export const FormerLayout = (props: PropsWithChildren) => {
   const {
@@ -14,6 +16,9 @@ export const FormerLayout = (props: PropsWithChildren) => {
     reset,
     save,
     scrollAreaProps,
+    id,
+    layout,
+    getState,
   } = useFormerStore((state) => ({
     disableHTMlForm: state.disableHTMlForm,
     getFormMethods: state.getFormMethods,
@@ -24,6 +29,9 @@ export const FormerLayout = (props: PropsWithChildren) => {
     reset: state.reset,
     save: state.save,
     scrollAreaProps: state.scrollAreaProps,
+    id: state.id,
+    layout: state.layout,
+    getState: state.getState,
   }));
 
   useEffect(() => {
@@ -35,8 +43,9 @@ export const FormerLayout = (props: PropsWithChildren) => {
     }
   }, [getFormMethods, request]);
 
-  if (disableHTMlForm) {
-    return (
+  return (
+    <>
+      <FormerLayoutTop />
       <ScrollAreaAutosize
         offsetScrollbars
         scrollbarSize={4}
@@ -44,13 +53,27 @@ export const FormerLayout = (props: PropsWithChildren) => {
         {...scrollAreaProps}
         style={{
           height: '100%',
-          maxHeight: '89vh',
           padding: '0.25rem',
           width: '100%',
           ...scrollAreaProps?.style,
         }}
       >
-        {props.children}
+        {disableHTMlForm ? (
+          <div x-data-request={request} key={`former_d${id}`}>
+            {props.children}
+          </div>
+        ) : (
+          <form
+            key={`former_${id}`}
+            id={`former_f${id}`}
+            onReset={(e) => reset(e)}
+            onSubmit={(e) => save(e)}
+            x-data-request={request}
+          >
+            {props.children}
+          </form>
+        )}
+
         <LoadingOverlay
           loaderProps={{ type: 'bars' }}
           overlayProps={{
@@ -60,34 +83,7 @@ export const FormerLayout = (props: PropsWithChildren) => {
           visible={loading}
         />
       </ScrollAreaAutosize>
-    );
-  }
-
-  return (
-    <ScrollAreaAutosize
-      offsetScrollbars
-      scrollbarSize={4}
-      type="auto"
-      {...scrollAreaProps}
-      style={{
-        height: '100%',
-        maxHeight: '89vh',
-        padding: '0.25rem',
-        width: '100%',
-        ...scrollAreaProps?.style,
-      }}
-    >
-      <form onReset={(e) => reset(e)} onSubmit={(e) => save(e)}>
-        {props.children}
-        <LoadingOverlay
-          loaderProps={{ type: 'bars' }}
-          overlayProps={{
-            backgroundOpacity: 0.5,
-          }}
-          {...loadingOverlayProps}
-          visible={loading}
-        />
-      </form>
-    </ScrollAreaAutosize>
+      <FormerLayoutBottom />
+    </>
   );
 };