iguazio.dashboard-react-controls 0.0.4 → 0.0.7

package/dist/components/index.js

@@ -9,6 +9,36 @@ Object.defineProperty(exports, "Button", {
     return _Button.default;
   }
 });
+Object.defineProperty(exports, "ConfirmDialog", {
+  enumerable: true,
+  get: function get() {
+    return _ConfirmDialog.default;
+  }
+});
+Object.defineProperty(exports, "FormCheckBox", {
+  enumerable: true,
+  get: function get() {
+    return _FormCheckBox.default;
+  }
+});
+Object.defineProperty(exports, "FormInput", {
+  enumerable: true,
+  get: function get() {
+    return _FormInput.default;
+  }
+});
+Object.defineProperty(exports, "FormSelect", {
+  enumerable: true,
+  get: function get() {
+    return _FormSelect.default;
+  }
+});
+Object.defineProperty(exports, "Modal", {
+  enumerable: true,
+  get: function get() {
+    return _Modal.default;
+  }
+});
 Object.defineProperty(exports, "PopUpDialog", {
   enumerable: true,
   get: function get() {
@@ -27,21 +57,47 @@ Object.defineProperty(exports, "TextTooltipTemplate", {
     return _TextTooltipTemplate.default;
   }
 });
+Object.defineProperty(exports, "Tip", {
+  enumerable: true,
+  get: function get() {
+    return _Tip.default;
+  }
+});
 Object.defineProperty(exports, "Tooltip", {
   enumerable: true,
   get: function get() {
     return _Tooltip.default;
   }
 });
+Object.defineProperty(exports, "Wizard", {
+  enumerable: true,
+  get: function get() {
+    return _Wizard.default;
+  }
+});
 
 var _Button = _interopRequireDefault(require("./Button/Button"));
 
+var _ConfirmDialog = _interopRequireDefault(require("./ConfirmDialog/ConfirmDialog"));
+
+var _FormCheckBox = _interopRequireDefault(require("./FormCheckBox/FormCheckBox"));
+
+var _FormInput = _interopRequireDefault(require("./FormInput/FormInput"));
+
+var _FormSelect = _interopRequireDefault(require("./FormSelect/FormSelect"));
+
+var _Modal = _interopRequireDefault(require("./Modal/Modal"));
+
 var _PopUpDialog = _interopRequireDefault(require("./PopUpDialog/PopUpDialog"));
 
 var _RoundedIcon = _interopRequireDefault(require("./RoundedIcon/RoundedIcon"));
 
 var _TextTooltipTemplate = _interopRequireDefault(require("./TooltipTemplate/TextTooltipTemplate"));
 
+var _Tip = _interopRequireDefault(require("./Tip/Tip"));
+
 var _Tooltip = _interopRequireDefault(require("./Tooltip/Tooltip"));
 
+var _Wizard = _interopRequireDefault(require("./Wizard/Wizard"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/dist/constants.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.TERTIARY_BUTTON = exports.SECONDARY_BUTTON = exports.PRIMARY_BUTTON = exports.LABEL_BUTTON = exports.INTERNAL_SERVER_ERROR_STATUS_CODE = exports.FORBIDDEN_ERROR_STATUS_CODE = exports.DANGER_BUTTON = exports.CONFLICT_ERROR_STATUS_CODE = void 0;
+exports.validation = exports.TERTIARY_BUTTON = exports.SECONDARY_BUTTON = exports.PRIMARY_BUTTON = exports.MODAL_SM = exports.MODAL_MD = exports.MODAL_LG = exports.LABEL_BUTTON = exports.INTERNAL_SERVER_ERROR_STATUS_CODE = exports.FORBIDDEN_ERROR_STATUS_CODE = exports.DANGER_BUTTON = exports.CONFLICT_ERROR_STATUS_CODE = void 0;
 
 /*=========== BUTTONS =============*/
 var PRIMARY_BUTTON = 'primary';
@@ -15,12 +15,38 @@ exports.TERTIARY_BUTTON = TERTIARY_BUTTON;
 var DANGER_BUTTON = 'danger';
 exports.DANGER_BUTTON = DANGER_BUTTON;
 var LABEL_BUTTON = 'label';
-/*=========== STATUS CODES =============*/
+/*=========== VALITATION =============*/
 
 exports.LABEL_BUTTON = LABEL_BUTTON;
+var validation = {
+  BEGIN_END_NOT_WITH: 'Must not begin and end with',
+  BEGIN_END_WITH: 'Must begin and end with',
+  BEGIN_NOT_WITH: 'Must not begin with',
+  BEGIN_WITH: 'Must begin with',
+  END_NOT_WITH: 'Must not end with',
+  END_WITH: 'Must end with',
+  MUST_CONTAIN_EXACTLY_ONE: 'Must contain exactly one',
+  MUST_HAVE_DOT_AFTER_AT: 'Must have at least one . after @',
+  MUST_NOT_BE: 'Must not be',
+  NO_CONSECUTIVE_CHARACTER: 'No consecutive characters',
+  ONLY_AT_THE_BEGINNING: 'Only at the beginning',
+  REQUIRED: 'This field is required',
+  VALID_CHARACTERS: 'Valid characters'
+};
+/*=========== STATUS CODES =============*/
+
+exports.validation = validation;
 var INTERNAL_SERVER_ERROR_STATUS_CODE = 500;
 exports.INTERNAL_SERVER_ERROR_STATUS_CODE = INTERNAL_SERVER_ERROR_STATUS_CODE;
 var CONFLICT_ERROR_STATUS_CODE = 409;
 exports.CONFLICT_ERROR_STATUS_CODE = CONFLICT_ERROR_STATUS_CODE;
 var FORBIDDEN_ERROR_STATUS_CODE = 403;
-exports.FORBIDDEN_ERROR_STATUS_CODE = FORBIDDEN_ERROR_STATUS_CODE;
+/*=========== MODAL =============*/
+
+exports.FORBIDDEN_ERROR_STATUS_CODE = FORBIDDEN_ERROR_STATUS_CODE;
+var MODAL_SM = 'sm';
+exports.MODAL_SM = MODAL_SM;
+var MODAL_MD = 'md';
+exports.MODAL_MD = MODAL_MD;
+var MODAL_LG = 'lg';
+exports.MODAL_LG = MODAL_LG;

package/dist/elements/OptionsMenu/OptionsMenu.js

@@ -0,0 +1,64 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _reactTransitionGroup = require("react-transition-group");
+
+var _components = require("../../components");
+
+require("./optionsMenu.scss");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var OptionsMenu = function OptionsMenu(_ref) {
+  var children = _ref.children,
+      parentElement = _ref.parentElement,
+      show = _ref.show,
+      timeout = _ref.timeout;
+
+  var _ref2 = parentElement.current ? parentElement.current.getBoundingClientRect() : {},
+      dropdownWidth = _ref2.width;
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactTransitionGroup.CSSTransition, {
+    in: show,
+    timeout: timeout,
+    classNames: "options-menu-transition",
+    unmountOnExit: true,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.PopUpDialog, {
+      className: "options-menu",
+      customPosition: {
+        element: parentElement,
+        position: 'bottom-right'
+      },
+      style: {
+        width: "".concat(dropdownWidth, "px")
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("ul", {
+        className: "options-menu__body",
+        children: children
+      })
+    })
+  });
+};
+
+OptionsMenu.defaultProps = {
+  children: [],
+  show: false,
+  timeout: 300
+};
+OptionsMenu.propTypes = {
+  children: _propTypes.default.arrayOf(_propTypes.default.element),
+  show: _propTypes.default.bool.isRequired,
+  timout: _propTypes.default.number
+};
+var _default = OptionsMenu;
+exports.default = _default;

package/dist/elements/OptionsMenu/optionsMenu.scss

@@ -0,0 +1,49 @@
+@import '../../scss/colors';
+@import '../../scss/shadows';
+@import '../../scss/borders';
+
+.options-menu {
+  &__body {
+    width: 100%;
+    max-height: 250px;
+    margin: 0;
+    padding: 0;
+    overflow-y: auto;
+    color: $mulledWineTwo;
+    font-size: 1rem;
+    list-style-type: none;
+    background-color: $white;
+    border: $primaryBorder;
+    border-radius: 4px;
+    box-shadow: $previewBoxShadow;
+  }
+
+  .pop-up-dialog {
+    width: 100%;
+    padding: 0;
+
+    &__header {
+      display: none;
+    }
+  }
+
+  &-transition {
+    &-enter {
+      opacity: 0;
+    }
+
+    &-enter-active {
+      opacity: 1;
+      transition: opacity 300ms ease-in-out;
+    }
+
+    &-exit {
+      opacity: 1;
+    }
+
+    &-exit-active {
+      opacity: 0;
+      transition: opacity 300ms ease-in-out;
+    }
+  }
+}

package/dist/elements/SelectOption/SelectOption.js

@@ -0,0 +1,95 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _components = require("../../components");
+
+var _types = require("../../types");
+
+var _checkmark = require("../../images/checkmark.svg");
+
+require("./selectOption.scss");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var SelectOption = function SelectOption(_ref) {
+  var item = _ref.item,
+      _onClick = _ref.onClick,
+      selectType = _ref.selectType,
+      selectedId = _ref.selectedId,
+      withSelectedIcon = _ref.withSelectedIcon;
+  var selectClassName = (0, _classnames.default)('select__item', item.hidden && 'hidden', item.disabled && 'disabled');
+
+  if (selectType === 'checkbox') {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      "data-testid": "select-checkbox",
+      className: "select__item",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.FormCheckBox, {
+        item: item,
+        selectedId: selectedId,
+        onChange: _onClick,
+        children: [item.status && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: "state-".concat(item.status, "-job status")
+        }), item.label]
+      })
+    });
+  }
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    "data-testid": "select-option",
+    className: selectClassName,
+    onClick: function onClick() {
+      !item.disabled && _onClick(item.id);
+    },
+    children: [item.icon && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      "data-testid": "select-icon",
+      className: "select__icon",
+      children: item.icon
+    }), item.status && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      className: "state-".concat(item.status, "-job status")
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "data-ellipsis label-row",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Tooltip, {
+        template: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.TextTooltipTemplate, {
+          text: item.label
+        }),
+        children: item.label
+      }), withSelectedIcon && item.id === selectedId && /*#__PURE__*/(0, _jsxRuntime.jsx)(_checkmark.ReactComponent, {
+        className: "checkmark"
+      })]
+    }), item.subLabel && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Tooltip, {
+      className: "sub-label",
+      template: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.TextTooltipTemplate, {
+        text: item.subLabel
+      }),
+      children: item.subLabel
+    })]
+  });
+};
+
+SelectOption.defaultProps = {
+  onClick: function onClick() {},
+  selectType: '',
+  withSelectedIcon: false
+};
+SelectOption.propTypes = {
+  disabled: _propTypes.default.bool,
+  item: _types.SELECT_OPTION.isRequired,
+  onClick: _propTypes.default.func,
+  selectType: _propTypes.default.string,
+  selectedId: _propTypes.default.string,
+  withSelectedIcon: _propTypes.default.bool
+};
+var _default = SelectOption;
+exports.default = _default;

