@pautena/react-design-system 0.0.1

package/src/components/tab/tab-card/tab-card.test.tsx

@@ -0,0 +1,53 @@
+import React from "react";
+import { DummyTabs, TabCardDummy } from "./tab-card.dummy";
+import { screen, render } from "../../../tests";
+import userEvent from "@testing-library/user-event";
+
+describe("TabCard", () => {
+  function renderInstance(initialTab = 0) {
+    return render(<TabCardDummy tabs={DummyTabs} initialTab={initialTab} />);
+  }
+
+  it('initialTab is not set the "panel 1" is displayed', () => {
+    renderInstance();
+
+    expect(screen.getByText(/panel 1/i)).toBeInTheDocument();
+  });
+
+  it('initialTab is set to 3 the "panel 3" is displayed', () => {
+    renderInstance(3);
+
+    expect(screen.getByText(/panel 3/i)).toBeInTheDocument();
+  });
+
+  it.each([
+    [/tab 1/i, /panel 1/i],
+    [/tab 2.1/i, /panel 2/i],
+    [/tab 2.2/i, /panel 2/i],
+    [/tab 3/i, /panel 3/i],
+  ])(
+    'click the tab "%s" the "%s" panel is displayed',
+    async (tabName: RegExp, expectedText: RegExp) => {
+      renderInstance();
+
+      const tab = screen.getByRole("tab", { name: tabName });
+      await userEvent.click(tab);
+
+      expect(screen.getByText(expectedText)).toBeInTheDocument();
+      expect(tab).toHaveAttribute("aria-selected", "true");
+    },
+  );
+
+  it('click the tab "tab 2" and click again the tab "tab 1" the "panel 1" is displayed', async () => {
+    renderInstance();
+
+    const tab1 = screen.getByRole("tab", { name: /tab 1/i });
+    const tab2 = screen.getByRole("tab", { name: /tab 2.1/i });
+    await userEvent.click(tab2);
+    await userEvent.click(tab1);
+
+    expect(screen.getByText(/panel 1/i)).toBeInTheDocument();
+    expect(tab1).toHaveAttribute("aria-selected", "true");
+    expect(tab2).toHaveAttribute("aria-selected", "false");
+  });
+});

package/src/components/tab/tab-card/tab-card.tsx

@@ -0,0 +1,30 @@
+import { Paper, Tabs, Tab, styled, tabsClasses } from "@mui/material";
+import React, { PropsWithChildren, useState } from "react";
+import { TabContextProvider } from "../tab.context";
+
+const StyledTabs = styled(Tabs)(({ theme }) => ({
+  [`&.${tabsClasses.root}`]: {
+    backgroundColor: theme.palette.grey[100],
+  },
+}));
+
+interface Props {
+  tabs: string[];
+  initialTab?: number;
+}
+
+export const TabCard = ({ children, tabs, initialTab = 0 }: PropsWithChildren<Props>) => {
+  const [tab, setTab] = useState(initialTab);
+  return (
+    <TabContextProvider value={tab}>
+      <Paper>
+        <StyledTabs value={tab} onChange={(_, index: number) => setTab(index)}>
+          {tabs.map((tab) => (
+            <Tab key={tab} label={tab} />
+          ))}
+        </StyledTabs>
+        {children}
+      </Paper>
+    </TabContextProvider>
+  );
+};

package/src/components/tab/tab-panel/index.ts

@@ -0,0 +1 @@
+export * from "./tab-panel";

package/src/components/tab/tab-panel/tab-panel.test.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import { TabPanel } from "./tab-panel";
+import { TabContextProvider } from "../tab.context";
+
+describe("TabPanel", () => {
+  function renderInstance(value: number) {
+    render(
+      <TabContextProvider value={value}>
+        <TabPanel index={0}>Panel content</TabPanel>
+      </TabContextProvider>,
+    );
+  }
+
+  it("if the provider value is the index the content is displayed", () => {
+    renderInstance(0);
+
+    expect(screen.getByText(/panel content/i)).toBeInTheDocument();
+  });
+
+  it("if the provider value is not the index the content is not displayed", () => {
+    renderInstance(1);
+
+    expect(screen.queryByText(/panel content/i)).not.toBeInTheDocument();
+  });
+});

package/src/components/tab/tab-panel/tab-panel.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+import { Box } from "@mui/material";
+import { useTab } from "../tab.context";
+
+interface TabPanelProps {
+  children?: React.ReactNode;
+  index: number | number[];
+}
+
+export function TabPanel({ children, index }: TabPanelProps) {
+  const value = useTab();
+  let isTab = value === index;
+  if (Array.isArray(index)) {
+    isTab = index.includes(value);
+  }
+
+  return (
+    <div
+      role="tabpanel"
+      hidden={!isTab}
+      id={`simple-tabpanel-${index}`}
+      aria-labelledby={`simple-tab-${index}`}
+    >
+      {isTab && <Box sx={{ p: 3 }}>{children}</Box>}
+    </div>
+  );
+}

package/src/components/tab/tab.context.ts

@@ -0,0 +1,5 @@
+import { createContext, useContext } from "react";
+
+export const TabContext = createContext(0);
+export const TabContextProvider = TabContext.Provider;
+export const useTab = () => useContext(TabContext);

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");
+    });
+  });
+});