@greatapps/common 1.1.375 → 1.1.376

package/src/components/pages/notifications/Notifications.tsx

@@ -1,160 +1,160 @@
-'use client';
-
-import { IconBell, IconCheck, IconLoader2 } from '@tabler/icons-react';
-import { Button } from "../../ui/buttons/Button";
-import {
-  Tabs,
-  TabsContent,
-  TabsList,
-  TabsTrigger,
-} from "../../ui/data-display/Tabs";
-import { useInfiniteMessages, useMarkAllMessagesAsRead } from "../../../modules/users/hooks/messages.hook";
-import NotificationCard from "../../widgets/notifications/NotificationCard";
-import { Toast } from "../../ui/feedback/Toast";
-import { formatDistanceToNow } from "date-fns";
-import { ptBR } from "date-fns/locale";
-import { toast } from "sonner";
-import React from "react";
-
-function NotificationsList({
-  pages,
-  isFetchingNextPage,
-  hasNextPage,
-  fetchNextPage,
-}: {
-  pages: ReturnType<typeof useInfiniteMessages>["data"];
-  isFetchingNextPage: boolean;
-  hasNextPage: boolean;
-  fetchNextPage: () => void;
-}) {
-  const notifications = pages?.pages.flatMap((p) => p.data) ?? [];
-
-  const handleScroll = (e: React.UIEvent<HTMLDivElement>) => {
-    const target = e.currentTarget;
-    const nearBottom =
-      target.scrollTop + target.clientHeight >= target.scrollHeight - 50;
-    if (!nearBottom) return;
-    if (hasNextPage && !isFetchingNextPage) {
-      fetchNextPage();
-    }
-  };
-
-  return (
-    <div
-      className="flex flex-col border border-gray-200 rounded-lg w-full bg-white max-h-[70vh] overflow-y-auto custom-scrollbar"
-      onScroll={handleScroll}
-    >
-      {notifications.map((notification, index) => (
-        <NotificationCard
-          key={notification.id}
-          icon={<IconBell size={20} className="text-pages-600" />}
-          iconBgColor="bg-cyan-100"
-          title={notification.subject}
-          description={notification.message}
-          gapPx={8}
-          time={formatDistanceToNow(new Date(notification.datetime_add), {
-            addSuffix: true,
-            locale: ptBR,
-          })}
-          isUnread={notification.status === 1}
-          showBorder={index < notifications.length - 1}
-        />
-      ))}
-      {isFetchingNextPage && (
-        <div className="flex items-center justify-center py-4">
-          <IconLoader2 size={20} className="animate-spin text-gray-400" />
-        </div>
-      )}
-    </div>
-  );
-}
-
-export function NotificationPageContent() {
-  const unreadNotifications = useInfiniteMessages({
-    readed: false,
-    type: "notification",
-    order: "desc",
-  });
-  const allNotifications = useInfiniteMessages({
-    type: "notification",
-    order: "desc",
-  });
-
-  const totalAll = allNotifications.data?.pages[0]?.total ?? 0;
-  const totalUnread = unreadNotifications.data?.pages[0]?.total ?? 0;
-
-  const { mutate: markAllAsRead, isPending: isMarkingAll } = useMarkAllMessagesAsRead();
-
-  const handleMarkAllAsRead = () => {
-    markAllAsRead(undefined, {
-      onSuccess: () => {
-        toast.custom((t) => (
-          <Toast variant="success" message="Todas as notificações foram marcadas como lidas" toastId={t} />
-        ));
-      },
-      onError: () => {
-        toast.custom((t) => (
-          <Toast variant="error" message="Erro ao marcar notificações como lidas" toastId={t} />
-        ));
-      },
-    });
-  };
-
-  return (
-    <div className="flex flex-col gap-6 lg:gap-8">
-      <div className="flex items-center justify-between gap-4">
-        <div className="flex flex-col gap-2">
-          <h1 className="title-large-semibold text-gray-950">
-            Notificações
-          </h1>
-          <p className="paragraph-small-regular text-gray-600 hidden lg:block">
-            Tenha controle total sobre páginas, experiências e conversões.
-          </p>
-        </div>
-        <Button
-          variant={"secondary"}
-          className="h-10! lg:h-12! shrink-0"
-          onClick={handleMarkAllAsRead}
-          disabled={isMarkingAll || totalUnread === 0}
-        >
-          {isMarkingAll ? <IconLoader2 size={20} className="animate-spin" /> : <IconCheck size={20} />}
-          <span className="lg:block hidden">Marcar todos como lidos</span>
-          <span className="lg:hidden">Marcar como lidos</span>
-        </Button>
-      </div>
-      <Tabs
-        defaultValue="all"
-        className="flex flex-col w-full bg-transparent gap-6 lg:gap-8"
-      >
-        <TabsList className="h-auto pb-0 bg-transparent">
-          <TabsTrigger className="gap-2" value="all">
-            Todas as notificações{" "}
-            <span className="text-gray-500">({totalAll})</span>
-          </TabsTrigger>
-          <TabsTrigger className="gap-2" value="unreads" disabled={totalUnread === 0}>
-            Não lidas{" "}
-            <span className="text-gray-500">({totalUnread})</span>
-          </TabsTrigger>
-        </TabsList>
-
-        <TabsContent value="all">
-          <NotificationsList
-            pages={allNotifications.data}
-            isFetchingNextPage={allNotifications.isFetchingNextPage}
-            hasNextPage={allNotifications.hasNextPage}
-            fetchNextPage={allNotifications.fetchNextPage}
-          />
-        </TabsContent>
-
-        <TabsContent value="unreads">
-          <NotificationsList
-            pages={unreadNotifications.data}
-            isFetchingNextPage={unreadNotifications.isFetchingNextPage}
-            hasNextPage={unreadNotifications.hasNextPage}
-            fetchNextPage={unreadNotifications.fetchNextPage}
-          />
-        </TabsContent>
-      </Tabs>
-    </div>
-  );
-}
+'use client';
+
+import { IconBell, IconCheck, IconLoader2 } from '@tabler/icons-react';
+import { Button } from "../../ui/buttons/Button";
+import {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from "../../ui/data-display/Tabs";
+import { useInfiniteMessages, useMarkAllMessagesAsRead } from "../../../modules/users/hooks/messages.hook";
+import NotificationCard from "../../widgets/notifications/NotificationCard";
+import { Toast } from "../../ui/feedback/Toast";
+import { formatDistanceToNow } from "date-fns";
+import { ptBR } from "date-fns/locale";
+import { toast } from "sonner";
+import React from "react";
+
+function NotificationsList({
+  pages,
+  isFetchingNextPage,
+  hasNextPage,
+  fetchNextPage,
+}: {
+  pages: ReturnType<typeof useInfiniteMessages>["data"];
+  isFetchingNextPage: boolean;
+  hasNextPage: boolean;
+  fetchNextPage: () => void;
+}) {
+  const notifications = pages?.pages.flatMap((p) => p.data) ?? [];
+
+  const handleScroll = (e: React.UIEvent<HTMLDivElement>) => {
+    const target = e.currentTarget;
+    const nearBottom =
+      target.scrollTop + target.clientHeight >= target.scrollHeight - 50;
+    if (!nearBottom) return;
+    if (hasNextPage && !isFetchingNextPage) {
+      fetchNextPage();
+    }
+  };
+
+  return (
+    <div
+      className="flex flex-col border border-gray-200 rounded-lg w-full bg-white max-h-[70vh] overflow-y-auto custom-scrollbar"
+      onScroll={handleScroll}
+    >
+      {notifications.map((notification, index) => (
+        <NotificationCard
+          key={notification.id}
+          icon={<IconBell size={20} className="text-pages-600" />}
+          iconBgColor="bg-cyan-100"
+          title={notification.subject}
+          description={notification.message}
+          gapPx={8}
+          time={formatDistanceToNow(new Date(notification.datetime_add), {
+            addSuffix: true,
+            locale: ptBR,
+          })}
+          isUnread={notification.status === 1}
+          showBorder={index < notifications.length - 1}
+        />
+      ))}
+      {isFetchingNextPage && (
+        <div className="flex items-center justify-center py-4">
+          <IconLoader2 size={20} className="animate-spin text-gray-400" />
+        </div>
+      )}
+    </div>
+  );
+}
+
+export function NotificationPageContent() {
+  const unreadNotifications = useInfiniteMessages({
+    readed: false,
+    type: "notification",
+    order: "desc",
+  });
+  const allNotifications = useInfiniteMessages({
+    type: "notification",
+    order: "desc",
+  });
+
+  const totalAll = allNotifications.data?.pages[0]?.total ?? 0;
+  const totalUnread = unreadNotifications.data?.pages[0]?.total ?? 0;
+
+  const { mutate: markAllAsRead, isPending: isMarkingAll } = useMarkAllMessagesAsRead();
+
+  const handleMarkAllAsRead = () => {
+    markAllAsRead(undefined, {
+      onSuccess: () => {
+        toast.custom((t) => (
+          <Toast variant="success" message="Todas as notificações foram marcadas como lidas" toastId={t} />
+        ));
+      },
+      onError: () => {
+        toast.custom((t) => (
+          <Toast variant="error" message="Erro ao marcar notificações como lidas" toastId={t} />
+        ));
+      },
+    });
+  };
+
+  return (
+    <div className="flex flex-col gap-6 lg:gap-8">
+      <div className="flex items-center justify-between gap-4">
+        <div className="flex flex-col gap-2">
+          <h1 className="title-large-semibold text-gray-950">
+            Notificações
+          </h1>
+          <p className="paragraph-small-regular text-gray-600 hidden lg:block">
+            Tenha controle total sobre páginas, experiências e conversões.
+          </p>
+        </div>
+        <Button
+          variant={"secondary"}
+          className="h-10! lg:h-12! shrink-0"
+          onClick={handleMarkAllAsRead}
+          disabled={isMarkingAll || totalUnread === 0}
+        >
+          {isMarkingAll ? <IconLoader2 size={20} className="animate-spin" /> : <IconCheck size={20} />}
+          <span className="lg:block hidden">Marcar todos como lidos</span>
+          <span className="lg:hidden">Marcar como lidos</span>
+        </Button>
+      </div>
+      <Tabs
+        defaultValue="all"
+        className="flex flex-col w-full bg-transparent gap-6 lg:gap-8"
+      >
+        <TabsList className="h-auto pb-0 bg-transparent">
+          <TabsTrigger className="gap-2" value="all">
+            Todas as notificações{" "}
+            <span className="text-gray-500">({totalAll})</span>
+          </TabsTrigger>
+          <TabsTrigger className="gap-2" value="unreads" disabled={totalUnread === 0}>
+            Não lidas{" "}
+            <span className="text-gray-500">({totalUnread})</span>
+          </TabsTrigger>
+        </TabsList>
+
+        <TabsContent value="all">
+          <NotificationsList
+            pages={allNotifications.data}
+            isFetchingNextPage={allNotifications.isFetchingNextPage}
+            hasNextPage={allNotifications.hasNextPage}
+            fetchNextPage={allNotifications.fetchNextPage}
+          />
+        </TabsContent>
+
+        <TabsContent value="unreads">
+          <NotificationsList
+            pages={unreadNotifications.data}
+            isFetchingNextPage={unreadNotifications.isFetchingNextPage}
+            hasNextPage={unreadNotifications.hasNextPage}
+            fetchNextPage={unreadNotifications.fetchNextPage}
+          />
+        </TabsContent>
+      </Tabs>
+    </div>
+  );
+}

package/src/components/ui/buttons/Button.tsx

@@ -1,57 +1,57 @@
-'use client';
-
-import * as React from "react"
-import { Slot } from "@radix-ui/react-slot"
-import { cva, type VariantProps } from "class-variance-authority"
-import { cn } from "../../../infra/utils/clsx"
-
-const buttonVariants = cva(
-  "paragraph-small-semibold cursor-pointer flex items-center justify-center gap-1.5 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
-  {
-    variants: {
-      variant: {
-        default: " bg-gray-950 text-white hover:bg-gray-950/90",
-        secondary:
-          "bg-white text-gray-950 border-gray-200 hover:border-gray-400 border",
-        ghost:
-          "text-gray-600 hover:bg-accent hover:text-gray-950 dark:hover:bg-accent/50",
-        brand: "bg-cyan-300 hover:bg-cyan-200 text-gray-950",
-      },
-      size: {
-        default: "h-12 px-4 py-2 has-[>svg]:px-3",
-        sm: "rounded-md gap-1.5 px-2 py-2 has-[>svg]:px-2.5",
-        lg: "rounded-md px-6 has-[>svg]:px-4",
-        icon: "size-9",
-        "icon-sm": "size-8",
-        "icon-lg": "size-10",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-    },
-  }
-)
-
-function Button({
-  className,
-  variant,
-  size,
-  asChild = false,
-  ...props
-}: React.ComponentProps<"button"> &
-  VariantProps<typeof buttonVariants> & {
-    asChild?: boolean
-  }) {
-  const Comp = asChild ? Slot : "button"
-
-  return (
-    <Comp
-      data-slot="button"
-      className={cn(buttonVariants({ variant, size, className }))}
-      {...props}
-    />
-  )
-}
-
-export { Button, buttonVariants }
+'use client';
+
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "../../../infra/utils/clsx"
+
+const buttonVariants = cva(
+  "paragraph-small-semibold cursor-pointer flex items-center justify-center gap-1.5 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  {
+    variants: {
+      variant: {
+        default: " bg-gray-950 text-white hover:bg-gray-950/90",
+        secondary:
+          "bg-white text-gray-950 border-gray-200 hover:border-gray-400 border",
+        ghost:
+          "text-gray-600 hover:bg-accent hover:text-gray-950 dark:hover:bg-accent/50",
+        brand: "bg-cyan-300 hover:bg-cyan-200 text-gray-950",
+      },
+      size: {
+        default: "h-12 px-4 py-2 has-[>svg]:px-3",
+        sm: "rounded-md gap-1.5 px-2 py-2 has-[>svg]:px-2.5",
+        lg: "rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9",
+        "icon-sm": "size-8",
+        "icon-lg": "size-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function Button({
+  className,
+  variant,
+  size,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"button"> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean
+  }) {
+  const Comp = asChild ? Slot : "button"
+
+  return (
+    <Comp
+      data-slot="button"
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Button, buttonVariants }

package/src/components/ui/buttons/CancelButton.tsx

@@ -1,14 +1,14 @@
-'use client';
-
-import * as React from "react";
-
-export default function CancelButton({
-  ...props
-}: React.ComponentProps<"button">) {
-  return (
-    <button
-      className="flex h-8 px-2 justify-center items-center rounded-lg bg-red-50 text-red-600 font-semibold text-sm px-3 cursor-pointer hover:bg-red-100"
-      {...props}
-    />
-  );
-}
+'use client';
+
+import * as React from "react";
+
+export default function CancelButton({
+  ...props
+}: React.ComponentProps<"button">) {
+  return (
+    <button
+      className="flex h-8 px-2 justify-center items-center rounded-lg bg-red-50 text-red-600 font-semibold text-sm px-3 cursor-pointer hover:bg-red-100"
+      {...props}
+    />
+  );
+}

package/src/components/ui/buttons/CopyButton.tsx

@@ -1,54 +1,54 @@
-'use client';
-
-import { IconCheck, IconCopy } from '@tabler/icons-react';
-import { toast } from "sonner";
-import { Toast } from "../feedback/Toast";
-import { Tooltip, TooltipContent, TooltipTrigger } from "../overlay/Tooltip";
-import useCopyToClipboard from "../../../hooks/copy-to-clipboard.hook";
-import { cn } from "../../../infra/utils/clsx";
-
-interface CopyButtonProps {
-  textToCopy: string;
-  size?: number;
-  className?: string;
-  tooltipText?: string;
-  successMessage?: string;
-}
-
-export function CopyButton({
-  textToCopy,
-  size = 14,
-  className,
-  tooltipText = "Copiar link",
-  successMessage = "Link copiado",
-}: CopyButtonProps) {
-  const { isCopied, copy } = useCopyToClipboard({
-    onSuccess: () => {
-      toast.custom((t) => (
-        <Toast variant="success" message={successMessage} toastId={t} />
-      ));
-    },
-    onError: () => {
-      toast.custom((t) => (
-        <Toast variant="error" message="Não foi possível copiar o link" toastId={t} />
-      ));
-    },
-  });
-
-  return (
-    <Tooltip>
-      <TooltipTrigger
-        asChild
-        onClick={(e: React.MouseEvent) => {
-          e.stopPropagation();
-          copy(textToCopy);
-        }}
-      >
-        <span className={cn("cursor-pointer text-gray-500", className)}>
-          {isCopied ? <IconCheck size={size} /> : <IconCopy size={size} />}
-        </span>
-      </TooltipTrigger>
-      <TooltipContent>{isCopied ? "Copiado!" : tooltipText}</TooltipContent>
-    </Tooltip>
-  );
-}
+'use client';
+
+import { IconCheck, IconCopy } from '@tabler/icons-react';
+import { toast } from "sonner";
+import { Toast } from "../feedback/Toast";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../overlay/Tooltip";
+import useCopyToClipboard from "../../../hooks/copy-to-clipboard.hook";
+import { cn } from "../../../infra/utils/clsx";
+
+interface CopyButtonProps {
+  textToCopy: string;
+  size?: number;
+  className?: string;
+  tooltipText?: string;
+  successMessage?: string;
+}
+
+export function CopyButton({
+  textToCopy,
+  size = 14,
+  className,
+  tooltipText = "Copiar link",
+  successMessage = "Link copiado",
+}: CopyButtonProps) {
+  const { isCopied, copy } = useCopyToClipboard({
+    onSuccess: () => {
+      toast.custom((t) => (
+        <Toast variant="success" message={successMessage} toastId={t} />
+      ));
+    },
+    onError: () => {
+      toast.custom((t) => (
+        <Toast variant="error" message="Não foi possível copiar o link" toastId={t} />
+      ));
+    },
+  });
+
+  return (
+    <Tooltip>
+      <TooltipTrigger
+        asChild
+        onClick={(e: React.MouseEvent) => {
+          e.stopPropagation();
+          copy(textToCopy);
+        }}
+      >
+        <span className={cn("cursor-pointer text-gray-500", className)}>
+          {isCopied ? <IconCheck size={size} /> : <IconCopy size={size} />}
+        </span>
+      </TooltipTrigger>
+      <TooltipContent>{isCopied ? "Copiado!" : tooltipText}</TooltipContent>
+    </Tooltip>
+  );
+}