@pautena/react-design-system 0.12.0 → 0.12.1

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

@@ -1,83 +0,0 @@
-import { Typography } from "@mui/material";
-import React from "react";
-import { render, screen } from "~/tests/testing-library";
-import { DrawerContent } from "../drawer-content";
-import { Drawer, DrawerProvider, useDrawer } from "../drawer-provider";
-import { mockDrawerNavigation } from "../drawer.mock";
-import { DrawerState, DrawerVariant } from "../drawer.types";
-import userEvent from "@testing-library/user-event";
-
-describe("Drawer", () => {
-  const renderComponent = ({
-    initialState = "open",
-    variant,
-    underAppBar,
-  }: { initialState?: DrawerState; variant?: DrawerVariant; underAppBar?: boolean } = {}) => {
-    const DrawerContentTest = () => {
-      const { state } = useDrawer();
-
-      return (
-        <>
-          <Typography>state: {state}</Typography>
-          <DrawerContent nav={mockDrawerNavigation} />
-        </>
-      );
-    };
-
-    render(
-      <DrawerProvider initialState={initialState} variant={variant} underAppBar={underAppBar}>
-        <Drawer>
-          <DrawerContentTest />
-        </Drawer>
-      </DrawerProvider>,
-    );
-  };
-
-  it("should render the title of each section", () => {
-    renderComponent({ initialState: "open" });
-
-    mockDrawerNavigation.items
-      .filter((s) => s.title)
-      .forEach((section) => {
-        expect(screen.getByText(section.title!)).toBeVisible();
-      });
-  });
-
-  it("should render the items text if the drawer is open", () => {
-    renderComponent({ initialState: "open" });
-
-    mockDrawerNavigation.items.forEach((section) => {
-      section.items.forEach((item) => {
-        expect(screen.getByText(item.text)).toBeVisible();
-      });
-    });
-  });
-
-  describe("close button", () => {
-    it.each([
-      [true, "temporary", false],
-      [false, "temporary", true],
-      [true, "persistent", false],
-      [false, "persistent", true],
-      [false, "clipped", false],
-      [false, "clipped", true],
-      [true, "mini", false],
-      [false, "mini", true],
-    ] satisfies [boolean, DrawerVariant, boolean][])(
-      "should be visible=%s if variant=%s and underAppBar=%s",
-      (visible, variant, underAppBar) => {
-        renderComponent({ variant, underAppBar });
-
-        expect(!!screen.queryByTestId("ChevronLeftIcon")).toBe(visible);
-      },
-    );
-
-    it("should switch the drawer state if is clicked", async () => {
-      renderComponent({ initialState: "open", variant: "temporary" });
-
-      await userEvent.click(screen.getByTestId("ChevronLeftIcon"));
-
-      expect(screen.getByText("state: close")).toBeVisible();
-    });
-  });
-});

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

