treege 3.0.0-beta.94 → 3.0.0-beta.96
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 +40 -22
- package/dist/DefaultSubmitButton-CAOTg3w7.js +5130 -0
- package/dist/{ThemeContext-CE3SE9DG.js → ThemeContext-B9-cptw0.js} +108 -70
- package/dist/editor/types/ai.d.ts +1 -1
- package/dist/editor/utils/aiFlowGenerator.d.ts +16 -1
- package/dist/{editor-mvGEgr3P.js → editor-CSc1Ygb5.js} +1765 -1742
- package/dist/editor.js +2 -2
- package/dist/main.js +6 -6
- package/dist/renderer/features/TreegeRenderer/native/TreegeRenderer.d.ts +3 -2
- package/dist/renderer/features/TreegeRenderer/useTreegeRenderer.d.ts +8 -1
- package/dist/renderer/features/TreegeRenderer/web/TreegeRenderer.d.ts +1 -1
- package/dist/renderer/features/TreegeRenderer/web/components/DefaultStep.d.ts +1 -1
- package/dist/renderer/hooks/useRenderNode.d.ts +7 -1
- package/dist/renderer/types/renderer.d.ts +19 -1
- package/dist/renderer/utils/dateLocale.d.ts +6 -0
- package/dist/renderer/utils/form.d.ts +13 -1
- package/dist/renderer/utils/step.d.ts +9 -0
- package/dist/renderer-DX3WeZtk.js +437 -0
- package/dist/renderer-native.js +603 -618
- package/dist/renderer.js +5 -5
- package/dist/useRenderNode-C9RSQFX3.js +600 -0
- package/package.json +1 -1
- package/dist/DefaultSubmitButton-DNVIV9BO.js +0 -1909
- package/dist/renderer-CfoZiy7J.js +0 -449
- package/dist/useRenderNode-BPgpYSyg.js +0 -538
package/README.md
CHANGED
|
@@ -46,6 +46,8 @@ Treege is a modern React library for creating and rendering interactive decision
|
|
|
46
46
|
- **Enhanced Error Messages**: Clear, user-friendly error messages for HTTP inputs and validation
|
|
47
47
|
- **Conditional Logic**: Dynamic field visibility based on user input and conditional edges
|
|
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
|
+
- **Auto-Advance**: single-choice steps (radio, select, autocomplete…) move to the next step automatically on selection — never on mount, back navigation, or the final step
|
|
50
|
+
- **Localized Date Pickers**: calendars follow the form's `language` (day/month names, first day of week, date format) with today preselected
|
|
49
51
|
- **Edit Mode**: Pre-fill with `initialValues` (accepts name keys, reactive) to round-trip and edit previously submitted records
|
|
50
52
|
- **Host Data Injection**: Attach app-owned fields (e.g. a user id) to every submission with `extraPayload` — merged into both the `onSubmit` payload and the HTTP submit body
|
|
51
53
|
- **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
|
|
@@ -575,6 +577,8 @@ Treege supports multiple languages out of the box:
|
|
|
575
577
|
}
|
|
576
578
|
```
|
|
577
579
|
|
|
580
|
+
The `language` prop also localizes the **date and date-range pickers** (web): day/month names, the displayed date format, and the first day of the week all follow the form's language (e.g. weeks start on Monday in French) — independently of the browser locale. When the field is empty, the calendar opens with the current day preselected. Supported languages: `ar`, `de`, `en`, `es`, `fr`, `it`, `pt` (regional variants fall back to their base language, unknown languages to English).
|
|
581
|
+
|
|
578
582
|
## Customization
|
|
579
583
|
|
|
580
584
|
### Custom Input Components
|
|
@@ -811,7 +815,11 @@ Pass `isSubmitting` to keep the submit/continue button in its loading state (spi
|
|
|
811
815
|
|
|
812
816
|
### Multi-Step Forms
|
|
813
817
|
|
|
814
|
-
When a flow contains **Group** nodes, the renderer automatically splits the form into navigable steps — each contiguous slice of visible nodes sharing the same group becomes one step, with built-in Back/Continue controls
|
|
818
|
+
When a flow contains **Group** nodes, the renderer automatically splits the form into navigable steps — each contiguous slice of visible nodes sharing the same group becomes one step, with built-in Back/Continue controls. Branching via conditional edges recomputes the steps on the fly.
|
|
819
|
+
|
|
820
|
+
Continue turns into **Submit only on the final step** — i.e. when the path is actually complete (end of path reached, or an explicit `submit` input is visible). On a branching *boundary* step (the last step currently visible while the flow still continues behind an unanswered choice), the button stays a disabled Continue and pressing Enter never submits — so an incomplete flow can't be sent.
|
|
821
|
+
|
|
822
|
+
**Auto-advance:** when a step's only interactive field is a single-choice input (radio, non-multiple select, autocomplete, or an HTTP input mapped to options), selecting an option automatically advances to the next step after a short delay (~180 ms, so the selected state is visible). It only triggers on a direct user selection — never on mount, when navigating back to an answered step, or on the final step (a choice never submits silently).
|
|
815
823
|
|
|
816
824
|
Override the default step layout via `components.step`:
|
|
817
825
|
|
|
@@ -833,7 +841,13 @@ Override the default step layout via `components.step`:
|
|
|
833
841
|
/>
|
|
834
842
|
```
|
|
835
843
|
|
|
836
|
-
Use **`canGoBack`** (not `!isFirstStep`) to decide whether to show the Back control: it's `true` on any step past the first, and also on the first step when an `onBack` prop is provided.
|
|
844
|
+
Use **`canGoBack`** (not `!isFirstStep`) to decide whether to show the Back control: it's `true` on any step past the first, and also on the first step when an `onBack` prop is provided. **`isLastStep`** is `true` only when the step is genuinely final (see above) — a branching boundary step receives `false`, so your button keeps reading "Continue".
|
|
845
|
+
|
|
846
|
+
To keep the default step layout but drop its border, use the `disableSectionBorder` prop instead of a custom step:
|
|
847
|
+
|
|
848
|
+
```tsx
|
|
849
|
+
<TreegeRenderer flow={flow} disableSectionBorder />
|
|
850
|
+
```
|
|
837
851
|
|
|
838
852
|
#### Bridging navigation to an outer flow
|
|
839
853
|
|
|
@@ -847,7 +861,7 @@ When the renderer is embedded in a surrounding wizard (e.g. a modal with its own
|
|
|
847
861
|
onSubmit={handleSubmit}
|
|
848
862
|
/>
|
|
849
863
|
|
|
850
|
-
// A submit button living outside the renderer (web): only submits on the
|
|
864
|
+
// A submit button living outside the renderer (web): only submits on the final
|
|
851
865
|
// step — on earlier steps it advances, like the built-in Continue button.
|
|
852
866
|
<button type="submit" form="treege-form">Save</button>
|
|
853
867
|
```
|
|
@@ -888,6 +902,8 @@ function CustomForm({ flow }) {
|
|
|
888
902
|
}
|
|
889
903
|
```
|
|
890
904
|
|
|
905
|
+
Beyond form state, the hook also exposes the full step machinery so a custom UI gets the exact same behavior as the built-in renderers: `handleContinue` / `handleBack` (Continue submits only on the final step; Back bridges to the `onBack` prop on step 0), `canContinue` / `canGoBack` (button gating), `isFinalStep` (true only when the path is complete — drives the Continue vs Submit label), plus `stepLabel` and `formTitle` (translated from the current group and the `title` prop). The hook accepts the `isSubmitting`, `onBack` and `title` props for this purpose.
|
|
906
|
+
|
|
891
907
|
> The `useTreegeRenderer` return type is exported as `UseTreegeRendererReturn` for TypeScript consumers building custom components.
|
|
892
908
|
|
|
893
909
|
## Examples
|
|
@@ -944,25 +960,27 @@ Once the development server is running, you can access these examples:
|
|
|
944
960
|
|
|
945
961
|
### TreegeRenderer Props
|
|
946
962
|
|
|
947
|
-
| Prop
|
|
948
|
-
|
|
949
|
-
| `flow`
|
|
950
|
-
| `onSubmit`
|
|
951
|
-
| `extraPayload`
|
|
952
|
-
| `onChange`
|
|
953
|
-
| `validate`
|
|
954
|
-
| `initialValues`
|
|
955
|
-
| `components`
|
|
956
|
-
| `language`
|
|
957
|
-
| `validationMode`
|
|
958
|
-
| `theme`
|
|
959
|
-
| `googleApiKey`
|
|
960
|
-
| `headers`
|
|
961
|
-
| `isLoading`
|
|
962
|
-
| `isSubmitting`
|
|
963
|
-
| `onBack`
|
|
964
|
-
| `formId`
|
|
965
|
-
| `className`
|
|
963
|
+
| Prop | Type | Default | Description |
|
|
964
|
+
|------------------------|-------------------------------------------------|--------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
|
|
965
|
+
| `flow` | `Flow \| null` | - | Decision tree to render |
|
|
966
|
+
| `onSubmit` | `(values: FormValues, meta?: Meta) => void` | - | Form submission handler (meta includes HTTP response data) |
|
|
967
|
+
| `extraPayload` | `Record<string, unknown> \| (values) => Record` | - | Host-owned fields merged into every submission — the `onSubmit` payload **and** the HTTP submit body. Object or function of the current values (see below) |
|
|
968
|
+
| `onChange` | `(values: FormValues) => void` | - | Form change handler |
|
|
969
|
+
| `validate` | `(values, nodes) => Record<string, string>` | - | Custom validation function |
|
|
970
|
+
| `initialValues` | `FormValues` | `{}` | Pre-fill values to edit a submitted record. Accepts `node.id` **or** name keys (same shape as `onSubmit`); reactive — re-seeds if it changes after mount (see below) |
|
|
971
|
+
| `components` | `TreegeRendererComponents` | - | Custom component overrides |
|
|
972
|
+
| `language` | `string` | `"en"` | UI language |
|
|
973
|
+
| `validationMode` | `"onSubmit" \| "onChange"` | `"onSubmit"` | When to validate |
|
|
974
|
+
| `theme` | `"light" \| "dark"` | `"dark"` | Renderer theme |
|
|
975
|
+
| `googleApiKey` | `string` | - | API key for address input |
|
|
976
|
+
| `headers` | `HttpHeaders` | - | HTTP headers as `{ name: value }`, applied to every request (field-level wins) |
|
|
977
|
+
| `isLoading` | `boolean` | `false` | Render a loading skeleton instead of the form (see below) |
|
|
978
|
+
| `isSubmitting` | `boolean` | `false` | Force the submit/continue button into its loading state (spinner + disabled). OR-ed with the internal submitting state — useful with an async `onSubmit` |
|
|
979
|
+
| `onBack` | `() => void` | - | Called when Back is clicked on the **first step**; bridges back-navigation to an outer flow (e.g. a parent modal). Shows a Back button on step 0 when provided |
|
|
980
|
+
| `formId` | `string` | - | Sets the `<form>` `id` so a submit button outside the renderer can target it via the native `form` attribute. Web only; submits only on the final step in multi-step flows |
|
|
981
|
+
| `className` | `string` | - | Additional CSS class names for custom styling |
|
|
982
|
+
| `style` | `CSSProperties` | - | Inline styles applied to the renderer's root container, alongside `className`. Web only |
|
|
983
|
+
| `disableSectionBorder` | `boolean` | `false` | Removes the default border of the `<section>` wrapping each step (padding and layout are kept). Web only |
|
|
966
984
|
|
|
967
985
|
## Development
|
|
968
986
|
|