+5 -10

.eslintrc.js

··· 23 'bsky-internal/avoid-unwrapped-text': [ 24 'error', 25 { 26 - impliedTextComponents: [ 27 - 'Button', // TODO: Not always safe. 28 - 'H1', 29 - 'H2', 30 - 'H3', 31 - 'H4', 32 - 'H5', 33 - 'H6', 34 - 'P', 35 - ], 36 impliedTextProps: [], 0 0 0 0 37 }, 38 ], 39 'simple-import-sort/imports': [

··· 23 'bsky-internal/avoid-unwrapped-text': [ 24 'error', 25 { 26 + impliedTextComponents: ['H1', 'H2', 'H3', 'H4', 'H5', 'H6', 'P'], 0 0 0 0 0 0 0 0 0 27 impliedTextProps: [], 28 + suggestedTextWrappers: { 29 + Button: 'ButtonText', 30 + 'ToggleButton.Button': 'ToggleButton.ButtonText', 31 + }, 32 }, 33 ], 34 'simple-import-sort/imports': [

+338 -1

eslint/__tests__/avoid-unwrapped-text.test.js

··· 199 200 { 201 code: ` 202 - <View prop={ 203 <Trans><Text>foo</Text></Trans> 204 }> 205 <Bar /> ··· 281 } 282 `, 283 }, 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 284 ], 285 286 invalid: [ ··· 452 } 453 return <Text>foo</Text> 454 } 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 455 `, 456 errors: 1, 457 },

··· 199 200 { 201 code: ` 202 + <View propText={ 203 <Trans><Text>foo</Text></Trans> 204 }> 205 <Bar /> ··· 281 } 282 `, 283 }, 284 + 285 + { 286 + code: ` 287 + <View> 288 + <Text>{'foo'}</Text> 289 + </View> 290 + `, 291 + }, 292 + 293 + { 294 + code: ` 295 + <View> 296 + <Text>{foo + 'foo'}</Text> 297 + </View> 298 + `, 299 + }, 300 + 301 + { 302 + code: ` 303 + <View> 304 + <Text><Trans>{'foo'}</Trans></Text> 305 + </View> 306 + `, 307 + }, 308 + 309 + { 310 + code: ` 311 + <View> 312 + {foo['bar'] && <Bar />} 313 + </View> 314 + `, 315 + }, 316 + 317 + { 318 + code: ` 319 + <View> 320 + {(foo === 'bar') && <Bar />} 321 + </View> 322 + `, 323 + }, 324 + 325 + { 326 + code: ` 327 + <View> 328 + {(foo !== 'bar') && <Bar />} 329 + </View> 330 + `, 331 + }, 332 + 333 + { 334 + code: ` 335 + <View> 336 + <Text>{\`foo\`}</Text> 337 + </View> 338 + `, 339 + }, 340 + 341 + { 342 + code: ` 343 + <View> 344 + <Text><Trans>{\`foo\`}</Trans></Text> 345 + </View> 346 + `, 347 + }, 348 + 349 + { 350 + code: ` 351 + <View> 352 + <Text>{_(msg\`foo\`)}</Text> 353 + </View> 354 + `, 355 + }, 356 + 357 + { 358 + code: ` 359 + <View> 360 + <Text><Trans>{_(msg\`foo\`)}</Trans></Text> 361 + </View> 362 + `, 363 + }, 364 + 365 + { 366 + code: ` 367 + <Foo> 368 + <View prop={stuff('foo')}> 369 + <Bar /> 370 + </View> 371 + </Foo> 372 + `, 373 + }, 374 + 375 + { 376 + code: ` 377 + <Foo> 378 + <View onClick={() => stuff('foo')}> 379 + <Bar /> 380 + </View> 381 + </Foo> 382 + `, 383 + }, 384 + 385 + { 386 + code: ` 387 + <View> 388 + {renderItem('foo')} 389 + </View> 390 + `, 391 + }, 392 + 393 + { 394 + code: ` 395 + <View> 396 + {foo === 'foo' && <Bar />} 397 + </View> 398 + `, 399 + }, 400 + 401 + { 402 + code: ` 403 + <View> 404 + {foo['foo'] && <Bar />} 405 + </View> 406 + `, 407 + }, 408 + 409 + { 410 + code: ` 411 + <View> 412 + {check('foo') && <Bar />} 413 + </View> 414 + `, 415 + }, 416 + 417 + { 418 + code: ` 419 + <View> 420 + {foo.bar && <Bar />} 421 + </View> 422 + `, 423 + }, 424 + 425 + { 426 + code: ` 427 + <Text> 428 + <Trans>{renderItem('foo')}</Trans> 429 + </Text> 430 + `, 431 + }, 432 + 433 + { 434 + code: ` 435 + <View> 436 + {null} 437 + </View> 438 + `, 439 + }, 440 + 441 + { 442 + code: ` 443 + <Text> 444 + <Trans>{null}</Trans> 445 + </Text> 446 + `, 447 + }, 448 ], 449 450 invalid: [ ··· 616 } 617 return <Text>foo</Text> 618 } 619 + `, 620 + errors: 1, 621 + }, 622 + 623 + { 624 + code: ` 625 + <View> 626 + {'foo'} 627 + </View> 628 + `, 629 + errors: 1, 630 + }, 631 + 632 + { 633 + code: ` 634 + <View> 635 + {foo && 'foo'} 636 + </View> 637 + `, 638 + errors: 1, 639 + }, 640 + 641 + { 642 + code: ` 643 + <View> 644 + <Trans>{'foo'}</Trans> 645 + </View> 646 + `, 647 + errors: 1, 648 + }, 649 + 650 + { 651 + code: ` 652 + <View> 653 + {foo && <Trans>{'foo'}</Trans>} 654 + </View> 655 + `, 656 + errors: 1, 657 + }, 658 + 659 + { 660 + code: ` 661 + <View> 662 + {10} 663 + </View> 664 + `, 665 + errors: 1, 666 + }, 667 + 668 + { 669 + code: ` 670 + <View> 671 + <Trans>{10}</Trans> 672 + </View> 673 + `, 674 + errors: 1, 675 + }, 676 + 677 + { 678 + code: ` 679 + <View> 680 + <Trans>{foo + 10}</Trans> 681 + </View> 682 + `, 683 + errors: 1, 684 + }, 685 + 686 + { 687 + code: ` 688 + <View> 689 + {\`foo\`} 690 + </View> 691 + `, 692 + errors: 1, 693 + }, 694 + 695 + { 696 + code: ` 697 + <View> 698 + <Trans>{\`foo\`}</Trans> 699 + </View> 700 + `, 701 + errors: 1, 702 + }, 703 + 704 + { 705 + code: ` 706 + <View> 707 + <Trans>{foo + \`foo\`}</Trans> 708 + </View> 709 + `, 710 + errors: 1, 711 + }, 712 + 713 + { 714 + code: ` 715 + <View> 716 + {_(msg\`foo\`)} 717 + </View> 718 + `, 719 + errors: 1, 720 + }, 721 + 722 + { 723 + code: ` 724 + <View> 725 + {foo + _(msg\`foo\`)} 726 + </View> 727 + `, 728 + errors: 1, 729 + }, 730 + 731 + { 732 + code: ` 733 + <View> 734 + <Trans>{_(msg\`foo\`)}</Trans> 735 + </View> 736 + `, 737 + errors: 1, 738 + }, 739 + 740 + { 741 + code: ` 742 + <View> 743 + <Trans>{foo + _(msg\`foo\`)}</Trans> 744 + </View> 745 + `, 746 + errors: 1, 747 + }, 748 + 749 + { 750 + code: ` 751 + <View> 752 + <Trans>foo</Trans> 753 + </View> 754 + `, 755 + errors: 1, 756 + }, 757 + 758 + { 759 + code: ` 760 + <View> 761 + <Trans><Trans>foo</Trans></Trans> 762 + </View> 763 + `, 764 + errors: 1, 765 + }, 766 + 767 + { 768 + code: ` 769 + <View> 770 + <Trans>{foo}</Trans> 771 + </View> 772 + `, 773 + errors: 1, 774 + }, 775 + 776 + { 777 + code: ` 778 + <View> 779 + <Trans>{'foo'}</Trans> 780 + </View> 781 + `, 782 + errors: 1, 783 + }, 784 + 785 + { 786 + code: ` 787 + <View prop={ 788 + <Trans><Text>foo</Text></Trans> 789 + }> 790 + <Bar /> 791 + </View> 792 `, 793 errors: 1, 794 },

