systemview 1.0.0 → 1.1.1

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;

package/src/atoms/Link/Link.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 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

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

package/src/atoms/List/List.js

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

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

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

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

package/src/atoms/Markdown/styles.scss

@@ -0,0 +1,414 @@
+.markdown {
+  // font-family: Helvetica, arial, sans-serif;
+  font-size: 15px;
+  line-height: 1.6;
+  padding-top: 10px;
+  padding-bottom: 10px;
+  background-color: white;
+  padding: 30px;
+
+  & > *:first-child {
+    margin-top: 0 !important;
+  }
+  & > *:last-child {
+    margin-bottom: 0 !important;
+  }
+
+  & a {
+    color: #4183c4;
+  }
+  & a.absent {
+    color: #cc0000;
+  }
+  & a.anchor {
+    display: block;
+    padding-left: 30px;
+    margin-left: -30px;
+    cursor: pointer;
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+  }
+
+  & h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    margin: 20px 0 10px;
+    padding: 0;
+    font-weight: bold;
+    -webkit-font-smoothing: antialiased;
+    cursor: text;
+    position: relative;
+    color: #5960b6 !important;
+  }
+
+  & h1:hover a.anchor,
+  h2:hover a.anchor,
+  h3:hover a.anchor,
+  h4:hover a.anchor,
+  h5:hover a.anchor,
+  h6:hover a.anchor {
+    text-decoration: none;
+  }
+
+  & h1 tt,
+  h1 code {
+    font-size: inherit;
+  }
+
+  & h2 tt,
+  h2 code {
+    font-size: inherit;
+  }
+
+  & h3 tt,
+  h3 code {
+    font-size: inherit;
+  }
+
+  & h4 tt,
+  h4 code {
+    font-size: inherit;
+  }
+
+  & h5 tt,
+  h5 code {
+    font-size: inherit;
+  }
+
+  & h6 tt,
+  h6 code {
+    font-size: inherit;
+  }
+
+  & h1 {
+    font-size: 28px;
+    color: black;
+  }
+
+  & h2 {
+    font-size: 24px;
+    border-bottom: 1px solid #cccccc;
+    color: black;
+  }
+
+  & h3 {
+    font-size: 18px;
+  }
+
+  & h4 {
+    font-size: 16px;
+  }
+
+  & h5 {
+    font-size: 14px;
+  }
+
+  & h6 {
+    color: #777777;
+    font-size: 14px;
+  }
+
+  & p,
+  blockquote,
+  ul,
+  ol,
+  dl,
+  li,
+  table,
+  pre {
+    margin: 15px 0;
+  }
+
+  & hr {
+    border: 0 none;
+    color: #cccccc;
+    height: 4px;
+    padding: 0;
+    border-bottom: 1px solid;
+  }
+
+  & > h2:first-child {
+    margin-top: 0;
+    padding-top: 0;
+  }
+  & > h1:first-child {
+    margin-top: 0;
+    padding-top: 0;
+  }
+  & > h1:first-child + h2 {
+    margin-top: 0;
+    padding-top: 0;
+  }
+  & > h3:first-child,
+  & > h4:first-child,
+  & > h5:first-child,
+  & > h6:first-child {
+    margin-top: 0;
+    padding-top: 0;
+  }
+
+  & a:first-child h1,
+  a:first-child h2,
+  a:first-child h3,
+  a:first-child h4,
+  a:first-child h5,
+  a:first-child h6 {
+    margin-top: 0;
+    padding-top: 0;
+  }
+
+  & h1 p,
+  h2 p,
+  h3 p,
+  h4 p,
+  h5 p,
+  h6 p {
+    margin-top: 0;
+  }
+
+  & li p.first {
+    display: inline-block;
+  }
+  & li {
+    margin: 0;
+  }
+  & ul,
+  ol {
+    padding-left: 30px;
+  }
+
+  & ul :first-child,
+  ol :first-child {
+    margin-top: 0;
+  }
+
+  & dl {
+    padding: 0;
+  }
+  & dl dt {
+    font-size: 14px;
+    font-weight: bold;
+    font-style: italic;
+    padding: 0;
+    margin: 15px 0 5px;
+  }
+  & dl dt:first-child {
+    padding: 0;
+  }
+  & dl dt > :first-child {
+    margin-top: 0;
+  }
+  & dl dt > :last-child {
+    margin-bottom: 0;
+  }
+  & dl dd {
+    margin: 0 0 15px;
+    padding: 0 15px;
+  }
+  & dl dd > :first-child {
+    margin-top: 0;
+  }
+  & dl dd > :last-child {
+    margin-bottom: 0;
+  }
+
+  & blockquote {
+    border-left: 3px solid #c3c3c3;
+    color: #777777;
+    font-size: 14px;
+    text-indent: 8px;
+  }
+  & blockquote > :first-child {
+    margin-top: 0;
+  }
+  & blockquote > :last-child {
+    margin-bottom: 0;
+  }
+
+  & table {
+    padding: 0;
+    border-collapse: collapse;
+  }
+  & table tr {
+    border-top: 1px solid #cccccc;
+    background-color: white;
+    margin: 0;
+    padding: 0;
+  }
+  & table tr:nth-child(2n) {
+    background-color: #f8f8f8;
+  }
+  & table tr th {
+    font-weight: bold;
+    border: 1px solid #cccccc;
+    margin: 0;
+    padding: 6px 13px;
+  }
+  & table tr td {
+    border: 1px solid #cccccc;
+    margin: 0;
+    padding: 6px 13px;
+  }
+  & table tr th :first-child,
+  table tr td :first-child {
+    margin-top: 0;
+  }
+  & table tr th :last-child,
+  table tr td :last-child {
+    margin-bottom: 0;
+  }
+
+  & img {
+    max-width: 100%;
+  }
+
+  & span.frame {
+    display: block;
+    overflow: hidden;
+  }
+  & span.frame > span {
+    border: 1px solid #dddddd;
+    display: block;
+    float: left;
+    overflow: hidden;
+    margin: 13px 0 0;
+    padding: 7px;
+    width: auto;
+  }
+  & span.frame span img {
+    display: block;
+    float: left;
+  }
+  & span.frame span span {
+    clear: both;
+    color: #333333;
+    display: block;
+    padding: 5px 0 0;
+  }
+  & span.align-center {
+    display: block;
+    overflow: hidden;
+    clear: both;
+  }
+  & span.align-center > span {
+    display: block;
+    overflow: hidden;
+    margin: 13px auto 0;
+    text-align: center;
+  }
+  & span.align-center span img {
+    margin: 0 auto;
+    text-align: center;
+  }
+  & span.align-right {
+    display: block;
+    overflow: hidden;
+    clear: both;
+  }
+  & span.align-right > span {
+    display: block;
+    overflow: hidden;
+    margin: 13px 0 0;
+    text-align: right;
+  }
+  & span.align-right span img {
+    margin: 0;
+    text-align: right;
+  }
+  & span.float-left {
+    display: block;
+    margin-right: 13px;
+    overflow: hidden;
+    float: left;
+  }
+  & span.float-left span {
+    margin: 13px 0 0;
+  }
+  & span.float-right {
+    display: block;
+    margin-left: 13px;
+    overflow: hidden;
+    float: right;
+  }
+  & span.float-right > span {
+    display: block;
+    overflow: hidden;
+    margin: 13px auto 0;
+    text-align: right;
+  }
+
+  & code,
+  tt {
+    margin: 0 2px;
+    padding: 2px 3px;
+    white-space: nowrap;
+    background-color: #efeeee;
+    border-radius: 3px;
+    color: #3f51b5;
+    // font-weight: 600;
+    font-size: 14px;
+  }
+
+  & pre code {
+    margin: 0;
+    padding: 0;
+    white-space: pre;
+    border: none;
+    background: transparent;
+    // font-family: Monaco, monospace;
+  }
+
+  & .highlight pre {
+    // background-color: #f8f8f8;
+    // border: 1px solid #cccccc;
+    font-size: 13px;
+    // line-height: 19px;
+    // overflow: auto;
+    // padding: 6px 10px;
+    // border-radius: 3px;
+  }
+
+  & pre {
+    // background-color: #f8f8f8;
+    // border: 1px solid #cccccc;
+    font-size: 13px;
+    // line-height: 19px;
+    // overflow: auto;
+    // padding: 6px 10px;
+    // border-radius: 3px;
+  }
+  & pre code,
+  pre tt {
+    background-color: transparent;
+    border: none;
+  }
+
+  & sup {
+    font-size: 0.83em;
+    vertical-align: super;
+    line-height: 0;
+  }
+  & * {
+    -webkit-print-color-adjust: exact;
+  }
+  @media screen and (min-width: 914px) {
+    body {
+      width: 854px;
+      margin: 0 auto;
+    }
+  }
+  @media print {
+    table,
+    & pre {
+      page-break-inside: avoid;
+    }
+    & pre {
+      word-wrap: break-word;
+    }
+  }
+}

