diff --git a/example/expo-router-example/app/_layout.tsx b/example/expo-router-example/app/_layout.tsx index 447fab7a3c..7d7b00822e 100644 --- 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/CHANGELOG.md b/packages/styled/react/CHANGELOG.md index 2ea4c56c20..11ea2254c5 100644 --- a/packages/styled/react/CHANGELOG.md +++ b/packages/styled/react/CHANGELOG.md @@ -1,11 +1,18 @@ # @gluestack-style/react +## 1.0.40 + +### Patch Changes + +- Fixed typescript performance for composed components [PR](https://github.com/gluestack/gluestack-ui/pull/1603) +- Fixed font resolver style declaration [PR](https://github.com/gluestack/gluestack-ui/pull/1643) + ## 1.0.39 ### Patch Changes -- - Fixed useToken hook with theme support [PR](https://github.com/gluestack/gluestack-ui/pull/1634) - - Fixed resolved props tokenization for mobile [PR](https://github.com/gluestack/gluestack-ui/pull/1632) +- Fixed useToken hook with theme support [PR](https://github.com/gluestack/gluestack-ui/pull/1634) +- Fixed resolved props tokenization for mobile [PR](https://github.com/gluestack/gluestack-ui/pull/1632) ## 1.0.38 diff --git a/packages/styled/react/package.json b/packages/styled/react/package.json index 151f05f37a..dc77a5f9eb 100644 --- a/packages/styled/react/package.json +++ b/packages/styled/react/package.json @@ -1,7 +1,7 @@ { "name": "@gluestack-style/react", "description": "A universal & performant styling library for React Native, Next.js & React", - "version": "1.0.39", + "version": "1.0.40", "keywords": [ "React Native", "Next.js", diff --git a/packages/styled/react/src/plugins/font-resolver.tsx b/packages/styled/react/src/plugins/font-resolver.tsx index 81e4b748aa..79e266056c 100644 --- a/packages/styled/react/src/plugins/font-resolver.tsx +++ b/packages/styled/react/src/plugins/font-resolver.tsx @@ -97,7 +97,11 @@ export class FontResolver implements IStyledPlugin, FontPlugin { } else { fontFamilyValue = `${fontFamilyValue}_400Regular`; } - if (style.fontStyle && typeof style.fontStyle === 'string') { + if ( + style.fontStyle && + style.fontStyle !== 'normal' && + typeof style.fontStyle === 'string' + ) { const fontStyle = style.fontStyle.replace(/^\w/, (c: any) => c.toUpperCase() ); @@ -105,9 +109,6 @@ export class FontResolver implements IStyledPlugin, FontPlugin { } style.fontFamily = fontFamilyValue; - - this.#fontFamily = fontFamilyValue; - delete style.fontWeight; delete style.fontStyle; } @@ -139,6 +140,9 @@ export class FontResolver implements IStyledPlugin, FontPlugin { this.register(styledUtils); this.name = 'FontHandler'; this.mapFonts = mapFonts || this.mapFonts; + this.#fontFamily = {}; + this.#fontFamilyTokenConfig = {}; + this.#fontWeightsTokenConfig = {}; } inputMiddleWare( @@ -161,7 +165,7 @@ export class FontResolver implements IStyledPlugin, FontPlugin { return [modifiedStyledObject, shouldUpdate, _, Component, ignoreKeys]; } - #fontFamily: any = {}; + #fontFamily: any; #fontFamilyTokenConfig: any = {}; @@ -191,7 +195,7 @@ export class FontResolver implements IStyledPlugin, FontPlugin { ignoreKeys.add(styledObjectKey); this.#fontFamily = setObjectKeyValue( - { ...this.#fontFamily }, + this.#fontFamily, [...keyPath, styledObjectKey], styledObject[styledObjectKey] ); @@ -200,7 +204,7 @@ export class FontResolver implements IStyledPlugin, FontPlugin { if (styledObjectKey === 'fontWeight') { ignoreKeys.add(styledObjectKey); this.#fontFamily = setObjectKeyValue( - { ...this.#fontFamily }, + this.#fontFamily, [...keyPath, styledObjectKey], styledObject[styledObjectKey] ); @@ -209,7 +213,7 @@ export class FontResolver implements IStyledPlugin, FontPlugin { if (styledObjectKey === 'fontStyle') { ignoreKeys.add(styledObjectKey); this.#fontFamily = setObjectKeyValue( - { ...this.#fontFamily }, + this.#fontFamily, [...keyPath, styledObjectKey], styledObject[styledObjectKey] ); diff --git a/packages/styled/react/src/styled.tsx b/packages/styled/react/src/styled.tsx index ea92541f76..b8df51cbe2 100644 --- 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( // styledIds: BUILD_TIME_STYLE_IDS = [], // sxHash: BUILD_TIME_sxHash = '', ...componentProps - }: Omit< - Omit & - Partial> & - Partial> & { - as?: any; - }, - 'animationComponentGluestack' - >, + }: any, ref: React.ForwardedRef

) => { const isClient = React.useRef(false); @@ -2144,12 +2143,14 @@ export function verboseStyled( //@ts-ignore StyledComp.isStyledComponent = true; - return StyledComp as typeof StyledComp & { styledConfig?: StyledConfig }; + return StyledComp as ForwardRefExoticComponent< + StyledComponentProps + >; } export function styled( Component: React.ComponentType

, - theme: ITheme, + theme: ITheme = {}, componentStyleConfig?: IComponentStyleConfig, ExtendedConfig?: ExtendedConfigType, BUILD_TIME_PARAMS?: { diff --git a/packages/styled/react/src/types.ts b/packages/styled/react/src/types.ts index 05e1d65973..385cd556c7 100644 --- 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 = - SxStyleProps< - GenericComponentStyles, - Variants, - P, - 'animationComponentGluestack' extends keyof P - ? P['animationComponentGluestack'] extends true - ? Plugins - : [] +export type StyledComponentProps = + Omit< + 'sx' extends keyof P + ? P & VariantProps + : Partial< + Omit< + P & + ComponentProps & + VariantProps & + UtilityProps, + 'animationComponentGluestack' + > + >, + 'animationComponentGluestack' + >; + +export type GluestackComponent = + ForwardRefExoticComponent< + StyledComponentProps + >; + +export type VariantProps = + 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 = 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 - : { - [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/CHANGELOG.md b/packages/themed/CHANGELOG.md index bd6fa7d2e1..1b097e4a6a 100644 --- a/packages/themed/CHANGELOG.md +++ b/packages/themed/CHANGELOG.md @@ -1,5 +1,12 @@ # @gluestack-ui/themed +## 1.0.36 + +### Patch Changes + +- Updated dependencies + - `@gluestack-style/react@1.0.40` + ## 1.0.35 ### Patch Changes diff --git a/packages/themed/package.json b/packages/themed/package.json index 6f97026d71..338978fb76 100644 --- 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.36", "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", "@types/react-native": "^0.72.3", "file-loader": "^6.2.0", "react": "^18.2.0", @@ -82,7 +82,7 @@ "webpack-cli": "^5.1.4" }, "peerDependencies": { - "@gluestack-style/react": ">=1.0", + "@gluestack-style/react": ">=1.0.40", "@types/react-native": ">=0.72", "react": ">=16", "react-dom": ">=16", diff --git a/yarn.lock b/yarn.lock index 197f06bcb8..61fe1c3157 100644 --- 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"