@ntdsk/react-ui/dist/index.d.ts

Reusable components used on nautidesk web projects

import * as react_jsx_runtime from 'react/jsx-runtime';
import React$1 from 'react';
import { FieldErrors, Control } from 'react-hook-form';
import moment from 'moment';

interface IAppAlert {
    title?: 'Sucesso' | 'Erro' | 'Atenção' | 'Aviso';
    message?: string;
    onClose?: () => void;
    onConfirm: () => void;
    className?: string;
    confirmLabel?: string;
    cancelLabel?: string;
}
declare const AppAlert: ({ title, message, onClose, onConfirm, className, confirmLabel, cancelLabel }: IAppAlert) => react_jsx_runtime.JSX.Element | null;

type Props$7 = {
    label: string;
    icon?: string;
    className?: string;
    onClick?: () => void;
    disabled?: boolean;
    type?: "button" | "submit" | "reset";
    iconPosition?: "left" | "right";
    iconClassName?: string;
    iconStyle?: React.CSSProperties;
    iconWidth?: string;
    subtext?: string;
    subtextClassName?: string;
    loading?: boolean;
    style?: React.CSSProperties;
    align?: "left" | "right" | "center";
    tooltip?: string;
    tooltipPosition?: "top" | "right" | "left" | "bottom";
};
declare const AppButton: ({ label, icon, iconPosition, iconClassName, iconWidth, iconStyle, className, onClick, disabled, type, subtext, subtextClassName, loading, style, align, tooltip, tooltipPosition, }: Props$7) => react_jsx_runtime.JSX.Element;

interface IAppDeleteWarningProps {
    title?: string;
    message?: string;
    model?: any;
    onConfirmDelete?: (_id: string) => void;
    onCancel: () => void;
}
declare const AppDeleteWarning: ({ model, title, message, onConfirmDelete, onCancel }: IAppDeleteWarningProps) => react_jsx_runtime.JSX.Element;

interface IDropdownButtonMenuItem {
    label: string;
    icon?: string;
    onClick?: (model?: any) => void;
    disabled?: boolean;
    className?: string;
    iconClassName?: string;
}
type Props$6 = {
    label: string;
    icon?: string;
    className?: string;
    containerClassName?: string;
    disabled?: boolean;
    type?: "button" | "submit" | "reset";
    iconPosition?: "left" | "right";
    iconClassName?: string;
    iconWidth?: string;
    iconStyle?: React.CSSProperties;
    subtext?: string;
    subtextClassName?: string;
    loading?: boolean;
    menu: IDropdownButtonMenuItem[];
    model?: any;
};
declare const AppDropdownButton: ({ label, icon, iconPosition, iconClassName, iconWidth, iconStyle, className, containerClassName, disabled, type, subtext, subtextClassName, loading, menu, model, }: Props$6) => react_jsx_runtime.JSX.Element;

declare const AppEmptyImage: ({ className, width, height, iconWidth }: {
    className?: string;
    width?: number;
    height?: number;
    iconWidth?: number;
}) => react_jsx_runtime.JSX.Element;

type TAppHelperModalProps = {
    parentOpen: boolean;
};
declare const AppHelperModal: ({ parentOpen }: TAppHelperModalProps) => react_jsx_runtime.JSX.Element;

interface IProps$4 {
    icon: string;
    label?: string;
    width?: number | string;
    className?: string;
    style?: React.CSSProperties;
    onClick?: () => void;
    tooltip?: string;
    tooltipPosition?: "top" | "right" | "left" | "bottom";
}
declare const AppIcon: ({ icon, label, width, className, style, onClick, tooltip, tooltipPosition }: IProps$4) => react_jsx_runtime.JSX.Element;

declare const AppLoadingIcon: ({ size, className }: {
    size?: number;
    className?: string;
}) => react_jsx_runtime.JSX.Element;

interface IMenuProps {
    menuList: {
        label: string;
        icon?: string;
        url: string;
    }[];
}
declare const AppMenuDrop: ({ menuList }: IMenuProps) => react_jsx_runtime.JSX.Element;

interface IAppModalProps {
    children: React.ReactNode;
    header: string;
    subtitle?: string;
    open: any;
    onHide: () => void;
    className?: string;
    closable?: boolean;
    draggable?: boolean;
    headerBtn?: React.ReactNode;
}
declare const AppModal: ({ children, header, headerBtn, subtitle, open, onHide, className, closable, draggable }: IAppModalProps) => react_jsx_runtime.JSX.Element;

declare const AppPageLoader: ({ size, className }: {
    size?: number;
    className?: string;
}) => react_jsx_runtime.JSX.Element;

