Skip to content

Commit

Permalink
Merge pull request #1738 from gluestack/release/@gluestack-ui/themed@…
Browse files Browse the repository at this point in the history 
…1.1.3

Release/@gluestack UI/themed@1.1.3
  • Loading branch information
@Viraj-10
Viraj-10 authored Feb 2, 2024
2 parents 2dc3939 + 5b08f65 commit b623065
Show file tree
Hide file tree
Showing 21 changed files with 1,252 additions and 105 deletions.
1 change: 1 addition & 0 deletions example/storybook/.ondevice/storybook.requires.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,6 +58,7 @@ const getStories = () => {
require('../src/ui/components/Forms/Button/Button.stories.tsx'),
require('../src/styled/api/MultipleTheme/MultipleTheme.stories.tsx'),
// require('../src/components/DataDisplay/Badge/Badge.stories.tsx'),
require('../src/ui/components/DataDisplay/Card/Card.stories.tsx'),
// require('../src/components/Forms/Button/ButtonGroup.stories.tsx'),
// require('../src/components/Forms/Checkbox/Checkbox.stories.tsx'),
// require('../src/components/DataDisplay/Divider/Divider.stories.tsx'),
Expand Down
4 changes: 2 additions & 2 deletions example/storybook/.storybook/preview.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,7 @@ export const parameters = {
'Feedback',
['Alert', 'Progress', 'Spinner', 'Toast'],
'Data Display',
['Badge', 'Table'],
['Badge', 'Table', 'Card'],
'Forms',
[
'Button',
Expand Down Expand Up @@ -123,7 +123,7 @@ export const parameters = {
'Advanced',
['Fonts', 'Animations'],
'Recipes',
['Card', 'LinearGradient', 'More Recipes'],
['LinearGradient', 'More Recipes'],
'Resources',
['Todo-List', 'Dashboard App', 'Third Party Library Integrations'],
'Migration',
Expand Down
4 changes: 2 additions & 2 deletions example/storybook/src/styled/configuration/Themes/index.stories.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -201,7 +201,7 @@ const ButtonText = styled(Pressable, {
export const App = () => {
return (
<StyledProvider config={config}>
<Theme theme="classic">
<Theme name="classic">
<Button>
<ButtonText>Classic Button</ButtonText>
</Button>
Expand Down Expand Up @@ -240,7 +240,7 @@ const ButtonText = styled(Pressable, {
export const App = () => {
return (
<StyledProvider config={config}>
<Theme theme="classic">
<Theme name="classic">
<Button>
<ButtonText>Classic Button</ButtonText>
</Button>
Expand Down
65 changes: 65 additions & 0 deletions example/storybook/src/ui/components/DataDisplay/Card/BlogCard.tsx
View file
Original file line number Diff line number Diff line change
@@ -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;
30 changes: 30 additions & 0 deletions example/storybook/src/ui/components/DataDisplay/Card/Card.stories.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
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/DATA DISPLAY/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'],
},
variant: {
control: 'select',
options: ['elevated', 'outline', 'ghost', 'filled'],
},
},
};

export default CardMeta;

export { Card, BlogCard, ProductCard, ImageCard, ProfileCard };
55 changes: 55 additions & 0 deletions example/storybook/src/ui/components/DataDisplay/Card/Card.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
import React from 'react';
import {
Card,
Heading,
Text,
Image,
Link,
LinkText,
HStack,
Icon,
ArrowRightIcon,
Avatar,
Box,
VStack,
AvatarFallbackText,
AvatarImage,
Button,
ButtonText,
Divider,
} from '@gluestack-ui/themed';

const CardBasic = ({ ...props }: any) => {
return (
<Card {...props}>
<Heading mb="$1" size="md">
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,
Image,
Link,
LinkText,
HStack,
Icon,
ArrowRightIcon,
Avatar,
Box,
VStack,
AvatarFallbackText,
AvatarImage,
Button,
ButtonText,
Divider,
};
72 changes: 72 additions & 0 deletions example/storybook/src/ui/components/DataDisplay/Card/ImageCard.tsx
View file
Original file line number Diff line number Diff line change
@@ -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;
101 changes: 101 additions & 0 deletions example/storybook/src/ui/components/DataDisplay/Card/ProductCard.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,101 @@
import React from 'react';
import {
Card,
Text,
VStack,
Heading,
Button,
ButtonText,
Box,
Image,
} from '@gluestack-ui/themed';

const ProductCard = () => {
return (
<Card p="$5" borderRadius="$lg" maxWidth={360}>
<Image
mb="$6"
h={240}
width="$full"
borderRadius="$md"
source={{
uri: 'https://images.unsplash.com/photo-1595231712325-9fedecef7575?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1yZWxhdGVkfDJ8fHxlbnwwfHx8fHw%3D',
}}
/>

<Text
fontSize="$sm"
fontStyle="normal"
fontFamily="$heading"
fontWeight="$normal"
lineHeight="$sm"
mb="$2"
sx={{
color: '$textLight700',
_dark: {
color: '$textDark200',
},
}}
>
Fashion Clothing
</Text>
<VStack mb="$6">
<Heading size="md" fontFamily="$heading" mb="$4">
Cotton Kurta
</Heading>
<Text size="sm" fontFamily="$heading">
Floral embroidered notch neck thread work cotton kurta in white and
black.
</Text>
</VStack>
<Box
flexDirection="column"
sx={{
'@sm': {
flexDirection: 'row',
},
}}
>
<Button
px="$4"
py="$2"
fontFamily="$heading"
mr="$0"
mb="$3"
sx={{
'@sm': {
mr: '$3',
mb: '$0',
flex: 1,
},
}}
>
<ButtonText size="sm">Add to cart</ButtonText>
</Button>
<Button
px="$4"
py="$2"
variant="outline"
fontFamily="$heading"
borderColor="$borderLight300"
$dark-borderColor="$backgroundDark600"
sx={{
'@sm': {
flex: 1,
},
}}
>
<ButtonText
size="sm"
color="$textLight600"
$dark-color="$textDark400"
>
Wishlist
</ButtonText>
</Button>
</Box>
</Card>
);
};

export default ProductCard;
Loading

0 comments on commit b623065

Please sign in to comment.