@multiplatform.one/table 6.1.0 → 6.4.0

package/src/components/SimpleTable/SimpleTable.stories.tsx

@@ -0,0 +1,114 @@
+import { SimpleTable, type SimpleTableColumn, type SimpleTableProps } from "./index";
+
+export default {
+  title: "Table/SimpleTable",
+  component: SimpleTable,
+  parameters: { status: { type: "beta" } },
+};
+
+const peopleColumns: SimpleTableColumn[] = [
+  { accessorKey: "name", header: "Name" },
+  { accessorKey: "age", header: "Age" },
+  { accessorKey: "city", header: "City" },
+];
+
+const peopleData = [
+  { name: "John Doe", age: 30, city: "New York" },
+  { name: "Jane Smith", age: 25, city: "Los Angeles" },
+  { name: "Sam Lee", age: 41, city: "Chicago" },
+];
+
+export const main = {
+  name: "Main",
+  args: {
+    layout: "table",
+  } satisfies Partial<SimpleTableProps>,
+  argTypes: {
+    layout: {
+      control: "select",
+      options: ["auto", "table", "cards"],
+      description: "Responsive layout mode",
+    },
+  },
+  render: (args: Partial<SimpleTableProps>) => (
+    <SimpleTable data={peopleData} columns={peopleColumns} aria-label="People" {...args} />
+  ),
+};
+
+/** Per-column `align` steers both header and body cells. */
+export const columnAlignment = () => (
+  <SimpleTable
+    aria-label="Invoices"
+    columns={[
+      { accessorKey: "item", header: "Item", align: "left" },
+      { accessorKey: "quantity", header: "Qty", align: "center" },
+      { accessorKey: "total", header: "Total", align: "right" },
+    ]}
+    data={[
+      { item: "Standing desk", quantity: 2, total: "$1,198.00" },
+      { item: "Monitor arm", quantity: 4, total: "$356.00" },
+      { item: "Cable tray", quantity: 10, total: "$149.50" },
+    ]}
+  />
+);
+
+/** Rows pick up intent theming from a `_intent` property in the data. */
+export const intentRows = () => (
+  <SimpleTable
+    aria-label="Service status"
+    columns={[
+      { accessorKey: "service", header: "Service" },
+      { accessorKey: "status", header: "Status" },
+      { accessorKey: "uptime", header: "Uptime", align: "right" },
+    ]}
+    data={[
+      { service: "API", status: "Operational", uptime: "99.99%" },
+      { service: "Dashboard", status: "Selected", uptime: "99.95%", _intent: "accent" },
+      { service: "Webhooks", status: "Outage", uptime: "91.20%", _intent: "error" },
+      { service: "Search", status: "Degraded", uptime: "97.10%", _intent: "warning" },
+      { service: "Backups", status: "Recovered", uptime: "99.80%", _intent: "success" },
+    ]}
+  />
+);
+
+/**
+ * Card layout: each row renders as a stacked card of label/value pairs.
+ * `layout="cards"` pins it so the story shows cards at any viewport;
+ * `_intent` rows keep their theming in card mode.
+ */
+export const cardLayout = () => (
+  <SimpleTable
+    layout="cards"
+    aria-label="Service status cards"
+    columns={[
+      { accessorKey: "service", header: "Service" },
+      { accessorKey: "status", header: "Status" },
+      { accessorKey: "uptime", header: "Uptime" },
+    ]}
+    data={[
+      { service: "API", status: "Operational", uptime: "99.99%" },
+      { service: "Webhooks", status: "Outage", uptime: "91.20%", _intent: "error" },
+      { service: "Backups", status: "Recovered", uptime: "99.80%", _intent: "success" },
+    ]}
+  />
+);
+
+/** Responsive default: table at desktop widths, cards below `$sm`. */
+export const responsiveAuto = () => (
+  <SimpleTable
+    layout="auto"
+    aria-label="People responsive"
+    columns={peopleColumns}
+    data={peopleData}
+  />
+);
+
+/** Empty data renders the localized EmptyState instead of bare rows. */
+export const empty = () => (
+  <SimpleTable aria-label="People empty" columns={peopleColumns} data={[]} />
+);
+
+/** Empty state in pinned card layout. */
+export const emptyCards = () => (
+  <SimpleTable layout="cards" aria-label="People empty cards" columns={peopleColumns} data={[]} />
+);

package/src/components/SimpleTable/index.tsx

@@ -9,10 +9,13 @@
  * No filtering, sorting, pagination, or state management -- just render data.
  */
 
