xmlui 0.4.0

package/dist/scripts/src/components/PieChart/PieChart.js

@@ -0,0 +1,184 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.pieChartComponentRenderer = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importStar(require("react"));
+const renderers_1 = require("@components-core/renderers");
+const descriptorHelper_1 = require("@components-core/descriptorHelper");
+const PieChart_module_scss_1 = __importDefault(require("./PieChart.module.scss"));
+const themeVars_1 = require("@components-core/theming/themeVars");
+const ThemeContext_1 = require("@components-core/theming/ThemeContext");
+const chart_color_schemes_1 = __importDefault(require("@components/chart-color-schemes"));
+const classnames_1 = __importDefault(require("classnames"));
+const hooks_1 = require("@components-core/utils/hooks");
+const ResponsivePie = react_1.default.lazy(() => Promise.resolve().then(() => __importStar(require("@nivo/pie"))).then((module) => ({ default: module.ResponsivePie })));
+const PieChart = ({ data = [], isInteractive = true, style, showLabels = false, showLegends = true, legendPosition = "bottom", legendDirection = "row", }) => {
+    const { getThemeVar } = (0, ThemeContext_1.useTheme)();
+    const [customLegendData, setCustomLegendData] = react_1.default.useState([]);
+    const colors = (0, hooks_1.useColors)({
+        name: "color-text-PieChart",
+        format: "hex",
+    }, {
+        name: "color-ticks-PieChart",
+        format: "hex",
+    }, {
+        name: "color-bg-tooltip-PieChart",
+        format: "hex",
+    }, {
+        name: "color-text-tooltip-PieChart",
+        format: "hex",
+    }, {
+        name: "color-axis-PieChart",
+        format: "hex",
+    }, {
+        name: "color-text-legend-PieChart",
+        format: "hex",
+    });
+    const pieChart = (0, react_1.useMemo)(() => ((0, jsx_runtime_1.jsx)(ResponsivePie, { fit: true, data: data, colors: { scheme: chart_color_schemes_1.default[getThemeVar("scheme-PieChart")] }, margin: { top: 12, right: 12, bottom: 12, left: 12 }, forwardLegendData: setCustomLegendData, theme: {
+            background: "transparent",
+            text: {
+                fontSize: 11,
+                fill: colors["color-text-PieChart"],
+                outlineWidth: 0,
+                outlineColor: "transparent",
+            },
+            axis: {
+                domain: {
+                    line: {
+                        stroke: colors["color-axis-PieChart"],
+                        strokeWidth: 1,
+                    },
+                },
+                legend: {
+                    text: {
+                        fontSize: 12,
+                        fill: colors["color-text-legend-PieChart"],
+                        outlineWidth: 0,
+                        outlineColor: "transparent",
+                    },
+                },
+                ticks: {
+                    line: {
+                        stroke: "#777777",
+                        strokeWidth: 1,
+                    },
+                    text: {
+                        fontSize: 11,
+                        fill: colors["color-ticks-PieChart"],
+                        outlineWidth: 0,
+                        outlineColor: "transparent",
+                    },
+                },
+            },
+            grid: {
+                line: {
+                    stroke: "#dddddd",
+                    strokeWidth: 1,
+                },
+            },
+            annotations: {
+                text: {
+                    fontSize: 13,
+                    fill: "#333333",
+                    outlineWidth: 2,
+                    outlineColor: "#ffffff",
+                    outlineOpacity: 1,
+                },
+                link: {
+                    stroke: "#000000",
+                    strokeWidth: 1,
+                    outlineWidth: 2,
+                    outlineColor: "#ffffff",
+                    outlineOpacity: 1,
+                },
+                outline: {
+                    stroke: "#000000",
+                    strokeWidth: 2,
+                    outlineWidth: 2,
+                    outlineColor: "#ffffff",
+                    outlineOpacity: 1,
+                },
+                symbol: {
+                    fill: "#000000",
+                    outlineWidth: 2,
+                    outlineColor: "#ffffff",
+                    outlineOpacity: 1,
+                },
+            },
+            tooltip: {
+                wrapper: {},
+                container: {
+                    background: colors["color-bg-tooltip-PieChart"],
+                    color: colors["color-text-tooltip-PieChart"],
+                    fontSize: 12,
+                },
+                basic: {},
+                chip: {},
+                table: {},
+                tableCell: {},
+                tableCellValue: {},
+            },
+        }, padAngle: 0.7, cornerRadius: 3, activeOuterRadiusOffset: 8, borderWidth: 1, borderColor: { from: "color", modifiers: [["darker", 0.2]] }, enableArcLinkLabels: showLabels, arcLinkLabelsSkipAngle: 10, arcLinkLabelsThickness: 2, arcLabelsSkipAngle: 10, isInteractive: isInteractive })), [showLegends, data, colors, isInteractive, legendPosition, legendDirection]);
+    return ((0, jsx_runtime_1.jsx)(react_1.Suspense, { children: (0, jsx_runtime_1.jsx)("div", { style: Object.assign({}, style), children: (0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(PieChart_module_scss_1.default.chart, {
+                    [PieChart_module_scss_1.default.legendTop]: legendPosition === "top",
+                    [PieChart_module_scss_1.default.legendRight]: legendPosition === "right",
+                    [PieChart_module_scss_1.default.legendBottom]: legendPosition === "bottom",
+                    [PieChart_module_scss_1.default.legendLeft]: legendPosition === "left",
+                }), children: [(0, jsx_runtime_1.jsx)("div", { className: PieChart_module_scss_1.default.wrapper, children: (0, jsx_runtime_1.jsx)("div", { className: PieChart_module_scss_1.default.chartContainer, children: pieChart }) }), showLegends && ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(PieChart_module_scss_1.default.legends, {
+                            [PieChart_module_scss_1.default.legendRow]: legendDirection === "row",
+                            [PieChart_module_scss_1.default.legendColumn]: legendDirection === "column",
+                        }), children: customLegendData.map((item, i) => ((0, jsx_runtime_1.jsxs)("div", { className: PieChart_module_scss_1.default.legendItem, children: [(0, jsx_runtime_1.jsx)("div", { className: PieChart_module_scss_1.default.legendBullet, style: { backgroundColor: item.color } }), (0, jsx_runtime_1.jsx)("div", { className: PieChart_module_scss_1.default.legendLabel, children: item.label })] }, i))) }))] }) }) }));
+};
+const metadata = {
+    displayName: "PieChart",
+    description: "A pie chart component",
+    props: {
+        data: (0, descriptorHelper_1.desc)("The data to be displayed in the pie chart"),
+    },
+    themeVars: (0, themeVars_1.parseScssVar)(PieChart_module_scss_1.default.themeVars),
+    defaultThemeVars: {
+        "scheme-PieChart": "nivo",
+        "color-text-PieChart": "$color-text-secondary",
+        "color-ticks-PieChart": "$color-text-primary",
+        "color-bg-tooltip-PieChart": "$color-bg-primary",
+        "color-text-tooltip-PieChart": "$color-text-primary",
+        "color-axis-PieChart": "$color-text-primary",
+        "color-text-legend-PieChart": "$color-text-primary",
+        light: {
+            "scheme-PieChart": "set3",
+        },
+        dark: {
+            "scheme-PieChart": "dark2",
+        },
+    },
+};
+exports.pieChartComponentRenderer = (0, renderers_1.createComponentRenderer)("PieChart", ({ extractValue, node, layoutCss }) => {
+    var _a, _b, _c, _d, _e, _f;
+    return ((0, jsx_runtime_1.jsx)(PieChart, { data: extractValue((_a = node.props) === null || _a === void 0 ? void 0 : _a.data), isInteractive: extractValue.asOptionalBoolean((_b = node.props) === null || _b === void 0 ? void 0 : _b.isInteractive), showLabels: extractValue.asOptionalBoolean((_c = node.props) === null || _c === void 0 ? void 0 : _c.showLabels), style: layoutCss, showLegends: extractValue.asOptionalBoolean((_d = node.props) === null || _d === void 0 ? void 0 : _d.showLegends), legendPosition: extractValue((_e = node.props) === null || _e === void 0 ? void 0 : _e.legendPosition), legendDirection: extractValue((_f = node.props) === null || _f === void 0 ? void 0 : _f.legendDirection) }));
+}, metadata);