package/dist/elements/SelectOption/SelectOption.test.js

@@ -0,0 +1,99 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@testing-library/react");
+
+var _SelectOption = _interopRequireDefault(require("./SelectOption"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+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; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+var renderComponent = function renderComponent(props) {
+  return (0, _react2.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_SelectOption.default, _objectSpread({}, props)));
+};
+
+jest.mock('igz-controls/images/checkbox-unchecked.svg', function () {
+  return {
+    ReactComponent: 'unchecked-icon'
+  };
+});
+jest.mock('igz-controls/images/checkbox-checked.svg', function () {
+  return {
+    ReactComponent: 'unchecked-icon'
+  };
+});
+describe('SelectOption component', function () {
+  var wrapper;
+  beforeEach(function () {
+    var props = {
+      item: {
+        label: 'Test1',
+        id: 'test1',
+        icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+          children: "icon"
+        }),
+        subLabel: 'Test1'
+      },
+      selectType: ''
+    };
+    wrapper = renderComponent(props);
+  });
+  afterEach(_react2.cleanup);
+  it('renders without crashing', function () {
+    expect(wrapper.queryByTestId('select-option')).not.toBeNull();
+  });
+  it('should display checkbox inside option if props selectType is "checkbox"', function () {
+    wrapper.rerender( /*#__PURE__*/(0, _jsxRuntime.jsx)(_SelectOption.default, {
+      item: {
+        label: 'Test1',
+        id: 'test1'
+      },
+      selectType: "checkbox",
+      selectedId: "test1"
+    }));
+    expect(wrapper.queryByTestId('select-checkbox')).not.toBeNull();
+  });
+  it('should display select icon if it exists in the props "item"', function () {
+    expect(wrapper.getByTestId('select-icon')).not.toBeNull();
+  });
+  it('should won\'t call onClick callback if props disable set to "true"', function () {
+    var mockCLick = jest.fn();
+    wrapper.rerender( /*#__PURE__*/(0, _jsxRuntime.jsx)(_SelectOption.default, {
+      item: {
+        label: 'Test1',
+        id: 'test1'
+      },
+      onCLick: mockCLick,
+      selectType: "test1",
+      disabled: true
+    }));
+    var selectOption = wrapper.getByTestId('select-option');
+
+    _react2.fireEvent.click(selectOption);
+
+    expect(mockCLick).toHaveBeenCalledTimes(0);
+  });
+  it('should display subLabel if it exists in props item', function () {
+    expect(wrapper.queryByTestId('tooltip-wrapper')).not.toBeNull();
+  });
+  it('should add class "disabled" to SelectOption if props disabled set to "true"', function () {
+    wrapper.rerender( /*#__PURE__*/(0, _jsxRuntime.jsx)(_SelectOption.default, {
+      item: {
+        label: 'Test1',
+        id: 'test1'
+      },
+      selectType: "test1",
+      disabled: true
+    }));
+    var selectOption = wrapper.getByTestId('select-option');
+    expect(selectOption.className).toMatch('disabled');
+  });
+});

