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

…@0.1.16

Release/@gluestack style/[email protected]

example/babel-plugin-styled-resolver-expo/package.json

@@ -10,7 +10,7 @@
     "build:web": "expo export:web"
   },
   "dependencies": {
-    "@gluestack-style/react": "^0.1.14",
+    "@gluestack-style/react": "^0.1.16",
     "expo": "~47.0.8",
     "expo-status-bar": "~1.4.2",
     "find-yarn-workspace-root": "^2.0.0"
@@ -26,10 +26,10 @@
     "babel-plugin-relative-path-import": "^2.0.1",
     "ts-loader": "~8.2.0",
     "typescript": "^4.6.3",
-    "@gluestack-style/react": "^0.1.14"
+    "@gluestack-style/react": "^0.1.16"
   },
   "peerDependencies": {
-    "@gluestack-style/react": "^0.1.14",
+    "@gluestack-style/react": "^0.1.16",
     "react": "*",
     "react-dom": "*",
     "react-native": "*",

example/expo-app/package.json

@@ -11,7 +11,7 @@
   },
   "dependencies": {
     "@gluestack-style/babel-plugin-styled-resolver": "^0.1.0",
-    "@gluestack-style/react": "^0.1.14",
+    "@gluestack-style/react": "^0.1.16",
     "expo": "~47.0.12",
     "expo-status-bar": "~1.4.2",
     "react": "18.1.0",

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.14",
+    "@gluestack-style/react": "^0.1.16",
     "@gluestack-style/babel-plugin-styled-resolver": "^0.1.6"
   },
   "devDependencies": {

example/storybook/babel.config.js

@@ -15,6 +15,10 @@ module.exports = function (api) {
                   __dirname,
                   '../../packages/react/src'
                 ),
+                ['@gluestack-style/animation-plugin']: path.join(
+                  __dirname,
+                  '../../packages/animation-plugin/src'
+                ),
 
                 // ['@dank-style/react']: path.join(
                 //   __dirname,

example/storybook/package.json

@@ -20,7 +20,7 @@
   },
   "dependencies": {
     "@gluestack-style/animation-plugin": "^0.1.6",
-    "@gluestack-style/react": "^0.1.14",
+    "@gluestack-style/react": "^0.1.16",
     "@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.6",
-    "@gluestack-style/react": "^0.1.14",
+    "@gluestack-style/react": "^0.1.16",
     "@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.14",
+    "@gluestack-style/react": "^0.1.16",
     "react": "*",
     "react-dom": "*",
     "react-native": "*",

example/storybook/src/advanced/BabelPlugins/index.stories.mdx

@@ -16,11 +16,11 @@ import { Box, AppProvider } from '@gluestack/design-system';
 
 ### **Let us see how this Babel plugin works.**
 
-- First, it traverses your files and tries to find `styled` imported from “@gluestack-style/react”.
+- First, it traverses your files and tries to find `styled` imported from `@gluestack-style/react`.
 - Once it finds a declaration of `styled` it then looks for its function call.
 - From that function call, it fetches the component style config(2nd Parameter), component config (3rd parameter), and component extended config (4th Parameter).
 - Then it resolves the styling and generates the CSS rules and corresponding style ids.
-- Once resolved it removes the 2nd parameter ( component style ) and adds a 5th param which is an object with ordered resolved style and component style ids that are sorted according to precedence.
+- Once resolved it removes the 2nd parameter component style and adds a 5th param which is an object with ordered resolved style and component style ids that are sorted according to precedence.
 - Now when the components read this 5th param it straightway just passes the style id that should be applied according to the condition the component is in.
 
 Here’s a small diagram explaining how the flow works:
@@ -81,3 +81,139 @@ Your code gets transpiled in the build files like this:
    ```
 
 3. Just make sure your `babel.config.js` and `gluestack-style.config.js/ts` are in the same directory. We suggest you keep both of them at the root of your app codebase.
+
+## Advanced
+
+The `@gluestack-style/babel-plugin-styled-resolver` plugin offers advanced functionality with a range of available options. These options allow you to customize the behavior of the plugin according to your specific use cases and requirements.
+
+- `configPath`: The `configPath` option allows you to define the path to the configuration file. This configuration file contains the aliases and tokens used by the plugin. By default, the plugin assumes that the configuration file is located in the same directory as the `babel.config.js` file.
+
+```js
+const path = require('path');
+const gluestackStyleResolver = require('@gluestack-style/babel-plugin-styled-resolver');
+
+module.exports = function (api) {
+  api.cache(true);
+  return {
+    presets: ['babel-preset-expo'],
+    plugins: [
+      [
+        gluestackStyleResolver,
+        {
+          configPath: path.resolve(__dirname, './gluestack-style.config.js'), // Specify the path of the config file
+        },
+      ],
+    ],
+  };
+};
+```
+
+- `configThemePath`: The `configThemePath` option provides a way to specify the path of the theme object within your configuration file.
+
+if your config file looks like below:
+
+```js
+const config = {
+  componentPath: '/core/components',
+  theme: {
+    aliases: {},
+    tokens: {},
+  },
+};
+```
+
+You can use the following babel config:
+
+```js
+// babel.config.js
+const path = require('path');
+const gluestackStyleResolver = require('@gluestack-style/babel-plugin-styled-resolver');
+
+module.exports = function (api) {
+  api.cache(true);
+  return {
+    presets: ['babel-preset-expo'],
+    plugins: [
+      [
+        gluestackStyleResolver,
+        {
+          configThemePath: ['config', 'theme'], // Specify the path of the theme object in your config file
+        },
+      ],
+    ],
+  };
+};
+```
+
+- `styledAlias`: The `styledAlias` option provides the flexibility to define a custom name for the styled aliases function. This option is used to identify the function calls that need to be transformed by the plugin. By default, the plugin searches for the `styled` function. However, with the `styledAlias` option, you can specify a different name for the styled aliases function, allowing you to adapt the plugin to your specific codebase and styling conventions.
+
+```js
+// babel.config.js
+const path = require('path');
+const gluestackStyleResolver = require('@gluestack-style/babel-plugin-styled-resolver');
+
+module.exports = function (api) {
+  api.cache(true);
+  return {
+    presets: ['babel-preset-expo'],
+    plugins: [
+      [
+        gluestackStyleResolver,
+        {
+          styledAlias: 'myStyled', // Specify your styled aliases function name if different
+        },
+      ],
+    ],
+  };
+};
+```
+
+- `libraryName`: The `libraryName` option is useful in scenarios where you are exporting the styled function from a different library. This option allows you to specify the name of the library that provides the styled function. By default, the plugin assumes that the styled function is exported from `@gluestack-style/react`. However, with the `libraryName` option, you can customize it to match the actual library name where the styled function is defined.
+
+```js
+// babel.config.js
+const path = require('path');
+const gluestackStyleResolver = require('@gluestack-style/babel-plugin-styled-resolver');
+
+module.exports = function (api) {
+  api.cache(true);
+  return {
+    presets: ['babel-preset-expo'],
+    plugins: [
+      [
+        gluestackStyleResolver,
+        {
+          libraryName: '@gluestack-style/react', // Specify the library name from where the styled function is exported
+        },
+      ],
+    ],
+  };
+};
+```
+
+- `filename`: The filename option enables you to specify the file path of the styled function.
+
+```js
+// babel.config.js
+const path = require('path');
+const gluestackStyleResolver = require('@gluestack-style/babel-plugin-styled-resolver');
+
+module.exports = function (api) {
+  api.cache(true);
+  return {
+    presets: ['babel-preset-expo'],
+    plugins: [
+      [
+        gluestackStyleResolver,
+        {
+          filename: path.resolve(__dirname, './core/styled'), // Specify the file path of the styled function
+        },
+      ],
+    ],
+  };
+};
+```
+
+Make sure to update the values according to your specific configuration.
+
+By utilizing these advanced options, you can customize the behavior of the `@gluestack-style/babel-plugin-styled-resolver` plugin to fit your specific needs.

packages/animation-plugin/src/index.tsx

@@ -18,7 +18,11 @@ function tokenizeAnimationPropsFromConfig(
   tokenizedAnimatedProps: any = {}
 ) {
   for (const prop in props) {
-    if (animationAliases[prop]) {
+    if (Array.isArray(props[prop])) {
+      path.push(prop);
+      setObjectKeyValue(tokenizedAnimatedProps, path, props[prop]);
+      path.pop();
+    } else if (animationAliases[prop]) {
       path.push(prop);
       const tokenizedValue = resolvedTokenization(props[prop], config);
       setObjectKeyValue(tokenizedAnimatedProps, path, tokenizedValue);
@@ -126,9 +130,9 @@ export class AnimationResolver implements IStyledPlugin {
       styledObj,
       shouldUpdateConfig
     );
-    const resolvedStyledObjectWithAnimatedProps = deepMergeObjects(
-      resolvedAnimatedProps,
-      styledObj
+    const resolvedStyledObjectWithAnimatedProps = deepMerge(
+      styledObj,
+      resolvedAnimatedProps
     );
 
     if (shouldUpdateConfig) {
@@ -205,9 +209,9 @@ export class AnimationResolver implements IStyledPlugin {
         variantProps,
         styledConfig
       );
-      const componentStyledObject = deepMergeObjects(
-        styledConfig,
-        variantStyledObject
+      const componentStyledObject = deepMerge(
+        variantStyledObject,
+        styledConfig
       );
 
       const animationAliases = this.styledUtils?.aliases;
@@ -330,7 +334,6 @@ export class AnimationResolver implements IStyledPlugin {
             );
 
             const clonedChild = React.cloneElement(child, {
-              ...mergedAnimatedProps,
               exit: mergedAnimatedProps?.[':exit'],
               ...restProps,
             });

packages/benchmark-next/package.json

@@ -26,7 +26,7 @@
   },
   "devDependencies": {
     "@gluestack-style/babel-plugin-styled-resolver": "^0.1.6",
-    "@gluestack-style/react": "^0.1.14",
+    "@gluestack-style/react": "^0.1.16",
     "@emotion/styled": "^11.3.0",
     "@expo/next-adapter": "^4.0.13",
     "@types/react": "17.0.1",

packages/react/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @gluestack-style/react
 
+## 0.1.16
+
+### Patch Changes
+
+- - transform array resolution in plugin
+  - default style property for flex and flexDirection
+
+  - Advanced docs for babel plugin
+
 ## 0.1.14
 
 ### Patch Changes

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.15",
+  "version": "0.1.16",
   "keywords": [
     "react",
     "native",

packages/react/src/core/styled-system.ts

@@ -15,8 +15,8 @@ export const CSSPropertiesMap = {
   display: 'flex',
   end: 'unset',
   start: 'unset',
-  flex: 'unset',
-  flexDirection: 'unset',
+  flex: 'none',
+  flexDirection: 'column',
   flexBasis: 'unset',
   flexGrow: 'unset',
   flexShrink: 'unset',

packages/react/src/plugins/font-resolver.tsx

@@ -251,14 +251,22 @@ export class FontResolver implements IStyledPlugin, FontPlugin {
 
       const { sx, fontWeight, fontFamily, fontStyle, ...rest } = restProps;
 
-      componentStyledObject = {
-        ...componentStyledObject,
-        fontWeight: fontWeight ?? componentStyledObject.fontWeight,
-        fontFamily: fontFamily ?? componentStyledObject.fontFamily,
-        fontStyle: fontStyle ?? componentStyledObject.fontStyle,
-      };
+      if (fontWeight || componentStyledObject.fontWeight) {
+        componentStyledObject.fontWeight =
+          fontWeight ?? componentStyledObject.fontWeight;
+      }
+
+      if (fontFamily || componentStyledObject.fontFamily) {
+        componentStyledObject.fontFamily =
+          fontFamily ?? componentStyledObject.fontFamily;
+      }
+
+      if (fontStyle || componentStyledObject.fontStyle) {
+        componentStyledObject.fontStyle =
+          fontStyle ?? componentStyledObject.fontStyle;
+      }
 
-      const sxPropsWithThemeProps = deepMergeObjects(componentStyledObject, sx);
+      const sxPropsWithThemeProps = deepMerge(sx, componentStyledObject);
 
       const resolvedSxProps = this.inputMiddleWare(
         sxPropsWithThemeProps,