@greatapps/common 1.1.33 → 1.1.34

package/src/components/layouts/AppMobileNavBar.tsx

@@ -0,0 +1,73 @@
+'use client';
+
+import { ReactNode } from 'react';
+import Image from 'next/image';
+import { ProfilePopover } from './ProfilePopover';
+import { useAccountModals } from '../../store/useAccountModals';
+import type { ProfileMenuItem } from './ProfilePopover';
+
+export interface AppMobileNavBarProps {
+  appIconActive?: boolean;
+  /** Shows the colored indicator bar below the app icon */
+  appIconIndicator?: boolean;
+  /** Shows the gray indicator bar below the GreatApps logo */
+  logoIndicator?: boolean;
+  /** Extra slot rendered after the app icon (e.g. project selector) */
+  extraLeftSlot?: ReactNode;
+  /** Required: the right-side action element (toggle button, sheet button, etc.) */
+  rightActionSlot: ReactNode;
+  menuItems?: ProfileMenuItem[];
+  onCreditsClick?: () => void;
+  logoutOverlay?: ReactNode;
+}
+
+export function AppMobileNavBar({
+  appIconActive = false,
+  appIconIndicator = false,
+  logoIndicator = false,
+  extraLeftSlot,
+  rightActionSlot,
+  menuItems = [],
+  onCreditsClick,
+  logoutOverlay,
+}: AppMobileNavBarProps) {
+  const { openConfigurations } = useAccountModals();
+
+  return (
+    <div className="fixed top-0 left-0 right-0 flex md:hidden items-center justify-between p-4 bg-white z-50 border-b border-gray-200">
+      <div className="flex items-center gap-1.5">
+        <div className="relative size-10 flex items-center justify-center">
+          <Image src="/icons/great-icon.svg" alt="GreatApps" width={28} height={28} />
+          {logoIndicator && (
+            <div className="absolute bottom-[-17px] left-1/2 -translate-x-1/2 w-5 h-[3px] bg-gray-950 rounded-t-xl" />
+          )}
+        </div>
+        <div className="relative">
+          <div
+            className={`size-10 flex items-center justify-center rounded-lg transition-colors duration-300 ${
+              appIconActive ? 'bg-pages-300' : 'bg-pages-50'
+            }`}
+          >
+            <Image src="/icons/icon-navbar.svg" alt="GreatPages" width={24} height={24} />
+          </div>
+          {appIconIndicator && (
+            <div className="absolute -bottom-[17px] left-1/2 -translate-x-1/2 w-5 h-[3px] bg-pages-300 rounded-t-xl" />
+          )}
+        </div>
+        {extraLeftSlot}
+      </div>
+      <div className="flex items-center gap-1.5">
+        <ProfilePopover
+          side="bottom"
+          align="end"
+          contentClassName=""
+          onEditProfile={() => openConfigurations()}
+          onCreditsClick={onCreditsClick}
+          menuItems={menuItems}
+          logoutOverlay={logoutOverlay}
+        />
+        {rightActionSlot}
+      </div>
+    </div>
+  );
+}

package/src/components/layouts/AppNavBar.tsx

