build: add pnpm

apps/builder/components/shared/ImageUploadContent/ImageUploadContent.tsx

@@ -1,22 +1,12 @@
-import { ChangeEvent, useState } from 'react'
-import {
-  Button,
-  Flex,
-  HStack,
-  Stack,
-  Text,
-  Input as ClassicInput,
-  SimpleGrid,
-  GridItem,
-} from '@chakra-ui/react'
+import { useState } from 'react'
+import { Button, Flex, HStack, Stack, Text } from '@chakra-ui/react'
 import { SearchContextManager } from '@giphy/react-components'
 import { UploadButton } from '../buttons/UploadButton'
 import { GiphySearch } from './GiphySearch'
 import { useTypebot } from 'contexts/TypebotContext'
-import { BaseEmoji, emojiIndex } from 'emoji-mart'
-import { emojis } from './emojis'
 import { Input } from '../Textbox/Input'
 import { env, isEmpty } from 'utils'
+import { EmojiSearchableList } from './emoji/EmojiSearchableList'
 
 type Props = {
   url?: string
@@ -101,7 +91,7 @@ const BodyContent = ({
     case 'giphy':
       return <GiphyContent onNewUrl={onSubmit} />
     case 'emoji':
-      return <EmojiContent onEmojiSelected={onSubmit} />
+      return <EmojiSearchableList onEmojiSelected={onSubmit} />
   }
 }
 
@@ -133,55 +123,6 @@ const EmbedLinkContent = ({ initialUrl, onNewUrl }: ContentProps) => (
   </Stack>
 )
 
-const EmojiContent = ({
-  onEmojiSelected,
-}: {
-  onEmojiSelected: (emoji: string) => void
-}) => {
-  const [searchValue, setSearchValue] = useState('')
-  const [filteredEmojis, setFilteredEmojis] = useState<string[]>(emojis)
-
-  const handleEmojiClick = (emoji: string) => () => onEmojiSelected(emoji)
-
-  const handleSearchChange = (e: ChangeEvent<HTMLInputElement>) => {
-    setSearchValue(e.target.value)
-    setFilteredEmojis(
-      emojiIndex.search(e.target.value)?.map((o) => (o as BaseEmoji).native) ??
-        emojis
-    )
-  }
-
-  return (
-    <Stack>
-      <ClassicInput
-        placeholder="Search..."
-        value={searchValue}
-        onChange={handleSearchChange}
-      />
-      <SimpleGrid
-        maxH="350px"
-        overflowY="scroll"
-        overflowX="hidden"
-        spacing={0}
-        columns={7}
-      >
-        {filteredEmojis.map((emoji) => (
-          <GridItem key={emoji}>
-            <Button
-              onClick={handleEmojiClick(emoji)}
-              variant="ghost"
-              size="sm"
-              fontSize="xl"
-            >
-              {emoji}
-            </Button>
-          </GridItem>
-        ))}
-      </SimpleGrid>
-    </Stack>
-  )
-}
-
 const GiphyContent = ({ onNewUrl }: ContentProps) => {
   if (isEmpty(env('GIPHY_API_KEY')))
     return <Text>NEXT_PUBLIC_GIPHY_API_KEY is missing in environment</Text>

apps/builder/components/shared/ImageUploadContent/emoji/EmojiSearchableList.tsx

@@ -0,0 +1,199 @@
+import emojis from './emojiList.json'
+import emojiTagsData from 'emojilib'
+import {
+  Stack,
+  SimpleGrid,
+  GridItem,
+  Button,
+  Input as ClassicInput,
+  Text,
+} from '@chakra-ui/react'
+import { useState, ChangeEvent, useEffect, useRef } from 'react'
+
+const emojiTags = emojiTagsData as Record<string, string[]>
+
+const people = emojis['Smileys & Emotion'].concat(emojis['People & Body'])
+const nature = emojis['Animals & Nature']
+const food = emojis['Food & Drink']
+const activities = emojis['Activities']
+const travel = emojis['Travel & Places']
+const objects = emojis['Objects']
+const symbols = emojis['Symbols']
+const flags = emojis['Flags']
+
+export const EmojiSearchableList = ({
+  onEmojiSelected,
+}: {
+  onEmojiSelected: (emoji: string) => void
+}) => {
+  const scrollContainer = useRef<HTMLDivElement>(null)
+  const bottomElement = useRef<HTMLDivElement>(null)
+  const [isSearching, setIsSearching] = useState(false)
+  const [filteredPeople, setFilteredPeople] = useState(people)
+  const [filteredAnimals, setFilteredAnimals] = useState(nature)
+  const [filteredFood, setFilteredFood] = useState(food)
+  const [filteredTravel, setFilteredTravel] = useState(travel)
+  const [filteredActivities, setFilteredActivities] = useState(activities)
+  const [filteredObjects, setFilteredObjects] = useState(objects)
+  const [filteredSymbols, setFilteredSymbols] = useState(symbols)
+  const [filteredFlags, setFilteredFlags] = useState(flags)
+  const [totalDisplayedCategories, setTotalDisplayedCategories] = useState(1)
+
+  useEffect(() => {
+    if (!bottomElement.current) return
+    const observer = new IntersectionObserver(handleObserver, {
+      root: scrollContainer.current,
+    })
+    if (bottomElement.current) observer.observe(bottomElement.current)
+    return () => {
+      observer.disconnect()
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [bottomElement.current])
+
+  const handleObserver = (entities: IntersectionObserverEntry[]) => {
+    const target = entities[0]
+    if (target.isIntersecting) setTotalDisplayedCategories((c) => c + 1)
+  }
+
+  const handleSearchChange = async (e: ChangeEvent<HTMLInputElement>) => {
+    const searchValue = e.target.value
+    if (searchValue.length <= 2 && isSearching) return resetEmojiList()
+    setIsSearching(true)
+    setTotalDisplayedCategories(8)
+    const byTag = (emoji: string) =>
+      emojiTags[emoji].find((tag) => tag.includes(searchValue))
+    setFilteredPeople(people.filter(byTag))
+    setFilteredAnimals(nature.filter(byTag))
+    setFilteredFood(food.filter(byTag))
+    setFilteredTravel(travel.filter(byTag))
+    setFilteredActivities(activities.filter(byTag))
+    setFilteredObjects(objects.filter(byTag))
+    setFilteredSymbols(symbols.filter(byTag))
+    setFilteredFlags(flags.filter(byTag))
+  }
+
+  const resetEmojiList = () => {
+    setTotalDisplayedCategories(1)
+    setIsSearching(false)
+    setFilteredPeople(people)
+    setFilteredAnimals(nature)
+    setFilteredFood(food)
+    setFilteredTravel(travel)
+    setFilteredActivities(activities)
+    setFilteredObjects(objects)
+    setFilteredSymbols(symbols)
+    setFilteredFlags(flags)
+  }
+
+  return (
+    <Stack>
+      <ClassicInput placeholder="Search..." onChange={handleSearchChange} />
+      <Stack ref={scrollContainer} overflow="scroll" maxH="350px" spacing={4}>
+        {filteredPeople.length > 0 && (
+          <Stack>
+            <Text fontSize="sm" pl="2">
+              People
+            </Text>
+            <EmojiGrid emojis={filteredPeople} onEmojiClick={onEmojiSelected} />
+          </Stack>
+        )}
+        {filteredAnimals.length > 0 && totalDisplayedCategories >= 2 && (
+          <Stack>
+            <Text fontSize="sm" pl="2">
+              Animals & Nature
+            </Text>
+            <EmojiGrid
+              emojis={filteredAnimals}
+              onEmojiClick={onEmojiSelected}
+            />
+          </Stack>
+        )}
+        {filteredFood.length > 0 && totalDisplayedCategories >= 3 && (
+          <Stack>
+            <Text fontSize="sm" pl="2">
+              Food & Drink
+            </Text>
+            <EmojiGrid emojis={filteredFood} onEmojiClick={onEmojiSelected} />
+          </Stack>
+        )}
+        {filteredTravel.length > 0 && totalDisplayedCategories >= 4 && (
+          <Stack>
+            <Text fontSize="sm" pl="2">
+              Travel & Places
+            </Text>
+            <EmojiGrid emojis={filteredTravel} onEmojiClick={onEmojiSelected} />
+          </Stack>
+        )}
+        {filteredActivities.length > 0 && totalDisplayedCategories >= 5 && (
+          <Stack>
+            <Text fontSize="sm" pl="2">
+              Activities
+            </Text>
+            <EmojiGrid
+              emojis={filteredActivities}
+              onEmojiClick={onEmojiSelected}
+            />
+          </Stack>
+        )}
+        {filteredObjects.length > 0 && totalDisplayedCategories >= 6 && (
+          <Stack>
+            <Text fontSize="sm" pl="2">
+              Objects
+            </Text>
+            <EmojiGrid
+              emojis={filteredObjects}
+              onEmojiClick={onEmojiSelected}
+            />
+          </Stack>
+        )}
+        {filteredSymbols.length > 0 && totalDisplayedCategories >= 7 && (
+          <Stack>
+            <Text fontSize="sm" pl="2">
+              Symbols
+            </Text>
+            <EmojiGrid
+              emojis={filteredSymbols}
+              onEmojiClick={onEmojiSelected}
+            />
+          </Stack>
+        )}
+        {filteredFlags.length > 0 && totalDisplayedCategories >= 8 && (
+          <Stack>
+            <Text fontSize="sm" pl="2">
+              Flags
+            </Text>
+            <EmojiGrid emojis={filteredFlags} onEmojiClick={onEmojiSelected} />
+          </Stack>
+        )}
+        <div ref={bottomElement} />
+      </Stack>
+    </Stack>
+  )
+}
+
+const EmojiGrid = ({
+  emojis,
+  onEmojiClick,
+}: {
+  emojis: string[]
+  onEmojiClick: (emoji: string) => void
+}) => {
+  const handleClick = (emoji: string) => () => onEmojiClick(emoji)
+  return (
+    <SimpleGrid spacing={0} columns={7}>
+      {emojis.map((emoji) => (
+        <GridItem
+          as={Button}
+          onClick={handleClick(emoji)}
+          variant="ghost"
+          size="sm"
+          fontSize="xl"
+          key={emoji}
+        >
+          {emoji}
+        </GridItem>
+      ))}
+    </SimpleGrid>
+  )
+}