/* Copyright (c) 2025 Bernier LLC

This file is licensed to the client under a limited-use license. The client may use and modify this code only within the scope of the project it was delivered for. Redistribution or use in other products or commercial offerings is not permitted without written consent from Bernier LLC. */

@bernierllc/content-workflow-ui

Tamagui-based UI components for editorial workflow management and administration.

Features

• WorkflowStepper: Visual workflow progress indicator
• StageActionButtons: Context-aware action buttons for each stage
• WorkflowTimeline: Historical workflow activity timeline
• WorkflowStatusIndicator: Compact workflow status display
• WorkflowProgressBar: Progress bar with stage indicators
• WorkflowAdminConfig: Administrative workflow configuration
• WorkflowStageEditor: Stage management interface
• WorkflowTransitionEditor: Transition management interface

Installation

npm install @bernierllc/content-workflow-ui

Usage

WorkflowStepper

import { WorkflowStepper } from '@bernierllc/content-workflow-ui';

const workflow = {
  id: 'standard',
  name: 'Standard Workflow',
  stages: [
    { id: 'write', name: 'Write', order: 1 },
    { id: 'review', name: 'Review', order: 2 },
    { id: 'publish', name: 'Publish', order: 3 }
  ]
};

<WorkflowStepper
  workflow={workflow}
  currentStageId="write"
  onStageChange={(stageId) => console.log('Stage changed:', stageId)}
  config={{
    clickableStages: true,
    showDescriptions: true,
    showIcons: true
  }}
/>

StageActionButtons

import { StageActionButtons } from '@bernierllc/content-workflow-ui';

const workflowStatus = {
  contentId: 'content-1',
  currentStageId: 'write',
  availableTransitions: ['review'],
  canPublish: false,
  canSchedule: false
};

<StageActionButtons
  workflowStatus={workflowStatus}
  onSaveDraft={() => console.log('Save draft')}
  onPublish={() => console.log('Publish')}
  onSchedule={() => console.log('Schedule')}
  onNextStage={(stageId) => console.log('Next stage:', stageId)}
/>

WorkflowTimeline

import { WorkflowTimeline } from '@bernierllc/content-workflow-ui';

const timelineItems = [
  {
    id: '1',
    timestamp: new Date(),
    userId: 'user-1',
    userName: 'John Doe',
    stageId: 'write',
    stageName: 'Write',
    description: 'Content created'
  }
];

<WorkflowTimeline
  items={timelineItems}
  config={{
    showTimestamps: true,
    showUsers: true,
    showDescriptions: true,
    maxItems: 10,
    showToggle: true
  }}
  onItemClick={(item) => console.log('Item clicked:', item)}
/>

WorkflowStatusIndicator

import { WorkflowStatusIndicator } from '@bernierllc/content-workflow-ui';

<WorkflowStatusIndicator
  status={workflowStatus}
  config={{
    showTransitions: true,
    showStageInfo: true
  }}
/>

WorkflowProgressBar

import { WorkflowProgressBar } from '@bernierllc/content-workflow-ui';

<WorkflowProgressBar
  workflow={workflow}
  currentStageId="write"
  config={{
    showPercentage: true,
    showStageLabels: true
  }}
/>

WorkflowAdminConfig

import { WorkflowAdminConfig } from '@bernierllc/content-workflow-ui';

<WorkflowAdminConfig
  workflows={workflows}
  onSave={(workflow) => console.log('Save workflow:', workflow)}
  onDelete={(workflowId) => console.log('Delete workflow:', workflowId)}
  onCreate={() => console.log('Create workflow')}
  config={{
    showWorkflowList: true,
    allowCreation: true,
    allowDeletion: true
  }}
/>

WorkflowStageEditor

import { WorkflowStageEditor } from '@bernierllc/content-workflow-ui';

<WorkflowStageEditor
  stages={stages}
  onSave={(stage) => console.log('Save stage:', stage)}
  onDelete={(stageId) => console.log('Delete stage:', stageId)}
/>

WorkflowTransitionEditor

import { WorkflowTransitionEditor } from '@bernierllc/content-workflow-ui';

<WorkflowTransitionEditor
  transitions={transitions}
  stages={stages}
  onSave={(transition) => console.log('Save transition:', transition)}
  config={{
    allowCreation: true,
    allowDeletion: true
  }}
/>

Configuration Options

WorkflowStepper Config

