@bigbinary/neeto-molecules 1.1.9 → 1.1.11

package/dist/IconPicker/index.js

@@ -0,0 +1,164 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["filled", "label", "value", "onClick", "className"];
+import React, { useEffect, useRef, useState } from "react";
+import classnames from "classnames";
+import { humanize, isNotEmpty, noop } from "@bigbinary/neeto-commons-frontend/pure";
+import { useDebounce } from "@bigbinary/neeto-commons-frontend/react-utils";
+import { Close } from "@bigbinary/neeto-icons";
+import { Dropdown, Label, Input, Button, Typography } from "@bigbinary/neetoui";
+import { useTranslation } from "react-i18next";
+import { FixedSizeGrid as Grid } from "react-window";
+import { GRID_PROPERTIES, ICONS_LIST } from "./constants";
+import Icon from "./Icon";
+import "./icon-picker.scss";
+import NoResults from "./NoResults";
+var IconPicker = function IconPicker(_ref) {
+  var _ref$filled = _ref.filled,
+    filled = _ref$filled === void 0 ? false : _ref$filled,
+    label = _ref.label,
+    _ref$value = _ref.value,
+    value = _ref$value === void 0 ? "" : _ref$value,
+    _ref$onClick = _ref.onClick,
+    onClick = _ref$onClick === void 0 ? noop : _ref$onClick,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? "" : _ref$className,
+    otherProps = _objectWithoutProperties(_ref, _excluded);
+  var _useState = useState(""),
+    _useState2 = _slicedToArray(_useState, 2),
+    searchTerm = _useState2[0],
+    setSearchTerm = _useState2[1];
+  var _useState3 = useState([]),
+    _useState4 = _slicedToArray(_useState3, 2),
+    iconList = _useState4[0],
+    setIconList = _useState4[1];
+  var _useState5 = useState(value),
+    _useState6 = _slicedToArray(_useState5, 2),
+    activeIcon = _useState6[0],
+    setActiveIcon = _useState6[1];
+  var gridRef = useRef(null);
+  var debouncedSearchTerm = useDebounce(searchTerm);
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var handleSearch = function handleSearch(term) {
+    var _gridRef$current;
+    var searchTerm = term.toLowerCase().trim().replace(/\s+/g, "_");
+    var filteredIcons = ICONS_LIST.filter(function (icon) {
+      return icon.toLowerCase().includes(searchTerm);
+    });
+    setIconList(filteredIcons);
+    (_gridRef$current = gridRef.current) === null || _gridRef$current === void 0 ? void 0 : _gridRef$current.scrollToItem({
+      rowIndex: 0
+    });
+  };
+  var handleRemoveClick = function handleRemoveClick() {
+    onClick("");
+    setActiveIcon("");
+  };
+  var handleDropdownClick = function handleDropdownClick() {
+    var _gridRef$current2;
+    (_gridRef$current2 = gridRef.current) === null || _gridRef$current2 === void 0 ? void 0 : _gridRef$current2.scrollToItem({
+      rowIndex: iconList.findIndex(function (icon) {
+        return icon === activeIcon;
+      }) / GRID_PROPERTIES.columnCount
+    });
+    setSearchTerm("");
+  };
+  var symbolsStyle = {
+    fontVariationSettings: "'FILL' ".concat(filled ? 1 : 0)
+  };
+  useEffect(function () {
+    handleSearch(debouncedSearchTerm);
+  }, [debouncedSearchTerm]);
+  var renderGridCell = function renderGridCell(_ref2) {
+    var columnIndex = _ref2.columnIndex,
+      rowIndex = _ref2.rowIndex,
+      style = _ref2.style,
+      data = _ref2.data;
+    var iconIndex = rowIndex * GRID_PROPERTIES.columnCount + columnIndex;
+    var icon = data[iconIndex];
+    var handleIconClick = function handleIconClick(icon) {
+      onClick(icon);
+      setActiveIcon(icon);
+    };
+    return icon ? /*#__PURE__*/React.createElement(Icon, {
+      active: icon === activeIcon,
+      icon: icon,
+      style: style,
+      symbolsStyle: symbolsStyle,
+      onClick: handleIconClick
+    }) : null;
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: "flex flex-col items-start gap-2"
+  }, label && /*#__PURE__*/React.createElement(Label, null, label), /*#__PURE__*/React.createElement(Dropdown, _extends({
+    buttonSize: "small",
+    buttonStyle: "secondary",
+    closeOnSelect: false,
+    dropdownProps: {
+      className: classnames("h-96", className)
+    },
+    position: "bottom-start",
+    strategy: "fixed",
+    buttonProps: {
+      "data-testid": "icon-picker-dropdown",
+      onClick: handleDropdownClick
+    },
+    label: /*#__PURE__*/React.createElement("span", {
+      className: "flex items-center gap-2",
+      style: symbolsStyle
+    }, value && /*#__PURE__*/React.createElement("span", {
+      className: "material-symbols-rounded neeto-ui-text-base mx-auto"
+    }, value), /*#__PURE__*/React.createElement(Typography, {
+      style: "body2"
+    }, humanize(value) || t("neetoMolecules.iconPicker.dropdown.label"))),
+    onClose: function onClose() {
+      return setSearchTerm("");
+    }
+  }, otherProps), /*#__PURE__*/React.createElement("div", {
+    className: "w-80 flex-grow p-2"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "mb-1 space-y-2"
+  }, /*#__PURE__*/React.createElement(Input, {
+    autoFocus: true,
+    autoComplete: "off",
+    "data-cy": "pick-icon-text-field",
+    value: searchTerm,
+    placeholder: t("neetoMolecules.common.search", {
+      entity: t("neetoMolecules.iconPicker.entity")
+    }),
+    suffix: /*#__PURE__*/React.createElement(Button, {
+      icon: Close,
+      size: "small",
+      style: "link",
+      onClick: function onClick() {
+        return setSearchTerm("");
+      }
+    }),
+    onChange: function onChange(e) {
+      return setSearchTerm(e.target.value);
+    }
+  }), value && /*#__PURE__*/React.createElement("div", {
+    className: "neeto-ui-bg-white flex justify-center"
+  }, /*#__PURE__*/React.createElement(Button, {
+    className: "text-sm",
+    "data-cy": "icon-remove-button",
+    "data-testid": "icon-remove-button",
+    icon: Close,
+    label: t("neetoMolecules.iconPicker.dropdown.removeButton"),
+    style: "link",
+    onClick: handleRemoveClick
+  }))), isNotEmpty(iconList) ? /*#__PURE__*/React.createElement(Grid, {
+    className: "overflow-x-hidden",
+    columnCount: GRID_PROPERTIES.columnCount,
+    columnWidth: GRID_PROPERTIES.columnWidth,
+    height: GRID_PROPERTIES.gridHeight,
+    itemData: iconList,
+    ref: gridRef,
+    rowHeight: GRID_PROPERTIES.rowHeight,
+    width: GRID_PROPERTIES.gridWidth,
+    rowCount: Math.ceil(iconList.length / GRID_PROPERTIES.columnCount)
+  }, renderGridCell) : /*#__PURE__*/React.createElement(NoResults, null))));
+};
+export default IconPicker;

