@12-apps/ui 1.5.2 → 1.6.1

package/src/components/data-display/DataViews/data-views-display-panel.tsx

@@ -0,0 +1,328 @@
+"use client";
+
+import KeyboardArrowDownRoundedIcon from "@mui/icons-material/KeyboardArrowDownRounded";
+import TuneRoundedIcon from "@mui/icons-material/TuneRounded";
+import { Popover } from "@mui/material";
+import { useState } from "react";
+
+import { Button } from "../../form/Button";
+import { Box } from "../../../mui/Box";
+
+import { ColumnsTab } from "./data-views-columns-tab";
+import {
+  ViewActions,
+  ViewFooter,
+  ViewHeader,
+  ViewsList,
+  type ViewNavHandlers,
+} from "./data-views-view-nav";
+import type { SavedViewSummary } from "./data-views-types";
+import { DisplayTab, SortTab } from "./data-views-display-tabs";
+import type { DataViewsController } from "./use-data-views-state";
+
+/**
+ * "EXIBIR" — one panel for every question about how the list is READ.
+ *
+ * Sort, columns and format used to be three separate toolbar dropdowns, which
+ * asked the operator to already know which one held what. They are one decision
+ * ("how do I want to read this?") so they are one control with three tabs.
+ *
+ * A view BRACKETS the panel: its name pinned at the top, the save actions
+ * pinned at the bottom, both visible on every tab — so a change made in Colunas
+ * is one glance away from the button that saves it. A separate "Visão" button
+ * in the toolbar would be the same concept twice, in two places, disagreeing
+ * about whether there are unsaved changes.
+ */
+
+/** Which tab is showing. `columns` first: it is what an operator opens this for. */
+type DisplayTabKey = "sort" | "columns" | "display";
+
+const TABS: { key: DisplayTabKey; label: string }[] = [
+  { key: "sort", label: "Ordenar" },
+  { key: "columns", label: "Colunas" },
+  { key: "display", label: "Exibição" },
+];
+
+/** The saved-view chrome the panel brackets its tabs with, when a host supplies it. */
+export interface DisplayPanelView {
+  /** The applied view's name, or undefined for the built-in "Visão principal". */
+  activeViewName?: string;
+  /** True when the live state differs from the applied view (or from pristine). */
+  dirty: boolean;
+  /** Restore the applied view (or the pristine default) — discards local changes. */
+  onReset: () => void;
+  /** Persist the live state over the applied view. Absent ⇒ no update affordance. */
+  onUpdate?: () => void;
+  /** Persist the live state as a NEW view. */
+  onSaveAs: () => void;
+  /**
+   * The saved views themselves, rendered INLINE in this panel's body when the
+   * VISÃO header is opened — not as a dropdown of their own. The panel stays
+   * data-free: the host owns the views and every mutation, this only decides
+   * where they appear.
+   */
+  nav?: ViewNavHandlers;
+}
+
+interface DisplayPanelProps<T extends Record<string, unknown>> {
+  c: DataViewsController<T>;
+  testIdPrefix: string;
+  /** Per-sort-field value kind, so directions read in the column's own terms. */
+  sortKinds?: Record<string, string>;
+  view?: DisplayPanelView;
+  /** Icon only — step 2 of the toolbar's measured degradation ladder. */
+  compact?: boolean;
+}
+
+/** The tab strip inside the panel. */
+function PanelTabs({
+  tab,
+  onChange,
+  muted,
+  testIdPrefix,
+}: {
+  tab: DisplayTabKey;
+  onChange: (tab: DisplayTabKey) => void;
+  /** The views own the body — no tab is showing, so none reads as selected. */
+  muted?: boolean;
+  testIdPrefix: string;
+}): React.JSX.Element {
+  return (
+    <Box sx={{ display: "flex", gap: 0.5, p: 0.75, bgcolor: "action.hover", borderBottom: 1, borderColor: "divider" }}>
+      {TABS.map((entry) => {
+        const active = tab === entry.key && !muted;
+        return (
+        <Box
+          key={entry.key}
+          component="button"
+          type="button"
+          onClick={() => onChange(entry.key)}
+          data-testid={`${testIdPrefix}-display-tab-${entry.key}`}
+          aria-current={active}
+          sx={{
+            flex: 1,
+            px: 1,
+            py: 0.75,
+            border: 0,
+            borderRadius: 1,
+            cursor: "pointer",
+            font: "inherit",
+            fontSize: "0.8125rem",
+            bgcolor: active ? "background.paper" : "transparent",
+            boxShadow: active ? 1 : 0,
+            fontWeight: active ? 600 : 400,
+            color: active ? "text.primary" : "text.secondary",
+          }}
+        >
+          {entry.label}
+        </Box>
+        );
+      })}
+    </Box>
+  );
+}
+
+/** The active tab's body. */
+function PanelBody<T extends Record<string, unknown>>({
+  tab,
+  c,
+  sortKinds,
+  testIdPrefix,
+}: {
+  tab: DisplayTabKey;
+  c: DataViewsController<T>;
+  sortKinds?: Record<string, string>;
+  testIdPrefix: string;
+}): React.JSX.Element {
+  if (tab === "sort") {
+    return (
+      <SortTab
+        fields={c.resolvedSortFields}
+        activeField={c.activeSortField}
+        activeOrder={c.activeSortOrder}
+        onChange={(field, order) => c.patch({ sortBy: [{ id: field, dir: order }] })}
+        sortKinds={sortKinds}
+        testIdPrefix={testIdPrefix}
+      />
+    );
+  }
+  if (tab === "columns") {
+    return (
+      <ColumnsTab
+        columns={c.hideableColumns}
+        order={c.columnOrder}
+        visibleColumns={c.state.visibleColumns}
+        onToggle={c.toggleColumn}
+        onReorder={(order) => c.patch({ order })}
+        onShowAll={() => c.patch({ visibleColumns: c.columnOrder })}
+        // "Padrão" restores BOTH: the declared order and every column visible.
+        onReset={() => c.patch({ visibleColumns: c.columnOrder, order: undefined })}
+        testIdPrefix={testIdPrefix}
+      />
+    );
+  }
+  return <DisplayTab testIdPrefix={testIdPrefix} />;
+}
+
+/** Everything inside the popover: VISÃO header, tabs, body, save footer. */
+function PanelSurface<T extends Record<string, unknown>>({
+  c, view, nav, tab, onTab, viewsOpen, onToggleViews, actionsFor, onOpenActions,
+  onBack, sortKinds, onDone, testIdPrefix,
+}: {
+  c: DataViewsController<T>;
+  view?: DisplayPanelView;
+  nav?: ViewNavHandlers;
+  tab: DisplayTabKey;
+  onTab: (tab: DisplayTabKey) => void;
+  viewsOpen: boolean;
+  onToggleViews: () => void;
+  actionsFor: SavedViewSummary | null;
+  onOpenActions: (view: SavedViewSummary) => void;
+  onBack: () => void;
+  sortKinds?: Record<string, string>;
+  onDone: () => void;
+  testIdPrefix: string;
+}): React.JSX.Element {
+  return (
+    <Box data-testid={`${testIdPrefix}-display-panel`}>
+          {view && (
+            <ViewHeader
+              view={view}
+              open={viewsOpen}
+              onToggle={onToggleViews}
+              testIdPrefix={testIdPrefix}
+            />
+          )}
+          <PanelTabs
+            tab={tab}
+            onChange={onTab}
+            muted={Boolean(nav)}
+            testIdPrefix={testIdPrefix}
+          />
+          {/* Constrained + scrolled: the columns list is unbounded, and a panel
+              taller than the viewport puts its own save button off screen. */}
+          <Box sx={{ maxHeight: 320, minHeight: 220, overflowY: "auto" }}>
+            {nav ? (
+              <ViewsBody
+                nav={nav}
+                actionsFor={actionsFor}
+                onOpenActions={onOpenActions}
+                onBack={onBack}
+                testIdPrefix={testIdPrefix}
+              />
+            ) : (
+              <PanelBody tab={tab} c={c} sortKinds={sortKinds} testIdPrefix={testIdPrefix} />
+            )}
+          </Box>
+          {view && <ViewFooter view={view} onDone={onDone} testIdPrefix={testIdPrefix} />}
+    </Box>
+  );
+}
+
+
+/** The views as the panel's body: the list, or one view's actions. */
+function ViewsBody({
+  nav,
+  actionsFor,
+  onOpenActions,
+  onBack,
+  testIdPrefix,
+}: {
+  nav: ViewNavHandlers;
+  actionsFor: SavedViewSummary | null;
+  onOpenActions: (view: SavedViewSummary) => void;
+  onBack: () => void;
+  testIdPrefix: string;
+}): React.JSX.Element {
+  // Resolve against the LIVE list, not the object captured when the kebab was
+  // clicked: toggling "Fixar" or "Compartilhar" replaces the view in `views`,
+  // and a held snapshot would keep showing the state from before the click.
+  const live = actionsFor ? nav.views.find((view) => view.id === actionsFor.id) : undefined;
+  if (live) {
+    return <ViewActions view={live} handlers={nav} onBack={onBack} testIdPrefix={testIdPrefix} />;
+  }
+  return <ViewsList handlers={nav} onOpenActions={onOpenActions} testIdPrefix={testIdPrefix} />;
+}
+
+/**
+ * The toolbar's "Exibir" control: one button, one popover, three tabs, and the
+ * view bracketing all of it.
+ */
+export function DataViewsDisplayPanel<T extends Record<string, unknown>>({
+  c,
+  testIdPrefix,
+  sortKinds,
+  view,
+  compact,
+}: DisplayPanelProps<T>): React.JSX.Element {
+  const [anchor, setAnchor] = useState<HTMLElement | null>(null);
+  const [tab, setTab] = useState<DisplayTabKey>("columns");
+  // The views REPLACE the tab body rather than opening over it — see
+  // `data-views-view-nav`. `actionsFor` is the second level of that drill-down.
+  const [viewsOpen, setViewsOpen] = useState(false);
+  const [actionsFor, setActionsFor] = useState<SavedViewSummary | null>(null);
+  // Non-null only while the views are the body — the one place that decides
+  // whether this panel is showing tabs or views.
+  const nav = viewsOpen ? view?.nav : undefined;
+  const close = (): void => setAnchor(null);
+  const leaveViews = (): void => {
+    setViewsOpen(false);
+    setActionsFor(null);
+  };
+  return (
+    <>
+      <Button
+        variant="outline"
+        size="sm"
+        color="neutral"
+        onClick={(event) => setAnchor(event.currentTarget as HTMLElement)}
+        dataTestId={`${testIdPrefix}-display-trigger`}
+        aria-label="Exibir"
+        title={compact ? "Exibir" : undefined}
+      >
+        <Box component="span" sx={{ display: "inline-flex", alignItems: "center", gap: 0.5 }}>
+          <TuneRoundedIcon fontSize="small" />
+          {!compact && (
+            <Box component="span" sx={{ display: { xs: "none", sm: "inline" } }}>
+              Exibir
+            </Box>
+          )}
+          {view?.dirty && (
+            <Box component="span" sx={{ height: 6, width: 6, borderRadius: "50%", bgcolor: "primary.main" }} />
+          )}
+          <KeyboardArrowDownRoundedIcon fontSize="small" />
+        </Box>
+      </Button>
+      <Popover
+        open={Boolean(anchor)}
+        anchorEl={anchor}
+        onClose={close}
+        anchorOrigin={{ vertical: "bottom", horizontal: "right" }}
+        transformOrigin={{ vertical: "top", horizontal: "right" }}
+        slotProps={{ paper: { sx: { width: 320, maxWidth: "calc(100vw - 32px)" } } }}
+      >
+        <PanelSurface
+          c={c}
+          view={view}
+          nav={nav}
+          tab={tab}
+          onTab={(next) => {
+            setTab(next);
+            leaveViews();
+          }}
+          viewsOpen={viewsOpen}
+          onToggleViews={() => {
+            setViewsOpen((prev) => !prev);
+            setActionsFor(null);
+          }}
+          actionsFor={actionsFor}
+          onOpenActions={setActionsFor}
+          onBack={() => setActionsFor(null)}
+          sortKinds={sortKinds}
+          onDone={close}
+          testIdPrefix={testIdPrefix}
+        />
+      </Popover>
+    </>
+  );
+}

