treege 3.0.0-beta.9 → 3.0.0-beta40

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 (137) hide show
  1. package/LICENSE +18 -12
  2. package/README.md +213 -30
  3. package/dist/DefaultInputs-8yJMEyMh.js +1557 -0
  4. package/dist/ThemeContext-Ejgu9Mwr.js +1603 -0
  5. package/dist/editor/components/input/ComboboxWithCreate.d.ts +2 -1
  6. package/dist/editor/constants/defaultNode.d.ts +1 -1
  7. package/dist/editor/constants/edgeTypes.d.ts +3 -2
  8. package/dist/editor/constants/inputTypeIcons.d.ts +3 -0
  9. package/dist/editor/constants/nodeSpacing.d.ts +33 -0
  10. package/dist/editor/constants/nodeTypes.d.ts +5 -5
  11. package/dist/editor/context/TreegeEditorContext.d.ts +53 -1
  12. package/dist/editor/features/TreegeEditor/TreegeEditor.d.ts +1 -1
  13. package/dist/editor/features/TreegeEditor/dialogs/ChangeNodeTypeDialog.d.ts +2 -0
  14. package/dist/editor/features/TreegeEditor/dialogs/DeleteNodeDialog.d.ts +2 -0
  15. package/dist/editor/features/TreegeEditor/edges/ConditionalEdge.d.ts +2 -2
  16. package/dist/editor/features/TreegeEditor/edges/DefaultEdge.d.ts +3 -0
  17. package/dist/editor/features/TreegeEditor/forms/SubmitConfigForm.d.ts +7 -0
  18. package/dist/editor/features/TreegeEditor/inputs/ComboboxPattern.d.ts +2 -1
  19. package/dist/editor/features/TreegeEditor/inputs/OptionImageField.d.ts +6 -0
  20. package/dist/editor/features/TreegeEditor/nodes/GroupNode.d.ts +2 -2
  21. package/dist/editor/features/TreegeEditor/nodes/TreegeNode.d.ts +6 -0
  22. package/dist/editor/features/TreegeEditor/nodes/components/BottomHandleDropdown.d.ts +6 -0
  23. package/dist/editor/features/TreegeEditor/nodes/components/NodeInputPreview.d.ts +7 -0
  24. package/dist/editor/features/TreegeEditor/nodes/components/NodeLabelInput.d.ts +9 -0
  25. package/dist/editor/features/TreegeEditor/nodes/components/NodeMoreMenu.d.ts +6 -0
  26. package/dist/editor/features/TreegeEditor/nodes/components/NodeTypeBadge.d.ts +7 -0
  27. package/dist/editor/features/TreegeEditor/nodes/components/OptionsEditor.d.ts +7 -0
  28. package/dist/editor/features/TreegeEditor/nodes/components/RequiredBadge.d.ts +6 -0
  29. package/dist/editor/features/TreegeEditor/nodes/layout/NodeWrapper.d.ts +2 -1
  30. package/dist/editor/features/TreegeEditor/panel/AIGeneratorDialog.d.ts +16 -0
  31. package/dist/editor/hooks/useAutoLayout.d.ts +15 -0
  32. package/dist/editor/hooks/useFlowActions.d.ts +5 -2
  33. package/dist/editor/hooks/useFlowConnections.d.ts +4 -0
  34. package/dist/editor/hooks/useNodesSelection.d.ts +5 -5
  35. package/dist/editor/types/ai.d.ts +65 -0
  36. package/dist/editor/types/editor.d.ts +9 -8
  37. package/dist/editor/utils/aiFlowGenerator.d.ts +5 -0
  38. package/dist/editor/utils/dagreLayout.d.ts +17 -0
  39. package/dist/editor/utils/edge.d.ts +14 -0
  40. package/dist/editor/utils/image.d.ts +7 -0
  41. package/dist/editor/utils/inputTypeIcon.d.ts +6 -0
  42. package/dist/editor-DWJ95r4g.js +4001 -0
  43. package/dist/editor.js +3 -7
  44. package/dist/main.js +4 -52
  45. package/dist/renderer/context/TreegeRendererContext.d.ts +4 -1
  46. package/dist/renderer/features/TreegeRenderer/native/TreegeRenderer.d.ts +19 -11
  47. package/dist/renderer/features/TreegeRenderer/native/components/DefaultFormWrapper.d.ts +7 -7
  48. package/dist/renderer/features/TreegeRenderer/native/components/DefaultGroup.d.ts +7 -7
  49. package/dist/renderer/features/TreegeRenderer/native/components/DefaultInputs.d.ts +21 -15
  50. package/dist/renderer/features/TreegeRenderer/native/components/DefaultSubmitButton.d.ts +9 -7
  51. package/dist/renderer/features/TreegeRenderer/native/components/DefaultSubmitButtonWrapper.d.ts +11 -0
  52. package/dist/renderer/features/TreegeRenderer/native/components/DefaultUI.d.ts +8 -7
  53. package/dist/renderer/features/TreegeRenderer/native/components/inputs/DefaultAddressInput.d.ts +3 -0
  54. package/dist/renderer/features/TreegeRenderer/native/components/inputs/DefaultAutocompleteInput.d.ts +3 -0
  55. package/dist/renderer/features/TreegeRenderer/native/components/inputs/DefaultCheckboxInput.d.ts +3 -0
  56. package/dist/renderer/features/TreegeRenderer/native/components/inputs/DefaultDateInput.d.ts +3 -0
  57. package/dist/renderer/features/TreegeRenderer/native/components/inputs/DefaultDateRangeInput.d.ts +3 -0
  58. package/dist/renderer/features/TreegeRenderer/native/components/inputs/DefaultFileInput.d.ts +3 -0
  59. package/dist/renderer/features/TreegeRenderer/native/components/inputs/DefaultHiddenInput.d.ts +3 -0
  60. package/dist/renderer/features/TreegeRenderer/native/components/inputs/DefaultHttpInput.d.ts +3 -0
  61. package/dist/renderer/features/TreegeRenderer/native/components/inputs/DefaultNumberInput.d.ts +3 -0
  62. package/dist/renderer/features/TreegeRenderer/native/components/inputs/DefaultPasswordInput.d.ts +3 -0
  63. package/dist/renderer/features/TreegeRenderer/native/components/inputs/DefaultRadioInput.d.ts +3 -0
  64. package/dist/renderer/features/TreegeRenderer/native/components/inputs/DefaultSelectInput.d.ts +3 -0
  65. package/dist/renderer/features/TreegeRenderer/native/components/inputs/DefaultSwitchInput.d.ts +3 -0
  66. package/dist/renderer/features/TreegeRenderer/native/components/inputs/DefaultTextInput.d.ts +3 -0
  67. package/dist/renderer/features/TreegeRenderer/native/components/inputs/DefaultTextareaInput.d.ts +3 -0
  68. package/dist/renderer/features/TreegeRenderer/native/components/inputs/DefaultTimeInput.d.ts +3 -0
  69. package/dist/renderer/features/TreegeRenderer/native/components/inputs/DefaultTimeRangeInput.d.ts +3 -0
  70. package/dist/renderer/features/TreegeRenderer/useTreegeRenderer.d.ts +84 -24
  71. package/dist/renderer/features/TreegeRenderer/web/TreegeRenderer.d.ts +1 -1
  72. package/dist/renderer/features/TreegeRenderer/web/components/DefaultSubmitButton.d.ts +1 -1
  73. package/dist/renderer/features/TreegeRenderer/web/components/inputs/DefaultAddressInput.d.ts +1 -1
  74. package/dist/renderer/features/TreegeRenderer/web/components/inputs/DefaultAutocompleteInput.d.ts +1 -1
  75. package/dist/renderer/features/TreegeRenderer/web/components/inputs/DefaultCheckboxInput.d.ts +1 -1
  76. package/dist/renderer/features/TreegeRenderer/web/components/inputs/DefaultDateInput.d.ts +1 -1
  77. package/dist/renderer/features/TreegeRenderer/web/components/inputs/DefaultDateRangeInput.d.ts +1 -1
  78. package/dist/renderer/features/TreegeRenderer/web/components/inputs/DefaultFileInput.d.ts +1 -1
  79. package/dist/renderer/features/TreegeRenderer/web/components/inputs/DefaultHiddenInput.d.ts +1 -1
  80. package/dist/renderer/features/TreegeRenderer/web/components/inputs/DefaultHttpInput.d.ts +1 -1
  81. package/dist/renderer/features/TreegeRenderer/web/components/inputs/DefaultNumberInput.d.ts +1 -1
  82. package/dist/renderer/features/TreegeRenderer/web/components/inputs/DefaultPasswordInput.d.ts +1 -1
  83. package/dist/renderer/features/TreegeRenderer/web/components/inputs/DefaultRadioInput.d.ts +1 -1
  84. package/dist/renderer/features/TreegeRenderer/web/components/inputs/DefaultSelectInput.d.ts +1 -1
  85. package/dist/renderer/features/TreegeRenderer/web/components/inputs/DefaultSubmitInput.d.ts +3 -0
  86. package/dist/renderer/features/TreegeRenderer/web/components/inputs/DefaultSwitchInput.d.ts +1 -1
  87. package/dist/renderer/features/TreegeRenderer/web/components/inputs/DefaultTextAreaInput.d.ts +1 -1
  88. package/dist/renderer/features/TreegeRenderer/web/components/inputs/DefaultTextInput.d.ts +1 -1
  89. package/dist/renderer/features/TreegeRenderer/web/components/inputs/DefaultTimeInput.d.ts +1 -1
  90. package/dist/renderer/features/TreegeRenderer/web/components/inputs/DefaultTimeRangeInput.d.ts +1 -1
  91. package/dist/renderer/hooks/useRenderNode.d.ts +55 -0
  92. package/dist/renderer/hooks/useSubmitHandler.d.ts +34 -0
  93. package/dist/renderer/hooks/useTranslate.d.ts +6 -4
  94. package/dist/renderer/index.d.ts +2 -0
  95. package/dist/renderer/index.native.d.ts +19 -0
  96. package/dist/renderer/types/renderer.d.ts +45 -6
  97. package/dist/renderer/utils/form.d.ts +22 -2
  98. package/dist/renderer/utils/http.d.ts +101 -0
  99. package/dist/renderer/utils/node.d.ts +18 -1
  100. package/dist/renderer/utils/sanitize.d.ts +85 -0
  101. package/dist/renderer/utils/sanitize.native.d.ts +69 -0
  102. package/dist/renderer/utils/submit.d.ts +47 -0
  103. package/dist/renderer-native.d.ts +2 -0
  104. package/dist/renderer-native.js +3496 -0
  105. package/dist/renderer.js +3 -45
  106. package/dist/shared/components/ui/badge.d.ts +2 -2
  107. package/dist/shared/components/ui/button.d.ts +2 -2
  108. package/dist/shared/components/ui/collapsible.d.ts +1 -1
  109. package/dist/shared/components/ui/command.d.ts +1 -1
  110. package/dist/shared/components/ui/dropdown-menu.d.ts +1 -1
  111. package/dist/shared/components/ui/form.d.ts +1 -1
  112. package/dist/shared/components/ui/popover.d.ts +4 -2
  113. package/dist/shared/components/ui/select.d.ts +3 -1
  114. package/dist/shared/components/ui/sheet.d.ts +1 -1
  115. package/dist/shared/components/ui/tooltip.d.ts +1 -1
  116. package/dist/shared/constants/colors.d.ts +45 -0
  117. package/dist/shared/constants/inputType.d.ts +1 -0
  118. package/dist/shared/context/ThemeContext.d.ts +2 -0
  119. package/dist/shared/context/ThemeContext.native.d.ts +22 -0
  120. package/dist/shared/hooks/useThemeColors.d.ts +37 -0
  121. package/dist/shared/locales/ar.json.d.ts +117 -10
  122. package/dist/shared/locales/de.json.d.ts +118 -11
  123. package/dist/shared/locales/en.json.d.ts +119 -12
  124. package/dist/shared/locales/es.json.d.ts +118 -11
  125. package/dist/shared/locales/fr.json.d.ts +118 -11
  126. package/dist/shared/locales/it.json.d.ts +118 -11
  127. package/dist/shared/locales/pt.json.d.ts +118 -11
  128. package/dist/shared/types/edge.d.ts +6 -0
  129. package/dist/shared/types/node.d.ts +64 -0
  130. package/package.json +38 -12
  131. package/dist/ThemeContext-BIvs8Kw-.js +0 -758
  132. package/dist/TreegeEditor-Lv5Tn9_F.js +0 -2152
  133. package/dist/TreegeRenderer-BVaqgInZ.js +0 -1405
  134. package/dist/editor/features/TreegeEditor/inputs/SelectInputType.d.ts +0 -7
  135. package/dist/editor/features/TreegeEditor/nodes/FlowNode.d.ts +0 -6
  136. package/dist/editor/features/TreegeEditor/nodes/InputNode.d.ts +0 -6
  137. package/dist/editor/features/TreegeEditor/nodes/UINode.d.ts +0 -6