package/dist/ImageWithFallback/ImagePlaceholder.js

@@ -0,0 +1,16 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["className"];
+import React from "react";
+import classnames from "classnames";
+var ImagePlaceholder = function ImagePlaceholder(_ref) {
+  var _ref$className = _ref.className,
+    className = _ref$className === void 0 ? "" : _ref$className,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement("div", _extends({
+    "data-testid": "fallback-image",
+    className: classnames("neeto-ui-bg-gray-100", _defineProperty({}, className, className))
+  }, props));
+};
+export default ImagePlaceholder;

package/dist/ImageWithFallback/index.js

@@ -0,0 +1,31 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["src", "fallback"];
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+import React, { useEffect, useState } from "react";
+import ImagePlaceholder from "./ImagePlaceholder";
+var ImageWithFallback = function ImageWithFallback(_ref) {
+  var src = _ref.src,
+    fallback = _ref.fallback,
+    otherProps = _objectWithoutProperties(_ref, _excluded);
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isLoaded = _useState2[0],
+    setIsLoaded = _useState2[1];
+  useEffect(function () {
+    var img = new Image();
+    img.onload = function () {
+      setIsLoaded(true);
+    };
+    img.src = src;
+  }, [src]);
+  return isLoaded ? /*#__PURE__*/React.createElement("img", _extends({
+    "data-testid": "original-image"
+  }, _objectSpread({
+    src: src
+  }, otherProps))) : /*#__PURE__*/React.createElement(React.Fragment, null, fallback || /*#__PURE__*/React.createElement(ImagePlaceholder, otherProps));
+};
+export default ImageWithFallback;

