Skip to content
This repository was archived by the owner on Jul 20, 2025. It is now read-only.

Commit f7a0f57

Browse files
jeremy-babylonlabsjeremy-babylonlabs
committed
feat: menu component
1 parent 14c2143 commit f7a0f57

File tree

9 files changed

+592
-0
lines changed

9 files changed

+592
-0
lines changed

‎src/components/Menu/Menu.stories.tsx‎

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
import type { Meta, StoryObj } from "@storybook/react";
2+
import { useState } from "react";
3+
import { Menu } from "./Menu";
4+
import { MenuItem } from "./MenuItem";
5+
import { SubMenu } from "./SubMenu";
6+
import { SubMenuItem } from "./SubMenuItem";
7+
import { Button } from "../Button";
8+
9+
const meta: Meta<typeof Menu> = {
10+
title: "Components/Menu",
11+
component: Menu,
12+
tags: ["autodocs"],
13+
parameters: {
14+
docs: {
15+
description: {
16+
component: "A menu component with support for nested submenus.",
17+
},
18+
},
19+
},
20+
};
21+
22+
export default meta;
23+
24+
type Story = StoryObj<typeof meta>;
25+
26+
const SettingIcon = () => (
27+
<svg width="29" height="28" viewBox="0 0 29 28" fill="none" xmlns="http://www.w3.org/2000/svg">
28+
<path
29+
d="M24.9127 15.3708C24.9711 14.9333 25.0002 14.4812 25.0002 14C25.0002 13.5333 24.9711 13.0667 24.8982 12.6292L27.8586 10.325C28.1211 10.1208 28.194 9.72708 28.0336 9.43542L25.2336 4.59375C25.0586 4.27292 24.694 4.17083 24.3732 4.27292L20.8877 5.67292C20.1586 5.11875 19.3857 4.65208 18.5252 4.30208L18.0002 0.597916C17.9419 0.247916 17.6502 0 17.3002 0H11.7002C11.3502 0 11.0732 0.247916 11.0148 0.597916L10.4898 4.30208C9.62941 4.65208 8.84191 5.13333 8.12732 5.67292L4.64191 4.27292C4.32107 4.15625 3.95649 4.27292 3.78149 4.59375L0.996075 9.43542C0.821075 9.74167 0.879408 10.1208 1.17107 10.325L4.13149 12.6292C4.05857 13.0667 4.00024 13.5479 4.00024 14C4.00024 14.4521 4.02941 14.9333 4.10232 15.3708L1.14191 17.675C0.879408 17.8792 0.806491 18.2729 0.966908 18.5646L3.76691 23.4062C3.94191 23.7271 4.30649 23.8292 4.62732 23.7271L8.11274 22.3271C8.84191 22.8812 9.61482 23.3479 10.4752 23.6979L11.0002 27.4021C11.0732 27.7521 11.3502 28 11.7002 28H17.3002C17.6502 28 17.9419 27.7521 17.9857 27.4021L18.5107 23.6979C19.3711 23.3479 20.1586 22.8812 20.8732 22.3271L24.3586 23.7271C24.6794 23.8438 25.044 23.7271 25.219 23.4062L28.019 18.5646C28.194 18.2437 28.1211 17.8792 27.844 17.675L24.9127 15.3708ZM14.5002 19.25C11.6127 19.25 9.25024 16.8875 9.25024 14C9.25024 11.1125 11.6127 8.75 14.5002 8.75C17.3877 8.75 19.7502 11.1125 19.7502 14C19.7502 16.8875 17.3877 19.25 14.5002 19.25Z"
30+
fill="#9E9E9E"
31+
/>
32+
</svg>
33+
);
34+
35+
const ThemeIcon = () => (
36+
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
37+
<rect width="40" height="40" rx="20" fill="#387085" fill-opacity="0.12" />
38+
<path
39+
d="M20 30C25.52 30 30 25.52 30 20C30 14.48 25.52 10 20 10C14.48 10 10 14.48 10 20C10 25.52 14.48 30 20 30ZM21 12.07C24.94 12.56 28 15.92 28 20C28 24.08 24.95 27.44 21 27.93V12.07Z"
40+
fill="#387085"
41+
/>
42+
</svg>
43+
);
44+
45+
const ReportABugIcon = () => (
46+
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
47+
<rect width="40" height="40" rx="20" fill="#387085" fill-opacity="0.12" />
48+
<path
49+
d="M23.73 11H16.27L11 16.27V23.73L16.27 29H23.73L29 23.73V16.27L23.73 11ZM20 25.3C19.28 25.3 18.7 24.72 18.7 24C18.7 23.28 19.28 22.7 20 22.7C20.72 22.7 21.3 23.28 21.3 24C21.3 24.72 20.72 25.3 20 25.3ZM21 21H19V15H21V21Z"
50+
fill="#387085"
51+
/>
52+
</svg>
53+
);
54+
55+
const ChevronRightIcon = () => (
56+
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
57+
<path d="M9 18L15 12L9 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
58+
</svg>
59+
);
60+
61+
export const Default: Story = {
62+
render: () => {
63+
const [selectedTheme, setSelectedTheme] = useState("auto");
64+
const themes = [
65+
{ id: "auto", label: "Auto", description: "Follow system preference" },
66+
{ id: "light", label: "Light", description: "Always use light theme" },
67+
{ id: "dark", label: "Dark", description: "Always use dark theme" },
68+
];
69+
return (
70+
<div className="p-4">
71+
<Menu
72+
trigger={
73+
<button>
74+
<SettingIcon />
75+
</button>
76+
}
77+
>
78+
<SubMenu name="Theme" description={selectedTheme} icon={<ThemeIcon />} suffix={<ChevronRightIcon />}>
79+
<div className="flex flex-col">
80+
{themes.map((theme) => (
81+
<SubMenuItem
82+
key={theme.id}
83+
label={theme.label}
84+
description={theme.description}
85+
selected={selectedTheme === theme.id}
86+
onClick={() => {
87+
setSelectedTheme(theme.id);
88+
console.log(`Theme selected: ${theme.id}`);
89+
}}
90+
/>
91+
))}
92+
</div>
93+
</SubMenu>
94+
<MenuItem name="Report a bug" icon={<ReportABugIcon />} suffix={<ChevronRightIcon />} />
95+
<MenuItem name="Terms of Use" suffix={<ChevronRightIcon />} />
96+
<MenuItem name="Privacy Policy" suffix={<ChevronRightIcon />} />
97+
<div className="my-4 flex justify-center">
98+
<Button className="!bg-[#D5FCE8] !text-black" variant="contained">
99+
Switch to BABY Staking
100+
</Button>
101+
</div>
102+
</Menu>
103+
</div>
104+
);
105+
},
106+
};