+189 -5

eslint/avoid-unwrapped-text.js

··· 33 const options = context.options[0] || {} 34 const impliedTextProps = options.impliedTextProps ?? [] 35 const impliedTextComponents = options.impliedTextComponents ?? [] 0 36 const textProps = [...impliedTextProps] 37 const textComponents = ['Text', ...impliedTextComponents] 38 ··· 54 return 55 } 56 if (tagName === 'Trans') { 57 - // Skip over it and check above. 58 // TODO: Maybe validate that it's present. 59 - parent = parent.parent 60 - continue 61 } 62 - let message = 'Wrap this string in <Text>.' 63 - if (tagName !== 'View') { 0 64 message += 65 ' If <' + 66 tagName + ··· 94 } 95 const message = 96 'Wrap this string in <Text>.' + 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 97 ' If `' + 98 propName + 99 '` is guaranteed to be wrapped in <Text>, ' +

··· 33 const options = context.options[0] || {} 34 const impliedTextProps = options.impliedTextProps ?? [] 35 const impliedTextComponents = options.impliedTextComponents ?? [] 36 + const suggestedTextWrappers = options.suggestedTextWrappers ?? {} 37 const textProps = [...impliedTextProps] 38 const textComponents = ['Text', ...impliedTextComponents] 39 ··· 55 return 56 } 57 if (tagName === 'Trans') { 58 + // Exit and rely on the traversal for <Trans> JSXElement (code below). 59 // TODO: Maybe validate that it's present. 60 + return 0 61 } 62 + const suggestedWrapper = suggestedTextWrappers[tagName] 63 + let message = `Wrap this string in <${suggestedWrapper ?? 'Text'}>.` 64 + if (tagName !== 'View' && !suggestedWrapper) { 65 message += 66 ' If <' + 67 tagName + ··· 95 } 96 const message = 97 'Wrap this string in <Text>.' + 98 + ' If `' + 99 + propName + 100 + '` is guaranteed to be wrapped in <Text>, ' + 101 + 'rename it to `' + 102 + propName + 103 + 'Text' + 104 + '` or add it to impliedTextProps.' 105 + context.report({ 106 + node, 107 + message, 108 + }) 109 + return 110 + } 111 + 112 + parent = parent.parent 113 + continue 114 + } 115 + }, 116 + Literal(node) { 117 + if (typeof node.value !== 'string' && typeof node.value !== 'number') { 118 + return 119 + } 120 + let parent = node.parent 121 + while (parent) { 122 + if (parent.type === 'JSXElement') { 123 + const tagName = getTagName(parent) 124 + if (isTextComponent(tagName)) { 125 + // We're good. 126 + return 127 + } 128 + if (tagName === 'Trans') { 129 + // Exit and rely on the traversal for <Trans> JSXElement (code below). 130 + // TODO: Maybe validate that it's present. 131 + return 132 + } 133 + const suggestedWrapper = suggestedTextWrappers[tagName] 134 + let message = `Wrap this string in <${suggestedWrapper ?? 'Text'}>.` 135 + if (tagName !== 'View' && !suggestedWrapper) { 136 + message += 137 + ' If <' + 138 + tagName + 139 + '> is guaranteed to render <Text>, ' + 140 + 'rename it to <' + 141 + tagName + 142 + 'Text> or add it to impliedTextComponents.' 143 + } 144 + context.report({ 145 + node, 146 + message, 147 + }) 148 + return 149 + } 150 + 151 + if (parent.type === 'BinaryExpression' && parent.operator === '+') { 152 + parent = parent.parent 153 + continue 154 + } 155 + 156 + if ( 157 + parent.type === 'JSXExpressionContainer' || 158 + parent.type === 'LogicalExpression' 159 + ) { 160 + parent = parent.parent 161 + continue 162 + } 163 + 164 + // Be conservative for other types. 165 + return 166 + } 167 + }, 168 + TemplateLiteral(node) { 169 + let parent = node.parent 170 + while (parent) { 171 + if (parent.type === 'JSXElement') { 172 + const tagName = getTagName(parent) 173 + if (isTextComponent(tagName)) { 174 + // We're good. 175 + return 176 + } 177 + if (tagName === 'Trans') { 178 + // Exit and rely on the traversal for <Trans> JSXElement (code below). 179 + // TODO: Maybe validate that it's present. 180 + return 181 + } 182 + const suggestedWrapper = suggestedTextWrappers[tagName] 183 + let message = `Wrap this string in <${suggestedWrapper ?? 'Text'}>.` 184 + if (tagName !== 'View' && !suggestedWrapper) { 185 + message += 186 + ' If <' + 187 + tagName + 188 + '> is guaranteed to render <Text>, ' + 189 + 'rename it to <' + 190 + tagName + 191 + 'Text> or add it to impliedTextComponents.' 192 + } 193 + context.report({ 194 + node, 195 + message, 196 + }) 197 + return 198 + } 199 + 200 + if ( 201 + parent.type === 'CallExpression' && 202 + parent.callee.type === 'Identifier' && 203 + parent.callee.name === '_' 204 + ) { 205 + // This is a user-facing string, keep going up. 206 + parent = parent.parent 207 + continue 208 + } 209 + 210 + if (parent.type === 'BinaryExpression' && parent.operator === '+') { 211 + parent = parent.parent 212 + continue 213 + } 214 + 215 + if ( 216 + parent.type === 'JSXExpressionContainer' || 217 + parent.type === 'LogicalExpression' || 218 + parent.type === 'TaggedTemplateExpression' 219 + ) { 220 + parent = parent.parent 221 + continue 222 + } 223 + 224 + // Be conservative for other types. 225 + return 226 + } 227 + }, 228 + JSXElement(node) { 229 + if (getTagName(node) !== 'Trans') { 230 + return 231 + } 232 + let parent = node.parent 233 + while (parent) { 234 + if (parent.type === 'JSXElement') { 235 + const tagName = getTagName(parent) 236 + if (isTextComponent(tagName)) { 237 + // We're good. 238 + return 239 + } 240 + if (tagName === 'Trans') { 241 + // Exit and rely on the traversal for this JSXElement. 242 + // TODO: Should nested <Trans> even be allowed? 243 + return 244 + } 245 + const suggestedWrapper = suggestedTextWrappers[tagName] 246 + let message = `Wrap this <Trans> in <${suggestedWrapper ?? 'Text'}>.` 247 + if (tagName !== 'View' && !suggestedWrapper) { 248 + message += 249 + ' If <' + 250 + tagName + 251 + '> is guaranteed to render <Text>, ' + 252 + 'rename it to <' + 253 + tagName + 254 + 'Text> or add it to impliedTextComponents.' 255 + } 256 + context.report({ 257 + node, 258 + message, 259 + }) 260 + return 261 + } 262 + 263 + if ( 264 + parent.type === 'JSXAttribute' && 265 + parent.name.type === 'JSXIdentifier' && 266 + parent.parent.type === 'JSXOpeningElement' && 267 + parent.parent.parent.type === 'JSXElement' 268 + ) { 269 + const tagName = getTagName(parent.parent.parent) 270 + const propName = parent.name.name 271 + if ( 272 + textProps.includes(tagName + ' ' + propName) || 273 + propName === 'text' || 274 + propName.endsWith('Text') 275 + ) { 276 + // We're good. 277 + return 278 + } 279 + const message = 280 + 'Wrap this <Trans> in <Text>.' + 281 ' If `' + 282 propName + 283 '` is guaranteed to be wrapped in <Text>, ' +

+7 -14

src/components/Button.tsx

··· 12 ViewStyle, 13 } from 'react-native' 14 import {LinearGradient} from 'expo-linear-gradient' 15 - import {Trans} from '@lingui/macro' 16 17 import {android, atoms as a, flatten, tokens, useTheme} from '#/alf' 18 import {Props as SVGIconProps} from '#/components/icons/common' ··· 59 60 export type ButtonContext = VariantProps & ButtonState 61 0 0 0 0 62 export type ButtonProps = Pick< 63 PressableProps, 64 'disabled' | 'onPress' | 'testID' ··· 68 testID?: string 69 label: string 70 style?: StyleProp<ViewStyle> 71 - children: 72 - | React.ReactNode 73 - | string 74 - | ((context: ButtonContext) => React.ReactNode | string) 75 } 0 76 export type ButtonTextProps = TextProps & VariantProps & {disabled?: boolean} 77 78 const Context = React.createContext<VariantProps & ButtonState>({ ··· 404 </View> 405 )} 406 <Context.Provider value={context}> 407 - {/* @ts-ignore */} 408 - {typeof children === 'string' || children?.type === Trans ? ( 409 - /* @ts-ignore */ 410 - <ButtonText>{children}</ButtonText> 411 - ) : typeof children === 'function' ? ( 412 - children(context) 413 - ) : ( 414 - children 415 - )} 416 </Context.Provider> 417 </Pressable> 418 )

