From a31ee52bc5b701bacd0f943b9e470fc1e2d27f5e Mon Sep 17 00:00:00 2001 From: Suraj Date: Mon, 9 Oct 2023 13:01:09 +0530 Subject: [PATCH 01/48] fix: introduction page --- example/storybook/src/overview/Introduction/index.stories.mdx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/example/storybook/src/overview/Introduction/index.stories.mdx b/example/storybook/src/overview/Introduction/index.stories.mdx index b087627bb..b7a8cb43c 100644 --- a/example/storybook/src/overview/Introduction/index.stories.mdx +++ b/example/storybook/src/overview/Introduction/index.stories.mdx @@ -19,8 +19,8 @@ gluestack-style is different from other styling libraries like Glamour, Emotion, gluestack-style originally started as part of NativeBase, a universal component library for both React and React Native. However, we realized that not everyone needs all the components from NativeBase, so we broke it down into two separate libraries: -- [gluestack-style](https://gluestack.io/style) - The high-performing and universal styling library. -- [gluestack-ui](https://gluestack.io/ui/docs) (Alpha) - A set of ready-to-use universal components that can be added to any project and styled to fit your needs. You can even customize the components as desired. +- [gluestack-style](https://gluestack.io/style/docs) - The high-performing and universal styling library. +- [gluestack-ui](https://gluestack.io/ui/docs) - A set of ready-to-use universal components that can be added to any project and styled to fit your needs. You can even customize the components as desired. ## But aren’t React Native and React Native Web sufficient? From d2dae1263ce678b87bc4897b1a4ea62f63dcc3dd Mon Sep 17 00:00:00 2001 From: ankit-tailor Date: Mon, 9 Oct 2023 13:12:12 +0530 Subject: [PATCH 02/48] feat: animated svg components in driver --- .../src/index.tsx | 11 +- packages/animation-moti-driver/src/index.tsx | 37 +++++ .../src/AnimatedComponents/index.tsx | 126 +++++++++++++++++- 3 files changed, 172 insertions(+), 2 deletions(-) diff --git a/packages/animation-legend-motion-driver/src/index.tsx b/packages/animation-legend-motion-driver/src/index.tsx index 0a0333cc3..9a5cd0f88 100644 --- a/packages/animation-legend-motion-driver/src/index.tsx +++ b/packages/animation-legend-motion-driver/src/index.tsx @@ -15,6 +15,7 @@ import { AnimatePresence as MotionAnimatePresence, createMotionAnimatedComponent, } from '@legendapp/motion'; +import { MotionSvg } from '@legendapp/motion/svg'; import { propertyTokenMap } from './propertyTokenMap'; import { Pressable } from 'react-native'; @@ -167,9 +168,17 @@ const AnimatePresence = React.forwardRef( const AnimatedPressable = createMotionAnimatedComponent( Pressable ) as React.ComponentType; + +const MotionComponents = { + ...Motion, + ...MotionSvg, + Pressable: AnimatedPressable, + AnimatePresence, +}; + export class MotionAnimationDriver implements IAnimationDriverPlugin { name: 'MotionAnimationDriver'; - engine = { ...Motion, Pressable: AnimatedPressable, AnimatePresence }; + engine = MotionComponents; config = { aliases: { ':animate': 'animate', diff --git a/packages/animation-moti-driver/src/index.tsx b/packages/animation-moti-driver/src/index.tsx index 86df238a5..d6c93dec7 100644 --- a/packages/animation-moti-driver/src/index.tsx +++ b/packages/animation-moti-driver/src/index.tsx @@ -13,6 +13,32 @@ import { MotiProgressBar, AnimatePresence, } from 'moti'; +import { + Svg as RNSvg, + Rect as RNRect, + Circle as RNCircle, + Ellipse as RNEllipse, + Line as RNLine, + Polyline as RNPolyline, + Path as RNPath, + TSpan as RNTSpan, + TextPath as RNTextPath, + G as RNG, + ClipPath as RNClipPath, +} from 'react-native-svg'; +import { motifySvg } from 'moti/svg'; + +const Svg = motifySvg(RNSvg); +const Rect = motifySvg(RNRect); +const Circle = motifySvg(RNCircle); +const Ellipse = motifySvg(RNEllipse); +const Line = motifySvg(RNLine); +const Polyline = motifySvg(RNPolyline); +const Path = motifySvg(RNPath); +const TSpan = motifySvg(RNTSpan); +const TextPath = motifySvg(RNTextPath); +const G = motifySvg(RNG); +const ClipPath = motifySvg(RNClipPath); let Moti = { Image: MotiImage, @@ -21,6 +47,17 @@ let Moti = { ScrollView: MotiScrollView, SafeAreaView: MotiSafeAreaView, ProgressBar: MotiProgressBar, + Svg, + Rect, + Circle, + Ellipse, + Line, + Polyline, + Path, + TSpan, + TextPath, + G, + ClipPath, AnimatePresence, }; export class MotiAnimationDriver implements IAnimationDriverPlugin { diff --git a/packages/animation-resolver/src/AnimatedComponents/index.tsx b/packages/animation-resolver/src/AnimatedComponents/index.tsx index b472f8b45..b494c4d2f 100644 --- a/packages/animation-resolver/src/AnimatedComponents/index.tsx +++ b/packages/animation-resolver/src/AnimatedComponents/index.tsx @@ -9,10 +9,23 @@ import type { FlatListProps, SectionListProps, } from 'react-native'; +import type { + SvgProps, + GProps, + ClipPathProps, + RectProps, + PolylineProps, + CircleProps, + EllipseProps, + LineProps, + PathProps, + TSpanProps, + TextPathProps, +} from 'react-native-svg'; const getAnimationResolverPlugin: any = (plugins: any[]) => { let pluginData; - plugins.forEach((plugin) => { + plugins?.forEach((plugin) => { if (plugin.name === 'AnimationResolver') { pluginData = plugin; } @@ -94,6 +107,95 @@ const AnimatedSectionList = ( const Component = animatedComponent('SectionList', props); return ; }; + +const AnimatedSvg = ( + props: SvgProps & { + animationComponentGluestack: true; + } +) => { + const Component = animatedComponent('Svg', props); + return ; +}; +const AnimatedRect = ( + props: RectProps & { + animationComponentGluestack: true; + } +) => { + const Component = animatedComponent('Rect', props); + return ; +}; +const AnimatedCircle = ( + props: CircleProps & { + animationComponentGluestack: true; + } +) => { + const Component = animatedComponent('Circle', props); + return ; +}; +const AnimatedEllipse = ( + props: EllipseProps & { + animationComponentGluestack: true; + } +) => { + const Component = animatedComponent('Ellipse', props); + return ; +}; +const AnimatedLine = ( + props: LineProps & { + animationComponentGluestack: true; + } +) => { + const Component = animatedComponent('Line', props); + return ; +}; +const AnimatedPolyline = ( + props: PolylineProps & { + animationComponentGluestack: true; + } +) => { + const Component = animatedComponent('Polyline', props); + return ; +}; +const AnimatedPath = ( + props: PathProps & { + animationComponentGluestack: true; + } +) => { + const Component = animatedComponent('Path', props); + return ; +}; +const AnimatedTSpan = ( + props: TSpanProps & { + animationComponentGluestack: true; + } +) => { + const Component = animatedComponent('TSpan', props); + return ; +}; +const AnimatedTextPath = ( + props: TextPathProps & { + animationComponentGluestack: true; + } +) => { + const Component = animatedComponent('TextPath', props); + return ; +}; +const AnimatedG = ( + props: GProps & { + animationComponentGluestack: true; + } +) => { + const Component = animatedComponent('G', props); + return ; +}; +const AnimatedClipPath = ( + props: ClipPathProps & { + animationComponentGluestack: true; + } +) => { + const Component = animatedComponent('ClipPath', props); + return ; +}; const AnimatePresence = animatedComponent('AnimatePresence', {}); AnimatedText.displayName = 'Gluestack-AnimatedResolver-AnimatedText'; @@ -109,6 +211,17 @@ AnimatedSectionList.displayName = 'Gluestack-AnimatedResolver-AnimatedSectionList'; AnimatePresence.displayName = 'Gluestack-AnimatedResolver-AnimatedAnimatePresence'; +AnimatedSvg.displayName = 'Gluestack-AnimatedResolver-AnimatedSvg'; +AnimatedRect.displayName = 'Gluestack-AnimatedResolver-AnimatedRect'; +AnimatedCircle.displayName = 'Gluestack-AnimatedResolver-AnimatedCircle'; +AnimatedEllipse.displayName = 'Gluestack-AnimatedResolver-AnimatedEllipse'; +AnimatedLine.displayName = 'Gluestack-AnimatedResolver-AnimatedLine'; +AnimatedPolyline.displayName = 'Gluestack-AnimatedResolver-AnimatedPolyline'; +AnimatedPath.displayName = 'Gluestack-AnimatedResolver-AnimatedPath'; +AnimatedTSpan.displayName = 'Gluestack-AnimatedResolver-AnimatedTSpan'; +AnimatedTextPath.displayName = 'Gluestack-AnimatedResolver-AnimatedTextPath'; +AnimatedG.displayName = 'Gluestack-AnimatedResolver-AnimatedG'; +AnimatedClipPath.displayName = 'Gluestack-AnimatedResolver-AnimatedClipPath'; export { AnimatedText, @@ -120,4 +233,15 @@ export { AnimatedFlatList, AnimatedSectionList, AnimatePresence, + AnimatedSvg, + AnimatedRect, + AnimatedCircle, + AnimatedEllipse, + AnimatedLine, + AnimatedPolyline, + AnimatedPath, + AnimatedTSpan, + AnimatedTextPath, + AnimatedG, + AnimatedClipPath, }; From 2ff2e4ebb520833ffb8fb2e15f4188ba62dc4874 Mon Sep 17 00:00:00 2001 From: Suraj Date: Tue, 10 Oct 2023 15:03:15 +0530 Subject: [PATCH 03/48] fix: added experimental nested provider" --- packages/react/src/StyledProvider.tsx | 62 +++++++++++++++++++++------ packages/react/src/styled.tsx | 4 +- 2 files changed, 53 insertions(+), 13 deletions(-) diff --git a/packages/react/src/StyledProvider.tsx b/packages/react/src/StyledProvider.tsx index 758a9e652..ff1d68380 100644 --- a/packages/react/src/StyledProvider.tsx +++ b/packages/react/src/StyledProvider.tsx @@ -1,6 +1,6 @@ import { get, onChange, set } from './core/colorMode'; import * as React from 'react'; -import { Platform } from 'react-native'; +import { Platform, View } from 'react-native'; import { propertyTokenMap } from './propertyTokenMap'; import type { COLORMODES } from './types'; import { platformSpecificSpaceUnits } from './utils'; @@ -42,7 +42,14 @@ export const StyledProvider: React.FC<{ colorMode?: COLORMODES; children?: React.ReactNode; globalStyles?: any; -}> = ({ config, colorMode, children, globalStyles }) => { + _experimentalNestedProvider: boolean; +}> = ({ + config, + colorMode, + children, + globalStyles, + _experimentalNestedProvider, +}) => { const currentConfig: any = React.useMemo(() => { //TODO: Add this later return platformSpecificSpaceUnits(config, Platform.OS); @@ -57,11 +64,22 @@ export const StyledProvider: React.FC<{ return colorMode ?? get() ?? 'light'; }, [colorMode]); + const _experimentalNestedProviderRef = React.useRef(null); React.useEffect(() => { + let documentElement: any = null; + + if (Platform.OS === 'web') { + if (_experimentalNestedProvider) { + // write own code for nested colorMode + documentElement = _experimentalNestedProviderRef.current; + } else { + documentElement = document.documentElement; + } + } // Add gs class name if (Platform.OS === 'web') { - document.documentElement.classList.add(`gs`); - document.documentElement.classList.add(`gs-${currentColorMode}`); + documentElement.classList.add(`gs`); + documentElement.classList.add(`gs-${currentColorMode}`); } // GluestackStyleSheet.resolve({ ...config, propertyTokenMap }); @@ -69,13 +87,17 @@ export const StyledProvider: React.FC<{ onChange((currentColor: string) => { // only for web - if (Platform.OS === 'web') { - if (currentColor === 'dark') { - document.documentElement.classList.remove(`gs-light`); - } else { - document.documentElement.classList.remove(`gs-dark`); + if (!_experimentalNestedProviderRef) { + const documentElement = document.documentElement; + + if (Platform.OS === 'web') { + if (currentColor === 'dark') { + documentElement.classList.remove(`gs-light`); + } else { + documentElement.classList.remove(`gs-dark`); + } + documentElement.classList.add(`gs-${currentColor}`); } - document.documentElement.classList.add(`gs-${currentColor}`); } }); // eslint-disable-next-line react-hooks/exhaustive-deps @@ -95,19 +117,35 @@ export const StyledProvider: React.FC<{ config?.globalStyle && createGlobalStyles(config.globalStyle); const contextValue = React.useMemo(() => { - return { + const styledData = { config: currentConfig, globalStyle: globalStyleMap, animationDriverData, setAnimationDriverData, }; + if (_experimentalNestedProvider) { + //@ts-ignore + styledData._experimentalNestedProvider = _experimentalNestedProvider; + //@ts-ignore + styledData.colorMode = colorMode; + } + return styledData; + // eslint-disable-next-line react-hooks/exhaustive-deps }, [currentConfig, globalStyleMap, animationDriverData]); - return ( + const providerComponent = ( {children} ); + + if (_experimentalNestedProvider) { + return ( + {providerComponent} + ); + } else { + return <>{providerComponent}; + } }; export const useStyled = () => React.useContext(StyledContext); diff --git a/packages/react/src/styled.tsx b/packages/react/src/styled.tsx index 301b16911..1847ad7e2 100644 --- a/packages/react/src/styled.tsx +++ b/packages/react/src/styled.tsx @@ -1030,7 +1030,9 @@ export function verboseStyled( const sxCompoundVariantFlatternStyleObject = React.useRef({}); const sxDescendantFlattenStyles: any = React.useRef({}); - const COLOR_MODE: any = get(); + const COLOR_MODE: any = styledContext._experimentalNestedProvider + ? styledContext.colorMode + : get(); if (!styleHashCreated) { CONFIG = { From fdbf3b70c0dd89346938a4539fee1aec8692a0b4 Mon Sep 17 00:00:00 2001 From: Suraj Date: Tue, 10 Oct 2023 15:04:20 +0530 Subject: [PATCH 04/48] v1.0.2-alpha.0 --- 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 f386b944f..b02477e74 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.1", + "version": "1.0.2-alpha.0", "keywords": [ "React Native", "Next.js", From 00d8b027c046b92c8f39fff32b14d791e78221d0 Mon Sep 17 00:00:00 2001 From: ankit-tailor Date: Tue, 10 Oct 2023 18:30:38 +0530 Subject: [PATCH 05/48] fix: component middlware --- .../src/index.tsx | 98 +++---------------- packages/animation-resolver/src/index.tsx | 54 +++++----- packages/react/src/plugins/font-resolver.tsx | 47 +++++++-- packages/react/src/styled.tsx | 39 +++++--- 4 files changed, 105 insertions(+), 133 deletions(-) diff --git a/packages/animation-legend-motion-driver/src/index.tsx b/packages/animation-legend-motion-driver/src/index.tsx index 0a0333cc3..1d60370b4 100644 --- a/packages/animation-legend-motion-driver/src/index.tsx +++ b/packages/animation-legend-motion-driver/src/index.tsx @@ -1,63 +1,16 @@ -import { useStyled } from '@gluestack-style/react'; import type { IAnimationDriverPlugin, IAnimationResolver, } from '@gluestack-style/react'; -import React, { useMemo } from 'react'; -import { - deepMerge, - deepMergeObjects, - setObjectKeyValue, - resolvedTokenization, -} from './utils'; +import React from 'react'; +import { deepMerge } from './utils'; import { Motion, AnimatePresence as MotionAnimatePresence, createMotionAnimatedComponent, } from '@legendapp/motion'; -import { propertyTokenMap } from './propertyTokenMap'; import { Pressable } from 'react-native'; -function tokenizeAnimationPropsFromConfig( - props: any = {}, - config: any, - animationAliases: any, - path: any = [], - tokenizedAnimatedProps: any = {} -) { - for (const prop in props) { - if (Array.isArray(props[prop])) { - path.push(prop); - setObjectKeyValue(tokenizedAnimatedProps, path, props[prop]); - path.pop(); - } else if (animationAliases[prop]) { - path.push(prop); - const tokenizedValue = resolvedTokenization(props[prop], config); - setObjectKeyValue(tokenizedAnimatedProps, path, tokenizedValue); - path.pop(); - } else if (typeof props[prop] === 'object') { - path.push(prop); - const tokenizedValue = resolvedTokenization(props[prop], config); - setObjectKeyValue(tokenizedAnimatedProps, path, tokenizedValue); - // path.pop(); - tokenizeAnimationPropsFromConfig( - props[prop], - config, - animationAliases, - path, - tokenizedAnimatedProps - ); - path.pop(); - } else { - path.push(prop); - setObjectKeyValue(tokenizedAnimatedProps, path, props[prop]); - path.pop(); - } - } - - return tokenizedAnimatedProps; -} - function getVariantProps(props: any, theme: any) { const variantTypes = theme?.variants ? Object.keys(theme.variants) : []; @@ -91,15 +44,7 @@ function resolveVariantAnimationProps(variantProps: any, styledObject: any) { const AnimatePresence = React.forwardRef( ({ children, ...props }: any, ref?: any) => { - const ctx = useStyled(); const clonedChildren: any = []; - const CONFIG = useMemo( - () => ({ - ...ctx.config, - propertyTokenMap, - }), - [ctx.config] - ); React.Children.toArray(children).forEach((child: any) => { if ( @@ -107,49 +52,30 @@ const AnimatePresence = React.forwardRef( child?.type?.displayName.includes('Gluestack-AnimatedResolver')) || child?.type?.isStyledComponent ) { - let tokenizedAnimatedProps: any = {}; - const animationAliases = {}; - const componentStyledObject = child?.type?.getStyledData()?.config; const { variantProps, restProps } = getVariantProps( - child?.props, + { ...componentStyledObject?.props, ...child?.props }, componentStyledObject ); - const config = CONFIG; - - const variantStyledObject = resolveVariantAnimationProps( + const variantStyledObject: any = resolveVariantAnimationProps( variantProps, componentStyledObject ); - const componentStyledObjectWithVariants = deepMergeObjects( - componentStyledObject, - variantStyledObject - ); - tokenizedAnimatedProps = tokenizeAnimationPropsFromConfig( - componentStyledObjectWithVariants, - config, - animationAliases - ); - - const tokenizedSxAnimationProps: any = tokenizeAnimationPropsFromConfig( - child?.props?.sx, - config, - animationAliases - ); - - const mergedAnimatedProps = deepMergeObjects( - {}, - tokenizedSxAnimationProps, - tokenizedAnimatedProps - ); + const exit = { + ...componentStyledObject?.[':exit'], + ...variantStyledObject?.[':exit'], + ...restProps?.sx?.[':exit'], + ...restProps?.exit, + }; const clonedChild = React.cloneElement(child, { + exit, ...restProps, - exit: mergedAnimatedProps?.baseStyle?.[':exit'], }); + clonedChildren.push(clonedChild); } else { clonedChildren.push(child); diff --git a/packages/animation-resolver/src/index.tsx b/packages/animation-resolver/src/index.tsx index f46033641..17068cd98 100644 --- a/packages/animation-resolver/src/index.tsx +++ b/packages/animation-resolver/src/index.tsx @@ -210,24 +210,18 @@ export class AnimationResolver implements IStyledPlugin { resolvedStyledObject: any = {}, keyPath: string[] = [] ) { - const aliases = this.config?.aliases; + const aliases: any = this.config?.aliases; const animatedPropMap = this.config?.animatedPropMap; - for (const prop in styledObject) { - if (typeof styledObject[prop] === 'object') { - keyPath.push(prop); - this.updateStyledObject( - styledObject[prop], - shouldUpdateConfig, - resolvedStyledObject, - keyPath - ); - keyPath.pop(); - } - // @ts-ignore + for (const prop in styledObject) { if (aliases && aliases?.[prop]) { + let isStyleKey = false; if (shouldUpdateConfig) { // this.#childrenExitPropsMap[prop] = styledObject[prop]; + if (keyPath[keyPath.length - 1] === 'style') { + isStyleKey = true; + keyPath.pop(); + } setObjectKeyValue( this.#childrenExitPropsMap, [...keyPath, prop], @@ -236,9 +230,6 @@ export class AnimationResolver implements IStyledPlugin { } const value = styledObject[prop]; - if (keyPath[keyPath.length - 1] === 'style') { - keyPath.pop(); - } // @ts-ignore keyPath.push('props', aliases[prop]); // setObjectKeyValue(resolvedStyledObject, keyPath, value); @@ -246,9 +237,22 @@ export class AnimationResolver implements IStyledPlugin { setObjectKeyValue(resolvedStyledObject, keyPath, value); keyPath.pop(); keyPath.pop(); - // delete styledObject[prop]; + if (isStyleKey) keyPath.push('style'); + + delete styledObject[prop]; + } else if (typeof styledObject[prop] === 'object') { + keyPath.push(prop); + this.updateStyledObject( + styledObject[prop], + shouldUpdateConfig, + resolvedStyledObject, + keyPath + ); + keyPath.pop(); } + // @ts-ignore + if (animatedPropMap && animatedPropMap[prop]) { this.renameObjectKey(styledObject, prop, animatedPropMap[prop]); } @@ -334,14 +338,7 @@ export class AnimationResolver implements IStyledPlugin { resolvedAnimatedStyledWithStyledObject?.props : {}; - return ( - - ); + return ; }); if (NewComponent) { @@ -349,14 +346,19 @@ export class AnimationResolver implements IStyledPlugin { NewComponent.styled = {}; //@ts-ignore NewComponent.styled.config = {}; + //@ts-ignore - NewComponent.styled.config = styledConfig; + NewComponent.styled.config = { + ...Component?.styled?.config, + ...styledConfig, + }; //@ts-ignore NewComponent.isStyledComponent = Component?.isStyledComponent; //@ts-ignore NewComponent.isComposedComponent = Component?.isComposedComponent; NewComponent.displayName = Component?.displayName; + return NewComponent; } } else { diff --git a/packages/react/src/plugins/font-resolver.tsx b/packages/react/src/plugins/font-resolver.tsx index 8b5b19a65..ad171f6ec 100644 --- a/packages/react/src/plugins/font-resolver.tsx +++ b/packages/react/src/plugins/font-resolver.tsx @@ -140,14 +140,19 @@ export class FontResolver implements IStyledPlugin, FontPlugin { this.mapFonts = mapFonts || this.mapFonts; } - inputMiddleWare(styledObj: any = {}, shouldUpdate: boolean = true): void { + inputMiddleWare( + styledObj: any = {}, + shouldUpdate: boolean = true, + _?: boolean, + Component?: React.ComponentType + ) { const modifiedStyledObject = this.fontHandler(styledObj, shouldUpdate); if (shouldUpdate) { - return styledObj; + return [styledObj, shouldUpdate, _, Component]; } - return modifiedStyledObject; + return [modifiedStyledObject, shouldUpdate, _, Component]; } #fontFamily: any = {}; @@ -204,14 +209,16 @@ export class FontResolver implements IStyledPlugin, FontPlugin { fontWeightsTokens: this.#fontWeightsTokenConfig, }); - if (styledObject[styledObjectKey]) this.mapFonts(styledObject); + if (styledObject[styledObjectKey]) { + this.mapFonts(styledObject); + } } } return styledObject; } - componentMiddleWare({ NewComp, extendedConfig }: any) { + componentMiddleWare({ Component: NewComp, extendedConfig }: any) { const styledConfig = this.#fontFamily; this.#fontFamily = {}; @@ -268,16 +275,38 @@ export class FontResolver implements IStyledPlugin, FontPlugin { const sxPropsWithThemeProps = deepMerge(sx, componentStyledObject); - const resolvedSxProps = this.inputMiddleWare( + const [resolvedSxProps, , ,] = this.inputMiddleWare( sxPropsWithThemeProps, - false + false, + false, + NewComp ); - return ; + const styles = Array.isArray(rest.style) + ? [...rest?.style, resolvedSxProps] + : resolvedSxProps; + + return ; }); //@ts-ignore - Comp.isStyledComponent = NewComp.isStyledComponent; + Comp.styled = {}; + //@ts-ignore + Comp.styled.config = {}; + //@ts-ignore + Comp.styled.config = { + ...styledConfig?.config, + ...NewComp?.styled?.config, + }; + + //@ts-ignore + Comp.isStyledComponent = NewComp?.isStyledComponent; + //@ts-ignore + Comp.isComposedComponent = NewComp?.isComposedComponent; + //@ts-ignore + Comp.isAnimatedComponent = NewComp?.isAnimatedComponent; + + Comp.displayName = NewComp?.displayName; return Comp; } diff --git a/packages/react/src/styled.tsx b/packages/react/src/styled.tsx index 301b16911..75ce9fed0 100644 --- a/packages/react/src/styled.tsx +++ b/packages/react/src/styled.tsx @@ -837,7 +837,8 @@ export function verboseStyled( }; toBeInjected: any; styledIds: Array; - } + }, + nonVerbosedTheme?: any ) { // const componentName = componentStyleConfig?.componentName; const componentHash = stableHash({ @@ -1049,6 +1050,8 @@ export function verboseStyled( if (EXTENDED_THEME) { // RUN Middlewares + nonVerbosedTheme = deepMerge(nonVerbosedTheme, EXTENDED_THEME.theme); + const resolvedComponentExtendedTheme = resolveComponentTheme( CONFIG, EXTENDED_THEME @@ -1096,13 +1099,11 @@ export function verboseStyled( if (plugins) { for (const pluginName in plugins) { // @ts-ignore - [theme, , , Component] = plugins[pluginName]?.inputMiddleWare

( - theme, - true, - true, - Component - ); + [nonVerbosedTheme, , , Component] = plugins[ + pluginName + ]?.inputMiddleWare

(nonVerbosedTheme, true, true, Component); } + nonVerbosedTheme = convertStyledToStyledVerbosed(nonVerbosedTheme); } // for extended components end @@ -1887,8 +1888,6 @@ export function verboseStyled( // } if (plugins) { - // plugins?.reverse(); - plugins.reverse(); for (const pluginName in plugins) { // @ts-ignore if (plugins[pluginName]?.componentMiddleWare) { @@ -1901,19 +1900,28 @@ export function verboseStyled( }); //@ts-ignore - pluginData = Component.styled; + pluginData = { ...pluginData, ...Component?.styled }; } } } let component; + const propsToBePassedInToPlugin = + plugins?.length > 0 + ? { + ...variantProps, + sx: componentProps.sx, + } + : {}; + if (AsComp) { //@ts-ignore if (Component.isStyledComponent) { component = ( ( } } else { component = ( - + {children} ); @@ -1981,6 +1994,7 @@ export function styled( styledIds: Array; } ) { + const nonVerbosedTheme = theme; // const DEBUG_TAG = componentStyleConfig?.DEBUG; // const DEBUG = // process.env.NODE_ENV === 'development' && DEBUG_TAG ? false : false; @@ -2032,7 +2046,8 @@ export function styled( sxConvertedObject, componentStyleConfig, ExtendedConfig, - BUILD_TIME_PARAMS + BUILD_TIME_PARAMS, + nonVerbosedTheme ); // @ts-ignore From 9bf83a91540482f2f41c2cca6dc0a2904a611660 Mon Sep 17 00:00:00 2001 From: Suraj Date: Wed, 11 Oct 2023 11:56:37 +0530 Subject: [PATCH 06/48] v1.0.2-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 b02477e74..659b12899 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.2-alpha.0", + "version": "1.0.2-alpha.1", "keywords": [ "React Native", "Next.js", From fbbd2b8cb18f85c2666245cd39d5da98a11e2f46 Mon Sep 17 00:00:00 2001 From: Suraj Date: Wed, 11 Oct 2023 15:03:37 +0530 Subject: [PATCH 07/48] v1.0.2-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 659b12899..2490dce05 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.2-alpha.1", + "version": "1.0.2-alpha.3", "keywords": [ "React Native", "Next.js", From bda322e3afeaddf572885c6bcb4fed2bb2b83bd6 Mon Sep 17 00:00:00 2001 From: Suraj Date: Wed, 11 Oct 2023 15:07:27 +0530 Subject: [PATCH 08/48] v1.0.2-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 2490dce05..2881c0cd4 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.2-alpha.3", + "version": "1.0.2-alpha.4", "keywords": [ "React Native", "Next.js", From c10daf0c1158a96f284a2d03fc5b16f31f509a73 Mon Sep 17 00:00:00 2001 From: Suraj Date: Wed, 11 Oct 2023 15:14:09 +0530 Subject: [PATCH 09/48] v1.0.2-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 2881c0cd4..9eda2b530 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.2-alpha.4", + "version": "1.0.2-alpha.5", "keywords": [ "React Native", "Next.js", From ac754d5a0fd72e38df0e69dcd1a23205a320eb8f Mon Sep 17 00:00:00 2001 From: Suraj Date: Wed, 11 Oct 2023 15:51:33 +0530 Subject: [PATCH 10/48] v1.0.2-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 9eda2b530..658e94700 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.2-alpha.5", + "version": "1.0.2-alpha.6", "keywords": [ "React Native", "Next.js", From 5ebe175311a33704b14e64bea03c313abfb6c31b Mon Sep 17 00:00:00 2001 From: Suraj Date: Wed, 11 Oct 2023 16:02:28 +0530 Subject: [PATCH 11/48] v1.0.2-alpha.7 --- 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 658e94700..9d2b2ba83 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.2-alpha.6", + "version": "1.0.2-alpha.7", "keywords": [ "React Native", "Next.js", From 5cbbe40c46ff85b0d2ebc2b4d75d6a1f6d1557fd Mon Sep 17 00:00:00 2001 From: Suraj Date: Wed, 11 Oct 2023 16:18:18 +0530 Subject: [PATCH 12/48] v1.0.2-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 9d2b2ba83..24562cf5e 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.2-alpha.7", + "version": "1.0.2-alpha.8", "keywords": [ "React Native", "Next.js", From e7155025029b9e9e3a726d1e4b4dcb8d193804eb Mon Sep 17 00:00:00 2001 From: Suraj Date: Wed, 11 Oct 2023 16:25:20 +0530 Subject: [PATCH 13/48] fix: web performance issue --- .../DescendantsStyles/ContextBasedStyles.tsx | 16 ++++---- packages/react/src/StyledProvider.tsx | 39 ++++++++++++++++++ .../injectComponentAndDescendantStyles.ts | 5 ++- packages/react/src/style-sheet/index.ts | 23 +++++++++-- packages/react/src/styled.tsx | 41 ++++++++++++++----- .../src/utils/css-injector/utils/inject.ts | 5 ++- .../utils/css-injector/utils/inject.web.ts | 22 ++++++++-- 7 files changed, 124 insertions(+), 27 deletions(-) diff --git a/example/storybook/src/api/DescendantsStyles/ContextBasedStyles.tsx b/example/storybook/src/api/DescendantsStyles/ContextBasedStyles.tsx index 03351aa26..ed6a9271a 100644 --- a/example/storybook/src/api/DescendantsStyles/ContextBasedStyles.tsx +++ b/example/storybook/src/api/DescendantsStyles/ContextBasedStyles.tsx @@ -116,8 +116,12 @@ const Text1 = styled( } ); -const MyLink = styled(Link, {}); +const Box = styled(View, { + bg: '$blue500', + p: '$10', +}); export function ContextBasedStyles() { + console.log('>>>>> component'); return ( {/* */} @@ -129,14 +133,12 @@ export function ContextBasedStyles() { > vdkbkdfbv */} - - next link - + > ); } diff --git a/packages/react/src/StyledProvider.tsx b/packages/react/src/StyledProvider.tsx index ff1d68380..09c7676bb 100644 --- a/packages/react/src/StyledProvider.tsx +++ b/packages/react/src/StyledProvider.tsx @@ -6,6 +6,7 @@ import type { COLORMODES } from './types'; import { platformSpecificSpaceUnits } from './utils'; import { createGlobalStylesWeb } from './createGlobalStylesWeb'; import { createGlobalStyles } from './createGlobalStyles'; + type Config = any; let colorModeSet = false; @@ -50,6 +51,11 @@ export const StyledProvider: React.FC<{ globalStyles, _experimentalNestedProvider, }) => { + const inlineStyleMap: any = React.useRef({ + initialStyleInjected: false, + }); + inlineStyleMap.current.initialStyleInjected = false; + const currentConfig: any = React.useMemo(() => { //TODO: Add this later return platformSpecificSpaceUnits(config, Platform.OS); @@ -107,6 +113,38 @@ export const StyledProvider: React.FC<{ setCurrentColorMode(currentColorMode); }, [currentColorMode]); + React.useLayoutEffect(() => { + if (Platform.OS === 'web') { + const toBeInjectedStyles: any = {}; + + if (inlineStyleMap.current.initialStyleInjected) { + return; + } + + Object.keys(inlineStyleMap.current).forEach((key: any) => { + if (key !== 'initialStyleInjected') { + const styles = inlineStyleMap.current[key]; + if (!toBeInjectedStyles[key]) { + toBeInjectedStyles[key] = document.createDocumentFragment(); + } + + styles.forEach((style: any) => { + if (!document.getElementById(style.id)) { + toBeInjectedStyles[key].appendChild(style); + } + }); + } + }); + Object.keys(toBeInjectedStyles).forEach((key) => { + let wrapperElement = document.querySelector('#' + key); + if (wrapperElement) { + wrapperElement.appendChild(toBeInjectedStyles[key]); + } + // delete inlineStyleMap.current[key]; + }); + inlineStyleMap.current.initialStyleInjected = true; + } + }); // // Set colormode for the first time if (!colorModeSet) { setCurrentColorMode(currentColorMode); @@ -122,6 +160,7 @@ export const StyledProvider: React.FC<{ globalStyle: globalStyleMap, animationDriverData, setAnimationDriverData, + inlineStyleMap: inlineStyleMap.current, }; if (_experimentalNestedProvider) { //@ts-ignore diff --git a/packages/react/src/resolver/injectComponentAndDescendantStyles.ts b/packages/react/src/resolver/injectComponentAndDescendantStyles.ts index 913ac2f71..b3a37804b 100644 --- a/packages/react/src/resolver/injectComponentAndDescendantStyles.ts +++ b/packages/react/src/resolver/injectComponentAndDescendantStyles.ts @@ -12,7 +12,8 @@ export function injectComponentAndDescendantStyles( styleTagId?: string, type: 'boot' | 'inline' = 'boot', _GluestackStyleSheet: StyleInjector = GluestackStyleSheet, - platform: string = '' + platform: string = '', + inlineStyleMap?: any ) { const [ componentOrderResolvedBaseStyle, @@ -84,7 +85,7 @@ export function injectComponentAndDescendantStyles( ); if (platform === 'web') { - GluestackStyleSheet.inject(toBeInjected); + GluestackStyleSheet.inject(toBeInjected, inlineStyleMap); } return styleCSSIdsArr; diff --git a/packages/react/src/style-sheet/index.ts b/packages/react/src/style-sheet/index.ts index ee7f34d14..d3d82f311 100644 --- a/packages/react/src/style-sheet/index.ts +++ b/packages/react/src/style-sheet/index.ts @@ -109,10 +109,15 @@ export class StyleInjector { return toBeInjected; } - inject(toBeInjected: any = {}) { + inject(toBeInjected: any = {}, inlineStyleMap: any) { Object.keys(toBeInjected).forEach((type) => { Object.keys(toBeInjected[type]).forEach((styleTag) => { - this.injectStyles(toBeInjected[type][styleTag], type, styleTag); + this.injectStyles( + toBeInjected[type][styleTag], + type, + styleTag, + inlineStyleMap + ); }); }); } @@ -162,9 +167,19 @@ export class StyleInjector { return this.#globalStyleMap; } - injectStyles(cssRuleset: any, _wrapperType: any, _styleTagId: any) { + injectStyles( + cssRuleset: any, + _wrapperType: any, + _styleTagId: any, + inlineStyleMap: any + ) { if (cssRuleset) { - inject(`@media screen {${cssRuleset}}`, _wrapperType as any, _styleTagId); + inject( + `@media screen {${cssRuleset}}`, + _wrapperType as any, + _styleTagId, + inlineStyleMap + ); } } } diff --git a/packages/react/src/styled.tsx b/packages/react/src/styled.tsx index 1847ad7e2..3b644e1c1 100644 --- a/packages/react/src/styled.tsx +++ b/packages/react/src/styled.tsx @@ -906,7 +906,7 @@ export function verboseStyled( styleIds = BUILD_TIME_PARAMS?.verbosedStyleIds; } - function injectSx(sx: any, type: any = 'inline') { + function injectSx(sx: any, type: any = 'inline', inlineStyleMap?: any) { const inlineSxTheme = { baseStyle: sx, }; @@ -965,7 +965,8 @@ export function verboseStyled( sxHash, type, GluestackStyleSheet, - Platform.OS + Platform.OS, + inlineStyleMap ); return orderedSXResolved; @@ -1059,7 +1060,6 @@ export function verboseStyled( // const resolvedComponentExtendedTheme = EXTENDED_THEME; theme = deepMerge(theme, resolvedComponentExtendedTheme.theme); - // @ts-ignore Object.assign(themeDefaultProps, theme?.baseStyle?.props); if (Object.keys(EXTENDED_THEME?.BUILD_TIME_PARAMS ?? {}).length > 0) { @@ -1070,7 +1070,8 @@ export function verboseStyled( EXTENDED_THEME_BUILD_TIME_PARAMS?.verbosedStyleIds ); GluestackStyleSheet.inject( - EXTENDED_THEME_BUILD_TIME_PARAMS?.toBeInjected + EXTENDED_THEME_BUILD_TIME_PARAMS?.toBeInjected, + styledContext.inlineStyleMap ); } else { // Merge of Extended Config Style ID's with Component Style ID's @@ -1084,7 +1085,10 @@ export function verboseStyled( CONFIG, componentExtendedConfig ); - GluestackStyleSheet.inject(extendedStylesToBeInjected); + GluestackStyleSheet.inject( + extendedStylesToBeInjected, + styledContext.inlineStyleMap + ); } } @@ -1133,12 +1137,18 @@ export function verboseStyled( componentExtendedConfig ); if (Platform.OS === 'web') { - GluestackStyleSheet.inject(toBeInjected); + GluestackStyleSheet.inject( + toBeInjected, + styledContext.inlineStyleMap + ); } } else { if (Platform.OS === 'web') { //@ts-ignore - GluestackStyleSheet.inject(BUILD_TIME_PARAMS.toBeInjected); + GluestackStyleSheet.inject( + BUILD_TIME_PARAMS.toBeInjected, + styledContext.inlineStyleMap + ); } } @@ -1229,7 +1239,10 @@ export function verboseStyled( ); if (Platform.OS === 'web') { - GluestackStyleSheet.inject(toBeInjected); + GluestackStyleSheet.inject( + toBeInjected, + styledContext.inlineStyleMap + ); } isInjected = true; } @@ -1432,11 +1445,19 @@ export function verboseStyled( function injectAndUpdateSXProps(filteredPassingSx: any) { if (Object.keys(filteredComponentSx).length > 0) { - orderedComponentSXResolved = injectSx(filteredComponentSx, 'inline'); + orderedComponentSXResolved = injectSx( + filteredComponentSx, + 'inline', + styledContext.inlineStyleMap + ); } if (Object.keys(filteredPassingSx).length > 0) { - orderedPassingSXResolved = injectSx(filteredPassingSx, 'passing'); + orderedPassingSXResolved = injectSx( + filteredPassingSx, + 'passing', + styledContext.inlineStyleMap + ); } const orderedSXResolved = [ diff --git a/packages/react/src/utils/css-injector/utils/inject.ts b/packages/react/src/utils/css-injector/utils/inject.ts index b0f316b8b..bba2b8ed5 100644 --- a/packages/react/src/utils/css-injector/utils/inject.ts +++ b/packages/react/src/utils/css-injector/utils/inject.ts @@ -5,13 +5,16 @@ type IWrapperType = | 'boot-descendant' | 'inline-descendant'; +export const WRAPPER_BLOCK_PREFIX = 'gs-injected'; + export const hasCss = (_id: any, _text: any) => {}; export const addCss = (_id: any, _text: any) => {}; export const injectCss = ( _css: any, _wrapperType: IWrapperType, - _styleTagId: string + _styleTagId: string, + _inlineStyleMap?: any ) => {}; export const injectGlobalCss = ( _css: any, diff --git a/packages/react/src/utils/css-injector/utils/inject.web.ts b/packages/react/src/utils/css-injector/utils/inject.web.ts index 8fa26f04a..443e50719 100644 --- a/packages/react/src/utils/css-injector/utils/inject.web.ts +++ b/packages/react/src/utils/css-injector/utils/inject.web.ts @@ -117,7 +117,8 @@ const createStyle = (styleTagId: any, css: any) => { export const injectCss = ( css: any, wrapperType: IWrapperType, - styleTagId: string + styleTagId: string, + inlineStyleMap?: any ) => { // let modifiedStylesheet = {} as any; if (!toBeFlushedStyles[wrapperType]) { @@ -138,8 +139,23 @@ export const injectCss = ( if (!style) { style = createStyle(styleTagId, css); - // wrapperElement.insertBefore(style, wrapperElement.firstChild); - wrapperElement.appendChild(style); + // console.log(inlineStyleMap, 'append child here >>>>>'); + if (inlineStyleMap) { + if (!inlineStyleMap?.initialStyleInjected) { + const styleMapId = `${WRAPPER_BLOCK_PREFIX}-${wrapperType}`; + const inlineMapStyles = inlineStyleMap[styleMapId]; + + if (inlineMapStyles) { + inlineMapStyles.push(style); + } else { + inlineStyleMap[styleMapId] = [style]; + } + // console.log('hello here >>>> there'); + } else { + // console.log('hello here >>>>'); + wrapperElement.appendChild(style); + } + } } } } From 17910862905333d36d69b23b1320d8b1d8321e3b Mon Sep 17 00:00:00 2001 From: ankit-tailor Date: Wed, 11 Oct 2023 16:44:42 +0530 Subject: [PATCH 14/48] fix: experimental provider for color mode change --- packages/react/src/StyledProvider.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/react/src/StyledProvider.tsx b/packages/react/src/StyledProvider.tsx index 09c7676bb..45b7dfad0 100644 --- a/packages/react/src/StyledProvider.tsx +++ b/packages/react/src/StyledProvider.tsx @@ -93,7 +93,7 @@ export const StyledProvider: React.FC<{ onChange((currentColor: string) => { // only for web - if (!_experimentalNestedProviderRef) { + if (!_experimentalNestedProvider) { const documentElement = document.documentElement; if (Platform.OS === 'web') { @@ -162,6 +162,7 @@ export const StyledProvider: React.FC<{ setAnimationDriverData, inlineStyleMap: inlineStyleMap.current, }; + if (_experimentalNestedProvider) { //@ts-ignore styledData._experimentalNestedProvider = _experimentalNestedProvider; From f0a368d28dd9ede50565f32865267d5226fdd90c Mon Sep 17 00:00:00 2001 From: Suraj Date: Wed, 11 Oct 2023 16:45:27 +0530 Subject: [PATCH 15/48] v1.0.2 --- 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 24562cf5e..c16ccde4b 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.2-alpha.8", + "version": "1.0.2", "keywords": [ "React Native", "Next.js", From b3e8c23bc33181c88b207472beee7fa3578f536f Mon Sep 17 00:00:00 2001 From: ankit-tailor Date: Wed, 11 Oct 2023 17:59:50 +0530 Subject: [PATCH 16/48] fix: remove extra hoc from plugins --- packages/react/src/createConfig.ts | 30 +++++++-------- packages/react/src/index.ts | 4 +- packages/react/src/plugins/font-resolver.tsx | 39 ++++++++------------ packages/react/src/styled.tsx | 37 ++++++++++--------- 4 files changed, 53 insertions(+), 57 deletions(-) diff --git a/packages/react/src/createConfig.ts b/packages/react/src/createConfig.ts index 5df3a0467..bf411ad7e 100644 --- a/packages/react/src/createConfig.ts +++ b/packages/react/src/createConfig.ts @@ -11,21 +11,21 @@ import { Platform } from 'react-native'; /********************* PLUGINS *****************************/ -var globalPluginStore: never[] = []; -function setGlobalPluginStore(plugins: any) { - if (plugins) { - // @ts-ignore - globalPluginStore.push(...plugins); - } - return getGlobalPluginStore(); -} -function getGlobalPluginStore() { - return globalPluginStore; -} +// var globalPluginStore: never[] = []; +// function setGlobalPluginStore(plugins: any) { +// if (plugins) { +// // @ts-ignore +// globalPluginStore.push(...plugins); +// } +// return getGlobalPluginStore(); +// } +// function getGlobalPluginStore() { +// return globalPluginStore; +// } -export function getInstalledPlugins() { - return getGlobalPluginStore(); -} +// export function getInstalledPlugins() { +// return getGlobalPluginStore(); +// } /********************* CREATE COMPONENTS *****************************/ @@ -74,7 +74,7 @@ export const createConfig = < > ): T => { if (config.plugins) { - config.plugins = setGlobalPluginStore(config.plugins); + // config.plugins = setGlobalPluginStore(config.plugins); } // delete config.plugins; diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts index 4359ef50f..ef0d7582f 100644 --- a/packages/react/src/index.ts +++ b/packages/react/src/index.ts @@ -92,9 +92,9 @@ export { createStyle } from './createStyle'; export { INTERNAL_updateCSSStyleInOrderedResolved } from './updateCSSStyleInOrderedResolved'; export { createConfig, - getInstalledPlugins, + // getInstalledPlugins, createComponents, - getInstalledComponents, + // getInstalledComponents, } from './createConfig'; export * from './core'; export * from './hooks'; diff --git a/packages/react/src/plugins/font-resolver.tsx b/packages/react/src/plugins/font-resolver.tsx index ad171f6ec..7dafdaa6b 100644 --- a/packages/react/src/plugins/font-resolver.tsx +++ b/packages/react/src/plugins/font-resolver.tsx @@ -2,7 +2,7 @@ import React, { useMemo } from 'react'; import type { IStyled, IStyledPlugin } from '../types'; import { useStyled } from '../StyledProvider'; import { propertyTokenMap } from '../propertyTokenMap'; -import { deepMerge, deepMergeObjects, setObjectKeyValue } from '../utils'; +import { deepMerge, setObjectKeyValue } from '../utils'; import { getVariantProps } from '../styled'; const fontWeights: any = { @@ -218,11 +218,11 @@ export class FontResolver implements IStyledPlugin, FontPlugin { return styledObject; } - componentMiddleWare({ Component: NewComp, extendedConfig }: any) { + componentMiddleWare({ Component: InputComponent, extendedConfig }: any) { const styledConfig = this.#fontFamily; this.#fontFamily = {}; - const Comp = React.forwardRef((props: any, ref: any) => { + const OutputComponent = React.forwardRef((props: any, ref: any) => { const styledContext = useStyled(); const CONFIG = useMemo( () => ({ @@ -249,12 +249,9 @@ export class FontResolver implements IStyledPlugin, FontPlugin { variantProps, styledConfig ); - let componentStyledObject = deepMergeObjects( - styledConfig, - variantStyledObject - ); + let componentStyledObject = deepMerge(styledConfig, variantStyledObject); - delete componentStyledObject.variants; + // delete componentStyledObject.variants; const { sx, fontWeight, fontFamily, fontStyle, ...rest } = restProps; @@ -279,35 +276,31 @@ export class FontResolver implements IStyledPlugin, FontPlugin { sxPropsWithThemeProps, false, false, - NewComp + () => <> ); - const styles = Array.isArray(rest.style) - ? [...rest?.style, resolvedSxProps] - : resolvedSxProps; - - return ; + return ; }); //@ts-ignore - Comp.styled = {}; + OutputComponent.styled = {}; //@ts-ignore - Comp.styled.config = {}; + OutputComponent.styled.config = {}; //@ts-ignore - Comp.styled.config = { + OutputComponent.styled.config = { ...styledConfig?.config, - ...NewComp?.styled?.config, + ...InputComponent?.styled?.config, }; //@ts-ignore - Comp.isStyledComponent = NewComp?.isStyledComponent; + OutputComponent.isStyledComponent = InputComponent?.isStyledComponent; //@ts-ignore - Comp.isComposedComponent = NewComp?.isComposedComponent; + OutputComponent.isComposedComponent = InputComponent?.isComposedComponent; //@ts-ignore - Comp.isAnimatedComponent = NewComp?.isAnimatedComponent; + OutputComponent.isAnimatedComponent = InputComponent?.isAnimatedComponent; - Comp.displayName = NewComp?.displayName; + OutputComponent.displayName = InputComponent?.displayName; - return Comp; + return OutputComponent; } } diff --git a/packages/react/src/styled.tsx b/packages/react/src/styled.tsx index 75ce9fed0..6b648fa55 100644 --- a/packages/react/src/styled.tsx +++ b/packages/react/src/styled.tsx @@ -1887,23 +1887,26 @@ export function verboseStyled( // } - if (plugins) { - for (const pluginName in plugins) { - // @ts-ignore - if (plugins[pluginName]?.componentMiddleWare) { + const ComponentWithPlugin = React.useMemo(() => { + if (plugins) { + for (const pluginName in plugins) { // @ts-ignore - Component = plugins[pluginName]?.componentMiddleWare({ - Component: Component, - theme, - componentStyleConfig, - ExtendedConfig, - }); + if (plugins[pluginName]?.componentMiddleWare) { + // @ts-ignore + Component = plugins[pluginName]?.componentMiddleWare({ + Component: Component, + theme, + componentStyleConfig, + ExtendedConfig, + }); - //@ts-ignore - pluginData = { ...pluginData, ...Component?.styled }; + //@ts-ignore + pluginData = { ...pluginData, ...Component?.styled }; + } } } - } + return Component; + }, []); let component; @@ -1919,7 +1922,7 @@ export function verboseStyled( //@ts-ignore if (Component.isStyledComponent) { component = ( - ( ref={ref} > {children} - + ); } else { component = ( @@ -1938,14 +1941,14 @@ export function verboseStyled( } } else { component = ( - {children} - + ); } From 8eaaf539a20d601656112c75fe2785d2f2aff490 Mon Sep 17 00:00:00 2001 From: ankit-tailor Date: Wed, 11 Oct 2023 18:44:25 +0530 Subject: [PATCH 17/48] v1.0.2 --- packages/animation-legend-motion-driver/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/animation-legend-motion-driver/package.json b/packages/animation-legend-motion-driver/package.json index 5fcec3c2c..91529a4d8 100644 --- a/packages/animation-legend-motion-driver/package.json +++ b/packages/animation-legend-motion-driver/package.json @@ -1,6 +1,6 @@ { "name": "@gluestack-style/legend-motion-animation-driver", - "version": "1.0.1", + "version": "1.0.2", "description": "A gluestack-style plugin for animation support using legendapp motion library", "keywords": [ "react", From 4c1f58575281341e2fc1f2b7f6eae965033a473c Mon Sep 17 00:00:00 2001 From: ankit-tailor Date: Wed, 11 Oct 2023 18:44:46 +0530 Subject: [PATCH 18/48] v1.0.2 --- packages/animation-moti-driver/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/animation-moti-driver/package.json b/packages/animation-moti-driver/package.json index ccd160a46..3a03aa7eb 100644 --- a/packages/animation-moti-driver/package.json +++ b/packages/animation-moti-driver/package.json @@ -1,6 +1,6 @@ { "name": "@gluestack-style/moti-animation-driver", - "version": "1.0.1", + "version": "1.0.2", "description": "A gluestack-style driver for using moti animation with animation resolver plugin.", "keywords": [ "react", From f98aeddb13480067549dc1172507d88b27b24566 Mon Sep 17 00:00:00 2001 From: ankit-tailor Date: Wed, 11 Oct 2023 18:45:18 +0530 Subject: [PATCH 19/48] v1.0.2 --- packages/animation-resolver/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/animation-resolver/package.json b/packages/animation-resolver/package.json index 7b52fff12..98ae24a0a 100644 --- a/packages/animation-resolver/package.json +++ b/packages/animation-resolver/package.json @@ -1,6 +1,6 @@ { "name": "@gluestack-style/animation-resolver", - "version": "1.0.1", + "version": "1.0.2", "description": "A gluestack-style plugin for resolving animation properties, utilizing animation libraries.", "keywords": [ "react", From 0d9b166125f819eeff2270261366c517479aa083 Mon Sep 17 00:00:00 2001 From: ankit-tailor Date: Wed, 11 Oct 2023 18:46:37 +0530 Subject: [PATCH 20/48] v1.0.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 c16ccde4b..745e68539 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.2", + "version": "1.0.3", "keywords": [ "React Native", "Next.js", From d6cf6930f95e8e59a83921d976cadd4e404f82c0 Mon Sep 17 00:00:00 2001 From: Suraj Date: Thu, 12 Oct 2023 11:50:12 +0530 Subject: [PATCH 21/48] fix: negative value token --- example/storybook/src/components/nb.config.ts | 3 + packages/react/src/types.ts | 66 ++++++++++++------- 2 files changed, 45 insertions(+), 24 deletions(-) diff --git a/example/storybook/src/components/nb.config.ts b/example/storybook/src/components/nb.config.ts index 9f922adf5..03bb38488 100644 --- a/example/storybook/src/components/nb.config.ts +++ b/example/storybook/src/components/nb.config.ts @@ -659,6 +659,9 @@ export const config = createConfig({ 100: 1, }, } as const, + globalStyle: { + variants: {}, + }, themes: { '2000s': { colors: { diff --git a/packages/react/src/types.ts b/packages/react/src/types.ts index 47301963f..746b97627 100644 --- a/packages/react/src/types.ts +++ b/packages/react/src/types.ts @@ -208,17 +208,7 @@ export type ExtendedConfigType = { /*********************** GLOBAL STYLE TYPES ****************************************/ export type GlobalVariantAliasesProps = - | RemoveNever<{ - [key in keyof Aliases]?: Aliases[key] extends keyof RNStyledProps - ? Aliases[key] extends keyof PropertyTokenType - ? PropertyTokenType[Aliases[key]] extends keyof Tokens - ? - | StringifyToken - | ExtendRNStyle - : never - : any - : any; - }> + | AliasesProps | RNStyledProps; export type GlobalVariantSx = Partial< @@ -812,21 +802,30 @@ export type RemoveNever = { [K in FilteredKeys]: T[K]; }; +type WithNegativeValue = T extends string | number ? T | `-${T}` : T; // Mapping tokens with scale value of alaises -export type AliasesProps = RemoveNever<{ +export type AliasesProps< + GenericComponentStyles = RNStyledProps, + Aliases = GSConfig['aliases'], + Tokens = GSConfig['tokens'] +> = RemoveNever<{ [key in keyof Aliases]?: Aliases[key] extends keyof GenericComponentStyles - ? PropertyTokenType[Aliases[key]] extends 'sizes' + ? //@ts-expect-error + PropertyTokenType[Aliases[key]] extends 'sizes' ? - | StringifyToken< - keyof GSConfig['tokens'][PropertyTokenType[Aliases[key]]] - > - | StringifyToken + | WithSizeNegativeValue | ExtendRNStyle - : - | StringifyToken< - keyof GSConfig['tokens'][PropertyTokenType[Aliases[key]]] + : //@ts-expect-error + PropertyTokenType[Aliases[key]] extends 'space' + ? + | WithNegativeValue< + //@ts-expect-error + StringifyToken > | ExtendRNStyle + : //@ts-expect-error + | StringifyToken + | ExtendRNStyle : never; }>; @@ -887,15 +886,34 @@ export type ExtendRNStyle = : //@ts-ignore GenericComponentStyles[key]; -export type TokenizedRNStyleProps = { +type WithSizeNegativeValue = keyof Tokens extends 'sizes' + ? WithNegativeValue< + //@ts-expect-error + | StringifyToken + //@ts-expect-error + | StringifyToken + > + : //@ts-expect-error + WithNegativeValue>; + +export type TokenizedRNStyleProps< + GenericComponentStyles, + Tokens = GSConfig['tokens'] +> = { [key in keyof GenericComponentStyles]?: key extends keyof PropertyTokenType ? PropertyTokenType[key] extends 'sizes' ? - | StringifyToken - | StringifyToken + | WithSizeNegativeValue + | ExtendRNStyle + : PropertyTokenType[key] extends 'space' + ? + | WithNegativeValue< + //@ts-expect-error + StringifyToken + > | ExtendRNStyle : //@ts-ignore - | StringifyToken + | StringifyToken | ExtendRNStyle : GenericComponentStyles[key]; }; From b27a2828dab26b98ffcbe9e93048c08294eda840 Mon Sep 17 00:00:00 2001 From: Suraj Date: Thu, 12 Oct 2023 11:51:53 +0530 Subject: [PATCH 22/48] v1.0.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 745e68539..e1f2ab1ae 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.3", + "version": "1.0.4", "keywords": [ "React Native", "Next.js", From 9fdfc0e270ee1433119ad343761ece24029188c1 Mon Sep 17 00:00:00 2001 From: ankit-tailor Date: Thu, 12 Oct 2023 15:33:03 +0530 Subject: [PATCH 23/48] fix: internal experimental provider web only --- 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 45b7dfad0..e65697acc 100644 --- a/packages/react/src/StyledProvider.tsx +++ b/packages/react/src/StyledProvider.tsx @@ -93,7 +93,7 @@ export const StyledProvider: React.FC<{ onChange((currentColor: string) => { // only for web - if (!_experimentalNestedProvider) { + if (Platform.OS === 'web' && !_experimentalNestedProvider) { const documentElement = document.documentElement; if (Platform.OS === 'web') { From 11d64dae3affd9ce922c772a192b0ed9d07c3552 Mon Sep 17 00:00:00 2001 From: ankit-tailor Date: Thu, 12 Oct 2023 15:34:00 +0530 Subject: [PATCH 24/48] v1.0.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 e1f2ab1ae..ff363ba47 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.4", + "version": "1.0.5", "keywords": [ "React Native", "Next.js", From 5c2419749516827213b713ba9dd344677d7d91ac Mon Sep 17 00:00:00 2001 From: ankit-tailor Date: Thu, 12 Oct 2023 16:11:51 +0530 Subject: [PATCH 25/48] v1.0.0 --- packages/babel-plugin-styled-resolver/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/babel-plugin-styled-resolver/package.json b/packages/babel-plugin-styled-resolver/package.json index 2250aafd1..e34cadcd2 100644 --- a/packages/babel-plugin-styled-resolver/package.json +++ b/packages/babel-plugin-styled-resolver/package.json @@ -1,6 +1,6 @@ { "name": "@gluestack-style/babel-plugin-styled-resolver", - "version": "1.0.0-alpha.0", + "version": "1.0.0", "description": "A gluestack-style babel plugin that transpiles your styled function calls and resolves the component styling in build time.", "keywords": [ "css-in-js", From db606cf07948b1dd7cec84753227344e4a01526a Mon Sep 17 00:00:00 2001 From: Suraj Date: Thu, 12 Oct 2023 16:18:14 +0530 Subject: [PATCH 26/48] fix: typo --- .vscode/settings.json | 3 ++- example/storybook/src/advanced/BabelPlugins/index.stories.mdx | 4 ++-- example/storybook/src/api/PropertyResolver/index.stories.mdx | 2 +- example/storybook/src/api/UtilityProps/index.stories.mdx | 2 +- example/storybook/src/overview/Performance/index.stories.mdx | 2 +- example/storybook/src/plugins/FontsPlugin/index.stories.mdx | 2 +- 6 files changed, 8 insertions(+), 7 deletions(-) diff --git a/.vscode/settings.json b/.vscode/settings.json index 7cdc87cfe..292fbfa5f 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -16,5 +16,6 @@ // Path to a .prettierignore or similar file "prettier.ignorePath": ".prettierignore", // If true, puts the `>` of a multi-line jsx element at the end of the last line instead of being alone on the next line - "editor.wordWrap": "on" + "editor.wordWrap": "on", + "cSpell.words": ["gluestack", "Pressable", "themeable"] } diff --git a/example/storybook/src/advanced/BabelPlugins/index.stories.mdx b/example/storybook/src/advanced/BabelPlugins/index.stories.mdx index 71707a3e4..6996bc30b 100644 --- a/example/storybook/src/advanced/BabelPlugins/index.stories.mdx +++ b/example/storybook/src/advanced/BabelPlugins/index.stories.mdx @@ -1,6 +1,6 @@ --- title: Babel Plugins | gluestack-style -description: All the Babel plugins gluestack-style provides for its ecosystem. It transpiles your styled function calls and resolves the component styling in build time. +description: All the Babel plugins gluestack-style provides for its ecosystem. It transpile your styled function calls and resolves the component styling in build time. --- import { Canvas, Meta, Story } from '@storybook/addon-docs'; @@ -12,7 +12,7 @@ import { Box, AppProvider } from '@gluestack/design-system'; ### @gluestack-style/babel-plugin-styled-resolver -@gluestack-style/babel-plugin-styled-resolver transpiles your `styled` function calls and resolves the `component styling` in build time. It also generates all the `CSS rules` and style ids based on which these CSS styles are applied on the component. Doing this saves tons of time on runtime because all your style calculation is already done and all your app has to do is to inject this style into a style tag and viola! All your styles appear instantaneously. This helps us to improve the performance of the apps 5-6 times. If you provide the `components` option then it also resolves the inline styles of the components created using `@gluestack-style/react`. +@gluestack-style/babel-plugin-styled-resolver transpile your `styled` function calls and resolves the `component styling` in build time. It also generates all the `CSS rules` and style ids based on which these CSS styles are applied on the component. Doing this saves tons of time on runtime because all your style calculation is already done and all your app has to do is to inject this style into a style tag and viola! All your styles appear instantaneously. This helps us to improve the performance of the apps 5-6 times. If you provide the `components` option then it also resolves the inline styles of the components created using `@gluestack-style/react`. ## Installation Steps: diff --git a/example/storybook/src/api/PropertyResolver/index.stories.mdx b/example/storybook/src/api/PropertyResolver/index.stories.mdx index abf7ab65d..7a682ad41 100644 --- a/example/storybook/src/api/PropertyResolver/index.stories.mdx +++ b/example/storybook/src/api/PropertyResolver/index.stories.mdx @@ -187,4 +187,4 @@ export const config = createConfig({ } as const); ``` -> Warning: We strongly advise against using this feature" as this can impact your performance since this needs to be resolved on the fly and can not be optimised at build time. +> Warning: We strongly advise against using this feature" as this can impact your performance since this needs to be resolved on the fly and can not be optimized at build time. diff --git a/example/storybook/src/api/UtilityProps/index.stories.mdx b/example/storybook/src/api/UtilityProps/index.stories.mdx index ce101f2f0..cbf41785b 100644 --- a/example/storybook/src/api/UtilityProps/index.stories.mdx +++ b/example/storybook/src/api/UtilityProps/index.stories.mdx @@ -1,6 +1,6 @@ --- title: Utility Props | gluestack-style -description: Writing inline styles with Utlity Props. We provide you the ability to pass down utility props on any Styled Component which internally converts to `sx` prop. +description: Writing inline styles with Utility Props. We provide you the ability to pass down utility props on any Styled Component which internally converts to `sx` prop. --- import { Canvas, Meta, Story } from '@storybook/addon-docs'; diff --git a/example/storybook/src/overview/Performance/index.stories.mdx b/example/storybook/src/overview/Performance/index.stories.mdx index 89819540b..88b1de710 100644 --- a/example/storybook/src/overview/Performance/index.stories.mdx +++ b/example/storybook/src/overview/Performance/index.stories.mdx @@ -16,7 +16,7 @@ We tested the performance of our landing page, built with `gluestack-style` and Performance matrics from lighthouse report We have run the benchmark, and we are getting great results compared to other libraries. We don't want the comparison with other libraries to be the ultimate scoring system. It doesn't give the full picture of any library. There are other important metrics too. Also, we may go wrong in how we run the benchmark, we may end up with selection bias too (unintentionally). diff --git a/example/storybook/src/plugins/FontsPlugin/index.stories.mdx b/example/storybook/src/plugins/FontsPlugin/index.stories.mdx index aeb8dc30b..56628938e 100644 --- a/example/storybook/src/plugins/FontsPlugin/index.stories.mdx +++ b/example/storybook/src/plugins/FontsPlugin/index.stories.mdx @@ -21,7 +21,7 @@ The font plugin, a utility for the styled function, provides a unified way to pa Include the `FontResolver` plugin in your config. To customize font resolution, pass a mapFonts callback function to the constructor. ```js -import { FontResolver } from '@gluetsack-style/react'; +import { FontResolver } from '@gluestack-style/react'; export const config = { aliases: {}, From dd6c144c0cd43bf67a13e7ab8f462e249bb4ac10 Mon Sep 17 00:00:00 2001 From: ankit-tailor Date: Mon, 16 Oct 2023 12:29:56 +0530 Subject: [PATCH 27/48] 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 28/48] 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 29/48] 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 30/48] 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 187acfdd798cda45265cd76369c022fecb0da972 Mon Sep 17 00:00:00 2001 From: Suraj Ahmed Choudhury Date: Mon, 16 Oct 2023 14:48:11 +0530 Subject: [PATCH 31/48] Update README.md --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 73d5e4f73..ee4155f8c 100644 --- a/README.md +++ b/README.md @@ -88,7 +88,7 @@ export const App = () => { ``` More guides on how to get started are available -[here](https://gluestack.io/style). +[here](https://gluestack.io/style/docs). ## Contributing @@ -96,4 +96,4 @@ We welcome contributions to the `gluestack-style`! If you have an idea for a new ## License -Licensed under the MIT License, Copyright © 2021 GeekyAnts. See [LICENSE](https://github.com/gluestack/gluestack-style/blob/master/LICENSE) for more information. +Licensed under the MIT License, Copyright © 2021 GeekyAnts. See [LICENSE](https://github.com/gluestack/gluestack-style/blob/main/LICENSE) for more information. From 618ae8fb2902fbd4cc1273a0819e006f4ff1862b Mon Sep 17 00:00:00 2001 From: Suraj Ahmed Choudhury Date: Mon, 16 Oct 2023 14:49:13 +0530 Subject: [PATCH 32/48] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index ee4155f8c..53d64f372 100644 --- a/README.md +++ b/README.md @@ -6,7 +6,7 @@
-## A library that allows you to use CSS in your React and React Native projects with a modern, powerful and flexible way. `gluestack-style` allows you to write CSS using JavaScript, which enables you to take advantage of the power and expressiveness of both languages. With its simple and intuitive API, you can easily create dynamic styles, responsive design, and handle themes for your applications. +**A library that allows you to use CSS in your React and React Native projects with a modern, powerful and flexible way. `gluestack-style` allows you to write CSS using JavaScript, which enables you to take advantage of the power and expressiveness of both languages. With its simple and intuitive API, you can easily create dynamic styles, responsive design, and handle themes for your applications.** ## Documentation From f3fb15e5b7a00230a4b313fedee54cd3094fb5b7 Mon Sep 17 00:00:00 2001 From: ankit-tailor Date: Mon, 16 Oct 2023 15:46:23 +0530 Subject: [PATCH 33/48] 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 34/48] 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 35/48] 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", From c300fdac46eb1280de37da50707d46e28adb82e7 Mon Sep 17 00:00:00 2001 From: Viraj Joshi <66306233+Viraj-10@users.noreply.github.com> Date: Tue, 17 Oct 2023 12:47:29 +0530 Subject: [PATCH 36/48] fix: added Warning for passing prop in media query --- example/storybook/src/api/ResponsiveStyles/index.stories.mdx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/example/storybook/src/api/ResponsiveStyles/index.stories.mdx b/example/storybook/src/api/ResponsiveStyles/index.stories.mdx index 21ca805a0..f6991f615 100644 --- a/example/storybook/src/api/ResponsiveStyles/index.stories.mdx +++ b/example/storybook/src/api/ResponsiveStyles/index.stories.mdx @@ -107,6 +107,9 @@ Once configured, you can apply different styles at different breakpoints. /> + > Note that the '@' symbol indicates a media query.The '@' symbol should be followed by the name of the desired breakpoint for the styles. > Note that the same API can be used with the sx prop to override styles inline. + +> Caution: Utilizing the `Passing Props` feature within `Media Queries` is not supported. From 3952576d3bb20d0cc84eef2ceabd48fcc12825f8 Mon Sep 17 00:00:00 2001 From: Viraj Joshi <66306233+Viraj-10@users.noreply.github.com> Date: Tue, 17 Oct 2023 12:48:59 +0530 Subject: [PATCH 37/48] fix: added passing prop warning in media query --- example/storybook/src/api/PropsPassing/index.stories.mdx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/example/storybook/src/api/PropsPassing/index.stories.mdx b/example/storybook/src/api/PropsPassing/index.stories.mdx index 89dc45812..0ae57a8de 100644 --- a/example/storybook/src/api/PropsPassing/index.stories.mdx +++ b/example/storybook/src/api/PropsPassing/index.stories.mdx @@ -33,3 +33,5 @@ const StyledComponent = styled( }, ); ``` + +> Caution: Utilizing the `Passing Props` feature within `Media Queries` is not supported. From d2ddf18bcef03ebaf3b03d16999fdc91cce77448 Mon Sep 17 00:00:00 2001 From: Viraj-10 Date: Tue, 17 Oct 2023 16:35:07 +0530 Subject: [PATCH 38/48] fix: changeset build issue --- package.json | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/package.json b/package.json index be1075f10..52f52d998 100644 --- a/package.json +++ b/package.json @@ -7,7 +7,8 @@ "scripts": { "test": "bash ./scripts/test.sh", "dev": "turbo run dev", - "build": "turbo run build --filter=@gluestack-style* --no-cache", + "build": "turbo run build --filter=@gluestack-style/react --no-cache && yarn build:rest", + "build:rest": "turbo run build --filter=@gluestack-style* --no-cache --ignore=@gluestack-style/react", "clean": "turbo run clean && rm -rf node_modules", "format": "prettier --write \"**/*.{ts,tsx,js,jsx,json,md}\" --ignore-path .gitignore", "release": "changeset publish", From c696c98d0db3c2f1c125cd893b65ee4c360aa0cb Mon Sep 17 00:00:00 2001 From: Viraj-10 Date: Tue, 17 Oct 2023 16:50:20 +0530 Subject: [PATCH 39/48] fix: changeset build issue --- .changeset/config.json | 8 +------- example/storybook/package.json | 2 +- packages/benchmark-next/package.json | 4 ++-- 3 files changed, 4 insertions(+), 10 deletions(-) diff --git a/.changeset/config.json b/.changeset/config.json index 53769b98b..9aa735316 100644 --- a/.changeset/config.json +++ b/.changeset/config.json @@ -7,11 +7,5 @@ "access": "public", "baseBranch": "main", "updateInternalDependencies": "patch", - "ignore": [ - "expo-app", - "babel-gluestack-style-resolver-example", - "example-storybook", - "next-example-styled", - "benchmark-next" - ] + "ignore": ["benchmark-next", "@gluestack/ui-storybook"] } diff --git a/example/storybook/package.json b/example/storybook/package.json index 04fb7dd3a..382bf5971 100644 --- a/example/storybook/package.json +++ b/example/storybook/package.json @@ -23,7 +23,7 @@ }, "dependencies": { "@expo/html-elements": "^0.4.2", - "@gluestack-style/react": "^0.2.11-alpha.0", + "@gluestack-style/react": "1.0.6", "@gluestack-ui/actionsheet": "^0.2.16", "@gluestack-ui/alert-dialog": "^0.1.14", "@gluestack-ui/button": "^0.1.23", diff --git a/packages/benchmark-next/package.json b/packages/benchmark-next/package.json index 02724489f..28209bd18 100644 --- a/packages/benchmark-next/package.json +++ b/packages/benchmark-next/package.json @@ -25,8 +25,8 @@ "styled-components": "^5.3.0" }, "devDependencies": { - "@gluestack-style/babel-plugin-styled-resolver": "^0.1.6", - "@gluestack-style/react": "^0.1.33", + "@gluestack-style/babel-plugin-styled-resolver": "1.0.0", + "@gluestack-style/react": "1.0.6", "@emotion/styled": "^11.3.0", "@expo/next-adapter": "^4.0.13", "@types/react": "17.0.1", From 36b1418fdd8a7d83bb907175833126d3e1fa94ff Mon Sep 17 00:00:00 2001 From: Viraj-10 Date: Tue, 17 Oct 2023 16:57:29 +0530 Subject: [PATCH 40/48] fix: commenting test workflow --- .github/workflows/{testing.yml => testing.yml_old} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename .github/workflows/{testing.yml => testing.yml_old} (100%) diff --git a/.github/workflows/testing.yml b/.github/workflows/testing.yml_old similarity index 100% rename from .github/workflows/testing.yml rename to .github/workflows/testing.yml_old From 43c70c32a017f636df2abe8f44e4e9469fdbf0c8 Mon Sep 17 00:00:00 2001 From: ankit-tailor Date: Wed, 18 Oct 2023 16:25:30 +0530 Subject: [PATCH 41/48] fix: typings --- packages/react/src/styled.tsx | 8 ++- packages/react/src/types.ts | 108 ++++++++++++++++------------------ 2 files changed, 58 insertions(+), 58 deletions(-) diff --git a/packages/react/src/styled.tsx b/packages/react/src/styled.tsx index af357c973..c475b74ae 100644 --- a/packages/react/src/styled.tsx +++ b/packages/react/src/styled.tsx @@ -10,6 +10,7 @@ import type { ExtendedConfigType, IComponentStyleConfig, StyledConfig, + UtilityProps, } from './types'; import { deepMerge, @@ -995,7 +996,12 @@ export function verboseStyled( // sxHash: BUILD_TIME_sxHash = '', ...componentProps }: Omit< - ComponentProps, + Omit & + Partial> & + Partial> & { + as?: any; + children?: any; + }, 'animationComponentGluestack' >, ref: React.ForwardedRef

