@formitiva/react 0.9.0
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/LICENSE +21 -0
- package/README.full.md +456 -0
- package/README.md +114 -0
- package/dist/components/fields/advanced/ColorInput.d.ts +5 -0
- package/dist/components/fields/advanced/EmailInput.d.ts +6 -0
- package/dist/components/fields/advanced/FileInput.d.ts +5 -0
- package/dist/components/fields/advanced/PasswordInput.d.ts +6 -0
- package/dist/components/fields/advanced/PhoneInput.d.ts +7 -0
- package/dist/components/fields/advanced/RatingInput.d.ts +9 -0
- package/dist/components/fields/advanced/SliderInput.d.ts +5 -0
- package/dist/components/fields/advanced/UnitValueInput.d.ts +5 -0
- package/dist/components/fields/advanced/UrlInput.d.ts +9 -0
- package/dist/components/fields/base/PopupOptionMenu.d.ts +16 -0
- package/dist/components/fields/base/Tooltip.d.ts +8 -0
- package/dist/components/fields/choices/CheckboxInput.d.ts +5 -0
- package/dist/components/fields/choices/DropdownInput.d.ts +8 -0
- package/dist/components/fields/choices/MultiSelection.d.ts +9 -0
- package/dist/components/fields/choices/RadioInput.d.ts +8 -0
- package/dist/components/fields/choices/SwitchInput.d.ts +5 -0
- package/dist/components/fields/date-time/DateInput.d.ts +6 -0
- package/dist/components/fields/date-time/TimeInput.d.ts +6 -0
- package/dist/components/fields/text-numeric/FloatArrayInput.d.ts +5 -0
- package/dist/components/fields/text-numeric/FloatInput.d.ts +9 -0
- package/dist/components/fields/text-numeric/IntegerArrayInput.d.ts +6 -0
- package/dist/components/fields/text-numeric/IntegerInput.d.ts +6 -0
- package/dist/components/fields/text-numeric/MultilineTextInput.d.ts +6 -0
- package/dist/components/fields/text-numeric/NumericStepperInput.d.ts +6 -0
- package/dist/components/fields/text-numeric/TextInput.d.ts +8 -0
- package/dist/components/fields/ui-elements/Button.d.ts +14 -0
- package/dist/components/fields/ui-elements/Description.d.ts +10 -0
- package/dist/components/fields/ui-elements/ImageDisplay.d.ts +5 -0
- package/dist/components/fields/ui-elements/Separator.d.ts +21 -0
- package/dist/components/form/Formitiva.d.ts +16 -0
- package/dist/components/form/FormitivaProvider.d.ts +18 -0
- package/dist/components/form/FormitivaRenderer.d.ts +20 -0
- package/dist/components/form/SubmissionButton.d.ts +8 -0
- package/dist/components/form/SubmissionMessage.d.ts +7 -0
- package/dist/components/layout/FieldGroup.d.ts +16 -0
- package/dist/components/layout/FieldRenderer.d.ts +14 -0
- package/dist/components/layout/LayoutComponents.d.ts +77 -0
- package/dist/core/env.d.ts +1 -0
- package/dist/core/fieldVisibility.d.ts +13 -0
- package/dist/core/formitivaModel.d.ts +31 -0
- package/dist/core/formitivaTypes.d.ts +128 -0
- package/dist/core/registries/baseRegistry.d.ts +15 -0
- package/dist/core/registries/buttonHandlerRegistry.d.ts +44 -0
- package/dist/core/registries/componentRegistry.d.ts +15 -0
- package/dist/core/registries/pluginRegistry.d.ts +45 -0
- package/dist/core/registries/submissionHandlerRegistry.d.ts +7 -0
- package/dist/core/registries/validationHandlerRegistry.d.ts +20 -0
- package/dist/core/submitForm.d.ts +9 -0
- package/dist/formitiva.cjs.js +404 -0
- package/dist/formitiva.es.js +5626 -0
- package/dist/hooks/useDebouncedCallback.d.ts +27 -0
- package/dist/hooks/useDropdownPosition.d.ts +6 -0
- package/dist/hooks/useFieldValidator.d.ts +3 -0
- package/dist/hooks/useFormitivaContext.d.ts +4 -0
- package/dist/hooks/useUncontrolledValidatedInput.d.ts +21 -0
- package/dist/hooks/useUnitValueField.d.ts +13 -0
- package/dist/index.d.ts +27 -0
- package/dist/react.css +1 -0
- package/dist/styles/cssClasses.d.ts +15 -0
- package/dist/styles/themeUtils.d.ts +31 -0
- package/dist/themes/ant-design-dark.css +31 -0
- package/dist/themes/ant-design.css +42 -0
- package/dist/themes/blueprint-dark.css +31 -0
- package/dist/themes/blueprint.css +43 -0
- package/dist/themes/compact-variant.css +8 -0
- package/dist/themes/fluent.css +40 -0
- package/dist/themes/glass-morphism.css +25 -0
- package/dist/themes/high-contrast-accessible.css +22 -0
- package/dist/themes/ios-mobile.css +32 -0
- package/dist/themes/macos-native.css +32 -0
- package/dist/themes/material-dark.css +27 -0
- package/dist/themes/material.css +46 -0
- package/dist/themes/midnight-dark.css +24 -0
- package/dist/themes/modern-light.css +23 -0
- package/dist/themes/neon-cyber-dark.css +24 -0
- package/dist/themes/shadcn.css +40 -0
- package/dist/themes/soft-pastel.css +24 -0
- package/dist/themes/spacious-variant.css +9 -0
- package/dist/themes/tailwind-dark.css +30 -0
- package/dist/themes/tailwind.css +50 -0
- package/dist/utils/definitionSerializers.d.ts +62 -0
- package/dist/utils/groupingHelpers.d.ts +24 -0
- package/dist/utils/translationUtils.d.ts +52 -0
- package/dist/utils/unitValueMapper.d.ts +14 -0
- package/dist/validation/registerBuiltinTypeValidators.d.ts +11 -0
- package/dist/validation/validation.d.ts +12 -0
- package/dist/validation/validators/validateColorField.d.ts +2 -0
- package/dist/validation/validators/validateDateField.d.ts +2 -0
- package/dist/validation/validators/validateEmailField.d.ts +2 -0
- package/dist/validation/validators/validateFieldPattern.d.ts +3 -0
- package/dist/validation/validators/validateFileField.d.ts +2 -0
- package/dist/validation/validators/validateFloatField.d.ts +3 -0
- package/dist/validation/validators/validateIntegerField.d.ts +3 -0
- package/dist/validation/validators/validatePhoneField.d.ts +2 -0
- package/dist/validation/validators/validateRatingField.d.ts +2 -0
- package/dist/validation/validators/validateSelectionFields.d.ts +3 -0
- package/dist/validation/validators/validateSliderField.d.ts +2 -0
- package/dist/validation/validators/validateTextField.d.ts +2 -0
- package/dist/validation/validators/validateTimeField.d.ts +2 -0
- package/dist/validation/validators/validateUnitValueField.d.ts +2 -0
- package/dist/validation/validators/validateUrlField.d.ts +2 -0
- package/package.json +92 -0
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import type { BaseInputProps, DefinitionPropertyField } from "../../../core/formitivaTypes";
|
|
3
|
+
type CheckboxInputProps = BaseInputProps<boolean, DefinitionPropertyField>;
|
|
4
|
+
declare const _default: React.NamedExoticComponent<CheckboxInputProps>;
|
|
5
|
+
export default _default;
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import type { BaseInputProps, DefinitionPropertyField } from "../../../core/formitivaTypes";
|
|
3
|
+
type DropdownField = DefinitionPropertyField & {
|
|
4
|
+
options: NonNullable<DefinitionPropertyField['options']>;
|
|
5
|
+
};
|
|
6
|
+
export type DropdownInputProps = BaseInputProps<string, DropdownField>;
|
|
7
|
+
declare const _default: React.NamedExoticComponent<DropdownInputProps>;
|
|
8
|
+
export default _default;
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import type { DefinitionPropertyField } from "../../../core/formitivaTypes";
|
|
3
|
+
import type { BaseInputProps } from "../../../core/formitivaTypes";
|
|
4
|
+
export type OptionsField = DefinitionPropertyField & {
|
|
5
|
+
options: NonNullable<DefinitionPropertyField["options"]>;
|
|
6
|
+
};
|
|
7
|
+
type MultiSelectionProps = BaseInputProps<string[] | null, OptionsField>;
|
|
8
|
+
declare const _default: React.NamedExoticComponent<MultiSelectionProps>;
|
|
9
|
+
export default _default;
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import type { BaseInputProps, DefinitionPropertyField } from "../../../core/formitivaTypes";
|
|
3
|
+
type RadioField = DefinitionPropertyField & {
|
|
4
|
+
options: NonNullable<DefinitionPropertyField["options"]>;
|
|
5
|
+
};
|
|
6
|
+
export type RadioInputProps = BaseInputProps<string, RadioField>;
|
|
7
|
+
declare const _default: React.NamedExoticComponent<RadioInputProps>;
|
|
8
|
+
export default _default;
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import type { BaseInputProps, DefinitionPropertyField } from "../../../core/formitivaTypes";
|
|
3
|
+
type SwitchInputProps = BaseInputProps<boolean, DefinitionPropertyField>;
|
|
4
|
+
declare const _default: React.NamedExoticComponent<SwitchInputProps>;
|
|
5
|
+
export default _default;
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import type { DefinitionPropertyField } from "../../../core/formitivaTypes";
|
|
3
|
+
import type { BaseInputProps } from "../../../core/formitivaTypes";
|
|
4
|
+
type DateInputProps = BaseInputProps<string, DefinitionPropertyField>;
|
|
5
|
+
declare const _default: React.NamedExoticComponent<DateInputProps>;
|
|
6
|
+
export default _default;
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import type { DefinitionPropertyField } from "../../../core/formitivaTypes";
|
|
3
|
+
import type { BaseInputProps } from "../../../core/formitivaTypes";
|
|
4
|
+
type TimeInputProps = BaseInputProps<string, DefinitionPropertyField>;
|
|
5
|
+
declare const _default: React.NamedExoticComponent<TimeInputProps>;
|
|
6
|
+
export default _default;
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import type { DefinitionPropertyField, BaseInputProps } from "../../../core/formitivaTypes";
|
|
3
|
+
export type FloatArrayInputProps = BaseInputProps<string | number[], DefinitionPropertyField>;
|
|
4
|
+
declare const _default: React.NamedExoticComponent<FloatArrayInputProps>;
|
|
5
|
+
export default _default;
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import type { DefinitionPropertyField } from "../../../core/formitivaTypes";
|
|
3
|
+
import type { BaseInputProps } from "../../../core/formitivaTypes";
|
|
4
|
+
/**
|
|
5
|
+
* FloatInput component
|
|
6
|
+
*/
|
|
7
|
+
export type FloatInputProps = BaseInputProps<number | string, DefinitionPropertyField>;
|
|
8
|
+
declare const _default: React.NamedExoticComponent<FloatInputProps>;
|
|
9
|
+
export default _default;
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import type { DefinitionPropertyField } from "../../../core/formitivaTypes";
|
|
3
|
+
import type { BaseInputProps } from "../../../core/formitivaTypes";
|
|
4
|
+
export type IntegerArrayInputProps = BaseInputProps<string | number[], DefinitionPropertyField>;
|
|
5
|
+
declare const _default: React.NamedExoticComponent<IntegerArrayInputProps>;
|
|
6
|
+
export default _default;
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import type { DefinitionPropertyField } from "../../../core/formitivaTypes";
|
|
3
|
+
import type { BaseInputProps } from "../../../core/formitivaTypes";
|
|
4
|
+
export type IntegerInputProps = BaseInputProps<number | string, DefinitionPropertyField>;
|
|
5
|
+
declare const _default: React.NamedExoticComponent<IntegerInputProps>;
|
|
6
|
+
export default _default;
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import type { DefinitionPropertyField } from "../../../core/formitivaTypes";
|
|
3
|
+
import type { BaseInputProps } from "../../../core/formitivaTypes";
|
|
4
|
+
type TextInputProps = BaseInputProps<string, DefinitionPropertyField>;
|
|
5
|
+
declare const _default: React.NamedExoticComponent<TextInputProps>;
|
|
6
|
+
export default _default;
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import type { DefinitionPropertyField } from "../../../core/formitivaTypes";
|
|
3
|
+
import type { BaseInputProps } from "../../../core/formitivaTypes";
|
|
4
|
+
export type NumericStepperInputProps = BaseInputProps<string | number, DefinitionPropertyField>;
|
|
5
|
+
declare const _default: React.NamedExoticComponent<NumericStepperInputProps>;
|
|
6
|
+
export default _default;
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import type { DefinitionPropertyField } from "../../../core/formitivaTypes";
|
|
3
|
+
import type { BaseInputProps } from "../../../core/formitivaTypes";
|
|
4
|
+
type TextInputProps = BaseInputProps<string, DefinitionPropertyField> & {
|
|
5
|
+
error?: string | null;
|
|
6
|
+
};
|
|
7
|
+
declare const TextInput: React.FC<TextInputProps>;
|
|
8
|
+
export default TextInput;
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import type { BaseInputProps, DefinitionPropertyField, FieldValueType, ErrorType } from "../../../core/formitivaTypes";
|
|
3
|
+
/**
|
|
4
|
+
* Extended props for Button component
|
|
5
|
+
* Unlike other fields, Button needs access to all form values
|
|
6
|
+
* and the ability to change any field
|
|
7
|
+
*/
|
|
8
|
+
export interface ButtonInputProps extends BaseInputProps<null, DefinitionPropertyField> {
|
|
9
|
+
valuesMap: Record<string, FieldValueType>;
|
|
10
|
+
handleChange: (fieldName: string, value: FieldValueType) => void;
|
|
11
|
+
handleError: (fieldName: string, error: ErrorType) => void;
|
|
12
|
+
}
|
|
13
|
+
declare const _default: React.NamedExoticComponent<ButtonInputProps>;
|
|
14
|
+
export default _default;
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
interface DescriptionProps {
|
|
3
|
+
field: {
|
|
4
|
+
displayText?: string;
|
|
5
|
+
textAlign?: "left" | "center" | "right";
|
|
6
|
+
allowHtml?: boolean;
|
|
7
|
+
};
|
|
8
|
+
}
|
|
9
|
+
declare const _default: React.NamedExoticComponent<DescriptionProps>;
|
|
10
|
+
export default _default;
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import type { BaseInputProps, DefinitionPropertyField } from "../../../core/formitivaTypes";
|
|
3
|
+
export type ImageProps = BaseInputProps<string, DefinitionPropertyField>;
|
|
4
|
+
declare const _default: React.NamedExoticComponent<ImageProps>;
|
|
5
|
+
export default _default;
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
interface SeparatorProps {
|
|
3
|
+
color?: string;
|
|
4
|
+
thickness?: number;
|
|
5
|
+
margin?: string | number;
|
|
6
|
+
label?: string | null;
|
|
7
|
+
alignment?: "left" | "center" | "right";
|
|
8
|
+
}
|
|
9
|
+
export declare const Separator: React.FC<SeparatorProps>;
|
|
10
|
+
interface FieldSeparatorProps {
|
|
11
|
+
field: {
|
|
12
|
+
color?: string;
|
|
13
|
+
thickness?: number;
|
|
14
|
+
margin?: string | number;
|
|
15
|
+
label?: string;
|
|
16
|
+
alignment?: "left" | "center" | "right";
|
|
17
|
+
};
|
|
18
|
+
t: (text: string) => string;
|
|
19
|
+
}
|
|
20
|
+
declare const _default: React.NamedExoticComponent<FieldSeparatorProps>;
|
|
21
|
+
export default _default;
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import type { FormitivaProps } from "../../core/formitivaTypes";
|
|
3
|
+
/**
|
|
4
|
+
* Formitiva component - The main form rendering component
|
|
5
|
+
* @param {FormitivaProps} props - The component props
|
|
6
|
+
* @param {string | Record<string, unknown> | FormitivaDefinition} props.definitionData - Form definition data (JSON string, object, or FormitivaDefinition)
|
|
7
|
+
* @param {FormitivaInstance} [props.instance] - Optional form instance with saved values
|
|
8
|
+
* @param {string} [props.language] - Language code for localization
|
|
9
|
+
* @param {string} [props.className] - Additional CSS class names
|
|
10
|
+
* @param {string} [props.theme] - Theme name ('light' or 'dark')
|
|
11
|
+
* @param {React.CSSProperties} [props.style] - Inline styles
|
|
12
|
+
* @param {FieldValidationMode} [props.fieldValidationMode] - Field Validation mode ('onEdit', 'onBlur', 'onSubmission', 'realTime' [deprecated])
|
|
13
|
+
* @param {boolean} [props.displayInstanceName] - Whether to display the instance name
|
|
14
|
+
*/
|
|
15
|
+
declare const Formitiva: React.FC<FormitivaProps>;
|
|
16
|
+
export default Formitiva;
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import type { FieldValidationMode, FormitivaProviderProps } from '../../core/formitivaTypes';
|
|
2
|
+
import '../../styles/formitiva.css';
|
|
3
|
+
/**
|
|
4
|
+
* FormitivaProvider component - Context provider for Formitiva configuration
|
|
5
|
+
* @param {FormitivaProviderProps} props - The component props
|
|
6
|
+
* @param {ReactNode} props.children - Child components to wrap with context
|
|
7
|
+
* @param {string} [props.definitionName] - Name of the form definition
|
|
8
|
+
* @param {Record<string, unknown>} [props.defaultStyle] - Default styling configuration
|
|
9
|
+
* @param {string} [props.defaultLanguage='en'] - Default language code for translations
|
|
10
|
+
* @param {string} [props.defaultTheme='light'] - Default theme name
|
|
11
|
+
* @param {string} [props.defaultLocalizeName] - Name of custom localization file
|
|
12
|
+
* @param {FieldValidationMode} [props.defaultFieldValidationMode='onEdit'] - Field Validation mode
|
|
13
|
+
* @param {string} [props.className='formitiva-container'] - CSS class name for the container
|
|
14
|
+
* @param {boolean} [props.displayInstanceName] - Whether to display the instance name
|
|
15
|
+
*/
|
|
16
|
+
export declare const FormitivaProvider: ({ children, definitionName, defaultStyle, defaultLanguage, defaultTheme, defaultLocalizeName, defaultFieldValidationMode, className, defaultDisplayInstanceName }: FormitivaProviderProps & {
|
|
17
|
+
defaultFieldValidationMode?: FieldValidationMode;
|
|
18
|
+
}) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import type { FormitivaDefinition, FormitivaInstance, FormSubmissionHandler, FormValidationHandler } from "../../core/formitivaTypes";
|
|
3
|
+
export interface FormitivaRendererProps {
|
|
4
|
+
definition: FormitivaDefinition;
|
|
5
|
+
instance: FormitivaInstance;
|
|
6
|
+
onSubmit?: FormSubmissionHandler;
|
|
7
|
+
onValidation?: FormValidationHandler;
|
|
8
|
+
chunkSize?: number;
|
|
9
|
+
chunkDelay?: number;
|
|
10
|
+
}
|
|
11
|
+
/**
|
|
12
|
+
* FormitivaRenderer component - Internal form renderer with field management
|
|
13
|
+
* @param {FormitivaRendererProps} props - The component props
|
|
14
|
+
* @param {FormitivaDefinition} props.definition - The form definition object
|
|
15
|
+
* @param {FormitivaInstance} props.instance - The form instance with values
|
|
16
|
+
* @param {number} [props.chunkSize=50] - Number of fields to render per chunk for performance
|
|
17
|
+
* @param {number} [props.chunkDelay=50] - Delay in ms between rendering chunks
|
|
18
|
+
*/
|
|
19
|
+
declare const FormitivaRenderer: React.FC<FormitivaRendererProps>;
|
|
20
|
+
export default FormitivaRenderer;
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import type { DefinitionPropertyField, FieldValueType, ErrorType } from "../../core/formitivaTypes";
|
|
3
|
+
export interface FieldGroupProps {
|
|
4
|
+
groupName: string;
|
|
5
|
+
defaultOpen?: boolean;
|
|
6
|
+
fields: DefinitionPropertyField[];
|
|
7
|
+
valuesMap: Record<string, FieldValueType>;
|
|
8
|
+
handleChange: (fieldName: string, value: FieldValueType) => void;
|
|
9
|
+
handleError?: (fieldName: string, error: ErrorType) => void;
|
|
10
|
+
errorsMap?: Record<string, string>;
|
|
11
|
+
t: (key: string) => string;
|
|
12
|
+
}
|
|
13
|
+
/**
|
|
14
|
+
* Self-managing collapsible field group component with internal toggle state
|
|
15
|
+
*/
|
|
16
|
+
export declare const FieldGroup: React.NamedExoticComponent<FieldGroupProps>;
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import type { DefinitionPropertyField, FieldValueType, ErrorType } from "../../core/formitivaTypes";
|
|
3
|
+
export interface FieldRendererProps {
|
|
4
|
+
field: DefinitionPropertyField;
|
|
5
|
+
valuesMap: Record<string, FieldValueType>;
|
|
6
|
+
handleChange: (fieldName: string, value: FieldValueType) => void;
|
|
7
|
+
handleError?: (fieldName: string, error: ErrorType) => void;
|
|
8
|
+
errorsMap?: Record<string, string>;
|
|
9
|
+
}
|
|
10
|
+
/**
|
|
11
|
+
* Memoized component for rendering a single field with error handling
|
|
12
|
+
* and optimized re-render prevention
|
|
13
|
+
*/
|
|
14
|
+
export declare const FieldRenderer: React.NamedExoticComponent<FieldRendererProps>;
|
|
@@ -0,0 +1,77 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import type { DefinitionPropertyField } from "../../core/formitivaTypes";
|
|
3
|
+
/**
|
|
4
|
+
* ColumnFieldLayout - Vertical layout wrapper for form fields
|
|
5
|
+
*
|
|
6
|
+
* This component provides a column-based layout pattern:
|
|
7
|
+
* - Label on top (left-aligned or center-aligned based on labelLayout)
|
|
8
|
+
* - Value/input area below
|
|
9
|
+
* - Optional tooltip support
|
|
10
|
+
* - Error display area
|
|
11
|
+
*
|
|
12
|
+
* Usage:
|
|
13
|
+
* <ColumnFieldLayout field={field} error={error}>
|
|
14
|
+
* <textarea ... />
|
|
15
|
+
* </ColumnFieldLayout>
|
|
16
|
+
*/
|
|
17
|
+
export declare const ColumnFieldLayout: React.MemoExoticComponent<({ field, error, children, showLabel, }: {
|
|
18
|
+
field: DefinitionPropertyField;
|
|
19
|
+
error?: string | null;
|
|
20
|
+
children: React.ReactNode;
|
|
21
|
+
showLabel?: boolean;
|
|
22
|
+
}) => import("react/jsx-runtime").JSX.Element>;
|
|
23
|
+
/**
|
|
24
|
+
* RowFieldLayout - Horizontal layout wrapper for form fields
|
|
25
|
+
*
|
|
26
|
+
* This component provides the traditional two-column layout pattern:
|
|
27
|
+
* - Label on the left using CSS_CLASSES.label
|
|
28
|
+
* - Value/input area on the right
|
|
29
|
+
* - Optional tooltip support
|
|
30
|
+
* - Error display area
|
|
31
|
+
*
|
|
32
|
+
* Usage:
|
|
33
|
+
* <RowFieldLayout field={field} error={error}>
|
|
34
|
+
* <input ... />
|
|
35
|
+
* </RowFieldLayout>
|
|
36
|
+
*/
|
|
37
|
+
export declare const RowFieldLayout: React.MemoExoticComponent<({ field, error, children, rightAlign, }: {
|
|
38
|
+
field: DefinitionPropertyField;
|
|
39
|
+
error?: string | null;
|
|
40
|
+
children: React.ReactNode;
|
|
41
|
+
rightAlign?: boolean;
|
|
42
|
+
}) => import("react/jsx-runtime").JSX.Element>;
|
|
43
|
+
/**
|
|
44
|
+
* StandardFieldLayout - Smart layout wrapper that delegates to appropriate layout component
|
|
45
|
+
*
|
|
46
|
+
* This component automatically chooses between row and column layouts based on field.labelLayout:
|
|
47
|
+
* - Uses ColumnFieldLayout when field.labelLayout === 'column'
|
|
48
|
+
* - Uses RowFieldLayout for default/row layout
|
|
49
|
+
* - Maintains consistent API for all field components
|
|
50
|
+
*
|
|
51
|
+
* Usage:
|
|
52
|
+
* <StandardFieldLayout field={field} error={error}>
|
|
53
|
+
* <input ... />
|
|
54
|
+
* </StandardFieldLayout>
|
|
55
|
+
*/
|
|
56
|
+
export declare const StandardFieldLayout: React.MemoExoticComponent<({ field, error, children, rightAlign, }: {
|
|
57
|
+
field: DefinitionPropertyField;
|
|
58
|
+
error?: string | null;
|
|
59
|
+
children: React.ReactNode;
|
|
60
|
+
rightAlign?: boolean;
|
|
61
|
+
}) => import("react/jsx-runtime").JSX.Element>;
|
|
62
|
+
export declare const ErrorDiv: React.MemoExoticComponent<({ children, id }: {
|
|
63
|
+
children: React.ReactNode;
|
|
64
|
+
id?: string;
|
|
65
|
+
}) => import("react/jsx-runtime").JSX.Element>;
|
|
66
|
+
/**
|
|
67
|
+
* InstanceName - display and edit an instance name in a compact grid row
|
|
68
|
+
* on top of fields list
|
|
69
|
+
*
|
|
70
|
+
* Props:
|
|
71
|
+
* - `name`: current instance name
|
|
72
|
+
* - `onChange`: callback invoked with new name when edited
|
|
73
|
+
*/
|
|
74
|
+
export declare const InstanceName: React.MemoExoticComponent<({ name, onChange }: {
|
|
75
|
+
name: string;
|
|
76
|
+
onChange: (n: string) => void;
|
|
77
|
+
}) => import("react/jsx-runtime").JSX.Element>;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const IS_TEST_ENV: boolean;
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import type { DefinitionPropertyField, FieldValueType } from "./formitivaTypes";
|
|
2
|
+
/**
|
|
3
|
+
* Updates visibility map based on current field values and parent-child relationships
|
|
4
|
+
*/
|
|
5
|
+
export declare const updateVisibilityMap: (fields: DefinitionPropertyField[], values: Record<string, FieldValueType>, oldVisibility: Record<string, boolean>, fieldMapRef: Record<string, DefinitionPropertyField>) => Record<string, boolean>;
|
|
6
|
+
/**
|
|
7
|
+
* Updates visibility when a specific field value changes
|
|
8
|
+
*/
|
|
9
|
+
export declare const updateVisibilityBasedOnSelection: (visibility: Record<string, boolean>, fieldMap: Record<string, DefinitionPropertyField>, valuesMap: Record<string, FieldValueType>, fieldName: string, value: FieldValueType) => Record<string, boolean>;
|
|
10
|
+
/**
|
|
11
|
+
* Checks if a field should be visible based on its parent relationships
|
|
12
|
+
*/
|
|
13
|
+
export declare const isFieldVisible: (fieldName: string, fieldMap: Record<string, DefinitionPropertyField>, values: Record<string, FieldValueType>) => boolean;
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import type { FormitivaDefinition, FormitivaInstance } from "./formitivaTypes";
|
|
2
|
+
export interface LoadDefinitionOptions {
|
|
3
|
+
validateSchema?: boolean;
|
|
4
|
+
}
|
|
5
|
+
export interface DefinitionLoadResult {
|
|
6
|
+
success: boolean;
|
|
7
|
+
definition?: FormitivaDefinition;
|
|
8
|
+
error?: string;
|
|
9
|
+
}
|
|
10
|
+
export interface InstanceLoadResult {
|
|
11
|
+
success: boolean;
|
|
12
|
+
instance?: FormitivaInstance;
|
|
13
|
+
error?: string;
|
|
14
|
+
}
|
|
15
|
+
/**
|
|
16
|
+
* Validates that a definition object has the required structure
|
|
17
|
+
*/
|
|
18
|
+
export declare function validateDefinitionSchema(definition: FormitivaDefinition): string | null;
|
|
19
|
+
/**
|
|
20
|
+
* Load definition from a JSON string. This intentionally does not perform any file I/O.
|
|
21
|
+
*/
|
|
22
|
+
export declare function loadJsonDefinition(jsonData: string, options?: LoadDefinitionOptions): Promise<DefinitionLoadResult>;
|
|
23
|
+
/**
|
|
24
|
+
* Create instance from definition with validation and error handling
|
|
25
|
+
*/
|
|
26
|
+
export declare function createInstanceFromDefinition(definition: FormitivaDefinition, name: string): InstanceLoadResult;
|
|
27
|
+
/**
|
|
28
|
+
* Load instance data with validation
|
|
29
|
+
*/
|
|
30
|
+
export declare function loadInstance(instanceData: string | Record<string, unknown>): InstanceLoadResult;
|
|
31
|
+
export declare function upgradeInstanceToLatestDefinition(oldInstance: FormitivaInstance, latestDefinition: FormitivaDefinition, callback?: (oldInstance: FormitivaInstance, newInstance: Record<string, unknown>, latestDefinition: FormitivaDefinition) => void): InstanceLoadResult;
|
|
@@ -0,0 +1,128 @@
|
|
|
1
|
+
import type { ReactNode } from 'react';
|
|
2
|
+
type Integer = number;
|
|
3
|
+
type Float = number;
|
|
4
|
+
export type FieldValueType = boolean | Integer | Float | string | Integer[] | Float[] | string[] | [number, string] | File | File[];
|
|
5
|
+
export type ErrorType = string | null;
|
|
6
|
+
export type ParentField = Record<string, string[] | Integer[] | boolean[]>;
|
|
7
|
+
export type ValidationHandlerName = string | [string] | [string, string];
|
|
8
|
+
export interface DefinitionPropertyField {
|
|
9
|
+
name: string;
|
|
10
|
+
displayName: string;
|
|
11
|
+
type: string;
|
|
12
|
+
defaultValue: FieldValueType;
|
|
13
|
+
disabled?: boolean;
|
|
14
|
+
required?: boolean;
|
|
15
|
+
parents?: ParentField;
|
|
16
|
+
children?: Record<string, string[]>;
|
|
17
|
+
group?: string;
|
|
18
|
+
tooltip?: string;
|
|
19
|
+
labelLayout?: 'row' | 'column-left' | 'column-center';
|
|
20
|
+
validationHandlerName?: ValidationHandlerName;
|
|
21
|
+
dimension?: string;
|
|
22
|
+
defaultUnit?: string;
|
|
23
|
+
options?: Array<{
|
|
24
|
+
label: string;
|
|
25
|
+
value: string;
|
|
26
|
+
}>;
|
|
27
|
+
minLength?: number;
|
|
28
|
+
maxLength?: number;
|
|
29
|
+
pattern?: string;
|
|
30
|
+
patternErrorMessage?: string;
|
|
31
|
+
placeholder?: string;
|
|
32
|
+
min?: number;
|
|
33
|
+
max?: number;
|
|
34
|
+
minInclusive?: boolean;
|
|
35
|
+
maxInclusive?: boolean;
|
|
36
|
+
step?: number;
|
|
37
|
+
minCount?: number;
|
|
38
|
+
maxCount?: number;
|
|
39
|
+
minDate?: string;
|
|
40
|
+
maxDate?: string;
|
|
41
|
+
includeSeconds?: boolean;
|
|
42
|
+
layout?: 'horizontal' | 'vertical' | 'row' | 'column';
|
|
43
|
+
alignment?: 'left' | 'center' | 'right';
|
|
44
|
+
width?: number;
|
|
45
|
+
height?: number;
|
|
46
|
+
localized?: string;
|
|
47
|
+
minHeight?: string;
|
|
48
|
+
accept?: string;
|
|
49
|
+
multiple?: boolean;
|
|
50
|
+
allowRelative?: boolean;
|
|
51
|
+
action?: string;
|
|
52
|
+
displayText?: string;
|
|
53
|
+
textAlign?: 'left' | 'center' | 'right';
|
|
54
|
+
}
|
|
55
|
+
export interface FormitivaDefinition {
|
|
56
|
+
name: string;
|
|
57
|
+
version: string;
|
|
58
|
+
displayName: string;
|
|
59
|
+
localization?: string;
|
|
60
|
+
properties: DefinitionPropertyField[];
|
|
61
|
+
validationHandlerName?: string;
|
|
62
|
+
submitHandlerName?: string;
|
|
63
|
+
}
|
|
64
|
+
export interface FormitivaInstance {
|
|
65
|
+
name: string;
|
|
66
|
+
definition: string;
|
|
67
|
+
version: string;
|
|
68
|
+
values: Record<string, FieldValueType>;
|
|
69
|
+
}
|
|
70
|
+
export interface FormitivaProps {
|
|
71
|
+
definitionData: string | Record<string, unknown> | FormitivaDefinition;
|
|
72
|
+
language?: string;
|
|
73
|
+
instance?: FormitivaInstance;
|
|
74
|
+
className?: string;
|
|
75
|
+
theme?: string;
|
|
76
|
+
style?: React.CSSProperties;
|
|
77
|
+
fieldValidationMode?: FieldValidationMode;
|
|
78
|
+
displayInstanceName?: boolean;
|
|
79
|
+
onSubmit?: FormSubmissionHandler;
|
|
80
|
+
onValidation?: FormValidationHandler;
|
|
81
|
+
}
|
|
82
|
+
export type TranslationFunction = (text: string, ...args: unknown[]) => string;
|
|
83
|
+
/** Validation mode controls where validation is performed.
|
|
84
|
+
* 'onEdit' (default) - Validate fields as they are edited, showing errors immediately.
|
|
85
|
+
* 'onBlur' - Validate fields when they lose focus, reducing validation work while typing.
|
|
86
|
+
* 'onSubmission' - Validate only when the form is submitted, showing errors after submission attempt.
|
|
87
|
+
* 'realTime' - deprecated, use 'onEdit' instead.
|
|
88
|
+
*/
|
|
89
|
+
export type FieldValidationMode = 'onEdit' | 'onBlur' | 'onSubmission' | 'realTime';
|
|
90
|
+
export type FieldCustomValidationHandler = (fieldName: string, value: FieldValueType | unknown, t: TranslationFunction) => string | undefined;
|
|
91
|
+
export type FieldTypeValidationHandler = (field: DefinitionPropertyField, input: FieldValueType, t: TranslationFunction) => string | undefined;
|
|
92
|
+
export type FormValidationHandler = (valuesMap: Record<string, FieldValueType | unknown>, t: TranslationFunction) => string[] | Promise<string[] | undefined> | undefined;
|
|
93
|
+
export type FormSubmissionHandler = (definition: FormitivaDefinition, instanceName: string | null, valuesMap: Record<string, FieldValueType | unknown>, t: TranslationFunction) => string[] | undefined | Promise<string[] | undefined>;
|
|
94
|
+
export type InputOnChange<T> = (value: T | string) => void;
|
|
95
|
+
export interface BaseInputProps<TValue = unknown, TField extends DefinitionPropertyField = DefinitionPropertyField> {
|
|
96
|
+
field: TField;
|
|
97
|
+
value: TValue;
|
|
98
|
+
disabled?: boolean;
|
|
99
|
+
placeholder?: string;
|
|
100
|
+
onChange?: InputOnChange<TValue>;
|
|
101
|
+
onError?: (error: string | null) => void;
|
|
102
|
+
error?: string | null;
|
|
103
|
+
}
|
|
104
|
+
export type FormitivaContextType = {
|
|
105
|
+
definitionName: string;
|
|
106
|
+
language: string;
|
|
107
|
+
theme: string;
|
|
108
|
+
formStyle: {
|
|
109
|
+
container?: React.CSSProperties;
|
|
110
|
+
titleStyle?: React.CSSProperties;
|
|
111
|
+
};
|
|
112
|
+
fieldStyle: Record<string, unknown>;
|
|
113
|
+
t: TranslationFunction;
|
|
114
|
+
fieldValidationMode: FieldValidationMode;
|
|
115
|
+
displayInstanceName: boolean;
|
|
116
|
+
};
|
|
117
|
+
export type FormitivaProviderProps = {
|
|
118
|
+
children: ReactNode;
|
|
119
|
+
definitionName?: string;
|
|
120
|
+
defaultStyle?: Record<string, unknown>;
|
|
121
|
+
defaultLanguage?: string;
|
|
122
|
+
defaultTheme?: string;
|
|
123
|
+
defaultLocalizeName?: string;
|
|
124
|
+
defaultFieldValidationMode?: FieldValidationMode;
|
|
125
|
+
className?: string;
|
|
126
|
+
defaultDisplayInstanceName?: boolean;
|
|
127
|
+
};
|
|
128
|
+
export {};
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
export declare class BaseRegistry<T> {
|
|
2
|
+
private map;
|
|
3
|
+
register(name: string, value: T): void;
|
|
4
|
+
get(name: string): T | undefined;
|
|
5
|
+
has(name: string): boolean;
|
|
6
|
+
list(): string[];
|
|
7
|
+
entries(): [string, T][];
|
|
8
|
+
values(): T[];
|
|
9
|
+
size(): number;
|
|
10
|
+
unregister(name: string): boolean;
|
|
11
|
+
clear(): void;
|
|
12
|
+
registerAll(entries: Record<string, T> | [string, T][]): void;
|
|
13
|
+
getOrDefault(name: string, defaultValue: T): T;
|
|
14
|
+
}
|
|
15
|
+
export default BaseRegistry;
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
import type { FieldValueType, ErrorType, TranslationFunction } from "../formitivaTypes";
|
|
2
|
+
import BaseRegistry from "./baseRegistry";
|
|
3
|
+
/**
|
|
4
|
+
* Button Handler function type
|
|
5
|
+
* Button handlers can access all form values, change any field value, and report errors
|
|
6
|
+
*
|
|
7
|
+
* @param valuesMap - All form values (read-only)
|
|
8
|
+
* @param handleChange - Function to update any field's value
|
|
9
|
+
* @param handleError - Function to report errors for any field
|
|
10
|
+
* @param t - Translation function
|
|
11
|
+
* @returns void or Promise<void>
|
|
12
|
+
*/
|
|
13
|
+
export type ButtonHandler = (valuesMap: Record<string, FieldValueType>, handleChange: (fieldName: string, value: FieldValueType) => void, handleError: (fieldName: string, error: ErrorType) => void, t: TranslationFunction) => void | Promise<void>;
|
|
14
|
+
declare const registry: BaseRegistry<ButtonHandler>;
|
|
15
|
+
/**
|
|
16
|
+
* Register a button handler function
|
|
17
|
+
* @param handlerName - The name to register the handler under (referenced in definition's action property)
|
|
18
|
+
* @param fn - The button handler function
|
|
19
|
+
*/
|
|
20
|
+
export declare function registerButtonHandler(handlerName: string, fn: ButtonHandler): void;
|
|
21
|
+
/**
|
|
22
|
+
* Get a registered button handler by name
|
|
23
|
+
* @param handlerName - The name of the handler to retrieve
|
|
24
|
+
* @returns The button handler function or undefined if not found
|
|
25
|
+
*/
|
|
26
|
+
export declare function getButtonHandler(handlerName: string): ButtonHandler | undefined;
|
|
27
|
+
/**
|
|
28
|
+
* Check if a button handler is registered
|
|
29
|
+
* @param handlerName - The name of the handler to check
|
|
30
|
+
* @returns true if the handler is registered, false otherwise
|
|
31
|
+
*/
|
|
32
|
+
export declare function hasButtonHandler(handlerName: string): boolean;
|
|
33
|
+
/**
|
|
34
|
+
* Unregister a button handler
|
|
35
|
+
* @param handlerName - The name of the handler to unregister
|
|
36
|
+
* @returns true if the handler was found and removed, false otherwise
|
|
37
|
+
*/
|
|
38
|
+
export declare function unregisterButtonHandler(handlerName: string): boolean;
|
|
39
|
+
/**
|
|
40
|
+
* List all registered button handler names
|
|
41
|
+
* @returns Array of registered handler names
|
|
42
|
+
*/
|
|
43
|
+
export declare function listButtonHandlers(): string[];
|
|
44
|
+
export default registry;
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import BaseRegistry from "./baseRegistry";
|
|
2
|
+
export type DebounceConfig = false | {
|
|
3
|
+
wait?: number;
|
|
4
|
+
leading?: boolean;
|
|
5
|
+
trailing?: boolean;
|
|
6
|
+
};
|
|
7
|
+
export declare const DEBOUNCE_CONFIG: Record<string, DebounceConfig>;
|
|
8
|
+
declare const registry: BaseRegistry<unknown>;
|
|
9
|
+
export declare function isBuiltinComponentType(typeName: string): boolean;
|
|
10
|
+
export declare function registerComponentInternal(type: string, component: unknown, isBaseComponent: boolean): void;
|
|
11
|
+
export declare function registerComponent(type: string, component: unknown): void;
|
|
12
|
+
export declare function getComponent(type: string): unknown;
|
|
13
|
+
export declare function listComponents(): string[];
|
|
14
|
+
export declare function registerBaseComponents(): void;
|
|
15
|
+
export default registry;
|