@admin-layout/gluestack-ui-mobile 9.1.1-alpha.0 → 9.1.1-alpha.47

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

@@ -4,21 +4,29 @@ import { Box, Pressable, HStack, VStack, Text } from '@gluestack-ui/themed';
 const LayoutButton = ({ color, onSettingChange, settings, bottom, mode, bottomOnly, bottomDrawer }: any) => {
     return (
         <Pressable
-            backgroundColor={'#f0f2f5'}
+            backgroundColor={color === 'light' || color === 'dark' ? '#f0f2f5' : '#263749'}
             width={50}
             height={50}
             borderRadius={'$sm'}
+            softShadow={'4'}
             mr={'$4'}
             onPress={() => {
                 if (mode === 'style') {
                     let { navTheme, ...rest } = settings;
-                    if (color === 'white') {
+                    if (color === 'light') {
                         navTheme = 'light';
                         const newSettings = {
                             ...rest,
                             navTheme,
                         };
                         onSettingChange(newSettings);
+                    } else if (color === 'realDark') {
+                        navTheme = 'realDark';
+                        const newSettings = {
+                            ...rest,
+                            navTheme,
+                        };
+                        onSettingChange(newSettings);
                     } else {
                         navTheme = 'dark';
                         const newSettings = {
@@ -63,33 +71,39 @@ const LayoutButton = ({ color, onSettingChange, settings, bottom, mode, bottomOn
         >
             <HStack>
                 <Box
-                    backgroundColor={color}
+                    backgroundColor={color === 'light' ? '$white' : '$black'}
                     height={bottomOnly ? '$0' : 50}
-                    width={'28%'}
+                    width={bottomOnly ? '$0' : '28%'}
                     borderTopLeftRadius={'$sm'}
                     borderBottomLeftRadius={'$sm'}
                 />
                 <VStack justifyContent={'space-between'}>
-                    <Box height={15} width={36} backgroundColor={'$white'} borderTopRightRadius={'$sm'} />
+                    <Box
+                        height={15}
+                        width={bottomOnly ? 49 : 36}
+                        backgroundColor={color === 'light' || color === 'dark' ? '$white' : '$black'}
+                        borderTopRightRadius={'$sm'}
+                    />
                     {bottom ? (
                         <Box height={15} width={36} backgroundColor={'$black'} borderBottomRightRadius={'$sm'} />
                     ) : null}
 
                     {bottomOnly ? (
                         <>
-                            <Box height={15} width={'$0'} backgroundColor={'$white'} borderTopRightRadius={'$sm'} />
-                            <Box height={15} width={49} backgroundColor={'$black'} />
-                        </>
-                    ) : null}
-
-                    {bottomDrawer ? (
-                        <>
+                            <Box height={18} width={'$0'} backgroundColor={'$white'} borderTopRightRadius={'$sm'} />
                             <Box
                                 height={15}
-                                width={36}
+                                width={49}
                                 backgroundColor={'$black'}
+                                borderBottomLeftRadius={'$sm'}
                                 borderBottomRightRadius={'$sm'}
                             />
+                        </>
+                    ) : null}
+
+                    {bottomDrawer ? (
+                        <>
+                            <Box height={15} width={36} backgroundColor={'$black'} borderBottomRightRadius={'$sm'} />
                             <Text></Text>
                         </>
                     ) : null}

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

@@ -1,60 +1,163 @@
 import React from 'react';
-import {Box, Text, HStack} from '@gluestack-ui/themed';
+import {
+    Box,
+    Text,
+    HStack,
+    Actionsheet,
+    ActionsheetBackdrop,
+    ActionsheetContent,
+    ActionsheetDragIndicatorWrapper,
+    ActionsheetDragIndicator,
+    Select,
+    SelectTrigger,
+    SelectInput,
+    Icon,
+    ChevronDownIcon,
+    SelectPortal,
+    SelectBackdrop,
+    SelectContent,
+    SelectDragIndicatorWrapper,
+    SelectDragIndicator,
+    SelectItem,
+    Divider,
+    Switch,
+    ScrollView,
+} from '@gluestack-ui/themed';
 import { useSelector } from 'react-redux';
 
 import LayoutButton from './LayoutButton';
 import ThemeColorButton from './ThemeColorButton';
 import { THEMECOLOR } from '../../../../utils/ThemeColor';
 
-export const SettingDrawer = ({ onSettingChange }: any) => {
+export const SettingDrawer = ({ isOpen, onSettingChange, handleClose }: any) => {
     const settings = useSelector<any>((state) => state.settings) as any;
     return (
-        <Box position={'absolute'} flex={1} flexGrow={1}  p={"$5"} right={"$0"} bg={'$white'} top={"$4"} >
-            <Text color={'#000080'} style={{fontWeight:'900'}}>
-                Page style setting
-            </Text>
-            <HStack space={"md"} mt={"$3"}>
-                <LayoutButton mode="style" settings={settings} onSettingChange={onSettingChange} color={'white'} />
-                <LayoutButton mode="style" settings={settings} onSettingChange={onSettingChange} color={'black'} />
-            </HStack>
-            <Text color={'#000080'} style={{fontWeight:'900'}} mt={"$2"}>
-                Theme Color
-            </Text>
-            <HStack space={"md"} mt={"$3"} flexWrap={'wrap'}>
-                {THEMECOLOR.map((color, index) => (
-                    <ThemeColorButton key={index} color={color} settings={settings} onSettingChange={onSettingChange} />
-                ))}
-            </HStack>
-            <Text color={'#000080'} style={{fontWeight:'900'}} mt={"$2"}>
-                Navigation Mode
-            </Text>
-            <HStack space={"md"} mt={"$3"}>
-                <LayoutButton mode="layout" settings={settings} onSettingChange={onSettingChange} color={'black'} />
-                <LayoutButton
-                    mode="layout"
-                    bottom={true}
-                    settings={settings}
-                    onSettingChange={onSettingChange}
-                    color={'black'}
-                />
+        <Actionsheet isOpen={isOpen} onClose={handleClose} zIndex={999}>
+            <ActionsheetBackdrop />
+            <ActionsheetContent zIndex={999} w={'100%'}>
+                <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'}>
+                            <LayoutButton
+                                mode="style"
+                                settings={settings}
+                                onSettingChange={onSettingChange}
+                                color={'light'}
+                            />
+                            <LayoutButton
+                                mode="style"
+                                settings={settings}
+                                onSettingChange={onSettingChange}
+                                color={'dark'}
+                            />
+                            <LayoutButton
+                                mode="style"
+                                settings={settings}
+                                onSettingChange={onSettingChange}
+                                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'}>
+                            {THEMECOLOR.map((color, index) => (
+                                <ThemeColorButton
+                                    key={index}
+                                    color={color}
+                                    settings={settings}
+                                    onSettingChange={onSettingChange}
+                                />
+                            ))}
+                        </HStack>
+                        <Divider my={'$4'} />
+                        <Text color={'#000000'} fontWeight={'$semibold'} mt={'$2'}>
+                            Navigation Mode
+                        </Text>
+                        <HStack space={'md'} mt={'$3'}>
+                            <LayoutButton
+                                mode="layout"
+                                settings={settings}
+                                onSettingChange={onSettingChange}
+                                color={'light'}
+                            />
+                            <LayoutButton
+                                mode="layout"
+                                bottom={true}
+                                settings={settings}
+                                onSettingChange={onSettingChange}
+                                color={'light'}
+                            />
 
-                <LayoutButton
-                    mode="layout"
-                    bottomOnly={true}
-                    settings={settings}
-                    onSettingChange={onSettingChange}
-                    color={'black'}
-                />
-            </HStack>
-            <HStack space={"md"} mt={"$3"}>
-            {/* <LayoutButton
-                    mode="layout"
-                    bottomDrawer={true}
-                    settings={settings}
-                    onSettingChange={onSettingChange}
-                    color={'black'}
-                /> */}
-            </HStack>
-        </Box>
+                            <LayoutButton
+                                mode="light"
+                                bottomOnly={true}
+                                settings={settings}
+                                onSettingChange={onSettingChange}
+                                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">
+                            <Text>Menu Header</Text>
+                            <Switch
+                                onValueChange={(value) => {
+                                    console.log(value);
+                                    const newSettings = {
+                                        ...settings,
+                                        menuHeader: value,
+                                    };
+                                    onSettingChange(newSettings);
+                                }}
+                                isChecked={settings?.menuHeader}
+                                value={settings?.menuHeader}
+                            />
+                        </HStack>
+                    </Box>
+                </ScrollView>
+            </ActionsheetContent>
+        </Actionsheet>
     );
 };

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

@@ -5,8 +5,8 @@ const ThemeColorButton = ({ color, onSettingChange, settings }: any) => {
     return (
         <Pressable
             backgroundColor={color}
-            height={'$4'}
-            width={'$4'}
+            height={'$6'}
+            width={'$6'}
             borderRadius={'$sm'}
             onPress={() => {
                 let { primaryColor, ...rest } = settings;

package/src/components/NavigationComponent.tsx

@@ -111,7 +111,7 @@ export const NavigationContainerComponent = ({
         <NavigationContainer
             ref={navigationRef}
             linking={linking}
-            independent={independent}
+            // independent={independent}
             onReady={() => {
                 routeNameRef.current = navigationRef.isReady() ? navigationRef?.getCurrentRoute() : null;
                 const currentRoute: any = routeNameRef?.current;

package/src/components/WithConfiguration.tsx

@@ -25,7 +25,8 @@ export const WithConfiguration = (props: IWithConfigurationProps) => {
         configKey,
         overrides: { resource: props.settingsUri },
     });
-    const { data: permissions, loading: permissionLoading } = usePermissionAutoFetch();
+    // const { data: permissions, loading: permissionLoading } = usePermissionAutoFetch();
+    const { permissions, loading: permissionLoading } = usePermissionAutoFetch();
 
     const isPrivate = React.useMemo(
         () => IVisibility.Private === data?.resolveConfiguration,

package/src/components/WithPermission.tsx

@@ -29,8 +29,8 @@ export const WithPermission = ({
     alternative,
     render,
 }: IWithPermissionProps) => {
-    const { data: permissions, loading: permissionLoading } = usePermissionAutoFetch();
-
+    // const { data: permissions, loading: permissionLoading } = usePermissionAutoFetch();
+    const { permissions, loading: permissionLoading } = usePermissionAutoFetch();
     const hasPermission = React.useMemo(() => {
         return permissionKeys.some((key) => permissionTypes.includes(get(permissions?.resolveConfiguration, key)));
     }, [permissions, permissionTypes, permissionKeys]);

package/src/components/with-interactions-lifecycle-managed.tsx

@@ -14,7 +14,7 @@ const LoadingComponent = () => (
     </Center>
 );
 
-const LifecycleComponent = ({ children }) => {
+const LifecycleComponent = ({ children }: { children?: any }) => {
     const { authenticated } = isUserAuthenticated();
     if (authenticated) {
         return (
@@ -27,7 +27,7 @@ const LifecycleComponent = ({ children }) => {
     }
 };
 
-const IntractionComponent = ({ children, interationTime }) => {
+const IntractionComponent = ({ children, interationTime }: { children?: any; interationTime: number }) => {
     const { interactionsComplete, opacity, setInteractionsTimeOut } = useAfterInteractions();
     React.useEffect(() => {
         if (interationTime) setInteractionsTimeOut(interationTime);
@@ -51,7 +51,7 @@ const IntractionComponent = ({ children, interationTime }) => {
     );
 };
 
-const IntractionWithLifeCycleComponent = ({ children, interationTime }) => {
+const IntractionWithLifeCycleComponent = ({ children, interationTime }: { children?: any; interationTime: number }) => {
     const { interactionsComplete, opacity, setInteractionsTimeOut } = useAfterInteractions();
     React.useEffect(() => {
         if (interationTime) setInteractionsTimeOut(interationTime);

package/src/containers/layout/module.ts

@@ -1,6 +1,6 @@
 /* eslint-disable import/no-extraneous-dependencies */
 import { Feature } from '@common-stack/client-react';
-import { createStackNavigator } from '@react-navigation/stack';
+// import { createStackNavigator } from '@react-navigation/stack';
 import { ProLayout, AppFeatures, AppLayout } from './ProLayout';
 
 export { ProLayout, AppFeatures, AppLayout };
@@ -8,7 +8,7 @@ export { ProLayout, AppFeatures, AppLayout };
 const layoutConfig = {
     ['/']: {
         exact: false,
-        container: createStackNavigator(),
+        // container: createStackNavigator(),
         name: 'MainStack',
         props: {
             initialRouteName: 'MainStack.MainBottomTab',

package/src/utils/ThemeColor.ts

@@ -6,4 +6,14 @@ export const COLOR = {
     GREYISH_BLACK: '#1f1f1f',
 };
 
-export const THEMECOLOR = ['#1890ff', '#f5222d', '#fa541c', '#faad14', '#13c2c2', '#52c41a', '#2f54eb', '#722ed1'];
+export const THEMECOLOR = [
+    '#4a154b',
+    '#601e69',
+    '#1d1c1d',
+    '#36c5ef',
+    '#2db57c',
+    '#e01d5a',
+    '#ecb12f',
+    '#616061',
+    '#dcd9d4',
+];

package/src/utils/generateMobileNavigations.ts

@@ -66,10 +66,12 @@ export class GenerateMobileNavigations {
     #configFileData: any = {};
     #configFilePath: any;
     #appPath: string = 'app';
+    #isDefaultPackagePathMobileRoot: boolean;
     #mobileStackPath: string = 'mobile-stack-react';
     //#layoutSettings: any = process.env.LAYOUT_SETTINGS ? JSON.parse(process.env.LAYOUT_SETTINGS) : null;
     #appDirPath: any;
     #modules: any;
+    #initialRouteNameRootStack: string;
     #initialRouteName: string;
     #unauthenticatedComponentPath: string;
     #customTabBarPath: string;
@@ -84,11 +86,13 @@ export class GenerateMobileNavigations {
         this.#configFileData = config;
         // this.#layoutSettings = process.env.LAYOUT_SETTINGS ? JSON.parse(process.env.LAYOUT_SETTINGS) : null;
         this.#appPath = config?.commonPaths?.appPath ?? 'app';
+        this.#isDefaultPackagePathMobileRoot = config?.mobileConfig?.isDefaultPackagePathMobileRoot ?? false;
         this.#iconsRepository = config?.iconsRepository ?? '';
         this.#mobileStackPath = config?.mobileStackPath ?? 'mobile-stack-react';
         this.#appDirPath = path.join(path.dirname(configFilePath), this.#appPath);
         this.#modules = config?.modules ?? [];
         this.#initialRouteName = config?.mobileConfig?.initialRouteName ?? '';
+        this.#initialRouteNameRootStack = config?.mobileConfig?.initialRouteNameRootStack ?? 'MainStack';
         this.#unauthenticatedComponentPath = config?.mobileConfig?.unauthenticatedComponentPath ?? '';
         this.#customTabBarPath = config?.mobileConfig?.customTabBarPath ?? '';
         this.#customDrawerPath = config?.mobileConfig?.customDrawerPath ?? '';
@@ -155,10 +159,20 @@ export class GenerateMobileNavigations {
 
     async #getModulesRouteConfig({ modules }) {
         const allFilteredRoutes = [];
+        let pkgFile;
         for (const pkg of modules) {
-            const pkgPath = require.resolve(pkg);
-            const pkgDirPath = path.dirname(pkgPath);
-            const pkgFile = path.join(pkgDirPath, 'routes.json');
+            if (this.#isDefaultPackagePathMobileRoot) {
+                const pkgRootFilePath = path.join(
+                    path.join(path.dirname(this.#configFilePath), 'node_modules/lib'),
+                    pkg,
+                );
+                pkgFile = path.join(pkgRootFilePath, 'routes.json');
+            } else {
+                const pkgPath = require.resolve(pkg);
+                const pkgDirPath = path.dirname(pkgPath);
+                pkgFile = path.join(pkgDirPath, 'routes.json');
+            }
+
             if (fs.existsSync(pkgFile)) {
                 const fileModuleJSON: any = await readJsonFile(pkgFile);
                 if (fileModuleJSON) {
@@ -470,8 +484,24 @@ export class GenerateMobileNavigations {
                         const appReplacedRouteConfig = replacedRouteConfig ? Object.keys(replacedRouteConfig)?.map((k)=>({[k]:replacedRouteConfig[k]})) : [];
 
                         if (appReplacedRouteConfig) {
-                        const hostRouteConfig = appReplacedRouteConfig?.map((obj)=> Object.fromEntries(Object.entries(obj)?.filter(([key,val])=>key === '/' || key.startsWith('//'+layoutSettings.hostLayout))))?.filter(value => Object.keys(value).length !== 0)??[];
-                        const layoutRouteConfig = appReplacedRouteConfig?.map((obj)=> Object.fromEntries(Object.entries(obj)?.filter(([key,val])=>key === '/' || !key.startsWith('//'+layoutSettings.hostLayout))))?.filter(value => Object.keys(value).length !== 0)??[];
+                                  const hostRouteConfig = appReplacedRouteConfig.filter(item => {
+                                        return Object.keys(item).some(key =>
+                                        key === "/" ||
+                                        (key.startsWith("//" + layoutSettings.hostLayout) || key.startsWith("//:orgName/" + layoutSettings.hostLayout))
+                                        );
+                                    })?.filter((value) => Object.keys(value).length !== 0) ?? [];
+
+
+                                    const layoutRouteConfig = appReplacedRouteConfig.filter(item => {
+                                        return Object.keys(item).some(key =>
+                                        key === "/" ||
+                                        (!key.startsWith("//" + layoutSettings.hostLayout) && !key.startsWith("//:orgName/" + layoutSettings.hostLayout))
+                                        );
+                                    })?.filter((value) => Object.keys(value).length !== 0) ?? [];
+
+
+                        // const hostRouteConfig = appReplacedRouteConfig?.map((obj)=> Object.fromEntries(Object.entries(obj)?.filter(([key,val])=>key === '/' || key.startsWith('//'+layoutSettings.hostLayout))))?.filter(value => Object.keys(value).length !== 0)??[];
+                        // const layoutRouteConfig = appReplacedRouteConfig?.map((obj)=> Object.fromEntries(Object.entries(obj)?.filter(([key,val])=>key === '/' || !key.startsWith('//'+layoutSettings.hostLayout))))?.filter(value => Object.keys(value).length !== 0)??[];
                         const featureRouteConfig = defaultSettings?.layout == 'host-bottom' ? hostRouteConfig:layoutRouteConfig;
                         features.routeConfig = featureRouteConfig;
                         setMainFeatures(features);
@@ -841,7 +871,8 @@ export class GenerateMobileNavigations {
                   initialParams={${JSON.stringify(pkgRouteConfig?.props?.initialParams || {})}}
                   options={{...${options},...{${
                 pkgRouteConfig?.icon && Object.keys(pkgRouteConfig.icon)?.length && pkgRouteConfig?.icon?.name
-                    ? `drawerIcon: ({ focused }) => { 
+                    ? `drawerIcon: ({ color }) => { 
+                    const focused = color === '${pkgRouteConfig?.props?.options?.tabBarActiveTintColor}' ? true : false;
                      const SelectedIcon = DynamicIcons('${pkgRouteConfig?.icon?.name}');
                      return (<SelectedIcon 
                       {...{
@@ -1106,7 +1137,8 @@ export class GenerateMobileNavigations {
           initialParams={${JSON.stringify(pkgRouteConfig?.props?.initialParams || {})}}
           options={{...${options},...{${
                 pkgRouteConfig?.icon && Object.keys(pkgRouteConfig.icon)?.length && pkgRouteConfig?.icon?.name
-                    ? `tabBarIcon: ({ focused }) => { 
+                    ? `tabBarIcon: ({ color }) => { 
+                    const focused = color === '${pkgRouteConfig?.props?.options?.tabBarActiveTintColor}' ? true : false;
                      const SelectedIcon = DynamicIcons('${pkgRouteConfig?.icon?.name}');
                      return (<SelectedIcon 
                      {...{
@@ -1414,11 +1446,13 @@ export class GenerateMobileNavigations {
         const layoutRouteConfig = layoutConfigFileData[layoutType];
         const layoutRouteKey = Object.keys(layoutRouteConfig)[1];
         const appLayout = layoutRouteConfig[layoutRouteKey];
-
-        const initialRouteName =
-            layoutType === 'mixSide'
-                ? appLayout?.[appLayout?.key]?.props?.initialRouteName ?? 'MainStack.Layout.Home'
-                : appLayout?.props?.initialRouteName || 'MainStack.Home';
+        const initialRouteNameRootStack = this.#initialRouteNameRootStack;
+        const layoutInitialRouteName = this.#initialRouteName;
+        const initialRouteName = layoutInitialRouteName
+            ? layoutInitialRouteName
+            : layoutType === 'mixSide'
+            ? appLayout?.[appLayout?.key]?.props?.initialRouteName ?? 'MainStack.Layout.Home'
+            : appLayout?.props?.initialRouteName || 'MainStack.Home';
         const isShowTabs = layoutType === 'mixSide' || layoutType === 'bottom' ? true : false;
         const isShowDefalutHeader = layoutType === 'mixSide' ? true : false;
         const defaultHeaderProps = {
@@ -1627,7 +1661,7 @@ export class GenerateMobileNavigations {
         appComponent += `
          const AppNavigations = () => {
              return (
-                 <Stack.Navigator initialRouteName="${initialRouteName}">
+                 <Stack.Navigator initialRouteName="${initialRouteNameRootStack}">
                      <Stack.Screen
                          name="MainStack"
                          options={{ headerShown: false }}
@@ -1906,3 +1940,5 @@ export class GenerateMobileNavigations {
         return this.#createAppDirectory();
     }
 }
+
+export default GenerateMobileNavigations;