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

package/src/tooltip/Tooltip.js

@@ -1,149 +0,0 @@
-import {
-  useState,
-  cloneElement,
-  forwardRef,
-  useMemo,
-  useCallback,
-} from 'react';
-import styled from 'styled-components';
-import OutsideClickHandler from 'react-outside-click-handler';
-import { useForkRef, useCustomPopper } from '@cashub/hooks';
-
-const Tooltip = forwardRef(
-  (
-    {
-      children,
-      id,
-      title,
-      showArrow = false,
-      mode = 'hover',
-      fixed,
-      inline,
-      disabled,
-      placement,
-    },
-    ref,
-  ) => {
-    const [display, setDisplay] = useState(false);
-    const [targetElement, setTargetElement] = useState(null);
-    const [tooltipElement, setTooltipElement] = useState(null);
-    const [arrowElement, setArrowElement] = useState(null);
-    const ownRef = useForkRef(setTargetElement, ref);
-
-    const { styles, attributes, update } = useCustomPopper(
-      targetElement,
-      tooltipElement,
-      {
-        strategy: fixed ? 'fixed' : 'absolute',
-        arrowElement,
-        ...(placement && { placement }),
-      },
-    );
-
-    const handleOpen = useCallback(() => {
-      setDisplay(true);
-      update();
-    }, [update]);
-
-    const handleClose = useCallback(() => {
-      setDisplay(false);
-      update();
-    }, [update]);
-
-    const toggle = useCallback(() => {
-      setDisplay((display) => !display);
-      update();
-    }, [update]);
-
-    const wraperProps = useMemo(() => {
-      if (disabled) return;
-
-      if (mode === 'click') {
-        return {
-          onClick: toggle,
-        };
-      }
-
-      return {
-        // mode ==="hover"
-        onClick: handleClose,
-        onMouseOver: handleOpen,
-        onMouseLeave: handleClose,
-      };
-    }, [mode, handleClose, handleOpen, toggle, disabled]);
-
-    const childrenProps = {
-      ...children.props,
-      ref: ownRef,
-    };
-
-    return (
-      <OutsideClickHandler
-        onOutsideClick={handleClose}
-        display={inline ? 'inline-block' : 'block'}
-      >
-        <div {...wraperProps} data-testid='tooltipWrapper'>
-          {/* children is a element */}
-          {cloneElement(children, childrenProps)}
-          <TooltipTooltip
-            id={id}
-            $display={display}
-            ref={setTooltipElement}
-            style={styles.popper}
-            {...attributes.popper}
-            role='tooltip'
-          >
-            {title}
-            <TooltipArrow
-              data-testid='tooltipArrow'
-              ref={setArrowElement}
-              style={styles.arrow}
-              $display={showArrow}
-            />
-          </TooltipTooltip>
-        </div>
-      </OutsideClickHandler>
-    );
-  },
-);
-
-Tooltip.displayName = 'Tooltip';
-
-const TooltipTooltip = styled.div`
-  white-space: pre-line;
-  display: ${({ $display }) => ($display ? 'block' : 'none')};
-  border: 1px solid var(--border-color);
-  color: var(--font-on-background);
-  background: var(--color-background2);
-  box-shadow: var(--box-shadow);
-  border-radius: calc(var(--border-radius) / 2);
-  padding: var(--spacing-xs);
-  z-index: 80;
-  text-align: left;
-  font-size: var(--font-body1);
-  font-weight: var(--font-normal);
-  line-height: 1.5;
-  word-break: break-word;
-  max-width: 50vw;
-`;
-
-const TooltipArrow = styled.div`
-  display: ${({ $display }) => ($display ? 'block' : 'none')};
-  top: -0.5rem;
-  left: 0;
-  width: 1rem;
-  height: 1rem;
-
-  &::before {
-    position: absolute;
-    display: block;
-    content: '';
-    border-color: transparent;
-    border-style: solid;
-    top: 0;
-    border-width: 0 0.5rem 0.5rem 0.5rem;
-    border-bottom-color: var(--border-color);
-  }
-`;
-
-export default Tooltip;

package/src/tooltip/__stories__/Tooltip.stories.js

