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

package/colors/Colors.esm.js

@@ -0,0 +1,93 @@
+import 'core-js/modules/es.iterator.constructor.js';
+import 'core-js/modules/es.iterator.map.js';
+import React__default 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 { Paper } from '../components/paper/Paper.esm.js';
+import ToastContext from '../components/toast/context/ToastContext.esm.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+const StyledPaper = styled(Paper, {
+  borderRadius: '10px 10px 0 0',
+  padding: 15,
+  width: '100% !important',
+  height: '$spacing-09 !important'
+});
+const StyledParagraph = styled('span', {
+  margin: '7px 0',
+  marginTop: 2,
+  fontSize: '9pt'
+});
+const StyledBox = styled(Box, {
+  display: 'grid',
+  gridTemplateColumns: 'repeat(auto-fill, minmax(calc(768px / 4 - 20px), 1fr))',
+  gridGap: '10px'
+});
+const StyledSpan = styled('span', {
+  fontFamily: 'monospace',
+  variants: {
+    color: {
+      red: {
+        color: '$red400'
+      },
+      primary: {
+        color: '$primary800'
+      }
+    }
+  },
+  defaultVariants: {
+    color: 'red'
+  }
+});
+const StyledFlex = styled(Flex, {
+  width: '100%',
+  padding: 5,
+  userSelect: 'none',
+  cursor: 'pointer',
+  alignItems: 'center',
+  justifyContent: 'center'
+});
+StyledFlex.displayName = 'Flex';
+const Colors = props => {
+  const {
+    addToast
+  } = React__default.useContext(ToastContext);
+  function onClick(i) {
+    return () => {
+      navigator.clipboard.writeText(i);
+      addToast({
+        title: 'Success',
+        description: `color '${i}' succesfully copied`,
+        position: 'bottom-right',
+        variant: 'success',
+        captionOfAction: ''
+      });
+    };
+  }
+  if (props.items) return props.items.map((i, index) => /*#__PURE__*/jsxs(StyledFlex, {
+    gap: 2,
+    direction: "column",
+    children: [/*#__PURE__*/jsx(StyledPaper, {
+      onClick: onClick(i.hex),
+      css: {
+        backgroundColor: `${i.hex}`
+      }
+    }), /*#__PURE__*/jsxs(StyledFlex, {
+      justify: "between",
+      wrap: "wrap",
+      children: [/*#__PURE__*/jsx(StyledParagraph, {
+        onClick: onClick(i.name),
+        children: i.name
+      }), /*#__PURE__*/jsx(StyledParagraph, {
+        onClick: onClick(i.hex),
+        css: {
+          fontWeight: 'bold'
+        },
+        children: i.hex
+      })]
+    })]
+  }, index));
+};
+
+export { Colors, StyledBox, StyledSpan };

package/components/accordion/Accordion.esm.js

