refactor(former): 🔄 restructure form components and stores

* Remove unused FormLayout and SuperForm stores.
* Consolidate form logic into Former component.
* Implement new Former layout and types.
* Update stories for new Former component.
* Clean up unused styles and types across the project.

src/Former/FormerLayout.tsx

@@ -0,0 +1,93 @@
+import { LoadingOverlay, ScrollAreaAutosize } from '@mantine/core';
+import { type PropsWithChildren, useEffect } from 'react';
+
+import { useFormerStore } from './Former.store';
+
+export const FormerLayout = (props: PropsWithChildren) => {
+  const {
+    disableHTMlForm,
+    getFormMethods,
+    load,
+    loading,
+    loadingOverlayProps,
+    request,
+    reset,
+    save,
+    scrollAreaProps,
+  } = useFormerStore((state) => ({
+    disableHTMlForm: state.disableHTMlForm,
+    getFormMethods: state.getFormMethods,
+    load: state.load,
+    loading: state.loading,
+    loadingOverlayProps: state.loadingOverlayProps,
+    request: state.request,
+    reset: state.reset,
+    save: state.save,
+    scrollAreaProps: state.scrollAreaProps,
+  }));
+
+  useEffect(() => {
+    if (getFormMethods) {
+      const formMethods = getFormMethods();
+      if (formMethods && request !== 'insert') {
+        load(true);
+      }
+    }
+  }, [getFormMethods, request]);
+
+  if (disableHTMlForm) {
+    return (
+      <ScrollAreaAutosize
+        offsetScrollbars
+        scrollbarSize={4}
+        type="auto"
+        {...scrollAreaProps}
+        style={{
+          height: '100%',
+          maxHeight: '89vh',
+          padding: '0.25rem',
+          width: '100%',
+          ...scrollAreaProps?.style,
+        }}
+      >
+        {props.children}
+        <LoadingOverlay
+          loaderProps={{ type: 'bars' }}
+          overlayProps={{
+            backgroundOpacity: 0.5,
+          }}
+          {...loadingOverlayProps}
+          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>
+  );
+};