@greatapps/common 1.1.699 → 1.1.700

package/src/components/ui/data-display/CardItem.tsx

@@ -1,135 +1,135 @@
-'use client';
-
-import { useState } from 'react';
-import { toast } from 'sonner';
-import { IconDotsVertical, IconStar, IconTrash } from '@tabler/icons-react';
-import { Popover, PopoverContent, PopoverTrigger } from '../overlay/Popover';
-import { NavBarItem } from '../../layouts/NavBarItem';
-import { Toast } from '../feedback/Toast';
-import { CardBrandIcon } from './CardBrandIcons';
-import { useSetDefaultCard } from '../../../modules/cards/hooks/set-default-card.hook';
-import { useHandleDeleteCard } from '../../../modules/cards/hooks/handle-delete-card.hook';
-import type { Card } from '../../../modules/cards/types';
-import { useTranslations } from 'next-intl';
-
-type CardItemProps = {
-  card: Card;
-  isSelected?: boolean;
-  onSelect?: () => void;
-  showMenu?: boolean;
-  hideDelete?: boolean;
-  hideSetDefault?: boolean;
-  onAfterDelete?: (card: Card) => void;
-  onAfterSetDefault?: (card: Card) => void;
-};
-
-export function CardItem({
-  card,
-  isSelected,
-  onSelect,
-  showMenu = true,
-  hideDelete = false,
-  hideSetDefault = false,
-  onAfterDelete,
-  onAfterSetDefault,
-}: CardItemProps) {
-  const translate = useTranslations();
-  const [popoverOpen, setPopoverOpen] = useState(false);
-
-  const setDefaultCardMutation = useSetDefaultCard();
-
-  const handleDeleteCard = useHandleDeleteCard({ onAfterDelete });
-
-  const handleSetDefault = () => {
-    setDefaultCardMutation.mutate(card.id.toString(), {
-      onSuccess: () => {
-        toast.custom((t) => (
-          <Toast
-            variant="success"
-            message={translate('common.cards.item.setDefaultSuccess')}
-            toastId={t}
-          />
-        ));
-        onAfterSetDefault?.(card);
-      },
-      onError: () => {
-        toast.custom((t) => (
-          <Toast
-            variant="error"
-            message={translate('common.cards.item.setDefaultError')}
-            toastId={t}
-          />
-        ));
-      },
-    });
-  };
-
-  const menuHasSetDefault = !hideSetDefault && !card.is_default;
-  const menuHasDelete = !hideDelete;
-  const hasMenuItems = menuHasSetDefault || menuHasDelete;
-  const renderMenu = showMenu && hasMenuItems;
-
-  return (
-    <div
-      className={`flex items-center p-4 cursor-pointer transition-colors gap-3 rounded-lg border ${
-        isSelected
-          ? 'bg-zinc-50 border-zinc-950'
-          : 'bg-white border-zinc-200 hover:bg-zinc-50'
-      }`}
-      onClick={onSelect}
-    >
-      <div className="flex flex-col gap-0.5 flex-1 min-w-0">
-        <span className="paragraph-small-semibold text-zinc-950 truncate">
-          {card.name}
-        </span>
-        <span className="paragraph-small-medium text-zinc-950">
-          •••• {(card.number ?? '').replaceAll(/\D/g, '').slice(-4)}
-        </span>
-      </div>
-      {card.is_default && (
-        <span className="paragraph-xsmall-semibold text-zinc-600 bg-zinc-100 px-2 py-0.5 rounded-lg whitespace-nowrap">
-          {translate('common.cards.item.defaultBadge')}
-        </span>
-      )}
-      <CardBrandIcon brand={card.brand} />
-      {renderMenu && (
-        <Popover open={popoverOpen} onOpenChange={setPopoverOpen}>
-          <PopoverTrigger asChild>
-            <button
-              className="size-10 flex items-center justify-center rounded-lg hover:bg-zinc-100 cursor-pointer"
-              onClick={(e) => e.stopPropagation()}
-            >
-              <IconDotsVertical className="size-5 text-zinc-500" />
-            </button>
-          </PopoverTrigger>
-          <PopoverContent
-            align="end"
-            className="w-[180px] p-2 bg-white rounded-2xl border border-zinc-200"
-            onClick={(e) => e.stopPropagation()}
-          >
-            {menuHasSetDefault && (
-              <NavBarItem
-                icon={<IconStar size={18} className="text-zinc-400" />}
-                label={translate('common.cards.item.makeDefault')}
-                onClick={() => {
-                  setPopoverOpen(false);
-                  handleSetDefault();
-                }}
-              />
-            )}
-            {menuHasDelete && (
-              <NavBarItem
-                icon={<IconTrash size={18} className="text-zinc-400" />}
-                label={translate('common.actions.delete')}
-                onClick={() => {
-                  setPopoverOpen(false);
-                  handleDeleteCard(card);
-                }}
-              />
-            )}
-          </PopoverContent>
-        </Popover>
-      )}
-    </div>
-  );
-}
+'use client';
+
+import { useState } from 'react';
+import { toast } from 'sonner';
+import { IconDotsVertical, IconStar, IconTrash } from '@tabler/icons-react';
+import { Popover, PopoverContent, PopoverTrigger } from '../overlay/Popover';
+import { NavBarItem } from '../../layouts/NavBarItem';
+import { Toast } from '../feedback/Toast';
+import { CardBrandIcon } from './CardBrandIcons';
+import { useSetDefaultCard } from '../../../modules/cards/hooks/set-default-card.hook';
+import { useHandleDeleteCard } from '../../../modules/cards/hooks/handle-delete-card.hook';
+import type { Card } from '../../../modules/cards/types';
+import { useTranslations } from 'next-intl';
+
+type CardItemProps = {
+  card: Card;
+  isSelected?: boolean;
+  onSelect?: () => void;
+  showMenu?: boolean;
+  hideDelete?: boolean;
+  hideSetDefault?: boolean;
+  onAfterDelete?: (card: Card) => void;
+  onAfterSetDefault?: (card: Card) => void;
+};
+
+export function CardItem({
+  card,
+  isSelected,
+  onSelect,
+  showMenu = true,
+  hideDelete = false,
+  hideSetDefault = false,
+  onAfterDelete,
+  onAfterSetDefault,
+}: CardItemProps) {
+  const translate = useTranslations();
+  const [popoverOpen, setPopoverOpen] = useState(false);
+
+  const setDefaultCardMutation = useSetDefaultCard();
+
+  const handleDeleteCard = useHandleDeleteCard({ onAfterDelete });
+
+  const handleSetDefault = () => {
+    setDefaultCardMutation.mutate(card.id.toString(), {
+      onSuccess: () => {
+        toast.custom((t) => (
+          <Toast
+            variant="success"
+            message={translate('common.cards.item.setDefaultSuccess')}
+            toastId={t}
+          />
+        ));
+        onAfterSetDefault?.(card);
+      },
+      onError: () => {
+        toast.custom((t) => (
+          <Toast
+            variant="error"
+            message={translate('common.cards.item.setDefaultError')}
+            toastId={t}
+          />
+        ));
+      },
+    });
+  };
+
+  const menuHasSetDefault = !hideSetDefault && !card.is_default;
+  const menuHasDelete = !hideDelete;
+  const hasMenuItems = menuHasSetDefault || menuHasDelete;
+  const renderMenu = showMenu && hasMenuItems;
+
+  return (
+    <div
+      className={`flex items-center p-4 cursor-pointer transition-colors gap-3 rounded-lg border ${
+        isSelected
+          ? 'bg-zinc-50 border-zinc-950'
+          : 'bg-white border-zinc-200 hover:bg-zinc-50'
+      }`}
+      onClick={onSelect}
+    >
+      <div className="flex flex-col gap-0.5 flex-1 min-w-0">
+        <span className="paragraph-small-semibold text-zinc-950 truncate">
+          {card.name}
+        </span>
+        <span className="paragraph-small-medium text-zinc-950">
+          •••• {(card.number ?? '').replaceAll(/\D/g, '').slice(-4)}
+        </span>
+      </div>
+      {card.is_default && (
+        <span className="paragraph-xsmall-semibold text-zinc-600 bg-zinc-100 px-2 py-0.5 rounded-lg whitespace-nowrap">
+          {translate('common.cards.item.defaultBadge')}
+        </span>
+      )}
+      <CardBrandIcon brand={card.brand} />
+      {renderMenu && (
+        <Popover open={popoverOpen} onOpenChange={setPopoverOpen}>
+          <PopoverTrigger asChild>
+            <button
+              className="size-10 flex items-center justify-center rounded-lg hover:bg-zinc-100 cursor-pointer"
+              onClick={(e) => e.stopPropagation()}
+            >
+              <IconDotsVertical className="size-5 text-zinc-500" />
+            </button>
+          </PopoverTrigger>
+          <PopoverContent
+            align="end"
+            className="w-[180px] p-2 bg-white rounded-2xl border border-zinc-200"
+            onClick={(e) => e.stopPropagation()}
+          >
+            {menuHasSetDefault && (
+              <NavBarItem
+                icon={<IconStar size={18} className="text-zinc-400" />}
+                label={translate('common.cards.item.makeDefault')}
+                onClick={() => {
+                  setPopoverOpen(false);
+                  handleSetDefault();
+                }}
+              />
+            )}
+            {menuHasDelete && (
+              <NavBarItem
+                icon={<IconTrash size={18} className="text-zinc-400" />}
+                label={translate('common.actions.delete')}
+                onClick={() => {
+                  setPopoverOpen(false);
+                  handleDeleteCard(card);
+                }}
+              />
+            )}
+          </PopoverContent>
+        </Popover>
+      )}
+    </div>
+  );
+}

