systemview 1.0.1 → 1.1.1

package/src/atoms/TestsIcon/TestsIcon.js

@@ -0,0 +1,17 @@
+import React from "react";
+import "./styles.scss";
+import testMissingImg from "../../assets/test-missing.png";
+import testSavedImg from "../../assets/test-saved.png";
+const TestsIcon = ({ isSaved, className }) => {
+  return (
+    <div className={`doc-icon`}>
+      <img
+        className={`doc-icon__img ${className && className}`}
+        src={isSaved ? testSavedImg : testMissingImg}
+        alt="missing tests"
+      />
+    </div>
+  );
+};
+
+export default TestsIcon;

package/src/atoms/TestsIcon/TestsIcon.test.js

@@ -0,0 +1,18 @@
+/* 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 TestsIcon from "./TestsIcon";
+
+import Enzyme from "enzyme";
+import Adapter from "enzyme-adapter-react-16";
+
+Enzyme.configure({ adapter: new Adapter() });
+
+describe("<TestsIcon/>", () => {
+  it("renders test-saved.png if isSaved prop equals true", () => {
+    const div = document.createElement("div");
+    ReactDom.render(<TestsIcon />, div);
+  });
+});

package/src/atoms/Text/Text.js

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

package/src/atoms/Text/Text.test.js

@@ -0,0 +1,21 @@
+/* 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 Text from "./Text";
+
+Enzyme.configure({ adapter: new Adapter() });
+
+describe("<Text/>", () => {
+  it("renders a span tag with class text", () => {
+    const wrapper = shallow(<Text />);
+    expect(wrapper.find("span.text")).to.have.a.lengthOf(1);
+  });
+
+  it("use the text prop to render a span with innerText", () => {
+    const wrapper = render(<Text text="test" />);
+    expect(wrapper.text()).to.equal("test");
+  });
+});

package/src/atoms/Textbox/Textbox.js

@@ -0,0 +1,33 @@
+import React from "react";
+import "./styles.scss";
+
+const Textbox = ({
+  placeholderText,
+  TextboxSubmit,
+  text,
+  setValue,
+  disabled = false,
+  defaultText,
+  inputClassName,
+}) => {
+  const enterClicked = (e) => {
+    if (e.key === "Enter" && typeof TextboxSubmit === "function") TextboxSubmit(e);
+  };
+
+  return (
+    <div className={`textbox`}>
+      <input
+        type="text"
+        value={text}
+        defaultValue={defaultText}
+        placeholder={placeholderText}
+        onKeyDown={enterClicked}
+        onChange={setValue}
+        disabled={disabled}
+        className={inputClassName}
+      />
+    </div>
+  );
+};
+
+export default Textbox;

package/src/atoms/Textbox/Textbox.test.js

@@ -0,0 +1,23 @@
+/* eslint-disable jest/valid-expect */
+import React from "react";
+
+import { expect } from "chai";
+import { shallow } from "enzyme";
+
+import Textbox from "./Textbox";
+
+import Enzyme from "enzyme";
+import Adapter from "enzyme-adapter-react-16";
+Enzyme.configure({ adapter: new Adapter() });
+
+describe("<Textbox/>", () => {
+  it("renders a div with class textbox and a nested input", () => {
+    const wrapper = shallow(<Textbox />);
+    expect(wrapper.find("div.textbox > input")).to.have.a.lengthOf(1);
+  });
+
+  // it("should user the placeholderText prop to apply input placeholder attribute", () => {
+  //   const wrapper = shallow(<Textbox placeholderText="textbox test" />);
+  //   expect(wrapper.find("div.textbox > input").props().placeholder).to.equal("textbox test");
+  // });
+});

package/src/atoms/Textbox/styles.scss

@@ -0,0 +1,14 @@
+@import "../../sass/bootstrap/functions";
+@import "../../sass/bootstrap/variables";
+@import "../../sass/bootstrap/mixins/breakpoints";
+@import "../../sass/bootstrap/bootstrap-grid.scss";
+
+.textbox {
+  & input,
+  textarea {
+    padding: 0.75rem;
+    width: 100%;
+    padding: 7px;
+    font-size: 15px;
+  }
+}

package/src/atoms/Title/Title.js

@@ -0,0 +1,12 @@
+import React from "react";
+import "./styles.scss";
+
+const Title = ({ text, style }) => {
+  return (
+    <span style={style} className="title">
+      {text}
+    </span>
+  );
+};
+
+export default Title;

package/src/atoms/Title/styles.scss

@@ -0,0 +1,6 @@
+.title {
+  font-size: 28px;
+  color: #0e886b;
+  position: relative;
+  font-family: sans-serif;
+}

package/src/atoms/Toggle/Toggle.js

