fix: updated storybook

Author: amars29

example/storybook/stories/components/composites/Menu/Group.tsx

@@ -6,9 +6,6 @@ export function Example() {
     <Box h="80%" w="90%" alignItems="flex-start">
       <Menu
         w="190"
-        closeOnSelect={false}
-        onOpen={() => console.log('opened')}
-        onClose={() => console.log('closed')}
         trigger={(triggerProps) => {
           return (
             <Pressable {...triggerProps}>

example/storybook/stories/components/composites/Popover/PopoverPositions.tsx

@@ -3,6 +3,7 @@ import { Popover, Button, VStack, Select, CheckIcon, Box } from 'native-base';
 
 export function Example() {
   const [position, setPosition] = useState('auto');
+  const [isOpen, setIsOpen] = useState(false);
 
   return (
     <Box h="60%" w="100%" alignItems="center">
@@ -12,26 +13,39 @@ export function Example() {
           placement={position === 'auto' ? undefined : position}
           trigger={(triggerProps) => {
             return (
-              <Button colorScheme="danger" alignSelf="center" {...triggerProps}>
+              <Button
+                colorScheme="danger"
+                alignSelf="center"
+                {...triggerProps}
+                onPress={() => setIsOpen(true)}
+              >
                 Delete Customer
               </Button>
             );
           }}
+          isOpen={isOpen}
+          onClose={() => setIsOpen(!isOpen)}
         >
           <Popover.Content w="56">
             <Popover.Arrow />
-            <Popover.CloseButton />
+            <Popover.CloseButton onPress={() => setIsOpen(false)} />
             <Popover.Header>Delete Customer</Popover.Header>
             <Popover.Body>
               This will remove all data relating to Alex. This action cannot be
               reversed. Deleted data can not be recovered.
             </Popover.Body>
             <Popover.Footer justifyContent="flex-end">
               <Button.Group space={2}>
-                <Button colorScheme="coolGray" variant="ghost">
+                <Button
+                  colorScheme="coolGray"
+                  variant="ghost"
+                  onPress={() => setIsOpen(false)}
+                >
                   Cancel
                 </Button>
-                <Button colorScheme="danger">Delete</Button>
+                <Button colorScheme="danger" onPress={() => setIsOpen(false)}>
+                  Delete
+                </Button>
               </Button.Group>
             </Popover.Footer>
           </Popover.Content>

example/storybook/stories/components/composites/Transitions/Slide.tsx

@@ -1,5 +1,12 @@
 import React from 'react';
-import { Slide, Button, Alert, Text, Box } from 'native-base';
+import {
+  Slide,
+  Button,
+  Alert,
+  Text,
+  Box,
+  useColorModeValue,
+} from 'native-base';
 export const Example = () => {
   const [isOpenTop, setIsOpenTop] = React.useState(false);
   const str = `${isOpenTop ? 'Hide' : 'Check Internet Connection'}`;
@@ -18,6 +25,7 @@ export const Example = () => {
         onPress={() => setIsOpenTop(!isOpenTop)}
         variant="unstyled"
         bg="coolGray.700:alpha.30"
+        _text={{ color: useColorModeValue('darkText', 'lightText') }}
       >
         {str}
       </Button>