SmartMaker - Front (React)

SmartMaker - Front (React)

The front part of SmartMaker is built with React 19, Vite and TailwindCSS 4.

Technical stack

Technology Version Description
React 19.x UI framework
Vite 6.x Build tool and dev server
TailwindCSS 4.x Utility-first CSS framework
Redux Toolkit 2.x State management
i18next 24.x Internationalization
Framer Motion 12.x Animations
Dexie 4.x IndexedDB wrapper
ky 1.x HTTP client
Zod 4.x Schema validation

SmartCommon

SmartCommon is the shared React component library for every SmartMaker application.

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

Installation

npm install @cap-rel/smartcommon

See SmartCommon for the complete documentation.

SmartCommon contents

Providers

Components that supply the context to the application (Provider, ApiProvider, ReduxProvider, etc.).

Form components

  • Input, Textarea, Select
  • Calendar, Timer
  • AddressInput, Gps
  • PhotosUploader, AudiosUploader, VideosUploader
  • ColorPicker, IconSelect
  • SignaturePad
  • Editor (markdown)

Display components

  • String, Text, Number
  • Datetime, Duration
  • Email, Url, PhoneNumber
  • Address, Coordinates
  • Color, Icon, Tags

UI components

  • Page, Block, Panel, Popup
  • List, ListItem
  • Carousel, DataTable, Chart
  • Navbar, Sidebar, Tabbar
  • Button, Icon, Spinner, Tag

Hooks

  • useApi - API calls with JWT auth
  • useGlobalStates - Persistent global state
  • useStates - Local state
  • useForm - Form handling
  • useDb - IndexedDB database through Dexie
  • useNavigation - Router navigation
  • useIntl - Date/number formatting
  • useCachedQuery - API cache with strategies (NetworkFirst, CacheFirst, SWR)
  • useSyncClient - Complete offline synchronization
  • useReferenceSync - Read-only offline reference catalog
  • useOnlineStatus - Network status detection
  • useAuthenticatedImage - Image loading with JWT
  • useIsDesktop - Desktop viewport detection
  • useWindow - Orientation, dimensions, scroll, darkMode
  • useConfirm - Confirmation dialogs
  • usePWAUpdate - Service Worker update

See Hooks for the complete documentation.

Documentation

SmartMaker - Front (React)