@greatapps/common 1.0.0

package/src/components/layouts/NavBar.tsx

@@ -0,0 +1,79 @@
+"use client"
+
+import * as React from "react"
+import Image from "next/image"
+import { ChevronRight } from "lucide-react"
+import { Separator } from "../ui/data-display/Separator"
+import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/overlay/Tooltip"
+import { cn } from "../../infra/utils/clsx"
+
+type NavBarProps = {
+    onLogoClick: () => void;
+    logoIndicatorClassName?: string;
+    showExpandButton?: boolean;
+    onExpandClick?: () => void;
+    appIconSlot: React.ReactNode;
+    children?: React.ReactNode;
+    className?: string;
+}
+
+function NavBar({
+    onLogoClick,
+    logoIndicatorClassName,
+    showExpandButton = false,
+    onExpandClick,
+    appIconSlot,
+    children,
+    className,
+}: NavBarProps) {
+    return (
+        <div className={cn("hidden md:flex flex-col justify-between h-screen p-4 border-r border-gray-200 overflow-visible z-40 bg-white", className)}>
+            <div className="flex flex-col gap-4 items-center mt-[6.5px]">
+                <div className="relative">
+                    <Tooltip>
+                        <TooltipTrigger className="cursor-pointer" asChild onClick={onLogoClick}>
+                            <Image
+                                src="/icons/great-icon.svg"
+                                alt="Great Icon"
+                                width={28}
+                                height={28}
+                            />
+                        </TooltipTrigger>
+                        <TooltipContent side="right">GreatApps</TooltipContent>
+                    </Tooltip>
+                    <div
+                        className={cn(
+                            "absolute -left-[22px] top-1/2 -translate-y-1/2 w-[3px] h-5 bg-gray-950 rounded-r-xl transition-opacity duration-300",
+                            logoIndicatorClassName
+                        )}
+                    />
+                </div>
+                <div className="relative w-full mt-[7.5px]">
+                    <Separator />
+                    {showExpandButton && (
+                        <Tooltip>
+                            <TooltipTrigger asChild>
+                                <button
+                                    onClick={onExpandClick}
+                                    className="lg:hidden absolute top-1/2 -translate-y-1/2 right-0 translate-x-[calc(50%+1rem)] size-8 flex items-center justify-center rounded-full border border-gray-200 bg-white hover:bg-gray-100 cursor-pointer transition-colors z-10"
+                                >
+                                    <ChevronRight size={16} className="text-gray-500" />
+                                </button>
+                            </TooltipTrigger>
+                            <TooltipContent side="right">Expandir menu</TooltipContent>
+                        </Tooltip>
+                    )}
+                </div>
+                <div className="flex flex-col gap-2">
+                    {appIconSlot}
+                </div>
+            </div>
+            <div className="flex flex-col items-center gap-2">
+                {children}
+            </div>
+        </div>
+    )
+}
+
+export { NavBar };
+export type { NavBarProps };

package/src/components/layouts/NotificationItem.tsx

@@ -0,0 +1,26 @@
+import { ReactNode } from "react";
+
+type NotificationItemProps = {
+    icon: ReactNode;
+    iconBgColor: string;
+    title: string;
+    time: string;
+    showBorder?: boolean;
+}
+
+function NotificationItem({ icon, iconBgColor, title, time, showBorder = true }: NotificationItemProps) {
+    return (
+        <div className={`flex items-center gap-3 px-4 py-5 ${showBorder ? 'border-b border-gray-200' : ''}`}>
+            <div className={`flex items-center justify-center rounded-full ${iconBgColor} size-10`}>
+                {icon}
+            </div>
+            <div className="flex flex-col gap-1.5">
+                <span className="paragraph-small-semibold text-gray-950">{title}</span>
+                <span className="paragraph-xsmall-medium text-gray-500">{time}</span>
+            </div>
+        </div>
+    );
+}
+
+export { NotificationItem };
+export type { NotificationItemProps };

package/src/components/layouts/SideBarNavigation.tsx

@@ -0,0 +1,22 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../infra/utils/clsx"
+
+function SideBarNavigation({
+    className,
+    children,
+    ...props
+}: React.ComponentProps<"div">) {
+    return (
+        <div
+            data-slot="sidebar-navigation"
+            className={cn("hidden lg:flex flex-col h-screen p-4 border-r w-[273px] border-gray-200", className)}
+            {...props}
+        >
+            {children}
+        </div>
+    )
+}
+
+export { SideBarNavigation };

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

@@ -0,0 +1,55 @@
+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-pages-300 hover:bg-pages-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

@@ -0,0 +1,12 @@
+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

@@ -0,0 +1,47 @@
+import { Check, Copy } from "lucide-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} />
+      ));
+    },
+  });
+
+  return (
+    <Tooltip>
+      <TooltipTrigger
+        asChild
+        onClick={(e: React.MouseEvent) => {
+          e.stopPropagation();
+          copy(textToCopy);
+        }}
+      >
+        <span className={cn("cursor-pointer text-gray-500", className)}>
+          {isCopied ? <Check size={size} /> : <Copy size={size} />}
+        </span>
+      </TooltipTrigger>
+      <TooltipContent>{isCopied ? "Copiado!" : tooltipText}</TooltipContent>
+    </Tooltip>
+  );
+}

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

