Module 6: SmartCommon - Components

SmartCommon is the shared React component library for all SmartMaker applications. This module covers the essential components.

Prerequisites

Module 5 completed (SmartMaker architecture)
Understanding React components and props

Installation

1. Configure npm registry

In the .npmrc file:

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

2. Install the package

npm install @cap-rel/smartcommon

3. Import styles

In main.jsx:

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

Component Categories

Category	Components	Usage
Layout	Page, Block, Panel, Popup	Page structure
Navigation	Navbar, Sidebar, Tabbar	Menus and navigation
Forms	Input, Select, Calendar, etc.	Data input
Display	String, Number, Datetime, etc.	Data formatting
UI	Button, Spinner, Tag, List	Interface elements

Chapters

#	Chapter	Content
1	Layout	Page, Block, Panel, Popup
2	Navigation	Navbar, Sidebar, Tabbar
3	Forms	Input, Select, Calendar, Form
4	Display	Formats and display components

Component Imports

// Individual import
import { Page, Block, Button } from '@cap-rel/smartcommon';

// Or grouped import
import {
    // Layout
    Page,
    Block,
    Panel,
    Popup,

    // Navigation
    Navbar,
    Tabbar,
    TabbarItem,

    // Forms
    Form,
    Input,
    Select,
    Calendar,
    Boolean,

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

Module Objectives

By the end of this module, you will know how to:

Build a page with Page and Block
Create complete forms
Use navigation components
Format data display

Start: Layout ->

Module 6 : SmartCommon - Composants