---
title: "SmartCommon"
weight: 170
---

# 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](/front/composants-avances#routeguard) |

### 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 |

### 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 |
| `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](/front/composants-avances) 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](/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](/front/variants).

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