@admin-layout/gluestack-ui-mobile 6.5.1-alpha.0

package/src/components/Layout/compute.tsx

@@ -0,0 +1,384 @@
+import React from 'react';
+import { Feature } from '@common-stack/client-react';
+import { createDrawerNavigator } from '@react-navigation/drawer';
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+import { Drawer, BottomTabBar, Header } from './components';
+import {  AntDesign } from '@expo/vector-icons';
+import { navigationRef } from '@common-stack/client-react';
+
+const layoutSettingConfig =
+    process.APP_ENV && process.APP_ENV.LAYOUT_SETTINGS ? JSON.parse(process.APP_ENV.LAYOUT_SETTINGS) : null;
+
+const headerSettings: any = layoutSettingConfig
+    ? {
+          showToggle: layoutSettingConfig.hasOwnProperty('topLeftToggle')
+              ? layoutSettingConfig.topLeftToggle
+                  ? true
+                  : false
+              : true,
+          rightSettingToggle: layoutSettingConfig.hasOwnProperty('topRightSettingToggle')
+              ? layoutSettingConfig.topRightSettingToggle
+                  ? true
+                  : false
+              : true,
+      }
+    : { showToggle: true, rightSettingToggle: true };
+
+const drawerConfig = (props: any) => {
+    let drawerProps = props?.drawerConfig??null;
+    return {
+        ['//main_drawer']: {
+            exact: false,
+            container: createDrawerNavigator(),
+            name: 'Layout',
+            props: {
+                initialRouteName: 'MainStack.Layout.Home',
+                drawerContent: (props: any) => {
+                    let currentRoute = navigationRef.isReady() ? navigationRef?.getCurrentRoute() : null;
+                    let currentOptions = currentRoute?.params?.options
+                        ? JSON.parse(currentRoute?.params?.options)
+                        : null;
+                    let drawerOptions = { ...currentOptions?.drawerOption, ...drawerProps?.drawerOption };
+                    return React.createElement(
+                        drawerProps?.drawerContent ?? Drawer,
+                        Object.assign({}, props, {
+                            title: 'ClockBook',
+                            titleColor: 'black',
+                            logout: true,
+                            redirect: 'MainStack.Login',
+                            ...drawerOptions,
+                        }),
+                    );
+                },
+                screenOptions: (options: any) => {
+                    let currentRoute = navigationRef.isReady() ? navigationRef?.getCurrentRoute() : null;
+                    let currentOptions = currentRoute?.params?.options
+                        ? JSON.parse(currentRoute?.params?.options)
+                        : null;
+                    return {
+                        headerShown: true,
+                        header: (props: any) => (
+                            <Header
+                                showToggle={
+                                    headerSettings && headerSettings.showToggle ? headerSettings.showToggle : false
+                                }
+                                right={
+                                    headerSettings && headerSettings.rightSettingToggle
+                                        ? headerSettings.rightSettingToggle
+                                        : false
+                                }
+                                {...props}
+                            />
+                        ),
+                        drawerIcon: 'grid',
+                        drawerStyle: currentOptions?.drawerStyle ?? drawerProps?.drawerStyle ?? {},
+                        gestureEnabled: currentOptions?.gestureEnabled ?? true,
+                        swipeEnabled: currentOptions?.swipeEnabled ?? true,
+                    };
+                },
+            },
+        },
+    };
+};
+
+const bottomTabConfig = (props: any) => {
+    let tabBarProps = props?.tabBarConfig??null;
+    return { 
+        ['//bottom_tab']: {
+            exact: false,
+            container: createBottomTabNavigator(),
+            name: 'Layout',
+            props: {
+                initialRouteName: 'MainStack.Layout.Home',
+                //tabBar: (props: any) => <BottomTabBar {...props} />,
+                tabBar: (props: any) => {
+                    return React.createElement(
+                        tabBarProps?.bottomTabBar ?? BottomTabBar,
+                        Object.assign({}, props),
+                    );
+                },
+                screenOptions: ({ route }: any) => {
+                    return {
+                        headerShown: false,
+                        title: 'Home',
+                        headerTitle: 'Home',
+                        tabBarActiveTintColor: '#4c87f9',
+                        tabBarInactiveTintColor: 'black',
+                        tabBarIcon: ({ color }: { color: any }) => <AntDesign name={'search1'} color={color} size={24} />,
+                    };
+                },
+            },
+    },
+}};
+
+const hostBottomTabConfig = (props: any) => {
+    let tabBarProps = props?.tabBarConfig??null;
+    return {
+    ['//host_tab']: {
+        container: createBottomTabNavigator(),
+        exact: false,
+        name: 'Layout',
+        props: {
+            initialRouteName: 'MainStack.Layout.Home',
+            //tabBar: (props: any) => <BottomTabBar {...props} />,
+            tabBar: (props: any) => {
+                return React.createElement(
+                    tabBarProps?.bottomTabBar ?? BottomTabBar,
+                    Object.assign({}, props),
+                );
+            },
+            screenOptions: (props: any) => {
+                return {
+                    headerShown: false,
+                    title: 'Home',
+                    headerTitle: 'Home',
+                    tabBarActiveTintColor: '#4c87f9',
+                    tabBarInactiveTintColor: 'black',
+                    tabBarIcon: ({ color }: { color: any }) => <AntDesign name={'search1'} color={color} size={24} />,
+                };
+            },
+        },
+    },
+}};
+
+const drawerBottomTabConfig = (props: any) => {
+    let drawerProps = props?.drawerConfig??null;
+    let tabBarProps = props?.tabBarConfig??null;
+    return {
+        ['//main_drawer']: {
+            exact: false,
+            container: createDrawerNavigator(),
+            name: 'Layout',
+            props: {
+                initialRouteName: 'MainStack.Layout.MainBottomTab',
+                drawerContent: (props: any) => {
+                    let currentRoute = navigationRef.isReady() ? navigationRef?.getCurrentRoute() : null;
+                    let currentOptions = currentRoute?.params?.options
+                        ? JSON.parse(currentRoute?.params?.options)
+                        : null;
+                    let drawerOptions = { ...currentOptions?.drawerOption, ...drawerProps?.drawerOption };
+                    return React.createElement(
+                        drawerProps?.drawerContent ?? Drawer,
+                        Object.assign({}, props, {
+                            title: 'ClockBook',
+                            titleColor: 'black',
+                            logout: true,
+                            redirect: 'MainStack.Login',
+                            ...drawerOptions,
+                        }),
+                    );
+                },
+                screenOptions: (options: any) => {
+                    let currentRoute = navigationRef.isReady() ? navigationRef?.getCurrentRoute() : null;
+                    let currentOptions = currentRoute?.params?.options
+                        ? JSON.parse(currentRoute?.params?.options)
+                        : null;
+                    return {
+                        headerShown: false,
+                        drawerIcon: 'grid',
+                        drawerStyle: currentOptions?.drawerStyle ?? drawerProps?.drawerStyle ?? {},
+                        gestureEnabled: currentOptions?.gestureEnabled ?? true,
+                        swipeEnabled: currentOptions?.swipeEnabled ?? true,
+                    };
+                },
+            },
+        },
+        ['//main_drawer/bottom_tab']: {
+            container: createBottomTabNavigator(),
+            exact: false,
+            name: 'MainBottomTab',
+            props: {
+                initialRouteName: 'MainStack.MainDrawer.MainBottomTab.Home',
+                //tabBar: (props: any) => <BottomTabBar {...props} />,
+                tabBar: (props: any) => {
+                    return React.createElement(
+                        tabBarProps?.bottomTabBar ?? BottomTabBar,
+                        Object.assign({}, props),
+                    );
+                },
+                screenOptions: ({ route }: any) => {
+                    return {
+                        headerShown: true,
+                        header: (props: any) => (
+                            <Header
+                                showToggle={
+                                    headerSettings && headerSettings.showToggle ? headerSettings.showToggle : false
+                                }
+                                right={
+                                    headerSettings && headerSettings.rightSettingToggle
+                                        ? headerSettings.rightSettingToggle
+                                        : false
+                                }
+                                {...props}
+                            />
+                        ),
+                        title: 'Home',
+                        headerTitle: 'Home',
+                        tabBarActiveTintColor: '#ff5a60',
+                        tabBarInactiveTintColor: 'black',
+                    };
+                },
+            },
+        },
+    };
+};
+
+const bottomTabDrawerConfig = (props: any) => {
+    let drawerProps = props?.drawerConfig??null;
+    let tabBarProps = props?.tabBarConfig??null;
+
+    return { 
+        ['//bottom_tab']: {
+            container: createBottomTabNavigator(),
+            exact: false,
+            name: 'Layout',
+            props: {
+                initialRouteName: 'MainStack.Layout.Home',
+               // tabBar: (props: any) => <BottomTabBar {...props} />,
+               tabBar: (props: any) => {
+                return React.createElement(
+                    tabBarProps?.bottomTabBar ?? BottomTabBar,
+                    Object.assign({}, props),
+                );
+                },
+                screenOptions: ({ route }: any) => {
+                    return {
+                        headerShown: true,
+                        header: (props: any) => (
+                            <Header
+                                showToggle={
+                                    headerSettings && headerSettings.showToggle ? headerSettings.showToggle : false
+                                }
+                                right={
+                                    headerSettings && headerSettings.rightSettingToggle
+                                        ? headerSettings.rightSettingToggle
+                                        : false
+                                }
+                                {...props}
+                            />
+                        ),
+                        title: 'Home',
+                        headerTitle: 'Home',
+                        tabBarActiveTintColor: '#ff5a60',
+                        tabBarInactiveTintColor: 'black',
+                    };
+                },
+                // screenOptions: ({ route }: any) => {
+                //     return {
+                //         headerShown: false,
+                //         //header: (props: any) => <Header showToggle={true} right={true} {...props} />,
+                //         title: 'Home',
+                //         headerTitle: 'Home',
+                //         tabBarActiveTintColor: '#ff5a60',
+                //         tabBarInactiveTintColor: 'black',
+                //     };
+                // },
+            },
+        },
+        // ['//bottom_tab/main_drawer']: {
+        //     exact: false,
+        //     container: createDrawerNavigator(),
+        //     name: 'MainDrawer',
+        //     props: {
+        //         initialRouteName: 'MainStack.MainBottomTab.MainDrawer.Home',
+        //         drawerContent: (props: any) => (
+        //             <Drawer
+        //             {...props}
+        //             title={'ClockBook'}
+        //             titleColor={'black'}
+        //             logout={true}
+        //             redirect={'MainStack.Login'}
+        //             />
+        //             ),
+        //             screenOptions:(options:any) =>{
+    
+        //                 return{
+        //                     headerShown: true,
+        //                     header: (props: any) => <Header showToggle={true} right={true} {...props} />,
+        //                     drawerIcon: 'grid',
+        //                 }
+        //             }
+        //         },
+        //     },
+    };
+
+}
+
+// const bottomTabDrawerConfig = { 
+//     ['//bottom_tab']: {
+//         container: createBottomTabNavigator(),
+//         exact: false,
+//         name: 'Layout',
+//         props: {
+//             initialRouteName: 'MainStack.Layout.Home',
+//             tabBar: (props: any) => <BottomTabBar {...props} />,
+//             screenOptions: ({ route }: any) => {
+//                 return {
+//                     headerShown: false,
+//                     //header: (props: any) => <Header showToggle={true} right={true} {...props} />,
+//                     title: 'Home',
+//                     headerTitle: 'Home',
+//                     tabBarActiveTintColor: '#ff5a60',
+//                     tabBarInactiveTintColor: 'black',
+//                 };
+//             },
+//         },
+//     },
+//     // ['//bottom_tab/main_drawer']: {
+//     //     exact: false,
+//     //     container: createDrawerNavigator(),
+//     //     name: 'MainDrawer',
+//     //     props: {
+//     //         initialRouteName: 'MainStack.MainBottomTab.MainDrawer.Home',
+//     //         drawerContent: (props: any) => (
+//     //             <Drawer
+//     //             {...props}
+//     //             title={'ClockBook'}
+//     //             titleColor={'black'}
+//     //             logout={true}
+//     //             redirect={'MainStack.Login'}
+//     //             />
+//     //             ),
+//     //             screenOptions:(options:any) =>{
+
+//     //                 return{
+//     //                     headerShown: true,
+//     //                     header: (props: any) => <Header showToggle={true} right={true} {...props} />,
+//     //                     drawerIcon: 'grid',
+//     //                 }
+//     //             }
+//     //         },
+//     //     },
+// };
+
+// export const appDrawerFeature = new Feature({
+//     routeConfig: drawerConfig as any,
+// });
+
+// export const appDrawerBottomTabFeature = new Feature({
+//     routeConfig: drawerBottomTabConfig as any,
+// });
+
+export const appDrawerFeature = (props: any) =>
+    new Feature({
+        routeConfig: drawerConfig(props) as any,
+    });
+
+export const appDrawerBottomTabFeature = (props: any) =>
+    new Feature({
+        routeConfig: drawerBottomTabConfig(props) as any,
+    });
+
+export const appBottomTabFeature = (props: any) => 
+  new Feature({
+    routeConfig: bottomTabConfig(props) as any,
+  });
+
+export const appHostBottomTabFeature =  (props: any) => 
+   new Feature({
+    routeConfig: hostBottomTabConfig(props) as any,
+  });
+
+export const appBottomTabDrawerFeature = new Feature({
+    routeConfig: bottomTabDrawerConfig as any,
+});

