@12-apps/ui 1.0.0 → 1.3.1

package/src/components/data-display/DataViews/__tests__/DataViewsTableBase.test.tsx

@@ -0,0 +1,134 @@
+import { describe, expect, it, vi } from "vitest";
+import { render, screen, waitFor } from "@testing-library/react";
+import { ThemeProvider, createTheme } from "../../../../mui/styles";
+
+import { DataViewsTableBase } from "../DataViewsTableBase";
+import type {
+  DataViewColumn,
+  DataViewPersistence,
+  DataViewRouter,
+  DataViewServer,
+  DataViewState,
+  FilterFieldConfig,
+} from "../data-views-types";
+
+interface Row extends Record<string, unknown> {
+  id: string;
+  name: string;
+  status: string;
+}
+
+const rows: Row[] = [
+  { id: "1", name: "Ana", status: "ACTIVE" },
+  { id: "2", name: "Bruno", status: "INACTIVE" },
+];
+
+const columns: DataViewColumn<Row>[] = [
+  { id: "name", header: "Nome", accessor: "name", searchable: true },
+  { id: "status", header: "Status", accessor: "status", searchable: true },
+  { id: "actions", header: "", type: "actions", hideable: false, cell: () => null },
+];
+
+const fields: FilterFieldConfig<Row>[] = [];
+
+const persistence: DataViewPersistence = {
+  create: vi.fn(async () => ({ ok: true as const })),
+  update: vi.fn(async () => ({ ok: true as const })),
+  remove: vi.fn(async () => ({ ok: true as const })),
+};
+const router: DataViewRouter = { syncViewParam: vi.fn(), refresh: vi.fn() };
+
+/** A server-mode wiring; `onQueryChange` is a no-op — we only assert the controls. */
+const server: DataViewServer = { totalCount: 2, page: 1, pageSize: 20, onQueryChange: vi.fn() };
+
+/** The URL-seeded controls a server page would parse off the address bar. */
+function urlState(search: string): DataViewState {
+  return { search, pills: {}, ranges: {}, sortBy: [], visibleColumns: [] };
+}
+
+function renderBase(props: Partial<React.ComponentProps<typeof DataViewsTableBase<Row>>> = {}) {
+  return render(
+    <ThemeProvider theme={createTheme()}>
+      <DataViewsTableBase<Row>
+        persistence={persistence}
+        router={router}
+        rows={rows}
+        columns={columns}
+        fields={fields}
+        getRowId={(row) => row.id}
+        views={[]}
+        dataTestId="people"
+        testIdPrefix="people"
+        {...props}
+      />
+    </ThemeProvider>,
+  );
+}
+
+const searchInput = (): HTMLInputElement =>
+  screen.getByTestId("people-search-all") as HTMLInputElement;
+
+describe("DataViewsTableBase — URL sync (FUT-180)", () => {
+  it("seeds the search box from initialState", () => {
+    renderBase({ server, initialState: urlState("maria") });
+    expect(searchInput().value).toBe("maria");
+  });
+
+  it("re-applies the URL controls on a later initialState change (server mode: back/forward)", async () => {
+    // A new initialState reference is exactly what a browser back/forward produces:
+    // the server component re-renders with the restored URL's controls. In server
+    // mode the base forwards them as the grid's reactive `syncState`, so the
+    // controls reconcile instead of staying stuck on the previous query.
+    const { rerender } = renderBase({ server, initialState: urlState("maria") });
+    expect(searchInput().value).toBe("maria");
+
+    rerender(
+      <ThemeProvider theme={createTheme()}>
+        <DataViewsTableBase<Row>
+          persistence={persistence}
+          router={router}
+          rows={rows}
+          columns={columns}
+          fields={fields}
+          getRowId={(row) => row.id}
+          views={[]}
+          dataTestId="people"
+          testIdPrefix="people"
+          server={server}
+          initialState={urlState("ana")}
+        />
+      </ThemeProvider>,
+    );
+
+    await waitFor(() => expect(searchInput().value).toBe("ana"));
+  });
+
+  it("does NOT reactively re-apply in client mode (no server): initialState only seeds on mount", () => {
+    // Client-mode lists don't keep their filters in the URL, so a changing
+    // initialState must not force the controls — only the mount seed applies.
+    // Without a `server` wiring the base forwards no `syncState`, so re-rendering
+    // with a new initialState leaves the seeded search untouched (a synchronous
+    // fact: no reconciling effect exists to fire).
+    const { rerender } = renderBase({ initialState: urlState("maria") });
+    expect(searchInput().value).toBe("maria");
+
+    rerender(
+      <ThemeProvider theme={createTheme()}>
+        <DataViewsTableBase<Row>
+          persistence={persistence}
+          router={router}
+          rows={rows}
+          columns={columns}
+          fields={fields}
+          getRowId={(row) => row.id}
+          views={[]}
+          dataTestId="people"
+          testIdPrefix="people"
+          initialState={urlState("ana")}
+        />
+      </ThemeProvider>,
+    );
+
+    expect(searchInput().value).toBe("maria");
+  });
+});

