diff --git a/.changeset/badge-array-support.md b/.changeset/badge-array-support.md new file mode 100644 index 00000000..04cdf401 --- /dev/null +++ b/.changeset/badge-array-support.md @@ -0,0 +1,38 @@ +--- +"@tailor-platform/app-shell": minor +--- + +Add array badge support to DataTable and DescriptionCard with shared `BadgeList` rendering and overflow popover. + +```tsx +// DataTable — badge column with array accessor +column({ + ...infer("tags"), + type: "badge", + typeOptions: { + badgeVariantMap: { Premium: "warning", Office: "outline-info" }, + maxVisible: 2, + }, +}) + +// DescriptionCard — array badges with maxVisible + +``` + +Additional changes: + +- Unify badge variant resolution into shared `resolveBadgeVariant()` utility with `"outline-neutral"` as the default variant (previously `"neutral"` in DataTable) +- Export `BadgeVariant` and `BadgeOptions` types from the public API +- `inferColumns()` no longer sets a default `render` function — columns without an explicit `type` or `render` now display `—` for null/empty values (aligns with typed-column behavior) +- Deprecate `BadgeVariantType` in favor of `BadgeVariant` diff --git a/examples/nextjs-app/src/modules/pages/data-table-demo.tsx b/examples/nextjs-app/src/modules/pages/data-table-demo.tsx index 61b22100..6b7b5182 100644 --- a/examples/nextjs-app/src/modules/pages/data-table-demo.tsx +++ b/examples/nextjs-app/src/modules/pages/data-table-demo.tsx @@ -1,6 +1,5 @@ import { defineResource, - Badge, DataTable, useDataTable, useCollectionVariables, @@ -44,6 +43,7 @@ const productMetadata = { required: true, enumValues: ["Active", "Draft", "Archived"], }, + { name: "tags", type: "string", required: false }, ], } as const; @@ -91,14 +91,27 @@ const productColumns = [ }), column({ ...infer("status"), - render: (row) => { - const variant = - row.status === "Active" - ? ("success" as const) - : row.status === "Draft" - ? ("outline-warning" as const) - : ("neutral" as const); - return {row.status}; + type: "badge", + typeOptions: { + badgeVariantMap: { + Active: "success", + Draft: "outline-warning", + Archived: "neutral", + }, + }, + }), + column({ + ...infer("tags"), + type: "badge", + typeOptions: { + badgeVariantMap: { + Premium: "warning", + Ergonomic: "success", + Office: "outline-info", + Wireless: "outline-neutral", + }, + defaultBadgeVariant: "neutral", + maxVisible: 2, }, }), ]; diff --git a/examples/nextjs-app/src/modules/pages/mock-data.ts b/examples/nextjs-app/src/modules/pages/mock-data.ts index 8d0fec1d..4e8bc156 100644 --- a/examples/nextjs-app/src/modules/pages/mock-data.ts +++ b/examples/nextjs-app/src/modules/pages/mock-data.ts @@ -9,6 +9,7 @@ export type Product = { price: number; stock: number; status: "Active" | "Draft" | "Archived"; + tags: string[]; }; export const allProducts: Product[] = [ @@ -24,6 +25,7 @@ export const allProducts: Product[] = [ price: 499.99, stock: 42, status: "Active", + tags: ["Ergonomic", "Office", "Best Seller"], }, { id: "p-002", @@ -37,6 +39,7 @@ export const allProducts: Product[] = [ price: 899.0, stock: 15, status: "Active", + tags: ["Motorized", "Office", "Adjustable", "Premium"], }, { id: "p-003", @@ -49,6 +52,7 @@ export const allProducts: Product[] = [ price: 159.99, stock: 230, status: "Active", + tags: ["Mechanical", "RGB", "Hot-swap"], }, { id: "p-004", @@ -62,6 +66,7 @@ export const allProducts: Product[] = [ price: 79.99, stock: 0, status: "Draft", + tags: ["USB-C", "Portable"], }, { id: "p-005", @@ -75,6 +80,7 @@ export const allProducts: Product[] = [ price: 129.0, stock: 57, status: "Active", + tags: ["Ergonomic", "Adjustable"], }, { id: "p-006", @@ -87,6 +93,7 @@ export const allProducts: Product[] = [ price: 89.99, stock: 120, status: "Archived", + tags: ["HD", "Autofocus"], }, { id: "p-007", @@ -100,6 +107,7 @@ export const allProducts: Product[] = [ price: 45.0, stock: 88, status: "Active", + tags: ["LED", "USB Charging"], }, { id: "p-008", @@ -113,6 +121,7 @@ export const allProducts: Product[] = [ price: 29.99, stock: 200, status: "Draft", + tags: ["Cable Management"], }, { id: "p-009", @@ -126,6 +135,7 @@ export const allProducts: Product[] = [ price: 349.99, stock: 64, status: "Active", + tags: ["ANC", "Bluetooth", "Wireless", "Premium"], }, { id: "p-010", @@ -138,6 +148,7 @@ export const allProducts: Product[] = [ price: 59.99, stock: 110, status: "Active", + tags: ["Portable", "Foldable"], }, { id: "p-011", @@ -151,6 +162,7 @@ export const allProducts: Product[] = [ price: 69.99, stock: 180, status: "Active", + tags: ["Ergonomic", "Wireless", "Rechargeable"], }, { id: "p-012", @@ -164,6 +176,7 @@ export const allProducts: Product[] = [ price: 34.99, stock: 300, status: "Active", + tags: ["Eco-friendly", "Non-slip"], }, { id: "p-013", @@ -177,6 +190,7 @@ export const allProducts: Product[] = [ price: 249.0, stock: 22, status: "Draft", + tags: ["Adjustable", "Heavy-duty"], }, { id: "p-014", @@ -189,6 +203,7 @@ export const allProducts: Product[] = [ price: 24.99, stock: 500, status: "Active", + tags: ["Surge Protection"], }, { id: "p-015", @@ -202,6 +217,7 @@ export const allProducts: Product[] = [ price: 189.0, stock: 18, status: "Active", + tags: ["Magnetic", "Office"], }, { id: "p-016", @@ -215,6 +231,7 @@ export const allProducts: Product[] = [ price: 129.99, stock: 75, status: "Active", + tags: ["USB", "Cardioid", "Streaming"], }, { id: "p-017", @@ -228,6 +245,7 @@ export const allProducts: Product[] = [ price: 349.0, stock: 8, status: "Draft", + tags: ["Lockable", "Heavy-duty", "Office"], }, { id: "p-018", @@ -240,6 +258,7 @@ export const allProducts: Product[] = [ price: 14.99, stock: 600, status: "Active", + tags: ["4K", "Braided"], }, { id: "p-019", @@ -253,6 +272,7 @@ export const allProducts: Product[] = [ price: 79.0, stock: 45, status: "Archived", + tags: ["Ergonomic", "Adjustable"], }, { id: "p-020", @@ -266,6 +286,7 @@ export const allProducts: Product[] = [ price: 199.99, stock: 33, status: "Active", + tags: ["Thunderbolt", "USB-C", "4K", "Ethernet", "Premium"], }, ]; diff --git a/examples/vite-app/src/pages/dashboard/orders/[id]/page.tsx b/examples/vite-app/src/pages/dashboard/orders/[id]/page.tsx index 0ab89ee3..fb68b23e 100644 --- a/examples/vite-app/src/pages/dashboard/orders/[id]/page.tsx +++ b/examples/vite-app/src/pages/dashboard/orders/[id]/page.tsx @@ -68,6 +68,7 @@ const OrderDetailPage = () => { const orderData = { orderId: id, status: "processing", + tags: ["wholesale", "priority", "fragile", "express", "insured", "tracked"], customer: "Acme Corporation", totalAmount: 3450.0, currency: "USD", @@ -109,6 +110,22 @@ const OrderDetailPage = () => { }, }, }, + { + key: "tags", + label: "Tags", + type: "badge", + meta: { + maxVisible: 3, + badgeVariantMap: { + wholesale: "outline-info", + priority: "error", + fragile: "warning", + express: "subtle-success", + insured: "outline-neutral", + tracked: "outline-success", + }, + }, + }, { key: "customer", label: "Customer" }, { key: "totalAmount", diff --git a/packages/core/src/components/badge-list.test.tsx b/packages/core/src/components/badge-list.test.tsx new file mode 100644 index 00000000..2d1e7b97 --- /dev/null +++ b/packages/core/src/components/badge-list.test.tsx @@ -0,0 +1,137 @@ +import { afterEach, describe, expect, it } from "vitest"; +import { cleanup, render, screen, waitFor } from "@testing-library/react"; +import userEvent from "@testing-library/user-event"; +import { createAppShellWrapper } from "../../tests/test-utils"; +import { BadgeList, resolveBadgeVariant, resolveBadgeLabel } from "./badge-list"; + +afterEach(() => { + cleanup(); +}); + +const wrapper = createAppShellWrapper(); + +describe("resolveBadgeVariant", () => { + it("returns variant from map", () => { + expect(resolveBadgeVariant("urgent", { badgeVariantMap: { urgent: "error" } })).toBe("error"); + }); + + it("falls back to case-insensitive lookup", () => { + expect(resolveBadgeVariant("URGENT", { badgeVariantMap: { urgent: "error" } })).toBe("error"); + }); + + it("returns defaultBadgeVariant when not in map", () => { + expect(resolveBadgeVariant("unknown", { defaultBadgeVariant: "warning" })).toBe("warning"); + }); + + it("returns 'outline-neutral' when no options", () => { + expect(resolveBadgeVariant("anything", undefined)).toBe("outline-neutral"); + }); +}); + +describe("resolveBadgeLabel", () => { + it("returns label from map", () => { + expect(resolveBadgeLabel("draft", { badgeLabelMap: { draft: "Draft Order" } })).toBe( + "Draft Order", + ); + }); + + it("returns undefined when not in map", () => { + expect(resolveBadgeLabel("missing", { badgeLabelMap: { draft: "Draft" } })).toBeUndefined(); + }); + + it("returns undefined when no options", () => { + expect(resolveBadgeLabel("anything", undefined)).toBeUndefined(); + }); +}); + +describe("BadgeList", () => { + it("renders a single badge for a string value", () => { + const { container } = render(, { wrapper }); + expect(container.textContent).toBe("active"); + }); + + it("renders multiple badges from array", () => { + const { container } = render(, { + wrapper, + }); + expect(container.textContent).toContain("a"); + expect(container.textContent).toContain("b"); + expect(container.textContent).toContain("c"); + }); + + it("returns null for empty array", () => { + const { container } = render(, { wrapper }); + expect(container.textContent).toBe(""); + }); + + it("returns null for null value", () => { + const { container } = render(, { wrapper }); + expect(container.textContent).toBe(""); + }); + + it("filters out null and empty string values", () => { + const { container } = render(, { + wrapper, + }); + expect(container.textContent).toContain("a"); + expect(container.textContent).toContain("b"); + }); + + it("applies badgeLabelMap for display labels", () => { + const { container } = render( + , + { wrapper }, + ); + expect(container.textContent).toBe("Draft Order"); + }); + + it("uses custom resolveLabel function", () => { + const { container } = render( + v.toUpperCase()} />, + { wrapper }, + ); + expect(container.textContent).toContain("HELLO_WORLD"); + }); + + it("renders maxVisible badges with +N overflow", () => { + const { container } = render(, { + wrapper, + }); + expect(container.textContent).toContain("a"); + expect(container.textContent).toContain("b"); + expect(container.textContent).toContain("+3"); + expect(container.textContent).not.toContain("c"); + expect(container.textContent).not.toContain("d"); + expect(container.textContent).not.toContain("e"); + }); + + it("does not show overflow when count is within maxVisible", () => { + const { container } = render(, { wrapper }); + expect(container.textContent).toContain("a"); + expect(container.textContent).toContain("b"); + expect(container.textContent).not.toContain("+"); + }); + + it("shows overflow badges in popover on hover", async () => { + const user = userEvent.setup(); + render(, { + wrapper, + }); + + const trigger = screen.getByText("+2"); + await user.hover(trigger); + + await waitFor(() => { + expect(screen.getByText("c")).toBeDefined(); + expect(screen.getByText("d")).toBeDefined(); + }); + }); + + it("applies badgeClassName to each badge", () => { + const { container } = render(, { + wrapper, + }); + const badge = container.querySelector("[class*='w-fit']"); + expect(badge).not.toBeNull(); + }); +}); diff --git a/packages/core/src/components/badge-list.tsx b/packages/core/src/components/badge-list.tsx new file mode 100644 index 00000000..e9e0df53 --- /dev/null +++ b/packages/core/src/components/badge-list.tsx @@ -0,0 +1,152 @@ +"use client"; + +import * as React from "react"; +import { Popover } from "@base-ui/react/popover"; +import { Badge } from "./badge"; +import type { BadgeProps } from "./badge"; + +// ============================================================================ +// BADGE UTILITIES (types & helpers) +// ============================================================================ + +/** + * Variant union accepted by the app-shell `` component. + * Shared across DataTable, DescriptionCard, and any other badge consumers. + */ +export type BadgeVariant = NonNullable; + +/** + * Common options for badge rendering. + */ +export interface BadgeOptions { + /** + * Maps each value (stringified) to a Badge variant. Values not in the + * map fall back to `defaultBadgeVariant`. + */ + badgeVariantMap?: Record; + /** + * Maps each value (stringified) to a display label. Values not in the + * map render the raw value (or sentence-cased value if enabled). + */ + badgeLabelMap?: Record; + /** Variant used when the value is not in `badgeVariantMap`. Default: `"outline-neutral"`. */ + defaultBadgeVariant?: BadgeVariant; +} + +/** + * Resolve badge variant for a given value string. + * Supports case-insensitive lookup as a fallback. + */ +export function resolveBadgeVariant( + value: string, + options: BadgeOptions | undefined, +): BadgeVariant { + const map = options?.badgeVariantMap; + if (map) { + const direct = map[value]; + if (direct) return direct; + const lower = map[value.toLowerCase()]; + if (lower) return lower; + } + return options?.defaultBadgeVariant ?? "outline-neutral"; +} + +/** + * Resolve badge display label for a given value string. + */ +export function resolveBadgeLabel( + value: string, + options: BadgeOptions | undefined, +): string | undefined { + return options?.badgeLabelMap?.[value]; +} + +// ============================================================================ +// BADGE LIST COMPONENT +// ============================================================================ + +/** + * Props for the BadgeList component. + */ +export interface BadgeListProps { + /** Raw value(s) to render as badges. Accepts a single value or an array. */ + value: unknown; + /** Badge options (variant map, label map, default variant). */ + options?: BadgeOptions; + /** Maximum number of visible badges before showing "+N" overflow. */ + maxVisible?: number; + /** + * Custom label resolver. Called for each value to determine the display text. + * When omitted, falls back to `badgeLabelMap` lookup then raw string value. + */ + resolveLabel?: (value: string) => string; + /** Additional className applied to each Badge element. */ + badgeClassName?: string; +} + +/** + * Shared badge list renderer used by DataTable and DescriptionCard. + * Renders one or more Badge components with optional overflow popover. + */ +export function BadgeList({ + value, + options, + maxVisible, + resolveLabel: resolveLabelProp, + badgeClassName, +}: BadgeListProps): React.ReactNode { + const values = Array.isArray(value) ? value : [value]; + const nonEmpty = values.filter((v) => v != null && v !== ""); + + if (nonEmpty.length === 0) return null; + + const getLabel = (raw: unknown) => { + const str = String(raw); + if (resolveLabelProp) return resolveLabelProp(str); + return resolveBadgeLabel(str, options) ?? str; + }; + + const visible = maxVisible != null ? nonEmpty.slice(0, maxVisible) : nonEmpty; + const overflow = maxVisible != null ? nonEmpty.slice(maxVisible) : []; + + const renderSingleBadge = (raw: unknown, i: number) => { + const str = String(raw); + const variant = resolveBadgeVariant(str, options); + const label = getLabel(raw); + return ( + + {label} + + ); + }; + + // Single badge — no wrapper div needed + if (visible.length === 1 && overflow.length === 0) { + return renderSingleBadge(visible[0], 0); + } + + return ( +
+ {visible.map((raw, i) => renderSingleBadge(raw, i))} + {overflow.length > 0 && ( + + + +{overflow.length} + + + + +
+ {overflow.map((raw, i) => renderSingleBadge(raw, i))} +
+ + + + + )} +
+ ); +} diff --git a/packages/core/src/components/data-table/cell-renderers.tsx b/packages/core/src/components/data-table/cell-renderers.tsx index b6598462..414b4526 100644 --- a/packages/core/src/components/data-table/cell-renderers.tsx +++ b/packages/core/src/components/data-table/cell-renderers.tsx @@ -1,9 +1,8 @@ import type { ReactNode } from "react"; import { Link } from "react-router"; -import { Badge } from "@/components/badge"; +import { BadgeList } from "@/components/badge-list"; import type { BadgeCellOptions, - BadgeVariant, Column, DateCellOptions, LinkCellOptions, @@ -49,8 +48,18 @@ function toDate(value: unknown): Date | null { } function renderText(value: unknown): ReactNode { - if (isEmpty(value)) return PLACEHOLDER; - return String(value); + switch (true) { + case isEmpty(value): + return PLACEHOLDER; + case typeof value === "boolean": + return value ? "✓" : "✗"; + case value instanceof Date: + return value.toLocaleDateString(); + case typeof value === "object": + return JSON.stringify(value); + default: + return String(value); + } } function renderNumber(value: unknown, options: NumberCellOptions | undefined): ReactNode { @@ -79,7 +88,10 @@ function renderMoney>( // `maxDecimals` raises the cap above the currency default while keeping the // minimum at the currency default (e.g. 2 for USD). Lets a JPY column stay // at 0 decimals while a USD price-detail column shows up to 4. - const formatOptions: Intl.NumberFormatOptions = { style: "currency", currency }; + const formatOptions: Intl.NumberFormatOptions = { + style: "currency", + currency, + }; if (options?.maxDecimals != null) { formatOptions.maximumFractionDigits = options.maxDecimals; } @@ -117,12 +129,10 @@ function renderDate(value: unknown, options: DateCellOptions | undefined): React } function renderBadge(value: unknown, options: BadgeCellOptions | undefined): ReactNode { - if (isEmpty(value)) return PLACEHOLDER; - const key = String(value); - const variant: BadgeVariant = - options?.badgeVariantMap?.[key] ?? options?.defaultBadgeVariant ?? "neutral"; - const label = options?.badgeLabelMap?.[key] ?? key; - return {label}; + const items = Array.isArray(value) ? value : value != null ? [value] : []; + const nonEmpty = items.filter((v) => v != null && v !== ""); + if (nonEmpty.length === 0) return PLACEHOLDER; + return ; } function renderLink>( diff --git a/packages/core/src/components/data-table/data-table.test.tsx b/packages/core/src/components/data-table/data-table.test.tsx index f5e067c2..277c38e9 100644 --- a/packages/core/src/components/data-table/data-table.test.tsx +++ b/packages/core/src/components/data-table/data-table.test.tsx @@ -268,14 +268,18 @@ describe("DataTable", () => { ]; it("applies text-right to the header cell when align=right", () => { - const { container } = render(, { wrapper }); + const { container } = render(, { + wrapper, + }); const heads = container.querySelectorAll('[data-slot="data-table-header"] th'); expect(heads[0]?.className).not.toContain("text-right"); expect(heads[1]?.className).toContain("text-right"); }); it("applies text-right to body cells when align=right", () => { - const { container } = render(, { wrapper }); + const { container } = render(, { + wrapper, + }); const firstRow = container.querySelector('[data-slot="data-table-row"]'); const cells = firstRow?.querySelectorAll('[data-slot="data-table-cell"]') ?? []; expect(cells[0]?.className).not.toContain("text-right"); @@ -308,7 +312,10 @@ describe("DataTable", () => { const numRows: NumRow[] = [{ id: "1", count: 42 }]; const cols: Column[] = [{ label: "Count", type: "number", accessor: (r) => r.count }]; function Harness() { - const table = useDataTable({ columns: cols, data: { rows: numRows } }); + const table = useDataTable({ + columns: cols, + data: { rows: numRows }, + }); return ( @@ -334,7 +341,10 @@ describe("DataTable", () => { }, ]; function Harness() { - const table = useDataTable({ columns: cols, data: { rows: moneyRows } }); + const table = useDataTable({ + columns: cols, + data: { rows: moneyRows }, + }); return ( @@ -355,7 +365,12 @@ describe("DataTable", () => { { label: "Text", type: "text", accessor: (r) => r.v }, { label: "Date", type: "date", accessor: (r) => r.v }, { label: "Badge", type: "badge", accessor: (r) => r.v }, - { label: "Link", type: "link", accessor: (r) => r.v, typeOptions: { href: () => "/x" } }, + { + label: "Link", + type: "link", + accessor: (r) => r.v, + typeOptions: { href: () => "/x" }, + }, ]; function Harness() { const table = useDataTable({ columns: cols, data: { rows } }); @@ -377,10 +392,18 @@ describe("DataTable", () => { type NumRow = { id: string; count: number }; const numRows: NumRow[] = [{ id: "1", count: 42 }]; const cols: Column[] = [ - { label: "Count", type: "number", accessor: (r) => r.count, align: "left" }, + { + label: "Count", + type: "number", + accessor: (r) => r.count, + align: "left", + }, ]; function Harness() { - const table = useDataTable({ columns: cols, data: { rows: numRows } }); + const table = useDataTable({ + columns: cols, + data: { rows: numRows }, + }); return ( @@ -407,7 +430,9 @@ describe("DataTable", () => { }, { label: "Status", render: (row) => row.status }, ]; - const { container } = render(, { wrapper }); + const { container } = render(, { + wrapper, + }); const firstRow = container.querySelector('[data-slot="data-table-row"]'); const cells = firstRow?.querySelectorAll('[data-slot="data-table-cell"]') ?? []; expect(cells[0]?.className).toContain("truncate"); @@ -424,7 +449,9 @@ describe("DataTable", () => { truncate: true, }, ]; - const { container } = render(, { wrapper }); + const { container } = render(, { + wrapper, + }); const cells = container.querySelectorAll('[data-slot="data-table-cell"]'); expect(isTooltipWired(cells[0] ?? null)).toBe(true); expect(isTooltipWired(cells[1] ?? null)).toBe(true); @@ -442,7 +469,10 @@ describe("DataTable", () => { }, ]; function Harness() { - const table = useDataTable({ columns: cols, data: { rows: numRows } }); + const table = useDataTable({ + columns: cols, + data: { rows: numRows }, + }); return ( @@ -466,7 +496,10 @@ describe("DataTable", () => { }, ]; function Harness() { - const table = useDataTable({ columns: cols, data: { rows: objRows } }); + const table = useDataTable({ + columns: cols, + data: { rows: objRows }, + }); return ( @@ -488,7 +521,9 @@ describe("DataTable", () => { truncate: true, }, ]; - const { container } = render(, { wrapper }); + const { container } = render(, { + wrapper, + }); const cell = container.querySelector('[data-slot="data-table-cell"]'); expect(cell?.className).toContain("truncate"); expect(isTooltipWired(cell)).toBe(false); @@ -506,7 +541,9 @@ describe("DataTable", () => { truncate: true, }, ]; - const { container } = render(, { wrapper }); + const { container } = render(, { + wrapper, + }); const cells = container.querySelectorAll('[data-slot="data-table-cell"]'); expect(isTooltipWired(cells[0] ?? null)).toBe(true); expect(isTooltipWired(cells[1] ?? null)).toBe(true); @@ -629,6 +666,180 @@ describe("DataTable", () => { expect(container.textContent).toContain("unknown"); }); + it("renders multiple badges from array accessor", () => { + const rows = [ + { + id: "1", + name: "Item", + tags: ["urgent", "fragile"], + status: "shipped", + amount: 100, + date: "2026-01-01", + detailUrl: "/items/1", + }, + ]; + function Harness() { + const table = useDataTable<(typeof rows)[number]>({ + columns: [ + { + label: "Tags", + type: "badge", + accessor: (r) => r.tags, + typeOptions: { + badgeVariantMap: { urgent: "error", fragile: "warning" }, + }, + }, + ], + data: { rows }, + }); + return ( + + + + ); + } + const { container } = render(, { wrapper }); + expect(container.textContent).toContain("urgent"); + expect(container.textContent).toContain("fragile"); + }); + + it("renders maxVisible badges with +N overflow in DataTable", () => { + const rows = [ + { + id: "1", + name: "Item", + tags: ["a", "b", "c", "d"], + status: "shipped", + amount: 100, + date: "2026-01-01", + detailUrl: "/items/1", + }, + ]; + function Harness() { + const table = useDataTable<(typeof rows)[number]>({ + columns: [ + { + label: "Tags", + type: "badge", + accessor: (r) => r.tags, + typeOptions: { maxVisible: 2 }, + }, + ], + data: { rows }, + }); + return ( + + + + ); + } + const { container } = render(, { wrapper }); + expect(container.textContent).toContain("a"); + expect(container.textContent).toContain("b"); + expect(container.textContent).toContain("+2"); + expect(container.textContent).not.toContain("c"); + expect(container.textContent).not.toContain("d"); + }); + + it("renders placeholder for empty array in badge column", () => { + const rows = [ + { + id: "1", + name: "Item", + tags: [] as string[], + status: "shipped", + amount: 100, + date: "2026-01-01", + detailUrl: "/items/1", + }, + ]; + function Harness() { + const table = useDataTable<(typeof rows)[number]>({ + columns: [ + { + label: "Tags", + type: "badge", + accessor: (r) => r.tags, + }, + ], + data: { rows }, + }); + return ( + + + + ); + } + const { container } = render(, { wrapper }); + expect(container.textContent).toContain("—"); + }); + + it("renders placeholder for array of all-null values in badge column", () => { + const rows = [ + { + id: "1", + name: "Item", + tags: [null, null] as (string | null)[], + status: "shipped", + amount: 100, + date: "2026-01-01", + detailUrl: "/items/1", + }, + ]; + function Harness() { + const table = useDataTable<(typeof rows)[number]>({ + columns: [ + { + label: "Tags", + type: "badge", + accessor: (r) => r.tags as unknown as string[], + }, + ], + data: { rows }, + }); + return ( + + + + ); + } + const { container } = render(, { wrapper }); + expect(container.textContent).toContain("—"); + }); + + it("renders placeholder for array of empty strings in badge column", () => { + const rows = [ + { + id: "1", + name: "Item", + tags: ["", ""], + status: "shipped", + amount: 100, + date: "2026-01-01", + detailUrl: "/items/1", + }, + ]; + function Harness() { + const table = useDataTable<(typeof rows)[number]>({ + columns: [ + { + label: "Tags", + type: "badge", + accessor: (r) => r.tags, + }, + ], + data: { rows }, + }); + return ( + + + + ); + } + const { container } = render(, { wrapper }); + expect(container.textContent).toContain("—"); + }); + it("renders link cells with anchor when href is provided", () => { function RouterWrapper({ children }: { children: ReactNode }) { return {wrapper({ children })}; @@ -662,6 +873,65 @@ describe("DataTable", () => { expect(container.textContent).toContain("Order 1"); }); + it("renders boolean as ✓/✗ when no type is set", () => { + type BoolRow = { id: string; active: boolean }; + const rows: BoolRow[] = [ + { id: "1", active: true }, + { id: "2", active: false }, + ]; + function Harness() { + const table = useDataTable({ + columns: [{ id: "active", label: "Active", accessor: (r) => r.active }], + data: { rows }, + }); + return ( + + + + ); + } + const { container } = render(, { wrapper }); + expect(container.textContent).toContain("✓"); + expect(container.textContent).toContain("✗"); + }); + + it("renders Date as locale string when no type is set", () => { + type DateRow = { id: string; createdAt: Date }; + const date = new Date("2026-03-15T00:00:00Z"); + const rows: DateRow[] = [{ id: "1", createdAt: date }]; + function Harness() { + const table = useDataTable({ + columns: [{ id: "createdAt", label: "Created", accessor: (r) => r.createdAt }], + data: { rows }, + }); + return ( + + + + ); + } + const { container } = render(, { wrapper }); + expect(container.textContent).toContain(date.toLocaleDateString()); + }); + + it("renders object as JSON when no type is set", () => { + type ObjRow = { id: string; meta: Record }; + const rows: ObjRow[] = [{ id: "1", meta: { foo: "bar" } }]; + function Harness() { + const table = useDataTable({ + columns: [{ id: "meta", label: "Meta", accessor: (r) => r.meta }], + data: { rows }, + }); + return ( + + + + ); + } + const { container } = render(, { wrapper }); + expect(container.textContent).toContain('{"foo":"bar"}'); + }); + it("explicit render overrides type renderer", () => { const { container } = renderTypedTable([ { @@ -721,17 +991,35 @@ describe("DataTable", () => { // `render` (and drop `type`) when the cell value isn't a primitive. // @ts-expect-error — text accessor cannot return an array - const textArr: Column = { type: "text", accessor: () => [1, 2] }; + const textArr: Column = { + type: "text", + accessor: () => [1, 2], + }; // @ts-expect-error — text accessor cannot return a plain object - const textObj: Column = { type: "text", accessor: () => ({ a: 1 }) }; + const textObj: Column = { + type: "text", + accessor: () => ({ a: 1 }), + }; // @ts-expect-error — number accessor cannot return an object - const numberObj: Column = { type: "number", accessor: () => ({ value: 1 }) }; + const numberObj: Column = { + type: "number", + accessor: () => ({ value: 1 }), + }; // @ts-expect-error — money accessor cannot return an array - const moneyArr: Column = { type: "money", accessor: () => [100] }; + const moneyArr: Column = { + type: "money", + accessor: () => [100], + }; // @ts-expect-error — date accessor cannot return an array - const dateArr: Column = { type: "date", accessor: () => [2026, 5, 13] }; - // @ts-expect-error — badge accessor cannot return an array - const badgeArr: Column = { type: "badge", accessor: () => ["a", "b"] }; + const dateArr: Column = { + type: "date", + accessor: () => [2026, 5, 13], + }; + // badge accessor CAN return an array (multi-badge support) + const badgeArr: Column = { + type: "badge", + accessor: () => ["a", "b"], + }; // @ts-expect-error — link accessor cannot return a plain object const linkObj: Column = { type: "link", @@ -740,7 +1028,10 @@ describe("DataTable", () => { }; // Date is allowed on the date branch (and only there). - const dateOk: Column = { type: "date", accessor: () => new Date() }; + const dateOk: Column = { + type: "date", + accessor: () => new Date(), + }; // The untyped branch keeps `unknown` — callers escape the built-in // renderer entirely by providing `render`, so any return is fine. const untypedAny: Column = { diff --git a/packages/core/src/components/data-table/field-helpers.test.ts b/packages/core/src/components/data-table/field-helpers.test.ts index 5dc12f71..079f76c4 100644 --- a/packages/core/src/components/data-table/field-helpers.test.ts +++ b/packages/core/src/components/data-table/field-helpers.test.ts @@ -88,7 +88,7 @@ describe("inferColumns()", () => { const titleOpts = infer("title"); expect(titleOpts.label).toBe("title"); expect(titleOpts.sort).toEqual({ field: "title", type: "string" }); - expect(typeof titleOpts.render).toBe("function"); + expect(titleOpts.render).toBeUndefined(); const titleCol = column(infer("title")); expect(titleCol.label).toBe("title"); @@ -248,7 +248,7 @@ describe("inferColumns() with metadata", () => { expect(titleOpts.label).toBe("title"); expect(titleOpts.sort).toEqual({ field: "title", type: "string" }); expect(titleOpts.filter).toEqual({ field: "title", type: "string" }); - expect(typeof titleOpts.render).toBe("function"); + expect(titleOpts.render).toBeUndefined(); }); it("auto-detects enum options", () => { @@ -301,21 +301,11 @@ describe("inferColumns() with metadata", () => { expect(opts.filter).toBeUndefined(); }); - it("generates default render function", () => { + it("does not set a default render function", () => { const infer = inferColumns(testMetadata.task); const opts = infer("title"); - const testRow = { - id: "1", - title: "Test Task", - status: "todo", - dueDate: "2024-01-01", - count: 5, - isActive: true, - tags: ["a"], - }; - - expect(opts.render!(testRow)).toBe("Test Task"); + expect(opts.render).toBeUndefined(); }); it("throws for non-existent field", () => { diff --git a/packages/core/src/components/data-table/field-helpers.ts b/packages/core/src/components/data-table/field-helpers.ts index b6ad23d7..e6cfcb26 100644 --- a/packages/core/src/components/data-table/field-helpers.ts +++ b/packages/core/src/components/data-table/field-helpers.ts @@ -1,4 +1,3 @@ -import type { ReactNode } from "react"; import type { FilterConfig, SortConfig, TableFieldName, TableMetadata } from "@/types/collection"; import { fieldTypeToFilterConfig, fieldTypeToSortConfig } from "@/types/collection"; import type { Column, ColumnBase, MetadataFieldOptions } from "./types"; @@ -21,14 +20,6 @@ export function column>(options: Column) => formatValue(row[fieldName])) as ( - row: TRow, - ) => ReactNode, width: columnOptions?.width, sort, filter, diff --git a/packages/core/src/components/data-table/types.ts b/packages/core/src/components/data-table/types.ts index cfe7cc3f..91b1478d 100644 --- a/packages/core/src/components/data-table/types.ts +++ b/packages/core/src/components/data-table/types.ts @@ -1,5 +1,5 @@ import type { ReactNode } from "react"; -import type { BadgeProps } from "@/components/badge"; +import type { BadgeOptions } from "@/components/badge-list"; import type { CollectionControl, Filter, @@ -28,8 +28,7 @@ import type { */ export type ColumnCellType = "text" | "number" | "money" | "date" | "badge" | "link"; -/** Variant union accepted by the app-shell `` component. */ -export type BadgeVariant = NonNullable; +export type { BadgeVariant } from "@/components/badge-list"; /** Options for `type: "number"` cells. */ export interface NumberCellOptions { @@ -70,19 +69,9 @@ export interface DateCellOptions { } /** Options for `type: "badge"` cells. */ -export interface BadgeCellOptions { - /** - * Maps each cell value (stringified) to a Badge variant. Values not in the - * map fall back to `defaultBadgeVariant`. - */ - badgeVariantMap?: Record; - /** - * Maps each cell value (stringified) to a display label. Values not in the - * map render the raw cell value. - */ - badgeLabelMap?: Record; - /** Variant used when the value is not in `badgeVariantMap`. Default: `"neutral"`. */ - defaultBadgeVariant?: BadgeVariant; +export interface BadgeCellOptions extends BadgeOptions { + /** Maximum number of badges to display before showing a "+N" overflow indicator */ + maxVisible?: number; } /** Options for `type: "link"` cells. `href` is required. */ @@ -196,7 +185,7 @@ export type ColumnTypeBranch> = | { type: "badge"; typeOptions?: BadgeCellOptions; - accessor?: (row: TRow) => string | number | boolean | null | undefined; + accessor?: (row: TRow) => string | string[] | number | boolean | null | undefined; } | { type: "link"; diff --git a/packages/core/src/components/description-card/DescriptionCard.test.tsx b/packages/core/src/components/description-card/DescriptionCard.test.tsx index c331a16d..19d90b53 100644 --- a/packages/core/src/components/description-card/DescriptionCard.test.tsx +++ b/packages/core/src/components/description-card/DescriptionCard.test.tsx @@ -42,4 +42,32 @@ describe("DescriptionCard", () => { expect(screen.getByText("NOT_RECEIVED")).toBeDefined(); }); + + it("renders multiple badges from array value", () => { + render( + , + { wrapper }, + ); + + expect(screen.getByText("Urgent")).toBeDefined(); + expect(screen.getByText("Fragile")).toBeDefined(); + expect(screen.getByText("International")).toBeDefined(); + }); }); diff --git a/packages/core/src/components/description-card/field-renderers.test.tsx b/packages/core/src/components/description-card/field-renderers.test.tsx index 492c5823..cdfa60a7 100644 --- a/packages/core/src/components/description-card/field-renderers.test.tsx +++ b/packages/core/src/components/description-card/field-renderers.test.tsx @@ -1,5 +1,6 @@ import { afterEach, beforeEach, describe, expect, it, vi } from "vitest"; -import { cleanup, render } from "@testing-library/react"; +import { cleanup, render, screen, waitFor } from "@testing-library/react"; +import userEvent from "@testing-library/user-event"; import { MemoryRouter } from "react-router"; import { createAppShellWrapper } from "../../../tests/test-utils"; import { renderField } from "./field-renderers"; @@ -53,6 +54,97 @@ describe("renderField", () => { const { container } = render(renderField(makeField({ type: "badge", value: null }))); expect(container.textContent).toBe("–"); }); + + it("renders multiple badges from array value", () => { + const { container } = render( + renderField(makeField({ type: "badge", value: ["urgent", "fragile"] })), + ); + expect(container.textContent).toContain("Urgent"); + expect(container.textContent).toContain("Fragile"); + }); + + it("renders multiple badges with variant map", () => { + const { container } = render( + renderField( + makeField({ + type: "badge", + value: ["urgent", "low"], + meta: { badgeVariantMap: { urgent: "error", low: "neutral" } }, + }), + ), + ); + expect(container.textContent).toContain("Urgent"); + expect(container.textContent).toContain("Low"); + }); + + it("renders dash for empty array", () => { + const { container } = render(renderField(makeField({ type: "badge", value: [] }))); + expect(container.textContent).toBe("–"); + }); + + it("skips null values in array", () => { + const { container } = render( + renderField(makeField({ type: "badge", value: ["active", null, "featured"] })), + ); + expect(container.textContent).toContain("Active"); + expect(container.textContent).toContain("Featured"); + expect(container.textContent).not.toContain("–"); + }); + + it("renders maxVisible badges with +N overflow indicator", () => { + const { container } = render( + renderField( + makeField({ + type: "badge", + value: ["a", "b", "c", "d", "e"], + meta: { maxVisible: 2 }, + }), + ), + ); + expect(container.textContent).toContain("A"); + expect(container.textContent).toContain("B"); + expect(container.textContent).toContain("+3"); + expect(container.textContent).not.toContain("C"); + expect(container.textContent).not.toContain("D"); + expect(container.textContent).not.toContain("E"); + }); + + it("does not show overflow when values fit within maxVisible", () => { + const { container } = render( + renderField( + makeField({ + type: "badge", + value: ["a", "b"], + meta: { maxVisible: 5 }, + }), + ), + ); + expect(container.textContent).toContain("A"); + expect(container.textContent).toContain("B"); + expect(container.textContent).not.toContain("+"); + }); + + it("shows overflow badges in popover on hover", async () => { + const user = userEvent.setup(); + render( + renderField( + makeField({ + type: "badge", + value: ["a", "b", "c", "d"], + meta: { maxVisible: 2 }, + }), + ), + { wrapper }, + ); + + const trigger = screen.getByText("+2"); + await user.hover(trigger); + + await waitFor(() => { + expect(screen.getByText("C")).toBeDefined(); + expect(screen.getByText("D")).toBeDefined(); + }); + }); }); describe("date", () => { diff --git a/packages/core/src/components/description-card/field-renderers.tsx b/packages/core/src/components/description-card/field-renderers.tsx index 48a47bc1..84a9bdee 100644 --- a/packages/core/src/components/description-card/field-renderers.tsx +++ b/packages/core/src/components/description-card/field-renderers.tsx @@ -2,10 +2,11 @@ import * as React from "react"; import { Link } from "react-router"; -import { Badge } from "../badge"; +import { BadgeList } from "../badge-list"; import { Tooltip } from "../tooltip"; import { Copy, Check, ExternalLink } from "lucide-react"; -import type { ResolvedField, DateFormat, BadgeVariantType } from "./types"; +import type { ResolvedField, DateFormat } from "./types"; +import { resolveBadgeLabel } from "../badge-list"; import { useDescriptionCardT } from "./i18n"; // ============================================================================ @@ -335,24 +336,36 @@ function TextFieldRenderer({ field }: { field: ResolvedField }) { * Render a badge field */ function BadgeFieldRenderer({ field }: { field: ResolvedField }) { - if (isEmpty(field.value)) { + const values = Array.isArray(field.value) + ? (field.value as unknown[]) + : field.value != null + ? [field.value] + : []; + + if (values.every((v) => isEmpty(v))) { return {EMPTY_DASH}; } - const value = String(field.value); - const variantMap = field.meta?.badgeVariantMap || {}; + const badgeOptions = { + badgeVariantMap: field.meta?.badgeVariantMap, + badgeLabelMap: field.meta?.badgeLabelMap, + defaultBadgeVariant: field.meta?.defaultBadgeVariant, + }; const sentenceCaseBadges = field.meta?.sentenceCaseBadges ?? true; - // Try to find a matching variant (case-insensitive) - const lowerValue = value.toLowerCase(); - const variant: BadgeVariantType = - variantMap[value] || variantMap[lowerValue] || "outline-neutral"; - const displayValue = sentenceCaseBadges ? toSentenceCase(value) : value; + const resolveLabel = (value: string) => { + const label = resolveBadgeLabel(value, badgeOptions); + return label ?? (sentenceCaseBadges ? toSentenceCase(value) : value); + }; return ( - - {displayValue} - + ); } diff --git a/packages/core/src/components/description-card/index.ts b/packages/core/src/components/description-card/index.ts index 794f59c6..4443b5fe 100644 --- a/packages/core/src/components/description-card/index.ts +++ b/packages/core/src/components/description-card/index.ts @@ -17,3 +17,5 @@ export type { DateFormat, BadgeVariantType, } from "./types"; + +export type { BadgeVariant } from "../badge-list"; diff --git a/packages/core/src/components/description-card/types.ts b/packages/core/src/components/description-card/types.ts index f9f4f7e3..56eb34c5 100644 --- a/packages/core/src/components/description-card/types.ts +++ b/packages/core/src/components/description-card/types.ts @@ -1,4 +1,5 @@ import type { CSSProperties, ReactNode } from "react"; +import type { BadgeVariant } from "../badge-list"; // ============================================================================ // FIELD TYPES @@ -10,22 +11,9 @@ import type { CSSProperties, ReactNode } from "react"; export type FieldType = "text" | "badge" | "money" | "date" | "link" | "address" | "reference"; /** - * Badge variant mapping for automatic status coloring + * @deprecated Use `BadgeVariant` from `@tailor-platform/app-shell` instead. */ -export type BadgeVariantType = - | "default" - | "success" - | "warning" - | "error" - | "neutral" - | "subtle-success" - | "subtle-warning" - | "subtle-error" - | "outline-success" - | "outline-warning" - | "outline-error" - | "outline-info" - | "outline-neutral"; +export type BadgeVariantType = BadgeVariant; /** * Behavior when a field value is empty/null/undefined @@ -48,9 +36,18 @@ export interface FieldMeta { /** Show copy button for this field */ copyable?: boolean; /** Map field values to badge variants */ - badgeVariantMap?: Record; + badgeVariantMap?: Record; + /** + * Maps each value (stringified) to a display label. Values not in the + * map render the raw value (or sentence-cased value if enabled). + */ + badgeLabelMap?: Record; + /** Variant used when the value is not in `badgeVariantMap`. Default: `"outline-neutral"` (from shared `resolveBadgeVariant`). */ + defaultBadgeVariant?: BadgeVariant; /** Render badge labels in sentence case by default; set false to keep the original value */ sentenceCaseBadges?: boolean; + /** Maximum number of badges to display before showing a "+N" overflow indicator */ + maxVisible?: number; /** Key path to currency code in data object (for money fields) */ currencyKey?: string; /** Key path to href in data object (for link fields) */ diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts index daef45a1..a1a2cee7 100644 --- a/packages/core/src/index.ts +++ b/packages/core/src/index.ts @@ -84,6 +84,7 @@ export { useOverrideBreadcrumb } from "./hooks/use-override-breadcrumb"; // Components export { Badge, badgeVariants, type BadgeProps } from "./components/badge"; +export type { BadgeVariant, BadgeOptions } from "./components/badge-list"; export { DescriptionCard, type DescriptionCardProps } from "./components/description-card"; export { ActivityCard,