@cashub/ui 0.22.8 → 0.22.9

package/src/toast/MessageContainer.js

@@ -0,0 +1,40 @@
+import styled from 'styled-components';
+
+const MessageContainer = ({ title, message, containHTML = false }) => {
+  return (
+    <div data-testid='messageContainer'>
+      {title && <Title>{title}</Title>}
+      {containHTML ? (
+        <Message dangerouslySetInnerHTML={{ __html: message }} />
+      ) : (
+        <Message>{message}</Message>
+      )}
+    </div>
+  );
+};
+
+const Title = styled.div`
+  margin: 0;
+  margin-bottom: 0.25rem;
+  font-size: 1rem;
+  line-height: 1.5rem;
+  font-weight: 500;
+`;
+
+const Message = styled.div`
+  margin: 0;
+  font-size: 0.9rem;
+  line-height: 1.2rem;
+  word-break: break-word;
+  white-space: pre-wrap;
+
+  ul {
+    margin-left: 1rem;
+
+    li {
+      list-style: disc;
+    }
+  }
+`;
+
+export default MessageContainer;

package/src/toast/__stories__/MessageContainer.stories.js

@@ -0,0 +1,35 @@
+import { toast } from 'react-toastify';
+import MessageContainer from '../MessageContainer';
+
+const metadata = {
+  title: 'Toast/MessageContainer',
+  component: MessageContainer,
+};
+
+const Template = (args) => {
+  const ToastFunction = (args) => {
+    return toast.success(<MessageContainer {...args} />);
+  };
+
+  return (
+    <>
+      <button
+        onClick={() => {
+          ToastFunction(args);
+        }}
+      >
+        Click
+      </button>
+    </>
+  );
+};
+
+const Default = Template.bind({});
+Default.args = {
+  title: 'title name',
+  message: 'this is a message',
+  containHTML: false,
+};
+
+export default metadata;
+export { Default };

package/src/toast/index.js

@@ -0,0 +1,3 @@
+export { default as CustomToastContainer } from './CustomToastContainer';
+export { default as MessageContainer } from './MessageContainer';
+export * from './show';

package/src/toast/show.js

@@ -0,0 +1,34 @@
+import { toast } from 'react-toastify';
+import MessageContainer from './MessageContainer';
+
+const showSuccessMessage = ({ title, message, containHTML = false }) => {
+  toast.success(
+    <MessageContainer
+      title={title}
+      message={message}
+      containHTML={containHTML}
+    />,
+  );
+};
+
+const showErrorMessage = ({ title, message, containHTML = false }) => {
+  toast.error(
+    <MessageContainer
+      title={title}
+      message={message}
+      containHTML={containHTML}
+    />,
+  );
+};
+
+const showWarningMessage = ({ title, message, containHTML = false }) => {
+  toast.warning(
+    <MessageContainer
+      title={title}
+      message={message}
+      containHTML={containHTML}
+    />,
+  );
+};
+
+export { showSuccessMessage, showErrorMessage, showWarningMessage };

package/src/toast/style.css

@@ -0,0 +1 @@
+@import 'react-toastify/dist/ReactToastify.css';

package/src/tooltip/Tooltip.js

@@ -0,0 +1,146 @@
+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,
+    },
+    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, state, update } = useCustomPopper(
+      targetElement,
+      tooltipElement,
+      {
+        strategy: fixed ? 'fixed' : 'absolute',
+        arrowElement,
+      },
+    );
+
+    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}
+            placement={state && state.placement}
+            role='tooltip'
+          >
+            {title}
+            <TooltipArrow
+              data-testid='tooltipArrow'
+              ref={setArrowElement}
+              style={styles.arrow}
+              $display={showArrow}
+            />
+          </TooltipTooltip>
+        </div>
+      </OutsideClickHandler>
+    );
+  },
+);
+
+const TooltipTooltip = styled.div`
+  white-space: pre-line;
+  visibility: ${({ $display }) => ($display ? 'visible' : 'hidden')};
+  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,49 @@
+import { FaExclamation } from 'react-icons/fa';
+import Tooltip from '../Tooltip';
+
+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',
+    },
+  },
+};
+
+const Template = (args) => {
+  return (
+    <>
+      <Tooltip {...args}></Tooltip>
+      &nbsp;Contact Email
+    </>
+  );
+};
+
+const Default = Template.bind({});
+Default.args = {
+  // children is a element
+  // todo:補在文件說明
+  children: (
+    <div>
+      <FaExclamation />
+    </div>
+  ),
+  title: 'Email Has Not Been Verified',
+  fixed: false,
+  inline: false,
+  showArrow: false,
+  mode: 'hover',
+};
+
+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';