package/dist/scripts/src/components/PositionedContainer/PositionedContainer.js

@@ -0,0 +1,29 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.positionedContainerComponentRenderer = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const renderers_1 = require("@components-core/renderers");
+const PositionedContainer_module_scss_1 = __importDefault(require("./PositionedContainer.module.scss"));
+const classnames_1 = __importDefault(require("@components-core/utils/classnames"));
+const descriptorHelper_1 = require("@components-core/descriptorHelper");
+const themeVars_1 = require("@components-core/theming/themeVars");
+function PositionedContainer({ children, top, right, bottom, left, visibleOnHover = false, }) {
+    return ((0, jsx_runtime_1.jsx)("div", { style: { top, right, bottom, left }, className: (0, classnames_1.default)(PositionedContainer_module_scss_1.default.wrapper, {
+            [PositionedContainer_module_scss_1.default.visibleOnHover]: visibleOnHover,
+        }), children: children }));
+}
+const metadata = {
+    displayName: "PositionedContainer",
+    description: "",
+    props: {
+        visibleOnHover: (0, descriptorHelper_1.desc)(""),
+    },
+    themeVars: (0, themeVars_1.parseScssVar)(PositionedContainer_module_scss_1.default.themeVars),
+};
+exports.positionedContainerComponentRenderer = (0, renderers_1.createComponentRenderer)("PositionedContainer", ({ node, extractValue, renderChild, layoutCss }) => {
+    return ((0, jsx_runtime_1.jsx)(PositionedContainer, { top: layoutCss.top, right: layoutCss.right, bottom: layoutCss.bottom, left: layoutCss.left, visibleOnHover: extractValue.asOptionalBoolean(node.props.visibleOnHover), children: renderChild(node.children) }));
+}, metadata);
+exports.default = PositionedContainer;