@@ -1,94 +0,0 @@
-import React from "react";
-import {
-  SxProps,
-  Theme,
-  drawerClasses,
-  styled,
-  Drawer as MuiDrawer,
-  Divider,
-  IconButton,
-  useTheme,
-  paperClasses,
-} from "@mui/material";
-import ChevronLeftIcon from "@mui/icons-material/ChevronLeft";
-import { DrawerComponent, DrawerProps, DrawerState, DrawerVariant } from "../drawer.types";
-import { useDrawer } from "../drawer-provider/drawer-context";
-import { closedMixin, openedMixin } from "../drawer-provider/drawer-mixins";
-
-export const DrawerHeader = styled("div")(({ theme }) => ({
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "flex-end",
-  padding: theme.spacing(0, 1),
-  ...theme.mixins.toolbar,
-}));
-
-const showCloseButton: Record<DrawerVariant, boolean> = {
-  temporary: true,
-  mini: true,
-  persistent: true,
-  clipped: false,
-};
-
-const muiDrawerVariant: Record<DrawerVariant, "permanent" | "persistent" | "temporary"> = {
-  temporary: "temporary",
-  mini: "permanent",
-  clipped: "permanent",
-  persistent: "persistent",
-};
-
-type SxGenerator = (state: DrawerState, theme: Theme) => SxProps<Theme>;
-const NoopSxGenerator = () => ({});
-const variantsSx: Readonly<Record<DrawerVariant, SxGenerator>> = {
-  mini: (state: DrawerState, theme: Theme) => ({
-    boxSizing: "border-box",
-    [`& .${paperClasses.root}`]: {
-      zIndex: theme.zIndex.drawer - 1,
-    },
-  }),
-  temporary: NoopSxGenerator,
-  clipped: NoopSxGenerator,
-  persistent: NoopSxGenerator,
-};
-
-export const Drawer: DrawerComponent = ({ children, ...rest }: DrawerProps) => {
-  const theme = useTheme();
-  const { state, switchState, underAppBar, close, drawerWidth, variant } = useDrawer();
-
-  const sx: any = {
-    width: drawerWidth,
-    flexShrink: 0,
-    whiteSpace: "nowrap",
-    ...(state === "open" && {
-      ...openedMixin(theme),
-      [`& .${drawerClasses.paper}`]: openedMixin(theme),
-    }),
-    ...(state !== "open" && {
-      ...closedMixin(theme),
-      [`& .${drawerClasses.paper}`]: closedMixin(theme),
-    }),
-    ...variantsSx[variant](state, theme),
-  };
-
-  return (
-    <MuiDrawer
-      open={state === "open"}
-      variant={muiDrawerVariant[variant]}
-      role="menu"
-      aria-hidden={state === "close"}
-      onClose={close}
-      sx={sx}
-      {...rest}
-    >
-      <DrawerHeader>
-        {!underAppBar && showCloseButton[variant] && (
-          <IconButton onClick={switchState}>
-            <ChevronLeftIcon />
-          </IconButton>
-        )}
-      </DrawerHeader>
-      <Divider />
-      {children}
-    </MuiDrawer>
-  );
-};

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

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

package/src/components/drawers/drawer-app-bar/drawer-app-bar.stories.tsx

@@ -1,26 +0,0 @@
-import React from "react";
-import { Meta, StoryObj } from "@storybook/react";
-import { DrawerAppBar } from "./drawer-app-bar";
-import { DrawerProvider } from "../drawer-provider";
-
-export default {
-  title: "Components/Drawers/DrawerAppBar",
-  component: DrawerAppBar,
-  parameters: {
-    layout: "fullscreen",
-  },
-  render: (args) => (
-    <DrawerProvider>
-      <DrawerAppBar {...args} />
-    </DrawerProvider>
-  ),
-} satisfies Meta<typeof DrawerAppBar>;
-type Story = StoryObj<typeof DrawerAppBar>;
-
-export const Default: Story = {
-  args: {
-    title: "Lorem ipsum",
-  },
-};
-
-export const WithoutTitle: Story = {};

package/src/components/drawers/drawer-app-bar/drawer-app-bar.test.tsx

