df-forms-preview-pack
Version:
A comprehensive React form preview component library with form controls, validation, conditional logic, and responsive design
800 lines (774 loc) • 25.2 kB
TypeScript
import React from 'react';
interface ICondition {
id: string;
when: string;
operator: 'equals' | 'notEquals' | 'isEmpty' | 'isNotEmpty' | 'contains' | 'notContains' | 'greaterThan' | 'lessThan' | 'greaterThanOrEqual' | 'lessThanOrEqual';
value: string | number | boolean;
}
interface IConditionalLogic {
action: 'show' | 'hide' | 'always';
when: 'all' | 'any';
conditions: ICondition[];
}
interface IFormControlChange {
id: string;
value: any;
isValid?: boolean;
errors?: Record<string, any>;
comments?: string;
}
interface IFormValidationErrors {
[key: string]: any;
}
type TInputComponentType = 'text' | 'number' | 'email' | 'password' | 'url' | 'tel';
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;
}
interface ITextInputComponent extends IBaseFormComponent {
name: 'text-input';
validation: IBaseFormComponent['validation'] & {
minLength?: number;
maxLength?: number;
pattern?: string;
};
}
interface INumberInputComponent extends IBaseFormComponent {
name: 'number-input';
validation: IBaseFormComponent['validation'] & {
min?: number;
max?: number;
step?: number;
minLength?: number;
maxLength?: number;
};
}
interface IEmailInputComponent extends IBaseFormComponent {
name: 'email-input';
validation: IBaseFormComponent['validation'] & {
pattern?: string;
};
}
interface ITextareaComponent extends IBaseFormComponent {
name: 'textarea';
validation: IBaseFormComponent['validation'] & {
minLength?: number;
maxLength?: number;
rows?: number;
};
}
interface ISelectComponent extends IBaseFormComponent {
name: 'select';
options: Array<{
label: string;
value: string;
disabled?: boolean;
}>;
validation: IBaseFormComponent['validation'] & {
multiple?: boolean;
};
basic: IBaseFormComponent['basic'] & {
comments?: string;
};
}
interface IRadioComponent extends IBaseFormComponent {
name: 'radio';
options: Array<{
label: string;
value: string;
disabled?: boolean;
}>;
validation: IBaseFormComponent['validation'];
basic: IBaseFormComponent['basic'] & {
inlineLayout?: boolean;
comments?: string;
};
}
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;
};
}
interface ISegmentComponent extends IBaseFormComponent {
name: 'segment';
options: Array<{
label: string;
value: string;
disabled?: boolean;
}>;
validation: IBaseFormComponent['validation'];
basic: IBaseFormComponent['basic'] & {
inlineLayout?: boolean;
comments?: string;
};
}
interface IDateComponent extends IBaseFormComponent {
name: 'date';
validation: IBaseFormComponent['validation'] & {
minDate?: string;
maxDate?: string;
};
}
interface IDatePickerComponent extends IBaseFormComponent {
name: 'date-picker';
validation: IBaseFormComponent['validation'] & {
minDate?: string;
maxDate?: string;
};
}
interface IDateTimePickerComponent extends IBaseFormComponent {
name: 'datetime-picker';
validation: IBaseFormComponent['validation'] & {
minDate?: string;
maxDate?: string;
};
}
interface IFileComponent extends IBaseFormComponent {
name: 'file';
validation: IBaseFormComponent['validation'] & {
accept?: string;
maxSize?: number;
multiple?: boolean;
};
}
interface IFileUploadComponent extends IBaseFormComponent {
name: 'file-upload';
validation: IBaseFormComponent['validation'] & {
accept?: string;
maxSize?: number;
multiple?: boolean;
maxFiles?: number;
allowedTypes?: string[];
};
}
interface ILocationComponent extends IBaseFormComponent {
name: 'location';
validation: IBaseFormComponent['validation'] & {
enableHighAccuracy?: boolean;
timeout?: number;
maximumAge?: number;
};
}
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';
};
}
interface IDividerComponent extends Omit<IBaseFormComponent, 'styles'> {
name: 'divider';
styles?: {
color?: string;
thickness?: string;
style?: 'solid' | 'dashed' | 'dotted';
};
}
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';
};
}
interface ISignatureComponent extends IBaseFormComponent {
name: 'signature';
validation: IBaseFormComponent['validation'] & {
required?: boolean;
};
}
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;
};
}
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;
};
}
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;
};
}
interface DataGridEntry {
id: string;
index: number;
components: FormComponentType[];
styles?: {
backgroundColor?: string;
borderColor?: string;
padding?: string;
minHeight?: string;
verticalAlign?: 'top' | 'middle' | 'bottom';
};
}
interface TableCell {
id: string;
row: number;
column: number;
components: FormComponentType[];
styles?: {
backgroundColor?: string;
borderColor?: string;
padding?: string;
minHeight?: string;
verticalAlign?: 'top' | 'middle' | 'bottom';
};
}
type FormComponentType = ITextInputComponent | INumberInputComponent | IEmailInputComponent | ITextareaComponent | ISelectComponent | IRadioComponent | ICheckboxComponent | ISegmentComponent | IDateComponent | IDatePickerComponent | IDateTimePickerComponent | IFileComponent | IFileUploadComponent | ILocationComponent | IHeadingComponent | IDividerComponent | IInstructionComponent | ISignatureComponent | ISectionComponent | ITableComponent | IDataGridComponent;
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;
}
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';
}
interface ValidationRule {
type: 'required' | 'minLength' | 'maxLength' | 'min' | 'max' | 'pattern' | 'email' | 'custom';
value?: any;
message?: string;
}
interface ValidationResult {
isValid: boolean;
errors: Record<string, string>;
}
type DeviceType = 'desktop' | 'tablet' | 'mobile';
interface DfFormPreviewProps {
formComponents: FormComponentType[];
formData?: any;
currentDevice?: DeviceType;
isPreviewMode?: boolean;
initialFormData?: FormComponentType[];
onSubmit?: (formData: FormComponentType[]) => void;
onFormDataChange?: (formData: FormComponentType[]) => void;
formTitle?: string;
formDescription?: string;
formTemplateId?: string;
onComponentSelect?: (component: FormComponentType) => void;
onComponentDelete?: (component: FormComponentType, event: React.MouseEvent) => void;
onComponentEdit?: (component: FormComponentType) => void;
onComponentUpdate?: (componentId: string, updates: Partial<FormComponentType>) => void;
selectedComponent?: FormComponentType | null;
}
declare const DfFormPreview: React.FC<DfFormPreviewProps>;
interface DfFormInputProps {
id: string;
properties: ITextInputComponent | INumberInputComponent | IEmailInputComponent;
validationErrors?: IFormValidationErrors;
formValue?: string;
inputType?: TInputComponentType;
readonly?: boolean;
disabled?: boolean;
touchedFields?: Record<string, boolean>;
formSubmitted?: boolean;
mode?: 'edit' | 'preview' | 'test';
onValueChange?: (change: IFormControlChange) => void;
onBlur?: () => void;
onFocus?: () => void;
className?: string;
hideLabel?: boolean;
formTemplateId?: string;
onThresholdIssueRaised?: (conditionId: string) => void;
raisedThresholdIssues?: Set<string>;
}
declare const DfFormInput: React.FC<DfFormInputProps>;
interface DfFormTextareaProps {
id: string;
properties: ITextareaComponent;
validationErrors?: IFormValidationErrors;
formValue?: string;
readonly?: boolean;
disabled?: boolean;
touchedFields?: Record<string, boolean>;
formSubmitted?: boolean;
mode?: 'edit' | 'preview' | 'test';
onValueChange?: (change: IFormControlChange) => void;
onBlur?: () => void;
onFocus?: () => void;
className?: string;
hideLabel?: boolean;
}
declare const DfFormTextarea: React.FC<DfFormTextareaProps>;
interface DfFormSelectProps {
id: string;
properties: ISelectComponent;
validationErrors?: IFormValidationErrors;
formValue?: string | string[];
readonly?: boolean;
disabled?: boolean;
touchedFields?: Record<string, boolean>;
formSubmitted?: boolean;
mode?: 'edit' | 'preview' | 'test';
onValueChange?: (change: IFormControlChange) => void;
onBlur?: () => void;
onFocus?: () => void;
className?: string;
hideLabel?: boolean;
showCommentsInPreview?: boolean;
}
declare const DfFormSelect: React.FC<DfFormSelectProps>;
interface DfFormCheckboxProps {
id: string;
properties: ICheckboxComponent;
validationErrors?: IFormValidationErrors;
formValue?: string[];
readonly?: boolean;
disabled?: boolean;
touchedFields?: Record<string, boolean>;
formSubmitted?: boolean;
mode?: 'edit' | 'preview' | 'test';
onValueChange?: (change: IFormControlChange) => void;
onBlur?: () => void;
onFocus?: () => void;
className?: string;
hideLabel?: boolean;
showCommentsInPreview?: boolean;
}
declare const DfFormCheckbox: React.FC<DfFormCheckboxProps>;
interface DfFormRadioProps {
id: string;
properties: IRadioComponent;
validationErrors?: IFormValidationErrors;
formValue?: string;
readonly?: boolean;
disabled?: boolean;
touchedFields?: Record<string, boolean>;
formSubmitted?: boolean;
mode?: 'edit' | 'preview' | 'test';
onValueChange?: (change: IFormControlChange) => void;
onBlur?: () => void;
onFocus?: () => void;
className?: string;
hideLabel?: boolean;
showCommentsInPreview?: boolean;
}
declare const DfFormRadio: React.FC<DfFormRadioProps>;
interface DfFormDateTimeProps {
id: string;
properties: IDateComponent;
validationErrors?: IFormValidationErrors;
formValue?: string;
readonly?: boolean;
disabled?: boolean;
touchedFields?: Record<string, boolean>;
formSubmitted?: boolean;
mode?: 'edit' | 'preview' | 'test';
onValueChange?: (change: IFormControlChange) => void;
onBlur?: () => void;
onFocus?: () => void;
className?: string;
hideLabel?: boolean;
}
declare const DfFormDateTime: React.FC<DfFormDateTimeProps>;
interface DfFormSignatureProps {
id: string;
properties: ISignatureComponent;
validationErrors?: IFormValidationErrors;
formValue?: string;
readonly?: boolean;
disabled?: boolean;
touchedFields?: Record<string, boolean>;
formSubmitted?: boolean;
mode?: 'edit' | 'preview' | 'test';
onValueChange?: (change: IFormControlChange) => void;
onBlur?: () => void;
onFocus?: () => void;
className?: string;
hideLabel?: boolean;
}
declare const DfFormSignature: React.FC<DfFormSignatureProps>;
interface DfFormHeadingProps {
id: string;
properties: IHeadingComponent;
mode?: 'edit' | 'preview' | 'test';
className?: string;
hideLabel?: boolean;
}
declare const DfFormHeading: React.FC<DfFormHeadingProps>;
declare const DfFormErrorMsg: React.FC<ErrorMessageProps>;
interface DfFormSegmentProps {
id: string;
properties: ISegmentComponent;
validationErrors?: IFormValidationErrors;
formValue?: string;
readonly?: boolean;
disabled?: boolean;
touchedFields?: Record<string, boolean>;
formSubmitted?: boolean;
mode?: 'edit' | 'preview' | 'test';
onValueChange?: (change: IFormControlChange) => void;
onBlur?: () => void;
onFocus?: () => void;
className?: string;
hideLabel?: boolean;
showCommentsInPreview?: boolean;
}
declare const DfFormSegment: React.FC<DfFormSegmentProps>;
interface IFileDataObject {
name?: string;
fileName?: string;
type?: string;
fileType?: string;
mimeType?: string;
size?: number;
fileSize?: number;
url?: string;
path?: string;
data?: string;
}
interface DfFormFileUploadProps {
id: string;
properties: IFileUploadComponent;
validationErrors?: IFormValidationErrors;
formValue?: File[] | FileList | IFileDataObject[] | string[] | null;
readonly?: boolean;
disabled?: boolean;
touchedFields?: Record<string, boolean>;
formSubmitted?: boolean;
mode?: 'edit' | 'preview' | 'test';
onValueChange?: (change: IFormControlChange) => void;
onBlur?: () => void;
onFocus?: () => void;
className?: string;
hideLabel?: boolean;
}
declare const DfFormFileUpload: React.FC<DfFormFileUploadProps>;
interface DfFormLocationProps {
id: string;
properties: ILocationComponent;
validationErrors?: IFormValidationErrors;
formValue?: ILocationData | null;
readonly?: boolean;
disabled?: boolean;
touchedFields?: Record<string, boolean>;
formSubmitted?: boolean;
mode?: 'edit' | 'preview' | 'test';
onValueChange?: (change: IFormControlChange) => void;
onBlur?: () => void;
onFocus?: () => void;
className?: string;
hideLabel?: boolean;
}
interface ILocationData {
latitude: number;
longitude: number;
accuracy?: number;
timestamp?: number;
address?: string;
placeName?: string;
city?: string;
country?: string;
}
declare const DfFormLocation: React.FC<DfFormLocationProps>;
interface DfFormCommentsProps {
comment?: string;
onSave?: (comment: string) => void;
placeholder?: string;
className?: string;
disabled?: boolean;
}
declare const DfFormComments: React.FC<DfFormCommentsProps>;
interface DfFormInstructionProps {
id: string;
properties: IInstructionComponent;
mode?: 'edit' | 'preview' | 'test';
onValueChange?: (change: IFormControlChange) => void;
className?: string;
hideLabel?: boolean;
}
declare const DfFormInstruction: React.FC<DfFormInstructionProps>;
interface DfFormSectionProps {
id: string;
properties: ISectionComponent;
validationErrors?: Record<string, any>;
formValue?: any;
formData?: Record<string, any>;
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;
onSectionSelect?: (section: ISectionComponent) => void;
onSectionDelete?: (sectionId: string) => void;
onChildrenChange?: (children: FormComponentType[]) => void;
onChildSelect?: (child: FormComponentType) => void;
onChildDelete?: (childId: string) => void;
selectedChild?: FormComponentType | null;
renderFormComponent?: (field: FormComponentType) => React.ReactNode;
}
declare const DfFormSection: React.FC<DfFormSectionProps>;
interface DfFormTableProps {
id: string;
properties: ITableComponent;
validationErrors?: Record<string, any>;
formValue?: any;
formData?: Record<string, any>;
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;
onTableSelect?: (table: ITableComponent) => void;
onTableDelete?: (tableId: string) => void;
onCellChange?: (row: number, column: number, components: FormComponentType[]) => void;
onComponentSelect?: (component: FormComponentType) => void;
onComponentDelete?: (componentId: string) => void;
onComponentEdit?: (component: FormComponentType) => void;
selectedComponent?: FormComponentType | null;
renderFormComponent?: (field: FormComponentType) => React.ReactNode;
onTableUpdate?: (tableId: string, updates: Partial<ITableComponent>) => void;
onCellAdd?: (row: number, column: number) => void;
onCellRemove?: (row: number, column: number) => void;
onRowAdd?: () => void;
onRowRemove?: (rowIndex: number) => void;
onColumnAdd?: () => void;
onColumnRemove?: (columnIndex: number) => void;
}
declare const DfFormTable: React.FC<DfFormTableProps>;
interface DfFormDataGridProps {
id: string;
properties: IDataGridComponent;
validationErrors?: Record<string, any>;
formValue?: any;
formData?: Record<string, any>;
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;
onDataGridSelect?: (dataGrid: IDataGridComponent) => void;
onDataGridDelete?: (dataGridId: string) => void;
onEntryChange?: (entryIndex: number, components: FormComponentType[]) => void;
onComponentSelect?: (component: FormComponentType) => void;
onComponentDelete?: (component: FormComponentType, event: React.MouseEvent) => void;
onComponentEdit?: (component: FormComponentType) => void;
onComponentUpdate?: (componentId: string, updates: Partial<FormComponentType>) => void;
selectedComponent?: FormComponentType | null;
renderFormComponent?: (field: FormComponentType, hideLabel?: boolean) => React.ReactNode;
onDataGridUpdate?: (dataGridId: string, updates: Partial<IDataGridComponent>) => void;
onEntryAdd?: () => void;
onEntryRemove?: (entryIndex: number) => void;
}
declare const DfFormDataGrid: React.FC<DfFormDataGridProps>;
type TFormComponent$1 = any;
interface IComponentActionFeaturesProps {
component: TFormComponent$1;
mode: 'edit' | 'preview' | 'test';
formTemplateId?: string;
formValue?: any;
onNotesChange?: (notes: string) => void;
onAttachmentChange?: (files: File[] | null) => void;
notes?: string;
attachments?: File[] | null;
}
declare const ComponentActionFeatures: React.FC<IComponentActionFeaturesProps>;
interface IThresholdAlertProps {
component: any;
condition: any;
currentValue: string | number;
thresholdValue: string | number;
formTemplateId?: string;
onDismiss?: () => void;
onIssueRaised?: (conditionId: string) => void;
isIssueRaised?: boolean;
}
declare const ThresholdAlert: React.FC<IThresholdAlertProps>;
type TFormComponent = any;
interface IIssue {
id?: string;
title?: string;
description?: string;
status?: string;
priority?: string;
assignee?: string;
workOrderNumber?: string;
assetNumber?: string;
comments?: string;
[key: string]: any;
}
interface IRaiseIssueModalProps {
isOpen: boolean;
onClose: () => void;
onSuccess?: () => void;
component?: TFormComponent;
formTemplateId?: string;
notes?: string;
attachments?: File[] | null;
issue?: IIssue | null;
}
declare const RaiseIssueModal: React.FC<IRaiseIssueModalProps>;
export { ComponentActionFeatures, DfFormCheckbox, DfFormComments, DfFormDataGrid, DfFormDateTime, DfFormErrorMsg, DfFormFileUpload, DfFormHeading, DfFormInput, DfFormInstruction, DfFormLocation, DfFormPreview, DfFormRadio, DfFormSection, DfFormSegment, DfFormSelect, DfFormSignature, DfFormTable, DfFormTextarea, RaiseIssueModal, ThresholdAlert };
export type { DataGridEntry, DeviceType, DfFormPreviewProps, ErrorMessageProps, FormComponentProps, FormComponentType, IBaseFormComponent, ICheckboxComponent, ICondition, IConditionalLogic, IDataGridComponent, IDateComponent, IDatePickerComponent, IDateTimePickerComponent, IDividerComponent, IEmailInputComponent, IFileComponent, IFileUploadComponent, IFormControlChange, IFormValidationErrors, IHeadingComponent, IInstructionComponent, ILocationComponent, INumberInputComponent, IRadioComponent, ISectionComponent, ISegmentComponent, ISelectComponent, ISignatureComponent, ITableComponent, ITextInputComponent, ITextareaComponent, TInputComponentType, TableCell, ValidationResult, ValidationRule };