··· 12 ViewStyle, 13 } from 'react-native' 14 import {LinearGradient} from 'expo-linear-gradient' 0 15 16 import {android, atoms as a, flatten, tokens, useTheme} from '#/alf' 17 import {Props as SVGIconProps} from '#/components/icons/common' ··· 58 59 export type ButtonContext = VariantProps & ButtonState 60 61 + type NonTextElements = 62 + | React.ReactElement 63 + | Iterable<React.ReactElement | null | undefined | boolean> 64 + 65 export type ButtonProps = Pick< 66 PressableProps, 67 'disabled' | 'onPress' | 'testID' ··· 71 testID?: string 72 label: string 73 style?: StyleProp<ViewStyle> 74 + children: NonTextElements | ((context: ButtonContext) => NonTextElements) 0 0 0 75 } 76 + 77 export type ButtonTextProps = TextProps & VariantProps & {disabled?: boolean} 78 79 const Context = React.createContext<VariantProps & ButtonState>({ ··· 405 </View> 406 )} 407 <Context.Provider value={context}> 408 + {typeof children === 'function' ? children(context) : children} 0 0 0 0 0 0 0 0 409 </Context.Provider> 410 </Pressable> 411 )

+4 -2

src/components/Lists.tsx

··· 6 import {cleanError} from 'lib/strings/errors' 7 import {CenteredView} from 'view/com/util/Views' 8 import {atoms as a, useBreakpoints, useTheme} from '#/alf' 9 - import {Button} from '#/components/Button' 10 import {Error} from '#/components/Error' 11 import {Loader} from '#/components/Loader' 12 import {Text} from '#/components/Typography' ··· 87 a.py_sm, 88 ]} 89 onPress={onRetry}> 90 - <Trans>Retry</Trans> 0 0 91 </Button> 92 </View> 93 </View>

