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

Commit 357e6f6

Browse files
jeremy-babylonlabsjeremy-babylonlabs
authored
feat: add menu component (#138)
* feat: menu component
1 parent e69131f commit 357e6f6

File tree

13 files changed

+695
-7
lines changed

13 files changed

+695
-7
lines changed

‎package-lock.json‎

Lines changed: 21 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@
5555
"@storybook/react": "^8.4.2",
5656
"@storybook/react-vite": "^8.4.2",
5757
"@storybook/test": "^8.4.2",
58-
"@types/lodash": "^4.17.13",
58+
"@types/lodash.throttle": "^4.1.9",
5959
"@types/react": "^18.3.12",
6060
"@types/react-dom": "^18.3.1",
6161
"@vitejs/plugin-react": "^4.3.3",
@@ -69,6 +69,7 @@
6969
"globals": "^15.11.0",
7070
"husky": "^9.1.7",
7171
"lint-staged": "^15.2.10",
72+
"lodash.throttle": "^4.1.1",
7273
"postcss": "^8.4.47",
7374
"prettier": "^3.3.3",
7475
"prettier-plugin-tailwindcss": "^0.6.8",
@@ -96,9 +97,9 @@
9697
"dependencies": {
9798
"@hookform/resolvers": "^3.9.1",
9899
"@popperjs/core": "^2.11.8",
100+
"decimal.js-light": "^2.5.1",
99101
"react-hook-form": "^7.54.0",
100102
"react-popper": "^2.3.0",
101-
"decimal.js-light": "^2.5.1",
102103
"tw-colors": "^3.3.2"
103104
}
104-
}
105+
}

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

Lines changed: 131 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,131 @@
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+
import { Text } from "../Text";
9+
10+
const meta: Meta<typeof Menu> = {
11+
title: "Components/Menu",
12+
component: Menu,
13+
tags: ["autodocs"],
14+
parameters: {
15+
docs: {
16+
description: {
17+
component: "A menu component with support for nested submenus.",
18+
},
19+
},
20+
},
21+
};
22+
23+
export default meta;
24+
25+
type Story = StoryObj<typeof meta>;
26+
27+
const SettingIcon = () => (
28+
<svg width="29" height="28" viewBox="0 0 29 28" fill="none" xmlns="http://www.w3.org/2000/svg">
29+
<path
30+
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"
31+
fill="#9E9E9E"
32+
/>
33+
</svg>
34+
);
35+
36+
const ThemeIcon = () => (
37+
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
38+
<rect width="40" height="40" rx="20" fill="#387085" fill-opacity="0.12" />
39+
<path
40+
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"
41+
fill="#387085"
42+
/>
43+
</svg>
44+
);
45+
46+
const ReportABugIcon = () => (
47+
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
48+
<rect width="40" height="40" rx="20" fill="#387085" fill-opacity="0.12" />
49+
<path
50+
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"
51+
fill="#387085"
52+
/>
53+
</svg>
54+
);
55+
56+
const ChevronRightIcon = () => (
57+
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
58+
<path d="M9 18L15 12L9 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
59+
</svg>
60+
);
61+
62+
export const Default: Story = {
63+
render: () => {
64+
const [selectedTheme, setSelectedTheme] = useState("auto");
65+
const themes = [
66+
{ id: "auto", label: "Auto", description: undefined },
67+
{ id: "light", label: "Light", description: undefined },
68+
{ id: "dark", label: "Dark", description: undefined },
69+
];
70+
return (
71+
<div className="p-4">
72+
<Menu
73+
trigger={
74+
<button>
75+
<SettingIcon />
76+
</button>
77+
}
78+
>
79+
<Text variant="body1" className="px-7 pb-6 text-accent-primary md:hidden">
80+
Settings
81+
</Text>
82+
<div className="mx-[21px] rounded-lg md:mx-0">
83+
<SubMenu
84+
name="Theme"
85+
description={selectedTheme}
86+
icon={<ThemeIcon />}
87+
suffix={<ChevronRightIcon />}
88+
className="bg-secondary-highlight md:bg-transparent"
89+
>
90+
<div className="flex flex-col">
91+
{themes.map((theme) => (
92+
<SubMenuItem
93+
key={theme.id}
94+
label={theme.label}
95+
description={theme?.description ?? ""}
96+
selected={selectedTheme === theme.id}
97+
onClick={() => {
98+
setSelectedTheme(theme.id);
99+
console.log(`Theme selected: ${theme.id}`);
100+
}}
101+
/>
102+
))}
103+
</div>
104+
</SubMenu>
105+
<MenuItem
106+
name="Report a bug"
107+
icon={<ReportABugIcon />}
108+
suffix={<ChevronRightIcon />}
109+
className="mb-4 bg-secondary-highlight md:mb-0 md:bg-transparent"
110+
/>
111+
<MenuItem
112+
name="Terms of Use"
113+
suffix={<ChevronRightIcon />}
114+
className="bg-secondary-highlight md:bg-transparent"
115+
/>
116+
<MenuItem
117+
name="Privacy Policy"
118+
suffix={<ChevronRightIcon />}
119+
className="bg-secondary-highlight md:bg-transparent"
120+
/>
121+
</div>
122+
<div className="my-4 flex justify-center">
123+
<Button className="!bg-[#D5FCE8] !text-black" variant="contained">
124+
Switch to BABY Staking
125+
</Button>
126+
</div>
127+
</Menu>
128+
</div>
129+
);
130+
},
131+
};

