@bernierllc/generic-workflow-ui
Version:
Generic, reusable workflow UI components with linear and graph visualization
86 lines (84 loc) • 3.62 kB
JavaScript
"use strict";
/*
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.
*/
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.GenericWorkflowNode = GenericWorkflowNode;
const react_1 = __importDefault(require("react"));
const react_2 = require("@xyflow/react");
const tamagui_1 = require("tamagui");
// ============================================================================
// STYLED COMPONENTS
// ============================================================================
const StyledNodeContainer = (0, tamagui_1.styled)(tamagui_1.YStack, {
padding: '$4',
borderRadius: '$4',
borderWidth: 2,
borderColor: '$borderColor',
backgroundColor: '$background',
minWidth: 200,
minHeight: 80,
cursor: 'pointer',
transition: 'all 0.2s ease',
variants: {
active: {
true: {
borderColor: '$blue10',
backgroundColor: '$blue2',
shadowColor: '$blue10',
shadowOffset: { width: 0, height: 2 },
shadowOpacity: 0.25,
shadowRadius: 4,
},
},
completed: {
true: {
borderColor: '$green10',
backgroundColor: '$green2',
},
},
selected: {
true: {
borderColor: '$purple10',
borderWidth: 3,
shadowColor: '$purple10',
shadowOffset: { width: 0, height: 4 },
shadowOpacity: 0.3,
shadowRadius: 6,
},
},
},
});
const StyledHandle = (0, tamagui_1.styled)(react_2.Handle, {
width: 10,
height: 10,
backgroundColor: '$gray10',
border: '2px solid white',
});
// ============================================================================
// COMPONENT
// ============================================================================
/**
* Custom ReactFlow node component for workflow stages
*/
function GenericWorkflowNode({ data, selected, }) {
const nodeData = data;
const { stage, isActive, isCompleted } = nodeData;
return (react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement(StyledHandle, { type: "target", position: react_2.Position.Top, id: "target" }),
react_1.default.createElement(StyledNodeContainer, { active: isActive, completed: isCompleted, selected: selected, className: "generic-workflow-node" },
react_1.default.createElement(tamagui_1.Text, { fontWeight: "bold", fontSize: "$5", marginBottom: "$2" }, stage.name),
stage.description && (react_1.default.createElement(tamagui_1.Text, { fontSize: "$3", color: "$gray11", lineHeight: "$3" }, stage.description)),
stage.metadata && typeof stage.metadata === 'object' && (react_1.default.createElement(tamagui_1.Text, { fontSize: "$2", color: "$gray10", marginTop: "$2" },
"Order: ",
stage.order))),
react_1.default.createElement(StyledHandle, { type: "source", position: react_2.Position.Bottom, id: "source" })));
}
GenericWorkflowNode.displayName = 'GenericWorkflowNode';
exports.default = GenericWorkflowNode;