··· 6 import {cleanError} from 'lib/strings/errors' 7 import {CenteredView} from 'view/com/util/Views' 8 import {atoms as a, useBreakpoints, useTheme} from '#/alf' 9 + import {Button, ButtonText} from '#/components/Button' 10 import {Error} from '#/components/Error' 11 import {Loader} from '#/components/Loader' 12 import {Text} from '#/components/Typography' ··· 87 a.py_sm, 88 ]} 89 onPress={onRetry}> 90 + <ButtonText> 91 + <Trans>Retry</Trans> 92 + </ButtonText> 93 </Button> 94 </View> 95 </View>

+2 -2

src/components/moderation/LabelsOnMeDialog.tsx

··· 244 size="medium" 245 onPress={onPressBack} 246 label={_(msg`Back`)}> 247 - {_(msg`Back`)} 248 </Button> 249 <Button 250 testID="submitBtn" ··· 253 size="medium" 254 onPress={onSubmit} 255 label={_(msg`Submit`)}> 256 - {_(msg`Submit`)} 257 </Button> 258 </View> 259 </>

··· 244 size="medium" 245 onPress={onPressBack} 246 label={_(msg`Back`)}> 247 + <ButtonText>{_(msg`Back`)}</ButtonText> 248 </Button> 249 <Button 250 testID="submitBtn" ··· 253 size="medium" 254 onPress={onSubmit} 255 label={_(msg`Submit`)}> 256 + <ButtonText>{_(msg`Submit`)}</ButtonText> 257 </Button> 258 </View> 259 </>

