@majoo-ui/react 2.0.1 → 2.1.0-rc.1

package/components/toast/Toast.esm.js

@@ -0,0 +1,297 @@
+import 'core-js/modules/es.array.includes.js';
+import { CloseOutline } from '@majoo-ui/icons';
+import PropTypes from 'prop-types';
+import * as React from 'react';
+import { Transition } from 'react-transition-group';
+import { colors, styled, keyframes } from '../../config/stitches.config.esm.js';
+import Flex from '../../layout/flex/Flex.esm.js';
+import Heading from '../heading/Heading.esm.js';
+import Paragraph from '../paragraph/Paragraph.esm.js';
+import { Link } from '../link/Link.esm.js';
+import useMediaQuery from '../../utils/useMediaQuery.esm.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+const TOAST_WIDTH = 576;
+const ANIMATION_DURATION = 400;
+const TOP_RIGHT_POSITION = 'top-right';
+const TOP_LEFT_POSITION = 'top-left';
+const BOTTOM_RIGHT_POSITION = 'bottom-right';
+const BOTTOM_LEFT_POSITION = 'bottom_left';
+const positions = [TOP_RIGHT_POSITION, TOP_LEFT_POSITION, BOTTOM_RIGHT_POSITION, BOTTOM_LEFT_POSITION];
+const toastEnter = position => keyframes({
+  '0%': {
+    left: position === 'left' ? `-${TOAST_WIDTH}px` : 'unset',
+    right: position === 'right' ? `-${TOAST_WIDTH}px` : 'unset',
+    opacity: '0'
+  },
+  '100%': {
+    left: position === 'left' ? '0' : 'unset',
+    right: position === 'right' ? '0' : 'unset',
+    opacity: '1'
+  }
+});
+const toastExit = position => keyframes({
+  '0%': {
+    transform: 'translateX(0%)',
+    opacity: '1'
+  },
+  '100%': {
+    transform: `translateX(${position === 'right' ? '100%' : '-100%'})`,
+    opacity: '0'
+  }
+});
+const toastAnimationStyle = position => ({
+  '&[state="entering"], &[state="entered"]': {
+    animationFillMode: 'forwards',
+    animationName: toastEnter(position),
+    animationDuration: `${ANIMATION_DURATION}ms`
+  },
+  '&[state="exiting"]': {
+    animationFillMode: 'forwards',
+    animationName: toastExit(position),
+    animationDuration: `${ANIMATION_DURATION * 2}ms`
+  },
+  '&[state="entered"]': {
+    right: 0,
+    opacity: '1'
+  }
+});
+const Root = styled('div', {
+  display: 'block',
+  maxWidth: `${TOAST_WIDTH}px`,
+  // width: `${TOAST_WIDTH}px`,
+  height: '100%',
+  position: 'relative',
+  opacity: 0,
+  variants: {
+    hPosition: {
+      right: toastAnimationStyle('right'),
+      left: toastAnimationStyle('left')
+    },
+    vPosition: {
+      top: {
+        marginTop: '$spacing-05'
+      },
+      bottom: {
+        marginBottom: '$spacing-05'
+      }
+    }
+  }
+});
+const StyledToast = styled(Flex, {
+  // width: '100%',
+  // maxWidth: TOAST_WIDTH,
+  padding: '$spacing-03',
+  textAlign: 'left',
+  borderRadius: 8,
+  pointer: 'default',
+  variants: {
+    variant: {
+      info: {
+        backgroundColor: '$bgToastInfo',
+        border: '1px solid $hlNews'
+      },
+      warning: {
+        backgroundColor: '$bgToastWarning',
+        border: '1px solid $hlProcess'
+      },
+      success: {
+        backgroundColor: '$bgToastSuccess',
+        border: '1px solid $hlSuccess'
+      },
+      failed: {
+        backgroundColor: '$bgToastFailed',
+        border: '1px solid $hlFailed'
+      },
+      pending: {
+        backgroundColor: '$bgToastWarning',
+        border: '1px solid $orange500'
+      }
+    },
+    hasAction: {
+      true: {
+        cursor: 'pointer'
+      }
+    }
+  }
+});
+const LeftBar = styled('div', {
+  width: '4px',
+  alignSelf: 'stretch',
+  borderRadius: '$lg',
+  marginRight: '$spacing-03',
+  variants: {
+    variant: {
+      info: {
+        backgroundColor: '$hlNews'
+      },
+      warning: {
+        backgroundColor: '$hlProcess'
+      },
+      success: {
+        backgroundColor: '$hlSuccess'
+      },
+      failed: {
+        backgroundColor: '$hlFailed'
+      },
+      pending: {
+        backgroundColor: '$orange500'
+      }
+    }
+  }
+});
+const DescriptionField = styled(Paragraph, {
+  display: '-webkit-box',
+  '-webkit-line-clamp': '3',
+  '-webkit-box-orient': 'vertical',
+  overflow: 'hidden',
+  whiteSpace: 'unset',
+  color: '$gray700'
+});
+const CloseButton = styled(Flex, {
+  cursor: 'pointer',
+  size: '20px',
+  borderRadius: '$round',
+  '&:hover': {
+    backgroundColor: 'rgba(0, 0, 0, .05)'
+  },
+  alignSelf: 'start',
+  variants: {
+    hasTitle: {
+      false: {
+        alignSelf: 'center'
+      }
+    }
+  }
+});
+const Toast = ({
+  id,
+  title,
+  description,
+  position,
+  dismissAfter,
+  variant,
+  onClick,
+  onRemove,
+  isExternalOfAction,
+  onClickOfAction,
+  captionOfAction,
+  hrefOfAction,
+  ...rest
+}) => {
+  const [isOpen, setIsOpen] = React.useState(false);
+  const isMobile = useMediaQuery(`(max-width: 767px`);
+  const close = React.useCallback(() => {
+    setIsOpen(false);
+  }, [setIsOpen]);
+  React.useEffect(() => {
+    let currentTimer = null;
+    setIsOpen(true);
+    currentTimer = setTimeout(() => {
+      close();
+    }, dismissAfter);
+    return () => {
+      if (currentTimer) {
+        clearTimeout(currentTimer);
+      }
+    };
+  }, [dismissAfter]);
+  return /*#__PURE__*/jsx(Transition, {
+    appear: true,
+    in: isOpen,
+    timeout: {
+      enter: ANIMATION_DURATION + 100,
+      exit: ANIMATION_DURATION + 400
+    },
+    unmountOnExit: true,
+    onExited: onRemove,
+    children: state => /*#__PURE__*/jsx(Root, {
+      id: id,
+      state: state,
+      css: {
+        maxWidth: isMobile ? '80vw' : TOAST_WIDTH
+      },
+      hPosition: position.includes('left') ? 'left' : 'right',
+      vPosition: position.includes('top') ? 'top' : 'bottom',
+      ...rest,
+      children: /*#__PURE__*/jsx(StyledToast, {
+        variant: variant,
+        hasAction: !!onClick,
+        onClick: onClick,
+        children: /*#__PURE__*/jsxs(Flex, {
+          direction: "column",
+          children: [/*#__PURE__*/jsxs(Flex, {
+            direction: "row",
+            children: [/*#__PURE__*/jsx(LeftBar, {
+              variant: variant
+            }), /*#__PURE__*/jsxs(Flex, {
+              gap: 2,
+              direction: "column",
+              css: {
+                flex: 1
+              },
+              children: [title && /*#__PURE__*/jsx(Flex, {
+                justify: "between",
+                children: /*#__PURE__*/jsx(Heading, {
+                  heading: "sectionTitle",
+                  css: {
+                    lineHeight: '$long-content-regular',
+                    flex: 1,
+                    whiteSpace: 'unset',
+                    overflow: 'hidden',
+                    textOverflow: 'ellipsis',
+                    color: '$gray900'
+                  },
+                  children: title
+                })
+              }), /*#__PURE__*/jsx(DescriptionField, {
+                paragraph: "longContentRegular",
+                children: description
+              })]
+            }), /*#__PURE__*/jsx(CloseButton, {
+              onClick: e => {
+                e.preventDefault();
+                e.stopPropagation();
+                close();
+              },
+              align: "center",
+              justify: "center",
+              hasTitle: !!title,
+              children: /*#__PURE__*/jsx(CloseOutline, {
+                color: colors.iconSecondary,
+                size: "16px"
+              })
+            })]
+          }), (hrefOfAction || isExternalOfAction || onClickOfAction) && /*#__PURE__*/jsx(Link, {
+            href: hrefOfAction,
+            isExternal: isExternalOfAction,
+            onClick: onClickOfAction,
+            color: variant,
+            css: {
+              alignSelf: 'self-end',
+              marginTop: '$spacing-03'
+            },
+            children: captionOfAction
+          })]
+        })
+      })
+    })
+  });
+};
+Toast.displayName = 'Toast';
+Toast.propTypes = {
+  id: PropTypes.string,
+  title: PropTypes.string,
+  description: PropTypes.string,
+  position: PropTypes.oneOf(positions).isRequired,
+  dismissAfter: PropTypes.number,
+  variant: PropTypes.string.isRequired,
+  onClick: PropTypes.func,
+  onRemove: PropTypes.func,
+  disabledOfflineIntercept: PropTypes.bool
+};
+Toast.defaultProps = {
+  dismissAfter: 5000
+};
+
+export { BOTTOM_LEFT_POSITION, BOTTOM_RIGHT_POSITION, TOP_LEFT_POSITION, TOP_RIGHT_POSITION, Toast as default };

