qlik-script-editor/lib/index.d.ts

A React component library for Qlik Sense script editing with syntax highlighting, autocomplete, and theme support

import { Context } from 'react';
import { default as default_2 } from 'react';

/**
 * Common component props that most components should accept
 */
export declare interface BaseComponentProps {
    /** Additional CSS class name */
    className?: string;
    /** React children */
    children?: React.ReactNode;
    /** Unique identifier for the component */
    id?: string;
    /** Test identifier for testing */
    'data-testid'?: string;
}

/**
 * A versatile button component with multiple variants, sizes, and states.
 * Supports icons, loading states, and accessibility features.
 */
export declare const Button: default_2.ForwardRefExoticComponent<ButtonProps & default_2.RefAttributes<HTMLButtonElement>>;

export declare interface ButtonProps extends default_2.ButtonHTMLAttributes<HTMLButtonElement> {
    /**
     * The button variant
     * @default 'primary'
     */
    variant?: 'primary' | 'secondary' | 'outline' | 'ghost';
    /**
     * The button size
     * @default 'md'
     */
    size?: 'sm' | 'md' | 'lg';
    /**
     * Whether the button is in a loading state
     * @default false
     */
    loading?: boolean;
    /**
     * Icon to display before the button text
     */
    leftIcon?: default_2.ReactNode;
    /**
     * Icon to display after the button text
     */
    rightIcon?: default_2.ReactNode;
    /**
     * Whether the button should take the full width of its container
     * @default false
     */
    fullWidth?: boolean;
    /**
     * The button content
     */
    children?: default_2.ReactNode;
}

/**
 * A flexible card component for containing content
 */
export declare const Card: default_2.FC<CardProps>;

export declare interface CardProps {
    /**
     * Card content
     */
    children: default_2.ReactNode;
    /**
     * Card title
     */
    title?: string;
    /**
     * Card padding
     */
    padding?: 'sm' | 'md' | 'lg';
    /**
     * Enable shadow
     */
    shadow?: boolean;
    /**
     * Additional CSS classes
     */
    className?: string;
}

declare type ClassArray = ClassValue[];

declare type ClassDictionary = Record<string, any>;

declare type ClassValue = ClassArray | ClassDictionary | string | number | bigint | null | boolean | undefined;

/**
 * Utility function to merge class names conditionally
 * Uses clsx for conditional class names and handles conflicts
 */
export declare function cn(...inputs: ClassValue[]): string;

/**
 * Debounce function that delays the execution of a function
 * @param func - The function to debounce
 * @param wait - The delay in milliseconds
 * @returns The debounced function
 */
export declare function debounce<T extends (...args: unknown[]) => unknown>(func: T, wait: number): (...args: Parameters<T>) => void;

/**
 * Editor theme configuration
 */
export declare interface EditorTheme {
    name: string;
    colors: {
        background: string;
        text: string;
        keyword: string;
        string: string;
        comment: string;
        function: string;
        variable: string;
        border: string;
    };
}

/**
 * Generate a unique ID string
 * @param prefix - Optional prefix for the ID
 * @returns A unique ID string
 */
export declare function generateId(prefix?: string): string;

/**
 * Check if a value is not null or undefined
 * @param value - The value to check
 * @returns True if the value is not null or undefined
 */
export declare function isNotNullish<T>(value: T | null | undefined): value is T;

/**
 * Omit keys from an object
 * @param obj - The object to omit keys from
 * @param keys - The keys to omit
 * @returns A new object without the specified keys
 */
export declare function omit<T extends Record<string, unknown>, K extends keyof T>(obj: T, keys: K[]): Omit<T, K>;

/**
 * Pick keys from an object
 * @param obj - The object to pick keys from
 * @param keys - The keys to pick
 * @returns A new object with only the specified keys
 */
export declare function pick<T extends Record<string, unknown>, K extends keyof T>(obj: T, keys: K[]): Pick<T, K>;

/**
 * Qlik field definition
 */
export declare interface QlikField {
    name: string;
    type: 'string' | 'number' | 'date' | 'timestamp';
    nullable?: boolean;
}

/**
 * Qlik function definition for autocomplete
 */
export declare interface QlikFunction {
    name: string;
    description: string;
    syntax: string;
    category: 'aggregation' | 'string' | 'date' | 'conditional' | 'math' | 'system';
    parameters: QlikFunctionParameter[];
}

/**
 * Qlik function parameter
 */
export declare interface QlikFunctionParameter {
    name: string;
    type: string;
    required: boolean;
    description: string;
}

