kurtosis-ui-components 0.0.0 → 0.0.4

package/README.md

@@ -0,0 +1,16 @@
+# Kurtosis UI Components
+
+This guide provides instructions and code snippets to help you get started with the Kurtosis UI Components. This library
+can be used to create 
+
+## Setting Up
+
+To use the Kurtosis Typescript SDK, you need to add it as a dependency to your NPM package. You can do this with the following `npm i` command:
+
+```console
+$ yarn add kurtosis-ui-components
+```
+
+## Usage
+
+Instructions to follow.

package/build/AppLayout.d.ts

@@ -0,0 +1,10 @@
+import { PropsWithChildren, ReactElement } from "react";
+type AppLayoutProps = PropsWithChildren<{
+    navbar?: ReactElement;
+}>;
+export declare const AppLayout: ({ children, navbar }: AppLayoutProps) => import("react/jsx-runtime").JSX.Element;
+type AppPageLayoutProps = PropsWithChildren<{
+    preventPageScroll?: boolean;
+}>;
+export declare const AppPageLayout: ({ preventPageScroll, children }: AppPageLayoutProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/build/AppLayout.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Flex } from "@chakra-ui/react";
+import { createContext, useContext } from "react";
+import { KurtosisBreadcrumbs } from "./KurtosisBreadcrumbs";
+import { MAIN_APP_BOTTOM_PADDING, MAIN_APP_LEFT_PADDING_WITHOUT_NAV, MAIN_APP_LEFT_PADDING_WITH_NAV, MAIN_APP_MAX_WIDTH, MAIN_APP_RIGHT_PADDING, MAIN_APP_TOP_PADDING, } from "./theme/constants";
+import { isDefined } from "./utils";
+const AppLayoutContext = createContext({ hasNavbar: true });
+export const AppLayout = ({ children, navbar }) => {
+    return (_jsxs(_Fragment, { children: [isDefined(navbar) && navbar, _jsx(Flex, { flexDirection: "column", as: "main", w: "100%", minH: "100vh", className: "app-container", children: _jsx(AppLayoutContext.Provider, { value: { hasNavbar: isDefined(navbar) }, children: children }) })] }));
+};
+export const AppPageLayout = ({ preventPageScroll, children }) => {
+    const { hasNavbar } = useContext(AppLayoutContext);
+    const numberOfChildren = Array.isArray(children) ? children.length : 1;
+    if (numberOfChildren === 1) {
+        return (_jsx(Box, { w: "100%", h: preventPageScroll ? `100vh` : "100%", children: _jsxs(Flex, { flexDirection: "column", flex: "1", w: "100%", h: "100%", maxWidth: MAIN_APP_MAX_WIDTH, pl: hasNavbar ? MAIN_APP_LEFT_PADDING_WITH_NAV : MAIN_APP_LEFT_PADDING_WITHOUT_NAV, pr: MAIN_APP_RIGHT_PADDING, children: [_jsx(KurtosisBreadcrumbs, {}), _jsx(Box, { w: "100%", h: "100%", minH: preventPageScroll ? "0" : undefined, pt: MAIN_APP_TOP_PADDING, pb: MAIN_APP_BOTTOM_PADDING, flexDirection: "column", flex: "1", children: children })] }) }));
+    }
+    // TS cannot infer that children is an array if numberOfChildren === 2
+    if (numberOfChildren === 2 && Array.isArray(children)) {
+        return (_jsxs(Flex, { flexDirection: "column", width: "100%", h: preventPageScroll ? `100vh` : "100%", flex: "1", children: [_jsx(Box, { width: "100%", bg: "gray.850", children: _jsxs(Box, { width: "100%", pl: hasNavbar ? MAIN_APP_LEFT_PADDING_WITH_NAV : MAIN_APP_LEFT_PADDING_WITHOUT_NAV, pr: MAIN_APP_RIGHT_PADDING, maxW: MAIN_APP_MAX_WIDTH, children: [_jsx(KurtosisBreadcrumbs, {}), children[0]] }) }), _jsx(Flex, { maxWidth: MAIN_APP_MAX_WIDTH, pl: hasNavbar ? MAIN_APP_LEFT_PADDING_WITH_NAV : MAIN_APP_LEFT_PADDING_WITHOUT_NAV, pr: MAIN_APP_RIGHT_PADDING, pt: MAIN_APP_TOP_PADDING, pb: MAIN_APP_BOTTOM_PADDING, w: "100%", h: "100%", flex: "1", flexDirection: "column", minH: preventPageScroll ? "0" : undefined, children: children[1] })] }));
+    }
+    throw new Error(`AppPageLayout expects to receive exactly one or two children. ` +
+        `If there are two children, the first child is the header section and the next child is the body. ` +
+        `Otherwise the only child is the body.`);
+};

