@fto-consult/expo-ui 5.0.2 → 5.1.0

package/babel.config.js

@@ -2,30 +2,19 @@ module.exports = function(api,opts) {
     opts = typeof opts =='object' && opts ? opts : {};
     api = api && typeof api =='object'? api : {};
     ///les chemin vers la variable d'environnement, le chemin du fichier .env,@see : https://github.com/brysgo/babel-plugin-inline-dotenv
-    let environmentPath = opts.environmentPath || opts.envPath;
     //console.log(environmentPath," is envvv ",opts);
     const path = require("path");
     const fs = require("fs");
     const dir = path.resolve(__dirname);
     typeof api.cache =='function' && api.cache(true);
-    const inlineDovOptions = {};
+    const inlineDovOptions = { unsafe: true};
     const options = {base:dir,...opts,platform:"expo"};
-    /*** par défaut, les variables d'environnements sont stockés dans le fichier .env situé à la racine du projet, référencée par la prop base  */
-    if(!environmentPath || typeof environmentPath !== 'string'){
-      const baseStr = typeof options.base =='string' && fs.existsSync(options.base)? options.base : typeof options.dir =='string' && fs.existsSync(options.dir)? options.dir : dir;
-      environmentPath = path.resolve(baseStr,".env");
-    } else {
-      environmentPath = "";
-    }
-    if(environmentPath && fs.existsSync(environmentPath)){
-      // File ".env" will be created or overwritten by default.
-      try {
-        fs.copyFileSync(environmentPath, path.resolve(dir,'.env'));
-      }
-      catch (e){
-        inlineDovOptions.path = environmentPath;
-      }
+    const environmentPath = require("./copy-env-file")();
+    if(fs.existsSync(environmentPath)){
+      inlineDovOptions.path ='./.env';
     }
+    /*** par défaut, les variables d'environnements sont stockés dans le fichier .env situé à la racine du projet, référencée par la prop base  */
+    
     const alias =  require("./babel.config.alias")(options);
     return {
       presets: [
@@ -36,7 +25,11 @@ module.exports = function(api,opts) {
         ["inline-dotenv",inlineDovOptions],
         ["module-resolver", {"alias": alias}],
         ['@babel/plugin-proposal-export-namespace-from'],
-        ['transform-inline-environment-variables'],
+        ['transform-inline-environment-variables',{
+          "include": [
+            "NODE_ENV"
+          ]
+        }],
         ['react-native-reanimated/plugin'],
       ],
     };

package/bin/index.js

@@ -52,6 +52,8 @@ if(parsedArgs.electron){
   }
   const electronProjectRoot = path.resolve(projectRoot,"electron");
   const isElectionInitialized = require("../electron/is-initialized")(electronProjectRoot);
+  process.env.isElectron = true;
+  process.env.isElectronScript = true;
   if(!isElectionInitialized || script =='init'){
       if(script !=='init'){
           console.log("initializing electron application before ....");

package/compiler.config.js

@@ -4,22 +4,28 @@ module.exports = function({config,nodeModulesPath}){
     const expoUi = path.resolve(require("./expo-ui-path")());
     nodeModulesPath = Array.isArray(nodeModulesPath)? nodeModulesPath : [];
     config.resolve.modules = Array.isArray(config.resolve.modules)? config.resolve.modules:[]
-    config.resolve.modules = [path.resolve(base, 'node_modules'), 'node_modules',...nodeModulesPath,...config.resolve.modules];
+    config.resolve.modules = [path.resolve(base, 'node_modules'),path.resolve(expoUi,"node_modules"),...nodeModulesPath,...config.resolve.modules];
     config.module.rules.push({
         test: /\.(js|jsx|ts|tsx)$/,
+        type: "javascript/auto",
         include: [
             base,
-            path.resolve(expoUi,"node_modules","@fto-consult"),
-            /(common)/
+            /node_modules\/@fto-consult/,
+            expoUi,
         ],
         exclude:[
-            path.resolve(base,"nodes_modules"),
-            path.resolve(expoUi,"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.module.rules.push({
+        test: /\.mjs$/,
+        include: /node_modules/,
+        type: 'javascript/auto',
+        resolve: {
+          fullySpecified: false
         }
     });
     config.plugins.push(require("@fto-consult/common/circular-dependencies"));

package/copy-env-file.js

@@ -0,0 +1,22 @@
+const fs = require("fs");
+const path = require("path");
+const writeFile = require("./electron/utils/writeFile");
+/*** create and copy environment path to this directory
+ * 
+ */
+module.exports = (projectRoot,forceCreate)=>{
+    projectRoot = projectRoot && typeof projectRoot =="string" && fs.existsSync(projectRoot) && projectRoot || process.cwd();
+    const environmentPath = path.resolve(projectRoot,".env");
+    const localEnv = path.resolve(__dirname,".env");
+    if(environmentPath && fs.existsSync(environmentPath)){
+        // File ".env" will be created or overwritten by default.
+        try {
+          fs.copyFileSync(environmentPath, localEnv,fs.constants.COPYFILE_FICLONE_FORCE);
+        }
+        catch (e){}
+    } 
+    if(!fs.existsSync(localEnv) && forceCreate !==false){
+        writeFile(localEnv,"");
+    }
+    return localEnv;
+}

package/electron/utils/exec.js

@@ -2,6 +2,9 @@ const exec = require('child_process').exec;
 const fs = require("fs");
 const _exec = (cmd,cmdOpts,logMessages)=>{
     cmdOpts = typeof cmdOpts =='object' && cmdOpts || {};
+    cmdOpts.env = typeof cmdOpts.env =="object" && cmdOpts.env || {};
+    cmdOpts.env = {...process.env,...cmdOpts.env};
+    cmdOpts.env.platform = cmdOpts.env.platform || "electron";
     return new Promise((resolve,reject)=>{
         const timer = cmdOpts.loader !==false ? loaderTimer(cmd) : null;
         exec(cmd,cmdOpts, (error, stdout, stderr) => {

package/metro.config.js

@@ -1,6 +1,10 @@
-const { getDefaultConfig } = require('@expo/metro-config');
 const path = require("path");
+const fs = require("fs");
 module.exports = function(opts){
+  const nodeModulePath = `${process.cwd()}/node_modules`;
+  const mConfigPath = fs.existsSync(`${nodeModulePath}/@expo/metro-config`) && `${nodeModulePath}/@expo/metro-config` || "@expo/metro-config";
+  const { getDefaultConfig } = require(`${mConfigPath}`);
+  
   opts = opts && typeof opts =='object'? opts : {};
   let {assetExts,sourceExts} = opts;
   assetExts = Array.isArray(assetExts)? assetExts: [];
@@ -8,10 +12,11 @@ module.exports = function(opts){
   const projectRoot = process.cwd();
   const localDir = path.resolve(__dirname);
   const config = getDefaultConfig(projectRoot);
-  config.watchFolders = [projectRoot];
+  config.watchFolders = Array.isArray(config.watchFolders) && config.watchFolders || [];
   if(projectRoot !== localDir){
     config.watchFolders.push(localDir);
   }
+  config.projectRoot = projectRoot;
   config.resolver.assetExts = [
      ...config.resolver.assetExts,
      ...assetExts,
@@ -25,5 +30,11 @@ module.exports = function(opts){
   ]
   // Remove all console logs in production...
   config.transformer.minifierConfig.compress.drop_console = false;
+  /*config.platforms = Array.isArray(config.platforms) && config.platforms || [];
+  ['ios', 'android', 'windows', 'web',"electron"].map(p=>{
+    if(!config.platforms.includes(p)){
+       config.platforms.push(p);
+    }
+  });*/
   return config;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fto-consult/expo-ui",
-  "version": "5.0.2",
+  "version": "5.1.0",
   "description": "Bibliothèque de composants UI Expo,react-native",
   "main": "index.js",
   "scripts": {
@@ -61,7 +61,7 @@
     "@emotion/native": "^11.10.0",
     "@expo/html-elements": "^0.2.0",
     "@expo/vector-icons": "^13.0.0",
-    "@fto-consult/common": "^2.20.13",
+    "@fto-consult/common": "^2.20.14",
     "@gorhom/portal": "^1.0.14",
     "@react-native-async-storage/async-storage": "^1.17.11",
     "@react-native-community/datetimepicker": "^6.7.3",
@@ -85,6 +85,7 @@
     "google-libphonenumber": "^3.2.31",
     "htmlparser2-without-node-native": "^3.9.2",
     "mongo-parse": "^2.1.0",
+    "process": "^0.11.10",
     "prop-types": "^15.8.1",
     "react": "^18.2.0",
     "react-apexcharts": "^1.4.0",
@@ -113,7 +114,7 @@
   "devDependencies": {
     "@babel/plugin-proposal-export-namespace-from": "^7.18.9",
     "@babel/preset-react": "^7.18.6",
-    "@expo/metro-config": "^0.5.2",
+    "@expo/metro-config": "^0.7.1",
     "@expo/webpack-config": "^18.0.1",
     "babel-plugin-inline-dotenv": "^1.7.0",
     "babel-plugin-module-resolver": "^4.1.0",

package/process.browser.js

@@ -0,0 +1,184 @@
+// shim for using process in browser
+var process = module.exports = {};
+
+// cached from whatever global is present so that test runners that stub it
+// don't break things.  But we need to wrap it in a try catch in case it is
+// wrapped in strict mode code which doesn't define any globals.  It's inside a
+// function because try/catches deoptimize in certain engines.
+
+var cachedSetTimeout;
+var cachedClearTimeout;
+
+function defaultSetTimout() {
+    throw new Error('setTimeout has not been defined');
+}
+function defaultClearTimeout () {
+    throw new Error('clearTimeout has not been defined');
+}
+(function () {
+    try {
+        if (typeof setTimeout === 'function') {
+            cachedSetTimeout = setTimeout;
+        } else {
+            cachedSetTimeout = defaultSetTimout;
+        }
+    } catch (e) {
+        cachedSetTimeout = defaultSetTimout;
+    }
+    try {
+        if (typeof clearTimeout === 'function') {
+            cachedClearTimeout = clearTimeout;
+        } else {
+            cachedClearTimeout = defaultClearTimeout;
+        }
+    } catch (e) {
+        cachedClearTimeout = defaultClearTimeout;
+    }
+} ())
+function runTimeout(fun) {
+    if (cachedSetTimeout === setTimeout) {
+        //normal enviroments in sane situations
+        return setTimeout(fun, 0);
+    }
+    // if setTimeout wasn't available but was latter defined
+    if ((cachedSetTimeout === defaultSetTimout || !cachedSetTimeout) && setTimeout) {
+        cachedSetTimeout = setTimeout;
+        return setTimeout(fun, 0);
+    }
+    try {
+        // when when somebody has screwed with setTimeout but no I.E. maddness
+        return cachedSetTimeout(fun, 0);
+    } catch(e){
+        try {
+            // When we are in I.E. but the script has been evaled so I.E. doesn't trust the global object when called normally
+            return cachedSetTimeout.call(null, fun, 0);
+        } catch(e){
+            // same as above but when it's a version of I.E. that must have the global object for 'this', hopfully our context correct otherwise it will throw a global error
+            return cachedSetTimeout.call(this, fun, 0);
+        }
+    }
+
+
+}
+function runClearTimeout(marker) {
+    if (cachedClearTimeout === clearTimeout) {
+        //normal enviroments in sane situations
+        return clearTimeout(marker);
+    }
+    // if clearTimeout wasn't available but was latter defined
+    if ((cachedClearTimeout === defaultClearTimeout || !cachedClearTimeout) && clearTimeout) {
+        cachedClearTimeout = clearTimeout;
+        return clearTimeout(marker);
+    }
+    try {
+        // when when somebody has screwed with setTimeout but no I.E. maddness
+        return cachedClearTimeout(marker);
+    } catch (e){
+        try {
+            // When we are in I.E. but the script has been evaled so I.E. doesn't  trust the global object when called normally
+            return cachedClearTimeout.call(null, marker);
+        } catch (e){
+            // same as above but when it's a version of I.E. that must have the global object for 'this', hopfully our context correct otherwise it will throw a global error.
+            // Some versions of I.E. have different rules for clearTimeout vs setTimeout
+            return cachedClearTimeout.call(this, marker);
+        }
+    }
+
+
+
+}
+var queue = [];
+var draining = false;
+var currentQueue;
+var queueIndex = -1;
+
+function cleanUpNextTick() {
+    if (!draining || !currentQueue) {
+        return;
+    }
+    draining = false;
+    if (currentQueue.length) {
+        queue = currentQueue.concat(queue);
+    } else {
+        queueIndex = -1;
+    }
+    if (queue.length) {
+        drainQueue();
+    }
+}
+
+function drainQueue() {
+    if (draining) {
+        return;
+    }
+    var timeout = runTimeout(cleanUpNextTick);
+    draining = true;
+
+    var len = queue.length;
+    while(len) {
+        currentQueue = queue;
+        queue = [];
+        while (++queueIndex < len) {
+            if (currentQueue) {
+                currentQueue[queueIndex].run();
+            }
+        }
+        queueIndex = -1;
+        len = queue.length;
+    }
+    currentQueue = null;
+    draining = false;
+    runClearTimeout(timeout);
+}
+
+process.nextTick = function (fun) {
+    var args = new Array(arguments.length - 1);
+    if (arguments.length > 1) {
+        for (var i = 1; i < arguments.length; i++) {
+            args[i - 1] = arguments[i];
+        }
+    }
+    queue.push(new Item(fun, args));
+    if (queue.length === 1 && !draining) {
+        runTimeout(drainQueue);
+    }
+};
+
+// v8 likes predictible objects
+function Item(fun, array) {
+    this.fun = fun;
+    this.array = array;
+}
+Item.prototype.run = function () {
+    this.fun.apply(null, this.array);
+};
+process.title = 'browser';
+process.browser = true;
+process.env = {};
+process.argv = [];
+process.version = ''; // empty string to avoid regexp issues
+process.versions = {};
+
+function noop() {}
+
+process.on = noop;
+process.addListener = noop;
+process.once = noop;
+process.off = noop;
+process.removeListener = noop;
+process.removeAllListeners = noop;
+process.emit = noop;
+process.prependListener = noop;
+process.prependOnceListener = noop;
+
+process.listeners = function (name) { return [] }
+
+process.binding = function (name) {
+    throw new Error('process.binding is not supported');
+};
+
+process.cwd = function () { return '/' };
+process.chdir = function (dir) {
+    throw new Error('process.chdir is not supported');
+};
+process.umask = function() { return 0; };

package/readMe.md

@@ -1,7 +1,7 @@
 ## Installation des dépendences, packages de dévéloppement
 
 ```javascript
-npm i --D @babel/plugin-proposal-export-namespace-from @babel/preset-react babel-plugin-inline-dotenv babel-plugin-module-resolver babel-plugin-transform-inline-environment-variables @expo/metro-config @expo/webpack-config
+npm i --D @babel/plugin-proposal-export-namespace-from  @babel/preset-react babel-plugin-inline-dotenv babel-plugin-module-resolver babel-plugin-transform-inline-environment-variables @expo/metro-config @expo/webpack-config
 ```
 
 ## **#ELECTRON**

package/src/components/PhoneInput/index.js

@@ -10,6 +10,9 @@ import PhoneNumber from "./PhoneNumber";
 import SelectCountry from "$ecomponents/Countries/SelectCountry";
 import {getFlag} from "$ecomponents/Countries";
 
+export {PhoneNumber};
+export * from "./PhoneNumber";
+
 import libPhoneNumber from 'google-libphonenumber';
 const asYouTypeFormatter = libPhoneNumber.AsYouTypeFormatter;
 
@@ -116,6 +119,7 @@ export default function PhoneInputComponent(props){
             country : iso2,
             displayValue,
             defaultValue : modifiedNumber,
+            countryDialCode
         }
         setState(nState);
         return nState;
@@ -137,6 +141,9 @@ export default function PhoneInputComponent(props){
             <>
                 <TextField
                     {...rest}
+                    toCase = {(val)=>{
+                        return (val.startsWith("+")?"+":"")+val.replace(/[^\s0-9]/g, '');
+                    }}
                     testID = {testID}
                     error = {error}
                     errorText = {errorText}
@@ -162,18 +169,19 @@ export default function PhoneInputComponent(props){
                     }
                     keyboardType ={keyboardTypes.number}
                     defaultValue = {state.displayValue}
-                    onChange = {({value:nValue})=>{
+                    onChange = {(args)=>{
+                        const {value:nValue} = args;
                         const prevState = state;
                         const nState = updateValue(nValue);
-                        if(prevState.defaultValue === nState.defaultValue || (prevState.defaultValue.length <= 3 && nState.defaultValue.length <= 3)) return;
-                            let value = nState.displayValue;
-                            if(value.length <=3){
-                                value = "";
-                            }
-                            if(prevState.defaultValue === value) return;
-                            if(onChange){
-                                onChange({value,country:nState.country,displayValue:nState.displayValue,realValue:nState.defaultValue})
-                            }
+                        let value = defaultStr(nState.defaultValue).trim();
+                        if(prevState.defaultValue === value) return;
+                        if(value =="+" || value =="("){
+                            value = "";
+                        }
+                        if(prevState.defaultValue === value) return;
+                        if(onChange){
+                            onChange({...nState,value,country:nState.country,displayValue:nState.displayValue,realValue:nState.defaultValue})
+                        }
                     }}
                     ref = {ref}
                     style = {[props.style,inputProps.style,disabledStyle]}

package/src/components/TextField/index.js

@@ -31,7 +31,7 @@ const isIos = _isIos();
 
 
 const TextFieldComponent = React.forwardRef((componentProps,inputRef)=>{
-    let {defaultValue,color,validType,validRule,placeholder,outlined,placeholderColor,
+    let {defaultValue,toCase:toCustomCase,color,validType,validRule,placeholder,outlined,placeholderColor,
         label,labelProps,labelStyle,fontSize,containerProps,selection,roundness,
         autoCapitalize,disabled,editable,readOnly,elevation,divider,render,
         leftContainerProps,left,right,rightContainerProps,rows,
@@ -149,8 +149,11 @@ const TextFieldComponent = React.forwardRef((componentProps,inputRef)=>{
         if(t === emptyValue){
             t = "";
         }
-        if((upper !== true && lower !== true) || isAndroid) return typeof t =='string'? t : "";
-        return isNonNullString(t)? (upper ? t.toUpperCase() : lower ? t.toLowerCase():t) : ""
+        const ret = ((upper !== true && lower !== true) || isAndroid) ? (typeof t =='string'? t : "") : (isNonNullString(t)? (upper ? t.toUpperCase() : lower ? t.toLowerCase():t) : "");
+        if(toCustomCase){
+            toCustomCase(ret);
+        }
+        return ret;
     };
     const [text, _setText] = React.useState(toCase(defaultValue));
     const previousText = React.usePrevious(text);
@@ -748,5 +751,6 @@ TextFieldComponent.propTypes = {
     ///le style à afficher sur l'affix
     affixStyle : PropTypes.object,
     handleOpacity : PropTypes.bool,///si l'opacité sera géré automatiquement en fonction du status disabled de la textField
+    toCase : PropTypes.func,
 };
 

package/src/navigation/index.js

@@ -16,7 +16,6 @@ export default function NavigationComponent (props){
     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);

package/webpack.config.js

@@ -1,22 +1,35 @@
-/**@see : https://www.npmjs.com/package/@expo/webpack-config/v/0.11.4 */
-const createExpoWebpackConfigAsync = require('@expo/webpack-config')
-const path = require("path");
+/**@see : https://www.npmjs.com/package/@expo/webpack-config */
 const isObj = x => x && typeof x =='object' && !Array.isArray(x);
+//const webpack = require("webpack");
+const fs = require("fs");
+const supportedPlatforms = ["web","electron"];
+const mainExtensions = [".js", ".jsx",".ts",".tsx",".mjs"];
+const path = require("path");
+
 // Expo CLI will await this method so you can optionally return a promise.
 module.exports = async function(env, argv,opts) {
+  const nodeModulePath = `${process.cwd()}/node_modules`;
+  const wConfigPath = fs.existsSync(`${nodeModulePath}/@expo/webpack-config`) && `${nodeModulePath}/@expo/webpack-config` || "@expo/webpack-config";
+  const webpackPath = fs.existsSync(`${nodeModulePath}/webpack`) && `${nodeModulePath}/webpack` || "webpack";
+  const webpack = require(`${webpackPath}`);
+  const createExpoWebpackConfigAsync = require(wConfigPath);
     env = env || {};
     opts = typeof opts =="object" && opts ? opts : {};
     const babel = isObj(opts.babel)? opts.babel : {};
-    const isElectron = typeof env.platform =="string" && env.platform.toLowerCase().trim() ==='electron';
+    const isElectron = process.env.isElectron || process.env.platform =="electron" || typeof env.platform =="string" && env.platform.toLowerCase().trim() ==='electron';
     if(isElectron){
        env.platform = "electron";
        env.mode = env.mode =="production" && "production" || "development";
        env.pwa = false;
     }
+    const platform = isElectron && "electron" || process.env.platform && supportedPlatforms.includes(process.platform) && process.platform || typeof opts.platform =="string" && supportedPlatforms.includes(opts.platform)? opts.platform : "web";
     const transpileModules = Array.isArray(opts.transpileModules)? opts.transpileModules : [];
+    const projectRoot = opts.projectRoot && typeof opts.projectRoot =="string" && fs.existsSync(opts.projectRoot) && opts.projectRoot || process.cwd();
     const config = await createExpoWebpackConfigAsync(
       {
         ...env,
+        platform,
+        projectRoot,
         babel: {
           ...babel,
           dangerouslyAddModulePathsToTranspile: [
@@ -35,7 +48,6 @@ module.exports = async function(env, argv,opts) {
           type: "javascript/auto",
           use: {loader: 'babel-loader'}
     });
-    //config.resolve.alias['moduleA'] = 'moduleB';
     config.mode = (config.mode =="development" || config.mode =='production') ? config.mode  : "development";
     // Maybe you want to turn off compression in dev mode.
     if (config.mode === 'development') {
@@ -51,11 +63,27 @@ module.exports = async function(env, argv,opts) {
     config.performance.maxAssetSize = typeof config.performance.maxAssetSize =='number'? config.performance.maxAssetSize : 512000;
     config.devtool = (config.mode === 'development') ? 'inline-source-map' : false;
     require("./compiler.config.js")({config,...opts});
+    const envPath = require("./copy-env-file")();
+    const extensions = config.resolve.extensions;
     if(isElectron){
-      const electronPath = process.cwd();
-      config.output = config.output || {};
-      config.output.publicPath = "./";
-      config.output.path = path.join(electronPath,"dist");
+      mainExtensions.map((ex)=>{
+        const nExt =  `.electron${ex}`;
+        if(!extensions.includes(nExt)){
+          extensions.unshift(nExt);
+        }
+      });
+      //const electronPath = process.cwd();
+      //config.output = config.output || {};
+      //config.output.publicPath = "./";
+      //config.output.path = path.join(electronPath,"dist");
+      //writeFile(path.resolve(__dirname,"is-electron-platform.txt"),` ${JSON.stringify(extensions)} is extensions to resolve`)
     }
+    //fix process is not defined
+    config.plugins.unshift(new webpack.ProvidePlugin({
+      process: 'process/browser',
+    }));
+    config.resolve.alias.process = "process/browser";
+    config.resolve.fallback = typeof config.resolve.fallback =="object" && config.resolve.fallback || {};
+    config.resolve.fallback = {...config.resolve.fallback,process: require.resolve('process/browser')};
     return config;
-};
+};;