iguazio.dashboard-react-controls 0.0.6 → 0.0.9

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);
     }
@@ -985,25 +977,108 @@
 @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 {
+  display: flex;
+  flex: 1;
+  flex-flow: row nowrap;
+  align-items: center;
   position: relative;
   width: 100%;
-  padding: 18px 16px;
   color: $primary;
   background-color: transparent;
   border: $primaryBorder;
   border-radius: 4px;
 }
+
+@mixin formField {
+  position: relative;
+  display: flex;
+  flex-flow: column nowrap;
+  height: 100%;
+  width: 100%;
+
+  &__label {
+    margin-bottom: 5px;
+    color: $topaz;
+    font-size: 12px;
+    text-align: left;
+    text-transform: capitalize;
+    background-color: transparent;
+
+    &-mandatory {
+      color: $amaranth;
+    }
+
+    &-disabled {
+      color: $spunPearl;
+
+      .form-field__label-mandatory {
+        color: $spunPearl;
+      }
+    }
+  }
+
+  &__wrapper {
+    @include fieldWrapper;
+
+    &-disabled {
+      color: $spunPearl;
+      cursor: not-allowed;
+    }
+
+    &-invalid {
+      border: $errorBorder;
+    }
+
+    &.without-border {
+      border-color: transparent;
+    }
+
+    &-dense {
+      padding-top: 12px;
+      padding-bottom: 12px;
+    }
+
+    &-normal {
+      padding-top: 14px;
+      padding-bottom: 14px;
+    }
+
+    &-medium {
+      padding-top: 16px;
+      padding-bottom: 16px;
+    }
+
+    &-chunky {
+      padding-top: 18px;
+      padding-bottom: 18px;
+    }
+  }
+
+  &__control {
+    position: relative;
+    display: flex;
+    flex: 1;
+    overflow: hidden;
+    padding: 0 8px 0 16px;
+  }
+
+  &__icons {
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    margin-right: 4px;
+    min-height: 25px;
+
+    & > * {
+      display: flex;
+      align-items: center;
+      padding: 0 4px;
+    }
+  }
+}

package/dist/types.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.WIZARD_STEPS_CONFIG = exports.POP_UP_CUSTOM_POSITION = exports.MODAL_SIZES = exports.CONFIRM_DIALOG_SUBMIT_BUTTON = exports.CONFIRM_DIALOG_CANCEL_BUTTON = 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"));
 
@@ -48,4 +48,36 @@ var WIZARD_STEPS_CONFIG = _propTypes.default.arrayOf(_propTypes.default.shape({
   getActions: _propTypes.default.func
 }));
 
-exports.WIZARD_STEPS_CONFIG = WIZARD_STEPS_CONFIG;
+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/form.util.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.setFieldState = void 0;
+
+var _lodash = require("lodash");
+
+var setFieldState = function setFieldState(args, state) {
+  var fieldName = args[0];
+  var states = args[1];
+  var field = state.fields[fieldName];
+
+  if (field) {
+    for (var stateName in states) {
+      (0, _lodash.set)(field, stateName, states[stateName]);
+    }
+  }
+};
+
+exports.setFieldState = setFieldState;

package/dist/utils/validation.util.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.6",
+    "version": "0.0.9",
     "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,11 @@
         "react": "*",
         "react-dom": "*",
         "react-modal-promise": "*",
-        "react-transition-group": "*"
+        "react-transition-group": "*",
+        "final-form": "*",
+        "final-form-arrays": "*",
+        "react-final-form": "*",
+        "react-final-form-arrays": "*"
     },
     "devDependencies": {
         "@babel/cli": "^7.17.6",
@@ -57,11 +61,15 @@
         "eslint-plugin-storybook": "^0.5.10",
         "eslint-webpack-plugin": "^3.1.1",
         "lodash": "^4.17.21",
-        "node": "14.18.1",
+        "node": "14.19.0",
         "prettier": "^2.5.1",
         "prop-types": "^15.8.1",
         "react": "^17.0.2",
         "react-dom": "^17.0.2",
+        "final-form": "^4.20.7",
+        "final-form-arrays": "^3.0.2",
+        "react-final-form": "^6.5.9",
+        "react-final-form-arrays": "^3.1.3",
         "react-modal-promise": "^1.0.2",
         "react-scripts": "5.0.0",
         "react-transition-group": "^4.4.2",
@@ -95,9 +103,5 @@
             "last 1 firefox version",
             "last 1 safari version"
         ]
-    },
-    "dependencies": {
-        "final-form": "^4.20.7",
-        "react-final-form": "^6.5.9"
     }
 }