air-command-ui-library/dist/index.d.ts

A React component library for Air Command System with Storybook

import React, { ReactNode } from 'react';

type ColorVariant = 'primary' | 'danger' | 'warning' | 'white' | 'black' | 'cancel';
type Size$1 = 'xs' | 'sm' | 'md' | 'lg';
type Theme$3 = 'light' | 'dark';
interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
    color?: ColorVariant;
    size?: Size$1;
    width?: string;
    outline?: boolean;
    theme?: Theme$3;
    icon?: React.ReactNode;
    iconOnly?: boolean;
    children?: React.ReactNode;
    'aria-label'?: string;
}

declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;

type Theme$2 = 'light' | 'dark';
type InputType = 'text' | 'email' | 'password' | 'number' | 'search' | 'tel' | 'url';
interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {
    theme?: Theme$2;
    type?: InputType;
    placeholder?: string;
    label?: string;
    disabled?: boolean;
    error?: boolean;
    errorMessage?: string;
    width?: string;
    className?: string;
}

declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;

type SortDirection = 'asc' | 'desc' | null;
interface SortState {
    columnKey: string | null;
    direction: SortDirection;
}
interface CompoundSortState {
    primary: {
        columnKey: string | null;
        direction: SortDirection;
    };
    secondary: {
        columnKey: string | null;
        direction: SortDirection;
    };
}
type ClassificationStatus = 'FRIENDLY' | 'HOSTILE' | 'NEUTRAL' | 'UNKNOWN';
interface ColumnType {
    key: string;
    title: string;
    dataIndex: string;
    width?: string;
    align?: 'left' | 'center' | 'right';
    sortable?: boolean;
    render?: (value: any, record: any, index: number) => React.ReactNode;
}
interface TableProps {
    columns: ColumnType[];
    dataSource: Record<string, any>[];
    theme?: 'light' | 'dark';
    rowSelection?: boolean;
    selectedRowKeys?: (string | number)[];
    onRowSelectionChange?: (selectedRowKeys: (string | number)[], selectedRows: Record<string, any>[]) => void;
    onSort?: (columnKey: string, direction: SortDirection) => void;
    loading?: boolean;
    emptyText?: string;
    height?: string | number;
    bordered?: boolean;
    className?: string;
    style?: React.CSSProperties;
    compoundSortState?: CompoundSortState;
}

declare const Table: React.ForwardRefExoticComponent<TableProps & React.RefAttributes<HTMLDivElement>>;

type Theme$1 = 'light' | 'dark';
type Size = 'sm' | 'md' | 'lg';
interface ComboBoxOption {
    value: string;
    label: string;
    disabled?: boolean;
}
interface ComboBoxProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
    options: ComboBoxOption[];
    value?: string;
    onChange?: (_value: string) => void;
    label?: string;
    placeholder?: string;
    disabled?: boolean;
    theme?: Theme$1;
    size?: Size;
    searchable?: boolean;
    width?: string;
    error?: boolean;
    helperText?: string;
    required?: boolean;
    name?: string;
}

declare const ComboBox: React.ForwardRefExoticComponent<ComboBoxProps & React.RefAttributes<HTMLDivElement>>;

type Theme = 'light' | 'dark';
type ThemeVariant = Theme;
interface BaseComponentProps {
    className?: string;
    style?: React.CSSProperties;
    'data-testid'?: string;
}
interface User {
    name: string;
    role?: string;
}
interface NavbarProps {
    title: string;
    user?: User;
    onLogout?: () => void;
    theme?: Theme;
    className?: string;
    onThemeToggle?: () => void;
    currentTheme?: Theme;
    logo?: string;
    showThemeToggle?: boolean;
    showLanguageToggle?: boolean;
    onLanguageToggle?: () => void;
    currentLanguage?: string;
}

declare const Navbar: React.FC<NavbarProps>;

type StatusType = 'friendly' | 'hostile' | 'neutral' | 'unknown';
type StatusBadgeSize = 'small' | 'medium' | 'large';
type StatusBadgeVariant = 'dot' | 'background';
interface StatusBadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
    status: StatusType;
    text?: string;
    size?: StatusBadgeSize;
    variant?: StatusBadgeVariant;
    className?: string;
}

declare const StatusBadge: React.ForwardRefExoticComponent<StatusBadgeProps & React.RefAttributes<HTMLSpanElement>>;

interface InfoField {
    label: string;
    value: string | number;
}
interface InfoModalProps extends BaseComponentProps {
    isOpen: boolean;
    onClose: () => void;
    aircraftId: string;
    fields: InfoField[];
    classification?: string;
    onUpdate?: () => void;
    onDelete?: () => void;
    onShowHistory?: () => void;
    isHistoryVisible?: boolean;
    theme?: 'light' | 'dark';
    translations?: {
        showHistory?: string;
        hideHistory?: string;
        update?: string;
    };
}
declare const InfoModal: React.FC<InfoModalProps>;

