extended-dynamic-forms 0.1.15 → 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 (63) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +859 -551
  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 +53 -37
  14. package/dist/ExtendedForm.d.ts +0 -4
  15. package/dist/components/arrays/ArrayFieldItemTemplate.d.ts +0 -3
  16. package/dist/components/arrays/ArrayFieldTemplate.d.ts +0 -3
  17. package/dist/components/arrays/index.d.ts +0 -2
  18. package/dist/components/fields/AddressField.d.ts +0 -4
  19. package/dist/components/fields/CurrencyField.d.ts +0 -4
  20. package/dist/components/fields/PhoneField.d.ts +0 -4
  21. package/dist/components/index.d.ts +0 -15
  22. package/dist/components/ui/badge.d.ts +0 -9
  23. package/dist/components/ui/button.d.ts +0 -11
  24. package/dist/components/ui/calendar.d.ts +0 -8
  25. package/dist/components/ui/card.d.ts +0 -8
  26. package/dist/components/ui/checkbox.d.ts +0 -4
  27. package/dist/components/ui/date-picker.d.ts +0 -13
  28. package/dist/components/ui/input.d.ts +0 -5
  29. package/dist/components/ui/label.d.ts +0 -5
  30. package/dist/components/ui/popover.d.ts +0 -6
  31. package/dist/components/ui/select.d.ts +0 -13
  32. package/dist/components/ui/slider.d.ts +0 -4
  33. package/dist/components/ui/textarea.d.ts +0 -5
  34. package/dist/conditionals/ConditionalForm.d.ts +0 -7
  35. package/dist/conditionals/index.d.ts +0 -4
  36. package/dist/conditionals/initialStateUtils.d.ts +0 -18
  37. package/dist/conditionals/types.d.ts +0 -65
  38. package/dist/conditionals/utils.d.ts +0 -22
  39. package/dist/events/FormEventContext.d.ts +0 -20
  40. package/dist/events/FormEventHub.d.ts +0 -27
  41. package/dist/events/FormEventManager.d.ts +0 -10
  42. package/dist/events/index.d.ts +0 -4
  43. package/dist/index.d.ts +0 -15
  44. package/dist/index.es.js +0 -15405
  45. package/dist/index.umd.js +0 -116
  46. package/dist/layouts/grid/GridLayout.d.ts +0 -11
  47. package/dist/layouts/horizontal/HorizontalLayout.d.ts +0 -10
  48. package/dist/layouts/index.d.ts +0 -3
  49. package/dist/layouts/vertical/VerticalLayout.d.ts +0 -9
  50. package/dist/lib/utils.d.ts +0 -3
  51. package/dist/types/index.d.ts +0 -47
  52. package/dist/utils/formDataUtils.d.ts +0 -22
  53. package/dist/utils/index.d.ts +0 -3
  54. package/dist/utils/schemaUtils.d.ts +0 -24
  55. package/dist/utils/validationUtils.d.ts +0 -26
  56. package/dist/vanilla-wrapper.d.ts +0 -35
  57. package/dist/widgets/date/DateWidget.d.ts +0 -4
  58. package/dist/widgets/enhanced/EnhancedWidgets.d.ts +0 -36
  59. package/dist/widgets/file/FileWidget.d.ts +0 -4
  60. package/dist/widgets/index.d.ts +0 -33
  61. package/dist/widgets/input/ColorWidget.d.ts +0 -4
  62. package/dist/widgets/input/RangeWidget.d.ts +0 -4
  63. package/dist/widgets/input/RatingWidget.d.ts +0 -4
@@ -1,11 +0,0 @@
1
- import { default as React } from 'react';
2
-
3
- interface GridLayoutProps {
4
- children: React.ReactNode;
5
- columns?: number | 'auto-fit' | 'auto-fill';
6
- gap?: 'small' | 'medium' | 'large';
7
- minItemWidth?: string;
8
- className?: string;
9
- }
10
- export declare const GridLayout: React.FC<GridLayoutProps>;
11
- export {};
@@ -1,10 +0,0 @@
1
- import { default as React } from 'react';
2
-
3
- interface HorizontalLayoutProps {
4
- children: React.ReactNode;
5
- spacing?: 'small' | 'medium' | 'large';
6
- align?: 'start' | 'center' | 'end' | 'stretch';
7
- className?: string;
8
- }
9
- export declare const HorizontalLayout: React.FC<HorizontalLayoutProps>;
10
- export {};
@@ -1,3 +0,0 @@
1
- export { VerticalLayout } from './vertical/VerticalLayout';
2
- export { HorizontalLayout } from './horizontal/HorizontalLayout';
3
- export { GridLayout } from './grid/GridLayout';
@@ -1,9 +0,0 @@
1
- import { default as React } from 'react';
2
-
3
- interface VerticalLayoutProps {
4
- children: React.ReactNode;
5
- spacing?: 'small' | 'medium' | 'large';
6
- className?: string;
7
- }
8
- export declare const VerticalLayout: React.FC<VerticalLayoutProps>;
9
- export {};
@@ -1,3 +0,0 @@
1
- import { ClassValue } from 'clsx';
2
-
3
- export declare function cn(...inputs: ClassValue[]): string;
@@ -1,47 +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
- }
38
- export interface CustomWidgetProps {
39
- label?: string;
40
- required?: boolean;
41
- disabled?: boolean;
42
- readonly?: boolean;
43
- autofocus?: boolean;
44
- placeholder?: string;
45
- help?: string;
46
- rawErrors?: string[];
47
- }
@@ -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,3 +0,0 @@
1
- export { formDataUtils } from './formDataUtils';
2
- export { schemaUtils } from './schemaUtils';
3
- export { validationUtils } from './validationUtils';
@@ -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,35 +0,0 @@
1
- import { ExtendedFormProps } from './types';
2
- import { ConditionalFormProps } from './conditionals/types';
3
-
4
- export interface VanillaFormInstance {
5
- update: (props: Partial<ExtendedFormProps>) => void;
6
- destroy: () => void;
7
- getFormData: () => any;
8
- submit: () => void;
9
- reset: () => void;
10
- }
11
- export interface VanillaFormOptions extends ExtendedFormProps {
12
- container: string | HTMLElement;
13
- conditionalRules?: ConditionalFormProps['conditionalRules'];
14
- }
15
- export declare const ExtendedDynamicForms: {
16
- /**
17
- * Create a new form instance
18
- * @param options - All ExtendedForm props plus container specification
19
- * @returns VanillaFormInstance for controlling the form
20
- */
21
- createForm: (options: VanillaFormOptions) => VanillaFormInstance;
22
- /**
23
- * Helper to check if the library is loaded
24
- */
25
- isLoaded: () => boolean;
26
- /**
27
- * Get library version
28
- */
29
- version: string;
30
- };
31
- declare global {
32
- interface Window {
33
- ExtendedDynamicForms: typeof ExtendedDynamicForms;
34
- }
35
- }
@@ -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>;