+2 -2

src/screens/Login/ChooseAccountForm.tsx

··· 10 import * as Toast from '#/view/com/util/Toast' 11 import {atoms as a} from '#/alf' 12 import {AccountList} from '#/components/AccountList' 13 - import {Button} from '#/components/Button' 14 import * as TextField from '#/components/forms/TextField' 15 import {FormContainer} from './FormContainer' 16 ··· 75 color="secondary" 76 size="medium" 77 onPress={onPressBack}> 78 - {_(msg`Back`)} 79 </Button> 80 <View style={[a.flex_1]} /> 81 </View>

··· 10 import * as Toast from '#/view/com/util/Toast' 11 import {atoms as a} from '#/alf' 12 import {AccountList} from '#/components/AccountList' 13 + import {Button, ButtonText} from '#/components/Button' 14 import * as TextField from '#/components/forms/TextField' 15 import {FormContainer} from './FormContainer' 16 ··· 75 color="secondary" 76 size="medium" 77 onPress={onPressBack}> 78 + <ButtonText>{_(msg`Back`)}</ButtonText> 79 </Button> 80 <View style={[a.flex_1]} /> 81 </View>

+3 -1

src/screens/Login/LoginForm.tsx

··· 237 color="secondary" 238 size="medium" 239 onPress={onPressRetryConnect}> 240 - {_(msg`Retry`)} 0 0 241 </Button> 242 ) : !serviceDescription ? ( 243 <>

··· 237 color="secondary" 238 size="medium" 239 onPress={onPressRetryConnect}> 240 + <ButtonText> 241 + <Trans>Retry</Trans> 242 + </ButtonText> 243 </Button> 244 ) : !serviceDescription ? ( 245 <>

+2 -2

src/screens/Onboarding/Layout.tsx

··· 17 useTheme, 18 web, 19 } from '#/alf' 20 - import {Button, ButtonIcon} from '#/components/Button' 21 import {ChevronLeft_Stroke2_Corner0_Rounded as ChevronLeft} from '#/components/icons/Chevron' 22 import {createPortalGroup} from '#/components/Portal' 23 import {leading, P, Text} from '#/components/Typography' ··· 73 onPress={() => onboardDispatch({type: 'skip'})} 74 // DEV ONLY 75 label="Clear onboarding state"> 76 - Clear 77 </Button> 78 </View> 79 )}

