@sproutsocial/seeds-react-table 1.0.3 → 1.0.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sproutsocial/seeds-react-table",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "Seeds React Table",
   "author": "Sprout Social, Inc.",
   "license": "MIT",
@@ -13,20 +13,30 @@
       "import": "./dist/esm/index.js",
       "require": "./dist/index.js"
     },
+    "./v1": {
+      "types": "./dist/v1/index.d.ts",
+      "import": "./dist/esm/v1/index.js",
+      "require": "./dist/v1/index.js"
+    },
+    "./v2": {
+      "types": "./dist/v2/index.d.ts",
+      "import": "./dist/esm/v2/index.js",
+      "require": "./dist/v2/index.js"
+    },
     "./TableCell": {
-      "types": "./dist/tableCell.d.ts",
-      "import": "./dist/esm/tableCell.js",
-      "require": "./dist/tableCell.js"
+      "types": "./dist/v1/TableCell/index.d.ts",
+      "import": "./dist/esm/v1/TableCell/index.js",
+      "require": "./dist/v1/TableCell/index.js"
     },
     "./TableHeaderCell": {
-      "types": "./dist/tableHeaderCell.d.ts",
-      "import": "./dist/esm/tableHeaderCell.js",
-      "require": "./dist/tableHeaderCell.js"
+      "types": "./dist/v1/TableHeaderCell/index.d.ts",
+      "import": "./dist/esm/v1/TableHeaderCell/index.js",
+      "require": "./dist/v1/TableHeaderCell/index.js"
     },
     "./TableRowAccordion": {
-      "types": "./dist/tableRowAccordion.d.ts",
-      "import": "./dist/esm/tableRowAccordion.js",
-      "require": "./dist/tableRowAccordion.js"
+      "types": "./dist/v1/TableRowAccordion/index.d.ts",
+      "import": "./dist/esm/v1/TableRowAccordion/index.js",
+      "require": "./dist/v1/TableRowAccordion/index.js"
     }
   },
   "scripts": {
@@ -41,8 +51,9 @@
   },
   "dependencies": {
     "@sproutsocial/seeds-react-theme": "^3.1.0",
-    "@sproutsocial/seeds-react-system-props": "^3.0.1",
-    "@sproutsocial/seeds-react-icon": "^1.1.4"
+    "@sproutsocial/seeds-react-system-props": "^3.0.2",
+    "@sproutsocial/seeds-react-icon": "^1.1.4",
+    "@sproutsocial/seeds-react-text": "^1.3.2"
   },
   "devDependencies": {
     "@types/react": "^18.0.0",

package/src/index.ts

@@ -1,5 +1,6 @@
-import Table from "./Table";
+// V1 Table - Default export for backwards compatibility
+import Table from "./v1/Table";
 
 export default Table;
 export { Table };
-export * from "./TableTypes";
+export * from "./v1/TableTypes";

package/src/v1/index.ts

@@ -0,0 +1,13 @@
+// V1 Table - Explicit exports for optimal tree shaking
+import Table from "./Table";
+
+export default Table;
+export { Table };
+
+// Explicit type exports
+export type {
+  TypeTableProps,
+  TypeTableRow,
+  TypeTableHeadProp,
+  TypePassthroughProps,
+} from "./TableTypes";

package/src/v2/TableV2.stories.tsx

@@ -0,0 +1,242 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import TableV2, {
+  TableWrapper,
+  TableRoot,
+  TableCaption,
+  TableHeader,
+  TableBody,
+  TableRow,
+  TableHeaderCell,
+  TableCell,
+} from "./TableV2";
+import { Text } from "@sproutsocial/seeds-react-text";
+import { Icon } from "@sproutsocial/seeds-react-icon";
+import { Badge } from "@sproutsocial/seeds-react-badge";
+
+export default {
+  title: "Components/TableV2",
+  component: TableV2,
+} as Meta;
+
+type Story = StoryObj<typeof TableV2>;
+
+export const Default: Story = {
+  args: {
+    caption: "Table Caption",
+    displayCaption: true,
+    columns: ["Header 1", "Header 2", "Header 3"],
+    data: [
+      ["Data 1", "Data 2", "Data 3"],
+      ["Data 4", "Data 5", "Data 6"],
+    ],
+  },
+};
+
+export const HiddenCaption: Story = {
+  args: {
+    caption: "Table Caption",
+    displayCaption: false,
+    columns: ["Header 1", "Header 2", "Header 3"],
+    data: [
+      ["Data 1", "Data 2", "Data 3"],
+      ["Data 4", "Data 5", "Data 6"],
+    ],
+  },
+};
+
+export const WithJSXElements: Story = {
+  args: {
+    caption: "Project Status Table",
+    displayCaption: true,
+    columns: ["Project", "Status", "Priority", "Owner"],
+    data: [
+      [
+        <Text
+          key="project-1"
+          fontSize={400}
+          fontWeight="semibold"
+          color="green.700"
+          qa={{ "data-testid": "project-1" }}
+        >
+          Website Redesign
+        </Text>,
+        <Badge key="status-1">Complete</Badge>,
+        <div
+          key="priority-1"
+          style={{ display: "flex", alignItems: "center", gap: "4px" }}
+        >
+          <Icon name="flag-solid" size="mini" color="red.600" />
+          <Text
+            fontSize={300}
+            qa={{ "data-testid": "project-1" }}
+            color="red.600"
+          >
+            High
+          </Text>
+        </div>,
+        <Text
+          key="owner-1"
+          fontSize={400}
+          qa={{ "data-testid": "project-1" }}
+          color="red.600"
+        >
+          Jane Doe
+        </Text>,
+      ],
+      [
+        <Text
+          key="project-2"
+          fontSize={400}
+          qa={{ "data-testid": "project-2" }}
+          fontWeight="semibold"
+          color="purple.700"
+        >
+          API Integration
+        </Text>,
+        <Badge key="status-2">In Progress</Badge>,
+        <div
+          key="priority-2"
+          style={{ display: "flex", alignItems: "center", gap: "4px" }}
+        >
+          <Icon name="flag-solid" size="mini" color="orange.600" />
+          <Text
+            fontSize={300}
+            qa={{ "data-testid": "project-2" }}
+            color="orange.600"
+          >
+            Medium
+          </Text>
+        </div>,
+        <Text
+          key="owner-2"
+          qa={{ "data-testid": "project-2" }}
+          color="orange.600"
+          fontSize={400}
+        >
+          John Smith
+        </Text>,
+      ],
+      [
+        <Text
+          key="project-3"
+          fontSize={400}
+          fontWeight="semibold"
+          qa={{ "data-testid": "project-2" }}
+          color="orange.600"
+        >
+          Documentation Update
+        </Text>,
+        <Badge key="status-3">Not Started</Badge>,
+        <div
+          key="priority-3"
+          style={{ display: "flex", alignItems: "center", gap: "4px" }}
+        >
+          <Icon name="flag-solid" size="mini" color="green.600" />
+          <Text
+            fontSize={300}
+            qa={{ "data-testid": "project-2" }}
+            color="green.600"
+          >
+            Low
+          </Text>
+        </div>,
+        <Text
+          key="owner-3"
+          fontSize={400}
+          qa={{ "data-testid": "project-2" }}
+          color="green.600"
+        >
+          Sarah Johnson
+        </Text>,
+      ],
+    ],
+  },
+};
+
+export const GranularComponents: Story = {
+  render: () => (
+    <TableWrapper>
+      <TableRoot>
+        <TableCaption isVisible={true}>Employee Directory</TableCaption>
+        <TableHeader>
+          <TableRow>
+            <TableHeaderCell scope="col">Name</TableHeaderCell>
+            <TableHeaderCell scope="col">Department</TableHeaderCell>
+            <TableHeaderCell scope="col">Role</TableHeaderCell>
+            <TableHeaderCell scope="col">Status</TableHeaderCell>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          <TableRow>
+            <TableCell>
+              <Text fontSize={400} fontWeight="semibold" color="blue.700">
+                Alice Johnson
+              </Text>
+            </TableCell>
+            <TableCell>
+              <Text fontSize={300} color="gray.700">
+                Engineering
+              </Text>
+            </TableCell>
+            <TableCell>
+              <Text fontSize={300} color="gray.700">
+                Senior Developer
+              </Text>
+            </TableCell>
+            <TableCell>
+              <Badge>Active</Badge>
+            </TableCell>
+          </TableRow>
+          <TableRow>
+            <TableCell>
+              <Text fontSize={400} fontWeight="semibold" color="purple.700">
+                Bob Smith
+              </Text>
+            </TableCell>
+            <TableCell>
+              <Text fontSize={300} color="gray.700">
+                Design
+              </Text>
+            </TableCell>
+            <TableCell>
+              <Text fontSize={300} color="gray.700">
+                UX Designer
+              </Text>
+            </TableCell>
+            <TableCell>
+              <Badge>Active</Badge>
+            </TableCell>
+          </TableRow>
+          <TableRow>
+            <TableCell>
+              <Text fontSize={400} fontWeight="semibold" color="green.700">
+                Carol Davis
+              </Text>
+            </TableCell>
+            <TableCell>
+              <Text fontSize={300} color="gray.700">
+                Marketing
+              </Text>
+            </TableCell>
+            <TableCell>
+              <Text fontSize={300} color="gray.700">
+                Marketing Manager
+              </Text>
+            </TableCell>
+            <TableCell>
+              <div
+                style={{ display: "flex", alignItems: "center", gap: "4px" }}
+              >
+                <Icon name="clock-solid" size="mini" color="orange.600" />
+                <Text fontSize={300} color="orange.600">
+                  On Leave
+                </Text>
+              </div>
+            </TableCell>
+          </TableRow>
+        </TableBody>
+      </TableRoot>
+    </TableWrapper>
+  ),
+};

package/src/v2/TableV2.tsx

@@ -0,0 +1,91 @@
+import React, { useId } from "react";
+import { type TableV2Props } from "./TableV2Types";
+import {
+  StyledTableV2Container,
+  StyledTableV2,
+  StyledCaption,
+  StyledTableHeader,
+  StyledTableBody,
+  StyledTableRow,
+  StyledTableHeaderCell,
+  StyledTableCell,
+} from "./styles";
+
+const TableContainerContext = React.createContext<string | null>(null);
+
+export const useTableContainerId = () =>
+  React.useContext(TableContainerContext);
+
+export const TableWrapper = ({
+  children,
+  ...rest
+}: {
+  children: React.ReactElement;
+}) => {
+  const containerId = useId();
+  return (
+    <TableContainerContext.Provider value={containerId}>
+      <StyledTableV2Container
+        role="region"
+        tabIndex={0}
+        id={containerId}
+        aria-labelledby={containerId}
+        {...rest}
+      >
+        {children}
+      </StyledTableV2Container>
+    </TableContainerContext.Provider>
+  );
+};
+
+const TableV2 = ({
+  caption,
+  displayCaption = true,
+  columns,
+  data,
+}: TableV2Props) => {
+  const containerId = useTableContainerId();
+
+  return (
+    <TableWrapper>
+      <StyledTableV2>
+        <StyledCaption id={containerId ?? undefined} isVisible={displayCaption}>
+          {caption}
+        </StyledCaption>
+        <StyledTableHeader>
+          <StyledTableRow>
+            {columns.map((column, index) => (
+              <StyledTableHeaderCell key={index} scope="col">
+                {column}
+              </StyledTableHeaderCell>
+            ))}
+          </StyledTableRow>
+        </StyledTableHeader>
+        <StyledTableBody>
+          {data.map((row, rowIndex) => (
+            <StyledTableRow key={rowIndex}>
+              {row.map((cell, cellIndex) => (
+                <StyledTableCell key={cellIndex}>{cell}</StyledTableCell>
+              ))}
+            </StyledTableRow>
+          ))}
+        </StyledTableBody>
+      </StyledTableV2>
+    </TableWrapper>
+  );
+};
+
+// Export the full Table component as Table (main export)
+export const Table = TableV2;
+
+// Export styled components for compound component usage
+export const TableRoot = StyledTableV2;
+export const TableCaption = StyledCaption;
+export const TableHeader = StyledTableHeader;
+export const TableBody = StyledTableBody;
+export const TableRow = StyledTableRow;
+export const TableHeaderCell = StyledTableHeaderCell;
+export const TableCell = StyledTableCell;
+
+// Default export
+export default TableV2;

package/src/v2/TableV2Types.ts

@@ -0,0 +1,12 @@
+import * as React from "react";
+
+export type ColumnHeader = string | React.ReactNode;
+
+export type RowData = Array<string | React.ReactNode>;
+
+export interface TableV2Props {
+  caption: string;
+  displayCaption?: boolean;
+  columns: ColumnHeader[];
+  data: RowData[];
+}

package/src/v2/__tests__/TableV2.typetest.tsx

@@ -0,0 +1,109 @@
+import * as React from "react";
+import TableV2, {
+  TableWrapper,
+  TableRoot,
+  TableCaption,
+  TableHeader,
+  TableBody,
+  TableRow,
+  TableHeaderCell,
+  TableCell,
+} from "../TableV2";
+
+// This file tests TypeScript type checking for TableV2
+// It doesn't need to run, just needs to compile without errors
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+function TableV2Types() {
+  const columns = ["Name", "Age", "Occupation"];
+  const data = [
+    ["John Doe", "30", "Engineer"],
+    ["Jane Smith", "25", "Designer"],
+  ];
+
+  return (
+    <>
+      {/* Valid: All required props */}
+      <TableV2 caption="User Data" columns={columns} data={data} />
+
+      {/* Valid: With displayCaption */}
+      <TableV2
+        caption="User Data"
+        columns={columns}
+        data={data}
+        displayCaption={true}
+      />
+
+      {/* Valid: With displayCaption false */}
+      <TableV2
+        caption="User Data"
+        columns={columns}
+        data={data}
+        displayCaption={false}
+      />
+
+      {/* Valid: With JSX in columns */}
+      <TableV2
+        caption="JSX Columns"
+        columns={[<strong key="1">Name</strong>, "Age"]}
+        data={data}
+      />
+
+      {/* Valid: With JSX in data */}
+      <TableV2
+        caption="JSX Data"
+        columns={columns}
+        data={[[<strong key="1">John</strong>, "30", "Engineer"]]}
+      />
+
+      {/* Valid: Empty data */}
+      <TableV2 caption="Empty Table" columns={columns} data={[]} />
+
+      {/* @ts-expect-error - missing required prop: caption */}
+      <TableV2 columns={columns} data={data} />
+
+      {/* @ts-expect-error - missing required prop: columns */}
+      <TableV2 caption="Missing Columns" data={data} />
+
+      {/* @ts-expect-error - missing required prop: data */}
+      <TableV2 caption="Missing Data" columns={columns} />
+
+      {/* prettier-ignore */}
+      <TableV2
+        caption="Invalid Caption"
+        columns={columns}
+        data={data}
+        // @ts-expect-error - displayCaption should be boolean, not string
+        displayCaption="true"
+      />
+
+      {/* @ts-expect-error - columns should be an array */}
+      <TableV2 caption="Invalid Columns" columns="invalid" data={data} />
+
+      {/* @ts-expect-error - data should be a 2D array */}
+      <TableV2 caption="Invalid Data" columns={columns} data="invalid" />
+    </>
+  );
+}
+
+// Test compound component types
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+function CompoundComponentTypes() {
+  return (
+    <TableWrapper>
+      <TableRoot>
+        <TableCaption isVisible={true}>Custom Table</TableCaption>
+        <TableHeader>
+          <TableRow>
+            <TableHeaderCell scope="col">Header</TableHeaderCell>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          <TableRow>
+            <TableCell>Data</TableCell>
+          </TableRow>
+        </TableBody>
+      </TableRoot>
+    </TableWrapper>
+  );
+}