@sproutsocial/seeds-react-table 1.0.0

package/package.json

@@ -0,0 +1,65 @@
+{
+  "name": "@sproutsocial/seeds-react-table",
+  "version": "1.0.0",
+  "description": "Seeds React Table",
+  "author": "Sprout Social, Inc.",
+  "license": "MIT",
+  "main": "dist/index.js",
+  "module": "dist/esm/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/esm/index.js",
+      "require": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./TableCell": {
+      "import": "./dist/esm/tableCell.js",
+      "require": "./dist/tableCell.js",
+      "types": "./dist/tableCell.d.ts"
+    },
+    "./TableHeaderCell": {
+      "import": "./dist/esm/tableHeaderCell.js",
+      "require": "./dist/tableHeaderCell.js",
+      "types": "./dist/tableHeaderCell.d.ts"
+    },
+    "./TableRowAccordion": {
+      "import": "./dist/esm/tableRowAccordion.js",
+      "require": "./dist/tableRowAccordion.js",
+      "types": "./dist/tableRowAccordion.d.ts"
+    }
+  },
+  "scripts": {
+    "build": "tsup --dts",
+    "build:debug": "tsup --dts --metafile",
+    "dev": "tsup --watch --dts",
+    "clean": "rm -rf .turbo dist",
+    "clean:modules": "rm -rf node_modules",
+    "typecheck": "tsc --noEmit",
+    "test": "jest",
+    "test:watch": "jest --watch --coverage=false"
+  },
+  "dependencies": {
+    "@sproutsocial/seeds-react-theme": "*",
+    "@sproutsocial/seeds-react-system-props": "*",
+    "@sproutsocial/seeds-react-icon": "*"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.0",
+    "@types/styled-components": "^5.1.26",
+    "@sproutsocial/eslint-config-seeds": "*",
+    "react": "^18.0.0",
+    "styled-components": "^5.2.3",
+    "tsup": "^8.0.2",
+    "typescript": "^5.6.2",
+    "@sproutsocial/seeds-tsconfig": "*",
+    "@sproutsocial/seeds-testing": "*",
+    "@sproutsocial/seeds-react-testing-library": "*"
+  },
+  "peerDependencies": {
+    "styled-components": "^5.2.3"
+  },
+  "engines": {
+    "node": ">=18"
+  }
+}

package/src/Table.stories.tsx

