@snksergio/design-system 0.62.0 → 0.63.0

package/dist-lib/ai/exemplos/clientes/components/DetailDrawer/detail-drawer.tsx

@@ -0,0 +1,303 @@
+import { useState, type ReactNode } from "react";
+import { ChevronDown, Pencil, Trash2 } from "lucide-react";
+import { Avatar, AvatarFallback } from "@/components/shadcn/avatar";
+import { Button } from "@/components/ui/Button/button";
+import { Chip } from "@/components/ui/Chip";
+import { FloatingPanel } from "@/components/ui/FloatingPanel";
+import { STATUSES, CATEGORIES, AGENTS } from "../../_table-data";
+import {
+  CATEGORY_KIND,
+  STATUS_DOT,
+  formatBRL,
+  formatShortDate,
+} from "../../clientes-showcase-mocks";
+import { detailDrawerStyles } from "./detail-drawer.styles";
+import type { DetailDrawerProps } from "./detail-drawer.types";
+
+/* ── Helpers internos ────────────────────────────────────────────── */
+
+function formatLongDate(ms: number): string {
+  if (!ms) return "—";
+  const d = new Date(ms);
+  return d.toLocaleDateString("pt-BR", {
+    day: "numeric",
+    month: "long",
+    year: "numeric",
+  });
+}
+
+type SectionId = "contact" | "meta" | "notes";
+
+/* ── DetailField (label : value) ────────────────────────────────── */
+
+type DetailFieldProps = {
+  label: string;
+  value: ReactNode;
+  s: ReturnType<typeof detailDrawerStyles>;
+};
+
+function DetailField({ label, value, s }: DetailFieldProps) {
+  return (
+    <div className={s.field()}>
+      <span className={s.fieldLabel()}>{label}</span>
+      <span className={s.fieldValue()}>{value || "—"}</span>
+    </div>
+  );
+}
+
+/* ── DetailSection (collapsible) ─────────────────────────────────── */
+
+type DetailSectionProps = {
+  id: SectionId;
+  title: string;
+  open: boolean;
+  onToggle: (id: SectionId) => void;
+  children: ReactNode;
+  s: ReturnType<typeof detailDrawerStyles>;
+};
+
+function DetailSection({
+  id,
+  title,
+  open,
+  onToggle,
+  children,
+  s,
+}: DetailSectionProps) {
+  return (
+    <section className={s.section()}>
+      <button
+        type="button"
+        className={s.sectionHead()}
+        onClick={() => onToggle(id)}
+        aria-expanded={open}
+      >
+        <span>{title}</span>
+        <ChevronDown
+          className={[s.sectionChev(), open ? s.sectionChevOpen() : ""].join(" ")}
+        />
+      </button>
+      {open && <div className={s.sectionBody()}>{children}</div>}
+    </section>
+  );
+}
+
+/* ── DetailDrawer ────────────────────────────────────────────────── */
+
+/**
+ * Drawer "Detalhes do cliente" — usa `<FloatingPanel>` do DS (non-modal,
+ * resizable, maximizable, responsive). Replica visual do `TblDetailsPanel`
+ * do sandbox /design-and-table-v2.
+ */
+export function DetailDrawer({
+  row,
+  onClose,
+  onEdit,
+  onDelete,
+  onSave,
+}: DetailDrawerProps) {
+  const s = detailDrawerStyles();
+  const [openSections, setOpenSections] = useState<Set<SectionId>>(
+    () => new Set(["contact", "meta", "notes"]),
+  );
+
+  const toggle = (id: SectionId) => {
+    setOpenSections((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
+      return next;
+    });
+  };
+
+  // Mantém ordem dos hooks estável independente de `row` — depois do toggle.
+  if (!row) return null;
+
+  const status = STATUSES[row.statusId];
+  const cat = CATEGORIES[row.categoryId as keyof typeof CATEGORIES];
+  const agent = AGENTS[row.agentId as keyof typeof AGENTS];
+  const agentInitials =
+    agent?.name.split(" ").map((p) => p[0]).join("").slice(0, 2) ?? "?";
+
+  return (
+    <FloatingPanel
+      open={row !== null}
+      onOpenChange={(open) => {
+        if (!open) onClose();
+      }}
+      side="right"
+      size="md"
+      resizable
+      maximizable
+      // Sections internas (DetailSection) gerenciam o próprio padding edge-to-edge.
+      bodyPadded={false}
+      resizableStorageKey="clientes-showcase.detail-drawer.width"
+      titleSlot={
+        <div className="flex items-center gap-gp-md min-w-0">
+          <Avatar
+            className="size-[40px] shrink-0"
+            style={{ background: row.avatarColor }}
+          >
+            <AvatarFallback className="bg-transparent text-white text-body-md font-bold">
+              {row.initials}
+            </AvatarFallback>
+          </Avatar>
+          <div className="flex flex-col min-w-0 flex-1">
+            <div className="text-body-md font-semibold text-fg-default whitespace-nowrap overflow-hidden text-ellipsis">
+              {row.name}
+            </div>
+            <div className="flex items-center gap-[6px] mt-[2px] text-body-xs font-normal text-fg-muted">
+              <span>{row.id}</span>
+              <span className="opacity-50">·</span>
+              <span className="inline-flex items-center gap-[6px]">
+                <span
+                  className="inline-block size-[8px] rounded-radius-full shrink-0"
+                  style={{ background: STATUS_DOT[row.statusId] ?? status?.color }}
+                  aria-hidden
+                />
+                {status?.label}
+              </span>
+            </div>
+          </div>
+        </div>
+      }
+      headerActions={
+        <>
+          <Button
+            variant="soft"
+            color="secondary"
+            size="icon-sm"
+            aria-label="Editar"
+            onClick={() => onEdit?.(row)}
+          >
+            <Pencil />
+          </Button>
+          <Button
+            variant="soft"
+            color="critical"
+            size="icon-sm"
+            aria-label="Excluir"
+            onClick={() => onDelete?.(row)}
+          >
+            <Trash2 />
+          </Button>
+        </>
+      }
+      footer={
+        <>
+          <Button variant="outline" color="secondary" size="sm" onClick={onClose}>
+            Cancelar
+          </Button>
+          <Button
+            variant="filled"
+            color="primary"
+            size="sm"
+            onClick={() => onSave?.(row)}
+          >
+            Salvar alterações
+          </Button>
+        </>
+      }
+    >
+      <DetailSection
+        id="contact"
+        title="Contato"
+        open={openSections.has("contact")}
+        onToggle={toggle}
+        s={s}
+      >
+        <DetailField
+          label="Email"
+          value={
+            <a
+              href={`mailto:${row.email}`}
+              className="text-fg-brand hover:underline"
+            >
+              {row.email}
+            </a>
+          }
+          s={s}
+        />
+        <DetailField
+          label="Telefone"
+          value={
+            <a
+              href={`tel:${row.phone.replace(/\D/g, "")}`}
+              className="text-fg-brand hover:underline"
+            >
+              {row.phone}
+            </a>
+          }
+          s={s}
+        />
+        <DetailField label="Localização" value={row.location} s={s} />
+      </DetailSection>
+
+      <DetailSection
+        id="meta"
+        title="Atendimento"
+        open={openSections.has("meta")}
+        onToggle={toggle}
+        s={s}
+      >
+        <DetailField label="ID" value={row.id} s={s} />
+        <DetailField
+          label="Categoria"
+          value={
+            cat ? (
+              <Chip
+                color={CATEGORY_KIND[row.categoryId] ?? "info"}
+                variant="soft"
+                size="sm"
+                shape="pill"
+              >
+                {cat.label}
+              </Chip>
+            ) : (
+              "—"
+            )
+          }
+          s={s}
+        />
+        <DetailField
+          label="Atribuído a"
+          value={
+            agent ? (
+              <span className="inline-flex items-center gap-gp-sm">
+                <Avatar
+                  className="size-[22px]"
+                  style={{ background: agent.color }}
+                >
+                  <AvatarFallback className="bg-transparent text-white text-caption-xs font-bold">
+                    {agentInitials}
+                  </AvatarFallback>
+                </Avatar>
+                {agent.name}
+              </span>
+            ) : (
+              "—"
+            )
+          }
+          s={s}
+        />
+        <DetailField label="Valor" value={formatBRL(row.value)} s={s} />
+        <DetailField label="Criado em" value={formatLongDate(row.createdAt)} s={s} />
+        <DetailField
+          label="Último contato"
+          value={formatShortDate(row.lastContact)}
+          s={s}
+        />
+      </DetailSection>
+
+      <DetailSection
+        id="notes"
+        title="Anotações"
+        open={openSections.has("notes")}
+        onToggle={toggle}
+        s={s}
+      >
+        <p className="text-body-xs font-normal text-fg-muted">Sem anotações.</p>
+      </DetailSection>
+    </FloatingPanel>
+  );
+}