package/components/toast/ToastContainer.esm.js

@@ -0,0 +1,73 @@
+import 'core-js/modules/es.iterator.constructor.js';
+import 'core-js/modules/es.iterator.map.js';
+import * as React from 'react';
+import { Portal } from '@majoo-ui/helpers';
+import Toast, { BOTTOM_LEFT_POSITION, BOTTOM_RIGHT_POSITION, TOP_LEFT_POSITION, TOP_RIGHT_POSITION } from './Toast.esm.js';
+import Flex from '../../layout/flex/Flex.esm.js';
+import { styled } from '../../config/stitches.config.esm.js';
+import ToastContext from './context/ToastContext.esm.js';
+import { jsx } from 'react/jsx-runtime';
+
+const ToastBox = styled(Flex, {
+  position: 'fixed',
+  variants: {
+    position: {
+      [TOP_RIGHT_POSITION]: {
+        top: '$toastPosition$top',
+        right: '$toastPosition$right',
+        flexDirection: 'column-reverse'
+      },
+      [TOP_LEFT_POSITION]: {
+        top: '$toastPosition$top',
+        left: '$toastPosition$left',
+        flexDirection: 'column-reverse'
+      },
+      [BOTTOM_RIGHT_POSITION]: {
+        bottom: '$toastPosition$bottom',
+        right: '$toastPosition$right',
+        flexDirection: 'column'
+      },
+      [BOTTOM_LEFT_POSITION]: {
+        bottom: '$toastPosition$bottom',
+        left: '$toastPosition$left',
+        flexDirection: 'column'
+      }
+    }
+  },
+  defaultVariants: {
+    position: 'top-right'
+  }
+});
+const ToastContainer = ({
+  toasts,
+  position
+}) => {
+  const {
+    removeToast,
+    theme
+  } = React.useContext(ToastContext);
+  return /*#__PURE__*/jsx(Portal, {
+    theme: theme,
+    style: {
+      top: 0,
+      left: 0,
+      position: 'absolute',
+      zIndex: 2147483647
+    },
+    children: /*#__PURE__*/jsx(ToastBox, {
+      position: position,
+      children: toasts.map((item, index) => {
+        const {
+          preventDuplicate,
+          ...toast
+        } = item;
+        return /*#__PURE__*/jsx(Toast, {
+          onRemove: () => removeToast(toast.id),
+          ...toast
+        }, preventDuplicate ? toast.id : `${toast.id}-${index}`);
+      })
+    })
+  });
+};
+
+export { ToastContainer as default };

