@fto-consult/expo-ui 3.2.0 → 3.3.0

package/babel.config.alias.js

@@ -113,23 +113,20 @@ module.exports = (opts)=>{
     });
     const $assets = r.$assets;
     const electronPaths = {
-        ...r,
-        sourceCode : r.$src,
         assets : $assets,
         images : r.$images,
         projectRoot : base,//la racine au projet
     };
     const electronAssetsPath = path.resolve(dir,"electron","assets");
     if($assets){
-        const l1 = path.resolve($assets,"logo.png"), l2 = path.resolve($assets,"logo.png");
+        const l1 = path.resolve($assets,"logo.png"), l2 = path.resolve($assets,"images","logo.png");
         const logoPath = fs.existsSync(l1)? l1 : fs.existsSync(l2)? l2 : undefined;
-        const ePath = path.resolve(electronAssetsPath,"images","logo.png");
-        if(logoPath && require("./electron/createDir")(ePath)){
-            fs.copyFileSync(logoPath,ePath,fs.constants.COPYFILE_FICLONE);
+        if(logoPath){
+            fs.copyFileSync(logoPath,path.resolve(electronAssetsPath,"images","logo.png"),fs.constants.COPYFILE_FICLONE);
             electronPaths.logo = logoPath;
         }
     }
     ///on sauvegarde les chemins des fichiers utiles, qui seront utilisées par la variable electron plus tard
-    require("./electron/writeFile")(path.resolve(dir,"electron","paths.json"),JSON.stringify(electronPaths));
+    require("./writeFile")(path.resolve(dir,"electron","paths.json"),JSON.stringify(electronPaths));
     return r;
 }

package/bin/electron/index copy.js

@@ -0,0 +1,48 @@
+#!/usr/bin/env node
+/**@see : https://blog.shahednasser.com/how-to-create-a-npx-tool/ */
+'use strict';
+process.on('unhandledRejection', err => {
+  throw err;
+});
+const spawnAsync = require('cross-spawn').spawn;
+const { realpathSync } = require('fs-extra');
+
+//const { ensureMinProjectSetupAsync } = require('../build/Config');
+
+const args = process.argv.slice(2);
+
+const scriptIndex = args.findIndex(x => x === 'start' || x === 'customize');
+const script = scriptIndex === -1 ? args[0] : args[scriptIndex];
+const nodeArgs = scriptIndex > 0 ? args.slice(0, scriptIndex) : [];
+console.log(args," is argggggg",script);
+if (['start', 'customize'].includes(script)) {
+  spawnAsync(
+    'node',
+    nodeArgs.concat(require.resolve('./scripts/' + script)).concat(args.slice(scriptIndex + 1)),
+    { stdio: 'inherit' }
+  ).then(result => {
+    if (result.signal) {
+      if (result.signal === 'SIGKILL') {
+        console.log(
+          'The build failed because the process exited too early. ' +
+            'This probably means the system ran out of memory or someone called ' +
+            '`kill -9` on the process.'
+        );
+      } else if (result.signal === 'SIGTERM') {
+        console.log(
+          'The build failed because the process exited too early. ' +
+            'Someone might have called `kill` or `killall`, or the system could ' +
+            'be shutting down.'
+        );
+      }
+      process.exit(1);
+    }
+    process.exit(result.status);
+  });
+} else if (script === undefined) {
+  const projectRoot = realpathSync(process.cwd());
+
+  //ensureMinProjectSetupAsync(projectRoot);
+} else {
+  console.log('Invalid command "' + script + '".');
+}

package/bin/electron/index.js

@@ -0,0 +1,11 @@
+#!/usr/bin/env node
+/**@see : https://blog.shahednasser.com/how-to-create-a-npx-tool/ */
+'use strict';
+process.on('unhandledRejection', err => {
+  throw err;
+});
+const args = process.argv.slice(2);
+
+console.log(args," is arggggg");
+
+process.exist();

package/bin/electron/scripts/customize.js

@@ -0,0 +1,21 @@
+const chalk = require('chalk');
+const fs = require('fs-extra');
+
+const { copyTemplateToProject, ensureMinProjectSetupAsync } = require('..');
+process.on('unhandledRejection', err => {
+  throw err;
+});
+
+const projectRoot = fs.realpathSync(process.cwd());
+
+console.log();
+console.log(chalk.magenta('\u203A Copying Expo Electron main process to local project...'));
+
+copyTemplateToProject(projectRoot);
+ensureMinProjectSetupAsync(projectRoot);
+
+console.log(
+  chalk.magenta(
+    '\u203A You can now edit the Electron main process in the `electron/main` folder of your project...'
+  )
+);