@@ -0,0 +1,109 @@
+import { __rest } from 'tslib';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import React__default from 'react';
+import { ChevronDownOutline } from '@majoo-ui/icons';
+import * as AccordionPrimitive from '@radix-ui/react-accordion';
+import { styled } from '../../config/stitches.config.esm.js';
+
+const StyledAccordion = styled(AccordionPrimitive.Root, {});
+const Accordion = /*#__PURE__*/React__default.forwardRef((_a, forwardedRef) => {
+  var {
+      children
+    } = _a,
+    props = __rest(_a, ["children"]);
+  return jsx(StyledAccordion, Object.assign({
+    ref: forwardedRef
+  }, props, props.type === 'single' ? {
+    collapsible: true
+  } : {}, {
+    children: children
+  }));
+});
+const StyledItem = styled(AccordionPrimitive.Item, {
+  borderTop: '1px solid $colors$slate6',
+  '&:last-of-type': {
+    borderBottom: '1px solid $colors$slate6'
+  }
+});
+const StyledHeader = styled(AccordionPrimitive.Header, {
+  all: 'unset'
+});
+const StyledTrigger = styled(AccordionPrimitive.Trigger, {
+  all: 'unset',
+  boxSizing: 'border-box',
+  userSelect: 'none',
+  '&::before': {
+    boxSizing: 'border-box'
+  },
+  '&::after': {
+    boxSizing: 'border-box'
+  },
+  cursor: 'pointer',
+  display: 'flex',
+  alignItems: 'center',
+  color: '$hiContrast',
+  width: '100%',
+  '@hover': {
+    '&:hover': {
+      backgroundColor: '$slate2'
+    }
+  },
+  '&:focus': {
+    outline: 'none',
+    boxShadow: 'inset 0 0 0 1px $colors$slate8, 0 0 0 1px $colors$slate8'
+  },
+  '& svg.icon-cdf': {
+    color: '$white',
+    size: '24px',
+    transition: 'transform 175ms cubic-bezier(0.65, 0, 0.35, 1)'
+  },
+  '& svg.right': {
+    marginRight: '$spacing-05'
+  },
+  '&[data-state="open"]': {
+    '& svg.icon-cdf': {
+      transform: 'rotate(180deg)'
+    }
+  },
+  variants: {
+    arrowPosition: {
+      right: {
+        justifyContent: 'space-between'
+      },
+      left: {
+        justifyContent: 'start'
+      }
+    }
+  }
+});
+const AccordionTrigger = /*#__PURE__*/React__default.forwardRef((_a, forwardedRef) => {
+  var {
+      children,
+      arrowPosition = 'right',
+      hasContent = true,
+      arrowColor = 'white',
+      customArrow
+    } = _a,
+    props = __rest(_a, ["children", "arrowPosition", "hasContent", "arrowColor", "customArrow"]);
+  return jsx(StyledHeader, {
+    children: jsx(StyledTrigger, Object.assign({}, props, {
+      arrowPosition: arrowPosition,
+      ref: forwardedRef,
+      children: arrowPosition === 'right' ? jsxs(Fragment, {
+        children: [children, hasContent && (customArrow || jsx(ChevronDownOutline, {
+          className: "icon-cdf right",
+          color: arrowColor
+        }))]
+      }) : jsxs(Fragment, {
+        children: [hasContent && (customArrow || jsx(ChevronDownOutline, {
+          className: "icon-cdf right",
+          color: arrowColor
+        })), children]
+      })
+    }))
+  });
+});
+const AccordionItem = StyledItem;
+const AccordionContent = AccordionPrimitive.Content;
+
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger };

package/components/alertDialog/AlertDialog.esm.js

