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

package/{dist/layout → layout}/Aside.js

@@ -8,7 +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 _bgAside = _interopRequireDefault(require("../assets/images/bg-aside.png"));
+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; }
@@ -28,11 +28,30 @@ const Aside = _styledComponents.default.aside`
   if (theme?.hideAsideDecoration) {
     return `background: var(--color-background4);`;
   }
+  const bgKey = theme?.bgMainKey || 'default';
+  const bgImage = _bgMainRegistry.default[bgKey];
   return `
-      background: url(${_bgAside.default}), var(--color-background4);
-      background-size: 356px 436px, auto;
-      background-repeat: no-repeat, no-repeat;
-      background-position: bottom, center;
+      background: url(${bgImage});
+      background-size: cover;
+      background-repeat: no-repeat;
+      background-position: center;
+      background-attachment: fixed;
+      overflow: hidden;
+      position: relative;
+      z-index: 1;
+
+      &::before {
+        content: "";
+        position: absolute;
+        inset: 0;
+        z-index: -1;
+
+        background: var(--color-background4);
+        opacity: 0.9;
+
+        backdrop-filter: blur(20px);
+        -webkit-backdrop-filter: blur(20px);
+      }
     `;
 }}
   --font-on-background: var(--color-text-sidebar);

package/{src/layout → layout}/AsideHeader.jsx

@@ -3,25 +3,21 @@ 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 }) => {
+const AsideHeader = ({ logo, hasSidebar, toggleSidebar }) => {
   return (
     <Brand>
-      {hasSidebar && <MenuIcon theme={theme} toggleSidebar={toggleSidebar} />}
-      {logo && <Logo src={logo} />}
+      {hasSidebar && <MenuIcon toggleSidebar={toggleSidebar} />}
+      {logo && <Logo srcColor={logo.color} srcWhite={logo.white} />}
     </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 → layout}/Footer.js

@@ -12,7 +12,7 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
 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 Footer = _styledComponents.default.footer`
   transition: 0.3s;
-  border-top: var(--border-width) solid var(--border-color);
+  border-top: none;
   color: var(--font-on-mute);
   height: 64px;
   line-height: 64px;

package/{dist/layout → layout}/Layout.jsx

@@ -6,6 +6,7 @@ import Container from './Container';
 import Footer from './Footer';
 import Sidebar from './Sidebar';
 import Backdrop from './Backdrop';
