@fto-consult/expo-ui 1.0.4

package/src/navigation/Drawer/items/SyncDataItem.js

@@ -0,0 +1,20 @@
+import Icon from "$ecomponents/Icon";
+import React from "$react";
+import sync from "$database/sync";
+//import SyncInfos from "$ecomponents/Data/SyncInfos";
+
+export default {
+    icon : 'cloud-sync',
+    label : 'Synchroniser',
+    /*right :  (props) => <Icon 
+        {...props}
+        icon ="information-outline" 
+        title="Cliquez pour afficher les informations relatives à la synchronisation des données." 
+    />,*/
+    onPress:(e)=>{
+        React.stopEventPropagation(e);
+        sync.run();
+        return false;
+        //mountDialog(<SyncInfos key={uniqid("sync-infos-k")}/>,"synch-data-dialog-id-mount")/>
+    } ,
+}

package/src/navigation/Drawer/items/index.js

@@ -0,0 +1,23 @@
+import { isRouteActive} from "$enavigation/utils";
+import items from "./items";
+
+let CACHED_ITEMS = []
+
+export const refresh = ()=>{
+    CACHED_ITEMS = items();
+    return CACHED_ITEMS;
+}
+
+export default function mainSidebarItems(options){
+    if(!CACHED_ITEMS.length){
+        refresh();
+    }
+    return CACHED_ITEMS;
+};
+
+export const isItemActive = (opts)=>{
+    if(isRouteActive(opts)){
+        return true;
+    }   
+    return false;
+}

package/src/navigation/Drawer/items/items.js

@@ -0,0 +1,31 @@
+import APP from "$capp";
+
+const refresh = (force)=>{
+    const name = APP.getName();
+    return [
+        {
+            label : name,
+            icon : 'view-dashboard',
+            title : 'Dashboard',
+            routeName : "Home",
+            divider : true,
+        },
+        {
+            divider : true,
+        },
+        {
+            key : 'dataHelp',
+            label : 'Aide',
+            section : true,
+            divider : false,
+            items : [
+                /*{
+                    icon : 'timeline-help',
+                    label : name+", Mises à jour",
+                },*/
+            ]
+        }
+    ]
+}
+
+export default refresh;

package/src/navigation/Drawer/utils.js

@@ -0,0 +1,18 @@
+import * as React from "react";
+import {closeDrawer as close} from "$ecomponents/Drawer/utils";
+let drawerRef = null;
+
+
+export {drawerRef};
+
+export const createDrawerRef = ()=>{
+    const ref = React.useRef(null);
+    React.useEffect(()=>{
+        drawerRef = ref.current;
+    },[ref.current]);
+    return ref;
+}
+
+export const closeDrawer = (cb,force)=>{
+    return close(drawerRef,cb,force);
+}

package/src/navigation/index.js

@@ -0,0 +1,45 @@
+export * from "./utils";
+import initScreens from "$escreens";
+import {handleContent,sanitizeName} from '$escreens';
+import {Stack,setInitialRouteName } from "./utils";
+import React from "$react";
+import DrawerNavigator from "./Drawer";
+
+export default function NavigationComponent (props){
+    let {state,hasGetStarted,initialRouteName,extra} = props;
+    const allScreens = initScreens({Factory:Stack,ModalFactory:Stack,filter:({name,Screen})=>{
+        return (name === initialRouteName? defaultObj(extra) : true);
+    }});
+    
+    initialRouteName = sanitizeName(initialRouteName);
+    const drawerScreens = handleContent({screens:allScreens,hasGetStarted,initialRouteName,state,Factory:Stack});
+    const stackScreens = handleContent({screens:allScreens.modals,hasGetStarted,initialRouteName,state,Factory:Stack});
+    if(!drawerScreens.length && !stackScreens.length){
+       willRenderNavigation = false;
+       console.error("apps will stuck on splash screen because any valid screen has been found on screens ",allScreens);
+    }
+    setInitialRouteName(initialRouteName);
+    const opts = {
+        headerShown : false,
+        header : ()=> null,
+    }
+    return <DrawerNavigator {...props}>
+            {<Stack.Navigator 
+                initialRouteName={initialRouteName} 
+                screenOptions={opts}
+            >
+                {<Stack.Group screenOptions={{...opts}}>
+                    {drawerScreens}
+                </Stack.Group>}
+                <Stack.Group
+                    key = {"MODAL-DRAWERS-SCREENS"}
+                    screenOptions={{
+                        ...opts,
+                        presentation: 'transparentModal', 
+                    }}
+                >
+                    {stackScreens}
+                </Stack.Group>
+            </Stack.Navigator> }
+    </DrawerNavigator>
+}

package/src/navigation/utils.js

