<div align="center">
  <img alt="Treege" src="https://user-images.githubusercontent.com/108873902/189673125-5d1fdaf3-82d1-486f-bb16-01b0554bd4f1.png" style="padding: 20px;" width="auto" height="100" />
  <p><strong>Treege is a tools for decision tree generator</strong></p>
</div>

[![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 <Treege />;
};

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)