@atlaskit/charlie-hierarchy 0.0.0

package/CHANGELOG.md

@@ -0,0 +1 @@
+# @atlaskit/charlie-hierarchy

package/LICENSE.md

@@ -0,0 +1,11 @@
+Copyright 2023 Atlassian Pty Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in
+compliance with the License. You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under the License is
+distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+implied. See the License for the specific language governing permissions and limitations under the
+License.

package/README.md

@@ -0,0 +1,9 @@
+# CharlieHierarchy
+
+Add a description here.
+
+## Usage
+
+`import CharlieHierarchy from '@atlaskit/charlie-hierarchy';`
+
+Detailed docs and example usage can be found [here](https://atlaskit.atlassian.com/packages/technology-innovation/charlie-hierarchy).

package/dist/cjs/charlie-hierarchy/charlie-hierarchy.compiled.css

@@ -0,0 +1,5 @@
+._18m9ewfl{overflow-y:visible}
+._1reoewfl{overflow-x:visible}
+._1tktglyw{touch-action:none}
+._kqswh2mm{position:relative}
+._kqswstnw{position:absolute}

package/dist/cjs/charlie-hierarchy/charlie-hierarchy.js

@@ -0,0 +1,164 @@
+/* charlie-hierarchy.tsx generated by @compiled/babel-plugin v0.36.1 */
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CharlieHierarchy = void 0;
+require("./charlie-hierarchy.compiled.css");
+var _runtime = require("@compiled/react/runtime");
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireDefault(require("react"));
+var _group = require("@visx/group");
+var _hierarchy = require("@visx/hierarchy");
+var _shape = require("@visx/shape");
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } /**
+ * CharlieHierarchy is meant to be a generic reusable component for building SVG rendered trees.
+ * It is a wrapper around the visx Tree component that provides a more declarative API.
+ * https://airbnb.io/visx/docs/hierarchy#Tree
+ * Common use cases can be handled in the CharlieHierarchy component to allow for a quicker entry point to creating trees.
+ */
+var staticStyles = {
+  hierarchyWrapper: "_kqswh2mm",
+  nodeGroupWrapper: "_kqswstnw",
+  nodeWrapper: "_1reoewfl _18m9ewfl _kqswstnw",
+  svg: "_1reoewfl _18m9ewfl _kqswstnw",
+  zoom: "_1tktglyw"
+};
+var CharlieHierarchy = exports.CharlieHierarchy = function CharlieHierarchy(props) {
+  var _props$size$, _props$size, _props$size$2, _props$size2, _props$nodeSize$, _props$nodeSize, _props$nodeSize$2, _props$nodeSize2, _props$top, _props$left, _props$renderDependen, _styles$transformMatr, _props$styles2;
+  var _React$useTransition = _react.default.useTransition(),
+    _React$useTransition2 = (0, _slicedToArray2.default)(_React$useTransition, 2),
+    isSuspending = _React$useTransition2[0],
+    startSuspending = _React$useTransition2[1];
+  var styles = _objectSpread(_objectSpread({}, {
+    padding: {
+      above: 100,
+      adjacent: 30
+    }
+  }), props.styles);
+  var containerHeight = (_props$size$ = (_props$size = props.size) === null || _props$size === void 0 ? void 0 : _props$size[1]) !== null && _props$size$ !== void 0 ? _props$size$ : 0;
+  var containerWidth = (_props$size$2 = (_props$size2 = props.size) === null || _props$size2 === void 0 ? void 0 : _props$size2[0]) !== null && _props$size$2 !== void 0 ? _props$size$2 : 0;
+  var nodeWidth = (_props$nodeSize$ = (_props$nodeSize = props.nodeSize) === null || _props$nodeSize === void 0 ? void 0 : _props$nodeSize[0]) !== null && _props$nodeSize$ !== void 0 ? _props$nodeSize$ : 0;
+  var nodeHeight = (_props$nodeSize$2 = (_props$nodeSize2 = props.nodeSize) === null || _props$nodeSize2 === void 0 ? void 0 : _props$nodeSize2[1]) !== null && _props$nodeSize$2 !== void 0 ? _props$nodeSize$2 : 0;
+  var nodeWidthWithPadding = nodeWidth + styles.padding.adjacent;
+  var nodeHeightWithPadding = nodeHeight + styles.padding.above;
+  var nodeSize = [nodeWidthWithPadding, nodeHeightWithPadding];
+  var root = props.root;
+  var top = (_props$top = props.top) !== null && _props$top !== void 0 ? _props$top : 0;
+  var left = (_props$left = props.left) !== null && _props$left !== void 0 ? _props$left : 0;
+  var zoom = props === null || props === void 0 ? void 0 : props.zoom;
+  var cursor = zoom !== null && zoom !== void 0 && zoom.isDragging ? 'grabbing' : 'grab';
+  var children = props.children;
+  var renderDependencies = (_props$renderDependen = props.renderDependencies) !== null && _props$renderDependen !== void 0 ? _props$renderDependen : [];
+
+  /**
+   * If zoom is enabled, we need to apply the transform matrix to the SVG.
+   * If not, then use the static transform matrix provided in the styles prop.
+   * If no transform matrix is provided, then don't apply any transform.
+   */
+  var transformMatrix = (_styles$transformMatr = styles.transformMatrix) !== null && _styles$transformMatr !== void 0 ? _styles$transformMatr : {
+    scaleX: 1,
+    scaleY: 1,
+    skewX: 0,
+    skewY: 0,
+    translateX: document.body.clientWidth / 2,
+    translateY: 120
+  };
+  var transform = zoom ? zoom === null || zoom === void 0 ? void 0 : zoom.toString() : transformMatrix ? "matrix(".concat(transformMatrix.scaleX, ", ").concat(transformMatrix.skewX, ", ").concat(transformMatrix.skewY, ", ").concat(transformMatrix.scaleY, ", ").concat(transformMatrix.translateX, ", ").concat(transformMatrix.translateY, ")") : undefined;
+  var edges = _react.default.useMemo(function () {
+    return /*#__PURE__*/_react.default.createElement(_hierarchy.Tree, {
+      root: root,
+      top: top,
+      left: left,
+      nodeSize: nodeSize
+    }, function (tree) {
+      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, tree.links().map(function (link, linkIndex) {
+        var _props$styles$lineAtt, _props$styles;
+        return /*#__PURE__*/_react.default.createElement(_shape.LinkVerticalStep, (0, _extends2.default)({
+          key: "link-".concat(linkIndex),
+          data: link,
+          stroke: "var(--ds-border-accent-gray, #758195)",
+          strokeWidth: "1",
+          fill: "none",
+          opacity: 1,
+          percent: 0.5
+        }, (_props$styles$lineAtt = (_props$styles = props.styles) === null || _props$styles === void 0 ? void 0 : _props$styles.lineAttributes) !== null && _props$styles$lineAtt !== void 0 ? _props$styles$lineAtt : {}));
+      }));
+    });
+    // There are cases where the parent component will want to render the tree
+    // depending on certain props. so we need to pass the renderDependencies so the
+    // tree will re-render when the dependencies change.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [].concat((0, _toConsumableArray2.default)(renderDependencies), [(_props$styles2 = props.styles) === null || _props$styles2 === void 0 ? void 0 : _props$styles2.lineAttributes]));
+  var nodes = _react.default.useMemo(function () {
+    return /*#__PURE__*/_react.default.createElement(_hierarchy.Tree, {
+      root: root,
+      top: top,
+      left: left,
+      nodeSize: nodeSize
+    }, function (tree) {
+      var descendants = tree.descendants();
+      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, descendants.map(function (node, index) {
+        var top = node.y - nodeHeight / 2;
+        var left = node.x - nodeWidth / 2;
+        return /*#__PURE__*/_react.default.createElement("div", {
+          key: "tree-node-".concat(index),
+          style: {
+            top: top,
+            left: left,
+            width: "".concat(nodeWidth, "px"),
+            height: "".concat(nodeHeight, "px")
+          },
+          className: (0, _runtime.ax)([staticStyles.nodeWrapper])
+        }, children(node, isSuspending, startSuspending));
+      }));
+    });
+    // There are cases where the parent component will want to render the tree
+    // depending on certain props. so we need to pass the renderDependencies so the
+    // tree will re-render when the dependencies change.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [].concat((0, _toConsumableArray2.default)(renderDependencies), [nodeHeight, isSuspending, nodeWidth, children]));
+  return /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      height: "".concat(containerHeight, "px"),
+      width: "".concat(containerWidth, "px")
+    },
+    className: (0, _runtime.ax)([staticStyles.hierarchyWrapper])
+  }, /*#__PURE__*/_react.default.createElement("svg", {
+    width: containerWidth,
+    height: containerHeight,
+    style: {
+      cursor: "".concat(cursor)
+    },
+    ref: zoom ? zoom.containerRef : undefined,
+    className: (0, _runtime.ax)([staticStyles.svg, zoom && ""])
+  }, zoom && /*#__PURE__*/_react.default.createElement("rect", {
+    width: containerWidth,
+    height: containerHeight,
+    fill: "transparent",
+    onTouchStart: zoom.dragStart,
+    onTouchMove: zoom.dragMove,
+    onTouchEnd: zoom.dragEnd,
+    onMouseDown: zoom.dragStart,
+    onMouseMove: zoom.dragMove,
+    onMouseUp: zoom.dragEnd,
+    onMouseLeave: function onMouseLeave() {
+      if (zoom.isDragging) {
+        zoom.dragEnd();
+      }
+    }
+  }), /*#__PURE__*/_react.default.createElement(_group.Group, {
+    transform: transform
+  }, edges)), /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      transform: "".concat(transform)
+    },
+    className: (0, _runtime.ax)([staticStyles.nodeGroupWrapper])
+  }, nodes));
+};

