Merge branch 'patch' of github.com:gluestack/gluestack-ui into patch

gluestack · Mar 5, 2024 · 38e25fb · 38e25fb
2 parents 8c9aae6 + b56beb8
commit 38e25fb
Show file tree

Hide file tree

Showing 8 changed files with 74 additions and 46 deletions.
diff --git a/example/storybook-nativewind/src/core-components/nativewind/box/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/box/index.tsx
@@ -1,13 +1,19 @@
 import React from 'react';
 import { View } from 'react-native';
-import { tva } from '@gluestack-ui/nativewind-utils';
+import { tva, VariantProps } from '@gluestack-ui/nativewind-utils';
 
 const boxStyle = tva({});
-const Box = React.forwardRef(({ className, ...props }: any, ref) => {
-  return (
-    <View ref={ref} {...props} className={boxStyle({ class: className })} />
-  );
-});
+
+type IBoxProps = React.ComponentProps<typeof View> &
+  VariantProps<typeof boxStyle>;
+
+const Box = React.forwardRef(
+  ({ className, ...props }: IBoxProps, ref?: any) => {
+    return (
+      <View ref={ref} {...props} className={boxStyle({ class: className })} />
+    );
+  }
+);
 
 Box.displayName = 'Box';
 export { Box };
diff --git a/example/storybook-nativewind/src/core-components/nativewind/text/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/text/index.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { tva } from '@gluestack-ui/nativewind-utils';
+import { tva, VariantProps } from '@gluestack-ui/nativewind-utils';
 import { Text as RNText } from 'react-native';
 
 const textStyle = tva({
@@ -43,35 +43,44 @@ const textStyle = tva({
   },
 });
 
-const Text = ({
-  className,
-  isTruncated,
-  bold,
-  underline,
-  strikeThrough,
-  size = 'md',
-  sub,
-  italic,
-  highlight,
-  ...props
-}: any) => {
-  return (
-    <RNText
-      className={textStyle({
-        isTruncated,
-        bold,
-        underline,
-        strikeThrough,
-        size,
-        sub,
-        italic,
-        highlight,
-        class: className,
-      })}
-      {...props}
-    />
-  );
-};
+type ITextProps = React.ComponentProps<typeof RNText> &
+  VariantProps<typeof textStyle>;
+
+const Text = React.forwardRef(
+  (
+    {
+      className,
+      isTruncated,
+      bold,
+      underline,
+      strikeThrough,
+      size = 'md',
+      sub,
+      italic,
+      highlight,
+      ...props
+    }: ITextProps,
+    ref?: any
+  ) => {
+    return (
+      <RNText
+        className={textStyle({
+          isTruncated,
+          bold,
+          underline,
+          strikeThrough,
+          size,
+          sub,
+          italic,
+          highlight,
+          class: className,
+        })}
+        {...props}
+        ref={ref}
+      />
+    );
+  }
+);
 
 Text.displayName = 'Text';
 

diff --git a/example/storybook-nativewind/src/core-components/nativewind/vstack/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/vstack/index.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { tva } from '@gluestack-ui/nativewind-utils';
+import { tva, VariantProps } from '@gluestack-ui/nativewind-utils';
 import { View } from 'react-native';
 
 const vstackStyle = tva({
@@ -21,14 +21,20 @@ const vstackStyle = tva({
   },
 });
 
-const VStack = ({ className, space, reversed, ...props }: any) => {
-  return (
-    <View
-      className={vstackStyle({ space, reversed, class: className })}
-      {...props}
-    />
-  );
-};
+type IVStackProps = React.ComponentProps<typeof View> &
+  VariantProps<typeof vstackStyle>;
+
+const VStack = React.forwardRef(
+  ({ className, space, reversed, ...props }: IVStackProps, ref?: any) => {
+    return (
+      <View
+        className={vstackStyle({ space, reversed, class: className })}
+        {...props}
+        ref={ref}
+      />
+    );
+  }
+);
 
 VStack.displayName = 'VStack';
 

diff --git a/packages/nativewind/utils/package.json b/packages/nativewind/utils/package.json
@@ -14,7 +14,7 @@
     "ios",
     "nextjs"
   ],
-  "version": "0.0.7",
+  "version": "0.0.8",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",
   "types": "lib/typescript/index.d.ts",

diff --git a/packages/nativewind/utils/src/context.ts b/packages/nativewind/utils/src/context.ts
@@ -1,3 +1,5 @@
+'use client';
+
 import { createContext, useContext } from 'react';
 export const ParentContext = createContext({});
 

diff --git a/packages/nativewind/utils/src/withStates.tsx b/packages/nativewind/utils/src/withStates.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import React from 'react';
 import { extractDataClassName } from './utils';
 

diff --git a/packages/nativewind/utils/src/withStyleContext.tsx b/packages/nativewind/utils/src/withStyleContext.tsx
@@ -1,3 +1,4 @@
+'use client';
 import React from 'react';
 import { ParentContext } from './context';
 

diff --git a/packages/nativewind/utils/src/withStyleContextAndStates.tsx b/packages/nativewind/utils/src/withStyleContextAndStates.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import React from 'react';
 import { extractDataClassName } from './utils';
 import { ParentContext } from './context';