‎src/components/Menu/Menu.tsx‎

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
import React, { useState, useRef } from "react";
2+
import { twJoin } from "tailwind-merge";
3+
4+
import { Popover } from "../Popover";
5+
import { MenuProvider } from "./MenuContext";
6+
import { MenuDrawer } from "./MenuDrawer";
7+
import { useIsMobile } from "@/hooks/useIsMobile";
8+
import { Placement } from "@popperjs/core";
9+
10+
interface MenuProps {
11+
children: React.ReactNode;
12+
trigger?: React.ReactNode;
13+
open?: boolean;
14+
onOpenChange?: (open: boolean) => void;
15+
placement?: Placement;
16+
offset?: [number, number];
17+
className?: string;
18+
}
19+
20+
export const Menu: React.FC<MenuProps> = ({
21+
children,
22+
trigger,
23+
open: controlledOpen,
24+
onOpenChange,
25+
placement = "bottom-end",
26+
offset = [0, 8],
27+
className,
28+
}) => {
29+
const [internalOpen, setInternalOpen] = useState(false);
30+
const triggerRef = useRef<HTMLDivElement>(null);
31+
const isMobile = useIsMobile();
32+
33+
const isOpen = controlledOpen !== undefined ? controlledOpen : internalOpen;
34+
const setIsOpen = (open: boolean) => {
35+
if (controlledOpen === undefined) {
36+
setInternalOpen(open);
37+
}
38+
onOpenChange?.(open);
39+
};
40+
41+
const onClose = () => setIsOpen(false);
42+
43+
const menuContent = <div className="relative w-full overflow-hidden">{children}</div>;
44+
45+
const triggerElement = trigger || (
46+
<button className="rounded p-2 hover:bg-gray-100 dark:hover:bg-gray-800" onClick={() => setIsOpen(!isOpen)}>
47+
Menu
48+
</button>
49+
);
50+
51+
return (
52+
<MenuProvider value={{ isOpen, setIsOpen, onClose, isMobile }}>
53+
<div ref={triggerRef} className="inline-block">
54+
{React.isValidElement(triggerElement) &&
55+
React.cloneElement(triggerElement as React.ReactElement, {
56+
onClick: () => setIsOpen(!isOpen),
57+
"aria-haspopup": "true",
58+
"aria-expanded": isOpen,
59+
})}
60+
</div>
61+
62+
{isMobile ? (
63+
<MenuDrawer
64+
isOpen={isOpen}
65+
onClose={onClose}
66+
onBackdropClick={onClose}
67+
fullHeight={true}
68+
fullWidth={true}
69+
showBackButton={true}
70+
showDivider={false}
71+
>
72+
{menuContent}
73+
</MenuDrawer>
74+
) : (
75+
<Popover
76+
anchorEl={triggerRef.current}
77+
open={isOpen}
78+
offset={offset}
79+
placement={placement}
80+
onClickOutside={onClose}
81+
className={twJoin(
82+
"rounded-lg border border-[#38708533] bg-[#FFFFFF] shadow-lg dark:border-[#404040] dark:bg-[#252525]",
83+
"min-w-[294px]",
84+
className,
85+
)}
86+
>
87+
{menuContent}
88+
</Popover>
89+
)}
90+
</MenuProvider>
91+
);
92+
};

‎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+
};

0 commit comments

Comments
 (0)