@cashub/ui 0.48.28 → 0.49.0-beta.0

package/src/tooltip/Tooltip.js

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

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

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

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

package/src/treeView/TreeViewV2.js

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

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

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

package/src/wizard/Wizard.js

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