@@ -0,0 +1 @@
+export * from "$cnavigation/utils";

package/src/screens/Auth/index.js

@@ -0,0 +1,31 @@
+
+import {SIGN_IN} from "./routes"
+import Screen from "$escreen";
+import {GROUP_NAMES} from "$escreens/utils";
+import Login from "$eauth/Login";
+import {getScreenProps} from "$enavigation/utils";
+import {getTitle} from "./utils";
+
+
+function AuthSignInScreen(_props){
+    const props = getScreenProps(_props);
+    const title = getTitle();
+    return <Screen 
+        title = {title}
+        appBarProps = {{
+            title,backAction:false
+        }}
+        contentContainerStyle = {{justifyContent:'center',alignItems:'center'}}
+    >
+        <Login
+            {...props}
+        />
+    </Screen>
+}
+
+AuthSignInScreen.screenName = SIGN_IN;
+AuthSignInScreen.groupName = GROUP_NAMES.PUBLIC;
+AuthSignInScreen.modal = true;
+AuthSignInScreen.allowDrawer = false;
+
+export default [AuthSignInScreen];

package/src/screens/Auth/routes.js

@@ -0,0 +1,9 @@
+export const SIGN_IN = "AuthSignIn";
+
+export const LOGIN = SIGN_IN;
+
+export const SIGN_ON = "AuthSignOn";
+
+export const LOG_OUT = SIGN_ON;
+
+export default {SIGN_IN,SIGN_ON,LOGIN,LOG_OUT}

package/src/screens/Auth/utils.js

@@ -0,0 +1,5 @@
+import APP from "$capp/instance";
+import i18n from "$i18n";
+
+export const getTitle = x => APP.name+" "+APP.version+"/"+i18n.lang("login");
+export const title = getTitle();

package/src/screens/index.js

