diff --git a/example/storybook/.storybook/preview.js b/example/storybook/.storybook/preview.js index c86dc7f446..84e9d969fb 100644 --- a/example/storybook/.storybook/preview.js +++ b/example/storybook/.storybook/preview.js @@ -46,6 +46,7 @@ export const parameters = { ], 'Components', [ + 'Component Catalog', 'Provider', ['GluestackUIProvider'], 'Typography', diff --git a/example/storybook/src/components/Component-Catalog/ComponentCard.tsx b/example/storybook/src/components/Component-Catalog/ComponentCard.tsx new file mode 100644 index 0000000000..720d26ea3a --- /dev/null +++ b/example/storybook/src/components/Component-Catalog/ComponentCard.tsx @@ -0,0 +1,71 @@ +import React from 'react'; +import { Box, Text, VStack } from '@gluestack/design-system'; +import NextLink from 'next/link'; + +export const ComponentCard = ({ + title, + child, + padding, + href, +}: { + title: string; + child: React.ReactNode; + padding?: string; + props?: any; + href: string; +}) => { + return ( + + + {child} + + + + + {title} + + + + + ); +}; diff --git a/example/storybook/src/components/Component-Catalog/Demos/ActionsheetDemo.tsx b/example/storybook/src/components/Component-Catalog/Demos/ActionsheetDemo.tsx new file mode 100644 index 0000000000..4c9c2e6bc2 --- /dev/null +++ b/example/storybook/src/components/Component-Catalog/Demos/ActionsheetDemo.tsx @@ -0,0 +1,54 @@ +import React from 'react'; +import { + Actionsheet, + ActionsheetBackdrop, + ActionsheetContent, + ActionsheetDragIndicatorWrapper, + ActionsheetItem, + ActionsheetItemText, + ActionsheetDragIndicator, + Box, + Button, + ButtonText, +} from '@gluestack-ui/themed'; +const ActionsheetDemo = () => { + const [showActionsheet, setShowActionsheet] = React.useState(false); + const handleClose = () => setShowActionsheet(!showActionsheet); + return ( + + + + + + + + + + Delete + + + Share + + + Play + + + Favourite + + + Cancel + + + + + ); +}; + +export default ActionsheetDemo; diff --git a/example/storybook/src/components/Component-Catalog/Demos/AlertDemo.tsx b/example/storybook/src/components/Component-Catalog/Demos/AlertDemo.tsx new file mode 100644 index 0000000000..38660a8aa5 --- /dev/null +++ b/example/storybook/src/components/Component-Catalog/Demos/AlertDemo.tsx @@ -0,0 +1,13 @@ +import React from 'react'; +import { Alert, AlertIcon, AlertText, InfoIcon } from '@gluestack-ui/themed'; + +const AlertDemo = () => { + return ( + + + We have updated our terms of service. + + ); +}; + +export default AlertDemo; diff --git a/example/storybook/src/components/Component-Catalog/Demos/AlertDialogDemo.tsx b/example/storybook/src/components/Component-Catalog/Demos/AlertDialogDemo.tsx new file mode 100644 index 0000000000..3d58c0c54f --- /dev/null +++ b/example/storybook/src/components/Component-Catalog/Demos/AlertDialogDemo.tsx @@ -0,0 +1,81 @@ +import React from 'react'; +import { + Button, + ButtonText, + AlertDialog, + AlertDialogBackdrop, + AlertDialogContent, + AlertDialogHeader, + Heading, + Icon, + HStack, + AlertDialogBody, + Text, + AlertDialogFooter, + CheckCircleIcon, +} from '@gluestack-ui/themed'; + +const AlertDialogDemo = () => { + const [showAlertDialog, setShowAlertDialog] = React.useState(true); + const [showButton, setShowButton] = React.useState(false); + return ( + <> + + { + setShowAlertDialog(false); + }} + // @ts-ignore + _experimentalOverlay={showAlertDialog} + > + + + + + + Order placed + + + + Congratulations, your order has been placed! + + + + + + + + ); +}; + +export default AlertDialogDemo; diff --git a/example/storybook/src/components/Component-Catalog/Demos/AvatarDemo.tsx b/example/storybook/src/components/Component-Catalog/Demos/AvatarDemo.tsx new file mode 100644 index 0000000000..0bf0a1b04a --- /dev/null +++ b/example/storybook/src/components/Component-Catalog/Demos/AvatarDemo.tsx @@ -0,0 +1,11 @@ +import { Avatar, AvatarFallbackText } from '@gluestack-ui/themed'; +import React from 'react'; +const Avatardemo = () => { + return ( + + Richard Bay + + ); +}; + +export default Avatardemo; diff --git a/example/storybook/src/components/Component-Catalog/Demos/BadgeDemo.tsx b/example/storybook/src/components/Component-Catalog/Demos/BadgeDemo.tsx new file mode 100644 index 0000000000..dee34ebd81 --- /dev/null +++ b/example/storybook/src/components/Component-Catalog/Demos/BadgeDemo.tsx @@ -0,0 +1,11 @@ +import { Badge, BadgeText } from '@gluestack-ui/themed'; +import React from 'react'; +const BadgeDemo = () => { + return ( + + Verified + + ); +}; + +export default BadgeDemo; diff --git a/example/storybook/src/components/Component-Catalog/Demos/BoxDemo.tsx b/example/storybook/src/components/Component-Catalog/Demos/BoxDemo.tsx new file mode 100644 index 0000000000..5dcb35abdf --- /dev/null +++ b/example/storybook/src/components/Component-Catalog/Demos/BoxDemo.tsx @@ -0,0 +1,12 @@ +import { Box, Text } from '@gluestack-ui/themed'; +import React from 'react'; + +const BoxDemo = () => { + return ( + + This is the Box + + ); +}; + +export default BoxDemo; diff --git a/example/storybook/src/components/Component-Catalog/Demos/ButtonDemo.tsx b/example/storybook/src/components/Component-Catalog/Demos/ButtonDemo.tsx new file mode 100644 index 0000000000..d9b68746ae --- /dev/null +++ b/example/storybook/src/components/Component-Catalog/Demos/ButtonDemo.tsx @@ -0,0 +1,26 @@ +import { Button, ButtonText } from '@gluestack-ui/themed'; +import React from 'react'; + +const ButtonDemo = () => { + return ( + + ); +}; + +export default ButtonDemo; diff --git a/example/storybook/src/components/Component-Catalog/Demos/CenterDemo.tsx b/example/storybook/src/components/Component-Catalog/Demos/CenterDemo.tsx new file mode 100644 index 0000000000..beb49d130b --- /dev/null +++ b/example/storybook/src/components/Component-Catalog/Demos/CenterDemo.tsx @@ -0,0 +1,14 @@ +import React from 'react'; +import { Center, Text } from '@gluestack-ui/themed'; + +const CenterDemo = () => { + return ( +
+ + This is the center. + +
+ ); +}; + +export default CenterDemo; diff --git a/example/storybook/src/components/Component-Catalog/Demos/CheckboxDemo.tsx b/example/storybook/src/components/Component-Catalog/Demos/CheckboxDemo.tsx new file mode 100644 index 0000000000..7eaba2bc62 --- /dev/null +++ b/example/storybook/src/components/Component-Catalog/Demos/CheckboxDemo.tsx @@ -0,0 +1,25 @@ +import { + CheckIcon, + Checkbox, + CheckboxIcon, + CheckboxIndicator, + CheckboxLabel, +} from '@gluestack-ui/themed'; +import React from 'react'; + +export const CheckboxDemo = () => { + return ( + + + + + Try me! + + ); +}; diff --git a/example/storybook/src/components/Component-Catalog/Demos/DividerDemo.tsx b/example/storybook/src/components/Component-Catalog/Demos/DividerDemo.tsx new file mode 100644 index 0000000000..edbdab398e --- /dev/null +++ b/example/storybook/src/components/Component-Catalog/Demos/DividerDemo.tsx @@ -0,0 +1,14 @@ +import React from 'react'; +import { Center, Divider, Text } from '@gluestack-ui/themed'; + +const DividerDemo = () => { + return ( +
+ Easy + + Difficult +
+ ); +}; + +export default DividerDemo; diff --git a/example/storybook/src/components/Component-Catalog/Demos/FabDemo.tsx b/example/storybook/src/components/Component-Catalog/Demos/FabDemo.tsx new file mode 100644 index 0000000000..953a2260b4 --- /dev/null +++ b/example/storybook/src/components/Component-Catalog/Demos/FabDemo.tsx @@ -0,0 +1,77 @@ +import { + Fab, + FabIcon, + EditIcon, + HStack, + Avatar, + AvatarImage, + VStack, + Heading, + Text, + Box, +} from '@gluestack-ui/themed'; +import React from 'react'; + +const FabDemo = () => { + return ( + + + + + + + + Kevin Jay + Hi Rachel + + + + + + + + Albert + Coffee? + + + + + + + + ); +}; + +export default FabDemo; diff --git a/example/storybook/src/components/Component-Catalog/Demos/FormControlDemo.tsx b/example/storybook/src/components/Component-Catalog/Demos/FormControlDemo.tsx new file mode 100644 index 0000000000..9b236f1115 --- /dev/null +++ b/example/storybook/src/components/Component-Catalog/Demos/FormControlDemo.tsx @@ -0,0 +1,47 @@ +import React from 'react'; +import { + AlertCircleIcon, + FormControl, + FormControlHelper, + Input, + FormControlLabel, + FormControlLabelText, + FormControlHelperText, + FormControlError, + FormControlErrorText, + FormControlErrorIcon, + InputField, +} from '@gluestack-ui/themed'; +const FormControlDemo = () => { + return ( + + + Label + + + + + + This is a helper text. + + + + + + Atleast 6 characters are required. + + + + ); +}; + +export default FormControlDemo; diff --git a/example/storybook/src/components/Component-Catalog/Demos/HStackDemo.tsx b/example/storybook/src/components/Component-Catalog/Demos/HStackDemo.tsx new file mode 100644 index 0000000000..954621b726 --- /dev/null +++ b/example/storybook/src/components/Component-Catalog/Demos/HStackDemo.tsx @@ -0,0 +1,14 @@ +import React from 'react'; +import { Box, HStack } from '@gluestack-ui/themed'; + +const HStackDemo = () => { + return ( + + + + + + ); +}; + +export default HStackDemo; diff --git a/example/storybook/src/components/Component-Catalog/Demos/HeadingDemo.tsx b/example/storybook/src/components/Component-Catalog/Demos/HeadingDemo.tsx new file mode 100644 index 0000000000..9613c797f2 --- /dev/null +++ b/example/storybook/src/components/Component-Catalog/Demos/HeadingDemo.tsx @@ -0,0 +1,7 @@ +import React from 'react'; +import { Heading } from '@gluestack-ui/themed'; +const HeadingDemo = () => { + return I am a Heading; +}; + +export default HeadingDemo; diff --git a/example/storybook/src/components/Component-Catalog/Demos/IconDemo.tsx b/example/storybook/src/components/Component-Catalog/Demos/IconDemo.tsx new file mode 100644 index 0000000000..36e4ef47ab --- /dev/null +++ b/example/storybook/src/components/Component-Catalog/Demos/IconDemo.tsx @@ -0,0 +1,7 @@ +import React from 'react'; +import { EditIcon, Icon } from '@gluestack-ui/themed'; + +const IconDemo = () => { + return ; +}; +export default IconDemo; diff --git a/example/storybook/src/components/Component-Catalog/Demos/ImageDemo.tsx b/example/storybook/src/components/Component-Catalog/Demos/ImageDemo.tsx new file mode 100644 index 0000000000..498283ff9f --- /dev/null +++ b/example/storybook/src/components/Component-Catalog/Demos/ImageDemo.tsx @@ -0,0 +1,15 @@ +import React from 'react'; +import { Image } from '@gluestack-ui/themed'; + +const ImageDemo = () => { + return ( + + ); +}; + +export default ImageDemo; diff --git a/example/storybook/src/components/Component-Catalog/Demos/InputDemo.tsx b/example/storybook/src/components/Component-Catalog/Demos/InputDemo.tsx new file mode 100644 index 0000000000..4e51898dfa --- /dev/null +++ b/example/storybook/src/components/Component-Catalog/Demos/InputDemo.tsx @@ -0,0 +1,21 @@ +import { + Input, + InputField, + InputIcon, + InputSlot, + SearchIcon, +} from '@gluestack-ui/themed'; +import React from 'react'; + +const InputDemo = () => { + return ( + + + + + + + ); +}; + +export default InputDemo; diff --git a/example/storybook/src/components/Component-Catalog/Demos/LinkDemo.tsx b/example/storybook/src/components/Component-Catalog/Demos/LinkDemo.tsx new file mode 100644 index 0000000000..8e48fb5933 --- /dev/null +++ b/example/storybook/src/components/Component-Catalog/Demos/LinkDemo.tsx @@ -0,0 +1,12 @@ +import React from 'react'; +import { Link, LinkText } from '@gluestack-ui/themed'; + +const LinkDemo = () => { + return ( + + gluestack + + ); +}; + +export default LinkDemo; diff --git a/example/storybook/src/components/Component-Catalog/Demos/MenuDemo.tsx b/example/storybook/src/components/Component-Catalog/Demos/MenuDemo.tsx new file mode 100644 index 0000000000..9a3423170f --- /dev/null +++ b/example/storybook/src/components/Component-Catalog/Demos/MenuDemo.tsx @@ -0,0 +1,43 @@ +import { + Menu, + Button, + MenuItem, + Icon, + MenuItemLabel, + GlobeIcon, + ButtonText, +} from '@gluestack-ui/themed'; +import { PuzzleIcon, SettingsIcon } from 'lucide-react-native'; +import React from 'react'; + +const MenuDemo = () => { + return ( + { + return ( + + ); + }} + > + + + Community + + + + Settings + + + + Plugins + + + ); +}; + +export default MenuDemo; diff --git a/example/storybook/src/components/Component-Catalog/Demos/ModalDemo.tsx b/example/storybook/src/components/Component-Catalog/Demos/ModalDemo.tsx new file mode 100644 index 0000000000..dad5879d6a --- /dev/null +++ b/example/storybook/src/components/Component-Catalog/Demos/ModalDemo.tsx @@ -0,0 +1,88 @@ +import { + Heading, + ModalBackdrop, + Button, + ButtonText, + Modal, + ModalContent, + ModalHeader, + ModalCloseButton, + Icon, + CloseIcon, + ModalBody, + Text, + ModalFooter, +} from '@gluestack-ui/themed'; +import React, { useState, useRef } from 'react'; + +const ModalDemo = () => { + const [showModal, setShowModal] = useState(true); + const [showButton, setShowButton] = useState(false); + const ref = useRef(null); + return ( + <> + + { + setShowModal(false); + setShowButton(true); + }} + finalFocusRef={ref} + //@ts-ignore + _experimentalOverlay={showModal} + > + + + + Delete Folder + + + + + + You sure you want to delete the folder? + + + + + + + + + ); +}; + +export default ModalDemo; diff --git a/example/storybook/src/components/Component-Catalog/Demos/PopoverDemo.tsx b/example/storybook/src/components/Component-Catalog/Demos/PopoverDemo.tsx new file mode 100644 index 0000000000..45e14d2348 --- /dev/null +++ b/example/storybook/src/components/Component-Catalog/Demos/PopoverDemo.tsx @@ -0,0 +1,59 @@ +import { + Avatar, + Box, + Popover, + Pressable, + Text, + PopoverContent, + AvatarFallbackText, + PopoverBody, + HStack, + CircleIcon, +} from '@gluestack-ui/themed'; +import React from 'react'; + +const PopoverDemo = () => { + const [showPopover, setShowPopover] = React.useState(true); + + return ( + + { + return ( + { + setShowPopover(!showPopover); + }} + > + + Kevin James + + + ); + }} + > + + + + Kevin James + + + + + Active + + + + + + + ); +}; + +export default PopoverDemo; diff --git a/example/storybook/src/components/Component-Catalog/Demos/PressableDemo.tsx b/example/storybook/src/components/Component-Catalog/Demos/PressableDemo.tsx new file mode 100644 index 0000000000..dc16c93c0b --- /dev/null +++ b/example/storybook/src/components/Component-Catalog/Demos/PressableDemo.tsx @@ -0,0 +1,12 @@ +import { Pressable, Text } from '@gluestack-ui/themed'; +import React from 'react'; + +const PressableDemo = () => { + return ( + + Press me + + ); +}; + +export default PressableDemo; diff --git a/example/storybook/src/components/Component-Catalog/Demos/ProgressDemo.tsx b/example/storybook/src/components/Component-Catalog/Demos/ProgressDemo.tsx new file mode 100644 index 0000000000..0b9bf1b459 --- /dev/null +++ b/example/storybook/src/components/Component-Catalog/Demos/ProgressDemo.tsx @@ -0,0 +1,11 @@ +import React from 'react'; +import { Progress, ProgressFilledTrack } from '@gluestack-ui/themed'; +const ProgressDemo = () => { + return ( + + + + ); +}; + +export default ProgressDemo; diff --git a/example/storybook/src/components/Component-Catalog/Demos/RadioDemo.tsx b/example/storybook/src/components/Component-Catalog/Demos/RadioDemo.tsx new file mode 100644 index 0000000000..d9fb83199b --- /dev/null +++ b/example/storybook/src/components/Component-Catalog/Demos/RadioDemo.tsx @@ -0,0 +1,34 @@ +import React, { useState } from 'react'; +import { + CircleIcon, + Radio, + RadioGroup, + RadioIcon, + RadioIndicator, + RadioLabel, + VStack, +} from '@gluestack-ui/themed'; + +const RadioDemo = () => { + const [values, setValues] = useState('Monday'); + return ( + + + + Option A + + + + + + Option B + + + + + + + ); +}; + +export default RadioDemo; diff --git a/example/storybook/src/components/Component-Catalog/Demos/SelectDemo.tsx b/example/storybook/src/components/Component-Catalog/Demos/SelectDemo.tsx new file mode 100644 index 0000000000..1b1d63aa53 --- /dev/null +++ b/example/storybook/src/components/Component-Catalog/Demos/SelectDemo.tsx @@ -0,0 +1,49 @@ +import React from 'react'; +import { + ChevronDownIcon, + Icon, + Select, + SelectTrigger, + SelectInput, + SelectIcon, + SelectPortal, + SelectBackdrop, + SelectContent, + SelectDragIndicatorWrapper, + SelectDragIndicator, + SelectItem, +} from '@gluestack-ui/themed'; + +const SelectDemo = () => { + return ( + + ); +}; + +export default SelectDemo; diff --git a/example/storybook/src/components/Component-Catalog/Demos/SliderDemo.tsx b/example/storybook/src/components/Component-Catalog/Demos/SliderDemo.tsx new file mode 100644 index 0000000000..c7ff626583 --- /dev/null +++ b/example/storybook/src/components/Component-Catalog/Demos/SliderDemo.tsx @@ -0,0 +1,24 @@ +import { + Slider, + SliderFilledTrack, + SliderThumb, + SliderTrack, +} from '@gluestack-ui/themed'; +import React from 'react'; + +export const SliderDemo = () => { + return ( + + + + + + + ); +}; diff --git a/example/storybook/src/components/Component-Catalog/Demos/SpinnerDemo.tsx b/example/storybook/src/components/Component-Catalog/Demos/SpinnerDemo.tsx new file mode 100644 index 0000000000..3d9d7b2e4a --- /dev/null +++ b/example/storybook/src/components/Component-Catalog/Demos/SpinnerDemo.tsx @@ -0,0 +1,8 @@ +import React from 'react'; +import { Spinner } from '@gluestack-ui/themed'; + +const SpinnerDemo = () => { + return ; +}; + +export default SpinnerDemo; diff --git a/example/storybook/src/components/Component-Catalog/Demos/SwitchDemo.tsx b/example/storybook/src/components/Component-Catalog/Demos/SwitchDemo.tsx new file mode 100644 index 0000000000..f4c4ee6392 --- /dev/null +++ b/example/storybook/src/components/Component-Catalog/Demos/SwitchDemo.tsx @@ -0,0 +1,13 @@ +import React from 'react'; +import { HStack, Switch, Text } from '@gluestack-ui/themed'; + +const SwitchDemo = () => { + return ( + + + Allow notifications + + ); +}; + +export default SwitchDemo; diff --git a/example/storybook/src/components/Component-Catalog/Demos/TeaxtAreaDemo.tsx b/example/storybook/src/components/Component-Catalog/Demos/TeaxtAreaDemo.tsx new file mode 100644 index 0000000000..06a0c8613c --- /dev/null +++ b/example/storybook/src/components/Component-Catalog/Demos/TeaxtAreaDemo.tsx @@ -0,0 +1,18 @@ +import { Textarea, TextareaInput } from '@gluestack-ui/themed'; +import React from 'react'; + +const TextAreaDemo = () => { + return ( + + ); +}; + +export default TextAreaDemo; diff --git a/example/storybook/src/components/Component-Catalog/Demos/TextDemo.tsx b/example/storybook/src/components/Component-Catalog/Demos/TextDemo.tsx new file mode 100644 index 0000000000..b70303f770 --- /dev/null +++ b/example/storybook/src/components/Component-Catalog/Demos/TextDemo.tsx @@ -0,0 +1,8 @@ +import React from 'react'; +import { Text } from '@gluestack-ui/themed'; + +const TextDemo = () => { + return Hello World!; +}; + +export default TextDemo; diff --git a/example/storybook/src/components/Component-Catalog/Demos/ToastDemo.tsx b/example/storybook/src/components/Component-Catalog/Demos/ToastDemo.tsx new file mode 100644 index 0000000000..b5167d42df --- /dev/null +++ b/example/storybook/src/components/Component-Catalog/Demos/ToastDemo.tsx @@ -0,0 +1,20 @@ +import { + Toast, + ToastDescription, + ToastTitle, + VStack, +} from '@gluestack-ui/themed'; +import React from 'react'; + +const ToastDemo = () => { + return ( + + + Info + Add a note here + + + ); +}; + +export default ToastDemo; diff --git a/example/storybook/src/components/Component-Catalog/Demos/TooltipDemo.tsx b/example/storybook/src/components/Component-Catalog/Demos/TooltipDemo.tsx new file mode 100644 index 0000000000..af85e63cfd --- /dev/null +++ b/example/storybook/src/components/Component-Catalog/Demos/TooltipDemo.tsx @@ -0,0 +1,29 @@ +import { + Tooltip, + TooltipContent, + TooltipText, + Button, + ButtonText, +} from '@gluestack-ui/themed'; +import React from 'react'; + +const TooltipDemo = () => { + return ( + { + return ( + + ); + }} + > + + Tooltip + + + ); +}; + +export default TooltipDemo; diff --git a/example/storybook/src/components/Component-Catalog/Demos/VStackDemo.tsx b/example/storybook/src/components/Component-Catalog/Demos/VStackDemo.tsx new file mode 100644 index 0000000000..66b69fbcca --- /dev/null +++ b/example/storybook/src/components/Component-Catalog/Demos/VStackDemo.tsx @@ -0,0 +1,14 @@ +import React from 'react'; +import { Box, VStack } from '@gluestack-ui/themed'; + +const VStackDemo = () => { + return ( + + + + + + ); +}; + +export default VStackDemo; diff --git a/example/storybook/src/components/Component-Catalog/Grid.tsx b/example/storybook/src/components/Component-Catalog/Grid.tsx new file mode 100644 index 0000000000..ea5130412b --- /dev/null +++ b/example/storybook/src/components/Component-Catalog/Grid.tsx @@ -0,0 +1,48 @@ +import React from 'react'; +import { Box } from '@gluestack-ui/themed'; +import { ComponentCard } from './ComponentCard'; +import { content } from './content'; + +export const Grid = () => { + return ( + <> + + {content.map((item, index) => ( + + ))} + + + ); +}; diff --git a/example/storybook/src/components/Component-Catalog/content.tsx b/example/storybook/src/components/Component-Catalog/content.tsx new file mode 100644 index 0000000000..7c4a73d44a --- /dev/null +++ b/example/storybook/src/components/Component-Catalog/content.tsx @@ -0,0 +1,223 @@ +import React from 'react'; +import SelectDemo from './Demos/SelectDemo'; +import { CheckboxDemo } from './Demos/CheckboxDemo'; +import { SliderDemo } from './Demos/SliderDemo'; +import FormControlDemo from './Demos/FormControlDemo'; +import BadgeDemo from './Demos/BadgeDemo'; +import ToastDemo from './Demos/ToastDemo'; +import AvatarDemo from './Demos/AvatarDemo'; +import HeadingDemo from './Demos/HeadingDemo'; +import TextDemo from './Demos/TextDemo'; +import BoxDemo from './Demos/BoxDemo'; +import DividerDemo from './Demos/DividerDemo'; +import HStackDemo from './Demos/HStackDemo'; +import VStackDemo from './Demos/VStackDemo'; +import AlertDemo from './Demos/AlertDemo'; +import ProgressDemo from './Demos/ProgressDemo'; +import SpinnerDemo from './Demos/SpinnerDemo'; +import ButtonDemo from './Demos/ButtonDemo'; +import InputDemo from './Demos/InputDemo'; +import LinkDemo from './Demos/LinkDemo'; +import PressableDemo from './Demos/PressableDemo'; +import RadioDemo from './Demos/RadioDemo'; +import SwitchDemo from './Demos/SwitchDemo'; +import TextAreaDemo from './Demos/TeaxtAreaDemo'; +import TooltipDemo from './Demos/TooltipDemo'; +import IconDemo from './Demos/IconDemo'; +import ImageDemo from './Demos/ImageDemo'; +import FabDemo from './Demos/FabDemo'; +import CenterDemo from './Demos/CenterDemo'; +import AlertDialogDemo from './Demos/AlertDialogDemo'; +import ModalDemo from './Demos/ModalDemo'; +// import MenuDemo from './Demos/MenuDemo'; +// import PopoverDemo from './Demos/PopoverDemo'; +import ActionsheetDemo from './Demos/ActionsheetDemo'; + +export const content = [ + { + title: 'Actionsheet', + child: , + padding: '$0', + href: '/docs/components/disclosure/actionsheet', + }, + { + title: 'AlertDialog', + child: , + padding: '$0', + href: '/docs/components/overlay/alertdialog', + }, + { + title: 'Alert', + child: , + href: '/docs/components/feedback/alert', + }, + { + title: 'Avatar', + child: , + href: '/docs/components/media-and-icons/avatar', + }, + + { + title: 'Badge', + child: , + href: '/docs/components/data-display/badge', + }, + { + title: 'Box', + child: , + href: '/docs/components/layout/box', + }, + { + title: 'Button', + child: , + href: '/docs/components/forms/button', + }, + + { + title: 'Center', + child: , + href: '/docs/components/layout/center', + }, + { + title: 'Checkbox', + child: , + href: '/docs/components/forms/checkbox', + }, + + { + title: 'Divider', + child: , + href: '/docs/components/data-display/divider', + }, + + { + title: 'Fab', + child: , + href: '/docs/components/others/fab', + }, + { + title: 'FormControl', + child: , + href: '/docs/components/forms/form-control', + }, + { + title: 'Heading', + child: , + href: '/docs/components/typography/heading', + }, + { + title: 'HStack', + child: , + href: '/docs/components/layout/hstack', + }, + + { + title: 'Icon', + child: , + href: '/docs/components/media-and-icons/icon', + }, + { + title: 'Image', + child: , + href: '/docs/components/media-and-icons/image', + }, + { + title: 'Input', + child: , + href: '/docs/components/forms/input', + }, + + { + title: 'Link', + child: , + href: '/docs/components/forms/link', + }, + + // { + // title: 'Menu', + // child: , + // padding: '$0', + // href: '/docs/components/overlay/menu', + // }, + + { + title: 'Modal', + child: , + padding: '$0', + href: '/docs/components/overlay/modal', + }, + + // { + // title: 'Popover', + // child: , + // padding: '$0', + // href: '/docs/components/overlay/popover', + // }, + + { + title: 'Pressable', + child: , + href: '/docs/components/forms/pressable', + }, + { + title: 'Progress', + child: , + href: '/docs/components/feedback/progress', + }, + + { + title: 'Radio', + child: , + href: '/docs/components/forms/radio', + }, + + { + title: 'Select', + child: , + href: '/docs/components/forms/select', + }, + + { + title: 'Slider', + child: , + href: '/docs/components/forms/slider', + }, + { + title: 'Spinner', + child: , + href: '/docs/components/feedback/spinner', + }, + { + title: 'Switch', + child: , + href: '/docs/components/forms/switch', + }, + + { + title: 'Text', + child: , + href: '/docs/components/typography/text', + }, + { + title: 'TextArea', + child: , + href: '/docs/components/forms/textarea', + }, + { + title: 'Toast', + child: , + href: '/docs/components/feedback/toast', + }, + + { + title: 'Tooltip', + child: , + href: '/docs/components/overlay/tooltip', + }, + + { + title: 'VStack', + child: , + href: '/docs/components/layout/vstack', + }, +]; diff --git a/example/storybook/src/components/Component-Catalog/index.stories.mdx b/example/storybook/src/components/Component-Catalog/index.stories.mdx new file mode 100644 index 0000000000..ab16bcd38e --- /dev/null +++ b/example/storybook/src/components/Component-Catalog/index.stories.mdx @@ -0,0 +1,26 @@ +--- +title: Component Catalog | gluestack-ui + +description: gluestack-ui provides 30+ responsive components for every screen and style + +pageTitle: Component Catalog + +pageDescription: gluestack-ui provides 30+ responsive components for every screen and style + +toc: false +--- + +import { Canvas, Meta, Story } from '@storybook/addon-docs'; + + + +import { AppProvider } from '@gluestack/design-system'; +import { Grid } from './Grid'; + +# Components + +30+ responsive components for every screen and style + + + +