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

package/components/mapPicker/hooks/useMapSearch.esm.js

@@ -0,0 +1,161 @@
+import { __awaiter } from 'tslib';
+import { useState, useRef, useEffect, useCallback } from 'react';
+
+function useMapSearch({
+  initialCenter = {
+    lat: -6.175392,
+    lng: 106.827153
+  },
+  showSelectButton = true,
+  onChange
+}) {
+  const [center, setCenter] = useState(initialCenter);
+  const [places, setPlaces] = useState([]);
+  const [searchQuery, setSearchQuery] = useState('');
+  const [searchResult, setSearchResult] = useState([]);
+  // Track if component is mounted to prevent state updates after unmount
+  const isMountedRef = useRef(true);
+  // AbortController to cancel pending fetch requests
+  const abortControllerRef = useRef(null);
+  // Cleanup on unmount
+  useEffect(() => {
+    isMountedRef.current = true;
+    return () => {
+      var _a;
+      isMountedRef.current = false;
+      // Abort any pending fetch requests
+      (_a = abortControllerRef.current) === null || _a === void 0 ? void 0 : _a.abort();
+    };
+  }, []);
+  const getFullAddress = useCallback((latLng, signal) => __awaiter(this, void 0, void 0, function* () {
+    try {
+      const res = yield fetch(`https://nominatim.openstreetmap.org/reverse?format=jsonv2&lat=${Number(latLng.lat)}&lon=${Number(latLng.lng)}&accept-language=id`, {
+        signal
+      });
+      const location = yield res.json();
+      return location;
+    } catch (error) {
+      if (error.name === 'AbortError') {
+        return null; // Request was cancelled, return null
+      }
+      throw new Error('Failed to search address');
+    }
+  }), []);
+  const handleSelect = useCallback(({
+    lat,
+    lon,
+    display_name,
+    place_id,
+    address
+  }) => {
+    // Only update state if component is still mounted
+    if (!isMountedRef.current) return;
+    setCenter({
+      lat: Number(lat),
+      lng: Number(lon)
+    });
+    setPlaces([{
+      lat,
+      lon,
+      place_id,
+      display_name,
+      address
+    }]);
+    setSearchQuery('');
+    setSearchResult([]);
+    onChange === null || onChange === void 0 ? void 0 : onChange({
+      place_id: place_id,
+      lat: Number(lat),
+      lng: Number(lon),
+      formatted_address: display_name,
+      address_components: address
+    }, !showSelectButton);
+  }, [onChange, showSelectButton]);
+  const handleSearchSelect = useCallback(item => __awaiter(this, void 0, void 0, function* () {
+    var _a;
+    // Cancel any previous pending request
+    (_a = abortControllerRef.current) === null || _a === void 0 ? void 0 : _a.abort();
+    abortControllerRef.current = new AbortController();
+    const fullAddress = yield getFullAddress({
+      lat: Number(item.lat),
+      lng: Number(item.lon)
+    }, abortControllerRef.current.signal);
+    // getFullAddress returns null if aborted
+    if (fullAddress) {
+      handleSelect(fullAddress);
+    }
+  }), [getFullAddress, handleSelect]);
+  const handleSearchLatLng = useCallback(latLng => __awaiter(this, void 0, void 0, function* () {
+    var _b;
+    // Cancel any previous pending request
+    (_b = abortControllerRef.current) === null || _b === void 0 ? void 0 : _b.abort();
+    abortControllerRef.current = new AbortController();
+    const fullAddress = yield getFullAddress(latLng, abortControllerRef.current.signal);
+    // getFullAddress returns null if aborted
+    if (fullAddress) {
+      const {
+        lat,
+        lon,
+        display_name,
+        place_id,
+        address
+      } = fullAddress;
+      handleSelect({
+        lat,
+        lon,
+        display_name,
+        place_id,
+        address
+      });
+    }
+  }), [getFullAddress, handleSelect]);
+  const handleSearch = useCallback((query, signal) => __awaiter(this, void 0, void 0, function* () {
+    try {
+      const res = yield fetch(`https://nominatim.openstreetmap.org/search.php?q=${query}&polygon_geojson=1&format=jsonv2`, {
+        signal
+      });
+      const result = yield res.json();
+      // Only update state if component is still mounted
+      if (isMountedRef.current) {
+        setSearchResult(result);
+      }
+    } catch (error) {
+      if (error.name === 'AbortError') {
+        return; // Request was cancelled, do nothing
+      }
+      throw new Error('Failed to search address');
+    }
+  }), []);
+  // Debounced search effect
+  useEffect(() => {
+    let timeoutId = setTimeout(() => ({}), 1000);
+    const searchAbortController = new AbortController();
+    clearTimeout(timeoutId);
+    timeoutId = setTimeout(() => {
+      if (searchQuery) {
+        handleSearch(searchQuery, searchAbortController.signal);
+      }
+    }, 1000);
+    return () => {
+      clearTimeout(timeoutId);
+      searchAbortController.abort();
+    };
+  }, [searchQuery, handleSearch]);
+  const handleSearchChange = useCallback(e => {
+    const val = e.target.value;
+    setSearchQuery(val);
+  }, []);
+  return {
+    center,
+    setCenter,
+    places,
+    searchQuery,
+    searchResult,
+    handleSearchChange,
+    handleSearchSelect,
+    handleSearchLatLng,
+    getFullAddress
+  };
+}
+
+export { useMapSearch };

