digitaform-preview-react
Version:
A comprehensive React form preview component library with form controls,responsive design
1,630 lines (1,597 loc) • 59.6 kB
TypeScript
import React from 'react';
interface ICondition$1 {
id: string;
when: string;
operator: 'equals' | 'notEquals' | 'isEmpty' | 'isNotEmpty' | 'contains' | 'notContains' | 'greaterThan' | 'lessThan' | 'greaterThanOrEqual' | 'lessThanOrEqual';
value: string | number | boolean;
}
interface IConditionalLogic$2 {
action: 'show' | 'hide' | 'always';
when: 'all' | 'any';
conditions: ICondition$1[];
}
interface IFormControlChange {
id: string;
value: any;
isValid?: boolean;
errors?: Record<string, any>;
comments?: string;
}
interface IFormValidationErrors {
[key: string]: any;
}
type TInputComponentType$1 = '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$2;
}
interface ITextInputComponent$1 extends IBaseFormComponent {
name: 'text-input';
validation: IBaseFormComponent['validation'] & {
minLength?: number;
maxLength?: number;
pattern?: string;
};
}
interface INumberInputComponent$1 extends IBaseFormComponent {
name: 'number-input';
validation: IBaseFormComponent['validation'] & {
min?: number;
max?: number;
step?: number;
minLength?: number;
maxLength?: number;
};
}
interface IEmailInputComponent$1 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$1 extends IBaseFormComponent {
name: 'date-picker';
validation: IBaseFormComponent['validation'] & {
minDate?: string;
maxDate?: string;
};
}
interface IDateTimePickerComponent$1 extends IBaseFormComponent {
name: 'datetime-picker';
validation: IBaseFormComponent['validation'] & {
minDate?: string;
maxDate?: string;
};
}
interface IFileComponent$1 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$1 extends IBaseFormComponent {
name: 'location';
validation: IBaseFormComponent['validation'] & {
enableHighAccuracy?: boolean;
timeout?: number;
maximumAge?: number;
};
}
interface IHeadingComponent$1 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$1 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$1 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$1 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$1 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$1 | INumberInputComponent$1 | IEmailInputComponent$1 | ITextareaComponent | ISelectComponent | IRadioComponent | ICheckboxComponent | ISegmentComponent | IDateComponent | IDatePickerComponent$1 | IDateTimePickerComponent$1 | IFileComponent$1 | IFileUploadComponent | ILocationComponent$1 | IHeadingComponent$1 | IDividerComponent | IInstructionComponent$1 | ISignatureComponent | ISectionComponent$1 | ITableComponent$1 | IDataGridComponent$1;
interface FormComponentProps {
id: string;
properties: FormComponentType;
validationErrors?: IFormValidationErrors;
formValue?: any;
inputType?: TInputComponentType$1;
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$1;
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$1 {
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 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 TComponentCategory = 'Basic' | 'Advanced' | 'Layout' | 'Custom';
type TBasicComponentName = 'text-input' | 'number-input' | 'email-input' | 'textarea' | 'select' | 'checkbox' | 'radio' | 'segment' | 'date-picker' | 'datetime-picker' | 'info' | 'signature' | 'heading' | 'instructions' | 'section' | 'table' | 'datagrid' | 'file' | 'location';
type TComponentName = TBasicComponentName;
declare enum ELabelAlignment {
Top = "top",
Left = "left"
}
interface IOption {
label: string;
value: string;
selected?: boolean;
enableNotes?: boolean;
enableAttachment?: boolean;
enableRaiseIssue?: boolean;
enableSendEmail?: boolean;
color?: string;
backgroundColor?: string;
icon?: string;
}
type TCheckboxValue = string | string[];
interface IBaseProps {
label: string;
value: string;
defaultValue: string | number;
placeholder?: string;
options?: any[];
description?: string;
collapsed?: boolean;
valid?: boolean;
enableNotes?: boolean;
enableAttachment?: boolean;
enableRaiseIssue?: boolean;
enableSendEmail?: boolean;
}
interface IBaseValidationProps {
required: boolean;
customValidationMessage: string;
readonly: boolean;
}
interface IBaseStyleProps {
labelAlignment: ELabelAlignment;
width?: number;
height?: number;
minWidth?: number;
maxWidth?: number;
minHeight?: number;
maxHeight?: number;
column?: number;
backgroundColor?: string;
borderColor?: string;
borderWidth?: string;
borderRadius?: string;
padding?: string;
margin?: string;
}
type TInputComponentType = 'text' | 'number' | 'email';
interface IBaseInputComponent extends IBaseComponent {
inputType: TInputComponentType;
}
interface IBaseComponent {
id: string;
_id: string;
name: TComponentName;
category: TComponentCategory;
basic: IBaseProps;
validation: IBaseValidationProps;
styles: IBaseStyleProps;
position: number;
options: any[];
conditional: IConditionalLogic$1;
}
interface ITextInputBasicProps extends IBaseProps {
placeholder: string;
defaultValue: string;
}
interface ITextInputValidationProps extends IBaseValidationProps {
minLength: number;
maxLength: number;
pattern: string;
}
interface ITextInputStyleProps extends IBaseStyleProps {
labelAlignment: ELabelAlignment;
}
interface ITextInputComponent extends IBaseInputComponent {
id: string;
name: 'text-input';
category: TComponentCategory;
inputType: TInputComponentType;
basic: ITextInputBasicProps;
validation: ITextInputValidationProps;
styles: ITextInputStyleProps;
}
interface INumberInputBasicProps extends IBaseProps {
placeholder: string;
defaultValue: number;
decimalPlaces: number;
}
interface INumberInputValidationProps extends IBaseValidationProps {
minLength: number;
maxLength: number;
integerOnly: boolean;
}
interface INumberInputStyleProps extends IBaseStyleProps {
labelAlignment: ELabelAlignment;
}
interface INumberInputComponent extends IBaseInputComponent {
id: string;
name: 'number-input';
inputType: 'number';
basic: INumberInputBasicProps;
validation: INumberInputValidationProps;
styles: INumberInputStyleProps;
}
interface IEmailInputBasicProps extends IBaseProps {
placeholder: string;
defaultValue: string;
}
interface IEmailInputValidationProps extends IBaseValidationProps {
minLength: number;
maxLength: number;
}
interface IEmailInputStyleProps extends IBaseStyleProps {
labelAlignment: ELabelAlignment;
}
interface IEmailInputComponent extends IBaseInputComponent {
id: string;
name: 'email-input';
inputType: 'email';
basic: IEmailInputBasicProps;
validation: IEmailInputValidationProps;
styles: IEmailInputStyleProps;
}
interface ITextareaInputBasicProps extends IBaseProps {
placeholder: string;
defaultValue: string;
rows: number;
autoExpand?: boolean;
}
interface ITextareaInputValidationProps extends IBaseValidationProps {
minLength: number;
maxLength: number;
}
interface ITextareaInputComponent extends IBaseComponent {
id: string;
name: 'textarea';
category: TComponentCategory;
basic: ITextareaInputBasicProps;
validation: ITextareaInputValidationProps;
styles: IBaseStyleProps;
}
interface ISelectInputBasicProps extends IBaseProps {
placeholder: string;
options: IOption[];
}
interface ISelectInputComponent extends IBaseComponent {
id: string;
name: 'select';
category: TComponentCategory;
basic: ISelectInputBasicProps;
validation: IBaseValidationProps;
styles: IBaseStyleProps;
}
interface ICheckboxGroupBasicProps extends Omit<IBaseProps, 'value' | 'defaultValue'> {
options: IOption[];
value: TCheckboxValue;
defaultValue: TCheckboxValue;
inlineLayout: boolean;
}
interface ICheckboxGroupBase extends Omit<IBaseComponent, 'basic'> {
basic: ICheckboxGroupBasicProps;
}
interface ICheckboxGroupValidationProps extends IBaseValidationProps {
minCheckedNumber: number;
maxCheckedNumber: number;
}
interface ICheckboxGroupComponent extends ICheckboxGroupBase {
id: string;
name: 'checkbox';
category: TComponentCategory;
basic: ICheckboxGroupBasicProps;
validation: ICheckboxGroupValidationProps;
styles: IBaseStyleProps;
}
interface IRadioGroupBasicProps extends IBaseProps {
options: IOption[];
defaultValue: string;
inlineLayout: boolean;
}
interface IRadioGroupComponent extends IBaseComponent {
id: string;
name: 'radio';
category: TComponentCategory;
basic: IRadioGroupBasicProps;
validation: IBaseValidationProps;
styles: IBaseStyleProps;
}
interface ISegmentGroupBasicProps extends IBaseProps {
options: IOption[];
defaultValue: string;
inlineLayout: boolean;
}
interface ISegmentGroupComponent extends IBaseComponent {
id: string;
name: 'segment';
category: TComponentCategory;
basic: ISegmentGroupBasicProps;
validation: IBaseValidationProps;
styles: IBaseStyleProps;
}
interface IDateTimePickerBasicProps extends IBaseProps {
placeholder: string;
defaultValue: string;
timeFormat: '12hr' | '24hr';
minDateTime: string;
maxDateTime: string;
}
interface IDateTimePickerComponent extends IBaseComponent {
id: string;
name: 'datetime-picker';
category: TComponentCategory;
basic: IDateTimePickerBasicProps;
validation: IBaseValidationProps;
styles: IBaseStyleProps;
}
interface IDatePickerBasicProps extends IBaseProps {
placeholder: string;
defaultValue: string;
timeFormat: '12hr' | '24hr';
minDate: string;
maxDate: string;
}
interface IDatePickerComponent extends IBaseComponent {
id: string;
name: 'date-picker';
category: TComponentCategory;
basic: IDatePickerBasicProps;
validation: IBaseValidationProps;
styles: IBaseStyleProps;
}
interface ISignatureInputBasicProps extends IBaseProps {
height: number;
penColor: string;
backgroundColor: string;
}
interface ISignatureInputComponent extends IBaseComponent {
id: string;
name: 'signature';
category: TComponentCategory;
basic: ISignatureInputBasicProps;
validation: IBaseValidationProps;
styles: IBaseStyleProps;
}
interface IHeadingBasicProps extends IBaseProps {
}
interface IHeadingComponent extends IBaseComponent {
id: string;
name: 'heading';
category: TComponentCategory;
basic: IHeadingBasicProps;
}
interface IInstructionBasicProps extends IBaseProps {
instructions?: string[];
}
interface IInstructionComponent extends IBaseComponent {
id: string;
name: 'instructions';
category: TComponentCategory;
basic: IInstructionBasicProps;
validation: IBaseValidationProps & {
listStyle?: 'none' | 'numbers' | 'bullets' | 'alpha';
};
}
interface ISectionBasicProps extends IBaseProps {
description?: string;
collapsed?: boolean;
}
interface ISectionComponent extends IBaseComponent {
id: string;
name: 'section';
category: TComponentCategory;
basic: ISectionBasicProps;
children: TFormComponent$1[];
}
interface ITableBasicProps extends IBaseProps {
description?: string;
collapsed?: boolean;
rows?: number;
columns?: number;
}
interface ITableComponent extends IBaseComponent {
id: string;
name: 'table';
category: TComponentCategory;
basic: ITableBasicProps;
table: {
rows: number;
columns: number;
addAnotherText?: string;
removeText?: string;
displayAsTable: boolean;
columnNames: string;
showColumns: boolean;
};
cells: Array<Array<{
id: string;
row: number;
column: number;
components: TFormComponent$1[];
styles?: {
backgroundColor?: string;
borderColor?: string;
padding?: string;
minHeight?: string;
verticalAlign?: 'top' | 'middle' | 'bottom';
};
}>>;
}
interface IDataGridComponent extends IBaseComponent {
id: string;
name: 'datagrid';
category: TComponentCategory;
basic: IBaseProps;
datagrid: {
maxEntries?: number;
minEntries?: number;
allowAddRemoveEntries?: boolean;
addAnotherText?: string;
removeText?: string;
displayAsGrid?: boolean;
};
entries: Array<{
id: string;
index: number;
components: TFormComponent$1[];
styles?: {
backgroundColor?: string;
borderColor?: string;
padding?: string;
minHeight?: string;
verticalAlign?: 'top' | 'middle' | 'bottom';
};
}>;
}
interface ICondition {
id: string;
when: string;
operator: 'equals' | 'notEquals' | 'isEmpty' | 'isNotEmpty' | 'contains' | 'notContains' | 'greaterThan' | 'lessThan' | 'greaterThanOrEqual' | 'lessThanOrEqual';
value: string | number | boolean;
}
interface IConditionalLogic$1 {
action: 'show' | 'hide' | 'always';
when: 'all' | 'any';
conditions: ICondition[];
}
interface IFileComponent extends IBaseComponent {
id: string;
name: 'file';
category: TComponentCategory;
basic: IBaseProps;
validation: IBaseValidationProps;
styles: IBaseStyleProps;
}
interface ILocationComponent extends IBaseComponent {
id: string;
name: 'location';
category: TComponentCategory;
basic: IBaseProps;
validation: IBaseValidationProps;
styles: IBaseStyleProps;
}
type TFormComponent$1 = ITextInputComponent | INumberInputComponent | IEmailInputComponent | ITextareaInputComponent | ISelectInputComponent | IRadioGroupComponent | ISegmentGroupComponent | ICheckboxGroupComponent | IDateTimePickerComponent | ISignatureInputComponent | IDatePickerComponent | IHeadingComponent | IInstructionComponent | ISectionComponent | ITableComponent | IDataGridComponent | IFileComponent | ILocationComponent;
type TFormComponentName = TFormComponent$1['name'];
interface ISegmentOptionTemplate {
name: string;
label: string;
options: IOption[];
}
declare const SEGMENT_OPTION_TEMPLATES: ISegmentOptionTemplate[];
interface SegmentOptionTemplatesProps {
onSelectTemplate: (template: ISegmentOptionTemplate) => void;
}
declare const SegmentOptionTemplates: React.FC<SegmentOptionTemplatesProps>;
declare enum EFormTemplateStatus {
DRAFTED = "drafted",
PUBLISHED = "published",
SUBMITTED = "submitted"
}
declare enum EFormTemplateSortBy {
TITLE = "title",
CREATED_AT = "createdAt",
UPDATED_AT = "updatedAt"
}
declare enum EFormTemplateSortOrder {
ASC = "asc",
DESC = "desc"
}
interface ITranslation {
label?: string;
description?: string;
}
interface TFormComponent {
id: string;
_id: string;
name: string;
category: string;
basic: {
label?: string;
value: string;
defaultValue: string;
placeholder: string;
options: any[];
inlineLayout?: boolean;
comments?: string;
description?: string;
collapsed?: boolean;
showLabel?: boolean;
valid?: boolean;
rows?: number;
decimalPlaces?: number;
timeFormat?: string;
minDateTime?: string;
maxDateTime?: string;
minDate?: string;
maxDate?: string;
height?: number;
penColor?: string;
backgroundColor?: string;
translations?: Record<string, ITranslation> | Map<string, ITranslation>;
enableNotes?: boolean;
enableAttachment?: boolean;
enableRaiseIssue?: boolean;
enableSendEmail?: boolean;
};
validation: {
required: boolean;
customValidationMessage: string;
readonly: boolean;
};
styles: {
labelAlignment: string;
width?: number;
height?: number;
minWidth?: number;
maxWidth?: number;
minHeight?: number;
maxHeight?: number;
column?: number;
backgroundColor?: string;
borderColor?: string;
borderWidth?: string;
borderRadius?: string;
padding?: string;
margin?: string;
};
position: number;
options: any[];
conditional: {
action: 'show' | 'hide' | 'always';
when: 'all' | 'any';
conditions: Array<{
id: string;
when: string;
operator: 'equals' | 'notEquals' | 'isEmpty' | 'isNotEmpty' | 'contains' | 'notContains' | 'greaterThan' | 'lessThan' | 'greaterThanOrEqual' | 'lessThanOrEqual';
value: string | number | boolean;
}>;
};
threshold?: {
conditions: Array<{
id: string;
operator: 'greaterThan' | 'lessThan' | 'greaterThanOrEqual' | 'lessThanOrEqual' | 'equals' | 'notEquals';
value: number | string;
enableNotes?: boolean;
enableAttachment?: boolean;
enableRaiseIssue?: boolean;
}>;
};
table?: {
rows: number;
columns: number;
displayAsTable: boolean;
columnNames: string;
showColumns: boolean;
};
cells?: Array<Array<{
id: string;
row: number;
column: number;
components: TFormComponent[];
styles?: {
backgroundColor?: string;
borderColor?: string;
padding?: string;
minHeight?: string;
verticalAlign?: 'top' | 'middle' | 'bottom';
};
}>>;
[key: string]: any;
}
interface IGetFormTemplateResponse {
_id: string;
title: string;
description: string;
projectId: string;
createdById: string;
createdAt: string;
updatedById: string;
updatedAt: string;
versionNumber: string;
parentVersionId: string;
status: EFormTemplateStatus;
components: TFormComponent[];
tags: IFormTag[];
}
interface IGetFormSubmissionRequest extends Omit<IUpdateFormTemplateRequest, 'updatedAt'> {
formTemplateId: string;
}
interface IUpdateFormTemplateRequest {
title?: string;
description?: string;
projectId: string;
createdById: string;
updatedAt: string;
updatedById: string;
components: TFormComponent[];
tags?: IFormTag[];
status: EFormTemplateStatus;
isStandalone?: boolean;
}
interface IFormTag {
_id?: string;
id: string;
name: string;
}
/**
* Issues API interfaces
*/
interface IIssue {
_id: string;
issueNumber: string;
title: string;
description: string;
priority: 'High' | 'Medium' | 'Low';
assetNumber?: string;
workOrderNumber?: string | null;
createdBy: string;
assignee?: string;
status: 'Open' | 'In-Progress' | 'Rejected' | 'Resolved';
formTemplateId?: string;
createdAt: string;
updatedAt: string;
component?: any;
comments?: string;
isDeleted?: boolean;
updatedBy?: string;
__v?: number;
}
interface IGetIssuesQueryParams {
formTemplateId?: string;
projectId?: string;
status?: string;
priority?: string;
page?: number;
limit?: number;
}
interface IGetIssuesResponse {
Response: IIssue[];
Success: boolean;
pagination?: {
page: number;
limit: number;
total: number;
totalPages: number;
};
}
interface ICreateIssueRequest {
title: string;
workOrderNumber?: string;
assetNumber?: string;
component: any;
description: string;
formTemplateId: string;
assignee?: string;
priority: 'High' | 'Medium' | 'Low';
comments?: string;
}
interface IUpdateIssueRequest {
title: string;
description: string;
workOrderNumber?: string;
assetNumber?: string;
formTemplateId: string;
component: any;
priority: 'High' | 'Medium' | 'Low';
assignee?: string;
status: string;
comments?: string;
}
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>;
interface IComponentActionFeaturesProps {
component: TFormComponent;
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 DfFormInputProps {
id: string;
properties: ITextInputComponent$1 | INumberInputComponent$1 | IEmailInputComponent$1;
validationErrors?: IFormValidationErrors;
formValue?: string;
inputType?: TInputComponentType$1;
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 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 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 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 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 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 DfFormHeadingProps {
id: string;
properties: IHeadingComponent$1;
mode?: 'edit' | 'preview' | 'test';
className?: string;
hideLabel?: boolean;
}
declare const DfFormHeading: React.FC<DfFormHeadingProps>;
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 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$1;
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>;
declare const DfFormErrorMsg: React.FC<ErrorMessageProps>;
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$1;
mode?: 'edit' | 'preview' | 'test';
onValueChange?: (change: IFormControlChange) => void;
className?: string;
hideLabel?: boolean;
}
declare const DfFormInstruction: React.FC<DfFormInstructionProps>;
interface DfFormSectionProps {
id: string;
properties: ISectionComponent$1;
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$1) => 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 DfFormDataGridProps {
id: string;
properties: IDataGridComponent$1;
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$1) => 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$1>) => void;
onEntryAdd?: () => void;
onEntryRemove?: (entryIndex: number) => void;
}
declare const DfFormDataGrid: React.FC<DfFormDataGridProps>;
interface DfFormTableProps {
id: string;
properties: ITableComponent$1;
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$1) => 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$1>) => 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>;
declare const API_ENDPOINTS: {
KEYCLOAK_AUTH: {
LOGIN: string;
REGISTER: string;
REFRESH_TOKEN: string;
LOGOUT: string;
SEND_OTP: string;
CHECK_USER_EXIST: string;
RESET_PASSWORD: string;
};
getAllComponents: () => string;
getAllProjects: () => string;
getProjectById: (projectId: string) => string;
createProject: () => string;
updateProject: (projectId: string) => string;
deleteProject: (projectId: string) => string;
getAllFormTemplates: (projectId: string) => string;
getFormTemplate: (formTemplateId: string) => string;
createFormTemplate: () => string;
updateFormTemplate: (formTemplateId: string) => string;
deleteFormTemplate: (formTemplateId: string) => string;
getAllTags: () => string;
createForm: () => string;
submitForm: () => string;
getForms: (projectId: string, formTemplateId: string) => string;
getForm: (formId: string) => string;
updateForm: (formId: string) => string;
deleteForms: () => string;
generateForm: () => string;
getDefaultAIPrompt: () => string;
getAllIssues: () => string;
getIssueById: (issueId: string) => string;
createIssue: () => string;
updateIssue: (issueId: string) => string;
getAllFormTemplatesByUserId: (userId?: string) => string;
};
interface IReturnStatusFields {
ReturnStatus: 'S' | 'E';
ReturnMessage: string;
}
interface IApiResponse<T> {
Response: T;
Success: boolean;
}
interface IApiErrorResponse {
Response: IReturnStatusFields[];
Success: boolean;
}
interface IPagination {
total: number;
page: number;
limit: number;
}
interface IApiPaginationResponse<T> extends IApiResponse<T> {
pagination: IPagination;
}
interface IAvailableComponent {
id: string;
label: string;
type: string;
key: string;
}
interface IConditionalLogic {
action: 'show' | 'hide' | 'always';
when: 'all' | 'any';
conditions: ICondition[];
}
interface IConditionalEvaluationResult {
shouldShow: boolean;
evaluatedConditions: Array<{
condition: ICondition;
result: boolean;
componentValue: any;
}>;
}
declare class ConditionalLogicService {
private static instance;
private constructor();
static getInstance(): ConditionalLogicService;
/**
* Get all available components in the form for conditional logic
* @param formSchema - The current form schema containing all components
* @param excludeComponentId - Optional component ID to exclude from the list
* @returns Array of available components with their metadata
*/
getAvailableComponentsForConditional(formSchema: TFormComponent$1[], excludeComponentId?: string): IAvailableComponent[];
getApplicableOperators(componentType: string): string[];
validateConditionalLogic(conditional: IConditionalLogic, formSchema: TFormComponent$1[]): {
isValid: boolean;
errors: string[];
};
/**
* Evaluate whether a component should be shown based on conditional logic
* @param conditional - The conditional logic to evaluate
* @param formSchema - The current form schema
* @param formValues - Current form values (component values)
* @returns Evaluation result with details
*/
evaluateConditionalLogic(conditional: IConditionalLogic, formSchema: TFormComponent$1[], formValues: Record<string, any>): IConditionalEvaluationResult;
/**
* Get the current value of a component
* @param componentId - The component ID to get value for
* @param formSchema - The current form schema
* @param formValues - Current form values
* @returns The component value or undefined if not found
*/
private getComponentValue;
/**
* Evaluate a single condition
* @param condition - The condition to evaluate
* @param componentValue - The current value of the component
* @returns Boolean result of the condition evaluation
*/
private evaluateCondition;
/**
* Evaluate checkbox-specific conditions (checked/notChecked)
* @param componentValue - The current value of the checkbox component
* @param expectedValue - Either 'checked' or 'notChecked'
* @returns Boolean result of the checkbox condition evaluation
*/
private evaluateCheckboxCondition;
/**
* Determine if a checkbox component is checked based on its value
* @param componentValue - The current value of the checkbox component
* @returns Boolean indicating if checkbox is checked
*/
private isCheckboxChecked;
/**
* Determine final result based on 'when' condition (all/any) and action (show/hide)
* @param conditional - The conditional logic configuration
* @param evaluatedConditions - Array of evaluated conditions
* @returns Final boolean result
*/
private determineFinalResult;
private isEqual;
private isEmpty;
private contains;
private isGreaterThan;
private isLessThan;
private isGreaterThanOrEqual;
private isLessThanOrEqual;
private isValidConditionValue;
createDefaultConditionalLogic(): IConditionalLogic;
getOperatorDisplayText(operator: string): string;
getActionDisplayText(action: string): string;
getConditionalLogicSummary(conditional: IConditionalLogic, formSchema: TFormComponent$1[]): string;
private formatConditionValue;
}
declare const conditionalLogicService: ConditionalLogicService;
interface IFormDataValue {
value: string | number | string[] | boolean;
label: string;
type: string;
children?: TFormComponent$1[];
}
interface IFormData {
[componentId: string]: IFormDataValue;
}
interface IFormMetadata {
exportedAt: string;
version: string;
componentCount: number;
}
interface IFormExport {
components: TFormComponent$1[];
metadata: IFormMetadata;
}
declare class FormService {
private static instance;
private components;
private constructor();
static getInstance(): FormService;
getComponents(): TFormComponent$1[];
getComponentById(id: string): TFormComponent$1 | undefined;
addComponent(componentType: TFormComponentName): TFormComponent$1;
updateComponent(id: string, updates: Partial<TFormComponent$1>): TFormComponent$1 | null;
updateComponentProperty(id: string, section: 'basic' | 'validation' | 'styles' | 'conditional', key: string, value: string | number | boolean | string[] | object): TFormComponent$1 | null;
updateComponentOptions(id: string, options: Array<{
label: string;
value: string;
}>): TFormComponent$1 | null;
removeComponent(id: string): boolean;
duplicateComponent(id: string): TFormComponent$1 | null;
reorderComponents(componentIds: string[]): void;
validateComponent(component: TFormComponent$1): {
isValid: boolean;
errors: string[];
};
getFormData(): IFormData;
validateForm(): {
isValid: boolean;
errors: Record<string, string[]>;
};
exportForm(): IFormExport;
importForm(config: {
components: TFormComponent$1[];
}): void;
clearForm(): void;
private generateId;
private listeners;
subscribe(listener: (components: TFormComponent$1[]) => void): () => void;
private notifyListeners;
updateComponentWithNotification(id: string, updates: Partial<TFormComponent$1>): TFormComponent$1 | null;
addComponentWithNotification(componentType: TFormComponentName): TFormComponent$1;
removeComponentWithNotification(id: string): boolean;
}
declare const formService: FormService;
interface IHttpOptions {
headers?: Record<string, string>;
params?: Record<string, string>;
}
declare class HttpService {
constructor();
private handleError;
private getHeaders;
/**
* Builds HTTP query parameters from an object, excluding undefined values.
* This prevents empty parameters from being sent to the API, which can
* cause unintended filtering behavior (e.g., search= vs no search param).
*
* @param baseParams - Object containing parameter key-value pairs
* @returns URLSearchParams object with only defined values
*/
private getHttpParams;
private buildUrl;
get<T>(url: string, options?: IHttpOptions): Promise<T>;
post<TRequest, TResponse>(url: string, body?: TRequest, options?: IHttpOptions): Promise<TResponse>;
postUnauthenticated<TRequest, TResponse>(url: string, body?: TRequest, options?: IHttpOptions): Promise<TResponse>;
put<TRequest, TResponse>(url: string, body?: TRequest, options?: IHttpOptions): Promise<TResponse>;
delete<TRequest, TResponse>(url: string, body?: TRequest, options?: IHttpOptions): Promise<TResponse>;
}
declare const httpService: HttpService;
declare class IssuesApiService {
/**
* Get all issues
* @param queryParams - Query parameters for filtering issues
* @returns Promise<IIssue[]> - Array of issues
*/
getAllIssues(queryParams?: IGetIssuesQueryParams): Promise<IIssue[]>;
/**
* Get issue by ID
* @p