chore(form): 🗑️ remove unused form components and types

* Refactor Former components to streamline functionality
* Update stories to reflect changes in form structure

src/Former/stories/apiFormData.tsx

@@ -1,39 +1,39 @@
 import { TextInput } from '@mantine/core';
-import { Former } from '../Former';
 import { useUncontrolled } from '@mantine/hooks';
-
 import { Controller } from 'react-hook-form';
 
+import { Former } from '../Former';
+
 export const ApiFormData = (props: {
-  values?: Record<string, unknown>;
   onChange?: (values: Record<string, unknown>) => void;
   primeData?: Record<string, unknown>;
+  values?: Record<string, unknown>;
 }) => {
   const [values, setValues] = useUncontrolled<Record<string, unknown>>({
-    value: props.values,
-    defaultValue: { url: '', authToken: '', ...props.primeData },
-    finalValue: { url: '', authToken: '', ...props.primeData },
+    defaultValue: { authToken: '', url: '', ...props.primeData },
+    finalValue: { authToken: '', url: '', ...props.primeData },
     onChange: props.onChange,
+    value: props.values,
   });
 
   return (
     <Former
+      disableHTMlForm
+      id="api-form-data"
+      layout={{ saveButtonTitle: 'Save URL Parameters' }}
+      onChange={setValues}
+      primeData={props.primeData}
       request="update"
       uniqueKeyField="id"
-      disableHTMlForm
-      primeData={props.primeData}
       values={values}
-      onChange={setValues}
-      layout={{ saveButtonTitle: 'Save URL Parameters' }}
-      id="api-form-data"
     >
       <Controller
         name="url"
-        render={({ field }) => <TextInput type="url" label="URL" {...field} />}
+        render={({ field }) => <TextInput label="URL" type="url" {...field} />}
       />
       <Controller
         name="authToken"
-        render={({ field }) => <TextInput type="password" label="Auth Token" {...field} />}
+        render={({ field }) => <TextInput label="Auth Token" type="password" {...field} />}
       />
     </Former>
   );

src/Former/stories/example.tsx

@@ -1,13 +1,13 @@
-import { Button, Drawer, Group, Paper, Select, Stack, Switch } from '@mantine/core';
+import { Button, Group, Select, Stack, Switch } from '@mantine/core';
 import { useRef, useState } from 'react';
 import { Controller } from 'react-hook-form';
 
 import type { FormerAPICallType, FormerProps, FormerRef } from '../Former.types';
 
 import { Former } from '../Former';
-import { ApiFormData } from './apiFormData';
 import { FormerRestHeadSpecAPI } from '../FormerRestHeadSpecAPI';
-import { FormerDialog, FormerModel } from '../FormerWrappers';
+import { FormerModel } from '../FormerWrappers';
+import { ApiFormData } from './apiFormData';
 
 const StubAPI = (): FormerAPICallType => (mode, request, value) => {
   console.log('API Call', mode, request, value);
@@ -30,14 +30,14 @@ export const FormTest = () => {
   const [wrapped, setWrapped] = useState(false);
   const [disableHTML, setDisableHTML] = useState(false);
   const [apiOptions, setApiOptions] = useState({
-    url: '',
     authToken: '',
     type: '',
+    url: '',
   });
   const [layout, setLayout] = useState({
+    buttonAreaGroupProps: { justify: 'center' },
     buttonOnTop: false,
     title: 'Custom Former Title',
-    buttonAreaGroupProps: { justify: 'center' },
   } as FormerProps['layout']);
 
   const [open, setOpen] = useState(false);
@@ -96,13 +96,12 @@ export const FormTest = () => {
           Test Show/Hide
         </Button>
       </Group>
-      <FormerModel opened={open} onClose={() => setOpen(false)} former={{ request: 'insert' }}>
+      <FormerModel former={{ request: 'insert' }} onClose={() => setOpen(false)} opened={open}>
         <div>Test</div>
       </FormerModel>
       <Former
-        //wrapper={(children, getState) => <div>{children}</div>}
-        //opened={true}
-        uniqueKeyField="rid_usernote"
+        disableHTMlForm={disableHTML}
+        layout={layout}
         onAPICall={
           apiOptions.type === 'api'
             ? FormerRestHeadSpecAPI({
@@ -111,16 +110,17 @@ export const FormTest = () => {
               })
             : StubAPI()
         }
-        disableHTMlForm={disableHTML}
         onChange={setFormData}
         onClose={() => setOpen(false)}
         opened={open}
         primeData={{ a: '66', test: 'primed' }}
         ref={ref}
         request={request as any}
+        //wrapper={(children, getState) => <div>{children}</div>}
+        //opened={true}
+        uniqueKeyField="rid_usernote"
         useFormProps={{ criteriaMode: 'all', shouldUseNativeValidation: false }}
         values={formData}
-        layout={layout}
         // wrapper={
         //   wrapped
         //     ? (children, opened, onClose, _onOpen, getState) => {
@@ -169,10 +169,10 @@ export const FormTest = () => {
       </Former>
       {apiOptions.type === 'api' && (
         <ApiFormData
-          values={apiOptions}
           onChange={(values) => {
             setApiOptions({ ...apiOptions, ...values });
           }}
+          values={apiOptions}
         />
       )}
     </Stack>