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

package/src/select/subComponent/SelectedMultipleCount.js

@@ -1,42 +0,0 @@
-import styled from 'styled-components';
-
-const SelectedMultipleCount = ({ placeholder, firstSelectedText, count }) => {
-  const displayLabel = count === 0 ? placeholder : firstSelectedText;
-
-  return (
-    <Wrapper>
-      <Label>{displayLabel}</Label>
-      {count > 1 && <CountBadge>{count}</CountBadge>}
-    </Wrapper>
-  );
-};
-
-const Wrapper = styled.span`
-  display: flex;
-  align-items: center;
-  width: 100%;
-  min-width: 0;
-`;
-
-const Label = styled.span`
-  color: var(--font-on-background);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  min-width: 0;
-  flex: 1 1 auto;
-`;
-
-const CountBadge = styled.span`
-  flex-shrink: 0;
-  display: inline-block;
-  margin-left: 6px;
-  padding: 0 6px;
-  border-radius: var(--border-radius-l);
-  background: var(--color-primary);
-  color: #fff;
-  font-size: var(--font-caption);
-  line-height: 18px;
-`;
-
-export default SelectedMultipleCount;

package/src/select/subComponent/SelectedMultipleTags.js

@@ -1,41 +0,0 @@
-import styled from 'styled-components';
-import { FaTimes } from 'react-icons/fa';
-
-const SelectedMultipleTags = ({ content, onClick, disabled }) => {
-  return (
-    <Selected $disabled={disabled}>
-      {!disabled && (
-        <span onClick={onClick} data-testid='removeOption'>
-          <FaTimes />
-        </span>
-      )}
-      {content}
-    </Selected>
-  );
-};
-
-const Selected = styled.div`
-  align-items: center;
-  display: flex;
-  background: var(--color-background3);
-  border-radius: var(--border-radius-l);
-  padding: 0.25rem calc(var(--spacing-xs) + 4px);
-  margin: 4px 10px 4px 0;
-  color: var(--font-on-background);
-  font-weight: var(--font-normal);
-  word-break: break-all;
-
-  > span {
-    display: flex;
-    align-items: center;
-
-    > svg {
-      margin-right: var(--spacing-xs);
-      color: var(--font-on-background);
-    }
-  }
-
-  ${({ $disabled }) => $disabled && 'cursor: not-allowed;opacity: 0.5;'}
-`;
-
-export default SelectedMultipleTags;

package/src/select/subComponent/SelectedMultipleText.js

@@ -1,61 +0,0 @@
-import { useRef, useState } from 'react';
-import styled from 'styled-components';
-
-const SelectedMultipleText = ({ children }) => {
-  const textRef = useRef(null);
-  const [position, setPosition] = useState({ x: 0, y: 0 });
-  const [show, setShow] = useState(false);
-
-  const handleMouseEnter = () => {
-    const element = textRef.current;
-    // show tooltip on content width exceeds container width only
-    if (element.scrollWidth > element.clientWidth) {
-      const rect = element.getBoundingClientRect();
-      setPosition({ x: rect.left, y: rect.bottom + 8 });
-      setShow(true);
-    }
-  };
-
-  return (
-    <>
-      <Text
-        ref={textRef}
-        onMouseEnter={handleMouseEnter}
-        onMouseLeave={() => {
-          setShow(false);
-        }}
-      >
-        {children}
-      </Text>
-      {show && (
-        <Tooltip style={{ left: position.x, top: position.y }}>
-          {children}
-        </Tooltip>
-      )}
-    </>
-  );
-};
-
-const Text = styled.span`
-  color: var(--font-on-background);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-`;
-
-const Tooltip = styled.div`
-  position: fixed;
-  border: 1px solid var(--border-color);
-  color: var(--font-on-background);
-  background: var(--color-background2);
-  box-shadow: var(--box-shadow);
-  border-radius: calc(var(--border-radius) / 2);
-  padding: var(--spacing-xs);
-  font-size: var(--font-body1);
-  font-weight: var(--font-normal);
-  z-index: 90;
-  width: max-content;
-  max-width: 50vw;
-`;
-
-export default SelectedMultipleText;

package/src/select/subComponent/SelectedSingle.js

