@lib-feedit/commons/dist/client/index.d.ts

Reusable components, scripts, styles, hooks & more

import * as react_jsx_runtime from 'react/jsx-runtime';
import * as react from 'react';
import { ButtonHTMLAttributes, InputHTMLAttributes, HTMLInputTypeAttribute, JSX, RefObject, MouseEventHandler, DependencyList, ReactNode } from 'react';

type ButtonProps = {
    color?: string;
    textColor?: string;
    hoverColor?: string;
    textHoverColor?: string;
    squared?: boolean;
    outline?: boolean;
    rounded?: boolean;
};
declare function Button({ color, textColor, hoverColor, textHoverColor, squared, outline, rounded, children, ...props }: ButtonHTMLAttributes<HTMLButtonElement> & ButtonProps): react_jsx_runtime.JSX.Element;

type CheckboxProps = {
    label: string;
} & Omit<InputHTMLAttributes<HTMLInputElement>, 'type'>;
declare function Checkbox(props: CheckboxProps): react_jsx_runtime.JSX.Element;

type DropdownProps = {
    name: string;
    title?: string;
    icon?: react.JSX.Element;
    values: {
        label: string;
        value: any;
    }[];
    defaultValue?: any;
    placement?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
    onChange?: (value: any) => void;
    hideSelectedValue?: boolean;
    legacyDropdown?: boolean;
};
declare function Dropdown({ name, title, icon, values, defaultValue, placement, onChange, hideSelectedValue, legacyDropdown, }: DropdownProps): react_jsx_runtime.JSX.Element;

type Column = {
    label: string;
    prop: string;
    /**
     * `auto`: auto-detect each value type : boolean, string or number.
     *
     * `auto-non-numeric`: same as `auto` but number will be treated as string.
     *
     * `select`: will show a dropdown selector instead of an input.
     *
     * `gauge`: cannot be editable ! will show a progressbar.
     *
     * all other available values are the ones from HTML input type property.
     */
    type: 'auto' | 'auto-non-numeric' | 'select' | 'gauge' | HTMLInputTypeAttribute;
    values?: string[] | {
        label: string;
        value: string;
    }[] | ((row: any) => {
        label: string;
        value: string;
    }[]);
    allowNull?: boolean;
    editable?: boolean;
    unique?: boolean | 'base' | 'case';
    validate?: (value: string) => boolean | string;
    min?: number;
    max?: number;
    color?: string;
    displayText?: boolean;
    actions?: Action[];
};
type ExtendedColumn = Column & {
    error?: {
        type: string;
        target?: string;
        columns: Column[];
    };
};
type Action = {
    label: string;
    icon: JSX.Element | (() => JSX.Element);
    color?: string;
    onClick: (row: any) => void;
};
type TableHandle = {
    getColumns: () => ExtendedColumn[];
    getData: () => {
        data: any[];
        validData: any[];
        errorOnNull: any[];
        errorOnUnique: any[];
        errorOnOthers: any[];
    };
};

type TableProps = {
    ref?: RefObject<TableHandle>;
    columns: Column[];
    data: any[];
    actions?: Action[];
    uniqueValueColumn: string;
    displayCount?: boolean;
    allowMismatch?: boolean;
    canDeleteRows?: boolean;
    sortingHeaders?: boolean;
    rowOptions?: {
        disableProp?: string;
        onClick?: (row: any) => void;
    };
    pagination?: boolean | number;
};
declare function Table({ ref, columns, data, actions, uniqueValueColumn, displayCount, allowMismatch, canDeleteRows, sortingHeaders, rowOptions, pagination, }: TableProps): react_jsx_runtime.JSX.Element;

type EnhancedTableProps = TableProps & {
    headerButtons?: {
        label: string;
        onClick?: MouseEventHandler<HTMLButtonElement>;
        color?: string;
        icon?: (() => JSX.Element) | JSX.Element;
    }[];
    searchbar?: boolean;
    footer?: boolean;
    refresh?: () => void;
};
declare function EnhancedTable({ headerButtons, refresh, ...tableProps }: EnhancedTableProps): react_jsx_runtime.JSX.Element;

type PaginationProps = {
    value: number;
    max: number;
    onChange?: (page: number) => void;
    /**
     * Show a light box shadow
     * @default false
     */
    elevation?: boolean;
};
declare function Pagination({ value, max, onChange, elevation }: PaginationProps): react_jsx_runtime.JSX.Element;

type ProgressBarProps = {
    id: string;
    label?: string;
    max?: number;
    min?: number;
    value: number;
    color?: string;
    displayText?: boolean;
};
declare function ProgressBar({ id, label, max, value, color, displayText, }: ProgressBarProps): react_jsx_runtime.JSX.Element;

type SearchbarProps = {
    onChange?: (value: string) => void;
};
declare function Searchbar({ onChange }: SearchbarProps): react_jsx_runtime.JSX.Element;

type SliderProps = {
    min: number;
    max: number;
    value: number | number[];
    step?: number;
    range?: boolean;
    vertical?: boolean;
    tooltip?: boolean | 'top' | 'right' | 'bottom' | 'left';
    onChange?: (values: number | number[]) => void;
};
declare function Slider({ min, max, value, step, range, vertical, tooltip, onChange, }: SliderProps): react_jsx_runtime.JSX.Element;

type TablePlaceholderProps = {
    columns: number;
    rows: number;
    blur?: boolean | number;
};
declare function TablePlaceholder({ columns, rows, blur, }: TablePlaceholderProps): react_jsx_runtime.JSX.Element;

declare function correctRow(columns: ExtendedColumn[], row: any): {
    [key: string]: any;
};
declare function correctRows(columns: ExtendedColumn[], data: any[]): any[];

type ToggleButtonProps = {
    checked?: boolean;
    id?: string;
    onChange?: (value: boolean) => void;
    readonly?: boolean;
};
declare function ToggleButton({ checked, id, onChange, readonly }: ToggleButtonProps): react_jsx_runtime.JSX.Element;

declare function useDebounce(callback: () => void, wait?: number): any;

declare function useHorizontalScroll(onScroll?: (ev: WheelEvent) => void): react.RefObject<HTMLElement | null>;

declare function useOutsideClick(ref: RefObject<HTMLElement | null>, action: () => void): void;

declare function usePromise<T extends () => Promise<void>>(action: T, deps: DependencyList): [() => Promise<void>, boolean, boolean, boolean];

type ProviderProps = {
    children: ReactNode;
};
declare function Provider({ children }: ProviderProps): ReactNode;

export { Button, Checkbox, Dropdown, EnhancedTable, Pagination, ProgressBar, Provider, Searchbar, Slider, Table, TablePlaceholder, ToggleButton, correctRow, correctRows, useDebounce, useHorizontalScroll, useOutsideClick, usePromise };
export type { Action, ButtonProps, CheckboxProps, Column, DropdownProps, EnhancedTableProps, ExtendedColumn, PaginationProps, ProgressBarProps, ProviderProps, SearchbarProps, SliderProps, TableHandle, ToggleButtonProps };