@greatapps/greatchat-ui 0.1.6 → 0.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@greatapps/greatchat-ui",
-  "version": "0.1.6",
+  "version": "0.2.0",
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -26,24 +26,27 @@
     "@tanstack/react-table": "^8",
     "lucide-react": "*",
     "date-fns": "*",
-    "sonner": "*"
+    "sonner": "*",
+    "@greatapps/greatauth-ui": "^0.2.0",
+    "radix-ui": "^1.4",
+    "cmdk": "^1"
   },
   "dependencies": {
-    "@greatapps/greatauth-ui": "^0.1.4",
-    "class-variance-authority": "^0.7.1",
     "clsx": "^2",
-    "cmdk": "^1.1.1",
-    "radix-ui": "^1.4.3",
-    "tailwind-merge": "^3"
+    "tailwind-merge": "^3",
+    "class-variance-authority": "^0.7"
   },
   "devDependencies": {
-    "tsup": "latest",
-    "typescript": "^5",
-    "react": "^19",
-    "react-dom": "^19",
+    "@greatapps/greatauth-ui": "latest",
+    "@tanstack/react-query": "latest",
+    "@tanstack/react-table": "latest",
     "@types/react": "latest",
     "@types/react-dom": "latest",
-    "@tanstack/react-query": "latest",
-    "@tanstack/react-table": "latest"
+    "cmdk": "^1",
+    "radix-ui": "^1.4",
+    "react": "^19",
+    "react-dom": "^19",
+    "tsup": "latest",
+    "typescript": "^5"
   }
 }

package/src/components/channel-card.tsx

@@ -5,7 +5,7 @@ import type { Channel } from "../types";
 import type { GchatHookConfig } from "../hooks/types";
 import { useChannelWhatsappStatus } from "../hooks/use-channels";
 import { WhatsappStatusBadge } from "./whatsapp-status-badge";
-import { Button } from "./ui/button";
+import { Button } from "@greatapps/greatauth-ui/ui";
 
 export interface ChannelCardProps {
   channel: Channel;

package/src/components/channel-create-dialog.tsx

@@ -11,10 +11,10 @@ import {
   DialogHeader,
   DialogTitle,
   DialogFooter,
-} from "./ui/dialog";
-import { Button } from "./ui/button";
-import { Input } from "./ui/input";
-import { Label } from "./ui/label";
+  Button,
+  Input,
+  Label,
+} from "@greatapps/greatauth-ui/ui";
 import { Loader2 } from "lucide-react";
 import { toast } from "sonner";
 

package/src/components/channel-edit-dialog.tsx

@@ -12,10 +12,10 @@ import {
   DialogHeader,
   DialogTitle,
   DialogFooter,
-} from "./ui/dialog";
-import { Button } from "./ui/button";
-import { Input } from "./ui/input";
-import { Label } from "./ui/label";
+  Button,
+  Input,
+  Label,
+} from "@greatapps/greatauth-ui/ui";
 import { Loader2 } from "lucide-react";
 import { toast } from "sonner";
 

package/src/components/channels-page.tsx

@@ -10,8 +10,8 @@ import { ChannelCreateDialog } from "./channel-create-dialog";
 import { ChannelEditDialog } from "./channel-edit-dialog";
 import { WhatsappQrDialog } from "./whatsapp-qr-dialog";
 import { WhatsappIcon } from "./whatsapp-icon";
-import { Button } from "./ui/button";
 import {
+  Button,
   AlertDialog,
   AlertDialogAction,
   AlertDialogCancel,
@@ -20,8 +20,8 @@ import {
   AlertDialogFooter,
   AlertDialogHeader,
   AlertDialogTitle,
-} from "./ui/alert-dialog";
-import { Skeleton } from "./ui/skeleton";
+  Skeleton,
+} from "@greatapps/greatauth-ui/ui";
 import { Plus, QrCode, Unplug, LogOut } from "lucide-react";
 import { toast } from "sonner";
 

package/src/components/chat-dashboard.tsx

