@recursica/mui-adapter 0.28.0 → 0.30.0

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

@@ -47,3 +47,108 @@ export const Default: Story = {
     );
   },
 };
+
+export const SortedColumn: Story = {
+  render: () => {
+    const sorted = [...elements].sort((a, b) => a.mass - b.mass);
+    const rows = sorted.map((element) => (
+      <Table.Row key={element.name}>
+        <Table.Cell>{element.position}</Table.Cell>
+        <Table.Cell>{element.name}</Table.Cell>
+        <Table.Cell>{element.symbol}</Table.Cell>
+        <Table.Cell>{element.mass}</Table.Cell>
+      </Table.Row>
+    ));
+
+    return (
+      <Table.Container>
+        <Table>
+          <Table.Head>
+            <Table.Row>
+              <Table.Cell>Element position</Table.Cell>
+              <Table.Cell>Element name</Table.Cell>
+              <Table.Cell>Symbol</Table.Cell>
+              <Table.Cell sorted="asc">
+                <Table.SortLabel active direction="asc">
+                  Atomic mass
+                </Table.SortLabel>
+              </Table.Cell>
+            </Table.Row>
+          </Table.Head>
+          <Table.Body>{rows}</Table.Body>
+        </Table>
+      </Table.Container>
+    );
+  },
+};
+
+export const SelectedAndDisabledRows: Story = {
+  render: () => (
+    <Table.Container>
+      <Table>
+        <Table.Head>
+          <Table.Row>
+            <Table.Cell>Element position</Table.Cell>
+            <Table.Cell>Element name</Table.Cell>
+            <Table.Cell>Symbol</Table.Cell>
+            <Table.Cell>Atomic mass</Table.Cell>
+          </Table.Row>
+        </Table.Head>
+        <Table.Body>
+          {elements.map((element, index) => (
+            <Table.Row
+              key={element.name}
+              selected={index === 0}
+              disabled={index === elements.length - 1}
+            >
+              <Table.Cell>{element.position}</Table.Cell>
+              <Table.Cell>{element.name}</Table.Cell>
+              <Table.Cell>{element.symbol}</Table.Cell>
+              <Table.Cell>{element.mass}</Table.Cell>
+            </Table.Row>
+          ))}
+        </Table.Body>
+      </Table>
+    </Table.Container>
+  ),
+};
+
+export const CurrencyColumnWithFooter: Story = {
+  render: () => {
+    const prices = [
+      { item: "Widget", price: 19.99 },
+      { item: "Gadget", price: 49.5 },
+      { item: "Gizmo", price: 9.25 },
+    ];
+    const total = prices.reduce((sum, row) => sum + row.price, 0);
+
+    return (
+      <Table.Container>
+        <Table>
+          <Table.Head>
+            <Table.Row>
+              <Table.Cell>Item</Table.Cell>
+              <Table.Cell>Price</Table.Cell>
+            </Table.Row>
+          </Table.Head>
+          <Table.Body>
+            {prices.map((row) => (
+              <Table.Row key={row.item}>
+                <Table.Cell>{row.item}</Table.Cell>
+                <Table.Cell variant="currency">
+                  ${row.price.toFixed(2)}
+                </Table.Cell>
+              </Table.Row>
+            ))}
+          </Table.Body>
+          <Table.Footer>
+            <Table.Row>
+              <Table.Cell>Total</Table.Cell>
+              <Table.Cell variant="currency">${total.toFixed(2)}</Table.Cell>
+            </Table.Row>
+          </Table.Footer>
+        </Table>
+      </Table.Container>
+    );
+  },
+};

package/src/components/Table/Table.tsx

@@ -21,9 +21,19 @@ import {
   filterStylingProps,
   type RecursicaOverStyled,
 } from "../../utils/filterStylingProps";