··· 17 useTheme, 18 web, 19 } from '#/alf' 20 + import {Button, ButtonIcon, ButtonText} from '#/components/Button' 21 import {ChevronLeft_Stroke2_Corner0_Rounded as ChevronLeft} from '#/components/icons/Chevron' 22 import {createPortalGroup} from '#/components/Portal' 23 import {leading, P, Text} from '#/components/Typography' ··· 73 onPress={() => onboardDispatch({type: 'skip'})} 74 // DEV ONLY 75 label="Clear onboarding state"> 76 + <ButtonText>Clear</ButtonText> 77 </Button> 78 </View> 79 )}

+1 -1

src/view/com/auth/server-input/index.tsx

··· 167 size="small" 168 onPress={() => control.close()} 169 label={_(msg`Done`)}> 170 - {_(msg`Done`)} 171 </Button> 172 </View> 173 </View>

··· 167 size="small" 168 onPress={() => control.close()} 169 label={_(msg`Done`)}> 170 + <ButtonText>{_(msg`Done`)}</ButtonText> 171 </Button> 172 </View> 173 </View>

+3 -1

src/view/screens/Settings/ExportCarDialog.tsx

··· 92 size={gtMobile ? 'small' : 'large'} 93 onPress={() => control.close()} 94 label={_(msg`Done`)}> 95 - {_(msg`Done`)} 0 0 96 </Button> 97 </View> 98

··· 92 size={gtMobile ? 'small' : 'large'} 93 onPress={() => control.close()} 94 label={_(msg`Done`)}> 95 + <ButtonText> 96 + <Trans>Done</Trans> 97 + </ButtonText> 98 </Button> 99 </View> 100

+8 -8

src/view/screens/Storybook/Buttons.tsx

··· 4 import {atoms as a} from '#/alf' 5 import { 6 Button, 7 - ButtonVariant, 8 ButtonColor, 9 ButtonIcon, 10 ButtonText, 0 11 } from '#/components/Button' 12 - import {H1} from '#/components/Typography' 13 import {ArrowTopRight_Stroke2_Corner0_Rounded as ArrowTopRight} from '#/components/icons/ArrowTopRight' 14 import {ChevronLeft_Stroke2_Corner0_Rounded as ChevronLeft} from '#/components/icons/Chevron' 15 import {Globe_Stroke2_Corner0_Rounded as Globe} from '#/components/icons/Globe' 0 16 17 export function Buttons() { 18 return ( ··· 29 color={color as ButtonColor} 30 size="large" 31 label="Click here"> 32 - Button 33 </Button> 34 <Button 35 disabled ··· 37 color={color as ButtonColor} 38 size="large" 39 label="Click here"> 40 - Button 41 </Button> 42 </React.Fragment> 43 ))} ··· 54 color={name as ButtonColor} 55 size="large" 56 label="Click here"> 57 - Button 58 </Button> 59 <Button 60 disabled ··· 62 color={name as ButtonColor} 63 size="large" 64 label="Click here"> 65 - Button 66 </Button> 67 </React.Fragment> 68 ), ··· 77 color={name as ButtonColor} 78 size="large" 79 label="Click here"> 80 - Button 81 </Button> 82 <Button 83 disabled ··· 85 color={name as ButtonColor} 86 size="large" 87 label="Click here"> 88 - Button 89 </Button> 90 </React.Fragment> 91 ),