package/src/components/data-display/DataViews/__tests__/SaveViewModal.test.tsx

@@ -0,0 +1,83 @@
+import { describe, expect, it, vi } from "vitest";
+import { fireEvent, render, screen, waitFor, within } from "@testing-library/react";
+import { ThemeProvider, createTheme } from "../../../../mui/styles";
+
+import { SaveViewModal } from "../SaveViewModal";
+import type { DataViewColumn, DataViewState, FilterFieldConfig } from "../data-views-types";
+
+interface Row extends Record<string, unknown> {
+  id: string;
+  name: string;
+  status: string;
+}
+
+const columns: DataViewColumn<Row>[] = [
+  { id: "name", header: "Nome" },
+  { id: "status", header: "Status" },
+];
+
+const fields: FilterFieldConfig<Row>[] = [
+  { id: "status", label: "Status", options: [{ value: "ACTIVE", label: "Ativo" }] },
+];
+
+const currentState: DataViewState = {
+  search: "",
+  pills: { status: ["ACTIVE"] },
+  sortBy: [],
+  visibleColumns: ["name", "status"],
+};
+
+function renderModal(onSave = vi.fn()) {
+  render(
+    <ThemeProvider theme={createTheme()}>
+      <SaveViewModal<Row>
+        open
+        onClose={vi.fn()}
+        currentState={currentState}
+        fields={fields}
+        columns={columns}
+        onSave={onSave}
+        testIdPrefix="views"
+      />
+    </ThemeProvider>,
+  );
+  return onSave;
+}
+
+describe("SaveViewModal", () => {
+  it("previews the current filters and columns", () => {
+    renderModal();
+    const filters = screen.getByTestId("views-preview-filters");
+    expect(within(filters).getByText("Status: Ativo")).toBeInTheDocument();
+    const cols = screen.getByTestId("views-preview-columns");
+    expect(within(cols).getByText("Nome")).toBeInTheDocument();
+  });
+
+  it("requires a name before saving", () => {
+    renderModal();
+    expect(screen.getByTestId("views-save-submit")).toBeDisabled();
+  });
+
+  it("saves the entered name + share toggle", () => {
+    const onSave = renderModal();
+    fireEvent.change(screen.getByTestId("views-save-name"), { target: { value: "Baixo estoque" } });
+    fireEvent.click(screen.getByTestId("views-save-shared")); // the switch input carries the testid
+    fireEvent.click(screen.getByTestId("views-save-submit"));
+    expect(onSave).toHaveBeenCalledWith(
+      expect.objectContaining({ name: "Baixo estoque", shared: true, pinned: false, isDefault: false }),
+    );
+  });
+
+  it("surfaces the error and keeps the modal open when the save is rejected", async () => {
+    const onSave = vi.fn().mockRejectedValue(new Error("Já existe uma visão com esse nome."));
+    renderModal(onSave);
+    fireEvent.change(screen.getByTestId("views-save-name"), { target: { value: "Duplicada" } });
+    fireEvent.click(screen.getByTestId("views-save-submit"));
+
+    await waitFor(() =>
+      expect(screen.getByTestId("views-save-error")).toHaveTextContent(/já existe uma visão/i),
+    );
+    // Still open + the button re-enabled for a retry.
+    expect(screen.getByTestId("views-save-submit")).toBeEnabled();
+  });
+});

package/src/components/data-display/DataViews/__tests__/data-views-filter.test.ts

