@pautena/react-design-system 0.12.0 → 0.12.2

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

@@ -1,297 +0,0 @@
-import React from "react";
-import { render } from "~/tests/testing-library";
-import { screen } from "@testing-library/react";
-import userEvents from "@testing-library/user-event";
-import { TableRowOption, TableList } from "./table-list";
-import { HeadCell } from "../../components/tables/enhanced-table";
-import { BasicModelInstance } from "..";
-import { expectProgressIndicator } from "~/tests/assertions";
-import { vi } from "vitest";
-
-const columns: HeadCell<BasicModelInstance>[] = [
-  {
-    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: vi.fn(),
-  },
-  {
-    id: "remove",
-    label: "Remove",
-    onClick: vi.fn(),
-  },
-];
-
-describe("TableList", () => {
-  const renderInstance = ({
-    search = false,
-    defaultSort = "value",
-    loading = false,
-    options = undefined,
-    onClick = vi.fn(),
-  }: {
-    defaultSort?: string;
-    loading?: boolean;
-    search?: boolean;
-    options?: TableRowOption<BasicModelInstance>[];
-    onClick?: jest.Mock;
-  } = {}) => {
-    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 as string })).toBeInTheDocument();
-      expect(screen.getByRole("cell", { name: value as string })).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 });
-
-      const search = screen.getByPlaceholderText(/search/i);
-      await userEvents.type(search, "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();
-
-      await userEvents.clear(search);
-    });
-
-    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]);
-  });
-
-  it("would continue working if onClick is not defined and we click a row", async () => {
-    renderInstance({ onClick: undefined });
-
-    await userEvents.click(screen.getByRole("row", { name: /item 3/i }));
-  });
-
-  // TODO: this tests are throwing a console.error
-  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/generators/table-list/table-list.tsx

