@pautena/react-design-system 0.0.1

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

@@ -0,0 +1,136 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import React 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) => 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";

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

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

@@ -0,0 +1,283 @@
+import React from "react";
+import { expectProgressIndicator, render } from "../../tests";
+import { screen } from "@testing-library/react";
+import userEvents from "@testing-library/user-event";
+import { BasicData, TableRowOption, TableList } from "./table-list";
+import { HeadCell } from "../table/enhanced-table";
+
+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: BasicData[] = [
+  {
+    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();
+    });
+  });
+});

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

@@ -0,0 +1,131 @@
+import { TableRow, TableCell, IconButton, MenuItem, Menu } from "@mui/material";
+import React from "react";
+import { EnhancedTable, HeadCell, Order } from "../table/enhanced-table";
+import MoreVertIcon from "@mui/icons-material/MoreVert";
+
+const OptionsId = "__options";
+
+export interface BasicData {
+  id: string;
+  [key: string]: any;
+}
+
+export interface TableRowOption<T extends BasicData> {
+  id: string;
+  label: string;
+  onClick: (item: T) => void;
+}
+
+export interface TableListProps<T extends BasicData> {
+  columns: HeadCell[];
+  data: T[];
+  search?: boolean;
+  defaultSort: string;
+  defaultOrder?: Order;
+  loading?: boolean;
+  options?: TableRowOption<T>[];
+  onClick?: (d: T) => void;
+}
+
+export const TableList = <T extends BasicData>({
+  columns: columnsProp,
+  options,
+  data,
+  onClick = () => null,
+  search,
+  defaultSort,
+  defaultOrder,
+  loading,
+}: TableListProps<T>) => {
+  const columns = columnsProp;
+  const [anchorMenuEl, setAnchorMenuEl] = React.useState<null | { item: T; anchor: HTMLElement }>(
+    null,
+  );
+  if (options && !columns.some((c) => c.id === OptionsId)) {
+    columns.push({
+      id: OptionsId,
+      label: "",
+      disablePadding: false,
+      numeric: false,
+      sort: false,
+    });
+  }
+
+  return (
+    <>
+      <EnhancedTable<T>
+        columns={columns}
+        data={data}
+        search={search}
+        defaultSort={defaultSort}
+        defaultOrder={defaultOrder}
+        loading={loading}
+      >
+        {(filteredData) =>
+          filteredData.map((row, i) => {
+            return (
+              <TableRow
+                key={row.id}
+                onClick={() => onClick(row)}
+                role="row"
+                aria-rowindex={i}
+                sx={{ cursor: "pointer" }}
+              >
+                {columns.map(({ id }, j) => (
+                  <TableCell role="cell" scope="row" key={id} aria-rowindex={i} aria-colindex={j}>
+                    {row[id]}
+                  </TableCell>
+                ))}
+                {options && (
+                  <TableCell>
+                    <IconButton
+                      data-testid={`options-${row.id}`}
+                      onClick={(event) => {
+                        event.stopPropagation();
+                        setAnchorMenuEl({
+                          item: row,
+                          anchor: event.currentTarget,
+                        });
+                      }}
+                    >
+                      <MoreVertIcon />
+                    </IconButton>
+                  </TableCell>
+                )}
+              </TableRow>
+            );
+          })
+        }
+      </EnhancedTable>
+      {options && (
+        <Menu
+          anchorEl={anchorMenuEl?.anchor}
+          open={!!anchorMenuEl}
+          onClose={() => setAnchorMenuEl(null)}
+          anchorOrigin={{
+            vertical: "top",
+            horizontal: "left",
+          }}
+          transformOrigin={{
+            vertical: "top",
+            horizontal: "left",
+          }}
+        >
+          {options.map(({ id, label, onClick }) => (
+            <MenuItem
+              key={id}
+              onClick={() => {
+                if (anchorMenuEl) {
+                  onClick(anchorMenuEl?.item);
+                }
+                setAnchorMenuEl(null);
+              }}
+            >
+              {label}
+            </MenuItem>
+          ))}
+        </Menu>
+      )}
+    </>
+  );
+};

package/src/components/value-displays/group-value-card/group-value-card.mock.tsx

@@ -0,0 +1,35 @@
+import React from "react";
+import { ValueBoolean } from "../value-boolean/value-boolean";
+import { ValueText } from "../value-text";
+import { GroupValueCard, GroupValueItem } from "./group-value-card";
+
+export const GroupValueCardDummy = (props) => {
+  return (
+    <GroupValueCard {...props}>
+      <GroupValueItem xs={12} sm={6} md={4}>
+        <ValueText label="Hello world" value="Lorem ipsum sit amet" />
+      </GroupValueItem>
+      <GroupValueItem xs={12} sm={6} md={2}>
+        <ValueBoolean label="Enabled" value />
+      </GroupValueItem>
+      <GroupValueItem xs={12} sm={6} md={3}>
+        <ValueText label="Quantity" value="1200" />
+      </GroupValueItem>
+      <GroupValueItem xs={12} sm={6} md={3}>
+        <ValueText label="Currency" value="EUR" />
+      </GroupValueItem>
+      <GroupValueItem xs={12} sm={6} md={6}>
+        <ValueText
+          label="I am Batman"
+          value=" Does it come in black? It's ends here. Hero can be anyone"
+        />
+      </GroupValueItem>
+      <GroupValueItem xs={12} sm={6} md={3}>
+        <ValueText label="Status" value="Open" />
+      </GroupValueItem>
+      <GroupValueItem xs={12} sm={6} md={3}>
+        <ValueText label="Level" value="2144" />
+      </GroupValueItem>
+    </GroupValueCard>
+  );
+};

package/src/components/value-displays/group-value-card/group-value-card.stories.tsx

@@ -0,0 +1,26 @@
+import { ComponentMeta } from "@storybook/react";
+import { GroupValueCard } from "./group-value-card";
+import { createTemplate, withPadding } from "../../../storybook";
+import { GroupValueCardDummy } from "./group-value-card.mock";
+
+export default {
+  title: "Value displays/GroupValueCard",
+  component: GroupValueCard,
+  decorators: [withPadding(2)],
+  parameters: {
+    layout: "fullscreen",
+  },
+} as ComponentMeta<typeof GroupValueCard>;
+
+const Template = createTemplate(GroupValueCardDummy);
+
+export const Default = Template.bind({});
+Default.args = {
+  title: "Hello world",
+  subtitle: "Lorem ipsum sit amet",
+};
+
+export const WihtoutSubtitle = Template.bind({});
+WihtoutSubtitle.args = {
+  title: "Hello world",
+};