SmartCommon
SmartCommon est la bibliothèque de composants React partagés pour toutes les applications SmartMaker.
Repository : https://inligit.fr/cap-rel/dolibarr/smartmaker/smartcommon
Installation
1. Configurer le registry npm
Ajouter dans votre fichier .npmrc :
@cap-rel:registry=https://inligit.fr/api/v4/projects/197/packages/npm/
2. Installer le package
npm install @cap-rel/smartcommon
3. Importer les styles
Dans votre fichier main.jsx :
import "@cap-rel/smartcommon/dist/smartcommon-style.css";
Configuration des headers API
Pour les requêtes authentifiées :
headers: {
Authorization: `Bearer ${token}`,
Accept: "application/json",
"Content-Type": "application/json",
}
Structure de la librairie
Providers (App)
Composants qui fournissent le contexte à l'application :
| Provider | Description |
|---|---|
Provider | Provider principal qui englobe tous les autres |
LibConfigProvider | Configuration globale de la librairie |
ReduxProvider | État global Redux |
I18nextProvider | Traductions i18next |
ApiProvider | Contexte pour les appels API |
GlobalStatesProvider | États globaux partagés |
NavigationProvider | Contexte de navigation |
Router | Routeur interne React |
Toaster | Notifications toast |
ConfirmProvider | Dialogues de confirmation et alerte |
ErrorBoundary | Capture des erreurs React |
UpdatePrompt | Notification de mise à jour PWA |
Composants de formulaire (Form)
| Composant | Description |
|---|---|
Input | Champ de saisie texte |
Textarea | Zone de texte multiligne |
Select | Liste déroulante |
Boolean | Interrupteur on/off |
Checker | Case à cocher |
RadioBar | Groupe de boutons radio |
Calendar | Sélecteur de date |
Timer | Sélecteur d'heure |
Range | Slider de valeur |
Rater | Notation par étoiles |
ColorPicker | Sélecteur de couleur |
IconSelect | Sélecteur d'icône |
AddressInput | Saisie d'adresse complète |
Gps | Coordonnées GPS |
SignaturePad | Zone de signature |
Editor | Éditeur markdown |
FilesUploader | Upload de fichiers |
PhotosUploader | Upload de photos |
AudiosUploader | Enregistrement audio |
VideosUploader | Enregistrement vidéo |
Array | Champs répétables |
Form | Conteneur de formulaire |
Composants d'affichage (Formats)
| Composant | Description |
|---|---|
String | Affichage de texte court |
Text | Affichage de texte long |
Number | Affichage de nombre formaté |
Datetime | Affichage de date/heure |
Duration | Affichage de durée |
Email | Affichage d'email cliquable |
Url | Affichage d'URL cliquable |
PhoneNumber | Affichage de téléphone cliquable |
Address | Affichage d'adresse |
Coordinates | Affichage de coordonnées GPS |
Color | Affichage de couleur |
Icon | Affichage d'icône |
Tags | Affichage de tags |
Files | Affichage de fichiers |
Signature | Affichage de signature |
Composants UI (Main)
| Composant | Description |
|---|---|
Page | Conteneur de page avec animations |
Block | Bloc de contenu |
Panel | Panneau coulissant |
Popup | Fenêtre modale |
List | Liste d'éléments |
ListItem | Élément de liste |
Carousel | Carrousel d'images |
CarouselItem | Élément de carrousel |
Button | Bouton |
Petits composants (Little)
| Composant | Description |
|---|---|
Button | Bouton compact |
Icon | Icône (react-icons) |
Spinner | Indicateur de chargement |
Tag | Étiquette/badge |
Navigation
| Composant | Description |
|---|---|
Navbar | Barre de navigation supérieure |
Sidebar | Menu latéral |
Tabbar | Barre d'onglets (mobile) |
TabbarItem | Élément de tabbar |
UpperNavbarItem | Élément navbar haut |
LowerNavbarItem | Élément navbar bas |
Autres composants (Others)
| Composant | Description |
|---|---|
Calculator | Calculatrice complète (FAB, historique, mémoire, clavier) |
DataTable | Tableau de données |
Chart | Graphiques |
Map | Carte géographique |
Modal | Fenêtre modale |
SearchBar | Barre de recherche |
Stepper | Indicateur d'étapes |
Overlay | Superposition/fond |
Help | Aide contextuelle |
LazyLink | Lien avec chargement différé |
Synchronisation (Sync)
| Composant | Description |
|---|---|
ConflictResolver | Interface de résolution de conflits (comparaison client/serveur, merge champ par champ) |
Hooks disponibles
Voir la page hooks pour la documentation complète des hooks.
Exemple d'utilisation
import { Page, Block, Button, Input } from '@cap-rel/smartcommon';
export default function MyPage() {
return (
<Page title="Ma page">
<Block>
<Input name="email" label="Email" type="email" />
<Button onClick={() => console.log('click')}>
Valider
</Button>
</Block>
</Page>
);
}