@cashub/ui 0.48.28 → 0.49.0-beta.0

package/src/animate/__stories__/NumberCounter.stories.js

@@ -0,0 +1,29 @@
+import NumberCounter from '../NumberCounter';
+
+const metadata = {
+  title: 'Animate/NumberCounter',
+  component: NumberCounter,
+  argTypes: {
+    start: {
+      description: 'The start value of this counter',
+    },
+    end: {
+      description: 'The final value of this counter',
+    },
+    duration: {
+      description: 'The duration of the counter transition, in milliseconds.',
+    },
+  },
+};
+
+const Default = (args) => {
+  return <NumberCounter {...args} />;
+};
+Default.args = {
+  start: 0,
+  end: 1000,
+  duration: 1000,
+};
+
+export default metadata;
+export { Default };

package/src/animate/__stories__/PulseRing.stories.js

@@ -0,0 +1,17 @@
+import PulseRing from '../PulseRing';
+
+const metadata = {
+  title: 'Animate/PulseRing',
+  component: PulseRing,
+  argTypes: {
+    play: { description: 'Controls whether to play animation' },
+  },
+};
+
+const Default = (args) => <PulseRing {...args} />;
+Default.args = {
+  play: true,
+};
+
+export default metadata;
+export { Default };

package/src/animate/__stories__/Spinner.stories.js

@@ -0,0 +1,13 @@
+import Spinner from '../Spinner';
+
+const metadata = {
+  title: 'Animate/Spinner',
+  component: Spinner,
+};
+
+const Default = (args) => {
+  return <Spinner {...args} />;
+};
+
+export default metadata;
+export { Default };

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

@@ -0,0 +1,125 @@
+import { render, screen } from '@testing-library/react';
+import Collapse from '../Collapse';
+
+jest.mock('react-transition-group', () => {
+  return {
+    Transition: ({
+      in: inProp,
+      duration,
+      children,
+      onEntered,
+      onExit,
+      onExited,
+    }) => {
+      if (inProp) {
+        if (onEntered) {
+          setTimeout(() => {
+            onEntered();
+          }, duration);
+        }
+      } else {
+        if (onExit) {
+          onExit();
+        }
+
+        if (onExited) {
+          setTimeout(() => {
+            onExited();
+          }, duration);
+        }
+      }
+
+      return children();
+    },
+  };
+});
+
+const setClientHeight = (value) => {
+  Object.defineProperty(HTMLElement.prototype, 'clientHeight', {
+    configurable: true,
+    value: `${value}px`,
+  });
+};
+
+describe('Test Collapse Component', () => {
+  jest.useFakeTimers();
+  test('render component', () => {
+    const { container } = render(
+      <Collapse in={false} duration={500}>
+        <section>Content Block</section>
+      </Collapse>
+    );
+
+    const content = screen.getByText('Content Block');
+    expect(content).toBeVisible();
+    expect(container.firstChild).toHaveStyle('height: 0px');
+  });
+
+  test('toggle', () => {
+    setClientHeight(0);
+    const { container, rerender } = render(
+      <Collapse in={false} duration={500}>
+        <section>Content Block</section>
+      </Collapse>
+    );
+    expect(container.firstChild).toHaveStyle('height: 0px');
+
+    setClientHeight(100);
+    rerender(
+      <Collapse in={true} duration={500}>
+        <section>Content Block</section>
+      </Collapse>
+    );
+    expect(container.firstChild).toHaveStyle('height: 100px');
+  });
+
+  test('enter callback', () => {
+    const onEntered = jest.fn();
+
+    render(
+      <Collapse in={true} duration={500} onEntered={onEntered}>
+        <section>Content Block</section>
+      </Collapse>
+    );
+    jest.runAllTimers();
+    expect(onEntered).toHaveBeenCalled();
+  });
+
+  test('exit callback', () => {
+    const onExit = jest.fn();
+    const onExited = jest.fn();
+
+    const { rerender } = render(
+      <Collapse in={true} duration={500} onExit={onExit} onExited={onExited}>
+        <section>Content Block</section>
+      </Collapse>,
+    );
+
+    expect(onExit).toHaveBeenCalledTimes(0);
+    expect(onExited).toHaveBeenCalledTimes(0);
+
+    rerender(
+      <Collapse in={false} duration={500} onExit={onExit} onExited={onExited}>
+        <section>Content Block</section>
+      </Collapse>,
+    );
+
+    jest.runAllTimers();
+    expect(onExit).toHaveBeenCalledTimes(1);
+    expect(onExited).toHaveBeenCalledTimes(1);
+  });
+
+  test('default duration', () => {
+    const onEntered = jest.fn();
+
+    render(
+      <Collapse in={true} onEntered={onEntered}>
+        <section>Content Block</section>
+      </Collapse>
+    );
+
+    expect(onEntered).not.toHaveBeenCalled();
+    jest.runAllTimers();
+    expect(onEntered).toHaveBeenCalled();
+  });
+});

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

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

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

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

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

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

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

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

package/src/assets/css/global.css

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

package/src/assets/icons/file.svg

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

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

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

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

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

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

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

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

package/src/badge/Badge.js

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

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

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

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