@pautena/react-design-system 0.5.1 → 0.6.0

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

@@ -0,0 +1,24 @@
+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/drawer.context.ts → drawer-provider/drawer-context.ts}

@@ -1,9 +1,17 @@
 import { useContext, createContext } from "react";
+import { DrawerState, DrawerVariant } from "../drawer.types";
 
 export interface DrawerContextProps {
-  isOpen: boolean;
+  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);

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

@@ -0,0 +1,25 @@
+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-provider.test.tsx

@@ -0,0 +1,150 @@
+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";
+
+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 } = {}) => {
+    return render(
+      <DrawerProvider
+        initialState={initialState}
+        variant={variant}
+        drawerWidth={400}
+        underAppBar={underAppBar}
+      >
+        <TestContent />
+      </DrawerProvider>,
+    );
+  };
+
+  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();
+      },
+    );
+  });
+});

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

@@ -0,0 +1,57 @@
+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;
+}>;
+
+export const DrawerProvider = ({
+  children,
+  initialState: initialStateProp,
+  variant = "temporary",
+  drawerWidth: drawerWidthProp = drawerWidth,
+  underAppBar = false,
+  selectedItemId,
+}: DrawerProviderProps) => {
+  const [state, setState] = useState<DrawerState>(initialStateProp || initialState[variant]);
+
+  return (
+    <DrawerContext.Provider
+      value={{
+        state,
+        variant,
+        selectedItemId,
+        underAppBar,
+        drawerWidth: drawerWidthProp,
+        switchState: () => setState((state) => targetStates[variant][state === "open" ? 0 : 1]),
+        collapse: () => setState("collapse"),
+        close: () => setState("close"),
+        open: () => setState("open"),
+        setState,
+      }}
+    >
+      {children}
+    </DrawerContext.Provider>
+  );
+};

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

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

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

@@ -1,28 +1,55 @@
-import { ComponentMeta } from "@storybook/react";
-import { createTemplate } from "../../../storybook";
-import { DrawerSection } from "./drawer-section";
-import { withContainer } from "../../../storybook";
+import { Meta, StoryObj } from "@storybook/react";
+import { DrawerSection, DrawerSectionProps } from "./drawer-section";
 import { withMemoryRouter } from "~/storybook";
-import { SectionItems } from "./drawer-section.mock";
+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(), withContainer({ width: 250 })],
+  decorators: [withMemoryRouter()],
   parameters: {
     layout: "centered",
   },
-} as ComponentMeta<typeof DrawerSection>;
+  render: ({ initialState = "open", selectedItemId, ...args }) => (
+    <DrawerProvider initialState={initialState} selectedItemId={selectedItemId}>
+      <DrawerSection {...args} />{" "}
+    </DrawerProvider>
+  ),
+} satisfies Meta<DrawerSectionArgs>;
+type Story = StoryObj<DrawerSectionArgs>;
 
-const Template = createTemplate(DrawerSection);
+export const WihtoutTitle = {
+  args: {
+    items: mockMenuDrawerNavigationSection.items,
+    selectedItemId: "item2.3.2",
+  },
+};
 
