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

package/components/form/components/InputSelectCheck/OptionGroupItem.esm.js

@@ -0,0 +1,39 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState } from 'react';
+import { styled } from '../../../../config/stitches.config.esm.js';
+import Box from '../../../../layout/box/Box.esm.js';
+import Flex from '../../../../layout/flex/Flex.esm.js';
+import { ChevronUpOutline, ChevronDownOutline } from '@majoo-ui/icons';
+
+const OptionGroup = styled(Flex, {
+  position: 'relative'
+});
+const OptionItem = styled(Flex, {
+  fontWeight: 600
+});
+const OptionChildren = styled(Box, {});
+const IconWrapper = styled(Box, {
+  position: 'absolute',
+  top: 10,
+  right: 0,
+  cursor: 'pointer'
+});
+function OptionGroupItem({
+  item,
+  children
+}) {
+  const [isShow, setIsShow] = useState(false);
+  return jsxs(OptionGroup, {
+    direction: "column",
+    children: [jsxs(OptionItem, {
+      children: [item, jsx(IconWrapper, {
+        onClick: () => setIsShow(!isShow),
+        children: isShow ? jsx(ChevronUpOutline, {}) : jsx(ChevronDownOutline, {})
+      })]
+    }), isShow && jsx(OptionChildren, {
+      children: children
+    })]
+  });
+}
+
+export { OptionGroupItem as default };

package/components/form/components/InputSelectCheck/icon/CheckOutline.esm.js

@@ -0,0 +1,33 @@
+import 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+const CheckOutline = props => /*#__PURE__*/jsxs("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  xmlSpace: "preserve",
+  width: "1em",
+  height: "1em",
+  style: {
+    shapeRendering: 'geometricPrecision',
+    textRendering: 'geometricPrecision',
+    imageRendering: 'optimizeQuality',
+    fillRule: 'evenodd',
+    clipRule: 'evenodd'
+  },
+  viewBox: "0 0 13.06 13.06",
+  ...props,
+  children: [/*#__PURE__*/jsx("path", {
+    d: "M0 2.5A2.5 2.5 0 0 1 2.5 0h8.05a2.5 2.5 0 0 1 2.5 2.5v8.05a2.5 2.5 0 0 1-2.5 2.5H2.5c-.66 0-1.3-.26-1.77-.73S0 11.21 0 10.55V2.5z",
+    style: {
+      fill: props.color,
+      fillRule: 'nonzero'
+    }
+  }), /*#__PURE__*/jsx("path", {
+    d: "M10.12 4.53a.47.47 0 0 0 .14-.33.47.47 0 0 0-.14-.33.47.47 0 0 0-.33-.14.47.47 0 0 0-.33.14L5.13 8.2 3.6 6.66a.47.47 0 0 0-.33-.14.47.47 0 0 0-.33.14.47.47 0 0 0-.14.33c0 .12.05.24.14.33l1.87 1.87c.04.04.09.08.15.1.06.02.12.04.18.04s.12-.01.18-.04c.06-.02.11-.06.15-.1l4.66-4.66z",
+    style: {
+      fill: '#fefefe',
+      fillRule: 'nonzero'
+    }
+  })]
+});
+
+export { CheckOutline as default };

package/components/form/components/InputSelectTag/InputSelectTag.esm.js

@@ -0,0 +1,62 @@
+import * as React from 'react';
+import InputSelectCheck from '../InputSelectCheck/InputSelectCheck.esm.js';
+import PropTypes from 'prop-types';
+import { jsx } from 'react/jsx-runtime';
+
+const InputSelectTag = /*#__PURE__*/React.forwardRef((props, ref) => {
+  return /*#__PURE__*/jsx(InputSelectCheck, {
+    ref: ref,
+    showSelectedTag: true,
+    ...props
+  });
+});
+InputSelectTag.propTypes = {
+  placeholder: PropTypes.string,
+  option: PropTypes.array.isRequired,
+  size: PropTypes.string,
+  disabled: PropTypes.bool,
+  readOnly: PropTypes.bool,
+  isInvalid: PropTypes.bool,
+  sortBy: PropTypes.string,
+  value: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.arrayOf(PropTypes.number)]),
+  onChange: PropTypes.func,
+  onRemoveItem: PropTypes.func,
+  search: PropTypes.bool,
+  placement: PropTypes.oneOf(['top', 'bottom']),
+  unremovableTags: PropTypes.arrayOf(PropTypes.string),
+  disabledOptions: PropTypes.arrayOf(PropTypes.string),
+  disabledSortChecked: PropTypes.bool,
+  textEmptyItem: PropTypes.string,
+  helperText: PropTypes.string,
+  showCounter: PropTypes.bool,
+  labelCounter: PropTypes.string,
+  collapsible: PropTypes.bool,
+  toggleInput: PropTypes.bool,
+  defaultValue: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.arrayOf(PropTypes.number)]),
+  fetchData: PropTypes.func,
+  onSearch: PropTypes.func,
+  isLoading: PropTypes.bool,
+  showTagSelectAll: PropTypes.bool,
+  maxSelectedItem: PropTypes.number,
+  mobileOnly: PropTypes.bool,
+  desktopOnly: PropTypes.bool
+};
+InputSelectTag.defaultProps = {
+  size: 'lg',
+  disabled: false,
+  readOnly: false,
+  isInvalid: false,
+  search: true,
+  placement: 'bottom',
+  value: [],
+  disabledOptions: [],
+  disabledSortChecked: false,
+  unremovableTags: [],
+  sortBy: 'name',
+  showCounter: false,
+  collapsible: true,
+  toggleInput: true,
+  defaultValue: []
+};
+
+export { InputSelectTag as default };