@@ -0,0 +1,90 @@
+'use client';
+
+import { ReactNode } from 'react';
+import Image from 'next/image';
+import { useRouter } from 'next/navigation';
+import { NavBar } from './NavBar';
+import { ProfilePopover } from './ProfilePopover';
+import { NotificationsPopover } from './NotificationsPopover';
+import { Tooltip, TooltipContent, TooltipTrigger } from '../ui/overlay/Tooltip';
+import { useAccountModals } from '../../store/useAccountModals';
+import type { ProfileMenuItem } from './ProfilePopover';
+import type { NotificationData } from './NotificationsPopover';
+
+export interface AppNavBarProps {
+  onLogoClick?: () => void;
+  logoIndicatorClassName?: string;
+  appIconHref?: string;
+  appIconActive?: boolean;
+  /** Controls the left-side indicator bar on the app icon (opacity transition) */
+  appIconIndicator?: boolean;
+  showExpandButton?: boolean;
+  onExpandClick?: () => void;
+  menuItems?: ProfileMenuItem[];
+  onCreditsClick?: () => void;
+  notifications?: NotificationData[];
+  onNotificationsViewAll?: () => void;
+  logoutOverlay?: ReactNode;
+}
+
+export function AppNavBar({
+  onLogoClick,
+  logoIndicatorClassName,
+  appIconHref = '/',
+  appIconActive = false,
+  appIconIndicator = false,
+  showExpandButton = false,
+  onExpandClick,
+  menuItems = [],
+  onCreditsClick,
+  notifications,
+  onNotificationsViewAll,
+  logoutOverlay,
+}: AppNavBarProps) {
+  const router = useRouter();
+  const { openConfigurations } = useAccountModals();
+
+  const handleLogoClick = onLogoClick ?? (() => router.push('/'));
+  const handleAppIconClick = () => router.push(appIconHref);
+
+  return (
+    <NavBar
+      onLogoClick={handleLogoClick}
+      logoIndicatorClassName={logoIndicatorClassName}
+      showExpandButton={showExpandButton}
+      onExpandClick={onExpandClick}
+      appIconSlot={
+        <div className="relative">
+          <Tooltip>
+            <TooltipTrigger asChild onClick={handleAppIconClick}>
+              <div
+                className={`size-10 flex items-center justify-center rounded-lg hover:bg-pages-100 cursor-pointer transition-colors duration-300 ${
+                  appIconActive ? 'bg-pages-300' : 'bg-pages-50'
+                }`}
+              >
+                <Image src="/icons/icon-navbar.svg" alt="GreatPages" width={24} height={24} />
+              </div>
+            </TooltipTrigger>
+            <TooltipContent side="right">GreatPages</TooltipContent>
+          </Tooltip>
+          <div
+            className={`absolute -left-4 top-1/2 -translate-y-1/2 w-[3px] h-5 bg-pages-300 rounded-r-xl transition-opacity duration-300 ${
+              appIconIndicator ? 'opacity-100' : 'opacity-0'
+            }`}
+          />
+        </div>
+      }
+    >
+      <NotificationsPopover
+        notifications={notifications}
+        onViewAll={onNotificationsViewAll}
+      />
+      <ProfilePopover
+        onEditProfile={() => openConfigurations()}
+        onCreditsClick={onCreditsClick}
+        menuItems={menuItems}
+        logoutOverlay={logoutOverlay}
+      />
+    </NavBar>
+  );
+}

package/src/components/modals/ModalManager.tsx

@@ -0,0 +1,29 @@
+'use client';
+
+import { ComponentType } from 'react';
+import { useModalManager } from '../../store/useModalManager';
+
+interface ModalManagerProps {
+  registry: Record<string, ComponentType>;
+}
+
+export function ModalManager({ registry }: ModalManagerProps) {
+  const { modalStack } = useModalManager();
+
+  if (modalStack.length === 0) return null;
+
+  return (
+    <>
+      {modalStack.map((modal) => {
+        const ModalComponent = registry[modal.key];
+
+        if (!ModalComponent) {
+          console.warn(`Modal "${modal.key}" not found in registry`);
+          return null;
+        }
+
+        return <ModalComponent key={modal.key} />;
+      })}
+    </>
+  );
+}

package/src/components/modals/Modals.tsx

