systemview 1.0.1 → 1.1.1

package/src/molecules/ValidationInput/ValidationMessages.js

@@ -0,0 +1,178 @@
+import moment from "moment/moment";
+
+const vowels = ["a", "e", "i", "o", "u"];
+const isVowel = (str) => vowels.includes((str + "").toLowerCase());
+const an = (word) =>
+  word + "" === "undefined" ? "" : isVowel((word + "")[0]) ? "an" : "a";
+const className = "error-message";
+
+export default function ValidationMessage({
+  name,
+  namespace,
+  expected,
+  error = true,
+  received,
+}) {
+  const PRETEXT = error ? "Expected" : "Expecting";
+  return (
+    <div className={`${className}`}>
+      {ErrorMessages[name](namespace, expected, PRETEXT, error && received)}
+    </div>
+  );
+}
+
+const typeError = (namespace, expected, pretext, received, amendment) => {
+  return (
+    <div className={`${className}__message`}>
+      {pretext} <span className={`${className}__namespace`}>{namespace}</span> to be{" "}
+      {an(expected)} <span className={`${className}__expected`}>{expected} </span>
+      {received && (
+        <span>
+          (received {an(received)} {received})
+        </span>
+      )}
+      {amendment && amendment}
+    </div>
+  );
+};
+const lengthEquals = (namespace, expected, PRETEXT, received) => (
+  <div className={`${className}__message`}>
+    {PRETEXT} <span className={`${className}__namespace`}>{namespace}</span> to have a
+    length of <span className={`${className}__expected`}>{expected}</span>
+    {received && <span> (received {received})</span>}
+  </div>
+);
+const maxLength = (namespace, expected, PRETEXT, received) => (
+  <div className={`${className}__message`}>
+    {PRETEXT} <span className={`${className}__namespace`}>{namespace}</span> to have a
+    maximum length of <span className={`${className}__expected`}>{expected}</span>
+    {received && <span> (received {received})</span>}
+  </div>
+);
+const minLength = (namespace, expected, PRETEXT, received) => (
+  <div className={`${className}__message`}>
+    {PRETEXT} <span className={`${className}__namespace`}>{namespace}</span> to have a
+    minimum length of <span className={`${className}__expected`}>{expected}</span>
+    {received && <span> (received {received})</span>}
+  </div>
+);
+const includes = (namespace, expected, PRETEXT) => (
+  <div className={`${className}__message`}>
+    {PRETEXT} <span className={`${className}__namespace`}>{namespace}</span> to include
+    the following value: <span className={`${className}__expected`}>{expected}</span>
+  </div>
+);
+const isLike = (namespace, expected, PRETEXT) => (
+  <div className={`${className}__message`}>
+    {PRETEXT} <span className={`${className}__namespace`}>{namespace}</span> to be like
+    the following expression: <span className={`${className}__expected`}>{expected}</span>
+  </div>
+);
+const isOneOf = (namespace, expected, PRETEXT) => (
+  <div className={`${className}__message`}>
+    {PRETEXT} <span className={`${className}__namespace`}>{namespace}</span> to be one of
+    the following values: <span className={`${className}__expected`}>{expected}</span>
+  </div>
+);
+const strEquals = (namespace, expected, PRETEXT) => (
+  <div className={`${className}__message`}>
+    {PRETEXT} <span className={`${className}__namespace`}>{namespace}</span> to equal{" "}
+    <span className={`${className}__expected`}>"{expected}"</span>
+  </div>
+);
+const numEquals = (namespace, expected, PRETEXT, received) => (
+  <div className={`${className}__message`}>
+    {PRETEXT} <span className={`${className}__namespace`}>{namespace}</span> to equal{" "}
+    <span className={`${className}__expected`}>{parseInt(expected)} </span>
+    {received && <span> (received {received})</span>}
+  </div>
+);
+const max = (namespace, expected, PRETEXT, received) => (
+  <div className={`${className}__message-container`}>
+    {typeError(
+      namespace,
+      "number",
+      PRETEXT,
+      undefined,
+      <span>
+        less than <span className={`${className}__expected`}>{expected}</span>
+        {received && <span> (received {received})</span>}
+      </span>
+    )}
+  </div>
+);
+const min = (namespace, expected, PRETEXT, received) => (
+  <div className={`${className}__message-container`}>
+    {typeError(
+      namespace,
+      "number",
+      PRETEXT,
+      undefined,
+      <span>
+        greater than <span className={`${className}__expected`}>{expected}</span>
+        {received && <span> (received {received})</span>}
+      </span>
+    )}
+  </div>
+);
+const boolEquals = (namespace, expected, PRETEXT, received) => (
+  <div className={`${className}__message`}>
+    {PRETEXT} <span className={`${className}__namespace`}>{namespace}</span> to be{" "}
+    {expected.toString()} {received && <span> (received {received})</span>}
+  </div>
+);
+const dateEquals = (namespace, expected, PRETEXT) => (
+  <div className={`${className}__message`}>
+    {PRETEXT} <span className={`${className}__namespace`}>{namespace}</span> to be
+    {moment(expected).format("L LTS")}
+  </div>
+);
+const minDate = (namespace, expected, PRETEXT) => (
+  <div className={`${className}__message`}>
+    {PRETEXT} <span className={`${className}__namespace`}>{namespace}</span> to be a
+    date/time later than <span className={`${className}__expected`}>{expected}</span>
+  </div>
+);
+const maxDate = (namespace, expected, PRETEXT) => (
+  <div className={`${className}__message`}>
+    {PRETEXT} <span className={`${className}__namespace`}>{namespace}</span> to be a
+    date/time earlier than <span className={`${className}__expected`}>{expected}</span>
+  </div>
+);
+export const ErrorMessages = {
+  typeError,
+  lengthEquals,
+  maxLength,
+  minLength,
+  includes,
+  isLike,
+  isOneOf,
+  strEquals,
+  numEquals,
+  max,
+  min,
+  boolEquals,
+  dateEquals,
+  minDate,
+  maxDate,
+};
+// export const errorMessages = {
+//   typeError= (namespace, expected) => {
+//     const a = isVowel(e) ? "an" : "a";
+//     return `Expected ${namespace}to be ${a} ${expected}`;
+//   },
+//   lengthEquals= (namespace, expected) => `Expected ${namespace} to have a length of ${expected}`,
+//   maxLength= (namespace, expected) => `Expected ${namespace} to have a maximum length of ${expected}`,
+//   minLength= (namespace, expected) => `Expected ${namespace} to have a minimum length of ${expected}`,
+//   includes= (namespace, expected) => `Expected ${namespace} to include the following value: ${expected}`,
+//   isLike= (namespace, expected) => `Expected ${namespace} to be like the following expression: ${expected}`,
+//   isOneOf= (namespace, expected) => `Expected ${namespace} to be one of the following values: ${expected}`,
+//   strEquals= (namespace, expected) => `Expected ${namespace} to equal "${expected}"`,
+//   numEquals= (namespace, expected) => `Expected ${namespace} to equal ${expected}`,
+//   max= (namespace, expected) => `Expected ${namespace} to be less than ${expected}`,
+//   min= (namespace, expected) => `Expected ${namespace} to be greater than ${expected}`,
+//   boolEquals= (namespace, expected) => `Expected ${namespace} to be ${e.toString()}`,
+//   dateEquals= (namespace, expected) => `Expected ${namespace} to be ${moment(e).format()}`,
+//   minDate= (namespace, expected) => `Expected ${namespace} to be a date/time later than ${expected}`,
+//   maxDate= (namespace, expected) => `Expected ${namespace} to be a date/time earlier than ${expected}`,
+// };

