treege 3.0.0-beta.74 → 3.0.0-beta.76
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/README.md +62 -18
- package/dist/{DefaultSubmitButton-BT4AxAnR.js → DefaultSubmitButton-Bk5U_6Qm.js} +749 -758
- package/dist/{ThemeContext-CSH4Fupd.js → ThemeContext-DeWmeqHK.js} +14 -0
- package/dist/editor/features/TreegeEditor/TreegeEditor.d.ts +1 -1
- package/dist/editor/features/TreegeEditor/listeners/FlowChangeEmitter.d.ts +19 -0
- package/dist/editor/hooks/useFlowContent.d.ts +16 -0
- package/dist/editor/types/editor.d.ts +9 -0
- package/dist/{editor-alr_fxTU.js → editor-B1cEixH_.js} +1675 -1644
- package/dist/editor.js +2 -2
- package/dist/main.js +6 -6
- package/dist/renderer/features/TreegeRenderer/native/components/DefaultInputLabel.d.ts +10 -0
- package/dist/renderer/features/TreegeRenderer/web/components/DefaultInputLabel.d.ts +9 -0
- package/dist/renderer/hooks/useRenderNode.d.ts +2 -1
- package/dist/renderer/index.d.ts +1 -0
- package/dist/renderer/index.native.d.ts +1 -0
- package/dist/renderer/types/renderer.d.ts +37 -0
- package/dist/renderer-DIAtKfQ8.js +256 -0
- package/dist/renderer-native.js +1156 -1274
- package/dist/renderer.js +5 -5
- package/dist/shared/locales/ar.json.d.ts +2 -0
- package/dist/shared/locales/de.json.d.ts +2 -0
- package/dist/shared/locales/en.json.d.ts +2 -0
- package/dist/shared/locales/es.json.d.ts +2 -0
- package/dist/shared/locales/fr.json.d.ts +2 -0
- package/dist/shared/locales/it.json.d.ts +2 -0
- package/dist/shared/locales/pt.json.d.ts +2 -0
- package/dist/{useRenderNode-GobhZp-Y.js → useRenderNode-DJ0mFozt.js} +66 -65
- package/package.json +1 -1
- package/dist/renderer-D9Yaxr2H.js +0 -255
package/README.md
CHANGED
|
@@ -48,7 +48,7 @@ Treege is a modern React library for creating and rendering interactive decision
|
|
|
48
48
|
- **Multi-Step Forms**: Group nodes are automatically turned into navigable steps with Back/Continue controls, an `onBack` bridge to outer flows, and external-button submission via `formId`
|
|
49
49
|
- **Edit Mode**: Pre-fill with `initialValues` (accepts name keys, reactive) to round-trip and edit previously submitted records
|
|
50
50
|
- **Loading State**: Built-in `isLoading` prop renders a customizable skeleton while the flow is being fetched, plus `isSubmitting` to drive the button's loading state from async submits
|
|
51
|
-
- **Fully Customizable**: Override any component (form, inputs, ui, step, submitButton, submitButtonWrapper, loadingSkeleton)
|
|
51
|
+
- **Fully Customizable**: Override any component (form, inputs, inputLabel, ui, step, submitButton, submitButtonWrapper, loadingSkeleton)
|
|
52
52
|
- **Optional Dependencies**: Graceful degradation when optional packages like `react-native-document-picker` aren't installed
|
|
53
53
|
- **Theme Support**: Dark/light mode out of the box
|
|
54
54
|
- **Google API Integration**: Address autocomplete support
|
|
@@ -167,6 +167,28 @@ function App() {
|
|
|
167
167
|
}
|
|
168
168
|
```
|
|
169
169
|
|
|
170
|
+
### Live Preview (Editor → Renderer)
|
|
171
|
+
|
|
172
|
+
Use the editor's `onChange` (debounced) to render the form **live** next to the editor — no Save click needed. Because `onChange` isn't gated on having input nodes, the preview also reflects an emptied canvas after Clear. Omit `onSave` to hide the Save button entirely when you rely solely on live updates:
|
|
173
|
+
|
|
174
|
+
```tsx
|
|
175
|
+
import { TreegeEditor } from "treege/editor";
|
|
176
|
+
import { TreegeRenderer } from "treege/renderer";
|
|
177
|
+
import { useState } from "react";
|
|
178
|
+
import type { Flow } from "treege";
|
|
179
|
+
|
|
180
|
+
function App() {
|
|
181
|
+
const [flow, setFlow] = useState<Flow | null>(null);
|
|
182
|
+
|
|
183
|
+
return (
|
|
184
|
+
<div style={{ display: "flex" }}>
|
|
185
|
+
<TreegeEditor onChange={setFlow} /> {/* live, no Save button */}
|
|
186
|
+
<TreegeRenderer flow={flow} onSubmit={console.log} />
|
|
187
|
+
</div>
|
|
188
|
+
);
|
|
189
|
+
}
|
|
190
|
+
```
|
|
191
|
+
|
|
170
192
|
## Module Structure
|
|
171
193
|
|
|
172
194
|
Treege provides multiple import paths for optimal bundle size:
|
|
@@ -270,7 +292,7 @@ Override default components with your own React Native components.
|
|
|
270
292
|
Each input renderer is a **React component** receiving a single props object with two keys:
|
|
271
293
|
|
|
272
294
|
1. `field` — DOM-safe props (`id`, `name`, `value`, `placeholder`, `required`, `aria-invalid`). On the web you can spread them onto an element (`<input {...field} />`); on React Native pick the ones you need.
|
|
273
|
-
2. `extra` — Treege-specific props: `setValue`, `error`, `label`, `helperText`, `node`, and `missingDependencies` (the unfilled fields this input's dynamic options depend on).
|
|
295
|
+
2. `extra` — Treege-specific props: `setValue`, `error`, `label`, `helperText`, `node`, `InputLabel` (the resolved, overridable label component), and `missingDependencies` (the unfilled fields this input's dynamic options depend on).
|
|
274
296
|
|
|
275
297
|
```tsx
|
|
276
298
|
import { Text, TextInput, View } from "react-native";
|
|
@@ -458,7 +480,7 @@ Treege supports multiple languages out of the box:
|
|
|
458
480
|
Override default input renderers with your own. A renderer is a React component
|
|
459
481
|
receiving a single props object: `field` (DOM-safe props, spreadable onto an
|
|
460
482
|
element) and `extra` (`setValue`, `error`, `label`, `helperText`, `node`,
|
|
461
|
-
`missingDependencies`).
|
|
483
|
+
`InputLabel`, `missingDependencies`).
|
|
462
484
|
|
|
463
485
|
```tsx
|
|
464
486
|
import { TreegeRenderer } from "treege/renderer";
|
|
@@ -487,6 +509,27 @@ const CustomTextInput = ({ field, extra }) => {
|
|
|
487
509
|
/>
|
|
488
510
|
```
|
|
489
511
|
|
|
512
|
+
### Custom Input Label
|
|
513
|
+
|
|
514
|
+
All default inputs render their label through a single shared component, `DefaultInputLabel`. Override it once via `components.inputLabel` to restyle every field label at once. It receives `{ label, required, htmlFor }` (web) and **renders nothing when the field has no label** — so the technical `name` key never leaks into the form. Each input also exposes the resolved label as `extra.InputLabel`, so custom inputs can reuse it:
|
|
515
|
+
|
|
516
|
+
```tsx
|
|
517
|
+
<TreegeRenderer
|
|
518
|
+
flow={flow}
|
|
519
|
+
components={{
|
|
520
|
+
inputLabel: ({ label, required, htmlFor }) =>
|
|
521
|
+
label ? (
|
|
522
|
+
<label htmlFor={htmlFor} className="my-label">
|
|
523
|
+
{label}
|
|
524
|
+
{required && <span className="text-red-500"> *</span>}
|
|
525
|
+
</label>
|
|
526
|
+
) : null,
|
|
527
|
+
}}
|
|
528
|
+
/>
|
|
529
|
+
```
|
|
530
|
+
|
|
531
|
+
Accessibility is preserved even without a visible label: the default inputs fall back to `aria-label={label || node.data.name}` on the control itself.
|
|
532
|
+
|
|
490
533
|
### Custom Validation
|
|
491
534
|
|
|
492
535
|
Add custom validation logic:
|
|
@@ -732,21 +775,22 @@ Once the development server is running, you can access these examples:
|
|
|
732
775
|
|
|
733
776
|
### TreegeEditor Props
|
|
734
777
|
|
|
735
|
-
| Prop | Type | Default | Description
|
|
736
|
-
|
|
737
|
-
| `flow` | `Flow \| null` | `null` | Initial decision tree
|
|
738
|
-
| `onSave` | `(flow: Flow) => void` | - | Callback when tree is saved
|
|
739
|
-
| `
|
|
740
|
-
| `
|
|
741
|
-
| `
|
|
742
|
-
| `
|
|
743
|
-
| `
|
|
744
|
-
| `
|
|
745
|
-
| `
|
|
746
|
-
| `
|
|
747
|
-
| `
|
|
748
|
-
| `
|
|
749
|
-
| `
|
|
778
|
+
| Prop | Type | Default | Description |
|
|
779
|
+
|-------------------|------------------------------------------|----------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
|
|
780
|
+
| `flow` | `Flow \| null` | `null` | Initial decision tree |
|
|
781
|
+
| `onSave` | `(flow: Flow) => void` | - | Callback when the user saves the tree. The **Save button is only rendered when this prop is provided**, and is no longer disabled on an empty canvas (so a cleared flow can be saved) |
|
|
782
|
+
| `onChange` | `(flow: Flow) => void` | - | Called (debounced ~150 ms) on every canvas change with the current flow. Use it for **live preview / autosave**. Unlike `onSave` it isn't gated on having input nodes, so it also reports an emptied canvas after Clear, and it does **not** strip sensitive headers (live consumers need the real flow) |
|
|
783
|
+
| `onExportJson` | `() => { nodes: Node[]; edges: Edge[] }` | - | Callback for exporting JSON data |
|
|
784
|
+
| `language` | `string` | `"en"` | UI language |
|
|
785
|
+
| `theme` | `"light" \| "dark"` | `"dark"` | Editor theme |
|
|
786
|
+
| `aiConfig` | `AIConfig` | - | AI configuration for tree generation (see [AI Generation](./AI_GENERATION.md)) |
|
|
787
|
+
| `className` | `string` | - | Additional CSS class names for custom styling |
|
|
788
|
+
| `extraMenuItems` | `ExtraMenuItem[]` | - | Extra entries appended to the actions panel "more" dropdown |
|
|
789
|
+
| `openApi` | `OpenApiDocument \| string` | - | OpenAPI 3.x source used to power URL/route suggestions and the Authorize flow. Accepts a pre-parsed document or a URL string (the editor fetches it on mount and toasts on failure) |
|
|
790
|
+
| `baseUrl` | `string` | - | Base URL the tree runs against. HTTP/options-source urls are stored relative to it, shown as a read-only prefix, and used to resolve the "Detect fields" probe. Pass the same value as `TreegeRenderer`'s `baseUrl` |
|
|
791
|
+
| `headers` | `HttpHeaders` | - | Global HTTP headers applied to in-editor requests (e.g. the "Detect fields" button). Pass the same value you give to `TreegeRenderer` so editor previews use the same auth/headers as runtime |
|
|
792
|
+
| `onAuthorize` | `(headers: HttpHeaders) => void` | - | Called when the user submits the Authorize dialog. Forward the resulting headers to `TreegeRenderer` (or `TreegeRendererProvider`) so every form request is authenticated |
|
|
793
|
+
| `onHeadersChange` | `(headers: HttpHeaders) => void` | - | Called when the user edits headers in the built-in "Global headers" dialog. The component is controlled — update your `headers` state in response and pass the new object back via the `headers` prop |
|
|
750
794
|
|
|
751
795
|
### TreegeRenderer Props
|
|
752
796
|
|