package/dist/IntegrationCard/Dropdown.js

@@ -0,0 +1,45 @@
+import React from "react";
+import { noop } from "@bigbinary/neeto-commons-frontend/pure";
+import { isNotNil } from "ramda";
+import { useTranslation } from "react-i18next";
+import MoreDropdown from "../MoreDropdown";
+var Dropdown = function Dropdown(_ref) {
+  var customDropdown = _ref.customDropdown,
+    _ref$handleManage = _ref.handleManage,
+    handleManage = _ref$handleManage === void 0 ? noop : _ref$handleManage,
+    _ref$hideDisconnect = _ref.hideDisconnect,
+    hideDisconnect = _ref$hideDisconnect === void 0 ? false : _ref$hideDisconnect,
+    _ref$onDisconnect = _ref.onDisconnect,
+    onDisconnect = _ref$onDisconnect === void 0 ? noop : _ref$onDisconnect;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  if (isNotNil(customDropdown)) {
+    return /*#__PURE__*/React.createElement("div", {
+      onClick: function onClick(e) {
+        return e.stopPropagation();
+      }
+    }, customDropdown);
+  }
+  var isManageable = isNotNil(handleManage);
+  if (!isManageable && hideDisconnect) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement("div", {
+    onClick: function onClick(e) {
+      return e.stopPropagation();
+    }
+  }, /*#__PURE__*/React.createElement(MoreDropdown, {
+    menuItems: [{
+      isVisible: isManageable,
+      onClick: handleManage,
+      label: t("neetoMolecules.integrationCard.manage"),
+      key: "integration-card-manage-integration"
+    }, {
+      isVisible: !hideDisconnect,
+      onClick: onDisconnect,
+      label: t("neetoMolecules.integrationCard.disconnect"),
+      key: "integration-card-manage-disconnection"
+    }]
+  }));
+};
+export default Dropdown;

package/dist/IntegrationCard/Status.js

@@ -0,0 +1,25 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from "react";
+import { Check, Warning } from "@bigbinary/neeto-icons";
+import { Tag } from "@bigbinary/neetoui";
+import { useTranslation } from "react-i18next";
+var Status = function Status(_ref) {
+  var isExpired = _ref.isExpired;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var tagProps = isExpired ? {
+    icon: Warning,
+    label: t("neetoMolecules.integrationCard.tags.expired"),
+    style: "warning"
+  } : {
+    icon: Check,
+    label: t("neetoMolecules.integrationCard.tags.connected"),
+    style: "success"
+  };
+  return /*#__PURE__*/React.createElement(Tag, _extends({
+    className: "flex-row-reverse"
+  }, tagProps, {
+    "data-testid": "integration-status"
+  }));
+};
+export default Status;

package/dist/IntegrationCard/index.js

