@fto-consult/expo-ui 8.49.0 → 8.50.0

package/bin/create-app/babel.config.js

@@ -7,6 +7,7 @@ module.exports = function(api) {
       $components : path.resolve($src,"components"),
       $navigation : path.resolve($src,"navigation"),
       $screens : path.resolve($src,"screens"),
+      $layouts : path.resolve($src,"layouts"),
       $database: path.resolve($src, "database"), //le repertoire dédié au données d'accès à la base de données
       //...your custom module resolver alias, @see : https://www.npmjs.com/package/babel-plugin-module-resolver
     }

package/bin/create-app/dependencies.js

@@ -11,8 +11,8 @@
 	"@react-navigation/native-stack": "^6.9.25",
 	"@react-navigation/stack": "^6.3.28",
 	"@shopify/flash-list": "1.6.3",
-	"expo": "^50.0.11",
-	"expo-camera": "~14.0.6",
+	"expo": "^50.0.13",
+	"expo-camera": "~14.1.1",
 	"expo-clipboard": "~5.0.1",
 	"expo-font": "~11.10.3",
 	"expo-image-picker": "~14.7.1",
@@ -23,7 +23,7 @@
 	"expo-system-ui": "~2.9.3",
 	"expo-web-browser": "~12.8.2",
 	"react": "18.2.0",
-	"react-native": "0.73.4",
+	"react-native": "0.73.5",
 	"react-native-safe-area-context": "4.8.2",
 	"react-native-screens": "~3.29.0",
 	"react-native-svg": "14.1.0",

package/bin/create-app/src/database/tables/index.js

