Enforce that text is wrapped in <Text>, remaining cases (#3421)

* Toggle.Button -> Toggle.ButtonWithText

* Simplify Prompt.Cancel/Action

* Move lines down for better diff

* Remove ButtonWithText

* Simplify types

* Enforce Button/ButtonText nesting

* Add suggested wrapper in linter error

* Check <Trans> ancestry too

* Also check literals

* Rm ts-ignore

src/view/screens/Storybook/index.tsx

@@ -1,22 +1,21 @@
 import React from 'react'
 import {View} from 'react-native'
-import {CenteredView, ScrollView} from '#/view/com/util/Views'
 
-import {atoms as a, useTheme, ThemeProvider} from '#/alf'
 import {useSetThemePrefs} from '#/state/shell'
-import {Button} from '#/components/Button'
-
+import {CenteredView, ScrollView} from '#/view/com/util/Views'
+import {atoms as a, ThemeProvider, useTheme} from '#/alf'
+import {Button, ButtonText} from '#/components/Button'
+import {Breakpoints} from './Breakpoints'
+import {Buttons} from './Buttons'
+import {Dialogs} from './Dialogs'
+import {Forms} from './Forms'
+import {Icons} from './Icons'
+import {Links} from './Links'
+import {Menus} from './Menus'
+import {Shadows} from './Shadows'
+import {Spacing} from './Spacing'
 import {Theming} from './Theming'
 import {Typography} from './Typography'
-import {Spacing} from './Spacing'
-import {Buttons} from './Buttons'
-import {Links} from './Links'
-import {Forms} from './Forms'
-import {Dialogs} from './Dialogs'
-import {Breakpoints} from './Breakpoints'
-import {Shadows} from './Shadows'
-import {Icons} from './Icons'
-import {Menus} from './Menus'
 
 export function Storybook() {
   const t = useTheme()
@@ -33,7 +32,7 @@ export function Storybook() {
               size="small"
               label='Set theme to "system"'
               onPress={() => setColorMode('system')}>
-              System
+              <ButtonText>System</ButtonText>
             </Button>
             <Button
               variant="solid"
@@ -41,7 +40,7 @@ export function Storybook() {
               size="small"
               label='Set theme to "light"'
               onPress={() => setColorMode('light')}>
-              Light
+              <ButtonText>Light</ButtonText>
             </Button>
             <Button
               variant="solid"
@@ -52,7 +51,7 @@ export function Storybook() {
                 setColorMode('dark')
                 setDarkTheme('dim')
               }}>
-              Dim
+              <ButtonText>Dim</ButtonText>
             </Button>
             <Button
               variant="solid"
@@ -63,7 +62,7 @@ export function Storybook() {
                 setColorMode('dark')
                 setDarkTheme('dark')
               }}>
-              Dark
+              <ButtonText>Dark</ButtonText>
             </Button>
           </View>