package/build/CodeEditor.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+type CodeEditorProps = {
+    text: string;
+    fileName?: string;
+    onTextChange?: (newText: string) => void;
+    showLineNumbers?: boolean;
+};
+export type CodeEditorImperativeAttributes = {
+    formatCode: () => Promise<void>;
+    setText: (text: string) => void;
+    setLanguage: (language: string) => void;
+};
+export declare const CodeEditor: import("react").ForwardRefExoticComponent<CodeEditorProps & import("react").RefAttributes<CodeEditorImperativeAttributes>>;
+export {};

package/build/CodeEditor.js

@@ -0,0 +1,130 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Box } from "@chakra-ui/react";
+import { Editor } from "@monaco-editor/react";
+import { forwardRef, useCallback, useEffect, useImperativeHandle, useState } from "react";
+import YAML from "yaml";
+import { assertDefined, isDefined, stringifyError } from "./utils";
+const MONACO_READ_ONLY_CHANGE_EVENT_ID = 89;
+export const CodeEditor = forwardRef(({ text, fileName, onTextChange, showLineNumbers }, ref) => {
+    const isReadOnly = !isDefined(onTextChange);
+    const [monaco, setMonaco] = useState();
+    const [editor, setEditor] = useState();
+    const resizeEditorBasedOnContent = useCallback(() => {
+        if (isDefined(editor)) {
+            // An initial layout call is needed, else getContentHeight is garbage
+            editor.layout();
+            const contentHeight = editor.getContentHeight();
+            editor.layout({ width: editor.getContentWidth(), height: contentHeight });
+            // Unclear why layout must be called twice, but seems to be necessary
+            editor.layout();
+        }
+    }, [editor]);
+    const handleMount = (editor, monaco) => {
+        setMonaco(monaco);
+        setEditor(editor);
+        const colors = {};
+        if (isReadOnly) {
+            colors["editor.background"] = "#111111";
+        }
+        monaco.editor.defineTheme("kurtosis-theme", {
+            base: "vs-dark",
+            inherit: true,
+            rules: [],
+            colors,
+        });
+        monaco.editor.setTheme("kurtosis-theme");
+    };
+    const handleChange = (value, ev) => {
+        if (isDefined(value) && onTextChange) {
+            onTextChange(value);
+            resizeEditorBasedOnContent();
+        }
+    };
+    useImperativeHandle(ref, () => ({
+        formatCode: async () => {
+            if (!isDefined(editor)) {
+                // do nothing
+                return;
+            }
+            const doFormat = async () => {
+                var _a;
+                if (((_a = editor.getModel()) === null || _a === void 0 ? void 0 : _a.getLanguageId()) === "yaml") {
+                    try {
+                        const formattedText = YAML.stringify(YAML.parse(editor.getValue()));
+                        editor.setValue(formattedText);
+                    }
+                    catch (e) {
+                        console.error(stringifyError(e));
+                    }
+                }
+                else {
+                    const formatAction = editor.getAction("editor.action.formatDocument");
+                    assertDefined(formatAction, `Format action is not defined`);
+                    await formatAction.run();
+                }
+            };
+            if (isReadOnly) {
+                return new Promise((resolve) => {
+                    const listenerDisposer = editor.onDidChangeConfiguration((event) => {
+                        if (event.hasChanged(MONACO_READ_ONLY_CHANGE_EVENT_ID)) {
+                            doFormat().then(() => {
+                                listenerDisposer.dispose();
+                                editor.updateOptions({
+                                    readOnly: isReadOnly,
+                                });
+                                resizeEditorBasedOnContent();
+                                resolve();
+                            });
+                        }
+                    });
+                    editor.updateOptions({
+                        readOnly: false,
+                    });
+                });
+            }
+            else {
+                return doFormat();
+            }
+        },
+        setText: (text) => {
+            if (!isDefined(editor)) {
+                return;
+            }
+            editor.setValue(text);
+        },
+        setLanguage: (language) => {
+            if (!isDefined(editor) || !isDefined(monaco)) {
+                return;
+            }
+            const model = editor.getModel();
+            if (!isDefined(model)) {
+                return;
+            }
+            monaco.editor.setModelLanguage(model, language);
+        },
+    }), [isReadOnly, editor, monaco, resizeEditorBasedOnContent]);
+    useEffect(() => {
+        // Triggered as the text can change without internal editing. (ie if the
+        // controlled prop changes)
+        resizeEditorBasedOnContent();
+    }, [text, resizeEditorBasedOnContent]);
+    // Triggering this on every render seems to keep the editor correctly sized
+    // it is unclear why this is the case.
+    resizeEditorBasedOnContent();
+    return (_jsx(Box, { width: "100%", children: _jsx(Editor, { onMount: handleMount, value: text, path: fileName, onChange: handleChange, options: {
+                automaticLayout: false,
+                readOnly: isReadOnly,
+                lineNumbers: showLineNumbers || (!isDefined(showLineNumbers) && !isReadOnly) ? "on" : "off",
+                minimap: { enabled: false },
+                wordWrap: "on",
+                wrappingStrategy: "advanced",
+                scrollBeyondLastLine: false,
+                renderLineHighlight: isReadOnly ? "none" : "line",
+                selectionHighlight: !isReadOnly,
+                occurrencesHighlight: !isReadOnly,
+                overviewRulerLanes: isReadOnly ? 0 : 3,
+                scrollbar: {
+                    alwaysConsumeMouseWheel: false,
+                },
+            }, defaultLanguage: !isDefined(fileName) ? "json" : undefined, theme: "vs-dark" }) }));
+});