@@ -0,0 +1,403 @@
+import React, { useState } from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { Table } from "./Table";
+import { TableRowAccordion } from "./TableRowAccordion";
+import { SORT_DIRECTIONS } from "./TableHeaderCell";
+
+const meta: Meta<typeof Table> = {
+  title: "Components/Table/Table",
+  component: Table,
+};
+export default meta;
+
+type Story = StoryObj<typeof Table>;
+
+export const Default: Story = {
+  render: () => {
+    const [rows, setRows] = useState([
+      {
+        cells: [
+          {
+            content: "🍔 Bacon Smokehouse Burger",
+            id: "1",
+          },
+          {
+            content: "840",
+            id: "2",
+          },
+          {
+            content: "45g",
+            id: "3",
+          },
+          {
+            content: "62g",
+            id: "4",
+          },
+          {
+            content: "46g",
+            id: "5",
+          },
+        ],
+        id: "1",
+      },
+      {
+        cells: [
+          {
+            content: "🍔 Big Mac",
+            id: "1",
+          },
+          {
+            content: "540",
+            id: "2",
+          },
+          {
+            content: "28g",
+            id: "3",
+          },
+          {
+            content: "46g",
+            id: "4",
+          },
+          {
+            content: "25g",
+            id: "5",
+          },
+        ],
+        id: "2",
+      },
+    ]);
+
+    const [sortDirection, setSortDirection] = useState<"ASC" | "DESC">(
+      SORT_DIRECTIONS.ASC
+    );
+    const [sortId, setSortId] = useState("2");
+
+    const onSort = (id: string) => {
+      const sortedRows = [...rows].sort((a, b) => {
+        const aContent = a.cells.find((cell) => cell.id === id)?.content;
+        const bContent = b.cells.find((cell) => cell.id === id)?.content;
+
+        if (aContent && bContent) {
+          if (sortDirection === SORT_DIRECTIONS.ASC) {
+            return aContent.localeCompare(bContent);
+          } else {
+            return bContent.localeCompare(aContent);
+          }
+        }
+
+        return 0;
+      });
+
+      setRows(sortedRows);
+      setSortDirection(
+        sortDirection === SORT_DIRECTIONS.ASC
+          ? SORT_DIRECTIONS.DESC
+          : SORT_DIRECTIONS.ASC
+      );
+
+      setSortId(id);
+    };
+
+    return (
+      <Table
+        head={[
+          {
+            content: "Food Item",
+            id: "1",
+          },
+          {
+            content: "Calories",
+            id: "2",
+            isSortable: true,
+          },
+          {
+            content: "Total Fat: (69% DV*)",
+            id: "3",
+          },
+          {
+            content: "Total Carbs: (21% DV*)",
+            id: "4",
+          },
+          {
+            content: "Protein",
+            id: "5",
+          },
+        ]}
+        rows={rows}
+        onSort={onSort}
+        sortDirection={sortDirection}
+        sortId={sortId}
+      />
+    );
+  },
+};
+
+export const ColumnSpan: Story = {
+  render: () => (
+    <Table
+      head={[
+        {
+          colSpan: 2,
+          content: "Header",
+          id: "1",
+        },
+      ]}
+      rows={[
+        {
+          cells: [
+            {
+              content: "Column 1",
+              id: "1",
+            },
+            {
+              content: "Column 2",
+              id: "2",
+            },
+          ],
+          id: "1",
+        },
+        {
+          cells: [
+            {
+              colSpan: 2,
+              content: "This is a footer for the table.",
+              id: "1",
+            },
+          ],
+          id: "2",
+        },
+      ]}
+    />
+  ),
+};
+
+export const ColumnWidth: Story = {
+  render: () => (
+    <Table
+      head={[
+        {
+          content: "Food Item",
+          id: "1",
+          width: 200,
+        },
+        {
+          align: "center",
+          content: "Calories",
+          id: "2",
+          isSortable: true,
+          width: 100,
+        },
+        {
+          content: "Description",
+          id: "3",
+        },
+        {
+          align: "right",
+          content: "Protein",
+          id: "4",
+          width: 100,
+        },
+      ]}
+      rows={[
+        {
+          cells: [
+            {
+              content: "🍔 Bacon Smokehouse Burger",
+              id: "1",
+              width: 200,
+            },
+            {
+              align: "center",
+              content: "840",
+              id: "2",
+              width: 100,
+            },
+            {
+              content:
+                "A burger made with unexpected flavor combinations, including crispy Applewood smoked bacon, smoky bacon-onion sauce, real white cheddar, mild sweet mustard sauce and in-house fried onion strings.",
+              id: "3",
+            },
+            {
+              align: "right",
+              content: "46g",
+              id: "4",
+            },
+          ],
+          id: "1",
+        },
+        {
+          cells: [
+            {
+              content: "🍔 Big Mac",
+              id: "1",
+              width: 200,
+            },
+            {
+              align: "center",
+              content: "540",
+              id: "2",
+              width: 100,
+            },
+            {
+              content:
+                "Mouthwatering perfection starts with two 100% pure beef patties and Big Mac® sauce sandwiched between a sesame seed bun.",
+              id: "3",
+            },
+            {
+              align: "right",
+              content: "25g",
+              id: "4",
+            },
+          ],
+          id: "2",
+        },
+      ]}
+    />
+  ),
+};
+
+export const CustomRowRendering: Story = {
+  render: () => (
+    <Table
+      head={[
+        {
+          id: "1",
+          content: "Food Item",
+        },
+        {
+          id: "2",
+          content: "Calories",
+          isSortable: true,
+        },
+        {
+          id: "3",
+          content: "Total Fat: (69% DV*)",
+        },
+        {
+          id: "4",
+          content: "Total Carbs: (21% DV*)",
+        },
+        {
+          id: "5",
+          content: "Protein",
+        },
+      ]}
+      rows={[
+        {
+          id: "baconsmokehouse",
+          cells: [
+            {
+              id: "1",
+              content: "🍔 Bacon Smokehouse Burger",
+            },
+            {
+              id: "2",
+              content: "840",
+            },
+            {
+              id: "3",
+              content: "45g",
+            },
+            {
+              id: "4",
+              content: "62g",
+            },
+            {
+              id: "5",
+              content: "46g",
+            },
+          ],
+        },
+        {
+          id: "Big-Mac",
+          cells: [
+            {
+              id: "1",
+              content: "🍔 Big Mac",
+            },
+            {
+              id: "2",
+              content: "540",
+            },
+            {
+              id: "3",
+              content: "28g",
+            },
+            {
+              id: "4",
+              content: "46g",
+            },
+            {
+              id: "5",
+              content: "25g",
+            },
+          ],
+        },
+      ]}
+      rowRender={(row) => {
+        return (
+          <TableRowAccordion
+            key={row.id}
+            id={row.id}
+            cells={row.cells}
+            isExpanded={row.id === "baconsmokehouse"}
+            onToggle={(id) => alert(`Toggled ID #${id}`)}
+            detail={
+              row.id === "baconsmokehouse" ? (
+                <img
+                  width="100%"
+                  src="http://static01.nyt.com/images/2015/10/24/arts/24drakeart2/24drakeart2-master675.jpg"
+                  alt="doge"
+                />
+              ) : (
+                <img
+                  width="100%"
+                  src="http://static01.nyt.com/images/2015/10/24/arts/24drakeart2/24drakeart2-master675.jpg"
+                  alt="doge"
+                />
+              )
+            }
+          />
+        );
+      }}
+    />
+  ),
+};
+
+export const StaticTable: Story = {
+  render: () => {
+    const columns = ["Name", "Squad", "Favorite Color"];
+    const rows = [
+      {
+        name: "Mike R",
+        squad: "People and Community",
+        favoriteColor: "Green",
+      },
+      {
+        name: "Travis W",
+        squad: "Listening",
+        favoriteColor: "Blue",
+      },
+    ];
+    return (
+      <Table>
+        <Table.TableHead>
+          <Table.TableRow>
+            {columns.map((c) => (
+              <Table.HeaderCell id={c.toLowerCase()}>{c} </Table.HeaderCell>
+            ))}
+          </Table.TableRow>
+        </Table.TableHead>
+        <Table.TableBody>
+          {rows.map((r, i) => (
+            <Table.TableRow>
+              <Table.Cell id={`row-${i}-name`}>{r.name} </Table.Cell>
+              <Table.Cell id={`row-${i}-squad`}>{r.squad} </Table.Cell>
+              <Table.Cell id={`row-${i}-color`}>{r.favoriteColor} </Table.Cell>
+            </Table.TableRow>
+          ))}
+        </Table.TableBody>
+      </Table>
+    );
+  },
+};

