Release/@gluestack style/[email protected]

example/storybook/src/api/DescendantsStyles/ContextBasedStyles.tsx

@@ -15,28 +15,31 @@ import {
 } from 'react-native';
 import { AsForwarder, styled, Theme } from '@gluestack-style/react';
 import { Wrapper } from '../../components/Wrapper';
+import { AddIcon, Box, Icon } from '@gluestack/design-system';
 // import { AddIcon } from '@gluestack/design-system';
+import { AlertCircle, Circle } from 'lucide-react-native';
 
 const Pressable = styled(
   RNPressable,
   {
-    'bg': '$red500',
+    bg: '$red500',
+    p: '$2',
     // 'bg': '$red600',
-    'w': 100,
-    'h': 100,
-    '_light': {
-      bg: '$red600',
-    },
-    '@base': {
-      bg: '$blue500',
-    },
-    ':hover': {
-      bg: '$red500',
-    },
+    // 'w': 100,
+    // 'h': 100,
+    // '_light': {
+    //   bg: '$red600',
+    // },
+    // '@base': {
+    //   bg: '$blue500',
+    // },
+    // ':hover': {
+    //   bg: '$red500',
+    // },
   },
   {
     componentName: 'Pressable',
-    descendantStyle: ['_text'],
+    // descendantStyle: ['_text'],
   }
 );
 
@@ -48,6 +51,43 @@ const Text = styled(
   }
 );
 
+const MyIcon = styled(
+  AsForwarder,
+  {
+    variants: {
+      size: {
+        sm: {
+          width: 32,
+          height: 32,
+          props: {
+            size: 32,
+          },
+        },
+        md: {
+          props: {
+            size: 32,
+          },
+          width: '$4',
+          height: '$4',
+        },
+      },
+    },
+    props: {
+      size: 'sm',
+    },
+  },
+  {
+    componentName: 'MyIcon',
+  }
+);
+
+const MyNewIcon = styled(
+  MyIcon,
+  {},
+  {
+    componentName: 'MyNewIcon',
+  }
+);
 export function ContextBasedStyles() {
   return (
     <Wrapper colorMode="dark">
@@ -60,48 +100,52 @@ export function ContextBasedStylesContent() {
   // return <MyFlatList></MyFlatList>;
 
   const [tabName, setTabName] = useState(true);
+  const [state, setState] = useState(false);
 
   const handleTabChange = (tabName: any) => {
     setTabName(tabName);
   };
 
   // const color = tabName ? '$red500' : '$green500';
+  // return (
+  //   <>
+  //     {/* <Theme name={'modern'}>
+  //       <Box states={{ hover: true }}></Box>
+  //     </Theme>
+  //     <Box states={{ hover: true }}></Box> */}
+  //     {/* <Icon as={Circle} size="md" color="$red500" />
+  //     <Pressable
+  //       onPress={() => {
+  //         handleTabChange(!tabName);
+  //       }}
+  //       bg="$amber400"
+  //       h="$50"
+  //       w="$50"
+  //     >
+  //       <Text
+  //         sx={{
+  //           _dark: {
+  //             color: tabName ? '$red500' : '$green500',
+  //           },
+  //         }}
+  //       >
+  //         hello world
+  //       </Text>
+  //     </Pressable> */}
+  //   </>
+  // );
+
   return (
     <>
-      {/* <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>
+      <MyNewIcon as={AlertCircle} size="sm"></MyNewIcon>
     </>
   );
-
   return (
     <>
       <RNPressable
-        onPress={handlePress}
+        onPress={() => {
+          setState(!state);
+        }}
         style={{
           height: 50,
           width: 200,
@@ -111,16 +155,16 @@ export function ContextBasedStylesContent() {
           left: 0,
         }}
       >
-        <Text style={{ color: 'black' }}>Mount</Text>
+        <Text style={{ color: 'black' }}>{state ? 'Unmount' : 'Mount'}</Text>
       </RNPressable>
       {/* <MyPressable>
         <RNText>Hello</RNText>
       </MyPressable> */}
       {/* {state && <MyList />
       } */}
-      <Box pointerEvents="none" style={{ display: state ? 'flex' : 'none' }}>
-        <MyList />
-      </Box>
+      {/* <Box pointerEvents="none" style={{ display: state ? 'flex' : 'none' }}> */}
+      {state && <MyList />}
+      {/* </Box> */}
     </>
   );
 }
@@ -132,29 +176,34 @@ const MyList = React.memo(() => {
   }, []);
   const data = useMemo(
     () =>
-      Array(2000)
+      Array(1)
         .fill(0)
         .map((_, index) => `Item ${index}`),
     []
   );
 
   const renderItem = useCallback(
     (item: any) => (
-      <MyPressable key={item}>
-        <RNText>{item}</RNText>
-      </MyPressable>
+      <Pressable
+        key={item}
+        sx={{
+          bg: '$amber400',
+        }}
+      >
+        {/* <RNText>{item}</RNText> */}
+      </Pressable>
     ),
     []
   );
 
-  const renderItem2 = useCallback(
-    (item: any) => (
-      <RNPressable key={item} style={styleshet.style}>
-        <RNText>{item}</RNText>r
-      </RNPressable>
-    ),
-    []
-  );
+  // const renderItem2 = useCallback(
+  //   (item: any) => (
+  //     <RNPressable key={item} style={styleshet.style}>
+  //       <RNText>{item}</RNText>r
+  //     </RNPressable>
+  //   ),
+  //   []
+  // );
   return <>{data.map(renderItem)}</>;
 });
 export default ContextBasedStyles;

