@codex-storage/marketplace-ui-components/dist/index.d.ts

Marketplace UI components for Codex decentralized storage network.

import { AnimationEventHandler } from 'react';
import { ChangeEvent } from 'react';
import { CodexData } from '@codex-storage/sdk-js';
import { ComponentType } from 'react';
import { Dispatch } from 'react';
import { ForwardRefExoticComponent } from 'react';
import { InputHTMLAttributes } from 'react';
import { JSX as JSX_2 } from 'react/jsx-runtime';
import { LegacyRef } from 'react';
import { ReactElement } from 'react';
import { ReactNode } from 'react';
import { RefAttributes } from 'react';

export declare function Alert({ variant, title, Icon, children, className, ...rest }: Props_10): JSX_2.Element;

export declare function Backdrop({ open, onClose, className }: Props_13): JSX_2.Element;

export declare function Button({ label, className, Icon, IconAfter, onMouseEnter, onMouseLeave, size, fetching, disabled, variant, onClick, }: Props): JSX_2.Element;

export declare function ButtonIcon({ Icon, onClick, onMouseEnter, onMouseLeave, className, animation, disabled, variant, }: Props_2): JSX_2.Element;

export declare const Cell: ({ children, className, ...rest }: CellProps) => JSX_2.Element;

export declare type CellProps = {
    children: ReactNode | string;
} & React.DetailedHTMLProps<React.TdHTMLAttributes<HTMLTableCellElement>, HTMLTableCellElement>;

export declare function Dropdown({ placeholder, options, label, id, onMouseEnter, onMouseLeave, onFocus, onBlur, onChange, onSelected, value, className, variant, }: Props_8): JSX_2.Element;

export declare type DropdownOption = {
    /**
     * Dropdown option icon displayed on the left
     */
    Icon?: ComponentType;
    /**
     * Main option text elemnt
     */
    title: string;
    /**
     * Subtitle displayed under the main title of the option
     */
    subtitle?: string;
};

export declare function EmptyPlaceholder({ title, message, onRetry }: Props_7): JSX_2.Element;

export declare function Failure({ code, message, onClick, button, title, }: Props_9): JSX_2.Element;

export declare const Input: ForwardRefExoticComponent<    {
id: string;
label?: string;
/**
* Helper text to add indication about your input.
*/
helper?: string;
/**
* Add an icon on the left.
*/
Icon?: ComponentType;
/**
* If the mode is "auto", the component will check the invalid state
* on change and add an invalid state if it is invalid.
*/
mode?: "auto" | "manual";
isInvalid?: boolean;
/**
* Apply a class to the input element
*/
inputClassName?: string;
inputContainerClassName?: string;
variant?: "big" | "medium";
} & InputHTMLAttributes<HTMLInputElement> & RefAttributes<HTMLInputElement>>;

export declare function InputGroup({ label, name, helper, type, group, className, inputClassName, onChange, onGroupChange, onMouseEnter, onMouseLeave, onFocus, onBlur, id, step, value, groupValue, inputRef, min, max, extra, isInvalid, defaultValue, }: Props_3): JSX_2.Element;

export declare function Modal({ open, onClose, disableActionButton, disableCloseButton, className, displayCloseButton, displayActionButton, labelActionButton, labelCloseButton, children, title, Icon, onAction, }: Props_18): JSX_2.Element;

export declare function Placeholder({ title, message, Icon, subtitle, className, onRetry, }: Props_15): JSX_2.Element;

declare type Props = {
    /**
     * Button style variant. Default is primary.
     */
    variant?: "outline" | "primary";
    onClick?: () => unknown | Promise<unknown>;
    onMouseEnter?: () => unknown | Promise<unknown>;
    onMouseLeave?: () => unknown | Promise<unknown>;
    label: string;
    /**
     * Boolean to indicate that some work is in progress.
     * It will display an indicator in the button.
     * Default is false.
     */
    fetching?: boolean;
    /**
     * Default is false.
     */
    disabled?: boolean;
    /**
     * Add an icon before the label.
     */
    Icon?: ComponentType;
    IconAfter?: ComponentType;
    /**
     * Apply custom classname.
     */
    className?: string;
    size?: "medium" | "small";
};

declare type Props_10 = {
    variant: "success" | "warning" | "toast";
    title: string;
    children: ReactNode;
    /**
     * Apply custom classname.
     */
    className?: string;
    Icon?: ReactNode;
};

declare type Props_11 = {
    width?: string;
    className?: string;
};

declare type Props_12 = {
    /**
     * The steps titles
     */
    titles: string[];
    /**
     * The current component to show.
     */
    children: ReactNode;
    /**
     * The duration between steps
     */
    duration?: number;
    /**
     * Dispatch function created by the useStepperReducer
     */
    dispatch: Dispatch<StepperAction>;
    /**
     * State provided by useStepperReducer
     */
    state: StepperState;
    /**
     * Event called when a new step is triggered, after the loading function.
     */
    onNextStep: (step: number) => void | Promise<void>;
    className?: string;
    /**
     * Default: Back
     */
    backLabel?: string;
    /**
     * Default: Next
     */
    nextLabel?: string;
};