package/bin/electron/scripts/start.js

@@ -0,0 +1,8 @@
+const { ensureElectronConfig } = require('..');
+
+ensureElectronConfig(process.cwd());
+
+process.env.ELECTRON_DISABLE_SECURITY_WARNINGS = 1;
+process.env.platform = "electron";
+
+require('electron-webpack/out/dev/dev-runner');

package/electron/webpack.config.js

@@ -0,0 +1,84 @@
+/**@see : https://www.npmjs.com/package/@expo/webpack-config/v/0.11.4 */
+const createExpoWebpackConfigAsync = require('@expo/webpack-config')
+const path = require("path");
+const isObj = x => x && typeof x =='object' && !Array.isArray(x);
+// Expo CLI will await this method so you can optionally return a promise.
+module.exports = async function(env, argv,opts) {
+    const dir = path.resolve(__dirname);
+    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';
+    if(isElectron){
+       env.platform = "electron";
+       env.mode = env.mode =="production" && "production" || "development";
+       env.pwa = false;
+    }
+    const transpileModules = Array.isArray(opts.transpileModules)? opts.transpileModules : [];
+    const config = await createExpoWebpackConfigAsync(
+      {
+        ...env,
+        babel: {
+          ...babel,
+          dangerouslyAddModulePathsToTranspile: [
+            // Ensure that all packages starting with @fto-consult are transpiled.
+            '@fto-consult',
+            ...transpileModules,
+          ],
+        },
+      },
+      argv
+    );
+    config.module.rules.push(
+      {
+          test: /.mjs$/,
+          include: /node_modules/,
+          include: /node_modules/,
+          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') {
+      config.devServer.compress = false;
+    }
+    // Or prevent minimizing the bundle when you build.
+    if (config.mode === 'production') {
+      config.optimization.minimize = true;
+    }
+    config.performance = typeof config.performance =="object" && config.performance ? config.performance : {};
+    config.performance.hints = "hints" in config.performance ? config.performance.hints : false;
+    config.performance.maxEntrypointSize = typeof config.performance.maxEntrypointSize =='number'? config.performance.maxEntrypointSize : 512000;
+    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,dir});
+    if(isElectron){
+      const electronPath = process.cwd();
+      config.output = config.output || {};
+      config.output.publicPath = "./";
+      config.output.path = path.join(electronPath,"dist");
+      if(isObj(config.node)){
+        config.resolve.fallback = isObj(config.resolve.fallback)? config.resolve.fallback : {};
+        for(let i in config.node){
+           if(config.node[i] =="empty"){
+             config.resolve.fallback[i] = false;
+           } else config.resolve.fallback[i] = config.node[i];
+           delete config.node[i];
+        }
+        config.resolve.byDependency = {
+          // ...
+          esm: {
+            mainFields: ['browser', 'module'],
+          },
+          commonjs: {
+            aliasFields: ['browser'],
+          },
+          url: {
+            preferRelative: true,
+          },
+        }
+      }
+    }
+    return config;
+};

package/electron/webpack.config.old.js

@@ -0,0 +1,45 @@
+const createExpoWebpackConfigAsync = require('@expo/webpack-config');
+const envManager = require("@expo/webpack-config/env");
+const addons = require("@expo/webpack-config/addons");
+const jsonfile = require('jsonfile');
+const path = require("path");
+const mode = 'development';
+const isObj = x => x && typeof x =='object' && !Array.isArray(x);
+/***@see : https://www.npmjs.com/package/@expo/webpack-config */
+module.exports = async function(env, argv) {
+  const projectRoot = process.cwd()
+  const electronPath = path.join(projectRoot,'electron');
+  env = env || {};
+  env.projectRoot = projectRoot;
+  env.platform = "electron";//isObj(env.platform)? env.platform : {};//'web'///electron;
+  //env.platform.type = "electron";
+  env.locations = (0, envManager.getPaths)(projectRoot)
+  env.pwa = false;
+  let config = (0, addons.withAlias)({}, (0, envManager.getAliases)(projectRoot));
+  if(argv && typeof argv =='object' && (argv.mode =='production' || argv.mode =="development")){
+    env.mode = argv.mode;
+  } else {
+      env.mode = mode;
+  }
+  config = await createExpoWebpackConfigAsync(env, argv);
+  config.output = config.output || {};
+  config.output.publicPath = "./";
+  config.output.path = path.join(electronPath,"dist");
+  if (!config.plugins) config.plugins = [];
+  if (!config.resolve) config.resolve = {}; 
+  for(let i in config.plugins){
+      let pl = config.plugins[i];
+      //on recherche le fichier html build de webpack
+      if(pl && typeof pl =='object' && pl.options && typeof pl.options =='object'){
+          if(typeof pl.options.filename =="string" && pl.options.filename.toLowerCase().includes("index.html")){
+               pl.options.filename = path.join(config.output.path,"index.html");
+               break;
+          }
+      }
+  }
+  //console.log(config.resolve.extensions, "is r extensions")
+  config.resolve.extensions = (0, envManager.getModuleFileExtensions)('electron', 'web');
+  //jsonfile.writeFileSync("electron/config.back.json", config, {spaces: 4});
+  console.log("******electron config file generated**********");
+  return config;
+};