package/dist/elements/SelectOption/selectOption.scss

@@ -0,0 +1,61 @@
+@import '../../scss/colors';
+@import '../../scss/mixins';
+
+.select {
+  &__icon {
+    display: flex;
+    margin-right: 10px;
+  }
+
+  &__item {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    height: 49px;
+    padding: 0 15px;
+
+    &.hidden {
+      display: none;
+    }
+
+    .checkbox {
+      flex: 1;
+      height: 100%;
+
+      svg {
+        margin: 0;
+      }
+    }
+
+    &:hover {
+      background-color: $alabaster;
+      cursor: pointer;
+    }
+
+    .status {
+      margin: 0 10px;
+    }
+
+    .all {
+      margin: 0;
+
+      @include statusState(none);
+    }
+
+    .label-row {
+      display: flex;
+      flex-flow: row nowrap;
+      align-items: center;
+      justify-content: space-between;
+      width: 100%;
+    }
+
+    .checkmark {
+      margin: 0 0 0 10px;
+
+      path {
+        fill: $chateauGreen;
+      }
+    }
+  }
+}

package/dist/elements/ValidationTemplate/ValidationTemplate.js

@@ -0,0 +1,48 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _success_done = require("../../images/success_done.svg");
+
+var _close = require("../../images/close.svg");
+
+require("./ValidationTemplate.scss");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var ValidationTemplate = function ValidationTemplate(_ref) {
+  var valid = _ref.valid,
+      validationMessage = _ref.validationMessage;
+  var validationClasses = (0, _classnames.default)('validation-option', valid && 'text-muted');
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("li", {
+    className: validationClasses,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
+      className: "validation-option__icon",
+      children: valid ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_success_done.ReactComponent, {
+        className: "validation-option__icon_valid"
+      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_close.ReactComponent, {
+        className: "validation-option__icon_invalid"
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      children: validationMessage
+    })]
+  });
+};
+
+ValidationTemplate.propTypes = {
+  valid: _propTypes.default.bool.isRequired,
+  validationMessage: _propTypes.default.string.isRequired
+};
+var _default = ValidationTemplate;
+exports.default = _default;

