tenjin-ui-kit 0.2.71 → 0.2.73

package/components/Canvas.js

@@ -0,0 +1,253 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.DragDrop = exports.AddNewBox = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactDnd = require("react-dnd");
+var _reactDndHtml5Backend = require("react-dnd-html5-backend");
+var _WorkFlow = _interopRequireDefault(require("./WorkFlow"));
+require("../../App.css");
+var _material = require("@mui/material");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+var Canvas = function Canvas() {
+  return /*#__PURE__*/_react.default.createElement(_reactDnd.DndProvider, {
+    backend: _reactDndHtml5Backend.HTML5Backend
+  }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(DragDrop, null)));
+};
+var _default = Canvas;
+exports.default = _default;
+var WorkFlowList = [{
+  id: 1,
+  name: 'If Else Box'
+}, {
+  id: 2,
+  name: 'Simple Text Box'
+}];
+var DragDrop = function DragDrop() {
+  var _useState = (0, _react.useState)([]),
+    _useState2 = _slicedToArray(_useState, 2),
+    board = _useState2[0],
+    setBoard = _useState2[1];
+  var _useDrop = (0, _reactDnd.useDrop)(function () {
+      return {
+        accept: 'block',
+        drop: function drop(item) {
+          return addBlockToBoard(item.id, true);
+        },
+        collect: function collect(monitor) {
+          return {
+            isOver: !!monitor.isOver()
+          };
+        }
+      };
+    }),
+    _useDrop2 = _slicedToArray(_useDrop, 2),
+    isOver = _useDrop2[0].isOver,
+    drop = _useDrop2[1];
+  var addBlockToBoard = function addBlockToBoard(id, isDropped) {
+    var workFlowList = WorkFlowList.filter(function (workflow) {
+      return id === workflow.id;
+    });
+    var workflow = {
+      name: workFlowList[0].name,
+      id: workFlowList[0].id
+    };
+    if (isDropped) {
+      setBoard(function (board) {
+        return [].concat(_toConsumableArray(board), [workflow]);
+      });
+    } else {
+      setBoard(function (board) {
+        return [].concat(_toConsumableArray(board), [workflow.name]);
+      });
+    }
+  };
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "WorkFlow"
+  }, WorkFlowList === null || WorkFlowList === void 0 ? void 0 : WorkFlowList.map(function (workflow) {
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_WorkFlow.default, {
+      name: workflow.name,
+      id: workflow.id
+    }));
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: "Board",
+    ref: drop
+  }, board === null || board === void 0 ? void 0 : board.map(function (workflow, index) {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      key: index
+    }, workflow.name === 'If Else Box' ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+      style: {
+        border: '1px solid black',
+        padding: '10px',
+        display: 'inline-block',
+        margin: '1rem'
+      }
+    }, /*#__PURE__*/_react.default.createElement(_material.Grid, {
+      item: true,
+      container: true
+    }, /*#__PURE__*/_react.default.createElement(_material.Grid, {
+      item: true,
+      xs: true
+    }, /*#__PURE__*/_react.default.createElement(_WorkFlow.default, {
+      name: workflow.name,
+      id: workflow.id
+    }), /*#__PURE__*/_react.default.createElement("label", {
+      htmlFor: workflow.id
+    }, "If Input:"), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("input", {
+      id: workflow.id
+    }), /*#__PURE__*/_react.default.createElement("label", {
+      htmlFor: workflow.id + 1
+    }, "Else Input:"), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("input", {
+      id: workflow.id + 1
+    })), /*#__PURE__*/_react.default.createElement(_material.Grid, {
+      item: true,
+      xs: true
+    }, /*#__PURE__*/_react.default.createElement(AddNewBox, null))))) : workflow.name === 'Simple Text Box' ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+      style: {
+        border: '1px solid black',
+        padding: '10px',
+        display: 'inline-block',
+        margin: '1rem'
+      }
+    }, /*#__PURE__*/_react.default.createElement(_material.Grid, {
+      item: true,
+      container: true
+    }, /*#__PURE__*/_react.default.createElement(_material.Grid, {
+      item: true,
+      xs: true
+    }, /*#__PURE__*/_react.default.createElement(_WorkFlow.default, {
+      name: workflow.name,
+      id: workflow.id
+    }), /*#__PURE__*/_react.default.createElement("label", {
+      htmlFor: workflow.id
+    }, "Simple Input:"), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("input", null)), /*#__PURE__*/_react.default.createElement(_material.Grid, {
+      item: true,
+      xs: true
+    }, /*#__PURE__*/_react.default.createElement(AddNewBox, null))))) : /*#__PURE__*/_react.default.createElement(_WorkFlow.default, {
+      name: workflow.name,
+      id: workflow.id
+    }));
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: "board"
+  }));
+};
+exports.DragDrop = DragDrop;
+var AddNewBox = function AddNewBox() {
+  var _useState3 = (0, _react.useState)([]),
+    _useState4 = _slicedToArray(_useState3, 2),
+    inputBoxes = _useState4[0],
+    setInputBoxes = _useState4[1];
+  var _useState5 = (0, _react.useState)(null),
+    _useState6 = _slicedToArray(_useState5, 2),
+    type = _useState6[0],
+    setType = _useState6[1];
+  var addInputBox = function addInputBox() {
+    setInputBoxes([].concat(_toConsumableArray(inputBoxes), [{
+      label: 'Text',
+      value: ''
+    }]));
+    setType('input');
+  };
+  var handleInputChange = function handleInputChange(index, event) {
+    var values = _toConsumableArray(inputBoxes);
+    values[index] = event.target.value;
+    setInputBoxes(values);
+  };
+  var addIfElseInputBox = function addIfElseInputBox() {
+    setInputBoxes([].concat(_toConsumableArray(inputBoxes), [{
+      label: 'If',
+      value: ''
+    }, {
+      label: 'Else',
+      value: ''
+    }]));
+    setType('if_else');
+  };
+
+  //   const handleIfElseInputChange = (index, event) => {
+  //     const values = [...inputBoxes];
+  //     values[index] = event.target.value;
+  //     setInputBoxes(values);
+  //   };
+
+  return /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      border: '1px solid black',
+      padding: '10px',
+      display: 'inline-block'
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center'
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      fontSize: '30px',
+      cursor: 'pointer'
+    },
+    onClick: addInputBox,
+    title: "Add Text Box"
+  }, "+")), /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center'
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      fontSize: '30px',
+      cursor: 'pointer'
+    },
+    onClick: addIfElseInputBox,
+    title: "Add If Else Box"
+  }, "+")), inputBoxes.map(function (box, index) {
+    return /*#__PURE__*/_react.default.createElement(_material.Grid, {
+      item: true,
+      container: true
+    }, /*#__PURE__*/_react.default.createElement(_material.Grid, {
+      item: true,
+      xs: true
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      style: {
+        border: '1px solid black',
+        padding: '10px',
+        display: 'inline-block',
+        margin: '0.5rem'
+      }
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      key: index,
+      style: {
+        marginTop: '1rem'
+      }
+    }, /*#__PURE__*/_react.default.createElement("label", {
+      htmlFor: "".concat(type, "-").concat(index)
+    }, box.label), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("input", {
+      id: "".concat(type, "-").concat(index),
+      type: "text",
+      value: box.value,
+      onChange: function onChange(e) {
+        var updatedBoxes = _toConsumableArray(inputBoxes);
+        updatedBoxes[index].value = e.target.value;
+        setInputBoxes(updatedBoxes);
+      }
+    })))));
+  }));
+};
+exports.AddNewBox = AddNewBox;

