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

…@0.2.1 Release/@gluestack style/[email protected]
gluestack · Aug 17, 2023 · b2aa671 · b2aa671
2 parents b40f642 + 16b8e8a
commit b2aa671
Show file tree

Hide file tree

Showing 395 changed files with 23,368 additions and 5,285 deletions.
diff --git a/example/storybook/.ondevice/storybook.requires.js b/example/storybook/.ondevice/storybook.requires.js
@@ -35,7 +35,7 @@ if (parameters) {
 
 try {
   argsEnhancers.forEach((enhancer) => addArgsEnhancer(enhancer));
-} catch {}
+} catch { }
 
 const getStories = () => {
   return [
@@ -46,9 +46,9 @@ const getStories = () => {
 
     // require('../src/recipes/BaseStyle/BaseStyle.stories.tsx'),
     // require('../src/recipes/BaseStyleSX/BaseStyleSX.stories.tsx'),
-    require('../src/api/ColorModeBasedStyles/ColorMode.stories.tsx'),
-    require('../src/api/Variants/BaseStyleVariantSizes.stories.tsx'),
-    require('../src/api/AsForwarder/AsForwarder.stories.tsx'),
+    // require('../src/api/ColorModeBasedStyles/ColorMode.stories.tsx'),
+    // require('../src/api/Variants/BaseStyleVariantSizes.stories.tsx'),
+    // require('../src/api/AsForwarder/AsForwarder.stories.tsx'),
     // require('../src/recipes/ButtonSizes/ButtonSizes.stories.tsx'),
     // require('../src/recipes/ButtonStateProps/ButtonStateProps.stories.tsx'),
     // require('../src/recipes/ButtonVariant/ButtonVariant.stories.tsx'),

diff --git a/example/storybook/package.json b/example/storybook/package.json
@@ -36,6 +36,7 @@
     "lucide-react-native": "^0.121.0",
     "prism-react-renderer": "^1.3.5",
     "prompts": "^2.4.2",
+    "react-native": "^0.70.3",
     "react-native-safe-area-context": "^4.4.1",
     "react-native-svg": "13.4.0",
     "uuidv4": "^6.2.13"

diff --git a/example/storybook/src/api/DescendantsStyles/ContextBasedStyles.tsx b/example/storybook/src/api/DescendantsStyles/ContextBasedStyles.tsx
@@ -1,88 +1,199 @@
-import React from 'react';
+import React, {
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 
-import { Pressable, Text, TextInput } from 'react-native';
+import {
+  Pressable as RNPressable,
+  Text as RNText,
+  StyleSheet,
+  View,
+} from 'react-native';
 import { AsForwarder, styled } from '@gluestack-style/react';
 import { Wrapper } from '../../components/Wrapper';
 // import { AddIcon } from '@gluestack/design-system';
 import { createIcon } from '@gluestack-ui/icon';
 import { Svg } from 'react-native-svg';
 
-const StyledButton = styled(
-  Pressable,
+// const Box = styled(View, {
+//   bg: '$backgroundDark300',
+//   width: '200px',
+//   height: '100px',
+// });
+
+const Text = styled(
+  RNText,
   {
-    backgroundColor: '$primary500',
-    p: '$2',
-    // _icon: {
-    //   props: {
-    //     color: '$blue500',
+    // bg: '$amber300',
+    // color: '$red500',
+    // props: {
+    //   color: '$pink400',
+    // },
+    // variants: {
+    //   variant: {
+    //     solid: {
+    //       color: '$green500',
+    //     },
     //   },
     // },
   },
   {
-    descendantStyle: ['_icon'],
-  }
-);
-
-const StyledIcon = styled(
-  Text,
-  {
-    color: 'red',
-    props: {
-      placeholderTextColor: 'red',
-    },
-    _dark: {
-      props: {
-        placeholderTextColor: 'red',
-      },
-    },
-  },
-  {
-    // ancestorStyle: ['_icon'],
-    DEBUG: 'STYLED_ICON',
+    componentName: 'TEXT',
   }
 );
-
-const MyText = styled(
-  StyledIcon,
+const MyPressable = styled(
+  RNPressable,
   {
-    color: 'blue',
-    bg: '$amber400',
-    // props: {
-    //   color: '$white',
+    bg: '$red500',
+    // height: 40,
+    // p: 2,
+    // // props: {
+    // //   color: '$purple500',
+    // // },
+    // variants: {
+    //   variant: {
+    //     solid: {
+    //       bg: '$red400',
+    //     },
+    //   },
+    // },
+    // defaultProps: {
+    //   variant: 'solid',
     // },
   },
   {
-    // ancestorStyle: ['_icon'],
-    DEBUG: 'MYTEXT',
+    componentName: 'BOX',
   }
 );
 
-const MyTextForward = styled(
-  AsForwarder,
+const Box = styled(
+  View,
   {
-    color: 'yellow',
-    // props: {
-    //   color: '$white',
+    variants: {
+      variant: {},
+    },
+    // bg: '$red500',
+    // height: 40,
+    // p: 2,
+    // // props: {
+    // //   color: '$purple500',
+    // // },
+    // variants: {
+    //   variant: {
+    //     solid: {
+    //       bg: '$red400',
+    //     },
+    //   },
+    // },
+    // defaultProps: {
+    //   variant: 'solid',
     // },
   },
   {
-    // ancestorStyle: ['_icon'],
-    DEBUG: 'MYTEXT',
+    componentName: 'BOX2',
+    descendantStyle: ['_text'],
   }
 );
 
 export function ContextBasedStyles() {
   return (
     <Wrapper>
-      <StyledButton>
-        <MyText>hello</MyText>
-        {/* <StyledIcon as={MyText}>Text</StyledIcon>
-        <MyText as={StyledIcon}>Text</MyText> */}
-        {/* <MyTextForward as={StyledIcon}>Text</MyTextForward> */}
-        {/* <MyText>Text</MyText> */}
-      </StyledButton>
+      <ContextBasedStylesContent />
     </Wrapper>
   );
 }
 
+const styleshet = StyleSheet.create({
+  style: {
+    backgroundColor: 'blue',
+    padding: 2,
+    height: 40,
+  },
+});
+export function ContextBasedStylesContent() {
+  const timeTaken = useRef(Date.now());
+  // useEffect(() => {
+  //   console.log(Date.now() - timeTaken.current, 'hello');
+  // }, []);
+
+  const [state, setState] = useState(true);
+
+  const handlePress = useCallback(() => {
+    timeTaken.current = Date.now();
+    setState(!state);
+  }, [state]);
+
+  // const layoutChange = () => {};
+
+  // useEffect(() => {
+  //   console.log(Date.now() - timeTaken.current, 'hello');
+  // });
+
+  // useEffect(() => {
+  //   console.log(Date.now() - timeTaken.current, 'hello');
+  // }, [state]);
+
+  return (
+    <>
+      <RNPressable
+        onPress={handlePress}
+        style={{
+          height: 50,
+          width: 200,
+          backgroundColor: 'red',
+          position: 'absolute',
+          top: 0,
+          left: 0,
+        }}
+      >
+        <Text style={{ color: 'black' }}>Mount</Text>
+      </RNPressable>
+      {/* <MyPressable>
+        <RNText>Hello</RNText>
+      </MyPressable> */}
+      {/* {state && <MyList />
+      } */}
+      <Box pointerEvents="none" style={{ display: state ? 'flex' : 'none' }}>
+        <MyList />
+      </Box>
+    </>
+  );
+}
+
+const MyList = React.memo(() => {
+  const time = React.useRef(Date.now());
+  useEffect(() => {
+    console.log(Date.now() - time.current, '>>>');
+  }, []);
+  const data = useMemo(
+    () =>
+      Array(2000)
+        .fill(0)
+        .map((_, index) => `Item ${index}`),
+    []
+  );
+
+  const renderItem = useCallback(
+    (item: any) => (
+      <MyPressable key={item}>
+        <RNText>{item}</RNText>
+      </MyPressable>
+    ),
+    []
+  );
+
+  const renderItem2 = useCallback(
+    (item: any) => (
+      <RNPressable key={item} style={styleshet.style}>
+        <RNText>{item}</RNText>r
+      </RNPressable>
+    ),
+    []
+  );
+  return <>{data.map(renderItem)}</>;
+});
 export default ContextBasedStyles;
diff --git a/example/ui-examples/.gitignore b/example/ui-examples/.gitignore
@@ -0,0 +1,79 @@
+node_modules/
+.expo/
+dist/
+npm-debug.*
+*.jks
+*.p8
+*.p12
+*.key
+*.mobileprovision
+*.orig.*
+web-build/
+ios/
+
+# macOS
+.DS_Store
+
+# Temporary files created by Metro to check the health of the file watcher
+.metro-health-check*
+
+# @generated expo-cli sync-647791c5bd841d5c91864afb91c302553d300921
+# The following patterns were generated by expo-cli
+
+# OSX
+#
+.DS_Store
+
+# Xcode
+#
+build/
+*.pbxuser
+!default.pbxuser
+*.mode1v3
+!default.mode1v3
+*.mode2v3
+!default.mode2v3
+*.perspectivev3
+!default.perspectivev3
+xcuserdata
+*.xccheckout
+*.moved-aside
+DerivedData
+*.hmap
+*.ipa
+*.xcuserstate
+project.xcworkspace
+
+# Android/IntelliJ
+#
+build/
+.idea
+.gradle
+local.properties
+*.iml
+*.hprof
+.cxx/
+*.keystore
+!debug.keystore
+
+# node.js
+#
+node_modules/
+npm-debug.log
+yarn-error.log
+
+# Bundle artifacts
+*.jsbundle
+
+# CocoaPods
+/ios/Pods/
+
+# Temporary files created by Metro to check the health of the file watcher
+.metro-health-check*
+
+# Expo
+.expo/
+web-build/
+dist/
+
+# @end expo-cli