refactor(color inputs): improve color control and add clipboard feature

Author: AlexGarrixen

jest.setup.ts

@@ -5,3 +5,8 @@ global.ResizeObserver = jest.fn(() => ({
   disconnect: jest.fn(),
   unobserve: jest.fn(),
 }));
+
+jest.mock("@uidotdev/usehooks", () => ({
+  __esModule: true,
+  useCopyToClipboard: jest.fn(() => ["", jest.fn()]),
+}));

src/components/color-inputs/__tests__/panel.test.tsx

@@ -4,19 +4,10 @@ import { useAtom } from "jotai";
 
 import { background } from "@/store";
 
-import { Panel } from "./panel";
-import { ColorControl, PopoverColorChannels } from "./color-control";
+import { ColorControl } from "./color-control";
 
 export function BackgroundInput() {
   const [bg, setBg] = useAtom(background);
 
-  return (
-    <Panel color={bg} label="Background Color">
-      <ColorControl
-        popover={<PopoverColorChannels sourceColor={bg} onChange={setBg} />}
-        sourceColor={bg}
-        onChange={setBg}
-      />
-    </Panel>
-  );
+  return <ColorControl label="Background Color" sourceColor={bg} onChange={setBg} />;
 }

src/components/color-inputs/background.tsx

@@ -0,0 +1,23 @@
+import { describe, it } from "@jest/globals";
+import { fireEvent, render } from "@testing-library/react";
+
+import { ButtonClipboard } from "../button-clipboard";
+
+describe("Color Control / Button Picker", () => {
+  it("Correct rendering and unmount", () => {
+    const screen = render(<ButtonClipboard />);
+
+    expect(() => screen.unmount()).not.toThrow();
+  });
+
+  it("Should icon check on click", () => {
+    const screen = render(<ButtonClipboard color="#000" />);
+    const btn = screen.getByRole("button");
+
+    fireEvent.click(btn);
+
+    const checkSvg = screen.getByLabelText("check");
+
+    expect(checkSvg).toBeInTheDocument();
+  });
+});

src/components/color-inputs/color-control/__tests__/button-picker.test.tsx

@@ -2,26 +2,21 @@ import { describe, it } from "@jest/globals";
 import { fireEvent, render } from "@testing-library/react";
 import { useState } from "react";
 