@@ -1,72 +0,0 @@
-import { FaExclamation } from 'react-icons/fa';
-import Tooltip from '../Tooltip';
-import { BadgeFill } from '../../badge';
-
-const metadata = {
-  title: 'Tooltip/Tooltip',
-  component: Tooltip,
-  argTypes: {
-    children: {
-      description: 'tooltip children<br>(children is a element)',
-    },
-    title: {
-      description: 'tooltip content',
-    },
-    showArrow: {
-      description: 'tooltip has arrow style',
-    },
-    mode: {
-      description: 'can use hover or click mode',
-    },
-    placement: {
-      description: 'tooltip placement (popper.js placement)',
-      control: { type: 'select' },
-      options: [
-        'auto',
-        'auto-start',
-        'auto-end',
-        'top',
-        'top-start',
-        'top-end',
-        'bottom',
-        'bottom-start',
-        'bottom-end',
-        'right',
-        'right-start',
-        'right-end',
-        'left',
-        'left-start',
-        'left-end',
-      ],
-    },
-  },
-};
-
-const Template = (args) => {
-  return (
-    <>
-      <Tooltip {...args}></Tooltip>
-      &nbsp;Contact Email
-    </>
-  );
-};
-
-const Default = Template.bind({});
-Default.args = {
-  // children is a element
-  // todo:補在文件說明
-  children: (
-    <BadgeFill>
-      <FaExclamation />
-    </BadgeFill>
-  ),
-  title: 'Email Has Not Been Verified',
-  fixed: false,
-  inline: false,
-  showArrow: false,
-  mode: 'hover',
-  placement: 'right-start',
-};
-
-export default metadata;
-export { Default };

package/src/tooltip/__test__/tooltip.test.js

@@ -1,130 +0,0 @@
-import Tooltip from '../Tooltip';
-import { render, screen } from '@testing-library/react';
-import 'jest-styled-components';
-import userEvent from '@testing-library/user-event';
-
-jest.mock('react-popper', () => ({
-  usePopper: (targetElement, popperElement, { strategy }) => {
-    return {
-      styles: { popper: { position: strategy } },
-      attributes: {},
-      state: {},
-      update: jest.fn(),
-    };
-  },
-}));
-
-jest.mock('@cashub/hooks', () => {
-  const popper = require('react-popper');
-  const originalModule = jest.requireActual('@cashub/hooks');
-
-  return {
-    ...originalModule,
-    useCustomPopper: (
-      targetElement,
-      popperElement,
-      { strategy = 'absolute' } = {},
-    ) => {
-      return popper.usePopper(targetElement, popperElement, {
-        strategy,
-        placement: 'bottom',
-      });
-    },
-  };
-});
-
-jest.mock('react-outside-click-handler', () => {
-  return ({ display, children }) => {
-    return (
-      <div>
-        <div data-testid='display'>{display}</div>
-        {children}
-      </div>
-    );
-  };
-});
-
-describe('test tooltip component', () => {
-  test('fixed', () => {
-    render(
-      <Tooltip fixed id='tooltip-id' title={'tipTitle'}>
-        <div>Tip</div>
-      </Tooltip>,
-    );
-    const tooltipWrapper = screen.getByTestId('tooltipWrapper');
-    userEvent.hover(tooltipWrapper);
-    expect(screen.getByRole('tooltip')).toHaveStyle({ position: 'fixed' });
-  });
-
-  test('inline', () => {
-    const { rerender } = render(
-      <Tooltip id='tooltip-id' title={'tipTitle'}>
-        <div>Tip</div>
-      </Tooltip>,
-    );
-    const display = screen.getByTestId('display');
-    expect(display).toHaveTextContent('block');
-
-    rerender(
-      <Tooltip inline id='tooltip-id' title={'tipTitle'}>
-        <div>Tip</div>
-      </Tooltip>,
-    );
-
-    expect(display).toHaveTextContent('inline-block');
-  });
-
-  test('render Tooltip', () => {
-    render(
-      <Tooltip id='tooltip-id' title={'tipTitle'}>
-        <div>Tip</div>
-      </Tooltip>,
-    );
-
-    const tooltipWrapper = screen.getByTestId('tooltipWrapper');
-    const tooltip = screen.getByRole('tooltip', { hidden: true });
-    const tooltipArrow = screen.queryByTestId('tooltipArrow', { hidden: true });
-    const children = screen.getByText('Tip');
-
-    expect(tooltipWrapper).toBeInTheDocument();
-    expect(tooltip).toHaveStyle('visibility: hidden');
-    userEvent.hover(tooltipWrapper);
-    expect(screen.getByRole('tooltip')).toHaveStyle({ position: 'absolute' });
-    expect(tooltip).toHaveStyle('visibility: visible');
-    expect(tooltip).toHaveAttribute('id', 'tooltip-id');
-    expect(tooltip).toHaveTextContent('tipTitle');
-    expect(tooltipArrow).toHaveStyle('display: none');
-
-    expect(children).toBeInTheDocument();
-  });
-
-  test('disable', () => {
-    render(
-      <Tooltip disabled id='tooltip-id' title={'tipTitle'}>
-        <div>Tip</div>
-      </Tooltip>,
-    );
-
-    const tooltipWrapper = screen.getByTestId('tooltipWrapper');
-    const tooltip = screen.getByRole('tooltip', { hidden: true });
-
-    userEvent.hover(tooltipWrapper);
-    expect(tooltip).toHaveStyle('visibility: hidden');
-  });
-
-  test('mode is click & showArrow', () => {
-    render(
-      <Tooltip showArrow mode='click' id='tooltip-id' title={'tipTitle'}>
-        <div>Tip</div>
-      </Tooltip>,
-    );
-    const tooltipWrapper = screen.getByTestId('tooltipWrapper');
-    const tooltip = screen.getByRole('tooltip', { hidden: true });
-    const tooltipArrow = screen.queryByTestId('tooltipArrow');
-
-    expect(tooltip).toHaveStyle('visibility: hidden');
-    userEvent.click(tooltipWrapper);
-    expect(tooltip).toHaveStyle('visibility: visible');
-    expect(tooltipArrow).toHaveStyle('display: block');
-  });
-});

