systemview 1.0.0 → 1.1.1

package/src/molecules/Args/Args.js

@@ -0,0 +1,302 @@
+import React, { useState } from "react";
+import moment from "moment";
+import ReactJson from "react-json-view";
+import JsonTextBox from "../../atoms/JsonTextBox/JsonTextBox";
+import ExpandableIcon from "../../atoms/ExpandableIcon/ExpandableIcon";
+import TypeSelector from "../../atoms/TypeSelector/TypeSelector";
+import TargetSelector from "../TargetSelector/TargetSelector";
+import Toggle from "../../atoms/Toggle/Toggle";
+import { getType, defaultValue } from "../ValidationInput/validator";
+import "./styles.scss";
+const className = "args";
+const Args = ({ args, controller, testIndex, locked }) => {
+  const add = () => controller.addArg(testIndex);
+
+  return (
+    <>
+      {args.length > 0 ? (
+        <div className={`${className}`}>
+          {args.map((arg, i) => (
+            <ArgData
+              key={i}
+              arg={arg}
+              testIndex={testIndex}
+              i={i}
+              controller={controller}
+              locked={locked}
+            />
+          ))}
+        </div>
+      ) : (
+        ""
+      )}
+      {locked ? (
+        ""
+      ) : (
+        <span className={`${className}__add-btn btn`} onClick={add}>
+          +
+        </span>
+      )}
+    </>
+  );
+};
+const ArgData = ({ arg, testIndex, i, controller, locked }) => {
+  const { name, input_type } = arg;
+  const [isOpen, setOpen] = useState(true);
+  const showData = () => {
+    setOpen(!isOpen);
+  };
+  const inputTypeChanged = (e) => {
+    arg.input_type = e.target.value;
+    arg.input = defaultValue(arg.input_type);
+    controller.checkTargetValues(testIndex, i, 0);
+    if (arg.input_type === "target")
+      controller.addTargetValue(testIndex, i, "", ["input"], 0);
+    controller.editArg(testIndex, i, arg);
+  };
+
+  const deleteArg = () => {
+    controller.deleteArg(testIndex, i);
+  };
+
+  const is12 =
+    input_type === "object" ||
+    input_type === "array" ||
+    input_type === "string" ||
+    input_type === "date" ||
+    input_type === "target";
+  return !isOpen ? (
+    <div className={`${className}__name-display`}>
+      <ArgName name={name} isOpen={isOpen} showData={showData} />
+    </div>
+  ) : (
+    <div className={`${className}__data container`} key={i}>
+      <div className={`row no-gutters justify-content-start align-items-center`}>
+        <div className={`col`}>
+          <div className={`${className}__from-container`}>
+            <ArgName name={name} isOpen={isOpen} showData={showData} />
+          </div>
+        </div>
+        <div className={`col`}>
+          <div className={`${className}__type`}>
+            <TypeSelector default_type={input_type} onSelect={inputTypeChanged} />
+          </div>
+        </div>
+        <div className={`col${!is12 ? -0 : ""}`}></div>
+        <div className={`col${is12 ? -12 : ""}`}>
+          <ArgDataForm
+            arg={arg}
+            i={i}
+            testIndex={testIndex}
+            controller={controller}
+            is12={is12}
+          />
+        </div>
+      </div>
+      {locked ? (
+        ""
+      ) : (
+        <span
+          className={`${className}__data__delete-btn btn delete-btn`}
+          onClick={deleteArg}
+        >
+          x
+        </span>
+      )}
+    </div>
+  );
+};
+const ArgName = ({ name, isOpen, showData }) => {
+  return (
+    <div className={`${className}__name`}>
+      <ExpandableIcon
+        isOpen={isOpen}
+        ClassName={`${className}__expand-btn`}
+        onClick={showData}
+      />{" "}
+      {/* <span className={`${className}__name__text`}>{name + ""}</span> */}
+    </div>
+  );
+};
+const ArgDataForm = ({ arg, testIndex, i, controller, is12 }) => {
+  const { input, input_type, targetValues } = arg;
+  const [jsonBoxVisible, setJsonBoxVisible] = useState(false);
+  const showJsonTxb = () => setJsonBoxVisible(true);
+  const hideJsonTxb = () => setJsonBoxVisible(false);
+  const inputChanged = (e) => {
+    if (e.target.type === "number") arg.input = parseInt(e.target.value);
+    else if (e.target.type === "checkbox") arg.input = e.target.checked;
+    else arg.input = e.target.value;
+    controller.editArg(testIndex, i, arg);
+  };
+  const jsonTextboxSubmit = (new_object) => {
+    arg.input = new_object;
+    controller.editArg(testIndex, i, arg);
+    controller.checkTargetValues(testIndex, i);
+    hideJsonTxb();
+  };
+  const jsonObjectSubmit = ({ updated_src, namespace, name, new_value }) => {
+    jsonTextboxSubmit(updated_src || {});
+    const source_map = namespace;
+    source_map.push(name);
+    source_map.unshift("input");
+    if (typeof new_value === "string")
+      controller.parseTargetValues(testIndex, i, new_value, source_map);
+    else controller.checkTargetValues(testIndex, i);
+  };
+
+  const adjustSize = (e) => {
+    const new_lines = e.target.value.length / 38;
+    const new_height = Math.min(33 + new_lines * 18, 320);
+    e.target.style.height = `${new_height}px`;
+  };
+
+  const textboxChanged = (e) => {
+    //adjustSize(e);
+    inputChanged(e);
+    controller.parseTargetValues(testIndex, i, e.target.value, ["input"]);
+  };
+  return (
+    <div className={`${className}__form ${is12 ? className + "__form--is12" : ""}`}>
+      {input_type === "undefined" || input_type === "null" ? (
+        <span className={`${className}__form__${input_type}`}>{input + ""}</span>
+      ) : input_type === "string" ? (
+        <div className={`textbox`}>
+          <textarea
+            className={`${className}__form__input ${className}__form__input--${input_type}`}
+            value={input}
+            onChange={textboxChanged}
+            onFocus={adjustSize}
+          />
+          <ArgValue value={arg.value()} hide={!targetValues.length} />
+        </div>
+      ) : input_type === "number" ? (
+        <div className={`textbox`}>
+          <input
+            className={`${className}__form__input ${className}__form__input--${input_type}`}
+            type={input_type}
+            name="arg-input"
+            autoComplete="off"
+            value={input}
+            onChange={inputChanged}
+          />
+        </div>
+      ) : input_type === "boolean" ? (
+        <div className="row justify-content-around">
+          <Toggle isChecked={input} onChange={inputChanged} round={true} />{" "}
+          <span
+            className={`${className}__form__value--boolean ${className}__form__value--boolean--${input}`}
+          >
+            {(input === true) + ""}
+          </span>
+        </div>
+      ) : input_type === "date" ? (
+        <input
+          className={`${className}__form__input ${className}__form__input--${input_type}`}
+          type={"datetime-local"}
+          name="arg-input"
+          autoComplete="off"
+          value={input}
+          onChange={inputChanged}
+        />
+      ) : input_type === "object" || input_type === "array" ? (
+        <span className={`${className}__form__${input_type}`}>
+          <div
+            className={`${className}__json-txb ${className}__json-txb--show-${jsonBoxVisible}`}
+          >
+            <JsonTextBox
+              onSubmit={jsonTextboxSubmit}
+              onCancel={hideJsonTxb}
+              obj={input}
+            />
+          </div>
+          <ReactJson
+            src={input}
+            name={false}
+            onAdd={jsonObjectSubmit}
+            onEdit={jsonObjectSubmit}
+            onDelete={jsonObjectSubmit}
+            displayObjectSize={false}
+            displayDataTypes={false}
+            collapsed={true}
+          />
+          <ArgValue value={arg.value()} hide={!targetValues.length} />
+          <span
+            className={`${className}__add-json-btn btn ${className}__json-txb--show-${!jsonBoxVisible}`}
+            onClick={showJsonTxb}
+          >
+            +JSON
+          </span>
+        </span>
+      ) : input_type === "target" ? (
+        ((value) => (
+          <div className={`${className}__form__${input_type}`}>
+            <TargetSelector
+              controller={controller}
+              target_namespace={targetValues[0].target_namespace}
+              testIndex={testIndex}
+              arg_index={i}
+              target_index={0}
+              className={`${className}__form__input ${className}__form__input--${input_type}`}
+            />
+            <ArgValue value={value} hide={!targetValues.length} />
+          </div>
+        ))(arg.value())
+      ) : (
+        <span className={`${className}__value`}>{input + ""}</span>
+      )}
+    </div>
+  );
+};
+
+export function Argument({ value }) {
+  const data_type = getType(value);
+  return (
+    <>
+      {data_type === "undefined" || data_type === "null" ? (
+        <span className={`${className}__value__${data_type}`}>{value + ""}</span>
+      ) : data_type === "string" ? (
+        <span className={`${className}__value__${data_type}`}>
+          <span className={`${className}__quote`}>"</span>
+          {value}
+          <span className={`${className}__quote`}>"</span>
+        </span>
+      ) : data_type === "number" ? (
+        <span className={`${className}__value__${data_type}`}>{value + ""}</span>
+      ) : data_type === "boolean" ? (
+        <span
+          className={`${className}__value__${data_type} ${className}__value__${data_type}--${
+            value + ""
+          }`}
+        >
+          {(value === true) + ""}
+        </span>
+      ) : data_type === "date" ? (
+        <span className={`${className}__value__${data_type}`}>
+          {moment(value).format() + ""}
+        </span>
+      ) : data_type === "object" || data_type === "array" ? (
+        <span className={`${className}__value__${data_type}`}>
+          <ReactJson
+            src={value}
+            name={false}
+            displayObjectSize={false}
+            displayDataTypes={false}
+            collapsed={true}
+          />
+        </span>
+      ) : (
+        <span className={`${className}__value__${data_type}`}>{value + ""}</span>
+      )}
+    </>
+  );
+}
+const ArgValue = (props) => {
+  return (
+    <div className={`${className}__value ${props.hide && className + "__value--hide"}`}>
+      <Argument {...props} />
+    </div>
+  );
+};
+
+export default Args;