@@ -1,12 +0,0 @@
-import styled from 'styled-components';
-
-const SelectedSingle = styled.div`
-  display: flex;
-  align-items: center;
-  color: var(--font-on-background);
-  overflow: hidden;
-  text-overflow: ellipsis;
-`;
-SelectedSingle.displayName = 'SelectedSingle';
-
-export default SelectedSingle;

package/src/styles/GlobalStyle.js

@@ -1,110 +0,0 @@
-import { createGlobalStyle } from 'styled-components';
-import 'normalize.css';
-import '../assets/css/global.css';
-const GlobalStyle = createGlobalStyle`
-  body {
-    --color-white: ${({ theme }) => theme.colorWhite};
-    --color-dark: ${({ theme }) => theme.colorDark};
-    --color-grey: ${({ theme }) => theme.colorGrey};
-    --color-primary: ${({ theme }) => theme.colorPrimary};
-    --color-success: ${({ theme }) => theme.colorSuccess};
-    --color-warning: ${({ theme }) => theme.colorWarning};
-    --color-danger: ${({ theme }) => theme.colorDanger};
-    --color-hover: ${({ theme }) => theme.colorHover};
-    --color-active: ${({ theme }) => theme.colorActive};
-    --color-hover-sidebar: ${({ theme }) => theme.colorHoverSidebar || theme.colorHover};
-    --color-active-sidebar: ${({ theme }) => theme.colorActiveSidebar || theme.colorActive};
-    --color-text-sidebar: ${({ theme }) => theme.colorTextSidebar || theme.fontOnBg};
-    --color-icon-header: ${({ theme }) => theme.colorIconHeader || theme.fontOnBg};
-    --color-arrow-sidebar: ${({ theme }) => theme.colorArrowSidebar || theme.colorPrimary};
-    --color-scroll-bar: ${({ theme }) => theme.scrollBarColor};
-    --color-background1: ${({ theme }) => theme.bgColor1};
-    --color-background2: ${({ theme }) => theme.bgColor2};
-    --color-background3: ${({ theme }) => theme.bgColor3};
-    --color-background4: ${({ theme }) => theme.bgColor4};
-    --color-backdrop: ${({ theme }) => theme.backdropBg};
-    --font-h1: ${({ theme }) => theme.fontH1};
-    --font-h2: ${({ theme }) => theme.fontH2};
-    --font-h3: ${({ theme }) => theme.fontH3};
-    --font-body1: ${({ theme }) => theme.fontBody1};
-    --font-body2: ${({ theme }) => theme.fontBody2};
-    --font-button: ${({ theme }) => theme.fontButton};
-    --font-caption: ${({ theme }) => theme.fontCaption};
-    --font-family: ${({ theme }) => theme.fontFamily};
-    --font-normal: ${({ theme }) => theme.fontWeightNormal};
-    --font-bold: ${({ theme }) => theme.fontWeightBold};
-    --font-on-primary: ${({ theme }) => theme.fontOnPrimary};
-    --font-on-success: ${({ theme }) => theme.fontOnSuccess};
-    --font-on-warning: ${({ theme }) => theme.fontOnWarning};
-    --font-on-danger: ${({ theme }) => theme.fontOnDanger};
-    --font-on-background: ${({ theme }) => theme.fontOnBg};
-    --font-on-mute: ${({ theme }) => theme.fontMutedColor};
-    --box-shadow: ${({ theme }) => theme.boxShadow};
-    --border-color: ${({ theme }) => theme.borderColor};
-    --border-color-transparent: ${({ theme }) => theme.borderColorTransparent};
-    --border-width: ${({ theme }) => theme.borderWidth};
-    --border-radius-s: ${({ theme }) => theme.borderRadiusS};
-    --border-radius: ${({ theme }) => theme.borderRadius};
-    --border-radius-l: ${({ theme }) => theme.borderRadiusL};
-    --border-radius-round: ${({ theme }) => theme.borderRadiusRound};
-    --spacing-xs: ${({ theme }) => theme.spacerXS};
-    --spacing-s: ${({ theme }) => theme.spacerS};
-    --spacing: ${({ theme }) => theme.spacer};
-    --spacing-l: ${({ theme }) => 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);
-  }
-`;
-export default GlobalStyle;

package/src/styles/config/breakpoint.style.js

@@ -1,8 +0,0 @@
-const breakpoints = {
-  desktop: 1920,
-  laptop: 1200,
-  tablet: 768,
-  mobile: 576,
-};
-
-export default breakpoints;

