@parallelworks/ui 0.1.0 → 0.2.0

package/dist/chunks/Indicator-fF8AVbjQ.js

@@ -0,0 +1,158 @@
+import { CancelIcon, FailIcon, NotRunningIcon, RunningIcon, SkipIcon, SuccessIcon } from "../icons.js";
+import cx from "classnames";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useId, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+//#region src/components/Modal.tsx
+var FOCUSABLE = "a[href], button:not([disabled]), textarea, input, select, [tabindex]:not([tabindex=\"-1\"])";
+var noop = () => {};
+var actionClasses = {
+	destructive: "bg-red-600 text-white hover:bg-red-700",
+	warning: "bg-yellow-500 text-white hover:bg-yellow-700",
+	info: "bg-(--theme-element,#06354f) text-(--theme-element-text,#ffffff) hover:opacity-90"
+};
+function Modal({ isOpen, close, cancelAction = noop, children, title = "", text = "", actionLabel = "", cancelLabel = "Cancel", action, closeAfterAction = true, type = "destructive", className = "", showButtons = true, disableAction = false, loading = false, padding = true, fitWidth = false, dimScreen = true, ignoreOutsideClickClose = false }) {
+	const [pending, setPending] = useState(false);
+	const actionFiredRef = useRef(false);
+	const panelRef = useRef(null);
+	const titleId = useId();
+	const inFlight = loading || pending;
+	const inFlightRef = useRef(inFlight);
+	inFlightRef.current = inFlight;
+	useEffect(() => {
+		if (isOpen) actionFiredRef.current = false;
+	}, [isOpen]);
+	useEffect(() => {
+		if (!isOpen) return;
+		const previouslyFocused = document.activeElement;
+		const previousOverflow = document.body.style.overflow;
+		document.body.style.overflow = "hidden";
+		panelRef.current?.focus();
+		return () => {
+			document.body.style.overflow = previousOverflow;
+			previouslyFocused?.focus?.();
+		};
+	}, [isOpen]);
+	const trapFocus = useCallback((e) => {
+		if (e.key !== "Tab" || !panelRef.current) return;
+		const focusable = panelRef.current.querySelectorAll(FOCUSABLE);
+		if (focusable.length === 0) {
+			e.preventDefault();
+			return;
+		}
+		const first = focusable[0];
+		const last = focusable[focusable.length - 1];
+		if (e.shiftKey && document.activeElement === first) {
+			e.preventDefault();
+			last.focus();
+		} else if (!e.shiftKey && document.activeElement === last) {
+			e.preventDefault();
+			first.focus();
+		}
+	}, []);
+	const closeRef = useRef(close);
+	closeRef.current = close;
+	useEffect(() => {
+		if (!isOpen) return;
+		const onKey = (e) => {
+			if (e.key === "Escape" && !inFlightRef.current) closeRef.current();
+		};
+		window.addEventListener("keydown", onKey);
+		return () => window.removeEventListener("keydown", onKey);
+	}, [isOpen]);
+	const runAction = useCallback(async () => {
+		if (actionFiredRef.current) return;
+		actionFiredRef.current = true;
+		setPending(true);
+		try {
+			await action?.();
+			if (closeAfterAction) closeRef.current();
+			else actionFiredRef.current = false;
+		} finally {
+			setPending(false);
+		}
+	}, [action, closeAfterAction]);
+	if (!isOpen) return null;
+	return createPortal(/* @__PURE__ */ jsxs("div", {
+		className: "fixed z-250 inset-0 flex w-screen items-center justify-center p-4",
+		role: "dialog",
+		"aria-modal": "true",
+		...title ? { "aria-labelledby": titleId } : {},
+		onKeyDown: trapFocus,
+		children: [/* @__PURE__ */ jsx("div", {
+			className: cx("fixed inset-0", dimScreen && "bg-gray-500/75"),
+			onClick: inFlight || ignoreOutsideClickClose ? void 0 : close
+		}), /* @__PURE__ */ jsxs("div", {
+			ref: panelRef,
+			tabIndex: -1,
+			className: cx(className, "relative inline-block align-bottom rounded-lg text-left shadow-xl z-50 sm:my-8 sm:align-middle max-h-full overflow-y-auto", "bg-(--theme-panel-bg,#ffffff) text-(--theme-panel,#000000)", padding && "px-4 pt-5 pb-4 sm:p-6", fitWidth ? "sm:w-min-[32rem]" : "sm:max-w-lg sm:w-full"),
+			children: [/* @__PURE__ */ jsxs("div", { children: [title && /* @__PURE__ */ jsx("h3", {
+				id: titleId,
+				className: "text-center text-xl leading-6 font-semibold",
+				children: title
+			}), /* @__PURE__ */ jsxs("div", {
+				className: cx(title.length !== 0 && "mt-2"),
+				children: [text && /* @__PURE__ */ jsx("p", {
+					className: "text-sm text-center",
+					children: text
+				}), children]
+			})] }), showButtons && /* @__PURE__ */ jsxs("div", {
+				className: "mt-5 sm:mt-6 grid grid-cols-2 gap-3 grid-flow-row-dense",
+				children: [/* @__PURE__ */ jsx("button", {
+					type: "button",
+					className: cx("self-center cursor-pointer px-3 py-1.5 rounded-md text-xs font-medium whitespace-nowrap flex items-center justify-center", "border border-(--theme-border,#d1d5db) hover:bg-(--theme-hover,#f3f4f6)", inFlight && "cursor-wait"),
+					onClick: () => {
+						cancelAction();
+						close();
+					},
+					disabled: inFlight,
+					children: cancelLabel
+				}), /* @__PURE__ */ jsx("button", {
+					type: "button",
+					className: cx("self-center cursor-pointer px-3 py-1.5 rounded-md text-xs font-medium whitespace-nowrap flex items-center justify-center", "disabled:opacity-50 disabled:cursor-not-allowed", actionClasses[type], loading && "cursor-wait"),
+					onClick: runAction,
+					disabled: disableAction || inFlight,
+					children: actionLabel
+				})]
+			})]
+		})]
+	}), document.body);
+}
+//#endregion
+//#region src/components/Indicator.tsx
+function Indicator({ status }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: "h-2 flex items-center text-(--theme-panel-bg)",
+		children: status === "started" || status === "running" ? /* @__PURE__ */ jsx(RunningIcon, {
+			className: "rounded-full text-[#FFCF00] animate-spin",
+			"data-testid": "running-indicator"
+		}) : status === "completed" ? /* @__PURE__ */ jsx(SuccessIcon, {
+			className: "text-[#6FBF5A]",
+			style: { transform: "scale(1.25)" },
+			"data-testid": "completed-indicator"
+		}) : status === "failed" || status === "error" ? /* @__PURE__ */ jsx(FailIcon, {
+			className: "text-red-500",
+			style: { transform: "scale(1.25)" },
+			"data-testid": "failed-indicator"
+		}) : status === "skipped" || status === "skipped-failed" ? /* @__PURE__ */ jsx(SkipIcon, {
+			className: "text-gray-400",
+			style: { transform: "scale(1.25)" },
+			"data-testid": "skipped-indicator"
+		}) : status === "canceled" ? /* @__PURE__ */ jsx(CancelIcon, {
+			className: "text-[#3B82F6]",
+			style: { transform: "scale(1.5)" },
+			"data-testid": "canceled-indicator"
+		}) : status === "faulted" ? /* @__PURE__ */ jsx(RunningIcon, {
+			className: "rounded-full text-[#EF4444] animate-spin",
+			"data-testid": "faulted-indicator"
+		}) : status === "canceling" ? /* @__PURE__ */ jsx(RunningIcon, {
+			className: "rounded-full text-[#3B82F6] animate-spin",
+			"data-testid": "canceling-indicator"
+		}) : /* @__PURE__ */ jsx(NotRunningIcon, {
+			className: "rounded-full text-[#AAAAAA]",
+			"data-testid": "not-running-indicator"
+		})
+	});
+}
+//#endregion
+export { Modal as n, Indicator as t };

