Merge pull request #2183 from gluestack/release/@gluestack-ui/nativew…

…[email protected] Release/@gluestack UI/nativewind [email protected]
gluestack · May 23, 2024 · f7823a8 · f7823a8
2 parents aeb4830 + 32d316b
commit f7823a8
Show file tree

Hide file tree

Showing 63 changed files with 10,337 additions and 7,689 deletions.
diff --git a/example/storybook-nativewind/babel.config.js b/example/storybook-nativewind/babel.config.js
@@ -95,6 +95,10 @@ module.exports = function (api) {
               __dirname,
               '../../packages/nativewind/utils/tva'
             ),
+            '@gluestack-ui/nativewind-utils/useMediaQuery': path.resolve(
+              __dirname,
+              '../../packages/nativewind/utils/useMediaQuery'
+            ),
             '@gluestack-ui/nativewind-utils': path.resolve(
               __dirname,
               '../../packages/nativewind/utils/'

diff --git a/example/storybook-nativewind/package.json b/example/storybook-nativewind/package.json
@@ -17,7 +17,8 @@
     "storybook:nativewind": "NODE_OPTIONS=--openssl-legacy-provider STYLE_ENGINE=nativewind start-storybook -p 6007",
     "storybook:gluestack": "NODE_OPTIONS=--openssl-legacy-provider STYLE_ENGINE=gluestack start-storybook -p 6007",
     "dev": "yarn storybook",
-    "build-storybook": "build-storybook",
+    "build-storybook:nativewind": "STYLE_ENGINE=nativewind build-storybook",
+    "build-storybook:gluestack": "STYLE_ENGINE=gluestack build-storybook",
     "build": "bob build",
     "release": "release-it",
     "test": "jest",
@@ -52,7 +53,7 @@
     "expo-linear-gradient": "^12.3.0",
     "expo-status-bar": "~1.4.2",
     "fs": "^0.0.1-security",
-    "lucide-react-native": "^0.378.0",
+    "lucide-react-native": "^0.236.0",
     "nativewind": "^4.0.36",
     "next": "^13.5.3",
     "prism-react-renderer": "^1.3.5",

diff --git a/example/storybook-nativewind/src/apps/dashboard-app/index.stories.mdx b/example/storybook-nativewind/src/apps/dashboard-app/index.stories.mdx
@@ -12,8 +12,8 @@ import Responsiveness from '../../extra-components/nativewind/Responsive';
 
 # Dashboard App
 
-This [Dashboard App](https://ui-example-nativewind.vercel.app/) is built using `@gluestack-ui` components styled with `NativeWind`.
+This [Dashboard App](https://ui-example-nativewind.vercel.app/) is built using `gluestack-ui` components styled with `NativeWind`.
 
 <Responsiveness />
 
-GitHub link for this [Dashboard App](https://github.com/gluestack/ui-example-nativewind)
+GitHub link for this [Dashboard App](https://github.com/gluestack/ui-example-nativewind).
diff --git a/example/storybook-nativewind/src/apps/starter-kit/index.stories.mdx b/example/storybook-nativewind/src/apps/starter-kit/index.stories.mdx
@@ -12,8 +12,8 @@ import Responsiveness from '../../extra-components/nativewind/Responsive';
 
 # Dashboard App
 
-This [Dashboard App](https://ui-example-nativewind.vercel.app/) is built using `@gluestack-ui` components styled with `NativeWind`.
+This [Dashboard App](https://ui-example-nativewind.vercel.app/) is built using `gluestack-ui` components styled with `NativeWind`.
 
 <Responsiveness />
 
-GitHub link for this [Dashboard App](https://github.com/gluestack/ui-example-nativewind)
+GitHub link for this [Dashboard App](https://github.com/gluestack/ui-example-nativewind).
diff --git a/example/storybook-nativewind/src/components/Actionsheet/ActionsheetAvoidKeyboard.tsx b/example/storybook-nativewind/src/components/Actionsheet/ActionsheetAvoidKeyboard.tsx
@@ -1,27 +1,25 @@
 import React, { useEffect } from 'react';
-
 import {
   Actionsheet,
   ActionsheetBackdrop,
   ActionsheetContent,
   ActionsheetDragIndicator,
   ActionsheetDragIndicatorWrapper,
-  Button,
-  ButtonText,
-  VStack,
-  Input,
-  InputIcon,
-  InputSlot,
-  InputField,
+} from '@/components/ui/actionsheet';
+import { VStack } from '@/components/ui/vstack';
+import { Input, InputIcon, InputSlot, InputField } from '@/components/ui/input';
+import {
   FormControl,
   FormControlLabel,
   FormControlLabelText,
-  HStack,
-  Image,
-  Text,
-  Box,
-  Icon,
-} from '@/components/ui';
+} from '@/components/ui/form-control';
+import { HStack } from '@/components/ui/hstack';
+import { Image } from '@/components/ui/image';
+import { Text } from '@/components/ui/text';
+import { Box } from '@/components/ui/box';
+import { Icon } from '@/components/ui/icon';
+import { Button, ButtonText } from '@/components/ui/button';
+
 import { KeyboardAvoidingView, Platform } from 'react-native';
 
 const ActionsheetWithKeyboardAvoidingView = ({
@@ -53,41 +51,34 @@ const ActionsheetWithKeyboardAvoidingView = ({
           <ActionsheetDragIndicatorWrapper>
             <ActionsheetDragIndicator />
           </ActionsheetDragIndicatorWrapper>
-          <VStack w="$full" p={20}>
-            <HStack justifyContent="center" alignItems="center" space="md">
-              <Box
-                w={50}
-                h="$full"
-                px="$2"
-                borderWidth={1}
-                borderStyle="solid"
-                borderColor="$borderLight300"
-                rounded="$sm"
-              >
+          <VStack className="w-full p-5">
+            <HStack space="md" className="justify-center items-center">
+              <Box className="w-[50px] h-full px-2 border border-solid border-outline-300 rounded">
                 <Image
                   source={{ uri: 'https://i.imgur.com/UwTLr26.png' }}
-                  flex={1}
+                  alt="image"
                   resizeMode="contain"
+                  className="flex-1"
                 />
               </Box>
-              <VStack flex={1}>
-                <Text fontWeight="$bold">Mastercard</Text>
+              <VStack className="flex-1">
+                <Text className="font-bold">Mastercard</Text>
                 <Text>Card ending in 2345</Text>
               </VStack>
             </HStack>
-            <FormControl mt={36}>
+            <FormControl className="mt-9">
               <FormControlLabel>
                 <FormControlLabelText>
                   Confirm security code
                 </FormControlLabelText>
               </FormControlLabel>
               <Input isFullWidth={true} {...props}>
-                <InputSlot>
-                  <InputIcon ml="$3" />
-                </InputSlot>
+                {/* <InputSlot>
+                  <InputIcon className="ml-3" />
+                </InputSlot> */}
                 <InputField placeholder="CVC/CVV" />
               </Input>
-              <Button onPress={handleClose} mt={20}>
+              <Button onPress={handleClose} className="mt-5">
                 <ButtonText>Pay $1000</ButtonText>
               </Button>
             </FormControl>

diff --git a/...torybook-nativewind/src/components/Actionsheet/ActionsheetAvoidKeyboardWithSnapPoints.tsx b/...torybook-nativewind/src/components/Actionsheet/ActionsheetAvoidKeyboardWithSnapPoints.tsx
@@ -1,27 +1,24 @@
 import React, { useEffect } from 'react';
-
 import {
   Actionsheet,
   ActionsheetBackdrop,
   ActionsheetContent,
   ActionsheetDragIndicator,
   ActionsheetDragIndicatorWrapper,
-  Button,
-  ButtonText,
-  VStack,
-  Input,
-  InputIcon,
-  InputSlot,
-  InputField,
+} from '@/components/ui/actionsheet';
+import { VStack } from '@/components/ui/vstack';
+import { Input, InputIcon, InputSlot, InputField } from '@/components/ui/input';
+import {
   FormControl,
   FormControlLabel,
   FormControlLabelText,
-  HStack,
-  Image,
-  Text,
-  Box,
-  Icon,
-} from '@/components/ui';
+} from '@/components/ui/form-control';
+import { HStack } from '@/components/ui/hstack';
+import { Image } from '@/components/ui/image';
+import { Text } from '@/components/ui/text';
+import { Box } from '@/components/ui/box';
+import { Icon } from '@/components/ui/icon';
+import { Button, ButtonText } from '@/components/ui/button';
 import { KeyboardAvoidingView } from 'react-native';
 
 const ActionsheetWithKeyboardAvoidingViewWithSnapPoints = ({
@@ -59,26 +56,19 @@ const ActionsheetWithKeyboardAvoidingViewWithSnapPoints = ({
           <ActionsheetDragIndicatorWrapper>
             <ActionsheetDragIndicator />
           </ActionsheetDragIndicatorWrapper>
-          <VStack w="$full" p={20}>
-            <HStack justifyContent="center" alignItems="center" space="md">
-              <Box
-                w={50}
-                h="$full"
-                px="$2"
-                borderWidth={1}
-                borderStyle="solid"
-                borderColor="$borderLight300"
-                rounded="$sm"
-              >
+          <VStack className="w-full p-5">
+            <HStack space="md" className="justify-center items-center">
+              <Box className="w-[50px] h-full px-2 border border-solid border-outline-300 rounded">
                 <Image
                   source={{ uri: 'https://i.imgur.com/UwTLr26.png' }}
-                  flex={1}
+                  alt="image"
                   resizeMode="contain"
+                  className="flex-1"
                 />
               </Box>
-              <VStack flex={1}>
+              <VStack className="flex-1">
                 <Text
-                  fontWeight="$bold"
+                  className="font-bold"
                   // @ts-ignore
                 >
                   Mastercard
@@ -90,7 +80,7 @@ const ActionsheetWithKeyboardAvoidingViewWithSnapPoints = ({
                 </Text>
               </VStack>
             </HStack>
-            <FormControl mt={36}>
+            <FormControl className="mt-9">
               <FormControlLabel>
                 <FormControlLabelText
                 // @ts-ignore
@@ -99,12 +89,12 @@ const ActionsheetWithKeyboardAvoidingViewWithSnapPoints = ({
                 </FormControlLabelText>
               </FormControlLabel>
               <Input isFullWidth={true} {...props}>
-                <InputSlot>
-                  <InputIcon ml="$3" />
-                </InputSlot>
+                {/* <InputSlot>
+                  <InputIcon className="ml-3" />
+                </InputSlot> */}
                 <InputField placeholder="CVC/CVV" />
               </Input>
-              <Button onPress={handleClose} mt={20}>
+              <Button onPress={handleClose} className="mt-5">
                 <ButtonText
                 // @ts-ignore
                 >

diff --git a/example/storybook-nativewind/src/components/Actionsheet/index.stories.mdx b/example/storybook-nativewind/src/components/Actionsheet/index.stories.mdx
@@ -128,7 +128,7 @@ function App(){
       },
     }}
   />
-</>
+</Wrapper>
 
 <br />
 

diff --git a/example/storybook-nativewind/src/components/Alert/Variants.tsx b/example/storybook-nativewind/src/components/Alert/Variants.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
-import { BellIcon, Center } from '@gluestack-ui/themed';
-
-import { Alert, AlertIcon, AlertText, InfoIcon } from '@gluestack-ui/themed';
+import { Center } from '@/components/ui/center';
+import { BellIcon, InfoIcon } from '@/components/ui/icon';
+import { Alert, AlertIcon, AlertText } from '@/components/ui/alert';
 import {
   AlertCircleIcon,
   CheckCircle2Icon,
@@ -10,37 +10,37 @@ import {
 
 const AlertVariants = ({ variant }: any) => {
   return (
-    <Center>
-      <Alert action="info" variant={variant} mb={4} gap="$3">
+    <Center className="gap-4">
+      <Alert action="info" variant={variant} className="gap-3">
         <AlertIcon as={InfoIcon} />
         <AlertText>
           Unlock the power of knowledge with the following information.
         </AlertText>
       </Alert>
-      <Alert action="success" variant={variant} mb={4} gap="$3">
+      <Alert action="success" variant={variant} className="gap-3">
         <AlertIcon as={CheckCircle2Icon} />
         <AlertText>
           Boom! You did it! Please take a moment to pat yourself on the back.
           You've earned it! Boom! You did it! Please take a moment to pat
           yourself on the back. You've earned it!
         </AlertText>
       </Alert>
-      <Alert action="error" variant={variant} mb={4} gap="$3">
+      <Alert action="error" variant={variant} className="gap-3">
         <AlertIcon as={XCircle} />
         <AlertText>
           Uh-oh! It looks like the matrix has glitched. Our team of tech ninjas
           are already on the case. Please hold tight while we fix the issue
         </AlertText>
       </Alert>
-      <Alert action="warning" variant={variant} mb={4} gap="$3">
+      <Alert action="warning" variant={variant} className="gap-3">
         <AlertIcon as={AlertCircleIcon} />
 
         <AlertText>
           Warning: Reading the following content may cause spontaneous outbursts
           of 'aha!' moments
         </AlertText>
       </Alert>
-      <Alert action="muted" variant={variant} gap="$3">
+      <Alert action="muted" variant={variant} className="gap-3">
         <AlertIcon as={BellIcon} />
         <AlertText>
           Need a helping hand? Your help alert has just been activated, and

diff --git a/example/storybook-nativewind/src/components/AlertDialog/AlertDialog.tsx b/example/storybook-nativewind/src/components/AlertDialog/AlertDialog.tsx
@@ -2,6 +2,7 @@ import React, { useState } from 'react';
 import { Button, ButtonText } from '@/components/ui/button';
 import { Text } from '@/components/ui/text';
 import { Heading } from '@/components/ui/heading';
+import { Icon } from '@/components/ui/icon';
 import { X } from 'lucide-react-native';
 
 import {
@@ -28,10 +29,7 @@ const AlertDialogBasic = ({ ...props }) => {
           <AlertDialogHeader>
             <Heading>Return Policy</Heading>
             <AlertDialogCloseButton>
-              <X
-                size={20}
-                className="stroke-background-400 group-[:hover]/alert-dialog-close-button:stroke-background-700 group-[:active]/alert-dialog-close-button:stroke-background-900 group-[:focus-visible]/alert-dialog-close-button:stroke-background-900"
-              />
+              <Icon as={X} size="lg" />
             </AlertDialogCloseButton>
           </AlertDialogHeader>
           <AlertDialogBody>

diff --git a/example/storybook-nativewind/src/components/Box/Box.stories.tsx b/example/storybook-nativewind/src/components/Box/Box.stories.tsx
@@ -1,6 +1,6 @@
 import type { ComponentMeta } from '@storybook/react-native';
 import Box from './Box';
-import BoxWithRef from './BoxWithRef';
+// import BoxWithRef from './BoxWithRef';
 
 const BoxMeta: ComponentMeta<typeof Box> = {
   title: 'stories/Box',
@@ -14,4 +14,5 @@ const BoxMeta: ComponentMeta<typeof Box> = {
 
 export default BoxMeta;
 
-export { Box, BoxWithRef };
+// export { Box, BoxWithRef };
+export { Box };
diff --git a/example/storybook-nativewind/src/components/Box/Box.tsx b/example/storybook-nativewind/src/components/Box/Box.tsx
@@ -2,26 +2,12 @@ import { Text } from '@/components/ui/text';
 import { Box } from '@/components/ui/box';
 import React from 'react';
 
-const BoxBasic: any = ({
-  bg = 'blue500',
-  w = '100',
-  h = '100',
-  className = '',
-  ...props
-}: any) => {
+const BoxBasic: any = ({ ...props }: any) => {
   return (
     <Box
-      {...props}
-      bg={`$${bg}`}
-      h={h}
-      w={w}
-      justifyContent="center"
-      alignItems="center"
-      className={className}
+      className={`justify-center items-center bg-blue-500 w-[${props.w}px] h-[${props.h}px]`}
     >
-      <Text color="white" fontWeight="$bold">
-        BOX
-      </Text>
+      <Text className="font-bold text-typography-0">BOX</Text>
     </Box>
   );
 };
-Original file line number
+Diff line change
@@ Expand Up / @@ -128,7 +128,7 @@ function App(){ @@
           },
         }}
       />
-    </>
+    </Wrapper>
     <br />
@@ Expand Down @@