package/src/molecules/ValidationInput/ValidationOptions.js

@@ -0,0 +1,113 @@
+const string = {
+  options: [
+    "Equals:",
+    "Min Length:",
+    "Max Length:",
+    "Length Equals:",
+    "Is Like:",
+    "Is One Of:",
+  ],
+  values: ["strEquals", "minLength", "maxLength", "lengthEquals", "isLike", "isOneOf"],
+  inputs: ["text", "number", "number", "number", "text", "text"],
+};
+const number = {
+  options: ["Equals:", "Min:", "Max:", "Is One Of:"],
+  values: ["numEquals", "min", "max", "isOneOf"],
+  inputs: ["number", "number", "number", "text"],
+};
+const array = {
+  options: ["Min Length:", "Max Length:", "Length Equals:", "Includes:"],
+  values: ["minLength", "maxLength", "lengthEquals", "includes"],
+  inputs: ["number", "number", "number", "text"],
+};
+const date = {
+  options: ["Equals:", "Min:", "Max:"],
+  values: ["dateEquals", "minDate", "maxDate"],
+  inputs: ["datetime-local", "datetime-local", "datetime-local"],
+};
+const boolean = { options: ["Equals:"], values: ["boolEquals"], inputs: ["checkbox"] };
+const object = { options: [], values: [], inputs: [] };
+const target = {
+  options: [
+    //string
+    "Equals (str):",
+    "Min Length (str):",
+    "Max Length (str):",
+    "Length Equals (str):",
+    "Is Like:",
+    "Is One Of (str):",
+    //number
+    "Equals (num):",
+    "Min (num):",
+    "Max (num):",
+    "Is One Of (num):",
+    //array
+    "Min Length (arr):",
+    "Max Length (arr):",
+    "Length Equals (arr):",
+    "Includes:",
+    //date
+    "Date Equals:",
+    "Min Date:",
+    "Max Date:",
+    //boolean
+    "Equals (bool)",
+  ],
+  values: [
+    //string
+    "strEquals",
+    "minLength",
+    "maxLength",
+    "lengthEquals",
+    "isLike",
+    "isOneOf",
+    //number
+    "numEquals",
+    "min",
+    "max",
+    "isOneOf",
+    //array
+    "minLength",
+    "maxLength",
+    "lengthEquals",
+    "includes",
+    //date
+    "dateEquals",
+    "minDate",
+    "maxDate",
+    //boolean
+    "boolEquals",
+  ],
+  inputs: [
+    //string
+    "text",
+    "number",
+    "number",
+    "number",
+    //number
+    "text",
+    "text",
+    "number",
+    "number",
+    "number",
+    "text",
+    //array
+    "number",
+    "number",
+    "number",
+    "text",
+    //date
+    "datetime-local",
+    "datetime-local",
+    "datetime-local",
+    "checkbox",
+  ],
+};
+const options = { array, number, date, boolean, string, object, target };
+export default options;
+export const inputToTypes = {
+  text: "string",
+  number: "number",
+  "datetime-local": "date",
+  checkbox: "boolean",
+};