package/components/toast/context/ToastContext.esm.js

@@ -0,0 +1,5 @@
+import * as React from 'react';
+
+const ToastContext = /*#__PURE__*/React.createContext({});
+
+export { ToastContext as default };

package/components/toast/context/ToastProvider.esm.js

@@ -0,0 +1,96 @@
+import 'core-js/modules/es.iterator.constructor.js';
+import 'core-js/modules/es.iterator.filter.js';
+import 'core-js/modules/es.iterator.for-each.js';
+import 'core-js/modules/es.iterator.some.js';
+import * as React from 'react';
+import { useState, useCallback } from 'react';
+import { TOP_RIGHT_POSITION, TOP_LEFT_POSITION, BOTTOM_RIGHT_POSITION, BOTTOM_LEFT_POSITION } from '../Toast.esm.js';
+import ToastContainer from '../ToastContainer.esm.js';
+import ToastContext from './ToastContext.esm.js';
+import useNavigatorOnLine from '../../../utils/useNavigatorOnline.esm.js';
+import { useTranslation } from 'react-i18next';
+import { catchError } from '../../../utils/request.esm.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+let toastCount = 0;
+const ToastProvider = ({
+  children,
+  theme
+}) => {
+  const isOnline = useNavigatorOnLine();
+  const [toasts, setToasts] = useState([]);
+  const {
+    t,
+    i18n
+  } = useTranslation(['MajooUI/toast', 'translation']);
+  const catchError$1 = (e, values) => {
+    let errorMsg = catchError(e);
+    if (values) {
+      Object.keys(values).forEach(key => {
+        errorMsg = errorMsg.replace(`$${key}`, values[key]);
+      });
+    }
+    return errorMsg;
+  };
+  const createToastInstance = useCallback(toast => {
+    const {
+      id,
+      disabledOfflineIntercept,
+      ...rest
+    } = toast;
+
+    // eslint-disable-next-line no-plusplus
+    const uniqueId = ++toastCount;
+    const toastId = toast.id || `${id || 'toast'}-${uniqueId}`;
+    const offlineInstance = {
+      title: t('offlineTitle', 'Internet Bermasalah'),
+      variant: 'failed',
+      description: t('offlineDescription', 'Tidak ada koneksi internet, mohon periksa jaringan'),
+      hrefOfAction: false,
+      onClickOfAction: false,
+      isExternalOfAction: false
+    };
+    return {
+      id: toastId,
+      position: TOP_RIGHT_POSITION,
+      ...rest,
+      description: /*#__PURE__*/React.isValidElement(toast.description) ? toast.description : catchError$1(toast.description, toast.values),
+      ...(!isOnline && !disabledOfflineIntercept && offlineInstance)
+    };
+  }, [isOnline, t, i18n.language]);
+  const addToast = React.useCallback(toast => {
+    const toastInstance = createToastInstance(toast);
+    setToasts(toastItems => {
+      if (!toastItems.some(currToast => toast.id === currToast.id) || !toast.preventDuplicate) {
+        return [...toastItems, toastInstance];
+      }
+      return toastItems;
+    });
+    return toastInstance;
+  }, [createToastInstance]);
+  const removeToast = React.useCallback(id => {
+    setToasts(toastItems => toastItems.filter(t => t.id !== id));
+  }, [setToasts]);
+  return /*#__PURE__*/jsxs(ToastContext.Provider, {
+    value: {
+      addToast,
+      removeToast,
+      theme
+    },
+    children: [children, /*#__PURE__*/jsx(ToastContainer, {
+      toasts: toasts.filter(toast => toast.position === TOP_RIGHT_POSITION),
+      position: TOP_RIGHT_POSITION
+    }), /*#__PURE__*/jsx(ToastContainer, {
+      toasts: toasts.filter(toast => toast.position === TOP_LEFT_POSITION),
+      position: TOP_LEFT_POSITION
+    }), /*#__PURE__*/jsx(ToastContainer, {
+      toasts: toasts.filter(toast => toast.position === BOTTOM_RIGHT_POSITION),
+      position: BOTTOM_RIGHT_POSITION
+    }), /*#__PURE__*/jsx(ToastContainer, {
+      toasts: toasts.filter(toast => toast.position === BOTTOM_LEFT_POSITION),
+      position: BOTTOM_LEFT_POSITION
+    })]
+  });
+};
+
+export { ToastProvider as default };

