Modules Overview

Workflow modules are complete, end-to-end solutions for common application patterns. They combine primitives, structures, and hooks to provide fully functional features out of the box.

Collection Management

AddCollection

Complete workflow for creating and organizing collections.

import { AddCollection } from '@acrobi/ui';

function CollectionManager() {
  return (
    <AddCollection
      onCollectionCreate={(collection) => {
        console.log('Created:', collection);
      }}
      categories={['Work', 'Personal', 'Projects']}
      allowCustomCategories
      showTemplates
    />
  );
}

Features:

• Collection creation wizard
• Category management
• Template selection
• Validation and error handling
• Accessibility compliance

EditCollection

Comprehensive collection editing interface.

<EditCollection
  collection={selectedCollection}
  onSave={handleSave}
  onDelete={handleDelete}
  permissions={{
    canEdit: true,
    canDelete: user.role === 'admin'
  }}
/>

User Actions

AssignTo

User assignment workflow with search and permissions.

import { AssignTo } from '@acrobi/ui';

function TaskAssignment() {
  return (
    <AssignTo
      users={teamMembers}
      currentAssignee={task.assignedTo}
      onAssign={(userId) => updateTask({ assignedTo: userId })}
      showPermissions
      allowMultiple
    />
  );
}

Features:

• User search and filtering
• Permission validation
• Multiple assignment support
• Role-based restrictions
• Activity logging

Delete

Confirmation workflow with safety checks.

<Delete
  item={selectedItem}
  onConfirm={handleDelete}
  requireConfirmation
  showImpactAnalysis
  customWarnings={[
    'This will remove all associated data',
    'This action cannot be undone'
  ]}
/>

Archive

Soft delete workflow with restoration options.

<Archive
  items={selectedItems}
  onArchive={handleArchive}
  onRestore={handleRestore}
  showPreview
  batchOperations
/>

Content Creation

Editor

Rich text editor with collaborative features.

import { Editor } from '@acrobi/ui';

function DocumentEditor() {
  return (
    <Editor
      content={document.content}
      onChange={handleContentChange}
      collaboration={{
        enabled: true,
        users: collaborators,
        onUserJoin: handleUserJoin
      }}
      tools={[
        'bold', 'italic', 'underline',
        'heading', 'list', 'link',
        'image', 'table', 'code'
      ]}
      autosave={{
        enabled: true,
        interval: 30000,
        onSave: handleAutosave
      }}
    />
  );
}

Features:

• WYSIWYG editing
• Real-time collaboration
• Auto-save functionality
• Media embedding
• Version history
• Export options

Capture

Media capture workflow with editing tools.

<Capture
  types={['photo', 'video', 'audio']}
  onCapture={handleMediaCapture}
  editing={{
    crop: true,
    filters: true,
    annotations: true
  }}
  upload={{
    endpoint: '/api/upload',
    maxSize: 10 * 1024 * 1024
  }}
/>

Navigation & Menus

MenuActions

Global action menu system.

import { MenuActions } from '@acrobi/ui';

function AppHeader() {
  const actions = [
    {
      id: 'new',
      label: 'New',
      icon: 'plus',
      shortcut: 'Cmd+N',
      onClick: handleNew
    },
    {
      id: 'search',
      label: 'Search',
      icon: 'search',
      shortcut: 'Cmd+K',
      onClick: handleSearch
    },
    {
      id: 'settings',
      label: 'Settings',
      icon: 'settings',
      onClick: handleSettings
    }
  ];

  return (
    <MenuActions
      actions={actions}
      showShortcuts
      groupByCategory
      searchable
    />
  );
}

Features:

• Keyboard shortcuts
• Action grouping
• Search functionality
• Context-aware visibility
• Accessibility support

MenuPosts

Content management menu.

<MenuPosts
  posts={userPosts}
  onPostSelect={handlePostSelect}
  actions={['edit', 'delete', 'share', 'archive']}
  sorting={['date', 'title', 'status']}
  filtering={['published', 'draft', 'archived']}
/>

MenuAdmin

Administrative interface menu.

<MenuAdmin
  user={currentUser}
  permissions={userPermissions}
  sections={[
    'users', 'content', 'settings', 
    'analytics', 'billing'
  ]}
  onSectionChange={handleSectionChange}
/>

Data Management

DataSync

Real-time data synchronization.

import { DataSync } from '@acrobi/ui';

