@snksergio/design-system 0.62.0 → 0.63.0

package/dist-lib/ai/exemplos/order-detail/components/OverviewTab.tsx

@@ -0,0 +1,200 @@
+import { Mail, Phone } from "lucide-react";
+import { Avatar } from "@/components/ui/avatar-ig";
+import { Chip } from "@/components/ui/Chip";
+import { SectionCard, SectionDivider } from "./section-card";
+import { formatBRL } from "../order-mocks";
+import type { Order } from "../order.types";
+
+export function OverviewTab({ order }: { order: Order }) {
+  const c = order.customer;
+  const addr = order.shippingAddress;
+
+  return (
+    <div className="grid grid-cols-1 gap-gp-2xl lg:grid-cols-3">
+      {/* Coluna principal */}
+      <div className="flex flex-col gap-gp-2xl lg:col-span-2">
+        {/* Produtos */}
+        <SectionCard title="Produtos do pedido">
+          <ul className="flex flex-col">
+            {order.items.map((item, i) => (
+              <li
+                key={item.id}
+                className={
+                  "flex items-center gap-gp-lg py-pad-lg" +
+                  (i > 0 ? " border-t border-border-subtle" : "")
+                }
+              >
+                <span
+                  className="size-12 shrink-0 rounded-radius-md"
+                  style={{ backgroundColor: `${item.thumb}1f` }}
+                  aria-hidden="true"
+                />
+                <div className="min-w-0 flex-1">
+                  <p className="text-body-md font-semibold text-fg-default">
+                    {item.name}
+                  </p>
+                  <p className="text-caption-sm text-fg-muted">
+                    SKU: {item.sku}
+                  </p>
+                </div>
+                <div className="shrink-0 text-right">
+                  <p className="text-body-md font-semibold text-fg-default [font-variant-numeric:tabular-nums]">
+                    {formatBRL(item.price)}
+                  </p>
+                  <p className="text-caption-sm text-fg-muted">
+                    Qtd: {item.qty}
+                  </p>
+                </div>
+              </li>
+            ))}
+          </ul>
+        </SectionCard>
+
+        {/* Pagamento */}
+        <SectionCard
+          title="Pagamento"
+          action={
+            <Chip color="success" variant="soft" size="sm" shape="pill">
+              Pago
+            </Chip>
+          }
+        >
+          <dl className="flex flex-col gap-gp-md">
+            <Row label="Subtotal" value={formatBRL(order.subtotal)} />
+            <Row label="Frete" value={formatBRL(order.shipping)} />
+            <Row label="Impostos" value={formatBRL(order.tax)} />
+            {order.discountValue != null && (
+              <Row
+                label={`Desconto (${order.discountCode})`}
+                value={`- ${formatBRL(order.discountValue)}`}
+                accent
+              />
+            )}
+            <div className="mt-gp-xs flex items-center justify-between border-t border-border-subtle pt-pad-lg">
+              <dt className="text-body-md font-semibold text-fg-default">
+                Total
+              </dt>
+              <dd className="text-body-md font-semibold text-fg-default [font-variant-numeric:tabular-nums]">
+                {formatBRL(order.total)}
+              </dd>
+            </div>
+            <div className="flex items-center justify-between">
+              <dt className="text-title-md font-semibold text-fg-default">
+                Pago pelo cliente
+              </dt>
+              <dd className="text-title-md font-semibold text-fg-default [font-variant-numeric:tabular-nums]">
+                {formatBRL(order.total)}
+              </dd>
+            </div>
+          </dl>
+        </SectionCard>
+      </div>
+
+      {/* Coluna lateral */}
+      <div className="flex flex-col gap-gp-2xl">
+        <SectionCard title="Cliente">
+          <div className="flex items-center gap-gp-md">
+            <Avatar size="lg" colorHex={c.colorHex} aria-label={`${c.firstName} ${c.lastName}`}>
+              {c.initials}
+            </Avatar>
+            <div className="min-w-0">
+              <p className="text-body-md font-semibold text-fg-default">
+                {c.firstName} {c.lastName}
+              </p>
+              <p className="text-caption-sm text-fg-muted">
+                {c.previousOrders} pedidos anteriores
+              </p>
+            </div>
+          </div>
+
+          <SectionDivider className="my-gp-2xl" />
+
+          <div className="flex flex-col gap-gp-md">
+            <a
+              href={`mailto:${c.email}`}
+              className="flex items-center gap-gp-sm text-body-sm text-fg-default hover:text-fg-brand"
+            >
+              <Mail className="size-icon-sm shrink-0 text-fg-muted" />
+              <span className="truncate">{c.email}</span>
+            </a>
+            <span className="flex items-center gap-gp-sm text-body-sm text-fg-default">
+              <Phone className="size-icon-sm shrink-0 text-fg-muted" />
+              {c.phone}
+            </span>
+          </div>
+
+          <SectionDivider className="my-gp-2xl" />
+
+          <AddressBlock
+            title="Endereço de entrega"
+            lines={[
+              addr.line1,
+              addr.line2,
+              `${addr.city} — ${addr.state}`,
+              addr.zip,
+              addr.country,
+            ]}
+          />
+
+          <SectionDivider className="my-gp-2xl" />
+
+          <AddressBlock
+            title="Endereço de cobrança"
+            lines={[
+              order.billing.address,
+              order.billing.cityState,
+              order.billing.country,
+            ]}
+          />
+        </SectionCard>
+
+        <SectionCard title="Observação do cliente">
+          <p className="text-body-sm leading-relaxed text-fg-muted">
+            {order.note}
+          </p>
+        </SectionCard>
+      </div>
+    </div>
+  );
+}
+
+function Row({
+  label,
+  value,
+  accent,
+}: {
+  label: string;
+  value: string;
+  accent?: boolean;
+}) {
+  return (
+    <div className="flex items-center justify-between">
+      <dt className="text-body-sm text-fg-muted">{label}</dt>
+      <dd
+        className={
+          "text-body-sm [font-variant-numeric:tabular-nums] " +
+          (accent ? "text-fg-success" : "text-fg-default")
+        }
+      >
+        {value}
+      </dd>
+    </div>
+  );
+}
+
+function AddressBlock({ title, lines }: { title: string; lines: (string | undefined)[] }) {
+  return (
+    <div>
+      <p className="mb-gp-xs text-caption-sm font-semibold uppercase tracking-wider text-fg-muted">
+        {title}
+      </p>
+      <address className="not-italic text-body-sm leading-relaxed text-fg-default">
+        {lines.filter(Boolean).map((l, i) => (
+          <span key={i} className="block">
+            {l}
+          </span>
+        ))}
+      </address>
+    </div>
+  );
+}

