feat: icon picker (#689)

* feat: icon picker

* style: icon picker modal

---------

Co-authored-by: Dakshesh Jain <dakshesh.jain14@gmail.com>

apps/app/components/emoji-icon-picker/icons.json

@@ -0,0 +1,607 @@
+{
+  "material_rounded": [
+    {
+      "name": "search"
+    },
+    {
+      "name": "home"
+    },
+    {
+      "name": "menu"
+    },
+    {
+      "name": "close"
+    },
+    {
+      "name": "settings"
+    },
+    {
+      "name": "done"
+    },
+    {
+      "name": "check_circle"
+    },
+    {
+      "name": "favorite"
+    },
+    {
+      "name": "add"
+    },
+    {
+      "name": "delete"
+    },
+    {
+      "name": "arrow_back"
+    },
+    {
+      "name": "star"
+    },
+    {
+      "name": "logout"
+    },
+    {
+      "name": "add_circle"
+    },
+    {
+      "name": "cancel"
+    },
+    {
+      "name": "arrow_drop_down"
+    },
+    {
+      "name": "more_vert"
+    },
+    {
+      "name": "check"
+    },
+    {
+      "name": "check_box"
+    },
+    {
+      "name": "toggle_on"
+    },
+    {
+      "name": "open_in_new"
+    },
+    {
+      "name": "refresh"
+    },
+    {
+      "name": "login"
+    },
+    {
+      "name": "radio_button_unchecked"
+    },
+    {
+      "name": "more_horiz"
+    },
+    {
+      "name": "apps"
+    },
+    {
+      "name": "radio_button_checked"
+    },
+    {
+      "name": "download"
+    },
+    {
+      "name": "remove"
+    },
+    {
+      "name": "toggle_off"
+    },
+    {
+      "name": "bolt"
+    },
+    {
+      "name": "arrow_upward"
+    },
+    {
+      "name": "filter_list"
+    },
+    {
+      "name": "delete_forever"
+    },
+    {
+      "name": "autorenew"
+    },
+    {
+      "name": "key"
+    },
+    {
+      "name": "sort"
+    },
+    {
+      "name": "sync"
+    },
+    {
+      "name": "add_box"
+    },
+    {
+      "name": "block"
+    },
+    {
+      "name": "restart_alt"
+    },
+    {
+      "name": "menu_open"
+    },
+    {
+      "name": "shopping_cart_checkout"
+    },
+    {
+      "name": "expand_circle_down"
+    },
+    {
+      "name": "backspace"
+    },
+    {
+      "name": "undo"
+    },
+    {
+      "name": "done_all"
+    },
+    {
+      "name": "do_not_disturb_on"
+    },
+    {
+      "name": "open_in_full"
+    },
+    {
+      "name": "double_arrow"
+    },
+    {
+      "name": "sync_alt"
+    },
+    {
+      "name": "zoom_in"
+    },
+    {
+      "name": "done_outline"
+    },
+    {
+      "name": "drag_indicator"
+    },
+    {
+      "name": "fullscreen"
+    },
+    {
+      "name": "star_half"
+    },
+    {
+      "name": "settings_accessibility"
+    },
+    {
+      "name": "reply"
+    },
+    {
+      "name": "exit_to_app"
+    },
+    {
+      "name": "unfold_more"
+    },
+    {
+      "name": "library_add"
+    },
+    {
+      "name": "cached"
+    },
+    {
+      "name": "select_check_box"
+    },
+    {
+      "name": "terminal"
+    },
+    {
+      "name": "change_circle"
+    },
+    {
+      "name": "disabled_by_default"
+    },
+    {
+      "name": "swap_horiz"
+    },
+    {
+      "name": "swap_vert"
+    },
+    {
+      "name": "app_registration"
+    },
+    {
+      "name": "download_for_offline"
+    },
+    {
+      "name": "close_fullscreen"
+    },
+    {
+      "name": "file_open"
+    },
+    {
+      "name": "minimize"
+    },
+    {
+      "name": "open_with"
+    },
+    {
+      "name": "dataset"
+    },
+    {
+      "name": "add_task"
+    },
+    {
+      "name": "start"
+    },
+    {
+      "name": "keyboard_voice"
+    },
+    {
+      "name": "create_new_folder"
+    },
+    {
+      "name": "forward"
+    },
+    {
+      "name": "download"
+    },
+    {
+      "name": "settings_applications"
+    },
+    {
+      "name": "compare_arrows"
+    },
+    {
+      "name": "redo"
+    },
+    {
+      "name": "zoom_out"
+    },
+    {
+      "name": "publish"
+    },
+    {
+      "name": "html"
+    },
+    {
+      "name": "token"
+    },
+    {
+      "name": "switch_access_shortcut"
+    },
+    {
+      "name": "fullscreen_exit"
+    },
+    {
+      "name": "sort_by_alpha"
+    },
+    {
+      "name": "delete_sweep"
+    },
+    {
+      "name": "indeterminate_check_box"
+    },
+    {
+      "name": "view_timeline"
+    },
+    {
+      "name": "settings_backup_restore"
+    },
+    {
+      "name": "arrow_drop_down_circle"
+    },
+    {
+      "name": "assistant_navigation"
+    },
+    {
+      "name": "sync_problem"
+    },
+    {
+      "name": "clear_all"
+    },
+    {
+      "name": "density_medium"
+    },
+    {
+      "name": "heart_plus"
+    },
+    {
+      "name": "filter_alt_off"
+    },
+    {
+      "name": "expand"
+    },
+    {
+      "name": "subdirectory_arrow_right"
+    },
+    {
+      "name": "download_done"
+    },
+    {
+      "name": "arrow_outward"
+    },
+    {
+      "name": "123"
+    },
+    {
+      "name": "swipe_left"
+    },
+    {
+      "name": "auto_mode"
+    },
+    {
+      "name": "saved_search"
+    },
+    {
+      "name": "place_item"
+    },
+    {
+      "name": "system_update_alt"
+    },
+    {
+      "name": "javascript"
+    },
+    {
+      "name": "search_off"
+    },
+    {
+      "name": "output"
+    },
+    {
+      "name": "select_all"
+    },
+    {
+      "name": "fit_screen"
+    },
+    {
+      "name": "swipe_up"
+    },
+    {
+      "name": "dynamic_form"
+    },
+    {
+      "name": "hide_source"
+    },
+    {
+      "name": "swipe_right"
+    },
+    {
+      "name": "switch_access_shortcut_add"
+    },
+    {
+      "name": "browse_gallery"
+    },
+    {
+      "name": "css"
+    },
+    {
+      "name": "density_small"
+    },
+    {
+      "name": "assistant_direction"
+    },
+    {
+      "name": "check_small"
+    },
+    {
+      "name": "youtube_searched_for"
+    },
+    {
+      "name": "move_up"
+    },
+    {
+      "name": "swap_horizontal_circle"
+    },
+    {
+      "name": "data_thresholding"
+    },
+    {
+      "name": "install_mobile"
+    },
+    {
+      "name": "move_down"
+    },
+    {
+      "name": "dataset_linked"
+    },
+    {
+      "name": "keyboard_command_key"
+    },
+    {
+      "name": "view_kanban"
+    },
+    {
+      "name": "swipe_down"
+    },
+    {
+      "name": "key_off"
+    },
+    {
+      "name": "transcribe"
+    },
+    {
+      "name": "send_time_extension"
+    },
+    {
+      "name": "swipe_down_alt"
+    },
+    {
+      "name": "swipe_left_alt"
+    },
+    {
+      "name": "swipe_right_alt"
+    },
+    {
+      "name": "swipe_up_alt"
+    },
+    {
+      "name": "keyboard_option_key"
+    },
+    {
+      "name": "cycle"
+    },
+    {
+      "name": "rebase"
+    },
+    {
+      "name": "rebase_edit"
+    },
+    {
+      "name": "empty_dashboard"
+    },
+    {
+      "name": "magic_exchange"
+    },
+    {
+      "name": "acute"
+    },
+    {
+      "name": "point_scan"
+    },
+    {
+      "name": "step_into"
+    },
+    {
+      "name": "cheer"
+    },
+    {
+      "name": "emoticon"
+    },
+    {
+      "name": "explosion"
+    },
+    {
+      "name": "water_bottle"
+    },
+    {
+      "name": "weather_hail"
+    },
+    {
+      "name": "syringe"
+    },
+    {
+      "name": "pill"
+    },
+    {
+      "name": "genetics"
+    },
+    {
+      "name": "allergy"
+    },
+    {
+      "name": "medical_mask"
+    },
+    {
+      "name": "body_fat"
+    },
+    {
+      "name": "barefoot"
+    },
+    {
+      "name": "infrared"
+    },
+    {
+      "name": "wrist"
+    },
+    {
+      "name": "metabolism"
+    },
+    {
+      "name": "conditions"
+    },
+    {
+      "name": "taunt"
+    },
+    {
+      "name": "altitude"
+    },
+    {
+      "name": "tibia"
+    },
+    {
+      "name": "footprint"
+    },
+    {
+      "name": "eyeglasses"
+    },
+    {
+      "name": "man_3"
+    },
+    {
+      "name": "woman_2"
+    },
+    {
+      "name": "rheumatology"
+    },
+    {
+      "name": "tornado"
+    },
+    {
+      "name": "landslide"
+    },
+    {
+      "name": "foggy"
+    },
+    {
+      "name": "severe_cold"
+    },
+    {
+      "name": "tsunami"
+    },
+    {
+      "name": "vape_free"
+    },
+    {
+      "name": "sign_language"
+    },
+    {
+      "name": "emoji_symbols"
+    },
+    {
+      "name": "clear_night"
+    },
+    {
+      "name": "emoji_food_beverage"
+    },
+    {
+      "name": "hive"
+    },
+    {
+      "name": "thunderstorm"
+    },
+    {
+      "name": "communication"
+    },
+    {
+      "name": "rocket"
+    },
+    {
+      "name": "pets"
+    },
+    {
+      "name": "public"
+    },
+    {
+      "name": "quiz"
+    },
+    {
+      "name": "mood"
+    },
+    {
+      "name": "gavel"
+    },
+    {
+      "name": "eco"
+    },
+    {
+      "name": "diamond"
+    },
+    {
+      "name": "forest"
+    },
+    {
+      "name": "rainy"
+    },
+    {
+      "name": "skull"
+    }
+  ]
+}

apps/app/components/emoji-icon-picker/index.tsx

@@ -1,10 +1,13 @@
 import React, { useEffect, useState, useRef } from "react";
 // headless ui
 import { Tab, Transition, Popover } from "@headlessui/react";
+// react colors
+import { TwitterPicker } from "react-color";
 // types
 import { Props } from "./types";
 // emojis
 import emojis from "./emojis.json";
+import icons from "./icons.json";
 // helpers
 import { getRecentEmojis, saveRecentEmoji } from "./helpers";
 import { getRandomEmoji } from "helpers/common.helper";
@@ -22,10 +25,18 @@ const tabOptions = [
   },
 ];
 
