@snksergio/design-system 0.62.0 → 0.64.0

package/dist-lib/ai/exemplos/chat/components/QueueColumn/queue-column.tsx

@@ -0,0 +1,140 @@
+import { useMemo } from "react";
+import { Menu as MenuIcon, Search, X } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/Button/button";
+import { Chip, ChipGroup, ChipGroupItem } from "@/components/ui/Chip";
+import { Input } from "@/components/shadcn/input";
+import { CONVERSATIONS } from "../../chat-v2-mocks";
+import type { QueueFilter } from "../../chat-v2.types";
+import { ConversationListItem } from "../ConversationListItem";
+import { queueColumnStyles } from "./queue-column.styles";
+import type { QueueColumnProps } from "./queue-column.types";
+
+/**
+ * Coluna da fila de conversas (340px). Header com toggle de filtros + título +
+ * badge de contagem; Search + chips Todas/Não lidas/Lidas; lista scrollável.
+ */
+export function QueueColumn({
+  activeId,
+  onSelect,
+  searchQuery,
+  onSearchChange,
+  queueFilter,
+  onQueueFilterChange,
+  filtersCollapsed,
+  onToggleFilters,
+  className,
+}: QueueColumnProps) {
+  const s = queueColumnStyles();
+
+  const filtered = useMemo(() => {
+    const q = searchQuery.trim().toLowerCase();
+    const bySearch = q
+      ? CONVERSATIONS.filter(
+          (c) =>
+            c.name.toLowerCase().includes(q) ||
+            c.id.toLowerCase().includes(q) ||
+            c.last.toLowerCase().includes(q),
+        )
+      : CONVERSATIONS;
+    if (queueFilter === "unread") return bySearch.filter((c) => c.unread > 0);
+    if (queueFilter === "read") return bySearch.filter((c) => c.unread === 0);
+    return bySearch;
+  }, [searchQuery, queueFilter]);
+
+  const counts = useMemo(() => {
+    const q = searchQuery.trim().toLowerCase();
+    const bySearch = q
+      ? CONVERSATIONS.filter(
+          (c) =>
+            c.name.toLowerCase().includes(q) ||
+            c.id.toLowerCase().includes(q) ||
+            c.last.toLowerCase().includes(q),
+        )
+      : CONVERSATIONS;
+    return {
+      all: bySearch.length,
+      unread: bySearch.filter((c) => c.unread > 0).length,
+      read: bySearch.filter((c) => c.unread === 0).length,
+    };
+  }, [searchQuery]);
+
+  return (
+    <aside aria-label="Fila de conversas" className={cn(s.root(), className)}>
+      <header className={s.header()}>
+        <Button
+          color="secondary"
+          variant="ghost"
+          size="icon-sm"
+          onClick={onToggleFilters}
+          aria-label={filtersCollapsed ? "Expandir filtros" : "Colapsar filtros"}
+          aria-pressed={!filtersCollapsed}
+        >
+          <MenuIcon />
+        </Button>
+        <h2 className={s.title()}>Conversas</h2>
+        <Chip color="primary" variant="soft" size="sm" shape="rounded">
+          {filtered.length}
+        </Chip>
+      </header>
+
+      <div className={s.searchWrap()}>
+        <div className={s.searchInner()}>
+          <Search size={14} strokeWidth={1.8} className={s.searchIcon()} />
+          <Input
+            type="text"
+            placeholder="Buscar conversa, ID ou nome..."
+            value={searchQuery}
+            onChange={(e) => onSearchChange(e.target.value)}
+            className={s.searchInput()}
+          />
+          {searchQuery && (
+            <button
+              type="button"
+              onClick={() => onSearchChange("")}
+              className={s.searchClear()}
+              aria-label="Limpar busca"
+            >
+              <X size={12} />
+            </button>
+          )}
+        </div>
+      </div>
+
+      <div className={s.chipsWrap()}>
+        <ChipGroup
+          type="single"
+          value={queueFilter}
+          onValueChange={(v) => onQueueFilterChange((v || "all") as QueueFilter)}
+          size="md"
+          ariaLabel="Filtrar conversas"
+        >
+          <ChipGroupItem value="all">
+            Todas{counts.all > 0 && ` (${counts.all})`}
+          </ChipGroupItem>
+          <ChipGroupItem value="unread">
+            Não lidas{counts.unread > 0 && ` (${counts.unread})`}
+          </ChipGroupItem>
+          <ChipGroupItem value="read">
+            Lidas{counts.read > 0 && ` (${counts.read})`}
+          </ChipGroupItem>
+        </ChipGroup>
+      </div>
+
+      <div className={s.list()}>
+        {filtered.length === 0 ? (
+          <div className={s.empty()}>Nenhuma conversa encontrada.</div>
+        ) : (
+          filtered.map((c) => (
+            <ConversationListItem
+              key={c.id}
+              conv={c}
+              isActive={c.id === activeId}
+              onSelect={onSelect}
+            />
+          ))
+        )}
+      </div>
+    </aside>
+  );
+}