@@ -0,0 +1,29 @@
+'use client';
+
+import { ComponentType, useEffect } from 'react';
+import AccountModals from '../account/AccountModals';
+import { ModalManager } from './ModalManager';
+import { useAccountModals } from '../../store/useAccountModals';
+import type { ComboboxOption } from '../ui/form/ComboboxField';
+
+interface ModalsProps {
+  registry: Record<string, ComponentType>;
+  hasActiveSubscription?: boolean;
+  currencies?: ComboboxOption[];
+  onGoToSubscription?: () => void;
+}
+
+export function Modals({ registry, hasActiveSubscription, currencies, onGoToSubscription }: ModalsProps) {
+  const { updateConfig } = useAccountModals();
+
+  useEffect(() => {
+    updateConfig({ hasActiveSubscription, currencies, onGoToSubscription });
+  }, [hasActiveSubscription, currencies, onGoToSubscription, updateConfig]);
+
+  return (
+    <>
+      <AccountModals />
+      <ModalManager registry={registry} />
+    </>
+  );
+}

package/src/index.ts

@@ -38,6 +38,10 @@ export { parseSchema, parseResult } from './infra/utils/parser';
 export { MainLayout, MainLayoutContent, MainLayoutSpacer, MainLayoutMain } from './components/layouts/MainLayout';
 export { NavBar } from './components/layouts/NavBar';
 export type { NavBarProps } from './components/layouts/NavBar';
+export { AppNavBar } from './components/layouts/AppNavBar';
+export type { AppNavBarProps } from './components/layouts/AppNavBar';
+export { AppMobileNavBar } from './components/layouts/AppMobileNavBar';
+export type { AppMobileNavBarProps } from './components/layouts/AppMobileNavBar';
 export { SideBarNavigation } from './components/layouts/SideBarNavigation';
 export { MdSideBarNavigation } from './components/layouts/MdSideBarNavigation';
 export { NotificationItem } from './components/layouts/NotificationItem';
@@ -96,6 +100,8 @@ export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from './comp
 
 // Store
 export { useMdSidebarStore } from './store/useMdSidebarStore';
+export { useModalManager } from './store/useModalManager';
+export type { ModalData } from './store/useModalManager';
 
 // Enums
 export { AccountSectionType } from './enums/AccountSectionType';
@@ -145,8 +151,13 @@ export type {
   ContactResetResult,
 } from './modules/accounts/types';
 
-// Account Components
-export { default as ConfigurationsMyAccountModal } from './components/account/ConfigurationsMyAccountModal';
+export { default as AccountModals } from './components/account/AccountModals';
+export { useAccountModals } from './store/useAccountModals';
+export type { AccountModalsConfig } from './store/useAccountModals';
+
+export { ModalManager } from './components/modals/ModalManager';
+export { Modals } from './components/modals/Modals';
+
 export { default as TwoFactorAuthModal } from './components/account/TwoFactorAuthModal';
 export { default as DisableTwoFactorAuthModal } from './components/account/DisableTwoFactorAuthModal';
 export { default as ConfirmGlobalPreferencesModal } from './components/account/ConfirmGlobalPreferencesModal';

package/src/store/useAccountModals.ts

@@ -0,0 +1,57 @@
+'use client';
+
+import { create } from 'zustand';
+import type { ComboboxOption } from '../components/ui/form/ComboboxField';
+import type { AccountSectionType } from '../enums/AccountSectionType';
+
+type AccountModalType =
+  | 'configurations'
+  | 'deleteAccount'
+  | 'isntPossibleDelete'
+  | 'confirmDelete';
+
+export interface AccountModalsConfig {
+  hasActiveSubscription?: boolean;
+  currencies?: ComboboxOption[];
+  onGoToSubscription?: () => void;
+}
+
+interface AccountModalsState {
+  activeModal: AccountModalType | null;
+  config: AccountModalsConfig;
+  initialSection?: AccountSectionType;
+  pagesCount: number;
+
+  /** Called by <AccountModals> to keep app-level config in sync */
+  updateConfig: (config: AccountModalsConfig) => void;
+
+  openConfigurations: (initialSection?: AccountSectionType) => void;
+  openDeleteAccount: (pagesCount?: number) => void;
+  openIsntPossibleDelete: () => void;
+  openConfirmDelete: (pagesCount?: number) => void;
+  close: () => void;
+}
+
+export const useAccountModals = create<AccountModalsState>((set) => ({
+  activeModal: null,
+  config: {},
+  initialSection: undefined,
+  pagesCount: 0,
+
+  updateConfig: (config) => set({ config }),
+
+  openConfigurations: (initialSection) =>
+    set({ activeModal: 'configurations', initialSection }),
+
+  openDeleteAccount: (pagesCount = 0) =>
+    set({ activeModal: 'deleteAccount', pagesCount }),
+
+  openIsntPossibleDelete: () =>
+    set({ activeModal: 'isntPossibleDelete' }),
+
+  openConfirmDelete: (pagesCount = 0) =>
+    set({ activeModal: 'confirmDelete', pagesCount }),
+
+  close: () =>
+    set({ activeModal: null, initialSection: undefined }),
+}));