‎src/components/Menu/Menu.tsx‎

Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
import React, { useState, useRef, useEffect } from "react";
2+
import { twJoin } from "tailwind-merge";
3+
4+
import { MobileDialog } from "../Dialog";
5+
import { Popover } from "../Popover";
6+
import { MenuProvider } from "./MenuContext";
7+
import { Placement } from "@popperjs/core";
8+
9+
interface MenuProps {
10+
children: React.ReactNode;
11+
trigger?: React.ReactNode;
12+
open?: boolean;
13+
onOpenChange?: (open: boolean) => void;
14+
placement?: Placement;
15+
offset?: [number, number];
16+
className?: string;
17+
}
18+
19+
export const Menu: React.FC<MenuProps> = ({
20+
children,
21+
trigger,
22+
open: controlledOpen,
23+
onOpenChange,
24+
placement = "bottom-end",
25+
offset = [0, 8],
26+
className,
27+
}) => {
28+
const [internalOpen, setInternalOpen] = useState(false);
29+
const triggerRef = useRef<HTMLDivElement>(null);
30+
const [isMobile, setIsMobile] = useState(false);
31+
32+
const isOpen = controlledOpen !== undefined ? controlledOpen : internalOpen;
33+
const setIsOpen = (open: boolean) => {
34+
if (controlledOpen === undefined) {
35+
setInternalOpen(open);
36+
}
37+
onOpenChange?.(open);
38+
};
39+
40+
const onClose = () => setIsOpen(false);
41+
42+
// Check if mobile view - we'll need to use the same breakpoint logic as simple-staking
43+
useEffect(() => {
44+
const checkMobile = () => {
45+
setIsMobile(window.innerWidth < 768);
46+
};
47+
48+
checkMobile();
49+
window.addEventListener("resize", checkMobile);
50+
return () => window.removeEventListener("resize", checkMobile);
51+
}, []);
52+
53+
// Handle escape key
54+
useEffect(() => {
55+
const handleEscape = (e: KeyboardEvent) => {
56+
if (e.key === "Escape" && isOpen) {
57+
onClose();
58+
}
59+
};
60+
61+
if (isOpen) {
62+
document.addEventListener("keydown", handleEscape);
63+
return () => document.removeEventListener("keydown", handleEscape);
64+
}
65+
}, [isOpen]);
66+
67+
const menuContent = <div className="relative w-full overflow-hidden">{children}</div>;
68+
69+
const triggerElement = trigger || (
70+
<button className="rounded p-2 hover:bg-gray-100 dark:hover:bg-gray-800" onClick={() => setIsOpen(!isOpen)}>
71+
Menu
72+
</button>
73+
);
74+
75+
return (
76+
<MenuProvider value={{ isOpen, setIsOpen, onClose, isMobile }}>
77+
<div ref={triggerRef} className="inline-block">
78+
{React.isValidElement(triggerElement) &&
79+
React.cloneElement(triggerElement as React.ReactElement, {
80+
onClick: () => setIsOpen(!isOpen),
81+
"aria-haspopup": "true",
82+
"aria-expanded": isOpen,
83+
})}
84+
</div>
85+
86+
{isMobile ? (
87+
<MobileDialog
88+
open={isOpen}
89+
onClose={onClose}
90+
className="bg-[#FFFFFF] p-0 text-accent-primary dark:bg-[#252525]"
91+
>
92+
{menuContent}
93+
</MobileDialog>
94+
) : (
95+
<Popover
96+
anchorEl={triggerRef.current}
97+
open={isOpen}
98+
offset={offset}
99+
placement={placement}
100+
onClickOutside={onClose}
101+
className={twJoin(
102+
"rounded-lg border border-[#38708533] bg-[#FFFFFF] shadow-lg dark:border-[#404040] dark:bg-[#252525]",
103+
"min-w-[294px]",
104+
className,
105+
)}
106+
>
107+
{menuContent}
108+
</Popover>
109+
)}
110+
</MenuProvider>
111+
);
112+
};

