Skip to content

Commit 1390699

Browse files
Viraj-10Viraj-10
authored
Merge pull request #1826 from gluestack/feat/nativewind-component-card
feat/nativewind-component-card
2 parents e19391a + 48dd1d0 commit 1390699

File tree

15 files changed

+2674
-1
lines changed

15 files changed

+2674
-1
lines changed

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ export const parameters = {
4545
'Feedback',
4646
['Alert', 'Progress', 'Spinner', 'Toast'],
4747
'Data Display',
48-
['Badge'],
48+
['Badge', 'Card'],
4949
'Forms',
5050
[
5151
'Button',

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

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import React from 'react';
2+
import { tva } from '@gluestack-ui/nativewind-utils';
3+
import { View } from 'react-native';
4+
5+
const cardStyle = tva({
6+
variants: {
7+
size: {
8+
sm: 'p-3 rounded-sm',
9+
md: 'p-4 rounded-md',
10+
lg: 'p-6 rounded-xl',
11+
},
12+
variant: {
13+
elevated: 'bg-background-0',
14+
outline: 'border border-outline-200 ',
15+
ghost: 'rounded-none',
16+
filled: 'bg-background-50',
17+
},
18+
},
19+
});
20+
21+
const Card = ({
22+
className,
23+
size = 'md',
24+
variant = 'elevated',
25+
...props
26+
}: any) => {
27+
return (
28+
<View
29+
className={cardStyle({ size, variant, class: className })}
30+
{...props}
31+
/>
32+
);
33+
};
34+
35+
Card.displayName = 'Card';
36+
37+
export { Card };

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

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
import { View } from 'react-native';
2+
import { styled } from '@gluestack-style/react';
3+
4+
const StyledRoot = styled(View, {
5+
variants: {
6+
size: {
7+
sm: {
8+
p: '$3',
9+
borderRadius: '$sm',
10+
},
11+
md: {
12+
p: '$4',
13+
borderRadius: '$md',
14+
},
15+
lg: {
16+
p: '$6',
17+
borderRadius: '$xl',
18+
},
19+
},
20+
variant: {
21+
elevated: {
22+
bg: '$backgroundLight0',
23+
shadowColor: '$backgroundLight800',
24+
shadowOffset: {
25+
width: 0,
26+
height: 1,
27+
},
28+
shadowOpacity: 0.22,
29+
shadowRadius: 2.22,
30+
elevation: 3,
31+
_dark: {
32+
bg: '$backgroundDark900',
33+
},
34+
},
35+
outline: {
36+
borderWidth: 1,
37+
borderColor: '$borderLight200',
38+
_dark: {
39+
borderColor: '$borderDark800',
40+
},
41+
},
42+
ghost: {
43+
borderRadius: '$none',
44+
},
45+
filled: {
46+
bg: '$backgroundLight50',
47+
_dark: {
48+
bg: '$backgroundDark900',
49+
},
50+
},
51+
},
52+
},
53+
defaultProps: {
54+
theme: 'light',
55+
size: 'md',
56+
variant: 'elevated',
57+
},
58+
});
59+
60+
export const Card = StyledRoot;

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ export * from './AlertDialog';
66
export * from './Avatar';
77
export * from './Badge';
88
export * from './Box';
9+
export * from './Card';
910
export * from './FlatList';
1011
export * from './Center';
1112
export * from './Checkbox';

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

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
// import React from 'react';
2+
// import {
3+
// Card,
4+
// Text,
5+
// Box,
6+
// VStack,
7+
// Heading,
8+
// Avatar,
9+
// AvatarFallbackText,
10+
// AvatarImage,
11+
// } from '@gluestack-ui/themed';
12+
13+
// const BlogCard = () => {
14+
// return (
15+
// <Card p="$5" borderRadius="$lg" maxWidth={360}>
16+
// <Text
17+
// fontSize="$sm"
18+
// fontStyle="normal"
19+
// fontFamily="$heading"
20+
// fontWeight="$normal"
21+
// lineHeight="$sm"
22+
// mb="$2"
23+
// sx={{
24+
// color: '$textLight700',
25+
// _dark: {
26+
// color: '$textDark200',
27+
// },
28+
// }}
29+
// >
30+
// May 15, 2023
31+
// </Text>
32+
// <VStack mb="$6">
33+
// <Heading size="md" fontFamily="$heading" mb="$4">
34+
// The Power of Positive Thinking
35+
// </Heading>
36+
// <Text size="sm" fontFamily="$heading">
37+
// Discover how the power of positive thinking can transform your life,
38+
// boost your confidence, and help you overcome challenges. Explore
39+
// practical tips and techniques to cultivate a positive mindset for
40+
// greater happiness and success.
41+
// </Text>
42+
// </VStack>
43+
// <Box flexDirection="row">
44+
// <Avatar mr="$3">
45+
// <AvatarFallbackText fontFamily="$heading">RR</AvatarFallbackText>
46+
// <AvatarImage
47+
// source={{
48+
// uri: 'https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8dXNlcnxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=800&q=60',
49+
// }}
50+
// />
51+
// </Avatar>
52+
// <VStack>
53+
// <Heading size="sm" fontFamily="$heading" mb="$1">
54+
// John Smith
55+
// </Heading>
56+
// <Text size="sm" fontFamily="$heading">
57+
// Motivational Speaker
58+
// </Text>
59+
// </VStack>
60+
// </Box>
61+
// </Card>
62+
// );
63+
// };
64+
65+
// export default BlogCard;

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

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import type { ComponentMeta } from '@storybook/react-native';
2+
import Card from './Card';
3+
// import BlogCard from './BlogCard';
4+
// import ProductCard from './ProductCard';
5+
// import ImageCard from './ImageCard';
6+
// import ProfileCard from './ProfileCard';
7+
8+
const CardMeta: ComponentMeta<typeof Card> = {
9+
title: 'stories/Card',
10+
component: Card,
11+
// metaInfo is required for figma generation
12+
// @ts-ignore
13+
metaInfo: {
14+
componentDescription: `A Card component serves as a visual container that groups related content and actions.`,
15+
},
16+
argTypes: {
17+
size: {
18+
control: 'select',
19+
options: ['sm', 'md', 'lg'],
20+
defaultValue: 'md',
21+
},
22+
variant: {
23+
control: 'select',
24+
options: ['elevated', 'outline', 'ghost', 'filled'],
25+
defaultValue: 'elevated',
26+
},
27+
},
28+
};
29+
30+
export default CardMeta;
31+
32+
export {
33+
Card,
34+
// BlogCard,
35+
// ProductCard,
36+
// ImageCard,
37+
// ProfileCard
38+
};

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

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import React from 'react';
2+
import { Card } from '@/components/ui/Card';
3+
import { Text } from '@/components/ui/Text';
4+
import { Heading } from '@/components/ui/Heading';
5+
6+
const CardBasic = ({ ...props }: any) => {
7+
return (
8+
<Card {...props}>
9+
<Heading size="md" className={'mb-1'}>
10+
Quick Start
11+
</Heading>
12+
<Text size="sm">Start building your next project in minutes</Text>
13+
</Card>
14+
);
15+
};
16+
17+
CardBasic.description =
18+
'This is a basic Card component example. A Card component serves as a visual container that groups related content and actions.';
19+
20+
export default CardBasic;
21+
export { Card, Heading, Text };

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

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
// import React from 'react';
2+
// import {
3+
// Card,
4+
// Text,
5+
// Heading,
6+
// Image,
7+
// Link,
8+
// HStack,
9+
// LinkText,
10+
// Icon,
11+
// ArrowRightIcon,
12+
// } from '@gluestack-ui/themed';
13+
14+
// const ImageCard = () => {
15+
// return (
16+
// <Card p="$5" borderRadius="$lg" maxWidth={360}>
17+
// <Image
18+
// mb="$6"
19+
// h={240}
20+
// width="$full"
21+
// borderRadius="$md"
22+
// source={{
23+
// 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',
24+
// }}
25+
// />
26+
27+
// <Text
28+
// fontSize="$sm"
29+
// fontStyle="normal"
30+
// fontFamily="$heading"
31+
// fontWeight="$normal"
32+
// lineHeight="$sm"
33+
// mb="$2"
34+
// sx={{
35+
// color: '$textLight700',
36+
// _dark: {
37+
// color: '$textDark200',
38+
// },
39+
// }}
40+
// >
41+
// May 15, 2023
42+
// </Text>
43+
// <Heading size="md" fontFamily="$heading" mb="$4">
44+
// The Power of Positive Thinking
45+
// </Heading>
46+
// <Link href="https://gluestack.io/" isExternal>
47+
// <HStack alignItems="center">
48+
// <LinkText
49+
// size="sm"
50+
// fontFamily="$heading"
51+
// fontWeight="$semibold"
52+
// color="$primary600"
53+
// $dark-color="$primary300"
54+
// textDecorationLine="none"
55+
// >
56+
// Read Blog
57+
// </LinkText>
58+
// <Icon
59+
// as={ArrowRightIcon}
60+
// size="sm"
61+
// color="$primary600"
62+
// mt="$0.5"
63+
// ml="$0.5"
64+
// $dark-color="$primary300"
65+
// />
66+
// </HStack>
67+
// </Link>
68+
// </Card>
69+
// );
70+
// };
71+
72+
// export default ImageCard;

0 commit comments

Comments
 (0)