@fto-consult/expo-ui 1.0.4

package/babel.config.alias.js

@@ -0,0 +1,32 @@
+const path = require("path");
+module.exports = (opts)=>{
+    const dir = path.resolve(__dirname);
+    const expo = path.resolve(dir,"src");
+    const assets = path.resolve(dir,"assets");
+    opts = typeof opts =='object' && opts ? opts : {};
+    opts.platform = "expo";
+    opts.assets = opts.assets || assets;
+    opts.base = opts.base || dir;
+    const r = require("@fto-consult/common/babel.config.alias")(opts);
+    r["$eauth"] = path.resolve(expo,"auth");
+    r["$ecomponents"] = r["$expo-components"] = path.resolve(expo,"components");
+    r["$elayouts"] = path.resolve(expo,"layouts");
+    r["$emedia"] = path.resolve(expo,"media");
+    r["$enavigation"] = path.resolve(expo,"navigation");
+    r["$escreens"] = path.resolve(expo,"screens");
+    r["$escreen"] = path.resolve(expo,"layouts/Screen");
+    r["$screens"] = r["$screens"] || path.resolve(expo,"screens");
+    r["$expo"] = r["$expo-ui"] = expo;
+    if(typeof opts.mutator =='function'){
+        opts.mutator(r);
+    }
+    const aliases = [];
+    for(let i in r){
+        aliases.push({
+            root: r[i],
+            rootPathPrefix: i,
+            rootPathSuffix: '',
+        })
+    }
+    return aliases;
+}

package/babel.config.js

@@ -0,0 +1,18 @@
+module.exports = function(api,opts) {
+    opts = typeof opts =='object' && opts ? opts : {};
+    const path = require("path");
+    const dir = path.resolve(__dirname);
+    api.cache(true);
+    const alias =  require("./babel.config.alias")({base:dir,...opts,platform:"expo"});
+    return {
+      presets: [
+        ['babel-preset-expo'],
+        ["@babel/preset-react", {"runtime": "automatic"}],
+      ],
+      plugins : [
+        ['babel-plugin-root-import', {"paths": alias}],
+        ['react-native-reanimated/plugin'],
+        ['transform-inline-environment-variables'],
+      ]
+    };
+  };

package/circular-dependencies.js

@@ -0,0 +1,24 @@
+const CircularDependencyPlugin = require("circular-dependency-plugin");
+module.exports = new CircularDependencyPlugin({
+    exclude: /node_modules/,
+    failOnError: true,
+    allowAsyncCycles: false,
+    cwd: process.cwd(),
+    // allow import cycles that include an asyncronous import,
+    // e.g. via import(/* webpackMode: "weak" */ './file.js')
+    allowAsyncCycles: false,
+    // `onStart` is called before the cycle detection starts
+    onStart({ compilation }) {
+      console.log('\nstart detecting webpack modules cycles');
+    },
+    // `onDetected` is called for each module that is cyclical
+    onDetected({ module: webpackModuleRecord, paths, compilation }) {
+      // `paths` will be an Array of the relative module paths that make up the cycle
+      // `module` will be the module record generated by webpack that caused the cycle
+      compilation.errors.push(new Error(paths.join(' -> ')))
+    },
+    // `onEnd` is called before the cycle detection ends
+    onEnd({ compilation }) {
+      console.log('\nend detecting webpack modules cycles');
+    },
+  });

package/compiler.config.js

@@ -0,0 +1,28 @@
+const path = require("path");
+module.exports = function({config,isNext,nodeModulesPath,dir}){
+    const root = path.resolve(dir,"..");
+    nodeModulesPath = Array.isArray(nodeModulesPath)? nodeModulesPath : [];
+    config.resolve.modules = Array.isArray(config.resolve.modules)? config.resolve.modules:[]
+    config.resolve.modules = [path.resolve(dir, 'node_modules'),path.resolve(root, 'node_modules'), 'node_modules',...nodeModulesPath,...config.resolve.modules];
+    if(!isNext){
+        config.module.rules.push({
+            test: /\.(js|jsx|ts|tsx)$/,
+            include: [
+                dir,
+                path.resolve(dir,"node_modules","@fto-consult"),
+                /(common)/
+            ],
+            exclude:[
+                path.resolve(dir,"node_modules"),
+                path.resolve(root,"node_modules"),
+                /node_modules[/\\](?!react-native-paper|react-native|react-native-vector-icons|react-native-safe-area-view)/,
+                /(node_modules)/
+            ],
+            use: {
+              loader: 'babel-loader',
+            }
+        });
+    }
+    config.plugins.push(require("./circular-dependencies"));
+    return config;
+}