/**
 * A Qlik Script Editor component with syntax highlighting and autocomplete
 */
export declare const QlikScriptEditor: default_2.FC<QlikScriptEditorProps>;

export declare interface QlikScriptEditorProps {
    /**
     * Initial script content
     */
    initialScript?: string;
    /**
     * Callback when script content changes
     */
    onChange?: (value: string) => void;
    /**
     * Available Qlik variables for autocomplete
     */
    variables?: string[];
    /**
     * Editor theme
     */
    theme?: 'light' | 'dark';
    /**
     * Editor height
     */
    height?: string;
    /**
     * Editor width
     */
    width?: string;
    /**
     * Whether the editor is read-only
     */
    readOnly?: boolean;
    /**
     * Additional CSS class
     */
    className?: string;
    /**
     * Placeholder text when editor is empty
     */
    placeholder?: string;
}

export declare interface QlikScriptError {
    line: number;
    column: number;
    message: string;
    type: 'syntax' | 'warning' | 'info';
}

/**
 * Qlik table definition
 */
export declare interface QlikTable {
    name: string;
    fields: QlikField[];
    source?: string;
}

/**
 * Qlik variable definition
 */
export declare interface QlikVariable {
    name: string;
    value: string | number;
    description?: string;
}

/**
 * Common size types used across components
 */
export declare type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl';

export declare type Theme = 'light' | 'dark' | 'system';

export declare const ThemeContext: Context<ThemeContextType | undefined>;

export declare interface ThemeContextType {
    theme: Theme;
    actualTheme: 'light' | 'dark';
    setTheme: (theme: Theme) => void;
}

/**
 * Theme provider for managing light/dark theme state
 */
export declare const ThemeProvider: default_2.FC<ThemeProviderProps>;

declare interface ThemeProviderProps {
    /**
     * Default theme
     */
    defaultTheme?: Theme;
    /**
     * Local storage key for theme persistence
     */
    storageKey?: string;
    /**
     * Children components
     */
    children: default_2.ReactNode;
}

/**
 * A hook for managing counter state with optional min/max constraints
 *
 * @param options - Configuration options for the counter
 * @returns Counter state and controls
 *
 * @example
 * ```tsx
 * const { count, increment, decrement, reset } = useCounter({
 *   initialValue: 0,
 *   min: 0,
 *   max: 10,
 *   step: 1
 * })
 * ```
 */
export declare function useCounter(options?: UseCounterOptions): UseCounterReturn;

export declare interface UseCounterOptions {
    /**
     * The initial count value
     * @default 0
     */
    initialValue?: number;
    /**
     * The minimum allowed value
     */
    min?: number;
    /**
     * The maximum allowed value
     */
    max?: number;
    /**
     * The step value for increment/decrement
     * @default 1
     */
    step?: number;
}

export declare interface UseCounterReturn {
    /** The current count value */
    count: number;
    /** Increment the count by the step value */
    increment: () => void;
    /** Decrement the count by the step value */
    decrement: () => void;
    /** Reset the count to the initial value */
    reset: () => void;
    /** Set the count to a specific value */
    set: (value: number) => void;
    /** Whether the count is at the minimum value */
    isAtMin: boolean;
    /** Whether the count is at the maximum value */
    isAtMax: boolean;
}

/**
 * Hook for managing Qlik script state and validation
 */
export declare function useQlikScript(options?: UseQlikScriptOptions): UseQlikScriptReturn;

export declare interface UseQlikScriptOptions {
    /**
     * Initial script content
     */
    initialScript?: string;
    /**
     * Callback when script content changes
     */
    onChange?: (script: string) => void;
    /**
     * Available variables for validation
     */
    variables?: string[];
    /**
     * Enable syntax validation
     */
    enableValidation?: boolean;
}

export declare interface UseQlikScriptReturn {
    /** Current script content */
    script: string;
    /** Set script content */
    setScript: (script: string) => void;
    /** Clear script content */
    clearScript: () => void;
    /** Script validation errors */
    errors: QlikScriptError[];
    /** Whether script has any errors */
    hasErrors: boolean;
    /** Format script with proper indentation */
    formatScript: () => void;
    /** Get script statistics */
    getScriptStats: () => {
        lines: number;
        characters: number;
        words: number;
        tables: number;
        variables: string[];
    };
}

/**
 * Hook to access theme context
 */
export declare const useTheme: () => ThemeContextType;

/**
 * Common variant types used across components
 */
export declare type Variant = 'primary' | 'secondary' | 'outline' | 'ghost';

export { }