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/Form/containers/Modal/SuperFormModal.tsx

@@ -1,105 +0,0 @@
-import React, {
-  forwardRef,
-  useCallback,
-  useImperativeHandle,
-  useRef,
-  useState,
-  type ReactElement,
-  type Ref,
-} from 'react'
-import type { FieldValues } from 'react-hook-form'
-import { Modal, ScrollArea } from '@mantine/core'
-import type { SuperFormModalProps, SuperFormModalRef, SuperFormRef } from '../../types'
-import SuperForm from '../../components/SuperForm'
-import { openConfirmModal } from '../../utils/openConfirmModal'
-
-const SuperFormModal = <T extends FieldValues>(
-  { modalProps, noCloseOnSubmit, ...formProps }: SuperFormModalProps<T>,
-  ref: Ref<SuperFormModalRef<T>>
-) => {
-  // Component Refs
-  const modalRef = useRef<HTMLDivElement>(null)
-  const formRef = useRef<SuperFormRef<T>>(null)
-
-  // Component store State
-  // Tell drawer that form layout mounted to fix refs
-  const [layoutMounted, setLayoutMounted] = useState(false)
-
-  // Component Callback Functions
-  const onSubmit = (data: T, request, formData, form, closeForm: boolean = true) => {
-    formProps?.onSubmit?.(data, request, formData, form, closeForm)
-
-    if (request === 'delete') {
-      modalProps?.onClose()
-    }
-
-    if (!noCloseOnSubmit) {
-      if (closeForm) {
-        modalProps?.onClose()
-      }
-    }
-  }
-
-  const onCancel = (request) => {
-    if (formRef?.current?.getFormState().isDirty) {
-      openConfirmModal(() => {
-        modalProps?.onClose()
-        formProps?.onCancel?.(request)
-      })
-    } else {
-      modalProps?.onClose()
-      formProps?.onCancel?.(request)
-    }
-  }
-
-  const onLayoutMounted = useCallback(() => {
-    setLayoutMounted(true)
-    formProps?.onLayoutMounted?.()
-  }, [formProps?.onLayoutMounted])
-
-  const onLayoutUnMounted = useCallback(() => {
-    setLayoutMounted(false)
-    formProps?.onLayoutUnMounted?.()
-  }, [formProps?.onLayoutUnMounted])
-
-  // Component use Effects
-  useImperativeHandle<SuperFormModalRef<T>, SuperFormModalRef<T>>(
-    ref,
-    () => ({
-      ...formRef.current,
-      modal: modalRef.current,
-    } as SuperFormModalRef<T>),
-    [layoutMounted]
-  )
-
-  return (
-    <Modal
-      ref={modalRef}
-      closeOnClickOutside={false}
-      overlayProps={{
-        backgroundOpacity: 0.5,
-        blur: 4,
-      }}
-      padding='sm'
-      scrollAreaComponent={ScrollArea.Autosize}
-      size={500}
-      keepMounted={false}
-      {...modalProps}
-    >
-      <SuperForm<T>
-        {...formProps}
-        onCancel={onCancel}
-        onSubmit={onSubmit}
-        onLayoutMounted={onLayoutMounted}
-        onLayoutUnMounted={onLayoutUnMounted}
-        ref={formRef}
-      />
-    </Modal>
-  )
-}
-
-const FRSuperFormModal = forwardRef(SuperFormModal) as <T extends FieldValues>(
-  props: SuperFormModalProps<T> & { ref?: Ref<SuperFormModalRef<T>> }
-) => ReactElement
-
-export default FRSuperFormModal