+
 const Layout = ({
   mode,
   logo,
@@ -18,12 +19,12 @@ const Layout = ({
   const toggleSidebar = () => {
     setDisplay(!display);
   };
-  // hide sidebar
   useEffect(() => {
     if (mode === 'tablet') {
       setDisplay(false);
     }
   }, [mode, setDisplay]);
+
   return (
     <Wrapper>
       <Header
@@ -56,14 +57,17 @@ const Layout = ({
     </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/{src/layout → layout}/Sidebar.jsx

@@ -203,6 +203,8 @@ const MenuItem = styled.li`
     props.active === true &&
     css`
       background: var(--color-active-sidebar);
+      border-top-right-radius: 10px;
+      border-bottom-right-radius: 10px;
     `};
 `;
 const MenuItemLink = styled(Link)`
@@ -244,12 +246,19 @@ const SubMenuItem = styled.li`
     padding: 0 calc(var(--spacing) * 2 + 1.5rem);
     padding-left: ${({ $level }) =>
       `calc(var(--spacing) * 2 + 1.5rem + ${$level} * var(--spacing))`};
-    height: 48px;
+    min-height: 48px;
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem;
     ${({ active }) =>
       active === true &&
       css`
         background: var(--color-active-sidebar);
+        border-top-right-radius: 10px;
+        border-bottom-right-radius: 10px;
       `};
+    span {
+      line-height: 1.4;
+    }
   }
 `;
 const EmptyIcon = styled.span`

package/layout/bgMainRegistry.js

@@ -0,0 +1,22 @@
+"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"));
+var _bgMainDark = _interopRequireDefault(require("../assets/images/bg-main-dark.png"));
+var _bgMainLight = _interopRequireDefault(require("../assets/images/bg-main-light.png"));
+var _bgMainWhite = _interopRequireDefault(require("../assets/images/bg-main-white.png"));
+var _bgMainMidnight = _interopRequireDefault(require("../assets/images/bg-main-midnight.png"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const bgMainRegistry = {
+  default: _bgMain.default,
+  vivid: _bgMainVivid.default,
+  dark: _bgMainDark.default,
+  light: _bgMainLight.default,
+  white: _bgMainWhite.default,
+  midnight: _bgMainMidnight.default
+};
+var _default = exports.default = bgMainRegistry;

package/layout/bgMarkerRegistry.jsx

@@ -0,0 +1,23 @@
+import bgMarkerCircleEmber from '../assets/images/bg-marker-circle-ember.png';
+import bgMarkerTriangleEmber from '../assets/images/bg-marker-triangle-ember.png';
+import bgMarkerCircleWhite from '../assets/images/bg-marker-circle-white.png';
+import bgMarkerTriangleWhite from '../assets/images/bg-marker-triangle-white.png';
+import bgMarkerCircleDark from '../assets/images/bg-marker-circle-dark.png';
+import bgMarkerTriangleDark from '../assets/images/bg-marker-triangle-dark.png';
+
+const bgMarkerRegistry = {
+  ember: {
+    circle: bgMarkerCircleEmber,
+    triangle: bgMarkerTriangleEmber,
+  },
+  white: {
+    circle: bgMarkerCircleWhite,
+    triangle: bgMarkerTriangleWhite,
+  },
+  dark: {
+    circle: bgMarkerCircleDark,
+    triangle: bgMarkerTriangleDark,
+  },
+};
+
+export default bgMarkerRegistry;

package/package.json

@@ -1,64 +1,55 @@
-{
-  "name": "@cashub/ui",
-  "version": "0.49.0-beta.0",
-  "private": false,
-  "author": "CasHUB Team",
-  "description": "CasHUB UI components library",
-  "main": "index.js",
-  "keywords": [
-    "CasHUB"
-  ],
-  "license": "MIT",
-  "scripts": {
-    "release": "npm run clean && npm run build && npm run copy",
-    "build": "node ../../scripts/build.js",
-    "copy": "node ../../scripts/copy-file.js",
-    "test": "node ../../scripts/test.js",
-    "test:coverage": "node ../../scripts/test.js --coverage",
-    "test:dev": "node ../../scripts/test.js --watch",
-    "clean": "rm -rf dist/*"
-  },
-  "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"
-  }
-}
+{
+  "name": "@cashub/ui",
+  "version": "0.49.0-beta.10",
+  "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/section → section}/Section.js

@@ -5,9 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _bgChartTriangle = _interopRequireDefault(require("../assets/images/bg-chart-triangle.png"));
-var _bgChartCircle = _interopRequireDefault(require("../assets/images/bg-chart-circle.png"));
-var _map = _interopRequireDefault(require("../assets/images/map.png"));
+var _bgMarkerRegistry = _interopRequireDefault(require("../layout/bgMarkerRegistry"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const Section = _styledComponents.default.div`
   background: var(--color-background1);
@@ -15,109 +13,112 @@ const Section = _styledComponents.default.div`
   color: var(--font-on-background);
   padding: var(--spacing);
   margin-bottom: var(--spacing);
-
   ${_ref => {
   let {
     backgroundReverse
   } = _ref;
-  return backgroundReverse && 'background: var(--color-background2);';
-}}
+  return backgroundReverse && `
+      position: relative;
+      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
 
+      &::before {
+        content: '';
+        position: absolute;
+        inset: 0;
+        background-color: rgba(255, 255, 255, 0.06);
+        backdrop-filter: blur(20px);
+        -webkit-backdrop-filter: blur(20px);
+        border-radius: inherit;
+        z-index: -1;
+        pointer-events: none;
+      }
+    `;
+}}
   ${_ref2 => {
   let {
     paddingS
   } = _ref2;
   return paddingS && 'padding: var(--spacing-s);';
 }}
-
   ${_ref3 => {
   let {
     paddingXS
   } = _ref3;
   return paddingXS && 'padding: var(--spacing-xs);';
 }}
-
   ${_ref4 => {
   let {
     noPadding
   } = _ref4;
   return noPadding && 'padding: 0;';
 }}
-
   ${_ref5 => {
   let {
-    noPaddingX
+    noPadding,
+    backgroundReverse,
+    backgroundMarker,
+    backgroundMap
   } = _ref5;
-  return noPaddingX && 'padding-left: 0; padding-right: 0;';
+  return noPadding && !backgroundReverse && !backgroundMarker && !backgroundMap && 'background: transparent;';
 }}
-
   ${_ref6 => {
   let {
-    noPaddingTop
+    noPaddingX
   } = _ref6;
-  return noPaddingTop && 'padding-top: 0;';
+  return noPaddingX && 'padding-left: 0; padding-right: 0;';
 }}
-
   ${_ref7 => {
   let {
-    noPaddingBottom
+    noPaddingTop
   } = _ref7;
-  return noPaddingBottom && 'padding-bottom: 0;';
+  return noPaddingTop && 'padding-top: 0;';
 }}
-
   ${_ref8 => {
   let {
-    marginBottomS
+    noPaddingBottom
   } = _ref8;
-  return marginBottomS && 'margin-bottom: var(--spacing-s);';
+  return noPaddingBottom && 'padding-bottom: 0;';
 }}
-
   ${_ref9 => {
   let {
-    noMarginBottom
+    marginBottomS
   } = _ref9;
-  return noMarginBottom && 'margin-bottom: 0;';
+  return marginBottomS && 'margin-bottom: var(--spacing-s);';
 }}
-
   ${_ref10 => {
   let {
-    fullHeight
+    noMarginBottom
   } = _ref10;
-  return fullHeight && 'height: calc(100% - var(--spacing));';
+  return noMarginBottom && 'margin-bottom: 0;';
 }}
-
   ${_ref11 => {
   let {
-    backgroundMarker
+    fullHeight
   } = _ref11;
-  return backgroundMarker && `
-      background: var(--color-background2);
-      background-image: url(${_bgChartCircle.default}), url(${_bgChartTriangle.default});
-      background-repeat: no-repeat;
-      background-position: left top, right bottom;
-      background-size: 337px 312px, 166px 225px;
-    `;
+  return fullHeight && 'height: calc(100% - var(--spacing));';
 }}
-
   ${_ref12 => {
   let {
-    backgroundMap
+    backgroundMarker,
+    backgroundMap,
+    theme
   } = _ref12;
-  return backgroundMap && `
-      background: var(--color-background2);
-      background-image: url(${_map.default});
+  if (!backgroundMarker && !backgroundMap) return '';
+  const markerKey = theme?.bgMarkerKey || 'ember';
+  const marker = _bgMarkerRegistry.default[markerKey] || _bgMarkerRegistry.default.ember;
+  return `
+      background-image: url(${marker.circle}), url(${marker.triangle});
       background-repeat: no-repeat;
-      background-size: cover;
+      background-position: left top, right bottom;
+      background-size: 337px 312px, 166px 225px;
     `;
 }}
-
   ${_ref13 => {
   let {
     border
   } = _ref13;
   return border && 'border: var(--border-width) solid var(--border-color);';
 }}
-  
   ${_ref14 => {
   let {
     checkboxGroup

package/{dist/select → select}/Select.js

@@ -386,7 +386,7 @@ const Select = _ref => {
       setFocusedOption(null);
     }
     setDisplay(tmpDisplay);
-    update();
+    if (update) update();
   };
 
   // handle keyboard interaction

package/{dist/styles → styles}/theme/dark.theme.js

@@ -20,9 +20,14 @@ const colorStyle = {
   bgColor1: '#13142e',
   bgColor2: '#222143',
   bgColor3: '#2d2a5d',
+  bgColor4: '#222143',
   backdropBg: 'rgba(0, 0, 0, 0.75)',
+  cardMode: 'gradient',
+  bgMainKey: 'dark',
+  bgMarkerKey: 'dark',
+  useModernCardIcons: true,
   useLightBrand: true,
-  hideMainDecoration: true
+  hideMainDecoration: false
 };
 
 // Common font style

package/{dist/styles → styles}/theme/ember.theme.js

@@ -10,8 +10,8 @@ const colorStyle = {
   colorGrey: '#A38A8A',
   colorPrimary: '#D9211E',
   colorSuccess: '#3A86BD',
-  colorWarning: '#EC7084',
-  colorDanger: '#8B1E9E',
+  colorWarning: '#EAB308',
+  colorDanger: '#EC7084',
   colorHover: 'rgba(217, 33, 30, 0.1)',
   colorActive: 'rgba(217, 33, 30, 0.15)',
   scrollBarColor: 'rgba(217, 33, 30, 0.3)',
@@ -21,8 +21,11 @@ const colorStyle = {
   bgColor4: 'linear-gradient(90deg, #E62B27 0%, #D9211E 45%, #C60E27 100%)',
   backdropBg: 'rgba(0, 0, 0, 0.75)',
   useModernIcons: true,
+  useModernCardIcons: true,
   useLightBrand: true,
-  bgMainKey: 'vivid',
+  cardMode: 'accent',
+  bgMainKey: 'default',
+  bgMarkerKey: 'ember',
   colorHoverSidebar: 'rgba(255, 255, 255, 0.15)',
   colorActiveSidebar: 'rgba(255, 255, 255, 0.22)',
   colorTextSidebar: '#FFFFFF',

package/{dist/styles → styles}/theme/light.theme.js

@@ -20,7 +20,10 @@ const colorStyle = {
   bgColor1: '#F0ECFF',
   bgColor2: '#F8F4FF',
   bgColor3: '#E6E1FF',
-  backdropBg: 'rgba(0, 0, 0, 0.75)'
+  bgColor4: '#F8F4FF',
+  backdropBg: 'rgba(0, 0, 0, 0.75)',
+  cardMode: 'accent',
+  bgMainKey: 'light'
 };
 
 // Common font style

package/{dist/styles → styles}/theme/midnight.theme.js

@@ -20,6 +20,8 @@ const colorStyle = {
   bgColor3: '#EDEFF3',
   bgColor4: '#00255B',
   backdropBg: 'rgba(0, 0, 0, 0.75)',
+  cardMode: 'accent',
+  bgMainKey: 'midnight',
   useModernIcons: false,
   useLightBrand: true,
   colorHoverSidebar: 'rgba(255, 255, 255, 0.12)',

package/{dist/styles → styles}/theme/white.theme.js

@@ -20,11 +20,14 @@ const colorStyle = {
   bgColor1: '#EEEEEE',
   bgColor2: '#F7F7F7',
   bgColor3: '#FFFFFF',
+  bgColor4: '#F7F7F7',
   backdropBg: 'rgba(0, 0, 0, 0.75)',
+  cardMode: 'accent',
+  bgMainKey: 'white',
+  bgMarkerKey: 'white',
   useModernIcons: false,
   useLightBrand: false,
-  hideMainDecoration: false,
-  bgMainKey: 'default'
+  hideMainDecoration: false
 };
 
 // Common font style

package/{dist/table → table}/Table.js

@@ -44,7 +44,23 @@ const Table = _ref => {
     beforeCreateRow,
     popoverContainer,
     centerFooter = false,
-    showPager = true
+    showPager = true,
+    limitOptions = [{
+      id: 10,
+      text: '10'
+    }, {
+      id: 20,
+      text: '20'
+    }, {
+      id: 30,
+      text: '30'
+    }, {
+      id: 40,
+      text: '40'
+    }, {
+      id: 50,
+      text: '50'
+    }]
   } = _ref;
   const tableRef = (0, _react.useRef)(null);
   const {
@@ -304,22 +320,7 @@ const Table = _ref => {
           fill: true,
           fillReverse: backgroundReverse,
           allowSearch: false,
-          options: [{
-            id: 10,
-            text: '10'
-          }, {
-            id: 20,
-            text: '20'
-          }, {
-            id: 30,
-            text: '30'
-          }, {
-            id: 40,
-            text: '40'
-          }, {
-            id: 50,
-            text: '50'
-          }],
+          options: limitOptions,
           selected: limit,
           onSelect: onLimitChange
         })]

package/{dist/tooltip → tooltip}/Tooltip.js

@@ -40,15 +40,15 @@ const Tooltip = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   });
   const handleOpen = (0, _react.useCallback)(() => {
     setDisplay(true);
-    update();
+    if (update) update();
   }, [update]);
   const handleClose = (0, _react.useCallback)(() => {
     setDisplay(false);
-    update();
+    if (update) update();
   }, [update]);
   const toggle = (0, _react.useCallback)(() => {
     setDisplay(display => !display);
-    update();
+    if (update) update();
   }, [update]);
   const wraperProps = (0, _react.useMemo)(() => {
     if (disabled) return;