package/expo.metro.config.js

@@ -0,0 +1,27 @@
+const { getDefaultConfig } = require('@expo/metro-config');
+const path = require("path");
+module.exports = (opts)=>{
+  opts = opts && typeof opts =='object'? opts : {};
+  let {dir,nodeModulesPaths} = opts;
+  nodeModulesPaths = Array.isArray(nodeModulesPaths)? nodeModulesPaths : [];
+  dir = dir || path.resolve(__dirname);
+  const projectRoot = path.resolve(dir);
+  const workspaceRoot = path.resolve(projectRoot, '../..');
+  const config = getDefaultConfig(projectRoot);
+  config.watchFolders = [workspaceRoot];
+  // 2. Let Metro know where to resolve packages and in what order
+  config.resolver.nodeModulesPaths = [
+      path.resolve(projectRoot, 'node_modules'),
+      path.resolve(workspaceRoot, 'node_modules'),
+	    path.resolve(__dirname,"node_modules"),
+      ...nodeModulesPaths,
+    ];
+  config.resolver.assetExts.push('db');
+  config.resolver.sourceExts = [
+      ...config.resolver.sourceExts,
+      'jsx', 'js','tsx'
+  ]
+  // 3. Force Metro to resolve (sub)dependencies only from the `nodeModulesPaths`
+  config.resolver.disableHierarchicalLookup = true;
+  return config;
+}

package/index.js

@@ -0,0 +1,21 @@
+import { registerRootComponent } from 'expo';
+import appConfig from "$capp/config";
+//require('dotenv').config();
+
+const isObj = x=>typeof x =='object' && x && !Array.isArray(x);
+const defaultObj = x=> isObj(x)? x : {};
+
+/**** initialise l'application expoUI avec les paramètres de configuration
+ * les options sont de la forme : 
+ * {
+ *      config {object}, le fichier de configuration de l'application
+ * }
+ */
+export default function ExpoUIApp (options){
+    options = defaultObj(options);
+    const config = defaultObj(options.config);
+    appConfig.current = config;
+    registerRootComponent(require('./src/App').default);
+}
+
+ExpoUIApp();

package/metro.config.js

@@ -0,0 +1 @@
+module.exports = require("./expo.metro.config")();

package/package.json

@@ -0,0 +1,60 @@
+{
+  "name": "@fto-consult/expo-ui",
+  "version": "1.0.4",
+  "description": "Bibliothèque de composants UI Expo,react-native",
+  "main": "index.js",
+  "scripts": {
+    "publish": "npm publish --access=public",
+    "unpublish": "npm -f unpublish @fto-consult/common"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/borispipo/expo-ui.git"
+  },
+  "keywords": [
+    "Expo",
+    "React-Native"
+  ],
+  "author": "Boris Fouomene",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/borispipo/expo-ui/issues"
+  },
+  "homepage": "https://github.com/borispipo/expo-ui#readme",
+  "dependencies": {
+    "@babel/preset-react": "^7.18.6",
+    "@emotion/native": "^11.10.0",
+    "@expo/metro-config": "^0.4.0",
+    "@expo/webpack-config": "^0.17.2",
+    "@fto-consult/common": "^1.0.11",
+    "@gorhom/portal": "^1.0.14",
+    "@react-native-async-storage/async-storage": "~1.17.3",
+    "@react-native-community/netinfo": "9.3.0",
+    "@react-navigation/native": "^6.0.13",
+    "@react-navigation/native-stack": "^6.9.1",
+    "@shopify/flash-list": "1.1.0",
+    "babel-plugin-root-import": "^6.6.0",
+    "babel-plugin-transform-inline-environment-variables": "^0.4.4",
+    "circular-dependency-plugin": "^5.2.2",
+    "dotenv": "^16.0.3",
+    "expo": "^46.0.15",
+    "expo-camera": "~12.3.0",
+    "expo-linking": "~3.2.2",
+    "expo-status-bar": "~1.4.0",
+    "expo-system-ui": "~1.3.0",
+    "expo-web-browser": "~11.0.0",
+    "google-libphonenumber": "^3.2.31",
+    "prop-types": "^15.8.1",
+    "react-content-loader": "^6.2.0",
+    "react-dom": "18.0.0",
+    "react-native": "0.69.6",
+    "react-native-big-list": "^1.5.5",
+    "react-native-gesture-handler": "~2.5.0",
+    "react-native-paper": "^4.12.5",
+    "react-native-reanimated": "~2.9.1",
+    "react-native-safe-area-context": "4.3.1",
+    "react-native-svg": "12.3.0",
+    "react-native-web": "~0.18.7",
+    "tippy.js": "^6.3.7"
+  }
+}

