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

package/src/VerticalTab/TabTab.js

@@ -1,54 +0,0 @@
-import { useContext, useCallback } from 'react';
-import styled from 'styled-components';
-import TabContext from './subComponent/TabContext';
-
-const TabTab = ({ children, name, ...props }) => {
-  const { selected, onChange } = useContext(TabContext);
-
-  const handleClick = useCallback(() => {
-    if (selected !== name) {
-      onChange(name);
-    }
-  }, [name, selected, onChange]);
-
-  return (
-    <Tab role='tab' onClick={handleClick} active={selected === name} {...props}>
-      {children}
-    </Tab>
-  );
-};
-
-const Tab = styled.button`
-  width: 100%;
-  padding: 12px var(--spacing-s);
-  border: none;
-  background: transparent;
-  text-align: left;
-  color: var(--font-on-background);
-  transition: 0.3s;
-  cursor: pointer;
-
-  &:hover {
-    background: var(--color-active);
-    color: var(--color-primary);
-    font-weight: var(--font-bold);
-
-    span {
-      color: var(--color-primary);
-    }
-  }
-
-  ${({ active }) =>
-    active &&
-    `
-      background: var(--color-active);
-      color: var(--color-primary);
-      font-weight: var(--font-bold);
-
-      span {
-        color: var(--color-primary);
-      }
-    `}
-`;
-
-export default TabTab;

package/src/VerticalTab/VerticalTab.js

@@ -1,20 +0,0 @@
-import styled from 'styled-components';
-import TabContext from './subComponent/TabContext';
-
-const VerticalTab = ({ children, height, selected, onChange }) => {
-  return (
-    <TabContext.Provider value={{ selected, onChange }}>
-      <Container height={height}>{children}</Container>
-    </TabContext.Provider>
-  );
-};
-
-const Container = styled.div`
-  display: flex;
-  height: ${({ height }) => (height ? height : '100vh')};
-  border-radius: var(--border-radius-s);
-  background: var(--color-background3);
-  overflow: hidden;
-`;
-
-export default VerticalTab;

package/src/VerticalTab/index.js

@@ -1,10 +0,0 @@
-import VerticalTab from './VerticalTab';
-import TabList from './TabList';
-import TabTab from './TabTab';
-import TabPanel from './TabPanel';
-
-export default Object.assign(VerticalTab, {
-  List: TabList,
-  Tab: TabTab,
-  Panel: TabPanel,
-});

package/src/VerticalTab/subComponent/TabContext.js

@@ -1,5 +0,0 @@
-import { createContext } from 'react';
-
-const TabContext = createContext(null);
-
-export default TabContext;

package/src/VerticalTab/subComponent/VerticalTab.stories.js

@@ -1,82 +0,0 @@
-import { useState } from 'react';
-import VerticalTab from '../';
-import { Checkbox } from '../../form';
-
-const metadata = {
-  title: 'VerticalTab/VerticalTab',
-  component: VerticalTab,
-  argTypes: {
-    onChange: {},
-  },
-};
-
-const Template = (args) => {
-  const { onChange, ...props } = args;
-  const [selectedTab, setSelectedTab] = useState('enterprise');
-
-  return (
-    <VerticalTab
-      height='500px'
-      selected={selectedTab}
-      onChange={(name) => {
-        setSelectedTab(name);
-        onChange(name);
-      }}
-      {...props}
-    >
-      <VerticalTab.List>
-        <VerticalTab.Tab name='enterprise'>
-          <Checkbox
-            htmlFor='enterprise'
-            text='Enterprise'
-            checked={false}
-            noMargin
-          />
-        </VerticalTab.Tab>
-        <VerticalTab.Tab name='merchant'>
-          <Checkbox
-            htmlFor='merchant'
-            text='Merchant'
-            checked={true}
-            noMargin
-          />
-        </VerticalTab.Tab>
-        <VerticalTab.Tab name='terminal'>
-          <Checkbox htmlFor='terminal' text='Terminal' noMargin />
-        </VerticalTab.Tab>
-        <VerticalTab.Tab name='manufacturer'>
-          <Checkbox htmlFor='manufacturer' text='Manufacturer' noMargin />
-        </VerticalTab.Tab>
-        <VerticalTab.Tab name='announcement'>
-          <Checkbox htmlFor='announcement' text='Announcement' noMargin />
-        </VerticalTab.Tab>
-        <VerticalTab.Tab name='remoteKeyInjection'>
-          Remote Key Injection
-        </VerticalTab.Tab>
-      </VerticalTab.List>
-      <VerticalTab.Panel name='enterprise'>
-        <div>Enterprise Content</div>
-      </VerticalTab.Panel>
-      <VerticalTab.Panel name='merchant'>
-        <div>Merchant Content</div>
-      </VerticalTab.Panel>
-      <VerticalTab.Panel name='terminal'>
-        <div>Terminal Content</div>
-      </VerticalTab.Panel>
-      <VerticalTab.Panel name='manufacturer'>
-        <div>Manufacturer Content</div>
-      </VerticalTab.Panel>
-      <VerticalTab.Panel name='announcement'>
-        <div>Announcement Content</div>
-      </VerticalTab.Panel>
-      <VerticalTab.Panel name='remoteKeyInjection'>
-        <div>Remote Key Injection Content</div>
-      </VerticalTab.Panel>
-    </VerticalTab>
-  );
-};
-
-const Default = Template.bind({});
-
-export default metadata;
-export { Default };

package/src/alert/Alert.js

@@ -1,15 +0,0 @@
-import styled from 'styled-components';
-
-const Alert = styled.div`
-  background: var(--color-background1);
-  border-radius: var(--border-radius);
-  color: var(--font-on-background);
-  padding: var(--spacing);
-
-  ${({ backgroundReverse }) =>
-    backgroundReverse && 'background: var(--color-background2);'}
-
-  ${({ marginBottom }) => marginBottom && 'margin-bottom: var(--spacing);'}
-`;
-
-export default Alert;

package/src/alert/__stories__/Alert.stories.js

@@ -1,18 +0,0 @@
-import Alert from '../Alert';
-
-const metadata = {
-  title: 'Alert/Alert',
-  component: Alert,
-};
-
-const Template = (args) => {
-  return <Alert {...args}>You can place some information here that you want to announce.</Alert>;
-};
-
-const Default = Template.bind({});
-Default.args = {
-  backgroundReverse: false,
-};
-
-export default metadata;
-export { Default };

package/src/alert/index.js

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

package/src/animate/Collapse.js

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

@@ -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();
-  });
-});