declare type Props_13 = {
    open: boolean;
    onClose: () => void;
    className?: string;
};

declare type Props_14 = {
    children: ReactNode;
    message: string;
    className?: string;
};

declare type Props_15 = {
    title: string;
    subtitle?: string;
    message: string;
    /**
     * If a retry function is passed to the component,
     * a button will be displayed and the function will be called when the button
     * is clicked.
     */
    onRetry?: () => void | Promise<void>;
    /**
     * Icon to be displayed on top of the text
     */
    Icon: ReactNode;
    className?: string;
};

declare type Props_16 = {
    open: boolean;
    onClose: () => void;
    children: ReactElement;
};

declare type Props_17 = {
    tabs: TabProps[];
    onTabChange: (index: number) => void | Promise<void>;
    /**
     * Current tab selected index
     */
    tabIndex: number;
};

declare type Props_18 = {
    open: boolean;
    /**
     * Event triggered whenever the close button is clicked.
     */
    onClose: () => void;
    /**
     * If true the close button will be displayed
     * Default: true
     */
    displayCloseButton?: boolean;
    /**
     * If true, the action button will be disabled.
     * Default: false
     */
    displayActionButton?: boolean;
    /**
     * Event triggered whenever the action button is clicked.
     * The action button should be considered the "primary" action.
     */
    onAction?: () => void;
    /**
     * Change the label of the close button.
     * Default: Close
     */
    labelCloseButton?: string;
    /**
     * If true, the disable button will be disabled.
     */
    disableCloseButton?: boolean;
    /**
     * Change the label of the close button.
     * Default: Action
     */
    labelActionButton?: string;
    /**
     * If true, the action button will be disabled.
     */
    disableActionButton?: boolean;
    children: ReactNode;
    className?: string;
    title?: string;
    Icon?: ComponentType<{
        width: number | string | undefined;
    }>;
};

declare type Props_19 = {
    type: string;
    size?: number;
};

declare type Props_2 = {
    Icon: ComponentType<{
        className?: string;
        onAnimationEnd?: AnimationEventHandler | undefined;
    }>;
    variant?: "big" | "small";
    onClick?: () => void;
    onMouseEnter?: () => unknown | Promise<unknown>;
    onMouseLeave?: () => unknown | Promise<unknown>;
    disabled?: boolean;
    /**
     * Apply custom classname.
     */
    className?: string;
    /**
     * Apply an animation on click
     */
    animation?: "buzz" | "bounce";
};

declare type Props_20 = {
    /**
     * Allow multiple files.
     * Default is true.
     */
    multiple?: boolean;
    /**
     * Event triggered when a file is uploaded.
     * The cid is the unique identifier of the file in Codex network.
     */
    onSuccess?: (cid: string, file: File) => void;
    onFileChange?: (e: ChangeEvent<HTMLInputElement>) => void;
    /**
     * Event triggered when a file is deleted.
     * The id is generated after the file are selected by the user.
     */
    onDeleteItem?: (id: string) => void;
    onClick?: (() => void) | undefined;
    onMouseEnter?: () => void;
    onMouseLeave?: () => void;
    /**
     * Allow to override the previous file(s).
     * If false, the user cannot upload a new file(s) until he deletes the previous file(s).
     */
    editable?: boolean;
    /**
     * Codex provider to upload the data.
     * If not provider is passed, the cid returned will be empty.
     * Default value: provider returning random cid.
     */
    codexData: CodexData;
    /**
     * If true, the upload will run in a separate web worker.
     * Default is !!window.Worker.
     */
    /**
     * Success message displayed when a file is updated.
     * Default: File uploaded successfully.
     */
    successMessage?: string;
    Icon?: ComponentType;
};

declare type Props_21 = {
    /**
     * List of header names
     * Can be a string array ["id", "actions"]
     * Or a tuple containing the sort function with the column
     * index in argument
     */
    headers: string[] | [string, ((state: TabSortState) => void)?][];
    /**
     * Default: -1
     */
    defaultSortIndex?: number;
    className?: string;
    rows: ReactElement<RowProps, typeof Row>[];
};

declare type Props_3 = {
    label: string;
    /**
     * Apply a class to the input element
     */
    inputClassName?: string;
    /**
     * Apply a class to the parent element
     */
    className?: string;
    /**
     * The group can be an tuple array (select) or a single value
     */
    group: [string, string][] | string;
    /**
     * Input type
     */
    type?: string;
    /**
     * Input value
     */
    value?: string;
    /**
     * Group value if the group is a select
     */
    groupValue?: string;
    /**
     * OnChange event triggered when the input change
     */
    onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
    /**
     * OnChange event triggered when the group change if the group is a select
     */
    onGroupChange?: (e: ChangeEvent<HTMLSelectElement>) => void;
    onBlur?: () => void;
    onFocus?: () => void;
    onMouseEnter?: () => void;
    onMouseLeave?: () => void;
    id: string;
    step?: string;
    name?: string;
    /**
     * Helper text to add indication about your input.
     */
    helper?: string;
    min?: number | string;
    max?: number | string;
    inputRef?: LegacyRef<HTMLInputElement>;
    extra?: ReactNode;
    isInvalid?: boolean;
    defaultValue?: string;
};

