From f9e5be792bc58989e56320c6d6543afcef19b657 Mon Sep 17 00:00:00 2001
From: Han Tuerker <burhan.tuerker@gmail.com>
Date: Wed, 22 Jun 2022 21:45:34 +0300
Subject: [PATCH 01/26] feat(percentage-c11n): convert to table cell

---
 src/components/fields/Percentage/Settings.tsx | 10 +++++++
 .../{BasicCell.tsx => TableCell.tsx}          | 26 ++++++++++++++++---
 src/components/fields/Percentage/index.tsx    | 17 +++++++++---
 3 files changed, 47 insertions(+), 6 deletions(-)
 create mode 100644 src/components/fields/Percentage/Settings.tsx
 rename src/components/fields/Percentage/{BasicCell.tsx => TableCell.tsx} (54%)

diff --git a/src/components/fields/Percentage/Settings.tsx b/src/components/fields/Percentage/Settings.tsx
new file mode 100644
index 000000000..3aa6b5766
--- /dev/null
+++ b/src/components/fields/Percentage/Settings.tsx
@@ -0,0 +1,10 @@
+import { ISettingsProps } from "@src/components/fields/types";
+
+export default function Settings({ onChange, config }: ISettingsProps) {
+  return (
+    <>
+      {`Config: ${JSON.stringify(config)}`}
+      <button onClick={() => onChange("foo")("bar")} />
+    </>
+  );
+}
diff --git a/src/components/fields/Percentage/BasicCell.tsx b/src/components/fields/Percentage/TableCell.tsx
similarity index 54%
rename from src/components/fields/Percentage/BasicCell.tsx
rename to src/components/fields/Percentage/TableCell.tsx
index 05fcfac69..e9c1140df 100644
--- a/src/components/fields/Percentage/BasicCell.tsx
+++ b/src/components/fields/Percentage/TableCell.tsx
@@ -1,17 +1,37 @@
-import { IBasicCellProps } from "@src/components/fields/types";
+import { IHeavyCellProps } from "@src/components/fields/types";
 
 import { useTheme } from "@mui/material";
 import { resultColorsScale } from "@src/utils/color";
 
