@parallelworks/ui 0.1.0 → 0.3.0

package/dist/components/CopyToClipboard.d.ts

@@ -0,0 +1,17 @@
+interface ICopyToClipboardProps {
+    as?: 'div' | 'button';
+    text: string;
+    className?: string;
+    children?: React.ReactNode;
+    showIcon?: boolean;
+}
+export default function CopyToClipboard({ as, text, className, children, showIcon, }: ICopyToClipboardProps): import("react").JSX.Element;
+interface CopyCodeBlockProps {
+    textToCopy: string;
+    children: React.ReactNode;
+    secret?: boolean;
+    isRevealed?: boolean;
+    onRevealToggle?: () => void;
+}
+export declare function CopyCodeBlock({ textToCopy, children, secret, isRevealed, onRevealToggle, }: CopyCodeBlockProps): import("react").JSX.Element;
+export {};

package/dist/components/Dropdown.d.ts

@@ -0,0 +1,24 @@
+import { type SetStateAction } from 'react';
+import { type IOptions, type ICategory } from './dropdownUtils.js';
+export interface IProps {
+    options: (ICategory | IOptions | string)[];
+    onActiveChange?: (option: unknown) => void;
+    onChange: React.Dispatch<SetStateAction<unknown>>;
+    onRangeChange?: (range: {
+        min: number;
+        max: number;
+    }) => void;
+    value: IOptions | string | Record<string, unknown>;
+    id?: string;
+    ariaLabel?: string;
+    className?: string;
+    wrapperClassName?: string;
+    textBoxClassName?: string;
+    disabled?: boolean;
+    placeholder?: string;
+    loading?: boolean;
+    allowCustomValue?: boolean;
+    customValueLabel?: string;
+    portalEl?: HTMLElement;
+}
+export default function Dropdown(props: IProps): import("react").JSX.Element;

package/dist/components/Indicator.d.ts

@@ -0,0 +1,4 @@
+import type { TStatus } from '@parallelworks/workflow-parser';
+export declare function Indicator({ status }: {
+    status: TStatus;
+}): import("react").JSX.Element;

package/dist/components/Listbox.d.ts

@@ -0,0 +1,18 @@
+interface ICustomListboxProps {
+    /** Only used visually to inform what you're selecting */
+    type: string;
+    options: {
+        label: string;
+        secondaryLabel?: string;
+        icon?: React.ReactNode;
+        value: any;
+        selected: boolean;
+    }[];
+    closeOnSelect?: boolean;
+    allowSearch?: boolean;
+    handleOptionSelected: (value: any) => void;
+    className?: string;
+    invalid?: boolean;
+}
+export default function CustomListbox({ options, handleOptionSelected, type, allowSearch, closeOnSelect, className, invalid, }: ICustomListboxProps): import("react").JSX.Element;
+export {};

package/dist/components/Markdown.d.ts

@@ -0,0 +1,7 @@
+import type { ControlsConfig } from 'streamdown';
+export interface MarkdownProps {
+    children: string;
+    isStreaming?: boolean;
+    controls?: ControlsConfig;
+}
+export default function Markdown(props: MarkdownProps): import("react").JSX.Element;

package/dist/components/MarkdownImpl.d.ts

@@ -0,0 +1,2 @@
+import type { MarkdownProps } from './Markdown.js';
+export default function Markdown({ children, isStreaming, controls, }: MarkdownProps): import("react").JSX.Element;

package/dist/components/MultiSelect.d.ts

@@ -0,0 +1,19 @@
+import { type ICategory, type IOptions } from './dropdownUtils.js';
+type MultiSelectDropdownProps<T = string> = {
+    options: (ICategory<T> | IOptions<T> | string)[];
+    value: T[];
+    onChange: (next: T[]) => void;
+    id?: string;
+    className?: string;
+    wrapperClassName?: string;
+    textBoxClassName?: string;
+    disabled?: boolean;
+    placeholder?: string;
+    loading?: boolean;
+    searchable?: boolean;
+    maxTagCount?: number;
+    /** Custom comparator for object values. Defaults to strict equality. */
+    compareBy?: (a: T, b: T) => boolean;
+};
+export default function MultiSelectDropdown<T = string>({ options, value, onChange, id, className, wrapperClassName, textBoxClassName, disabled, placeholder, loading, searchable, maxTagCount, compareBy, }: MultiSelectDropdownProps<T>): import("react").JSX.Element;
+export {};

