SmarMaker - Documentation
Docs» 03_front:smartcommon

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

Made with ❤ by CAP-REL · SmartMaker · GNU AGPL v3+
Code source · Faire un don
SmarMaker - Documentation
Traductions de cette page:
  • Français
  • Deutsch
  • English
  • Español
  • Italiano
  • Nederlands

Table of Contents

Table des matières

  • SmartCommon
    • Installation
      • 1. Configurer le registry npm
      • 2. Installer le package
      • 3. Importer les styles
    • Configuration des headers API
    • Structure de la librairie
      • Providers (App)
      • Composants de formulaire (Form)
      • Composants d'affichage (Formats)
      • Composants UI (Main)
      • Petits composants (Little)
      • Navigation
      • Autres composants (Others)
      • Synchronisation (Sync)
    • Hooks disponibles
    • Exemple d'utilisation
  • SmartAuth
  • SmartMaker - Back (PHP)
    • Mapping Dolibarr - React
  • SmartMaker - Front (React)
    • Animations de pages
    • Architecture
    • Astuces
    • Calendar
    • Composants et pages
    • Configuration du Provider
    • Debug et Logs
    • Hooks SmartCommon
    • PWA (Progressive Web App)
    • Requêtes API
    • Routage
    • SmartCommon
    • Stockage de données
    • Synchronisation offline
    • Thèmes
    • Traductions
  • HowTo - Pas à pas - Votre première application
    • Développement PHP (back)
    • Développement React (front)
    • Première étape : Module Builder Dolibarr
    • SmartAuth
    • SmartBoot : Un squelette prêt à l'emploi
  • Formation SmartMaker
    • Module 1 : Fondamentaux JavaScript ES6+
      • Chapitre 1 : Variables et Scope
      • Chapitre 2 : Fonctions
      • Chapitre 3 : Programmation Asynchrone
      • Chapitre 4 : Modules ES6
    • Module 2 : Introduction à React
      • Chapitre 1 : Philosophie React
      • Chapitre 2 : JSX
      • Chapitre 3 : Composants
    • Module 3 : Hooks React Fondamentaux
      • Chapitre 1 : useState
      • Chapitre 2 : useEffect
      • Chapitre 3 : useRef
      • Chapitre 4 : useContext
    • Module 4 : React Avancé
      • Chapitre 1 : useCallback et useMemo
      • Chapitre 2 : Custom Hooks
      • Chapitre 3 : Redux et Redux Toolkit
    • Module 5 : Architecture SmartMaker
      • Chapitre 1 : Structure du projet
      • Chapitre 2 : Configuration
      • Chapitre 3 : Flux de données
    • Module 6 : SmartCommon - Composants
      • Chapitre 1 : Mise en page
      • Chapitre 2 : Navigation
      • Chapitre 3 : Formulaires
      • Chapitre 4 : Affichage
    • Module 7 : SmartCommon - Hooks
      • Chapitre 1 : useApi
      • Chapitre 2 : Gestion d'état
      • Chapitre 3 : Hooks utilitaires
      • Chapitre 4 : Synchronisation Offline
    • Module 8 : Backend API (PHP)
      • Chapitre 1 : Routage
      • Chapitre 2 : Controllers
      • Chapitre 3 : Mappers
      • Extrafields et formulaires dynamiques
    • Module 9 : Intégration complète
      • Chapitre 1 : Backend
      • Chapitre 2 : Frontend
      • Chapitre 3 : Déploiement
    • Module 10 : Fonctionnalités avancées
      • Chapitre 1 : Mode offline
      • Chapitre 2 : Internationalisation (i18n)
      • Chapitre 3 : Autres fonctionnalités
    • Module 11 : Bonnes pratiques
  • Démonstration
  • Start
  • Composants et pages
  • Afficher le texte source
  • Anciennes révisions
  • Liens de retour
  • Haut de page