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

package/src/animate/__test__/Loader.test.js

@@ -1,42 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import 'jest-styled-components';
-import Loader from '../Loader';
-
-describe('Test Loader Component', () => {
-  test('render component', () => {
-    render(<Loader text='Loading...' />);
-
-    const Text = screen.getByText('Loading...');
-    expect(Text).toBeVisible();
-  });
-
-  test('stop effect', () => {
-    const { rerender } = render(<Loader $loading={true} text='Loading...' />);
-
-    const Text = screen.getByText('Loading...');
-    expect(Text).toBeVisible();
-
-    rerender(<Loader $loading={false} text='Loading...' />);
-    expect(Text).not.toBeVisible();
-  });
-
-  test('variant style', () => {
-    const { container, rerender } = render(
-      <Loader $loading={true} text='Loading...' />
-    );
-
-    const loaderElement = container.firstChild;
-    expect(loaderElement).not.toHaveStyle('background: transparent;');
-    expect(loaderElement).not.toHaveStyleRule(
-      'background: var(--color-background1);'
-    );
-
-    rerender(<Loader $loading={true} transparent text='Loading...' />);
-    expect(loaderElement).toHaveStyle('background: transparent;');
-
-    rerender(<Loader $loading={true} backgroundFill text='Loading...' />);
-    expect(loaderElement).toHaveStyleRule(
-      'background: var(--color-background1);'
-    );
-  });
-});

package/src/animate/__test__/NumberCounter.test.js

@@ -1,71 +0,0 @@
-import { render, screen, act, waitFor } from '@testing-library/react';
-import NumberCounter from '../NumberCounter';
-
-describe('Test NumberCounter Component', () => {
-  beforeEach(() => {
-    jest.useFakeTimers();
-  });
-
-  afterEach(() => {
-    jest.useRealTimers();
-  });
-
-  test('ascend counter', async () => {
-    render(<NumberCounter start={0} end={100} duration={1000} />);
-
-    const startNumber = screen.getByText('0');
-    expect(startNumber).toBeVisible();
-
-    // only evenly divisible number can finished in duration
-    act(() => {
-      jest.advanceTimersByTime(1000);
-    });
-
-    await waitFor(() => {
-      const endNumber = screen.getByText('100');
-      expect(endNumber).toBeVisible();
-    });
-  });
-
-  test('descend counter', async () => {
-    render(<NumberCounter start={125} end={0} duration={1000} />);
-
-    const startNumber = screen.getByText('125');
-    expect(startNumber).toBeVisible();
-
-    act(() => {
-      jest.runAllTimers();
-    });
-
-    await waitFor(() => {
-      const endNumber = screen.getByText('0');
-      expect(endNumber).toBeVisible();
-    });
-  });
-
-  test('invalid number', () => {
-    render(<NumberCounter duration={1000} />);
-
-    const defaultNumber = screen.getByText('0');
-    expect(defaultNumber).toBeVisible();
-
-    act(() => {
-      jest.advanceTimersByTime(1000);
-    });
-
-    expect(defaultNumber).toBeVisible();
-  });
-
-  test('same number', () => {
-    render(<NumberCounter start={100} end={100} duration={1000} />);
-
-    const defaultNumber = screen.getByText('100');
-    expect(defaultNumber).toBeVisible();
-
-    act(() => {
-      jest.advanceTimersByTime(1000);
-    });
-
-    expect(defaultNumber).toBeVisible();
-  });
-});

package/src/animate/__test__/PulseRing.test.js

@@ -1,37 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import 'jest-styled-components';
-import PulseRing from '../PulseRing';
-
-jest.mock('../../keyframe/Pulse', () => {
-  return 'Pulse';
-});
-
-describe('Test PulseRing Component', () => {
-  test('stopped', () => {
-    render(<PulseRing play={false} />);
-
-    const PulseRingElement = screen.getByRole('presentation');
-    expect(PulseRingElement).not.toHaveStyleRule(
-      'animation',
-      'Pulse 3.5s ease-out',
-    );
-    expect(PulseRingElement).not.toHaveStyleRule(
-      'animation-iteration-count',
-      'infinite',
-    );
-  });
-
-  test('play', () => {
-    render(<PulseRing play={true} />);
-
-    const PulseRingElement = screen.getByRole('presentation');
-    expect(PulseRingElement).toHaveStyleRule(
-      'animation',
-      'Pulse 3.5s ease-out',
-    );
-    expect(PulseRingElement).toHaveStyleRule(
-      'animation-iteration-count',
-      'infinite',
-    );
-  });
-});

