SmartCommon

SmartCommon

SmartCommon is the shared React component library for all SmartMaker applications.

Repository: https://inligit.fr/cap-rel/dolibarr/smartmaker/smartcommon

Installation

1. Configure the npm Registry

Add to your .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 your main.jsx file:

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

API Header Configuration

For authenticated requests:

headers: {
  Authorization: `Bearer ${token}`,
  Accept: "application/json",
  "Content-Type": "application/json",
}

Library Structure

Providers (App)

Components that provide context to the application:

Provider Description
Provider Main provider that wraps all others
LibConfigProvider Global library configuration
ReduxProvider Redux global state
I18nextProvider i18next translations
ApiProvider Context for API calls
GlobalStatesProvider Shared global states
NavigationProvider Navigation context
Router Internal React router
Toaster Toast notifications
ConfirmProvider Confirmation and alert dialogs
ErrorBoundary React error boundary
UpdatePrompt PWA update notification
RouteGuard Route guard (auth + device identification) - see details

Form Components (Form)

Component Description
Input Text input field
Textarea Multi-line text area
Select Dropdown list
SearchableSelect Searchable dropdown list
Boolean On/off toggle switch
Checker Checkbox
RadioBar Radio button group
Calendar Date picker
Timer Time picker
Range Value slider
Rater Star rating
ColorPicker Color picker
IconSelect Icon selector
AddressInput Full address input
Gps GPS coordinates
SignaturePad Signature area
Editor Markdown editor
FilesUploader File upload
PhotosUploader Photo upload
AudiosUploader Audio recording
VideosUploader Video recording
Array Repeatable fields
Form Form container

Display Components (Formats)

Component Description
String Short text display
Text Long text display
Number Formatted number display
Datetime Date/time display
Duration Duration display
Email Clickable email display
Url Clickable URL display
PhoneNumber Clickable phone display
Address Address display
Coordinates GPS coordinates display
Color Color display
Icon Icon display
Tags Tags display
Files Files display
Signature Signature display

UI Components (Main)

Component Description
Page Page container with animations
Block Content block
Panel Sliding panel
Popup Modal window
List List of elements
ListItem List item
Carousel Image carousel
CarouselItem Carousel item
Button Button

Small Components (Little)

Component Description
Button Compact button
Icon Icon (react-icons)
Spinner Loading indicator
Tag Badge/tag
Component Description
Navbar Top navigation bar
Sidebar Side menu
Tabbar Tab bar (mobile)
TabbarItem Tabbar item
UpperNavbarItem Top navbar item
LowerNavbarItem Bottom navbar item

Other Components (Others)

Component Description
Calculator Full calculator (FAB, history, memory, keyboard)
DataTable Data table
Chart Charts
Map Geographic map
Modal Modal window
SearchBar Search bar
Stepper Step indicator
Overlay Overlay/background
Fab Floating action button (speed-dial)
DebugConsole Built-in debug console (detachable)
DebugWarnings Automatic breakpoints on React warnings
KeyboardStickyAction Action bar that stays visible above virtual keyboard
LazyLink Link with lazy loading

High-Level Components (Page-Replacing)

These components encapsulate a complete user flow. See the dedicated page Advanced Components for props, slots and examples.

Component Description
LoginComponent Dolibarr login form + integrated smartAuth QR pair flow
DeviceIdentificationComponent Device identification form (first device or pairing)
AboutModal "About" modal with PWA update check
BarcodeScanner Full-screen QR/barcode scanner (lazy-loads html5-qrcode)
ProductCategoryBrowser Modal navigation in a product catalog (selection with qty/discount)
PhotoAnnotator Place markers on a photo, linked to a business object

Synchronization (Sync)

Component Description
ConflictResolver Conflict resolution interface (client/server comparison, field-by-field merge)

Available Hooks

See the /front/hooks page for complete hook documentation.

Customize Appearance

Most components accept a variant prop that allows applying a named set of props without repeating classes each time. See Component Variants.

Usage Example

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

export default function MyPage() {
  return (
    <Page title="My page">
      <Block>
        <Input name="email" label="Email" type="email" />
        <Button onClick={() => console.log('click')}>
          Submit
        </Button>
      </Block>
    </Page>
  );
}
Routage SmartCommon