@pautena/react-design-system 0.0.1 → 0.1.2

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

@@ -1,53 +0,0 @@
-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

@@ -1,30 +0,0 @@
-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

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

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

@@ -1,26 +0,0 @@
-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

@@ -1,27 +0,0 @@
-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

@@ -1,5 +0,0 @@
-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

@@ -1,27 +0,0 @@
-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

@@ -1,24 +0,0 @@
-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

@@ -1,77 +0,0 @@
-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

@@ -1,74 +0,0 @@
-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

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

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

@@ -1,58 +0,0 @@
-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

@@ -1,93 +0,0 @@
-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

@@ -1,21 +0,0 @@
-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

@@ -1,107 +0,0 @@
-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");
-    });
-  });
-});