package/src/components/data-display/DataViews/data-views-display-tabs.tsx

@@ -0,0 +1,328 @@
+"use client";
+
+import ArrowDownwardRoundedIcon from "@mui/icons-material/ArrowDownwardRounded";
+import ArrowUpwardRoundedIcon from "@mui/icons-material/ArrowUpwardRounded";
+
+import type { SortFieldDefinition } from "../../layout/ContentToolbar";
+import { Box } from "../../../mui/Box";
+import { Text } from "../../typography/Text";
+
+import {
+  BoardGlyph,
+  GridGlyph,
+  ListGlyph,
+  RowsGlyph,
+  TableGlyph,
+} from "./data-views-glyphs";
+import {
+  useDataViewsLayout,
+  type DataViewsDensity,
+  type DataViewsLayout,
+} from "./data-views-layout-context";
+
+/**
+ * Two of the three tabs inside the "Exibir" panel — Ordenar and Exibição. The
+ * Colunas tab is its own file (`data-views-columns-tab.tsx`) for the size budget.
+ *
+ * They live together because they answer one question ("how do I want to read
+ * this list?") and were previously three separate toolbar dropdowns that the
+ * operator had to know apart. Split into this file so the panel that frames
+ * them, and each tab, stays inside the size budget.
+ */
+
+/* ── Shared tile ─────────────────────────────────────────────────────────── */
+
+/** A picker tile: a glyph over its label, highlighted when it is the choice. */
+function Tile({
+  active,
+  label,
+  onClick,
+  testId,
+  children,
+}: {
+  active: boolean;
+  label: string;
+  onClick: () => void;
+  testId: string;
+  children: React.ReactNode;
+}): React.JSX.Element {
+  return (
+    <Box
+      component="button"
+      type="button"
+      onClick={onClick}
+      aria-pressed={active}
+      data-testid={testId}
+      sx={{
+        flex: 1,
+        minWidth: 0,
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        gap: 0.75,
+        p: 1.25,
+        border: 1,
+        borderStyle: "solid",
+        borderColor: active ? "primary.main" : "divider",
+        bgcolor: active ? "action.selected" : "transparent",
+        borderRadius: 1,
+        cursor: "pointer",
+        font: "inherit",
+        fontSize: "0.75rem",
+        fontWeight: active ? 600 : 400,
+        color: active ? "primary.main" : "text.secondary",
+        "&:hover": { bgcolor: "action.hover" },
+      }}
+    >
+      {children}
+      {label}
+    </Box>
+  );
+}
+
+/* ── Ordenar ─────────────────────────────────────────────────────────────── */
+
+/**
+ * Direction labels read in the COLUMN'S OWN TERMS. "Crescente" on a currency
+ * column is a puzzle the operator has to solve every time; "Menor → maior" is
+ * not, and "Mais recente" is what someone actually means about a date.
+ */
+const DIRECTION_LABELS: Record<string, [string, string]> = {
+  number: ["Menor → maior", "Maior → menor"],
+  currency: ["Menor → maior", "Maior → menor"],
+  date: ["Mais antigo", "Mais recente"],
+  text: ["A → Z", "Z → A"],
+};
+
+/** The direction wording for a sort field, falling back to alphabetical. */
+function directionLabels(kind: string | undefined): [string, string] {
+  return DIRECTION_LABELS[kind ?? "text"] ?? DIRECTION_LABELS.text!;
+}
+
+interface SortTabProps {
+  fields: SortFieldDefinition[];
+  activeField: string;
+  activeOrder: "asc" | "desc";
+  onChange: (field: string, order: "asc" | "desc") => void;
+  /** Per-field value kind, so the direction can be phrased in its own terms. */
+  sortKinds?: Record<string, string>;
+  testIdPrefix: string;
+}
+
+/** Direction first (two tiles), then the field list — the order they are decided in. */
+export function SortTab({
+  fields,
+  activeField,
+  activeOrder,
+  onChange,
+  sortKinds,
+  testIdPrefix,
+}: SortTabProps): React.JSX.Element {
+  const [ascLabel, descLabel] = directionLabels(sortKinds?.[activeField]);
+  return (
+    <Box sx={{ p: 1 }}>
+      <Text variant="caption" as="p">
+        <Box component="span" sx={{ px: 0.5, color: "text.secondary" }}>
+          Direção
+        </Box>
+      </Text>
+      <Box sx={{ display: "flex", gap: 0.75, mb: 1.5, mt: 0.5 }}>
+        {(["asc", "desc"] as const).map((direction, index) => (
+          <Tile
+            key={direction}
+            active={activeOrder === direction}
+            label={index === 0 ? ascLabel : descLabel}
+            onClick={() => onChange(activeField || fields[0]?.value || "", direction)}
+            testId={`${testIdPrefix}-sort-dir-${direction}`}
+          >
+            {direction === "asc" ? (
+              <ArrowUpwardRoundedIcon fontSize="small" />
+            ) : (
+              <ArrowDownwardRoundedIcon fontSize="small" />
+            )}
+          </Tile>
+        ))}
+      </Box>
+      <Text variant="caption" as="p">
+        <Box component="span" sx={{ px: 0.5, color: "text.secondary" }}>
+          Campo
+        </Box>
+      </Text>
+      {fields.map((field) => (
+        <SortFieldRow
+          key={field.value}
+          label={field.label}
+          active={field.value === activeField}
+          onClick={() => onChange(field.value, activeOrder)}
+          testId={`${testIdPrefix}-sort-field-${field.value}`}
+        />
+      ))}
+    </Box>
+  );
+}
+
+/** One sort field: a dot and its label, highlighted when it is the active sort. */
+function SortFieldRow({
+  label,
+  active,
+  onClick,
+  testId,
+}: {
+  label: string;
+  active: boolean;
+  onClick: () => void;
+  testId: string;
+}): React.JSX.Element {
+  return (
+    <Box
+      component="button"
+      type="button"
+      onClick={onClick}
+      data-testid={testId}
+      sx={{
+        display: "flex",
+        alignItems: "center",
+        gap: 1,
+        width: "100%",
+        px: 1,
+        py: 0.75,
+        border: 0,
+        background: "none",
+        borderRadius: 1,
+        cursor: "pointer",
+        font: "inherit",
+        fontSize: "0.8125rem",
+        textAlign: "left",
+        fontWeight: active ? 600 : 400,
+        color: active ? "primary.main" : "text.primary",
+        "&:hover": { bgcolor: "action.hover" },
+      }}
+    >
+      <Box
+        component="span"
+        sx={{ height: 6, width: 6, borderRadius: "50%", bgcolor: active ? "primary.main" : "action.disabled" }}
+      />
+      <Box component="span" sx={{ flex: 1, minWidth: 0 }}>
+        {label}
+      </Box>
+    </Box>
+  );
+}
+
+/* ── Exibição ────────────────────────────────────────────────────────────── */
+
+/** One line of copy per layout, saying what it is FOR rather than what it is. */
+const LAYOUT_HINTS: Record<DataViewsLayout, string> = {
+  table: "Colunas comparáveis, boa para varrer números.",
+  list: "Uma linha por item, com os dados principais.",
+  cards: "Blocos maiores, bom para poucos itens.",
+  board: "Colunas por etapa, para acompanhar o que está onde.",
+};
+
+/** The density tiles, phrased for whichever layout is on screen. */
+function densityTiles(cards: boolean): { value: DataViewsDensity; label: string; gap: number; columns: number }[] {
+  return [
+    { value: "compact", label: cards ? "Muitos" : "Baixa", gap: 2, columns: 4 },
+    { value: "cozy", label: cards ? "Médio" : "Média", gap: 5, columns: 3 },
+    { value: "comfortable", label: cards ? "Poucos" : "Alta", gap: 8, columns: 2 },
+  ];
+}
+
+/** The glyph for a layout tile. */
+function layoutGlyph(layout: DataViewsLayout, active: boolean): React.JSX.Element {
+  if (layout === "table") return <TableGlyph active={active} />;
+  if (layout === "list") return <ListGlyph active={active} />;
+  if (layout === "cards") return <GridGlyph active={active} />;
+  return <BoardGlyph active={active} />;
+}
+
+const LAYOUT_TILE_LABELS: Record<DataViewsLayout, string> = {
+  table: "Tabela",
+  list: "Lista",
+  cards: "Grade",
+  board: "Quadro",
+};
+
+/**
+ * Format and density, both shown as PREVIEWS rather than words — see
+ * `data-views-glyphs.tsx` for why. A layout this table cannot render is simply
+ * not offered, and the panel says why rather than leaving a gap.
+ */
+export function DisplayTab({ testIdPrefix }: { testIdPrefix: string }): React.JSX.Element {
+  const { layout, setLayout, canUseCards, canUseList, canUseBoard, density, setDensity } =
+    useDataViewsLayout();
+  const available: DataViewsLayout[] = [
+    "table",
+    ...(canUseList ? (["list"] as const) : []),
+    ...(canUseCards ? (["cards"] as const) : []),
+    ...(canUseBoard ? (["board"] as const) : []),
+  ];
+  const cards = layout === "cards";
+  return (
+    <Box sx={{ p: 1 }}>
+      <Text variant="caption" as="p">
+        <Box component="span" sx={{ px: 0.5, color: "text.secondary" }}>
+          Formato
+        </Box>
+      </Text>
+      <Box
+        sx={{
+          display: "grid",
+          gridTemplateColumns: available.length > 3 ? "repeat(2, 1fr)" : `repeat(${available.length}, 1fr)`,
+          gap: 0.75,
+          mt: 0.5,
+        }}
+      >
+        {available.map((value) => (
+          <Tile
+            key={value}
+            active={layout === value}
+            label={LAYOUT_TILE_LABELS[value]}
+            onClick={() => setLayout(value)}
+            testId={`${testIdPrefix}-layout-${value}`}
+          >
+            {layoutGlyph(value, layout === value)}
+          </Tile>
+        ))}
+      </Box>
+      <Text variant="caption" as="p">
+        <Box component="span" sx={{ px: 0.5, py: 1, display: "block", color: "text.disabled" }}>
+          {LAYOUT_HINTS[layout]}
+        </Box>
+      </Text>
+      {layout !== "board" && (
+        <>
+          <Text variant="caption" as="p">
+            <Box component="span" sx={{ px: 0.5, color: "text.secondary" }}>
+              {cards ? "Cards por linha" : "Altura das linhas"}
+            </Box>
+          </Text>
+          <Box sx={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 0.75, mt: 0.5 }}>
+            {densityTiles(cards).map((tile) => (
+              <Tile
+                key={tile.value}
+                active={density === tile.value}
+                label={tile.label}
+                onClick={() => setDensity(tile.value)}
+                testId={`${testIdPrefix}-density-${tile.value}`}
+              >
+                {cards ? (
+                  <GridGlyph n={tile.columns} active={density === tile.value} />
+                ) : (
+                  <RowsGlyph gap={tile.gap} active={density === tile.value} />
+                )}
+              </Tile>
+            ))}
+          </Box>
+        </>
+      )}
+      {!canUseBoard && (
+        <Text variant="caption" as="p">
+          <Box component="span" sx={{ px: 0.5, pt: 1.25, display: "block", color: "text.disabled" }}>
+            Esta tela não declara etapas, então não oferece quadro.
+          </Box>
+        </Text>
+      )}
+    </Box>
+  );
+}