-const EmojiIconPicker: React.FC<Props> = ({ label, value, onChange }) => {
+const EmojiIconPicker: React.FC<Props> = ({
+  label,
+  value,
+  onChange,
+  onIconColorChange,
+  onIconsClick,
+}) => {
   const ref = useRef<HTMLDivElement>(null);
 
   const [isOpen, setIsOpen] = useState(false);
+  const [openColorPicker, setOpenColorPicker] = useState(false);
+  const [activeColor, setActiveColor] = useState<string>("#020617");
 
   const [recentEmojis, setRecentEmojis] = useState<string[]>([]);
 
@@ -58,20 +69,25 @@ const EmojiIconPicker: React.FC<Props> = ({ label, value, onChange }) => {
         leaveFrom="transform opacity-100 scale-100"
         leaveTo="transform opacity-0 scale-95"
       >
-        <Popover.Panel className="absolute z-10 mt-2 w-80 rounded-lg bg-white shadow-lg">
+        <Popover.Panel className="absolute z-10 mt-2 w-[250px] rounded-[4px] bg-white shadow-lg">
-          <div className="h-72 w-80 overflow-auto rounded border bg-white p-2 shadow-2xl">
+          <div className="h-[230px] w-[250px] overflow-auto border rounded-[4px] bg-white p-2 shadow-xl">
             <Tab.Group as="div" className="flex h-full w-full flex-col">
-              <Tab.List className="flex-0 -mx-2 flex justify-around gap-1 border-b p-1">
+              <Tab.List className="flex-0 -mx-2 flex justify-around gap-1 p-1">
                 {tabOptions.map((tab) => (
-                  <Tab
+                  <Tab key={tab.key} as={React.Fragment}>
-                    key={tab.key}
+                    {({ selected }) => (
-                    className={({ selected }) =>
+                      <button
-                      `-my-1 w-1/2 border-b py-2 text-center text-sm font-medium outline-none transition-colors ${
+                        type="button"
-                        selected ? "border-theme" : "border-transparent"
+                        onClick={() => {
-                      }`
+                          setOpenColorPicker(false);
-                    }
+                        }}
-                  >
+                        className={`-my-1 w-1/2 border-b pb-2 text-center text-sm font-medium outline-none transition-colors ${
-                    {tab.title}
+                          selected ? "border-theme" : "border-transparent"
+                        }`}
+                      >
+                        {tab.title}
+                      </button>
+                    )}
                   </Tab>
                 ))}
               </Tab.List>
@@ -79,12 +95,12 @@ const EmojiIconPicker: React.FC<Props> = ({ label, value, onChange }) => {
                 <Tab.Panel>
                   {recentEmojis.length > 0 && (
                     <div className="py-2">
-                      <h3 className="mb-2">Recent Emojis</h3>
+                      {/* <h3 className="mb-2">Recent Emojis</h3> */}
-                      <div className="grid grid-cols-9 gap-2">
+                      <div className="grid grid-cols-10">
                         {recentEmojis.map((emoji) => (
                           <button
                             type="button"
-                            className="select-none text-lg hover:bg-hover-gray"
+                            className="h-4 w-4 select-none text-sm hover:bg-hover-gray flex items-center justify-between"
                             key={emoji}
                             onClick={() => {
                               onChange(emoji);
@@ -97,13 +113,14 @@ const EmojiIconPicker: React.FC<Props> = ({ label, value, onChange }) => {
                       </div>
                     </div>
                   )}
+                  <hr className="w-full h-[1px] mb-2" />
                   <div>
-                    <h3 className="mb-2">All Emojis</h3>
+                    {/* <h3 className="mb-1">All Emojis</h3> */}
-                    <div className="grid grid-cols-9 gap-2">
+                    <div className="grid grid-cols-10 gap-y-1">
                       {emojis.map((emoji) => (
                         <button
                           type="button"
-                          className="select-none text-lg hover:bg-hover-gray"
+                          className="h-4 w-4 mb-1 select-none text-sm hover:bg-hover-gray flex items-center"
                           key={emoji}
                           onClick={() => {
                             onChange(emoji);
@@ -117,9 +134,76 @@ const EmojiIconPicker: React.FC<Props> = ({ label, value, onChange }) => {
                     </div>
                   </div>
                 </Tab.Panel>
-                <Tab.Panel className="flex h-full w-full flex-col items-center justify-center">
+                <div className="py-2">
-                  <p>Coming Soon...</p>
+                  <div className="relative">
-                </Tab.Panel>
+                    <div className="pb-2 flex items-center justify-between">
+                      {[
+                        "#D687FF",
+                        "#F7AE59",
+                        "#FF6B00",
+                        "#8CC1FF",
+                        "#FCBE1D",
+                        "#18904F",
+                        "#ADF672",
+                        "#05C3FF",
+                        "#000000",
+                      ].map((curCol) => (
+                        <span
+                          className="w-4 h-4 rounded-full cursor-pointer"
+                          style={{ backgroundColor: curCol }}
+                          onClick={() => setActiveColor(curCol)}
+                        />
+                      ))}
+                      <button
+                        type="button"
+                        onClick={() => setOpenColorPicker((prev) => !prev)}
+                        className="flex items-center gap-1"
+                      >
+                        <span
+                          className="w-4 h-4 rounded-full conical-gradient"
+                          style={{ backgroundColor: activeColor }}
+                        />
+                      </button>
+                    </div>
+                    <div>
+                      <TwitterPicker
+                        className={`m-2 !absolute top-4 left-4 z-10 ${
+                          openColorPicker ? "block" : "hidden"
+                        }`}
+                        color={activeColor}
+                        onChange={(color) => {
+                          setActiveColor(color.hex);
+                          if (onIconColorChange) onIconColorChange(color.hex);
+                        }}
+                        triangle="hide"
+                        width="205px"
+                      />
+                    </div>
+                  </div>
+                  <hr className="w-full h-[1px] mb-1" />
+                  <Tab.Panel className="flex h-full w-full flex-col justify-center">
+                    <div className="grid grid-cols-10 mt-1 ml-1 gap-1">
+                      {icons.material_rounded.map((icon) => (
+                        <button
+                          type="button"
+                          className="h-4 w-4 mb-1 select-none text-lg hover:bg-hover-gray flex items-center"
+                          key={icon.name}
+                          onClick={() => {
+                            if (onIconsClick) onIconsClick(icon.name);
+                            setIsOpen(false);
+                          }}
+                        >
+                          <span
+                            style={{ color: activeColor }}
+                            className="material-symbols-rounded text-base"
+                          >
+                            {icon.name}
+                          </span>
+                        </button>
+                      ))}
+                    </div>
+                  </Tab.Panel>
+                </div>
               </Tab.Panels>
             </Tab.Group>
           </div>

apps/app/components/emoji-icon-picker/types.d.ts

@@ -2,4 +2,6 @@ export type Props = {
   label: string | React.ReactNode;
   value: any;
   onChange: (data: any) => void;
+  onIconsClick?: (data: any) => void;
+  onIconColorChange?: (data: any) => void;
 };

apps/app/styles/globals.css

@@ -128,4 +128,9 @@
 .react-datepicker-popper {
   z-index: 30 !important;
 }
+
+.conical-gradient{
+  background: conic-gradient(from 180deg at 50% 50%, #FF6B00 0deg, #F7AE59 70.5deg, #3F76FF 151.12deg, #05C3FF 213deg, #18914F 289.87deg, #F6F172 329.25deg, #FF6B00 360deg);
+}
+
 /* end react datepicker styling */