package/src/animate/__test__/Spinner.test.js

@@ -1,18 +0,0 @@
-import { render } from '@testing-library/react';
-import 'jest-styled-components';
-import Spinner from '../Spinner';
-
-jest.mock('../../keyframe/Spin', () => {
-  return 'Spin';
-});
-
-describe('Test Spinner Component', () => {
-  test('render', () => {
-    const { container } = render(<Spinner />);
-
-    expect(container.firstChild).toHaveStyleRule(
-      'animation',
-      '1s Spin infinite linear'
-    );
-  });
-});

package/src/animate/index.js

@@ -1,5 +0,0 @@
-export { default as Collapse } from './Collapse';
-export { default as Loader } from './Loader';
-export { default as NumberCounter } from './NumberCounter';
-export { default as PulseRing } from './PulseRing';
-export { default as Spinner } from './Spinner';

package/src/assets/css/autocomplete.css

@@ -1,16 +0,0 @@
-/**
- * Fix autocomplete style
- */
-input:-webkit-autofill,
-input:-webkit-autofill:hover,
-input:-webkit-autofill:focus,
-textarea:-webkit-autofill,
-textarea:-webkit-autofill:hover,
-textarea:-webkit-autofill:focus,
-select:-webkit-autofill,
-select:-webkit-autofill:hover,
-select:-webkit-autofill:focus {
-  transition: color 5000s ease-in-out 0s, background-color 5000s ease-in-out 0s;
-  box-shadow: 0 0 0px 100px var(--color-background2) inset;
-  -webkit-text-fill-color: var(--font-on-background);
-}

package/src/assets/css/font.css

@@ -1,4 +0,0 @@
-@font-face {
-  font-family: 'Helvetica';
-  src: url('../font/helvetica/Helvetica.ttf');
-}

package/src/assets/css/global.css

@@ -1,2 +0,0 @@
-@import './font.css';
-@import './autocomplete.css';

package/src/assets/icons/file.svg

@@ -1 +0,0 @@
-<svg height="512pt" viewBox="-56 0 512 512" width="512pt" xmlns="http://www.w3.org/2000/svg"><path d="m352.402344 64.265625h-176.734375c-3.980469 0-7.792969 1.582031-10.605469 4.394531l-96.402344 96.402344c-2.8125 2.8125-4.394531 6.625-4.394531 10.605469v289.199219c0 25.988281 21.144531 47.132812 47.132813 47.132812h241c25.992187 0 47.132812-21.144531 47.132812-47.132812v-353.46875c.003906-25.988282-21.140625-47.132813-47.128906-47.132813zm0 0" fill="#3ab4fb"/><path d="m399.535156 111.398438v353.472656c0 25.988281-21.148437 47.128906-47.136718 47.128906h-152.632813v-447.730469h152.632813c25.988281 0 47.136718 21.140625 47.136718 47.128907zm0 0" fill="#1d9cfd"/><path d="m288.132812 0h-176.730468c-3.980469 0-7.792969 1.582031-10.605469 4.394531l-96.402344 96.398438c-2.8125 2.8125-4.394531 6.628906-4.394531 10.605469v289.203124c0 25.988282 21.144531 47.132813 47.132812 47.132813h241c25.988282 0 47.132813-21.144531 47.132813-47.132813v-353.46875c0-25.988281-21.144531-47.132812-47.132813-47.132812zm0 0" fill="#eff6fe"/><g fill="#d9e4ef"><path d="m95.335938 351.332031h80.332031c8.28125 0 15-6.714843 15-15 0-8.28125-6.71875-15-15-15h-80.332031c-8.285157 0-15 6.71875-15 15 0 8.285157 6.714843 15 15 15zm0 0"/><path d="m335.265625 47.128906v353.472656c0 25.988282-21.136719 47.128907-47.128906 47.128907h-88.371094v-447.730469h88.371094c25.992187 0 47.128906 21.140625 47.128906 47.128906zm0 0"/><path d="m95.335938 222.800781h144.597656c8.285156 0 15-6.714843 15-15 0-8.285156-6.714844-15-15-15h-144.597656c-8.285157 0-15 6.714844-15 15 0 8.285157 6.714843 15 15 15zm0 0"/><path d="m95.335938 287.066406h144.597656c8.285156 0 15-6.714844 15-15s-6.714844-15-15-15h-144.597656c-8.285157 0-15 6.714844-15 15s6.714843 15 15 15zm0 0"/></g><path d="m254.9375 207.800781c0 8.277344-6.71875 15-15 15h-40.171875v-30h40.171875c8.28125 0 15 6.71875 15 15zm0 0" fill="#c1cedb"/><path d="m254.9375 272.070312c0 8.28125-6.71875 15-15 15h-40.171875v-30h40.171875c8.28125 0 15 6.710938 15 15zm0 0" fill="#c1cedb"/><path d="m95.335938 112.46875c9.445312 0 17.132812-7.6875 17.132812-17.132812v-95.335938h-1.070312c-3.976563 0-7.792969 1.582031-10.605469 4.394531l-96.398438 96.398438c-2.8125 2.8125-4.394531 6.628906-4.394531 10.605469v1.070312zm0 0" fill="#d9e4ef"/></svg>

