Merge pull request #1603 from gluestack/fix/typescript-intellisense

Fix/typescript intellisense
gluestack · Jan 16, 2024 · 3426303 · 3426303
2 parents 995d7e3 + e5e21bb
commit 3426303
Show file tree

Hide file tree

Showing 5 changed files with 147 additions and 68 deletions.
diff --git a/example/expo-router-example/app/_layout.tsx b/example/expo-router-example/app/_layout.tsx
@@ -9,7 +9,7 @@ import { SplashScreen, Stack } from 'expo-router';
 import React, { useEffect } from 'react';
 import { useColorScheme } from 'react-native';
 import { StyledProvider } from '@gluestack-style/react';
-import { config } from '../gluestack-ui.config';
+import { config } from '@gluestack-ui/config';
 
 export {
   // Catch any errors thrown by the Layout component.

diff --git a/packages/styled/react/src/styled.tsx b/packages/styled/react/src/styled.tsx
@@ -1,16 +1,22 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
 /* eslint-disable react-hooks/exhaustive-deps */
-import React, { useContext, useEffect, useMemo, useRef, useState } from 'react';
+import React, {
+  ForwardRefExoticComponent,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 
 import type {
   OrderedSXResolved,
   StyleIds,
-  ComponentProps,
   IVerbosedTheme,
   ITheme,
   ExtendedConfigType,
   IComponentStyleConfig,
-  StyledConfig,
-  UtilityProps,
+  StyledComponentProps,
 } from './types';
 import {
   deepMerge,
@@ -1024,14 +1030,7 @@ export function verboseStyled<P, Variants, ComCon>(
       // styledIds: BUILD_TIME_STYLE_IDS = [],
       // sxHash: BUILD_TIME_sxHash = '',
       ...componentProps
-    }: Omit<
-      Omit<P, keyof Variants> &
-        Partial<ComponentProps<ITypeReactNativeStyles, Variants, P, ComCon>> &
-        Partial<UtilityProps<ITypeReactNativeStyles, Variants, P>> & {
-          as?: any;
-        },
-      'animationComponentGluestack'
-    >,
+    }: any,
     ref: React.ForwardedRef<P>
   ) => {
     const isClient = React.useRef(false);
@@ -2144,12 +2143,14 @@ export function verboseStyled<P, Variants, ComCon>(
   //@ts-ignore
   StyledComp.isStyledComponent = true;
 
-  return StyledComp as typeof StyledComp & { styledConfig?: StyledConfig };
+  return StyledComp as ForwardRefExoticComponent<
+    StyledComponentProps<ITypeReactNativeStyles, Variants, P, ComCon>
+  >;
 }
 
 export function styled<P, Variants, ComCon>(
   Component: React.ComponentType<P>,
-  theme: ITheme<Variants, P>,
+  theme: ITheme<Variants, P> = {},
   componentStyleConfig?: IComponentStyleConfig<ComCon>,
   ExtendedConfig?: ExtendedConfigType,
   BUILD_TIME_PARAMS?: {

diff --git a/packages/styled/react/src/types.ts b/packages/styled/react/src/types.ts
@@ -7,7 +7,7 @@ import type {
   ViewStyle,
 } from 'react-native';
 import type { propertyTokenMap } from './propertyTokenMap';
-import type { CSSProperties } from 'react';
+import type { CSSProperties, ForwardRefExoticComponent } from 'react';
 
 export type RNStyledProps = ViewStyle | ImageStyle | TextStyle;
 export type RNProps = ViewProps | TextProps | ImageProps;
@@ -781,57 +781,81 @@ interface GenericComponents {
 
 /********************* COMPONENT PROPS TYPE *****************************************/
 
-export type ComponentProps<GenericComponentStyles, Variants, P, ComCon> =
-  SxStyleProps<
-    GenericComponentStyles,
-    Variants,
-    P,
-    'animationComponentGluestack' extends keyof P
-      ? P['animationComponentGluestack'] extends true
-        ? Plugins
-        : []
+export type StyledComponentProps<GenericComponentStyles, Variants, P, ComCon> =
+  Omit<
+    'sx' extends keyof P
+      ? P & VariantProps<Variants, ComCon>
+      : Partial<
+          Omit<
+            P &
+              ComponentProps<GenericComponentStyles, Variants, P> &
+              VariantProps<Variants, ComCon> &
+              UtilityProps<GenericComponentStyles, Variants, P>,
+            'animationComponentGluestack'
+          >
+        >,
+    'animationComponentGluestack'
+  >;
+
+export type GluestackComponent<GenericComponentStyles, Variants, P, ComCon> =
+  ForwardRefExoticComponent<
+    StyledComponentProps<GenericComponentStyles, Variants, P, ComCon>
+  >;
+
+export type VariantProps<Variants, ComCon> =
+  GSConfig['globalStyle'] extends object
+    ? {
+        [Key in keyof MergeNestedThree<
+          GlobalVariants,
+          Variants,
+          // @ts-ignore
+          Components[`${ComCon}`]['theme']['variants']
+        >]?: keyof MergeNestedThree<
+          GlobalVariants,
+          Variants,
+          // @ts-ignore
+          Components[`${ComCon}`]['theme']['variants']
+        >[Key] extends 'true' | 'false'
+          ? boolean
+          : keyof MergeNestedThree<
+              GlobalVariants,
+              Variants,
+              // @ts-ignore
+              Components[`${ComCon}`]['theme']['variants']
+            >[Key];
+      }
+    : {
+        [Key in keyof MergeNested<
+          Variants,
+          // @ts-ignore
+          Components[`${ComCon}`]['theme']['variants']
+        >]?: keyof MergeNested<
+          Variants, // @ts-ignore
+          Components[`${ComCon}`]['theme']['variants']
+        >[Key] extends 'true' | 'false'
+          ? boolean
+          : keyof MergeNested<
+              Variants,
+              // @ts-ignore
+              Components[`${ComCon}`]['theme']['variants']
+            >[Key];
+      };
+
+export type ComponentProps<GenericComponentStyles, Variants, P> = SxStyleProps<
+  GenericComponentStyles,
+  Variants,
+  P,
+  'animationComponentGluestack' extends keyof P
+    ? P['animationComponentGluestack'] extends true
+      ? Plugins
       : []
-  > & {
-    states?: {
-      [K in IState]?: boolean;
-    };
-  } & (GSConfig['globalStyle'] extends object
-      ? {
-          [Key in keyof MergeNestedThree<
-            GlobalVariants,
-            Variants,
-            // @ts-ignore
-            Components[`${ComCon}`]['theme']['variants']
-          >]?: keyof MergeNestedThree<
-            GlobalVariants,
-            Variants,
-            // @ts-ignore
-            Components[`${ComCon}`]['theme']['variants']
-          >[Key] extends 'true' | 'false'
-            ? boolean
-            : keyof MergeNestedThree<
-                GlobalVariants,
-                Variants,
-                // @ts-ignore
-                Components[`${ComCon}`]['theme']['variants']
-              >[Key];
-        } & Omit<P, keyof Variants>
-      : {
-          [Key in keyof MergeNested<
-            Variants,
-            // @ts-ignore
-            Components[`${ComCon}`]['theme']['variants']
-          >]?: keyof MergeNested<
-            Variants, // @ts-ignore
-            Components[`${ComCon}`]['theme']['variants']
-          >[Key] extends 'true' | 'false'
-            ? boolean
-            : keyof MergeNested<
-                Variants,
-                // @ts-ignore
-                Components[`${ComCon}`]['theme']['variants']
-              >[Key];
-        });
+    : []
+> & {
+  states?: {
+    [K in IState]?: boolean;
+  };
+  as?: any;
+};
 
 export type VerbosedUtilityProps<
   GenericComponentStyles,

diff --git a/packages/themed/package.json b/packages/themed/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@gluestack-ui/themed",
-  "version": "1.0.35",
+  "version": "1.0.40-alpha.7",
   "main": "build/index.js",
   "types": "build/index.d.ts",
   "module": "build/index",
@@ -69,7 +69,7 @@
     "@babel/preset-env": "^7.22.9",
     "@babel/preset-react": "^7.22.5",
     "@babel/preset-typescript": "^7.22.5",
-    "@gluestack-style/react": "^1.0.32",
+    "@gluestack-style/react": "1.0.40-alpha.6",
     "@types/react-native": "^0.72.3",
     "file-loader": "^6.2.0",
     "react": "^18.2.0",

diff --git a/yarn.lock b/yarn.lock
@@ -3260,6 +3260,60 @@
   dependencies:
     "@legendapp/motion" "^2.2.0"
 
+"@gluestack-style/react@*", "@gluestack-style/react@^1.0.22", "@gluestack-style/react@^1.0.27", "@gluestack-style/react@^1.0.7":
+  version "1.0.39"
+  resolved "https://registry.yarnpkg.com/@gluestack-style/react/-/react-1.0.39.tgz#85dba26577291f1443a858245d99dbe1e788b15d"
+  integrity sha512-Vw3uhVHUakiQxWdQbPlAam6PDIqSBy4ac+5ztzZnqTF5BJnzn+IhslCM9th/zAgz1P+11JVUW279RAkhbBjnVA==
+  dependencies:
+    inline-style-prefixer "^6.0.1"
+    normalize-css-color "^1.0.2"
+
+"@gluestack-ui/config@^1.0.7":
+  version "1.0.12"
+  resolved "https://registry.yarnpkg.com/@gluestack-ui/config/-/config-1.0.12.tgz#a2bad93f03de5edaf8aab57149b92f2cb98f9a13"
+  integrity sha512-T8cGsRdWHMpt9iVxac/hxpdoqq0rq83t+b5tZik9cKy8LLljRpXgy4zTELHbBFvHnDJmjlFgzhFsZavU90hbSg==
+
+"@gluestack-ui/themed@^1.0.20":
+  version "1.0.35"
+  resolved "https://registry.yarnpkg.com/@gluestack-ui/themed/-/themed-1.0.35.tgz#4129fcbc055351f335fdf4d1195d43e2acdcb5d9"
+  integrity sha512-zozkKnuCOuAKBrArgzt703EHcbXYL5Y4S8irhPL9Vvu9bs9QywqXLZA8PkK9RNUIk8A62A2jIKEtFpVaMqjiUA==
+  dependencies:
+    "@expo/html-elements" latest
+    "@gluestack-style/animation-resolver" "1.0.3"
+    "@gluestack-style/legend-motion-animation-driver" "1.0.3"
+    "@gluestack-ui/accordion" "1.0.0"
+    "@gluestack-ui/actionsheet" "0.2.36"
+    "@gluestack-ui/alert" "0.1.12"
+    "@gluestack-ui/alert-dialog" "0.1.24"
+    "@gluestack-ui/avatar" "0.1.15"
+    "@gluestack-ui/button" "0.1.34"
+    "@gluestack-ui/checkbox" "0.1.22"
+    "@gluestack-ui/divider" "0.1.8"
+    "@gluestack-ui/fab" "0.1.17"
+    "@gluestack-ui/form-control" "0.1.15"
+    "@gluestack-ui/icon" "0.1.20"
+    "@gluestack-ui/image" "0.1.7"
+    "@gluestack-ui/input" "0.1.23"
+    "@gluestack-ui/linear-gradient" "0.1.2"
+    "@gluestack-ui/link" "0.1.16"
+    "@gluestack-ui/menu" "0.2.26"
+    "@gluestack-ui/modal" "0.1.28"
+    "@gluestack-ui/overlay" "0.1.12"
+    "@gluestack-ui/popover" "0.1.28"
+    "@gluestack-ui/pressable" "0.1.13"
+    "@gluestack-ui/progress" "0.1.12"
+    "@gluestack-ui/provider" "0.1.10"
+    "@gluestack-ui/radio" "0.1.23"
+    "@gluestack-ui/select" "0.1.21"
+    "@gluestack-ui/slider" "0.1.19"
+    "@gluestack-ui/spinner" "0.1.14"
+    "@gluestack-ui/switch" "0.1.17"
+    "@gluestack-ui/tabs" "0.1.14"
+    "@gluestack-ui/textarea" "0.1.19"
+    "@gluestack-ui/toast" "1.0.3"
+    "@gluestack-ui/tooltip" "0.1.25"
+    "@legendapp/motion" latest
+
 "@gluestack-ui/toast@^0.1.7":
   version "0.1.20"
   resolved "https://registry.yarnpkg.com/@gluestack-ui/toast/-/toast-0.1.20.tgz#863453f75d2e941000204a9524161bfd2500e320"