package/dist/scripts/src/components/ProgressBar/ProgressBar.js

@@ -0,0 +1,38 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.progressBarComponentRenderer = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const renderers_1 = require("@components-core/renderers");
+const ProgressBar_module_scss_1 = __importDefault(require("./ProgressBar.module.scss"));
+const descriptorHelper_1 = require("@components-core/descriptorHelper");
+const themeVars_1 = require("@components-core/theming/themeVars");
+function ProgressBar({ value = 0, style }) {
+    return ((0, jsx_runtime_1.jsx)("div", { className: ProgressBar_module_scss_1.default.wrapper, style: style, children: (0, jsx_runtime_1.jsx)("div", { style: { width: `${value * 100}%` }, className: ProgressBar_module_scss_1.default.bar }) }));
+}
+const metadata = {
+    displayName: "ProgressBar",
+    description: "Display a progress value",
+    props: {
+        value: (0, descriptorHelper_1.desc)("Progress value (from 0 to 1) to display"),
+    },
+    themeVars: (0, themeVars_1.parseScssVar)(ProgressBar_module_scss_1.default.themeVars),
+    defaultThemeVars: {
+        "radius-ProgressBar": "$radius",
+        "radius-indicator-ProgressBar": "$radius",
+        "thickness-ProgressBar": "$space-2",
+        light: {
+            "color-bg-ProgressBar": "$color-surface-200",
+            "color-indicator-ProgressBar": "$color-primary-500",
+        },
+        dark: {
+            "color-bg-ProgressBar": "$color-surface-700",
+            "color-indicator-ProgressBar": "$color-primary-500",
+        },
+    },
+};
+exports.progressBarComponentRenderer = (0, renderers_1.createComponentRenderer)("ProgressBar", ({ node, extractValue, layoutCss }) => {
+    return (0, jsx_runtime_1.jsx)(ProgressBar, { value: Math.max(0, Math.min(1, extractValue(node.props.value))), style: layoutCss });
+}, metadata);

package/dist/scripts/src/components/Queue/Queue.js

