@veltrixsecops/app-sdk 2.0.0 → 2.2.0

package/dist/ui/index.d.ts

@@ -0,0 +1,393 @@
+import * as React from 'react';
+
+type ButtonVariant = 'primary' | 'secondary' | 'danger' | 'success' | 'warning' | 'ghost' | 'link';
+type ButtonSize = 'sm' | 'md' | 'lg';
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    isLoading?: boolean;
+    loadingText?: string;
+    fullWidth?: boolean;
+    leftIcon?: React.ReactNode;
+    rightIcon?: React.ReactNode;
+}
+/**
+ * Button — delegates to the platform's real Button at render time.
+ *
+ * @example
+ * <Button variant="primary" leftIcon={<RefreshIcon />} onClick={refresh}>Refresh</Button>
+ */
+declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+type BadgeVariant = 'default' | 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info';
+type BadgeSize = 'sm' | 'md' | 'lg';
+interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
+    variant?: BadgeVariant;
+    size?: BadgeSize;
+    rounded?: boolean;
+    dot?: boolean;
+}
+/**
+ * Badge — delegates to the platform's real Badge at render time.
+ *
+ * @example
+ * <Badge variant={row.deployState === 'deployed' ? 'success' : 'warning'}>{row.deployState}</Badge>
+ */
+declare const Badge: React.FC<BadgeProps>;
+interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
+    variant?: 'default' | 'bordered' | 'elevated';
+    padding?: 'none' | 'sm' | 'md' | 'lg';
+}
+interface CardHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+    actions?: React.ReactNode;
+}
+type CardBodyProps = React.HTMLAttributes<HTMLDivElement>;
+interface CardFooterProps extends React.HTMLAttributes<HTMLDivElement> {
+    variant?: 'default' | 'bordered';
+}
+/** Card — delegates to the platform's real Card at render time. */
+declare const Card: React.FC<CardProps>;
+/** CardHeader — the header section of a Card, with optional trailing actions. */
+declare const CardHeader: React.FC<CardHeaderProps>;
+/** CardBody — the main content area of a Card. */
+declare const CardBody: React.FC<CardBodyProps>;
+/** CardFooter — the footer section of a Card, typically for actions. */
+declare const CardFooter: React.FC<CardFooterProps>;
+type InputSize = 'sm' | 'md' | 'lg';
+type InputVariant = 'default' | 'error' | 'success';
+interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {
+    label?: string;
+    error?: string;
+    helperText?: string;
+    leftIcon?: React.ReactNode;
+    rightIcon?: React.ReactNode;
+    variant?: InputVariant;
+    inputSize?: InputSize;
+    isSuccess?: boolean;
+    fullWidth?: boolean;
+}
+/**
+ * Input — delegates to the platform's real Input at render time.
+ *
+ * @example
+ * <Input label="Index name" value={name} onChange={(e) => setName(e.target.value)} error={errors.name} />
+ */
+declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
+interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+    label?: string;
+    error?: string;
+    helperText?: string;
+    fullWidth?: boolean;
+}
+/**
+ * Textarea — delegates to the platform's real Textarea at render time.
+ *
+ * @example
+ * <Textarea label="Description" helperText="Markdown is supported." />
+ */
+declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;
+interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type'> {
+    label?: React.ReactNode;
+    error?: string;
+    helperText?: string;
+}
+/**
+ * Checkbox — delegates to the platform's real Checkbox at render time.
+ *
+ * @example
+ * <Checkbox label="Enable drift detection" checked={enabled} onChange={(e) => setEnabled(e.target.checked)} />
+ */
+declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>>;
+type SelectSize = 'sm' | 'md' | 'lg';
+interface SelectOption {
+    value: string;
+    label: string;
+    disabled?: boolean;
+}
+interface SelectProps {
+    options: SelectOption[];
+    value?: string;
+    onChange?: (value: string) => void;
+    placeholder?: string;
+    label?: string;
+    error?: string;
+    helperText?: string;
+    size?: SelectSize;
+    disabled?: boolean;
+    fullWidth?: boolean;
+    className?: string;
+    id?: string;
+    name?: string;
+    'aria-label'?: string;
+}
+/**
+ * Select — delegates to the platform's real (WAI-ARIA listbox) Select at render time.
+ * The fallback is a native `<select>` — functionally equivalent, visually plainer.
+ *
+ * @example
+ * <Select label="Environment" value={env} onChange={setEnv} options={[{ value: 'prod', label: 'Production' }]} />
+ */
+declare const Select: React.FC<SelectProps>;
+interface FormFieldProps {
+    label?: string;
+    htmlFor?: string;
+    error?: string;
+    hint?: string;
+    required?: boolean;
+    className?: string;
+    children: React.ReactNode;
+}
+/**
+ * FormField — wraps a custom control (not already self-labeling like Input/Select) with
+ * the platform's label + error/hint visual language.
+ *
+ * @example
+ * <FormField label="Allowed IP ranges" htmlFor="cidrs" hint="One CIDR block per line">
+ *   <textarea id="cidrs" />
+ * </FormField>
+ */
+declare const FormField: React.FC<FormFieldProps>;
+interface TabItem {
+    key?: string;
+    label: string;
+    content: React.ReactNode;
+    disabled?: boolean;
+}
+interface TabsProps {
+    tabs: TabItem[];
+    defaultActiveIndex?: number;
+    activeIndex?: number;
+    onTabChange?: (index: number) => void;
+    children?: React.ReactNode;
+    className?: string;
+}
+/**
+ * Tabs — delegates to the platform's real (WAI-ARIA tabs pattern) Tabs at render time.
+ *
+ * @example
+ * <Tabs tabs={[{ key: 'indexes', label: 'Indexes', content: <IndexesPanel /> }]} />
+ */
+declare const Tabs: React.FC<TabsProps>;
+interface EmptyStateProps {
+    icon?: React.ReactNode;
+    title: string;
+    description?: string;
+    action?: React.ReactNode;
+    className?: string;
+}
+/** EmptyState — delegates to the platform's real EmptyState at render time. */
+declare const EmptyState: React.FC<EmptyStateProps>;
+type SkeletonVariant = 'text' | 'circular' | 'rectangular';
+interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement> {
+    variant?: SkeletonVariant;
+    width?: string | number;
+    height?: string | number;
+    animation?: 'pulse' | 'wave' | 'none';
+}
+/** Skeleton — delegates to the platform's real Skeleton at render time. */
+declare const Skeleton: React.FC<SkeletonProps>;
+interface SkeletonTextProps {
+    lines?: number;
+    width?: string | number;
+    lastLineWidth?: string | number;
+    className?: string;
+}
+/** SkeletonText — a multi-line text skeleton, delegating to the platform's real one. */
+declare const SkeletonText: React.FC<SkeletonTextProps>;
+interface SkeletonCardProps {
+    hasAvatar?: boolean;
+    hasActions?: boolean;
+    className?: string;
+}
+/** SkeletonCard — a card-shaped skeleton, delegating to the platform's real one. */
+declare const SkeletonCard: React.FC<SkeletonCardProps>;
+type TooltipPlacement = 'top' | 'bottom' | 'left' | 'right';
+interface TooltipProps {
+    content?: React.ReactNode;
+    placement?: TooltipPlacement;
+    delayDuration?: number;
+    disabled?: boolean;
+    className?: string;
+    children: React.ReactNode;
+}
+/**
+ * Tooltip — delegates to the platform's real Tooltip at render time. The fallback uses the
+ * browser's native `title` attribute (only works when `content` is plain text).
+ */
+declare const Tooltip: React.FC<TooltipProps>;
+type SpinnerSize = 'sm' | 'md' | 'lg';
+interface SpinnerProps {
+    size?: SpinnerSize;
+    className?: string;
+    label?: string;
+}
+/** Spinner — delegates to the platform's real Spinner at render time. */
+declare const Spinner: React.FC<SpinnerProps>;
+type DataTableAlign = 'left' | 'center' | 'right';
+type DataTableSortOrder = 'asc' | 'desc';
+interface DataTableSort {
+    field: string;
+    order: DataTableSortOrder;
+}
+interface DataTableColumn<T> {
+    key: string;
+    header: React.ReactNode;
+    render?: (row: T) => React.ReactNode;
+    sortable?: boolean;
+    align?: DataTableAlign;
+    width?: string;
+    className?: string;
+}
+interface DataTableEmptyState {
+    icon?: React.ReactNode;
+    title: string;
+    description?: string;
+    action?: React.ReactNode;
+}
+interface DataTablePaginationState {
+    page: number;
+    pageSize: number;
+    total: number;
+}
+interface DataTableProps<T> {
+    columns: DataTableColumn<T>[];
+    data: T[];
+    rowKey: (row: T) => string;
+    isLoading?: boolean;
+    emptyState?: DataTableEmptyState;
+    sort?: DataTableSort;
+    onSortChange?: (sort: DataTableSort) => void;
+    pagination?: DataTablePaginationState;
+    onPageChange?: (page: number) => void;
+    onRowClick?: (row: T) => void;
+    rowActions?: (row: T) => React.ReactNode;
+    className?: string;
+}
+/**
+ * DataTable — delegates to the platform's real, server-driven DataTable at render time.
+ *
+ * @example
+ * <DataTable
+ *   columns={[{ key: 'name', header: 'Name' }, { key: 'deployState', header: 'Status', render: (r) => <Badge>{r.deployState}</Badge> }]}
+ *   data={indexes}
+ *   rowKey={(row) => row.id}
+ * />
+ */
+declare function DataTable<T>(props: DataTableProps<T>): React.ReactElement;
+type StatsCardVariant = 'default' | 'primary' | 'success' | 'warning' | 'danger' | 'info';
+interface StatsCardDelta {
+    value: string;
+    direction: 'up' | 'down' | 'neutral';
+    label?: string;
+}
+interface StatsCardProps {
+    label: string;
+    value: React.ReactNode;
+    icon?: React.ReactNode;
+    delta?: StatsCardDelta;
+    variant?: StatsCardVariant;
+    isLoading?: boolean;
+    onClick?: () => void;
+    className?: string;
+}
+/**
+ * StatsCard — delegates to the platform's real StatsCard at render time.
+ *
+ * @example
+ * <StatsCard label="Indexes" value={indexes.length} delta={{ value: '+2', direction: 'up' }} />
+ */
+declare const StatsCard: React.FC<StatsCardProps>;
+type FormDialogSize = 'sm' | 'md' | 'lg';
+interface FormDialogProps {
+    isOpen: boolean;
+    onClose: () => void;
+    title: string;
+    description?: string;
+    children: React.ReactNode;
+    onSubmit: () => void | Promise<void>;
+    submitText?: string;
+    cancelText?: string;
+    isSubmitting?: boolean;
+    error?: string | null;
+    size?: FormDialogSize;
+    disableBackdropClose?: boolean;
+    submitDisabled?: boolean;
+}
+/**
+ * FormDialog — delegates to the platform's real FormDialog at render time. The fallback is
+ * a minimal, accessible modal shell (role="dialog", Escape-to-close, backdrop click) without
+ * the host's focus-trap polish.
+ *
+ * @example
+ * <FormDialog isOpen={isOpen} onClose={close} title="Add index" onSubmit={handleSubmit}>
+ *   <Input label="Name" value={name} onChange={(e) => setName(e.target.value)} />
+ * </FormDialog>
+ */
+declare const FormDialog: React.FC<FormDialogProps>;
+type ToastVariant = 'success' | 'error' | 'warning' | 'info';
+interface ToastOptions {
+    variant?: ToastVariant;
+    duration?: number;
+    action?: {
+        label: string;
+        onClick: () => void;
+    };
+}
+interface Toast {
+    id: string;
+    message: string;
+    variant: ToastVariant;
+    duration?: number;
+    action?: {
+        label: string;
+        onClick: () => void;
+    };
+}
+interface ToastContextValue {
+    toasts: Toast[];
+    toast: (message: string, options?: ToastOptions) => string;
+    success: (message: string, duration?: number) => string;
+    error: (message: string, duration?: number) => string;
+    warning: (message: string, duration?: number) => string;
+    info: (message: string, duration?: number) => string;
+    promise: <T>(promise: Promise<T>, messages: {
+        loading: string;
+        success: string | ((data: T) => string);
+        error: string | ((error: unknown) => string);
+    }) => Promise<T>;
+    dismiss: (id: string) => void;
+    dismissAll: () => void;
+}
+/**
+ * useToast — delegates to the platform's real toast system when running inside Veltrix.
+ * Outside it, `toast()`/`success()`/etc. log to the console instead of throwing.
+ *
+ * @example
+ * const toast = useToast()
+ * toast.success('Index saved')
+ */
+declare function useToast(): ToastContextValue;
+type ConfirmationVariant = 'danger' | 'warning' | 'info';
+interface ConfirmationOptions {
+    title: string;
+    message: string;
+    confirmText?: string;
+    cancelText?: string;
+    variant?: ConfirmationVariant;
+}
+interface ConfirmationDialogContextValue {
+    confirm: (options: ConfirmationOptions) => Promise<boolean>;
+}
+/**
+ * useConfirmDialog — delegates to the platform's real confirmation dialog when running
+ * inside Veltrix. Outside it, `confirm()` resolves to `false` (fails closed) rather than
+ * throwing, so a guarded destructive action simply never proceeds instead of crashing.
+ *
+ * @example
+ * const { confirm } = useConfirmDialog()
+ * if (await confirm({ title: 'Delete index', message: 'This cannot be undone.', variant: 'danger' })) {
+ *   await deleteIndex(id)
+ * }
+ */
+declare function useConfirmDialog(): ConfirmationDialogContextValue;
+
+export { Badge, type BadgeProps, type BadgeSize, type BadgeVariant, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Card, CardBody, type CardBodyProps, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, type CardProps, Checkbox, type CheckboxProps, type ConfirmationDialogContextValue, type ConfirmationOptions, type ConfirmationVariant, DataTable, type DataTableAlign, type DataTableColumn, type DataTableEmptyState, type DataTablePaginationState, type DataTableProps, type DataTableSort, type DataTableSortOrder, EmptyState, type EmptyStateProps, FormDialog, type FormDialogProps, type FormDialogSize, FormField, type FormFieldProps, Input, type InputProps, type InputSize, type InputVariant, Select, type SelectOption, type SelectProps, type SelectSize, Skeleton, SkeletonCard, type SkeletonCardProps, type SkeletonProps, SkeletonText, type SkeletonTextProps, type SkeletonVariant, Spinner, type SpinnerProps, type SpinnerSize, StatsCard, type StatsCardDelta, type StatsCardProps, type StatsCardVariant, type TabItem, Tabs, type TabsProps, Textarea, type TextareaProps, type Toast, type ToastContextValue, type ToastOptions, type ToastVariant, Tooltip, type TooltipPlacement, type TooltipProps, useConfirmDialog, useToast };