package/components/RightContext/index.css

@@ -0,0 +1,20 @@
+.contextContainer {
+  z-index: 1;
+  width: 100%;
+  height: 500px;
+  background: #673ab7;
+}
+.rightClick {
+  z-index: 12;
+  position: fixed;
+  background: rgb(240, 200, 1);
+}
+.menuElement {
+  color: #222222;
+  cursor: pointer;
+  padding: 17px 36px;
+}
+.menuElement:hover {
+  color: #fff;
+  background: #009688;
+}

package/components/RightContext/index.js

@@ -0,0 +1,83 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+require("./index.css");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+var RightContext = function RightContext() {
+  var _React$useState = _react.default.useState(false),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    context = _React$useState2[0],
+    setContext = _React$useState2[1];
+  var _React$useState3 = _react.default.useState({
+      x: 0,
+      y: 0
+    }),
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    xYPosistion = _React$useState4[0],
+    setXyPosistion = _React$useState4[1];
+  var showNav = function showNav(event) {
+    event.preventDefault();
+    setContext(false);
+    var positionChange = {
+      x: event.pageX,
+      y: event.pageY
+    };
+    setXyPosistion(positionChange);
+    setContext(true);
+  };
+  var hideContext = function hideContext(event) {
+    setContext(false);
+  };
+  var _React$useState5 = _react.default.useState(),
+    _React$useState6 = _slicedToArray(_React$useState5, 2),
+    chosen = _React$useState6[0],
+    setChosen = _React$useState6[1];
+  var initMenu = function initMenu(chosen) {
+    setChosen(chosen);
+  };
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("h2", {
+    className: "mb-3"
+  }, "React Right Click Context Menu Example"), /*#__PURE__*/_react.default.createElement("div", {
+    className: "contextContainer",
+    onContextMenu: showNav,
+    onClick: hideContext
+  }, chosen && /*#__PURE__*/_react.default.createElement("h1", null, "\"", chosen, "\" is chosen"), context && /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      top: xYPosistion.y,
+      left: xYPosistion.x
+    },
+    className: "rightClick"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "menuElement",
+    onClick: function onClick() {
+      return initMenu('New');
+    }
+  }, "Refactor"), /*#__PURE__*/_react.default.createElement("div", {
+    className: "menuElement",
+    onClick: function onClick() {
+      return initMenu('Delete');
+    }
+  }, "Cut"), /*#__PURE__*/_react.default.createElement("div", {
+    className: "menuElement",
+    onClick: function onClick() {
+      return initMenu('Copy');
+    }
+  }, "Copy"), /*#__PURE__*/_react.default.createElement("div", {
+    className: "menuElement",
+    onClick: function onClick() {
+      return initMenu('Paste');
+    }
+  }, "Paste"))));
+};
+var _default = RightContext;
+exports.default = _default;

