systemview 1.1.1 → 1.2.2

package/src/atoms/DataTable/DataTable.js

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

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

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

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

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

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

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

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

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

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

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

package/src/atoms/DocsIcon/DocsIcon.js

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

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

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

package/src/atoms/ExpandableIcon/ExpandableIcon.js

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

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

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

package/src/atoms/JsonTextBox/JsonTextBox.js

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

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

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

package/src/atoms/Link/Link.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 Link from "./Link";
-
-import Enzyme from "enzyme";
-import Adapter from "enzyme-adapter-react-16";
-Enzyme.configure({ adapter: new Adapter() });
-
-describe("<Link/>", () => {
-  it("renders a tag with class link", () => {
-    const wrapper = shallow(<Link />);
-    expect(wrapper.find("a.link")).to.have.a.lengthOf(1);
-  });
-
-  it("renders text with the link when text prop is used", () => {
-    const wrapper = render(<Link text="test" />);
-    expect(wrapper.text()).to.equal("test");
-  });
-
-  it("should additional classname to the container <a> tag when add_class prop", () => {
-    const wrapper = shallow(<Link add_class="test" />);
-    expect(expect(wrapper.find("a.link").props().className).to.equal("link test"));
-  });
-
-  it("should use link prop to add href", () => {
-    const wrapper = shallow(<Link link="/test" />);
-    expect(expect(wrapper.find("a.link").props().href).to.equal("/test"));
-  });
-});

package/src/atoms/Link/styles.scss

@@ -1,8 +0,0 @@
-.link {
-  color: #282d33;
-  text-decoration: none;
-  font-size: 16px;
-  &:hover {
-    text-decoration: underline;
-  }
-}

package/src/atoms/List/List.js

@@ -1,8 +0,0 @@
-import React from "react";
-import "./styles.scss";
-
-const List = ({ children }) => {
-  return <div className="list">{children}</div>;
-};
-
-export default List;

package/src/atoms/List/List.test.js

@@ -1,26 +0,0 @@
-/* eslint-disable jest/valid-expect */
-import React from "react";
-
-import { expect } from "chai";
-import { shallow, render } from "enzyme";
-
-import List from "./List";
-
-import Enzyme from "enzyme";
-import Adapter from "enzyme-adapter-react-16";
-Enzyme.configure({ adapter: new Adapter() });
-
-describe("<List/>", () => {
-  it("renders a div tag with class list", () => {
-    const wrapper = shallow(<List />);
-    expect(wrapper.find("div.list")).to.have.a.lengthOf(1);
-  });
-  it("renders a div tag children", () => {
-    const wrapper = shallow(
-      <List>
-        <div className="test"></div>
-      </List>
-    );
-    expect(wrapper.find("div.list > div.test")).to.have.a.lengthOf(1);
-  });
-});

package/src/atoms/List/styles.scss

@@ -1,9 +0,0 @@
-.list {
-  text-align: left;
-  padding: 6px 0px 6px 6px;
-  text-indent: 29px;
-  display: flex;
-  flex-direction: column;
-  line-height: 20px;
-  color: #343542;
-}

package/src/atoms/Markdown/Markdown.js

@@ -1,48 +0,0 @@
-import React from "react";
-import ReactMarkdown from "react-markdown";
-import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
-import { dracula } from "react-syntax-highlighter/dist/cjs/styles/prism";
-import remarkGfm from "remark-gfm";
-
-import "./styles.scss";
-
-const Markdown = ({ children }) => {
-  return (
-    <div className="markdown">
-      <ReactMarkdown
-        remarkPlugins={[remarkGfm]}
-        renderers={{ code: CodeBlock }}
-        components={{
-          code({ node, inline, className, children, ...props }) {
-            const match = /language-(\w+)/.exec(className || "");
-            return !inline && match ? (
-              <SyntaxHighlighter
-                children={String(children).replace(/\n$/, "")}
-                style={dracula}
-                language={match[1]}
-                PreTag="div"
-                {...props}
-              />
-            ) : (
-              <code className={className} {...props}>
-                {children}
-              </code>
-            );
-          },
-        }}
-      >
-        {children}
-      </ReactMarkdown>
-    </div>
-  );
-};
-
-function CodeBlock({ value, language }) {
-  return (
-    <SyntaxHighlighter language={language} style={dracula}>
-      {value || ""}
-    </SyntaxHighlighter>
-  );
-}
-
-export default Markdown;