@appcorp/fusion-storybook 0.1.11 → 0.1.13

package/base-modules/admission/page.js

@@ -82,22 +82,7 @@ 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)
 // ============================================================================
@@ -113,6 +98,6 @@ const AdmissionPageInner = (props) => {
     if (!hasPermission) {
         return _jsx(RbacNoAccess, { moduleName: "Admission" });
     }
-    return (_jsx("div", { className: "p-4", children: _jsx(GenericAdmissionPage, { config: admissionConfig, overrideConfig: admissionConfig, context: context, tableBodyCols: tableBodyCols }) }));
+    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.13",
   "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",