package/components/WorkFlow.js

@@ -0,0 +1,44 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactDnd = require("react-dnd");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+var WorkFlow = function WorkFlow(props) {
+  var name = props.name,
+    id = props.id;
+  var _useDrag = (0, _reactDnd.useDrag)(function () {
+      return {
+        type: 'block',
+        item: {
+          id: props.id
+        },
+        collect: function collect(monitor) {
+          return {
+            isDragging: !!monitor.isDragging()
+          };
+        }
+      };
+    }),
+    _useDrag2 = _slicedToArray(_useDrag, 2),
+    isDragging = _useDrag2[0].isDragging,
+    drag = _useDrag2[1];
+  return /*#__PURE__*/_react.default.createElement("div", {
+    ref: drag,
+    width: "150px",
+    style: {
+      border: isDragging ? '5px solid pink' : '0px'
+    }
+  }, /*#__PURE__*/_react.default.createElement("h2", null, "WorkFlow- ".concat(name)));
+};
+var _default = WorkFlow;
+exports.default = _default;

package/components/WorkFlowBuilder.js

@@ -0,0 +1,130 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactflow = require("reactflow");
+var _d3Hierarchy = require("d3-hierarchy");
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+// Custom node styles
+var customNodeStyles = {
+  border: '1px solid #ddd',
+  padding: '10px',
+  borderRadius: '5px'
+};
+
+// Custom node types
+var customNodeTypes = [{
+  default: {
+    style: customNodeStyles
+  },
+  start: {
+    style: _objectSpread(_objectSpread({}, customNodeStyles), {}, {
+      background: '#6c9'
+    })
+  },
+  end: {
+    style: _objectSpread(_objectSpread({}, customNodeStyles), {}, {
+      background: '#c69'
+    })
+  }
+}];
+
+// Custom edge types
+var customEdgeTypes = {
+  default: {
+    stroke: '#ddd'
+  },
+  active: {
+    stroke: '#6c9'
+  }
+};
+
+// Sample data for the workflow
+var data = [{
+  name: 'Workflow',
+  children: [{
+    name: 'Start',
+    type: 'start',
+    children: [{
+      name: 'Step 1'
+    }, {
+      name: 'Step 2'
+    }]
+  }, {
+    name: 'End',
+    type: 'end',
+    children: [{
+      name: 'Step 3'
+    }, {
+      name: 'Step 4'
+    }]
+  }]
+}];
+
+// Generate the hierarchy data
+var hierarchyData = (0, _d3Hierarchy.hierarchy)(data);
+function WorkFlowBuilder() {
+  var _useState = (0, _react.useState)(hierarchyData.descendants().map(function (d) {
+      return {
+        id: d.data.name,
+        type: d.data.type || 'default',
+        data: {
+          label: d.data.name
+        },
+        position: {
+          x: d.depth * 200,
+          y: d.index * 100
+        }
+      };
+    })),
+    _useState2 = _slicedToArray(_useState, 2),
+    elements = _useState2[0],
+    setElements = _useState2[1];
+  var onElementsRemoveStart = function onElementsRemoveStart() {
+    return console.log('Elements removal started');
+  };
+  var onElementsRemoveEnd = function onElementsRemoveEnd(removedElements) {
+    return setElements(function (els) {
+      return (0, _reactflow.removeElements)(removedElements, els);
+    });
+  };
+  var onConnect = function onConnect(params) {
+    return setElements(function (els) {
+      return (0, _reactflow.addEdge)(_objectSpread(_objectSpread({}, params), {}, {
+        type: 'default'
+      }), els);
+    });
+  };
+  return /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      height: '800px'
+    }
+  }, /*#__PURE__*/_react.default.createElement(_reactflow.ReactFlow, {
+    elements: elements,
+    nodes: customNodeTypes,
+    edges: customEdgeTypes,
+    onNodesChange: onElementsRemoveStart,
+    onEdgesChange: onElementsRemoveEnd,
+    onConnect: onConnect,
+    fitView: true,
+    attributionPosition: "bottom-left"
+  }));
+}
+var _default = WorkFlowBuilder;
+exports.default = _default;

