Merge pull request #2028 from gluestack/fix/typing-form-components

Fix/typing form components
gluestack · Apr 3, 2024 · c5d2fc4 · c5d2fc4
2 parents bccfb52 + c894013
commit c5d2fc4
Show file tree

Hide file tree

Showing 7 changed files with 23 additions and 13 deletions.
diff --git a/example/storybook-nativewind/src/core-components/nativewind/link/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/link/index.tsx
@@ -12,7 +12,6 @@ import type { VariantProps } from '@gluestack-ui/nativewind-utils';
 
 import React from 'react';
 export const UILink = createLink({
-  // @ts-ignore
   Root:
     Platform.OS === 'web'
       ? withStyleContext(Pressable)
@@ -47,6 +46,7 @@ const Link = React.forwardRef(
 
 type ILinkTextProps = React.ComponentProps<typeof UILink.Text> &
   VariantProps<typeof linkTextStyle>;
+
 const LinkText = React.forwardRef(
   (
     { className, ...props }: { className?: string } & ILinkTextProps,

diff --git a/example/storybook-nativewind/src/core-components/nativewind/slider/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/slider/index.tsx
@@ -14,7 +14,6 @@ import { withStates } from '@gluestack-ui/nativewind-utils/withStates';
 
 const SCOPE = 'SLIDER';
 export const UISlider = createSlider({
-  // @ts-ignore
   Root:
     Platform.OS === 'web'
       ? withStyleContext(View, SCOPE)
@@ -25,7 +24,6 @@ export const UISlider = createSlider({
   ThumbInteraction: View,
 });
 
-//@ts-ignore
 cssInterop(UISlider, { className: 'style' });
 cssInterop(UISlider.Thumb, { className: 'style' });
 cssInterop(UISlider.Track, { className: 'style' });
@@ -163,7 +161,7 @@ export const Slider = React.forwardRef(
       isReversed = false,
       ...props
     }: any,
-    ref
+    ref?: any
   ) => {
     return (
       <UISlider
@@ -183,7 +181,7 @@ export const Slider = React.forwardRef(
 );
 
 export const SliderThumb = React.forwardRef(
-  ({ className, size, ...props }: any, ref) => {
+  ({ className, size, ...props }: any, ref?: any) => {
     const { size: parentSize } = useStyleContext(SCOPE);
 
     return (
@@ -203,7 +201,7 @@ export const SliderThumb = React.forwardRef(
 );
 
 export const SliderTrack = React.forwardRef(
-  ({ className, ...props }: any, ref) => {
+  ({ className, ...props }: any, ref?: any) => {
     const {
       orientation: parentOrientation,
       size: parentSize,
@@ -228,7 +226,7 @@ export const SliderTrack = React.forwardRef(
 );
 
 export const SliderFilledTrack = React.forwardRef(
-  ({ className, ...props }: any, ref) => {
+  ({ className, ...props }: any, ref?: any) => {
     const { orientation: parentOrientation } = useStyleContext(SCOPE);
 
     return (

diff --git a/example/storybook-nativewind/src/core-components/nativewind/switch/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/switch/index.tsx
@@ -34,7 +34,7 @@ type ISwitchProps = React.ComponentProps<typeof UISwitch> &
 const Switch = React.forwardRef(
   (
     { className, size = 'md', ...props }: { className?: string } & ISwitchProps,
-    ref
+    ref?: any
   ) => {
     return (
       <UISwitch

diff --git a/example/storybook-nativewind/src/core-components/nativewind/textarea/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/textarea/index.tsx
@@ -13,7 +13,6 @@ import { withStates } from '@gluestack-ui/nativewind-utils/withStates';
 import type { VariantProps } from '@gluestack-ui/nativewind-utils';
 const SCOPE = 'TEXTAREA';
 const UITextarea = createTextarea({
-  // @ts-ignore
   Root:
     Platform.OS === 'web'
       ? withStyleContext(View, SCOPE)
@@ -32,6 +31,12 @@ const textareaStyle = tva({
       default:
         'data-[focus=true]:border-primary-700 data-[focus=true]:web:ring-1 data-[focus=true]:web:ring-inset data-[focus=true]:web:ring-primary-700 data-[invalid=true]:border-error-700 data-[invalid=true]:web:ring-1 data-[invalid=true]:web:ring-inset data-[invalid=true]:web:ring-error-700 data-[invalid=true]:hover:border-error-700 data-[invalid=true]:data-[focus=true]:hover:border-primary-700 data-[invalid=true]:data-[focus=true]:hover:web:ring-1 data-[invalid=true]:data-[focus=true]:hover:web:ring-inset data-[invalid=true]:data-[focus=true]:hover:web:ring-primary-700 data-[invalid=true]:data-[disabled=true]:hover:border-error-700 data-[invalid=true]:data-[disabled=true]:hover:web:ring-1 data-[invalid=true]:data-[disabled=true]:hover:web:ring-inset data-[invalid=true]:data-[disabled=true]:hover:web:ring-error-700 ',
     },
+    size: {
+      sm: '',
+      md: '',
+      lg: '',
+      xl: '',
+    },
   },
 });
 
@@ -58,7 +63,7 @@ const Textarea = React.forwardRef(
       size = 'md',
       ...props
     }: { className?: string } & ITextareaProps,
-    ref
+    ref?: any
   ) => {
     return (
       <UITextarea
@@ -77,7 +82,7 @@ type ITextareaInputProps = React.ComponentProps<typeof UITextarea.Input> &
 const TextareaInput = React.forwardRef(
   (
     { className, ...props }: { className?: string } & ITextareaInputProps,
-    ref
+    ref?: any
   ) => {
     const { size: parentSize } = useStyleContext(SCOPE);
 

diff --git a/example/storybook-nativewind/tsconfig.json b/example/storybook-nativewind/tsconfig.json
@@ -13,6 +13,8 @@
         "../../packages/unstyled/alert-dialog/src"
       ],
       "@gluestack-ui/menu": ["../../packages/unstyled/menu/src"],
+      "@gluestack-ui/textarea": ["../../packages/unstyled/textarea/src"],
+      "@gluestack-ui/link": ["../../packages/unstyled/link/src"],
       "@gluestack-ui/nativewind-utils/tva": [
         "../../packages/nativewind/utils/src/tva"
       ],

diff --git a/packages/unstyled/link/src/types.ts b/packages/unstyled/link/src/types.ts
@@ -1,4 +1,5 @@
 import type { MutableRefObject } from 'react';
+import React from 'react';
 import type { GestureResponderEvent, ViewProps } from 'react-native';
 
 export interface InterfaceLinkProps extends ViewProps {
@@ -29,5 +30,7 @@ export type IUseLinkProp = {
 
 export type ILinkComponentType<Root, TextProps> =
   React.ForwardRefExoticComponent<Root & InterfaceLinkProps> & {
-    Text: React.ForwardRefExoticComponent<TextProps>;
+    Text: React.ForwardRefExoticComponent<
+      TextProps & React.RefAttributes<TextProps>
+    >;
   };
diff --git a/packages/unstyled/textarea/src/types.ts b/packages/unstyled/textarea/src/types.ts
@@ -43,5 +43,7 @@ export interface IInputProps {
 
 export type ITextareaComponentType<Root, Input> =
   React.ForwardRefExoticComponent<Root & ITextareaProps> & {
-    Input: React.ForwardRefExoticComponent<Input & IInputProps>;
+    Input: React.ForwardRefExoticComponent<
+      Input & React.RefAttributes<Input> & IInputProps
+    >;
   };