package/src/styles/config/header.style.js

@@ -1,5 +0,0 @@
-const headerStyle = {
-  height: '64px',
-};
-
-export default headerStyle;

package/src/styles/config/sidebar.style.js

@@ -1,12 +0,0 @@
-const sidebarStyle = {
-  close: {
-    width: '72px',
-    height: '100%',
-  },
-  open: {
-    width: '316px',
-    height: '100%',
-  },
-};
-
-export default sidebarStyle;

package/src/styles/index.js

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

package/src/styles/mixin/backgroundColor.js

@@ -1,15 +0,0 @@
-import { css } from 'styled-components';
-
-const backgroundColor = css`
-  ${({ primary }) => primary && 'background-color: var(--color-primary);'}
-
-  ${({ success }) => success && 'background-color: var(--color-success);'}
-
-  ${({ warning }) => warning && 'background-color: var(--color-warning);'}
-
-  ${({ danger }) => danger && 'background-color: var(--color-danger);'}
-
-  ${({ grey }) => grey && 'background-color: var(--color-grey);'}
-`;
-
-export default backgroundColor;

package/src/styles/mixin/borderColor.js

@@ -1,15 +0,0 @@
-import { css } from 'styled-components';
-
-const borderColor = css`
-  ${({ primary }) => primary && 'border-color: var(--color-primary);'}
-
-  ${({ success }) => success && 'border-color: var(--color-success);'}
-
-  ${({ warning }) => warning && 'border-color: var(--color-warning);'}
-
-  ${({ danger }) => danger && 'border-color: var(--color-danger);'}
-
-  ${({ grey }) => grey && 'border-color: var(--color-grey);'}
-`;
-
-export default borderColor;

package/src/styles/mixin/color.js

@@ -1,15 +0,0 @@
-import { css } from 'styled-components';
-
-const color = css`
-  ${({ primary }) => primary && 'color: var(--color-primary);'}
-
-  ${({ success }) => success && 'color: var(--color-success);'}
-
-  ${({ warning }) => warning && 'color: var(--color-warning);'}
-
-  ${({ danger }) => danger && 'color: var(--color-danger);'}
-
-  ${({ grey }) => grey && 'color: var(--color-grey);'}
-`;
-
-export default color;

package/src/styles/mixin/colorOnBackground.js

@@ -1,13 +0,0 @@
-import { css } from 'styled-components';
-
-const colorOnBackground = css`
-  ${({ primary }) => primary && 'color: var(--font-on-primary);'}
-
-  ${({ success }) => success && 'color: var(--font-on-success);'}
-
-  ${({ warning }) => warning && 'color: var(--font-on-warning);'}
-
-  ${({ danger }) => danger && 'color: var(--font-on-danger);'}
-`;
-
-export default colorOnBackground;

package/src/styles/mixin/inputPlaceholder.js

@@ -1,26 +0,0 @@
-import { css } from 'styled-components';
-
-const inputPlaceholder = (...args) => {
-  return css`
-    ::placeholder {
-      ${css(...args)}
-    }
-
-    ::-moz-placeholder {
-      ${css(...args)}
-      opacity: 1;
-    }
-
-    // Internet Explorer 10+
-    :-ms-input-placeholder {
-      ${css(...args)}
-    }
-
-    // Safari and Chrome
-    ::-webkit-input-placeholder {
-      ${css(...args)}
-    }
-  `;
-};
-
-export default inputPlaceholder;

package/src/styles/mixin/media.js

@@ -1,14 +0,0 @@
-import { css } from 'styled-components';
-import breakpoints from '../config/breakpoint.style';
-
-// Iterate through the breakpoint and create a media template
-const media = Object.keys(breakpoints).reduce((func, label) => {
-  func[label] = (...args) => css`
-    @media (max-width: ${breakpoints[label]}px) {
-      ${css(...args)}
-    }
-  `;
-  return func;
-}, {});
-
-export default media;

package/src/styles/mixin/rounded.js

@@ -1,12 +0,0 @@
-import { css } from 'styled-components';
-
-const rounded = css`
-  ${({ roundedS }) => roundedS && 'border-radius: var(--border-radius-s);'}
-
-  ${({ rounded }) => rounded && 'border-radius: var(--border-radius);'}
-
-  ${({ roundedCircle }) =>
-    roundedCircle && 'border-radius: var(--border-radius-round);'}
-`;
-
-export default rounded;

