From 6e8bb94c9f38a8a160b034fd324f9b1fb50b0d67 Mon Sep 17 00:00:00 2001
From: Ross Gray <ross@posthog.com>
Date: Tue, 29 Oct 2024 13:24:13 +0000
Subject: [PATCH] Move color picker component into separate file

---
 .../Components/ColorPickerButton.tsx          | 74 ++++++++++++++++++
 .../ConditionalFormattingTab.tsx              | 75 +------------------
 2 files changed, 78 insertions(+), 71 deletions(-)
 create mode 100644 frontend/src/queries/nodes/DataVisualization/Components/ColorPickerButton.tsx

diff --git a/frontend/src/queries/nodes/DataVisualization/Components/ColorPickerButton.tsx b/frontend/src/queries/nodes/DataVisualization/Components/ColorPickerButton.tsx
new file mode 100644
index 00000000000000..1d44ac883c5ee8
--- /dev/null
+++ b/frontend/src/queries/nodes/DataVisualization/Components/ColorPickerButton.tsx
@@ -0,0 +1,74 @@
+import { LemonButton, Popover } from '@posthog/lemon-ui'
+import { useValues } from 'kea'
+import { SeriesGlyph } from 'lib/components/SeriesGlyph'
+import { hexToRGBA, lightenDarkenColor, RGBToHex, RGBToRGBA } from 'lib/utils'
+import { useState } from 'react'
+import { ColorResult, TwitterPicker } from 'react-color'
+
+import { themeLogic } from '~/layout/navigation-3000/themeLogic'
+
+const DEFAULT_PICKER_COLORS = [
+    '#FFADAD', // Current default
+    '#E8A598',
+    '#FFD6A5',
+    '#FFCFD2',
+    '#FDFFB6',
+    '#C1FBA4',
+    '#9BF6FF',
+    '#A0C4FF',
+    '#BDB2FF',
+    '#FFC6FF',
+]
+
+export const ColorPickerButton = ({
+    color,
+    onColorSelect: propOnColorSelect,
+}: {
+    color: string
+    onColorSelect?: (color: string) => void
+}): JSX.Element => {
+    const [pickerOpen, setPickerOpen] = useState(false)
+    const { isDarkModeOn } = useValues(themeLogic)
+
+    const onColorSelect = (colorResult: ColorResult): void => {
+        if (propOnColorSelect) {
+            propOnColorSelect(colorResult.hex)
+        }
+
+        if (DEFAULT_PICKER_COLORS.includes(colorResult.hex)) {
+            setPickerOpen(false)
+        }
+    }
+
+    const colors = isDarkModeOn
+        ? DEFAULT_PICKER_COLORS.map((n) => RGBToHex(lightenDarkenColor(n, -30)))
+        : DEFAULT_PICKER_COLORS
+
+    return (
+        <Popover
+            visible={pickerOpen}
+            overlay={<TwitterPicker color={color} colors={colors} onChangeComplete={onColorSelect} />}
+            onClickOutside={() => setPickerOpen(false)}
+            padded={false}
+        >
+            <LemonButton
+                type="secondary"
+                onClick={() => setPickerOpen(!pickerOpen)}
+                sideIcon={<></>}
+                className="ConditionalFormattingTab__ColorPicker"
+            >
+                <SeriesGlyph
+                    style={{
+                        borderColor: color,
+                        color: color,
+                        backgroundColor: isDarkModeOn
+                            ? RGBToRGBA(lightenDarkenColor(color, -20), 0.3)
+                            : hexToRGBA(color, 0.5),
+                    }}
+                >
+                    <></>
+                </SeriesGlyph>
+            </LemonButton>
+        </Popover>
+    )
+}
diff --git a/frontend/src/queries/nodes/DataVisualization/Components/ConditionalFormatting/ConditionalFormattingTab.tsx b/frontend/src/queries/nodes/DataVisualization/Components/ConditionalFormatting/ConditionalFormattingTab.tsx
index 15009af8c17d84..30cd92628f8170 100644
--- a/frontend/src/queries/nodes/DataVisualization/Components/ConditionalFormatting/ConditionalFormattingTab.tsx
+++ b/frontend/src/queries/nodes/DataVisualization/Components/ConditionalFormatting/ConditionalFormattingTab.tsx
@@ -1,14 +1,13 @@
 import './ConditionalFormattingTab.scss'
 
 import { IconPlusSmall, IconTrash } from '@posthog/icons'
