extended-dynamic-forms 0.1.17 → 0.1.18

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (59) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +835 -393
  3. package/dist/extended-dynamic-forms.standalone.js +882 -0
  4. package/dist/style.css +1 -1
  5. package/examples/conditional-v2-example.tsx +64 -0
  6. package/examples/dynamic-array-items-example.tsx +211 -0
  7. package/examples/form-devtools-example.tsx +386 -0
  8. package/examples/global-ui-rules-example.tsx +356 -0
  9. package/examples/vanilla-js/README.md +212 -0
  10. package/examples/vanilla-js/basic-form.html +142 -0
  11. package/examples/vanilla-js/conditional-form.html +159 -0
  12. package/examples/vanilla-js/wizard-form.html +185 -0
  13. package/package.json +40 -47
  14. package/dist/ExtendedForm.d.ts +0 -4
  15. package/dist/WizardForm.d.ts +0 -26
  16. package/dist/components/arrays/ArrayFieldItemTemplate.d.ts +0 -3
  17. package/dist/components/arrays/ArrayFieldTemplate.d.ts +0 -3
  18. package/dist/components/arrays/index.d.ts +0 -2
  19. package/dist/components/fields/AddressField.d.ts +0 -3
  20. package/dist/components/fields/CurrencyField.d.ts +0 -4
  21. package/dist/components/fields/PhoneField.d.ts +0 -4
  22. package/dist/components/index.d.ts +0 -24
  23. package/dist/components/templates/FieldTemplate.d.ts +0 -4
  24. package/dist/components/templates/SubmitButton.d.ts +0 -4
  25. package/dist/components/templates/index.d.ts +0 -2
  26. package/dist/conditionals/ConditionalActions.d.ts +0 -13
  27. package/dist/conditionals/ConditionalContext.d.ts +0 -32
  28. package/dist/conditionals/DynamicArrayConditionalEngine.d.ts +0 -77
  29. package/dist/conditionals/SimpleConditionalEngine.d.ts +0 -41
  30. package/dist/conditionals/SmartJsonRulesTransformer.d.ts +0 -10
  31. package/dist/conditionals/index.d.ts +0 -7
  32. package/dist/events/FormEventContext.d.ts +0 -20
  33. package/dist/events/FormEventHub.d.ts +0 -27
  34. package/dist/events/FormEventManager.d.ts +0 -10
  35. package/dist/events/index.d.ts +0 -4
  36. package/dist/index.d.ts +0 -14
  37. package/dist/index.es.js +0 -44459
  38. package/dist/index.umd.js +0 -399
  39. package/dist/layouts/index.d.ts +0 -2
  40. package/dist/layouts/wizard/ProgressIndicator.d.ts +0 -10
  41. package/dist/layouts/wizard/StepNavigation.d.ts +0 -11
  42. package/dist/layouts/wizard/WizardLayout.d.ts +0 -31
  43. package/dist/layouts/wizard/WizardNavigation.d.ts +0 -16
  44. package/dist/layouts/wizard/WizardObjectFieldTemplate.d.ts +0 -4
  45. package/dist/layouts/wizard/WizardSectionTemplate.d.ts +0 -11
  46. package/dist/layouts/wizard/index.d.ts +0 -7
  47. package/dist/types/index.d.ts +0 -88
  48. package/dist/utils/formDataUtils.d.ts +0 -22
  49. package/dist/utils/index.d.ts +0 -4
  50. package/dist/utils/schemaUtils.d.ts +0 -24
  51. package/dist/utils/validationUtils.d.ts +0 -26
  52. package/dist/vanilla-wrapper.d.ts +0 -33
  53. package/dist/widgets/date/DateWidget.d.ts +0 -4
  54. package/dist/widgets/enhanced/EnhancedWidgets.d.ts +0 -36
  55. package/dist/widgets/file/FileWidget.d.ts +0 -4
  56. package/dist/widgets/index.d.ts +0 -33
  57. package/dist/widgets/input/ColorWidget.d.ts +0 -4
  58. package/dist/widgets/input/RangeWidget.d.ts +0 -4
  59. package/dist/widgets/input/RatingWidget.d.ts +0 -4
