@majapisoftwares/ui 4.3.16 → 5.0.0

package/src/components/ui/tabs.tsx

@@ -0,0 +1,81 @@
+"use client";
+
+import { Tabs as TabsPrimitive } from "@base-ui/react/tabs";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "cn";
+
+function Tabs({
+  className,
+  orientation = "horizontal",
+  ...props
+}: TabsPrimitive.Root.Props) {
+  return (
+    <TabsPrimitive.Root
+      data-slot="tabs"
+      data-orientation={orientation}
+      className={cn(
+        "group/tabs flex gap-2 data-horizontal:flex-col",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+const tabsListVariants = cva(
+  "group/tabs-list inline-flex w-fit items-center justify-center rounded-lg p-[3px] text-muted-foreground group-data-horizontal/tabs:h-8 group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col data-[variant=line]:rounded-none",
+  {
+    variants: {
+      variant: {
+        default: "bg-muted",
+        line: "gap-1 bg-transparent",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+function TabsList({
+  className,
+  variant = "default",
+  ...props
+}: TabsPrimitive.List.Props & VariantProps<typeof tabsListVariants>) {
+  return (
+    <TabsPrimitive.List
+      data-slot="tabs-list"
+      data-variant={variant}
+      className={cn(tabsListVariants({ variant }), className)}
+      {...props}
+    />
+  );
+}
+
+function TabsTrigger({ className, ...props }: TabsPrimitive.Tab.Props) {
+  return (
+    <TabsPrimitive.Tab
+      data-slot="tabs-trigger"
+      className={cn(
+        "relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium whitespace-nowrap text-foreground/60 transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 has-data-[icon=inline-end]:pr-1 has-data-[icon=inline-start]:pl-1 aria-disabled:pointer-events-none aria-disabled:opacity-50 dark:text-muted-foreground dark:hover:text-foreground group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent",
+        "data-active:bg-background data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 dark:data-active:text-foreground",
+        "after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-horizontal/tabs:after:inset-x-0 group-data-horizontal/tabs:after:bottom-[-5px] group-data-horizontal/tabs:after:h-0.5 group-data-vertical/tabs:after:inset-y-0 group-data-vertical/tabs:after:-right-1 group-data-vertical/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function TabsContent({ className, ...props }: TabsPrimitive.Panel.Props) {
+  return (
+    <TabsPrimitive.Panel
+      data-slot="tabs-content"
+      className={cn("flex-1 text-sm outline-none", className)}
+      {...props}
+    />
+  );
+}
+
+export { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants };

package/src/lib/utils.ts

@@ -0,0 +1 @@
+export { cn } from "cn";

package/src/patterns/app-shell.tsx

@@ -0,0 +1,70 @@
+"use client";
+
+import type { ReactNode } from "react";
+import { Button } from "../components/ui/button";
+
+export interface NavigationItem {
+  id: string;
+  label: string;
+  count?: number;
+  icon?: ReactNode;
+}
+export function AppShell({
+  title,
+  context,
+  navigation,
+  activeId,
+  onNavigate,
+  children,
+  footer = "Workspace local",
+  brand = "workbench",
+  brandMark = "w.",
+}: {
+  title: string;
+  context?: ReactNode;
+  navigation: NavigationItem[];
+  activeId: string;
+  onNavigate: (id: string) => void;
+  children: ReactNode;
+  footer?: ReactNode;
+  brand?: string;
+  brandMark?: ReactNode;
+}) {
+  return (
+    <div className="wb-shell">
+      <aside className="wb-sidebar">
+        <div className="wb-brand">
+          <span>{brandMark}</span>
+          {brand}
+        </div>
+        <nav aria-label="Navegação principal">
+          {navigation.map((item) => (
+            <Button
+              key={item.id}
+              variant="navigation"
+              data-active={activeId === item.id}
+              aria-current={activeId === item.id ? "page" : undefined}
+              onClick={() => onNavigate(item.id)}
+            >
+              {item.icon}
+              {item.label}
+              {item.count !== undefined ? (
+                <span className="ml-auto">{item.count}</span>
+              ) : null}
+            </Button>
+          ))}
+        </nav>
+        <div className="wb-sidebar-footer">{footer}</div>
+      </aside>
+      <div className="min-w-0">
+        <header className="wb-topbar">
+          <span>
+            {brand} / {title}
+          </span>
+          {context}
+        </header>
+        <main className="wb-main">{children}</main>
+      </div>
+    </div>
+  );
+}

package/src/patterns/data-table.tsx

@@ -0,0 +1,225 @@
+"use client";
+
+import { useState, type ReactNode } from "react";
+import {
+  ArrowDown,
+  ArrowUp,
+  ArrowUpRight,
+  ChevronLeft,
+  ChevronRight,
+} from "lucide-react";
+import { Button } from "../components/ui/button";
+import { Input } from "../components/ui/input";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "../components/ui/table";
+import {
+  Empty,
+  EmptyDescription,
+  EmptyHeader,
+  EmptyTitle,
+} from "../components/ui/empty";
+import { Skeleton } from "../components/ui/skeleton";
+
+export interface DataColumn<T> {
+  id: string;
+  header: string;
+  cell: (row: T) => ReactNode;
+  sortValue?: (row: T) => string | number;
+}
+export interface DataTableProps<T> {
+  rows: T[];
+  columns: DataColumn<T>[];
+  getRowId: (row: T) => string;
+  searchValue: (row: T) => string;
+  searchLabel?: string;
+  filters?: ReactNode;
+  loading?: boolean;
+  onOpen?: (row: T) => void;
+  rowLabel?: (row: T) => string;
+  pageSize?: number;
+}
+export function DataTable<T>({
+  rows,
+  columns,
+  getRowId,
+  searchValue,
+  searchLabel = "Buscar registros",
+  filters,
+  loading = false,
+  onOpen,
+  rowLabel,
+  pageSize = 10,
+}: DataTableProps<T>) {
+  const [query, setQuery] = useState("");
+  const [sort, setSort] = useState<{ id: string; desc: boolean } | null>(null);
+  const [page, setPage] = useState(0);
+  const selected = rows.filter((row) =>
+    searchValue(row).toLocaleLowerCase().includes(query.toLocaleLowerCase()),
+  );
+  const sortedColumn = columns.find((column) => column.id === sort?.id);
+  if (sortedColumn?.sortValue)
+    selected.sort((a, b) => {
+      const x = sortedColumn.sortValue!(a),
+        y = sortedColumn.sortValue!(b);
+      return (
+        (typeof x === "number" && typeof y === "number"
+          ? x - y
+          : String(x).localeCompare(String(y), "pt-BR")) * (sort?.desc ? -1 : 1)
+      );
+    });
+  const safeSize = Math.max(1, pageSize),
+    lastPage = Math.max(0, Math.ceil(selected.length / safeSize) - 1),
+    currentPage = Math.min(page, lastPage);
+  const visible = selected.slice(
+    currentPage * safeSize,
+    (currentPage + 1) * safeSize,
+  );
+  return (
+    <section aria-label="Tabela de dados" aria-busy={loading}>
+      <div className="wb-table-toolbar">
+        <Input
+          className="basis-full md:basis-0"
+          aria-label={searchLabel}
+          placeholder={searchLabel}
+          value={query}
+          onChange={(event) => {
+            setQuery(event.target.value);
+            setPage(0);
+          }}
+        />
+        {filters}
+      </div>
+      <Table>
+        <TableHeader>
+          <TableRow>
+            {columns.map((column) => (
+              <TableHead
+                key={column.id}
+                aria-sort={
+                  sort?.id === column.id
+                    ? sort.desc
+                      ? "descending"
+                      : "ascending"
+                    : undefined
+                }
+              >
+                {column.sortValue ? (
+                  <Button
+                    variant="ghost"
+                    onClick={() =>
+                      setSort({
+                        id: column.id,
+                        desc: sort?.id === column.id ? !sort.desc : false,
+                      })
+                    }
+                  >
+                    {column.header}
+                    {sort?.id === column.id ? (
+                      sort.desc ? (
+                        <ArrowDown data-icon="inline-end" />
+                      ) : (
+                        <ArrowUp data-icon="inline-end" />
+                      )
+                    ) : null}
+                  </Button>
+                ) : (
+                  column.header
+                )}
+              </TableHead>
+            ))}
+            {onOpen ? (
+              <TableHead>
+                <span className="sr-only">Detalhes</span>
+              </TableHead>
+            ) : null}
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {loading ? (
+            [0, 1, 2].map((index) => (
+              <TableRow key={index}>
+                {columns.map((column) => (
+                  <TableCell key={column.id}>
+                    <Skeleton className="h-5 w-full" />
+                  </TableCell>
+                ))}
+                {onOpen ? (
+                  <TableCell>
+                    <Skeleton className="size-5" />
+                  </TableCell>
+                ) : null}
+              </TableRow>
+            ))
+          ) : visible.length ? (
+            visible.map((row) => (
+              <TableRow key={getRowId(row)}>
+                {columns.map((column) => (
+                  <TableCell key={column.id}>{column.cell(row)}</TableCell>
+                ))}
+                {onOpen ? (
+                  <TableCell>
+                    <Button
+                      variant="ghost"
+                      size="icon"
+                      aria-label={`Ver detalhes de ${rowLabel?.(row) ?? getRowId(row)}`}
+                      onClick={() => onOpen(row)}
+                    >
+                      <ArrowUpRight />
+                    </Button>
+                  </TableCell>
+                ) : null}
+              </TableRow>
+            ))
+          ) : (
+            <TableRow>
+              <TableCell colSpan={columns.length + (onOpen ? 1 : 0)}>
+                <Empty>
+                  <EmptyHeader>
+                    <EmptyTitle>Nenhum resultado</EmptyTitle>
+                    <EmptyDescription>
+                      Ajuste a busca ou os filtros para encontrar registros.
+                    </EmptyDescription>
+                  </EmptyHeader>
+                </Empty>
+              </TableCell>
+            </TableRow>
+          )}
+        </TableBody>
+      </Table>
+      <div className="wb-table-footer">
+        <span>
+          {selected.length} registros · página {currentPage + 1} de{" "}
+          {lastPage + 1}
+        </span>
+        <div className="flex gap-2">
+          <Button
+            variant="outline"
+            size="sm"
+            aria-label="Página anterior"
+            disabled={currentPage === 0 || loading}
+            onClick={() => setPage(currentPage - 1)}
+          >
+            <ChevronLeft />
+            Anterior
+          </Button>
+          <Button
+            variant="outline"
+            size="sm"
+            aria-label="Próxima página"
+            disabled={currentPage === lastPage || loading}
+            onClick={() => setPage(currentPage + 1)}
+          >
+            Próxima
+            <ChevronRight />
+          </Button>
+        </div>
+      </div>
+    </section>
+  );
+}

package/src/patterns/details-sheet.tsx

@@ -0,0 +1,51 @@
+"use client";
+
+import type { ReactNode } from "react";
+import {
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+  SheetDescription,
+} from "../components/ui/sheet";
+export function DetailsSheet({
+  open,
+  onOpenChange,
+  title,
+  description,
+  children,
+}: {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  title: string;
+  description: string;
+  children: ReactNode;
+}) {
+  return (
+    <Sheet open={open} onOpenChange={onOpenChange}>
+      <SheetContent className="overflow-y-auto">
+        <SheetHeader>
+          <SheetTitle>{title}</SheetTitle>
+          <SheetDescription>{description}</SheetDescription>
+        </SheetHeader>
+        <div className="px-4 pb-8">{children}</div>
+      </SheetContent>
+    </Sheet>
+  );
+}
+export function DetailList({
+  items,
+}: {
+  items: { label: string; value: ReactNode }[];
+}) {
+  return (
+    <dl className="wb-details">
+      {items.map((item) => (
+        <div key={item.label}>
+          <dt>{item.label}</dt>
+          <dd>{item.value}</dd>
+        </div>
+      ))}
+    </dl>
+  );
+}

package/src/patterns/page-header.tsx

@@ -0,0 +1,40 @@
+import type { ReactNode } from "react";
+export function PageHeader({
+  title,
+  description,
+  eyebrow,
+  actions,
+}: {
+  title: string;
+  description: string;
+  eyebrow?: string;
+  actions?: ReactNode;
+}) {
+  return (
+    <section className="wb-page-header">
+      <div>
+        {eyebrow ? <div className="wb-eyebrow">{eyebrow}</div> : null}
+        <h1>{title}</h1>
+        <p>{description}</p>
+      </div>
+      {actions}
+    </section>
+  );
+}
+export function MetricStrip({
+  items,
+}: {
+  items: { label: string; value: ReactNode; note?: string }[];
+}) {
+  return (
+    <section className="wb-metrics" aria-label="Resumo">
+      {items.map((item) => (
+        <div key={item.label}>
+          <div className="wb-metric-label">{item.label}</div>
+          <div className="wb-metric-value">{item.value}</div>
+          {item.note ? <div className="wb-metric-note">{item.note}</div> : null}
+        </div>
+      ))}
+    </section>
+  );
+}

package/src/patterns/status-badge.tsx

@@ -0,0 +1,23 @@
+import { Badge } from "../components/ui/badge";
+export function StatusBadge({
+  children,
+  tone = "neutral",
+}: {
+  children: React.ReactNode;
+  tone?: "neutral" | "success" | "warning" | "danger";
+}) {
+  return (
+    <Badge
+      variant={
+        tone === "danger"
+          ? "destructive"
+          : tone === "neutral"
+            ? "secondary"
+            : tone
+      }
+    >
+      <span className="wb-status-dot" aria-hidden="true" />
+      {children}
+    </Badge>
+  );
+}