package/build/CopyButton.d.ts

@@ -0,0 +1,9 @@
+import { ButtonProps, IconButtonProps } from "@chakra-ui/react";
+type CopyButtonProps<IsIconButton extends boolean> = (IsIconButton extends true ? IconButtonProps : ButtonProps) & {
+    valueToCopy?: (() => string) | string | null;
+    text?: IsIconButton extends true ? string : never;
+    isIconButton?: IsIconButton;
+    contentName: string;
+};
+export declare const CopyButton: <IsIconButton extends boolean>({ valueToCopy, text, contentName, isIconButton, ...buttonProps }: CopyButtonProps<IsIconButton>) => import("react/jsx-runtime").JSX.Element | null;
+export {};

package/build/CopyButton.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Button, IconButton, useToast } from "@chakra-ui/react";
+import { FiCopy } from "react-icons/fi";
+import { SuccessToast } from "./Toasts";
+import { isDefined } from "./utils";
+export const CopyButton = ({ valueToCopy, text, contentName, isIconButton, ...buttonProps }) => {
+    const toast = useToast();
+    const handleCopyClick = () => {
+        if (isDefined(valueToCopy)) {
+            const v = typeof valueToCopy === "string" ? valueToCopy : valueToCopy();
+            navigator.clipboard.writeText(v);
+            toast({
+                position: "bottom",
+                render: () => _jsx(SuccessToast, { message: `Copied ${contentName} to the clipboard` }),
+            });
+        }
+    };
+    if (!isDefined(valueToCopy) && !isDefined(buttonProps.onClick)) {
+        return null;
+    }
+    if (isIconButton) {
+        return (_jsx(IconButton, { icon: _jsx(FiCopy, {}), size: "xs", variant: "ghost", colorScheme: "darkBlue", onClick: handleCopyClick, ...buttonProps, children: text || "Copy" }));
+    }
+    else {
+        return (_jsx(Button, { leftIcon: _jsx(FiCopy, {}), size: "xs", colorScheme: "darkBlue", onClick: handleCopyClick, ...buttonProps, children: text || "Copy" }));
+    }
+};

package/build/DataTable.d.ts

@@ -0,0 +1,17 @@
+import { ColumnDef, RowData, SortingState } from "@tanstack/react-table";
+import { type RowSelectionState } from "@tanstack/table-core/src/features/RowSelection";
+import { type OnChangeFn } from "@tanstack/table-core/src/types";
+declare module "@tanstack/table-core" {
+    interface ColumnMeta<TData extends RowData, TValue> {
+        isNumeric?: boolean;
+        centerAligned?: boolean;
+    }
+}
+export type DataTableProps<Data extends object> = {
+    data: Data[];
+    columns: ColumnDef<Data, any>[];
+    defaultSorting?: SortingState;
+    rowSelection?: Record<string, boolean>;
+    onRowSelectionChange?: OnChangeFn<RowSelectionState>;
+};
+export declare function DataTable<Data extends object>({ data, columns, defaultSorting, rowSelection, onRowSelectionChange, }: DataTableProps<Data>): import("react/jsx-runtime").JSX.Element;