package/src/styles/mixin/scrollbar.js

@@ -1,26 +0,0 @@
-import { css } from 'styled-components';
-
-const scrollbar = ({ size }) => {
-  let scrollbarWidth = '12px';
-  let thumbWidth = '4px';
-  if (size === 'large') {
-    scrollbarWidth = '24px';
-    thumbWidth = '8px';
-  }
-
-  return css`
-    &::-webkit-scrollbar {
-      width: ${scrollbarWidth};
-      height: ${scrollbarWidth};
-    }
-
-    &::-webkit-scrollbar-thumb {
-      background-color: var(--color-scroll-bar);
-      background-clip: padding-box;
-      border: ${thumbWidth} solid transparent;
-      border-radius: var(--border-radius);
-    }
-  `;
-};
-
-export default scrollbar;

package/src/styles/theme/dark.theme.js

@@ -1,101 +0,0 @@
-// Currently, some style is all same for all viewport size
-// Common color style
-const colorStyle = {
-  colorWhite: '#ffffff',
-  colorDark: '#000000',
-  colorGrey: '#5b5f6f',
-  colorPrimary: '#597EF7',
-  colorSuccess: '#11D8CD',
-  colorWarning: '#FFCA7A',
-  colorDanger: '#F495A1',
-  colorHover: 'rgba(89, 126, 247, 0.2)',
-  colorActive: 'rgba(89, 126, 247, 0.2)',
-  scrollBarColor: 'rgba(89, 126, 247, 0.3)',
-  bgColor1: '#13142e',
-  bgColor2: '#222143',
-  bgColor3: '#2d2a5d',
-  bgColor4: '#222143',
-  backdropBg: 'rgba(0, 0, 0, 0.75)',
-  useLightBrand: true,
-  hideMainDecoration: true,
-};
-
-// Common font style
-const fontStyle = {
-  fontH1: '2.25rem',
-  fontH2: '1.5rem',
-  fontH3: '1.25rem',
-  fontBody1: '1rem',
-  fontBody2: '0.875rem',
-  fontButton: '0.875rem',
-  fontCaption: '0.75rem',
-  fontFamily: 'Helvetica',
-  fontWeightNormal: '400',
-  fontWeightBold: 'bold',
-  fontOnPrimary: colorStyle.colorWhite,
-  fontOnSuccess: colorStyle.colorWhite,
-  fontOnWarning: colorStyle.colorWhite,
-  fontOnDanger: colorStyle.colorWhite,
-  fontOnBg: colorStyle.colorWhite,
-  fontMutedColor: 'rgba(255, 255, 255, 0.5)',
-};
-
-// Theme stylesheet
-const darkTheme = {
-  desktop: {
-    ...fontStyle,
-    ...colorStyle,
-
-    boxShadow: '0px 0px 8px rgba(91, 95, 111, 0.5)',
-    borderColor: colorStyle.colorGrey,
-    borderColorTransparent: `${colorStyle.colorGrey}80`,
-    borderWidth: '1px',
-    borderRadiusS: '0.5rem',
-    borderRadius: '1rem',
-    borderRadiusL: '2rem',
-    borderRadiusRound: '50%',
-
-    spacerXS: '0.5rem',
-    spacerS: '1rem',
-    spacer: '1.5rem',
-    spacerL: '2rem',
-  },
-  tablet: {
-    ...fontStyle,
-    ...colorStyle,
-
-    boxShadow: '0px 0px 8px rgba(91, 95, 111, 0.5)',
-    borderColor: colorStyle.colorGrey,
-    borderColorTransparent: `${colorStyle.colorGrey}80`,
-    borderWidth: '1px',
-    borderRadiusS: '0.5rem',
-    borderRadius: '1rem',
-    borderRadiusL: '2rem',
-    borderRadiusRound: '50%',
-
-    spacerXS: '0.5rem',
-    spacerS: '0.75rem',
-    spacer: '1rem',
-    spacerL: '1.25rem',
-  },
-  mobile: {
-    ...fontStyle,
-    ...colorStyle,
-
-    boxShadow: '0px 0px 8px rgba(91, 95, 111, 0.5)',
-    borderColor: colorStyle.colorGrey,
-    borderColorTransparent: `${colorStyle.colorGrey}80`,
-    borderWidth: '1px',
-    borderRadiusS: '0.5rem',
-    borderRadius: '1rem',
-    borderRadiusL: '2rem',
-    borderRadiusRound: '50%',
-
-    spacerXS: '0.5rem',
-    spacerS: '0.75rem',
-    spacer: '1rem',
-    spacerL: '1.25rem',
-  },
-};
-
-export default darkTheme;