package/src/App.js

@@ -0,0 +1,65 @@
+import '$session';
+import appConfig  from '$capp/config';
+import React from 'react';
+import  {updateTheme,defaultTheme} from "$theme";
+import { AppRegistry} from 'react-native';
+import {Provider as PaperProvider } from 'react-native-paper';
+import App from '$src';
+import {Portal } from 'react-native-paper';
+import {PreloaderProvider} from "$preloader";
+import DropdownAlert from '$ecomponents/Dialog/DropdownAlert';
+import {notificationRef} from "$notify";
+import BottomSheetProvider from "$ecomponents/BottomSheet/Provider";
+import DialogProvider from "$ecomponents/Dialog/Provider";
+import { DialogProvider as FormDataDialogProvider } from './components/Form/FormData';
+import { SafeAreaProvider } from 'react-native-safe-area-context';
+import { PreferencesContext } from './Preferences';
+import {AuthProvider} from '$cauth';
+import {PortalProvider } from '$ecomponents/Portal';
+import ErrorBoundary from "$ecomponents/ErrorBoundary";
+import ErrorBoundaryProvider from "$ecomponents/ErrorBoundary/Provider";
+import {GestureHandlerRootView} from "react-native-gesture-handler";
+import StatusBar from "$ecomponents/StatusBar";
+import SimpleSelect from '$ecomponents/SimpleSelect';
+import {Provider as AlertProvider} from '$ecomponents/Dialog/confirm/Alert';
+
+export default function MainAppComponent() {
+  React.useEffect(()=>{
+      return ()=>{}
+  },[])
+  const [theme,setTheme] = React.useState(updateTheme(defaultTheme));
+  const preferences = React.useMemo(()=>({
+      updateTheme : (customTheme,persist)=>{
+        setTheme(updateTheme(customTheme));
+      },
+      theme,
+  }),[theme]);
+  return (
+    <GestureHandlerRootView style={{ flex: 1 }}>
+        <PaperProvider theme={theme}>
+          <SafeAreaProvider>
+            <AuthProvider>
+                <PortalProvider>
+                  <Portal.Host>
+                      <ErrorBoundary>
+                            <StatusBar/>
+                            <PreferencesContext.Provider value={preferences}>
+                                  <DropdownAlert ref={notificationRef}/> 
+                                  <PreloaderProvider/>   
+                                      <DialogProvider responsive/>
+                                      <AlertProvider SimpleSelect={SimpleSelect}/>
+                                      <FormDataDialogProvider/>  
+                                      <App theme={theme}/>
+                                      <ErrorBoundaryProvider/>
+                                    <BottomSheetProvider/>
+                            </PreferencesContext.Provider>  
+                      </ErrorBoundary>
+                  </Portal.Host>
+                </PortalProvider>
+              </AuthProvider>
+          </SafeAreaProvider>
+        </PaperProvider>
+    </GestureHandlerRootView>
+  );
+}
+AppRegistry.registerComponent(appConfig.name || appConfig.id, () => Main);

package/src/Preferences.js

@@ -0,0 +1,5 @@
+import React from "$react";
+
+export const PreferencesContext = React.createContext(null);
+
+export const usePreferences = x => React.useContext(PreferencesContext);

package/src/auth/Login.js

