@sproutsocial/seeds-react-table 1.0.0

package/src/TableRowAccordion/__tests__/TableRowAccordion.typetest.tsx

@@ -0,0 +1,51 @@
+import * as React from "react";
+import TableRowAccordion from "../TableRowAccordion";
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+function TableRowAccordionTypes() {
+  const testCells = [
+    {
+      id: "1",
+      content: "🍔 Bacon Smokehouse Burger",
+    },
+    {
+      id: "2",
+      content: "840",
+    },
+    {
+      id: "3",
+      content: "45g",
+    },
+    {
+      id: "4",
+      content: "62g",
+    },
+    {
+      id: "5",
+      content: "46g",
+    },
+  ];
+
+  const testDetail = (
+    <img
+      src="//i.kym-cdn.com/entries/icons/mobile/000/013/564/doge.jpg"
+      alt="doge"
+    />
+  );
+
+  const defaultProps = {
+    id: "1",
+    cells: testCells,
+    detail: testDetail,
+    onToggle: jest.fn(),
+  };
+
+  return (
+    <>
+      <TableRowAccordion {...defaultProps} isExpanded />
+      <TableRowAccordion {...defaultProps} isExpanded={false} />
+      {/* @ts-expect-error - test that missing required props is rejected */}
+      <TableRowAccordion />
+    </>
+  );
+}

package/src/TableRowAccordion/index.ts

@@ -0,0 +1,5 @@
+import TableRowAccordion from "./TableRowAccordion";
+
+export default TableRowAccordion;
+export { TableRowAccordion };
+export * from "./TableRowAccordionTypes";

package/src/TableRowAccordion/styles.ts

@@ -0,0 +1,25 @@
+import styled, { css } from "styled-components";
+import { COMMON } from "@sproutsocial/seeds-react-system-props";
+
+const Container = styled.tbody`
+  border-bottom: 1px solid
+    ${(props) => props.theme.colors.container.border.base};
+
+  ${COMMON}
+`;
+
+export const Detail = styled.tr<{ isExpanded: boolean }>`
+  display: none;
+
+  ${(props) =>
+    props.isExpanded &&
+    css`
+      display: table-row;
+    `}
+`;
+
+export const Trigger = styled.div`
+  cursor: pointer;
+`;
+
+export default Container;

package/src/TableTypes.ts

@@ -0,0 +1,54 @@
+import * as React from "react";
+import type {
+  TypeEnumSortDirections,
+  TypeTableHeaderCellProps,
+} from "./TableHeaderCell";
+import type { TypeTableCellProps } from "./TableCell/TableCellTypes";
+import type { TypeSystemCommonProps } from "@sproutsocial/seeds-react-system-props";
+
+export interface TypePassthroughProps {
+  children: React.ReactNode;
+}
+
+export interface TypeTableRow {
+  /** Table Row Id */
+  id: string;
+
+  /** Array for TableCells to render */
+  cells: TypeTableCellProps[];
+}
+
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+export interface TypeTableHeadProp
+  extends Omit<
+    TypeTableHeaderCellProps,
+    "onSort" | "sortId" | "sortDirection"
+  > {}
+
+export interface TypeTableProps
+  extends TypeSystemCommonProps,
+    Omit<React.ComponentPropsWithoutRef<"table">, keyof TypeSystemCommonProps> {
+  /** Array of TableHeaderCells to render */
+  head?: TypeTableHeadProp[];
+
+  /** Array of TableRows to render */
+  rows?: TypeTableRow[];
+
+  /** Callback for Sorting Table Columns (optional) */
+  onSort?: (id: string) => void;
+
+  /** Controls which column is being sorted (optional) */
+  sortId?: string;
+
+  /** Controls the current sort direction (optional) */
+  sortDirection?: TypeEnumSortDirections;
+
+  /** Custom row render for flexibilty */
+  rowRender?: (row: TypeTableRow) => React.ReactNode;
+
+  /**
+   * Including children will overwrite all head, rows, rowRender, and sorting props
+   * Should be used for manually rendering tables and ignoring data props
+   */
+  children?: React.ReactNode;
+}

package/src/__tests__/Table.test.tsx

@@ -0,0 +1,106 @@
+import React from "react";
+import {
+  render,
+  fireEvent,
+  screen,
+} from "@sproutsocial/seeds-react-testing-library";
+import { Table } from "../Table";
+describe("The Table Component", () => {
+  it("renders table headers", () => {
+    render(
+      <Table
+        head={[
+          {
+            id: "food_item",
+            content: "Food Item",
+          },
+          {
+            id: "calories",
+            content: "Calories",
+          },
+        ]}
+      />
+    );
+    expect(
+      screen.getAllByDataQaLabel({
+        "table-header-cell": "",
+      })
+    ).toBeTruthy();
+    expect(
+      screen.getAllByDataQaLabel({
+        "table-header-cell": "",
+      }).length
+    ).toEqual(2);
+  });
+  it("renders table rows and cells", () => {
+    render(
+      <Table
+        rows={[
+          {
+            id: "1",
+            cells: [
+              {
+                id: "1",
+                content: "Bacon Smokehouse Burger",
+              },
+              {
+                id: "2",
+                content: "62g",
+              },
+            ],
+          },
+        ]}
+      />
+    );
+    const allRows = screen.getAllByDataQaLabel({
+      "table-row": "",
+    });
+    const allCells = screen.getAllByDataQaLabel({
+      "table-cell": "",
+    });
+    expect(allRows).toBeTruthy();
+    expect(allRows.length).toEqual(1);
+    expect(allCells).toBeTruthy();
+    expect(allCells.length).toEqual(2);
+  });
+  it("allows for table headers to be sortable", () => {
+    const callback = jest.fn();
+    render(
+      <Table
+        head={[
+          {
+            id: "food_item",
+            content: "Food Item",
+            isSortable: true,
+          },
+          {
+            id: "calories",
+            content: "Calories",
+          },
+        ]}
+        onSort={callback}
+        sortId={undefined}
+        sortDirection="ASC"
+      />
+    );
+    fireEvent.click(
+      // @ts-ignore - data-qa-label is a custom attribute
+      screen.getAllByDataQaLabel({
+        "table-header-cell": "",
+      })[0]
+    );
+    expect(callback).toBeCalledWith("food_item");
+  });
+  it("renders the children if present", () => {
+    render(
+      <Table>
+        <tbody>
+          <tr>
+            <td>Child</td>
+          </tr>
+        </tbody>
+      </Table>
+    );
+    expect(screen.getByText("Child")).toBeInTheDocument();
+  });
+});

