build: kickstart monorepo structure

Signed-off-by: Andres Correa Casablanca <[email protected]>

.github/workflows/tests.yml → .github/workflows/tests-react-svg.yml

@@ -1,4 +1,4 @@
-name: Tests
+name: Tests (React SVG)
 
 on:
   push:
@@ -34,13 +34,11 @@ jobs:
         node-version: ${{ matrix.node-version }}
         cache: 'pnpm'
     - name: Install dependencies
-      run: pnpm install
+      run: pnpm --filter react install
     - name: Run Linters
       if: ${{ matrix.os == 'ubuntu-22.04' }}
-      run: pnpm lint
+      run: pnpm --filter react run lint
     - name: Build Library
-      run: pnpm build
+      run: pnpm --filter react run build
     - name: Run Tests
-      run: pnpm test:coverage
-    - name: Publint
-      run: pnpm publint --strict
+      run: pnpm --filter react run test:coverage

.hooks/pre-commit

@@ -3,5 +3,4 @@
 set -eu
 set -o pipefail
 
-pnpm run lint
-pnpm publint
+pnpm run -r lint

.hooks/pre-push

@@ -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

@beautiful-tree/react/README.md

@@ -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.

@beautiful-tree/react/package.json

@@ -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"
+  }
+}