@@ -0,0 +1,254 @@
+import React from "$react";
+import {isNonNullString,defaultNumber,defaultStr,uniqid,extendObj,isFunction} from "$utils";
+import {navigate} from "$enavigation/utils";
+import FormData from "$ecomponents/Form/FormData/FormData";
+import {getForm} from "$ecomponents/Form/utils";
+import Button from "$ecomponents/Button";
+import notify from "$notify";
+import {StyleSheet} from "react-native";
+import { useAuth } from "$cauth/AuthProvider";
+import Preloader from "$preloader";
+import Dimensions from "$cplatform/dimensions";
+import theme from "$theme";
+import Label from "$ecomponents/Label";
+import View from "$ecomponents/View";
+import Avatar from "$ecomponents/Avatar";
+import Surface from "$ecomponents/Surface";
+import {Provider as DialogProvider} from "$ecomponents/Dialog";
+import Screen from "$escreen";
+import {getTitle} from "$escreens/Auth/utils";
+import {isWeb} from "$cplatform";
+
+const WIDTH = 400;
+
+export default function LoginComponent(props){
+    let {formName,step,appBarProps,onSuccess,withPortal,testID} = props;
+    const loginTitle = getTitle();
+    testID = defaultStr(testID,"RN_Auth.LoginComponent");
+    formName = React.useRef(uniqid(defaultStr(formName,"login-formname"))).current;
+    const nextButtonRef = React.useRef(null);
+    const dialogProviderRef = React.useRef(null);
+    const backgroundColor = theme.colors.surface;
+    const Wrapper = withPortal ? Screen  : View;
+    
+    const auth = useAuth();
+    const notifyUser = (message)=> notify.error({message,position:'top'})
+    const [state,setState] = React.useState({
+        step : defaultNumber(step,1),
+    });
+    const _getForm = x=> getForm(formName);
+    const getData = ()=>{
+        const form = _getForm();
+        if(form && form.getData){
+            return form.getData();
+        }
+        return defaultObj(props.data);
+    }
+    const goToFirstStep = ()=>{
+        const data = getData();
+        setState({...state,step:1,data});
+    }
+    const focusField = (fieldName)=>{
+        const form = _getForm();
+        if(form){
+            const field = form.getField(fieldName);
+            if(field){
+                field.focus();
+            }
+        }
+    }
+    
+    React.useEffect(()=>{
+        Preloader.closeAll();
+    },[]);
+    React.useEffect(()=>{
+        if(typeof formProps.focusField =='function'){
+            return formProps.focusField({...state,focusField,nextButtonRef,data:getData()})
+        }
+    },[state.step]);
+    if(withPortal){
+        appBarProps = defaultObj(appBarProps);
+        appBarProps.backAction = false;
+    }
+    React.useEffect(()=>{
+        if(withPortal && isWeb() && typeof document !== 'undefined'){
+            setTimeout(()=>{
+                document.title = loginTitle
+            },1000)
+        }
+    },[withPortal])
+    const formProps = defaultObj(LoginComponent.getProps(LoginComponent.getProps({
+        ...state,
+        data : getData(),
+        focusField,
+        state,
+        setState,
+        nextButtonRef,
+    })));
+    /****la fonction à utiliser pour vérifier si l'on peut envoyer les données pour connextion
+     * par défaut, on envoie les données lorssqu'on est à l'étappe 2
+     * **/
+    const canSubmit = typeof formProps.canSubmit =='function'? formProps.canSubmit : ({step})=>step >= 2;
+    const goToNext = ()=>{
+        let step = state.step;
+        let data = getData();
+        data.code = defaultStr(data.code, state.code);
+        const form = _getForm();
+        if(!form){
+            notifyUser("Impossible de valider le formulaire car celui-ci semble invalide")
+            return;
+        }
+        const args = {data,form,step,nextButtonRef};
+        if(typeof formProps.validate =='function'){
+            const s = formProps.validate(args);
+            if(s === false) return;
+            if(isNonNullString(s)){
+                notifyUser(s);
+                return
+            }
+        }
+        if(canSubmit(args) && step > 1){
+            Preloader.open("vérification ...");
+            return auth.signIn(data).then((a)=>{
+                if(typeof formProps.onSuccess =='function' && formProps.onSuccess(a)=== false) return;
+                if(isFunction(onSuccess)){
+                    onSuccess(true);
+                } else {
+                    navigate("Home");
+                } 
+            }).finally(()=>{
+                Preloader.close();
+            })
+        } else {
+            setState({...state,step:step+1,...data})
+        }
+    }
+    
+    const wrapperProps = withPortal ? {appBarProps,authRequired:false,title:loginTitle} : { style:styles.wrapper};
+    return <Wrapper testID = {testID+"_Wrapper" }{...wrapperProps}>
+        <DialogProvider ref={dialogProviderRef}/>
+        <Surface style={[styles.container,{backgroundColor}]} testID={testID}>
+            <Surface elevation = {0} mediaQueryUpdateNativeProps = {(a)=>{
+                return {style:updateMediaQueryStyle()}
+            }} testID={testID+"_Content"} style={[styles.content,updateMediaQueryStyle(),{backgroundColor}]}>
+                <FormData 
+                    formName = {formName}
+                    testID = {testID+"_FormData"}
+                    style = {[styles.formData,{backgroundColor}]}
+                    header = {<View style = {[styles.header]}>
+                        <Avatar testID={testID+"_Avatar"} size={50} secondary icon = 'lock'/>
+                        <Label testID={testID+"_HeaderText"} bool style={{color:theme.colors.primaryOnSurface,fontSize:18,paddingTop:10}}>Connectez vous SVP</Label>
+                    </View>}
+                    responsive  = {false}
+                    {...formProps}
+                    formProps = {{
+                        keyboardEvents : {
+                            ...defaultObj(formProps.keyboardEvents),
+                            enter : ({formInstance})=>{
+                                goToNext();
+                            }
+                        }
+                    }}
+                    data = {extendObj(props.data,formProps.data)}
+                >
+                    <View testID={testID+"_ButtonsContainer"} style={[styles.buttonWrapper]}>
+                        <Button 
+                            ref = {nextButtonRef}
+                            primary
+                            mode = "contained"
+                            rounded
+                            style = {styles.button}
+                            onPress = {goToNext}
+                            icon = {state.step == 1? 'arrow-right':'login'}
+                            surface
+                            disabled = {!isNonNullString(state.code)}
+                        >
+                            {state.step == 1? 'Suivant' : 'Connexion' }
+                        </Button>
+                        {state.step>=2 ? <Button 
+                            onPress = {goToFirstStep}
+                            mode = "contained"
+                            rounded
+                            raised
+                            style = {styles.button}
+                            secondary
+                            surface
+                            icon = {'arrow-left'}
+                        >
+                            Précédent
+                        </Button> : null}
+                    </View>
+                </FormData>
+            </Surface>
+        </Surface>
+    </Wrapper>;
+}   
+
+/**** cette fonction est utilisée, pour modifier dynamiquement les champs et les props de connexion au formulaire */
+LoginComponent.getProps = ({data,step,state,nextButtonRef})=>{
+    return {
+        ///les champ à utiliser pour l'authentification de l'utilisateur
+        fields : {
+        
+        }
+    }
+}
+
+const updateMediaQueryStyle = ()=>{
+    const isSmallPhone = Dimensions.isSmallPhoneMedia(),isTablet = Dimensions.isTabletMedia(),
+    isMobile = Dimensions.isMobileMedia(),isDesktop = Dimensions.isDesktopMedia();
+    const {width} = Dimensions.get("window");
+    return {
+        width : isSmallPhone ? "95%" : isMobile?"90%" : isTablet ? "50%" : Math.min(WIDTH,(35*width)/100),
+        minWidth : isTablet || isDesktop ? WIDTH : undefined,
+    };
+}
+
+const styles = StyleSheet.create({
+    wrapper : {
+        flex:1,
+        width : '100%',
+        height : '100%',
+    },
+    portalContainer : {
+        ...StyleSheet.absoluteFillObject,
+        flex:1,
+        left:0,
+        zIndex : 1000,
+        top : 0,
+    },
+    container : {
+        justifyContent : 'center',
+        alignItems : 'center',
+        width : '100%',
+        height : '100%',
+        paddingVertical : 15,
+        flex : 1,
+    },
+    content : {
+        width : 300,
+        paddingVertical : 40,
+        paddingHorizontal : 20,
+        justifyContent : 'center',
+        //alignItems : 'center',
+        flex : 1,
+    },
+    button : {
+        //maxWidth : 130,
+        margin : 10,
+    },
+    header : {
+        flexDirection:'column',
+        width : '100%',
+        alignItems : 'center',
+    },
+    formData : {
+        justifyContent : 'flex-start',
+        width : '100%',
+    },
+    buttonWrapper : {
+        justifyContent : 'center',
+        width : '100%'
+    }
+});
+

