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

package/src/layout/Container.js

@@ -1,48 +0,0 @@
-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

@@ -1,32 +0,0 @@
-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

@@ -1,48 +0,0 @@
-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

@@ -1,69 +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,
-  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

@@ -1,17 +0,0 @@
-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

@@ -1,45 +0,0 @@
-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

@@ -1,261 +0,0 @@
-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

@@ -1,9 +0,0 @@
-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

@@ -1,9 +0,0 @@
-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

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

package/src/link/LinkSpan.js

@@ -1,44 +0,0 @@
-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

@@ -1,27 +0,0 @@
-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 };

package/src/link/__test__/LinkSpan.test.js

@@ -1,52 +0,0 @@
-import { fireEvent, render, screen } from '@testing-library/react';
-import LinkSpan from '../LinkSpan';
-import 'jest-styled-components';
-
-describe('Test LinkSpan Component', () => {
-  test('render default component', () => {
-    render(<LinkSpan>Link Text</LinkSpan>);
-
-    const linkSpan = screen.getByText('Link Text');
-    expect(linkSpan).toBeInTheDocument();
-    expect(linkSpan).toHaveStyle({
-      fontSize: '9rem',
-      color: 'rgba(255, 255, 255, 0.5)',
-    });
-  });
-
-  test('hover', () => {
-    render(<LinkSpan>Link Text</LinkSpan>);
-
-    const linkSpan = screen.getByText('Link Text');
-    expect(linkSpan).toHaveStyleRule('border-bottom', '1px solid #3e5fff', {
-      modifier: '&:hover:after',
-    });
-  });
-
-  test('click', () => {
-    const mockfn = jest.fn();
-    render(<LinkSpan onClick={mockfn}>Link Text</LinkSpan>);
-
-    const linkSpan = screen.getByText('Link Text');
-    fireEvent.click(linkSpan);
-    expect(mockfn).toHaveBeenCalledTimes(1);
-  });
-
-  test('variant', () => {
-    render(
-      <LinkSpan fontSmall light>
-        Link Text
-      </LinkSpan>,
-    );
-
-    const linkSpan = screen.getByText('Link Text');
-    expect(linkSpan).toBeInTheDocument();
-    expect(linkSpan).toHaveStyle({
-      fontSize: '1rem',
-      color: '#fff',
-    });
-    expect(linkSpan).toHaveStyleRule('border-bottom', '1px solid #e6e6e6', {
-      modifier: '&:hover:after',
-    });
-  });
-});

package/src/link/index.js

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