‎src/components/Menu/MenuContext.tsx‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import React, { createContext, useContext } from "react";
2+
3+
interface MenuContextValue {
4+
isOpen: boolean;
5+
setIsOpen: (open: boolean) => void;
6+
onClose: () => void;
7+
isMobile: boolean;
8+
}
9+
10+
const MenuContext = createContext<MenuContextValue | undefined>(undefined);
11+
12+
export const useMenuContext = () => {
13+
const context = useContext(MenuContext);
14+
if (!context && process.env.NODE_ENV === "development") {
15+
console.warn("useMenuContext must be used within a Menu component");
16+
}
17+
return context;
18+
};
19+
20+
export const MenuProvider: React.FC<{
21+
children: React.ReactNode;
22+
value: MenuContextValue;
23+
}> = ({ children, value }) => {
24+
return <MenuContext.Provider value={value}>{children}</MenuContext.Provider>;
25+
};

‎src/components/Menu/MenuDrawer.tsx‎

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
import React from "react";
2+
import { twJoin } from "tailwind-merge";
3+
4+
interface MenuDrawerProps {
5+
isOpen: boolean;
6+
onClose: () => void;
7+
title: string;
8+
children: React.ReactNode;
9+
className?: string;
10+
titleAlign?: "left" | "center" | "right";
11+
backIcon?: React.ReactNode;
12+
}
13+
14+
export const MenuDrawer: React.FC<MenuDrawerProps> = ({
15+
isOpen,
16+
onClose,
17+
title,
18+
children,
19+
className = "",
20+
titleAlign = "left",
21+
backIcon,
22+
}) => {
23+
const titleAlignment = {
24+
left: "justify-start",
25+
center: "justify-center",
26+
right: "justify-end",
27+
};
28+
29+
return (
30+
<div
31+
className={twJoin(
32+
"absolute inset-0 transform rounded-lg transition-transform duration-300 ease-in-out",
33+
"bg-[#FFFFFF] dark:bg-[#252525]",
34+
isOpen ? "translate-x-0" : "translate-x-full",
35+
className,
36+
)}
37+
>
38+
{/* Header */}
39+
<div
40+
className={twJoin(
41+
"flex items-center gap-3 border-b border-[#38708533] p-4 dark:border-[#404040]",
42+
titleAlignment[titleAlign],
43+
)}
44+
>
45+
<button
46+
onClick={onClose}
47+
className="flex h-8 w-8 items-center justify-center rounded transition-colors hover:bg-accent-secondary/10"
48+
aria-label="Go back"
49+
>
50+
{backIcon || (
51+
<svg
52+
width="16"
53+
height="16"
54+
viewBox="0 0 16 16"
55+
fill="none"
56+
xmlns="http://www.w3.org/2000/svg"
57+
className="text-accent-primary"
58+
>
59+
<path
60+
d="M10 12L6 8L10 4"
61+
stroke="currentColor"
62+
strokeWidth="2"
63+
strokeLinecap="round"
64+
strokeLinejoin="round"
65+
/>
66+
</svg>
67+
)}
68+
</button>
69+
<h3 className="text-sm font-medium text-accent-primary">{title}</h3>
70+
</div>
71+
72+
<div className="flex-1 overflow-y-auto">{children}</div>
73+
</div>
74+
);
75+
};

0 commit comments

Comments
 (0)