package/components/tooltip/Tooltip.esm.js

@@ -0,0 +1,175 @@
+import { useState } from 'react';
+import { styled, keyframes } from '../../config/stitches.config.esm.js';
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+import { foundations } from '@majoo-ui/core';
+import PropTypes from 'prop-types';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+const {
+  zIndices
+} = foundations;
+const slideUpAndFade = keyframes({
+  '0%': {
+    opacity: 0,
+    transform: 'translateY(2px)'
+  },
+  '100%': {
+    opacity: 1,
+    transform: 'translateY(0)'
+  }
+});
+const slideRightAndFade = keyframes({
+  '0%': {
+    opacity: 0,
+    transform: 'translateX(-2px)'
+  },
+  '100%': {
+    opacity: 1,
+    transform: 'translateX(0)'
+  }
+});
+const slideDownAndFade = keyframes({
+  '0%': {
+    opacity: 0,
+    transform: 'translateY(-2px)'
+  },
+  '100%': {
+    opacity: 1,
+    transform: 'translateY(0)'
+  }
+});
+const slideLeftAndFade = keyframes({
+  '0%': {
+    opacity: 0,
+    transform: 'translateX(2px)'
+  },
+  '100%': {
+    opacity: 1,
+    transform: 'translateX(0)'
+  }
+});
+const StyledContent = styled(TooltipPrimitive.Content, {
+  zIndex: zIndices.tooltip,
+  borderRadius: 8,
+  padding: '8px',
+  fontSize: '$helper',
+  letterSpacing: '$helper',
+  lineHeight: '$helper',
+  fontWeight: '400',
+  backgroundColor: '$white',
+  boxShadow: '$large',
+  '@media (prefers-reduced-motion: no-preference)': {
+    animationDuration: '400ms',
+    animationTimingFunction: 'cubic-bezier(0.16, 1, 0.3, 1)',
+    animationFillMode: 'forwards',
+    willChange: 'transform, opacity',
+    '&[data-state="delayed-open"]': {
+      '&[data-side="top"]': {
+        animationName: slideDownAndFade
+      },
+      '&[data-side="right"]': {
+        animationName: slideLeftAndFade
+      },
+      '&[data-side="bottom"]': {
+        animationName: slideUpAndFade
+      },
+      '&[data-side="left"]': {
+        animationName: slideRightAndFade
+      }
+    }
+  },
+  maxWidth: '100vw'
+});
+const TriggerSpan = styled('span', {
+  display: 'flex'
+});
+const StyledArrow = styled(TooltipPrimitive.Arrow, {
+  boxShadow: '$large'
+});
+const TooltipBase = styled(TooltipPrimitive.Root, {
+  defaultVariants: {
+    color: 'ligth'
+  }
+});
+
+// Exports
+const Provider = TooltipPrimitive.Provider;
+const TooltipTrigger = TooltipPrimitive.Trigger;
+const dark = {
+  color: foundations.colors.white,
+  backgroundColor: foundations.colors.gray800
+};
+const ligth = {
+  color: foundations.colors.textPrimary,
+  backgroundColor: foundations.colors.bgWhite
+};
+const darkArrow = {
+  fill: foundations.colors.gray800
+};
+const lightArrow = {
+  fill: foundations.colors.bgWhite
+};
+const Tooltip = ({
+  children,
+  label,
+  color,
+  css,
+  withClick,
+  side,
+  align,
+  delayDuration,
+  ...rest
+}) => {
+  const [open, setOpen] = useState(false);
+  return /*#__PURE__*/jsx(Provider, {
+    children: /*#__PURE__*/jsxs(TooltipBase, {
+      ...rest,
+      open: withClick ? open : undefined,
+      delayDuration: delayDuration,
+      children: [/*#__PURE__*/jsx(TooltipTrigger, {
+        asChild: true,
+        children: /*#__PURE__*/jsx(TriggerSpan, {
+          onClick: () => withClick && !open && setOpen(prev => !prev),
+          children: children
+        })
+      }), /*#__PURE__*/jsx(TooltipPrimitive.Portal, {
+        children: /*#__PURE__*/jsxs(StyledContent, {
+          align: align,
+          side: side,
+          sideOffset: 5,
+          css: color === 'dark' ? {
+            ...dark,
+            ...css
+          } : {
+            ...ligth,
+            ...css
+          },
+          onPointerDownOutside: () => setTimeout(() => {
+            setOpen(false);
+          }, 200),
+          children: [label, /*#__PURE__*/jsx(StyledArrow, {
+            offset: 10,
+            css: color === 'dark' ? darkArrow : lightArrow
+          })]
+        })
+      })]
+    })
+  });
+};
+Tooltip.propTypes = {
+  children: PropTypes.node,
+  label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+  color: PropTypes.string,
+  side: PropTypes.oneOf(['top', 'bottom', 'right', 'left']),
+  align: PropTypes.oneOf(['start', 'center', 'end'])
+};
+Tooltip.defaultProps = {
+  color: 'dark',
+  side: 'bottom',
+  align: 'center',
+  label: '',
+  children: /*#__PURE__*/jsx("div", {}),
+  delayDuration: 200
+};
+
+export { Provider, TooltipBase, TooltipTrigger, Tooltip as default };