package/dist/components/Overview.d.ts

@@ -0,0 +1,12 @@
+export declare function Overview({ Icon, name, type, children, right, className, loading, iconSize, }: {
+    Icon: React.ReactNode;
+    name: string | React.ReactNode;
+    type?: string | React.ReactNode;
+    children?: React.ReactNode;
+    /** Right-aligned content on the header row (e.g. a detail-page action bar),
+     * vertically centered against the name block. */
+    right?: React.ReactNode;
+    className?: string;
+    loading?: boolean;
+    iconSize?: number;
+}): import("react").JSX.Element;

package/dist/components/Provider.d.ts

@@ -0,0 +1,438 @@
+import type { ReactNode } from 'react';
+export type UIToastId = string | number;
+export interface UIToastOptions {
+    toastId?: UIToastId;
+    /** false hides the default icon. */
+    icon?: false;
+    closeButton?: boolean;
+    autoClose?: number | false;
+}
+export interface UIToastUpdate {
+    render?: ReactNode;
+    type?: 'info' | 'success' | 'warning' | 'error';
+    /** false or null hides the icon. */
+    icon?: false | null;
+    isLoading?: boolean;
+    closeButton?: boolean | null;
+    autoClose?: number | false | null;
+}
+export interface UINotify {
+    info: (message: string) => void;
+    success: (message: string) => void;
+    warning: (message: string) => void;
+    error: (message: string) => void;
+    /** Persistent spinner toast; drive it with update/dismiss via the returned id. */
+    loading: (content: ReactNode, options?: UIToastOptions) => UIToastId;
+    update: (id: UIToastId, update: UIToastUpdate) => void;
+    /** Without an id, dismisses every open toast. */
+    dismiss: (id?: UIToastId) => void;
+}
+export interface UIStrings {
+    loading: string;
+    common: {
+        copy: string;
+        copied: string;
+        copyFailed: string;
+        showHiddenFields: string;
+        showHiddenFieldsHint: string;
+        jsonHasErrors: string;
+    };
+    dropdown: {
+        select: (type: string) => string;
+        noOptionsFound: string;
+    };
+    logviewer: {
+        error: string;
+        warning: string;
+        notice: string;
+        top: string;
+        clearSelection: string;
+        copyLines: (count: number) => string;
+        copyAll: string;
+        hideDebug: string;
+        showDebug: string;
+        filterLogs: string;
+        download: string;
+    };
+    dag: {
+        workflow: string;
+        run: string;
+        status: string;
+        runtime: string;
+        submitted: string;
+        expandAll: string;
+        collapseAll: string;
+        statusLabel: (status: string) => string;
+        statusReason: (reason: string | undefined | null) => string | undefined;
+    };
+    jobActions: {
+        openSubworkflowLogs: string;
+        openOriginalWorkflow: string;
+        openInNewGraph: string;
+    };
+    fileExplorer: {
+        preview: {
+            shareFile: string;
+            open: string;
+            userType: string;
+            select: (name: string) => string;
+            viewDetails: string;
+            openFolder: string;
+            delete: string;
+            detailsTab: string;
+            previewTab: string;
+            preview: string;
+            openFullPreview: string;
+            quickLook: string;
+            fullWindow: string;
+            streamed: string;
+            streamedTooltip: string;
+            loading: string;
+            linkError: string;
+            errorTitle: string;
+            previewError: string;
+            tooLarge: string;
+            downloadInstead: string;
+            archiveTitle: string;
+            archiveMessage: string;
+            unsupportedTitle: string;
+            unsupportedMessage: string;
+            notebookParseError: string;
+            copyUri: string;
+            download: string;
+            close: string;
+            zoomIn: string;
+            zoomOut: string;
+            previousFile: string;
+            nextFile: string;
+            csvRows: (count: number, columns: number) => string;
+            csvFirstRows: (count: number, columns: number) => string;
+            head: string;
+            tail: string;
+            firstLines: (count: number) => string;
+            lastLines: (count: number) => string;
+            notebookOutput: string;
+        };
+        createFolder: {
+            action: string;
+            submit: string;
+            creating: string;
+            folder: string;
+            namePlaceholder: string;
+            success: (name: string) => string;
+            error: (message: string) => string;
+            invalidTarget: string;
+            noWriteAccess: string;
+            unsupported: string;
+            validation: {
+                reserved: string;
+                separator: string;
+                exists: string;
+            };
+        };
+        readOnly: string;
+        cors: {
+            explanation: {
+                title: string;
+                description: string;
+                action: string;
+                note: string;
+            };
+            actions: {
+                retry: string;
+                addRules: string;
+            };
+            propagating: {
+                title: string;
+                description: string;
+                stages: {
+                    submitted: string;
+                    propagating: string;
+                    verified: string;
+                };
+                telemetry: {
+                    probing: string;
+                };
+            };
+        };
+        selectedCount: (count: number) => string;
+        loadingMore: string;
+        loadMore: string;
+        retry: string;
+        partialCount: (count: number) => string;
+        notFound: {
+            title: (name: string) => string;
+            description: string;
+            retry: string;
+        };
+        treeMoreCount: (count: number) => string;
+        treeMoreCountPartial: (count: number) => string;
+        messages: {
+            noWriteAccess: string;
+            uploadsUnsupported: string;
+            noFilesForDownload: string;
+            downloadLinkFailed: string;
+            fileLinkFailed: string;
+            fileLinkCopied: string;
+            noUri: string;
+            uriCopied: string;
+            uriCopyFailed: string;
+            storageUnavailable: string;
+            waitForCurrentUpload: string;
+            waitForUpload: string;
+            downloadUnsupported: string;
+            sharingUnsupported: string;
+            deleteUnsupported: string;
+            uploadUnsupported: string;
+            noItemsForDeletion: string;
+            deleting: string;
+            deleteSomeFailed: string;
+            deleteSuccess: string;
+            deleteFailed: (message: string) => string;
+            noFilesToUpload: string;
+            invalidUploadTarget: string;
+            uploadInitFailed: string;
+            uploadQueuedInfo: string;
+            connectFailed: string;
+            corsNoStorage: string;
+            corsAdded: string;
+            corsPropagating: string;
+        };
+        chrome: {
+            explorer: string;
+            refresh: string;
+            collapse: string;
+            upload: string;
+            download: string;
+            access: string;
+            manageAccess: string;
+            delete: string;
+            copyToClipboard: string;
+            selectAll: string;
+            name: string;
+            size: string;
+            created: string;
+            hash: string;
+            storageIconAlt: string;
+        };
+        confirmUpload: {
+            title: string;
+            text: (path: string) => string;
+            defaultPath: string;
+            noPath: string;
+            confirm: string;
+            target: string;
+            totalSize: string;
+            sizeLimitTitle: string;
+            sizeLimitBody: (total: string, max: string) => string;
+            sizeLimitHint: string;
+        };
+        confirmDelete: {
+            title: string;
+            text: string;
+            action: string;
+        };
+        empty: {
+            nothingSelected: string;
+            nothingSelectedHint: string;
+            folderEmpty: string;
+            dropHint: string;
+            readOnlyHint: string;
+            connectionIssue: string;
+            tryAgain: string;
+            shareThisFile: string;
+        };
+        upload: {
+            inQueue: (position: number, total: number) => string;
+            queuedShort: (position: number, total: number) => string;
+            destination: string;
+            eta: string;
+            uploading: string;
+            completeTitle: string;
+            completeShort: string;
+            failedTitle: string;
+            failedShort: string;
+            unknownTitle: string;
+            unknownShort: string;
+            cancelled: string;
+            completed: string;
+            failed: string;
+            totalSize: string;
+            size: string;
+            calculating: string;
+            expandDetails: string;
+            minimizeDetails: string;
+            sessionNotQueued: (id: string, status: string) => string;
+            allCancelled: (count: number) => string;
+            someUploaded: (count: number) => string;
+            someCancelled: (count: number) => string;
+            allUploaded: string;
+            failedSummary: (failed: number, total: number) => string;
+            failReasonGeneric: string;
+            refreshFailed: (name: string, message: string) => string;
+            unknownError: string;
+            overallProgress: string;
+        };
+    };
+    form: {
+        invalidDuration: string;
+        durationOutOfRange: (min: string, max: string) => string;
+        durationBelowMin: (min: string) => string;
+        readOnly: string;
+        readWrite: string;
+        readOnlyDescription: string;
+        readOnlyForced: string;
+    };
+    list: {
+        copy: (label: string) => string;
+        copied: (label: string) => string;
+        couldntCopy: (label: string) => string;
+        moreActions: string;
+        labelName: string;
+        labelEmail: string;
+        labelUsername: string;
+        labelUid: string;
+        labelId: string;
+        labelUrl: string;
+        couldNotLoad: (noun: string) => string;
+    };
+}
+export interface UINavigation {
+    toWorkflow: (name: string) => void;
+    toMarketItem: (name: string) => void;
+    openExternal: (href: string) => void;
+}
+export type WorkflowJsonRef = {
+    kind: 'marketplace';
+    slug: string;
+    version: string;
+} | {
+    kind: 'workflow';
+    name: string;
+};
+export interface RunFileResult {
+    data: string | undefined;
+    isLoading: boolean;
+    error: unknown;
+}
+export interface UIData {
+    /**
+     * Host-bound hook resolving a file in a run's artifact tree (logs, scripts).
+     * A null path skips fetching; refreshInterval polls while set. Must be a
+     * stable function reference — components call it as a hook.
+     */
+    useRunFile: (slug: string, path: string | null, options?: {
+        refreshInterval?: number;
+    }) => RunFileResult;
+    /**
+     * Resolves a workflow reference to its parsed JSON definition, for the YAML
+     * editor's input completion. Absent, that completion silently no-ops.
+     */
+    resolveWorkflowJson?: (ref: WorkflowJsonRef) => Promise<unknown>;
+    /**
+     * Provisions browser-access CORS rules on a storage. Absent, the storage
+     * explorer hides its "add CORS rules" affordance.
+     */
+    provisionCorsRules?: (args: {
+        csp: string;
+        type?: string;
+        username: string;
+        storageName: string;
+    }) => Promise<{
+        error?: string;
+    }>;
+}
+import type { FieldComponent } from '../form/fieldRegistry.js';
+/** Renders internal navigation; hosts bind their router's Link. */
+export type UILinkComponent = React.ComponentType<{
+    to: string;
+    onClick?: () => void;
+    className?: string;
+    children: ReactNode;
+}>;
+/** The provider's link slot, with a plain anchor fallback. */
+export declare function useLink(): UILinkComponent;
+export interface UISlots {
+    /** Internal navigation links; absent falls back to a plain anchor. */
+    link?: UILinkComponent;
+    /**
+     * Host-supplied form field components, merged over the form engine's core
+     * registry by field type. Lazy components are supported — the registry
+     * renders fields inside a Suspense boundary.
+     */
+    formFields?: Record<string, FieldComponent>;
+    /** Sessions block for a run's sidebar; absent hides the section. */
+    runSessions?: (args: {
+        runId: string;
+        runNumber: number;
+        runActive: boolean;
+    }) => ReactNode;
+    /** Rich read-only YAML viewer; absent falls back to a plain <pre>. */
+    yamlViewer?: (args: {
+        value: string;
+        height: number;
+        width: number;
+        contentKey: string;
+    }) => ReactNode;
+    /** Icon for a subworkflow step; absent hides icon-bound affordances. */
+    workflowIcon?: (args: {
+        image?: string;
+        type?: string;
+        className?: string;
+    }) => ReactNode;
+    /** Icon URL for a storage type; absent falls back to a generic disk icon.
+     * Scheme-dependent variants are the host's concern — bind with the host's
+     * own theme state. */
+    storageIconUrl?: (args: {
+        type: string;
+    }) => string | undefined;
+    /**
+     * The storage explorer's access-management drawer; absent hides the
+     * affordance. `storage` and `groups` are the host's own objects passed back
+     * through the explorer opaquely.
+     */
+    accessDrawer?: (args: {
+        open: boolean;
+        setOpen: (open: boolean) => void;
+        storage: unknown;
+        groups?: unknown;
+    }) => ReactNode;
+    /** The storage explorer's create-folder dialog; absent hides the affordance. */
+    createFolderDialog?: (args: {
+        open: boolean;
+        onClose: () => void;
+        typeIcon?: ReactNode;
+        typeLabel: string;
+        namePlaceholder: string;
+        submitLabel: string;
+        submittingLabel: string;
+        validateName: (name: string) => string | null;
+        onSubmit: (name: string) => Promise<boolean>;
+    }) => ReactNode;
+}
+export interface UIProviderValue {
+    notify: UINotify;
+    strings: UIStrings;
+    navigation: UINavigation;
+    data: UIData;
+    slots: UISlots;
+}
+export declare function useNotify(): UINotify;
+export declare function useStrings(): UIStrings;
+export declare function useNavigation(): UINavigation;
+export declare function useSlots(): UISlots;
+export declare function useWorkflowJsonResolver(): ((ref: WorkflowJsonRef) => Promise<unknown>) | undefined;
+export declare function useProvisionCorsRules(): UIData['provisionCorsRules'];
+export declare function useRunFile(slug: string, path: string | null, options?: {
+    refreshInterval?: number;
+}): RunFileResult;
+export declare function UIProvider({ notify, strings, navigation, data, slots, children, }: {
+    notify?: Partial<UINotify>;
+    strings?: {
+        [G in keyof UIStrings]?: UIStrings[G] extends object ? Partial<UIStrings[G]> : UIStrings[G];
+    };
+    navigation?: Partial<UINavigation>;
+    data?: Partial<UIData>;
+    slots?: UISlots;
+    children: React.ReactNode;
+}): import("react").JSX.Element;