-import { type RecursicaTableProps } from "@recursica/adapter-common";
+import {
+  type RecursicaTableProps,
+  type RecursicaTableRowProps,
+  type RecursicaTableHeaderCellProps,
+  type RecursicaTableCellProps,
+} from "@recursica/adapter-common";
 import styles from "./Table.module.css";
 
+/** Merges a Recursica-controlled `className` with a caller-supplied one, same idiom as `TableBase`. */
+function withRootClass(rootClass: string, classNameProp: string | undefined) {
+  return classNameProp ? `${rootClass} ${classNameProp}` : rootClass;
+}
+
 export type TableProps = RecursicaOverStyled<
   MuiTableProps & RecursicaTableProps
 >;
@@ -72,17 +82,50 @@ export const TableBodyComponent = forwardRef<
 });
 TableBodyComponent.displayName = "TableBody";
 
-export type TableCellPropsRecursica = RecursicaOverStyled<MuiTableCellProps>;
+// MUI's `TableCell` is the single primitive used for header, body, and footer cells alike — it
+// auto-detects which one it is (and whether to render a `<th>` or `<td>`) from its ancestor
+// (`Table.Head`/`Table.Body`/`Table.Footer`). Recursica mirrors that: one cell component whose
+// props cover both the header-only concern (`sorted`) and the body/footer concern (`variant`).
+export type TableCellPropsRecursica = RecursicaOverStyled<
+  // MUI's own `variant` ('head' | 'body' | 'footer') is superseded by Recursica's `variant`
+  // ('default' | 'currency') — MUI still auto-detects head/body/footer from ancestor context
+  // when its native `variant` prop is omitted, so nothing is lost by dropping it here.
+  Omit<MuiTableCellProps, "children" | "variant"> &
+    RecursicaTableHeaderCellProps &
+    RecursicaTableCellProps
+>;
 
 export const TableCellComponent = forwardRef<
   HTMLTableCellElement,
   TableCellPropsRecursica
->(function TableCell({ overStyled = false, ...rest }, ref) {
+>(function TableCell(
+  {
+    overStyled = false,
+    sorted = false,
+    disabled = false,
+    variant = "default",
+    ...rest
+  },
+  ref,
+) {
   const sanitizedProps = filterStylingProps(rest, overStyled);
+  const classNameProp = (sanitizedProps as Record<string, unknown>)
+    .className as string | undefined;
   return (
     <MuiTableCell
       ref={ref}
       {...(sanitizedProps as unknown as MuiTableCellProps)}
+      className={withRootClass(styles.cell, classNameProp)}
+      data-sorted={sorted ? "true" : undefined}
+      data-disabled={disabled ? "true" : undefined}
+      data-currency={variant === "currency" ? "true" : undefined}
+      aria-sort={
+        sorted === "asc"
+          ? "ascending"
+          : sorted === "desc"
+            ? "descending"
+            : undefined
+      }
     />
   );
 });
@@ -121,17 +164,28 @@ export const TableHeadComponent = forwardRef<
 });
 TableHeadComponent.displayName = "TableHead";
 
-export type TableRowPropsRecursica = RecursicaOverStyled<MuiTableRowProps>;
+export type TableRowPropsRecursica = RecursicaOverStyled<
+  Omit<MuiTableRowProps, "children"> & RecursicaTableRowProps
+>;
 
 export const TableRowComponent = forwardRef<
   HTMLTableRowElement,
   TableRowPropsRecursica
