asl-viewer/dist/index.d.ts

React library for viewing AWS Step Functions workflows in the browser

import React$1 from 'react';

interface ASLDefinition {
    Comment?: string;
    StartAt: string;
    States: Record<string, StateDefinition>;
    TimeoutSeconds?: number;
    Version?: string;
}
interface StateDefinition {
    Type: StateType;
    Comment?: string;
    Next?: string;
    End?: boolean;
    InputPath?: string;
    OutputPath?: string;
    ResultPath?: string;
    Parameters?: Record<string, any>;
    ResultSelector?: Record<string, any>;
    Retry?: RetryDefinition[];
    Catch?: CatchDefinition[];
    TimeoutSeconds?: number;
    HeartbeatSeconds?: number;
    Resource?: string;
    Choices?: ChoiceRule[];
    Default?: string;
    Seconds?: number;
    Timestamp?: string;
    SecondsPath?: string;
    TimestampPath?: string;
    Branches?: ASLDefinition[];
    Iterator?: ASLDefinition;
    ItemsPath?: string;
    MaxConcurrency?: number;
    Result?: any;
    Cause?: string;
    Error?: string;
}
type StateType = "Pass" | "Task" | "Choice" | "Wait" | "Succeed" | "Fail" | "Parallel" | "Map";
interface ChoiceRule {
    Variable?: string;
    StringEquals?: string;
    StringLessThan?: string;
    StringGreaterThan?: string;
    StringLessThanEquals?: string;
    StringGreaterThanEquals?: string;
    NumericEquals?: number;
    NumericLessThan?: number;
    NumericGreaterThan?: number;
    NumericLessThanEquals?: number;
    NumericGreaterThanEquals?: number;
    BooleanEquals?: boolean;
    TimestampEquals?: string;
    TimestampLessThan?: string;
    TimestampGreaterThan?: string;
    TimestampLessThanEquals?: string;
    TimestampGreaterThanEquals?: string;
    And?: ChoiceRule[];
    Or?: ChoiceRule[];
    Not?: ChoiceRule;
    Next: string;
}
interface RetryDefinition {
    ErrorEquals: string[];
    IntervalSeconds?: number;
    MaxAttempts?: number;
    BackoffRate?: number;
}
interface CatchDefinition {
    ErrorEquals: string[];
    Next: string;
    ResultPath?: string;
}
interface StateNode {
    id: string;
    name: string;
    type: StateType;
    definition: StateDefinition;
    position: {
        x: number;
        y: number;
    };
    size: {
        width: number;
        height: number;
    };
    connections: Connection[];
    isStartState: boolean;
    isEndState: boolean;
    parentId?: string;
    branchIndex?: number;
    children?: StateNode[];
    isGroup?: boolean;
    groupBounds?: {
        width: number;
        height: number;
    };
    isExpanded?: boolean;
}
interface Connection {
    from: string;
    to: string;
    type: ConnectionType;
    label?: string;
    condition?: string;
}
type ConnectionType = "next" | "choice" | "error" | "retry" | "default";
interface ValidationError {
    message: string;
    path: string;
    severity: "error" | "warning";
    line?: number;
    column?: number;
}
interface WorkflowViewerProps {
    definition?: ASLDefinition | string;
    url?: string;
    file?: File;
    width?: number;
    height?: number;
    theme?: ThemeName | ViewerTheme;
    hideComment?: boolean;
    useMiniMap?: boolean;
    useControls?: boolean;
    useZoom?: boolean;
    useFitView?: boolean;
    isDraggable?: boolean;
    isSelectable?: boolean;
    isConnectable?: boolean;
    isMultiSelect?: boolean;
    readonly?: boolean;
    layoutDirection?: "TB" | "LR";
    showToolbar?: boolean;
    onStateClick?: (state: StateNode) => void;
    onValidationError?: (error: ValidationError) => void;
    onLoadStart?: () => void;
    onLoadEnd?: () => void;
    onLoadError?: (error: Error) => void;
    className?: string;
    style?: React.CSSProperties;
}
interface GraphLayout {
    nodes: StateNode[];
    edges: Connection[];
    width: number;
    height: number;
}
/**
 * Available theme names
 */
