[WEB-4734] feat: replace emoji picker with frimousse

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;
 

packages/propel/package.json

@@ -26,6 +26,7 @@
     "./tooltip": "./src/tooltip/index.ts",
     "./styles/fonts": "./src/styles/fonts/index.css",
     "./switch": "./src/switch/index.ts",
+    "./emoji-icon-picker": "./src/emoji-icon-picker/index.ts",
     "./utils": "./src/utils/index.ts",
     "./accordion": "./src/accordion/index.ts",
     "./card": "./src/card/index.ts"
@@ -39,11 +40,13 @@
     "class-variance-authority": "^0.7.1",
     "cmdk": "^1.1.1",
     "clsx": "^2.1.1",
+    "frimousse": "^0.3.0",
     "lucide-react": "^0.469.0",
     "react": "catalog:",
     "react-dom": "catalog:",
     "recharts": "^2.15.1",
-    "tailwind-merge": "^3.3.1"
+    "tailwind-merge": "^3.3.1",
+    "use-font-face-observer": "^1.3.0"
   },
   "devDependencies": {
     "@plane/eslint-config": "workspace:*",

packages/propel/src/emoji-icon-picker/emoji-picker.stories.tsx

@@ -0,0 +1,47 @@
+import { useState } from "react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { EmojiPicker } from "./emoji-picker";
+import { EmojiIconPickerTypes } from "./helper";
+
+const meta: Meta<typeof EmojiPicker> = {
+  title: "EmojiPicker",
+  component: EmojiPicker,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+};
+
+export default meta;
+type Story = StoryObj<typeof EmojiPicker>;
+
+const EmojiPickerWithState = (args: React.ComponentProps<typeof EmojiPicker>) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [selectedValue, setSelectedValue] = useState<any>(null);
+
+  return (
+    <div className="space-y-4">
+      <EmojiPicker
+        {...args}
+        isOpen={isOpen}
+        handleToggle={setIsOpen}
+        onChange={(value) => {
+          setSelectedValue(value);
+          console.log("Selected:", value);
+        }}
+      />
+      {selectedValue && <div className="text-sm text-gray-600">Selected: {JSON.stringify(selectedValue, null, 2)}</div>}
+    </div>
+  );
+};
+
+export const Default: Story = {
+  render: (args: React.ComponentProps<typeof EmojiPicker>) => <EmojiPickerWithState {...args} />,
+  args: {
+    label: "😊 Pick an emoji or icon",
+    defaultOpen: EmojiIconPickerTypes.EMOJI,
+    closeOnSelect: true,
+    searchPlaceholder: "Search emojis...",
+    iconType: "lucide",
+  },
+};