systemview 1.1.2 → 1.3.2

package/src/molecules/AutoCompleteBox/AutoCompleteBox.js

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

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

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

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

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

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

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

@@ -1,33 +0,0 @@
-/* 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

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

package/src/molecules/ExpandableSection/ExpandableSection.js

@@ -1,36 +0,0 @@
-import React from "react";
-import "./styles.scss";
-import ExpandIcon from "../../atoms/ExpandableIcon/ExpandableIcon";
-
-const ExpandableSection = ({
-  children,
-  title,
-  color = "#2aa198",
-  open,
-  lock,
-  toggleExpansion,
-}) => {
-  return (
-    <div className="expandable-section">
-      <div className="expandable-section__title">
-        <span
-          className={`expandable-section__btn expandable-section__btn--hide-${lock}`}
-          onClick={toggleExpansion}
-        >
-          <ExpandIcon color={color} isOpen={open} />
-        </span>
-        {title}
-      </div>
-
-      <div
-        className={`expandable-section__items expandable-section__items--${
-          !open ? "hidden" : ""
-        }`}
-      >
-        {children}
-      </div>
-    </div>
-  );
-};
-
-export default ExpandableSection;

package/src/molecules/ExpandableSection/styles.scss

@@ -1,22 +0,0 @@
-.expandable-section {
-  width: 100%;
-  margin-bottom: 6px;
-  &__items {
-    &--hidden {
-      display: none;
-    }
-  }
-  &__title {
-    margin-bottom: 7px;
-    display: flex;
-    position: relative;
-    &__btn {
-      cursor: pointer;
-    }
-  }
-  &__btn {
-    &--hide-true {
-      visibility: hidden;
-    }
-  }
-}

package/src/molecules/ServerModulesList/ServerModulesList.js

@@ -1,75 +0,0 @@
-import React from "react";
-import "./styles.scss";
-import ExpandableList from "../ExpandableList/ExpandableList";
-import MyLink from "../../atoms/Link/Link";
-import DocIcon from "../../atoms/DocsIcon/DocsIcon";
-import TestsIcon from "../../atoms/TestsIcon/TestsIcon";
-
-const ServerModulesList = ({
-  projectCode,
-  serviceId,
-  modules,
-  selectedModuleName,
-  selectedMethodName,
-  specList,
-}) => {
-  const className = "server-module";
-
-  return (
-    <React.Fragment>
-      {modules.map(({ name, methods }, i) => {
-        const isSelected = selectedModuleName === name;
-        const isSaved = specList.docs.includes(`${name}.md`);
-        return (
-          <ExpandableList
-            open={selectedModuleName === name}
-            key={i}
-            title={
-              <span
-                className={`system-nav__link system-nav__link--selected-${
-                  !selectedMethodName && isSelected
-                } ${name === "Plugin" && className + "__name--plugin"}`}
-              >
-                <MyLink link={`/${projectCode}/${serviceId}/${name}`} text={name} />
-                <span className={`${className}__docs-icon`}>
-                  <DocIcon isSaved={isSaved} />
-                </span>
-              </span>
-            }
-          >
-            {methods.map(({ fn }, i) => {
-              const isSavedDoc = !!specList.docs.includes(`${name}.${fn}.md`);
-              const isSavedTest = !!specList.tests.includes(`${name}.${fn}.json`);
-              return (
-                <div
-                  key={i}
-                  className={`${className}__methods system-nav__link--selected-${
-                    fn === selectedMethodName && isSelected
-                  }`}
-                >
-                  <MyLink
-                    key={i}
-                    link={`/${projectCode}/${serviceId}/${name}/${fn}`}
-                    text={
-                      <span>
-                        {`.${fn}(`}
-                        <span style={{ fontWeight: "bold" }}>...</span>
-                        {")"}
-                      </span>
-                    }
-                  />
-                  <div className={`${className}__docs-icon`}>
-                    <DocIcon isSaved={isSavedDoc} />
-                    <TestsIcon isSaved={isSavedTest} />
-                  </div>
-                </div>
-              );
-            })}
-          </ExpandableList>
-        );
-      })}
-    </React.Fragment>
-  );
-};
-
-export default ServerModulesList;