diff --git a/packages/react/src/types.ts b/packages/react/src/types.ts index 93e575293..019753f30 100644 --- a/packages/react/src/types.ts +++ b/packages/react/src/types.ts @@ -735,69 +735,63 @@ interface GenericComponents { /********************* COMPONENT PROPS TYPE *****************************************/ export type ComponentProps = - 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]; - }) - >; + 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]; + }); export type UtilityProps = Omit< TokenizedRNStyleProps>, keyof GenericComponentProps > & Omit< - AliasesProps>, + AliasesProps>, keyof GenericComponentProps >; From f8c2598f829950b4ae84d6462d568f62f45ffbf4 Mon Sep 17 00:00:00 2001 From: ankit-tailor Date: Wed, 18 Oct 2023 16:31:17 +0530 Subject: [PATCH 42/48] chore: v1.0.7 --- example/storybook/package.json | 2 +- packages/animation-moti-driver/package.json | 4 ++-- packages/animation-resolver/package.json | 4 ++-- packages/benchmark-next/package.json | 2 +- packages/react/CHANGELOG.md | 6 ++++++ packages/react/package.json | 2 +- 6 files changed, 13 insertions(+), 7 deletions(-) diff --git a/example/storybook/package.json b/example/storybook/package.json index 382bf5971..47daba70b 100644 --- a/example/storybook/package.json +++ b/example/storybook/package.json @@ -23,7 +23,7 @@ }, "dependencies": { "@expo/html-elements": "^0.4.2", - "@gluestack-style/react": "1.0.6", + "@gluestack-style/react": "1.0.7", "@gluestack-ui/actionsheet": "^0.2.16", "@gluestack-ui/alert-dialog": "^0.1.14", "@gluestack-ui/button": "^0.1.23", diff --git a/packages/animation-moti-driver/package.json b/packages/animation-moti-driver/package.json index 3a03aa7eb..ca3d65f16 100644 --- a/packages/animation-moti-driver/package.json +++ b/packages/animation-moti-driver/package.json @@ -24,13 +24,13 @@ "clean": "rm -rf lib" }, "peerDependencies": { - "@gluestack-style/react": ">=0.2", + "@gluestack-style/react": ">=1.0.7", "moti": ">=0.26", "react-native-gesture-handler": ">=2.12", "react-native-reanimated": ">=3.5" }, "devDependencies": { - "@gluestack-style/react": "^0.2.49", + "@gluestack-style/react": "^1.0.7", "@types/react": "^18.0.22", "@types/react-native": "^0.69.15", "babel-plugin-transform-remove-console": "^6.9.4", diff --git a/packages/animation-resolver/package.json b/packages/animation-resolver/package.json index 98ae24a0a..c428cf9a7 100644 --- a/packages/animation-resolver/package.json +++ b/packages/animation-resolver/package.json @@ -22,10 +22,10 @@ "clean": "rm -rf lib" }, "peerDependencies": { - "@gluestack-style/react": ">=0.2" + "@gluestack-style/react": ">=1.0.7" }, "devDependencies": { - "@gluestack-style/react": "^0.2.49", + "@gluestack-style/react": "^1.0.7", "@types/react": "^18.0.22", "@types/react-native": "^0.69.15", "babel-plugin-transform-remove-console": "^6.9.4", diff --git a/packages/benchmark-next/package.json b/packages/benchmark-next/package.json index 28209bd18..cf42e97a6 100644 --- a/packages/benchmark-next/package.json +++ b/packages/benchmark-next/package.json @@ -26,7 +26,7 @@ }, "devDependencies": { "@gluestack-style/babel-plugin-styled-resolver": "1.0.0", - "@gluestack-style/react": "1.0.6", + "@gluestack-style/react": "1.0.7", "@emotion/styled": "^11.3.0", "@expo/next-adapter": "^4.0.13", "@types/react": "17.0.1", diff --git a/packages/react/CHANGELOG.md b/packages/react/CHANGELOG.md index 78ce2539a..1a3b72210 100644 --- a/packages/react/CHANGELOG.md +++ b/packages/react/CHANGELOG.md @@ -1,5 +1,11 @@ # @gluestack-style/react +## 1.0.7 + +### Patch Changes + +- fix: component typings + ## 0.2.9 ### Patch Changes diff --git a/packages/react/package.json b/packages/react/package.json index b6b5f4e77..b5ebc04d6 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.6", + "version": "1.0.7", "keywords": [ "React Native", "Next.js", From 93599d60d58189ba568a66350d2ba53868b50c79 Mon Sep 17 00:00:00 2001 From: ankit-tailor Date: Wed, 18 Oct 2023 18:05:24 +0530 Subject: [PATCH 43/48] fix: theme passing props --- packages/react/src/styled.tsx | 16 +++++++++------- 1 file changed, 9 insertions(+), 7 deletions(-) diff --git a/packages/react/src/styled.tsx b/packages/react/src/styled.tsx index c475b74ae..6488369ab 100644 --- a/packages/react/src/styled.tsx +++ b/packages/react/src/styled.tsx @@ -1198,7 +1198,7 @@ export function verboseStyled( const { variantProps: defaultVariantProps, - restProps: defaultComponentPropsWithoutVariants, + restProps: defaultThemePropsWithoutVariants, } = getVariantProps(themeDefaultProps, theme); const { @@ -1384,7 +1384,7 @@ export function verboseStyled( const defaultResolvedInlineProps = resolveInlineProps( componentStyleConfig, componentExtendedConfig, - defaultComponentPropsWithoutVariants, + defaultThemePropsWithoutVariants, CONFIG ); @@ -1404,17 +1404,19 @@ export function verboseStyled( const { sx: filteredComponentSx, rest: filteredComponentRemainingProps } = convertUtiltiyToSXFromProps( - Object.assign( - defaultComponentPropsWithoutVariants, - inlineComponentPropsWithoutVariants - ), + // Object.assign( + // defaultThemePropsWithoutVariants, + inlineComponentPropsWithoutVariants, styledSystemProps, componentStyleConfig ); let { sx: filteredPassingSx, rest: filteredPassingRemainingProps } = convertUtiltiyToSXFromProps( - shallowMerge({ ...passingProps }, applyAncestorPassingProps), + shallowMerge( + { ...defaultThemePropsWithoutVariants, ...passingProps }, + applyAncestorPassingProps + ), styledSystemProps, componentStyleConfig ); From 8cf50d745539193f97452e846bbe2c8b6b926b91 Mon Sep 17 00:00:00 2001 From: Viraj-10 Date: Thu, 19 Oct 2023 13:44:42 +0530 Subject: [PATCH 44/48] fix: global style platform based style --- packages/react/src/StyledProvider.tsx | 2 +- packages/react/src/createGlobalStyles.ts | 4 +++- yarn.lock | 23 +---------------------- 3 files changed, 5 insertions(+), 24 deletions(-) diff --git a/packages/react/src/StyledProvider.tsx b/packages/react/src/StyledProvider.tsx index 3006403cb..b8a50b7a4 100644 --- a/packages/react/src/StyledProvider.tsx +++ b/packages/react/src/StyledProvider.tsx @@ -152,7 +152,7 @@ export const StyledProvider: React.FC<{ const [animationDriverData, setAnimationDriverData] = React.useState(); const globalStyleMap = - config?.globalStyle && createGlobalStyles(config.globalStyle); + config?.globalStyle && createGlobalStyles(config.globalStyle, Platform); const contextValue = React.useMemo(() => { const styledData = { diff --git a/packages/react/src/createGlobalStyles.ts b/packages/react/src/createGlobalStyles.ts index 30294efd9..f072fd9ed 100644 --- a/packages/react/src/createGlobalStyles.ts +++ b/packages/react/src/createGlobalStyles.ts @@ -1,9 +1,11 @@ import { convertStyledToStyledVerbosed } from './convertSxToSxVerbosed'; import { stableHash } from './stableHash'; +import { resolvePlatformTheme } from './styled'; import { updateOrderUnResolvedMap } from './updateOrderUnResolvedMap'; -export const createGlobalStyles = (globalStyle: object) => { +export const createGlobalStyles = (globalStyle: object, Platform) => { const versboseComponentTheme = convertStyledToStyledVerbosed(globalStyle); + resolvePlatformTheme(versboseComponentTheme, Platform.OS); const componentHash = stableHash({ ...globalStyle, }); diff --git a/yarn.lock b/yarn.lock index 5a435166e..6344fb3de 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2606,28 +2606,7 @@ "@babel/traverse" "^7.20.5" lodash.merge "^4.6.2" -"@gluestack-style/babel-plugin-styled-resolver@^0.1.6": - version "0.1.14" - resolved "https://registry.yarnpkg.com/@gluestack-style/babel-plugin-styled-resolver/-/babel-plugin-styled-resolver-0.1.14.tgz#1e3cd2dbdf91b5e9dcb8d34ab7df7aed1beea9bb" - integrity sha512-fgfuvCTngRZIbZf5prtoiZeOBaMtjEh4EJUIJygHY6iXscFuU6tnstnMnHqZdCd1dty+2E1DuwnG+JSKfYgYmA== - dependencies: - "@babel/core" "^7.20.5" - "@babel/generator" "^7.20.5" - "@babel/parser" "^7.20.5" - "@babel/plugin-transform-typescript" "^7.20.2" - "@babel/preset-typescript" "^7.18.6" - "@babel/traverse" "^7.20.5" - lodash.merge "^4.6.2" - -"@gluestack-style/react@^0.1.33": - version "0.1.33" - resolved "https://registry.yarnpkg.com/@gluestack-style/react/-/react-0.1.33.tgz#cd18f38bf359527e4f79d223bb07e9024f40ba4f" - integrity sha512-wBdoOA3i/cp0EcgJnwJgL1a8BATjbX/pCZgWm31N6sZOgCB4Phq7m0bDjfSpeJ8sKpOEDlUP5wYCo7Yww0mbqA== - dependencies: - inline-style-prefixer "^6.0.1" - normalize-css-color "^1.0.2" - -"@gluestack-style/react@^0.2.11-alpha.0", "@gluestack-style/react@^0.2.16", "@gluestack-style/react@^0.2.21", "@gluestack-style/react@^0.2.49": +"@gluestack-style/react@^0.2.16", "@gluestack-style/react@^0.2.21": version "0.2.51" resolved "https://registry.yarnpkg.com/@gluestack-style/react/-/react-0.2.51.tgz#0cfcca4f97f908ed3a352bd7e2336d436cc22415" integrity sha512-21TLr+e7KneP8N1d1iMKG6npMdYb/oPN/t5KZ/2kns2mg9NVCrfVmVuuMYKo+Xcej95BFOHuGuomskzLwdK1HQ== From 00535fed3f289c349d557c8b3780432cad5ec0e1 Mon Sep 17 00:00:00 2001 From: ankit-tailor Date: Thu, 19 Oct 2023 18:16:25 +0530 Subject: [PATCH 45/48] fix: return default value as fallback --- packages/react/src/hooks/useToken.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react/src/hooks/useToken.ts b/packages/react/src/hooks/useToken.ts index 2bbd1b679..2ca7bce15 100644 --- a/packages/react/src/hooks/useToken.ts +++ b/packages/react/src/hooks/useToken.ts @@ -11,5 +11,5 @@ export const useToken = (tokenScale: string, token: string) => { const theme: ICustomConfig = useStyled(); // @ts-ignore const themeTokens = theme.config.tokens; - return themeTokens?.[`${tokenScale}`]?.[`${token}`]; + return themeTokens?.[`${tokenScale}`]?.[`${token}`] ?? token; }; From 1dabe5155a06f4c13f9a4c0614317a0e0c38a4aa Mon Sep 17 00:00:00 2001 From: ankit-tailor Date: Thu, 19 Oct 2023 18:22:18 +0530 Subject: [PATCH 46/48] chore: v1.0.8 --- example/storybook/package.json | 2 +- packages/benchmark-next/package.json | 2 +- packages/react/CHANGELOG.md | 8 ++++++++ packages/react/package.json | 2 +- 4 files changed, 11 insertions(+), 3 deletions(-) diff --git a/example/storybook/package.json b/example/storybook/package.json index 47daba70b..56f78c943 100644 --- a/example/storybook/package.json +++ b/example/storybook/package.json @@ -23,7 +23,7 @@ }, "dependencies": { "@expo/html-elements": "^0.4.2", - "@gluestack-style/react": "1.0.7", + "@gluestack-style/react": "1.0.8", "@gluestack-ui/actionsheet": "^0.2.16", "@gluestack-ui/alert-dialog": "^0.1.14", "@gluestack-ui/button": "^0.1.23", diff --git a/packages/benchmark-next/package.json b/packages/benchmark-next/package.json index cf42e97a6..0b158dd35 100644 --- a/packages/benchmark-next/package.json +++ b/packages/benchmark-next/package.json @@ -26,7 +26,7 @@ }, "devDependencies": { "@gluestack-style/babel-plugin-styled-resolver": "1.0.0", - "@gluestack-style/react": "1.0.7", + "@gluestack-style/react": "1.0.8", "@emotion/styled": "^11.3.0", "@expo/next-adapter": "^4.0.13", "@types/react": "17.0.1", diff --git a/packages/react/CHANGELOG.md b/packages/react/CHANGELOG.md index 1a3b72210..a6ffdc918 100644 --- a/packages/react/CHANGELOG.md +++ b/packages/react/CHANGELOG.md @@ -1,5 +1,13 @@ # @gluestack-style/react +## 1.0.8 + +### Patch Changes + +- - Fixed global style platform based resolution + - Fixed useToken to return default value as fallback + - Fixed theme passing props resolution + ## 1.0.7 ### Patch Changes diff --git a/packages/react/package.json b/packages/react/package.json index b5ebc04d6..d04887dfd 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.7", + "version": "1.0.8", "keywords": [ "React Native", "Next.js", From 10432f1b300ee49c854cd7de2bb9dd2d42ef5804 Mon Sep 17 00:00:00 2001 From: ankit-tailor Date: Thu, 19 Oct 2023 19:03:04 +0530 Subject: [PATCH 47/48] fix: platform typing --- packages/react/src/createGlobalStyles.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react/src/createGlobalStyles.ts b/packages/react/src/createGlobalStyles.ts index f072fd9ed..558e501c3 100644 --- a/packages/react/src/createGlobalStyles.ts +++ b/packages/react/src/createGlobalStyles.ts @@ -3,7 +3,7 @@ import { stableHash } from './stableHash'; import { resolvePlatformTheme } from './styled'; import { updateOrderUnResolvedMap } from './updateOrderUnResolvedMap'; -export const createGlobalStyles = (globalStyle: object, Platform) => { +export const createGlobalStyles = (globalStyle: object, Platform: any) => { const versboseComponentTheme = convertStyledToStyledVerbosed(globalStyle); resolvePlatformTheme(versboseComponentTheme, Platform.OS); const componentHash = stableHash({ From 5a9e1ebc65c3e19ba909b0339546908e8e90d8c3 Mon Sep 17 00:00:00 2001 From: Viraj-10 Date: Fri, 20 Oct 2023 16:44:02 +0530 Subject: [PATCH 48/48] fix: heading ** removed --- example/storybook/src/advanced/BabelPlugins/index.stories.mdx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/example/storybook/src/advanced/BabelPlugins/index.stories.mdx b/example/storybook/src/advanced/BabelPlugins/index.stories.mdx index 6996bc30b..f9f733adf 100644 --- a/example/storybook/src/advanced/BabelPlugins/index.stories.mdx +++ b/example/storybook/src/advanced/BabelPlugins/index.stories.mdx @@ -40,7 +40,7 @@ import { Box, AppProvider } from '@gluestack/design-system'; 3. Just make sure your `babel.config.js` and `gluestack-style.config.js/ts` are in the same directory. We suggest you keep both of them at the root of your app codebase. -### **Let us see how this Babel plugin works.** +### Let us see how this Babel plugin works. - First, it traverses your files and tries to find `styled` imported from `@gluestack-style/react`. - Once it finds a declaration of `styled` it then looks for its function call. @@ -196,7 +196,7 @@ module.exports = function (api) { - `components`: The `components` option allows you to specify the library/import_path name & file path of components created using `@gluestack-style/react`. This option is useful in scenarios where you are creating a custom component with the styled function and using it with inline styles. If you want to resolve those inline styles on build time just define this option with the library name and file path of the components folder or library. -> **Note**: Even using this option if you have extended your config, added aliases, tokens or propertyResolver to a StyledComponent then it will not be resolved on build time. It will be resolved on runtime. +> Note: Even using this option if you have extended your config, added aliases, tokens or propertyResolver to a StyledComponent then it will not be resolved on build time. It will be resolved on runtime. ```js // babel.config.js