feat(FE): US#278 slicing UI from and client side validation

src/stores/ui/slices/production/project-flock.slice.ts

@@ -1,11 +1,21 @@
 import { StateCreator } from 'zustand';
-import { DrawerUiSlice } from '@/types/stores';
+import { create } from 'zustand';
+import { devtools } from 'zustand/middleware';
 
-export const createFormDrawerUiSlice: StateCreator<
-  DrawerUiSlice,
+export type ProjectFloockUISlice = {
+  triggerValidate: boolean;
+  toggleValidate: () => void;
+  subscribeValidate: (callback: () => void) => void;
+  isValid: boolean;
+  setIsValid: (v: boolean) => void;
+  subscribeIsValid: (callback: (isValid: boolean) => void) => () => void;
+};
+
+export const createProjectFlockUiSlice: StateCreator<
+  ProjectFloockUISlice,
   [],
   [],
-  DrawerUiSlice
+  ProjectFloockUISlice
 > = (set, get, api) => ({
   // event flag untuk memicu formik validate
   triggerValidate: false,
@@ -38,3 +48,14 @@ export const createFormDrawerUiSlice: StateCreator<
     });
   },
 });
+
+export const useProjectFlockUiStore = create<ProjectFloockUISlice>()(
+  devtools(
+    (...args) => ({
+      ...createProjectFlockUiSlice(...args),
+    }),
+    {
+      name: 'ProjectFlockUiStore',
+    }
+  )
+);

src/stores/ui/ui.store.ts

@@ -5,13 +5,11 @@ import { devtools } from 'zustand/middleware';
 
 import { UIStore } from '@/types/stores';
 import { createMainUiSlice } from '@/stores/ui/slices/main.slice';
-import { createFormDrawerUiSlice } from '@/stores/ui/slices/drawer.slice';
 
 export const useUiStore = create<UIStore>()(
   devtools(
     (...args) => ({
       ...createMainUiSlice(...args),
-      ...createFormDrawerUiSlice(...args),
     }),
     {
       name: 'UIStore',