palette story

frontend/app/element/palette.stories.tsx

@@ -1,11 +1,11 @@
 // Story for Palette Component
 import type { Meta, StoryObj } from "@storybook/react";
-import { useRef } from "react";
+import { useEffect, useRef, useState } from "react";
 import { Button } from "./button";
 import { Palette } from "./palette";
 
 const meta: Meta<typeof Palette> = {
-    title: "Components/Palette",
+    title: "Elements/Palette",
     component: Palette,
     args: {
         className: "custom-palette-class",
@@ -26,15 +26,53 @@ type Story = StoryObj<typeof Palette>;
 export const DefaultPalette: Story = {
     render: (args) => {
         const anchorRef = useRef<HTMLButtonElement>(null);
+        const scopeRef = useRef<HTMLDivElement>(null);
+        const [isMenuVisible, setIsMenuVisible] = useState(false);
+
+        const handleAnchorClick = () => {
+            setIsMenuVisible((prev) => !prev);
+        };
+
+        const handleClickOutside = (event: MouseEvent) => {
+            if (anchorRef.current && !anchorRef.current.contains(event.target as Node)) {
+                setIsMenuVisible(false);
+            }
+        };
+
+        useEffect(() => {
+            scopeRef?.current?.addEventListener("mousedown", handleClickOutside);
+            return () => {
+                scopeRef?.current?.removeEventListener("mousedown", handleClickOutside);
+            };
+        }, []);
 
         return (
-            <div style={{ padding: "50px" }}>
+            <div
-                <Button ref={anchorRef} className="ghost grey">
+                ref={scopeRef}
+                className="boundary"
+                style={{ padding: "20px", height: "300px", border: "2px solid black" }}
+            >
+                <Button ref={anchorRef} className="ghost grey" onClick={handleAnchorClick}>
                     <i className="fa-sharp fa-solid fa-face-smile"></i>
                 </Button>
-                <Palette anchorRef={anchorRef} {...args}>
+                {isMenuVisible && (
-                    <div>This is the Palette content.</div>
+                    <Palette anchorRef={anchorRef} scopeRef={scopeRef} {...args}>
-                </Palette>
+                        <div
+                            style={{
+                                opacity: ".3",
+                                display: "flex",
+                                alignItems: "center",
+                                flexDirection: "column",
+                                justifyContent: "center",
+                                width: "200px",
+                                height: "200px",
+                            }}
+                        >
+                            <i className="fa-sharp fa-solid fa-shelves-empty"></i>
+                            <span style={{ fontSize: "11px" }}>Empty</span>
+                        </div>
+                    </Palette>
+                )}
             </div>
         );
     },

frontend/app/element/palette.tsx

@@ -9,15 +9,17 @@ import { createPortal } from "react-dom";
 import "./palette.less";
 
 interface PaletteProps {
-    children: React.ReactNode;
-    className?: string;
     anchorRef: React.RefObject<HTMLElement>;
     scopeRef: React.RefObject<HTMLElement>;
+    children: React.ReactNode;
+    className?: string;
 }
 
 const Palette = memo(({ children, className, anchorRef, scopeRef }: PaletteProps) => {
     const paletteRef = useRef<HTMLDivElement | null>(null);
     const domRect = useDimensionsWithExistingRef(scopeRef);
+    const width = domRect?.width ?? 0;
+    const height = domRect?.height ?? 0;
 
     useEffect(() => {
         const paletteEl = paletteRef.current;
@@ -28,7 +30,7 @@ const Palette = memo(({ children, className, anchorRef, scopeRef }: PaletteProps
             paletteEl.style.top = `${bottom}px`;
             paletteEl.style.left = `${left}px`;
         }
-    }, [anchorRef]);
+    }, [width, height, anchorRef]);
 
     return createPortal(
         <div ref={paletteRef} className={clsx("palette", className)}>