function SyncedComponent() {
  return (
    <DataSync
      endpoint="/api/data"
      onUpdate={handleDataUpdate}
      conflictResolution="merge"
      offlineSupport
      retryPolicy={{
        attempts: 3,
        backoff: 'exponential'
      }}
    />
  );
}

BulkOperations

Batch operation interface.

<BulkOperations
  items={selectedItems}
  operations={[
    { id: 'delete', label: 'Delete', icon: 'trash' },
    { id: 'archive', label: 'Archive', icon: 'archive' },
    { id: 'export', label: 'Export', icon: 'download' }
  ]}
  onOperation={handleBulkOperation}
  showProgress
/>

Workflow Patterns

ApprovalFlow

Multi-step approval process.

<ApprovalFlow
  item={pendingItem}
  steps={[
    { id: 'review', label: 'Review', assignee: 'reviewer' },
    { id: 'approve', label: 'Approve', assignee: 'manager' },
    { id: 'publish', label: 'Publish', assignee: 'admin' }
  ]}
  onStepComplete={handleStepComplete}
  notifications={{
    email: true,
    inApp: true
  }}
/>

TaskFlow

Task management workflow.

<TaskFlow
  tasks={projectTasks}
  onTaskUpdate={handleTaskUpdate}
  kanban={{
    columns: ['todo', 'inProgress', 'review', 'done'],
    allowDragDrop: true
  }}
  automation={{
    rules: automationRules,
    triggers: ['status_change', 'assignment']
  }}
/>

Integration Modules

NotificationCenter

Centralized notification management.

<NotificationCenter
  notifications={userNotifications}
  onNotificationRead={markAsRead}
  onNotificationAction={handleAction}
  grouping="date"
  realTime
  pushNotifications={{
    enabled: true,
    vapidKey: process.env.VAPID_KEY
  }}
/>

SearchInterface

Advanced search with filters.

<SearchInterface
  onSearch={handleSearch}
  filters={[
    { key: 'type', label: 'Type', options: contentTypes },
    { key: 'date', label: 'Date', type: 'dateRange' },
    { key: 'author', label: 'Author', type: 'user' }
  ]}
  suggestions={{
    enabled: true,
    source: '/api/suggestions'
  }}
  savedSearches
/>

Module Architecture

Modules follow a consistent architecture:

1. Entry Component - Main interface component
2. State Management - Built-in state handling
3. API Integration - Data fetching and mutations
4. Validation - Form and data validation
5. Error Handling - Comprehensive error management
6. Accessibility - WCAG 2.1 AA compliance
7. Customization - Theming and configuration options

Configuration

Most modules accept a configuration object:

const moduleConfig = {
  // API endpoints
  endpoints: {
    create: '/api/collections',
    update: '/api/collections/:id',
    delete: '/api/collections/:id'
  },
  
  // Validation rules
  validation: {
    required: ['name', 'category'],
    maxLength: { name: 100, description: 500 }
  },
  
  // UI customization
  ui: {
    theme: 'default',
    showAdvanced: false,
    compactMode: true
  },
  
  // Feature flags
  features: {
    templates: true,
    collaboration: false,
    automation: true
  }
};

<AddCollection config={moduleConfig} />

Performance Considerations

Modules are designed for optimal performance:

• Code Splitting - Lazy loaded by default
• Caching - Built-in data caching strategies
• Virtualization - Large lists use virtual scrolling
• Debouncing - Search and input debouncing
• Memoization - React.memo and useMemo optimization

Customization

Theming

<Editor
  theme={{
    colors: {
      primary: '#007bff',
      background: '#ffffff'
    },
    typography: {
      fontFamily: 'Inter, sans-serif'
    }
  }}
/>

Custom Actions

<MenuActions
  actions={defaultActions}
  customActions={[
    {
      id: 'custom',
      label: 'Custom Action',
      component: CustomActionComponent
    }
  ]}
/>

Event Handlers

<AddCollection
  onBeforeCreate={validateCollection}
  onAfterCreate={logCollectionCreated}
  onError={handleError}
  onCancel={handleCancel}
/>

Best Practices

1. Configuration Over Customization - Use config objects instead of props
2. Event-Driven Architecture - Emit events for integration points
3. Progressive Enhancement - Graceful degradation for missing features
4. Accessibility First - Screen reader and keyboard navigation support
5. Performance Monitoring - Built-in performance metrics

Next Steps

• View module examples
• Learn about customization
• Read the API reference