@atlaskit/charlie-hierarchy 0.0.6 → 0.0.7

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/charlie-hierarchy
 
+## 0.0.7
+
+### Patch Changes
+
+- [#198800](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/198800)
+  [`060485e2f0561`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/060485e2f0561) -
+  Added use-hierarchy hook for interacting with the hierarchy data
+
 ## 0.0.6
 
 ### Patch Changes

package/dist/cjs/hooks/use-hierarchy.js

@@ -0,0 +1,164 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useHierarchyData = exports.HierarchyContainer = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _reactSweetState = require("react-sweet-state");
+var HierarchyContainer = exports.HierarchyContainer = (0, _reactSweetState.createContainer)();
+
+/**
+ * useHierarchyData manages your hierarchal data leveraging
+ * the `@visx/hierarchy` library (wrapper for d3).
+ */
+var useHierarchyData = exports.useHierarchyData = function useHierarchyData(_ref) {
+  var childrenAccessor = _ref.childrenAccessor,
+    updateChildren = _ref.updateChildren,
+    identifierAccessor = _ref.identifierAccessor,
+    parentIdentifierAccessor = _ref.parentIdentifierAccessor;
+  var initialState = {
+    rootNode: null,
+    addedNodeIdentifiers: new Set(),
+    childrenAccessor: childrenAccessor,
+    identifierAccessor: identifierAccessor,
+    parentIdentifierAccessor: parentIdentifierAccessor,
+    updateChildren: updateChildren
+  };
+  var actions = {
+    resetRootNode: function resetRootNode(root) {
+      return function (_ref2) {
+        var setState = _ref2.setState,
+          getState = _ref2.getState;
+        setState({
+          rootNode: root,
+          addedNodeIdentifiers: new Set([getState().identifierAccessor(root)])
+        });
+      };
+    },
+    /** for useHierarchyData, when you add a node it must either be:
+     * - the new root
+     * - parent of the existing root
+     * - descendent of the existing root
+     */
+    addNode: function addNode(node) {
+      return function (_ref3) {
+        var setState = _ref3.setState,
+          getState = _ref3.getState;
+        var childrenAccessor = getState().childrenAccessor;
+        var identifierAccessor = getState().identifierAccessor;
+        var parentIdentifierAccessor = getState().parentIdentifierAccessor;
+        var currentIdentifiers = getState().addedNodeIdentifiers;
+        // it's already been added, skip!
+        if (currentIdentifiers.has(identifierAccessor(node))) {
+          return;
+        }
+        var rootNode = getState().rootNode;
+
+        // if there is no root, the node becomes the root!
+        if (rootNode == null) {
+          setState({
+            rootNode: node,
+            addedNodeIdentifiers: new Set([identifierAccessor(node)])
+          });
+          return;
+        }
+        var nodeId = identifierAccessor(node);
+        var rootId = identifierAccessor(rootNode);
+
+        // if the node is the parent of the root, then it becomes the new root
+        var nodeChildren = childrenAccessor(node);
+        var foundChild = false;
+        var updatedChildren = (nodeChildren !== null && nodeChildren !== void 0 ? nodeChildren : []).map(function (child) {
+          if (identifierAccessor(child) === rootId) {
+            foundChild = true;
+            return rootNode;
+          } else {
+            return child;
+          }
+        });
+        if (foundChild) {
+          setState({
+            rootNode: updateChildren(node, updatedChildren),
+            addedNodeIdentifiers: new Set(currentIdentifiers).add(nodeId)
+          });
+          return;
+        }
+        var tempRoot = rootNode;
+        var searchingThroughChildren = true;
+        var accessedNodes = [];
+        var visitedNodes = [];
+        var _loop = function _loop() {
+            visitedNodes.push(tempRoot);
+            var children = childrenAccessor(tempRoot);
+            if (children) {
+              accessedNodes = [].concat((0, _toConsumableArray2.default)(accessedNodes), (0, _toConsumableArray2.default)(children));
+            }
+            var foundInTree = false;
+            var updatedRootDesc = (children !== null && children !== void 0 ? children : []).map(function (child) {
+              if (nodeId === identifierAccessor(child)) {
+                foundInTree = true;
+                return node;
+              } else {
+                return child;
+              }
+            }).filter(Boolean);
+            if (foundInTree) {
+              // Work our way up the tree to update the parent nodes
+              var currentRootNode = updateChildren(tempRoot, updatedRootDesc);
+              while (identifierAccessor(currentRootNode) !== rootId) {
+                // Find the parent node from our visited nodes
+                var parentNode = visitedNodes.find(function (visitedNode) {
+                  return identifierAccessor(visitedNode) === parentIdentifierAccessor(currentRootNode);
+                });
+
+                // No parent found, we must be the root
+                if (!parentNode) {
+                  break;
+                }
+
+                // Get a new version of the children where you replace the old node with the new one
+                var currentRootChildrenNodes = childrenAccessor(parentNode);
+                var currentDescendingChildren = (currentRootChildrenNodes !== null && currentRootChildrenNodes !== void 0 ? currentRootChildrenNodes : []).map(function (child) {
+                  if (identifierAccessor(currentRootNode) === identifierAccessor(child)) {
+                    foundInTree = true;
+                    return currentRootNode;
+                  } else {
+                    return child;
+                  }
+                }).filter(Boolean);
+
+                // Set the new parent node
+                currentRootNode = updateChildren(parentNode, currentDescendingChildren);
+              }
+              setState({
+                rootNode: currentRootNode,
+                addedNodeIdentifiers: new Set(currentIdentifiers).add(nodeId)
+              });
+              return {
+                v: void 0
+              };
+            }
+            if (accessedNodes.length === 0) {
+              searchingThroughChildren = false;
+            } else {
+              tempRoot = accessedNodes.shift();
+            }
+          },
+          _ret;
+        while (searchingThroughChildren && tempRoot != null) {
+          _ret = _loop();
+          if (_ret) return _ret.v;
+        }
+      };
+    }
+  };
+  var Store = (0, _reactSweetState.createStore)({
+    containedBy: HierarchyContainer,
+    initialState: initialState,
+    actions: actions,
+    name: 'HierarchyDataStore'
+  });
+  return (0, _reactSweetState.createHook)(Store)();
+};

package/dist/es2019/hooks/use-hierarchy.js

@@ -0,0 +1,148 @@
+import { createContainer, createHook, createStore } from 'react-sweet-state';
+export const HierarchyContainer = createContainer();
+
+/**
+ * useHierarchyData manages your hierarchal data leveraging
+ * the `@visx/hierarchy` library (wrapper for d3).
+ */
+export const useHierarchyData = ({
+  childrenAccessor,
+  updateChildren,
+  identifierAccessor,
+  parentIdentifierAccessor
+}) => {
+  const initialState = {
+    rootNode: null,
+    addedNodeIdentifiers: new Set(),
+    childrenAccessor,
+    identifierAccessor,
+    parentIdentifierAccessor,
+    updateChildren
+  };
+  const actions = {
+    resetRootNode: root => ({
+      setState,
+      getState
+    }) => {
+      setState({
+        rootNode: root,
+        addedNodeIdentifiers: new Set([getState().identifierAccessor(root)])
+      });
+    },
+    /** for useHierarchyData, when you add a node it must either be:
+     * - the new root
+     * - parent of the existing root
+     * - descendent of the existing root
+     */
+    addNode: node => ({
+      setState,
+      getState
+    }) => {
+      const childrenAccessor = getState().childrenAccessor;
+      const identifierAccessor = getState().identifierAccessor;
+      const parentIdentifierAccessor = getState().parentIdentifierAccessor;
+      const currentIdentifiers = getState().addedNodeIdentifiers;
+      // it's already been added, skip!
+      if (currentIdentifiers.has(identifierAccessor(node))) {
+        return;
+      }
+      const rootNode = getState().rootNode;
+
+      // if there is no root, the node becomes the root!
+      if (rootNode == null) {
+        setState({
+          rootNode: node,
+          addedNodeIdentifiers: new Set([identifierAccessor(node)])
+        });
+        return;
+      }
+      const nodeId = identifierAccessor(node);
+      const rootId = identifierAccessor(rootNode);
+
+      // if the node is the parent of the root, then it becomes the new root
+      const nodeChildren = childrenAccessor(node);
+      let foundChild = false;
+      const updatedChildren = (nodeChildren !== null && nodeChildren !== void 0 ? nodeChildren : []).map(child => {
+        if (identifierAccessor(child) === rootId) {
+          foundChild = true;
+          return rootNode;
+        } else {
+          return child;
+        }
+      });
+      if (foundChild) {
+        setState({
+          rootNode: updateChildren(node, updatedChildren),
+          addedNodeIdentifiers: new Set(currentIdentifiers).add(nodeId)
+        });
+        return;
+      }
+      let tempRoot = rootNode;
+      let searchingThroughChildren = true;
+      let accessedNodes = [];
+      const visitedNodes = [];
+      while (searchingThroughChildren && tempRoot != null) {
+        visitedNodes.push(tempRoot);
+        const children = childrenAccessor(tempRoot);
+        if (children) {
+          accessedNodes = [...accessedNodes, ...children];
+        }
+        let foundInTree = false;
+        const updatedRootDesc = (children !== null && children !== void 0 ? children : []).map(child => {
+          if (nodeId === identifierAccessor(child)) {
+            foundInTree = true;
+            return node;
+          } else {
+            return child;
+          }
+        }).filter(Boolean);
+        if (foundInTree) {
+          // Work our way up the tree to update the parent nodes
+          let currentRootNode = updateChildren(tempRoot, updatedRootDesc);
+          while (identifierAccessor(currentRootNode) !== rootId) {
+            // Find the parent node from our visited nodes
+            const parentNode = visitedNodes.find(visitedNode => {
+              return identifierAccessor(visitedNode) === parentIdentifierAccessor(currentRootNode);
+            });
+
+            // No parent found, we must be the root
+            if (!parentNode) {
+              break;
+            }
+
+            // Get a new version of the children where you replace the old node with the new one
+            const currentRootChildrenNodes = childrenAccessor(parentNode);
+            const currentDescendingChildren = (currentRootChildrenNodes !== null && currentRootChildrenNodes !== void 0 ? currentRootChildrenNodes : []).map(child => {
+              if (identifierAccessor(currentRootNode) === identifierAccessor(child)) {
+                foundInTree = true;
+                return currentRootNode;
+              } else {
+                return child;
+              }
+            }).filter(Boolean);
+
+            // Set the new parent node
+            currentRootNode = updateChildren(parentNode, currentDescendingChildren);
+          }
+          setState({
+            rootNode: currentRootNode,
+            addedNodeIdentifiers: new Set(currentIdentifiers).add(nodeId)
+          });
+          return;
+        }
+        if (accessedNodes.length === 0) {
+          searchingThroughChildren = false;
+        } else {
+          tempRoot = accessedNodes.shift();
+        }
+      }
+    }
+  };
+  const Store = createStore({
+    containedBy: HierarchyContainer,
+    initialState,
+    actions: actions,
+    name: 'HierarchyDataStore'
+  });
+  return createHook(Store)();
+};

package/dist/esm/hooks/use-hierarchy.js

@@ -0,0 +1,157 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import { createContainer, createHook, createStore } from 'react-sweet-state';
+export var HierarchyContainer = createContainer();
+
+/**
+ * useHierarchyData manages your hierarchal data leveraging
+ * the `@visx/hierarchy` library (wrapper for d3).
+ */
+export var useHierarchyData = function useHierarchyData(_ref) {
+  var childrenAccessor = _ref.childrenAccessor,
+    updateChildren = _ref.updateChildren,
+    identifierAccessor = _ref.identifierAccessor,
+    parentIdentifierAccessor = _ref.parentIdentifierAccessor;
+  var initialState = {
+    rootNode: null,
+    addedNodeIdentifiers: new Set(),
+    childrenAccessor: childrenAccessor,
+    identifierAccessor: identifierAccessor,
+    parentIdentifierAccessor: parentIdentifierAccessor,
+    updateChildren: updateChildren
+  };
+  var actions = {
+    resetRootNode: function resetRootNode(root) {
+      return function (_ref2) {
+        var setState = _ref2.setState,
+          getState = _ref2.getState;
+        setState({
+          rootNode: root,
+          addedNodeIdentifiers: new Set([getState().identifierAccessor(root)])
+        });
+      };
+    },
+    /** for useHierarchyData, when you add a node it must either be:
+     * - the new root
+     * - parent of the existing root
+     * - descendent of the existing root
+     */
+    addNode: function addNode(node) {
+      return function (_ref3) {
+        var setState = _ref3.setState,
+          getState = _ref3.getState;
+        var childrenAccessor = getState().childrenAccessor;
+        var identifierAccessor = getState().identifierAccessor;
+        var parentIdentifierAccessor = getState().parentIdentifierAccessor;
+        var currentIdentifiers = getState().addedNodeIdentifiers;
+        // it's already been added, skip!
+        if (currentIdentifiers.has(identifierAccessor(node))) {
+          return;
+        }
+        var rootNode = getState().rootNode;
+
+        // if there is no root, the node becomes the root!
+        if (rootNode == null) {
+          setState({
+            rootNode: node,
+            addedNodeIdentifiers: new Set([identifierAccessor(node)])
+          });
+          return;
+        }
+        var nodeId = identifierAccessor(node);
+        var rootId = identifierAccessor(rootNode);
+
+        // if the node is the parent of the root, then it becomes the new root
+        var nodeChildren = childrenAccessor(node);
+        var foundChild = false;
+        var updatedChildren = (nodeChildren !== null && nodeChildren !== void 0 ? nodeChildren : []).map(function (child) {
+          if (identifierAccessor(child) === rootId) {
+            foundChild = true;
+            return rootNode;
+          } else {
+            return child;
+          }
+        });
+        if (foundChild) {
+          setState({
+            rootNode: updateChildren(node, updatedChildren),
+            addedNodeIdentifiers: new Set(currentIdentifiers).add(nodeId)
+          });
+          return;
+        }
+        var tempRoot = rootNode;
+        var searchingThroughChildren = true;
+        var accessedNodes = [];
+        var visitedNodes = [];
+        var _loop = function _loop() {
+            visitedNodes.push(tempRoot);
+            var children = childrenAccessor(tempRoot);
+            if (children) {
+              accessedNodes = [].concat(_toConsumableArray(accessedNodes), _toConsumableArray(children));
+            }
+            var foundInTree = false;
+            var updatedRootDesc = (children !== null && children !== void 0 ? children : []).map(function (child) {
+              if (nodeId === identifierAccessor(child)) {
+                foundInTree = true;
+                return node;
+              } else {
+                return child;
+              }
+            }).filter(Boolean);
+            if (foundInTree) {
+              // Work our way up the tree to update the parent nodes
+              var currentRootNode = updateChildren(tempRoot, updatedRootDesc);
+              while (identifierAccessor(currentRootNode) !== rootId) {
+                // Find the parent node from our visited nodes
+                var parentNode = visitedNodes.find(function (visitedNode) {
+                  return identifierAccessor(visitedNode) === parentIdentifierAccessor(currentRootNode);
+                });
+
+                // No parent found, we must be the root
+                if (!parentNode) {
+                  break;
+                }
+
+                // Get a new version of the children where you replace the old node with the new one
+                var currentRootChildrenNodes = childrenAccessor(parentNode);
+                var currentDescendingChildren = (currentRootChildrenNodes !== null && currentRootChildrenNodes !== void 0 ? currentRootChildrenNodes : []).map(function (child) {
+                  if (identifierAccessor(currentRootNode) === identifierAccessor(child)) {
+                    foundInTree = true;
+                    return currentRootNode;
+                  } else {
+                    return child;
+                  }
+                }).filter(Boolean);
+
+                // Set the new parent node
+                currentRootNode = updateChildren(parentNode, currentDescendingChildren);
+              }
+              setState({
+                rootNode: currentRootNode,
+                addedNodeIdentifiers: new Set(currentIdentifiers).add(nodeId)
+              });
+              return {
+                v: void 0
+              };
+            }
+            if (accessedNodes.length === 0) {
+              searchingThroughChildren = false;
+            } else {
+              tempRoot = accessedNodes.shift();
+            }
+          },
+          _ret;
+        while (searchingThroughChildren && tempRoot != null) {
+          _ret = _loop();
+          if (_ret) return _ret.v;
+        }
+      };
+    }
+  };
+  var Store = createStore({
+    containedBy: HierarchyContainer,
+    initialState: initialState,
+    actions: actions,
+    name: 'HierarchyDataStore'
+  });
+  return createHook(Store)();
+};

package/dist/types/hooks/use-hierarchy.d.ts

@@ -0,0 +1,38 @@
+import { type Action } from 'react-sweet-state';
+type State<NodeType extends object> = {
+    addedNodeIdentifiers: Set<string>;
+    rootNode: NodeType | null;
+    /**
+     * used to determine the children of a node
+     */
+    childrenAccessor: (node: NodeType) => NodeType[] | undefined | null;
+    updateChildren: (node: NodeType, children: NodeType[]) => NodeType;
+    /**
+     * used to determine the unique identifier of a node for comparison
+     */
+    identifierAccessor: (node: NodeType) => string;
+    /**
+     * used to determine the unique identifier of a nodes parent for comparison
+     */
+    parentIdentifierAccessor: (node: NodeType) => string;
+};
+export declare const HierarchyContainer: import("react-sweet-state").GenericContainerComponent<unknown>;
+/**
+ * useHierarchyData manages your hierarchal data leveraging
+ * the `@visx/hierarchy` library (wrapper for d3).
+ */
+export declare const useHierarchyData: <NodeType extends object>({ childrenAccessor, updateChildren, identifierAccessor, parentIdentifierAccessor, }: {
+    childrenAccessor: State<NodeType>['childrenAccessor'];
+    updateChildren: State<NodeType>['updateChildren'];
+    identifierAccessor: State<NodeType>['identifierAccessor'];
+    parentIdentifierAccessor: State<NodeType>['parentIdentifierAccessor'];
+}) => import("react-sweet-state").HookReturnValue<State<NodeType>, import("react-sweet-state").BoundActions<State<NodeType>, {
+    resetRootNode: (root: NodeType) => Action<State<NodeType>>;
+    /** for useHierarchyData, when you add a node it must either be:
+     * - the new root
+     * - parent of the existing root
+     * - descendent of the existing root
+     */
+    addNode: (node: NodeType) => Action<State<NodeType>>;
+}>>;
+export {};

package/dist/types-ts4.5/hooks/use-hierarchy.d.ts

@@ -0,0 +1,38 @@
+import { type Action } from 'react-sweet-state';
+type State<NodeType extends object> = {
+    addedNodeIdentifiers: Set<string>;
+    rootNode: NodeType | null;
+    /**
+     * used to determine the children of a node
+     */
+    childrenAccessor: (node: NodeType) => NodeType[] | undefined | null;
+    updateChildren: (node: NodeType, children: NodeType[]) => NodeType;
+    /**
+     * used to determine the unique identifier of a node for comparison
+     */
+    identifierAccessor: (node: NodeType) => string;
+    /**
+     * used to determine the unique identifier of a nodes parent for comparison
+     */
+    parentIdentifierAccessor: (node: NodeType) => string;
+};
+export declare const HierarchyContainer: import("react-sweet-state").GenericContainerComponent<unknown>;
+/**
+ * useHierarchyData manages your hierarchal data leveraging
+ * the `@visx/hierarchy` library (wrapper for d3).
+ */
+export declare const useHierarchyData: <NodeType extends object>({ childrenAccessor, updateChildren, identifierAccessor, parentIdentifierAccessor, }: {
+    childrenAccessor: State<NodeType>['childrenAccessor'];
+    updateChildren: State<NodeType>['updateChildren'];
+    identifierAccessor: State<NodeType>['identifierAccessor'];
+    parentIdentifierAccessor: State<NodeType>['parentIdentifierAccessor'];
+}) => import("react-sweet-state").HookReturnValue<State<NodeType>, import("react-sweet-state").BoundActions<State<NodeType>, {
+    resetRootNode: (root: NodeType) => Action<State<NodeType>>;
+    /** for useHierarchyData, when you add a node it must either be:
+     * - the new root
+     * - parent of the existing root
+     * - descendent of the existing root
+     */
+    addNode: (node: NodeType) => Action<State<NodeType>>;
+}>>;
+export {};

package/package.json

@@ -27,6 +27,7 @@
 		".": "./src/index.ts"
 	},
 	"dependencies": {
+		"@atlaskit/button": "^23.3.0",
 		"@atlaskit/css": "^0.12.0",
 		"@atlaskit/primitives": "^14.11.0",
 		"@atlaskit/tokens": "^6.0.0",
@@ -35,7 +36,8 @@
 		"@visx/group": "^1.7.0",
 		"@visx/hierarchy": "^1.7.0",
 		"@visx/shape": "^1.7.0",
-		"@visx/zoom": "^2.10.0"
+		"@visx/zoom": "^2.10.0",
+		"react-sweet-state": "^2.6.5"
 	},
 	"peerDependencies": {
 		"react": "^18.2.0"
@@ -46,8 +48,7 @@
 		"@atlaskit/ssr": "workspace:^",
 		"@atlaskit/visual-regression": "workspace:^",
 		"@testing-library/react": "^13.4.0",
-		"react-dom": "^18.2.0",
-		"typescript": "~5.4.2"
+		"react-dom": "^18.2.0"
 	},
 	"techstack": {
 		"@atlassian/frontend": {
@@ -93,7 +94,7 @@
 		]
 	},
 	"name": "@atlaskit/charlie-hierarchy",
-	"version": "0.0.6",
+	"version": "0.0.7",
 	"description": "A component for building SVG-rendered trees, with support for custom node rendering, zooming, and panning.",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",