@@ -0,0 +1,79 @@
+"use client"
+
+import * as React from "react"
+import * as AccordionPrimitive from "@radix-ui/react-accordion"
+import { ChevronDownIcon } from "lucide-react"
+import { cn } from "../../../infra/utils/clsx"
+
+function Accordion({
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Root>) {
+  return <AccordionPrimitive.Root data-slot="accordion" {...props} />
+}
+
+function AccordionItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Item>) {
+  const itemRef = React.useRef<HTMLDivElement>(null);
+
+  return (
+    <AccordionPrimitive.Item
+      ref={itemRef}
+      data-slot="accordion-item"
+      className={cn("cursor-pointer border rounded-lg p-5", className)}
+      onClick={(e) => {
+        // Evita abrir/fechar quando o clique já é no Trigger
+        if ((e.target as HTMLElement).closest("[data-slot='accordion-trigger']")) return;
+
+        // Procura o trigger interno e clica nele
+        const trigger = itemRef.current?.querySelector("[data-slot='accordion-trigger']") as HTMLElement | null;
+        trigger?.click();
+      }}
+      {...props}
+    >
+      {children}
+    </AccordionPrimitive.Item>
+  );
+}
+
+function AccordionTrigger({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {
+  return (
+    <AccordionPrimitive.Header className="flex">
+      <AccordionPrimitive.Trigger
+        data-slot="accordion-trigger"
+        className={cn(
+          "cursor-pointer focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <ChevronDownIcon className="size-5! text-gray-950 pointer-events-none shrink-0 translate-y-0.5 transition-transform duration-200" />
+      </AccordionPrimitive.Trigger>
+    </AccordionPrimitive.Header>
+  )
+}
+
+function AccordionContent({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Content>) {
+  return (
+    <AccordionPrimitive.Content
+      data-slot="accordion-content"
+      className="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm"
+      {...props}
+    >
+      <div className={cn("pt-3 paragraph-small-regular text-gray-500", className)}>{children}</div>
+    </AccordionPrimitive.Content>
+  )
+}
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }

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

@@ -0,0 +1,45 @@
+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 badgeVariants = cva(
+  "inline-flex items-center justify-center rounded-full border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-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 transition-[color,box-shadow] overflow-hidden",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
+        destructive:
+          "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function Badge({
+  className,
+  variant,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"span"> &
+  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot : "span"
+
+  return (
+    <Comp
+      data-slot="badge"
+      className={cn(badgeVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+export { Badge, badgeVariants }

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

@@ -0,0 +1,91 @@
+import * as React from "react";
+import { cn } from "../../../infra/utils/clsx";
+
+function Card({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card"
+      className={cn(
+        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-header"
+      className={cn(
+        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-title"
+      className={cn("leading-none font-semibold", className)}
+      {...props}
+    />
+  );
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  );
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-action"
+      className={cn(
+        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-content"
+      className={cn("px-6", className)}
+      {...props}
+    />
+  );
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-footer"
+      className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardAction,
+  CardDescription,
+  CardContent,
+};

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

@@ -0,0 +1,124 @@
+import * as React from "react"
+import {
+  ChevronLeftIcon,
+  ChevronRightIcon,
+  MoreHorizontalIcon,
+} from "lucide-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}
+    >
+      <ChevronLeftIcon />
+    </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}
+    >
+      <ChevronRightIcon />
+    </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}
+    >
+      <MoreHorizontalIcon className="size-4 mt-1.5" />
+      <span className="sr-only">More pages</span>
+    </span>
+  )
+}
+
+export {
+  Pagination,
+  PaginationContent,
+  PaginationLink,
+  PaginationItem,
+  PaginationPrevious,
+  PaginationNext,
+  PaginationEllipsis,
+}

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

@@ -0,0 +1,57 @@
+"use client"
+
+import * as React from "react"
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
+import { cn } from "../../../infra/utils/clsx"
+
+function ScrollArea({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof ScrollAreaPrimitive.Root>) {
+  return (
+    <ScrollAreaPrimitive.Root
+      data-slot="scroll-area"
+      className={cn("relative", className)}
+      {...props}
+    >
+      <ScrollAreaPrimitive.Viewport
+        data-slot="scroll-area-viewport"
+        className="focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1"
+      >
+        {children}
+      </ScrollAreaPrimitive.Viewport>
+      <ScrollBar />
+      <ScrollAreaPrimitive.Corner />
+    </ScrollAreaPrimitive.Root>
+  )
+}
+
+function ScrollBar({
+  className,
+  orientation = "vertical",
+  ...props
+}: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>) {
+  return (
+    <ScrollAreaPrimitive.ScrollAreaScrollbar
+      data-slot="scroll-area-scrollbar"
+      orientation={orientation}
+      className={cn(
+        "flex touch-none p-px transition-colors select-none",
+        orientation === "vertical" &&
+          "h-full w-2.5 border-l border-l-transparent",
+        orientation === "horizontal" &&
+          "h-2.5 flex-col border-t border-t-transparent",
+        className
+      )}
+      {...props}
+    >
+      <ScrollAreaPrimitive.ScrollAreaThumb
+        data-slot="scroll-area-thumb"
+        className="bg-border relative flex-1 rounded-full"
+      />
+    </ScrollAreaPrimitive.ScrollAreaScrollbar>
+  )
+}
+
+export { ScrollArea, ScrollBar }

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

@@ -0,0 +1,27 @@
+"use client"
+
+import * as React from "react"
+import * as SeparatorPrimitive from "@radix-ui/react-separator"
+import { cn } from "../../../infra/utils/clsx"
+
+function Separator({
+  className,
+  orientation = "horizontal",
+  decorative = true,
+  ...props
+}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
+  return (
+    <SeparatorPrimitive.Root
+      data-slot="separator"
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        "bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Separator }