package/src/components/Layout/eslint.json

@@ -0,0 +1 @@
+{}

package/src/components/Layout/index.ts

@@ -0,0 +1,5 @@
+import BasicLayout from './components/BasicLayout';
+
+export * from './components';
+export { BasicLayout };
+export type { ProSettings as Settings } from './components/defaultSettings';

package/src/components/Layout/typings.ts

@@ -0,0 +1 @@
+export * from '@admin-layout/client/lib/interfaces/typings';

package/src/components/NavigationComponent.tsx

@@ -0,0 +1,154 @@
+import { LOCATION_CHANGE as LOCATION_CHANGE_SUCCESS } from '@common-stack/remix-router-redux';
+import { NavigationContainer, LinkingOptions } from '@react-navigation/native';
+import { cloneDeep, merge } from 'lodash-es';
+import React, { MutableRefObject, ReactElement, useRef } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { navigationRef } from '@common-stack/client-react';
+
+interface INavigationContainerComponentProps {
+    children: ReactElement[];
+    configurableRoutes: Record<string, any>[];
+    independent?: boolean;
+    linking?: LinkingOptions<any>;
+}
+
+interface INavigationContainerRef {
+    name: string;
+    key: string;
+    params?: Readonly<object | undefined>;
+}
+
+export const getPath = (routeName: string, configurableRoutes: Record<string, any>[]) => {
+    let resultantPath = '';
+    configurableRoutes.forEach((item) => {
+        if (item.children?.length) {
+            const value = getPath(routeName, item.children);
+            if (value) {
+                resultantPath = value;
+            }
+        }
+        if (item.navigationRouteName === routeName) {
+            resultantPath = item.path;
+        }
+    });
+    return resultantPath;
+};
+
+export const configurableRoutesWithNavigationRouteName = (
+    configurableRoutes: Record<string, any>[],
+    parentName: string = '',
+) => {
+    return configurableRoutes.map((item) => {
+        const resultantName = parentName;
+        const navigationRouteName = resultantName.length ? `${resultantName}.${item.name}` : item.name;
+        item.navigationRouteName = navigationRouteName;
+        if (item.children) {
+            item.children = configurableRoutesWithNavigationRouteName(item.children, navigationRouteName);
+        }
+        return item;
+    });
+};
+
+export const useLocationChange = () => {
+    const dispatch = useDispatch();
+    const [locationChange, setLocationChange] = React.useState<any>(null);
+    const platformState = useSelector((state) => (state as any).platform);
+
+    React.useEffect(() => {
+        if (locationChange) setLocation(locationChange);
+    }, [locationChange]);
+
+    const setLocation = ({ configurableRoutes, previousRoute = null, orgName = null }: any) => {
+        const currentRoute: any = navigationRef.isReady() ? navigationRef?.getCurrentRoute() : null;
+        const currentRouteName = currentRoute ? currentRoute!?.name : null;
+        const configuredRoutes = configurableRoutesWithNavigationRouteName(configurableRoutes);
+        const currentPath = currentRouteName ? getPath(currentRouteName as string, configuredRoutes) : null;
+        const previousPath = previousRoute ? getPath(previousRoute?.current!.name, configuredRoutes) : null;
+        const currParams = {
+            ...(currentRoute!.params || {}),
+            orgName: orgName ? orgName : currentRoute!.params?.orgName ?? platformState?.orgName,
+        };
+
+        navigationRef?.setParams(currParams);
+
+        dispatch({
+            type: LOCATION_CHANGE_SUCCESS,
+            payload: {
+                currentRoute: {
+                    path: currentPath,
+                    params: currParams,
+                },
+                previousRoute: {
+                    path: previousPath,
+                    params: previousRoute?.current?.params ?? { orgName: '' },
+                },
+            },
+        });
+    };
+
+    return { setLocationChange };
+};
+
+export const NavigationContainerComponent = ({
+    children,
+    configurableRoutes,
+    independent,
+    linking,
+}: INavigationContainerComponentProps): ReactElement => {
+    const routeNameRef = useRef() as MutableRefObject<INavigationContainerRef | undefined>;
+    const dispatch = useDispatch();
+    const platformState = useSelector((state) => (state as any).platform);
+    const { setLocationChange } = useLocationChange();
+    //const user = useSelector((state: any) => state.user);
+    return (
+        <NavigationContainer
+            ref={navigationRef}
+            linking={linking}
+            independent={independent}
+            onReady={() => {
+                routeNameRef.current = navigationRef.isReady() ? navigationRef?.getCurrentRoute() : null;
+                const currentRoute: any = routeNameRef?.current;
+                setLocationChange({
+                    configurableRoutes,
+                    orgName: platformState?.orgName ?? currentRoute?.params?.orgName ?? '',
+                });
+            }}
+            onStateChange={async () => {
+                const previousRoute: any = routeNameRef?.current ? cloneDeep(routeNameRef) : null;
+                const currentRoute: any = navigationRef.isReady() ? navigationRef?.getCurrentRoute() : null;
+                const previousRouteName = previousRoute ? previousRoute?.current!.name : null;
+                const currentRouteName = currentRoute ? currentRoute!?.name : null;
+
+                const configuredRoutes = configurableRoutesWithNavigationRouteName(configurableRoutes);
+                const currentPath = currentRouteName ? getPath(currentRouteName as string, configuredRoutes) : null;
+                const previousPath = previousRoute ? getPath(previousRoute?.current!.name, configuredRoutes) : null;
+                const currParams = {
+                    ...(currentRoute!.params || {}),
+                    orgName: currentRoute!.params?.orgName || platformState?.orgName,
+                };
+                //if (previousRouteName && currentRouteName && previousRouteName !== currentRouteName) {
+                if (previousPath !== currentPath) {
+                    routeNameRef.current = currentRoute;
+
+                    setLocationChange({ configurableRoutes, previousRoute });
+
+                    // dispatch({
+                    //     type: LOCATION_CHANGE_SUCCESS,
+                    //     payload: {
+                    //         currentRoute: {
+                    //             path: currentPath,
+                    //             params: currParams,
+                    //         },
+                    //         previousRoute: {
+                    //             path: previousPath,
+                    //             params: previousRoute?.current?.params ?? { orgName: '' },
+                    //         },
+                    //     },
+                    // });
+                }
+            }}
+        >
+            {children}
+        </NavigationContainer>
+    );
+};

