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

snippet.bash

npm install @cap-rel/smartcommon

3. Importer les styles

Dans main.jsx :

snippet.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	Mise en page	Page, Block, Panel, Popup
2	Navigation	Navbar, Sidebar, Tabbar
3	Formulaires	Input, Select, Calendar, Form
4	Affichage	Formats et composants de display

Import des composants

snippet.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

Commencer : Mise en page →