feat(Drawer): add Drawer component

Author: huijiewei

packages/react-ui/src/components/drawer/drawer-content.tsx

@@ -0,0 +1,68 @@
+import { FloatingFocusManager } from "@floating-ui/react";
+import type { PrimitiveProps } from "../../primitives";
+import { usePopperAria } from "../../primitives/popper/popper-aria-context";
+import { PopperFloating } from "../../primitives/popper/popper-floating";
+import { usePopperTransition } from "../../primitives/popper/popper-transtion-context";
+import { tx } from "../../utils";
+import { useDialog } from "../dialog/dialog-context";
+import { useDrawer } from "./drawer-context";
+
+const placementStyles = {
+  start: {
+    base: "start-0 top-0 bottom-0",
+    open: "translate-x-none",
+    close: "-translate-x-full",
+  },
+  end: {
+    base: "end-0 top-0 bottom-0",
+    open: "translate-x-none",
+    close: "translate-x-full",
+  },
+  top: {
+    base: "top-0 left-0 right-0",
+    open: "translate-y-none",
+    close: "-translate-y-full",
+  },
+  bottom: {
+    base: "bottom-0 left-0 right-0",
+    open: "translate-y-none",
+    close: "translate-y-full",
+  },
+};
+
+export const DrawerContent = (props: PrimitiveProps<"div">) => {
+  const { children, className, ...rest } = props;
+
+  const { placement } = useDrawer();
+  const { labelId, descriptionId } = usePopperAria();
+  const { context, initialFocus, finalFocus } = useDialog();
+  const { status, mounted, duration } = usePopperTransition();
+
+  if (!mounted) {
+    return null;
+  }
+
+  const drawerStyle = placementStyles[placement];
+
+  return (
+    <div className={"z-55 fixed left-0 top-0 flex h-screen w-screen justify-center"}>
+      <FloatingFocusManager context={context} initialFocus={initialFocus} returnFocus={finalFocus}>
+        <PopperFloating
+          duration={duration}
+          className={tx(
+            "fixed flex flex-col shadow-md transition-[opacity,translate]",
+            drawerStyle.base,
+            !className?.split(" ").some((cls) => cls.startsWith("bg-")) && "bg-bg-normal",
+            status == "open" ? ["opacity-100", drawerStyle.open] : ["opacity-0", drawerStyle.close],
+            className,
+          )}
+          aria-labelledby={labelId}
+          aria-describedby={descriptionId}
+          {...rest}
+        >
+          {children}
+        </PopperFloating>
+      </FloatingFocusManager>
+    </div>
+  );
+};

packages/react-ui/src/components/drawer/drawer-context.ts

@@ -0,0 +1,15 @@
+import { createSafeContext } from "../../primitives";
+
+export type DrawerPlacement = "start" | "end" | "bottom" | "top";
+
+export type DrawerContextValue = {
+  /**
+   * 放置位置
+   * @default 'right'
+   */
+  placement: DrawerPlacement;
+};
+
+export const [DrawerContext, useDrawer] = createSafeContext<DrawerContextValue>({
+  name: "DrawerContext",
+});

packages/react-ui/src/components/drawer/drawer-root.tsx

@@ -0,0 +1,18 @@
+import type { PrimitiveProps } from "../../primitives";
+import { DialogRoot, type DialogRootProps } from "../dialog/dialog-root";
+import { DrawerContext, type DrawerContextValue } from "./drawer-context";
+
+export type DrawerRootProps = Omit<DialogRootProps, "scrollBehavior" | "preventScroll" | "placement" | "role"> &
+  Partial<DrawerContextValue>;
+
+export const DrawerRoot = (props: PrimitiveProps<"div", DrawerRootProps, "role">) => {
+  const { placement = "end", children, ...rest } = props;
+
+  return (
+    <DrawerContext value={{ placement }}>
+      <DialogRoot role={"dialog"} scrollBehavior={"inside"} preventScroll {...rest}>
+        {children}
+      </DialogRoot>
+    </DrawerContext>
+  );
+};

packages/react-ui/src/components/drawer/drawer.tsx