type ThemeName = "light" | "dark" | "highContrast" | "soft";
interface ViewerTheme {
    name: ThemeName | string;
    background: string;
    surfaceColor: string;
    overlayColor: string;
    nodeColors: {
        pass: string;
        task: string;
        stepFunction: string;
        choice: string;
        wait: string;
        succeed: string;
        fail: string;
        parallel: string;
        map: string;
    };
    nodeBorderColors: {
        pass: string;
        task: string;
        stepFunction: string;
        choice: string;
        wait: string;
        succeed: string;
        fail: string;
        parallel: string;
        map: string;
    };
    nodeHoverColors: {
        pass: string;
        task: string;
        stepFunction: string;
        choice: string;
        wait: string;
        succeed: string;
        fail: string;
        parallel: string;
        map: string;
    };
    textColor: string;
    textColorSecondary: string;
    textColorMuted: string;
    borderColor: string;
    borderColorHover: string;
    connectionColor: string;
    connectionHoverColor: string;
    connectionLabelColor: string;
    startNodeColor: string;
    endNodeColor: string;
    selectedNodeColor: string;
    shadowColor: string;
    errorColor: string;
    warningColor: string;
    infoColor: string;
    successColor: string;
    gridColor: string;
    miniMapBackground: string;
    controlsBackground: string;
    tooltipBackground: string;
    tooltipTextColor: string;
}

/**
 * A React component for visualizing AWS Step Functions workflows.
 *
 * This component parses and validates an ASL (Amazon States Language) definition,
 * generates a graphical layout, and renders the workflow using a graph visualization library.
 * It also provides interactivity for viewing state details and handling state click events.
 *
 * @component
 * @param {WorkflowViewerProps} props - The props for the WorkflowViewer component.
 * @param {ASLDefinition | string} [props.definition] - The ASL definition of the workflow to be visualized.
 * @param {string} [props.url] - URL to load the ASL definition from.
 * @param {File} [props.file] - File object containing the ASL definition.
 * @param {number} [props.width=800] - The width of the viewer in pixels.
 * @param {number} [props.height=600] - The height of the viewer in pixels.
 * @param {string} [props.theme='light'] - The theme of the viewer, either 'light' or 'dark'.
 * @param {boolean} [props.readonly=true] - Whether the viewer is in read-only mode.
 * @param {boolean} [props.isConnectable=true] - Whether nodes can be connected to each other.
 * @param {boolean} [props.isDraggable=false] - Whether nodes can be dragged around.
 * @param {boolean} [props.isSelectable=true] - Whether nodes can be selected.
 * @param {boolean} [props.isMultiSelect=false] - Whether multiple nodes can be selected at once.
 * @param {boolean} [props.useMiniMap=false] - Whether to show a minimap for navigation.
 * @param {boolean} [props.useControls=true] - Whether to show zoom and pan controls.
 * @param {boolean} [props.useZoom=true] - Whether zooming is enabled.
 * @param {boolean} [props.useFitView=true] - Whether to automatically fit the view to show all nodes.
 * @param {string} [props.layoutDirection='TB'] - The layout direction of the graph, either 'TB' (top-bottom) or 'LR' (left-right).
 * @param {boolean} [props.showToolbar=false] - Whether to show the toolbar for additional controls.
 * @param {boolean} [props.hideComment=false] - Whether to hide the workflow comment/header.
 * @param {(state: StateNode) => void} [props.onStateClick] - Callback invoked when a state is clicked.
 * @param {(error: ValidationError) => void} [props.onValidationError] - Callback invoked when validation errors occur.
 * @param {() => void} [props.onLoadStart] - Callback invoked when loading starts.
 * @param {() => void} [props.onLoadEnd] - Callback invoked when loading ends.
 * @param {(error: Error) => void} [props.onLoadError] - Callback invoked when loading fails.
 * @param {string} [props.className] - Additional CSS class names for the root container.
 * @param {React.CSSProperties} [props.style] - Inline styles for the root container.
 *
 * @returns {JSX.Element} The rendered WorkflowViewer component.
 *
 * @example
 * ```tsx
 * // Basic usage with definition object
 * <WorkflowViewer
 *   definition={aslDefinition}
 *   width={1000}
 *   height={800}
 *   theme="dark"
 *   onStateClick={(state) => console.log('State clicked:', state)}
 * />
 *
 * // Interactive mode with minimap and controls
 * <WorkflowViewer
 *   definition={workflow}
 *   useMiniMap={true}
 *   useControls={true}
 *   isDraggable={true}
 *   isMultiSelect={true}
 *   readonly={false}
 * />
 *
 * // Minimal view without controls
 * <WorkflowViewer
 *   definition={workflow}
 *   useControls={false}
 *   useFitView={false}
 *   useZoom={false}
 *   isSelectable={false}
 * />
 *
 * // Load from URL
 * <WorkflowViewer
 *   url="https://example.com/workflow.json"
 *   onLoadStart={() => console.log('Loading...')}
 *   onLoadEnd={() => console.log('Loaded!')}
 * />
 *
 * // Load from file upload
 * <WorkflowViewer
 *   file={selectedFile}
 *   onLoadError={(error) => console.error('Load error:', error)}
 * />
 * ```
 */
declare const WorkflowViewer: React$1.FC<WorkflowViewerProps>;