package/dist/components/SectionHeader.d.ts

@@ -0,0 +1,6 @@
+interface ISectionHeaderProps {
+    className?: string;
+    children: React.ReactNode;
+}
+export default function SectionHeader({ children, className, }: ISectionHeaderProps): import("react").JSX.Element;
+export {};

package/dist/components/SwitchToggle.d.ts

@@ -0,0 +1,12 @@
+interface IToggleProps {
+    onChange: (value: boolean) => void;
+    value?: boolean;
+    /** Display label for the on/off positions; defaults to Yes/No. */
+    yesLabel?: string;
+    noLabel?: string;
+    disabled?: boolean;
+    datatip?: string;
+    invalid?: boolean;
+}
+declare function SwitchToggle({ onChange, value, yesLabel, noLabel, disabled, datatip, invalid, }: IToggleProps): import("react").JSX.Element;
+export default SwitchToggle;

package/dist/components/SwitchToggleSmall.d.ts

@@ -0,0 +1,6 @@
+import type React from 'react';
+interface SwitchToggleSmallProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'value'> {
+    value?: boolean;
+}
+export default function SwitchToggleSmall({ value, disabled, className, ...buttonProps }: SwitchToggleSmallProps): React.JSX.Element;
+export {};

package/dist/components/dropdownUtils.d.ts