package/dist-lib/ai/exemplos/clientes/components/DetailDrawer/detail-drawer.types.ts

@@ -0,0 +1,14 @@
+import type { ClientRow } from "../../_table-data";
+
+export type DetailDrawerProps = {
+  /** Cliente em exibição. Quando `null` o drawer fica desmontado. */
+  row: ClientRow | null;
+  /** Fecha o drawer (chamado por ESC, X do header e Cancelar). */
+  onClose: () => void;
+  /** Disparado pelo botão Editar (ícone Pencil no header). Opcional. */
+  onEdit?: (row: ClientRow) => void;
+  /** Disparado pelo botão Excluir (ícone Trash no header). Opcional. */
+  onDelete?: (row: ClientRow) => void;
+  /** Disparado pelo CTA "Salvar alterações" do footer. Opcional. */
+  onSave?: (row: ClientRow) => void;
+};

package/dist-lib/ai/exemplos/clientes/components/DetailDrawer/index.ts

@@ -0,0 +1,2 @@
+export { DetailDrawer } from "./detail-drawer";
+export type { DetailDrawerProps } from "./detail-drawer.types";

package/dist-lib/ai/exemplos/clientes/components/NovoClienteDrawer/index.ts

@@ -0,0 +1,2 @@
+export { NovoClienteDrawer } from "./novo-cliente-drawer";
+export type { NovoClienteDrawerProps } from "./novo-cliente-drawer";

