Enforce Text suffix for Text-rendering components (#3407)

* Rm unused

* Add Text suffix to Title/Description

* Add Text suffix to text components

* Add Text suffix to props

* Validate Text components returns

src/screens/Onboarding/Layout.tsx

@@ -1,29 +1,27 @@
 import React from 'react'
 import {View} from 'react-native'
 import {useSafeAreaInsets} from 'react-native-safe-area-context'
-import {useLingui} from '@lingui/react'
 import {msg} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
 
-import {IS_DEV} from '#/env'
 import {isWeb} from '#/platform/detection'
 import {useOnboardingDispatch} from '#/state/shell'
-
-import {
-  useTheme,
-  atoms as a,
-  useBreakpoints,
-  web,
-  native,
-  flatten,
-  TextStyleProp,
-} from '#/alf'
-import {P, leading, Text} from '#/components/Typography'
-import {ChevronLeft_Stroke2_Corner0_Rounded as ChevronLeft} from '#/components/icons/Chevron'
-import {Button, ButtonIcon} from '#/components/Button'
 import {ScrollView} from '#/view/com/util/Views'
-import {createPortalGroup} from '#/components/Portal'
-
 import {Context} from '#/screens/Onboarding/state'
+import {
+  atoms as a,
+  flatten,
+  native,
+  TextStyleProp,
+  useBreakpoints,
+  useTheme,
+  web,
+} from '#/alf'
+import {Button, ButtonIcon} from '#/components/Button'
+import {ChevronLeft_Stroke2_Corner0_Rounded as ChevronLeft} from '#/components/icons/Chevron'
+import {createPortalGroup} from '#/components/Portal'
+import {leading, P, Text} from '#/components/Typography'
+import {IS_DEV} from '#/env'
 
 const COL_WIDTH = 500
 
@@ -204,7 +202,7 @@ export function Layout({children}: React.PropsWithChildren<{}>) {
   )
 }
 