package/is-os-case-sensitive.js

@@ -0,0 +1,27 @@
+// Copyright 2022 @fto-consult/Boris Fouomene. All rights reserved.
+// Use of this source code is governed by a BSD-style
+// license that can be found in the LICENSE file.
+
+const path = require("path");
+const dir = path.resolve(__dirname);
+const fs = require("fs");
+
+/*** check weather os is case sensitive 
+ * @see : https://stackoverflow.com/questions/27367261/check-if-file-exists-case-sensitive/52908385#52908385
+*/
+function fileExistsWithCaseSync(filepath) {
+    var dir = path.dirname(filepath);
+    if (dir === '/' || dir === '.') return true;
+    var filenames = fs.readdirSync(dir);
+    if (filenames.indexOf(path.basename(filepath)) === -1) {
+        return false;
+    }
+    return fileExistsWithCaseSync(dir);
+}
+
+/***vérifie si le système supporte la cassse où non 
+ * c'est à dire si 2 noms de fichiers ayant la case différentes sont considérés comme le même où pas
+*/
+module.exports = (()=>{
+    return fileExistsWithCaseSync(path.resolve(dir,"metro.config.js")) == fileExistsWithCaseSync(path.resolve(dir,"Metro.config.js"))
+})();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fto-consult/expo-ui",
-  "version": "3.2.0",
+  "version": "3.3.0",
   "description": "Bibliothèque de composants UI Expo,react-native",
   "main": "index.js",
   "scripts": {
@@ -42,7 +42,9 @@
     "delete-node-modules": "rimraf ./**/node_modules",
     "modifier-url-remote-git": "git remote set-url origin 'https://borispipo@github.com/borispipo/smart-eneo.git'"
   },
-  "bin": "bin/index.js",
+  "bin": {
+    "electron": "bin/electron/index.js"
+  },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/borispipo/expo-ui.git"
@@ -70,7 +72,6 @@
     "@react-navigation/native-stack": "^6.9.7",
     "@shopify/flash-list": "1.3.1",
     "conf": "^10.2.0",
-    "electron": "^22.1.0",
     "expo": "^47.0.8",
     "expo-camera": "~13.1.0",
     "expo-clipboard": "~4.0.1",
@@ -82,7 +83,6 @@
     "expo-system-ui": "~2.0.1",
     "expo-web-browser": "~12.0.0",
     "file-saver": "^2.0.5",
-    "fs-extra": "^11.1.0",
     "google-libphonenumber": "^3.2.31",
     "htmlparser2-without-node-native": "^3.9.2",
     "mongo-parse": "^2.1.0",

package/src/auth/Login.js

@@ -86,7 +86,11 @@ export default function LoginComponent(props){
             },1000)
         }
     },[withPortal])
