Parse emojis from comments and labels

Also Unify emojis between all platforms

Closes #102

Closes #103

packages/components/src/components/cards/EmptyCards.tsx

@@ -1,11 +1,15 @@
 import React from 'react'
-import { Text, TextStyle, View, ViewStyle } from 'react-native'
+import { Image, Text, TextStyle, View, ViewStyle } from 'react-native'
 
 import { LoadState } from '@devhub/core'
 import { useCSSVariablesOrSpringAnimatedTheme } from '../../hooks/use-css-variables-or-spring--animated-theme'
 import { useReduxAction } from '../../hooks/use-redux-action'
 import * as actions from '../../redux/actions'
 import { contentPadding } from '../../styles/variables'
+import {
+  getEmojiImageURL,
+  GitHubEmoji,
+} from '../../utils/helpers/github/emojis'
 import { SpringAnimatedActivityIndicator } from '../animated/spring/SpringAnimatedActivityIndicator'
 import { SpringAnimatedText } from '../animated/spring/SpringAnimatedText'
 import { Button } from '../common/Button'
@@ -18,7 +22,7 @@ const clearMessages = [
   'You rock!',
 ]
 
-const emojis = ['👍', '👏', '💪', '🎉', '💯']
+const emojis: GitHubEmoji[] = ['+1', 'muscle', 'tada', '100']
 
 const getRandomClearMessage = () => {
   const randomIndex = Math.floor(Math.random() * clearMessages.length)
@@ -34,6 +38,7 @@ const getRandomEmoji = () => {
 // because a chaning message is a bit distractive
 const clearMessage = getRandomClearMessage()
 const emoji = getRandomEmoji()
+const emojiImageURL = getEmojiImageURL(emoji)
 
 export interface EmptyCardsProps {
   clearedAt: string | undefined
@@ -112,7 +117,17 @@ export const EmptyCards = React.memo((props: EmptyCardsProps) => {
     return (
       <View style={containerStyle}>
         <SpringAnimatedText style={springAnimatedTextStyle}>
-          {clearMessage} {emoji}
+          {clearMessage}
+          {!!emojiImageURL && (
+            <>
+              <Text children=" " />
+
+              <Image
+                source={{ uri: emojiImageURL }}
+                style={{ width: 16, height: 16 }}
+              />
+            </>
+          )}
         </SpringAnimatedText>
       </View>
     )

packages/components/src/components/cards/partials/rows/CommentRow.tsx

@@ -4,6 +4,7 @@ import { View } from 'react-native'
 import { stripMarkdown, trimNewLinesAndSpaces } from '@devhub/core'
 import { useCSSVariablesOrSpringAnimatedTheme } from '../../../../hooks/use-css-variables-or-spring--animated-theme'
 import { Platform } from '../../../../libs/platform'
+import { parseTextWithEmojisToReactComponents } from '../../../../utils/helpers/github/emojis'
 import { fixURL } from '../../../../utils/helpers/github/url'
 import { SpringAnimatedText } from '../../../animated/spring/SpringAnimatedText'
 import { Avatar } from '../../../common/Avatar'
@@ -81,7 +82,14 @@ export const CommentRow = React.memo((props: CommentRowProps) => {
               isRead && getCardStylesForTheme(springAnimatedTheme).mutedText,
             ]}
           >
-            {body}
+            {parseTextWithEmojisToReactComponents(body, {
+              imageProps: {
+                style: {
+                  width: 12,
+                  height: 12,
+                },
+              },
+            })}
           </SpringAnimatedText>
         </Link>
       </View>

packages/components/src/components/common/Label.tsx

@@ -8,6 +8,7 @@ import {
   mutedOpacity,
   radius as defaultRadius,
 } from '../../styles/variables'
+import { parseTextWithEmojisToReactComponents } from '../../utils/helpers/github/emojis'
 import { SpringAnimatedIcon } from '../animated/spring/SpringAnimatedIcon'
 import { SpringAnimatedText } from '../animated/spring/SpringAnimatedText'
 import { SpringAnimatedView } from '../animated/spring/SpringAnimatedView'
@@ -108,7 +109,16 @@ export function Label(props: LabelProps) {
             />{' '}
           </Text>
         )}
-        {children}
+        {typeof children === 'string'
+          ? parseTextWithEmojisToReactComponents(children, {
+              imageProps: {
+                style: {
+                  width: small ? 10 : 11,
+                  height: small ? 10 : 11,
+                },
+              },
+            })
+          : children}
       </SpringAnimatedText>
     </SpringAnimatedView>
   )