@digiform/wizard 0.1.7 → 0.2.2
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.
- package/FormWizard.d.ts +10 -0
- package/features/api-integration/components/EnhancedActionExecutor/EnhancedActionExecutor.d.ts +23 -0
- package/features/api-integration/index.d.ts +12 -0
- package/features/api-integration/services/ActionExecutor.d.ts +18 -0
- package/features/api-integration/services/ApiCallExecutor.d.ts +2 -0
- package/features/api-integration/services/ApiCallService.d.ts +40 -0
- package/features/api-integration/services/DialogExecutor.d.ts +2 -0
- package/features/api-integration/services/GenericTriggerService.d.ts +118 -0
- package/features/api-integration/services/NavigationExecutor.d.ts +2 -0
- package/features/dialog-system/components/ActionDialog/ActionDialog.d.ts +11 -0
- package/features/dialog-system/components/ConfirmationDialog/ConfirmationDialog.d.ts +11 -0
- package/features/dialog-system/components/EmailVerificationDialog/EmailVerificationDialog.d.ts +11 -0
- package/features/dialog-system/index.d.ts +8 -0
- package/features/form-runtime/ComponentAdapterComplete/ComponentAdapterComplete.d.ts +19 -0
- package/features/form-runtime/FormWizard/FormWizard.d.ts +10 -0
- package/features/form-runtime/components/FormField.d.ts +7 -0
- package/features/form-runtime/components/FormFooter.d.ts +5 -0
- package/features/form-runtime/components/FormHeader.d.ts +9 -0
- package/features/form-runtime/components/FormSection/FormSection.d.ts +6 -0
- package/features/form-runtime/components/FormStep/FormStep.d.ts +2 -0
- package/features/form-runtime/components/ProgressLoaderRuntime.d.ts +12 -0
- package/features/form-runtime/components/StepProgressIndicator/StepProgressIndicator.d.ts +2 -0
- package/features/form-runtime/components/displayValue/displayValue.d.ts +21 -0
- package/features/form-runtime/components/index.d.ts +3 -0
- package/features/form-runtime/components/renderers/DisplayModeRenderer/DisplayModeRenderer.d.ts +7 -0
- package/features/form-runtime/components/renderers/InteractiveFieldRenderer/InteractiveFieldRenderer.d.ts +13 -0
- package/features/form-runtime/config/configResolver.d.ts +14 -0
- package/features/form-runtime/config/index.d.ts +9 -0
- package/features/form-runtime/config/templateConfig.d.ts +148 -0
- package/features/form-runtime/config/templateLoader.d.ts +25 -0
- package/features/form-runtime/config/templateUtils.d.ts +12 -0
- package/features/form-runtime/context/LoaderContext.d.ts +31 -0
- package/features/form-runtime/hooks/index.d.ts +1 -0
- package/features/form-runtime/hooks/useApiActions.d.ts +42 -0
- package/features/form-runtime/hooks/useComponentTriggers.d.ts +42 -0
- package/features/form-runtime/hooks/useComponentVisibility.d.ts +13 -0
- package/features/form-runtime/hooks/useFieldEventHandlers.d.ts +14 -0
- package/features/form-runtime/hooks/useFormContext.d.ts +4 -0
- package/features/form-runtime/hooks/useFormFieldState.d.ts +13 -0
- package/features/form-runtime/hooks/useValidationEvents.d.ts +13 -0
- package/features/form-runtime/index.d.ts +12 -0
- package/features/form-runtime/utils/componentDisplayValue.d.ts +9 -0
- package/features/form-runtime/utils/errorUtils.d.ts +13 -0
- package/features/form-runtime/utils/fieldHelpers.d.ts +38 -0
- package/features/form-runtime/utils/formDataBuilder.d.ts +7 -0
- package/features/form-runtime/utils/formDirtyStateSync.d.ts +77 -0
- package/features/form-runtime/utils/formSaver.d.ts +22 -0
- package/features/form-runtime/utils/index.d.ts +4 -0
- package/features/form-runtime/utils/logger.d.ts +70 -0
- package/features/form-runtime/utils/validation.d.ts +3 -0
- package/features/form-runtime/utils/validationUX.d.ts +70 -0
- package/features/form-runtime/utils/visibilityUtils.d.ts +13 -0
- package/features/index.d.ts +11 -0
- package/features/state-management/components/ValidationBuilder/ValidationBuilder.d.ts +9 -0
- package/features/state-management/index.d.ts +8 -0
- package/features/state-management/machines/__tests__/setup.d.ts +0 -0
- package/features/state-management/machines/__tests__/testUtils.d.ts +78 -0
- package/features/state-management/machines/__tests__/vitest.config.d.ts +2 -0
- package/features/state-management/machines/actions/componentActions.d.ts +10 -0
- package/features/state-management/machines/actions/navigationActions.d.ts +50 -0
- package/features/state-management/machines/actions/saveActions.d.ts +38 -0
- package/features/state-management/machines/actions/validationActions.d.ts +68 -0
- package/features/state-management/machines/componentTriggerEngine.d.ts +90 -0
- package/features/state-management/machines/formMachine.d.ts +216 -0
- package/features/state-management/machines/guards/navigationGuards.d.ts +32 -0
- package/features/state-management/machines/guards/saveGuards.d.ts +55 -0
- package/features/state-management/machines/guards/triggerGuards.d.ts +24 -0
- package/features/state-management/machines/helpers/triggerHelpers.d.ts +14 -0
- package/features/state-management/machines/index.d.ts +4 -0
- package/features/state-management/machines/lazyLoading.d.ts +34 -0
- package/features/state-management/machines/performance.d.ts +80 -0
- package/features/state-management/machines/types.d.ts +315 -0
- package/features/state-management/machines/useFormMachine.d.ts +1508 -0
- package/features/state-management/machines/validation/index.d.ts +5 -0
- package/features/state-management/machines/validation/validateField.d.ts +2 -0
- package/features/state-management/machines/validation/validateForm.d.ts +2 -0
- package/features/state-management/machines/validation/validateSection.d.ts +2 -0
- package/features/state-management/machines/validation/validateStep.d.ts +2 -0
- package/features/state-management/machines/validation/validationTypes.d.ts +1 -0
- package/features/trigger-action-system/components/ActionLoadingIndicator/ActionLoadingIndicator.d.ts +8 -0
- package/features/trigger-action-system/components/ActionManager.d.ts +6 -0
- package/features/trigger-action-system/components/ComponentAlert/ComponentAlert.d.ts +10 -0
- package/features/trigger-action-system/components/FieldWarning/FieldWarning.d.ts +20 -0
- package/features/trigger-action-system/index.d.ts +10 -0
- package/features/trigger-action-system/utils/GenericTriggerEngine.d.ts +118 -0
- package/features/trigger-action-system/utils/triggerActionSystem.d.ts +193 -0
- package/features/validation-system/components/ValidationDebugger.d.ts +2 -0
- package/features/validation-system/index.d.ts +7 -0
- package/features/validation-system/validation/ActionValidation.d.ts +54 -0
- package/features/validation-system/validation/SchemaBuilder.d.ts +36 -0
- package/features/validation-system/validation/ValidationCache.d.ts +36 -0
- package/features/validation-system/validation/ValidationEngine.d.ts +86 -0
- package/features/validation-system/validation/ValidationExecutor.d.ts +36 -0
- package/features/validation-system/validation/index.d.ts +38 -0
- package/features/validation-system/validation/secureValidatorEngine.d.ts +64 -0
- package/features/validation-system/validation/tanstackSchemaAdapter.d.ts +15 -0
- package/features/validation-system/validation/validationService.d.ts +43 -0
- package/index.cjs +231 -284
- package/index.cjs.map +1 -1
- package/index.d.ts +8 -0
- package/index.js +231 -284
- package/index.js.map +1 -1
- package/package.json +1 -1
- package/styles/index.d.ts +0 -0
- package/styles.css +10 -18
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import { ReactNode } from 'react';
|
|
2
|
+
export interface LoaderContextValue {
|
|
3
|
+
/** Whether the loading process has completed */
|
|
4
|
+
isLoadingComplete: boolean;
|
|
5
|
+
/** Signal that loading has completed */
|
|
6
|
+
setLoadingComplete: (complete: boolean) => void;
|
|
7
|
+
/** Reset loading state (for re-triggering) */
|
|
8
|
+
resetLoading: () => void;
|
|
9
|
+
}
|
|
10
|
+
declare const LoaderContext: import('react').Context<LoaderContextValue | null>;
|
|
11
|
+
export interface LoaderProviderProps {
|
|
12
|
+
children: ReactNode;
|
|
13
|
+
/** Initial loading complete state (default: false for sections with loaders, true otherwise) */
|
|
14
|
+
initialComplete?: boolean;
|
|
15
|
+
}
|
|
16
|
+
/**
|
|
17
|
+
* Provider component for loader state.
|
|
18
|
+
* Should wrap each FormSection that may contain a Progress Loader.
|
|
19
|
+
*/
|
|
20
|
+
export declare const LoaderProvider: import('react').NamedExoticComponent<LoaderProviderProps>;
|
|
21
|
+
/**
|
|
22
|
+
* Hook to access loader context.
|
|
23
|
+
* Returns a fallback value (isLoadingComplete: true) if used outside a provider,
|
|
24
|
+
* ensuring components show immediately when no loader is present.
|
|
25
|
+
*/
|
|
26
|
+
export declare const useLoaderContext: () => LoaderContextValue;
|
|
27
|
+
/**
|
|
28
|
+
* Hook to check if we're inside a LoaderProvider
|
|
29
|
+
*/
|
|
30
|
+
export declare const useHasLoaderProvider: () => boolean;
|
|
31
|
+
export { LoaderContext };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { useComponentTriggers, useFieldTriggerMonitor, } from './useComponentTriggers';
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
import { ApiCallConfig, FormData } from '../../../../../core/src/index.ts';
|
|
2
|
+
import { UseMutationResult, UseQueryResult } from '@tanstack/react-query';
|
|
3
|
+
interface ApiActionHookOptions {
|
|
4
|
+
config: ApiCallConfig;
|
|
5
|
+
formData: FormData;
|
|
6
|
+
onFieldUpdate?: (fieldPath: string, value: unknown) => void;
|
|
7
|
+
}
|
|
8
|
+
interface ApiActionResult {
|
|
9
|
+
data: unknown;
|
|
10
|
+
error: Error | null;
|
|
11
|
+
isLoading: boolean;
|
|
12
|
+
isSuccess: boolean;
|
|
13
|
+
isError: boolean;
|
|
14
|
+
execute: () => void;
|
|
15
|
+
}
|
|
16
|
+
interface ApiGetActionResult extends ApiActionResult {
|
|
17
|
+
refetch: () => void;
|
|
18
|
+
}
|
|
19
|
+
interface ApiMutateActionResult extends ApiActionResult {
|
|
20
|
+
mutate: () => void;
|
|
21
|
+
reset: () => void;
|
|
22
|
+
}
|
|
23
|
+
/**
|
|
24
|
+
* Hook for executing GET API calls using React Query
|
|
25
|
+
* Provides automatic caching, error handling, and field mapping for GET requests
|
|
26
|
+
*/
|
|
27
|
+
export declare function useGetApiAction(options: ApiActionHookOptions & {
|
|
28
|
+
enabled?: boolean;
|
|
29
|
+
}): UseQueryResult<unknown, Error>;
|
|
30
|
+
/**
|
|
31
|
+
* Hook for executing POST/PUT/PATCH/DELETE API calls using React Query
|
|
32
|
+
* Provides error handling and field mapping for mutation requests
|
|
33
|
+
*/
|
|
34
|
+
export declare function useMutateApiAction(options: ApiActionHookOptions): UseMutationResult<unknown, Error, void, unknown>;
|
|
35
|
+
/**
|
|
36
|
+
* Unified hook that automatically chooses between useQuery and useMutation
|
|
37
|
+
* based on the HTTP method. Provides a consistent API for all HTTP methods.
|
|
38
|
+
*/
|
|
39
|
+
export declare function useApiAction(options: ApiActionHookOptions & {
|
|
40
|
+
enabled?: boolean;
|
|
41
|
+
}): ApiGetActionResult | ApiMutateActionResult;
|
|
42
|
+
export {};
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
import { ComponentTrigger } from '../../../../../core/src/index.ts';
|
|
2
|
+
import { ComponentActionExecution, ComponentAlert } from '../../state-management';
|
|
3
|
+
interface ComponentTriggerStateInfo {
|
|
4
|
+
triggers: ComponentTrigger[];
|
|
5
|
+
triggerStates: Record<string, unknown>;
|
|
6
|
+
activeActions: ComponentActionExecution[];
|
|
7
|
+
alerts: ComponentAlert[];
|
|
8
|
+
}
|
|
9
|
+
interface UseComponentTriggersProps {
|
|
10
|
+
componentId: string;
|
|
11
|
+
initialValue?: unknown;
|
|
12
|
+
onValueChange?: (value: unknown) => void;
|
|
13
|
+
}
|
|
14
|
+
interface UseComponentTriggersReturn {
|
|
15
|
+
evaluateTriggers: (eventType: "valueChange" | "focus" | "blur", value?: unknown) => void;
|
|
16
|
+
setOriginalValue: (value: unknown, source?: "initialized" | "api_populated" | "user_reset") => void;
|
|
17
|
+
alerts: ComponentAlert[];
|
|
18
|
+
dismissAlert: (alertId?: string) => void;
|
|
19
|
+
hasTriggers: boolean;
|
|
20
|
+
hasActions: boolean;
|
|
21
|
+
triggerState: ComponentTriggerStateInfo;
|
|
22
|
+
handleValueChange: (value: unknown) => void;
|
|
23
|
+
handleFocus: () => void;
|
|
24
|
+
handleBlur: () => void;
|
|
25
|
+
}
|
|
26
|
+
/**
|
|
27
|
+
* Hook that provides trigger-action system integration for components
|
|
28
|
+
*/
|
|
29
|
+
export declare const useComponentTriggers: ({ componentId, initialValue, onValueChange, }: UseComponentTriggersProps) => UseComponentTriggersReturn;
|
|
30
|
+
/**
|
|
31
|
+
* Simplified hook for basic field monitoring
|
|
32
|
+
* Automatically handles value changes and provides isDirty detection
|
|
33
|
+
*/
|
|
34
|
+
export declare const useFieldTriggerMonitor: (componentId: string, initialValue?: unknown) => {
|
|
35
|
+
onChange: (value: unknown) => void;
|
|
36
|
+
onFocus: () => void;
|
|
37
|
+
onBlur: () => void;
|
|
38
|
+
alerts: ComponentAlert[];
|
|
39
|
+
dismissAlert: (alertId?: string) => void;
|
|
40
|
+
setOriginalValue: (value: unknown, source?: "initialized" | "api_populated" | "user_reset") => void;
|
|
41
|
+
};
|
|
42
|
+
export {};
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { FormData, VisibilityConditionConfig } from '../../../../../core/src/index.ts';
|
|
2
|
+
interface UseComponentVisibilityProps {
|
|
3
|
+
visibilityConditions?: VisibilityConditionConfig;
|
|
4
|
+
formData: FormData;
|
|
5
|
+
}
|
|
6
|
+
interface UseComponentVisibilityReturn {
|
|
7
|
+
isVisible: boolean;
|
|
8
|
+
dependencies: string[];
|
|
9
|
+
/** Whether the step-level loading process has completed */
|
|
10
|
+
isLoadingComplete: boolean;
|
|
11
|
+
}
|
|
12
|
+
export declare const useComponentVisibility: ({ visibilityConditions, formData, }: UseComponentVisibilityProps) => UseComponentVisibilityReturn;
|
|
13
|
+
export {};
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { ComponentValue, FormFieldApi } from '../../../../../core/src/index.ts';
|
|
2
|
+
interface UseFieldEventHandlersProps {
|
|
3
|
+
componentId: string;
|
|
4
|
+
hasIsDirtyTriggers: boolean;
|
|
5
|
+
originalValueFromMachine: ComponentValue;
|
|
6
|
+
getEnhancedIsDirty: (currentValue: ComponentValue, tanStackIsDirty: boolean) => boolean;
|
|
7
|
+
resetValidationState: () => void;
|
|
8
|
+
}
|
|
9
|
+
interface UseFieldEventHandlersReturn {
|
|
10
|
+
handleChange: (field: FormFieldApi) => (value: ComponentValue) => void;
|
|
11
|
+
handleBlur: (field: FormFieldApi) => () => void;
|
|
12
|
+
}
|
|
13
|
+
export declare const useFieldEventHandlers: ({ componentId, hasIsDirtyTriggers, originalValueFromMachine, getEnhancedIsDirty, resetValidationState, }: UseFieldEventHandlersProps) => UseFieldEventHandlersReturn;
|
|
14
|
+
export {};
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { ComponentValue } from '../../../../../core/src/index.ts';
|
|
2
|
+
interface UseFormFieldStateProps {
|
|
3
|
+
componentId: string;
|
|
4
|
+
hasIsDirtyTriggers: boolean;
|
|
5
|
+
}
|
|
6
|
+
interface UseFormFieldStateReturn {
|
|
7
|
+
originalValueFromMachine: ComponentValue | undefined;
|
|
8
|
+
initializeField: () => void;
|
|
9
|
+
handleFormReset: () => void;
|
|
10
|
+
getEnhancedIsDirty: (currentValue: ComponentValue, tanStackIsDirty: boolean) => boolean;
|
|
11
|
+
}
|
|
12
|
+
export declare const useFormFieldState: ({ componentId, hasIsDirtyTriggers, }: UseFormFieldStateProps) => UseFormFieldStateReturn;
|
|
13
|
+
export {};
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Custom hook for handling validation trigger events
|
|
3
|
+
* Replaces useEffect-based event listening with proper cleanup
|
|
4
|
+
*/
|
|
5
|
+
interface UseValidationEventsProps {
|
|
6
|
+
componentId: string;
|
|
7
|
+
}
|
|
8
|
+
interface UseValidationEventsReturn {
|
|
9
|
+
forceShowValidation: boolean;
|
|
10
|
+
resetValidationState: () => void;
|
|
11
|
+
}
|
|
12
|
+
export declare const useValidationEvents: ({ componentId, }: UseValidationEventsProps) => UseValidationEventsReturn;
|
|
13
|
+
export {};
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Form Runtime Feature
|
|
3
|
+
*
|
|
4
|
+
* Core components and functionality for rendering and executing forms
|
|
5
|
+
*/
|
|
6
|
+
export { default as ComponentAdapterComplete } from './ComponentAdapterComplete/ComponentAdapterComplete';
|
|
7
|
+
export * from './components';
|
|
8
|
+
export * from './config';
|
|
9
|
+
export type { FormWizardProps } from './FormWizard/FormWizard';
|
|
10
|
+
export { default as FormWizard } from './FormWizard/FormWizard';
|
|
11
|
+
export * from './hooks';
|
|
12
|
+
export * from './utils';
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { ComponentConfig, ComponentValue } from '../../../../../core/src/index.ts';
|
|
2
|
+
/**
|
|
3
|
+
* Get the appropriate display value renderer for a component type
|
|
4
|
+
*/
|
|
5
|
+
export declare const getDisplayValueRenderer: (componentType: string) => (component: ComponentConfig, value: ComponentValue) => React.ReactNode;
|
|
6
|
+
/**
|
|
7
|
+
* Render display value for any component type
|
|
8
|
+
*/
|
|
9
|
+
export declare const renderComponentDisplayValue: (component: ComponentConfig, value: ComponentValue) => React.ReactNode;
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
export declare const parseError: (error: unknown) => string;
|
|
2
|
+
export declare const parseAllErrors: (errors: unknown[]) => string[];
|
|
3
|
+
export declare const getMostRelevantError: (errors: unknown[]) => string;
|
|
4
|
+
export declare const getFirstErrorMessage: (errors: unknown[]) => string;
|
|
5
|
+
export declare const getErrorDebugInfo: (errors: unknown[]) => {
|
|
6
|
+
index: number;
|
|
7
|
+
type: "string" | "number" | "bigint" | "boolean" | "symbol" | "undefined" | "object" | "function";
|
|
8
|
+
constructor: string | undefined;
|
|
9
|
+
raw: unknown;
|
|
10
|
+
parsed: string;
|
|
11
|
+
validationType: "custom" | "required" | "minLength" | "min" | "max" | "default" | "email" | "maxLength" | "pattern";
|
|
12
|
+
priority: 4 | 6 | 8 | 1 | 2 | 3 | 5 | 10 | 7;
|
|
13
|
+
}[];
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
import { ComponentConfig, ComponentValue, FormFieldApi } from '../../../../../core/src/index.ts';
|
|
2
|
+
/**
|
|
3
|
+
* Minimal form state interface for validation display state
|
|
4
|
+
* Contains only the properties used by getValidationDisplayState function
|
|
5
|
+
*/
|
|
6
|
+
interface FormState {
|
|
7
|
+
isSubmitting: boolean;
|
|
8
|
+
}
|
|
9
|
+
/**
|
|
10
|
+
* Determines if a component should be registered as a form field with TanStack Form
|
|
11
|
+
* Display-only components like paragraphs, headings, buttons, etc. should not be form fields
|
|
12
|
+
*/
|
|
13
|
+
export declare const shouldBeFormField: (component: ComponentConfig) => boolean;
|
|
14
|
+
/**
|
|
15
|
+
* Checks if a component has isDirty triggers configured
|
|
16
|
+
*/
|
|
17
|
+
export declare const checkHasIsDirtyTriggers: (component: ComponentConfig) => boolean;
|
|
18
|
+
/**
|
|
19
|
+
* Determines if a field has a meaningful value based on component type
|
|
20
|
+
*/
|
|
21
|
+
export declare const checkFieldHasValue: (fieldValue: ComponentValue, componentType: string) => boolean;
|
|
22
|
+
/**
|
|
23
|
+
* Determines if component should render in display mode
|
|
24
|
+
*/
|
|
25
|
+
export declare const shouldShowDisplayMode: (readOnly: boolean, hasValue: boolean) => boolean;
|
|
26
|
+
/**
|
|
27
|
+
* Gets validation state for display
|
|
28
|
+
*/
|
|
29
|
+
export declare const getValidationDisplayState: (fieldMeta: FormFieldApi["state"]["meta"], formState: FormState, forceShowValidation: boolean) => {
|
|
30
|
+
fieldErrors: string[];
|
|
31
|
+
isInvalid: boolean;
|
|
32
|
+
isSubmitAttempted: boolean;
|
|
33
|
+
};
|
|
34
|
+
/**
|
|
35
|
+
* Determines if alerts should be shown based on trigger configuration and state
|
|
36
|
+
*/
|
|
37
|
+
export declare const shouldShowComponentAlerts: (hasIsDirtyTriggers: boolean, isDirtyFromMachine: boolean, alertsLength: number) => boolean;
|
|
38
|
+
export {};
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { FormStepConfig } from '../../../../../core/src/index.ts';
|
|
2
|
+
/**
|
|
3
|
+
* Form data builder following functional programming principles
|
|
4
|
+
* Single Responsibility: Only builds form default values
|
|
5
|
+
* Pure function - no side effects, same input = same output
|
|
6
|
+
*/
|
|
7
|
+
export declare const buildDefaultValues: (step: FormStepConfig) => Record<string, unknown>;
|
|
@@ -0,0 +1,77 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Utility functions for synchronizing TanStack Form dirty state with API data population
|
|
3
|
+
*
|
|
4
|
+
* The problem: When API populates form fields after initial load, TanStack Form marks
|
|
5
|
+
* them as dirty because they changed from their initial empty state. This breaks
|
|
6
|
+
* our trigger system that needs to distinguish between API-populated values and
|
|
7
|
+
* user-initiated changes.
|
|
8
|
+
*
|
|
9
|
+
* The solution: After API population, reset the form's dirty state by updating
|
|
10
|
+
* TanStack Form's internal tracking so it considers the API-populated values
|
|
11
|
+
* as the new "clean" state.
|
|
12
|
+
*/
|
|
13
|
+
export interface FormDirtySyncOptions {
|
|
14
|
+
/**
|
|
15
|
+
* Component IDs that were updated by API calls
|
|
16
|
+
* If not provided, will attempt to reset all fields
|
|
17
|
+
*/
|
|
18
|
+
updatedFields?: string[];
|
|
19
|
+
/**
|
|
20
|
+
* Whether to log debug information about the reset process
|
|
21
|
+
*/
|
|
22
|
+
debug?: boolean;
|
|
23
|
+
}
|
|
24
|
+
/**
|
|
25
|
+
* Reset TanStack Form's dirty state after API data population
|
|
26
|
+
*
|
|
27
|
+
* This function resets field states so that API-populated values are treated
|
|
28
|
+
* as the new "clean" baseline state, preventing them from being marked as dirty.
|
|
29
|
+
*
|
|
30
|
+
* The approach:
|
|
31
|
+
* Based on TanStack Form v1.19+ API documentation:
|
|
32
|
+
* 1. Get current field values before reset
|
|
33
|
+
* 2. Use resetField() to reset field meta to default state
|
|
34
|
+
* 3. Set field values with proper UpdateMetaOptions to avoid marking as touched/dirty
|
|
35
|
+
* 4. TanStack Form's resetField() resets both value and meta to defaults
|
|
36
|
+
*
|
|
37
|
+
* @param form - TanStack Form instance
|
|
38
|
+
* @param options - Configuration options
|
|
39
|
+
*/
|
|
40
|
+
export declare function resetFormDirtyStateAfterApiPopulation(form: unknown, options?: FormDirtySyncOptions): void;
|
|
41
|
+
/**
|
|
42
|
+
* Optimized approach for API data population
|
|
43
|
+
* This function updates form state and original values without triggering useEffect loops
|
|
44
|
+
*
|
|
45
|
+
* Usage after API data is received:
|
|
46
|
+
* 1. Call this function with form instance and field data
|
|
47
|
+
* 2. No more useEffect cascades or performance issues
|
|
48
|
+
* 3. Proper dirty state management for isDirty triggers
|
|
49
|
+
*
|
|
50
|
+
* Based on TanStack Form best practices:
|
|
51
|
+
* - Use dontUpdateMeta option to prevent marking fields as dirty during API population
|
|
52
|
+
* - Reset fields first, then set values to establish clean baseline
|
|
53
|
+
*
|
|
54
|
+
* @param form - TanStack Form instance
|
|
55
|
+
* @param fieldsData - Object mapping field IDs to their API-populated values
|
|
56
|
+
* @param debug - Whether to log debug information
|
|
57
|
+
*/
|
|
58
|
+
export declare function handleApiDataPopulation(form: unknown, fieldsData: Record<string, unknown>, debug?: boolean): void;
|
|
59
|
+
/**
|
|
60
|
+
* Enhanced API population helper that integrates with XState machine
|
|
61
|
+
*
|
|
62
|
+
* This function combines TanStack Form sync with XState original value tracking
|
|
63
|
+
* for clean isDirty detection in the trigger-action system.
|
|
64
|
+
*
|
|
65
|
+
* @param form - TanStack Form instance
|
|
66
|
+
* @param formHelpers - Helpers from useFormMachine (destructured helpers object)
|
|
67
|
+
* @param fieldsData - Object mapping field IDs to their API-populated values
|
|
68
|
+
* @param debug - Whether to log debug information
|
|
69
|
+
*/
|
|
70
|
+
export declare function handleApiDataPopulationWithOriginalTracking(form: unknown, formHelpers: {
|
|
71
|
+
markComponentAsPopulated: (componentId: string, value: unknown) => void;
|
|
72
|
+
}, fieldsData: Record<string, unknown>, debug?: boolean): void;
|
|
73
|
+
/**
|
|
74
|
+
* Check if specific fields are dirty and log detailed information
|
|
75
|
+
* Useful for debugging dirty state issues
|
|
76
|
+
*/
|
|
77
|
+
export declare function debugFormDirtyState(form: unknown, fieldNames?: string[]): void;
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import { FormWizardConfig } from '../../../../../core/src/index.ts';
|
|
2
|
+
export interface SaveResult {
|
|
3
|
+
success: boolean;
|
|
4
|
+
error?: {
|
|
5
|
+
message: string;
|
|
6
|
+
code?: string;
|
|
7
|
+
};
|
|
8
|
+
metadata?: {
|
|
9
|
+
filePath?: string;
|
|
10
|
+
timestamp?: number;
|
|
11
|
+
};
|
|
12
|
+
}
|
|
13
|
+
/**
|
|
14
|
+
* Save form configuration using the pluggable save provider system
|
|
15
|
+
* This is a self-contained function that doesn't rely on external utilities
|
|
16
|
+
*/
|
|
17
|
+
export declare function saveFormConfig(projectId: string, wizardId: string, config: FormWizardConfig): Promise<SaveResult>;
|
|
18
|
+
/**
|
|
19
|
+
* Load form configuration
|
|
20
|
+
* Companion function to saveFormConfig for loading saved forms
|
|
21
|
+
*/
|
|
22
|
+
export declare function loadFormConfig(projectId: string, wizardId: string): Promise<FormWizardConfig | null>;
|
|
@@ -0,0 +1,70 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Logger utility for form field debugging
|
|
3
|
+
* Can be enabled/disabled via environment variables or runtime configuration
|
|
4
|
+
*/
|
|
5
|
+
interface LoggerConfig {
|
|
6
|
+
enabled: boolean;
|
|
7
|
+
level: "debug" | "info" | "warn" | "error";
|
|
8
|
+
}
|
|
9
|
+
declare class FormFieldLogger {
|
|
10
|
+
private config;
|
|
11
|
+
constructor();
|
|
12
|
+
private getInitialEnabledState;
|
|
13
|
+
/**
|
|
14
|
+
* Enable or disable logging
|
|
15
|
+
*/
|
|
16
|
+
setEnabled(enabled: boolean): void;
|
|
17
|
+
/**
|
|
18
|
+
* Check if logging is enabled
|
|
19
|
+
*/
|
|
20
|
+
isEnabled(): boolean;
|
|
21
|
+
/**
|
|
22
|
+
* Set logging level
|
|
23
|
+
*/
|
|
24
|
+
setLevel(level: LoggerConfig["level"]): void;
|
|
25
|
+
/**
|
|
26
|
+
* Debug level logging
|
|
27
|
+
*/
|
|
28
|
+
debug(message: string, data?: any): void;
|
|
29
|
+
/**
|
|
30
|
+
* Info level logging
|
|
31
|
+
*/
|
|
32
|
+
info(message: string, data?: any): void;
|
|
33
|
+
/**
|
|
34
|
+
* Warning level logging
|
|
35
|
+
*/
|
|
36
|
+
warn(message: string, data?: any): void;
|
|
37
|
+
/**
|
|
38
|
+
* Error level logging (always shown regardless of enabled state)
|
|
39
|
+
*/
|
|
40
|
+
error(message: string, data?: any): void;
|
|
41
|
+
/**
|
|
42
|
+
* Critical error logging (always shown regardless of enabled state)
|
|
43
|
+
*/
|
|
44
|
+
critical(message: string, data?: any): void;
|
|
45
|
+
/**
|
|
46
|
+
* Validation specific logging
|
|
47
|
+
*/
|
|
48
|
+
validation(message: string, data?: any): void;
|
|
49
|
+
/**
|
|
50
|
+
* State management specific logging
|
|
51
|
+
*/
|
|
52
|
+
state(message: string, data?: any): void;
|
|
53
|
+
/**
|
|
54
|
+
* Component lifecycle logging
|
|
55
|
+
*/
|
|
56
|
+
lifecycle(message: string, data?: any): void;
|
|
57
|
+
/**
|
|
58
|
+
* Change event logging
|
|
59
|
+
*/
|
|
60
|
+
change(message: string, data?: any): void;
|
|
61
|
+
/**
|
|
62
|
+
* Test/experimental logging
|
|
63
|
+
*/
|
|
64
|
+
test(message: string, data?: any): void;
|
|
65
|
+
}
|
|
66
|
+
export declare const logger: FormFieldLogger;
|
|
67
|
+
export declare const enableFormFieldLogging: () => void;
|
|
68
|
+
export declare const disableFormFieldLogging: () => void;
|
|
69
|
+
export declare const isFormFieldLoggingEnabled: () => boolean;
|
|
70
|
+
export {};
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
import { ComponentConfig, FlowData, FormFieldValue, ValidationRule } from '../../../../../core/src/index.ts';
|
|
2
|
+
export declare const validateComponentValue: (component: ComponentConfig, value: FormFieldValue, formData: FlowData) => string[];
|
|
3
|
+
export declare const validateRule: (rule: ValidationRule, value: FormFieldValue, formData: FlowData) => boolean;
|
|
@@ -0,0 +1,70 @@
|
|
|
1
|
+
export declare const markFieldAsUserInteracted: (componentId: string) => void;
|
|
2
|
+
export declare const hasUserInteracted: (componentId: string) => boolean;
|
|
3
|
+
export declare const clearUserInteractionTracking: () => void;
|
|
4
|
+
export declare const shouldShowValidationError: (fieldMeta: any, // Using any for compatibility with TanStack Form's complex FieldMeta type
|
|
5
|
+
isSubmitAttempted?: boolean, componentId?: string) => boolean;
|
|
6
|
+
export declare const updateValidationCache: (componentId: string, isValid: boolean) => void;
|
|
7
|
+
/**
|
|
8
|
+
* Gets the most appropriate error message to display based on validation state
|
|
9
|
+
* and UX best practices
|
|
10
|
+
*/
|
|
11
|
+
export declare const getDisplayErrorMessage: (fieldMeta: any, // Using any for compatibility with TanStack Form's complex FieldMeta type
|
|
12
|
+
isSubmitAttempted?: boolean) => string;
|
|
13
|
+
/**
|
|
14
|
+
* Validation timing strategies for different field types
|
|
15
|
+
*/
|
|
16
|
+
export declare const VALIDATION_TIMING: {
|
|
17
|
+
readonly textInput: {
|
|
18
|
+
readonly validateOn: "blur";
|
|
19
|
+
readonly showErrorsAfter: "touch";
|
|
20
|
+
};
|
|
21
|
+
readonly email: {
|
|
22
|
+
readonly validateOn: "blur";
|
|
23
|
+
readonly showErrorsAfter: "touch";
|
|
24
|
+
};
|
|
25
|
+
readonly number: {
|
|
26
|
+
readonly validateOn: "blur";
|
|
27
|
+
readonly showErrorsAfter: "touch";
|
|
28
|
+
};
|
|
29
|
+
readonly radioGroup: {
|
|
30
|
+
readonly validateOn: "change";
|
|
31
|
+
readonly showErrorsAfter: "touch";
|
|
32
|
+
};
|
|
33
|
+
readonly select: {
|
|
34
|
+
readonly validateOn: "change";
|
|
35
|
+
readonly showErrorsAfter: "touch";
|
|
36
|
+
};
|
|
37
|
+
readonly checkbox: {
|
|
38
|
+
readonly validateOn: "change";
|
|
39
|
+
readonly showErrorsAfter: "touch";
|
|
40
|
+
};
|
|
41
|
+
readonly multiselect: {
|
|
42
|
+
readonly validateOn: "change";
|
|
43
|
+
readonly showErrorsAfter: "touch";
|
|
44
|
+
};
|
|
45
|
+
};
|
|
46
|
+
/**
|
|
47
|
+
* Gets the validation timing strategy for a component type
|
|
48
|
+
*/
|
|
49
|
+
export declare const getValidationTiming: (componentType: string) => {
|
|
50
|
+
readonly validateOn: "blur";
|
|
51
|
+
readonly showErrorsAfter: "touch";
|
|
52
|
+
} | {
|
|
53
|
+
readonly validateOn: "blur";
|
|
54
|
+
readonly showErrorsAfter: "touch";
|
|
55
|
+
} | {
|
|
56
|
+
readonly validateOn: "blur";
|
|
57
|
+
readonly showErrorsAfter: "touch";
|
|
58
|
+
} | {
|
|
59
|
+
readonly validateOn: "change";
|
|
60
|
+
readonly showErrorsAfter: "touch";
|
|
61
|
+
} | {
|
|
62
|
+
readonly validateOn: "change";
|
|
63
|
+
readonly showErrorsAfter: "touch";
|
|
64
|
+
} | {
|
|
65
|
+
readonly validateOn: "change";
|
|
66
|
+
readonly showErrorsAfter: "touch";
|
|
67
|
+
} | {
|
|
68
|
+
readonly validateOn: "change";
|
|
69
|
+
readonly showErrorsAfter: "touch";
|
|
70
|
+
};
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { FormData, VisibilityConditionConfig } from '../../../../../core/src/index.ts';
|
|
2
|
+
/**
|
|
3
|
+
* Evaluates whether a component should be visible based on its visibility conditions
|
|
4
|
+
* @param visibilityConfig The visibility condition configuration
|
|
5
|
+
* @param formData Current form data values
|
|
6
|
+
* @returns true if component should be visible, false if hidden
|
|
7
|
+
*/
|
|
8
|
+
export declare function evaluateVisibility(visibilityConfig: VisibilityConditionConfig | undefined, formData: FormData): boolean;
|
|
9
|
+
/**
|
|
10
|
+
* Gets all field IDs that are referenced in visibility conditions
|
|
11
|
+
* This is useful for optimizing re-renders - only re-evaluate when these fields change
|
|
12
|
+
*/
|
|
13
|
+
export declare function getVisibilityDependencies(visibilityConfig: VisibilityConditionConfig | undefined): string[];
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Form Wizard Component Features
|
|
3
|
+
*
|
|
4
|
+
* Feature-based exports for the form wizard component
|
|
5
|
+
*/
|
|
6
|
+
export * from './api-integration';
|
|
7
|
+
export * from './dialog-system';
|
|
8
|
+
export * from './form-runtime';
|
|
9
|
+
export * from './state-management';
|
|
10
|
+
export * from './trigger-action-system';
|
|
11
|
+
export * from './validation-system';
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { ComponentValidation } from '../../machines/validation/validationTypes';
|
|
2
|
+
interface ValidationBuilderProps {
|
|
3
|
+
componentType: string;
|
|
4
|
+
componentLabel: string;
|
|
5
|
+
validation: ComponentValidation;
|
|
6
|
+
onChange: (validation: ComponentValidation) => void;
|
|
7
|
+
}
|
|
8
|
+
export declare const ValidationBuilder: React.FC<ValidationBuilderProps>;
|
|
9
|
+
export {};
|
|
File without changes
|
|
@@ -0,0 +1,78 @@
|
|
|
1
|
+
import { ComponentAction, ComponentConfig, ComponentTrigger, FormWizardConfig } from '../../../../../../core/src/index.ts';
|
|
2
|
+
import { FormMachineContext, FormMachineEvents } from '../types';
|
|
3
|
+
/**
|
|
4
|
+
* Test utilities for form machine testing
|
|
5
|
+
*/
|
|
6
|
+
export declare function createMockConfig(overrides?: Partial<FormWizardConfig>): FormWizardConfig;
|
|
7
|
+
export declare function createMockComponentWithTriggers(componentId: string, triggers: ComponentTrigger[]): ComponentConfig;
|
|
8
|
+
export declare function createMockTrigger(type: ComponentTrigger["type"], actions: ComponentAction[], overrides?: Partial<ComponentTrigger>): ComponentTrigger;
|
|
9
|
+
export declare function createMockAction(type: ComponentAction["type"], config?: any, overrides?: Partial<ComponentAction>): ComponentAction;
|
|
10
|
+
export declare function createMockContext(overrides?: Partial<FormMachineContext>): FormMachineContext;
|
|
11
|
+
export declare const mockEvents: {
|
|
12
|
+
setData: (key: string, value: any) => FormMachineEvents;
|
|
13
|
+
next: () => FormMachineEvents;
|
|
14
|
+
previous: () => FormMachineEvents;
|
|
15
|
+
goToStep: (stepId: string) => FormMachineEvents;
|
|
16
|
+
evaluateComponentTriggers: (componentId: string, value?: any) => FormMachineEvents;
|
|
17
|
+
triggerComponentAction: (componentId: string, triggerId: string, actionId: string) => FormMachineEvents;
|
|
18
|
+
showComponentAlert: (componentId: string, message: string) => FormMachineEvents;
|
|
19
|
+
setComponentOriginalValue: (componentId: string, value: any, source?: "initialized" | "api_populated" | "user_reset") => FormMachineEvents;
|
|
20
|
+
startSave: (sectionId: string) => FormMachineEvents;
|
|
21
|
+
submit: () => FormMachineEvents;
|
|
22
|
+
reset: () => FormMachineEvents;
|
|
23
|
+
};
|
|
24
|
+
export declare function createMachineTestSetup(initialContext?: Partial<FormMachineContext>): {
|
|
25
|
+
context: FormMachineContext;
|
|
26
|
+
input: {
|
|
27
|
+
input: FormMachineContext;
|
|
28
|
+
};
|
|
29
|
+
mockEvents: {
|
|
30
|
+
setData: (key: string, value: any) => FormMachineEvents;
|
|
31
|
+
next: () => FormMachineEvents;
|
|
32
|
+
previous: () => FormMachineEvents;
|
|
33
|
+
goToStep: (stepId: string) => FormMachineEvents;
|
|
34
|
+
evaluateComponentTriggers: (componentId: string, value?: any) => FormMachineEvents;
|
|
35
|
+
triggerComponentAction: (componentId: string, triggerId: string, actionId: string) => FormMachineEvents;
|
|
36
|
+
showComponentAlert: (componentId: string, message: string) => FormMachineEvents;
|
|
37
|
+
setComponentOriginalValue: (componentId: string, value: any, source?: "initialized" | "api_populated" | "user_reset") => FormMachineEvents;
|
|
38
|
+
startSave: (sectionId: string) => FormMachineEvents;
|
|
39
|
+
submit: () => FormMachineEvents;
|
|
40
|
+
reset: () => FormMachineEvents;
|
|
41
|
+
};
|
|
42
|
+
};
|
|
43
|
+
export declare const testScenarios: {
|
|
44
|
+
dirtyFieldWithTrigger: {
|
|
45
|
+
componentId: string;
|
|
46
|
+
originalValue: string;
|
|
47
|
+
newValue: string;
|
|
48
|
+
triggerId: string;
|
|
49
|
+
actionId: string;
|
|
50
|
+
};
|
|
51
|
+
multiStepNavigation: {
|
|
52
|
+
totalSteps: number;
|
|
53
|
+
currentStep: number;
|
|
54
|
+
targetStep: number;
|
|
55
|
+
};
|
|
56
|
+
saveFlow: {
|
|
57
|
+
sectionId: string;
|
|
58
|
+
componentIds: string[];
|
|
59
|
+
};
|
|
60
|
+
};
|
|
61
|
+
export declare function expectStateTransition(fromState: string, toState: string, event: FormMachineEvents): {
|
|
62
|
+
from: string;
|
|
63
|
+
to: string;
|
|
64
|
+
event: FormMachineEvents;
|
|
65
|
+
};
|
|
66
|
+
export declare function expectContextUpdate(path: string, expectedValue: any): {
|
|
67
|
+
path: string;
|
|
68
|
+
expectedValue: any;
|
|
69
|
+
};
|
|
70
|
+
export declare const mockServices: {
|
|
71
|
+
apiCall: import('vitest').Mock<import('@vitest/spy').Procedure>;
|
|
72
|
+
emailVerification: import('vitest').Mock<import('@vitest/spy').Procedure>;
|
|
73
|
+
saveSection: import('vitest').Mock<import('@vitest/spy').Procedure>;
|
|
74
|
+
};
|
|
75
|
+
export declare const commonConfigs: {
|
|
76
|
+
singleStep: FormWizardConfig;
|
|
77
|
+
multipleTriggersConfig: FormWizardConfig;
|
|
78
|
+
};
|