@appcorp/fusion-storybook 0.1.101 → 0.2.1

package/base-modules/admission/page.js

@@ -14,7 +14,7 @@
  */
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useMemo } from "react";
+import { useMemo, useCallback } from "react";
 import { COMPONENT_TYPE } from "@appcorp/shadcn/components/enhanced-table";
 import { createGenericModulePage, } from "@react-pakistan/util-functions/factory/generic-component-factory";
 import { useAdmissionModule, AdmissionProvider, ADMISSION_DRAWER, ADMISSION_ACTION_TYPES, } from "./context";
@@ -46,13 +46,15 @@ const tableBodyCols = [
 // ============================================================================
 // COMPONENT FACTORY (creates JSX elements when config is created, not during render)
 // ============================================================================
-const createComponentInstances = () => ({
+// Memoized component instances - created once and reused
+const componentInstancesCache = {
     filter: _jsx(AdmissionFilter, {}),
     form: _jsx(AdmissionForm, {}),
     moreActions: _jsx(AdmissionMoreActions, {}),
     view: _jsx(AdmissionView, {}),
-});
-const createAdmissionConfig = ({ cancelLabel, dispatch, drawer, drawerTitle, labelActions, labelClass, labelEnabled, labelFirstName, labelId, labelLastName, labelRegistrationCode, labelStatus, saveLabel, searchPlaceholder, tableDescription, tableTitle, }) => {
+};
+const createComponentInstances = () => componentInstancesCache;
+const createAdmissionConfig = ({ cancelLabel, drawerTitle, labelActions, labelClass, labelEnabled, labelFirstName, labelId, labelLastName, labelRegistrationCode, labelStatus, saveLabel, searchPlaceholder, tableDescription, tableTitle, onClearFilters, }) => {
     const components = createComponentInstances();
     return {
         moduleName: "admission",
@@ -76,10 +78,8 @@ const createAdmissionConfig = ({ cancelLabel, dispatch, drawer, drawerTitle, lab
         tableDescription,
         tableTitle,
         viewContent: components.view,
-        size: drawer === ADMISSION_DRAWER.FORM_DRAWER ? "full" : "small",
-        onClearFilters: () => {
-            dispatch({ type: ADMISSION_ACTION_TYPES.RESET_FORM });
-        },
+        size: "small",
+        onClearFilters,
     };
 };
 // ============================================================================
@@ -88,10 +88,16 @@ const createAdmissionConfig = ({ cancelLabel, dispatch, drawer, drawerTitle, lab
 const GenericAdmissionPage = createGenericModulePage();
 const AdmissionPageInner = (props) => {
     const context = useAdmissionModule();
-    // Memoize config creation - destructure props to avoid object reference changes
-    const admissionConfig = useMemo(() => createAdmissionConfig({
-        dispatch: context.dispatch,
-        drawer: context.state.drawer,
+    // Create a stable onClearFilters callback.
+    // dispatch from useReducer is stable across renders, so we can safely use an empty dependency array
+    // or only depend on dispatch (which never changes). Using empty array is safest.
+    const handleClearFilters = useCallback(() => {
+        context.dispatch({ type: ADMISSION_ACTION_TYPES.RESET_FORM });
+    }, []);
+    // Memoize config creation with translation props only.
+    // The key insight: we create the config ONCE when translations change,
+    // then apply drawer sizing as a separate, cheaper operation below.
+    const baseConfig = useMemo(() => createAdmissionConfig({
         cancelLabel: props.cancelLabel,
         drawerTitle: props.drawerTitle,
         labelActions: props.labelActions,
@@ -106,9 +112,8 @@ const AdmissionPageInner = (props) => {
         searchPlaceholder: props.searchPlaceholder,
         tableDescription: props.tableDescription,
         tableTitle: props.tableTitle,
+        onClearFilters: handleClearFilters,
     }), [
-        context.dispatch,
-        context.state.drawer,
         props.cancelLabel,
         props.drawerTitle,
         props.labelActions,
@@ -123,7 +128,24 @@ const AdmissionPageInner = (props) => {
         props.searchPlaceholder,
         props.tableDescription,
         props.tableTitle,
+        handleClearFilters,
     ]);
+    // Apply drawer sizing without recreating the entire config.
+    // We use a technique where we only update the size property and pass it separately,
+    // ensuring GenericAdmissionPage gets a stable reference unless translation props change.
+    const admissionConfig = useMemo(() => {
+        const isFormDrawerOpen = context.state.drawer === ADMISSION_DRAWER.FORM_DRAWER;
+        // Create a new config only if drawer state actually affects sizing
+        // This prevents unnecessary recreations of the same-sized config
+        if (isFormDrawerOpen && baseConfig.size === "full") {
+            return baseConfig; // Already full size, no need to recreate
+        }
+        if (!isFormDrawerOpen && baseConfig.size === "small") {
+            return baseConfig; // Already small size, no need to recreate
+        }
+        // Only recreate if size needs to change
+        return Object.assign(Object.assign({}, baseConfig), { size: isFormDrawerOpen ? "full" : "small" });
+    }, [baseConfig, context.state.drawer]);
     const hasPermission = resolveRbacPermissions({
         userRole: props.userRole,
         moduleName: "Admission",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@appcorp/fusion-storybook",
-  "version": "0.1.101",
+  "version": "0.2.1",
   "scripts": {
     "build-storybook": "storybook build",
     "build:next": "next build",