@pautena/react-design-system 0.1.1 → 0.1.2

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

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

@@ -1,136 +0,0 @@
-/* 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

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

package/src/components/table/index.ts

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

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

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

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

@@ -1,75 +0,0 @@
-import React from "react";
-import { useDemoData } from "@mui/x-data-grid-generator";
-import { ComponentMeta } from "@storybook/react";
-import { createTemplate } from "../../storybook";
-import { TableList } from "./table-list";
-import { action } from "@storybook/addon-actions";
-
-const maxColumns = 3;
-
-export default {
-  title: "Tables/TableList",
-  component: TableList,
-  parameters: {
-    layout: "fullscreen",
-  },
-} as ComponentMeta<typeof TableList>;
-
-const Template = createTemplate(({ dataSetType, size, ...rest }) => {
-  const { data } = useDemoData({
-    dataSet: dataSetType,
-    rowLength: size,
-    maxColumns,
-  });
-  const { rows } = data;
-  const columns = data.columns.map(({ field, headerName }) => ({
-    id: field,
-    label: headerName,
-    sort: true,
-    disablePadding: false,
-    numeric: false,
-  }));
-
-  return <TableList {...rest} columns={columns} data={rows} onClick={action("onClick row")} />;
-});
-
-export const Default = Template.bind({});
-Default.args = {
-  size: 40,
-  dataSetType: "Commodity",
-  search: true,
-};
-
-export const Loading = Template.bind({});
-Loading.args = {
-  size: 40,
-  dataSetType: "Commodity",
-  search: true,
-  loading: true,
-};
-
-export const WihtoutSearch = Template.bind({});
-WihtoutSearch.args = {
-  size: 40,
-  dataSetType: "Commodity",
-  search: false,
-};
-
-export const WithOptions = Template.bind({});
-WithOptions.args = {
-  size: 40,
-  dataSetType: "Commodity",
-  search: false,
-  options: [
-    {
-      id: "edit",
-      label: "Edit",
-      onClick: action("Option edit"),
-    },
-    {
-      id: "remove",
-      label: "Remove",
-      onClick: action("Option remove"),
-    },
-  ],
-};

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

@@ -1,284 +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 { TableRowOption, TableList } from "./table-list";
-import { HeadCell } from "../table/enhanced-table";
-import { BasicModelInstance } from "../../generators";
-
-const columns: HeadCell[] = [
-  {
-    id: "id",
-    numeric: true,
-    disablePadding: false,
-    label: "Item ID",
-    sort: false,
-  },
-  {
-    id: "name",
-    numeric: false,
-    disablePadding: false,
-    label: "Name",
-    sort: true,
-  },
-  {
-    id: "value",
-    numeric: true,
-    disablePadding: false,
-    label: "Value",
-    sort: true,
-  },
-];
-const data: BasicModelInstance[] = [
-  {
-    id: "item-c",
-    name: "fg Item 1",
-    value: 1,
-  },
-  {
-    id: "item-a",
-    name: "aa Item 2",
-    value: 2,
-  },
-  {
-    id: "item-l",
-    name: "ba Item 3",
-    value: 3,
-  },
-  {
-    id: "item-j",
-    name: "aa Item 4",
-    value: 4,
-  },
-  {
-    id: "item-w",
-    name: "cd Item 5",
-    value: 5,
-  },
-];
-
-const options = [
-  {
-    id: "edit",
-    label: "Edit",
-    onClick: jest.fn(),
-  },
-  {
-    id: "remove",
-    label: "Remove",
-    onClick: jest.fn(),
-  },
-];
-
-describe("TableList", () => {
-  const renderInstance = ({
-    search = false,
-    defaultSort = "value",
-    loading = false,
-    options = undefined,
-  }: {
-    defaultSort?: string;
-    loading?: boolean;
-    search?: boolean;
-    options?: TableRowOption<any>[];
-  } = {}) => {
-    const onClick = jest.fn();
-    const instance = render(
-      <TableList
-        search={search}
-        data={data}
-        columns={columns}
-        defaultSort={defaultSort}
-        defaultOrder="asc"
-        loading={loading}
-        options={options}
-        onClick={onClick}
-      />,
-    );
-
-    return { ...instance, onClick };
-  };
-
-  const openOptionsMenu = async (index = 0) => {
-    await userEvents.click(screen.getAllByTestId("MoreVertIcon")[index]);
-  };
-
-  it("would render all items and its values", () => {
-    renderInstance();
-
-    data.forEach(({ id, name, value }) => {
-      expect(screen.getByRole("cell", { name: id })).toBeInTheDocument();
-      expect(screen.getByRole("cell", { name: name })).toBeInTheDocument();
-      expect(screen.getByRole("cell", { name: value })).toBeInTheDocument();
-    });
-  });
-
-  it("all items are rendered in the correct default order", async () => {
-    renderInstance();
-
-    [/item 1/i, /item 2/i, /item 3/i, /item 4/i, /item 5/i].forEach((item, index) => {
-      expect(screen.getByRole("cell", { name: item })).toHaveAttribute(
-        "aria-rowindex",
-        index.toString(),
-      );
-    });
-  });
-
-  it("loading is true a loading indicator is displayed", () => {
-    renderInstance({ loading: true });
-
-    expectProgressIndicator();
-  });
-
-  describe("search", () => {
-    it("would render a search input if search is true", () => {
-      renderInstance({ search: true });
-
-      expect(screen.getByRole("search")).toBeInTheDocument();
-    });
-
-    it("wouldn't render a search input if search is false", () => {
-      renderInstance({ search: false });
-
-      expect(screen.queryByRole("search")).not.toBeInTheDocument();
-    });
-  });
-
-  describe("if I search an 'a'", () => {
-    it("would render the items 2,3 and 4", async () => {
-      renderInstance({ search: true });
-
-      await userEvents.type(screen.getByPlaceholderText(/search/i), "a");
-
-      expect(screen.getByText(/item 2/i)).toBeInTheDocument();
-      expect(screen.getByText(/item 3/i)).toBeInTheDocument();
-      expect(screen.getByText(/item 4/i)).toBeInTheDocument();
-
-      expect(screen.queryByText(/item 1/i)).not.toBeInTheDocument();
-      expect(screen.queryByText(/item 5/i)).not.toBeInTheDocument();
-    });
-
-    it("would render all the items if I remove the search", async () => {
-      renderInstance({ search: true });
-
-      const search = screen.getByPlaceholderText(/search/i);
-      await userEvents.type(search, "a");
-      await userEvents.clear(search);
-
-      expect(screen.getByText(/item 1/i)).toBeInTheDocument();
-      expect(screen.getByText(/item 2/i)).toBeInTheDocument();
-      expect(screen.getByText(/item 3/i)).toBeInTheDocument();
-      expect(screen.getByText(/item 4/i)).toBeInTheDocument();
-      expect(screen.getByText(/item 5/i)).toBeInTheDocument();
-    });
-  });
-
-  describe("sort by a sortable column", () => {
-    it("once it will be asc sorted", async () => {
-      renderInstance();
-
-      await userEvents.click(screen.getByText(/name/i));
-
-      expect(screen.getByRole("cell", { name: /item 2/i })).toHaveAttribute("aria-rowindex", "0");
-      expect(screen.getByRole("cell", { name: /item 4/i })).toHaveAttribute("aria-rowindex", "1");
-      expect(screen.getByRole("cell", { name: /item 3/i })).toHaveAttribute("aria-rowindex", "2");
-      expect(screen.getByRole("cell", { name: /item 5/i })).toHaveAttribute("aria-rowindex", "3");
-      expect(screen.getByRole("cell", { name: /item 1/i })).toHaveAttribute("aria-rowindex", "4");
-    });
-
-    it("two times it will be desc sorted", async () => {
-      renderInstance();
-
-      await userEvents.click(screen.getByText(/name/i));
-      await userEvents.click(screen.getByText(/name/i));
-
-      expect(screen.getByRole("cell", { name: /item 1/i })).toHaveAttribute("aria-rowindex", "0");
-      expect(screen.getByRole("cell", { name: /item 5/i })).toHaveAttribute("aria-rowindex", "1");
-      expect(screen.getByRole("cell", { name: /item 3/i })).toHaveAttribute("aria-rowindex", "2");
-      expect(screen.getByRole("cell", { name: /item 4/i })).toHaveAttribute("aria-rowindex", "3");
-      expect(screen.getByRole("cell", { name: /item 2/i })).toHaveAttribute("aria-rowindex", "4");
-    });
-  });
-
-  it("sort a non sortable column", async () => {
-    renderInstance();
-
-    await userEvents.click(screen.getByText(/id/i));
-
-    expect(screen.getByRole("cell", { name: /item 1/i })).toHaveAttribute("aria-rowindex", "0");
-    expect(screen.getByRole("cell", { name: /item 2/i })).toHaveAttribute("aria-rowindex", "1");
-    expect(screen.getByRole("cell", { name: /item 3/i })).toHaveAttribute("aria-rowindex", "2");
-    expect(screen.getByRole("cell", { name: /item 4/i })).toHaveAttribute("aria-rowindex", "3");
-    expect(screen.getByRole("cell", { name: /item 5/i })).toHaveAttribute("aria-rowindex", "4");
-  });
-
-  it("would call onClick if a row is clicked", async () => {
-    const { onClick } = renderInstance();
-
-    await userEvents.click(screen.getByRole("row", { name: /item 3/i }));
-
-    expect(onClick).toHaveBeenCalledTimes(1);
-    expect(onClick).toHaveBeenCalledWith(data[2]);
-  });
-
-  describe("options menu", () => {
-    it("would render a button to open the menu if doesn't have options", () => {
-      renderInstance({ options: undefined });
-
-      expect(screen.queryByTestId("MoreVertIcon")).not.toBeInTheDocument();
-    });
-
-    it("would render a button to open the menu if has options", () => {
-      renderInstance({ options });
-
-      screen.getAllByTestId("MoreVertIcon");
-    });
-
-    it("would render a menu if has options", async () => {
-      renderInstance({ options });
-
-      await openOptionsMenu();
-
-      expect(await screen.findByRole("menu")).toBeInTheDocument();
-    });
-
-    it.each([
-      [/edit/i, 0],
-      [/remove/i, 1],
-    ])("would call the option onClick with the row if %s option is clicked", async (name, i) => {
-      const index = 1;
-      const item = data[index];
-      const option = options[i];
-
-      renderInstance({ options });
-
-      await openOptionsMenu(index);
-
-      await userEvents.click(screen.getByRole("menuitem", { name }));
-
-      expect(option.onClick).toHaveBeenCalledTimes(1);
-      expect(option.onClick).toHaveBeenCalledWith(item);
-    });
-
-    it("would close the menu when an option is clicked", async () => {
-      const index = 1;
-
-      renderInstance({ options });
-
-      await openOptionsMenu(index);
-      await userEvents.click(screen.getByRole("menuitem", { name: /edit/i }));
-
-      expect(screen.queryByRole("menu")).not.toBeInTheDocument();
-    });
-
-    it("wouldn't call the component onClick if an option if clicked", async () => {
-      const { onClick } = renderInstance({ options });
-
-      await openOptionsMenu();
-
-      await userEvents.click(screen.getByRole("menuitem", { name: /edit/i }));
-
-      expect(onClick).not.toHaveBeenCalled();
-    });
-  });
-});