@cashub/ui 0.22.9 → 0.22.10

package/src/animate/Loader.js

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

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

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

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

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

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

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

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

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

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

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