Merge pull request #2309 from gluestack/feat/docs-example-issues

Feat/docs example issues

example/storybook-nativewind/src/components/Accordion/index.nw.stories.mdx

@@ -56,7 +56,7 @@ This is an illustration of **Accordion** component.
     }}
     metaData={{
       code: `
-      <Accordion {...props} className="m-5 w-[90%]">
+      <Accordion {...props} className="m-5 w-[90%] border border-outline-200">
         <AccordionItem value="a">
           <AccordionHeader>
             <AccordionTrigger>

example/storybook-nativewind/src/components/Actionsheet/index.nw.stories.mdx

@@ -540,7 +540,7 @@ Demonstrates a common UI pattern known as keyboard handling or keyboard scrollin
           const handleClose = () => setShowActionsheet(false);
             return (
               <>
-                <Button onPress={handleClose}>
+                <Button onPress={() => setShowActionsheet(true)}>
                   <ButtonText>Open</ButtonText>
                 </Button>
                 <KeyboardAvoidingView behavior={Platform.OS === 'ios' ? 'padding' : undefined}>
@@ -642,7 +642,7 @@ Demonstrates a common UI pattern known as keyboard handling or keyboard scrollin
           const handleClose = () => setShowActionsheet(false);
             return (
               <>
-                <Button onPress={handleClose}>
+                <Button onPress={() => setShowActionsheet(true)}>
                     <ButtonText>Open</ButtonText>
                 </Button>
                 <Actionsheet
@@ -754,7 +754,7 @@ The Actionsheet with Icons is a variation of the Actionsheet component that disp
           const handleClose = () => setShowActionsheet(false);
             return (
               <>
-                <Button onPress={handleClose}>
+                <Button onPress={() => setShowActionsheet(true)}>
                   <ButtonText>Open</ButtonText>
                 </Button>
                 <Actionsheet isOpen={showActionsheet} onClose={handleClose}>
@@ -843,7 +843,7 @@ The Actionsheet with Virtualized List includes a virtualized list for better per
     );
     return (
     <>
-        <Button onPress={handleClose}>
+        <Button onPress={() => setShowActionsheet(true)}>
           <ButtonText>Open</ButtonText>
         </Button>
         <Actionsheet isOpen={showActionsheet} onClose={handleClose}  snapPoints={[50]}>
@@ -924,7 +924,7 @@ The Actionsheet with Flat List is a variation of the Actionsheet component that
     );
     return (
     <>
-        <Button onPress={handleClose}>
+        <Button onPress={() => setShowActionsheet(true)}>
           <ButtonText>Open</ButtonText>
         </Button>
         <Actionsheet isOpen={showActionsheet} onClose={handleClose}>
@@ -985,7 +985,7 @@ The Actionsheet with SectionList is a variation of the Actionsheet component tha
     ];
     return (
     <>
-        <Button onPress={handleClose}>
+        <Button onPress={() => setShowActionsheet(true)}>
           <ButtonText>Open</ButtonText>
         </Button>
         <Actionsheet isOpen={showActionsheet} onClose={handleClose} snapPoints={[35]}>
@@ -1050,7 +1050,7 @@ The Actionsheet with SectionList is a variation of the Actionsheet component tha
           const handleClose = () => setShowActionsheet(false);
           return (
             <>
-              <Button onPress={handleClose}>
+              <Button onPress={() => setShowActionsheet(true)}>
                 <ButtonText>Open</ButtonText>
               </Button>
               <Actionsheet isOpen={showActionsheet} onClose={handleClose}>
@@ -1141,7 +1141,7 @@ The Actionsheet with SectionList is a variation of the Actionsheet component tha
           const handleClose = () => setShowActionsheet(false);
           return (
             <>
-              <Button onPress={handleClose}>
+              <Button onPress={() => setShowActionsheet(true)}>
                 <ButtonText>Open</ButtonText>
               </Button>
               <Actionsheet isOpen={showActionsheet} onClose={handleClose}>
@@ -1248,4 +1248,4 @@ The Actionsheet with SectionList is a variation of the Actionsheet component tha
       argsType: {},
     }}
   />
-</Wrapper> */}
+</Wrapper> */}

example/storybook-nativewind/src/components/AlertDialog/index.nw.stories.mdx

@@ -503,11 +503,11 @@ The Examples section provides visual representations of the different variants o
               </Button>
               <AlertDialog isOpen={showAlertDialog} onClose={handleClose}>
                 <AlertDialogBackdrop />
-                <AlertDialogContent className="p-0 max-w-[590px] sm:flex-row border-blue-800 rounded-xl">
-                  <Box className="bg-blue-800 min-w-[123px] items-center justify-center py-4 sm:py-0">
+                <AlertDialogContent className="p-0 max-w-[590px] sm:flex-row border-primary-800 rounded-xl">
+                  <Box className="bg-primary-600 min-w-[123px] items-center justify-center py-4 sm:py-0">
                     <Image
                       source={{
-                        uri: 'https://s3-alpha-sig.figma.com/img/e102/c0d3/7d9780cf2bbdcce3142cbe98fb9c6d6e?Expires=1721001600&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=F1KwdVpm2K7MrffLuDxQzJlkfPWe6E3HADIeukZKEtUJmkMVQcRlmRrY~Q5M0U1o5MYNLA0WbQYLnMar6649gglOHnA1yksN8RbLuD3rg5m3m9sPpRmaxmW7eSKnVVCpyMJ4JeJ2EcjChTWRpaZjVDtJ9yUf5y~Ki-2rgFu1ORK3wgV-endPreugSGcknsvdBSvqT5IW7VwtybYPelxc0lG2vp5QiCIZ1Qiwls7atKY5dZC12E2ToBUEhV1l5N657MDWyFY3CsyJ2ZcnJFkSCldP6Ab4fUAHy43G2TAm4dKAsLbQAEY95m5iMmpTVjJq~Z4R6pvZjbF4TYUmguYaTA__',
+                        uri: 'https://s3-alpha-sig.figma.com/img/e102/c0d3/7d9780cf2bbdcce3142cbe98fb9c6d6e?Expires=1722211200&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=dcv50VxIIiZhgk7eFIXeeXuIB8IvftOJ6AmQNB0aDmgTXSH3Ph1vQHftectHl91sTPpuGXPWh~B0yVfarBPjq8E-m1o4XqGE4E5EMoSraKMLpWbmkbqeHrI43wt1qQPZIy91~VvJnh~j4Srb8SIpVyKUfJ7rGWfn~umxyBBH7C-04kXgt7RYswh61lswlKugYb8BmO7VYijmjcqTHvnnajNGdjCJM9GH5AaZVGjnQaJfY6whJpjbvpu7qjWQwh2NUh6OlBQz74kUVEg8OeuUcwAA5dd6HIY0plf7o3q7Cq5x35J6oUN30HY1TZ9l2b9fg14~EUkA8apLV1XM3Lad-Q__',
                       }}
                       alt="image"
                       className="h-[95px] w-[95px]"

example/storybook-nativewind/src/components/Avatar/index.nw.stories.mdx

@@ -242,8 +242,8 @@ An Avatar component with text displays a stylized representation of a user or en
     <VStack space="2xl">
         <HStack space="md">
             <Avatar className='bg-indigo-600'>
-              <AvatarFallbackText>Ronald Richards</AvatarFallbackText>
-              <AvatarBadge $dark-borderColor="$black"/>
+              <AvatarFallbackText className="text-white">Ronald Richards</AvatarFallbackText>
+              <AvatarBadge />
             </Avatar>
           <VStack>
              <Heading size="sm" >Ronald Richards</Heading>
@@ -252,7 +252,7 @@ An Avatar component with text displays a stylized representation of a user or en
       </HStack>
       <HStack space="md">
         <Avatar className='bg-orange-600'>
-            <AvatarFallbackText>Arlene McCoy</AvatarFallbackText>
+            <AvatarFallbackText className="text-white">Arlene McCoy</AvatarFallbackText>
         </Avatar>
         <VStack>
             <Heading size="sm" >Arlene McCoy</Heading>
@@ -294,7 +294,7 @@ An Avatar component with an icon combines a graphical symbol or icon with a user
             <HStack space="md">
               <Avatar className='bg-indigo-600'>
                 {/* User is imported from 'lucide-react-native' */}
-                <Icon as={User} size="lg"/>
+                <Icon as={User} size="lg" className="stroke-white" />
               </Avatar>
               <VStack >
                 <Heading size="sm" >Ronald Richards</Heading>
@@ -304,7 +304,7 @@ An Avatar component with an icon combines a graphical symbol or icon with a user
             <HStack space="md">
                 <Avatar className='bg-pink-600'>
                  {/* User is imported from 'lucide-react-native' */}
-                <Icon as={User} size="lg"/>
+                <Icon as={User} size="lg" className="stroke-white" />
                 </Avatar>
                 <VStack >
                   <Heading size="sm" >Kevin James</Heading>
@@ -422,7 +422,7 @@ The avatar group allows users to group avatars and display them in a horizontal
               {avatars.slice(0, 3).map((avatar, index) => {
                 return (
                   <Avatar key={index} size="lg" className={'border-2 border-outline-0 ' + avatar.color}>
-                    <AvatarFallbackText>{avatar.alt}</AvatarFallbackText>
+                    <AvatarFallbackText className="text-white">{avatar.alt}</AvatarFallbackText>
                   </Avatar>
                 );
               })}

example/storybook-nativewind/src/components/Fab/index.nw.stories.mdx

@@ -446,7 +446,7 @@ A Fab component with an icon adds a visually striking and easily recognizable bu
                   );
                 })}
               </VStack>
-              <Fab size='lg' className='bg-emerald-600 hover:bg-emerald-700 active:bg-emerald-800' >
+              <Fab size='lg' className='bg-primary-600 hover:bg-primary-700 active:bg-primary-800' >
                 {/* EditIcon is imported from 'lucide-react-native' */}
                 <FabIcon as={EditIcon} color="white"/>
               </Fab>
@@ -489,13 +489,13 @@ A Fab component with an icon and text combines a visual icon with accompanying t
         <Box
           className='max-w-96 border rounded-lg border-outline-200 py-[56px] px-6 mx-5 bg-background-100'
         >
-          <Fab className='top-4 h-9 bg-indigo-600 hover:bg-indigo-700 active:bg-indigo-900'>
+          <Fab className='top-4 h-9 bg-primary-600 hover:bg-primary-700 active:bg-primary-900'>
             <FabIcon as={SearchIcon} className='stroke-white' />
             <FabLabel className='text-white'>Search</FabLabel>
           </Fab>
           <VStack space='lg'>
             <Box>
-              <Text className='text-xs text-blue-600 font-bold'>
+              <Text className='text-xs text-primary-600 font-bold'>
                 HEALTH
               </Text>
               <Heading size='sm'>
@@ -524,7 +524,7 @@ A Fab component with an icon and text combines a visual icon with accompanying t
             </Box>
             <Divider />
             <Box>
-              <Text className='text-xs text-blue-600 font-bold'>
+              <Text className='text-xs text-primary-600 font-bold'>
                 TECHNOLOGY
               </Text>
               <Heading size='sm' >
@@ -690,12 +690,12 @@ A Fab component with custom placement allows for flexible positioning of the but
               Oranges are a great source of vitamin C, which is essential for a healthy immune system. Oranges are a great source of vitamin C, which is important for maintaining a healthy immune system. Vitamin C also helps with the absorption of iron and the production of collagen, which supports healthy skin, teeth, and bones.
             </Text>
             <Link href="https://gluestack.io/" isExternal>
-              <Text className='text-xs text-pink-600'>
+              <Text className='text-xs text-primary-600'>
                 READ MORE
               </Text>
             </Link>
           </VStack>
-          <Fab size='lg' className='bg-pink-600 right-4 bottom-16 hover:bg-pink-700 active:bg-pink-800'>
+          <Fab size='lg' className='bg-primary-600 right-4 bottom-16 hover:bg-primary-700 active:bg-primary-800'>
             {/* ShoppingCartIcon is imported from 'lucide-react-native' */}
             <FabIcon as={ShoppingCartIcon} className='h-4 w-4' color="white"/>
           </Fab>

example/storybook-nativewind/src/components/FormControl/index.nw.stories.mdx

@@ -699,29 +699,23 @@ Error messages can be displayed using FormControl.
             <VStack space="sm">
               <Radio size="sm" value="Mango">
                 <RadioIndicator>
-                  <RadioIcon>
-                    <CircleIcon/>
-                  </RadioIcon>
+                  <RadioIcon as={CircleIcon} />
                 </RadioIndicator>
                 <RadioLabel>
                   Monday
                 </RadioLabel>
               </Radio>
               <Radio size="sm" value="Apple">
                 <RadioIndicator>
-                  <RadioIcon>
-                    <CircleIcon/>
-                  </RadioIcon>
+                  <RadioIcon as={CircleIcon} />
                 </RadioIndicator>
                 <RadioLabel>
                   Tuesday
                 </RadioLabel>
               </Radio>
               <Radio size="sm" value="Orange">
                 <RadioIndicator>
-                  <RadioIcon>
-                    <CircleIcon/>
-                  </RadioIcon>
+                  <RadioIcon as={CircleIcon} />
                 </RadioIndicator>
                 <RadioLabel>
                   Wednesday
@@ -730,7 +724,7 @@ Error messages can be displayed using FormControl.
             </VStack>
           </RadioGroup>
           <FormControlError>
-            <FormControlErrorIcon size={10} as={AlertCircleIcon}/>
+            <FormControlErrorIcon as={AlertCircleIcon}/>
             <FormControlErrorText>
               Choose one time slot for the meeting
             </FormControlErrorText>
@@ -786,7 +780,7 @@ Form Action Buttons can also be utilized in conjunction with FormControl.
           </FormControl>
                <FormControl>
             <Button action='negative' className='ml-4'>
-              <ButtonText>
+              <ButtonText className="text-white">
                 Delete
               </ButtonText>
             </Button>

example/storybook-nativewind/src/components/Popover/index.nw.stories.mdx

@@ -848,13 +848,7 @@ The Examples section provides visual representations of the different variants o
             <PopoverBackdrop/>
             <PopoverContent className="w-full max-w-[420px] p-5 gap-6 pl-4 shadow-hard-5">
               <PopoverBody>
-                <HStack className="gap-1.5 pl-1">
-                  <Box className="w-8 h-1 bg-background-800 rounded" />
-                  <Box className="w-1 h-1 bg-background-100 rounded" />
-                  <Box className="w-1 h-1 bg-background-100 rounded" />
-                  <Box className="w-1 h-1 bg-background-100 rounded" />
-                </HStack>
-                <Heading className="pt-4 pl-1">
+                <Heading className="pl-1">
                   Are you interested in using Pro for work or personal use?
                 </Heading>
                 <Text className="pt-2 pb-6 pl-1" size="sm">

example/storybook-nativewind/src/components/Pressable/index.nw.stories.mdx

@@ -134,7 +134,7 @@ You can change the child elements according to the states of Pressable component
       code: `
     <Pressable className="p-16 bg-primary-500">
       {({ pressed }) => (
-        <Text className={pressed ? 'text-pink-400' : 'text-yellow-400'}>
+        <Text className={pressed ? 'text-pink-400' : 'text-amber-400'}>
           PRESSABLE
         </Text>
       )}

example/storybook-nativewind/src/components/Radio/index.nw.stories.mdx

@@ -832,7 +832,7 @@ The Radio components can be used with either a ref or no state, providing an unc
     metaData={{
       code: `
       function App () {
-        const radioRef = useRef(null);
+        const radioRef = React.useRef(null);
         const handleRadioChange = (e) => {
           e.preventDefault();
           const checkboxValue = radioRef.current.checked;

example/storybook-nativewind/src/components/Select/index.nw.stories.mdx

@@ -687,7 +687,7 @@ The Select component with FormControl example demonstrates how to manage its sta
             </FormControlHelperText>
           </FormControlHelper>
           <FormControlError>
-            <FormControlErrorIcon as={AlertCircleIcon} color="text-error-700"/>
+            <FormControlErrorIcon as={AlertCircleIcon} />
             <FormControlErrorText>Mandatory field</FormControlErrorText>
           </FormControlError>
         </FormControl>

example/storybook-nativewind/src/components/Tooltip/index.nw.stories.mdx

@@ -522,7 +522,7 @@ A tooltip component with an avatar is a user interface element that displays a s
                   }}
                 >
                   <TooltipContent
-                    className="p-4 rounded-md max-w-72 bg-background-0"
+                    className="p-4 rounded-md max-w-72 bg-background-50"
                   >
                     <VStack space='md' className="rounded-lg">
                       <Heading size="sm">View all members of this channel</Heading>
@@ -535,15 +535,15 @@ A tooltip component with an avatar is a user interface element that displays a s
                 </Tooltip>
                <Avatar size="lg"
                     className={"border-outline-0 border-2 bg-emerald-600"} >
-                      <AvatarFallbackText>Sandeep Srivastva</AvatarFallbackText>
+                      <AvatarFallbackText className="text-white">Sandeep Srivastva</AvatarFallbackText>
                 </Avatar>
                    <Avatar size="lg"
                     className={"border-outline-0 border-2 bg-cyan-600"} >
-                      <AvatarFallbackText>Arjun Kapoor</AvatarFallbackText>
+                      <AvatarFallbackText className="text-white">Arjun Kapoor</AvatarFallbackText>
                 </Avatar>
                       <Avatar size="lg"
                     className={"border-outline-0 border-2 bg-indigo-600"} >
-                      <AvatarFallbackText>Ritik Sharma </AvatarFallbackText>
+                      <AvatarFallbackText className="text-white">Ritik Sharma </AvatarFallbackText>
                 </Avatar>
               </AvatarGroup>
             </Box>
@@ -590,14 +590,14 @@ A tooltip component with an icon is a user interface element that provides conte
                   placement={"top"}
                   trigger={(triggerProps) => {
                     return (
-                    <Avatar size="md" {...triggerProps} className="bg-indigo-600">
-                      <Icon as={EditIcon} size="sm" className="text-typography-0"/>
+                    <Avatar size="md" {...triggerProps} className="bg-primary-600">
+                      <Icon as={EditIcon} size="sm" className="text-white"/>
                     </Avatar>
                     )
                   }}
               >
                 <TooltipContent
-                className="bg-background-0 rounded-md"
+                className="bg-background-50 rounded-md"
                 >
                   <Box className="p-2.5">
                     <Text size="sm">New message</Text>

example/storybook-nativewind/src/hooks/useBreakPointValue/index.nw.stories.mdx

@@ -53,13 +53,13 @@ This is an illustration of **useBreakPointValue** hook.
                 gap: 10,
               }}
             >
-              <Box className={"justify-center items-center p-4 rounded bg-blue-500"}>
+              <Box className={"justify-center items-center p-4 rounded bg-primary-500"}>
                 <Text className="font-bold text-typography-0">Box 1</Text>
               </Box>
-              <Box className={"justify-center items-center p-4 rounded bg-blue-600"}>
+              <Box className={"justify-center items-center p-4 rounded bg-primary-600"}>
                 <Text className="font-bold text-typography-0">Box 2</Text>
               </Box>
-              <Box className={"justify-center items-center p-4 rounded bg-blue-700"}>
+              <Box className={"justify-center items-center p-4 rounded bg-primary-700"}>
                 <Text className="font-bold text-typography-0">Box 3</Text>
               </Box>
             </VStack>

example/storybook-nativewind/src/hooks/useBreakPointValue/useBreakPointValue.tsx

@@ -18,13 +18,13 @@ const UseBreakPointValueBasic = ({ ...props }: any) => {
       }}
       {...props}
     >
-      <Box className={`justify-center items-center bg-blue-400`}>
+      <Box className={`justify-center items-center bg-primary-400`}>
         <Text className="font-bold text-typography-0">BOX 1</Text>
       </Box>
-      <Box className={`justify-center items-center bg-blue-500`}>
+      <Box className={`justify-center items-center bg-primary-500`}>
         <Text className="font-bold text-typography-0">BOX 2</Text>
       </Box>
-      <Box className={`justify-center items-center bg-blue-600`}>
+      <Box className={`justify-center items-center bg-primary-600`}>
         <Text className="font-bold text-typography-0">BOX 3</Text>
       </Box>
     </VStack>