··· 4 import {atoms as a} from '#/alf' 5 import { 6 Button, 0 7 ButtonColor, 8 ButtonIcon, 9 ButtonText, 10 + ButtonVariant, 11 } from '#/components/Button' 0 12 import {ArrowTopRight_Stroke2_Corner0_Rounded as ArrowTopRight} from '#/components/icons/ArrowTopRight' 13 import {ChevronLeft_Stroke2_Corner0_Rounded as ChevronLeft} from '#/components/icons/Chevron' 14 import {Globe_Stroke2_Corner0_Rounded as Globe} from '#/components/icons/Globe' 15 + import {H1} from '#/components/Typography' 16 17 export function Buttons() { 18 return ( ··· 29 color={color as ButtonColor} 30 size="large" 31 label="Click here"> 32 + <ButtonText>Button</ButtonText> 33 </Button> 34 <Button 35 disabled ··· 37 color={color as ButtonColor} 38 size="large" 39 label="Click here"> 40 + <ButtonText>Button</ButtonText> 41 </Button> 42 </React.Fragment> 43 ))} ··· 54 color={name as ButtonColor} 55 size="large" 56 label="Click here"> 57 + <ButtonText>Button</ButtonText> 58 </Button> 59 <Button 60 disabled ··· 62 color={name as ButtonColor} 63 size="large" 64 label="Click here"> 65 + <ButtonText>Button</ButtonText> 66 </Button> 67 </React.Fragment> 68 ), ··· 77 color={name as ButtonColor} 78 size="large" 79 label="Click here"> 80 + <ButtonText>Button</ButtonText> 81 </Button> 82 <Button 83 disabled ··· 85 color={name as ButtonColor} 86 size="large" 87 label="Click here"> 88 + <ButtonText>Button</ButtonText> 89 </Button> 90 </React.Fragment> 91 ),

+7 -7

src/view/screens/Storybook/Dialogs.tsx

··· 3 4 import {useDialogStateControlContext} from '#/state/dialogs' 5 import {atoms as a} from '#/alf' 6 - import {Button} from '#/components/Button' 7 import * as Dialog from '#/components/Dialog' 8 import * as Prompt from '#/components/Prompt' 9 import {H3, P} from '#/components/Typography' ··· 26 basic.open() 27 }} 28 label="Open basic dialog"> 29 - Open all dialogs 30 </Button> 31 32 <Button ··· 37 scrollable.open() 38 }} 39 label="Open basic dialog"> 40 - Open scrollable dialog 41 </Button> 42 43 <Button ··· 48 basic.open() 49 }} 50 label="Open basic dialog"> 51 - Open basic dialog 52 </Button> 53 54 <Button ··· 57 size="small" 58 onPress={() => prompt.open()} 59 label="Open prompt"> 60 - Open prompt 61 </Button> 62 63 <Prompt.Outer control={prompt}> ··· 102 size="small" 103 onPress={closeAllDialogs} 104 label="Close all dialogs"> 105 - Close all dialogs 106 </Button> 107 <View style={{height: 1000}} /> 108 <View style={[a.flex_row, a.justify_end]}> ··· 116 }) 117 } 118 label="Open basic dialog"> 119 - Close dialog 120 </Button> 121 </View> 122 </View>

··· 3 4 import {useDialogStateControlContext} from '#/state/dialogs' 5 import {atoms as a} from '#/alf' 6 + import {Button, ButtonText} from '#/components/Button' 7 import * as Dialog from '#/components/Dialog' 8 import * as Prompt from '#/components/Prompt' 9 import {H3, P} from '#/components/Typography' ··· 26 basic.open() 27 }} 28 label="Open basic dialog"> 29 + <ButtonText>Open all dialogs</ButtonText> 30 </Button> 31 32 <Button ··· 37 scrollable.open() 38 }} 39 label="Open basic dialog"> 40 + <ButtonText>Open scrollable dialog</ButtonText> 41 </Button> 42 43 <Button ··· 48 basic.open() 49 }} 50 label="Open basic dialog"> 51 + <ButtonText>Open basic dialog</ButtonText> 52 </Button> 53 54 <Button ··· 57 size="small" 58 onPress={() => prompt.open()} 59 label="Open prompt"> 60 + <ButtonText>Open prompt</ButtonText> 61 </Button> 62 63 <Prompt.Outer control={prompt}> ··· 102 size="small" 103 onPress={closeAllDialogs} 104 label="Close all dialogs"> 105 + <ButtonText>Close all dialogs</ButtonText> 106 </Button> 107 <View style={{height: 1000}} /> 108 <View style={[a.flex_row, a.justify_end]}> ··· 116 }) 117 } 118 label="Open basic dialog"> 119 + <ButtonText>Close dialog</ButtonText> 120 </Button> 121 </View> 122 </View>

+2 -2

src/view/screens/Storybook/Forms.tsx