@@ -0,0 +1,18 @@
+import type React from 'react';
+export interface IOptions<T = unknown> {
+    label: string;
+    value: T;
+    secondaryValue?: unknown;
+    disabled?: boolean;
+    icon?: React.ReactNode;
+    description?: string;
+}
+export interface ICategory<T = unknown> {
+    category?: string;
+    options: IOptions<T>[];
+}
+export declare function isCategory<T>(option: ICategory<T> | IOptions<T> | string): option is ICategory<T>;
+export declare function isOption<T>(option: ICategory<T> | IOptions<T> | string): option is IOptions<T>;
+export declare function flattenOptions<T>(options: (ICategory<T> | IOptions<T> | string)[]): (IOptions<T> | ICategory<T>)[];
+export declare function filterOption<T>(option: IOptions<T>, query: string): boolean;
+export declare function DropdownCaret(): React.JSX.Element;

package/dist/editor/Editor.d.ts

@@ -0,0 +1,2 @@
+import type { IEditorProps } from './Monaco.js';
+export default function Editor({ ...props }: IEditorProps): import("react").JSX.Element;

package/dist/editor/EditorField.d.ts

@@ -0,0 +1,11 @@
+import type { FieldComponentProps } from '../form/types/fieldComponentTypes.js';
+import type { BaseField } from '../form/types/fieldTypes.js';
+export interface IEditorField extends BaseField {
+    type: 'editor';
+    default?: string;
+    options?: {
+        language?: string;
+        theme?: string;
+    };
+}
+export default function EditorField(props: FieldComponentProps<IEditorField>): import("react").JSX.Element;