package/src/tooltip/index.js

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

package/src/treeView/TreeViewV2.js

@@ -1,33 +0,0 @@
-import 'treeflex/dist/css/treeflex.css';
-
-const TreeViewV2 = ({ rootName, children }) => {
-  const generateTree = (children) => {
-    return (
-      <ul>
-        {children.map((child) => {
-          return (
-            <li key={child.id}>
-              <span className={`tf-nc ${child.primary ? 'primary' : ''}`}>
-                {child.name}
-              </span>
-              {child.children.length > 0 && generateTree(child.children)}
-            </li>
-          );
-        })}
-      </ul>
-    );
-  };
-
-  return (
-    <div className='tf-tree'>
-      <ul>
-        <li>
-          <span className='tf-nc'>{rootName}</span>
-          {generateTree(children)}
-        </li>
-      </ul>
-    </div>
-  );
-};
-
-export default TreeViewV2;

package/src/treeView/TreeflexStyle.js

@@ -1,44 +0,0 @@
-import { createGlobalStyle } from 'styled-components';
-import scrollbar from '../styles/mixin/scrollbar';
-
-// integrate treeflex component
-const TreeflexStyle = createGlobalStyle`
-  .tf-tree {
-    text-align: center;
-    color: var(--font-on-background);
-
-    .tf-nc {
-      border: var(--border-width) solid var(--border-color);
-      border-radius: 8px;
-      min-width: 120px;
-
-      &.primary {
-        border-color: var(--color-primary);
-        font-weight: var(--font-bold);
-      }
-    }
-
-    ${scrollbar}
-  }
-
-  .tf-tree ul {
-    margin-bottom: 2em;
-  }
-
-  .tf-tree li ul {
-    margin-bottom: 0;
-  }
-
-  .tf-tree li li:before {
-    border: var(--border-width) solid var(--border-color);
-  }
-
-  .tf-tree .tf-nc:after,
-  .tf-tree .tf-nc:before,
-  .tf-tree .tf-node-content:after,
-  .tf-tree .tf-node-content:before {
-    border: var(--border-width) solid var(--border-color);
-  }
-`;
-
-export default TreeflexStyle;

package/src/treeView/index.js

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

package/src/wizard/Wizard.js

