Skip to content
This repository has been archived by the owner on Dec 11, 2023. It is now read-only.

Commit

Permalink
Merge pull request #392 from gluestack/patch
Browse files Browse the repository at this point in the history 
Patch
  • Loading branch information
@surajahmed
surajahmed authored Sep 5, 2023
2 parents 4d7277f + 3001ce1 commit 8384571
Show file tree
Hide file tree
Showing 18 changed files with 365 additions and 322 deletions.
2 changes: 1 addition & 1 deletion example/storybook/.storybook/preview.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@ export const parameters = {
'configuration',
[
'Theme Tokens',
// 'Themes',
'Themes',
'Breakpoints',
'Global Style',
'Customizing Components',
Expand Down
1 change: 1 addition & 0 deletions example/storybook/babel.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,7 @@ module.exports = function (api) {
},
]
: ['babel-plugin-react-docgen-typescript', { exclude: 'node_modules' }],
'@babel/plugin-transform-modules-commonjs',
],
};
};
204 changes: 57 additions & 147 deletions example/storybook/src/api/DescendantsStyles/ContextBasedStyles.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,181 +13,91 @@ import {
StyleSheet,
View,
} from 'react-native';
import { AsForwarder, styled } from '@gluestack-style/react';
import { AsForwarder, styled, Theme } from '@gluestack-style/react';
import { Wrapper } from '../../components/Wrapper';
// import { AddIcon } from '@gluestack/design-system';
import { createIcon } from '@gluestack-ui/icon';
import { Svg } from 'react-native-svg';
import { FlatList } from 'react-native';
import { StyledText, StyledView } from '../AsForwarder/AsForwarder';

// const Box = styled(View, {
// bg: '$backgroundDark300',
// width: '200px',
// height: '100px',
// });