package/components/form/components/InputSignature/InputSignature.esm.js

@@ -0,0 +1,122 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React__default, { useState } from 'react';
+import Box from '../../../../layout/box/Box.esm.js';
+import Flex from '../../../../layout/flex/Flex.esm.js';
+import SignatureModal from './SignatureModal.esm.js';
+import { styled } from '@stitches/react';
+import { useTranslation } from 'react-i18next';
+import Text from '../../../text/Text.esm.js';
+import { CloseFilled } from '@majoo-ui/icons';
+import { foundations } from '@majoo-ui/core';
+import { useMountedLayoutEffect } from 'react-table';
+
+const SignatureContainer = styled(Flex, {
+  position: 'relative',
+  border: '2px dashed $gray300',
+  borderRadius: 8,
+  height: '88px',
+  width: '100%',
+  cursor: 'pointer',
+  transition: '0.2s',
+  transitionDuration: '0.5s',
+  justifyContent: 'center',
+  alignItems: 'center',
+  background: '$bgGray',
+  '&:hover': {
+    border: '2px dashed $primary400',
+    background: '$bgSelectedLight'
+  },
+  variants: {
+    hasContent: {
+      true: {
+        '&:hover': {
+          background: '$bgGray'
+        }
+      }
+    },
+    showError: {
+      true: {
+        border: '2px dashed $red400',
+        '&:hover': {
+          border: '2px dashed  $red300',
+          background: '$bgFailed'
+        }
+      }
+    },
+    disabled: {
+      true: {
+        cursor: 'not-allowed',
+        '&:hover': {
+          background: '$bgGray'
+        }
+      }
+    }
+  }
+});
+function InputSignature({
+  title,
+  onChange,
+  defaultValue = '',
+  disabled = false,
+  css,
+  isMobile
+}) {
+  const {
+    t
+  } = useTranslation(['MajooUI/inputSignature', 'translation']);
+  const [signatureImage, setSignatureImage] = useState(defaultValue);
+  const [open, setOpen] = useState(false);
+  const handleSave = signature => {
+    setSignatureImage(signature);
+  };
+  useMountedLayoutEffect(() => {
+    onChange === null || onChange === void 0 ? void 0 : onChange(signatureImage);
+  }, [signatureImage]);
+  return jsxs(React__default.Fragment, {
+    children: [jsx(SignatureContainer, {
+      hasContent: !!signatureImage,
+      onClick: () => {
+        if (!disabled && !signatureImage) {
+          setOpen(true);
+        }
+      },
+      disabled: disabled,
+      css: css,
+      children: signatureImage ? jsxs(React__default.Fragment, {
+        children: [!disabled ? jsx(Box, {
+          css: {
+            position: 'absolute',
+            top: '8px',
+            right: '8px'
+          },
+          onClick: e => {
+            e.stopPropagation();
+            setSignatureImage('');
+          },
+          children: jsx(CloseFilled, {
+            color: foundations.colors.iconRed
+          })
+        }) : null, jsx("img", {
+          src: signatureImage,
+          alt: "signature",
+          style: {
+            height: '100%'
+          }
+        })]
+      }) : jsx(Text, {
+        variant: "label",
+        color: "disable",
+        children: t('placeholder', 'Tanda tangan di sini')
+      })
+    }), jsx(SignatureModal, {
+      t: t,
+      open: open,
+      onOpenChange: setOpen,
+      onSave: handleSave,
+      isMobile: isMobile,
+      title: title || signatureImage ? t('editTitle', 'Ubah Tanda Tangan') : t('addTitle', 'Tambah Tanda Tangan')
+    })]
+  });
+}
+
+export { InputSignature, InputSignature as default };

package/components/form/components/InputSignature/SignatureModal.esm.js

