@cashub/ui-elv 1.0.1 → 1.0.3

package/esm/tooltip/Tooltip.js

@@ -0,0 +1,133 @@
+import { useState, cloneElement, forwardRef, useMemo, useCallback } from 'react';
+import styled from 'styled-components';
+import OutsideClickHandler from 'react-outside-click-handler';
+import { useForkRef, useCustomPopper } from '@cashub/hooks';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const Tooltip = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    children,
+    id,
+    title,
+    showArrow = false,
+    mode = 'hover',
+    fixed,
+    inline,
+    disabled,
+    placement
+  } = _ref;
+  const [display, setDisplay] = useState(false);
+  const [targetElement, setTargetElement] = useState(null);
+  const [tooltipElement, setTooltipElement] = useState(null);
+  const [arrowElement, setArrowElement] = useState(null);
+  const ownRef = useForkRef(setTargetElement, ref);
+  const {
+    styles,
+    attributes,
+    update
+  } = useCustomPopper(targetElement, tooltipElement, {
+    strategy: fixed ? 'fixed' : 'absolute',
+    arrowElement,
+    ...(placement && {
+      placement
+    })
+  });
+  const handleOpen = useCallback(() => {
+    setDisplay(true);
+    update();
+  }, [update]);
+  const handleClose = useCallback(() => {
+    setDisplay(false);
+    update();
+  }, [update]);
+  const toggle = useCallback(() => {
+    setDisplay(display => !display);
+    update();
+  }, [update]);
+  const wraperProps = 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__*/_jsx(OutsideClickHandler, {
+    onOutsideClick: handleClose,
+    display: inline ? 'inline-block' : 'block',
+    children: /*#__PURE__*/_jsxs("div", {
+      ...wraperProps,
+      "data-testid": "tooltipWrapper",
+      children: [/*#__PURE__*/cloneElement(children, childrenProps), /*#__PURE__*/_jsxs(TooltipTooltip, {
+        id: id,
+        $display: display,
+        ref: setTooltipElement,
+        style: styles.popper,
+        ...attributes.popper,
+        role: "tooltip",
+        children: [title, /*#__PURE__*/_jsx(TooltipArrow, {
+          "data-testid": "tooltipArrow",
+          ref: setArrowElement,
+          style: styles.arrow,
+          $display: showArrow
+        })]
+      })]
+    })
+  });
+});
+Tooltip.displayName = 'Tooltip';
+const TooltipTooltip = styled.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 = styled.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);
+  }
+`;
+export default Tooltip;

package/esm/tooltip/index.js

@@ -0,0 +1 @@
+export { default as Tooltip } from './Tooltip';

package/esm/treeView/TreeViewV2.js

@@ -0,0 +1,32 @@
+import 'treeflex/dist/css/treeflex.css';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const TreeViewV2 = _ref => {
+  let {
+    rootName,
+    children
+  } = _ref;
+  const generateTree = children => {
+    return /*#__PURE__*/_jsx("ul", {
+      children: children.map(child => {
+        return /*#__PURE__*/_jsxs("li", {
+          children: [/*#__PURE__*/_jsx("span", {
+            className: `tf-nc ${child.primary ? 'primary' : ''}`,
+            children: child.name
+          }), child.children.length > 0 && generateTree(child.children)]
+        }, child.id);
+      })
+    });
+  };
+  return /*#__PURE__*/_jsx("div", {
+    className: "tf-tree",
+    children: /*#__PURE__*/_jsx("ul", {
+      children: /*#__PURE__*/_jsxs("li", {
+        children: [/*#__PURE__*/_jsx("span", {
+          className: "tf-nc",
+          children: rootName
+        }), generateTree(children)]
+      })
+    })
+  });
+};
+export default TreeViewV2;

package/esm/treeView/TreeflexStyle.js

@@ -0,0 +1,43 @@
+import { createGlobalStyle } from 'styled-components';
+import scrollbar from '../styles/mixin/scrollbar';
+
+// integrate treeflex component
+const TreeflexStyle = 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}
+  }
+
+  .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);
+  }
+`;
+export default TreeflexStyle;

package/esm/treeView/index.js

@@ -0,0 +1,2 @@
+export { default as TreeViewV2 } from './TreeViewV2';
+export { default as TreeflexStyle } from './TreeflexStyle';

