@appcorp/fusion-storybook 0.1.11 → 0.1.14

package/base-modules/admission/context.js

@@ -195,10 +195,85 @@ export const useAdmissionModule = () => {
             siblings: context.state.siblings || "",
             state: context.state.state || "",
         });
-    }, [context.state, (_b = workspace === null || workspace === void 0 ? void 0 : workspace.school) === null || _b === void 0 ? void 0 : _b.id]);
+    }, [
+        context.state.address,
+        context.state.admissionNotes,
+        context.state.status,
+        context.state.bForm,
+        context.state.city,
+        context.state.classForAdmission,
+        context.state.country,
+        context.state.discountCode,
+        context.state.dob,
+        context.state.emergencyContact,
+        context.state.enabled,
+        context.state.fatherCnic,
+        context.state.fatherFirstName,
+        context.state.fatherLastName,
+        context.state.fatherMobile,
+        context.state.fatherOccupation,
+        context.state.fatherOrganization,
+        context.state.firstName,
+        context.state.gender,
+        context.state.hafiz,
+        context.state.id,
+        context.state.lastName,
+        context.state.motherCnic,
+        context.state.motherFirstName,
+        context.state.motherLastName,
+        context.state.motherMobile,
+        context.state.notes,
+        context.state.orphan,
+        context.state.postalCode,
+        context.state.previousSchool,
+        context.state.registrationCode,
+        context.state.siblings,
+        context.state.state,
+        (_b = workspace === null || workspace === void 0 ? void 0 : workspace.school) === null || _b === void 0 ? void 0 : _b.id,
+    ]);
     const byIdParams = useMemo(() => ({ id: context.state.id }), [context.state.id]);
     const deleteParams = useMemo(() => ({ id: context.state.id }), [context.state.id]);
     // ============================================================================
+    // UTILITIES
+    // ============================================================================
+    const showToast = useCallback((message, variant) => {
+        generateThemeToast({ description: message, variant });
+    }, []);
+    const setField = useCallback((key, value) => {
+        var _a, _b, _c;
+        let formatted = value === null
+            ? undefined
+            : value;
+        if ((key === "bForm" || key === "fatherCnic" || key === "motherCnic") &&
+            typeof value === "string" &&
+            value.length === 13) {
+            formatted = (_a = formatCnic(value)) !== null && _a !== void 0 ? _a : value;
+        }
+        if ((key === "fatherMobile" || key === "motherMobile") &&
+            typeof value === "string" &&
+            value.length >= 13) {
+            formatted = (_c = (_b = formatPhone(value, "PK")) === null || _b === void 0 ? void 0 : _b.international) !== null && _c !== void 0 ? _c : value;
+        }
+        context.dispatch({
+            type: ADMISSION_ACTION_TYPES.SET_INPUT_FIELD,
+            payload: { key, value: formatted || value },
+        });
+    }, [context]);
+    const resetFormAndCloseDrawer = useCallback(() => {
+        context.dispatch({
+            type: ADMISSION_ACTION_TYPES.SET_ERRORS,
+            payload: { errors: {} },
+        });
+        context.dispatch({
+            type: ADMISSION_ACTION_TYPES.SET_DISABLE_SAVE_BUTTON,
+            payload: { disabled: false },
+        });
+        context.dispatch({
+            type: ADMISSION_ACTION_TYPES.SET_DRAWER,
+            payload: { drawer: null },
+        });
+    }, [context]);
+    // ============================================================================
     // API CALLBACKS
     // ============================================================================
     const listCallback = ({ data, error }) => {
@@ -317,46 +392,6 @@ export const useAdmissionModule = () => {
         },
     });
     // ============================================================================