package/src/components/PluginArea.tsx

@@ -0,0 +1,11 @@
+import { PluginArea } from '@common-stack/client-react';
+import { View } from 'react-native';
+import * as React from 'react';
+
+export const MobilePluginArea = () => {
+  return (
+    <View style={{ display: "none" }}>
+      <PluginArea />
+    </View>
+  )
+}

package/src/components/ToastAlert.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+
+import {
+    Toast,
+    VStack,
+    ToastTitle,
+    ToastDescription,
+    Pressable,
+    Icon,
+    CloseIcon,
+} from '@gluestack-ui/themed';
+
+interface IToast {
+    id: string;
+    title: string;
+    status?: any;
+    description?: string;
+    isClosable?: boolean;
+    toast?: any;
+    variant?:any
+}
+
+// variants:
+// accent,
+// solid,
+// outline
+
+export const ToastAlert = ({ id, status = 'info', title='', description = '',variant='solid', isClosable, toast=null }: IToast) => {
+    const toastId = 'toast-' + id;
+    const actionType = status || 'info';
+    return (
+        <Toast nativeID={toastId} variant={variant} action={actionType}>
+            <VStack space="xs">
+                <ToastTitle>{title}</ToastTitle>
+                {description && <ToastDescription>{description}</ToastDescription>}
+            </VStack>
+            {isClosable && toast ? (
+                <Pressable mt="$1" onPress={() => toast?.close(id)}>
+                    <Icon as={CloseIcon} color="$coolGray50" />
+                </Pressable>
+            ) : null}
+        </Toast>
+    );
+};

