Replace graphemer with unicode-segmenter (#9526)

* replace graphemer with unicode-segmenter

* use grapheme entrypoint

* force resolution of unicode-segmenter

src/screens/Messages/components/MessageInput.tsx

@@ -14,7 +14,7 @@ import Animated, {
 import {useSafeAreaInsets} from 'react-native-safe-area-context'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
-import Graphemer from 'graphemer'
+import {countGraphemes} from 'unicode-segmenter/grapheme'
 
 import {HITSLOP_10, MAX_DM_GRAPHEME_LENGTH} from '#/lib/constants'
 import {useHaptics} from '#/lib/haptics'
@@ -75,7 +75,7 @@ export function MessageInput({
     if (!hasEmbed && message.trim() === '') {
       return
     }
-    if (new Graphemer().countGraphemes(message) > MAX_DM_GRAPHEME_LENGTH) {
+    if (countGraphemes(message) > MAX_DM_GRAPHEME_LENGTH) {
       Toast.show(_(msg`Message is too long`), 'xmark')
       return
     }

src/screens/Messages/components/MessageInput.web.tsx

@@ -2,9 +2,9 @@ import React from 'react'
 import {Pressable, View} from 'react-native'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
-import Graphemer from 'graphemer'
 import {flushSync} from 'react-dom'
 import TextareaAutosize from 'react-textarea-autosize'
+import {countGraphemes} from 'unicode-segmenter/grapheme'
 
 import {isSafari, isTouchDevice} from '#/lib/browser'
 import {MAX_DM_GRAPHEME_LENGTH} from '#/lib/constants'
@@ -56,7 +56,7 @@ export function MessageInput({
     if (!hasEmbed && message.trim() === '') {
       return
     }
-    if (new Graphemer().countGraphemes(message) > MAX_DM_GRAPHEME_LENGTH) {
+    if (countGraphemes(message) > MAX_DM_GRAPHEME_LENGTH) {
       Toast.show(_(msg`Message is too long`), 'xmark')
       return
     }

src/screens/Profile/Header/EditProfileDialog.tsx

@@ -6,7 +6,7 @@ import {useLingui} from '@lingui/react'
 
 import {urls} from '#/lib/constants'
 import {cleanError} from '#/lib/strings/errors'
-import {useWarnMaxGraphemeCount} from '#/lib/strings/helpers'
+import {isOverMaxGraphemeCount} from '#/lib/strings/helpers'
 import {logger} from '#/logger'
 import {type ImageMeta} from '#/state/gallery'
 import {useProfileUpdateMutation} from '#/state/queries/profile'
@@ -203,11 +203,11 @@ function DialogInner({
     _,
   ])
 
-  const displayNameTooLong = useWarnMaxGraphemeCount({
+  const displayNameTooLong = isOverMaxGraphemeCount({
     text: displayName,
     maxCount: DISPLAY_NAME_MAX_GRAPHEMES,
   })
-  const descriptionTooLong = useWarnMaxGraphemeCount({
+  const descriptionTooLong = isOverMaxGraphemeCount({
     text: description,
     maxCount: DESCRIPTION_MAX_GRAPHEMES,
   })

src/screens/Takendown.tsx

@@ -1,4 +1,4 @@
-import {useMemo, useState} from 'react'
+import {useState} from 'react'
 import {View} from 'react-native'
 import {KeyboardAwareScrollView} from 'react-native-keyboard-controller'
 import {useSafeAreaInsets} from 'react-native-safe-area-context'
@@ -6,7 +6,7 @@ import {type ComAtprotoAdminDefs, ToolsOzoneReportDefs} from '@atproto/api'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 import {useMutation} from '@tanstack/react-query'
-import Graphemer from 'graphemer'
+import {countGraphemes} from 'unicode-segmenter/grapheme'
 
 import {
   BLUESKY_MOD_SERVICE_HEADERS,
@@ -37,11 +37,10 @@ export function Takendown() {
   const agent = useAgent()
   const [isAppealling, setIsAppealling] = useState(false)
   const [reason, setReason] = useState('')
-  const graphemer = useMemo(() => new Graphemer(), [])
 
-  const reasonGraphemeLength = useMemo(() => {
-    return graphemer.countGraphemes(reason)
-  }, [graphemer, reason])
+  const reasonGraphemeLength = countGraphemes(reason)
+  const isOverMaxLength =
+    reasonGraphemeLength > MAX_REPORT_REASON_GRAPHEME_LENGTH
 
   const {
     mutate: submitAppeal,
@@ -72,14 +71,11 @@ export function Takendown() {
   const primaryBtn =
     isAppealling && !isSuccess ? (
       <Button
-        variant="solid"
         color="primary"
         size="large"
         label={_(msg`Submit appeal`)}
         onPress={() => submitAppeal(reason)}
-        disabled={
-          isPending || reasonGraphemeLength > MAX_REPORT_REASON_GRAPHEME_LENGTH
-        }>
+        disabled={isPending || isOverMaxLength}>
         <ButtonText>
           <Trans>Submit Appeal</Trans>
         </ButtonText>
@@ -87,7 +83,6 @@ export function Takendown() {
       </Button>
     ) : (
       <Button
-        variant="solid"
         size="large"
         color="secondary_inverted"
         label={_(msg`Sign out`)}
@@ -204,7 +199,7 @@ export function Takendown() {
                   <Text
                     style={[
                       a.text_md,
-                      a.leading_normal,
+                      a.leading_snug,
                       {color: t.palette.negative_500},
                       a.mt_lg,
                     ]}>
@@ -213,13 +208,13 @@ export function Takendown() {
                 )}
               </View>
             ) : (
-              <P style={[t.atoms.text_contrast_medium]}>
+              <P style={[t.atoms.text_contrast_medium, a.leading_snug]}>
                 <Trans>
                   Your account was found to be in violation of the{' '}
                   <SimpleInlineLinkText
                     label={_(msg`Bluesky Social Terms of Service`)}
                     to="https://bsky.social/about/support/tos"
-                    style={[a.text_md, a.leading_normal]}>
+                    style={[a.text_md, a.leading_snug]}>
                     Bluesky Social Terms of Service
                   </SimpleInlineLinkText>
                   . You have been sent an email outlining the specific violation