package/src/store/useModalManager.ts

@@ -0,0 +1,104 @@
+'use client';
+
+import { create } from 'zustand';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type ModalData = Record<string, any>;
+
+interface ModalStackItem {
+  key: string;
+  data: ModalData;
+}
+
+interface ModalState {
+  modalStack: ModalStackItem[];
+  activeModal: string | null;
+  modalData: ModalData;
+  openModal: (key: string, data?: ModalData) => void;
+  /** Closes the top modal in the stack */
+  closeModal: () => void;
+  /** Closes a specific modal by key */
+  closeModalByKey: (key: string) => void;
+  updateModalData: (data: ModalData) => void;
+  isModalOpen: (key: string) => boolean;
+  getModalData: (key: string) => ModalData;
+}
+
+export const useModalManager = create<ModalState>((set, get) => ({
+  modalStack: [],
+  activeModal: null,
+  modalData: {},
+
+  openModal: (key, data = {}) => {
+    set((state) => {
+      const existingIndex = state.modalStack.findIndex((item) => item.key === key);
+      if (existingIndex !== -1) {
+        const newStack = [...state.modalStack];
+        newStack[existingIndex] = { key, data };
+        return {
+          modalStack: newStack,
+          activeModal: newStack[newStack.length - 1]?.key ?? null,
+          modalData: newStack[newStack.length - 1]?.data ?? {},
+        };
+      }
+
+      const newStack = [...state.modalStack, { key, data }];
+      return {
+        modalStack: newStack,
+        activeModal: key,
+        modalData: data,
+      };
+    });
+  },
+
+  closeModal: () => {
+    set((state) => {
+      const newStack = state.modalStack.slice(0, -1);
+      const topModal = newStack[newStack.length - 1];
+      return {
+        modalStack: newStack,
+        activeModal: topModal?.key ?? null,
+        modalData: topModal?.data ?? {},
+      };
+    });
+  },
+
+  closeModalByKey: (key: string) => {
+    set((state) => {
+      const newStack = state.modalStack.filter((item) => item.key !== key);
+      const topModal = newStack[newStack.length - 1];
+      return {
+        modalStack: newStack,
+        activeModal: topModal?.key ?? null,
+        modalData: topModal?.data ?? {},
+      };
+    });
+  },
+
+  updateModalData: (data) => {
+    set((state) => {
+      if (state.modalStack.length === 0) return state;
+
+      const newStack = [...state.modalStack];
+      const lastIndex = newStack.length - 1;
+      newStack[lastIndex] = {
+        ...newStack[lastIndex],
+        data: { ...newStack[lastIndex].data, ...data },
+      };
+
+      return {
+        modalStack: newStack,
+        modalData: newStack[lastIndex].data,
+      };
+    });
+  },
+
+  isModalOpen: (key: string) => {
+    return get().modalStack.some((item) => item.key === key);
+  },
+
+  getModalData: (key: string) => {
+    const item = get().modalStack.find((item) => item.key === key);
+    return item?.data ?? {};
+  },
+}));