-
-
Notifications
You must be signed in to change notification settings - Fork 4
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Signed-off-by: Andres Correa Casablanca <[email protected]>
- Loading branch information
Showing
28 changed files
with
1,193 additions
and
1,138 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -3,5 +3,4 @@ | |
set -eu | ||
set -o pipefail | ||
|
||
pnpm run lint | ||
pnpm publint | ||
pnpm run -r lint |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -3,6 +3,5 @@ | |
set -eu | ||
set -o pipefail | ||
|
||
pnpm run lint | ||
pnpm publint | ||
pnpm test:coverage | ||
pnpm run -r lint | ||
pnpm run -r test:coverage |
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,155 @@ | ||
# Beautiful-Tree | ||
|
||
<p align="center"> | ||
<img | ||
src="https://raw.githubusercontent.com/Coder-Spirit/beautiful-tree/main/docs/example1.svg" | ||
style="height:300px;width:300px;" | ||
alt="Tree rendered with BeautifulTree" | ||
/> | ||
</p> | ||
|
||
Beautiful-Tree is a lightweight & flexible library to draw trees as SVG images. | ||
|
||
Some of its hightlights: | ||
- It is compatible with ESM, CJS, UMD and IIFE | ||
- Very lightweight (3.9Kb in its minimised ESM form, and 4.2Kb in its UMD form) | ||
- The generated trees can be styled with CSS | ||
|
||
## React Variant | ||
|
||
This is the "React variant" of the BeautifulTree library. If you are looking | ||
for integration with other technologies such as Vue, check the | ||
[main README.md](https://github.com/Coder-Spirit/beautiful-tree?tab=readme-ov-file#beautiful-tree) | ||
file of the project's repository. | ||
|
||
## Install | ||
|
||
```bash | ||
# With NPM | ||
npm install @beautiful-tree/react | ||
|
||
# With Yarn | ||
yarn add @beautiful-tree/react | ||
|
||
# With PNPM | ||
pnpm add @beautiful-tree/react | ||
``` | ||
|
||
## Basic Usage | ||
|
||
```jsx | ||
import { BeautifulTree } from '@beautiful-tree/react' | ||
|
||
const tree = { | ||
data: { v: 'A' }, | ||
children: [ | ||
{ | ||
node: { | ||
/* node data can contain any kews we want */ | ||
data: { v: 'B' }, | ||
children: [ | ||
{ | ||
/* we can annotate edges with arbitrary metadata */ | ||
eData: { e: 0.5 }, | ||
node: { data: { v: 'C' } } | ||
}, | ||
], | ||
}, | ||
}, | ||
{ | ||
node: { | ||
data: { v: 'D' }, | ||
children: [ | ||
{ node: { data: { v: 'E' } } }, | ||
{ node: { data: { v: 'F' } } }, | ||
], | ||
}, | ||
}, | ||
], | ||
} | ||
|
||
// The 3 main properties that we must always set are: | ||
// - `id`: the id for the tree component | ||
// - `tree:`` the tree data structure that will be rendered | ||
// - `svgProps``: the proportions of the SVG "canvas". | ||
render( | ||
<BeautifulTree | ||
id={'my-tree'} | ||
tree={tree} | ||
svgProps={{ | ||
width: 400, | ||
height: 400, | ||
// sizeUnit?: '%' | 'em' | 'px' | 'rem' | ||
}} | ||
/> | ||
) | ||
``` | ||
|
||
## Exposed CSS classes | ||
|
||
- `beautiful-tree-react`: applies to the rendered SVG element. | ||
- `beautiful-tree-edge`: applies to all the rendered edges inside the SVG | ||
element. | ||
- `beautiful-tree-node`: applies to all the rendered nodes inside the SVG | ||
element. | ||
- `beautiful-tree-root`: applies only to the rendered _root_ node. | ||
- `beautiful-tree-leaf`: applies to all the rendered _leaf_ nodes inside the SVG | ||
element. | ||
- `beautiful-tree-node-content`: applies to all the `<div>` elements rendered | ||
inside nodes when using the [`getNodeContent`](#getnodecontent) prop. | ||
|
||
## Other component props | ||
|
||
We won't go into very deep details because TypeScript's autocomplete is enough | ||
to discover the aspects not mentioned here. | ||
|
||
### `nodeShape` | ||
|
||
Accepted values are `'circle'` and `'rect'`. It specifies which shape is used | ||
to render the tree nodes. | ||
|
||
### `getNodeShape` | ||
|
||
In case we want the shape of each node to depend on their associated metadata, | ||
we can pass a function that returns the desired shape for each individual node. | ||
|
||
### `getNodeContent` | ||
|
||
We can pass a function to read what's inside the `data` property of each node | ||
and return either a `string` value or a `JSX.Element` object that will be | ||
rendered inside the corresponding node. | ||
|
||
### `computeLayout` | ||
|
||
It specifies the function that is used to compute the tree layout. | ||
- By default it uses `computeSmartLayout`. | ||
- But we can also import a simpler layout `computeNaiveLayout`. | ||
|
||
### `getNodeClass` | ||
|
||
We can pass a function that takes each node object and returns a list of CSS | ||
classes that will be applied to it. This is useful if we want to make node | ||
styles depend on their associated data. | ||
|
||
### `getEdgeClass` | ||
|
||
We can pass a function that takes edge metadata as input and returns a list of | ||
CSS classes that will be applied to it. This is useful if we want to make edge | ||
styles depend on their associated data. | ||
|
||
### `hCoef` | ||
|
||
This parameter, mostly useful for the case when node's shape is `'rect'`, allows | ||
us to control the ratio aspect between height and width of a node. It must be | ||
between `0` and `1`, ideally above `0.5`. | ||
|
||
## Future Plans | ||
|
||
- Introduce a layout algorithm for dendrograms (with leafs all at the bottom | ||
level, instead of being at the level inmediately below their parents). | ||
- Introduce rotated versions of the tree layout (left-to-right, right-to-left, | ||
bottom-up) | ||
- Allow to use different edge "styles" between nodes (now it's just straight | ||
lines): splines, segmented lines with corners... | ||
- Release versions of this same library for other components systems, such as | ||
Vue, Svelte, Solidjs, and native Web Components. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,91 @@ | ||
{ | ||
"name": "@beautiful-tree/react", | ||
"version": "0.1.3", | ||
"private": false, | ||
"author": "Andres Correa Casablanca <[email protected]>", | ||
"license": "MIT", | ||
"main": "./dist/beautiful-tree.cjs", | ||
"module": "./dist/beautiful-tree.mjs", | ||
"types": "./dist/beautiful-tree.d.cts", | ||
"exports": { | ||
".": { | ||
"import": { | ||
"types": "./dist/beautiful-tree.d.mts", | ||
"default": "./dist/beautiful-tree.mjs" | ||
}, | ||
"require": { | ||
"types": "./dist/beautiful-tree.d.cts", | ||
"default": "./dist/beautiful-tree.cjs" | ||
}, | ||
"browser": "./dist/beautiful-tree.iife.js", | ||
"default": "./dist/beautiful-tree.umd.js" | ||
}, | ||
"./min": { | ||
"import": { | ||
"types": "./dist/beautiful-tree.d.mts", | ||
"default": "./dist/beautiful-tree.min.mjs" | ||
}, | ||
"require": { | ||
"types": "./dist/beautiful-tree.d.cts", | ||
"default": "./dist/beautiful-tree.min.cjs" | ||
}, | ||
"browser": "./dist/beautiful-tree.min.iife.js", | ||
"default": "./dist/beautiful-tree.min.umd.js" | ||
} | ||
}, | ||
"files": [ | ||
"dist" | ||
], | ||
"scripts": { | ||
"build": "rollup --config rollup.config.prod.mjs", | ||
"build-storybook": "storybook build", | ||
"install-githooks": "if [ -d .git ]; then git config core.hooksPath .hooks; fi", | ||
"lint": "tsc && eslint . --ext ts,mts,tsx --report-unused-disable-directives --max-warnings 0 && publint", | ||
"lint:eslint": "eslint . --ext ts,mts,tsx --report-unused-disable-directives --max-warnings 0", | ||
"lint:publint": "publint", | ||
"lint:tsc": "tsc", | ||
"storybook": "storybook dev -p 6006", | ||
"test": "vitest run", | ||
"test:coverage": "vitest run --coverage", | ||
"test:watch": "vitest" | ||
}, | ||
"devDependencies": { | ||
"@arethetypeswrong/cli": "^0.10.2", | ||
"@coderspirit/eslint-config": "^1.2.1", | ||
"@rollup/plugin-terser": "^0.4.3", | ||
"@rollup/plugin-typescript": "^11.1.3", | ||
"@storybook/addon-essentials": "^7.4.2", | ||
"@storybook/addon-interactions": "^7.4.2", | ||
"@storybook/addon-links": "^7.4.2", | ||
"@storybook/blocks": "^7.4.2", | ||
"@storybook/react": "^7.4.2", | ||
"@storybook/react-vite": "^7.4.2", | ||
"@storybook/testing-library": "^0.2.1", | ||
"@testing-library/react": "^14.0.0", | ||
"@types/node": "^20.6.1", | ||
"@types/react": "^18.2.21", | ||
"@types/react-dom": "^18.2.7", | ||
"@typescript-eslint/parser": "^6.7.0", | ||
"@vitest/coverage-v8": "^0.34.4", | ||
"eslint": "^8.49.0", | ||
"eslint-plugin-react": "^7.33.2", | ||
"eslint-plugin-react-hooks": "^4.6.0", | ||
"eslint-plugin-react-refresh": "^0.4.3", | ||
"eslint-plugin-storybook": "^0.6.13", | ||
"jsdom": "^22.1.0", | ||
"prettier": "^3.0.3", | ||
"publint": "^0.2.2", | ||
"react": "^18.2.0", | ||
"react-dom": "^18.2.0", | ||
"rollup": "^3.29.1", | ||
"rollup-plugin-dts": "^5.3.1", | ||
"storybook": "^7.4.2", | ||
"tslib": "^2.6.2", | ||
"typescript": "^5.2.2", | ||
"vitest": "^0.34.4" | ||
}, | ||
"peerDependencies": { | ||
"react": "^18.2.0", | ||
"react-dom": "^18.2.0" | ||
} | ||
} |
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
Oops, something went wrong.