Merge pull request #503 from gluestack/release/@gluestack-style/react…

…@1.0.9 Release/@gluestack style/[email protected]
gluestack · Oct 30, 2023 · ecb6ebe · ecb6ebe
2 parents 0f16922 + 07d31d3
commit ecb6ebe
Show file tree

Hide file tree

Showing 4 changed files with 78 additions and 11 deletions.
diff --git a/packages/react/package.json b/packages/react/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@gluestack-style/react",
   "description": "A universal & performant styling library for React Native, Next.js & React",
-  "version": "1.0.8",
+  "version": "1.0.9-alpha.8",
   "keywords": [
     "React Native",
     "Next.js",

diff --git a/packages/react/src/Theme.tsx b/packages/react/src/Theme.tsx
@@ -1,5 +1,6 @@
 import { View } from 'react-native';
 import * as React from 'react';
+import { styled } from './styled';
 type Config = any;
 
 export const defaultConfig: { theme?: string } = {
@@ -8,11 +9,17 @@ export const defaultConfig: { theme?: string } = {
 
 const defaultContextData: Config = defaultConfig;
 const ThemeContext = React.createContext<Config>(defaultContextData);
+// Can be discussed should we provide flex 1 by default or not.
+const StyledView = styled(
+  View,
+  {
+    // flex: 1
+  },
+  { componentName: 'GluestackThemeView' }
+);
 
-export const Theme: React.FC<{
-  children?: React.ReactNode;
-  name?: any;
-}> = ({ name, children }) => {
+// @ts-ignore
+export const Theme: typeof StyledView = ({ children, name, ...props }) => {
   const contextValue = React.useMemo(() => {
     return {
       theme: name,
@@ -22,7 +29,9 @@ export const Theme: React.FC<{
   return (
     <ThemeContext.Provider value={contextValue}>
       {/* @ts-ignore */}
-      <View dataSet={{ 'theme-id': name }}>{children}</View>
+      <StyledView dataSet={{ 'theme-id': name }} {...props}>
+        {children}
+      </StyledView>
     </ThemeContext.Provider>
   );
 };

diff --git a/packages/react/src/generateStylePropsFromCSSIds.ts b/packages/react/src/generateStylePropsFromCSSIds.ts
@@ -131,7 +131,8 @@ export function generateStylePropsFromCSSIds(
   props: any,
   styleCSSIds: any,
   config: any,
-  activeTheme: any
+  activeTheme: any,
+  componentConfig: any
 ) {
   const propsStyles = Array.isArray(props?.style)
     ? props?.style
@@ -178,5 +179,15 @@ export function generateStylePropsFromCSSIds(
     // DONOT REMOVE THIS LINE, THIS IS FOR SPECIFIC COMPONENTS LIKE next/link
     'data-style': getDataStyle(props, styleCSSIdsString),
   });
+
+  if (Platform.OS === 'web') {
+    Object.assign(props, {
+      dataSet: {
+        ...props?.dataSet,
+        componentConfig: JSON.stringify(componentConfig),
+      },
+    });
+  }
+
   return props;
 }
diff --git a/packages/react/src/styled.tsx b/packages/react/src/styled.tsx
@@ -785,10 +785,13 @@ const getStyleIdsFromMap = (
   styleIds: any
 ) => {
   let componentExtendedConfig = CONFIG;
+
   if (ExtendedConfig) {
-    componentExtendedConfig = deepMerge(CONFIG, ExtendedConfig);
+    componentExtendedConfig = deepMergeObjects(CONFIG, ExtendedConfig);
   }
+
   Object.assign(styledSystemProps, componentExtendedConfig?.aliases);
+
   const componentStyleIds = styleIds.component;
   const componentDescendantStyleIds = styleIds.descendant;
 
@@ -1022,6 +1025,7 @@ export function verboseStyled<P, Variants, ComCon>(
     const applySxDescendantStyleCSSIdsAndPropsWithKey = useRef({});
 
     const styledContext = useStyled();
+
     const { theme: activeTheme } = useTheme();
 
     const ancestorStyleContext = useContext(AncestorStyleContext);
@@ -1041,6 +1045,7 @@ export function verboseStyled<P, Variants, ComCon>(
         ...styledContext.config,
         propertyTokenMap,
       };
+
       // for extended components
 
       const EXTENDED_THEME =
@@ -1107,7 +1112,14 @@ export function verboseStyled<P, Variants, ComCon>(
           // @ts-ignore
           [nonVerbosedTheme, , , Component] = plugins[
             pluginName
-          ]?.inputMiddleWare<P>(nonVerbosedTheme, true, true, Component);
+          ]?.inputMiddleWare<P>(
+            nonVerbosedTheme,
+            true,
+            true,
+            Component,
+            componentStyleConfig,
+            ExtendedConfig
+          );
         }
         nonVerbosedTheme = convertStyledToStyledVerbosed(nonVerbosedTheme);
       }
@@ -1893,11 +1905,31 @@ export function verboseStyled<P, Variants, ComCon>(
 
     // Object.assign(resolvedInlineProps, applyComponentInlineProps);
 
+    const componentConfig = {
+      componentName: componentStyleConfig?.componentName,
+      colorMode: styledContext.colorMode,
+      ...variantProps,
+      states,
+    };
+
+    //@ts-ignore
+    if (applyComponentInlineProps?.as || passingProps?.as?.displayName) {
+      componentConfig.componentName =
+        //@ts-ignore
+        applyComponentInlineProps?.as?.displayName ??
+        passingProps?.as?.displayName;
+      componentConfig.as =
+        //@ts-ignore
+        applyComponentInlineProps?.as?.displayName ??
+        passingProps?.as?.displayName;
+    }
+
     const resolvedStyleProps = generateStylePropsFromCSSIds(
       applyComponentInlineProps,
       styleCSSIds,
       CONFIG,
-      activeTheme
+      activeTheme,
+      componentConfig
     );
 
     const AsComp: any =
@@ -1939,6 +1971,7 @@ export function verboseStyled<P, Variants, ComCon>(
       plugins?.length > 0
         ? {
             ...variantProps,
+            states: states,
             sx: componentProps.sx,
           }
         : {};
@@ -1949,7 +1982,9 @@ export function verboseStyled<P, Variants, ComCon>(
         component = (
           <ComponentWithPlugin
             {...resolvedStyleProps}
+            {...variantProps}
             {...propsToBePassedInToPlugin}
+            states={states}
             style={resolvedStyleMemo}
             as={AsComp}
             ref={ref}
@@ -1965,7 +2000,19 @@ export function verboseStyled<P, Variants, ComCon>(
         );
       }
     } else {
-      component = (
+      //@ts-ignores
+      component = Component.isStyledComponent ? (
+        <ComponentWithPlugin
+          {...resolvedStyleProps}
+          {...propsToBePassedInToPlugin}
+          {...variantProps}
+          states={states}
+          style={resolvedStyleMemo}
+          ref={ref}
+        >
+          {children}
+        </ComponentWithPlugin>
+      ) : (
         <ComponentWithPlugin
           {...resolvedStyleProps}
           {...propsToBePassedInToPlugin}