Started palette editor.

Cleaned up tests and lint errors.
Upgraded npm packages.

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;