@@ -0,0 +1,115 @@
+import { describe, expect, it } from "vitest";
+
+import { filterRows } from "../data-views-filter";
+import type {
+  DataViewColumn,
+  FilterFieldConfig,
+  RangeFieldConfig,
+} from "../data-views-types";
+
+interface Row extends Record<string, unknown> {
+  id: string;
+  name: string;
+  status: string;
+  tags: string[];
+  price: number;
+  stock: number | null;
+}
+
+const rows: Row[] = [
+  { id: "1", name: "Ana", status: "ACTIVE", tags: ["vip"], price: 10, stock: 5 },
+  { id: "2", name: "Bruno", status: "INACTIVE", tags: ["new"], price: 20, stock: 0 },
+  { id: "3", name: "Carla", status: "ACTIVE", tags: ["vip", "new"], price: 30, stock: null },
+];
+
+const rangeFields: RangeFieldConfig<Row>[] = [
+  { id: "price", label: "Preço", accessor: (row) => row.price },
+  { id: "stock", label: "Estoque", accessor: (row) => row.stock },
+];
+
+const columns: DataViewColumn<Row>[] = [
+  { id: "name", header: "Nome", accessor: "name", searchable: true },
+  { id: "status", header: "Status", accessor: "status" },
+];
+
+const fields: FilterFieldConfig<Row>[] = [
+  { id: "status", label: "Status", options: [
+    { value: "ACTIVE", label: "Ativo" },
+    { value: "INACTIVE", label: "Inativo" },
+  ] },
+  { id: "tags", label: "Tags", accessor: (row) => row.tags, options: [
+    { value: "vip", label: "VIP" },
+    { value: "new", label: "Novo" },
+  ] },
+];
+
+const ids = (result: Row[]): string[] => result.map((r) => r.id);
+
+describe("filterRows", () => {
+  it("returns every row with no search or pills", () => {
+    expect(ids(filterRows(rows, columns, fields, { search: "", pills: {} }))).toEqual(["1", "2", "3"]);
+  });
+
+  it("matches the search term across searchable columns only", () => {
+    expect(ids(filterRows(rows, columns, fields, { search: "car", pills: {} }))).toEqual(["3"]);
+    // status is not searchable, so a status term matches nothing by search.
+    expect(filterRows(rows, columns, fields, { search: "active", pills: {} })).toHaveLength(0);
+  });
+
+  it("narrows by a single-value pill", () => {
+    expect(ids(filterRows(rows, columns, fields, { search: "", pills: { status: ["ACTIVE"] } }))).toEqual(["1", "3"]);
+  });
+
+  it("treats a multi-value field via its accessor as OR membership", () => {
+    expect(ids(filterRows(rows, columns, fields, { search: "", pills: { tags: ["new"] } }))).toEqual(["2", "3"]);
+  });
+
+  it("combines search AND pills", () => {
+    const result = filterRows(rows, columns, fields, { search: "a", pills: { status: ["ACTIVE"] } });
+    // "a" matches Ana + Carla; ACTIVE keeps both.
+    expect(ids(result)).toEqual(["1", "3"]);
+  });
+
+  it("ignores a pill with an empty selection", () => {
+    expect(ids(filterRows(rows, columns, fields, { search: "", pills: { status: [] } }))).toEqual(["1", "2", "3"]);
+  });
+
+  describe("numeric ranges", () => {
+    const crit = (ranges: Record<string, { min?: number; max?: number }>) => ({
+      search: "",
+      pills: {},
+      ranges,
+    });
+
+    it("filters by a minimum bound", () => {
+      expect(ids(filterRows(rows, columns, fields, crit({ price: { min: 20 } }), rangeFields))).toEqual(["2", "3"]);
+    });
+
+    it("filters by a maximum bound", () => {
+      expect(ids(filterRows(rows, columns, fields, crit({ price: { max: 20 } }), rangeFields))).toEqual(["1", "2"]);
+    });
+
+    it("filters by an inclusive min+max window", () => {
+      expect(ids(filterRows(rows, columns, fields, crit({ price: { min: 10, max: 20 } }), rangeFields))).toEqual(["1", "2"]);
+    });
+
+    it("excludes rows whose value is null when a bound is set", () => {
+      // Carla (id 3) has null stock, so any bounded stock range drops her.
+      expect(ids(filterRows(rows, columns, fields, crit({ stock: { min: 0 } }), rangeFields))).toEqual(["1", "2"]);
+    });
+
+    it("ignores an empty range (no bounds)", () => {
+      expect(ids(filterRows(rows, columns, fields, crit({ price: {} }), rangeFields))).toEqual(["1", "2", "3"]);
+    });
+
+    it("ignores an inverted range (max < min) instead of filtering everything out", () => {
+      expect(ids(filterRows(rows, columns, fields, crit({ price: { min: 30, max: 10 } }), rangeFields))).toEqual(["1", "2", "3"]);
+    });
+
+    it("combines ranges with pills", () => {
+      const result = filterRows(rows, columns, fields, { search: "", pills: { status: ["ACTIVE"] }, ranges: { price: { min: 25 } } }, rangeFields);
+      // ACTIVE → Ana(10), Carla(30); price ≥ 25 → only Carla.
+      expect(ids(result)).toEqual(["3"]);
+    });
+  });
+});

