treege 3.0.0-beta.2 → 3.0.0-beta.20

package/LICENSE

@@ -1,15 +1,21 @@
-The ISC License (ISC)
+MIT License
 
-Copyright (C) 2022 Tracktor
+Copyright (c) 2025 Tracktor
 
-Permission to use, copy, modify, and/or distribute this software for any
-purpose with or without fee is hereby granted, provided that the above
-copyright notice and this permission notice appear in all copies.
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
 
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
-WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
-MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
-ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
-WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION
-OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN
-CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -8,10 +8,11 @@
   [![License: ISC](https://img.shields.io/badge/License-ISC-blue.svg)](https://opensource.org/licenses/ISC)
 
   <p>
+    <a href="https://treege.io/">🌐 Website</a> •
+    <a href="https://treege.io/playground/">🎮 Playground</a> •
     <a href="#features">Features</a> •
     <a href="#installation">Installation</a> •
     <a href="#quick-start">Quick Start</a> •
-    <a href="#documentation">Documentation</a> •
     <a href="#examples">Examples</a>
   </p>
 </div>
@@ -26,17 +27,25 @@ Treege is a modern React library for creating and rendering interactive decision
 
 ### Visual Editor (`treege/editor`)
 - **Node-based Interface**: Drag-and-drop editor powered by ReactFlow
-- **5 Node Types**: Flow, Group, Input, JSON, and UI nodes
-- **Conditional Edges**: Advanced logic with AND/OR operators
-- **Multi-language Support**: Built-in translation system
+- **4 Node Types**: Flow, Group, Input, and UI nodes
+- **Conditional Edges**: Advanced logic with AND/OR operators (`===`, `!==`, `>`, `<`, `>=`, `<=`)
+- **Multi-language Support**: Built-in translation system for all labels
 - **Type-safe**: Full TypeScript support
+- **Mini-map & Controls**: Navigation tools for complex trees
+- **Theme Support**: Dark/light mode with customizable backgrounds
 
 ### Runtime Renderer (`treege/renderer`)
-- **Form Generation**: Automatically render forms from decision trees
-- **Validation**: Built-in required and pattern validation
-- **Conditional Logic**: Dynamic field visibility based on user input
-- **Customizable**: Override default components with your own
+- **Production Ready**: Full-featured form generation and validation system
+- **16 Input Types**: text, number, select, checkbox, radio, date, daterange, time, timerange, file, address, http, textarea, password, switch, autocomplete, and hidden
+- **HTTP Integration**: Built-in API integration with response mapping and search functionality
+- **Advanced Validation**: Required fields, pattern matching, custom validation functions
+- **Security**: Built-in input sanitization to prevent XSS attacks
+- **Enhanced Error Messages**: Clear, user-friendly error messages for HTTP inputs and validation
+- **Conditional Logic**: Dynamic field visibility based on user input and conditional edges
+- **Web & Native**: Both web (React) and React Native renderer implementations
+- **Fully Customizable**: Override any component (FormWrapper, Group, Inputs, SubmitButton, UI elements)
 - **Theme Support**: Dark/light mode out of the box
+- **Google API Integration**: Address autocomplete support
 
 ### Developer Experience
 - **Modular**: Import only what you need (editor, renderer, or both)
@@ -199,7 +208,7 @@ Form input with validation, patterns, and conditional logic.
 }
 ```
 
-Supported input types: `text`, `email`, `password`, `number`, `textarea`, `select`, `radio`, `checkbox`, `switch`, `date`, `dateRange`, `time`, `timeRange`, `file`, `address`, `http`
+Supported input types: `text`, `number`, `textarea`, `password`, `select`, `radio`, `checkbox`, `switch`, `autocomplete`, `date`, `daterange`, `time`, `timerange`, `file`, `address`, `http`, `hidden`
 
 ### Group Node
 Container for organizing multiple nodes together.
@@ -213,31 +222,23 @@ Container for organizing multiple nodes together.
 }
 ```
 
-### JSON Node
-Store and manage JSON data within the tree.
-
-```tsx
-{
-  type: "json",
-  data: {
-    json: { key: "value" }
-  }
-}
-```
-
 ### UI Node
-Display-only elements (titles, descriptions, separators).
+Display-only elements for visual organization and content display.
 
 ```tsx
 {
   type: "ui",
   data: {
-    type: "title",
+    type: "title", // or "divider"
     label: "Welcome to the form"
   }
 }
 ```
 
+Supported UI types:
+- `title` - Display headings and titles
+- `divider` - Visual separator between sections
+
 ## Conditional Edges
 
 Create dynamic flows with conditional logic:
@@ -336,15 +337,106 @@ Control when validation occurs:
 <TreegeRenderer validationMode="onChange" />
 ```
 
+### HTTP Input Integration
+
+Use the HTTP input type to fetch and map data from APIs:
+
+```tsx
+{
+  type: "input",
+  data: {
+    type: "http",
+    name: "country",
+    label: "Select your country",
+    httpConfig: {
+      method: "GET",
+      url: "https://api.example.com/countries",
+      responsePath: "$.data.countries", // JSONPath to extract data
+      mapping: {
+        label: "name",
+        value: "code"
+      },
+      searchParam: "query", // Enable search functionality
+      fetchOnMount: true
+    }
+  }
+}
+```
+
+### Global Configuration
+
+Configure the renderer globally using the TreegeConfigProvider:
+
+```tsx
+import { TreegeConfigProvider } from "treege/renderer";
+
+function App() {
+  return (
+    <TreegeConfigProvider
+      config={{
+        language: "fr",
+        googleApiKey: "your-google-api-key",
+        components: {
+          // Your custom components
+        }
+      }}
+    >
+      <TreegeRenderer flows={flow} />
+    </TreegeConfigProvider>
+  );
+}
+```
+
+### Programmatic Control
+
+Use the `useTreegeRenderer` hook for programmatic control:
+
+```tsx
+import { useTreegeRenderer } from "treege/renderer";
+
+function CustomForm() {
+  const { values, setFieldValue, submit, reset } = useTreegeRenderer();
+
+  return (
+    <div>
+      <button onClick={() => setFieldValue("email", "test@example.com")}>
+        Prefill Email
+      </button>
+      <button onClick={submit}>Submit</button>
+      <button onClick={reset}>Reset</button>
+    </div>
+  );
+}
+```
+
 ## Examples
 
 Check out the `/example` directory for complete examples:
 
 ```bash
-  # Run the example app
-  bun example
+# Run the example app
+bun example
 ```
 
+### Available Example URLs
+
+Once the development server is running, you can access these examples:
+
+- **Default Example**: [http://localhost:5173/](http://localhost:5173/)
+  - Basic demonstration of Treege functionality
+
+- **Demo Example**: [http://localhost:5173/example](http://localhost:5173/example)
+  - Full featured demo showcasing the library capabilities
+
+- **All Inputs Example**: [http://localhost:5173/example-all-inputs](http://localhost:5173/example-all-inputs)
+  - Comprehensive showcase of all 16 input types
+
+- **Custom Input Example**: [http://localhost:5173/example-custom-input](http://localhost:5173/example-custom-input)
+  - Demonstrates how to create and integrate custom input components
+
+- **TreegeConfigProvider Example**: [http://localhost:5173/example-treege-config-provider](http://localhost:5173/example-treege-config-provider)
+  - Shows global configuration with TreegeConfigProvider
+
 ## API Reference
 
 ### TreegeEditor Props
@@ -410,7 +502,7 @@ ISC
 
 ## Credits
 
-Created and maintained by [Mickaël Austoni](https://github.com/Tracktor)
+Created and maintained by [Mickaël Austoni](https://github.com/MickaelAustoni)
 
 ## Support