@cashub/ui 0.48.28 → 0.49.0-beta.0

package/dist/toast/MessageContainer.js

@@ -0,0 +1,51 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const MessageContainer = _ref => {
+  let {
+    title,
+    message,
+    containHTML = false
+  } = _ref;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    "data-testid": "messageContainer",
+    children: [title && /*#__PURE__*/(0, _jsxRuntime.jsx)(Title, {
+      children: title
+    }), containHTML ? /*#__PURE__*/(0, _jsxRuntime.jsx)(Message, {
+      dangerouslySetInnerHTML: {
+        __html: message
+      }
+    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(Message, {
+      children: message
+    })]
+  });
+};
+const Title = _styledComponents.default.div`
+  margin: 0;
+  margin-bottom: 0.25rem;
+  font-size: 1rem;
+  line-height: 1.5rem;
+  font-weight: 500;
+`;
+const Message = _styledComponents.default.div`
+  margin: 0;
+  font-size: 0.9rem;
+  line-height: 1.2rem;
+  word-break: break-word;
+  white-space: pre-wrap;
+
+  ul {
+    margin-left: 1rem;
+
+    li {
+      list-style: disc;
+    }
+  }
+`;
+var _default = exports.default = MessageContainer;

package/dist/tooltip/Tooltip.js

@@ -0,0 +1,140 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _reactOutsideClickHandler = _interopRequireDefault(require("react-outside-click-handler"));
+var _hooks = require("@cashub/hooks");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const Tooltip = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    children,
+    id,
+    title,
+    showArrow = false,
+    mode = 'hover',
+    fixed,
+    inline,
+    disabled,
+    placement
+  } = _ref;
+  const [display, setDisplay] = (0, _react.useState)(false);
+  const [targetElement, setTargetElement] = (0, _react.useState)(null);
+  const [tooltipElement, setTooltipElement] = (0, _react.useState)(null);
+  const [arrowElement, setArrowElement] = (0, _react.useState)(null);
+  const ownRef = (0, _hooks.useForkRef)(setTargetElement, ref);
+  const {
+    styles,
+    attributes,
+    update
+  } = (0, _hooks.useCustomPopper)(targetElement, tooltipElement, {
+    strategy: fixed ? 'fixed' : 'absolute',
+    arrowElement,
+    ...(placement && {
+      placement
+    })
+  });
+  const handleOpen = (0, _react.useCallback)(() => {
+    setDisplay(true);
+    update();
+  }, [update]);
+  const handleClose = (0, _react.useCallback)(() => {
+    setDisplay(false);
+    update();
+  }, [update]);
+  const toggle = (0, _react.useCallback)(() => {
+    setDisplay(display => !display);
+    update();
+  }, [update]);
+  const wraperProps = (0, _react.useMemo)(() => {
+    if (disabled) return;
+    if (mode === 'click') {
+      return {
+        onClick: toggle
+      };
+    }
+    return {
+      // mode ==="hover"
+      onClick: handleClose,
+      onMouseOver: handleOpen,
+      onMouseLeave: handleClose
+    };
+  }, [mode, handleClose, handleOpen, toggle, disabled]);
+  const childrenProps = {
+    ...children.props,
+    ref: ownRef
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactOutsideClickHandler.default, {
+    onOutsideClick: handleClose,
+    display: inline ? 'inline-block' : 'block',
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      ...wraperProps,
+      "data-testid": "tooltipWrapper",
+      children: [/*#__PURE__*/(0, _react.cloneElement)(children, childrenProps), /*#__PURE__*/(0, _jsxRuntime.jsxs)(TooltipTooltip, {
+        id: id,
+        $display: display,
+        ref: setTooltipElement,
+        style: styles.popper,
+        ...attributes.popper,
+        role: "tooltip",
+        children: [title, /*#__PURE__*/(0, _jsxRuntime.jsx)(TooltipArrow, {
+          "data-testid": "tooltipArrow",
+          ref: setArrowElement,
+          style: styles.arrow,
+          $display: showArrow
+        })]
+      })]
+    })
+  });
+});
+Tooltip.displayName = 'Tooltip';
+const TooltipTooltip = _styledComponents.default.div`
+  white-space: pre-line;
+  display: ${_ref2 => {
+  let {
+    $display
+  } = _ref2;
+  return $display ? 'block' : 'none';
+}};
+  border: 1px solid var(--border-color);
+  color: var(--font-on-background);
+  background: var(--color-background2);
+  box-shadow: var(--box-shadow);
+  border-radius: calc(var(--border-radius) / 2);
+  padding: var(--spacing-xs);
+  z-index: 80;
+  text-align: left;
+  font-size: var(--font-body1);
+  font-weight: var(--font-normal);
+  line-height: 1.5;
+  word-break: break-word;
+  max-width: 50vw;
+`;
+const TooltipArrow = _styledComponents.default.div`
+  display: ${_ref3 => {
+  let {
+    $display
+  } = _ref3;
+  return $display ? 'block' : 'none';
+}};
+  top: -0.5rem;
+  left: 0;
+  width: 1rem;
+  height: 1rem;
+
+  &::before {
+    position: absolute;
+    display: block;
+    content: '';
+    border-color: transparent;
+    border-style: solid;
+    top: 0;
+    border-width: 0 0.5rem 0.5rem 0.5rem;
+    border-bottom-color: var(--border-color);
+  }
+`;
+var _default = exports.default = Tooltip;

