@prestojs/ui

The @prestojs/ui package is concerned with providing high level components and a standard interface for customising form widgets and field formatters throughout the system. It doesn't provide much in terms of concrete implementations for the UI. Using the interfaces defined you can implement your own UI library or use a provided implementation (currently @prestojs/ui-antd which integrates with antd).

At the top level is UiProvider which allows you to define the various UI specific components to use throughout the system. For example you can define the formItemComponent which is used by @prestojs/final-form or getWidgetForField which is used by FieldWidget to render the widget for a specific field.

FieldFormatter is used for rendering the value of a field on a form. For example the ChoiceFormatter component renders the label for a selected choice field. This is generally used with a ViewModel but doesn't have to be. @prestojs/ui provides implementations for this formatters as they generally just involve formatting a string or using standard HTML elements. To get the default implementation for a field see getFormatterForField.

FieldWidget is used for rendering the input used to set the value in a form based on the type of a field. For example a DateField may render as a calendar input widget as implemented by DateWidget. FieldWidget resolves the UI specific widget to use for a Field. @prestojs/ui doesn't currently provide a default implementation for these as they tend to be highly specific. @prestojs/ui-antd provides an implementation for antd or you can implement your own.

yarn add @prestojs/ui

Then you will need to add the UiProvider at the top of your app. See it's documentation for an example of this.

A field formatter is just a component that accepts a value prop and renders it:

function UpperCaseFormatter({ value }) {
    if (!value) {
        return value;
    }
    return value.toUpperCase();
}

When you use FieldFormatter it just works out what formatter component to use based on what the getFormatterForField function on your UiProvider returns: