From dd6c144c0cd43bf67a13e7ab8f462e249bb4ac10 Mon Sep 17 00:00:00 2001 From: ankit-tailor Date: Mon, 16 Oct 2023 12:29:56 +0530 Subject: [PATCH 1/7] fix: opacity tokenization --- packages/react/src/propertyTokenMap.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/react/src/propertyTokenMap.ts b/packages/react/src/propertyTokenMap.ts index 9ffecb11b..5a991f2e5 100644 --- a/packages/react/src/propertyTokenMap.ts +++ b/packages/react/src/propertyTokenMap.ts @@ -128,6 +128,7 @@ export const propertyTokenMap = { shadowColor: colors, shadowOpacity: opacity, + opacity: opacity, shadow: shadows, // Media Query From f51a303b2321b5197c0e5a828abfd52cb9733342 Mon Sep 17 00:00:00 2001 From: ankit-tailor Date: Mon, 16 Oct 2023 12:34:03 +0530 Subject: [PATCH 2/7] fix: opacity typings --- packages/react/src/types.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/react/src/types.ts b/packages/react/src/types.ts index 746b97627..5b80e98f3 100644 --- a/packages/react/src/types.ts +++ b/packages/react/src/types.ts @@ -65,6 +65,7 @@ export interface Tokens { breakpoints?: { [key: GenericKey]: Record & {} }; mediaQueries?: { [key: GenericKey]: Record & {} }; letterSpacings?: { [key: GenericKey]: Record & {} }; + opacity?: { [key: GenericKey]: Record & {} }; lineHeights?: { [key: GenericKey]: any }; fontWeights?: { [key: GenericKey]: any }; fonts?: { [key: GenericKey]: any }; From ee0e2eae83ef0bd97510c2441ee8ae2cad72e8d6 Mon Sep 17 00:00:00 2001 From: ankit-tailor Date: Mon, 16 Oct 2023 12:53:40 +0530 Subject: [PATCH 3/7] fix: sizes scale should not have negative tokens --- packages/react/src/types.ts | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/packages/react/src/types.ts b/packages/react/src/types.ts index 5b80e98f3..daf8e4b96 100644 --- a/packages/react/src/types.ts +++ b/packages/react/src/types.ts @@ -888,14 +888,12 @@ export type ExtendRNStyle = GenericComponentStyles[key]; type WithSizeNegativeValue = keyof Tokens extends 'sizes' - ? WithNegativeValue< - //@ts-expect-error - | StringifyToken + ? //@ts-expect-error + | StringifyToken //@ts-expect-error | StringifyToken - > : //@ts-expect-error - WithNegativeValue>; + StringifyToken; export type TokenizedRNStyleProps< GenericComponentStyles, From 6d35eba774acd927787a70a0e5865b14a0378069 Mon Sep 17 00:00:00 2001 From: ankit-tailor Date: Mon, 16 Oct 2023 13:04:28 +0530 Subject: [PATCH 4/7] fix: _experimentalNestedProvider optional --- packages/react/src/StyledProvider.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react/src/StyledProvider.tsx b/packages/react/src/StyledProvider.tsx index e65697acc..3006403cb 100644 --- a/packages/react/src/StyledProvider.tsx +++ b/packages/react/src/StyledProvider.tsx @@ -43,7 +43,7 @@ export const StyledProvider: React.FC<{ colorMode?: COLORMODES; children?: React.ReactNode; globalStyles?: any; - _experimentalNestedProvider: boolean; + _experimentalNestedProvider?: boolean; }> = ({ config, colorMode, From f3fb15e5b7a00230a4b313fedee54cd3094fb5b7 Mon Sep 17 00:00:00 2001 From: ankit-tailor Date: Mon, 16 Oct 2023 15:46:23 +0530 Subject: [PATCH 5/7] fix: component and style prop conflict typing --- packages/react/src/styled.tsx | 8 +-- packages/react/src/types.ts | 116 ++++++++++++++++++---------------- 2 files changed, 64 insertions(+), 60 deletions(-) diff --git a/packages/react/src/styled.tsx b/packages/react/src/styled.tsx index aa2872489..af357c973 100644 --- a/packages/react/src/styled.tsx +++ b/packages/react/src/styled.tsx @@ -5,7 +5,6 @@ import type { OrderedSXResolved, StyleIds, ComponentProps, - UtilityProps, IVerbosedTheme, ITheme, ExtendedConfigType, @@ -996,12 +995,7 @@ export function verboseStyled( // sxHash: BUILD_TIME_sxHash = '', ...componentProps }: Omit< - Omit & - Partial> & - Partial> & { - as?: any; - children?: any; - }, + ComponentProps, 'animationComponentGluestack' >, ref: React.ForwardedRef

diff --git a/packages/react/src/types.ts b/packages/react/src/types.ts index 5b80e98f3..ededf14b9 100644 --- a/packages/react/src/types.ts +++ b/packages/react/src/types.ts @@ -735,61 +735,71 @@ interface GenericComponents { /********************* COMPONENT PROPS TYPE *****************************************/ 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]; - }); + Partial< + Omit & + SxStyleProps< + GenericComponentStyles, + Variants, + P, + 'animationComponentGluestack' extends keyof P + ? P['animationComponentGluestack'] extends true + ? Plugins + : [] + : [] + > & { + as?: any; + children?: any; + } & UtilityProps & { + 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]; + }) + >; -export type UtilityProps = TokenizedRNStyleProps< - GetRNStyles +export type UtilityProps = Omit< + TokenizedRNStyleProps>, + keyof GenericComponentProps > & - AliasesProps>; + Omit< + AliasesProps>, + keyof GenericComponentProps + >; /********************* UTILITY TYPE *****************************************/ From 8853ed3d99b4f0dbe7991dd1a8dd90ff9686b4d9 Mon Sep 17 00:00:00 2001 From: ankit-tailor Date: Mon, 16 Oct 2023 17:39:15 +0530 Subject: [PATCH 6/7] feat: add utility props from rn 0.71 --- packages/react/src/core/styled-system.ts | 9 +++++++++ packages/react/src/propertyTokenMap.ts | 9 +++++++++ 2 files changed, 18 insertions(+) diff --git a/packages/react/src/core/styled-system.ts b/packages/react/src/core/styled-system.ts index 0238c473d..b942220bf 100644 --- a/packages/react/src/core/styled-system.ts +++ b/packages/react/src/core/styled-system.ts @@ -9,6 +9,10 @@ export const CSSPropertiesMap = { borderTopWidth: '0', borderEndWidth: '0', borderStartWidth: '0', + borderEndEndRadius: '0', + borderStartStartRadius: '0', + borderStartEndRadius: '0', + borderEndStartRadius: '0', borderWidth: '0', bottom: 'auto', direction: 'ltr', @@ -65,6 +69,9 @@ export const CSSPropertiesMap = { borderBottomLeftRadius: '0', borderBottomRightRadius: '0', borderColor: 'initial', + borderBlockColor: 'initial', + borderBlockEndColor: 'initial', + borderBlockStartColor: 'initial', borderRadius: '0', borderTopLeftRadius: '0', borderTopRightRadius: '0', @@ -92,6 +99,7 @@ export const CSSPropertiesMap = { textShadowOffset: '0px 0px', textShadowRadius: '0', textAlignVertical: 'auto', + verticalAlign: 'auto', letterSpacing: 'normal', textDecorationColor: 'initial', textDecorationStyle: 'solid', @@ -101,6 +109,7 @@ export const CSSPropertiesMap = { borderStartColor: 'initial', borderTopEndRadius: '0', borderTopStartRadius: '0', + userSelect: 'auto', }; export const reservedKeys = { diff --git a/packages/react/src/propertyTokenMap.ts b/packages/react/src/propertyTokenMap.ts index 5a991f2e5..64f87b3a1 100644 --- a/packages/react/src/propertyTokenMap.ts +++ b/packages/react/src/propertyTokenMap.ts @@ -127,6 +127,15 @@ export const propertyTokenMap = { textDecorationColor: colors, shadowColor: colors, + borderBlockColor: colors, + borderBlockEndColor: colors, + borderBlockStartColor: colors, + + borderEndEndRadius: radii, + borderStartStartRadius: radii, + borderStartEndRadius: radii, + borderEndStartRadius: radii, + shadowOpacity: opacity, opacity: opacity, From 159f79e7a4fbdef4b2ed2f6d22a6a570a80da93c Mon Sep 17 00:00:00 2001 From: ankit-tailor Date: Mon, 16 Oct 2023 18:58:28 +0530 Subject: [PATCH 7/7] v1.0.6 --- packages/react/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react/package.json b/packages/react/package.json index ff363ba47..b6b5f4e77 100644 --- a/packages/react/package.json +++ b/packages/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.5", + "version": "1.0.6", "keywords": [ "React Native", "Next.js",