-    // UTILITIES
-    // ============================================================================
-    const showToast = useCallback((message, variant) => {
-        generateThemeToast({ description: message, variant });
-    }, []);
-    const resetFormAndCloseDrawer = useCallback(() => {
-        context.dispatch({
-            type: ADMISSION_ACTION_TYPES.SET_ERRORS,
-            payload: { errors: {} },
-        });
-        context.dispatch({
-            type: ADMISSION_ACTION_TYPES.SET_DISABLE_SAVE_BUTTON,
-            payload: { disabled: false },
-        });
-        context.dispatch({
-            type: ADMISSION_ACTION_TYPES.SET_DRAWER,
-            payload: { drawer: null },
-        });
-    }, [context]);
-    const setField = useCallback((key, value) => {
-        var _a, _b, _c;
-        let formatted = value === null
-            ? undefined
-            : value;
-        if ((key === "bForm" || key === "fatherCnic" || key === "motherCnic") &&
-            typeof value === "string" &&
-            value.length === 13) {
-            formatted = (_a = formatCnic(value)) !== null && _a !== void 0 ? _a : value;
-        }
-        if ((key === "fatherMobile" || key === "motherMobile") &&
-            typeof value === "string" &&
-            value.length >= 13) {
-            formatted = (_c = (_b = formatPhone(value, "PK")) === null || _b === void 0 ? void 0 : _b.international) !== null && _c !== void 0 ? _c : value;
-        }
-        context.dispatch({
-            type: ADMISSION_ACTION_TYPES.SET_INPUT_FIELD,
-            payload: { key, value: formatted || value },
-        });
-    }, [context]);
-    // ============================================================================
     // HANDLERS
     // ============================================================================
     const handleChange = useCallback((field, value) => {
@@ -724,7 +759,7 @@ export const useAdmissionModule = () => {
                 showToast(t("messagesFetchFailed"), TOAST_VARIANT.ERROR);
             }
         })();
-    }, [listParams, workspace === null || workspace === void 0 ? void 0 : workspace.id, t, showToast, context]);
+    }, [listParams, workspace === null || workspace === void 0 ? void 0 : workspace.id, t, showToast, context.dispatch]);
     // ============================================================================
     // RETURN
     // ============================================================================

package/base-modules/admission/page.js

@@ -82,37 +82,56 @@ const createAdmissionConfig = ({ cancelLabel, dispatch, drawer, drawerTitle, lab
 // ============================================================================
 // STABLE PAGE COMPONENT (created once, outside render)
 // ============================================================================
-const GenericAdmissionPage = createGenericModulePage({
-    cancelLabel: "",
-    drawerTitle: "",
-    filterContent: _jsx(AdmissionFilter, {}),
-    formContent: _jsx(AdmissionForm, {}),
-    moduleName: "admission",
-    moreActionsContent: _jsx(AdmissionMoreActions, {}),
-    onClearFilters: () => { },
-    saveLabel: "",
-    searchPlaceholder: "",
-    size: "small",
-    tableColumns: [],
-    tableDescription: "",
-    tableTitle: "",
-    viewContent: _jsx(AdmissionView, {}),
-});
+const GenericAdmissionPage = createGenericModulePage();
 // ============================================================================
 // INNER PAGE (requires AdmissionProvider context)
 // ============================================================================
 const AdmissionPageInner = (props) => {
     const context = useAdmissionModule();
-    // Memoize config creation
-    const admissionConfig = useMemo(() => createAdmissionConfig(Object.assign({ dispatch: context.dispatch, drawer: context.state.drawer }, props)), [context.dispatch, context.state.drawer, props]);
-    // Memoize permission check to avoid recalculation on every render
-    const hasPermission = useMemo(() => resolveRbacPermissions({
+    // 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,
+        labelClass: props.labelClass,
+        labelEnabled: props.labelEnabled,
+        labelFirstName: props.labelFirstName,
+        labelId: props.labelId,
+        labelLastName: props.labelLastName,
+        labelRegistrationCode: props.labelRegistrationCode,
+        labelStatus: props.labelStatus,
+        saveLabel: props.saveLabel,
+        searchPlaceholder: props.searchPlaceholder,
+        tableDescription: props.tableDescription,
+        tableTitle: props.tableTitle,
+    }), [
+        context.dispatch,
+        context.state.drawer,
+        props.cancelLabel,
+        props.drawerTitle,
+        props.labelActions,
+        props.labelClass,
+        props.labelEnabled,
+        props.labelFirstName,
+        props.labelId,
+        props.labelLastName,
+        props.labelRegistrationCode,
+        props.labelStatus,
+        props.saveLabel,
+        props.searchPlaceholder,
+        props.tableDescription,
+        props.tableTitle,
+    ]);
+    const hasPermission = resolveRbacPermissions({
         userRole: props.userRole,
         moduleName: "Admission",
-    }), [props.userRole]);
+    });
     if (!hasPermission) {
         return _jsx(RbacNoAccess, { moduleName: "Admission" });
     }
