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

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/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';