Fix hsl color preview and improved color-picker UI for connect playground (#5193)

## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
This PR focuses on enhancing the color selection functionality in the `ColorInput` component by integrating a new `Popover` UI from `@radix-ui/react-popover` and a color picker from `react-pick-color`. It also updates the dependencies in `package.json`.

### Detailed summary
- Removed the `ColorInput.module.css` file.
- Added `@radix-ui/react-popover` and `react-pick-color` to `package.json`.
- Updated `ColorInput` component to use `Popover` for color selection.
- Integrated `ColorPicker` within the `PopoverContent`.
- Refactored `onChange` handling in `ColorInput`.

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->

Author: MananTank

apps/playground-web/package.json

@@ -18,6 +18,7 @@
     "@radix-ui/react-dialog": "1.1.2",
     "@radix-ui/react-dropdown-menu": "^2.1.2",
     "@radix-ui/react-label": "^2.1.0",
+    "@radix-ui/react-popover": "^1.1.2",
     "@radix-ui/react-radio-group": "^1.2.1",
     "@radix-ui/react-scroll-area": "^1.2.0",
     "@radix-ui/react-select": "^2.1.2",
@@ -35,6 +36,7 @@
     "prettier": "^3.3.2",
     "react": "18.3.1",
     "react-dom": "18.3.1",
+    "react-pick-color": "^2.0.0",
     "server-only": "^0.0.1",
     "shiki": "1.22.0",
     "tailwind-merge": "^2.5.4",

apps/playground-web/src/app/connect/sign-in/components/ColorFormGroup.tsx

@@ -69,31 +69,29 @@ export function ColorFormGroup(props: {
                         className="flex cursor-pointer items-center gap-3 rounded-lg p-2 transition-colors hover:bg-secondary"
                         key={color.colorId}
                       >
-                        <div className="rounded-full border">
-                          <ColorInput
-                            className="size-10"
-                            value={themeObj.colors[color.colorId]}
-                            onChange={(value) => {
-                              setConnectOptions((v) => {
-                                const overridesKey =
-                                  v.theme.type === "dark"
-                                    ? "darkColorOverrides"
-                                    : "lightColorOverrides";
+                        <ColorInput
+                          className="size-10"
+                          value={themeObj.colors[color.colorId]}
+                          onChange={(value) => {
+                            setConnectOptions((v) => {
+                              const overridesKey =
+                                v.theme.type === "dark"
+                                  ? "darkColorOverrides"
+                                  : "lightColorOverrides";
 
-                                return {
-                                  ...v,
-                                  theme: {
-                                    ...v.theme,
-                                    [overridesKey]: {
-                                      ...v.theme[overridesKey],
-                                      [color.colorId]: value,
-                                    },
+                              return {
+                                ...v,
+                                theme: {
+                                  ...v.theme,
+                                  [overridesKey]: {
+                                    ...v.theme[overridesKey],
+                                    [color.colorId]: value,
                                   },
-                                };
-                              });
-                            }}
-                          />
-                        </div>
+                                },
+                              };
+                            });
+                          }}
+                        />
                         <div>
                           <div>{color.label}</div>
                           <div className="ml-auto font-mono text-muted-foreground text-xs">

apps/playground-web/src/app/connect/sign-in/components/ColorInput/ColorInput.module.css

@@ -1,25 +1,56 @@
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import ColorPicker from "react-pick-color";
 import { useDebouncedCallback } from "use-debounce";
 import { cn } from "../../../../../lib/utils";
-import styles from "./ColorInput.module.css";
 
 export function ColorInput(props: {
   value: string;
   onChange: (value: string) => void;
   onClick?: () => void;
   className?: string;
 }) {
-  const debouncedOnChange = useDebouncedCallback((value) => {
+  const debouncedOnChange = useDebouncedCallback((value: string) => {
     props.onChange(value);
   }, 100);
 
   return (
-    <input
-      onChange={(e) => {
-        debouncedOnChange(e.target.value);
-      }}
-      type="color"
-      className={cn(styles.ColorInput, props.className)}
-      value={props.value}
-    />
+    <Popover>
+      <PopoverTrigger>
+        <div
+          className={cn(
+            "size-10 rounded-full border transition-colors duration-100",
+            props.className,
+          )}
+          style={{
+            background: props.value,
+          }}
+        />
+      </PopoverTrigger>
+      <PopoverContent className="w-auto border-none p-0">
+        <ColorPicker
+          color={props.value}
+          hideAlpha
+          onChange={({ hsl }) =>
+            debouncedOnChange(
+              `hsl(${Math.round(hsl.h)}, ${Math.round(hsl.s * 100)}%, ${Math.round(hsl.l * 100)}%)`,
+            )
+          }
+          theme={{
+            background: "hsl(var(--background))",
+            borderColor: "hsl(var(--border))",
+            borderRadius: "var(--radius)",
+            boxShadow: "var(--shadow)",
+            inputBackground: "hsl(var(--input))",
+            color: "hsl(var(--foreground))",
+            width: "300px",
+          }}
+          className="p-2"
+        />
+      </PopoverContent>
+    </Popover>
   );
 }

apps/playground-web/src/app/connect/sign-in/components/ColorInput/index.tsx

@@ -0,0 +1,31 @@
+"use client";
+
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+const Popover = PopoverPrimitive.Root;
+
+const PopoverTrigger = PopoverPrimitive.Trigger;
+
+const PopoverContent = React.forwardRef<
+  React.ElementRef<typeof PopoverPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
+>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
+  <PopoverPrimitive.Portal>
+    <PopoverPrimitive.Content
+      ref={ref}
+      align={align}
+      sideOffset={sideOffset}
+      className={cn(
+        "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=closed]:animate-out data-[state=open]:animate-in",
+        className,
+      )}
+      {...props}
+    />
+  </PopoverPrimitive.Portal>
+));
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;
+
+export { Popover, PopoverTrigger, PopoverContent };