@pautena/react-design-system 0.12.0 → 0.12.1

package/src/components/drawers/drawer-item/drawer-menu-item.tsx

@@ -1,137 +0,0 @@
-import {
-  ListItemButton,
-  ListItemIcon,
-  ListItemText,
-  Collapse,
-  List,
-  useTheme,
-  Popover,
-  SxProps,
-  Theme,
-} from "@mui/material";
-import React, { ReactElement, useState, useRef } from "react";
-import { DrawerNavigationItem, DrawerSize, getDrawerItemColors } from "../drawer.types";
-import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
-import ChevronRightIcon from "@mui/icons-material/ChevronRight";
-import { DrawerItem } from "./drawer-item";
-import { useDrawer } from "../drawer-provider";
-
-export interface DrawerMenuItemProps {
-  /**
-   * Item size. default to medium
-   */
-  size?: DrawerSize;
-  /**
-   * Text displayed inside the item
-   */
-  text: string;
-  /**
-   * Icon displayed to the left
-   */
-  icon?: ReactElement;
-  /**
-   * The item has to be marked as selected
-   */
-  selected?: boolean;
-  /**
-   * Items that are going to be displayed inside
-   * the collapsable
-   */
-  items: DrawerNavigationItem[];
-  /**
-   * Deep level of this item inside the submenus
-   */
-  level: number;
-  /**
-   * Custom styles
-   */
-  sx?: SxProps<Theme>;
-}
-
-export const DrawerMenuItem = ({
-  text,
-  icon,
-  selected,
-  items,
-  size = "medium",
-  level,
-  sx = {},
-}: DrawerMenuItemProps) => {
-  const { state } = useDrawer();
-  const anchorEl = useRef<HTMLDivElement | null>(null);
-  const { palette, spacing } = useTheme();
-  const [menuOpen, setMenuOpen] = useState(false);
-  const { color, fontWeight } = getDrawerItemColors(useTheme(), selected);
-
-  const submenu = (
-    <List component="div" disablePadding>
-      {items.map((item) => (
-        <DrawerItem key={item.id} level={level + 1} item={item} size={size} />
-      ))}
-    </List>
-  );
-
-  const collapsedButtonSx =
-    state === "collapse" && level === 0
-      ? {
-          position: "absolute",
-          right: 0,
-        }
-      : {};
-
-  return (
-    <>
-      <ListItemButton
-        ref={anchorEl}
-        selected={selected}
-        aria-label={text}
-        onClick={() => setMenuOpen((o) => !o)}
-        dense={size === "small"}
-        sx={{
-          ...sx,
-          pl: state === "open" ? spacing(2 + 1.5 * level) : undefined,
-          backgroundColor: menuOpen ? palette.action.hover : undefined,
-        }}
-      >
-        {icon && <ListItemIcon sx={{ color }}>{icon}</ListItemIcon>}
-        <ListItemText
-          disableTypography
-          primary={text}
-          sx={{ color, fontWeight, opacity: state === "collapse" && level === 0 ? 0 : undefined }}
-        />
-        {menuOpen && state === "open" ? (
-          <ExpandMoreIcon sx={[{ color, ml: 2 }, collapsedButtonSx]} />
-        ) : (
-          <ChevronRightIcon sx={[{ color, ml: 2 }, collapsedButtonSx]} />
-        )}
-      </ListItemButton>
-      {state === "open" ? (
-        <Collapse
-          in={menuOpen}
-          timeout="auto"
-          unmountOnExit
-          aria-label={`${text} collapse submenu`}
-        >
-          {submenu}
-        </Collapse>
-      ) : (
-        <Popover
-          open={menuOpen}
-          PaperProps={{
-            elevation: 0,
-            variant: "outlined",
-          }}
-          aria-label={`${text} popover submenu`}
-          anchorEl={anchorEl.current}
-          onClose={() => setMenuOpen(false)}
-          anchorOrigin={{
-            vertical: "top",
-            horizontal: "right",
-          }}
-        >
-          {submenu}
-        </Popover>
-      )}
-    </>
-  );
-};

package/src/components/drawers/drawer-item/index.ts

@@ -1,3 +0,0 @@
-export * from "./drawer-menu-item";
-export * from "./drawer-item";
-export * from "./drawer-item-link";

package/src/components/drawers/drawer-main/drawer-main.tsx