package/components/modalDialog/ModalDialog.esm.js

@@ -0,0 +1,247 @@
+import 'core-js/modules/es.iterator.constructor.js';
+import 'core-js/modules/es.iterator.find.js';
+import 'core-js/modules/es.iterator.to-array.js';
+import { __rest } from 'tslib';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React__default, { useCallback } from 'react';
+import { styled } from '../../config/stitches.config.esm.js';
+import Box from '../../layout/box/Box.esm.js';
+import Dialog, { DialogContent, DialogTrigger, DialogPortal, DialogTitle, DialogClose } from '../dialog/Dialog.esm.js';
+import Heading from '../heading/Heading.esm.js';
+import { ConditionalWrapper } from '../../wrapper/ConditionalWrapper.esm.js';
+import { CloseOutline } from '@majoo-ui/icons';
+import { useThemeProvider } from '@majoo-ui/helpers';
+
+const ModalDialogFooter = styled('div');
+ModalDialogFooter.displayName = 'ModalDialogFooter';
+const ModalDialogTitle = styled('div');
+ModalDialogTitle.displayName = 'ModalDialogTitle';
+const ModalDialogContent = styled('div');
+ModalDialogContent.displayName = 'ModalDialogContent';
+const ModalDialogTrigger = styled('div');
+ModalDialogTrigger.displayName = 'ModalDialogTrigger';
+const StyledContent = styled(DialogContent, {
+  top: 'auto',
+  bottom: 0,
+  left: 0,
+  transform: 'translate(0,0)',
+  '& > div': {
+    borderBottomRightRadius: 0,
+    borderBottomLeftRadius: 0
+  },
+  '@md': {
+    top: '50%',
+    left: '50%',
+    bottom: 'unset',
+    transform: 'translate(-50%, -50%)',
+    '& > div': {
+      borderBottomRightRadius: '$lg',
+      borderBottomLeftRadius: '$lg'
+    }
+  },
+  variants: {
+    isMobile: {
+      true: {
+        top: 'auto',
+        bottom: 0,
+        left: 0,
+        transform: 'translate(0,0)',
+        maxWidth: 'unset',
+        '& > div': {
+          borderBottomRightRadius: 0,
+          borderBottomLeftRadius: 0
+        }
+      },
+      false: {
+        top: '50%',
+        left: '50%',
+        bottom: 'unset',
+        transform: 'translate(-50%, -50%)',
+        '& > div': {
+          borderBottomRightRadius: '$lg',
+          borderBottomLeftRadius: '$lg'
+        }
+      }
+    }
+  }
+});
+const StyledOverlay = styled(Box, {
+  backgroundColor: '$bgDimmer',
+  position: 'fixed',
+  inset: 0
+});
+const findNodeChild = (array, displayName) => {
+  const result = array.find(child => {
+    if (/*#__PURE__*/React__default.isValidElement(child)) {
+      const reactElement = child;
+      if (typeof reactElement.type !== 'string') {
+        const reactFC = reactElement.type;
+        if (reactFC.displayName === displayName) {
+          return true;
+        }
+      }
+    }
+    return false;
+  });
+  return result;
+};
+/**
+ * ModalDialog are used to focus and display content that contains one specific task that requires interaction from the user and is separate from the main page.
+ * https://react-majoo-ui.mangkujagat.com/?path=/story/core-components-pagedialog--default
+ * @param size - default fullsize
+ * @param layer - z-index default 1400
+ * @param isMobile - force mobile/desktop view, default is responsive
+ * @param onOpenAutoFocus - set default open behaviour
+ *
+ * @example
+ * // Uncontrolled Example
+ *  <ModalDialog>
+ *    <ModalDialogTrigger>Button Trigger</ModalDialogTrigger>
+ *    <ModalDialogTitle>Title</ModalDialogTitle>
+ *    <ModalDialogContent>Content</ModalDialogContent>
+ *    <ModalDialogFooter>Footer</ModalDialogFooter>
+ *  </ModalDialog>
+ * @component
+ */
+const ModalDialog = props => {
+  const {
+      children,
+      size,
+      css,
+      layer,
+      isMobile,
+      width,
+      onOpenAutoFocus,
+      disabledCloseButton,
+      onPointerDownOutside,
+      onCloseClick,
+      theme
+    } = props,
+    rest = __rest(props, ["children", "size", "css", "layer", "isMobile", "width", "onOpenAutoFocus", "disabledCloseButton", "onPointerDownOutside", "onCloseClick", "theme"]);
+  const childArray = React__default.Children.toArray(children);
+  const modalDialogFooter = findNodeChild(childArray, 'ModalDialogFooter');
+  const modalDialogTitle = findNodeChild(childArray, 'ModalDialogTitle');
+  const modalDialogContent = findNodeChild(childArray, 'ModalDialogContent');
+  const modalDialogTrigger = findNodeChild(childArray, 'ModalDialogTrigger');
+  const themeProvider = useThemeProvider(theme);
+  const ref = useCallback(node => {
+    const appElement = document.getElementById('app');
+    if (appElement) {
+      if (node !== null) {
+        appElement.classList.add('noscroll');
+      } else {
+        appElement.classList.remove('noscroll');
+      }
+    }
+  }, []);
+  return jsxs(Dialog, Object.assign({}, rest, {
+    children: [modalDialogTrigger && jsx(DialogTrigger, Object.assign({}, modalDialogTrigger.props)), jsxs(DialogPortal, {
+      children: [jsx(StyledOverlay, {
+        css: {
+          zIndex: layer
+        }
+      }), jsx(StyledContent, {
+        className: (themeProvider === null || themeProvider === void 0 ? void 0 : themeProvider.theme) || '',
+        size: size,
+        css: Object.assign(Object.assign({}, css), {
+          zIndex: layer,
+          width: width,
+          maxWidth: width && 'unset'
+        }),
+        ref: ref,
+        isMobile: isMobile,
+        onOpenAutoFocus: e => {
+          if (!onOpenAutoFocus) {
+            e.preventDefault();
+          } else {
+            onOpenAutoFocus(e);
+          }
+        },
+        onPointerDownOutside: e => onPointerDownOutside === null || onPointerDownOutside === void 0 ? void 0 : onPointerDownOutside(e),
+        children: jsxs(Box, {
+          css: {
+            backgroundColor: '$bgWhite',
+            display: 'flex',
+            flexDirection: 'column',
+            borderRadius: '$lg'
+          },
+          children: [modalDialogTitle && jsx(Box, {
+            css: Object.assign({
+              padding: '16px 24px',
+              display: 'block',
+              alignItems: 'center',
+              position: 'relative',
+              borderBottom: '1px solid $gray150',
+              '@md': {
+                padding: '24px 24px 19px 24px'
+              }
+            }, modalDialogTitle.props.containerCss),
+            children: jsxs(Box, {
+              css: {
+                justifyContent: 'space-between',
+                display: 'flex',
+                alignItems: 'center',
+                gap: '$compact',
+                marginRight: 0
+              },
+              children: [jsx(DialogTitle, {
+                css: {
+                  margin: 0
+                },
+                children: jsx(Heading, Object.assign({
+                  as: "p",
+                  heading: "pageTitle"
+                }, modalDialogTitle.props))
+              }), !props.hideCloseButton && jsx(ConditionalWrapper, {
+                condition: !disabledCloseButton,
+                wrapper: children => jsx(DialogClose, {
+                  asChild: true,
+                  disabled: disabledCloseButton,
+                  onClick: () => {
+                    if (onCloseClick) onCloseClick();
+                  },
+                  children: children
+                }),
+                children: jsx(Box, {
+                  css: {
+                    display: 'flex',
+                    justifyContent: 'center',
+                    alignItems: 'center',
+                    cursor: disabledCloseButton ? 'not-allowed' : 'pointer',
+                    marginRight: 4
+                  },
+                  children: jsx(CloseOutline, {
+                    size: "22"
+                  })
+                })
+              })]
+            })
+          }), modalDialogContent && jsx(Box, Object.assign({}, modalDialogContent.props, {
+            css: Object.assign({
+              flexGrow: 1,
+              maxHeight: 'calc(100vh - 64px - 56px)',
+              padding: '16px 24px'
+            }, modalDialogContent.props.css)
+          })), modalDialogFooter && jsx(Box, Object.assign({}, modalDialogFooter.props, {
+            css: Object.assign({
+              borderTop: '1px solid $gray150',
+              padding: '16px 24px',
+              display: 'flex',
+              justifyContent: 'flex-end'
+            }, modalDialogFooter.props.css)
+          }))]
+        })
+      })]
+    })]
+  }));
+};
+ModalDialog.Trigger = ModalDialogTrigger;
+ModalDialog.Title = ModalDialogTitle;
+ModalDialog.Content = ModalDialogContent;
+ModalDialog.Footer = ModalDialogFooter;
+ModalDialog.defaultProps = {
+  size: 'md',
+  layer: '$modal'
+};
+
+export { ModalDialogContent, ModalDialogFooter, ModalDialogTitle, ModalDialogTrigger, ModalDialog as default };

