@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
andSelectionExplorer
) - used for navigation and selection of entities -
FormStation
(Details
andCreate
) - 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.