package/src/components/ui/data-display/Pagination.tsx

@@ -1,126 +1,126 @@
-'use client';
-
-import * as React from "react"
-import {
-  IconChevronLeft,
-  IconChevronRight,
-  IconDots,
-} from "@tabler/icons-react"
-import { cn } from "../../../infra/utils/clsx"
-import { Button, buttonVariants } from "../buttons/Button"
-
-function Pagination({ className, ...props }: React.ComponentProps<"nav">) {
-  return (
-    <nav
-      role="navigation"
-      aria-label="pagination"
-      data-slot="pagination"
-      className={cn("mx-auto flex w-full justify-center", className)}
-      {...props}
-    />
-  )
-}
-
-function PaginationContent({
-  className,
-  ...props
-}: React.ComponentProps<"ul">) {
-  return (
-    <ul
-      data-slot="pagination-content"
-      className={cn("flex flex-row items-center gap-1.5", className)}
-      {...props}
-    />
-  )
-}
-
-function PaginationItem({ ...props }: React.ComponentProps<"li">) {
-  return <li data-slot="pagination-item" {...props} />
-}
-
-type PaginationLinkProps = {
-  isActive?: boolean
-} & Pick<React.ComponentProps<typeof Button>, "size"> &
-  React.ComponentProps<"a">
-
-function PaginationLink({
-  className,
-  isActive,
-  size = "icon-sm",
-  ...props
-}: PaginationLinkProps) {
-  return (
-    <a
-      aria-current={isActive ? "page" : undefined}
-      data-slot="pagination-link"
-      data-active={isActive}
-      className={cn(
-        buttonVariants({
-          variant: isActive ? "secondary" : "ghost",
-          size,
-        }),
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function PaginationPrevious({
-  className,
-  ...props
-}: React.ComponentProps<typeof PaginationLink>) {
-  return (
-    <PaginationLink
-      aria-label="Go to previous page"
-      size="default"
-      className={cn("gap-1 size-8 sm:pl-2.5", className)}
-      {...props}
-    >
-      <IconChevronLeft />
-    </PaginationLink>
-  )
-}
-
-function PaginationNext({
-  className,
-  ...props
-}: React.ComponentProps<typeof PaginationLink>) {
-  return (
-    <PaginationLink
-      aria-label="Go to next page"
-      size="default"
-      className={cn("gap-1 size-8 sm:pr-2.5", className)}
-      {...props}
-    >
-      <IconChevronRight />
-    </PaginationLink>
-  )
-}
-
-function PaginationEllipsis({
-  className,
-  ...props
-}: React.ComponentProps<"span">) {
-  return (
-    <span
-      aria-hidden
-      data-slot="pagination-ellipsis"
-      className={cn("flex size-9 items-center justify-center", className)}
-      {...props}
-    >
-      <IconDots className="size-4 mt-1.5" />
-      <span className="sr-only">More pages</span>
-    </span>
-  )
-}
-
-export {
-  Pagination,
-  PaginationContent,
-  PaginationLink,
-  PaginationItem,
-  PaginationPrevious,
-  PaginationNext,
-  PaginationEllipsis,
-}
+'use client';
+
+import * as React from "react"
+import {
+  IconChevronLeft,
+  IconChevronRight,
+  IconDots,
+} from "@tabler/icons-react"
+import { cn } from "../../../infra/utils/clsx"
+import { Button, buttonVariants } from "../buttons/Button"
+
+function Pagination({ className, ...props }: React.ComponentProps<"nav">) {
+  return (
+    <nav
+      role="navigation"
+      aria-label="pagination"
+      data-slot="pagination"
+      className={cn("mx-auto flex w-full justify-center", className)}
+      {...props}
+    />
+  )
+}
+
+function PaginationContent({
+  className,
+  ...props
+}: React.ComponentProps<"ul">) {
+  return (
+    <ul
+      data-slot="pagination-content"
+      className={cn("flex flex-row items-center gap-1.5", className)}
+      {...props}
+    />
+  )
+}
+
+function PaginationItem({ ...props }: React.ComponentProps<"li">) {
+  return <li data-slot="pagination-item" {...props} />
+}
+
+type PaginationLinkProps = {
+  isActive?: boolean
+} & Pick<React.ComponentProps<typeof Button>, "size"> &
+  React.ComponentProps<"a">
+
+function PaginationLink({
+  className,
+  isActive,
+  size = "icon-sm",
+  ...props
+}: PaginationLinkProps) {
+  return (
+    <a
+      aria-current={isActive ? "page" : undefined}
+      data-slot="pagination-link"
+      data-active={isActive}
+      className={cn(
+        buttonVariants({
+          variant: isActive ? "secondary" : "ghost",
+          size,
+        }),
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function PaginationPrevious({
+  className,
+  ...props
+}: React.ComponentProps<typeof PaginationLink>) {
+  return (
+    <PaginationLink
+      aria-label="Go to previous page"
+      size="default"
+      className={cn("gap-1 size-8 sm:pl-2.5", className)}
+      {...props}
+    >
+      <IconChevronLeft />
+    </PaginationLink>
+  )
+}
+
+function PaginationNext({
+  className,
+  ...props
+}: React.ComponentProps<typeof PaginationLink>) {
+  return (
+    <PaginationLink
+      aria-label="Go to next page"
+      size="default"
+      className={cn("gap-1 size-8 sm:pr-2.5", className)}
+      {...props}
+    >
+      <IconChevronRight />
+    </PaginationLink>
+  )
+}
+
+function PaginationEllipsis({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      aria-hidden
+      data-slot="pagination-ellipsis"
+      className={cn("flex size-9 items-center justify-center", className)}
+      {...props}
+    >
+      <IconDots className="size-4 mt-1.5" />
+      <span className="sr-only">More pages</span>
+    </span>
+  )
+}
+
+export {
+  Pagination,
+  PaginationContent,
+  PaginationLink,
+  PaginationItem,
+  PaginationPrevious,
+  PaginationNext,
+  PaginationEllipsis,
+}