@adminide-stack/workflow-editor-browser

Workflow Editor Browser Module

This module contains the browser (client-side) implementation of the Workflow Editor, including routing, components, and pages.

📚 Documentation

Main Guide

• WORKFLOW_ROUTING_GUIDE.md - Comprehensive routing implementation guide
  • Architecture overview
  • Step-by-step implementation
  • Route grouping with tabs
  • Outlet pattern usage
  • Icon integration
  • Best practices and examples

🚀 Quick Start

Directory Structure

src/
├── compute.ts                    # Main route configuration
├── constants/
│   ├── routes.ts                # Route path constants (WORKFLOW_ROUTES)
│   └── route-constants.ts       # Route metadata (names, icons, keys, tabs)
├── utils/
│   └── route-helpers.ts         # URL generation helpers
├── pages/                       # Page components
│   ├── WorkflowOutlet.tsx      # Root outlet component
│   ├── dashboard.tsx
│   ├── explore/
│   └── playground.tsx
└── views/                       # Reusable view components

🎯 Key Features

• Tab-based Grouping: Routes automatically grouped by tab property
• Outlet Pattern: Nested route rendering with React Router
• String Icons: Uses icon names from react-icons/fi (e.g., 'FiGrid')
• Route Constants: Centralized path definitions
• Route Helpers: Type-safe URL generation
• Backward Compatible: Supports legacy route patterns

📋 Route Structure

Workflow Editor (Root Outlet - /o/:orgName/workflow)
├─ Overview
│  ├─ Dashboard
│  └─ Explore
├─ Workflow Management
│  ├─ Workflow Builder
│  └─ Templates
└─ Execution
   ├─ Playground
   ├─ Scheduler
   └─ Automation

🔧 Adding a New Route

• Add path constant to constants/routes.ts
• Add metadata to constants/route-constants.ts (name, key, icon, tab)
• Create page component
• Register in compute.ts
• Add helper function to utils/route-helpers.ts

See WORKFLOW_ROUTING_GUIDE.md for detailed examples.

✅ Best Practices

• ✅ Always use route constants and helpers
• ✅ Never hardcode paths in components
• ✅ Use string-based icons ('FiGrid' not <FiGrid />)
• ✅ Lazy load components with () => import()
• ✅ Use standard IRouteModule interface
• ✅ Set exact: false for outlet routes

🛠️ Build

# Build this package
yarn build

# Or build using lerna
lerna exec --scope=@adminide-stack/workflow-editor-browser yarn build

📦 Output

• lib/ - Compiled JavaScript and type definitions
• lib/routes.json - Generated route configuration (used by architecture)

🔗 Related Packages

• @adminide-stack/workflow-editor-core - Core workflow logic
• @adminide-stack/workflow-editor-server - Server-side implementation
• @common-stack/core - Common routing interfaces (IRouteModule)
• @common-stack/client-react - React utilities (getFilteredRoutes)

For comprehensive routing documentation, see WORKFLOW_ROUTING_GUIDE.md