package/src/molecules/Args/styles.scss

@@ -0,0 +1,166 @@
+.args {
+  display: inline;
+  width: 100%;
+  &__add-btn {
+    padding: 0px 3px;
+    border-radius: 21px;
+    font-weight: bold;
+    color: #ffffff;
+    font-size: 16px;
+    margin: 0 5px;
+    line-height: 16px;
+    background: #5a77e5;
+    font-family: monospace;
+  }
+  &__data {
+    background: #cecee3;
+    margin: 2px;
+    border-radius: 7px;
+    padding: 11px;
+    position: relative;
+    &__delete-btn {
+      border-radius: 0px 7px 0px 0px !important;
+      top: 0px !important;
+      right: 0px !important;
+      padding: 0px 5px 1px 5px !important;
+    }
+  }
+
+  &__name {
+    white-space: nowrap;
+
+    &__text {
+      display: inline-block;
+      margin: 1px 0px;
+      // box-shadow: 1px 1px 1px #bdbdbd;
+      background: #5a77e5;
+      font-weight: bold;
+      color: white;
+      padding: 2px 10px;
+      border-radius: 100px;
+      cursor: pointer;
+    }
+  }
+  &__from-container {
+    display: flex;
+    /* justify-content: space-evenly; */
+  }
+
+  &__form {
+    &--is12 {
+      margin-top: 10px;
+    }
+    &__undefined {
+      color: #5a5a5a;
+    }
+    &__input {
+      background: none;
+      border: none;
+      border-bottom: 1px solid #9797d1;
+      font-family: monospace;
+      font-size: 14px;
+      &--number {
+        color: #9741ed;
+        font-weight: bold;
+      }
+      &--string,
+      &--target {
+        text-indent: 5px;
+        color: #cf5f2e;
+        min-height: 31px;
+        height: 31px;
+        min-width: 100%;
+        max-width: 100%;
+        max-height: 320px;
+      }
+      &--target {
+        font-weight: bold;
+        color: #009572;
+      }
+      &--date {
+        margin-top: 6px;
+        color: #9f4040;
+      }
+    }
+    &__value {
+      &--boolean {
+        &--true {
+          color: #2eab8c;
+          margin-right: 5px;
+        }
+        &--false {
+          color: #d52518;
+        }
+        position: relative;
+        top: 7px;
+        font-weight: bold;
+      }
+    }
+  }
+  &__quote {
+    color: #209cff;
+    font-size: 21px;
+    line-height: 1px;
+  }
+  &__type {
+    text-align: center;
+  }
+  &__name-display {
+    margin-right: 4px;
+    display: inline-block;
+  }
+  &__expand-btn {
+    color: #0035cf61;
+    text-shadow: 1px 1px 1px #cfcfcf;
+  }
+
+  &__add-json-btn {
+    padding: 2px 3px;
+    border-radius: 2px;
+    color: #0d8065;
+    position: absolute;
+    top: 6px;
+    right: 0;
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+  &__json-txb {
+    &--show-false {
+      display: none !important;
+    }
+  }
+  &__value {
+    padding: 14px;
+    &--hide {
+      display: none;
+    }
+    &__number {
+      color: #9741ed;
+      font-weight: bold;
+    }
+    &__string {
+      color: #cf5f2e;
+      white-space: pre-line;
+    }
+    &__date {
+      color: #9f4040;
+    }
+    &__undefined {
+      color: #5a5a5a;
+    }
+    &__object {
+      // background: white;
+      padding: 0;
+    }
+    &__boolean {
+      font-weight: bold;
+      &--true {
+        color: #207844;
+      }
+      &--false {
+        color: #cf1515;
+      }
+    }
+  }
+}

package/src/molecules/AutoCompleteBox/AutoCompleteBox.js

@@ -0,0 +1,101 @@
+import { useState, useEffect } from "react";
+import "./styles.scss";
+
+const AutoCompleteBox = ({
+  suggestions,
+  value = "",
+  className,
+  onSubmit,
+  onChange,
+  onBlur,
+  disabled = false,
+  placeholder,
+  filterSuggestion = true,
+  requireSelection = true,
+}) => {
+  const [filteredSuggestions, setFilteredSuggestions] = useState([]);
+  const [activeSuggestionIndex, setActiveSuggestionIndex] = useState(0);
+  const [showSuggestions, setShowSuggestions] = useState(false);
+  const [input, setInput] = useState(value);
+  useEffect(() => setInput(value), [value]);
+  const change = (e) => {
+    const userInput = e.target.value;
+
+    // Filter our suggestions that don't contain the user's input
+    const unLinked = filterSuggestion
+      ? suggestions.filter(
+          (suggestion) => suggestion.toLowerCase().indexOf(userInput.toLowerCase()) > -1
+        )
+      : suggestions;
+
+    setInput(e.target.value);
+    setFilteredSuggestions(unLinked);
+    setActiveSuggestionIndex(0);
+
+    if (
+      (!requireSelection && unLinked.indexOf(userInput) > -1) ||
+      (!requireSelection &&
+        unLinked.length <= 1 &&
+        userInput.length > (unLinked[0] || "").length)
+    )
+      setShowSuggestions(false);
+    else setShowSuggestions(true);
+    if (typeof onChange === "function") onChange(e.target.value);
+  };
+  const onClick = (e) => {
+    const text = e.target.innerText.substr(0, e.target.innerText.length);
+    if (typeof onSubmit === "function") onSubmit(text);
+    setFilteredSuggestions([]);
+    setInput(text);
+    setActiveSuggestionIndex(0);
+    setShowSuggestions(false);
+  };
+  const blur = (e) => {
+    typeof onBlur === "function" && onBlur(e.target.value);
+  };
+  const SuggestionsListComponent = () => {
+    return filteredSuggestions.length ? (
+      <div className="auto-complete__suggestions">
+        {filteredSuggestions.map((suggestion, index) => {
+          let className;
+          // Flag the active suggestion with a class
+
+          className =
+            index === activeSuggestionIndex
+              ? "auto-complete__suggestion  auto-complete__suggestion--active"
+              : "auto-complete__suggestion ";
+
+          return (
+            <span className={className} key={suggestion} onClick={onClick}>
+              {suggestion}
+            </span>
+          );
+        })}
+      </div>
+    ) : (
+      <div className="auto-complete__suggestions">
+        <div className="auto-complete__suggestion auto-complete__suggestion--empty">
+          <em>no match</em>
+        </div>
+      </div>
+    );
+  };
+  const onKeyDown = () => {};
+  return (
+    <div className="auto-complete">
+      <input
+        className={className + " auto-complete__input"}
+        type="text"
+        onChange={change}
+        onKeyDown={onKeyDown}
+        onBlur={blur}
+        value={input}
+        disabled={disabled}
+        placeholder={placeholder}
+      />
+      {showSuggestions && input && <SuggestionsListComponent />}
+    </div>
+  );
+};
+
+export default AutoCompleteBox;

package/src/molecules/AutoCompleteBox/styles.scss

@@ -0,0 +1,35 @@
+.auto-complete {
+  position: relative;
+  display: initial;
+  &__suggestions {
+    position: absolute;
+    top: 19px;
+    z-index: 1;
+    left: 0px;
+    display: grid;
+    // border: 1px solid #bcbfd1;
+    box-shadow: 1px 3px 4px #736c6c;
+    max-height: 365px;
+    overflow-y: auto;
+    font-family: monospace;
+  }
+  &__suggestion {
+    padding: 6px 7px;
+    display: inline-flex;
+    cursor: pointer;
+    background: white;
+    width: calc(300px + 1rem);
+    &--active,
+    &:hover:not(&--empty) {
+      color: #5960b6;
+      background-color: #cbcbff;
+      background-color: #dadaed;
+      color: #3f495d;
+      font-weight: 100;
+      font-weight: bold;
+    }
+    &--empty {
+      justify-content: center;
+    }
+  }
+}