@@ -0,0 +1,201 @@
+import {defaultBool,defaultArray,defaultVal,isObj,isNonNullString,defaultObj,isArray,defaultStr} from "$utils";
+import {sanitizeName,GROUP_NAMES} from "./utils";
+import mainScreens from "$screens/mainScreens"
+import React from "$react";
+import { BackHandler } from "react-native";
+import APP from "$capp";
+import {useDrawer} from "$ecomponents/Drawer";
+import {navigationRef,getScreenProps,setRoute,setActiveNavigation,setScreenOptions,goBack} from "$enavigation/utils";
+
+export * from "./utils";
+
+export const SCREEN_OPTIONS = {};
+
+
+
+export const handleScreen = ({Screen,Factory,ModalFactory,result,useTheme,filter,index})=>{
+    result = defaultObj(result);
+    result.screens = defaultObj(result.screens);
+    result.groups = defaultObj(result.groups);
+    result.modals = defaultObj(result.modals);
+    let screens = result.screens,groups = result.groups;
+    let screenName = undefined
+    let screenOptions = undefined;
+    if(Array.isArray(Screen)){
+        Screen.map((S,i)=>{
+            return handleScreen({Screen:S,Factory,ModalFactory,result,groups,useTheme,filter,index:i});
+        })
+    } else if(typeof Screen ==='object' && React.isComponent(Screen.Component) && isNonNullString(Screen.screenName)){
+        screenName = Screen.screenName;
+        screenOptions = Screen.options;
+        Screen = Screen.Component;
+    }
+    if(React.isComponent(Screen)) {
+        screenName = defaultStr(screenName,Screen.screenName);
+        if(isNonNullString(screenName)){
+            let name = screenName;
+            let sanitizedName = sanitizeName(screenName);
+            let extra = filter({Screen,name,sanitizedName}),
+            authRequired = !!Screen.authRequired;
+            if(extra ===false){
+                return null;
+            }
+            ///le groupe d'écran par défaut
+            let groupName = defaultStr(Screen.groupName,GROUP_NAMES.DEFAULT).toUpperCase().trim();
+            if(!GROUP_NAMES[groupName]){
+                groupName = GROUP_NAMES.DEFAULT
+            }
+            if(!authRequired){
+                groupName = groupName || GROUP_NAMES.PUBLIC;
+            } else{
+                groupName = GROUP_NAMES.PRIVATE;
+                authRequired = true;
+            }
+            groups[groupName] = defaultObj(groups[groupName]);
+            groups[groupName][sanitizeName] = name;
+            Screen.groupName = groupName;
+            let screensGroups = screens,ScreenComponent=Factory.Screen;
+            if((Screen.Modal === true || Screen.modal === true)){
+                screensGroups = result.modals;
+                ScreenComponent = ModalFactory.Screen;
+                Screen.isModalScreen = true;
+            }
+            screensGroups[groupName] = defaultArray(screensGroups[groupName]);
+            screensGroups[groupName].push(<ScreenComponent key={sanitizedName} name={sanitizedName} options={args=>{
+                const options = typeof Screen.options === 'function'? Screen.options(args) : typeof screenOptions ==='function'? screenOptions(args) : defaultObj(Screen.options,screenOptions);
+                SCREEN_OPTIONS[sanitizedName] = options;
+                options.withAppBar = Screen.isModalScreen ? true : false;
+                if(options.headerShown === false || Screen.headerShown === false){
+                    options.header = x=>null;
+                }
+                options.elevation = typeof options.elevation =='number'? options.elevation : typeof Screen.elevation =='number'? Screen.elevation : undefined;
+                options.back = args.navigation.canGoBack();
+                const {title,subtitle} = getScreenProps(args);
+                options.title = defaultVal(options.title,title);
+                options.subtitle = defaultVal(options.subtitle,subtitle);
+                return options;
+            }}>
+                {props =>{
+                    const options = defaultObj(SCREEN_OPTIONS[sanitizedName]);
+                    const {drawerRef} = useDrawer()
+                    const {navigation,route} = props;
+                    setActiveNavigation(navigation);
+                    setRoute(route);
+                    React.useEffect(()=>{
+                        const unsubscribe = navigation.addListener('focus', (a) => {
+                            APP.trigger(APP.EVENTS.SCREEN_FOCUS,{
+                                screenName,
+                                sanitizedName,
+                                options,
+                            })
+                        });
+                        const unsubscribeBlur =  navigation.addListener('blur', (a) => {
+                            APP.trigger(APP.EVENTS.SCREEN_BLUR,{
+                                screenName,
+                                sanitizedName,
+                                options,
+                            })
+                        });
+                        const backAction = (a) => {
+                            if(drawerRef && drawerRef.current.canToggle() && drawerRef.current.isOpen()){
+                                drawerRef.current.closeDrawer();
+                                return true;
+                            }
+                            let isGoingBack = false;
+                            if(navigationRef.canGoBack()){
+                                if(isGoingBack) return true;
+                                isGoingBack = true;
+                                const opts = navigationRef.getCurrentOptions();
+                                const aProps = defaultObj(opts.appBarProps);
+                                goBack({...opts,...aProps,...defaultObj(aProps.appBarProps)});
+                                isGoingBack = false;
+                                return true;
+                            }
+                            APP.trigger(APP.EVENTS.BACK_BUTTON,{groupName,route:navigationRef.getCurrentRoute(),screenName:sanitizedName,source:'screen'});
+                            return true;
+                        };
+                        const subscription = BackHandler.addEventListener('hardwareBackPress', backAction);
+                        return ()=>{    
+                            if(unsubscribe){
+                                unsubscribe();
+                            }
+                            if(unsubscribeBlur){
+                                unsubscribeBlur();
+                            }
+                            if(subscription?.remove)subscription.remove();
+                            return BackHandler.removeEventListener('hardwareBackPress', backAction);
+                        }
+                    },[]);
+                    setScreenOptions(options);
+                    const allowDrawer = typeof options.allowDrawer ==='boolean'? options.allowDrawer : typeof Screen.allowDrawer =='boolean'? Screen.allowDrawer : Screen.isModalScreen == true ? false : true;
+                    return <>
+                        <Screen authRequired={authRequired||allowDrawer} backAction={Screen.isModalScreen} modal={Screen.isModalScreen} allowDrawer={allowDrawer} withDrawer = {allowDrawer !== false ? true : false} {...props} screenName={sanitizedName} extra ={defaultObj(extra)} options={options} />
+                    </>
+                }}
+            </ScreenComponent>)
+        } else {
+            console.error("Aucun nom définit pour l'écran ",Screen,index,". cet écran ne pourra pas être pris en compte dans l'application et peut provoquer des bugs.")
+        }
+    }
+    return {screens,groups}
+}
+
+
+/**** cette fonction a pour but d'initialiser les écrans de l'application
+ * @param Factory {typeof Factory : voir @https://reactnavigation.org/}
+ * @param screens {Object {screns:{screens:{},groups:{}}}} l'objet dans lequel le screensat sera retourné
+ * @param screens {array} la liste des écrans à rendre dynamiquement dans le FactoryContainer
+ * @param useTheme {boolean} si le composant sera wrapper par le hook withTheme de react-native-paper
+ * @return {object} : objet comportant deux propriétés : 
+ *      screens : {} : liste des écrans de l'application initialisés. il est à noter que, tous les écrans sont dans les sous répertoire du dossier courant
+            screens screens est de la forme : {group1:[],group2:[], ...groupN:[]}:
+                    C'est un objet de tableau, ou chaque clé représente le nom du groupe et le tableau représente les écrans qui sont rendu par ledit groupe
+            
+        groups : {} : la liste des différents groupes d'écrans rendus par la méthode
+ */
+export default function initScreens ({Factory,ModalFactory,useTheme,screens,result,filter}){
+    if(!isArray(screens) || !screens.length){
+        screens = mainScreens;
+    }
+    result = defaultObj(result);
+    result.screens = defaultObj(result.screens);
+    result.groups = defaultObj(result.groups);
+    ///lorsque les écrans sont passés enparamètres, par défaut, le wrapper withTheme n'est pas utilisé
+    useTheme = defaultBool(useTheme,false);
+    filter = typeof filter =="function" ? filter : x=> true;
+    defaultArray(screens).map((Screen,index)=>{
+        handleScreen({Screen,result,Factory,ModalFactory,filter,index})
+    });
+    return result;
+}
+
+export const handleContent = ({screens,hasGetStarted,state,Factory})=>{
+    const content = [];
+    state = defaultObj(state);
+    screens = defaultObj(screens);
+    if(isObj(screens.screens)){
+        screens = screens.screens;
+    }
+    Object.map(screens,(screens,groupName)=>{
+        if(!Array.isArray(screens)) return null;
+        if(hasGetStarted === false){
+          if(groupName == GROUP_NAMES.INSTALL){
+              content.push(<Factory.Group key={groupName}>
+                {screens}
+              </Factory.Group>)
+          }
+        } else if(groupName === GROUP_NAMES.PRIVATE){
+            content.push(<Factory.Group key={groupName}>
+                {screens}
+            </Factory.Group>)
+            return
+        }
+        if(groupName ===GROUP_NAMES.PUBLIC && screens.length){
+            content.push(<Factory.Group key={groupName}>
+              {screens}
+            </Factory.Group>)
+        } 
+    });
+    return content;
+}
+export {initScreens}