package/dist/editor/FormCodePanel.d.ts

@@ -0,0 +1,8 @@
+declare function FormCodePanel({ formJSON, data, mutate, height, disabled, }: {
+    formJSON: Record<string, any>;
+    data: Record<string, any>;
+    mutate: any;
+    height?: string;
+    disabled?: boolean;
+}): import("react").JSX.Element;
+export default FormCodePanel;

package/dist/editor/Monaco.d.ts

@@ -0,0 +1,31 @@
+import * as monaco from 'monaco-editor';
+export interface EditorMarketplaceItem {
+    readonly slug?: string;
+    readonly name?: string | null;
+    readonly description?: string | null;
+    readonly type?: string | null;
+    readonly subtype?: string | null;
+    readonly versions?: readonly string[] | null;
+}
+export interface EditorWorkflowItem {
+    readonly name?: string;
+    readonly displayName?: string | null;
+    readonly description?: string | null;
+    readonly type?: string | null;
+}
+type MarketplaceItem = EditorMarketplaceItem;
+type WorkflowItem = EditorWorkflowItem;
+export type ISchemaError = monaco.editor.IMarker;
+export interface IEditorProps extends monaco.editor.IStandaloneEditorConstructionOptions {
+    className?: string;
+    disabled?: boolean;
+    onChange?: (value: string) => void;
+    onValidate?: (errors: any[]) => void;
+    width?: string | number;
+    height?: string | number;
+    path?: 'file:///workflow.yaml' | string;
+    marketplaceItems?: MarketplaceItem[];
+    workflows?: WorkflowItem[];
+}
+export default function MonacoEditor({ className, disabled, onChange, onValidate, width, height, path, marketplaceItems, workflows, ...options }: IEditorProps): import("react").JSX.Element;
+export {};