example/storybook/src/configuration/Themes/index.stories.mdx

@@ -30,7 +30,6 @@ import { Canvas, Meta, Story } from '@storybook/addon-docs';
         Provider: StyledProvider,
         config: config,
         useState,
-        Theme,
       },
       code: `
         function App() {
@@ -89,16 +88,15 @@ import { Canvas, Meta, Story } from '@storybook/addon-docs';
                 </Box>
                 <Box
                   bg="$gray100"
-                  h="440px"
-                  w="600px"
+                  h="400px"
+                  w="350px"
                   alignItems="center"
                   justifyContent="center"
                 >
                   <Theme {...props}>
                     <Box
-                      mx="auto"
                       h="200px"
-                      w="400px"
+                      w="200px"
                       bg="$backgroundColor"
                       borderWidth="$borderWidth"
                       borderColor="$borderColor"

example/ui-examples-babel/App.tsx

@@ -1,22 +1,58 @@
 import React from 'react';
-import { View } from 'react-native';
-import { config } from './gluestack-ui.config';
-import { styled, StyledProvider } from '../../packages/react';
-// import { Box, Heading } from './src/core';
+import { useState } from 'react';
+import { Button, StyleSheet, Text, View } from 'react-native';
 
-const Box = styled(View, {
-  bg: '$primary100',
-  h: '$10',
-  w: '$10',
-});
+import Gluestack from './BenchGlueStack';
+import ReactNative from './BenchReactNative';
+import TimedRender from './TimedRender';
 
 export default function App() {
+  const [styleType, setStyleType] = useState<any>(undefined);
+
+  const onStyleTypePress = (curry) => () => {
+    setStyleType(curry);
+  };
+
+  const renderStyleLibrary = () => {
+    switch (styleType) {
+      case 'Gluestack':
+        return <Gluestack />;
+      case 'React Native':
+        return <ReactNative />;
+      default:
+        return null;
+    }
+  };
+
   return (
-    <>
-      {/* gluestack-ui provider */}
-      <StyledProvider config={config.theme}>
-        <Box bg="$red500" />
-      </StyledProvider>
-    </>
+    <View style={styles.container}>
+      <Text style={styles.text}>Tap a style library to start rendering</Text>
+      <Button title="React Native" onPress={onStyleTypePress('React Native')} />
+      <Button title="Gluestack" onPress={onStyleTypePress('Gluestack')} />
+      {styleType ? (
+        <TimedRender key={styleType}>
+          <Text style={styles.text}>
+            Rendering with <Text style={styles.bold}>{styleType}</Text>
+          </Text>
+        </TimedRender>
+      ) : null}
+      {renderStyleLibrary()}
+    </View>
   );
 }
+
+const styles = StyleSheet.create({
+  container: {
+    // alignItems: "center",
+    backgroundColor: '#fff',
+    // flex: 1,
+    // justifyContent: "center",
+  },
+  text: {
+    marginVertical: 12,
+  },
+  bold: {
+    fontWeight: 'bold',
+    fontSize: 16,
+  },
+});