package/dist/chunks/Loader-DQiZ75fa.js

@@ -0,0 +1,25 @@
+import { LoaderIcon } from "../icons.js";
+import cx from "classnames";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/Loader.tsx
+function Loader({ size = 48, text, textSize = 12, full = true, color = "", loaderStyle = {} }) {
+	const loaderColor = color || "text-(--theme-element,#3b82f6)";
+	const fontSize = typeof size === "number" ? `${size}px` : size;
+	return /* @__PURE__ */ jsxs("div", {
+		className: cx(full && "w-full", "flex flex-col flex-wrap justify-center items-center gap-y-1"),
+		children: [/* @__PURE__ */ jsx("div", {
+			className: cx("w-full flex justify-center items-center", loaderColor),
+			style: loaderStyle,
+			children: /* @__PURE__ */ jsx(LoaderIcon, {
+				className: "animate-spin",
+				style: { fontSize }
+			})
+		}), text && /* @__PURE__ */ jsx("div", {
+			className: "text-center italic",
+			style: { fontSize: `${textSize}px` },
+			children: text
+		})]
+	});
+}
+//#endregion
+export { Loader as t };

package/dist/chunks/MarkdownImpl-Bq4QhrtA.js

@@ -0,0 +1,33 @@
+import cx from "classnames";
+import { jsx } from "react/jsx-runtime";
+import { Streamdown } from "streamdown";
+import { code } from "@streamdown/code";
+import { math } from "@streamdown/math";
+//#region src/components/MarkdownImpl.tsx
+var plugins = {
+	code,
+	math
+};
+var shikiTheme = ["github-light", "github-dark"];
+function Markdown({ children, isStreaming, controls }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: "markdown whitespace-normal text-start w-full",
+		children: /* @__PURE__ */ jsx(Streamdown, {
+			mode: isStreaming ? "streaming" : "static",
+			isAnimating: isStreaming ?? false,
+			...isStreaming ? { caret: "block" } : {},
+			...controls ? { controls } : {},
+			plugins,
+			shikiTheme,
+			components: { a: ({ node, ...props }) => /* @__PURE__ */ jsx("a", {
+				...props,
+				className: cx("link wrap-break-word", props.className),
+				target: "_blank",
+				rel: "noopener noreferrer"
+			}) },
+			children: children || ""
+		})
+	});
+}
+//#endregion
+export { Markdown as default };