package/components/breadCrumbs/index.js

@@ -16,7 +16,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 // import Link from "@mui/material/Link";
 
 function BreadCrumbs(props) {
-  var _props$crumbInfo, _props$crumbInfo$2, _props$crumbInfo$3, _props$crumbInfo$4, _props$crumbInfo$5;
+  var _props$crumbInfo, _props$crumbInfo$2, _props$crumbInfo$3, _props$crumbInfo$4, _props$crumbInfo$5, _props$crumbInfo$5$ti, _props$crumbInfo$6, _props$crumbInfo$7, _props$crumbInfo$7$ti, _props$crumbInfo$8;
   var navigate = (0, _reactRouterDom.useNavigate)();
   var windowSm = (0, _material.useMediaQuery)('(max-width:960px)');
   function handleClick(event, data) {
@@ -41,6 +41,7 @@ function BreadCrumbs(props) {
     "aria-label": "breadcrumb",
     maxItems: 3
   }, props.crumbInfo && ((_props$crumbInfo = props.crumbInfo) === null || _props$crumbInfo === void 0 ? void 0 : _props$crumbInfo.map(function (data, key) {
+    var _data$title, _data$title2;
     return /*#__PURE__*/React.createElement("div", {
       key: key
       // to={data?.link}
@@ -58,7 +59,11 @@ function BreadCrumbs(props) {
       style: {
         marginRight: '0.4rem'
       }
-    }, data.icon), data === null || data === void 0 ? void 0 : data.title);
+    }, data.icon), (data === null || data === void 0 ? void 0 : (_data$title = data.title) === null || _data$title === void 0 ? void 0 : _data$title.length) > 20 ? /*#__PURE__*/React.createElement(_material.Tooltip, {
+      title: data === null || data === void 0 ? void 0 : data.title,
+      arrow: true,
+      placement: "top"
+    }, /*#__PURE__*/React.createElement("span", null, (data === null || data === void 0 ? void 0 : (_data$title2 = data.title) === null || _data$title2 === void 0 ? void 0 : _data$title2.slice(0, 20)) + '...')) : /*#__PURE__*/React.createElement("span", null, data === null || data === void 0 ? void 0 : data.title));
   })))) : /*#__PURE__*/React.createElement(_Stack.default, {
     spacing: 2
   }, /*#__PURE__*/React.createElement(_material.Breadcrumbs, {
@@ -82,5 +87,9 @@ function BreadCrumbs(props) {
     style: {
       margin: '0.5rem 0.4rem 0rem 0rem'
     }
-  }, (_props$crumbInfo$4 = props.crumbInfo[0]) === null || _props$crumbInfo$4 === void 0 ? void 0 : _props$crumbInfo$4.icon), (_props$crumbInfo$5 = props.crumbInfo[0]) === null || _props$crumbInfo$5 === void 0 ? void 0 : _props$crumbInfo$5.title))));
+  }, (_props$crumbInfo$4 = props.crumbInfo[0]) === null || _props$crumbInfo$4 === void 0 ? void 0 : _props$crumbInfo$4.icon), ((_props$crumbInfo$5 = props.crumbInfo[0]) === null || _props$crumbInfo$5 === void 0 ? void 0 : (_props$crumbInfo$5$ti = _props$crumbInfo$5.title) === null || _props$crumbInfo$5$ti === void 0 ? void 0 : _props$crumbInfo$5$ti.length) > 20 ? /*#__PURE__*/React.createElement(_material.Tooltip, {
+    title: (_props$crumbInfo$6 = props.crumbInfo[0]) === null || _props$crumbInfo$6 === void 0 ? void 0 : _props$crumbInfo$6.title,
+    arrow: true,
+    placement: "top"
+  }, /*#__PURE__*/React.createElement("span", null, ((_props$crumbInfo$7 = props.crumbInfo[0]) === null || _props$crumbInfo$7 === void 0 ? void 0 : (_props$crumbInfo$7$ti = _props$crumbInfo$7.title) === null || _props$crumbInfo$7$ti === void 0 ? void 0 : _props$crumbInfo$7$ti.slice(0, 20)) + '...')) : /*#__PURE__*/React.createElement("span", null, (_props$crumbInfo$8 = props.crumbInfo[0]) === null || _props$crumbInfo$8 === void 0 ? void 0 : _props$crumbInfo$8.title)))));
 }

