Merge pull request #379 from gluestack/release/@gluestack-style/babel…

…[email protected] Release/@gluestack style/babel plugin styled [email protected]
gluestack · Sep 1, 2023 · eb17e9a · eb17e9a
2 parents e3ce6b9 + c3aaa1e
commit eb17e9a
Show file tree

Hide file tree

Showing 8 changed files with 196 additions and 250 deletions.
diff --git a/example/ui-examples-babel/App.tsx b/example/ui-examples-babel/App.tsx
@@ -1,53 +1,22 @@
-/* eslint-disable react-native/no-inline-styles */
 import React from 'react';
-import { SafeAreaView, StyleSheet } from 'react-native';
+import { View } from 'react-native';
 import { config } from './gluestack-ui.config';
-import './styles';
-import { StyledProvider } from '../../packages/react';
-import { Box, Heading } from './src/core';
+import { styled, StyledProvider } from '../../packages/react';
+// import { Box, Heading } from './src/core';
 
-const bg = '$40';
-const abc = '$pink500';
-export default function App() {
-  const [hover, setHover] = React.useState(false);
-  const [active, setActive] = React.useState(false);
+const Box = styled(View, {
+  bg: '$primary100',
+  h: '$10',
+  w: '$10',
+});
 
-  console.log(hover, active, '+++');
+export default function App() {
   return (
     <>
-      {/* top SafeAreaView */}
-      <SafeAreaView />
-      {/* bottom SafeAreaView */}
-      <SafeAreaView
-        style={{
-          ...styles.container,
-        }}
-      >
-        {/* gluestack-ui provider */}
-        <StyledProvider config={config.theme}>
-          <Box
-            onHoverIn={() => setHover(true)}
-            onHoverOut={() => setHover(false)}
-            onPressIn={() => setActive(true)}
-            onPressOut={() => setActive(false)}
-            states={{
-              hover,
-              active,
-            }}
-            bg={{}}
-            sx={{
-              bg: '$red500',
-            }}
-          />
-        </StyledProvider>
-      </SafeAreaView>
+      {/* gluestack-ui provider */}
+      <StyledProvider config={config.theme}>
+        <Box bg="$red500" />
+      </StyledProvider>
     </>
   );
 }
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    overflow: 'hidden',
-  },
-});
diff --git a/example/ui-examples-babel/babel.config.js b/example/ui-examples-babel/babel.config.js
@@ -11,8 +11,10 @@ module.exports = function (api) {
         {
           configPath: path.join(__dirname, './gluestack-ui.config.ts'),
           configThemePath: ['theme'],
-          filename: path.resolve(__dirname, './src/core/styled'),
-          uiLibraryPath: path.resolve(__dirname, './src/core'),
+          styled: ['@gluestack-style/react', '../../packages/react'],
+          components: ['@gluesatck-ui/themed'],
+          // filename: path.resolve(__dirname, './src/core/styled'),
+          // uiLibraryPath: path.resolve(__dirname, './src/core'),
         },
       ],
       [

diff --git a/example/ui-examples-babel/webpack.config.js b/example/ui-examples-babel/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/example/ui-examples/App.tsx b/example/ui-examples/App.tsx
@@ -3,6 +3,7 @@ import React from 'react';
 import {
   SafeAreaView,
   StyleSheet,
+  View,
   //  View
 } from 'react-native';
 import { GluestackUIProvider } from './gluestack-ui-components';
@@ -17,62 +18,14 @@ import {
   Inter_900Black,
 } from '@expo-google-fonts/inter';
 import './styles';
+import { styled } from '@gluestack-style/react';
 import HomestayPage from './kitchensink-components/HomestayPage';
-// import { styled } from '@gluestack-style/react';
 
-// const orderedSXResolved = [
-//   {
-//     meta: {
-//       path: ['baseStyle'],
-//       weight: 101,
-//       cssId: '14kw9po-go7kdf',
-//       cssRuleset:
-//         '.gs [data-style~="14kw9po-go7kdf"] {background-color:rgba(239,68,68,1.00);height:80px;width:80px;}',
-//     },
-//     original: {
-//       bg: '$red500',
-//       h: '$10',
-//       w: '$10',
-//     },
-//     resolved: {
-//       backgroundColor: '#ef4444',
-//       height: '40px',
-//       width: '40px',
-//     },
-//   },
-// ];
-
-// const sxHash = '14kw9po';
-
-// function injectBuildTimeSx() {
-//   injectComponentAndDescendantStyles(orderedSXResolved, sxHash, 'inline');
-// }
-
-// const styledIds = {
-//   component: {
-//     baseStyle: {
-//       ids: ['14kw9po-go7kdf'],
-//       props: {},
-//     },
-//     compoundVariants: [],
-//     variants: [],
-//   },
-//   decendant: {},
-// };
-
-// injectBuildTimeSx();
-
-// const Box = styled(View, {});
-
-// const Box = styled(View, {
-//   bg: '$primary100',
-//   h: '$10',
-//   w: '$10',
-// });
-
-// const ComposedButton = styled(BaseButton, {
-//   bg: '$red500',
-// });
+const Box = styled(View, {
+  bg: '$primary100',
+  h: '$10',
+  w: '$10',
+});
 
 type ThemeContextType = {
   colorMode?: 'dark' | 'light';
@@ -122,11 +75,15 @@ export default function App() {
         {/* gluestack-ui provider */}
         <SSRProvider>
           <GluestackUIProvider config={config.theme} colorMode={colorMode}>
-            {/* <Theme name="x">
-              <Box bg="$primary100"></Box>
-              <Box bg="$red500"></Box>
-            </Theme> */}
             <ThemeContext.Provider value={{ colorMode, toggleColorMode }}>
+              {/* <Theme name="x">
+              <Box bg="$amber800"></Box>
+            </Theme> */}
+              {/* <Box bg="$red500"></Box> */}
+              {/* <Box bg="$amber50"></Box>
+            <Box></Box> */}
+              {/* <BaseButton>Hello Worlddddd</BaseButton>
+              <ComposedButton>Hello</ComposedButton> */}
               <HomestayPage />
             </ThemeContext.Provider>
           </GluestackUIProvider>

diff --git a/example/ui-examples/babel.config.js b/example/ui-examples/babel.config.js
@@ -6,32 +6,31 @@ module.exports = function (api) {
   return {
     presets: ['babel-preset-expo'],
     plugins: [
-      // [
-      //   myBabel,
-      //   {
-      //     configPath: path.join(__dirname, './gluestack-ui.config.ts'),
-      //     configThemePath: ['theme'],
-      //     // libraryName: '@gluestack-style/react',
-      //     filename: path.join(
-      //       __dirname,
-      //       './gluestack-ui-components/core/styled'
-      //     ),
-      //     uiLibraryPath: path.join(__dirname, './gluestack-ui-components'),
-      //   },
-      // ],
+      [
+        myBabel,
+        {
+          configPath: path.join(__dirname, './gluestack-ui.config.ts'),
+          configThemePath: ['theme'],
+          styled: [
+            '@gluestack-style/react',
+            path.resolve(__dirname, './gluestack-ui-components/core/styled'),
+          ],
+          components: ['@gluesatck-ui/themed'],
+        },
+      ],
       [
         'module-resolver',
         {
           alias: {
             // For development, we want to alias the library to the source
-            ['@gluestack-style/react']: path.join(
-              __dirname,
-              '../../packages/react/src'
-            ),
-            ['@gluestack-style/animation-plugin']: path.join(
-              __dirname,
-              '../../packages/animation-plugin/src'
-            ),
+            // ['@gluestack-style/react']: path.join(
+            //   __dirname,
+            //   '../../packages/react/lib/commonjs'
+            // ),
+            // ['@gluestack-style/animation-plugin']: path.join(
+            //   __dirname,
+            //   '../../packages/animation-plugin/src'
+            // ),
             // ['@dank-style/react']: path.join(
             //   __dirname,
             //   '../../packages/react/src'

diff --git a/example/ui-examples/gluestack-ui-components/core/Heading/styled-components/Root.tsx b/example/ui-examples/gluestack-ui-components/core/Heading/styled-components/Root.tsx
@@ -17,62 +17,53 @@ export default styled(H1, {
     size: {
       '5xl': {
         //@ts-ignore
-        props: { as: H1 },
         fontSize: '$6xl',
         lineHeight: '$7xl',
       },
       '4xl': {
         //@ts-ignore
-        props: { as: H1 },
         fontSize: '$5xl',
         lineHeight: '$6xl',
       },
 
       '3xl': {
         //@ts-ignore
-        props: { as: H1 },
         fontSize: '$4xl',
         lineHeight: '$5xl',
       },
 
       '2xl': {
         //@ts-ignore
-        props: { as: H2 },
         fontSize: '$3xl',
         lineHeight: '$3xl',
       },
 
       'xl': {
         //@ts-ignore
-        props: { as: H3 },
         fontSize: '$2xl',
         lineHeight: '$3xl',
       },
 
       'lg': {
         //@ts-ignore
-        props: { as: H4 },
         fontSize: '$xl',
         lineHeight: '$2xl',
       },
 
       'md': {
         //@ts-ignore
-        props: { as: H5 },
         fontSize: '$lg',
         lineHeight: '$lg',
       },
 
       'sm': {
         //@ts-ignore
-        props: { as: H6 },
         fontSize: '$md',
         lineHeight: '$lg',
       },
 
       'xs': {
         //@ts-ignore
-        props: { as: H6 },
         fontSize: '$sm',
         lineHeight: '$xs',
       },

diff --git 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": "0.2.0",
+  "version": "0.2.1",
   "description": "A gluestack-style babel plugin that transpiles your styled function calls and resolves the component styling in build time.",
   "keywords": [
     "css-in-js",