Form prototype

* 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.

.storybook/previewDecorator.tsx

@@ -1,13 +1,16 @@
 import { MantineProvider } from '@mantine/core';
+import { ModalsProvider } from '@mantine/modals';
 import '@mantine/core/styles.css';
 
 export function PreviewDecorator(Story: any, { parameters }: any) {
   console.log('Rendering decorator', parameters);
   return (
     <MantineProvider>
+      <ModalsProvider>
         <div style={{ height: 'calc(100vh - 64px)', width: 'calc(100vw - 64px)' }}>
           <Story key={'mainStory'} />
         </div>
+      </ModalsProvider>
     </MantineProvider>
   );
 }

CHANGELOG.md

@@ -1,5 +1,29 @@
 # @warkypublic/zustandsyncstore
 
+## 0.0.23
+
+### Patch Changes
+
+- 3205411: Using the effect of array as feature.
+
+## 0.0.22
+
+### Patch Changes
+
+- 7c1d478: Possible selection fixes
+
+## 0.0.21
+
+### Patch Changes
+
+- 6664c98: Calls onchange on cell click since selection does not change.
+
+## 0.0.20
+
+### Patch Changes
+
+- 30581de: Version bump
+
 ## 0.0.19
 
 ### Patch Changes

eslint.config.ts

