feat: color picker (#77)

apps/dashboard/package.json

@@ -35,6 +35,7 @@
     "next-themes": "^0.3.0",
     "oslo": "^1.1.3",
     "react": "^18",
+    "react-colorful": "^5.6.1",
     "react-dom": "^18",
     "satori": "^0.10.11",
     "sonner": "^1.3.1",

apps/dashboard/src/app/globals.css

@@ -78,3 +78,32 @@ input[type=number]::-webkit-inner-spin-button {
   height: 12px;
   @apply bg-blue-500;
 }
+
+.react-colorful {
+  width: 100% !important;
+}
+
+.react-colorful__saturation {
+  border-radius: 3px 3px 0 0 !important;
+}
+
+.react-colorful__saturation-pointer {
+  width: 20px !important;
+  height: 20px !important;
+  border: 2px solid var(--gray-contrast) !important;
+  box-shadow: var(--shadow-4) !important;
+}
+
+.react-colorful__hue,
+.react-colorful__alpha {
+  height: 20px !important;
+  border-radius: 0 0 3px 3px !important;
+}
+
+.react-colorful__hue-pointer,
+.react-colorful__alpha-pointer {
+  width: 16px !important;
+  height: 16px !important;
+  border: 2px solid var(--gray-contrast) !important;
+  box-shadow: var(--shadow-4) !important;
+}

apps/dashboard/src/components/ColorPicker.tsx

@@ -0,0 +1,42 @@
+import { Button, Flex, Popover, TextField } from "@radix-ui/themes";
+import { HexAlphaColorPicker } from "react-colorful";
+import type { ReactNode } from "react";
+import { ColorIcon } from "./icons/ColorIcon";
+
+interface ColorPickerProps {
+  value: string;
+  onChange: (value: string) => void;
+  children?: ReactNode;
+}
+
+export function ColorPicker({ value, onChange, children }: ColorPickerProps) {
+  return (
+    <Popover.Root>
+      <Popover.Trigger>
+        <Button color="gray" style={{ color: value }} variant="soft">
+          {children ? children : <ColorIcon />}
+          {value}
+        </Button>
+      </Popover.Trigger>
+      <Popover.Content minWidth="268px">
+        <Flex direction="column" gap="2">
+          <HexAlphaColorPicker color={value} onChange={onChange} />
+          <TextField.Root
+            color="gray"
+            onChange={(event) => {
+              const newValue = event.target.value;
+
+              if (!newValue.startsWith("#")) {
+                return;
+              }
+
+              onChange(newValue);
+            }}
+            value={value}
+            variant="soft"
+          />
+        </Flex>
+      </Popover.Content>
+    </Popover.Root>
+  );
+}

apps/dashboard/src/components/EditorToolbar.tsx

@@ -29,7 +29,6 @@ export function EditorToolbar() {
                   height: 50,
                   visible: true,
                   rotate: 0,
-                  opacity: 100,
                   content: "Text",
                   color: "#000000",
                   fontFamily: "Inter",
@@ -57,7 +56,6 @@ export function EditorToolbar() {
                   height: 200,
                   visible: true,
                   rotate: 0,
-                  opacity: 100,
                   backgroundColor: "#000000",
                 }),
               );
@@ -78,7 +76,6 @@ export function EditorToolbar() {
                   height: 150,
                   visible: true,
                   rotate: 0,
-                  opacity: 100,
                   backgroundColor: "#000000",
                   radius: 999,
                 }),