->(function TableRow({ overStyled = false, ...rest }, ref) {
+>(function TableRow(
+  { overStyled = false, selected = false, disabled = false, ...rest },
+  ref,
+) {
   const sanitizedProps = filterStylingProps(rest, overStyled);
+  const classNameProp = (sanitizedProps as Record<string, unknown>)
+    .className as string | undefined;
   return (
     <MuiTableRow
       ref={ref}
       {...(sanitizedProps as unknown as MuiTableRowProps)}
+      className={withRootClass(styles.row, classNameProp)}
+      selected={selected}
+      data-selected={selected ? "true" : undefined}
+      data-disabled={disabled ? "true" : undefined}
     />
   );
 });
@@ -162,10 +216,13 @@ export const TableSortLabelComponent = forwardRef<
   TableSortLabelPropsRecursica
 >(function TableSortLabel({ overStyled = false, ...rest }, ref) {
   const sanitizedProps = filterStylingProps(rest, overStyled);
+  const classNameProp = (sanitizedProps as Record<string, unknown>)
+    .className as string | undefined;
   return (
     <MuiTableSortLabel
       ref={ref}
       {...(sanitizedProps as unknown as MuiTableSortLabelProps)}
+      className={withRootClass(styles.sortLabel, classNameProp)}
     />
   );
 });

package/src/components/Table/USAGE.md

@@ -15,32 +15,71 @@ import { Table } from "@recursica/mui-adapter";
 ## 2. Basic Example
 
 ```tsx
-import React from 'react';
+import React from "react";
 import { Table } from "@recursica/mui-adapter";
 
 export default function Demo() {
   return (
-    <Table>
-      <Table.Thead>
-        <Table.Tr>
-          <Table.Th>Name</Table.Th>
-          <Table.Th>Email</Table.Tr>
-        </Table.Tr>
-      </Table.Thead>
-      <Table.Tbody>
-        <Table.Tr>
-          <Table.Td>Jane Doe</Table.Tr>
-          <Table.Td>jane@example.com</Table.Tr>
-        </Table.Tr>
-      </Table.Tbody>
-    </Table>
+    <Table.Container>
+      <Table>
+        <Table.Head>
+          <Table.Row>
+            <Table.Cell>Name</Table.Cell>
+            <Table.Cell>Email</Table.Cell>
+          </Table.Row>
+        </Table.Head>
+        <Table.Body>
+          <Table.Row>
+            <Table.Cell>Jane Doe</Table.Cell>
+            <Table.Cell>jane@example.com</Table.Cell>
+          </Table.Row>
+        </Table.Body>
+      </Table>
+    </Table.Container>
   );
 }
 ```
 
 ---
 
-## 3. Design System Integration
+## 3. Row and Cell States
+
+- **`Table.Row`**: `selected` applies the selected-row background (and MUI's own `selected`/`aria-selected`); `disabled` dims the row and applies the disabled cell colors to every cell in it.
+- **`Table.Cell`**: `sorted="asc" | "desc"` applies the sorted header style (pair with `Table.SortLabel` for the actual sort icon — see below); `variant="currency"` applies the currency text style; `disabled` dims the cell.
+- **`Table.SortLabel`** (wraps MUI's `TableSortLabel`): renders the actual sort arrow. Compose it inside a `Table.Cell` the same way MUI's own docs do.
+
+```tsx
+<Table.Head>
+  <Table.Row>
+    <Table.Cell>Name</Table.Cell>
+    <Table.Cell sorted="asc">
+      <Table.SortLabel active direction="asc">
+        Balance
+      </Table.SortLabel>
+    </Table.Cell>
+  </Table.Row>
+</Table.Head>
+<Table.Body>
+  <Table.Row selected>
+    <Table.Cell>Jane Doe</Table.Cell>
+    <Table.Cell variant="currency">$1,204.50</Table.Cell>
+  </Table.Row>
+  <Table.Row disabled>
+    <Table.Cell>Inactive Account</Table.Cell>
+    <Table.Cell variant="currency">$0.00</Table.Cell>
+  </Table.Row>
+</Table.Body>
+<Table.Footer>
+  <Table.Row>
+    <Table.Cell>Total</Table.Cell>
+    <Table.Cell variant="currency">$1,204.50</Table.Cell>
+  </Table.Row>
+</Table.Footer>
+```
+
+---
+
+## 4. Design System Integration
 
 All Recursica components in the `@recursica/mui-adapter` package adhere strictly to design system spacing, scaling, and behavior patterns.