package/src/components/index.ts

@@ -0,0 +1,9 @@
+export * from './Layout';
+export * from './PluginArea';
+export * from './ApplicationErrorHandler';
+export * from './ApplicationErrorFillWrapper';
+export * from './Fallback';
+export * from './ErrorBounday';
+export * from './NavigationComponent';
+export * from './ToastAlert';
+export * from './with-interactions-managed';

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

@@ -0,0 +1,33 @@
+import React, { ComponentType } from 'react';
+import { Transition, Transitioning } from 'react-native-reanimated';
+import { useAfterInteractions } from '../hooks/use-after-interactions';
+import { Box, Spinner, Text } from '@gluestack-ui/themed';
+import hoistNonReactStatics from 'hoist-non-react-statics';
+
+export function withInteractionsManaged<Props>(
+    Component: ComponentType<Props>,
+    Placeholder: ComponentType | null = null,
+) {
+    const Wrapped = (props: Props) => {
+        const { transitionRef, interactionsComplete } = useAfterInteractions();
+        const LoadingComponent = () => <Box flex={1}>{<Spinner color={'blue.500'} />}</Box>;
+        console.log('interactionsComplete', interactionsComplete);
+        return (
+            <Transitioning.View
+                transition={
+                    <Transition.Together>
+                        <Transition.Change interpolation="easeInOut" />
+                        <Transition.In type="fade" />
+                    </Transition.Together>
+                }
+                style={{ flex: 1 }}
+                ref={transitionRef}
+            >
+                {interactionsComplete ? <Component {...props} /> : Placeholder ? <Placeholder /> : <LoadingComponent />}
+            </Transitioning.View>
+        );
+    };
+
+    hoistNonReactStatics(Wrapped, Component);
+    return Wrapped;
+}

package/src/config/config.ts

@@ -0,0 +1,17 @@
+export const config = {
+    LAYOUT_SETTINGS: {
+        logo: 'https://cdmbase.s3.ca-central-1.amazonaws.com/favicon-new-128.svg',
+        navTheme: 'light', // 'dark'
+        primaryColor: '#3FA541C', // '#1890ff'
+        layout: 'side',
+        contentWidth: 'Fluid',
+        fixedHeader: false,
+        fixSiderbar: true,
+        colorWeak: false,
+        title: 'CDMBase LLC',
+        iconfontUrl: '',
+        language: 'en-US',
+        topLeftToggle: true,
+        topRightSettingToggle: true,
+    },
+};

package/src/config/index.ts

@@ -0,0 +1 @@
+export * from './config';

package/src/constants/routes.ts

@@ -0,0 +1,3 @@
+export enum MobileRoutes {
+    Org = '/o/:orgName',
+}