@pautena/react-design-system 0.0.1 → 0.1.2

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

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

@@ -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,283 +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 { 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

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

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

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