package/src/molecules/ValidationInput/styles.scss

@@ -0,0 +1,74 @@
+.error-message {
+  padding: 4px 25px;
+  color: #ff5722;
+  word-break: break-word;
+  font-family: monospace;
+  &__message-container {
+    background: #ededed;
+  }
+  &__message {
+    padding: 6px 23px;
+    background: #ededed;
+    border-radius: 5px;
+  }
+  &__namespace {
+    color: #b136c6;
+    font-weight: 600;
+  }
+  &__expected {
+    color: #0b8b22;
+    font-weight: 700;
+  }
+}
+
+.validation-input {
+  margin: 3px 0;
+  display: flex;
+  &__input,
+  &__selector {
+    background: none;
+    border: none;
+    font-family: monospace;
+    font-size: 14px;
+  }
+  &__selector {
+    padding: 3px;
+    outline: none;
+    border-right: none;
+    appearance: none;
+    cursor: pointer;
+    font-weight: bold;
+    color: #009688;
+    text-indent: 5px;
+    &:hover {
+      background: #b3c1e8;
+      border-radius: 33px;
+      // color: #f1f1f1;
+    }
+  }
+
+  &__input {
+    padding: 4px;
+    outline: none;
+    color: #0d8065;
+  }
+  &__value {
+    &--boolean {
+      &--true {
+        color: #207844;
+      }
+      &--false {
+        color: #cf1515;
+      }
+      position: relative;
+      top: 7px;
+      font-weight: bold;
+    }
+  }
+}
+input:-webkit-autofill {
+  border: 3px solid blue;
+}
+input:autofill {
+  border: 3px solid blue;
+}

