An open API service indexing awesome lists of open source software.

https://github.com/tracktor/treege

Form decision tree generator
https://github.com/tracktor/treege

javascript react tree treege typescript

Last synced: about 1 year ago
JSON representation

Form decision tree generator

Awesome Lists containing this project

README

          


Treege

Treege is a tools for decision tree generator


[![npm version](https://badge.fury.io/js/treege.svg)](https://badge.fury.io/js/treege)

[![Video Thumbnail](https://img.youtube.com/vi/YOUTUBE_VIDEO_ID/0.jpg)](https://user-images.githubusercontent.com/108873902/184317603-61ceafc6-a326-49b2-b0de-ffda9cf9c75e.mov)

- [Installation](#Installation)
- [Usage](#Usage)
- [Options](#Options)
- [Generate form from Treege data](#Generate-form-from-Treege-data)
- [Local installation](#local-installation)
- [Available Scripts](#Available-Scripts)
- [yarn dev](#yarn-dev)
- [yarn build](#yarn-build)
- [yarn preview](#yarn-preview)
- [Convention](#Convention)

## Installation

```console
yarn add treege
```

## Usage

```typescript jsx
import { Treege } from "treege";

const App = () => {
return ;
};

export default App;
```

### Options

| Props | Type | Default | Required | Detail |
|---------------|--------|-----------|----------|-----------------------------------------------------------------------------------------------|
| backendConfig | object | undefined | false | Backend configuration. Only necessary if you want backend communication. |
| initialTreeId | string | undefined | false | If provided, this will fetch initial tree id. Cannot provided with `initialTree` in same time |
| initialTree | object | undefined | false | Initial tree data. Cannot provided with `initialTreeId` in same time |

#### `backendConfig`
| Props | Type | Default | Required | Detail |
|-----------|--------|-----------|----------|-------------------------------------------------------------|
| baseUrl | string | undefined | true | Base url for API communication. ex : https://api.treege.com |
| authToken | string | undefined | false | Authentication token |
| endpoints | object | undefined | false | Endpoints configuration |

#### `endpoints`
| Props | Type | Default | Required | Detail |
|-----------|--------|-----------|-----------------|-------------------------------------------------------------|
| workflow | string | undefined | "/v1/workflow" | Endpoint for `get/post/patch` single `workflow` |
| workflows | string | undefined | "/v1/workflows" | Endpoint for get all workflows. It is a array on `workflow` |

Backend model need to be compatible with the following interface:

```typescript
interface Workflow {
id: string;
name: string;
description: string;
tree: Tree;
}
```

`Tree` is a JSON object generated by `Treege` with the following interface:

```typescript
interface Tree {
name: string;
attributes: any;
children: Tree[];
treeId?: string;
}
```

## How use Treege data ?

You can easily generate a form with the `React library` [treege-consumer](https://github.com/Tracktor/treege-consumer) or use our own application !

## Local installation

Clone the repository and install dependencies

```console
yarn install
```
Locally preview production build

## Convention

- [Airbnb JavaScript Style Guide](https://github.com/airbnb/javascript)
- [Versioning](https://semver.org)
- [Conventional Commits](https://www.conventionalcommits.org)

## Type Definitions

This library uses type definitions from [@tracktor/types-treege](https://www.npmjs.com/package/@tracktor/types-treege)