@@ -0,0 +1,13 @@
+import React from "react";
+import "./styles.scss";
+
+const Toggle = ({ round, isChecked, onChange }) => {
+  return (
+    <label className={`switch ${round ? "round" : ""}`}>
+      <input type="checkbox" checked={isChecked} onChange={onChange} />
+      <span className={`slider ${round ? "round" : ""}`}></span>
+    </label>
+  );
+};
+
+export default Toggle;

package/src/atoms/Toggle/styles.scss

@@ -0,0 +1,62 @@
+.switch {
+  position: relative;
+  display: inline-block;
+  width: 60px;
+  height: 33px;
+}
+
+/* Hide default HTML checkbox */
+.switch input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+/* The slider */
+.slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #a78686;
+  background-color: #6e6e78;
+  -webkit-transition: 0.4s;
+  transition: 0.4s;
+}
+
+.slider:before {
+  position: absolute;
+  content: "";
+  height: 26px;
+  width: 26px;
+  left: 4px;
+  bottom: 4px;
+  background-color: white;
+  -webkit-transition: 0.4s;
+  transition: 0.4s;
+}
+
+input:checked + .slider {
+  background-color: #29ab8c;
+}
+
+input:focus + .slider {
+  box-shadow: 0 0 1px #29ab8c;
+}
+
+input:checked + .slider:before {
+  -webkit-transform: translateX(26px);
+  -ms-transform: translateX(26px);
+  transform: translateX(26px);
+}
+
+/* Rounded sliders */
+.slider.round {
+  border-radius: 34px;
+}
+
+.slider.round:before {
+  border-radius: 50%;
+}

package/src/atoms/TypeSelector/TypeSelector.js

@@ -0,0 +1,28 @@
+import React from "react";
+import "./styles.scss";
+import Selector from "../Selector/Selector";
+const options = [
+  "string",
+  "number",
+  "date",
+  "boolean",
+  "object",
+  "array",
+  "undefined",
+  "null",
+  "target",
+];
+
+const TypeSelector = ({ default_type = "undefined", onSelect, className = "" }) => {
+  const class_name = "type-selector";
+  return (
+    <Selector
+      className={`${class_name} ${className}`}
+      options={options}
+      onSelect={onSelect}
+      controlledOption={default_type}
+    />
+  );
+};
+
+export default TypeSelector;

package/src/atoms/TypeSelector/styles.scss

@@ -0,0 +1,9 @@
+.type-selector {
+  color: blue;
+  appearance: none;
+  cursor: pointer;
+  background: none;
+  border: none;
+  outline: none;
+  font-family: "SF Mono", monospace;
+}

package/src/index.css

@@ -0,0 +1,20 @@
+@font-face {
+  font-family: "SF Mono";
+  src: url(./assets/fonts/FontsFree-Net-SFMono-Regular.ttf) format("ttf");
+}
+@font-face {
+  font-family: "Malkor";
+  src: url(./assets/fonts/Malkor-Regular.ttf) format("ttf");
+}
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu",
+    "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: "SF Mono", system-ui, source-code-pro, Menlo, Monaco, Consolas,
+    "Courier New", monospace;
+}

package/src/index.js

@@ -0,0 +1,24 @@
+import React from "react";
+import ReactDOM from "react-dom";
+import "./index.css";
+import App from "./App";
+import reportWebVitals from "./reportWebVitals";
+// import "./assets/fonts/FontsFree-Net-SFMono-Regular.ttf";
+// import "./assets/fonts/Malkor-Regular.ttf";
+import { Client } from "systemlynx";
+
+const url = "http://localhost:3300/systemview/api";
+
+Client.loadService(url).then((SystemViewService) => {
+  ReactDOM.render(
+    <React.StrictMode>
+      <App SystemViewService={SystemViewService} />
+    </React.StrictMode>,
+    document.getElementById("root")
+  );
+});
+
+// If you want to start measuring performance in your app, pass a function
+// to log results (for example: reportWebVitals(console.log))
+// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
+reportWebVitals();

package/src/logo.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3">
+    <g fill="#61DAFB">
+        <path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/>
+        <circle cx="420.9" cy="296.5" r="45.7"/>
+        <path d="M520.5 78.1z"/>
+    </g>
+</svg>

package/src/molecules/Args/Args.js

