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

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

@@ -22,7 +22,8 @@ import {
     Divider,
     Switch,
     ScrollView,
-} from '@gluestack-ui/themed';
+    ActionsheetScrollView,
+} from '../../../ui';
 import { useSelector } from 'react-redux';
 
 import LayoutButton from './LayoutButton';
@@ -32,18 +33,16 @@ import { THEMECOLOR } from '../../../../utils/ThemeColor';
 export const SettingDrawer = ({ isOpen, onSettingChange, handleClose }: any) => {
     const settings = useSelector<any>((state) => state.settings) as any;
     return (
-        <Actionsheet isOpen={isOpen} onClose={handleClose} zIndex={999}>
+        <Actionsheet isOpen={isOpen} onClose={handleClose} className="z-999">
             <ActionsheetBackdrop />
-            <ActionsheetContent zIndex={999} w={'100%'}>
+            <ActionsheetContent className="z-999">
                 <ActionsheetDragIndicatorWrapper>
                     <ActionsheetDragIndicator />
                 </ActionsheetDragIndicatorWrapper>
-                <ScrollView>
-                    <Box alignItems="flex-start" bg={'$white'} w={'100%'} p={'$3'}>
-                        <Text color={'#00000'} fontWeight={'$semibold'}>
-                            Page style setting
-                        </Text>
-                        <HStack space={'md'} mt={'$3'}>
+                <ActionsheetScrollView>
+                    <Box className="items-start bg-white p-3">
+                        <Text className="text-black font-semibold">Page style setting</Text>
+                        <HStack space={'md'} className="mt-3">
                             <LayoutButton
                                 mode="style"
                                 settings={settings}
@@ -63,43 +62,40 @@ export const SettingDrawer = ({ isOpen, onSettingChange, handleClose }: any) =>
                                 color={'realDark'}
                             />
                         </HStack>
-                        <Text color={'#000000'} fontWeight={'$semibold'} mt={'$2'}>
-                            Select Theme
-                        </Text>
-                        <Select
-                            mt={'$2'}
-                            w={'100%'}
-                            selectedValue={settings?.themeName}
-                            onValueChange={(value) => {
-                                const newSettings = {
-                                    ...settings,
-                                    themeName: value,
-                                };
-                                onSettingChange(newSettings);
-                            }}
-                        >
-                            <SelectTrigger variant="outline" size="md">
-                                <SelectInput placeholder="Select option" />
-                                <Icon as={ChevronDownIcon} mr={'$3'} />
-                            </SelectTrigger>
-                            <SelectPortal>
-                                <SelectBackdrop />
-                                <SelectContent>
-                                    <SelectDragIndicatorWrapper>
-                                        <SelectDragIndicator />
-                                    </SelectDragIndicatorWrapper>
-                                    <SelectItem label="Default" value="default" />
-                                    <SelectItem label="Github Theme" value="github" />
-                                    <SelectItem label="Slack Theme" value="slack" />
-                                    <SelectItem label="Airbnb Theme" value="airbnb" />
-                                    <SelectItem label="Spotify Theme" value="spotify" />
-                                </SelectContent>
-                            </SelectPortal>
-                        </Select>
-                        <Text color={'#000000'} fontWeight={'$semibold'} mt={'$2'}>
-                            Theme Color
-                        </Text>
-                        <HStack space={'md'} mt={'$3'} flexWrap={'wrap'}>
+                        <Text className="text-black font-semibold mt-2">Select Theme</Text>
+                        <Box className="w-full">
+                            <Select
+                                className="mt-2"
+                                selectedValue={settings?.themeName}
+                                onValueChange={(value) => {
+                                    const newSettings = {
+                                        ...settings,
+                                        themeName: value,
+                                    };
+                                    onSettingChange(newSettings);
+                                }}
+                            >
+                                <SelectTrigger variant="outline" size="md">
+                                    <SelectInput placeholder="Select option" className="mr-3" />
+                                    <Icon as={ChevronDownIcon} />
+                                </SelectTrigger>
+                                <SelectPortal>
+                                    <SelectBackdrop />
+                                    <SelectContent>
+                                        <SelectDragIndicatorWrapper>
+                                            <SelectDragIndicator />
+                                        </SelectDragIndicatorWrapper>
+                                        <SelectItem label="Default" value="default" />
+                                        <SelectItem label="Github Theme" value="github" />
+                                        <SelectItem label="Slack Theme" value="slack" />
+                                        <SelectItem label="Airbnb Theme" value="airbnb" />
+                                        <SelectItem label="Spotify Theme" value="spotify" />
+                                    </SelectContent>
+                                </SelectPortal>
+                            </Select>
+                        </Box>
+                        <Text className="text-black font-semibold mt-2">Theme Color</Text>
+                        <HStack space={'md'} className="mt-3 flex-wrap">
                             {THEMECOLOR.map((color, index) => (
                                 <ThemeColorButton
                                     key={index}
@@ -109,11 +105,9 @@ export const SettingDrawer = ({ isOpen, onSettingChange, handleClose }: any) =>
                                 />
                             ))}
                         </HStack>
-                        <Divider my={'$4'} />
-                        <Text color={'#000000'} fontWeight={'$semibold'} mt={'$2'}>
-                            Navigation Mode
-                        </Text>
-                        <HStack space={'md'} mt={'$3'}>
+                        <Divider className="my-4" />
+                        <Text className="text-black font-semibold mt-2">Navigation Mode</Text>
+                        <HStack space={'md'} className="mt-3">
                             <LayoutButton
                                 mode="layout"
                                 settings={settings}
@@ -136,11 +130,9 @@ export const SettingDrawer = ({ isOpen, onSettingChange, handleClose }: any) =>
                                 color={'light'}
                             />
                         </HStack>
-                        <Divider my={'$4'} />
-                        <Text color={'#000000'} fontWeight={'$semibold'} mt={'$2'}>
-                            Regional Settings
-                        </Text>
-                        <HStack w={'100%'} mt={'$3'} justifyContent={'space-between'} alignItems="center">
+                        <Divider className="my-4" />
+                        <Text className="text-black font-semibold mt-2">Regional Settings</Text>
+                        <HStack className="mt-3 w-full justify-between items-center">
                             <Text>Menu Header</Text>
                             <Switch
                                 onValueChange={(value) => {
@@ -156,7 +148,7 @@ export const SettingDrawer = ({ isOpen, onSettingChange, handleClose }: any) =>
                             />
                         </HStack>
                     </Box>
-                </ScrollView>
+                </ActionsheetScrollView>
             </ActionsheetContent>
         </Actionsheet>
     );

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

@@ -1,13 +1,22 @@
 import React from 'react';
-import { Pressable, Box } from '@gluestack-ui/themed';
+import { Pressable, Box } from '../../../ui';
+
+const colorClassMap: Record<string, string> = {
+    '#4a154b': 'bg-[#4a154b]',
+    '#601e69': 'bg-[#601e69]',
+    '#1d1c1d': 'bg-[#1d1c1d]',
+    '#36c5ef': 'bg-[#36c5ef]',
+    '#2db57c': 'bg-[#2db57c]',
+    '#e01d5a': 'bg-[#e01d5a]',
+    '#ecb12f': 'bg-[#ecb12f]',
+    '#616061': 'bg-[#616061]',
+    '#dcd9d4': 'bg-[#dcd9d4]',
+};
 
 const ThemeColorButton = ({ color, onSettingChange, settings }: any) => {
     return (
         <Pressable
-            backgroundColor={color}
-            height={'$6'}
-            width={'$6'}
-            borderRadius={'$sm'}
+            className={`${colorClassMap[color]} w-[26px] h-[26px] rounded-md`}
             onPress={() => {
                 let { primaryColor, ...rest } = settings;
                 primaryColor = color;

package/src/components/Layout/components/SideBar.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { HStack, Icon, Text, Box, StatusBar, Divider, Button, FlatList, SafeAreaView } from '@gluestack-ui/themed';
+import { HStack, Icon, Text, Box, StatusBar, Divider, Button, FlatList } from '../../ui';
 import { StyleSheet, TouchableOpacity } from 'react-native';
 import { Ionicons } from '@expo/vector-icons';
 import { Link } from 'react-router-native';
@@ -38,30 +38,27 @@ const SideBar: React.FC<SideBarProps> = ({ menuData, matchUrl, navTheme, drawerR
     };
 
     return (
-        <Box flex={1} style={{ backgroundColor: navTheme === 'dark' ? COLOR.GREYISH_BLACK : COLOR.WHITE }}>
+        <Box className={`flex-1 bg-${navTheme === 'dark' ? COLOR.GREYISH_BLACK : COLOR.WHITE}`}>
             {!!isMenuExist && (
                 <FlatList
                     data={menuData}
-                    renderItem={({ item }:any) => {
+                    renderItem={({ item }: any) => {
                         const keys = item?.key.split('.');
-                        const arrowIcon:any = icon || 'chevron-down-outline';
+                        const arrowIcon: any = icon || 'chevron-down-outline';
                         return item?.routes ? (
-                            <Box p={"$3"}>
+                            <Box className="p-3">
                                 <TouchableOpacity onPress={() => toggle()}>
                                     <HStack>
-                                        <Ionicons
-                                            color={isToggle ? '#fff' : '#a1a1a1'}
-                                            name="document-outline"
-                                        />
-                                        <Text style={{ color: isToggle ? '#fff' : '#a1a1a1' }}>{item.name}</Text>
-                                        <Ionicons  name={arrowIcon} />
+                                        <Ionicons color={isToggle ? '#fff' : '#a1a1a1'} name="document-outline" />
+                                        <Text color={isToggle ? '#fff' : '#a1a1a1'}>{item.name}</Text>
+                                        <Ionicons name={arrowIcon} />
                                     </HStack>
                                 </TouchableOpacity>
                                 {isToggle
                                     ? item.routes.map((subMenu: any) => (
                                           <Box key={subMenu.key}>
                                               <Link to={subMenu.path} underlayColor="#f0f4f7">
-                                                  <Text style={{ color: '#a1a1a1' }}>{subMenu.name}</Text>
+                                                  <Text className="text-[#a1a1a1]">{subMenu.name}</Text>
                                               </Link>
                                           </Box>
                                       ))
@@ -69,7 +66,7 @@ const SideBar: React.FC<SideBarProps> = ({ menuData, matchUrl, navTheme, drawerR
                             </Box>
                         ) : (
                             keys[0] != 'Main' && keys[0] == 'sidebar' && (
-                                <Box key={item.key} p={"$3"}>
+                                <Box key={item.key} className="p-3">
                                     <TouchableOpacity style={{ marginBottom: 10 }} onPress={() => openMenuItem(item)}>
                                         <HStack>
                                             <Ionicons
@@ -78,10 +75,8 @@ const SideBar: React.FC<SideBarProps> = ({ menuData, matchUrl, navTheme, drawerR
                                                 name={item.icon}
                                             />
                                             <Text
-                                                style={{
-                                                    color: navTheme === 'dark' ? COLOR.LIGHT_GREY : COLOR.BLACK,
-                                                    marginLeft: 10,
-                                                }}
+                                                color={navTheme === 'dark' ? COLOR.LIGHT_GREY : COLOR.BLACK}
+                                                className="ml-10"
                                             >
                                                 {item.name}
                                             </Text>

package/src/components/ToastAlert.tsx

@@ -1,14 +1,6 @@
 import React from 'react';
 
-import {
-    Toast,
-    VStack,
-    ToastTitle,
-    ToastDescription,
-    Pressable,
-    Icon,
-    CloseIcon,
-} from '@gluestack-ui/themed';
+import { Toast, VStack, ToastTitle, ToastDescription, Pressable, Icon, CloseIcon } from './ui';
 
 interface IToast {
     id: string;
@@ -17,7 +9,7 @@ interface IToast {
     description?: string;
     isClosable?: boolean;
     toast?: any;
-    variant?:any
+    variant?: any;
 }
 
 // variants:
@@ -25,7 +17,15 @@ interface IToast {
 // solid,
 // outline
 
-export const ToastAlert = ({ id, status = 'info', title='', description = '',variant='solid', isClosable, toast=null }: IToast) => {
+export const ToastAlert = ({
+    id,
+    status = 'info',
+    title = '',
+    description = '',
+    variant = 'solid',
+    isClosable,
+    toast = null,
+}: IToast) => {
     const toastId = 'toast-' + id;
     const actionType = status || 'info';
     return (
@@ -35,8 +35,8 @@ export const ToastAlert = ({ id, status = 'info', title='', description = '',var
                 {description && <ToastDescription>{description}</ToastDescription>}
             </VStack>
             {isClosable && toast ? (
-                <Pressable mt="$1" onPress={() => toast?.close(id)}>
-                    <Icon as={CloseIcon} color="$coolGray50" />
+                <Pressable className="mt-1" onPress={() => toast?.close(id)}>
+                    <Icon as={CloseIcon} className="text-gray-400" />
                 </Pressable>
             ) : null}
         </Toast>

package/src/components/UnAuthenticatedComponent.tsx

@@ -1,38 +1,30 @@
 import React from 'react';
-import {
-    Box,
-    Button,
-    Heading,
-    Text,
-    HStack,
-    Pressable,
-    Divider,
-    ButtonText,
-    SafeAreaView,
-} from '@gluestack-ui/themed';
+import { Box, Button, Heading, Text, HStack, Pressable, Divider, ButtonText, StyledSafeAreaView } from './ui';
 import { useNavigation } from '@react-navigation/native';
 import { Ionicons } from '@expo/vector-icons';
 import { Linking } from 'react-native';
 
- const UnAuthenticatedComponent = () => {
+const UnAuthenticatedComponent = () => {
     const navigation = useNavigation<any>();
     return (
-        <SafeAreaView flex={1}>
-        <Box flex={1} borderTopWidth={'$1'} borderTopColor={'$trueGray200'}>
-            {/* <Box h={'$1'} bg={Colors.primaryBgColor} /> */}
-            <Box flex={1} p={'$6'} bg="$white" justifyContent={'center'}>
-                <Heading mt={'$2'}>Login</Heading>
-                <Text fontSize="$md" mt={'$2'}>
-                    Log in to continue.
-                </Text>
-                <Button bg={'$blue500'} size="lg" my={'$3'} onPress={() => navigation.navigate('MainStack.Login')}>
-                    <ButtonText color="$white">Login</ButtonText>
-                </Button>
-                <Divider my={'$3'} />
+        <StyledSafeAreaView>
+            <Box className="flex-1 border-t border-t-slate-300">
+                {/* <Box h={'$1'} bg={Colors.primaryBgColor} /> */}
+                <Box className="flex-1 p-6 bg-white justify-center">
+                    <Heading className="mt-2">Login</Heading>
+                    <Text className="text-md mt-2">Log in to continue.</Text>
+                    <Button
+                        className="bg-blue-500 my-3"
+                        size="lg"
+                        onPress={() => navigation.navigate('MainStack.Login')}
+                    >
+                        <ButtonText className="text-white">Login</ButtonText>
+                    </Button>
+                    <Divider className="my-3" />
+                </Box>
             </Box>
-        </Box>
-    </SafeAreaView>
+        </StyledSafeAreaView>
     );
 };
 
-export default UnAuthenticatedComponent;
+export default UnAuthenticatedComponent;

package/src/components/WithConfiguration.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Spinner, Box, Text, Heading } from '@gluestack-ui/themed';
+import { Spinner, Box, Text, Heading } from './ui';
 import { PermissionType, Visibility } from 'common';
 import { IPreDefinedPermissions } from '@adminide-stack/core';
 import { useSetting, usePermissionAutoFetch } from '@adminide-stack/platform-client';

package/src/components/WithPermission.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Spinner, Box, Text, Heading } from '@gluestack-ui/themed';
+import { Spinner, Box, Text, Heading } from './ui';
 import { PermissionType } from 'common';
 import { IPreDefinedPermissions } from '@adminide-stack/core';
 import { get } from 'lodash-es';

package/src/components/WithPolicy.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { ReactElement } from 'react';
-import { Spinner } from '@gluestack-ui/themed';
+import { Spinner } from './ui';
 import { logger } from '@cdm-logger/client';
 import { useSetting } from '@adminide-stack/platform-client';
 

package/src/components/index.ts

@@ -13,3 +13,4 @@ export * from './WithConfiguration';
 export * from './WithPolicy';
 export * from './usePermissionAutoFetch';
 export * from './useSetting';
+export * from './ui';

package/src/components/ui/IconSymbol.ios.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { SymbolView, SymbolViewProps, SymbolWeight } from 'expo-symbols';
+import { StyleProp, ViewStyle } from 'react-native';
+
+export function IconSymbol({
+    name,
+    size = 24,
+    color,
+    style,
+    weight = 'regular',
+}: {
+    name: SymbolViewProps['name'];
+    size?: number;
+    color: string;
+    style?: StyleProp<ViewStyle>;
+    weight?: SymbolWeight;
+}) {
+    return (
+        <SymbolView
+            weight={weight}
+            tintColor={color}
+            resizeMode="scaleAspectFit"
+            name={name}
+            style={[
+                {
+                    width: size,
+                    height: size,
+                },
+                style,
+            ]}
+        />
+    );
+}

package/src/components/ui/IconSymbol.tsx

@@ -0,0 +1,40 @@
+// This file is a fallback for using MaterialIcons on Android and web.
+
+import MaterialIcons from '@expo/vector-icons/MaterialIcons';
+import { SymbolWeight } from 'expo-symbols';
+import React from 'react';
+import { OpaqueColorValue, StyleProp, ViewStyle } from 'react-native';
+
+// Add your SFSymbol to MaterialIcons mappings here.
+const MAPPING = {
+    // See MaterialIcons here: https://icons.expo.fyi
+    // See SF Symbols in the SF Symbols app on Mac.
+    'house.fill': 'home',
+    'paperplane.fill': 'send',
+    'chevron.left.forwardslash.chevron.right': 'code',
+    'chevron.right': 'chevron-right',
+} as Partial<
+    Record<import('expo-symbols').SymbolViewProps['name'], React.ComponentProps<typeof MaterialIcons>['name']>
+>;
+
+export type IconSymbolName = keyof typeof MAPPING;
+
+/**
+ * An icon component that uses native SFSymbols on iOS, and MaterialIcons on Android and web. This ensures a consistent look across platforms, and optimal resource usage.
+ *
+ * Icon `name`s are based on SFSymbols and require manual mapping to MaterialIcons.
+ */
+export function IconSymbol({
+    name,
+    size = 24,
+    color,
+    style,
+}: {
+    name: IconSymbolName;
+    size?: number;
+    color: string | OpaqueColorValue;
+    style?: StyleProp<ViewStyle>;
+    weight?: SymbolWeight;
+}) {
+    return <MaterialIcons color={color} size={size} name={MAPPING[name]} style={style} />;
+}

package/src/components/ui/TabBarBackground.ios.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { useBottomTabBarHeight } from '@react-navigation/bottom-tabs';
+import { BlurView } from 'expo-blur';
+import { StyleSheet } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+export default function BlurTabBarBackground() {
+    return (
+        <BlurView
+            // System chrome material automatically adapts to the system's theme
+            // and matches the native tab bar appearance on iOS.
+            tint="systemChromeMaterial"
+            intensity={100}
+            style={StyleSheet.absoluteFill}
+        />
+    );
+}
+
+export function useBottomTabOverflow() {
+    const tabHeight = useBottomTabBarHeight();
+    const { bottom } = useSafeAreaInsets();
+    return tabHeight - bottom;
+}

package/src/components/ui/TabBarBackground.tsx

@@ -0,0 +1,6 @@
+// This is a shim for web and Android where the tab bar is generally opaque.
+export default undefined;
+
+export function useBottomTabOverflow() {
+    return 0;
+}