---
source_hash: "7000ef14"
title: "SmartCommon"
weight: 170
---

# 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

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

### 3. Import Styles

In your `main.jsx` file:

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

## API Header Configuration

For authenticated requests:

```javascript
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](/front/composants-avances#routeguard) |

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

### Navigation

| 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](/front/composants-avances) 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](/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](/front/variants).

## Usage Example

```javascript
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>
  );
}
```