@jonjomckay/flow-ui-theme-ant-design NPM

Jonjo's Boomi Flow UI

This is a custom UI framework for Boomi Flow applications, using modern technologies, with support for easy theming, and native support for embedding inside other React applications as a component.

Features

👍 Support for most built-in Flow page components
🎨 Theming
😍 Example documentation
🗄️ State management using Redux
🚀 Built for performance first
⚖️ Minimal bundle size, with few dependencies
- @jonjomckay/flow-ui weighs 8.4 kB (v0.4.0)
- @jonjomckay/flow-ui-theme-ant-design weighs 4.1 kB (v0.4.0)

Quick Start

Ensure you have the required dependencies installed:

yarn add @reduxjs/toolkit react react-dom react-redux

Pick a theme and install it (Ant Design, in this example)

yarn add @jonjomckay/flow-ui @jonjomckay/flow-ui-theme-ant-design antd

Import the theme and the Flow component, and render them

// Import the Flow component and the Ant Design theme
import { Flow } from '@jonjomckay/flow-ui';
import AntDesign from '@jonjomckay/flow-ui-theme-ant-design';

// Render the component, passing in at least a theme, tenant ID and flow ID
const Example = () => (
    <Flow theme={ AntDesign } tenant="a-tenant-id" id="a-flow-id" />
);

Themes

The library supports dynamic themes, usable by plugging them into the Flow component.

Ant Design

This is a theme that uses the Ant Design UI library, based on the specification of the same name. To use it, you'll need to install the theme itself along with Ant Design.

yarn add @jonjomckay/flow-ui @jonjomckay/flow-ui-theme-ant-design antd

Using it is just a case of importing the theme and supplying it to your Flow component:

import AntDesign from '@jonjomckay/flow-ui-theme-ant-design';

<Flow theme={ AntDesign } />

Custom

It's possible to implement your own themes, using the ITheme interface exported by @jonjomckay/flow-ui. Your theme will need to implement all fields on this interface, with each field being a React component handling the given props.

Packages

`flow-ui`

This package contains all the core interfaces, actions and logic required to render a Flow. From an outside perspective, the two most important parts are the ITheme interface, which all UI themes need to implement, and the Flow component, which is to be used by React applications in order to render flows.