-export default function Percentage({ value }: IBasicCellProps) {
+export default function Percentage({ column, value }: IHeavyCellProps) {
   const theme = useTheme();
+  const {
+    startColor,
+    midColor,
+    endColor,
+  }: {
+    startColor: any;
+    endColor: any;
+    midColor: any;
+  } = {
+    startColor: { hex: "#f00" },
+    midColor: { hex: "#0f0" },
+    endColor: { hex: "#00f" },
+    ...(column as any).config,
+  };
+
+  const colors = {
+    startColor: startColor.hex,
+    midColor: midColor.hex,
+    endColor: endColor.hex,
+  };
 
   if (typeof value === "number")
     return (
       <>
         <div
           style={{
-            backgroundColor: resultColorsScale(value).toHex(),
+            backgroundColor: resultColorsScale(value, colors).toHex(),
 
             position: "absolute",
             top: 0,
diff --git a/src/components/fields/Percentage/index.tsx b/src/components/fields/Percentage/index.tsx
index c44690e32..d53e993bc 100644
--- a/src/components/fields/Percentage/index.tsx
+++ b/src/components/fields/Percentage/index.tsx
@@ -1,12 +1,17 @@
 import { lazy } from "react";
 import { IFieldConfig, FieldType } from "@src/components/fields/types";
-import withBasicCell from "@src/components/fields/_withTableCell/withBasicCell";
+import withHeavyCell from "@src/components/fields/_withTableCell/withHeavyCell";
 
 import { Percentage as PercentageIcon } from "@src/assets/icons";
-import BasicCell from "./BasicCell";
+import BasicCell from "@src/components/fields/_BasicCell/BasicCellNull";
 import TextEditor from "@src/components/Table/editors/TextEditor";
 import { filterOperators } from "@src/components/fields/Number/Filter";
 import BasicContextMenuActions from "@src/components/fields/_BasicCell/BasicCellContextMenuActions";
+
+const TableCell = lazy(
+  () => import("./TableCell" /* webpackChunkName: "TableCell-Percentage" */)
+);
+
 const SideDrawerField = lazy(
   () =>
     import(
@@ -14,6 +19,10 @@ const SideDrawerField = lazy(
     )
 );
 
+const Settings = lazy(
+  () => import("./Settings" /* webpackChunkName: "Settings-Percentage" */)
+);
+
 export const config: IFieldConfig = {
   type: FieldType.percentage,
   name: "Percentage",
@@ -22,11 +31,13 @@ export const config: IFieldConfig = {
   initialValue: 0,
   initializable: true,
   icon: <PercentageIcon />,
+  requireConfiguration: true,
   description: "Percentage stored as a number between 0 and 1.",
   contextMenuActions: BasicContextMenuActions,
-  TableCell: withBasicCell(BasicCell),
+  TableCell: withHeavyCell(BasicCell, TableCell),
   TableEditor: TextEditor,
   SideDrawerField,
+  settings: Settings,
   filter: {
     operators: filterOperators,
   },

From 4882048d63af2fb2bd33d4c0588fc0f618c88c8a Mon Sep 17 00:00:00 2001
From: Han Tuerker <burhan.tuerker@gmail.com>
Date: Wed, 22 Jun 2022 22:25:14 +0300
Subject: [PATCH 02/26] feat(percentage-c11n): add logic to default configs

---
 .../fields/Percentage/SideDrawerField.tsx     | 22 ++++++++++++++++++-
 .../fields/Percentage/TableCell.tsx           | 16 +++++++++-----
 src/utils/color.ts                            | 14 ++++++------
 3 files changed, 38 insertions(+), 14 deletions(-)

diff --git a/src/components/fields/Percentage/SideDrawerField.tsx b/src/components/fields/Percentage/SideDrawerField.tsx
index ea4e0681b..5dac3fc99 100644
--- a/src/components/fields/Percentage/SideDrawerField.tsx
+++ b/src/components/fields/Percentage/SideDrawerField.tsx
@@ -12,6 +12,26 @@ export default function Percentage({
   onSubmit,
   disabled,
 }: ISideDrawerFieldProps) {
+  const {
+    startColor,
+    midColor,
+    endColor,
+  }: {
+    startColor: any;
+    endColor: any;
+    midColor: any;
+  } = {
+    startColor: { hex: "#f00" },
+    midColor: { hex: "#0f0" },
+    endColor: { hex: "#00f" },
+    ...(column as any).config,
+  };
+
+  const colors = {
+    startColor: startColor.hex,
+    midColor: midColor.hex,
+    endColor: endColor.hex,
+  };
   return (
     <TextField
       variant="filled"
@@ -38,7 +58,7 @@ export default function Percentage({
                   `0 0 0 1px ${theme.palette.divider} inest`,
                 backgroundColor:
                   typeof value === "number"
-                    ? resultColorsScale(value).toHex() + "!important"
+                    ? resultColorsScale(value, colors).toHex() + "!important"
                     : undefined,
               }}
             />
diff --git a/src/components/fields/Percentage/TableCell.tsx b/src/components/fields/Percentage/TableCell.tsx
index e9c1140df..a01c8f84d 100644
--- a/src/components/fields/Percentage/TableCell.tsx
+++ b/src/components/fields/Percentage/TableCell.tsx
@@ -2,21 +2,25 @@ import { IHeavyCellProps } from "@src/components/fields/types";
 
 import { useTheme } from "@mui/material";
 import { resultColorsScale } from "@src/utils/color";
+import { Color, toColor } from "react-color-palette";
 
 export default function Percentage({ column, value }: IHeavyCellProps) {
   const theme = useTheme();
+  const defaultColors = {
+    startColor: toColor("hex", "#f00"),
+    midColor: toColor("hex", "#ff0"),
+    endColor: toColor("hex", "#0f0"),
+  };
   const {
     startColor,
     midColor,
     endColor,
   }: {
-    startColor: any;
-    endColor: any;
-    midColor: any;
+    startColor: Color;
+    endColor: Color;
+    midColor: Color;
   } = {
-    startColor: { hex: "#f00" },
-    midColor: { hex: "#0f0" },
-    endColor: { hex: "#00f" },
+    ...defaultColors,
     ...(column as any).config,
   };
 
diff --git a/src/utils/color.ts b/src/utils/color.ts
index 58dbfa53e..8a56710d8 100644
--- a/src/utils/color.ts
+++ b/src/utils/color.ts
@@ -1,12 +1,12 @@
 import { colord } from "colord";
 
-export const resultColors = {
-  No: "#ED4747",
-  Maybe: "#f3c900",
-  Yes: "#1fad5f",
+export const defaultColors = {
+  startColor: "#ED4747",
+  midColor: "#f3c900",
+  endColor: "#1fad5f",
 };
 
-export const resultColorsScale = (value: number) =>
+export const resultColorsScale = (value: number, colors: any = defaultColors) =>
   value <= 0.5
-    ? colord(resultColors.No).mix(resultColors.Maybe, value * 2)
-    : colord(resultColors.Maybe).mix(resultColors.Yes, (value - 0.5) * 2);
+    ? colord(colors.startColor).mix(colors.midColor, value * 2)
+    : colord(colors.midColor).mix(colors.endColor, (value - 0.5) * 2);

From f8c426976797c46ed2c931b8e241015abbded0f3 Mon Sep 17 00:00:00 2001
From: Han Tuerker <burhan.tuerker@gmail.com>
Date: Wed, 22 Jun 2022 22:25:50 +0300
Subject: [PATCH 03/26] feat(percentage-c11n): add color picker to settings

---
 src/components/ColorPickerInput.tsx           | 93 +++++++++++++++++++
 src/components/fields/Percentage/Settings.tsx | 44 ++++++++-
 2 files changed, 136 insertions(+), 1 deletion(-)
 create mode 100644 src/components/ColorPickerInput.tsx

diff --git a/src/components/ColorPickerInput.tsx b/src/components/ColorPickerInput.tsx
new file mode 100644
index 000000000..f879edb4b
--- /dev/null
+++ b/src/components/ColorPickerInput.tsx
@@ -0,0 +1,93 @@
+import { useState } from "react";
+import { ButtonBase, Box, Collapse } from "@mui/material";
+
+import { fieldSx } from "@src/components/SideDrawer/utils";
+import { ChevronDown } from "@src/assets/icons/ChevronDown";
+import { Color, ColorPicker } from "react-color-palette";
+
+export interface IColorPickerProps {
+  value: Color;
+  handleChange: (color: Color) => void;
+  handleOnChangeComplete: (color: Color) => void;
+}
+
+export default function ColorPickerInput({
+  value,
+  handleChange,
+  handleOnChangeComplete,
+}: IColorPickerProps) {
+  const [showPicker, setShowPicker] = useState(false);
+  const toggleOpen = () => setShowPicker((s) => !s);
+  return (
+    <>
+      <ButtonBase
+        onClick={toggleOpen}
+        component={ButtonBase}
+        focusRipple
+        sx={[
+          fieldSx,
+          {
+            justifyContent: "flex-start",
+            "&&": { pl: 0.75, pr: 0.5 },
+            color: "red",
+            transition: (theme) =>
+              theme.transitions.create("border-radius", {
+                delay: theme.transitions.duration.standard,
+              }),
+            "&.Mui-disabled": { color: "text.disabled" },
+          },
+          showPicker && {
+            transitionDelay: "0s",
+            transitionDuration: "0s",
+            borderBottomLeftRadius: 0,
+            borderBottomRightRadius: 0,
+          },
+        ]}
+      >
+        <Box
+          sx={{
+            backgroundColor: value.hex,
+            width: 15,
+            height: 15,
+            mr: 1.5,
+            boxShadow: (theme) => `0 0 0 1px ${theme.palette.divider} inset`,
+            borderRadius: 0.5,
+          }}
+        />
+
+        <div style={{ flexGrow: 1 }}>{value.hex}</div>
+
+        <ChevronDown
+          color="action"
+          sx={{
+            transition: (theme) => theme.transitions.create("transform"),
+            transform: showPicker ? "rotate(180deg)" : "none",
+          }}
+        />
+      </ButtonBase>
+
+      <Collapse
+        in={showPicker}
+        sx={{
+          "& .rcp": {
+            borderTop: 0,
+            borderTopLeftRadius: 0,
+            borderTopRightRadius: 0,
+            "& .rcp-saturation": {
+              borderRadius: 0,
+            },
+          },
+        }}
+      >
+        <ColorPicker
+          width={400}
+          height={100}
+          color={value}
+          onChange={handleChange}
+          onChangeComplete={handleOnChangeComplete}
+          alpha
+        />
+      </Collapse>
+    </>
+  );
+}
diff --git a/src/components/fields/Percentage/Settings.tsx b/src/components/fields/Percentage/Settings.tsx
index 3aa6b5766..da9d7721f 100644
--- a/src/components/fields/Percentage/Settings.tsx
+++ b/src/components/fields/Percentage/Settings.tsx
@@ -1,10 +1,52 @@
+import ColorPickerInput from "@src/components/ColorPickerInput";
 import { ISettingsProps } from "@src/components/fields/types";
 
+import { useState } from "react";
+import { Color, toColor } from "react-color-palette";
+
 export default function Settings({ onChange, config }: ISettingsProps) {
+  const defaultColors = {
+    startColor: toColor("hex", "#f00"),
+    midColor: toColor("hex", "#ff0"),
+    endColor: toColor("hex", "#0f0"),
+  };
+
+  const {
+    startColor,
+    midColor,
+    endColor,
+  }: {
+    startColor: Color;
+    endColor: Color;
+    midColor: Color;
+  } = {
+    ...defaultColors,
+    ...config,
+  };
+
+  console.log(startColor, midColor, endColor);
+
+  const [start, setStart] = useState<Color>(startColor);
+  const [mid, setMid] = useState<Color>(midColor);
+  const [end, setEnd] = useState<Color>(endColor);
   return (
     <>
       {`Config: ${JSON.stringify(config)}`}
-      <button onClick={() => onChange("foo")("bar")} />
+      <ColorPickerInput
+        value={start}
+        handleChange={(color) => setStart(color)}
+        handleOnChangeComplete={(color) => onChange("startColor")(color)}
+      />
+      <ColorPickerInput
+        value={mid}
+        handleChange={(color) => setMid(color)}
+        handleOnChangeComplete={(color) => onChange("midColor")(color)}
+      />
+      <ColorPickerInput
+        value={end}
+        handleChange={(color) => setEnd(color)}
+        handleOnChangeComplete={(color) => onChange("endColor")(color)}
+      />
     </>
   );
 }

From 976dd7f114523a88cef78dc28e9db73f6dfe0660 Mon Sep 17 00:00:00 2001
From: Han Tuerker <burhan.tuerker@gmail.com>
Date: Wed, 22 Jun 2022 22:31:47 +0300
Subject: [PATCH 04/26] feat(percentage-c11n): change default colors

---
 src/components/fields/Percentage/Settings.tsx    |  9 +++------
 .../fields/Percentage/SideDrawerField.tsx        | 16 ++++++++++------
 src/components/fields/Percentage/TableCell.tsx   |  6 +++---
 3 files changed, 16 insertions(+), 15 deletions(-)

diff --git a/src/components/fields/Percentage/Settings.tsx b/src/components/fields/Percentage/Settings.tsx
index da9d7721f..5f58529fa 100644
--- a/src/components/fields/Percentage/Settings.tsx
+++ b/src/components/fields/Percentage/Settings.tsx
@@ -6,9 +6,9 @@ import { Color, toColor } from "react-color-palette";
 
 export default function Settings({ onChange, config }: ISettingsProps) {
   const defaultColors = {
-    startColor: toColor("hex", "#f00"),
-    midColor: toColor("hex", "#ff0"),
-    endColor: toColor("hex", "#0f0"),
+    startColor: toColor("hex", "#ED4747"),
+    midColor: toColor("hex", "#F3C900"),
+    endColor: toColor("hex", "#1FAD5F"),
   };
 
   const {
@@ -24,14 +24,11 @@ export default function Settings({ onChange, config }: ISettingsProps) {
     ...config,
   };
 
-  console.log(startColor, midColor, endColor);
-
   const [start, setStart] = useState<Color>(startColor);
   const [mid, setMid] = useState<Color>(midColor);
   const [end, setEnd] = useState<Color>(endColor);
   return (
     <>
-      {`Config: ${JSON.stringify(config)}`}
       <ColorPickerInput
         value={start}
         handleChange={(color) => setStart(color)}
diff --git a/src/components/fields/Percentage/SideDrawerField.tsx b/src/components/fields/Percentage/SideDrawerField.tsx
index 5dac3fc99..da2d1881f 100644
--- a/src/components/fields/Percentage/SideDrawerField.tsx
+++ b/src/components/fields/Percentage/SideDrawerField.tsx
@@ -4,6 +4,7 @@ import { TextField, InputAdornment, Box } from "@mui/material";
 import { emphasize } from "@mui/material/styles";
 import { resultColorsScale } from "@src/utils/color";
 import { getFieldId } from "@src/components/SideDrawer/utils";
+import { Color, toColor } from "react-color-palette";
 
 export default function Percentage({
   column,
@@ -12,18 +13,21 @@ export default function Percentage({
   onSubmit,
   disabled,
 }: ISideDrawerFieldProps) {
+  const defaultColors = {
+    startColor: toColor("hex", "#ED4747"),
+    midColor: toColor("hex", "#F3C900"),
+    endColor: toColor("hex", "#1FAD5F"),
+  };
   const {
     startColor,
     midColor,
     endColor,
   }: {
-    startColor: any;
-    endColor: any;
-    midColor: any;
+    startColor: Color;
+    endColor: Color;
+    midColor: Color;
   } = {
-    startColor: { hex: "#f00" },
-    midColor: { hex: "#0f0" },
-    endColor: { hex: "#00f" },
+    ...defaultColors,
     ...(column as any).config,
   };
 
diff --git a/src/components/fields/Percentage/TableCell.tsx b/src/components/fields/Percentage/TableCell.tsx
index a01c8f84d..dc6b43b45 100644
--- a/src/components/fields/Percentage/TableCell.tsx
+++ b/src/components/fields/Percentage/TableCell.tsx
@@ -7,9 +7,9 @@ import { Color, toColor } from "react-color-palette";
 export default function Percentage({ column, value }: IHeavyCellProps) {
   const theme = useTheme();
   const defaultColors = {
-    startColor: toColor("hex", "#f00"),
-    midColor: toColor("hex", "#ff0"),
-    endColor: toColor("hex", "#0f0"),
+    startColor: toColor("hex", "#ED4747"),
+    midColor: toColor("hex", "#F3C900"),
+    endColor: toColor("hex", "#1FAD5F"),
   };
   const {
     startColor,

From 9bd1a4c17e95f212d9ab402a9e50b6c7d0037c9c Mon Sep 17 00:00:00 2001
From: Han Tuerker <burhan.tuerker@gmail.com>
Date: Wed, 22 Jun 2022 22:52:56 +0300
Subject: [PATCH 05/26] feat(percentage-c11n): fix button text color

---
 src/components/ColorPickerInput.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/ColorPickerInput.tsx b/src/components/ColorPickerInput.tsx
index f879edb4b..699e28753 100644
--- a/src/components/ColorPickerInput.tsx
+++ b/src/components/ColorPickerInput.tsx
@@ -29,7 +29,7 @@ export default function ColorPickerInput({
           {
             justifyContent: "flex-start",
             "&&": { pl: 0.75, pr: 0.5 },
-            color: "red",
+            color: value.hex,
             transition: (theme) =>
               theme.transitions.create("border-radius", {
                 delay: theme.transitions.duration.standard,

From 52964a81f8392fd83230358666e5015a4620d55f Mon Sep 17 00:00:00 2001
From: Han Tuerker <burhan.tuerker@gmail.com>
Date: Wed, 22 Jun 2022 22:53:31 +0300
Subject: [PATCH 06/26] feat(percentage-c11n): add labels to settings

---
 src/components/fields/Percentage/Settings.tsx | 40 ++++++++++++-------
 1 file changed, 25 insertions(+), 15 deletions(-)

diff --git a/src/components/fields/Percentage/Settings.tsx b/src/components/fields/Percentage/Settings.tsx
index 5f58529fa..a8b00284f 100644
--- a/src/components/fields/Percentage/Settings.tsx
+++ b/src/components/fields/Percentage/Settings.tsx
@@ -1,3 +1,4 @@
+import { InputLabel } from "@mui/material";
 import ColorPickerInput from "@src/components/ColorPickerInput";
 import { ISettingsProps } from "@src/components/fields/types";
 
@@ -29,21 +30,30 @@ export default function Settings({ onChange, config }: ISettingsProps) {
   const [end, setEnd] = useState<Color>(endColor);
   return (
     <>
-      <ColorPickerInput
-        value={start}
-        handleChange={(color) => setStart(color)}
-        handleOnChangeComplete={(color) => onChange("startColor")(color)}
-      />
-      <ColorPickerInput
-        value={mid}
-        handleChange={(color) => setMid(color)}
-        handleOnChangeComplete={(color) => onChange("midColor")(color)}
-      />
-      <ColorPickerInput
-        value={end}
-        handleChange={(color) => setEnd(color)}
-        handleOnChangeComplete={(color) => onChange("endColor")(color)}
-      />
+      <InputLabel>
+        Start Color
+        <ColorPickerInput
+          value={start}
+          handleChange={(color) => setStart(color)}
+          handleOnChangeComplete={(color) => onChange("startColor")(color)}
+        />
+      </InputLabel>
+      <InputLabel>
+        Mid Color
+        <ColorPickerInput
+          value={mid}
+          handleChange={(color) => setMid(color)}
+          handleOnChangeComplete={(color) => onChange("midColor")(color)}
+        />
+      </InputLabel>
+      <InputLabel>
+        End Color
+        <ColorPickerInput
+          value={end}
+          handleChange={(color) => setEnd(color)}
+          handleOnChangeComplete={(color) => onChange("endColor")(color)}
+        />
+      </InputLabel>
     </>
   );
 }

From d74ac1396af907d1f90574cdcf6be9301ec77659 Mon Sep 17 00:00:00 2001
From: Han Tuerker <burhan.tuerker@gmail.com>
Date: Wed, 22 Jun 2022 23:00:34 +0300
Subject: [PATCH 07/26] feat(percentage-c11n): add preview section

---
 src/components/fields/Percentage/Settings.tsx | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/src/components/fields/Percentage/Settings.tsx b/src/components/fields/Percentage/Settings.tsx
index a8b00284f..d61ae6167 100644
--- a/src/components/fields/Percentage/Settings.tsx
+++ b/src/components/fields/Percentage/Settings.tsx
@@ -1,4 +1,4 @@
-import { InputLabel } from "@mui/material";
+import { Box, InputLabel } from "@mui/material";
 import ColorPickerInput from "@src/components/ColorPickerInput";
 import { ISettingsProps } from "@src/components/fields/types";
 
@@ -54,6 +54,17 @@ export default function Settings({ onChange, config }: ISettingsProps) {
           handleOnChangeComplete={(color) => onChange("endColor")(color)}
         />
       </InputLabel>
+      <InputLabel>
+        Preview:
+        <Box
+          sx={{
+            height: 30,
+            borderRadius: 0.5,
+            boxShadow: (theme) => `0 0 0 1px ${theme.palette.divider} inest`,
+            background: `linear-gradient(90deg, ${startColor.hex} 0%, ${midColor.hex} 50%, ${endColor.hex} 100%)`,
+          }}
+        />
+      </InputLabel>
     </>
   );
 }

From 8854965109b2910d1413f5ccc08562fbf4418488 Mon Sep 17 00:00:00 2001
From: Han Tuerker <burhan.tuerker@gmail.com>
Date: Thu, 23 Jun 2022 03:46:27 +0300
Subject: [PATCH 08/26] feat(percentage-c11n): fix cache issues with debouncing

---
 src/components/ColorPickerInput.tsx           | 20 +++++++++++++------
 src/components/fields/Percentage/Settings.tsx | 13 +++---------
 2 files changed, 17 insertions(+), 16 deletions(-)

diff --git a/src/components/ColorPickerInput.tsx b/src/components/ColorPickerInput.tsx
index 699e28753..4b979b1d8 100644
--- a/src/components/ColorPickerInput.tsx
+++ b/src/components/ColorPickerInput.tsx
@@ -1,23 +1,32 @@
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { ButtonBase, Box, Collapse } from "@mui/material";
 
 import { fieldSx } from "@src/components/SideDrawer/utils";
 import { ChevronDown } from "@src/assets/icons/ChevronDown";
 import { Color, ColorPicker } from "react-color-palette";
+import { useDebouncedCallback } from "use-debounce";
 
 export interface IColorPickerProps {
   value: Color;
-  handleChange: (color: Color) => void;
   handleOnChangeComplete: (color: Color) => void;
 }
 
 export default function ColorPickerInput({
   value,
-  handleChange,
   handleOnChangeComplete,
 }: IColorPickerProps) {
+  const [localValue, setLocalValue] = useState(value);
   const [showPicker, setShowPicker] = useState(false);
   const toggleOpen = () => setShowPicker((s) => !s);
+
+  useEffect(() => {
+    handleChange(localValue);
+  }, [localValue]);
+
+  const handleChange = useDebouncedCallback((color) => {
+    handleOnChangeComplete(color);
+  }, 400);
+
   return (
     <>
       <ButtonBase
@@ -82,9 +91,8 @@ export default function ColorPickerInput({
         <ColorPicker
           width={400}
           height={100}
-          color={value}
-          onChange={handleChange}
-          onChangeComplete={handleOnChangeComplete}
+          color={localValue}
+          onChange={(color) => setLocalValue(color)}
           alpha
         />
       </Collapse>
diff --git a/src/components/fields/Percentage/Settings.tsx b/src/components/fields/Percentage/Settings.tsx
index d61ae6167..ee7032d54 100644
--- a/src/components/fields/Percentage/Settings.tsx
+++ b/src/components/fields/Percentage/Settings.tsx
@@ -2,7 +2,6 @@ import { Box, InputLabel } from "@mui/material";
 import ColorPickerInput from "@src/components/ColorPickerInput";
 import { ISettingsProps } from "@src/components/fields/types";
 
-import { useState } from "react";
 import { Color, toColor } from "react-color-palette";
 
 export default function Settings({ onChange, config }: ISettingsProps) {
@@ -25,32 +24,26 @@ export default function Settings({ onChange, config }: ISettingsProps) {
     ...config,
   };
 
-  const [start, setStart] = useState<Color>(startColor);
-  const [mid, setMid] = useState<Color>(midColor);
-  const [end, setEnd] = useState<Color>(endColor);
   return (
     <>
       <InputLabel>
         Start Color
         <ColorPickerInput
-          value={start}
-          handleChange={(color) => setStart(color)}
+          value={startColor}
           handleOnChangeComplete={(color) => onChange("startColor")(color)}
         />
       </InputLabel>
       <InputLabel>
         Mid Color
         <ColorPickerInput
-          value={mid}
-          handleChange={(color) => setMid(color)}
+          value={midColor}
           handleOnChangeComplete={(color) => onChange("midColor")(color)}
         />
       </InputLabel>
       <InputLabel>
         End Color
         <ColorPickerInput
-          value={end}
-          handleChange={(color) => setEnd(color)}
+          value={endColor}
           handleOnChangeComplete={(color) => onChange("endColor")(color)}
         />
       </InputLabel>

From 13db99340a89038bbb3a9a7498ead271df55ee5d Mon Sep 17 00:00:00 2001
From: Han Tuerker <burhan.tuerker@gmail.com>
Date: Thu, 23 Jun 2022 17:38:22 +0300
Subject: [PATCH 09/26] feat(percentage-c11n): add width responsiveness to
 color picker

---
 src/components/ColorPickerInput.tsx | 46 +++++++++++++++++++++++++----
 1 file changed, 41 insertions(+), 5 deletions(-)

diff --git a/src/components/ColorPickerInput.tsx b/src/components/ColorPickerInput.tsx
index 4b979b1d8..b934fa901 100644
--- a/src/components/ColorPickerInput.tsx
+++ b/src/components/ColorPickerInput.tsx
@@ -1,4 +1,10 @@
-import { useState, useEffect } from "react";
+import {
+  useState,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  MutableRefObject,
+} from "react";
 import { ButtonBase, Box, Collapse } from "@mui/material";
 
 import { fieldSx } from "@src/components/SideDrawer/utils";
@@ -17,16 +23,45 @@ export default function ColorPickerInput({
 }: IColorPickerProps) {
   const [localValue, setLocalValue] = useState(value);
   const [showPicker, setShowPicker] = useState(false);
-  const toggleOpen = () => setShowPicker((s) => !s);
+  const [width, setWidth] = useState(100);
+  const parentRef: MutableRefObject<HTMLElement | null> = useRef(null);
+
+  useLayoutEffect(() => {
+    if (!parentRef || !parentRef.current) {
+      return;
+    }
+    setWidth(parentRef!.current!.offsetWidth);
+  }, [parentRef]);
+
+  useEffect(() => {
+    const resizeListener = () => {
+      if (!parentRef || !parentRef.current) {
+        return;
+      }
+      debouncedSetWidth(parentRef.current.offsetWidth);
+    };
+    window.addEventListener("resize", resizeListener);
+
+    return () => {
+      window.removeEventListener("resize", resizeListener);
+    };
+  }, []);
 
   useEffect(() => {
-    handleChange(localValue);
+    debouncedOnChangeComplete(localValue);
   }, [localValue]);
 
-  const handleChange = useDebouncedCallback((color) => {
+  const toggleOpen = () => setShowPicker((s) => !s);
+
+  const debouncedOnChangeComplete = useDebouncedCallback((color) => {
     handleOnChangeComplete(color);
   }, 400);
 
+  const debouncedSetWidth = useDebouncedCallback(
+    (width) => setWidth(width),
+    400
+  );
+
   return (
     <>
       <ButtonBase
@@ -76,6 +111,7 @@ export default function ColorPickerInput({
       </ButtonBase>
 
       <Collapse
+        ref={parentRef}
         in={showPicker}
         sx={{
           "& .rcp": {
@@ -89,7 +125,7 @@ export default function ColorPickerInput({
         }}
       >
         <ColorPicker
-          width={400}
+          width={width}
           height={100}
           color={localValue}
           onChange={(color) => setLocalValue(color)}

From c25f42057e8bdfdac228fe89b6f6643481dc1fbc Mon Sep 17 00:00:00 2001
From: Han Tuerker <burhan.tuerker@gmail.com>
Date: Sat, 25 Jun 2022 04:39:51 +0300
Subject: [PATCH 10/26] feat(percentage-c11n): fix responsiveness issues

---
 src/components/ColorPickerInput.tsx | 107 +++++++++++++++-------------
 1 file changed, 56 insertions(+), 51 deletions(-)

diff --git a/src/components/ColorPickerInput.tsx b/src/components/ColorPickerInput.tsx
index b934fa901..330390705 100644
--- a/src/components/ColorPickerInput.tsx
+++ b/src/components/ColorPickerInput.tsx
@@ -1,9 +1,9 @@
 import {
   useState,
   useEffect,
-  useLayoutEffect,
   useRef,
   MutableRefObject,
+  useLayoutEffect,
 } from "react";
 import { ButtonBase, Box, Collapse } from "@mui/material";
 
@@ -17,50 +17,49 @@ export interface IColorPickerProps {
   handleOnChangeComplete: (color: Color) => void;
 }
 
-export default function ColorPickerInput({
-  value,
-  handleOnChangeComplete,
-}: IColorPickerProps) {
-  const [localValue, setLocalValue] = useState(value);
-  const [showPicker, setShowPicker] = useState(false);
-  const [width, setWidth] = useState(100);
-  const parentRef: MutableRefObject<HTMLElement | null> = useRef(null);
+const useResponsiveWidth = (): [
+  width: number,
+  setRef: MutableRefObject<HTMLElement | null>
+] => {
+  const ref = useRef(null);
+  const [width, setWidth] = useState(0);
 
   useLayoutEffect(() => {
-    if (!parentRef || !parentRef.current) {
+    if (!ref || !ref.current) {
       return;
     }
-    setWidth(parentRef!.current!.offsetWidth);
-  }, [parentRef]);
+    const resizeObserver = new ResizeObserver((targets) => {
+      const { width: currentWidth } = targets[0].contentRect;
+      setWidth(currentWidth);
+    });
 
-  useEffect(() => {
-    const resizeListener = () => {
-      if (!parentRef || !parentRef.current) {
-        return;
-      }
-      debouncedSetWidth(parentRef.current.offsetWidth);
-    };
-    window.addEventListener("resize", resizeListener);
+    resizeObserver.observe(ref.current);
 
     return () => {
-      window.removeEventListener("resize", resizeListener);
+      resizeObserver.disconnect();
     };
   }, []);
 
-  useEffect(() => {
-    debouncedOnChangeComplete(localValue);
-  }, [localValue]);
+  return [width, ref];
+};
+
+export default function ColorPickerInput({
+  value,
+  handleOnChangeComplete,
+}: IColorPickerProps) {
+  const [localValue, setLocalValue] = useState(value);
+  const [showPicker, setShowPicker] = useState(false);
+  const [width, setRef] = useResponsiveWidth();
 
   const toggleOpen = () => setShowPicker((s) => !s);
 
   const debouncedOnChangeComplete = useDebouncedCallback((color) => {
     handleOnChangeComplete(color);
-  }, 400);
+  }, 100);
 
-  const debouncedSetWidth = useDebouncedCallback(
-    (width) => setWidth(width),
-    400
-  );
+  useEffect(() => {
+    debouncedOnChangeComplete(localValue);
+  }, [debouncedOnChangeComplete, localValue]);
 
   return (
     <>
@@ -83,8 +82,6 @@ export default function ColorPickerInput({
           showPicker && {
             transitionDelay: "0s",
             transitionDuration: "0s",
-            borderBottomLeftRadius: 0,
-            borderBottomRightRadius: 0,
           },
         ]}
       >
@@ -110,27 +107,35 @@ export default function ColorPickerInput({
         />
       </ButtonBase>
 
-      <Collapse
-        ref={parentRef}
-        in={showPicker}
-        sx={{
-          "& .rcp": {
-            borderTop: 0,
-            borderTopLeftRadius: 0,
-            borderTopRightRadius: 0,
-            "& .rcp-saturation": {
-              borderRadius: 0,
+      <Collapse in={showPicker}>
+        <Box
+          ref={setRef}
+          sx={[
+            fieldSx,
+            {
+              marginTop: "1rem",
+              padding: "1rem",
+              borderColor: "divider",
+              transitionDuration: 0,
+              "& .rcp": {
+                border: "none",
+                "& .rcp-saturation": {
+                  borderRadius: "4px",
+                },
+                "& .rcp-body": {
+                  boxSizing: "unset",
+                },
+              },
             },
-          },
-        }}
-      >
-        <ColorPicker
-          width={width}
-          height={100}
-          color={localValue}
-          onChange={(color) => setLocalValue(color)}
-          alpha
-        />
+          ]}
+        >
+          <ColorPicker
+            width={width}
+            height={100}
+            color={localValue}
+            onChange={(color) => setLocalValue(color)}
+          />
+        </Box>
       </Collapse>
     </>
   );

From 5afd5c70cb41062026227511b726eb3c6f557cbd Mon Sep 17 00:00:00 2001
From: Han Tuerker <burhan.tuerker@gmail.com>
Date: Sat, 25 Jun 2022 09:08:51 +0300
Subject: [PATCH 11/26] feat(percentage-c11n): add checkbox, refactor a little

---
 src/components/ColorPickerInput.tsx           | 120 +++-------
 src/components/fields/Percentage/Settings.tsx | 224 ++++++++++++++----
 2 files changed, 213 insertions(+), 131 deletions(-)

diff --git a/src/components/ColorPickerInput.tsx b/src/components/ColorPickerInput.tsx
index 330390705..5b5a92d20 100644
--- a/src/components/ColorPickerInput.tsx
+++ b/src/components/ColorPickerInput.tsx
@@ -5,18 +5,12 @@ import {
   MutableRefObject,
   useLayoutEffect,
 } from "react";
-import { ButtonBase, Box, Collapse } from "@mui/material";
+import { Box } from "@mui/material";
 
 import { fieldSx } from "@src/components/SideDrawer/utils";
-import { ChevronDown } from "@src/assets/icons/ChevronDown";
 import { Color, ColorPicker } from "react-color-palette";
 import { useDebouncedCallback } from "use-debounce";
 
-export interface IColorPickerProps {
-  value: Color;
-  handleOnChangeComplete: (color: Color) => void;
-}
-
 const useResponsiveWidth = (): [
   width: number,
   setRef: MutableRefObject<HTMLElement | null>
@@ -43,16 +37,20 @@ const useResponsiveWidth = (): [
   return [width, ref];
 };
 
+export interface IColorPickerProps {
+  value: Color;
+  handleOnChangeComplete: (color: Color) => void;
+  disabled?: boolean;
+}
+
 export default function ColorPickerInput({
   value,
   handleOnChangeComplete,
+  disabled = false,
 }: IColorPickerProps) {
   const [localValue, setLocalValue] = useState(value);
-  const [showPicker, setShowPicker] = useState(false);
   const [width, setRef] = useResponsiveWidth();
 
-  const toggleOpen = () => setShowPicker((s) => !s);
-
   const debouncedOnChangeComplete = useDebouncedCallback((color) => {
     handleOnChangeComplete(color);
   }, 100);
@@ -62,81 +60,33 @@ export default function ColorPickerInput({
   }, [debouncedOnChangeComplete, localValue]);
 
   return (
-    <>
-      <ButtonBase
-        onClick={toggleOpen}
-        component={ButtonBase}
-        focusRipple
-        sx={[
-          fieldSx,
-          {
-            justifyContent: "flex-start",
-            "&&": { pl: 0.75, pr: 0.5 },
-            color: value.hex,
-            transition: (theme) =>
-              theme.transitions.create("border-radius", {
-                delay: theme.transitions.duration.standard,
-              }),
-            "&.Mui-disabled": { color: "text.disabled" },
-          },
-          showPicker && {
-            transitionDelay: "0s",
-            transitionDuration: "0s",
-          },
-        ]}
-      >
-        <Box
-          sx={{
-            backgroundColor: value.hex,
-            width: 15,
-            height: 15,
-            mr: 1.5,
-            boxShadow: (theme) => `0 0 0 1px ${theme.palette.divider} inset`,
-            borderRadius: 0.5,
-          }}
-        />
-
-        <div style={{ flexGrow: 1 }}>{value.hex}</div>
-
-        <ChevronDown
-          color="action"
-          sx={{
-            transition: (theme) => theme.transitions.create("transform"),
-            transform: showPicker ? "rotate(180deg)" : "none",
-          }}
-        />
-      </ButtonBase>
-
-      <Collapse in={showPicker}>
-        <Box
-          ref={setRef}
-          sx={[
-            fieldSx,
-            {
-              marginTop: "1rem",
-              padding: "1rem",
-              borderColor: "divider",
-              transitionDuration: 0,
-              "& .rcp": {
-                border: "none",
-                "& .rcp-saturation": {
-                  borderRadius: "4px",
-                },
-                "& .rcp-body": {
-                  boxSizing: "unset",
-                },
-              },
+    <Box
+      ref={setRef}
+      sx={[
+        fieldSx,
+        {
+          marginTop: "1rem",
+          padding: "1rem",
+          borderColor: "divider",
+          transitionDuration: 0,
+          "& .rcp": {
+            border: "none",
+            "& .rcp-saturation": {
+              borderRadius: "4px",
             },
-          ]}
-        >
-          <ColorPicker
-            width={width}
-            height={100}
-            color={localValue}
-            onChange={(color) => setLocalValue(color)}
-          />
-        </Box>
-      </Collapse>
-    </>
+            "& .rcp-body": {
+              boxSizing: "unset",
+            },
+          },
+        },
+      ]}
+    >
+      <ColorPicker
+        width={width}
+        height={100}
+        color={localValue}
+        onChange={(color) => setLocalValue(color)}
+      />
+    </Box>
   );
 }
diff --git a/src/components/fields/Percentage/Settings.tsx b/src/components/fields/Percentage/Settings.tsx
index ee7032d54..396aa5eb1 100644
--- a/src/components/fields/Percentage/Settings.tsx
+++ b/src/components/fields/Percentage/Settings.tsx
@@ -1,62 +1,194 @@
-import { Box, InputLabel } from "@mui/material";
+import { useState } from "react";
+
+import {
+  Box,
+  ButtonBase,
+  Checkbox,
+  Collapse,
+  InputLabel,
+  useTheme,
+} from "@mui/material";
 import ColorPickerInput from "@src/components/ColorPickerInput";
 import { ISettingsProps } from "@src/components/fields/types";
 
 import { Color, toColor } from "react-color-palette";
+import { fieldSx } from "@src/components/SideDrawer/utils";
+import { ChevronDown } from "mdi-material-ui";
+import { ReactElement } from "react-markdown/lib/react-markdown";
+import { resultColorsScale } from "@src/utils/color";
 
-export default function Settings({ onChange, config }: ISettingsProps) {
-  const defaultColors = {
-    startColor: toColor("hex", "#ED4747"),
-    midColor: toColor("hex", "#F3C900"),
-    endColor: toColor("hex", "#1FAD5F"),
-  };
+const ColorPickerCollapse = ({
+  colorKey,
+  color,
+  active,
+  setActive,
+  disabled,
+  children,
+}: {
+  colorKey: string;
+  color: Color;
+  active: boolean;
+  setActive: (activeKey: string | null) => void;
+  disabled?: boolean;
+  children?: ReactElement;
+}) => {
+  const toggleCollapse = () => !disabled && setActive(active ? null : colorKey);
 
-  const {
-    startColor,
-    midColor,
-    endColor,
-  }: {
-    startColor: Color;
-    endColor: Color;
-    midColor: Color;
-  } = {
-    ...defaultColors,
-    ...config,
-  };
+  const toggleState = (() => {
+    if (disabled && active) {
+      setActive(null);
+      return false;
+    }
+    return active;
+  })();
 
   return (
-    <>
-      <InputLabel>
-        Start Color
-        <ColorPickerInput
-          value={startColor}
-          handleOnChangeComplete={(color) => onChange("startColor")(color)}
-        />
-      </InputLabel>
-      <InputLabel>
-        Mid Color
-        <ColorPickerInput
-          value={midColor}
-          handleOnChangeComplete={(color) => onChange("midColor")(color)}
-        />
-      </InputLabel>
-      <InputLabel>
-        End Color
-        <ColorPickerInput
-          value={endColor}
-          handleOnChangeComplete={(color) => onChange("endColor")(color)}
-        />
-      </InputLabel>
-      <InputLabel>
-        Preview:
+    <Box sx={{ width: "100%" }}>
+      <ButtonBase
+        onClick={toggleCollapse}
+        component={ButtonBase}
+        focusRipple
+        disabled={disabled}
+        sx={[
+          fieldSx,
+          {
+            justifyContent: "flex-start",
+            "&&": { pl: 0.75, pr: 0.5 },
+            color: color.hex,
+            transition: (theme) =>
+              theme.transitions.create("border-radius", {
+                delay: theme.transitions.duration.standard,
+              }),
+            "&.Mui-disabled": { color: "text.disabled" },
+          },
+          active && {
+            transitionDelay: "0s",
+            transitionDuration: "0s",
+          },
+        ]}
+      >
         <Box
           sx={{
-            height: 30,
+            backgroundColor: color?.hex,
+            width: 15,
+            height: 15,
+            mr: 1.5,
+            boxShadow: (theme) => `0 0 0 1px ${theme.palette.divider} inset`,
             borderRadius: 0.5,
-            boxShadow: (theme) => `0 0 0 1px ${theme.palette.divider} inest`,
-            background: `linear-gradient(90deg, ${startColor.hex} 0%, ${midColor.hex} 50%, ${endColor.hex} 100%)`,
+            opacity: 0.5,
           }}
         />
+        <div style={{ flexGrow: 1 }}>{color.hex}</div>
+        <ChevronDown
+          color="action"
+          sx={{
+            transition: (theme) => theme.transitions.create("transform"),
+            transform: active ? "rotate(180deg)" : "none",
+          }}
+        />
+      </ButtonBase>
+      <Collapse in={toggleState}>{children}</Collapse>
+    </Box>
+  );
+};
+
+const defaultColors: { [key: string]: Color } = {
+  default: toColor("hex", "#FFFFFF"),
+  startColor: toColor("hex", "#ED4747"),
+  midColor: toColor("hex", "#F3C900"),
+  endColor: toColor("hex", "#1FAD5F"),
+};
+
+const colorLabels: { [key: string]: string } = {
+  startColor: "Start Color",
+  midColor: "Middle Color",
+  endColor: "End Color",
+};
+
+export default function Settings({ onChange, config }: ISettingsProps) {
+  const [checkStates, setCheckStates] = useState<{ [key: string]: boolean }>({
+    startColor: Boolean(config.startColor),
+    midColor: Boolean(config.midColor),
+    endColor: Boolean(config.endColor),
+  });
+  const [activePicker, setActivePicker] = useState<string | null>(null);
+  const theme = useTheme();
+
+  const onCheckboxChange = (key: string, checked: boolean) => {
+    if (!checked) {
+      onChange(key)(defaultColors.default);
+    } else {
+      onChange(key)(defaultColors[key]);
+    }
+    setCheckStates({ ...checkStates, [key]: checked });
+  };
+
+  return (
+    <>
+      {Object.keys(checkStates).map((colorKey) => {
+        const color = config[colorKey] || defaultColors[colorKey];
+        return (
+          <Box key={colorKey} sx={{ display: "flex", flexDirection: "column" }}>
+            {colorLabels[colorKey]}
+            <Box
+              sx={{
+                display: "flex",
+                alignItems: "start",
+                justifyContent: "center",
+              }}
+            >
+              <Checkbox
+                sx={[
+                  fieldSx,
+                  { width: "auto", marginRight: "0.5rem", boxShadow: "none" },
+                ]}
+                checked={checkStates[colorKey]}
+                onChange={() =>
+                  onCheckboxChange(colorKey, !checkStates[colorKey])
+                }
+              />
+              <ColorPickerCollapse
+                colorKey={colorKey}
+                active={activePicker === colorKey}
+                setActive={(activePicker) => setActivePicker(activePicker)}
+                color={color}
+                disabled={!checkStates[colorKey]}
+              >
+                <ColorPickerInput
+                  value={color}
+                  handleOnChangeComplete={(color) => onChange(colorKey)(color)}
+                  disabled={!checkStates[colorKey]}
+                />
+              </ColorPickerCollapse>
+            </Box>
+          </Box>
+        );
+      })}
+      <InputLabel>
+        Preview:
+        <Box sx={{ display: "flex", textAlign: "center" }}>
+          {[0, 0.125, 0.25, 0.375, 0.5, 0.625, 0.75, 0.875, 1].map((value) => {
+            const { startColor, midColor, endColor } = config;
+            return (
+              <Box
+                key={value}
+                sx={{
+                  width: "100%",
+                  padding: "0.5rem 0",
+                  color: theme.palette.text.primary,
+                  backgroundColor: resultColorsScale(value, {
+                    startColor: startColor.hex,
+                    midColor: midColor.hex,
+                    endColor: endColor.hex,
+                  }).toHex(),
+                  opacity: 0.5,
+                }}
+              >
+                {Math.floor(value * 100)}%
+              </Box>
+            );
+          })}
+        </Box>
       </InputLabel>
     </>
   );

From 7ca47fa98c4864b22e6ece46617f0e598f026823 Mon Sep 17 00:00:00 2001
From: Han Tuerker <burhan.tuerker@gmail.com>
Date: Tue, 28 Jun 2022 09:52:27 +0300
Subject: [PATCH 12/26] feat(percentage-c11n): convert data type to array

---
 src/components/fields/Percentage/Settings.tsx | 127 +++++++++---------
 .../fields/Percentage/SideDrawerField.tsx     |  25 +---
 .../fields/Percentage/TableCell.tsx           |  84 +++++-------
 src/utils/color.ts                            |  10 +-
 4 files changed, 103 insertions(+), 143 deletions(-)

diff --git a/src/components/fields/Percentage/Settings.tsx b/src/components/fields/Percentage/Settings.tsx
index 396aa5eb1..e998d5254 100644
--- a/src/components/fields/Percentage/Settings.tsx
+++ b/src/components/fields/Percentage/Settings.tsx
@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useRef, useState } from "react";
 
 import {
   Box,
@@ -26,7 +26,7 @@ const ColorPickerCollapse = ({
   children,
 }: {
   colorKey: string;
-  color: Color;
+  color: string;
   active: boolean;
   setActive: (activeKey: string | null) => void;
   disabled?: boolean;
@@ -54,7 +54,7 @@ const ColorPickerCollapse = ({
           {
             justifyContent: "flex-start",
             "&&": { pl: 0.75, pr: 0.5 },
-            color: color.hex,
+            color: color,
             transition: (theme) =>
               theme.transitions.create("border-radius", {
                 delay: theme.transitions.duration.standard,
@@ -69,7 +69,7 @@ const ColorPickerCollapse = ({
       >
         <Box
           sx={{
-            backgroundColor: color?.hex,
+            backgroundColor: color,
             width: 15,
             height: 15,
             mr: 1.5,
@@ -78,7 +78,7 @@ const ColorPickerCollapse = ({
             opacity: 0.5,
           }}
         />
-        <div style={{ flexGrow: 1 }}>{color.hex}</div>
+        <div style={{ flexGrow: 1 }}>{color}</div>
         <ChevronDown
           color="action"
           sx={{
@@ -92,44 +92,51 @@ const ColorPickerCollapse = ({
   );
 };
 
-const defaultColors: { [key: string]: Color } = {
-  default: toColor("hex", "#FFFFFF"),
-  startColor: toColor("hex", "#ED4747"),
-  midColor: toColor("hex", "#F3C900"),
-  endColor: toColor("hex", "#1FAD5F"),
+const defaultColors: { [key: string]: string } = {
+  0: "#ED4747",
+  1: "#F3C900",
+  2: "#1FAD5F",
 };
 
 const colorLabels: { [key: string]: string } = {
-  startColor: "Start Color",
-  midColor: "Middle Color",
-  endColor: "End Color",
+  0: "No",
+  1: "Yes",
+  2: "Maybe",
 };
 
 export default function Settings({ onChange, config }: ISettingsProps) {
+  const { current: colorsDraft } = useRef<any>([]);
   const [checkStates, setCheckStates] = useState<{ [key: string]: boolean }>({
-    startColor: Boolean(config.startColor),
-    midColor: Boolean(config.midColor),
-    endColor: Boolean(config.endColor),
+    0: false,
+    1: false,
+    2: false,
   });
   const [activePicker, setActivePicker] = useState<string | null>(null);
-  const theme = useTheme();
 
   const onCheckboxChange = (key: string, checked: boolean) => {
-    if (!checked) {
-      onChange(key)(defaultColors.default);
+    if (checked) {
+      colorsDraft[key] = defaultColors[key];
+      onChange("colors")(colorsDraft);
     } else {
-      onChange(key)(defaultColors[key]);
+      colorsDraft[key] = null;
+      onChange("colors")(colorsDraft);
     }
     setCheckStates({ ...checkStates, [key]: checked });
   };
 
+  const handleOnChange = (key: string, color: Color): void => {
+    colorsDraft[key] = color.hex;
+    onChange("colors")(colorsDraft);
+  };
+
   return (
     <>
-      {Object.keys(checkStates).map((colorKey) => {
-        const color = config[colorKey] || defaultColors[colorKey];
+      {JSON.stringify(config)}
+      {Object.keys(checkStates).map((key) => {
+        const color = defaultColors[key];
         return (
-          <Box key={colorKey} sx={{ display: "flex", flexDirection: "column" }}>
-            {colorLabels[colorKey]}
+          <Box key={key} sx={{ display: "flex", flexDirection: "column" }}>
+            {colorLabels[key]}
             <Box
               sx={{
                 display: "flex",
@@ -142,54 +149,54 @@ export default function Settings({ onChange, config }: ISettingsProps) {
                   fieldSx,
                   { width: "auto", marginRight: "0.5rem", boxShadow: "none" },
                 ]}
-                checked={checkStates[colorKey]}
-                onChange={() =>
-                  onCheckboxChange(colorKey, !checkStates[colorKey])
-                }
+                checked={checkStates[key]}
+                onChange={() => onCheckboxChange(key, !checkStates[key])}
               />
               <ColorPickerCollapse
-                colorKey={colorKey}
-                active={activePicker === colorKey}
+                colorKey={key}
+                active={activePicker === key}
                 setActive={(activePicker) => setActivePicker(activePicker)}
                 color={color}
-                disabled={!checkStates[colorKey]}
+                disabled={!checkStates[key]}
               >
                 <ColorPickerInput
-                  value={color}
-                  handleOnChangeComplete={(color) => onChange(colorKey)(color)}
-                  disabled={!checkStates[colorKey]}
+                  value={toColor("hex", color)}
+                  handleOnChangeComplete={(color) => handleOnChange(key, color)}
+                  disabled={!checkStates[key]}
                 />
               </ColorPickerCollapse>
             </Box>
           </Box>
         );
       })}
-      <InputLabel>
-        Preview:
-        <Box sx={{ display: "flex", textAlign: "center" }}>
-          {[0, 0.125, 0.25, 0.375, 0.5, 0.625, 0.75, 0.875, 1].map((value) => {
-            const { startColor, midColor, endColor } = config;
-            return (
-              <Box
-                key={value}
-                sx={{
-                  width: "100%",
-                  padding: "0.5rem 0",
-                  color: theme.palette.text.primary,
-                  backgroundColor: resultColorsScale(value, {
-                    startColor: startColor.hex,
-                    midColor: midColor.hex,
-                    endColor: endColor.hex,
-                  }).toHex(),
-                  opacity: 0.5,
-                }}
-              >
-                {Math.floor(value * 100)}%
-              </Box>
-            );
-          })}
-        </Box>
-      </InputLabel>
+      <Preview colors={config.colors} />
     </>
   );
 }
+
+const Preview = ({ colors }: { colors: any }) => {
+  const theme = useTheme();
+  return (
+    <InputLabel>
+      Preview:
+      <Box sx={{ display: "flex", textAlign: "center" }}>
+        {[0, 0.125, 0.25, 0.375, 0.5, 0.625, 0.75, 0.875, 1].map((value) => {
+          return (
+            <Box
+              key={value}
+              sx={{
+                width: "100%",
+                padding: "0.5rem 0",
+                color: theme.palette.text.primary,
+                backgroundColor: resultColorsScale(value, colors).toHex(),
+                opacity: 0.5,
+              }}
+            >
+              {Math.floor(value * 100)}%
+            </Box>
+          );
+        })}
+      </Box>
+    </InputLabel>
+  );
+};
diff --git a/src/components/fields/Percentage/SideDrawerField.tsx b/src/components/fields/Percentage/SideDrawerField.tsx
index da2d1881f..29673a4f7 100644
--- a/src/components/fields/Percentage/SideDrawerField.tsx
+++ b/src/components/fields/Percentage/SideDrawerField.tsx
@@ -1,10 +1,9 @@
 import { ISideDrawerFieldProps } from "@src/components/fields/types";
 
 import { TextField, InputAdornment, Box } from "@mui/material";
-import { emphasize } from "@mui/material/styles";
 import { resultColorsScale } from "@src/utils/color";
 import { getFieldId } from "@src/components/SideDrawer/utils";
-import { Color, toColor } from "react-color-palette";
+import { configDefaults } from "@src/components/fields/Percentage";
 
 export default function Percentage({
   column,
@@ -13,29 +12,11 @@ export default function Percentage({
   onSubmit,
   disabled,
 }: ISideDrawerFieldProps) {
-  const defaultColors = {
-    startColor: toColor("hex", "#ED4747"),
-    midColor: toColor("hex", "#F3C900"),
-    endColor: toColor("hex", "#1FAD5F"),
-  };
-  const {
-    startColor,
-    midColor,
-    endColor,
-  }: {
-    startColor: Color;
-    endColor: Color;
-    midColor: Color;
-  } = {
-    ...defaultColors,
+  const { colors }: { colors: string[] } = {
+    ...configDefaults,
     ...(column as any).config,
   };
 
-  const colors = {
-    startColor: startColor.hex,
-    midColor: midColor.hex,
-    endColor: endColor.hex,
-  };
   return (
     <TextField
       variant="filled"
diff --git a/src/components/fields/Percentage/TableCell.tsx b/src/components/fields/Percentage/TableCell.tsx
index dc6b43b45..7d27028b6 100644
--- a/src/components/fields/Percentage/TableCell.tsx
+++ b/src/components/fields/Percentage/TableCell.tsx
@@ -2,64 +2,40 @@ import { IHeavyCellProps } from "@src/components/fields/types";
 
 import { useTheme } from "@mui/material";
 import { resultColorsScale } from "@src/utils/color";
-import { Color, toColor } from "react-color-palette";
+import { configDefaults } from "@src/components/fields/Percentage";
 
 export default function Percentage({ column, value }: IHeavyCellProps) {
   const theme = useTheme();
-  const defaultColors = {
-    startColor: toColor("hex", "#ED4747"),
-    midColor: toColor("hex", "#F3C900"),
-    endColor: toColor("hex", "#1FAD5F"),
-  };
-  const {
-    startColor,
-    midColor,
-    endColor,
-  }: {
-    startColor: Color;
-    endColor: Color;
-    midColor: Color;
-  } = {
-    ...defaultColors,
+  const { colors }: { colors: string[] } = {
+    ...configDefaults,
     ...(column as any).config,
   };
 
-  const colors = {
-    startColor: startColor.hex,
-    midColor: midColor.hex,
-    endColor: endColor.hex,
-  };
-
-  if (typeof value === "number")
-    return (
-      <>
-        <div
-          style={{
-            backgroundColor: resultColorsScale(value, colors).toHex(),
-
-            position: "absolute",
-            top: 0,
-            right: 0,
-            bottom: 0,
-            left: 0,
-            opacity: 0.5,
-
-            zIndex: 0,
-          }}
-        />
-        <div
-          style={{
-            textAlign: "right",
-            color: theme.palette.text.primary,
-
-            position: "relative",
-            zIndex: 1,
-          }}
-        >
-          {Math.round(value * 100)}%
-        </div>
-      </>
-    );
-
-  return null;
+  const percentage = typeof value === "number" ? value : 0;
+  return (
+    <>
+      <div
+        style={{
+          backgroundColor: resultColorsScale(percentage, colors).toHex(),
+          position: "absolute",
+          top: 0,
+          right: 0,
+          bottom: 0,
+          left: 0,
+          opacity: 0.5,
+          zIndex: 0,
+        }}
+      />
+      <div
+        style={{
+          textAlign: "right",
+          color: theme.palette.text.primary,
+          position: "relative",
+          zIndex: 1,
+        }}
+      >
+        {Math.round(percentage * 100)}%
+      </div>
+    </>
+  );
 }
diff --git a/src/utils/color.ts b/src/utils/color.ts
index 8a56710d8..5aec3e995 100644
--- a/src/utils/color.ts
+++ b/src/utils/color.ts
@@ -1,12 +1,8 @@
 import { colord } from "colord";
 
-export const defaultColors = {
-  startColor: "#ED4747",
-  midColor: "#f3c900",
-  endColor: "#1fad5f",
-};
+const defaultColors = ["#ED4747", "#F3C900", "#1FAD5F"];
 
 export const resultColorsScale = (value: number, colors: any = defaultColors) =>
   value <= 0.5
-    ? colord(colors.startColor).mix(colors.midColor, value * 2)
-    : colord(colors.midColor).mix(colors.endColor, (value - 0.5) * 2);
+    ? colord(colors[0]).mix(colors[1], value * 2)
+    : colord(colors[1]).mix(colors[2], (value - 0.5) * 2);

From 591ccb2c4c1d0496f3ded6a7dfb96ac4b53d3ea9 Mon Sep 17 00:00:00 2001
From: Han Tuerker <burhan.tuerker@gmail.com>
Date: Wed, 29 Jun 2022 09:00:36 +0300
Subject: [PATCH 13/26] feat(percentage-c11n): refactor config states

---
 src/components/fields/Percentage/Settings.tsx | 87 +++++++++++--------
 .../fields/Percentage/SideDrawerField.tsx     |  7 +-
 .../fields/Percentage/TableCell.tsx           | 12 +--
 src/utils/color.ts                            | 22 +++--
 4 files changed, 74 insertions(+), 54 deletions(-)

diff --git a/src/components/fields/Percentage/Settings.tsx b/src/components/fields/Percentage/Settings.tsx
index e998d5254..c10d2b37e 100644
--- a/src/components/fields/Percentage/Settings.tsx
+++ b/src/components/fields/Percentage/Settings.tsx
@@ -1,4 +1,4 @@
-import { useRef, useState } from "react";
+import { useEffect, useState } from "react";
 
 import {
   Box,
@@ -15,7 +15,7 @@ import { Color, toColor } from "react-color-palette";
 import { fieldSx } from "@src/components/SideDrawer/utils";
 import { ChevronDown } from "mdi-material-ui";
 import { ReactElement } from "react-markdown/lib/react-markdown";
-import { resultColorsScale } from "@src/utils/color";
+import { resultColorsScale, defaultColors } from "@src/utils/color";
 
 const ColorPickerCollapse = ({
   colorKey,
@@ -54,7 +54,6 @@ const ColorPickerCollapse = ({
           {
             justifyContent: "flex-start",
             "&&": { pl: 0.75, pr: 0.5 },
-            color: color,
             transition: (theme) =>
               theme.transitions.create("border-radius", {
                 delay: theme.transitions.duration.standard,
@@ -92,12 +91,6 @@ const ColorPickerCollapse = ({
   );
 };
 
-const defaultColors: { [key: string]: string } = {
-  0: "#ED4747",
-  1: "#F3C900",
-  2: "#1FAD5F",
-};
-
 const colorLabels: { [key: string]: string } = {
   0: "No",
   1: "Yes",
@@ -105,35 +98,49 @@ const colorLabels: { [key: string]: string } = {
 };
 
 export default function Settings({ onChange, config }: ISettingsProps) {
-  const { current: colorsDraft } = useRef<any>([]);
+  const [colorsDraft, setColorsDraft] = useState<any[]>(
+    config.colors ? config.colors : defaultColors
+  );
+
   const [checkStates, setCheckStates] = useState<{ [key: string]: boolean }>({
-    0: false,
-    1: false,
-    2: false,
+    0: colorsDraft[0],
+    1: colorsDraft[1],
+    2: colorsDraft[2],
   });
   const [activePicker, setActivePicker] = useState<string | null>(null);
 
-  const onCheckboxChange = (key: string, checked: boolean) => {
-    if (checked) {
-      colorsDraft[key] = defaultColors[key];
-      onChange("colors")(colorsDraft);
-    } else {
-      colorsDraft[key] = null;
-      onChange("colors")(colorsDraft);
-    }
-    setCheckStates({ ...checkStates, [key]: checked });
+  useEffect(() => {
+    onChange("colors")(colorsDraft);
+  }, [colorsDraft, onChange]);
+
+  const onCheckboxChange = (index: string, checked: boolean) => {
+    setColorsDraft(
+      colorsDraft.map((value: any, idx: number) =>
+        Number(index) === idx
+          ? checked
+            ? value || defaultColors[idx]
+            : null
+          : value
+      )
+    );
+    setCheckStates({ ...checkStates, [index]: checked });
   };
 
-  const handleOnChange = (key: string, color: Color): void => {
-    colorsDraft[key] = color.hex;
-    onChange("colors")(colorsDraft);
+  const handleColorChange = (key: string, color: Color): void => {
+    setColorsDraft(
+      colorsDraft.map((value, index) =>
+        index === Number(key) ? color.hex : value
+      )
+    );
   };
 
   return (
     <>
       {JSON.stringify(config)}
+      <button onClick={() => onChange("colors")([])}>reset</button>
       {Object.keys(checkStates).map((key) => {
-        const color = defaultColors[key];
+        const index = Number(key);
+        const colorHex = colorsDraft[Number(key)];
         return (
           <Box key={key} sx={{ display: "flex", flexDirection: "column" }}>
             {colorLabels[key]}
@@ -149,21 +156,25 @@ export default function Settings({ onChange, config }: ISettingsProps) {
                   fieldSx,
                   { width: "auto", marginRight: "0.5rem", boxShadow: "none" },
                 ]}
-                checked={checkStates[key]}
-                onChange={() => onCheckboxChange(key, !checkStates[key])}
+                checked={checkStates[index]}
+                onChange={() => onCheckboxChange(key, !checkStates[index])}
               />
               <ColorPickerCollapse
                 colorKey={key}
                 active={activePicker === key}
                 setActive={(activePicker) => setActivePicker(activePicker)}
-                color={color}
-                disabled={!checkStates[key]}
+                color={colorHex || "#fff"}
+                disabled={!checkStates[index]}
               >
-                <ColorPickerInput
-                  value={toColor("hex", color)}
-                  handleOnChangeComplete={(color) => handleOnChange(key, color)}
-                  disabled={!checkStates[key]}
-                />
+                {colorHex && (
+                  <ColorPickerInput
+                    value={toColor("hex", colorHex)}
+                    handleOnChangeComplete={(color) =>
+                      handleColorChange(key, color)
+                    }
+                    disabled={!checkStates[index]}
+                  />
+                )}
               </ColorPickerCollapse>
             </Box>
           </Box>
@@ -188,7 +199,11 @@ const Preview = ({ colors }: { colors: any }) => {
                 width: "100%",
                 padding: "0.5rem 0",
                 color: theme.palette.text.primary,
-                backgroundColor: resultColorsScale(value, colors).toHex(),
+                backgroundColor: resultColorsScale(
+                  value,
+                  colors,
+                  theme.palette.background.paper
+                ).toHex(),
                 opacity: 0.5,
               }}
             >
diff --git a/src/components/fields/Percentage/SideDrawerField.tsx b/src/components/fields/Percentage/SideDrawerField.tsx
index 29673a4f7..516682a36 100644
--- a/src/components/fields/Percentage/SideDrawerField.tsx
+++ b/src/components/fields/Percentage/SideDrawerField.tsx
@@ -3,7 +3,6 @@ import { ISideDrawerFieldProps } from "@src/components/fields/types";
 import { TextField, InputAdornment, Box } from "@mui/material";
 import { resultColorsScale } from "@src/utils/color";
 import { getFieldId } from "@src/components/SideDrawer/utils";
-import { configDefaults } from "@src/components/fields/Percentage";
 
 export default function Percentage({
   column,
@@ -12,11 +11,7 @@ export default function Percentage({
   onSubmit,
   disabled,
 }: ISideDrawerFieldProps) {
-  const { colors }: { colors: string[] } = {
-    ...configDefaults,
-    ...(column as any).config,
-  };
-
+  const { colors } = (column as any).config;
   return (
     <TextField
       variant="filled"
diff --git a/src/components/fields/Percentage/TableCell.tsx b/src/components/fields/Percentage/TableCell.tsx
index 7d27028b6..29174a398 100644
--- a/src/components/fields/Percentage/TableCell.tsx
+++ b/src/components/fields/Percentage/TableCell.tsx
@@ -2,21 +2,21 @@ import { IHeavyCellProps } from "@src/components/fields/types";
 
 import { useTheme } from "@mui/material";
 import { resultColorsScale } from "@src/utils/color";
-import { configDefaults } from "@src/components/fields/Percentage";
 
 export default function Percentage({ column, value }: IHeavyCellProps) {
   const theme = useTheme();
-  const { colors }: { colors: string[] } = {
-    ...configDefaults,
-    ...(column as any).config,
-  };
+  const { colors } = (column as any).config;
 
   const percentage = typeof value === "number" ? value : 0;
   return (
     <>
       <div
         style={{
-          backgroundColor: resultColorsScale(percentage, colors).toHex(),
+          backgroundColor: resultColorsScale(
+            percentage,
+            colors,
+            theme.palette.background.paper
+          ).toHex(),
           position: "absolute",
           top: 0,
           right: 0,
diff --git a/src/utils/color.ts b/src/utils/color.ts
index 5aec3e995..efb668923 100644
--- a/src/utils/color.ts
+++ b/src/utils/color.ts
@@ -1,8 +1,18 @@
 import { colord } from "colord";
 
-const defaultColors = ["#ED4747", "#F3C900", "#1FAD5F"];
-
-export const resultColorsScale = (value: number, colors: any = defaultColors) =>
-  value <= 0.5
-    ? colord(colors[0]).mix(colors[1], value * 2)
-    : colord(colors[1]).mix(colors[2], (value - 0.5) * 2);
+export const defaultColors = ["#ED4747", "#F3C900", "#1FAD5F"];
+export const resultColorsScale = (
+  value: number,
+  colors: any = defaultColors,
+  defaultColor: string = "#fff"
+) => {
+  return value <= 0.5
+    ? colord(colors[0] || defaultColor).mix(
+        colors[1] || defaultColor,
+        value * 2
+      )
+    : colord(colors[1] || defaultColor).mix(
+        colors[2] || defaultColor,
+        (value - 0.5) * 2
+      );
+};

From 5069a75e2b4e00161396e72ce458029c34c4a76c Mon Sep 17 00:00:00 2001
From: Han Tuerker <burhan.tuerker@gmail.com>
Date: Wed, 29 Jun 2022 09:16:26 +0300
Subject: [PATCH 14/26] feat(percentage-c11n): fix defaults

---
 src/components/fields/Percentage/Settings.tsx | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/components/fields/Percentage/Settings.tsx b/src/components/fields/Percentage/Settings.tsx
index c10d2b37e..0f5aa0138 100644
--- a/src/components/fields/Percentage/Settings.tsx
+++ b/src/components/fields/Percentage/Settings.tsx
@@ -111,7 +111,8 @@ export default function Settings({ onChange, config }: ISettingsProps) {
 
   useEffect(() => {
     onChange("colors")(colorsDraft);
-  }, [colorsDraft, onChange]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [colorsDraft]);
 
   const onCheckboxChange = (index: string, checked: boolean) => {
     setColorsDraft(
@@ -137,7 +138,6 @@ export default function Settings({ onChange, config }: ISettingsProps) {
   return (
     <>
       {JSON.stringify(config)}
-      <button onClick={() => onChange("colors")([])}>reset</button>
       {Object.keys(checkStates).map((key) => {
         const index = Number(key);
         const colorHex = colorsDraft[Number(key)];
@@ -152,11 +152,11 @@ export default function Settings({ onChange, config }: ISettingsProps) {
               }}
             >
               <Checkbox
+                checked={Boolean(checkStates[key])}
                 sx={[
                   fieldSx,
                   { width: "auto", marginRight: "0.5rem", boxShadow: "none" },
                 ]}
-                checked={checkStates[index]}
                 onChange={() => onCheckboxChange(key, !checkStates[index])}
               />
               <ColorPickerCollapse
@@ -166,7 +166,7 @@ export default function Settings({ onChange, config }: ISettingsProps) {
                 color={colorHex || "#fff"}
                 disabled={!checkStates[index]}
               >
-                {colorHex && (
+                {colorHex ? (
                   <ColorPickerInput
                     value={toColor("hex", colorHex)}
                     handleOnChangeComplete={(color) =>
@@ -174,6 +174,8 @@ export default function Settings({ onChange, config }: ISettingsProps) {
                     }
                     disabled={!checkStates[index]}
                   />
+                ) : (
+                  <></>
                 )}
               </ColorPickerCollapse>
             </Box>

From 531b996018a8e1c1b0dfba5473b91196ca9c09e5 Mon Sep 17 00:00:00 2001
From: Han Tuerker <burhan.tuerker@gmail.com>
Date: Wed, 29 Jun 2022 09:28:49 +0300
Subject: [PATCH 15/26] feat(percentage-c11n): add basic cell without bg

---
 .../fields/Percentage/BasicCell.tsx           | 23 +++++++++++++++++++
 src/components/fields/Percentage/index.tsx    |  5 +++-
 2 files changed, 27 insertions(+), 1 deletion(-)
 create mode 100644 src/components/fields/Percentage/BasicCell.tsx

diff --git a/src/components/fields/Percentage/BasicCell.tsx b/src/components/fields/Percentage/BasicCell.tsx
new file mode 100644
index 000000000..8ee0f9a0b
--- /dev/null
+++ b/src/components/fields/Percentage/BasicCell.tsx
@@ -0,0 +1,23 @@
+import { IBasicCellProps } from "@src/components/fields/types";
+
+import { useTheme } from "@mui/material";
+
+export default function Percentage({ value }: IBasicCellProps) {
+  const theme = useTheme();
+
+  const percentage = typeof value === "number" ? value : 0;
+  return (
+    <>
+      <div
+        style={{
+          textAlign: "right",
+          color: theme.palette.text.primary,
+          position: "relative",
+          zIndex: 1,
+        }}
+      >
+        {Math.round(percentage * 100)}%
+      </div>
+    </>
+  );
+}
diff --git a/src/components/fields/Percentage/index.tsx b/src/components/fields/Percentage/index.tsx
index d53e993bc..f353774fc 100644
--- a/src/components/fields/Percentage/index.tsx
+++ b/src/components/fields/Percentage/index.tsx
@@ -3,11 +3,14 @@ import { IFieldConfig, FieldType } from "@src/components/fields/types";
 import withHeavyCell from "@src/components/fields/_withTableCell/withHeavyCell";
 
 import { Percentage as PercentageIcon } from "@src/assets/icons";
-import BasicCell from "@src/components/fields/_BasicCell/BasicCellNull";
 import TextEditor from "@src/components/Table/editors/TextEditor";
 import { filterOperators } from "@src/components/fields/Number/Filter";
 import BasicContextMenuActions from "@src/components/fields/_BasicCell/BasicCellContextMenuActions";
 
+const BasicCell = lazy(
+  () => import("./BasicCell" /* webpackChunkName: "BasicCell-Percentage" */)
+);
+
 const TableCell = lazy(
   () => import("./TableCell" /* webpackChunkName: "TableCell-Percentage" */)
 );

From aa8d086c2cac0c22991b6beebc372ba49f20689a Mon Sep 17 00:00:00 2001
From: Han Tuerker <burhan.tuerker@gmail.com>
Date: Wed, 29 Jun 2022 16:21:57 +0300
Subject: [PATCH 16/26] feat(percentage-c11n): remove collapse

---
 src/components/ColorPickerInput.tsx           |   1 -
 src/components/fields/Percentage/Settings.tsx | 155 ++++++------------
 2 files changed, 54 insertions(+), 102 deletions(-)

diff --git a/src/components/ColorPickerInput.tsx b/src/components/ColorPickerInput.tsx
index 5b5a92d20..7ed1dd3f7 100644
--- a/src/components/ColorPickerInput.tsx
+++ b/src/components/ColorPickerInput.tsx
@@ -65,7 +65,6 @@ export default function ColorPickerInput({
       sx={[
         fieldSx,
         {
-          marginTop: "1rem",
           padding: "1rem",
           borderColor: "divider",
           transitionDuration: 0,
diff --git a/src/components/fields/Percentage/Settings.tsx b/src/components/fields/Percentage/Settings.tsx
index 0f5aa0138..a9bc98984 100644
--- a/src/components/fields/Percentage/Settings.tsx
+++ b/src/components/fields/Percentage/Settings.tsx
@@ -2,10 +2,10 @@ import { useEffect, useState } from "react";
 
 import {
   Box,
-  ButtonBase,
   Checkbox,
-  Collapse,
   InputLabel,
+  MenuItem,
+  TextField,
   useTheme,
 } from "@mui/material";
 import ColorPickerInput from "@src/components/ColorPickerInput";
@@ -13,88 +13,12 @@ import { ISettingsProps } from "@src/components/fields/types";
 
 import { Color, toColor } from "react-color-palette";
 import { fieldSx } from "@src/components/SideDrawer/utils";
-import { ChevronDown } from "mdi-material-ui";
-import { ReactElement } from "react-markdown/lib/react-markdown";
 import { resultColorsScale, defaultColors } from "@src/utils/color";
 
-const ColorPickerCollapse = ({
-  colorKey,
-  color,
-  active,
-  setActive,
-  disabled,
-  children,
-}: {
-  colorKey: string;
-  color: string;
-  active: boolean;
-  setActive: (activeKey: string | null) => void;
-  disabled?: boolean;
-  children?: ReactElement;
-}) => {
-  const toggleCollapse = () => !disabled && setActive(active ? null : colorKey);
-
-  const toggleState = (() => {
-    if (disabled && active) {
-      setActive(null);
-      return false;
-    }
-    return active;
-  })();
-
-  return (
-    <Box sx={{ width: "100%" }}>
-      <ButtonBase
-        onClick={toggleCollapse}
-        component={ButtonBase}
-        focusRipple
-        disabled={disabled}
-        sx={[
-          fieldSx,
-          {
-            justifyContent: "flex-start",
-            "&&": { pl: 0.75, pr: 0.5 },
-            transition: (theme) =>
-              theme.transitions.create("border-radius", {
-                delay: theme.transitions.duration.standard,
-              }),
-            "&.Mui-disabled": { color: "text.disabled" },
-          },
-          active && {
-            transitionDelay: "0s",
-            transitionDuration: "0s",
-          },
-        ]}
-      >
-        <Box
-          sx={{
-            backgroundColor: color,
-            width: 15,
-            height: 15,
-            mr: 1.5,
-            boxShadow: (theme) => `0 0 0 1px ${theme.palette.divider} inset`,
-            borderRadius: 0.5,
-            opacity: 0.5,
-          }}
-        />
-        <div style={{ flexGrow: 1 }}>{color}</div>
-        <ChevronDown
-          color="action"
-          sx={{
-            transition: (theme) => theme.transitions.create("transform"),
-            transform: active ? "rotate(180deg)" : "none",
-          }}
-        />
-      </ButtonBase>
-      <Collapse in={toggleState}>{children}</Collapse>
-    </Box>
-  );
-};
-
 const colorLabels: { [key: string]: string } = {
   0: "No",
-  1: "Yes",
-  2: "Maybe",
+  1: "Maybe",
+  2: "Yes",
 };
 
 export default function Settings({ onChange, config }: ISettingsProps) {
@@ -107,7 +31,6 @@ export default function Settings({ onChange, config }: ISettingsProps) {
     1: colorsDraft[1],
     2: colorsDraft[2],
   });
-  const [activePicker, setActivePicker] = useState<string | null>(null);
 
   useEffect(() => {
     onChange("colors")(colorsDraft);
@@ -143,11 +66,10 @@ export default function Settings({ onChange, config }: ISettingsProps) {
         const colorHex = colorsDraft[Number(key)];
         return (
           <Box key={key} sx={{ display: "flex", flexDirection: "column" }}>
-            {colorLabels[key]}
             <Box
               sx={{
                 display: "flex",
-                alignItems: "start",
+                alignItems: "end",
                 justifyContent: "center",
               }}
             >
@@ -155,29 +77,60 @@ export default function Settings({ onChange, config }: ISettingsProps) {
                 checked={Boolean(checkStates[key])}
                 sx={[
                   fieldSx,
-                  { width: "auto", marginRight: "0.5rem", boxShadow: "none" },
+                  {
+                    width: "auto",
+                    boxShadow: "none",
+                    backgroundColor: "inherit",
+                    "&:hover": {
+                      backgroundColor: "inherit",
+                    },
+                  },
                 ]}
                 onChange={() => onCheckboxChange(key, !checkStates[index])}
               />
-              <ColorPickerCollapse
-                colorKey={key}
-                active={activePicker === key}
-                setActive={(activePicker) => setActivePicker(activePicker)}
-                color={colorHex || "#fff"}
-                disabled={!checkStates[index]}
+              <TextField
+                select
+                label={colorLabels[key]}
+                value={1}
+                fullWidth
+                disabled={!checkStates[key]}
+                sx={{
+                  "& .MuiMenu-list": {
+                    padding: 0,
+                  },
+                }}
               >
-                {colorHex ? (
-                  <ColorPickerInput
-                    value={toColor("hex", colorHex)}
-                    handleOnChangeComplete={(color) =>
-                      handleColorChange(key, color)
-                    }
-                    disabled={!checkStates[index]}
-                  />
-                ) : (
-                  <></>
+                <MenuItem value={1} sx={{ display: "none" }}>
+                  {checkStates[key] && (
+                    <Box sx={{ display: "flex", alignItems: "center" }}>
+                      <Box
+                        sx={{
+                          backgroundColor: colorHex,
+                          width: 15,
+                          height: 15,
+                          mr: 1.5,
+                          boxShadow: (theme) =>
+                            `0 0 0 1px ${theme.palette.divider} inset`,
+                          borderRadius: 0.5,
+                          opacity: 0.5,
+                        }}
+                      />
+                      <Box>{colorHex}</Box>
+                    </Box>
+                  )}
+                </MenuItem>
+                {colorHex && (
+                  <>
+                    <ColorPickerInput
+                      value={toColor("hex", colorHex)}
+                      handleOnChangeComplete={(color) =>
+                        handleColorChange(key, color)
+                      }
+                      disabled={!checkStates[index]}
+                    />
+                  </>
                 )}
-              </ColorPickerCollapse>
+              </TextField>
             </Box>
           </Box>
         );

From 5161c7cfbdbe013e471b617450817cb7d09317b6 Mon Sep 17 00:00:00 2001
From: Han Tuerker <burhan.tuerker@gmail.com>
Date: Wed, 29 Jun 2022 16:31:08 +0300
Subject: [PATCH 17/26] feat(percentage-c11n): refactor checkStates

---
 src/components/fields/Percentage/Settings.tsx | 47 +++++++++----------
 1 file changed, 21 insertions(+), 26 deletions(-)

diff --git a/src/components/fields/Percentage/Settings.tsx b/src/components/fields/Percentage/Settings.tsx
index a9bc98984..5417d5025 100644
--- a/src/components/fields/Percentage/Settings.tsx
+++ b/src/components/fields/Percentage/Settings.tsx
@@ -26,46 +26,41 @@ export default function Settings({ onChange, config }: ISettingsProps) {
     config.colors ? config.colors : defaultColors
   );
 
-  const [checkStates, setCheckStates] = useState<{ [key: string]: boolean }>({
-    0: colorsDraft[0],
-    1: colorsDraft[1],
-    2: colorsDraft[2],
-  });
+  const [checkStates, setCheckStates] = useState<boolean[]>([
+    colorsDraft[0],
+    colorsDraft[1],
+    colorsDraft[2],
+  ]);
 
   useEffect(() => {
     onChange("colors")(colorsDraft);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [colorsDraft]);
 
-  const onCheckboxChange = (index: string, checked: boolean) => {
+  const onCheckboxChange = (index: number, checked: boolean) => {
     setColorsDraft(
       colorsDraft.map((value: any, idx: number) =>
-        Number(index) === idx
-          ? checked
-            ? value || defaultColors[idx]
-            : null
-          : value
+        index === idx ? (checked ? value || defaultColors[idx] : null) : value
       )
     );
-    setCheckStates({ ...checkStates, [index]: checked });
+    setCheckStates(
+      checkStates.map((value, idx) => (index === idx ? checked : value))
+    );
   };
 
-  const handleColorChange = (key: string, color: Color): void => {
+  const handleColorChange = (index: number, color: Color): void => {
     setColorsDraft(
-      colorsDraft.map((value, index) =>
-        index === Number(key) ? color.hex : value
-      )
+      colorsDraft.map((value, idx) => (index === idx ? color.hex : value))
     );
   };
 
   return (
     <>
       {JSON.stringify(config)}
-      {Object.keys(checkStates).map((key) => {
-        const index = Number(key);
-        const colorHex = colorsDraft[Number(key)];
+      {checkStates.map((checked: boolean, index: number) => {
+        const colorHex = colorsDraft[index];
         return (
-          <Box key={key} sx={{ display: "flex", flexDirection: "column" }}>
+          <Box key={index} sx={{ display: "flex", flexDirection: "column" }}>
             <Box
               sx={{
                 display: "flex",
@@ -74,7 +69,7 @@ export default function Settings({ onChange, config }: ISettingsProps) {
               }}
             >
               <Checkbox
-                checked={Boolean(checkStates[key])}
+                checked={checked}
                 sx={[
                   fieldSx,
                   {
@@ -86,14 +81,14 @@ export default function Settings({ onChange, config }: ISettingsProps) {
                     },
                   },
                 ]}
-                onChange={() => onCheckboxChange(key, !checkStates[index])}
+                onChange={() => onCheckboxChange(index, !checked)}
               />
               <TextField
                 select
-                label={colorLabels[key]}
+                label={colorLabels[index]}
                 value={1}
                 fullWidth
-                disabled={!checkStates[key]}
+                disabled={!checkStates[index]}
                 sx={{
                   "& .MuiMenu-list": {
                     padding: 0,
@@ -101,7 +96,7 @@ export default function Settings({ onChange, config }: ISettingsProps) {
                 }}
               >
                 <MenuItem value={1} sx={{ display: "none" }}>
-                  {checkStates[key] && (
+                  {checked && (
                     <Box sx={{ display: "flex", alignItems: "center" }}>
                       <Box
                         sx={{
@@ -124,7 +119,7 @@ export default function Settings({ onChange, config }: ISettingsProps) {
                     <ColorPickerInput
                       value={toColor("hex", colorHex)}
                       handleOnChangeComplete={(color) =>
-                        handleColorChange(key, color)
+                        handleColorChange(index, color)
                       }
                       disabled={!checkStates[index]}
                     />

From 8fac4b2a1a5372a480508ac765bf8da9ad5c30b0 Mon Sep 17 00:00:00 2001
From: Han Tuerker <burhan.tuerker@gmail.com>
Date: Thu, 30 Jun 2022 02:34:00 +0300
Subject: [PATCH 18/26] feat(percentage-c11n): add grid layout

---
 src/components/ColorPickerInput.tsx           |  11 +-
 src/components/fields/Percentage/Settings.tsx | 174 ++++++++++--------
 2 files changed, 100 insertions(+), 85 deletions(-)

diff --git a/src/components/ColorPickerInput.tsx b/src/components/ColorPickerInput.tsx
index 7ed1dd3f7..9815d42dd 100644
--- a/src/components/ColorPickerInput.tsx
+++ b/src/components/ColorPickerInput.tsx
@@ -5,9 +5,8 @@ import {
   MutableRefObject,
   useLayoutEffect,
 } from "react";
-import { Box } from "@mui/material";
+import { Box, useTheme } from "@mui/material";
 
-import { fieldSx } from "@src/components/SideDrawer/utils";
 import { Color, ColorPicker } from "react-color-palette";
 import { useDebouncedCallback } from "use-debounce";
 
@@ -50,7 +49,7 @@ export default function ColorPickerInput({
 }: IColorPickerProps) {
   const [localValue, setLocalValue] = useState(value);
   const [width, setRef] = useResponsiveWidth();
-
+  const theme = useTheme();
   const debouncedOnChangeComplete = useDebouncedCallback((color) => {
     handleOnChangeComplete(color);
   }, 100);
@@ -63,10 +62,8 @@ export default function ColorPickerInput({
     <Box
       ref={setRef}
       sx={[
-        fieldSx,
         {
-          padding: "1rem",
-          borderColor: "divider",
+          padding: theme.spacing(1.5),
           transitionDuration: 0,
           "& .rcp": {
             border: "none",
@@ -82,7 +79,7 @@ export default function ColorPickerInput({
     >
       <ColorPicker
         width={width}
-        height={100}
+        height={150}
         color={localValue}
         onChange={(color) => setLocalValue(color)}
       />
diff --git a/src/components/fields/Percentage/Settings.tsx b/src/components/fields/Percentage/Settings.tsx
index 5417d5025..3a7d944ec 100644
--- a/src/components/fields/Percentage/Settings.tsx
+++ b/src/components/fields/Percentage/Settings.tsx
@@ -3,9 +3,11 @@ import { useEffect, useState } from "react";
 import {
   Box,
   Checkbox,
+  Grid,
   InputLabel,
   MenuItem,
   TextField,
+  Typography,
   useTheme,
 } from "@mui/material";
 import ColorPickerInput from "@src/components/ColorPickerInput";
@@ -14,6 +16,7 @@ import { ISettingsProps } from "@src/components/fields/types";
 import { Color, toColor } from "react-color-palette";
 import { fieldSx } from "@src/components/SideDrawer/utils";
 import { resultColorsScale, defaultColors } from "@src/utils/color";
+import { GlobalStyles } from "tss-react";
 
 const colorLabels: { [key: string]: string } = {
   0: "No",
@@ -56,80 +59,83 @@ export default function Settings({ onChange, config }: ISettingsProps) {
 
   return (
     <>
-      {JSON.stringify(config)}
-      {checkStates.map((checked: boolean, index: number) => {
-        const colorHex = colorsDraft[index];
-        return (
-          <Box key={index} sx={{ display: "flex", flexDirection: "column" }}>
-            <Box
-              sx={{
-                display: "flex",
-                alignItems: "end",
-                justifyContent: "center",
-              }}
-            >
-              <Checkbox
-                checked={checked}
-                sx={[
-                  fieldSx,
-                  {
-                    width: "auto",
-                    boxShadow: "none",
-                    backgroundColor: "inherit",
-                    "&:hover": {
-                      backgroundColor: "inherit",
-                    },
-                  },
-                ]}
-                onChange={() => onCheckboxChange(index, !checked)}
-              />
-              <TextField
-                select
-                label={colorLabels[index]}
-                value={1}
-                fullWidth
-                disabled={!checkStates[index]}
+      <GlobalStyles
+        styles={{
+          "& .MuiList-root.MuiMenu-list": {
+            padding: 0,
+          },
+        }}
+      />
+      <Grid container>
+        {checkStates.map((checked: boolean, index: number) => {
+          const colorHex = colorsDraft[index];
+          return (
+            <Grid xs={12} md={4} item>
+              <Box
                 sx={{
-                  "& .MuiMenu-list": {
-                    padding: 0,
-                  },
+                  display: "flex",
+                  alignItems: "end",
+                  justifyContent: "center",
                 }}
               >
-                <MenuItem value={1} sx={{ display: "none" }}>
-                  {checked && (
-                    <Box sx={{ display: "flex", alignItems: "center" }}>
-                      <Box
-                        sx={{
-                          backgroundColor: colorHex,
-                          width: 15,
-                          height: 15,
-                          mr: 1.5,
-                          boxShadow: (theme) =>
-                            `0 0 0 1px ${theme.palette.divider} inset`,
-                          borderRadius: 0.5,
-                          opacity: 0.5,
-                        }}
+                <Checkbox
+                  checked={checked}
+                  sx={[
+                    fieldSx,
+                    {
+                      width: "auto",
+                      boxShadow: "none",
+                      backgroundColor: "inherit",
+                      "&:hover": {
+                        backgroundColor: "inherit",
+                      },
+                    },
+                  ]}
+                  onChange={() => onCheckboxChange(index, !checked)}
+                />
+                <TextField
+                  select
+                  label={colorLabels[index]}
+                  value={1}
+                  fullWidth
+                  disabled={!checkStates[index]}
+                >
+                  <MenuItem value={1} sx={{ display: "none" }}>
+                    {checked && (
+                      <Box sx={{ display: "flex", alignItems: "center" }}>
+                        <Box
+                          sx={{
+                            backgroundColor: colorHex,
+                            width: 15,
+                            height: 15,
+                            mr: 1.5,
+                            boxShadow: (theme) =>
+                              `0 0 0 1px ${theme.palette.divider} inset`,
+                            borderRadius: 0.5,
+                            opacity: 0.5,
+                          }}
+                        />
+                        <Box>{colorHex}</Box>
+                      </Box>
+                    )}
+                  </MenuItem>
+                  {colorHex && (
+                    <div>
+                      <ColorPickerInput
+                        value={toColor("hex", colorHex)}
+                        handleOnChangeComplete={(color) =>
+                          handleColorChange(index, color)
+                        }
+                        disabled={!checkStates[index]}
                       />
-                      <Box>{colorHex}</Box>
-                    </Box>
+                    </div>
                   )}
-                </MenuItem>
-                {colorHex && (
-                  <>
-                    <ColorPickerInput
-                      value={toColor("hex", colorHex)}
-                      handleOnChangeComplete={(color) =>
-                        handleColorChange(index, color)
-                      }
-                      disabled={!checkStates[index]}
-                    />
-                  </>
-                )}
-              </TextField>
-            </Box>
-          </Box>
-        );
-      })}
+                </TextField>
+              </Box>
+            </Grid>
+          );
+        })}
+      </Grid>
       <Preview colors={config.colors} />
     </>
   );
@@ -140,24 +146,36 @@ const Preview = ({ colors }: { colors: any }) => {
   return (
     <InputLabel>
       Preview:
-      <Box sx={{ display: "flex", textAlign: "center" }}>
+      <Box
+        sx={{
+          display: "flex",
+          textAlign: "center",
+        }}
+      >
         {[0, 0.125, 0.25, 0.375, 0.5, 0.625, 0.75, 0.875, 1].map((value) => {
           return (
             <Box
-              key={value}
               sx={{
+                position: "relative",
                 width: "100%",
                 padding: "0.5rem 0",
                 color: theme.palette.text.primary,
-                backgroundColor: resultColorsScale(
-                  value,
-                  colors,
-                  theme.palette.background.paper
-                ).toHex(),
-                opacity: 0.5,
               }}
             >
-              {Math.floor(value * 100)}%
+              <Box
+                key={value}
+                sx={{
+                  position: "absolute",
+                  inset: 0,
+                  backgroundColor: resultColorsScale(
+                    value,
+                    colors,
+                    theme.palette.background.paper
+                  ).toHex(),
+                  opacity: 0.5,
+                }}
+              />
+              <Typography>{Math.floor(value * 100)}%</Typography>
             </Box>
           );
         })}

From 21443cd05c98e30846f957913d09fe44077ef8e4 Mon Sep 17 00:00:00 2001
From: Han Tuerker <burhan.tuerker@gmail.com>
Date: Thu, 30 Jun 2022 04:25:02 +0300
Subject: [PATCH 19/26] feat(percentage-c11n): chore conventions

---
 src/components/ColorPickerInput.tsx           |   2 +-
 src/components/fields/Percentage/Settings.tsx | 123 +++++++++---------
 src/utils/color.ts                            |   6 +-
 3 files changed, 66 insertions(+), 65 deletions(-)

diff --git a/src/components/ColorPickerInput.tsx b/src/components/ColorPickerInput.tsx
index 9815d42dd..4e53c0e72 100644
--- a/src/components/ColorPickerInput.tsx
+++ b/src/components/ColorPickerInput.tsx
@@ -68,7 +68,7 @@ export default function ColorPickerInput({
           "& .rcp": {
             border: "none",
             "& .rcp-saturation": {
-              borderRadius: "4px",
+              borderRadius: theme.spacing(0.5),
             },
             "& .rcp-body": {
               boxSizing: "unset",
diff --git a/src/components/fields/Percentage/Settings.tsx b/src/components/fields/Percentage/Settings.tsx
index 3a7d944ec..2b2afe72b 100644
--- a/src/components/fields/Percentage/Settings.tsx
+++ b/src/components/fields/Percentage/Settings.tsx
@@ -19,9 +19,9 @@ import { resultColorsScale, defaultColors } from "@src/utils/color";
 import { GlobalStyles } from "tss-react";
 
 const colorLabels: { [key: string]: string } = {
-  0: "No",
-  1: "Maybe",
-  2: "Yes",
+  0: "Start",
+  1: "Middle",
+  2: "End",
 };
 
 export default function Settings({ onChange, config }: ISettingsProps) {
@@ -70,68 +70,69 @@ export default function Settings({ onChange, config }: ISettingsProps) {
         {checkStates.map((checked: boolean, index: number) => {
           const colorHex = colorsDraft[index];
           return (
-            <Grid xs={12} md={4} item>
-              <Box
-                sx={{
-                  display: "flex",
-                  alignItems: "end",
-                  justifyContent: "center",
-                }}
-              >
-                <Checkbox
-                  checked={checked}
-                  sx={[
-                    fieldSx,
-                    {
-                      width: "auto",
-                      boxShadow: "none",
+            <Grid
+              xs={12}
+              md={4}
+              item
+              sx={{
+                display: "flex",
+                alignItems: "end",
+                justifyContent: "center",
+              }}
+            >
+              <Checkbox
+                checked={checked}
+                sx={[
+                  fieldSx,
+                  {
+                    width: "auto",
+                    boxShadow: "none",
+                    backgroundColor: "inherit",
+                    "&:hover": {
                       backgroundColor: "inherit",
-                      "&:hover": {
-                        backgroundColor: "inherit",
-                      },
                     },
-                  ]}
-                  onChange={() => onCheckboxChange(index, !checked)}
-                />
-                <TextField
-                  select
-                  label={colorLabels[index]}
-                  value={1}
-                  fullWidth
-                  disabled={!checkStates[index]}
-                >
-                  <MenuItem value={1} sx={{ display: "none" }}>
-                    {checked && (
-                      <Box sx={{ display: "flex", alignItems: "center" }}>
-                        <Box
-                          sx={{
-                            backgroundColor: colorHex,
-                            width: 15,
-                            height: 15,
-                            mr: 1.5,
-                            boxShadow: (theme) =>
-                              `0 0 0 1px ${theme.palette.divider} inset`,
-                            borderRadius: 0.5,
-                            opacity: 0.5,
-                          }}
-                        />
-                        <Box>{colorHex}</Box>
-                      </Box>
-                    )}
-                  </MenuItem>
-                  {colorHex && (
-                    <div>
-                      <ColorPickerInput
-                        value={toColor("hex", colorHex)}
-                        handleOnChangeComplete={(color) =>
-                          handleColorChange(index, color)
-                        }
-                        disabled={!checkStates[index]}
+                  },
+                ]}
+                onChange={() => onCheckboxChange(index, !checked)}
+              />
+              <TextField
+                select
+                label={colorLabels[index]}
+                value={1}
+                fullWidth
+                disabled={!checkStates[index]}
+              >
+                <MenuItem value={1} sx={{ display: "none" }}>
+                  {checked && (
+                    <Box sx={{ display: "flex", alignItems: "center" }}>
+                      <Box
+                        sx={{
+                          backgroundColor: colorHex,
+                          width: 15,
+                          height: 15,
+                          mr: 1.5,
+                          boxShadow: (theme) =>
+                            `0 0 0 1px ${theme.palette.divider} inset`,
+                          borderRadius: 0.5,
+                          opacity: 0.5,
+                        }}
                       />
-                    </div>
+                      <Box>{colorHex}</Box>
+                    </Box>
                   )}
-                </TextField>
-              </Box>
+                </MenuItem>
+                {colorHex && (
+                  <div>
+                    <ColorPickerInput
+                      value={toColor("hex", colorHex)}
+                      handleOnChangeComplete={(color) =>
+                        handleColorChange(index, color)
+                      }
+                      disabled={!checkStates[index]}
+                    />
+                  </div>
+                )}
+              </TextField>
             </Grid>
           );
         })}
diff --git a/src/utils/color.ts b/src/utils/color.ts
index efb668923..686e27160 100644
--- a/src/utils/color.ts
+++ b/src/utils/color.ts
@@ -1,12 +1,13 @@
 import { colord } from "colord";
 
 export const defaultColors = ["#ED4747", "#F3C900", "#1FAD5F"];
+
 export const resultColorsScale = (
   value: number,
   colors: any = defaultColors,
   defaultColor: string = "#fff"
-) => {
-  return value <= 0.5
+) =>
+  value <= 0.5
     ? colord(colors[0] || defaultColor).mix(
         colors[1] || defaultColor,
         value * 2
@@ -15,4 +16,3 @@ export const resultColorsScale = (
         colors[2] || defaultColor,
         (value - 0.5) * 2
       );
-};

From 9fd88b387f69aa88711e36d7a43055dbbf02c9db Mon Sep 17 00:00:00 2001
From: Han Tuerker <burhan.tuerker@gmail.com>
Date: Thu, 30 Jun 2022 05:05:08 +0300
Subject: [PATCH 20/26] feat(percentage-c11n): add default theme color to
 sidedrawer

---
 src/components/fields/Percentage/SideDrawerField.tsx | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/components/fields/Percentage/SideDrawerField.tsx b/src/components/fields/Percentage/SideDrawerField.tsx
index 516682a36..15b354201 100644
--- a/src/components/fields/Percentage/SideDrawerField.tsx
+++ b/src/components/fields/Percentage/SideDrawerField.tsx
@@ -1,6 +1,6 @@
 import { ISideDrawerFieldProps } from "@src/components/fields/types";
 
-import { TextField, InputAdornment, Box } from "@mui/material";
+import { TextField, InputAdornment, Box, useTheme } from "@mui/material";
 import { resultColorsScale } from "@src/utils/color";
 import { getFieldId } from "@src/components/SideDrawer/utils";
 
@@ -12,6 +12,7 @@ export default function Percentage({
   disabled,
 }: ISideDrawerFieldProps) {
   const { colors } = (column as any).config;
+  const theme = useTheme();
   return (
     <TextField
       variant="filled"
@@ -34,11 +35,14 @@ export default function Percentage({
                 width: 20,
                 height: 20,
                 borderRadius: 0.5,
-                boxShadow: (theme) =>
-                  `0 0 0 1px ${theme.palette.divider} inest`,
+                boxShadow: `0 0 0 1px ${theme.palette.divider} inest`,
                 backgroundColor:
                   typeof value === "number"
-                    ? resultColorsScale(value, colors).toHex() + "!important"
+                    ? resultColorsScale(
+                        value,
+                        colors,
+                        theme.palette.background.paper
+                      ).toHex() + "!important"
                     : undefined,
               }}
             />

From 2c1fbca1e9b17bc0aa18d4c665d8b69b04aeb5dc Mon Sep 17 00:00:00 2001
From: Han Tuerker <46192266+htuerker@users.noreply.github.com>
Date: Thu, 30 Jun 2022 15:21:03 +0300
Subject: [PATCH 21/26] remove redundant fragment

Co-authored-by: Sidney Alcantara <sidney@sidney.me>
---
 src/components/fields/Percentage/BasicCell.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/components/fields/Percentage/BasicCell.tsx b/src/components/fields/Percentage/BasicCell.tsx
index 8ee0f9a0b..c2dbef58e 100644
--- a/src/components/fields/Percentage/BasicCell.tsx
+++ b/src/components/fields/Percentage/BasicCell.tsx
@@ -7,7 +7,6 @@ export default function Percentage({ value }: IBasicCellProps) {
 
   const percentage = typeof value === "number" ? value : 0;
   return (
-    <>
       <div
         style={{
           textAlign: "right",
@@ -18,6 +17,5 @@ export default function Percentage({ value }: IBasicCellProps) {
       >
         {Math.round(percentage * 100)}%
       </div>
-    </>
   );
 }

From bb73673227143923e2254b98b3f38de422aaeddb Mon Sep 17 00:00:00 2001
From: Han Tuerker <46192266+htuerker@users.noreply.github.com>
Date: Thu, 30 Jun 2022 15:26:12 +0300
Subject: [PATCH 22/26] fix text color in preview

Co-authored-by: Sidney Alcantara <sidney@sidney.me>
---
 src/components/fields/Percentage/Settings.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/fields/Percentage/Settings.tsx b/src/components/fields/Percentage/Settings.tsx
index 2b2afe72b..fddd4a84e 100644
--- a/src/components/fields/Percentage/Settings.tsx
+++ b/src/components/fields/Percentage/Settings.tsx
@@ -176,7 +176,9 @@ const Preview = ({ colors }: { colors: any }) => {
                   opacity: 0.5,
                 }}
               />
-              <Typography>{Math.floor(value * 100)}%</Typography>
+              <Typography style={{ position: "relative", zIndex: 1 }}>
+                {Math.floor(value * 100)}%
+              </Typography>
             </Box>
           );
         })}

From 18aa406d82498592792e3e7c660bce696545ef95 Mon Sep 17 00:00:00 2001
From: Han Tuerker <46192266+htuerker@users.noreply.github.com>
Date: Sat, 2 Jul 2022 03:38:44 +0300
Subject: [PATCH 23/26] fix: change state to derived state

Co-authored-by: Sidney Alcantara <sidney@sidney.me>
---
 src/components/fields/Percentage/Settings.tsx | 14 ++++----------
 1 file changed, 4 insertions(+), 10 deletions(-)

diff --git a/src/components/fields/Percentage/Settings.tsx b/src/components/fields/Percentage/Settings.tsx
index fddd4a84e..5be2924ba 100644
--- a/src/components/fields/Percentage/Settings.tsx
+++ b/src/components/fields/Percentage/Settings.tsx
@@ -25,23 +25,17 @@ const colorLabels: { [key: string]: string } = {
 };
 
 export default function Settings({ onChange, config }: ISettingsProps) {
-  const [colorsDraft, setColorsDraft] = useState<any[]>(
-    config.colors ? config.colors : defaultColors
-  );
+  const colors = config.colors ?? defaultColors;
 
+  // It makes sense to keep this a state
   const [checkStates, setCheckStates] = useState<boolean[]>([
     colorsDraft[0],
     colorsDraft[1],
     colorsDraft[2],
   ]);
 
-  useEffect(() => {
-    onChange("colors")(colorsDraft);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [colorsDraft]);
-
   const onCheckboxChange = (index: number, checked: boolean) => {
-    setColorsDraft(
+    onChange("colors")(
       colorsDraft.map((value: any, idx: number) =>
         index === idx ? (checked ? value || defaultColors[idx] : null) : value
       )
@@ -52,7 +46,7 @@ export default function Settings({ onChange, config }: ISettingsProps) {
   };
 
   const handleColorChange = (index: number, color: Color): void => {
-    setColorsDraft(
+    onChange("colors")(
       colorsDraft.map((value, idx) => (index === idx ? color.hex : value))
     );
   };

From e2bfef27f040633be40d128d387cd6124c5bfd40 Mon Sep 17 00:00:00 2001
From: Han Tuerker <burhan.tuerker@gmail.com>
Date: Sat, 2 Jul 2022 04:23:30 +0300
Subject: [PATCH 24/26] fix: review suggestions

---
 src/components/ColorPickerInput.tsx           |  9 ++++--
 src/components/fields/Percentage/Settings.tsx | 29 ++++++-------------
 .../fields/Percentage/SideDrawerField.tsx     |  2 +-
 3 files changed, 16 insertions(+), 24 deletions(-)

diff --git a/src/components/ColorPickerInput.tsx b/src/components/ColorPickerInput.tsx
index 4e53c0e72..ce5d40c2e 100644
--- a/src/components/ColorPickerInput.tsx
+++ b/src/components/ColorPickerInput.tsx
@@ -38,20 +38,21 @@ const useResponsiveWidth = (): [
 
 export interface IColorPickerProps {
   value: Color;
-  handleOnChangeComplete: (color: Color) => void;
+  onChangeComplete: (color: Color) => void;
   disabled?: boolean;
 }
 
 export default function ColorPickerInput({
   value,
-  handleOnChangeComplete,
+  onChangeComplete,
   disabled = false,
 }: IColorPickerProps) {
   const [localValue, setLocalValue] = useState(value);
   const [width, setRef] = useResponsiveWidth();
   const theme = useTheme();
+
   const debouncedOnChangeComplete = useDebouncedCallback((color) => {
-    handleOnChangeComplete(color);
+    onChangeComplete(color);
   }, 100);
 
   useEffect(() => {
@@ -64,6 +65,7 @@ export default function ColorPickerInput({
       sx={[
         {
           padding: theme.spacing(1.5),
+          paddingTop: theme.spacing(1),
           transitionDuration: 0,
           "& .rcp": {
             border: "none",
@@ -82,6 +84,7 @@ export default function ColorPickerInput({
         height={150}
         color={localValue}
         onChange={(color) => setLocalValue(color)}
+        onChangeComplete={onChangeComplete}
       />
     </Box>
   );
diff --git a/src/components/fields/Percentage/Settings.tsx b/src/components/fields/Percentage/Settings.tsx
index 5be2924ba..e28dde2cc 100644
--- a/src/components/fields/Percentage/Settings.tsx
+++ b/src/components/fields/Percentage/Settings.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useState } from "react";
 
 import {
   Box,
@@ -16,7 +16,6 @@ import { ISettingsProps } from "@src/components/fields/types";
 import { Color, toColor } from "react-color-palette";
 import { fieldSx } from "@src/components/SideDrawer/utils";
 import { resultColorsScale, defaultColors } from "@src/utils/color";
-import { GlobalStyles } from "tss-react";
 
 const colorLabels: { [key: string]: string } = {
   0: "Start",
@@ -25,18 +24,15 @@ const colorLabels: { [key: string]: string } = {
 };
 
 export default function Settings({ onChange, config }: ISettingsProps) {
-  const colors = config.colors ?? defaultColors;
+  const colors: string[] = config.colors ?? defaultColors;
 
-  // It makes sense to keep this a state
-  const [checkStates, setCheckStates] = useState<boolean[]>([
-    colorsDraft[0],
-    colorsDraft[1],
-    colorsDraft[2],
-  ]);
+  const [checkStates, setCheckStates] = useState<boolean[]>(
+    colors.map(Boolean)
+  );
 
   const onCheckboxChange = (index: number, checked: boolean) => {
     onChange("colors")(
-      colorsDraft.map((value: any, idx: number) =>
+      colors.map((value: any, idx: number) =>
         index === idx ? (checked ? value || defaultColors[idx] : null) : value
       )
     );
@@ -47,22 +43,15 @@ export default function Settings({ onChange, config }: ISettingsProps) {
 
   const handleColorChange = (index: number, color: Color): void => {
     onChange("colors")(
-      colorsDraft.map((value, idx) => (index === idx ? color.hex : value))
+      colors.map((value, idx) => (index === idx ? color.hex : value))
     );
   };
 
   return (
     <>
-      <GlobalStyles
-        styles={{
-          "& .MuiList-root.MuiMenu-list": {
-            padding: 0,
-          },
-        }}
-      />
       <Grid container>
         {checkStates.map((checked: boolean, index: number) => {
-          const colorHex = colorsDraft[index];
+          const colorHex = colors[index];
           return (
             <Grid
               xs={12}
@@ -119,7 +108,7 @@ export default function Settings({ onChange, config }: ISettingsProps) {
                   <div>
                     <ColorPickerInput
                       value={toColor("hex", colorHex)}
-                      handleOnChangeComplete={(color) =>
+                      onChangeComplete={(color) =>
                         handleColorChange(index, color)
                       }
                       disabled={!checkStates[index]}
diff --git a/src/components/fields/Percentage/SideDrawerField.tsx b/src/components/fields/Percentage/SideDrawerField.tsx
index 15b354201..a6cc43662 100644
--- a/src/components/fields/Percentage/SideDrawerField.tsx
+++ b/src/components/fields/Percentage/SideDrawerField.tsx
@@ -35,7 +35,7 @@ export default function Percentage({
                 width: 20,
                 height: 20,
                 borderRadius: 0.5,
-                boxShadow: `0 0 0 1px ${theme.palette.divider} inest`,
+                boxShadow: `0 0 0 1px ${theme.palette.divider} inset`,
                 backgroundColor:
                   typeof value === "number"
                     ? resultColorsScale(

From 0bd6f638afd5eec506041ddbd907a406feebfe07 Mon Sep 17 00:00:00 2001
From: Han Tuerker <46192266+htuerker@users.noreply.github.com>
Date: Mon, 4 Jul 2022 17:13:51 +0300
Subject: [PATCH 25/26] fix: remove redundant change call

Co-authored-by: Sidney Alcantara <sidney@sidney.me>
---
 src/components/ColorPickerInput.tsx | 7 -------
 1 file changed, 7 deletions(-)

diff --git a/src/components/ColorPickerInput.tsx b/src/components/ColorPickerInput.tsx
index ce5d40c2e..29606234c 100644
--- a/src/components/ColorPickerInput.tsx
+++ b/src/components/ColorPickerInput.tsx
@@ -51,13 +51,6 @@ export default function ColorPickerInput({
   const [width, setRef] = useResponsiveWidth();
   const theme = useTheme();
 
-  const debouncedOnChangeComplete = useDebouncedCallback((color) => {
-    onChangeComplete(color);
-  }, 100);
-
-  useEffect(() => {
-    debouncedOnChangeComplete(localValue);
-  }, [debouncedOnChangeComplete, localValue]);
 
   return (
     <Box

From d0151442810c98c3010f956e0d0377bdad8b1e99 Mon Sep 17 00:00:00 2001
From: Han Tuerker <burhan.tuerker@gmail.com>
Date: Mon, 4 Jul 2022 17:18:57 +0300
Subject: [PATCH 26/26] fix(percentage-c11n): remove redundant dependencies

---
 src/components/ColorPickerInput.tsx | 10 +---------
 1 file changed, 1 insertion(+), 9 deletions(-)

diff --git a/src/components/ColorPickerInput.tsx b/src/components/ColorPickerInput.tsx
index 29606234c..89ebdb212 100644
--- a/src/components/ColorPickerInput.tsx
+++ b/src/components/ColorPickerInput.tsx
@@ -1,14 +1,7 @@
-import {
-  useState,
-  useEffect,
-  useRef,
-  MutableRefObject,
-  useLayoutEffect,
-} from "react";
+import { useState, useRef, MutableRefObject, useLayoutEffect } from "react";
 import { Box, useTheme } from "@mui/material";
 
 import { Color, ColorPicker } from "react-color-palette";
-import { useDebouncedCallback } from "use-debounce";
 
 const useResponsiveWidth = (): [
   width: number,
@@ -51,7 +44,6 @@ export default function ColorPickerInput({
   const [width, setRef] = useResponsiveWidth();
   const theme = useTheme();
 
-
   return (
     <Box
       ref={setRef}