@cashub/ui 0.48.30 → 0.49.0-beta.0

package/dist/layout/Sidebar.jsx

@@ -0,0 +1,261 @@
+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/assets/burger-modern.jsx

@@ -0,0 +1,9 @@
+const BurgerModernIcon = () => (
+  <svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+	<path d="M5 7H19" stroke="currentcolor" stroke-width="1.5" stroke-linecap="round"/>
+	<path d="M5 12H19" stroke="currentcolor" stroke-width="1.5" stroke-linecap="round"/>
+	<path d="M5 17H19" stroke="currentcolor" stroke-width="1.5" stroke-linecap="round"/>
+  </svg>
+);
+
+export default BurgerModernIcon;

package/dist/layout/bgMainRegistry.js

@@ -0,0 +1,14 @@
+"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

@@ -0,0 +1,55 @@
+{
+  "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/dist/styles/GlobalStyle.js

@@ -0,0 +1,356 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _styledComponents = require("styled-components");
+require("normalize.css");
+require("../assets/css/global.css");
+const GlobalStyle = (0, _styledComponents.createGlobalStyle)`
+  body {
+    --color-white: ${_ref => {
+  let {
+    theme
+  } = _ref;
+  return theme.colorWhite;
+}};
+    --color-dark: ${_ref2 => {
+  let {
+    theme
+  } = _ref2;
+  return theme.colorDark;
+}};
+    --color-grey: ${_ref3 => {
+  let {
+    theme
+  } = _ref3;
+  return theme.colorGrey;
+}};
+    --color-primary: ${_ref4 => {
+  let {
+    theme
+  } = _ref4;
+  return theme.colorPrimary;
+}};
+    --color-success: ${_ref5 => {
+  let {
+    theme
+  } = _ref5;
+  return theme.colorSuccess;
+}};
+    --color-warning: ${_ref6 => {
+  let {
+    theme
+  } = _ref6;
+  return theme.colorWarning;
+}};
+    --color-danger: ${_ref7 => {
+  let {
+    theme
+  } = _ref7;
+  return theme.colorDanger;
+}};
+    --color-hover: ${_ref8 => {
+  let {
+    theme
+  } = _ref8;
+  return theme.colorHover;
+}};
+    --color-active: ${_ref9 => {
+  let {
+    theme
+  } = _ref9;
+  return theme.colorActive;
+}};
+    --color-hover-sidebar: ${_ref10 => {
+  let {
+    theme
+  } = _ref10;
+  return theme.colorHoverSidebar || theme.colorHover;
+}};
+    --color-active-sidebar: ${_ref11 => {
+  let {
+    theme
+  } = _ref11;
+  return theme.colorActiveSidebar || theme.colorActive;
+}};
+    --color-text-sidebar: ${_ref12 => {
+  let {
+    theme
+  } = _ref12;
+  return theme.colorTextSidebar || theme.fontOnBg;
+}};
+    --color-icon-header: ${_ref13 => {
+  let {
+    theme
+  } = _ref13;
+  return theme.colorIconHeader || theme.fontOnBg;
+}};
+    --color-arrow-sidebar: ${_ref14 => {
+  let {
+    theme
+  } = _ref14;
+  return theme.colorArrowSidebar || theme.colorPrimary;
+}};
+    --color-scroll-bar: ${_ref15 => {
+  let {
+    theme
+  } = _ref15;
+  return theme.scrollBarColor;
+}};
+    --color-background1: ${_ref16 => {
+  let {
+    theme
+  } = _ref16;
+  return theme.bgColor1;
+}};
+    --color-background2: ${_ref17 => {
+  let {
+    theme
+  } = _ref17;
+  return theme.bgColor2;
+}};
+    --color-background3: ${_ref18 => {
+  let {
+    theme
+  } = _ref18;
+  return theme.bgColor3;
+}};
+    --color-background4: ${_ref19 => {
+  let {
+    theme
+  } = _ref19;
+  return theme.bgColor4;
+}};
+    --color-backdrop: ${_ref20 => {
+  let {
+    theme
+  } = _ref20;
+  return theme.backdropBg;
+}};
+    --font-h1: ${_ref21 => {
+  let {
+    theme
+  } = _ref21;
+  return theme.fontH1;
+}};
+    --font-h2: ${_ref22 => {
+  let {
+    theme
+  } = _ref22;
+  return theme.fontH2;
+}};
+    --font-h3: ${_ref23 => {
+  let {
+    theme
+  } = _ref23;
+  return theme.fontH3;
+}};
+    --font-body1: ${_ref24 => {
+  let {
+    theme
+  } = _ref24;
+  return theme.fontBody1;
+}};
+    --font-body2: ${_ref25 => {
+  let {
+    theme
+  } = _ref25;
+  return theme.fontBody2;
+}};
+    --font-button: ${_ref26 => {
+  let {
+    theme
+  } = _ref26;
+  return theme.fontButton;
+}};
+    --font-caption: ${_ref27 => {
+  let {
+    theme
+  } = _ref27;
+  return theme.fontCaption;
+}};
+    --font-family: ${_ref28 => {
+  let {
+    theme
+  } = _ref28;
+  return theme.fontFamily;
+}};
+    --font-normal: ${_ref29 => {
+  let {
+    theme
+  } = _ref29;
+  return theme.fontWeightNormal;
+}};
+    --font-bold: ${_ref30 => {
+  let {
+    theme
+  } = _ref30;
+  return theme.fontWeightBold;
+}};
+    --font-on-primary: ${_ref31 => {
+  let {
+    theme
+  } = _ref31;
+  return theme.fontOnPrimary;
+}};
+    --font-on-success: ${_ref32 => {
+  let {
+    theme
+  } = _ref32;
+  return theme.fontOnSuccess;
+}};
+    --font-on-warning: ${_ref33 => {
+  let {
+    theme
+  } = _ref33;
+  return theme.fontOnWarning;
+}};
+    --font-on-danger: ${_ref34 => {
+  let {
+    theme
+  } = _ref34;
+  return theme.fontOnDanger;
+}};
+    --font-on-background: ${_ref35 => {
+  let {
+    theme
+  } = _ref35;
+  return theme.fontOnBg;
+}};
+    --font-on-mute: ${_ref36 => {
+  let {
+    theme
+  } = _ref36;
+  return theme.fontMutedColor;
+}};
+    --box-shadow: ${_ref37 => {
+  let {
+    theme
+  } = _ref37;
+  return theme.boxShadow;
+}};
+    --border-color: ${_ref38 => {
+  let {
+    theme
+  } = _ref38;
+  return theme.borderColor;
+}};
+    --border-color-transparent: ${_ref39 => {
+  let {
+    theme
+  } = _ref39;
+  return theme.borderColorTransparent;
+}};
+    --border-width: ${_ref40 => {
+  let {
+    theme
+  } = _ref40;
+  return theme.borderWidth;
+}};
+    --border-radius-s: ${_ref41 => {
+  let {
+    theme
+  } = _ref41;
+  return theme.borderRadiusS;
+}};
+    --border-radius: ${_ref42 => {
+  let {
+    theme
+  } = _ref42;
+  return theme.borderRadius;
+}};
+    --border-radius-l: ${_ref43 => {
+  let {
+    theme
+  } = _ref43;
+  return theme.borderRadiusL;
+}};
+    --border-radius-round: ${_ref44 => {
+  let {
+    theme
+  } = _ref44;
+  return theme.borderRadiusRound;
+}};
+    --spacing-xs: ${_ref45 => {
+  let {
+    theme
+  } = _ref45;
+  return theme.spacerXS;
+}};
+    --spacing-s: ${_ref46 => {
+  let {
+    theme
+  } = _ref46;
+  return theme.spacerS;
+}};
+    --spacing: ${_ref47 => {
+  let {
+    theme
+  } = _ref47;
+  return theme.spacer;
+}};
+    --spacing-l: ${_ref48 => {
+  let {
+    theme
+  } = _ref48;
+  return theme.spacerL;
+}};
+    /* Global style */
+    font-size: 16px;
+    font-family: Helvetica;
+    overflow-x: hidden;
+    background: var(--color-background1);
+  }
+  /* Custom normalize */
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
+  html {
+    line-height: 1;
+  }
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    margin: 0;
+  }
+  
+  a {
+    text-decoration: none;
+  }
+  button,
+  input,
+  optgroup,
+  select,
+  textarea {
+    line-height: 1;
+  }
+  ul {
+    padding: 0;
+    margin: 0;
+  }
+  li {
+    list-style: none;
+  }
+  figure {
+    margin: 0;
+  }
+  p {
+    margin: 0;
+  }
+  dl,
+  dt,
+  dd {
+    margin: 0;
+  }
+  .margin-bottom-s {
+    margin-bottom: var(--spacing-s);
+  }
+`;
+var _default = exports.default = GlobalStyle;