Tweaks

public/editor/ColorPicker.tsx

@@ -6,6 +6,7 @@ import {
   PopoverContent,
   Popover,
 } from "@nextui-org/react";
+import { ColorFormat } from "./types";
 
 const rgbaObjToRgbaStr = (rgbaObj: {
   r: number;
@@ -22,15 +23,13 @@ export const ColorPicker = ({
   style,
   value,
   colorFormat = "hex",
-  allowAlpha = false,
   presetColors,
 }: {
   onClick?: () => void;
   onChange: (hex: string) => void;
   style?: CSSProperties;
   value: string;
-  colorFormat: "hex" | "rgba";
-  allowAlpha: boolean;
+  colorFormat: ColorFormat;
   presetColors: string[];
 }) => {
   return (
@@ -48,8 +47,8 @@ export const ColorPicker = ({
       <PopoverContent className="p-0">
         <Sketch
           color={value}
-          allowAlpha={allowAlpha}
           presetColors={presetColors}
+          colorFormat={colorFormat}
           onChange={(color) => {
             if (colorFormat === "rgba") {
               onChange(rgbaObjToRgbaStr(color.rgba));

public/editor/FeatureGallery.tsx

@@ -244,9 +244,7 @@ const FeatureSelector = ({
       });
     };
 
-    let colorFormat = gallerySectionConfig.colorFormat
-      ? gallerySectionConfig.colorFormat
-      : "hex";
+    const colorFormat = gallerySectionConfig.colorFormat || "hex";
 
     return (
       <div
@@ -284,7 +282,6 @@ const FeatureSelector = ({
                   }}
                   colorFormat={colorFormat}
                   presetColors={presetColors}
-                  allowAlpha={gallerySectionConfig.allowAlpha}
                   value={selectedColor}
                 />
                 <Input

public/editor/Sketch.tsx

@@ -9,13 +9,15 @@ import {
   type HsvaColor,
   rgbaStringToHsva,
   hsvaToHex,
+  hsvaToHexa,
   hexToHsva,
   color as handleColor,
   type ColorResult,
 } from "@uiw/color-convert";
 import Swatch from "@uiw/react-color-swatch";
 import { useEffect } from "react";
 import { roundTwoDecimals } from "./utils";
+import { ColorFormat } from "./types";
 
 // Similar to https://github.com/uiwjs/react-color/blob/632d4e9201e26b42ee7d5bfeda407144e9a6e2f3/packages/color-sketch/src/index.tsx but with EyeDropper added
 
@@ -62,7 +64,7 @@ const EyeDropperButton = ({
 
   return (
     <button
-      className="btn pt-0 ps-2 pe-1"
+      className="btn pt-1 ps-2 pe-1 h-fit"
       type="button"
       onClick={async () => {
         const eyeDropper = new window.EyeDropper!();
@@ -85,7 +87,7 @@ export interface SketchProps
   width?: number;
   color?: string | HsvaColor;
   presetColors: string[];
-  allowAlpha: boolean;
+  colorFormat: ColorFormat;
   onChange?: (newShade: ColorResult) => void;
 }
 
@@ -113,11 +115,18 @@ export const Sketch = React.forwardRef<HTMLDivElement, SketchProps>(
       width = 240,
       color,
       style,
-      allowAlpha,
+      colorFormat,
       presetColors,
       ...other
     } = props;
 
+    let formattedPresetColors = presetColors;
+    if (colorFormat === "rgba") {
+      formattedPresetColors = presetColors.map((rgbaColor) =>
+        hsvaToHexa(rgbaStringToHsva(rgbaColor)),
+      );
+    }
+
     const [hsva, setHsva] = useState({ h: 209, s: 36, v: 90, a: 1 });
     useEffect(() => {
       if (typeof color === "string" && validHex(color)) {
@@ -200,7 +209,7 @@ export const Sketch = React.forwardRef<HTMLDivElement, SketchProps>(
               />
             </div>
           </div>
-          {allowAlpha && (
+          {colorFormat === "rgba" && (
             <div style={{ display: "flex", marginTop: 4 }}>
               <div style={{ flex: 1 }}>
                 <Alpha
@@ -229,14 +238,14 @@ export const Sketch = React.forwardRef<HTMLDivElement, SketchProps>(
           <RGBA
             hsva={hsva}
             style={{ marginLeft: 6 }}
-            aProps={allowAlpha ? undefined : false}
+            aProps={colorFormat === "rgba" ? undefined : false}
             onChange={(result) => handleChange(result.hsva)}
           />
           <EyeDropperButton onChange={handleHex} />
         </div>
         <Swatch
           style={styleSwatch}
-          colors={presetColors}
+          colors={formattedPresetColors}
           color={hsvaToHex(hsva)}
           onChange={(hsvColor) => handleChange(hsvColor)}
           rectProps={{

public/editor/stateStore.ts

@@ -1,5 +1,10 @@
 import { create, StateCreator } from "zustand";
-import { CombinedState, GallerySectionConfig, GallerySize } from "./types";
+import {
+  ColorFormat,
+  CombinedState,
+  GallerySectionConfig,
+  GallerySize,
+} from "./types";
 import { generate } from "../../src/generate";
 import { generateRangeFromStep, getFromDict, roundTwoDecimals } from "./utils";
 import {
@@ -16,16 +21,14 @@ const gallerySectionInfos: (Pick<
   (
     | {
         selectionType: "color";
-        colorFormat: "rgba" | "hex";
-        allowAlpha: boolean;
+        colorFormat: ColorFormat;
         renderOptions: {
           valuesToRender: string[];
         };
       }
     | {
         selectionType: "colors";
-        colorFormat: "rgba" | "hex";
-        allowAlpha: boolean;
+        colorFormat: ColorFormat;
         renderOptions: {
           colorCount: number;
           valuesToRender: string[][];
@@ -53,7 +56,6 @@ const gallerySectionInfos: (Pick<
     isSelected: true,
     selectionType: "color",
     colorFormat: "hex",
-    allowAlpha: false,
     renderOptions: {
       valuesToRender: distinctSkinColors,
     },
@@ -139,7 +141,6 @@ const gallerySectionInfos: (Pick<
     text: "Hair Color",
     selectionType: "color",
     colorFormat: "hex",
-    allowAlpha: false,
     renderOptions: {
       valuesToRender: distinctHairColors,
     },
@@ -159,7 +160,6 @@ const gallerySectionInfos: (Pick<
     text: "Shave Style",
     selectionType: "color",
     colorFormat: "rgba",
-    allowAlpha: true,
     renderOptions: {
       valuesToRender: [
         "rgba(0,0,0,0)",
@@ -251,7 +251,6 @@ const gallerySectionInfos: (Pick<
     text: "Team Colors",
     selectionType: "colors",
     colorFormat: "hex",
-    allowAlpha: false,
     renderOptions: {
       colorCount: 3,
       valuesToRender: jerseyColorOptions,

public/editor/types.ts

@@ -52,7 +52,6 @@ type GallerySectionConfigColor = GallerySectionConfigBase & {
   selectionType: "color";
   selectedValue: string;
   colorFormat: ColorFormat;
-  allowAlpha: boolean;
   renderOptions: {
     valuesToRender: string[];
   };
@@ -62,7 +61,6 @@ type GallerySectionConfigColors = GallerySectionConfigBase & {
   selectionType: "colors";
   selectedValue: string[];
   colorFormat: ColorFormat;
-  allowAlpha: boolean;
   renderOptions: {
     colorCount: number;
     valuesToRender: string[][];

public/editor/utils.ts

@@ -162,8 +162,7 @@ export const luma = (colorHex: string): number => {
 
 export const doesStrLookLikeColor = (str: string): boolean => {
   const regex =
-    /^(#([0-9A-F]{3,4}){1,2}$|rgba?\((\d{1,3}),\s*(\d{1,3}),\s*(\d{1,3})(,\s*((0?\.\d+)|(1\.0?)|1))?\))$/i;
-
+    /^(#([0-9A-F]{3,4}){1,2}$|rgba?\((\d{1,3}),\s*(\d{1,3}),\s*(\d{1,3})(,\s*((0(?:\.\d+)?|1(?:\.0)?)))?\))$/i;
   return regex.test(str);
 };