Add New Component : <Stringbuilder /> (#167)

TICKET : https://tyktech.atlassian.net/browse/TT-795
Implementation On Dashboard : https://github.com/TykTechnologies/tyk-analytics-ui/pull/2326/files
Wireframes : https://www.figma.com/file/piccRN0fmtea7M0HKgc44j/UDG---URL-Query-Builder?node-id=73%3A17
Component Description
Introducing the new component <StringBuilder /> to tyk-ui component library.
String builder is a form component used to build one single string using the options given by the user.
This component can be useful from UX perspective, when user needs to build any string which might contain complex values which are error prone.
<StringBuilder /> abstracts the complex values by supplying them as selectable options in more user friendly format with description/documentation for user.
Architectural Explaination
String builder mainly consists of following subcomponents

<StringInput />
Used to accept input from user and triggers option list when a special character is detected.
<TokenizedString />
TokenizedString is layered component which is perfectly aligned with <StringInput />.
Tokenized string is used to highlight the special tokens which are present in the options also used to highlight the invalid tokens based of the regex passed by the user
<OptionsList />
Is basically the floating container used to render the list of options supplied (with search functionality) by user and most of the styles are inspired (actually copied) from Cobobox2 (big thanks to @ifrim)
<StringBuilderFooter />
Used to render the default note that instructs user how to trigger dropdown based on the trigger and also used to render note and error message

lib/logo/index.js

@@ -9,8 +9,8 @@ const Logo = () => {
       href="https://github.com/TykTechnologies/tyk-ui"
       target="_blank"
     >
-      <span className="rsg-logo-name">Tyk-UI</span>
-      <em className="rsg-logo-version">v.{version}</em>
+      <img src="#" width="190px" height="62px"/>
+      {"_________"}<em className="rsg-logo-version">v.{version}</em>{"_________"}
     </a>
   );
 };

lib/sass/common/sass/components.scss

@@ -38,4 +38,5 @@
 @import '../../form/components/Select//sass//Select';
 @import '../../form/components/SelectableList/sass/SelectableList';
 @import '../../form/components/Textarea/sass/Textarea';
-@import '../../form/components/Toggle/sass/Toggle';
+@import '../../form/components/Toggle/sass/Toggle';
+@import '../../form/components/StringBuilder/sass/Stringbuilder';

lib/sass/components/StringBuilder/sass/Stringbuilder.scss

