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

package/components/image/Image.esm.js

@@ -0,0 +1,141 @@
+import 'react';
+import { styled } from '../../config/stitches.config.esm.js';
+import PropTypes from 'prop-types';
+import Flex from '../../layout/flex/Flex.esm.js';
+import { useTranslation } from 'react-i18next';
+import { jsx } from 'react/jsx-runtime';
+
+const ContainerFallback = styled(Flex, {
+  boxSizing: 'border-box',
+  border: '2px dashed #C0C4C4',
+  borderRadius: 8,
+  backgroundColor: '$gray50',
+  height: 120,
+  width: 188,
+  variants: {
+    rounded: {
+      true: {
+        borderRadius: '100%'
+      }
+    }
+  }
+});
+const TextFallback = styled('p', {
+  fontSize: 12,
+  fontWeight: 400,
+  fontStyle: 'normal',
+  textAlign: 'center',
+  color: '$textDisable'
+});
+const StyledImage = styled('img', {
+  display: 'inline-block',
+  alignItems: 'center',
+  justifyContent: 'center',
+  variants: {
+    rounded: {
+      true: {
+        borderRadius: '100%'
+      }
+    }
+  }
+});
+function Image({
+  className,
+  src,
+  alt,
+  width,
+  height,
+  objectFit,
+  fallback,
+  fallbackTitle,
+  css,
+  cssFallback,
+  rounded,
+  ...props
+}) {
+  const {
+    t
+  } = useTranslation('translation');
+  if (src || fallback) {
+    return /*#__PURE__*/jsx(StyledImage, {
+      className: className,
+      src: src,
+      alt: alt,
+      width: width,
+      height: height,
+      srcSet: fallback,
+      rounded: rounded,
+      css: {
+        objectFit: objectFit,
+        ...css
+      },
+      ...props
+    });
+  } else {
+    return /*#__PURE__*/jsx(ContainerFallback, {
+      rounded: rounded,
+      align: "center",
+      justify: "center",
+      css: {
+        width,
+        height,
+        ...cssFallback
+      },
+      children: /*#__PURE__*/jsx(TextFallback, {
+        children: fallbackTitle === 'Tidak ada foto' ? t('fallbackTitle', fallbackTitle) : fallbackTitle
+      })
+    });
+  }
+}
+Image.propTypes = {
+  /**
+   Additional className for img element.
+   */
+  className: PropTypes.string,
+  /**
+   Which is used to specify the source of an image.
+   */
+  src: PropTypes.string,
+  /**
+   The written copy that appears in place of an image on a webpage if the image fails to load on a user's screen.
+   */
+  alt: PropTypes.string,
+  /**
+   Additional css for img element.
+   */
+  css: PropTypes.object,
+  /**
+   Additional css for default fallback element.
+   */
+  cssFallback: PropTypes.object,
+  /**
+   Custom width of img element.
+   */
+  width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  /**
+   Custom height of img element.
+   */
+  height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  /**
+   Set image to circle.
+   */
+  rounded: PropTypes.bool,
+  /**
+   Used to specify how an <img> should be resized to fit its container.
+   */
+  objectFit: PropTypes.string,
+  /**
+   Custom fallback if image url doesn't exist.
+   */
+  fallback: PropTypes.string,
+  /**
+   Custom fallback title for default fallback.
+   */
+  fallbackTitle: PropTypes.string
+};
+Image.defaultProps = {
+  rounded: false,
+  fallbackTitle: 'Tidak ada foto'
+};
+
+export { Image, Image as default };

package/components/link/Link.esm.js