··· 2 import {View} from 'react-native' 3 4 import {atoms as a} from '#/alf' 5 - import {Button} from '#/components/Button' 6 import {DateField, LabelText} from '#/components/forms/DateField' 7 import * as TextField from '#/components/forms/TextField' 8 import * as Toggle from '#/components/forms/Toggle' ··· 191 setToggleGroupBValues(['a', 'b']) 192 setToggleGroupCValues(['a']) 193 }}> 194 - Reset all toggles 195 </Button> 196 197 <View style={[a.gap_md, a.align_start, a.w_full]}>

··· 2 import {View} from 'react-native' 3 4 import {atoms as a} from '#/alf' 5 + import {Button, ButtonText} from '#/components/Button' 6 import {DateField, LabelText} from '#/components/forms/DateField' 7 import * as TextField from '#/components/forms/TextField' 8 import * as Toggle from '#/components/forms/Toggle' ··· 191 setToggleGroupBValues(['a', 'b']) 192 setToggleGroupCValues(['a']) 193 }}> 194 + <ButtonText>Reset all toggles</ButtonText> 195 </Button> 196 197 <View style={[a.gap_md, a.align_start, a.w_full]}>

+14 -15

src/view/screens/Storybook/index.tsx

··· 1 import React from 'react' 2 import {View} from 'react-native' 3 - import {CenteredView, ScrollView} from '#/view/com/util/Views' 4 5 - import {atoms as a, useTheme, ThemeProvider} from '#/alf' 6 import {useSetThemePrefs} from '#/state/shell' 7 - import {Button} from '#/components/Button' 8 - 9 - import {Theming} from './Theming' 10 - import {Typography} from './Typography' 11 - import {Spacing} from './Spacing' 12 import {Buttons} from './Buttons' 13 - import {Links} from './Links' 14 import {Forms} from './Forms' 15 - import {Dialogs} from './Dialogs' 16 - import {Breakpoints} from './Breakpoints' 17 - import {Shadows} from './Shadows' 18 import {Icons} from './Icons' 0 19 import {Menus} from './Menus' 0 0 0 0 20 21 export function Storybook() { 22 const t = useTheme() ··· 33 size="small" 34 label='Set theme to "system"' 35 onPress={() => setColorMode('system')}> 36 - System 37 </Button> 38 <Button 39 variant="solid" ··· 41 size="small" 42 label='Set theme to "light"' 43 onPress={() => setColorMode('light')}> 44 - Light 45 </Button> 46 <Button 47 variant="solid" ··· 52 setColorMode('dark') 53 setDarkTheme('dim') 54 }}> 55 - Dim 56 </Button> 57 <Button 58 variant="solid" ··· 63 setColorMode('dark') 64 setDarkTheme('dark') 65 }}> 66 - Dark 67 </Button> 68 </View> 69

··· 1 import React from 'react' 2 import {View} from 'react-native' 0 3 0 4 import {useSetThemePrefs} from '#/state/shell' 5 + import {CenteredView, ScrollView} from '#/view/com/util/Views' 6 + import {atoms as a, ThemeProvider, useTheme} from '#/alf' 7 + import {Button, ButtonText} from '#/components/Button' 8 + import {Breakpoints} from './Breakpoints' 0 9 import {Buttons} from './Buttons' 10 + import {Dialogs} from './Dialogs' 11 import {Forms} from './Forms' 0 0 0 12 import {Icons} from './Icons' 13 + import {Links} from './Links' 14 import {Menus} from './Menus' 15 + import {Shadows} from './Shadows' 16 + import {Spacing} from './Spacing' 17 + import {Theming} from './Theming' 18 + import {Typography} from './Typography' 19 20 export function Storybook() { 21 const t = useTheme() ··· 32 size="small" 33 label='Set theme to "system"' 34 onPress={() => setColorMode('system')}> 35 + <ButtonText>System</ButtonText> 36 </Button> 37 <Button 38 variant="solid" ··· 40 size="small" 41 label='Set theme to "light"' 42 onPress={() => setColorMode('light')}> 43 + <ButtonText>Light</ButtonText> 44 </Button> 45 <Button 46 variant="solid" ··· 51 setColorMode('dark') 52 setDarkTheme('dim') 53 }}> 54 + <ButtonText>Dim</ButtonText> 55 </Button> 56 <Button 57 variant="solid" ··· 62 setColorMode('dark') 63 setDarkTheme('dark') 64 }}> 65 + <ButtonText>Dark</ButtonText> 66 </Button> 67 </View> 68