Merge pull request #770 from gluestack/fix/folder-name

Fix/folder name
gluestack · Jul 10, 2023 · 52f9d13 · 52f9d13
2 parents 39a305d + f02b8c0
commit 52f9d13
Show file tree

Hide file tree

Showing 104 changed files with 1,516 additions and 1,580 deletions.
diff --git a/example/storybook/.storybook/preview.js b/example/storybook/.storybook/preview.js
@@ -1,6 +1,6 @@
 import { addParameters } from '@storybook/client-api';
 import { DocsContainer } from '@storybook/addon-docs/blocks';
-import { GluestackUIProvider } from '../src/ui-components';
+import { Center, GluestackUIProvider } from '../src/ui-components';
 import { config } from '../src/gluestack-ui.config';
 import { useState } from 'react';
 export const parameters = {
@@ -97,7 +97,9 @@ export const decorators = [
     }
     return (
       <GluestackUIProvider config={config.theme} colorMode={getColorMode()}>
-        <Story />
+        <Center>
+          <Story />
+        </Center>
       </GluestackUIProvider>
     );
   },

diff --git a/example/storybook/src/components/DataDisplay/Badge/Badge.stories.tsx b/example/storybook/src/components/DataDisplay/Badge/Badge.stories.tsx
@@ -1,5 +1,5 @@
 import type { ComponentMeta } from '@storybook/react-native';
