@axinom/mosaic-ui

The mosaic-ui package contains React components and helpers that help building Management System workflows in an Axinom Mosaic project.

The components implement the Mosaic UI/UX patterns and behaviors. An interactive playground for the included components can be found at https://mosaic-storybook.axinom.net.

In addition, the package provides functions that help to connect the UI components with the GraphQL endpoints, provided by typical Mosaic services. Please note that the UI components are designed in a way that they also work with other backend APIs, not provided by Mosaic services.

Initialization

The UI library makes use of methods of the application shell (@axinom/mosaic-portal) for certain features, such as setting state of the Save Indicator depending on the state of the station or triggering toast notification in certain situations.

To enable these features it is recommended to pass the app object that gets passed to the setup method in your Pilet to the UI Library:

import { initializeUi } from '@axinom/mosaic-ui';

export function setup(app: PiletApi): void {
  initializeUi(app);
  // ...
}

Primary Components

The UI library contains a number of components for different purposes. However, the three most fundamental components are:

Explorer (NavigationExplorer and SelectionExplorer) - used for navigation and selection of entities
FormStation (Details and Create) - used for creating and editing of entities
EmptyStation - used for any arbitrary station

These components are meant to be used as root component of the pages (aka 'stations') a typical workflow consists of.