@cashub/ui 0.48.30 → 0.49.0-beta.1

package/layout/Sidebar.jsx

@@ -1,16 +1,16 @@
-import { useEffect, useState, useRef } from 'react';
+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 } from 'styled-components';
+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 = ({
-  theme,
   logo,
   hasSidebar,
   $display,
@@ -20,31 +20,24 @@ const Sidebar = ({
   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
@@ -54,7 +47,6 @@ const Sidebar = ({
         onMouseOut={handleMouseOut}
       >
         <AsideHeader
-          theme={theme}
           logo={logo}
           hasSidebar={hasSidebar}
           toggleSidebar={toggleSidebar}
@@ -74,7 +66,6 @@ const Sidebar = ({
                 />
               );
             }
-
             return <MenuList {...prop} active={nowPath(prop.path)} key={key} />;
           })}
         </Menu>
@@ -83,18 +74,20 @@ const Sidebar = ({
   );
 };
 
-const MenuList = ({ path, name, icon, active }) => {
+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}>
-        <img
-          crossOrigin='anonymous'
-          src={icon}
-          alt={`${name} icon`}
-          width='24px'
-        />
+        {isComponent ? (
+          <IconWrapper><IconComponent /></IconWrapper>
+        ) : (
+          <img crossOrigin='anonymous' src={IconComponent} alt={`${name} icon`} width='24px' />
+        )}
         <span>{trans(name)}</span>
       </MenuItemLink>
     </MenuItem>
@@ -105,6 +98,7 @@ const MenuListWithSubMenu = ({
   path,
   name,
   icon,
+  iconKey,
   child,
   active,
   currentPath,
@@ -113,22 +107,27 @@ const MenuListWithSubMenu = ({
   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}>
-          {icon ? (
-            <img crossOrigin='anonymous' src={icon} alt={`${name} icon`} />
+          {IconComponent ? (
+            isComponent ? (
+              <IconWrapper><IconComponent /></IconWrapper>
+            ) : (
+              <img crossOrigin='anonymous' src={IconComponent} alt={`${name} icon`} />
+            )
           ) : (
             <EmptyIcon />
           )}
@@ -144,7 +143,6 @@ const MenuListWithSubMenu = ({
           .map((prop, key) => {
             const href = `${path}${prop.path}`;
             const active = currentPath.includes(prop.path);
-
             if (prop.parent === true) {
               return (
                 <MenuListWithSubMenu
@@ -159,7 +157,6 @@ const MenuListWithSubMenu = ({
                 />
               );
             }
-
             return (
               <SubMenuItem key={key} active={active} $level={level}>
                 <Link to={href}>
@@ -173,45 +170,46 @@ const MenuListWithSubMenu = ({
   );
 };
 
+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(--font-on-background);
+    color: var(--color-text-sidebar);
     font-size: var(--font-body1);
   }
-
   li {
     transition: 0.3s;
-
     &:hover {
-      background: var(--color-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);
+      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;
@@ -219,17 +217,14 @@ const MenuItemLink = styled(Link)`
     flex: 0 0 24px;
   }
 `;
-
 const MenuItemButton = styled(MenuItemLink)`
   background-color: transparent;
   border: none;
   cursor: pointer;
   width: 100%;
-
   .arrow {
     margin-left: auto;
-    color: var(--color-primary);
-
+    color: var(--color-arrow-sidebar);
     ${({ open }) =>
       open === true &&
       css`
@@ -238,12 +233,10 @@ const MenuItemButton = styled(MenuItemLink)`
       `};
   }
 `;
-
 const SubMenu = styled.ul`
   overflow: hidden;
   height: ${(props) => (props.open === true ? 'auto' : '0px')};
 `;
-
 const SubMenuItem = styled.li`
   a {
     display: flex;
@@ -252,20 +245,17 @@ const SubMenuItem = styled.li`
     padding-left: ${({ $level }) =>
       `calc(var(--spacing) * 2 + 1.5rem + ${$level} * var(--spacing))`};
     height: 48px;
-
     ${({ active }) =>
       active === true &&
       css`
-        background: var(--color-active);
+        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/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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cashub/ui",
-  "version": "0.48.30",
+  "version": "0.49.0-beta.1",
   "private": false,
   "author": "CasHUB Team",
   "description": "CasHUB UI components library",
@@ -52,4 +52,4 @@
   "publishConfig": {
     "access": "public"
   }
-}
+}

package/styles/GlobalStyle.js

@@ -63,226 +63,255 @@ const GlobalStyle = (0, _styledComponents.createGlobalStyle)`
   } = _ref9;
   return theme.colorActive;
 }};
-    --color-scroll-bar: ${_ref10 => {
+    --color-hover-sidebar: ${_ref10 => {
   let {
     theme
   } = _ref10;
-  return theme.scrollBarColor;
+  return theme.colorHoverSidebar || theme.colorHover;
 }};
-    --color-background1: ${_ref11 => {
+    --color-active-sidebar: ${_ref11 => {
   let {
     theme
   } = _ref11;
-  return theme.bgColor1;
+  return theme.colorActiveSidebar || theme.colorActive;
 }};
-    --color-background2: ${_ref12 => {
+    --color-text-sidebar: ${_ref12 => {
   let {
     theme
   } = _ref12;
-  return theme.bgColor2;
+  return theme.colorTextSidebar || theme.fontOnBg;
 }};
-    --color-background3: ${_ref13 => {
+    --color-icon-header: ${_ref13 => {
   let {
     theme
   } = _ref13;
-  return theme.bgColor3;
+  return theme.colorIconHeader || theme.fontOnBg;
 }};
-    --color-backdrop: ${_ref14 => {
+    --color-arrow-sidebar: ${_ref14 => {
   let {
     theme
   } = _ref14;
-  return theme.backdropBg;
+  return theme.colorArrowSidebar || theme.colorPrimary;
 }};
-
-    --font-h1: ${_ref15 => {
+    --color-scroll-bar: ${_ref15 => {
   let {
     theme
   } = _ref15;
-  return theme.fontH1;
+  return theme.scrollBarColor;
 }};
-    --font-h2: ${_ref16 => {
+    --color-background1: ${_ref16 => {
   let {
     theme
   } = _ref16;
-  return theme.fontH2;
+  return theme.bgColor1;
 }};
-    --font-h3: ${_ref17 => {
+    --color-background2: ${_ref17 => {
   let {
     theme
   } = _ref17;
-  return theme.fontH3;
+  return theme.bgColor2;
 }};
-    --font-body1: ${_ref18 => {
+    --color-background3: ${_ref18 => {
   let {
     theme
   } = _ref18;
-  return theme.fontBody1;
+  return theme.bgColor3;
 }};
-    --font-body2: ${_ref19 => {
+    --color-background4: ${_ref19 => {
   let {
     theme
   } = _ref19;
-  return theme.fontBody2;
+  return theme.bgColor4;
 }};
-    --font-button: ${_ref20 => {
+    --color-backdrop: ${_ref20 => {
   let {
     theme
   } = _ref20;
-  return theme.fontButton;
+  return theme.backdropBg;
 }};
-    --font-caption: ${_ref21 => {
+    --font-h1: ${_ref21 => {
   let {
     theme
   } = _ref21;
-  return theme.fontCaption;
+  return theme.fontH1;
 }};
-    --font-family: ${_ref22 => {
+    --font-h2: ${_ref22 => {
   let {
     theme
   } = _ref22;
-  return theme.fontFamily;
+  return theme.fontH2;
 }};
-    --font-normal: ${_ref23 => {
+    --font-h3: ${_ref23 => {
   let {
     theme
   } = _ref23;
-  return theme.fontWeightNormal;
+  return theme.fontH3;
 }};
-    --font-bold: ${_ref24 => {
+    --font-body1: ${_ref24 => {
   let {
     theme
   } = _ref24;
-  return theme.fontWeightBold;
+  return theme.fontBody1;
 }};
-    --font-on-primary: ${_ref25 => {
+    --font-body2: ${_ref25 => {
   let {
     theme
   } = _ref25;
-  return theme.fontOnPrimary;
+  return theme.fontBody2;
 }};
-    --font-on-success: ${_ref26 => {
+    --font-button: ${_ref26 => {
   let {
     theme
   } = _ref26;
-  return theme.fontOnSuccess;
+  return theme.fontButton;
 }};
-    --font-on-warning: ${_ref27 => {
+    --font-caption: ${_ref27 => {
   let {
     theme
   } = _ref27;
-  return theme.fontOnWarning;
+  return theme.fontCaption;
 }};
-    --font-on-danger: ${_ref28 => {
+    --font-family: ${_ref28 => {
   let {
     theme
   } = _ref28;
-  return theme.fontOnDanger;
+  return theme.fontFamily;
 }};
-    --font-on-background: ${_ref29 => {
+    --font-normal: ${_ref29 => {
   let {
     theme
   } = _ref29;
-  return theme.fontOnBg;
+  return theme.fontWeightNormal;
 }};
-    --font-on-mute: ${_ref30 => {
+    --font-bold: ${_ref30 => {
   let {
     theme
   } = _ref30;
-  return theme.fontMutedColor;
+  return theme.fontWeightBold;
 }};
-
-    --box-shadow: ${_ref31 => {
+    --font-on-primary: ${_ref31 => {
   let {
     theme
   } = _ref31;
-  return theme.boxShadow;
+  return theme.fontOnPrimary;
 }};
-    --border-color: ${_ref32 => {
+    --font-on-success: ${_ref32 => {
   let {
     theme
   } = _ref32;
-  return theme.borderColor;
+  return theme.fontOnSuccess;
 }};
-    --border-color-transparent: ${_ref33 => {
+    --font-on-warning: ${_ref33 => {
   let {
     theme
   } = _ref33;
-  return theme.borderColorTransparent;
+  return theme.fontOnWarning;
 }};
-    --border-width: ${_ref34 => {
+    --font-on-danger: ${_ref34 => {
   let {
     theme
   } = _ref34;
-  return theme.borderWidth;
+  return theme.fontOnDanger;
 }};
-    --border-radius-s: ${_ref35 => {
+    --font-on-background: ${_ref35 => {
   let {
     theme
   } = _ref35;
-  return theme.borderRadiusS;
+  return theme.fontOnBg;
 }};
-    --border-radius: ${_ref36 => {
+    --font-on-mute: ${_ref36 => {
   let {
     theme
   } = _ref36;
-  return theme.borderRadius;
+  return theme.fontMutedColor;
 }};
-    --border-radius-l: ${_ref37 => {
+    --box-shadow: ${_ref37 => {
   let {
     theme
   } = _ref37;
-  return theme.borderRadiusL;
+  return theme.boxShadow;
 }};
-    --border-radius-round: ${_ref38 => {
+    --border-color: ${_ref38 => {
   let {
     theme
   } = _ref38;
-  return theme.borderRadiusRound;
+  return theme.borderColor;
 }};
-
-    --spacing-xs: ${_ref39 => {
+    --border-color-transparent: ${_ref39 => {
   let {
     theme
   } = _ref39;
-  return theme.spacerXS;
+  return theme.borderColorTransparent;
 }};
-    --spacing-s: ${_ref40 => {
+    --border-width: ${_ref40 => {
   let {
     theme
   } = _ref40;
-  return theme.spacerS;
+  return theme.borderWidth;
 }};
-    --spacing: ${_ref41 => {
+    --border-radius-s: ${_ref41 => {
   let {
     theme
   } = _ref41;
-  return theme.spacer;
+  return theme.borderRadiusS;
 }};
-    --spacing-l: ${_ref42 => {
+    --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,
@@ -295,7 +324,6 @@ const GlobalStyle = (0, _styledComponents.createGlobalStyle)`
   a {
     text-decoration: none;
   }
-
   button,
   input,
   optgroup,
@@ -303,30 +331,24 @@ const GlobalStyle = (0, _styledComponents.createGlobalStyle)`
   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);
   }

package/styles/theme/dark.theme.js

@@ -20,7 +20,10 @@ const colorStyle = {
   bgColor1: '#13142e',
   bgColor2: '#222143',
   bgColor3: '#2d2a5d',
-  backdropBg: 'rgba(0, 0, 0, 0.75)'
+  bgColor4: '#222143',
+  backdropBg: 'rgba(0, 0, 0, 0.75)',
+  useLightBrand: true,
+  hideMainDecoration: true
 };
 
 // Common font style