@multiplatform.one/table-primitives 6.0.0

package/src/index.tsx

@@ -0,0 +1,364 @@
+/**
+ * Table primitives — styled semantic table components.
+ *
+ * Layer 1 only: depends on theme + Tamagui (no forms, no data-table).
+ * Consumed by @multiplatform.one/table, @multiplatform.one/forms, etc.
+ */
+
+import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { TableCellContext } from "./tableCellContext";
+import type { SizeTokens } from "tamagui";
+import { Theme, ThemeableStack, createStyledContext, styled, withStaticProperties } from "tamagui";
+
+export { TableCellContext, useIsInTableCell, useTableCellContext } from "./tableCellContext";
+export type { TableCellContextValue } from "./tableCellContext";
+
+type AlignCells = {
+  y: "center" | "start" | "end";
+  x: "center" | "start" | "end";
+};
+
+type AlignHeaderCells = AlignCells;
+
+const TableContext = createStyledContext<{
+  cellWidth: SizeTokens | number;
+  cellHeight: SizeTokens | number;
+  alignHeaderCells: {
+    y: "center" | "start" | "end";
+    x: "center" | "start" | "end";
+  };
+  alignCells: {
+    y: "center" | "start" | "end";
+    x: "center" | "start" | "end";
+  };
+  borderColor: string;
+  displayMode: "table" | "flex";
+}>({
+  cellWidth: "$8",
+  cellHeight: "$8",
+  alignHeaderCells: { x: "start", y: "center" },
+  alignCells: { x: "start", y: "center" },
+  borderColor: "$color6",
+  displayMode: "table",
+});
+
+/** Table Components */
+const Row = styled(ThemeableStack, {
+  name: "TableRow",
+  ...({ tag: "tr" } as { tag: string }),
+  role: "row",
+  context: TableContext,
+  display: "table-row" as any,
+  variants: {
+    displayMode: {
+      table: { display: "table-row" as any },
+      flex: {
+        display: "flex" as any,
+        flexDirection: "row" as any,
+        width: "100%",
+        alignItems: "center",
+      },
+    },
+    rowLocation: {
+      first: () => ({}),
+      last: () => ({}),
+      middle: () => ({}),
+    },
+  } as const,
+});
+
+const Cell = styled(ThemeableStack, {
+  name: "TableCell",
+  ...({ tag: "td" } as { tag: string }),
+  context: TableContext,
+  display: "table-cell" as any,
+  // verticalAlign goes via inline style; Tamagui forwards it to the DOM as a JSX
+  // prop otherwise, which React rejects ("React does not recognize verticalAlign").
+  style: { verticalAlign: "middle" },
+  alignItems: "center",
+  justifyContent: "flex-start",
+  paddingHorizontal: "$2",
+  paddingVertical: "$1",
+  overflow: "hidden",
+  variants: {
+    displayMode: {
+      table: { display: "table-cell" as any, style: { verticalAlign: "middle" } },
+      flex: { display: "flex" as any, overflow: "visible" as any },
+    },
+    cellWidth: {
+      /** Equal flex for consistency across rows (flex rows size independently) */
+      auto: () => ({
+        flex: 1,
+      }),
+      ":number": (val) => ({
+        width: val,
+        minWidth: val,
+      }),
+      "...size": (name, { tokens }) => ({
+        width: tokens.size[name],
+        minWidth: tokens.size[name],
+      }),
+    },
+    cellHeight: {
+      "...size": (name, { tokens }) => {
+        return {
+          minHeight: tokens.size[name],
+        };
+      },
+    },
+    alignCells: (val: AlignCells) => {
+      return {
+        alignItems: val.y === "center" ? "center" : `flex-${val.y}`,
+        justifyContent: val.x === "center" ? "center" : `flex-${val.x}`,
+      };
+    },
+    cellLocation: {
+      first: () => ({}),
+      last: () => ({}),
+      middle: () => ({}),
+    },
+  } as const,
+});
+
+const HeaderCell = styled(ThemeableStack, {
+  name: "TableHeaderCell",
+  ...({ tag: "th", scope: "col" } as { tag: string; scope: string }),
+  context: TableContext,
+  display: "table-cell" as any,
+  // verticalAlign goes via inline style; see TableCell above for context.
+  style: { verticalAlign: "middle" },
+  alignItems: "center",
+  justifyContent: "flex-start",
+  paddingHorizontal: "$2",
+  paddingVertical: "$1",
+  backgroundColor: "$color3",
+
+  variants: {
+    displayMode: {
+      table: { display: "table-cell" as any, style: { verticalAlign: "middle" } },
+      flex: { display: "flex" as any },
+    },
+    cellWidth: {
+      /** Equal flex for consistency across rows */
+      auto: () => ({
+        flex: 1,
+      }),
+      ":number": (val) => ({
+        width: val,
+        minWidth: val,
+      }),
+      "...size": (name, { tokens }) => ({
+        width: tokens.size[name],
+        minWidth: tokens.size[name],
+      }),
+    },
+    alignHeaderCells: (val: AlignHeaderCells) => {
+      return {
+        alignItems: val.y === "center" ? "center" : `flex-${val.y}`,
+        justifyContent: val.x === "center" ? "center" : `flex-${val.x}`,
+      };
+    },
+    cellHeight: {
+      "...size": (name, { tokens }) => ({
+        minHeight: tokens.size[name],
+      }),
+    },
+    cellLocation: {
+      first: () => ({}),
+      last: () => ({}),
+      middle: () => ({}),
+    },
+  } as const,
+});
+
+const TableBody = styled(ThemeableStack, {
+  name: "TableBody",
+  ...({ tag: "tbody" } as { tag: string }),
+  context: TableContext,
+  display: "table-row-group" as any,
+  variants: {
+    displayMode: {
+      table: { display: "table-row-group" as any },
+      flex: {
+        display: "flex" as any,
+        flexDirection: "column" as any,
+        width: "100%",
+        overflowY: "auto" as any,
+        flex: 1,
+        minHeight: 0,
+      },
+    },
+  } as const,
+});
+
+const TableHead = styled(ThemeableStack, {
+  name: "TableHead",
+  ...({ tag: "thead" } as { tag: string }),
+  context: TableContext,
+  display: "table-header-group" as any,
+  borderBottomWidth: 1,
+  borderBottomColor: "$color6",
+  variants: {
+    displayMode: {
+      table: { display: "table-header-group" as any },
+      flex: {
+        display: "flex" as any,
+        flexDirection: "column" as any,
+        width: "100%",
+        flexShrink: 0,
+      },
+    },
+  } as const,
+});
+
+const TableFoot = styled(ThemeableStack, {
+  name: "TableFoot",
+  ...({ tag: "tfoot" } as { tag: string }),
+  context: TableContext,
+  display: "table-footer-group" as any,
+  variants: {
+    displayMode: {
+      table: { display: "table-footer-group" as any },
+      flex: {
+        display: "flex" as any,
+        flexDirection: "column" as any,
+        width: "100%",
+        flexShrink: 0,
+      },
+    },
+  } as const,
+});
+
+const TableCaption = styled(ThemeableStack, {
+  name: "TableCaption",
+  ...({ tag: "caption" } as { tag: string }),
+  context: TableContext,
+  display: "table-caption" as any,
+  paddingVertical: "$2",
+  paddingHorizontal: "$2",
+});
+
+const TableComp = styled(ThemeableStack, {
+  name: "Table",
+  ...({ tag: "table" } as { tag: string }),
+  context: TableContext,
+  display: "table" as any,
+  borderWidth: 1,
+  borderColor: "$color6",
+  backgroundColor: "$background",
+  overflow: "hidden",
+  width: "100%",
+  variants: {
+    displayMode: {
+      table: { display: "table" as any },
+      flex: {
+        display: "flex" as any,
+        flexDirection: "column" as any,
+        flex: 1,
+        minHeight: 0,
+      },
+    },
+    /** Empty variants to satisfy context-driven props without ts errors on Table */
+    cellWidth: {
+      "...size": () => {
+        return {};
+      },
+    },
+    cellHeight: {
+      "...size": () => {
+        return {};
+      },
+    },
+    alignHeaderCells: (_val) => ({}),
+    alignCells: (_val) => ({}),
+  } as const,
+});
+
+/** Intent type for Table.Row */
+type IntentName = "accent" | "error" | "warning" | "success";
+
+export interface ThemedRowProps extends React.ComponentProps<typeof Row> {
+  accent?: boolean;
+  error?: boolean;
+  warning?: boolean;
+  success?: boolean;
+}
+
+function resolveIntent(props: ThemedRowProps): IntentName | undefined {
+  if (props.accent) return "accent";
+  if (props.error) return "error";
+  if (props.warning) return "warning";
+  if (props.success) return "success";
+  return undefined;
+}
+
+// Themed wrappers that inject resolved knob recipes
+function ThemedTableComp(props: React.ComponentProps<typeof TableComp>) {
+  const { knobProps } = useResolvedKnobs();
+  const baseBorderWidth = knobProps.borderRadius.borderWidth;
+  // When outlined, ensure at least 1px border. When filled, use base or 0.
+  const resolvedBorderWidth = knobProps.outlined ? Math.max(baseBorderWidth, 1) : baseBorderWidth;
+
+  return (
+    <TableComp
+      {...knobProps.borderRadius}
+      borderWidth={resolvedBorderWidth}
+      borderColor="$color6"
+      backgroundColor="$background"
+      elevation={knobProps.elevation}
+      {...props}
+      style={[{ tableLayout: "fixed" as const }, props.style]}
+    />
+  );
+}
+
+function ThemedRow({ accent, error, warning, success, ...props }: ThemedRowProps) {
+  const intent = resolveIntent({ accent, error, warning, success } as ThemedRowProps);
+
+  const row = <Row {...(intent ? { backgroundColor: "$color3" } : {})} {...props} />;
+
+  if (intent) {
+    return <Theme name={intent}>{row}</Theme>;
+  }
+  return row;
+}
+
+function ThemedCell({ children, ...props }: React.ComponentProps<typeof Cell>) {
+  return (
+    <Cell {...props}>
+      <TableCellContext.Provider value={{ inTableCell: true, isHeader: false }}>
+        {children}
+      </TableCellContext.Provider>
+    </Cell>
+  );
+}
+
+function ThemedHeaderCell({ children, ...props }: React.ComponentProps<typeof HeaderCell>) {
+  return (
+    <HeaderCell {...props}>
+      <TableCellContext.Provider value={{ inTableCell: true, isHeader: true }}>
+        {children}
+      </TableCellContext.Provider>
+    </HeaderCell>
+  );
+}
+
+export const Table = withStaticProperties(ThemedTableComp, {
+  Head: TableHead,
+  Body: TableBody,
+  Row: ThemedRow,
+  Cell: ThemedCell,
+  HeaderCell: ThemedHeaderCell,
+  Foot: TableFoot,
+  Caption: TableCaption,
+});
+
+// Export prop types for all styled components
+export type TableProps = React.ComponentProps<typeof TableComp>;
+export type TableRowProps = ThemedRowProps;
+export type TableCellProps = React.ComponentProps<typeof Cell>;
+export type TableHeaderCellProps = React.ComponentProps<typeof HeaderCell>;
+export type TableBodyProps = React.ComponentProps<typeof TableBody>;
+export type TableHeadProps = React.ComponentProps<typeof TableHead>;
+export type TableFootProps = React.ComponentProps<typeof TableFoot>;
+export type TableCaptionProps = React.ComponentProps<typeof TableCaption>;