@@ -0,0 +1,128 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["icon", "subIcons", "label", "description", "className", "onConnect", "onDisconnect", "onManage", "isLoading", "isConnected", "isFailed", "isExpired", "disabled", "hidden", "hideDisconnect", "onClick", "tooltipProps", "customDropdown", "dataCy", "children"];
+import React from "react";
+import classnames from "classnames";
+import { isNotEmpty, noop } from "@bigbinary/neeto-commons-frontend/pure";
+import { joinHyphenCase } from "@bigbinary/neeto-commons-frontend/utils";
+import { Typography, Button, Spinner, Tooltip } from "@bigbinary/neetoui";
+import { isNotNil } from "ramda";
+import { useTranslation } from "react-i18next";
+import Dropdown from "./Dropdown";
+import Status from "./Status";
+var IntegrationCard = function IntegrationCard(_ref) {
+  var Icon = _ref.icon,
+    _ref$subIcons = _ref.subIcons,
+    subIcons = _ref$subIcons === void 0 ? [] : _ref$subIcons,
+    _ref$label = _ref.label,
+    label = _ref$label === void 0 ? "" : _ref$label,
+    _ref$description = _ref.description,
+    description = _ref$description === void 0 ? "" : _ref$description,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? "" : _ref$className,
+    _ref$onConnect = _ref.onConnect,
+    onConnect = _ref$onConnect === void 0 ? noop : _ref$onConnect,
+    _ref$onDisconnect = _ref.onDisconnect,
+    onDisconnect = _ref$onDisconnect === void 0 ? noop : _ref$onDisconnect,
+    _ref$onManage = _ref.onManage,
+    onManage = _ref$onManage === void 0 ? undefined : _ref$onManage,
+    _ref$isLoading = _ref.isLoading,
+    isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,
+    _ref$isConnected = _ref.isConnected,
+    isConnected = _ref$isConnected === void 0 ? false : _ref$isConnected,
+    _ref$isFailed = _ref.isFailed,
+    isFailed = _ref$isFailed === void 0 ? false : _ref$isFailed,
+    _ref$isExpired = _ref.isExpired,
+    isExpired = _ref$isExpired === void 0 ? false : _ref$isExpired,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    _ref$hidden = _ref.hidden,
+    hidden = _ref$hidden === void 0 ? false : _ref$hidden,
+    _ref$hideDisconnect = _ref.hideDisconnect,
+    hideDisconnect = _ref$hideDisconnect === void 0 ? false : _ref$hideDisconnect,
+    _ref$onClick = _ref.onClick,
+    onCardClick = _ref$onClick === void 0 ? undefined : _ref$onClick,
+    _ref$tooltipProps = _ref.tooltipProps,
+    tooltipProps = _ref$tooltipProps === void 0 ? {} : _ref$tooltipProps,
+    _ref$customDropdown = _ref.customDropdown,
+    customDropdown = _ref$customDropdown === void 0 ? null : _ref$customDropdown,
+    _ref$dataCy = _ref.dataCy,
+    dataCy = _ref$dataCy === void 0 ? "" : _ref$dataCy,
+    children = _ref.children,
+    otherProps = _objectWithoutProperties(_ref, _excluded);
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  if (hidden) return null;
+  var isCardClickable = isConnected && isNotNil(onCardClick);
+  var cardProps = isCardClickable ? {
+    onClick: onCardClick
+  } : {};
+  return /*#__PURE__*/React.createElement(Tooltip, _extends({
+    disabled: !disabled,
+    position: "top",
+    content: disabled && t("neetoMolecules.integrationCard.tooltip.integrationNotAvailable")
+  }, tooltipProps), /*#__PURE__*/React.createElement("div", _extends({
+    "data-cy": dataCy,
+    "data-testid": "integration-card",
+    className: classnames("outline-none neeto-ui-border-gray-300 neeto-ui-shadow-xs hover:neeto-ui-border-gray-500 focus:neeto-ui-border-gray-500 neeto-ui-rounded-lg flex flex-col border p-6 no-underline transition-colors", {
+      "hover:neeto-ui-bg-100 cursor-not-allowed opacity-50": disabled,
+      "cursor-pointer": isCardClickable
+    }, className)
+  }, cardProps, otherProps), /*#__PURE__*/React.createElement("div", {
+    className: "flex flex-grow justify-between",
+    "data-cy": "integration-tabs"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "flex min-w-0 flex-col justify-end"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "relative mb-4 flex h-8"
+  }, Icon && /*#__PURE__*/React.createElement(Icon, {
+    size: 32
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "my-auto"
+  }, /*#__PURE__*/React.createElement(Typography, {
+    className: "mb-2",
+    "data-cy": "integration-card-label",
+    style: "h4",
+    weight: "semibold"
+  }, label), /*#__PURE__*/React.createElement(Typography, {
+    className: "break-words",
+    "data-cy": "".concat(joinHyphenCase(label), "-integration-description"),
+    style: "body2"
+  }, description), children)), isNotEmpty(subIcons) && /*#__PURE__*/React.createElement("div", {
+    className: "flex h-24 flex-col gap-2"
+  }, subIcons.map(function (Icon, index) {
+    return /*#__PURE__*/React.createElement(Icon, {
+      className: "neeto-ui-text-gray-600",
+      key: index,
+      size: 24
+    });
+  }))), /*#__PURE__*/React.createElement("div", {
+    className: "neeto-ui-border-gray-300 mt-4 w-full border-t pt-2"
+  }, isLoading ? /*#__PURE__*/React.createElement("div", {
+    className: "mt-3 flex items-center justify-start"
+  }, /*#__PURE__*/React.createElement(Spinner, null)) : /*#__PURE__*/React.createElement("div", {
+    className: "flex h-8 items-center justify-between"
+  }, isConnected && /*#__PURE__*/React.createElement(Status, {
+    isExpired: isExpired
+  }), isFailed && /*#__PURE__*/React.createElement(Button, {
+    className: "neeto-ui-text-warning-500",
+    "data-cy": "connect-button",
+    disabled: disabled || isLoading,
+    label: t("neetoMolecules.integrationCard.tryAgain"),
+    style: "link",
+    onClick: onConnect
+  }), !isConnected && !isFailed && /*#__PURE__*/React.createElement(Button, {
+    "data-cy": "connect-button",
+    "data-testid": "integraiton-card-connect-button",
+    disabled: disabled || isLoading,
+    label: t("neetoMolecules.integrationCard.connect"),
+    style: "link",
+    onClick: onConnect
+  }), (isConnected || isFailed) && /*#__PURE__*/React.createElement(Dropdown, {
+    customDropdown: customDropdown,
+    hideDisconnect: hideDisconnect,
+    onDisconnect: onDisconnect,
+    handleManage: onManage
+  })))));
+};
+export default IntegrationCard;

