@pautena/react-design-system 0.1.2 → 0.1.3

package/src/components/table/enhanced-remote-table/enhanced-remote-table.mock.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+import { TableCell, TableRow } from "@mui/material";
+import { EnhancedRemoteTable } from "./enhanced-remote-table";
+import { HeadCell, Order } from "../enhanced-table/enhanced-table-head";
+
+interface DummyProps<T> {
+  data: T[];
+  loading: boolean;
+  defaultSort: string;
+  defaultOrder?: Order;
+  columns: HeadCell[];
+  onRequestSort: (col: string, orderBy: Order) => void;
+}
+
+export function EnhancedRemoteDummyTable<T>(props: DummyProps<T>) {
+  return (
+    <EnhancedRemoteTable {...props}>
+      {(d: unknown) => (
+        <TableRow key={d.id}>
+          <TableCell>{d.name}</TableCell>
+          <TableCell>{d.id}</TableCell>
+          <TableCell>{d.startDate}</TableCell>
+        </TableRow>
+      )}
+    </EnhancedRemoteTable>
+  );
+}

package/src/components/table/enhanced-remote-table/enhanced-remote-table.stories.tsx

@@ -0,0 +1,24 @@
+import { ComponentMeta } from "@storybook/react";
+import { createTemplate } from "../../../storybook";
+import { EnhancedRemoteTable } from "./enhanced-remote-table";
+import { columns, data } from "../enhanced-table/enhanced-table.mock";
+import { EnhancedRemoteDummyTable } from "./enhanced-remote-table.mock";
+
+export default {
+  title: "Tables/Enhanced remote table",
+  component: EnhancedRemoteTable,
+  parameters: {
+    layout: "fullscreen",
+  },
+} as ComponentMeta<typeof EnhancedRemoteTable>;
+
+const Template = createTemplate(EnhancedRemoteDummyTable);
+
+export const Default = Template.bind({});
+Default.args = {
+  columns,
+  data,
+  loading: false,
+  defaultSort: "startDate",
+  defaultOrder: "asc",
+};

package/src/components/table/enhanced-remote-table/enhanced-remote-table.test.tsx

@@ -0,0 +1,77 @@
+import React from "react";
+import { screen, render } from "@testing-library/react";
+import { EnhancedRemoteDummyTable } from "./enhanced-remote-table.mock";
+import userEvent from "@testing-library/user-event";
+import { columns, data } from "../enhanced-table/enhanced-table.mock";
+import { expectProgressIndicator } from "../../../tests";
+
+function renderInstance({
+  defaultSort = "startDate",
+  loading = false,
+}: { defaultSort?: string; loading?: boolean } = {}) {
+  const onRequestSort = jest.fn();
+  render(
+    <EnhancedRemoteDummyTable
+      data={data}
+      columns={columns}
+      defaultSort={defaultSort}
+      defaultOrder="asc"
+      loading={loading}
+      onRequestSort={onRequestSort}
+    />,
+  );
+  return { onRequestSort };
+}
+
+describe("Table", () => {
+  it("all items are rendered in the correct", async () => {
+    renderInstance();
+
+    expect(screen.getByText("Tabata")).toBeInTheDocument();
+    expect(screen.getByText("AMRAPx2")).toBeInTheDocument();
+    expect(screen.getByText("HIIT")).toBeInTheDocument();
+    expect(screen.getByText("on/off x 1")).toBeInTheDocument();
+    expect(screen.getByText("EMOM 30'")).toBeInTheDocument();
+  });
+
+  it("loading is true a loading indicator is displayed", () => {
+    renderInstance({ loading: true });
+
+    expectProgressIndicator();
+  });
+
+  it("the defaultSort is indicated", () => {
+    renderInstance();
+
+    expect(screen.getByText(/date/i)).toHaveTextContent(/datesorted ascending/i);
+    expect(screen.getByText(/name/i)).toHaveTextContent(/name/i);
+    expect(screen.getByText(/garmin/i)).toHaveTextContent(/garmin/i);
+  });
+
+  describe("clicks 'Name'", () => {
+    it("once onRequestSort will be called to sort by name in ascendent order", async () => {
+      const { onRequestSort } = renderInstance();
+
+      await userEvent.click(screen.getByText(/name/i));
+
+      expect(screen.getByText(/date/i)).toHaveTextContent(/date/i);
+      expect(screen.getByText(/name/i)).toHaveTextContent(/namesorted ascending/i);
+      expect(screen.getByText(/garmin/i)).toHaveTextContent(/garmin/i);
+      expect(onRequestSort).toHaveBeenCalledWith("name", "asc");
+    });
+
+    it("twice onRequestSort will be called twice to sort by name in ascendent and descendent order", async () => {
+      const { onRequestSort } = renderInstance();
+
+      await userEvent.click(screen.getByText(/name/i));
+      await userEvent.click(screen.getByText(/name/i));
+
+      expect(screen.getByText(/date/i)).toHaveTextContent(/date/i);
+      expect(screen.getByText(/name/i)).toHaveTextContent(/namesorted descending/i);
+      expect(screen.getByText(/garmin/i)).toHaveTextContent(/garmin/i);
+      expect(onRequestSort).toHaveBeenCalledTimes(2);
+      expect(onRequestSort).toHaveBeenCalledWith("name", "asc");
+      expect(onRequestSort).toHaveBeenCalledWith("name", "desc");
+    });
+  });
+});