interface ReactFlowRendererProps {
    nodes: StateNode[];
    edges: Connection[];
    width: number;
    height: number;
    theme: ViewerTheme;
    onStateClick?: (state: StateNode) => void;
    isConnectable?: boolean;
    isDraggable?: boolean;
    isSelectable?: boolean;
    isMultiSelect?: boolean;
    useMiniMap?: boolean;
    useControls?: boolean;
    useBackground?: boolean;
    useZoom?: boolean;
    useFitView?: boolean;
    layoutDirection?: "TB" | "LR";
    searchTerm?: string;
    searchMatchIndex?: number;
    onNodeClick?: (state: StateNode) => void;
}
declare const ReactFlowRenderer: React$1.FC<ReactFlowRendererProps>;

interface ReactFlowStateNodeProps {
    data: {
        stateNode: StateNode;
        theme: ViewerTheme;
        onStateClick?: (state: StateNode) => void;
        isHighlighted?: boolean;
    };
}
declare const ReactFlowStateNode: React$1.FC<ReactFlowStateNodeProps>;

interface ErrorDisplayProps {
    errors: ValidationError[];
    theme: ViewerTheme;
    width: number;
    height: number;
}
declare const ErrorDisplay: React$1.FC<ErrorDisplayProps>;

interface FileUploaderProps {
    onFileSelect: (file: File) => void;
    theme: ViewerTheme;
    accept?: string;
    disabled?: boolean;
    className?: string;
    style?: React$1.CSSProperties;
}
/**
 * A file uploader component for selecting ASL definition files
 */
declare const FileUploader: React$1.FC<FileUploaderProps>;
interface URLInputProps {
    onUrlSubmit: (url: string) => void;
    theme: ViewerTheme;
    disabled?: boolean;
    defaultValue?: string;
    placeholder?: string;
    className?: string;
    style?: React$1.CSSProperties;
}
/**
 * A URL input component for loading ASL definitions from URLs
 */
declare const URLInput: React$1.FC<URLInputProps>;

/**
 * Validates an ASL definition for syntax and semantic errors
 */
declare function validateASLDefinition(definition: ASLDefinition): ValidationError[];
/**
 * Parses ASL definition from string to object
 */
declare function parseASLDefinition(definition: string | ASLDefinition): ASLDefinition;

/**
 * Converts ASL definition to graph layout using a hierarchical approach optimized for React Flow
 */
declare function createGraphLayout(definition: ASLDefinition, direction?: "TB" | "LR"): GraphLayout;
/**
 * Creates a simplified layout for basic use cases without complex dependencies
 */
declare function createSimpleLayout(definition: ASLDefinition): GraphLayout;

/**
 * Modern Light Theme - Clean and professional with subtle shadows
 */
declare const lightTheme: ViewerTheme;
/**
 * Modern Dark Theme - Sleek and elegant with high contrast
 */
declare const darkTheme: ViewerTheme;
/**
 * High Contrast Theme - Optimized for accessibility
 */
declare const highContrastTheme: ViewerTheme;
/**
 * Soft Theme - Gentle colors for extended viewing
 */
declare const softTheme: ViewerTheme;
/**
 * Get theme by name
 */
declare function getTheme(themeName: ThemeName): ViewerTheme;
/**
 * Get all available themes
 */
declare function getAllThemes(): Record<ThemeName, ViewerTheme>;
/**
 * Get theme names
 */
declare function getThemeNames(): ThemeName[];
/**
 * Create a custom theme based on an existing theme
 */
declare function createCustomTheme(baseTheme: ThemeName, overrides: Partial<Omit<ViewerTheme, "nodeColors" | "nodeBorderColors" | "nodeHoverColors"> & {
    nodeColors?: Partial<ViewerTheme["nodeColors"]>;
    nodeBorderColors?: Partial<ViewerTheme["nodeBorderColors"]>;
    nodeHoverColors?: Partial<ViewerTheme["nodeHoverColors"]>;
}>): ViewerTheme;

/**
 * Load ASL definition from a URL
 */
declare function loadFromURL(url: string): Promise<ASLDefinition>;
/**
 * Load ASL definition from a File object
 */
declare function loadFromFile(file: File): Promise<ASLDefinition>;
/**
 * Parse ASL definition from string
 */
declare function parseDefinitionString(definition: string): ASLDefinition;

export { ASLDefinition, CatchDefinition, ChoiceRule, Connection, ConnectionType, ErrorDisplay, FileUploader, GraphLayout, ReactFlowRenderer, ReactFlowStateNode, RetryDefinition, StateDefinition, StateNode, StateType, ThemeName, URLInput, ValidationError, ViewerTheme, WorkflowViewer, WorkflowViewerProps, createCustomTheme, createGraphLayout, createSimpleLayout, darkTheme, getAllThemes, getTheme, getThemeNames, highContrastTheme, lightTheme, loadFromFile, loadFromURL, parseASLDefinition, parseDefinitionString, softTheme, validateASLDefinition };