systemview 1.0.1 → 1.1.1

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;
+    }
+  }
+}

package/src/molecules/DataTableForm/DataTableForm.js

@@ -0,0 +1,167 @@
+import React, { useState, useEffect } from "react";
+import "./styles.scss";
+import Textbox from "../../atoms/Textbox/Textbox";
+import Toggle from "../../atoms/Toggle/Toggle";
+import DataTable from "../../atoms/DataTable/DataTable";
+import Selector from "../../atoms/Selector/Selector";
+import EditBox from "../EditBox/EditBox";
+import ParserMatrix from "textparsermatrix";
+
+const MethodDataForm = ({ data, submit }) => {
+  const displayHeaders = [
+    { name: "Property" },
+    { name: "Type" },
+    { name: "Description" },
+    { name: "Default" },
+    { name: "Required" },
+  ];
+  const formHeaders = [...displayHeaders, { name: "" }];
+  const _options = [
+    "String",
+    "Date",
+    "Object",
+    "ObjectId",
+    "Number",
+    "Boolean",
+    "Array(ObjectIds)",
+    "Array(Objects)",
+    "Array(Strings)",
+    "Array(Numbers)",
+    "Array(Boolean)",
+    "Array(Misc)",
+  ];
+  const matrix = ParserMatrix([
+    { name: "name" },
+    { name: "data_type" },
+    { name: "description" },
+    { name: "default_value" },
+    { name: "required" },
+  ]);
+  matrix.addJson(data || [], {
+    beforeInsert: (rowData) => (rowData[4] = rowData[4] + ""),
+  });
+
+  const [dataTable, setTable] = useState(matrix.table);
+  const [formSubmitted, setFormSubmitted] = useState(false);
+  const addRow = () => setTable([...dataTable, ["", "Object", "", "", "false"]]);
+
+  const deleteRow = ([i]) => {
+    dataTable.splice(i, 1);
+    setTable([...dataTable]);
+  };
+  const updateCell = (row, col, e) => {
+    dataTable[row][col] = e.target.value;
+    setTable([...dataTable]);
+  };
+  const updateCheckboxCell = (row, col, event) => {
+    dataTable[row][col] = event.target.checked + "";
+    dataTable[row][col - 1] = event.target.checked ? "n/a" : "";
+    setTable([...dataTable]);
+  };
+  const formCanceled = () => {
+    setFormSubmitted(false);
+    setTable(matrix.table);
+  };
+
+  const formSubmit = (showForm) => {
+    setFormSubmitted(true);
+    matrix.table = dataTable;
+
+    //validate and change data types
+    for (let i = 0; i < matrix.table.length; i++) {
+      const currentRow = matrix.table[i];
+      if (
+        !/^(?![0-9])[a-zA-Z0-9$_]+$/.test(currentRow[0]) ||
+        !currentRow[1] ||
+        !currentRow[2] ||
+        !currentRow[3]
+      )
+        return alert("Please fix invalid or incomplete cells.");
+      currentRow[4] = /true/i.test(currentRow[4]);
+    }
+
+    submit(matrix.toJson());
+    showForm(false);
+  };
+  useEffect(() => setTable(matrix.table), [data]);
+  return (
+    <div style={{ width: "100%" }}>
+      <EditBox
+        mainObject={<DataTable table={dataTable} headers={displayHeaders} />}
+        hiddenForm={
+          <div>
+            <DataTable
+              tableClassName="data-table-form"
+              headers={formHeaders}
+              table={dataTable.map(
+                ([name, type, description, default_value, required], i) => {
+                  const _required = /true/i.test(required);
+                  return [
+                    <Textbox
+                      inputClassName={`data-table-form__input-validation--${
+                        /^(?![0-9])[a-zA-Z0-9$_]+$/.test(name)
+                          ? "complete"
+                          : formSubmitted
+                          ? "invalid"
+                          : "incomplete"
+                      }`}
+                      text={name}
+                      setValue={updateCell.bind(this, i, 0)}
+                    />,
+                    <Selector
+                      options={_options}
+                      selected_option={type}
+                      onSelect={updateCell.bind(this, i, 1)}
+                      className={`data-table-form__data-type-selector`}
+                    />,
+                    <textarea
+                      value={description}
+                      className={`data-table-form__description-text data-table-form__input-validation--${
+                        description
+                          ? "complete"
+                          : formSubmitted
+                          ? "invalid"
+                          : "incomplete"
+                      }`}
+                      onChange={updateCell.bind(this, i, 2)}
+                    />,
+                    <Textbox
+                      inputClassName={`data-table-form__input-validation--${
+                        default_value
+                          ? "complete"
+                          : formSubmitted
+                          ? "invalid"
+                          : "incomplete"
+                      }`}
+                      text={default_value}
+                      setValue={updateCell.bind(this, i, 3)}
+                      disabled={_required}
+                    />,
+                    <Toggle
+                      round={true}
+                      isChecked={_required}
+                      onChange={updateCheckboxCell.bind(this, i, 4)}
+                    />,
+                    <span
+                      className="data-table-form__delete-button"
+                      onClick={deleteRow.bind(this, [i])}
+                    >
+                      x
+                    </span>,
+                  ];
+                }
+              )}
+            />
+            <span className="data-table-form__add-button" href="#" onClick={addRow}>
+              +Prop
+            </span>
+          </div>
+        }
+        formSubmit={formSubmit}
+        onCancel={formCanceled}
+      />
+    </div>
+  );
+};
+
+export default MethodDataForm;