package/src/styles/theme/ember.theme.js

@@ -1,94 +0,0 @@
-const colorStyle = {
-  colorWhite: '#ffffff',
-  colorDark: '#2A1416',
-  colorGrey: '#A38A8A',
-  colorPrimary: '#D9211E',
-  colorSuccess: '#3A86BD',
-  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)',
-  bgColor1: '#FAF5F5',
-  bgColor2: '#FFFFFF',
-  bgColor3: '#F3E9E9',
-  bgColor4: 'linear-gradient(90deg, #E62B27 0%, #D9211E 45%, #C60E27 100%)',
-  backdropBg: 'rgba(0, 0, 0, 0.75)',
-  useModernIcons: true,
-  useLightBrand: true,
-  bgMainKey: 'vivid',
-  colorHoverSidebar: 'rgba(255, 255, 255, 0.15)',
-  colorActiveSidebar: 'rgba(255, 255, 255, 0.22)',
-  colorTextSidebar: '#FFFFFF',
-  colorIconHeader: '#FFFFFF',
-  colorArrowSidebar: '#FFFFFF',
-};
-const fontStyle = {
-  fontH1: '2.25rem',
-  fontH2: '1.5rem',
-  fontH3: '1.25rem',
-  fontBody1: '1rem',
-  fontBody2: '0.875rem',
-  fontButton: '0.875rem',
-  fontCaption: '0.75rem',
-  fontFamily: 'Helvetica',
-  fontWeightNormal: '400',
-  fontWeightBold: 'bold',
-  fontOnPrimary: colorStyle.colorWhite,
-  fontOnSuccess: colorStyle.colorWhite,
-  fontOnWarning: colorStyle.colorDark,
-  fontOnDanger: colorStyle.colorWhite,
-  fontOnBg: colorStyle.colorDark,
-  fontMutedColor: 'rgba(42, 20, 22, 0.6)',
-};
-const emberTheme = {
-  desktop: {
-    ...fontStyle,
-    ...colorStyle,
-    boxShadow: '0px 0px 8px rgba(91, 95, 111, 0.5)',
-    borderColor: colorStyle.colorGrey,
-    borderColorTransparent: `${colorStyle.colorGrey}80`,
-    borderWidth: '1px',
-    borderRadiusS: '0.5rem',
-    borderRadius: '1rem',
-    borderRadiusL: '2rem',
-    borderRadiusRound: '50%',
-    spacerXS: '0.5rem',
-    spacerS: '1rem',
-    spacer: '1.5rem',
-    spacerL: '2rem',
-  },
-  tablet: {
-    ...fontStyle,
-    ...colorStyle,
-    boxShadow: '0px 0px 8px rgba(91, 95, 111, 0.5)',
-    borderColor: colorStyle.colorGrey,
-    borderColorTransparent: `${colorStyle.colorGrey}80`,
-    borderWidth: '1px',
-    borderRadiusS: '0.5rem',
-    borderRadius: '1rem',
-    borderRadiusL: '2rem',
-    borderRadiusRound: '50%',
-    spacerXS: '0.5rem',
-    spacerS: '0.75rem',
-    spacer: '1rem',
-    spacerL: '1.25rem',
-  },
-  mobile: {
-    ...fontStyle,
-    ...colorStyle,
-    boxShadow: '0px 0px 8px rgba(91, 95, 111, 0.5)',
-    borderColor: colorStyle.colorGrey,
-    borderColorTransparent: `${colorStyle.colorGrey}80`,
-    borderWidth: '1px',
-    borderRadiusS: '0.5rem',
-    borderRadius: '1rem',
-    borderRadiusL: '2rem',
-    borderRadiusRound: '50%',
-    spacerXS: '0.5rem',
-    spacerS: '0.75rem',
-    spacer: '1rem',
-    spacerL: '1.25rem',
-  },
-};
-export default emberTheme;