[WEB-4734] feat: replace emoji picker with frimousse (#7639)

apps/web/ce/components/breadcrumbs/project.tsx

@@ -4,8 +4,9 @@ import { observer } from "mobx-react";
 import { Briefcase } from "lucide-react";
 // plane imports
 import { ICustomSearchSelectOption } from "@plane/types";
-import { BreadcrumbNavigationSearchDropdown, Breadcrumbs, Logo } from "@plane/ui";
+import { BreadcrumbNavigationSearchDropdown, Breadcrumbs } from "@plane/ui";
 // components
+import { Logo } from "@/components/common/logo";
 import { SwitcherLabel } from "@/components/common/switcher-label";
 // hooks
 import { useProject } from "@/hooks/store/use-project";

apps/web/core/components/analytics/overview/active-project-item.tsx

@@ -1,7 +1,7 @@
 import { Briefcase } from "lucide-react";
 // plane package imports
-import { Logo } from "@plane/ui";
 import { cn } from "@plane/utils";
+import { Logo } from "@/components/common/logo";
 // plane web hooks
 import { useProject } from "@/hooks/store/use-project";
 

apps/web/core/components/analytics/select/project.tsx

@@ -3,7 +3,9 @@
 import { observer } from "mobx-react";
 import { Briefcase } from "lucide-react";
 // plane package imports
-import { CustomSearchSelect, Logo } from "@plane/ui";
+import { CustomSearchSelect } from "@plane/ui";
+// components
+import { Logo } from "@/components/common/logo";
 // hooks
 import { useProject } from "@/hooks/store/use-project";
 

apps/web/core/components/common/logo.tsx

@@ -1,15 +1,13 @@
 "use client";
 
 import { FC } from "react";
-import { Emoji } from "emoji-picker-react";
 // Due to some weird issue with the import order, the import of useFontFaceObserver
 // should be after the imported here rather than some below helper functions as it is in the original file
 // eslint-disable-next-line import/order
 import useFontFaceObserver from "use-font-face-observer";
 // plane imports
+import { getEmojiSize, LUCIDE_ICONS_LIST, stringToEmoji } from "@plane/propel/emoji-icon-picker";
 import { TLogoProps } from "@plane/types";
-import { LUCIDE_ICONS_LIST } from "@plane/ui";
-import { emojiCodeToUnicode } from "@plane/utils";
 
 type Props = {
   logo: TLogoProps;
@@ -53,7 +51,19 @@ export const Logo: FC<Props> = (props) => {
 
   // emoji
   if (in_use === "emoji") {
-    return <Emoji unified={emojiCodeToUnicode(value)} size={size} />;
+    return (
+      <span
+        className="flex items-center justify-center"
+        style={{
+          fontSize: `${getEmojiSize(size)}rem`,
+          lineHeight: `${getEmojiSize(size)}rem`,
+          height: size,
+          width: size,
+        }}
+      >
+        {stringToEmoji(emoji?.value || "")}
+      </span>
+    );
   }
 
   // icon

apps/web/core/components/common/switcher-label.tsx

@@ -1,7 +1,8 @@
 import { FC } from "react";
 import { TLogoProps } from "@plane/types";
-import { ISvgIcons, Logo } from "@plane/ui";
+import { ISvgIcons } from "@plane/ui";
 import { getFileURL, truncateText } from "@plane/utils";
+import { Logo } from "@/components/common/logo";
 
 type TSwitcherIconProps = {
   logo_props?: TLogoProps;

apps/web/core/components/cycles/list/cycle-list-project-group-header.tsx

@@ -4,9 +4,11 @@ import React, { FC } from "react";
 import { observer } from "mobx-react";
 import { ChevronRight } from "lucide-react";
 // icons
-import { Row, Logo } from "@plane/ui";
+import { Row } from "@plane/ui";
 // helpers
 import { cn } from "@plane/utils";
+// components
+import { Logo } from "@/components/common/logo";
 import { useProject } from "@/hooks/store/use-project";
 
 type Props = {

apps/web/core/components/home/widgets/recents/page.tsx

@@ -2,9 +2,10 @@ import { useRouter } from "next/navigation";
 import { FileText } from "lucide-react";
 // plane import
 import type { TActivityEntityData, TPageEntityData } from "@plane/types";
-import { Avatar, Logo } from "@plane/ui";
+import { Avatar } from "@plane/ui";
 import { calculateTimeAgo, getFileURL, getPageName } from "@plane/utils";
 // components
+import { Logo } from "@/components/common/logo";
 import { ListItem } from "@/components/core/list";
 // hooks
 import { useMember } from "@/hooks/store/use-member";

apps/web/core/components/home/widgets/recents/project.tsx

@@ -1,10 +1,9 @@
 import { useRouter } from "next/navigation";
 // plane types
 import { TActivityEntityData, TProjectEntityData } from "@plane/types";
-// plane ui
-import { Logo } from "@plane/ui";
-// components
 import { calculateTimeAgo } from "@plane/utils";
+// components
+import { Logo } from "@/components/common/logo";
 import { ListItem } from "@/components/core/list";
 import { MemberDropdown } from "@/components/dropdowns/member/dropdown";
 // helpers

apps/web/core/components/project/create/header.tsx

@@ -4,14 +4,14 @@ import { X } from "lucide-react";
 // plane imports
 import { ETabIndices } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
+import { EmojiPicker, EmojiIconPickerTypes } from "@plane/propel/emoji-icon-picker";
 // plane types
 import { IProject } from "@plane/types";
 // plane ui
-import { CustomEmojiIconPicker, EmojiIconPickerTypes, Logo } from "@plane/ui";
-import { convertHexEmojiToDecimal, getFileURL, getTabIndex } from "@plane/utils";
+import { getFileURL, getTabIndex } from "@plane/utils";
 // components
+import { Logo } from "@/components/common/logo";
 import { ImagePickerPopover } from "@/components/core/image-picker-popover";
-// helpers
 // plane web imports
 import { ProjectTemplateSelect } from "@/plane-web/components/projects/create/template-select";
 
@@ -66,7 +66,8 @@ const ProjectCreateHeader: React.FC<Props> = (props) => {
           name="logo_props"
           control={control}
           render={({ field: { value, onChange } }) => (
-            <CustomEmojiIconPicker
+            <EmojiPicker
+              iconType="material"
               isOpen={isOpen}
               handleToggle={(val: boolean) => setIsOpen(val)}
               className="flex items-center justify-center"
@@ -81,8 +82,7 @@ const ProjectCreateHeader: React.FC<Props> = (props) => {
 
                 if (val?.type === "emoji")
                   logoValue = {
-                    value: convertHexEmojiToDecimal(val.value.unified),
-                    url: val.value.imageUrl,
+                    value: val.value,
                   };
                 else if (val?.type === "icon") logoValue = val.value;
 

apps/web/core/components/project/form.tsx

@@ -6,6 +6,7 @@ import { Info, Lock } from "lucide-react";
 import { NETWORK_CHOICES, PROJECT_TRACKER_ELEMENTS, PROJECT_TRACKER_EVENTS } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 // plane imports
+import { EmojiPicker } from "@plane/propel/emoji-icon-picker";
 import { Tooltip } from "@plane/propel/tooltip";
 import { IProject, IWorkspace } from "@plane/types";
 import {
@@ -203,7 +204,8 @@ export const ProjectDetailsForm: FC<IProjectDetailsForm> = (props) => {
               control={control}
               name="logo_props"
               render={({ field: { value, onChange } }) => (
-                <CustomEmojiIconPicker
+                <EmojiPicker
+                  iconType="material"
                   closeOnSelect={false}
                   isOpen={isOpen}
                   handleToggle={(val: boolean) => setIsOpen(val)}
@@ -215,8 +217,7 @@ export const ProjectDetailsForm: FC<IProjectDetailsForm> = (props) => {
 
                     if (val?.type === "emoji")
                       logoValue = {
-                        value: convertHexEmojiToDecimal(val.value.unified),
-                        url: val.value.imageUrl,
+                        value: val.value,
                       };
                     else if (val?.type === "icon") logoValue = val.value;
 

apps/web/core/components/views/form.tsx

@@ -8,6 +8,7 @@ import { Layers } from "lucide-react";
 import { ETabIndices, ISSUE_DISPLAY_FILTERS_BY_PAGE } from "@plane/constants";
 // i18n
 import { useTranslation } from "@plane/i18n";
+import { EmojiPicker, EmojiIconPickerTypes } from "@plane/propel/emoji-icon-picker";
 // types
 import {
   EViewAccess,
@@ -18,13 +19,8 @@ import {
   EIssueLayoutTypes,
 } from "@plane/types";
 // ui
-import { Button, EmojiIconPicker, EmojiIconPickerTypes, Input, TextArea } from "@plane/ui";
-import {
-  convertHexEmojiToDecimal,
-  getComputedDisplayFilters,
-  getComputedDisplayProperties,
-  getTabIndex,
-} from "@plane/utils";
+import { Button, Input, TextArea } from "@plane/ui";
+import { getComputedDisplayFilters, getComputedDisplayProperties, getTabIndex } from "@plane/utils";
 // components
 import { Logo } from "@/components/common/logo";
 import {
@@ -163,7 +159,8 @@ export const ProjectViewForm: React.FC<Props> = observer((props) => {
         </h3>
         <div className="space-y-3">
           <div className="flex items-start gap-2 w-full">
-            <EmojiIconPicker
+            <EmojiPicker
+              iconType="lucide"
               isOpen={isOpen}
               handleToggle={(val: boolean) => setIsOpen(val)}
               className="flex items-center justify-center flex-shrink0"
@@ -184,8 +181,7 @@ export const ProjectViewForm: React.FC<Props> = observer((props) => {
 
                 if (val?.type === "emoji")
                   logoValue = {
-                    value: convertHexEmojiToDecimal(val.value.unified),
-                    url: val.value.imageUrl,
+                    value: val.value,
                   };
                 else if (val?.type === "icon") logoValue = val.value;