@cashub/ui 0.22.7 → 0.22.9

package/src/animate/Collapse.js

@@ -0,0 +1,68 @@
+import { useMemo, cloneElement, useRef, useState, useEffect } from 'react';
+import { Transition } from 'react-transition-group';
+
+const Collapse = ({
+  in: inProp,
+  duration = 1000,
+  children,
+  onEntered,
+  onExit,
+  onExited,
+}) => {
+  const childRef = useRef(null);
+  const [state, setState] = useState({
+    show: inProp,
+    height: 0,
+  });
+
+  const defaultStyle = useMemo(() => {
+    const style = {
+      transition: `height ${duration}ms ease-in-out`,
+      height: state.height,
+      overflow: 'hidden',
+    };
+
+    return style;
+  }, [duration, state.height]);
+
+  const transitionStyles = useMemo(() => {
+    return {
+      entering: { height: state.height },
+      entered: { height: state.height },
+      exiting: { height: 0 },
+      exited: { height: 0 },
+    };
+  }, [state.height]);
+
+  useEffect(() => {
+    setState({
+      show: inProp,
+      height: childRef.current.clientHeight,
+    });
+  }, [inProp]);
+
+  return (
+    <Transition
+      in={state.show}
+      timeout={duration}
+      onEntered={onEntered}
+      onExit={onExit}
+      onExited={onExited}
+    >
+      {(state) => (
+        <div
+          style={{
+            ...defaultStyle,
+            ...transitionStyles[state],
+          }}
+        >
+          {cloneElement(children, {
+            ref: childRef,
+          })}
+        </div>
+      )}
+    </Transition>
+  );
+};
+
+export default Collapse;

package/src/animate/Loader.js

@@ -0,0 +1,36 @@
+import styled from 'styled-components';
+import LoadingBackdrop from '../backdrop/LoadingBackdrop';
+import Spinner from './Spinner';
+
+const Loader = ({ transparent, backgroundFill, $loading = true, text }) => {
+  return (
+    <Wrapper
+      transparent={transparent}
+      backgroundFill={backgroundFill}
+      $loading={$loading}
+    >
+      <Spinner />
+      {text && <Text>{text}</Text>}
+    </Wrapper>
+  );
+};
+
+const Wrapper = styled(LoadingBackdrop)`
+  z-index: 200;
+
+  ${({ transparent }) => transparent && 'background: transparent;'}
+
+  ${({ backgroundFill }) =>
+    backgroundFill && 'background: var(--color-background1);'}
+
+  ${({ $loading }) => !$loading && 'display: none;'}
+`;
+
+const Text = styled.p`
+  white-space: pre-line;
+  margin: var(--spacing) 0;
+  font-size: var(--font-h2);
+  text-align: center;
+`;
+
+export default Loader;

package/src/animate/NumberCounter.js

@@ -0,0 +1,49 @@
+import { useState, useEffect } from 'react';
+
+const MINIMUM_STEP_TIME = 100;
+const NumberCounter = ({ start, end, duration }) => {
+  const [number, setNumber] = useState(start || 0);
+
+  useEffect(() => {
+    // invalid value
+    if (end === null || end === undefined) return;
+
+    // same value no need do counter
+    if (start === end) return;
+
+    let current = start;
+    const range = end - start;
+    let increment = end > start ? 1 : -1;
+    let stepTime = duration / range;
+
+    // use minimum step time instead if step time too small
+    // prevent too much render cause long time render
+    if (stepTime < MINIMUM_STEP_TIME) {
+      const gap = MINIMUM_STEP_TIME - stepTime;
+      const multiple = gap / stepTime;
+
+      stepTime = MINIMUM_STEP_TIME;
+      increment = Math.floor(1 + 1 * multiple);
+    }
+
+    const timer = setInterval(() => {
+      current += increment;
+      if (current > end) {
+        current = end;
+      }
+      setNumber(current);
+
+      if (current === end) {
+        clearInterval(timer);
+      }
+    }, stepTime);
+
+    return () => {
+      clearInterval(timer);
+    };
+  }, [start, end, duration]);
+
+  return number;
+};
+
+export default NumberCounter;

package/src/animate/PulseRing.js

@@ -0,0 +1,25 @@
+import styled, { css } from 'styled-components';
+import Pulse from '../keyframe/Pulse';
+
+const PulseRing = styled.span.attrs(() => ({
+  role: 'presentation',
+}))`
+  display: block;
+  border-radius: var(--border-radius-round);
+  height: 40px;
+  width: 40px;
+  position: absolute;
+  top: 0;
+  z-index: -1;
+  opacity: 0;
+  border: 4px solid var(--color-primary);
+
+  ${({ play }) =>
+    play &&
+    css`
+      animation: ${Pulse} 3.5s ease-out;
+      animation-iteration-count: infinite;
+    `}
+`;
+
+export default PulseRing;

package/src/animate/Spinner.js

@@ -0,0 +1,13 @@
+import styled from 'styled-components';
+import Spin from '../keyframe/Spin';
+
+const Spinner = styled.div`
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  border: 0.3rem solid var(--color-background2);
+  border-top-color: var(--color-primary);
+  animation: 1s ${Spin} infinite linear;
+`;
+
+export default Spinner;

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

@@ -0,0 +1,60 @@
+import Collapse from '../Collapse';
+
+const metadata = {
+  title: 'Animate/Collapse',
+  component: Collapse,
+  argTypes: {
+    in: {
+      type: { required: true },
+      description: 'Triggers the enter or exit transition',
+    },
+    duration: {
+      type: { required: true },
+      description:
+        'The duration of the transition, in milliseconds. Required unless addEndListener is provided. Can accept numbers or object { enter?: number, exit?: number, appear?: number }',
+    },
+    children: {
+      type: { required: true },
+      description:
+        'A function child can be used instead of a React element. This function is called with the current transition status (entering, entered, exiting, exited), which can be used to apply context specific props to a component.',
+    },
+    onEntered: {
+      description: 'Callback fired after the entered status is applied.',
+      control: {
+        action: 'onEntered',
+      },
+    },
+    onExit: {
+      description: 'Callback fired before the exiting status is applied.',
+      control: {
+        action: 'onExit',
+      },
+    },
+    onExited: {
+      description: 'Callback fired after the exited status is applied.',
+      control: {
+        action: 'onExited',
+      },
+    },
+  },
+};
+
+const Default = (args) => {
+  return (
+    <>
+      Try changing "in" props
+      <Collapse {...args}>
+        <div style={{ background: 'pink', padding: '12px' }}>
+          children content
+        </div>
+      </Collapse>
+    </>
+  );
+};
+Default.args = {
+  in: false,
+  duration: 1000,
+};
+
+export default metadata;
+export { Default };

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

@@ -0,0 +1,33 @@
+import Loader from '../Loader';
+import Spinner from '../Spinner';
+
+const metadata = {
+  title: 'Animate/Loader',
+  component: Loader,
+  subcomponents: { Spinner },
+  argTypes: {
+    transparent: {
+      description: 'Controls whether to make the background transparent',
+    },
+    backgroundFill: {
+      description: 'Controls whether to fill the background color',
+    },
+    $loading: { description: 'Controls whether to show loading effets' },
+    text: {
+      description: 'Set the text content of the loader',
+    },
+  },
+};
+
+const Default = (args) => {
+  return <Loader {...args} />;
+};
+Default.args = {
+  text: 'LOADING...',
+  $loading: true,
+  transparent: false,
+  backgroundFill: false,
+};
+
+export default metadata;
+export { Default };

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,3 @@
+@import './font.css';
+@import './normalize.css';
+@import './autocomplete.css';