From 66bfd1054fe3576bc0529e4dedfee78c4c83d6ed Mon Sep 17 00:00:00 2001 From: ankit-tailor Date: Wed, 25 Oct 2023 18:40:13 +0530 Subject: [PATCH 01/14] v1.0.9-alpha.1 --- 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 d04887df..2f6eec68 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.8", + "version": "1.0.9-alpha.1", "keywords": [ "React Native", "Next.js", From 59310dbd7c8c6017a23fc4a90e46ab89dd1ec90a Mon Sep 17 00:00:00 2001 From: ankit-tailor Date: Thu, 26 Oct 2023 11:57:50 +0530 Subject: [PATCH 02/14] fix: props forwarding for composed styled components --- packages/react/src/styled.tsx | 24 ++++++++++++++++++++++-- 1 file changed, 22 insertions(+), 2 deletions(-) diff --git a/packages/react/src/styled.tsx b/packages/react/src/styled.tsx index 6488369a..3fc072b3 100644 --- a/packages/react/src/styled.tsx +++ b/packages/react/src/styled.tsx @@ -785,10 +785,13 @@ const getStyleIdsFromMap = ( styleIds: any ) => { let componentExtendedConfig = CONFIG; + if (ExtendedConfig) { - componentExtendedConfig = deepMerge(CONFIG, ExtendedConfig); + componentExtendedConfig = deepMergeObjects(CONFIG, ExtendedConfig); } + Object.assign(styledSystemProps, componentExtendedConfig?.aliases); + const componentStyleIds = styleIds.component; const componentDescendantStyleIds = styleIds.descendant; @@ -1022,6 +1025,7 @@ export function verboseStyled( const applySxDescendantStyleCSSIdsAndPropsWithKey = useRef({}); const styledContext = useStyled(); + const { theme: activeTheme } = useTheme(); const ancestorStyleContext = useContext(AncestorStyleContext); @@ -1041,6 +1045,7 @@ export function verboseStyled( ...styledContext.config, propertyTokenMap, }; + // for extended components const EXTENDED_THEME = @@ -1939,6 +1944,7 @@ export function verboseStyled( plugins?.length > 0 ? { ...variantProps, + states: states, sx: componentProps.sx, } : {}; @@ -1949,7 +1955,9 @@ export function verboseStyled( component = ( ( ); } } else { - component = ( + //@ts-ignores + component = Component.isStyledComponent ? ( + + {children} + + ) : ( Date: Thu, 26 Oct 2023 12:24:08 +0530 Subject: [PATCH 03/14] feat: add component config as data props for figma generation --- packages/react/package.json | 2 +- .../react/src/generateStylePropsFromCSSIds.ts | 13 ++++++++++++- packages/react/src/styled.tsx | 17 ++++++++++++++++- 3 files changed, 29 insertions(+), 3 deletions(-) diff --git a/packages/react/package.json b/packages/react/package.json index d04887df..4bbf3757 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.8", + "version": "1.0.9-alpha.2", "keywords": [ "React Native", "Next.js", diff --git a/packages/react/src/generateStylePropsFromCSSIds.ts b/packages/react/src/generateStylePropsFromCSSIds.ts index 72cdc4c2..76b364ca 100644 --- a/packages/react/src/generateStylePropsFromCSSIds.ts +++ b/packages/react/src/generateStylePropsFromCSSIds.ts @@ -131,7 +131,8 @@ export function generateStylePropsFromCSSIds( props: any, styleCSSIds: any, config: any, - activeTheme: any + activeTheme: any, + componentConfig: any ) { const propsStyles = Array.isArray(props?.style) ? props?.style @@ -178,5 +179,15 @@ export function generateStylePropsFromCSSIds( // DONOT REMOVE THIS LINE, THIS IS FOR SPECIFIC COMPONENTS LIKE next/link 'data-style': getDataStyle(props, styleCSSIdsString), }); + + if (Platform.OS === 'web') { + Object.assign(props, { + dataSet: { + ...props?.dataSet, + componentConfig: JSON.stringify(componentConfig), + }, + }); + } + return props; } diff --git a/packages/react/src/styled.tsx b/packages/react/src/styled.tsx index 6488369a..b5cdfa4d 100644 --- a/packages/react/src/styled.tsx +++ b/packages/react/src/styled.tsx @@ -1893,11 +1893,26 @@ export function verboseStyled( // Object.assign(resolvedInlineProps, applyComponentInlineProps); + const componentConfig = { + componentName: componentStyleConfig?.componentName, + colorMode: COLOR_MODE, + ...variantProps, + }; + + //@ts-ignore + if (applyComponentInlineProps?.as || passingProps?.as?.displayName) { + componentConfig.as = + //@ts-ignore + applyComponentInlineProps?.as?.displayName ?? + passingProps?.as?.displayName; + } + const resolvedStyleProps = generateStylePropsFromCSSIds( applyComponentInlineProps, styleCSSIds, CONFIG, - activeTheme + activeTheme, + componentConfig ); const AsComp: any = From d8b7444b3aca28d4a3e13bc41fc13491cf7415f6 Mon Sep 17 00:00:00 2001 From: ankit-tailor Date: Thu, 26 Oct 2023 12:46:23 +0530 Subject: [PATCH 04/14] v1.0.9-alpha.3 --- 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 4bbf3757..d6854f7e 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.9-alpha.2", + "version": "1.0.9-alpha.3", "keywords": [ "React Native", "Next.js", From ee6f0441c2b2b7161f9a348d483a6803b7b4cc05 Mon Sep 17 00:00:00 2001 From: ankit-tailor Date: Thu, 26 Oct 2023 13:02:17 +0530 Subject: [PATCH 05/14] v1.0.9-alpha.4 --- 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 d6854f7e..65ecbcde 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.9-alpha.3", + "version": "1.0.9-alpha.4", "keywords": [ "React Native", "Next.js", From 5ea7617cbdae12d88a73daa0251a8b1f0dfd6bc9 Mon Sep 17 00:00:00 2001 From: ankit-tailor Date: Thu, 26 Oct 2023 13:06:52 +0530 Subject: [PATCH 06/14] fix: expose color mode from provider --- packages/react/src/StyledProvider.tsx | 1 + packages/react/src/styled.tsx | 3 ++- 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/react/src/StyledProvider.tsx b/packages/react/src/StyledProvider.tsx index b8a50b7a..0c6d274d 100644 --- a/packages/react/src/StyledProvider.tsx +++ b/packages/react/src/StyledProvider.tsx @@ -161,6 +161,7 @@ export const StyledProvider: React.FC<{ animationDriverData, setAnimationDriverData, inlineStyleMap: inlineStyleMap.current, + colorMode: currentColorMode, }; if (_experimentalNestedProvider) { diff --git a/packages/react/src/styled.tsx b/packages/react/src/styled.tsx index b5cdfa4d..77654352 100644 --- a/packages/react/src/styled.tsx +++ b/packages/react/src/styled.tsx @@ -1895,8 +1895,9 @@ export function verboseStyled( const componentConfig = { componentName: componentStyleConfig?.componentName, - colorMode: COLOR_MODE, + colorMode: styledContext.colorMode, ...variantProps, + states, }; //@ts-ignore From 8973981c7776cb79e66a429bd04fbb53bd632482 Mon Sep 17 00:00:00 2001 From: ankit-tailor Date: Thu, 26 Oct 2023 15:32:01 +0530 Subject: [PATCH 07/14] fix: remove color mode --- packages/react/src/StyledProvider.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/react/src/StyledProvider.tsx b/packages/react/src/StyledProvider.tsx index 0c6d274d..b8a50b7a 100644 --- a/packages/react/src/StyledProvider.tsx +++ b/packages/react/src/StyledProvider.tsx @@ -161,7 +161,6 @@ export const StyledProvider: React.FC<{ animationDriverData, setAnimationDriverData, inlineStyleMap: inlineStyleMap.current, - colorMode: currentColorMode, }; if (_experimentalNestedProvider) { From d8c8d1faaf305ce7b2280300bfd58c8eb09216f6 Mon Sep 17 00:00:00 2001 From: ankit-tailor Date: Thu, 26 Oct 2023 15:32:34 +0530 Subject: [PATCH 08/14] v1.0.9-alpha.5 --- 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 65ecbcde..574bee04 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.9-alpha.4", + "version": "1.0.9-alpha.5", "keywords": [ "React Native", "Next.js", From 4f7e90b190ebca614c82be8e2c92736c8abf43e7 Mon Sep 17 00:00:00 2001 From: Rohit Singh Date: Thu, 26 Oct 2023 19:17:35 +0530 Subject: [PATCH 09/14] fix: layouting issue with theme component and provide styling capability --- packages/react/src/Theme.tsx | 17 ++++++++++++----- 1 file changed, 12 insertions(+), 5 deletions(-) diff --git a/packages/react/src/Theme.tsx b/packages/react/src/Theme.tsx index 4a3bae29..3ab896e8 100644 --- a/packages/react/src/Theme.tsx +++ b/packages/react/src/Theme.tsx @@ -1,5 +1,6 @@ import { View } from 'react-native'; import * as React from 'react'; +import { styled } from './styled'; type Config = any; export const defaultConfig: { theme?: string } = { @@ -8,11 +9,15 @@ export const defaultConfig: { theme?: string } = { const defaultContextData: Config = defaultConfig; const ThemeContext = React.createContext(defaultContextData); +// Can be discussed should we provide flex 1 by default or not. +const StyledView = styled( + View, + { flex: 1 }, + { componentName: 'GluestackThemeView' } +); -export const Theme: React.FC<{ - children?: React.ReactNode; - name?: any; -}> = ({ name, children }) => { +// @ts-ignore +export const Theme: typeof StyledView = ({ children, name, ...props }) => { const contextValue = React.useMemo(() => { return { theme: name, @@ -22,7 +27,9 @@ export const Theme: React.FC<{ return ( {/* @ts-ignore */} - {children} + + {children} + ); }; From 66f488c63571cedb905c79a37c1de6b70fd6fe45 Mon Sep 17 00:00:00 2001 From: Rohit Singh Date: Thu, 26 Oct 2023 19:27:14 +0530 Subject: [PATCH 10/14] fix: flex 1 by default style --- packages/react/src/Theme.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/react/src/Theme.tsx b/packages/react/src/Theme.tsx index 3ab896e8..451a6618 100644 --- a/packages/react/src/Theme.tsx +++ b/packages/react/src/Theme.tsx @@ -12,7 +12,9 @@ const ThemeContext = React.createContext(defaultContextData); // Can be discussed should we provide flex 1 by default or not. const StyledView = styled( View, - { flex: 1 }, + { + // flex: 1 + }, { componentName: 'GluestackThemeView' } ); From dc87e4689bc7bfe7c5131fef596089879b9b3405 Mon Sep 17 00:00:00 2001 From: ankit-tailor Date: Thu, 26 Oct 2023 19:27:44 +0530 Subject: [PATCH 11/14] fix: forward component style config and extend config --- packages/react/src/styled.tsx | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/packages/react/src/styled.tsx b/packages/react/src/styled.tsx index 3fc072b3..c7c01f2a 100644 --- a/packages/react/src/styled.tsx +++ b/packages/react/src/styled.tsx @@ -1112,7 +1112,14 @@ export function verboseStyled( // @ts-ignore [nonVerbosedTheme, , , Component] = plugins[ pluginName - ]?.inputMiddleWare

(nonVerbosedTheme, true, true, Component); + ]?.inputMiddleWare

( + nonVerbosedTheme, + true, + true, + Component, + componentStyleConfig, + ExtendedConfig + ); } nonVerbosedTheme = convertStyledToStyledVerbosed(nonVerbosedTheme); } From 15341a62873e26754c6f1fd8ef7aec84b779029b Mon Sep 17 00:00:00 2001 From: ankit-tailor Date: Thu, 26 Oct 2023 19:28:37 +0530 Subject: [PATCH 12/14] v1.0.9-alpha.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 2f6eec68..534eb0ff 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.9-alpha.1", + "version": "1.0.9-alpha.6", "keywords": [ "React Native", "Next.js", From 01a75d29f46464dc4e5452a4ab52348e177dff3d Mon Sep 17 00:00:00 2001 From: ankit-tailor Date: Mon, 30 Oct 2023 14:55:10 +0530 Subject: [PATCH 13/14] v1.0.9-alpha.8 --- 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 574bee04..343eb73b 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.9-alpha.5", + "version": "1.0.9-alpha.8", "keywords": [ "React Native", "Next.js", From 725ddaf20a90ac8bc98706a9e45060aac5c87d5e Mon Sep 17 00:00:00 2001 From: ankit-tailor Date: Mon, 30 Oct 2023 14:56:35 +0530 Subject: [PATCH 14/14] fix: component name of as --- packages/react/src/styled.tsx | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/react/src/styled.tsx b/packages/react/src/styled.tsx index 77654352..6e43d59c 100644 --- a/packages/react/src/styled.tsx +++ b/packages/react/src/styled.tsx @@ -1902,6 +1902,10 @@ export function verboseStyled( //@ts-ignore if (applyComponentInlineProps?.as || passingProps?.as?.displayName) { + componentConfig.componentName = + //@ts-ignore + applyComponentInlineProps?.as?.displayName ?? + passingProps?.as?.displayName; componentConfig.as = //@ts-ignore applyComponentInlineProps?.as?.displayName ??