const Text = styled(
RNText,
{
// bg: '$amber300',
// color: '$red500',
// props: {
// color: '$pink400',
// },
// variants: {
// variant: {
// solid: {
// color: '$green500',
// },
// },
// },
},
{
componentName: 'TEXT',
}
);
const MyPressable = styled(
const Pressable = styled(
RNPressable,
{
bg: '$red500',
// height: 40,
// p: 2,
// // props: {
// // color: '$purple500',
// // },
// variants: {
// variant: {
// solid: {
// bg: '$red400',
// },
// },
// },
// defaultProps: {
// variant: 'solid',
// },
'bg': '$red500',
// 'bg': '$red600',
'w': 100,
'h': 100,
'_light': {
bg: '$red600',
},
'@base': {
bg: '$blue500',
},
':hover': {
bg: '$red500',
},
},
{
componentName: 'BOX',
componentName: 'Pressable',
descendantStyle: ['_text'],
}
);

const Box = styled(
View,
{
variants: {
variant: {},
},
// bg: '$red500',
// height: 40,
// p: 2,
// // props: {
// // color: '$purple500',
// // },
// variants: {
// variant: {
// solid: {
// bg: '$red400',
// },
// },
// },
// defaultProps: {
// variant: 'solid',
// },
},
const Text = styled(
RNText,
{},
{
componentName: 'BOX2',
descendantStyle: ['_text'],
componentName: 'Text',
}
);

export function ContextBasedStyles() {
return (
<Wrapper>
<Wrapper colorMode="dark">
<ContextBasedStylesContent />
</Wrapper>
);
}

const MyFlatList = styled(
FlatList,
{},
{
componentName: 'MyFlatList',
}
);
const styleshet = StyleSheet.create({
style: {
backgroundColor: 'blue',
padding: 2,
height: 40,
},
});
export function ContextBasedStylesContent() {
const timeTaken = useRef(Date.now());
// useEffect(() => {
// console.log(Date.now() - timeTaken.current, 'hello');
// }, []);

const [state, setState] = useState(true);

const handlePress = useCallback(() => {
timeTaken.current = Date.now();
setState(!state);
}, [state]);

// const layoutChange = () => {};

// useEffect(() => {
// console.log(Date.now() - timeTaken.current, 'hello');
// });
// return <MyFlatList></MyFlatList>;

// useEffect(() => {
// console.log(Date.now() - timeTaken.current, 'hello');
// }, [state]);
const [tabName, setTabName] = useState(true);

const DATA = [
{
id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
title: 'First Item',
},
{
id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
title: 'Second Item',
},
{
id: '58694a0f-3da1-471f-bd96-145571e29d72',
title: 'Third Item',
},
];
const handleTabChange = (tabName: any) => {
setTabName(tabName);
};

// const color = tabName ? '$red500' : '$green500';
return (
<MyFlatList
data={DATA}
bounces={false}
// horizontal
showsHorizontalScrollIndicator={false}
// numColumns={2}
sx={{
_web: {
props: { bg: '$red500', numColumns: 2 },
},
}}
renderItem={({ item }: { item: any }) => {
return (
<Box mr={'$2'} sx={{ props: {} }}>
<StyledText>Hello</StyledText>
</Box>
);
}}
keyExtractor={(item, index) => 'key' + index}
ItemSeparatorComponent={() => <Box w="4" />}
/>
<>
{/* <Theme name={'modern'}>
<Box states={{ hover: true }}></Box>
</Theme>
<Box states={{ hover: true }}></Box> */}

<Pressable
// onPress={() => handleTabChange(tabName)}
onPress={() => {
handleTabChange(!tabName);
}}
bg="$amber400"
h="$50"
w="$50"
>
<Text
// color={tabName ? '$red500' : '$green500'}
sx={{
// color: tabName ? '$red500' : '$green500',
_dark: {
// color: '$red500',
color: tabName ? '$red500' : '$green500',
},
}}
>
hello world
</Text>
</Pressable>
</>
);

// return <MyFlatList></MyFlatList>;
return <Text>hello</Text>;

return (
<>
<RNPressable
Expand Down
14 changes: 14 additions & 0 deletions example/storybook/src/components/nb.config.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -699,6 +699,20 @@ export const config = createConfig({
$borderRadius: '$radii$xl',
},
},
'modern': {
colors: {
$red500: 'green',
// $headerColor: '$colors$blue600',
// $textColor: '#ffffff',
// $borderColor: '$colors$gray400',
},
// borderWidths: {
// $borderWidth: '$space$0.5',
// },
// radii: {
// $borderRadius: '$radii$sm',
// },
},
},
components: {
Box: {
Expand Down
61 changes: 24 additions & 37 deletions example/storybook/src/configuration/Themes/index.stories.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,15 +3,14 @@ title: Themes | gluestack-style
description: gluestack-style allows you to easily create themes for your app with different values for a particular token for more flexibility and reusability of tokens.
---

import { Canvas, Meta, Story } from '@storybook/addon-docs';

<Meta title="configuration/Themes" />

import { styled, StyledProvider } from '@gluestack-style/react';
import { styled, StyledProvider, Theme } from '@gluestack-style/react';
import { Pressable, Text as RNText, View } from 'react-native';
import { Button, AppProvider, CodePreview } from '@gluestack/design-system';
import { config } from './config';
import { useState } from 'react';
import { config } from './config';
import { Canvas, Meta, Story } from '@storybook/addon-docs';

<Meta title="configuration/Themes" />

# Themes

Expand All @@ -24,13 +23,14 @@ import { useState } from 'react';
metaData={{
scope: {
styled,
Text,
View,
RNText,
Pressable,
Theme,
Provider: StyledProvider,
config: config(),
config: config,
useState,
Theme,
},
code: `
function App() {
Expand Down Expand Up @@ -66,10 +66,8 @@ import { useState } from 'react';
);
const Box = styled(View, {});
const Text = styled(RNText, { color: '$textColor' });
const [theme, setTheme] = React.useState('2000s');
const themes = ['2000s', '2010s', '2020s'];
return (
<Provider config={config}>
<Provider config={config()}>
<View
style={{
justifyContent: 'center',
Expand Down Expand Up @@ -114,25 +112,13 @@ import { useState } from 'react';
w="$full"
bg="$headerColor"
>
<Text color="$textColor">Explorer from {theme}</Text>
<Text color="$textColor">Explorer</Text>
<Box flex={1}></Box>
<Text>x</Text>
</Box>
</Box>
</Theme>
</Box>
<Box flexDirection="row">
{themes.map((themeName) => (
<StyledLinkButton
key={themeName}
onPress={() => setTheme(themeName)}
size="sm"
bg={themeName !== theme ? '$backgroundDark300' : '$green400'}
>
<Text>{themeName}</Text>
</StyledLinkButton>
))}
</Box>
</View>
</Provider>
);
Expand Down Expand Up @@ -174,21 +160,20 @@ export const config = createConfig({
// ...
},
// ...
themes: {
classic:{
colors: {
$primary: '$colors.$brown400',
$secondary: '$colors.$brown100',
},
},
themes: {
classic: {
colors: {
$primary: '$colors.$brown400',
$secondary: '$colors.$brown100',
},
modern:{
colors: {
$primary: '$colors.$red400',
$secondary: '$colors.$red100',
},
},
modern: {
colors: {
$primary: '$colors.$red400',
$secondary: '$colors.$red100',
},
}
}
},
},
});
```
Expand All @@ -199,6 +184,8 @@ Now you have your themes defined, you can use them in your app. How to use it yo

To use a theme you need to import the `Theme` component from `@gluestack-style/react` package. **Theme** component accepts a `name` prop which is the name of the theme you want to use.

> **Important**: `Theme` adds a View to the DOM tree.
```tsx
import { styled, StyledProvider, Theme } from '@gluestack-style/react';
import { Pressable } from 'react-native';
Expand Down
Loading

0 comments on commit 8384571

Please sign in to comment.