Rename palette to popover

frontend/app/element/emojipalette.tsx

@@ -6,9 +6,9 @@ import clsx from "clsx";
 import { memo, useState } from "react";
 import { Button } from "./button";
 import { Input, InputGroup, InputLeftElement } from "./input";
-import { Palette, PaletteButton, PaletteContent } from "./palette";
+import { Popover, PopoverButton, PopoverContent } from "./popover";
 
-import "./emojiPalette.less";
+import "./emojipalette.less";
 
 type EmojiItem = { emoji: string; name: string };
 
@@ -234,11 +234,11 @@ const EmojiPalette = memo(({ className, placement, onSelect }: EmojiPaletteProps
 
     return (
         <div className={clsx("emoji-palette", className)}>
-            <Palette placement={placement}>
-                <PaletteButton className="ghost grey">
+            <Popover placement={placement}>
+                <PopoverButton className="ghost grey">
                     <i className="fa-sharp fa-solid fa-face-smile"></i>
-                </PaletteButton>
-                <PaletteContent className="emoji-palette-content">
+                </PopoverButton>
+                <PopoverContent className="emoji-palette-content">
                     <InputGroup>
                         <InputLeftElement>
                             <i className="fa-sharp fa-solid fa-magnifying-glass"></i>
@@ -256,8 +256,8 @@ const EmojiPalette = memo(({ className, placement, onSelect }: EmojiPaletteProps
                             <div className="no-emojis">No emojis found</div>
                         )}
                     </div>
-                </PaletteContent>
-            </Palette>
+                </PopoverContent>
+            </Popover>
         </div>
     );
 });

frontend/app/element/popover.stories.tsx

@@ -2,33 +2,33 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import type { Meta, StoryObj } from "@storybook/react";
-import { Palette, PaletteButton, PaletteContent } from "./palette";
+import { Popover, PopoverButton, PopoverContent } from "./popover";
 
