@cashub/ui 0.48.28 → 0.49.0-beta.0

package/src/layout/AsideHeader.jsx

@@ -0,0 +1,27 @@
+import styled from 'styled-components';
+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 }) => {
+  return (
+    <Brand>
+      {hasSidebar && <MenuIcon theme={theme} toggleSidebar={toggleSidebar} />}
+      {logo && <Logo src={logo} />}
+    </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/src/layout/Backdrop.js

@@ -0,0 +1,13 @@
+import styled from 'styled-components';
+import { BaseBackdrop } from '../backdrop';
+import media from '../styles/mixin/media';
+
+const Backdrop = styled(BaseBackdrop)`
+  visibility: hidden;
+
+  ${media.tablet`
+    visibility: ${({ $display }) => ($display === true ? 'visible' : 'hidden')};
+  `}
+`;
+
+export default Backdrop;

package/src/layout/Container.js

@@ -0,0 +1,48 @@
+import styled, { css } from 'styled-components';
+import headerStyle from '../styles/config/header.style';
+import sidebarStyle from '../styles/config/sidebar.style';
+import media from '../styles/mixin/media';
+import bgMainRegistry from './bgMainRegistry';
+
+const Container = styled.div`
+  transition: 0.3s;
+  width: 100%;
+  padding: calc(${headerStyle.height} + var(--spacing)) var(--spacing)
+    var(--spacing);
+  background-color: var(--color-background1);
+  ${({ theme }) => {
+    if (theme?.hideMainDecoration) {
+      return '';
+    }
+    const bgKey = theme?.bgMainKey || 'default';
+    const bgImage = bgMainRegistry[bgKey];
+    return `
+      background-image: url(${bgImage});
+      background-size: cover;
+      background-repeat: no-repeat;
+      background-position: center;
+      background-attachment: fixed;
+    `;
+  }}
+  ${({ hasSidebar, $display }) => {
+    return (
+      hasSidebar === true &&
+      css`
+        width: calc(
+          100% -
+            ${$display === true
+              ? sidebarStyle.open.width
+              : sidebarStyle.close.width}
+        );
+        margin-left: ${$display === true
+          ? sidebarStyle.open.width
+          : sidebarStyle.close.width};
+        ${media.tablet`
+        width: 100%;
+        margin-left: 0;
+      `}
+      `
+    );
+  }}
+`;
+export default Container;

package/src/layout/Footer.js

@@ -0,0 +1,32 @@
+import styled, { css } from 'styled-components';
+import sidebarStyle from '../styles/config/sidebar.style';
+import media from '../styles/mixin/media';
+
+const Footer = styled.footer`
+  transition: 0.3s;
+  border-top: var(--border-width) solid var(--border-color);
+  color: var(--font-on-mute);
+  height: 64px;
+  line-height: 64px;
+  font-size: var(--font-body2);
+  padding: 0 var(--spacing);
+
+  ${({ hasSidebar }) => {
+    return hasSidebar === true && css`
+      margin: 0 var(--spacing) 0 calc(var(--spacing) + ${sidebarStyle.close.width});
+
+      ${media.tablet`
+        margin:0 ;
+      `}
+    `;
+  }}
+
+  ${({ $display }) =>
+    $display &&
+    css`
+      margin: 0 var(--spacing) 0
+        calc(var(--spacing) + ${sidebarStyle.open.width});
+    `}
+`;
+
+export default Footer;

package/src/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/src/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/src/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/src/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;

package/src/layout/Sidebar.jsx

@@ -0,0 +1,261 @@
+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, 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 = ({
+  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
+          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, 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}>
+        {isComponent ? (
+          <IconWrapper><IconComponent /></IconWrapper>
+        ) : (
+          <img crossOrigin='anonymous' src={IconComponent} alt={`${name} icon`} width='24px' />
+        )}
+        <span>{trans(name)}</span>
+      </MenuItemLink>
+    </MenuItem>
+  );
+};
+
+const MenuListWithSubMenu = ({
+  path,
+  name,
+  icon,
+  iconKey,
+  child,
+  active,
+  currentPath,
+  $display,
+  hoverDisplay,
+  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}>
+          {IconComponent ? (
+            isComponent ? (
+              <IconWrapper><IconComponent /></IconWrapper>
+            ) : (
+              <img crossOrigin='anonymous' src={IconComponent} 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 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(--color-text-sidebar);
+    font-size: var(--font-body1);
+  }
+  li {
+    transition: 0.3s;
+    &: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-sidebar);
+    `};
+`;
+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-arrow-sidebar);
+    ${({ 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-sidebar);
+      `};
+  }
+`;
+const EmptyIcon = styled.span`
+  width: 24px;
+  height: 24px;
+  margin-right: var(--spacing);
+  flex: 0 0 24px;
+`;
+export default Sidebar;

package/src/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/src/layout/bgMainRegistry.js

@@ -0,0 +1,9 @@
+import bgMainDefault from '../assets/images/bg-main.png';
+import bgMainVivid from '../assets/images/bg-main-vivid.png';
+
+const bgMainRegistry = {
+  default: bgMainDefault,
+  vivid: bgMainVivid,
+};
+
+export default bgMainRegistry;

package/src/layout/index.js

@@ -0,0 +1 @@
+export { default as Layout } from './Layout';

package/src/link/LinkSpan.js

@@ -0,0 +1,44 @@
+import styled from 'styled-components';
+
+const LinkSpan = ({ children, ...props }) => {
+  return <Link {...props}>{children}</Link>;
+};
+
+const Link = styled.span.attrs((props) => {
+  return {
+    fontSize: props.fontSmall ? '1rem' : '1.5rem',
+    color: props.light
+      ? 'var(--font-on-background)'
+      : 'rgba(255, 255, 255, 0.5)',
+    borderColor: props.light ? 'var(--border-color)' : '#3e5fff',
+  };
+})`
+  font-size: ${({ fontSize }) => fontSize};
+  line-height: 1.5;
+  font-weight: 500;
+  color: ${({ color }) => color};
+  cursor: pointer;
+  position: relative;
+  display: inline-block;
+
+  &:after {
+    display: block;
+    content: '';
+    position: absolute;
+    bottom: 0;
+    top: 1rem;
+    left: 0;
+    width: 0%;
+    transition: width 0.3s ease;
+  }
+
+  &:hover {
+    &:after {
+      width: 100%;
+      border-bottom: 1px solid ${({ borderColor }) => borderColor};
+      opacity: 0.75;
+    }
+  }
+`;
+
+export default LinkSpan;

package/src/link/__stories__/LinkSpan.stories.js

@@ -0,0 +1,27 @@
+import LinkSpan from '../LinkSpan';
+
+const metadata = {
+  title: 'Link/LinkSpan',
+  component: LinkSpan,
+  argTypes: {
+    fontSmall: {
+      description: 'text size',
+    },
+    light: {
+      description: 'control text color and borderColor',
+    },
+  },
+};
+
+const Template = (args) => {
+  return <LinkSpan {...args}>LinkSpan Text</LinkSpan>;
+};
+
+const Default = Template.bind({});
+Default.args = {
+  fontSmall: false,
+  light: false,
+};
+
+export default metadata;
+export { Default };