RELEASING: Releasing 1 package(s)

Releases:
  @warkypublic/oranguru@0.0.40

[skip ci]

CHANGELOG.md

@@ -1,5 +1,17 @@
 # @warkypublic/zustandsyncstore
 
+## 0.0.40
+
+### Patch Changes
+
+- 8928432: feat(Former): add keep open functionality and update onClose behavior
+
+## 0.0.39
+
+### Patch Changes
+
+- 00e5a70: feat(Former): enhance state management with additional callbacks and state retrieval
+
 ## 0.0.38
 
 ### Patch Changes

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@warkypublic/oranguru",
   "author": "Warky Devs",
-  "version": "0.0.38",
+  "version": "0.0.40",
   "type": "module",
   "types": "./dist/lib.d.ts",
   "main": "./dist/lib.cjs.js",

src/Former/Former.store.tsx

@@ -2,13 +2,16 @@ import { newUUID } from '@warkypublic/artemis-kit';
 import { createSyncStore } from '@warkypublic/zustandsyncstore';
 import { produce } from 'immer';
 
-import type { FormerProps, FormerState } from './Former.types';
+import type { FormerProps, FormerState, FormStateAndProps } from './Former.types';
 
 const { Provider: FormerProvider, useStore: useFormerStore } = createSyncStore<
   FormerState<any> & Partial<FormerProps<any>>,
   FormerProps<any>
 >(
   (set, get) => ({
+    getAllState: () => {
+      return get() as FormStateAndProps<any>;
+    },
     getState: (key) => {
       const current = get();
       return current?.[key];
@@ -26,17 +29,19 @@ const { Provider: FormerProvider, useStore: useFormerStore } = createSyncStore<
             keyValue
           );
           if (get().afterGet) {
-            data = await get().afterGet!({ ...data });
+            data = await get().afterGet!({ ...data }, get());
           }
           set({ loading: false, values: data });
-          get().onChange?.(data);
+          get().onChange?.(data, get());
         }
         if (reset && get().getFormMethods) {
           const formMethods = get().getFormMethods!();
           formMethods.reset();
         }
       } catch (e) {
-        set({ error: (e as Error)?.message ?? e, loading: false });
+        const errorMessage = (e as Error)?.message ?? e;
+        set({ error: errorMessage, loading: false });
+        get().onError?.(errorMessage, get());
       }
       set({ loading: false });
     },
@@ -66,7 +71,7 @@ const { Provider: FormerProvider, useStore: useFormerStore } = createSyncStore<
           let data = formMethods.getValues();
 
           if (get().beforeSave) {
-            const newData = await get().beforeSave!(data);
+            const newData = await get().beforeSave!(data, get());
             data = newData;
           }
 
@@ -76,7 +81,9 @@ const { Provider: FormerProvider, useStore: useFormerStore } = createSyncStore<
               data = newdata;
             },
             (errors) => {
-              set({ error: errors.root?.message || 'Validation errors', loading: false });
+              const errorMessage = errors.root?.message || 'Validation errors';
+              set({ error: errorMessage, loading: false });
+              get().onError?.(errorMessage, get());
               exit = true;
             }
           );
@@ -107,29 +114,49 @@ const { Provider: FormerProvider, useStore: useFormerStore } = createSyncStore<
               data,
               keyValue
             );
+            const newData = { ...data, ...savedData }; //Merge what we had. In case the API doesn't return all fields, we don't want to lose them
             if (get().afterSave) {
-              await get().afterSave!(savedData);
+              await get().afterSave!(newData, get());
             }
-            set({ loading: false, values: savedData });
-            get().onChange?.(savedData);
-            formMethods.reset(savedData); //reset with saved data to clear dirty state
-            if (!keepOpen) {
-              get().onClose?.(savedData);
+
+            if (keepOpen) {
+              const keyName = get()?.uniqueKeyField || 'id';
+              const clearedData = { ...newData };
+              delete clearedData[keyName];
+              set({ loading: false, values: clearedData });
+              get().onChange?.(clearedData, get());
+              formMethods.reset(clearedData);
+              return newData;
             }
-            return savedData;
+
+            set({ loading: false, values: newData });
+            get().onChange?.(newData, get());
+            formMethods.reset(newData); //reset with saved data to clear dirty state
+            get().onClose?.(newData);
+            return newData;
+          }
+
+          if (keepOpen) {
+            const keyName = get()?.uniqueKeyField || 'id';
+            const clearedData = { ...data };
+            delete clearedData[keyName];
+            set({ loading: false, values: clearedData });
+            formMethods.reset(clearedData);
+            get().onChange?.(clearedData, get());
+            return data;
           }
 
           set({ loading: false, values: data });
           formMethods.reset(data); //reset with saved data to clear dirty state
