Merge pull request #8 from nimbus-gui/hn.emoji-picker

Add emoji picker

package.json

@@ -28,6 +28,7 @@
     "@tamagui/vite-plugin": "1.36.4",
     "@types/react": "18",
     "@types/react-dom": "18",
+    "emoji-picker-react": "^4.4.11",
     "expo-modules-core": "^1.5.9",
     "react": "18",
     "react-color": "^2.19.3",

src/components/General/EmojiPickerDialog.stories.tsx

@@ -0,0 +1,19 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import EmojiPickerDialog from './EmojiPickerDialog'
+
+
+const meta = {
+  title: 'General/EmojiPickerDialog',
+  component: EmojiPickerDialog,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof EmojiPickerDialog>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const DefaultColors: Story = {
+  args: {emojiStyle: 'TWITTER'},
+}

src/components/General/EmojiPickerDialog.tsx

@@ -0,0 +1,66 @@
+import EmojiPicker, {
+  EmojiStyle,
+  Theme,
+  EmojiClickData,
+  SuggestionMode,
+  Categories,
+} from 'emoji-picker-react'
+import { useState } from 'react'
+import { Stack } from 'tamagui'
+
+type EmojiStyleType = 'FACEBOOK' | 'APPLE' | 'GOOGLE' | 'TWITTER' | 'NATIVE'
+
+function EmojiPickerDialog({ emojiStyle }: { emojiStyle: EmojiStyleType }) {
+  const [selectedEmoji, setSelectedEmoji] = useState<string>('')
+  console.log(selectedEmoji)
+  function onClick(emojiData: EmojiClickData) {
+    setSelectedEmoji(emojiData.unified)
+  }
+
+  return (
+    <Stack position="absolute" zIndex={1} left={120}>
+      {/* <XStack>
+        Your selected Emoji is:
+        {selectedEmoji ? (
+          <Emoji unified={selectedEmoji} emojiStyle={EmojiStyle.APPLE} size={22} />
+        ) : null}
+      </XStack> */}
+
+      <EmojiPicker
+        onEmojiClick={onClick}
+        autoFocusSearch={false}
+        theme={Theme.AUTO}
+        height={350}
+        width="100%"
+        emojiVersion="1"
+        lazyLoadEmojis={false}
+        previewConfig={{ showPreview: false }}
+        suggestedEmojisMode={SuggestionMode.RECENT}
+        skinTonesDisabled
+        searchPlaceHolder="Search emojis"
+        emojiStyle={EmojiStyle[emojiStyle]}
+        categories={[
+          {
+            name: 'People',
+            category: Categories.SMILEYS_PEOPLE,
+          },
+          { name: 'Animals and Nature', category: Categories.ANIMALS_NATURE },
+          {
+            name: 'Fun and Games',
+            category: Categories.ACTIVITIES,
+          },
+          {
+            name: 'Flags',
+            category: Categories.FLAGS,
+          },
+          {
+            name: 'Yum Yum',
+            category: Categories.FOOD_DRINK,
+          },
+          { name: 'Objects', category: Categories.OBJECTS },
+        ]}
+      />
+    </Stack>
+  )
+}
+export default EmojiPickerDialog

src/components/General/PinnedNottification.tsx

@@ -4,7 +4,7 @@ import { RootState } from '../../redux/store'
 
 function PinnedNotification() {
   const pinnedMessage = useSelector((state: RootState) => state.pinnedMessage.pinnedMessage)
-  console.log(pinnedMessage)
+
   return (
     <>
       {pinnedMessage && pinnedMessage.pinned && (

src/pages/CreateLocalNodePage/CreateLocalNodePage.tsx

@@ -7,9 +7,11 @@ import Header from '../../components/General/Header'
 import Titles from '../../components/General/Titles'
 import LabelInputField from '../../components/General/LabelInputField'
 import ColorPicker from '../../components/General/ColorPicker'
+import EmojiPickerDialog from '../../components/General/EmojiPickerDialog'
 
 const CreateLocalNodePage = () => {
   const [autoConnectChecked, setAutoConnectChecked] = useState(false)
+  const [isEmojiDialogOpen, setIsEmojiDialogOpen] = useState(false)
 
   return (
     <PageWrapperShadow rightImageSrc="./background-images/day-night-bg.png" rightImageLogo={true}>
@@ -31,7 +33,18 @@ const CreateLocalNodePage = () => {
                 </Text>
                 <XStack my={10}>
                   <Avatar type="account" size={80} name="Device Avatar" />
-                  <Avatar type="icon" size={32} icon={<ReactionIcon size={20} />} />
+                  <Avatar
+                    type="icon"
+                    size={32}
+                    icon={
+                      <ReactionIcon
+                        size={20}
+                        onClick={() => setIsEmojiDialogOpen(prev => !prev)}
+                        style={{ cursor: 'pointer' }}
+                      />
+                    }
+                  />
+                  {isEmojiDialogOpen && <EmojiPickerDialog emojiStyle="TWITTER" />}
                 </XStack>
               </YStack>
               <YStack>

yarn.lock

@@ -8588,6 +8588,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"clsx@npm:^1.2.1":
+  version: 1.2.1
+  resolution: "clsx@npm:1.2.1"
+  checksum: 30befca8019b2eb7dbad38cff6266cf543091dae2825c856a62a8ccf2c3ab9c2907c4d12b288b73101196767f66812365400a227581484a05f968b0307cfaf12
+  languageName: node
+  linkType: hard
+
 "co@npm:^4.6.0":
   version: 4.6.0
   resolution: "co@npm:4.6.0"
@@ -9537,6 +9544,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"emoji-picker-react@npm:^4.4.11":
+  version: 4.4.11
+  resolution: "emoji-picker-react@npm:4.4.11"
+  dependencies:
+    clsx: ^1.2.1
+  peerDependencies:
+    react: ">=16"
+  checksum: 69ec9468996a5b0a277fd7821156695af7d097f5f4d6da7c4286181bce5edc36e888f52be4b22f342a84bc9b99e7f71ee69e9079a69f0c58404aeccba8c85ab8
+  languageName: node
+  linkType: hard
+
 "emoji-regex@npm:^8.0.0":
   version: 8.0.0
   resolution: "emoji-regex@npm:8.0.0"
@@ -13842,6 +13860,7 @@ __metadata:
     "@typescript-eslint/eslint-plugin": ^6.0.0
     "@typescript-eslint/parser": ^6.0.0
     "@vitejs/plugin-react": ^4.0.3
+    emoji-picker-react: ^4.4.11
     eslint: ^8.45.0
     eslint-plugin-react-hooks: ^4.6.0
     eslint-plugin-react-refresh: ^0.4.3