type AppPaginationProps = {
    currentPage: number;
    totalPages: number;
    onPageChange: (page: number) => void;
    buttonStyle?: React$1.CSSProperties;
    activeStyle?: React$1.CSSProperties;
    buttonClassName?: string;
    activeClassName?: string;
    maxVisiblePages?: number;
};
declare const AppPagination: React$1.FC<AppPaginationProps>;

interface AppRippleProps {
    onClick?: (event: React$1.MouseEvent<HTMLSpanElement>) => void;
}
declare const AppRipple: React$1.FC<AppRippleProps>;

interface AppSidebarProps {
    isOpen: boolean;
    onClose: () => void;
    children: React$1.ReactNode;
    showOverlay?: boolean;
    position?: 'left' | 'right';
    className?: string;
    overlayClassName?: string;
    closeOnOverlayClick?: boolean;
    closeOnEscape?: boolean;
    title?: string;
    showCloseButton?: boolean;
    footer?: React$1.ReactNode;
}
declare const AppSidebar: React$1.FC<AppSidebarProps>;

interface IAppStepperStepProps {
    index: number;
    label: string;
    component: React$1.ReactNode;
    error?: boolean;
    disabled?: boolean;
    containerStyle?: React$1.CSSProperties;
    activeContainerStyle?: React$1.CSSProperties;
    circleStyle?: React$1.CSSProperties;
    circleActiveStyle?: React$1.CSSProperties;
}
interface IAppStepperProps {
    activeIndex: number;
    setActiveIndex: (index: number) => void;
    stepsWithError?: number[];
    steps: IAppStepperStepProps[];
}
declare const AppStepper: ({ activeIndex, setActiveIndex, stepsWithError, steps }: IAppStepperProps) => react_jsx_runtime.JSX.Element;

interface IAppTableColumn<T = any> {
    header: string;
    accessor: string;
    headerClassName?: string;
    cellClassName?: string;
    cell?: (value: T) => React.ReactNode;
    type?: "text" | "number" | "date" | "time" | "datetime" | "currency" | "boolean" | "image" | "link" | "percentage";
    url?: string;
    align?: "left" | "center" | "right";
    maxWidth?: number;
}
interface IAppTableProps {
    title?: string;
    columns: IAppTableColumn[];
    data: any[];
    loading?: boolean;
    error?: string;
    MaxVw?: number;
    tableStyle?: "striped" | "none";
    tableClassName?: string;
    tableHeaderClassName?: string;
    tableContentClassName?: string;
    stripeClassName?: string;
    headerColor?: {
        text?: string;
        background?: string;
    };
    pagination?: {
        onChange: (page: number) => void;
        page?: number;
        size?: number;
        total?: number;
        pages?: number;
    };
}
declare const AppTable: ({ title, columns, data, MaxVw, loading, error, tableStyle, tableClassName, tableHeaderClassName, tableContentClassName, stripeClassName, pagination, }: IAppTableProps) => react_jsx_runtime.JSX.Element;

type IAppTab = {
    id: number | string;
    label: string;
    icon?: string;
    iconWidth?: string;
    iconHeight?: string;
    onClick?: () => void;
    disabled?: boolean;
};
type IAppTabsProps = {
    tabs: IAppTab[];
    tabIndex?: number;
    setTabIndex?: (i: number) => void;
    onTabChange?: (index: number) => void;
    className?: string;
    activeStyle?: React.CSSProperties;
    inactiveStyle?: React.CSSProperties;
    activeClassName?: string;
    inactiveClassName?: string;
};
declare const AppTabs: ({ tabs, tabIndex, setTabIndex, onTabChange, className, activeStyle, inactiveStyle, activeClassName, inactiveClassName, }: IAppTabsProps) => react_jsx_runtime.JSX.Element;

type IAppTabV2 = {
    id: number | string;
    label: string;
    onClick?: () => void;
    disabled?: boolean;
};
type IAppTabsV2Props = {
    tabs: IAppTabV2[];
    tabIndex?: number;
    setTabIndex?: (i: number) => void;
    onTabChange?: (index: number) => void;
    className?: string;
    activeClassName?: string;
    inactiveClassName?: string;
};
declare const AppTabsV2: ({ tabs, tabIndex, setTabIndex, onTabChange, className, activeClassName, inactiveClassName, }: IAppTabsV2Props) => react_jsx_runtime.JSX.Element;

interface IProps$3 {
    label: string;
    bgColor?: string;
    textColor?: string;
    onClick?: () => void;
}
declare const AppTag: ({ label, bgColor, textColor, onClick }: IProps$3) => react_jsx_runtime.JSX.Element;