• clickableStages: Allow clicking on stages to change them
• showDescriptions: Show stage descriptions
• showIcons: Show stage icons
• orientation: 'horizontal' | 'vertical'
• size: 'small' | 'medium' | 'large'

StageActionButtons Config

• showSaveDraft: Always show save draft button
• showPublish: Show publish button when available
• showSchedule: Show schedule button when available
• showNextStage: Show next stage button when available
• buttonSize: 'small' | 'medium' | 'large'
• buttonVariant: 'primary' | 'secondary' | 'outline'

WorkflowTimeline Config

• showTimestamps: Show timestamps for each item
• showUsers: Show user information
• showDescriptions: Show item descriptions
• maxItems: Maximum items to show initially
• showToggle: Show more/less toggle
• orientation: 'vertical' | 'horizontal'

WorkflowStatusIndicator Config

• showTransitions: Show available transitions count
• showStageInfo: Show current stage information
• showWorkflowInfo: Show workflow information
• size: 'small' | 'medium' | 'large'

WorkflowProgressBar Config

• showPercentage: Show progress percentage
• showStageLabels: Show current stage labels
• showStageIcons: Show stage icons
• size: 'small' | 'medium' | 'large'

WorkflowAdminConfig Config

• showWorkflowList: Show list of available workflows
• allowCreation: Allow creating new workflows
• allowDeletion: Allow deleting workflows
• allowEditing: Allow editing workflows
• showWorkflowDetails: Show detailed workflow information

WorkflowStageEditor Config

• allowCreation: Allow creating new stages
• allowDeletion: Allow deleting stages
• allowEditing: Allow editing stages
• showStageDetails: Show detailed stage information
• showStageOrder: Show stage order information

WorkflowTransitionEditor Config

• allowCreation: Allow creating new transitions
• allowDeletion: Allow deleting transitions
• allowEditing: Allow editing transitions
• showTransitionDetails: Show detailed transition information
• showTransitionPermissions: Show transition permissions

Styling

All components use Tamagui's theming system and can be customized with:

• Theme colors and variants
• Size and spacing options
• Custom styling props
• Responsive design breakpoints

API Reference

Component Props

All components accept a config prop for customization:

WorkflowStepper

interface WorkflowStepperProps {
  workflow: EditorialWorkflow;
  currentStageId: string;
  onStageChange?: (stageId: string) => void;
  config?: {
    clickableStages?: boolean;
    showDescriptions?: boolean;
    showIcons?: boolean;
    disabled?: boolean;
  };
}

StageActionButtons

interface StageActionButtonsProps {
  workflowStatus: WorkflowStatus;
  onSaveDraft?: () => void;
  onPublish?: () => void;
  onSchedule?: () => void;
  onNextStage?: (stageId: string) => void;
  config?: {
    showSaveDraft?: boolean;
    showSchedule?: boolean;
    disabled?: boolean;
  };
}

WorkflowTimeline

interface WorkflowTimelineProps {
  items: TimelineItem[];
  onItemClick?: (itemId: string) => void;
  config?: {
    showTimestamps?: boolean;
    showUsers?: boolean;
    showDescriptions?: boolean;
    maxItems?: number;
    disabled?: boolean;
  };
}

See source files for complete type definitions.

Dependencies

• @bernierllc/content-editorial-workflow: Core workflow types
• @bernierllc/content-workflow-service: Workflow service integration
• tamagui: UI component library
• react: React framework

Testing

Run tests with:

npm test

Run tests with coverage:

npm run test:coverage

Current test coverage:

• Statements: 65%
• Branches: 71%
• Functions: 44%
• Lines: 69%

The package includes 52 comprehensive component tests covering all major workflow components.

Integration Status

Logger Integration

Status: not-applicable

UI components don't need server-side @bernierllc/logger integration. User interactions are handled by parent applications. Client-side logging is managed at the application level, not within these presentational components.

NeverHub Integration

Status: not-applicable

Static UI components for client-side rendering have no @bernierllc/neverhub-adapter requirements. No service discovery or event bus integration needed for presentational workflow components.

Docs-Suite

Status: ready

Components documented with JSDoc and comprehensive README with usage examples.

Build and Quality

Build the package:

npm run build

Run linting:

npm run lint

Clean build artifacts:

npm run clean

License

Copyright (c) 2025 Bernier LLC. Licensed under limited-use license.