@@ -0,0 +1,67 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useRef } from 'react';
+import ModalDialog, { ModalDialogTitle, ModalDialogContent, ModalDialogFooter } from '../../../modalDialog/ModalDialog.esm.js';
+import { Button } from '../../../button/Button.esm.js';
+import { DialogClose } from '../../../dialog/Dialog.esm.js';
+import SignaturePad from 'react-signature-pad-wrapper';
+import { foundations } from '@majoo-ui/core';
+
+const SignatureModal = ({
+  t,
+  open,
+  onOpenChange,
+  onSave,
+  title,
+  isMobile
+}) => {
+  const signaturePadRef = useRef(null);
+  const handleSave = () => {
+    if (signaturePadRef.current) {
+      const signature = signaturePadRef.current.toDataURL();
+      onSave === null || onSave === void 0 ? void 0 : onSave(signature);
+    }
+    onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(false);
+  };
+  return jsxs(ModalDialog, {
+    open: open,
+    onOpenChange: onOpenChange,
+    isMobile: isMobile,
+    children: [jsx(ModalDialogTitle, {
+      children: title
+    }), jsx(ModalDialogContent, {
+      children: jsx(SignaturePad, {
+        ref: signaturePadRef,
+        height: 256,
+        canvasProps: {
+          style: {
+            border: '2px dashed #C0C4C4',
+            borderRadius: '8px'
+          }
+        },
+        options: {
+          penColor: 'black',
+          backgroundColor: foundations.colors.bgGray
+        }
+      })
+    }), jsxs(ModalDialogFooter, {
+      css: {
+        display: 'flex',
+        gap: '$compact'
+      },
+      children: [jsx(DialogClose, {
+        asChild: true,
+        children: jsx(Button, {
+          buttonType: "ghost",
+          size: "sm",
+          children: t('label.cancel', 'Batal')
+        })
+      }), jsx(Button, {
+        size: "sm",
+        onClick: handleSave,
+        children: t('label.save', 'Simpan')
+      })]
+    })]
+  });
+};
+
+export { SignatureModal as default };

package/components/form/components/InputSwitch/InputSwitch.esm.js

@@ -0,0 +1,96 @@
+import 'react';
+import { styled } from '../../../../config/stitches.config.esm.js';
+import PropTypes from 'prop-types';
+import * as SwitchPrimitive from '@radix-ui/react-switch';
+import { jsx } from 'react/jsx-runtime';
+
+const StyledThumb = styled(SwitchPrimitive.Thumb, {
+  display: 'block',
+  width: '16px',
+  height: '16px',
+  backgroundColor: 'white',
+  borderRadius: '$round',
+  transition: 'transform 100ms',
+  transform: 'translateX(4px)',
+  willChange: 'transform',
+  cursor: 'pointer',
+  '&[data-state="checked"]': {
+    transform: 'translateX(36px)'
+  }
+});
+const StyledSwitch = styled(SwitchPrimitive.Root, {
+  all: 'unset',
+  width: '56px',
+  height: '24px',
+  backgroundColor: '$formDefault',
+  borderRadius: '9999px',
+  position: 'relative',
+  cursor: 'pointer',
+  WebkitTapHighlightColor: 'rgba(0, 0, 0, 0)',
+  '&:focus': {
+    outline: '1.5px solid $colors$borderFocus',
+    outlineOffset: '1px'
+  },
+  '&::before': {
+    display: 'block',
+    content: 'attr(dataOffLabel)',
+    position: 'absolute',
+    fontWeight: 600,
+    fontSize: '$label',
+    lineHeight: '$label',
+    letterSpacing: '$label',
+    color: 'white',
+    right: '$spacing-03'
+  },
+  '&[data-state="checked"]': {
+    backgroundColor: '$bgBrand',
+    '&::before': {
+      display: 'block',
+      content: 'attr(dataOnLabel)',
+      position: 'absolute',
+      fontWeight: 600,
+      fontSize: '$label',
+      lineHeight: '$label',
+      letterSpacing: '$label',
+      color: 'white',
+      left: '$spacing-03'
+    }
+  },
+  '&:disabled': {
+    backgroundColor: '$gray200',
+    '&::before': {
+      color: '$textDisable'
+    },
+    [`& ${StyledThumb}`]: {
+      backgroundColor: '$iconDisable'
+    }
+  }
+});
+const InputSwitch = ({
+  id,
+  defaultChecked,
+  dataOnLabel,
+  dataOffLabel,
+  disabled,
+  ...props
+}) => /*#__PURE__*/jsx(StyledSwitch, {
+  defaultChecked: defaultChecked,
+  dataOnLabel: dataOnLabel,
+  dataOffLabel: dataOffLabel,
+  disabled: disabled,
+  id: id,
+  ...props,
+  children: /*#__PURE__*/jsx(StyledThumb, {})
+});
+InputSwitch.propTypes = {
+  id: PropTypes.string,
+  disabled: PropTypes.bool,
+  dataOnLabel: PropTypes.string,
+  dataOffLabel: PropTypes.string,
+  defaultChecked: PropTypes.bool,
+  checked: PropTypes.bool,
+  onCheckedChange: PropTypes.func
+};
+InputSwitch.displayName = 'InputSwitch';
+
+export { InputSwitch as default };