package/src/components/data-display/DataViews/__tests__/data-views-preview.test.ts

@@ -0,0 +1,53 @@
+import { describe, expect, it } from "vitest";
+
+import { describeViewState } from "../data-views-preview";
+import type { DataViewColumn, DataViewState, FilterFieldConfig } from "../data-views-types";
+
+interface Row extends Record<string, unknown> {
+  id: string;
+  name: string;
+  status: string;
+}
+
+const columns: DataViewColumn<Row>[] = [
+  { id: "name", header: "Nome" },
+  { id: "status", header: "Status" },
+  { id: "actions", header: "", hideable: false },
+];
+
+const fields: FilterFieldConfig<Row>[] = [
+  { id: "status", label: "Status", options: [{ value: "ACTIVE", label: "Ativo" }] },
+];
+
+describe("describeViewState", () => {
+  it("summarizes search, pills, visible columns, and sort with labels", () => {
+    const state: DataViewState = {
+      search: "burg",
+      pills: { status: ["ACTIVE"] },
+      sortBy: [{ id: "name", dir: "asc" }],
+      visibleColumns: ["name", "status"],
+    };
+
+    const result = describeViewState(state, fields, columns);
+
+    expect(result.filters).toEqual(['Busca: "burg"', "Status: Ativo"]);
+    expect(result.columns).toEqual(["Nome", "Status"]);
+    expect(result.sort).toEqual(["Nome (crescente)"]);
+  });
+
+  it("returns empty sections for a pristine state", () => {
+    const state: DataViewState = { search: "", pills: {}, sortBy: [], visibleColumns: [] };
+    const result = describeViewState(state, fields, columns);
+    expect(result).toEqual({ filters: [], columns: [], sort: [] });
+  });
+
+  it("omits the actions column (non-hideable) from the columns summary", () => {
+    const state: DataViewState = {
+      search: "",
+      pills: {},
+      sortBy: [],
+      visibleColumns: ["name", "actions"],
+    };
+    expect(describeViewState(state, fields, columns).columns).toEqual(["Nome"]);
+  });
+});

package/src/components/data-display/DataViews/__tests__/range-pill.test.tsx

