dst-rg 1.0.0

package/src/components/Dropdown/_.stories.tsx

@@ -0,0 +1,180 @@
+import { Meta, StoryFn } from "@storybook/react-vite";
+import { useState } from "react";
+import { Dropdown } from ".";
+import { DropdownWrapperProps } from "./_.types";
+
+export default {
+  title: "Components/Dropdown",
+  component: Dropdown,
+  tags: ["autodocs"],
+  argTypes: {
+    direction: {
+      control: { type: "radio" },
+      options: ["down", "up", "left", "right"],
+    },
+    alignment: {
+      control: { type: "radio" },
+      options: ["left", "right", "top", "bottom"],
+    },
+    autoAdjust: {
+      control: { type: "boolean" },
+    },
+    dropDownClassName: {
+      control: { type: "text" },
+    },
+    open: {
+      control: { type: "boolean" },
+    },
+  },
+} as Meta<DropdownWrapperProps>;
+
+// A small menu to display in the dropdown
+const MenuItems = () => (
+  <ul className="space-y-2 text-sm text-gray-700">
+    <li className="hover:bg-gray-100 px-2 py-1 rounded">Profile</li>
+    <li className="hover:bg-gray-100 px-2 py-1 rounded">Settings</li>
+    <li className="hover:bg-gray-100 px-2 py-1 rounded">Logout</li>
+  </ul>
+);
+
+const Template: StoryFn<DropdownWrapperProps> = (args) => (
+  <div className="flex justify-center items-center h-64 w-full">
+    <Dropdown {...args}>
+      <MenuItems />
+    </Dropdown>
+  </div>
+);
+
+export const Default = Template.bind({});
+Default.args = {
+  toggleBtn: { children: <>Controlled Menu</> },
+  direction: "down",
+  alignment: "right",
+  autoAdjust: true,
+  dropDownClassName: "w-48 p-4",
+};
+
+export const Upwards = Template.bind({});
+Upwards.args = {
+  ...Default.args,
+  direction: "up",
+};
+
+export const LeftDirection = Template.bind({});
+LeftDirection.args = {
+  ...Default.args,
+  direction: "left",
+  alignment: "top",
+};
+
+export const RightDirection = Template.bind({});
+RightDirection.args = {
+  ...Default.args,
+  direction: "right",
+  alignment: "top",
+};
+
+export const LeftDirectionBottom = Template.bind({});
+LeftDirectionBottom.args = {
+  ...Default.args,
+  direction: "left",
+  alignment: "bottom",
+};
+
+export const RightDirectionBottom = Template.bind({});
+RightDirectionBottom.args = {
+  ...Default.args,
+  direction: "right",
+  alignment: "bottom",
+};
+
+export const AlignLeft = Template.bind({});
+AlignLeft.args = {
+  ...Default.args,
+  alignment: "left",
+};
+
+export const AlignTop = Template.bind({});
+AlignTop.args = {
+  ...Default.args,
+  direction: "down",
+  alignment: "top",
+};
+
+export const AlignBottom = Template.bind({});
+AlignBottom.args = {
+  ...Default.args,
+  direction: "down",
+  alignment: "bottom",
+};
+
+export const NoAutoAdjust = Template.bind({});
+NoAutoAdjust.args = {
+  ...Default.args,
+  autoAdjust: false,
+};
+
+export const AllDirections = () => {
+  const [openStates, setOpenStates] = useState({
+    down: false,
+    up: false,
+    left: false,
+    right: false,
+  });
+
+  return (
+    <div className="grid grid-cols-2 gap-8 p-8 h-96">
+      <div className="flex justify-center items-center">
+        <Dropdown
+          toggleBtn={{ children: <span>Down</span> }}
+          open={openStates.down}
+          onOpenChange={(open) => setOpenStates(prev => ({ ...prev, down: open }))}
+          direction="down"
+          alignment="right"
+          dropDownClassName="w-48 p-4"
+        >
+          <MenuItems />
+        </Dropdown>
+      </div>
+
+      <div className="flex justify-center items-center">
+        <Dropdown
+          toggleBtn={{ children: <span>Up</span> }}
+          open={openStates.up}
+          onOpenChange={(open) => setOpenStates(prev => ({ ...prev, up: open }))}
+          direction="up"
+          alignment="right"
+          dropDownClassName="w-48 p-4"
+        >
+          <MenuItems />
+        </Dropdown>
+      </div>
+
+      <div className="flex justify-center items-center">
+        <Dropdown
+          toggleBtn={{ children: <span>Left</span> }}
+          open={openStates.left}
+          onOpenChange={(open) => setOpenStates(prev => ({ ...prev, left: open }))}
+          direction="left"
+          alignment="top"
+          dropDownClassName="w-48 p-4"
+        >
+          <MenuItems />
+        </Dropdown>
+      </div>
+
+      <div className="flex justify-center items-center">
+        <Dropdown
+          toggleBtn={{ children: <span>Right</span> }}
+          open={openStates.right}
+          onOpenChange={(open) => setOpenStates(prev => ({ ...prev, right: open }))}
+          direction="right"
+          alignment="top"
+          dropDownClassName="w-48 p-4"
+        >
+          <MenuItems />
+        </Dropdown>
+      </div>
+    </div>
+  );
+};