package/src/table.spec.tsx

@@ -0,0 +1,177 @@
+/**
+ * Table primitives tests - 5 focused tests for Task Group 1.
+ *
+ * Note: Tamagui + React Native Web renders elements with `tag="table"` etc.
+ */
+
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { describe, expect, it } from "vitest";
+import { Table } from "./index";
+
+describe("Table Primitives", () => {
+  it("renders semantic HTML structure via tag attributes (table, thead, tbody, tfoot, tr, td, th, caption)", () => {
+    const { container } = renderWithProviders(
+      <Table>
+        <Table.Caption>Test Caption</Table.Caption>
+        <Table.Head>
+          <Table.Row>
+            <Table.HeaderCell>Header</Table.HeaderCell>
+          </Table.Row>
+        </Table.Head>
+        <Table.Body>
+          <Table.Row>
+            <Table.Cell>Cell</Table.Cell>
+          </Table.Row>
+        </Table.Body>
+        <Table.Foot>
+          <Table.Row>
+            <Table.Cell>Footer</Table.Cell>
+          </Table.Row>
+        </Table.Foot>
+      </Table>,
+    );
+
+    expect(container.querySelector('[tag="table"]')).not.toBeNull();
+    expect(container.querySelector('[tag="thead"]')).not.toBeNull();
+    expect(container.querySelector('[tag="tbody"]')).not.toBeNull();
+    expect(container.querySelector('[tag="tfoot"]')).not.toBeNull();
+    expect(container.querySelectorAll('[tag="tr"]').length).toBe(3);
+    expect(container.querySelector('[tag="td"]')).not.toBeNull();
+    expect(container.querySelector('[tag="th"]')).not.toBeNull();
+    expect(container.querySelector('[tag="caption"]')).not.toBeNull();
+
+    expect(container.querySelector(".is_Table")).not.toBeNull();
+    expect(container.querySelector(".is_TableHead")).not.toBeNull();
+    expect(container.querySelector(".is_TableBody")).not.toBeNull();
+    expect(container.querySelector(".is_TableFoot")).not.toBeNull();
+    expect(container.querySelector(".is_TableRow")).not.toBeNull();
+    expect(container.querySelector(".is_TableCell")).not.toBeNull();
+    expect(container.querySelector(".is_TableHeaderCell")).not.toBeNull();
+    expect(container.querySelector(".is_TableCaption")).not.toBeNull();
+  });
+
+  it("applies intent props on Table.Row with Theme wrapping", () => {
+    const { container: withIntent } = renderWithProviders(
+      <Table>
+        <Table.Body>
+          <Table.Row accent>
+            <Table.Cell>Accent row</Table.Cell>
+          </Table.Row>
+          <Table.Row error>
+            <Table.Cell>Error row</Table.Cell>
+          </Table.Row>
+          <Table.Row warning>
+            <Table.Cell>Warning row</Table.Cell>
+          </Table.Row>
+          <Table.Row success>
+            <Table.Cell>Success row</Table.Cell>
+          </Table.Row>
+        </Table.Body>
+      </Table>,
+    );
+
+    const { container: withoutIntent } = renderWithProviders(
+      <Table>
+        <Table.Body>
+          <Table.Row>
+            <Table.Cell>Normal row</Table.Cell>
+          </Table.Row>
+        </Table.Body>
+      </Table>,
+    );
+
+    const rows = withIntent.querySelectorAll('[tag="tr"]');
+    expect(rows.length).toBe(4);
+
+    expect(withIntent.textContent).toContain("Accent row");
+    expect(withIntent.textContent).toContain("Error row");
+    expect(withIntent.textContent).toContain("Warning row");
+    expect(withIntent.textContent).toContain("Success row");
+
+    const intentThemeWrappers = withIntent.querySelectorAll(".is_Theme");
+    const normalThemeWrappers = withoutIntent.querySelectorAll(".is_Theme");
+
+    expect(intentThemeWrappers.length).toBeGreaterThan(normalThemeWrappers.length);
+  });
+
+  it("spreads knobProps from useResolvedKnobs on Table root", () => {
+    const { container } = renderWithProviders(
+      <Table>
+        <Table.Body>
+          <Table.Row>
+            <Table.Cell>Content</Table.Cell>
+          </Table.Row>
+        </Table.Body>
+      </Table>,
+    );
+
+    const table = container.querySelector('[tag="table"]');
+    expect(table).not.toBeNull();
+    expect(table?.textContent).toContain("Content");
+
+    expect(table?.classList.contains("is_Table")).toBe(true);
+  });
+
+  it("renders Table.Caption as a caption element", () => {
+    const { container } = renderWithProviders(
+      <Table>
+        <Table.Caption>Monthly Sales Report</Table.Caption>
+        <Table.Body>
+          <Table.Row>
+            <Table.Cell>Data</Table.Cell>
+          </Table.Row>
+        </Table.Body>
+      </Table>,
+    );
+
+    const caption = container.querySelector('[tag="caption"]');
+    expect(caption).not.toBeNull();
+    expect(caption?.textContent).toContain("Monthly Sales Report");
+    expect(caption?.classList.contains("is_TableCaption")).toBe(true);
+
+    const table = container.querySelector('[tag="table"]');
+    expect(table?.querySelector('[tag="caption"]')).not.toBeNull();
+  });
+
+  it("exposes compound component API (Head, Body, Row, Cell, HeaderCell, Foot, Caption)", () => {
+    expect(Table.Head).toBeDefined();
+    expect(Table.Body).toBeDefined();
+    expect(Table.Row).toBeDefined();
+    expect(Table.Cell).toBeDefined();
+    expect(Table.HeaderCell).toBeDefined();
+    expect(Table.Foot).toBeDefined();
+    expect(Table.Caption).toBeDefined();
+
+    const { getByText } = renderWithProviders(
+      <Table>
+        <Table.Caption>Caption</Table.Caption>
+        <Table.Head>
+          <Table.Row>
+            <Table.HeaderCell>H1</Table.HeaderCell>
+            <Table.HeaderCell>H2</Table.HeaderCell>
+          </Table.Row>
+        </Table.Head>
+        <Table.Body>
+          <Table.Row>
+            <Table.Cell>A1</Table.Cell>
+            <Table.Cell>A2</Table.Cell>
+          </Table.Row>
+        </Table.Body>
+        <Table.Foot>
+          <Table.Row>
+            <Table.Cell>F1</Table.Cell>
+            <Table.Cell>F2</Table.Cell>
+          </Table.Row>
+        </Table.Foot>
+      </Table>,
+    );
+
+    expect(getByText("Caption")).toBeDefined();
+    expect(getByText("H1")).toBeDefined();
+    expect(getByText("H2")).toBeDefined();
+    expect(getByText("A1")).toBeDefined();
+    expect(getByText("A2")).toBeDefined();
+    expect(getByText("F1")).toBeDefined();
+    expect(getByText("F2")).toBeDefined();
+  });
+});

package/src/tableCellContext.ts

@@ -0,0 +1,34 @@
+/**
+ * TableCellContext — shared between table-primitives, @multiplatform.one/table, and forms.
+ *
+ * Forms re-exports this context so field components can detect table cells
+ * and use chromeless rendering.
+ */
+
+import { createContext, useContext } from "react";
+
+export interface TableCellContextValue {
+  /** Whether the component is rendered inside a table cell */
+  inTableCell: boolean;
+  /** Whether the cell is in a header row */
+  isHeader?: boolean;
+  /** Whether the cell is editable */
+  editable?: boolean;
+}
+
+const defaultValue: TableCellContextValue = {
+  inTableCell: false,
+  isHeader: false,
+  editable: false,
+};
+
+export const TableCellContext = createContext<TableCellContextValue>(defaultValue);
+
+export function useTableCellContext(): TableCellContextValue {
+  return useContext(TableCellContext);
+}
+
+export function useIsInTableCell(): boolean {
+  const { inTableCell } = useTableCellContext();
+  return inTableCell;
+}