Workflows

Package: @zuilib/workflows · 0.1.0

@zuilib/workflows supplies the operational layer a console needs when a person must act on what they see: approve a request, submit a governed change, save a scenario, retry a failed run, resolve a task, inspect history or discuss a record.

Use the components directly in React, or register workflowViewTypes with @zuilib/apps so the same controls can be stored in a ViewSpec, edited in the builder and generated from the registry catalog.

Open the full-width Workflows showcase, or use the live example below.

Operational workflows · decide, write, retry, collaborate

light · 100%

Install

pnpm add @zuilib/workflows

React and React DOM are the required peers. For Tailwind v4:

@import "tailwindcss";
@import "@zuilib/primitives/tailwind.css";
@import "@zuilib/apps/tailwind.css";
@import "@zuilib/workflows/tailwind.css";

Direct components

import {ApprovalList, WritebackForm} from '@zuilib/workflows'

<ApprovalList
  items={requests}
  onApprove={(item) => approve(item.id)}
  onReject={(item) => reject(item.id)}
/>

<WritebackForm
  title="Update forecast"
  fields={forecastFields}
  onSubmit={(values) => saveForecast(values)}
/>

All mutation and persistence callbacks belong to the host. The package owns the accessible interaction, validation, confirmation and status presentation; your app owns APIs, credentials, authorization and durable data.

See the component catalog for every export.

Serializable view types

import {createViewRegistry} from '@zuilib/apps'
import {coreViewTypes} from '@zuilib/apps/core'
import {workflowViewTypes} from '@zuilib/workflows/view-types'

const registry = createViewRegistry(coreViewTypes, workflowViewTypes)

The registry can now render and validate writeback-form, approval-control, approval-list, comment-thread, audit-timeline, run-history, record-detail, scenario-editor, task-queue and notification-settings nodes.

Continue with workflow view types and Apps integration.