Started palette editor.

Cleaned up tests and lint errors.
Upgraded npm packages.

src/components/ColorPicker/ColorBar.tsx

@@ -6,7 +6,7 @@ import { memory } from "colorlib/colorlib_bg.wasm";
 import { useSmoothAnimation } from "@/hooks/animation";
 import type { Setter } from "@/hooks/color";
 import { useSlider } from "@/hooks/slider";
-import { useResize } from "@/hooks/window";
+import { onResize } from "@/hooks/window";
 import type { CartesianSpace } from "@/types";
 import { Direction } from "@/types";
 import { setMeasurements } from "@/util";
@@ -56,7 +56,7 @@ function ColorBar({
         refreshColorBar(canvasRef.current!, colorBar);
       });
     }
-  }, [hue, luminance, colorBar]);
+  }, [hue, luminance, colorBar, smoothAnimation]);
 
   // Get measurements
   useEffect(() => {
@@ -64,10 +64,10 @@ function ColorBar({
       setMeasurements(containerRef, setOrigin, setDimensions);
     }
 
-    return useResize(() =>
+    return onResize(() =>
       setMeasurements(containerRef, setOrigin, setDimensions),
     );
-  }, [containerRef.current]);
+  }, [containerRef]);
 
   // Resize color bar
   useEffect(() => {
@@ -87,7 +87,14 @@ function ColorBar({
         });
       }
     }
-  }, [containerRef.current, canvasRef.current, parentDimensions]);
+  }, [
+    containerRef,
+    canvasRef,
+    parentDimensions,
+    hue,
+    luminance,
+    smoothAnimation,
+  ]);
 
   return (
     <div className={styles.colorBarWrapper} ref={containerRef}>

src/components/ColorPicker/ColorPicker.tsx

@@ -3,7 +3,7 @@ import { useEffect, useRef, useState } from "react";
 import * as colorlib from "colorlib";
 
 import type { ColorActions } from "@/hooks/color";
-import { useResize } from "@/hooks/window";
+import { onResize } from "@/hooks/window";
 import { Direction } from "@/types";
 import type { CartesianSpace } from "@/types";
 import { formatCssRgb, setMeasurements } from "@/util";
@@ -25,7 +25,7 @@ function ColorPicker({
   const hueRange = { min: 0, max: 359 };
   const lumRange = { min: 0, max: 1 };
 
-  const [_origin, setOrigin] = useState<CartesianSpace>({ x: 0, y: 0 });
+  const [, setOrigin] = useState<CartesianSpace>({ x: 0, y: 0 });
   const [dimensions, setDimensions] = useState<CartesianSpace>({ x: 0, y: 0 });
 
   // Get measurements
@@ -34,10 +34,10 @@ function ColorPicker({
       setMeasurements(containerRef, setOrigin, setDimensions);
     }
 
-    return useResize(() => {
+    return onResize(() => {
       setMeasurements(containerRef, setOrigin, setDimensions);
     });
-  }, [containerRef.current]);
+  }, []);
 
   return (
     <div className={styles.container} ref={containerRef}>

src/components/ColorPicker/ColorSquare.tsx

@@ -7,7 +7,7 @@ import { useSmoothAnimation } from "@/hooks/animation";
 import type { HCLColorActions } from "@/hooks/color";
 import { useCrosshair } from "@/hooks/crosshair";
 import { useScroll } from "@/hooks/scroll";
-import { useResize } from "@/hooks/window";
+import { onResize } from "@/hooks/window";
 import type { CartesianSpace } from "@/types";
 import { setMeasurements } from "@/util";
 
@@ -62,12 +62,12 @@ function ColorSquare({
         refreshColorSquare(canvasRef.current!, colorSquare);
       });
     }
-  }, [chroma, colorSquare]);
+  }, [chroma, colorSquare, smoothAnimation]);
 
   // Add event listeners
   useEffect(() => {
     if (canvasRef.current) addScrollListener();
-  }, []);
+  }, [addScrollListener]);
 
   // Get measurements
   useEffect(() => {
@@ -75,10 +75,10 @@ function ColorSquare({
       setMeasurements(containerRef, setOrigin, setDimensions);
     }
 
-    return useResize(() =>
+    return onResize(() =>
       setMeasurements(containerRef, setOrigin, setDimensions),
     );
-  }, [containerRef.current, parentDimensions]);
+  }, [containerRef, parentDimensions]);
 
   // Resize square
   useEffect(() => {
@@ -97,7 +97,7 @@ function ColorSquare({
         });
       }
     }
