Skip to content

Commit f2202f8

Browse files
committed
build: kickstart monorepo structure
Signed-off-by: Andres Correa Casablanca <castarco@coderspirit.xyz>
1 parent 927ff98 commit f2202f8

28 files changed

+1192
-1137
lines changed

.github/workflows/tests.yml renamed to .github/workflows/tests-react-svg.yml

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
name: Tests
1+
name: Tests (React SVG)
22

33
on:
44
push:
@@ -34,13 +34,11 @@ jobs:
3434
node-version: ${{ matrix.node-version }}
3535
cache: 'pnpm'
3636
- name: Install dependencies
37-
run: pnpm install
37+
run: pnpm --filter react install
3838
- name: Run Linters
3939
if: ${{ matrix.os == 'ubuntu-22.04' }}
40-
run: pnpm lint
40+
run: pnpm --filter react run lint
4141
- name: Build Library
42-
run: pnpm build
42+
run: pnpm --filter react run build
4343
- name: Run Tests
44-
run: pnpm test:coverage
45-
- name: Publint
46-
run: pnpm publint --strict
44+
run: pnpm --filter react run test:coverage

.hooks/pre-commit

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,5 +3,4 @@
33
set -eu
44
set -o pipefail
55

6-
pnpm run lint
7-
pnpm publint
6+
pnpm run -r lint

.hooks/pre-push

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,5 @@
33
set -eu
44
set -o pipefail
55

6-
pnpm run lint
7-
pnpm publint
8-
pnpm test:coverage
6+
pnpm run -r lint
7+
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.

@beautiful-tree/react/README.md

Lines changed: 155 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,155 @@
1+
# Beautiful-Tree
2+
3+
<p align="center">
4+
<img
5+
src="https://raw.githubusercontent.com/Coder-Spirit/beautiful-tree/main/docs/example1.svg"
6+
style="height:300px;width:300px;"
7+
alt="Tree rendered with BeautifulTree"
8+
/>
9+
</p>
10+
11+
Beautiful-Tree is a lightweight & flexible library to draw trees as SVG images.
12+
13+
Some of its hightlights:
14+
- It is compatible with ESM, CJS, UMD and IIFE
15+
- Very lightweight (3.9Kb in its minimised ESM form, and 4.2Kb in its UMD form)
16+
- The generated trees can be styled with CSS
17+
18+
## React Variant
19+
20+
This is the "React variant" of the BeautifulTree library. If you are looking
21+
for integration with other technologies such as Vue, check the
22+
[main README.md](https://github.com/Coder-Spirit/beautiful-tree?tab=readme-ov-file#beautiful-tree)
23+
file of the project's repository.
24+
25+
## Install
26+
27+
```bash
28+
# With NPM
29+
npm install @beautiful-tree/react
30+
31+
# With Yarn
32+
yarn add @beautiful-tree/react
33+
34+
# With PNPM
35+
pnpm add @beautiful-tree/react
36+
```
37+
38+
## Basic Usage
39+
40+
```jsx
41+
import { BeautifulTree } from '@beautiful-tree/react'
42+
43+
const tree = {
44+
data: { v: 'A' },
45+
children: [
46+
{
47+
node: {
48+
/* node data can contain any kews we want */
49+
data: { v: 'B' },
50+
children: [
51+
{
52+
/* we can annotate edges with arbitrary metadata */
53+
eData: { e: 0.5 },
54+
node: { data: { v: 'C' } }
55+
},
56+
],
57+
},
58+
},
59+
{
60+
node: {
61+
data: { v: 'D' },
62+
children: [
63+
{ node: { data: { v: 'E' } } },
64+
{ node: { data: { v: 'F' } } },
65+
],
66+
},
67+
},
68+
],
69+
}
70+
71+
// The 3 main properties that we must always set are:
72+
// - `id`: the id for the tree component
73+
// - `tree:`` the tree data structure that will be rendered
74+
// - `svgProps``: the proportions of the SVG "canvas".
75+
render(
76+
<BeautifulTree
77+
id={'my-tree'}
78+
tree={tree}
79+
svgProps={{
80+
width: 400,
81+
height: 400,
82+
// sizeUnit?: '%' | 'em' | 'px' | 'rem'
83+
}}
84+
/>
85+
)
86+
```
87+
88+
## Exposed CSS classes
89+
90+
- `beautiful-tree-react`: applies to the rendered SVG element.
91+
- `beautiful-tree-edge`: applies to all the rendered edges inside the SVG
92+
element.
93+
- `beautiful-tree-node`: applies to all the rendered nodes inside the SVG
94+
element.
95+
- `beautiful-tree-root`: applies only to the rendered _root_ node.
96+
- `beautiful-tree-leaf`: applies to all the rendered _leaf_ nodes inside the SVG
97+
element.
98+
- `beautiful-tree-node-content`: applies to all the `<div>` elements rendered
99+
inside nodes when using the [`getNodeContent`](#getnodecontent) prop.
100+
101+
## Other component props
102+
103+
We won't go into very deep details because TypeScript's autocomplete is enough
104+
to discover the aspects not mentioned here.
105+
106+
### `nodeShape`
107+
108+
Accepted values are `'circle'` and `'rect'`. It specifies which shape is used
109+
to render the tree nodes.
110+
111+
### `getNodeShape`
112+
113+
In case we want the shape of each node to depend on their associated metadata,
114+
we can pass a function that returns the desired shape for each individual node.
115+
116+
### `getNodeContent`
117+
118+
We can pass a function to read what's inside the `data` property of each node
119+
and return either a `string` value or a `JSX.Element` object that will be
120+
rendered inside the corresponding node.
121+
122+
### `computeLayout`
123+
124+
It specifies the function that is used to compute the tree layout.
125+
- By default it uses `computeSmartLayout`.
126+
- But we can also import a simpler layout `computeNaiveLayout`.
127+
128+
### `getNodeClass`
129+
130+
We can pass a function that takes each node object and returns a list of CSS
131+
classes that will be applied to it. This is useful if we want to make node
132+
styles depend on their associated data.
133+
134+
### `getEdgeClass`
135+
136+
We can pass a function that takes edge metadata as input and returns a list of
137+
CSS classes that will be applied to it. This is useful if we want to make edge
138+
styles depend on their associated data.
139+
140+
### `hCoef`
141+
142+
This parameter, mostly useful for the case when node's shape is `'rect'`, allows
143+
us to control the ratio aspect between height and width of a node. It must be
144+
between `0` and `1`, ideally above `0.5`.
145+
146+
## Future Plans
147+
148+
- Introduce a layout algorithm for dendrograms (with leafs all at the bottom
149+
level, instead of being at the level inmediately below their parents).
150+
- Introduce rotated versions of the tree layout (left-to-right, right-to-left,
151+
bottom-up)
152+
- Allow to use different edge "styles" between nodes (now it's just straight
153+
lines): splines, segmented lines with corners...
154+
- Release versions of this same library for other components systems, such as
155+
Vue, Svelte, Solidjs, and native Web Components.

0 commit comments

Comments
 (0)