package/src/components/table/enhanced-remote-table/enhanced-remote-table.tsx

@@ -0,0 +1,74 @@
+import React from "react";
+import { ReactNode, useState } from "react";
+import {
+  TableContainer,
+  TableBody,
+  Table,
+  TableRow,
+  CircularProgress,
+  TableCell,
+} from "@mui/material";
+import { EnhancedTableHead, HeadCell, Order } from "../enhanced-table";
+
+interface Props<T> {
+  data: T[];
+  loading: boolean;
+  defaultSort: string;
+  defaultOrder?: Order;
+  columns: HeadCell[];
+  children: (data: T, index: number) => ReactNode;
+  onRequestSort: (col: string, orderBy: "asc" | "desc") => void;
+}
+
+export const EnhancedRemoteTable = <T,>({
+  children,
+  data,
+  loading,
+  columns,
+  defaultSort,
+  defaultOrder,
+  onRequestSort,
+}: Props<T>) => {
+  const [order, setOrder] = useState({
+    orderBy: defaultSort,
+    order: defaultOrder || "asc",
+  });
+
+  const handleRequestSort = (property: string) => {
+    setOrder((prevState) => {
+      const newOrder = prevState.orderBy === property && prevState.order === "asc" ? "desc" : "asc";
+      onRequestSort(property, newOrder);
+
+      return {
+        orderBy: property,
+        order: newOrder,
+      };
+    });
+  };
+
+  return (
+    <>
+      <TableContainer>
+        <Table>
+          <EnhancedTableHead
+            order={order.order}
+            orderBy={order.orderBy}
+            headCells={columns}
+            onRequestSort={handleRequestSort}
+          />
+          <TableBody>
+            {loading ? (
+              <TableRow>
+                <TableCell colSpan={columns.length} sx={{ textAlign: "center" }}>
+                  <CircularProgress />
+                </TableCell>
+              </TableRow>
+            ) : (
+              data.map((d, i) => children(d, i))
+            )}
+          </TableBody>
+        </Table>
+      </TableContainer>
+    </>
+  );
+};

package/src/components/table/enhanced-remote-table/index.ts

@@ -0,0 +1 @@
+export * from "./enhanced-remote-table";

package/src/components/table/enhanced-table/enhanced-table-head.tsx

