# Module 6 : SmartCommon - Composants

> SmartCommon est la bibliothèque de composants React partagés pour toutes les applications SmartMaker. Ce module couvre les composants essentiels.


## Prérequis

- Module 5 complété (architecture SmartMaker)
- Comprendre les composants React et les props


## Installation

### 1. Configurer le registry npm

Dans le fichier `.npmrc` :

```
@cap-rel:registry=https://inligit.fr/api/v4/projects/197/packages/npm/
```

### 2. Installer le package

```bash
npm install @cap-rel/smartcommon
```

### 3. Importer les styles

Dans `main.jsx` :

```javascript
import "@cap-rel/smartcommon/dist/smartcommon-style.css";
```


## Catégories de composants

^ Catégorie ^ Composants ^ Usage ^
| Mise en page | Page, Block, Panel, Popup | Structure des pages |
| Navigation | Navbar, Sidebar, Tabbar | Menus et navigation |
| Formulaires | Input, Select, Calendar, etc. | Saisie de données |
| Affichage | String, Number, Datetime, etc. | Formatage des données |
| UI | Button, Spinner, Tag, List | Éléments d'interface |


## Chapitres

^ # ^ Chapitre ^ Contenu ^
| 1 | [[:15_training:module6-smartcommon-composants:mise-en-page|Mise en page]] | Page, Block, Panel, Popup |
| 2 | [[:15_training:module6-smartcommon-composants:navigation|Navigation]] | Navbar, Sidebar, Tabbar |
| 3 | [[:15_training:module6-smartcommon-composants:formulaires|Formulaires]] | Input, Select, Calendar, Form |
| 4 | [[:15_training:module6-smartcommon-composants:affichage|Affichage]] | Formats et composants de display |


## Import des composants

```javascript
// Import individuel
import { Page, Block, Button } from '@cap-rel/smartcommon';

// Ou import groupé
import {
    // Mise en page
    Page,
    Block,
    Panel,
    Popup,

    // Navigation
    Navbar,
    Tabbar,
    TabbarItem,

    // Formulaires
    Form,
    Input,
    Select,
    Calendar,
    Boolean,

    // Affichage
    List,
    ListItem,
    Button,
    Spinner,
    Tag
} from '@cap-rel/smartcommon';
```


## Objectifs du module

À la fin de ce module, vous saurez :

- Construire une page avec Page et Block
- Créer des formulaires complets
- Utiliser les composants de navigation
- Formater l'affichage des données


[[:15_training:module6-smartcommon-composants:mise-en-page|Commencer : Mise en page →]]