Release/@gluestack style/react@1.0.32

.gitignore

@@ -8,6 +8,8 @@ node_modules
 # testing
 coverage
 
+logs/
+
 # next.js
 .next/
 .swc/

example/expo-router-example/.gitignore

@@ -38,4 +38,6 @@ yarn-error.*
 # The following patterns were generated by expo-cli
 
 expo-env.d.ts
-# @end expo-cli
+# @end expo-cli
+
+.gluestack

example/expo-router-example/app/(tabs)/index.tsx

@@ -1,161 +1,27 @@
-import { StyleSheet } from 'react-native';
 import React from 'react';
-import { Text, View, Pressable } from 'react-native';
-import { styled } from '@gluestack-style/react';
-import { Link } from 'expo-router';
+import { Text, View } from 'react-native';
+import { Theme, styled } from '@gluestack-style/react';
 
 const Box = styled(
   View,
   {
-    p: '$10',
-    bg: '$amber500',
-  },
-  {
-    componentName: 'Boxxx',
-  }
-);
-
-const StyledButton = styled(
-  Pressable,
-  {
-    'p': '$3',
-    'bg': '$blue500',
-    'variants': {
-      variant: {
-        solid: {
-          ':active': {
-            bg: '$pink500',
-          },
-          // '_text': {
-          //   ':active': {
-          //     bg: '$textLight0',
-          //   },
-          // },
-        },
-      },
-    },
-
-    'props': {
-      variant: 'solid',
-    },
-
-    ':disabled': {
-      opacity: 0.4,
+    _light: {
+      bg: '$amber400',
     },
+    p: '$10',
   },
   {
-    descendantStyle: ['_text'],
-    componentName: 'Button',
+    componentName: 'MyBox',
   }
 );
 
-const Button = ({ children, onPressIn, onPressOut, ...props }: any) => {
-  const [active, setActive] = React.useState(false);
-  return (
-    <StyledButton
-      role={props?.role || 'button'}
-      states={{
-        active,
-      }}
-      onPressIn={() => {
-        setActive(true);
-        onPressIn && onPressIn();
-      }}
-      onPressOut={() => {
-        setActive(false);
-        onPressOut && onPressOut();
-      }}
-      {...props}
-    >
-      {children}
-    </StyledButton>
-  );
-};
-
-const linkSx = {
-  props: {
-    as: View,
-  },
-};
-
-const WrapperComp = ({ children }: any) => {
-  console.log('herhehre');
-
-  React.useEffect(() => {
-    console.log('mounted');
-
-    return () => {
-      console.log('unmounted');
-    };
-  }, []);
-
-  return children;
-};
+const MyText = styled(Text, {});
 
 export default function TabOneScreen() {
-  // const [click, setClick] = React.useState(false);
   return (
-    <View style={styles.container}>
-      <Text style={styles.title}>dlfkvndlnv One</Text>
-      <Button
-        // onPressIn={() => setClick(true)}
-        // onPressOut={() => setClick(false)}
-        onPress={() => {
-          console.log('Hello word');
-        }}
-        sx={{
-          _text: {
-            // color: click ? '$red500' : '$amber500',
-            ':active': {
-              bg: '$textLight0',
-            },
-          },
-        }}
-      >
-        <Box
-          href="/modal"
-          sx={{
-            props: {
-              as: Link,
-            },
-          }}
-        />
-      </Button>
-      <Button
-        sx={{
-          _text: {
-            ':active': {
-              bg: '$textLight0',
-            },
-          },
-        }}
-      >
-        <Box
-          href="/modal"
-          as={Link}
-          sx={{
-            bg: '$red500',
-          }}
-        />
-      </Button>
-    </View>
+    <>
+      <Box $light-bg="pink" $t_modern-bg="purple" states={{ hover: true }} />
+      <MyText fontFamily="$body">hello</MyText>
+    </>
   );
 }
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-    gap: 12,
-  },
-  title: {
-    fontSize: 20,
-    fontWeight: 'bold',
-  },
-  separator: {
-    marginVertical: 30,
-    height: 1,
-    width: '80%',
-  },
-});

example/expo-router-example/app/_layout.tsx

