systemview 1.0.1 → 1.1.1

package/src/atoms/Button/Button.js

@@ -0,0 +1,20 @@
+import React from "react";
+import "./styles.scss";
+import CLEAR_ICON from "../../assets/clear.png";
+
+const Button = ({ children, submit }) => {
+  return (
+    <button className="button" onClick={submit}>
+      {children}
+    </button>
+  );
+};
+
+export function ClearButton({ onClick }) {
+  return (
+    <span className={`clear-button btn`} onClick={onClick}>
+      <img src={CLEAR_ICON} alt="clear" />
+    </span>
+  );
+}
+export default Button;

package/src/atoms/Button/Button.test.js

@@ -0,0 +1,27 @@
+/* eslint-disable jest/valid-expect */
+import React from "react";
+import ReactDom from "react-dom";
+import { render, cleanup } from "@testing-library/react";
+import "@testing-library/jest-dom/extend-expect";
+import renderer from "react-test-renderer";
+import Button from "./Button";
+
+afterEach(cleanup);
+
+describe("<Button/>", () => {
+  it("renders without crashing", () => {
+    const div = document.createElement("div");
+    ReactDom.render(<Button />, div);
+  });
+
+  it("renders an <button></button> element with text and class button", () => {
+    const { getByRole } = render(<Button>test</Button>);
+    expect(getByRole("button")).toHaveTextContent("test");
+    expect(getByRole("button")).toHaveClass("button");
+  });
+
+  it("should match snapshot", () => {
+    const tree = renderer.create(<Button>test</Button>).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+});

package/src/atoms/Button/__snapshots__/Button.test.js.snap

@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Button/> should match snapshot 1`] = `
+<button
+  className="button"
+>
+  test
+</button>
+`;

package/src/atoms/Button/styles.scss

@@ -0,0 +1,35 @@
+.button {
+  border: 1px solid;
+  background: linear-gradient(to bottom, #f9f9f9 5%, #e9e9e9 100%);
+  border-radius: 3px;
+  display: inline-block;
+  cursor: pointer;
+  color: #666666;
+  font-family: Arial;
+  font-size: 15px;
+  font-weight: bold;
+  padding: 6px 24px;
+  text-decoration: none;
+  text-shadow: 0px 1px 0px #ffffff;
+  margin: 4px 10px;
+  &:hover {
+    background: linear-gradient(to bottom, #e9e9e9 5%, #f9f9f9 100%);
+    background-color: #e9e9e9;
+  }
+  &:active {
+    position: relative;
+    top: 1px;
+  }
+}
+.clear-button {
+  background: #607d8b;
+  padding: 0px 8px;
+  color: white;
+  border-radius: 17px;
+  font-weight: 600;
+  align-self: flex-end;
+  & > img {
+    width: 13px;
+    padding-top: 2px;
+  }
+}

package/src/atoms/Count/index.js

@@ -0,0 +1,10 @@
+import "./styles.scss";
+const CLASS_NAME = "count";
+
+export default function Count({ count, stat, type }) {
+  return (
+    <span className={`${CLASS_NAME} ${CLASS_NAME}__${type}`}>
+      {count} {stat && <span className={`${CLASS_NAME}__stat`}>{stat}</span>}
+    </span>
+  );
+}

package/src/atoms/Count/styles.scss

@@ -0,0 +1,25 @@
+.count {
+  background: gainsboro;
+  padding: 0px 9px;
+  border-radius: 12px;
+  font-size: 14px;
+  font-weight: bold;
+  color: #777777 !important;
+  margin-left: 5px;
+  display: inline-block;
+  &__stat {
+    padding: 3px 0;
+    display: inline-block;
+  }
+  &__error {
+    background: #ffc4b1;
+    color: #f44336 !important;
+  }
+  &__caution {
+    color: #bcb047 !important;
+  }
+  &__passed {
+    background: #6fc878;
+    color: #ffffff !important;
+  }
+}

package/src/atoms/DataTable/DataTable.js

@@ -0,0 +1,27 @@
+import React from "react";
+import "./styles.scss";
+
+const DataTable = ({ headers = [], table = [], tableClassName }) => {
+  return (
+    <table className={`data-table ${tableClassName}`}>
+      <thead>
+        <tr>
+          {headers.map(({ name }, i) => (
+            <th key={i}>{name}</th>
+          ))}
+        </tr>
+      </thead>
+      <tbody>
+        {table.map((row, i) => (
+          <tr key={i}>
+            {row.map((value, i) => (
+              <td key={i}>{value}</td>
+            ))}
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  );
+};
+
+export default DataTable;

package/src/atoms/DataTable/DataTable.test.js

@@ -0,0 +1,55 @@
+/* eslint-disable jest/valid-expect */
+import React from "react";
+import ReactDom from "react-dom";
+import { render, cleanup } from "@testing-library/react";
+import "@testing-library/jest-dom/extend-expect";
+import renderer from "react-test-renderer";
+import DataTable from "./DataTable";
+
+afterEach(cleanup);
+
+describe("<DataTable/>", () => {
+  it("renders without crashing", () => {
+    const div = document.createElement("div");
+    ReactDom.render(<DataTable />, div);
+  });
+
+  it("renders an table element with text and class button", () => {
+    const { getByRole } = render(<DataTable />);
+    expect(getByRole("table")).toHaveClass("data-table");
+  });
+
+  it("renders content correctly", () => {
+    const headers = [{ name: "column 1" }, { name: "column 2" }];
+    const data = [
+      ["r1c1", "r1c2"],
+      ["r2c1", "r2c2"],
+    ];
+    const { getByRole, getAllByRole } = render(
+      <DataTable tableClassName={"test"} headers={headers} table={data} />
+    );
+
+    expect(getByRole("table")).toHaveClass("data-table");
+    expect(getByRole("table")).toHaveClass("test");
+    expect(getAllByRole("columnheader")).toHaveLength(headers.length);
+    expect(getAllByRole("columnheader")[0]).toHaveTextContent(headers[0].name);
+    expect(getAllByRole("columnheader")[1]).toHaveTextContent(headers[1].name);
+    expect(getAllByRole("cell")).toHaveLength(data.length * headers.length);
+    expect(getAllByRole("cell")[0]).toHaveTextContent(data[0][0]);
+    expect(getAllByRole("cell")[1]).toHaveTextContent(data[0][1]);
+    expect(getAllByRole("cell")[2]).toHaveTextContent(data[1][0]);
+    expect(getAllByRole("cell")[3]).toHaveTextContent(data[1][1]);
+  });
+
+  it("should match snapshot", () => {
+    const headers = [{ name: "column 1" }, { name: "column 2" }];
+    const data = [
+      ["r1c1", "r1c2"],
+      ["r2c1", "r2c2"],
+    ];
+    const tree = renderer
+      .create(<DataTable tableClassName={"test"} headers={headers} table={data} />)
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+});

package/src/atoms/DataTable/__snapshots__/DataTable.test.js.snap

@@ -0,0 +1,36 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<DataTable/> should match snapshot 1`] = `
+<table
+  className="data-table test"
+>
+  <thead>
+    <tr>
+      <th>
+        column 1
+      </th>
+      <th>
+        column 2
+      </th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>
+        r1c1
+      </td>
+      <td>
+        r1c2
+      </td>
+    </tr>
+    <tr>
+      <td>
+        r2c1
+      </td>
+      <td>
+        r2c2
+      </td>
+    </tr>
+  </tbody>
+</table>
+`;

package/src/atoms/DataTable/styles.scss

@@ -0,0 +1,28 @@
+.data-table {
+  width: 100%;
+  margin: 5px 0;
+  background-color: #ffffff;
+  border-collapse: collapse;
+  color: #000000;
+  & td,
+  & th {
+    border-width: 1px;
+    border-color: #bfbfbe;
+    border-style: solid;
+    padding: 5px;
+    font-weight: 300;
+  }
+  & th {
+    font-weight: bold;
+    font-size: 15px;
+    color: #41937a;
+    padding: 6px;
+  }
+  & td {
+    font-family: monospace;
+    font-size: 14px;
+  }
+  & thead {
+    background-color: #dadada;
+  }
+}

package/src/atoms/DescriptionBox/DescriptionBox.js

@@ -0,0 +1,24 @@
+import React from "react";
+import "./styles.scss";
+
+const DescriptionBox = ({ text, setValue }) => {
+  return (
+    <div className="description-box">
+      <textarea
+        className="description-box__textbox"
+        name="description-box"
+        id="description-box"
+        value={text}
+        onChange={
+          setValue
+            ? (e) => {
+                setValue(e.target.value);
+              }
+            : null
+        }
+      ></textarea>
+    </div>
+  );
+};
+
+export default DescriptionBox;

package/src/atoms/DescriptionBox/DescriptionBox.test.js

@@ -0,0 +1,36 @@
+/* eslint-disable jest/valid-expect */
+import React from "react";
+import ReactDom from "react-dom";
+import { render, cleanup, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import "@testing-library/jest-dom/extend-expect";
+import renderer from "react-test-renderer";
+import DescriptionBox from "./DescriptionBox";
+
+afterEach(cleanup);
+
+describe("<DescriptionBox/>", () => {
+  it("renders without crashing", () => {
+    const div = document.createElement("div");
+    ReactDom.render(<DescriptionBox />, div);
+  });
+
+  it("apply text using the text prop", () => {
+    const { getByRole } = render(<DescriptionBox text={"test"} />);
+    expect(getByRole("textbox")).toHaveTextContent("test");
+  });
+
+  it("take text from user input", () => {
+    render(<DescriptionBox />);
+
+    screen.getByRole("textbox");
+    userEvent.type(screen.getByRole("textbox"), "user input");
+
+    expect(screen.getByRole("textbox")).toHaveValue("user input");
+  });
+
+  it("should match snapshot", () => {
+    const tree = renderer.create(<DescriptionBox />).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+});

package/src/atoms/DescriptionBox/__snapshots__/DescriptionBox.test.js.snap

@@ -0,0 +1,14 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<DescriptionBox/> should match snapshot 1`] = `
+<div
+  className="description-box"
+>
+  <textarea
+    className="description-box__textbox"
+    id="description-box"
+    name="description-box"
+    onChange={null}
+  />
+</div>
+`;

package/src/atoms/DescriptionBox/styles.scss

@@ -0,0 +1,24 @@
+.description-box {
+  width: 100%;
+
+  &__textbox {
+    min-width: 100%;
+    max-width: 100%;
+    min-height: 70vh;
+    background: white;
+    color: black;
+    font-size: 13px;
+    padding: 38px;
+    border-radius: 2px;
+    border: none;
+    outline: none;
+    resize: none;
+    // font-family: "SF Mono", "Ubuntu Mono", monospace;
+    font-size: 15px;
+    font-weight: 500;
+
+    // background: #3d8470;
+    // color: white;
+    border-bottom: 1px solid #07625a;
+  }
+}

package/src/atoms/DescriptionText/DescriptionText.js

@@ -0,0 +1,12 @@
+import React from "react";
+import "./styles.scss";
+
+const DescriptionBox = ({ text }) => {
+  return (
+    <div className="description-text">
+      <p className="description-text__text">{text}</p>
+    </div>
+  );
+};
+
+export default DescriptionBox;

package/src/atoms/DescriptionText/DescriptionText.test.js

@@ -0,0 +1,22 @@
+/* eslint-disable jest/valid-expect */
+import React from "react";
+import { expect } from "chai";
+import { shallow, render } from "enzyme";
+import Enzyme from "enzyme";
+import Adapter from "enzyme-adapter-react-16";
+import DescriptionText from "./DescriptionText";
+
+Enzyme.configure({ adapter: new Adapter() });
+
+describe("<DescriptionText/>", () => {
+  it("renders a p tag wrapped in a dive with class name description-text__text", () => {
+    const wrapper = shallow(<DescriptionText />);
+    expect(wrapper.find("div.description-text")).to.have.a.lengthOf(1);
+    expect(wrapper.find("p.description-text__text")).to.have.a.lengthOf(1);
+  });
+
+  it("use the tableClassName prop to add additional class name to table", () => {
+    const wrapper = shallow(<DescriptionText text={"test"} />);
+    expect(wrapper.find("p.description-text__text")).to.have.a.lengthOf(1);
+  });
+});

package/src/atoms/DescriptionText/styles.scss

@@ -0,0 +1,10 @@
+.description-text {
+  &__text {
+    text-align: left;
+    color: white;
+    background: #3f495d;
+    padding: 12px;
+    margin: 6px 0px;
+    border-radius: 8px;
+  }
+}

package/src/atoms/DocsIcon/DocsIcon.js

@@ -0,0 +1,20 @@
+import React from "react";
+import "./styles.scss";
+import savedDocImg from "../../assets/saved-doc.png";
+import missingDocImg from "../../assets/missing-doc.png";
+
+const DocIcon = ({ isSaved }) => {
+  return (
+    <>
+      <div className={`doc-icon`}>
+        <img
+          className={`doc-icon__img`}
+          src={isSaved ? savedDocImg : missingDocImg}
+          alt={isSaved ? "Saved Doc" : "Missing Doc"}
+        />
+      </div>
+    </>
+  );
+};
+
+export default DocIcon;

package/src/atoms/DocsIcon/DocsIcon.test.js

@@ -0,0 +1,23 @@
+/* eslint-disable jest/valid-expect */
+import React from "react";
+import ReactDom from "react-dom";
+import { render, cleanup, screen } from "@testing-library/react";
+import "@testing-library/jest-dom/extend-expect";
+import DocsIcon from "./DocsIcon";
+
+const SAVED_DOC_ICON = "saved-doc.png";
+
+afterEach(cleanup);
+jest.mock("../../assets/saved-doc.png", () => SAVED_DOC_ICON);
+
+describe("<DocsIcon/>", () => {
+  it("renders without crashing", () => {
+    const div = document.createElement("div");
+    ReactDom.render(<DocsIcon />, div);
+  });
+
+  it("renders saved-doc image if isSaved prop is true", () => {
+    const { getByRole } = render(<DocsIcon isSaved={true} />);
+    expect(getByRole("img")).toHaveAttribute("src", SAVED_DOC_ICON);
+  });
+});

package/src/atoms/DocsIcon/styles.scss

@@ -0,0 +1,7 @@
+.doc-icon {
+  display: inline-flex;
+  vertical-align: middle;
+  img {
+    width: 20px;
+  }
+}

package/src/atoms/ExpandableIcon/ExpandableIcon.js

@@ -0,0 +1,30 @@
+import React from "react";
+import "./styles.scss";
+
+const ExpandIcon = ({
+  isOpen,
+  className = "",
+  onClick,
+  color = "black",
+  size: fontSize,
+}) => {
+  return isOpen ? (
+    <span
+      style={{ color, fontSize }}
+      onClick={onClick}
+      className={`expandable-icon ${className}`}
+    >
+      &#9660;
+    </span>
+  ) : (
+    <span
+      style={{ color, fontSize }}
+      onClick={onClick}
+      className={`expandable-icon ${className}`}
+    >
+      &#x25BA;
+    </span>
+  );
+};
+
+export default ExpandIcon;

package/src/atoms/ExpandableIcon/ExpandableIcon.test.js

@@ -0,0 +1,18 @@
+/* eslint-disable jest/valid-expect */
+import React from "react";
+
+import { expect } from "chai";
+import { shallow } from "enzyme";
+
+import ExpandableIcon from "./ExpandableIcon";
+
+import Enzyme from "enzyme";
+import Adapter from "enzyme-adapter-react-16";
+Enzyme.configure({ adapter: new Adapter() });
+
+describe("<ExpandableIcon/>", () => {
+  it("renders element with class expandable-list", () => {
+    const wrapper = shallow(<ExpandableIcon />);
+    expect(wrapper.find(".expandable-icon")).to.have.a.lengthOf(1);
+  });
+});

package/src/atoms/ExpandableIcon/styles.scss

@@ -0,0 +1,5 @@
+.expandable-icon {
+  font-size: 11px;
+  font-family: sans-serif;
+  cursor: pointer;
+}

package/src/atoms/JsonTextBox/JsonTextBox.js

@@ -0,0 +1,61 @@
+import React, { useState, useEffect } from "react";
+import "./styles.scss";
+
+const JsonTextBox = ({ obj, onSubmit, onCancel }) => {
+  const [prettyJson, setPrettyJson] = useState(JSON.stringify(obj, undefined, 2));
+  const [isJson, setIsJson] = useState(true);
+  const [json, setJson] = useState(obj);
+
+  const checkJsonString = (e) => {
+    const str = e.target.value;
+    setPrettyJson(str);
+    try {
+      JSON.parse(str);
+    } catch (e) {
+      setIsJson(false);
+      return false;
+    }
+    setIsJson(true);
+    setJson(JSON.parse(str));
+    return true;
+  };
+  const submit = () => {
+    if (isJson && typeof onSubmit === "function") onSubmit(json);
+  };
+  const cancel = () => {
+    setIsJson(false);
+    setJson(obj);
+    setPrettyJson(JSON.stringify(obj, undefined, 2));
+    if (typeof onCancel === "function") onCancel();
+  };
+  useEffect(() => {
+    setPrettyJson(JSON.stringify(obj, undefined, 2));
+    setIsJson(!!obj);
+    setJson(obj);
+  }, [obj]);
+  return (
+    <div className="json-text-box">
+      <div className="json-text-box__background-overlay"></div>
+      <textarea
+        className={`json-text-box__textbox json-text-box__textbox--is-json-${isJson}`}
+        name="json-text-box"
+        id="json-text-box"
+        value={prettyJson}
+        onChange={checkJsonString}
+      ></textarea>
+      <div className="json-text-box__btn-container">
+        <span
+          onClick={submit}
+          className={`json-text-box__btn json-text-box__btn--is-json-${isJson}`}
+        >
+          {isJson ? "save" : "json"}
+        </span>
+        <span onClick={cancel} className={`json-text-box__btn json-text-box__btn--cancel`}>
+          x
+        </span>
+      </div>
+    </div>
+  );
+};
+
+export default JsonTextBox;

package/src/atoms/JsonTextBox/styles.scss

@@ -0,0 +1,41 @@
+.json-text-box {
+  position: relative;
+  &__textbox {
+    min-width: 100%;
+    max-width: 100%;
+    min-height: 100px;
+    border: 1px solid #8ea8eb;
+    margin-top: 6px;
+  }
+
+  &__btn-container {
+    position: absolute;
+    right: 1px;
+    top: 9px;
+  }
+  &__btn {
+    padding: 2px 6px;
+    border-radius: 1px;
+    cursor: pointer;
+    margin-left: 4px;
+    font-family: system-ui;
+    font-weight: 500;
+    &:active {
+      position: relative;
+      top: 1px;
+    }
+    &--is-json-true {
+      background: #25d0a8;
+      color: white;
+    }
+    &--is-json-false {
+      background: #cfc2c2;
+      color: #8c3c3c;
+      text-decoration: line-through;
+    }
+    &--cancel {
+      background: #ff6b6b;
+      color: white;
+    }
+  }
+}

package/src/atoms/Link/Link.js

@@ -0,0 +1,17 @@
+import React from "react";
+import "./styles.scss";
+import { Link } from "react-router-dom";
+
+const myLink = ({ link, add_class, text, linkClick }) => {
+  const click = (e) => {
+    e.stopPropagation();
+    if (typeof linkClick === "function") linkClick();
+  };
+  return (
+    <Link className="link" to={link}>
+      {text}
+    </Link>
+  );
+};
+
+export default myLink;