@@ -1,42 +0,0 @@
-import { styled, useTheme } from "@mui/material";
-import React from "react";
-import { PropsWithChildren } from "react";
-import { DrawerHeader, useDrawer } from "../drawer-provider";
-import { DrawerVariant } from "../drawer.types";
-
-const drawerSpace: Record<DrawerVariant, boolean> = {
-  temporary: false,
-  mini: true,
-  clipped: true,
-  persistent: true,
-};
-
-const StyledDiv = styled("div")(({ theme }) => {
-  const { spacing } = useTheme();
-  const { drawerWidth, state, variant } = useDrawer();
-
-  const marginLeft = drawerSpace[variant]
-    ? state === "open"
-      ? drawerWidth
-      : state === "collapse"
-      ? spacing(8)
-      : 0
-    : 0;
-
-  return {
-    marginLeft,
-    transition: theme.transitions.create("margin", {
-      easing: theme.transitions.easing.sharp,
-      duration: theme.transitions.duration.leavingScreen,
-    }),
-  };
-});
-
-export type DrawerMainProps = PropsWithChildren;
-
-export const DrawerMain = ({ children }: DrawerMainProps) => (
-  <StyledDiv>
-    <DrawerHeader />
-    {children}
-  </StyledDiv>
-);

package/src/components/drawers/drawer-main/index.ts

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

package/src/components/drawers/drawer-provider/drawer-context.test.tsx

@@ -1,24 +0,0 @@
-import { Box } from "@mui/material";
-import React from "react";
-import { mockConsoleError } from "~/tests/mocks";
-import { DrawerContent } from "../drawer-content";
-import { mockDrawerNavigation } from "../drawer.mock";
-import { UndefinedProvider } from "./drawer-context";
-import { Drawer } from "../drawer/drawer";
-import { render } from "~/tests/testing-library";
-
-describe("DrawerContext", () => {
-  mockConsoleError();
-
-  it("would throw an error if no Provider is defined", () => {
-    expect(() =>
-      render(
-        <Box>
-          <Drawer>
-            <DrawerContent nav={mockDrawerNavigation} />
-          </Drawer>
-        </Box>,
-      ),
-    ).toThrow(UndefinedProvider);
-  });
-});

package/src/components/drawers/drawer-provider/drawer-context.ts

@@ -1,28 +0,0 @@
-import { useContext, createContext } from "react";
-import { DrawerState, DrawerVariant } from "../drawer.types";
-
-export interface DrawerContextProps {
-  selectedItemId?: string;
-  state: DrawerState;
-  variant: DrawerVariant;
-  drawerWidth: number;
-  underAppBar: boolean;
-  switchState(): void;
-  close(): void;
-  collapse(): void;
-  open(): void;
-  setState: (state: DrawerState) => void;
-}
-
-export const DrawerContext = createContext<DrawerContextProps | undefined>(undefined);
-export const UndefinedProvider = new Error("DrawerContext.Provider is required and was undefined");
-
-export const useDrawer = () => {
-  const context = useContext(DrawerContext);
-
-  if (context === undefined) {
-    throw UndefinedProvider;
-  }
-
-  return context;
-};

package/src/components/drawers/drawer-provider/drawer-mixins.test.tsx

@@ -1,25 +0,0 @@
-import { createTheme } from "@mui/material";
-import { openedMixin, closedMixin } from "./drawer-mixins";
-
-describe("mixins", () => {
-  it("would match a snapshot", () => {
-    const theme = createTheme();
-    expect(openedMixin(theme)).toStrictEqual({
-      overflowX: "hidden",
-      transition: "width 225ms cubic-bezier(0.4, 0, 0.6, 1) 0ms",
-      width: 240,
-    });
-  });
-
-  it("would match a snapshot", () => {
-    const theme = createTheme();
-    expect(closedMixin(theme)).toStrictEqual({
-      "@media (min-width:600px)": {
-        width: "calc(64px + 1px)",
-      },
-      overflowX: "hidden",
-      transition: "width 195ms cubic-bezier(0.4, 0, 0.6, 1) 0ms",
-      width: "calc(56px + 1px)",
-    });
-  });
-});

package/src/components/drawers/drawer-provider/drawer-mixins.ts

