@cashub/ui 0.49.0-beta.0 → 0.49.0-beta.10

package/dist/iconbox/IconBox.js

@@ -1,103 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _IconBoxFigure = _interopRequireDefault(require("./subComponent/IconBoxFigure"));
-var _IconBoxImage = _interopRequireDefault(require("./subComponent/IconBoxImage"));
-var _bgChartTriangle = _interopRequireDefault(require("../assets/images/bg-chart-triangle.png"));
-var _bgImageRegistry = _interopRequireDefault(require("./bgImageRegistry"));
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const IconBox = _ref => {
-  let {
-    icon,
-    iconKey,
-    iconColor,
-    title,
-    children,
-    sizeXS = true,
-    sizeS = false,
-    size,
-    bgImageKey,
-    gradientFrom,
-    gradientTo
-  } = _ref;
-  const bgImage = bgImageKey && _bgImageRegistry.default[bgImageKey];
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Wrapper, {
-    bgImage: bgImage,
-    gradientFrom: gradientFrom,
-    gradientTo: gradientTo,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(IconBoxHead, {
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_IconBoxFigure.default, {
-        sizeXS: sizeXS,
-        sizeS: sizeS,
-        size: size,
-        marginRight: true,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconBoxImage.default, {
-          sizeXS: sizeXS,
-          sizeS: sizeS,
-          size: size,
-          iconKey: iconKey,
-          iconColor: iconColor,
-          src: icon,
-          alt: `${title}'s icon`
-        })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(IconBoxTitle, {
-        children: title
-      })]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(IconBoxBody, {
-      children: children
-    })]
-  });
-};
-const Wrapper = _styledComponents.default.div`
-  display: flex;
-  flex-direction: column;
-  padding: var(--spacing-l);
-  margin-bottom: var(--spacing);
-  border-radius: var(--border-radius);
-  color: var(--font-on-background);
-  ${_ref2 => {
-  let {
-    bgImage,
-    gradientFrom,
-    gradientTo
-  } = _ref2;
-  if (bgImage || gradientFrom && gradientTo) {
-    const gradient = gradientFrom && gradientTo ? `linear-gradient(135deg, ${gradientFrom}, ${gradientTo})` : 'var(--color-background2)';
-    const image = bgImage ? `url(${bgImage}), ` : '';
-    return `
-        background: ${image}${gradient};
-        background-repeat: no-repeat;
-        background-position: right bottom;
-        background-size: cover;
-      `;
-  }
-  return `
-      background: var(--color-background2);
-      background-image: url(${_bgChartTriangle.default});
-      background-repeat: no-repeat;
-      background-position: right bottom;
-      background-size: 30% 70%;
-    `;
-}}
-`;
-const IconBoxHead = _styledComponents.default.div`
-  display: flex;
-  align-items: center;
-  margin-bottom: var(--spacing);
-`;
-const IconBoxTitle = _styledComponents.default.div`
-  font-size: var(--font-h2);
-  font-weight: bold;
-  word-break: break-all;
-`;
-const IconBoxBody = _styledComponents.default.div`
-  font-size: var(--font-h1);
-  font-weight: bold;
-  text-align: center;
-`;
-var _default = exports.default = IconBox;

package/dist/layout/AsideHeader.jsx

@@ -1,27 +0,0 @@
-import styled from 'styled-components';
-import headerStyle from '../styles/config/header.style';
-import media from '../styles/mixin/media';
-import Logo from './Logo';
-import MenuIcon from './MenuIcon';
-
-const AsideHeader = ({ theme, logo, hasSidebar, toggleSidebar }) => {
-  return (
-    <Brand>
-      {hasSidebar && <MenuIcon theme={theme} toggleSidebar={toggleSidebar} />}
-      {logo && <Logo src={logo} />}
-    </Brand>
-  );
-};
-
-const Brand = styled.div`
-  display: none;
-  height: ${headerStyle.height};
-
-  ${media.tablet`
-    padding: 0 var(--spacing-xs);
-    align-items: center;
-    display: flex
-  `};
-`;
-
-export default AsideHeader;

package/dist/layout/Sidebar.jsx