package/dist/elements/ValidationTemplate/ValidationTemplate.scss

@@ -0,0 +1,36 @@
+@import '../../scss/colors';
+
+.validation-option {
+  display: flex;
+  align-items: flex-start;
+  margin: 0.6rem 0;
+  padding: 0 1rem;
+  font-size: 0.875rem;
+
+  &__icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 20px;
+    height: 20px;
+    margin-right: 0.5rem;
+
+    &_valid {
+      width: 14px;
+      height: 15px;
+
+      path {
+        fill: $brightTurquoise;
+      }
+    }
+
+    &_invalid {
+      width: 12px;
+      height: 12px;
+
+      path {
+        fill: $amaranth;
+      }
+    }
+  }
+}

package/dist/hooks/useDetectOutsideClick.js

@@ -0,0 +1,34 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useDetectOutsideClick = void 0;
+
+var _react = require("react");
+
+/**
+ * Hook for handling closing when clicking outside of an element
+ * @function useDetectOutsideClick
+ * @param {React.node} ref
+ * @param {function} handler A callback function to use on outside click
+ */
+var useDetectOutsideClick = function useDetectOutsideClick(ref, handler) {
+  (0, _react.useEffect)(function () {
+    var onClick = function onClick(e) {
+      e.stopPropagation(); // If the active element exists and is clicked outside of
+
+      if (ref.current !== null && !ref.current.contains(e.target)) {
+        handler(e);
+      }
+    }; // If the item is active (ie open) then listen for clicks outside
+
+
+    window.addEventListener('click', onClick);
+    return function () {
+      window.removeEventListener('click', onClick);
+    };
+  }, [ref, handler]);
+};
+
+exports.useDetectOutsideClick = useDetectOutsideClick;

package/dist/images/checkmark2.svg

@@ -0,0 +1,3 @@
+<svg width="18" height="14" viewBox="0 0 18 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18 1.99984L6 13.9998L0.5 8.49984L1.91 7.08984L6 11.1698L16.59 0.589844L18 1.99984Z" fill="#7F7989"/>
+</svg>

package/dist/index.js

@@ -5,12 +5,16 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.types = exports.constants = exports.components = void 0;
+exports.types = exports.hooks = exports.constants = exports.components = void 0;
 
 var components = _interopRequireWildcard(require("./components"));
 
 exports.components = components;
 
+var hooks = _interopRequireWildcard(require("./hooks"));
+
+exports.hooks = hooks;
+
 var types = _interopRequireWildcard(require("./types"));
 
 exports.types = types;

package/dist/scss/colors.scss

@@ -33,6 +33,7 @@ $javaLight: #1fcc9e;
 $javaTwo: rgba($java, 0.24);
 $kimberly: #6d5e92;
 $malibu: #869cff;
+$malibuTwo: rgba($malibu, 0.12);
 $maroonFlash: #bc2553;
 $mercury: #e7e7e7;
 $mineshaft: #333;