@@ -1,138 +0,0 @@
-import { TableRow, TableCell, IconButton, MenuItem, Menu } from "@mui/material";
-import React from "react";
-import { EnhancedTable, HeadCell, Order } from "../../components/tables/enhanced-table";
-import MoreVertIcon from "@mui/icons-material/MoreVert";
-import { BasicModelInstance } from "../generators.model";
-
-const OptionsId = "__options";
-
-export interface TableRowOption<T extends BasicModelInstance> {
-  id: string;
-  label: string;
-  onClick: (item: T) => void;
-}
-
-export interface TableListProps<T extends BasicModelInstance> {
-  columns: HeadCell<T>[];
-  data: T[];
-  search?: boolean;
-  defaultSort: string;
-  defaultOrder?: Order;
-  loading?: boolean;
-  options?: TableRowOption<T>[];
-  onClick?: (d: T) => void;
-}
-
-// TODO: Move this to teh generators section
-export const TableList = <T extends BasicModelInstance>({
-  columns: columnsProp,
-  options,
-  data,
-  onClick,
-  search,
-  defaultSort,
-  defaultOrder,
-  loading,
-}: TableListProps<T>) => {
-  const columns = [
-    ...columnsProp,
-    {
-      id: OptionsId,
-      label: "",
-      disablePadding: false,
-      numeric: false,
-      sort: false,
-    },
-  ];
-  const [anchorMenuEl, setAnchorMenuEl] = React.useState<null | { item: T; anchor: HTMLElement }>(
-    null,
-  );
-
-  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 && onClick(row)}
-                role="row"
-                aria-rowindex={i}
-                sx={{ cursor: onClick && "pointer" }}
-              >
-                {columns.map(({ id }, j) => (
-                  <TableCell
-                    role="cell"
-                    scope="row"
-                    key={id.toString()}
-                    aria-rowindex={i}
-                    aria-colindex={j}
-                  >
-                    {
-                      row[
-                        id
-                      ] as string /* TODO: This has to be reimplemented having a cell based on each model type */
-                    }
-                  </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/hooks/index.ts

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

package/src/hooks/routing/index.ts

@@ -1 +0,0 @@
-export * from "./routing.hooks";

package/src/hooks/routing/routing.hooks.ts

@@ -1,23 +0,0 @@
-import { useEffect, useRef } from "react";
-import { useNavigate } from "react-router-dom";
-
-export interface NavigateWhenValueChangesOptions<T> {
-  from: T;
-  to: T;
-}
-
-export const useNavigateWhenValueChanges = <T>(
-  path: string,
-  value: T | undefined,
-  { from, to }: NavigateWhenValueChangesOptions<T>,
-) => {
-  const prevRef = useRef<T>();
-  const navigate = useNavigate();
-
-  useEffect(() => {
-    if (prevRef.current === from && value === to) {
-      navigate(path);
-    }
-    prevRef.current = value;
-  }, [value]);
-};

package/src/hooks/routing/routing.test.tsx

@@ -1,83 +0,0 @@
-import { Box, Button, Typography } from "@mui/material";
-import React, { useState } from "react";
-import { Routes, Route } from "react-router-dom";
-import { render, screen } from "~/tests/testing-library";
-import { useNavigateWhenValueChanges } from "./routing.hooks";
-import userEvent from "@testing-library/user-event";
-
-describe("useNavigateWhenValueChanges", () => {
-  const renderHook = ({ to, from }: { to: boolean; from: boolean }) => {
-    const DummyComponent = () => {
-      const [value, setValue] = useState<boolean | undefined>(false);
-      useNavigateWhenValueChanges("/destination", value, { from, to });
-
-      return (
-        <Box>
-          <Button onClick={() => setValue(undefined)}>undefined</Button>
-          <Button onClick={() => setValue(false)}>false</Button>
-          <Button onClick={() => setValue(true)}>true</Button>
-        </Box>
-      );
-    };
-
-    const DummyRoute = ({ label }: { label: string }) => {
-      return <Typography>{label}</Typography>;
-    };
-
-    const { history } = render(
-      <>
-        <Routes>
-          <Route path="" element={<DummyRoute label="initial" />} />
-          <Route path="" element={<DummyRoute label="destination" />} />
-        </Routes>
-        <DummyComponent />
-      </>,
-    );
-
-    return { history };
-  };
-
-  const changeValueTo = async (value: "undefined" | "false" | "true") => {
-    await userEvent.click(screen.getByRole("button", { name: value }));
-  };
-
-  it("wouldn't change the route when method when is rendered", () => {
-    const { history } = renderHook({ to: true, from: false });
-
-    expect(history.location.pathname).toBe("/");
-  });
-
-  it("wouldn't change the route when it changes to a value that is not to", async () => {
-    const { history } = renderHook({ to: true, from: false });
-
-    await changeValueTo("false");
-
-    expect(history.location.pathname).toBe("/");
-  });
-
-  it("wouldn't change the route when value changes to a value that is not to", async () => {
-    const { history } = renderHook({ to: true, from: false });
-
-    await changeValueTo("false");
-
-    expect(history.location.pathname).toBe("/");
-  });
-
-  it("wouldn't change the route when value changes from undefined to to", async () => {
-    const { history } = renderHook({ to: true, from: false });
-
-    await changeValueTo("undefined");
-    await changeValueTo("true");
-
-    expect(history.location.pathname).toBe("/");
-  });
-
-  it("would change the route when value changes from to to", async () => {
-    const { history } = renderHook({ to: true, from: false });
-
-    await changeValueTo("false");
-    await changeValueTo("true");
-
-    expect(history.location.pathname).toBe("/destination");
-  });
-});

package/src/index.ts

@@ -1,5 +0,0 @@
-export * from "./components";
-export * from "./utils";
-export * from "./layouts";
-export * from "./generators";
-export * from "./providers";

package/src/layouts/drawer-layout/drawer-layout.stories.tsx

@@ -1,57 +0,0 @@
-import React from "react";
-import { Meta, StoryObj } from "@storybook/react";
-import { DrawerLayout } from "./drawer-layout";
-import { mockDrawerNavigation } from "../../components/drawers/drawer.mock";
-import { ContentPlaceholder, DrawerContent, Drawer, DrawerAppBar } from "../../components";
-import { withMemoryRouter } from "~/storybook";
-
-export default {
-  title: "Layouts/DrawerLayout",
-  component: DrawerLayout,
-  decorators: [withMemoryRouter()],
-  parameters: {
-    layout: "fullscreen",
-  },
-  render: (args) => (
-    <DrawerLayout {...args}>
-      <Drawer>
-        <DrawerContent nav={mockDrawerNavigation} />
-      </Drawer>
-      <DrawerAppBar title="Lorem ipsum" />
-      <ContentPlaceholder p={3} />
-    </DrawerLayout>
-  ),
-} satisfies Meta<typeof DrawerLayout>;
-type Story = StoryObj<typeof DrawerLayout>;
-
-export const Temporary: Story = {
-  args: {
-    drawerProviderProps: {
-      variant: "temporary",
-    },
-  },
-};
-
-export const Persistent: Story = {
-  args: {
-    drawerProviderProps: {
-      variant: "persistent",
-    },
-  },
-};
-
-export const Clipped: Story = {
-  args: {
-    drawerProviderProps: {
-      variant: "clipped",
-    },
-  },
-};
-
-export const Mini: Story = {
-  args: {
-    drawerProviderProps: {
-      variant: "mini",
-    },
-  },
-};

package/src/layouts/drawer-layout/drawer-layout.test.tsx

@@ -1,41 +0,0 @@
-import React from "react";
-import { render, screen } from "~/tests/testing-library";
-import userEvent from "@testing-library/user-event";
-import { expectContentPlaceholder } from "~/tests/assertions";
-import { Drawer, DrawerContent, DrawerAppBar, ContentPlaceholder } from "~/components";
-import { mockDrawerNavigation } from "~/components/drawers/drawer.mock";
-import { DrawerLayout } from "./drawer-layout";
-
-describe("DrawerLayout", () => {
-  const renderComponent = () => {
-    return render(
-      <DrawerLayout>
-        <Drawer>
-          <DrawerContent nav={mockDrawerNavigation} />
-        </Drawer>
-        <DrawerAppBar title="Lorem ipsum" />
-        <ContentPlaceholder p={3} />
-      </DrawerLayout>,
-    );
-  };
-
-  it("would render a drawer", async () => {
-    renderComponent();
-
-    await userEvent.click(screen.getByTestId("MenuIcon"));
-
-    expect(screen.getByRole("link", { name: /item 1.1/i })).toBeInTheDocument();
-  });
-
-  it("would render an appbar", () => {
-    renderComponent();
-
-    expect(screen.getByRole("heading", { level: 1, name: /lorem ipsum/i })).toBeInTheDocument();
-  });
-
-  it("would render the content", async () => {
-    renderComponent();
-
-    await expectContentPlaceholder();
-  });
-});

package/src/layouts/drawer-layout/drawer-layout.tsx

@@ -1,26 +0,0 @@
-import React, { ReactNode } from "react";
-import { DrawerAppBarElement, DrawerElement, DrawerMain } from "../../components/drawers";
-import {
-  DrawerProvider,
-  DrawerProviderProps,
-} from "../../components/drawers/drawer-provider/drawer.provider";
-
-export interface DrawerLayoutProps {
-  drawerProviderProps?: DrawerProviderProps;
-  children: [DrawerElement, DrawerAppBarElement, ReactNode];
-}
-
-export const DrawerLayout = ({
-  drawerProviderProps,
-  children: childrenProps,
-}: DrawerLayoutProps) => {
-  const [appBar, drawer, children] = childrenProps;
-
-  return (
-    <DrawerProvider {...drawerProviderProps}>
-      {appBar}
-      {drawer}
-      <DrawerMain>{children}</DrawerMain>
-    </DrawerProvider>
-  );
-};

package/src/layouts/drawer-layout/index.ts

@@ -1 +0,0 @@
-export * from "./drawer-layout";