@cashub/ui 0.48.28 → 0.49.0-beta.0

package/src/select/subComponent/SelectedMultipleCount.js

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

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

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

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

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

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

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

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

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

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

package/src/styles/index.js

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

package/src/styles/mixin/backgroundColor.js

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

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

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

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

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

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

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

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

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

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