Merge branch 'master' of gitlab.com:mobtools/internal-tools-client into feature/button

# Conflicts:
#	src/constants/WidgetConstants.tsx
#	src/mockResponses/CanvasResponse.ts
#	src/utils/WidgetRegistry.tsx

app/client/package-lock.json

@@ -1339,6 +1339,11 @@
       "resolved": "https://registry.npmjs.org/abab/-/abab-2.0.0.tgz",
       "integrity": "sha512-sY5AXXVZv4Y1VACTtR11UJCPHHudgY5i26Qj5TypE6DKlIApbwb5uqhXcJ5UUGbvZNRh7EeIoW+LrJumBsKp7w=="
     },
+    "abbrev": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz",
+      "integrity": "sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q=="
+    },
     "accepts": {
       "version": "1.3.5",
       "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.5.tgz",
@@ -1418,6 +1423,11 @@
       "resolved": "https://registry.npmjs.org/alphanum-sort/-/alphanum-sort-1.0.2.tgz",
       "integrity": "sha1-l6ERlkmyEa0zaR2fn0hqjsn74KM="
     },
+    "amdefine": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/amdefine/-/amdefine-1.0.1.tgz",
+      "integrity": "sha1-SlKCrBZHKek2Gbz9OtFR+BfOkfU="
+    },
     "ansi-colors": {
       "version": "3.2.3",
       "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-3.2.3.tgz",
@@ -1731,6 +1741,15 @@
       "resolved": "https://registry.npmjs.org/aproba/-/aproba-1.2.0.tgz",
       "integrity": "sha512-Y9J6ZjXtoYh8RnXVCMOU/ttDmk1aBjunq9vO0ta5x85WDQiQfUF9sIPBITdbiiIVcBo03Hi3jMxigBtsddlXRw=="
     },
+    "are-we-there-yet": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/are-we-there-yet/-/are-we-there-yet-1.1.5.tgz",
+      "integrity": "sha512-5hYdAkZlcG8tOLujVDTgCT+uPX0VnpAH28gWsLfzpXYm7wP6mp5Q/gYyR7YQ0cKVJcXJnl3j2kpBan13PtQf6w==",
+      "requires": {
+        "delegates": "^1.0.0",
+        "readable-stream": "^2.0.6"
+      }
+    },
     "argparse": {
       "version": "1.0.10",
       "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz",
@@ -1776,6 +1795,11 @@
       "resolved": "https://registry.npmjs.org/array-filter/-/array-filter-0.0.1.tgz",
       "integrity": "sha1-fajPLiZijtcygDWB/SH2fKzS7uw="
     },
+    "array-find-index": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/array-find-index/-/array-find-index-1.0.2.tgz",
+      "integrity": "sha1-3wEKoSh+Fku9pvlyOwqWoexBh6E="
+    },
     "array-flatten": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-2.1.2.tgz",
@@ -1902,6 +1926,11 @@
       "resolved": "https://registry.npmjs.org/async-each/-/async-each-1.0.1.tgz",
       "integrity": "sha1-GdOGodntxufByF04iu28xW0zYC0="
     },
+    "async-foreach": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/async-foreach/-/async-foreach-0.1.3.tgz",
+      "integrity": "sha1-NhIfhFwFeBct5Bmpfb6x0W7DRUI="
+    },
     "async-limiter": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/async-limiter/-/async-limiter-1.0.0.tgz",
@@ -2572,6 +2601,14 @@
       "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-1.12.0.tgz",
       "integrity": "sha512-DYWGk01lDcxeS/K9IHPGWfT8PsJmbXRtRd2Sx72Tnb8pcYZQFF1oSDb8hJtS1vhp212q1Rzi5dUf9+nq0o9UIg=="
     },
+    "block-stream": {
+      "version": "0.0.9",
+      "resolved": "https://registry.npmjs.org/block-stream/-/block-stream-0.0.9.tgz",
+      "integrity": "sha1-E+v+d4oDIFz+A3UUgeu0szAMEmo=",
+      "requires": {
+        "inherits": "~2.0.0"
+      }
+    },
     "bluebird": {
       "version": "3.5.3",
       "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.5.3.tgz",
@@ -2904,6 +2941,22 @@
       "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.0.0.tgz",
       "integrity": "sha512-faqwZqnWxbxn+F1d399ygeamQNy3lPp/H9H6rNrqYh4FSVCtcY+3cub1MxA8o9mDd55mM8Aghuu/kuyYA6VTsA=="
     },
+    "camelcase-keys": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/camelcase-keys/-/camelcase-keys-2.1.0.tgz",
+      "integrity": "sha1-MIvur/3ygRkFHvodkyITyRuPkuc=",
+      "requires": {
+        "camelcase": "^2.0.0",
+        "map-obj": "^1.0.0"
+      },
+      "dependencies": {
+        "camelcase": {
+          "version": "2.1.1",
+          "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-2.1.1.tgz",
+          "integrity": "sha1-fB0W1nmhu+WcoCys7PsBHiAfWh8="
+        }
+      }
+    },
     "caniuse-api": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-3.0.0.tgz",
@@ -3387,6 +3440,11 @@
         "date-now": "^0.1.4"
       }
     },
+    "console-control-strings": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz",
+      "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4="
+    },
     "constants-browserify": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/constants-browserify/-/constants-browserify-1.0.0.tgz",
@@ -3963,6 +4021,14 @@
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.2.tgz",
       "integrity": "sha512-Rl7PvTae0pflc1YtxtKbiSqq20Ts6vpIYOD5WBafl4y123DyHUeLrRdQP66sQW8/6gmX8jrYJLXwNeMqYVJcow=="
     },
+    "currently-unhandled": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/currently-unhandled/-/currently-unhandled-0.4.1.tgz",
+      "integrity": "sha1-mI3zP+qxke95mmE2nddsF635V+o=",
+      "requires": {
+        "array-find-index": "^1.0.1"
+      }
+    },
     "cyclist": {
       "version": "0.2.2",
       "resolved": "https://registry.npmjs.org/cyclist/-/cyclist-0.2.2.tgz",
@@ -4161,6 +4227,11 @@
       "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
       "integrity": "sha1-3zrhmayt+31ECqrgsp4icrJOxhk="
     },
+    "delegates": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz",
+      "integrity": "sha1-hMbhWbgZBP3KWaDvRM2HDTElD5o="
+    },
     "depd": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz",
