Merge branch 'main' into fix/3xx

.changeset/config.json

@@ -7,11 +7,5 @@
   "access": "public",
   "baseBranch": "main",
   "updateInternalDependencies": "patch",
-  "ignore": [
-    "expo-app",
-    "babel-gluestack-style-resolver-example",
-    "example-storybook",
-    "next-example-styled",
-    "benchmark-next"
-  ]
+  "ignore": ["benchmark-next", "@gluestack/ui-storybook"]
 }

.vscode/settings.json

@@ -16,5 +16,6 @@
   // Path to a .prettierignore or similar file
   "prettier.ignorePath": ".prettierignore",
   // If true, puts the `>` of a multi-line jsx element at the end of the last line instead of being alone on the next line
-  "editor.wordWrap": "on"
+  "editor.wordWrap": "on",
+  "cSpell.words": ["gluestack", "Pressable", "themeable"]
 }

README.md

@@ -6,7 +6,7 @@
   <br>
 </h3>
 
-## A library that allows you to use CSS in your React and React Native projects with a modern, powerful and flexible way. `gluestack-style` allows you to write CSS using JavaScript, which enables you to take advantage of the power and expressiveness of both languages. With its simple and intuitive API, you can easily create dynamic styles, responsive design, and handle themes for your applications.
+**A library that allows you to use CSS in your React and React Native projects with a modern, powerful and flexible way. `gluestack-style` allows you to write CSS using JavaScript, which enables you to take advantage of the power and expressiveness of both languages. With its simple and intuitive API, you can easily create dynamic styles, responsive design, and handle themes for your applications.**
 
 ## Documentation
 
@@ -88,12 +88,12 @@ export const App = () => {
 ```
 
 More guides on how to get started are available
-[here](https://gluestack.io/style).
+[here](https://gluestack.io/style/docs).
 
 ## Contributing
 
 We welcome contributions to the `gluestack-style`! If you have an idea for a new component or a bug fix, please read our [contributing guide](./CONTRIBUTING.md) instructions on how to submit a pull request.
 
 ## License
 
-Licensed under the MIT License, Copyright © 2021 GeekyAnts. See [LICENSE](https://github.com/gluestack/gluestack-style/blob/master/LICENSE) for more information.
+Licensed under the MIT License, Copyright © 2021 GeekyAnts. See [LICENSE](https://github.com/gluestack/gluestack-style/blob/main/LICENSE) for more information.

example/storybook/package.json

@@ -23,7 +23,7 @@
   },
   "dependencies": {
     "@expo/html-elements": "^0.4.2",
-    "@gluestack-style/react": "^0.2.11-alpha.0",
+    "@gluestack-style/react": "1.0.8",
     "@gluestack-ui/actionsheet": "^0.2.16",
     "@gluestack-ui/alert-dialog": "^0.1.14",
     "@gluestack-ui/button": "^0.1.23",

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

@@ -1,6 +1,6 @@
 ---
 title: Babel Plugins | gluestack-style
-description: All the Babel plugins gluestack-style provides for its ecosystem. It transpiles your styled function calls and resolves the component styling in build time.
+description: All the Babel plugins gluestack-style provides for its ecosystem. It transpile your styled function calls and resolves the component styling in build time.
 ---
 
 import { Canvas, Meta, Story } from '@storybook/addon-docs';
@@ -12,7 +12,7 @@ import { Box, AppProvider } from '@gluestack/design-system';
 
 ### @gluestack-style/babel-plugin-styled-resolver
 
-@gluestack-style/babel-plugin-styled-resolver transpiles your `styled` function calls and resolves the `component styling` in build time. It also generates all the `CSS rules` and style ids based on which these CSS styles are applied on the component. Doing this saves tons of time on runtime because all your style calculation is already done and all your app has to do is to inject this style into a style tag and viola! All your styles appear instantaneously. This helps us to improve the performance of the apps 5-6 times. If you provide the `components` option then it also resolves the inline styles of the components created using `@gluestack-style/react`.
+@gluestack-style/babel-plugin-styled-resolver transpile your `styled` function calls and resolves the `component styling` in build time. It also generates all the `CSS rules` and style ids based on which these CSS styles are applied on the component. Doing this saves tons of time on runtime because all your style calculation is already done and all your app has to do is to inject this style into a style tag and viola! All your styles appear instantaneously. This helps us to improve the performance of the apps 5-6 times. If you provide the `components` option then it also resolves the inline styles of the components created using `@gluestack-style/react`.
 
 ## Installation Steps:
 
@@ -40,7 +40,7 @@ import { Box, AppProvider } from '@gluestack/design-system';
 
 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.
 
-### **Let us see how this Babel plugin works.**
+### Let us see how this Babel plugin works.
 
 - 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.
@@ -196,7 +196,7 @@ module.exports = function (api) {
 
 - `components`: The `components` option allows you to specify the library/import_path name & file path of components created using `@gluestack-style/react`. This option is useful in scenarios where you are creating a custom component with the styled function and using it with inline styles. If you want to resolve those inline styles on build time just define this option with the library name and file path of the components folder or library.
 
-> **Note**: Even using this option if you have extended your config, added aliases, tokens or propertyResolver to a StyledComponent then it will not be resolved on build time. It will be resolved on runtime.
+> Note: Even using this option if you have extended your config, added aliases, tokens or propertyResolver to a StyledComponent then it will not be resolved on build time. It will be resolved on runtime.
 
 ```js
 // babel.config.js

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

@@ -116,8 +116,12 @@ const Text1 = styled(
   }
 );
 