package/dist/cjs/index.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "CharlieHierarchy", {
+  enumerable: true,
+  get: function get() {
+    return _charlieHierarchy.CharlieHierarchy;
+  }
+});
+var _charlieHierarchy = require("./charlie-hierarchy/charlie-hierarchy");

package/dist/es2019/charlie-hierarchy/charlie-hierarchy.compiled.css

@@ -0,0 +1,5 @@
+._18m9ewfl{overflow-y:visible}
+._1reoewfl{overflow-x:visible}
+._1tktglyw{touch-action:none}
+._kqswh2mm{position:relative}
+._kqswstnw{position:absolute}

package/dist/es2019/charlie-hierarchy/charlie-hierarchy.js

@@ -0,0 +1,154 @@
+/* charlie-hierarchy.tsx generated by @compiled/babel-plugin v0.36.1 */
+import _extends from "@babel/runtime/helpers/extends";
+import "./charlie-hierarchy.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+/**
+ * CharlieHierarchy is meant to be a generic reusable component for building SVG rendered trees.
+ * It is a wrapper around the visx Tree component that provides a more declarative API.
+ * https://airbnb.io/visx/docs/hierarchy#Tree
+ * Common use cases can be handled in the CharlieHierarchy component to allow for a quicker entry point to creating trees.
+ */
+
+import React from 'react';
+import { Group } from '@visx/group';
+import { Tree } from '@visx/hierarchy';
+import { LinkVerticalStep } from '@visx/shape';
+const staticStyles = {
+  hierarchyWrapper: "_kqswh2mm",
+  nodeGroupWrapper: "_kqswstnw",
+  nodeWrapper: "_1reoewfl _18m9ewfl _kqswstnw",
+  svg: "_1reoewfl _18m9ewfl _kqswstnw",
+  zoom: "_1tktglyw"
+};
+export const CharlieHierarchy = props => {
+  var _props$size$, _props$size, _props$size$2, _props$size2, _props$nodeSize$, _props$nodeSize, _props$nodeSize$2, _props$nodeSize2, _props$top, _props$left, _props$renderDependen, _styles$transformMatr, _props$styles2;
+  const [isSuspending, startSuspending] = React.useTransition();
+  const styles = {
+    ...{
+      padding: {
+        above: 100,
+        adjacent: 30
+      }
+    },
+    ...props.styles
+  };
+  const containerHeight = (_props$size$ = (_props$size = props.size) === null || _props$size === void 0 ? void 0 : _props$size[1]) !== null && _props$size$ !== void 0 ? _props$size$ : 0;
+  const containerWidth = (_props$size$2 = (_props$size2 = props.size) === null || _props$size2 === void 0 ? void 0 : _props$size2[0]) !== null && _props$size$2 !== void 0 ? _props$size$2 : 0;
+  const nodeWidth = (_props$nodeSize$ = (_props$nodeSize = props.nodeSize) === null || _props$nodeSize === void 0 ? void 0 : _props$nodeSize[0]) !== null && _props$nodeSize$ !== void 0 ? _props$nodeSize$ : 0;
+  const nodeHeight = (_props$nodeSize$2 = (_props$nodeSize2 = props.nodeSize) === null || _props$nodeSize2 === void 0 ? void 0 : _props$nodeSize2[1]) !== null && _props$nodeSize$2 !== void 0 ? _props$nodeSize$2 : 0;
+  const nodeWidthWithPadding = nodeWidth + styles.padding.adjacent;
+  const nodeHeightWithPadding = nodeHeight + styles.padding.above;
+  const nodeSize = [nodeWidthWithPadding, nodeHeightWithPadding];
+  const root = props.root;
+  const top = (_props$top = props.top) !== null && _props$top !== void 0 ? _props$top : 0;
+  const left = (_props$left = props.left) !== null && _props$left !== void 0 ? _props$left : 0;
+  const zoom = props === null || props === void 0 ? void 0 : props.zoom;
+  const cursor = zoom !== null && zoom !== void 0 && zoom.isDragging ? 'grabbing' : 'grab';
+  const children = props.children;
+  const renderDependencies = (_props$renderDependen = props.renderDependencies) !== null && _props$renderDependen !== void 0 ? _props$renderDependen : [];
+
+  /**
+   * If zoom is enabled, we need to apply the transform matrix to the SVG.
+   * If not, then use the static transform matrix provided in the styles prop.
+   * If no transform matrix is provided, then don't apply any transform.
+   */
+  const transformMatrix = (_styles$transformMatr = styles.transformMatrix) !== null && _styles$transformMatr !== void 0 ? _styles$transformMatr : {
+    scaleX: 1,
+    scaleY: 1,
+    skewX: 0,
+    skewY: 0,
+    translateX: document.body.clientWidth / 2,
+    translateY: 120
+  };
+  const transform = zoom ? zoom === null || zoom === void 0 ? void 0 : zoom.toString() : transformMatrix ? `matrix(${transformMatrix.scaleX}, ${transformMatrix.skewX}, ${transformMatrix.skewY}, ${transformMatrix.scaleY}, ${transformMatrix.translateX}, ${transformMatrix.translateY})` : undefined;
+  const edges = React.useMemo(() => {
+    return /*#__PURE__*/React.createElement(Tree, {
+      root: root,
+      top: top,
+      left: left,
+      nodeSize: nodeSize
+    }, tree => {
+      return /*#__PURE__*/React.createElement(React.Fragment, null, tree.links().map((link, linkIndex) => {
+        var _props$styles$lineAtt, _props$styles;
+        return /*#__PURE__*/React.createElement(LinkVerticalStep, _extends({
+          key: `link-${linkIndex}`,
+          data: link,
+          stroke: "var(--ds-border-accent-gray, #758195)",
+          strokeWidth: "1",
+          fill: "none",
+          opacity: 1,
+          percent: 0.5
+        }, (_props$styles$lineAtt = (_props$styles = props.styles) === null || _props$styles === void 0 ? void 0 : _props$styles.lineAttributes) !== null && _props$styles$lineAtt !== void 0 ? _props$styles$lineAtt : {}));
+      }));
+    });
+    // There are cases where the parent component will want to render the tree
+    // depending on certain props. so we need to pass the renderDependencies so the
+    // tree will re-render when the dependencies change.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [...renderDependencies, (_props$styles2 = props.styles) === null || _props$styles2 === void 0 ? void 0 : _props$styles2.lineAttributes]);
+  const nodes = React.useMemo(() => {
+    return /*#__PURE__*/React.createElement(Tree, {
+      root: root,
+      top: top,
+      left: left,
+      nodeSize: nodeSize
+    }, tree => {
+      const descendants = tree.descendants();
+      return /*#__PURE__*/React.createElement(React.Fragment, null, descendants.map((node, index) => {
+        const top = node.y - nodeHeight / 2;
+        const left = node.x - nodeWidth / 2;
+        return /*#__PURE__*/React.createElement("div", {
+          key: `tree-node-${index}`,
+          style: {
+            top: top,
+            left: left,
+            width: `${nodeWidth}px`,
+            height: `${nodeHeight}px`
+          },
+          className: ax([staticStyles.nodeWrapper])
+        }, children(node, isSuspending, startSuspending));
+      }));
+    });
+    // There are cases where the parent component will want to render the tree
+    // depending on certain props. so we need to pass the renderDependencies so the
+    // tree will re-render when the dependencies change.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [...renderDependencies, nodeHeight, isSuspending, nodeWidth, children]);
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      height: `${containerHeight}px`,
+      width: `${containerWidth}px`
+    },
+    className: ax([staticStyles.hierarchyWrapper])
+  }, /*#__PURE__*/React.createElement("svg", {
+    width: containerWidth,
+    height: containerHeight,
+    style: {
+      cursor: `${cursor}`
+    },
+    ref: zoom ? zoom.containerRef : undefined,
+    className: ax([staticStyles.svg, zoom && ""])
+  }, zoom && /*#__PURE__*/React.createElement("rect", {
+    width: containerWidth,
+    height: containerHeight,
+    fill: "transparent",
+    onTouchStart: zoom.dragStart,
+    onTouchMove: zoom.dragMove,
+    onTouchEnd: zoom.dragEnd,
+    onMouseDown: zoom.dragStart,
+    onMouseMove: zoom.dragMove,
+    onMouseUp: zoom.dragEnd,
+    onMouseLeave: () => {
+      if (zoom.isDragging) {
+        zoom.dragEnd();
+      }
+    }
+  }), /*#__PURE__*/React.createElement(Group, {
+    transform: transform
+  }, edges)), /*#__PURE__*/React.createElement("div", {
+    style: {
+      transform: `${transform}`
+    },
+    className: ax([staticStyles.nodeGroupWrapper])
+  }, nodes));
+};

package/dist/es2019/index.js

@@ -0,0 +1 @@
+export { CharlieHierarchy } from './charlie-hierarchy/charlie-hierarchy';

package/dist/esm/charlie-hierarchy/charlie-hierarchy.compiled.css

@@ -0,0 +1,5 @@
+._18m9ewfl{overflow-y:visible}
+._1reoewfl{overflow-x:visible}
+._1tktglyw{touch-action:none}
+._kqswh2mm{position:relative}
+._kqswstnw{position:absolute}

package/dist/esm/charlie-hierarchy/charlie-hierarchy.js

@@ -0,0 +1,159 @@
+/* charlie-hierarchy.tsx generated by @compiled/babel-plugin v0.36.1 */
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import "./charlie-hierarchy.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+/**
+ * CharlieHierarchy is meant to be a generic reusable component for building SVG rendered trees.
+ * It is a wrapper around the visx Tree component that provides a more declarative API.
+ * https://airbnb.io/visx/docs/hierarchy#Tree
+ * Common use cases can be handled in the CharlieHierarchy component to allow for a quicker entry point to creating trees.
+ */
+
+import React from 'react';
+import { Group } from '@visx/group';
+import { Tree } from '@visx/hierarchy';
+import { LinkVerticalStep } from '@visx/shape';
+var staticStyles = {
+  hierarchyWrapper: "_kqswh2mm",
+  nodeGroupWrapper: "_kqswstnw",
+  nodeWrapper: "_1reoewfl _18m9ewfl _kqswstnw",
+  svg: "_1reoewfl _18m9ewfl _kqswstnw",
+  zoom: "_1tktglyw"
+};
+export var CharlieHierarchy = function CharlieHierarchy(props) {
+  var _props$size$, _props$size, _props$size$2, _props$size2, _props$nodeSize$, _props$nodeSize, _props$nodeSize$2, _props$nodeSize2, _props$top, _props$left, _props$renderDependen, _styles$transformMatr, _props$styles2;
+  var _React$useTransition = React.useTransition(),
+    _React$useTransition2 = _slicedToArray(_React$useTransition, 2),
+    isSuspending = _React$useTransition2[0],
+    startSuspending = _React$useTransition2[1];
+  var styles = _objectSpread(_objectSpread({}, {
+    padding: {
+      above: 100,
+      adjacent: 30
+    }
+  }), props.styles);
+  var containerHeight = (_props$size$ = (_props$size = props.size) === null || _props$size === void 0 ? void 0 : _props$size[1]) !== null && _props$size$ !== void 0 ? _props$size$ : 0;
+  var containerWidth = (_props$size$2 = (_props$size2 = props.size) === null || _props$size2 === void 0 ? void 0 : _props$size2[0]) !== null && _props$size$2 !== void 0 ? _props$size$2 : 0;
+  var nodeWidth = (_props$nodeSize$ = (_props$nodeSize = props.nodeSize) === null || _props$nodeSize === void 0 ? void 0 : _props$nodeSize[0]) !== null && _props$nodeSize$ !== void 0 ? _props$nodeSize$ : 0;
+  var nodeHeight = (_props$nodeSize$2 = (_props$nodeSize2 = props.nodeSize) === null || _props$nodeSize2 === void 0 ? void 0 : _props$nodeSize2[1]) !== null && _props$nodeSize$2 !== void 0 ? _props$nodeSize$2 : 0;
+  var nodeWidthWithPadding = nodeWidth + styles.padding.adjacent;
+  var nodeHeightWithPadding = nodeHeight + styles.padding.above;
+  var nodeSize = [nodeWidthWithPadding, nodeHeightWithPadding];
+  var root = props.root;
+  var top = (_props$top = props.top) !== null && _props$top !== void 0 ? _props$top : 0;
+  var left = (_props$left = props.left) !== null && _props$left !== void 0 ? _props$left : 0;
+  var zoom = props === null || props === void 0 ? void 0 : props.zoom;
+  var cursor = zoom !== null && zoom !== void 0 && zoom.isDragging ? 'grabbing' : 'grab';
+  var children = props.children;
+  var renderDependencies = (_props$renderDependen = props.renderDependencies) !== null && _props$renderDependen !== void 0 ? _props$renderDependen : [];
+
+  /**
+   * If zoom is enabled, we need to apply the transform matrix to the SVG.
+   * If not, then use the static transform matrix provided in the styles prop.
+   * If no transform matrix is provided, then don't apply any transform.
+   */
+  var transformMatrix = (_styles$transformMatr = styles.transformMatrix) !== null && _styles$transformMatr !== void 0 ? _styles$transformMatr : {
+    scaleX: 1,
+    scaleY: 1,
+    skewX: 0,
+    skewY: 0,
+    translateX: document.body.clientWidth / 2,
+    translateY: 120
+  };
+  var transform = zoom ? zoom === null || zoom === void 0 ? void 0 : zoom.toString() : transformMatrix ? "matrix(".concat(transformMatrix.scaleX, ", ").concat(transformMatrix.skewX, ", ").concat(transformMatrix.skewY, ", ").concat(transformMatrix.scaleY, ", ").concat(transformMatrix.translateX, ", ").concat(transformMatrix.translateY, ")") : undefined;
+  var edges = React.useMemo(function () {
+    return /*#__PURE__*/React.createElement(Tree, {
+      root: root,
+      top: top,
+      left: left,
+      nodeSize: nodeSize
+    }, function (tree) {
+      return /*#__PURE__*/React.createElement(React.Fragment, null, tree.links().map(function (link, linkIndex) {
+        var _props$styles$lineAtt, _props$styles;
+        return /*#__PURE__*/React.createElement(LinkVerticalStep, _extends({
+          key: "link-".concat(linkIndex),
+          data: link,
+          stroke: "var(--ds-border-accent-gray, #758195)",
+          strokeWidth: "1",
+          fill: "none",
+          opacity: 1,
+          percent: 0.5
+        }, (_props$styles$lineAtt = (_props$styles = props.styles) === null || _props$styles === void 0 ? void 0 : _props$styles.lineAttributes) !== null && _props$styles$lineAtt !== void 0 ? _props$styles$lineAtt : {}));
+      }));
+    });
+    // There are cases where the parent component will want to render the tree
+    // depending on certain props. so we need to pass the renderDependencies so the
+    // tree will re-render when the dependencies change.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [].concat(_toConsumableArray(renderDependencies), [(_props$styles2 = props.styles) === null || _props$styles2 === void 0 ? void 0 : _props$styles2.lineAttributes]));
+  var nodes = React.useMemo(function () {
+    return /*#__PURE__*/React.createElement(Tree, {
+      root: root,
+      top: top,
+      left: left,
+      nodeSize: nodeSize
+    }, function (tree) {
+      var descendants = tree.descendants();
+      return /*#__PURE__*/React.createElement(React.Fragment, null, descendants.map(function (node, index) {
+        var top = node.y - nodeHeight / 2;
+        var left = node.x - nodeWidth / 2;
+        return /*#__PURE__*/React.createElement("div", {
+          key: "tree-node-".concat(index),
+          style: {
+            top: top,
+            left: left,
+            width: "".concat(nodeWidth, "px"),
+            height: "".concat(nodeHeight, "px")
+          },
+          className: ax([staticStyles.nodeWrapper])
+        }, children(node, isSuspending, startSuspending));
+      }));
+    });
+    // There are cases where the parent component will want to render the tree
+    // depending on certain props. so we need to pass the renderDependencies so the
+    // tree will re-render when the dependencies change.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [].concat(_toConsumableArray(renderDependencies), [nodeHeight, isSuspending, nodeWidth, children]));
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      height: "".concat(containerHeight, "px"),
+      width: "".concat(containerWidth, "px")
+    },
+    className: ax([staticStyles.hierarchyWrapper])
+  }, /*#__PURE__*/React.createElement("svg", {
+    width: containerWidth,
+    height: containerHeight,
+    style: {
+      cursor: "".concat(cursor)
+    },
+    ref: zoom ? zoom.containerRef : undefined,
+    className: ax([staticStyles.svg, zoom && ""])
+  }, zoom && /*#__PURE__*/React.createElement("rect", {
+    width: containerWidth,
+    height: containerHeight,
+    fill: "transparent",
+    onTouchStart: zoom.dragStart,
+    onTouchMove: zoom.dragMove,
+    onTouchEnd: zoom.dragEnd,
+    onMouseDown: zoom.dragStart,
+    onMouseMove: zoom.dragMove,
+    onMouseUp: zoom.dragEnd,
+    onMouseLeave: function onMouseLeave() {
+      if (zoom.isDragging) {
+        zoom.dragEnd();
+      }
+    }
+  }), /*#__PURE__*/React.createElement(Group, {
+    transform: transform
+  }, edges)), /*#__PURE__*/React.createElement("div", {
+    style: {
+      transform: "".concat(transform)
+    },
+    className: ax([staticStyles.nodeGroupWrapper])
+  }, nodes));
+};

package/dist/esm/index.js

@@ -0,0 +1 @@
+export { CharlieHierarchy } from './charlie-hierarchy/charlie-hierarchy';

package/dist/types/charlie-hierarchy/charlie-hierarchy.d.ts

@@ -0,0 +1,65 @@
+/**
+ * CharlieHierarchy is meant to be a generic reusable component for building SVG rendered trees.
+ * It is a wrapper around the visx Tree component that provides a more declarative API.
+ * https://airbnb.io/visx/docs/hierarchy#Tree
+ * Common use cases can be handled in the CharlieHierarchy component to allow for a quicker entry point to creating trees.
+ */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ * @jsxFrag React.Fragment
+ */
+import React from 'react';
+import { type TreeProps } from '@visx/hierarchy/lib/hierarchies/Tree';
+import { type HierarchyPointNode } from '@visx/hierarchy/lib/types';
+import { type ProvidedZoom, type TransformMatrix } from '@visx/zoom/lib/types';
+export interface CharlieHierarchyProps<Datum> extends Omit<TreeProps<Datum>, 'children'> {
+    /**
+     * Children gets called for each node when the tree is being generated.
+     * This is where you can render your custom node components.
+     */
+    children: (node: HierarchyPointNode<Datum>, isSuspending: boolean, startSuspending: React.TransitionStartFunction) => React.ReactNode;
+    /**
+     * zoom controller that is passed to the space tree component to enable zooming and panning functionality.
+     * https://github.com/airbnb/visx/blob/master/packages/visx-zoom/src/types.ts#L49
+     *
+     * This can be passed to the space tree from the parent zoom component.
+     * https://airbnb.io/visx/zoom-i
+     *
+     * <Zoom<SVGSVGElement>
+     *  {(zoom) => (
+     *   <CharlieHierarchy zoom={zoom} ... />
+     *  )}
+     * <Zoom>
+     */
+    zoom?: ProvidedZoom<SVGSVGElement> & {
+        initialTransformMatrix: TransformMatrix;
+        transformMatrix: TransformMatrix;
+        isDragging: boolean;
+    };
+    styles?: {
+        padding?: {
+            above: number;
+            adjacent: number;
+        };
+        lineAttributes?: Omit<React.SVGAttributes<unknown>, 'className' | 'innerRef' | 'data' | 'path' | 'percent' | 'x' | 'y' | 'source' | 'target' | 'children'>;
+        /**
+         * A transform matrix that can be applied to the tree.
+         * If you are using zoom, this will be overridden by the zoom transform matrix.
+         */
+        transformMatrix?: {
+            scaleX: number;
+            scaleY: number;
+            skewX: number;
+            skewY: number;
+            translateX: number;
+            translateY: number;
+        };
+    };
+    /**
+     * Rendering the tree can be expensive, so we provide a way to pass in dependencies to the render function.
+     * Pass any dependencies that on change should trigger a re-render of the tree.
+     */
+    renderDependencies?: React.DependencyList;
+}
+export declare const CharlieHierarchy: <Datum>(props: CharlieHierarchyProps<Datum>) => JSX.Element;

package/dist/types/index.d.ts

@@ -0,0 +1 @@
+export { CharlieHierarchy, type CharlieHierarchyProps } from './charlie-hierarchy/charlie-hierarchy';

package/dist/types-ts4.5/charlie-hierarchy/charlie-hierarchy.d.ts

@@ -0,0 +1,65 @@
+/**
+ * CharlieHierarchy is meant to be a generic reusable component for building SVG rendered trees.
+ * It is a wrapper around the visx Tree component that provides a more declarative API.
+ * https://airbnb.io/visx/docs/hierarchy#Tree
+ * Common use cases can be handled in the CharlieHierarchy component to allow for a quicker entry point to creating trees.
+ */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ * @jsxFrag React.Fragment
+ */
+import React from 'react';
+import { type TreeProps } from '@visx/hierarchy/lib/hierarchies/Tree';
+import { type HierarchyPointNode } from '@visx/hierarchy/lib/types';
+import { type ProvidedZoom, type TransformMatrix } from '@visx/zoom/lib/types';
+export interface CharlieHierarchyProps<Datum> extends Omit<TreeProps<Datum>, 'children'> {
+    /**
+     * Children gets called for each node when the tree is being generated.
+     * This is where you can render your custom node components.
+     */
+    children: (node: HierarchyPointNode<Datum>, isSuspending: boolean, startSuspending: React.TransitionStartFunction) => React.ReactNode;
+    /**
+     * zoom controller that is passed to the space tree component to enable zooming and panning functionality.
+     * https://github.com/airbnb/visx/blob/master/packages/visx-zoom/src/types.ts#L49
+     *
+     * This can be passed to the space tree from the parent zoom component.
+     * https://airbnb.io/visx/zoom-i
+     *
+     * <Zoom<SVGSVGElement>
+     *  {(zoom) => (
+     *   <CharlieHierarchy zoom={zoom} ... />
+     *  )}
+     * <Zoom>
+     */
+    zoom?: ProvidedZoom<SVGSVGElement> & {
+        initialTransformMatrix: TransformMatrix;
+        transformMatrix: TransformMatrix;
+        isDragging: boolean;
+    };
+    styles?: {
+        padding?: {
+            above: number;
+            adjacent: number;
+        };
+        lineAttributes?: Omit<React.SVGAttributes<unknown>, 'className' | 'innerRef' | 'data' | 'path' | 'percent' | 'x' | 'y' | 'source' | 'target' | 'children'>;
+        /**
+         * A transform matrix that can be applied to the tree.
+         * If you are using zoom, this will be overridden by the zoom transform matrix.
+         */
+        transformMatrix?: {
+            scaleX: number;
+            scaleY: number;
+            skewX: number;
+            skewY: number;
+            translateX: number;
+            translateY: number;
+        };
+    };
+    /**
+     * Rendering the tree can be expensive, so we provide a way to pass in dependencies to the render function.
+     * Pass any dependencies that on change should trigger a re-render of the tree.
+     */
+    renderDependencies?: React.DependencyList;
+}
+export declare const CharlieHierarchy: <Datum>(props: CharlieHierarchyProps<Datum>) => JSX.Element;

package/dist/types-ts4.5/index.d.ts

@@ -0,0 +1 @@
+export { CharlieHierarchy, type CharlieHierarchyProps } from './charlie-hierarchy/charlie-hierarchy';

package/package.json

@@ -0,0 +1,104 @@
+{
+	"atlassian": {
+		"team": "Technology Innovation",
+		"runReact18": true,
+		"website": {
+			"name": "CharlieHierarchy",
+			"category": "Layout and structure"
+		}
+	},
+	"repository": "https://stash.atlassian.com/projects/ATLASSIAN/repos/atlassian-frontend-monorepo",
+	"main": "dist/cjs/index.js",
+	"module": "dist/esm/index.js",
+	"module:es2019": "dist/es2019/index.js",
+	"types": "dist/types/index.d.ts",
+	"typesVersions": {
+		">=4.5 <5.4": {
+			"*": [
+				"dist/types-ts4.5/*",
+				"dist/types-ts4.5/index.d.ts"
+			]
+		}
+	},
+	"sideEffects": [
+		"*.compiled.css"
+	],
+	"atlaskit:src": "src/index.ts",
+	"af:exports": {
+		".": "./src/index.ts"
+	},
+	"dependencies": {
+		"@atlaskit/css": "^0.10.0",
+		"@atlaskit/primitives": "^14.8.0",
+		"@atlaskit/tokens": "^4.9.0",
+		"@babel/runtime": "^7.0.0",
+		"@compiled/react": "^0.18.3",
+		"@visx/group": "^1.7.0",
+		"@visx/hierarchy": "^1.7.0",
+		"@visx/shape": "^1.7.0",
+		"@visx/zoom": "^2.10.0"
+	},
+	"peerDependencies": {
+		"react": "^18.2.0"
+	},
+	"devDependencies": {
+		"@af/integration-testing": "workspace:^",
+		"@af/visual-regression": "workspace:^",
+		"@atlaskit/ssr": "workspace:^",
+		"@atlaskit/visual-regression": "workspace:^",
+		"@testing-library/react": "^13.4.0",
+		"react-dom": "^18.2.0",
+		"typescript": "~5.4.2"
+	},
+	"techstack": {
+		"@atlassian/frontend": {
+			"code-structure": [
+				"tangerine-next"
+			],
+			"import-structure": [
+				"atlassian-conventions"
+			],
+			"circular-dependencies": [
+				"file-and-folder-level"
+			]
+		},
+		"@repo/internal": {
+			"dom-events": "use-bind-event-listener",
+			"analytics": [
+				"analytics-next"
+			],
+			"design-tokens": [
+				"color"
+			],
+			"theming": [
+				"react-context"
+			],
+			"ui-components": [
+				"lite-mode"
+			],
+			"deprecation": [
+				"no-deprecated-imports"
+			],
+			"styling": [
+				"static",
+				"compiled"
+			],
+			"imports": [
+				"import-no-extraneous-disable-for-examples-and-docs"
+			]
+		}
+	},
+	"techstackIgnore": {
+		"stricter": [
+			"@atlassian/tangerine/project-structure"
+		]
+	},
+	"name": "@atlaskit/charlie-hierarchy",
+	"version": "0.0.0",
+	"description": "Add a description here.",
+	"author": "Atlassian Pty Ltd",
+	"license": "Apache-2.0",
+	"publishConfig": {
+		"registry": "https://registry.npmjs.org/"
+	}
+}