@@ -0,0 +1,302 @@
+import React, { useState } from "react";
+import moment from "moment";
+import ReactJson from "react-json-view";
+import JsonTextBox from "../../atoms/JsonTextBox/JsonTextBox";
+import ExpandableIcon from "../../atoms/ExpandableIcon/ExpandableIcon";
+import TypeSelector from "../../atoms/TypeSelector/TypeSelector";
+import TargetSelector from "../TargetSelector/TargetSelector";
+import Toggle from "../../atoms/Toggle/Toggle";
+import { getType, defaultValue } from "../ValidationInput/validator";
+import "./styles.scss";
+const className = "args";
+const Args = ({ args, controller, testIndex, locked }) => {
+  const add = () => controller.addArg(testIndex);
+
+  return (
+    <>
+      {args.length > 0 ? (
+        <div className={`${className}`}>
+          {args.map((arg, i) => (
+            <ArgData
+              key={i}
+              arg={arg}
+              testIndex={testIndex}
+              i={i}
+              controller={controller}
+              locked={locked}
+            />
+          ))}
+        </div>
+      ) : (
+        ""
+      )}
+      {locked ? (
+        ""
+      ) : (
+        <span className={`${className}__add-btn btn`} onClick={add}>
+          +
+        </span>
+      )}
+    </>
+  );
+};
+const ArgData = ({ arg, testIndex, i, controller, locked }) => {
+  const { name, input_type } = arg;
+  const [isOpen, setOpen] = useState(true);
+  const showData = () => {
+    setOpen(!isOpen);
+  };
+  const inputTypeChanged = (e) => {
+    arg.input_type = e.target.value;
+    arg.input = defaultValue(arg.input_type);
+    controller.checkTargetValues(testIndex, i, 0);
+    if (arg.input_type === "target")
+      controller.addTargetValue(testIndex, i, "", ["input"], 0);
+    controller.editArg(testIndex, i, arg);
+  };
+
+  const deleteArg = () => {
+    controller.deleteArg(testIndex, i);
+  };
+
+  const is12 =
+    input_type === "object" ||
+    input_type === "array" ||
+    input_type === "string" ||
+    input_type === "date" ||
+    input_type === "target";
+  return !isOpen ? (
+    <div className={`${className}__name-display`}>
+      <ArgName name={name} isOpen={isOpen} showData={showData} />
+    </div>
+  ) : (
+    <div className={`${className}__data container`} key={i}>
+      <div className={`row no-gutters justify-content-start align-items-center`}>
+        <div className={`col`}>
+          <div className={`${className}__from-container`}>
+            <ArgName name={name} isOpen={isOpen} showData={showData} />
+          </div>
+        </div>
+        <div className={`col`}>
+          <div className={`${className}__type`}>
+            <TypeSelector default_type={input_type} onSelect={inputTypeChanged} />
+          </div>
+        </div>
+        <div className={`col${!is12 ? -0 : ""}`}></div>
+        <div className={`col${is12 ? -12 : ""}`}>
+          <ArgDataForm
+            arg={arg}
+            i={i}
+            testIndex={testIndex}
+            controller={controller}
+            is12={is12}
+          />
+        </div>
+      </div>
+      {locked ? (
+        ""
+      ) : (
+        <span
+          className={`${className}__data__delete-btn btn delete-btn`}
+          onClick={deleteArg}
+        >
+          x
+        </span>
+      )}
+    </div>
+  );
+};
+const ArgName = ({ name, isOpen, showData }) => {
+  return (
+    <div className={`${className}__name`}>
+      <ExpandableIcon
+        isOpen={isOpen}
+        ClassName={`${className}__expand-btn`}
+        onClick={showData}
+      />{" "}
+      {/* <span className={`${className}__name__text`}>{name + ""}</span> */}
+    </div>
+  );
+};
+const ArgDataForm = ({ arg, testIndex, i, controller, is12 }) => {
+  const { input, input_type, targetValues } = arg;
+  const [jsonBoxVisible, setJsonBoxVisible] = useState(false);
+  const showJsonTxb = () => setJsonBoxVisible(true);
+  const hideJsonTxb = () => setJsonBoxVisible(false);
+  const inputChanged = (e) => {
+    if (e.target.type === "number") arg.input = parseInt(e.target.value);
+    else if (e.target.type === "checkbox") arg.input = e.target.checked;
+    else arg.input = e.target.value;
+    controller.editArg(testIndex, i, arg);
+  };
+  const jsonTextboxSubmit = (new_object) => {
+    arg.input = new_object;
+    controller.editArg(testIndex, i, arg);
+    controller.checkTargetValues(testIndex, i);
+    hideJsonTxb();
+  };
+  const jsonObjectSubmit = ({ updated_src, namespace, name, new_value }) => {
+    jsonTextboxSubmit(updated_src || {});
+    const source_map = namespace;
+    source_map.push(name);
+    source_map.unshift("input");
+    if (typeof new_value === "string")
+      controller.parseTargetValues(testIndex, i, new_value, source_map);
+    else controller.checkTargetValues(testIndex, i);
+  };
+
+  const adjustSize = (e) => {
+    const new_lines = e.target.value.length / 38;
+    const new_height = Math.min(33 + new_lines * 18, 320);
+    e.target.style.height = `${new_height}px`;
+  };
+
+  const textboxChanged = (e) => {
+    //adjustSize(e);
+    inputChanged(e);
+    controller.parseTargetValues(testIndex, i, e.target.value, ["input"]);
+  };
+  return (
+    <div className={`${className}__form ${is12 ? className + "__form--is12" : ""}`}>
+      {input_type === "undefined" || input_type === "null" ? (
+        <span className={`${className}__form__${input_type}`}>{input + ""}</span>
+      ) : input_type === "string" ? (
+        <div className={`textbox`}>
+          <textarea
+            className={`${className}__form__input ${className}__form__input--${input_type}`}
+            value={input}
+            onChange={textboxChanged}
+            onFocus={adjustSize}
+          />
+          <ArgValue value={arg.value()} hide={!targetValues.length} />
+        </div>
+      ) : input_type === "number" ? (
+        <div className={`textbox`}>
+          <input
+            className={`${className}__form__input ${className}__form__input--${input_type}`}
+            type={input_type}
+            name="arg-input"
+            autoComplete="off"
+            value={input}
+            onChange={inputChanged}
+          />
+        </div>
+      ) : input_type === "boolean" ? (
+        <div className="row justify-content-around">
+          <Toggle isChecked={input} onChange={inputChanged} round={true} />{" "}
+          <span
+            className={`${className}__form__value--boolean ${className}__form__value--boolean--${input}`}
+          >
+            {(input === true) + ""}
+          </span>
+        </div>
+      ) : input_type === "date" ? (
+        <input
+          className={`${className}__form__input ${className}__form__input--${input_type}`}
+          type={"datetime-local"}
+          name="arg-input"
+          autoComplete="off"
+          value={input}
+          onChange={inputChanged}
+        />
+      ) : input_type === "object" || input_type === "array" ? (
+        <span className={`${className}__form__${input_type}`}>
+          <div
+            className={`${className}__json-txb ${className}__json-txb--show-${jsonBoxVisible}`}
+          >
+            <JsonTextBox
+              onSubmit={jsonTextboxSubmit}
+              onCancel={hideJsonTxb}
+              obj={input}
+            />
+          </div>
+          <ReactJson
+            src={input}
+            name={false}
+            onAdd={jsonObjectSubmit}
+            onEdit={jsonObjectSubmit}
+            onDelete={jsonObjectSubmit}
+            displayObjectSize={false}
+            displayDataTypes={false}
+            collapsed={true}
+          />
+          <ArgValue value={arg.value()} hide={!targetValues.length} />
+          <span
+            className={`${className}__add-json-btn btn ${className}__json-txb--show-${!jsonBoxVisible}`}
+            onClick={showJsonTxb}
+          >
+            +JSON
+          </span>
+        </span>
+      ) : input_type === "target" ? (
+        ((value) => (
+          <div className={`${className}__form__${input_type}`}>
+            <TargetSelector
+              controller={controller}
+              target_namespace={targetValues[0].target_namespace}
+              testIndex={testIndex}
+              arg_index={i}
+              target_index={0}
+              className={`${className}__form__input ${className}__form__input--${input_type}`}
+            />
+            <ArgValue value={value} hide={!targetValues.length} />
+          </div>
+        ))(arg.value())
+      ) : (
+        <span className={`${className}__value`}>{input + ""}</span>
+      )}
+    </div>
+  );
+};
+
+export function Argument({ value }) {
+  const data_type = getType(value);
+  return (
+    <>
+      {data_type === "undefined" || data_type === "null" ? (
+        <span className={`${className}__value__${data_type}`}>{value + ""}</span>
+      ) : data_type === "string" ? (
+        <span className={`${className}__value__${data_type}`}>
+          <span className={`${className}__quote`}>"</span>
+          {value}
+          <span className={`${className}__quote`}>"</span>
+        </span>
+      ) : data_type === "number" ? (
+        <span className={`${className}__value__${data_type}`}>{value + ""}</span>
+      ) : data_type === "boolean" ? (
+        <span
+          className={`${className}__value__${data_type} ${className}__value__${data_type}--${
+            value + ""
+          }`}
+        >
+          {(value === true) + ""}
+        </span>
+      ) : data_type === "date" ? (
+        <span className={`${className}__value__${data_type}`}>
+          {moment(value).format() + ""}
+        </span>
+      ) : data_type === "object" || data_type === "array" ? (
+        <span className={`${className}__value__${data_type}`}>
+          <ReactJson
+            src={value}
+            name={false}
+            displayObjectSize={false}
+            displayDataTypes={false}
+            collapsed={true}
+          />
+        </span>
+      ) : (
+        <span className={`${className}__value__${data_type}`}>{value + ""}</span>
+      )}
+    </>
+  );
+}
+const ArgValue = (props) => {
+  return (
+    <div className={`${className}__value ${props.hide && className + "__value--hide"}`}>
+      <Argument {...props} />
+    </div>
+  );
+};
+
+export default Args;