@@ -16,19 +16,22 @@ const config = defineConfig([
     plugins: { js },
   },
   // reactHooks.configs['recommended-latest'],
-  {...reactRefresh.configs.vite, ignores: ['**/*.test.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],},
+  { ...reactRefresh.configs.vite, ignores: ['**/*.test.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'] },
   tseslint.configs.recommended,
   {
     ...pluginReact.configs.flat.recommended,
-    ignores: ['**/*.test.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
+    ignores: ['**/*.test.{js,mjs,cjs,ts,mts,cts,jsx,tsx}', '*stories.tsx'],
-    rules: {...pluginReact.configs.flat.recommended.rules,
+    rules: {
+      ...pluginReact.configs.flat.recommended.rules,
       'react/react-in-jsx-scope': 'off',
-    }
+      'react-refresh/only-export-components': 'warn',
+    },
   },
   perfectionist.configs['recommended-alphabetical'],
   {
     rules: {
       '@typescript-eslint/no-explicit-any': 'warn',
+      '@typescript-eslint/ban-ts-comment': 'off',
     },
   },
 ]);

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@warkypublic/oranguru",
   "author": "Warky Devs",
-  "version": "0.0.19",
+  "version": "0.0.23",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -49,7 +49,9 @@
     "./oranguru.css": "./src/oranguru.css"
   },
   "dependencies": {
+
     "moment": "^2.30.1"
+    
   },
   "devDependencies": {
     "@changesets/cli": "^2.29.7",
@@ -94,10 +96,13 @@
     "@mantine/core": "^8.3.1",
     "@mantine/hooks": "^8.3.1",
     "@mantine/notifications": "^8.3.5",
+    "@mantine/modals": "^8.3.5",
     "@tabler/icons-react": "^3.35.0",
     "@tanstack/react-query": "^5.90.5",
     "@warkypublic/artemis-kit": "^1.0.10",
     "@warkypublic/zustandsyncstore": "^0.0.4",
+    "react-hook-form": "^7.71.0",
+        
     "immer": "^10.1.3",
     "react": ">= 19.0.0",
     "react-dom": ">= 19.0.0",

pnpm-lock.yaml

@@ -17,6 +17,9 @@ importers:
       '@mantine/hooks':
         specifier: ^8.3.1
         version: 8.3.1(react@19.2.0)
+      '@mantine/modals':
+        specifier: ^8.3.5
+        version: 8.3.12(@mantine/core@8.3.1(@mantine/hooks@8.3.1(react@19.2.0))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0))(@mantine/hooks@8.3.1(react@19.2.0))(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
       '@mantine/notifications':
         specifier: ^8.3.5
         version: 8.3.5(@mantine/core@8.3.1(@mantine/hooks@8.3.1(react@19.2.0))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0))(@mantine/hooks@8.3.1(react@19.2.0))(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
@@ -38,6 +41,9 @@ importers:
       moment:
         specifier: ^2.30.1
         version: 2.30.1
+      react-hook-form:
+        specifier: ^7.71.0
+        version: 7.71.0(react@19.2.0)
       use-sync-external-store:
         specifier: '>= 1.4.0'
         version: 1.5.0(react@19.2.0)
@@ -702,6 +708,14 @@ packages:
     peerDependencies:
       react: ^18.x || ^19.x
 
+  '@mantine/modals@8.3.12':
+    resolution: {integrity: sha512-+uRyGe2lLy601qlMk+8aR9d/Aibu+dZi6Jcmvm5z8Gw4ocviyMMlnd8BLSQ/Jvib2OX8fWj+yUQN7FMQ4Rbwjw==}
+    peerDependencies:
+      '@mantine/core': 8.3.12
+      '@mantine/hooks': 8.3.12
+      react: ^18.x || ^19.x
+      react-dom: ^18.x || ^19.x
+
   '@mantine/notifications@8.3.5':
     resolution: {integrity: sha512-8TvzrPxfdtOLGTalv7Ei1hy2F6KbR3P7/V73yw3AOKhrf1ydS89sqV2ShbsucHGJk9Pto0wjdTPd8Q7pm5MAYw==}
     peerDependencies:
@@ -2843,6 +2857,12 @@ packages:
     resolution: {integrity: sha512-OeR2jAxdoqUMHIn/nS9fgreI5hSpgGoL5ezdal4+oO7YSSgJR8ga+PkYGJrSrJ9MKlPcQjMQXnketrD7WNmNsg==}
     engines: {node: '>= 6'}
 
+  react-hook-form@7.71.0:
+    resolution: {integrity: sha512-oFDt/iIFMV9ZfV52waONXzg4xuSlbwKUPvXVH2jumL1me5qFhBMc4knZxuXiZ2+j6h546sYe3ZKJcg/900/iHw==}
+    engines: {node: '>=18.0.0'}
+    peerDependencies:
+      react: ^16.8.0 || ^17 || ^18 || ^19
+
   react-html-attributes@1.4.6:
     resolution: {integrity: sha512-uS3MmThNKFH2EZUQQw4k5pIcU7XIr208UE5dktrj/GOH1CMagqxDl4DCLpt3o2l9x+IB5nVYBeN3Cr4IutBXAg==}
 
@@ -4285,6 +4305,13 @@ snapshots:
     dependencies:
       react: 19.2.0
 
+  '@mantine/modals@8.3.12(@mantine/core@8.3.1(@mantine/hooks@8.3.1(react@19.2.0))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0))(@mantine/hooks@8.3.1(react@19.2.0))(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
+    dependencies:
+      '@mantine/core': 8.3.1(@mantine/hooks@8.3.1(react@19.2.0))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@mantine/hooks': 8.3.1(react@19.2.0)
+      react: 19.2.0
+      react-dom: 19.2.0(react@19.2.0)
+
   '@mantine/notifications@8.3.5(@mantine/core@8.3.1(@mantine/hooks@8.3.1(react@19.2.0))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0))(@mantine/hooks@8.3.1(react@19.2.0))(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
     dependencies:
       '@mantine/core': 8.3.1(@mantine/hooks@8.3.1(react@19.2.0))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
@@ -6686,6 +6713,10 @@ snapshots:
     dependencies:
       prop-types: 15.8.1
 
+  react-hook-form@7.71.0(react@19.2.0):
+    dependencies:
+      react: 19.2.0
+
   react-html-attributes@1.4.6:
     dependencies:
       html-element-attributes: 1.3.1

src/Form/components/Form.tsx

@@ -0,0 +1,38 @@
+import React, { type ReactNode } from 'react'
+import { Card, Stack, LoadingOverlay } from '@mantine/core'
+import { FormSection } from './FormSection'
+
+interface FormProps {
+  children: ReactNode
+  loading?: boolean
+  [key: string]: any
+}
+
+export const Form: React.FC<FormProps> & {
+  Section: typeof FormSection
+} = ({ children, loading, ...others }) => {
+  return (
+    <Card
+      withBorder
+      component={Stack}
+      w="100%"
+      h="100%"
+      padding={0}
+      styles={{
+        root: {
+          height: '100%',
+          display: 'flex',
+          flexDirection: 'column',
+        },
+      }}
+      shadow="sm"
+      radius="md"
+      {...others}
+    >
+      <LoadingOverlay visible={loading || false} />
+      {children}
+    </Card>
+  )
+}
+
+Form.Section = FormSection

src/Form/components/FormLayout.tsx

@@ -0,0 +1,55 @@
+import React, { type ReactNode } from 'react'
+import { Modal } from '@mantine/core'
+import { Form } from './Form'
+import { FormLayoutStoreProvider, useFormLayoutStore } from '../store/FormLayout.store'
+import type { RequestType } from '../types'
+
+interface FormLayoutProps {
+  children: ReactNode
+  dirty?: boolean
+  loading?: boolean
+  onCancel?: () => void
+  onSubmit?: () => void
+  request?: RequestType
+  modal?: boolean
+  modalProps?: any
+  nested?: boolean
+  deleteFormProps?: any
+  [key: string]: any
+}
+
+const LayoutComponent: React.FC<FormLayoutProps> = ({
+  children,
+  modal,
+  modalProps,
+  ...others
+}) => {
+  const { request } = useFormLayoutStore((state) => ({
+    request: state.request,
+  }))
+
+  const modalWidth = request === 'delete' ? 400 : modalProps?.width
+
+  return modal === true ? (
+    <Modal
+      onClose={() => modalProps?.onClose?.()}
+      opened={modalProps?.opened || false}
+      size="auto"
+      withCloseButton={false}
+      centered={request !== 'delete'}
+      {...modalProps}
+    >
+      <div style={{ height: modalProps?.height, width: modalWidth }}>
+        <Form {...others}>{children}</Form>
+      </div>
+    </Modal>
+  ) : (
+    <Form {...others}>{children}</Form>
+  )
+}
+
+export const FormLayout: React.FC<FormLayoutProps> = (props) => (
+  <FormLayoutStoreProvider {...props}>
+    <LayoutComponent {...props} />
+  </FormLayoutStoreProvider>
+)

src/Form/components/FormSection.tsx

@@ -0,0 +1,117 @@
+import React, { type ReactNode } from 'react'
+import { Stack, Group, Paper, Button, Title, Box } from '@mantine/core'
+import { useFormLayoutStore } from '../store/FormLayout.store'
+
+interface FormSectionProps {
+  type: 'header' | 'body' | 'footer' | 'error'
+  title?: string
+  rightSection?: ReactNode
+  children?: ReactNode
+  buttonTitles?: { submit?: string; cancel?: string }
+  className?: string
+  [key: string]: any
+}
+
+export const FormSection: React.FC<FormSectionProps> = ({
+  type,
+  title,
+  rightSection,
+  children,
+  buttonTitles,
+  className,
+  ...others
+}) => {
+  const { onCancel, onSubmit, request, loading } = useFormLayoutStore((state) => ({
+    onCancel: state.onCancel,
+    onSubmit: state.onSubmit,
+    request: state.request,
+    loading: state.loading,
+  }))
+
+  if (type === 'header') {
+    return (
+      <Group
+        justify="space-between"
+        p="md"
+        style={{
+          borderBottom: '1px solid var(--mantine-color-gray-3)',
+        }}
+        className={className}
+        {...others}
+      >
+        <Title order={4} size="h5">
+          {title}
+        </Title>
+        {rightSection && <Box>{rightSection}</Box>}
+      </Group>
+    )
+  }
+
+  if (type === 'body') {
+    return (
+      <Stack
+        gap="md"
+        p="md"
+        style={{ flex: 1, overflow: 'auto' }}
+        className={className}
+        {...others}
+      >
+        {children}
+      </Stack>
+    )
+  }
+
+  if (type === 'footer') {
+    return (
+      <Group
+        justify="flex-end"
+        gap="xs"
+        p="md"
+        style={{
+          borderTop: '1px solid var(--mantine-color-gray-3)',
+        }}
+        className={className}
+        {...others}
+      >
+        {children}
+        {request !== 'view' && (
+          <>
+            <Button
+              variant="default"
+              onClick={onCancel}
+              disabled={loading}
+            >
+              {buttonTitles?.cancel ?? 'Cancel'}
+            </Button>
+            <Button
+              type="submit"
+              onClick={onSubmit}
+              loading={loading}
+            >
+              {buttonTitles?.submit ?? (request === 'delete' ? 'Delete' : 'Save')}
+            </Button>
+          </>
+        )}
+      </Group>
+    )
+  }
+
+  if (type === 'error') {
+    return (
+      <Paper
+        p="sm"
+        m="md"
+        style={{
+          backgroundColor: 'var(--mantine-color-red-0)',
+          border: '1px solid var(--mantine-color-red-3)',
+        }}
+        className={className}
+        {...others}
+      >
+        {children}
+      </Paper>
+    )
+  }
+
+  return null
+}

src/Form/components/SuperForm.tsx

@@ -0,0 +1,34 @@
+import React, { forwardRef, type ReactElement, type Ref } from 'react'
+import { FormProvider, useForm, type FieldValues } from 'react-hook-form'
+import { Provider } from '../store/SuperForm.store'
+import type { SuperFormProps, SuperFormRef } from '../types'
+import Layout from './SuperFormLayout'
+import SuperFormPersist from './SuperFormPersist'
+
+const SuperForm = <T extends FieldValues>(
+  { useFormProps, gridRef, children, persist, ...others }: SuperFormProps<T>,
+  ref
+) => {
+  const form = useForm<T>({ ...useFormProps })
+
+  return (
+    <Provider {...others}>
+      <FormProvider {...form}>
+        {persist && (
+          <SuperFormPersist storageKey={typeof persist === 'object' ? persist.storageKey : null} />
+        )}
+        <Layout<T> gridRef={gridRef} ref={ref}>
+          {children}
+        </Layout>
+      </FormProvider>
+    </Provider>
+  )
+}
+
+const FRSuperForm = forwardRef(SuperForm) as <T extends FieldValues>(
+  props: SuperFormProps<T> & {
+    ref?: Ref<SuperFormRef<T>>
+  }
+) => ReactElement
+
+export default FRSuperForm

src/Form/components/SuperFormLayout.tsx

@@ -0,0 +1,364 @@
+import React, {
+  forwardRef,
+  RefObject,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  type MutableRefObject,
+  type ReactElement,
+  type ReactNode,
+  type Ref,
+} from 'react'
+import { useFormContext, useFormState, type FieldValues, type UseFormReturn } from 'react-hook-form'
+import { v4 as uuid } from 'uuid'
+import {
+  ActionIcon,
+  Group,
+  List,
+  LoadingOverlay,
+  Paper,
+  Spoiler,
+  Stack,
+  Title,
+  Tooltip,
+  Transition,
+} from '@mantine/core'
+import { IconChevronsLeft, IconChevronsRight } from '@tabler/icons-react'
+import { useUncontrolled } from '@mantine/hooks'
+import useRemote from '../hooks/useRemote'
+import { useStore } from '../store/SuperForm.store'
+import classes from '../styles/Form.module.css'
+import { Form } from './Form'
+import { FormLayout } from './FormLayout'
+import type { GridRef, SuperFormRef } from '../types'
+
+const SuperFormLayout = <T extends FieldValues>(
+  {
+    children,
+    gridRef,
+  }: {
+    children: React.ReactNode | ((props: UseFormReturn<T, any, undefined>) => React.ReactNode)
+    gridRef?: MutableRefObject<GridRef<any> | null>
+  },
+  ref
+) => {
+  // Component store State
+  const {
+    layoutProps,
+    meta,
+    nested,
+    onBeforeSubmit,
+    onCancel,
+    onLayoutMounted,
+    onLayoutUnMounted,
+    onResetForm,
+    onSubmit,
+    primeData,
+    request,
+    tableName,
+    value,
+  } = useStore((state) => ({
+    extraButtons: state.extraButtons,
+    layoutProps: state.layoutProps,
+    meta: state.meta,
+    nested: state.nested,
+    onBeforeSubmit: state.onBeforeSubmit,
+    onCancel: state.onCancel,
+    onLayoutMounted: state.onLayoutMounted,
+    onLayoutUnMounted: state.onLayoutUnMounted,
+    onResetForm: state.onResetForm,
+    onSubmit: state.onSubmit,
+    primeData: state.primeData,
+    request: state.request,
+    tableName: state.remote?.tableName,
+    value: state.value,
+  }))
+
+  const [_opened, _setOpened] = useUncontrolled({
+    value: layoutProps?.bodyRightSection?.opened,
+    defaultValue: false,
+    onChange: layoutProps?.bodyRightSection?.setOpened,
+  })
+
+  // Component Hooks
+  const form = useFormContext<T, any, undefined>()
+  const formState = useFormState({ control: form.control })
+
+  const { isFetching, mutateAsync, error, queryKey } = useRemote(gridRef)
+
+  // Component variables
+  const formUID = useMemo(() => {
+    return meta?.id ?? uuid()
+  }, [])
+
+  const requestString = request?.charAt(0).toUpperCase() + request?.slice(1)
+
+  const renderRightSection = (
+    <>
+      <Tooltip label={`${_opened ? 'Close' : 'Open'} Right Section`} withArrow>
+        <ActionIcon
+          style={{
+            position: 'absolute',
+            right: 12,
+            zIndex: 5,
+
+            display: layoutProps?.bodyRightSection?.hideToggleButton ? 'none' : 'block',
+          }}
+          variant='filled'
+          size='sm'
+          onClick={() => _setOpened(!_opened)}
+          radius='6'
+          m={2}
+        >
+          {_opened ? <IconChevronsRight /> : <IconChevronsLeft />}
+        </ActionIcon>
+      </Tooltip>
+      <Group wrap='nowrap' h='100%' align='flex-start' gap={2} w={'100%'}>
+        <Stack gap={0} h='100%' style={{ flex: 1 }}>
+          {typeof children === 'function' ? children({ ...form }) : children}
+        </Stack>
+        <Transition transition='slide-left' mounted={_opened}>
+          {(transitionStyles) => (
+            <Paper
+              style={transitionStyles}
+              h='100%'
+              w={layoutProps?.bodyRightSection?.w}
+              shadow='xs'
+              radius='xs'
+              mr='xs'
+              mt='xs'
+              ml={0}
+              {...layoutProps?.bodyRightSection?.paperProps}
+            >
+              {layoutProps?.bodyRightSection?.render?.({
+                form,
+                formValue: form.getValues(),
+                isFetching,
+                opened: _opened,
+                queryKey,
+                setOpened: _setOpened,
+              })}
+            </Paper>
+          )}
+        </Transition>
+      </Group>
+    </>
+  )
+
+  // Component Callback Functions
+  const onFormSubmit = async (data: T | any, closeForm: boolean = true) => {
+    const res: any =
+      typeof onBeforeSubmit === 'function'
+        ? await mutateAsync?.(await onBeforeSubmit(data, request, form))
+        : await mutateAsync?.(data)
+
+    if ((tableName?.length ?? 0) > 0) {
+      if (res?.ok || (res?.status >= 200 && res?.status < 300)) {
+        onSubmit?.(res?.data, request, data, form, closeForm)
+      } else {
+        form.setError('root', {
+          message: res.status === 401 ? 'Username or password is incorrect' : res?.error,
+        })
+      }
+    } else {
+      onSubmit?.(data, request, data, form, closeForm)
+    }
+  }
+
+  // Component use Effects
+  useEffect(() => {
+    if (request === 'insert') {
+      if (onResetForm) {
+        onResetForm(primeData, form).then((resetData) => {
+          form.reset(resetData)
+        })
+      } else {
+        form.reset(primeData)
+      }
+    } else if ((request === 'change' || request === 'delete') && (tableName?.length ?? 0) === 0) {
+      if (onResetForm) {
+        onResetForm(value, form).then((resetData) => {
+          form.reset(resetData)
+        })
+      } else {
+        form.reset(value)
+      }
+    }
+    onLayoutMounted?.()
+    return onLayoutUnMounted
+  }, [
+    request,
+    primeData,
+    tableName,
+    value,
+    form.reset,
+    onResetForm,
+    onLayoutMounted,
+    onLayoutUnMounted,
+  ])
+
+  useEffect(() => {
+    if (
+      (Object.keys(formState.errors)?.length > 0 || error) &&
+      _opened === false &&
+      layoutProps?.showErrorList !== false
+    ) {
+      _setOpened(true)
+    }
+  }, [Object.keys(formState.errors)?.length > 0, error, layoutProps?.showErrorList])
+
+  useImperativeHandle<SuperFormRef<T>, SuperFormRef<T>>(ref, () => ({
+    form,
+    mutation: { isFetching, mutateAsync, error },
+    submit: (closeForm: boolean = true, afterSubmit?: (data: T | any) => void) => {
+      return form.handleSubmit(async (data: T | any) => {
+        await onFormSubmit(data, closeForm)
+        afterSubmit?.(data)
+      })()
+    },
+    queryKey,
+    getFormState: () => formState,
+  }))
+
+  return (
+    <form
+      name={formUID}
+      onSubmit={(e) => {
+        e.stopPropagation()
+        e.preventDefault()
+        form.handleSubmit((data: T | any) => {
+          onFormSubmit(data)
+        })(e)
+      }}
+      style={{ height: '100%' }}
+      className={request === 'view' ? classes.disabled : ''}
+    >
+      {/* <LoadingOverlay
+        visible={isFetching}
+        overlayProps={{
+          backgroundOpacity: 0.5,
+        }}
+      /> */}
+      {layoutProps?.noLayout ? (
+        typeof layoutProps?.bodyRightSection?.render === 'function' ? (
+          renderRightSection
+        ) : typeof children === 'function' ? (
+          <>
+            <LoadingOverlay
+              visible={isFetching}
+              overlayProps={{
+                backgroundOpacity: 0.5,
+              }}
+            />
+            {children({ ...form })}
+          </>
+        ) : (
+          <>
+            <LoadingOverlay
+              visible={isFetching}
+              overlayProps={{
+                backgroundOpacity: 0.5,
+              }}
+            />
+            {children}
+          </>
+        )
+      ) : (
+        <FormLayout
+          dirty={formState.isDirty}
+          loading={isFetching}
+          onCancel={() => onCancel?.(request)}
+          onSubmit={form.handleSubmit((data: T | any) => {
+            onFormSubmit(data)
+          })}
+          request={request}
+          modal={false}
+          nested={nested}
+        >
+          {!layoutProps?.noHeader && (
+            <Form.Section
+              type='header'
+              title={`${layoutProps?.title || requestString}`}
+              rightSection={layoutProps?.rightSection}
+            />
+          )}
+          {(Object.keys(formState.errors)?.length > 0 || error) && (
+            <Form.Section
+              className={classes.sticky}
+              buttonTitles={layoutProps?.buttonTitles}
+              type='error'
+            >
+              <Title order={6} size='sm' c='red'>
+                {(error?.message?.length ?? 0) > 0
+                  ? 'Server Error'
+                  : 'Required information is incomplete*'}
+              </Title>
+              {(error as any)?.response?.data?.msg ||
+                (error as any)?.response?.data?._error ||
+                error?.message}
+              {layoutProps?.showErrorList !== false && (
+                <Spoiler maxHeight={50} showLabel='Show more' hideLabel='Hide'>
+                  <List
+                    size='xs'
+                    style={{
+                      color: 'light-dark(var(--mantine-color-dark-7), var(--mantine-color-gray-2))',
+                    }}
+                  >
+                    {getErrorMessages(formState.errors)}
+                  </List>
+                </Spoiler>
+              )}
+            </Form.Section>
+          )}
+          {typeof layoutProps?.bodyRightSection?.render === 'function' ? (
+            <Form.Section type='body' {...layoutProps?.bodySectionProps}>
+              {renderRightSection}
+            </Form.Section>
+          ) : (
+            <Form.Section type='body' {...layoutProps?.bodySectionProps}>
+              {typeof children === 'function' ? children({ ...form }) : children}
+            </Form.Section>
+          )}
+          {!layoutProps?.noFooter && (
+            <Form.Section
+              className={classes.sticky}
+              buttonTitles={layoutProps?.buttonTitles}
+              type='footer'
+              {...(typeof layoutProps?.footerSectionProps === 'function'
+                ? layoutProps?.footerSectionProps(ref as RefObject<SuperFormRef<T>>)
+                : layoutProps?.footerSectionProps)}
+            >
+              {typeof layoutProps?.extraButtons === 'function'
+                ? layoutProps?.extraButtons(form)
+                : layoutProps?.extraButtons}
+            </Form.Section>
+          )}
+        </FormLayout>
+      )}
+    </form>
+  )
+}
+
+const getErrorMessages = (errors: any): ReactNode | null => {
+  return Object.keys(errors ?? {}).map((key) => {
+    if (typeof errors[key] === 'object' && key !== 'ref') {
+      return getErrorMessages(errors[key])
+    }
+    if (key !== 'message') {
+      return null
+    }
+
+    return <List.Item key={key}>{errors[key]}</List.Item>
+  })
+}
+
+const FRSuperFormLayout = forwardRef(SuperFormLayout) as <T extends FieldValues>(
+  props: {
+    children: React.ReactNode | ((props: UseFormReturn<T, any, undefined>) => React.ReactNode)
+    gridRef?: MutableRefObject<GridRef | null>
+  } & {
+    ref?: Ref<SuperFormRef<T>>
+  }
+) => ReactElement
+
+export default FRSuperFormLayout

src/Form/components/SuperFormPersist.tsx

@@ -0,0 +1,66 @@
+import { useEffect, useState } from 'react'
+import { useFormContext, useFormState } from 'react-hook-form'
+import { useDebouncedCallback } from '@mantine/hooks'
+import useSubscribe from '../hooks/use-subscribe'
+import { useSuperFormStore } from '../store/SuperForm.store'
+import { openConfirmModal } from '../utils/openConfirmModal'
+
+const SuperFormPersist = ({ storageKey }: { storageKey?: string | null }) => {
+  // Component store State
+  const [persistKey, setPersistKey] = useState<string>('')
+  const { isDirty, isReady, isSubmitted } = useFormState()
+
+  const { remote, request } = useSuperFormStore((state) => ({
+    request: state.request,
+    remote: state.remote,
+  }))
+
+  // Component Hooks
+  const { reset, setValue } = useFormContext()
+
+  const handleFormChange = useDebouncedCallback(({ values }) => {
+    setPersistKey(() => {
+      const key = `superform-persist-${storageKey?.length > 0 ? storageKey : `${remote?.tableName || 'local'}-${request}-${values[remote?.primaryKey] ?? ''}`}`
+
+      if (!isDirty) {
+        return key
+      }
+
+      window.localStorage.setItem(key, JSON.stringify(values))
+
+      return key
+    })
+  }, 250)
+
+  useSubscribe('', handleFormChange)
+
+  // Component use Effects
+  useEffect(() => {
+    if (isReady && persistKey) {
+      const data = window.localStorage.getItem(persistKey)
+      if (!data) {
+        return
+      }
+
+      if (isSubmitted) {
+        window.localStorage.removeItem(persistKey)
+        return
+      }
+
+      openConfirmModal(
+        () => {
+          reset(JSON.parse(data))
+          setValue('_dirty', true, { shouldDirty: true })
+        },
+        () => {
+          window.localStorage.removeItem(persistKey)
+        },
+        'Do you want to restore the previous data that was not submitted?'
+      )
+    }
+  }, [isReady, isSubmitted, persistKey])
+
+  return null
+}
+
+export default SuperFormPersist

src/Form/config/ApiConfig.tsx

@@ -0,0 +1,43 @@
+import React, { createContext, useContext, ReactNode, useState } from 'react'
+
+interface ApiConfigContextValue {
+  apiURL: string
+  setApiURL: (url: string) => void
+}
+
+const ApiConfigContext = createContext<ApiConfigContextValue | null>(null)
+
+interface ApiConfigProviderProps {
+  children: ReactNode
+  defaultApiURL?: string
+}
+
+export const ApiConfigProvider: React.FC<ApiConfigProviderProps> = ({
+  children,
+  defaultApiURL = '',
+}) => {
+  const [apiURL, setApiURL] = useState(defaultApiURL)
+
+  return (
+    <ApiConfigContext.Provider value={{ apiURL, setApiURL }}>
+      {children}
+    </ApiConfigContext.Provider>
+  )
+}
+
+export const useApiConfig = (): ApiConfigContextValue => {
+  const context = useContext(ApiConfigContext)
+  if (!context) {
+    throw new Error('useApiConfig must be used within ApiConfigProvider')
+  }
+  return context
+}
+
+/**
+ * Hook to get API URL with optional override
+ * @param overrideURL - Optional URL to use instead of context value
+ */
+export const useApiURL = (overrideURL?: string): string => {
+  const { apiURL } = useApiConfig()
+  return overrideURL ?? apiURL
+}

src/Form/containers/Drawer/SuperFormDrawer.tsx

@@ -0,0 +1,146 @@
+import React, {
+  forwardRef,
+  useCallback,
+  useImperativeHandle,
+  useRef,
+  useState,
+  type ReactElement,
+  type Ref,
+} from 'react'
+import { IconX } from '@tabler/icons-react'
+import type { FieldValues } from 'react-hook-form'
+import { ActionIcon, Drawer } from '@mantine/core'
+import type { SuperFormDrawerProps, SuperFormDrawerRef, SuperFormRef } from '../../types'
+import SuperForm from '../../components/SuperForm'
+import { openConfirmModal } from '../../utils/openConfirmModal'
+
+const SuperFormDrawer = <T extends FieldValues>(
+  { drawerProps, noCloseOnSubmit, ...formProps }: SuperFormDrawerProps<T>,
+  ref: Ref<SuperFormDrawerRef<T>>
+) => {
+  // Component Refs
+  const formRef = useRef<SuperFormRef<T>>(null)
+  const drawerRef = useRef<HTMLDivElement>(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') {
+      drawerProps?.onClose()
+    }
+
+    if (!noCloseOnSubmit) {
+      if (closeForm) {
+        drawerProps?.onClose()
+      }
+    }
+  }
+
+  const onCancel = (request) => {
+    if (formRef?.current?.getFormState().isDirty) {
+      openConfirmModal(() => {
+        drawerProps?.onClose()
+        formProps?.onCancel?.(request)
+      })
+    } else {
+      drawerProps?.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<SuperFormDrawerRef<T>, SuperFormDrawerRef<T>>(
+    ref,
+    () => ({
+      ...formRef.current,
+      drawer: drawerRef.current,
+    } as SuperFormDrawerRef<T>),
+    [layoutMounted]
+  )
+
+  return (
+    <Drawer
+      ref={drawerRef}
+      onClose={onCancel}
+      closeOnClickOutside={false}
+      onKeyDown={(e) => {
+        if (e.key === 'Escape' && drawerProps.closeOnEscape !== false) {
+          e.stopPropagation()
+          onCancel(formProps.request)
+        }
+      }}
+      overlayProps={{ backgroundOpacity: 0.5, blur: 0.5 }}
+      padding={6}
+      position='right'
+      transitionProps={{
+        transition: 'slide-left',
+        duration: 150,
+        timingFunction: 'linear',
+      }}
+      size={500}
+      styles={{
+        content: {
+          display: 'flex',
+          flexDirection: 'column',
+          justifyContent: 'stretch',
+        },
+        body: {
+          minHeight: '100px',
+          flexGrow: 1,
+        },
+      }}
+      keepMounted={false}
+      {...drawerProps}
+      closeOnEscape={false}
+      withCloseButton={false}
+      title={null}
+    >
+      <SuperForm<T>
+        {...formProps}
+        onCancel={onCancel}
+        onSubmit={onSubmit}
+        onLayoutMounted={onLayoutMounted}
+        onLayoutUnMounted={onLayoutUnMounted}
+        ref={formRef}
+        layoutProps={{
+          ...formProps?.layoutProps,
+          rightSection: (
+            <ActionIcon
+              size='xs'
+              onClick={() => {
+                onCancel(formProps?.request)
+              }}
+            >
+              <IconX size={18} />
+            </ActionIcon>
+          ),
+          title:
+            (drawerProps.title as string) ??
+            formProps?.layoutProps?.title ??
+            (formProps?.request as string),
+        }}
+      />
+    </Drawer>
+  )
+}
+
+const FRSuperFormDrawer = forwardRef(SuperFormDrawer) as <T extends FieldValues>(
+  props: SuperFormDrawerProps<T> & { ref?: Ref<SuperFormDrawerRef<T>> }
+) => ReactElement
+
+export default FRSuperFormDrawer

src/Form/containers/Modal/SuperFormModal.tsx

@@ -0,0 +1,105 @@
+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

src/Form/containers/Popover/SuperFormPopover.tsx

@@ -0,0 +1,116 @@
+import React, {
+  forwardRef,
+  useCallback,
+  useImperativeHandle,
+  useRef,
+  useState,
+  type ReactElement,
+  type Ref,
+} from 'react'
+import type { FieldValues } from 'react-hook-form'
+import { Box, Popover } from '@mantine/core'
+import { useUncontrolled } from '@mantine/hooks'
+import type { SuperFormPopoverProps, SuperFormPopoverRef, SuperFormRef } from '../../types'
+import SuperForm from '../../components/SuperForm'
+import { openConfirmModal } from '../../utils/openConfirmModal'
+
+const SuperFormPopover = <T extends FieldValues>(
+  { popoverProps, target, noCloseOnSubmit, ...formProps }: SuperFormPopoverProps<T>,
+  ref: Ref<SuperFormPopoverRef<T>>
+) => {
+  // Component Refs
+  const popoverRef = 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 Hooks
+  const [_value, _onChange] = useUncontrolled({
+    value: popoverProps?.opened,
+    onChange: popoverProps?.onChange,
+  })
+
+  // Component Callback Functions
+  const onSubmit = (data: T, request, formData, form, closeForm: boolean = true) => {
+    formProps?.onSubmit?.(data, request, formData, form, closeForm)
+
+    if (request === 'delete') {
+      _onChange(false)
+    }
+
+    if (!noCloseOnSubmit) {
+      if (closeForm) {
+        _onChange(false)
+      }
+    }
+  }
+
+  const onCancel = (request) => {
+    if (formRef?.current?.getFormState().isDirty) {
+      openConfirmModal(() => {
+        _onChange(false)
+        formProps?.onCancel?.(request)
+      })
+    } else {
+      _onChange(false)
+      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<SuperFormPopoverRef<T>, SuperFormPopoverRef<T>>(
+    ref,
+    () => ({
+      ...formRef.current,
+      popover: popoverRef.current,
+    } as SuperFormPopoverRef<T>),
+    [layoutMounted]
+  )
+
+  return (
+    <Popover
+      closeOnClickOutside={false}
+      onClose={() => _onChange(false)}
+      opened={_value}
+      position='left'
+      radius='md'
+      withArrow
+      withinPortal
+      zIndex={200}
+      keepMounted={false}
+      {...popoverProps}
+    >
+      <Popover.Target>
+        <Box onClick={() => _onChange(true)}>{target}</Box>
+      </Popover.Target>
+      <Popover.Dropdown p={0} m={0} ref={popoverRef}>
+        <SuperForm
+          {...formProps}
+          onCancel={onCancel}
+          onSubmit={onSubmit}
+          onLayoutMounted={onLayoutMounted}
+          onLayoutUnMounted={onLayoutUnMounted}
+          ref={formRef}
+        />
+      </Popover.Dropdown>
+    </Popover>
+  )
+}
+
+const FRSuperFormPopover = forwardRef(SuperFormPopover) as <T extends FieldValues>(
+  props: SuperFormPopoverProps<T> & { ref?: Ref<SuperFormPopoverRef<T>> }
+) => ReactElement
+
+export default FRSuperFormPopover

src/Form/hooks/use-drawer-form-state.tsx

@@ -0,0 +1,96 @@
+import { useState } from 'react'
+import { FieldValues } from 'react-hook-form'
+import { SuperFormProps, RequestType, ExtendedDrawerProps } from '../types'
+
+interface UseDrawerFormState<T extends FieldValues> extends Partial<SuperFormProps<T>> {
+  drawerProps: Partial<ExtendedDrawerProps>
+  opened?: boolean
+  onClose?: () => void
+  request: RequestType
+  [key: string]: any
+}
+
+type AskFunction = (request: RequestType, buffer: any) => void
+
+const useDrawerFormState = <T extends FieldValues>(
+  props?: Partial<UseDrawerFormState<T>>
+): {
+  formProps: UseDrawerFormState<T>
+  setFormProps: React.Dispatch<React.SetStateAction<UseDrawerFormState<T>>>
+  open: (props: Partial<UseDrawerFormState<T>>) => void
+  close: () => void
+  ask: AskFunction
+} => {
+  const [formProps, setFormProps] = useState<UseDrawerFormState<T>>({
+    opened: false,
+    request: 'insert',
+    ...props,
+    onClose: () =>
+      setFormProps((curr) => ({
+        ...curr,
+        opened: false,
+        drawerProps: { ...curr.drawerProps, opened: false },
+      })),
+    drawerProps: { opened: false, onClose: () => {}, ...props?.drawerProps },
+  })
+
+  return {
+    formProps,
+    setFormProps,
+    open: (props?: Partial<UseDrawerFormState<T>>) => {
+      setFormProps((curr) => {
+        return {
+          ...curr,
+          ...props,
+          request: props.request ?? curr.request,
+          opened: true,
+          drawerProps: {
+            ...curr.drawerProps,
+            ...props?.drawerProps,
+            opened: true,
+            onClose: curr.onClose,
+          },
+          primeData: props?.primeData,
+          useFormProps: {
+            ...curr.useFormProps,
+            ...props?.useFormProps,
+          },
+          layoutProps: {
+            ...curr.layoutProps,
+            ...props?.layoutProps,
+          },
+          useQueryOptions: {
+            ...curr.useQueryOptions,
+            ...props?.useQueryOptions,
+          },
+          meta: {
+            ...curr.meta,
+            ...props?.meta,
+          },
+          useMutationOptions: {
+            ...curr.useMutationOptions,
+            ...props?.useMutationOptions,
+          },
+        }
+      })
+    },
+    close: () =>
+      setFormProps((curr) => ({
+        ...curr,
+        opened: false,
+        drawerProps: { ...curr.drawerProps, opened: false, onClose: curr.onClose },
+      })),
+    ask: (request: RequestType, buffer: any) => {
+      setFormProps((curr) => ({
+        ...curr,
+        request,
+        value: buffer,
+        opened: true,
+        drawerProps: { ...curr.drawerProps, opened: true, onClose: curr.onClose },
+      }))
+    },
+  }
+}
+
+export default useDrawerFormState
+export type { UseDrawerFormState }

src/Form/hooks/use-modal-form-state.tsx

@@ -0,0 +1,97 @@
+import { useState } from 'react'
+import { FieldValues } from 'react-hook-form'
+import { ModalProps } from '@mantine/core'
+import { SuperFormProps, RequestType } from '../types'
+
+interface UseModalFormState<T extends FieldValues> extends Partial<SuperFormProps<T>> {
+  modalProps: ModalProps
+  opened?: boolean
+  onClose?: () => void
+  request: RequestType
+  [key: string]: any
+}
+
+type AskFunction = (request: RequestType, buffer: any) => void
+
+const useModalFormState = <T extends FieldValues>(
+  props?: Partial<UseModalFormState<T>>
+): {
+  formProps: UseModalFormState<T>
+  setFormProps: React.Dispatch<React.SetStateAction<UseModalFormState<T>>>
+  open: (props: Partial<UseModalFormState<T>>) => void
+  close: () => void
+  ask: AskFunction
+} => {
+  const [formProps, setFormProps] = useState<UseModalFormState<T>>({
+    opened: false,
+    request: 'insert',
+    ...props,
+    onClose: () =>
+      setFormProps((curr) => ({
+        ...curr,
+        opened: false,
+        modalProps: { ...curr.modalProps, opened: false },
+      })),
+    modalProps: { opened: false, onClose: () => {}, ...props?.modalProps },
+  })
+
+  return {
+    formProps,
+    setFormProps,
+    open: (props?: Partial<UseModalFormState<T>>) => {
+      setFormProps((curr) => {
+        return {
+          ...curr,
+          ...props,
+          request: props.request ?? curr.request,
+          opened: true,
+          modalProps: {
+            ...curr.modalProps,
+            ...props?.modalProps,
+            opened: true,
+            onClose: curr.onClose,
+          },
+          primeData: props?.primeData,
+          useFormProps: {
+            ...curr.useFormProps,
+            ...props?.useFormProps,
+          },
+          layoutProps: {
+            ...curr.layoutProps,
+            ...props?.layoutProps,
+          },
+          useQueryOptions: {
+            ...curr.useQueryOptions,
+            ...props?.useQueryOptions,
+          },
+          meta: {
+            ...curr.meta,
+            ...props?.meta,
+          },
+          useMutationOptions: {
+            ...curr.useMutationOptions,
+            ...props?.useMutationOptions,
+          },
+        }
+      })
+    },
+    close: () =>
+      setFormProps((curr) => ({
+        ...curr,
+        opened: false,
+        modalProps: { ...curr.modalProps, opened: false, onClose: curr.onClose },
+      })),
+    ask: (request: RequestType, buffer: any) => {
+      setFormProps((curr) => ({
+        ...curr,
+        request,
+        value: buffer,
+        opened: true,
+        modalProps: { ...curr.modalProps, opened: true, onClose: curr.onClose },
+      }))
+    },
+  }
+}
+
+export default useModalFormState
+export type { UseModalFormState }

src/Form/hooks/use-popover-form-state.tsx

@@ -0,0 +1,97 @@
+import { useState } from 'react'
+import { FieldValues } from 'react-hook-form'
+import { PopoverProps } from '@mantine/core'
+import { SuperFormProps, RequestType } from '../types'
+
+interface UsePopoverFormState<T extends FieldValues> extends Partial<SuperFormProps<T>> {
+  popoverProps: Omit<PopoverProps, 'children'>
+  opened?: boolean
+  onClose?: () => void
+  request: RequestType
+  [key: string]: any
+}
+
+type AskFunction = (request: RequestType, buffer: any) => void
+
+const usePopoverFormState = <T extends FieldValues>(
+  props?: Partial<UsePopoverFormState<T>>
+): {
+  formProps: UsePopoverFormState<T>
+  setFormProps: React.Dispatch<React.SetStateAction<UsePopoverFormState<T>>>
+  open: (props: Partial<UsePopoverFormState<T>>) => void
+  close: () => void
+  ask: AskFunction
+} => {
+  const [formProps, setFormProps] = useState<UsePopoverFormState<T>>({
+    opened: false,
+    request: 'insert',
+    ...props,
+    popoverProps: { opened: false, onClose: () => {}, ...props?.popoverProps },
+    onClose: () =>
+      setFormProps((curr) => ({
+        ...curr,
+        opened: false,
+        popoverProps: { ...curr.popoverProps, opened: false },
+      })),
+  })
+
+  return {
+    formProps,
+    setFormProps,
+    open: (props?: Partial<UsePopoverFormState<T>>) => {
+      setFormProps((curr) => {
+        return {
+          ...curr,
+          ...props,
+          request: props.request ?? curr.request,
+          opened: true,
+          popoverProps: {
+            ...curr.popoverProps,
+            ...props?.popoverProps,
+            opened: true,
+            onClose: curr.onClose,
+          },
+          primeData: props?.primeData,
+          useFormProps: {
+            ...curr.useFormProps,
+            ...props?.useFormProps,
+          },
+          layoutProps: {
+            ...curr.layoutProps,
+            ...props?.layoutProps,
+          },
+          useQueryOptions: {
+            ...curr.useQueryOptions,
+            ...props?.useQueryOptions,
+          },
+          meta: {
+            ...curr.meta,
+            ...props?.meta,
+          },
+          useMutationOptions: {
+            ...curr.useMutationOptions,
+            ...props?.useMutationOptions,
+          },
+        }
+      })
+    },
+    close: () =>
+      setFormProps((curr) => ({
+        ...curr,
+        opened: false,
+        popoverProps: { ...curr.popoverProps, opened: false, onClose: curr.onClose },
+      })),
+    ask: (request: RequestType, buffer: any) => {
+      setFormProps((curr) => ({
+        ...curr,
+        request,
+        value: buffer,
+        opened: true,
+        popoverProps: { ...curr.popoverProps, opened: true, onClose: curr.onClose },
+      }))
+    },
+  }
+}
+
+export default usePopoverFormState
+export type { UsePopoverFormState }

src/Form/hooks/use-subscribe.tsx

@@ -0,0 +1,40 @@
+import { useEffect } from 'react'
+import {
+  EventType,
+  FieldValues,
+  FormState,
+  InternalFieldName,
+  Path,
+  ReadFormState,
+  useFormContext,
+  UseFormReturn,
+} from 'react-hook-form'
+
+const useSubscribe = <T extends FieldValues>(
+  name: Path<T> | readonly Path<T>[] | undefined,
+  callback: (
+    data: Partial<FormState<T>> & {
+      values: FieldValues
+      name?: InternalFieldName
+      type?: EventType
+    },
+    form?: UseFormReturn<T, any, T>
+  ) => void,
+  formState?: ReadFormState,
+  deps?: unknown[]
+) => {
+  const form = useFormContext<T>()
+
+  return useEffect(() => {
+    const unsubscribe = form.subscribe({
+      name,
+      callback: (data) => callback(data, form),
+      formState: { values: true, ...formState },
+      exact: true,
+    })
+
+    return unsubscribe
+  }, [form.subscribe, ...(deps || [])])
+}
+
+export default useSubscribe

src/Form/hooks/use-super-form-state.tsx

@@ -0,0 +1,38 @@
+import { useState } from 'react'
+import { FieldValues } from 'react-hook-form'
+import { SuperFormProps, RequestType } from '../types'
+
+interface UseSuperFormState<T extends FieldValues> extends Partial<SuperFormProps<T>> {
+  request: RequestType
+  [key: string]: any
+}
+
+type AskFunction = (request: RequestType, buffer: any) => void
+
+const useSuperFormState = <T extends FieldValues>(
+  props?: UseSuperFormState<T>
+): {
+  formProps: UseSuperFormState<any>
+  setFormProps: React.Dispatch<React.SetStateAction<UseSuperFormState<T>>>
+  ask: AskFunction
+} => {
+  const [formProps, setFormProps] = useState<UseSuperFormState<T>>({
+    request: 'insert',
+    ...props,
+  })
+
+  return {
+    formProps,
+    setFormProps,
+    ask: (request: RequestType, buffer: any) => {
+      setFormProps((curr) => ({
+        ...curr,
+        request,
+        value: buffer,
+      }))
+    },
+  }
+}
+
+export default useSuperFormState
+export type { UseSuperFormState }

src/Form/hooks/useRemote.tsx

@@ -0,0 +1,123 @@
+import { useEffect, type MutableRefObject } from 'react'
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
+import { useFormContext, useFormState, type FieldValues } from 'react-hook-form'
+import { useStore } from '../store/SuperForm.store'
+import { useApiURL } from '../config/ApiConfig'
+import { getNestedValue } from '../utils/getNestedValue'
+import { fetchClient, type FetchResponse, FetchError } from '../utils/fetchClient'
+import type { GridRef } from '../types'
+
+const useRemote = <T extends FieldValues>(gridRef?: MutableRefObject<GridRef<any> | null>) => {
+  // Component store State
+  const { onResetForm, remote, request, useMutationOptions, useQueryOptions, value } = useStore(
+    (state) => ({
+      onResetForm: state.onResetForm,
+      remote: state.remote,
+      request: state.request,
+      useMutationOptions: state.useMutationOptions,
+      useQueryOptions: state.useQueryOptions,
+      value: state.value,
+    })
+  )
+
+  // Component Hooks
+  const form = useFormContext<T>()
+  const { isDirty } = useFormState({ control: form.control })
+
+  // Component use Effects
+  const qc = useQueryClient()
+
+  // Get API URL from context or override
+  const contextApiURL = useApiURL()
+
+  const id = remote?.primaryKey?.includes('.')
+    ? getNestedValue(remote?.primaryKey, value)
+    : value?.[remote?.primaryKey ?? '']
+
+  const queryKey = useQueryOptions?.queryKey || [remote?.tableName, id]
+
+  const enabled =
+    useQueryOptions?.enabled ||
+    !!(
+      (remote?.enabled ?? true) &&
+      (remote?.tableName ?? '').length > 0 &&
+      (request === 'change' || request === 'delete') &&
+      String(id) !== 'undefined' &&
+      (String(id)?.length ?? 0) > 0
+    )
+
+  let url = remote?.apiURL ?? `${contextApiURL}/${remote?.tableName}`
+  url = url?.endsWith('/') ? url.substring(0, url.length - 1) : url
+
+  const { isSuccess, status, data, isFetching } = useQuery<FetchResponse<T>>({
+    queryKey,
+    queryFn: () => fetchClient.get<T>(`${url}/${id}`, remote?.apiOptions),
+    enabled,
+    refetchOnMount: 'always',
+    refetchOnReconnect: !isDirty,
+    refetchOnWindowFocus: !isDirty,
+    staleTime: 0,
+    gcTime: 0,
+    ...useQueryOptions,
+  })
+
+  const changeMut = useMutation({
+    // @ts-ignore
+    mutationFn: (mutVal: T) => {
+      if (!remote?.tableName || !remote?.primaryKey) {
+        return Promise.resolve(null)
+      }
+
+      return request === 'insert'
+        ? fetchClient.post(url, mutVal, remote?.apiOptions)
+        : request === 'change'
+          ? fetchClient.post(`${url}/${id}`, mutVal, remote?.apiOptions)
+          : request === 'delete'
+            ? fetchClient.delete(`${url}/${id}`, remote?.apiOptions)
+            : Promise.resolve(null)
+    },
+    onSettled: (response: FetchResponse | null) => {
+      qc?.invalidateQueries({ queryKey: [remote?.tableName] })
+
+      if (request !== 'delete' && response) {
+        if (onResetForm) {
+          onResetForm(response?.data, form).then(() => {
+            form.reset(response?.data, { keepDirty: false })
+          })
+        } else {
+          form.reset(response?.data, { keepDirty: false })
+        }
+      }
+
+      gridRef?.current?.refresh?.()
+      // @ts-ignore
+      gridRef?.current?.selectRow?.(response?.data?.[remote?.primaryKey ?? ''])
+    },
+    ...useMutationOptions,
+  })
+
+  useEffect(() => {
+    if (isSuccess && status === 'success' && enabled && !isFetching) {
+      if (!Object.keys(data?.data ?? {}).includes(remote?.primaryKey ?? '')) {
+        throw new Error('Primary key not found in remote data')
+      }
+
+      if (onResetForm) {
+        onResetForm(data?.data, form).then((resetData) => {
+          form.reset(resetData)
+        })
+      } else {
+        form.reset(data?.data)
+      }
+    }
+  }, [isSuccess, status, enabled, isFetching])
+
+  return {
+    error: changeMut.error as FetchError,
+    isFetching: (enabled ? isFetching : false) || changeMut?.isPending,
+    mutateAsync: changeMut.mutateAsync,
+    queryKey,
+  }
+}
+
+export default useRemote

src/Form/store/FormLayout.store.tsx

@@ -0,0 +1,48 @@
+import React, { createContext, useContext, type ReactNode } from 'react'
+import { create } from 'zustand'
+import type { RequestType } from '../types'
+
+interface FormLayoutState {
+  request: RequestType
+  loading: boolean
+  dirty: boolean
+  onCancel?: () => void
+  onSubmit?: () => void
+  setState: (key: string, value: any) => void
+}
+
+const createFormLayoutStore = (initialProps: any) =>
+  create<FormLayoutState>((set) => ({
+    request: initialProps.request || 'insert',
+    loading: initialProps.loading || false,
+    dirty: initialProps.dirty || false,
+    onCancel: initialProps.onCancel,
+    onSubmit: initialProps.onSubmit,
+    setState: (key, value) => set({ [key]: value }),
+  }))
+
+const FormLayoutStoreContext = createContext<ReturnType<typeof createFormLayoutStore> | null>(null)
+
+export const FormLayoutStoreProvider: React.FC<{ children: ReactNode; [key: string]: any }> = ({
+  children,
+  ...props
+}) => {
+  const storeRef = React.useRef<ReturnType<typeof createFormLayoutStore>>()
+  if (!storeRef.current) {
+    storeRef.current = createFormLayoutStore(props)
+  }
+
+  return (
+    <FormLayoutStoreContext.Provider value={storeRef.current}>
+      {children}
+    </FormLayoutStoreContext.Provider>
+  )
+}
+
+export const useFormLayoutStore = <T,>(selector: (state: FormLayoutState) => T): T => {
+  const store = useContext(FormLayoutStoreContext)
+  if (!store) {
+    throw new Error('useFormLayoutStore must be used within FormLayoutStoreProvider')
+  }
+  return store(selector)
+}

src/Form/store/SuperForm.store.tsx

@@ -0,0 +1,22 @@
+import type { SuperFormProviderProps } from '../types'
+import { createSyncStore } from '@warkypublic/zustandsyncstore'
+
+const { Provider, useStore } = createSyncStore<any, SuperFormProviderProps>((set) => ({
+  request: 'insert',
+  setRequest: (request) => {
+    set({ request })
+  },
+
+  value: undefined,
+  setValue: (value) => {
+    set({ value })
+  },
+
+  noCloseOnSubmit: false,
+  setNoCloseOnSubmit: (noCloseOnSubmit) => {
+    set({ noCloseOnSubmit })
+  },
+}))
+
+export { Provider, useStore }
+export const useSuperFormStore = useStore

src/Form/styles/Form.module.css

@@ -0,0 +1,10 @@
+.disabled {
+  pointer-events: none;
+  opacity: 0.9;
+}
+
+.sticky {
+  position: -webkit-sticky;
+  position: sticky;
+  bottom: 0;
+}

src/Form/types/form.types.ts

@@ -0,0 +1,135 @@
+import type { UseMutationOptions, UseMutationResult, UseQueryOptions } from '@tanstack/react-query'
+import type { FieldValues, UseFormProps, UseFormReturn, UseFormStateReturn } from 'react-hook-form'
+import type { ModalProps, PaperProps, PopoverProps, DrawerProps } from '@mantine/core'
+import type { RemoteConfig } from './remote.types'
+
+export type RequestType = 'insert' | 'change' | 'view' | 'select' | 'delete' | 'get' | 'set'
+
+// Grid integration types (simplified - removes BTGlideRef dependency)
+export interface GridRef<T = any> {
+  refresh?: () => void
+  selectRow?: (id: any) => void
+}
+
+export interface FormSectionBodyProps {
+  // Add properties as needed from original FormLayout
+  [key: string]: any
+}
+
+export interface FormSectionFooterProps {
+  // Add properties as needed from original FormLayout
+  [key: string]: any
+}
+
+export interface BodyRightSection<T extends FieldValues> {
+  opened?: boolean
+  setOpened?: (opened: boolean) => void
+  w: number | string
+  hideToggleButton?: boolean
+  paperProps?: PaperProps
+  render: (props: {
+    form: UseFormReturn<any, any, undefined>
+    formValue: T
+    isFetching: boolean
+    opened: boolean
+    queryKey: any
+    setOpened: (opened: boolean) => void
+  }) => React.ReactNode
+}
+
+export interface SuperFormLayoutProps<T extends FieldValues> {
+  buttonTitles?: { submit?: string; cancel?: string }
+  extraButtons?: React.ReactNode | ((form: UseFormReturn<any, any, undefined>) => React.ReactNode)
+  noFooter?: boolean
+  noHeader?: boolean
+  noLayout?: boolean
+  bodySectionProps?: Partial<FormSectionBodyProps>
+  footerSectionProps?:
+    | Partial<FormSectionFooterProps>
+    | ((ref: React.RefObject<SuperFormRef<T>>) => Partial<FormSectionFooterProps>)
+  rightSection?: React.ReactNode
+  bodyRightSection?: BodyRightSection<T>
+  title?: string
+  showErrorList?: boolean
+}
+
+export interface CommonFormProps<T extends FieldValues> {
+  gridRef?: React.MutableRefObject<GridRef<any> | null>
+  layoutProps?: SuperFormLayoutProps<T>
+  meta?: { [key: string]: any }
+  nested?: boolean
+  onCancel?: (request: RequestType) => void
+  onLayoutMounted?: () => void
+  onLayoutUnMounted?: () => void
+  onResetForm?: (data: T, form?: UseFormReturn<any, any, undefined>) => Promise<T>
+  onBeforeSubmit?: (
+    data: T,
+    request: RequestType,
+    form?: UseFormReturn<any, any, undefined>
+  ) => Promise<T>
+  onSubmit?: (
+    data: T,
+    request: RequestType,
+    formData?: T,
+    form?: UseFormReturn<any, any, undefined>,
+    closeForm?: boolean
+  ) => void
+  primeData?: any
+  readonly?: boolean
+  remote?: RemoteConfig
+  request: RequestType
+  persist?: boolean | { storageKey?: string }
+  useMutationOptions?: UseMutationOptions<any, Error, T, unknown>
+  useQueryOptions?: Partial<UseQueryOptions<any, Error, T>>
+  value?: T | null
+}
+
+export interface SuperFormProps<T extends FieldValues> extends CommonFormProps<T> {
+  children: React.ReactNode | ((props: UseFormReturn<T, any, undefined>) => React.ReactNode)
+  useFormProps?: UseFormProps<T>
+}
+
+export interface SuperFormProviderProps extends Omit<SuperFormProps<any>, 'children'> {
+  children?: React.ReactNode
+}
+
+export interface SuperFormModalProps<T extends FieldValues> extends SuperFormProps<T> {
+  modalProps: ModalProps
+  noCloseOnSubmit?: boolean
+}
+
+export interface SuperFormPopoverProps<T extends FieldValues> extends SuperFormProps<T> {
+  popoverProps?: Omit<PopoverProps, 'children'>
+  target: any
+  noCloseOnSubmit?: boolean
+}
+
+export interface ExtendedDrawerProps extends DrawerProps {
+  // Add any extended drawer props needed
+  [key: string]: any
+}
+
+export interface SuperFormDrawerProps<T extends FieldValues> extends SuperFormProps<T> {
+  drawerProps: ExtendedDrawerProps
+  noCloseOnSubmit?: boolean
+}
+
+export interface SuperFormRef<T extends FieldValues> {
+  form: UseFormReturn<T, any, undefined>
+  mutation: Partial<UseMutationResult<any, Error, any, unknown>>
+  submit: (closeForm?: boolean, afterSubmit?: (data: T | any) => void) => Promise<void>
+  queryKey?: any
+  getFormState: () => UseFormStateReturn<T>
+}
+
+export interface SuperFormDrawerRef<T extends FieldValues> extends SuperFormRef<T> {
+  drawer: HTMLDivElement | null
+}
+
+export interface SuperFormModalRef<T extends FieldValues> extends SuperFormRef<T> {
+  modal: HTMLDivElement | null
+}
+
+export interface SuperFormPopoverRef<T extends FieldValues> extends SuperFormRef<T> {
+  popover: HTMLDivElement | null
+}

src/Form/types/index.ts

@@ -0,0 +1,2 @@
+export * from './form.types'
+export * from './remote.types'

src/Form/types/remote.types.ts

@@ -0,0 +1,11 @@
+export interface RemoteConfig {
+  apiOptions?: RequestInit
+  apiURL?: string
+  enabled?: boolean
+  fetchSize?: number
+  hotFields?: string[]
+  primaryKey?: string
+  sqlFilter?: string
+  tableName: string
+  uniqueKeys?: string[]
+}

src/Form/utils/fetchClient.ts

@@ -0,0 +1,161 @@
+export interface FetchOptions extends RequestInit {
+  params?: Record<string, any>
+  timeout?: number
+}
+
+export interface FetchResponse<T = any> {
+  data: T
+  status: number
+  statusText: string
+  ok: boolean
+  error?: string
+}
+
+export class FetchError extends Error {
+  constructor(
+    public message: string,
+    public status?: number,
+    public response?: any
+  ) {
+    super(message)
+    this.name = 'FetchError'
+  }
+}
+
+/**
+ * Fetch wrapper with timeout support and axios-like interface
+ */
+async function fetchWithTimeout(
+  url: string,
+  options: FetchOptions = {}
+): Promise<Response> {
+  const { timeout = 30000, ...fetchOptions } = options
+
+  const controller = new AbortController()
+  const timeoutId = setTimeout(() => controller.abort(), timeout)
+
+  try {
+    const response = await fetch(url, {
+      ...fetchOptions,
+      signal: controller.signal,
+    })
+    clearTimeout(timeoutId)
+    return response
+  } catch (error) {
+    clearTimeout(timeoutId)
+    throw error
+  }
+}
+
+/**
+ * GET request
+ */
+export async function get<T = any>(
+  url: string,
+  options?: FetchOptions
+): Promise<FetchResponse<T>> {
+  try {
+    const response = await fetchWithTimeout(url, {
+      ...options,
+      method: 'GET',
+      headers: {
+        'Content-Type': 'application/json',
+        ...options?.headers,
+      },
+    })
+
+    const data = await response.json()
+
+    return {
+      data,
+      status: response.status,
+      statusText: response.statusText,
+      ok: response.ok,
+      error: response.ok ? undefined : data?.message || data?.error || response.statusText,
+    }
+  } catch (error) {
+    throw new FetchError(
+      error instanceof Error ? error.message : 'Network request failed',
+      undefined,
+      error
+    )
+  }
+}
+
+/**
+ * POST request
+ */
+export async function post<T = any>(
+  url: string,
+  data?: any,
+  options?: FetchOptions
+): Promise<FetchResponse<T>> {
+  try {
+    const response = await fetchWithTimeout(url, {
+      ...options,
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        ...options?.headers,
+      },
+      body: JSON.stringify(data),
+    })
+
+    const responseData = await response.json()
+
+    return {
+      data: responseData,
+      status: response.status,
+      statusText: response.statusText,
+      ok: response.ok,
+      error: response.ok ? undefined : responseData?.message || responseData?.error || response.statusText,
+    }
+  } catch (error) {
+    throw new FetchError(
+      error instanceof Error ? error.message : 'Network request failed',
+      undefined,
+      error
+    )
+  }
+}
+
+/**
+ * DELETE request
+ */
+export async function del<T = any>(
+  url: string,
+  options?: FetchOptions
+): Promise<FetchResponse<T>> {
+  try {
+    const response = await fetchWithTimeout(url, {
+      ...options,
+      method: 'DELETE',
+      headers: {
+        'Content-Type': 'application/json',
+        ...options?.headers,
+      },
+    })
+
+    const data = await response.json().catch(() => ({}))
+
+    return {
+      data,
+      status: response.status,
+      statusText: response.statusText,
+      ok: response.ok,
+      error: response.ok ? undefined : data?.message || data?.error || response.statusText,
+    }
+  } catch (error) {
+    throw new FetchError(
+      error instanceof Error ? error.message : 'Network request failed',
+      undefined,
+      error
+    )
+  }
+}
+
+export const fetchClient = {
+  get,
+  post,
+  delete: del,
+}

src/Form/utils/getNestedValue.ts

@@ -0,0 +1,9 @@
+/**
+ * Retrieves a nested value from an object using dot notation path
+ * @param path - Dot-separated path (e.g., "user.address.city")
+ * @param obj - Object to extract value from
+ * @returns The value at the specified path, or undefined if not found
+ */
+export const getNestedValue = (path: string, obj: any): any => {
+  return path.split('.').reduce((prev, curr) => prev?.[curr], obj)
+}

src/Form/utils/openConfirmModal.ts

@@ -0,0 +1,30 @@
+import React from 'react'
+import { Stack, Text } from '@mantine/core'
+import { modals } from '@mantine/modals'
+
+export const openConfirmModal = (
+  onConfirm: () => void,
+  onCancel?: (() => void) | null,
+  description?: string | null
+) =>
+  modals.openConfirmModal({
+    size: 'xs',
+    children: (
+      <Stack gap={4}>
+        <Text size='xs' c={description ? 'blue' : 'red'} fw='bold'>
+          You have unsaved changes in this form.
+        </Text>
+        <Text size='xs'>
+          {description ??
+            'Closing now will discard any modifications you have made. Are you sure you want to continue?'}
+        </Text>
+      </Stack>
+    ),
+    labels: { confirm: description ? 'Restore' : 'Confirm', cancel: 'Cancel' },
+    confirmProps: { color: description ? 'blue' : 'red', size: 'compact-xs' },
+    cancelProps: { size: 'compact-xs' },
+    groupProps: { gap: 'xs' },
+    withCloseButton: false,
+    onConfirm,
+    onCancel,
+  })

src/Former/Former.store.tsx

@@ -0,0 +1,188 @@
+import { createSyncStore } from '@warkypublic/zustandsyncstore';
+import { produce } from 'immer';
+
+import type { FormerProps, FormerState } from './Former.types';
+
+const { Provider: FormerProvider, useStore: useFormerStore } = createSyncStore<
+  FormerState<any> & Partial<FormerProps<any>>,
+  FormerProps<any>
+>(
+  (set, get) => ({
+    getState: (key) => {
+      const current = get();
+      return current?.[key];
+    },
+    load: async (reset?: boolean) => {
+      try {
+        set({ loading: true });
+        const keyName = get()?.apiKeyField || 'id';
+        const keyValue = (get().values as any)?.[keyName] ?? (get().primeData as any)?.[keyName];
+        if (get().onAPICall && keyValue !== undefined) {
+          let data = await get().onAPICall!(
+            'read',
+            get().request || 'insert',
+            get().values,
+            keyValue
+          );
+          if (get().afterGet) {
+            data = await get().afterGet!({ ...data });
+          }
+          set({ loading: false, values: data });
+          get().onChange?.(data);
+        }
+        if (reset && get().getFormMethods) {
+          const formMethods = get().getFormMethods!();
+          formMethods.reset();
+        }
+      } catch (e) {
+        set({ error: (e as Error)?.message ?? e, loading: false });
+      }
+      set({ loading: false });
+    },
+
+    onChange: (values) => {
+      set({ values });
+    },
+    request: 'insert',
+    reset: async () => {
+      const state = get();
+      if (state.getFormMethods) {
+        if (state.request !== 'insert') {
+          await state.load(true);
+        }
+
+        const formMethods = state.getFormMethods!();
+        formMethods.reset({ ...state.values, ...state.primeData });
+      }
+    },
+    save: async (e?: React.BaseSyntheticEvent<object, any, any> | undefined) => {
+      try {
+        const keepOpen = get().keepOpen ?? false;
+        set({ loading: true });
+        if (get().getFormMethods) {
+          const formMethods = get().getFormMethods!();
+
+          let data = formMethods.getValues();
+
+          if (get().beforeSave) {
+            const newData = await get().beforeSave!(data);
+            data = newData;
+          }
+
+          let exit = false;
+          const handler = formMethods.handleSubmit(
+            (newdata) => {
+              data = newdata;
+            },
+            (errors) => {
+              set({ error: errors.root?.message || 'Validation errors', loading: false });
+              exit = true;
+            }
+          );
+
+          await handler(e);
+
+          //console.log('Former.store.tsx save called', success, e, data, get().getFormMethods);
+          if (exit) {
+            set({ loading: false });
+            return undefined;
+          }
+
+          if (get().request === 'delete' && !get().deleteConfirmed) {
+            const confirmed = (await get().onConfirmDelete?.(data)) ?? false;
+            if (!confirmed) {
+              set({ loading: false });
+              return undefined;
+            }
+          }
+
+          if (get().onAPICall) {
+            const keyName = get()?.apiKeyField || 'id';
+            const keyValue =
+              (get().values as any)?.[keyName] ?? (get().primeData as any)?.[keyName];
+            const savedData = await get().onAPICall!(
+              'mutate',
+              get().request || 'insert',
+              data,
+              keyValue
+            );
+            if (get().afterSave) {
+              await get().afterSave!(savedData);
+            }
+            set({ loading: false, values: savedData });
+            get().onChange?.(savedData);
+            if (!keepOpen) {
+              get().onClose?.(savedData);
+            }
+            return savedData;
+          }
+
+          set({ loading: false, values: data });
+          get().onChange?.(data);
+          if (!keepOpen) {
+            get().onClose?.(data);
+          }
+
+          return data;
+        }
+      } catch (e) {
+        set({ error: (e as Error)?.message ?? e, loading: false });
+      }
+
+      return undefined;
+    },
+    setRequest: (request) => {
+      set({ request });
+    },
+    setState: (key, value) => {
+      set(
+        produce((state) => {
+          state[key] = value;
+        })
+      );
+    },
+    setStateFN: (key, value) => {
+      const p = new Promise<void>((resolve, reject) => {
+        set(
+          produce((state) => {
+            if (typeof value === 'function') {
+              state[key] = (value as (value: unknown) => unknown)(state[key]);
+            } else {
+              reject(new Error(`Not a function ${value}`));
+              throw Error(`Not a function ${value}`);
+            }
+          })
+        );
+        resolve();
+      });
+
+      return p;
+    },
+    validate: async () => {
+      if (get().getFormMethods) {
+        const formMethods = get().getFormMethods!();
+        const isValid = await formMethods.trigger();
+        return isValid;
+      }
+      return true;
+    },
+    values: undefined,
+  }),
+  ({ onConfirmDelete, primeData, request, values }) => {
+    let _onConfirmDelete = onConfirmDelete;
+    if (!onConfirmDelete) {
+      _onConfirmDelete = async () => {
+        return confirm('Are you sure you want to delete this item?');
+      };
+    }
+    return {
+      onConfirmDelete: _onConfirmDelete,
+      primeData,
+      request: request || 'insert',
+      values: { ...primeData, ...values },
+    };
+  }
+);
+
+export { FormerProvider };
+export { useFormerStore };

src/Former/Former.tsx

@@ -0,0 +1,115 @@
+import { forwardRef, type PropsWithChildren, useEffect, useImperativeHandle } from 'react';
+import { type FieldValues, FormProvider, useForm } from 'react-hook-form';
+
+import type { FormerProps, FormerRef } from './Former.types';
+
+import { FormerProvider, useFormerStore } from './Former.store';
+import { FormerLayout } from './FormerLayout';
+
+const FormerInner = forwardRef<FormerRef<any>, Partial<FormerProps<any>> & PropsWithChildren>(
+  function FormerInner<T extends FieldValues>(
+    props: Partial<FormerProps<T>> & PropsWithChildren<T>,
+    ref: any
+  ) {
+    const {
+      getState,
+      onChange,
+      onClose,
+      onOpen,
+      opened,
+      primeData,
+      reset,
+      save,
+      setState,
+      useFormProps,
+      validate,
+      values,
+      wrapper,
+    } = useFormerStore((state) => ({
+      getState: state.getState,
+      onChange: state.onChange,
+      onClose: state.onClose,
+      onOpen: state.onOpen,
+      opened: state.opened,
+      primeData: state.primeData,
+      reset: state.reset,
+      save: state.save,
+      setState: state.setState,
+      useFormProps: state.useFormProps,
+      validate: state.validate,
+      values: state.values,
+      wrapper: state.wrapper,
+    }));
+
+    const formMethods = useForm<T>({
+      defaultValues: primeData,
+      mode: 'all',
+      shouldUseNativeValidation: true,
+      values: values,
+      ...useFormProps,
+    });
+
+    useImperativeHandle(
+      ref,
+      () => ({
+        close: async () => {
+          //console.log('close called');
+          onClose?.();
+          setState('opened', false);
+        },
+        getValue: () => {
+          return getState('values');
+        },
+        reset: () => {
+          reset();
+        },
+        save: async () => {
+          return await save();
+        },
+        setValue: (value: T) => {
+          onChange?.(value);
+        },
+        show: async () => {
+          //console.log('show called');
+          setState('opened', true);
+          onOpen?.();
+        },
+        validate: async () => {
+          return await validate();
+        },
+      }),
+      [getState, onChange]
+    );
+
+    useEffect(() => {
+      setState('getFormMethods', () => formMethods);
+    }, [formMethods]);
+
+    return (
+      <FormProvider {...formMethods}>
+        {typeof wrapper === 'function' ? (
+          wrapper(<FormerLayout>{props.children}</FormerLayout>, opened, onClose, onOpen, getState)
+        ) : (
+          <FormerLayout>{props.children || null}</FormerLayout>
+        )}
+      </FormProvider>
+    );
+  }
+);
+
+export const Former = forwardRef<FormerRef<any>, FormerProps<any> & PropsWithChildren>(
+  function Former<T extends FieldValues = any>(
+    props: FormerProps<T> & PropsWithChildren<T>,
+    ref: any
+  ) {
+    //if opened is false and wrapper is defined as function, do not render anything
+    if (!props.opened && typeof props.wrapper === 'function') {
+      return null;
+    }
+    return (
+      <FormerProvider {...props}>
+        <FormerInner ref={ref}>{props.children}</FormerInner>
+      </FormerProvider>
+    );
+  }
+);

src/Former/Former.types.ts

@@ -0,0 +1,73 @@
+import type { LoadingOverlayProps, ScrollAreaAutosizeProps } from '@mantine/core';
+import type { FieldValues, UseFormProps, UseFormReturn } from 'react-hook-form';
+
+export interface FormerProps<T extends FieldValues = any> {
+  afterGet?: (data: T) => Promise<T> | void;
+  afterSave?: (data: T) => Promise<void> | void;
+  apiKeyField?: string;
+  beforeSave?: (data: T) => Promise<T> | T;
+  disableHTMlForm?: boolean;
+  keepOpen?: boolean;
+  onAPICall?: (
+    mode: 'mutate' | 'read',
+    request: RequestType,
+    value?: T,
+    key?: number | string
+  ) => Promise<T>;
+  onCancel?: () => void;
+  onChange?: (value: T) => void;
+  onClose?: (data?: T) => void;
+  onConfirmDelete?: (values?: T) => Promise<boolean>;
+  onOpen?: (data?: T) => void;
+
+  opened?: boolean;
+  primeData?: T;
+  request: RequestType;
+  useFormProps?: UseFormProps<T>;
+  values?: T;
+  wrapper?: (
+    children: React.ReactNode,
+    opened: boolean | undefined,
+    onClose: ((data?: T) => void) | undefined,
+    onOpen: ((data?: T) => void) | undefined,
+    getState: <K extends keyof FormStateAndProps<T>>(key: K) => FormStateAndProps<T>[K]
+  ) => React.ReactNode;
+}
+
+export interface FormerRef<T extends FieldValues = any> {
+  close: () => Promise<void>;
+  getValue: () => T | undefined;
+  reset: () => void;
+  save: () => Promise<T | undefined>;
+  setValue: (value: T) => void;
+  show: () => Promise<void>;
+  validate: () => Promise<boolean>;
+}
+
+export interface FormerState<T extends FieldValues = any> {
+  deleteConfirmed?: boolean;
+  error?: string;
+  getFormMethods?: () => UseFormReturn<any, any>;
+  getState: <K extends keyof FormStateAndProps<T>>(key: K) => FormStateAndProps<T>[K];
+  load: (reset?: boolean) => Promise<void>;
+  loading?: boolean;
+  loadingOverlayProps?: LoadingOverlayProps;
+  reset: (e?: React.BaseSyntheticEvent<object, any, any> | undefined) => Promise<void>;
+  save: (e?: React.BaseSyntheticEvent<object, any, any> | undefined) => Promise<T | undefined>;
+  scrollAreaProps?: ScrollAreaAutosizeProps;
+  setRequest: (request: RequestType) => void;
+  setState: <K extends keyof FormStateAndProps<T>>(
+    key: K,
+    value: Partial<FormStateAndProps<T>>[K]
+  ) => void;
+  setStateFN: <K extends keyof FormStateAndProps<T>>(
+    key: K,
+    value: (current: FormStateAndProps<T>[K]) => Partial<FormStateAndProps<T>[K]>
+  ) => Promise<void>;
+  validate: () => Promise<boolean>;
+}
+
+export type FormStateAndProps<T extends FieldValues = any> = FormerProps<T> &
+  Partial<FormerState<T>>;
+
+export type RequestType = 'delete' | 'insert' | 'select' | 'update' | 'view';

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>
+  );
+};

src/Former/stories/Gridler.goapi.stories.tsx

@@ -0,0 +1,42 @@
+//@ts-nocheck
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { Box } from '@mantine/core';
+import { fn } from 'storybook/test';
+
+import { FormTest } from './example';
+
+const Renderable = (props: any) => {
+  return (
+    <Box h="100%" mih="400px" miw="400px" w="100%">
+      <FormTest {...props} />
+    </Box>
+  );
+};
+
+const meta = {
+  // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
+  args: { onClick: fn() },
+  // More on argTypes: https://storybook.js.org/docs/api/argtypes
+  argTypes: {
+    backgroundColor: { control: 'color' },
+  },
+  component: Renderable,
+  parameters: {
+    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
+    //layout: 'centered',
+  },
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+  tags: ['autodocs'],
+  title: 'Former/Former Basic',
+} satisfies Meta<typeof Renderable>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const BasicExample: Story = {
+  args: {
+    label: 'Test',
+  },
+};

src/Former/stories/example.tsx

@@ -0,0 +1,118 @@
+import { Button, Drawer, Group, Paper, Select, Stack, Switch } from '@mantine/core';
+import { useRef, useState } from 'react';
+import { Controller } from 'react-hook-form';
+
+import type { FormerRef } from '../Former.types';
+
+import { Former } from '../Former';
+
+export const FormTest = () => {
+  const [request, setRequest] = useState<null | string>('insert');
+  const [wrapped, setWrapped] = useState(false);
+  const [open, setOpen] = useState(false);
+  const [formData, setFormData] = useState({ a: 99 });
+  console.log('formData', formData);
+
+  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)}
+      />
+      <Button onClick={() => setOpen(true)}>Open Former Drawer</Button>
+      <Group>
+        <Button
+          onClick={async () => {
+            const valid = await ref.current?.validate();
+            console.log('validate -> ', valid, ref.current);
+          }}
+        >
+          Test Ref Values. See console
+        </Button>
+        <Button
+          onClick={async () => {
+            setTimeout(() => {
+              ref.current?.close?.();
+            }, 3000);
+          }}
+        >
+          Test Show/Hide
+        </Button>
+      </Group>
+      <Former
+        //wrapper={(children, getState) => <div>{children}</div>}
+        //opened={true}
+        apiKeyField="a"
+        onAPICall={(mode, request, value) => {
+          console.log('API Call', mode, request, value);
+          if (mode === 'read') {
+            return new Promise((resolve) => {
+              setTimeout(() => {
+                resolve({ a: 'Another Value', test: 'Loaded Value' });
+              }, 1000);
+            });
+          }
+          return new Promise((resolve) => {
+            setTimeout(() => {
+              resolve(value || {});
+            }, 1000);
+          });
+        }}
+        onChange={setFormData}
+        onClose={() => setOpen(false)}
+        opened={open}
+        primeData={{ a: '66', test: 'primed' }}
+        ref={ref}
+        request={request as any}
+        useFormProps={{ criteriaMode: 'all', shouldUseNativeValidation: false }}
+        values={formData}
+        wrapper={
+          wrapped
+            ? (children, opened, onClose, onOpen, getState) => {
+                const values = getState('values');
+                return (
+                  <Drawer
+                    h={'100%'}
+                    onClose={() => onClose?.()}
+                    opened={opened ?? false}
+                    title={`Drawer Former - Current A Value: ${values?.a}`}
+                    w={'50%'}
+                  >
+                    <Paper h="100%" shadow="sm" w="100%" withBorder>
+                      {children}
+                      <Button>Test Save</Button>
+                    </Paper>
+                  </Drawer>
+                );
+              }
+            : undefined
+        }
+      >
+        <Stack h="1200px">
+          <Stack>
+            <Controller
+              name="test"
+              render={({ field }) => <input type="text" {...field} placeholder="A" />}
+            />
+            <Controller
+              name="a"
+              render={({ field }) => <input type="text" {...field} placeholder="B" />}
+              rules={{ required: 'Field is required' }}
+            />
+          </Stack>
+          <Stack>
+            <button type="submit">Submit</button>
+            <button type="reset">Reset</button>
+          </Stack>
+        </Stack>
+      </Former>
+    </Stack>
+  );
+};

