@greatapps/common 1.1.379 → 1.1.381

package/src/components/navigation/CancelledSubscriptionBanner.tsx

@@ -1,60 +1,60 @@
-'use client';
-
-import { useState, useEffect, useCallback } from 'react';
-import { IconAlertOctagon, IconX } from '@tabler/icons-react';
-import { formatShortDate } from '../../infra/utils/date';
-import { useActiveSubscription } from '../../modules/subscriptions/hooks/find-active-subscription.hook';
-
-interface CancelledSubscriptionBannerProps {
-  onReactivate?: () => void;
-}
-
-export function CancelledSubscriptionBanner({ onReactivate }: CancelledSubscriptionBannerProps) {
-  const { data: { data: [subscription] = [] } = {} } = useActiveSubscription();
-  const [visible, setVisible] = useState(true);
-  const [animated, setAnimated] = useState(false);
-
-  useEffect(() => {
-    const timer = setTimeout(() => setAnimated(true), 50);
-    return () => clearTimeout(timer);
-  }, []);
-
-  const dismiss = useCallback(() => setVisible(false), []);
-  const dueDate = new Date(subscription?.date_due);
-  const today = new Date();
-  const isPastDue = today >= dueDate;
-  const formattedDate = formatShortDate(dueDate);
-
-  if (!subscription?.date_cancellation || isPastDue || !visible) return null;
-
-  return (
-    <div className="fixed top-[80px] md:top-0 lg:left-[273px] left-0 right-0 z-[60] flex justify-center pointer-events-none px-4 lg:px-0">
-      <div
-        className={`flex flex-col sm:flex-row items-start sm:items-center justify-between bg-red-500 rounded-lg px-3 py-2 sm:py-1 w-full lg:w-[805px] max-w-full pointer-events-auto transition-transform duration-500 ease-out gap-2 sm:gap-0 ${animated ? 'translate-y-0 md:translate-y-9' : '-translate-y-full'}`}
-      >
-        <div className="flex items-center gap-2 flex-1 w-full sm:w-auto">
-          <IconAlertOctagon size={16} className="text-white shrink-0" />
-          <span className="paragraph-xsmall-semibold text-white">
-            {isPastDue
-              ? 'Sua assinatura foi cancelada e suas páginas foram retiradas do ar.'
-              : `Assinatura cancelada! Suas páginas serão retiradas do ar no dia ${formattedDate}!`}
-          </span>
-        </div>
-        <div className="flex items-center gap-1.5 w-full sm:w-auto justify-between sm:justify-start">
-          <button
-            type="button"
-            className="flex items-center justify-center p-1.5 cursor-pointer"
-            onClick={onReactivate}
-          >
-            <span className="paragraph-xsmall-semibold text-white underline">
-              Reativar assinatura
-            </span>
-          </button>
-          <button type="button" className="cursor-pointer shrink-0" onClick={dismiss}>
-            <IconX size={18} className="text-red-200" />
-          </button>
-        </div>
-      </div>
-    </div>
-  );
-}
+'use client';
+
+import { useState, useEffect, useCallback } from 'react';
+import { IconAlertOctagon, IconX } from '@tabler/icons-react';
+import { formatShortDate } from '../../infra/utils/date';
+import { useActiveSubscription } from '../../modules/subscriptions/hooks/find-active-subscription.hook';
+
+interface CancelledSubscriptionBannerProps {
+  onReactivate?: () => void;
+}
+
+export function CancelledSubscriptionBanner({ onReactivate }: CancelledSubscriptionBannerProps) {
+  const { data: { data: [subscription] = [] } = {} } = useActiveSubscription();
+  const [visible, setVisible] = useState(true);
+  const [animated, setAnimated] = useState(false);
+
+  useEffect(() => {
+    const timer = setTimeout(() => setAnimated(true), 50);
+    return () => clearTimeout(timer);
+  }, []);
+
+  const dismiss = useCallback(() => setVisible(false), []);
+  const dueDate = new Date(subscription?.date_due);
+  const today = new Date();
+  const isPastDue = today >= dueDate;
+  const formattedDate = formatShortDate(dueDate);
+
+  if (!subscription?.date_cancellation || isPastDue || !visible) return null;
+
+  return (
+    <div className="fixed top-[80px] md:top-0 lg:left-[273px] left-0 right-0 z-[60] flex justify-center pointer-events-none px-4 lg:px-0">
+      <div
+        className={`flex flex-col sm:flex-row items-start sm:items-center justify-between bg-red-500 rounded-lg px-3 py-2 sm:py-1 w-full lg:w-[805px] max-w-full pointer-events-auto transition-transform duration-500 ease-out gap-2 sm:gap-0 ${animated ? 'translate-y-0 md:translate-y-9' : '-translate-y-full'}`}
+      >
+        <div className="flex items-center gap-2 flex-1 w-full sm:w-auto">
+          <IconAlertOctagon size={16} className="text-white shrink-0" />
+          <span className="paragraph-xsmall-semibold text-white">
+            {isPastDue
+              ? 'Sua assinatura foi cancelada e suas páginas foram retiradas do ar.'
+              : `Assinatura cancelada! Suas páginas serão retiradas do ar no dia ${formattedDate}!`}
+          </span>
+        </div>
+        <div className="flex items-center gap-1.5 w-full sm:w-auto justify-between sm:justify-start">
+          <button
+            type="button"
+            className="flex items-center justify-center p-1.5 cursor-pointer"
+            onClick={onReactivate}
+          >
+            <span className="paragraph-xsmall-semibold text-white underline">
+              Reativar assinatura
+            </span>
+          </button>
+          <button type="button" className="cursor-pointer shrink-0" onClick={dismiss}>
+            <IconX size={18} className="text-red-200" />
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/components/navigation/NavItemsContext.ts

@@ -1,20 +1,20 @@
-'use client';
-
-import { createContext, useContext } from 'react';
-import type { NavItemConfig } from './subcomponents/NavItems';
-
-interface NavItemsContextValue {
-  navItems: NavItemConfig[];
-  setNavItems: (items: NavItemConfig[]) => void;
-  mobileVariant: 'sheet' | 'tabs';
-}
-
-export const NavItemsContext = createContext<NavItemsContextValue>({
-  navItems: [],
-  setNavItems: () => {},
-  mobileVariant: 'sheet',
-});
-
-export function useNavItemsContext(): NavItemsContextValue {
-  return useContext(NavItemsContext);
-}
+'use client';
+
+import { createContext, useContext } from 'react';
+import type { NavItemConfig } from './subcomponents/NavItems';
+
+interface NavItemsContextValue {
+  navItems: NavItemConfig[];
+  setNavItems: (items: NavItemConfig[]) => void;
+  mobileVariant: 'sheet' | 'tabs';
+}
+
+export const NavItemsContext = createContext<NavItemsContextValue>({
+  navItems: [],
+  setNavItems: () => {},
+  mobileVariant: 'sheet',
+});
+
+export function useNavItemsContext(): NavItemsContextValue {
+  return useContext(NavItemsContext);
+}

package/src/components/navigation/ProjectSelectorPopover.tsx

@@ -1,160 +1,194 @@
-'use client';
-
-import { Dispatch, RefObject, SetStateAction } from 'react';
-import { ADDON_IDS } from '../../modules/subscriptions/constants/addons.constants';
-import { useHasPlanAddon } from '../../modules/plans/hooks/use-has-plan-addon.hook';
-import {
-  Button,
-  Command,
-  CommandEmpty,
-  CommandInput,
-  CommandItem,
-  CommandList,
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-  UserAvatar,
-} from '../../index';
-import { IconCheck, IconChevronDown, IconFolderOpen, IconPlus } from '@tabler/icons-react';
-import type { NavigationProject } from './types';
-
-interface ProjectSelectorPopoverProps {
-  open: boolean;
-  setOpen: Dispatch<SetStateAction<boolean>>;
-  titleRef?: RefObject<HTMLSpanElement | null>;
-  projects: NavigationProject[];
-  selectedProject: NavigationProject | null;
-  onSelectProject: (project: NavigationProject) => void;
-  onAddProject?: () => void;
-  onManageProjects?: () => void;
-  children?: React.ReactNode;
-}
-
-function ProjectItemSkeleton() {
-  return (
-    <div className="flex items-center justify-between px-2 py-1.5 gap-2">
-      <div className="flex items-center gap-2 flex-1">
-        <div className="skeleton size-8 rounded-lg shrink-0" />
-        <div className="skeleton h-3.5 w-32 rounded" />
-      </div>
-      <div className="skeleton size-4 rounded-full shrink-0" />
-    </div>
-  );
-}
-
-export function ProjectSelectorPopover({
-  open,
-  setOpen,
-  titleRef,
-  projects,
-  selectedProject,
-  onSelectProject,
-  onAddProject,
-  onManageProjects,
-  children,
-}: ProjectSelectorPopoverProps) {
-  const { hasAddon: canAddProject } = useHasPlanAddon(ADDON_IDS.PROJECTS);
-
-  return (
-    <Popover open={open} onOpenChange={setOpen}>
-      <PopoverTrigger asChild>
-        {children ?? (
-          <button className="cursor-pointer">
-            <IconChevronDown
-              size={20}
-              className={`transition-transform duration-200 ${open ? 'rotate-180 text-gray-950' : 'text-gray-400'}`}
-            />
-          </button>
-        )}
-      </PopoverTrigger>
-      <PopoverContent
-        className="w-[296px] p-0 bg-white rounded-2xl shadow-md border border-gray-200"
-        align="start"
-        sideOffset={8}
-        onOpenAutoFocus={(e: Event) => e.preventDefault()}
-        onInteractOutside={(event: Event) => {
-          if (titleRef?.current?.contains(event.target as Node)) {
-            event.preventDefault();
-          }
-        }}
-      >
-        <div className="flex flex-col p-3 gap-2">
-          <div className="flex items-center justify-between">
-            <span className="paragraph-small-semibold">Projetos</span>
-            {(onAddProject || onManageProjects) && (
-              <div className="flex items-center gap-1.5">
-                {canAddProject && onAddProject && (
-                  <Button
-                    variant="secondary"
-                    className="h-8! paragraph-small-semibold text-gray-950"
-                    onClick={onAddProject}
-                  >
-                    <IconPlus size={16} />
-                    Adicionar
-                  </Button>
-                )}
-              </div>
-            )}
-          </div>
-          <Command className="gap-2">
-            <CommandInput placeholder="Busque aqui" />
-            <CommandList className="custom-scrollbar paragraph-small-medium text-gray-600 h-[162px]">
-              {projects.length === 0 ? (
-                <div className="flex flex-col items-center justify-center gap-2 h-full text-gray-400 py-4">
-                  <IconFolderOpen size={28} className="text-gray-300" />
-                  <span className="paragraph-small-medium text-center text-gray-500">
-                    Nenhum projeto encontrado.
-                    <br />
-                    Crie um projeto para começar.
-                  </span>
-                </div>
-              ) : (
-                <>
-                  <CommandEmpty>Nenhum resultado encontrado.</CommandEmpty>
-                  {projects.map((project) => {
-                    const isSelected = selectedProject?.id === project.id;
-                    return (
-                      <CommandItem
-                        key={project.id}
-                        value={`${project.title}-${project.id}`}
-                        keywords={[project.title]}
-                        className={isSelected ? 'bg-gray-50' : ''}
-                        onSelect={() => onSelectProject(project)}
-                      >
-                        <div className="flex items-center justify-between w-full cursor-pointer">
-                          <div className="flex items-center gap-2 w-full">
-                            <UserAvatar
-                              photo={project.photo}
-                              name={project.title}
-                              size={32}
-                            />
-                            {project.title}
-                          </div>
-                          {isSelected && (
-                            <IconCheck className="size-4 text-gray-950" />
-                          )}
-                        </div>
-                      </CommandItem>
-                    );
-                  })}
-                </>
-              )}
-            </CommandList>
-          </Command>
-          {onManageProjects && (
-            <>
-              <div className="border-t border-gray-200" />
-              <Button
-                variant="ghost"
-                className="h-10! paragraph-small-medium text-gray-600 hover:text-gray-950 hover:bg-zinc-50 w-full justify-center"
-                onClick={onManageProjects}
-              >
-                Gerenciar projetos
-              </Button>
-            </>
-          )}
-        </div>
-      </PopoverContent>
-    </Popover>
-  );
-}
+'use client';
+
+import { Dispatch, RefObject, SetStateAction, UIEvent, useCallback } from 'react';
+import { ADDON_IDS } from '../../modules/subscriptions/constants/addons.constants';
+import { useHasPlanAddon } from '../../modules/plans/hooks/use-has-plan-addon.hook';
+import {
+  Button,
+  Command,
+  CommandEmpty,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+  UserAvatar,
+} from '../../index';
+import { IconCheck, IconChevronDown, IconFolderOpen, IconPlus } from '@tabler/icons-react';
+import type { NavigationProject } from './types';
+
+interface ProjectSelectorPopoverProps {
+  open: boolean;
+  setOpen: Dispatch<SetStateAction<boolean>>;
+  titleRef?: RefObject<HTMLSpanElement | null>;
+  projects: NavigationProject[];
+  selectedProject: NavigationProject | null;
+  isLoading?: boolean;
+  isFetchingNextPage?: boolean;
+  hasNextPage?: boolean;
+  onLoadMore?: () => void | Promise<unknown>;
+  onSelectProject: (project: NavigationProject) => void;
+  onAddProject?: () => void;
+  onManageProjects?: () => void;
+  children?: React.ReactNode;
+}
+
+function ProjectItemSkeleton() {
+  return (
+    <div className="flex items-center justify-between px-2 py-2 gap-2">
+      <div className="flex items-center gap-2 flex-1">
+        <div className="skeleton size-9 rounded-lg shrink-0" />
+        <div className="skeleton h-4 w-36 rounded" />
+      </div>
+      <div className="skeleton size-4 rounded-full shrink-0" />
+    </div>
+  );
+}
+
+export function ProjectSelectorPopover({
+  open,
+  setOpen,
+  titleRef,
+  projects,
+  selectedProject,
+  isLoading,
+  isFetchingNextPage,
+  hasNextPage,
+  onLoadMore,
+  onSelectProject,
+  onAddProject,
+  onManageProjects,
+  children,
+}: ProjectSelectorPopoverProps) {
+  const { hasAddon: canAddProject } = useHasPlanAddon(ADDON_IDS.PROJECTS);
+  const handleListScroll = useCallback((event: UIEvent<HTMLDivElement>) => {
+    if (!hasNextPage || isFetchingNextPage || !onLoadMore) return;
+
+    const target = event.currentTarget;
+    const distanceToBottom = target.scrollHeight - target.scrollTop - target.clientHeight;
+
+    if (distanceToBottom <= 80) {
+      onLoadMore();
+    }
+  }, [hasNextPage, isFetchingNextPage, onLoadMore]);
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        {children ?? (
+          <button className="cursor-pointer">
+            <IconChevronDown
+              size={20}
+              className={`transition-transform duration-200 ${open ? 'rotate-180 text-gray-950' : 'text-gray-400'}`}
+            />
+          </button>
+        )}
+      </PopoverTrigger>
+      <PopoverContent
+        className="w-[296px] p-0 bg-white rounded-2xl shadow-md border border-gray-200"
+        align="start"
+        sideOffset={8}
+        onOpenAutoFocus={(e: Event) => e.preventDefault()}
+        onInteractOutside={(event: Event) => {
+          if (titleRef?.current?.contains(event.target as Node)) {
+            event.preventDefault();
+          }
+        }}
+      >
+        <div className="flex flex-col p-3 gap-2">
+          <div className="flex items-center justify-between">
+            <span className="paragraph-small-semibold">Projetos</span>
+            {(onAddProject || onManageProjects) && (
+              <div className="flex items-center gap-1.5">
+                {canAddProject && onAddProject && (
+                  <Button
+                    variant="secondary"
+                    className="h-8! paragraph-small-semibold text-gray-950"
+                    onClick={onAddProject}
+                  >
+                    <IconPlus size={16} />
+                    Adicionar
+                  </Button>
+                )}
+              </div>
+            )}
+          </div>
+          <Command className="gap-2">
+            <CommandInput placeholder="Busque aqui" />
+            <CommandList
+              className="custom-scrollbar paragraph-small-medium text-gray-600 h-[227px]"
+              onScroll={handleListScroll}
+            >
+              {isLoading ? (
+                <>
+                  <ProjectItemSkeleton />
+                  <ProjectItemSkeleton />
+                  <ProjectItemSkeleton />
+                  <ProjectItemSkeleton />
+                </>
+              ) : projects.length === 0 ? (
+                <div className="flex flex-col items-center justify-center gap-2 h-full text-gray-400 py-4">
+                  <IconFolderOpen size={28} className="text-gray-300" />
+                  <span className="paragraph-small-medium text-center text-gray-500">
+                    Nenhum projeto encontrado.
+                    <br />
+                    Crie um projeto para começar.
+                  </span>
+                </div>
+              ) : (
+                <>
+                  <CommandEmpty>Nenhum resultado encontrado.</CommandEmpty>
+                  {projects.map((project) => {
+                    const isSelected = selectedProject?.id === project.id;
+                    return (
+                      <CommandItem
+                        key={project.id}
+                        value={`${project.title}-${project.id}`}
+                        keywords={[project.title]}
+                        className={isSelected ? 'bg-gray-50 min-h-[39px]' : 'min-h-[39px]'}
+                        onSelect={() => onSelectProject(project)}
+                      >
+                        <div className="flex items-center justify-between w-full cursor-pointer">
+                          <div className="flex items-center gap-2 w-full">
+                            <UserAvatar
+                              photo={project.photo}
+                              name={project.title}
+                              size={36}
+                            />
+                            {project.title}
+                          </div>
+                          {isSelected && (
+                            <IconCheck className="size-4 text-gray-950" />
+                          )}
+                        </div>
+                      </CommandItem>
+                    );
+                  })}
+                  {isFetchingNextPage && (
+                    <>
+                      <ProjectItemSkeleton />
+                      <ProjectItemSkeleton />
+                    </>
+                  )}
+                </>
+              )}
+            </CommandList>
+          </Command>
+          {onManageProjects && (
+            <>
+              <div className="border-t border-gray-200" />
+              <Button
+                variant="ghost"
+                className="h-10! paragraph-small-medium text-gray-600 hover:text-gray-950 hover:bg-zinc-50 w-full justify-center"
+                onClick={onManageProjects}
+              >
+                Gerenciar projetos
+              </Button>
+            </>
+          )}
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+}