@12-apps/ui 1.5.0 → 1.5.2

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

@@ -1,114 +0,0 @@
-/**
- * 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

@@ -1,136 +0,0 @@
-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>
-  ),
-};

package/src/components/data-display/DescriptionItem/DescriptionItem.stories.tsx

@@ -1,254 +0,0 @@
-import ContentCopyIcon from '@mui/icons-material/ContentCopy';
-import { Box, Stack } from '@mui/material';
-import type { Meta, StoryObj } from '@storybook/react-vite';
-
-import { Button } from '../../form/Button/Button';
-import { Chip } from '../Chip/Chip';
-import { DescriptionItem } from './DescriptionItem';
-
-const meta: Meta<typeof DescriptionItem> = {
-  title: 'DataDisplay/DescriptionItem',
-  component: DescriptionItem,
-  parameters: {
-    layout: 'centered',
-  },
-  tags: ['autodocs', 'component:DescriptionItem'],
-  argTypes: {
-    label: {
-      control: 'text',
-      description: 'The label text to display',
-    },
-    value: {
-      control: 'text',
-      description: 'The value to display - can be text, number, or any React node',
-    },
-    orientation: {
-      control: 'radio',
-      options: ['vertical', 'horizontal'],
-      description: 'Layout orientation',
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: {
-    label: 'Incident ID',
-    value: 'INC-12345',
-  },
-};
-
-export const WithNumber: Story = {
-  args: {
-    label: 'Services Affected',
-    value: 42,
-  },
-};
-
-export const WithLongText: Story = {
-  args: {
-    label: 'Description',
-    value: 'This is a longer description that demonstrates how the component handles multiple lines of text content.',
-  },
-};
-
-export const WithCustomContent: Story = {
-  render: () => (
-    <DescriptionItem
-      label="Status"
-      value={<Chip label="Active" color="success" size="small" />}
-    />
-  ),
-};
-
-export const HorizontalOrientation: Story = {
-  render: () => (
-    <Stack spacing={2} sx={{ width: 400 }}>
-      <DescriptionItem label="Name" value="John Doe" orientation="horizontal" />
-      <DescriptionItem label="Email" value="john.doe@example.com" orientation="horizontal" />
-      <DescriptionItem label="Status" value={<Chip label="Active" color="success" size="small" />} orientation="horizontal" />
-      <DescriptionItem label="Role" value="Administrator" orientation="horizontal" />
-    </Stack>
-  ),
-};
-
-export const VerticalOrientation: Story = {
-  render: () => (
-    <Stack spacing={3} sx={{ width: 300 }}>
-      <DescriptionItem label="Name" value="John Doe" orientation="vertical" />
-      <DescriptionItem label="Email" value="john.doe@example.com" orientation="vertical" />
-      <DescriptionItem label="Status" value={<Chip label="Active" color="success" size="small" />} orientation="vertical" />
-      <DescriptionItem label="Role" value="Administrator" orientation="vertical" />
-    </Stack>
-  ),
-};
-
-export const WithCopyableValue: Story = {
-  render: () => (
-    <DescriptionItem
-      label="Incident ID"
-      value={
-        <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
-          <span style={{ fontWeight: 600, fontSize: '0.875rem' }}>INC-12345</span>
-          <Button
-            variant="ghost"
-            size="sm"
-            onClick={() => navigator.clipboard.writeText('INC-12345')}
-            sx={{ minWidth: 'auto', padding: 0.25 }}
-            aria-label="Copy incident ID"
-          >
-            <ContentCopyIcon sx={{ fontSize: 16 }} />
-          </Button>
-        </Box>
-      }
-    />
-  ),
-};
-
-export const GridLayout: Story = {
-  render: () => (
-    <Box
-      sx={{
-        display: 'grid',
-        gridTemplateColumns: 'repeat(4, 1fr)',
-        gap: 3,
-        width: 800,
-      }}
-    >
-      <DescriptionItem label="Incident ID" value="INC-12345" />
-      <DescriptionItem label="Started" value="2 hours ago" />
-      <DescriptionItem label="Duration" value="Ongoing" />
-      <DescriptionItem label="Services Affected" value={5} />
-    </Box>
-  ),
-};
-
-export const VerticalStack: Story = {
-  render: () => (
-    <Stack spacing={3} sx={{ width: 300 }}>
-      <DescriptionItem label="Name" value="John Doe" />
-      <DescriptionItem label="Email" value="john.doe@example.com" />
-      <DescriptionItem label="Department" value="Engineering" />
-      <DescriptionItem
-        label="Role"
-        value={<Chip label="Admin" color="primary" size="small" />}
-      />
-    </Stack>
-  ),
-};
-
-export const ResponsiveGrid: Story = {
-  render: () => (
-    <Box
-      sx={{
-        display: 'grid',
-        gridTemplateColumns: { xs: '1fr', sm: 'repeat(2, 1fr)', md: 'repeat(4, 1fr)' },
-        gap: 3,
-        maxWidth: 900,
-      }}
-    >
-      <DescriptionItem label="Order ID" value="ORD-2024-001" />
-      <DescriptionItem label="Customer" value="Acme Corp" />
-      <DescriptionItem label="Total Amount" value="$1,234.56" />
-      <DescriptionItem label="Status" value={<Chip label="Completed" color="success" size="small" />} />
-      <DescriptionItem label="Order Date" value="Jan 15, 2024" />
-      <DescriptionItem label="Shipping Method" value="Express" />
-      <DescriptionItem label="Items" value={3} />
-      <DescriptionItem label="Payment Method" value="Credit Card" />
-    </Box>
-  ),
-};
-
-export const WithEmptyValue: Story = {
-  render: () => (
-    <Stack spacing={3} sx={{ width: 300 }}>
-      <DescriptionItem label="Optional Field" value="N/A" />
-      <DescriptionItem label="No Value" value="-" />
-      <DescriptionItem label="Empty" value="" />
-    </Stack>
-  ),
-};
-
-export const MixedOrientations: Story = {
-  render: () => (
-    <Box sx={{ width: 600 }}>
-      <Stack spacing={3}>
-        <Box>
-          <h3>Vertical Layout (Default)</h3>
-          <Box sx={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 3, mt: 2 }}>
-            <DescriptionItem label="Name" value="John Doe" />
-            <DescriptionItem label="Age" value={32} />
-            <DescriptionItem label="City" value="San Francisco" />
-          </Box>
-        </Box>
-
-        <Box>
-          <h3>Horizontal Layout</h3>
-          <Stack spacing={2} sx={{ mt: 2 }}>
-            <DescriptionItem label="Name" value="John Doe" orientation="horizontal" />
-            <DescriptionItem label="Age" value={32} orientation="horizontal" />
-            <DescriptionItem label="City" value="San Francisco" orientation="horizontal" />
-          </Stack>
-        </Box>
-      </Stack>
-    </Box>
-  ),
-};
-
-export const AllVariations: Story = {
-  render: () => (
-    <Stack spacing={4} sx={{ width: 800 }}>
-      <Box>
-        <h3>Text Values (Vertical)</h3>
-        <Box sx={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 3, mt: 2 }}>
-          <DescriptionItem label="Short Text" value="Value" />
-          <DescriptionItem label="Medium Text" value="This is a medium length value" />
-          <DescriptionItem label="Long Text" value="This is a much longer text value that will wrap to multiple lines" />
-        </Box>
-      </Box>
-
-      <Box>
-        <h3>Text Values (Horizontal)</h3>
-        <Stack spacing={2} sx={{ mt: 2 }}>
-          <DescriptionItem label="Short Text" value="Value" orientation="horizontal" />
-          <DescriptionItem label="Medium Text" value="This is a medium length value" orientation="horizontal" />
-          <DescriptionItem label="Long Text" value="This is a much longer text value that will wrap to multiple lines" orientation="horizontal" />
-        </Stack>
-      </Box>
-
-      <Box>
-        <h3>Number Values</h3>
-        <Box sx={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 3, mt: 2 }}>
-          <DescriptionItem label="Integer" value={42} />
-          <DescriptionItem label="Decimal" value={3.14159} />
-          <DescriptionItem label="Large Number" value={1234567890} />
-        </Box>
-      </Box>
-
-      <Box>
-        <h3>Custom Components</h3>
-        <Box sx={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 3, mt: 2 }}>
-          <DescriptionItem
-            label="With Chip"
-            value={<Chip label="Active" color="success" size="small" />}
-          />
-          <DescriptionItem
-            label="With Button"
-            value={<Button size="xs" variant="outline">Action</Button>}
-          />
-          <DescriptionItem
-            label="Multiple Elements"
-            value={
-              <Box sx={{ display: 'flex', gap: 0.5 }}>
-                <Chip label="Tag 1" size="small" />
-                <Chip label="Tag 2" size="small" />
-              </Box>
-            }
-          />
-        </Box>
-      </Box>
-    </Stack>
-  ),
-};