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

Commit

Permalink
Merge branch 'patch' of github.com:gluestack/gluestack-style into fea…
Browse files Browse the repository at this point in the history
…t/create-config-style-api
  • Loading branch information
ankit-tailor committed Sep 26, 2023
2 parents 4c5df7e + fc0bcc4 commit e1cb19c
Show file tree
Hide file tree
Showing 47 changed files with 2,216 additions and 666 deletions.
9 changes: 5 additions & 4 deletions example/storybook/.ondevice/storybook.requires.js
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,8 @@ import {
addArgsEnhancer,
clearDecorators,
} from '@storybook/react-native';

import { config } from '../src/components/nb.config';
console.log(Object.keys(config));
global.STORIES = [
{
titlePrefix: '',
Expand Down Expand Up @@ -52,8 +53,8 @@ const getStories = () => {
// "./src/api/AsForwarder/AsForwarder.stories.tsx": require("../src/api/AsForwarder/AsForwarder.stories.tsx"),
// "./src/api/ColorModeBasedStyles/ColorMode.stories.tsx": require("../src/api/ColorModeBasedStyles/ColorMode.stories.tsx"),
// "./src/api/CompoundVariants/CompoundVarinats.stories.tsx": require("../src/api/CompoundVariants/CompoundVarinats.stories.tsx"),
'./src/api/createStyled/createStyled.stories.tsx': require('../src/api/createStyled/createStyled.stories.tsx'),
'./src/api/DescendantsStyles/ContextBasedStyles.stories.tsx': require('../src/api/DescendantsStyles/ContextBasedStyles.stories.tsx'),
// './src/api/createStyled/createStyled.stories.tsx': require('../src/api/createStyled/createStyled.stories.tsx'),
// './src/api/DescendantsStyles/ContextBasedStyles.stories.tsx': require('../src/api/DescendantsStyles/ContextBasedStyles.stories.tsx'),
// "./src/api/MultipleProvder/MultipleProvider.stories.tsx": require("../src/api/MultipleProvder/MultipleProvider.stories.tsx"),
// "./src/api/PlatformBasedStyles/PlatformBasedStyles.stories.tsx": require("../src/api/PlatformBasedStyles/PlatformBasedStyles.stories.tsx"),
// "./src/api/PropertyResolver/PropertyResolver.stories.tsx": require("../src/api/PropertyResolver/PropertyResolver.stories.tsx"),
Expand All @@ -65,7 +66,7 @@ const getStories = () => {
// "./src/api/Typescript/Typescript.stories.tsx": require("../src/api/Typescript/Typescript.stories.tsx"),
// "./src/api/UtilityFunctions/UtilityFunctions.stories.tsx": require("../src/api/UtilityFunctions/UtilityFunctions.stories.tsx"),
// "./src/api/Variants/BaseStyleVariantSizes.stories.tsx": require("../src/api/Variants/BaseStyleVariantSizes.stories.tsx"),
// "./src/plugins/AnimationPlugin/Animation.stories.tsx": require("../src/plugins/AnimationPlugin/Animation.stories.tsx"),
'./src/plugins/AnimationPlugin/Animation.stories.tsx': require('../src/plugins/AnimationPlugin/Animation.stories.tsx'),
// "./src/plugins/CSSVariables/CSSVariables.stories.tsx": require("../src/plugins/CSSVariables/CSSVariables.stories.tsx"),
// "./src/plugins/FontsPlugin/FontsPlugin.stories.tsx": require("../src/plugins/FontsPlugin/FontsPlugin.stories.tsx"),
};
Expand Down
17 changes: 11 additions & 6 deletions example/storybook/babel.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ module.exports = function (api) {
return {
presets: ['babel-preset-expo'],
plugins: [
'react-native-reanimated/plugin',
process.env.NODE_ENV !== 'production'
? [
'module-resolver',
Expand All @@ -15,14 +16,18 @@ module.exports = function (api) {
__dirname,
'../../packages/react/src'
),
['@gluestack-style/animation-plugin']: path.join(
['@gluestack-style/legend-motion-animation-driver']: path.join(
__dirname,
'../../packages/animation-plugin/src'
'../../packages/animation-legend-motion-driver/src'
),
['@gluestack-style/moti-driver']: path.join(
__dirname,
'../../packages/animation-moti-animation-driver/src'
),
['@gluestack-style/animation-resolver']: path.join(
__dirname,
'../../packages/animation-resolver/src'
),
// ['@gluestack-style/animation-plugin']: path.join(
// __dirname,
// '../../packages/animation-plugin/src'
// ),
// ['@dank-style/react']: path.join(
// __dirname,
// '../../packages/react/src'
Expand Down
7 changes: 6 additions & 1 deletion example/storybook/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,6 @@
},
"dependencies": {
"@expo/html-elements": "^0.4.2",
"@gluestack-style/animation-plugin": "latest",
"@gluestack-style/react": "^0.2.11-alpha.0",
"@gluestack-ui/actionsheet": "^0.2.16",
"@gluestack-ui/alert-dialog": "^0.1.14",
Expand Down Expand Up @@ -53,8 +52,11 @@
"expo-status-bar": "~1.4.2",
"fs": "^0.0.1-security",
"lucide-react-native": "^0.236.0",
"moti": "^0.26.0",
"prism-react-renderer": "^1.3.5",
"react": "^18.2.0",
"react-native-gesture-handler": "^2.13.1",
"react-native-reanimated": "~2.12.0",
"react-native-safe-area-context": "^4.4.1",
"react-native-svg": "13.4.0",
"react-native-web": "^0.19.7",
Expand Down Expand Up @@ -95,6 +97,9 @@
"typescript": "^5.1.6"
},
"peerDependencies": {
"@gluestack-style/legend-motion-animation-driver": "*",
"@gluestack-style/moti-animation-driver": "*",
"@gluestack-style/animation-resolver": "*",
"react": "*",
"react-dom": "*",
"react-native": "*",
Expand Down
74 changes: 5 additions & 69 deletions example/storybook/src/api/DescendantsStyles/ContextBasedStyles.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -11,16 +11,14 @@ import {
Pressable as RNPressable,
Text as RNText,
StyleSheet,
Switch,
View,
} from 'react-native';
import {
AsForwarder,
createStyled,
styled,
styled1,
Theme,
useBreakpointValue,
useColorMode,
useStyled,
useToken,
} from '@gluestack-style/react';
Expand All @@ -30,7 +28,6 @@ import { AddIcon, Box, Icon } from '@gluestack/design-system';
import { AlertCircle, Circle, Sun } from 'lucide-react-native';

import { AnimationResolver } from '@gluestack-style/animation-plugin';
import { ScrollView } from 'react-native';

const styleshet = StyleSheet.create({
style: {
Expand All @@ -43,16 +40,6 @@ const Pressable = styled(
{
bg: '$red200',
p: '$2',
props: {
variant: 'solid',
},
variants: {
variant: {
solid: {
bg: '$red400',
},
},
},
},
{
componentName: 'Pressable',
Expand Down Expand Up @@ -196,53 +183,10 @@ const Text1 = styled(
},
{ ancestorStyle: ['_text'], componentName: 'TEXT' }
);

const StyledSwitch = styled(ScrollView, {});

export function ContextBasedStyles() {
const [state, setState] = useState(false);

return (
<Wrapper colorMode={state ? 'dark' : 'light'}>
<Pressable
onPress={() => {
setState(!state);
}}
>
<Text>color mode: {state ? 'dark' : 'light'}</Text>
</Pressable>

<StyledSwitch
height={200}
width={200}
sx={{
props: {
contentContainerStyle: {
// backgroundColor: 'blue',
},
},
}}

// trackColor={{ false: '$green500', true: '$primary600' }}
// thumbColor="$red500"
// sx={{
// props: { trackColor: { false: '$blue500', true: '$primary600' } },
// }}
>
<View
style={{ height: 100, width: 100, backgroundColor: 'red' }}
></View>
</StyledSwitch>

{/*
<StyledSwitch
// trackColor={{ false: '$green500', true: '$primary600' }}
thumbColor="$red500"
sx={{
props: { trackColor: { false: '$blue500', true: '$primary600' } },
}}
></StyledSwitch> */}

<Wrapper colorMode="dark">
<MyIcon as={Sun} size={32}></MyIcon>
<ContextBasedStylesContent></ContextBasedStylesContent>
{/* <Pressable></Pressable> */}
{/* <Box1
Expand Down Expand Up @@ -285,12 +229,10 @@ export function ContextBasedStylesContent() {
setTabName(tabName);
};

const value = useBreakpointValue({
base: true,
sm: false,
});
const value = useToken('colors', 'red500');

console.log(value, 'value here');

// const color = tabName ? '$red500' : '$green500';
// return (
// <>
Expand Down Expand Up @@ -357,12 +299,6 @@ export function ContextBasedStylesContent() {
const renderItem = (item: any) => (
<Pressable
key={item}
variant="solid"
sx={{
props: {
variant: 'solid',
},
}}
// sx={{
// bg: '$amber400',
// }}
Expand Down
5 changes: 4 additions & 1 deletion example/storybook/src/components/nb.config.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
import { AnimationResolver } from '@gluestack-style/animation-plugin';
import { AnimationResolver } from '@gluestack-style/animation-resolver';
import { MotionAnimationDriver } from '@gluestack-style/legend-motion-animation-driver';
// import { MotiAnimationDriver } from '@gluestack-style/moti-animation-driver';
import { createConfig } from '@gluestack-style/react';

export const config = createConfig({
Expand Down Expand Up @@ -715,6 +717,7 @@ export const config = createConfig({
// },
},
},
plugins: [new AnimationResolver(MotionAnimationDriver)],
components: {
Box: {
theme: {
Expand Down
38 changes: 20 additions & 18 deletions example/storybook/src/plugins/AnimationPlugin/AnimationPlugin.tsx
Original file line number Diff line number Diff line change
@@ -1,16 +1,16 @@
import React from 'react';
import { Wrapper } from '../../components/Wrapper';
import { Motion } from '@legendapp/motion';
import { Pressable, View } from 'react-native';
import { FontResolver, styled } from '@gluestack-style/react';
import { AnimationResolver } from '@gluestack-style/animation-plugin';
import { Pressable, View, Text } from 'react-native';
import { styled } from '@gluestack-style/react';
import {
AnimatedImage,
AnimatedAnimatePresence,
} from '@gluestack-style/animation-resolver';

const images = [require('./1.png'), require('./2.png'), require('./3.png')];

const Box = styled(View, {});

const StyledMotionImage = styled(
Motion.Image,
AnimatedImage,
{
':animate': {
zIndex: 1,
Expand All @@ -19,9 +19,7 @@ const StyledMotionImage = styled(
},
},
{},
{
plugins: [new AnimationResolver({})],
}
{}
);

export function AnimationPlugin() {
Expand All @@ -42,18 +40,19 @@ export function AnimationPlugin() {
'aspectRatio': 1 * 1.4,
}}
>
{/* @ts-ignore */}
<StyledMotionImage.AnimatePresence>
<AnimatedAnimatePresence>
<StyledMotionImage
style={{
width: '100%',
height: '100%',
position: 'absolute',
}}
// For Mobile
// source={images[imageIndex]}
// For Web
source={{ uri: images[imageIndex] }}
key={`image-${imageIndex}-${Math.random()}`}
sx={{
// @ts-ignore
':initial': {
x: xPosition,
opacity: 0,
Expand All @@ -64,12 +63,15 @@ export function AnimationPlugin() {
opacity: 0,
},
':transition': {
x: { type: 'spring', stiffness: 200, damping: 23 },
x: {
type: 'spring',
stiffness: 200,
damping: 23,
},
},
}}
/>
{/* @ts-ignore */}
</StyledMotionImage.AnimatePresence>
</AnimatedAnimatePresence>
</Box>
<Pressable
accessibilityRole="button"
Expand All @@ -89,7 +91,7 @@ export function AnimationPlugin() {
setImageIndex((prev) => (prev + 1) % images.length);
}}
>
{'‣'}
<Text>{'‣'}</Text>
</Pressable>
<Pressable
accessibilityRole="button"
Expand All @@ -110,7 +112,7 @@ export function AnimationPlugin() {
setImageIndex((prev) => (prev - 1 + images.length) % images.length);
}}
>
{'‣'}
<Text>{'‣'}</Text>
</Pressable>
</Wrapper>
);
Expand Down
10 changes: 8 additions & 2 deletions example/storybook/tsconfig.json
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,14 @@
"baseUrl": ".",
"paths": {
"@gluestack-style/react": ["../../packages/react/src"],
"@gluestack-style/animation-plugin": [
"../../packages/animation-plugin/src"
"@gluestack-style/legend-motion-animation-driver": [
"../../packages/animation-legend-motion-driver/src"
],
"@gluestack-style/moti-animation-driver": [
"../../packages/animation-moti-driver/src"
],
"@gluestack-style/animation-resolver": [
"../../packages/animation-resolver/src"
],
"react-native": ["./node_modules/react-native-web"]
},
Expand Down
25 changes: 13 additions & 12 deletions example/ui-examples-babel/App.tsx
Original file line number Diff line number Diff line change
@@ -1,29 +1,30 @@
// @ts-nocheck
import React, {
useCallback,
useEffect,
useLayoutEffect,
useMemo,
useRef,
// useCallback,
// useEffect,
// useLayoutEffect,
// useMemo,
// useRef,
useState,
} from 'react';

import {
Pressable as RNPressable,
Text as RNText,
StyleSheet,
// Pressable as RNPressable,
// Text as RNText,
// StyleSheet,
View,
Pressable,
Text,
} from 'react-native';
import {
AsForwarder,
// AsForwarder,
styled,
Theme,
// Theme,
StyledProvider,
} from '@gluestack-style/react';
import { config } from './gluestack-ui.config';
import { createMotionAnimatedComponent, Motion } from '@legendapp/motion';
import { AnimationResolver } from '@gluestack-style/animation-plugin';
// import { createMotionAnimatedComponent, Motion } from '@legendapp/motion';
// import { AnimationResolver } from '@gluestack-style/animation-plugin';

const Box = styled(View, {
bg: '$yellow500',
Expand Down
Loading

0 comments on commit e1cb19c

Please sign in to comment.