@majoo-ui/react 2.0.0 → 2.1.0-rc.0

package/components/pagination/PaginationButton.esm.js

@@ -0,0 +1,346 @@
+import 'core-js/modules/es.array.push.js';
+import 'core-js/modules/es.iterator.constructor.js';
+import 'core-js/modules/es.iterator.map.js';
+import { ArrowLeftOutline, ArrowRightOutline } from '@majoo-ui/icons';
+import debounce from 'lodash.debounce';
+import { useRef, useState, useEffect, useCallback } from 'react';
+import Box from '../../layout/box/Box.esm.js';
+import Flex from '../../layout/flex/Flex.esm.js';
+import { Button } from '../button/Button.esm.js';
+import { InputNumber } from '../form/components/InputNumber/InputNumber.esm.js';
+import ModalDialog, { ModalDialogTrigger, ModalDialogTitle, ModalDialogContent, ModalDialogFooter } from '../modalDialog/ModalDialog.esm.js';
+import { Separator } from '../separator/Separator.esm.js';
+import Text from '../text/Text.esm.js';
+import { colors, styled } from '../../config/stitches.config.esm.js';
+import useMediaQuery from '../../utils/useMediaQuery.esm.js';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import IconButton from '../iconButton/IconButton.esm.js';
+
+const PrevNextButton = styled(Text, {
+  padding: '$spacing-01',
+  cursor: 'pointer',
+  userSelect: 'none',
+  borderRadius: '$md',
+  '&:hover': {
+    backgroundColor: '$primary50'
+  },
+  '&:active': {
+    backgroundColor: '$primary100'
+  },
+  variants: {
+    isDisabled: {
+      true: {
+        '&:hover': {
+          backgroundColor: 'transparent'
+        },
+        cursor: 'default'
+      }
+    }
+  }
+});
+const GoToPageBox = styled(Flex, {
+  height: 28,
+  width: 'fit-content',
+  minWidth: 28,
+  border: '1px solid $bgBorder',
+  borderRadius: 5,
+  boxShadow: '0px 4px 10px rgba(0, 0, 0, 0.07)',
+  fontSize: '$label',
+  cursor: 'pointer'
+});
+const PrevNextButtonIcon = ({
+  onClick,
+  iconType,
+  hidden
+}) => {
+  const [isHover, setIsHover] = useState(false);
+  function handleEnter() {
+    setIsHover(true);
+  }
+  function handleLeave() {
+    setIsHover(false);
+  }
+  return /*#__PURE__*/jsx(Button, {
+    css: {
+      height: 40,
+      width: 48,
+      minWidth: 48
+    },
+    hidden: hidden,
+    type: "button",
+    buttonType: "ghost",
+    onMouseEnter: handleEnter,
+    onMouseLeave: handleLeave,
+    onClick: onClick,
+    children: iconType === 'prev' ? /*#__PURE__*/jsx(ArrowLeftOutline, {
+      color: isHover ? colors.iconBrand : colors.iconPrimary
+    }) : /*#__PURE__*/jsx(ArrowRightOutline, {
+      color: isHover ? colors.iconBrand : colors.iconPrimary
+    })
+  });
+};
+const PageButton = ({
+  isActive,
+  onClick,
+  ...props
+}) => {
+  return /*#__PURE__*/jsx(Button, {
+    type: "button",
+    onClick: onClick,
+    buttonType: !isActive ? 'ghost' : 'primary',
+    css: {
+      minWidth: 'initial',
+      width: 40,
+      height: 40,
+      padding: 0,
+      color: !isActive && '$textSecondary',
+      '@md': {
+        width: 28,
+        height: 28
+      }
+    },
+    ...props
+  });
+};
+const PaginationButton = ({
+  currentPage,
+  totalPages,
+  onSelect,
+  hideInputPageSection,
+  previousButton,
+  nextButton,
+  gotoPageText,
+  goToPagePlaceholder,
+  btnCancelText,
+  btnSubmitText
+}) => {
+  const isLg = useMediaQuery('(max-width: 800px)');
+  const handleSelectPage = page => {
+    if (onSelect && page > 0 && page <= totalPages) {
+      onSelect(page);
+    }
+  };
+  const inputPageRef = useRef();
+  const dialogPageRef = useRef();
+  const [goToPage, setGoToPage] = useState();
+  useEffect(() => {
+    if (inputPageRef.current) {
+      inputPageRef.current.value = '';
+    }
+  }, [currentPage]);
+  const debouncedGoToPage = useCallback(debounce(handleSelectPage, 1000), [totalPages]);
+  const generatePages = () => {
+    const maxButtons = isLg ? currentPage < 3 ? 3 : currentPage >= 4 ? currentPage > totalPages - 2 ? 3 : 1 : 2 : 5;
+    const pageButtons = [];
+    let startPage;
+    let endPage;
+    if (maxButtons < totalPages) {
+      startPage = Math.max(Math.min(currentPage - Math.floor(maxButtons / 2), totalPages - maxButtons + 1), 1);
+      endPage = startPage + maxButtons - 1;
+    } else {
+      startPage = 1;
+      endPage = totalPages;
+    }
+
+    // eslint-disable-next-line no-plusplus
+    for (let page = startPage; page <= endPage; ++page) {
+      pageButtons.push(page);
+    }
+    if (startPage > 1) {
+      if (startPage > 2) {
+        pageButtons.unshift('\u2026');
+      }
+      pageButtons.unshift(1);
+    }
+    if (endPage < totalPages) {
+      if (endPage < totalPages - 1) {
+        pageButtons.push('\u2026');
+      }
+      pageButtons.push(totalPages);
+    }
+    return pageButtons;
+  };
+  const isMobilePagination = useMediaQuery('(max-width: 767px)');
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/jsxs(Flex, {
+      align: "center",
+      direction: isMobilePagination ? 'column' : 'row',
+      gap: isMobilePagination ? 2 : 0,
+      css: {
+        height: isMobilePagination ? 'unset' : 28
+      },
+      children: [/*#__PURE__*/jsxs(Flex, {
+        align: "center",
+        gap: 2,
+        children: [(currentPage > 1 || totalPages === 1) && /*#__PURE__*/jsxs(Fragment, {
+          children: [!isLg && /*#__PURE__*/jsx(IconButton, {
+            type: "button",
+            buttonType: "secondary",
+            disabled: currentPage === 1,
+            onClick: () => handleSelectPage(1),
+            css: {
+              color: '$iconPrimary'
+            },
+            children: /*#__PURE__*/jsx(ArrowLeftOutline, {
+              color: "currentColor"
+            })
+          }), isLg ? /*#__PURE__*/jsx(PrevNextButtonIcon, {
+            type: "button",
+            buttonType: "ghost",
+            iconType: "prev",
+            hidden: totalPages < 2,
+            onClick: () => handleSelectPage(currentPage - 1)
+          }) : /*#__PURE__*/jsx(PrevNextButton, {
+            variant: "caption",
+            isDisabled: currentPage === 1,
+            color: currentPage === 1 ? 'disable' : 'primary',
+            onClick: () => handleSelectPage(currentPage - 1),
+            children: previousButton || 'Sebelumnya'
+          })]
+        }), generatePages().map((page, index) => {
+          return /*#__PURE__*/jsx(PageButton, {
+            isActive: page === currentPage,
+            onClick: () => typeof page === 'number' ? handleSelectPage(page) : null,
+            children: page
+          }, index.toString());
+        }), (currentPage < totalPages || totalPages === 1) && /*#__PURE__*/jsxs(Fragment, {
+          children: [isLg ? /*#__PURE__*/jsx(PrevNextButtonIcon, {
+            type: "button",
+            buttonType: "ghost",
+            iconType: "next",
+            hidden: totalPages < 2,
+            onClick: () => handleSelectPage(currentPage + 1)
+          }) : /*#__PURE__*/jsx(PrevNextButton, {
+            variant: "caption",
+            isDisabled: currentPage === totalPages,
+            color: currentPage === totalPages ? 'disable' : 'primary',
+            onClick: () => handleSelectPage(currentPage + 1),
+            children: nextButton || 'Selanjutnya'
+          }), !isLg && /*#__PURE__*/jsx(IconButton, {
+            type: "button",
+            buttonType: "secondary",
+            disabled: currentPage === totalPages,
+            onClick: () => handleSelectPage(totalPages),
+            css: {
+              color: '$iconPrimary'
+            },
+            children: /*#__PURE__*/jsx(ArrowRightOutline, {
+              color: "currentColor"
+            })
+          })]
+        })]
+      }), !hideInputPageSection && totalPages > 1 && /*#__PURE__*/jsxs(Fragment, {
+        children: [/*#__PURE__*/jsx(Separator, {
+          orientation: "vertical",
+          css: {
+            height: '100%',
+            margin: '0 $spacing-03 0 $spacing-01',
+            display: isMobilePagination ? 'none' : 'inherit'
+          }
+        }), /*#__PURE__*/jsxs(Box, {
+          css: {
+            display: 'flex',
+            alignItems: 'center',
+            gap: 8,
+            flex: isMobilePagination ? 1 : 'unset'
+          },
+          children: [/*#__PURE__*/jsx(Text, {
+            variant: "caption",
+            css: {
+              fontSize: 12,
+              fontWeight: 400,
+              color: '$textPrimary',
+              ...(isMobilePagination && {
+                backgroundColor: '$bgWhite',
+                padding: 4,
+                borderRadius: 4
+              })
+            },
+            children: gotoPageText || 'Ke Halaman'
+          }), isMobilePagination ? /*#__PURE__*/jsx(GoToPageBox, {
+            align: "center",
+            justify: "center",
+            onClick: () => dialogPageRef.current?.click(),
+            children: goToPage
+          }) : /*#__PURE__*/jsx(InputNumber, {
+            ref: inputPageRef,
+            isAllowed: ({
+              floatValue
+            }) => floatValue === undefined || floatValue > 0 && floatValue <= totalPages,
+            allowNegative: false,
+            onChange: e => {
+              if (e.target.value) {
+                debouncedGoToPage(Number(e.target.value));
+              }
+            },
+            css: {
+              width: 28,
+              height: 28,
+              padding: 0,
+              textAlign: 'center',
+              '&::-webkit-inner-spin-button': {
+                '-webkit-appearance': 'none',
+                margin: 0
+              }
+            }
+          })]
+        })]
+      })]
+    }), /*#__PURE__*/jsxs(ModalDialog, {
+      children: [/*#__PURE__*/jsx(ModalDialogTrigger, {
+        style: {
+          display: 'none'
+        },
+        children: /*#__PURE__*/jsx("div", {
+          ref: dialogPageRef
+        })
+      }), /*#__PURE__*/jsx(ModalDialogTitle, {
+        children: gotoPageText || 'Ke Halaman'
+      }), /*#__PURE__*/jsx(ModalDialogContent, {
+        children: /*#__PURE__*/jsx("form", {
+          onSubmit: () => {
+            debouncedGoToPage(Number(goToPage));
+            dialogPageRef.current?.click();
+          },
+          children: /*#__PURE__*/jsx(InputNumber, {
+            ref: inputPageRef,
+            placeholder: goToPagePlaceholder || 'Contoh: 10',
+            isAllowed: ({
+              floatValue
+            }) => floatValue === undefined || floatValue > 0 && floatValue <= totalPages,
+            allowNegative: false,
+            onChange: e => setGoToPage(e.target?.value)
+          })
+        })
+      }), /*#__PURE__*/jsx(ModalDialogFooter, {
+        children: /*#__PURE__*/jsxs(Flex, {
+          css: {
+            width: '100%'
+          },
+          gap: 4,
+          children: [/*#__PURE__*/jsx(Button, {
+            block: true,
+            type: "button",
+            buttonType: "ghost",
+            onClick: () => {
+              setGoToPage(null);
+              dialogPageRef.current?.click();
+            },
+            children: btnCancelText || 'Batal'
+          }), /*#__PURE__*/jsx(Button, {
+            block: true,
+            type: "button",
+            buttonType: "primary",
+            onClick: () => {
+              debouncedGoToPage(Number(goToPage));
+              dialogPageRef.current?.click();
+            },
+            children: btnSubmitText || 'Lanjutkan'
+          })]
+        })
+      })]
+    })]
+  });
+};
+
+export { PaginationButton as default };

