Merge pull request #303 from gluestack/release/@gluestack-style/react…

…@0.1.32 Release/@gluestack style/[email protected]
gluestack · Jul 11, 2023 · bc824a8 · bc824a8
2 parents c97cec8 + e7e7b01
commit bc824a8
Show file tree

Hide file tree

Showing 15 changed files with 351 additions and 121 deletions.
diff --git a/example/babel-plugin-styled-resolver-expo/package.json b/example/babel-plugin-styled-resolver-expo/package.json
@@ -11,7 +11,7 @@
     "build": "bob build"
   },
   "dependencies": {
-    "@gluestack-style/react": "^0.1.31",
+    "@gluestack-style/react": "^0.1.32",
     "expo": "~47.0.8",
     "expo-status-bar": "~1.4.2",
     "find-yarn-workspace-root": "^2.0.0"
@@ -27,10 +27,10 @@
     "babel-plugin-relative-path-import": "^2.0.1",
     "ts-loader": "~8.2.0",
     "typescript": "^4.6.3",
-    "@gluestack-style/react": "^0.1.31"
+    "@gluestack-style/react": "^0.1.32"
   },
   "peerDependencies": {
-    "@gluestack-style/react": "^0.1.31",
+    "@gluestack-style/react": "^0.1.32",
     "react": "*",
     "react-dom": "*",
     "react-native": "*",

diff --git a/example/expo-app/package.json b/example/expo-app/package.json
@@ -11,7 +11,7 @@
   },
   "dependencies": {
     "@gluestack-style/babel-plugin-styled-resolver": "^0.1.0",
-    "@gluestack-style/react": "^0.1.31",
+    "@gluestack-style/react": "^0.1.32",
     "expo": "~47.0.12",
     "expo-status-bar": "~1.4.2",
     "react": "18.1.0",

diff --git a/example/next/package.json b/example/next/package.json
@@ -23,7 +23,7 @@
     "react-native-vector-icons": "^9.1.0",
     "react-native-vector-icons-for-web": "^0.1.7",
     "react-native-web-linear-gradient": "^1.1.2",
-    "@gluestack-style/react": "^0.1.31",
+    "@gluestack-style/react": "^0.1.32",
     "@gluestack-style/babel-plugin-styled-resolver": "^0.1.6"
   },
   "devDependencies": {

diff --git a/example/storybook/.ondevice/storybook.requires.js b/example/storybook/.ondevice/storybook.requires.js
@@ -53,7 +53,7 @@ const getStories = () => {
     // require('../src/recipes/ButtonStateProps/ButtonStateProps.stories.tsx'),
     // require('../src/recipes/ButtonVariant/ButtonVariant.stories.tsx'),
     // require('../src/api/ColorModeBasedStyles/ColorMode.stories.tsx'),
-    // require('../src/recipes/Descendants/Descendants.stories.tsx'),
+    require('../src/api/DescendantsStyles/ContextBasedStyles.stories.tsx'),
     // require('../src/recipes/Icons/Icons.stories.tsx'),
     // require('../src/recipes/LinearGradient/LinearGradient.stories.tsx'),
     // require('../src/recipes/MediaQuery/MediaQuery.stories.tsx'),

diff --git a/example/storybook/.storybook/main.js b/example/storybook/.storybook/main.js
@@ -31,6 +31,8 @@ module.exports = {
       include: [
         // path.resolve('../../', 'node_modules/@universa11y'),
         path.resolve('../../', 'node_modules/@gluestack-ui'),
+        path.resolve('./', 'node_modules/@gluestack-ui'),
+
         path.resolve('../../', 'node_modules/@gluestack/design-system'),
         path.resolve(
           '../../',

diff --git a/example/storybook/package.json b/example/storybook/package.json
@@ -20,7 +20,7 @@
   },
   "dependencies": {
     "@gluestack-style/animation-plugin": "^0.1.7",
-    "@gluestack-style/react": "^0.1.31",
+    "@gluestack-style/react": "^0.1.32",
     "@gluestack/design-system": "latest",
     "@legendapp/motion": "^2.2.0",
     "@react-native-async-storage/async-storage": "~1.17.3",
@@ -43,7 +43,7 @@
   "devDependencies": {
     "@babel/core": "^7.19.3",
     "@gluestack-style/animation-plugin": "^0.1.7",
-    "@gluestack-style/react": "^0.1.31",
+    "@gluestack-style/react": "^0.1.32",
     "@storybook/addon-actions": "^6.5.14",
     "@storybook/addon-controls": "^6.5.14",
     "@storybook/addon-docs": "^6.5.15",
@@ -69,7 +69,7 @@
     "typescript": "4.9.4"
   },
   "peerDependencies": {
-    "@gluestack-style/react": "^0.1.31",
+    "@gluestack-style/react": "^0.1.32",
     "react": "*",
     "react-dom": "*",
     "react-native": "*",

diff --git a/example/storybook/src/api/DescendantsStyles/ContextBasedStyles.tsx b/example/storybook/src/api/DescendantsStyles/ContextBasedStyles.tsx
@@ -3,14 +3,15 @@ import React from 'react';
 import { Pressable, Text } from 'react-native';
 import { AsForwarder, styled } from '@gluestack-style/react';
 import { Wrapper } from '../../components/Wrapper';
-import { AddIcon } from '@gluestack/design-system';
+// import { AddIcon } from '@gluestack/design-system';
+import { createIcon } from '@gluestack-ui/icon';
+import { Svg } from 'react-native-svg';
 
 const StyledButton = styled(
   Pressable,
   {
     backgroundColor: '$primary500',
     p: '$2',
-
     _icon: {
       props: {
         color: '$blue500',
@@ -23,19 +24,53 @@ const StyledButton = styled(
 );
 
 const StyledIcon = styled(
-  AsForwarder,
-  {},
+  Text,
+  {
+    color: 'red',
+  },
   {
     ancestorStyle: ['_icon'],
-    DEBUG: 'FORWARDER ICON',
+    DEBUG: 'STYLED_ICON',
+  }
+);
+
+const MyText = styled(
+  StyledIcon,
+  {
+    props: {
+      color: '$white',
+    },
+  },
+  {
+    // ancestorStyle: ['_icon'],
+    DEBUG: 'MYTEXT',
   }
 );
+// const StyledIcon = styled(
+//   AsForwarder,
+//   {},
+//   {
+//     ancestorStyle: ['_icon'],
+//     DEBUG: 'FORWARDER ICON',
+//   }
+// );
+
+// const AddIcon = createIcon({
+//   Root: StyledIcon,
+//   viewBox: '0 0 24 24',
+//   d: 'M13.25 10.75V2H10.75V10.75H2V13.25H10.75V22H13.25V13.25H22V10.75H13.25Z',
+// });
+
+// AddIcon.displayName = 'AddIcon';
 
 export function ContextBasedStyles() {
   return (
     <Wrapper>
       <StyledButton>
-        <StyledIcon as={AddIcon} color="$amber500" />
+        {/* <StyledIcon as={MyText} color="$amber500">
+          Text
+        </StyledIcon> */}
+        <MyText color="$amber400">Text</MyText>
       </StyledButton>
     </Wrapper>
   );

diff --git a/example/storybook/src/components/nb.config.ts b/example/storybook/src/components/nb.config.ts
@@ -1,6 +1,6 @@
 import { createConfig } from '@gluestack-style/react';
 
-export const config = createConfig({
+export const config = {
   aliases: {
     bg: 'backgroundColor',
     backgroundColor: 'backgroundColor',
@@ -645,46 +645,46 @@ export const config = createConfig({
       100: 1,
     },
   } as const,
-  globalStyle: {
-    variants: {
-      variant: {
-        '1': {
-          bg: '$red200',
-        },
-        '2': {
-          bg: '$red200',
-        },
-      },
-      dropShadow: {
-        '1': {
-          bg: '$red200',
-        },
-        '2': {
-          bg: '$red200',
-        },
-      },
-      softShadow: {
-        '1': {
-          bg: '$red200',
-        },
-        '2': {
-          bg: '$red200',
-        },
-      },
-      //   variant: {
-      //     primary: {
-      //       bg: 'red'
-      //     }
-      //   }
+  // globalStyle: {
+  //   variants: {
+  //     variant: {
+  //       '1': {
+  //         bg: '$red200',
+  //       },
+  //       '2': {
+  //         bg: '$red200',
+  //       },
+  //     },
+  //     dropShadow: {
+  //       '1': {
+  //         bg: '$red200',
+  //       },
+  //       '2': {
+  //         bg: '$red200',
+  //       },
+  //     },
+  //     softShadow: {
+  //       '1': {
+  //         bg: '$red200',
+  //       },
+  //       '2': {
+  //         bg: '$red200',
+  //       },
+  //     },
+  //     //   variant: {
+  //     //     primary: {
+  //     //       bg: 'red'
+  //     //     }
+  //     //   }
 
-      //   // test: {
-      //   //   primary: {
-      //   //     bg: 'red'
-      //   //   }
-      //   // }
-    },
-  } as const,
-} as const);
+  //     //   // test: {
+  //     //   //   primary: {
+  //     //   //     bg: 'red'
+  //     //   //   }
+  //     //   // }
+  //   },
+  // } as const,
+} as const;
 
 type ConfigType = typeof config;
 

diff --git a/example/storybook/src/more/Roadmap/index.stories.mdx b/example/storybook/src/more/Roadmap/index.stories.mdx
@@ -24,9 +24,8 @@ import { Canvas, Meta, Story } from '@storybook/addon-docs';
 
 ## In Progress
 
-- **[Feature]** Implementing global Style support.
-- **[Improvement]** Continuing to improve config typing.
-
 ## Released
 
 - **[Improvement]** undefined property resolution on the web [@gluestack-style/react@0.1.5](https://github.com/gluestack/gluestack-style/releases/tag/%40gluestack-style%2Freact%400.1.5)
+- **[Feature]** Global Style support.
+- **[Improvement]** Config typing inprovement.
diff --git a/packages/benchmark-next/package.json b/packages/benchmark-next/package.json
@@ -26,7 +26,7 @@
   },
   "devDependencies": {
     "@gluestack-style/babel-plugin-styled-resolver": "^0.1.6",
-    "@gluestack-style/react": "^0.1.31",
+    "@gluestack-style/react": "^0.1.32",
     "@emotion/styled": "^11.3.0",
     "@expo/next-adapter": "^4.0.13",
     "@types/react": "17.0.1",

diff --git a/packages/react/CHANGELOG.md b/packages/react/CHANGELOG.md
@@ -1,5 +1,11 @@
 # @gluestack-style/react
 
+## 0.1.32
+
+### Patch Changes
+
+- - Prop resolution issue when composing on styled component into another.
+
 ## 0.1.31
 
 ### Patch Changes

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.1.31",
+  "version": "0.1.32",
   "keywords": [
     "React Native",
     "Next.js",