@react-formless/core/lib/index.d.ts

Data-driven react forms library written in typescript

import * as React from "react";
import { F1, F0, State, FArgs, TMap, Result, Validators, ArrayItem } from "@react-formless/utils";
import { ValueState, StateValue } from "@react-formless/utils";
import { StyledFormViewProps } from "./components/StyledFormView";
import { InputViewProps } from "./components/FormView";
export { validators, guards } from "@react-formless/utils";
export { toFormState, toInputState, getInputProps, getExtInputProps, toResult } from "./forms";
export { StyledFormView } from "./components/StyledFormView";
export { FormView, getElementsRenderMap, FormItemView } from "./components/FormView";
export { plainHtmlRenderMap, plainHtmlElementRenderMap } from "./components/PlainHtmlRenderMap";
export declare type Tuples<T = string> = Array<[string, T]>;
export declare type RProps<T> = T extends React.FC<infer P> ? React.PropsWithChildren<P> : never;
export declare type RDiv = React.FC<React.HTMLAttributes<HTMLDivElement>>;
export declare type RButton = React.FC<React.ButtonHTMLAttributes<HTMLButtonElement>>;
export declare type ElementsRenderMap = {
    Button: RButton;
    ItemWrapper: RDiv;
    ItemChildrenWrapper: RDiv;
    DefaultFormItem: RenderFn<any>;
    Title: React.FC<{
        text?: string;
    }>;
    Label: React.FC<{
        text?: string;
    } | {
        htmlFor: string;
    }>;
    Error: React.FC<InputState<any>>;
};
export declare type RenderOptions = {
    elementsRenderMap?: Partial<ElementsRenderMap>;
    inputsRenderMap?: Partial<InputRenderMap>;
};
export declare type StandardInputProps<T> = Pick<React.InputHTMLAttributes<T>, "name" | "placeholder" | "id" | "onChange" | "value" | "disabled" | "readOnly">;
export declare type ExtInputProps<T> = StandardInputProps<T> & {
    onFocus: F0;
    onBlur: F0;
};
export declare type InputSchemaBase<TName extends InputType = InputType, T = any, TExtra = {}> = State<TName, {
    validators?: Validators<T, string>;
    toValue?: F1<string, T | null>;
    fromValue?: F1<T | null, string>;
    sectionTitle?: string;
} & StandardInputProps<T> & TExtra>;
export declare type Mutate<T> = {
    createValue: ArrayItem<T> | F0<ArrayItem<T>>;
    addFirstLabel?: string;
    addNextLabel: string;
    removeLabel?: string;
};
export declare type Mutable<T> = {
    mutate?: Mutate<T>;
};
export declare type InputBoxSchema<T> = InputSchemaBase<Exclude<InputBoxType, "customBox">, T>;
export declare type InputOptionSchema<T> = InputSchemaBase<Exclude<InputOptionType, "customOption">, T, {
    values: Tuples<T>;
}>;
export declare type SimpleInputSchema<T> = InputBoxSchema<T> | InputOptionSchema<T>;
export declare type CustomInputBoxSchema<T> = InputSchemaBase<"customBox", T, {
    subtype?: string;
}>;
export declare type CustomInputOptionSchema<T> = InputSchemaBase<"customOption", T, {
    values: Tuples<T>;
    subtype?: string;
}>;
export declare type CollectionInputSchema<T> = Omit<InputSchemaBase<"collection", T, {
    fields: FormSchema<ArrayItem<T>>;
} & Mutable<T>>, "validators">;
export declare type ListInputSchema<T> = InputSchemaBase<"list", T, {
    field: SimpleInputSchema<T>;
} & Mutable<T>>;
export declare type MultiselectInputSchema<T> = InputSchemaBase<"multiselect", T, {
    values: Tuples<ArrayItem<T>>;
    creatable?: true;
}>;
export declare type InputSchema<T> = SimpleInputSchema<T> | CollectionInputSchema<T> | ListInputSchema<T> | MultiselectInputSchema<T> | CustomInputBoxSchema<T> | CustomInputOptionSchema<T>;
export declare type FormSchema<T> = {
    [P in keyof T]: InputSchema<T[P]>;
};
export declare type StyledTitle = ValueState<"Title", string>;
export declare type StyledCustom<T2> = ValueState<"Custom", T2>;
export declare type StyledCell<T, T2> = keyof T | StyledTitle | StyledCustom<T2>;
export declare type StyledRow<T, T2> = ValueState<"Row", Array<StyledCell<T, T2>>>;
export declare type StyledInputSchema<T, T2> = StyledTitle | StyledRow<T, T2> | StyledCustom<T2>;
export declare type StyledFormSchema<T, T2 = any> = Array<StyledInputSchema<T, T2> | keyof FormSchema<T>>;
export declare type GetPropsFn<T = any, TKey extends keyof FormSchema<T> = any> = (key: TKey, schema: FormSchema<T>[TKey]) => InputViewProps;
export declare type StyledInputsRenderMap<T = any, T2 = any> = {
    Title: React.FC<{
        value: StateValue<StyledTitle>;
    }>;
    Custom: React.FC<{
        value: StateValue<StyledCustom<T2>>;
    } & StyledFormViewProps<T, T2> & {
        getProps: GetPropsFn;
    }>;
    Row: React.FC<{
        value: React.ReactElement[];
    }>;
};
export declare type InputState<T> = {
    active: boolean;
    visited: boolean;
    validationResult?: Result<T, string>;
    value?: T;
};
export declare type FormLeafState<T> = T extends Array<infer E> ? Array<FormState<E>> | InputState<Array<E>> | Array<InputState<E>> : InputState<T>;
export declare type FormState<T> = {
    [P in keyof T]: FormLeafState<T[P]>;
};
export declare type InputResult<T> = T extends Array<infer E> ? Array<FormResult<E>> : Result<T, string>;
export declare type FormResult<T> = {
    [P in keyof T]: InputResult<T[P]>;
};
export declare type RenderOptionsProps = {
    renderOptions: RenderOptions;
};
export declare type InputPropsBase<TSchema extends InputSchemaBase = any, TState = any, TDelta = F1<TState>> = {
    schema: TSchema;
    state: TState;
    setDelta: TDelta;
} & RenderOptionsProps;
export declare type SimpleInputProps = ArrayItem<FArgs<InputRenderMap[keyof Omit<InputRenderMap, "list" | "collection" | "multiselect">]>>;
export declare type InputProps = ArrayItem<FArgs<InputRenderMap[keyof InputRenderMap]>>;
export declare type RenderFn<T> = React.FC<T>;
export declare type RenderParams<T extends RenderFn<any>> = T extends RenderFn<infer E> ? E : never;
export declare type InputBoxType = "text" | "email" | "number" | "textarea" | "password" | "hidden" | "customBox";
export declare type InputBoxRenderFn<T = any> = RenderFn<InputPropsBase<InputBoxSchema<T> | CustomInputBoxSchema<T>, InputState<T>>>;
export declare type InputBoxRenderMap<T = any> = TMap<InputBoxType, InputBoxRenderFn<T>>;
export declare type InputOptionType = "radio" | "select" | "customOption";
export declare type InputOptionRenderFn<T = any> = RenderFn<InputPropsBase<InputOptionSchema<T> | CustomInputOptionSchema<T>, InputState<T>>>;
export declare type InputOptionRenderMap<T = any> = TMap<InputOptionType, InputOptionRenderFn<T>>;
export declare type InputMultiselectRenderFn<T = any> = RenderFn<InputPropsBase<MultiselectInputSchema<T>, InputState<T[]>>>;
export declare type InputListRenderFn<T = any> = RenderFn<InputPropsBase<ListInputSchema<T>, InputState<T>[]>>;
export declare type InputCollectionRenderFn<T = any> = RenderFn<InputPropsBase<CollectionInputSchema<T>, FormState<T>[], F1<FormState<T>[]>>>;
export declare type InputRenderMap<T = any> = InputBoxRenderMap<T> & InputOptionRenderMap<T> & {
    list: InputListRenderFn<T>;
    collection: InputCollectionRenderFn<T>;
    multiselect: InputMultiselectRenderFn<T>;
};
export declare type InputType = keyof InputRenderMap;
export declare type FormViewProps<T> = RenderOptions & {
    setState: F1<FormState<T>>;
    state: FormState<T>;
    schema: FormSchema<T>;
};
export declare type FormHookProps<T> = {
    initialValue?: Partial<T>;
    schema: FormSchema<T>;
    onSubmit?: F1<T>;
};
export declare type FormHookResult<T> = {
    formViewProps: FormViewProps<T>;
    handleSubmit: (event?: React.FormEvent) => void;
    result: Result<T, T>;
    resetState: F0;
    active: boolean;
    submitted: boolean;
    touched: boolean;
};
export declare const useFormHook: <T extends unknown>({ schema, ...p }: FormHookProps<T>) => FormHookResult<T>;
//# sourceMappingURL=index.d.ts.map