@bernierllc/generic-workflow-ui
Version:
Generic, reusable workflow UI components with linear and graph visualization
49 lines (48 loc) • 2.96 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.GenericWorkflowStepper = GenericWorkflowStepper;
const react_1 = __importDefault(require("react"));
const tamagui_1 = require("tamagui");
const defaultConfig = {
enabled: true,
orientation: 'horizontal',
showDescriptions: true,
showIcons: true,
showTimestamps: false,
showUsers: false,
clickableStages: false,
stageColors: {},
stageIcons: {}
};
function GenericWorkflowStepper({ workflow, currentStageId, config: userConfig = {}, onStageChange, disabled = false, customStageRenderer }) {
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 handleStageClick = (stageId) => {
if (config.clickableStages && !disabled && onStageChange) {
onStageChange(stageId);
}
};
const renderStage = (stage, index) => {
const isActive = stage.id === currentStageId;
const isCompleted = index < currentStageIndex;
if (customStageRenderer) {
return customStageRenderer(stage, isActive, isCompleted);
}
const stageColor = config.stageColors?.[stage.id] || (isActive ? '$blue10' : isCompleted ? '$green10' : '$gray8');
return (react_1.default.createElement(tamagui_1.YStack, { key: stage.id, alignItems: "center", flex: 1, cursor: config.clickableStages && !disabled ? 'pointer' : 'default', opacity: disabled ? 0.5 : 1, onPress: () => handleStageClick(stage.id) },
react_1.default.createElement(tamagui_1.Circle, { size: "$4", backgroundColor: stageColor, borderColor: isActive ? '$blue10' : '$gray6', borderWidth: 2, justifyContent: "center", alignItems: "center" }, config.showIcons && (react_1.default.createElement(tamagui_1.Text, { color: "white", fontWeight: "bold" }, isCompleted ? '✓' : index + 1))),
react_1.default.createElement(tamagui_1.Text, { marginTop: "$2", fontSize: "$3", fontWeight: isActive ? 'bold' : 'normal', color: isActive ? '$blue10' : '$gray11' }, stage.name),
config.showDescriptions && stage.description && (react_1.default.createElement(tamagui_1.Text, { marginTop: "$1", fontSize: "$2", color: "$gray10", textAlign: "center", maxWidth: 150 }, stage.description))));
};
const Container = config.orientation === 'horizontal' ? tamagui_1.XStack : tamagui_1.YStack;
return (react_1.default.createElement(Container, { padding: "$4", gap: "$3", alignItems: config.orientation === 'horizontal' ? 'flex-start' : 'stretch' }, workflow.stages.map((stage, index) => renderStage(stage, index))));
}