@admin-layout/gluestack-ui-mobile 11.0.1-alpha.0 → 11.0.3-alpha.0

package/src/components/Layout/components/BottomTabBar.tsx

@@ -1,11 +1,11 @@
 import React from 'react';
-import {Box,Pressable,Center,Text, SafeAreaView} from '@gluestack-ui/themed';
+import { Box, Pressable, Center, Text, StyledSafeAreaView, HStack } from '../../ui';
 import { useSelector } from 'react-redux';
 import { useRoute } from '@react-navigation/native';
 import { navigationRef } from '@common-stack/client-react';
 
-export const BottomTabBar = ({ state, descriptors, navigation,...props }: any) => {
-    const tabBarProps = props?.customTabBarProps??{};
+export const BottomTabBar = ({ state, descriptors, navigation, ...props }: any) => {
+    const tabBarProps = props?.customTabBarProps ?? {};
     const settings = useSelector<any>((state) => state.settings) as any;
     //const currentRoute: any = useRoute();
     const currentRoute: any = navigationRef.isReady() ? navigationRef?.getCurrentRoute() : null;
@@ -23,118 +23,109 @@ export const BottomTabBar = ({ state, descriptors, navigation,...props }: any) =
                 (b.options.priority ? b.options.priority : b.options.title),
         );
 
-        const onPress = React.useCallback((route, navigation, isFocused) => {
-            if (route?.route) {
-                const event = navigation.emit({
-                    type: 'tabPress',
-                    target: route.route.key,
-                    canPreventDefault: true,
-                });
-
-                if (!isFocused && !event.defaultPrevented) {
-                    // The `merge: true` option makes sure that the params inside the tab screen are preserved
-                    navigation.navigate({
-                        name: route.route.name,
-                        merge: true,
-                        orgName: currentRoute?.params?.orgName || platformState?.orgName,
-                    });
-                }
-            }
-        }, []);
+    const onPress = React.useCallback((route, navigation, isFocused) => {
+        if (route?.route) {
+            const event = navigation.emit({
+                type: 'tabPress',
+                target: route.route.key,
+                canPreventDefault: true,
+            });
 
-        const onLongPress = React.useCallback((route, navigation, isFocused) => {
-            if (route?.route) {
-                navigation.emit({
-                    type: 'tabLongPress',
-                    target: route.route.key,
+            if (!isFocused && !event.defaultPrevented) {
+                // The `merge: true` option makes sure that the params inside the tab screen are preserved
+                navigation.navigate({
+                    name: route.route.name,
+                    merge: true,
+                    orgName: currentRoute?.params?.orgName || platformState?.orgName,
                 });
             }
-        }, []);
+        }
+    }, []);
 
+    const onLongPress = React.useCallback((route, navigation, isFocused) => {
+        if (route?.route) {
+            navigation.emit({
+                type: 'tabLongPress',
+                target: route.route.key,
+            });
+        }
+    }, []);
 
     return (
-        <SafeAreaView>
-        <Box
-            flexDirection="row"
-            width="100%"
-            alignSelf="center"
-            bg={'$white'}
-            borderTopWidth={"$1"}
-            borderTopColor={'#d3d3d3'}
-            py={"$4"}
-            {...tabBarProps}
-        >
-            {appRoutes.map((route: any, index: any) => {
-                const options = route.options;
-                const label =
-                    options.tabBarLabel !== undefined
-                        ? options.tabBarLabel
-                        : options.title !== undefined
+        <StyledSafeAreaView>
+            <HStack className="bg-white border-t w-full py-4 border-t-[#d3d3d3]" {...tabBarProps}>
+                {appRoutes.map((route: any, index: any) => {
+                    const options = route.options;
+                    const label =
+                        options.tabBarLabel !== undefined
+                            ? options.tabBarLabel
+                            : options.title !== undefined
                             ? options.title
                             : route.route.name;
 
-                const isFocused = state.index === route.index;
+                    const isFocused = state.index === route.index;
 
-                // const onPress = () => {
-                //     const event = navigation.emit({
-                //         type: 'tabPress',
-                //         target: route.route.key,
-                //         canPreventDefault: true,
-                //     });
+                    // const onPress = () => {
+                    //     const event = navigation.emit({
+                    //         type: 'tabPress',
+                    //         target: route.route.key,
+                    //         canPreventDefault: true,
+                    //     });
 
-                //     if (!isFocused && !event.defaultPrevented) {
-                //         // The `merge: true` option makes sure that the params inside the tab screen are preserved
-                //         navigation.navigate({
-                //             name: route.route.name,
-                //             merge: true,
-                //             orgName: currentRoute?.params?.orgName || platformState?.orgName,
-                //         });
-                //     }
-                // };
+                    //     if (!isFocused && !event.defaultPrevented) {
+                    //         // The `merge: true` option makes sure that the params inside the tab screen are preserved
+                    //         navigation.navigate({
+                    //             name: route.route.name,
+                    //             merge: true,
+                    //             orgName: currentRoute?.params?.orgName || platformState?.orgName,
+                    //         });
+                    //     }
+                    // };
 
-                // const onLongPress = () => {
-                //     navigation.emit({
-                //         type: 'tabLongPress',
-                //         target: route.route.key,
-                //     });
-                // };
+                    // const onLongPress = () => {
+                    //     navigation.emit({
+                    //         type: 'tabLongPress',
+                    //         target: route.route.key,
+                    //     });
+                    // };
 
-                return (
-                    <Pressable
-                        key={index}
-                        opacity={isFocused ? "$100" : "$50"}
-                      //  pb="$8"
-                      //  pt={"$3"}
-                        flex={1}
-                        onPress={()=>onPress(route,navigation,isFocused)}
-                        onLongPress={()=>onLongPress(route,navigation,isFocused)}
-                        testID={options.tabBarTestID}
-                        accessibilityState={isFocused ? { selected: true } : {}}
-                        accessibilityLabel={options.tabBarAccessibilityLabel}
-                    >
-                        <Center>
-                            {options?.tabBarIcon
-                                ? options.tabBarIcon({
-                                    color: isFocused
-                                        ? options.tabBarActiveTintColor
-                                        : options.tabBarInactiveTintColor,
-                                    size: 24,
-                                })
-                                : null}
+                    return (
+                        <Pressable
+                            key={index}
+                            className={`opacity-[${isFocused ? '100' : '50'}] flex-1`}
+                            //  pb="$8"
+                            //  pt={"$3"}
+                            onPress={() => onPress(route, navigation, isFocused)}
+                            onLongPress={() => onLongPress(route, navigation, isFocused)}
+                            testID={options.tabBarTestID}
+                            accessibilityState={isFocused ? { selected: true } : {}}
+                            accessibilityLabel={options.tabBarAccessibilityLabel}
+                        >
+                            <Center>
+                                {options?.tabBarIcon
+                                    ? options.tabBarIcon({
+                                          color: isFocused
+                                              ? options.tabBarActiveTintColor
+                                              : options.tabBarInactiveTintColor,
+                                          size: 24,
+                                      })
+                                    : null}
 
-                            <Text
-                                color={isFocused ? options.tabBarActiveTintColor : options.tabBarInactiveTintColor}
-                                style={{fontSize:12}}
-                            >
-                                {label}
-                            </Text>
-                        </Center>
-                    </Pressable>
-                );
-            })}
-        </Box>
-        </SafeAreaView>
+                                <Text
+                                    color={isFocused ? options.tabBarActiveTintColor : options.tabBarInactiveTintColor}
+                                    size={'sm'}
+                                    // className={`text-[${options.tabBarActiveTintColor}]`}
+                                    // className={`${isFocused ? `text-[${options.tabBarActiveTintColor}]` : `text-[${options.tabBarInactiveTintColor}]`}`}
+                                >
+                                    {label}
+                                </Text>
+                            </Center>
+                        </Pressable>
+                    );
+                })}
+            </HStack>
+        </StyledSafeAreaView>
     );
 };
 
-export default BottomTabBar;
+export default BottomTabBar;

package/src/components/Layout/components/Drawer.tsx

@@ -2,7 +2,6 @@ import React from 'react';
 import { Ionicons } from '@expo/vector-icons';
 import { DrawerContentScrollView, DrawerItemList, DrawerItem } from '@react-navigation/drawer';
 import {
-    SafeAreaView,
     Box,
     Text,
     Heading,
@@ -17,11 +16,12 @@ import {
     Toast,
     ToastTitle,
     ToastDescription,
-} from '@gluestack-ui/themed';
+} from '../../ui';
 import { useNavigation, useRoute } from '@react-navigation/native';
 import { navigationRef } from '@common-stack/client-react';
 import { useSelector, useDispatch } from 'react-redux';
 import { logoutAndRedirect, resetReduxState } from '@adminide-stack/user-auth0-client';
+import { ToastAlert } from '../../ToastAlert';
 
 export const Drawer = (props: any) => {
     const settings = useSelector<any>((state) => state.settings) as any;
@@ -72,8 +72,12 @@ export const Drawer = (props: any) => {
     const logoType = logoUrl ? logoUrl[logoUrl.length - 1] : null;
 
     return (
-        <Box flex={1}>
-            <StatusBar barStyle={settings?.navTheme == 'dark' ? 'light-content' : 'dark-content'} />
+        <Box className="flex-1">
+            <StatusBar
+                barStyle={
+                    settings?.navTheme === 'light' || settings?.navTheme === 'dark' ? 'dark-content' : 'light-content'
+                }
+            />
             <DrawerContentScrollView
                 {...props}
                 style={{
@@ -85,8 +89,8 @@ export const Drawer = (props: any) => {
                 }}
             >
                 {settings?.logo && logoType && logoType != 'svg' ? (
-                    <HStack px={'$3'} alignItems={'center'}>
-                        <Avatar size={'sm'} bg="transparent">
+                    <HStack className="px-3 items-center">
+                        <Avatar size={'sm'} className="bg-transparent">
                             <AvatarFallbackText>Logo</AvatarFallbackText>
                             <AvatarImage
                                 source={{
@@ -98,15 +102,14 @@ export const Drawer = (props: any) => {
 
                         {props.title ? (
                             <Heading
-                                p={'$5'}
-                                size={'lg'}
-                                color={
+                                className={`p-5 text-${
                                     props?.titleColor
                                         ? props?.titleColor
                                         : settings?.navTheme == 'dark'
-                                        ? '$white'
-                                        : '$black'
-                                }
+                                        ? 'white'
+                                        : 'black'
+                                }`}
+                                size={'lg'}
                             >
                                 {props?.headingTitle ?? settings?.title ?? props.title}
                             </Heading>
@@ -116,15 +119,14 @@ export const Drawer = (props: any) => {
                     <>
                         {props.title ? (
                             <Heading
-                                p={'$5'}
                                 size={'lg'}
-                                color={
+                                className={`p-5 text-${
                                     props?.titleColor
                                         ? props?.titleColor
                                         : settings?.navTheme == 'dark'
-                                        ? '$white'
-                                        : '$black'
-                                }
+                                        ? 'white'
+                                        : 'black'
+                                }`}
                             >
                                 {props?.headingTitle ?? settings?.title ?? props.title}
                             </Heading>
@@ -213,7 +215,7 @@ export const Drawer = (props: any) => {
                                 }
                             }}
                             label={({ color }) => (
-                                <Text style={{ color, fontSize: 15 }} fontWeight={'$semibold'}>
+                                <Text className="font-semibold" style={{ color, fontSize: 15 }}>
                                     {data.name.split('.').pop() === 'Home' ? 'Home' : data.name.split('.').pop()}
                                 </Text>
                             )}
@@ -239,8 +241,9 @@ export const Drawer = (props: any) => {
             </DrawerContentScrollView>
 
             <Box
-                mb={settings?.layout == 'bottomDrawer' ? '$0' : '$4'}
-                bg={props?.backgroundColor ? props?.backgroundColor : settings?.navTheme == 'dark' ? '#000' : '#fff'}
+                className={`mb-${settings?.layout == 'bottomDrawer' ? '0' : '4'} bg-${
+                    props?.backgroundColor ? props?.backgroundColor : settings?.navTheme == 'dark' ? '#000' : '#fff'
+                }`}
             >
                 <Divider />
                 <>
@@ -326,7 +329,7 @@ export const Drawer = (props: any) => {
                                     }
                                 }}
                                 label={({ color }) => (
-                                    <Text style={{ color, fontSize: 15 }} fontWeight={'$semibold'}>
+                                    <Text style={{ color, fontSize: 15 }} className="font-semibold">
                                         {data.name.split('.').pop() === 'Home' ? 'Home' : data.name.split('.').pop()}
                                     </Text>
                                 )}
@@ -353,7 +356,7 @@ export const Drawer = (props: any) => {
                 {props.logout && user && user.accessToken && (
                     <DrawerItem
                         label={({ color }) => (
-                            <Text style={{ color, fontSize: 15 }} fontWeight={'$semibold'}>
+                            <Text style={{ color, fontSize: 15 }} className="font-semibold">
                                 Logout
                             </Text>
                         )}
@@ -390,12 +393,12 @@ export const Drawer = (props: any) => {
                                     render: ({ id }) => {
                                         const toastId = 'toast-' + id;
                                         return (
-                                            <Toast nativeID={toastId} action="attention" variant="solid">
-                                                <VStack space="xs">
-                                                    <ToastTitle>Logging out</ToastTitle>
-                                                    {/* <ToastDescription></ToastDescription> */}
-                                                </VStack>
-                                            </Toast>
+                                            <ToastAlert
+                                                id={id}
+                                                title={'Logging out....'}
+                                                status={'success'}
+                                                variant={'accent'}
+                                            />
                                         );
                                     },
                                 });

package/src/components/Layout/components/Header.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useCallback } from 'react';
-import { HStack, Icon, Text, Box, StatusBar, Divider, Button, ButtonIcon, SafeAreaView } from '@gluestack-ui/themed';
+import { HStack, Icon, Text, Box, StatusBar, Divider, Button, ButtonIcon, StyledSafeAreaView } from '../../ui';
 import { getHeaderTitle } from '@react-navigation/elements';
 import { Ionicons } from '@expo/vector-icons';
 import { SettingDrawer } from './SettingDrawer';
@@ -38,7 +38,9 @@ export const Header = React.memo(
         );
 
         return (
-            <SafeAreaView bg={settings?.navTheme === 'light' || settings?.navTheme === 'dark' ? '$white' : '$black'}>
+            <StyledSafeAreaView
+                className={`bg-${settings?.navTheme === 'light' || settings?.navTheme === 'dark' ? 'white' : 'black'}`}
+            >
                 <StatusBar
                     barStyle={
                         settings?.navTheme === 'light' || settings?.navTheme === 'dark'
@@ -46,28 +48,28 @@ export const Header = React.memo(
                             : 'light-content'
                     }
                 />
-                <Box bg={settings?.navTheme === 'light' || settings?.navTheme === 'dark' ? '$white' : '$black'}>
+                <Box
+                    className={`bg-${
+                        settings?.navTheme === 'light' || settings?.navTheme === 'dark' ? 'white' : 'black'
+                    } w-full`}
+                >
                     <HStack
-                        bg={settings?.navTheme === 'light' || settings?.navTheme === 'dark' ? '$white' : '$black'}
-                        px="$1"
-                        py="$3"
-                        // justifyContent={
-                        //     settings?.layout === 'bottom' || settings?.layout === 'host-bottom' ? 'center' : 'space-between'
-                        // }
-                        justifyContent={
+                        className={`bg-${
+                            settings?.navTheme === 'light' || settings?.navTheme === 'dark' ? 'white' : 'black'
+                        } px-1 py-3 justify-${
                             (settings?.layout === 'bottom' || settings?.layout === 'host-bottom') &&
                             !isMixedLayout &&
                             !right
                                 ? 'center'
-                                : 'space-between'
+                                : 'between'
                         }
-                        alignItems="center"
-                        borderBottomWidth={'$1'}
-                        borderBottomColor={'#d3d3d3'}
-                        w="100%"
+                                items-center border-b border-b-['#d3d3d3] w-full`}
+                        // justifyContent={
+                        //     settings?.layout === 'bottom' || settings?.layout === 'host-bottom' ? 'center' : 'space-between'
+                        // }
                     >
                         {back ? (
-                            <Button size="xs" bg={'transparent'} onPress={() => navigation.goBack()}>
+                            <Button size="xs" className="bg-transparent" onPress={() => navigation.goBack()}>
                                 <Ionicons
                                     name={'arrow-back'}
                                     color={
@@ -80,7 +82,7 @@ export const Header = React.memo(
                             </Button>
                         ) : (showToggle && settings?.layout !== 'bottom') ||
                           (showToggle && settings?.layout !== 'host-bottom') ? (
-                            <Button size="xs" bg={'transparent'} onPress={() => navigation.toggleDrawer()}>
+                            <Button size="xs" className="bg-transparent" onPress={() => navigation.toggleDrawer()}>
                                 <Ionicons
                                     name={'menu'}
                                     color={
@@ -95,13 +97,10 @@ export const Header = React.memo(
                             <></>
                         )}
                         <Text
-                            px={'$2'}
-                            color={
-                                settings?.navTheme === 'light' || settings?.navTheme === 'dark' ? '$black' : '$white'
-                            }
                             style={{ fontSize: 20 }}
-                            fontWeight="$bold"
-                            textAlign="center"
+                            className={`px-2 color-${
+                                settings?.navTheme === 'light' || settings?.navTheme === 'dark' ? 'black' : 'white'
+                            } font-bold text-center`}
                         >
                             {title}
                         </Text>
@@ -117,10 +116,10 @@ export const Header = React.memo(
                         ) : null}
                         {right && (
                             <>
-                                <HStack alignItems={'center'}>
+                                <HStack className="items-center">
                                     <Button
                                         size="xs"
-                                        bg={'transparent'}
+                                        className="bg-transparent data-[active=true]:bg-transparent"
                                         onPress={() => setSettingToggle(!settingToggle)}
                                     >
                                         <Ionicons
@@ -137,7 +136,7 @@ export const Header = React.memo(
                         {(back ||
                             (showToggle && settings?.layout !== 'bottom') ||
                             (showToggle && settings?.layout !== 'host-bottom')) && (
-                            <Button bg={'transparent'} mr={'$2'}></Button>
+                            <Button className="bg-transparent mr-2"></Button>
                         )}
                         {/* {right ? (
                             <HStack alignItems={'center'}>
@@ -159,7 +158,7 @@ export const Header = React.memo(
                         )} */}
                     </HStack>
                 </Box>
-            </SafeAreaView>
+            </StyledSafeAreaView>
         );
     },
 );

package/src/components/Layout/components/Sample.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import {  Box, Text } from '@gluestack-ui/themed';
+import { Box, Text } from '../../ui';
 
 export const Sample = () => {
     return (

package/src/components/Layout/components/SettingDrawer/LayoutButton.tsx

@@ -1,15 +1,12 @@
 import React from 'react';
-import { Box, Pressable, HStack, VStack, Text } from '@gluestack-ui/themed';
+import { Box, Pressable, HStack, VStack, Text } from '../../../ui';
 
 const LayoutButton = ({ color, onSettingChange, settings, bottom, mode, bottomOnly, bottomDrawer }: any) => {
     return (
         <Pressable
-            backgroundColor={color === 'light' || color === 'dark' ? '#f0f2f5' : '#263749'}
-            width={50}
-            height={50}
-            borderRadius={'$sm'}
-            softShadow={'4'}
-            mr={'$4'}
+            className={`${
+                color === 'light' || color === 'dark' ? 'bg-[#f0f2f5]' : 'bg-[#263749]'
+            } w-[50px] h-[50px] rounded-md shadow-sm mr-4`}
             onPress={() => {
                 if (mode === 'style') {
                     let { navTheme, ...rest } = settings;
@@ -71,39 +68,28 @@ const LayoutButton = ({ color, onSettingChange, settings, bottom, mode, bottomOn
         >
             <HStack>
                 <Box
-                    backgroundColor={color === 'light' ? '$white' : '$black'}
-                    height={bottomOnly ? '$0' : 50}
-                    width={bottomOnly ? '$0' : '28%'}
-                    borderTopLeftRadius={'$sm'}
-                    borderBottomLeftRadius={'$sm'}
+                    className={`bg-${color === 'light' ? 'white' : 'black'} ${
+                        bottomOnly ? 'h-[0px] w-[0%]' : 'h-[50px] w-[28%]'
+                    } rounded-tl-md rounded-bl-md`}
                 />
-                <VStack justifyContent={'space-between'}>
+                <VStack className="justify-between">
                     <Box
-                        height={15}
-                        width={bottomOnly ? 49 : 36}
-                        backgroundColor={color === 'light' || color === 'dark' ? '$white' : '$black'}
-                        borderTopRightRadius={'$sm'}
+                        className={`h-[15px] ${bottomOnly ? 'w-[49px]' : 'w-[36px]'} bg-${
+                            color === 'light' || color === 'dark' ? 'white' : 'black'
+                        } rounded-tr-md`}
                     />
-                    {bottom ? (
-                        <Box height={15} width={36} backgroundColor={'$black'} borderBottomRightRadius={'$sm'} />
-                    ) : null}
+                    {bottom ? <Box className={`h-[15px] w-[36px] bg-black rounded-br-md`} /> : null}
 
                     {bottomOnly ? (
                         <>
-                            <Box height={18} width={'$0'} backgroundColor={'$white'} borderTopRightRadius={'$sm'} />
-                            <Box
-                                height={15}
-                                width={49}
-                                backgroundColor={'$black'}
-                                borderBottomLeftRadius={'$sm'}
-                                borderBottomRightRadius={'$sm'}
-                            />
+                            <Box className={`h-[20px] w-[13px] bg-black`} />
+                            <Box className="h-[15px] w-[49px] bg-black rounded-b-md" />
                         </>
                     ) : null}
 
                     {bottomDrawer ? (
                         <>
-                            <Box height={15} width={36} backgroundColor={'$black'} borderBottomRightRadius={'$sm'} />
+                            <Box className={`h-[15px] w-[36px] bg-black rounded-br-md`} />
                             <Text></Text>
                         </>
                     ) : null}