package/components/browsingTestCaseLayout/DetailsViewLayout/DetailsViewContent/index.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _style = _interopRequireDefault(require("./style"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var DetailsViewContent = function DetailsViewContent(_ref) {
+  var children = _ref.children;
+  var classes = (0, _style.default)();
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: classes.main
+  }, children);
+};
+DetailsViewContent.propTypes = {};
+var _default = DetailsViewContent;
+exports.default = _default;

package/components/browsingTestCaseLayout/DetailsViewLayout/DetailsViewContent/style.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _styles = require("@mui/styles");
+var _default = (0, _styles.makeStyles)(function () {
+  return {
+    main: {
+      marginTop: '1.5rem'
+    }
+  };
+});
+exports.default = _default;

package/components/browsingTestCaseLayout/DetailsViewLayout/DetailsViewHeader/index.js

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _material = require("@mui/material");
+var _react = _interopRequireDefault(require("react"));
+var _reactRouterDom = require("react-router-dom");
+var _breadCrumbs = _interopRequireDefault(require("../../../breadCrumbs"));
+var _defaultSmall = _interopRequireDefault(require("../../../../themes/defaultSmall"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var DetailsViewHeader = function DetailsViewHeader(props) {
+  var breadcrumbsData = props.breadcrumbsData;
+  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_material.ThemeProvider, {
+    theme: _defaultSmall.default
+  }, /*#__PURE__*/_react.default.createElement(_material.CssBaseline, null), /*#__PURE__*/_react.default.createElement(_reactRouterDom.BrowserRouter, null, /*#__PURE__*/_react.default.createElement(_breadCrumbs.default, {
+    crumbInfo: breadcrumbsData
+  }))));
+};
+DetailsViewHeader.propTypes = {};
+var _default = DetailsViewHeader;
+exports.default = _default;

package/components/browsingTestCaseLayout/TreeViewLayout/TreeViewContent/Index.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _material = require("@mui/material");
+var _react = _interopRequireDefault(require("react"));
+var _tree = _interopRequireDefault(require("../../../tree"));
+var _default2 = _interopRequireDefault(require("../../../../themes/default"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var TreeViewContent = function TreeViewContent(props) {
+  var folder = props.folder;
+  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_material.ThemeProvider, {
+    theme: _default2.default
+  }, /*#__PURE__*/_react.default.createElement(_material.CssBaseline, null), /*#__PURE__*/_react.default.createElement(_tree.default, {
+    folder: folder
+  })));
+};
+TreeViewContent.propTypes = {};
+var _default = TreeViewContent;
+exports.default = _default;