-const MyLink = styled(Link, {});
+const Box = styled(View, {
+  bg: '$blue500',
+  p: '$10',
+});
 export function ContextBasedStyles() {
+  console.log('>>>>>  component');
   return (
     <Wrapper colorMode="dark">
       {/* <StyledIcon as={CameraIcon} /> */}
@@ -129,14 +133,12 @@ export function ContextBasedStyles() {
       >
         vdkbkdfbv
       </Text1> */}
-      <MyLink
-        href={'/'}
+      <Box
+        // href={'/'}
         sx={{
-          color: '$red500',
+          bg: '$red500',
         }}
-      >
-        next link
-      </MyLink>
+      ></Box>
     </Wrapper>
   );
 }

example/storybook/src/api/PropertyResolver/index.stories.mdx

@@ -187,4 +187,4 @@ export const config = createConfig({
 } as const);
 ```
 
-> Warning: We strongly advise against using this feature" as this can impact your performance since this needs to be resolved on the fly and can not be optimised at build time.
+> Warning: We strongly advise against using this feature" as this can impact your performance since this needs to be resolved on the fly and can not be optimized at build time.

example/storybook/src/api/PropsPassing/index.stories.mdx

@@ -33,3 +33,5 @@ const StyledComponent = styled(
   },
 );
 ```
+
+> Caution: Utilizing the `Passing Props` feature within `Media Queries` is not supported.

example/storybook/src/api/ResponsiveStyles/index.stories.mdx

@@ -107,6 +107,9 @@ Once configured, you can apply different styles at different breakpoints.
   />
 </AppProvider>
 
+
 > Note that the '@' symbol indicates a media query.The '@' symbol should be followed by the name of the desired breakpoint for the styles.
 
 > Note that the same API can be used with the sx prop to override styles inline.
+
+> Caution: Utilizing the `Passing Props` feature within `Media Queries` is not supported.

example/storybook/src/api/UtilityProps/index.stories.mdx

@@ -1,6 +1,6 @@
 ---
 title: Utility Props | gluestack-style
-description: Writing inline styles with Utlity Props. We provide you the ability to pass down utility props on any Styled Component which internally converts to `sx` prop.
+description: Writing inline styles with Utility Props. We provide you the ability to pass down utility props on any Styled Component which internally converts to `sx` prop.
 ---
 
 import { Canvas, Meta, Story } from '@storybook/addon-docs';

