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

Release/@dank style/[email protected]
gluestack · Apr 26, 2023 · a1f6c25 · a1f6c25
2 parents 26ab0f7 + 78291b3
commit a1f6c25
Show file tree

Hide file tree

Showing 7 changed files with 178 additions and 87 deletions.
diff --git a/example/storybook/.ondevice/storybook.requires.js b/example/storybook/.ondevice/storybook.requires.js
@@ -48,6 +48,7 @@ const getStories = () => {
     // require('../src/recipes/BaseStyleSX/BaseStyleSX.stories.tsx'),
     require('../src/api/ColorModeBasedStyles/ColorMode.stories.tsx'),
     require('../src/api/Variants/BaseStyleVariantSizes.stories.tsx'),
+    require('../src/api/AsForwarder/AsForwarder.stories.tsx'),
     // require('../src/recipes/ButtonSizes/ButtonSizes.stories.tsx'),
     // require('../src/recipes/ButtonStateProps/ButtonStateProps.stories.tsx'),
     // require('../src/recipes/ButtonVariant/ButtonVariant.stories.tsx'),

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.1.0",
-    "@dank-style/react": "^0.4.1",
+    "@dank-style/react": "^0.4.2",
     "@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/AsForwarder/AsForwarder.tsx b/example/storybook/src/api/AsForwarder/AsForwarder.tsx
@@ -1,13 +1,105 @@
 import React from 'react';
-import { View } from 'react-native';
+import { View, Text } from 'react-native';
 import { Wrapper } from '../../components/Wrapper';
 import { Camera } from 'lucide-react-native';
-import { StyledHeading, StyledIcon } from '../../ui-components/AsForwarder';
+import { StyledHeading } from '../../ui-components/AsForwarder';
 import { H2 } from '@expo/html-elements';
 import { styled } from '@dank-style/react';
 
 const Box = styled(View, {});
+import Svg from 'react-native-svg';
 
+export function AsForwarder({ as, children, ...props }: any) {
+  console.log(props, 'props here');
+  return <Box>{children}</Box>;
+  // const As: any = as;
+  // return as ? <As {...props}>{children}</As> : <Svg {...props}>{children}</Svg>;
+}
+export const StyledText = styled(
+  Text,
+  {
+    // bg: '$red500',
+    variants: {
+      variant: {
+        solid: {
+          color: '$blue500',
+        },
+      },
+    },
+    // props: {
+    //   variant: 'solid',
+    // },
+  },
+
+  {
+    ancestorStyle: ['_text'],
+  }
+);
+export const StyledView = styled(
+  View,
+  {
+    // props: {
+    //   // size: 10,
+    //   color: 'red',
+    // },
+    _text: {
+      props: {
+        variant: 'solid',
+        // bg: '$red500',
+      },
+      // props: { color: '$red500' },
+    },
+    // variants: {
+    //   variant: {
+    //     md: {
+    //       bg: '$amber400',
+    //       _text: {
+    //         props: {
+    //           variant: 'solid',
+    //         },
+    //         // props: { color: '$red500' },
+    //       },
+    //     },
+    //   },
+    //   // size: {
+    //   //   xs: {
+    //   //     props: {
+    //   //       color: 'blue',
+    //   //       size: 10,
+    //   //     },
+    //   //   },
+    //   //   sm: {
+    //   //     props: {
+    //   //       size: 16,
+    //   //     },
+    //   //   },
+    //   //   md: {
+    //   //     // props: {
+    //   //     //   size: 18,
+    //   //     // },
+    //   //     bg: '$red100',
+    //   //   },
+    //   //   lg: {
+    //   //     props: {
+    //   //       size: 20,
+    //   //     },
+    //   //   },
+    //   //   xl: {
+    //   //     props: {
+    //   //       size: 24,
+    //   //     },
+    //   //   },
+    //   // },
+    // },
+  },
+
+  {
+    ancestorStyle: ['_icon'],
+    descendantStyle: ['_text'],
+    DEBUG: 'STYLED_ICON',
+  },
+  {}
+);
 export function AsForwarderExample() {
   const [state, setState] = React.useState(false);
   return (
@@ -18,14 +110,21 @@ export function AsForwarderExample() {
           alignItems: 'center',
         }}
       >
-        <Box as={H2}>I am a heading</Box>
-        {/* @ts-ignore */}
-        <StyledIcon as={Camera} color="blue" size1="xs">
-          I am a heading
-        </StyledIcon>
+        <StyledView
+        // _text={{
+        //   variant: 'solid',
+        // }}
+        // size={10}
+        // sldkfjlskdjf="sdfsdf"
+        // variant={'md'}
+        >
+          <StyledText>hello</StyledText>
+        </StyledView>
       </View>
     </Wrapper>
   );
 }
 
 export default AsForwarderExample;
+// variant reserved keys
+// not utility props as utility props get resolved first
diff --git a/example/storybook/src/ui-components/AsForwarder/index.tsx b/example/storybook/src/ui-components/AsForwarder/index.tsx
@@ -74,12 +74,12 @@ export const StyledHeading = styled(
 export const StyledIcon = styled(
   AsForwarder,
   {
-    props: {
-      // size: 10,
-      color: 'red',
-    },
+    // props: {
+    //   // size: 10,
+    //   color: 'red',
+    // },
     variants: {
-      size1: {
+      size: {
         xs: {
           props: {
             color: 'blue',
@@ -109,6 +109,7 @@ export const StyledIcon = styled(
       },
     },
   },
+
   {
     ancestorStyle: ['_icon'],
     DEBUG: 'STYLED_ICON',

diff --git a/packages/react/CHANGELOG.md b/packages/react/CHANGELOG.md
@@ -1,5 +1,11 @@
 # @dank-style/react
 
+## 0.4.2
+
+### Patch Changes
+
+- Conflicting variant name with component property fixes (PR)[https://github.com/gluestack/dank-style/pull/158]
+
 ## 0.4.1
 
 ### Patch Changes

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