-import { BadgeStory as Badge } from './Badge';
+import Badge from './Badge';
 
 const BadgeMeta: ComponentMeta<typeof Badge> = {
   title: 'stories/DATA DISPLAY/Badge',

diff --git a/example/storybook/src/components/DataDisplay/Badge/Badge.tsx b/example/storybook/src/components/DataDisplay/Badge/Badge.tsx
@@ -26,17 +26,17 @@ import {
   BadgePlusIcon,
 } from 'lucide-react-native';
 
-export const BadgeStory = ({ text = 'New feature', ...props }: any) => {
+const BadgeStory = ({ text = 'New feature', ...props }: any) => {
   return (
-    <Center>
-      <Badge {...props}>
-        <Badge.Text>{text}</Badge.Text>
-        <Badge.Icon ml="$1" as={GlobeIcon} />
-      </Badge>
-    </Center>
+    <Badge {...props}>
+      <Badge.Text>{text}</Badge.Text>
+      <Badge.Icon ml="$1" as={GlobeIcon} />
+    </Badge>
   );
 };
 
+export default BadgeStory;
+
 export {
   Center,
   Badge,

diff --git a/example/storybook/src/components/DataDisplay/Divider/Divider.stories.tsx b/example/storybook/src/components/DataDisplay/Divider/Divider.stories.tsx
@@ -1,5 +1,5 @@
 import type { ComponentMeta } from '@storybook/react-native';
-import { DividerStory as Divider } from './Divider';
+import Divider from './Divider';
 
 const DividerMeta: ComponentMeta<typeof Divider> = {
   title: 'stories/DATA DISPLAY/Divider',

diff --git a/example/storybook/src/components/DataDisplay/Divider/Divider.tsx b/example/storybook/src/components/DataDisplay/Divider/Divider.tsx
@@ -10,7 +10,7 @@ import {
   Button,
 } from '../../../ui-components';
 
-export const DividerStory = () => {
+const DividerStory = () => {
   return (
     <VStack space="md" sx={{ justifyContent: 'center', alignItems: 'center' }}>
       <HStack
@@ -41,4 +41,6 @@ export const DividerStory = () => {
   );
 };
 
+export default DividerStory;
+
 export { Text, VStack, HStack, Divider, Box, Center, Heading, Button };
diff --git a/example/storybook/src/components/Disclosure/Actionsheet/Actionsheet.stories.tsx b/example/storybook/src/components/Disclosure/Actionsheet/Actionsheet.stories.tsx
@@ -1,11 +1,11 @@
 import type { ComponentMeta } from '@storybook/react-native';
-import { ActionsheetStory as Actionsheet } from './Actionsheet';
-import { ActionsheetExample as ActionsheetScrollView } from './ActionsheetScrollView';
-import { ActionsheetExample as ActionsheetFlatList } from './ActionsheetFlatList';
-import { ActionsheetExample as ActionsheetVirtualizedList } from './ActionsheetVirtualizedList';
-import { ActionsheetExample as ActionsheetSectionList } from './ActionsheetSectionList';
-import { ActionsheetExample as ActionsheetIcon } from './ActionsheetIcon';
-import { ActionsheetExample as ActionsheetAvoidKeyboard } from './ActionsheetAvoidKeyboard';
+import Actionsheet from './Actionsheet';
+import ActionsheetScrollView from './ActionsheetScrollView';
+import ActionsheetFlatList from './ActionsheetFlatList';
+import ActionsheetVirtualizedList from './ActionsheetVirtualizedList';
+import ActionsheetSectionList from './ActionsheetSectionList';
+import ActionsheetIcon from './ActionsheetIcon';
+import ActionsheetAvoidKeyboard from './ActionsheetAvoidKeyboard';
 
 const ActionsheetMeta: ComponentMeta<typeof Actionsheet> = {
   title: 'stories/DISCLOSURE/Actionsheet',
@@ -17,7 +17,7 @@ const ActionsheetMeta: ComponentMeta<typeof Actionsheet> = {
     },
   },
   args: {
-    showActionsheet: false,
+    showActionsheet: true,
   },
   parameters: {
     docs: {

diff --git a/example/storybook/src/components/Disclosure/Actionsheet/Actionsheet.tsx b/example/storybook/src/components/Disclosure/Actionsheet/Actionsheet.tsx
@@ -11,54 +11,44 @@ import {
   AddIcon,
   Image,
   Text,
-  Center,
 } from '../../../ui-components';
 
-export function ActionsheetStory({
-  showActionsheet: showActionsheetProp = false,
+function ActionsheetStory({
+  showActionsheet: showActionsheetProp = true,
   ...props
 }: any) {
   const [showActionsheet, setShowActionsheet] = React.useState(false);
 
   const handleClose = () => setShowActionsheet(false);
 
   return (
-    <Center>
-      <Button
-        onPress={() => {
-          setShowActionsheet(!showActionsheet);
-        }}
-      >
-        <Button.Text>Open</Button.Text>
-      </Button>
-      <Actionsheet
-        isOpen={showActionsheet || showActionsheetProp}
-        onClose={handleClose}
-        {...props}
-      >
-        <Actionsheet.Backdrop />
-        <Actionsheet.Content>
-          <Actionsheet.DragIndicatorWrapper>
-            <Actionsheet.DragIndicator />
-          </Actionsheet.DragIndicatorWrapper>
-          <Actionsheet.Item onPress={handleClose}>
-            <Actionsheet.ItemText>Delete</Actionsheet.ItemText>
-          </Actionsheet.Item>
-          <Actionsheet.Item onPress={handleClose}>
-            <Actionsheet.ItemText>Share</Actionsheet.ItemText>
-          </Actionsheet.Item>
-          <Actionsheet.Item onPress={handleClose}>
-            <Actionsheet.ItemText>Play</Actionsheet.ItemText>
-          </Actionsheet.Item>
-          <Actionsheet.Item onPress={handleClose}>
-            <Actionsheet.ItemText>Favourite</Actionsheet.ItemText>
-          </Actionsheet.Item>
-          <Actionsheet.Item onPress={handleClose}>
-            <Actionsheet.ItemText>Cancel</Actionsheet.ItemText>
-          </Actionsheet.Item>
-        </Actionsheet.Content>
-      </Actionsheet>
-    </Center>
+    <Actionsheet
+      isOpen={showActionsheet || showActionsheetProp}
+      onClose={handleClose}
+      {...props}
+    >
+      <Actionsheet.Backdrop />
+      <Actionsheet.Content>
+        <Actionsheet.DragIndicatorWrapper>
+          <Actionsheet.DragIndicator />
+        </Actionsheet.DragIndicatorWrapper>
+        <Actionsheet.Item onPress={handleClose}>
+          <Actionsheet.ItemText>Delete</Actionsheet.ItemText>
+        </Actionsheet.Item>
+        <Actionsheet.Item onPress={handleClose}>
+          <Actionsheet.ItemText>Share</Actionsheet.ItemText>
+        </Actionsheet.Item>
+        <Actionsheet.Item onPress={handleClose}>
+          <Actionsheet.ItemText>Play</Actionsheet.ItemText>
+        </Actionsheet.Item>
+        <Actionsheet.Item onPress={handleClose}>
+          <Actionsheet.ItemText>Favourite</Actionsheet.ItemText>
+        </Actionsheet.Item>
+        <Actionsheet.Item onPress={handleClose}>
+          <Actionsheet.ItemText>Cancel</Actionsheet.ItemText>
+        </Actionsheet.Item>
+      </Actionsheet.Content>
+    </Actionsheet>
   );
 }
 

diff --git a/example/storybook/src/components/Disclosure/Actionsheet/ActionsheetAvoidKeyboard.tsx b/example/storybook/src/components/Disclosure/Actionsheet/ActionsheetAvoidKeyboard.tsx
@@ -11,7 +11,6 @@ import {
   Text,
   Box,
   Icon,
-  Center,
 } from '../../../ui-components';
 import { KeyboardAvoidingView, Platform } from 'react-native';
 import { createIcon } from '@gluestack-ui/icon';
@@ -54,7 +53,10 @@ const LeadingIcon = createIcon({
   ),
 });
 
-export function ActionsheetExample({ ...props }) {
+function ActionsheetExample({
+  showActionsheet: showActionsheetProp = true,
+  ...props
+}) {
   const [showActionsheet, setShowActionsheet] = React.useState(
     props.showActionsheet
   );
@@ -68,62 +70,57 @@ export function ActionsheetExample({ ...props }) {
   return (
     // @ts-ignore
     <KeyboardAvoidingView behavior={Platform.OS === 'ios' ? 'padding' : ''}>
-      <Center>
-        <Button
-          onPress={() => {
-            setShowActionsheet(!showActionsheet);
-          }}
-        >
-          <Button.Text>Open</Button.Text>
-        </Button>
-        <Actionsheet isOpen={showActionsheet} onClose={handleClose} {...props}>
-          <Actionsheet.Backdrop />
-          <Actionsheet.Content maxHeight="75%">
-            <Actionsheet.DragIndicatorWrapper>
-              <Actionsheet.DragIndicator />
-            </Actionsheet.DragIndicatorWrapper>
-            <VStack w="$full" p={20}>
-              <HStack justifyContent="center" alignItems="center" space="md">
-                <Box
-                  w={50}
-                  h="$full"
-                  px="$2"
-                  borderWidth={1}
-                  borderStyle="solid"
-                  borderColor="$borderLight300"
-                  rounded="$sm"
-                >
-                  <Image
-                    source={{ uri: 'https://i.imgur.com/UwTLr26.png' }}
-                    flex={1}
-                    resizeMode="contain"
-                  />
-                </Box>
-                <VStack flex={1}>
-                  <Text fontWeight="$bold">Mastercard</Text>
-                  <Text>Card ending in 2345</Text>
-                </VStack>
-              </HStack>
-              <FormControl mt={36}>
-                <FormControl.Label>
-                  <FormControl.Label.Text>
-                    Confirm security code
-                  </FormControl.Label.Text>
-                </FormControl.Label>
-                <Input isFullWidth={true} {...props}>
-                  <Input.Icon>
-                    <Icon as={LeadingIcon} ml="$3" />
-                  </Input.Icon>
-                  <Input.Input placeholder="CVC/CVV" />
-                </Input>
-                <Button onPress={handleClose} mt={20}>
-                  <Button.Text>Pay $1000</Button.Text>
-                </Button>
-              </FormControl>
-            </VStack>
-          </Actionsheet.Content>
-        </Actionsheet>
-      </Center>
+      <Actionsheet
+        isOpen={showActionsheet || showActionsheetProp}
+        onClose={handleClose}
+        {...props}
+      >
+        <Actionsheet.Backdrop />
+        <Actionsheet.Content maxHeight="75%">
+          <Actionsheet.DragIndicatorWrapper>
+            <Actionsheet.DragIndicator />
+          </Actionsheet.DragIndicatorWrapper>
+          <VStack w="$full" p={20}>
+            <HStack justifyContent="center" alignItems="center" space="md">
+              <Box
+                w={50}
+                h="$full"
+                px="$2"
+                borderWidth={1}
+                borderStyle="solid"
+                borderColor="$borderLight300"
+                rounded="$sm"
+              >
+                <Image
+                  source={{ uri: 'https://i.imgur.com/UwTLr26.png' }}
+                  flex={1}
+                  resizeMode="contain"
+                />
+              </Box>
+              <VStack flex={1}>
+                <Text fontWeight="$bold">Mastercard</Text>
+                <Text>Card ending in 2345</Text>
+              </VStack>
+            </HStack>
+            <FormControl mt={36}>
+              <FormControl.Label>
+                <FormControl.Label.Text>
+                  Confirm security code
+                </FormControl.Label.Text>
+              </FormControl.Label>
+              <Input isFullWidth={true} {...props}>
+                <Input.Icon>
+                  <Icon as={LeadingIcon} ml="$3" />
+                </Input.Icon>
+                <Input.Input placeholder="CVC/CVV" />
+              </Input>
+              <Button onPress={handleClose} mt={20}>
+                <Button.Text>Pay $1000</Button.Text>
+              </Button>
+            </FormControl>
+          </VStack>
+        </Actionsheet.Content>
+      </Actionsheet>
     </KeyboardAvoidingView>
   );
 }

diff --git a/example/storybook/src/components/Disclosure/Actionsheet/ActionsheetFlatList.tsx b/example/storybook/src/components/Disclosure/Actionsheet/ActionsheetFlatList.tsx
@@ -1,9 +1,12 @@
 import React, { useCallback } from 'react';
 
-import { Actionsheet, Button, Center } from '../../../ui-components';
+import { Actionsheet, Button } from '../../../ui-components';
 import { useEffect } from 'react';
 
-export function ActionsheetExample({ ...props }) {
+function ActionsheetExample({
+  showActionsheet: showActionsheetProp = true,
+  ...props
+}) {
   const [showActionsheet, setShowActionsheet] = React.useState(
     props.showActionsheet
   );
@@ -42,28 +45,23 @@ export function ActionsheetExample({ ...props }) {
   );
 
   return (
-    <Center>
-      <Button
-        onPress={() => {
-          setShowActionsheet(!showActionsheet);
-        }}
-      >
-        <Button.Text>Open</Button.Text>
-      </Button>
-      <Actionsheet isOpen={showActionsheet} onClose={handleClose} {...props}>
-        <Actionsheet.Backdrop />
-        <Actionsheet.Content>
-          <Actionsheet.DragIndicatorWrapper>
-            <Actionsheet.DragIndicator />
-          </Actionsheet.DragIndicatorWrapper>
-          <Actionsheet.FlatList
-            data={DATA}
-            renderItem={({ item }: any) => <Item title={item.title} />}
-            keyExtractor={(item: any) => item.id}
-          />
-        </Actionsheet.Content>
-      </Actionsheet>
-    </Center>
+    <Actionsheet
+      isOpen={showActionsheet || showActionsheetProp}
+      onClose={handleClose}
+      {...props}
+    >
+      <Actionsheet.Backdrop />
+      <Actionsheet.Content>
+        <Actionsheet.DragIndicatorWrapper>
+          <Actionsheet.DragIndicator />
+        </Actionsheet.DragIndicatorWrapper>
+        <Actionsheet.FlatList
+          data={DATA}
+          renderItem={({ item }: any) => <Item title={item.title} />}
+          keyExtractor={(item: any) => item.id}
+        />
+      </Actionsheet.Content>
+    </Actionsheet>
   );
 }