@@ -1,25 +1,6 @@
 /****
     la liste des tables de donnéees à exporter, de la forme : 
     [tableName1] : {
-       fields : { //la liste des champs liés à la table de données
-            [field1] : {
-                label | text : <string | ReactComponent>, le texte ou libelé lié au champ
-                type : <string>, le type de field  par exemple : text,password, email, switch, checkbox, tel, select, et bien d'autres
-                
-                //cette fonction est appelée à chaque fois que les premiers règles de validations ont été conclus lors de la validation du champ. Elle doit retourner soit un boolean, une chaine de caractère, un objet ou une promesse
-                    //si une chaine de caractère est retournée, alors la validation du champ considère qu'il s'agit d'une erreur et le message est affiché comme erreur de validation du champ
-                    //si un objet est retourné et cet objet contient un champ message | msg de type string, alors le validateur considère qu'il s'agit d'une erreur et le champ en question est affiché comme message de l'erreur 
-                    //si une promese est retournée, alors la fonction attendra que la promesse soit résolue 
-                        1. si la promesse resoud une chaine de caractère ou un objet idem au cas précédent, ladite chaine est condisérée comme une erreur
-                        2. si la promesse renvoie une erreur, alors le validateur considère comme un échec de validation et le message lié à l'erreur est affiché comme message d'erreur de validation
-                    //si false est retournée, alors rien n'est fait et le status de ce champ reste toujours à invalide. il sera donc impossible d'enregistrer le formulaire form data
-                    //si true est retourneé, alors la formField est valide 
-                onValidatorValid : ({value,context,....rest}) => <boolean | object {} | string | Promise <boolean | object : {} | string>>,
-                
-                //Cette fonction est appélée à chaque échec de validation du form field
-                onValidatorNoValid : ({value,context,...rest}) => <any>
-            }
-       },
        tableName <string>, le nom de la table name
        label | text <string>, le titre à donner à la table data
        icon : <string | ReactComponent>, l'icon de la table data,
@@ -31,7 +12,7 @@
        drawerSection <string>, //le nom de la section associé au drawer dans lequel figurera le table data
        print <function ({data,...settings})>=> <Promise<{content:[],...rest}>, //la fonction utile pour l'impression de la tabel de données suivant les recommandation de la libraririe pdfmake
        printOptions <object>, //les options à passer à la fonction print,
-       
+       newElementLabel : <string>, //le texte à utiliser pour le rendu du bouton lorsqu'il s'agit d'un nouvel element de la table data
        databaseStatistics <function ()=> <boolean> | boolean>, //si la table data figurera dans les Statistiques en BD, validable si le composant DatabaseStatistics est appélé dans l'application
        
        showInFab <boolean | function()=><boolean>, //spécifie si un bouton lié à la table sera affiché dans le composant Fab
@@ -48,10 +29,51 @@
                     }
            }  
        fabProps { boolean<false> | object|function({tableName})}, //si fabProps vaux false ou retourne false, alors le table data ne s'affichera pas dans le composant Fab
+       fields : { //la liste des champs liés à la table de données
+            [field1] : {
+                label | text : <string | ReactComponent>, le texte ou libelé lié au champ
+                type : <string>, le type de field  par exemple : text,password, email, switch, checkbox, tel, select, et bien d'autres
+                sortable : <boolean>, //si la colonne sera triable
+                filterable : <boolean> //si la colonne sera filterable
+                form : <boolen> //si la colonne sera affiché et pris en compte dans le formulaire (FormData) lié à l'enregistrement des données de la table data
+                datagrid : <boolean> //si la colonne sera affiché et pris en compte dans le composant Datagrid
+                //cette fonction est appelée à chaque fois que les premiers règles de validations ont été conclus lors de la validation du champ. Elle doit retourner soit un boolean, une chaine de caractère, un objet ou une promesse
+                    //si une chaine de caractère est retournée, alors la validation du champ considère qu'il s'agit d'une erreur et le message est affiché comme erreur de validation du champ
+                    //si un objet est retourné et cet objet contient un champ message | msg de type string, alors le validateur considère qu'il s'agit d'une erreur et le champ en question est affiché comme message de l'erreur 
+                    //si une promese est retournée, alors la fonction attendra que la promesse soit résolue 
+                        1. si la promesse resoud une chaine de caractère ou un objet idem au cas précédent, ladite chaine est condisérée comme une erreur
+                        2. si la promesse renvoie une erreur, alors le validateur considère comme un échec de validation et le message lié à l'erreur est affiché comme message d'erreur de validation
+                    //si false est retournée, alors rien n'est fait et le status de ce champ reste toujours à invalide. il sera donc impossible d'enregistrer le formulaire form data
+                    //si true est retourneé, alors la formField est valide 
+                onValidatorValid : ({value,context,....rest}) => <boolean | object {} | string | Promise <boolean | object : {} | string>>,
+                
+                //Cette fonction est appélée à chaque échec de validation du form field
+                onValidatorNoValid : ({value,context,...rest}) => <any>
+                
+                width : 180, //définit la longueur de la colonne dans le composant datagrid
+                
+                //si vous souhaitez personnaliser le rendu de la colonne dans le composant Datagrid
+                datagrid : {
+                    render : ({rowData,columnField,columnDef,...rest})=><ReactNode> 
+                },
+                visible : <boolean>, //si  le champ sera visible (par défaut dans le datagrid) et dans le formulaire d'enregistrement ou modification de la données lié à la table data
+                readOnly : <boolean>, //si le champ sera en lecture seul dans le formulaire d'enregistrement d'une nouvelle données lié à la table data
+                disabled : <boolean>, //si le champ sera désactivé dans le formulaire d'enregistrement/modification de la données liées à la table data
+                readOnlyOnEditing : <boolean>, //si le champ sera en mode lecture seule au moment de la modification de la données liée à la table data
+                visibleOnlyOnCreate : <boolean>, //si le champ est visible dans le formulaire uniquement en cas de création    
+                visibleOnlyOnEditing : <boolean>, //si le champ sera visible uniquement au moment de la modification de la données liées à la table data
+                disabledOnEditing : <boolean>, //si le champ est désactivé dans le formulaire lorsqu'il s'agit de la modification de la données liée à la table data
+                
+                primaryKey : <boolean>, //si le champ fait partie des clés primaire de la table data. Par défaut, tous les champs de type clé primaire sont en mode lecture seule en cas de modification de la données. il est indispensable pour chaque table de données de toujours spécifier au moins un champ comme clé primaire. tous les champs ayant cette propriétés à true sont utilisés à chaque fois pour évaluer l'identifiant unique lié àla table data mais aussi pour déterminer s'il s'agit d'une mise à jour où pas
+            },
+            ....
+            [fieldN] : {....}
+       }, 
+        
     }
 */
 export default {
-
+    users : require("./users").default,
 }
 
 export {default as getTable} from "./getTable";