@@ -100,7 +97,6 @@ export function EditorToolbar() {
                   height: 150,
                   visible: true,
                   rotate: 0,
-                  opacity: 100,
                   backgroundColor: "#000000",
                   backgroundImage: "https://source.unsplash.com/random",
                   backgroundSize: "cover",
@@ -123,7 +119,6 @@ export function EditorToolbar() {
                   height: 50,
                   visible: true,
                   rotate: 0,
-                  opacity: 100,
                   content: "dynamic",
                   color: "#000000",
                   fontFamily: "Inter",

apps/dashboard/src/components/RightPanel/BackgroundSection.tsx

@@ -7,14 +7,14 @@ import {
   IconButton,
 } from "@radix-ui/themes";
 import type { OGElement } from "../../lib/types";
-import { ColorIcon } from "../icons/ColorIcon";
 import { DeleteIcon } from "../icons/DeleteIcon";
 import { StartIcon } from "../icons/StartIcon";
 import { AddIcon } from "../icons/AddIcon";
 import { EndIcon } from "../icons/EndIcon";
 import { SquareIcon } from "../icons/SquareIcon";
 import { LinkIcon } from "../icons/LinkIcon";
 import { useElementsStore } from "../../stores/elementsStore";
+import { ColorPicker } from "../ColorPicker";
 
 interface BackgroundSectionProps {
   selectedElement: OGElement;
@@ -34,23 +34,15 @@ export function BackgroundSection({ selectedElement }: BackgroundSectionProps) {
           {!selectedElement.gradient ? (
             <>
               <Text size="1">Background color</Text>
-              <TextField.Root
-                onChange={(event) => {
+              <ColorPicker
+                onChange={(backgroundColor) => {
                   updateElement({
                     ...selectedElement,
-                    backgroundColor: event.target.value,
+                    backgroundColor,
                   });
                 }}
                 value={selectedElement.backgroundColor}
-                variant="soft"
-                color="gray"
-                // @ts-expect-error wtf?
-                type="color"
-              >
-                <TextField.Slot>
-                  <ColorIcon />
-                </TextField.Slot>
-              </TextField.Root>
+              />
             </>
           ) : null}
           <Flex justify="between">
@@ -92,48 +84,36 @@ export function BackgroundSection({ selectedElement }: BackgroundSectionProps) {
           </Flex>
           {selectedElement.gradient ? (
             <Grid columns="2" gap="2">
-              <TextField.Root
-                onChange={(event) => {
+              <ColorPicker
+                onChange={(start) => {
                   updateElement({
                     ...selectedElement,
                     // @ts-expect-error wtf?
                     gradient: {
                       ...selectedElement.gradient,
-                      start: event.target.value,
+                      start,
                     },
                   });
                 }}
                 value={selectedElement.gradient.start}
-                variant="soft"
-                color="gray"
-                // @ts-expect-error wtf?
-                type="color"
               >
-                <TextField.Slot>
-                  <StartIcon />
-                </TextField.Slot>
-              </TextField.Root>
-              <TextField.Root
-                color="gray"
-                onChange={(event) => {
+                <StartIcon />
+              </ColorPicker>
+              <ColorPicker
+                onChange={(end) => {
                   updateElement({
                     ...selectedElement,
                     // @ts-expect-error wtf?
                     gradient: {
                       ...selectedElement.gradient,
-                      end: event.target.value,
+                      end,
                     },
                   });
                 }}
                 value={selectedElement.gradient.end}
-                variant="soft"
-                // @ts-expect-error wtf?
-                type="color"
               >
-                <TextField.Slot>
-                  <EndIcon />
-                </TextField.Slot>
-              </TextField.Root>
+                <EndIcon />
+              </ColorPicker>
               <Select.Root
                 onValueChange={(value) => {
                   updateElement({

apps/dashboard/src/components/RightPanel/BorderSection.tsx

@@ -9,9 +9,9 @@ import {
 import type { OGElement } from "../../lib/types";
 import { DeleteIcon } from "../icons/DeleteIcon";
 import { AddIcon } from "../icons/AddIcon";
-import { ColorIcon } from "../icons/ColorIcon";
 import { WidthIcon } from "../icons/WidthIcon";
 import { useElementsStore } from "../../stores/elementsStore";
+import { ColorPicker } from "../ColorPicker";
 
 interface BorderSectionProps {
   selectedElement: OGElement;
@@ -60,27 +60,19 @@ export function BorderSection({ selectedElement }: BorderSectionProps) {
       </Flex>
       {selectedElement.border ? (
         <Grid columns="2" gap="2">
-          <TextField.Root
-            onChange={(event) => {
+          <ColorPicker
+            onChange={(color) => {
               updateElement({
                 ...selectedElement,
                 // @ts-expect-error wtf?
                 border: {
                   ...selectedElement.border,
-                  color: event.target.value,
+                  color,
                 },
               });
             }}
             value={selectedElement.border.color}
-            variant="soft"
-            color="gray"
-            // @ts-expect-error wtf?
-            type="color"
-          >
-            <TextField.Slot>
-              <ColorIcon />
-            </TextField.Slot>
-          </TextField.Root>
+          />
           <TextField.Root
             color="gray"
             max={99}

apps/dashboard/src/components/RightPanel/FontSection.tsx

@@ -3,10 +3,10 @@ import type { OGElement } from "../../lib/types";
 import type { Font } from "../../lib/fonts";
 import { FONTS, FONT_WEIGHTS } from "../../lib/fonts";
 import { FontSizeIcon } from "../icons/FontSizeIcon";
-import { ColorIcon } from "../icons/ColorIcon";
 import { LineHeightIcon } from "../icons/LineHeightIcon";
 import { LetterSpacingIcon } from "../icons/LetterSpacingIcon";
 import { useElementsStore } from "../../stores/elementsStore";
+import { ColorPicker } from "../ColorPicker";
 
 const SPACES_REGEX = /\s+/g;
 
@@ -85,23 +85,15 @@ export function FontSection({ selectedElement }: FontSectionProps) {
           </TextField.Slot>
           <TextField.Slot>px</TextField.Slot>
         </TextField.Root>
-        <TextField.Root
-          color="gray"
-          onChange={(event) => {
+        <ColorPicker
+          onChange={(color) => {
             updateElement({
               ...selectedElement,
-              color: event.target.value,
+              color,
             });
           }}
           value={selectedElement.color}
-          variant="soft"
-          // @ts-expect-error wtf?
-          type="color"
-        >
-          <TextField.Slot>
-            <ColorIcon />
-          </TextField.Slot>
-        </TextField.Root>
+        />
         <TextField.Root
           color="gray"
           max={5}

apps/dashboard/src/components/RightPanel/MiscellanousSection.tsx

@@ -1,7 +1,6 @@
 import { Flex, Button, Grid, Text, TextField } from "@radix-ui/themes";
 import type { OGElement } from "../../lib/types";
 import { CornerIcon } from "../icons/CornerIcon";
-import { OpacityIcon } from "../icons/OpacityIcon";
 import { RotateIcon } from "../icons/RotateIcon";
 import { useElementsStore } from "../../stores/elementsStore";
 import { MagicWandIcon } from "../icons/MagicWandIcon";
@@ -20,25 +19,6 @@ export function MiscellanousSection({
     <Flex direction="column" gap="2">
       <Text size="1">Miscellanous</Text>
       <Grid columns="2" gap="2">
-        <TextField.Root
-          color="gray"
-          max={100}
-          min={0}
-          onChange={(event) => {
-            updateElement({
-              ...selectedElement,
-              opacity: event.target.valueAsNumber,
-            });
-          }}
-          type="number"
-          value={selectedElement.opacity}
-          variant="soft"
-        >
-          <TextField.Slot>
-            <OpacityIcon />
-          </TextField.Slot>
-          <TextField.Slot>%</TextField.Slot>
-        </TextField.Root>
         <TextField.Root
           color="gray"
           max={360}

apps/dashboard/src/components/RightPanel/ShadowSection.tsx

@@ -2,10 +2,10 @@ import { Flex, Grid, IconButton, Text, TextField } from "@radix-ui/themes";
 import type { OGElement } from "../../lib/types";
 import { DeleteIcon } from "../icons/DeleteIcon";
 import { AddIcon } from "../icons/AddIcon";
-import { ColorIcon } from "../icons/ColorIcon";
 import { WidthIcon } from "../icons/WidthIcon";
 import { GradientIcon } from "../icons/GradientIcon";
 import { useElementsStore } from "../../stores/elementsStore";
+import { ColorPicker } from "../ColorPicker";
 
 interface ShadowSectionProps {
   selectedElement: OGElement;
@@ -143,27 +143,19 @@ export function ShadowSection({ selectedElement }: ShadowSectionProps) {
             <TextField.Slot>Y</TextField.Slot>
             <TextField.Slot>px</TextField.Slot>
           </TextField.Root>
-          <TextField.Root
-            onChange={(event) => {
+          <ColorPicker
+            onChange={(color) => {
               updateElement({
                 ...selectedElement,
                 // @ts-expect-error wtf?
                 shadow: {
                   ...selectedElement.shadow,
-                  color: event.target.value,
+                  color,
                 },
               });
             }}
             value={selectedElement.shadow.color}
-            variant="soft"
-            color="gray"
-            // @ts-expect-error wtf?
-            type="color"
-          >
-            <TextField.Slot>
-              <ColorIcon />
-            </TextField.Slot>
-          </TextField.Root>
+          />
         </Grid>
       ) : null}
     </Flex>