@@ -0,0 +1,26 @@
+import type { ComponentProps } from "react";
+import { PopperBackdrop } from "../../primitives/popper/popper-backdrop";
+import { PopperClose } from "../../primitives/popper/popper-close";
+import { PopperDescrition } from "../../primitives/popper/popper-description";
+import { PopperPortal } from "../../primitives/popper/popper-portal";
+import { PopperTitle } from "../../primitives/popper/popper-title";
+import { PopperTrigger } from "../../primitives/popper/popper-trigger";
+import { DrawerRoot, type DrawerRootProps } from "./drawer-root";
+
+export type DrawerProps = DrawerRootProps;
+
+export const Drawer = DrawerRoot;
+
+export const DrawerTrigger = (props: Omit<ComponentProps<typeof PopperTrigger>, "active">) => {
+  return <PopperTrigger active={false} {...props} />;
+};
+
+export const DrawerPortal = PopperPortal;
+
+export const DrawerBackdrop = PopperBackdrop;
+
+export { DrawerContent } from "./drawer-content";
+
+export const DrawerTitle = PopperTitle;
+export const DrawerDescription = PopperDescrition;
+export const DrawerClose = PopperClose;

packages/react-ui/src/components/drawer/tests/drawer.test.tsx

@@ -0,0 +1,79 @@
+import { cleanup, render, screen, waitFor } from "@testing-library/react";
+import { userEvent } from "@testing-library/user-event";
+import { afterEach, describe, expect, test, vi } from "vitest";
+import { axe } from "vitest-axe";
+import {
+  Drawer,
+  DrawerBackdrop,
+  DrawerClose,
+  DrawerContent,
+  DrawerDescription,
+  DrawerPortal,
+  DrawerTitle,
+  DrawerTrigger,
+  type DrawerProps,
+} from "../drawer";
+
+const ComponentUnderTest = (props: DrawerProps) => (
+  <Drawer {...props}>
+    <DrawerTrigger>Open Drawer</DrawerTrigger>
+    <DrawerPortal>
+      <DrawerBackdrop />
+      <DrawerContent>
+        <DrawerTitle>Drawer Title</DrawerTitle>
+        <DrawerDescription>Drawer Description</DrawerDescription>
+        <DrawerClose>Close</DrawerClose>
+      </DrawerContent>
+    </DrawerPortal>
+  </Drawer>
+);
+
+describe("Drawer", () => {
+  afterEach(() => {
+    cleanup();
+  });
+
+  test("should have no a11y violations", async () => {
+    const { container } = render(<ComponentUnderTest />);
+    const results = await axe(container);
+
+    expect(results).toHaveNoViolations();
+  });
+
+  test("should show drawer content when opened", async () => {
+    render(<ComponentUnderTest />);
+
+    await userEvent.click(screen.getByText("Open Drawer"));
+    expect(await screen.findByText("Drawer Title")).toBeVisible();
+
+    await userEvent.click(screen.getByText("Close"));
+
+    await waitFor(() => expect(screen.queryByText("Drawer Title")).not.toBeInTheDocument());
+  });
+
+  test("should invoke onOpenChange if drawer is closed", async () => {
+    const onOpenChange = vi.fn();
+    render(<ComponentUnderTest open onOpenChange={onOpenChange} />);
+
+    await userEvent.click(screen.getByText("Close"));
+    expect(onOpenChange).toHaveBeenCalledTimes(1);
+  });
+
+  test("should be fully controlled (true)", async () => {
+    render(<ComponentUnderTest open={true} />);
+
+    expect(screen.queryByRole("button", { name: "Close" })).toBeVisible();
+
+    await userEvent.click(screen.getByRole("button", { name: "Close" }));
+    expect(screen.queryByRole("button", { name: "Close" })).toBeVisible();
+  });
+
+  test("should be fully controlled (false)", async () => {
+    render(<ComponentUnderTest open={false} />);
+
+    expect(screen.queryByRole("button", { name: "Close" })).not.toBeInTheDocument();
+
+    await userEvent.click(screen.getByRole("button", { name: "Open Drawer" }));
+    expect(screen.queryByRole("button", { name: "Close" })).not.toBeInTheDocument();
+  });
+});

packages/react-ui/src/components/index.ts

@@ -19,6 +19,7 @@ export * from "./context-menu/context-menu-item";
 export * from "./context-menu/context-menu-radio-group";
 export * from "./context-menu/context-menu-radio-item";
 export * from "./dialog/dialog";
+export * from "./drawer/drawer";
 export * from "./dropdown-menu/dropdown-menu";
 export * from "./dropdown-menu/dropdown-menu-checkbox-item";
 export * from "./dropdown-menu/dropdown-menu-item";