iguazio.dashboard-react-controls 0.0.4 → 0.0.7

package/dist/scss/mixins.scss

@@ -181,9 +181,7 @@
     &_grey {
       @include chipButtonAddBackground($mulledWineThree, $topaz);
     }
-  }
-
-  @else {
+  } @else {
     &_none {
       background-color: transparent;
     }
@@ -261,9 +259,7 @@
     &_medium {
       @include chipButtonAddSize(34px);
     }
-  }
-
-  @else {
+  } @else {
     &_dense {
       height: 26px;
     }
@@ -308,9 +304,7 @@
     &_purple {
       @include editableChipFont($amethyst);
     }
-  }
-
-  @else if $component == Chip {
+  } @else if $component == Chip {
     &_white {
       @include chipFont($white);
     }
@@ -330,9 +324,7 @@
     &_orange {
       @include chipFont($sorbus);
     }
-  }
-
-  @else if $component == ButtonAddChip {
+  } @else if $component == ButtonAddChip {
     &_primary {
       @include chipButtonAddColor($topaz);
     }
@@ -722,6 +714,11 @@
       }
     }
 
+    .disabled {
+      color: $doveGray;
+      cursor: not-allowed;
+    }
+
     .no-border {
       border-bottom: none;
 
@@ -980,23 +977,14 @@
 @mixin gradient($type) {
   @if $type == 'card' {
     background: linear-gradient(180deg, $brightTurquoise 4px, $white 4px);
-  }
-
-  @else {
-    background:
-      linear-gradient(
-        88.84deg,
-        #d873e1 5.49%,
-        #fc658f 57.67%,
-        #ffb971 107.73%
-      );
+  } @else {
+    background: linear-gradient(88.84deg, #d873e1 5.49%, #fc658f 57.67%, #ffb971 107.73%);
   }
 }
 
 @mixin fieldWrapper {
   position: relative;
   width: 100%;
-  padding: 18px 16px;
   color: $primary;
   background-color: transparent;
   border: $primaryBorder;

package/dist/scss/variables.scss

@@ -3,6 +3,7 @@
 $heightRowTable: 55px;
 $leftRowOffset: 49px;
 $mainBorderRadius: 4px;
+$modalBorderRadius: 8px;
 
 $navbarWidth: 245px;
 $navbarTogglerWidth: 35px;

package/dist/types.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.POP_UP_CUSTOM_POSITION = exports.BUTTON_VARIANTS = void 0;
+exports.WIZARD_STEPS_CONFIG = exports.SELECT_OPTIONS = exports.SELECT_OPTION = exports.POP_UP_CUSTOM_POSITION = exports.MODAL_SIZES = exports.INPUT_VALIDATION_RULES = exports.INPUT_LINK = exports.CONFIRM_DIALOG_SUBMIT_BUTTON = exports.CONFIRM_DIALOG_CANCEL_BUTTON = exports.BUTTON_VARIANTS = void 0;
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
@@ -20,4 +20,64 @@ var POP_UP_CUSTOM_POSITION = _propTypes.default.shape({
   position: _propTypes.default.oneOf(['top-left', 'top-right', 'bottom-left', 'bottom-right'])
 });
 
-exports.POP_UP_CUSTOM_POSITION = POP_UP_CUSTOM_POSITION;
+exports.POP_UP_CUSTOM_POSITION = POP_UP_CUSTOM_POSITION;
+
+var MODAL_SIZES = _propTypes.default.oneOf([_constants.MODAL_SM, _constants.MODAL_MD, _constants.MODAL_LG]);
+
+exports.MODAL_SIZES = MODAL_SIZES;
+
+var CONFIRM_DIALOG_CANCEL_BUTTON = _propTypes.default.shape({
+  handler: _propTypes.default.func,
+  label: _propTypes.default.string.isRequired,
+  variant: _propTypes.default.string.isRequired
+});
+
+exports.CONFIRM_DIALOG_CANCEL_BUTTON = CONFIRM_DIALOG_CANCEL_BUTTON;
+
+var CONFIRM_DIALOG_SUBMIT_BUTTON = _propTypes.default.shape({
+  handler: _propTypes.default.func.isRequired,
+  label: _propTypes.default.string.isRequired,
+  variant: _propTypes.default.string.isRequired
+});
+
+exports.CONFIRM_DIALOG_SUBMIT_BUTTON = CONFIRM_DIALOG_SUBMIT_BUTTON;
+
+var WIZARD_STEPS_CONFIG = _propTypes.default.arrayOf(_propTypes.default.shape({
+  id: _propTypes.default.string,
+  label: _propTypes.default.string,
+  getActions: _propTypes.default.func
+}));
+
+exports.WIZARD_STEPS_CONFIG = WIZARD_STEPS_CONFIG;
+
+var INPUT_LINK = _propTypes.default.shape({
+  show: _propTypes.default.oneOfType([_propTypes.default.bool, _propTypes.default.string]),
+  url: _propTypes.default.string
+});
+
+exports.INPUT_LINK = INPUT_LINK;
+
+var SELECT_OPTION = _propTypes.default.shape({
+  disabled: _propTypes.default.bool,
+  hidden: _propTypes.default.bool,
+  icon: _propTypes.default.element,
+  id: _propTypes.default.string.isRequired,
+  label: _propTypes.default.string.isRequired,
+  status: _propTypes.default.string,
+  subLabel: _propTypes.default.string
+});
+
+exports.SELECT_OPTION = SELECT_OPTION;
+
+var SELECT_OPTIONS = _propTypes.default.arrayOf(SELECT_OPTION);
+
+exports.SELECT_OPTIONS = SELECT_OPTIONS;
+
+var INPUT_VALIDATION_RULES = _propTypes.default.arrayOf(_propTypes.default.shape({
+  name: _propTypes.default.string.isRequired,
+  label: _propTypes.default.string.isRequired,
+  pattern: _propTypes.default.oneOfType([_propTypes.default.instanceOf(RegExp), _propTypes.default.func]).isRequired,
+  isValid: _propTypes.default.bool
+}));
+
+exports.INPUT_VALIDATION_RULES = INPUT_VALIDATION_RULES;

package/dist/utils/validationService.js

@@ -0,0 +1,269 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.required = exports.getValidationRules = exports.checkPatternsValidity = void 0;
+
+var _lodash = _interopRequireDefault(require("lodash"));
+
+var _constants = require("../constants");
+
+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; }
+
+////// PRIVATE METHODS ///////
+
+/**
+ * Converts characters string to readable format
+ * Note: converts Hyphens to En Dashes, replaces one space with comma and space,
+ *       replaces letter `s` with `spaces` word
+ * @param {string} chars - characters to convert
+ * @returns {string} - converted string
+ * @example
+ * convertToLabel('a-z A-Z - _ *');
+ * // => 'a–z, A–Z, –, _, *'
+ */
+var convertToLabel = function convertToLabel(chars) {
+  return chars.replace(/-/g, '–').replace(/\s/g, ', ').replace(/\bs\b/);
+};
+/**
+ * Converts characters string to valid RegExp string that will be placed into RegExp pattern
+ * @param {string} chars - characters to convert
+ * @returns {string} - converted string
+ * @example
+ * convertToPattern('a-z A-Z - _ *');
+ * // => 'a-zA-Z\-\_\*'
+ */
+
+
+var convertToPattern = function convertToPattern(chars) {
+  return chars.split(' ').map(function (patternItem) {
+    return patternItem.length === 1 ? '\\' + patternItem : patternItem;
+  }).join('');
+};
+/**
+ * Checks whether there is at least one failed validation rule.
+ * @returns {boolean} `true` in case there is at least one failed validation rule, or `false` otherwise.
+ */
+
+
+var hasInvalidRule = function hasInvalidRule(newRules) {
+  return _lodash.default.some(newRules, ['isValid', false]);
+}; ////// PUBLIC METHODS ///////
+
+/**
+ * validate required field value
+ * @param {string} validationMsg Custom validationMsg. Defualt to "Required"
+ * @returns {function}  Function that accepts a value and return an array [isFieldValid, validationMsg]
+ */
+
+
+var required = function required() {
+  var validationMsg = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'Required';
+  return function (value) {
+    var isValid = value.trim() !== '' && typeof value === 'string';
+    return [isValid, validationMsg];
+  };
+};
+/**
+ * Checks whether there is at least one failed validation rule.
+ * @function checkPatternsValidity
+ * @param {Array} validationRules Array of Validation Rule Objects {name: "", lable: "", pattren: [Function || Regex]}
+ * @param {string} value Field value to check validity
+ * @returns {Array} [validationRules, isFieldValid] New validationRules With `isValid` property, `true` in case there is at least one failed validation rule, or `false` otherwise.
+ */
+
+
+exports.required = required;
+
+var checkPatternsValidity = function checkPatternsValidity(validationRules, value) {
+  var newRules = validationRules.map(function (rule) {
+    return _objectSpread(_objectSpread({}, rule), {}, {
+      isValid: _lodash.default.isFunction(rule.pattern) ? rule.pattern(value) :
+      /* else, it is a RegExp */
+      rule.pattern.test(value)
+    });
+  });
+  return [newRules, !hasInvalidRule(newRules)];
+};
+
+exports.checkPatternsValidity = checkPatternsValidity;
+var generateRule = {
+  beginWith: function beginWith(chars) {
+    return {
+      name: 'begin',
+      label: _constants.validation.BEGIN_WITH + ': ' + convertToLabel(chars),
+      pattern: new RegExp('^[' + convertToPattern(chars) + ']')
+    };
+  },
+  beginNotWith: function beginNotWith(chars) {
+    return {
+      name: 'beginNot',
+      label: _constants.validation.BEGIN_NOT_WITH + ': ' + convertToLabel(chars),
+      pattern: new RegExp('^[^' + convertToPattern(chars) + ']')
+    };
+  },
+  endWith: function endWith(chars) {
+    return {
+      name: 'end',
+      label: _constants.validation.END_WITH + ': ' + convertToLabel(chars),
+      pattern: new RegExp('[' + convertToPattern(chars) + ']$')
+    };
+  },
+  endNotWith: function endNotWith(chars) {
+    return {
+      name: 'endNot',
+      label: _constants.validation.END_NOT_WITH + ': ' + convertToLabel(chars),
+      pattern: new RegExp('[^' + convertToPattern(chars) + ']$')
+    };
+  },
+  beginEndWith: function beginEndWith(chars) {
+    var convertedPattern = convertToPattern(chars);
+    return {
+      name: 'beginEnd',
+      label: _constants.validation.BEGIN_END_WITH + ': ' + convertToLabel(chars),
+      pattern: new RegExp('^([' + convertedPattern + '].*)?[' + convertedPattern + ']$')
+    };
+  },
+  beginEndNotWith: function beginEndNotWith(chars) {
+    var convertedPattern = convertToPattern(chars);
+    return {
+      name: 'beginEndNot',
+      label: _constants.validation.BEGIN_END_NOT_WITH + ': ' + convertToLabel(chars),
+      pattern: new RegExp('^([^' + convertedPattern + '].*)?[^' + convertedPattern + ']$')
+    };
+  },
+  onlyAtTheBeginning: function onlyAtTheBeginning(chars) {
+    var convertedPattern = convertToPattern(chars);
+    return {
+      name: 'onlyAtTheBeginning',
+      label: _constants.validation.ONLY_AT_THE_BEGINNING + ': ' + convertToLabel(chars),
+      pattern: new RegExp('^([' + convertedPattern + '])?[^' + convertedPattern + ']+$')
+    };
+  },
+  validCharacters: function validCharacters(chars) {
+    return {
+      name: 'validCharacters',
+      label: _constants.validation.VALID_CHARACTERS + ': ' + convertToLabel(chars),
+      pattern: new RegExp('^[' + convertToPattern(chars) + ']+$')
+    };
+  },
+  noConsecutiveCharacters: function noConsecutiveCharacters(chars) {
+    var convertedPattern = chars.split(' ').map(function (charPair) {
+      var charsPairArray = charPair.split('');
+      return "(?!.*\\".concat(charsPairArray[0], "\\").concat(charsPairArray[1], ")");
+    }).join('');
+    return {
+      name: 'noConsecutiveCharacters',
+      label: _constants.validation.NO_CONSECUTIVE_CHARACTER + ': ' + convertToLabel(chars),
+      pattern: new RegExp('^' + convertedPattern)
+    };
+  },
+  maxLengthBetweenDelimiters: function maxLengthBetweenDelimiters(delimiter, maxLength, delimiterDescription) {
+    return {
+      name: 'labelsLength',
+      label: "Max length between two ".concat(_lodash.default.defaultTo(delimiterDescription, delimiter), ": ").concat(maxLength),
+      pattern: function pattern(value) {
+        return value.split(delimiter).every(function (item) {
+          return item.length >= 1 && item.length <= maxLength;
+        });
+      }
+    };
+  },
+  mustNotBe: function mustNotBe(words) {
+    var wordsArray = words.split(' ');
+    return {
+      name: 'mustNotBe',
+      label: _constants.validation.MUST_NOT_BE + ': ' + convertToLabel(words),
+      pattern: function pattern(value) {
+        return !_lodash.default.includes(wordsArray, value);
+      }
+    };
+  },
+  length: function length(options) {
+    var min = Number.isSafeInteger(options.min) ? options.min : 0;
+    var max = Number.isSafeInteger(options.max) ? options.max : '';
+
+    if (min || max) {
+      var label = 'Length – ' + (min ? 'min: ' + options.min + '\xa0\xa0' : '') + (max ? 'max: ' + options.max : '');
+      return {
+        name: 'length',
+        label: label,
+        pattern: new RegExp('^[\\S\\s]{' + min + ',' + max + '}$')
+      };
+    }
+  },
+  required: function required() {
+    return {
+      name: 'required',
+      label: _constants.validation.REQUIRED,
+      pattern: new RegExp('\\S')
+    };
+  }
+}; //const commonRules = {
+// email: [
+//   generateRule.beginEndNotWith('@ .'),
+//   {
+//     name: 'exactlyOne',
+//     label: ValidationConstants.MUST_CONTAIN_EXACTLY_ONE + ': @',
+//     pattern: /^[^@]+@[^@]+$/
+//   },
+//   {
+//     name: 'dotAfterAt',
+//     label: ValidationConstants.MUST_HAVE_DOT_AFTER_AT,
+//     pattern: /@.+\..+$/
+//   }
+// ]
+//}
+
+var validationRules = {
+  artifact: {
+    name: [generateRule.validCharacters('a-z A-Z 0-9 - _ .'), generateRule.beginEndWith('a-z A-Z 0-9'), generateRule.length({
+      max: 253
+    }), generateRule.required()]
+  },
+  feature: {
+    sets: {
+      tag: [generateRule.validCharacters('a-z A-Z 0-9 - _'), generateRule.beginEndWith('a-z A-Z 0-9'), generateRule.length({
+        max: 56
+      })]
+    },
+    vector: {
+      name: [generateRule.validCharacters('a-z A-Z 0-9 - _ .'), generateRule.beginEndWith('a-z A-Z 0-9'), generateRule.length({
+        max: 56
+      }), generateRule.required()]
+    }
+  },
+  common: {
+    name: [generateRule.validCharacters('a-z A-Z 0-9 - _ .'), generateRule.beginEndWith('a-z A-Z 0-9'), generateRule.length({
+      max: 63
+    }), generateRule.required()],
+    tag: [generateRule.validCharacters('a-z A-Z 0-9 - _ .'), generateRule.beginEndWith('a-z A-Z 0-9'), generateRule.length({
+      max: 56
+    })]
+  },
+  project: {
+    name: [generateRule.validCharacters('a-z 0-9 -'), generateRule.beginWith('a-z'), generateRule.endWith('a-z 0-9'), generateRule.length({
+      max: 63
+    }), generateRule.required()]
+  }
+};
+/**
+ * Returns the list of validation rules for `type`, optionally appending provided additional rules.
+ * @function getValidationRules
+ * @param {string} type - The property path to the list of validation rules.
+ * @param {Array.<Object>} [additionalRules] - Additional rules to append.
+ * @returns {Array.<Object>} the rule list of type `type` with `additionalRules` appended to it if provided.
+ */
+
+var getValidationRules = function getValidationRules(type, additionalRules) {
+  return _lodash.default.chain(validationRules).get(type).defaultTo([]).cloneDeep().concat(_lodash.default.defaultTo(additionalRules, [])).value();
+};
+
+exports.getValidationRules = getValidationRules;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "iguazio.dashboard-react-controls",
-    "version": "0.0.4",
+    "version": "0.0.7",
     "description": "Collection of resources (such as CSS styles, fonts and images) and ReactJS 17.x components to share among different Iguazio React repos.",
     "main": "dist/index.js",
     "module": "dist/index.js",
@@ -25,7 +25,9 @@
         "react": "*",
         "react-dom": "*",
         "react-modal-promise": "*",
-        "react-transition-group": "*"
+        "react-transition-group": "*",
+        "final-form": "^4.20.7",
+        "react-final-form": "^6.5.9"
     },
     "devDependencies": {
         "@babel/cli": "^7.17.6",
@@ -62,6 +64,8 @@
         "prop-types": "^15.8.1",
         "react": "^17.0.2",
         "react-dom": "^17.0.2",
+        "final-form": "^4.20.7",
+        "react-final-form": "^6.5.9",
         "react-modal-promise": "^1.0.2",
         "react-scripts": "5.0.0",
         "react-transition-group": "^4.4.2",
@@ -95,6 +99,5 @@
             "last 1 firefox version",
             "last 1 safari version"
         ]
-    },
-    "dependencies": {}
+    }
 }