Merge pull request #144 from gluestack/release/@dank-style/[email protected]

Release/@dank style/[email protected]
gluestack · Apr 24, 2023 · 984cffe · 984cffe
2 parents df1d685 + 28496d7
commit 984cffe
Show file tree

Hide file tree

Showing 7 changed files with 196 additions and 11 deletions.
diff --git a/example/storybook/package.json b/example/storybook/package.json
@@ -43,7 +43,7 @@
   "devDependencies": {
     "@babel/core": "^7.19.3",
     "@dank-style/animation-plugin": "^0.0.4",
-    "@dank-style/react": "^0.3.16",
+    "@dank-style/react": "^0.3.17",
     "@storybook/addon-actions": "^6.5.14",
     "@storybook/addon-controls": "^6.5.14",
     "@storybook/addon-docs": "^6.5.15",

diff --git a/example/storybook/src/api/CompoundVariants/CompoundVariants.tsx b/example/storybook/src/api/CompoundVariants/CompoundVariants.tsx
@@ -0,0 +1,169 @@
+import React, { memo, useEffect, useState } from 'react';
+import { AnimationResolver } from '@dank-style/animation-plugin';
+
+import { createStyled, styled } from '@dank-style/react';
+import { Wrapper } from '../../components/Wrapper';
+import { Motion } from '@legendapp/motion';
+import { View } from 'react-native';
+import { Text } from 'react-native';
+
+const StyledView = styled(
+  View,
+  {
+    h: 20,
+    w: 20,
+    bg: '$red800',
+
+    props: {
+      variant: 'solid',
+      size: 'md',
+      // bg: '$red500',
+    },
+
+    // props: {
+    //   variant: 'sm',
+    //   // bg: '$blue400',
+    // },
+
+    // ':hover': {
+    //   props: {
+    //     variant: 'sm',
+    //     // bg: '$blue400',
+    //   },
+    // },
+    // size: 20,
+    // color: '$red300',
+    variants: {
+      variant: {
+        solid: {
+          bg: '$amber200',
+          _dark: {
+            bg: '$pink400',
+          },
+        },
+      },
+      size: {
+        md: {
+          padding: '$10',
+        },
+      },
+    },
+
+    compoundVariants: [
+      {
+        variant: 'solid',
+        size: 'md',
+        value: {
+          bg: '$red400',
+          _dark: {
+            bg: '$blue600',
+          },
+        },
+      },
+    ],
+
+    // _dark: {
+    //   // color: '$muted50',
+    //   h: 16,
+    //   w: 16,
+    // },
+  },
+  {
+    ancestorStyle: ['_icon'],
+    // resolveProps: ['size'],
+    DEBUG: 'STYLED_ICON',
+  },
+  {
+    // alias: {
+    //   size: 'space',
+    // },
+    // propertyTokenMap: {
+    //   size: 'space',
+    // },
+    // propertyResolver: {
+    //   size: (rawValue: any, resolver: any) => {
+    //     console.log('hello size', rawValue);
+    //     return resolver(rawValue);
+    //   },
+    // },
+  }
+);
+export function CompoundVariants() {
+  const [hover, setHover] = useState(false);
+
+  // console.log(
+  //   animatedPlugin.inputMiddleWare({
+  //     ':animate': {
+  //       opacity: 0.5,
+  //       y: 0,
+  //     },
+  //     ':initial': {
+  //       y: -50,
+  //     },
+  //     ':hover': {
+  //       ':animate': {
+  //         opacity: 1,
+  //       },
+  //     },
+  //   }),
+  //   '%%%%%%%%%%%'
+  // );
+
+  const ref = React.useRef(null);
+
+  useEffect(() => {
+    if (ref && ref.current) {
+      ref.current.addEventListener('mouseover', () => {
+        setHover(true);
+      });
+      ref.current.addEventListener('mouseout', () => {
+        setHover(false);
+      });
+    }
+    setTimeout(() => {
+      setHover(true);
+    }, 5000);
+  }, []);
+
+  return (
+    <Wrapper>
+      <StyledView
+      // sx={{
+      //   ':hover': {
+      //     props: {
+      //       variant: 'sm',
+      //       // bg: '$blue400',
+      //     },
+      //   },
+      // }}
+      // variant="sm"
+      // bg="$blue400"
+      // variant="sm"
+      // animate="hello"
+      // states={{ hover: true }}
+      // sx={{
+      //   props: {
+      //     variant: 'sm',
+      //     bg: '$red400',
+      //   },
+      // }}
+      >
+        <Text>Hello</Text>
+      </StyledView>
+      {/* <StyledMotionView
+        ref={ref}
+        variant="subtle"
+              animate={{
+          x: value * 100,
+          opacity: value ? 1 : 0.2,
+          scale: value ? 1 : 0.5,
+        }}
+        states={{ hover: hover }}
+      >
+        <StlyedText>Hello World</StlyedText>
+      </StyledMotionView> */}
+    </Wrapper>
+  );
+}
+
+export default CompoundVariants;
diff --git a/example/storybook/src/api/CompoundVariants/CompoundVarinats.stories.tsx b/example/storybook/src/api/CompoundVariants/CompoundVarinats.stories.tsx
@@ -0,0 +1,9 @@
+import type { ComponentMeta } from '@storybook/react-native';
+import { CompoundVariants } from './CompoundVariants';
+const MyCompoundVariantsMeta: ComponentMeta<typeof CompoundVariants> = {
+  title: 'api/stories/CompoundVariants',
+  component: CompoundVariants,
+};
+
+export { CompoundVariants } from './CompoundVariants';
+export default MyCompoundVariantsMeta;
diff --git a/packages/react/CHANGELOG.md b/packages/react/CHANGELOG.md
@@ -1,5 +1,11 @@
 # @dank-style/react
 
+## 0.3.17
+
+### Patch Changes
+
+- Fixed compound variant color mode issue
+
 ## 0.3.16
 
 ### Patch Changes

diff --git a/packages/react/package.json b/packages/react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@dank-style/react",
-  "version": "0.3.16",
+  "version": "0.3.17",
   "main": "lib/commonjs/index",
   "types": "lib/typescript/index.d.ts",
   "module": "lib/module/index",

diff --git a/packages/react/src/resolver.ts b/packages/react/src/resolver.ts
@@ -361,9 +361,6 @@ export function sxToSXResolved(
   };
 
   // console.log('sx !@#!@#!@#!@#', sx);
-
-  // console.log(styledValueResolvedWithMeta.meta, 'path here 111');
-
   // console.log(sx, '********');
   const ret: SXResolved = {
     //@ts-ignore
@@ -422,7 +419,7 @@ export function sxToSXResolved(
             //@ts-ignore
             sx.colorMode[key],
             [...path, 'colorMode', key],
-            { colorMode: key },
+            { colorMode: key, ...meta },
             CONFIG
           );
 
@@ -590,6 +587,7 @@ export function styledToStyledResolved<Variants, Sizes, P>(
   //   'styled.compoundVariants',
   //   reduceAndResolveCompoundVariants(styled.compoundVariants, path, CONFIG)
   // );
+
   return {
     baseStyle: styled?.baseStyle
       ? //@ts-ignore

diff --git a/packages/react/src/styled.tsx b/packages/react/src/styled.tsx
@@ -117,7 +117,7 @@ function getStateStyleCSSFromStyleIdsAndProps(
         styleId.includes('props') &&
         isSubset(filteredStyleIdKeyArray, currentStateArray)
       ) {
-        props = deepMergeObjects(flatternStyleIdObject[styleId], props);
+        props = deepMergeObjects(props, flatternStyleIdObject[styleId]);
       } else {
         if (isSubset(filteredStyleIdKeyArray, currentStateArray)) {
           stateStyleCSSIds.push(...flatternStyleIdObject[styleId]);
@@ -188,10 +188,13 @@ function getMergedDefaultCSSIdsAndProps(
     if (
       isValidVariantCondition(compoundVariant.condition, mergedVariantProps)
     ) {
-      defaultStyleCSSIds.push(
-        //@ts-ignore
-        ...compoundVariant.ids
-      );
+      // console.log(componentStyleIds, 'compoundVariants here');
+      if (compoundVariant.ids) {
+        defaultStyleCSSIds.push(
+          //@ts-ignore
+          ...compoundVariant.ids
+        );
+      }
 
       props = deepMergeObjects(props, compoundVariant?.props);
     }