package/src/auth/index.js

@@ -0,0 +1,3 @@
+import AuthGuard from "$cauth/AuthGuard";
+import Login from "./Login";
+AuthGuard.Login = Login;

package/src/components/ActivityIndicator/index.js

@@ -0,0 +1,9 @@
+import { ActivityIndicator } from "react-native";
+import theme from "$theme";
+export default function ActivityIndicatorComponent(props){
+    return <ActivityIndicator
+        testID="RN_ActivityIndicatorComponent"
+        color={theme.colors.primary}
+        {...props}
+    />
+}

package/src/components/Animations/Animation/index.js

@@ -0,0 +1,95 @@
+ import React from "$react";
+ import PropTypes from "prop-types";
+ import {animationsPropTypes,getAnimations} from "./utils";
+ import Animated,{useAnimatedStyle,withTiming} from "react-native-reanimated";
+
+ export const ANIMATION_DURATION = 300;
+ 
+ 
+ const AnimationComponent = React.forwardRef(function AnimationComponent(props,ref) {
+   let { animationType,animationPosition,enteringCallback,exitingCallback,animationDuration,...rest} = props;
+   const rProps = defaultObj(rest);
+   const duration =  animationDuration || ANIMATION_DURATION;
+    let animations = getAnimations(animationType,animationPosition);
+    
+    const style = useAnimatedStyle(() => {
+      return {};
+    });
+    enteringCallback = enteringCallback || function(e){console.log(e," is entering")};
+    exitingCallback = exitingCallback || function(e){console.log(e," is animation exiting")};
+    if(animations.entering && animations.exiting){
+        animations.entering.duration(duration).withCallback(enteringCallback);
+        animations.exiting.duration(duration).withCallback(exitingCallback);
+    } else {
+      animations = getDefaultAnimation({duration,enteringCallback,exitingCallback,callback});
+    }
+    
+    return <Animated.View
+        testID={'RN_AnimationComponentComponent'}
+        ref = {ref}
+        {...rProps}
+        style = {[rest.style,style]}
+        {...animations}
+    />
+ });
+
+AnimationComponent.displayName = "AnimationComponent";
+
+export default AnimationComponent;
+
+ AnimationComponent.propTypes = {
+    ...animationsPropTypes,
+    animationDuration : PropTypes.number,
+    children : PropTypes.any,
+    enteringCallback : PropTypes.func,
+    exitingCallback : PropTypes.func,
+}
+
+
+export const getDefaultAnimation = ({enteringCallback,exitingCallback,duration})=>{
+  return {
+     entering : (targetValues) => {
+      'worklet';
+      return {
+        callback : enteringCallback,
+        duration,
+        initialValues: {
+          transform: [
+            { translateY: targetValues.targetHeight / 2 },
+            { perspective: 500 },
+            { rotateX: '90deg' },
+            { translateY: -targetValues.targetHeight / 2 },
+            { translateY: 300 },
+          ],
+        },
+        animations: {
+          transform: [
+            { translateY: withTiming(targetValues.targetHeight / 2) },
+            { perspective: withTiming(500) },
+            { rotateX: withTiming('0deg') },
+            { translateY: withTiming(-targetValues.targetHeight / 2) },
+            { translateY: withTiming(0) },
+          ],
+        },
+      };
+    },
+    exiting : (targetValues) => {
+      'worklet';
+      return {
+        callback : exitingCallback,
+        duration,
+        initialValues: {},
+        animations: {
+          transform: [
+            { translateY: withTiming(targetValues.currentHeight / 2) },
+            { perspective: withTiming(500) },
+            { rotateX: withTiming('90deg') },
+            { translateY: withTiming(-targetValues.currentHeight / 2) },
+            { translateY: withTiming(300) },
+          ],
+        },
+      };
+    }
+  }
+  return {entering,exiting};
+}