@@ -1,24 +0,0 @@
-import { Theme, CSSObject } from "@mui/material/styles";
-
-export const drawerWidth = 240;
-
-export const openedMixin = (theme: Theme): CSSObject => ({
-  width: drawerWidth,
-  transition: theme.transitions.create("width", {
-    easing: theme.transitions.easing.sharp,
-    duration: theme.transitions.duration.enteringScreen,
-  }),
-  overflowX: "hidden",
-});
-
-export const closedMixin = (theme: Theme): CSSObject => ({
-  transition: theme.transitions.create("width", {
-    easing: theme.transitions.easing.sharp,
-    duration: theme.transitions.duration.leavingScreen,
-  }),
-  overflowX: "hidden",
-  width: `calc(${theme.spacing(7)} + 1px)`,
-  [theme.breakpoints.up("sm")]: {
-    width: `calc(${theme.spacing(8)} + 1px)`,
-  },
-});

package/src/components/drawers/drawer-provider/drawer-provider.test.tsx

@@ -1,165 +0,0 @@
-import React from "react";
-import { DrawerProvider, useDrawer } from "../drawer-provider";
-import { render, screen } from "~/tests/testing-library";
-import { Box, Button, Typography } from "@mui/material";
-import { DrawerState, DrawerVariant } from "../drawer.types";
-import userEvent from "@testing-library/user-event";
-import { vi } from "vitest";
-
-const TestContent = () => {
-  const {
-    selectedItemId,
-    state,
-    variant,
-    drawerWidth,
-    underAppBar,
-    switchState,
-    close,
-    collapse,
-    open,
-    setState,
-  } = useDrawer();
-
-  return (
-    <Box>
-      <Typography>selectedItemId: ${selectedItemId}</Typography>
-      <Typography>state: {state}</Typography>
-      <Typography>variant: {variant}</Typography>
-      <Typography>drawerWidth: {drawerWidth}</Typography>
-      <Typography>underAppBar: {underAppBar.toString()}</Typography>
-      <Button onClick={switchState}>switch</Button>
-      <Button onClick={open}>open</Button>
-      <Button onClick={collapse}>collapse</Button>
-      <Button onClick={close}>close</Button>
-      <Button onClick={() => setState("collapse")}>set state</Button>
-    </Box>
-  );
-};
-
-describe("DrawerProvider", () => {
-  const renderComponent = ({
-    initialState,
-    variant,
-    underAppBar,
-  }: { initialState?: DrawerState; variant?: DrawerVariant; underAppBar?: boolean } = {}) => {
-    const onStateChange = vi.fn();
-
-    render(
-      <DrawerProvider
-        initialState={initialState}
-        variant={variant}
-        drawerWidth={400}
-        underAppBar={underAppBar}
-        onStateChange={onStateChange}
-      >
-        <TestContent />
-      </DrawerProvider>,
-    );
-
-    return { onStateChange };
-  };
-
-  it("should pass the drawerWith", () => {
-    renderComponent();
-
-    expect(screen.getByText("drawerWidth: 400")).toBeVisible();
-  });
-
-  describe("underAppBar", () => {
-    it.each([[true], [false]])("should pass the underAppBar=%s", (underAppBar) => {
-      renderComponent({ underAppBar });
-
-      expect(screen.getByText(`underAppBar: ${underAppBar.toString()}`)).toBeVisible();
-    });
-  });
-
-  describe("variant", () => {
-    it.each([["temporary"], ["persistent"], ["clipped"], ["mini"]] satisfies [DrawerVariant][])(
-      "should pass the variant %s",
-      (variant) => {
-        renderComponent({ variant });
-
-        expect(screen.getByText(`variant: ${variant}`)).toBeVisible();
-      },
-    );
-  });
-
-  describe("initialState", () => {
-    it.each([["open"], ["collapse"], ["close"]] as [DrawerState][])(
-      "should render with state=%s if it's its initialState",
-      (initialState) => {
-        renderComponent({ initialState });
-
-        expect(screen.getByText(`state: ${initialState}`)).toBeVisible();
-      },
-    );
-
-    it.each([
-      ["temporary", "close"],
-      ["persistent", "close"],
-      ["clipped", "open"],
-      ["mini", "collapse"],
-    ] satisfies [DrawerVariant, DrawerState][])(
-      "should render the %s variant default state",
-      (variant, state) => {
-        renderComponent({ variant });
-
-        expect(screen.getByText(`state: ${state}`)).toBeVisible();
-      },
-    );
-  });
-
-  it("should change the state to open if open is called", async () => {
-    renderComponent({ initialState: "close" });
-
-    await userEvent.click(screen.getByRole("button", { name: /open/i }));
-
-    expect(screen.getByText("state: open")).toBeVisible();
-  });
-
-  it("should change the state to collapse if collapse is called", async () => {
-    renderComponent({ initialState: "close" });
-
-    await userEvent.click(screen.getByRole("button", { name: /collapse/i }));
-
-    expect(screen.getByText("state: collapse")).toBeVisible();
-  });
-
-  it("should change the state to close if close is called", async () => {
-    renderComponent({ initialState: "open" });
-
-    await userEvent.click(screen.getByRole("button", { name: /close/i }));
-
-    expect(screen.getByText("state: close")).toBeVisible();
-  });
-
-  describe("switchState", () => {
-    it.each([
-      ["close", "open", "temporary"],
-      ["open", "close", "temporary"],
-      ["close", "open", "persistent"],
-      ["open", "close", "persistent"],
-      ["open", "open", "clipped"],
-      ["collapse", "open", "mini"],
-      ["open", "collapse", "mini"],
-    ] satisfies [DrawerState, DrawerState, DrawerVariant][])(
-      "should change state to %s if state is %s and variant %s",
-      async (expectedState, initialState, variant) => {
-        renderComponent({ initialState, variant });
-
-        await userEvent.click(screen.getByRole("button", { name: /switch/i }));
-
-        expect(screen.getByText(`state: ${expectedState}`)).toBeVisible();
-      },
-    );
-  });
-
-  it("should call onStateChange when the state changes", async () => {
-    const { onStateChange } = renderComponent({ initialState: "close" });
-
-    await userEvent.click(screen.getByRole("button", { name: /open/i }));
-
-    expect(onStateChange).toHaveBeenCalledTimes(1);
-    expect(onStateChange).toHaveBeenCalledWith("open");
-  });
-});