package/src/screens/mainScreens.js

@@ -0,0 +1,4 @@
+import Auth from "./Auth";
+export default  [
+    Auth,
+]

package/src/screens/utils.js

@@ -0,0 +1,13 @@
+export {sanitizeName} from "$cnavigation/utils";
+/**** les groupes d'écrans stack de l'application
+ *  un écran peut appartenir à un seul ou plusieur groupe. cependant, le groupe préviée prend la priorité.
+ * Ainsi, un écran ne peut être a la fois être public et privée. si tel est le cas, le groupe privée emporte
+ *
+ */
+export const GROUP_NAMES = {
+    PUBLIC : "PUBLIC", //les écrans publiques, ne nécessitant pas que l'utilisateur soit connecté
+    PRIVATE : "PRIVATE", //les écrans privés : nécessitant une connexion de l'utilisateur pour être accessible
+    INSTALL : "INSTALL", //les écrans d'installation de l'application, accessible uniquement à la première installation,
+    START : "INSTALL", //install est un alias à start
+    DEFAULT : "PRIVATE",
+}

package/webpack.config.js

@@ -0,0 +1,31 @@
+/**@see : https://www.npmjs.com/package/@expo/webpack-config/v/0.11.4 */
+const createExpoWebpackConfigAsync = require('@expo/webpack-config')
+// Expo CLI will await this method so you can optionally return a promise.
+module.exports = async function(env, argv) {
+    const path = require("path");
+    const dir = path.resolve(__dirname);
+    const config = await createExpoWebpackConfigAsync(
+      {
+        ...env,
+        babel: {
+          dangerouslyAddModulePathsToTranspile: [
+            // Ensure that all packages starting with @fto-consult are transpiled.
+            '@fto-consult',
+          ],
+        },
+      },
+      argv
+  );
+    //config.resolve.alias['moduleA'] = 'moduleB';
+  
+    // Maybe you want to turn off compression in dev mode.
+    if (config.mode === 'development') {
+      config.devServer.compress = false;
+    }
+    // Or prevent minimizing the bundle when you build.
+    if (config.mode === 'production') {
+      config.optimization.minimize = true;
+    }
+    require("./compiler.config.js")({config,dir})
+    return config;
+};

package/workflows/release-package.yml

@@ -0,0 +1,33 @@
+name: Node.js Package
+
+on:
+  release:
+    types: [created]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 12
+      - run: npm ci
+      - run: npm test
+
+  publish-gpr:
+    needs: build
+    runs-on: ubuntu-latest
+    permissions:
+      packages: write
+      contents: read
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 12
+          registry-url: https://npm.pkg.github.com/
+      - run: npm ci
+      - run: npm publish
+        env:
+          NODE_AUTH_TOKEN: ${{secrets.GITHUB_TOKEN}}