@@ -1,261 +0,0 @@
-import { useEffect, useState, useRef, useContext } from 'react';
-import { FaCaretRight } from 'react-icons/fa';
-import { Link, useLocation } from 'react-router-dom';
-import { useTranslation } from 'react-i18next';
-import styled, { css, ThemeContext } from 'styled-components';
-import headerStyle from '../styles/config/header.style';
-import media from '../styles/mixin/media';
-import scrollbar from '../styles/mixin/scrollbar';
-import Aside from './Aside';
-import AsideHeader from './AsideHeader';
-import iconOverrides from '../icon/registry';
-
-const Sidebar = ({
-  logo,
-  hasSidebar,
-  $display,
-  toggleSidebar,
-  children,
-}) => {
-  const location = useLocation();
-  const sidebarRef = useRef(null);
-  const [hoverDisplay, setHoverDisplay] = useState(false);
-  const nowPath = (path) => {
-    return location.pathname.includes(path);
-  };
-  const handleMouseOver = () => {
-    if ($display === true) {
-      return;
-    }
-    setHoverDisplay(true);
-  };
-  const handleMouseOut = (event) => {
-    if ($display === true) {
-      return;
-    }
-    if (sidebarRef.current.contains(event.relatedTarget)) {
-      return;
-    }
-    setHoverDisplay(false);
-  };
-  return (
-    <>
-      <Aside
-        ref={sidebarRef}
-        $display={$display || hoverDisplay}
-        onMouseOver={handleMouseOver}
-        onMouseOut={handleMouseOut}
-      >
-        <AsideHeader
-          logo={logo}
-          hasSidebar={hasSidebar}
-          toggleSidebar={toggleSidebar}
-        />
-        <Menu>
-          {children.map((prop, key) => {
-            if (prop.parent === true) {
-              return (
-                <MenuListWithSubMenu
-                  {...prop}
-                  active={nowPath(prop.path)}
-                  currentPath={location.pathname}
-                  key={key}
-                  $display={$display}
-                  hoverDisplay={hoverDisplay}
-                  level={0}
-                />
-              );
-            }
-            return <MenuList {...prop} active={nowPath(prop.path)} key={key} />;
-          })}
-        </Menu>
-      </Aside>
-    </>
-  );
-};
-
-const MenuList = ({ path, name, icon, iconKey, active }) => {
-  const { t: trans } = useTranslation();
-  const themeContext = useContext(ThemeContext);
-  const override = themeContext?.useModernIcons && iconKey && iconOverrides[iconKey];
-  const IconComponent = override || icon;
-  const isComponent = typeof IconComponent === 'function';
-  return (
-    <MenuItem active={active}>
-      <MenuItemLink to={path}>
-        {isComponent ? (
-          <IconWrapper><IconComponent /></IconWrapper>
-        ) : (
-          <img crossOrigin='anonymous' src={IconComponent} alt={`${name} icon`} width='24px' />
-        )}
-        <span>{trans(name)}</span>
-      </MenuItemLink>
-    </MenuItem>
-  );
-};
-
-const MenuListWithSubMenu = ({
-  path,
-  name,
-  icon,
-  iconKey,
-  child,
-  active,
-  currentPath,
-  $display,
-  hoverDisplay,
-  level,
-}) => {
-  const { t: trans } = useTranslation();
-  const themeContext = useContext(ThemeContext);
-  const [open, setOpen] = useState(active);
-  const override = themeContext?.useModernIcons && iconKey && iconOverrides[iconKey];
-  const IconComponent = override || icon;
-  const isComponent = typeof IconComponent === 'function';
-  const toggleOpen = () => {
-    setOpen(!open);
-  };
-  useEffect(() => {
-    $display === false && hoverDisplay === false && setOpen(false);
-  }, [$display, hoverDisplay]);
-  return (
-    <>
-      <MenuItem onClick={toggleOpen}>
-        <MenuItemButton as='button' open={open} $level={level}>
-          {IconComponent ? (
-            isComponent ? (
-              <IconWrapper><IconComponent /></IconWrapper>
-            ) : (
-              <img crossOrigin='anonymous' src={IconComponent} alt={`${name} icon`} />
-            )
-          ) : (
-            <EmptyIcon />
-          )}
-          <span>{trans(name)}</span>
-          <span className='arrow' role='presentation' aria-hidden='true'>
-            <FaCaretRight />
-          </span>
-        </MenuItemButton>
-      </MenuItem>
-      <SubMenu open={open}>
-        {child
-          .filter((prop) => prop.name)
-          .map((prop, key) => {
-            const href = `${path}${prop.path}`;
-            const active = currentPath.includes(prop.path);
-            if (prop.parent === true) {
-              return (
-                <MenuListWithSubMenu
-                  {...prop}
-                  key={key}
-                  path={href}
-                  active={active}
-                  currentPath={currentPath}
-                  $display={$display}
-                  hoverDisplay={hoverDisplay}
-                  level={level + 1}
-                />
-              );
-            }
-            return (
-              <SubMenuItem key={key} active={active} $level={level}>
-                <Link to={href}>
-                  <span>{trans(prop.name)}</span>
-                </Link>
-              </SubMenuItem>
-            );
-          })}
-      </SubMenu>
-    </>
-  );
-};
-
-const IconWrapper = styled.span`
-  display: inline-flex;
-  width: 24px;
-  height: 24px;
-  margin-right: var(--spacing);
-  flex: 0 0 24px;
-  color: var(--color-text-sidebar);
-  svg { width: 100%; height: 100%; }
-`;
-const Menu = styled.ul`
-  overflow-y: auto;
-  overflow-x: hidden;
-  height: 100%;
-  span {
-    color: var(--color-text-sidebar);
-    font-size: var(--font-body1);
-  }
-  li {
-    transition: 0.3s;
-    &:hover {
-      background: var(--color-hover-sidebar);
-    }
-  }
-  ${scrollbar}
-  ${media.tablet`
-    height: calc(100% - ${headerStyle.height});
-  `};
-`;
-const MenuItem = styled.li`
-  ${(props) =>
-    props.active === true &&
-    css`
-      background: var(--color-active-sidebar);
-    `};
-`;
-const MenuItemLink = styled(Link)`
-  display: flex;
-  align-items: center;
-  padding: 0 var(--spacing);
-  height: 48px;
-  img {
-    width: 24px;
-    height: 24px;
-    margin-right: var(--spacing);
-    flex: 0 0 24px;
-  }
-`;
-const MenuItemButton = styled(MenuItemLink)`
-  background-color: transparent;
-  border: none;
-  cursor: pointer;
-  width: 100%;
-  .arrow {
-    margin-left: auto;
-    color: var(--color-arrow-sidebar);
-    ${({ open }) =>
-      open === true &&
-      css`
-        transform: rotate(90deg);
-        transition: all 0.4s;
-      `};
-  }
-`;
-const SubMenu = styled.ul`
-  overflow: hidden;
-  height: ${(props) => (props.open === true ? 'auto' : '0px')};
-`;
-const SubMenuItem = styled.li`
-  a {
-    display: flex;
-    align-items: center;
-    padding: 0 calc(var(--spacing) * 2 + 1.5rem);
-    padding-left: ${({ $level }) =>
-      `calc(var(--spacing) * 2 + 1.5rem + ${$level} * var(--spacing))`};
-    height: 48px;
-    ${({ active }) =>
-      active === true &&
-      css`
-        background: var(--color-active-sidebar);
-      `};
-  }
-`;
-const EmptyIcon = styled.span`
-  width: 24px;
-  height: 24px;
-  margin-right: var(--spacing);
-  flex: 0 0 24px;
-`;
-export default Sidebar;