package/dist/editor/index.d.ts

@@ -0,0 +1,7 @@
+export { default as Editor } from './Editor.js';
+export { default as EditorField, type IEditorField } from './EditorField.js';
+export { default as FormCodePanel } from './FormCodePanel.js';
+export type { EditorMarketplaceItem, EditorWorkflowItem, IEditorProps, ISchemaError, } from './Monaco.js';
+export { defineEditorThemes, getThemeName } from './themes.js';
+export { setupMonacoWorkers } from './workers.js';
+export { useCssIsDark } from './useCssIsDark.js';

package/dist/editor/index.js

@@ -0,0 +1,2 @@
+import { a as FormCodePanel, i as getThemeName, n as setupMonacoWorkers, o as EditorField, r as defineEditorThemes, s as Editor, t as useCssIsDark } from "../chunks/editor-D55tumuZ.js";
+export { Editor, EditorField, FormCodePanel, defineEditorThemes, getThemeName, setupMonacoWorkers, useCssIsDark };

package/dist/editor/themes.d.ts

@@ -0,0 +1,4 @@
+import type * as monaco from 'monaco-editor';
+export declare function expandShorthandHex(color: string): string;
+export declare function defineEditorThemes(monacoEditor: typeof monaco.editor): void;
+export declare function getThemeName(isDark: boolean, disabled?: boolean): string;