package/dist-lib/ai/exemplos/chat/components/QueueColumn/queue-column.types.ts

@@ -0,0 +1,13 @@
+import type { QueueFilter } from "../../chat-v2.types";
+
+export type QueueColumnProps = {
+  activeId: string;
+  onSelect: (id: string) => void;
+  searchQuery: string;
+  onSearchChange: (q: string) => void;
+  queueFilter: QueueFilter;
+  onQueueFilterChange: (f: QueueFilter) => void;
+  filtersCollapsed: boolean;
+  onToggleFilters: () => void;
+  className?: string;
+};

package/dist-lib/ai/exemplos/chat/components/RailItem/index.ts

@@ -0,0 +1 @@
+export { RailItem, type RailItemProps } from "./rail-item";

package/dist-lib/ai/exemplos/chat/components/RailItem/rail-item.styles.ts

@@ -0,0 +1,30 @@
+import { tv, type VariantProps } from "@/utils/tv";
+
+export const railItemStyles = tv({
+  slots: {
+    button: [
+      "relative grid place-items-center size-form-md rounded-radius-md cursor-pointer",
+      "transition-colors duration-150",
+    ].join(" "),
+    /** Badge dot 6px (top-right) pra "tem novidades". */
+    unreadDot:
+      "absolute top-[2px] right-[2px] size-[6px] rounded-radius-full bg-bg-brand",
+    /** Fallback dot (quando item não tem icon). */
+    fallbackDot: "size-[10px] rounded-radius-full",
+  },
+  variants: {
+    isActive: {
+      true: {
+        button: "bg-bg-muted dark:bg-bg-emphasis text-fg-default",
+      },
+      false: {
+        button: "text-fg-muted hover:bg-bg-muted hover:text-fg-default",
+      },
+    },
+  },
+  defaultVariants: {
+    isActive: false,
+  },
+});
+
+export type RailItemVariants = VariantProps<typeof railItemStyles>;

package/dist-lib/ai/exemplos/chat/components/RailItem/rail-item.tsx

@@ -0,0 +1,42 @@
+import type { FilterItem } from "../../chat-v2.types";
+import { railItemStyles } from "./rail-item.styles";
+
+export type RailItemProps = {
+  item: FilterItem;
+  isActive: boolean;
+  onClick: () => void;
+};
+
+/**
+ * Botão ícone compacto (32px) usado na `FiltersRail`. Suporta cor por
+ * `item.color`, ícone Lucide ou fallback dot, e badge "tem novidades".
+ */
+export function RailItem({ item, isActive, onClick }: RailItemProps) {
+  const Icon = item.icon;
+  const s = railItemStyles({ isActive });
+
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      aria-pressed={isActive}
+      title={`${item.name} (${item.count})`}
+      className={s.button()}
+    >
+      {Icon ? (
+        <Icon
+          size={16}
+          strokeWidth={1.8}
+          style={{ color: item.color ?? "currentColor" }}
+        />
+      ) : (
+        <span
+          className={s.fallbackDot()}
+          style={{ background: item.color ?? "var(--color-fg-muted)" }}
+          aria-hidden
+        />
+      )}
+      {item.hasUnread && <span className={s.unreadDot()} aria-label="tem novidades" />}
+    </button>
+  );
+}

package/dist-lib/ai/exemplos/chat/hooks/use-resizable.ts

