@bernierllc/generic-workflow-ui
Version:
Generic, reusable workflow UI components with linear and graph visualization
37 lines (36 loc) • 2.06 kB
JavaScript
"use strict";
/*
Copyright (c) 2025 Bernier LLC
*/
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.GenericWorkflowProgressBar = GenericWorkflowProgressBar;
const react_1 = __importDefault(require("react"));
const tamagui_1 = require("tamagui");
const defaultConfig = {
enabled: true,
height: 8,
showStageLabels: true,
showPercentage: true,
showStageIcons: false,
stageColors: {}
};
function GenericWorkflowProgressBar({ workflow, currentStageId, config: userConfig = {}, disabled = false }) {
const config = { ...defaultConfig, ...userConfig };
if (!config.enabled) {
return react_1.default.createElement(react_1.default.Fragment, null);
}
const currentStageIndex = workflow.stages.findIndex((s) => s.id === currentStageId);
const progressPercentage = workflow.stages.length > 0
? ((currentStageIndex + 1) / workflow.stages.length) * 100
: 0;
return (react_1.default.createElement(tamagui_1.YStack, { gap: "$2", opacity: disabled ? 0.5 : 1 },
config.showStageLabels && (react_1.default.createElement(tamagui_1.XStack, { justifyContent: "space-between" }, workflow.stages.map((stage) => (react_1.default.createElement(tamagui_1.Text, { key: stage.id, fontSize: "$2", color: stage.id === currentStageId ? '$blue10' : '$gray10', fontWeight: stage.id === currentStageId ? 'bold' : 'normal' }, stage.name))))),
react_1.default.createElement(tamagui_1.Progress, { size: "$2", value: progressPercentage, backgroundColor: config.backgroundColor || '$gray5' },
react_1.default.createElement(tamagui_1.Progress.Indicator, { animation: "lazy", backgroundColor: config.color || '$blue10' })),
config.showPercentage && (react_1.default.createElement(tamagui_1.Text, { fontSize: "$2", color: "$gray10", textAlign: "right" },
Math.round(progressPercentage),
"% Complete"))));
}