@@ -0,0 +1,150 @@
+@import '../../../common/sass/variables';
+
+.string-builder{
+  position: relative;
+  // overflow: auto;
+  display: block;
+}
+
+.string-builder__input {
+  word-break: break-all;
+  resize: none;
+  overflow: hidden;
+  background:transparent;
+  position: absolute;
+  border: none;
+  font: inherit;
+  display: block;
+  z-index: 1;
+  width: 100%;
+  padding: 0px;
+  width: calc(100% - 35px);
+  &:focus,
+  &:active {
+    border: none;
+    outline: none;
+  }
+}
+.string-builder__styled {
+  font: inherit;
+  position: absolute;
+  pointer-events: none;
+  width: calc(100% - 35px);
+  // width: 100%;
+  // top: calc(100% - 26px); // INPUT
+  // top: calc(100% - -2px); // TA
+  // left: 2px; // TA
+  // left: 24px; // INPUT
+  color: transparent;
+  z-index: 2;
+  // white-space: pre;
+  border: none;
+  word-wrap: break-word;
+  word-break: break-all;
+
+}
+
+
+
+.url-builder__options_name {
+  font-weight: 10px;
+}
+
+.url-builder__options_description{
+  color: gray;
+}
+
+.string-builder-dropdown {
+  display: flex;
+  flex-direction: column;
+  border: $general-border-width solid $form-default-color;
+  background-color: white;
+
+  &.tyk-form-group--rounded-corners {
+    border-radius: $general-border-radius;
+  }
+
+  .string-builder-search {
+    background-color: white;
+    position: sticky;
+    top: 0;
+    padding: map-get($spacing, 'sm') map-get($spacing, 'md');
+
+    + .string-builder-list {
+      border-top: 1px solid $form-default-color;
+    }
+  }
+
+  .string-builder-list {
+    max-height: 255px;
+
+    li {
+      // display: flex;
+      cursor: pointer;
+      padding: 9px map-get($spacing, 'md');
+      transition: all .2s;
+      font-family: $font-family-medium;
+
+      &:hover,
+      &.active {
+        background-color: $form-default-color;
+      }
+
+      &.disabled {
+        color: red; 
+        background-color: red;
+      }
+
+      + li {
+        border-top: 1px solid $form-default-color;
+      }
+
+      i {
+        margin-right: map-get($spacing, 'xs');
+      }
+
+      .item-name {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        line-height: 16px;
+      }
+    }
+  }
+}
+
+.invalid_token {
+  // border: 1px solid #EA4766;
+  // outline: 1px solid #EA4766;
+  // outline-style: auto;
+  box-shadow: 0px 0px 0px 1px #EA4766 inset;
+  border-radius: 5px;
+  pointer-events: all;
+  background: #FFBBC5;
+  color: #EA4766;
+  padding: 3px 0px;
+  .invalid_token--icon {
+    margin-left: 2px;
+    color: #EA4766;
+  }
+}
+
+.string-builder-footer {
+  margin-top: 30px;
+}
+
+.string-builder-search {
+  padding-right: 10px;
+}
+
+.default-option-name {
+  color: green;
+}
+
+
+// TODO :: Remove This 
+.data_source_argument {
+  color: pink;
+}
+.data_source_object {
+  color: blueviolet;
+}

lib/sass/form/components/StringBuilder/sass/Stringbuilder.scss

@@ -0,0 +1,151 @@
+@import '../../../../common/sass/variables';
+
+.string-builder{
+  position: relative;
+  display: block;
+}
+
+.string-builder__input {
+  word-break: break-all;
+  resize: none;
+  overflow: hidden;
+  background:transparent;
+  position: absolute;
+  border: none;
+  font: inherit;
+  display: block;
+  z-index: 1;
+  width: 100%;
+  padding: 0px;
+  width: calc(100% - 35px);
+  &:focus,
+  &:active {
+    border: none;
+    outline: none;
+  }
+}
+.string-builder__styled {
+  font: inherit;
+  position: absolute;
+  pointer-events: none;
+  width: calc(100% - 35px);
+  color: transparent;
+  z-index: 2;
+  border: none;
+  word-wrap: break-word;
+  word-break: break-all;
+
+}
+
+.string-builder__disabled{
+  background-color: $form-control-disabled-background-color !important;
+  color: $form-control-disabled-color;
+  cursor: not-allowed;
+}
+
+
+.url-builder__options_name {
+  font-weight: 10px;
+}
+
+.url-builder__options_description{
+  color: gray;
+}
+
+.string-builder-dropdown {
+  display: flex;
+  flex-direction: column;
+  border: $general-border-width solid $form-default-color;
+  background-color: #ffffff;
+
+  &.tyk-form-group--rounded-corners {
+    border-radius: $general-border-radius;
+  }
+
+  .string-builder-search {
+    background-color: #ffffff;
+    position: sticky;
+    top: 0;
+    padding: map-get($spacing, 'sm') map-get($spacing, 'md');
+
+    + .string-builder-list {
+      border-top: 1px solid $form-default-color;
+    }
+  }
+
+  .string-builder-list {
+    max-height: 255px;
+
+    li {
+      cursor: pointer;
+      padding: 9px map-get($spacing, 'md');
+      transition: all .2s;
+      font-family: $font-family-medium;
+
+      &:hover,
+      &.active {
+        background-color: $form-default-color;
+      }
+
+      + li {
+        border-top: 1px solid $form-default-color;
+      }
+
+      i {
+        margin-right: map-get($spacing, 'xs');
+      }
+
+      .item-name {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        line-height: 16px;
+      }
+    }
+  }
+}
+
+.invalid_token {
+  box-shadow: 0px 0px 0px 1px theme-color('danger', 'dark') inset;
+  border-radius: 5px;
+  background: theme-color('danger', 'light');
+  color: theme-color('danger', 'dark');
+  padding: 4px;
+  pointer-events: all;
+  .invalid_token--icon {
+    margin-left: 2px;
+    color: theme-color('danger', 'dark');
+  }
+}
+
+.string_builder_trigger {
+  background-color: #ffffff;
+  border-radius: 5px;
+  padding: 1px 6px;
+  margin: 0px 4px;
+}
+
+.string-builder-footer {
+  > .tyk-form-control__error-message {
+    padding: 0px !important;
+  }
+  > .tyk-form-control__help-block{
+    padding: 0px !important;
+  }
+}
+
+.string-builder-search {
+  padding-right: 10px;
+}
+
+.default-option-name {
+  color: green;
+}
+
+
+// NOTE :: FOR DEMO ONLY
+.data_source_argument {
+  color: pink;
+}
+.data_source_object {
+  color: blueviolet;
+}