@@ -52,7 +52,7 @@ function RootLayoutNav() {
   const colorScheme = useColorScheme();
 
   return (
-    <StyledProvider config={config.theme}>
+    <StyledProvider config={config} colorMode="light">
       <ThemeProvider value={colorScheme === 'dark' ? DarkTheme : DefaultTheme}>
         <Stack>
           <Stack.Screen name="(tabs)" options={{ headerShown: false }} />

example/expo-router-example/babel.config.js

@@ -1,23 +1,128 @@
 const path = require('path');
+const myBabel = require('../../packages/styled/babel-plugin-styled-resolver/src/index');
 
 module.exports = function (api) {
   api.cache(true);
   return {
     presets: ['babel-preset-expo'],
     plugins: [
-      [
-        'module-resolver',
-        {
-          alias: {
-            // For development, we want to alias the library to the source
-            ['@gluestack-style/react']: path.join(
-              __dirname,
-              '../../packages/react/src'
-            ),
-          },
-        },
-      ],
-      // Required for expo-router
+      // [
+      //   myBabel,
+      //   {
+      //     styled: [path.join(__dirname, '../../packages/styled/react/src')],
+      //   },
+      // ],
+      process.env.NODE_ENV !== 'production'
+        ? [
+            'module-resolver',
+            {
+              alias: {
+                '@gluestack-ui/themed': path.join(
+                  __dirname,
+                  '../../packages/themed/src'
+                ),
+                '@gluestack-ui/config': path.join(
+                  __dirname,
+                  '../../packages/config/src/gluestack-ui.config'
+                ),
+                '@gluestack-style/react': path.join(
+                  __dirname,
+                  '../../packages/styled/react/src'
+                ),
+                '@gluestack-style/animation-resolver': path.join(
+                  __dirname,
+                  '../../packages/styled/animation-resolver/src'
+                ),
+                '@gluestack-style/legend-motion-animation-driver': path.join(
+                  __dirname,
+                  '../../packages/styled/animation-legend-motion-driver/src'
+                ),
+                '@gluestack-style/babel-plugin-styled-resolver': path.join(
+                  __dirname,
+                  '../../packages/styled/babel-plugin-styled-resolver/src'
+                ),
+                '@react-native-aria/interactions': path.join(
+                  __dirname,
+                  '../../packages/react-native-aria/interactions/src'
+                ),
+                '@react-native-aria/button': path.join(
+                  __dirname,
+                  '../../packages/react-native-aria/button/src'
+                ),
+                '@react-native-aria/checkbox': path.join(
+                  __dirname,
+                  '../../packages/react-native-aria/checkbox/src'
+                ),
+                '@react-native-aria/combobox': path.join(
+                  __dirname,
+                  '../../packages/react-native-aria/combobox/src'
+                ),
+                '@react-native-aria/dialog': path.join(
+                  __dirname,
+                  '../../packages/react-native-aria/dialog/src'
+                ),
+                '@react-native-aria/disclosure': path.join(
+                  __dirname,
+                  '../../packages/react-native-aria/disclosure/src'
+                ),
+                '@react-native-aria/focus': path.join(
+                  __dirname,
+                  '../../packages/react-native-aria/focus/src'
+                ),
+                '@react-native-aria/listbox': path.join(
+                  __dirname,
+                  '../../packages/react-native-aria/listbox/src'
+                ),
+                '@react-native-aria/menu': path.join(
+                  __dirname,
+                  '../../packages/react-native-aria/menu/src'
+                ),
+                '@react-native-aria/overlays': path.join(
+                  __dirname,
+                  '../../packages/react-native-aria/overlays/src'
+                ),
+                '@react-native-aria/radio': path.join(
+                  __dirname,
+                  '../../packages/react-native-aria/radio/src'
+                ),
+                '@react-native-aria/separator': path.join(
+                  __dirname,
+                  '../../packages/react-native-aria/separator/src'
+                ),
+                '@react-native-aria/slider': path.join(
+                  __dirname,
+                  '../../packages/react-native-aria/slider/src'
+                ),
+                '@react-native-aria/switch': path.join(
+                  __dirname,
+                  '../../packages/react-native-aria/switch/src'
+                ),
+                '@react-native-aria/tabs': path.join(
+                  __dirname,
+                  '../../packages/react-native-aria/tabs/src'
+                ),
+                '@react-native-aria/toggle': path.join(
+                  __dirname,
+                  '../../packages/react-native-aria/toggle/src'
+                ),
+                '@react-native-aria/tooltip': path.join(
+                  __dirname,
+                  '../../packages/react-native-aria/tooltip/src'
+                ),
+                '@react-native-aria/utils': path.join(
+                  __dirname,
+                  '../../packages/react-native-aria/utils/src'
+                ),
+              },
+            },
+          ]
+        : [
+            'babel-plugin-react-docgen-typescript',
+            {
+              exclude: 'node_modules',
+            },
+          ],
+      '@babel/plugin-transform-modules-commonjs',
       'expo-router/babel',
     ],
   };