@cashub/ui 0.48.30 → 0.49.0-beta.0

package/layout/Layout.jsx

@@ -1,84 +0,0 @@
-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,
-  theme,
-  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
-        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}
-            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/layout/Logo.jsx

@@ -1,17 +0,0 @@
-import styled from 'styled-components';
-import { ImageFluid } from '../image';
-
-const Logo = ({ src }) => {
-  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 +0,0 @@
-import styled 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';
-
-const MenuIcon = ({ theme, toggleSidebar }) => {
-  return (
-    <Wrapper onClick={toggleSidebar}>
-      <IconFigure>
-        <ImageFluid
-          crossOrigin='anonymous'
-          src={theme === 'Dark' ? burgerWhite : burgerBlack}
-          alt='Sidebar toggler'
-        />
-      </IconFigure>
-    </Wrapper>
-  );
-};
-
-const Wrapper = styled(IconButton)`
-  margin: 0;
-  margin-right: calc(var(--spacing) - 0.5rem);
-`;
-
-export default MenuIcon;

package/layout/Sidebar.jsx

@@ -1,271 +0,0 @@
-import { useEffect, useState, useRef } 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 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';
-
-const Sidebar = ({
-  theme,
-  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
-          theme={theme}
-          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, active }) => {
-  const { t: trans } = useTranslation();
-
-  return (
-    <MenuItem active={active}>
-      <MenuItemLink to={path}>
-        <img
-          crossOrigin='anonymous'
-          src={icon}
-          alt={`${name} icon`}
-          width='24px'
-        />
-        <span>{trans(name)}</span>
-      </MenuItemLink>
-    </MenuItem>
-  );
-};
-
-const MenuListWithSubMenu = ({
-  path,
-  name,
-  icon,
-  child,
-  active,
-  currentPath,
-  $display,
-  hoverDisplay,
-  level,
-}) => {
-  const { t: trans } = useTranslation();
-  const [open, setOpen] = useState(active);
-
-  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`} />
-          ) : (
-            <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 Menu = styled.ul`
-  overflow-y: auto;
-  overflow-x: hidden;
-  height: 100%;
-
-  span {
-    color: var(--font-on-background);
-    font-size: var(--font-body1);
-  }
-
-  li {
-    transition: 0.3s;
-
-    &:hover {
-      background: var(--color-hover);
-    }
-  }
-
-  ${scrollbar}
-
-  ${media.tablet`
-    height: calc(100% - ${headerStyle.height});
-  `};
-`;
-
-const MenuItem = styled.li`
-  ${(props) =>
-    props.active === true &&
-    css`
-      background: var(--color-active);
-    `};
-`;
-
-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-primary);
-
-    ${({ 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);
-      `};
-  }
-`;
-
-const EmptyIcon = styled.span`
-  width: 24px;
-  height: 24px;
-  margin-right: var(--spacing);
-  flex: 0 0 24px;
-`;
-
-export default Sidebar;

package/styles/GlobalStyle.js

@@ -1,334 +0,0 @@
-"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-scroll-bar: ${_ref10 => {
-  let {
-    theme
-  } = _ref10;
-  return theme.scrollBarColor;
-}};
-    --color-background1: ${_ref11 => {
-  let {
-    theme
-  } = _ref11;
-  return theme.bgColor1;
-}};
-    --color-background2: ${_ref12 => {
-  let {
-    theme
-  } = _ref12;
-  return theme.bgColor2;
-}};
-    --color-background3: ${_ref13 => {
-  let {
-    theme
-  } = _ref13;
-  return theme.bgColor3;
-}};
-    --color-backdrop: ${_ref14 => {
-  let {
-    theme
-  } = _ref14;
-  return theme.backdropBg;
-}};
-
-    --font-h1: ${_ref15 => {
-  let {
-    theme
-  } = _ref15;
-  return theme.fontH1;
-}};
-    --font-h2: ${_ref16 => {
-  let {
-    theme
-  } = _ref16;
-  return theme.fontH2;
-}};
-    --font-h3: ${_ref17 => {
-  let {
-    theme
-  } = _ref17;
-  return theme.fontH3;
-}};
-    --font-body1: ${_ref18 => {
-  let {
-    theme
-  } = _ref18;
-  return theme.fontBody1;
-}};
-    --font-body2: ${_ref19 => {
-  let {
-    theme
-  } = _ref19;
-  return theme.fontBody2;
-}};
-    --font-button: ${_ref20 => {
-  let {
-    theme
-  } = _ref20;
-  return theme.fontButton;
-}};
-    --font-caption: ${_ref21 => {
-  let {
-    theme
-  } = _ref21;
-  return theme.fontCaption;
-}};
-    --font-family: ${_ref22 => {
-  let {
-    theme
-  } = _ref22;
-  return theme.fontFamily;
-}};
-    --font-normal: ${_ref23 => {
-  let {
-    theme
-  } = _ref23;
-  return theme.fontWeightNormal;
-}};
-    --font-bold: ${_ref24 => {
-  let {
-    theme
-  } = _ref24;
-  return theme.fontWeightBold;
-}};
-    --font-on-primary: ${_ref25 => {
-  let {
-    theme
-  } = _ref25;
-  return theme.fontOnPrimary;
-}};
-    --font-on-success: ${_ref26 => {
-  let {
-    theme
-  } = _ref26;
-  return theme.fontOnSuccess;
-}};
-    --font-on-warning: ${_ref27 => {
-  let {
-    theme
-  } = _ref27;
-  return theme.fontOnWarning;
-}};
-    --font-on-danger: ${_ref28 => {
-  let {
-    theme
-  } = _ref28;
-  return theme.fontOnDanger;
-}};
-    --font-on-background: ${_ref29 => {
-  let {
-    theme
-  } = _ref29;
-  return theme.fontOnBg;
-}};
-    --font-on-mute: ${_ref30 => {
-  let {
-    theme
-  } = _ref30;
-  return theme.fontMutedColor;
-}};
-
-    --box-shadow: ${_ref31 => {
-  let {
-    theme
-  } = _ref31;
-  return theme.boxShadow;
-}};
-    --border-color: ${_ref32 => {
-  let {
-    theme
-  } = _ref32;
-  return theme.borderColor;
-}};
-    --border-color-transparent: ${_ref33 => {
-  let {
-    theme
-  } = _ref33;
-  return theme.borderColorTransparent;
-}};
-    --border-width: ${_ref34 => {
-  let {
-    theme
-  } = _ref34;
-  return theme.borderWidth;
-}};
-    --border-radius-s: ${_ref35 => {
-  let {
-    theme
-  } = _ref35;
-  return theme.borderRadiusS;
-}};
-    --border-radius: ${_ref36 => {
-  let {
-    theme
-  } = _ref36;
-  return theme.borderRadius;
-}};
-    --border-radius-l: ${_ref37 => {
-  let {
-    theme
-  } = _ref37;
-  return theme.borderRadiusL;
-}};
-    --border-radius-round: ${_ref38 => {
-  let {
-    theme
-  } = _ref38;
-  return theme.borderRadiusRound;
-}};
-
-    --spacing-xs: ${_ref39 => {
-  let {
-    theme
-  } = _ref39;
-  return theme.spacerXS;
-}};
-    --spacing-s: ${_ref40 => {
-  let {
-    theme
-  } = _ref40;
-  return theme.spacerS;
-}};
-    --spacing: ${_ref41 => {
-  let {
-    theme
-  } = _ref41;
-  return theme.spacer;
-}};
-    --spacing-l: ${_ref42 => {
-  let {
-    theme
-  } = _ref42;
-  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;