open-index/open-npm huggingface dataset:
npm package: @object-ui/plugin-workflow
Description: Workflow and approval components for Object UI — visual workflow designer and approval process handler.
Latest version: 3.1.5

# @object-ui/plugin-workflow

Workflow and approval components for Object UI — visual workflow designer and approval process handler.

## Features

- 🔀 **Workflow Designer** - Visual workflow builder with drag-and-drop nodes and edges
- ✅ **Approval Process** - Multi-step approval handling with history and comments
- 🗺️ **Minimap** - Overview minimap for complex workflows
- 🛠️ **Toolbar** - Built-in toolbar for node creation and editing
- 📜 **Approval History** - View full approval chain and decision history
- 💬 **Comments** - Add comments to approval steps
- 📦 **Auto-registered** - Components register with `ComponentRegistry` on import

## Installation

```bash
npm install @object-ui/plugin-workflow
```

**Peer Dependencies:**
- `react` ^18.0.0 || ^19.0.0
- `react-dom` ^18.0.0 || ^19.0.0
- `@object-ui/core`

## Quick Start

```tsx
import { WorkflowDesigner, ApprovalProcess } from '@object-ui/plugin-workflow';

function WorkflowEditor() {
  return (
    <WorkflowDesigner
      workflow={workflowDefinition}
      showToolbar
      showMinimap
      readOnly={false}
    />
  );
}

function ApprovalView() {
  return (
    <ApprovalProcess
      workflowId="wf-001"
      instanceId="inst-001"
      currentNodeId="review-step"
      showHistory
      showComments
    />
  );
}
```

## API

### WorkflowDesigner

Visual workflow builder with nodes, edges, and conditions:

```tsx
<WorkflowDesigner
  workflow={workflowDefinition}
  readOnly={false}
  showToolbar
  showMinimap={false}
/>
```

### ApprovalProcess

Approval process handler with history and actions:

```tsx
<ApprovalProcess
  workflowId="wf-001"
  instanceId="inst-001"
  currentNodeId="manager-approval"
  approvalRule={approvalRuleConfig}
  history={approvalHistory}
  showHistory
  showComments
/>
```

### Schema-Driven Usage

Components auto-register with `ComponentRegistry`:

```json
{
  "type": "workflow-designer",
  "workflow": { "nodes": [], "edges": [] },
  "showToolbar": true,
  "showMinimap": false
}
```

```json
{
  "type": "approval-process",
  "workflowId": "wf-001",
  "instanceId": "inst-001",
  "currentNodeId": "review-step",
  "showHistory": true,
  "showComments": true
}
```

## License

MIT
npm package: @object-ui/runner
Description: Universal Object UI Application Runner
Latest version: 3.1.5

# @object-ui/runner

Universal Object UI Application Runner - A standalone development server and runtime for testing Object UI schemas.

## Features

- **Schema Development** - Test and debug Object UI schemas in isolation
- **Hot Reload** - Automatic reload on schema changes
- **Plugin Support** - Pre-configured with popular plugins (Kanban, Charts, etc.)
- **Development Ready** - Built-in Vite development server
- **Production Build** - Optimized build for deployment

## Installation

```bash
pnpm add @object-ui/runner
```

## Usage

### As a Development Tool

The runner is primarily used for schema development and testing:

```bash
# Start development server
pnpm dev

# Build for production
pnpm build

# Preview production build
pnpm preview
```

### Programmatic Usage

You can also use the runner as a library in your projects:

```typescript
import { createRunner } from '@object-ui/runner';

const runner = createRunner({
  schema: mySchema,
  plugins: ['kanban', 'charts'],
  theme: 'light'
});

runner.mount('#app');
```

## Pre-installed Plugins

The runner comes with these plugins pre-configured:

- **@object-ui/plugin-kanban** - Kanban board components
- **@object-ui/plugin-charts** - Chart visualization components
- **Additional plugins can be added as needed**

## Schema Loading

The runner can load schemas from various sources:

```typescript
// From JSON file
const schema = await import('./my-schema.json');

// From JavaScript/TypeScript
const schema = {
  type: 'page',
  title: 'My App',
  body: {
    type: 'card',
    content: 'Hello World'
  }
};

// From API endpoint
const schema = await fetch('/api/schema').then(r => r.json());
```

## Configuration

Create a `runner.config.js` file to customize the runner:

```javascript
export default {
  port: 3000,
  host: 'localhost',
  plugins: ['kanban', 'charts'],
  theme: {
    primaryColor: '#3b82f6',
    darkMode: true
  }
};
```

## Development Workflow

1. Create a schema file (JSON or TypeScript)
2. Start the runner with `pnpm dev`
3. Edit the schema - changes reload automatically
4. Test your UI in the browser
5. Build for production with `pnpm build`

## Example Schema

```json
{
  "type": "page",
  "title": "Dashboard",
  "body": {
    "type": "grid",
    "columns": 3,
    "gap": 4,
    "children": [
      {
        "type": "card",
        "title": "Total Users",
        "body": {
          "type": "statistic",
          "value": 1234,
          "trend": "up"
        }
      },
      {
        "type": "card",
        "title": "Revenue",
        "body": {
          "type": "statistic",
          "value": "$56,789",
          "trend": "up"
        }
      },
      {
        "type": "card",
        "title": "Orders",
        "body": {
          "type": "statistic",
          "value": 432,
          "trend": "down"
        }
      }
    ]
  }
}
```

## API Reference

For detailed documentation, visit the [Object UI Documentation](https://www.objectui.org/docs/runner).

## License

MIT