@@ -6050,7 +6121,8 @@
         },
         "ansi-regex": {
           "version": "2.1.1",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "aproba": {
           "version": "1.2.0",
@@ -6068,11 +6140,13 @@
         },
         "balanced-match": {
           "version": "1.0.0",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "brace-expansion": {
           "version": "1.1.11",
           "bundled": true,
+          "optional": true,
           "requires": {
             "balanced-match": "^1.0.0",
             "concat-map": "0.0.1"
@@ -6085,15 +6159,18 @@
         },
         "code-point-at": {
           "version": "1.1.0",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "concat-map": {
           "version": "0.0.1",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "console-control-strings": {
           "version": "1.1.0",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "core-util-is": {
           "version": "1.0.2",
@@ -6196,7 +6273,8 @@
         },
         "inherits": {
           "version": "2.0.3",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "ini": {
           "version": "1.3.5",
@@ -6206,6 +6284,7 @@
         "is-fullwidth-code-point": {
           "version": "1.0.0",
           "bundled": true,
+          "optional": true,
           "requires": {
             "number-is-nan": "^1.0.0"
           }
@@ -6218,17 +6297,20 @@
         "minimatch": {
           "version": "3.0.4",
           "bundled": true,
+          "optional": true,
           "requires": {
             "brace-expansion": "^1.1.7"
           }
         },
         "minimist": {
           "version": "0.0.8",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "minipass": {
           "version": "2.2.4",
           "bundled": true,
+          "optional": true,
           "requires": {
             "safe-buffer": "^5.1.1",
             "yallist": "^3.0.0"
@@ -6245,6 +6327,7 @@
         "mkdirp": {
           "version": "0.5.1",
           "bundled": true,
+          "optional": true,
           "requires": {
             "minimist": "0.0.8"
           }
@@ -6317,7 +6400,8 @@
         },
         "number-is-nan": {
           "version": "1.0.1",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "object-assign": {
           "version": "4.1.1",
@@ -6327,6 +6411,7 @@
         "once": {
           "version": "1.4.0",
           "bundled": true,
+          "optional": true,
           "requires": {
             "wrappy": "1"
           }
@@ -6402,7 +6487,8 @@
         },
         "safe-buffer": {
           "version": "5.1.1",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "safer-buffer": {
           "version": "2.1.2",
@@ -6432,6 +6518,7 @@
         "string-width": {
           "version": "1.0.2",
           "bundled": true,
+          "optional": true,
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",
@@ -6449,6 +6536,7 @@
         "strip-ansi": {
           "version": "3.0.1",
           "bundled": true,
+          "optional": true,
           "requires": {
             "ansi-regex": "^2.0.0"
           }
@@ -6487,14 +6575,27 @@
         },
         "wrappy": {
           "version": "1.0.2",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "yallist": {
           "version": "3.0.2",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         }
       }
     },
+    "fstream": {
+      "version": "1.0.11",
+      "resolved": "https://registry.npmjs.org/fstream/-/fstream-1.0.11.tgz",
+      "integrity": "sha1-XB+x8RdHcRTwYyoOtLcbPLD9MXE=",
+      "requires": {
+        "graceful-fs": "^4.1.2",
+        "inherits": "~2.0.0",
+        "mkdirp": ">=0.5 0",
+        "rimraf": "2"
+      }
+    },
     "function-bind": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
@@ -6515,6 +6616,49 @@
         "simple-git": "^1.85.0"
       }
     },
+    "gauge": {
+      "version": "2.7.4",
+      "resolved": "https://registry.npmjs.org/gauge/-/gauge-2.7.4.tgz",
+      "integrity": "sha1-LANAXHU4w51+s3sxcCLjJfsBi/c=",
+      "requires": {
+        "aproba": "^1.0.3",
+        "console-control-strings": "^1.0.0",
+        "has-unicode": "^2.0.0",
+        "object-assign": "^4.1.0",
+        "signal-exit": "^3.0.0",
+        "string-width": "^1.0.1",
+        "strip-ansi": "^3.0.1",
+        "wide-align": "^1.1.0"
+      },
+      "dependencies": {
+        "is-fullwidth-code-point": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz",
+          "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=",
+          "requires": {
+            "number-is-nan": "^1.0.0"
+          }
+        },
+        "string-width": {
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz",
+          "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=",
+          "requires": {
+            "code-point-at": "^1.0.0",
+            "is-fullwidth-code-point": "^1.0.0",
+            "strip-ansi": "^3.0.0"
+          }
+        }
+      }
+    },
+    "gaze": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/gaze/-/gaze-1.1.3.tgz",
+      "integrity": "sha512-BRdNm8hbWzFzWHERTrejLqwHDfS4GibPoq5wjTPIoJHoBtKGPg3xAFfxmM+9ztbXelxcf2hwQcaz1PtmFeue8g==",
+      "requires": {
+        "globule": "^1.0.0"
+      }
+    },
     "get-caller-file": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-1.0.3.tgz",
@@ -6636,6 +6780,16 @@
         }
       }
     },
+    "globule": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/globule/-/globule-1.2.1.tgz",
+      "integrity": "sha512-g7QtgWF4uYSL5/dn71WxubOrS7JVGCnFPEnoeChJmBnyR9Mw8nGoEwOgJL/RC2Te0WhbsEUCejfH8SZNJ+adYQ==",
+      "requires": {
+        "glob": "~7.1.1",
+        "lodash": "~4.17.10",
+        "minimatch": "~3.0.2"
+      }
+    },
     "graceful-fs": {
       "version": "4.1.15",
       "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.1.15.tgz",
@@ -6783,6 +6937,11 @@
       "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.0.tgz",
       "integrity": "sha1-uhqPGvKg/DllD1yFA2dwQSIGO0Q="
     },
+    "has-unicode": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/has-unicode/-/has-unicode-2.0.1.tgz",
+      "integrity": "sha1-4Ob+aijPUROIVeCG0Wkedx3iqLk="
+    },
     "has-value": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/has-value/-/has-value-1.0.0.tgz",
@@ -7582,6 +7741,11 @@
       "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz",
       "integrity": "sha1-khi5srkoojixPcT7a21XbyMUU+o="
     },
+    "in-publish": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/in-publish/-/in-publish-2.0.0.tgz",
+      "integrity": "sha1-4g/146KvwmkDILbcVSaCqcf631E="
+    },
     "indent-string": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-3.2.0.tgz",
@@ -8657,6 +8821,11 @@
         "topo": "2.x.x"
       }
     },
+    "js-base64": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.5.1.tgz",
+      "integrity": "sha512-M7kLczedRMYX4L8Mdh4MzyAMM9O5osx+4FcOQuTvr3A9F2D9S5JXheN0ewNbrvK2UatkTRhL5ejGmGSjNMiZuw=="
+    },
     "js-levenshtein": {
       "version": "1.1.6",
       "resolved": "https://registry.npmjs.org/js-levenshtein/-/js-levenshtein-1.1.6.tgz",
@@ -9411,11 +9580,21 @@
       "resolved": "https://registry.npmjs.org/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz",
       "integrity": "sha1-DM8tiRZq8Ds2Y8eWU4t1rG4RTZ0="
     },
+    "lodash.assign": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/lodash.assign/-/lodash.assign-4.2.0.tgz",
+      "integrity": "sha1-DZnzzNem0mHRm9rrkkUAXShYCOc="
+    },
     "lodash.camelcase": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz",
       "integrity": "sha1-soqmKIorn8ZRA1x3EfZathkDMaY="
     },
+    "lodash.clonedeep": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz",
+      "integrity": "sha1-4j8/nE+Pvd6HJSnBBxhXoIblzO8="
+    },
     "lodash.debounce": {
       "version": "4.0.8",
       "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
@@ -9426,6 +9605,11 @@
       "resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz",
       "integrity": "sha1-vMbEmkKihA7Zl/Mj6tpezRguC/4="
     },
+    "lodash.mergewith": {
+      "version": "4.6.1",
+      "resolved": "https://registry.npmjs.org/lodash.mergewith/-/lodash.mergewith-4.6.1.tgz",
+      "integrity": "sha512-eWw5r+PYICtEBgrBE5hhlT6aAa75f411bgDz/ZL2KZqYV03USvucsxcHUIlGTDTECs1eunpI7HOV7U+WLDvNdQ=="
+    },
     "lodash.sortby": {
       "version": "4.7.0",
       "resolved": "https://registry.npmjs.org/lodash.sortby/-/lodash.sortby-4.7.0.tgz",
@@ -9513,6 +9697,15 @@
         "js-tokens": "^3.0.0 || ^4.0.0"
       }
     },
+    "loud-rejection": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/loud-rejection/-/loud-rejection-1.6.0.tgz",
+      "integrity": "sha1-W0b4AUft7leIcPCG0Eghz5mOVR8=",
+      "requires": {
+        "currently-unhandled": "^0.4.1",
+        "signal-exit": "^3.0.0"
+      }
+    },
     "lower-case": {
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-1.1.4.tgz",
@@ -9568,6 +9761,11 @@
       "resolved": "https://registry.npmjs.org/map-cache/-/map-cache-0.2.2.tgz",
       "integrity": "sha1-wyq9C9ZSXZsFFkW7TyasXcmKDb8="
     },
