UI kit

One component library on every platform, built on the SDK of the same platform.

Platforms

Rules for every component

• A component calls only the SDK client it is given and never calls the network itself.
• Every component that loads shows loading, loaded, empty and error states; an error offers Try again.
• A component raises events and never navigates.
• Every component also reports each failed call to the app: sr-error on the web, onError on React, React Native, Flutter, SwiftUI and Jetpack Compose (and on SuperrouteScope), and the ErrorOccurred event in .NET, with the code, message, status, request id and the seconds to wait.
• Colours, radius, spacing and type come from the service provider's branding.
• On SwiftUI, Jetpack Compose, WPF and WinForms the theme tokens take a light, dark or automatic mode (automatic follows the device) and a corner radius, set by the app or read from the service provider's branding.
• Strings in 14 languages, chosen by the client's locale, with English as the fallback.
• Money is shown with two decimals and the currency code.
• Every control has a label, text follows the system size and touch targets are at least 44 × 44 points.

SuperrouteScope(
  client: sr,
  theme: ThemeTokens.fromBranding(bootstrap['client']['settings']['branding']),
  onSignInRequired: () => router.go('/sign-in'),
  onError: (error) => log(error.code, error.requestId, error.retryAfter),
  child: SrOrderList(onOpen: (type, id) => router.go('/orders/$type/$id')),
)

document.addEventListener('sr-error', (event) => {
  const { code, message, status, requestId, retryAfter } = event.detail;
});

Components

On SwiftUI, Jetpack Compose, React, React Native, WPF and WinForms a component has the name in the first column.

The pickup list and the locker map are in the sLocker UI kit. sLocker

Account and notifications

Orders and tracking

Returns and shipping

Without signing in

Store and mall

Group buy

Group buy leaders

Driver apps