package/src/molecules/ValidationInput/validator.js

@@ -0,0 +1,244 @@
+import moment from "moment";
+import {
+  arr,
+  obj,
+  parseIndex,
+  mapNamespace,
+  replaceLastIndex,
+  switchArrayIndices,
+} from "../../organisms/TestPanel/components/test-helpers";
+
+export function evaluate(value, namespace, savedEval = {}, shouldSave) {
+  const type = getType(value);
+  const validations = savedEval.validations || [];
+  const expected_type = savedEval.expected_type || type;
+  const save = shouldSave || !!savedEval.save;
+  const indexed = savedEval.indexed;
+  const errors = getErrors({ type, value, validations, expected_type });
+  return {
+    namespace,
+    expected_type,
+    validations,
+    save,
+    indexed,
+    type,
+    value,
+    errors,
+  };
+}
+
+export function validateResults() {
+  const { results, response_type, savedEvaluations, editMode } = this;
+  const savedEvalClone = [...savedEvaluations];
+  const shouldSave = !savedEvaluations.length;
+  const evaluations = [];
+  const errors = [];
+
+  function getSavedIndices(data, nsp) {
+    const randomIndex = () => {
+      // get all matching indices and rename them
+      // so they can be found later during getSavedEval
+      const index = arr(data).randomIndex();
+      const new_nsp = replaceLastIndex(nsp, index);
+      savedEvalClone.forEach((e) => {
+        if (!e.indexed) e.namespace = switchArrayIndices(e.namespace, new_nsp);
+      });
+      return index;
+    };
+    const savedIndices = savedEvalClone
+      .filter(({ namespace }) => {
+        return replaceLastIndex(namespace) === nsp;
+      })
+      .map((e) => {
+        if (e.indexed) {
+          return parseIndex(e.namespace);
+        } else {
+          return randomIndex();
+        }
+      });
+    return savedIndices.length ? savedIndices : [randomIndex()];
+  }
+  const getSavedEval = (nsp) => {
+    const i = savedEvalClone.findIndex(({ namespace }) => {
+      return replaceLastIndex(namespace) === replaceLastIndex(nsp);
+    });
+    return i > -1 ? savedEvalClone.splice(i, 1)[0] : {};
+  };
+  const addEvaluation = (evaluation) => {
+    evaluation.errors.forEach(
+      (e) => evaluation.save && errors.push({ ...e, namespace: evaluation.namespace })
+    );
+    evaluations.push(evaluation);
+  };
+
+  //evaluate based on the result only in edit mode
+  if (editMode)
+    (function recursiveEval(data, namespace) {
+      const evaluation = evaluate(data, namespace, getSavedEval(namespace), shouldSave);
+      addEvaluation(evaluation);
+      if (evaluation.type === "object") {
+        Object.getOwnPropertyNames(data).forEach((prop) => {
+          recursiveEval(data[prop], `${namespace}.${prop}`);
+        });
+      } else if (evaluation.type === "array") {
+        const indices = getSavedIndices(data, `${namespace}[0]`);
+        indices.forEach((index) => recursiveEval(data[index], `${namespace}[${index}]`));
+      }
+    })(results, response_type);
+
+  //evaluate based on the saved evaluations
+
+  // if (!editMode) {
+  const objParser = new obj({ [response_type]: results });
+  savedEvalClone.forEach(({ namespace, ...e }) => {
+    const value = objParser.valueAtNsp(namespace);
+    if (e.save) addEvaluation(evaluate(value, namespace, e));
+  });
+  // }
+
+  Object.assign(this, {
+    evaluations: evaluations.sort((e1, e2) => e1.namespace.localeCompare(e2.namespace)),
+    errors,
+  });
+}
+
+export function getErrors({ type, value, validations, expected_type }) {
+  if (type !== expected_type && expected_type !== "mixed")
+    return [{ name: "typeError", expected: expected_type, received: type }];
+
+  switch (type) {
+    case "number":
+      return validateNumber(value, validations);
+    case "date":
+      return validateDate(value, validations);
+    case "string":
+      return validateString(value, validations);
+    case "array":
+      return validateArray(value, validations);
+    case "boolean":
+      return validateBoolean(value, validations);
+    case "null":
+    case "undefined":
+    default:
+      return [];
+  }
+}
+
+export function getType(value) {
+  switch (true) {
+    case typeof value === "object":
+      if (!value) return "null";
+      else if (Array.isArray(value)) return "array";
+      else return "object";
+    case typeof value === "string":
+      if (moment(value).isValid()) return "date";
+      else return "string";
+    case typeof value === "number":
+      return "number";
+    case typeof value === "boolean":
+      return "boolean";
+    case typeof value === "undefined":
+      return "undefined";
+    default:
+      return "?";
+  }
+}
+
+export const defaultValue = (data_type) => {
+  switch (data_type) {
+    case "string":
+      return "";
+    case "number":
+      return 0;
+    case "date":
+      return moment().toJSON();
+    case "boolean":
+      return false;
+    case "array":
+      return [];
+    case "object":
+      return {};
+    case "null":
+      return null;
+    case "target":
+      return "";
+    case "undefined":
+    default:
+      return undefined;
+  }
+};
+
+const validateLength = (item, validations) =>
+  validations.reduce((errors, { name, value }) => {
+    if (name === "lengthEquals" && item.length !== value)
+      return errors.concat({ name, expected: value, received: item.length });
+    if (name === "maxLength" && item.length > value)
+      return errors.concat({ name, expected: value, received: item.length });
+    if (name === "minLength" && item.length < value)
+      return errors.concat({ name, expected: value, received: item.length });
+    return errors;
+  }, []);
+
+const validateArray = (arr, validations) =>
+  validations.reduce((errors, { name, value }) => {
+    if (name === "includes" && !arr.includes(value))
+      return errors.concat({ name, expected: value, received: arr });
+    return errors;
+  }, validateLength(arr, validations));
+
+const validateString = (str, validations) =>
+  validations.reduce((errors, { name, value }) => {
+    if (name === "strEquals" && str !== value)
+      return errors.concat({ name, expected: value, received: str });
+    //str.match() returns null when there is no match
+    if ((name === "isLike") & !str.match(new RegExp(value, "gi")))
+      return errors.concat({ name, expected: value, received: str });
+    if (
+      name === "isOneOf" &&
+      typeof value === "string" &&
+      !value
+        .split(",")
+        .map((v) => v.trim())
+        .includes(str)
+    )
+      return errors.concat({ name, expected: value, received: str });
+    return errors;
+  }, validateLength(str, validations));
+
+const validateNumber = (num, validations) =>
+  validations.reduce((errors, { name, value }) => {
+    if (name === "numEquals" && num !== value)
+      return errors.concat({ name, expected: value, received: num });
+    if (name === "max" && num > value)
+      return errors.concat({ name, expected: value, received: num });
+    if (name === "min" && num < value)
+      return errors.concat({ name, expected: value, received: num });
+    if (
+      name === "isOneOf" &&
+      typeof value === "string" &&
+      !value
+        .split(",")
+        .map((v) => parseInt(v))
+        .includes(num)
+    )
+      return errors.concat({ name, expected: value, received: num });
+    return errors;
+  }, []);
+
+const validateBoolean = (bool, validations) =>
+  validations.reduce((errors, { name, value }) => {
+    if (name === "boolEquals" && bool !== value)
+      return errors.concat({ name, expected: value, received: bool });
+    return errors;
+  }, []);
+
+const validateDate = (datetime, validations) =>
+  validations.reduce((errors, { name, value }) => {
+    if (name === "dateEquals" && !moment(datetime).isSame(value))
+      return errors.concat({ name, expected: value, received: datetime });
+    if (name === "maxDate" && moment(datetime).isAfter(value))
+      return errors.concat({ name, expected: value, received: datetime });
+    if (name === "minDate" && moment(datetime).isBefore(value))
+      return errors.concat({ name, expected: value, received: datetime });
+    return errors;
+  }, []);