@@ -1,3 +1,3 @@
1
1
  import { InputRenderProps } from '../../../../../types/renderer';
2
- declare const DefaultTimeInput: ({ node, value, setValue, error, label, placeholder, helperText }: InputRenderProps<"time">) => import("react/jsx-runtime").JSX.Element;
2
+ declare const DefaultTimeInput: ({ node, value, setValue, error, label, placeholder, helperText, name, id }: InputRenderProps<"time">) => import("react/jsx-runtime").JSX.Element;
3
3
  export default DefaultTimeInput;
@@ -1,3 +1,3 @@
1
1
  import { InputRenderProps } from '../../../../../types/renderer';
2
- declare const DefaultTimeRangeInput: ({ node, value, setValue, error, label, helperText }: InputRenderProps<"timerange">) => import("react/jsx-runtime").JSX.Element;
2
+ declare const DefaultTimeRangeInput: ({ node, value, setValue, error, label, helperText, id, name }: InputRenderProps<"timerange">) => import("react/jsx-runtime").JSX.Element;
3
3
  export default DefaultTimeRangeInput;
@@ -0,0 +1,55 @@
1
+ import { Node } from '@xyflow/react';
2
+ import { ComponentType, ReactNode } from 'react';
3
+ import { FormValues, InputRenderers, TreegeRendererComponents } from '../types/renderer';
4
+ import { TreegeNodeData } from '../../shared/types/node';
5
+ type AnyComponent = ComponentType<any>;
6
+ type UseRenderNodeParams = {
7
+ config: {
8
+ components: TreegeRendererComponents;
9
+ language: string;
10
+ };
11
+ DefaultFormWrapper: AnyComponent;
12
+ DefaultGroup: AnyComponent;
13
+ DefaultSubmitButton: AnyComponent;
14
+ DefaultSubmitButtonWrapper?: AnyComponent;
15
+ defaultInputRenderers: InputRenderers;
16
+ defaultUI: Record<string, AnyComponent>;
17
+ formErrors: Record<string, string>;
18
+ formValues: FormValues;
19
+ missingRequiredFields: string[];
20
+ setFieldValue: (fieldId: string, value: unknown) => void;
21
+ visibleNodes: Node<TreegeNodeData>[];
22
+ };
23
+ /**
24
+ * Hook that returns rendering utilities for TreegeRenderer
25
+ * Shared between web and native TreegeRenderer
26
+ *
27
+ * Returns:
28
+ * - renderNode: Function to render individual nodes
29
+ * - FormWrapper: Form wrapper component with fallback
30
+ * - SubmitButton: Submit button component with fallback
31
+ * - SubmitButtonWrapper: Submit button wrapper component with fallback (web only, undefined for native)
32
+ */
33
+ export declare const useRenderNode: ({ DefaultFormWrapper, DefaultGroup, DefaultSubmitButton, DefaultSubmitButtonWrapper, config, defaultInputRenderers, defaultUI, formErrors, formValues, missingRequiredFields, setFieldValue, visibleNodes, }: UseRenderNodeParams) => {
34
+ FormWrapper: ((props: {
35
+ children: ReactNode;
36
+ onSubmit: (e: import('react').FormEvent) => void;
37
+ }) => ReactNode) | AnyComponent;
38
+ renderNode: (node: Node<TreegeNodeData>) => ReactNode;
39
+ SubmitButton: ((props: {
40
+ label?: string;
41
+ disabled?: boolean;
42
+ [key: string]: unknown;
43
+ } | {
44
+ children?: ReactNode;
45
+ disabled?: boolean;
46
+ isSubmitting?: boolean;
47
+ onPress?: () => void;
48
+ [key: string]: unknown;
49
+ }) => ReactNode) | AnyComponent;
50
+ SubmitButtonWrapper: ((props: {
51
+ children: ReactNode;
52
+ missingFields?: string[];
53
+ }) => ReactNode) | AnyComponent;
54
+ };
55
+ export {};
@@ -0,0 +1,34 @@
1
+ import { Node } from '@xyflow/react';
2
+ import { FormValues } from '../types/renderer';
3
+ import { SubmitResult } from '../utils/submit';
4
+ import { InputNodeData, TreegeNodeData } from '../../shared/types/node';
5
+ /**
6
+ * Hook for handling form submission with submit button configuration
7
+ *
8
+ * This hook provides:
9
+ * - Submit button node detection
10
+ * - HTTP submission handling
11
+ * - Loading state management
12
+ * - Success/error message handling
13
+ * - Redirect handling
14
+ *
15
+ * @param visibleNodes - Currently visible nodes in the form
16
+ * @param formValues - Current form values
17
+ * @param language - Current language for translations
18
+ * @param inputNodes - All input nodes for form data conversion
19
+ * @returns Submit handler state and functions
20
+ */
21
+ export declare const useSubmitHandler: (visibleNodes: Node<TreegeNodeData>[], formValues: FormValues, language: string, inputNodes: Node<InputNodeData>[]) => {
22
+ clearSubmitMessage: () => void;
23
+ handleSubmitWithConfig: (onSuccess?: (data: unknown) => void) => Promise<SubmitResult | null>;
24
+ hasSubmitConfig: boolean;
25
+ isSubmitting: boolean;
26
+ submitButtonNode: {
27
+ id: string;
28
+ data: InputNodeData;
29
+ } | null;
30
+ submitMessage: {
31
+ type: "success" | "error";
32
+ message: string;
33
+ } | null;
34
+ };
@@ -1,10 +1,12 @@
1
+ import { Translatable } from '../../shared/types/translate';
1
2
  /**
2
3
  * Hook for translating text in the renderer with context-aware language preference.
3
4
  *
4
5
  * This hook uses the language from TreegeRendererContext (or explicit override) and delegates to the shared useTranslate hook.
6
+ * All translations are automatically sanitized to prevent XSS attacks.
5
7
  *
6
8
  * @param language - Optional language override. If not provided, uses language from context.
7
- * @returns A function that translates either a translation key or a Translatable object
9
+ * @returns A function that translates either a translation key or a Translatable object (with XSS protection)
8
10
  *
9
11
  * @example
10
12
  * // Static translation (from translation files)
@@ -12,13 +14,13 @@
12
14
  * const errorMsg = t("validation.required"); // "This field is required"
13
15
  *
14
16
  * @example
15
- * // Dynamic translation (from node data)
17
+ * // Dynamic translation (from node data) - automatically sanitized
16
18
  * const t = useTranslate();
17
- * const label = t(node.data.label); // Translates user-defined content
19
+ * const label = t(node.data.label); // Translates and sanitizes user-defined content
18
20
  *
19
21
  * @example
20
22
  * // With explicit language
21
23
  * const t = useTranslate("fr");
22
24
  * const errorMsg = t("validation.required"); // "Ce champ est requis"
23
25
  */