package/src/backdrop/BaseBackdrop.js

@@ -1,13 +0,0 @@
-import styled from 'styled-components';
-
-const BaseBackdrop = styled.div`
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: var(--color-backdrop);
-  z-index: 50;
-`;
-
-export default BaseBackdrop;

package/src/backdrop/LoadingBackdrop.js

@@ -1,12 +0,0 @@
-import styled from 'styled-components';
-import BaseBackdrop from './BaseBackdrop';
-
-const LoadingBackdrop = styled(BaseBackdrop)`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  color: var(--color-primary);
-`;
-
-export default LoadingBackdrop;

package/src/backdrop/ModalBackdrop.js

@@ -1,10 +0,0 @@
-import styled from 'styled-components';
-import BaseBackdrop from './BaseBackdrop';
-
-const ModalBackdrop = styled(BaseBackdrop)`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-`;
-
-export default ModalBackdrop;

package/src/backdrop/__test__/BaseBackdrop.test.js

@@ -1,10 +0,0 @@
-import { render } from '@testing-library/react';
-import BaseBackdrop from '../BaseBackdrop';
-import 'jest-styled-components';
-
-test('render Backdrop', () => {
-  const { container } = render(<BaseBackdrop />);
-  const backdrop = container.firstChild;
-
-  expect(backdrop).toBeInTheDocument();
-});

package/src/backdrop/__test__/LoadingBackdrop.test.js

@@ -1,9 +0,0 @@
-import { render } from '@testing-library/react';
-import LoadingBackdrop from '../LoadingBackdrop';
-
-test('render LoadingBackdrop', () => {
-  const { container } = render(<LoadingBackdrop />);
-  const loadingBackdrop = container.firstChild;
-
-  expect(loadingBackdrop).toBeInTheDocument();
-});

package/src/backdrop/__test__/ModalBackdrop.test.js

@@ -1,8 +0,0 @@
-import { render } from '@testing-library/react';
-import ModalBackdrop from '../ModalBackdrop';
-
-test('render ModalBackdrop', () => {
-  const { container } = render(<ModalBackdrop />);
-
-  expect(container.firstChild).toBeInTheDocument();
-});

package/src/backdrop/index.js

@@ -1,3 +0,0 @@
-export { default as BaseBackdrop } from './BaseBackdrop';
-export { default as LoadingBackdrop } from './LoadingBackdrop';
-export { default as ModalBackdrop } from './ModalBackdrop';

package/src/badge/Badge.js

@@ -1,21 +0,0 @@
-import styled from 'styled-components';
-import color from '../styles/mixin/color';
-import borderColor from '../styles/mixin/borderColor';
-
-const Badge = styled.span`
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
-  height: auto;
-  width: auto;
-  font-size: inherit;
-  padding: 0.25rem 0.5rem;
-  margin: 0 var(--spacing-xs) var(--spacing-xs) 0;
-  border: var(--border-width) solid var(--border-color);
-  border-radius: var(--border-radius-l);
-
-  ${color}
-  ${borderColor}
-`;
-
-export default Badge;

package/src/badge/BadgeDot.js

