treege 0.1.0

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.
Files changed (4) hide show
  1. package/CHANGELOG.md +5 -0
  2. package/LICENSE +15 -0
  3. package/README.md +164 -0
  4. package/package.json +70 -0
package/CHANGELOG.md ADDED
@@ -0,0 +1,5 @@
1
+ # [Versions](https://github.com/Tracktor/treege/releases)
2
+
3
+ ## v0.1.0
4
+
5
+ - Treege as library
package/LICENSE ADDED
@@ -0,0 +1,15 @@
1
+ The ISC License (ISC)
2
+
3
+ Copyright (C) 2022 Tracktor
4
+
5
+ Permission to use, copy, modify, and/or distribute this software for any
6
+ purpose with or without fee is hereby granted, provided that the above
7
+ copyright notice and this permission notice appear in all copies.
8
+
9
+ THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
10
+ WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
11
+ MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
12
+ ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
13
+ WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION
14
+ OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN
15
+ CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
package/README.md ADDED
@@ -0,0 +1,164 @@
1
+ <div align="center">
2
+ <img alt="Treege" src="https://user-images.githubusercontent.com/108873902/189673125-5d1fdaf3-82d1-486f-bb16-01b0554bd4f1.png" style="padding: 20px;" width="auto" height="100" />
3
+ <p><strong>Treege is a tools for decision tree generator</strong></p>
4
+ </div>
5
+
6
+ <video src="https://user-images.githubusercontent.com/108873902/184317603-61ceafc6-a326-49b2-b0de-ffda9cf9c75e.mov"></video>
7
+
8
+ - [Features](#Features)
9
+ - [Embed Treege anywhere](#Embed-Treege-anywhere)
10
+ - [Provide data to iframe](#Provide-data-to-iframe)
11
+ - [Listen Treege event](#Listen-Treege-event)
12
+ - [Events listener](#Events-listener)
13
+ - [Events message](#Events-message)
14
+ - [Generate form from Treege data](#Generate-form-from-Treege-data)
15
+ - [Local installation](#local-installation)
16
+ - [Available Scripts](#Available-Scripts)
17
+ - [yarn dev](#yarn-dev)
18
+ - [yarn build](#yarn-build)
19
+ - [yarn preview](#yarn-preview)
20
+ - [Convention](#Convention)
21
+
22
+ ## Features
23
+
24
+ - 📦 **[React](https://fr.reactjs.org)** - v18+ with Hooks
25
+ - ⚡️ **[Vite](https://vitejs.dev)** - Next Generation Frontend Tooling
26
+ - 📐 **[ESLint](https://eslint.org)** - Code analyzer
27
+ - 🚀 **[Vitest](https://vitest.dev)** - A Vite native unit test framework. It's fast!
28
+ - 🛠️ **[React Testing Library](https://testing-library.com/docs/react-testing-library/intro)** - React DOM testing
29
+ utilities
30
+ - 💅️ **[CSS Modules](https://github.com/css-modules/css-modules)** - CSS files in which all class names are scoped
31
+ locally
32
+ - 🐶 **[Husky](https://typicode.github.io/husky)** - Modern native git hooks made easy
33
+
34
+ ## Embed Treege anywhere
35
+
36
+ #### Treege can be easily embed in any HTML page.
37
+
38
+ ```html
39
+ <!doctype html>
40
+ <html lang="en">
41
+ <head>
42
+ <title>Treege Iframe</title>
43
+ <style>
44
+ html,
45
+ body,
46
+ iframe {
47
+ overflow: hidden;
48
+ margin: 0;
49
+ height: 100%;
50
+ width: 100%;
51
+ border: 0;
52
+ }
53
+ </style>
54
+ </head>
55
+ <body>
56
+
57
+ <iframe src="{{YOUR_TREEGE_URL}}"></iframe>
58
+
59
+ </body>
60
+ </html>
61
+ ```
62
+
63
+ #### Provide data to iframe
64
+
65
+ ```javascript
66
+ const iframe = document.querySelector("iframe");
67
+
68
+ iframe.addEventListener("load", handleLoadIframe);
69
+
70
+ function handleLoadIframe() {
71
+ const tree = {
72
+ "attributes": {
73
+ "depth": 0,
74
+ "label": "Age",
75
+ "type": "number",
76
+ "isRoot": true,
77
+ "isLeaf": true,
78
+ "...": "..."
79
+ },
80
+ "children": [],
81
+ "name": "age"
82
+ }
83
+
84
+ setTimeout(() => {
85
+ iframe.contentWindow.postMessage({ source: "treege", tree, type: "setTree" }, "*");
86
+ }, 100);
87
+ }
88
+ ```
89
+
90
+ #### Listen Treege event
91
+
92
+ ```javascript
93
+ const iframe = document.querySelector("iframe");
94
+
95
+ window.addEventListener("message", handleMessage);
96
+
97
+ function handleMessage(event) {
98
+ // On save event is trigger from iframe
99
+ if (event.origin === "{{YOUR_TREEGE_URL}}" && event.data.type === "onSave" && event.data.source === "treege") {
100
+ // Get tree data from Treege
101
+ console.log(event.data.tree);
102
+ }
103
+ }
104
+ ```
105
+
106
+ ### Events listener
107
+
108
+ List of `event.data` that can be listened with`window.addEventListener("message")`
109
+
110
+ | Event name | Data |
111
+ |------------|---------------------------------------------------------------------------------------------|
112
+ | onSave | `{source: "treege", type : "onSave", tree : {{attributes: {...}, children: [], name: ""}}}` |
113
+
114
+ ### Events message
115
+
116
+ List of events that can be sent with `iframe.contentWindow.postMessage`
117
+
118
+ | Event name | Data |
119
+ |------------|----------------------------------------------------------------------------------------------|
120
+ | setTree | `{source: "treege", type : "setTree", tree : {{attributes: {...}, children: [], name: ""}}}` |
121
+
122
+ ## Generate form from Treege data
123
+
124
+ Form can be easily generated with the React library [treege-consumer](https://github.com/Tracktor/treege-consumer)
125
+
126
+ ## Local installation
127
+
128
+ Clone the repository and install dependencies
129
+
130
+ ```console
131
+ yarn install
132
+ ```
133
+
134
+ ## Available Scripts
135
+
136
+ In the project directory, you can run:
137
+
138
+ ### `yarn dev`
139
+
140
+ Runs the app in the development mode.\
141
+ Open [http://localhost:5173](http://localhost:5173) to view it in the browser.
142
+
143
+ The page will reload if you make edits.\
144
+ You will also see any lint errors in the console.
145
+
146
+ ### `yarn build`
147
+
148
+ Builds the app for production to the `dist` folder.\
149
+ It correctly bundles React in production mode and optimizes the build for the best performance.
150
+
151
+ The build is minified and the filenames include the hashes.\
152
+ Your app is ready to be deployed!
153
+
154
+ See the section about [deployment](https://vitejs.dev/guide/static-deploy.html) for more information.
155
+
156
+ ### `yarn preview`
157
+
158
+ Locally preview production build
159
+
160
+ ## Convention
161
+
162
+ - [Airbnb JavaScript Style Guide](https://github.com/airbnb/javascript)
163
+ - [Versioning](https://semver.org)
164
+ - [Conventional Commits](https://www.conventionalcommits.org)
package/package.json ADDED
@@ -0,0 +1,70 @@
1
+ {
2
+ "name": "treege",
3
+ "license": "ISC",
4
+ "version": "0.1.0",
5
+ "type": "module",
6
+ "types": "dist/main.d.ts",
7
+ "main": "dist/main.umd.cjs",
8
+ "module": "dist/main.js",
9
+ "files": [
10
+ "dist"
11
+ ],
12
+ "exports": {
13
+ ".": {
14
+ "import": "./dist/main.js",
15
+ "require": "./dist/main.umd.cjs"
16
+ }
17
+ },
18
+ "repository": "git@github.com:Tracktor/treege.git",
19
+ "author": "Mickaël Austoni",
20
+ "bugs": {
21
+ "url": "https://github.com/Tracktor/treege/issues"
22
+ },
23
+ "homepage": "https://github.com/Tracktor/treege#readme",
24
+ "scripts": {
25
+ "dev": "vite",
26
+ "build": "tsc && vite build",
27
+ "lint": "eslint . && tsc --noEmit",
28
+ "preview": "vite preview",
29
+ "test": "vitest",
30
+ "test:coverage": "vitest run --coverage",
31
+ "test:ui": "vitest --ui",
32
+ "prepare": "husky install"
33
+ },
34
+ "dependencies": {
35
+ "@codemirror/lang-json": "^6.0.0",
36
+ "@mui/icons-material": "^5.8.4",
37
+ "@uiw/codemirror-theme-dracula": "^4.11.4",
38
+ "@uiw/react-codemirror": "^4.11.4",
39
+ "design-system-tracktor": "^1.0.5",
40
+ "i18next": "^21.8.14",
41
+ "i18next-browser-languagedetector": "^6.1.4",
42
+ "i18next-http-backend": "^1.4.1",
43
+ "react": "^18.2.0",
44
+ "react-d3-tree": "^3.3.4",
45
+ "react-dom": "^18.2.0",
46
+ "react-i18next": "^11.18.2",
47
+ "sass": "^1.54.0"
48
+ },
49
+ "devDependencies": {
50
+ "@testing-library/jest-dom": "^5.16.5",
51
+ "@testing-library/react": "^13.3.0",
52
+ "@testing-library/user-event": "^13.5.0",
53
+ "@types/node": "^16.11.45",
54
+ "@types/react": "^18.0.15",
55
+ "@types/react-dom": "^18.0.6",
56
+ "@vitejs/plugin-react": "^2.0.0",
57
+ "@vitest/ui": "0.19.1",
58
+ "eslint-config-react-tracktor": "^1.0.3",
59
+ "husky": "^8.0.0",
60
+ "jsdom": "20.0.0",
61
+ "typescript": "^4.7.4",
62
+ "vite": "^3.0.3",
63
+ "vite-plugin-dts": "^1.6.5",
64
+ "vitest": "^0.21.0"
65
+ },
66
+ "peerDependencies": {
67
+ "react": "^18.2.0",
68
+ "react-dom": "^18.2.0"
69
+ }
70
+ }