package/bin/create-app/src/database/tables/users/accordion.js

@@ -0,0 +1,11 @@
+import React from "$react";
+import DateLib from "$clib/date";
+
+export default function accordion({rowData}){
+    return {
+        content : `${rowData.email}`,
+        title : rowData?.username,
+        avatar : rowData.avatar,
+        right : DateLib.format(rowData.birthdate),
+    }
+}

package/bin/create-app/src/database/tables/users/addIcon.js

@@ -0,0 +1 @@
+export default 'material-person-add'

package/bin/create-app/src/database/tables/users/datagrid.js

@@ -0,0 +1,42 @@
+import accordion from "./accordion";
+import table from "./table";
+import {navigateToTableData} from "$enavigation/utils";
+import editIcon from "./editIcon";
+import addIcon from "./addIcon";
+import newElementLabel from "./newElementLabel";
+import { generateData } from "./utils";
+
+export default {
+    fetcher : (url,options)=>{ //la fonction fetcher à passer au composant SWRDatagrid
+        return Promise.resolve(generateData(1000)); //génère 100 utilisateurs à l'aide de la librarire faker
+    },
+    accordionProps : {
+        accordion,
+        bottomSheetTitle : ({rowCounterIndex})=>{
+            return "Détail sur l'utilisateur N° "+rowCounterIndex.formatNumber();
+        },
+    },
+    /*** les actions du datagrid lorsqu'on sélectionne les éléments de la table */
+    selectedRowsActions : ({selectedRows,selectedRowsCount,...rest})=>{
+        return {
+            edit : {
+                text : 'Modifier/Consulter',
+                icon : editIcon,
+                perm : `${table}:update|read`, //cette action n'est affiché si et seulement si l'utilisateur a la permission de modifier la table 
+                onPress : ({selectedRows})=>{
+                    navigateToTableData(table,{datas:selectedRows});
+                }
+            },
+        }
+    },
+    actions : [
+        {
+            text : newElementLabel,
+            icon : addIcon,
+            perm : `${table}:create`, //cette action n'est affichée si et seulement si l'utilisateur a la permission de créer un élément lié à la table data
+            onPress : ()=>{
+                navigateToTableData(table,{});
+            }
+        }
+    ],
+}

package/bin/create-app/src/database/tables/users/editIcon.js

@@ -0,0 +1 @@
+export default "pencil";

package/bin/create-app/src/database/tables/users/fields.js

@@ -0,0 +1,30 @@
+
+export default {
+    userId : {
+        primaryKey : true,
+        text :"Id",
+        type : "id", //il s'agit d'un champ de type id
+        visibleOnlyOnEditing : true, //l'id de sera généré depuis la base de données, donc pas question d'afficher au moment de création de la table data
+        width : 180, //spécifier la longueur de la colonne dans le composant datagrid
+    },
+    username : {
+        text : "Name",
+        width : 220,
+    },
+    amount : {
+        type : "number",
+        label : "Amount",
+    },
+    email : {
+        type : "email",
+        label : 'Email',
+    },
+    avatar : {
+       type : "image",
+       label: 'Avatar',
+    },
+    birthdate : {
+        type : "date",
+        label : "Date",
+    },
+}

package/bin/create-app/src/database/tables/users/index.js

@@ -0,0 +1,10 @@
+export default {
+    table : require("./table").default,
+    icon : 'material-people',
+    title : "Exemple table : Utilisateurs",
+    datagrid : require("./datagrid").default,
+    perms : require("./perms").default,
+    newElementLabel : require("./newElementLabel").default,
+    sortable : false, //la table n'est pas triable
+    filterable : false,//la table n'est pas filterable
+}

package/bin/create-app/src/database/tables/users/newElementLabel.js

@@ -0,0 +1 @@
+export default "Nouvel utilisateur";

package/bin/create-app/src/database/tables/users/perms.js