package/dist/IntegrationDisconnectAlert/index.js

@@ -0,0 +1,36 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["t", "isOpen", "isDisconnecting", "title", "message", "onClose", "onDisconnect"];
+import React from "react";
+import { noop } from "@bigbinary/neeto-commons-frontend/pure";
+import { withT } from "@bigbinary/neeto-commons-frontend/react-utils";
+import { Alert } from "@bigbinary/neetoui";
+var IntegrationDisconnectAlert = function IntegrationDisconnectAlert(_ref) {
+  var t = _ref.t,
+    _ref$isOpen = _ref.isOpen,
+    isOpen = _ref$isOpen === void 0 ? false : _ref$isOpen,
+    _ref$isDisconnecting = _ref.isDisconnecting,
+    isDisconnecting = _ref$isDisconnecting === void 0 ? false : _ref$isDisconnecting,
+    _ref$title = _ref.title,
+    title = _ref$title === void 0 ? "" : _ref$title,
+    _ref$message = _ref.message,
+    message = _ref$message === void 0 ? "" : _ref$message,
+    _ref$onClose = _ref.onClose,
+    onClose = _ref$onClose === void 0 ? noop : _ref$onClose,
+    _ref$onDisconnect = _ref.onDisconnect,
+    onDisconnect = _ref$onDisconnect === void 0 ? noop : _ref$onDisconnect,
+    otherProps = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement(Alert, _extends({
+    isSubmitting: isDisconnecting,
+    isOpen: isOpen,
+    message: message,
+    onClose: onClose,
+    title: title,
+    submitButtonLabel: t("neetoMolecules.integrationDisconnectAlert.disconnect"),
+    onSubmit: onDisconnect
+  }, otherProps));
+};
+var WrappedIntegrationDisconnectAlert = withT(IntegrationDisconnectAlert);
+WrappedIntegrationDisconnectAlert.displayName = "IntegrationDisconnectAlert";
+export { IntegrationDisconnectAlert };
+export default WrappedIntegrationDisconnectAlert;

package/dist/{IntegrationWalkthroughModal.js → IntegrationWalkthroughModal/index.js}