package/components/notificationBadge/NotificationBadge.esm.js

@@ -0,0 +1,149 @@
+import PropTypes from 'prop-types';
+import 'react';
+import { styled } from '../../config/stitches.config.esm.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+const NotificationBadgeRootStyle = styled('span', {
+  position: 'relative',
+  display: 'inline-flex',
+  verticalAlign: 'middle',
+  flexShrink: 0
+});
+const NotificationBadgeStyle = styled('span', {
+  position: 'absolute',
+  padding: '3px 5px 3px 5px',
+  borderRadius: 50,
+  fontWeight: 600,
+  fontStyle: 'normal',
+  fontSize: 12,
+  textAlign: 'center',
+  variants: {
+    variant: {
+      info: {
+        backgroundColor: '$blue500',
+        color: '$white'
+      },
+      important: {
+        backgroundColor: '$red500',
+        color: '$white'
+      },
+      warning: {
+        backgroundColor: '$secondary500'
+      },
+      success: {
+        backgroundColor: '$green500'
+      },
+      alpha: {
+        backgroundColor: 'rgba(0, 0, 0, .2)',
+        color: '$textWhite'
+      }
+    },
+    dot: {
+      true: {
+        minWidth: 8,
+        height: 8,
+        border: '1px solid #FFFFFF',
+        padding: 0
+      }
+    },
+    overlap: {
+      circular: {
+        top: '14%',
+        right: '14%'
+      }
+    },
+    anchorVertical: {
+      top: {
+        top: 0
+      },
+      bottom: {
+        bottom: 0
+      }
+    },
+    anchorHorizontal: {
+      right: {
+        right: 0
+      },
+      left: {
+        left: 0
+      }
+    }
+  },
+  compoundVariants: [{
+    anchorVertical: 'top',
+    anchorHorizontal: 'right',
+    css: {
+      transform: 'scale(1) translate(50%, -50%)'
+    }
+  }, {
+    anchorVertical: 'top',
+    anchorHorizontal: 'left',
+    css: {
+      transform: 'scale(1) translate(-50%, -50%)'
+    }
+  }, {
+    anchorVertical: 'bottom',
+    anchorHorizontal: 'left',
+    css: {
+      transform: 'scale(1) translate(-50%, 50%)'
+    }
+  }, {
+    anchorVertical: 'bottom',
+    anchorHorizontal: 'right',
+    css: {
+      transform: 'scale(1) translate(50%, 50%)'
+    }
+  }],
+  defaultVariants: {
+    anchorVertical: 'top',
+    anchorHorizontal: 'right'
+  }
+});
+const NotificationBadge = ({
+  children,
+  variantIcon,
+  ...props
+}) => {
+  const getIcon = () => {
+    const isLeading = variantIcon === 'leading';
+    return {
+      max: isLeading ? '+99' : '99+',
+      min: isLeading ? -99 : '99-'
+    };
+  };
+  const getValue = () => {
+    let value = props?.value;
+    const isTrailing = variantIcon === 'trailing';
+    if (typeof value === 'number' || parseInt(value)) {
+      if (Math.sign(value) === 1 || Math.sign(value) === 0) {
+        return value > 99 ? getIcon().max : value;
+      } else {
+        return value < -99 ? getIcon().min : isTrailing ? Math.abs(value) + '-' : value;
+      }
+    }
+  };
+  return /*#__PURE__*/jsxs(NotificationBadgeRootStyle, {
+    children: [children, /*#__PURE__*/jsx(NotificationBadgeStyle, {
+      ...props,
+      children: props.value && getValue()
+    })]
+  });
+};
+NotificationBadge.defaultProps = {
+  anchorHorizontal: 'right',
+  anchorVertical: 'top',
+  variant: 'important',
+  variantIcon: 'trailing',
+  value: undefined,
+  dot: false
+};
+NotificationBadge.propTypes = {
+  anchorHorizontal: PropTypes.oneOf(['left', 'right']),
+  anchorVertical: PropTypes.oneOf(['top', 'bottom']),
+  variant: PropTypes.oneOf(['info', 'important', 'warning', 'success', 'alpha']),
+  variantIcon: PropTypes.oneOf(['leading', 'trailing']),
+  value: PropTypes.number,
+  dot: PropTypes.bool
+};
+
+export { NotificationBadge as default };