package/src/Table.tsx

@@ -0,0 +1,111 @@
+import * as React from "react";
+import TableCell from "./TableCell";
+import TableHeaderCell from "./TableHeaderCell";
+import Container from "./styles";
+import type {
+  TypePassthroughProps,
+  TypeTableProps,
+  TypeTableRow,
+} from "./TableTypes";
+
+const renderTableRow = (row: TypeTableRow) => {
+  return (
+    <tbody key={row.id} data-qa-table-row="">
+      <tr>
+        {row.cells.map((td) => {
+          return <TableCell {...td} key={td.id} />;
+        })}
+      </tr>
+    </tbody>
+  );
+};
+
+/**
+ * The table component assist in rendering tablular data.
+ */
+export const Table = ({
+  head = [],
+  rows = [],
+  onSort,
+  sortId,
+  sortDirection,
+  rowRender,
+  children,
+  color,
+  ...rest
+}: TypeTableProps) => {
+  if (children) {
+    return (
+      <Container {...rest} data-qa-table="">
+        {children}
+      </Container>
+    );
+  }
+
+  return (
+    <Container
+      {...rest}
+      data-qa-table=""
+      // TODO: fix this type since `color` should be valid here. TS can't resolve the correct type.
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      color={color}
+    >
+      <colgroup>
+        {head.map(({ id, colSpan = 1 }) => (
+          <col key={id} span={colSpan} />
+        ))}
+      </colgroup>
+      {head.length > 0 && (
+        <thead data-qa-table-header="">
+          <tr>
+            {head.map(({ color, ...th }) => {
+              return (
+                <TableHeaderCell
+                  {...th}
+                  key={th.id}
+                  onSort={onSort}
+                  sortId={sortId}
+                  sortDirection={sortDirection}
+                  // TODO: fix this type since `color` should be valid here. TS can't resolve the correct type.
+                  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                  // @ts-ignore
+                  color={color}
+                />
+              );
+            })}
+          </tr>
+        </thead>
+      )}
+      {rows.map((row) => {
+        return rowRender ? rowRender(row) : renderTableRow(row);
+      })}
+    </Container>
+  );
+};
+
+export const TableHead = ({ children, ...props }: TypePassthroughProps) => (
+  <thead {...props}>{children}</thead>
+);
+
+export const TableBody = ({ children, ...props }: TypePassthroughProps) => (
+  <tbody {...props}>{children}</tbody>
+);
+
+export const TableRow = ({ children, ...props }: TypePassthroughProps) => (
+  <tr {...props}>{children}</tr>
+);
+
+TableHead.displayName = "Table.TableHead";
+TableBody.displayName = "Table.TableBody";
+TableRow.displayName = "Table.TableRow";
+TableHeaderCell.displayName = "Table.HeaderCell";
+TableCell.displayName = "Table.Cell";
+
+Table.TableHead = TableHead;
+Table.TableBody = TableBody;
+Table.TableRow = TableRow;
+Table.HeaderCell = TableHeaderCell;
+Table.Cell = TableCell;
+
+export default Table;