@@ -1,2 +0,0 @@
1
- export { WizardLayout, ProgressIndicator, StepNavigation, WizardNavigation, WizardObjectFieldTemplate, WizardSectionTemplate, } from './wizard';
2
- export type { WizardStep } from './wizard';
@@ -1,10 +0,0 @@
1
- import { default as React } from 'react';
2
-
3
- export interface ProgressIndicatorProps {
4
- currentStep: number;
5
- totalSteps: number;
6
- progressPercentage: number;
7
- className?: string;
8
- style?: React.CSSProperties;
9
- }
10
- export declare const ProgressIndicator: React.FC<ProgressIndicatorProps>;
@@ -1,11 +0,0 @@
1
- import { default as React } from 'react';
2
- import { WizardStep } from './WizardLayout';
3
-
4
- export interface StepNavigationProps {
5
- steps: WizardStep[];
6
- currentStep: number;
7
- onStepChange?: (stepIndex: number) => void;
8
- className?: string;
9
- style?: React.CSSProperties;
10
- }
11
- export declare const StepNavigation: React.FC<StepNavigationProps>;
@@ -1,31 +0,0 @@
1
- import { default as React } from 'react';
2
-
3
- export interface WizardStep {
4
- id: string;
5
- title: string;
6
- description?: string;
7
- icon?: React.ComponentType<{
8
- className?: string;
9
- }>;
10
- completed?: boolean;
11
- disabled?: boolean;
12
- }
13
- export interface WizardLayoutProps {
14
- title: string;
15
- subtitle?: string;
16
- steps: WizardStep[];
17
- currentStep: number;
18
- children: React.ReactNode;
19
- onStepChange?: (stepIndex: number) => void;
20
- onPrevious?: () => void;
21
- onNext?: () => void;
22
- onSubmit?: () => void;
23
- canGoNext?: boolean;
24
- canGoPrevious?: boolean;
25
- isLastStep?: boolean;
26
- submitLabel?: string;
27
- nextLabel?: string;
28
- previousLabel?: string;
29
- className?: string;
30
- }
31
- export declare const WizardLayout: React.FC<WizardLayoutProps>;
@@ -1,16 +0,0 @@
1
- import { default as React } from 'react';
2
-
3
- export interface WizardNavigationProps {
4
- onPrevious?: () => void;
5
- onNext?: () => void;
6
- onSubmit?: () => void;
7
- canGoNext?: boolean;
8
- canGoPrevious?: boolean;
9
- isLastStep?: boolean;
10
- submitLabel?: string;
11
- nextLabel?: string;
12
- previousLabel?: string;
13
- className?: string;
14
- style?: React.CSSProperties;
15
- }
16
- export declare const WizardNavigation: React.FC<WizardNavigationProps>;
@@ -1,4 +0,0 @@
1
- import { default as React } from 'react';
2
- import { ObjectFieldTemplateProps } from '@rjsf/utils';
3
-
4
- export declare const WizardObjectFieldTemplate: React.FC<ObjectFieldTemplateProps>;
@@ -1,11 +0,0 @@
1
- import { default as React } from 'react';
2
- import { ObjectFieldTemplateProps } from '@rjsf/utils';
3
-
4
- export interface WizardSectionTemplateProps extends ObjectFieldTemplateProps {
5
- sectionTitle?: string;
6
- sectionDescription?: string;
7
- sectionIcon?: React.ComponentType<{
8
- className?: string;
9
- }>;
10
- }
11
- export declare const WizardSectionTemplate: React.FC<WizardSectionTemplateProps>;
@@ -1,7 +0,0 @@
1
- export { WizardLayout } from './WizardLayout';
2
- export { ProgressIndicator } from './ProgressIndicator';
3
- export { StepNavigation } from './StepNavigation';
4
- export { WizardNavigation } from './WizardNavigation';
5
- export { WizardObjectFieldTemplate } from './WizardObjectFieldTemplate';
6
- export { WizardSectionTemplate } from './WizardSectionTemplate';
7
- export type { WizardStep } from './WizardLayout';
@@ -1,88 +0,0 @@
1
- import { FormProps } from '@rjsf/core';
2
- import { RJSFSchema, UiSchema } from '@rjsf/utils';
3
-
4
- export interface FormEventHandlers {
5
- beforeSubmit?: (data: any) => Promise<any> | any;
6
- afterSubmit?: (data: any) => Promise<void> | void;
7
- beforeValidation?: (data: any) => Promise<any> | any;
8
- afterValidation?: (data: any, errors: any) => Promise<void> | void;
9
- }
10
- export interface FormFieldEvent {
11
- eventType: 'focus' | 'blur' | 'change';
12
- fieldId: string;
13
- fieldValue: any;
14
- schema?: any;
15
- formData?: any;
16
- timestamp: number;
17
- fieldPath?: string[];
18
- }
19
- export interface WebhookConfig {
20
- url: string;
21
- method?: 'POST' | 'PUT' | 'PATCH';
22
- headers?: Record<string, string>;
23
- events?: ('focus' | 'blur' | 'change')[];
24
- debounceMs?: number;
25
- retries?: number;
26
- timeout?: number;
27
- }
28
- export interface FieldEventHandlers {
29
- onFieldFocus?: (event: FormFieldEvent) => Promise<void> | void;
30
- onFieldBlur?: (event: FormFieldEvent) => Promise<void> | void;
31
- onFieldChange?: (event: FormFieldEvent) => Promise<void> | void;
32
- }
33
- export interface ExtendedFormProps extends Omit<FormProps, 'validator'>, FormEventHandlers, FieldEventHandlers {
34
- schema: RJSFSchema;
35
- uiSchema?: UiSchema;
36
- webhooks?: WebhookConfig[];
37
- conditionals?: ConditionalConfig;
38
- }
39
- export interface CustomWidgetProps {
40
- label?: string;
41
- required?: boolean;
42
- disabled?: boolean;
43
- readonly?: boolean;
44
- autofocus?: boolean;
45
- placeholder?: string;
46
- help?: string;
47
- rawErrors?: string[];
48
- }
49
- export interface ConditionalRule {
50
- conditions: Record<string, any>;
51
- event: ConditionalEvent;
52
- order?: number;
53
- priority?: number;
54
- }
55
- export interface ConditionalEvent {
56
- type: string;
57
- params?: Record<string, any>;
58
- }
59
- export interface ConditionalAction {
60
- (params: any, schema: RJSFSchema, uiSchema: UiSchema, formData: any): void;
61
- propTypes?: any;
62
- validate?: (params: any, schema: RJSFSchema, uiSchema: UiSchema) => void;
63
- }
64
- export interface ConditionalActions {
65
- [actionType: string]: ConditionalAction;
66
- }
67
- export interface ConditionalEngine {
68
- new (rules: ConditionalRule[], schema: RJSFSchema): ConditionalEngineInstance;
69
- }
70
- export interface ConditionalEngineInstance {
71
- addRule(rule: ConditionalRule): void;
72
- run(formData: any): Promise<ConditionalEvent[]>;
73
- }
74
- export interface ConditionalConfig {
75
- rules?: ConditionalRule[];
76
- engine?: ConditionalEngine;
77
- extraActions?: ConditionalActions;
78
- onSchemaChange?: (schemas: {
79
- schema: RJSFSchema;
80
- uiSchema: UiSchema;
81
- }) => void;
82
- }
83
- export interface ConditionalState {
84
- currentSchema: RJSFSchema;
85
- currentUiSchema: UiSchema;
86
- rules: ConditionalRule[];
87
- isProcessing: boolean;
88
- }
@@ -1,22 +0,0 @@
1
- export declare const formDataUtils: {
2
- /**
3
- * Deep clone form data to avoid mutations
4
- */
5
- cloneFormData: (data: any) => any;
6
- /**
7
- * Merge two form data objects
8
- */
9
- mergeFormData: (current: any, updates: any) => any;
10
- /**
11
- * Get nested value from form data using dot notation
12
- */
13
- getNestedValue: (data: any, path: string) => any;
14
- /**
15
- * Set nested value in form data using dot notation
16
- */
17
- setNestedValue: (data: any, path: string, value: any) => any;
18
- /**
19
- * Remove empty values from form data
20
- */
21
- removeEmptyValues: (data: any) => any;
22
- };
@@ -1,4 +0,0 @@
1
- export { formDataUtils } from './formDataUtils';
2
- export { schemaUtils } from './schemaUtils';
3
- export { validationUtils } from './validationUtils';
4
- export declare function deepEquals(obj1: any, obj2: any): boolean;
@@ -1,24 +0,0 @@
1
- import { RJSFSchema } from '@rjsf/utils';
2
-
3
- export declare const schemaUtils: {
4
- /**
5
- * Get required fields from schema
6
- */
7
- getRequiredFields: (schema: RJSFSchema) => string[];
8
- /**
9
- * Check if a field is required
10
- */
11
- isFieldRequired: (schema: RJSFSchema, fieldName: string) => boolean;
12
- /**
13
- * Get field schema by path
14
- */
15
- getFieldSchema: (schema: RJSFSchema, path: string) => RJSFSchema | undefined;
16
- /**
17
- * Merge two schemas
18
- */
19
- mergeSchemas: (schema1: RJSFSchema, schema2: RJSFSchema) => RJSFSchema;
20
- /**
21
- * Get all field paths from schema
22
- */
23
- getAllFieldPaths: (schema: RJSFSchema, prefix?: string) => string[];
24
- };
@@ -1,26 +0,0 @@
1
- export declare const validationUtils: {
2
- /**
3
- * Validate email format
4
- */
5
- isValidEmail: (email: string) => boolean;
6
- /**
7
- * Validate phone number format
8
- */
9
- isValidPhone: (phone: string) => boolean;
10
- /**
11
- * Validate URL format
12
- */
13
- isValidUrl: (url: string) => boolean;
14
- /**
15
- * Validate date format
16
- */
17
- isValidDate: (date: string) => boolean;
18
- /**
19
- * Validate number in range
20
- */
21
- isInRange: (value: number, min?: number, max?: number) => boolean;
22
- /**
23
- * Custom validation messages
24
- */
25
- getValidationMessage: (type: string, params?: any) => string;
26
- };
@@ -1,33 +0,0 @@
1
- import { ExtendedFormProps } from './types';
2
-
3
- export interface VanillaFormInstance {
4
- update: (props: Partial<ExtendedFormProps>) => void;
5
- destroy: () => void;
6
- getFormData: () => any;
7
- submit: () => void;
8
- reset: () => void;
9
- }
10
- export interface VanillaFormOptions extends ExtendedFormProps {
11
- container: string | HTMLElement;
12
- }
13
- export declare const ExtendedDynamicForms: {
14
- /**
15
- * Create a new form instance
16
- * @param options - All ExtendedForm props plus container specification
17
- * @returns VanillaFormInstance for controlling the form
18
- */
19
- createForm: (options: VanillaFormOptions) => VanillaFormInstance;
20
- /**
21
- * Helper to check if the library is loaded
22
- */
23
- isLoaded: () => boolean;
24
- /**
25
- * Get library version
26
- */
27
- version: string;
28
- };
29
- declare global {
30
- interface Window {
31
- ExtendedDynamicForms: typeof ExtendedDynamicForms;
32
- }
33
- }
@@ -1,4 +0,0 @@
1
- import { default as React } from 'react';
2
- import { WidgetProps } from '@rjsf/utils';
3
-
4
- export declare const DateWidget: React.FC<WidgetProps>;
@@ -1,36 +0,0 @@
1
- import { WidgetProps } from '@rjsf/utils';
2
-
3
- export declare function EnhancedTextWidget(props: WidgetProps): import("react/jsx-runtime").JSX.Element;
4
- export declare function EnhancedTextareaWidget(props: WidgetProps): import("react/jsx-runtime").JSX.Element;
5
- export declare function EnhancedSelectWidget(props: WidgetProps): import("react/jsx-runtime").JSX.Element;
6
- export declare function EnhancedCheckboxWidget(props: WidgetProps): import("react/jsx-runtime").JSX.Element;
7
- export declare function EnhancedRadioWidget(props: WidgetProps): import("react/jsx-runtime").JSX.Element;
8
- export declare function EnhancedNumberWidget(props: WidgetProps): import("react/jsx-runtime").JSX.Element;
9
- export declare function TelephoneWidget(props: WidgetProps): import("react/jsx-runtime").JSX.Element;
10
- export declare function EmailWidget(props: WidgetProps): import("react/jsx-runtime").JSX.Element;
11
- export declare function URLWidget(props: WidgetProps): import("react/jsx-runtime").JSX.Element;
12
- export declare function PasswordWidget(props: WidgetProps): import("react/jsx-runtime").JSX.Element;
13
- export declare function DateWidget(props: WidgetProps): import("react/jsx-runtime").JSX.Element;
14
- export declare function DateTimeWidget(props: WidgetProps): import("react/jsx-runtime").JSX.Element;
15
- export declare function FileUploadWidget(props: WidgetProps): import("react/jsx-runtime").JSX.Element;
16
- export declare const customWidgets: {
17
- TextWidget: typeof EnhancedTextWidget;
18
- TextareaWidget: typeof EnhancedTextareaWidget;
19
- SelectWidget: typeof EnhancedSelectWidget;
20
- CheckboxWidget: typeof EnhancedCheckboxWidget;
21
- RadioWidget: typeof EnhancedRadioWidget;
22
- UpDownWidget: typeof EnhancedNumberWidget;
23
- FileWidget: typeof FileUploadWidget;
24
- tel: typeof TelephoneWidget;
25
- email: typeof EmailWidget;
26
- url: typeof URLWidget;
27
- password: typeof PasswordWidget;
28
- date: typeof DateWidget;
29
- 'datetime-local': typeof DateTimeWidget;
30
- TelWidget: typeof TelephoneWidget;
31
- EmailWidget: typeof EmailWidget;
32
- URLWidget: typeof URLWidget;
33
- PasswordWidget: typeof PasswordWidget;
34
- DateWidget: typeof DateWidget;
35
- DateTimeWidget: typeof DateTimeWidget;
36
- };
@@ -1,4 +0,0 @@
1
- import { default as React } from 'react';
2
- import { WidgetProps } from '@rjsf/utils';
3
-
4
- export declare const FileWidget: React.FC<WidgetProps>;
@@ -1,33 +0,0 @@
1
- import { ColorWidget } from './input/ColorWidget';
2
- import { DateWidget } from './date/DateWidget';
3
- import { FileWidget } from './file/FileWidget';
4
- import { RangeWidget } from './input/RangeWidget';
5
- import { RatingWidget } from './input/RatingWidget';
6
- import { customWidgets as enhancedWidgets, EnhancedTextWidget, EnhancedTextareaWidget, EnhancedSelectWidget, EnhancedCheckboxWidget, EnhancedRadioWidget, EnhancedNumberWidget, TelephoneWidget, EmailWidget, URLWidget, PasswordWidget, DateTimeWidget, FileUploadWidget } from './enhanced/EnhancedWidgets';
7
-
8
- export declare const customWidgets: {
9
- TextWidget: typeof EnhancedTextWidget;
10
- TextareaWidget: typeof EnhancedTextareaWidget;
11
- SelectWidget: typeof EnhancedSelectWidget;
12
- CheckboxWidget: typeof EnhancedCheckboxWidget;
13
- RadioWidget: typeof EnhancedRadioWidget;
14
- UpDownWidget: typeof EnhancedNumberWidget;
15
- FileWidget: typeof FileUploadWidget;
16
- tel: typeof TelephoneWidget;
17
- email: typeof EmailWidget;
18
- url: typeof URLWidget;
19
- password: typeof PasswordWidget;
20
- date: typeof import('./enhanced/EnhancedWidgets').DateWidget;
21
- 'datetime-local': typeof DateTimeWidget;
22
- TelWidget: typeof TelephoneWidget;
23
- EmailWidget: typeof EmailWidget;
24
- URLWidget: typeof URLWidget;
25
- PasswordWidget: typeof PasswordWidget;
26
- DateWidget: typeof import('./enhanced/EnhancedWidgets').DateWidget;
27
- DateTimeWidget: typeof DateTimeWidget;
28
- color: import('react').FC<import('@rjsf/utils').WidgetProps<any, import('@rjsf/utils').RJSFSchema, any>>;
29
- file: import('react').FC<import('@rjsf/utils').WidgetProps<any, import('@rjsf/utils').RJSFSchema, any>>;
30
- range: import('react').FC<import('@rjsf/utils').WidgetProps<any, import('@rjsf/utils').RJSFSchema, any>>;
31
- rating: import('react').FC<import('@rjsf/utils').WidgetProps<any, import('@rjsf/utils').RJSFSchema, any>>;
32
- };
33
- export { ColorWidget, DateWidget, FileWidget, RangeWidget, RatingWidget, EnhancedTextWidget, EnhancedTextareaWidget, EnhancedSelectWidget, EnhancedCheckboxWidget, EnhancedRadioWidget, EnhancedNumberWidget, TelephoneWidget, EmailWidget, URLWidget, PasswordWidget, DateTimeWidget, FileUploadWidget, enhancedWidgets, };
@@ -1,4 +0,0 @@
1
- import { default as React } from 'react';
2
- import { WidgetProps } from '@rjsf/utils';
3
-
4
- export declare const ColorWidget: React.FC<WidgetProps>;
@@ -1,4 +0,0 @@
1
- import { default as React } from 'react';
2
- import { WidgetProps } from '@rjsf/utils';
3
-
4
- export declare const RangeWidget: React.FC<WidgetProps>;
@@ -1,4 +0,0 @@
1
- import { default as React } from 'react';
2
- import { WidgetProps } from '@rjsf/utils';
3
-
4
- export declare const RatingWidget: React.FC<WidgetProps>;