package/src/components/Dropdown/_.style.ts

@@ -0,0 +1,108 @@
+import { cva } from "class-variance-authority";
+
+export const dropdownPlacementVariants = cva("", {
+  variants: {
+    direction: {
+      down: "",
+      up: "",
+      left: "",
+      right: "",
+    },
+    alignment: {
+      left: "",
+      right: "",
+      top: "",
+      bottom: "",
+    },
+  },
+  compoundVariants: [
+    // Down direction
+    {
+      direction: "down",
+      alignment: "left",
+      class: "origin-top-right right-0 mt-2",
+    },
+    {
+      direction: "down",
+      alignment: "right",
+      class: "origin-top-left left-0 mt-2",
+    },
+    {
+      direction: "down",
+      alignment: "top",
+      class: "origin-top-center left-1/2 -translate-x-1/2 mt-2",
+    },
+    {
+      direction: "down",
+      alignment: "bottom",
+      class: "origin-top-center left-1/2 -translate-x-1/2 mt-2",
+    },
+    // Up direction
+    {
+      direction: "up",
+      alignment: "left",
+      class: "origin-bottom-right right-0 bottom-full mb-2",
+    },
+    {
+      direction: "up",
+      alignment: "right",
+      class: "origin-bottom-left left-0 bottom-full mb-2",
+    },
+    {
+      direction: "up",
+      alignment: "top",
+      class: "origin-bottom-center left-1/2 -translate-x-1/2 bottom-full mb-2",
+    },
+    {
+      direction: "up",
+      alignment: "bottom",
+      class: "origin-bottom-center left-1/2 -translate-x-1/2 bottom-full mb-2",
+    },
+    // Left direction
+    {
+      direction: "left",
+      alignment: "top",
+      class: "origin-top-right top-0 right-full mr-2",
+    },
+    {
+      direction: "left",
+      alignment: "bottom",
+      class: "origin-bottom-right bottom-0 right-full mr-2",
+    },
+    {
+      direction: "left",
+      alignment: "left",
+      class: "origin-center right-full mr-2 top-1/2 -translate-y-1/2",
+    },
+    {
+      direction: "left",
+      alignment: "right",
+      class: "origin-center right-full mr-2 top-1/2 -translate-y-1/2",
+    },
+    // Right direction
+    {
+      direction: "right",
+      alignment: "top",
+      class: "origin-top-left top-0 left-full ml-2",
+    },
+    {
+      direction: "right",
+      alignment: "bottom",
+      class: "origin-bottom-left bottom-0 left-full ml-2",
+    },
+    {
+      direction: "right",
+      alignment: "left",
+      class: "origin-center left-full ml-2 top-1/2 -translate-y-1/2",
+    },
+    {
+      direction: "right",
+      alignment: "right",
+      class: "origin-center left-full ml-2 top-1/2 -translate-y-1/2",
+    },
+  ],
+  defaultVariants: {
+    direction: "down",
+    alignment: "right",
+  },
+});

package/src/components/Dropdown/_.test.tsx