package/build/DataTable.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Button, Icon, Table, Tbody, Td, Th, Thead, Tr } from "@chakra-ui/react";
+import { flexRender, getCoreRowModel, getSortedRowModel, useReactTable, } from "@tanstack/react-table";
+import { useState } from "react";
+import { BiDownArrowAlt, BiUpArrowAlt } from "react-icons/bi";
+import { assertDefined, isDefined } from "./utils";
+export function DataTable({ data, columns, defaultSorting, rowSelection, onRowSelectionChange, }) {
+    if (isDefined(rowSelection) || isDefined(onRowSelectionChange)) {
+        assertDefined(rowSelection, `rowSelection and onRowSelectionChange must both be defined in DataTable if either are defined.`);
+        assertDefined(onRowSelectionChange, `rowSelection and onRowSelectionChange must both be defined in DataTable if either are defined.`);
+    }
+    const [sorting, setSorting] = useState(defaultSorting || []);
+    const tableState = { sorting };
+    if (isDefined(rowSelection)) {
+        tableState["rowSelection"] = rowSelection;
+    }
+    const table = useReactTable({
+        columns,
+        data,
+        enableSortingRemoval: false,
+        getCoreRowModel: getCoreRowModel(),
+        onSortingChange: setSorting,
+        getSortedRowModel: getSortedRowModel(),
+        enableRowSelection: isDefined(rowSelection),
+        onRowSelectionChange: onRowSelectionChange,
+        state: tableState,
+    });
+    return (_jsx(Box, { w: "100%", h: "100%", borderRadius: "6px", border: "1px solid", borderColor: "whiteAlpha.300", overflow: "clip", children: _jsxs(Table, { children: [_jsx(Thead, { children: table.getHeaderGroups().map((headerGroup) => (_jsx(Tr, { children: headerGroup.headers.map((header) => {
+                            const meta = header.column.columnDef.meta;
+                            return (_jsxs(Th, { onClick: header.column.getToggleSortingHandler(), isNumeric: meta === null || meta === void 0 ? void 0 : meta.isNumeric, textAlign: !!(meta === null || meta === void 0 ? void 0 : meta.centerAligned) ? "center" : undefined, children: [header.column.getCanSort() && (_jsx(Button, { variant: "sortableHeader", size: "xs", rightIcon: header.column.getIsSorted() === "desc" ? (_jsx(Icon, { as: BiDownArrowAlt, color: "gray.400" })) : header.column.getIsSorted() === "asc" ? (_jsx(Icon, { as: BiUpArrowAlt, color: "gray.400" })) : undefined, children: flexRender(header.column.columnDef.header, header.getContext()) })), !header.column.getCanSort() && flexRender(header.column.columnDef.header, header.getContext())] }, header.id));
+                        }) }, headerGroup.id))) }), _jsx(Tbody, { children: table.getRowModel().rows.map((row) => (_jsx(Tr, { bg: row.getIsSelected() ? "gray.700" : "", children: row.getVisibleCells().map((cell) => {
+                            const meta = cell.column.columnDef.meta;
+                            return (_jsx(Td, { isNumeric: meta === null || meta === void 0 ? void 0 : meta.isNumeric, textAlign: !!(meta === null || meta === void 0 ? void 0 : meta.centerAligned) ? "center" : undefined, children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id));
+                        }) }, row.id))) })] }) }));
+}

package/build/DownloadButton.d.ts

@@ -0,0 +1,9 @@
+import { ButtonProps, IconButtonProps } from "@chakra-ui/react";
+type DownloadButtonProps<IsIconButton extends boolean> = (IsIconButton extends true ? IconButtonProps : ButtonProps) & {
+    valueToDownload?: (() => string) | (() => AsyncIterable<string>) | string | null;
+    fileName: string;
+    text?: IsIconButton extends true ? string : never;
+    isIconButton?: IsIconButton;
+};
+export declare const DownloadButton: <IsIconButton extends boolean>({ valueToDownload, text, fileName, isIconButton, ...buttonProps }: DownloadButtonProps<IsIconButton>) => import("react/jsx-runtime").JSX.Element | null;
+export {};

package/build/DownloadButton.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Button, IconButton } from "@chakra-ui/react";
+import { FiDownload } from "react-icons/fi";
+import streamsaver from "streamsaver";
+import { isAsyncIterable, isDefined, saveTextAsFile, stripAnsi } from "./utils";
+export const DownloadButton = ({ valueToDownload, text, fileName, isIconButton, ...buttonProps }) => {
+    const handleDownloadClick = async () => {
+        if (isDefined(valueToDownload)) {
+            const v = typeof valueToDownload === "string" ? valueToDownload : valueToDownload();
+            if (isAsyncIterable(v)) {
+                const writableStream = streamsaver.createWriteStream(fileName);
+                const writer = writableStream.getWriter();
+                for await (const part of v) {
+                    await writer.write(new TextEncoder().encode(`${stripAnsi(part)}\n`));
+                }
+                await writer.close();
+                return;
+            }
+            saveTextAsFile(v, fileName);
+        }
+    };
+    if (!isDefined(valueToDownload) && !isDefined(buttonProps.onClick)) {
+        return null;
+    }
+    if (isIconButton) {
+        return (_jsx(IconButton, { icon: _jsx(FiDownload, {}), size: "xs", variant: "ghost", colorScheme: "darkBlue", onClick: handleDownloadClick, ...buttonProps }));
+    }
+    else {
+        return (_jsx(Button, { leftIcon: _jsx(FiDownload, {}), size: "xs", colorScheme: "darkBlue", onClick: handleDownloadClick, ...buttonProps, children: text || "Download" }));
+    }
+};