24
- export declare const useTranslate: (language?: string) => (key?: import('../../main').Translatable | import('../../main').TranslationKey | string) => string;
26
+ export declare const useTranslate: (language?: string) => (key?: Translatable | string) => string;
@@ -1,4 +1,5 @@
1
1
  export { TreegeConfigProvider, useTreegeConfig } from './context/TreegeConfigContext';
2
+ export type { UseTreegeRendererReturn } from './features/TreegeRenderer/useTreegeRenderer';
2
3
  export { useTreegeRenderer } from './features/TreegeRenderer/useTreegeRenderer';
3
4
  export * from './features/TreegeRenderer/web/components/DefaultFormWrapper';
4
5
  export * from './features/TreegeRenderer/web/components/DefaultGroup';
@@ -13,5 +14,6 @@ export * from './utils/conditions';
13
14
  export * from './utils/file';
14
15
  export * from './utils/flow';
15
16
  export * from './utils/form';
17
+ export * from './utils/sanitize';
16
18
  export { ThemeProvider, useTheme } from '../shared/context/ThemeContext';
17
19
  export { getTranslatedText } from '../shared/utils/translations';
@@ -0,0 +1,19 @@
1
+ export { TreegeConfigProvider, useTreegeConfig } from './context/TreegeConfigContext';
2
+ export * from './features/TreegeRenderer/native/components/DefaultFormWrapper';
3
+ export * from './features/TreegeRenderer/native/components/DefaultGroup';
4
+ export * from './features/TreegeRenderer/native/components/DefaultInputs';
5
+ export * from './features/TreegeRenderer/native/components/DefaultSubmitButton';
6
+ export * from './features/TreegeRenderer/native/components/DefaultSubmitButtonWrapper';
7
+ export * from './features/TreegeRenderer/native/components/DefaultUI';
8
+ export type { TreegeRendererNativeProps } from './features/TreegeRenderer/native/TreegeRenderer';
9
+ export { default as TreegeRenderer } from './features/TreegeRenderer/native/TreegeRenderer';
10
+ export type { UseTreegeRendererReturn } from './features/TreegeRenderer/useTreegeRenderer';
11
+ export { useTreegeRenderer } from './features/TreegeRenderer/useTreegeRenderer';
12
+ export type { TreegeRendererConfig } from './types/renderer';
13
+ export * from './types/renderer';
14
+ export * from './utils/conditions';
15
+ export * from './utils/file';
16
+ export * from './utils/flow';
17
+ export * from './utils/form';
18
+ export * from './utils/sanitize.native';
19
+ export { getTranslatedText } from '../shared/utils/translations';
@@ -18,6 +18,7 @@ export type InputValueTypeMap = {
18
18
  password: string;
19
19
  radio: string;
20
20
  select: string | string[];
21
+ submit: undefined;
21
22
  switch: boolean;
22
23
  text: string;
23
24
  textarea: string;
@@ -28,10 +29,13 @@ export type InputValueTypeMap = {
28
29
  * Form values stored during rendering
29
30
  */
30
31
  export type FormValues = Record<string, any>;
32
+ export type Meta = {
33
+ httpResponse?: unknown;
34
+ };
31
35
  /**
32
36
  * Union of all possible input value types
33
37
  */
34
- export type InputValue = string | number | boolean | string[] | SerializableFile | SerializableFile[] | [string, string] | [string | undefined, string | undefined] | null;
38
+ export type InputValue = string | number | boolean | string[] | SerializableFile | SerializableFile[] | [string, string] | [string | undefined, string | undefined] | null | undefined;
35
39
  /**
36
40
  * Props for input components with dynamic value typing
37
41
  * All form state is provided via props for easier custom component implementation
@@ -45,6 +49,15 @@ export type InputRenderProps<T extends InputType = InputType> = {
45
49
  * Current value of the input field (typed based on input type when T is specified)
46
50
  */
47
51
  value: InputValueTypeMap[T];
52
+ /**
53
+ * Unique field ID (nodeId)
54
+ */
55
+ id: string;
56
+ /**
57
+ * Field name (resolved using priority: name > label > nodeId)
58
+ * Use this for the name and id attributes of the input element
59
+ */
60
+ name: string;
48
61
  /**
49
62
  * Function to update the input value
50
63
  * @param value - The new value (typed based on input type when T is specified)
@@ -66,6 +79,14 @@ export type InputRenderProps<T extends InputType = InputType> = {
66
79
  * Translated helper text (already processed with current language)
67
80
  */
68
81
  helperText?: string;
82
+ /**
83
+ * Missing required fields on form submit (for submit inputs)
84
+ */
85
+ missingRequiredFields?: string[];
86
+ /**
87
+ * Whether the form is currently being submitted (for submit inputs)
88
+ */
89
+ isSubmitting?: boolean;
69
90
  };
70
91
  export type UiRenderProps = {
71
92
  node: Node<UINodeData>;
@@ -99,7 +120,9 @@ export type TreegeRendererComponents = {
99
120
  /**
100
121
  * Custom group container renderer
101
122
  */
102
- group?: (props: NodeRenderProps) => ReactNode;
123
+ group?: (props: NodeRenderProps & {
124
+ children?: ReactNode;
125
+ }) => ReactNode;
103
126
  /**
104
127
  * Custom form wrapper
105
128
  */
@@ -108,10 +131,20 @@ export type TreegeRendererComponents = {
108
131
  onSubmit: (e: FormEvent) => void;
109
132
  }) => ReactNode;
110
133
  /**
111
- * Custom submit button (pure button without wrapper)
134
+ * Custom submit button (supports both web and native variants)
135
+ * Web variant: { label?: string; disabled?: boolean; ...otherHTMLAttributes }
136
+ * Native variant: { children?: ReactNode; disabled?: boolean; isSubmitting?: boolean; onPress?: () => void }
112
137
  */
113
138
  submitButton?: (props: {
114
139
  label?: string;
140
+ disabled?: boolean;
141
+ [key: string]: unknown;
142
+ } | {
143
+ children?: ReactNode;
144
+ disabled?: boolean;
145
+ isSubmitting?: boolean;
146
+ onPress?: () => void;
147
+ [key: string]: unknown;
115
148
  }) => ReactNode;
116
149
  /**
117
150
  * Custom submit button wrapper (e.g., for tooltip with missing fields)
@@ -154,7 +187,11 @@ export type TreegeRendererConfig = {
154
187
  /**
155
188
  * Props for the TreegeRenderer component
156
189
  */
157
- export type TreegeRendererProps = {
190
+ export interface TreegeRendererProps {
191
+ /**
192
+ * Additional class name for the renderer container
193
+ */
194
+ className?: string;
158
195
  /**
159
196
  * Custom component renderers
160
197
  */
@@ -184,8 +221,10 @@ export type TreegeRendererProps = {
184
221
  onChange?: (values: FormValues) => void;
185
222
  /**
186
223
  * Callback when form is submitted
224
+ * @param values - Form values (keyed by field name or node ID)
225
+ * @param meta - Optional metadata about the submission (e.g., HTTP response data)
187
226
  */
188
- onSubmit?: (values: FormValues) => void;
227
+ onSubmit?: (values: FormValues, meta?: Meta) => void;
189
228
  /**
190
229
  * Theme for the renderer
191
230
  * @default "dark"
@@ -199,4 +238,4 @@ export type TreegeRendererProps = {
199
238
  * Validation mode
200
239
  */
201
240
  validationMode?: "onChange" | "onSubmit";
202
- };
241
+ }
@@ -20,7 +20,27 @@ export declare const checkFormFieldHasValue: (fieldName: string | undefined, for
20
20
  /**
21
21
  * Convert internal form values (keyed by nodeId) to external format (keyed by name)
22
22
  * When multiple nodes share the same name, later values overwrite earlier ones
23
- * example: convertFormValuesToNamedFormat({ id1: 'Alice', id2: 'Bob' }, [ { id: 'id1', data: { name: 'firstName' } }, { id: 'id2', data: { name: 'lastName' } } ])
24
- * returns { firstName: 'Alice', lastName: 'Bob' }
23
+ * Priority for key naming: name > label (en) > nodeId
24
+ * example: convertFormValuesToNamedFormat({ id1: 'Alice', id2: 'Bob' }, [ { id: 'id1', data: { name: 'firstName' } }, { id: 'id2', data: { label: { en: 'Last Name' } } } ])
25
+ * returns { firstName: 'Alice', 'Last Name': 'Bob' }
25
26
  */
26
27
  export declare const convertFormValuesToNamedFormat: (formValues: FormValues, nodes: Node<InputNodeData>[]) => Record<string, unknown>;
28
+ /**
29
+ * Apply transformation to a reference field value
30
+ * @param value - The source value to transform
31
+ * @param transformFunction - The transformation function to apply
32
+ * @param objectMapping - Optional mapping for toObject transformation
33
+ * @returns The transformed value
34
+ */
35
+ export declare const applyReferenceTransformation: (value: unknown, transformFunction: "toString" | "toNumber" | "toBoolean" | "toArray" | "toObject" | null | undefined, objectMapping?: Array<{
36
+ sourceKey: string;
37
+ targetKey: string;
38
+ }>) => unknown;
39
+ /**
40
+ * Calculate updated values for fields with reference defaults
41
+ * @param inputNodes - Array of input nodes
42
+ * @param formValues - Current form values
43
+ * @param prevFormValues - Previous form values (for change detection)
44
+ * @returns Object containing fields that need to be updated
45
+ */
46
+ export declare const calculateReferenceFieldUpdates: (inputNodes: Node<InputNodeData>[], formValues: FormValues, prevFormValues: FormValues) => FormValues;
@@ -0,0 +1,101 @@
1
+ import { FormValues } from '../types/renderer';
2
+ import { HttpHeader } from '../../shared/types/node';
3
+ /**
4
+ * Result of an HTTP request
5
+ */
6
+ export interface HttpRequestResult {
7
+ /**
8
+ * Whether the request was successful (2xx status code)
9
+ */
10
+ success: boolean;
11
+ /**
12
+ * Response data (parsed JSON or raw text)
13
+ */
14
+ data?: unknown;
15
+ /**
16
+ * Error message if request failed
17
+ */
18
+ error?: string;
19
+ /**
20
+ * HTTP status code
21
+ */
22
+ status?: number;
23
+ /**
24
+ * HTTP status text
25
+ */
26
+ statusText?: string;
27
+ }
28
+ /**
29
+ * Options for making an HTTP request
30
+ */
31
+ export interface HttpRequestOptions {
32
+ /**
33
+ * The URL to call (should already have variables replaced)
34
+ */
35
+ url: string;
36
+ /**
37
+ * HTTP method
38
+ */
39
+ method?: "GET" | "POST" | "PUT" | "DELETE" | "PATCH";
40
+ /**
41
+ * Request headers
42
+ */
43
+ headers?: HttpHeader[];
44
+ /**
45
+ * Request body (for POST/PUT/PATCH)
46
+ */
47
+ body?: string;
48
+ }
49
+ /**
50
+ * Make an HTTP request with common error handling and response parsing
51
+ *
52
+ * This is a shared utility used by both HTTP inputs and submit buttons
53
+ * to ensure consistent behavior across the library.
54
+ *
55
+ * @param options - Request options
56
+ * @returns Promise with request result
57
+ */
58
+ export declare const makeHttpRequest: (options: HttpRequestOptions) => Promise<HttpRequestResult>;
59
+ /**
60
+ * Replace template variables in a string with actual values from form data
61
+ *
62
+ * Uses {{fieldId}} syntax for all replacements (URLs, JSON bodies, etc.)
63
+ *
64
+ * Smart JSON handling:
65
+ * - Strings: automatically wrapped in quotes and escaped
66
+ * - Numbers/Booleans: converted to JSON-safe format
67
+ * - Arrays/Objects: JSON.stringify
68
+ *
69
+ * @param template - The template string containing variables
70
+ * @param values - Form values to substitute
71
+ * @param options - Replacement options
72
+ * @param options.encode - Whether to URL-encode the replaced values (for URLs)
73
+ * @param options.json - Whether to use smart JSON handling (for request bodies)
74
+ * @returns The string with variables replaced
75
+ *
76
+ * @example
77
+ * // For URLs (with encoding)
78
+ * replaceTemplateVariables("https://api.com/users/{{userId}}", { userId: "john doe" }, { encode: true })
79
+ * // => "https://api.com/users/john%20doe"
80
+ *
81
+ * // For JSON bodies (smart handling)
82
+ * replaceTemplateVariables('{"name": {{userName}}}', { userName: "John" }, { json: true })
83
+ * // => '{"name": "John"}'
84
+ *
85
+ * replaceTemplateVariables('{"age": {{userAge}}}', { userAge: 25 }, { json: true })
86
+ * // => '{"age": 25}'
87
+ */
88
+ export declare const replaceTemplateVariables: (template: string | undefined, values: FormValues, options?: {
89
+ encode?: boolean;
90
+ json?: boolean;
91
+ }) => string;
92
+ /**
93
+ * Replace template variables in response data (for redirect URLs)
94
+ *
95
+ * Supports {{response.field}} format to access response data
96
+ *
97
+ * @param template - The template string containing variables
98
+ * @param responseData - Response data object
99
+ * @returns The string with variables replaced
100
+ */
101
+ export declare const replaceResponseVariables: (template: string | undefined, responseData: unknown) => string;
@@ -6,9 +6,26 @@ import { InputNodeData, TreegeNodeData } from '../../shared/types/node';
6
6
  * @returns Array of input nodes only
7
7
  */
8
8
  export declare const getInputNodes: (nodes: Node<TreegeNodeData>[]) => Node<InputNodeData>[];
9
+ /**
10
+ * Resolve the key name for an input node using priority: name > label (en) > nodeId
11
+ * This is the single source of truth for key resolution across the application
12
+ * @param node - The input node
13
+ * @returns The resolved key (name, label, or node ID)
14
+ */
15
+ export declare const resolveNodeKey: (node: Node<InputNodeData>) => string;
16
+ /**
17
+ * Resolve the placeholder text for an input, falling back to the static
18
+ * "newAnswer" translation for textfield-like types when the user has not
19
+ * defined a placeholder for the current language.
20
+ * @param data - The input node data
21
+ * @param language - The current language code
22
+ * @returns The resolved placeholder string (empty string if none available)
23
+ */
24
+ export declare const resolveInputPlaceholder: (data: InputNodeData, language: string) => string;
9
25
  /**
10
26
  * Get the field name (DOM name attribute) for a given node ID
11
- * Uses node.data.name if available, otherwise falls back to nodeId
27
+ * Priority: name > label (en) > nodeId
28
+ * This must match the logic in convertFormValuesToNamedFormat for consistency
12
29
  * @param nodeId - The ID of the input node
13
30
  * @param nodes - Array of input nodes
14
31
  * @returns The field name to use in the DOM, or undefined if node not found
@@ -0,0 +1,85 @@
1
+ /**
2
+ * Configuration for DOMPurify sanitization
3
+ */
4
+ interface SanitizeOptions {
5
+ /**
6
+ * Allow only plain text (strip all HTML tags)
7
+ * @default true
8
+ */
9
+ plainTextOnly?: boolean;
10
+ /**
11
+ * Custom allowed tags (when plainTextOnly is false)
12
+ */
13
+ allowedTags?: string[];
14
+ /**
15
+ * Custom allowed attributes (when plainTextOnly is false)
16
+ */
17
+ allowedAttributes?: string[];
18
+ }
19
+ /**
20
+ * Sanitizes user input to prevent XSS attacks
21
+ *
22
+ * This utility wraps DOMPurify and provides secure defaults for the treege library.
23
+ * It should be used on all user-provided content before rendering, especially:
24
+ * - Labels from node data
25
+ * - Helper text
26
+ * - Placeholder text
27
+ * - Any content from HTTP responses
28
+ *
29
+ * @param input - The string to sanitize
30
+ * @param options - Sanitization options
31
+ * @returns Sanitized string safe for rendering
32
+ *
33
+ * @example
34
+ * // Plain text only (default behavior)
35
+ * sanitize('<script>alert("xss")</script>Hello')
36
+ * // => 'Hello'
37
+ *
38
+ * @example
39
+ * // Allow safe HTML tags
40
+ * sanitize('<b>Bold text</b><script>alert("xss")</script>', { plainTextOnly: false })
41
+ * // => '<b>Bold text</b>'
42
+ *
43
+ * @example
44
+ * // Custom allowed tags
45
+ * sanitize('<a href="http://example.com">Link</a>', {
46
+ * plainTextOnly: false,
47
+ * allowedTags: ['a'],
48
+ * allowedAttributes: ['href']
49
+ * })
50
+ * // => '<a href="http://example.com">Link</a>'
51
+ */
52
+ export declare const sanitize: (input: string | undefined | null, options?: SanitizeOptions) => string;
53
+ /**
54
+ * Sanitizes data from HTTP responses
55
+ *
56
+ * This function recursively sanitizes all string values in an object or array.
57
+ * Useful for cleaning data received from external APIs before displaying it.
58
+ *
59
+ * Protection against:
60
+ * - Circular references: Uses WeakSet to detect and handle circular objects
61
+ * - Deep nesting attacks: Limits recursion depth to prevent DoS
62
+ * - XSS attacks: Sanitizes all string values
63
+ *
64
+ * @param data - The data to sanitize (can be any type)
65
+ * @param options - Sanitization options
66
+ * @param depth - Current recursion depth (internal use)
67
+ * @param seen - WeakSet to track visited objects (internal use)
68
+ * @returns Sanitized data with same structure
69
+ *
70
+ * @example
71
+ * sanitizeHttpResponse({
72
+ * name: 'John <script>xss</script>',
73
+ * nested: { title: 'Hello <b>world</b>' }
74
+ * })
75
+ * // => { name: 'John ', nested: { title: 'Hello <b>world</b>' } }
76
+ *
77
+ * @example
78
+ * // Handles circular references gracefully
79
+ * const obj = { name: 'Test' };
80
+ * obj.self = obj;
81
+ * sanitizeHttpResponse(obj)
82
+ * // => { name: 'Test', self: { name: 'Test' } } // circular ref broken
83
+ */
84
+ export declare const sanitizeHttpResponse: (data: unknown, options?: SanitizeOptions, depth?: number, seen?: WeakSet<object>) => unknown;
85
+ export {};
@@ -0,0 +1,69 @@
1
+ /**
2
+ * React Native implementation of sanitization utilities
3
+ * Does not use DOMPurify as it depends on browser DOM
4
+ */
5
+ /**
6
+ * Configuration for sanitization
7
+ */
8
+ interface SanitizeOptions {
9
+ /**
10
+ * Allow only plain text (strip all HTML tags)
11
+ * @default true
12
+ */
13
+ plainTextOnly?: boolean;
14
+ /**
15
+ * Custom allowed tags (when plainTextOnly is false)
16
+ * Note: In React Native, HTML tags are always stripped
17
+ */
18
+ allowedTags?: string[];
19
+ /**
20
+ * Custom allowed attributes (when plainTextOnly is false)
21
+ * Note: In React Native, attributes are not applicable
22
+ */
23
+ allowedAttributes?: string[];
24
+ }
25
+ /**
26
+ * Sanitizes user input to prevent XSS attacks
27
+ *
28
+ * React Native implementation that strips all HTML tags and decodes entities.
29
+ * Since React Native doesn't render HTML, we focus on cleaning text content.
30
+ *
31
+ * @param input - The string to sanitize
32
+ * @param options - Sanitization options (maintained for API compatibility)
33
+ * @returns Sanitized string safe for rendering
34
+ *
35
+ * @example
36
+ * sanitize('<script>alert("xss")</script>Hello')
37
+ * // => 'Hello'
38
+ *
39
+ * @example
40
+ * sanitize('<b>Bold text</b><script>alert("xss")</script>')
41
+ * // => 'Bold text'
42
+ */
43
+ export declare const sanitize: (input: string | undefined | null, _options?: SanitizeOptions) => string;
44
+ /**
45
+ * Sanitizes data from HTTP responses
46
+ *
47
+ * This function recursively sanitizes all string values in an object or array.
48
+ * Useful for cleaning data received from external APIs before displaying it.
49
+ *
50
+ * Protection against:
51
+ * - Circular references: Uses WeakSet to detect and handle circular objects
52
+ * - Deep nesting attacks: Limits recursion depth to prevent DoS
53
+ * - XSS attacks: Sanitizes all string values
54
+ *
55
+ * @param data - The data to sanitize (can be any type)
56
+ * @param options - Sanitization options
57
+ * @param depth - Current recursion depth (internal use)
58
+ * @param seen - WeakSet to track visited objects (internal use)
59
+ * @returns Sanitized data with same structure
60
+ *
61
+ * @example
62
+ * sanitizeHttpResponse({
63
+ * name: 'John <script>xss</script>',
64
+ * nested: { title: 'Hello <b>world</b>' }
65
+ * })
66
+ * // => { name: 'John ', nested: { title: 'Hello world' } }
67
+ */
68
+ export declare const sanitizeHttpResponse: (data: unknown, options?: SanitizeOptions, depth?: number, seen?: WeakSet<object>) => unknown;
69
+ export {};
@@ -0,0 +1,47 @@
1
+ import { Node } from '@xyflow/react';
2
+ import { FormValues } from '../types/renderer';
3
+ import { InputNodeData, SubmitConfig } from '../../shared/types/node';
4
+ /**
5
+ * Result of a form submission
6
+ */
7
+ export interface SubmitResult {
8
+ /**
9
+ * Whether the submission was successful
10
+ */
11
+ success: boolean;
12
+ /**
13
+ * Response data from the server
14
+ */
15
+ data?: unknown;
16
+ /**
17
+ * Error message if submission failed
18
+ */
19
+ error?: string;
20
+ /**
21
+ * URL to redirect to (if configured)
22
+ */
23
+ redirectUrl?: string;
24
+ }
25
+ /**
26
+ * Submit form data using the provided submit configuration
27
+ *
28
+ * This function handles:
29
+ * - Template variable replacement in URL, body, and headers
30
+ * - HTTP request to the configured endpoint
31
+ * - Response parsing
32
+ * - Redirect URL generation with response data
33
+ *
34
+ * @param config - Submit configuration from the submit button node
35
+ * @param formValues - Current form values
36
+ * @param inputNodes - All input nodes (required when sendAllFormValues is true)
37
+ * @returns Promise with submission result
38
+ */
39
+ export declare const submitFormData: (config: SubmitConfig, formValues: FormValues, inputNodes: Node<InputNodeData>[]) => Promise<SubmitResult>;
40
+ /**
41
+ * Perform redirect to the specified URL
42
+ *
43
+ * Handles both relative and absolute URLs
44
+ *
45
+ * @param url - The URL to redirect to
46
+ */
47
+ export declare const redirect: (url: string) => void;
@@ -0,0 +1,2 @@
1
+ export * from './renderer/index.native'
2
+ export {}