package/dist-lib/ai/exemplos/clientes/components/NovoClienteDrawer/novo-cliente-drawer.tsx

@@ -0,0 +1,207 @@
+import { useEffect, useState } from "react";
+import { Panel } from "@/components/ui/Panel";
+import { Button } from "@/components/ui/Button/button";
+import {
+  FormField,
+  FormFieldInput,
+  FormFieldSelect,
+  FormFieldTextarea,
+} from "@/components/ui/FormField";
+import { ChipGroup, ChipGroupItem } from "@/components/ui/Chip";
+import { STATUSES, CATEGORIES } from "../../_table-data";
+import { CITIES, STATUS_DOT } from "../../clientes-showcase-mocks";
+import { drawerFormStyles } from "../../clientes-showcase.styles";
+import type { NovoClienteFormData } from "../../clientes-showcase.types";
+
+const INITIAL_FORM: NovoClienteFormData = {
+  name: "",
+  email: "",
+  whatsapp: "",
+  statusId: "active",
+  categoryId: "lead",
+  city: "",
+  value: 0,
+  notes: "",
+};
+
+export type NovoClienteDrawerProps = {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  /** Disparado ao confirmar — drawer fecha automaticamente após o submit. */
+  onSubmit?: (data: NovoClienteFormData) => void;
+};
+
+/**
+ * Drawer "Novo cliente" — replica visual do TblClientFormDrawer
+ * (sandbox /design-and-table-v2), recompilado em cima dos componentes do DS:
+ *   Panel + FormField (Input / Select / Textarea) + ChipGroup + Button.
+ *
+ * Layout (top → bottom):
+ *   1. Nome*           — full width
+ *   2. Email + WhatsApp — 2 cols
+ *   3. Status           — ChipGroup com dot colorido
+ *   4. Categoria        — ChipGroup
+ *   5. Cidade + Valor R$ — 2 cols
+ *   6. Notas            — textarea full width
+ */
+export function NovoClienteDrawer({
+  open,
+  onOpenChange,
+  onSubmit,
+}: NovoClienteDrawerProps) {
+  const s = drawerFormStyles();
+  const [form, setForm] = useState<NovoClienteFormData>(INITIAL_FORM);
+
+  // Reseta form sempre que abrir
+  useEffect(() => {
+    if (open) setForm(INITIAL_FORM);
+  }, [open]);
+
+  const canSubmit = form.name.trim().length > 0;
+
+  const handleSubmit = () => {
+    if (!canSubmit) return;
+    onSubmit?.(form);
+    onOpenChange(false);
+  };
+
+  return (
+    <Panel
+      open={open}
+      onOpenChange={onOpenChange}
+      title="Novo cliente"
+      side="right"
+      size="md"
+      footer={
+        <>
+          <Button
+            variant="outline"
+            color="secondary"
+            size="md"
+            onClick={() => onOpenChange(false)}
+          >
+            Cancelar
+          </Button>
+          <Button
+            variant="filled"
+            color="primary"
+            size="md"
+            disabled={!canSubmit}
+            onClick={handleSubmit}
+          >
+            Criar cliente
+          </Button>
+        </>
+      }
+    >
+      <FormFieldInput
+        label="Nome"
+        required
+        placeholder="Maria Silva"
+        value={form.name}
+        onChange={(e) => setForm((f) => ({ ...f, name: e.target.value }))}
+      />
+
+      <div className={s.twoCols()}>
+        <FormFieldInput
+          label="Email"
+          type="email"
+          placeholder="cliente@exemplo.com"
+          value={form.email}
+          onChange={(e) => setForm((f) => ({ ...f, email: e.target.value }))}
+        />
+        <FormFieldInput
+          label="WhatsApp"
+          type="tel"
+          placeholder="55 11 99999-9999"
+          value={form.whatsapp}
+          onChange={(e) => setForm((f) => ({ ...f, whatsapp: e.target.value }))}
+        />
+      </div>
+
+      <FormField label="Status">
+        {() => (
+          <ChipGroup
+            type="single"
+            value={form.statusId}
+            onValueChange={(v) =>
+              v &&
+              setForm((f) => ({
+                ...f,
+                statusId: v as keyof typeof STATUSES,
+              }))
+            }
+            size="md"
+            shape="pill"
+            ariaLabel="Status do cliente"
+          >
+            {Object.entries(STATUSES).map(([id, st]) => (
+              <ChipGroupItem key={id} value={id}>
+                <span
+                  className={s.statusDot()}
+                  style={{ background: STATUS_DOT[id] ?? st.color }}
+                  aria-hidden
+                />
+                {st.label}
+              </ChipGroupItem>
+            ))}
+          </ChipGroup>
+        )}
+      </FormField>
+
+      <FormField label="Categoria">
+        {() => (
+          <ChipGroup
+            type="single"
+            value={form.categoryId}
+            onValueChange={(v) =>
+              v &&
+              setForm((f) => ({
+                ...f,
+                categoryId: v as keyof typeof CATEGORIES,
+              }))
+            }
+            size="md"
+            shape="pill"
+            ariaLabel="Categoria do cliente"
+          >
+            {Object.entries(CATEGORIES).map(([id, cat]) => (
+              <ChipGroupItem key={id} value={id}>
+                {cat.label}
+              </ChipGroupItem>
+            ))}
+          </ChipGroup>
+        )}
+      </FormField>
+
+      <div className={s.twoCols()}>
+        <FormFieldSelect
+          label="Cidade"
+          placeholder="Selecionar..."
+          value={form.city || undefined}
+          onValueChange={(v) => setForm((f) => ({ ...f, city: v }))}
+          options={CITIES.map((c) => ({ value: c, label: c }))}
+        />
+        <FormFieldInput
+          label="Valor (R$)"
+          type="number"
+          startAddon="R$"
+          value={String(form.value)}
+          onChange={(e) =>
+            setForm((f) => ({ ...f, value: Number(e.target.value) }))
+          }
+          min={0}
+          step={0.01}
+        />
+      </div>
+
+      <FormFieldTextarea
+        label="Notas"
+        placeholder="Observações sobre o cliente..."
+        rows={4}
+        value={form.notes}
+        onChange={(e) => setForm((f) => ({ ...f, notes: e.target.value }))}
+      />
+    </Panel>
+  );
+}

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

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