package/dist-lib/ai/exemplos/order-detail/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>
+  );
+}

package/dist-lib/ai/exemplos/order-detail/index.ts

@@ -0,0 +1 @@
+export { OrderDetailScreen, default } from "./order-detail-screen";

package/dist-lib/ai/exemplos/order-detail/order-detail-screen.tsx

@@ -0,0 +1,119 @@
+import { useState } from "react";
+import {
+  ChevronLeft,
+  ChevronRight,
+  MoreHorizontal,
+  Pencil,
+  RotateCcw,
+} from "lucide-react";
+import { Button } from "@/components/ui/Button/button";
+import { Chip } from "@/components/ui/Chip";
+import { PageHeader } from "@/components/ui/PageHeader";
+import { Tabs, TabsList, TabsTrigger } from "@/components/shadcn/tabs";
+import { ORDER } from "./order-mocks";
+import { OverviewTab } from "./components/OverviewTab";
+import { DetailsTab } from "./components/DetailsTab";
+import { ActivityTab } from "./components/ActivityTab";
+import { CommentsTab } from "./components/CommentsTab";
+import { AttachmentsTab } from "./components/AttachmentsTab";
+
+/**
+ * OrderDetailScreen — conteúdo da página de detalhe de pedido consumindo o DS:
+ * PageHeader (título + status + ações) + Tabs (Visão geral / Detalhes /
+ * Atividade / Comentários / Anexos). Domínio iGreen (energia solar).
+ *
+ * Sem shell — embrulhe no seu AppShell/layout. O parent precisa dar altura
+ * (h-full/flex) pro conteúdo preencher.
+ */
+export function OrderDetailScreen() {
+  const [tab, setTab] = useState("overview");
+
+  const order = ORDER;
+
+  return (
+    <div className="flex flex-col h-full min-h-0 gap-gp-2xl">
+      <PageHeader
+        title={`Pedido #${order.id}`}
+        description={order.placedAt}
+        hideTextOnMobile={false}
+        badge={
+          <span className="flex items-center gap-gp-sm">
+            <Chip color="success" variant="soft" size="sm" shape="pill">
+              Pago
+            </Chip>
+            <Chip color="info" variant="soft" size="sm" shape="pill">
+              Enviado
+            </Chip>
+          </span>
+        }
+        actions={
+          <>
+            <Button
+              variant="outline"
+              color="secondary"
+              size="md"
+              iconLeft={<RotateCcw />}
+            >
+              Reabastecer
+            </Button>
+            <Button
+              variant="outline"
+              color="secondary"
+              size="md"
+              iconLeft={<Pencil />}
+            >
+              Editar
+            </Button>
+            <Button
+              variant="outline"
+              color="secondary"
+              size="icon-md"
+              aria-label="Mais ações"
+            >
+              <MoreHorizontal />
+            </Button>
+            <Button
+              variant="outline"
+              color="secondary"
+              size="icon-md"
+              aria-label="Pedido anterior"
+            >
+              <ChevronLeft />
+            </Button>
+            <Button
+              variant="outline"
+              color="secondary"
+              size="icon-md"
+              aria-label="Próximo pedido"
+            >
+              <ChevronRight />
+            </Button>
+          </>
+        }
+      >
+        <Tabs value={tab} onValueChange={setTab}>
+          <TabsList>
+            <TabsTrigger value="overview">Visão geral</TabsTrigger>
+            <TabsTrigger value="details">Detalhes</TabsTrigger>
+            <TabsTrigger value="activity">Atividade</TabsTrigger>
+            <TabsTrigger value="comments">
+              Comentários
+              <Chip color="danger" variant="soft" size="sm" shape="pill">
+                {order.comments.length}
+              </Chip>
+            </TabsTrigger>
+            <TabsTrigger value="attachments">Anexos</TabsTrigger>
+          </TabsList>
+        </Tabs>
+      </PageHeader>
+
+      {tab === "overview" && <OverviewTab order={order} />}
+      {tab === "details" && <DetailsTab order={order} />}
+      {tab === "activity" && <ActivityTab order={order} />}
+      {tab === "comments" && <CommentsTab order={order} />}
+      {tab === "attachments" && <AttachmentsTab order={order} />}
+    </div>
+  );
+}
+
+export default OrderDetailScreen;

