@admin-layout/gluestack-ui-mobile 12.2.4-alpha.0 → 12.2.4-alpha.103

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, SafeAreaView } from '@gluestack-ui/themed';
 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,117 @@ 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
+            <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
                             ? 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}
+                            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}
 
-                            <Text
-                                color={isFocused ? options.tabBarActiveTintColor : options.tabBarInactiveTintColor}
-                                style={{fontSize:12}}
-                            >
-                                {label}
-                            </Text>
-                        </Center>
-                    </Pressable>
-                );
-            })}
-        </Box>
+                                <Text
+                                    color={isFocused ? options.tabBarActiveTintColor : options.tabBarInactiveTintColor}
+                                    style={{ fontSize: 12 }}
+                                >
+                                    {label}
+                                </Text>
+                            </Center>
+                        </Pressable>
+                    );
+                })}
+            </Box>
         </SafeAreaView>
     );
 };
 
-export default BottomTabBar;
+export default BottomTabBar;

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 '@gluestack-ui/themed';
 
 export const Sample = () => {
     return (

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

@@ -2,8 +2,7 @@ import React, { useState } from 'react';
 import { HStack, Icon, Text, Box, StatusBar, Divider, Button, FlatList, SafeAreaView } from '@gluestack-ui/themed';
 import { StyleSheet, TouchableOpacity } from 'react-native';
 import { Ionicons } from '@expo/vector-icons';
-import { Link } from 'react-router-native';
-import { useHistory } from 'react-router-native';
+import { Link, useNavigate } from 'react-router-native';
 import { config } from '../../../config';
 import { MenuDataItem } from '../typings';
 import { COLOR } from '../../../utils/ThemeColor';
@@ -18,7 +17,7 @@ export interface SideBarProps {
 const SideBar: React.FC<SideBarProps> = ({ menuData, matchUrl, navTheme, drawerRef }) => {
     const [icon, setIcon] = useState('chevron-down-outline');
     const [isToggle, setToggle] = useState(false);
-    const history = useHistory();
+    const navigate = useNavigate();
 
     const toggle = () => {
         if (isToggle) {
@@ -32,8 +31,8 @@ const SideBar: React.FC<SideBarProps> = ({ menuData, matchUrl, navTheme, drawerR
 
     const isMenuExist = menuData.length > 0;
 
-    const openMenuItem = (menu) => {
-        history.push({ pathname: menu.path, state: menu.name });
+    const openMenuItem = (menu: any) => {
+        navigate(menu.path, { state: menu.name });
         drawerRef.current.closeDrawer();
     };
 
@@ -42,19 +41,16 @@ const SideBar: React.FC<SideBarProps> = ({ menuData, matchUrl, navTheme, drawerR
             {!!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 p={'$3'}>
                                 <TouchableOpacity onPress={() => toggle()}>
                                     <HStack>
-                                        <Ionicons
-                                            color={isToggle ? '#fff' : '#a1a1a1'}
-                                            name="document-outline"
-                                        />
+                                        <Ionicons color={isToggle ? '#fff' : '#a1a1a1'} name="document-outline" />
                                         <Text style={{ color: isToggle ? '#fff' : '#a1a1a1' }}>{item.name}</Text>
-                                        <Ionicons  name={arrowIcon} />
+                                        <Ionicons name={arrowIcon} />
                                     </HStack>
                                 </TouchableOpacity>
                                 {isToggle
@@ -69,7 +65,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} p={'$3'}>
                                     <TouchableOpacity style={{ marginBottom: 10 }} onPress={() => openMenuItem(item)}>
                                         <HStack>
                                             <Ionicons

package/src/components/NavigationComponent.tsx

@@ -102,7 +102,9 @@ export const NavigationContainerComponent = ({
     independent,
     linking,
 }: INavigationContainerComponentProps): ReactElement => {
-    const routeNameRef = useRef() as MutableRefObject<INavigationContainerRef | undefined>;
+    const routeNameRef = useRef<INavigationContainerRef | undefined>(undefined) as MutableRefObject<
+        INavigationContainerRef | undefined
+    >;
     const dispatch = useDispatch();
     const platformState = useSelector((state) => (state as any).platform);
     const { setLocationChange } = useLocationChange();

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 '@gluestack-ui/themed';
 
 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 (

package/src/components/UnAuthenticatedComponent.tsx

@@ -1,38 +1,28 @@
 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, SafeAreaView } from '@gluestack-ui/themed';
 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'} />
+            <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'} />
+                </Box>
             </Box>
-        </Box>
-    </SafeAreaView>
+        </SafeAreaView>
     );
 };
 
-export default UnAuthenticatedComponent;
+export default UnAuthenticatedComponent;

package/src/components/WithConfiguration.tsx

@@ -16,7 +16,7 @@ export interface IWithConfigurationProps {
 }
 
 export const WithConfiguration = (props: IWithConfigurationProps) => {
-    const { configKey, children, permissionKeys, resourceName, permissionTypes } = props;
+    const { configKey, children, permissionKeys, resourceName, permissionTypes = [PermissionType.Allow] } = props;
 
     const {
         data,
@@ -65,8 +65,4 @@ export const WithConfiguration = (props: IWithConfigurationProps) => {
     );
 };
 
-WithConfiguration.defaultProps = {
-    permissionTypes: [PermissionType.Allow],
-};
-
 export const WithConfigurationContainer = (props: IWithConfigurationProps) => <WithConfiguration {...props} />;

package/src/components/WithPermission.tsx

@@ -68,15 +68,6 @@ export const WithPermission = ({
     return null;
 };
 
-WithPermission.defaultProps = {
-    permissionTypes: [PermissionType.Allow],
-    behaviour: WithPermissionBehaviour.hide,
-    message: "You don't have permission to access this resource, contact owner",
-    disabledProps: {
-        disabled: true,
-    },
-};
-
 export const WithPermissionContainer = React.memo((props: IWithPermissionProps) => <WithPermission {...props} />);
 export default WithPermissionContainer;
 // export const WithPermissionContainer = (props: IWithPermissionProps) => <WithPermission {...props} />;

package/src/components/index.ts

@@ -1,3 +1,4 @@
+export * from './InputToolBar';
 export * from './Layout';
 export * from './PluginArea';
 export * from './ApplicationErrorHandler';

package/src/components/usePermissionAutoFetch.tsx

@@ -1,31 +1,16 @@
-import { ResourceAuthority, ConfigFragmentName, IContext } from 'common';
-import { generateUserUri } from '@adminide-stack/core';
-import { useGetContextDataQuery } from 'common/lib/generated/generated.js';
-import { useSetting } from './useSetting';
+import { usePermissionAutoFetch as usePlatformPermissionAutoFetch } from '@adminide-stack/platform-client';
 
 interface userPermissionAutoFetchProps {
     configKey?: string;
 }
 export const usePermissionAutoFetch = (options?: userPermissionAutoFetchProps) => {
-    const { data, loading } = useGetContextDataQuery();
-    const { orgUri, userId } = (data?.getContextData as IContext) || {};
+    const { permissions, loading } = usePlatformPermissionAutoFetch(options);
 
-    // Determine resource based on teamUri, orgUri, or fallback to userId
-    let resource = orgUri || (userId ? generateUserUri({ _id: userId }) : generateUserUri({ _id: 'guest' }));
-
-    const { loading: settingLoading, ...remaining } = useSetting({
-        configKey: options?.configKey || '',
-        overrides: {
-            resource: resource,
-        },
-        options: {
-            forceExist: false,
-            authority: ResourceAuthority.Defaultpermissions,
-            fragment: ConfigFragmentName.Roles,
-        },
-    });
-
-    return { ...remaining, loading: loading || settingLoading };
+    return {
+        permissions,
+        data: permissions === undefined ? undefined : { resolveConfiguration: permissions },
+        loading,
+    };
 };
 
 // import React from 'react';

package/src/components/useSetting.tsx

@@ -1,30 +1,25 @@
-import React from 'react';
 import type {
-    IResolveConfigurationQuery,
-    IResolveConfigurationQueryVariables,
+    IConfigurationsFlattenedKeys,
     IPreferencesInput,
     IPreferencesOpenOptionsInput,
-    IUpdateConfigurationMutation,
     IConfigurationOverridesInput,
 } from 'common';
 import { ConfigurationTarget } from 'common';
-import { QueryResult } from '@apollo/client/react';
-import { omitBy, isNil } from 'lodash-es';
-import { ExecutionResult } from 'graphql';
-import {
-    useResolveConfigurationQuery,
-    useOpenPreferencesSettingsQuery,
-    useUpdateConfigurationMutation,
-} from 'common/lib/generated/generated.js';
+import { useSetting as usePlatformSetting } from '@adminide-stack/platform-client';
 
 export interface ISettingsVariable {
     overrides?: IConfigurationOverridesInput;
-    configKey: string;
+    configKey: IConfigurationsFlattenedKeys;
     options?: IPreferencesOpenOptionsInput;
     skip?: boolean;
 }
 
-interface IResponse extends QueryResult<IResolveConfigurationQuery, IResolveConfigurationQueryVariables> {
+interface IResponse {
+    data?: {
+        resolveConfiguration?: unknown;
+    };
+    loading: boolean;
+    error?: unknown;
     preferencesInput?: IPreferencesInput;
     updateConfiguration?: ({
         updateKey,
@@ -36,7 +31,9 @@ interface IResponse extends QueryResult<IResolveConfigurationQuery, IResolveConf
         value: string | boolean | number;
         updateOverrides?: IConfigurationOverridesInput;
         target?: ConfigurationTarget;
-    }) => Promise<ExecutionResult<IUpdateConfigurationMutation>>;
+    }) => Promise<unknown>;
+    refetch?: Function;
+    [key: string]: unknown;
 }
 
 /**
@@ -45,93 +42,18 @@ interface IResponse extends QueryResult<IResolveConfigurationQuery, IResolveConf
  * @param baseOptions
  */
 export const useSetting = (settingsVariable: ISettingsVariable): IResponse => {
-    const { overrides, configKey, options, skip = false } = settingsVariable;
-    const targetResource = overrides?.resource ?? null;
-    let prefLoaded = false;
-    const {
-        data: prefData,
-        error: prefError,
-        loading: perfLoading,
-        refetch: refetchPrefData,
-    } = useOpenPreferencesSettingsQuery({
-        variables: { resource: targetResource, options },
-        fetchPolicy: 'cache-first', // to make `{always: true}` to work
-        skip: prefLoaded,
-    });
-    React.useEffect(() => {
-        refetchPrefData({ resource: targetResource, options });
-    }, [targetResource]);
-    prefLoaded = perfLoading || skip;
-    const [updateConfigurationMutation] = useUpdateConfigurationMutation();
-    const modifiedOverrides = {
-        ...overrides,
-        resource: targetResource ? prefData?.openPreferencesSettings?.editableSettingsInput ?? null : null,
-    };
-    const defaultOverrides = omitBy(modifiedOverrides, isNil);
-    let {
-        data: settingsData,
-        error: settingError,
-        loading: settingLoading,
-        ...remaining
-    } = useResolveConfigurationQuery({
-        variables: {
-            input: prefData?.openPreferencesSettings ?? null,
-            key: configKey,
-            overrides: defaultOverrides,
-        },
-        fetchPolicy: 'cache-and-network', // to make `{always: true}` to work
-        skip: prefLoaded || !!prefError || !prefData?.openPreferencesSettings?.editableSettingsInput,
-    });
-    React.useEffect(() => {
-        remaining?.refetch({
-            input: prefData?.openPreferencesSettings ?? null,
-            key: configKey,
-            overrides: defaultOverrides,
-        });
-    }, [prefData]);
-
-    let loading = true;
-    if (!settingLoading && !prefLoaded) {
-        loading = false;
-    }
-    const error = settingError || prefError;
-    if (error) {
-        return {
-            error,
-            data: undefined,
-            loading: false,
-            ...remaining,
-        };
-    }
-    if (loading) {
-        return {
-            error,
-            data: undefined,
-            loading,
-            ...remaining,
-        };
-    }
-
-    const updateConfiguration = ({ value, updateKey, updateOverrides, target }) => {
-        return updateConfigurationMutation({
-            variables: {
-                key: updateKey || configKey,
-                value,
-                target,
-                overrides: updateOverrides || defaultOverrides,
-                input: prefData?.openPreferencesSettings,
-            },
-        });
-    };
+    const { data, updateConfiguration, ...remaining } = usePlatformSetting(settingsVariable as any);
 
     return {
-        data: settingsData,
-        loading,
-        error,
+        data: data === undefined ? undefined : { resolveConfiguration: data },
         ...remaining,
-        preferencesInput: {
-            ...prefData?.openPreferencesSettings,
+        updateConfiguration: ({ value, updateKey, updateOverrides, target }) => {
+            return updateConfiguration?.({
+                value,
+                updateKey,
+                updateOverrides,
+                target,
+            });
         },
-        updateConfiguration,
-    } as any;
+    };
 };