+    "map-obj": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/map-obj/-/map-obj-1.0.1.tgz",
+      "integrity": "sha1-2TPOuSBdgr3PSIb2dCvcK03qFG0="
+    },
     "map-visit": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/map-visit/-/map-visit-1.0.0.tgz",
@@ -9631,6 +9829,23 @@
         "readable-stream": "^2.0.1"
       }
     },
+    "meow": {
+      "version": "3.7.0",
+      "resolved": "https://registry.npmjs.org/meow/-/meow-3.7.0.tgz",
+      "integrity": "sha1-cstmi0JSKCkKu/qFaJJYcwioAfs=",
+      "requires": {
+        "camelcase-keys": "^2.0.0",
+        "decamelize": "^1.1.2",
+        "loud-rejection": "^1.0.0",
+        "map-obj": "^1.0.1",
+        "minimist": "^1.1.3",
+        "normalize-package-data": "^2.3.4",
+        "object-assign": "^4.0.1",
+        "read-pkg-up": "^1.0.1",
+        "redent": "^1.0.0",
+        "trim-newlines": "^1.0.0"
+      }
+    },
     "merge": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/merge/-/merge-1.2.1.tgz",
@@ -9866,8 +10081,7 @@
     "nan": {
       "version": "2.12.1",
       "resolved": "https://registry.npmjs.org/nan/-/nan-2.12.1.tgz",
-      "integrity": "sha512-JY7V6lRkStKcKTvHO5NVSQRv+RV+FIL5pvDoLiAtSL9pKlC5x9PKQcZDsq7m4FO4d57mkhC6Z+QhAh3Jdk5JFw==",
+      "integrity": "sha512-JY7V6lRkStKcKTvHO5NVSQRv+RV+FIL5pvDoLiAtSL9pKlC5x9PKQcZDsq7m4FO4d57mkhC6Z+QhAh3Jdk5JFw=="
-      "optional": true
     },
     "nanomatch": {
       "version": "1.2.13",
@@ -9946,6 +10160,32 @@
       "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-0.7.5.tgz",
       "integrity": "sha512-MmbQJ2MTESTjt3Gi/3yG1wGpIMhUfcIypUCGtTizFR9IiccFwxSpfp0vtIZlkFclEqERemxfnSdZEMR9VqqEFQ=="
     },
+    "node-gyp": {
+      "version": "3.8.0",
+      "resolved": "https://registry.npmjs.org/node-gyp/-/node-gyp-3.8.0.tgz",
+      "integrity": "sha512-3g8lYefrRRzvGeSowdJKAKyks8oUpLEd/DyPV4eMhVlhJ0aNaZqIrNUIPuEWWTAoPqyFkfGrM67MC69baqn6vA==",
+      "requires": {
+        "fstream": "^1.0.0",
+        "glob": "^7.0.3",
+        "graceful-fs": "^4.1.2",
+        "mkdirp": "^0.5.0",
+        "nopt": "2 || 3",
+        "npmlog": "0 || 1 || 2 || 3 || 4",
+        "osenv": "0",
+        "request": "^2.87.0",
+        "rimraf": "2",
+        "semver": "~5.3.0",
+        "tar": "^2.0.0",
+        "which": "1"
+      },
+      "dependencies": {
+        "semver": {
+          "version": "5.3.0",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-5.3.0.tgz",
+          "integrity": "sha1-myzl094C0XxgEq0yaqa00M9U+U8="
+        }
+      }
+    },
     "node-int64": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/node-int64/-/node-int64-0.4.0.tgz",
@@ -10007,6 +10247,78 @@
         "semver": "^5.3.0"
       }
     },
+    "node-sass": {
+      "version": "4.11.0",
+      "resolved": "https://registry.npmjs.org/node-sass/-/node-sass-4.11.0.tgz",
+      "integrity": "sha512-bHUdHTphgQJZaF1LASx0kAviPH7sGlcyNhWade4eVIpFp6tsn7SV8xNMTbsQFpEV9VXpnwTTnNYlfsZXgGgmkA==",
+      "requires": {
+        "async-foreach": "^0.1.3",
+        "chalk": "^1.1.1",
+        "cross-spawn": "^3.0.0",
+        "gaze": "^1.0.0",
+        "get-stdin": "^4.0.1",
+        "glob": "^7.0.3",
+        "in-publish": "^2.0.0",
+        "lodash.assign": "^4.2.0",
+        "lodash.clonedeep": "^4.3.2",
+        "lodash.mergewith": "^4.6.0",
+        "meow": "^3.7.0",
+        "mkdirp": "^0.5.1",
+        "nan": "^2.10.0",
+        "node-gyp": "^3.8.0",
+        "npmlog": "^4.0.0",
+        "request": "^2.88.0",
+        "sass-graph": "^2.2.4",
+        "stdout-stream": "^1.4.0",
+        "true-case-path": "^1.0.2"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "2.2.1",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz",
+          "integrity": "sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4="
+        },
+        "chalk": {
+          "version": "1.1.3",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
+          "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
+          "requires": {
+            "ansi-styles": "^2.2.1",
+            "escape-string-regexp": "^1.0.2",
+            "has-ansi": "^2.0.0",
+            "strip-ansi": "^3.0.0",
+            "supports-color": "^2.0.0"
+          }
+        },
+        "cross-spawn": {
+          "version": "3.0.1",
+          "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-3.0.1.tgz",
+          "integrity": "sha1-ElYDfsufDF9549bvE14wdwGEuYI=",
+          "requires": {
+            "lru-cache": "^4.0.1",
+            "which": "^1.2.9"
+          }
+        },
+        "get-stdin": {
+          "version": "4.0.1",
+          "resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-4.0.1.tgz",
+          "integrity": "sha1-uWjGsKBDhDJJAui/Gl3zJXmkUP4="
+        },
+        "supports-color": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
+          "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc="
+        }
+      }
+    },
+    "nopt": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/nopt/-/nopt-3.0.6.tgz",
+      "integrity": "sha1-xkZdvwirzU2zWTF/eaxopkayj/k=",
+      "requires": {
+        "abbrev": "1"
+      }
+    },
     "normalize-package-data": {
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/normalize-package-data/-/normalize-package-data-2.4.0.tgz",
@@ -10067,6 +10379,17 @@
         "which": "^1.2.10"
       }
     },
+    "npmlog": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/npmlog/-/npmlog-4.1.2.tgz",
+      "integrity": "sha512-2uUqazuKlTaSI/dC8AzicUck7+IrEaOnN/e0jd3Xtt1KcGpwx30v50mL7oPyr/h9bL3E4aZccVwpwP+5W9Vjkg==",
+      "requires": {
+        "are-we-there-yet": "~1.1.2",
+        "console-control-strings": "~1.1.0",
+        "gauge": "~2.7.3",
+        "set-blocking": "~2.0.0"
+      }
+    },
     "nth-check": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-1.0.2.tgz",
@@ -10304,6 +10627,15 @@
       "resolved": "https://registry.npmjs.org/os-tmpdir/-/os-tmpdir-1.0.2.tgz",
       "integrity": "sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ="
     },
+    "osenv": {
+      "version": "0.1.5",
+      "resolved": "https://registry.npmjs.org/osenv/-/osenv-0.1.5.tgz",
+      "integrity": "sha512-0CWcCECdMVc2Rw3U5w9ZjqX6ga6ubk1xDVKxtBQPK7wis/0F2r9T6k4ydGYhecl7YUBxBVxhL5oisPsNxAPe2g==",
+      "requires": {
+        "os-homedir": "^1.0.0",
+        "os-tmpdir": "^1.0.0"
+      }
+    },
     "p-defer": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/p-defer/-/p-defer-1.0.0.tgz",