@@ -0,0 +1,15 @@
+export default {
+    delete : false, //il sera impossible d'assigner la permission de suppression à un utilisateur
+    readPerms : {
+        text : "Visualiser permissions",
+        tooltip : "Peut visualiser les permissions des autres utilisateurs"
+    },
+    editPerms : {
+        text : "Modifier permissions",
+        tooltip : "Peut Modifier les permissions des autres utilisateurs"
+    },
+    groupable : {
+        text : "Grouper les données de liste",
+        tooltip : "Peut grouper les données de liste",
+    }
+}

package/bin/create-app/src/database/tables/users/table.js

@@ -0,0 +1 @@
+export default "users";

package/bin/create-app/src/database/tables/users/utils.js

@@ -0,0 +1,20 @@
+import { faker } from '@faker-js/faker';
+export function createRandomUser (){
+    return {
+      userId: faker.string.uuid(),
+      username: faker.internet.userName(),
+      amount : faker.number.int(),
+      email: faker.internet.email(),
+      avatar: faker.image.dataUri({height:50,width:50}),
+      password: faker.internet.password(),
+      birthdate: faker.date.birthdate(),
+      registeredAt: faker.date.past(),
+    };
+  }
+  
+  export const generateData = (count)=>{
+    count = typeof count =='number' && count > 5 ? count : 10000;
+    return faker.helpers.multiple(createRandomUser, {
+        count,
+    });
+  }

package/bin/create-app/src/layouts/TableData/List.js

@@ -0,0 +1,47 @@
+import SWRDatagrid from "$ecomponents/Datagrid/SWRDatagrid";
+import getTable from "$database/tables/getTable";
+import { defaultStr } from "$cutils";
+import {forwardRef} from "$react";
+import fetch from "$capi/fetch";
+
+const TableDataListLayoutComponent = forwardRef(
+  ({ tableName, table,fetcher, ...rest }, ref) => {
+    tableName = defaultStr(tableName, table).trim().toUpperCase();
+    const tableObj = Object.assign({}, getTable(tableName));
+    return ( //le SWRDatagrid est le composant datagrid réicrit à l'aide de la librairie swr : (https://swr.vercel.app/) utile pour effectuer le fetching des données distantes
+      <SWRDatagrid
+        fetchPath = {tableName} //le chemin (path) à passer à la fonction useSWR, @voir : https://swr.vercel.app/
+        fetchPathKey={tableName} //IL s'agit d'une chaine de caractère identifiant de manière unique le chemin fetchPath. Si vous faites appels plusieurs fois à ce composants, rassurez vous à chaque fois que cette clié soit distinct pour chaque appel car sionon les données récupérées depuis la BD seront identiques pour tous les appels du composant
+        sessionName={tableName} //le nom de la session, utile pour persister les paramètres liés au datagrid de la table data
+        filterable={true} //si la table de données est filterable, spécifiez la valeur false, pour que les données ne soit pas filtrable
+        canFetchOnlyVisibleColumns={false} //si uniquement les colonnes visisible seront récupérérs depuis la base de données, via le champ fields des options envoyés à la fonction fetcher
+        parseMangoQueries = {true} //Spécifiez la valeur false, si vous utilisez une base de données qui accepte les requêtes mangoes (Voir https://www.mongodb.com/docs/manual/tutorial/query-documents) et true pour un backend lié à une BD relationnelle
+        {...rProps}
+        {...defaultObj(tableObj.datagrid)} //les props du datagrid lié à la table data
+        exportToExcelIsAllowed={"{0}:exporttoexcel".sprintf(tableName)} //la permission pour l'export des données de la table data au format Excel, vous pouvez définir également une fonction de la forme : ()=><boolean>
+        exportToPDFIsAllowed={"{0}:exporttopdf".sprintf(tableName)} //la permission pour l'export des données au format pdf, vous pouvez également définir une fonction de la forme : ()=><boolean>
+        {...rest}
+        ref={ref}
+        fetcher={(url, opts) => {
+          if(typeof fetcher ==="function"){
+            return fetcher(url,opts);
+          }
+          delete opts.fields;
+          delete opts?.fetchOptions?.fields;
+          console.log(opts.fetchOptions," les options à utiliser pour effectuer le fetch distant des données");
+          console.log(url," l'url de la requête")
+          console.log(opts.fetchOptions?.where," les options de filtres ")
+          //implémenter votre logique de récupération des données distance
+          return fetch(url, opts);
+        }}
+        table={tableObj}
+      />
+    );
+  }
+);
+
+export default TableDataListLayoutComponent;
+
+TableDataListLayoutComponent.displayName = "TableDataListLayoutComponent";
+
+TableDataListLayoutComponent.propTypes = {};

