@appcorp/fusion-storybook 0.2.0 → 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, 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",
@@ -77,9 +79,7 @@ const createAdmissionConfig = ({ cancelLabel, dispatch, drawerTitle, labelAction
         tableTitle,
         viewContent: components.view,
         size: "small",
-        onClearFilters: () => {
-            dispatch({ type: ADMISSION_ACTION_TYPES.RESET_FORM });
-        },
+        onClearFilters,
     };
 };
 // ============================================================================
@@ -88,12 +88,16 @@ const createAdmissionConfig = ({ cancelLabel, dispatch, drawerTitle, labelAction
 const GenericAdmissionPage = createGenericModulePage();
 const AdmissionPageInner = (props) => {
     const context = useAdmissionModule();
-    // Memoize config creation - INTENTIONALLY EXCLUDE drawer state to prevent infinite loops
-    // The drawer state changing (from clicking buttons) would recreate this config,
-    // causing unnecessary re-renders and state updates. Since config should be stable
-    // across drawer state changes, we exclude it from dependencies.
-    const admissionConfig = useMemo(() => createAdmissionConfig({
-        dispatch: context.dispatch,
+    // 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,
@@ -108,8 +112,8 @@ const AdmissionPageInner = (props) => {
         searchPlaceholder: props.searchPlaceholder,
         tableDescription: props.tableDescription,
         tableTitle: props.tableTitle,
+        onClearFilters: handleClearFilters,
     }), [
-        context.dispatch,
         props.cancelLabel,
         props.drawerTitle,
         props.labelActions,
@@ -124,12 +128,24 @@ const AdmissionPageInner = (props) => {
         props.searchPlaceholder,
         props.tableDescription,
         props.tableTitle,
+        handleClearFilters,
     ]);
-    // Dynamically apply drawer size to config for proper drawer sizing
-    // This allows size to change without recreating the entire config
-    const admissionConfigWithSize = useMemo(() => (Object.assign(Object.assign({}, admissionConfig), { size: context.state.drawer === ADMISSION_DRAWER.FORM_DRAWER
-            ? "full"
-            : "small" })), [admissionConfig, context.state.drawer]);
+    // 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",
@@ -137,7 +153,7 @@ const AdmissionPageInner = (props) => {
     if (!hasPermission) {
         return _jsx(RbacNoAccess, { moduleName: "Admission" });
     }
-    return (_jsx("div", { className: "p-4", children: _jsx(GenericAdmissionPage, { overrideConfig: admissionConfigWithSize, context: context, tableBodyCols: tableBodyCols }) }));
+    return (_jsx("div", { className: "p-4", children: _jsx(GenericAdmissionPage, { overrideConfig: admissionConfig, context: context, tableBodyCols: tableBodyCols }) }));
 };
 // ============================================================================
 // PAGE EXPORTS

package/package.json

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