package/esm/wizard/Wizard.js

@@ -0,0 +1,244 @@
+import { useState, Children, cloneElement, useCallback, useMemo, useEffect } from 'react';
+import { FaCaretRight } from 'react-icons/fa/index.esm';
+import styled from 'styled-components';
+import { isReactComponent } from '@cashub/utils';
+import media from '../styles/mixin/media';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const Wizard = props => {
+  const {
+    navNames = [],
+    defaultStep = 1,
+    children,
+    beforeNext,
+    beforePrevious,
+    clickableSteps = true
+  } = props;
+  const [currentStep, setCurrentStep] = useState(defaultStep);
+  const goToStep = 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 = 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 = 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 = useCallback(() => {
+    return currentStep === navNames.length;
+  }, [currentStep, navNames.length]);
+  const api = useMemo(() => {
+    return {
+      goToStep,
+      nextStep,
+      previousStep,
+      isLastStep
+    };
+  }, [goToStep, isLastStep, nextStep, previousStep]);
+  const childrenWithProps = useMemo(() => {
+    const validChildren = Children.toArray(children).filter(child => !!child);
+    return Children.map(validChildren, (child, index) => {
+      if (!child) return null;
+      const className = index + 1 === currentStep && 'active';
+      return /*#__PURE__*/_jsx(Step, {
+        className: className,
+        "data-testid": "step",
+        children: isReactComponent(child) ? /*#__PURE__*/cloneElement(child, api) : child
+      });
+    });
+  }, [api, children, currentStep]);
+  useEffect(() => {
+    setCurrentStep(defaultStep);
+  }, [defaultStep]);
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_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__*/_jsx(NavItem, {
+          className: className,
+          onClick: () => clickableSteps === true && goToStep(step),
+          children: /*#__PURE__*/_jsxs(NavTitle, {
+            children: [/*#__PURE__*/_jsx("span", {
+              children: step
+            }), /*#__PURE__*/_jsx("p", {
+              children: name
+            }), /*#__PURE__*/_jsx("span", {
+              className: arrow,
+              children: /*#__PURE__*/_jsx(FaCaretRight, {})
+            })]
+          })
+        }, step);
+      })
+    }), /*#__PURE__*/_jsx("div", {
+      children: childrenWithProps
+    })]
+  });
+};
+const Nav = styled.ul`
+  display: flex;
+  background: var(--color-background2);
+  border-radius: var(--border-radius-l);
+  margin-bottom: var(--spacing);
+
+  ${media.mobile`
+      display: block;
+    `}
+`;
+const NavItem = styled.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.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.mobile`
+          border-radius: var(--border-radius) var(--border-radius) 0 0;
+        `}
+    }
+  }
+`;
+const NavTitle = styled.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.mobile`
+        transform: rotate(90deg);
+      `}
+  }
+`;
+const Step = styled.div`
+  display: none;
+
+  &.active {
+    display: block;
+  }
+`;
+export default Wizard;

package/esm/wizard/index.js

@@ -0,0 +1 @@
+export { default as Wizard } from './Wizard';

package/index.js

@@ -309,18 +309,6 @@ Object.keys(_image).forEach(function (key) {
     }
   });
 });
-var _jsoneditor = require("./jsoneditor");
-Object.keys(_jsoneditor).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _jsoneditor[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _jsoneditor[key];
-    }
-  });
-});
 var _layout = require("./layout");
 Object.keys(_layout).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/layout/Sidebar.jsx

@@ -1,5 +1,5 @@
 import { useEffect, useState, useRef } from 'react';
-import { FaCaretRight } from 'react-icons/fa';
+import { FaCaretRight } from 'react-icons/fa/index.esm';
 import { Link, useLocation } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import styled, { css } from 'styled-components';

package/package.json

@@ -1,10 +1,14 @@
 {
   "name": "@cashub/ui-elv",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "private": false,
   "author": "CasHUB Team",
   "description": "CasHUB UI components library (Elavon)",
   "main": "index.js",
+  "module": "esm/index.js",
+  "sideEffects": [
+    "**/*.css"
+  ],
   "keywords": [
     "CasHUB"
   ],
@@ -17,11 +21,8 @@
     "@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",