@@ -0,0 +1,59 @@
+import { __rest } from 'tslib';
+import { jsx } from 'react/jsx-runtime';
+import * as React from 'react';
+import { styled } from '../../config/stitches.config.esm.js';
+
+const StyledLink = styled('a', {
+  fontSize: '$short-content-regular',
+  textDecoration: 'underline',
+  variants: {
+    /**
+     * Specify the link color
+     */
+    color: {
+      success: {
+        color: '$textBrand'
+      },
+      info: {
+        color: '$hlNews'
+      },
+      warning: {
+        color: '$hlProcess'
+      },
+      failed: {
+        color: '$textRed'
+      },
+      pending: {
+        color: '$hlPending'
+      },
+      primary: {
+        color: '$textPrimary'
+      }
+    }
+  },
+  defaultVariants: {
+    color: 'success'
+  }
+});
+const Link = /*#__PURE__*/React.forwardRef((_a, forwardedRef) => {
+  var {
+      children = 'Learn more',
+      color = 'success',
+      isExternal = false,
+      href = '#',
+      target,
+      rel
+    } = _a,
+    props = __rest(_a, ["children", "color", "isExternal", "href", "target", "rel"]);
+  return jsx(StyledLink, Object.assign({
+    target: isExternal ? '_blank' : target,
+    rel: isExternal ? 'noopener noreferrer' : rel,
+    href: href,
+    color: color,
+    ref: forwardedRef
+  }, props, {
+    children: children
+  }));
+});
+
+export { Link };

package/components/loadingBar/LoadingBar.esm.js

@@ -0,0 +1,113 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useState, useEffect } from 'react';
+import { styled } from '@stitches/react';
+import * as ProgressPrimitive from '@radix-ui/react-progress';
+
+const Container = styled('div', {});
+const ProgressText = styled('p', {
+  fontStyle: 'normal',
+  fontWeight: 400,
+  fontSize: 14,
+  color: '$textSecondary',
+  marginTop: 8,
+  textAlign: 'center'
+});
+const StyledProgress = styled(ProgressPrimitive.Root, {
+  position: 'relative',
+  overflow: 'hidden',
+  background: '$gray150',
+  borderRadius: '99999px',
+  width: '100%',
+  variants: {
+    size: {
+      sm: {
+        height: 4
+      },
+      md: {
+        height: 8
+      }
+    }
+  }
+});
+const StyledIndicator = styled(ProgressPrimitive.Indicator, {
+  background: 'linear-gradient(90deg, rgba(1,174,136,1) 35%, rgba(4,201,158,1) 100%)',
+  width: '100%',
+  height: '100%',
+  transition: 'transform 660ms cubic-bezier(0.65, 0, 0.35, 1)'
+});
+const Progress = StyledProgress;
+const ProgressIndicator = StyledIndicator;
+function PrimitiveLoadingBar({
+  progress,
+  description,
+  showProgressOnly,
+  css,
+  visibility,
+  colors,
+  size
+}) {
+  return visibility && jsxs(Container, {
+    css: css,
+    children: [jsx(Progress, {
+      value: 66,
+      size: size,
+      children: jsx(ProgressIndicator, {
+        style: {
+          transform: `translateX(-${100 - progress}%)`
+        },
+        css: {
+          background: (colors === null || colors === void 0 ? void 0 : colors.length) > 1 ? `linear-gradient(90deg, ${colors === null || colors === void 0 ? void 0 : colors[0]} 35%, ${colors === null || colors === void 0 ? void 0 : colors[1]} 100%)` : colors === null || colors === void 0 ? void 0 : colors[0]
+        }
+      })
+    }), !showProgressOnly && jsx(ProgressText, {
+      children: `${description} ${progress}%`
+    })]
+  });
+}
+let interval;
+function LoadingBar(props) {
+  const {
+    show,
+    onCompleted,
+    interval: intervalTime
+  } = props;
+  const [progress, setProgress] = useState(0);
+  const [visibility, setVisibility] = useState(false);
+  useEffect(() => {
+    if (show) {
+      setVisibility(true);
+      interval = setInterval(() => {
+        setProgress(prev => prev < 100 && prev + 1);
+      }, intervalTime);
+    } else {
+      setProgress(100);
+      clearInterval(interval);
+      setTimeout(() => {
+        setVisibility(false);
+        setProgress(0);
+      }, 1000);
+    }
+    return () => setProgress(0);
+  }, [show, intervalTime]);
+  useEffect(() => {
+    if (progress === 100) {
+      clearInterval(interval);
+      onCompleted === null || onCompleted === void 0 ? void 0 : onCompleted();
+    }
+  }, [progress, onCompleted]);
+  return typeof (props === null || props === void 0 ? void 0 : props.progress) === 'number' ? jsx(PrimitiveLoadingBar, Object.assign({}, props, {
+    visibility: true
+  })) : jsx(PrimitiveLoadingBar, Object.assign({}, props, {
+    visibility: visibility,
+    progress: progress
+  }));
+}
+LoadingBar.defaultProps = {
+  showProgressOnly: false,
+  show: false,
+  interval: 100,
+  description: 'Loading...',
+  size: 'md'
+};
+
+export { LoadingBar as default };