-    return (_jsx("div", { className: "p-4", children: _jsx(GenericAdmissionPage, { config: admissionConfig, overrideConfig: admissionConfig, context: context, tableBodyCols: tableBodyCols }) }));
+    console.log("Rendering AdmissionPageInner with config:", admissionConfig);
+    return (_jsx("div", { className: "p-4", children: _jsx(GenericAdmissionPage, { overrideConfig: admissionConfig, context: context, tableBodyCols: tableBodyCols }) }));
 };
 export const AdmissionPage = (props) => (_jsx(AdmissionProvider, { children: _jsx(AdmissionPageInner, Object.assign({}, props)) }));

package/base-modules/discount-code/page.js

@@ -84,22 +84,7 @@ const createDiscountCodeConfig = (t, drawer, dispatch) => {
 // ============================================================================
 // STABLE PAGE COMPONENT (created once, outside render)
 // ============================================================================
-const GenericDiscountCodePage = createGenericModulePage({
-    moduleName: "discountCode",
-    tableColumns: [],
-    cancelLabel: "",
-    drawerTitle: "",
-    filterContent: _jsx(DiscountCodeFilter, {}),
-    formContent: _jsx(DiscountCodeForm, {}),
-    moreActionsContent: _jsx(DiscountCodeMoreActions, {}),
-    saveLabel: "",
-    searchPlaceholder: "",
-    tableDescription: "",
-    tableTitle: "",
-    viewContent: _jsx(DiscountCodeView, {}),
-    size: "small",
-    onClearFilters: () => { },
-});
+const GenericDiscountCodePage = createGenericModulePage();
 // ============================================================================
 // INNER PAGE (requires DiscountCodeProvider context)
 // ============================================================================
@@ -115,6 +100,6 @@ const DiscountCodePageInner = ({ userRole }) => {
     if (!hasPermission) {
         return _jsx(RbacNoAccess, { moduleName: "DiscountCode" });
     }
-    return (_jsx("div", { className: "p-4", children: _jsx(GenericDiscountCodePage, { config: discountCodeConfig, context: context, tableBodyCols: tableBodyCols }) }));
+    return (_jsx("div", { className: "p-4", children: _jsx(GenericDiscountCodePage, { overrideConfig: discountCodeConfig, context: context, tableBodyCols: tableBodyCols }) }));
 };
 export const DiscountCodePage = ({ userRole }) => (_jsx(DiscountCodeProvider, { children: _jsx(DiscountCodePageInner, { userRole: userRole }) }));

package/base-modules/family/page.js

@@ -83,22 +83,7 @@ const createFamilyConfig = (t, dispatch) => {
 // ============================================================================
 // STABLE PAGE COMPONENT (created once, outside render)
 // ============================================================================
-const GenericFamilyPage = createGenericModulePage({
-    moduleName: "family",
-    tableColumns: [],
-    cancelLabel: "",
-    drawerTitle: "",
-    filterContent: _jsx(FamilyFilter, {}),
-    formContent: _jsx(FamilyForm, {}),
-    moreActionsContent: _jsx(FamilyMoreActions, {}),
-    saveLabel: "",
-    searchPlaceholder: "",
-    tableDescription: "",
-    tableTitle: "",
-    viewContent: _jsx(FamilyView, {}),
-    size: "small",
-    onClearFilters: () => { },
-});
+const GenericFamilyPage = createGenericModulePage();
 // ============================================================================
 // INNER PAGE (requires FamilyProvider context)
 // ============================================================================
@@ -115,6 +100,6 @@ const FamilyPageInner = ({ userRole }) => {
     if (!hasPermission) {
         return _jsx(RbacNoAccess, { moduleName: "People Management" });
     }
-    return (_jsx("div", { className: "p-4", children: _jsx(GenericFamilyPage, { config: familyConfig, context: context, tableBodyCols: tableBodyCols }) }));
+    return (_jsx("div", { className: "p-4", children: _jsx(GenericFamilyPage, { overrideConfig: familyConfig, context: context, tableBodyCols: tableBodyCols }) }));
 };
 export const FamilyPage = ({ userRole }) => (_jsx(FamilyProvider, { children: _jsx(FamilyPageInner, { userRole: userRole }) }));

package/base-modules/family-member/page.js

@@ -85,22 +85,7 @@ const createFamilyMemberConfig = (t, drawer, dispatch) => {
 // ============================================================================
 // STABLE PAGE COMPONENT (created once, outside render)
 // ============================================================================
-const GenericFamilyMemberPage = createGenericModulePage({
-    moduleName: "familyMember",
-    tableColumns: [],
-    cancelLabel: "",
-    drawerTitle: "",
-    filterContent: _jsx(FamilyMemberFilter, {}),
-    formContent: _jsx(FamilyMemberForm, {}),
-    moreActionsContent: _jsx(FamilyMemberMoreActions, {}),
-    saveLabel: "",
-    searchPlaceholder: "",
-    tableDescription: "",
-    tableTitle: "",
-    viewContent: _jsx(FamilyMemberView, {}),
-    size: "small",
-    onClearFilters: () => { },
-});
+const GenericFamilyMemberPage = createGenericModulePage();
 // ============================================================================
 // INNER PAGE (requires FamilyMemberProvider context)
 // ============================================================================
@@ -117,6 +102,6 @@ const FamilyMemberPageInner = ({ userRole }) => {
     if (!hasPermission) {
         return _jsx(RbacNoAccess, { moduleName: "People Management" });
     }
-    return (_jsx("div", { className: "p-4", children: _jsx(GenericFamilyMemberPage, { config: familyMemberConfig, context: context, tableBodyCols: tableBodyCols }) }));
+    return (_jsx("div", { className: "p-4", children: _jsx(GenericFamilyMemberPage, { overrideConfig: familyMemberConfig, context: context, tableBodyCols: tableBodyCols }) }));
 };
 export const FamilyMemberPage = ({ userRole }) => (_jsx(FamilyMemberProvider, { children: _jsx(FamilyMemberPageInner, { userRole: userRole }) }));

package/base-modules/student-profile/page.js

@@ -33,19 +33,17 @@ const tableBodyCols = [
     { componentType: COMPONENT_TYPE.ACTIONS },
 ];
 // ============================================================================
-// GENERIC PAGE COMPONENT
+// COMPONENT FACTORY (creates JSX elements when config is created, not during render)
 // ============================================================================
-const StudentProfilePageInner = () => {
-    // const { user } = useAuthStateContext();
-    // const userRole = user?.user_metadata?.role as USER_ROLE;
-    const userRole = USER_ROLE.SCHOOL_ADMIN; // Default for storybook
-    const t = useTranslations("studentProfile");
-    const context = useStudentProfileModule();
-    // Config only changes when the locale changes or the drawer changes (size).
-    // Keeping this stable is critical: createGenericModulePage closes over config
-    // and produces a new React component type. If that type changes during render,
-    // React unmounts → remounts → effects fire → dispatch → infinite loop.
-    const studentProfileConfig = useMemo(() => ({
+const createComponentInstances = () => ({
+    filter: _jsx(StudentProfileFilter, {}),
+    form: _jsx(StudentProfileForm, {}),
+    moreActions: _jsx(StudentProfileMoreActions, {}),
+    view: _jsx(StudentProfileView, {}),
+});
+const createStudentProfileConfig = ({ drawer, dispatch, t, }) => {
+    const components = createComponentInstances();
+    return {
         moduleName: "studentProfile",
         tableColumns: [
             { label: t("id"), width: "5%" },
@@ -58,29 +56,45 @@ const StudentProfilePageInner = () => {
         ],
         cancelLabel: t("cancel"),
         drawerTitle: t("studentProfile"),
-        filterContent: _jsx(StudentProfileFilter, {}),
-        formContent: _jsx(StudentProfileForm, {}),
-        moreActionsContent: _jsx(StudentProfileMoreActions, {}),
+        filterContent: components.filter,
+        formContent: components.form,
+        moreActionsContent: components.moreActions,
         saveLabel: t("save"),
         searchPlaceholder: t("searchStudentProfiles"),
         tableDescription: t("manageStudentProfilesAndTheirInformation"),
         tableTitle: t("studentProfile"),
-        viewContent: _jsx(StudentProfileView, {}),
-        size: context.state.drawer === STUDENT_PROFILE_DRAWER.FORM_DRAWER
-            ? "full"
-            : "small",
+        viewContent: components.view,
+        size: drawer === STUDENT_PROFILE_DRAWER.FORM_DRAWER ? "full" : "small",
         onClearFilters: () => {
-            context.dispatch({ type: STUDENT_PROFILE_ACTION_TYPES.RESET_FORM });
+            dispatch({ type: STUDENT_PROFILE_ACTION_TYPES.RESET_FORM });
         },
-    }), [t, context.state.drawer]);
-    const GenericStudentProfilePage = useMemo(() => createGenericModulePage(studentProfileConfig), [studentProfileConfig]);
-    const hasPermission = resolveRbacPermissions({
+    };
+};
+// ============================================================================
+// STABLE PAGE COMPONENT (created once, outside render)
+// ============================================================================
+const GenericStudentProfilePage = createGenericModulePage();
+// ============================================================================
+// INNER PAGE (requires StudentProfileProvider context)
+// ============================================================================
+const StudentProfilePageInner = () => {
+    const userRole = USER_ROLE.SCHOOL_ADMIN; // Default for storybook
+    const t = useTranslations("studentProfile");
+    const context = useStudentProfileModule();
+    // Memoize config creation
+    const studentProfileConfig = useMemo(() => createStudentProfileConfig({
+        dispatch: context.dispatch,
+        drawer: context.state.drawer,
+        t,
+    }), [context.dispatch, context.state.drawer, t]);
+    // Memoize permission check to avoid recalculation on every render
+    const hasPermission = useMemo(() => resolveRbacPermissions({
         userRole,
         moduleName: "People Management",
-    });
+    }), [userRole]);
     if (!hasPermission) {
         return _jsx(RbacNoAccess, { moduleName: "People Management" });
     }
-    return (_jsx("div", { className: "p-4", children: _jsx(GenericStudentProfilePage, { config: studentProfileConfig, context: context, tableBodyCols: tableBodyCols }) }));
+    return (_jsx("div", { className: "p-4", children: _jsx(GenericStudentProfilePage, { overrideConfig: studentProfileConfig, context: context, tableBodyCols: tableBodyCols }) }));
 };
 export const StudentProfilePage = () => (_jsx(StudentProfileProvider, { children: _jsx(StudentProfilePageInner, {}) }));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@appcorp/fusion-storybook",
-  "version": "0.1.11",
+  "version": "0.1.14",
   "scripts": {
     "build-storybook": "storybook build",
     "build:next": "next build",
@@ -56,7 +56,7 @@
     "@radix-ui/react-separator": "^1.1.8",
     "@radix-ui/react-slot": "^1.2.4",
     "@radix-ui/react-toast": "^1.2.15",
-    "@react-pakistan/util-functions": "^1.25.64",
+    "@react-pakistan/util-functions": "^1.25.66",
     "@storybook/addon-a11y": "^10.3.4",
     "@storybook/addon-docs": "^10.3.4",
     "@storybook/addon-onboarding": "^10.3.4",