@@ -1,13 +0,0 @@
-import styled from 'styled-components';
-import backgroundColor from '../styles/mixin/backgroundColor';
-
-const BadgeDot = styled.span`
-  display: inline-block;
-  height: 8px;
-  width: 8px;
-  border-radius: var(--border-radius);
-
-  ${backgroundColor}
-`;
-
-export default BadgeDot;

package/src/badge/BadgeFill.js

@@ -1,29 +0,0 @@
-import styled from 'styled-components';
-import backgroundColor from '../styles/mixin/backgroundColor';
-import colorOnBackground from '../styles/mixin/colorOnBackground';
-
-const BadgeFill = styled.span.attrs(() => ({
-  primary: true,
-}))`
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
-  height: auto;
-  width: auto;
-  border-radius: var(--border-radius-l);
-  font-size: 1rem;
-  padding: 0.5rem;
-  margin: 0;
-  color: var(--font-on-background);
-
-  ${backgroundColor}
-  ${colorOnBackground}
-
-  ${({ extraSmall }) => extraSmall && 'font-size: 0.75rem; padding: 0.125rem;'}
-
-  ${({ small }) => small && 'font-size: 1rem; padding: 0.25rem;'}
-
-  ${({ large }) => large && 'font-size: 2rem;'}
-`;
-
-export default BadgeFill;

package/src/badge/BadgeFillTriangle.js

@@ -1,76 +0,0 @@
-import { forwardRef } from 'react';
-import styled, { css } from 'styled-components';
-import colorOnBackground from '../styles/mixin/colorOnBackground';
-
-const fillColor = css`
-  ${({ primary }) => primary && 'fill: var(--color-primary);'}
-
-  ${({ success }) => success && 'fill: var(--color-success);'}
-
-  ${({ warning }) => warning && 'fill: var(--color-warning);'}
-
-  ${({ danger }) => danger && 'fill: var(--color-danger);'}
-
-  ${({ grey }) => grey && 'fill: var(--color-grey);'}
-`;
-
-const Wrapper = styled.span`
-  position: relative;
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
-  height: 2rem;
-  width: 2rem;
-  font-size: 1rem;
-  margin: 0;
-  color: var(--font-on-background);
-
-  ${colorOnBackground}
-
-  ${({ extraSmall }) =>
-    extraSmall && 'height: 1rem; width: 1rem; font-size: 0.62rem;'}
-
-  ${({ small }) => small && 'height: 1.5rem; width: 1.5rem;'}
-
-  ${({ large }) => large && 'height: 3rem; width: 3rem; font-size: 1.75rem;'}
-`;
-
-const TriangleSvg = styled.svg`
-  position: absolute;
-  top: 0;
-  left: 0;
-  height: 100%;
-  width: 100%;
-`;
-
-const TrianglePath = styled.path`
-  ${fillColor}
-`;
-
-const Content = styled.span`
-  position: relative;
-  display: inline-flex;
-  transform: translateY(0.2rem);
-
-  ${({ extraSmall }) => extraSmall && 'transform: translateY(0.1rem);'}
-
-  ${({ small }) => small && 'transform: translateY(0.15rem);'}
-
-  ${({ large }) => large && 'transform: translateY(0.3rem);'}
-`;
-
-const TRIANGLE_PATH =
-  'M12 2 C12.7 2 13.3 2.4 13.7 3 L22 18 C22.8 19.5 21.7 21 20 21 H4 C2.3 21 1.2 19.5 2 18 L10.3 3 C10.7 2.4 11.3 2 12 2Z';
-
-const BadgeFillTriangle = forwardRef(({ children, primary = true, ...rest }, ref) => (
-  <Wrapper ref={ref} primary={primary} {...rest}>
-    <TriangleSvg viewBox='1.7 2 20.6 19' aria-hidden='true' focusable='false'>
-      <TrianglePath primary={primary} {...rest} d={TRIANGLE_PATH} />
-    </TriangleSvg>
-    <Content {...rest}>{children}</Content>
-  </Wrapper>
-));
-
-BadgeFillTriangle.displayName = 'BadgeFillTriangle';
-
-export default BadgeFillTriangle;

package/src/badge/BadgeWithText.js

