@syncfusion/ej2-react-form-builder 0.1.0-beta

package/src/types/FormSchema.d.ts

@@ -0,0 +1,585 @@
+import type { visualMode } from "@syncfusion/ej2-react-dropdowns";
+import type { RuleModel } from "@syncfusion/ej2-react-querybuilder";
+import type { LayoutNode, FieldProperties } from "../../Common/json-converter";
+/**
+ * Represents a pre-defined form template that can be loaded into the Form Builder.
+ * Templates can be used to create custom components and frequently used form element structures.
+ */
+export interface DefaultTemplates {
+    /** Specifies the unique identifier for the template */
+    id: string;
+    /** Specifies the display title shown in the template palette */
+    title: string;
+    /** Specifies the JSON schema payload of the template */
+    schema?: any;
+}
+/**
+ * Represents the category of components in the Form Builder
+ * @private
+ */
+export declare enum ComponentCategory {
+    /**
+     * Specifies the basic set of form components in the Form Builder
+     */
+    BASIC = "basic",
+    /**
+     * Specifies the advanced set of form components in the Form Builder
+     */
+    ADVANCED = "advanced",
+    /**
+     * Specifies the layout components in the Form Builder
+     */
+    LAYOUT = "layout"
+}
+/**
+ * Represents the components supported in the Form Builder.
+ */
+export declare enum FormComponentType {
+    /**
+     * Specifies the text box component.
+     */
+    TEXTBOX = "textbox",
+    /**
+     * Specifies the text area component.
+     */
+    TEXTAREA = "textarea",
+    /**
+     * Specifies the check box component.
+     */
+    CHECKBOX = "checkbox",
+    /**
+     * Specifies the radio button component.
+     */
+    RADIO = "radio",
+    /**
+     * Specifies the numeric text box component.
+     */
+    NUMBER = "number",
+    /**
+     * Specifies the masked text box component.
+     */
+    INPUT_MASK = "inputMask",
+    /**
+     * Specifies the dropdown list component.
+     */
+    DROPDOWN = "dropdown",
+    /**
+     * Specifies the date picker component.
+     */
+    DATE = "date",
+    /**
+     * Specifies the button component.
+     */
+    BUTTON = "button",
+    /**
+     * Specifies the check box component for multiple choice selection.
+     */
+    CHECKBOX_GROUP = "checkboxGroup",
+    /**
+     * Specifies the multiselect component for multiple choice selection.
+     */
+    MULTISELECT = "multiselect",
+    /**
+     * Specifies the date time picker component.
+     */
+    DATE_TIME = "dateTime",
+    /**
+     * Specifies the time picker component.
+     */
+    TIME = "time",
+    /**
+     * Specifies the date range picker component.
+     */
+    DATE_RANGE = "dateRange",
+    /**
+     * Specifies the switch component.
+     */
+    SWITCH = "switch",
+    /**
+     * Specifies the rating component.
+     */
+    RATING = "rating",
+    /**
+     * Specifies the splitbutton component.
+     */
+    SPLIT_BUTTON = "splitButton",
+    /**
+     * Specifies the range slider component.
+     */
+    RANGE_SLIDER = "rangeSlider",
+    /**
+     * Specifies the signature component.
+     */
+    SIGNATURE = "signature",
+    /**
+     * Specifies the image editor component.
+     */
+    IMAGE_EDITOR = "imageEditor",
+    /**
+     * Specifies the file upload component.
+     */
+    FILE_UPLOAD = "fileUpload",
+    COLOR_PICKER = "colorPicker",
+    /**
+     * Specifies the rich text editor component.
+     */
+    RICH_TEXT_EDITOR = "richTextEditor",
+    /**
+     * Specifies the data grid component.
+     */
+    DATA_GRID = "dataGrid",
+    /**
+     * Specifies the message component.
+     */
+    MESSAGE = "message",
+    /**
+     * Specifies the panel element for layouting.
+     */
+    PANEL = "panel",
+    /**
+     * Specifies the table element for layouting.
+     */
+    TABLE = "table",
+    /**
+     * Specifies the tab component for layouting.
+     */
+    TABS = "tabs",
+    /**
+     * Specifies the card element for layouting.
+     */
+    CARD = "card",
+    /**
+     * Specifies the lookup component for associating the data from other forms in the current form.
+     */
+    LOOKUP = "lookup",
+    /**
+     * Specifies the HTML element that can be rendered in the form.
+     */
+    STATIC_HTML = "staticHtml",
+    AUTO_NUMBER = "autoNumber"
+}
+/**
+ * @private
+ */
+export interface PaletteComponent {
+    /** The type identifier of the component (e.g., 'textbox', 'dropdown') */
+    type: string;
+    /** Display label shown in the palette UI */
+    label: string;
+    /** Optional CSS icon class for the component representation in the palette */
+    icon?: string;
+    /** Category grouping for the palette ('basic', 'layout', 'advanced', 'data', or 'templates') */
+    category?: 'basic' | 'layout' | 'advanced' | 'data' | 'templates';
+    /** Indicates if this palette item is a pre-defined template */
+    isTemplate?: boolean;
+    /** Template data associated with the item, if `isTemplate` is true */
+    templateData?: DefaultTemplates;
+}
+/**
+ * Minimal representation of a palette item, containing only the component type.
+ * @private
+ */
+export type PaletteItem = Pick<PaletteComponent, 'type'>;
+/**
+ * Palette configuration - allows users to control which components appear in each category
+ * @private
+ */
+export interface PaletteConfig {
+    /** List of basic components to display in the palette */
+    [ComponentCategory.BASIC]?: PaletteItem[];
+    /** List of advanced components to display in the palette */
+    [ComponentCategory.ADVANCED]?: PaletteItem[];
+    /** List of layout components to display in the palette */
+    [ComponentCategory.LAYOUT]?: PaletteItem[];
+}
+/**
+ * @private
+ */
+export type ConditionalOperator = 'equal' | 'notEqual' | 'greaterThan' | 'lessThan' | 'greaterThanOrEqual' | 'lessThanOrEqual' | 'in' | 'notIn' | 'contains' | 'notContains';
+/**
+ * @private
+ */
+export interface ConditionalRule {
+    field: string;
+    operator: ConditionalOperator;
+    value: any;
+}
+/**
+ * @private
+ */
+export interface CompositeConditionalRule {
+    condition: 'and' | 'or';
+    rules: (ConditionalRule | CompositeConditionalRule)[];
+}
+/**
+ * @private
+ */
+export type ConditionType = ConditionalRule | CompositeConditionalRule;
+/**
+ * @private
+ */
+export interface DataSourceCollectorProps {
+    value: string[] | {
+        type: 'url' | 'raw' | 'options' | 'lookup';
+        url?: string;
+        headers?: HeaderPair[];
+        data?: string[];
+        search?: SearchConfig;
+        sort?: SortConfig;
+        filters?: FilterConfig[];
+        adaptorType?: string;
+        take?: number;
+        skip?: number;
+        dataPath?: string;
+        formName?: any;
+    };
+    onChange: (data: string[] | any) => void;
+    type?: string;
+    datakey?: string;
+    isAccordion?: boolean;
+}
+/**
+ * @private
+ */
+export interface HeaderPair {
+    key: string;
+    value: string;
+}
+/**
+ * @private
+ */
+export interface SearchConfig {
+    enabled: boolean;
+    fields: string[];
+    key?: string;
+}
+/**
+ * @private
+ */
+export interface SortConfig {
+    enabled: boolean;
+    field: string;
+    direction: 'ascending' | 'descending';
+}
+/**
+ * @private
+ */
+export interface FilterConfig {
+    field: string;
+    operator: string;
+    value: any;
+}
+/**
+ * @private
+ */
+export interface ChoiceBasedFieldRule {
+    primaryFieldId: string;
+    choiceMapping: Record<string, string[]>;
+    showAllWhenNotMapped?: boolean;
+}
+/**
+ * @private
+ */
+export interface ConditionalDataRule {
+    condition: ConditionType;
+    dataSource: DataSourceCollectorProps['value'];
+    columns?: GridColumn[];
+    includeColumns?: boolean;
+}
+/**
+ * @private
+ */
+export interface FormComponentConditions {
+    visibleWhen?: ConditionType;
+    hideWhen?: ConditionType;
+    readOnlyWhen?: ConditionType;
+    disabledWhen?: ConditionType;
+    requiredWhen?: ConditionType;
+    setValueWhen?: {
+        condition: ConditionType;
+        value: any;
+    };
+    choiceBasedField?: ChoiceBasedFieldRule;
+    conditionalData?: ConditionalDataRule[];
+}
+/**
+ * @private
+ */
+export interface MinMaxRangeConfig {
+    minMode?: 'value' | 'field';
+    minValue?: number | string | {
+        field: string;
+    };
+    maxMode?: 'value' | 'field';
+    maxValue?: number | string | {
+        field: string;
+    };
+}
+/**
+ * @private
+ */
+export interface LookupConfig {
+    formName: string;
+    field: string;
+}
+/**
+ * @private
+ */
+export interface CustomValidationRule {
+    condition?: RuleModel;
+    expression: string;
+}
+/**
+ * @private
+ */
+export interface FormComponent {
+    id: string;
+    type: 'textbox' | 'textarea' | 'number' | 'checkbox' | 'checkboxGroup' | 'radio' | 'dropdown' | 'multiselect' | 'button' | 'date' | 'dateTime' | 'time' | 'dateRange' | 'switch' | 'signature' | 'rating' | 'imageEditor' | 'fileUpload' | 'rangeSlider' | 'colorPicker' | 'inputMask' | 'message' | 'panel' | 'table' | 'tabs' | 'dataGrid' | 'staticHtml' | 'card' | 'splitButton' | 'richTextEditor' | 'autoNumber' | 'lookup';
+    textboxType?: string;
+    label: string;
+    name: string;
+    description?: string | undefined;
+    prefix?: string | undefined;
+    suffix?: string | undefined;
+    hideBorders?: boolean;
+    placeholder?: string;
+    defaultValue?: any;
+    disabled?: boolean;
+    visible?: boolean;
+    tooltip?: string;
+    hideLabel?: boolean;
+    cssClass?: string;
+    multiline?: boolean;
+    showClearButton?: boolean;
+    showCloseIcon?: boolean;
+    showIcon?: boolean;
+    variant?: string;
+    severity?: string;
+    content?: string;
+    showTodayButton?: boolean;
+    htmlAttributes?: Record<string, any>;
+    labelPosition?: 'top' | 'bottom' | 'left' | 'right';
+    position?: 'center' | 'left' | 'right';
+    fieldLabelPosition?: 'After' | 'Before';
+    labelWidth?: string;
+    floatLabelType?: 'Never' | 'Always' | 'Auto';
+    readOnly?: boolean;
+    autocomplete?: boolean;
+    cols?: number;
+    textareaRows?: number;
+    checked?: boolean;
+    indeterminate?: boolean;
+    enableHtmlSanitizer?: boolean;
+    offLabel?: string;
+    onLabel?: string;
+    buttonType?: 'button' | 'submit';
+    iconCss?: string;
+    iconPosition?: 'Left' | 'Right';
+    style?: string;
+    buttonsGroups?: ButtonDefinition[] | [];
+    gap?: string;
+    decimals?: number;
+    currency?: string;
+    format?: string;
+    numberFormat?: string;
+    allowReset?: boolean;
+    itemsCount?: number;
+    precision?: number | string;
+    showRatingTooltip?: boolean;
+    showRatingLabel?: boolean;
+    ratingLabelPosition?: 'top' | 'bottom' | 'left' | 'right';
+    height?: string | number;
+    width?: string | number;
+    backgroundColor?: string;
+    strokeColor?: string;
+    maximumStrokeWidth?: number;
+    minimumStrokeWidth?: number;
+    velocity?: number;
+    enableOpacity?: boolean;
+    showNoColor?: boolean;
+    showButtons?: boolean;
+    showRecentColors?: boolean;
+    orientation?: 'Horizontal' | 'Vertical';
+    allowExtensions?: string;
+    saveUrl?: string;
+    removeUrl?: string;
+    buttons?: {};
+    allowMultiple?: boolean;
+    showFileList?: boolean;
+    calendarMode?: string;
+    dayHeaderFormat?: string;
+    depth?: string;
+    firstDayOfWeek?: number;
+    start?: string;
+    allowEdit?: boolean;
+    enabled?: boolean;
+    timeFormat?: string;
+    step?: number;
+    startDate?: string;
+    endDate?: string;
+    separator?: string;
+    mask?: string;
+    customCharacters?: Record<string, string>;
+    promptChar?: string;
+    allowCustomValue?: boolean;
+    addTagOnBlur?: boolean;
+    delimiterChar?: string;
+    visualMode?: visualMode;
+    showSelectAll?: boolean;
+    selectAllText?: string;
+    unSelectAllText?: string;
+    showDropDownIcon?: boolean;
+    validateOn?: 'Change' | 'Blur';
+    pageSize?: number;
+    size?: string;
+    allowPaging?: boolean;
+    allowAdding?: boolean;
+    allowEditing?: boolean;
+    allowFiltering?: boolean;
+    allowDeleting?: boolean;
+    dataSource?: [];
+    required?: boolean;
+    minLength?: number;
+    maxLength?: number;
+    min?: number;
+    max?: number;
+    minDate?: string;
+    maxDate?: string;
+    minValue?: number;
+    maxValue?: number;
+    minMaxRange?: MinMaxRangeConfig;
+    minMaxTimeRange?: MinMaxRangeConfig;
+    minTime?: string;
+    maxTime?: string;
+    regex?: RegExp;
+    validationMessage?: string;
+    options?: string[];
+    checkboxLabelPosition?: 'Before' | 'After';
+    layoutDirection?: 'row' | 'column';
+    tabOptions?: string[];
+    fields?: Record<string, any>;
+    enableVirtualization?: boolean;
+    popupHeight?: string;
+    popupWidth?: string;
+    children?: FormComponent[];
+    rows?: number;
+    columns?: number;
+    messageType?: 'info' | 'success' | 'warning' | 'error';
+    messageContent?: string;
+    legend?: string;
+    cardTitle?: string;
+    cardSubtitle?: string;
+    tabItems?: Array<{
+        header: string;
+        content?: FormComponent[];
+    }>;
+    tableCells?: FormComponent[][][];
+    columnWidths?: {
+        widths: number[];
+    };
+    lookUpConfig?: LookupConfig;
+    enableImportFromWord?: {
+        enabled: boolean;
+        serviceUrl: string;
+    };
+    enableExportToWord?: {
+        enabled: boolean;
+        serviceUrl: string;
+    };
+    enableExportToPdf?: {
+        enabled: boolean;
+        serviceUrl: string;
+    };
+    parentPath?: string;
+    startIndex?: number;
+    conditions?: FormComponentConditions;
+    properties?: Record<string, any>;
+    expressionValue?: string;
+    customValidation?: CustomValidationRule[];
+    _configured?: boolean;
+}
+/**
+ * @private
+ */
+export interface GridColumn {
+    field: string;
+    headerText: string;
+    type?: 'string' | 'number' | 'date' | 'boolean';
+    isPrimaryKey?: boolean;
+    allowEditing?: boolean;
+    width?: string | number;
+    textAlign?: 'Left' | 'Right' | 'Center';
+    format?: string;
+    editType?: 'textbox' | 'numericedit' | 'datepickeredit' | 'dropdownedit' | 'checkbox' | 'booleanedit';
+    edit?: {
+        params?: Record<string, any>;
+    };
+    validationRules?: {
+        required?: boolean;
+        min?: number;
+        max?: number;
+        minLength?: number;
+        maxLength?: number;
+    };
+    expression?: string;
+    customValidation?: CustomValidationRule[];
+}
+/**
+ * @private
+ */
+export interface GridComponentSchema extends Omit<FormComponent, 'columns' | 'dataSource' | 'selectionType'> {
+    type: 'dataGrid';
+    columns: GridColumn[];
+    dataSource?: Record<string, any>[];
+    allowPaging?: boolean;
+    pageSize?: number;
+    height?: string | number;
+    width?: string | number;
+    allowAdding?: boolean;
+    allowEditing?: boolean;
+    allowDeleting?: boolean;
+    locale?: string;
+    toolbar?: ('Add' | 'Edit' | 'Delete' | 'Update' | 'Cancel' | 'Search')[];
+    _currentData?: Record<string, any>[];
+}
+/**
+ * @private
+ */
+export interface FormSettings {
+    name?: string;
+    width?: string;
+    validate?: boolean;
+    hideLabel?: boolean;
+    size?: string;
+    floatLabelType?: string;
+}
+/**
+ * Represents the JSON schema format that is used to render in the Form Renderer and exported from the Form Builder components.
+ */
+export interface Schema {
+    /** Represents the version of the schema  (e.g., '0.1.0') */
+    version: string;
+    properties: Record<string, FieldProperties>;
+    theme?: string;
+    layout: LayoutNode[];
+    settings?: any;
+}
+/**
+ * @private
+ */
+export interface FormSchema {
+    version: string;
+    components: FormComponent[];
+    settings?: FormSettings;
+}
+/**
+ * @private
+ */
+export interface ButtonDefinition {
+    label: string;
+    type?: 'submit' | 'reset' | 'button';
+    style?: 'primary' | 'flat' | 'information' | 'error' | 'success' | 'warning';
+    iconCss?: string;
+    iconPosition?: 'Left' | 'Right';
+    disabled?: boolean;
+}