package/dist-lib/ai/exemplos/edit-page/components/StepNav.tsx

@@ -0,0 +1,81 @@
+import type { LucideIcon } from "@/lib/lucide-types";
+import { cn } from "@/lib/utils";
+
+export type Step = {
+  id: string;
+  icon: LucideIcon;
+  title: string;
+  description: string;
+};
+
+/**
+ * Nav lateral (stepper) da tela de edição — itens com ícone + título +
+ * descrição; o ativo ganha destaque de marca. Clicar seleciona + rola até a
+ * seção. Composição local do showcase usando tokens DS.
+ */
+export function StepNav({
+  steps,
+  activeId,
+  onSelect,
+  className,
+}: {
+  steps: Step[];
+  activeId: string;
+  onSelect: (id: string) => void;
+  className?: string;
+}) {
+  return (
+    <nav
+      className={cn(
+        "flex flex-col gap-gp-xs rounded-radius-lg border border-border-subtle bg-bg-surface p-pad-md shadow-sh-sm",
+        className,
+      )}
+      aria-label="Etapas do pedido"
+    >
+      {steps.map((s) => {
+        const Icon = s.icon;
+        const active = s.id === activeId;
+        return (
+          <button
+            key={s.id}
+            type="button"
+            onClick={() => onSelect(s.id)}
+            aria-current={active ? "step" : undefined}
+            className={cn(
+              "flex items-start gap-gp-md rounded-radius-md border p-pad-lg text-left transition-colors",
+              active
+                ? "border-border-brand bg-bg-brand-subtle"
+                : "border-transparent hover:bg-bg-muted",
+            )}
+          >
+            <span
+              className={cn(
+                "grid size-8 shrink-0 place-items-center rounded-radius-md border",
+                active
+                  ? "border-transparent bg-bg-brand text-fg-on-brand"
+                  // bg-surface (branco no light) + borda: contrasta tanto no card
+                  // quanto no hover cinza (senão o ícone funde com o hover).
+                  : "border-border-subtle bg-bg-surface text-fg-muted",
+              )}
+            >
+              <Icon className="size-icon-sm" />
+            </span>
+            <span className="min-w-0 flex-1">
+              <span
+                className={cn(
+                  "block text-body-sm font-semibold",
+                  active ? "text-fg-brand" : "text-fg-default",
+                )}
+              >
+                {s.title}
+              </span>
+              <span className="mt-gp-2xs block text-caption-sm leading-snug text-fg-muted">
+                {s.description}
+              </span>
+            </span>
+          </button>
+        );
+      })}
+    </nav>
+  );
+}

