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
`RouteGuard`	Garde de route (auth + identification d'appareil) - voir détails

Composants de formulaire (Form)

Composant	Description
`Input`	Champ de saisie texte
`Textarea`	Zone de texte multiligne
`Select`	Liste déroulante
`SearchableSelect`	Liste déroulante avec recherche
`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

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
`Fab`	Bouton d'action flottant (speed-dial)
`DebugConsole`	Console de debug intégrée (détachable)
`DebugWarnings`	Breakpoints automatiques sur warnings React
`KeyboardStickyAction`	Barre d'action qui reste visible au-dessus du clavier virtuel
`LazyLink`	Lien avec chargement différé

Composants high-level (page-replacing)

Ces composants encapsulent un flux utilisateur complet. Voir la page dédiée Composants avancés pour les props, slots et exemples.

Composant	Description
`LoginComponent`	Formulaire de connexion Dolibarr + flux QR pair smartAuth intégré
`DeviceIdentificationComponent`	Formulaire d'identification d'appareil (premier device ou pairing)
`AboutModal`	Modal "À propos" avec vérification des mises à jour PWA
`BarcodeScanner`	Scanner QR / codes-barres plein écran (lazy-load `html5-qrcode`)
`ProductCategoryBrowser`	Navigation modale dans un catalogue produit (sélection avec qté/remise)
`PhotoAnnotator`	Placement de marqueurs sur une photo, lié à un objet métier

Synchronisation (Sync)

Composant	Description
`ConflictResolver`	Interface de résolution de conflits (comparaison client/serveur, merge champ par champ)

Hooks disponibles

Voir la page /front/hooks pour la documentation complète des hooks.

Personnaliser l'apparence

La plupart des composants acceptent une prop variant qui permet d'appliquer un jeu de props nommé, sans répéter les classes à chaque usage. Voir Variants de composants.

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>
  );
}