@@ -1,8 +1,7 @@
-import React from 'react';
-import { noop } from '@bigbinary/neeto-commons-frontend/pure';
-import { withT } from '@bigbinary/neeto-commons-frontend/react-utils';
-import { Modal, Typography, Button } from '@bigbinary/neetoui';
-
+import React from "react";
+import { noop } from "@bigbinary/neeto-commons-frontend/pure";
+import { withT } from "@bigbinary/neeto-commons-frontend/react-utils";
+import { Modal, Button, Typography } from "@bigbinary/neetoui";
 var IntegrationWalkthroughModal = function IntegrationWalkthroughModal(_ref) {
   var t = _ref.t,
     _ref$isOpen = _ref.isOpen,
@@ -36,6 +35,5 @@ var IntegrationWalkthroughModal = function IntegrationWalkthroughModal(_ref) {
 };
 var WrappedIntegrationWalkthroughModal = withT(IntegrationWalkthroughModal);
 WrappedIntegrationWalkthroughModal.displayName = "IntegrationWalkthroughModal";
-
-export { IntegrationWalkthroughModal, WrappedIntegrationWalkthroughModal as default };
-//# sourceMappingURL=IntegrationWalkthroughModal.js.map
+export { IntegrationWalkthroughModal };
+export default WrappedIntegrationWalkthroughModal;

package/dist/IpRestriction/AllowedIpRanges.js

@@ -0,0 +1,72 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import React, { useState } from "react";
+import { Button, Typography } from "@bigbinary/neetoui";
+import { useTranslation } from "react-i18next";
+import { INITIAL_VALUES } from "./constants";
+import FormRow from "./FormRow";
+import { useFetchAllowedIpRanges } from "./hooks/reactQuery/useAllowedIpRanges";
+import Row from "./Row";
+var AllowedIpRanges = function AllowedIpRanges() {
+  var _useState = useState(""),
+    _useState2 = _slicedToArray(_useState, 2),
+    editingRow = _useState2[0],
+    setEditingRow = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    showAddNew = _useState4[0],
+    setShowAddNew = _useState4[1];
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var _useFetchAllowedIpRan = useFetchAllowedIpRanges(),
+    allowedIpRanges = _useFetchAllowedIpRan.data;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "space-y-6",
+    "data-cy": "allowed-ip-range-container"
+  }, /*#__PURE__*/React.createElement(Typography, {
+    "data-cy": "allowed-ip-range-heading",
+    style: "h4"
+  }, t("neetoMolecules.ipRestriction.allowedIpRangeTitle")), /*#__PURE__*/React.createElement("div", {
+    className: "space-y-4"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "grid grid-cols-12 gap-4 px-3"
+  }, /*#__PURE__*/React.createElement(Typography, {
+    className: "neeto-ui-text-gray-700 col-span-5 uppercase",
+    style: "h6"
+  }, t("neetoMolecules.ipRestriction.ipStart")), /*#__PURE__*/React.createElement(Typography, {
+    className: "neeto-ui-text-gray-700 col-span-5 uppercase",
+    style: "h6"
+  }, t("neetoMolecules.ipRestriction.ipEnd")), /*#__PURE__*/React.createElement(Typography, {
+    className: "neeto-ui-text-gray-700 col-span-2 text-center uppercase",
+    style: "h6"
+  }, t("neetoMolecules.ipRestriction.actions"))), /*#__PURE__*/React.createElement("div", {
+    className: "w-full space-y-2"
+  }, allowedIpRanges === null || allowedIpRanges === void 0 ? void 0 : allowedIpRanges.map(function (allowedIpRange) {
+    return editingRow === allowedIpRange.id ? /*#__PURE__*/React.createElement(FormRow, {
+      data: allowedIpRange,
+      isAddNew: false,
+      key: allowedIpRange.id,
+      onCollapse: function onCollapse() {
+        return setEditingRow("");
+      }
+    }) : /*#__PURE__*/React.createElement(Row, {
+      data: allowedIpRange,
+      key: allowedIpRange.id,
+      setEditingRow: setEditingRow
+    });
+  }), showAddNew && /*#__PURE__*/React.createElement(FormRow, {
+    isAddNew: true,
+    data: INITIAL_VALUES,
+    onCollapse: function onCollapse() {
+      return setShowAddNew(false);
+    }
+  })), /*#__PURE__*/React.createElement(Button, {
+    "data-cy": "add-allowed-ip-range-button",
+    disabled: showAddNew,
+    label: t("neetoMolecules.ipRestriction.addNew"),
+    style: "link",
+    onClick: function onClick() {
+      return setShowAddNew(true);
+    }
+  })));
+};
+export default /*#__PURE__*/React.memo(AllowedIpRanges);

package/dist/IpRestriction/CurrentIp.js