@@ -15003,6 +15335,25 @@
         "minimatch": "3.0.4"
       }
     },
+    "redent": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/redent/-/redent-1.0.0.tgz",
+      "integrity": "sha1-z5Fqsf1fHxbfsggi3W7H9zDCr94=",
+      "requires": {
+        "indent-string": "^2.1.0",
+        "strip-indent": "^1.0.1"
+      },
+      "dependencies": {
+        "indent-string": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-2.1.0.tgz",
+          "integrity": "sha1-ji1INIdCEhtKghi3oTfppSBJ3IA=",
+          "requires": {
+            "repeating": "^2.0.0"
+          }
+        }
+      }
+    },
     "redux": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/redux/-/redux-4.0.1.tgz",
@@ -15706,6 +16057,93 @@
         }
       }
     },
+    "sass-graph": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/sass-graph/-/sass-graph-2.2.4.tgz",
+      "integrity": "sha1-E/vWPNHK8JCLn9k0dq1DpR0eC0k=",
+      "requires": {
+        "glob": "^7.0.0",
+        "lodash": "^4.0.0",
+        "scss-tokenizer": "^0.2.3",
+        "yargs": "^7.0.0"
+      },
+      "dependencies": {
+        "camelcase": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-3.0.0.tgz",
+          "integrity": "sha1-MvxLn82vhF/N9+c7uXysImHwqwo="
+        },
+        "cliui": {
+          "version": "3.2.0",
+          "resolved": "https://registry.npmjs.org/cliui/-/cliui-3.2.0.tgz",
+          "integrity": "sha1-EgYBU3qRbSmUD5NNo7SNWFo5IT0=",
+          "requires": {
+            "string-width": "^1.0.1",
+            "strip-ansi": "^3.0.1",
+            "wrap-ansi": "^2.0.0"
+          }
+        },
+        "is-fullwidth-code-point": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz",
+          "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=",
+          "requires": {
+            "number-is-nan": "^1.0.0"
+          }
+        },
+        "os-locale": {
+          "version": "1.4.0",
+          "resolved": "https://registry.npmjs.org/os-locale/-/os-locale-1.4.0.tgz",
+          "integrity": "sha1-IPnxeuKe00XoveWDsT0gCYA8FNk=",
+          "requires": {
+            "lcid": "^1.0.0"
+          }
+        },
+        "string-width": {
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz",
+          "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=",
+          "requires": {
+            "code-point-at": "^1.0.0",
+            "is-fullwidth-code-point": "^1.0.0",
+            "strip-ansi": "^3.0.0"
+          }
+        },
+        "which-module": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/which-module/-/which-module-1.0.0.tgz",
+          "integrity": "sha1-u6Y8qGGUiZT/MHc2CJ47lgJsKk8="
+        },
+        "yargs": {
+          "version": "7.1.0",
+          "resolved": "https://registry.npmjs.org/yargs/-/yargs-7.1.0.tgz",
+          "integrity": "sha1-a6MY6xaWFyf10oT46gA+jWFU0Mg=",
+          "requires": {
+            "camelcase": "^3.0.0",
+            "cliui": "^3.2.0",
+            "decamelize": "^1.1.1",
+            "get-caller-file": "^1.0.1",
+            "os-locale": "^1.4.0",
+            "read-pkg-up": "^1.0.1",
+            "require-directory": "^2.1.1",
+            "require-main-filename": "^1.0.1",
+            "set-blocking": "^2.0.0",
+            "string-width": "^1.0.2",
+            "which-module": "^1.0.0",
+            "y18n": "^3.2.1",
+            "yargs-parser": "^5.0.0"
+          }
+        },
+        "yargs-parser": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-5.0.0.tgz",
+          "integrity": "sha1-J17PDX/+Bcd+ZOfIbkzZS/DhIoo=",
+          "requires": {
+            "camelcase": "^3.0.0"
+          }
+        }
+      }
+    },
     "sass-loader": {
       "version": "7.1.0",
       "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-7.1.0.tgz",
@@ -15799,6 +16237,25 @@
         "ajv-keywords": "^3.1.0"
       }
     },
+    "scss-tokenizer": {
+      "version": "0.2.3",
+      "resolved": "https://registry.npmjs.org/scss-tokenizer/-/scss-tokenizer-0.2.3.tgz",
+      "integrity": "sha1-jrBtualyMzOCTT9VMGQRSYR85dE=",
+      "requires": {
+        "js-base64": "^2.1.8",
+        "source-map": "^0.4.2"
+      },
+      "dependencies": {
+        "source-map": {
+          "version": "0.4.4",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.4.4.tgz",
+          "integrity": "sha1-66T12pwNyZneaAMti092FzZSA2s=",
+          "requires": {
+            "amdefine": ">=0.0.4"
+          }
+        }
+      }
+    },
     "select-hose": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz",
@@ -16386,6 +16843,14 @@
       "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.4.0.tgz",
       "integrity": "sha512-zhSCtt8v2NDrRlPQpCNtw/heZLtfUDqxBM1udqikb/Hbk52LK4nQSwr10u77iopCW5LsyHpuXS0GnEc48mLeew=="
     },
+    "stdout-stream": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/stdout-stream/-/stdout-stream-1.4.1.tgz",
+      "integrity": "sha512-j4emi03KXqJWcIeF8eIXkjMFN1Cmb8gUlDYGeBALLPo5qdyTfA9bOtl8m33lRoC+vFMkP3gl0WsDr6+gzxbbTA==",
+      "requires": {
+        "readable-stream": "^2.0.1"
+      }
+    },
     "stealthy-require": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/stealthy-require/-/stealthy-require-1.1.1.tgz",
@@ -16527,6 +16992,21 @@
       "resolved": "https://registry.npmjs.org/strip-eof/-/strip-eof-1.0.0.tgz",
       "integrity": "sha1-u0P/VZim6wXYm1n80SnJgzE2Br8="
     },
+    "strip-indent": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/strip-indent/-/strip-indent-1.0.1.tgz",
+      "integrity": "sha1-DHlipq3vp7vUrDZkYKY4VSrhoKI=",
+      "requires": {
+        "get-stdin": "^4.0.1"
+      },
+      "dependencies": {
+        "get-stdin": {
+          "version": "4.0.1",
+          "resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-4.0.1.tgz",
+          "integrity": "sha1-uWjGsKBDhDJJAui/Gl3zJXmkUP4="
+        }
+      }
+    },
     "strip-json-comments": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-2.0.1.tgz",
@@ -16702,6 +17182,16 @@
       "resolved": "https://registry.npmjs.org/tapable/-/tapable-1.1.1.tgz",
       "integrity": "sha512-9I2ydhj8Z9veORCw5PRm4u9uebCn0mcCa6scWoNcbZ6dAtoo2618u9UUzxgmsCOreJpqDDuv61LvwofW7hLcBA=="
     },
+    "tar": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/tar/-/tar-2.2.1.tgz",
+      "integrity": "sha1-jk0qJWwOIYXGsYrWlK7JaLg8sdE=",
+      "requires": {
+        "block-stream": "*",
+        "fstream": "^1.0.2",
+        "inherits": "2"
+      }
+    },
     "terser": {
       "version": "3.14.1",
       "resolved": "https://registry.npmjs.org/terser/-/terser-3.14.1.tgz",
@@ -16951,11 +17441,24 @@
         "punycode": "^2.1.0"
       }
     },