@@ -0,0 +1,58 @@
+import React from "react";
+import { TableSortLabel, TableRow, Box, TableCell, TableHead } from "@mui/material";
+import { visuallyHidden } from "@mui/utils";
+
+export type Order = "asc" | "desc";
+export interface HeadCell {
+  disablePadding: boolean;
+  id: string;
+  label: string;
+  numeric: boolean;
+  sort: boolean;
+}
+
+interface Props {
+  onRequestSort: (property: string) => void;
+  order: Order;
+  orderBy: string;
+  headCells: HeadCell[];
+}
+
+export function EnhancedTableHead({ order, orderBy, headCells, onRequestSort }: Props) {
+  const createSortHandler = (property: string) => () => {
+    onRequestSort(property);
+  };
+
+  return (
+    <TableHead>
+      <TableRow>
+        {headCells.map((headCell) => (
+          <TableCell
+            variant="head"
+            key={String(headCell.id)}
+            padding={headCell.disablePadding ? "none" : "normal"}
+            sortDirection={orderBy === headCell.id ? order : false}
+            sx={{ fontWeight: "bold" }}
+          >
+            {headCell.sort ? (
+              <TableSortLabel
+                active={orderBy === headCell.id}
+                direction={orderBy === headCell.id ? order : "asc"}
+                onClick={createSortHandler(headCell.id)}
+              >
+                {headCell.label}
+                {orderBy === headCell.id ? (
+                  <Box component="span" sx={visuallyHidden}>
+                    {order === "desc" ? "sorted descending" : "sorted ascending"}
+                  </Box>
+                ) : null}
+              </TableSortLabel>
+            ) : (
+              headCell.label
+            )}
+          </TableCell>
+        ))}
+      </TableRow>
+    </TableHead>
+  );
+}

package/src/components/table/enhanced-table/enhanced-table.mock.tsx

@@ -0,0 +1,93 @@
+import React from "react";
+import { EnhancedTable } from ".";
+import { TableCell, TableRow } from "@mui/material";
+import { HeadCell, Order } from "./enhanced-table-head";
+
+export const columns: HeadCell[] = [
+  {
+    id: "name",
+    numeric: false,
+    disablePadding: false,
+    label: "Name",
+    sort: true,
+  },
+  {
+    id: "id",
+    numeric: true,
+    disablePadding: false,
+    label: "Garmin ID",
+    sort: true,
+  },
+  {
+    id: "startDate",
+    numeric: false,
+    disablePadding: false,
+    label: "Date",
+    sort: true,
+  },
+];
+
+interface Data {
+  id: number;
+  name: string;
+  startDate: string;
+}
+
+export const data: Data[] = [
+  {
+    id: 2,
+    name: "HIIT",
+    startDate: "11/04/2022",
+  },
+  {
+    id: 1,
+    name: "on/off x 1",
+    startDate: "05/04/2022",
+  },
+  {
+    id: 3,
+    name: "EMOM 30'",
+    startDate: "07/04/2022",
+  },
+  {
+    id: 4,
+    name: "Tabata",
+    startDate: "09/04/2022",
+  },
+  {
+    id: 5,
+    name: "AMRAPx2",
+    startDate: "10/04/2022",
+  },
+];
+
+interface Props {
+  data: Data[];
+  columns: HeadCell[];
+  defaultSort: string;
+  defaultOrder: Order;
+  loading: boolean;
+}
+
+export const TestTable = ({ data, columns, defaultOrder, defaultSort, loading }: Props) => {
+  return (
+    <EnhancedTable
+      search
+      data={data}
+      columns={columns}
+      defaultSort={defaultSort}
+      defaultOrder={defaultOrder}
+      loading={loading}
+    >
+      {(data) =>
+        data.map((d) => (
+          <TableRow key={d.id}>
+            <TableCell>{d.name}</TableCell>
+            <TableCell>{d.id}</TableCell>
+            <TableCell>{d.startDate}</TableCell>
+          </TableRow>
+        ))
+      }
+    </EnhancedTable>
+  );
+};

package/src/components/table/enhanced-table/enhanced-table.stories.tsx

@@ -0,0 +1,21 @@
+import { ComponentMeta } from "@storybook/react";
+import { createTemplate } from "../../../storybook";
+import { TestTable, columns, data } from "./enhanced-table.mock";
+
+export default {
+  title: "Tables/Table",
+  component: TestTable,
+  parameters: {
+    layout: "fullscreen",
+  },
+} as ComponentMeta<typeof TestTable>;
+
+const Template = createTemplate(TestTable);
+
+export const Default = Template.bind({});
+Default.args = {
+  columns,
+  data,
+  defaultSort: "startDate",
+  defaultOrder: "asc",
+};

package/src/components/table/enhanced-table/enhanced-table.test.tsx

