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

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 |

### 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 ^
| ''DataTable'' | Tableau de données |
| ''Chart'' | Graphiques |
| ''Map'' | Carte géographique |
| ''SearchBar'' | Barre de recherche |
| ''Stepper'' | Indicateur d'étapes |
| ''Overlay'' | Superposition/fond |
| ''Help'' | Aide contextuelle |
| ''LazyLink'' | Lien avec chargement différé |

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

} ```