+    "trim-newlines": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/trim-newlines/-/trim-newlines-1.0.0.tgz",
+      "integrity": "sha1-WIeWa7WCpFA6QetST301ARgVphM="
+    },
     "trim-right": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/trim-right/-/trim-right-1.0.1.tgz",
       "integrity": "sha1-yy4SAwZ+DI3h9hQJS5/kVwTqYAM="
     },
+    "true-case-path": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/true-case-path/-/true-case-path-1.0.3.tgz",
+      "integrity": "sha512-m6s2OdQe5wgpFMC+pAJ+q9djG82O2jcHPOI6RNg1yy9rCYR+WD6Nbpl32fDpfC56nirdRy+opFa/Vk7HYhqaew==",
+      "requires": {
+        "glob": "^7.1.2"
+      }
+    },
     "tryer": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/tryer/-/tryer-1.0.1.tgz",
@@ -18139,6 +18642,14 @@
       "resolved": "https://registry.npmjs.org/which-module/-/which-module-2.0.0.tgz",
       "integrity": "sha1-2e8H3Od7mQK4o6j6SzHD4/fm6Ho="
     },
+    "wide-align": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.3.tgz",
+      "integrity": "sha512-QGkOQc8XL6Bt5PwnsExKBPuMKBxnGxWWW3fU55Xt4feHozMUhdUMaBCk290qpm/wG5u/RSKzwdAC4i51YigihA==",
+      "requires": {
+        "string-width": "^1.0.2 || 2"
+      }
+    },
     "wordwrap": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-1.0.0.tgz",

app/client/package.json

@@ -21,6 +21,7 @@
     "husky": "^1.3.1",
     "lint-staged": "^8.1.0",
     "lodash": "^4.17.11",
+    "node-sass": "^4.11.0",
     "prettier": "^1.16.0",
     "react": "^16.7.0",
     "react-dnd": "^7.0.2",

app/client/src/App.tsx