type AppIfProps = {
    condition: boolean;
    children: React.ReactNode;
    elseRender?: React.ReactNode;
};
declare const AppIf: ({ condition, children, elseRender }: AppIfProps) => react_jsx_runtime.JSX.Element;

interface DialogProps {
    visible: boolean;
    onHide: () => void;
    header?: React$1.ReactNode | string;
    children: React$1.ReactNode;
    className?: string;
    maskClassName?: string;
    contentClassName?: string;
    headerClassName?: string;
    closable?: boolean;
    draggable?: boolean;
    style?: React$1.CSSProperties;
}
declare const Dialog: React$1.FC<DialogProps>;

type TControlledCheckboxProps = {
    name: string;
    error?: string | FieldErrors;
    label: string;
    required?: boolean;
    control: any;
    className?: string;
    disabled?: boolean;
};
declare const ControlledCheckbox: ({ name, error, label, required, control, className, disabled }: TControlledCheckboxProps) => react_jsx_runtime.JSX.Element;

interface Props$5 {
    name: string;
    chooseLabel?: string;
    removeLabel?: string;
    changeLabel?: string;
    control: Control<any, any>;
    maxSize?: number;
    errorProp?: string | FieldErrors;
    disabled?: boolean;
    proportions?: string;
    defaultValue?: File | string;
    containerClassName?: string;
    inputClassName?: string;
    previewContainerClassName?: string;
    iconClassName?: string;
    proportionsClassName?: string;
}
declare const ControlledImage: ({ name, chooseLabel, removeLabel, changeLabel, control, maxSize, disabled, errorProp, proportions, defaultValue, containerClassName, inputClassName, previewContainerClassName, iconClassName, proportionsClassName, }: Props$5) => react_jsx_runtime.JSX.Element;

interface IProps$2 {
    name: string;
    control: any;
    options: {
        label: string;
        value: string;
    }[];
    className?: string;
    containerClassName?: string;
    label: string;
    showClear?: boolean;
    showSearch?: boolean;
    error?: string | FieldErrors;
    disabled?: boolean;
    loading?: boolean;
    isRequired?: boolean;
}
declare const ControlledMultiSelect: ({ name, control, options, className, containerClassName, label, showClear, showSearch, error, disabled, loading, isRequired, }: IProps$2) => react_jsx_runtime.JSX.Element;

interface IProps$1 {
    name: string;
    control: any;
    options: {
        label: string;
        value: string;
    }[];
    className?: string;
    containerClassName?: string;
    label: string;
    showClear?: boolean;
    showSearch?: boolean;
    error?: string | FieldErrors;
    disabled?: boolean;
    loading?: boolean;
    onCustomChange?: (val?: string | string[]) => void;
    isRequired?: boolean;
}
declare const ControlledSelect: ({ name, control, options, className, containerClassName, label, showClear, showSearch, error, disabled, loading, onCustomChange, isRequired, }: IProps$1) => react_jsx_runtime.JSX.Element;

type Props$4 = {
    label?: string;
    name: string;
    control: any;
    error?: string | FieldErrors;
    className?: string;
    containerClassName?: string;
    onlyNumber?: boolean;
    maxLength?: number;
    type?: "normal" | "number" | "hour" | "password" | "currency" | "time" | "date" | "phone";
    required?: boolean;
    placeholder?: string;
    disabled?: boolean;
    onCustomChange?: (value: string) => void;
    handleOpenHelper?: () => void;
    helperText?: string;
    prefix?: string;
};
declare const ControlledText: ({ label, name, control, error, className, containerClassName, onlyNumber, maxLength, type, required, placeholder, disabled, onCustomChange, handleOpenHelper, helperText, prefix, }: Props$4) => react_jsx_runtime.JSX.Element;

type Props$3 = {
    label?: string;
    name: string;
    control: any;
    error?: string | FieldErrors;
    containerClassName?: string;
    className?: string;
    onlyNumber?: boolean;
    required?: boolean;
    maxLength?: number;
    disabled?: boolean;
    placeholder?: string;
};
declare const ControlledTextArea: ({ label, name, control, error, containerClassName, className, onlyNumber, required, maxLength, disabled, placeholder }: Props$3) => react_jsx_runtime.JSX.Element;

interface CustomMultiSelectProps {
    value: string[];
    onChange: (val: string[]) => void;
    options: {
        label: string;
        value: string;
    }[];
    showClear?: boolean;
    showSearch?: boolean;
    className?: string;
    error?: string;
    disabled?: boolean;
    maxLabelLength?: number;
}
declare const CustomMultiSelect: React$1.FC<CustomMultiSelectProps>;

