From d57e99ed30adc20716432298bae9122c1977b696 Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <aaryankhandu123@gmail.com>
Date: Thu, 21 Sep 2023 02:12:06 +0530
Subject: [PATCH] chore: random color generator for options and number fields

---
 .../attribute-forms/number-attribute-form.tsx | 18 +-----------
 .../select-attribute/option-form.tsx          |  8 +++--
 .../custom-attributes/object-modal.tsx        |  2 +-
 web/constants/custom-attributes.ts            |  5 +++-
 web/helpers/color.helper.ts                   | 29 +++++++++++++++++++
 5 files changed, 40 insertions(+), 22 deletions(-)

diff --git a/web/components/custom-attributes/attribute-forms/number-attribute-form.tsx b/web/components/custom-attributes/attribute-forms/number-attribute-form.tsx
index 4640c5f8b..49d93961f 100644
--- a/web/components/custom-attributes/attribute-forms/number-attribute-form.tsx
+++ b/web/components/custom-attributes/attribute-forms/number-attribute-form.tsx
@@ -114,6 +114,7 @@ export const NumberAttributeForm: React.FC<FormComponentProps> = ({ control, wat
                     className="hide-arrows"
                     min={0}
                     step={1}
+                    defaultValue={100}
                     required
                   />
                 )}
@@ -128,23 +129,6 @@ export const NumberAttributeForm: React.FC<FormComponentProps> = ({ control, wat
                 name="color"
                 render={({ field: { onChange, value } }) => (
                   <ColorPicker onChange={onChange} selectedColor={value ?? "#000000"} size={18} />
-                  // <label htmlFor="numberColorPicker" className="relative block cursor-pointer">
-                  //   <Input
-                  //     type="color"
-                  //     id="numberColorPicker"
-                  //     placeholder="Accent color"
-                  //     className="hide-color cursor-pointer"
-                  //     value={value}
-                  //     onChange={(e) => onChange(e.target.value)}
-                  //     required
-                  //   />
-                  //   <span
-                  //     className="absolute top-1/2 -translate-y-[65%] left-2 h-5 w-5 rounded pointer-events-none"
-                  //     style={{
-                  //       backgroundColor: value,
-                  //     }}
-                  //   />
-                  // </label>
                 )}
               />
             </div>
diff --git a/web/components/custom-attributes/attribute-forms/select-attribute/option-form.tsx b/web/components/custom-attributes/attribute-forms/select-attribute/option-form.tsx
index ef032ab3e..9af10d269 100644
--- a/web/components/custom-attributes/attribute-forms/select-attribute/option-form.tsx
+++ b/web/components/custom-attributes/attribute-forms/select-attribute/option-form.tsx
@@ -9,6 +9,8 @@ import { useMobxStore } from "lib/mobx/store-provider";
 import { ColorPicker } from "components/custom-attributes";
 // ui
 import { PrimaryButton } from "components/ui";
+// helpers
+import { getRandomColor } from "helpers/color.helper";
 // types
 import { ICustomAttribute } from "types";
 
@@ -24,7 +26,7 @@ export const OptionForm: React.FC<Props> = observer((props) => {
 
   const [option, setOption] = useState<Partial<ICustomAttribute>>({
     display_name: "",
-    color: "#000000",
+    color: getRandomColor(),
   });
   const [isEditing, setIsEditing] = useState(false);
 
@@ -73,7 +75,7 @@ export const OptionForm: React.FC<Props> = observer((props) => {
 
     setOption({
       display_name: "",
-      color: "#000000",
+      color: getRandomColor(),
     });
 
     if (onSubmit) onSubmit();
@@ -97,7 +99,7 @@ export const OptionForm: React.FC<Props> = observer((props) => {
         />
         <ColorPicker
           onChange={(val) => setOption((prev) => ({ ...prev, color: val }))}
-          selectedColor={option.color ?? "#000000"}
+          selectedColor={option.color ?? getRandomColor()}
         />
       </div>
       <div className="flex-shrink-0">
diff --git a/web/components/custom-attributes/object-modal.tsx b/web/components/custom-attributes/object-modal.tsx
index 6de1b11bc..ffc8fbc77 100644
--- a/web/components/custom-attributes/object-modal.tsx
+++ b/web/components/custom-attributes/object-modal.tsx
@@ -155,7 +155,7 @@ export const ObjectModal: React.FC<Props> = observer(
             leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
           >
             <Dialog.Panel className="fixed inset-0 h-full w-full z-20">
-              <div className="flex items-center justify-center h-full w-full p-4 sm:p-0">
+              <div className="flex items-center justify-center h-full w-full p-4 sm:p-0 scale-90">
                 <div className="bg-custom-background-100 w-1/2 max-h-[85%] flex flex-col rounded-xl">
                   <h3 className="text-2xl font-semibold px-6 pt-5">New Object</h3>
                   <div className="mt-5 space-y-5 h-full overflow-y-auto">
diff --git a/web/constants/custom-attributes.ts b/web/constants/custom-attributes.ts
index f617c1d1b..007ee97fb 100644
--- a/web/constants/custom-attributes.ts
+++ b/web/constants/custom-attributes.ts
@@ -11,6 +11,8 @@ import {
   Link2,
   LucideIcon,
 } from "lucide-react";
+// helpers
+import { getRandomColor } from "helpers/color.helper";
 // types
 import { ICustomAttribute, TCustomAttributeTypes, TCustomAttributeUnits } from "types";
 
@@ -93,7 +95,7 @@ export const CUSTOM_ATTRIBUTES_LIST: {
   },
   number: {
     defaultFormValues: {
-      color: "#000000",
+      color: getRandomColor(),
       default_value: "",
       display_name: "",
       extra_settings: {
@@ -106,6 +108,7 @@ export const CUSTOM_ATTRIBUTES_LIST: {
     icon: Hash,
     label: "Number",
     initialPayload: {
+      color: getRandomColor(),
       extra_settings: {
         representation: "numerical",
       },
diff --git a/web/helpers/color.helper.ts b/web/helpers/color.helper.ts
index a1f915a1e..db3ded366 100644
--- a/web/helpers/color.helper.ts
+++ b/web/helpers/color.helper.ts
@@ -17,3 +17,32 @@ export const rgbToHex = (rgb: TRgb): string => {
 
   return `#${hexR}${hexG}${hexB}`;
 };
+
+/**
+ * @returns {string} random hex color code
+ * @description function to generate a random vibrant hex color code
+ */
+
+export const getRandomColor = (): string => {
+  // Generate random RGB values
+  const r = Math.floor(Math.random() * 256);
+  const g = Math.floor(Math.random() * 256);
+  const b = Math.floor(Math.random() * 256);
+
+  // Calculate the luminance
+  const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
+
+  // Define thresholds for luminance (adjust as needed)
+  const minLuminance = 0.3;
+  const maxLuminance = 0.7;
+
+  // Check if the luminance is within the desired range
+  if (luminance >= minLuminance && luminance <= maxLuminance) {
+    // Convert RGB to hex format
+    const hexColor = `#${((1 << 24) | (r << 16) | (g << 8) | b).toString(16).slice(1)}`;
+    return hexColor;
+  } else {
+    // Recurse to find a suitable color
+    return getRandomColor();
+  }
+};