@@ -1,6 +1,7 @@
-import React, { Component } from 'react';
+import React, { Component } from "react";
-import logo from './assets/images/logo.svg';
+import logo from "./assets/images/logo.svg";
-import './App.css';
+import "./App.css";
+import "../node_modules/@blueprintjs/core/src/blueprint.scss";
 
 class App extends Component {
   render() {

app/client/src/constants/WidgetConstants.tsx

@@ -1,10 +1,34 @@
-export type WidgetType = "TEXT_WIDGET" | "IMAGE_WIDGET" | "CONTAINER_WIDGET" | "LIST_WIDGET" | "INPUT_TEXT_WIDGET" | "BUTTON_WIDGET"
+export type WidgetType =
+  | "TEXT_WIDGET"
+  | "IMAGE_WIDGET"
+  | "CONTAINER_WIDGET"
+  | "LIST_WIDGET"
+  | "CALLOUT_WIDGET"
+  | "ICON_WIDGET"
+  | "INPUT_GROUP_WIDGET"
+  | "SPINNER_WIDGET"
+  | "BUTTON_WIDGET"
 export type ContainerOrientation = "HORIZONTAL" | "VERTICAL"
 export type PositionType = "ABSOLUTE" | "CONTAINER_DIRECTION"
-export type CSSUnit = "px" | "cm" | "mm" | "in" | "pt" | "pc" | "em" | "ex" | "ch" | "rem" | "vw" | "vh" | "vmin" | "vmax" | "%"
+export type CSSUnit =
+  | "px"
+  | "cm"
+  | "mm"
+  | "in"
+  | "pt"
+  | "pc"
+  | "em"
+  | "ex"
+  | "ch"
+  | "rem"
+  | "vw"
+  | "vh"
+  | "vmin"
+  | "vmax"
+  | "%"
 
 export const CSSUnits: { [id: string]: CSSUnit } = {
-    PIXEL: "px",
+  PIXEL: "px",
-    RELATIVE_FONTSIZE: "em",
+  RELATIVE_FONTSIZE: "em",
-    RELATIVE_PARENT: "%"
+  RELATIVE_PARENT: "%"
 }

app/client/src/editorComponents/CalloutComponent.tsx

@@ -0,0 +1,30 @@
+import * as React from "react";
+import { IComponentProps } from "./BaseComponent";
+import PositionContainer from "./PositionContainer";
+import { Callout, Intent } from "@blueprintjs/core";
+
+class CalloutComponent extends React.Component<ICalloutComponentProps> {
+  render() {
+    return (
+      <PositionContainer {...this.props}>
+        <Callout
+          {...this.props}
+          title={this.props.title ? this.props.title : undefined}
+          intent={this.props.intent}
+        >
+          {this.props.description}
+        </Callout>
+      </PositionContainer>
+    );
+  }
+}
+
+export interface ICalloutComponentProps extends IComponentProps {
+  id?: string;
+  title?: string;
+  description?: string;
+  intent?: Intent;
+  ellipsize?: boolean;
+}
+
+export default CalloutComponent;

app/client/src/editorComponents/IconComponent.tsx

@@ -0,0 +1,28 @@
+import * as React from "react";
+import { IComponentProps } from "./BaseComponent";
+import { Icon, Intent } from "@blueprintjs/core";
+import { IconName } from "@blueprintjs/icons";
+import PositionContainer from "./PositionContainer";
+
+class IconComponent extends React.Component<IIconComponentProps> {
+  render() {
+    return (
+      <PositionContainer {...this.props}>
+        <Icon
+          icon={this.props.icon}
+          iconSize={this.props.iconSize}
+          intent={this.props.intent}
+        />
+      </PositionContainer>
+    );
+  }
+}
+
+export interface IIconComponentProps extends IComponentProps {
+  iconSize?: number;
+  icon?: IconName;
+  intent?: Intent;
+  ellipsize?: boolean;
+}
+
+export default IconComponent;

app/client/src/editorComponents/InputGroupComponent.tsx

@@ -0,0 +1,44 @@
+import * as React from "react";
+import { IComponentProps } from "./BaseComponent";
+import PositionContainer from "./PositionContainer";
+import { IconName, InputGroup, Intent } from "@blueprintjs/core";
+
+class InputGroupComponent extends React.Component<IInputGroupComponentProps> {
+  render() {
+    return (
+      <PositionContainer {...this.props}>
+        <InputGroup
+          className={this.props.className}
+          disabled={this.props.disabled}
+          large={this.props.large}
+          leftIcon={this.props.leftIcon}
+          placeholder={this.props.placeholder}
+          rightElement={this.props.rightElement}
+          round={this.props.round}
+          small={this.props.small}
+          value={this.props.value}
+          intent={this.props.intent}
+          defaultValue={this.props.defaultValue}
+          type={this.props.type}
+        />
+      </PositionContainer>
+    );
+  }
+}
+
+export interface IInputGroupComponentProps extends IComponentProps {
+  className?: string;
+  disabled?: boolean;
+  large?: boolean;
+  intent?: Intent;
+  defaultValue?: string;
+  leftIcon?: IconName;
+  rightElement?: JSX.Element;
+  round?: boolean;
+  small?: boolean;
+  type?: string;
+  value?: string;
+  placeholder?: string;
+}
+
+export default InputGroupComponent;

app/client/src/editorComponents/PositionContainer.tsx

@@ -0,0 +1,15 @@
+import { IComponentProps } from "./BaseComponent";
+import styled from "../constants/DefaultTheme";
+
+const PositionContainer = styled("div")<IComponentProps>`
+  color: ${props => props.theme.primaryColor};
+  position: ${props => props.style.positionType};
+  left: ${props => {
+    return props.style.xPosition + props.style.xPositionUnit;
+  }};
+  top: ${props => {
+    return props.style.yPosition + props.style.yPositionUnit;
+  }};
+`;
+
+export default PositionContainer;

app/client/src/editorComponents/SpinnerComponent.tsx

@@ -0,0 +1,27 @@
+import * as React from "react";
+import { IComponentProps } from "./BaseComponent";
+import PositionContainer from "./PositionContainer";
+import { Spinner, Intent } from "@blueprintjs/core";
+
+class SpinnerComponent extends React.Component<ISpinnerComponentProps> {
+  render() {
+    return (
+      <PositionContainer {...this.props}>
+        <Spinner
+          size={this.props.size}
+          value={this.props.value}
+          intent={this.props.intent}
+        />
+      </PositionContainer>
+    );
+  }
+}
+
+export interface ISpinnerComponentProps extends IComponentProps {
+  size?: number;
+  value?: number;
+  intent?: Intent;
+  ellipsize?: boolean;
+}
+
+export default SpinnerComponent;

app/client/src/editorComponents/TextComponent.tsx

@@ -1,21 +1,10 @@
 import * as React from "react"
 import { IComponentProps } from "./BaseComponent"
-import styled from "../constants/DefaultTheme"
+import PositionContainer from "./PositionContainer";
-
-const TextContainer = styled("span")<ITextComponentProps>`
-  color: ${props => props.theme.primaryColor};
-  position: ${props => props.style.positionType};
-  left: ${props => {
-    return props.style.xPosition + props.style.xPositionUnit
-  }};
-  top: ${props => {
-    return props.style.yPosition + props.style.yPositionUnit
-  }};
-`
 
 class TextComponent extends React.Component<ITextComponentProps> {
   render() {
-    return <TextContainer {...this.props}>{this.props.text}</TextContainer>
+    return <PositionContainer {...this.props}>{this.props.text}</PositionContainer>
   }
 }
 

app/client/src/index.tsx

@@ -1,19 +1,19 @@
-import React from "react"
+import React from "react";
-import ReactDOM from "react-dom"
+import ReactDOM from "react-dom";
-import { Provider } from "react-redux"
+import { Provider } from "react-redux";
-import "./index.css"
+import "./index.css";
-import App from "./App"
+import App from "./App";
-import Editor from "./pages/Editor"
+import Editor from "./pages/Editor";
-import PageNotFound from "./pages/PageNotFound"
+import PageNotFound from "./pages/PageNotFound";
-import * as serviceWorker from "./serviceWorker"
+import * as serviceWorker from "./serviceWorker";
-import { BrowserRouter, Route, Switch } from "react-router-dom"
+import { BrowserRouter, Route, Switch } from "react-router-dom";
-import { createStore } from "redux"
+import { createStore } from "redux";
-import appReducer from "./reducers"
+import appReducer from "./reducers";
-import WidgetBuilderRegistry from "./utils/WidgetRegistry"
+import WidgetBuilderRegistry from "./utils/WidgetRegistry";
-import { ThemeProvider, theme } from "./constants/DefaultTheme"
+import { ThemeProvider, theme } from "./constants/DefaultTheme";
 
-WidgetBuilderRegistry.registerWidgetBuilders()
+WidgetBuilderRegistry.registerWidgetBuilders();
-const store = createStore(appReducer)
+const store = createStore(appReducer);
 ReactDOM.render(
   <Provider store={store}>
     <ThemeProvider theme={theme}>
@@ -27,9 +27,9 @@ ReactDOM.render(
     </ThemeProvider>
   </Provider>,
   document.getElementById("root")
-)
+);
 
 // If you want your app to work offline and load faster, you can change
 // unregister() to register() below. Note this comes with some pitfalls.
 // Learn more about service workers: http://bit.ly/CRA-PWA
-serviceWorker.unregister()
+serviceWorker.unregister();

app/client/src/mockResponses/CanvasResponse.ts

@@ -1,12 +1,20 @@
 import { CanvasReduxState } from "../reducers/uiReducers/canvasReducer";
 import { IWidgetProps } from "../widgets/BaseWidget";
-import ContainerWidget, { IContainerWidgetProps } from "../widgets/ContainerWidget";
+import ContainerWidget, {
+  IContainerWidgetProps
+} from "../widgets/ContainerWidget";
 
 const CanvasResponse: IContainerWidgetProps<any> = {
   widgetId: "0",
   widgetType: "CONTAINER_WIDGET",
   snapColumns: 10,
   snapRows: 10,
+  topRow: 0,
+  bottomRow: 600,
+  leftColumn: 0,
+  rightColumn: 1200,
+  parentColumnSpace: 1,
+  parentRowSpace: 1,
   children: [
     {
       widgetId: "1",
@@ -15,33 +23,52 @@ const CanvasResponse: IContainerWidgetProps<any> = {
       leftColumn: 5,
       bottomRow: 5,
       rightColumn: 5,
-      text: "hey"
+      text: "Lorem Ipsum"
     },
     {
-      widgetId: "1",
+      widgetId: "2",
-      widgetType: "TEXT_WIDGET",
+      widgetType: "INPUT_GROUP_WIDGET",
-      topRow: 6,
+      topRow: 1,
-      leftColumn: 5,
+      leftColumn: 1,
       bottomRow: 5,
       rightColumn: 5,
-      text: "hey2"
+      placeholder: "Lorem Ipsum"
     },
     {
-      widgetId: "1",
+      widgetId: "3",
-      widgetType: "BUTTON_WIDGET",
+      widgetType: "CALLOUT_WIDGET",
-      topRow: 6,
+      topRow: 3,
-      leftColumn: 5,
+      leftColumn: 2,
+      bottomRow: 8,
+      rightColumn: 4,
+      id: "sample_id",
+      title: "Visually important content",
+      description:
+        "The component is a simple wrapper around the CSS API that provides props for modifiers and optional title element. Any additional HTML props will be spread to the rendered <div> element.",
+      icon: "",
+      intent: "success"
+    },
+    {
+      widgetId: "4",
+      widgetType: "ICON_WIDGET",
+      topRow: 4,
+      leftColumn: 4,
       bottomRow: 5,
       rightColumn: 5,
-      text: "hey2"
+      icon: "globe",
+      iconSize: "20",
+      intent: "warning"
+    },
+    {
+      widgetId: "5",
+      widgetType: "SPINNER_WIDGET",
+      topRow: 5,
+      leftColumn: 6,
+      bottomRow: 5,
+      rightColumn: 5,
+      size: 20
     }
-  ],
+  ]
-  topRow: 0,
+};
-  bottomRow: 600,
-  leftColumn: 0,
-  rightColumn: 1200,
-  parentColumnSpace: 1,
-  parentRowSpace: 1
-}
 
-export default CanvasResponse
+export default CanvasResponse;

app/client/src/utils/WidgetRegistry.tsx

@@ -1,44 +1,60 @@
-import BaseWidget, { IWidgetProps } from "../widgets/BaseWidget"
+import BaseWidget, { IWidgetProps } from "../widgets/BaseWidget";
 import ContainerWidget, {
   IContainerWidgetProps
-} from "../widgets/ContainerWidget"
+} from "../widgets/ContainerWidget";
-import TextWidget, {
+import TextWidget, { ITextWidgetProps } from "../widgets/TextWidget";
-  ITextWidgetProps
+import InputGroupWidget, {
-} from "../widgets/TextWidget"
+  IInputGroupWidgetProps
+} from "../widgets/InputGroupWidget";
+import CalloutWidget, { ICalloutWidgetProps } from "../widgets/CalloutWidget";
+import IconWidget, { IIconWidgetProps } from "../widgets/IconWidget";
+import SpinnerWidget, { ISpinnerWidgetProps } from "../widgets/SpinnerWidget";
+import WidgetFactory from "./WidgetFactory";
+import React from "react";
 import ButtonWidget, {
   IButtonWidgetProps
 } from "../widgets/ButtonWidget"