@@ -0,0 +1,98 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+
+export type UseResizableOptions = {
+  /** Largura inicial (em px) antes do localStorage hidratar. */
+  initial: number;
+  /** Largura mínima permitida (em px). */
+  min: number;
+  /** Largura máxima permitida (em px). */
+  max: number;
+  /** Chave no localStorage pra persistir o último valor entre sessões. */
+  storageKey: string;
+};
+
+export type UseResizableResult = {
+  /** Largura atual em px (controlada pelo drag + hidratação localStorage). */
+  width: number;
+  /** Handler pra começar o drag — atribuir em `onMouseDown` do handle. */
+  onResizeStart: (e: React.MouseEvent) => void;
+};
+
+/**
+ * Hook de drag-resize horizontal pra split-panes com persist em localStorage.
+ *
+ * Comportamento: o handle é assumido como estando no **left edge** do painel —
+ * arrastar pra esquerda (delta negativo em X) **aumenta** a largura. Reverter o
+ * sinal de `delta` no handler caso o handle esteja no right edge.
+ *
+ * Hidratação:
+ *  - No mount, tenta ler `localStorage[storageKey]` e validar dentro de
+ *    [min, max]. Se válido, usa esse valor; senão, usa `initial`.
+ *  - Após hidratação, qualquer mudança de `width` é salva (com check de
+ *    `hydrated.current` pra evitar overwrite do valor persistido com o
+ *    `initial` no primeiro paint).
+ *
+ * Cleanup:
+ *  - `mousemove`/`mouseup` são listeners globais durante o drag. `mouseup`
+ *    remove os 2 + restaura `cursor` e `user-select` do `<body>`.
+ */
+export function useResizable({
+  initial,
+  min,
+  max,
+  storageKey,
+}: UseResizableOptions): UseResizableResult {
+  const [width, setWidth] = useState<number>(initial);
+  const hydrated = useRef(false);
+
+  // Hidrata do localStorage no mount
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    try {
+      const raw = window.localStorage.getItem(storageKey);
+      const n = raw ? Number(raw) : NaN;
+      if (!Number.isNaN(n) && n >= min && n <= max) setWidth(n);
+    } catch {
+      /* ignore */
+    }
+    hydrated.current = true;
+  }, [min, max, storageKey]);
+
+  // Salva quando muda (após hidratação)
+  useEffect(() => {
+    if (!hydrated.current || typeof window === "undefined") return;
+    try {
+      window.localStorage.setItem(storageKey, String(width));
+    } catch {
+      /* ignore */
+    }
+  }, [width, storageKey]);
+
+  const onResizeStart = useCallback(
+    (e: React.MouseEvent) => {
+      e.preventDefault();
+      const startX = e.clientX;
+      const startWidth = width;
+
+      const onMove = (ev: MouseEvent) => {
+        // Handle no left edge: drag pra ESQUERDA (delta < 0 em X) AUMENTA o width
+        const delta = startX - ev.clientX;
+        const next = Math.max(min, Math.min(max, startWidth + delta));
+        setWidth(next);
+      };
+      const onUp = () => {
+        document.removeEventListener("mousemove", onMove);
+        document.removeEventListener("mouseup", onUp);
+        document.body.style.cursor = "";
+        document.body.style.userSelect = "";
+      };
+      document.addEventListener("mousemove", onMove);
+      document.addEventListener("mouseup", onUp);
+      document.body.style.cursor = "col-resize";
+      document.body.style.userSelect = "none";
+    },
+    [width, min, max],
+  );
+
+  return { width, onResizeStart };
+}

package/dist-lib/ai/exemplos/chat/index.ts

@@ -0,0 +1 @@
+export { ChatScreen, default } from "./chat-screen";

package/dist-lib/ai/exemplos/clientes/_table-data.ts