@@ -0,0 +1,107 @@
+import React from "react";
+import { expectProgressIndicator, render } from "../../../tests";
+import { screen } from "@testing-library/react";
+import userEvents from "@testing-library/user-event";
+import { TestTable, columns, data } from "./enhanced-table.mock";
+
+function renderInstance({
+  defaultSort = "startDate",
+  loading = false,
+}: { defaultSort?: string; loading?: boolean } = {}) {
+  return render(
+    <TestTable
+      data={data}
+      columns={columns}
+      defaultSort={defaultSort}
+      defaultOrder="asc"
+      loading={loading}
+    />,
+  );
+}
+
+describe("EnhancedTable", () => {
+  it("all items are rendered in the correct order", async () => {
+    renderInstance();
+
+    expect(screen.getByText("Tabata")).toBeInTheDocument();
+    expect(screen.getByText("AMRAPx2")).toBeInTheDocument();
+    expect(screen.getByText("HIIT")).toBeInTheDocument();
+    expect(screen.getByText("on/off x 1")).toBeInTheDocument();
+    expect(screen.getByText("EMOM 30'")).toBeInTheDocument();
+  });
+
+  it("loading is true a loading indicator is displayed", () => {
+    renderInstance({ loading: true });
+
+    expectProgressIndicator();
+  });
+
+  it("all items are sorted by the default sort field", () => {
+    renderInstance({ defaultSort: "startDate" });
+
+    const rows = screen.queryAllByRole("row");
+    expect(rows[1]).toHaveTextContent("on/off x 1105/04/2022");
+    expect(rows[2]).toHaveTextContent("EMOM 30'307/04/2022");
+    expect(rows[3]).toHaveTextContent("Tabata409/04/2022");
+    expect(rows[4]).toHaveTextContent("AMRAPx2510/04/2022");
+    expect(rows[5]).toHaveTextContent("HIIT211/04/2022");
+  });
+
+  describe("if I search an 'a'", () => {
+    it("only the Tabata and AMRAPx2 items appear", async () => {
+      renderInstance();
+
+      await userEvents.type(screen.getByPlaceholderText(/search/i), "a");
+
+      expect(screen.getByText("Tabata")).toBeInTheDocument();
+      expect(screen.getByText("AMRAPx2")).toBeInTheDocument();
+
+      expect(screen.queryByText("HIIT")).not.toBeInTheDocument();
+      expect(screen.queryByText("on/off x 1")).not.toBeInTheDocument();
+      expect(screen.queryByText("EMOM 30'")).not.toBeInTheDocument();
+    });
+
+    it("and remove the search all items appear", async () => {
+      renderInstance();
+
+      const search = screen.getByPlaceholderText(/search/i);
+      await userEvents.type(search, "a");
+      await userEvents.clear(search);
+
+      expect(screen.getByText("Tabata")).toBeInTheDocument();
+      expect(screen.getByText("AMRAPx2")).toBeInTheDocument();
+      expect(screen.getByText("HIIT")).toBeInTheDocument();
+      expect(screen.getByText("on/off x 1")).toBeInTheDocument();
+      expect(screen.getByText("EMOM 30'")).toBeInTheDocument();
+    });
+  });
+
+  describe("If I click 'Garmin ID'", () => {
+    it("once it will be asc sorted", async () => {
+      renderInstance();
+
+      await userEvents.click(screen.getByText(/garmin id/i));
+
+      const rows = screen.queryAllByRole("row");
+      expect(rows[1]).toHaveTextContent("on/off x 1105/04/2022");
+      expect(rows[2]).toHaveTextContent("HIIT211/04/2022");
+      expect(rows[3]).toHaveTextContent("EMOM 30'307/04/2022");
+      expect(rows[4]).toHaveTextContent("Tabata409/04/2022");
+      expect(rows[5]).toHaveTextContent("AMRAPx2510/04/2022");
+    });
+
+    it("two times it will be desc sorted", async () => {
+      renderInstance();
+
+      await userEvents.click(screen.getByText(/garmin id/i));
+      await userEvents.click(screen.getByText(/garmin id/i));
+
+      const rows = screen.queryAllByRole("row");
+      expect(rows[1]).toHaveTextContent("AMRAPx2510/04/2022");
+      expect(rows[2]).toHaveTextContent("Tabata409/04/2022");
+      expect(rows[3]).toHaveTextContent("EMOM 30'307/04/2022");
+      expect(rows[4]).toHaveTextContent("HIIT211/04/2022");
+      expect(rows[5]).toHaveTextContent("on/off x 1105/04/2022");
+    });
+  });
+});

package/src/components/table/enhanced-table/enhanced-table.tsx