package/dist-lib/ai/exemplos/order-detail/order-mocks.ts

@@ -0,0 +1,186 @@
+import type { Order } from "./order.types";
+
+/** Formata número como BRL. */
+export const formatBRL = (v: number): string =>
+  v.toLocaleString("pt-BR", { style: "currency", currency: "BRL" });
+
+/**
+ * Pedido mock no domínio iGreen (energia solar). Espelha a estrutura da
+ * referência (Overview / Details / Activity / Comments / Attachments) com
+ * dados coerentes ao resto do showcase.
+ */
+export const ORDER: Order = {
+  id: "84021",
+  status: "paid",
+  fulfillment: "fulfilled",
+  placedAt: "8 de janeiro de 2024 às 21:48 · via Pedidos rascunho",
+  source: "Pedidos rascunho",
+
+  items: [
+    {
+      id: "SOL-4KWP-098",
+      name: "Kit Solar Residencial 4 kWp",
+      sku: "SOL-4KWP-098",
+      price: 12480,
+      qty: 1,
+      thumb: "#22A06B",
+    },
+    {
+      id: "INV-5KW-336",
+      name: "Inversor Híbrido 5 kW",
+      sku: "INV-5KW-336",
+      price: 4890,
+      qty: 1,
+      thumb: "#3B82F6",
+    },
+    {
+      id: "PNL-550-368",
+      name: "Painel Monocristalino 550 W",
+      sku: "PNL-550-368",
+      price: 689,
+      qty: 8,
+      thumb: "#F59E0B",
+    },
+  ],
+  subtotal: 22882,
+  shipping: 320,
+  tax: 1373,
+  discountCode: "INVERNO2024",
+  discountLabel: "-10%",
+  discountValue: 2288.2,
+  total: 22286.8,
+
+  customer: {
+    firstName: "Helena",
+    middleName: "Rocha",
+    lastName: "Martins",
+    initials: "HM",
+    colorHex: "#22A06B",
+    email: "helena.martins@example.com",
+    phone: "+55 (31) 99845-2014",
+    customerId: "#CLI-52365",
+    accountType: "Premium",
+    registeredAt: "17/12/2023",
+    active: true,
+    previousOrders: 11,
+  },
+
+  shippingAddress: {
+    line1: "Rua das Acácias, 2780",
+    line2: "Sala 4",
+    city: "Belo Horizonte",
+    state: "Minas Gerais",
+    zip: "30513-200",
+    country: "Brasil",
+    carrier: "Correios SEDEX",
+    tracking: "BR7489204588 31",
+    eta: "12 de janeiro de 2024",
+  },
+
+  billing: {
+    address: "Rua das Acácias, 2780, Sala 4",
+    cityState: "Belo Horizonte, Minas Gerais 30513-200",
+    country: "Brasil",
+    method: "Visa terminando em 4242",
+    transactionId: "TXN-8847291",
+    paymentDate: "8 de janeiro de 2024",
+  },
+
+  note: "Caso haja qualquer atraso ou problema com meu pedido, por favor me avise. Valorizo uma comunicação clara e a atenção aos detalhes.",
+  internalNote:
+    "Cliente solicitou embalagem reforçada para todos os itens. A etiqueta de envio deve incluir a nota \"Frágil — manusear com cuidado\". Prioridade confirmada pelo status de conta Premium.",
+
+  tags: [
+    { label: "Cliente verificado", color: "success" },
+    { label: "Premium", color: "info" },
+    { label: "Alta prioridade", color: "warning" },
+    { label: "Recorrente", color: "neutral" },
+    { label: "Frágil", color: "danger" },
+  ],
+
+  activity: [
+    {
+      id: "a1",
+      dateGroup: "Domingo, 06 de março",
+      title: "Pedido entregue",
+      description: "Recebido por: Helena Martins",
+      time: "14:05",
+      done: true,
+    },
+    {
+      id: "a2",
+      dateGroup: "Domingo, 06 de março",
+      title: "Saiu para entrega",
+      time: "09:12",
+    },
+    {
+      id: "a3",
+      dateGroup: "Domingo, 06 de março",
+      title: "Chegou ao centro de distribuição",
+      time: "22:15",
+    },
+    {
+      id: "a4",
+      dateGroup: "Sexta, 04 de março",
+      title: "Coletado pela transportadora",
+      time: "03:43",
+    },
+    {
+      id: "a5",
+      dateGroup: "Sexta, 04 de março",
+      title: "Saiu do centro de distribuição",
+      time: "01:12",
+    },
+    {
+      id: "a6",
+      dateGroup: "Quinta, 03 de março",
+      title: "Em preparação para envio",
+      time: "23:30",
+    },
+    {
+      id: "a7",
+      dateGroup: "Quinta, 03 de março",
+      title: "Pedido confirmado",
+      description: "Pagamento recebido via cartão de crédito",
+      time: "21:15",
+    },
+  ],
+
+  comments: [
+    {
+      id: "c1",
+      author: "Helena Martins",
+      initials: "HM",
+      colorHex: "#22A06B",
+      when: "2 dias atrás",
+      text: "Vocês conseguem atualizar o endereço de entrega? Mudei recentemente e esqueci de alterar antes de fazer o pedido.",
+    },
+    {
+      id: "c2",
+      author: "Suporte iGreen",
+      initials: "SI",
+      colorHex: "#3B82F6",
+      when: "1 dia atrás",
+      text: "Claro! Atualizei o endereço para Rua das Acácias, 2780, Sala 4, Belo Horizonte/MG. Pode confirmar se está correto?",
+    },
+    {
+      id: "c3",
+      author: "Helena Martins",
+      initials: "HM",
+      colorHex: "#22A06B",
+      when: "1 dia atrás",
+      text: "Isso mesmo, muito obrigada pela agilidade!",
+    },
+  ],
+
+  attachments: [
+    { id: "f1", name: "nota_fiscal_84021.pdf", kind: "pdf", size: "245 KB" },
+    { id: "f2", name: "etiqueta_envio.png", kind: "image", size: "128 KB" },
+    {
+      id: "f3",
+      name: "comprovante_pagamento.pdf",
+      kind: "pdf",
+      size: "89 KB",
+    },
+  ],
+};