package/build/FeatureNotImplementedModal.d.ts

@@ -0,0 +1,9 @@
+type FeatureNotImplementedModalProps = {
+    featureName: string;
+    issueUrl: string;
+    message?: string;
+    isOpen: boolean;
+    onClose: () => void;
+};
+export declare const FeatureNotImplementedModal: ({ featureName, issueUrl, message, isOpen, onClose, }: FeatureNotImplementedModalProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/build/FeatureNotImplementedModal.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { KurtosisAlertModal } from "./KurtosisAlertModal";
+export const FeatureNotImplementedModal = ({ featureName, issueUrl, message, isOpen, onClose, }) => {
+    return (_jsx(KurtosisAlertModal, { title: `${featureName} unavailable`, isOpen: isOpen, onClose: onClose, confirmText: "Go to Issue", onConfirm: () => {
+            onClose();
+            window.open(issueUrl, "_blank");
+        }, confirmButtonProps: { colorScheme: "kurtosisGreen" }, content: message ||
+            `${featureName} is not currently available. Please comment/upvote the issue if you would like to use it.` }));
+};

package/build/FileDisplay.d.ts

@@ -0,0 +1,7 @@
+type FileDisplayProps = {
+    title: string;
+    value: string;
+    filename: string;
+};
+export declare const FileDisplay: ({ value, filename, title }: FileDisplayProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/build/FileDisplay.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ButtonGroup } from "@chakra-ui/react";
+import { CodeEditor } from "./CodeEditor";
+import { CopyButton } from "./CopyButton";
+import { DownloadButton } from "./DownloadButton";
+import { TitledCard } from "./TitledCard";
+export const FileDisplay = ({ value, filename, title }) => {
+    return (_jsx(TitledCard, { title: title, controls: _jsxs(ButtonGroup, { children: [_jsx(CopyButton, { contentName: title.toLowerCase(), valueToCopy: value, isIconButton: true, "aria-label": `Copy ${title}` }), _jsx(DownloadButton, { fileName: filename, valueToDownload: value, isIconButton: true, "aria-label": `Download ${filename}` })] }), children: _jsx(CodeEditor, { text: value }) }));
+};

package/build/FileSize.d.ts

@@ -0,0 +1,6 @@
+import { TextProps } from "@chakra-ui/react";
+type FileSizeProps = TextProps & {
+    fileSize?: bigint;
+};
+export declare const FileSize: ({ fileSize, ...textProps }: FileSizeProps) => import("react/jsx-runtime").JSX.Element | null;
+export {};

package/build/FileSize.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Text } from "@chakra-ui/react";
+import { isDefined } from "./utils";
+const units = ["B", "KB", "MB", "GB", "TB"];
+export const FileSize = ({ fileSize, ...textProps }) => {
+    if (!isDefined(fileSize)) {
+        return null;
+    }
+    let size = fileSize;
+    let unitIndex = 0;
+    while (size > 1024 && unitIndex < units.length - 1) {
+        size = size / BigInt(1024);
+        unitIndex += 1;
+    }
+    return (_jsx(Text, { as: "span", ...textProps, children: `${size}${units[unitIndex]}` }));
+};

