@sensolus/snt-ui

React widgets, theme, and i18n primitives for Sensolus dashboards and partner apps.

Install

npm install @sensolus/snt-ui
npm install react react-dom leaflet leaflet-control-geocoder leaflet.markercluster

Quick start (sample-app convention)

If your app proxies the Sensolus backend at /api/* (the convention used by sample_micro_app), no wiring is required — the library ships sensible defaults.

import { SntUiProvider, LocaleProvider, SntButton, SntCard } from '@sensolus/snt-ui'
import '@sensolus/snt-ui/styles'

function App() {
  return (
    <SntUiProvider>
      <LocaleProvider>
        <SntCard title="Hello">
          <SntButton variant="primary">Click me</SntButton>
        </SntCard>
      </LocaleProvider>
    </SntUiProvider>
  )
}

Custom wiring (partners, non-/api/* backends)

SntUiProvider accepts overrides for any of the four backend calls and for navigation. Anything you omit falls back to the same-origin /api/* default.

import { useNavigate } from 'react-router-dom'
import { SntUiProvider } from '@sensolus/snt-ui'

function Shell({ children }) {
  const navigate = useNavigate()
  return (
    <SntUiProvider
      api={{
        // Call the Sensolus public API directly with your own API key
        fetchLoginInfo:  ()         => mySensolus.getLoginInfo(),
        fetchGeozones:   (orgId)    => mySensolus.getGeozones(orgId),
        geocode:         (q)        => mySensolus.geocode(q),
        reverseGeocode:  (lat, lng) => mySensolus.reverseGeocode(lat, lng),
      }}
      navigate={navigate}  // optional: wire to react-router, Next, etc.
    >
      {children}
    </SntUiProvider>
  )
}

api contract

| Method | Signature | Used by | |--------|-----------|---------| | fetchLoginInfo() | () => Promise<{ language, timezone, firstDayOfWeek, unitDistance, unitTemperature } \| null> | LocaleProvider | | fetchGeozones(orgId) | (string) => Promise<Geozone[]> | SntMap (when orgId prop set) | | geocode(query) | (string) => Promise<Array<{ name, lat, lng, boundingbox }>> | SntMap (search box) | | reverseGeocode(lat, lng) | (number, number) => Promise<{ displayName, address, lat, lng } \| null> | reserved for future widgets |

navigate contract

(to: string \| number) => void — strings are routes ('/orgs/123'), -1 means "back". Wire to useNavigate() from react-router-dom, the Next.js router, or omit to fall back to window.history.

SntMap

Tile-provider keys are required props — the library ships no keys.

<SntMap
  mapboxKey={import.meta.env.VITE_MAPBOX_KEY}
  locationiqKey={import.meta.env.VITE_LOCATIONIQ_KEY}
  devices={devices}
  orgId={id}            // triggers api.fetchGeozones(orgId)
/>

Components

| Component | Description | |-----------|-------------| | SntUiProvider, useSntUi | Inject backend api + navigate adapters | | LocaleProvider, useLocale | i18n / locale context (reads api.fetchLoginInfo) | | formatShortDate, formatDateTime, formatNumber | Locale-aware formatters | | SntButton | Primary button with variants | | SntInput | Text input (onChange receives value directly) | | SntBadge | Status badge with color variants | | SntCard | Card container | | SntTable | Sortable, paginated data table | | SntSpinner, SntLoadingOverlay | Loading indicators | | SntToolbar, SntToolbarSpacer | Toolbar layout | | SntButtonGroup | Segmented control | | SntSelect | Native select with Sensolus styling | | SntPageHeader | Page header (uses navigate from SntUiProvider) | | SntTabs, SntTabPanel | Tabbed views | | SntDialog | Modal dialog | | SntSidepanel, SntFilterSection | Slide-out side panel | | SntSwitch | Toggle switch | | SntGrid, SntGridItem | Responsive grid | | SntSummaryStat | Big-number summary tile | | SntHistogram | Time-bucketed histogram | | SntCheckboxList | Multi-select checkbox list | | SntDateRangePicker | Date range picker (locale-aware) | | SntMap | Leaflet map (Street/Satellite, geozones, device markers) | | SntColors | JavaScript color constants |

License

MIT