package/src/atoms/RunTestIcon/index.js

@@ -0,0 +1,41 @@
+import React from "react";
+import TEST_ICON from "../../assets/test-icon.svg";
+import EDIT_ICON from "../../assets/edit.png";
+import X_BUTTON from "../../assets/x.svg";
+import "./styles.scss";
+
+export default function RunTestIcon({ onClick }) {
+  return (
+    <img
+      className="btn"
+      onClick={onClick}
+      style={{ width: "16px" }}
+      src={TEST_ICON}
+      alt={"Run Test"}
+    />
+  );
+}
+
+export function EditIcon({ onClick }) {
+  return (
+    <img
+      className="btn"
+      style={{ width: "16px" }}
+      src={EDIT_ICON}
+      alt={"Edit Test"}
+      onClick={onClick}
+    />
+  );
+}
+
+export function XButton({ onClick }) {
+  return (
+    <img
+      className="btn"
+      style={{ width: "10px" }}
+      src={X_BUTTON}
+      alt={"Delete Test"}
+      onClick={onClick}
+    />
+  );
+}

package/src/atoms/RunTestIcon/styles.scss

@@ -0,0 +1,16 @@
+.doc-icon {
+  display: inline-flex;
+  vertical-align: middle;
+  img {
+    width: 20px;
+  }
+}
+
+.delete-button {
+  font-family: system-ui;
+  color: #c50000;
+  background: white;
+  padding: 6px 3px;
+  border-radius: 40px;
+  font-weight: 300;
+}

package/src/atoms/SaveIcon/SaveIcon.js

@@ -0,0 +1,6 @@
+import React from "react";
+import "./styles.scss";
+import icon from "../../assets/icons-save-60.png";
+export default function SaveIcon({ onClick }) {
+  return <img className="save-icon" src={icon} alt="Save" />;
+}

package/src/atoms/SaveIcon/styles.scss

@@ -0,0 +1,3 @@
+.save-icon {
+  height: 16px;
+}

package/src/atoms/Selector/Selector.js

@@ -0,0 +1,28 @@
+import React from "react";
+import "./styles.scss";
+
+const Selector = ({
+  options = [],
+  values = [],
+  selected_option,
+  onSelect,
+  className,
+  controlledOption,
+}) => {
+  return (
+    <select
+      className={className}
+      defaultValue={selected_option}
+      onChange={onSelect}
+      value={controlledOption}
+    >
+      {options.map((option, i) => (
+        <option key={i} value={values[i]}>
+          {option}
+        </option>
+      ))}
+    </select>
+  );
+};
+
+export default Selector;

package/src/atoms/Selector/styles.scss

@@ -0,0 +1 @@
+