Merge pull request #2202 from gluestack/fix/storybook-fixes

Fix/storybook fixes
gluestack · Jun 3, 2024 · 3f0396a · 3f0396a
2 parents d5181e0 + d4c616b
commit 3f0396a
Show file tree

Hide file tree

Showing 18 changed files with 94 additions and 204 deletions.
diff --git a/example/storybook-nativewind/src/components/Actionsheet/Actionsheet.tsx b/example/storybook-nativewind/src/components/Actionsheet/Actionsheet.tsx
@@ -1,25 +1,6 @@
-import React, { useState } from 'react';
-import {
-  Button,
-  ButtonText,
-  VStack,
-  HStack,
-  Icon,
-  Box,
-  FormControl,
-  FormControlLabel,
-  FormControlLabelText,
-  Input,
-  InputField,
-  InputIcon,
-  InputSlot,
-  AddIcon,
-  Image,
-  Text,
-  Center,
-} from '@/components/ui';
-import { config } from '@gluestack-ui/config';
-
+import React from 'react';
+import { Button, ButtonText } from '@/components/ui/button';
+import { Center } from '@/components/ui/center';
 import {
   Actionsheet,
   ActionsheetIcon,
@@ -56,10 +37,10 @@ const ActionsheetBasic = ({ showActionsheetProp, ...props }: any) => {
           <ActionsheetDragIndicatorWrapper>
             <ActionsheetDragIndicator />
           </ActionsheetDragIndicatorWrapper>
-          <ActionsheetItem onPress={handleClose} isDisabled>
+          <ActionsheetItem onPress={handleClose}>
             <ActionsheetItemText>Delete</ActionsheetItemText>
           </ActionsheetItem>
-          <ActionsheetItem onPress={handleClose}>
+          <ActionsheetItem isDisabled onPress={handleClose}>
             <ActionsheetItemText>Share</ActionsheetItemText>
           </ActionsheetItem>
           <ActionsheetItem onPress={handleClose}>
@@ -77,40 +58,12 @@ const ActionsheetBasic = ({ showActionsheetProp, ...props }: any) => {
   );
 };
 
-function FigmaActionsheetStory({ ...props }: any) {
-  return (
-    <Box w={900}>
-      <ActionsheetContent {...props} w="$full" _experimentalContent={true}>
-        <ActionsheetDragIndicatorWrapper>
-          <ActionsheetDragIndicator />
-        </ActionsheetDragIndicatorWrapper>
-        <ActionsheetItem>
-          <ActionsheetItemText>Delete</ActionsheetItemText>
-        </ActionsheetItem>
-        <ActionsheetItem>
-          <ActionsheetItemText>Share</ActionsheetItemText>
-        </ActionsheetItem>
-        <ActionsheetItem>
-          <ActionsheetItemText>Play</ActionsheetItemText>
-        </ActionsheetItem>
-        <ActionsheetItem>
-          <ActionsheetItemText>Favourite</ActionsheetItemText>
-        </ActionsheetItem>
-        <ActionsheetItem>
-          <ActionsheetItemText>Cancel</ActionsheetItemText>
-        </ActionsheetItem>
-      </ActionsheetContent>
-    </Box>
-  );
-}
-
 ActionsheetBasic.description =
   'This is a basic Actionsheet component example. Actionsheets are used to display a list of actions that can be performed on a page.';
 
 export default ActionsheetBasic;
 
 export {
-  FigmaActionsheetStory,
   Actionsheet,
   ActionsheetIcon,
   ActionsheetBackdrop,
@@ -124,22 +77,4 @@ export {
   ActionsheetSectionList,
   ActionsheetSectionHeaderText,
   ActionsheetVirtualizedList,
-  Button,
-  ButtonText,
-  VStack,
-  HStack,
-  Icon,
-  Box,
-  FormControl,
-  FormControlLabel,
-  FormControlLabelText,
-  Input,
-  InputField,
-  InputIcon,
-  InputSlot,
-  AddIcon,
-  Image,
-  Text,
-  useState,
-  config,
 };
diff --git a/example/storybook-nativewind/src/components/Button/Button.stories.tsx b/example/storybook-nativewind/src/components/Button/Button.stories.tsx
@@ -33,7 +33,7 @@ const ButtonMeta: ComponentMeta<typeof Button> = {
     },
     size: {
       control: 'select',
-      options: ['xs', 'sm', 'md', 'lg', 'xl'],
+      options: ['xs', 'sm', 'md', 'lg'],
     },
     isHovered: {
       control: 'boolean',

diff --git a/example/storybook-nativewind/src/components/Modal/Modal.tsx b/example/storybook-nativewind/src/components/Modal/Modal.tsx
@@ -9,25 +9,23 @@ import {
   ModalFooter,
   ModalHeader,
 } from '@/components/ui/modal';
-import { Center } from '@/components/ui/center';
 import { Heading } from '@/components/ui/heading';
 import { Icon, CloseIcon } from '@/components/ui/icon';
 import { Text } from '@/components/ui/text';
 
 const ModalBasic = () => {
   const [showModal, setShowModal] = useState(false);
-  const ref = React.useRef(null);
+
   return (
-    <Center h={300}>
-      <Button onPress={() => setShowModal(true)} ref={ref}>
+    <>
+      <Button onPress={() => setShowModal(true)}>
         <ButtonText>Show Modal</ButtonText>
       </Button>
       <Modal
         isOpen={showModal}
         onClose={() => {
           setShowModal(false);
         }}
-        finalFocusRef={ref}
       >
         <ModalBackdrop />
         <ModalContent>
@@ -69,7 +67,7 @@ const ModalBasic = () => {
           </ModalFooter>
         </ModalContent>
       </Modal>
-    </Center>
+    </>
   );
 };
 

diff --git a/example/storybook-nativewind/src/components/Progress/Progress.tsx b/example/storybook-nativewind/src/components/Progress/Progress.tsx
@@ -5,22 +5,10 @@ import { Box } from '@/components/ui/box';
 import { Heading } from '@/components/ui/heading';
 import { Center } from '@/components/ui/center';
 
-const ProgressBasic = ({ value = 50, ...props }: any) => {
+const ProgressBasic = ({ ...props }: any) => {
   return (
-    <Center>
-      <Progress
-        // sx={{
-        //   w: 300,
-        //   _web: {
-        //     w: 800,
-        //   },
-        // }}
-        style={{
-          width: 800,
-        }}
-        value={value}
-        {...props}
-      >
+    <Center className="w-full">
+      <Progress className="w-[80%]" {...props}>
         <ProgressFilledTrack />
       </Progress>
     </Center>

diff --git a/example/storybook-nativewind/src/components/Select/Select.tsx b/example/storybook-nativewind/src/components/Select/Select.tsx
@@ -27,18 +27,14 @@ const SelectBasic = ({ size = 'md', variant = 'outline', ...props }: any) => {
           <SelectDragIndicatorWrapper>
             <SelectDragIndicator />
           </SelectDragIndicatorWrapper>
-          <SelectItem label="UX Research" value="UX Research" />
-          <SelectItem label="Web Development" value="Web Development" />
+          <SelectItem label="UX Research" value="ux" />
+          <SelectItem label="Web Development" value="web" />
           <SelectItem
-            label="Cross Platform Development Process"
-            value="Cross Platform Development Process"
+            label="Cross Platform Development Process Cross Platform Development Process"
+            value="cross-platform"
           />
-          <SelectItem
-            label="UI Designing"
-            value="UI Designing"
-            isDisabled={true}
-          />
-          <SelectItem label="Backend Development" value="Backend Development" />
+          <SelectItem label="UI Designing" value="ui" isDisabled={true} />
+          <SelectItem label="Backend Development" value="backend" />
         </SelectContent>
       </SelectPortal>
     </Select>

diff --git a/example/storybook-nativewind/src/components/Skeleton/Skeleton.tsx b/example/storybook-nativewind/src/components/Skeleton/Skeleton.tsx
@@ -9,11 +9,11 @@ import { Text } from '@/components/ui/text';
 
 const SkeletonExample = () => {
   return (
-    <Box className="w-[290px] h-[400px] p-4 rounded-sm bg-background-100 gap-3">
-      <Skeleton variant="rounded" className="h-44 w-64 rounded-sm">
+    <Box className="w-[290px] h-[400px] p-4 rounded-md bg-background-100 gap-3">
+      <Skeleton variant="rounded" className="h-44 w-64">
         <Image
           size="full"
-          className="h-44 w-64 rounded-sm"
+          className="h-44 w-64 rounded-md"
           source={{
             uri: 'https://images.unsplash.com/photo-1715006020121-dd50879f9821?q=80&w=2787&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
           }}

diff --git a/example/storybook-nativewind/src/components/Skeleton/SkeletonCard.tsx b/example/storybook-nativewind/src/components/Skeleton/SkeletonCard.tsx
@@ -6,26 +6,27 @@ import { Image } from '@/components/ui/image';
 import { Text } from '@/components/ui/text';
 import { VStack } from '@/components/ui/vstack';
 import { Switch } from '@/components/ui/switch';
+import { ScrollView } from '@/components/ui/scroll-view';
 
 const SkeletonCard = () => {
   const [isLoaded, setIsLoaded] = React.useState(false);
 
   return (
-    <VStack>
+    <VStack className="w-full h-full">
       <Switch
         value={isLoaded}
         onToggle={() => {
           setIsLoaded(!isLoaded);
         }}
         className="mb-10"
       />
-      <HStack className="gap-3">
+      <ScrollView className="gap-3 w-full" horizontal={true}>
         {Array(3)
           .fill(0)
           .map((_, index) => (
             <Box
               key={index}
-              className="w-[325px] h-full gap-4 p-3 border border-gray-200 rounded-md"
+              className="w-[250px] gap-4 p-3 h-[50%] web:h-full mx-2 border border-outline-200 rounded-md"
             >
               <Skeleton
                 variant="sharp"
@@ -40,7 +41,7 @@ const SkeletonCard = () => {
                 />
               </Skeleton>
               <SkeletonText _lines={4} className="h-3" isLoaded={isLoaded}>
-                <Text className="font-medium">
+                <Text className="" size="sm">
                   Lorem ipsum dolor sit amet conseur aing ae elit. Deserunt ipsa
                   libero eius sunt quae is voluptas
                 </Text>
@@ -64,12 +65,19 @@ const SkeletonCard = () => {
                   className="h-2 w-2/5"
                   isLoaded={isLoaded}
                 >
-                  <Text className="font-medium">username</Text>
+                  <Box>
+                    <Text className="" size="xs">
+                      username
+                    </Text>
+                    <Text className="" size="xs">
+                      username
+                    </Text>
+                  </Box>
                 </SkeletonText>
               </HStack>
             </Box>
           ))}
-      </HStack>
+      </ScrollView>
     </VStack>
   );
 };

diff --git a/example/storybook-nativewind/src/components/Slider/Slider.tsx b/example/storybook-nativewind/src/components/Slider/Slider.tsx
@@ -1,28 +1,13 @@
 import React from 'react';
-import {
-  Text,
-  VStack,
-  HStack,
-  Box,
-  Icon,
-  Heading,
-  Tooltip,
-  TooltipContent,
-  Button,
-  Center,
-} from '@gluestack-ui/themed';
-
 import {
   Slider,
   SliderTrack,
   SliderFilledTrack,
   SliderThumb,
 } from '@/components/ui/slider';
 
-import { Volume, Volume2Icon, LightbulbIcon } from 'lucide-react-native';
-
-const SliderBasic = ({ value, ...props }: any) => {
-  const [sliderValue, setSliderValue] = React.useState(value);
+const SliderBasic = ({ ...props }: any) => {
+  const [sliderValue, setSliderValue] = React.useState(props.value);
   const handleChange = (value: any) => {
     setSliderValue(value);
   };
@@ -49,22 +34,4 @@ SliderBasic.description =
 
 export default SliderBasic;
 
-export {
-  Slider,
-  SliderTrack,
-  SliderFilledTrack,
-  SliderThumb,
-  VStack,
-  Volume,
-  HStack,
-  Volume2Icon,
-  Text,
-  Box,
-  LightbulbIcon,
-  Icon,
-  Heading,
-  Tooltip,
-  TooltipContent,
-  Button,
-  Center,
-};
+export { Slider, SliderTrack, SliderFilledTrack, SliderThumb };
diff --git a/example/storybook-nativewind/src/components/Switch/Switch.stories.tsx b/example/storybook-nativewind/src/components/Switch/Switch.stories.tsx
@@ -18,10 +18,6 @@ const SwitchMeta: ComponentMeta<typeof Switch> = {
       control: 'boolean',
       options: [true, false],
     },
-    isEnabled: {
-      control: 'boolean',
-      options: [true, false],
-    },
     isInvalid: {
       control: 'boolean',
       options: [true, false],
@@ -34,7 +30,6 @@ const SwitchMeta: ComponentMeta<typeof Switch> = {
   args: {
     size: 'md',
     isDisabled: false,
-    isEnabled: false,
     isInvalid: false,
     defaultValue: false,
   },

diff --git a/example/storybook-nativewind/src/components/Textarea/Textarea.tsx b/example/storybook-nativewind/src/components/Textarea/Textarea.tsx
@@ -1,13 +1,4 @@
 import React from 'react';
-import {
-  FormControl,
-  FormControlHelper,
-  FormControlHelperText,
-  FormControlError,
-  FormControlLabel,
-  FormControlLabelText,
-} from '@gluestack-ui/themed';
-
 import { Textarea, TextareaInput } from '@/components/ui/textarea';
 
 const TextareaBasic = ({ ...props }: any) => {
@@ -22,14 +13,4 @@ TextareaBasic.description =
   'This is a basic Textarea component example. Textareas are used to get multiline input from the user.';
 
 export default TextareaBasic;
-
-export {
-  Textarea,
-  TextareaInput,
-  FormControl,
-  FormControlHelper,
-  FormControlHelperText,
-  FormControlError,
-  FormControlLabel,
-  FormControlLabelText,
-};
+export { Textarea, TextareaInput };