@@ -0,0 +1,59 @@
+/**
+ * Dados base compartilhados. Espelha `src/preview/pages/_table-data.ts` do DS — que
+ * até v0.30.0 morava dentro do `TableDoc.tsx` e foi extraído pra lá em v0.30.1 pelo
+ * mesmo motivo que existe aqui: fixture compartilhada não pode viver numa Doc page.
+ * Mantém o exemplo autossuficiente — sem dependência da infra de preview.
+ */
+
+export const STATUSES: Record<string, { label: string; color: string }> = {
+  active: { label: "Ativo", color: "var(--color-fg-success)" },
+  pending: { label: "Pendente", color: "var(--color-fg-warning)" },
+  paused: { label: "Pausado", color: "var(--color-fg-info)" },
+  inactive: { label: "Inativo", color: "var(--color-fg-muted)" },
+};
+
+export type CategoryKind = "warning" | "info" | "success" | "neutral";
+export const CATEGORIES: Record<string, { label: string; kind: CategoryKind }> = {
+  royal: { label: "Royal", kind: "warning" },
+  licenciado: { label: "Licenciado", kind: "info" },
+  lead: { label: "Lead", kind: "success" },
+};
+
+export const AGENTS: Record<string, { name: string; initials: string; color: string }> = {
+  you: { name: "Voce", initials: "VC", color: "#0a3a2e" },
+  aline: { name: "Aline Castro", initials: "AC", color: "#f59e0b" },
+  carlos: { name: "Carlos Souza", initials: "CS", color: "#8754ec" },
+  maria: { name: "Maria Lima", initials: "ML", color: "#ef4444" },
+};
+
+export type ClientRow = {
+  id: string;
+  name: string;
+  initials: string;
+  avatarColor: string;
+  email: string;
+  phone: string;
+  statusId: keyof typeof STATUSES;
+  categoryId: keyof typeof CATEGORIES;
+  location: string;
+  value: number;
+  agentId: keyof typeof AGENTS;
+  createdAt: number;
+  lastContact: number;
+};
+
+const BASE_DATE = new Date("2026-04-15T12:00:00Z").getTime();
+const DAY_MS = 86400000;
+
+export const CLIENTS_MOCK: ClientRow[] = [
+  { id: "CLI-2401", name: "Maria Silva", initials: "MS", avatarColor: "#f59e0b", email: "maria.silva@example.com", phone: "+55 11 91234-5678", statusId: "active", categoryId: "royal", location: "São Paulo, SP", value: 4800, agentId: "you", createdAt: BASE_DATE - 65 * DAY_MS, lastContact: BASE_DATE - 2 * DAY_MS },
+  { id: "CLI-2402", name: "João Santos", initials: "JS", avatarColor: "#0a3a2e", email: "joao.santos@example.com", phone: "+55 11 92345-6789", statusId: "pending", categoryId: "licenciado", location: "Rio de Janeiro, RJ", value: 12300, agentId: "aline", createdAt: BASE_DATE - 58 * DAY_MS, lastContact: BASE_DATE - 5 * DAY_MS },
+  { id: "CLI-2403", name: "Carlos Oliveira", initials: "CO", avatarColor: "#8754ec", email: "carlos.oliveira@example.com", phone: "+55 11 93456-7890", statusId: "active", categoryId: "lead", location: "Belo Horizonte, MG", value: 2150, agentId: "carlos", createdAt: BASE_DATE - 51 * DAY_MS, lastContact: BASE_DATE - 1 * DAY_MS },
+  { id: "CLI-2404", name: "Ana Costa", initials: "AC", avatarColor: "#1cb280", email: "ana.costa@example.com", phone: "+55 11 94567-8901", statusId: "paused", categoryId: "royal", location: "Porto Alegre, RS", value: 8900, agentId: "maria", createdAt: BASE_DATE - 44 * DAY_MS, lastContact: BASE_DATE - 12 * DAY_MS },
+  { id: "CLI-2405", name: "Pedro Pereira", initials: "PP", avatarColor: "#ef4444", email: "pedro.pereira@example.com", phone: "+55 11 95678-9012", statusId: "inactive", categoryId: "lead", location: "Curitiba, PR", value: 1100, agentId: "you", createdAt: BASE_DATE - 37 * DAY_MS, lastContact: BASE_DATE - 30 * DAY_MS },
+  { id: "CLI-2406", name: "Lúcia Almeida", initials: "LA", avatarColor: "#f9a47a", email: "lucia.almeida@example.com", phone: "+55 11 96789-0123", statusId: "active", categoryId: "licenciado", location: "Recife, PE", value: 6750, agentId: "aline", createdAt: BASE_DATE - 30 * DAY_MS, lastContact: BASE_DATE - 3 * DAY_MS },
+  { id: "CLI-2407", name: "Roberto Souza", initials: "RS", avatarColor: "#0088cc", email: "roberto.souza@example.com", phone: "+55 11 97890-1234", statusId: "pending", categoryId: "royal", location: "São Paulo, SP", value: 15200, agentId: "carlos", createdAt: BASE_DATE - 23 * DAY_MS, lastContact: BASE_DATE - 7 * DAY_MS },
+  { id: "CLI-2408", name: "Fernanda Lima", initials: "FL", avatarColor: "#e1306c", email: "fernanda.lima@example.com", phone: "+55 11 98901-2345", statusId: "active", categoryId: "lead", location: "Rio de Janeiro, RJ", value: 3400, agentId: "maria", createdAt: BASE_DATE - 16 * DAY_MS, lastContact: BASE_DATE - 1 * DAY_MS },
+  { id: "CLI-2409", name: "Bruno Rodrigues", initials: "BR", avatarColor: "#70c748", email: "bruno.rodrigues@example.com", phone: "+55 11 99012-3456", statusId: "paused", categoryId: "licenciado", location: "Belo Horizonte, MG", value: 5600, agentId: "you", createdAt: BASE_DATE - 9 * DAY_MS, lastContact: BASE_DATE - 6 * DAY_MS },
+  { id: "CLI-2410", name: "Camila Ribeiro", initials: "CR", avatarColor: "#8754ec", email: "camila.ribeiro@example.com", phone: "+55 11 90123-4567", statusId: "active", categoryId: "royal", location: "Porto Alegre, RS", value: 9800, agentId: "aline", createdAt: BASE_DATE - 2 * DAY_MS, lastContact: BASE_DATE },
+];