package/src/components/drawers/drawer-provider/drawer.provider.tsx

@@ -1,64 +0,0 @@
-import { useState } from "react";
-import React, { PropsWithChildren } from "react";
-import { DrawerContext } from "./drawer-context";
-import { DrawerState, DrawerVariant } from "../drawer.types";
-import { drawerWidth } from "./drawer-mixins";
-
-const initialState: Record<DrawerVariant, DrawerState> = {
-  temporary: "close",
-  mini: "collapse",
-  clipped: "open",
-  persistent: "close",
-};
-
-const targetStates: Record<DrawerVariant, [DrawerState, DrawerState]> = {
-  temporary: ["close", "open"],
-  mini: ["collapse", "open"],
-  clipped: ["open", "open"],
-  persistent: ["close", "open"],
-};
-
-export type DrawerProviderProps = PropsWithChildren<{
-  initialState?: DrawerState;
-  underAppBar?: boolean;
-  drawerWidth?: number;
-  variant?: DrawerVariant;
-  selectedItemId?: string;
-  onStateChange?: (newState: DrawerState) => void;
-}>;
-
-export const DrawerProvider = ({
-  children,
-  initialState: initialStateProp,
-  variant = "temporary",
-  drawerWidth: drawerWidthProp = drawerWidth,
-  underAppBar = false,
-  selectedItemId,
-  onStateChange = () => null,
-}: DrawerProviderProps) => {
-  const [state, setState] = useState<DrawerState>(initialStateProp || initialState[variant]);
-
-  const handleChangeState = (newState: DrawerState) => {
-    onStateChange(newState);
-    setState(newState);
-  };
-
-  return (
-    <DrawerContext.Provider
-      value={{
-        state,
-        variant,
-        selectedItemId,
-        underAppBar,
-        drawerWidth: drawerWidthProp,
-        switchState: () => handleChangeState(targetStates[variant][state === "open" ? 0 : 1]),
-        collapse: () => handleChangeState("collapse"),
-        close: () => handleChangeState("close"),
-        open: () => handleChangeState("open"),
-        setState,
-      }}
-    >
-      {children}
-    </DrawerContext.Provider>
-  );
-};

package/src/components/drawers/drawer-provider/index.ts

@@ -1,3 +0,0 @@
-export * from "../drawer/drawer";
-export * from "./drawer.provider";
-export * from "./drawer-context";

package/src/components/drawers/drawer-section/drawer-section.stories.tsx