@@ -1,83 +0,0 @@
-import React from "react";
-import { render, screen } from "~/tests/testing-library";
-import { DrawerAppBar } from "./drawer-app-bar";
-import { DrawerProvider, useDrawer } from "../drawer-provider";
-import { DrawerState, DrawerVariant } from "~/components/drawers";
-import { Typography } from "@mui/material";
-import userEvent from "@testing-library/user-event";
-
-describe("DrawerAppBar", () => {
-  const renderComponent = ({
-    title,
-    initialState,
-    variant = "temporary",
-  }: {
-    title?: string;
-    initialState?: DrawerState;
-    variant?: DrawerVariant;
-  } = {}) => {
-    const TestContent = () => {
-      const { state } = useDrawer();
-      return <Typography>state: {state}</Typography>;
-    };
-    render(
-      <DrawerProvider initialState={initialState} variant={variant}>
-        <DrawerAppBar title={title}>
-          <Typography>test content</Typography>
-        </DrawerAppBar>
-        <TestContent />
-      </DrawerProvider>,
-    );
-  };
-
-  describe("menu button", () => {
-    it.each([
-      ["temporary" as DrawerVariant, "open" as DrawerState],
-      ["temporary" as DrawerVariant, "close" as DrawerState],
-      ["persistent" as DrawerVariant, "open" as DrawerState],
-      ["persistent" as DrawerVariant, "close" as DrawerState],
-      ["mini" as DrawerVariant, "collapse" as DrawerState],
-    ])("should render a menu button if variant is %s", (variant, initialState) => {
-      renderComponent({ variant, initialState });
-
-      expect(screen.getByRole("button", { name: /open drawer/i })).toBeVisible();
-    });
-
-    it("should switch the drawer state if is clicked", async () => {
-      renderComponent({ initialState: "open", variant: "temporary" });
-
-      await userEvent.click(screen.getByTestId("MenuIcon"));
-
-      expect(screen.getByText("state: close")).toBeVisible();
-    });
-  });
-
-  it.each([
-    ["clipped" as DrawerVariant, "open" as DrawerState],
-    ["mini" as DrawerVariant, "open" as DrawerState],
-  ])("should not render a menu button if variant is %s", (variant, initialState) => {
-    renderComponent({ variant, initialState });
-
-    expect(screen.queryByRole("button", { name: /open drawer/i })).not.toBeInTheDocument();
-  });
-
-  it("should render the children", () => {
-    renderComponent();
-
-    expect(screen.getByText(/test content/i)).toBeVisible();
-  });
-
-  describe("title", () => {
-    it("shouldn't render a title if it's not defined", () => {
-      renderComponent({ title: undefined });
-
-      expect(screen.queryByRole("heading", { level: 1 })).not.toBeInTheDocument();
-    });
-
-    it("should render a title if it's defined", () => {
-      renderComponent({ title: "Lorem ipsum" });
-
-      expect(screen.queryByRole("heading", { level: 1, name: /lorem ipsum/i })).toBeInTheDocument();
-    });
-  });
-});

package/src/components/drawers/drawer-app-bar/drawer-app-bar.tsx

@@ -1,87 +0,0 @@
-import * as React from "react";
-import {
-  AppBar as MuiAppBar,
-  Toolbar,
-  IconButton,
-  Typography,
-  useTheme,
-  Theme,
-} from "@mui/material";
-import MenuIcon from "@mui/icons-material/Menu";
-import { useDrawer } from "../drawer-provider/drawer-context";
-import { AppBarProps as MuiAppBarProps } from "@mui/material";
-import { DrawerState, DrawerVariant } from "../drawer.types";
-
-const moveWithDrawer: Record<DrawerVariant, boolean> = {
-  temporary: false,
-  mini: true,
-  persistent: true,
-  clipped: true,
-};
-
-const showMenuButton: Record<DrawerVariant, (state: DrawerState) => boolean> = {
-  temporary: () => true,
-  mini: (state) => state !== "open",
-  persistent: () => true,
-  clipped: () => false,
-};
-
-export interface DrawerAppBarProps extends MuiAppBarProps {
-  title?: string;
-}
-
-export const DrawerAppBar = ({ title, sx, children, ...rest }: DrawerAppBarProps) => {
-  const theme = useTheme();
-  const { state, variant, switchState, drawerWidth, underAppBar } = useDrawer();
-
-  const rootSx =
-    (moveWithDrawer[variant] &&
-      !underAppBar && {
-        transition: theme.transitions.create(["width", "margin"], {
-          easing: theme.transitions.easing.sharp,
-          duration: theme.transitions.duration.leavingScreen,
-        }),
-        ...(state === "open" && {
-          marginLeft: drawerWidth,
-          width: `calc(100% - ${drawerWidth}px)`,
-          transition: theme.transitions.create(["width", "margin"], {
-            easing: theme.transitions.easing.sharp,
-            duration: theme.transitions.duration.enteringScreen,
-          }),
-        }),
-      }) ||
-    {};
-
-  return (
-    <MuiAppBar
-      position={underAppBar ? "fixed" : undefined}
-      {...rest}
-      sx={{
-        ...sx,
-        ...rootSx,
-        zIndex: (theme: Theme) => theme.zIndex.drawer + (underAppBar ? 1 : 0),
-      }}
-    >
-      <Toolbar>
-        <IconButton
-          color="inherit"
-          aria-label="open drawer"
-          onClick={switchState}
-          edge="start"
-          sx={{
-            marginRight: 5,
-            display: showMenuButton[variant](state) ? undefined : "none",
-          }}
-        >
-          <MenuIcon />
-        </IconButton>
-        {title && (
-          <Typography variant="h6" component="h1" role="heading" aria-level={1} noWrap>
-            {title}
-          </Typography>
-        )}
-        {children}
-      </Toolbar>
-    </MuiAppBar>
-  );
-};