-import { LemonButton, LemonCollapse, LemonInput, LemonSelect, LemonTag, Popover } from '@posthog/lemon-ui'
+import { LemonButton, LemonCollapse, LemonInput, LemonSelect, LemonTag } from '@posthog/lemon-ui'
 import { useActions, useValues } from 'kea'
 import { SeriesGlyph } from 'lib/components/SeriesGlyph'
-import { hexToRGBA, lightenDarkenColor, RGBToHex, RGBToRGBA } from 'lib/utils'
-import { useState } from 'react'
-import { ColorResult, TwitterPicker } from 'react-color'
+import { hexToRGBA, lightenDarkenColor, RGBToRGBA } from 'lib/utils'
 
 import { themeLogic } from '~/layout/navigation-3000/themeLogic'
+import { ColorPickerButton } from '~/queries/nodes/DataVisualization/Components/ColorPickerButton'
 import { ConditionalFormattingRule } from '~/queries/schema'
 
 import { dataVisualizationLogic } from '../../dataVisualizationLogic'
@@ -86,72 +85,6 @@ export const ConditionalFormattingTab = (): JSX.Element => {
     )
 }
 
-const DEFAULT_PICKER_COLORS = [
-    '#FFADAD', // Current default
-    '#E8A598',
-    '#FFD6A5',
-    '#FFCFD2',
-    '#FDFFB6',
-    '#C1FBA4',
-    '#9BF6FF',
-    '#A0C4FF',
-    '#BDB2FF',
-    '#FFC6FF',
-]
-
-const ColourPickerButton = ({
-    color,
-    onColorSelect: propOnColorSelect,
-}: {
-    color: string
-    onColorSelect?: (color: string) => void
-}): JSX.Element => {
-    const [pickerOpen, setPickerOpen] = useState(false)
-    const { isDarkModeOn } = useValues(themeLogic)
-
-    const onColorSelect = (colorResult: ColorResult): void => {
-        if (propOnColorSelect) {
-            propOnColorSelect(colorResult.hex)
-        }
-
-        if (DEFAULT_PICKER_COLORS.includes(colorResult.hex)) {
-            setPickerOpen(false)
-        }
-    }
-
-    const colors = isDarkModeOn
-        ? DEFAULT_PICKER_COLORS.map((n) => RGBToHex(lightenDarkenColor(n, -30)))
-        : DEFAULT_PICKER_COLORS
-
-    return (
-        <Popover
-            visible={pickerOpen}
-            overlay={<TwitterPicker color={color} colors={colors} onChangeComplete={onColorSelect} />}
-            onClickOutside={() => setPickerOpen(false)}
-            padded={false}
-        >
-            <LemonButton
-                type="secondary"
-                onClick={() => setPickerOpen(!pickerOpen)}
-                sideIcon={<></>}
-                className="ConditionalFormattingTab__ColorPicker"
-            >
-                <SeriesGlyph
-                    style={{
-                        borderColor: color,
-                        color: color,
-                        backgroundColor: isDarkModeOn
-                            ? RGBToRGBA(lightenDarkenColor(color, -20), 0.3)
-                            : hexToRGBA(color, 0.5),
-                    }}
-                >
-                    <></>
-                </SeriesGlyph>
-            </LemonButton>
-        </Popover>
-    )
-}
-
 const RuleItem = ({ rule: propsRule }: { rule: ConditionalFormattingRule }): JSX.Element => {
     const { columns, responseLoading, dataVisualizationProps } = useValues(dataVisualizationLogic)
 
@@ -197,7 +130,7 @@ const RuleItem = ({ rule: propsRule }: { rule: ConditionalFormattingRule }): JSX
             />
 
             <div className="flex flex-1">
-                <ColourPickerButton color={rule.color} onColorSelect={selectColor} />
+                <ColorPickerButton color={rule.color} onColorSelect={selectColor} />
                 <LemonInput
                     placeholder="value"
                     className="ml-2 flex-1"