@@ -0,0 +1,26 @@
+import React from "react";
+import { Typography } from "@bigbinary/neetoui";
+import { useTranslation } from "react-i18next";
+import { useShowCurrentIp } from "./hooks/reactQuery/useCurrentIp";
+var CurrentIp = function CurrentIp() {
+  var _useShowCurrentIp = useShowCurrentIp(),
+    data = _useShowCurrentIp.data,
+    isLoading = _useShowCurrentIp.isLoading;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "flex flex-wrap items-baseline gap-1",
+    "data-cy": "current-ip-container"
+  }, /*#__PURE__*/React.createElement(Typography, {
+    "data-cy": "current-ip-heading",
+    style: "body2"
+  }, t("neetoMolecules.ipRestriction.currentIpTitle")), /*#__PURE__*/React.createElement(Typography, {
+    "data-cy": "current-ip-value",
+    style: "h4",
+    weight: "semibold"
+  }, isLoading ? "..." : data.ip), /*#__PURE__*/React.createElement(Typography, {
+    "data-cy": "current-ip-description",
+    style: "body2"
+  }, t("neetoMolecules.ipRestriction.currentIpDescription")));
+};
+export default /*#__PURE__*/React.memo(CurrentIp);

package/dist/IpRestriction/FormRow.js

@@ -0,0 +1,77 @@
+import React from "react";
+import { Check, Close } from "@bigbinary/neeto-icons";
+import { Button } from "@bigbinary/neetoui";
+import { Input, Form, Button as FormikButton } from "@bigbinary/neetoui/formik";
+import { useTranslation } from "react-i18next";
+import { useCreateAllowedIpRanges, useUpdateAllowedIpRanges } from "./hooks/reactQuery/useAllowedIpRanges";
+import { getIpRestrictionValidationSchema } from "./utils";
+var FormRow = function FormRow(_ref) {
+  var data = _ref.data,
+    isAddNew = _ref.isAddNew,
+    onCollapse = _ref.onCollapse;
+  var _useCreateAllowedIpRa = useCreateAllowedIpRanges(),
+    createAllowedIpRange = _useCreateAllowedIpRa.mutate;
+  var _useUpdateAllowedIpRa = useUpdateAllowedIpRanges(),
+    updateAllowedIpRange = _useUpdateAllowedIpRa.mutate;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var handleSubmit = function handleSubmit(values) {
+    if (isAddNew) {
+      createAllowedIpRange(values);
+    } else {
+      updateAllowedIpRange({
+        id: data.id,
+        payload: values
+      });
+    }
+    onCollapse();
+  };
+  return /*#__PURE__*/React.createElement(Form, {
+    "data-cy": "allowed-ip-range-form",
+    formikProps: {
+      initialValues: data,
+      validationSchema: getIpRestrictionValidationSchema(),
+      onSubmit: handleSubmit
+    }
+  }, function (_ref2) {
+    var isSubmitting = _ref2.isSubmitting;
+    return /*#__PURE__*/React.createElement("div", {
+      className: "neeto-ui-bg-white neeto-ui-rounded-lg grid grid-cols-12 gap-4 p-3"
+    }, /*#__PURE__*/React.createElement(Input, {
+      autoFocus: true,
+      className: "col-span-5 text-left",
+      "data-cy": "ip-start-text-field",
+      name: "ipStart",
+      placeholder: t("neetoMolecules.ipRestriction.ipStart")
+    }), /*#__PURE__*/React.createElement(Input, {
+      className: "col-span-5 text-left",
+      "data-cy": "ip-end-text-field",
+      name: "ipEnd",
+      placeholder: t("neetoMolecules.ipRestriction.ipEnd")
+    }), /*#__PURE__*/React.createElement("div", {
+      className: "col-span-2 flex items-start justify-center gap-1"
+    }, /*#__PURE__*/React.createElement(FormikButton, {
+      "data-cy": "save-changes-button",
+      "data-testid": "save-changes-button",
+      disabled: isSubmitting,
+      icon: Check,
+      style: "text",
+      tooltipProps: {
+        content: "Submit",
+        position: "top"
+      },
+      type: "submit"
+    }), /*#__PURE__*/React.createElement(Button, {
+      "data-cy": "ip-cancel-button",
+      icon: Close,
+      style: "text",
+      type: "reset",
+      tooltipProps: {
+        content: t("neetoMolecules.common.actions.cancel"),
+        position: "top"
+      },
+      onClick: onCollapse
+    })));
+  });
+};
+export default FormRow;