feat/components-page

example/storybook/.storybook/preview.js

@@ -46,6 +46,7 @@ export const parameters = {
         ],
         'Components',
         [
+          'Component Catalog',
           'Provider',
           ['GluestackUIProvider'],
           'Typography',

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 (
+    <VStack
+      borderRadius="$xl"
+      borderWidth={1}
+      borderColor="$trueGray300"
+      minWidth="100%"
+      sx={{
+        '@md': {
+          flex: 1,
+        },
+        '_dark': {
+          borderColor: '$borderDark800',
+        },
+      }}
+    >
+      <Box
+        minHeight={236}
+        padding={padding ? padding : '$6'}
+        borderTopLeftRadius="$xl"
+        borderTopRightRadius="$xl"
+        borderBottomWidth={1}
+        borderBottomColor="$trueGray300"
+        bg="$trueGray50"
+        justifyContent="center"
+        alignItems="center"
+        sx={{
+          _dark: {
+            borderBottomColor: '$borderDark800',
+            bg: '#0C0E12',
+          },
+        }}
+      >
+        {child}
+      </Box>
+      <NextLink
+        href={href}
+        style={{
+          textDecoration: 'none',
+        }}
+      >
+        <Box>
+          <Text
+            fontSize="$xl"
+            fontWeight="$medium"
+            lineHeight="$xl"
+            px="$6"
+            py="$4"
+          >
+            {title}
+          </Text>
+        </Box>
+      </NextLink>
+    </VStack>
+  );
+};

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 (
+    <Box>
+      <Button onPress={handleClose}>
+        <ButtonText>Open</ButtonText>
+      </Button>
+      <Actionsheet
+        isOpen={showActionsheet}
+        onClose={handleClose}
+        zIndex={999}
+        _experimentalOverlay={showActionsheet}
+      >
+        <ActionsheetBackdrop />
+        <ActionsheetContent zIndex={999}>
+          <ActionsheetDragIndicatorWrapper>
+            <ActionsheetDragIndicator />
+          </ActionsheetDragIndicatorWrapper>
+          <ActionsheetItem onPress={handleClose}>
+            <ActionsheetItemText>Delete</ActionsheetItemText>
+          </ActionsheetItem>
+          <ActionsheetItem onPress={handleClose}>
+            <ActionsheetItemText>Share</ActionsheetItemText>
+          </ActionsheetItem>
+          <ActionsheetItem onPress={handleClose}>
+            <ActionsheetItemText>Play</ActionsheetItemText>
+          </ActionsheetItem>
+          <ActionsheetItem onPress={handleClose}>
+            <ActionsheetItemText>Favourite</ActionsheetItemText>
+          </ActionsheetItem>
+          <ActionsheetItem onPress={handleClose}>
+            <ActionsheetItemText>Cancel</ActionsheetItemText>
+          </ActionsheetItem>
+        </ActionsheetContent>
+      </Actionsheet>
+    </Box>
+  );
+};
+
+export default ActionsheetDemo;

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 (
+    <Alert mx="$2.5" action="info" variant="solid">
+      <AlertIcon as={InfoIcon} mr="$3" w={18} h={18} />
+      <AlertText>We have updated our terms of service.</AlertText>
+    </Alert>
+  );
+};
+
+export default AlertDemo;

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 (
+    <>
+      <Button
+        display={showButton ? 'flex' : 'none'}
+        onPress={() => {
+          setShowAlertDialog(true);
+          setShowButton(false);
+        }}
+      >
+        <ButtonText>Click me</ButtonText>
+      </Button>
+      <AlertDialog
+        initialFocusRef={React.useRef(null)}
+        isOpen={showAlertDialog}
+        onClose={() => {
+          setShowAlertDialog(false);
+        }}
+        // @ts-ignore
+        _experimentalOverlay={showAlertDialog}
+      >
+        <AlertDialogBackdrop />
+        <AlertDialogContent>
+          <AlertDialogHeader borderBottomWidth="$0">
+            <HStack space="sm" alignItems="center">
+              <Icon
+                as={CheckCircleIcon}
+                w={18}
+                h={18}
+                color="$success700"
+                sx={{
+                  _dark: {
+                    color: '$success300',
+                  },
+                }}
+              />
+              <Heading size="lg">Order placed</Heading>
+            </HStack>
+          </AlertDialogHeader>
+          <AlertDialogBody>
+            <Text size="sm">Congratulations, your order has been placed!</Text>
+          </AlertDialogBody>
+          <AlertDialogFooter borderTopWidth="$0">
+            <Button
+              variant="outline"
+              size="sm"
+              action="secondary"
+              onPress={() => {
+                setShowAlertDialog(false);
+                setShowButton(true);
+              }}
+            >
+              <ButtonText>Okay</ButtonText>
+            </Button>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </>
+  );
+};
+
+export default AlertDialogDemo;

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 (
+    <Avatar bgColor="$indigo600" size="md" borderRadius="$full">
+      <AvatarFallbackText>Richard Bay</AvatarFallbackText>
+    </Avatar>
+  );
+};
+
+export default Avatardemo;

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 (
+    <Badge size="lg" variant="solid" borderRadius="$none" action="info">
+      <BadgeText>Verified</BadgeText>
+    </Badge>
+  );
+};
+
+export default BadgeDemo;

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 (
+    <Box bg="$primary500" p="$5">
+      <Text color="white">This is the Box</Text>
+    </Box>
+  );
+};
+
+export default BoxDemo;

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 (
+    <Button
+      variant="solid"
+      bg="$success700"
+      borderColor="$success700"
+      sx={{
+        ':hover': {
+          bg: '$success800',
+        },
+        ':active': {
+          bg: '$success700',
+        },
+      }}
+    >
+      <ButtonText fontSize="$sm" fontWeight="$medium">
+        Submit
+      </ButtonText>
+    </Button>
+  );
+};
+
+export default ButtonDemo;

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 (
+    <Center bg="$indigo500" h={120} w={180}>
+      <Text color="white" fontWeight="$bold">
+        This is the center.
+      </Text>
+    </Center>
+  );
+};
+
+export default CenterDemo;

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 (
+    <Checkbox
+      size="md"
+      isInvalid={false}
+      isDisabled={false}
+      value="Label 1"
+      aria-label="Label 1"
+    >
+      <CheckboxIndicator mr="$2">
+        <CheckboxIcon as={CheckIcon} />
+      </CheckboxIndicator>
+      <CheckboxLabel>Try me!</CheckboxLabel>
+    </Checkbox>
+  );
+};

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 (
+    <Center>
+      <Text>Easy</Text>
+      <Divider my="$0.5" />
+      <Text>Difficult</Text>
+    </Center>
+  );
+};
+
+export default DividerDemo;