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

…[email protected]

Release/@gluestack style/babel plugin styled [email protected]

.eslintignore

@@ -8,11 +8,15 @@ packages/**/cli.js
 packages/ui/components
 packages/**/example
 
+
 # packages/**/example
 # !.build/test.js
 
 ui/packages/ui/.ondevice
 babel.config.js
 
 example/storybook
-example/expo-app
+example/expo-app
+example/ui-examples
+example/ui-examples-babel
+example/next

example/next/.eslintrc.js

@@ -1,4 +1,3 @@
 module.exports = {
-  extends: 'next',
   root: true,
 };

example/storybook/.storybook/preview.js

@@ -40,13 +40,16 @@ export const parameters = {
           'Utility Functions',
           'AsForwarder',
         ],
+
         'plugins',
         [
           'Intro to Plugins',
           'Fonts Plugin',
           'Animation Plugin',
           'CSS Variables Plugin',
         ],
+        'hooks',
+        ['useBreakPointValue', 'useColorMode', 'useToken'],
         'configuration',
         [
           'Theme Tokens',

example/storybook/src/api/DescendantsStyles/ContextBasedStyles.tsx

@@ -13,7 +13,15 @@ import {
   StyleSheet,
   View,
 } from 'react-native';
-import { AsForwarder, createStyled, styled } from '@gluestack-style/react';
+import {
+  AsForwarder,
+  createStyled,
+  styled1,
+  Theme,
+  useBreakpointValue,
+  useStyled,
+  useToken,
+} from '@gluestack-style/react';
 import { Wrapper } from '../../components/Wrapper';
 import { AddIcon, Box, Icon } from '@gluestack/design-system';
 // import { AddIcon } from '@gluestack/design-system';
@@ -178,24 +186,8 @@ const Text1 = styled(
 export function ContextBasedStyles() {
   return (
     <Wrapper colorMode="dark">
-      <Pressable
-        focusable={true}
-        sx={{
-          _text: {
-            color: '$blue500',
-            // props: {
-            //   variant: 'sm',
-            // },
-            // _dark: {
-            //   color: '$yellow500',
-            // },
-          },
-        }}
-      >
-        <Text1>Hello world</Text1>
-      </Pressable>
-      {/* <MyIcon as={Sun} size></MyIcon> */}
-      {/* <ContextBasedStylesContent></ContextBasedStylesContent> */}
+      <MyIcon as={Sun} size={32}></MyIcon>
+      <ContextBasedStylesContent></ContextBasedStylesContent>
       {/* <Pressable></Pressable> */}
       {/* <Box1
         sx={{
@@ -237,6 +229,10 @@ export function ContextBasedStylesContent() {
     setTabName(tabName);
   };
 
+  const value = useToken('colors', 'red500');
+
+  console.log(value, 'value here');
+
   // const color = tabName ? '$red500' : '$green500';
   // return (
   //   <>

example/storybook/src/hooks/useBreakPointValue/breakPointValue.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import {
+  useMediaQuery,
+  styled,
+  useBreakpointValue,
+} from '@gluestack-style/react';
+import Wrapper from '../../components/Wrapper';
+import { View, Text } from 'react-native';
+
+const StyledBox = styled(View, {
+  w: 100,
+  h: 100,
+  justifyContent: 'center',
+  alignItems: 'center',
+  bg: '$cyan500',
+  rounded: '$md',
+}) as any;
+
+const StyledText = styled(Text, {
+  color: '$white',
+  fontSize: '$md',
+});
+
+export const breakPointValueStory = () => {
+  return (
+    <Wrapper>
+      <BreakPointValue />
+    </Wrapper>
+  );
+};
+
+const BreakPointValue = () => {
+  const flexDir = useBreakpointValue({
+    base: 'column',
+    sm: 'row',
+  });
+
+  return (
+    <View
+      style={{
+        flexDirection: flexDir,
+        gap: 10,
+      }}
+    >
+      <StyledBox>
+        <StyledText>Universal</StyledText>
+      </StyledBox>
+      <StyledBox>
+        <StyledText>Performant</StyledText>
+      </StyledBox>
+      <StyledBox>
+        <StyledText>Accessible</StyledText>
+      </StyledBox>
+    </View>
+  );
+};
+export { useMediaQuery };
+export default breakPointValueStory;

example/storybook/src/hooks/useBreakPointValue/index.stories.mdx

@@ -0,0 +1,49 @@
+---
+title: useTheme | gluestack-style
+description: useTheme
+showHeader: false
+---
+
+import { Canvas, Meta, Story } from '@storybook/addon-docs';
+
+<Meta title="hooks/useBreakpointValue" />
+
+# useBreakpointValue
+
+**useBreakpointValue** is a custom hook to returns the value for the current breakpoint based on the provided responsive values object. It is also responsive to window resizing and returning the appropriate value according to the new window size.
+
+### Import
+
+To use the `useBreakpointValue` in your project, import `useBreakpointValue` from `@gluestack-style/react`. as Demonstrated below.
+
+```jsx
+import { useBreakpointValue } from '@gluestack-style/react';
+```
+
+```jsx
+const BreakPointValue = () => {
+  const flexDir = useBreakpointValue({
+    base: 'column',
+    sm: 'row',
+  });
+
+  return (
+    <View
+      style={{
+        flexDirection: flexDir,
+        gap: 10,
+      }}
+    >
+      <StyledBox>
+        <StyledText>Universal</StyledText>
+      </StyledBox>
+      <StyledBox>
+        <StyledText>Performant</StyledText>
+      </StyledBox>
+      <StyledBox>
+        <StyledText>Accessible</StyledText>
+      </StyledBox>
+    </View>
+  );
+};
+```

example/storybook/src/hooks/useBreakPointValue/useBreakPointValue.stories.tsx

@@ -0,0 +1,11 @@
+import type { ComponentMeta } from '@storybook/react-native';
+import { breakPointValueStory } from './breakPointValue';
+
+const MediaQueryMeta: ComponentMeta<typeof breakPointValueStory> = {
+  title: 'hooks/stories/useMediaQuery',
+  component: breakPointValueStory,
+};
+
+export { breakPointValueStory } from './breakPointValue';
+
+export default MediaQueryMeta;

example/storybook/src/hooks/useColorMode/index.stories.mdx

@@ -0,0 +1,41 @@
+---
+title: useColorMode | gluestack-style
+description: useColorMode
+showHeader: false
+---
+
+import { Canvas, Meta, Story } from '@storybook/addon-docs';
+
+<Meta title="hooks/useColorMode" />
+
+# useColorMode
+
+**useColorMode** is a custom hook which return current color mode.
+
+### Import
+
+To use the useColorMode in your project, import `useColorMode` from `@gluestack-style/react`. as Demonstrated below.
+
+```jsx
+import { useColorMode } from '@gluestack-style/react';
+```
+
+Let's use our `useColorMode` value to give background color to `View` from `react-native`.
+
+```jsx
+import { View } from 'react-native';
+import { useColorMode } from '@gluestack-style/react';
+
+function Example() {
+  const colorMode = useColorMode();
+  return (
+    <View
+      style={{
+        width: 100,
+        height: 100,
+        backgroundColor: colorMode === 'light' ? 'white' : 'black',
+      }}
+    />
+  );
+}
+```

example/storybook/src/hooks/useMediaQuery/index.stories.mdx

@@ -0,0 +1,76 @@
+---
+title: useMediaQuery | gluestack-style
+description: Learn to use the useMediaQuery hook in React Native for detecting media query matches and creating responsive UI elements, despite limitations like performance impacts and lack of typings.
+canonical: https://style.gluestack.io/
+---
+
+import { Canvas, Meta, Story } from '@storybook/addon-docs';
+import { Text, View } from 'react-native';
+import { Button, AppProvider, CodePreview } from '@gluestack/design-system';
+import { config } from '../../components/nb.config';
+import { StyledProvider, styled } from '@gluestack-style/react';
+import { useMediaQuery } from './maxWidth';
+
+<Meta title="hooks/useMediaQuery" />
+
+# useMediaQuery
+
+The useMediaQuery custom hook is designed to assist in detecting matches between one or more media queries. However, due to the lack of native support for media queries in React Native, the capabilities of useMediaQuery are somewhat constrained.
+
+## Import:
+
+```bash
+import { useMediaQuery } from '@gluestack-style/react';
+```
+
+### Example:
+
+<AppProvider>
+  <CodePreview
+    mb="$6"
+    showArgsController={false}
+    metaData={{
+      scope: {
+        styled,
+        Provider: StyledProvider,
+        config,
+        Text,
+        View,
+        useMediaQuery,
+      },
+      code: `
+        function MediaQuery() {
+          const StyledBox = styled(View, {
+            w: 300,
+            h: 300,
+            bg: '$green500',
+            justifyContent: 'center',
+            alignItems: 'center',
+            variants: {
+              size: {
+                lg: {
+                  bg: '$blue500',
+                },
+              },
+            },
+          });
+          const StyledText = styled(Text, {
+            color: '$white',
+            fontSize: '$xl',
+          });
+          const [isSmallScreen] = useMediaQuery({
+              maxWidth: 700,
+          });
+          return (
+              <Provider config={config}>
+                <StyledBox size={isSmallScreen ? 'sm' : 'lg'}>
+                  <StyledText>{isSmallScreen ? 'Mobile' : 'Desktop'}</StyledText>
+                </StyledBox>
+              </Provider>
+          );
+        }
+      `,
+    }}
+/>
+
+</AppProvider>

example/storybook/src/hooks/useMediaQuery/maxWidth.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { useMediaQuery, styled } from '@gluestack-style/react';
+import Wrapper from '../../components/Wrapper';
+import { View, Text } from 'react-native';
+
+const StyledBox = styled(View, {
+  w: 300,
+  h: 300,
+  justifyContent: 'center',
+  alignItems: 'center',
+  variants: {
+    size: {
+      sm: {
+        bg: '$green500',
+      },
+      lg: {
+        bg: '$blue500',
+      },
+    },
+  },
+}) as any;
+
+const StyledText = styled(Text, {
+  color: '$white',
+  fontSize: '$xl',
+});
+
+export const maxWidth = () => {
+  const [isSmallScreen] = useMediaQuery({
+    maxWidth: 700,
+  });
+
+  return (
+    <Wrapper>
+      <StyledBox size={isSmallScreen ? 'sm' : 'lg'}>
+        <StyledText>{isSmallScreen ? 'Mobile' : 'Desktop'}</StyledText>
+      </StyledBox>
+    </Wrapper>
+  );
+};
+export { useMediaQuery };
+export default maxWidth;

example/storybook/src/hooks/useMediaQuery/useMediaQuery.stories.tsx

@@ -0,0 +1,11 @@
+import type { ComponentMeta } from '@storybook/react-native';
+import maxWidth from './maxWidth';
+
+const MediaQueryMeta: ComponentMeta<typeof maxWidth> = {
+  title: 'hooks/stories/useMediaQuery',
+  component: maxWidth,
+};
+
+export { maxWidth } from './maxWidth';
+
+export default MediaQueryMeta;