Merge pull request #45 from GeekyAnts/minor

updated storybook examples
GeekyAnts · Apr 11, 2022 · ba89cc0 · ba89cc0
2 parents d5c88ff + b3ec8fa
commit ba89cc0
Show file tree

Hide file tree

Showing 30 changed files with 171 additions and 160 deletions.
diff --git a/package.json b/package.json
@@ -23,7 +23,7 @@
 		"expo-status-bar": "~1.0.4",
 		"expo-updates": "~0.5.4",
 		"fs-extra": "^10.0.0",
-		"native-base": "3.4.0-rc.1",
+		"native-base": "3.4.0-rc.12",
 		"react": "16.13.1",
 		"react-dom": "16.13.1",
 		"react-native": "0.63.4",

diff --git a/src/nb/NativeBase b/src/nb/NativeBase
diff --git a/src/nb/components/Wrapper.tsx b/src/nb/components/Wrapper.tsx
@@ -11,6 +11,7 @@ import {
   SunIcon,
   extendTheme,
   Button,
+  Input,
 } from 'native-base';
 import type { StorageManager } from 'native-base';
 import AsyncStorage from '@react-native-async-storage/async-storage';
@@ -21,6 +22,11 @@ const myTheme = extendTheme({
   space: {
     mySpace: '29px',
   },
+  colors: {
+    blue1: {
+      '100': 'blue',
+    },
+  },
 
   components: {
     Link: {
@@ -38,6 +44,12 @@ const myTheme = extendTheme({
             padding: myPaddingX,
           };
         },
+
+        myNewButton1: (props: any) => {
+          return {
+            padding: props.padding,
+          };
+        },
       },
       sizes: {
         newsize: ({ mySize }: { mySize: number }) => {
@@ -48,6 +60,27 @@ const myTheme = extendTheme({
       },
     },
 
+    Input: {
+      variants: {
+        newsize: ({ mySize }: { mySize: number }) => {
+          return {
+            padding: mySize,
+          };
+        },
+
+        newsize1: (props: any) => {
+          return {
+            padding: props.padding,
+          };
+        },
+      },
+      sizes: {
+        'my-size': {
+          padding: 2,
+        },
+      },
+    },
+
     Checkbox: {
       sizes: {
         myBtn: {
@@ -115,7 +148,9 @@ export function RenderTestButton() {
   const [state, setState] = React.useState(1);
   return (
     <Box style={{ position: 'absolute', top: 10, left: 20 }} m={2} bg="red.100">
+      <Input m={2} size="my-size" />
       <Button
+        size=""
         variant={'myNewButton'}
         // title={state.toString()}
         onPress={() => setState(state + 1)}

diff --git a/src/nb/components/basic/FlatList/Basic.tsx b/src/nb/components/basic/FlatList/Basic.tsx
@@ -62,9 +62,9 @@ export const Example = () => {
           <Box
             borderBottomWidth="1"
             _dark={{
-              borderColor: 'gray.600',
+              borderColor: 'muted.50',
             }}
-            borderColor="coolGray.200"
+            borderColor="muted.800"
             pl="4"
             pr="5"
             py="2"

diff --git a/src/nb/components/basic/ScrollView/Basic.tsx b/src/nb/components/basic/ScrollView/Basic.tsx
@@ -3,56 +3,54 @@ import { ScrollView, VStack, Center, useTheme, Heading } from 'native-base';
 export const Example = () => {
   const { colors } = useTheme();
   return (
-    <Center>
-      <ScrollView
-        maxW="300"
-        h="80"
-        _contentContainerStyle={{
-          px: '20px',
-          mb: '4',
-          minW: '72',
-        }}
-      >
-        <Center mt="3" mb="4">
-          <Heading fontSize="xl">Cyan</Heading>
-        </Center>
-        <VStack flex="1">
-          {Object.keys(colors.cyan).map((key, index) => {
-            if (index >= 1 && index <= 5)
-              return (
-                <Center py="4" bg={`cyan.${key}`}>
-                  {key}
-                </Center>
-              );
-          })}
-        </VStack>
-        <Center mt="8" mb="4">
-          <Heading fontSize="xl">Yellow</Heading>
-        </Center>
-        <VStack flex="1">
-          {Object.keys(colors.cyan).map((key, index) => {
-            if (index >= 1 && index <= 5)
-              return (
-                <Center py="4" bg={`yellow.${key}`}>
-                  {key}
-                </Center>
-              );
-          })}
-        </VStack>
-        <Center mt="8" mb="4">
-          <Heading fontSize="xl"> Violet</Heading>
-        </Center>
-        <VStack flex="1">
-          {Object.keys(colors.violet).map((key, index) => {
-            if (index >= 1 && index <= 5)
-              return (
-                <Center py="4" bg={`violet.${key}`}>
-                  {key}
-                </Center>
-              );
-          })}
-        </VStack>
-      </ScrollView>
-    </Center>
+    <ScrollView
+      maxW="300"
+      h="80"
+      _contentContainerStyle={{
+        px: '20px',
+        mb: '4',
+        minW: '72',
+      }}
+    >
+      <Center mt="3" mb="4">
+        <Heading fontSize="xl">Cyan</Heading>
+      </Center>
+      <VStack flex="1">
+        {Object.keys(colors.cyan).map((key, index) => {
+          if (index >= 1 && index <= 5)
+            return (
+              <Center py="4" bg={`cyan.${key}`}>
+                {key}
+              </Center>
+            );
+        })}
+      </VStack>
+      <Center mt="8" mb="4">
+        <Heading fontSize="xl">Yellow</Heading>
+      </Center>
+      <VStack flex="1">
+        {Object.keys(colors.cyan).map((key, index) => {
+          if (index >= 1 && index <= 5)
+            return (
+              <Center py="4" bg={`yellow.${key}`}>
+                {key}
+              </Center>
+            );
+        })}
+      </VStack>
+      <Center mt="8" mb="4">
+        <Heading fontSize="xl"> Violet</Heading>
+      </Center>
+      <VStack flex="1">
+        {Object.keys(colors.violet).map((key, index) => {
+          if (index >= 1 && index <= 5)
+            return (
+              <Center py="4" bg={`violet.${key}`}>
+                {key}
+              </Center>
+            );
+        })}
+      </VStack>
+    </ScrollView>
   );
 };
diff --git a/src/nb/components/composites/Actionsheet/Icon.tsx b/src/nb/components/composites/Actionsheet/Icon.tsx
@@ -24,68 +24,28 @@ export function Example() {
             </Text>
           </Box>
           <Actionsheet.Item
-            startIcon={
-              <Icon
-                as={MaterialIcons}
-                color="trueGray.400"
-                mr="1"
-                size="6"
-                name="delete"
-              />
-            }
+            startIcon={<Icon as={MaterialIcons} size="6" name="delete" />}
           >
             Delete
           </Actionsheet.Item>
           <Actionsheet.Item
-            startIcon={
-              <Icon
-                as={MaterialIcons}
-                name="share"
-                color="trueGray.400"
-                mr="1"
-                size="6"
-              />
-            }
+            startIcon={<Icon as={MaterialIcons} name="share" size="6" />}
           >
             Share
           </Actionsheet.Item>
           <Actionsheet.Item
-            startIcon={
-              <Icon
-                as={Ionicons}
-                name="play-circle"
-                color="trueGray.400"
-                mr="1"
-                size="6"
-              />
-            }
+            startIcon={<Icon as={Ionicons} name="play-circle" size="6" />}
           >
             Play
           </Actionsheet.Item>
           <Actionsheet.Item
-            startIcon={
-              <Icon
-                as={MaterialIcons}
-                color="trueGray.400"
-                mr="1"
-                size="6"
-                name="favorite"
-              />
-            }
+            startIcon={<Icon as={MaterialIcons} size="6" name="favorite" />}
           >
             Favourite
           </Actionsheet.Item>
           <Actionsheet.Item
-            p={3}
             startIcon={
-              <Icon
-                color="trueGray.400"
-                mr="1"
-                h="24"
-                w="24"
-                viewBox="0 0 24 24"
-                fill="none"
-              >
+              <Icon viewBox="0 0 24 24" size="6" fill="none">
                 <Path d="M12.0007 10.5862L16.9507 5.63623L18.3647 7.05023L13.4147 12.0002L18.3647 16.9502L16.9507 18.3642L12.0007 13.4142L7.05072 18.3642L5.63672 16.9502L10.5867 12.0002L5.63672 7.05023L7.05072 5.63623L12.0007 10.5862Z" />
               </Icon>
             }

diff --git a/src/nb/components/composites/Actionsheet/Usage.tsx b/src/nb/components/composites/Actionsheet/Usage.tsx
@@ -21,7 +21,7 @@ export function Example() {
             </Text>
           </Box>
           <Actionsheet.Item>Delete</Actionsheet.Item>
-          <Actionsheet.Item>Share</Actionsheet.Item>
+          <Actionsheet.Item isDisabled>Share</Actionsheet.Item>
           <Actionsheet.Item>Play</Actionsheet.Item>
           <Actionsheet.Item>Favourite</Actionsheet.Item>
           <Actionsheet.Item>Cancel</Actionsheet.Item>

diff --git a/src/nb/components/composites/Alert/action.tsx b/src/nb/components/composites/Alert/action.tsx
@@ -37,7 +37,8 @@ export function Example() {
               <IconButton
                 variant="unstyled"
                 _focus={{ borderWidth: 0 }}
-                icon={<CloseIcon size="3" color="coolGray.600" />}
+                icon={<CloseIcon size="3" />}
+                _icon={{ color: 'coolGray.600' }}
                 onPress={() => setShow(false)}
               />
             </HStack>

diff --git a/src/nb/components/composites/Alert/basic.tsx b/src/nb/components/composites/Alert/basic.tsx
@@ -30,7 +30,8 @@ export const Example = () => {
             <IconButton
               variant="unstyled"
               _focus={{ borderWidth: 0 }}
-              icon={<CloseIcon size="3" color="coolGray.600" />}
+              icon={<CloseIcon size="3" />}
+              _icon={{ color: 'coolGray.600' }}
             />
           </HStack>
           <Box pl="6" _text={{ color: 'coolGray.600' }}>

diff --git a/src/nb/components/composites/Alert/colorScheme.tsx b/src/nb/components/composites/Alert/colorScheme.tsx
@@ -31,7 +31,8 @@ export function Example() {
               <IconButton
                 variant="unstyled"
                 _focus={{ borderWidth: 0 }}
-                icon={<CloseIcon size="3" color="coolGray.600" />}
+                icon={<CloseIcon size="3" />}
+                _icon={{ color: 'coolGray.600' }}
               />
             </HStack>
             <Box pl="6" _text={{ color: 'coolGray.600' }}>

diff --git a/src/nb/components/composites/Alert/composition.tsx b/src/nb/components/composites/Alert/composition.tsx
@@ -35,7 +35,8 @@ export function Example() {
               <IconButton
                 variant="unstyled"
                 _focus={{ borderWidth: 0 }}
-                icon={<CloseIcon size="3" color="coolGray.600" />}
+                icon={<CloseIcon size="3" />}
+                _icon={{ color: 'coolGray.600' }}
               />
             </HStack>
             <Box pl="6" _dark={{ _text: { color: 'coolGray.600' } }}>

diff --git a/src/nb/components/composites/Alert/knobEnabled.tsx b/src/nb/components/composites/Alert/knobEnabled.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Alert, Box, CloseIcon, IconButton } from 'native-base';
+import { Alert, Box, CloseIcon, IconButton, Text } from 'native-base';
 import { select } from '@storybook/addon-knobs';
 
 export const Example = () => {
@@ -21,8 +21,8 @@ export const Example = () => {
         actionProps={{ alignSelf: 'center' }}
       >
         <Alert.Icon />
-        <Alert.Title>Error Alert</Alert.Title>
-        <Alert.Description>Description </Alert.Description>
+        <Text>Error Alert</Text>
+        <Text>Description </Text>
       </Alert>
     </Box>
   );

diff --git a/src/nb/components/composites/Alert/status.tsx b/src/nb/components/composites/Alert/status.tsx
@@ -46,7 +46,8 @@ export function Example() {
                   <IconButton
                     variant="unstyled"
                     _focus={{ borderWidth: 0 }}
-                    icon={<CloseIcon size="3" color="coolGray.600" />}
+                    icon={<CloseIcon size="3" />}
+                    _icon={{ color: 'coolGray.600' }}
                   />
                 </HStack>
               </VStack>

diff --git a/src/nb/components/composites/Alert/usage.tsx b/src/nb/components/composites/Alert/usage.tsx
@@ -29,7 +29,8 @@ export function Example() {
             <IconButton
               variant="unstyled"
               _focus={{ borderWidth: 0 }}
-              icon={<CloseIcon size="3" color="coolGray.600" />}
+              icon={<CloseIcon size="3" />}
+              _icon={{ color: 'coolGray.600' }}
             />
           </HStack>
           <Box pl="6" _text={{ color: 'coolGray.600' }}>

diff --git a/src/nb/components/composites/Divider/Basic.tsx b/src/nb/components/composites/Divider/Basic.tsx
@@ -8,7 +8,11 @@ export const Example = () => {
         <Heading mx="3" alignItems="center" flexDirection="row">
           Chrome
         </Heading>
-        <Divider my="2" />
+        <Divider
+          my="2"
+          _light={{ bg: 'muted.800' }}
+          _dark={{ bg: 'muted.50' }}
+        />
         <Heading mx="3" alignItems="center" flexDirection="row">
           Firefox
         </Heading>

diff --git a/src/nb/components/composites/Divider/Orientation.tsx b/src/nb/components/composites/Divider/Orientation.tsx
@@ -6,10 +6,19 @@ export const Example = () => {
     <Box alignItems="center">
       <Box w="160">
         <Heading mx="auto">Shoes</Heading>
-        <Divider my="2" />
+        <Divider
+          my="2"
+          _light={{ bg: 'muted.800' }}
+          _dark={{ bg: 'muted.50' }}
+        />
         <Flex mx="3" direction="row" justify="space-evenly" h="60">
           <Heading py="2">Girls</Heading>
-          <Divider orientation="vertical" mx="3" />
+          <Divider
+            orientation="vertical"
+            mx="3"
+            _light={{ bg: 'muted.800' }}
+            _dark={{ bg: 'muted.50' }}
+          />
           <Heading py="2">Boys</Heading>
         </Flex>
       </Box>