package/dist/treeView/TreeViewV2.js

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+require("treeflex/dist/css/treeflex.css");
+var _jsxRuntime = require("react/jsx-runtime");
+const TreeViewV2 = _ref => {
+  let {
+    rootName,
+    children
+  } = _ref;
+  const generateTree = children => {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("ul", {
+      children: children.map(child => {
+        return /*#__PURE__*/(0, _jsxRuntime.jsxs)("li", {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+            className: `tf-nc ${child.primary ? 'primary' : ''}`,
+            children: child.name
+          }), child.children.length > 0 && generateTree(child.children)]
+        }, child.id);
+      })
+    });
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: "tf-tree",
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("ul", {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("li", {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: "tf-nc",
+          children: rootName
+        }), generateTree(children)]
+      })
+    })
+  });
+};
+var _default = exports.default = TreeViewV2;

package/dist/treeView/TreeflexStyle.js

@@ -0,0 +1,49 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _styledComponents = require("styled-components");
+var _scrollbar = _interopRequireDefault(require("../styles/mixin/scrollbar"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+// integrate treeflex component
+const TreeflexStyle = (0, _styledComponents.createGlobalStyle)`
+  .tf-tree {
+    text-align: center;
+    color: var(--font-on-background);
+
+    .tf-nc {
+      border: var(--border-width) solid var(--border-color);
+      border-radius: 8px;
+      min-width: 120px;
+
+      &.primary {
+        border-color: var(--color-primary);
+        font-weight: var(--font-bold);
+      }
+    }
+
+    ${_scrollbar.default}
+  }
+
+  .tf-tree ul {
+    margin-bottom: 2em;
+  }
+
+  .tf-tree li ul {
+    margin-bottom: 0;
+  }
+
+  .tf-tree li li:before {
+    border: var(--border-width) solid var(--border-color);
+  }
+
+  .tf-tree .tf-nc:after,
+  .tf-tree .tf-nc:before,
+  .tf-tree .tf-node-content:after,
+  .tf-tree .tf-node-content:before {
+    border: var(--border-width) solid var(--border-color);
+  }
+`;
+var _default = exports.default = TreeflexStyle;

package/dist/wizard/Wizard.js

@@ -0,0 +1,251 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _fa = require("react-icons/fa");
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _utils = require("@cashub/utils");
+var _media = _interopRequireDefault(require("../styles/mixin/media"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const Wizard = props => {
+  const {
+    navNames = [],
+    defaultStep = 1,
+    children,
+    beforeNext,
+    beforePrevious,
+    clickableSteps = true
+  } = props;
+  const [currentStep, setCurrentStep] = (0, _react.useState)(defaultStep);
+  const goToStep = (0, _react.useCallback)(async step => {
+    if (step > currentStep) {
+      if (!beforeNext) {
+        setCurrentStep(step);
+      } else {
+        beforeNext({
+          current: currentStep,
+          next: step
+        }).then(() => {
+          setCurrentStep(step);
+        }).catch(error => {});
+      }
+    }
+    if (step < currentStep) {
+      if (!beforePrevious) {
+        setCurrentStep(step);
+      } else {
+        beforePrevious({
+          current: currentStep
+        }).then(() => {
+          setCurrentStep(step);
+        }).catch(error => {});
+      }
+    }
+  }, [currentStep, beforeNext, beforePrevious]);
+  const nextStep = (0, _react.useCallback)(() => {
+    let next = currentStep + 1;
+    if (next > navNames.length) {
+      next = navNames.length;
+    }
+    if (!beforeNext) {
+      setCurrentStep(next);
+    } else {
+      beforeNext({
+        current: currentStep
+      }).then(() => {
+        setCurrentStep(next);
+      }).catch(error => {});
+    }
+  }, [navNames.length, beforeNext, currentStep]);
+  const previousStep = (0, _react.useCallback)(() => {
+    let previous = currentStep - 1;
+    if (previous < 1) {
+      previous = 1;
+    }
+    if (!beforePrevious) {
+      setCurrentStep(previous);
+    } else {
+      beforePrevious({
+        current: currentStep
+      }).then(() => {
+        setCurrentStep(previous);
+      }).catch(error => {});
+    }
+  }, [beforePrevious, currentStep]);
+  const isLastStep = (0, _react.useCallback)(() => {
+    return currentStep === navNames.length;
+  }, [currentStep, navNames.length]);
+  const api = (0, _react.useMemo)(() => {
+    return {
+      goToStep,
+      nextStep,
+      previousStep,
+      isLastStep
+    };
+  }, [goToStep, isLastStep, nextStep, previousStep]);
+  const childrenWithProps = (0, _react.useMemo)(() => {
+    const validChildren = _react.Children.toArray(children).filter(child => !!child);
+    return _react.Children.map(validChildren, (child, index) => {
+      if (!child) return null;
+      const className = index + 1 === currentStep && 'active';
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(Step, {
+        className: className,
+        "data-testid": "step",
+        children: (0, _utils.isReactComponent)(child) ? /*#__PURE__*/(0, _react.cloneElement)(child, api) : child
+      });
+    });
+  }, [api, children, currentStep]);
+  (0, _react.useEffect)(() => {
+    setCurrentStep(defaultStep);
+  }, [defaultStep]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Nav, {
+      children: navNames.map((name, index, arr) => {
+        const step = index + 1;
+        const arrow = step === currentStep && step !== arr.length ? 'arrow' : undefined;
+        let className = '';
+        if (step === currentStep) {
+          className += 'current';
+        } else if (step < currentStep) {
+          className += 'done';
+        }
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(NavItem, {
+          className: className,
+          onClick: () => clickableSteps === true && goToStep(step),
+          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(NavTitle, {
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+              children: step
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+              children: name
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+              className: arrow,
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_fa.FaCaretRight, {})
+            })]
+          })
+        }, step);
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      children: childrenWithProps
+    })]
+  });
+};
+const Nav = _styledComponents.default.ul`
+  display: flex;
+  background: var(--color-background2);
+  border-radius: var(--border-radius-l);
+  margin-bottom: var(--spacing);
+
+  ${_media.default.mobile`
+      display: block;
+    `}
+`;
+const NavItem = _styledComponents.default.li`
+  color: var(--font-on-mute);
+  font-size: var(--font-body1);
+  font-weight: var(--font-bold);
+  padding: 0 var(--spacing-xs);
+  width: 100%;
+  height: 36px;
+  line-height: 36px;
+  transition: 0.3s;
+  overflow: hidden;
+  flex: 1;
+  cursor: pointer;
+
+  &:hover {
+    color: var(--font-on-background);
+
+    > div > span:first-of-type {
+      color: var(--font-on-primary);
+      background: var(--font-on-background);
+    }
+  }
+
+  &.current,
+  &.done {
+    background: var(--color-primary);
+    color: var(--font-on-primary);
+
+    > div > span:first-of-type {
+      color: var(--color-primary);
+      background: var(--font-on-primary);
+    }
+  }
+
+  &.current {
+    background: var(--color-primary);
+    color: var(--font-on-primary);
+    border-radius: 0 var(--border-radius-l) var(--border-radius-l) 0;
+
+    &:first-child {
+      border-radius: var(--border-radius-l);
+    }
+
+    ${_media.default.mobile`
+        border-radius: 0 0 var(--border-radius) var(--border-radius);
+      `}
+  }
+
+  &.done {
+    background: var(--color-primary);
+    color: var(--font-on-primary);
+
+    &:first-child {
+      border-radius: var(--border-radius-l) 0 0 var(--border-radius-l);
+
+      ${_media.default.mobile`
+          border-radius: var(--border-radius) var(--border-radius) 0 0;
+        `}
+    }
+  }
+`;
+const NavTitle = _styledComponents.default.div`
+  display: flex;
+  align-items: center;
+
+  > span:first-of-type {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-right: var(--spacing-xs);
+    color: var(--font-on-mute);
+    flex: 0 0;
+    flex-basis: 24px;
+    width: 24px;
+    height: 24px;
+    border-radius: var(--border-radius-l);
+    background: var(--font-on-mute);
+  }
+
+  > p {
+    margin-right: auto;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  > span:last-of-type {
+    display: none;
+
+    &.arrow {
+      display: flex;
+      align-self: center;
+    }
+
+    ${_media.default.mobile`
+        transform: rotate(90deg);
+      `}
+  }
+`;
+const Step = _styledComponents.default.div`
+  display: none;
+
+  &.active {
+    display: block;
+  }
+`;
+var _default = exports.default = Wizard;