-    const {header,withScrollView:customWithScrollView,children,initialize,contentTop,data:loginData,canGoToNext,keyboardEvents,onSuccess:onLoginSuccess,mutateData,beforeSubmit:beforeSubmitForm,canSubmit:canSubmitForm,onStepChange,...loginProps} = defaultObj(getProps({
+    const {header,
+        headerTopContent:HeaderTopContent,
+        containerProps : customContainerProps,
+        contentProp,
+        withScrollView:customWithScrollView,children,initialize,contentTop,data:loginData,canGoToNext,keyboardEvents,onSuccess:onLoginSuccess,mutateData,beforeSubmit:beforeSubmitForm,canSubmit:canSubmitForm,onStepChange,...loginProps} = defaultObj(getProps({
         ...state,
         setState,
         state,
@@ -101,6 +105,8 @@ export default function LoginComponent(props){
         ProviderSelector,
         previousButtonRef,
     }));
+    const containerProps = defaultObj(customContainerProps);
+
     React.useEffect(()=>{
         Preloader.closeAll();
         /*** pour initializer les cordonnées du composant login */
@@ -191,13 +197,22 @@ export default function LoginComponent(props){
     });
     const withScrollView = typeof customWithScrollView =='boolean'? customWithScrollView : true;
     const Wrapper = withPortal ? ScreenWithoutAuthContainer  : withScrollView ? ScrollView: View;
+    const mQueryUpdateProps = (a)=>{
+        const style = StyleSheet.flatten([updateMediaQueryStyle(),containerProps.style]);
+        if(typeof containerProps.updateMediaQueryStyle =='function'){
+            return containerProps.updateMediaQueryStyle({style})
+        }
+        return {style};
+    };
     const wrapperProps = withPortal ? {appBarProps,authRequired:false,title:loginTitle,withScrollView} : { style:styles.wrapper};
+    const sH = React.isComponent(HeaderTopContent)? <HeaderTopContent
+        mediaQueryUpdateNativeProps = {mQueryUpdateProps}
+    /> : React.isValidElement(HeaderTopContent)? HeaderTopContent : null;
     return <Wrapper testID = {testID+"_Wrapper" }{...wrapperProps}>
         <DialogProvider ref={dialogProviderRef}/>
+        {sH}
         <Surface style={[styles.container,{backgroundColor}]} testID={testID}>
-            <Surface elevation = {0} mediaQueryUpdateNativeProps = {(a)=>{
-                return {style:updateMediaQueryStyle()}
-            }} testID={testID+"_Content"} style={[styles.content,updateMediaQueryStyle(),{backgroundColor}]}>
+            <Surface elevation = {0} {...containerProps} mediaQueryUpdateNativeProps = {mQueryUpdateProps} {...containerProps} testID={testID+"_Content"} style={[styles.content,updateMediaQueryStyle(),{backgroundColor},containerProps.style]}>
                 <FormData 
                     formName = {formName}
                     testID = {testID+"_FormData"}

package/src/components/Avatar/AutoHeightImage/index.js

@@ -1,5 +1,5 @@
 ///@see : https://github.com/vivaxy/react-native-auto-height-image
-import React, { useEffect, useState, useRef } from 'react';
+import React, { useEffect, useState, useRef } from '$react';
 import ImagePolyfill from './ImagePolyfill';
 import AnimatableImage from './AnimatableImage';
 import PropTypes from 'prop-types';
@@ -22,6 +22,7 @@ function AutoHeightImage(props) {
     maxHeight,
     onError,
     testID:cTestID,
+    preloader,
     ...rest
   } = props;
   const [height, setHeight] = useState(
@@ -29,14 +30,14 @@ function AutoHeightImage(props) {
       DEFAULT_HEIGHT
   );
   const mountedRef = useRef(false);
-
-  useEffect(function () {
+  const toolgeMounted = function () {
     mountedRef.current = true;
     return function () {
       mountedRef.current = false;
     };
-  }, []);
-
+  }
+  useEffect(toolgeMounted,[])
+  React.useOnRender(toolgeMounted,0);
   useEffect(
     function () {
       (async function () {
@@ -75,7 +76,7 @@ function AutoHeightImage(props) {
         onError={onError}
         {...rest}
       />
-      {!mountedRef.current ? <ActivityIndicator testID={testID+"_ActivityIndicator"} color={theme.colors.primary}/> : null}
+      {!mountedRef.current && preloader !== false && (!width || !height) ? <ActivityIndicator testID={testID+"_ActivityIndicator"} color={theme.colors.primary}/> : null}
   </View>
   );
 }
@@ -85,13 +86,15 @@ AutoHeightImage.propTypes = {
   width: PropTypes.number.isRequired,
   maxHeight: PropTypes.number,
   onHeightChange: PropTypes.func,
-  animated: PropTypes.bool
+  animated: PropTypes.bool,
+  preloader : PropTypes.bool,//si l'on affichera le preloader
 };
 
 AutoHeightImage.defaultProps = {
   maxHeight: Infinity,
   onHeightChange: NOOP,
-  animated: false
+  animated: false,
+  preloader : true,
 };
 
 export default AutoHeightImage;