-import WidgetFactory from "./WidgetFactory"
-import React from "react"
 
 class WidgetBuilderRegistry {
   static registerWidgetBuilders() {
-    
     WidgetFactory.registerWidgetBuilder("CONTAINER_WIDGET", {
       buildWidget(
         widgetData: IContainerWidgetProps<IWidgetProps>
       ): JSX.Element {
-        return <ContainerWidget {...widgetData }/>
+        return <ContainerWidget {...widgetData} />;
       }
-    })
+    });
 
     WidgetFactory.registerWidgetBuilder("TEXT_WIDGET", {
-      buildWidget(
+      buildWidget(widgetData: ITextWidgetProps): JSX.Element {
-        widgetData: ITextWidgetProps
+        return <TextWidget {...widgetData} />;
-      ): JSX.Element {
-        return <TextWidget {...widgetData} />
       }
-    })
+    });
 
-    WidgetFactory.registerWidgetBuilder("BUTTON_WIDGET", {
+    WidgetFactory.registerWidgetBuilder("CALLOUT_WIDGET", {
-      buildWidget(
+      buildWidget(widgetData: ICalloutWidgetProps): JSX.Element {
-        widgetData: IButtonWidgetProps
+        return <CalloutWidget {...widgetData} />;
-      ): JSX.Element {
-        return <ButtonWidget {...widgetData} />
       }
-    })
+    });
 
+    WidgetFactory.registerWidgetBuilder("ICON_WIDGET", {
+      buildWidget(widgetData: IIconWidgetProps): JSX.Element {
+        return <IconWidget {...widgetData} />;
+      }
+    });
+
+    WidgetFactory.registerWidgetBuilder("SPINNER_WIDGET", {
+      buildWidget(widgetData: ISpinnerWidgetProps): JSX.Element {
+        return <SpinnerWidget {...widgetData} />;
+      }
+    });
+
+    WidgetFactory.registerWidgetBuilder("INPUT_GROUP_WIDGET", {
+      buildWidget(widgetData: IInputGroupWidgetProps): JSX.Element {
+        return <InputGroupWidget {...widgetData} />;
+      }
+    });
   }
 }
 
-export default WidgetBuilderRegistry
+export default WidgetBuilderRegistry;

app/client/src/widgets/BaseWidget.tsx

@@ -3,8 +3,8 @@
  * spawing components based on those props
  * Widgets are also responsible for dispatching actions and updating the state tree
  */
-import { WidgetType } from "../constants/WidgetConstants"
+import { WidgetType } from "../constants/WidgetConstants";
-import { Component } from "react"
+import { Component } from "react";
 
 abstract class BaseWidget<
   T extends IWidgetProps,
@@ -18,7 +18,7 @@ abstract class BaseWidget<
       this.props.bottomRow,
       this.props.parentColumnSpace,
       this.props.parentRowSpace
-    )
+    );
   }
 
   componentWillReceiveProps(prevProps: T, nextProps: T) {
@@ -29,7 +29,7 @@ abstract class BaseWidget<
       nextProps.bottomRow,
       nextProps.parentColumnSpace,
       nextProps.parentRowSpace
-    )
+    );
   }
 
   calculateWidgetBounds(
@@ -43,38 +43,38 @@ abstract class BaseWidget<
     const widgetState: IWidgetState = {
       width: (rightColumn - leftColumn) * parentColumnSpace,
       height: (bottomRow - topRow) * parentRowSpace
-    }
+    };
-    this.setState(widgetState)
+    this.setState(widgetState);
   }
 
   render() {
-    return this.getWidgetView()
+    return this.getWidgetView();
   }
 
-  abstract getWidgetView(): JSX.Element
+  abstract getWidgetView(): JSX.Element;
 
-  abstract getWidgetType(): WidgetType
+  abstract getWidgetType(): WidgetType;
 }
 
 export interface IWidgetState {
-  height: number
+  height: number;
-  width: number
+  width: number;
 }
 
 export interface IWidgetBuilder<T extends IWidgetProps> {
-  buildWidget(data: T): JSX.Element
+  buildWidget(data: T): JSX.Element;
 }
 
 export interface IWidgetProps {
-  widgetType: WidgetType
+  widgetType: WidgetType;
-  key?: string
+  key?: string;
-  widgetId: string
+  widgetId: string;
-  topRow: number
+  topRow: number;
-  leftColumn: number
+  leftColumn: number;
-  bottomRow: number
+  bottomRow: number;
-  rightColumn: number
+  rightColumn: number;
-  parentColumnSpace: number
+  parentColumnSpace: number;
-  parentRowSpace: number
+  parentRowSpace: number;
 }
 
-export default BaseWidget
+export default BaseWidget;

app/client/src/widgets/CalloutWidget.tsx

@@ -0,0 +1,46 @@
+import * as React from "react";
+import BaseWidget, { IWidgetProps, IWidgetState } from "./BaseWidget";
+import { Callout, Code, H5, Intent, Switch } from "@blueprintjs/core";
+import { WidgetType, CSSUnits } from "../constants/WidgetConstants";
+import CalloutComponent from "../editorComponents/CalloutComponent";
+import _ from "lodash";
+
+class CalloutWidget extends BaseWidget<ICalloutWidgetProps, IWidgetState> {
+  constructor(widgetProps: ICalloutWidgetProps) {
+    super(widgetProps);
+  }
+
+  getWidgetView() {
+    return (
+      <CalloutComponent
+        style={{
+          positionType: "ABSOLUTE",
+          yPosition: this.props.topRow * this.props.parentRowSpace,
+          xPosition: this.props.leftColumn * this.props.parentColumnSpace,
+          xPositionUnit: CSSUnits.PIXEL,
+          yPositionUnit: CSSUnits.PIXEL
+        }}
+        widgetId={this.props.widgetId}
+        key={this.props.widgetId}
+        id={this.props.id}
+        title={this.props.title}
+        description={this.props.description}
+        intent={this.props.intent}
+      />
+    );
+  }
+
+  getWidgetType(): WidgetType {
+    return "CALLOUT_WIDGET";
+  }
+}
+
+export interface ICalloutWidgetProps extends IWidgetProps {
+  id?: string;
+  title?: string;
+  description?: string;
+  intent?: Intent;
+  ellipsize?: boolean;
+}
+
+export default CalloutWidget;

app/client/src/widgets/ContainerWidget.tsx

@@ -1,46 +1,50 @@
-import BaseWidget, { IWidgetProps, IWidgetState } from "./BaseWidget"
+import BaseWidget, { IWidgetProps, IWidgetState } from "./BaseWidget";
 import ContainerComponent, {
   IContainerProps
-} from "../editorComponents/ContainerComponent"
+} from "../editorComponents/ContainerComponent";
-import { ContainerOrientation, WidgetType, CSSUnits } from "../constants/WidgetConstants"
+import {
-import WidgetFactory from "../utils/WidgetFactory"
+  ContainerOrientation,
-import React from "react"
+  WidgetType,
-import _ from "lodash"
+  CSSUnits
+} from "../constants/WidgetConstants";
+import WidgetFactory from "../utils/WidgetFactory";
+import React from "react";
+import _ from "lodash";
 
