From 20368dc9d2d0c5bc3c0564dd1545b294761f1566 Mon Sep 17 00:00:00 2001
From: harini-1597 <thisisharinim@gmail.com>
Date: Fri, 7 Jun 2024 17:27:24 +0530
Subject: [PATCH 1/2] feat: add hex color code box

---
 src/components/core/colorPicker/index.tsx | 162 +++++++---------------
 1 file changed, 50 insertions(+), 112 deletions(-)

diff --git a/src/components/core/colorPicker/index.tsx b/src/components/core/colorPicker/index.tsx
index 33529b9f..aca824c0 100644
--- a/src/components/core/colorPicker/index.tsx
+++ b/src/components/core/colorPicker/index.tsx
@@ -3,26 +3,37 @@ import { useState } from "react";
 
 type ColorpickerTypes = {
   colors: {
-    color01: string;
-    color02: string;
-    color03: string;
-    color04: string;
+    [key: string]: string; // Add an index signature for colors
   };
   isPalleteTouched: boolean;
   setColors: any;
   setTouched: any;
 };
 
+
 // eslint-disable-next-line react/prop-types
 function Colorpicker({ colors, setColors, setTouched, isPalleteTouched }: ColorpickerTypes) {
   const [selectedColorSection, setColorSection] = useState<number | null>(null);
+  const [colorInputs, setColorInputs] = useState(colors);
+
   const changeHandler = (color: string) => {
     if (!isPalleteTouched) {
       setTouched(true);
     }
-    if (typeof color === "string")
-      setColors({ ...colors, [`color0` + selectedColorSection]: color });
+    if (typeof color === "string") {
+      setColors({ ...colors, [`color0${selectedColorSection}`]: color });
+      setColorInputs({ ...colorInputs, [`color0${selectedColorSection}`]: color });
+    }
   };
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>, section: number) => {
+    const value = e.target.value;
+    setColorInputs({ ...colorInputs, [`color0${section}`]: value });
+    if (/^#[0-9A-F]{6}$/i.test(value)) {
+      changeHandler(value);
+    }
+  };
+
   const showPicker = (id: number) => {
     if (id === selectedColorSection) {
       setColorSection(null);
@@ -33,116 +44,43 @@ function Colorpicker({ colors, setColors, setTouched, isPalleteTouched }: Colorp
 
   return (
     <>
-      <div className="relative">
-        <div className="w-[300px] rounded-[0.8rem] h-[200px] bg-[#888A8A] mx-auto flex">
-          <div
-            onClick={() => showPicker(1)}
-            className="cursor-pointer w-full rounded-tl-[0.8rem] rounded-bl-[0.8rem]"
-            style={{
-              backgroundColor: (typeof colors.color01 === "string" && colors.color01) || "",
-            }}
-          ></div>
-          <div
-            onClick={() => showPicker(2)}
-            className="cursor-pointer w-full "
-            style={{
-              backgroundColor: (typeof colors.color02 === "string" && colors.color02) || "",
-            }}
-          ></div>
-          <div
-            onClick={() => showPicker(3)}
-            className="cursor-pointer w-full"
-            style={{
-              backgroundColor: (typeof colors.color03 === "string" && colors.color03) || "",
-            }}
-          ></div>
-          <div
-            onClick={() => showPicker(4)}
-            className="cursor-pointer w-full rounded-tr-[0.8rem] rounded-br-[0.8rem]"
-            style={{
-              backgroundColor: (typeof colors.color04 === "string" && colors.color04) || "",
-            }}
-          ></div>
+      <div className="relative mx-auto">
+        <div className="relative pl-[70px] pr-2">
+        <div className="mx-auto w-[400px] rounded-[0.8rem] h-[175px] bg-[#888A8A] flex">
+          {['color01', 'color02', 'color03', 'color04'].map((color, index) => (
+            <div
+              key={color}
+              onClick={() => showPicker(index + 1)}
+              className={`cursor-pointer w-full ${index === 0 ? 'rounded-tl-[0.8rem] rounded-bl-[0.8rem]' : ''} ${index === 3 ? 'rounded-tr-[0.8rem] rounded-br-[0.8rem]' : ''}`}
+              style={{
+                backgroundColor: colors[color],
+              }}
+            ></div>
+          ))}
+        </div>
+        <div className="flex justify-center mt-1 mx-20">
+          {['color01', 'color02', 'color03', 'color04'].map((color, index) => (
+            <input
+              key={color}
+              type="text"
+              value={colorInputs[color]}
+              onChange={(e) => handleInputChange(e, index + 1)}
+              placeholder="#000000"
+              className="w-20 text-center mx-2.5"
+            />
+          ))}
+        </div>
         </div>
         {selectedColorSection && (
-          <>
-            {/* <div className='fixed top-0 left-0 right-0 bottom-0' onClick={handleClose}></div> */}
-            <div className="absolute top-0">
-              <HexColorPicker
-                style={{ width: "100px" }}
-                onChange={changeHandler}
-                color={
-                  (selectedColorSection &&
-                    ((selectedColorSection === 1 && colors["color01"]) ||
-                      (selectedColorSection === 2 && colors["color02"]) ||
-                      (selectedColorSection === 3 && colors["color03"]) ||
-                      (selectedColorSection === 4 && colors["color04"]))) ||
-                  ""
-                }
-              />
-            </div>
-          </>
+          <div className="absolute top-0">
+            <HexColorPicker
+              style={{ width: "100px" }}
+              onChange={changeHandler}
+              color={colors[`color0${selectedColorSection}`]}
+            />
+          </div>
         )}
       </div>
-
-      {/* <div className="grid grid-cols-1 md:grid-cols-2 md:grid-rows-2 gap-4">
-        
-        <div className="mb-3">
-          <input
-            type="text"
-            name="color01"
-            id="color01"
-            value={colors && String(colors.color01)}
-            required={true}
-            onChange={changeHandler}
-            placeholder="Enter 1st color"
-            className="w-full rounded-md border border-[#e0e0e0] bg-white py-3 px-4 text-base font-medium text-[#1C223A] outline-none focus:border-[#6A64F1] focus:shadow-md"
-            maxLength={6}
-          />
-        </div>
-
-        <div className="mb-3">
-          <input
-            type="text"
-            name="color02"
-            id="color02"
-            required={true}
-            value={colors && String(colors.color02)}
-            onChange={changeHandler}
-            placeholder="Enter 2nd color"
-            className="w-full rounded-md border border-[#e0e0e0] bg-white py-3 px-4 text-base font-medium text-[#1C223A] outline-none focus:border-[#6A64F1] focus:shadow-md"
-            maxLength={6}
-          />
-        </div>
-
-        <div className="mb-3">
-          <input
-            type="text"
-            name="color03"
-            id="color03"
-            required={true}
-            value={colors && String(colors.color02)}
-            onChange={changeHandler}
-            placeholder="Enter 3rd color"
-            className="w-full rounded-md border border-[#e0e0e0] bg-white py-3 px-4 text-base font-medium text-[#1C223A] outline-none focus:border-[#6A64F1] focus:shadow-md"
-            maxLength={6}
-          />
-        </div>
-
-        <div className="mb-3">
-          <input
-            type="text"
-            name="color04"
-            id="color04"
-            required={true}
-            value={colors && String(colors.color02)}
-            onChange={changeHandler}
-            placeholder="Enter 4th color"
-            className="w-full rounded-md border border-[#e0e0e0] bg-white py-3 px-4 text-base font-medium text-[#1C223A] outline-none focus:border-[#6A64F1] focus:shadow-md"
-            maxLength={6}
-          />
-        </div>
-      </div> */}
     </>
   );
 }

From b463b9ef3e4c1c3cadfa9bc31dd9e172a7099633 Mon Sep 17 00:00:00 2001
From: harini-1597 <thisisharinim@gmail.com>
Date: Tue, 11 Jun 2024 22:24:44 +0530
Subject: [PATCH 2/2] fix: updated colorpicker

---
 src/components/core/colorPicker/index.tsx | 66 +++++++++++++++++++++--
 1 file changed, 62 insertions(+), 4 deletions(-)

diff --git a/src/components/core/colorPicker/index.tsx b/src/components/core/colorPicker/index.tsx
index aca824c0..3ba52d1a 100644
--- a/src/components/core/colorPicker/index.tsx
+++ b/src/components/core/colorPicker/index.tsx
@@ -3,7 +3,7 @@ import { useState } from "react";
 
 type ColorpickerTypes = {
   colors: {
-    [key: string]: string; // Add an index signature for colors
+    [key: string]: string;
   };
   isPalleteTouched: boolean;
   setColors: any;
@@ -21,15 +21,16 @@ function Colorpicker({ colors, setColors, setTouched, isPalleteTouched }: Colorp
       setTouched(true);
     }
     if (typeof color === "string") {
-      setColors({ ...colors, [`color0${selectedColorSection}`]: color });
-      setColorInputs({ ...colorInputs, [`color0${selectedColorSection}`]: color });
+      const updatedColors = { ...colors, [`color0${selectedColorSection}`]: color };
+      setColors(updatedColors);
+      setColorInputs(updatedColors);
     }
   };
 
   const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>, section: number) => {
     const value = e.target.value;
     setColorInputs({ ...colorInputs, [`color0${section}`]: value });
-    if (/^#[0-9A-F]{6}$/i.test(value)) {
+    if (/^#([0-9A-F]{3}){1,2}$/i.test(value)) {
       changeHandler(value);
     }
   };
@@ -51,6 +52,7 @@ function Colorpicker({ colors, setColors, setTouched, isPalleteTouched }: Colorp
             <div
               key={color}
               onClick={() => showPicker(index + 1)}
+              onKeyUp={(e) => { if (e.key === 'Enter') showPicker(index + 1); }}
               className={`cursor-pointer w-full ${index === 0 ? 'rounded-tl-[0.8rem] rounded-bl-[0.8rem]' : ''} ${index === 3 ? 'rounded-tr-[0.8rem] rounded-br-[0.8rem]' : ''}`}
               style={{
                 backgroundColor: colors[color],
@@ -81,6 +83,62 @@ function Colorpicker({ colors, setColors, setTouched, isPalleteTouched }: Colorp
           </div>
         )}
       </div>
+
+    {/* <div className="grid grid-cols-1 md:grid-cols-2 md:grid-rows-2 gap-4">
+        
+        <div className="mb-3">
+          <input
+            type="text"
+            name="color01"
+            id="color01"
+            value={colors && String(colors.color01)}
+            required={true}
+            onChange={changeHandler}
+            placeholder="Enter 1st color"
+            className="w-full rounded-md border border-[#e0e0e0] bg-white py-3 px-4 text-base font-medium text-[#1C223A] outline-none focus:border-[#6A64F1] focus:shadow-md"
+            maxLength={6}
+          />
+        </div>
+        <div className="mb-3">
+          <input
+            type="text"
+            name="color02"
+            id="color02"
+            required={true}
+            value={colors && String(colors.color02)}
+            onChange={changeHandler}
+            placeholder="Enter 2nd color"
+            className="w-full rounded-md border border-[#e0e0e0] bg-white py-3 px-4 text-base font-medium text-[#1C223A] outline-none focus:border-[#6A64F1] focus:shadow-md"
+            maxLength={6}
+          />
+        </div>
+        <div className="mb-3">
+          <input
+            type="text"
+            name="color03"
+            id="color03"
+            required={true}
+            value={colors && String(colors.color02)}
+            onChange={changeHandler}
+            placeholder="Enter 3rd color"
+            className="w-full rounded-md border border-[#e0e0e0] bg-white py-3 px-4 text-base font-medium text-[#1C223A] outline-none focus:border-[#6A64F1] focus:shadow-md"
+            maxLength={6}
+          />
+        </div>
+        <div className="mb-3">
+          <input
+            type="text"
+            name="color04"
+            id="color04"
+            required={true}
+            value={colors && String(colors.color02)}
+            onChange={changeHandler}
+            placeholder="Enter 4th color"
+            className="w-full rounded-md border border-[#e0e0e0] bg-white py-3 px-4 text-base font-medium text-[#1C223A] outline-none focus:border-[#6A64F1] focus:shadow-md"
+            maxLength={6}
+          />
+        </div>
+      </div> */}
     </>
   );
 }