package/src/components/drawers/drawer-app-bar/index.ts

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

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

@@ -1,48 +0,0 @@
-import React from "react";
-import { Meta, StoryObj } from "@storybook/react";
-import { DrawerContent } from "./drawer-content";
-import { mockDrawerNavigation } from "../drawer.mock";
-import { withMemoryRouter } from "~/storybook";
-import { DrawerProvider } from "../drawer-provider/drawer.provider";
-import { DrawerContentProps, DrawerState } from "../drawer.types";
-
-type DrawerContentArgs = DrawerContentProps & {
-  initialState?: DrawerState;
-  selectedItemId?: string;
-};
-
-export default {
-  title: "Components/Drawers/DrawerContent",
-  component: DrawerContent,
-  decorators: [withMemoryRouter()],
-  render: ({ initialState = "open", selectedItemId, ...args }) => (
-    <DrawerProvider initialState={initialState} selectedItemId={selectedItemId}>
-      <DrawerContent {...args} />
-    </DrawerProvider>
-  ),
-  parameters: {
-    layout: "centered",
-  },
-} satisfies Meta<DrawerContentArgs>;
-type Story = StoryObj<DrawerContentArgs>;
-
-export const Default: Story = {
-  args: {
-    selectedItemId: "item2.3.2",
-    nav: mockDrawerNavigation,
-  },
-};
-
-export const Small: Story = {
-  args: {
-    ...Default.args,
-    size: "small",
-  },
-};
-
-export const Collapsed: Story = {
-  args: {
-    ...Default.args,
-    initialState: "collapse",
-  },
-};

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

@@ -1,64 +0,0 @@
-import React from "react";
-import { render, screen } from "~/tests/testing-library";
-import userEvent from "@testing-library/user-event";
-import { mockDrawerNavigation } from "../drawer.mock";
-import { DrawerContent } from "./drawer-content";
-import { DrawerProvider } from "../drawer-provider/drawer.provider";
-
-describe("DrawerContent", () => {
-  const renderComponent = () => {
-    return render(
-      <DrawerProvider initialState="open">
-        <DrawerContent nav={mockDrawerNavigation} />
-      </DrawerProvider>,
-    );
-  };
-
-  it.each([[/section 2/i], [/section avatar/i]])(
-    "would render the title section %s",
-    (sectionTitle: RegExp) => {
-      renderComponent();
-
-      expect(screen.getByRole("heading", { name: sectionTitle })).toBeInTheDocument();
-    },
-  );
-
-  it.each([
-    [/item 1.1/i],
-    [/item 1.2/i],
-    [/item 1.3/i],
-    [/item 1.4/i],
-    [/item 2.1/i],
-    [/item 2.2/i],
-    [/avatar 1/i],
-    [/avatar 2/i],
-  ])("would render the item %s", (itemText: RegExp) => {
-    renderComponent();
-
-    expect(screen.getByRole("link", { name: itemText })).toBeInTheDocument();
-  });
-
-  it("should render the item 2.3 as a button", () => {
-    renderComponent();
-
-    expect(screen.getByRole("button", { name: /item 2.3/i })).toBeInTheDocument();
-  });
-
-  it("shouldn't render the collapsed 2.3 items by default", () => {
-    renderComponent();
-
-    expect(screen.queryByText(/item 2.3.1/i)).toBeFalsy();
-    expect(screen.queryByText(/item 2.3.2/i)).toBeFalsy();
-    expect(screen.queryByText(/item 2.3.3/i)).toBeFalsy();
-  });
-
-  it("should render the 2.3 teims if the user click the button", async () => {
-    renderComponent();
-
-    await userEvent.click(screen.getByText(/item 2.3/i));
-
-    expect(screen.getByText(/item 2.3.1/i)).toBeVisible();
-    expect(screen.getByText(/item 2.3.2/i)).toBeVisible();
-    expect(screen.getByText(/item 2.3.3/i)).toBeVisible();
-  });
-});

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