package/components/pagination/PaginationInfo.esm.js

@@ -0,0 +1,146 @@
+import 'core-js/modules/es.iterator.constructor.js';
+import 'core-js/modules/es.iterator.map.js';
+import { useRef } from 'react';
+import { ChevronDownOutline } from '@majoo-ui/icons';
+import { colors, styled } from '../../config/stitches.config.esm.js';
+import Box from '../../layout/box/Box.esm.js';
+import Flex from '../../layout/flex/Flex.esm.js';
+import Text from '../text/Text.esm.js';
+import ModalDialog, { ModalDialogTrigger, ModalDialogTitle, ModalDialogContent } from '../modalDialog/ModalDialog.esm.js';
+import useMediaQuery from '../../utils/useMediaQuery.esm.js';
+import { ConditionalWrapper } from '../../wrapper/ConditionalWrapper.esm.js';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { Popover, PopoverTrigger, PopoverContent, PopoverClose } from '../popover/Popover.esm.js';
+
+const LimitContainer = styled(Flex, {
+  cursor: 'pointer'
+});
+const limitItemContainerStyle = selected => ({
+  justifyContent: 'center',
+  width: '100%',
+  padding: '$spacing-02',
+  cursor: 'pointer',
+  backgroundColor: selected ? '$primary100' : 'transparent',
+  '&:hover': {
+    backgroundColor: '$primary50'
+  },
+  '&:active': {
+    backgroundColor: '$primary100'
+  }
+});
+function PaginationInfo({
+  limits,
+  selectedLimit,
+  currentPage,
+  totalData,
+  onChange,
+  showingText,
+  showingCountText,
+  dialogShowingText,
+  ...rest
+}) {
+  const from = (currentPage - 1) * selectedLimit + 1;
+  const to = selectedLimit * currentPage < totalData ? selectedLimit * currentPage : totalData;
+  const dialogLimitRef = useRef();
+  const isMobilePagination = useMediaQuery('(max-width: 767px)');
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/jsxs(Flex, {
+      align: "center",
+      gap: 3,
+      children: [/*#__PURE__*/jsx(Text, {
+        color: "secondary",
+        variant: "label",
+        children: showingText || 'Tampilkan:'
+      }), /*#__PURE__*/jsxs(Popover, {
+        children: [/*#__PURE__*/jsx(ConditionalWrapper, {
+          condition: !isMobilePagination,
+          wrapper: child => /*#__PURE__*/jsx(PopoverTrigger, {
+            children: child
+          }),
+          children: /*#__PURE__*/jsxs(LimitContainer, {
+            align: "center",
+            onClick: () => {
+              if (isMobilePagination) {
+                dialogLimitRef.current?.click();
+              }
+            },
+            children: [/*#__PURE__*/jsx(Text, {
+              color: "primary",
+              variant: "status",
+              children: selectedLimit.toString()
+            }), /*#__PURE__*/jsx(ChevronDownOutline, {
+              color: colors.gray400
+            })]
+          })
+        }), /*#__PURE__*/jsx(PopoverContent, {
+          placement: "top",
+          children: /*#__PURE__*/jsx(Flex, {
+            direction: "column",
+            align: "center",
+            css: {
+              backgroundColor: '$bgWhite',
+              boxShadow: '$small'
+            },
+            children: limits?.map(limit => /*#__PURE__*/jsx(PopoverClose, {
+              css: limitItemContainerStyle(selectedLimit === limit),
+              onClick: () => onChange(limit),
+              children: /*#__PURE__*/jsx(Text, {
+                color: "primary",
+                variant: "status",
+                children: limit.toString()
+              })
+            }, limit))
+          })
+        })]
+      }), /*#__PURE__*/jsx(Text, {
+        color: "secondary",
+        variant: "label",
+        children: typeof showingCountText === 'function' ? showingCountText({
+          from,
+          to,
+          total: totalData
+        }) : showingCountText || `Ditampilkan ${from} - ${to} dari ${totalData} data`
+      })]
+    }), /*#__PURE__*/jsxs(ModalDialog, {
+      children: [/*#__PURE__*/jsx(ModalDialogTrigger, {
+        style: {
+          display: 'none'
+        },
+        children: /*#__PURE__*/jsx("div", {
+          ref: dialogLimitRef
+        })
+      }), /*#__PURE__*/jsx(ModalDialogTitle, {
+        children: dialogShowingText || 'Tampilkan Data'
+      }), /*#__PURE__*/jsx(ModalDialogContent, {
+        style: {
+          padding: 0
+        },
+        children: /*#__PURE__*/jsx(Box, {
+          css: {
+            padding: '$spacing-04 0px'
+          },
+          children: limits?.map(limit => /*#__PURE__*/jsx(Flex, {
+            css: {
+              height: 44,
+              width: '100%',
+              padding: '$spacing-03 $spacing-06',
+              cursor: 'pointer',
+              background: selectedLimit === limit && '$bgSelectedLight',
+              '&:hover': {
+                background: '$gray50'
+              }
+            },
+            align: "center",
+            onClick: () => {
+              onChange(limit);
+              dialogLimitRef.current?.click();
+            },
+            children: limit.toString()
+          }, limit))
+        })
+      })]
+    })]
+  });
+}
+
+export { PaginationInfo as default };