-  }, [containerRef.current, canvasRef.current, parentDimensions]);
+  }, [containerRef, canvasRef, parentDimensions, chroma, smoothAnimation]);
 
   return (
     <div className={styles.colorSquareWrapper} ref={containerRef}>

src/components/ColorPicker/Crosshair.tsx

@@ -2,7 +2,7 @@ import { useEffect, useRef, useState } from "react";
 
 import * as colorlib from "colorlib";
 
-import { useResize } from "@/hooks/window";
+import { onResize } from "@/hooks/window";
 import type { CartesianSpace } from "@/types";
 import { formatCssRgb, setMeasurements, valueToPosition } from "@/util";
 
@@ -19,7 +19,7 @@ export function SquareCrosshair({
   hex: colorlib.Hex;
   parentDimensions: CartesianSpace;
 }) {
-  const [_origin, setOrigin] = useState<CartesianSpace>({ x: 0, y: 0 });
+  const [, setOrigin] = useState<CartesianSpace>({ x: 0, y: 0 });
   const [dimensions, setDimensions] = useState<CartesianSpace>({ x: 0, y: 0 });
   const [darkCrosshairs, setDarkCrosshairs] = useState(true);
   const containerRef = useRef<HTMLDivElement>(null);
@@ -32,10 +32,10 @@ export function SquareCrosshair({
 
   useEffect(() => {
     setMeasurements(containerRef, setOrigin, setDimensions);
-    return useResize(() =>
+    return onResize(() =>
       setMeasurements(containerRef, setOrigin, setDimensions),
     );
-  }, [containerRef.current, parentDimensions]);
+  }, [containerRef, parentDimensions]);
 
   return (
     <div className={styles.crosshairWrapper} ref={containerRef}>
@@ -86,7 +86,7 @@ export function BarCrosshair({
   hex: colorlib.Hex;
   parentDimensions: CartesianSpace;
 }) {
-  const [_origin, setOrigin] = useState<CartesianSpace>({ x: 0, y: 0 });
+  const [, setOrigin] = useState<CartesianSpace>({ x: 0, y: 0 });
   const [dimensions, setDimensions] = useState<CartesianSpace>({ x: 0, y: 0 });
   const [darkCrosshairs, setDarkCrosshairs] = useState(true);
   const containerRef = useRef<HTMLDivElement>(null);
@@ -98,10 +98,10 @@ export function BarCrosshair({
 
   useEffect(() => {
     setMeasurements(containerRef, setOrigin, setDimensions);
-    return useResize(() =>
+    return onResize(() =>
       setMeasurements(containerRef, setOrigin, setDimensions),
     );
-  }, [containerRef.current, parentDimensions]);
+  }, [containerRef, parentDimensions]);
 
   return (
     <div className={styles.crosshairWrapper} ref={containerRef}>

src/components/ColorPicker/GripSlider.tsx

@@ -2,7 +2,7 @@ import { useEffect, useState } from "react";
 
 import type { Setter } from "@/hooks/color";
 import { useSlider } from "@/hooks/slider";
-import { useResize } from "@/hooks/window";
+import { onResize } from "@/hooks/window";
 import { Direction } from "@/types";
 import type { CartesianSpace, Range } from "@/types";
 import {
@@ -49,10 +49,8 @@ function GripSlider({
       setMeasurements(sliderRef, setOrigin, setDimensions);
     }
 
-    return useResize(() =>
-      setMeasurements(sliderRef, setOrigin, setDimensions),
-    );
-  }, [sliderRef.current, parentDimensions]);
+    return onResize(() => setMeasurements(sliderRef, setOrigin, setDimensions));
+  }, [sliderRef, parentDimensions]);
 
   const upArrowStyle = {
     borderLeft: "12px solid transparent",

src/components/ColorValues/ColorValues.module.css

@@ -74,6 +74,9 @@
 }
 
 .button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
   height: 100%;
   width: 100%;
   padding: 0;

src/components/ColorValues/ValueEditor.tsx

@@ -1,19 +1,14 @@
 import { useEffect, useRef, useState } from "react";
 import type { ChangeEvent, KeyboardEvent, RefObject } from "react";
 
-import {
-  faChevronLeft,
-  faChevronRight,
-} from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-
 import clsx from "clsx";
 import * as colorlib from "colorlib";
+import { ChevronLeft, ChevronRight } from "lucide-react";
 
 import type { HexColorActions } from "@/hooks/color";
 import { useScroll } from "@/hooks/scroll";
 import { useSlider } from "@/hooks/slider";
-import { useResize } from "@/hooks/window";
+import { onResize } from "@/hooks/window";
 import type { CartesianSpace, Range, Setter, Timeout } from "@/types";
 import { Direction } from "@/types";
 import { minmax, roundTo, setMeasurements, valueToPosition } from "@/util";
@@ -89,9 +84,7 @@ export function ValueEditor({
   // Set component dimensions for slider hook
   useEffect(() => {
     setMeasurements(sliderRef, setOrigin, setDimensions);
-    return useResize(() =>
-      setMeasurements(sliderRef, setOrigin, setDimensions),
-    );
+    return onResize(() => setMeasurements(sliderRef, setOrigin, setDimensions));
   }, [sliderRef, setOrigin, setDimensions]);
 
   return (
@@ -209,7 +202,7 @@ function Button({
 }) {
   const isIncrease = direction === "increase";
   const label = isIncrease ? "Increase" : "Decrease";
-  const icon = isIncrease ? faChevronRight : faChevronLeft;
+  const Icon = isIncrease ? ChevronRight : ChevronLeft;
   const dataCy = `${componentSymbol}-${isIncrease ? "increment" : "decrement"}-button`;
 
   const step = isIncrease ? 1 : -1;
@@ -234,7 +227,7 @@ function Button({
         data-cy={dataCy}
         onKeyDown={handleKeyDown}
       >
-        <FontAwesomeIcon icon={icon} transform="shrink-2 down-1" />
+        <Icon size={18} />
       </button>
     </div>
   );
@@ -338,8 +331,8 @@ function useLongPressRepeat(
     onMouseLeave: stop,
     onTouchStart: start,
     onTouchEnd: stop,
-    // Intentional 'any' to avoid overly complex typing
-    onContextMenu: (e: Event | any) => e.preventDefault(),
+    // @ts-expect-error: Avoid overly complex typing
+    onContextMenu: (e) => e.preventDefault(),
   };
 }
 
@@ -385,7 +378,7 @@ export function HexEditor({
 
   useEffect(() => {
     setInputValue(formatHexString(color, isShortHex));
-  }, [color]);
+  }, [color, isShortHex]);
 
   const onChange = (e: ChangeEvent<HTMLInputElement>) => {
     const value = e.target.value;

src/components/PaletteEditor/PaletteEditor.module.css

@@ -1,16 +1,37 @@
-/* Large - Landscape Tablets / Desktops */
-/* Medium - Portrait Tablets */
-/* Horizontal layout, vertically scrolling picker and palette content */
-@media (min-width: 992px),
-  (min-width: 568px) and (max-width: 991px) and (orientation: portrait) {
+.paletteEditor {
+  height: 100%;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
 }
 
-/* Medium - Landscape Phones */
-/* Horizontal layout, side menu, vertical tabbed picker */
-@media (min-width: 568px) and (max-width: 991px) and (orientation: landscape) {
+.actionBar {
+  height: 40px;
 }
 
-/* Small - Portrait Phones*/
-/* Vertical layout, side menu, horizontal tabbed picker */
-@media (max-width: 567px) {
+.cardWrapper {
+  flex: 1;
+  padding: 20px;
+  display: grid;
+  grid-template-columns: 1fr 1fr 4fr;
+  grid-template-rows: 40px 1fr;
+  grid-template-areas:
+    ". . card-header"
+    "preview selection palette";
+}
+
+.cardHeader {
+  grid-area: card-header;
+}
+
+.pickerColor {
+  grid-area: preview;
+}
+
+.paletteColor {
+  grid-area: selection;
+}
+
+.palette {
+  grid-area: palette;
 }

src/components/PaletteEditor/PaletteEditor.test.cy.tsx

@@ -0,0 +1,39 @@
+import { useReducer } from "react";
+
+import { Color } from "colorlib";
+
+import { HexEditor } from "@/components/ColorValues/ValueEditor";
+import { colorReducer, createColorActions } from "@/hooks/color";
+
+import PaletteEditor from "./PaletteEditor";
+
+const initialState = {
+  color: Color.from_hex("000"),
+};
+
+function TestWrapper() {
+  const [state, dispatch] = useReducer(colorReducer, initialState);
+  const actions = createColorActions(dispatch);
+
+  return (
+    <>
+      <div style={{ width: "100%", height: 400 }}>
+        <PaletteEditor
+          pickerColor={state.color.hex}
+          setPickerColor={actions.hex.setHex}
+        />
+      </div>
+      <HexEditor color={state.color.hex} actions={actions.hex} />
+    </>
+  );
+}
+
+describe("palette editor tests", () => {
+  beforeEach(() => {
+    cy.mount(<TestWrapper />);
+  });
+
+  it("renders the palette editor", () => {
+    cy.dataCy("palette-editor").should("exist");
+  });
+});

src/components/PaletteEditor/PaletteEditor.tsx

@@ -0,0 +1,51 @@
+import { Hex as HexColor } from "colorlib";
+
+import styles from "./PaletteEditor.module.css";
+
+function PaletteEditor({
+  pickerColor,
+  setPickerColor,
+}: {
+  pickerColor: HexColor;
+  setPickerColor: (hex: HexColor) => void;
+}) {
+  return (
+    <div className={styles.paletteEditor} data-cy="palette-editor">
+      <ActionBar />
+      <PaletteCard />
+    </div>
+  );
+}
+
+function ActionBar() {
+  return <div className={styles.actionBar}>actions</div>;
+}
+
+function PaletteCard() {
+  return (
+    <div className={styles.cardWrapper}>
+      <CardHeader />
+      <PickerColor />
+      <PaletteColor />
+      <Palette />
+    </div>
+  );
+}
+
+function CardHeader() {
+  return <div className={styles.cardHeader}>header</div>;
+}
+
+function PickerColor() {
+  return <div className={styles.pickerColor}>picker color</div>;
+}
+
+function PaletteColor() {
+  return <div className={styles.paletteColor}>palette color</div>;
+}
+
+function Palette() {
+  return <div className={styles.palette}>palette</div>;
+}
+
+export default PaletteEditor;