@greatapps/greatchat-ui 0.1.5 → 0.2.0

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

@@ -0,0 +1,147 @@
+"use client";
+
+import { useEffect, useState, useCallback } from "react";
+import type { GchatHookConfig } from "../hooks/types";
+import { useConnectChannel, useChannelQR, useChannelWhatsappStatus } from "../hooks/use-channels";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+  Button,
+} from "@greatapps/greatauth-ui/ui";
+import { Loader2, Check, AlertCircle, RefreshCw } from "lucide-react";
+import { toast } from "sonner";
+
+type QRState = "connecting" | "waiting_qr" | "showing_qr" | "connected" | "error";
+
+export interface WhatsappQrDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  channelId: number;
+  config: GchatHookConfig;
+}
+
+export function WhatsappQrDialog({
+  open,
+  onOpenChange,
+  channelId,
+  config,
+}: WhatsappQrDialogProps) {
+  const connectChannel = useConnectChannel(config);
+  const [state, setState] = useState<QRState>("connecting");
+  const [errorMsg, setErrorMsg] = useState("");
+
+  const { data: qrUrl } = useChannelQR(
+    config,
+    channelId,
+    open && (state === "waiting_qr" || state === "showing_qr"),
+  );
+
+  const { data: status } = useChannelWhatsappStatus(
+    config,
+    channelId,
+    open && state !== "connected",
+  );
+
+  const startConnect = useCallback(() => {
+    setState("connecting");
+    setErrorMsg("");
+    connectChannel.mutate(channelId, {
+      onSuccess: () => setState("waiting_qr"),
+      onError: (err) => {
+        setState("error");
+        setErrorMsg(err.message || "Erro ao conectar");
+      },
+    });
+  }, [channelId, connectChannel]);
+
+  useEffect(() => {
+    if (!open) {
+      setState("connecting");
+      setErrorMsg("");
+      return;
+    }
+    startConnect();
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [open, channelId]);
+
+  useEffect(() => {
+    if (qrUrl && (state === "waiting_qr" || state === "showing_qr")) {
+      setState("showing_qr");
+    }
+  }, [qrUrl, state]);
+
+  useEffect(() => {
+    if (status?.connected && status?.logged_in) {
+      setState("connected");
+      toast.success("WhatsApp conectado com sucesso!");
+      setTimeout(() => onOpenChange(false), 1500);
+    }
+  }, [status, onOpenChange]);
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle>Conectar WhatsApp</DialogTitle>
+          <DialogDescription>
+            Escaneie o QR code com seu WhatsApp para conectar
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="flex min-h-[300px] items-center justify-center">
+          {state === "connecting" && (
+            <div className="flex flex-col items-center gap-3 text-muted-foreground">
+              <Loader2 className="h-8 w-8 animate-spin" />
+              <p className="text-sm">Iniciando conexão...</p>
+            </div>
+          )}
+
+          {state === "waiting_qr" && (
+            <div className="flex flex-col items-center gap-3 text-muted-foreground">
+              <Loader2 className="h-8 w-8 animate-spin" />
+              <p className="text-sm">Gerando QR code...</p>
+            </div>
+          )}
+
+          {state === "showing_qr" && qrUrl && (
+            <div className="flex flex-col items-center gap-3">
+              <img
+                src={qrUrl}
+                alt="QR Code WhatsApp"
+                className="h-64 w-64 rounded-lg border"
+              />
+              <p className="text-sm text-muted-foreground">
+                Abra o WhatsApp &gt; Aparelhos conectados &gt; Conectar
+              </p>
+            </div>
+          )}
+
+          {state === "connected" && (
+            <div className="flex flex-col items-center gap-3 text-green-600">
+              <Check className="h-12 w-12" />
+              <p className="text-lg font-medium">Conectado!</p>
+            </div>
+          )}
+
+          {state === "error" && (
+            <div className="flex flex-col items-center gap-3 text-destructive">
+              <AlertCircle className="h-8 w-8" />
+              <p className="text-sm">{errorMsg || "Erro ao gerar QR code"}</p>
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={startConnect}
+              >
+                <RefreshCw className="mr-2 h-4 w-4" />
+                Tentar novamente
+              </Button>
+            </div>
+          )}
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}

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,13 +15,13 @@ 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
 export * from "./hooks";
 
-// Components
+// Base Components
 export {
   ChatView,
   ChatInput,
@@ -46,3 +46,38 @@ export type {
   ChannelCardProps,
   WhatsappStatusBadgeProps,
 } from "./components";
+
+// Icons
+export { WhatsappIcon } from "./components/whatsapp-icon";
+
+// Dialogs & Forms
+export { WhatsappQrDialog } from "./components/whatsapp-qr-dialog";
+export type { WhatsappQrDialogProps } from "./components/whatsapp-qr-dialog";
+
+export { ChannelCreateDialog } from "./components/channel-create-dialog";
+export type { ChannelCreateDialogProps } from "./components/channel-create-dialog";
+
+export { ChannelEditDialog } from "./components/channel-edit-dialog";
+export type { ChannelEditDialogProps } from "./components/channel-edit-dialog";
+
+export { ContactFormDialog } from "./components/contact-form-dialog";
+export type { ContactFormDialogProps } from "./components/contact-form-dialog";
+
+export { ContactsTable } from "./components/contacts-table";
+export type { ContactsTableProps } from "./components/contacts-table";
+
+export { DataTable } from "./components/data-table";
+export type { DataTableProps } from "./components/data-table";
+
+// Page Compositions
+export { InboxPage } from "./components/inbox-page";
+export type { InboxPageProps } from "./components/inbox-page";
+
+export { ChannelsPage } from "./components/channels-page";
+export type { ChannelsPageProps } from "./components/channels-page";
+
+export { ContactsPage } from "./components/contacts-page";
+export type { ContactsPageProps } from "./components/contacts-page";
+
+export { ChatDashboard } from "./components/chat-dashboard";
+export type { ChatDashboardProps } from "./components/chat-dashboard";

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 };

package/src/components/ui/badge.tsx

@@ -1,44 +0,0 @@
-import * as React from "react";
-import { cva, type VariantProps } from "class-variance-authority";
-import { Slot } from "radix-ui";
-
-import { cn } from "../../lib/utils";
-
-const badgeVariants = cva(
-  "h-5 gap-1 rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium transition-all [&>svg]:size-3! inline-flex items-center justify-center w-fit whitespace-nowrap shrink-0 [&>svg]:pointer-events-none overflow-hidden",
-  {
-    variants: {
-      variant: {
-        default: "bg-primary text-primary-foreground",
-        secondary: "bg-secondary text-secondary-foreground",
-        destructive:
-          "bg-destructive/10 text-destructive dark:bg-destructive/20",
-        outline: "border-border text-foreground",
-        ghost: "hover:bg-muted hover:text-muted-foreground",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-    },
-  },
-);
-
-function Badge({
-  className,
-  variant = "default",
-  asChild = false,
-  ...props
-}: React.ComponentProps<"span"> &
-  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
-  const Comp = asChild ? Slot.Root : "span";
-
-  return (
-    <Comp
-      data-slot="badge"
-      className={cn(badgeVariants({ variant }), className)}
-      {...props}
-    />
-  );
-}
-
-export { Badge, badgeVariants };

package/src/components/ui/button.tsx

@@ -1,62 +0,0 @@
-import * as React from "react";
-import { cva, type VariantProps } from "class-variance-authority";
-import { Slot } from "radix-ui";
-
-import { cn } from "../../lib/utils";
-
-const buttonVariants = cva(
-  "focus-visible:border-ring focus-visible:ring-ring/50 rounded-md border border-transparent text-sm font-medium focus-visible:ring-3 [&_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 outline-none select-none",
-  {
-    variants: {
-      variant: {
-        default: "bg-primary text-primary-foreground hover:bg-primary/80",
-        outline:
-          "border-border bg-background hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 shadow-xs",
-        secondary:
-          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
-        ghost:
-          "hover:bg-muted hover:text-foreground dark:hover:bg-muted/50",
-        destructive:
-          "bg-destructive/10 hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:bg-destructive/20 text-destructive",
-        link: "text-primary underline-offset-4 hover:underline",
-      },
-      size: {
-        default: "h-9 gap-1.5 px-2.5",
-        xs: "h-6 gap-1 px-2 text-xs [&_svg:not([class*='size-'])]:size-3",
-        sm: "h-8 gap-1 px-2.5",
-        lg: "h-10 gap-1.5 px-2.5",
-        icon: "size-9",
-        "icon-xs": "size-6 [&_svg:not([class*='size-'])]:size-3",
-        "icon-sm": "size-8",
-        "icon-lg": "size-10",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-    },
-  },
-);
-
-function Button({
-  className,
-  variant = "default",
-  size = "default",
-  asChild = false,
-  ...props
-}: React.ComponentProps<"button"> &
-  VariantProps<typeof buttonVariants> & {
-    asChild?: boolean;
-  }) {
-  const Comp = asChild ? Slot.Root : "button";
-
-  return (
-    <Comp
-      data-slot="button"
-      className={cn(buttonVariants({ variant, size, className }))}
-      {...props}
-    />
-  );
-}
-
-export { Button, buttonVariants };

package/src/components/ui/command.tsx

@@ -1,106 +0,0 @@
-import * as React from "react";
-import { Command as CommandPrimitive } from "cmdk";
-import { Search } from "lucide-react";
-
-import { cn } from "../../lib/utils";
-
-function Command({
-  className,
-  ...props
-}: React.ComponentProps<typeof CommandPrimitive>) {
-  return (
-    <CommandPrimitive
-      data-slot="command"
-      className={cn(
-        "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-function CommandInput({
-  className,
-  ...props
-}: React.ComponentProps<typeof CommandPrimitive.Input>) {
-  return (
-    <div className="flex h-9 items-center gap-2 border-b px-3" data-slot="command-input-wrapper">
-      <Search className="size-4 shrink-0 opacity-50" />
-      <CommandPrimitive.Input
-        data-slot="command-input"
-        className={cn(
-          "flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
-          className,
-        )}
-        {...props}
-      />
-    </div>
-  );
-}
-
-function CommandList({
-  className,
-  ...props
-}: React.ComponentProps<typeof CommandPrimitive.List>) {
-  return (
-    <CommandPrimitive.List
-      data-slot="command-list"
-      className={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
-      {...props}
-    />
-  );
-}
-
-function CommandEmpty({
-  ...props
-}: React.ComponentProps<typeof CommandPrimitive.Empty>) {
-  return (
-    <CommandPrimitive.Empty
-      data-slot="command-empty"
-      className="py-6 text-center text-sm"
-      {...props}
-    />
-  );
-}
-
-function CommandGroup({
-  className,
-  ...props
-}: React.ComponentProps<typeof CommandPrimitive.Group>) {
-  return (
-    <CommandPrimitive.Group
-      data-slot="command-group"
-      className={cn(
-        "overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-function CommandItem({
-  className,
-  ...props
-}: React.ComponentProps<typeof CommandPrimitive.Item>) {
-  return (
-    <CommandPrimitive.Item
-      data-slot="command-item"
-      className={cn(
-        "relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none select-none data-[disabled=true]:pointer-events-none data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-export {
-  Command,
-  CommandInput,
-  CommandList,
-  CommandEmpty,
-  CommandGroup,
-  CommandItem,
-};