package/components/paper/Paper.esm.js

@@ -0,0 +1,76 @@
+import 'react';
+import { styled } from '../../config/stitches.config.esm.js';
+import PropTypes from 'prop-types';
+import { jsx } from 'react/jsx-runtime';
+
+const PaperComponent = styled('div', {
+  padding: '20px',
+  height: 'auto',
+  width: 'auto',
+  borderRadius: '$lg',
+  backgroundColor: '$white',
+  boxShadow: '0px 2px 12px #00000014',
+  variants: {
+    responsive: {
+      true: {
+        backgroundColor: 'transparent',
+        boxShadow: 'none',
+        '@md': {
+          backgroundColor: '$white',
+          boxShadow: '0px 2px 12px #00000014'
+        }
+      }
+    },
+    mobileOnly: {
+      true: {
+        '@lg': {
+          display: 'none !important'
+        }
+      }
+    },
+    desktopOnly: {
+      true: {
+        display: 'none !important',
+        '@lg': {
+          display: 'block !important'
+        }
+      }
+    }
+  }
+});
+const Paper = ({
+  className,
+  children,
+  radius,
+  padding,
+  width,
+  height,
+  ...props
+}) => {
+  return /*#__PURE__*/jsx(PaperComponent, {
+    className: className,
+    css: {
+      width: width,
+      height: height,
+      padding: padding,
+      borderRadius: radius,
+      ...props.css
+    },
+    ...props,
+    children: children
+  });
+};
+Paper.propTypes = {
+  className: PropTypes.string,
+  radius: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  padding: PropTypes.string,
+  width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  height: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+};
+Paper.defaultProps = {
+  className: '',
+  radius: '$lg',
+  padding: '20px'
+};
+
+export { Paper, PaperComponent, Paper as default };