@@ -1,19 +0,0 @@
-import React from "react";
-import { DrawerSection } from "../drawer-section";
-import { DrawerContentComponent, DrawerContentProps } from "../drawer.types";
-
-/**
- * Content to be shown inside a navigation
- */
-export const DrawerContent: DrawerContentComponent = ({
-  nav: { items },
-  size = "medium",
-}: DrawerContentProps) => {
-  return (
-    <>
-      {items.map(({ title, items }, i) => (
-        <DrawerSection key={i} title={title} items={items} size={size} />
-      ))}
-    </>
-  );
-};

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

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

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

@@ -1,94 +0,0 @@
-import React from "react";
-import { Meta, StoryObj } from "@storybook/react";
-import { DrawerContent } from "./drawer-content";
-import { withMemoryRouter } from "~/storybook";
-import { Drawer, DrawerProvider } from "./drawer-provider";
-import { mockDrawerNavigation } from "./drawer.mock";
-import { ContentPlaceholder } from "../placeholders";
-import { DrawerState, DrawerVariant } from "./drawer.types";
-import { DrawerAppBar } from "./drawer-app-bar";
-import { DrawerMain } from "./drawer-main";
-
-interface DrawerDemoArgs {
-  initialState: DrawerState;
-  variant: DrawerVariant;
-  selectedItemId?: string;
-  underAppBar?: boolean;
-}
-
-export default {
-  title: "Components/Drawers/Drawer demo",
-  decorators: [withMemoryRouter()],
-  parameters: {
-    layout: "fullscreen",
-  },
-  render: ({ initialState, variant, selectedItemId, underAppBar }) => (
-    <DrawerProvider
-      initialState={initialState}
-      variant={variant}
-      selectedItemId={selectedItemId}
-      underAppBar={underAppBar}
-    >
-      <DrawerAppBar title="Drawer demo" />
-      <Drawer>
-        <DrawerContent nav={mockDrawerNavigation} />
-      </Drawer>
-      <DrawerMain>
-        <ContentPlaceholder p={3} />
-      </DrawerMain>
-    </DrawerProvider>
-  ),
-} satisfies Meta<DrawerDemoArgs>;
-type Story = StoryObj<DrawerDemoArgs>;
-
-export const Temporary: Story = {
-  args: {
-    variant: "temporary",
-    selectedItemId: "item2.3.2",
-  },
-};
-
-export const TemporaryUnder: Story = {
-  args: {
-    ...Temporary.args,
-    variant: "temporary",
-    underAppBar: true,
-  },
-};
-
-export const Persistent: Story = {
-  args: {
-    ...Temporary.args,
-    variant: "persistent",
-  },
-};
-
-export const PersistentUnder: Story = {
-  args: {
-    ...Temporary.args,
-    variant: "persistent",
-    underAppBar: true,
-  },
-};
-
-export const Clipped: Story = {
-  args: {
-    ...Temporary.args,
-    variant: "clipped",
-  },
-};
-
-export const ClippedUnder: Story = {
-  args: {
-    ...Temporary.args,
-    variant: "clipped",
-    underAppBar: true,
-  },
-};
-
-export const MiniDrawer: Story = {
-  args: {
-    ...Temporary.args,
-    variant: "mini",
-  },
-};