@@ -14,10 +14,11 @@ import {
   CardContent,
   CardHeader,
   CardTitle,
-} from "./ui/card";
-import { Badge } from "./ui/badge";
-import { Progress } from "./ui/progress";
-import { Skeleton } from "./ui/skeleton";
+  Badge,
+  Progress,
+  Skeleton,
+  cn,
+} from "@greatapps/greatauth-ui/ui";
 import {
   Inbox as InboxIcon,
   MessageCircle,
@@ -27,7 +28,6 @@ import {
 } from "lucide-react";
 import { formatDistanceToNow } from "date-fns";
 import { ptBR } from "date-fns/locale";
-import { cn } from "../lib/utils";
 
 // --- Helpers ---
 

package/src/components/chat-input.tsx

@@ -1,7 +1,6 @@
 import { useState, useRef } from "react";
 import { Send } from "lucide-react";
-import { Button } from "./ui/button";
-import { Textarea } from "./ui/textarea";
+import { Button, Textarea } from "@greatapps/greatauth-ui/ui";
 
 export interface ChatInputProps {
   onSend: (content: string) => void;

package/src/components/chat-view.tsx

@@ -4,14 +4,7 @@ import { groupMessagesByDate } from "../utils/group-messages";
 import { formatDateGroup } from "../utils/format-date";
 import { MessageBubble } from "./message-bubble";
 import { ChatInput } from "./chat-input";
-import { Skeleton } from "./ui/skeleton";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "./ui/select";
+import { Skeleton, Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@greatapps/greatauth-ui/ui";
 
 export interface ChatViewProps {
   messages: InboxMessage[];

package/src/components/contact-avatar.tsx

@@ -1,5 +1,4 @@
-import { Avatar, AvatarFallback } from "./ui/avatar";
-import { cn } from "../lib/utils";
+import { Avatar, AvatarFallback, cn } from "@greatapps/greatauth-ui/ui";
 
 const COLORS = [
   "bg-red-100 text-red-700 dark:bg-red-900 dark:text-red-300",

package/src/components/contact-form-dialog.tsx

@@ -10,10 +10,10 @@ import {
   DialogHeader,
   DialogTitle,
   DialogFooter,
-} from "./ui/dialog";
-import { Button } from "./ui/button";
-import { Input } from "./ui/input";
-import { Label } from "./ui/label";
+  Button,
+  Input,
+  Label,
+} from "@greatapps/greatauth-ui/ui";
 import { Loader2 } from "lucide-react";
 import { toast } from "sonner";
 

package/src/components/contact-info-panel.tsx

@@ -1,8 +1,6 @@
 import type { Contact } from "../types";
 import { ContactAvatar } from "./contact-avatar";
-import { Button } from "./ui/button";
-import { Skeleton } from "./ui/skeleton";
-import { Separator } from "./ui/separator";
+import { Button, Skeleton, Separator, cn } from "@greatapps/greatauth-ui/ui";
 import {
   X,
   Phone,
@@ -13,7 +11,6 @@ import {
 } from "lucide-react";
 import { format } from "date-fns";
 import { ptBR } from "date-fns/locale";
-import { cn } from "../lib/utils";
 
 function InfoRow({
   icon: Icon,

package/src/components/contacts-page.tsx

@@ -4,7 +4,7 @@ import { useState } from "react";
 import type { GchatHookConfig } from "../hooks/types";
 import { ContactsTable } from "./contacts-table";
 import { ContactFormDialog } from "./contact-form-dialog";
-import { Button } from "./ui/button";
+import { Button } from "@greatapps/greatauth-ui/ui";
 import { Plus } from "lucide-react";
 
 export interface ContactsPageProps {

package/src/components/contacts-table.tsx

@@ -7,13 +7,11 @@ import type { GchatHookConfig } from "../hooks/types";
 import { useContacts, useDeleteContact } from "../hooks/use-contacts";
 import { ContactFormDialog } from "./contact-form-dialog";
 import { DataTable } from "./data-table";
-import { Input } from "./ui/input";
 import {
+  Input,
   Tooltip,
   TooltipTrigger,
   TooltipContent,
-} from "./ui/tooltip";
-import {
   AlertDialog,
   AlertDialogAction,
   AlertDialogCancel,
@@ -22,8 +20,8 @@ import {
   AlertDialogFooter,
   AlertDialogHeader,
   AlertDialogTitle,
-} from "./ui/alert-dialog";
-import { Button } from "./ui/button";
+  Button,
+} from "@greatapps/greatauth-ui/ui";
 import { Pencil, Trash2, Search } from "lucide-react";
 import { format } from "date-fns";
 import { ptBR } from "date-fns/locale";

package/src/components/data-table.tsx

@@ -16,11 +16,11 @@ import {
   TableHead,
   TableHeader,
   TableRow,
-} from "./ui/table";
-import { Button } from "./ui/button";
-import { Skeleton } from "./ui/skeleton";
+  Button,
+  Skeleton,
+  cn,
+} from "@greatapps/greatauth-ui/ui";
 import { ChevronLeft, ChevronRight, ArrowUp, ArrowDown, ArrowUpDown } from "lucide-react";
-import { cn } from "../lib/utils";
 
 export interface DataTableProps<TData, TValue> {
   columns: ColumnDef<TData, TValue>[];

package/src/components/inbox-item.tsx

@@ -1,9 +1,11 @@
 import { useState } from "react";
 import type { Inbox } from "../types";
 import { ContactAvatar } from "./contact-avatar";
-import { Badge } from "./ui/badge";
-import { Tooltip, TooltipTrigger, TooltipContent } from "./ui/tooltip";
 import {
+  Badge,
+  Tooltip,
+  TooltipTrigger,
+  TooltipContent,
   AlertDialog,
   AlertDialogAction,
   AlertDialogCancel,
@@ -12,11 +14,11 @@ import {
   AlertDialogFooter,
   AlertDialogHeader,
   AlertDialogTitle,
-} from "./ui/alert-dialog";
+  cn,
+} from "@greatapps/greatauth-ui/ui";
 import { formatDistanceToNow } from "date-fns";
 import { ptBR } from "date-fns/locale";
 import { Trash2 } from "lucide-react";
-import { cn } from "../lib/utils";
 
 const statusColors: Record<string, string> = {
   open: "bg-green-500/10 text-green-600 border-green-200",

package/src/components/inbox-page.tsx

@@ -20,14 +20,7 @@ import { useGetContact } from "../hooks/use-contacts";
 import { InboxSidebar } from "./inbox-sidebar";
 import { ChatView } from "./chat-view";
 import { ContactInfoPanel } from "./contact-info-panel";
-import { Button } from "./ui/button";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "./ui/select";
+import { Button, Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@greatapps/greatauth-ui/ui";
 import { MessageCircle, User } from "lucide-react";
 
 export interface InboxPageProps {

package/src/components/inbox-sidebar.tsx

@@ -1,11 +1,7 @@
 import { useState, useMemo } from "react";
 import type { Inbox } from "../types";
 import { InboxItem } from "./inbox-item";
-import { Input } from "./ui/input";
-import { Tabs, TabsList, TabsTrigger } from "./ui/tabs";
-import { Button } from "./ui/button";
-import { Skeleton } from "./ui/skeleton";
-import { ScrollArea } from "./ui/scroll-area";
+import { Input, Tabs, TabsList, TabsTrigger, Button, Skeleton, ScrollArea } from "@greatapps/greatauth-ui/ui";
 import { Search, Plus, Inbox as InboxIcon } from "lucide-react";
 
 const STATUS_TABS = [

package/src/components/message-bubble.tsx

@@ -1,6 +1,5 @@
 import { useState } from "react";
 import type { InboxMessage } from "../types";
-import { cn } from "../lib/utils";
 import { formatMessageTime } from "../utils/format-date";
 import {
   Check,
@@ -18,12 +17,11 @@ import {
   Ban,
 } from "lucide-react";
 import {
+  cn,
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
-} from "./ui/dropdown-menu";
-import {
   AlertDialog,
   AlertDialogAction,
   AlertDialogCancel,
@@ -32,9 +30,9 @@ import {
   AlertDialogFooter,
   AlertDialogHeader,
   AlertDialogTitle,
-} from "./ui/alert-dialog";
-import { Button } from "./ui/button";
-import { Textarea } from "./ui/textarea";
+  Button,
+  Textarea,
+} from "@greatapps/greatauth-ui/ui";
 
 const statusIcons: Record<string, React.ReactNode> = {
   pending: <Clock className="h-3 w-3 animate-pulse" />,

package/src/components/new-conversation-dialog.tsx

@@ -8,23 +8,19 @@ import {
   DialogTitle,
   DialogDescription,
   DialogFooter,
-} from "./ui/dialog";
-import {
   Command,
   CommandInput,
   CommandList,
   CommandEmpty,
   CommandGroup,
   CommandItem,
-} from "./ui/command";
-import {
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from "./ui/select";
-import { Button } from "./ui/button";
+  Button,
+} from "@greatapps/greatauth-ui/ui";
 import { Loader2 } from "lucide-react";
 
 export interface NewConversationDialogProps {

package/src/components/whatsapp-qr-dialog.tsx

@@ -9,8 +9,8 @@ import {
   DialogHeader,
   DialogTitle,
   DialogDescription,
-} from "./ui/dialog";
-import { Button } from "./ui/button";
+  Button,
+} from "@greatapps/greatauth-ui/ui";
 import { Loader2, Check, AlertCircle, RefreshCw } from "lucide-react";
 import { toast } from "sonner";
 

package/src/components/whatsapp-status-badge.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import type { WhatsappStatus } from "../types";
-import { Badge } from "./ui/badge";
+import { Badge } from "@greatapps/greatauth-ui/ui";
 
 export interface WhatsappStatusBadgeProps {
   status: WhatsappStatus | undefined | null;

package/src/index.ts

@@ -15,7 +15,7 @@ export { createGchatClient } from "./client";
 export type { GchatClientConfig } from "./client";
 
 // Utils
-export { cn } from "./lib/utils";
+export { cn } from "@greatapps/greatauth-ui/ui";
 export { groupMessagesByDate, formatDateGroup, formatMessageTime } from "./utils";
 
 // Hooks

package/src/components/ui/alert-dialog.tsx

@@ -1,167 +0,0 @@
-import * as React from "react";
-import { AlertDialog as AlertDialogPrimitive } from "radix-ui";
-
-import { cn } from "../../lib/utils";
-import { Button } from "./button";
-
-function AlertDialog({
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {
-  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />;
-}
-
-function AlertDialogTrigger({
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {
-  return (
-    <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
-  );
-}
-
-function AlertDialogPortal({
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {
-  return (
-    <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />
-  );
-}
-
-function AlertDialogOverlay({
-  className,
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {
-  return (
-    <AlertDialogPrimitive.Overlay
-      data-slot="alert-dialog-overlay"
-      className={cn(
-        "data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs fixed inset-0 z-50",
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-function AlertDialogContent({
-  className,
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Content>) {
-  return (
-    <AlertDialogPortal>
-      <AlertDialogOverlay />
-      <AlertDialogPrimitive.Content
-        data-slot="alert-dialog-content"
-        className={cn(
-          "data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 bg-background ring-foreground/10 gap-6 rounded-xl p-6 ring-1 duration-100 sm:max-w-lg fixed top-1/2 left-1/2 z-50 grid w-full max-w-xs -translate-x-1/2 -translate-y-1/2 outline-none",
-          className,
-        )}
-        {...props}
-      />
-    </AlertDialogPortal>
-  );
-}
-
-function AlertDialogHeader({
-  className,
-  ...props
-}: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="alert-dialog-header"
-      className={cn("grid gap-1.5 text-center sm:text-left", className)}
-      {...props}
-    />
-  );
-}
-
-function AlertDialogFooter({
-  className,
-  ...props
-}: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="alert-dialog-footer"
-      className={cn(
-        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-function AlertDialogTitle({
-  className,
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
-  return (
-    <AlertDialogPrimitive.Title
-      data-slot="alert-dialog-title"
-      className={cn("text-lg font-medium", className)}
-      {...props}
-    />
-  );
-}
-
-function AlertDialogDescription({
-  className,
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {
-  return (
-    <AlertDialogPrimitive.Description
-      data-slot="alert-dialog-description"
-      className={cn("text-muted-foreground text-sm", className)}
-      {...props}
-    />
-  );
-}
-
-function AlertDialogAction({
-  className,
-  variant = "default",
-  size = "default",
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Action> &
-  Partial<Pick<React.ComponentProps<typeof Button>, "variant" | "size">>) {
-  return (
-    <Button variant={variant} size={size} asChild>
-      <AlertDialogPrimitive.Action
-        data-slot="alert-dialog-action"
-        className={cn(className)}
-        {...props}
-      />
-    </Button>
-  );
-}
-
-function AlertDialogCancel({
-  className,
-  variant = "outline",
-  size = "default",
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Cancel> &
-  Partial<Pick<React.ComponentProps<typeof Button>, "variant" | "size">>) {
-  return (
-    <Button variant={variant} size={size} asChild>
-      <AlertDialogPrimitive.Cancel
-        data-slot="alert-dialog-cancel"
-        className={cn(className)}
-        {...props}
-      />
-    </Button>
-  );
-}
-
-export {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogOverlay,
-  AlertDialogPortal,
-  AlertDialogTitle,
-  AlertDialogTrigger,
-};

package/src/components/ui/avatar.tsx

@@ -1,51 +0,0 @@
-import * as React from "react";
-import { Avatar as AvatarPrimitive } from "radix-ui";
-
-import { cn } from "../../lib/utils";
-
-function Avatar({
-  className,
-  ...props
-}: React.ComponentProps<typeof AvatarPrimitive.Root>) {
-  return (
-    <AvatarPrimitive.Root
-      data-slot="avatar"
-      className={cn(
-        "relative flex size-8 shrink-0 overflow-hidden rounded-full",
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-function AvatarImage({
-  className,
-  ...props
-}: React.ComponentProps<typeof AvatarPrimitive.Image>) {
-  return (
-    <AvatarPrimitive.Image
-      data-slot="avatar-image"
-      className={cn("aspect-square size-full", className)}
-      {...props}
-    />
-  );
-}
-
-function AvatarFallback({
-  className,
-  ...props
-}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
-  return (
-    <AvatarPrimitive.Fallback
-      data-slot="avatar-fallback"
-      className={cn(
-        "flex size-full items-center justify-center rounded-full bg-muted",
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-export { Avatar, AvatarImage, AvatarFallback };