-import { ColorControl, PopoverColorChannels } from "..";
+import { ColorControl } from "..";
 
 describe("Color Control", () => {
   it("Correct rendering and unmount", () => {
-    const screen = render(<ColorControl popover={<PopoverColorChannels />} />);
+    const screen = render(<ColorControl label="Background" />);
 
+    expect(screen.getByText("Background")).toBeInTheDocument();
     expect(() => screen.unmount()).not.toThrow();
   });
 
   it("Should update value on change input", () => {
     function Render() {
       const [value, setValue] = useState("#000");
 
-      return (
-        <ColorControl
-          popover={<PopoverColorChannels />}
-          sourceColor={value}
-          onChange={(value) => setValue(value)}
-        />
-      );
+      return <ColorControl sourceColor={value} onChange={(value) => setValue(value)} />;
     }
 
     const screen = render(<Render />);
@@ -35,8 +30,8 @@ describe("Color Control", () => {
   });
 
   it("Should show popover color channels", () => {
-    const screen = render(<ColorControl popover={<PopoverColorChannels />} />);
-    const buttonSettings = screen.getByLabelText("settings button");
+    const screen = render(<ColorControl />);
+    const [buttonSettings] = screen.getAllByLabelText("picker button");
 
     fireEvent.click(buttonSettings);
 

src/components/color-inputs/color-control/__tests__/color-control.test.tsx

@@ -5,7 +5,7 @@ import { useAtom } from "jotai";
 
 import { pickingColor } from "@/store";
 
-import { PopoverColorChannels } from "..";
+import { PopoverColorChannels } from "../popover-color-channels";
 
 describe("Popover Color Channels", () => {
   it("Correct rendering and unmount", () => {

src/components/color-inputs/color-control/__tests__/popover-color-channels.test.tsx

@@ -0,0 +1,34 @@
+import { useEffect, useRef } from "react";
+import { useCopyToClipboard } from "@uidotdev/usehooks";
+import { css } from "@root/styled-system/css";
+
+import { useToggle } from "@/hooks/use-toggle";
+import { Button } from "@/components/primitives/button";
+import { CheckFill, ClipboardLine } from "@/components/icons";
+
+export function ButtonClipboard({ color }: { color?: string }) {
+  const [copiedText, copyToClipboard] = useCopyToClipboard();
+  const { isEnabled, onOpen, onClose } = useToggle();
+  const timeoutId = useRef<number>();
+
+  function onClick() {
+    if (color) copyToClipboard(color);
+    onOpen();
+  }
+
+  useEffect(() => {
+    if (timeoutId.current) clearTimeout(timeoutId.current);
+
+    timeoutId.current = window.setTimeout(onClose, 1500);
+  }, [copiedText, onClose, timeoutId]);
+
+  return (
+    <Button
+      aria-label="picker button"
+      className={css({ border: "none", fontSize: "icon-24" })}
+      onClick={onClick}
+    >
+      {isEnabled ? <CheckFill aria-label="check" /> : <ClipboardLine aria-label="clipboard" />}
+    </Button>
+  );
+}

src/components/color-inputs/color-control/button-clipboard.tsx

@@ -0,0 +1,28 @@
+import * as Popover from "@radix-ui/react-popover";
+import { css } from "@root/styled-system/css";
+
+import { useToggle } from "@/hooks/use-toggle";
+import { Button } from "@/components/primitives/button";
+import { ColorPickerFill } from "@/components/icons";
+
+import { PopoverColorChannels } from "./popover-color-channels";
+
+interface ButtonPickerProps {
+  sourceColor?: string;
+  onChange?: (color: string) => void;
+}
+
+export function ButtonPicker({ sourceColor, onChange }: ButtonPickerProps) {
+  const { isEnabled: isOpen, setOpen } = useToggle();
+
+  return (
+    <Popover.Root open={isOpen} onOpenChange={setOpen}>
+      <Popover.Trigger asChild>
+        <Button aria-label="picker button" className={css({ border: "none", fontSize: "icon-24" })}>
+          <ColorPickerFill />
+        </Button>
+      </Popover.Trigger>
+      {isOpen ? <PopoverColorChannels sourceColor={sourceColor} onChange={onChange} /> : null}
+    </Popover.Root>
+  );
+}

src/components/color-inputs/color-control/button-picker.tsx

@@ -1,16 +1,17 @@
 import { css } from "@root/styled-system/css";
+import { stack } from "@root/styled-system/patterns";
 
 export default {
   root: css({ display: "flex", alignItems: "center", flex: 1, width: "100%", gap: "4" }),
 
   label: css({
-    color: "text-primary",
-    fontWeight: "bold",
+    color: "text-secondary",
     display: "block",
-    mb: "3",
+    fontWeight: "500",
+    mb: "2",
   }),
 
-  rightContent: css({ flex: 1 }),
+  content: css({ flex: 1 }),
 
   preview: css({
     w: "20",
@@ -19,5 +20,8 @@ export default {
     rounded: "xl",
     border: "1px solid",
     borderColor: "border-secondary",
+    flexShrink: 0,
   }),
+
+  actions: stack({ gap: "1" }),
 };

src/components/color-inputs/panel.styled.ts src/components/color-inputs/color-control/color-control.styled.ts

@@ -1,26 +1,28 @@
 "use client";
 
-import type { ReactNode } from "react";
-
-import * as Popover from "@radix-ui/react-popover";
-
-import { useToggle } from "@/hooks/use-toggle";
-
 import { ColorInput } from "./color-input";
+import { ButtonPicker } from "./button-picker";
+import { ButtonClipboard } from "./button-clipboard";
+import classes from "./color-control.styled";
 
 interface Iprops {
-  popover: ReactNode;
+  label?: string;
   sourceColor?: string;
   onChange?: (color: string) => void;
 }
 
-export function ColorControl({ popover, sourceColor, onChange }: Iprops) {
-  const { isEnabled: isOpen, setOpen } = useToggle();
-
+export function ColorControl({ sourceColor, onChange, label }: Iprops) {
   return (
-    <Popover.Root open={isOpen} onOpenChange={setOpen}>
-      <ColorInput value={sourceColor} onChange={onChange} />
-      {isOpen ? popover : null}
-    </Popover.Root>
+    <div className={classes.root}>
+      <div className={classes.preview} style={{ backgroundColor: sourceColor }} />
+      <div className={classes.content}>
+        <label className={classes.label}>{label}</label>
+        <ColorInput value={sourceColor} onChange={onChange} />
+      </div>
+      <div className={classes.actions}>
+        <ButtonPicker sourceColor={sourceColor} onChange={onChange} />
+        <ButtonClipboard color={sourceColor} />
+      </div>
+    </div>
   );
 }

src/components/color-inputs/color-control/color-control.tsx

@@ -1,15 +1,16 @@
 import { css } from "@root/styled-system/css";
 
 export default {
-  settings: css({
-    color: "fg-primary",
-    borderLeft: "1px solid",
-    borderColor: "border-secondary",
-    pl: "4",
-    my: "2",
-    display: "inline-block",
-    cursor: "pointer",
-  }),
+  root: css({ display: "flex", alignItems: "center", gap: "1", flex: 1 }),
+
+  icon: css({ fontSize: "icon-24" }),
 
-  icon: css({ fontSize: "icon-20" }),
+  input: css({
+    textStyle: "display-md",
+    fontWeight: "500",
+    width: "100%",
+    "&:focus": {
+      outlineColor: "text-primary",
+    },
+  }),
 };

src/components/color-inputs/color-control/color-input.styled.ts

@@ -2,12 +2,9 @@
 
 import type { ChangeEvent } from "react";
 
-import * as Popover from "@radix-ui/react-popover";
-
-import { ColorPickerFill } from "@/components/icons";
-import { Input } from "@/components/primitives/input";
-import { InputGroup } from "@/components/primitives/input-group";
 import { useControllable } from "@/hooks/use-controllable";
+import { InputGroup } from "@/components/primitives/input-group";
+import { PencilFill } from "@/components/icons";
 
 import { regexColorHexadecimal } from "./utils";
 import classes from "./color-input.styled";
@@ -24,7 +21,6 @@ export function ColorInput({ value: valueProp, onChange }: Iprops) {
 
   function handleChange(e: ChangeEvent<HTMLInputElement>) {
     const nextValue = e.target.value;
-
     const omitOnChange = !regexColorHexadecimal.test(nextValue);
 
     setValue(nextValue, omitOnChange);
@@ -35,22 +31,16 @@ export function ColorInput({ value: valueProp, onChange }: Iprops) {
   }
 
   return (
-    <InputGroup
-      endContent={
-        <Popover.Trigger asChild>
-          <button aria-label="settings button" className={classes.settings} type="button">
-            <ColorPickerFill className={classes.icon} />
-          </button>
-        </Popover.Trigger>
-      }
-    >
-      <Input
+    <div className={classes.root}>
+      <PencilFill className={classes.icon} />
+      <input
+        className={classes.input}
         placeholder={fallback}
         type="text"
         value={value}
         onBlur={handleBlur}
         onChange={handleChange}
       />
-    </InputGroup>
+    </div>
   );
 }

src/components/color-inputs/color-control/color-input.tsx

@@ -1,3 +1 @@
 export { ColorControl } from "./color-control";
-
-export { PopoverColorChannels } from "./popover-color-channels";

src/components/color-inputs/color-control/index.ts

@@ -4,19 +4,10 @@ import { useAtom } from "jotai";
 
 import { foreground } from "@/store";
 
-import { Panel } from "./panel";
-import { ColorControl, PopoverColorChannels } from "./color-control";
+import { ColorControl } from "./color-control";
 
 export function ForegroundInput() {
   const [fg, setFg] = useAtom(foreground);
 
-  return (
-    <Panel color={fg} label="Text Color">
-      <ColorControl
-        popover={<PopoverColorChannels sourceColor={fg} onChange={setFg} />}
-        sourceColor={fg}
-        onChange={setFg}
-      />
-    </Panel>
-  );
+  return <ColorControl label="Text Color" sourceColor={fg} onChange={setFg} />;
 }

src/components/color-inputs/foreground.tsx

@@ -21,7 +21,6 @@ export function SuggestionsButton() {
           aria-label="swap button"
           className={css({
             fontSize: "icon-24",
-            borderColor: "transparent",
             display: { lg: "none" },
           })}
           onClick={onOpen}