@@ -0,0 +1,136 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import React, { ChangeEvent } from "react";
+import { ReactNode, useState } from "react";
+import {
+  Box,
+  TableContainer,
+  TextField,
+  TableBody,
+  InputAdornment,
+  Table,
+  CircularProgress,
+  TableCell,
+  TableRow,
+} from "@mui/material";
+import Search from "@mui/icons-material/Search";
+import { EnhancedTableHead, HeadCell, Order } from "./enhanced-table-head";
+
+function getFilter<T>(columns: HeadCell[], search: string) {
+  return (d: T) => {
+    return (
+      !search ||
+      columns.some((col) => {
+        let value = (d as any)[col.id];
+        if (value?.toLowerCase) {
+          value = value.toLowerCase();
+        }
+        return value?.toString().includes(search.toLowerCase());
+      })
+    );
+  };
+}
+
+function getComparator(order: Order, orderBy: any): (a: any, b: any) => number {
+  return order === "desc"
+    ? (a, b) => descendingComparator(a, b, orderBy)
+    : (a, b) => -descendingComparator(a, b, orderBy);
+}
+function descendingComparator<T>(a: T, b: T, orderBy: keyof T) {
+  if (b[orderBy] < a[orderBy]) {
+    return -1;
+  }
+  if (b[orderBy] > a[orderBy]) {
+    return 1;
+  }
+  return 0;
+}
+
+interface Props<T> {
+  readonly data: T[];
+  search?: boolean;
+  defaultSort: string;
+  defaultOrder?: Order;
+  loading?: boolean;
+  columns: HeadCell[];
+  children: (data: T[]) => ReactNode;
+}
+
+export const EnhancedTable = <T,>({
+  children,
+  data,
+  search,
+  columns,
+  defaultSort,
+  defaultOrder = "asc",
+  loading = false,
+}: Props<T>) => {
+  const [searchFilter, setSearchFilter] = useState<string>("");
+  const [order, setOrder] = useState<Order>(defaultOrder);
+  const [orderBy, setOrderBy] = useState(defaultSort);
+
+  const handleRequestSort = (property: string) => {
+    const isAsc = orderBy === property && order === "asc";
+    setOrder(isAsc ? "desc" : "asc");
+    setOrderBy(property);
+  };
+
+  const filteredData = data
+    .slice()
+    .filter(getFilter<T>(columns, searchFilter))
+    .sort(getComparator(order, orderBy));
+
+  return (
+    <>
+      <Box sx={{ paddingX: 1, paddingBottom: 2 }}>
+        {search && (
+          <Box paddingY={2}>
+            <TextField
+              fullWidth
+              placeholder="Search"
+              InputProps={{
+                role: "search",
+                startAdornment: (
+                  <InputAdornment position="start">
+                    <Search />
+                  </InputAdornment>
+                ),
+              }}
+              onChange={(e: ChangeEvent<any>) => setSearchFilter(e.target.value)}
+            />
+          </Box>
+        )}
+        <TableContainer>
+          <Table>
+            <EnhancedTableHead
+              order={order}
+              orderBy={orderBy}
+              headCells={columns}
+              onRequestSort={handleRequestSort}
+            />
+            <TableBody>
+              {loading ? (
+                <TableRow>
+                  <TableCell colSpan={columns.length} sx={{ textAlign: "center" }}>
+                    <CircularProgress />
+                  </TableCell>
+                </TableRow>
+              ) : filteredData.length === 0 ? (
+                <TableRow>
+                  <TableCell colSpan={columns.length} sx={{ textAlign: "center" }}>
+                    No data
+                  </TableCell>
+                </TableRow>
+              ) : (
+                children(filteredData)
+              )}
+            </TableBody>
+          </Table>
+        </TableContainer>
+      </Box>
+    </>
+  );
+};
+
+EnhancedTable.defaultProps = {
+  defaultOrder: "asc",
+};

package/src/components/table/enhanced-table/index.ts

@@ -0,0 +1,2 @@
+export * from "./enhanced-table";
+export * from "./enhanced-table-head";

package/src/components/table/index.ts

@@ -0,0 +1,2 @@
+export * from "./enhanced-table";
+export * from "./enhanced-remote-table";

package/src/components/table-list/index.ts

@@ -0,0 +1 @@
+export * from "./table-list";