@greatapps/common 1.1.789 → 1.1.791

package/src/components/ui/overlay/Sheet.tsx

@@ -5,16 +5,41 @@ import * as SheetPrimitive from "@radix-ui/react-dialog";
 import { IconX } from '@tabler/icons-react';
 import { cn } from "../../../infra/utils/clsx";
 import { hideCrisp, showCrisp } from "../../embeds/CrispEmbed";
-import { OverlayLayerContext, useDialogLayer, useOverlayLayer } from "./layers";
+import {
+  OverlayLayerContext,
+  OverlayTopContext,
+  useDialogLayer,
+  useIsTopOverlay,
+  useOverlayPosition,
+  useTopLayerScrollIsolation,
+} from "./layers";
 
-function Sheet({ onOpenChange, modal = false, ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {
-  const handleOpenChange = React.useCallback((open: boolean) => {
-    if (open) hideCrisp();
+/** `modal` ligado por padrão: drawer segura o foco e o fundo enquanto está aberto. */
+function Sheet({ open, defaultOpen, onOpenChange, modal = true, ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {
+  const [openState, setOpenState] = React.useState(defaultOpen ?? false);
+  const { layer, isTop } = useOverlayPosition(open ?? openState);
+
+  const handleOpenChange = React.useCallback((next: boolean) => {
+    if (next) hideCrisp();
     else showCrisp();
-    onOpenChange?.(open);
+    setOpenState(next);
+    onOpenChange?.(next);
   }, [onOpenChange]);
 
-  return <SheetPrimitive.Root data-slot="sheet" modal={modal} onOpenChange={handleOpenChange} {...props} />;
+  return (
+    <OverlayLayerContext.Provider value={layer}>
+      <OverlayTopContext.Provider value={isTop}>
+      <SheetPrimitive.Root
+        data-slot="sheet"
+        modal={modal}
+        open={open}
+        defaultOpen={defaultOpen}
+        onOpenChange={handleOpenChange}
+        {...props}
+      />
+      </OverlayTopContext.Provider>
+    </OverlayLayerContext.Provider>
+  );
 }
 
 function SheetTrigger({
@@ -44,12 +69,15 @@ function SheetOverlay({
     <SheetPrimitive.Close tabIndex={-1} asChild>
       <div
         data-slot="sheet-overlay"
+        {...props}
         className={cn(
-          "animate-in fade-in-0 fixed inset-0 bg-black/50 cursor-default",
+          // `pointer-events-auto` explícito: este overlay é um div nosso, e quando o sheet abre
+          // por cima de um dialog o Radix trava `pointer-events: none` no body — sem isto ele
+          // herdaria o bloqueio, viraria só cor e os cliques atravessariam para o que está atrás.
+          "animate-in fade-in-0 fixed inset-0 bg-black/50 cursor-default pointer-events-auto",
           layer.overlay,
           className,
         )}
-        {...props}
       />
     </SheetPrimitive.Close>
   );
@@ -61,62 +89,67 @@ function SheetContent({
   side = "right",
   showCloseButton = true,
   noAnimation = false,
+  ref,
   ...props
-}: React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content> & {
+}: React.ComponentProps<typeof SheetPrimitive.Content> & {
   side?: "top" | "right" | "bottom" | "left";
   showCloseButton?: boolean;
   noAnimation?: boolean;
 }) {
-  const { layer, presenceRef } = useOverlayLayer();
+  const layer = useDialogLayer();
+  const contentRef = React.useRef<HTMLDivElement>(null);
+  useTopLayerScrollIsolation(contentRef, useIsTopOverlay());
   return (
-    <OverlayLayerContext.Provider value={layer}>
-      <SheetPortal>
-        <SheetOverlay className={noAnimation ? "!animate-none" : undefined} />
-        <SheetPrimitive.Content
-          ref={presenceRef}
-          data-slot="sheet-content"
-          onInteractOutside={(e) => e.preventDefault()}
-          onPointerDownOutside={(e) => e.preventDefault()}
-          className={cn(
-            "bg-background fixed flex flex-col gap-4 shadow-lg",
-            layer.content,
-            !noAnimation &&
-              "data-[state=open]:animate-in data-[state=closed]:animate-out transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
-            !noAnimation &&
-              side === "right" &&
-              "data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right",
-            !noAnimation &&
-              side === "left" &&
-              "data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left",
-            !noAnimation &&
-              side === "top" &&
-              "data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
-            !noAnimation &&
-              side === "bottom" &&
-              "data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
+    <SheetPortal>
+      <SheetOverlay className={noAnimation ? "!animate-none" : undefined} />
+      <SheetPrimitive.Content
+        data-slot="sheet-content"
+        ref={(node) => {
+          contentRef.current = node;
+          if (typeof ref === "function") ref(node);
+          else if (ref) ref.current = node;
+        }}
+        onInteractOutside={(e) => e.preventDefault()}
+        onPointerDownOutside={(e) => e.preventDefault()}
+        className={cn(
+          "bg-background fixed flex flex-col gap-4 shadow-lg",
+          layer.content,
+          !noAnimation &&
+            "data-[state=open]:animate-in data-[state=closed]:animate-out transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
+          !noAnimation &&
             side === "right" &&
-              "inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm",
+            "data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right",
+          !noAnimation &&
             side === "left" &&
-              "inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm",
-            side === "top" && "inset-x-0 top-0 h-auto border-b",
-            side === "bottom" && "inset-x-0 bottom-0 h-auto border-t",
-            className,
-          )}
-          {...props}
-        >
-          {children}
-          {showCloseButton && (
-            <SheetPrimitive.Close
-              data-slot="sheet-close"
-              className="absolute top-3 right-3 hover:cursor-pointer flex size-8 items-center justify-center rounded-lg p-2 text-gray-500 transition-colors hover:bg-gray-100 hover:text-gray-950 focus:outline-none"
-            >
-              <IconX className="size-[18px]" />
-              <span className="sr-only">Close</span>
-            </SheetPrimitive.Close>
-          )}
-        </SheetPrimitive.Content>
-      </SheetPortal>
-    </OverlayLayerContext.Provider>
+            "data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left",
+          !noAnimation &&
+            side === "top" &&
+            "data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
+          !noAnimation &&
+            side === "bottom" &&
+            "data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
+          side === "right" &&
+            "inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm",
+          side === "left" &&
+            "inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm",
+          side === "top" && "inset-x-0 top-0 h-auto border-b",
+          side === "bottom" && "inset-x-0 bottom-0 h-auto border-t",
+          className,
+        )}
+        {...props}
+      >
+        {children}
+        {showCloseButton && (
+          <SheetPrimitive.Close
+            data-slot="sheet-close"
+            className="absolute top-3 right-3 hover:cursor-pointer flex size-8 items-center justify-center rounded-lg p-2 text-gray-500 transition-colors hover:bg-gray-100 hover:text-gray-950 focus:outline-none"
+          >
+            <IconX className="size-[18px]" />
+            <span className="sr-only">Close</span>
+          </SheetPrimitive.Close>
+        )}
+      </SheetPrimitive.Content>
+    </SheetPortal>
   );
 }
 

package/src/components/ui/overlay/layers.tsx

@@ -21,41 +21,74 @@ const openOverlays = new Set<object>();
 const overlayListeners = new Set<() => void>();
 let saturationWarned = false;
 
-function subscribeOverlays(onStoreChange: () => void) {
-  overlayListeners.add(onStoreChange);
-  return () => {
-    overlayListeners.delete(onStoreChange);
-  };
+function notifyOverlays() {
+  overlayListeners.forEach((listener) => listener());
+}
+
+function warnOnSaturation() {
+  if (process.env.NODE_ENV === "production" || saturationWarned || openOverlays.size <= OVERLAY_LAYERS.length) return;
+  saturationWarned = true;
+  console.warn(
+    `[great-lib-common] ${openOverlays.size} overlays visiveis, mas a escala de z so tem ${OVERLAY_LAYERS.length} faixas. ` +
+      `Deste nivel em diante todos dividem a ultima faixa e o overlay de cima cai sob o conteudo de baixo. ` +
+      `Se o empilhamento for legitimo, adicione uma faixa em ui/overlay/layers.tsx.`,
+  );
 }
 
 export const OverlayLayerContext = React.createContext<DialogLayerClasses>(ROOT_LAYER);
 
-export function useOverlayLayer() {
-  const token = React.useRef({});
-  const rank = React.useSyncExternalStore(
-    subscribeOverlays,
-    () => Math.max(Array.from(openOverlays).indexOf(token.current), 0),
-    () => 0,
-  );
+/** Se a camada em volta é a do topo da pilha (ver `useTopLayerScrollIsolation`). */
+export const OverlayTopContext = React.createContext<boolean>(true);
+
+export function useIsTopOverlay(): boolean {
+  return React.useContext(OverlayTopContext);
+}
+
+type OverlayPosition = { layer: DialogLayerClasses; isTop: boolean };
+
+function readPosition(token: object): { rank: number; isTop: boolean } {
+  const tokens = Array.from(openOverlays);
+  const index = tokens.indexOf(token);
+  return { rank: Math.max(index, 0), isTop: index === tokens.length - 1 };
+}
+
+/**
+ * Faixa de z do overlay e se ele é o de cima da pilha.
+ *
+ * O `isTop` existe por causa do bloqueio de scroll: o Radix cancela wheel e touchmove de tudo
+ * que não seja filho do conteúdo dele, e cada overlay vive no próprio portal. Com dois modais
+ * ativos, o de baixo cancelaria a rolagem do de cima — então quem não está no topo deixa de ser
+ * modal enquanto houver alguém acima.
+ */
+export function useOverlayPosition(open: boolean): OverlayPosition {
+  const [position, setPosition] = React.useState({ rank: 0, isTop: true });
+
+  React.useLayoutEffect(() => {
+    if (!open) return;
+
+    const token = {};
+    const sync = () => setPosition(readPosition(token));
+
+    overlayListeners.add(sync);
+    openOverlays.add(token);
+    notifyOverlays();
+    warnOnSaturation();
 
-  const presenceRef = React.useCallback(() => {
-    openOverlays.add(token.current);
-    overlayListeners.forEach((notify) => notify());
-    if (process.env.NODE_ENV !== "production" && openOverlays.size > OVERLAY_LAYERS.length && !saturationWarned) {
-      saturationWarned = true;
-      console.warn(
-        `[great-lib-common] ${openOverlays.size} overlays visiveis, mas a escala de z so tem ${OVERLAY_LAYERS.length} faixas. ` +
-          `Deste nivel em diante todos dividem a ultima faixa e o overlay de cima cai sob o conteudo de baixo. ` +
-          `Se o empilhamento for legitimo, adicione uma faixa em ui/overlay/layers.tsx.`,
-      );
-    }
     return () => {
-      openOverlays.delete(token.current);
-      overlayListeners.forEach((notify) => notify());
+      overlayListeners.delete(sync);
+      openOverlays.delete(token);
+      notifyOverlays();
     };
-  }, []);
+  }, [open]);
 
-  return { layer: OVERLAY_LAYERS[Math.min(rank, OVERLAY_LAYERS.length - 1)], presenceRef };
+  return {
+    layer: OVERLAY_LAYERS[Math.min(position.rank, OVERLAY_LAYERS.length - 1)],
+    isTop: position.isTop,
+  };
+}
+
+export function useOverlayLayer(open: boolean): DialogLayerClasses {
+  return useOverlayPosition(open).layer;
 }
 
 export function useDialogLayer(): DialogLayerClasses {
@@ -65,3 +98,57 @@ export function useDialogLayer(): DialogLayerClasses {
 export function DialogLayer({ children }: { children: React.ReactNode }) {
   return children;
 }
+
+/**
+ * Isola a rolagem desta camada do bloqueio de scroll das camadas de baixo.
+ *
+ * O bloqueio do Radix escuta wheel e touchmove no document e cancela tudo que não seja filho do
+ * conteúdo dele. Cada overlay vive no próprio portal, então o modal de baixo cancelava a rolagem
+ * do drawer de cima — e de um jeito traiçoeiro: evento avulso passava, rajada de trackpad era
+ * cancelada inteira. Parar a propagação na captura impede que aquele ouvinte chegue a ver o
+ * evento, e o navegador rola normalmente.
+ *
+ * O custo é que `onWheel`/`onTouchMove` de React dentro desta camada deixam de receber esses dois
+ * eventos — nada na lib depende disso (listas paginam por `scroll` e por sentinela).
+ */
+/** Portais de conteúdo flutuante do Radix que acompanham a camada aberta. */
+const FLOATING_CONTENT_SELECTOR = [
+  "[data-radix-popper-content-wrapper]",
+  "[data-radix-menu-content]",
+  '[data-slot="select-content"]',
+  '[data-slot="popover-content"]',
+  '[data-slot="dropdown-menu-content"]',
+  '[data-slot="command-list"]',
+  '[role="listbox"]',
+  '[role="menu"]',
+].join(",");
+
+export function useTopLayerScrollIsolation(
+  ref: React.RefObject<HTMLElement | null>,
+  enabled: boolean,
+) {
+  React.useEffect(() => {
+    if (!enabled) return;
+
+    const stopForThisLayer = (event: Event) => {
+      const target = event.target as Node | null;
+      if (!target) return;
+
+      // Conteúdo flutuante (select, popover, menu) abre em portal próprio, fora do conteúdo da
+      // camada, mas pertence a ela — sem isto, lista longa de select dentro do modal não rolava.
+      const isFloatingContent =
+        target instanceof Element && target.closest(FLOATING_CONTENT_SELECTOR) !== null;
+
+      if (isFloatingContent || ref.current?.contains(target)) event.stopPropagation();
+    };
+
+    const options = { capture: true } as const;
+    document.addEventListener("wheel", stopForThisLayer, options);
+    document.addEventListener("touchmove", stopForThisLayer, options);
+
+    return () => {
+      document.removeEventListener("wheel", stopForThisLayer, options);
+      document.removeEventListener("touchmove", stopForThisLayer, options);
+    };
+  }, [ref, enabled]);
+}

package/src/enums/AccountHubFlow.ts

@@ -0,0 +1,8 @@
+export enum AccountHubFlow {
+  PLANS = 'plans',
+  ADDONS = 'addons',
+  REACTIVATE = 'reactivate',
+  RECEIPT = 'receipt',
+  CREATE_PROJECT = 'create-project',
+  ADD_USER = 'add-user',
+}

package/src/enums/DateFilterPeriod.ts

@@ -0,0 +1,17 @@
+export enum DateFilterPeriod {
+  TODAY = 'TODAY',
+  YESTERDAY = 'YESTERDAY',
+  LAST_7_DAYS = 'LAST_7_DAYS',
+  LAST_30_DAYS = 'LAST_30_DAYS',
+  LAST_MONTH = 'LAST_MONTH',
+  ALL_TIME = 'ALL_TIME',
+}
+
+export const DATE_FILTER_PERIODS = [
+  DateFilterPeriod.TODAY,
+  DateFilterPeriod.YESTERDAY,
+  DateFilterPeriod.LAST_7_DAYS,
+  DateFilterPeriod.LAST_30_DAYS,
+  DateFilterPeriod.LAST_MONTH,
+  DateFilterPeriod.ALL_TIME,
+] as const;

package/src/enums/WorkspaceSectionType.ts

@@ -0,0 +1,6 @@
+export enum WorkspaceSectionType {
+  SUBSCRIPTION = 'subscription',
+  PROJECTS = 'projects',
+  TEAM = 'team',
+  AFFILIATES = 'affiliates',
+}

package/src/handlers.ts

@@ -19,8 +19,22 @@ export { createListProjectUsersHandler } from './modules/projects/handlers/list-
 export { createListAvailableUsersHandler } from './modules/projects/handlers/list-available-users.handler';
 export { createListAllAccountUsersHandler } from './modules/projects/handlers/list-all-account-users.handler';
 
+export { createListAccountMembersHandler } from './modules/accounts/handlers/list-account-members.handler';
+
 export { createListSubscriptionsHandler } from './modules/subscriptions/handlers/list-subscriptions.handler';
 export { createCurrentSubscriptionHandler } from './modules/subscriptions/handlers/current-subscription.handler';
 export { createFreezeNoticeHandler } from './modules/subscriptions/handlers/freeze-notice.handler';
 
 export { createListMessagesHandler } from './modules/users/handlers/list-messages.handler';
+
+export { createCurrentAffiliateHandler } from './modules/affiliates/handlers/current-affiliate.handler';
+export { createAffiliateReportAnalyticsHandler } from './modules/affiliates/handlers/affiliate-report-analytics.handler';
+export { createListAffiliateTransactionsHandler } from './modules/affiliates/handlers/list-affiliate-transactions.handler';
+export { createListAffiliateCouponsHandler } from './modules/affiliates/handlers/list-affiliate-coupons.handler';
+export { createListAffiliateLeadsHandler } from './modules/affiliates/handlers/list-affiliate-leads.handler';
+export { createAffiliateWithdrawalLimitsHandler } from './modules/affiliates/handlers/affiliate-withdrawal-limits.handler';
+export { createPendingPixStatusHandler } from './modules/subscriptions/handlers/pending-pix-status.handler';
+export { createListIaCreditOperationsHandler } from './modules/ia-credits/handlers/list-ia-credit-operations.handler';
+export { createFindCouponByIdHandler } from './modules/coupons/handlers/find-coupon-by-id.handler';
+export { createFindCouponByCodeHandler } from './modules/coupons/handlers/find-coupon-by-code.handler';
+export { createCountDomainsHandler } from './modules/domains/handlers/count-domains.handler';

package/src/hooks/useDebounce.ts

@@ -1,6 +1,6 @@
 'use client';
 
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 
 /**
  * Hook para aplicar debounce em valores
@@ -10,17 +10,19 @@ import { useEffect, useState } from 'react';
  */
 export function useDebounce<T>(value: T, delay: number = 400, onDebounce?: () => void): T {
   const [debouncedValue, setDebouncedValue] = useState<T>(value);
+  const onDebounceRef = useRef(onDebounce);
+  onDebounceRef.current = onDebounce;
 
   useEffect(() => {
     const handler = setTimeout(() => {
       setDebouncedValue(value);
-      onDebounce?.();
+      onDebounceRef.current?.();
     }, delay);
 
     return () => {
       clearTimeout(handler);
     };
-  }, [value, delay, onDebounce]);
+  }, [value, delay]);
 
   return debouncedValue;
 }

package/src/hooks/useUploadProgress.ts

@@ -0,0 +1,42 @@
+'use client';
+
+import { useCallback, useEffect, useState } from 'react';
+
+interface UseUploadProgressOptions {
+  interval?: number;
+  increment?: number;
+  onComplete?: () => void;
+}
+
+/** Progresso simulado de upload — o anexo já está em memória, a barra só dá o retorno visual. */
+export function useUploadProgress({
+  interval = 80,
+  increment = 10,
+  onComplete,
+}: UseUploadProgressOptions = {}) {
+  const [progress, setProgress] = useState(0);
+  const [isComplete, setIsComplete] = useState(false);
+
+  useEffect(() => {
+    const timer = setInterval(() => {
+      setProgress((previous) => {
+        if (previous >= 100) {
+          clearInterval(timer);
+          setIsComplete(true);
+          onComplete?.();
+          return 100;
+        }
+        return previous + increment;
+      });
+    }, interval);
+
+    return () => clearInterval(timer);
+  }, [interval, increment, onComplete]);
+
+  const reset = useCallback(() => {
+    setProgress(0);
+    setIsComplete(false);
+  }, []);
+
+  return { progress, isComplete, reset };
+}