@cashub/ui 0.48.30 → 0.49.0-beta.0

package/dist/icon/registry.js

@@ -0,0 +1,70 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _merchant = _interopRequireDefault(require("./assets/merchant"));
+var _android = _interopRequireDefault(require("./assets/android"));
+var _appManagement = _interopRequireDefault(require("./assets/app-management"));
+var _appStore = _interopRequireDefault(require("./assets/appStore"));
+var _bill = _interopRequireDefault(require("./assets/bill"));
+var _campaign = _interopRequireDefault(require("./assets/campaign"));
+var _casstore = _interopRequireDefault(require("./assets/casstore"));
+var _dashboard = _interopRequireDefault(require("./assets/dashboard"));
+var _enterprise = _interopRequireDefault(require("./assets/enterprise"));
+var _firmware = _interopRequireDefault(require("./assets/firmware"));
+var _group = _interopRequireDefault(require("./assets/group"));
+var _inviteUser = _interopRequireDefault(require("./assets/invite-user"));
+var _log = _interopRequireDefault(require("./assets/log"));
+var _manufacturer = _interopRequireDefault(require("./assets/manufacturer"));
+var _packageCollection = _interopRequireDefault(require("./assets/package-collection"));
+var _report = _interopRequireDefault(require("./assets/report"));
+var _resource = _interopRequireDefault(require("./assets/resource"));
+var _role = _interopRequireDefault(require("./assets/role"));
+var _statistics = _interopRequireDefault(require("./assets/statistics"));
+var _tag = _interopRequireDefault(require("./assets/tag"));
+var _templateManagement = _interopRequireDefault(require("./assets/template-management"));
+var _terminal = _interopRequireDefault(require("./assets/terminal"));
+var _tradeye = _interopRequireDefault(require("./assets/tradeye"));
+var _shield = _interopRequireDefault(require("./assets/shield"));
+var _shieldLock = _interopRequireDefault(require("./assets/shield-lock"));
+var _shieldUnsafe = _interopRequireDefault(require("./assets/shield-unsafe"));
+var _shieldNoSignal = _interopRequireDefault(require("./assets/shield-no-signal"));
+var _battery = _interopRequireDefault(require("./assets/battery"));
+var _folder = _interopRequireDefault(require("./assets/folder"));
+var _heartbeats = _interopRequireDefault(require("./assets/heartbeats"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const iconOverrides = {
+  merchant: _merchant.default,
+  android: _android.default,
+  'app-management': _appManagement.default,
+  appStore: _appStore.default,
+  bill: _bill.default,
+  campaign: _campaign.default,
+  casstore: _casstore.default,
+  dashboard: _dashboard.default,
+  enterprise: _enterprise.default,
+  firmware: _firmware.default,
+  group: _group.default,
+  'invite-user': _inviteUser.default,
+  log: _log.default,
+  manufacturer: _manufacturer.default,
+  'package-collection': _packageCollection.default,
+  report: _report.default,
+  resource: _resource.default,
+  role: _role.default,
+  statistics: _statistics.default,
+  tag: _tag.default,
+  'template-management': _templateManagement.default,
+  terminal: _terminal.default,
+  tradeye: _tradeye.default,
+  shield: _shield.default,
+  'shield-lock': _shieldLock.default,
+  'shield-unsafe': _shieldUnsafe.default,
+  'shield-no-signal': _shieldNoSignal.default,
+  battery: _battery.default,
+  folder: _folder.default,
+  heartbeats: _heartbeats.default
+};
+var _default = exports.default = iconOverrides;

package/dist/iconbox/IconBox.js

@@ -0,0 +1,103 @@
+"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/iconbox/bgImageRegistry.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _bgEnterprise = _interopRequireDefault(require("./assets/bg-enterprise.png"));
+var _bgMerchant = _interopRequireDefault(require("./assets/bg-merchant.png"));
+var _bgTerminal = _interopRequireDefault(require("./assets/bg-terminal.png"));
+var _bgUser = _interopRequireDefault(require("./assets/bg-user.png"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const bgImageRegistry = {
+  enterprise: _bgEnterprise.default,
+  merchant: _bgMerchant.default,
+  terminal: _bgTerminal.default,
+  user: _bgUser.default
+};
+var _default = exports.default = bgImageRegistry;

package/dist/iconbox/subComponent/IconBoxImage.js

@@ -0,0 +1,85 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _registry = _interopRequireDefault(require("../../icon/registry"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const Wrapper = _styledComponents.default.span`
+  display: inline-flex;
+  width: 120px;
+  height: 120px;
+  color: ${_ref => {
+  let {
+    iconColor
+  } = _ref;
+  return iconColor || 'var(--color-primary)';
+}};
+  img, svg {
+    width: 100%;
+    height: 100%;
+    display: block;
+  }
+  ${_ref2 => {
+  let {
+    rounded
+  } = _ref2;
+  return rounded && 'border-radius: var(--border-radius); overflow: hidden;';
+}}
+  ${_ref3 => {
+  let {
+    sizeS
+  } = _ref3;
+  return sizeS && `
+      width: 80px;
+      height: 80px;
+    `;
+}}
+  ${_ref4 => {
+  let {
+    sizeXS
+  } = _ref4;
+  return sizeXS && `
+      width: 40px;
+      height: 40px;
+    `;
+}}
+  ${_ref5 => {
+  let {
+    size
+  } = _ref5;
+  return size && `
+      width: ${size}px;
+      height: ${size}px;
+    `;
+}}
+`;
+const IconBoxImage = _ref6 => {
+  let {
+    src: icon,
+    iconKey,
+    iconColor,
+    alt,
+    ...rest
+  } = _ref6;
+  const theme = (0, _react.useContext)(_styledComponents.ThemeContext);
+  const override = theme?.useModernIcons && iconKey && _registry.default[iconKey];
+  const IconComponent = override || icon;
+  const isComponent = typeof IconComponent === 'function';
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Wrapper, {
+    iconColor: iconColor,
+    ...rest,
+    children: isComponent ? /*#__PURE__*/(0, _jsxRuntime.jsx)(IconComponent, {}) : /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+      crossOrigin: "anonymous",
+      src: IconComponent,
+      alt: alt
+    })
+  });
+};
+var _default = exports.default = IconBoxImage;

package/dist/layout/Aside.js

@@ -0,0 +1,58 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _header = _interopRequireDefault(require("../styles/config/header.style"));
+var _sidebar = _interopRequireDefault(require("../styles/config/sidebar.style"));
+var _media = _interopRequireDefault(require("../styles/mixin/media"));
+var _bgAside = _interopRequireDefault(require("../assets/images/bg-aside.png"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const Aside = _styledComponents.default.aside`
+  width: ${_ref => {
+  let {
+    $display
+  } = _ref;
+  return $display ? `${_sidebar.default.open.width}` : `${_sidebar.default.close.width}`;
+}};
+  padding-top: var(--spacing-s);
+  height: calc(100vh - ${_header.default.height} - var(--spacing));
+  ${_ref2 => {
+  let {
+    theme
+  } = _ref2;
+  if (theme?.hideAsideDecoration) {
+    return `background: var(--color-background4);`;
+  }
+  return `
+      background: url(${_bgAside.default}), var(--color-background4);
+      background-size: 356px 436px, auto;
+      background-repeat: no-repeat, no-repeat;
+      background-position: bottom, center;
+    `;
+}}
+  --font-on-background: var(--color-text-sidebar);
+  --color-hover: var(--color-hover-sidebar);
+  --color-active: var(--color-active-sidebar);
+  border-top-right-radius: var(--border-radius);
+  position: fixed;
+  top: calc(${_header.default.height} + var(--spacing));
+  transition: width 0.2s;
+  z-index: 60;
+  ${_media.default.tablet`
+    height: 100%;
+    top: 0;
+    padding-top:0;
+    border-top-right-radius:0;
+    left: 0;
+    box-shadow: var(--box-shadow);
+    ${props => props.$display === false && (0, _styledComponents.css)`
+        left: -${_sidebar.default.open.width};
+      `}
+  `};
+`;
+var _default = exports.default = Aside;

package/dist/layout/Container.js

@@ -0,0 +1,56 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _header = _interopRequireDefault(require("../styles/config/header.style"));
+var _sidebar = _interopRequireDefault(require("../styles/config/sidebar.style"));
+var _media = _interopRequireDefault(require("../styles/mixin/media"));
+var _bgMainRegistry = _interopRequireDefault(require("./bgMainRegistry"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const Container = _styledComponents.default.div`
+  transition: 0.3s;
+  width: 100%;
+  padding: calc(${_header.default.height} + var(--spacing)) var(--spacing)
+    var(--spacing);
+  background-color: var(--color-background1);
+  ${_ref => {
+  let {
+    theme
+  } = _ref;
+  if (theme?.hideMainDecoration) {
+    return '';
+  }
+  const bgKey = theme?.bgMainKey || 'default';
+  const bgImage = _bgMainRegistry.default[bgKey];
+  return `
+      background-image: url(${bgImage});
+      background-size: cover;
+      background-repeat: no-repeat;
+      background-position: center;
+      background-attachment: fixed;
+    `;
+}}
+  ${_ref2 => {
+  let {
+    hasSidebar,
+    $display
+  } = _ref2;
+  return hasSidebar === true && (0, _styledComponents.css)`
+        width: calc(
+          100% -
+            ${$display === true ? _sidebar.default.open.width : _sidebar.default.close.width}
+        );
+        margin-left: ${$display === true ? _sidebar.default.open.width : _sidebar.default.close.width};
+        ${_media.default.tablet`
+        width: 100%;
+        margin-left: 0;
+      `}
+      `;
+}}
+`;
+var _default = exports.default = Container;

package/dist/layout/Header.jsx

@@ -0,0 +1,48 @@
+import styled from 'styled-components';
+import headerStyle from '../styles/config/header.style';
+import media from '../styles/mixin/media';
+import MenuIcon from './MenuIcon';
+import Logo from './Logo';
+const Header = ({ logo, hasSidebar, toggleSidebar, children }) => {
+  return (
+    <>
+      <Wrapper>
+        <Brand>
+          {hasSidebar && (
+            <MenuIcon toggleSidebar={toggleSidebar} />
+          )}
+          {logo && <Logo srcColor={logo.color} srcWhite={logo.white} />}
+        </Brand>
+        <Topbar>{children}</Topbar>
+      </Wrapper>
+    </>
+  );
+};
+const Wrapper = styled.header`
+  background: var(--color-background4);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  position: fixed;
+  z-index: 40;
+  width: 100%;
+  height: ${headerStyle.height};
+  padding: 0 calc(var(--spacing-s) + 0.25rem) 0 var(--spacing-s);
+  ${media.tablet`
+    padding: 0 var(--spacing-s) 0 calc(var(--spacing-s) - 0.25rem);
+  `}
+`;
+const Brand = styled.div`
+  display: flex;
+  --font-on-background: var(--font-on-primary);
+  > * {
+    flex: none;
+  }
+`;
+const Topbar = styled.div`
+  display: flex;
+  > *:not(:last-child) {
+    margin-right: calc(var(--spacing) - 0.5rem);
+  }
+`;
+export default Header;

package/dist/layout/Layout.jsx

@@ -0,0 +1,69 @@
+import { useEffect, useState } from 'react';
+import styled from 'styled-components';
+import { ScrollToTopButton } from '../button';
+import Header from './Header';
+import Container from './Container';
+import Footer from './Footer';
+import Sidebar from './Sidebar';
+import Backdrop from './Backdrop';
+const Layout = ({
+  mode,
+  logo,
+  headerContent,
+  navContent,
+  footerContent,
+  children,
+}) => {
+  const [display, setDisplay] = useState(!!navContent);
+  const toggleSidebar = () => {
+    setDisplay(!display);
+  };
+  // hide sidebar
+  useEffect(() => {
+    if (mode === 'tablet') {
+      setDisplay(false);
+    }
+  }, [mode, setDisplay]);
+  return (
+    <Wrapper>
+      <Header
+        logo={logo}
+        hasSidebar={!!navContent}
+        toggleSidebar={toggleSidebar}
+      >
+        {headerContent}
+      </Header>
+      <Main>
+        <Backdrop $display={display} onClick={toggleSidebar} />
+        {navContent && (
+          <Sidebar
+            logo={logo}
+            hasSidebar={!!navContent}
+            $display={display}
+            toggleSidebar={toggleSidebar}
+          >
+            {navContent}
+          </Sidebar>
+        )}
+        <Container hasSidebar={!!navContent} $display={display}>
+          {children}
+        </Container>
+        <ScrollToTopButton />
+      </Main>
+      <Footer hasSidebar={!!navContent} $display={display}>
+        {footerContent}
+      </Footer>
+    </Wrapper>
+  );
+};
+const Wrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+`;
+const Main = styled.div`
+  display: flex;
+  flex: 1;
+  position: relative;
+`;
+export default Layout;

package/dist/layout/Logo.jsx

@@ -0,0 +1,17 @@
+import { useContext } from 'react';
+import styled, { ThemeContext } from 'styled-components';
+import { ImageFluid } from '../image';
+const Logo = ({ srcColor, srcWhite }) => {
+  const theme = useContext(ThemeContext);
+  const src = theme?.useLightBrand ? srcWhite : srcColor;
+  return (
+    <Figure>
+      <ImageFluid src={src} alt='CasHUB logo' />
+    </Figure>
+  );
+};
+const Figure = styled.figure`
+  max-width: 220px;
+  height: 40px;
+`;
+export default Logo;

package/dist/layout/MenuIcon.jsx

@@ -0,0 +1,45 @@
+import { useContext } from 'react';
+import styled, { ThemeContext } from 'styled-components';
+import { ImageFluid } from '../image';
+import { IconFigure } from '../figure';
+import { IconButton } from '../button';
+import burgerWhite from '../assets/icons/burger-white.png';
+import burgerBlack from '../assets/icons/burger-black.png';
+import BurgerModernIcon from './assets/burger-modern';
+
+const MenuIcon = ({ toggleSidebar }) => {
+  const theme = useContext(ThemeContext);
+  if (theme?.useModernIcons) {
+    return (
+      <Wrapper onClick={toggleSidebar}>
+        <IconFigure>
+          <ModernIconColor>
+            <BurgerModernIcon />
+          </ModernIconColor>
+        </IconFigure>
+      </Wrapper>
+    );
+  }
+  const src = theme?.useLightBrand ? burgerWhite : burgerBlack;
+  return (
+    <Wrapper onClick={toggleSidebar}>
+      <IconFigure>
+        <ImageFluid
+          crossOrigin='anonymous'
+          src={src}
+          alt='Sidebar toggler'
+        />
+      </IconFigure>
+    </Wrapper>
+  );
+};
+const Wrapper = styled(IconButton)`
+  margin: 0;
+  margin-right: calc(var(--spacing) - 0.5rem);
+`;
+const ModernIconColor = styled.span`
+  display: inline-flex;
+  color: var(--color-icon-header);
+  svg { display: block; }
+`;
+export default MenuIcon;