@@ -0,0 +1,286 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.queueComponentRenderer = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const renderers_1 = require("@components-core/renderers");
+const react_hot_toast_1 = __importDefault(require("react-hot-toast"));
+const lodash_es_1 = require("lodash-es");
+const misc_1 = require("@components-core/utils/misc");
+const AppContext_1 = require("@components-core/AppContext");
+const descriptorHelper_1 = require("@components-core/descriptorHelper");
+const immer_1 = __importDefault(require("immer"));
+const queueActions_1 = require("@components/Queue/queueActions");
+const container_helpers_1 = require("@components/container-helpers");
+const hooks_1 = require("@components-core/utils/hooks");
+const queueReducer = (0, immer_1.default)((state, action) => {
+    switch (action.type) {
+        case queueActions_1.QueueActionKind.ACTION_QUEUE_INITIALIZED: {
+            const queueState = {};
+            const itemsById = {};
+            action.payload.queue.forEach((item, index) => {
+                itemsById[action.payload.actionItemIds[index]] = item;
+            });
+            const queue = Object.keys(itemsById);
+            Object.entries(itemsById).forEach(([actionItemId, item]) => {
+                queueState[actionItemId] = {
+                    batchId: action.payload.batchId,
+                    actionItemId,
+                    status: "pending",
+                    item,
+                };
+            });
+            return {
+                queue: [...(state.queue || []), ...queue],
+                queueState: Object.assign(Object.assign({}, state.queueState), queueState),
+            };
+        }
+        case queueActions_1.QueueActionKind.ACTION_ITEM_STARTED: {
+            if (state.queueState[action.payload.actionItemId]) {
+                state.queueState[action.payload.actionItemId].status = "started";
+            }
+            break;
+        }
+        case queueActions_1.QueueActionKind.ACTION_ITEM_PROGRESS: {
+            if (state.queueState[action.payload.actionItemId]) {
+                state.queueState[action.payload.actionItemId].status = "in-progress";
+                state.queueState[action.payload.actionItemId].progress = action.payload.progressEvent;
+            }
+            break;
+        }
+        case queueActions_1.QueueActionKind.ACTION_ITEM_COMPLETED: {
+            state.queue = state.queue.filter((aiId) => aiId !== action.payload.actionItemId);
+            if (state.queueState[action.payload.actionItemId]) {
+                state.queueState[action.payload.actionItemId].status = "completed";
+                state.queueState[action.payload.actionItemId].result = action.payload.result;
+            }
+            break;
+        }
+        case queueActions_1.QueueActionKind.ACTION_ITEM_REMOVED: {
+            state.queue = state.queue.filter((aiId) => aiId !== action.payload.actionItemId);
+            delete state.queueState[action.payload.actionItemId];
+            break;
+        }
+        case queueActions_1.QueueActionKind.ACTION_ITEM_ERROR: {
+            state.queue = state.queue.filter((aiId) => aiId !== action.payload.actionItemId);
+            if (state.queueState[action.payload.actionItemId]) {
+                state.queueState[action.payload.actionItemId].status = "error";
+                state.queueState[action.payload.actionItemId].error = action.payload.error;
+            }
+            break;
+        }
+        case queueActions_1.QueueActionKind.CLEAR_COMPLETED_ACTION_ITEMS: {
+            if (state.queueState) {
+                Object.entries(state.queueState).forEach(([key, value]) => {
+                    if (value.status === "completed" || value.status === "error") {
+                        delete state.queueState[key];
+                    }
+                });
+            }
+            break;
+        }
+        default:
+            throw new Error();
+    }
+    // console.log("queue action arrived", action);
+    // console.log("queue state", cloneDeep(state));
+});
+const INITIAL_STATE = {
+    queue: [],
+    queueState: {},
+};
+function Queue({ registerComponentApi, willProcessItem, processItem, didProcessItem, processItemError, onComplete, progressFeedback, resultFeedback, renderResultFeedback, clearAfterFinish = true, }) {
+    const runningActionItemRef = (0, react_1.useRef)(new Set());
+    const [queueState, dispatch] = (0, react_1.useReducer)(queueReducer, INITIAL_STATE);
+    let appContext = (0, AppContext_1.useAppContext)();
+    // --- This Queue API adds a single item to the queue
+    const enqueueItem = (0, misc_1.useEvent)((item) => {
+        const itemId = (0, misc_1.generatedId)();
+        dispatch((0, queueActions_1.actionQueueInitialized)([item], (0, misc_1.generatedId)(), [itemId]));
+        return itemId;
+    });
+    // --- This Queue API adds a list of items to the queue
+    const enqueueItems = (0, misc_1.useEvent)((items) => {
+        const itemIds = items.map(() => (0, misc_1.generatedId)());
+        dispatch((0, queueActions_1.actionQueueInitialized)(items, (0, misc_1.generatedId)(), itemIds));
+        return itemIds;
+    });
+    const clearCompleted = (0, react_1.useCallback)(() => {
+        dispatch((0, queueActions_1.clearCompletedActionItems)());
+    }, []);
+    const remove = (0, react_1.useCallback)((actionItemId) => {
+        if (actionItemId) {
+            dispatch((0, queueActions_1.removeActionItem)(actionItemId));
+        }
+    }, []);
+    const getQueueLength = (0, react_1.useCallback)(() => {
+        return queueState.queue.length;
+    }, [queueState.queue.length]);
+    const getQueuedItems = (0, react_1.useCallback)(() => {
+        // console.log("GET QUEUED ITEMS", Object.values(queueState.queueState));
+        return Object.values(queueState.queueState);
+    }, [queueState.queueState]);
+    (0, react_1.useEffect)(() => {
+        registerComponentApi({
+            enqueueItem,
+            enqueueItems,
+            clearCompleted,
+            remove,
+            getQueueLength,
+            getQueuedItems,
+        });
+    }, [registerComponentApi, enqueueItem, enqueueItems, clearCompleted, remove, getQueueLength, getQueuedItems]);
+    const doSingle = (0, react_1.useCallback)((actionItemId) => __awaiter(this, void 0, void 0, function* () {
+        const queueItem = queueState.queueState[actionItemId];
+        if ((queueItem === null || queueItem === void 0 ? void 0 : queueItem.status) !== "pending") {
+            return;
+        }
+        if (runningActionItemRef.current.has(actionItemId)) {
+            return;
+        }
+        runningActionItemRef.current.add(actionItemId);
+        const item = queueItem.item;
+        let processItemContext = {};
+        try {
+            const willProcessResult = yield (willProcessItem === null || willProcessItem === void 0 ? void 0 : willProcessItem({
+                item,
+                actionItemId,
+                processItemContext,
+            }));
+            processItemContext = Object.assign(Object.assign({}, processItemContext), { willProcessResult: willProcessResult });
+            if (willProcessResult === false) {
+                dispatch((0, queueActions_1.removeActionItem)(actionItemId));
+                return;
+            }
+            dispatch((0, queueActions_1.actionItemStarted)(actionItemId));
+            const result = yield (processItem === null || processItem === void 0 ? void 0 : processItem({
+                item: item,
+                actionItemId,
+                processItemContext,
+                onProgress: (progressEvent) => {
+                    dispatch((0, queueActions_1.actionItemProgress)(actionItemId, progressEvent));
+                },
+            }));
+            processItemContext = Object.assign(Object.assign({}, processItemContext), { processResult: result });
+            yield (didProcessItem === null || didProcessItem === void 0 ? void 0 : didProcessItem({
+                item,
+                actionItemId,
+                processItemContext,
+            }));
+            dispatch((0, queueActions_1.actionItemCompleted)(actionItemId, result));
+        }
+        catch (error) {
+            let result = yield (processItemError === null || processItemError === void 0 ? void 0 : processItemError(error, {
+                item,
+                actionItemId,
+                processItemContext,
+            }));
+            dispatch((0, queueActions_1.actionItemError)(actionItemId, error));
+            if (result !== false) {
+                appContext.signError(error);
+            }
+        }
+        finally {
+            runningActionItemRef.current.delete(actionItemId);
+        }
+    }), [appContext, didProcessItem, dispatch, processItem, processItemError, queueState.queueState, willProcessItem]);
+    const toastId = (0, react_1.useRef)();
+    const queue = queueState.queue;
+    const prevQueue = (0, hooks_1.usePrevious)(queue);
+    const doComplete = (0, react_1.useCallback)(() => {
+        onComplete === null || onComplete === void 0 ? void 0 : onComplete();
+        const completedItems = getQueuedItems().filter((item) => item.status === "completed");
+        const resultFeedback = renderResultFeedback === null || renderResultFeedback === void 0 ? void 0 : renderResultFeedback(completedItems);
+        if (resultFeedback && completedItems.length) {
+            let currentToast = toastId.current;
+            react_hot_toast_1.default.success((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: resultFeedback }), {
+                id: currentToast,
+            });
+        }
+        else {
+            if (toastId.current) {
+                let currentToast = toastId.current;
+                react_hot_toast_1.default.dismiss(currentToast);
+            }
+        }
+        // toastId.current = undefined;
+        if (clearAfterFinish) {
+            clearCompleted();
+        }
+    }, [clearAfterFinish, clearCompleted, getQueuedItems, onComplete, renderResultFeedback]);
+    //with useEffect, it's showing the previous state for some reason, review!
+    (0, react_1.useLayoutEffect)(() => {
+        if (!queue.length) {
+            return;
+        }
+        if (progressFeedback) {
+            if (toastId.current) {
+                let anotherLoading = react_hot_toast_1.default.loading((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: progressFeedback }), {
+                    id: toastId.current,
+                });
+                // console.log("reusing toast, loading toast", toastId.current, anotherLoading);
+            }
+            else {
+                toastId.current = react_hot_toast_1.default.loading((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: progressFeedback }));
+            }
+        }
+    }, [progressFeedback, queue === null || queue === void 0 ? void 0 : queue.length]);
+    (0, react_1.useEffect)(() => {
+        if (!queue) {
+            return;
+        }
+        if (prevQueue === queue) {
+            return;
+        }
+        if ((0, lodash_es_1.isEqual)(prevQueue, queue)) {
+            return;
+        }
+        if ((prevQueue === null || prevQueue === void 0 ? void 0 : prevQueue.length) && !queue.length) {
+            doComplete();
+            return;
+        }
+        let queueItem = queue[0];
+        (() => __awaiter(this, void 0, void 0, function* () {
+            yield doSingle(queueItem);
+        }))();
+    }, [doComplete, doSingle, prevQueue, queue]);
+    return null;
+}
+const metadata = {
+    displayName: "Queue",
+    description: "A queue managing tasks to process in a FIFO order",
+    props: {
+        progressFeedback: (0, descriptorHelper_1.desc)("The template of the component that provides progress feedback"),
+        resultFeedback: (0, descriptorHelper_1.desc)("The template of the component that displays result feedback"),
+        clearAfterFinish: (0, descriptorHelper_1.desc)("Should completed items be removed from the queue?"),
+    },
+    nonVisual: true,
+    events: {
+        willProcess: (0, descriptorHelper_1.desc)("This item is fired when an item is about to be processed"),
+        process: (0, descriptorHelper_1.desc)("This event is triggered to process a particular item"),
+        didProcess: (0, descriptorHelper_1.desc)("This event is fired when a particular item's processing has finished"),
+        processError: (0, descriptorHelper_1.desc)("This event is raised when an item processed with an error"),
+        complete: (0, descriptorHelper_1.desc)("This event is raised when an item's processing has been successfully completed"),
+    },
+};
+exports.queueComponentRenderer = (0, renderers_1.createComponentRenderer)("Queue", ({ node, registerComponentApi, lookupEventHandler, renderChild, extractValue }) => {
+    return ((0, jsx_runtime_1.jsx)(Queue, { registerComponentApi: registerComponentApi, progressFeedback: renderChild(node.props.progressFeedback), resultFeedback: renderChild(node.props.resultFeedback), renderResultFeedback: node.props.resultFeedback
+            ? (completedItems) => {
+                return ((0, jsx_runtime_1.jsx)(container_helpers_1.MemoizedItem, { node: node.props.resultFeedback, contextVars: {
+                        $completedItems: completedItems,
+                    }, renderChild: renderChild }));
+            }
+            : undefined, willProcessItem: lookupEventHandler("willProcess"), processItem: lookupEventHandler("process", { signError: false }), didProcessItem: lookupEventHandler("didProcess"), processItemError: lookupEventHandler("processError"), onComplete: lookupEventHandler("complete"), clearAfterFinish: extractValue.asOptionalBoolean(node.props.clearAfterFinish) }));
+}, metadata);