package/components/form/components/InputSwitch/InputSwitchWithImage.esm.js

@@ -0,0 +1,136 @@
+import 'react';
+import { styled } from '../../../../config/stitches.config.esm.js';
+import PropTypes from 'prop-types';
+import * as SwitchPrimitive from '@radix-ui/react-switch';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+const StyledThumb = styled(SwitchPrimitive.Thumb, {
+  display: 'block',
+  width: '16px',
+  height: '16px',
+  backgroundColor: 'white',
+  boxShadow: '0px 1px 3px grey',
+  borderRadius: '$round',
+  transition: 'transform 100ms',
+  transform: 'translateX(4px)',
+  willChange: 'transform',
+  cursor: 'pointer',
+  position: 'relative',
+  overflow: 'hidden',
+  '&[data-state="checked"]': {
+    transform: 'translateX(36px)'
+  },
+  'img': {
+    width: '100%',
+    height: '100%',
+    objectFit: 'contain',
+    display: 'block'
+  },
+  '.on': {
+    display: 'none'
+  },
+  '.off': {
+    display: 'block'
+  }
+});
+const StyledSwitch = styled(SwitchPrimitive.Root, {
+  all: 'unset',
+  width: '56px',
+  height: '24px',
+  backgroundColor: 'white',
+  borderRadius: '9999px',
+  border: '1px solid $gray150',
+  position: 'relative',
+  cursor: 'pointer',
+  WebkitTapHighlightColor: 'rgba(0, 0, 0, 0)',
+  '&:focus': {
+    outline: '1.5px solid $colors$borderFocus'
+  },
+  '&::before': {
+    display: 'block',
+    content: 'attr(dataOffLabel)',
+    position: 'absolute',
+    fontWeight: 600,
+    fontSize: '$label',
+    lineHeight: '$label',
+    letterSpacing: '$label',
+    color: '$textPrimary',
+    right: '$spacing-03'
+  },
+  '&[data-state="checked"]': {
+    '&::before': {
+      display: 'block',
+      content: 'attr(dataOnLabel)',
+      position: 'absolute',
+      fontWeight: 600,
+      fontSize: '$label',
+      lineHeight: '$label',
+      letterSpacing: '$label',
+      color: '$textPrimary',
+      left: '$spacing-03'
+    },
+    [`& ${StyledThumb}`]: {
+      '.on': {
+        display: 'block'
+      },
+      '.off': {
+        display: 'none'
+      }
+    }
+  },
+  '&:disabled': {
+    backgroundColor: '$gray200',
+    '&::before': {
+      color: '$textDisable'
+    },
+    [`& ${StyledThumb}`]: {
+      backgroundColor: '$iconDisable'
+    }
+  }
+});
+const InputSwitchWithImage = ({
+  id,
+  defaultChecked,
+  dataOnLabel,
+  dataOffLabel,
+  disabled,
+  onImage,
+  offImage,
+  thumbAltOn,
+  thumbAltOff,
+  ...props
+}) => /*#__PURE__*/jsx(StyledSwitch, {
+  defaultChecked: defaultChecked,
+  dataOnLabel: dataOnLabel,
+  dataOffLabel: dataOffLabel,
+  disabled: disabled,
+  id: id,
+  ...props,
+  children: /*#__PURE__*/jsxs(StyledThumb, {
+    children: [onImage && /*#__PURE__*/jsx("img", {
+      src: onImage,
+      alt: thumbAltOn,
+      className: "on"
+    }), offImage && /*#__PURE__*/jsx("img", {
+      src: offImage,
+      alt: thumbAltOff,
+      className: "off"
+    })]
+  })
+});
+InputSwitchWithImage.propTypes = {
+  id: PropTypes.string,
+  disabled: PropTypes.bool,
+  dataOnLabel: PropTypes.string,
+  dataOffLabel: PropTypes.string,
+  defaultChecked: PropTypes.bool,
+  checked: PropTypes.bool,
+  onCheckedChange: PropTypes.func,
+  onImage: PropTypes.string,
+  offImage: PropTypes.string,
+  thumbAltOn: PropTypes.string,
+  thumbAltOff: PropTypes.string
+};
+InputSwitchWithImage.displayName = 'InputSwitchWithImage';
+
+export { InputSwitchWithImage as default };