@@ -0,0 +1,440 @@
+import React__default, { useCallback, forwardRef } from 'react';
+import ReactDOM from 'react-dom';
+import * as ADialog from '@radix-ui/react-alert-dialog';
+import { CloseOutline } from '@majoo-ui/icons';
+import Box from '../../layout/box/Box.esm.js';
+import { Button } from '../button/Button.esm.js';
+import Heading from '../heading/Heading.esm.js';
+import Paragraph from '../paragraph/Paragraph.esm.js';
+import { Separator } from '../separator/Separator.esm.js';
+import { styled, keyframes } from '../../config/stitches.config.esm.js';
+import PropTypes from 'prop-types';
+import { useTranslation } from 'react-i18next';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+/* eslint-disable @typescript-eslint/no-empty-function */
+const overlayShow = keyframes({
+  '0%': {
+    opacity: 0
+  },
+  '100%': {
+    opacity: 1
+  }
+});
+const contentShow = keyframes({
+  '0%': {
+    opacity: 0,
+    transform: 'translate(-50%, -48%) scale(.96)'
+  },
+  '100%': {
+    opacity: 1,
+    transform: 'translate(-50%, -50%) scale(1)'
+  }
+});
+const StyledOverlay = styled(ADialog.Overlay, {
+  zIndex: 1,
+  backgroundColor: '$bgDimmer',
+  position: 'fixed',
+  inset: 0,
+  '@media (prefers-reduced-motion: no-preference)': {
+    animation: `${overlayShow} 150ms cubic-bezier(0.16, 1, 0.3, 1) forwards`
+  }
+});
+const StyledContent = styled(ADialog.Content, {
+  backgroundColor: 'white',
+  borderRadius: 8,
+  boxShadow: 'hsl(206 22% 7% / 35%) 0px 10px 38px -10px, hsl(206 22% 7% / 20%) 0px 10px 20px -15px',
+  position: 'fixed',
+  top: '50%',
+  left: '50%',
+  transform: 'translate(-50%, -50%)',
+  width: '90vw',
+  maxWidth: '422px',
+  maxHeight: '100vh',
+  '@media (prefers-reduced-motion: no-preference)': {
+    animation: `${contentShow} 150ms cubic-bezier(0.16, 1, 0.3, 1) forwards`
+  },
+  '&:focus': {
+    outline: 'none'
+  }
+});
+const StyledTitle = styled(ADialog.Title, {
+  '@sm': {
+    margin: '24px 16px'
+  },
+  margin: '16px 24px 10px 24px',
+  display: 'flex',
+  flexDirection: 'row',
+  justifyContent: 'space-between',
+  color: '$gray900',
+  fontSize: 17,
+  fontWeight: 500
+});
+const StyledDescription = styled('div', {
+  mx: 24,
+  my: 20,
+  color: '$gray900',
+  fontSize: 15,
+  lineHeight: 1.5
+});
+const Flex = styled('div', {
+  display: 'flex'
+});
+const Content = /*#__PURE__*/forwardRef(({
+  children,
+  ...props
+}, ref) => /*#__PURE__*/jsxs(ADialog.Portal, {
+  children: [/*#__PURE__*/jsx(StyledOverlay, {
+    css: {
+      zIndex: '$toast'
+    }
+  }), /*#__PURE__*/jsx(StyledContent, {
+    ref: ref,
+    ...props,
+    children: children
+  })]
+}));
+function AlertDialogFunction(properties) {
+  let props = properties;
+  this.show = function () {
+    ReactDOM.render(/*#__PURE__*/jsx(React__default.StrictMode, {
+      children: /*#__PURE__*/jsx(TemplateAlertFunction, {
+        ...props
+      })
+    }), document.getElementById('a-dialog'));
+  };
+}
+const TemplateAlertFunction = props => {
+  const {
+    t
+  } = useTranslation('translation');
+  const [open, setOpen] = React__default.useState(true);
+  const ref = useCallback(node => {
+    const appElement = document.getElementById('app');
+    if (appElement) {
+      if (node !== null) {
+        appElement.classList.add('noscroll');
+      } else {
+        appElement.classList.remove('noscroll');
+      }
+    }
+  }, []);
+  const isMobileCss = props.isMobile && {
+    minWidth: '100%',
+    borderBottomLeftRadius: 0,
+    borderBottomRightRadius: 0,
+    animation: 'unset',
+    bottom: 0,
+    top: 'auto',
+    left: 0,
+    transform: 'translate(0,0)'
+  };
+  const onCancelFunc = props.onCancel ? props.onCancel : () => {};
+  const onConfirmFunc = props.onConfirm ? props.onConfirm : () => {};
+  const buttonCancel = () => {
+    onCancelFunc();
+    buttonClose();
+  };
+  const buttonClose = () => {
+    setOpen(false);
+    ReactDOM.unmountComponentAtNode(document.getElementById('a-dialog'));
+  };
+  const buttonConfirm = () => {
+    onConfirmFunc();
+    setOpen(false);
+    ReactDOM.unmountComponentAtNode(document.getElementById('a-dialog'));
+  };
+  return /*#__PURE__*/jsx(ADialog.Root, {
+    open: open,
+    ...props,
+    children: /*#__PURE__*/jsxs(Content, {
+      ref: ref,
+      css: {
+        zIndex: '$tooltip',
+        ...isMobileCss,
+        ...props.css
+      },
+      onOpenAutoFocus: e => {
+        if (!props.onOpenAutoFocus) {
+          e.preventDefault();
+        } else {
+          props?.onOpenAutoFocus();
+        }
+      },
+      children: [/*#__PURE__*/jsx(ADialog.Title, {
+        asChild: true,
+        children: /*#__PURE__*/jsxs(StyledTitle, {
+          children: [/*#__PURE__*/jsx(Heading, {
+            heading: "pageTitle",
+            children: props.title
+          }), !props.hideCloseButton && /*#__PURE__*/jsx(ADialog.Cancel, {
+            asChild: true,
+            children: /*#__PURE__*/jsx(Box, {
+              onClick: buttonClose,
+              css: {
+                cursor: 'pointer'
+              },
+              children: /*#__PURE__*/jsx(CloseOutline, {
+                size: 22
+              })
+            })
+          })]
+        })
+      }), /*#__PURE__*/jsx(Separator, {
+        orientation: "horizontal"
+      }), /*#__PURE__*/jsx(ADialog.Description, {
+        asChild: true,
+        children: /*#__PURE__*/jsx(StyledDescription, {
+          children: /*#__PURE__*/jsx(Paragraph, {
+            paragraph: "longContentRegular",
+            css: {
+              textAlign: 'justify'
+            },
+            children: props.description
+          })
+        })
+      }), /*#__PURE__*/jsxs(Box, {
+        css: {
+          width: '100%',
+          display: props?.singleButton && props?.hideActionButton ? 'none' : 'inherit'
+        },
+        children: [/*#__PURE__*/jsx(Separator, {
+          orientation: "horizontal"
+        }), /*#__PURE__*/jsx(Flex, {
+          css: {
+            gap: 10,
+            justifyContent: 'flex-end',
+            mt: 20,
+            mb: 18,
+            mx: 24
+          },
+          children: props.singleButton ? /*#__PURE__*/jsx(ADialog.Action, {
+            asChild: true,
+            children: /*#__PURE__*/jsx(Button, {
+              size: props.btnSize,
+              onClick: buttonConfirm,
+              buttonType: props.dialogType,
+              disabled: props?.disabledButton,
+              ...props?.actionButtonProps,
+              children: props.labelConfirm ? props.labelConfirm : t('label.continue', 'Ya, Lanjutkan')
+            })
+          }) : /*#__PURE__*/jsxs(Fragment, {
+            children: [/*#__PURE__*/jsx(ADialog.Cancel, {
+              asChild: true,
+              children: /*#__PURE__*/jsx(Button, {
+                size: props.btnSize,
+                onClick: buttonCancel,
+                css: {
+                  color: props.dialogType === 'negative' && !props?.disabledButton && '$textSecondary !important',
+                  flex: props.isMobile && 1
+                },
+                buttonType: props.dialogType === 'negative' && !props?.disabledButton ? 'ghost-secondary' : 'ghost',
+                disabled: props?.disabledButton,
+                ...props?.cancelButtonProps,
+                children: props.labelCancel ? props.labelCancel : t('label.cancel', 'Batal')
+              })
+            }), !props?.hideActionButton && /*#__PURE__*/jsx(ADialog.Action, {
+              asChild: true,
+              children: /*#__PURE__*/jsx(Button, {
+                size: props.btnSize,
+                onClick: buttonConfirm,
+                buttonType: props.dialogType,
+                css: {
+                  flex: props.isMobile && 1
+                },
+                disabled: props?.disabledButton,
+                ...props?.actionButtonProps,
+                children: props.labelConfirm ? props.labelConfirm : t('label.continue', 'Ya, Lanjutkan')
+              })
+            })]
+          })
+        })]
+      })]
+    })
+  });
+};
+function AlertDialog(props) {
+  const {
+    t
+  } = useTranslation('translation');
+  const ref = useCallback(node => {
+    const appElement = document.getElementById('app');
+    if (appElement) {
+      if (node !== null) {
+        appElement.classList.add('noscroll');
+      } else {
+        appElement.classList.remove('noscroll');
+      }
+    }
+  }, []);
+  const isMobileCss = props.isMobile && {
+    minWidth: '100%',
+    borderBottomLeftRadius: 0,
+    borderBottomRightRadius: 0,
+    animation: 'unset',
+    bottom: 0,
+    top: 'auto',
+    left: 0,
+    transform: 'translate(0,0)'
+  };
+  return /*#__PURE__*/jsx(ADialog.Root, {
+    open: props.open,
+    onOpenChange: props.onOpenChange,
+    defaultOpen: props.defaultOpen,
+    id: props.id,
+    children: /*#__PURE__*/jsxs(Content, {
+      ref: ref,
+      css: {
+        zIndex: '$tooltip',
+        ...isMobileCss,
+        ...props.css
+      },
+      onOpenAutoFocus: e => {
+        if (!props.onOpenAutoFocus) e.preventDefault();else props.onOpenAutoFocus(e);
+      },
+      children: [/*#__PURE__*/jsx(ADialog.Title, {
+        asChild: true,
+        children: /*#__PURE__*/jsxs(StyledTitle, {
+          children: [/*#__PURE__*/jsx(Heading, {
+            heading: "pageTitle",
+            children: props.title
+          }), !props.hideCloseButton && /*#__PURE__*/jsx(AlertDialogCancel, {
+            asChild: true,
+            children: /*#__PURE__*/jsx(Box, {
+              onClick: props.onClose || props.onCancel,
+              css: {
+                cursor: 'pointer'
+              },
+              children: /*#__PURE__*/jsx(CloseOutline, {
+                size: 22
+              })
+            })
+          })]
+        })
+      }), /*#__PURE__*/jsx(Separator, {
+        orientation: "horizontal"
+      }), /*#__PURE__*/jsx(ADialog.Description, {
+        asChild: true,
+        children: /*#__PURE__*/jsx(StyledDescription, {
+          children: /*#__PURE__*/jsx(Paragraph, {
+            paragraph: "longContentRegular",
+            css: {
+              textAlign: 'justify',
+              wordBreak: 'break-word'
+            },
+            children: props.description
+          })
+        })
+      }), /*#__PURE__*/jsxs(Box, {
+        css: {
+          width: '100%',
+          display: props?.singleButton && props?.hideActionButton ? 'none' : 'inherit'
+        },
+        children: [/*#__PURE__*/jsx(Separator, {
+          orientation: "horizontal"
+        }), /*#__PURE__*/jsx(Flex, {
+          css: {
+            gap: 10,
+            justifyContent: 'flex-end',
+            mt: 20,
+            mb: 18,
+            mx: 24
+          },
+          children: props.singleButton ? /*#__PURE__*/jsx(ADialog.Action, {
+            asChild: true,
+            children: /*#__PURE__*/jsx(Button, {
+              size: props.btnSize,
+              onClick: props.onConfirm,
+              buttonType: props.dialogType,
+              css: {
+                flex: props.isMobile && 1
+              },
+              disabled: props?.disabledButton,
+              ...props?.actionButtonProps,
+              children: props.labelConfirm ? props.labelConfirm : t('label.continue', 'Ya, Lanjutkan')
+            })
+          }) : /*#__PURE__*/jsxs(Fragment, {
+            children: [/*#__PURE__*/jsx(ADialog.Cancel, {
+              asChild: true,
+              children: /*#__PURE__*/jsx(Button, {
+                size: props.btnSize,
+                onClick: props.onCancel,
+                css: {
+                  color: props.dialogType === 'negative' && !props?.disabledButton && '$textSecondary !important',
+                  flex: props.isMobile && 1
+                },
+                buttonType: props.dialogType === 'negative' && !props?.disabledButton ? 'ghost-secondary' : 'ghost',
+                disabled: props?.disabledButton,
+                ...props?.cancelButtonProps,
+                children: props.labelCancel ? props.labelCancel : t('label.cancel', 'Batal')
+              })
+            }), !props?.hideActionButton && /*#__PURE__*/jsx(ADialog.Action, {
+              asChild: true,
+              children: /*#__PURE__*/jsx(Button, {
+                size: props.btnSize,
+                onClick: props.onConfirm,
+                buttonType: props.dialogType,
+                css: {
+                  flex: props.isMobile && 1
+                },
+                disabled: props?.disabledButton,
+                ...props?.actionButtonProps,
+                children: props.labelConfirm ? props.labelConfirm : t('label.continue', 'Ya, Lanjutkan')
+              })
+            })]
+          })
+        })]
+      })]
+    })
+  });
+}
+TemplateAlertFunction.propTypes = {
+  title: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired,
+  description: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired,
+  btnSize: PropTypes.string,
+  dialogType: PropTypes.string,
+  onCancel: PropTypes.func,
+  onConfirm: PropTypes.func,
+  disabledButton: PropTypes.bool,
+  actionButtonProps: PropTypes.object,
+  cancelButtonProps: PropTypes.object,
+  hideCloseButton: PropTypes.bool,
+  hideActionButton: PropTypes.bool
+};
+TemplateAlertFunction.defaultProps = {
+  dialogType: 'primary',
+  btnSize: 'md',
+  onCancel: () => {},
+  onConfirm: () => {},
+  disabledButton: false,
+  hideCloseButton: false
+};
+AlertDialog.propTypes = {
+  title: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired,
+  description: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired,
+  btnSize: PropTypes.string,
+  dialogType: PropTypes.string,
+  onCancel: PropTypes.func,
+  onConfirm: PropTypes.func,
+  disabledButton: PropTypes.bool,
+  actionButtonProps: PropTypes.object,
+  cancelButtonProps: PropTypes.object,
+  hideCloseButton: PropTypes.bool
+};
+AlertDialog.defaultProps = {
+  dialogType: 'primary',
+  btnSize: 'md',
+  onCancel: () => {},
+  onConfirm: () => {},
+  disabledButton: false,
+  hideCloseButton: false
+};
+const AlertDialogRoot = ADialog.Root;
+const AlertDialogTrigger = ADialog.Trigger;
+const AlertDialogContent = Content;
+const AlertDialogTitle = StyledTitle;
+const AlertDialogDescription = StyledDescription;
+const AlertDialogCancel = ADialog.Cancel;
+const AlertDialogConfirm = ADialog.Action;
+
+export { AlertDialog, AlertDialogCancel, AlertDialogConfirm, AlertDialogContent, AlertDialogDescription, AlertDialogFunction, AlertDialogRoot, AlertDialogTitle, AlertDialogTrigger };