package/dist-lib/ai/exemplos/edit-page/components/section-card.tsx

@@ -0,0 +1,85 @@
+import type { ReactNode } from "react";
+import { cn } from "@/lib/utils";
+
+/**
+ * Card de seção flat — bg-surface + borda sutil, sem elevação pesada.
+ * Espelha o visual dos blocos da referência (Products ordered, Customer, etc).
+ * Composição local do showcase consumindo tokens DS via classes.
+ */
+export function SectionCard({
+  title,
+  icon,
+  action,
+  children,
+  className,
+  bodyClassName,
+}: {
+  title?: ReactNode;
+  icon?: ReactNode;
+  action?: ReactNode;
+  children: ReactNode;
+  className?: string;
+  bodyClassName?: string;
+}) {
+  const hasHeader = !!(title || action);
+  const header = hasHeader && (
+    // Header: padding 16px (pad-2xl) + divider full-bleed embaixo.
+    <header className="flex items-center justify-between gap-gp-md border-b border-border-subtle bg-bg-subtle p-pad-2xl">
+      {/* gap ícone↔título = 12px (gap-gp-md) */}
+      <div className="flex items-center gap-gp-md">
+        {icon && (
+          <span className="grid size-8 shrink-0 place-items-center rounded-radius-md bg-bg-muted text-fg-muted">
+            {icon}
+          </span>
+        )}
+        {title && (
+          <h2 className="text-title-md font-semibold text-fg-default">
+            {title}
+          </h2>
+        )}
+      </div>
+      {action}
+    </header>
+  );
+
+  return (
+    <section className={cn("overflow-hidden rounded-radius-lg border border-border-subtle bg-bg-surface shadow-sh-sm", className)}>
+      {header}
+      {/* body: padding 16px (pad-2xl) — uniforme; abaixo do divider quando há header */}
+      <div className={cn("p-pad-2xl", bodyClassName)}>{children}</div>
+    </section>
+  );
+}
+
+/** Divisória sutil de seção. `my` controla o respiro vertical (default md). */
+export function SectionDivider({ className }: { className?: string }) {
+  return <div className={cn("h-px bg-border-subtle", className)} />;
+}
+
+/** Par label-uppercase + valor (grid de Customer/Shipping/Billing Information). */
+export function Field({
+  label,
+  value,
+  accent,
+}: {
+  label: string;
+  value: ReactNode;
+  /** Destaca o valor com a cor de marca (links, ids de transação, etc). */
+  accent?: boolean;
+}) {
+  return (
+    <div className="flex flex-col gap-gp-2xs">
+      <span className="text-caption-sm font-medium uppercase tracking-wider text-fg-muted">
+        {label}
+      </span>
+      <span
+        className={cn(
+          "text-body-md",
+          accent ? "text-fg-brand" : "text-fg-default",
+        )}
+      >
+        {value}
+      </span>
+    </div>
+  );
+}