package/bin/create-app/src/layouts/TableData/index.js

@@ -0,0 +1,2 @@
+
+export {default as List} from "./List";

package/bin/create-app/src/screens/TableData/TableDataListScreen.js

@@ -1,9 +1,9 @@
 import Screen from "$eScreen";
-import SWRDatagrid from "$ecomponents/Datagrid/SWRDatagrid";
+import {List} from "$layouts/TableData";
 
 export default function TableDataListScreen (props){
     return <Screen {...props}>
-        <SWRDatagrid {...props}/>
+        <List {...props}/>
     </Screen>
 }
 

package/bin/create-app/src/screens/TableData/TableDataScreen.js

@@ -31,6 +31,21 @@ export default class TableDataScreenItem extends TableData{
     upsertToDB({data,tableName,...rest}){
         return Promise.resolve({data});
     }
+    prepareComponentProps (...rest){
+        return super.prepareComponentProps(...rest); //pour preparer les props qui seront rendu par le composant
+    }
+    /****
+        la fonction permet de préparer les champs du composant TableData avant qu'ils ne soient envoyés au composant FormData
+        Si cette fonction retourne false, alors le champ en question ne sera pas pris en compte dans le formulaire lors de l'enregistrement des données
+        Cette fonction est très utile pour non seulement filtrer les champs qui peuvent appraitre dans le formulaire, mais aussi modifier dynamiquement le status du champ en fonction des situatioins
+            - le champ isUpdate <boolean>, détermine s'il s'agit d'une mise à jour de la données (data) en cours 
+            - le champ name <string>, représente le nom du champ dans le formulaire, la clé du champ dans la props fields du table data
+            - le champ field <object>, représente l'objet field, l'une des valeurs de la propriétés fields du table data
+            - le champ data <object>, représente la donnée du table data en cours de traitement. Lorsque isUpdate est à false, data est un objet non vide et non null
+    */
+    prepareField({name,field,isUpdate,data,...rest}){
+        return super.prepareField({name,field,isUpdate,data,...rest});
+    }
 }
 
 TableDataScreenItem.Modal = true; //spécifiez si cet écran s'affiche en model ou non

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fto-consult/expo-ui",
-  "version": "8.49.0",
+  "version": "8.50.0",
   "description": "Bibliothèque de composants UI Expo,react-native",
   "react-native-paper-doc": "https://github.com/callstack/react-native-paper/tree/main/docs/docs/guides",
   "scripts": {

package/src/components/Button/Status.js

@@ -0,0 +1,76 @@
+import React from "$react";
+import theme from "$theme";
+import Label from "$ecomponents/Label";
+import {defaultObj} from "$cutils";
+import Icon from "$ecomponents/Icon";
+import {Pressable,StyleSheet} from "react-native";
+import PropTypes from "prop-types";
+
+const ButtonStatusComponent = React.forwardRef(({status,withIcon,color,backgroundColor,label,text,icon,editIconProps,editIcon,iconProps,onPress,editable,testID,left,right,labelProps,...containerProps},ref)=>{
+    labelProps = defaultObj(labelProps);
+    iconProps = defaultObj(iconProps);
+    testID = defaultStr(testID,"RN_ButtonStatusComponent_"+status);
+    const style = defaultObj(StyleSheet.flatten(containerProps.style));
+    color = theme.Colors.isValid(color) ? color : theme.Colors.isValid(style.color)? style.color : undefined;
+    backgroundColor = theme.Colors.isValid(backgroundColor) ? backgroundColor : theme.color.isValid(style.backgroundColor)?style.backgroundColor : undefined;
+    const rP = {style:[color && {color}, backgroundColor && {backgroundColor}]};
+    if(color){
+        rP.color = color;
+    }
+    if(backgroundColor){
+        rP.backgroundColor = backgroundColor;
+    }
+    label = React.isValidElement(label,true) && label || React.isValid(text,true) && text || null;
+    left = typeof left =='function'? left(rP) : left;
+    right = typeof right =='function'? right(rP) : right;
+    const icProps = {color,size:15,...iconProps,style:[theme.styles.noMargin,theme.styles.noPadding,iconProps.style],onPress}
+    return <Pressable ref={ref} onPres={onPress} testID={`${testID}_Container`} {...containerProps} style={[{borderRadius:15,paddingVertical:4,paddingHorizontal:10,alignSelf: 'flex-start'},theme.styles.row,theme.styles.flexWrap,backgroundColor && {backgroundColor},style]}>
+        {React.isValidElement(left)? left : null}
+        {withIcon !== false && React.isValidElement(icon,true) ? <Icon {...icProps} icon={icon} />:null}
+        {label ? <Label testID={`${testID}_Label`} {...labelProps} style={[color && {color},{fontSize:13},labelProps.style]}>{label}</Label> : null}
+        {withIcon !== false && editable && React.isValidElement(editIcon,true) ? <Icon {...icProps} icon={editIcon} {...defaultObj(editIconProps)}/>:null}
+        {React.isValidElement(right)? right : null}
+    </Pressable>
+});
+
+ButtonStatusComponent.displayName = "ButtonStatusComponent";
+
+export default ButtonStatusComponent;
+
+ButtonStatusComponent.defaultProps = {
+    withIcon : true,
+    editable : false,
+}
+
+ButtonStatusComponent.propTypes = {
+    label : PropTypes.oneOfType([ //le libelé à faire figurer sur le status
+        PropTypes.node,
+        PropTypes.element,
+        PropTypes.string,
+    ]),
+    text : PropTypes.oneOfType([ //alias à label
+        PropTypes.node,
+        PropTypes.element,
+        PropTypes.string,
+    ]),
+    labelProps : PropTypes.object, //les props à passer au composant Label, pour l'affichage du libelé du status
+    withIcon : PropTypes.bool, //si les icones seront affichés 
+    color : PropTypes.string, //la couleur du status
+    backgroundColor : PropTypes.string, //la couleur d'arrière plan
+    iconProps : PropTypes.object, //les props à passer aux différents icones du composant
+    onPres : PropTypes.func, //la fonction appelée lorsqu'on clique sur le status
+    editable : PropTypes.bool, //si le status est modifiable, dans ce cas une icone est affiché à droite lorsque le status est editable
+    left : PropTypes.oneOfType([ //l'élément react à rendre à gauche du texte (label)
+        PropTypes.func,
+        PropTypes.node,
+        PropTypes.string,
+        PropTypes.element,
+    ]),
+    right : PropTypes.oneOfType([ //l'élément react à rendre à droite du texte (label)
+        PropTypes.func,
+        PropTypes.node,
+        PropTypes.string,
+        PropTypes.element,
+    ]),
+    editIconProps : PropTypes.object,//les props de l'iconne edit
+}

package/src/components/Button/index.js

@@ -12,6 +12,7 @@ import ActivityIndicator from "$ecomponents/ActivityIndicator";
 import Surface from "$ecomponents/Surface";
 import Label from "$ecomponents/Label";
 import {defaultObj,defaultVal,defaultDecimal,defaultStr} from "$cutils";
+import {default as Status} from "./Status";
 
 import PropTypes from "prop-types";
 const white = "white";
@@ -466,4 +467,8 @@ ButtonComponent.propTypes = {
         return true;
     }
     return false;
-}
+}
+
+ButtonComponent.Status = Status;
+
+export {Status};

package/src/screens/Help/openLibraries.js

@@ -1,7 +1,7 @@
 module.exports = {
 	"@fto-consult/expo-ui": {
 		"name": "@fto-consult/expo-ui",
-		"version": "8.48.0",
+		"version": "8.49.0",
 		"repository": {
 			"type": "git",
 			"url": "git+https://github.com/borispipo/expo-ui.git"