package/build/FileTree.d.ts

@@ -0,0 +1,19 @@
+/**
+ * This file tree component recursively renders itself to present a file tree.
+ * To keep this performant the nodes (DirectoryNode and FileNode) must make use of
+ * useCallback and useMemo. This allows the React.memo around FileTreeMode to function
+ * and skip rendering unchanged components.
+ */
+export type FileTreeNode = {
+    name: string;
+    size?: bigint;
+    childNodes?: FileTreeNode[];
+};
+type FileTreeProps = {
+    nodes: FileTreeNode[];
+    selectedFilePath?: string[];
+    onFileSelected: (selectedFilePath: string[]) => void;
+    _isChildNode?: boolean;
+};
+export declare const FileTree: ({ nodes, selectedFilePath, onFileSelected, _isChildNode }: FileTreeProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/build/FileTree.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, Flex, Text } from "@chakra-ui/react";
+import React, { useCallback, useMemo, useState } from "react";
+import { AiFillFile, AiFillFolder, AiFillFolderOpen } from "react-icons/ai";
+import { FileSize } from "./FileSize";
+import { isDefined } from "./utils";
+export const FileTree = ({ nodes, selectedFilePath, onFileSelected, _isChildNode }) => {
+    return (_jsx(Flex, { flexDirection: "column", pl: _isChildNode ? "22px" : undefined, w: "100%", children: nodes.map((node, i) => (_jsx(FileTreeNodeComponent, { node: node, selectedFilePath: isDefined(selectedFilePath) && selectedFilePath.length > 0 && selectedFilePath[0] === node.name
+                ? selectedFilePath
+                : undefined, onFileSelected: onFileSelected }, node.name))) }));
+};
+const FileTreeNodeComponent = React.memo((props) => {
+    if (isDefined(props.node.childNodes)) {
+        return _jsx(DirectoryNode, { ...props });
+    }
+    else {
+        return _jsx(FileNode, { ...props });
+    }
+});
+const DirectoryNode = ({ node, selectedFilePath, onFileSelected, }) => {
+    const [collapsed, setCollapsed] = useState(false);
+    const childSelectedFilePath = useMemo(() => isDefined(selectedFilePath) && selectedFilePath.length > 0 && selectedFilePath[0] === node.name
+        ? selectedFilePath.slice(1)
+        : undefined, [selectedFilePath, node]);
+    const handleClick = useCallback(() => {
+        setCollapsed((collapsed) => !collapsed);
+    }, []);
+    const handleFileSelected = useCallback((filePath) => onFileSelected([node.name, ...filePath]), [onFileSelected, node]);
+    return (_jsxs(_Fragment, { children: [_jsx(Button, { variant: "fileTree", size: "xs", onClick: handleClick, leftIcon: collapsed ? _jsx(AiFillFolder, {}) : _jsx(AiFillFolderOpen, {}), children: node.name }), !collapsed && (_jsx(FileTree, { nodes: node.childNodes, onFileSelected: handleFileSelected, selectedFilePath: childSelectedFilePath, _isChildNode: true }))] }));
+};
+const FileNode = ({ node, selectedFilePath, onFileSelected }) => {
+    const isSelected = isDefined(selectedFilePath) && selectedFilePath.length === 1 && selectedFilePath[0] === node.name;
+    return (_jsx(Button, { variant: "fileTree", size: "xs", leftIcon: _jsx(AiFillFile, {}), rightIcon: _jsx(FileSize, { fileSize: node.size, color: "gray.250" }), isActive: isSelected, onClick: () => onFileSelected([node.name]), children: _jsx(Text, { as: "span", w: "100%", textAlign: "left", children: node.name }) }));
+};

package/build/FormatButton.d.ts

@@ -0,0 +1,2 @@
+import { ButtonProps } from "@chakra-ui/react";
+export declare const FormatButton: ({ ...buttonProps }: ButtonProps) => import("react/jsx-runtime").JSX.Element;

package/build/FormatButton.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Button } from "@chakra-ui/react";
+import { BiPaintRoll } from "react-icons/bi";
+export const FormatButton = ({ ...buttonProps }) => {
+    return (_jsx(Button, { leftIcon: _jsx(BiPaintRoll, {}), size: "sm", colorScheme: "darkBlue", loadingText: "Format", ...buttonProps, children: "Format" }));
+};

package/build/FormatDateTime.d.ts