interface UpdateModalProps extends BaseComponentProps {
    isOpen: boolean;
    onClose: () => void;
    onUpdate: (data: {
        type: string;
        classification: string;
    }) => void;
    title?: string;
    /**
     * Optional identifier of the entity shown in the modal title.
     * When provided and title is not passed, the header becomes
     * "<t('common.update')> <itemIdentifier>" with i18n support.
     */
    itemIdentifier?: string;
    initialData?: {
        type?: string;
        classification?: string;
    };
    theme?: ThemeVariant;
}
declare const UpdateModal: React.FC<UpdateModalProps>;

interface DeleteModalProps extends BaseComponentProps {
    isOpen: boolean;
    onClose: () => void;
    onDelete: () => void;
    title?: string;
    itemIdentifier?: string;
    itemType?: string;
    confirmationText?: string;
    warningText?: string;
    theme?: ThemeVariant;
}
declare const DeleteModal: React.FC<DeleteModalProps>;

type DropdownWidth = 'sm' | 'md' | 'lg' | 'auto';
interface GeometryItem {
    id: string;
    name: string;
    properties: string;
    isVisible?: boolean;
    isActive?: boolean;
}
interface FilterPanelProps extends BaseComponentProps {
    isOpen: boolean;
    onClose: () => void;
    filters: {
        categories: string;
        classes: string;
    };
    onFilterChange: (filters: {
        categories: string;
        classes: string;
    }) => void;
    onResetFilters: () => void;
    onDeleteAll?: () => void;
    onShowAll?: () => void;
    theme?: Theme;
    categoryWidth?: DropdownWidth;
    classWidth?: DropdownWidth;
    aircraft?: Array<{
        id: string;
        callSign: string;
        type: string;
        classification: string;
        position?: {
            latitude: number;
            longitude: number;
            altitude: number;
        };
    }>;
    filteredAircraft?: Array<{
        id: string;
        callSign: string;
        type: string;
        classification: string;
        position?: {
            latitude: number;
            longitude: number;
            altitude: number;
        };
    }>;
    onStartCircleDrawing?: () => void;
    onStartRectangleDrawing?: () => void;
    onStartPolygonDrawing?: () => void;
    geometryItems?: GeometryItem[];
    onDeleteFilter?: (filterId: string) => void;
    onToggleFilterVisibility?: (filterId: string) => void;
    onToggleFilterActive?: (filterId: string) => void;
    filterLogic?: 'AND' | 'OR';
    onFilterLogicChange?: (logic: 'AND' | 'OR') => void;
    translations?: {
        title?: string;
        attributesFilters?: string;
        geometryFilters?: string;
        categories?: {
            all?: string;
            commercial?: string;
            unknown?: string;
            drone?: string;
            military?: string;
        };
        classes?: {
            all?: string;
            friendly?: string;
            hostile?: string;
            neutral?: string;
            unknown?: string;
        };
        resetAttributesFilter?: string;
        filterLogic?: string;
        addNew?: string;
        deleteAllGeometryFilters?: string;
        showAll?: string;
        table?: {
            name?: string;
            properties?: string;
            actions?: string;
        };
        emptyState?: {
            title?: string;
            description?: string;
        };
        buttons?: {
            addCircularFilter?: string;
            addRectangleFilter?: string;
            addFreeformFilter?: string;
            delete?: string;
            hide?: string;
            show?: string;
            deactivate?: string;
            activate?: string;
        };
    };
}
declare const FilterPanel: React.FC<FilterPanelProps>;

interface ToastProps {
    type: 'success' | 'error';
    title: string;
    message: string;
    onClose?: () => void;
}
declare const Toast: React.FC<ToastProps>;

type ToastType = 'success' | 'error';
interface ToastData {
    id: number;
    type: ToastType;
    title: string;
    message: string;
}
interface ToastContextValue {
    showToast: (toast: Omit<ToastData, 'id'>) => void;
}
declare const ToastProvider: React.FC<{
    children: ReactNode;
}>;
declare function useToast(): ToastContextValue;

export { Button, ComboBox, DeleteModal, FilterPanel, InfoModal, Input, Navbar, StatusBadge, Table, Toast, ToastProvider, UpdateModal, useToast };
export type { ButtonProps, ClassificationStatus, ColorVariant, ColumnType, ComboBoxOption, ComboBoxProps, CompoundSortState, DeleteModalProps, InfoField, InfoModalProps, InputProps, InputType, NavbarProps, Size$1 as Size, SortDirection, SortState, StatusBadgeProps, StatusBadgeSize, StatusType, TableProps, Theme$3 as Theme, UpdateModalProps, User };