-export const Default = Template.bind({});
-Default.args = {
-  title: "Lorem ipsum",
-  items: SectionItems,
+export const Default: Story = {
+  args: {
+    ...WihtoutTitle.args,
+    title: "Lorem ipsum",
+  },
 };
 
-export const WihtoutTitle = Template.bind({});
-WihtoutTitle.args = {
-  items: SectionItems,
+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

@@ -2,38 +2,82 @@ import React from "react";
 import { render, screen } from "~/tests/testing-library";
 import userEvent from "@testing-library/user-event";
 import { DrawerSection } from "./drawer-section";
-import { SectionItems } from "./drawer-section.mock";
+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(<DrawerSection title={title} items={SectionItems} />);
+    return render(
+      <DrawerProvider initialState={initialState}>
+        <DrawerSection title={title} items={mockMenuDrawerNavigationSection.items} />
+      </DrawerProvider>,
+    );
   };
 
   describe("title", () => {
-    it("would render if is set", () => {
-      renderComponent({ title: "Lorem ipsum" });
+    it("should render if is set and state is open", () => {
+      renderComponent({ title: "Item 1" });
 
-      expect(screen.getByRole("heading", { name: /lorem ipsum/i })).toBeInTheDocument();
+      expect(screen.getByRole("heading", { name: /item 1/i })).toBeInTheDocument();
     });
 
-    it("wouldn't render if it's not set", () => {
+    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: /lorem ipsum/i })).not.toBeInTheDocument();
+      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/1-1", /item 1/i],
-      ["/items/1-2", /item 2/i],
-      ["/items/1-3", /item 3/i],
-      ["/items/1-4", /item 4/i],
-    ])("would navigate to %s if %s is clicked", async (to: string, item: RegExp) => {
+      ["/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 }));

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

@@ -1,8 +1,9 @@
-import { List, ListSubheader } from "@mui/material";
+import { List, useTheme } from "@mui/material";
 import React from "react";
-import { DrawerCollapsableItem } from "../drawer-collapsable-item";
-import { DrawerItem } from "../drawer-item";
-import { NavItem } from "../drawer/drawer.types";
+import { DrawerNavigationItem, DrawerSize } from "../drawer.types";
+import { DrawerSubheader } from "../drawer-subheader";
+import { DrawerItem } from "../drawer-item/drawer-item";
+import { useDrawer } from "../drawer-provider";
 
 export interface DrawerSectionProps {
   /**
@@ -12,53 +13,36 @@ export interface DrawerSectionProps {
   /**
    * List of items of that section
    */
-  items: NavItem[];
-
+  items: DrawerNavigationItem[];
   /**
-   * Id of the item that has to be marked as selected
+   * Item size. default to medium
    */
-  selectedItem?: string;
+  size?: DrawerSize;
 }
 
 /**
  * Render a group of items inside the drawer
  * with an optional title
  */
-export const DrawerSection = ({ title, items, selectedItem }: DrawerSectionProps) => {
+export const DrawerSection = ({ title, items, size = "medium" }: DrawerSectionProps) => {
+  const { state } = useDrawer();
+  const { spacing } = useTheme();
   return (
     <>
-      {title && <ListSubheader role="heading">{title}</ListSubheader>}
-      <List>
-        {items.map((item) => {
-          if ("items" in item) {
-            const { id, text, icon, items } = item;
-            const childrenSelected = items.some((item) => item.id === selectedItem);
-            return (
-              <DrawerCollapsableItem
-                key={id}
-                selectedItem={selectedItem}
-                selected={id === selectedItem || childrenSelected}
-                text={text}
-                icon={icon}
-                items={items}
-              />
-            );
-          } else {
-            const { id, text, icon, avatar, label, bullet, href } = item;
-            return (
-              <DrawerItem
-                key={id}
-                selected={id === selectedItem}
-                text={text}
-                icon={icon}
-                avatar={avatar}
-                label={label}
-                bullet={bullet}
-                href={href}
-              />
-            );
-          }
-        })}
+      {title && state === "open" && (
+        <DrawerSubheader size={size} role="heading">
+          {title}
+        </DrawerSubheader>
+      )}
+      <List
+        sx={{
+          paddingTop: size === "small" ? spacing(0) : undefined,
+          paddingY: state === "collapse" ? 0 : undefined,
+        }}
+      >
+        {items.map((item) => (
+          <DrawerItem key={item.id} item={item} size={size} />
+        ))}
       </List>
     </>
   );

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

@@ -0,0 +1,27 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { DrawerSubheader } from "./drawer-subheader";
+import { withContainer } from "../../../storybook";
+
+export default {
+  title: "Components/Drawers/DrawerSubheader",
+  component: DrawerSubheader,
+  decorators: [withContainer({ width: 250 })],
+  parameters: {
+    layout: "centered",
+  },
+} satisfies Meta<typeof DrawerSubheader>;
+type Story = StoryObj<typeof DrawerSubheader>;
+
+export const Medium: Story = {
+  args: {
+    children: "Lorem ipsum",
+    size: "medium",
+  },
+};
+
+export const Small: Story = {
+  args: {
+    children: "Lorem ipsum",
+    size: "small",
+  },
+};

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

@@ -0,0 +1,15 @@
+import { ListSubheader, ListSubheaderProps, styled } from "@mui/material";
+import { DrawerSize } from "../drawer.types";
+
+export interface DrawerSubheaderProps extends ListSubheaderProps {
+  /**
+   * Item size. default to medium
+   */
+  size?: DrawerSize;
+}
+
+export const DrawerSubheader = styled(ListSubheader, {
+  shouldForwardProp: (prop) => prop !== "size",
+})<DrawerSubheaderProps>(({ size, theme }) => ({
+  lineHeight: size === "small" ? theme.typography.pxToRem(40) : undefined,
+}));

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

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