treege 3.0.0-beta.26 → 3.0.0-beta.28

package/README.md

@@ -5,7 +5,7 @@
   <p><strong>Build powerful decision trees with a visual node-based editor</strong></p>
 
   [![npm version](https://badge.fury.io/js/treege.svg)](https://badge.fury.io/js/treege)
-  [![License: ISC](https://img.shields.io/badge/License-ISC-blue.svg)](https://opensource.org/licenses/ISC)
+  [![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)
 
   <p>
     <a href="https://treege.io/">🌐 Website</a> •
@@ -13,7 +13,8 @@
     <a href="#features">Features</a> •
     <a href="#installation">Installation</a> •
     <a href="#quick-start">Quick Start</a> •
-    <a href="#examples">Examples</a>
+    <a href="#examples">Examples</a> •
+    <a href="./AI_GENERATION.md">🪄 AI Generation</a>
   </p>
 </div>
 
@@ -29,6 +30,7 @@ Treege is a modern React library for creating and rendering interactive decision
 - **Node-based Interface**: Drag-and-drop editor powered by ReactFlow
 - **4 Node Types**: Flow, Group, Input, and UI nodes
 - **Conditional Edges**: Advanced logic with AND/OR operators (`===`, `!==`, `>`, `<`, `>=`, `<=`)
+- **AI-Powered Generation**: Generate decision trees from natural language descriptions using Gemini, OpenAI, DeepSeek, or Claude ([Learn more](./AI_GENERATION.md))
 - **Multi-language Support**: Built-in translation system for all labels
 - **Type-safe**: Full TypeScript support
 - **Mini-map & Controls**: Navigation tools for complex trees
@@ -37,13 +39,14 @@ Treege is a modern React library for creating and rendering interactive decision
 ### Runtime Renderer (`treege/renderer`)
 - **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
+- **Cross-Platform**: Full support for both React Web and React Native with dedicated implementations
 - **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)
+- **Optional Dependencies**: Graceful degradation when optional packages like `react-native-document-picker` aren't installed
 - **Theme Support**: Dark/light mode out of the box
 - **Google API Integration**: Address autocomplete support
 
@@ -163,7 +166,7 @@ function App() {
 
 ## Module Structure
 
-Treege provides three import paths for optimal bundle size:
+Treege provides multiple import paths for optimal bundle size:
 
 ```tsx
 // Import everything (editor + renderer + types)
@@ -172,10 +175,167 @@ import { TreegeEditor, TreegeRenderer } from "treege";
 // Import only the editor
 import { TreegeEditor } from "treege/editor";
 
-// Import only the renderer
+// Import only the web renderer
 import { TreegeRenderer } from "treege/renderer";
+
+// Import only the React Native renderer
+import { TreegeRenderer } from "treege/renderer-native";
 ```
 
+## React Native Support
+
+Treege 3.0 includes full React Native support with a dedicated renderer implementation.
+
+### Installation for React Native
+
+```bash
+# Install Treege
+npm install treege
+
+# Install peer dependencies
+npm install react-native
+
+# Optional: Install for file input support
+npm install react-native-document-picker
+```
+
+### Basic Usage
+
+```tsx
+import { TreegeRenderer } from "treege/renderer-native";
+import type { Flow, FormValues } from "treege";
+
+function App() {
+  const flow: Flow = {
+    id: "flow-1",
+    nodes: [
+      {
+        id: "name",
+        type: "input",
+        data: {
+          type: "text",
+          name: "fullName",
+          label: "Full Name",
+          required: true
+        }
+      },
+      {
+        id: "email",
+        type: "input",
+        data: {
+          type: "text",
+          name: "email",
+          label: "Email",
+          required: true,
+          pattern: "^[\\w-\\.]+@([\\w-]+\\.)+[\\w-]{2,4}$"
+        }
+      }
+    ],
+    edges: []
+  };
+
+  const handleSubmit = (values: FormValues) => {
+    console.log("Form submitted:", values);
+  };
+
+  return (
+    <TreegeRenderer
+      flows={flow}
+      onSubmit={handleSubmit}
+    />
+  );
+}
+```
+
+### Custom Styling
+
+You can customize the appearance using the `style` and `contentContainerStyle` props:
+
+```tsx
+<TreegeRenderer
+  flows={flow}
+  onSubmit={handleSubmit}
+  style={{ flex: 1, backgroundColor: "#f5f5f5" }}
+  contentContainerStyle={{ padding: 20 }}
+/>
+```
+
+### Custom Components
+
+Override default components with your own React Native components:
+
+```tsx
+import { Text, TextInput, View } from "react-native";
+import { TreegeRenderer } from "treege/renderer-native";
+
+const CustomTextInput = ({ value, setValue, label, error }) => {
+  return (
+    <View style={{ marginBottom: 16 }}>
+      <Text style={{ fontSize: 14, marginBottom: 4 }}>{label}</Text>
+      <TextInput
+        value={value}
+        onChangeText={setValue}
+        style={{
+          borderWidth: 1,
+          borderColor: error ? "red" : "#ccc",
+          padding: 10,
+          borderRadius: 8
+        }}
+      />
+      {error && <Text style={{ color: "red", fontSize: 12 }}>{error}</Text>}
+    </View>
+  );
+};
+
+<TreegeRenderer
+  flows={flow}
+  components={{
+    inputs: {
+      text: CustomTextInput
+    }
+  }}
+/>
+```
+
+### Supported Input Types
+
+The React Native renderer includes default implementations for all input types:
+
+**Fully Implemented (Vanilla React Native)**:
+- `text`, `number`, `textarea`, `password`
+- `checkbox`, `switch`, `hidden`
+
+**With Optional Dependencies** (gracefully degrades if not installed):
+- `file` - Requires [react-native-document-picker](https://github.com/rnmods/react-native-document-picker) (optional)
+
+**Requires Custom Implementation** (placeholder provided):
+- `select`, `radio`, `autocomplete`
+- `date`, `daterange`, `time`, `timerange`
+- `address`, `http`
+
+You can implement these inputs using popular React Native libraries:
+- [@react-native-picker/picker](https://github.com/react-native-picker/picker) for `select` and `radio`
+- [react-native-date-picker](https://github.com/henninghall/react-native-date-picker) for `date` and `time` inputs
+- [@react-native-community/google-places-autocomplete](https://github.com/FaridSafi/react-native-google-places-autocomplete) for `address`
+
+### API Reference
+
+The React Native renderer shares the same API as the web renderer, with some platform-specific props:
+
+| Prop                    | Type                                        | Default      | Description                                                |
+|-------------------------|---------------------------------------------|--------------|------------------------------------------------------------|
+| `flows`                 | `Flow \| Flow[] \| null`                    | -            | Decision tree to render (single Flow or array of Flows)    |
+| `onSubmit`              | `(values: FormValues, meta?: Meta) => void` | -            | Form submission handler (meta includes HTTP response data) |
+| `onChange`              | `(values: FormValues) => void`              | -            | Form change handler                                        |
+| `validate`              | `(values, nodes) => Record<string, string>` | -            | Custom validation function                                 |
+| `initialValues`         | `FormValues`                                | `{}`         | Initial form values                                        |
+| `components`            | `TreegeRendererComponents`                  | -            | Custom component overrides                                 |
+| `language`              | `string`                                    | `"en"`       | UI language                                                |
+| `validationMode`        | `"onSubmit" \| "onChange"`                  | `"onSubmit"` | When to validate                                           |
+| `googleApiKey`          | `string`                                    | -            | API key for address input                                  |
+| `style`                 | `ViewStyle`                                 | -            | ScrollView style (RN only)                                 |
+| `contentContainerStyle` | `ViewStyle`                                 | -            | Content container style (RN)                               |
+
 ## Node Types
 
 ### Flow Node
@@ -441,27 +601,31 @@ Once the development server is running, you can access these examples:
 
 ### TreegeEditor Props
 
-| Prop       | Type                   | Default  | Description                 |
-|------------|------------------------|----------|-----------------------------|
-| `flow`     | `Flow \| null`         | `null`   | Initial decision tree       |
-| `onSave`   | `(flow: Flow) => void` | -        | Callback when tree is saved |
-| `language` | `string`               | `"en"`   | UI language                 |
-| `theme`    | `"light" \| "dark"`    | `"dark"` | Editor theme                |
+| Prop           | Type                                     | Default  | Description                                                                    |
+|----------------|------------------------------------------|----------|--------------------------------------------------------------------------------|
+| `flow`         | `Flow \| null`                           | `null`   | Initial decision tree                                                          |
+| `onSave`       | `(flow: Flow) => void`                   | -        | Callback when tree is saved                                                    |
+| `onExportJson` | `() => { nodes: Node[]; edges: Edge[] }` | -        | Callback for exporting JSON data                                               |
+| `language`     | `string`                                 | `"en"`   | UI language                                                                    |
+| `theme`        | `"light" \| "dark"`                      | `"dark"` | Editor theme                                                                   |
+| `aiConfig`     | `AIConfig`                               | -        | AI configuration for tree generation (see [AI Generation](./AI_GENERATION.md)) |
+| `className`    | `string`                                 | -        | Additional CSS class names for custom styling                                  |
 
 ### TreegeRenderer Props
 
-| Prop             | Type                                        | Default      | Description                |
-|------------------|---------------------------------------------|--------------|----------------------------|
-| `flows`          | `Flow \| null`                              | -            | Decision tree to render    |
-| `onSubmit`       | `(values: FormValues) => void`              | -            | Form submission handler    |
-| `onChange`       | `(values: FormValues) => void`              | -            | Form change handler        |
-| `validate`       | `(values, nodes) => Record<string, string>` | -            | Custom validation function |
-| `initialValues`  | `FormValues`                                | `{}`         | Initial form values        |
-| `components`     | `RendererComponents`                        | -            | Custom component overrides |
-| `language`       | `string`                                    | `"en"`       | UI language                |
-| `validationMode` | `"onSubmit" \| "onChange"`                  | `"onSubmit"` | When to validate           |
-| `theme`          | `"light" \| "dark"`                         | `"dark"`     | Renderer theme             |
-| `googleApiKey`   | `string`                                    | -            | API key for address input  |
+| Prop             | Type                                        | Default      | Description                                                |
+|------------------|---------------------------------------------|--------------|------------------------------------------------------------|
+| `flows`          | `Flow \| Flow[] \| null`                    | -            | Decision tree to render (single Flow or array of Flows)    |
+| `onSubmit`       | `(values: FormValues, meta?: Meta) => void` | -            | Form submission handler (meta includes HTTP response data) |
+| `onChange`       | `(values: FormValues) => void`              | -            | Form change handler                                        |
+| `validate`       | `(values, nodes) => Record<string, string>` | -            | Custom validation function                                 |
+| `initialValues`  | `FormValues`                                | `{}`         | Initial form values                                        |
+| `components`     | `TreegeRendererComponents`                  | -            | Custom component overrides                                 |
+| `language`       | `string`                                    | `"en"`       | UI language                                                |
+| `validationMode` | `"onSubmit" \| "onChange"`                  | `"onSubmit"` | When to validate                                           |
+| `theme`          | `"light" \| "dark"`                         | `"dark"`     | Renderer theme                                             |
+| `googleApiKey`   | `string`                                    | -            | API key for address input                                  |
+| `className`      | `string`                                    | -            | Additional CSS class names for custom styling              |
 
 ## Development
 
@@ -498,7 +662,7 @@ Contributions are welcome! Please feel free to submit a Pull Request.
 
 ## License
 
-ISC
+MIT
 
 ## Credits