Merge pull request #23 from mrzachnugent/@zach/text-proposal

feat(universal): add single text component w/context to replace other children text components
mrzachnugent · Jan 23, 2024 · cfec919 · cfec919
2 parents e2c1fd4 + c9f793a
commit cfec919
Show file tree

Hide file tree

Showing 31 changed files with 413 additions and 736 deletions.
diff --git a/app/(main)/alert-dialog/alert-dialog-universal.tsx b/app/(main)/alert-dialog/alert-dialog-universal.tsx
@@ -3,17 +3,16 @@ import { View } from 'react-native';
 import {
   AlertDialog,
   AlertDialogAction,
-  AlertDialogActionText,
   AlertDialogCancel,
-  AlertDialogCancelText,
   AlertDialogContent,
   AlertDialogDescription,
   AlertDialogFooter,
   AlertDialogHeader,
   AlertDialogTitle,
   AlertDialogTrigger,
 } from '~/components/universal-ui/alert-dialog';
-import { Button, ButtonText } from '~/components/universal-ui/button';
+import { Button } from '~/components/universal-ui/button';
+import { Text } from '~/components/universal-ui/typography';
 
 export default function AlertDialogUniversalScreen() {
   const [open, setOpen] = React.useState(false);
@@ -22,7 +21,7 @@ export default function AlertDialogUniversalScreen() {
       <AlertDialog open={open} onOpenChange={setOpen}>
         <AlertDialogTrigger asChild>
           <Button variant='outline'>
-            <ButtonText>Show Alert Dialog</ButtonText>
+            <Text>Show Alert Dialog</Text>
           </Button>
         </AlertDialogTrigger>
         <AlertDialogContent>
@@ -35,10 +34,10 @@ export default function AlertDialogUniversalScreen() {
           </AlertDialogHeader>
           <AlertDialogFooter>
             <AlertDialogCancel>
-              <AlertDialogCancelText>Cancel</AlertDialogCancelText>
+              <Text>Cancel</Text>
             </AlertDialogCancel>
             <AlertDialogAction>
-              <AlertDialogActionText>Continue</AlertDialogActionText>
+              <Text>Continue</Text>
             </AlertDialogAction>
           </AlertDialogFooter>
         </AlertDialogContent>

diff --git a/app/(main)/avatar/avatar-universal.tsx b/app/(main)/avatar/avatar-universal.tsx
@@ -2,9 +2,9 @@ import { View } from 'react-native';
 import {
   Avatar,
   AvatarFallback,
-  AvatarFallbackText,
   AvatarImage,
 } from '~/components/universal-ui/avatar';
+import { Text } from '~/components/universal-ui/typography';
 
 const GITHUB_AVATAR_URI = 'https://github.com/mrzachnugent.png';
 
@@ -14,7 +14,7 @@ export default function AvatarPrimitiveScreen() {
       <Avatar alt="Zach Nugent's Avatar">
         <AvatarImage source={{ uri: GITHUB_AVATAR_URI }} />
         <AvatarFallback>
-          <AvatarFallbackText>ZN</AvatarFallbackText>
+          <Text>ZN</Text>
         </AvatarFallback>
       </Avatar>
     </View>

diff --git a/app/(main)/badge/badge-universal.tsx b/app/(main)/badge/badge-universal.tsx
@@ -1,20 +1,21 @@
 import { View } from 'react-native';
-import { Badge, BadgeText } from '~/components/universal-ui/badge';
+import { Badge } from '~/components/universal-ui/badge';
+import { Text } from '~/components/universal-ui/typography';
 
 export default function BadgeUniversalScreen() {
   return (
     <View className='flex-1 justify-center items-center gap-5'>
       <Badge>
-        <BadgeText>Default</BadgeText>
+        <Text>Default</Text>
       </Badge>
       <Badge variant={'secondary'}>
-        <BadgeText>Secondary</BadgeText>
+        <Text>Secondary</Text>
       </Badge>
       <Badge variant={'destructive'}>
-        <BadgeText>Destructive</BadgeText>
+        <Text>Destructive</Text>
       </Badge>
       <Badge variant={'outline'}>
-        <BadgeText>Outline</BadgeText>
+        <Text>Outline</Text>
       </Badge>
     </View>
   );

diff --git a/app/(main)/button/button-universal.tsx b/app/(main)/button/button-universal.tsx
@@ -1,32 +1,33 @@
 import { View } from 'react-native';
-import { Button, ButtonText } from '~/components/universal-ui/button';
+import { Button } from '~/components/universal-ui/button';
+import { Text } from '~/components/universal-ui/typography';
 
 export default function ButtonUniversalScreen() {
   return (
     <View className='flex-1 justify-center items-center gap-5'>
       <Button>
-        <ButtonText>Default</ButtonText>
+        <Text>Default</Text>
       </Button>
       <Button variant='destructive'>
-        <ButtonText>Destructive</ButtonText>
+        <Text>Destructive</Text>
       </Button>
       <Button variant='destructive' disabled>
-        <ButtonText>Destructive disabled</ButtonText>
+        <Text>Destructive disabled</Text>
       </Button>
       <Button variant='secondary'>
-        <ButtonText>Secondary</ButtonText>
+        <Text>Secondary</Text>
       </Button>
       <Button variant='outline' size='lg'>
-        <ButtonText>Outline lg</ButtonText>
+        <Text>Outline lg</Text>
       </Button>
       <Button variant='outline' size='sm'>
-        <ButtonText>Outline sm</ButtonText>
+        <Text>Outline sm</Text>
       </Button>
       <Button variant='ghost'>
-        <ButtonText>Ghost</ButtonText>
+        <Text>Ghost</Text>
       </Button>
       <Button variant='link' size='sm'>
-        <ButtonText>Link sm</ButtonText>
+        <Text>Link sm</Text>
       </Button>
     </View>
   );

diff --git a/app/(main)/card/card-universal.tsx b/app/(main)/card/card-universal.tsx
@@ -5,9 +5,9 @@ import {
   CardDescription,
   CardFooter,
   CardHeader,
-  CardText,
   CardTitle,
 } from '~/components/universal-ui/card';
+import { Text } from '~/components/universal-ui/typography';
 
 export default function ButtonUniversalScreen() {
   return (
@@ -18,10 +18,10 @@ export default function ButtonUniversalScreen() {
           <CardDescription>Card Description</CardDescription>
         </CardHeader>
         <CardContent>
-          <CardText>Card Content</CardText>
+          <Text>Card Content</Text>
         </CardContent>
         <CardFooter>
-          <CardText>Card Footer</CardText>
+          <Text>Card Footer</Text>
         </CardFooter>
       </Card>
     </View>

diff --git a/app/(main)/context-menu/context-menu-universal.tsx b/app/(main)/context-menu/context-menu-universal.tsx
@@ -1,13 +1,12 @@
 import React from 'react';
-import { Platform, Text, View } from 'react-native';
+import { Platform, View } from 'react-native';
 import Animated, { FadeIn } from 'react-native-reanimated';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import {
   ContextMenu,
   ContextMenuCheckboxItem,
   ContextMenuContent,
   ContextMenuItem,
-  ContextMenuItemText,
   ContextMenuLabel,
   ContextMenuRadioGroup,
   ContextMenuRadioItem,
@@ -16,9 +15,9 @@ import {
   ContextMenuSub,
   ContextMenuSubContent,
   ContextMenuSubTrigger,
-  ContextMenuSubTriggerText,
   ContextMenuTrigger,
 } from '~/components/universal-ui/context-menu';
+import { Text } from '~/components/universal-ui/typography';
 
 export default function ContextPrimitiveScreen() {
   const [open, setOpen] = React.useState(false);
@@ -58,39 +57,35 @@ export default function ContextPrimitiveScreen() {
             className='w-64 native:w-72'
           >
             <ContextMenuItem inset>
-              <ContextMenuItemText>Back</ContextMenuItemText>
+              <Text>Back</Text>
               <ContextMenuShortcut>⌘[</ContextMenuShortcut>
             </ContextMenuItem>
             <ContextMenuItem inset disabled>
-              <ContextMenuItemText>Forward</ContextMenuItemText>
+              <Text>Forward</Text>
               <ContextMenuShortcut>⌘]</ContextMenuShortcut>
             </ContextMenuItem>
             <ContextMenuItem inset>
-              <ContextMenuItemText>Reload</ContextMenuItemText>
+              <Text>Reload</Text>
               <ContextMenuShortcut>⌘R</ContextMenuShortcut>
             </ContextMenuItem>
 
             <ContextMenuSub open={openSub} onOpenChange={setOpenSub}>
               <ContextMenuSubTrigger inset>
-                <ContextMenuSubTriggerText>
-                  More Tools
-                </ContextMenuSubTriggerText>
+                <Text>More Tools</Text>
               </ContextMenuSubTrigger>
               <ContextMenuSubContent className='web:w-48 native:mt-1'>
                 <Animated.View entering={FadeIn.duration(200)}>
                   <ContextMenuItem>
-                    <ContextMenuItemText>Save Page As...</ContextMenuItemText>
+                    <Text>Save Page As...</Text>
                     <ContextMenuShortcut>⇧⌘S</ContextMenuShortcut>
                   </ContextMenuItem>
                   <ContextMenuItem>
-                    <ContextMenuItemText>
-                      Create Shortcut...
-                    </ContextMenuItemText>
+                    <Text>Create Shortcut...</Text>
                   </ContextMenuItem>
 
                   <ContextMenuSeparator />
                   <ContextMenuItem>
-                    <ContextMenuItemText>Developer Tools</ContextMenuItemText>
+                    <Text>Developer Tools</Text>
                   </ContextMenuItem>
                 </Animated.View>
               </ContextMenuSubContent>
@@ -102,30 +97,28 @@ export default function ContextPrimitiveScreen() {
               onCheckedChange={setCheckboxValue}
               closeOnPress={false}
             >
-              <ContextMenuItemText>Show Bookmarks Bar</ContextMenuItemText>
+              <Text>Show Bookmarks Bar</Text>
               <ContextMenuShortcut>⌘⇧B</ContextMenuShortcut>
             </ContextMenuCheckboxItem>
             <ContextMenuCheckboxItem
               checked={subCheckboxValue}
               onCheckedChange={setSubCheckboxValue}
               closeOnPress={false}
             >
-              <ContextMenuItemText>Show Full URLs</ContextMenuItemText>
+              <Text>Show Full URLs</Text>
             </ContextMenuCheckboxItem>
             <ContextMenuSeparator />
             <ContextMenuRadioGroup
               value={radioValue}
               onValueChange={setRadioValue}
             >
-              <ContextMenuLabel inset>
-                <ContextMenuItemText>People</ContextMenuItemText>
-              </ContextMenuLabel>
+              <ContextMenuLabel inset>People</ContextMenuLabel>
               <ContextMenuSeparator />
               <ContextMenuRadioItem value='pedro' closeOnPress={false}>
-                <ContextMenuItemText>Elmer Fudd</ContextMenuItemText>
+                <Text>Elmer Fudd</Text>
               </ContextMenuRadioItem>
               <ContextMenuRadioItem value='colm' closeOnPress={false}>
-                <ContextMenuItemText>Foghorn Leghorn</ContextMenuItemText>
+                <Text>Foghorn Leghorn</Text>
               </ContextMenuRadioItem>
             </ContextMenuRadioGroup>
           </ContextMenuContent>

diff --git a/app/(main)/dialog/dialog-universal.tsx b/app/(main)/dialog/dialog-universal.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { ScrollView } from 'react-native';
-import { Button, ButtonText } from '~/components/universal-ui/button';
+import { Button } from '~/components/universal-ui/button';
+import { Text } from '~/components/universal-ui/typography';
 import {
   Dialog,
   DialogClose,
@@ -19,7 +20,7 @@ export default function DialogUniversalScreen() {
       <Dialog open={open} onOpenChange={setOpen}>
         <DialogTrigger asChild>
           <Button variant='outline'>
-            <ButtonText>Edit Profile</ButtonText>
+            <Text>Edit Profile</Text>
           </Button>
         </DialogTrigger>
         <DialogContent className='sm:max-w-[425px]'>
@@ -33,7 +34,7 @@ export default function DialogUniversalScreen() {
           <DialogFooter>
             <DialogClose asChild>
               <Button>
-                <ButtonText>OK</ButtonText>
+                <Text>OK</Text>
               </Button>
             </DialogClose>
           </DialogFooter>

diff --git a/app/(main)/dropdown-menu/dropdown-menu-universal.tsx b/app/(main)/dropdown-menu/dropdown-menu-universal.tsx
@@ -14,13 +14,13 @@ import React from 'react';
 import { View } from 'react-native';
 import Animated, { FadeIn } from 'react-native-reanimated';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import { Button, ButtonText } from '~/components/universal-ui/button';
+import { Button } from '~/components/universal-ui/button';
+import { Text } from '~/components/universal-ui/typography';
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuGroup,
   DropdownMenuItem,
-  DropdownMenuItemText,
   DropdownMenuLabel,
   DropdownMenuSeparator,
   DropdownMenuShortcut,
@@ -54,7 +54,7 @@ export default function DropdownMenuUniversalScreen() {
       >
         <DropdownMenuTrigger asChild>
           <Button variant='outline'>
-            <ButtonText>Open</ButtonText>
+            <Text>Open</Text>
           </Button>
         </DropdownMenuTrigger>
         <DropdownMenuContent
@@ -66,54 +66,54 @@ export default function DropdownMenuUniversalScreen() {
           <DropdownMenuGroup>
             <DropdownMenuItem>
               <Users className='text-foreground' size={14} />
-              <DropdownMenuItemText>Team</DropdownMenuItemText>
+              <Text>Team</Text>
             </DropdownMenuItem>
             <DropdownMenuSub open={openSub} onOpenChange={setOpenSub}>
               <DropdownMenuSubTrigger>
                 <UserPlus className='text-foreground' size={14} />
-                <DropdownMenuItemText>Invite users</DropdownMenuItemText>
+                <Text>Invite users</Text>
               </DropdownMenuSubTrigger>
               <DropdownMenuSubContent>
                 <Animated.View entering={FadeIn.duration(200)}>
                   <DropdownMenuItem>
                     <Mail className='text-foreground' size={14} />
-                    <DropdownMenuItemText>Email</DropdownMenuItemText>
+                    <Text>Email</Text>
                   </DropdownMenuItem>
                   <DropdownMenuItem>
                     <MessageSquare className='text-foreground' size={14} />
-                    <DropdownMenuItemText>Message</DropdownMenuItemText>
+                    <Text>Message</Text>
                   </DropdownMenuItem>
                   <DropdownMenuSeparator />
                   <DropdownMenuItem>
                     <PlusCircle className='text-foreground' size={14} />
-                    <DropdownMenuItemText>More...</DropdownMenuItemText>
+                    <Text>More...</Text>
                   </DropdownMenuItem>
                 </Animated.View>
               </DropdownMenuSubContent>
             </DropdownMenuSub>
             <DropdownMenuItem>
               <Plus className='text-foreground' size={14} />
-              <DropdownMenuItemText>New Team</DropdownMenuItemText>
+              <Text>New Team</Text>
               <DropdownMenuShortcut>⌘+T</DropdownMenuShortcut>
             </DropdownMenuItem>
           </DropdownMenuGroup>
           <DropdownMenuSeparator />
           <DropdownMenuItem>
             <Github className='text-foreground' size={14} />
-            <DropdownMenuItemText>GitHub</DropdownMenuItemText>
+            <Text>GitHub</Text>
           </DropdownMenuItem>
           <DropdownMenuItem>
             <LifeBuoy className='text-foreground' size={14} />
-            <DropdownMenuItemText>Support</DropdownMenuItemText>
+            <Text>Support</Text>
           </DropdownMenuItem>
           <DropdownMenuItem disabled>
             <Cloud className='text-foreground' size={14} />
-            <DropdownMenuItemText>API</DropdownMenuItemText>
+            <Text>API</Text>
           </DropdownMenuItem>
           <DropdownMenuSeparator />
           <DropdownMenuItem>
             <LogOut className='text-foreground' size={14} />
-            <DropdownMenuItemText>Log out</DropdownMenuItemText>
+            <Text>Log out</Text>
             <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>
           </DropdownMenuItem>
         </DropdownMenuContent>