src/common/sass/components.scss

@@ -38,4 +38,5 @@
 @import '../../form/components/Select//sass//Select';
 @import '../../form/components/SelectableList/sass/SelectableList';
 @import '../../form/components/Textarea/sass/Textarea';
-@import '../../form/components/Toggle/sass/Toggle';
+@import '../../form/components/Toggle/sass/Toggle';
+@import '../../form/components/StringBuilder/sass/Stringbuilder';

src/components/FloatingContainer/index.js

@@ -34,7 +34,8 @@ function FloatingContainer(props) {
      */
     displayAxis = 'vertical',
     /**
-     * The distance between the element and the floating container. It can be positive or negative.
+     * The distance between the element and the floating container.
+     * It can be positive or negative.
      */
     offset = 0,
     className,

src/form/components/Combobox2/index.js

@@ -67,7 +67,8 @@ function Combobox2(props) {
     renderListItem,
     /** A custom component that will be used to display the entire content of the dropdown. */
     renderList: renderListProp,
-    /** Alias for `renderList` used for backwards compatibility with the old Combobox component. */
+    /** Alias for `renderList`
+     * used for backwards compatibility with the old Combobox component. */
     CustomListComponent,
     onChange = () => {},
     /** Config object passed to the internal floating container component. */

src/form/components/StringBuilder/Readme.md

@@ -0,0 +1,43 @@
+```jsx
+
+<StringBuilder
+  allowSearch
+  // disabled
+  // error="you have an error"
+  label="URL Builder"
+  // value="http://helloWorld.com/{{.object.name}}/{id}/asasd/{{.object.location}}"
+  // value="http://helloWorld.com/{{.object.name}}/{name}/asdka/{id}"
+  value="https://petstore.swagger.io/v2/pet/{{.arguments.id}}"
+  placeholder="Please enter your url"
+  onChange={(v) => console.log("Value", {v})}
+  theme="default rounded-corners"
+  dropdownTriggerKey="{"
+  invalidTokenRegex={/({\w.*?\w})/g}
+  options={[
+  {
+    "id": "{{.arguments.id}}",
+    "name": "userId",
+    "desc": "Argument userId",
+    "className": "data_source_argument"
+  },
+  // {
+  //   "id": "{{.object.name}}",
+  //   "name": "name",
+  //   "desc": "name of type User",
+  //   "className": "data_source_object"
+  // },
+  // {
+  //   "id": "{{.object.location}}",
+  //   "name": "location",
+  //   "desc": "location of type User",
+  //   "className": "data_source_object"
+  // },
+  // {
+  //   "id": "{{.object.pin}}",
+  //   "name": "pin",
+  //   "desc": "pin of type User",
+  //   "className": "data_source_object"
+  // }
+]}
+/>
+```