-const meta: Meta<typeof Palette> = {
-    title: "Elements/Palette",
-    component: Palette,
+const meta: Meta<typeof Popover> = {
+    title: "Elements/Popover",
+    component: Popover,
     args: {
-        className: "custom-palette-class",
+        className: "custom-popover-class",
     },
     argTypes: {
         className: {
-            description: "Custom class for palette styling",
+            description: "Custom class for popover styling",
         },
     },
 };
 
 export default meta;
-type Story = StoryObj<typeof Palette>;
+type Story = StoryObj<typeof Popover>;
 
-export const DefaultPalette: Story = {
+export const DefaultPopover: Story = {
     render: (args) => {
         return (
             <div className="boundary" style={{ padding: "20px", height: "00px", border: "2px solid black" }}>
-                <Palette {...args}>
-                    <PaletteButton className="ghost grey">
+                <Popover {...args}>
+                    <PopoverButton className="ghost grey">
                         <i className="fa-sharp fa-solid fa-face-smile"></i>
-                    </PaletteButton>
-                    <PaletteContent>
+                    </PopoverButton>
+                    <PopoverContent>
                         <div
                             style={{
                                 opacity: ".3",
@@ -43,12 +43,12 @@ export const DefaultPalette: Story = {
                             <i className="fa-sharp fa-solid fa-shelves-empty"></i>
                             <span style={{ fontSize: "11px" }}>Empty</span>
                         </div>
-                    </PaletteContent>
-                </Palette>
+                    </PopoverContent>
+                </Popover>
             </div>
         );
     },
     args: {
-        className: "custom-palette-class",
+        className: "custom-popover-class",
     },
 };

frontend/app/element/popover.tsx

@@ -16,28 +16,28 @@ import {
 } from "react";
 import { Button } from "./button";
 
-import "./palette.less";
+import "./popover.less";
 
-interface PaletteProps {
+interface PopoverProps {
     children: ReactNode;
     className?: string;
     placement?: Placement;
     onOpenChange?: (isOpen: boolean) => void;
 }
 
-const isPaletteButton = (
+const isPopoverButton = (
     element: ReactElement
-): element is ReactElement<PaletteButtonProps, JSXElementConstructor<PaletteButtonProps>> => {
-    return element.type === PaletteButton;
+): element is ReactElement<PopoverButtonProps, JSXElementConstructor<PopoverButtonProps>> => {
+    return element.type === PopoverButton;
 };
 
-const isPaletteContent = (
+const isPopoverContent = (
     element: ReactElement
-): element is ReactElement<PaletteContentProps, JSXElementConstructor<PaletteContentProps>> => {
-    return element.type === PaletteContent;
+): element is ReactElement<PopoverContentProps, JSXElementConstructor<PopoverContentProps>> => {
+    return element.type === PopoverContent;
 };
 
-const Palette = memo(({ children, className, placement, onOpenChange }: PaletteProps) => {
+const Popover = memo(({ children, className, placement, onOpenChange }: PopoverProps) => {
     const [isOpen, setIsOpen] = useState(false);
 
     const toggleOpen = () => {
@@ -56,7 +56,7 @@ const Palette = memo(({ children, className, placement, onOpenChange }: PaletteP
 
     const renderChildren = Children.map(children, (child) => {
         if (isValidElement(child)) {
-            if (isPaletteButton(child)) {
+            if (isPopoverButton(child)) {
                 return cloneElement(child as any, {
                     isActive: isOpen,
                     ref: refs.setReference,
@@ -65,7 +65,7 @@ const Palette = memo(({ children, className, placement, onOpenChange }: PaletteP
                 });
             }
 
-            if (isPaletteContent(child)) {
+            if (isPopoverContent(child)) {
                 return isOpen
                     ? cloneElement(child as any, {
                           ref: refs.setFloating,
@@ -81,19 +81,19 @@ const Palette = memo(({ children, className, placement, onOpenChange }: PaletteP
     return <>{renderChildren}</>;
 });
 
-interface PaletteButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+interface PopoverButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     isActive?: boolean;
     children: React.ReactNode;
     onClick?: () => void;
     getReferenceProps?: () => any;
 }
 
-const PaletteButton = forwardRef<HTMLButtonElement, PaletteButtonProps>(
+const PopoverButton = forwardRef<HTMLButtonElement, PopoverButtonProps>(
     ({ isActive, children, onClick, getReferenceProps, className, ...props }, ref) => {
         return (
             <Button
                 ref={ref}
-                className={clsx("ghost grey palette-button", className, { "is-active": isActive })}
+                className={clsx("ghost grey popover-button", className, { "is-active": isActive })}
                 onClick={onClick}
                 {...getReferenceProps?.()}
                 {...props}
@@ -104,17 +104,17 @@ const PaletteButton = forwardRef<HTMLButtonElement, PaletteButtonProps>(
     }
 );
 
-interface PaletteContentProps extends React.HTMLAttributes<HTMLDivElement> {
+interface PopoverContentProps extends React.HTMLAttributes<HTMLDivElement> {
     children: React.ReactNode;
     getFloatingProps?: () => any;
 }
 
-const PaletteContent = forwardRef<HTMLDivElement, PaletteContentProps>(
+const PopoverContent = forwardRef<HTMLDivElement, PopoverContentProps>(
     ({ children, className, getFloatingProps, style, ...props }, ref) => {
         return (
             <div
                 ref={ref}
-                className={clsx("palette-content", className)}
+                className={clsx("popover-content", className)}
                 style={style}
                 {...getFloatingProps?.()}
                 {...props}
@@ -125,9 +125,9 @@ const PaletteContent = forwardRef<HTMLDivElement, PaletteContentProps>(
     }
 );
 
-Palette.displayName = "Palette";
-PaletteButton.displayName = "PaletteButton";
-PaletteContent.displayName = "PaletteContent";
+Popover.displayName = "Popover";
+PopoverButton.displayName = "PopoverButton";
+PopoverContent.displayName = "PopoverContent";
 
-export { Palette, PaletteButton, PaletteContent };
-export type { PaletteButtonProps, PaletteContentProps };
+export { Popover, PopoverButton, PopoverContent };
+export type { PopoverButtonProps, PopoverContentProps };