package/package.json

@@ -1,55 +1,64 @@
-{
-  "name": "@cashub/ui",
-  "version": "0.48.28",
-  "private": false,
-  "author": "CasHUB Team",
-  "description": "CasHUB UI components library",
-  "main": "index.js",
-  "keywords": [
-    "CasHUB"
-  ],
-  "license": "MIT",
-  "dependencies": {
-    "@cashub/hooks": "^0.5.3",
-    "@cashub/utils": "^1.3.2",
-    "@googlemaps/markerclusterer": "^2.5.1",
-    "@googlemaps/react-wrapper": "^1.1.35",
-    "@monaco-editor/react": "^4.6.0",
-    "@popperjs/core": "^2.11.5",
-    "@yaireo/tagify": "^4.12.0",
-    "brace": "^0.11.1",
-    "chart.js": "^3.8.0",
-    "cropperjs": "^1.5.12",
-    "jsoneditor": "^9.8.0",
-    "jsoneditor-react": "^3.1.2",
-    "leaflet": "^1.7.1",
-    "leaflet-draw": "^1.0.4",
-    "lodash.uniqueid": "^4.0.1",
-    "moment": "^2.29.3",
-    "normalize.css": "^8.0.1",
-    "overlapping-marker-spiderfier": "^1.1.4",
-    "qrcode.react": "^3.0.2",
-    "rc-time-picker": "^3.7.3",
-    "react-chartjs-2": "^3.3.0",
-    "react-datepicker": "^4.8.0",
-    "react-helmet-async": "^2.0.3",
-    "react-leaflet": "^3.1.0",
-    "react-leaflet-markercluster": "^3.0.0-rc1",
-    "react-outside-click-handler": "^1.3.0",
-    "react-popper": "^2.3.0",
-    "react-router-dom": "^5.2.0",
-    "react-toastify": "^7.0.4",
-    "react-transition-group": "^4.4.2",
-    "react-window": "^1.8.11",
-    "styled-components": "^5.3.0",
-    "treeflex": "^2.0.1",
-    "xml-formatter": "^3.6.3"
-  },
-  "peerDependencies": {
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1"
-  },
-  "publishConfig": {
-    "access": "public"
-  }
-}
+{
+  "name": "@cashub/ui",
+  "version": "0.49.0-beta.0",
+  "private": false,
+  "author": "CasHUB Team",
+  "description": "CasHUB UI components library",
+  "main": "index.js",
+  "keywords": [
+    "CasHUB"
+  ],
+  "license": "MIT",
+  "scripts": {
+    "release": "npm run clean && npm run build && npm run copy",
+    "build": "node ../../scripts/build.js",
+    "copy": "node ../../scripts/copy-file.js",
+    "test": "node ../../scripts/test.js",
+    "test:coverage": "node ../../scripts/test.js --coverage",
+    "test:dev": "node ../../scripts/test.js --watch",
+    "clean": "rm -rf dist/*"
+  },
+  "dependencies": {
+    "@cashub/hooks": "^0.5.3",
+    "@cashub/utils": "^1.3.2",
+    "@googlemaps/markerclusterer": "^2.5.1",
+    "@googlemaps/react-wrapper": "^1.1.35",
+    "@monaco-editor/react": "^4.6.0",
+    "@popperjs/core": "^2.11.5",
+    "@yaireo/tagify": "^4.12.0",
+    "brace": "^0.11.1",
+    "chart.js": "^3.8.0",
+    "cropperjs": "^1.5.12",
+    "jsoneditor": "^9.8.0",
+    "jsoneditor-react": "^3.1.2",
+    "leaflet": "^1.7.1",
+    "leaflet-draw": "^1.0.4",
+    "lodash.uniqueid": "^4.0.1",
+    "moment": "^2.29.3",
+    "normalize.css": "^8.0.1",
+    "overlapping-marker-spiderfier": "^1.1.4",
+    "qrcode.react": "^3.0.2",
+    "rc-time-picker": "^3.7.3",
+    "react-chartjs-2": "^3.3.0",
+    "react-datepicker": "^4.8.0",
+    "react-helmet-async": "^2.0.3",
+    "react-leaflet": "^3.1.0",
+    "react-leaflet-markercluster": "^3.0.0-rc1",
+    "react-outside-click-handler": "^1.3.0",
+    "react-popper": "^2.3.0",
+    "react-router-dom": "^5.2.0",
+    "react-toastify": "^7.0.4",
+    "react-transition-group": "^4.4.2",
+    "react-window": "^1.8.11",
+    "styled-components": "^5.3.0",
+    "treeflex": "^2.0.1",
+    "xml-formatter": "^3.6.3"
+  },
+  "peerDependencies": {
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/setupTests.js

@@ -0,0 +1,9 @@
+// jest-dom adds custom jest matchers for asserting on DOM nodes.
+// allows you to do things like:
+// expect(element).toHaveTextContent(/react/i)
+// learn more: https://github.com/testing-library/jest-dom
+import '@testing-library/jest-dom';
+
+// mock ResizeObserverModule
+import * as ResizeObserverModule from 'resize-observer-polyfill';
+global.ResizeObserver = ResizeObserverModule.default;

package/src/Tab/Tab.js

@@ -0,0 +1,11 @@
+import TabContext from './subComponent/TabContext';
+
+const Tab = ({ children, selected, onChange, mode = 'view', onTitleChange }) => {
+  return (
+    <TabContext.Provider value={{ selected, onChange, mode, onTitleChange }}>
+      {children}
+    </TabContext.Provider>
+  );
+};
+
+export default Tab;