package/src/__tests__/Table.typetest.tsx

@@ -0,0 +1,145 @@
+import * as React from "react";
+import { Table } from "../Table";
+import TableRowAccordion from "../TableRowAccordion";
+import { SORT_DIRECTIONS } from "../TableHeaderCell/constants";
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+function TableTypes() {
+  const columns = [
+    {
+      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",
+    },
+  ];
+
+  const 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",
+        },
+      ],
+    },
+  ];
+
+  // @ts-ignore - I'm not sure what this is supposed to be
+  const testCustomRow = (row) => {
+    return (
+      <TableRowAccordion
+        key={row.id}
+        id={row.id}
+        cells={row.cells}
+        isExpanded={row.id === "baconsmokehouse"}
+        onToggle={jest.fn()}
+        detail={
+          row.id === "baconsmokehouse" ? (
+            <img
+              width="100%"
+              src="https://www.mcdonalds.com/content/dam/usa/nutrition/items/hero/desktop/t-mcdonalds-baconsmokehouse.jpg"
+              alt="doge"
+            />
+          ) : (
+            <img
+              width="100%"
+              src="https://www.mcdonalds.com/content/dam/usa/nutrition/items/hero/desktop/t-mcdonalds-Big-Mac.jpg"
+              alt="doge"
+            />
+          )
+        }
+      />
+    );
+  };
+
+  return (
+    <>
+      <Table head={columns} rows={rows} rowRender={testCustomRow} />
+      <Table
+        head={columns}
+        rows={rows}
+        onSort={jest.fn()}
+        sortDirection={SORT_DIRECTIONS.ASC}
+        sortId="2"
+      />
+      <Table>
+        <Table.TableHead>
+          <Table.TableRow>
+            {columns.map(({ id, content }) => (
+              <Table.HeaderCell id={id}>{content} </Table.HeaderCell>
+            ))}
+          </Table.TableRow>
+        </Table.TableHead>
+        <Table.TableBody>
+          {rows.map(({ cells }) => (
+            <Table.TableRow>
+              {cells.map(({ id, content }) => (
+                <Table.Cell id={id}>{content} </Table.Cell>
+              ))}
+            </Table.TableRow>
+          ))}
+        </Table.TableBody>
+      </Table>
+      {/* @ts-expect-error - test that invalid head is rejected */}
+      <Table head="invalid" />
+    </>
+  );
+}

package/src/index.ts

@@ -0,0 +1,5 @@
+import Table from "./Table";
+
+export default Table;
+export { Table };
+export * from "./TableTypes";

package/src/styles.ts

@@ -0,0 +1,21 @@
+import styled from "styled-components";
+import { COMMON } from "@sproutsocial/seeds-react-system-props";
+
+const Container = styled.table`
+  width: 100%;
+  border-collapse: collapse;
+
+  thead {
+    vertical-align: bottom;
+  }
+
+  tr,
+  thead {
+    border-bottom: 1px solid
+      ${(props) => props.theme.colors.container.border.base};
+  }
+
+  ${COMMON}
+`;
+
+export default Container;

package/styled.d.ts

@@ -0,0 +1,7 @@
+import "styled-components";
+import { TypeTheme } from "@sproutsocial/seeds-react-theme";
+
+declare module "styled-components" {
+  // eslint-disable-next-line @typescript-eslint/no-empty-interface
+  export interface DefaultTheme extends TypeTheme {}
+}

package/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "extends": "@sproutsocial/seeds-tsconfig/bundler/dom/library-monorepo",
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "module": "esnext"
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "dist", "coverage"]
+}

package/tsup.config.ts

@@ -0,0 +1,17 @@
+import { defineConfig } from "tsup";
+
+export default defineConfig((options) => ({
+  entry: {
+    index: "src/index.ts",
+    tableCell: "src/TableCell/index.ts",
+    tableHeaderCell: "src/TableHeaderCell/index.ts",
+    tableRowAccordion: "src/TableRowAccordion/index.ts",
+  },
+  format: ["cjs", "esm"],
+  clean: true,
+  legacyOutput: true,
+  dts: options.dts,
+  external: ["react"],
+  sourcemap: true,
+  metafile: options.metafile,
+}));