From 40cb7ef184097a688b98a6a9246ba41fb144d96e Mon Sep 17 00:00:00 2001
From: Dev-CasperTheGhost
 <53900565+Dev-CasperTheGhost@users.noreply.github.com>
Date: Tue, 2 Nov 2021 08:03:21 +0100
Subject: [PATCH] :tada: add color picker (closes #103)

---
 packages/client/package.json                  |  1 +
 packages/client/src/components/Button.tsx     |  5 ++--
 .../admin/values/ManageValueModal.tsx         | 30 +++++++++++++++++--
 yarn.lock                                     | 11 +++++++
 4 files changed, 42 insertions(+), 5 deletions(-)

diff --git a/packages/client/package.json b/packages/client/package.json
index 681e72341..3ad1d4f52 100644
--- a/packages/client/package.json
+++ b/packages/client/package.json
@@ -21,6 +21,7 @@
     "next-intl": "^2.1.1",
     "react": "^17.0.2",
     "react-bootstrap-icons": "^1.6.1",
+    "react-colorful": "^5.5.0",
     "react-dom": "^17.0.2",
     "react-hot-toast": "^2.1.1",
     "react-markdown": "^7.1.0",
diff --git a/packages/client/src/components/Button.tsx b/packages/client/src/components/Button.tsx
index 5e1484b34..dd4c15227 100644
--- a/packages/client/src/components/Button.tsx
+++ b/packages/client/src/components/Button.tsx
@@ -19,9 +19,8 @@ export const Button = React.forwardRef<HTMLButtonElement, Props>(
   ({ variant = "default", small, className = "", ...rest }, ref) => (
     <button
       className={classNames(
-        `${
-          small ? "p-0.5 px-2" : "p-1 px-4"
-        } rounded-md transition-all disabled:opacity-60 disabled:cursor-not-allowed`,
+        "rounded-md transition-all disabled:opacity-60 disabled:cursor-not-allowed",
+        small ? "p-0.5 px-2" : "p-1 px-4",
         variant && variants[variant],
         className,
       )}
diff --git a/packages/client/src/components/admin/values/ManageValueModal.tsx b/packages/client/src/components/admin/values/ManageValueModal.tsx
index 3e744ba5e..b1d8e5b39 100644
--- a/packages/client/src/components/admin/values/ManageValueModal.tsx
+++ b/packages/client/src/components/admin/values/ManageValueModal.tsx
@@ -21,6 +21,10 @@ import { useTranslations } from "use-intl";
 import { Select } from "components/form/Select";
 import hexColor from "hex-color-regex";
 import { TValue } from "src/pages/admin/values/[path]";
+import dynamic from "next/dynamic";
+import { Eyedropper } from "react-bootstrap-icons";
+
+const HexColorPicker = dynamic(async () => (await import("react-colorful")).HexColorPicker);
 
 interface Props {
   type: ValueType;
@@ -128,6 +132,7 @@ export const ManageValueModal = ({ onCreate, onUpdate, clType: dlType, type, val
     type: value?.type ?? "",
     // @ts-expect-error shortcut
     hash: value?.hash ?? "",
+    showPicker: false,
   };
 
   function validate(values: typeof INITIAL_VALUES) {
@@ -151,7 +156,7 @@ export const ManageValueModal = ({ onCreate, onUpdate, clType: dlType, type, val
       isOpen={isOpen("manageValue")}
     >
       <Formik validate={validate} onSubmit={onSubmit} initialValues={INITIAL_VALUES}>
-        {({ handleSubmit, handleChange, values, errors }) => (
+        {({ handleSubmit, handleChange, setFieldValue, values, errors }) => (
           <form onSubmit={handleSubmit}>
             {type === "DIVISION" ? (
               <FormField fieldId="departmentId" label="Department">
@@ -233,7 +238,28 @@ export const ManageValueModal = ({ onCreate, onUpdate, clType: dlType, type, val
                 </FormField>
 
                 <FormField fieldId="color" label="Color (#HEX)">
-                  <Input name="color" onChange={handleChange} value={values.color} />
+                  <div className={`flex ${values.showPicker ? "items-start" : ""}`}>
+                    {values.showPicker ? (
+                      <HexColorPicker
+                        color={values.color}
+                        onChange={(color) => setFieldValue("color", color)}
+                        style={{ width: "100%", height: "150px" }}
+                      />
+                    ) : (
+                      <Input name="color" onChange={handleChange} value={values.color} />
+                    )}
+
+                    <Button
+                      variant="cancel"
+                      className="ml-2 px-1 p-0"
+                      type="button"
+                      onClick={() => setFieldValue("showPicker", !values.showPicker)}
+                      aria-label="Color Picker"
+                      title="Color Picker"
+                    >
+                      <Eyedropper />
+                    </Button>
+                  </div>
                   <Error>{errors.color}</Error>
                 </FormField>
               </>
diff --git a/yarn.lock b/yarn.lock
index 39360fb86..1e9b68951 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -703,6 +703,7 @@ __metadata:
     preact: ^10.5.15
     react: ^17.0.2
     react-bootstrap-icons: ^1.6.1
+    react-colorful: ^5.5.0
     react-dom: ^17.0.2
     react-hot-toast: ^2.1.1
     react-markdown: ^7.1.0
@@ -7822,6 +7823,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-colorful@npm:^5.5.0":
+  version: 5.5.0
+  resolution: "react-colorful@npm:5.5.0"
+  peerDependencies:
+    react: ">=16.8.0"
+    react-dom: ">=16.8.0"
+  checksum: aaffa002d9372f692238a29229ff1e991d6d0077f4f83dcdf88ad3106a0737aa56e415a71b91fb585f8532e04f09d3f0fabbc5cd8291137206dc3c1a0d70674f
+  languageName: node
+  linkType: hard
+
 "react-dom@npm:^17.0.2":
   version: 17.0.2
   resolution: "react-dom@npm:17.0.2"