src/Former/todo.md

@@ -0,0 +1,11 @@
+- [ ] Headerspec API
+- [ ] Relspec API
+- [ ] SocketSpec API
+- [ ] Layout Tool
+  - [ ] Header Section
+  - [ ] Button Section
+  - [ ] Footer Section
+- [ ] Different Loaded for saving vs loading
+- [ ] Better Confirm Dialog
+- [ ] Reset Confirm Dialog
+- [ ] Request insert and save but keep open (must clear key from API, also add callback)

src/Gridler/GridlerDataGrid.tsx

@@ -231,16 +231,16 @@ export const GridlerDataGrid = () => {
                   rows = rows.hasIndex(r) ? rows : rows.add(r);
                 }
               }
-
+              console.log('Debug:onGridSelectionChange', currentSelection, selection);
               if (
                 JSON.stringify(currentSelection?.columns) !== JSON.stringify(selection.columns) ||
                 JSON.stringify(currentSelection?.rows) !== JSON.stringify(rows) ||
                 JSON.stringify(currentSelection?.current) !== JSON.stringify(selection.current)
               ) {
                 setState('_gridSelection', { ...selection, rows });
-                if (JSON.stringify(currentSelection?.rows) !== JSON.stringify(rows)) {
+                //if (JSON.stringify(currentSelection?.rows) !== JSON.stringify(rows)) {
                 setState('_gridSelectionRows', rows);
-                }
+                //}
               }
 
               //console.log('Selection', selection);