@@ -0,0 +1,114 @@
+/**
+ * Range filters as pills in the INLINE filter bar (FUT-668).
+ *
+ * The bar used to render pills only, so `rangeFields` had a surface on the
+ * slide-in panel alone — the very panel `inlineFilters` replaces on a wide
+ * screen. A range filter was therefore invisible on exactly the screens that
+ * use it, which is what pushed Pedidos to hang its own inputs outside the grid.
+ */
+import { fireEvent, render, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+
+import { InlineFilterBar } from "../data-views-inline-bar";
+import { rangeChipLabel } from "../data-views-range-pill";
+import type { RangeFieldConfig } from "../data-views-types";
+
+interface Row extends Record<string, unknown> {
+  day: string;
+  amount: number;
+}
+
+const PERIOD: RangeFieldConfig<Row> = {
+  id: "period",
+  label: "Data",
+  kind: "day",
+  accessor: (row) => row.day,
+};
+const TOTAL: RangeFieldConfig<Row> = {
+  id: "total",
+  label: "Valor",
+  unit: "R$",
+  step: 0.01,
+  accessor: (row) => row.amount,
+};
+
+function renderBar(overrides: Partial<Parameters<typeof InlineFilterBar<Row>>[0]> = {}) {
+  const onChangeRange = vi.fn();
+  render(
+    <InlineFilterBar<Row>
+      testIdPrefix="grid"
+      search=""
+      fields={[]}
+      rangeFields={[PERIOD, TOTAL]}
+      pills={{}}
+      ranges={{}}
+      onSearchChange={vi.fn()}
+      onTogglePill={vi.fn()}
+      onChangeRange={onChangeRange}
+      onClearField={vi.fn()}
+      onClearAll={vi.fn()}
+      {...overrides}
+    />,
+  );
+  return { onChangeRange };
+}
+
+describe("InlineFilterBar — range pills", () => {
+  it("renders one pill per range field, in the filter row", () => {
+    renderBar();
+    expect(screen.getByTestId("grid-range-period")).toHaveTextContent("Data");
+    expect(screen.getByTestId("grid-range-total")).toHaveTextContent("Valor");
+  });
+
+  it("opens a popover with both bounds and reports each edit", () => {
+    const { onChangeRange } = renderBar();
+    fireEvent.click(screen.getByTestId("grid-range-period"));
+    fireEvent.change(screen.getByTestId("grid-range-period-min"), {
+      target: { value: "2026-07-01" },
+    });
+    expect(onChangeRange).toHaveBeenCalledWith("period", { min: "2026-07-01" });
+  });
+
+  it("keeps the OTHER bound when one end changes", () => {
+    const { onChangeRange } = renderBar({ ranges: { period: { min: "2026-07-01" } } });
+    fireEvent.click(screen.getByTestId("grid-range-period"));
+    fireEvent.change(screen.getByTestId("grid-range-period-max"), {
+      target: { value: "2026-07-31" },
+    });
+    expect(onChangeRange).toHaveBeenCalledWith("period", {
+      min: "2026-07-01",
+      max: "2026-07-31",
+    });
+  });
+
+  it("clears a bound rather than writing NaN when a number is emptied", () => {
+    const { onChangeRange } = renderBar({ ranges: { total: { min: 20 } } });
+    fireEvent.click(screen.getByTestId("grid-range-total"));
+    fireEvent.change(screen.getByTestId("grid-range-total-min"), { target: { value: "" } });
+    expect(onChangeRange).toHaveBeenCalledWith("total", { min: undefined });
+  });
+
+  it("shows an applied window as ONE removable chip that drops both ends", () => {
+    const { onChangeRange } = renderBar({
+      ranges: { period: { min: "2026-07-01", max: "2026-07-31" } },
+    });
+    const chip = screen.getByText("Data: 01/07–31/07");
+    expect(chip).toBeInTheDocument();
+    // The chip's delete is its sibling ✕ — clearing the window, not one end.
+    fireEvent.click(chip.parentElement?.querySelector("svg") as Element);
+    expect(onChangeRange).toHaveBeenCalledWith("period", {});
+  });
+});
+
+describe("rangeChipLabel", () => {
+  it("reads a two-sided window as a range", () => {
+    expect(rangeChipLabel(PERIOD, { min: "2026-07-01", max: "2026-07-31" })).toBe(
+      "Data: 01/07–31/07",
+    );
+  });
+
+  it("reads a one-sided window as the inequality it is, not a blank end", () => {
+    expect(rangeChipLabel(TOTAL, { min: 20 })).toBe("Valor: ≥ R$ 20");
+    expect(rangeChipLabel(TOTAL, { max: 50 })).toBe("Valor: ≤ R$ 50");
+  });
+});

package/src/components/data-display/DataViews/base-card.stories.tsx

@@ -0,0 +1,136 @@
+import TableRestaurantOutlinedIcon from "@mui/icons-material/TableRestaurantOutlined";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+
+import { Chip } from "../Chip";
+import { Button } from "../../form/Button";
+import { DropdownMenu } from "../../navigation/DropdownMenu";
+import { Box } from "../../../mui/Box";
+
+import { BaseCard } from "./base-card";
+import { CARD_ASPECT_RATIOS, type CardAspectRatio } from "./data-views-types";
+
+/**
+ * BaseCard is the only card in `@12-apps/ui`: a fixed-ratio, selectable tile with an
+ * image (or fallback), a title/subtitle caption, a top-right menu slot, and a
+ * top-left select checkbox. Domain "kind cards" live in the app and compose it.
+ */
+const meta: Meta<typeof BaseCard> = {
+  title: "DataDisplay/DataViews/BaseCard",
+  component: BaseCard,
+  parameters: { layout: "centered" },
+  tags: ["autodocs"],
+  argTypes: {
+    aspectRatio: {
+      control: "select",
+      options: Object.keys(CARD_ASPECT_RATIOS) as CardAspectRatio[],
+    },
+    scale: { control: { type: "range", min: 0.9, max: 1.6, step: 0.05 } },
+  },
+};
+export default meta;
+
+type Story = StoryObj<typeof BaseCard>;
+
+const kebab = (
+  <DropdownMenu
+    size="sm"
+    items={[
+      { id: "edit", label: "Editar", onClick: () => {} },
+      { id: "delete", label: "Excluir", color: "error", onClick: () => {} },
+    ]}
+    trigger={
+      <Button variant="text" size="sm" aria-label="Ações">
+        ⋮
+      </Button>
+    }
+  />
+);
+
+/** Title-first card (no image): the fallback icon fills the media region. */
+export const TitleWithFallback: Story = {
+  args: {
+    aspectRatio: "4:3",
+    scale: 1,
+    title: "Mesa 12",
+    subtitle: "4 lugares",
+    imageFallback: <TableRestaurantOutlinedIcon sx={{ fontSize: 48, opacity: 0.4 }} />,
+    menu: kebab,
+    onToggleSelect: () => {},
+  },
+  render: (args) => (
+    <Box sx={{ width: 220 }}>
+      <BaseCard {...args} />
+    </Box>
+  ),
+};
+
+/** With a display image. */
+export const WithImage: Story = {
+  args: {
+    aspectRatio: "1:1",
+    scale: 1,
+    title: "Espresso Duplo",
+    subtitle: "R$ 12,00",
+    image: <img src="https://placehold.co/300x300?text=☕" alt="" />,
+    menu: kebab,
+    onToggleSelect: () => {},
+  },
+  render: (args) => (
+    <Box sx={{ width: 220 }}>
+      <BaseCard {...args} />
+    </Box>
+  ),
+};
+
+/** mesa-style centered body content via `children` (no image, no caption). */
+export const CenteredBody: Story = {
+  args: {
+    aspectRatio: "4:3",
+    scale: 1,
+    menu: kebab,
+    onToggleSelect: () => {},
+    children: (
+      <>
+        <strong>Mesa 12</strong>
+        <Chip label="Livre" size="small" color="success" variant="outlined" />
+      </>
+    ),
+  },
+  render: (args) => (
+    <Box sx={{ width: 220 }}>
+      <BaseCard {...args} />
+    </Box>
+  ),
+};
+
+/** Every aspect ratio at a glance. */
+export const AllRatios: Story = {
+  render: () => (
+    <Box sx={{ display: "flex", gap: 2, flexWrap: "wrap", maxWidth: 720 }}>
+      {(Object.keys(CARD_ASPECT_RATIOS) as CardAspectRatio[]).map((ratio) => (
+        <Box key={ratio} sx={{ width: 160 }}>
+          <BaseCard
+            aspectRatio={ratio}
+            title={ratio}
+            imageFallback={<Box sx={{ fontSize: 24 }}>{ratio}</Box>}
+            onToggleSelect={() => {}}
+          />
+        </Box>
+      ))}
+    </Box>
+  ),
+};
+
+/** Selected + dimmed states. */
+export const States: Story = {
+  render: () => (
+    <Box sx={{ display: "flex", gap: 2 }}>
+      <Box sx={{ width: 180 }}>
+        <BaseCard aspectRatio="4:3" title="Selecionada" selected onToggleSelect={() => {}} />
+      </Box>
+      <Box sx={{ width: 180 }}>
+        <BaseCard aspectRatio="4:3" title="Desativada" dimmed onToggleSelect={() => {}} />
+      </Box>
+    </Box>
+  ),
+};