package/components/paragraph/Paragraph.esm.js

@@ -0,0 +1,52 @@
+import 'react';
+import { styled } from '../../config/stitches.config.esm.js';
+import Text from '../text/Text.esm.js';
+import PropTypes from 'prop-types';
+import { seqNumberVariants } from '../../utils/variant.esm.js';
+
+const Paragraph = styled(Text, {
+  variants: {
+    paragraph: {
+      shortContentBold: {
+        fontSize: '$short-content-bold',
+        lineHeight: '$short-content-bold',
+        letterSpacing: '$short-content-bold',
+        fontWeight: '600'
+      },
+      shortContentRegular: {
+        fontSize: '$short-content-regular',
+        lineHeight: '$short-content-regular',
+        letterSpacing: '$short-content-regular',
+        fontWeight: '400'
+      },
+      longContentRegular: {
+        fontSize: '$long-content-regular',
+        lineHeight: '$long-content-regular',
+        letterSpacing: '$long-content-regular',
+        fontWeight: '400'
+      }
+    },
+    maxLine: seqNumberVariants(value => ({
+      '-webkit-line-clamp': `${value}`,
+      display: '-webkit-box',
+      '-webkit-box-orient': 'vertical',
+      overflow: 'hidden'
+    }), 10)
+  },
+  defaultVariants: {
+    paragraph: 'shortContentRegular',
+    as: 'p'
+  }
+});
+Paragraph.propTypes = {
+  paragraph: PropTypes.oneOf(['shortContentBold', 'shortContentRegular', 'longContentRegular']),
+  uppercase: PropTypes.bool,
+  isTruncated: PropTypes.bool
+};
+Paragraph.defaultProps = {
+  paragraph: 'shortContentRegular',
+  as: 'p'
+};
+Paragraph.displayName = 'Paragraph';
+
+export { Paragraph as default };