-export function Title({
+export function TitleText({
   children,
   style,
 }: React.PropsWithChildren<TextStyleProp>) {
@@ -224,7 +222,7 @@ export function Title({
   )
 }
 
-export function Description({
+export function DescriptionText({
   children,
   style,
 }: React.PropsWithChildren<TextStyleProp>) {

src/screens/Onboarding/StepAlgoFeeds/index.tsx

@@ -6,9 +6,9 @@ import {useLingui} from '@lingui/react'
 import {useAnalytics} from '#/lib/analytics/analytics'
 import {logEvent} from '#/lib/statsig/statsig'
 import {
-  Description,
+  DescriptionText,
   OnboardingControls,
-  Title,
+  TitleText,
 } from '#/screens/Onboarding/Layout'
 import {Context} from '#/screens/Onboarding/state'
 import {FeedCard} from '#/screens/Onboarding/StepAlgoFeeds/FeedCard'
@@ -105,15 +105,15 @@ export function StepAlgoFeeds() {
     <View style={[a.align_start]}>
       <IconCircle icon={ListSparkle} style={[a.mb_2xl]} />
 
-      <Title>
+      <TitleText>
         <Trans>Choose your main feeds</Trans>
-      </Title>
-      <Description>
+      </TitleText>
+      <DescriptionText>
         <Trans>
           Custom feeds built by the community bring you new experiences and help
           you find the content you love.
         </Trans>
-      </Description>
+      </DescriptionText>
 
       <View style={[a.w_full, a.pb_2xl]}>
         <Toggle.Group

src/screens/Onboarding/StepFinished.tsx

@@ -10,9 +10,9 @@ import {useSetSaveFeedsMutation} from '#/state/queries/preferences'
 import {getAgent} from '#/state/session'
 import {useOnboardingDispatch} from '#/state/shell'
 import {
-  Description,
+  DescriptionText,
   OnboardingControls,
-  Title,
+  TitleText,
 } from '#/screens/Onboarding/Layout'
 import {Context} from '#/screens/Onboarding/state'
 import {
@@ -87,12 +87,12 @@ export function StepFinished() {
     <View style={[a.align_start]}>
       <IconCircle icon={Check} style={[a.mb_2xl]} />
 
-      <Title>
+      <TitleText>
         <Trans>You're ready to go!</Trans>
-      </Title>
-      <Description>
+      </TitleText>
+      <DescriptionText>
         <Trans>We hope you have a wonderful time. Remember, Bluesky is:</Trans>
-      </Description>
+      </DescriptionText>
 
       <View style={[a.pt_5xl, a.gap_3xl]}>
         <View style={[a.flex_row, a.align_center, a.w_full, a.gap_lg]}>

src/screens/Onboarding/StepFollowingFeed.tsx

@@ -10,9 +10,9 @@ import {
   useSetFeedViewPreferencesMutation,
 } from 'state/queries/preferences'
 import {
-  Description,
+  DescriptionText,
   OnboardingControls,
-  Title,
+  TitleText,
 } from '#/screens/Onboarding/Layout'
 import {Context} from '#/screens/Onboarding/state'
 import {atoms as a} from '#/alf'
@@ -58,12 +58,12 @@ export function StepFollowingFeed() {
     <View style={[a.align_start]}>
       <IconCircle icon={FilterTimeline} style={[a.mb_2xl]} />
 
-      <Title>
+      <TitleText>
         <Trans>Your default feed is "Following"</Trans>
-      </Title>
-      <Description style={[a.mb_md]}>
+      </TitleText>
+      <DescriptionText style={[a.mb_md]}>
         <Trans>It shows posts from the people you follow as they happen.</Trans>
-      </Description>
+      </DescriptionText>
 
       <View style={[a.w_full]}>
         <Toggle.Item
@@ -139,9 +139,9 @@ export function StepFollowingFeed() {
         </Toggle.Item>
       </View>
 
-      <Description style={[a.mt_lg]}>
+      <DescriptionText style={[a.mt_lg]}>
         <Trans>You can change these settings later.</Trans>
-      </Description>
+      </DescriptionText>
 
       <OnboardingControls.Portal>
         <Button

src/screens/Onboarding/StepInterests/index.tsx

@@ -11,9 +11,9 @@ import {logger} from '#/logger'
 import {getAgent} from '#/state/session'
 import {useOnboardingDispatch} from '#/state/shell'
 import {
-  Description,
+  DescriptionText,
   OnboardingControls,
-  Title,
+  TitleText,
 } from '#/screens/Onboarding/Layout'
 import {ApiResponseMap, Context} from '#/screens/Onboarding/state'
 import {InterestButton} from '#/screens/Onboarding/StepInterests/InterestButton'
@@ -163,8 +163,8 @@ export function StepInterests() {
         ]}
       />
 
-      <Title>{title}</Title>
-      <Description>{description}</Description>
+      <TitleText>{title}</TitleText>
+      <DescriptionText>{description}</DescriptionText>
 
       <View style={[a.w_full, a.pt_2xl]}>
         {isLoading ? (

src/screens/Onboarding/StepModeration/AdultContentEnabledPref.tsx

@@ -113,15 +113,15 @@ export function AdultContentEnabledPref({
       )}
 
       <Prompt.Outer control={prompt}>
-        <Prompt.Title>
+        <Prompt.TitleText>
           <Trans>Adult Content</Trans>
-        </Prompt.Title>
-        <Prompt.Description>
+        </Prompt.TitleText>
+        <Prompt.DescriptionText>
           <Trans>
             Due to Apple policies, adult content can only be enabled on the web
             after completing sign up.
           </Trans>
-        </Prompt.Description>
+        </Prompt.DescriptionText>
         <Prompt.Actions>
           <Prompt.Action onPress={() => prompt.close()} cta={_(msg`OK`)} />
         </Prompt.Actions>

src/screens/Onboarding/StepModeration/index.tsx

@@ -9,9 +9,9 @@ import {logEvent} from '#/lib/statsig/statsig'
 import {usePreferencesQuery} from '#/state/queries/preferences'
 import {usePreferencesSetAdultContentMutation} from 'state/queries/preferences'
 import {
-  Description,
+  DescriptionText,
   OnboardingControls,
-  Title,
+  TitleText,
 } from '#/screens/Onboarding/Layout'
 import {Context} from '#/screens/Onboarding/state'
 import {AdultContentEnabledPref} from '#/screens/Onboarding/StepModeration/AdultContentEnabledPref'
@@ -56,14 +56,14 @@ export function StepModeration() {
     <View style={[a.align_start]}>
       <IconCircle icon={EyeSlash} style={[a.mb_2xl]} />
 
-      <Title>
+      <TitleText>
         <Trans>You're in control</Trans>
-      </Title>
-      <Description style={[a.mb_xl]}>
+      </TitleText>
+      <DescriptionText style={[a.mb_xl]}>
         <Trans>
           Select what you want to see (or not see), and we’ll handle the rest.
         </Trans>
-      </Description>
+      </DescriptionText>
 
       {!preferences ? (
         <View style={[a.pt_md]}>

src/screens/Onboarding/StepSuggestedAccounts/index.tsx

@@ -10,9 +10,9 @@ import {capitalize} from '#/lib/strings/capitalize'
 import {useModerationOpts} from '#/state/queries/preferences'
 import {useProfilesQuery} from '#/state/queries/profile'
 import {
-  Description,
+  DescriptionText,
   OnboardingControls,
-  Title,
+  TitleText,
 } from '#/screens/Onboarding/Layout'
 import {Context} from '#/screens/Onboarding/state'
 import {
@@ -136,16 +136,16 @@ export function StepSuggestedAccounts() {
     <View style={[a.align_start]}>
       <IconCircle icon={At} style={[a.mb_2xl]} />
 
-      <Title>
+      <TitleText>
         <Trans>Here are some accounts for you to follow</Trans>
-      </Title>
-      <Description>
+      </TitleText>
+      <DescriptionText>
         {state.interestsStepResults.selectedInterests.length ? (
           <Trans>Based on your interest in {interestsText}</Trans>
         ) : (
           <Trans>These are popular accounts you might like:</Trans>
         )}
-      </Description>
+      </DescriptionText>
 
       <View style={[a.w_full, a.pt_xl]}>
         {isLoading ? (

src/screens/Onboarding/StepTopicalFeeds.tsx

@@ -9,9 +9,9 @@ import {capitalize} from '#/lib/strings/capitalize'
 import {IS_TEST_USER} from 'lib/constants'
 import {useSession} from 'state/session'
 import {
-  Description,
+  DescriptionText,
   OnboardingControls,
-  Title,
+  TitleText,
 } from '#/screens/Onboarding/Layout'
 import {Context} from '#/screens/Onboarding/state'
 import {FeedCard} from '#/screens/Onboarding/StepAlgoFeeds/FeedCard'
@@ -76,10 +76,10 @@ export function StepTopicalFeeds() {
     <View style={[a.align_start]}>
       <IconCircle icon={ListMagnifyingGlass} style={[a.mb_2xl]} />
 
-      <Title>
+      <TitleText>
         <Trans>Feeds can be topical as well!</Trans>
-      </Title>
-      <Description>
+      </TitleText>
+      <DescriptionText>
         {state.interestsStepResults.selectedInterests.length ? (
           <Trans>
             Here are some topical feeds based on your interests: {interestsText}
@@ -91,7 +91,7 @@ export function StepTopicalFeeds() {
             many as you like.
           </Trans>
         )}
-      </Description>
+      </DescriptionText>
 
       <View style={[a.w_full, a.pb_2xl, a.pt_2xl]}>
         <Toggle.Group