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

…@0.2.20 Release/@gluestack style/[email protected]
gluestack · Sep 1, 2023 · e3ce6b9 · e3ce6b9
2 parents 3575891 + d20eb7a
commit e3ce6b9
Show file tree

Hide file tree

Showing 12 changed files with 214 additions and 137 deletions.
diff --git a/example/storybook/.storybook/preview.js b/example/storybook/.storybook/preview.js
@@ -50,7 +50,7 @@ export const parameters = {
         'configuration',
         [
           'Theme Tokens',
-          'Themes',
+          // 'Themes',
           'Breakpoints',
           'Global Style',
           'Customizing Components',

diff --git a/example/ui-examples/App.tsx b/example/ui-examples/App.tsx
@@ -1,6 +1,10 @@
 /* eslint-disable react-native/no-inline-styles */
 import React from 'react';
-import { SafeAreaView, StyleSheet, View } from 'react-native';
+import {
+  SafeAreaView,
+  StyleSheet,
+  //  View
+} from 'react-native';
 import { GluestackUIProvider } from './gluestack-ui-components';
 import { config } from './gluestack-ui.config';
 import { SSRProvider } from '@react-native-aria/utils';
@@ -14,7 +18,7 @@ import {
 } from '@expo-google-fonts/inter';
 import './styles';
 import HomestayPage from './kitchensink-components/HomestayPage';
-import { styled, Theme } from '@gluestack-style/react';
+// import { styled } from '@gluestack-style/react';
 
 // const orderedSXResolved = [
 //   {
@@ -60,11 +64,11 @@ import { styled, Theme } from '@gluestack-style/react';
 
 // const Box = styled(View, {});
 
-const Box = styled(View, {
-  bg: '$primary100',
-  h: '$10',
-  w: '$10',
-});
+// const Box = styled(View, {
+//   bg: '$primary100',
+//   h: '$10',
+//   w: '$10',
+// });
 
 // const ComposedButton = styled(BaseButton, {
 //   bg: '$red500',
@@ -117,18 +121,14 @@ export default function App() {
       >
         {/* gluestack-ui provider */}
         <SSRProvider>
-          <GluestackUIProvider config={config.theme} colorMode={'light'}>
-            {/* <ThemeContext.Provider value={{ colorMode, toggleColorMode }}> */}
-            <Theme name="x">
-              {/* <Box bg="$amber800"></Box> */}
+          <GluestackUIProvider config={config.theme} colorMode={colorMode}>
+            {/* <Theme name="x">
+              <Box bg="$primary100"></Box>
               <Box bg="$red500"></Box>
-            </Theme>
-            {/* <Box bg="$amber50"></Box>
-            <Box></Box> */}
-            {/* <BaseButton>Hello Worlddddd</BaseButton>
-              <ComposedButton>Hello</ComposedButton> */}
-            {/* <HomestayPage /> */}
-            {/* </ThemeContext.Provider> */}
+            </Theme> */}
+            <ThemeContext.Provider value={{ colorMode, toggleColorMode }}>
+              <HomestayPage />
+            </ThemeContext.Provider>
           </GluestackUIProvider>
         </SSRProvider>
       </SafeAreaView>

diff --git a/example/ui-examples/webpack.config.js b/example/ui-examples/webpack.config.js
@@ -6,15 +6,15 @@ const findWorkspaceRoot = require('find-yarn-workspace-root');
 // Find the workspace root, this can be replaced with `find-yarn-workspace-root`
 // const workspaceRoot = path.resolve(__dirname, "../../..");
 
-const workspaceRoot = findWorkspaceRoot(__dirname);
+// const workspaceRoot = findWorkspaceRoot(__dirname);
 
 const styledRoot = path.resolve(__dirname, '../../packages/react/src');
 
 const animationPluginRoot = path.resolve(
   __dirname,
   '../../packages/animation-plugin/src'
 );
-const node_modules = path.join(workspaceRoot, 'node_modules');
+const node_modules = path.join(__dirname, '../../node_modules');
 // const designSystem = path.resolve(__dirname, "../../../glustack-design-system");
 module.exports = async function (env, argv) {
   const config = await createExpoWebpackConfigAsync(env, argv);

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": "0.2.19",
+  "version": "0.2.20",
   "keywords": [
     "React Native",
     "Next.js",

diff --git a/packages/react/src/createConfig.ts b/packages/react/src/createConfig.ts
@@ -1,6 +1,6 @@
 import type { GlueStackConfig } from './types';
 import { convertStyledToStyledVerbosed } from './convertSxToSxVerbosed';
-import { resolveStringToken } from './utils';
+// import { resolveStringToken } from './utils';
 
 import { stableHash } from './stableHash';
 import { propertyTokenMap } from './propertyTokenMap';
@@ -22,45 +22,48 @@ export const createConfig = <
         T['globalStyle']
       >
 ): T => {
-  // @ts-ignore
-  if (!config.components && !config.themes) {
+  if (
+    !config.components
+    // @ts-ignore
+    // && !config.themes
+  ) {
     return config as any;
   }
   let newConfig = config;
   if (config.components) {
     newConfig = resolveComponentThemes(config);
   }
   // @ts-ignore
-  if (config.themes) {
-    const newConfigWithThemesResolved = resolveThemes(newConfig);
-    return newConfigWithThemesResolved as any;
-  }
+  // if (config.themes) {
+  //   const newConfigWithThemesResolved = resolveThemes(newConfig);
+  //   return newConfigWithThemesResolved as any;
+  // }
   return newConfig as any;
 };
 
-const resolveThemes = (config: any) => {
-  const newConfig = { ...config };
-  Object.keys(newConfig?.themes ?? {}).forEach((themeName: any) => {
-    let theme = newConfig.themes[themeName];
-    Object.keys(theme).forEach((tokenScale: any) => {
-      const tokenScaleValue = theme[tokenScale];
-      Object.keys(tokenScaleValue).forEach((token: any) => {
-        const tokenValue = resolveStringToken(
-          tokenScaleValue[token],
-          newConfig,
-          tokenScale,
-          ''
-        );
-        tokenScaleValue[token] = tokenValue;
-      });
-    });
-    // const tempCONFIG = JSON.parse(JSON.stringify(newConfig));
-    // delete tempCONFIG.themes;
-    // deepMerge(tempCONFIG, { tokens: { ...theme } });
-    // newConfig.themes[themeName] = tempCONFIG;
-  });
-  return newConfig;
-};
+// const resolveThemes = (config: any) => {
+//   const newConfig = { ...config };
+//   Object.keys(newConfig?.themes ?? {}).forEach((themeName: any) => {
+//     let theme = newConfig.themes[themeName];
+//     Object.keys(theme).forEach((tokenScale: any) => {
+//       const tokenScaleValue = theme[tokenScale];
+//       Object.keys(tokenScaleValue).forEach((token: any) => {
+//         const tokenValue = resolveStringToken(
+//           tokenScaleValue[token],
+//           newConfig,
+//           tokenScale,
+//           ''
+//         );
+//         tokenScaleValue[token] = tokenValue;
+//       });
+//     });
+//     // const tempCONFIG = JSON.parse(JSON.stringify(newConfig));
+//     // delete tempCONFIG.themes;
+//     // deepMerge(tempCONFIG, { tokens: { ...theme } });
+//     // newConfig.themes[themeName] = tempCONFIG;
+//   });
+//   return newConfig;
+// };
 
 const resolveComponentThemes = (config: any) => {
   const newConfig = { ...config };

diff --git a/packages/react/src/generateStylePropsFromCSSIds.ts b/packages/react/src/generateStylePropsFromCSSIds.ts
@@ -130,8 +130,8 @@ function getDataStyle(props: any, styleCSSIdsString: string) {
 export function generateStylePropsFromCSSIds(
   props: any,
   styleCSSIds: any,
-  config: any,
-  activeTheme: any
+  config: any
+  // activeTheme: any
 ) {
   // console.setStartTimeStamp('generateStylePropsFromCSSIds');
   const propsStyles = Array.isArray(props?.style)
@@ -159,11 +159,11 @@ export function generateStylePropsFromCSSIds(
           } else {
             styleObj.push(styleSheet);
           }
-          if (nativeStyle.meta.themeCondition && activeTheme) {
-            styleObj.push({
-              ...nativeStyle.meta.themeCondition[activeTheme],
-            });
-          }
+          // if (nativeStyle.meta.themeCondition && activeTheme) {
+          //   styleObj.push({
+          //     ...nativeStyle.meta.themeCondition[activeTheme],
+          //   });
+          // }
         }
       });
     } else {

diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts
@@ -57,7 +57,7 @@
 
 export { styled, verboseStyled, resolveBuildTimeSx } from './styled';
 export { StyledProvider, useStyled } from './StyledProvider';
-export { Theme, useTheme } from './Theme';
+// export { Theme, useTheme } from './Theme';
 export { styledToStyledResolved } from './resolver/styledResolved';
 export { styledResolvedToOrderedSXResolved } from './resolver/orderedResolved';
 export { flush } from './injectInStyle';

diff --git a/packages/react/src/style-sheet/index.ts b/packages/react/src/style-sheet/index.ts
@@ -4,7 +4,7 @@ import { getCSSIdAndRuleset } from '../updateCSSStyleInOrderedResolved.web';
 import {
   deepMerge,
   resolveTokensFromConfig,
-  addThemeConditionInMeta,
+  // addThemeConditionInMeta,
 } from '../utils';
 import { inject } from '../utils/css-injector';
 export type DeclarationType = 'boot' | 'forwarded';
@@ -130,7 +130,7 @@ export class StyleInjector {
       theme,
       componentExtendedConfig
     );
-    addThemeConditionInMeta(componentTheme, CONFIG);
+    // addThemeConditionInMeta(componentTheme, CONFIG);
 
     // delete componentTheme.meta.cssRuleset;
 

diff --git a/packages/react/src/styled.tsx b/packages/react/src/styled.tsx
@@ -24,7 +24,7 @@ import {
 } from './utils';
 import { convertUtilityPropsToSX } from './core/convert-utility-to-sx';
 import { useStyled } from './StyledProvider';
-import { useTheme } from './Theme';
+// import { useTheme } from './Theme';
 import { propertyTokenMap } from './propertyTokenMap';
 import { Platform, StyleSheet } from 'react-native';
 import { INTERNAL_updateCSSStyleInOrderedResolved } from './updateCSSStyleInOrderedResolved';
@@ -919,34 +919,34 @@ export function verboseStyled<P, Variants, ComCon>(
       componentExtendedConfig
     );
 
-    let componentTheme: any =
-      // @ts-ignore
-      sxStyledResolved.baseStyle.styledValueResolvedWithMeta;
+    // let componentTheme: any =
+    //   // @ts-ignore
+    //   sxStyledResolved.baseStyle.styledValueResolvedWithMeta;
 
     // sxStyledResolved.baseStyle.styledValueResolvedWithMeta =
-    addThemeConditionInMeta(componentTheme, CONFIG);
-
-    const colorModeComponentThemes: any = sxStyledResolved.baseStyle?.colorMode;
-    if (colorModeComponentThemes) {
-      Object.keys(colorModeComponentThemes).forEach(
-        (colorModeComponentTheme: any) => {
-          if (
-            !colorModeComponentThemes[colorModeComponentTheme]
-              .styledValueResolvedWithMeta?.meta.themeCondition
-          ) {
-            colorModeComponentThemes[
-              colorModeComponentTheme
-            ].styledValueResolvedWithMeta.meta.themeCondition = {};
-          }
-
-          let componentTheme: any =
-            colorModeComponentThemes[colorModeComponentTheme]
-              .styledValueResolvedWithMeta;
-
-          addThemeConditionInMeta(componentTheme, CONFIG);
-        }
-      );
-    }
+    // addThemeConditionInMeta(componentTheme, CONFIG);
+
+    // const colorModeComponentThemes: any = sxStyledResolved.baseStyle?.colorMode;
+    // if (colorModeComponentThemes) {
+    //   Object.keys(colorModeComponentThemes).forEach(
+    //     (colorModeComponentTheme: any) => {
+    //       if (
+    //         !colorModeComponentThemes[colorModeComponentTheme]
+    //           .styledValueResolvedWithMeta?.meta.themeCondition
+    //       ) {
+    //         colorModeComponentThemes[
+    //           colorModeComponentTheme
+    //         ].styledValueResolvedWithMeta.meta.themeCondition = {};
+    //       }
+
+    //       let componentTheme: any =
+    //         colorModeComponentThemes[colorModeComponentTheme]
+    //           .styledValueResolvedWithMeta;
+
+    //       addThemeConditionInMeta(componentTheme, CONFIG);
+    //     }
+    //   );
+    // }
 
     const sxHash = stableHash(sx);
 
@@ -1020,7 +1020,7 @@ export function verboseStyled<P, Variants, ComCon>(
     //200ms
     // let time = Date.now();
     const styledContext = useStyled();
-    const { theme: activeTheme } = useTheme();
+    // const { theme: activeTheme } = useTheme();
 
     const ancestorStyleContext = useContext(AncestorStyleContext);
     let incomingComponentProps = {};
@@ -1619,8 +1619,8 @@ export function verboseStyled<P, Variants, ComCon>(
     const resolvedStyleProps = generateStylePropsFromCSSIds(
       resolvedInlineProps,
       styleCSSIds,
-      CONFIG,
-      activeTheme
+      CONFIG
+      // activeTheme
     );
     const AsComp: any = (as as any) || (passingProps.as as any) || undefined;
 

diff --git a/packages/react/src/updateCSSStyleInOrderedResolved.web.ts b/packages/react/src/updateCSSStyleInOrderedResolved.web.ts
@@ -28,12 +28,12 @@ export function getCSSIdAndRuleset(
     toBeInjectedStyle.colorMode = styleValueResolvedWithMeta.meta.colorMode;
   }
   // @ts-ignore
-  if (styleValueResolvedWithMeta.meta.themeCondition) {
-    // @ts-ignore
-    toBeInjectedStyle.themeCondition =
-      // @ts-ignore
-      styleValueResolvedWithMeta.meta.themeCondition;
-  }
+  // if (styleValueResolvedWithMeta.meta.themeCondition) {
+  //   // @ts-ignore
+  //   toBeInjectedStyle.themeCondition =
+  //     // @ts-ignore
+  //     styleValueResolvedWithMeta.meta.themeCondition;
+  // }
 
   //@ts-ignore
   const cssObject = Cssify.create(

diff --git a/packages/react/src/utils/cssify/create-stylesheet/index.ts b/packages/react/src/utils/cssify/create-stylesheet/index.ts
@@ -17,7 +17,12 @@ const createStyleSheet = (
   Object.keys(stylesObject).map((key) => {
     if (!stylesObject?.[key]) return;
 
-    let { condition, colorMode, style, themeCondition } = stylesObject[key];
+    let {
+      condition,
+      colorMode,
+      style,
+      //  themeCondition
+    } = stylesObject[key];
 
     const mediaQuery = createQuery(condition);
 
@@ -27,13 +32,13 @@ const createStyleSheet = (
 
     const css = createDeclarationBlock(style);
 
-    const themeCssObj = {} as any;
-    if (themeCondition) {
-      Object.keys(themeCondition).forEach((themeName) => {
-        const themeConditionValue = themeCondition[themeName];
-        themeCssObj[themeName] = createDeclarationBlock(themeConditionValue);
-      });
-    }
+    // const themeCssObj = {} as any;
+    // if (themeCondition) {
+    //   Object.keys(themeCondition).forEach((themeName) => {
+    //     const themeConditionValue = themeCondition[themeName];
+    //     themeCssObj[themeName] = createDeclarationBlock(themeConditionValue);
+    //   });
+    // }
     // console.log(css, style, 'css', mediaQuery, 'mediaQuery', colorSchemeQuery);
 
     // const stringHash = `cssinjected-${hash(`${key}${css}`)}`;
@@ -47,9 +52,9 @@ const createStyleSheet = (
       'style',
       prefixClassName,
       prefixColorMode,
-      hasState,
-      themeCondition,
-      themeCssObj
+      hasState
+      // themeCondition,
+      // themeCssObj
     );
 
     // console.log('hello css object', colorSchemeQuery, css, rule);