-          get().onChange?.(data);
-          if (!keepOpen) {
+          get().onChange?.(data, get());
           get().onClose?.(data);
-          }
 
           return data;
         }
       } catch (e) {
-        set({ error: (e as Error)?.message ?? e, loading: false });
+        const errorMessage = (e as Error)?.message ?? e;
+        set({ error: errorMessage, loading: false });
+        get().onError?.(errorMessage, get());
       }
 
       return undefined;
@@ -181,20 +208,20 @@ const { Provider: FormerProvider, useStore: useFormerStore } = createSyncStore<
 
     return {
       id: !id ? newUUID() : id,
-      onClose: () => {
+      onClose: (data?: any) => {
         const dirty = useStoreApi.getState().dirty;
         const setState = useStoreApi.getState().setState;
         if (dirty) {
           if (confirm('You have unsaved changes. Are you sure you want to close?')) {
             if (onClose) {
-              onClose();
+              onClose(data);
             } else {
               setState('opened', false);
             }
           }
         } else {
           if (onClose) {
-            onClose();
+            onClose(data);
           } else {
             setState('opened', false);
           }

src/Former/Former.tsx

@@ -12,6 +12,7 @@ const FormerInner = forwardRef<FormerRef<any>, Partial<FormerProps<any>> & Props
     ref: any
   ) {
     const {
+      getAllState,
       getState,
       onChange,
       onClose,
@@ -26,6 +27,7 @@ const FormerInner = forwardRef<FormerRef<any>, Partial<FormerProps<any>> & Props
       values,
       wrapper,
     } = useFormerStore((state) => ({
+      getAllState: state.getAllState,
       getState: state.getState,
       onChange: state.onChange,
       onClose: state.onClose,
@@ -54,7 +56,7 @@ const FormerInner = forwardRef<FormerRef<any>, Partial<FormerProps<any>> & Props
       () => ({
         close: async () => {
           //console.log('close called');
-          onClose?.();
+          onClose?.(getState('values'));
           setState('opened', false);
         },
         getValue: () => {
@@ -67,7 +69,7 @@ const FormerInner = forwardRef<FormerRef<any>, Partial<FormerProps<any>> & Props
           return await save();
         },
         setValue: (value: T) => {
-          onChange?.(value);
+          onChange?.(value, getAllState());
         },
         show: async () => {
           //console.log('show called');
@@ -78,7 +80,7 @@ const FormerInner = forwardRef<FormerRef<any>, Partial<FormerProps<any>> & Props
           return await validate();
         },
       }),
-      [getState, onChange, validate, save, reset, setState, onClose, onOpen]
+      [getState, getAllState, onChange, validate, save, reset, setState, onClose, onOpen]
     );
 
     useEffect(() => {
@@ -97,7 +99,19 @@ const FormerInner = forwardRef<FormerRef<any>, Partial<FormerProps<any>> & Props
     return (
       <FormProvider {...formMethods}>
         {typeof wrapper === 'function' ? (
-          wrapper(<FormerLayout>{props.children}</FormerLayout>, opened ??false, onClose ?? (() => {setState('opened', false)}), onOpen ?? (() => {setState('opened', true)}), getState)
+          wrapper(
+            <FormerLayout>{props.children}</FormerLayout>,
+            opened ?? false,
+            onClose ??
+              (() => {
+                setState('opened', false);
+              }),
+            onOpen ??
+              (() => {
+                setState('opened', true);
+              }),
+            getState
+          )
         ) : (
           <FormerLayout>{props.children || null}</FormerLayout>
         )}

src/Former/Former.types.ts

@@ -15,15 +15,15 @@ export type FormerAPICallType<T extends FieldValues = any> = (
 ) => Promise<T>;
 
 export interface FormerProps<T extends FieldValues = any> {
-  afterGet?: (data: T) => Promise<T> | void;
-  afterSave?: (data: T) => Promise<void> | void;
-  beforeSave?: (data: T) => Promise<T> | T;
+  afterGet?: (data: T, state: Partial<FormStateAndProps<T>>) => Promise<T> | void;
+  afterSave?: (data: T, state: Partial<FormStateAndProps<T>>) => Promise<void> | void;
+  beforeSave?: (data: T, state: Partial<FormStateAndProps<T>>) => Promise<T> | T;
   dirty?: boolean;
   disableHTMlForm?: boolean;
   id?: string;
   keepOpen?: boolean;
   layout?: {
-    buttonArea?: "bottom" | "none" | "top";
+    buttonArea?: 'bottom' | 'none' | 'top';
     buttonAreaGroupProps?: GroupProps;
     closeButtonProps?: ButtonProps;
     closeButtonTitle?: React.ReactNode;
@@ -31,14 +31,15 @@ export interface FormerProps<T extends FieldValues = any> {
     renderTop?: FormerSectionRender<T>;
     saveButtonProps?: ButtonProps;
     saveButtonTitle?: React.ReactNode;
+    showKeepOpenSwitch?: boolean;
     title?: string;
   };
   onAPICall?: FormerAPICallType<T>;
   onCancel?: () => void;
-  onChange?: (value: T) => void;
-  onClose?: (data?: T) => void;
+  onChange?: (value: T, state: Partial<FormStateAndProps<T>>) => void;
+  onClose?: (data?: T | undefined) => void;
   onConfirmDelete?: (values?: T) => Promise<boolean>;
-
+  onError?: (error: Error | string, state: Partial<FormStateAndProps<T>>) => void;
   onOpen?: (data?: T) => void;
   opened?: boolean;
   primeData?: T;
@@ -62,15 +63,16 @@ export interface FormerRef<T extends FieldValues = any> {
 
 export type FormerSectionRender<T extends FieldValues = any> = (
   children: React.ReactNode,
-  opened: boolean ,
-  onClose: ((data?: T) => void),
-  onOpen: ((data?: T) => void) ,
+  opened: boolean,
+  onClose: (data?: T) => void,
+  onOpen: (data?: T) => void,
   getState: FormerState<T>['getState']
 ) => React.ReactNode;
 
 export interface FormerState<T extends FieldValues = any> {
   deleteConfirmed?: boolean;
   error?: string;
+  getAllState: () => FormStateAndProps<T>;
   getFormMethods?: () => UseFormReturn<any, any>;
   getState: <K extends keyof FormStateAndProps<T>>(key: K) => FormStateAndProps<T>[K];
   load: (reset?: boolean) => Promise<void>;

src/Former/FormerButtonArea.tsx

@@ -1,4 +1,4 @@
-import { Button, Group, Tooltip } from '@mantine/core';
+import { Button, Group, Switch, Tooltip } from '@mantine/core';
 import { IconDeviceFloppy, IconX } from '@tabler/icons-react';
 
 import { useFormerStore } from './Former.store';
@@ -9,21 +9,29 @@ export const FormerButtonArea = () => {
     closeButtonProps,
     closeButtonTitle,
     dirty,
+    getState,
+    keepOpen,
     onClose,
     request,
     save,
     saveButtonProps,
     saveButtonTitle,
+    setState,
+    showKeepOpenSwitch,
   } = useFormerStore((state) => ({
     buttonAreaGroupProps: state.layout?.buttonAreaGroupProps,
     closeButtonProps: state.layout?.closeButtonProps,
     closeButtonTitle: state.layout?.closeButtonTitle,
     dirty: state.dirty,
+    getState: state.getState,
+    keepOpen: state.keepOpen,
     onClose: state.onClose,
     request: state.request,
     save: state.save,
     saveButtonProps: state.layout?.saveButtonProps,
     saveButtonTitle: state.layout?.saveButtonTitle,
+    setState: state.setState,
+    showKeepOpenSwitch: state.layout?.showKeepOpenSwitch,
   }));
 
   const disabledSave =
@@ -47,12 +55,19 @@ export const FormerButtonArea = () => {
             size="sm"
             {...closeButtonProps}
             onClick={() => {
-              onClose();
+              onClose(getState('values'));
             }}
           >
             {closeButtonTitle || 'Close'}
           </Button>
         )}
+        {showKeepOpenSwitch && (
+          <Switch
+            checked={keepOpen}
+            label="Keep Open"
+            onChange={(event) => setState('keepOpen', event.currentTarget.checked)}
+          />
+        )}
         <Tooltip
           label={
             disabledSave ? (