From 2bc995a87a1b4ef8f1ad01820ae262ba938f3f16 Mon Sep 17 00:00:00 2001
From: Red Adaya <red.adaya@gmail.com>
Date: Thu, 17 Oct 2024 20:33:39 +0800
Subject: [PATCH] minor refactor

---
 frontend/app/element/emojipalette.stories.tsx |  2 +-
 frontend/app/element/emojipalette.tsx         |  4 +-
 frontend/app/element/palette.stories.tsx      |  6 +-
 frontend/app/element/palette.tsx              | 61 ++++++++++++++++---
 frontend/app/element/palettebutton.tsx        | 33 ----------
 frontend/app/element/palettecontent.tsx       | 30 ---------
 6 files changed, 58 insertions(+), 78 deletions(-)
 delete mode 100644 frontend/app/element/palettebutton.tsx
 delete mode 100644 frontend/app/element/palettecontent.tsx

diff --git a/frontend/app/element/emojipalette.stories.tsx b/frontend/app/element/emojipalette.stories.tsx
index f9b02c544..ffd7f025b 100644
--- a/frontend/app/element/emojipalette.stories.tsx
+++ b/frontend/app/element/emojipalette.stories.tsx
@@ -26,7 +26,7 @@ type Story = StoryObj<typeof EmojiPalette>;
 export const DefaultEmojiPalette: Story = {
     render: (args) => {
         return (
-            <div style={{ padding: "20px", height: "300px", border: "2px solid black" }}>
+            <div style={{ padding: "20px", height: "500px", border: "2px solid black" }}>
                 <EmojiPalette {...args} />
             </div>
         );
diff --git a/frontend/app/element/emojipalette.tsx b/frontend/app/element/emojipalette.tsx
index 21eff6103..26285d59b 100644
--- a/frontend/app/element/emojipalette.tsx
+++ b/frontend/app/element/emojipalette.tsx
@@ -5,9 +5,7 @@ import clsx from "clsx";
 import React, { memo, useState } from "react";
 import { Button } from "./button";
 import { Input } from "./input";
-import { Palette } from "./palette";
-import { PaletteButton } from "./palettebutton";
-import { PaletteContent } from "./palettecontent";
+import { Palette, PaletteButton, PaletteContent } from "./palette";
 
 import "./emojiPalette.less";
 
diff --git a/frontend/app/element/palette.stories.tsx b/frontend/app/element/palette.stories.tsx
index 2a4294ff7..deb20b4f7 100644
--- a/frontend/app/element/palette.stories.tsx
+++ b/frontend/app/element/palette.stories.tsx
@@ -2,9 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import type { Meta, StoryObj } from "@storybook/react";
-import { Palette } from "./palette";
-import { PaletteButton } from "./palettebutton";
-import { PaletteContent } from "./palettecontent";
+import { Palette, PaletteButton, PaletteContent } from "./palette";
 
 const meta: Meta<typeof Palette> = {
     title: "Elements/Palette",
@@ -25,7 +23,7 @@ type Story = StoryObj<typeof Palette>;
 export const DefaultPalette: Story = {
     render: (args) => {
         return (
-            <div className="boundary" style={{ padding: "20px", height: "500px", border: "2px solid black" }}>
+            <div className="boundary" style={{ padding: "20px", height: "00px", border: "2px solid black" }}>
                 <Palette {...args}>
                     <PaletteButton className="ghost grey">
                         <i className="fa-sharp fa-solid fa-face-smile"></i>
diff --git a/frontend/app/element/palette.tsx b/frontend/app/element/palette.tsx
index f1a4647fb..fe831f6b3 100644
--- a/frontend/app/element/palette.tsx
+++ b/frontend/app/element/palette.tsx
@@ -1,7 +1,12 @@
+// Copyright 2024, Command Line Inc.
+// SPDX-License-Identifier: Apache-2.0
+
 import { useDismiss, useFloating, useInteractions, type Placement } from "@floating-ui/react";
+import clsx from "clsx";
 import {
     Children,
     cloneElement,
+    forwardRef,
     isValidElement,
     JSXElementConstructor,
     memo,
@@ -9,14 +14,10 @@ import {
     ReactNode,
     useState,
 } from "react";
-import { PaletteButton, PaletteButtonProps } from "./palettebutton";
-import { PaletteContent, PaletteContentProps } from "./palettecontent";
+import { Button } from "./button";
 
 import "./palette.less";
 
-// Copyright 2024, Command Line Inc.
-// SPDX-License-Identifier: Apache-2.0
-
 interface PaletteProps {
     children: ReactNode;
     className?: string;
@@ -80,6 +81,52 @@ const Palette = memo(({ children, className, placement, onOpenChange }: PaletteP
     return <>{renderChildren}</>;
 });
 
-Palette.displayName = "Palette";
+interface PaletteButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    isActive?: boolean;
+    children: React.ReactNode;
+    onClick?: () => void;
+    getReferenceProps?: () => any;
+}
 
-export { Palette };
+const PaletteButton = forwardRef<HTMLButtonElement, PaletteButtonProps>(
+    ({ isActive, children, onClick, getReferenceProps, className, ...props }, ref) => {
+        return (
+            <Button
+                ref={ref}
+                className={clsx("ghost grey palette-button", className, { "is-active": isActive })}
+                onClick={onClick}
+                {...getReferenceProps?.()}
+                {...props}
+            >
+                {children}
+            </Button>
+        );
+    }
+);
+
+interface PaletteContentProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+    getFloatingProps?: () => any;
+}
+
+const PaletteContent = forwardRef<HTMLDivElement, PaletteContentProps>(
+    ({ children, className, getFloatingProps, style, ...props }, ref) => {
+        return (
+            <div
+                ref={ref}
+                className={clsx("palette-content", className)}
+                style={style}
+                {...getFloatingProps?.()}
+                {...props}
+            >
+                {children}
+            </div>
+        );
+    }
+);
+
+Palette.displayName = "Palette";
+PaletteButton.displayName = "PaletteButton";
+PaletteContent.displayName = "PaletteContent";
+
+export { Palette, PaletteButton, PaletteContent, type PaletteButtonProps, type PaletteContentProps };
diff --git a/frontend/app/element/palettebutton.tsx b/frontend/app/element/palettebutton.tsx
deleted file mode 100644
index 085591d75..000000000
--- a/frontend/app/element/palettebutton.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-// Copyright 2024, Command Line Inc.
-// SPDX-License-Identifier: Apache-2.0
-
-import clsx from "clsx";
-import { forwardRef } from "react";
-import { Button } from "./button";
-
-interface PaletteButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-    isActive?: boolean;
-    children: React.ReactNode;
-    onClick?: () => void;
-    getReferenceProps?: () => any;
-}
-
-const PaletteButton = forwardRef<HTMLButtonElement, PaletteButtonProps>(
-    ({ isActive, children, onClick, getReferenceProps, className, ...props }, ref) => {
-        return (
-            <Button
-                ref={ref}
-                className={clsx("ghost grey palette-button", className, { "is-active": isActive })}
-                onClick={onClick}
-                {...getReferenceProps?.()}
-                {...props}
-            >
-                {children}
-            </Button>
-        );
-    }
-);
-
-PaletteButton.displayName = "PaletteButton";
-
-export { PaletteButton, type PaletteButtonProps };
diff --git a/frontend/app/element/palettecontent.tsx b/frontend/app/element/palettecontent.tsx
deleted file mode 100644
index dd173bf33..000000000
--- a/frontend/app/element/palettecontent.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-// Copyright 2024, Command Line Inc.
-// SPDX-License-Identifier: Apache-2.0
-
-import clsx from "clsx";
-import { forwardRef } from "react";
-
-interface PaletteContentProps extends React.HTMLAttributes<HTMLDivElement> {
-    children: React.ReactNode;
-    getFloatingProps?: () => any;
-}
-
-const PaletteContent = forwardRef<HTMLDivElement, PaletteContentProps>(
-    ({ children, className, getFloatingProps, style, ...props }, ref) => {
-        return (
-            <div
-                ref={ref}
-                className={clsx("palette-content", className)}
-                style={style}
-                {...getFloatingProps?.()}
-                {...props}
-            >
-                {children}
-            </div>
-        );
-    }
-);
-
-PaletteContent.displayName = "PaletteContent";
-
-export { PaletteContent, type PaletteContentProps };