src/Gridler/components/BottomBar.tsx

@@ -1,4 +1,4 @@
-/* eslint-disable react/react-in-jsx-scope */
+ 
 import { useGridlerStore } from './GridlerStore';
 
 export function BottomBar() {

src/Gridler/components/Computer.tsx

@@ -142,7 +142,7 @@ export const Computer = React.memo(() => {
         onChange(buffers);
       }
     }
-  }, [JSON.stringify(_gridSelectionRows), getState]);
+  }, [_gridSelectionRows, _gridSelectionRows?.length, getState]);
 
   useEffect(() => {
     setState(
@@ -282,7 +282,12 @@ export const Computer = React.memo(() => {
         const firstRow = firstBuffer?.[keyField];
         const currentValues = getState('values') ?? [];
 
-        if (firstRow && firstRow > 0 && (currentValues.length ?? 0) === 0) {
+        if (
+          !(values && values.length > 0) &&
+          firstRow &&
+          firstRow > 0 &&
+          (currentValues.length ?? 0) === 0
+        ) {
           const values = [firstBuffer, ...(currentValues as Array<Record<string, unknown>>)];
 
           const onChange = getState('onChange');
@@ -340,12 +345,14 @@ export const Computer = React.memo(() => {
           if (selectedRowKey) {
             const onChange = getState('onChange');
             const selected = [{ [getState('keyField') ?? 'id']: selectedRowKey }];
+            if (JSON.stringify(getState('values')) !== JSON.stringify(selected)) {
               if (onChange) {
                 onChange(selected);
               } else {
                 setState('values', selected);
               }
             }
+          }
 
           ref.scrollTo(0, r);
           getState('_events').dispatchEvent(

src/Gridler/components/GridlerStore.tsx

@@ -461,7 +461,15 @@ const { Provider, useStore: useGridlerStore } = createSyncStore<GridlerStoreStat
     onCellClicked: (cell: Item, event: CellClickedEventArgs) => {
       const state = get();
       const [col, row] = cell;
+      if (state.glideProps?.onCellClicked) {
         state.glideProps?.onCellClicked?.(cell, event);
+      }
+      if (state.values?.length) {
+        if (state.onChange) {
+          state.onChange(state.values);
+        }
+      }
+
       state._events.dispatchEvent(
         new CustomEvent('onCellClicked', {
           detail: { cell, col, row, state },

src/Gridler/components/adaptors/GlidlerAPIAdaptorForGoLangv2.tsx

@@ -77,11 +77,12 @@ function _GlidlerAPIAdaptorForGoLangv2<T = unknown>(props: GlidlerAPIAdaptorForG
                   !f.disableFilter &&
                   !f.disableSearch &&
                   !f.virtual &&
+                  f.id &&
                   ((searchFields ?? []).length == 0 || searchFields?.includes(f.id))
               )
               ?.forEach((filter: any) => {
                 ops.push({
-                  name: `${filter.id}`,
+                  name: `${filter.id ?? ""}`,
                   op: 'contains',
                   type: 'searchor',
                   value: searchStr,

src/Gridler/index.ts

@@ -5,4 +5,6 @@ export * from './components/Column'
 export {type GridlerProps,type GridlerRef,type GridlerState, useGridlerStore } from './components/GridlerStore'
 export { GridlerRightMenuIcon } from './components/RightMenuIcon'
 export {Gridler} from './Gridler'
-export  * from './utils'
+export  {GoAPIHeaders} from './utils'
+export type {FetchAPIOperation} from './utils'
+export type {APIOptions} from './utils/types'

src/Gridler/stories/Gridler.goapi.stories.tsx

@@ -1,3 +1,4 @@
+//@ts-nocheck
 import type { Meta, StoryObj } from '@storybook/react-vite';
 
 import { Box } from '@mantine/core';
@@ -6,7 +7,12 @@ import { fn } from 'storybook/test';
 import { GridlerGoAPIExampleEventlog } from './Examples.goapi';
 
 const Renderable = (props: any) => {
-  return <Box h="100%" mih="400px" miw="400px" w='100%' > <GridlerGoAPIExampleEventlog {...props} /></Box>;
+  return (
+    <Box h="100%" mih="400px" miw="400px" w="100%">
+      {' '}
+      <GridlerGoAPIExampleEventlog {...props} />
+    </Box>
+  );
 };
 
 const meta = {
@@ -19,7 +25,7 @@ const meta = {
   component: Renderable,
   parameters: {
     // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
-    layout: 'centered',
+    //layout: 'centered',
   },
   // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
   tags: ['autodocs'],

src/Gridler/stories/Gridler.localdata.stories.tsx

@@ -1,3 +1,4 @@
+//@ts-nocheck
 import type { Meta, StoryObj } from '@storybook/react-vite';
 
 import { Box } from '@mantine/core';
@@ -24,7 +25,7 @@ const meta = {
   component: Renderable,
   parameters: {
     // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
-    layout: 'centered',
+    // layout: 'centered',
   },
   // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
   tags: ['autodocs'],

src/MantineBetterMenu/MantineBetterMenu.stories.tsx

@@ -5,21 +5,20 @@ import { fn } from 'storybook/test';
 
 import { MantineBetterMenusProvider, useMantineBetterMenus } from './';
 
-
+const Renderable = (props: Record<string, unknown>) => {
-const Renderable = (props: Record<string,unknown>) => {
   return (
-  <MantineBetterMenusProvider providerID='test'  {...props} >
+    <MantineBetterMenusProvider providerID="test" {...props}>
-    <Menu/>
+      <Menu />
     </MantineBetterMenusProvider>
   );
-}
+};
 
 const Menu = () => {
   const menus = useMantineBetterMenus();
   //menus.setState("menus",[{id:"test",items:[{id:"1",label:"Test",onClick:()=>{console.log("Clicked")}}]}])
 
-  return <Button onClick={()=>  menus.show("test",{})}>Menu</Button>;
+  return <Button onClick={() => menus.show('test', {})}>Menu</Button>;
-}
+};
 
 const meta = {
   // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
@@ -31,7 +30,7 @@ const meta = {
   component: Renderable,
   parameters: {
     // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
-    layout: 'centered',
+    //layout: 'centered',
   },
   // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
   tags: ['autodocs'],
@@ -44,8 +43,6 @@ type Story = StoryObj<typeof meta>;
 // More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
 export const BasicExample: Story = {
   args: {
-
     label: 'Test',
   },
 };
-