Merge pull request #408 from gluestack/patch

Patch
gluestack · Sep 8, 2023 · f31d20b · f31d20b
2 parents 60334ad + b89d21b
commit f31d20b
Show file tree

Hide file tree

Showing 4 changed files with 284 additions and 257 deletions.
diff --git a/example/storybook/src/api/DescendantsStyles/ContextBasedStyles.tsx b/example/storybook/src/api/DescendantsStyles/ContextBasedStyles.tsx
@@ -22,7 +22,7 @@ import {
 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';
+import { AlertCircle, Circle, Sun } from 'lucide-react-native';
 
 import { AnimationResolver } from '@gluestack-style/animation-plugin';
 
@@ -55,12 +55,12 @@ const Pressable = styled(
     //     test: 'sm',
     //   },
     // },
-    _dark: {
-      // bg: '$amber200',
-      props: {
-        bg: 3 < 2 ? '$yellow400' : 'blue',
-      },
-    },
+    // _dark: {
+    //   // bg: '$amber200',
+    //   props: {
+    //     bg: 3 < 2 ? '$yellow400' : 'blue',
+    //   },
+    // },
 
     // '@xl': {
     //   props: {
@@ -115,6 +115,7 @@ const Text = styled(
 const StyledIcon = styled(
   AsForwarder,
   {
+    bg: '$red500',
     variants: {
       size: {
         sm: {
@@ -131,11 +132,15 @@ const StyledIcon = styled(
           width: '$4',
           height: '$4',
         },
+        lg: {
+          // props: {
+          //   size: 32,
+          // },
+          width: '$6',
+          height: '$6',
+        },
       },
     },
-    props: {
-      size: 'sm',
-    },
   },
   {
     componentName: 'MyIcon',
@@ -145,24 +150,6 @@ const StyledIcon = styled(
 const MyIcon = styled(
   StyledIcon,
   {
-    variants: {
-      size: {
-        sm: {
-          width: 12,
-          height: 12,
-          // props: {
-          //   size: 32,
-          // },
-        },
-        md: {
-          width: 32,
-          height: 32,
-          // props: {
-          //   size: 32,
-          // },
-        },
-      },
-    },
     props: {
       size: 'md',
     },
@@ -180,10 +167,57 @@ const MyIcon = styled(
 //   'composed here'
 // );
 
+const Box1 = styled(
+  View,
+  {
+    // bg: '$amber400',
+    // h: 100,
+    // w: 100,
+    // _dark: {
+    //   props: {
+    //     bg: '$red500',
+    //   },
+    // },
+    _text: {
+      color: '$red500',
+    },
+  },
+  {
+    descendantStyle: ['_text'],
+  }
+);
+
+const Text1 = styled(Text, {}, { ancestorStyle: ['_text'] });
 export function ContextBasedStyles() {
   return (
     <Wrapper colorMode="dark">
-      <Pressable></Pressable>
+      <MyIcon as={Sun} size={32}></MyIcon>
+      {/* <ContextBasedStylesContent></ContextBasedStylesContent> */}
+      {/* <Pressable></Pressable> */}
+      {/* <Box1
+        sx={{
+          'bg': '$amber400',
+          'h': 100,
+          'w': 100,
+          // '_dark': {
+          'props': {
+            bg: '$red500',
+            // },
+          },
+          // },
+          ':hover': {
+            bg: '$green400',
+          },
+          '_text': {
+            props: {
+              color: '$white',
+            },
+          },
+        }}
+        states={{ hover: true }}
+      >
+        <Text1>Hello</Text1>
+      </Box1> */}
       {/* <MyIcon bg="$blue500" size="sm" />
       <StyledIcon as={MyIcon} bg="$red500" size="sm" /> */}
     </Wrapper>
@@ -287,7 +321,7 @@ const MyList = React.memo(() => {
   }, []);
   const data = useMemo(
     () =>
-      Array(100)
+      Array(1)
         .fill(0)
         .map((_, index) => `Item ${index}`),
     []

diff --git a/packages/react/package.json b/packages/react/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@gluestack-style/react",
   "description": "A universal & performant styling library for React Native, Next.js & React",
-  "version": "0.2.34",
+  "version": "0.2.38",
   "keywords": [
     "React Native",
     "Next.js",

diff --git a/packages/react/src/plugins/font-resolver.tsx b/packages/react/src/plugins/font-resolver.tsx
@@ -278,8 +278,6 @@ export class FontResolver implements IStyledPlugin, FontPlugin {
 
     //@ts-ignore
     Comp.isStyledComponent = NewComp.isStyledComponent;
-    //@ts-ignore
-    Comp.isComposedComponent = NewComp.isComposedComponent;
 
     return Comp;
   }