declare type Props_4 = {
    label: string;
    id: string;
    /**
     * Tuple array for options.
     * The first item is the value and the second is the text.
     */
    options: [string, string][];
    /**
     * OnChange event called whenever the select value changed.
     */
    onChange?: (e: ChangeEvent<HTMLSelectElement>) => void | Promise<void>;
    onFocus?: () => void | Promise<void>;
    onBlur?: () => unknown | Promise<unknown>;
    onMouseEnter?: () => void;
    onMouseLeave?: () => void;
    defaultValue?: string;
    value: string;
    className?: string;
};

declare type Props_5 = {
    message: string;
    /**
     * Time is the beginning time of the toast.
     * The toast will be closed after time + duration.
     * Every time a toast should be displayed a new time
     * shoukd be set.
     */
    time: number;
    /**
     * Toast duration in msec
     * Default: 3000
     */
    duration?: number;
    className?: string;
    variant: "success" | "error";
};

declare type Props_6 = {
    data: SpaceAllocationItem[];
};

declare type Props_7 = {
    title: string;
    message: string;
    /**
     * If a retry function is passed to the component,
     * a button will be displayed and the function will be called when the button
     * is clicked.
     */
    onRetry?: () => void | Promise<void>;
};

declare type Props_8 = {
    /**
     * Placeholder used when no option is selected
     */
    placeholder: string;
    /**
     * List of values to be displayed in the dropdown
     */
    options: DropdownOption[];
    /**
     * Default value passed to the dropdown
     */
    value?: string;
    className?: string;
    /**
     * OnChange event triggered every time the text is updated
     */
    onChange: (e: ChangeEvent<HTMLInputElement>) => void;
    /**
     * OnSelected triggered every time an option is clicked on
     */
    onSelected?: (o: DropdownOption) => void;
    onBlur?: () => void;
    onFocus?: () => void;
    onMouseEnter?: () => void;
    onMouseLeave?: () => void;
    label: string;
    id: string;
    variant?: "big" | "medium";
};

declare type Props_9 = {
    /**
     * Error code related to the error, example: 400, 500
     */
    code: number;
    message: string;
    title: string;
    /**
     * If an action function is passed to the component,
     * a button will be displayed and the function will be called when the button
     * is clicked.
     */
    onClick?: () => void | Promise<void>;
    /**
     * The button label
     */
    button?: string;
};

export declare function Row({ cells, className, ...rest }: RowProps): JSX_2.Element;

export declare type RowProps = {
    cells: ReactElement<CellProps, typeof Cell>[];
    className?: string;
};

export declare function Select({ label, id, options, onChange, onBlur, onFocus, onMouseEnter, onMouseLeave, className, defaultValue, value, }: Props_4): JSX_2.Element;

export declare function Sheets({ open, onClose, children }: Props_16): JSX_2.Element;

export declare function SpaceAllocation({ data }: Props_6): JSX_2.Element;

export declare type SpaceAllocationItem = {
    title: string;
    size: number;
    className?: string;
    color: string;
};

export declare function Spinner({ width, className }: Props_11): JSX_2.Element;

export declare function Stepper({ titles, children, state, dispatch, className, backLabel, nextLabel, duration, onNextStep, }: Props_12): JSX_2.Element;

export declare type StepperAction = {
    type: "close" | "open";
} | {
    type: "loading";
    step: number;
} | {
    type: "next";
    step: number;
} | {
    type: "toggle-buttons";
    isNextEnable: boolean;
    isBackEnable: boolean;
};

export declare type StepperBodyProps = {
    dispatch: Dispatch<StepperAction>;
};

export declare type StepperState = {
    /**
     * Enable the next button.
     */
    isNextEnable?: boolean;
    /**
     * Enable the back button.
     */
    isBackEnable?: boolean;
    step: number;
    progress: boolean;
    open: boolean;
};

export declare function Table({ headers, rows, defaultSortIndex, className, }: Props_21): JSX_2.Element;

export declare type TabProps = {
    label: string;
    className?: string;
    Icon?: ComponentType;
    IconAfter?: ComponentType<{
        onClick?: () => void;
    }>;
};

export declare function Tabs({ tabs, onTabChange, tabIndex }: Props_17): JSX_2.Element;

export declare type TabSortState = "asc" | "desc" | null;

export declare function Toast({ message, time, variant, className, duration, }: Props_5): JSX_2.Element;

export declare function Tooltip({ children, message, className }: Props_14): JSX_2.Element;

export declare function Upload({ onMouseEnter, onMouseLeave, onClick, onFileChange, Icon, multiple, editable, onDeleteItem, onSuccess, codexData, successMessage, }: Props_20): JSX_2.Element;

export declare function useStepperReducer(): {
    state: StepperState;
    dispatch: Dispatch<StepperAction>;
};

export declare function WebFileIcon({ type, size }: Props_19): JSX_2.Element;

export { }