package/components/mapPicker/InputMapPicker.esm.js

@@ -0,0 +1,160 @@
+import { __awaiter } from 'tslib';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React__default, { useState, useRef, useCallback, useEffect } from 'react';
+import MapPicker from './MapPicker.esm.js';
+import { Button } from '../button/Button.esm.js';
+import { Image } from '../image/Image.esm.js';
+import ModalDialog, { ModalDialogTrigger, ModalDialogTitle, ModalDialogContent } from '../modalDialog/ModalDialog.esm.js';
+import Paragraph from '../paragraph/Paragraph.esm.js';
+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 useMediaQuery from '../../utils/useMediaQuery.esm.js';
+import img from './assets/images/Mapsicle.png.esm.js';
+
+const ContainerInput = styled('div', {
+  position: 'relative',
+  height: 64,
+  width: '100%',
+  borderRadius: 8
+});
+function InputMapPicker(props) {
+  var _a;
+  const {
+    css,
+    modalTitle,
+    buttonLabel,
+    placeholder,
+    radius,
+    value,
+    showSelectButton,
+    readOnly,
+    onChange,
+    customInputValue,
+    header,
+    marker
+  } = props;
+  const modalTrigger = React__default.useRef(null);
+  const [inputValue, setInputValue] = useState(placeholder);
+  const initialInputValue = useRef(null);
+  const handleSearchLatLng = useCallback(latLng => __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`);
+      const location = yield res.json();
+      initialInputValue.current = location.display_name;
+      setInputValue(location.display_name);
+    } catch (error) {
+      throw new Error('Failed to search address');
+    }
+  }), []);
+  useEffect(() => {
+    if (value && value.lat && value.lng) {
+      handleSearchLatLng(value);
+    }
+  }, [value, handleSearchLatLng]);
+  function handleClick() {
+    var _a;
+    (_a = modalTrigger === null || modalTrigger === void 0 ? void 0 : modalTrigger.current) === null || _a === void 0 ? void 0 : _a.click();
+  }
+  function handleChange(mapObject, isConfirmed) {
+    if (isConfirmed) {
+      handleClick();
+      onChange === null || onChange === void 0 ? void 0 : onChange(mapObject);
+    } else {
+      setInputValue(mapObject.formatted_address);
+    }
+  }
+  const isDesktop = useMediaQuery('(min-width: 767px)');
+  return jsxs(React__default.Fragment, {
+    children: [jsxs(Flex, {
+      direction: "column",
+      gap: 3,
+      align: "start",
+      children: [jsxs(ContainerInput, {
+        css: css,
+        children: [jsx(Image, {
+          css: {
+            borderRadius: 8,
+            height: 64
+          },
+          src: img,
+          alt: "map-picker",
+          width: "100%"
+        }), jsx(Box, {
+          css: {
+            position: 'absolute',
+            top: 0,
+            right: 0,
+            bottom: 0,
+            left: 0,
+            backgroundColor: 'rgba(39, 42, 42, 0.6)',
+            borderRadius: 8
+          },
+          children: jsxs(Flex, {
+            align: "center",
+            justify: "between",
+            gap: 6,
+            css: {
+              height: '100%',
+              padding: 16
+            },
+            children: [jsx(Paragraph, {
+              css: {
+                color: '$textWhite',
+                fontWeight: 600,
+                flex: 1
+              },
+              isTruncated: true,
+              children: (_a = customInputValue !== null && customInputValue !== void 0 ? customInputValue : inputValue) !== null && _a !== void 0 ? _a : 'Tandai lokasi dalam peta'
+            }), isDesktop ? jsx(Button, {
+              type: "button",
+              size: "sm",
+              buttonType: "secondary",
+              onClick: handleClick,
+              children: buttonLabel !== null && buttonLabel !== void 0 ? buttonLabel : 'Ubah Lokasi'
+            }) : null]
+          })
+        })]
+      }), !isDesktop ? jsx(Button, {
+        type: "button",
+        size: "md",
+        buttonType: "secondary",
+        onClick: handleClick,
+        children: buttonLabel !== null && buttonLabel !== void 0 ? buttonLabel : 'Ubah Lokasi'
+      }) : null]
+    }), jsxs(ModalDialog, {
+      width: isDesktop ? 565 : '100%',
+      layer: "$modal",
+      onPointerDownOutside: e => e.preventDefault(),
+      onCloseClick: () => {
+        var _a;
+        return setInputValue((_a = initialInputValue.current) !== null && _a !== void 0 ? _a : placeholder);
+      },
+      children: [jsx(ModalDialogTrigger, {
+        asChild: true,
+        children: jsx("div", {
+          ref: modalTrigger
+        })
+      }), jsx(ModalDialogTitle, {
+        children: modalTitle !== null && modalTitle !== void 0 ? modalTitle : 'Tambah Lokasi di Map'
+      }), jsx(ModalDialogContent, {
+        css: {
+          overflowY: 'auto',
+          overflowX: 'hidden',
+          position: 'relative'
+        },
+        children: jsx(MapPicker, {
+          value: value,
+          onChange: handleChange,
+          radius: radius,
+          showSelectButton: showSelectButton,
+          readOnly: readOnly,
+          header: header,
+          marker: marker
+        })
+      })]
+    })]
+  });
+}
+
+export { InputMapPicker as default };

package/components/mapPicker/MapPicker.esm.js

@@ -0,0 +1,122 @@
+import 'core-js/modules/es.iterator.constructor.js';
+import 'core-js/modules/es.iterator.map.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { MapContainer, Circle, TileLayer } from '@monsonjeremy/react-leaflet';
+import { useState, useEffect } from 'react';
+import useMediaQuery from '../../utils/useMediaQuery.esm.js';
+import 'leaflet/dist/leaflet.css';
+import 'leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility.css';
+import 'leaflet-defaulticon-compatibility';
+import { colors } from '../../config/stitches.config.esm.js';
+import { Container, MapWrapper, mapContainerStyle } from './MapPicker.styles.esm.js';
+import { useMapSearch } from './hooks/useMapSearch.esm.js';
+import { InputSearch } from './components/InputSearch.esm.js';
+import { ButtonSelect } from './components/ButtonSelect.esm.js';
+import { MarkerIcon } from './components/MarkerIcon.esm.js';
+import { ZoomControls } from './components/ZoomControls.esm.js';
+import { AddressCard } from './components/AddressCard.esm.js';
+import { ChangeView } from './components/ChangeView.esm.js';
+
+function MapPicker(props) {
+  const {
+    css,
+    radius,
+    value,
+    showSelectButton,
+    readOnly,
+    onChange,
+    selectLocationText,
+    searchPlaceholder,
+    header,
+    marker
+  } = props;
+  const [zoom, setZoom] = useState(16);
+  const isDesktop = useMediaQuery('(min-width: 767px)');
+  const {
+    center,
+    setCenter,
+    places,
+    searchQuery,
+    searchResult,
+    handleSearchChange,
+    handleSearchSelect,
+    handleSearchLatLng
+  } = useMapSearch({
+    initialCenter: value && (value === null || value === void 0 ? void 0 : value.lat) && (value === null || value === void 0 ? void 0 : value.lng) && value || {
+      lat: -6.175392,
+      lng: 106.827153
+    },
+    showSelectButton,
+    onChange
+  });
+  useEffect(() => {
+    if (value && (value === null || value === void 0 ? void 0 : value.lat) && (value === null || value === void 0 ? void 0 : value.lng)) {
+      setCenter(value);
+      handleSearchLatLng(value);
+    }
+  }, [value, setCenter]);
+  function handleMarkerClick() {
+    if (places.length > 0) {
+      const mapObject = {
+        place_id: places[0].place_id,
+        lat: places[0].lat,
+        lng: places[0].lon,
+        formatted_address: places[0].display_name,
+        address_components: places[0].address
+      };
+      onChange === null || onChange === void 0 ? void 0 : onChange(Object.assign({}, mapObject), true);
+    }
+  }
+  return jsxs(Container, {
+    direction: "column",
+    css: css,
+    children: [header, jsx(MapWrapper, {
+      children: jsxs(MapContainer, {
+        center: [center === null || center === void 0 ? void 0 : center.lat, center === null || center === void 0 ? void 0 : center.lng],
+        zoom: zoom,
+        zoomControl: false,
+        dragging: !readOnly,
+        style: isDesktop ? mapContainerStyle.desktop : mapContainerStyle.mobile,
+        children: [radius && jsx(Circle, {
+          center: [center === null || center === void 0 ? void 0 : center.lat, center === null || center === void 0 ? void 0 : center.lng],
+          radius: radius,
+          pathOptions: {
+            color: colors.bgBrand,
+            fillColor: colors.bgBrand
+          }
+        }), jsx(TileLayer, {
+          url: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+        }), showSelectButton && jsx(ButtonSelect, {
+          onClick: handleMarkerClick,
+          label: selectLocationText
+        }), jsx(MarkerIcon, {
+          marker: marker
+        }), jsx(ChangeView, {
+          center: [center === null || center === void 0 ? void 0 : center.lat, center === null || center === void 0 ? void 0 : center.lng],
+          readOnly: readOnly,
+          onDragEnd: handleSearchLatLng
+        }), !readOnly && jsx(InputSearch, {
+          list: searchResult,
+          value: searchQuery,
+          placeholder: searchPlaceholder || 'Cari ...',
+          onChange: handleSearchChange,
+          onSelect: handleSearchSelect
+        }), jsx(ZoomControls, {
+          onZoomIn: () => setZoom(current => current + 1),
+          onZoomOut: () => setZoom(current => current - 1)
+        })]
+      }, zoom)
+    }), places === null || places === void 0 ? void 0 : places.map(place => jsx(AddressCard, {
+      place: place
+    }, place.place_id))]
+  });
+}
+MapPicker.defaultProps = {
+  value: {
+    lat: -6.175392,
+    lng: 106.827153
+  },
+  showSelectButton: true
+};
+
+export { MapPicker as default };

package/components/mapPicker/MapPicker.styles.esm.js

@@ -0,0 +1,70 @@
+import { styled } from '../../config/stitches.config.esm.js';
+import Flex from '../../layout/flex/Flex.esm.js';
+
+//@ts-nocheck
+const Container = styled(Flex, {
+  gap: '$spacing-05',
+  '@md': {
+    width: 517
+  }
+});
+const AddressCardWrapper = styled(Flex, {
+  border: '1px solid $gray150',
+  borderRadius: 8,
+  gap: '$spacing-04',
+  padding: '$spacing-05'
+});
+const Address = styled('p', {
+  fontSize: 14,
+  fontWeight: 400,
+  color: '$textPrimary',
+  margin: 0
+});
+const SearchInput = styled('input', {
+  boxSizing: `border-box`,
+  border: `1px solid transparent`,
+  width: 204,
+  height: 32,
+  paddingLeft: 36,
+  paddingRight: 10,
+  borderRadius: 6,
+  boxShadow: `0 2px 6px rgba(0, 0, 0, 0.3)`,
+  fontSize: 14,
+  outline: `none`,
+  textOverflow: `ellipses`
+});
+const ZoomControlButton = styled(Flex, {
+  height: 44,
+  width: 44,
+  padding: 12,
+  justifyContent: 'center',
+  alignItems: 'center',
+  border: '1px solid $btnPrimary',
+  borderRadius: 6,
+  backgroundColor: '$bgWhite',
+  cursor: 'pointer',
+  zIndex: 1800
+});
+const MapWrapper = styled('div', {
+  position: 'relative',
+  width: '100% !important',
+  height: '441px !important',
+  overflow: 'hidden',
+  '@md': {
+    width: '517px !important'
+  }
+});
+const mapContainerStyle = {
+  mobile: {
+    position: 'relative',
+    width: '100%',
+    height: '441px'
+  },
+  desktop: {
+    position: 'relative',
+    width: '517px',
+    height: '441px'
+  }
+};
+
+export { Address, AddressCardWrapper, Container, MapWrapper, SearchInput, ZoomControlButton, mapContainerStyle };