@@ -0,0 +1,334 @@
+import { cleanup, fireEvent, render } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { Dropdown } from ".";
+import { dropdownPlacementVariants } from "./_.style";
+
+vi.mock("@/lib/zIndexUtils", () => ({
+  getBackdropZIndex: vi.fn(() => 1000),
+}));
+
+describe("Dropdown component", () => {
+  beforeEach(() => {
+    Object.defineProperty(window, "innerHeight", {
+      value: 600,
+      writable: true,
+      configurable: true,
+    });
+  });
+
+  afterEach(() => {
+    cleanup();
+    vi.clearAllMocks();
+  });
+
+  it("renders the toggle button and does not show children initially", () => {
+    const { queryByText } = render(
+      <Dropdown toggleBtn={{ children: <span>Open</span> }}>Hello!</Dropdown>
+    );
+    expect(queryByText("Open")).toBeTruthy();
+    expect(queryByText("Hello!")).toBeNull();
+  });
+
+  it("toggles open state when clicked (uncontrolled)", () => {
+    const { getByText, queryByText } = render(
+      <Dropdown toggleBtn={{ children: <span>Menu</span> }}>
+        <div>Content</div>
+      </Dropdown>
+    );
+    const btn = getByText("Menu");
+    fireEvent.click(btn);
+    expect(queryByText("Content")).toBeTruthy();
+    fireEvent.click(btn);
+    expect(queryByText("Content")).toBeNull();
+  });
+
+  it("calls onOpenChange when controlled", () => {
+    const handleOpenChange = vi.fn();
+    const { getByText } = render(
+      <Dropdown
+        toggleBtn={{ children: <span>Ctrl</span> }}
+        open={false}
+        onOpenChange={handleOpenChange}
+      >
+        <div>XYZ</div>
+      </Dropdown>
+    );
+    fireEvent.click(getByText("Ctrl"));
+    expect(handleOpenChange).toHaveBeenCalledWith(true);
+  });
+
+  it("closes when clicking outside", () => {
+    const { getByText, queryByText, container } = render(
+      <div data-testid="outer">
+        <Dropdown toggleBtn={{ children: <span>Outside</span> }}>
+          <div>Inside</div>
+        </Dropdown>
+      </div>
+    );
+    const btn = getByText("Outside");
+    fireEvent.click(btn);
+    expect(queryByText("Inside")).toBeTruthy();
+
+    fireEvent.mouseDown(container.querySelector('[data-testid="outer"]')!);
+    expect(queryByText("Inside")).toBeNull();
+  });
+
+  it("respects direction prop when autoAdjust is false", () => {
+    const { getByText, container } = render(
+      <Dropdown
+        toggleBtn={{ children: <span>Dir</span> }}
+        direction="up"
+        alignment="left"
+        autoAdjust={false}
+        dropDownClassName="my-dd"
+      >
+        <div>UpContent</div>
+      </Dropdown>
+    );
+    fireEvent.click(getByText("Dir"));
+    const dd = container.querySelector(".my-dd")!;
+    expect(dd.className).toContain("bottom-full");
+  });
+
+  it("supports left direction", () => {
+    const { getByText, container } = render(
+      <Dropdown
+        toggleBtn={{ children: <span>Left</span> }}
+        direction="left"
+        alignment="top"
+        autoAdjust={false}
+        dropDownClassName="my-dd"
+      >
+        <div>LeftContent</div>
+      </Dropdown>
+    );
+    fireEvent.click(getByText("Left"));
+    const dd = container.querySelector(".my-dd")!;
+    expect(dd.className).toContain("right-full");
+  });
+
+  it("supports right direction", () => {
+    const { getByText, container } = render(
+      <Dropdown
+        toggleBtn={{ children: <span>Right</span> }}
+        direction="right"
+        alignment="top"
+        autoAdjust={false}
+        dropDownClassName="my-dd"
+      >
+        <div>RightContent</div>
+      </Dropdown>
+    );
+    fireEvent.click(getByText("Right"));
+    const dd = container.querySelector(".my-dd")!;
+    expect(dd.className).toContain("left-full");
+  });
+
+  it("supports all alignment options", () => {
+    const alignments = ["left", "right", "top", "bottom"] as const;
+
+    alignments.forEach(alignment => {
+      const { getByText, container } = render(
+        <Dropdown
+          toggleBtn={{ children: <span>Align</span> }}
+          direction="down"
+          alignment={alignment}
+          autoAdjust={false}
+          dropDownClassName="my-dd"
+        >
+          <div>AlignContent</div>
+        </Dropdown>
+      );
+      fireEvent.click(getByText("Align"));
+      const dd = container.querySelector(".my-dd")!;
+      expect(dd.className).toContain("origin-");
+      cleanup();
+    });
+  });
+
+  it("autoAdjust flips placement based on space", () => {
+    Object.defineProperty(window, "innerHeight", {
+      value: 100,
+      writable: true,
+      configurable: true,
+    });
+    const { getByText, container } = render(
+      <Dropdown
+        toggleBtn={{ children: <span>Auto</span> }}
+        alignment="right"
+        autoAdjust
+      >
+        <div>AutoContent</div>
+      </Dropdown>
+    );
+    fireEvent.click(getByText("Auto"));
+    const dd = container.querySelector("[class*='origin']")!;
+    expect(dd.className).toContain("origin-top-left ");
+  });
+
+  it("autoAdjust works for horizontal directions", () => {
+    Object.defineProperty(window, "innerWidth", {
+      value: 100,
+      writable: true,
+      configurable: true,
+    });
+    const { getByText, container } = render(
+      <Dropdown
+        toggleBtn={{ children: <span>Auto</span> }}
+        direction="right"
+        alignment="top"
+        autoAdjust
+      >
+        <div>AutoContent</div>
+      </Dropdown>
+    );
+    fireEvent.click(getByText("Auto"));
+    const dd = container.querySelector("[class*='origin']")!;
+    expect(dd.className).toContain("origin-");
+  });
+
+  it("falls back to estHeight = 200 when dropdownRef is null", () => {
+    Object.defineProperty(window, "innerHeight", {
+      value: 100,
+      writable: true,
+      configurable: true,
+    });
+
+    const { getByText, container } = render(
+      <Dropdown toggleBtn={{ children: <span>Fallback</span> }} autoAdjust>
+        <div>FallbackContent</div>
+      </Dropdown>
+    );
+
+    const wrapper = container.querySelector("div.relative.inline-block")!;
+    wrapper.getBoundingClientRect = () =>
+    ({
+      top: 90,
+      bottom: 90,
+      height: 10,
+      left: 0,
+      right: 0,
+      width: 0,
+      x: 0,
+      y: 0,
+      toJSON: () => { },
+    } as DOMRect);
+
+    const dropdown = container.querySelector("div.absolute");
+    if (dropdown) {
+      dropdown.remove();
+    }
+
+    fireEvent.click(getByText("Fallback"));
+
+    const dd = container.querySelector("div.absolute");
+
+    // Since space is limited, it should flip to "up" direction
+    const expectedClass = dropdownPlacementVariants({
+      direction: "up",
+      alignment: "right",
+    });
+
+    expect(dd?.className).toContain(expectedClass);
+  });
+});
+
+describe("placement 'up' branch in useLayoutEffect", () => {
+  beforeEach(() => {
+    Object.defineProperty(HTMLDivElement.prototype, "offsetHeight", {
+      configurable: true,
+      get: () => 200,
+    });
+    Object.defineProperty(HTMLDivElement.prototype, "offsetWidth", {
+      configurable: true,
+      get: () => 200,
+    });
+    Object.defineProperty(window, "innerHeight", {
+      configurable: true,
+      writable: true,
+      value: 150,
+    });
+    Object.defineProperty(window, "innerWidth", {
+      configurable: true,
+      writable: true,
+      value: 150,
+    });
+  });
+
+  afterEach(() => {
+    delete (HTMLDivElement.prototype as unknown as { offsetHeight?: number })
+      .offsetHeight;
+    delete (HTMLDivElement.prototype as unknown as { offsetWidth?: number })
+      .offsetWidth;
+    delete (window as unknown as { innerHeight?: number }).innerHeight;
+    delete (window as unknown as { innerWidth?: number }).innerWidth;
+    cleanup();
+  });
+
+  it("sets placement='up' when spaceBelow < estHeight && top > spaceBelow", () => {
+    const { getByText, container } = render(
+      <Dropdown
+        toggleBtn={{
+          children: <span>Trigger</span>,
+        }}
+        autoAdjust
+      >
+        <div>MenuContent</div>
+      </Dropdown>
+    );
+
+    const wrapper = container.querySelector("div.relative.inline-block")!;
+    wrapper.getBoundingClientRect = () =>
+    ({
+      top: 100,
+      bottom: 100,
+      left: 0,
+      right: 0,
+      width: 0,
+      height: 0,
+      x: 0,
+      y: 0,
+      toJSON: () => { },
+    } as DOMRect);
+
+    fireEvent.click(getByText("Trigger"));
+
+    const dd = container.querySelector("div.absolute")!;
+    expect(dd.className).toContain("origin-bottom-left");
+    expect(dd.className).toContain("bottom-full");
+  });
+
+  it("sets placement='left' when spaceRight < estWidth && left > spaceRight", () => {
+    const { getByText, container } = render(
+      <Dropdown
+        toggleBtn={{
+          children: <span>Trigger</span>,
+        }}
+        direction="right"
+        autoAdjust
+      >
+        <div>MenuContent</div>
+      </Dropdown>
+    );
+
+    const wrapper = container.querySelector("div.relative.inline-block")!;
+    wrapper.getBoundingClientRect = () =>
+    ({
+      top: 0,
+      bottom: 0,
+      left: 100,
+      right: 100,
+      width: 0,
+      height: 0,
+      x: 0,
+      y: 0,
+      toJSON: () => { },
+    } as DOMRect);
+
+    fireEvent.click(getByText("Trigger"));
+
+    const dd = container.querySelector("div.absolute")!;
+    expect(dd.className).toContain("origin-");
+    expect(dd.className).toContain("right-full");
+  });
+});

package/src/components/Dropdown/_.types.ts

@@ -0,0 +1,12 @@
+import { ButtonProps } from "../Button/_.types";
+
+export interface DropdownWrapperProps {
+  children: React.ReactNode;
+  toggleBtn: ButtonProps;
+  direction?: "down" | "up" | "left" | "right";
+  alignment?: "left" | "right" | "top" | "bottom";
+  dropDownClassName?: string;
+  autoAdjust?: boolean;
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+}