Merge branch 'patch' into feat/animated-svg-components

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/overview/Introduction/index.stories.mdx

@@ -19,8 +19,8 @@ gluestack-style is different from other styling libraries like Glamour, Emotion,
 
 gluestack-style originally started as part of NativeBase, a universal component library for both React and React Native. However, we realized that not everyone needs all the components from NativeBase, so we broke it down into two separate libraries:
 
-- [gluestack-style](https://gluestack.io/style) - The high-performing and universal styling library.
-- [gluestack-ui](https://gluestack.io/ui/docs) (Alpha) - A set of ready-to-use universal components that can be added to any project and styled to fit your needs. You can even customize the components as desired.
+- [gluestack-style](https://gluestack.io/style/docs) - The high-performing and universal styling library.
+- [gluestack-ui](https://gluestack.io/ui/docs) - A set of ready-to-use universal components that can be added to any project and styled to fit your needs. You can even customize the components as desired.
 
 ## But aren’t React Native and React Native Web sufficient?
 

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

@@ -1,15 +1,9 @@
-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,
@@ -19,46 +13,6 @@ 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) : [];
 
@@ -92,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);

packages/animation-resolver/src/index.tsx

@@ -210,24 +210,18 @@ export class AnimationResolver implements IStyledPlugin {
     resolvedStyledObject: any = {},
     keyPath: string[] = []
   ) {
-    const aliases = this.config?.aliases;
+    const aliases: any = this.config?.aliases;
     const animatedPropMap = this.config?.animatedPropMap;
-    for (const prop in styledObject) {
-      if (typeof styledObject[prop] === 'object') {
-        keyPath.push(prop);
-        this.updateStyledObject(
-          styledObject[prop],
-          shouldUpdateConfig,
-          resolvedStyledObject,
-          keyPath
-        );
-        keyPath.pop();
-      }
 
-      // @ts-ignore
+    for (const prop in styledObject) {
       if (aliases && aliases?.[prop]) {
+        let isStyleKey = false;
         if (shouldUpdateConfig) {
           // this.#childrenExitPropsMap[prop] = styledObject[prop];
+          if (keyPath[keyPath.length - 1] === 'style') {
+            isStyleKey = true;
+            keyPath.pop();
+          }
           setObjectKeyValue(
             this.#childrenExitPropsMap,
             [...keyPath, prop],
@@ -236,19 +230,29 @@ export class AnimationResolver implements IStyledPlugin {
         }
         const value = styledObject[prop];
 
-        if (keyPath[keyPath.length - 1] === 'style') {
-          keyPath.pop();
-        }
         // @ts-ignore
         keyPath.push('props', aliases[prop]);
         // setObjectKeyValue(resolvedStyledObject, keyPath, value);
 
         setObjectKeyValue(resolvedStyledObject, keyPath, value);
         keyPath.pop();
         keyPath.pop();
-        // delete styledObject[prop];
+        if (isStyleKey) keyPath.push('style');
+
+        delete styledObject[prop];
+      } else if (typeof styledObject[prop] === 'object') {
+        keyPath.push(prop);
+        this.updateStyledObject(
+          styledObject[prop],
+          shouldUpdateConfig,
+          resolvedStyledObject,
+          keyPath
+        );
+        keyPath.pop();
       }
 
+      // @ts-ignore
+
       if (animatedPropMap && animatedPropMap[prop]) {
         this.renameObjectKey(styledObject, prop, animatedPropMap[prop]);
       }
@@ -334,29 +338,27 @@ export class AnimationResolver implements IStyledPlugin {
             resolvedAnimatedStyledWithStyledObject?.props
           : {};
 
-        return (
-          <Component
-            {...animatedProps}
-            sx={resolvedAnimatedStyledWithStyledObject}
-            {...restProps}
-            ref={ref}
-          />
-        );
+        return <Component {...animatedProps} {...restProps} ref={ref} />;
       });
 
       if (NewComponent) {
         //@ts-ignore
         NewComponent.styled = {};
         //@ts-ignore
         NewComponent.styled.config = {};
+
         //@ts-ignore
-        NewComponent.styled.config = styledConfig;
+        NewComponent.styled.config = {
+          ...Component?.styled?.config,
+          ...styledConfig,
+        };
         //@ts-ignore
         NewComponent.isStyledComponent = Component?.isStyledComponent;
         //@ts-ignore
         NewComponent.isComposedComponent = Component?.isComposedComponent;
 
         NewComponent.displayName = Component?.displayName;
+
         return NewComponent;
       }
     } else {

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