@appcorp/fusion-storybook 0.2.1 → 0.2.2

package/base-modules/admission/form.js

@@ -77,7 +77,8 @@ export const AdmissionForm = () => {
                 },
             });
         }
-    }, [id, dispatch, workspace]);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [id, dispatch]);
     return (_jsxs("div", { className: "grid grid-cols-1 gap-2 space-y-2", children: [_jsx("h4", { className: "m-0 p-0", children: t("formSectionStudentInformation") }), _jsxs("div", { className: "grid grid-cols-5 gap-4", children: [_jsx(EnhancedInput, { error: errors.firstName, id: "firstName", info: t("formFirstNameInfo"), label: t("formFirstNameLabel"), onChange: (e) => handleChange("firstName", e.target.value), placeholder: t("formFirstNamePlaceholder"), required: true, type: "text", value: firstName || "" }), _jsx(EnhancedInput, { error: errors.lastName, id: "lastName", info: t("formLastNameInfo"), label: t("formLastNameLabel"), onChange: (e) => handleChange("lastName", e.target.value), placeholder: t("formLastNamePlaceholder"), required: true, type: "text", value: lastName || "" }), _jsx(EnhancedInput, { error: errors.studentIdNumber, id: "studentIdNumber", info: t("formStudentIdNumberInfo"), label: t("formStudentIdNumberLabel"), onChange: (e) => handleChange("studentIdNumber", e.target.value), placeholder: t("formStudentIdNumberPlaceholder"), required: true, type: "text", value: studentIdNumber || "" }), _jsx(EnhancedCombobox, { emptyText: t("formNoGenderOptionsEmpty"), error: errors.gender, id: "gender", info: t("formGenderInfo"), label: t("formGenderLabel"), required: true, onValueChange: (value) => handleChange("gender", value), options: [
                             { label: t("formOptionMale"), value: GENDER.MALE },
                             { label: t("formOptionFemale"), value: GENDER.FEMALE },

package/base-modules/admission/page.js

@@ -14,7 +14,7 @@
  */
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useMemo, useCallback } from "react";
+import { useMemo } 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,15 +46,13 @@ const tableBodyCols = [
 // ============================================================================
 // COMPONENT FACTORY (creates JSX elements when config is created, not during render)
 // ============================================================================
-// Memoized component instances - created once and reused
-const componentInstancesCache = {
+const createComponentInstances = () => ({
     filter: _jsx(AdmissionFilter, {}),
     form: _jsx(AdmissionForm, {}),
     moreActions: _jsx(AdmissionMoreActions, {}),
     view: _jsx(AdmissionView, {}),
-};
-const createComponentInstances = () => componentInstancesCache;
-const createAdmissionConfig = ({ cancelLabel, drawerTitle, labelActions, labelClass, labelEnabled, labelFirstName, labelId, labelLastName, labelRegistrationCode, labelStatus, saveLabel, searchPlaceholder, tableDescription, tableTitle, onClearFilters, }) => {
+});
+const createAdmissionConfig = ({ cancelLabel, dispatch, drawer, drawerTitle, labelActions, labelClass, labelEnabled, labelFirstName, labelId, labelLastName, labelRegistrationCode, labelStatus, saveLabel, searchPlaceholder, tableDescription, tableTitle, }) => {
     const components = createComponentInstances();
     return {
         moduleName: "admission",
@@ -78,8 +76,10 @@ const createAdmissionConfig = ({ cancelLabel, drawerTitle, labelActions, labelCl
         tableDescription,
         tableTitle,
         viewContent: components.view,
-        size: "small",
-        onClearFilters,
+        size: drawer === ADMISSION_DRAWER.FORM_DRAWER ? "full" : "small",
+        onClearFilters: () => {
+            dispatch({ type: ADMISSION_ACTION_TYPES.RESET_FORM });
+        },
     };
 };
 // ============================================================================
@@ -88,16 +88,10 @@ const createAdmissionConfig = ({ cancelLabel, drawerTitle, labelActions, labelCl
 const GenericAdmissionPage = createGenericModulePage();
 const AdmissionPageInner = (props) => {
     const context = useAdmissionModule();
-    // 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({
+    // Memoize config creation - destructure props to avoid object reference changes
+    const admissionConfig = useMemo(() => createAdmissionConfig({
+        dispatch: context.dispatch,
+        drawer: context.state.drawer,
         cancelLabel: props.cancelLabel,
         drawerTitle: props.drawerTitle,
         labelActions: props.labelActions,
@@ -112,8 +106,9 @@ 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,
@@ -128,24 +123,7 @@ 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.2.1",
+  "version": "0.2.2",
   "scripts": {
     "build-storybook": "storybook build",
     "build:next": "next build",