package/dist/layout/bgMainRegistry.js

@@ -1,14 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _bgMain = _interopRequireDefault(require("../assets/images/bg-main.png"));
-var _bgMainVivid = _interopRequireDefault(require("../assets/images/bg-main-vivid.png"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const bgMainRegistry = {
-  default: _bgMain.default,
-  vivid: _bgMainVivid.default
-};
-var _default = exports.default = bgMainRegistry;

package/dist/package.json

@@ -1,55 +0,0 @@
-{
-  "name": "@cashub/ui",
-  "version": "0.48.30",
-  "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"
-  }
-}

package/setupTests.js

@@ -1,9 +0,0 @@
-// 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

@@ -1,11 +0,0 @@
-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;

package/src/Tab/TabList.js

@@ -1,159 +0,0 @@
-import { useRef, useState, useCallback, useEffect } from 'react';
-import styled from 'styled-components';
-import { FaAngleLeft, FaAngleRight } from 'react-icons/fa';
-import { Button } from '../button';
-
-const MAX_MOVE_PIXEL = 300;
-const TabList = ({ children, wrap = true, ...props }) => {
-  const wrapperRef = useRef(null);
-  const [exceedContainerWidth, setExceedContainerWidth] = useState(false);
-  const [hasPrevious, setHasPrevious] = useState(false);
-  const [hasNext, setHasNext] = useState(false);
-
-  const checkExceedContainerWidth = useCallback(() => {
-    if (wrapperRef.current) {
-      const { offsetWidth, scrollWidth } = wrapperRef.current;
-      let { marginLeft } = getComputedStyle(wrapperRef.current);
-      const currentMarginLeft = Math.abs(parseInt(marginLeft));
-
-      setHasPrevious(currentMarginLeft > 0);
-      setHasNext(scrollWidth - offsetWidth > 0);
-      setExceedContainerWidth(scrollWidth > offsetWidth - currentMarginLeft);
-    }
-  }, []);
-
-  const handleResize = useCallback(() => {
-    checkExceedContainerWidth();
-  }, []);
-
-  const handleTransitionend = useCallback((event) => {
-    // only allow margin-left transition event
-    if (event && event.propertyName !== 'margin-left') {
-      return;
-    }
-
-    checkExceedContainerWidth();
-  }, []);
-
-  const getMovePixel = (offsetWidth) => {
-    // move 1/3 pixel as default
-    const defaultMovePixel = Math.ceil(offsetWidth / 3);
-    return defaultMovePixel > MAX_MOVE_PIXEL
-      ? MAX_MOVE_PIXEL
-      : defaultMovePixel;
-  };
-
-  const updateScrollPosition = (marginLeft) => {
-    wrapperRef.current.style.marginLeft = marginLeft;
-  };
-
-  const handlePrevious = () => {
-    const { offsetWidth } = wrapperRef.current;
-    const { marginLeft } = getComputedStyle(wrapperRef.current);
-    const currentMarginLeft = Math.abs(parseInt(marginLeft));
-    const availableMovePixel = currentMarginLeft;
-    const movePixel = getMovePixel(offsetWidth - currentMarginLeft);
-
-    if (movePixel > availableMovePixel) {
-      // exceed edge, so move to edge only
-      updateScrollPosition('0px');
-    } else {
-      updateScrollPosition(`-${currentMarginLeft - movePixel}px`);
-    }
-  };
-
-  const handleNext = () => {
-    const { offsetWidth, scrollWidth } = wrapperRef.current;
-    const { marginLeft } = getComputedStyle(wrapperRef.current);
-    const currentMarginLeft = Math.abs(parseInt(marginLeft));
-    const availableMovePixel = scrollWidth - offsetWidth;
-    const movePixel = getMovePixel(offsetWidth - currentMarginLeft);
-
-    if (movePixel > availableMovePixel) {
-      // exceed edge, so move to edge only
-      updateScrollPosition(`-${currentMarginLeft + availableMovePixel}px`);
-    } else {
-      updateScrollPosition(`-${currentMarginLeft + movePixel}px`);
-    }
-  };
-
-  useEffect(() => {
-    window.addEventListener('resize', handleResize);
-    handleResize();
-
-    return () => {
-      window.removeEventListener('resize', handleResize);
-    };
-  }, [wrap, children]);
-
-  useEffect(() => {
-    if (wrapperRef.current) {
-      wrapperRef.current.addEventListener('transitionend', handleTransitionend);
-    }
-  }, [wrap]);
-
-  return (
-    <Container role='tablist' $wrap={wrap} {...props}>
-      {wrap ? (
-        children
-      ) : (
-        <>
-          <TabWrapper ref={wrapperRef}>{children}</TabWrapper>
-
-          {exceedContainerWidth && (
-            <Paginate>
-              <Button
-                aria-label='Previous'
-                reverse
-                onClick={handlePrevious}
-                iconOnly
-                disabled={!hasPrevious}
-              >
-                <FaAngleLeft />
-              </Button>
-              <Button
-                aria-label='Next'
-                reverse
-                onClick={handleNext}
-                iconOnly
-                disabled={!hasNext}
-              >
-                <FaAngleRight />
-              </Button>
-            </Paginate>
-          )}
-        </>
-      )}
-    </Container>
-  );
-};
-
-const Container = styled.div`
-  position: relative;
-  border-bottom: var(--border-width) solid var(--border-color);
-  margin-bottom: var(--spacing);
-
-  ${({ $wrap }) => !$wrap && 'white-space: nowrap;'}
-
-  ${({ noMargin }) => noMargin && 'margin-bottom: 0;'}
-`;
-
-const TabWrapper = styled.div`
-  margin-right: calc(1rem * 2 + 10px * 4 + var(--spacing-xs) * 2);
-  overflow: hidden;
-  margin-left: 0;
-  transition: margin-left 0.3s;
-`;
-
-const Paginate = styled.div`
-  display: flex;
-  position: absolute;
-  top: 0;
-  right: 0;
-
-  > :not(:last-child) {
-    margin-right: var(--spacing-xs);
-  }
-`;
-
-export default TabList;

package/src/Tab/TabPanel.js

@@ -1,35 +0,0 @@
-import { useContext, useEffect, useState, useMemo } from 'react';
-import styled from 'styled-components';
-import TabContext from './subComponent/TabContext';
-
-const TabPanel = ({ children, name, ...props }) => {
-  const { selected } = useContext(TabContext);
-  const [rendered, setRendered] = useState(false);
-
-  const tabContent = useMemo(() => {
-    if (rendered) {
-      return children;
-    }
-
-    return null;
-  }, [rendered, children]);
-
-  useEffect(() => {
-    if (name === selected) {
-      setRendered(true);
-    }
-  }, [selected, name]);
-
-  return (
-    <Panel role='tabpanel' $display={selected === name} {...props}>
-      {tabContent}
-    </Panel>
-  );
-};
-
-const Panel = styled.div`
-  display: ${({ $display }) => ($display ? 'block' : 'none')};
-  position: relative;
-`;
-
-export default TabPanel;