+import { EmptyState } from "@multiplatform.one/components";
 import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { useTranslation } from "react-i18next";
 import type { ViewProps } from "tamagui";
 import { Text, View, useMedia } from "tamagui";
 import { Table } from "@multiplatform.one/table-primitives";
+import type { DataTableLayout } from "../../types";
 
 // ===========================================================================
 // Types
@@ -34,6 +37,11 @@ export interface SimpleTableProps extends ViewProps {
   data: Array<Record<string, any>>;
   /** Column configuration */
   columns: SimpleTableColumn[];
+  /**
+   * Responsive layout: `auto` renders the table on `$sm` and up and a
+   * stacked card list below it; `table` / `cards` pin one mode.
+   */
+  layout?: DataTableLayout;
   /** Accessible label for the table */
   "aria-label"?: string;
 }
@@ -63,20 +71,16 @@ interface SimpleTableMobileCardsProps {
 }
 
 function SimpleTableMobileCards({ data, columns }: SimpleTableMobileCardsProps) {
+  const { t } = useTranslation();
   if (data.length === 0) {
     return (
-      <View
-        padding="$8"
-        alignItems="center"
-        justifyContent="center"
+      <EmptyState
+        compact
         backgroundColor="$color1"
         borderRadius="$4"
         aria-live="polite"
-      >
-        <Text color="$color10" fontSize="$4">
-          No data available
-        </Text>
-      </View>
+        title={t("No data available")}
+      />
     );
   }
 
@@ -136,6 +140,7 @@ export interface SimpleTableDesktopProps extends ViewProps {
 /** Desktop table layout using Layer 1 Table primitives. Exported for testing. */
 export function SimpleTableDesktop({ data, columns, ...props }: SimpleTableDesktopProps) {
   const { knobProps } = useResolvedKnobs({ component: "SimpleTable" });
+  const { t } = useTranslation();
 
   return (
     <View {...props}>
@@ -151,7 +156,16 @@ export function SimpleTableDesktop({ data, columns, ...props }: SimpleTableDeskt
                 }
                 data-align={col.align ?? "left"}
               >
-                <Text fontWeight="600" fontSize="$3">
+                {/* Block text filling the cell + textAlign: alignment that
+                    works in the real <th> (display:table-cell — flex props
+                    are inert there) and in the flex displayMode alike. */}
+                <Text
+                  fontWeight="600"
+                  fontSize="$3"
+                  display="block"
+                  width="100%"
+                  textAlign={col.align ?? "left"}
+                >
                   {col.header}
                 </Text>
               </Table.HeaderCell>
@@ -162,9 +176,7 @@ export function SimpleTableDesktop({ data, columns, ...props }: SimpleTableDeskt
           {data.length === 0 ? (
             <Table.Row>
               <Table.Cell>
-                <Text color="$color10" textAlign="center" padding="$4">
-                  No data available
-                </Text>
+                <EmptyState compact title={t("No data available")} />
               </Table.Cell>
             </Table.Row>
           ) : (
@@ -193,7 +205,13 @@ export function SimpleTableDesktop({ data, columns, ...props }: SimpleTableDeskt
                       }
                       data-align={col.align ?? "left"}
                     >
-                      <Text fontSize="$3" color="$color12">
+                      <Text
+                        fontSize="$3"
+                        color="$color12"
+                        display="block"
+                        width="100%"
+                        textAlign={col.align ?? "left"}
+                      >
                         {String(row[col.accessorKey] ?? "")}
                       </Text>
                     </Table.Cell>
@@ -212,12 +230,12 @@ export function SimpleTableDesktop({ data, columns, ...props }: SimpleTableDeskt
 // Main Component
 // ===========================================================================
 
-export function SimpleTable({ data, columns, ...props }: SimpleTableProps) {
+export function SimpleTable({ data, columns, layout = "auto", ...props }: SimpleTableProps) {
   const { knobProps } = useResolvedKnobs({ component: "SimpleTable" });
   const { sm } = useMedia();
 
-  // Mobile card layout when sm breakpoint is not met
-  if (sm === false) {
+  // Card layout below `$sm` (layout="auto") or when pinned via layout="cards"
+  if (layout === "cards" || (layout === "auto" && sm === false)) {
     return (
       <View {...knobProps.borderRadius} {...props} testID="simple-table-cards">
         <SimpleTableMobileCards data={data} columns={columns} />

package/src/components/SimpleTable/simpleTable.spec.tsx

@@ -80,6 +80,16 @@ describe("SimpleTable", () => {
     expect(leftCells.length).toBeGreaterThanOrEqual(2);
     expect(centerCells.length).toBeGreaterThanOrEqual(2);
     expect(rightCells.length).toBeGreaterThanOrEqual(2);
+
+    // Alignment must actually reach the rendered text: cells are real
+    // <td>/<th> (display:table-cell — flex justifyContent is inert there),
+    // so the cell text is a block with textAlign. Tamagui emits textAlign
+    // as an atomic class; resolve it via computed style on the text node.
+    const rightCellText = rightCells[rightCells.length - 1]?.querySelector("span");
+    expect(rightCellText).not.toBeNull();
+    expect(getComputedStyle(rightCellText as Element).textAlign).toBe("right");
+    const centerCellText = centerCells[centerCells.length - 1]?.querySelector("span");
+    expect(getComputedStyle(centerCellText as Element).textAlign).toBe("center");
   });
 
   it("renders error-themed rows when data objects have _intent property", () => {
@@ -109,11 +119,21 @@ describe("SimpleTable", () => {
     expect(withIntents.textContent).toContain("Good Item");
     expect(withIntents.textContent).toContain("OK Item");
 
-    // Intent rows get wrapped in <Theme name={intent}> which produces
-    // is_Theme wrapper elements. Non-intent table should have fewer.
-    const intentThemes = withIntents.querySelectorAll(".is_Theme");
-    const normalThemes = withoutIntents.querySelectorAll(".is_Theme");
-    expect(intentThemes.length).toBeGreaterThan(normalThemes.length);
+    // Intent rows carry the theme class on the real <tr> itself (a Theme
+    // span wrapper between <tbody> and <tr> would be invalid HTML now that
+    // the primitives emit real table elements — SSR parsers would foster-
+    // parent it out of the table).
+    expect(withIntents.querySelector("tr.t_error")).not.toBeNull();
+    expect(withIntents.querySelector("tr.t_warning")).not.toBeNull();
+    expect(withIntents.querySelector("tr.t_success")).not.toBeNull();
+    for (const row of withIntents.querySelectorAll("tr")) {
+      expect(row.parentElement?.tagName).toMatch(/THEAD|TBODY/);
+    }
+
+    const normalRows = withoutIntents.querySelectorAll("tbody tr");
+    for (const row of normalRows) {
+      expect(row.classList.contains("t_error")).toBe(false);
+    }
   });
 
   it("renders card-based layout on mobile breakpoint", () => {

package/src/components/Table/Table.stories.tsx

@@ -105,3 +105,108 @@ export const emptyTable = () => (
     </Table.Body>
   </Table>
 );
+
+/**
+ * Card layout: each body row renders as a stacked card of label/value
+ * pairs (labels from the header cells). `layout="auto"` switches
+ * automatically below the `$sm` breakpoint; `layout="cards"` pins it
+ * so the story shows cards at any viewport.
+ */
+export const cardLayout = () => (
+  <Table layout="cards">
+    <Table.Head>
+      <Table.Row>
+        <Table.HeaderCell>Name</Table.HeaderCell>
+        <Table.HeaderCell>Age</Table.HeaderCell>
+        <Table.HeaderCell>City</Table.HeaderCell>
+      </Table.Row>
+    </Table.Head>
+    <Table.Body>
+      <Table.Row>
+        <Table.Cell>John Doe</Table.Cell>
+        <Table.Cell>30</Table.Cell>
+        <Table.Cell>New York</Table.Cell>
+      </Table.Row>
+      <Table.Row error>
+        <Table.Cell>Jane Smith</Table.Cell>
+        <Table.Cell>25</Table.Cell>
+        <Table.Cell>Los Angeles</Table.Cell>
+      </Table.Row>
+      <Table.Row>
+        <Table.Cell>Sam Lee</Table.Cell>
+        <Table.Cell>41</Table.Cell>
+        <Table.Cell>Chicago</Table.Cell>
+      </Table.Row>
+    </Table.Body>
+  </Table>
+);
+
+/** Responsive default: grid at desktop widths, cards below `$sm` (640). */
+export const responsiveAuto = () => (
+  <Table layout="auto">
+    <Table.Head>
+      <Table.Row>
+        <Table.HeaderCell>Name</Table.HeaderCell>
+        <Table.HeaderCell>Age</Table.HeaderCell>
+        <Table.HeaderCell>City</Table.HeaderCell>
+      </Table.Row>
+    </Table.Head>
+    <Table.Body>
+      <Table.Row>
+        <Table.Cell>John Doe</Table.Cell>
+        <Table.Cell>30</Table.Cell>
+        <Table.Cell>New York</Table.Cell>
+      </Table.Row>
+      <Table.Row>
+        <Table.Cell>Jane Smith</Table.Cell>
+        <Table.Cell>25</Table.Cell>
+        <Table.Cell>Los Angeles</Table.Cell>
+      </Table.Row>
+    </Table.Body>
+  </Table>
+);
+
+/**
+ * All four `Table.Row` intents side by side (`accent` / `error` /
+ * `warning` / `success`); a plain row anchors the baseline. Row
+ * backgrounds come from the intent theme ramps, so they track the
+ * active theme in both light and dark mode.
+ */
+export const allIntents = () => (
+  <Table>
+    <Table.Head>
+      <Table.Row>
+        <Table.HeaderCell>Intent</Table.HeaderCell>
+        <Table.HeaderCell>Event</Table.HeaderCell>
+        <Table.HeaderCell>Detail</Table.HeaderCell>
+      </Table.Row>
+    </Table.Head>
+    <Table.Body>
+      <Table.Row rowLocation="first">
+        <Table.Cell>none</Table.Cell>
+        <Table.Cell>Baseline row</Table.Cell>
+        <Table.Cell>Default surface</Table.Cell>
+      </Table.Row>
+      <Table.Row accent rowLocation="middle">
+        <Table.Cell>accent</Table.Cell>
+        <Table.Cell>Row selected</Table.Cell>
+        <Table.Cell>Highlighted for emphasis</Table.Cell>
+      </Table.Row>
+      <Table.Row error rowLocation="middle">
+        <Table.Cell>error</Table.Cell>
+        <Table.Cell>Sync failed</Table.Cell>
+        <Table.Cell>Record needs attention</Table.Cell>
+      </Table.Row>
+      <Table.Row warning rowLocation="middle">
+        <Table.Cell>warning</Table.Cell>
+        <Table.Cell>Quota near limit</Table.Cell>
+        <Table.Cell>Approaching threshold</Table.Cell>
+      </Table.Row>
+      <Table.Row success rowLocation="last">
+        <Table.Cell>success</Table.Cell>
+        <Table.Cell>Import complete</Table.Cell>
+        <Table.Cell>All rows processed</Table.Cell>
+      </Table.Row>
+    </Table.Body>
+  </Table>
+);

package/src/components/Table/accessibility.spec.tsx

@@ -171,29 +171,45 @@ describe("Table Accessibility", () => {
       </Table>,
     );
 
-    // Verify semantic HTML tags via Tamagui tag attributes
-    const tableEl = container.querySelector('[tag="table"]');
+    // Verify REAL semantic HTML elements (tamagui `render` prop — task 8.5)
+    const tableEl = container.querySelector("table");
     expect(tableEl).not.toBeNull();
+    expect(tableEl?.getAttribute("role")).toBe("table");
 
-    const thead = container.querySelector('[tag="thead"]');
+    const thead = container.querySelector("thead");
     expect(thead).not.toBeNull();
+    expect(thead?.getAttribute("role")).toBe("rowgroup");
 
-    const tbody = container.querySelector('[tag="tbody"]');
+    const tbody = container.querySelector("tbody");
     expect(tbody).not.toBeNull();
+    expect(tbody?.getAttribute("role")).toBe("rowgroup");
 
-    const caption = container.querySelector('[tag="caption"]');
+    const caption = container.querySelector("caption");
     expect(caption).not.toBeNull();
     expect(caption?.textContent).toContain("Test Table Caption");
 
-    // Verify th elements have scope="col" for accessibility
-    const headerCells = container.querySelectorAll('[tag="th"]');
+    // Strict nesting validity (SSR contract): no wrapper elements between
+    // table sections, rows, and cells
+    expect(container.querySelector("table > thead > tr > th")).not.toBeNull();
+    expect(container.querySelector("table > tbody > tr > td")).not.toBeNull();
+
+    // Verify th elements have scope="col" and columnheader role
+    const headerCells = container.querySelectorAll("th");
     expect(headerCells.length).toBe(2);
     for (const th of headerCells) {
       expect(th.getAttribute("scope")).toBe("col");
+      expect(th.getAttribute("role")).toBe("columnheader");
+    }
+
+    // Verify td elements carry the cell role (survives display overrides)
+    const dataCells = container.querySelectorAll("td");
+    expect(dataCells.length).toBe(4);
+    for (const td of dataCells) {
+      expect(td.getAttribute("role")).toBe("cell");
     }
 
     // Verify rows have role="row"
-    const rows = container.querySelectorAll('[role="row"]');
+    const rows = container.querySelectorAll('tr[role="row"]');
     expect(rows.length).toBe(3); // 1 header row + 2 body rows
 
     // Verify the table renders with correct Tamagui component names