package/src/TableCell/TableCell.stories.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { TableCell } from "./TableCell";
+
+const meta: Meta<typeof TableCell> = {
+  title: "Components/Table/TableCell",
+  component: TableCell,
+  args: {
+    content: "🍔 Bacon Smokehouse Burger",
+    id: "bacon_smokehouse",
+  },
+};
+export default meta;
+
+type Story = StoryObj<typeof TableCell>;
+
+export const Default: Story = {
+  args: {
+    color: "text.body",
+  },
+};
+
+export const AdditionalProps: Story = {
+  args: {
+    ...Default.args,
+    width: 300,
+    colSpan: 2,
+    align: "center",
+  },
+};

package/src/TableCell/TableCell.tsx

@@ -0,0 +1,44 @@
+import * as React from "react";
+import Container from "./styles";
+import type { TypeTableCellProps } from "./TableCellTypes";
+
+/**
+ * The table cell component is for rendering table cells and is meant to be used with the table component.
+ */
+export class TableCell extends React.Component<TypeTableCellProps> {
+  static displayName: string;
+  override render() {
+    const {
+      id,
+      content,
+      colSpan,
+      width,
+      align,
+      scope,
+      children,
+      color,
+      ...rest
+    } = this.props;
+    return (
+      <Container
+        {...rest}
+        // If the `scope` property is passed we must render the element as a <th>
+        as={scope ? "th" : "td"}
+        scope={scope ? scope : undefined}
+        alignment={align || "left"}
+        key={id}
+        colSpan={colSpan}
+        width={width}
+        data-qa-table-cell=""
+        // TODO: fix this type since `color` should be valid here. TS can't resolve the correct type.
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        color={color}
+      >
+        {children || content}
+      </Container>
+    );
+  }
+}
+
+export default TableCell;

package/src/TableCell/TableCellTypes.ts

@@ -0,0 +1,30 @@
+import * as React from "react";
+import type { TypeSystemCommonProps } from "@sproutsocial/seeds-react-system-props";
+
+export interface TypeTableCellProps
+  extends TypeSystemCommonProps,
+    Omit<
+      React.ComponentPropsWithoutRef<"td">,
+      keyof TypeSystemCommonProps | "content"
+    > {
+  /** Table Cell Id */
+  id: string;
+
+  /** Content is deprecated.  Please use children instead. Content to be render */
+  content?: React.ReactNode;
+
+  /** Controls the colSpan attribute (optional) */
+  colSpan?: number;
+
+  /** Controls the width attribute (optional) */
+  width?: number;
+
+  /** Controls the CSS text-align property (optional) */
+  align?: "left" | "right" | "center" | "justify";
+
+  /** Controls the scope attribute. If set, will change the element from a <td> to a <th>. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/th#scope (optional)  */
+  scope?: "row" | "col" | "rowGroup" | "colGroup";
+
+  /** Children to be rendered */
+  children?: React.ReactNode;
+}