-const DEFAULT_NUM_COLS = 13
+const DEFAULT_NUM_COLS = 13;
-const DEFAULT_NUM_ROWS = 13
+const DEFAULT_NUM_ROWS = 13;
 
 class ContainerWidget extends BaseWidget<
   IContainerWidgetProps<IWidgetProps>,
   IWidgetState
 > {
-  snapColumnSpace: number = 100
+  snapColumnSpace: number = 100;
-  snapRowSpace: number = 100
+  snapRowSpace: number = 100;
 
   constructor(props: IContainerWidgetProps<IWidgetProps>) {
-    super(props)
+    super(props);
-    this.renderChildWidget = this.renderChildWidget.bind(this)
+    this.renderChildWidget = this.renderChildWidget.bind(this);
     this.state = {
       height: 0,
       width: 0
-    }
+    };
   }
 
   componentWillReceiveProps(
     previousProps: IContainerWidgetProps<IWidgetProps>,
     nextProps: IContainerWidgetProps<IWidgetProps>
   ) {
-    super.componentWillReceiveProps(previousProps, nextProps)
+    super.componentWillReceiveProps(previousProps, nextProps);
     this.snapColumnSpace =
-      this.state.width / (nextProps.snapColumns || DEFAULT_NUM_COLS)
+      this.state.width / (nextProps.snapColumns || DEFAULT_NUM_COLS);
     this.snapRowSpace =
-      this.state.height / (nextProps.snapRows || DEFAULT_NUM_ROWS)
+      this.state.height / (nextProps.snapRows || DEFAULT_NUM_ROWS);
   }
 
   renderChildWidget(childWidgetData: IWidgetProps) {
-    childWidgetData.parentColumnSpace = this.snapColumnSpace
+    childWidgetData.parentColumnSpace = this.snapColumnSpace;
-    childWidgetData.parentRowSpace = this.snapRowSpace
+    childWidgetData.parentRowSpace = this.snapRowSpace;
-    return WidgetFactory.createWidget(childWidgetData)
+    return WidgetFactory.createWidget(childWidgetData);
   }
 
   getWidgetView() {
@@ -64,20 +68,20 @@ class ContainerWidget extends BaseWidget<
       >
         {_.map(this.props.children, this.renderChildWidget)}
       </ContainerComponent>
-    )
+    );
   }
 
   getWidgetType(): WidgetType {
-    return "CONTAINER_WIDGET"
+    return "CONTAINER_WIDGET";
   }
 }
 
 export interface IContainerWidgetProps<T extends IWidgetProps>
   extends IWidgetProps {
-  children?: T[]
+  children?: T[];
-  snapColumns?: number
+  snapColumns?: number;
-  snapRows?: number
+  snapRows?: number;
-  orientation?: ContainerOrientation
+  orientation?: ContainerOrientation;
 }
 
-export default ContainerWidget
+export default ContainerWidget;

app/client/src/widgets/IconWidget.tsx

@@ -0,0 +1,45 @@
+import * as React from "react";
+import BaseWidget, { IWidgetProps, IWidgetState } from "./BaseWidget";
+import { WidgetType, CSSUnits } from "../constants/WidgetConstants";
+import { Icon, Intent } from "@blueprintjs/core";
+import { IconName } from "@blueprintjs/icons";
+import IconComponent from "../editorComponents/IconComponent";
+import _ from "lodash";
+
+class IconWidget extends BaseWidget<IIconWidgetProps, IWidgetState> {
+  constructor(widgetProps: IIconWidgetProps) {
+    super(widgetProps);
+  }
+
+  getWidgetView() {
+    return (
+      <IconComponent
+        style={{
+          positionType: "ABSOLUTE",
+          yPosition: this.props.topRow * this.props.parentRowSpace,
+          xPosition: this.props.leftColumn * this.props.parentColumnSpace,
+          xPositionUnit: CSSUnits.PIXEL,
+          yPositionUnit: CSSUnits.PIXEL
+        }}
+        widgetId={this.props.widgetId}
+        key={this.props.widgetId}
+        icon={this.props.icon}
+        iconSize={this.props.iconSize}
+        intent={this.props.intent}
+      />
+    );
+  }
+
+  getWidgetType(): WidgetType {
+    return "ICON_WIDGET";
+  }
+}
+
+export interface IIconWidgetProps extends IWidgetProps {
+  icon?: IconName;
+  iconSize?: number;
+  ellipsize?: boolean;
+  intent?: Intent;
+}
+
+export default IconWidget;

app/client/src/widgets/InputGroupWidget.tsx

@@ -0,0 +1,64 @@
+import * as React from "react";
+import BaseWidget, { IWidgetProps, IWidgetState } from "./BaseWidget";
+import { WidgetType, CSSUnits } from "../constants/WidgetConstants";
+import InputGroupComponent from "../editorComponents/InputGroupComponent";
+import { IconName, InputGroup, Intent } from "@blueprintjs/core";
+import _ from "lodash";
+
+class InputGroupWidget extends BaseWidget<
+  IInputGroupWidgetProps,
+  IWidgetState
+> {
+  constructor(widgetProps: IInputGroupWidgetProps) {
+    super(widgetProps);
+  }
+
+  getWidgetView() {
+    return (
+      <InputGroupComponent
+        style={{
+          positionType: "ABSOLUTE",
+          yPosition: this.props.topRow * this.props.parentRowSpace,
+          xPosition: this.props.leftColumn * this.props.parentColumnSpace,
+          xPositionUnit: CSSUnits.PIXEL,
+          yPositionUnit: CSSUnits.PIXEL
+        }}
+        widgetId={this.props.widgetId}
+        key={this.props.widgetId}
+        className={this.props.className}
+        disabled={this.props.disabled}
+        large={this.props.large}
+        leftIcon={this.props.leftIcon}
+        placeholder={this.props.placeholder}
+        rightElement={this.props.rightElement}
+        round={this.props.round}
+        small={this.props.small}
+        value={this.props.value}
+        intent={this.props.intent}
+        defaultValue={this.props.defaultValue}
+        type={this.props.type}
+      />
+    );
+  }
+
+  getWidgetType(): WidgetType {
+    return "INPUT_GROUP_WIDGET";
+  }
+}
+
+export interface IInputGroupWidgetProps extends IWidgetProps {
+  className?: string;
+  disabled?: boolean;
+  large?: boolean;
+  intent?: Intent;
+  defaultValue?: string;
+  leftIcon?: IconName;
+  rightElement?: JSX.Element;
+  round?: boolean;
+  small?: boolean;
+  type?: string;
+  value?: string;
+  placeholder?: string;
+}
+
+export default InputGroupWidget;

app/client/src/widgets/SpinnerWidget.tsx

@@ -0,0 +1,44 @@
+import * as React from "react";
+import BaseWidget, { IWidgetProps, IWidgetState } from "./BaseWidget";
+import { WidgetType, CSSUnits } from "../constants/WidgetConstants";
+import { Spinner, Intent } from "@blueprintjs/core";
+import SpinnerComponent from "../editorComponents/SpinnerComponent";
+import _ from "lodash";
+
+class SpinnerWidget extends BaseWidget<ISpinnerWidgetProps, IWidgetState> {
+  constructor(widgetProps: ISpinnerWidgetProps) {
+    super(widgetProps);
+  }
+
+  getWidgetView() {
+    return (
+      <SpinnerComponent
+        style={{
+          positionType: "ABSOLUTE",
+          yPosition: this.props.topRow * this.props.parentRowSpace,
+          xPosition: this.props.leftColumn * this.props.parentColumnSpace,
+          xPositionUnit: CSSUnits.PIXEL,
+          yPositionUnit: CSSUnits.PIXEL
+        }}
+        widgetId={this.props.widgetId}
+        key={this.props.widgetId}
+        size={this.props.size}
+        value={this.props.value}
+        intent={this.props.intent}
+      />
+    );
+  }
+
+  getWidgetType(): WidgetType {
+    return "SPINNER_WIDGET";
+  }
+}
+
+export interface ISpinnerWidgetProps extends IWidgetProps {
+  size?: number;
+  value?: number;
+  ellipsize?: boolean;
+  intent?: Intent;
+}
+
+export default SpinnerWidget;