interface CustomSelectProps {
    value: string | string[] | undefined;
    onChange: (val: string | string[] | undefined) => void;
    options: {
        label: string;
        value: string;
    }[];
    showClear?: boolean;
    showSearch?: boolean;
    className?: string;
    error?: string;
    disabled?: boolean;
    maxLabelLength?: number;
}
declare const CustomSelect: React$1.FC<CustomSelectProps>;

interface Props$2 {
    value: string;
    setValue: React.Dispatch<React.SetStateAction<string>>;
    className?: string;
}
declare const InputImage: ({ value }: Props$2) => react_jsx_runtime.JSX.Element;

declare const FNumber: ({ label, name, value, setValue, error, required }: any) => react_jsx_runtime.JSX.Element;

interface IProps {
    name: string;
    value: any;
    onChange: (value: string) => void;
    options: {
        label: string;
        value: string;
    }[];
    className?: string;
    containerClassName?: string;
    label: string;
    showClear?: boolean;
    showSearch?: boolean;
    error?: string;
    disabled?: boolean;
    loading?: boolean;
    isRequired?: boolean;
}
declare const InputSelect: ({ name, value, onChange, options, className, containerClassName, label, showClear, showSearch, error, disabled, loading, isRequired, }: IProps) => react_jsx_runtime.JSX.Element;

type Props$1 = {
    label?: string;
    name?: string;
    value?: string;
    error?: string;
    className?: string;
    containerClassName?: string;
    onlyNumber?: boolean;
    maxLength?: number;
    type?: 'normal' | 'number' | 'hour' | 'password' | 'currency' | 'time' | 'date';
    required?: boolean;
    placeholder?: string;
    disabled?: boolean;
    onChange?: (value: string) => void;
    handleOpenHelper?: () => void;
    helperText?: string;
};
declare const InputText: ({ label, name, value, error, className, containerClassName, onlyNumber, maxLength, type, required, placeholder, disabled, onChange, handleOpenHelper, helperText, }: Props$1) => react_jsx_runtime.JSX.Element;

type Props = {
    label?: string;
    name?: string;
    value?: string;
    error?: string;
    className?: string;
    containerClassName?: string;
    onlyNumber?: boolean;
    required?: boolean;
    maxLength?: number;
    disabled?: boolean;
    placeholder?: string;
    rows?: number;
    cols?: number;
    autoResize?: boolean;
    onChange?: (value: string) => void;
};
declare const InputTextArea: ({ label, name, value, error, className, containerClassName, onlyNumber, required, maxLength, disabled, placeholder, rows, cols, autoResize, onChange }: Props) => react_jsx_runtime.JSX.Element;

declare const useMoment: () => {
    momentFn: typeof moment;
    formatDateTimeSend: (date: string | Date) => string;
    formatDate: (date: string | Date) => string;
    formatDateIfen: (date: string | Date) => string;
    formatTime: (date: string | Date) => string;
    getWeekday: (date: string | Date) => string;
    isSameDay: (date1: Date, date2: Date) => boolean;
};

declare const normalizeText: (texto?: string) => string;

declare const COLORS: {
    readonly primary: "#1976d2";
    readonly secondary: "#dc004e";
    readonly success: "#4caf50";
    readonly warning: "#ff9800";
    readonly error: "#f44336";
    readonly info: "#2196f3";
    readonly dark: "#212121";
    readonly light: "#f5f5f5";
    readonly white: "#ffffff";
    readonly black: "#000000";
    readonly gray: {
        readonly 50: "#fafafa";
        readonly 100: "#f5f5f5";
        readonly 200: "#eeeeee";
        readonly 300: "#e0e0e0";
        readonly 400: "#bdbdbd";
        readonly 500: "#9e9e9e";
        readonly 600: "#757575";
        readonly 700: "#616161";
        readonly 800: "#424242";
        readonly 900: "#212121";
    };
};
type ColorName = keyof typeof COLORS;

export { AppAlert, AppButton, AppDeleteWarning, AppDropdownButton, AppEmptyImage, AppHelperModal, AppIcon, AppIf, AppLoadingIcon, AppMenuDrop, AppModal, AppPageLoader, AppPagination, AppRipple, AppSidebar, AppStepper, AppTable, AppTabs, AppTabsV2, AppTag, COLORS, ControlledCheckbox, ControlledImage, ControlledMultiSelect, ControlledSelect, ControlledText, ControlledTextArea, CustomMultiSelect, CustomSelect, Dialog, InputImage as FImage, FNumber, InputSelect as FSelect, InputText, InputTextArea, normalizeText, useMoment };
export type { AppSidebarProps, ColorName, IAppStepperStepProps, IAppTab, IAppTabV2, IAppTableColumn, IAppTableProps, IDropdownButtonMenuItem };