@@ -0,0 +1,8 @@
+import { TextProps } from "@chakra-ui/react";
+import { DateTime } from "luxon";
+type FormatDateTimeProps = TextProps & {
+    dateTime: DateTime | null;
+    format: Intl.DateTimeFormatOptions | "relative";
+};
+export declare const FormatDateTime: ({ dateTime, format, ...textProps }: FormatDateTimeProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/build/FormatDateTime.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Text, Tooltip } from "@chakra-ui/react";
+import { useEffect, useState } from "react";
+import { isDefined } from "./utils";
+export const FormatDateTime = ({ dateTime, format, ...textProps }) => {
+    const [formattedDateTime, setFormattedDateTime] = useState(format === "relative" ? dateTime === null || dateTime === void 0 ? void 0 : dateTime.toRelative() : dateTime === null || dateTime === void 0 ? void 0 : dateTime.toLocaleString(format));
+    useEffect(() => {
+        if (format === "relative") {
+            const timeout = setTimeout(() => {
+                setFormattedDateTime(dateTime === null || dateTime === void 0 ? void 0 : dateTime.toRelative());
+            }, 15 * 1000);
+            return () => clearTimeout(timeout);
+        }
+    }, [dateTime, format]);
+    if (!isDefined(dateTime)) {
+        return (_jsx(Text, { as: "span", ...textProps, children: "Unknown" }));
+    }
+    return (_jsx(Tooltip, { label: dateTime.toLocal().toFormat("yyyy-MM-dd HH:mm:ss ZZZZ"), children: _jsx(Text, { as: "span", ...textProps, children: formattedDateTime }) }));
+};

package/build/HoverLineTabList.d.ts

@@ -0,0 +1,9 @@
+type HoverLineTabListProps = {
+    tabs: string[];
+    activeTab: string;
+};
+/**
+ * This component is needed as the hover interaction cannot be controlled with CSS
+ */
+export declare const HoverLineTabList: ({ tabs, activeTab }: HoverLineTabListProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/build/HoverLineTabList.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Tab, TabList } from "@chakra-ui/react";
+import { useState } from "react";
+import { isDefined } from "./utils";
+/**
+ * This component is needed as the hover interaction cannot be controlled with CSS
+ */
+export const HoverLineTabList = ({ tabs, activeTab }) => {
+    const [hoveredTab, setHoveredTab] = useState();
+    return (_jsx(TabList, { children: tabs.map((tab) => {
+            return (_jsx(Tab, { sx: {
+                    _selected: {
+                        borderBottom: hoveredTab === tab || (!isDefined(hoveredTab) && activeTab === tab)
+                            ? "2px solid var(--chakra-colors-kurtosisGreen-400)"
+                            : undefined,
+                    },
+                    borderBottom: hoveredTab === tab || (!isDefined(hoveredTab) && activeTab === tab)
+                        ? "2px solid var(--chakra-colors-kurtosisGreen-400)"
+                        : "2px solid transparent",
+                }, onMouseEnter: () => setHoveredTab(tab), onMouseLeave: () => setHoveredTab(undefined), children: tab }, tab));
+        }) }));
+};

package/build/KeyboardCommands.d.ts

@@ -0,0 +1,3 @@
+import { TextProps } from "@chakra-ui/react";
+export declare const FindCommand: (props: TextProps) => import("react/jsx-runtime").JSX.Element;
+export declare const OmniboxCommand: (props: TextProps) => import("react/jsx-runtime").JSX.Element;

package/build/KeyboardCommands.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Text } from "@chakra-ui/react";
+export const FindCommand = (props) => {
+    let text = "Ctrl + F";
+    if (navigator.userAgent.indexOf("Mac") > -1) {
+        text = "⌘F";
+    }
+    return (_jsx(Text, { as: "span", ...props, children: text }));
+};
+export const OmniboxCommand = (props) => {
+    let text = "Ctrl + K";
+    if (navigator.userAgent.indexOf("Mac") > -1) {
+        text = "⌘K";
+    }
+    return (_jsx(Text, { as: "span", ...props, children: text }));
+};

package/build/KurtosisAlert.d.ts