@@ -1,21 +0,0 @@
-import styled from 'styled-components';
-
-const BadgeWithText = ({ children }) => {
-  return <Wrapper>{children}</Wrapper>;
-};
-
-const Wrapper = styled.span`
-  display: inline-flex;
-  align-items: center;
-  margin-bottom: var(--spacing-s);
-
-  :not(:last-child) {
-    margin-right: var(--spacing-s);
-  }
-
-  > :first-child {
-    margin-right: var(--spacing-xs);
-  }
-`;
-
-export default BadgeWithText;

package/src/badge/__stories__/Badge.stories.js

@@ -1,47 +0,0 @@
-import Badge from '../Badge';
-
-const metadata = {
-  title: 'Badge/Badge',
-  component: Badge,
-  argTypes: {
-    children: {
-      description: 'status text',
-      control: 'radio',
-      options: ['Enable', 'Disabled', 'Unknown'],
-    },
-    primary: {
-      description: 'text and border color',
-    },
-    success: {
-      description: 'text and border color',
-    },
-    warning: {
-      description: 'text and border color',
-    },
-    danger: {
-      description: 'text and border color',
-    },
-    grey: {
-      description: 'text and border color',
-    },
-  },
-};
-
-const Template = (args) => (
-  <>
-    <Badge {...args}></Badge>
-  </>
-);
-
-const Default = Template.bind({});
-Default.args = {
-  children: 'Enable',
-  primary: false,
-  success: true,
-  warning: false,
-  danger: false,
-  grey: false,
-};
-
-export default metadata;
-export { Default };

package/src/badge/__stories__/BadgeDot.stories.js

@@ -1,23 +0,0 @@
-import BadgeDot from '../BadgeDot';
-
-const metadata = {
-  title: 'Badge/BadgeDot',
-  component: BadgeDot,
-};
-
-const Template = (args) => (
-  <>
-    <BadgeDot {...args}></BadgeDot>
-  </>
-);
-
-const Default = Template.bind({});
-Default.args = {
-  primary: false,
-  success: true,
-  warning: false,
-  danger: false,
-};
-
-export default metadata;
-export { Default };

package/src/badge/__stories__/BadgeFill.stories.js

@@ -1,29 +0,0 @@
-import BadgeFill from '../BadgeFill';
-import { FaInfo } from 'react-icons/fa';
-
-const metadata = {
-  title: 'Badge/BadgeFill',
-  component: BadgeFill,
-};
-
-const Template = (args) => (
-  <>
-    <BadgeFill {...args}>
-      <FaInfo />
-    </BadgeFill>
-  </>
-);
-
-const Default = Template.bind({});
-Default.args = {
-  extraSmall: false,
-  small: false,
-  large: false,
-  primary: false,
-  success: true,
-  warning: false,
-  danger: false,
-};
-
-export default metadata;
-export { Default };

package/src/badge/__stories__/BadgeFillTriangle.stories.js

@@ -1,29 +0,0 @@
-import BadgeFillTriangle from '../BadgeFillTriangle';
-import { FaExclamation } from 'react-icons/fa';
-
-const metadata = {
-  title: 'Badge/BadgeFillTriangle',
-  component: BadgeFillTriangle,
-};
-
-const Template = (args) => (
-  <>
-    <BadgeFillTriangle {...args}>
-      <FaExclamation />
-    </BadgeFillTriangle>
-  </>
-);
-
-const Default = Template.bind({});
-Default.args = {
-  extraSmall: false,
-  small: false,
-  large: false,
-  primary: false,
-  success: false,
-  warning: false,
-  danger: true,
-};
-
-export default metadata;
-export { Default };

package/src/badge/__stories__/BadgeWithText.stories.js

@@ -1,26 +0,0 @@
-import BadgeWithText from '../BadgeWithText';
-import BadgeFill from '../BadgeFill';
-import { FaQuestion } from 'react-icons/fa';
-
-const metadata = {
-  title: 'Badge/BadgeWithText',
-  component: BadgeWithText,
-};
-
-const Template = (args) => (
-  <>
-    <BadgeWithText {...args}>
-      <BadgeFill>
-        <FaQuestion />
-      </BadgeFill>
-      {args.children}
-    </BadgeWithText>
-  </>
-);
-
-const Default = Template.bind({});
-Default.args = {
-  children: 'No Setting Data',
-};
-
-export default metadata;