extended-dynamic-forms 0.2.0 → 0.3.0

package/dist/style.css

@@ -1 +1 @@
-html,body{width:100%;height:100%}input::-ms-clear,input::-ms-reveal{display:none}*,*:before,*:after{box-sizing:border-box}html{font-family:sans-serif;line-height:1.15;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;-ms-overflow-style:scrollbar;-webkit-tap-highlight-color:rgba(0,0,0,0)}@-ms-viewport{width:device-width}body{margin:0}[tabindex="-1"]:focus{outline:none}hr{box-sizing:content-box;height:0;overflow:visible}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:.5em;font-weight:500}p{margin-top:0;margin-bottom:1em}abbr[title],abbr[data-original-title]{-webkit-text-decoration:underline dotted;text-decoration:underline;text-decoration:underline dotted;border-bottom:0;cursor:help}address{margin-bottom:1em;font-style:normal;line-height:inherit}input[type=text],input[type=password],input[type=number],textarea{-webkit-appearance:none}ol,ul,dl{margin-top:0;margin-bottom:1em}ol ol,ul ul,ol ul,ul ol{margin-bottom:0}dt{font-weight:500}dd{margin-bottom:.5em;margin-left:0}blockquote{margin:0 0 1em}dfn{font-style:italic}b,strong{font-weight:bolder}small{font-size:80%}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}pre,code,kbd,samp{font-size:1em;font-family:SFMono-Regular,Consolas,Liberation Mono,Menlo,Courier,monospace}pre{margin-top:0;margin-bottom:1em;overflow:auto}figure{margin:0 0 1em}img{vertical-align:middle;border-style:none}a,area,button,[role=button],input:not([type=range]),label,select,summary,textarea{touch-action:manipulation}table{border-collapse:collapse}caption{padding-top:.75em;padding-bottom:.3em;text-align:left;caption-side:bottom}input,button,select,optgroup,textarea{margin:0;color:inherit;font-size:inherit;font-family:inherit;line-height:inherit}button,input{overflow:visible}button,select{text-transform:none}button,html [type=button],[type=reset],[type=submit]{-webkit-appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{padding:0;border-style:none}input[type=radio],input[type=checkbox]{box-sizing:border-box;padding:0}input[type=date],input[type=time],input[type=datetime-local],input[type=month]{-webkit-appearance:listbox}textarea{overflow:auto;resize:vertical}fieldset{min-width:0;margin:0;padding:0;border:0}legend{display:block;width:100%;max-width:100%;margin-bottom:.5em;padding:0;color:inherit;font-size:1.5em;line-height:inherit;white-space:normal}progress{vertical-align:baseline}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{outline-offset:-2px;-webkit-appearance:none}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{font:inherit;-webkit-appearance:button}output{display:inline-block}summary{display:list-item}template{display:none}[hidden]{display:none!important}mark{padding:.2em;background-color:#feffe6}.rjsf-form{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif}.vertical-form-item .ant-form-item-label{padding-bottom:0!important;margin-bottom:0}.vertical-form-item .ant-form-item-label>label{margin-bottom:0}.ant-form-item-has-error .ant-form-item-label>label{color:#ff4d4f}.ant-form-item-required:before{display:inline-block;margin-right:4px;color:#ff4d4f;font-size:14px;font-family:SimSun,sans-serif;line-height:1;content:"*"}
+html,body{width:100%;height:100%}input::-ms-clear,input::-ms-reveal{display:none}*,*:before,*:after{box-sizing:border-box}html{font-family:sans-serif;line-height:1.15;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;-ms-overflow-style:scrollbar;-webkit-tap-highlight-color:rgba(0,0,0,0)}@-ms-viewport{width:device-width}body{margin:0}[tabindex="-1"]:focus{outline:none}hr{box-sizing:content-box;height:0;overflow:visible}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:.5em;font-weight:500}p{margin-top:0;margin-bottom:1em}abbr[title],abbr[data-original-title]{-webkit-text-decoration:underline dotted;text-decoration:underline;text-decoration:underline dotted;border-bottom:0;cursor:help}address{margin-bottom:1em;font-style:normal;line-height:inherit}input[type=text],input[type=password],input[type=number],textarea{-webkit-appearance:none}ol,ul,dl{margin-top:0;margin-bottom:1em}ol ol,ul ul,ol ul,ul ol{margin-bottom:0}dt{font-weight:500}dd{margin-bottom:.5em;margin-left:0}blockquote{margin:0 0 1em}dfn{font-style:italic}b,strong{font-weight:bolder}small{font-size:80%}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}pre,code,kbd,samp{font-size:1em;font-family:SFMono-Regular,Consolas,Liberation Mono,Menlo,Courier,monospace}pre{margin-top:0;margin-bottom:1em;overflow:auto}figure{margin:0 0 1em}img{vertical-align:middle;border-style:none}a,area,button,[role=button],input:not([type=range]),label,select,summary,textarea{touch-action:manipulation}table{border-collapse:collapse}caption{padding-top:.75em;padding-bottom:.3em;text-align:left;caption-side:bottom}input,button,select,optgroup,textarea{margin:0;color:inherit;font-size:inherit;font-family:inherit;line-height:inherit}button,input{overflow:visible}button,select{text-transform:none}button,html [type=button],[type=reset],[type=submit]{-webkit-appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{padding:0;border-style:none}input[type=radio],input[type=checkbox]{box-sizing:border-box;padding:0}input[type=date],input[type=time],input[type=datetime-local],input[type=month]{-webkit-appearance:listbox}textarea{overflow:auto;resize:vertical}fieldset{min-width:0;margin:0;padding:0;border:0}legend{display:block;width:100%;max-width:100%;margin-bottom:.5em;padding:0;color:inherit;font-size:1.5em;line-height:inherit;white-space:normal}progress{vertical-align:baseline}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{outline-offset:-2px;-webkit-appearance:none}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{font:inherit;-webkit-appearance:button}output{display:inline-block}summary{display:list-item}template{display:none}[hidden]{display:none!important}mark{padding:.2em;background-color:#feffe6}.rjsf-form{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif}.vertical-form-item .ant-form-item-label{padding-bottom:0!important;margin-bottom:0}.vertical-form-item .ant-form-item-label>label{margin-bottom:0}.ant-form-item-has-error .ant-form-item-label>label{color:#ff4d4f}.ant-form-item-required:before{display:inline-block;margin-right:4px;color:#ff4d4f;font-size:14px;font-family:SimSun,sans-serif;line-height:1;content:"*"}.edf-choice-widget{position:relative;width:100%}.edf-choice-widget--small{font-size:12px}.edf-choice-widget--middle{font-size:14px}.edf-choice-widget--large{font-size:16px}.edf-choice-widget--disabled{opacity:.6;cursor:not-allowed}.edf-choice-widget--readonly{pointer-events:none}.edf-choice-widget__loading{display:flex;align-items:center;gap:8px;padding:8px;color:#666}.edf-choice-widget__loading-spinner{display:inline-block;width:16px;height:16px;border:2px solid #f3f3f3;border-top:2px solid #1890ff;border-radius:50%;animation:edf-spin 1s linear infinite}.edf-choice-widget__loading-message{font-size:14px}.edf-choice-widget__loading-progress{width:100%;height:4px;background-color:#f0f0f0;border-radius:2px;overflow:hidden;margin-top:4px}.edf-choice-widget__loading-progress-bar{height:100%;background-color:#1890ff;transition:width .3s ease}.edf-choice-widget__error{display:flex;align-items:center;gap:8px;padding:8px;color:#ff4d4f;background-color:#fff2f0;border:1px solid #ffccc7;border-radius:4px;margin-top:4px}.edf-choice-widget__error-icon{font-size:16px;flex-shrink:0}.edf-choice-widget__error-message{font-size:14px;flex:1}.edf-choice-widget__error-hint{font-size:12px;color:#8c8c8c;font-style:italic}.edf-choice-widget__empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;color:#8c8c8c;text-align:center}.edf-choice-widget__empty-icon{font-size:32px;margin-bottom:8px;opacity:.5}.edf-choice-widget__empty-message{font-size:14px}@keyframes edf-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.edf-choice-widget--dropdown .edf-choice-widget__wrapper{position:relative}.edf-choice-widget--dropdown .edf-choice-widget__loading-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background-color:#ffffffe6;display:flex;align-items:center;justify-content:center;z-index:10;border-radius:4px}.edf-choice-widget--dropdown .edf-choice-widget__option-icon{margin-right:4px;display:inline-flex;align-items:center}.edf-choice-widget--dropdown .edf-choice-widget__option-label{flex:1}.edf-choice-widget--dropdown .edf-choice-widget__option-description{display:block;font-size:12px;color:#8c8c8c;margin-top:2px;white-space:normal}.edf-choice-widget--dropdown.has-error .ant-select-selector{border-color:#ff4d4f!important}.edf-choice-widget--dropdown.has-error .ant-select-focused .ant-select-selector{border-color:#ff7875!important;box-shadow:0 0 0 2px #ff4d4f33}.edf-choice-widget--radio .edf-choice-widget__wrapper{position:relative}.edf-choice-widget--radio .edf-choice-widget__radio-content{display:flex;flex-direction:column;gap:2px}.edf-choice-widget--radio .edf-choice-widget__radio-main{display:flex;align-items:center;gap:4px}.edf-choice-widget--radio .edf-choice-widget__option-icon{display:inline-flex;align-items:center;font-size:16px}.edf-choice-widget--radio .edf-choice-widget__option-label{font-weight:500}.edf-choice-widget--radio .edf-choice-widget__option-description{margin-left:24px;font-size:12px;color:#8c8c8c;line-height:1.5}.edf-choice-widget--radio .edf-choice-widget__radio-group-label{font-weight:600;color:#595959;margin-bottom:8px;margin-top:16px;padding-bottom:4px;border-bottom:1px solid #f0f0f0}.edf-choice-widget--radio .edf-choice-widget__radio-group-label:first-child{margin-top:0}.edf-choice-widget--radio .edf-choice-widget__radio-divider{height:1px;background-color:#f0f0f0;margin:12px 0}.edf-choice-widget--radio.has-error .ant-radio-group{border:1px solid #ff4d4f;border-radius:4px;padding:8px}.edf-choice-widget--radio .ant-radio-wrapper{margin-bottom:8px;display:flex;align-items:flex-start}.edf-choice-widget--radio .ant-radio-wrapper:last-child{margin-bottom:0}.edf-choice-widget--radio .ant-radio-wrapper-disabled{cursor:not-allowed;opacity:.6}.edf-choice-widget--radio .ant-space-horizontal .ant-radio-wrapper{margin-bottom:0;margin-right:16px}.edf-choice-widget--radio .ant-space-horizontal .ant-radio-wrapper:last-child{margin-right:0}

package/dist/types/index.d.ts

@@ -1,6 +1,7 @@
 import { FormProps } from '@rjsf/core';
 import { RJSFSchema, UiSchema } from '@rjsf/utils';
 
+export type WebhookEventType = 'focus' | 'blur' | 'change' | 'submit' | 'stepChange' | 'validationError';
 export interface FormEventHandlers {
     beforeSubmit?: (data: any) => Promise<any> | any;
     afterSubmit?: (data: any) => Promise<void> | void;
@@ -20,7 +21,7 @@ export interface WebhookConfig {
     url: string;
     method?: 'POST' | 'PUT' | 'PATCH';
     headers?: Record<string, string>;
-    events?: ('focus' | 'blur' | 'change')[];
+    events?: WebhookEventType[];
     debounceMs?: number;
     retries?: number;
     timeout?: number;
@@ -34,6 +35,10 @@ export interface ExtendedFormProps extends Omit<FormProps, 'validator'>, FormEve
     schema: RJSFSchema;
     uiSchema?: UiSchema;
     webhooks?: WebhookConfig[];
+    eventHub?: any;
+    onWebhookStart?: (webhook: WebhookConfig, event: any) => void;
+    onWebhookComplete?: (webhook: WebhookConfig, event: any, response: any) => void;
+    onWebhookError?: (webhook: WebhookConfig, event: any, error: Error) => void;
 }
 export interface CustomWidgetProps {
     label?: string;

package/dist/utils/fieldChangeDetector.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Utility for detecting field-level changes in form data
+ */
+export interface FieldChange {
+    fieldId: string;
+    fieldPath: string[];
+    oldValue: any;
+    newValue: any;
+}
+/**
+ * Deep comparison to find changed fields between two form data objects
+ */
+export declare function detectFieldChanges(oldData: any, newData: any, parentPath?: string[]): FieldChange[];
+/**
+ * Convert field path to RJSF field ID format
+ * RJSF uses a specific format like "root_fieldName_0_subField"
+ */
+export declare function pathToFieldId(path: string[], idPrefix?: string): string;
+/**
+ * Extract schema for a specific field path
+ */
+export declare function getFieldSchema(schema: any, path: string[]): any | undefined;

package/dist/widgets/base/index.d.ts

@@ -0,0 +1,2 @@
+export * from './types';
+export * from './utils';

package/dist/widgets/base/types.d.ts

@@ -0,0 +1,135 @@
+import { WidgetProps } from '@rjsf/utils';
+
+/**
+ * Base interface for all enhanced widgets
+ */
+export interface EnhancedWidgetProps extends WidgetProps {
+}
+/**
+ * Ant Design Input component options that can be configured through uiSchema
+ */
+export interface AntInputOptions {
+    size?: 'large' | 'middle' | 'small';
+    placeholder?: string;
+    prefix?: React.ReactNode;
+    suffix?: React.ReactNode;
+    allowClear?: boolean;
+    bordered?: boolean;
+    variant?: 'outlined' | 'borderless' | 'filled';
+    defaultValue?: string;
+    maxLength?: number;
+    showCount?: boolean | {
+        formatter: (info: {
+            value: string;
+            count: number;
+            maxLength?: number;
+        }) => React.ReactNode;
+    };
+    status?: 'error' | 'warning';
+    style?: React.CSSProperties;
+    className?: string;
+    addonBefore?: React.ReactNode;
+    addonAfter?: React.ReactNode;
+    emptyValue?: any;
+}
+/**
+ * Ant Design TextArea component options
+ */
+export interface AntTextAreaOptions extends AntInputOptions {
+    rows?: number;
+    autoSize?: boolean | {
+        minRows?: number;
+        maxRows?: number;
+    };
+    showCount?: boolean | {
+        formatter: (info: {
+            value: string;
+            count: number;
+            maxLength?: number;
+        }) => React.ReactNode;
+    };
+}
+/**
+ * Ant Design DatePicker component options
+ */
+export interface AntDatePickerOptions {
+    format?: string | string[];
+    picker?: 'date' | 'week' | 'month' | 'quarter' | 'year';
+    placeholder?: string | [string, string];
+    placement?: 'bottomLeft' | 'bottomRight' | 'topLeft' | 'topRight';
+    showTime?: boolean | object;
+    showNow?: boolean;
+    showToday?: boolean;
+    disabledDate?: (currentDate: any) => boolean;
+    size?: 'large' | 'middle' | 'small';
+    bordered?: boolean;
+    variant?: 'outlined' | 'borderless' | 'filled';
+    suffixIcon?: React.ReactNode;
+    style?: React.CSSProperties;
+    className?: string;
+    status?: 'error' | 'warning';
+    emptyValue?: any;
+}
+/**
+ * Ant Design InputNumber component options
+ */
+export interface AntInputNumberOptions {
+    size?: 'large' | 'middle' | 'small';
+    placeholder?: string;
+    prefix?: React.ReactNode;
+    min?: number;
+    max?: number;
+    step?: number;
+    precision?: number;
+    decimalSeparator?: string;
+    formatter?: (value: number | string | undefined, info: {
+        userTyping: boolean;
+        input: string;
+    }) => string;
+    parser?: (value: string | undefined) => number;
+    keyboard?: boolean;
+    controls?: boolean | {
+        upIcon?: React.ReactNode;
+        downIcon?: React.ReactNode;
+    };
+    bordered?: boolean;
+    variant?: 'outlined' | 'borderless' | 'filled';
+    style?: React.CSSProperties;
+    className?: string;
+    status?: 'error' | 'warning';
+    addonBefore?: React.ReactNode;
+    addonAfter?: React.ReactNode;
+    emptyValue?: any;
+}
+/**
+ * Type mapping for widget options
+ */
+export type WidgetOptionsMap = {
+    text: AntInputOptions;
+    textarea: AntTextAreaOptions;
+    password: AntInputOptions;
+    email: AntInputOptions;
+    tel: AntInputOptions;
+    url: AntInputOptions;
+    number: AntInputNumberOptions;
+    date: AntDatePickerOptions;
+    'datetime-local': AntDatePickerOptions;
+    file: any;
+};
+/**
+ * Common props passed to widgets from RJSF that we use frequently
+ */
+export interface CommonWidgetProps {
+    id: string;
+    value: any;
+    disabled?: boolean;
+    readonly?: boolean;
+    required?: boolean;
+    placeholder?: string;
+    onChange: (value: any) => void;
+    onBlur?: (id: string, value: any) => void;
+    onFocus?: (id: string, value: any) => void;
+    options?: any;
+    rawErrors?: string[];
+    schema: any;
+}

package/dist/widgets/base/utils.d.ts

@@ -0,0 +1,63 @@
+import { InputProps, TextAreaProps } from 'antd/es/input';
+import { DatePickerProps } from 'antd/es/date-picker';
+import { InputNumberProps } from 'antd/es/input-number';
+import { AntInputOptions, AntTextAreaOptions, AntDatePickerOptions, AntInputNumberOptions } from './types';
+
+/**
+ * Extract Ant Design Input props from uiSchema options
+ */
+export declare const getAntInputProps: (options?: AntInputOptions) => Partial<InputProps>;
+/**
+ * Extract Ant Design TextArea props from uiSchema options
+ */
+export declare const getAntTextAreaProps: (options?: AntTextAreaOptions) => Partial<TextAreaProps>;
+/**
+ * Extract Ant Design DatePicker props from uiSchema options
+ */
+export declare const getAntDatePickerProps: (options?: AntDatePickerOptions) => Partial<DatePickerProps>;
+/**
+ * Extract Ant Design InputNumber props from uiSchema options
+ */
+export declare const getAntInputNumberProps: (options?: AntInputNumberOptions) => Partial<InputNumberProps>;
+/**
+ * Check if the widget has validation errors
+ */
+export declare const hasError: (rawErrors?: string[]) => boolean;
+/**
+ * Get the appropriate empty value based on options
+ */
+export declare const getEmptyValue: (options: any, defaultValue?: any) => any;
+/**
+ * Get value or empty value for controlled components
+ */
+export declare const getValue: (value: any, options: any, defaultValue?: any) => any;
+/**
+ * Handle change event and return the appropriate value
+ */
+export declare const handleChangeValue: (value: any, options: any, defaultEmptyValue?: any) => any;
+/**
+ * Common props for Ant Design form components
+ */
+export declare const getCommonAntProps: (id: string, hasError: boolean, disabled?: boolean, readonly?: boolean) => {
+    id: string;
+    status: "error" | undefined;
+    disabled: boolean | undefined;
+};
+/**
+ * Extract numeric constraints from JSON schema
+ */
+export declare const getNumericConstraints: (schema?: any) => {
+    min: any;
+    max: any;
+    step: any;
+};
+/**
+ * Merge options from different sources (schema, uiSchema)
+ * Priority: uiSchema options > schema constraints > defaults
+ */
+export declare const mergeOptions: (schemaOptions?: any, uiSchemaOptions?: any, defaults?: any) => any;
+/**
+ * Convert various value types to boolean
+ * Handles string "true"/"false" conversions properly
+ */
+export declare const toBooleanValue: (value: any, defaultValue?: boolean) => boolean;

package/dist/widgets/choice/ChoiceWidget.d.ts

@@ -0,0 +1,30 @@
+import { default as React } from 'react';
+import { ChoiceWidgetProps } from './ChoiceWidget.types';
+
+/**
+ * Main Choice Widget component with error boundary
+ *
+ * Provides comprehensive error handling and graceful fallback mechanisms:
+ * - Error boundary catches and handles all rendering errors
+ * - Fallback to basic HTML select on critical failures
+ * - Retry mechanism with configurable limits
+ * - Error reporting to FormEventHub
+ * - Development-friendly error details
+ * - Accessibility-compliant error announcements
+ *
+ * Key features:
+ * - Full RJSF WidgetProps compliance
+ * - Automatic presenter strategy selection
+ * - Comprehensive error boundary implementation
+ * - Event system integration via FormEventHub
+ * - Performance optimization (<200ms render target)
+ * - WCAG 2.1 AA accessibility compliance
+ * - Loading and error state management
+ * - Backward compatibility preservation
+ *
+ * @param props - RJSF-compatible widget props with Choice Widget extensions
+ * @returns Fully-featured choice widget with error boundaries
+ */
+export declare const ChoiceWidget: React.FC<ChoiceWidgetProps>;
+export type { ChoiceWidgetProps, ChoiceWidgetConfig, ChoiceWidgetState, ChoiceOption, PresentationMode, ErrorState, LoadingState, } from './ChoiceWidget.types';
+export default ChoiceWidget;