digitaform-preview-react/dist/js/df-form-preview/df-form-controls/df-form-preview-interfaces.d.ts

A comprehensive React form preview component library with form controls,responsive design

export interface ICondition {
    id: string;
    when: string;
    operator: 'equals' | 'notEquals' | 'isEmpty' | 'isNotEmpty' | 'contains' | 'notContains' | 'greaterThan' | 'lessThan' | 'greaterThanOrEqual' | 'lessThanOrEqual';
    value: string | number | boolean;
}
export interface IConditionalLogic {
    action: 'show' | 'hide' | 'always';
    when: 'all' | 'any';
    conditions: ICondition[];
}
export interface IFormControlChange {
    id: string;
    value: any;
    isValid?: boolean;
    errors?: Record<string, any>;
    comments?: string;
}
export interface IFormValidationErrors {
    [key: string]: any;
}
export type TInputComponentType = 'text' | 'number' | 'email' | 'password' | 'url' | 'tel';
export interface IBaseFormComponent {
    id: string;
    _id: string;
    name: string;
    category: string;
    basic: {
        label: string;
        value: string;
        defaultValue: string;
        placeholder: string;
        options: any[];
        description?: string;
        collapsed?: boolean;
        showLabel?: boolean;
    };
    validation: {
        required: boolean;
        readonly: boolean;
        customValidationMessage: string;
        minLength?: number;
        maxLength?: number;
        min?: number;
        max?: number;
        pattern?: string;
        customValidation?: string;
        minDate?: string;
        maxDate?: string;
    };
    styles: {
        labelAlignment: 'left' | 'top';
        width?: number;
        height?: number;
        minWidth?: number;
        maxWidth?: number;
        minHeight?: number;
        maxHeight?: number;
        column?: number;
        fontSize?: string;
        color?: string;
        backgroundColor?: string;
        borderColor?: string;
        borderWidth?: string;
        borderRadius?: string;
        padding?: string;
        margin?: string;
    };
    position: number;
    options: any[];
    conditional: IConditionalLogic;
}
export interface ITextInputComponent extends IBaseFormComponent {
    name: 'text-input';
    validation: IBaseFormComponent['validation'] & {
        minLength?: number;
        maxLength?: number;
        pattern?: string;
    };
}
export interface INumberInputComponent extends IBaseFormComponent {
    name: 'number-input';
    validation: IBaseFormComponent['validation'] & {
        min?: number;
        max?: number;
        step?: number;
        minLength?: number;
        maxLength?: number;
    };
}
export interface IEmailInputComponent extends IBaseFormComponent {
    name: 'email-input';
    validation: IBaseFormComponent['validation'] & {
        pattern?: string;
    };
}
export interface ITextareaComponent extends IBaseFormComponent {
    name: 'textarea';
    validation: IBaseFormComponent['validation'] & {
        minLength?: number;
        maxLength?: number;
        rows?: number;
    };
}
export interface ISelectComponent extends IBaseFormComponent {
    name: 'select';
    options: Array<{
        label: string;
        value: string;
        disabled?: boolean;
    }>;
    validation: IBaseFormComponent['validation'] & {
        multiple?: boolean;
    };
    basic: IBaseFormComponent['basic'] & {
        comments?: string;
    };
}
export interface IRadioComponent extends IBaseFormComponent {
    name: 'radio';
    options: Array<{
        label: string;
        value: string;
        disabled?: boolean;
    }>;
    validation: IBaseFormComponent['validation'];
    basic: IBaseFormComponent['basic'] & {
        inlineLayout?: boolean;
        comments?: string;
    };
}
export interface ICheckboxComponent extends IBaseFormComponent {
    name: 'checkbox';
    options: Array<{
        label: string;
        value: string;
        disabled?: boolean;
    }>;
    validation: IBaseFormComponent['validation'] & {
        multiple?: boolean;
    };
    basic: IBaseFormComponent['basic'] & {
        inlineLayout?: boolean;
        comments?: string;
    };
}
export interface ISegmentComponent extends IBaseFormComponent {
    name: 'segment';
    options: Array<{
        label: string;
        value: string;
        disabled?: boolean;
    }>;
    validation: IBaseFormComponent['validation'];
    basic: IBaseFormComponent['basic'] & {
        inlineLayout?: boolean;
        comments?: string;
    };
}
export interface IDateComponent extends IBaseFormComponent {
    name: 'date';
    validation: IBaseFormComponent['validation'] & {
        minDate?: string;
        maxDate?: string;
    };
}
export interface IDatePickerComponent extends IBaseFormComponent {
    name: 'date-picker';
    validation: IBaseFormComponent['validation'] & {
        minDate?: string;
        maxDate?: string;
    };
}
export interface IDateTimePickerComponent extends IBaseFormComponent {
    name: 'datetime-picker';
    validation: IBaseFormComponent['validation'] & {
        minDate?: string;
        maxDate?: string;
    };
}
export interface IFileComponent extends IBaseFormComponent {
    name: 'file';
    validation: IBaseFormComponent['validation'] & {
        accept?: string;
        maxSize?: number;
        multiple?: boolean;
    };
}
export interface IFileUploadComponent extends IBaseFormComponent {
    name: 'file-upload';
    validation: IBaseFormComponent['validation'] & {
        accept?: string;
        maxSize?: number;
        multiple?: boolean;
        maxFiles?: number;
        allowedTypes?: string[];
    };
}
export interface ILocationComponent extends IBaseFormComponent {
    name: 'location';
    validation: IBaseFormComponent['validation'] & {
        enableHighAccuracy?: boolean;
        timeout?: number;
        maximumAge?: number;
    };
}
export interface IHeadingComponent extends Omit<IBaseFormComponent, 'basic' | 'styles'> {
    name: 'heading';
    basic: {
        label: string;
        level?: 1 | 2 | 3 | 4 | 5 | 6;
    };
    styles?: {
        fontSize?: string;
        color?: string;
        textAlign?: 'left' | 'center' | 'right';
    };
}
export interface IDividerComponent extends Omit<IBaseFormComponent, 'styles'> {
    name: 'divider';
    styles?: {
        color?: string;
        thickness?: string;
        style?: 'solid' | 'dashed' | 'dotted';
    };
}
export interface IInstructionComponent extends Omit<IBaseFormComponent, 'basic' | 'validation'> {
    name: 'instructions';
    basic: {
        label?: string;
        instructions: string[];
        value?: string;
        defaultValue?: string;
        placeholder?: string;
        options?: any[];
        description?: string;
        collapsed?: boolean;
        showLabel?: boolean;
    };
    validation: IBaseFormComponent['validation'] & {
        listStyle?: 'none' | 'numbers' | 'bullets' | 'alpha';
    };
}
export interface ISignatureComponent extends IBaseFormComponent {
    name: 'signature';
    validation: IBaseFormComponent['validation'] & {
        required?: boolean;
    };
}
export interface ISectionComponent extends Omit<IBaseFormComponent, 'basic' | 'styles'> {
    name: 'section';
    basic: {
        label: string;
        description: string;
        collapsed: boolean;
    };
    children: FormComponentType[];
    styles: IBaseFormComponent['styles'] & {
        backgroundColor: string;
        borderColor: string;
        borderWidth: string;
        borderRadius: string;
        padding: string;
        margin: string;
    };
}
export interface ITableComponent extends Omit<IBaseFormComponent, 'basic' | 'styles'> {
    name: 'table';
    basic: {
        label: string;
        description: string;
        rows: number;
        columns: number;
    };
    table: {
        rows: number;
        columns: number;
        displayAsTable: boolean;
        columnNames: string;
        showColumns: boolean;
    };
    cells: TableCell[][];
    styles: IBaseFormComponent['styles'] & {
        backgroundColor: string;
        borderColor: string;
        borderWidth: string;
        borderRadius: string;
        padding: string;
        margin: string;
        headerBackgroundColor?: string;
        headerTextColor?: string;
    };
}
export interface IDataGridComponent extends Omit<IBaseFormComponent, 'basic' | 'styles'> {
    name: 'datagrid';
    basic: {
        label: string;
        description: string;
        collapsed?: boolean;
    };
    datagrid: {
        maxEntries: number;
        minEntries: number;
        allowAddRemoveEntries: boolean;
        addAnotherText: string;
        removeText: string;
        displayAsGrid: boolean;
    };
    templateComponents: FormComponentType[];
    entries: DataGridEntry[];
    styles: IBaseFormComponent['styles'] & {
        backgroundColor: string;
        borderColor: string;
        borderWidth: string;
        borderRadius: string;
        padding: string;
        margin: string;
    };
}
export interface DataGridEntry {
    id: string;
    index: number;
    components: FormComponentType[];
    styles?: {
        backgroundColor?: string;
        borderColor?: string;
        padding?: string;
        minHeight?: string;
        verticalAlign?: 'top' | 'middle' | 'bottom';
    };
}
export interface TableCell {
    id: string;
    row: number;
    column: number;
    components: FormComponentType[];
    styles?: {
        backgroundColor?: string;
        borderColor?: string;
        padding?: string;
        minHeight?: string;
        verticalAlign?: 'top' | 'middle' | 'bottom';
    };
}
export type FormComponentType = ITextInputComponent | INumberInputComponent | IEmailInputComponent | ITextareaComponent | ISelectComponent | IRadioComponent | ICheckboxComponent | ISegmentComponent | IDateComponent | IDatePickerComponent | IDateTimePickerComponent | IFileComponent | IFileUploadComponent | ILocationComponent | IHeadingComponent | IDividerComponent | IInstructionComponent | ISignatureComponent | ISectionComponent | ITableComponent | IDataGridComponent;
export interface FormComponentProps {
    id: string;
    properties: FormComponentType;
    validationErrors?: IFormValidationErrors;
    formValue?: any;
    inputType?: TInputComponentType;
    readonly?: boolean;
    disabled?: boolean;
    touchedFields?: Record<string, boolean>;
    formSubmitted?: boolean;
    mode?: 'edit' | 'preview' | 'test';
    onValueChange?: (change: IFormControlChange) => void;
    onBlur?: () => void;
    onFocus?: () => void;
    onSelect?: () => void;
    isSelected?: boolean;
    className?: string;
    hideLabel?: boolean;
}
export interface ErrorMessageProps {
    validationErrors: IFormValidationErrors;
    fieldId: string;
    control?: any;
    inputType?: TInputComponentType;
    touchedFields: Record<string, boolean>;
    formSubmitted: boolean;
    properties: FormComponentType;
    localValidation?: {
        isValid: boolean;
        errors: Record<string, any>;
    };
    isTouched?: boolean;
    mode?: 'edit' | 'preview' | 'test';
}
export interface ValidationRule {
    type: 'required' | 'minLength' | 'maxLength' | 'min' | 'max' | 'pattern' | 'email' | 'custom';
    value?: any;
    message?: string;
}
export interface ValidationResult {
    isValid: boolean;
    errors: Record<string, string>;
}
//# sourceMappingURL=df-form-preview-interfaces.d.ts.map