@@ -1,276 +0,0 @@
-import {
-  useState,
-  Children,
-  cloneElement,
-  useCallback,
-  useMemo,
-  useEffect,
-} from 'react';
-import { FaCaretRight } from 'react-icons/fa';
-import styled from 'styled-components';
-import { isReactComponent } from '@cashub/utils';
-import media from '../styles/mixin/media';
-
-const Wizard = (props) => {
-  const {
-    navNames = [],
-    defaultStep = 1,
-    children,
-    beforeNext,
-    beforePrevious,
-    clickableSteps = true,
-  } = props;
-  const [currentStep, setCurrentStep] = useState(defaultStep);
-
-  const goToStep = useCallback(
-    async (step) => {
-      if (step > currentStep) {
-        if (!beforeNext) {
-          setCurrentStep(step);
-        } else {
-          beforeNext({ current: currentStep, next: step })
-            .then(() => {
-              setCurrentStep(step);
-            })
-            .catch((error) => {});
-        }
-      }
-
-      if (step < currentStep) {
-        if (!beforePrevious) {
-          setCurrentStep(step);
-        } else {
-          beforePrevious({ current: currentStep })
-            .then(() => {
-              setCurrentStep(step);
-            })
-            .catch((error) => {});
-        }
-      }
-    },
-    [currentStep, beforeNext, beforePrevious],
-  );
-
-  const nextStep = useCallback(() => {
-    let next = currentStep + 1;
-    if (next > navNames.length) {
-      next = navNames.length;
-    }
-    if (!beforeNext) {
-      setCurrentStep(next);
-    } else {
-      beforeNext({ current: currentStep })
-        .then(() => {
-          setCurrentStep(next);
-        })
-        .catch((error) => {});
-    }
-  }, [navNames.length, beforeNext, currentStep]);
-
-  const previousStep = useCallback(() => {
-    let previous = currentStep - 1;
-    if (previous < 1) {
-      previous = 1;
-    }
-
-    if (!beforePrevious) {
-      setCurrentStep(previous);
-    } else {
-      beforePrevious({ current: currentStep })
-        .then(() => {
-          setCurrentStep(previous);
-        })
-        .catch((error) => {});
-    }
-  }, [beforePrevious, currentStep]);
-
-  const isLastStep = useCallback(() => {
-    return currentStep === navNames.length;
-  }, [currentStep, navNames.length]);
-
-  const api = useMemo(() => {
-    return {
-      goToStep,
-      nextStep,
-      previousStep,
-      isLastStep,
-    };
-  }, [goToStep, isLastStep, nextStep, previousStep]);
-
-  const childrenWithProps = useMemo(() => {
-    const validChildren = Children.toArray(children).filter((child) => !!child);
-
-    return Children.map(validChildren, (child, index) => {
-      if (!child) return null;
-
-      const className = index + 1 === currentStep && 'active';
-
-      return (
-        <Step className={className} data-testid='step'>
-          {isReactComponent(child) ? cloneElement(child, api) : child}
-        </Step>
-      );
-    });
-  }, [api, children, currentStep]);
-
-  useEffect(() => {
-    setCurrentStep(defaultStep);
-  }, [defaultStep]);
-
-  return (
-    <>
-      <Nav>
-        {navNames.map((name, index, arr) => {
-          const step = index + 1;
-          const arrow =
-            step === currentStep && step !== arr.length ? 'arrow' : undefined;
-
-          let className = '';
-          if (step === currentStep) {
-            className += 'current';
-          } else if (step < currentStep) {
-            className += 'done';
-          }
-
-          return (
-            <NavItem
-              key={step}
-              className={className}
-              onClick={() => clickableSteps === true && goToStep(step)}
-            >
-              <NavTitle>
-                <span>{step}</span>
-                <p>{name}</p>
-                <span className={arrow}>
-                  <FaCaretRight />
-                </span>
-              </NavTitle>
-            </NavItem>
-          );
-        })}
-      </Nav>
-      <div>{childrenWithProps}</div>
-    </>
-  );
-};
-
-const Nav = styled.ul`
-  display: flex;
-  background: var(--color-background2);
-  border-radius: var(--border-radius-l);
-  margin-bottom: var(--spacing);
-
-  ${media.mobile`
-      display: block;
-    `}
-`;
-
-const NavItem = styled.li`
-  color: var(--font-on-mute);
-  font-size: var(--font-body1);
-  font-weight: var(--font-bold);
-  padding: 0 var(--spacing-xs);
-  width: 100%;
-  height: 36px;
-  line-height: 36px;
-  transition: 0.3s;
-  overflow: hidden;
-  flex: 1;
-  cursor: pointer;
-
-  &:hover {
-    color: var(--font-on-background);
-
-    > div > span:first-of-type {
-      color: var(--font-on-primary);
-      background: var(--font-on-background);
-    }
-  }
-
-  &.current,
-  &.done {
-    background: var(--color-primary);
-    color: var(--font-on-primary);
-
-    > div > span:first-of-type {
-      color: var(--color-primary);
-      background: var(--font-on-primary);
-    }
-  }
-
-  &.current {
-    background: var(--color-primary);
-    color: var(--font-on-primary);
-    border-radius: 0 var(--border-radius-l) var(--border-radius-l) 0;
-
-    &:first-child {
-      border-radius: var(--border-radius-l);
-    }
-
-    ${media.mobile`
-        border-radius: 0 0 var(--border-radius) var(--border-radius);
-      `}
-  }
-
-  &.done {
-    background: var(--color-primary);
-    color: var(--font-on-primary);
-
-    &:first-child {
-      border-radius: var(--border-radius-l) 0 0 var(--border-radius-l);
-
-      ${media.mobile`
-          border-radius: var(--border-radius) var(--border-radius) 0 0;
-        `}
-    }
-  }
-`;
-
-const NavTitle = styled.div`
-  display: flex;
-  align-items: center;
-
-  > span:first-of-type {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    margin-right: var(--spacing-xs);
-    color: var(--font-on-mute);
-    flex: 0 0;
-    flex-basis: 24px;
-    width: 24px;
-    height: 24px;
-    border-radius: var(--border-radius-l);
-    background: var(--font-on-mute);
-  }
-
-  > p {
-    margin-right: auto;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  > span:last-of-type {
-    display: none;
-
-    &.arrow {
-      display: flex;
-      align-self: center;
-    }
-
-    ${media.mobile`
-        transform: rotate(90deg);
-      `}
-  }
-`;
-
-const Step = styled.div`
-  display: none;
-
-  &.active {
-    display: block;
-  }
-`;
-
-export default Wizard;