Merge pull request #1826 from gluestack/feat/nativewind-component-card

feat/nativewind-component-card

example/storybook-nativewind/.storybook/preview.js

@@ -45,7 +45,7 @@ export const parameters = {
           'Feedback',
           ['Alert', 'Progress', 'Spinner', 'Toast'],
           'Data Display',
-          ['Badge'],
+          ['Badge', 'Card'],
           'Forms',
           [
             'Button',

example/storybook-nativewind/src/components-example/nativewind/Card/index.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { tva } from '@gluestack-ui/nativewind-utils';
+import { View } from 'react-native';
+
+const cardStyle = tva({
+  variants: {
+    size: {
+      sm: 'p-3 rounded-sm',
+      md: 'p-4 rounded-md',
+      lg: 'p-6 rounded-xl',
+    },
+    variant: {
+      elevated: 'bg-background-0',
+      outline: 'border border-outline-200 ',
+      ghost: 'rounded-none',
+      filled: 'bg-background-50',
+    },
+  },
+});
+
+const Card = ({
+  className,
+  size = 'md',
+  variant = 'elevated',
+  ...props
+}: any) => {
+  return (
+    <View
+      className={cardStyle({ size, variant, class: className })}
+      {...props}
+    />
+  );
+};
+
+Card.displayName = 'Card';
+
+export { Card };

example/storybook-nativewind/src/components-example/themed/Card/index.tsx

@@ -0,0 +1,60 @@
+import { View } from 'react-native';
+import { styled } from '@gluestack-style/react';
+
+const StyledRoot = styled(View, {
+  variants: {
+    size: {
+      sm: {
+        p: '$3',
+        borderRadius: '$sm',
+      },
+      md: {
+        p: '$4',
+        borderRadius: '$md',
+      },
+      lg: {
+        p: '$6',
+        borderRadius: '$xl',
+      },
+    },
+    variant: {
+      elevated: {
+        bg: '$backgroundLight0',
+        shadowColor: '$backgroundLight800',
+        shadowOffset: {
+          width: 0,
+          height: 1,
+        },
+        shadowOpacity: 0.22,
+        shadowRadius: 2.22,
+        elevation: 3,
+        _dark: {
+          bg: '$backgroundDark900',
+        },
+      },
+      outline: {
+        borderWidth: 1,
+        borderColor: '$borderLight200',
+        _dark: {
+          borderColor: '$borderDark800',
+        },
+      },
+      ghost: {
+        borderRadius: '$none',
+      },
+      filled: {
+        bg: '$backgroundLight50',
+        _dark: {
+          bg: '$backgroundDark900',
+        },
+      },
+    },
+  },
+  defaultProps: {
+    theme: 'light',
+    size: 'md',
+    variant: 'elevated',
+  },
+});
+
+export const Card = StyledRoot;

example/storybook-nativewind/src/components-example/themed/index.ts

@@ -6,6 +6,7 @@ export * from './AlertDialog';
 export * from './Avatar';
 export * from './Badge';
 export * from './Box';
+export * from './Card';
 export * from './FlatList';
 export * from './Center';
 export * from './Checkbox';

example/storybook-nativewind/src/components/Card/BlogCard.tsx

@@ -0,0 +1,65 @@
+// import React from 'react';
+// import {
+//   Card,
+//   Text,
+//   Box,
+//   VStack,
+//   Heading,
+//   Avatar,
+//   AvatarFallbackText,
+//   AvatarImage,
+// } from '@gluestack-ui/themed';
+
+// const BlogCard = () => {
+//   return (
+//     <Card p="$5" borderRadius="$lg" maxWidth={360}>
+//       <Text
+//         fontSize="$sm"
+//         fontStyle="normal"
+//         fontFamily="$heading"
+//         fontWeight="$normal"
+//         lineHeight="$sm"
+//         mb="$2"
+//         sx={{
+//           color: '$textLight700',
+//           _dark: {
+//             color: '$textDark200',
+//           },
+//         }}
+//       >
+//         May 15, 2023
+//       </Text>
+//       <VStack mb="$6">
+//         <Heading size="md" fontFamily="$heading" mb="$4">
+//           The Power of Positive Thinking
+//         </Heading>
+//         <Text size="sm" fontFamily="$heading">
+//           Discover how the power of positive thinking can transform your life,
+//           boost your confidence, and help you overcome challenges. Explore
+//           practical tips and techniques to cultivate a positive mindset for
+//           greater happiness and success.
+//         </Text>
+//       </VStack>
+//       <Box flexDirection="row">
+//         <Avatar mr="$3">
+//           <AvatarFallbackText fontFamily="$heading">RR</AvatarFallbackText>
+//           <AvatarImage
+//             source={{
+//               uri: 'https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8dXNlcnxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=800&q=60',
+//             }}
+//           />
+//         </Avatar>
+//         <VStack>
+//           <Heading size="sm" fontFamily="$heading" mb="$1">
+//             John Smith
+//           </Heading>
+//           <Text size="sm" fontFamily="$heading">
+//             Motivational Speaker
+//           </Text>
+//         </VStack>
+//       </Box>
+//     </Card>
+//   );
+// };
+
+// export default BlogCard;

example/storybook-nativewind/src/components/Card/Card.stories.tsx

@@ -0,0 +1,38 @@
+import type { ComponentMeta } from '@storybook/react-native';
+import Card from './Card';
+// import BlogCard from './BlogCard';
+// import ProductCard from './ProductCard';
+// import ImageCard from './ImageCard';
+// import ProfileCard from './ProfileCard';
+
+const CardMeta: ComponentMeta<typeof Card> = {
+  title: 'stories/Card',
+  component: Card,
+  // metaInfo is required for figma generation
+  // @ts-ignore
+  metaInfo: {
+    componentDescription: `A Card component serves as a visual container that groups related content and actions.`,
+  },
+  argTypes: {
+    size: {
+      control: 'select',
+      options: ['sm', 'md', 'lg'],
+      defaultValue: 'md',
+    },
+    variant: {
+      control: 'select',
+      options: ['elevated', 'outline', 'ghost', 'filled'],
+      defaultValue: 'elevated',
+    },
+  },
+};
+
+export default CardMeta;
+
+export {
+  Card,
+  // BlogCard,
+  // ProductCard,
+  // ImageCard,
+  // ProfileCard
+};

example/storybook-nativewind/src/components/Card/Card.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { Card } from '@/components/ui/Card';
+import { Text } from '@/components/ui/Text';
+import { Heading } from '@/components/ui/Heading';
+
+const CardBasic = ({ ...props }: any) => {
+  return (
+    <Card {...props}>
+      <Heading size="md" className={'mb-1'}>
+        Quick Start
+      </Heading>
+      <Text size="sm">Start building your next project in minutes</Text>
+    </Card>
+  );
+};
+
+CardBasic.description =
+  'This is a basic Card component example. A Card component serves as a visual container that groups related content and actions.';
+
+export default CardBasic;
+export { Card, Heading, Text };

example/storybook-nativewind/src/components/Card/ImageCard.tsx

@@ -0,0 +1,72 @@
+// import React from 'react';
+// import {
+//   Card,
+//   Text,
+//   Heading,
+//   Image,
+//   Link,
+//   HStack,
+//   LinkText,
+//   Icon,
+//   ArrowRightIcon,
+// } from '@gluestack-ui/themed';
+
+// const ImageCard = () => {
+//   return (
+//     <Card p="$5" borderRadius="$lg" maxWidth={360}>
+//       <Image
+//         mb="$6"
+//         h={240}
+//         width="$full"
+//         borderRadius="$md"
+//         source={{
+//           uri: 'https://images.unsplash.com/photo-1529693662653-9d480530a697?q=80&w=2831&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+//         }}
+//       />
+
+//       <Text
+//         fontSize="$sm"
+//         fontStyle="normal"
+//         fontFamily="$heading"
+//         fontWeight="$normal"
+//         lineHeight="$sm"
+//         mb="$2"
+//         sx={{
+//           color: '$textLight700',
+//           _dark: {
+//             color: '$textDark200',
+//           },
+//         }}
+//       >
+//         May 15, 2023
+//       </Text>
+//       <Heading size="md" fontFamily="$heading" mb="$4">
+//         The Power of Positive Thinking
+//       </Heading>
+//       <Link href="https://gluestack.io/" isExternal>
+//         <HStack alignItems="center">
+//           <LinkText
+//             size="sm"
+//             fontFamily="$heading"
+//             fontWeight="$semibold"
+//             color="$primary600"
+//             $dark-color="$primary300"
+//             textDecorationLine="none"
+//           >
+//             Read Blog
+//           </LinkText>
+//           <Icon
+//             as={ArrowRightIcon}
+//             size="sm"
+//             color="$primary600"
+//             mt="$0.5"
+//             ml="$0.5"
+//             $dark-color="$primary300"
+//           />
+//         </HStack>
+//       </Link>
+//     </Card>
+//   );
+// };
+
+// export default ImageCard;