@ts-graphviz/react 0.0.0-next-20240317150638

package/CHANGELOG.md

@@ -0,0 +1,76 @@
+# @ts-graphviz/react
+
+## 0.0.0-next-20240317150638
+
+### Minor Changes
+
+- [#992](https://github.com/ts-graphviz/ts-graphviz/pull/992) [`391e98e`](https://github.com/ts-graphviz/ts-graphviz/commit/391e98edf70bb43c1feb4a00f832fa9d96dd9d39) Thanks [@kamiazya](https://github.com/kamiazya)! - ## `@ts-graphviz/react` integrate with ts-graphviz monorepo
+
+  ### Overview
+
+  - Imported source code from `@ts-graphviz/react` repository and integrated it into the monorepo.
+  - Emphasized code quality through component tests and updated function signatures.
+    - Renamed functions and types for readability and consistency throughout the ts-graphviz project.
+
+  ### Dependencies
+
+  - Support React 18 and remove `prop-types` as a dependency.
+    - `prop-types` is removed because TypeScript can cover the same functionality.
+  - Moved `react-dom` to `peerDependencies` for streamlined dependency management.
+    - Improved file naming conventions for better codebase organization.
+
+  ### New Features
+
+  #### New HTMLLike label syntax
+
+  ```tsx
+  import { Digraph, Node, Edge, render } from "@ts-graphviz/react";
+
+  const dot = render(
+    <Digraph>
+      <Node
+        id="A"
+        label={
+          <dot:table>
+            <dot:tr>
+              <dot:td>left</dot:td>
+              <dot:td>right</dot:td>
+            </dot:tr>
+          </dot:table>
+        }
+      />
+    </Digraph>
+  );
+  ```
+
+  #### `renderHTMLLike` function
+
+  The `renderHTMLLike` function is introduced for rendering HTML-like labels.
+
+  ```tsx
+  import { renderHTMLLike } from "@ts-graphviz/react";
+
+  const htmlLike = renderHTMLLike(
+    <dot:table>
+      <dot:tr>
+        <dot:td>left</dot:td>
+        <dot:td>right</dot:td>
+      </dot:tr>
+    </dot:table>
+  );
+  ```
+
+  ### Other Changes
+
+  - Added the `provenance` flag in `package.json` for enhanced publishing traceability.
+  - Enhanced TypeScript support and type definitions, including moving types to `@ts-graphviz/common`.
+
+    - Move HTMLLike type to `@ts-graphviz/common`.
+
+  - Refactor JSX syntax for better compatibility and custom JSX-like syntax for HTMLLike.
+
+### Patch Changes
+
+- Updated dependencies [[`cb5517a`](https://github.com/ts-graphviz/ts-graphviz/commit/cb5517a0236ce33527d200df9770390f4eb40064), [`0589b4f`](https://github.com/ts-graphviz/ts-graphviz/commit/0589b4f8849290d2c4a39beceb9b633f059f2e3f), [`5ce6b59`](https://github.com/ts-graphviz/ts-graphviz/commit/5ce6b59fa395bc344de2bfb15061b158a9ea5586), [`122336b`](https://github.com/ts-graphviz/ts-graphviz/commit/122336bede1033f73a2a94c82d499fda238f6b2e), [`b5f36fa`](https://github.com/ts-graphviz/ts-graphviz/commit/b5f36faf9cf70dfc263130c4480dc21770475c5a), [`c55f2d0`](https://github.com/ts-graphviz/ts-graphviz/commit/c55f2d0dfa851d318cc16a36499c69c0a34f1588), [`81a50ff`](https://github.com/ts-graphviz/ts-graphviz/commit/81a50ff94b461f44256f2eea5b86af5eb26afd94), [`a16f047`](https://github.com/ts-graphviz/ts-graphviz/commit/a16f047dfdd5db73f3e25847cf3fb2f8075aaf11), [`391e98e`](https://github.com/ts-graphviz/ts-graphviz/commit/391e98edf70bb43c1feb4a00f832fa9d96dd9d39), [`a16f047`](https://github.com/ts-graphviz/ts-graphviz/commit/a16f047dfdd5db73f3e25847cf3fb2f8075aaf11), [`a16f047`](https://github.com/ts-graphviz/ts-graphviz/commit/a16f047dfdd5db73f3e25847cf3fb2f8075aaf11)]:
+  - ts-graphviz@0.0.0-next-20240317150638
+  - @ts-graphviz/common@0.0.0-next-20240317150638

package/LICENSE

@@ -0,0 +1,22 @@
+
+The MIT License (MIT)
+
+Copyright (c) 2019-2024 Yuki Yamazaki
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,104 @@
+# @ts-graphviz/react
+
+> It is part of the ts-graphviz library, which is split into modular packages to improve maintainability, flexibility, and ease of use.
+
+Graphviz-dot Renderer using React.
+
+## Installation
+
+The module can then be installed using [npm](https://www.npmjs.com/):
+
+[![NPM](https://nodei.co/npm/@ts-graphviz/react.png)](https://nodei.co/npm/@ts-graphviz/react/)
+
+```bash
+# yarn
+$ yarn add @ts-graphviz/react react react-dom
+# or npm
+$ npm install -S @ts-graphviz/react react react-dom
+```
+
+> Install [React and React DOM](https://github.com/facebook/react/) as peerDependencies at the same time.
+
+## Example
+
+```jsx
+import { Digraph, Node, Subgraph, Edge, renderToDot } from '@ts-graphviz/react';
+
+const Example = () => (
+  <Digraph
+    rankdir="TB"
+    edge={{
+      color: 'blue',
+      fontcolor: 'blue',
+    }}
+    node={{
+      shape: 'none',
+    }}
+  >
+    <Node
+      id="nodeA"
+      shape="none"
+      label={
+        <dot:table border="0" cellborder="1" cellspacing="0">
+          <dot:tr>
+            <dot:td>left</dot:td>
+            <dot:td port="m">middle</dot:td>
+            <dot:td port="r">right</dot:td>
+          </dot:tr>
+        </dot:table>
+      }
+    />
+
+    <Subgraph id="cluster" label="Cluster" labeljust="l">
+      <Node id="nodeB" label="This is label for nodeB." />
+    </Subgraph>
+    <Edge targets={['nodeB', 'nodeA:m']} comment="Edge from node A to B" label={<dot:b>A to B</dot:b>} />
+  </Digraph>
+);
+
+const dot = renderToDot(<Example />);
+
+console.log(dot);
+```
+
+### Output dot
+
+```dot
+digraph {
+  rankdir = "TB";
+  edge [
+    color = "blue";
+    fontcolor = "blue";
+  ];
+  node [
+    shape = "none";
+  ];
+  "nodeA" [
+    shape = "none";
+    label = <<table border="0" cellborder="1" cellSpacing="0"><tr><td>left</td><td port="m">middle</td><td port="r">right</td></tr></table>>;
+  ];
+  subgraph "cluster" {
+    labeljust = "l";
+    label = "Cluster";
+    "nodeB" [
+      label = "This is label for nodeB.";
+    ];
+  }
+  // Edge from node A to B
+  "nodeB" -> "nodeA":"m" [
+    label = <<b>A to B</b>>;
+  ];
+}
+```
+
+![dot](./example/example.svg)
+
+## Contributing
+
+Contributions to the ts-graphviz project are welcome.
+
+Please refer to the main ts-graphviz repository for guidelines on how to contribute.
+
+## License
+
+This software is released under the MIT License.

package/example/example.svg

@@ -0,0 +1,40 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+ "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<!-- Generated by graphviz version 2.42.3 (20191010.1750)
+ -->
+<!-- Title: %3 Pages: 1 -->
+<svg width="188pt" height="168pt"
+ viewBox="0.00 0.00 188.00 168.00" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<g id="graph0" class="graph" transform="scale(1 1) rotate(0) translate(4 164)">
+<title>%3</title>
+<polygon fill="white" stroke="transparent" points="-4,4 -4,-164 184,-164 184,4 -4,4"/>
+<g id="clust1" class="cluster">
+<title>cluster</title>
+<polygon fill="none" stroke="black" points="8,-78 8,-152 172,-152 172,-78 8,-78"/>
+<text text-anchor="middle" x="36.22" y="-136.8" font-family="Times,serif" font-size="14.00">Cluster</text>
+</g>
+<!-- nodeA -->
+<g id="node1" class="node">
+<title>nodeA</title>
+<polygon fill="none" stroke="black" points="44,-8 44,-28 68,-28 68,-8 44,-8"/>
+<text text-anchor="start" x="46.67" y="-13.8" font-family="Times,serif" font-size="14.00">left</text>
+<polygon fill="none" stroke="black" points="68,-8 68,-28 112,-28 112,-8 68,-8"/>
+<text text-anchor="start" x="70.56" y="-13.8" font-family="Times,serif" font-size="14.00">middle</text>
+<polygon fill="none" stroke="black" points="112,-8 112,-28 144,-28 144,-8 112,-8"/>
+<text text-anchor="start" x="114.78" y="-13.8" font-family="Times,serif" font-size="14.00">right</text>
+</g>
+<!-- nodeB -->
+<g id="node2" class="node">
+<title>nodeB</title>
+<text text-anchor="middle" x="90" y="-99.8" font-family="Times,serif" font-size="14.00">This is label for nodeB.</text>
+</g>
+<!-- nodeB&#45;&gt;nodeA -->
+<g id="edge1" class="edge">
+<title>nodeB&#45;&gt;nodeA:m</title>
+<path fill="none" stroke="blue" d="M90,-85.95C90,-73.53 90,-56.02 90,-39.27"/>
+<polygon fill="blue" stroke="blue" points="93.5,-39 90,-29 86.5,-39 93.5,-39"/>
+<text text-anchor="start" x="90" y="-57.8" font-family="Times,serif" font-weight="bold" font-size="14.00" fill="blue">A to B</text>
+</g>
+</g>
+</svg>

package/example/example.tsx

@@ -0,0 +1,41 @@
+import { Digraph, Edge, Node, Subgraph, renderToDot } from '@ts-graphviz/react';
+
+const Example = () => (
+  <Digraph
+    rankdir="TB"
+    edge={{
+      color: 'blue',
+      fontcolor: 'blue',
+    }}
+    node={{
+      shape: 'none',
+    }}
+  >
+    <Node
+      id="nodeA"
+      shape="none"
+      label={
+        <dot:table border={0} cellborder={1} cellSpacing={0}>
+          <dot:tr>
+            <dot:td>left</dot:td>
+            <dot:td port="m">middle</dot:td>
+            <dot:td port="r">right</dot:td>
+          </dot:tr>
+        </dot:table>
+      }
+    />
+
+    <Subgraph id="cluster" label="Cluster" labeljust="l">
+      <Node id="nodeB" label="This is label for nodeB." />
+    </Subgraph>
+    <Edge
+      targets={['nodeB', 'nodeA:m']}
+      comment="Edge from node A to B"
+      label={<dot:b>A to B</dot:b>}
+    />
+  </Digraph>
+);
+
+const dot = renderToDot(<Example />);
+
+console.log(dot);