package/dist/scripts/src/components/Queue/queueActions.js

@@ -0,0 +1,87 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.QueueActionKind = void 0;
+exports.actionItemStarted = actionItemStarted;
+exports.actionItemProgress = actionItemProgress;
+exports.actionItemCompleted = actionItemCompleted;
+exports.removeActionItem = removeActionItem;
+exports.clearCompletedActionItems = clearCompletedActionItems;
+exports.actionItemError = actionItemError;
+exports.actionQueueInitialized = actionQueueInitialized;
+var QueueActionKind;
+(function (QueueActionKind) {
+    QueueActionKind["ACTION_ITEM_STARTED"] = "ACTION_ITEM_STARTED";
+    QueueActionKind["ACTION_ITEM_PROGRESS"] = "ACTION_ITEM_PROGRESS";
+    QueueActionKind["ACTION_ITEM_COMPLETED"] = "ACTION_ITEM_COMPLETED";
+    QueueActionKind["CLEAR_COMPLETED_ACTION_ITEMS"] = "CLEAR_COMPLETED_ACTION_ITEMS";
+    QueueActionKind["ACTION_ITEM_ERROR"] = "ACTION_ITEM_ERROR";
+    QueueActionKind["ACTION_QUEUE_INITIALIZED"] = "ACTION_QUEUE_INITIALIZED";
+    QueueActionKind["ACTION_ITEM_REMOVED"] = "ACTION_ITEM_REMOVED";
+})(QueueActionKind || (exports.QueueActionKind = QueueActionKind = {}));
+// Signs that a particular component (`uid`) has started running an action with `actionItemId`.
+function actionItemStarted(actionItemId) {
+    return {
+        type: QueueActionKind.ACTION_ITEM_STARTED,
+        payload: {
+            actionItemId,
+        },
+    };
+}
+// Signs that a particular component (`uid`) reports progress information (`progressEvent`)
+// on an action with `actionItemId`.
+function actionItemProgress(actionItemId, progressEvent) {
+    return {
+        type: QueueActionKind.ACTION_ITEM_PROGRESS,
+        payload: {
+            actionItemId,
+            progressEvent,
+        },
+    };
+}
+// Signs that a particular component (`uid`) has completed an action with `actionItemId` resulting in `result`.
+function actionItemCompleted(actionItemId, result) {
+    return {
+        type: QueueActionKind.ACTION_ITEM_COMPLETED,
+        payload: {
+            actionItemId,
+            result,
+        },
+    };
+}
+// Signs that a particular component (`uid`) has removed an action with `actionItemId` from the execution queue.
+function removeActionItem(actionItemId) {
+    return {
+        type: QueueActionKind.ACTION_ITEM_REMOVED,
+        payload: {
+            actionItemId,
+        },
+    };
+}
+// Signs that a particular component (`uid`) has cleared completed action items from its execution queue.
+function clearCompletedActionItems() {
+    return {
+        type: QueueActionKind.CLEAR_COMPLETED_ACTION_ITEMS,
+        payload: {},
+    };
+}
+// Signs that a particular component (`uid`) received an `error` when running an action with `actionItemId`.
+function actionItemError(actionItemId, error) {
+    return {
+        type: QueueActionKind.ACTION_ITEM_ERROR,
+        payload: {
+            actionItemId,
+            error,
+        },
+    };
+}
+// Signs that a particular component (`uid`) has initialized its execution `queue` with the specified `batchId`.
+function actionQueueInitialized(queue, batchId, actionItemIds) {
+    return {
+        type: QueueActionKind.ACTION_QUEUE_INITIALIZED,
+        payload: {
+            queue,
+            actionItemIds,
+            batchId,
+        },
+    };
+}