@@ -1,55 +0,0 @@
-import { Meta, StoryObj } from "@storybook/react";
-import { DrawerSection, DrawerSectionProps } from "./drawer-section";
-import { withMemoryRouter } from "~/storybook";
-import { mockMenuDrawerNavigationSection } from "../drawer.mock";
-import { DrawerProvider } from "../drawer-provider";
-import React from "react";
-import { DrawerState } from "../drawer.types";
-
-type DrawerSectionArgs = DrawerSectionProps & {
-  initialState?: DrawerState;
-  selectedItemId?: string;
-};
-
-export default {
-  title: "Components/Drawers/DrawerSection",
-  component: DrawerSection,
-  decorators: [withMemoryRouter()],
-  parameters: {
-    layout: "centered",
-  },
-  render: ({ initialState = "open", selectedItemId, ...args }) => (
-    <DrawerProvider initialState={initialState} selectedItemId={selectedItemId}>
-      <DrawerSection {...args} />{" "}
-    </DrawerProvider>
-  ),
-} satisfies Meta<DrawerSectionArgs>;
-type Story = StoryObj<DrawerSectionArgs>;
-
-export const WihtoutTitle = {
-  args: {
-    items: mockMenuDrawerNavigationSection.items,
-    selectedItemId: "item2.3.2",
-  },
-};
-
-export const Default: Story = {
-  args: {
-    ...WihtoutTitle.args,
-    title: "Lorem ipsum",
-  },
-};
-
-export const Small: Story = {
-  args: {
-    ...Default.args,
-    size: "small",
-  },
-};
-
-export const Collapsed: Story = {
-  args: {
-    ...Default.args,
-    initialState: "collapse",
-  },
-};

package/src/components/drawers/drawer-section/drawer-section.test.tsx

@@ -1,88 +0,0 @@
-import React from "react";
-import { render, screen } from "~/tests/testing-library";
-import userEvent from "@testing-library/user-event";
-import { DrawerSection } from "./drawer-section";
-import { mockMenuDrawerNavigationSection } from "../drawer.mock";
-import { DrawerProvider } from "../drawer-provider";
-import { DrawerState } from "../drawer.types";
-
-describe("DrawerSection", () => {
-  const renderComponent = ({
-    title,
-    initialState = "open",
-  }: {
-    title?: string;
-    initialState?: DrawerState;
-  } = {}) => {
-    return render(
-      <DrawerProvider initialState={initialState}>
-        <DrawerSection title={title} items={mockMenuDrawerNavigationSection.items} />
-      </DrawerProvider>,
-    );
-  };
-
-  describe("title", () => {
-    it("should render if is set and state is open", () => {
-      renderComponent({ title: "Item 1" });
-
-      expect(screen.getByRole("heading", { name: /item 1/i })).toBeInTheDocument();
-    });
-
-    it.each([["collapse" as DrawerState], ["close" as DrawerState]])(
-      "shouldn't render if is set and state isn't open",
-      (initialState) => {
-        renderComponent({ title: "Item 1", initialState });
-
-        expect(screen.queryByRole("heading", { name: /item 1/i })).not.toBeInTheDocument();
-      },
-    );
-
-    it("shouldn't render if it's not set and state is open", () => {
-      renderComponent({ title: undefined });
-
-      expect(screen.queryByRole("heading", { name: /item 1/i })).not.toBeInTheDocument();
-    });
-  });
-
-  describe("expandable submenus", () => {
-    it.each([["collapse" as DrawerState], ["open" as DrawerState]])(
-      "should render the items if the drawer state is %s",
-      async (initialState: DrawerState) => {
-        renderComponent({ initialState });
-
-        await userEvent.click(screen.getByRole("button", { name: /item 2.3/i }));
-
-        expect(screen.getByRole("link", { name: /item 2.3.1/i })).toBeVisible();
-        expect(screen.getByRole("link", { name: /item 2.3.2/i })).toBeVisible();
-        expect(screen.getByRole("link", { name: /item 2.3.3/i })).toBeVisible();
-      },
-    );
-
-    it.each([
-      ["Item 2.3 popover submenu", "collapse" as DrawerState],
-      ["Item 2.3 collapse submenu", "open" as DrawerState],
-    ])(
-      "should render a '%s' if the drawer state is %s",
-      async (label: string, initialState: DrawerState) => {
-        renderComponent({ initialState });
-
-        await userEvent.click(screen.getByRole("button", { name: /item 2.3/i }));
-
-        expect(screen.getByLabelText(label)).toBeVisible();
-      },
-    );
-  });
-
-  describe("click list item", () => {
-    it.each([
-      ["/items/2-1", /item 2.1/i],
-      ["/items/2-2", /item 2.2/i],
-    ])("should navigate to %s if %s is clicked", async (to: string, item: RegExp) => {
-      const { history } = renderComponent();
-
-      await userEvent.click(screen.getByRole("link", { name: item }));
-
-      expect(history.location.pathname).toBe(to);
-    });
-  });
-});