systemview 1.1.2 → 1.3.2

package/src/atoms/Textbox/styles.scss

@@ -1,14 +0,0 @@
-@import "../../sass/bootstrap/functions";
-@import "../../sass/bootstrap/variables";
-@import "../../sass/bootstrap/mixins/breakpoints";
-@import "../../sass/bootstrap/bootstrap-grid.scss";
-
-.textbox {
-  & input,
-  textarea {
-    padding: 0.75rem;
-    width: 100%;
-    padding: 7px;
-    font-size: 15px;
-  }
-}

package/src/atoms/Title/Title.js

@@ -1,12 +0,0 @@
-import React from "react";
-import "./styles.scss";
-
-const Title = ({ text, style }) => {
-  return (
-    <span style={style} className="title">
-      {text}
-    </span>
-  );
-};
-
-export default Title;

package/src/atoms/Title/styles.scss

@@ -1,6 +0,0 @@
-.title {
-  font-size: 28px;
-  color: #0e886b;
-  position: relative;
-  font-family: sans-serif;
-}

package/src/atoms/Toggle/Toggle.js

@@ -1,13 +0,0 @@
-import React from "react";
-import "./styles.scss";
-
-const Toggle = ({ round, isChecked, onChange }) => {
-  return (
-    <label className={`switch ${round ? "round" : ""}`}>
-      <input type="checkbox" checked={isChecked} onChange={onChange} />
-      <span className={`slider ${round ? "round" : ""}`}></span>
-    </label>
-  );
-};
-
-export default Toggle;

package/src/atoms/Toggle/styles.scss

@@ -1,62 +0,0 @@
-.switch {
-  position: relative;
-  display: inline-block;
-  width: 60px;
-  height: 33px;
-}
-
-/* Hide default HTML checkbox */
-.switch input {
-  opacity: 0;
-  width: 0;
-  height: 0;
-}
-
-/* The slider */
-.slider {
-  position: absolute;
-  cursor: pointer;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: #a78686;
-  background-color: #6e6e78;
-  -webkit-transition: 0.4s;
-  transition: 0.4s;
-}
-
-.slider:before {
-  position: absolute;
-  content: "";
-  height: 26px;
-  width: 26px;
-  left: 4px;
-  bottom: 4px;
-  background-color: white;
-  -webkit-transition: 0.4s;
-  transition: 0.4s;
-}
-
-input:checked + .slider {
-  background-color: #29ab8c;
-}
-
-input:focus + .slider {
-  box-shadow: 0 0 1px #29ab8c;
-}
-
-input:checked + .slider:before {
-  -webkit-transform: translateX(26px);
-  -ms-transform: translateX(26px);
-  transform: translateX(26px);
-}
-
-/* Rounded sliders */
-.slider.round {
-  border-radius: 34px;
-}
-
-.slider.round:before {
-  border-radius: 50%;
-}

package/src/atoms/TypeSelector/TypeSelector.js

@@ -1,28 +0,0 @@
-import React from "react";
-import "./styles.scss";
-import Selector from "../Selector/Selector";
-const options = [
-  "string",
-  "number",
-  "date",
-  "boolean",
-  "object",
-  "array",
-  "undefined",
-  "null",
-  "target",
-];
-
-const TypeSelector = ({ default_type = "undefined", onSelect, className = "" }) => {
-  const class_name = "type-selector";
-  return (
-    <Selector
-      className={`${class_name} ${className}`}
-      options={options}
-      onSelect={onSelect}
-      controlledOption={default_type}
-    />
-  );
-};
-
-export default TypeSelector;

package/src/atoms/TypeSelector/styles.scss

@@ -1,9 +0,0 @@
-.type-selector {
-  color: blue;
-  appearance: none;
-  cursor: pointer;
-  background: none;
-  border: none;
-  outline: none;
-  font-family: "SF Mono", monospace;
-}

package/src/index.css

@@ -1,20 +0,0 @@
-@font-face {
-  font-family: "SF Mono";
-  src: url(./assets/fonts/FontsFree-Net-SFMono-Regular.ttf) format("ttf");
-}
-@font-face {
-  font-family: "Malkor";
-  src: url(./assets/fonts/Malkor-Regular.ttf) format("ttf");
-}
-body {
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu",
-    "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-code {
-  font-family: "SF Mono", system-ui, source-code-pro, Menlo, Monaco, Consolas,
-    "Courier New", monospace;
-}

package/src/index.js

@@ -1,24 +0,0 @@
-import React from "react";
-import ReactDOM from "react-dom";
-import "./index.css";
-import App from "./App";
-import reportWebVitals from "./reportWebVitals";
-// import "./assets/fonts/FontsFree-Net-SFMono-Regular.ttf";
-// import "./assets/fonts/Malkor-Regular.ttf";
-import { Client } from "systemlynx";
-
-const url = "http://localhost:3300/systemview/api";
-
-Client.loadService(url).then((SystemViewService) => {
-  ReactDOM.render(
-    <React.StrictMode>
-      <App SystemViewService={SystemViewService} />
-    </React.StrictMode>,
-    document.getElementById("root")
-  );
-});
-
-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals();

package/src/logo.svg

@@ -1,7 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3">
-    <g fill="#61DAFB">
-        <path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/>
-        <circle cx="420.9" cy="296.5" r="45.7"/>
-        <path d="M520.5 78.1z"/>
-    </g>
-</svg>

package/src/molecules/Args/Args.js

@@ -1,302 +0,0 @@
-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

@@ -1,166 +0,0 @@
-.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;
-      }
-    }
-  }
-}