@@ -0,0 +1,9 @@
+import { AlertProps } from "@chakra-ui/react";
+import { FallbackProps } from "react-error-boundary";
+type KurtosisAlertProps = AlertProps & {
+    message: string;
+    details?: string;
+};
+export declare const KurtosisAlert: ({ message, details, ...alertProps }: KurtosisAlertProps) => import("react/jsx-runtime").JSX.Element;
+export declare const KurtosisAlertError: ({ error }: FallbackProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/build/KurtosisAlert.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Accordion, AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, Alert, AlertDescription, AlertIcon, AlertTitle, Box, Flex, } from "@chakra-ui/react";
+import { isDefined, stringifyError } from "./utils";
+export const KurtosisAlert = ({ message, details, ...alertProps }) => {
+    return (_jsxs(Alert, { status: "error", overflowY: "auto", maxHeight: "300px", alignItems: "flex-start", ...alertProps, children: [_jsx(AlertIcon, {}), _jsxs(Flex, { flexDirection: "column", width: "100%", gap: "8px", children: [_jsxs(Flex, { direction: "row", children: [_jsx(AlertTitle, { children: "Error" }), _jsx(AlertDescription, { children: message })] }), isDefined(details) && (_jsx(Accordion, { allowToggle: true, children: _jsxs(AccordionItem, { children: [_jsx("h2", { children: _jsxs(AccordionButton, { children: [_jsx(Box, { as: "span", flex: "1", textAlign: "left", children: "Error details" }), _jsx(AccordionIcon, {})] }) }), _jsx(AccordionPanel, { pb: 4, children: _jsx(Box, { as: "pre", whiteSpace: "pre-wrap", wordBreak: "break-word", children: details }) })] }) }))] })] }));
+};
+export const KurtosisAlertError = ({ error }) => {
+    return _jsx(KurtosisAlert, { message: "An error ocurred, details below", details: stringifyError(error) });
+};

package/build/KurtosisAlertModal.d.ts

@@ -0,0 +1,13 @@
+import { ButtonProps } from "@chakra-ui/react";
+type KurtosisAlertModalProps = {
+    title: string;
+    content: string;
+    isOpen: boolean;
+    isLoading?: boolean;
+    onClose: () => void;
+    onConfirm: () => void;
+    confirmText: string;
+    confirmButtonProps?: ButtonProps;
+};
+export declare const KurtosisAlertModal: ({ title, content, isOpen, isLoading, onClose, onConfirm, confirmText, confirmButtonProps, }: KurtosisAlertModalProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/build/KurtosisAlertModal.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, Flex, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalOverlay, Text, } from "@chakra-ui/react";
+export const KurtosisAlertModal = ({ title, content, isOpen, isLoading, onClose, onConfirm, confirmText, confirmButtonProps, }) => {
+    return (_jsxs(Modal, { isOpen: isOpen, onClose: () => !isLoading && onClose(), isCentered: true, children: [_jsx(ModalOverlay, {}), _jsxs(ModalContent, { children: [_jsx(ModalHeader, { children: title }), _jsx(ModalCloseButton, {}), _jsx(ModalBody, { children: _jsx(Text, { children: content }) }), _jsx(ModalFooter, { children: _jsxs(Flex, { justifyContent: "flex-end", gap: "12px", children: [_jsx(Button, { color: "gray.100", onClick: onClose, isDisabled: isLoading, children: "Dismiss" }), _jsx(Button, { onClick: onConfirm, ...confirmButtonProps, isLoading: isLoading, children: confirmText })] }) })] })] }));
+};

package/build/KurtosisBreadcrumbs.d.ts

@@ -0,0 +1,25 @@
+import { ReactElement } from "react";
+import { UIMatch } from "react-router-dom";
+export type KurtosisBreadcrumbsHandle<T extends string> = {
+    type: T;
+};
+export declare const registerBreadcrumbHandler: <T extends string>(type: T, render: (props: {
+    matches: UIMatch<object, KurtosisBreadcrumbsHandle<T>>[];
+}) => ReactElement) => void;
+type KurtosisBreadcrumbMenuItem = {
+    name: string;
+    destination: string;
+    icon?: ReactElement;
+};
+export type KurtosisBreadcrumb = {
+    name: string;
+    destination: string;
+    alternatives?: KurtosisBreadcrumbMenuItem[];
+};
+export declare const KurtosisBreadcrumbs: () => import("react/jsx-runtime").JSX.Element;
+type KurtosisBreadcrumbsImplProps = {
+    matchCrumbs: KurtosisBreadcrumb[];
+    extraControls?: ReactElement[];
+};
+export declare const KurtosisBreadcrumbsImpl: ({ matchCrumbs, extraControls }: KurtosisBreadcrumbsImplProps) => import("react/jsx-runtime").JSX.Element;
+export {};