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

…@0.2.43 Release/@gluestack style/react@0.2.43
gluestack · Sep 13, 2023 · 34bfc07 · 34bfc07
2 parents 118aba4 + 239f8c8
commit 34bfc07
Show file tree

Hide file tree

Showing 9 changed files with 299 additions and 156 deletions.
diff --git a/README.md b/README.md
@@ -59,11 +59,11 @@ function App({ children }) {
 }
 ```
 
-1. Now you can use `@gluestack-style/react` to style your components by using the `styled` function provided by the library. For example:
+2. Now you can use `@gluestack-style/react` to style your components by using the `styled` function provided by the library. For example:
 
 ```jsx
 import React from 'react';
-import { styled } from '@gluestack-style/react';
+import { styled, StyledProvider } from '@gluestack-style/react';
 
 const StyledButton = styled(
   Pressable,

diff --git a/example/storybook/src/components/nb.config.ts b/example/storybook/src/components/nb.config.ts
@@ -1,3 +1,4 @@
+import { AnimationResolver } from '@gluestack-style/animation-plugin';
 import { createConfig } from '@gluestack-style/react';
 
 export const config = createConfig({

diff --git a/example/storybook/src/plugins/AnimationPlugin/AnimationPlugin.tsx b/example/storybook/src/plugins/AnimationPlugin/AnimationPlugin.tsx
@@ -2,22 +2,27 @@ import React from 'react';
 import { Wrapper } from '../../components/Wrapper';
 import { Motion } from '@legendapp/motion';
 import { Pressable, View } from 'react-native';
-import { createStyled } from '@gluestack-style/react';
+import { FontResolver, styled } from '@gluestack-style/react';
 import { AnimationResolver } from '@gluestack-style/animation-plugin';
 
-const styled = createStyled([new AnimationResolver()]) as any;
-
 const images = [require('./1.png'), require('./2.png'), require('./3.png')];
 
 const Box = styled(View, {});
 
-const StyledMotionImage = styled(Motion.Image, {
-  ':animate': {
-    zIndex: 1,
-    x: 0,
-    opacity: 1,
+const StyledMotionImage = styled(
+  Motion.Image,
+  {
+    ':animate': {
+      zIndex: 1,
+      x: 0,
+      opacity: 1,
+    },
   },
-});
+  {},
+  {
+    plugins: [new AnimationResolver({})],
+  }
+);
 
 export function AnimationPlugin() {
   const [imageIndex, setImageIndex] = React.useState(0);
@@ -37,7 +42,8 @@ export function AnimationPlugin() {
           'aspectRatio': 1 * 1.4,
         }}
       >
-        <styled.Component>
+        {/* @ts-ignore */}
+        <StyledMotionImage.AnimatePresence>
           <StyledMotionImage
             style={{
               width: '100%',
@@ -47,6 +53,7 @@ export function AnimationPlugin() {
             source={{ uri: images[imageIndex] }}
             key={`image-${imageIndex}-${Math.random()}`}
             sx={{
+              // @ts-ignore
               ':initial': {
                 x: xPosition,
                 opacity: 0,
@@ -61,7 +68,8 @@ export function AnimationPlugin() {
               },
             }}
           />
-        </styled.Component>
+          {/* @ts-ignore */}
+        </StyledMotionImage.AnimatePresence>
       </Box>
       <Pressable
         accessibilityRole="button"

diff --git a/example/storybook/tsconfig.json b/example/storybook/tsconfig.json
@@ -4,6 +4,9 @@
     "baseUrl": ".",
     "paths": {
       "@gluestack-style/react": ["../../packages/react/src"],
+      "@gluestack-style/animation-plugin": [
+        "../../packages/animation-plugin/src"
+      ],
       "react-native": ["./node_modules/react-native-web"]
     },
     "emitDeclarationOnly": true,

diff --git a/packages/animation-plugin/src/index.tsx b/packages/animation-plugin/src/index.tsx
@@ -83,7 +83,7 @@ function resolveVariantAnimationProps(variantProps: any, styledObject: any) {
 
 export class AnimationResolver implements IStyledPlugin {
   name: 'AnimationResolver';
-  styledUtils: IStyled | undefined = {
+  styledUtils = {
     aliases: {
       ':animate': 'animate',
       ':initial': 'initial',
@@ -95,7 +95,7 @@ export class AnimationResolver implements IStyledPlugin {
       ':whileTap': 'whileTap',
       ':whileHover': 'whileHover',
       ':onAnimationComplete': 'onAnimationComplete',
-    },
+    } as const,
   };
 
   register(styledUtils: any) {
@@ -105,11 +105,14 @@ export class AnimationResolver implements IStyledPlugin {
         ...styledUtils?.aliases,
       };
 
+      // @ts-ignore
       this.styledUtils.tokens = {
+        // @ts-ignore
         ...this.styledUtils?.tokens,
         ...styledUtils?.tokens,
       };
 
+      // @ts-ignore
       this.styledUtils.ref = styledUtils?.ref;
     }
   }
@@ -123,9 +126,14 @@ export class AnimationResolver implements IStyledPlugin {
 
   #extendedConfig: any = {};
 
-  inputMiddleWare(styledObj: any = {}, shouldUpdateConfig: any = true) {
+  inputMiddleWare(
+    styledObj = {},
+    shouldUpdateConfig: any = true
+  ): {
+    // @ts-ignore
+    [key in keyof typeof this.styledUtils.aliases]: (typeof this.styledUtils.aliases)[key];
+  } {
     // this.#childrenExitPropsMap = deepClone(styledObj);
-
     const resolvedAnimatedProps = this.updateStyledObject(
       styledObj,
       shouldUpdateConfig
@@ -136,6 +144,7 @@ export class AnimationResolver implements IStyledPlugin {
     );
 
     if (shouldUpdateConfig) {
+      // @ts-ignore
       return styledObj;
     }
 
@@ -161,6 +170,7 @@ export class AnimationResolver implements IStyledPlugin {
         keyPath.pop();
       }
 
+      // @ts-ignore
       if (aliases && aliases?.[prop]) {
         if (shouldUpdateConfig) {
           // this.#childrenExitPropsMap[prop] = styledObject[prop];
@@ -171,6 +181,7 @@ export class AnimationResolver implements IStyledPlugin {
           );
         }
         const value = styledObject[prop];
+        // @ts-ignore
         keyPath.push('props', aliases[prop]);
         setObjectKeyValue(resolvedStyledObject, keyPath, value);
         keyPath.pop();
@@ -182,12 +193,12 @@ export class AnimationResolver implements IStyledPlugin {
     return resolvedStyledObject;
   }
 
-  componentMiddleWare({ NewComp, extendedConfig }: any) {
+  componentMiddleWare({ Component, ExtendedConfig }: any) {
     const styledConfig = this.#childrenExitPropsMap;
 
     this.#childrenExitPropsMap = {};
 
-    const Component = React.forwardRef((props: any, ref?: any) => {
+    const NewComponent = React.forwardRef((props: any, ref?: any) => {
       const { sx, ...rest } = props;
 
       const styledContext = useStyled();
@@ -199,8 +210,8 @@ export class AnimationResolver implements IStyledPlugin {
         [styledContext.config]
       );
       this.#extendedConfig = CONFIG;
-      if (extendedConfig) {
-        this.#extendedConfig = deepMerge(CONFIG, extendedConfig);
+      if (ExtendedConfig) {
+        this.#extendedConfig = deepMerge(CONFIG, ExtendedConfig);
       }
 
       let tokenizedAnimatedProps: any = {};
@@ -245,13 +256,13 @@ export class AnimationResolver implements IStyledPlugin {
       Object.keys(restProps?.states ?? {}).forEach((state: any) => {
         isState = restProps.states[state] ? true : false;
       });
-
       const animatedProps = !isState
-        ? resolvedAnimatedStyledWithStyledObject?.props
+        ? // @ts-ignore
+          resolvedAnimatedStyledWithStyledObject?.props
         : {};
 
       return (
-        <NewComp
+        <Component
           {...animatedProps}
           sx={resolvedAnimatedStyledWithStyledObject}
           {...restProps}
@@ -260,21 +271,22 @@ export class AnimationResolver implements IStyledPlugin {
       );
     });
 
-    //@ts-ignore
-    Component.styled = {};
-    //@ts-ignore
-    Component.styled.config = {};
-    //@ts-ignore
-    Component.styled.config = styledConfig;
-
-    //@ts-ignore
-    Component.isStyledComponent = NewComp.isStyledComponent;
-    //@ts-ignore
-    Component.isComposedComponent = NewComp.isComposedComponent;
-
-    Component.displayName = 'StyledComponent';
-
-    return Component;
+    if (NewComponent) {
+      //@ts-ignore
+      NewComponent.styled = {};
+      //@ts-ignore
+      NewComponent.styled.config = {};
+      //@ts-ignore
+      NewComponent.styled.config = styledConfig;
+
+      //@ts-ignore
+      NewComponent.isStyledComponent = Component?.isStyledComponent;
+      //@ts-ignore
+      NewComponent.isComposedComponent = Component?.isComposedComponent;
+
+      NewComponent.displayName = 'StyledComponent';
+      return NewComponent;
+    }
   }
 
   wrapperComponentMiddleWare() {

diff --git a/packages/react/src/createStyled.ts b/packages/react/src/createStyled.ts
@@ -15,9 +15,9 @@ export class IStyled {
 }
 
 export const createStyled = (plugins: any) => {
-  let styledComponent = <P, Variants, ConCom>(
+  let styledComponent = <P, Variants, ConCom, PluginType>(
     Component: React.ComponentType<P>,
-    styledObject: ITheme<Variants, P>,
+    styledObject: ITheme<Variants, P, PluginType>,
     compConfig: IComponentStyleConfig<ConCom> = {},
     extendedConfig: any = {}
   ) => {

diff --git a/packages/react/src/plugins/font-resolver.tsx b/packages/react/src/plugins/font-resolver.tsx
@@ -140,7 +140,7 @@ export class FontResolver implements IStyledPlugin, FontPlugin {
     this.mapFonts = mapFonts || this.mapFonts;
   }
 
-  inputMiddleWare(styledObj: any = {}, shouldUpdate: boolean = true) {
+  inputMiddleWare(styledObj: any = {}, shouldUpdate: boolean = true): void {
     const modifiedStyledObject = this.fontHandler(styledObj, shouldUpdate);
 
     if (shouldUpdate) {