example/storybook/src/components/nb.config.ts

@@ -659,6 +659,9 @@ export const config = createConfig({
       100: 1,
     },
   } as const,
+  globalStyle: {
+    variants: {},
+  },
   themes: {
     '2000s': {
       colors: {

example/storybook/src/overview/Performance/index.stories.mdx

@@ -16,7 +16,7 @@ We tested the performance of our landing page, built with `gluestack-style` and
 <img
   src="/assets/PerformanceScreenshot.png"
   width="100%"
-  alt="Performance matrics from lighthouse report"
+  alt="Performance metrics from lighthouse report"
 />
 
 We have run the benchmark, and we are getting great results compared to other libraries. We don't want the comparison with other libraries to be the ultimate scoring system. It doesn't give the full picture of any library. There are other important metrics too. Also, we may go wrong in how we run the benchmark, we may end up with selection bias too (unintentionally).

example/storybook/src/plugins/FontsPlugin/index.stories.mdx

@@ -21,7 +21,7 @@ The font plugin, a utility for the styled function, provides a unified way to pa
 Include the `FontResolver` plugin in your config. To customize font resolution, pass a mapFonts callback function to the constructor.
 
 ```js
-import { FontResolver } from '@gluetsack-style/react';
+import { FontResolver } from '@gluestack-style/react';
 
 export const config = {
   aliases: {},

package.json

@@ -7,7 +7,8 @@
   "scripts": {
     "test": "bash ./scripts/test.sh",
     "dev": "turbo run dev",
-    "build": "turbo run build --filter=@gluestack-style* --no-cache",
+    "build": "turbo run build --filter=@gluestack-style/react --no-cache && yarn build:rest",
+    "build:rest": "turbo run build --filter=@gluestack-style* --no-cache --ignore=@gluestack-style/react",
     "clean": "turbo run clean && rm -rf node_modules",
     "format": "prettier --write \"**/*.{ts,tsx,js,jsx,json,md}\" --ignore-path .gitignore",
     "release": "changeset publish",

packages/animation-legend-motion-driver/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gluestack-style/legend-motion-animation-driver",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "A gluestack-style plugin for animation support using legendapp motion library",
   "keywords": [
     "react",

packages/animation-legend-motion-driver/src/index.tsx

@@ -1,63 +1,18 @@
-import { useStyled } from '@gluestack-style/react';
 import type {
   IAnimationDriverPlugin,
   IAnimationResolver,
 } from '@gluestack-style/react';
-import React, { useMemo } from 'react';
-import {
-  deepMerge,
-  deepMergeObjects,
-  setObjectKeyValue,
-  resolvedTokenization,
-} from './utils';
+import React from 'react';
+import { deepMerge } from './utils';
 import {
   Motion,
   AnimatePresence as MotionAnimatePresence,
   createMotionAnimatedComponent,
 } from '@legendapp/motion';
+import { MotionSvg } from '@legendapp/motion/svg';
 import { propertyTokenMap } from './propertyTokenMap';
 import { Pressable } from 'react-native';
 
-function tokenizeAnimationPropsFromConfig(
-  props: any = {},
-  config: any,
-  animationAliases: any,
-  path: any = [],
-  tokenizedAnimatedProps: any = {}
-) {
-  for (const prop in props) {
-    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);
-      path.pop();
-    } else if (typeof props[prop] === 'object') {
-      path.push(prop);
-      const tokenizedValue = resolvedTokenization(props[prop], config);
-      setObjectKeyValue(tokenizedAnimatedProps, path, tokenizedValue);
-      // path.pop();
-      tokenizeAnimationPropsFromConfig(
-        props[prop],
-        config,
-        animationAliases,
-        path,
-        tokenizedAnimatedProps
-      );
-      path.pop();
-    } else {
-      path.push(prop);
-      setObjectKeyValue(tokenizedAnimatedProps, path, props[prop]);
-      path.pop();
-    }
-  }
-
-  return tokenizedAnimatedProps;
-}
-
 function getVariantProps(props: any, theme: any) {
   const variantTypes = theme?.variants ? Object.keys(theme.variants) : [];
 
@@ -91,65 +46,38 @@ function resolveVariantAnimationProps(variantProps: any, styledObject: any) {
 
 const AnimatePresence = React.forwardRef(
   ({ children, ...props }: any, ref?: any) => {
-    const ctx = useStyled();
     const clonedChildren: any = [];
-    const CONFIG = useMemo(
-      () => ({
-        ...ctx.config,
-        propertyTokenMap,
-      }),
-      [ctx.config]
-    );
 
     React.Children.toArray(children).forEach((child: any) => {
       if (
         (child?.type?.displayName &&
           child?.type?.displayName.includes('Gluestack-AnimatedResolver')) ||
         child?.type?.isStyledComponent
       ) {
-        let tokenizedAnimatedProps: any = {};
-        const animationAliases = {};
-
         const componentStyledObject = child?.type?.getStyledData()?.config;
 
         const { variantProps, restProps } = getVariantProps(
-          child?.props,
+          { ...componentStyledObject?.props, ...child?.props },
           componentStyledObject
         );
 
-        const config = CONFIG;
-
-        const variantStyledObject = resolveVariantAnimationProps(
+        const variantStyledObject: any = resolveVariantAnimationProps(
           variantProps,
           componentStyledObject
         );
 
-        const componentStyledObjectWithVariants = deepMergeObjects(
-          componentStyledObject,
-          variantStyledObject
-        );
-        tokenizedAnimatedProps = tokenizeAnimationPropsFromConfig(
-          componentStyledObjectWithVariants,
-          config,
-          animationAliases
-        );
-
-        const tokenizedSxAnimationProps: any = tokenizeAnimationPropsFromConfig(
-          child?.props?.sx,
-          config,
-          animationAliases
-        );
-
-        const mergedAnimatedProps = deepMergeObjects(
-          {},
-          tokenizedSxAnimationProps,
-          tokenizedAnimatedProps
-        );
+        const exit = {
+          ...componentStyledObject?.[':exit'],
+          ...variantStyledObject?.[':exit'],
+          ...restProps?.sx?.[':exit'],
+          ...restProps?.exit,
+        };
 
         const clonedChild = React.cloneElement(child, {
+          exit,
           ...restProps,
-          exit: mergedAnimatedProps?.baseStyle?.[':exit'],
         });
+
         clonedChildren.push(clonedChild);
       } else {
         clonedChildren.push(child);
@@ -167,9 +95,17 @@ const AnimatePresence = React.forwardRef(
 const AnimatedPressable = createMotionAnimatedComponent(
   Pressable
 ) as React.ComponentType<typeof Pressable>;
+
+const MotionComponents = {
+  ...Motion,
+  ...MotionSvg,
+  Pressable: AnimatedPressable,
+  AnimatePresence,
+};
+
 export class MotionAnimationDriver implements IAnimationDriverPlugin {
   name: 'MotionAnimationDriver';
-  engine = { ...Motion, Pressable: AnimatedPressable, AnimatePresence };
+  engine = MotionComponents;
   config = {
     aliases: {
       ':animate': 'animate',

packages/animation-moti-driver/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gluestack-style/moti-animation-driver",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "A gluestack-style driver for using moti animation with animation resolver plugin.",
   "keywords": [
     "react",
@@ -24,13 +24,13 @@
     "clean": "rm -rf lib"
   },
   "peerDependencies": {
-    "@gluestack-style/react": ">=0.2",
+    "@gluestack-style/react": ">=1.0.7",
     "moti": ">=0.26",
     "react-native-gesture-handler": ">=2.12",
     "react-native-reanimated": ">=3.5"
   },
   "devDependencies": {
-    "@gluestack-style/react": "^0.2.49",
+    "@gluestack-style/react": "^1.0.7",
     "@types/react": "^18.0.22",
     "@types/react-native": "^0.69.15",
     "babel-plugin-transform-remove-console": "^6.9.4",