@cashub/ui 0.48.30 → 0.49.0-beta.1

package/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/iconbox/IconBox.js

@@ -8,21 +8,40 @@ 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
+    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: true,
+        sizeXS: sizeXS,
+        sizeS: sizeS,
+        size: size,
         marginRight: true,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconBoxImage.default, {
-          sizeXS: true,
+          sizeXS: sizeXS,
+          sizeS: sizeS,
+          size: size,
+          iconKey: iconKey,
+          iconColor: iconColor,
           src: icon,
           alt: `${title}'s icon`
         })
@@ -40,14 +59,31 @@ const Wrapper = _styledComponents.default.div`
   padding: var(--spacing-l);
   margin-bottom: var(--spacing);
   border-radius: var(--border-radius);
-  background: var(--color-background2);
   color: var(--font-on-background);
-
-  background: var(--color-background2);
-  background-image: url(${_bgChartTriangle.default});
-  background-repeat: no-repeat;
-  background-position: right bottom;
-  background-size: 30% 70%;
+  ${_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;

package/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/iconbox/subComponent/IconBoxImage.js

@@ -4,39 +4,82 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+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 }; }
-const IconBoxImage = _styledComponents.default.img.attrs(() => ({
-  crossOrigin: 'anonymous'
-}))`
+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;
-
-  ${_ref => {
+  color: ${_ref => {
   let {
-    rounded
+    iconColor
   } = _ref;
-  return rounded && 'border-radius: var(--border-radius);';
-}}
-
+  return iconColor || 'var(--color-primary)';
+}};
+  img, svg {
+    width: 100%;
+    height: 100%;
+    display: block;
+  }
   ${_ref2 => {
   let {
-    sizeS
+    rounded
   } = _ref2;
+  return rounded && 'border-radius: var(--border-radius); overflow: hidden;';
+}}
+  ${_ref3 => {
+  let {
+    sizeS
+  } = _ref3;
   return sizeS && `
       width: 80px;
       height: 80px;
     `;
 }}
-
-  ${_ref3 => {
+  ${_ref4 => {
   let {
     sizeXS
-  } = _ref3;
+  } = _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/layout/Aside.js

@@ -19,19 +19,30 @@ const Aside = _styledComponents.default.aside`
   } = _ref;
   return $display ? `${_sidebar.default.open.width}` : `${_sidebar.default.close.width}`;
 }};
-
   padding-top: var(--spacing-s);
   height: calc(100vh - ${_header.default.height} - var(--spacing));
-  background: url(${_bgAside.default}), var(--color-background2);
-  background-size: 356px 436px;
-  background-repeat: no-repeat;
-  background-position: bottom;
+  ${_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;
@@ -39,7 +50,6 @@ const Aside = _styledComponents.default.aside`
     border-top-right-radius:0;
     left: 0;
     box-shadow: var(--box-shadow);
-    
     ${props => props.$display === false && (0, _styledComponents.css)`
         left: -${_sidebar.default.open.width};
       `}

package/layout/Container.js

@@ -8,6 +8,7 @@ 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; }
@@ -16,19 +17,35 @@ const Container = _styledComponents.default.div`
   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
-  } = _ref;
+  } = _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;

package/layout/Header.jsx

@@ -3,25 +3,23 @@ import headerStyle from '../styles/config/header.style';
 import media from '../styles/mixin/media';
 import MenuIcon from './MenuIcon';
 import Logo from './Logo';
-
-const Header = ({ theme, logo, hasSidebar, toggleSidebar, children }) => {
+const Header = ({ logo, hasSidebar, toggleSidebar, children }) => {
   return (
     <>
       <Wrapper>
         <Brand>
           {hasSidebar && (
-            <MenuIcon theme={theme} toggleSidebar={toggleSidebar} />
+            <MenuIcon toggleSidebar={toggleSidebar} />
           )}
-          {logo && <Logo src={logo} />}
+          {logo && <Logo srcColor={logo.color} srcWhite={logo.white} />}
         </Brand>
         <Topbar>{children}</Topbar>
       </Wrapper>
     </>
   );
 };
-
 const Wrapper = styled.header`
-  background: var(--color-background2);
+  background: var(--color-background4);
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -30,26 +28,21 @@ const Wrapper = styled.header`
   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/layout/Layout.jsx

@@ -6,10 +6,8 @@ import Container from './Container';
 import Footer from './Footer';
 import Sidebar from './Sidebar';
 import Backdrop from './Backdrop';
-
 const Layout = ({
   mode,
-  theme,
   logo,
   headerContent,
   navContent,
@@ -17,35 +15,28 @@ const Layout = ({
   children,
 }) => {
   const [display, setDisplay] = useState(!!navContent);
-
   const toggleSidebar = () => {
     setDisplay(!display);
   };
-
   // hide sidebar
   useEffect(() => {
     if (mode === 'tablet') {
       setDisplay(false);
     }
   }, [mode, setDisplay]);
-
   return (
     <Wrapper>
       <Header
-        theme={theme}
         logo={logo}
         hasSidebar={!!navContent}
         toggleSidebar={toggleSidebar}
       >
         {headerContent}
       </Header>
-
       <Main>
         <Backdrop $display={display} onClick={toggleSidebar} />
-
         {navContent && (
           <Sidebar
-            theme={theme}
             logo={logo}
             hasSidebar={!!navContent}
             $display={display}
@@ -54,31 +45,25 @@ const Layout = ({
             {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/layout/Logo.jsx

@@ -1,17 +1,17 @@
-import styled from 'styled-components';
+import { useContext } from 'react';
+import styled, { ThemeContext } from 'styled-components';
 import { ImageFluid } from '../image';
-
-const Logo = ({ src }) => {
+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/layout/MenuIcon.jsx

@@ -1,27 +1,45 @@
-import styled from 'styled-components';
+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 = ({ theme, toggleSidebar }) => {
+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={theme === 'Dark' ? burgerWhite : burgerBlack}
+          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;