package/src/molecules/DataTableForm/styles.scss

@@ -0,0 +1,51 @@
+.data-table-form {
+  &__description-text {
+    margin: 0px;
+    min-height: 43px;
+    max-width: 391px;
+    min-width: 391px;
+  }
+
+  &__data-type-selector {
+    padding: 0.5rem;
+  }
+
+  &__delete-button {
+    font-family: sans-serif;
+    cursor: pointer;
+    border-radius: 61px;
+    padding: 0px 5px 1px 5px;
+
+    &:hover {
+      background: #ff6b6b;
+      color: white;
+    }
+
+    &:active {
+      position: relative;
+      top: 1px;
+    }
+  }
+  &__add-button {
+    cursor: pointer;
+    padding: 1px 9px;
+    line-height: 1;
+    border-radius: 21px;
+    font-weight: bold;
+    color: #0d8065;
+    font-size: 16px;
+    background: white;
+    border: 1px solid gainsboro;
+    border: 1px solid #bbd8ca;
+    &:active {
+      position: relative;
+      top: 1px;
+    }
+  }
+  &__input-validation {
+    &--invalid {
+      border: 1px solid salmon;
+      border-radius: 5px;
+    }
+  }
+}

package/src/molecules/EditBox/EditBox.js

@@ -0,0 +1,49 @@
+import React, { useState, useEffect } from "react";
+import "./styles.scss";
+import Button from "../../atoms/Button/Button";
+
+const EditBox = ({
+  formSubmit,
+  mainObject,
+  hiddenForm,
+  onCancel,
+  open = false,
+  stateChange,
+}) => {
+  const [editMode, setEditMode] = useState(open);
+  const editBoxClicked = () => setEditMode(true);
+  const cancelClicked = () => {
+    if (typeof onCancel === "function") onCancel();
+    setEditMode(false);
+  };
+
+  const saveClicked = () => {
+    formSubmit(setEditMode);
+    //setEditMode(false);
+  };
+  // useEffect(() => {
+  //   setEditMode(false);
+  // }, [stateChange]);
+  return (
+    <div className={`edit-box edit-box--${editMode ? "edit" : "read"}`}>
+      <div
+        onClick={editBoxClicked}
+        className={`edit-box__main edit-box__main--${editMode ? "hidden" : "visible"}`}
+      >
+        {mainObject}
+      </div>
+      <div
+        className={`edit-box__form edit-box__form--${editMode ? "visible" : "hidden"}`}
+      >
+        <div className="row">{hiddenForm}</div>
+
+        <div className="edit-box__button">
+          <Button submit={saveClicked}>Save</Button>
+          <Button submit={cancelClicked}>Close</Button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default EditBox;

package/src/molecules/EditBox/styles.scss

@@ -0,0 +1,38 @@
+.edit-box {
+  width: 100%;
+  border-radius: 13px;
+  background: white;
+  overflow: scroll;
+  max-height: 80vh;
+  border: 2px solid #f1f1f1;
+  &--read {
+    &:hover {
+      // border: 2px dashed #5960b6;
+      // border: 2px dashed gainsboro;
+      // border: 2px dashed #92a3d3;
+      border: 2px dashed #8b97ba;
+
+      cursor: pointer;
+    }
+  }
+  &__main {
+    border: 2px dashed transparent;
+    &--hidden {
+      display: none;
+    }
+  }
+
+  &__form {
+    &--hidden {
+      display: none;
+    }
+  }
+
+  &__button {
+    display: flex;
+    width: 100%;
+    flex-direction: row;
+    justify-content: flex-end;
+    padding: 6px 15px;
+  }
+}

package/src/molecules/ExpandableList/ExpandableList.js

@@ -0,0 +1,26 @@
+import React, { useState } from "react";
+import "./styles.scss";
+import List from "../../atoms/List/List";
+import ExpandIcon from "../../atoms/ExpandableIcon/ExpandableIcon";
+
+const ExpandableList = ({ children, title, open = false }) => {
+  const [isOpen, setState] = useState(open);
+
+  const expandClick = () => {
+    setState(!isOpen);
+  };
+  return (
+    <div className="expandable-list">
+      <div className="expandable-list__button">
+        <ExpandIcon isOpen={isOpen} onClick={expandClick} />
+        {title}
+      </div>
+
+      <div className={`expandable-list__items expandable-list__items--${!isOpen ? "hidden" : ""}`}>
+        <List>{children}</List>
+      </div>
+    </div>
+  );
+};
+
+export default ExpandableList;

package/src/molecules/ExpandableList/ExpandableList.test.js

@@ -0,0 +1,33 @@
+/* eslint-disable jest/valid-expect */
+import React from "react";
+import { expect } from "chai";
+import { shallow, render } from "enzyme";
+
+import ExpandableList from "./ExpandableList";
+
+import Enzyme from "enzyme";
+import Adapter from "enzyme-adapter-react-16";
+
+Enzyme.configure({ adapter: new Adapter() });
+
+describe("<ExpandableList/>", () => {
+  it("renders a div with classname expandable-list", () => {
+    const wrapper = shallow(<ExpandableList />);
+    expect(wrapper.find("div.expandable-list").props().className).to.equal("expandable-list");
+  });
+
+  it("use the title prop to pass a string to .expandable-list__button class", () => {
+    const wrapper = render(<ExpandableList title="test" />);
+    expect(wrapper.find("div.expandable-list__button").text()).to.contain("test");
+  });
+
+  it("use wrap nested elements in .expandable-list-items container", () => {
+    const wrapper = render(
+      <ExpandableList>
+        <div className="test"></div>
+        <div className="test"></div>
+      </ExpandableList>
+    );
+    expect(wrapper.find("div.expandable-list__items test")).to.have.a.lengthOf(0);
+  });
+});

package/src/molecules/ExpandableList/styles.scss

@@ -0,0 +1,18 @@
+.expandable-list {
+  text-indent: 10px;
+
+  &__items {
+    &--hidden {
+      display: none;
+    }
+  }
+  &__button {
+    text-align: left;
+    display: flex;
+    & > span,
+    a {
+      display: flex;
+      align-items: center;
+    }
+  }
+}