From a6271fa7852d058e73e05e839de430370a0987dd Mon Sep 17 00:00:00 2001
From: Stef Williams <stef.williams@formidable.com>
Date: Tue, 7 Jan 2025 10:52:30 -0500
Subject: [PATCH 1/4] wip(theme-builder): allow custom theme import

---
 .../themes/_components/base-theme-panel.tsx   | 80 +++++++++++++++++--
 .../pages/themes/_providers/themeProvider.tsx |  9 ++-
 2 files changed, 79 insertions(+), 10 deletions(-)

diff --git a/website/src/pages/themes/_components/base-theme-panel.tsx b/website/src/pages/themes/_components/base-theme-panel.tsx
index bdbff9dda..6d96528cd 100644
--- a/website/src/pages/themes/_components/base-theme-panel.tsx
+++ b/website/src/pages/themes/_components/base-theme-panel.tsx
@@ -1,21 +1,60 @@
-import React from "react";
+import React, { useState } from "react";
 import Select from "./select";
 import { themes, useTheme } from "../_providers/themeProvider";
 import { usePreviewOptions } from "../_providers/previewOptionsProvider";
 import PanelHeader from "./panel-header";
 
-const themeOptions = themes.map((theme) => ({
-  label: theme.name,
-  value: theme.name,
-}));
+const themeOptions = [
+  ...themes.map((theme) => ({
+    label: theme.name,
+    value: theme.name,
+  })),
+  { label: "Custom", value: "custom" },
+];
 
 const BaseThemePanel = () => {
   const { baseTheme, onBaseThemeSelect } = useTheme();
   const { resetPreviewOptions } = usePreviewOptions();
+  const [isCustomTheme, setIsCustomTheme] = useState(false);
+  const [customTheme, setCustomTheme] = useState<string>("");
+  const [error, setError] = useState<string | null>(null);
 
   const handleThemeSelect = (themeName?: string) => {
-    onBaseThemeSelect(themeName);
-    resetPreviewOptions();
+    if (themeName === "custom") {
+      setIsCustomTheme(true);
+      resetPreviewOptions();
+    } else {
+      setIsCustomTheme(false);
+      onBaseThemeSelect(themeName);
+      resetPreviewOptions();
+    }
+  };
+
+  const handleCustomThemeChange = (
+    event: React.ChangeEvent<HTMLTextAreaElement>,
+  ) => {
+    setCustomTheme(event.target.value);
+    setError(null);
+  };
+
+  const applyCustomTheme = () => {
+    try {
+      console.log("trying to apply custom theme");
+      const parsedTheme = new Function(`return (${customTheme.trim()});`)();
+
+      if (typeof parsedTheme !== "object" || Array.isArray(parsedTheme)) {
+        console.log("Invalid theme structure. Must be an object.");
+        throw new Error("Invalid theme structure. Must be an object.");
+      }
+      console.log("parsedTheme", parsedTheme);
+      onBaseThemeSelect("custom", parsedTheme);
+      setError(null);
+    } catch (error) {
+      console.error(error);
+      setError(
+        "Invalid JavaScript object. Please check your theme configuration.",
+      );
+    }
   };
 
   return (
@@ -26,12 +65,37 @@ const BaseThemePanel = () => {
       />
       <Select
         id="theme-select"
-        value={baseTheme?.name || ""}
+        value={isCustomTheme ? "custom" : baseTheme?.name || ""}
         onChange={handleThemeSelect}
         options={themeOptions}
         label="Theme"
       />
+      {isCustomTheme && (
+        <div className="mt-4">
+          <label
+            htmlFor="custom-theme"
+            className="block text-sm font-bold mb-2"
+          >
+            Custom Theme Object
+          </label>
+          <textarea
+            id="custom-theme"
+            value={customTheme}
+            onChange={handleCustomThemeChange}
+            className="w-full h-40 p-2 border rounded resize-none"
+            placeholder="Paste your custom theme object here"
+          />
+          {error && <p className="text-red-500 text-sm mt-2">{error}</p>}
+          <button
+            onClick={applyCustomTheme}
+            className="mt-2 px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"
+          >
+            Apply Custom Theme
+          </button>
+        </div>
+      )}
     </>
   );
 };
+
 export default BaseThemePanel;
diff --git a/website/src/pages/themes/_providers/themeProvider.tsx b/website/src/pages/themes/_providers/themeProvider.tsx
index 7c730b4d6..abc3d1441 100644
--- a/website/src/pages/themes/_providers/themeProvider.tsx
+++ b/website/src/pages/themes/_providers/themeProvider.tsx
@@ -9,7 +9,7 @@ export type ThemeOption = {
 
 type ThemeContextType = {
   baseTheme: ThemeOption | undefined;
-  onBaseThemeSelect: (themeName?: string) => void;
+  onBaseThemeSelect: (themeName?: string, themeConfig?: any) => void;
   customThemeConfig: VictoryThemeDefinition | undefined;
   updateCustomThemeConfig: (path: string | string[], newValue: unknown) => void;
 };
@@ -29,7 +29,12 @@ export const ThemeProvider = ({ children }) => {
   const [customThemeConfig, setCustomThemeConfig] =
     React.useState<VictoryThemeDefinition>(defaultTheme.config);
 
-  const onBaseThemeSelect = (themeName?: string) => {
+  const onBaseThemeSelect = (themeName?: string, themeConfig) => {
+    if (themeName === "custom") {
+      setBaseTheme(undefined);
+      setCustomThemeConfig(themeConfig);
+      return;
+    }
     const theme = themes.find((t) => t.name === themeName);
     if (!theme) {
       setBaseTheme(defaultTheme);

From 0b573bef33360d14e6bea34e22dee5ba1b280fe4 Mon Sep 17 00:00:00 2001
From: Stef Williams <stef.williams@formidable.com>
Date: Tue, 7 Jan 2025 16:29:53 -0500
Subject: [PATCH 2/4] feat(theme-builder): add in monaco editor for theme
 import

---
 pnpm-lock.yaml                                |  37 ++++++
 website/package.json                          |   3 +-
 .../themes/_components/base-theme-panel.tsx   | 107 ++++++++++--------
 .../pages/themes/_components/export-panel.tsx |   7 +-
 .../pages/themes/_components/panel-header.tsx |   2 +-
 .../pages/themes/_providers/themeProvider.tsx |  37 ++++--
 website/src/pages/themes/_utils.ts            |   4 +
 7 files changed, 133 insertions(+), 64 deletions(-)

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 23624e32d..960c8e366 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1157,6 +1157,9 @@ importers:
       '@mdx-js/react':
         specifier: ^3.0.0
         version: 3.1.0(@types/react@18.0.15)(react@18.2.0)
+      '@monaco-editor/react':
+        specifier: ^4.6.0
+        version: 4.6.0(monaco-editor@0.52.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       axios:
         specifier: ^1.7.7
         version: 1.7.7
@@ -3492,6 +3495,18 @@ packages:
       '@types/react': '>=16'
       react: '>=16'
 
+  '@monaco-editor/loader@1.4.0':
+    resolution: {integrity: sha512-00ioBig0x642hytVspPl7DbQyaSWRaolYie/UFNjoTdvoKPzo6xrXLhTk9ixgIKcLH5b5vDOjVNiGyY+uDCUlg==}
+    peerDependencies:
+      monaco-editor: '>= 0.21.0 < 1'
+
+  '@monaco-editor/react@4.6.0':
+    resolution: {integrity: sha512-RFkU9/i7cN2bsq/iTkurMWOEErmYcY6JiQI3Jn+WeR/FGISH8JbHERjpS9oRuSOPvDMJI0Z8nJeKkbOs9sBYQw==}
+    peerDependencies:
+      monaco-editor: '>= 0.25.0 < 1'
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0
+      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
+
   '@napi-rs/wasm-runtime@0.2.5':
     resolution: {integrity: sha512-kwUxR7J9WLutBbulqg1dfOrMTwhMdXLdcGUhcbCcGwnPLt3gz19uHVdwH1syKVDbE022ZS2vZxOWflFLS0YTjw==}
 
@@ -9081,6 +9096,9 @@ packages:
     engines: {node: '>=10'}
     hasBin: true
 
+  monaco-editor@0.52.2:
+    resolution: {integrity: sha512-GEQWEZmfkOGLdd3XK8ryrfWz3AIP8YymVXiPHEdewrUq7mh0qrKrfHLNCXcbB6sTnMLnOZ3ztSiKcciFUkIJwQ==}
+
   mrmime@2.0.0:
     resolution: {integrity: sha512-eu38+hdgojoyq63s+yTpN4XMBdt5l8HhMhc4VKLO9KM5caLIBvUm4thi7fFaxyTmCKeNnXZ5pAlBwCUnhA09uw==}
     engines: {node: '>=10'}
@@ -10902,6 +10920,9 @@ packages:
   starts-with@1.0.2:
     resolution: {integrity: sha512-QUw5X+IMTGDm1nrdowEdDaA0MNiUmRlQFwpTTXmhuPKQc+7b0h8fOHtlt1zZqcEK5x1Fsitrobo7KEusc+d1rg==}
 
+  state-local@1.0.7:
+    resolution: {integrity: sha512-HTEHMNieakEnoe33shBYcZ7NX83ACUjCu8c40iOGEZsngj9zRnkqS9j1pqQPXwobB0ZcVTk27REb7COQ0UR59w==}
+
   state-toggle@1.0.3:
     resolution: {integrity: sha512-d/5Z4/2iiCnHw6Xzghyhb+GcmF89bxwgXG60wjIiZaxnymbyOmI8Hk4VqHXiVVp6u2ysaskFfXg3ekCj4WNftQ==}
 
@@ -16526,6 +16547,18 @@ snapshots:
       '@types/react': 18.0.15
       react: 18.2.0
 
+  '@monaco-editor/loader@1.4.0(monaco-editor@0.52.2)':
+    dependencies:
+      monaco-editor: 0.52.2
+      state-local: 1.0.7
+
+  '@monaco-editor/react@4.6.0(monaco-editor@0.52.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
+    dependencies:
+      '@monaco-editor/loader': 1.4.0(monaco-editor@0.52.2)
+      monaco-editor: 0.52.2
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+
   '@napi-rs/wasm-runtime@0.2.5':
     dependencies:
       '@emnapi/core': 1.3.1
@@ -24060,6 +24093,8 @@ snapshots:
 
   mkdirp@1.0.4: {}
 
+  monaco-editor@0.52.2: {}
+
   mrmime@2.0.0: {}
 
   ms@2.0.0: {}
@@ -26185,6 +26220,8 @@ snapshots:
 
   starts-with@1.0.2: {}
 
+  state-local@1.0.7: {}
+
   state-toggle@1.0.3: {}
 
   statuses@1.5.0: {}
diff --git a/website/package.json b/website/package.json
index 2717a857f..7d79437ff 100644
--- a/website/package.json
+++ b/website/package.json
@@ -25,6 +25,7 @@
     "@docusaurus/theme-live-codeblock": "^3.5.2",
     "@easyops-cn/docusaurus-search-local": "^0.44.5",
     "@mdx-js/react": "^3.0.0",
+    "@monaco-editor/react": "^4.6.0",
     "axios": "^1.7.7",
     "clsx": "^2.0.0",
     "date-fns": "^3.6.0",
@@ -41,13 +42,13 @@
     "@docusaurus/module-type-aliases": "^3.5.2",
     "@docusaurus/tsconfig": "^3.5.2",
     "@docusaurus/types": "^3.5.2",
+    "@heroicons/react": "^2.2.0",
     "@types/react": "^18.0.0",
     "autoprefixer": "^10.4.20",
     "d3-array": "^2.4.0",
     "d3-scale": "^3.2.1",
     "d3-time": "^1.1.0",
     "find-cache-dir": "5.0.0",
-    "@heroicons/react": "^2.2.0",
     "mdast-util-from-markdown": "^2.0.1",
     "postcss": "^8.4.38",
     "prismjs": "^1.29.0",
diff --git a/website/src/pages/themes/_components/base-theme-panel.tsx b/website/src/pages/themes/_components/base-theme-panel.tsx
index 6d96528cd..470e4ae8c 100644
--- a/website/src/pages/themes/_components/base-theme-panel.tsx
+++ b/website/src/pages/themes/_components/base-theme-panel.tsx
@@ -1,100 +1,113 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import Select from "./select";
-import { themes, useTheme } from "../_providers/themeProvider";
+import { CUSTOM_THEME, themes, useTheme } from "../_providers/themeProvider";
 import { usePreviewOptions } from "../_providers/previewOptionsProvider";
 import PanelHeader from "./panel-header";
+import Editor from "@monaco-editor/react";
+import { Button } from "@site/src/components/button";
+import { stringifyWithoutQuotes } from "../_utils";
+
+const EDITOR_OPTIONS = {
+  minimap: { enabled: false },
+  fontSize: 12,
+};
 
 const themeOptions = [
   ...themes.map((theme) => ({
     label: theme.name,
     value: theme.name,
   })),
-  { label: "Custom", value: "custom" },
 ];
 
 const BaseThemePanel = () => {
-  const { baseTheme, onBaseThemeSelect } = useTheme();
+  const { baseTheme, onBaseThemeSelect, customThemeConfig } = useTheme();
   const { resetPreviewOptions } = usePreviewOptions();
-  const [isCustomTheme, setIsCustomTheme] = useState(false);
-  const [customTheme, setCustomTheme] = useState<string>("");
+  const [customTheme, setCustomTheme] = useState<string>(() =>
+    stringifyWithoutQuotes(customThemeConfig),
+  );
   const [error, setError] = useState<string | null>(null);
 
+  useEffect(() => {
+    setCustomTheme(stringifyWithoutQuotes(customThemeConfig));
+  }, [customThemeConfig]);
+
   const handleThemeSelect = (themeName?: string) => {
-    if (themeName === "custom") {
-      setIsCustomTheme(true);
-      resetPreviewOptions();
-    } else {
-      setIsCustomTheme(false);
-      onBaseThemeSelect(themeName);
-      resetPreviewOptions();
-    }
+    const theme = themes.find((t) => t.name === themeName);
+    if (!theme) return;
+    onBaseThemeSelect(theme);
+    resetPreviewOptions();
   };
 
-  const handleCustomThemeChange = (
-    event: React.ChangeEvent<HTMLTextAreaElement>,
-  ) => {
-    setCustomTheme(event.target.value);
+  const handleCustomThemeChange = (value: string | undefined) => {
+    setCustomTheme(value || "");
     setError(null);
   };
 
   const applyCustomTheme = () => {
     try {
-      console.log("trying to apply custom theme");
       const parsedTheme = new Function(`return (${customTheme.trim()});`)();
-
       if (typeof parsedTheme !== "object" || Array.isArray(parsedTheme)) {
-        console.log("Invalid theme structure. Must be an object.");
         throw new Error("Invalid theme structure. Must be an object.");
       }
-      console.log("parsedTheme", parsedTheme);
-      onBaseThemeSelect("custom", parsedTheme);
+
+      onBaseThemeSelect({
+        ...CUSTOM_THEME,
+        config: parsedTheme,
+      });
       setError(null);
-    } catch (error) {
-      console.error(error);
+    } catch {
       setError(
         "Invalid JavaScript object. Please check your theme configuration.",
       );
     }
   };
 
+  const handleEditorMount = (_, monaco) => {
+    monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
+      validate: false,
+      enableSchemaRequest: false,
+      schemas: [],
+    });
+  };
+
+  const isCustomTheme = baseTheme?.name === CUSTOM_THEME.name;
+
   return (
-    <>
+    <div className="flex flex-col h-full">
       <PanelHeader
         title="Base Theme"
         description="Select a theme to begin customizing."
       />
       <Select
         id="theme-select"
-        value={isCustomTheme ? "custom" : baseTheme?.name || ""}
+        value={baseTheme?.name || ""}
         onChange={handleThemeSelect}
         options={themeOptions}
         label="Theme"
       />
       {isCustomTheme && (
-        <div className="mt-4">
-          <label
-            htmlFor="custom-theme"
-            className="block text-sm font-bold mb-2"
-          >
-            Custom Theme Object
-          </label>
-          <textarea
-            id="custom-theme"
-            value={customTheme}
-            onChange={handleCustomThemeChange}
-            className="w-full h-40 p-2 border rounded resize-none"
-            placeholder="Paste your custom theme object here"
-          />
+        <div className="mt-4 flex-1 flex flex-col justify-start">
+          <p className="text-sm text-grayscale-400 mb-2">
+            Extend the theme object below to apply your own theme configuration.
+          </p>
+          <div className="w-full flex-1 border rounded">
+            <Editor
+              height="100%"
+              defaultLanguage="json"
+              theme="vs-dark"
+              value={customTheme}
+              onChange={handleCustomThemeChange}
+              onMount={handleEditorMount}
+              options={EDITOR_OPTIONS}
+            />
+          </div>
           {error && <p className="text-red-500 text-sm mt-2">{error}</p>}
-          <button
-            onClick={applyCustomTheme}
-            className="mt-2 px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"
-          >
+          <Button onClick={applyCustomTheme} className="mt-4">
             Apply Custom Theme
-          </button>
+          </Button>
         </div>
       )}
-    </>
+    </div>
   );
 };
 
diff --git a/website/src/pages/themes/_components/export-panel.tsx b/website/src/pages/themes/_components/export-panel.tsx
index f72769415..4d45e9cb5 100644
--- a/website/src/pages/themes/_components/export-panel.tsx
+++ b/website/src/pages/themes/_components/export-panel.tsx
@@ -3,13 +3,10 @@ import CodeBlock from "./code-block";
 import { useTheme } from "../_providers/themeProvider";
 import { VictoryTheme } from "victory";
 import { Button } from "@site/src/components/button";
+import { stringifyWithoutQuotes } from "../_utils";
 
 const generateThemeCode = (config, format: "js" | "ts") => {
-  const jsonConfig = JSON.stringify(config, null, 2).replace(
-    // Remove quotes around keys
-    /"([^"]+)":/g,
-    "$1:",
-  );
+  const jsonConfig = stringifyWithoutQuotes(config);
   if (format === "js") {
     return `/** @type {import('victory').VictoryThemeDefinition} */\n\nconst customTheme = ${jsonConfig};\n\nexport default customTheme;`;
   }
diff --git a/website/src/pages/themes/_components/panel-header.tsx b/website/src/pages/themes/_components/panel-header.tsx
index 4d82ff03c..d5ca18551 100644
--- a/website/src/pages/themes/_components/panel-header.tsx
+++ b/website/src/pages/themes/_components/panel-header.tsx
@@ -10,7 +10,7 @@ const PanelHeader = ({ title, description }: PanelHeaderProps) => {
     <div className="mb-4">
       {!!title && <h2 className="mb-0 text-xl font-bold">{title}</h2>}
       {!!description && (
-        <p className="text-sm mt-1 text-grayscale-400">{description}</p>
+        <p className="text-sm mt-1 mb-0 text-grayscale-400">{description}</p>
       )}
     </div>
   );
diff --git a/website/src/pages/themes/_providers/themeProvider.tsx b/website/src/pages/themes/_providers/themeProvider.tsx
index abc3d1441..201863a61 100644
--- a/website/src/pages/themes/_providers/themeProvider.tsx
+++ b/website/src/pages/themes/_providers/themeProvider.tsx
@@ -9,15 +9,34 @@ export type ThemeOption = {
 
 type ThemeContextType = {
   baseTheme: ThemeOption | undefined;
-  onBaseThemeSelect: (themeName?: string, themeConfig?: any) => void;
+  onBaseThemeSelect: (theme: ThemeOption) => void;
   customThemeConfig: VictoryThemeDefinition | undefined;
   updateCustomThemeConfig: (path: string | string[], newValue: unknown) => void;
 };
 
+const CUSTOM_THEME_CONFIG: VictoryThemeDefinition = {
+  candlestick: {
+    style: {
+      labels: {
+        padding: 5,
+      },
+    },
+  },
+  errorbar: {
+    borderWidth: 8,
+  },
+};
+
+export const CUSTOM_THEME = {
+  name: "Import custom theme",
+  config: CUSTOM_THEME_CONFIG,
+};
+
 export const themes: ThemeOption[] = [
   { name: "Clean", config: VictoryTheme.clean },
   { name: "Material", config: VictoryTheme.material },
   { name: "Grayscale", config: VictoryTheme.grayscale },
+  CUSTOM_THEME,
 ];
 
 const defaultTheme = themes[0];
@@ -29,19 +48,13 @@ export const ThemeProvider = ({ children }) => {
   const [customThemeConfig, setCustomThemeConfig] =
     React.useState<VictoryThemeDefinition>(defaultTheme.config);
 
-  const onBaseThemeSelect = (themeName?: string, themeConfig) => {
-    if (themeName === "custom") {
-      setBaseTheme(undefined);
-      setCustomThemeConfig(themeConfig);
-      return;
-    }
-    const theme = themes.find((t) => t.name === themeName);
+  const onBaseThemeSelect = (theme: ThemeOption) => {
     if (!theme) {
       setBaseTheme(defaultTheme);
       setCustomThemeConfig(defaultTheme.config);
     } else {
       setBaseTheme(theme);
-      setCustomThemeConfig({ ...theme?.config });
+      setCustomThemeConfig({ ...theme.config });
     }
   };
 
@@ -53,9 +66,13 @@ export const ThemeProvider = ({ children }) => {
         path,
         newValue,
       );
+
+      if (baseTheme.name !== CUSTOM_THEME.name) {
+        setBaseTheme(CUSTOM_THEME);
+      }
       setCustomThemeConfig(updatedConfig);
     },
-    [customThemeConfig],
+    [customThemeConfig, baseTheme],
   );
 
   return (
diff --git a/website/src/pages/themes/_utils.ts b/website/src/pages/themes/_utils.ts
index 05150014e..301158d7c 100644
--- a/website/src/pages/themes/_utils.ts
+++ b/website/src/pages/themes/_utils.ts
@@ -134,3 +134,7 @@ export const getBaseLabelsConfig = (
     path: getPath(basePath, "fill"),
   },
 ];
+
+export const stringifyWithoutQuotes = (config: unknown) => {
+  return JSON.stringify(config, null, 2).replace(/"([^"]+)":/g, "$1:");
+};

From b662f1187d2311927df60db4a6209a273bf0f368 Mon Sep 17 00:00:00 2001
From: Stef Williams <stef.williams@formidable.com>
Date: Wed, 8 Jan 2025 09:41:30 -0500
Subject: [PATCH 3/4] feat(theme-builder): add default custom color scale for
 override selector

---
 .../_components/color-scale-override-selector.tsx  | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/website/src/pages/themes/_components/color-scale-override-selector.tsx b/website/src/pages/themes/_components/color-scale-override-selector.tsx
index a3f42eeb2..b44c5ecdc 100644
--- a/website/src/pages/themes/_components/color-scale-override-selector.tsx
+++ b/website/src/pages/themes/_components/color-scale-override-selector.tsx
@@ -16,6 +16,15 @@ type ColorScaleOverrideSelectorProps = {
   className?: string;
 };
 
+const DEFAULT_COLOR_SCALE = [
+  "#252525",
+  "#525252",
+  "#737373",
+  "#969696",
+  "#bdbdbd",
+  "#d9d9d9",
+];
+
 const ColorScaleOverrideSelector = ({
   id,
   label = "Color Scale",
@@ -26,10 +35,7 @@ const ColorScaleOverrideSelector = ({
 }: ColorScaleOverrideSelectorProps) => {
   const { colorScale, updateColorScale } = usePreviewOptions();
   const hasCustomValue = Array.isArray(value);
-  const [initialCustomValue] = React.useState(
-    hasCustomValue ? value : undefined,
-  );
-
+  const initialCustomValue = hasCustomValue ? value : DEFAULT_COLOR_SCALE;
   const setColorScaleToDefault = useCallback(() => {
     if (colorScale !== defaultColorScale) {
       updateColorScale(defaultColorScale);

From 552395fae79ff78e4540b37b79603a69608129bd Mon Sep 17 00:00:00 2001
From: Stef Williams <stef.williams@formidable.com>
Date: Wed, 8 Jan 2025 10:46:48 -0500
Subject: [PATCH 4/4] wip(theme-builder): add and remove colors from color
 scales

---
 .../_components/color-palette-selector.tsx    | 35 ++++++++--
 .../pages/themes/_components/color-picker.tsx | 34 +++++++---
 .../color-scale-override-selector.tsx         | 67 +++++++++++--------
 3 files changed, 92 insertions(+), 44 deletions(-)

diff --git a/website/src/pages/themes/_components/color-palette-selector.tsx b/website/src/pages/themes/_components/color-palette-selector.tsx
index ddef79a5b..745f85e2d 100644
--- a/website/src/pages/themes/_components/color-palette-selector.tsx
+++ b/website/src/pages/themes/_components/color-palette-selector.tsx
@@ -4,6 +4,8 @@ import { ColorScalePropType, VictoryThemeDefinition } from "victory";
 import { ColorChangeArgs } from "./control";
 import clsx from "clsx";
 import { usePreviewOptions } from "../_providers/previewOptionsProvider";
+import { useTheme } from "../_providers/themeProvider";
+import { TiPlus } from "react-icons/ti";
 
 type ColorPaletteSelectorProps = {
   label: string;
@@ -23,22 +25,39 @@ const ColorPaletteSelector = ({
   className,
 }: ColorPaletteSelectorProps) => {
   const { colorScale, updateColorScale } = usePreviewOptions();
+  const { updateCustomThemeConfig } = useTheme();
 
   const handleRadioChange = () => {
     updateColorScale(value);
   };
 
   const handleColorChange = (newColor, i, cScale) => {
-    onColorChange({
-      newColor,
-      index: i,
-      colorScale: cScale,
-    });
+    if (newColor === undefined) {
+      // Remove color if undefined
+      const updatedColors = palette?.[cScale]?.filter(
+        (_, index) => index !== i,
+      );
+      updateCustomThemeConfig(`palette.${cScale}`, updatedColors);
+    } else {
+      onColorChange({
+        newColor,
+        index: i,
+        colorScale: cScale,
+      });
+    }
     if (colorScale !== cScale) {
       updateColorScale(cScale);
     }
   };
 
+  const handleAddColor = () => {
+    const updatedColors = [
+      ...(palette?.[colorScaleType as string] || []),
+      "#000000",
+    ];
+    updateCustomThemeConfig(`palette.${colorScaleType}`, updatedColors);
+  };
+
   const isSelected = colorScale === value;
 
   return (
@@ -69,6 +88,12 @@ const ColorPaletteSelector = ({
                 }
               />
             ))}
+            <button
+              onClick={handleAddColor}
+              className="font-medium flex w-[35px] h-[35px] rounded-full cursor-pointer justify-center items-center border-2 border-grayscale-300"
+            >
+              <TiPlus className="text-lg" />
+            </button>
           </div>
         )}
       </div>
diff --git a/website/src/pages/themes/_components/color-picker.tsx b/website/src/pages/themes/_components/color-picker.tsx
index f0c4477d0..e0b2a4947 100644
--- a/website/src/pages/themes/_components/color-picker.tsx
+++ b/website/src/pages/themes/_components/color-picker.tsx
@@ -1,7 +1,8 @@
 import React, { useId } from "react";
-import { TiPencil } from "react-icons/ti";
+import { TiMinus, TiPencil } from "react-icons/ti";
 import clsx from "clsx";
 import Select from "./select";
+import { useTheme } from "../_providers/themeProvider";
 
 type ColorPickerProps = {
   label?: string;
@@ -25,6 +26,7 @@ const ColorPicker = ({
   showColorName = false,
   className,
 }: ColorPickerProps) => {
+  const { updateCustomThemeConfig } = useTheme();
   const [isPickerOpen, setIsPickerOpen] = React.useState(false);
   const [colorOption, setColorOption] = React.useState<string | undefined>(
     () => {
@@ -50,9 +52,11 @@ const ColorPicker = ({
   };
 
   const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    if (onColorChange) {
-      onColorChange(event.target.value);
-    }
+    onColorChange(event.target.value);
+  };
+
+  const handleRemoveColor = () => {
+    onColorChange(undefined);
   };
 
   const id = useId();
@@ -106,13 +110,21 @@ const ColorPicker = ({
                   }}
                 />
                 {!showColorName && (
-                  <div
-                    className={`absolute top-0 left-0 w-full h-full text-white flex justify-center items-center text-xl rounded-full opacity-0 group-hover/swatch:opacity-100 ${
-                      isPickerOpen ? "opacity-100" : ""
-                    }`}
-                  >
-                    <TiPencil />
-                  </div>
+                  <>
+                    <div
+                      className={`absolute top-0 left-0 w-full h-full text-white flex justify-center items-center text-xl rounded-full opacity-0 group-hover/swatch:opacity-100 ${
+                        isPickerOpen ? "opacity-100" : ""
+                      }`}
+                    >
+                      <TiPencil />
+                    </div>
+                    <button
+                      onClick={handleRemoveColor}
+                      className="absolute -top-1.5 -right-1.5 w-5 h-5 text-white bg-red-500 flex justify-center items-center text-xl rounded-full opacity-0 group-hover/swatch:opacity-100 z-20 cursor-pointer"
+                    >
+                      <TiMinus />
+                    </button>
+                  </>
                 )}
               </div>
               {showColorName && (
diff --git a/website/src/pages/themes/_components/color-scale-override-selector.tsx b/website/src/pages/themes/_components/color-scale-override-selector.tsx
index b44c5ecdc..36456002b 100644
--- a/website/src/pages/themes/_components/color-scale-override-selector.tsx
+++ b/website/src/pages/themes/_components/color-scale-override-selector.tsx
@@ -6,6 +6,7 @@ import {
   defaultColorScale,
   usePreviewOptions,
 } from "../_providers/previewOptionsProvider";
+import { TiPlus } from "react-icons/ti";
 
 type ColorScaleOverrideSelectorProps = {
   id: string;
@@ -16,15 +17,6 @@ type ColorScaleOverrideSelectorProps = {
   className?: string;
 };
 
-const DEFAULT_COLOR_SCALE = [
-  "#252525",
-  "#525252",
-  "#737373",
-  "#969696",
-  "#bdbdbd",
-  "#d9d9d9",
-];
-
 const ColorScaleOverrideSelector = ({
   id,
   label = "Color Scale",
@@ -34,8 +26,7 @@ const ColorScaleOverrideSelector = ({
   className,
 }: ColorScaleOverrideSelectorProps) => {
   const { colorScale, updateColorScale } = usePreviewOptions();
-  const hasCustomValue = Array.isArray(value);
-  const initialCustomValue = hasCustomValue ? value : DEFAULT_COLOR_SCALE;
+  const [showCustomColors, setShowCustomColors] = React.useState(false);
   const setColorScaleToDefault = useCallback(() => {
     if (colorScale !== defaultColorScale) {
       updateColorScale(defaultColorScale);
@@ -43,46 +34,66 @@ const ColorScaleOverrideSelector = ({
   }, [colorScale, updateColorScale]);
 
   const onCheckboxChange = (isChecked) => {
-    if (isChecked) {
-      onChange(initialCustomValue);
-    } else {
+    setShowCustomColors(isChecked);
+    if (!isChecked) {
       onChange(undefined);
     }
     setColorScaleToDefault();
   };
 
   const handleColorChange = (newColor, index) => {
-    const newValue = [...(value as string[])];
-    newValue[index] = newColor;
+    if (newColor === undefined) {
+      // Remove color if undefined
+      const newValue = [...(value as string[])].filter((_, i) => i !== index);
+      onChange(newValue);
+    } else {
+      const newValue = [...(value as string[])];
+      newValue[index] = newColor;
+      onChange(newValue);
+    }
+    setColorScaleToDefault();
+  };
+
+  const handleAddColor = () => {
+    const newValue = Array.isArray(value)
+      ? [...(value as string[]), "#000000"]
+      : ["#000000"];
     onChange(newValue);
     setColorScaleToDefault();
   };
 
   return (
-    <label className={clsx("p-0 m-0", className)}>
-      <span className="block mb-3 text-sm font-bold">{label}</span>
+    <div className={clsx("p-0 m-0", className)}>
+      <label className="block mb-3 text-sm font-bold">{label}</label>
       {!hideDefaultToggle && (
         <Toggle
           id={id}
           label="Use custom color scale"
-          checked={hasCustomValue}
+          checked={showCustomColors}
           onChange={onCheckboxChange}
           className="mb-3"
           size="sm"
         />
       )}
-      {hasCustomValue && (
+      {showCustomColors && (
         <div className="flex flex-wrap gap-2 mt-3">
-          {value.map((color, i) => (
-            <ColorPicker
-              key={i}
-              color={color}
-              onColorChange={(newColor) => handleColorChange(newColor, i)}
-            />
-          ))}
+          {Array.isArray(value) &&
+            value?.map((color, i) => (
+              <ColorPicker
+                key={i}
+                color={color}
+                onColorChange={(newColor) => handleColorChange(newColor, i)}
+              />
+            ))}
+          <button
+            onClick={handleAddColor}
+            className="font-medium flex w-[35px] h-[35px] rounded-full cursor-pointer justify-center items-center border-2 border-grayscale-300"
+          >
+            <TiPlus className="text-lg" />
+          </button>
         </div>
       )}
-    </label>
+    </div>
   );
 };
 export default ColorScaleOverrideSelector;