Merge branch 'feature/basic-styling' into 'release'

Feature/basic styling See merge request theappsmith/internal-tools-client!13
2019-09-06 09:37:49 +00:00 · 2019-09-06 09:37:49 +00:00 · 53091a52d0
commit 53091a52d0
parent 326c84cfab c23724effe
96 changed files with 7277 additions and 23072 deletions
--- a/app/client/.eslintrc.js
+++ b/app/client/.eslintrc.js
@ -0,0 +1,23 @@
+module.exports = {
+  parser: '@typescript-eslint/parser',
+  // plugins: ['@typescript-eslint', 'react'],
+  extends: [
+    "plugin:react/recommended", // Uses the recommended rules from @eslint-plugin-react
+    'plugin:@typescript-eslint/recommended'
+  ],
+  parserOptions: {
+    ecmaVersion: 2018, // Allows for the parsing of modern ECMAScript features
+    sourceType: "module", // Allows for the use of imports
+    ecmaFeatures: {
+      jsx: true // Allows for the parsing of JSX
+    }
+  },
+  rules: {
+    "@typescript-eslint/explicit-function-return-type": "off",
+  },
+  settings: {
+    react: {
+      version: "detect" // Tells eslint-plugin-react to automatically detect the version of React to use
+    }
+  }
+};
--- a/app/client/.gitignore
+++ b/app/client/.gitignore
@ -17,6 +17,7 @@
 .env.development.local
 .env.test.local
 .env.production.local
+.env*

 npm-debug.log*
 yarn-debug.log*
--- a/app/client/.prettierignore
+++ b/app/client/.prettierignore
@ -3,3 +3,4 @@ node_modules/
 package-lock.json
 yarn.lock
 package.json
+
--- a/app/client/Concepts.md
+++ b/app/client/Concepts.md
@ -0,0 +1,16 @@
+Concepts
+========
+Widgets
+  - WidgetProperties
+    - WIDGET_PROPERTY_LABEL (STRING)
+    - WIDGET_PROPERTY_TYPE (STRING)
+    - WIDGET_PROPERTY_DEFAULT (STRING)
+    - WIDGET_PROPERTY_ENABLED (BOOLEAN)
+    - WIDGET_PROPERTY_META
+      - ALLOWED_VALUES (LIST<STRING>)
+  - Components
+  - WidgetCards
+    - WIDGET_TYPE (STRING)
+    - WIDGET_CARD_LABEL (STRING)
+    - WIDGET_CARD_ENABLED (BOOLEAN)
+    - WIDGET_CARD_ICON (UTF-16)
--- a/app/client/package-lock.json
+++ b/app/client/package-lock.json
--- a/app/client/package.json
+++ b/app/client/package.json
@ -1,5 +1,5 @@
 {
-  "name": "picasso",
+  "name": "appsmith",
  "version": "0.1.0",
  "private": true,
  "engines": {
@ -11,10 +11,14 @@
    "@blueprintjs/datetime": "^3.6.0",
    "@blueprintjs/icons": "^3.5.0",
    "@blueprintjs/table": "^3.4.0",
+    "@sentry/browser": "^5.6.3",
    "@types/axios": "^0.14.0",
-    "@types/jest": "^23.3.13",
+    "@types/fontfaceobserver": "^0.0.6",
+    "@types/jest": "^24.0.18",
    "@types/lodash": "^4.14.120",
    "@types/moment-timezone": "^0.5.10",
+    "@types/nanoid": "^2.0.0",
+    "@types/netlify-identity-widget": "^1.4.1",
    "@types/node": "^10.12.18",
    "@types/react": "^16.8.2",
    "@types/react-dom": "^16.8.0",
@ -23,9 +27,12 @@
    "@types/styled-components": "^4.1.8",
    "axios": "^0.18.0",
    "flow-bin": "^0.91.0",
+    "fontfaceobserver": "^2.1.0",
    "husky": "^1.3.1",
    "lint-staged": "^8.1.0",
    "lodash": "^4.17.11",
+    "nanoid": "^2.0.4",
+    "netlify-identity-widget": "^1.5.5",
    "node-sass": "^4.11.0",
    "normalizr": "^3.3.0",
    "prettier": "^1.16.0",
@ -33,13 +40,15 @@
    "react-dnd": "^9.3.4",
    "react-dnd-html5-backend": "^9.3.4",
    "react-dom": "^16.7.0",
+    "react-netlify-identity": "^0.1.9",
    "react-redux": "^6.0.0",
    "react-router": "^4.3.1",
    "react-router-dom": "^4.3.1",
-    "react-scripts": "2.1.3",
+    "react-scripts": "^3.1.1",
    "redux": "^4.0.1",
    "redux-saga": "^1.0.0",
    "styled-components": "^4.1.3",
+    "ts-loader": "^6.0.4",
    "typescript": "^3.2.4"
  },
  "scripts": {
@ -49,6 +58,9 @@
    "eject": "react-scripts eject",
    "flow": "flow"
  },
+  "resolutions": {
+    "jest": "24.8.0"
+  },
  "eslintConfig": {
    "extends": "react-app"
  },
@ -59,6 +71,11 @@
    "not op_mini all"
  ],
  "devDependencies": {
+    "@typescript-eslint/eslint-plugin": "^2.0.0",
+    "@typescript-eslint/parser": "^2.0.0",
+    "dotenv": "^8.1.0",
+    "eslint-config-prettier": "^6.1.0",
+    "eslint-plugin-prettier": "^3.1.0",
    "redux-devtools": "^3.5.0"
  }
 }
--- a/app/client/public/_redirects
+++ b/app/client/public/_redirects
@ -0,0 +1 @@
+/*    /index.html   200
--- a/app/client/public/appsmith-widget-font/fonts/appsmith-widget-font.eot
+++ b/app/client/public/appsmith-widget-font/fonts/appsmith-widget-font.eot
--- a/app/client/public/appsmith-widget-font/fonts/appsmith-widget-font.svg
+++ b/app/client/public/appsmith-widget-font/fonts/appsmith-widget-font.svg
@ -0,0 +1,27 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg">
+<metadata>Generated by Fontastic.me</metadata>
+<defs>
+<font id="appsmith-widget-font" horiz-adv-x="512">
+<font-face font-family="appsmith-widget-font" units-per-em="512" ascent="480" descent="-32"/>
+<missing-glyph horiz-adv-x="512" />
+
+<glyph glyph-name="alert" unicode="&#97;" d="M275 221c0-9-7-16-16-16l-6 0c-9 0-16 7-16 16l0 44c0 9 7 16 16 16l6 0c9 0 16-7 16-16z m0-76c0-8-7-16-16-16l-6 0c-9 0-16 8-16 16l0 6c0 9 7 16 16 16l6 0c9 0 16-7 16-16z m-213-48c-6-11 1-24 14-24l360 0c13 0 20 13 14 24l-180 311c-6 11-22 11-28 0z"/>
+<glyph glyph-name="button" unicode="&#98;" d="M512 352c0 19-13 32-32 32l-448 0c-19 0-32-13-32-32l0-192c0-19 13-32 32-32l448 0c19 0 32 13 32 32z m-452-126c4-2 9-3 15-3 6 0 11 1 15 3 4 2 7 5 9 8 3 4 4 8 4 12 0 4-1 8-3 11-2 3-5 5-8 7-3 2-7 4-11 5-3 1-7 2-9 3-3 1-6 3-7 4-2 2-3 4-3 6 0 3 1 6 4 7 2 2 4 3 7 3 4 0 7-1 9-4 2-2 3-4 3-7l16 0c-1 5-2 9-4 12-2 3-5 6-10 8-3 2-8 3-13 3-5 0-10-1-14-3-4-2-7-4-9-8-3-3-4-7-4-12 0-5 2-9 5-13 3-3 8-6 14-8l10-3c4-2 6-3 8-5 2-2 3-4 3-7 0-3-1-6-3-8-2-1-5-2-9-2-4 0-8 1-10 3-3 3-4 6-4 10l-16 0c1-6 2-10 4-14 3-4 6-6 11-8z m74 0c5-2 10-3 16-3 6 0 11 1 15 3 5 2 9 6 12 10 3 5 4 11 4 18l0 48-14 0 0-48c0-6-2-11-5-14-3-3-7-4-12-4-5 0-9 1-12 4-3 3-5 8-5 14l0 48-14 0 0-48c0-7 1-13 4-18 3-4 7-8 11-10z m66 76l0-78 15 0 0 54 21-43 12 0 22 43 0-54 14 0 0 78-17 0-25-49-25 49z m104 0l0-78 32 0c8 0 15 2 19 6 5 4 7 9 7 15 0 5-1 9-4 13-3 3-7 6-11 6 3 1 7 3 9 6 3 3 4 7 4 12 0 6-2 11-6 15-5 3-11 5-19 5z m29-33l-15 0 0 22 15 0c4 0 7-1 9-3 2-2 4-4 4-8 0-3-2-6-4-8-2-2-5-3-9-3z m1-33l-16 0 0 23 16 0c4 0 7-1 10-3 2-3 3-5 3-9 0-4-1-6-3-8-2-2-6-3-10-3z m45 66l0-78 14 0 0 78z m52-11l0-67 14 0 0 67 23 0 0 11-60 0 0-11z"/>
+<glyph glyph-name="checkbox" unicode="&#99;" d="M213 149l-106 107 30 30 76-76 162 162 30-31z m192 299l-298 0c-24 0-43-19-43-43l0-298c0-24 19-43 43-43l298 0c12 0 23 5 31 13 8 8 12 18 12 30l0 298c0 12-4 23-12 31-8 8-19 12-31 12z"/>
+<glyph glyph-name="collapse" unicode="&#100;" d="M407 64l-302 0c-23 0-41 18-41 41l0 302c0 23 18 41 41 41l302 0c23 0 41-18 41-41l0-302c0-23-18-41-41-41z m-121 305l-105-106c-4-4-4-10 0-14l105-106c7-6 18-2 18 8l0 210c0 10-11 14-18 8z"/>
+<glyph glyph-name="datepicker" unicode="&#101;" d="M376 444c0-13 11-24 24-24l16 0c18 0 32-14 32-32l0-296c0-18-14-32-32-32l-320 0c-18 0-32 14-32 32l0 296c0 18 14 32 32 32l16 0c13 0 24 11 24 24 0 10 4 18 11 25 7 7 15 11 25 11 10 0 18-4 25-11 7-7 11-15 11-25 0-13 11-24 24-24l48 0c13 0 24 11 24 24 0 10 4 18 11 25 7 7 15 11 25 11 10 0 18-4 25-11 7-7 11-15 11-25z m-216 0l0-60c0-2 0-3 1-5 0-1 1-2 2-4 2-1 3-2 4-2 2-1 3-1 5-1 2 0 3 0 5 1 1 0 2 1 4 2 1 2 2 3 2 4 1 2 1 3 1 5l0 60c0 3-1 6-4 8-2 3-5 4-8 4-3 0-6-1-8-4-3-2-4-5-4-8z m168 0l0-60c0-3 1-6 3-9 3-2 6-3 9-3 3 0 6 1 9 3 2 3 3 6 3 9l0 60c0 2 0 3-1 5 0 1-1 2-2 4-2 1-3 2-4 2-2 1-3 1-5 1-2 0-3 0-5-1-1 0-2-1-4-2-1-2-2-3-2-4-1-2-1-3-1-5z m64-360c18 0 32 14 32 32l0 176c0 18-14 32-32 32l-272 0c-18 0-32-14-32-32l0-176c0-18 14-32 32-32z m-232 216c13 0 24-11 24-24 0-13-11-24-24-24-13 0-24 11-24 24 0 13 11 24 24 24z m72-24c0 13 11 24 24 24 13 0 24-11 24-24 0-13-11-24-24-24-13 0-24 11-24 24z m120-24c-13 0-24 11-24 24 0 13 11 24 24 24 13 0 24-11 24-24 0-13-11-24-24-24z m-192-24c13 0 24-11 24-24 0-13-11-24-24-24-13 0-24 11-24 24 0 13 11 24 24 24z m72-24c0 13 11 24 24 24 13 0 24-11 24-24 0-13-11-24-24-24-13 0-24 11-24 24z m120-24c-13 0-24 11-24 24 0 13 11 24 24 24 13 0 24-11 24-24 0-13-11-24-24-24z m-192-24c13 0 24-11 24-24 0-13-11-24-24-24-13 0-24 11-24 24 0 13 11 24 24 24z m120-24c0-13-11-24-24-24-13 0-24 11-24 24 0 13 11 24 24 24 13 0 24-11 24-24z m96 0c0-13-11-24-24-24-13 0-24 11-24 24 0 13 11 24 24 24 13 0 24-11 24-24z"/>
+<glyph glyph-name="dropdown" unicode="&#102;" d="M480 384c19 0 32-13 32-32l0-192c0-19-13-32-32-32l-448 0c-19 0-32 13-32 32l0 192c0 19 13 32 32 32z m-100-165c1 0 3 0 4 0 3 0 5 1 7 3l43 41c1 1 2 2 3 3 0 2 1 3 1 4 0 2 0 3-1 5 0 1-1 2-2 3-1 1-2 2-4 3-1 0-3 1-4 1-2 0-3-1-4-1-2-1-3-2-4-3l-35-34-35 36c-1 1-2 1-4 2-1 0-2 1-4 1-1 0-2-1-4-1-1-1-2-1-3-2-1-1-2-3-3-4 0-1 0-3 0-4 0-1 0-3 0-4 1-1 2-3 3-4l42-42c1-1 3-2 4-3z"/>
+<glyph glyph-name="file-upload" unicode="&#103;" d="M393 287c-6 32-23 61-48 81-25 21-57 32-89 32-54 0-101-31-124-75-28-3-53-16-71-37-19-20-29-47-29-75 0-61 50-112 112-112l243 0c51 0 93 42 93 94 0 49-38 89-87 92z m-100-55l0-75-74 0 0 75-56 0 86 87c4 4 10 4 14 0l86-87z"/>
+<glyph glyph-name="image" unicode="&#104;" d="M448 107l0 298c0 24-19 43-43 43l-298 0c-24 0-43-19-43-43l0-298c0-24 19-43 43-43l298 0c24 0 43 19 43 43z m-267 117l54-64 74 96 96-128-298 0z"/>
+<glyph glyph-name="input" unicode="&#105;" d="M512 352c0 19-13 32-32 32l-448 0c-19 0-32-13-32-32l0-192c0-19 13-32 32-32l448 0c19 0 32 13 32 32z m-32-192l-448 0 0 192 448 0z m-416 160l32 0 0-128-32 0z"/>
+<glyph glyph-name="location-picker" unicode="&#106;" d="M256 469c71 0 128-56 128-127 0-95-128-235-128-235 0 0-128 140-128 235 0 71 57 127 128 127z m0-85c-11 0-22-4-30-12-8-9-13-19-13-31 0-11 5-22 13-30 8-8 19-12 30-12 11 0 22 4 30 12 8 8 13 19 13 30 0 12-5 22-13 31-8 8-19 12-30 12z m171-277c0-47-77-86-171-86-94 0-171 39-171 86 0 27 26 52 67 67l13-19c-23-10-37-23-37-38 0-29 57-53 128-53 71 0 128 24 128 53 0 15-14 28-37 38l13 19c41-15 67-40 67-67z"/>
+<glyph glyph-name="modal" unicode="&#107;" d="M136 284c0 7 5 12 12 12l24 0c7 0 12-5 12-12 0-7-5-12-12-12l-24 0c-7 0-12 5-12 12z m72 0c0 7 5 12 12 12l144 0c7 0 12-5 12-12 0-7-5-12-12-12l-144 0c-7 0-12 5-12 12z m-72-48c0 7 5 12 12 12l24 0c7 0 12-5 12-12 0-7-5-12-12-12l-24 0c-7 0-12 5-12 12z m72 0c0 7 5 12 12 12l144 0c7 0 12-5 12-12 0-7-5-12-12-12l-144 0c-7 0-12 5-12 12z m-72-48c0 7 5 12 12 12l24 0c7 0 12-5 12-12 0-7-5-12-12-12l-24 0c-7 0-12 5-12 12z m72 0c0 7 5 12 12 12l144 0c7 0 12-5 12-12 0-7-5-12-12-12l-144 0c-7 0-12 5-12 12z m-128 228c-9 0-16-7-16-16l0-304c0-9 7-16 16-16l352 0c9 0 16 7 16 16l0 304c0 9-7 16-16 16z m344-296c0-9-7-16-16-16l-304 0c-9 0-16 7-16 16l0 208c0 9 7 16 16 16l304 0c9 0 16-7 16-16z m0 260c0-7-5-12-12-12-7 0-12 5-12 12 0 7 5 12 12 12 7 0 12-5 12-12z"/>
+<glyph glyph-name="radio" unicode="&#108;" d="M240 376c-57 0-104-47-104-104 0-57 47-104 104-104 57 0 104 47 104 104 0 57-47 104-104 104z m0 104c-115 0-208-93-208-208 0-115 93-208 208-208 115 0 208 93 208 208 0 115-93 208-208 208z m0-374c-92 0-166 74-166 166 0 92 74 166 166 166 92 0 166-74 166-166 0-92-74-166-166-166z"/>
+<glyph glyph-name="rich-text" unicode="&#109;" d="M256 245l0 150c0 11-10 21-21 21l-150 0c-11 0-21-10-21-21l0-150c0-11 10-21 21-21l150 0c11 0 21 10 21 21z m-146 43c7 8 19 9 25 1l2-2c6-8 18-7 25 1l12 15c6 9 19 9 25 0l16-21c8-11 1-26-12-26l-85 0c-13 0-21 15-13 26z m338-112c0-9-7-16-16-16l-352 0c-9 0-16 7-16 16 0 9 7 16 16 16l352 0c9 0 16-7 16-16z m0-64c0-9-7-16-16-16l-352 0c-9 0-16 7-16 16 0 9 7 16 16 16l352 0c9 0 16-7 16-16z m0 272c0-9-7-16-16-16l-112 0c-9 0-16 7-16 16 0 9 7 16 16 16l112 0c9 0 16-7 16-16z m0-64c0-9-7-16-16-16l-112 0c-9 0-16 7-16 16 0 9 7 16 16 16l112 0c9 0 16-7 16-16z m0-64c0-9-7-16-16-16l-112 0c-9 0-16 7-16 16 0 9 7 16 16 16l112 0c9 0 16-7 16-16z"/>
+<glyph glyph-name="switch" unicode="&#110;" d="M323 416l-134 0c-21 0-41-4-60-12-19-8-37-19-51-34-15-14-26-32-34-51-8-19-12-39-12-60 0-20 4-41 12-60 8-19 19-36 34-51 14-14 32-26 51-34 19-8 39-12 60-12l134 0c21 0 41 4 60 12 19 8 37 20 51 34 15 15 26 32 34 51 8 19 12 40 12 60 0 21-4 41-12 60-8 19-19 37-34 51-14 15-32 26-51 34-19 8-39 12-60 12z m0-269c-30 0-58 12-79 33-21 21-33 50-33 79 0 30 12 58 33 79 21 21 50 33 79 33 15 0 29-3 43-8 14-6 26-14 36-25 11-10 19-22 25-36 5-14 8-28 8-43 0-15-3-29-8-43-6-13-14-26-25-36-10-10-22-19-36-24-14-6-28-9-43-9z"/>
+<glyph glyph-name="table" unicode="&#111;" d="M102 432l308 0c10 0 20-4 27-11 7-7 11-17 11-27l0-288c0-11-4-20-11-28-7-7-17-11-27-11l-308 0c-10 0-20 4-27 11-7 8-11 17-11 28l0 288c0 10 4 20 11 27 7 7 17 11 27 11z m0-77l0-57 77 0 0 57z m116 0l0-57 76 0 0 57z m192-57l0 57-77 0 0-57z m-308-39l0-57 77 0 0 57z m0-153l77 0 0 57-77 0z m116 153l0-57 76 0 0 57z m0-153l76 0 0 57-76 0z m192 0l0 57-77 0 0-57z m0 153l-77 0 0-57 77 0z"/>
+<glyph glyph-name="tabs" unicode="&#112;" d="M424 352c-13 0-24 11-24 24 0 13-11 24-24 24l-280 0c-18 0-32-14-32-32l0-224c0-18 14-32 32-32l320 0c18 0 32 14 32 32l0 184c0 13-11 24-24 24z m-120 12c0 7 5 12 12 12l48 0c7 0 12-5 12-12 0-7-5-12-12-12l-48 0c-7 0-12 5-12 12z m-96 0c0 7 5 12 12 12l48 0c7 0 12-5 12-12 0-7-5-12-12-12l-48 0c-7 0-12 5-12 12z m216-196c0-18-14-32-32-32l-272 0c-18 0-32 14-32 32l0 176c0 18 14 32 32 32l40 0c13 0 24-11 24-24 0-13 11-24 24-24l184 0c18 0 32-14 32-32z"/>
+<glyph glyph-name="text" unicode="&#113;" d="M80 400c-9 0-16-7-16-16l0-29c0-8 7-16 16-16l69 0c9 0 16-7 16-16l0-210c0-9 7-16 16-16l29 0c9 0 16 7 16 16l0 210c0 9 7 16 16 16l69 0c9 0 16 8 16 16l0 29c0 9-7 16-16 16z m368-117c0 9-7 16-16 16l-150 0c-9 0-16-7-16-16l0-29c0-9 7-16 16-16l29 0c9 0 16-7 16-16l0-109c0-9 7-16 16-16l28 0c9 0 16 7 16 16l0 109c0 9 8 16 16 16l29 0c9 0 16 7 16 16z"/>
+</font></defs></svg>
--- a/app/client/public/appsmith-widget-font/fonts/appsmith-widget-font.ttf
+++ b/app/client/public/appsmith-widget-font/fonts/appsmith-widget-font.ttf
--- a/app/client/public/appsmith-widget-font/fonts/appsmith-widget-font.woff
+++ b/app/client/public/appsmith-widget-font/fonts/appsmith-widget-font.woff
--- a/app/client/public/appsmith-widget-font/icons-reference.html
+++ b/app/client/public/appsmith-widget-font/icons-reference.html
@ -0,0 +1,176 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>Font Reference - appsmith-widget-font</title>
+    <link href="http://fonts.googleapis.com/css?family=Dosis:400,500,700" rel="stylesheet" type="text/css">
+    <link rel="stylesheet" href="styles.css">
+    <style type="text/css">html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0;font-weight:inherit;font-style:inherit;font-family:inherit;font-size:100%;vertical-align:baseline}body{line-height:1;color:#000;background:#fff}ol,ul{list-style:none}table{border-collapse:separate;border-spacing:0;vertical-align:middle}caption,th,td{text-align:left;font-weight:normal;vertical-align:middle}a img{border:none}*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}body{font-family:'Dosis','Tahoma',sans-serif}.container{margin:15px auto;width:80%}h1{margin:40px 0 20px;font-weight:700;font-size:38px;line-height:32px;color:#fb565e}h2{font-size:18px;padding:0 0 21px 5px;margin:45px 0 0 0;text-transform:uppercase;font-weight:500}.small{font-size:14px;color:#a5adb4;}.small a{color:#a5adb4;}.small a:hover{color:#fb565e}.glyphs.character-mapping{margin:0 0 20px 0;padding:20px 0 20px 30px;color:rgba(0,0,0,0.5);border:1px solid #d8e0e5;border-radius:3px;}.glyphs.character-mapping li{margin:0 30px 20px 0;display:inline-block;width:90px}.glyphs.character-mapping .icon{margin:10px 0 10px 15px;padding:15px;position:relative;width:55px;height:55px;color:#162a36 !important;overflow:hidden;border-radius:3px;font-size:32px;}.glyphs.character-mapping .icon svg{fill:#000}.glyphs.character-mapping input{margin:0;padding:5px 0;line-height:12px;font-size:12px;display:block;width:100%;border:1px solid #d8e0e5;border-radius:5px;text-align:center;outline:0;}.glyphs.character-mapping input:focus{border:1px solid #fbde4a;-webkit-box-shadow:inset 0 0 3px #fbde4a;box-shadow:inset 0 0 3px #fbde4a}.glyphs.character-mapping input:hover{-webkit-box-shadow:inset 0 0 3px #fbde4a;box-shadow:inset 0 0 3px #fbde4a}.glyphs.css-mapping{margin:0 0 60px 0;padding:30px 0 20px 30px;color:rgba(0,0,0,0.5);border:1px solid #d8e0e5;border-radius:3px;}.glyphs.css-mapping li{margin:0 30px 20px 0;padding:0;display:inline-block;overflow:hidden}.glyphs.css-mapping .icon{margin:0;margin-right:10px;padding:13px;height:50px;width:50px;color:#162a36 !important;overflow:hidden;float:left;font-size:24px}.glyphs.css-mapping input{margin:0;margin-top:5px;padding:8px;line-height:16px;font-size:16px;display:block;width:150px;height:40px;border:1px solid #d8e0e5;border-radius:5px;background:#fff;outline:0;float:right;}.glyphs.css-mapping input:focus{border:1px solid #fbde4a;-webkit-box-shadow:inset 0 0 3px #fbde4a;box-shadow:inset 0 0 3px #fbde4a}.glyphs.css-mapping input:hover{-webkit-box-shadow:inset 0 0 3px #fbde4a;box-shadow:inset 0 0 3px #fbde4a}</style>
+  </head>
+  <body>
+    <div class="container">
+      <h1>appsmith-widget-font</h1>
+      <p class="small">This font was created with<a href="http://fontastic.me/">Fontastic</a></p>
+      <h2>CSS mapping</h2>
+      <ul class="glyphs css-mapping">
+        <li>
+          <div class="icon appsmith-widget-alert"></div>
+          <input type="text" readonly="readonly" value="alert">
+        </li>
+        <li>
+          <div class="icon appsmith-widget-button"></div>
+          <input type="text" readonly="readonly" value="button">
+        </li>
+        <li>
+          <div class="icon appsmith-widget-checkbox"></div>
+          <input type="text" readonly="readonly" value="checkbox">
+        </li>
+        <li>
+          <div class="icon appsmith-widget-collapse"></div>
+          <input type="text" readonly="readonly" value="collapse">
+        </li>
+        <li>
+          <div class="icon appsmith-widget-datepicker"></div>
+          <input type="text" readonly="readonly" value="datepicker">
+        </li>
+        <li>
+          <div class="icon appsmith-widget-dropdown"></div>
+          <input type="text" readonly="readonly" value="dropdown">
+        </li>
+        <li>
+          <div class="icon appsmith-widget-file-upload"></div>
+          <input type="text" readonly="readonly" value="file-upload">
+        </li>
+        <li>
+          <div class="icon appsmith-widget-image"></div>
+          <input type="text" readonly="readonly" value="image">
+        </li>
+        <li>
+          <div class="icon appsmith-widget-input"></div>
+          <input type="text" readonly="readonly" value="input">
+        </li>
+        <li>
+          <div class="icon appsmith-widget-location-picker"></div>
+          <input type="text" readonly="readonly" value="location-picker">
+        </li>
+        <li>
+          <div class="icon appsmith-widget-modal"></div>
+          <input type="text" readonly="readonly" value="modal">
+        </li>
+        <li>
+          <div class="icon appsmith-widget-radio"></div>
+          <input type="text" readonly="readonly" value="radio">
+        </li>
+        <li>
+          <div class="icon appsmith-widget-rich-text"></div>
+          <input type="text" readonly="readonly" value="rich-text">
+        </li>
+        <li>
+          <div class="icon appsmith-widget-switch"></div>
+          <input type="text" readonly="readonly" value="switch">
+        </li>
+        <li>
+          <div class="icon appsmith-widget-table"></div>
+          <input type="text" readonly="readonly" value="table">
+        </li>
+        <li>
+          <div class="icon appsmith-widget-tabs"></div>
+          <input type="text" readonly="readonly" value="tabs">
+        </li>
+        <li>
+          <div class="icon appsmith-widget-text"></div>
+          <input type="text" readonly="readonly" value="text">
+        </li>
+      </ul>
+      <h2>Character mapping</h2>
+      <ul class="glyphs character-mapping">
+        <li>
+          <div data-icon="a" class="icon"></div>
+          <input type="text" readonly="readonly" value="a">
+        </li>
+        <li>
+          <div data-icon="b" class="icon"></div>
+          <input type="text" readonly="readonly" value="b">
+        </li>
+        <li>
+          <div data-icon="c" class="icon"></div>
+          <input type="text" readonly="readonly" value="c">
+        </li>
+        <li>
+          <div data-icon="d" class="icon"></div>
+          <input type="text" readonly="readonly" value="d">
+        </li>
+        <li>
+          <div data-icon="e" class="icon"></div>
+          <input type="text" readonly="readonly" value="e">
+        </li>
+        <li>
+          <div data-icon="f" class="icon"></div>
+          <input type="text" readonly="readonly" value="f">
+        </li>
+        <li>
+          <div data-icon="g" class="icon"></div>
+          <input type="text" readonly="readonly" value="g">
+        </li>
+        <li>
+          <div data-icon="h" class="icon"></div>
+          <input type="text" readonly="readonly" value="h">
+        </li>
+        <li>
+          <div data-icon="i" class="icon"></div>
+          <input type="text" readonly="readonly" value="i">
+        </li>
+        <li>
+          <div data-icon="j" class="icon"></div>
+          <input type="text" readonly="readonly" value="j">
+        </li>
+        <li>
+          <div data-icon="k" class="icon"></div>
+          <input type="text" readonly="readonly" value="k">
+        </li>
+        <li>
+          <div data-icon="l" class="icon"></div>
+          <input type="text" readonly="readonly" value="l">
+        </li>
+        <li>
+          <div data-icon="m" class="icon"></div>
+          <input type="text" readonly="readonly" value="m">
+        </li>
+        <li>
+          <div data-icon="n" class="icon"></div>
+          <input type="text" readonly="readonly" value="n">
+        </li>
+        <li>
+          <div data-icon="o" class="icon"></div>
+          <input type="text" readonly="readonly" value="o">
+        </li>
+        <li>
+          <div data-icon="p" class="icon"></div>
+          <input type="text" readonly="readonly" value="p">
+        </li>
+        <li>
+          <div data-icon="q" class="icon"></div>
+          <input type="text" readonly="readonly" value="q">
+        </li>
+      </ul>
+    </div>
+    <script>(function() {
+  var glyphs, i, len, ref;
+
+  ref = document.getElementsByClassName('glyphs');
+  for (i = 0, len = ref.length; i < len; i++) {
+    glyphs = ref[i];
+    glyphs.addEventListener('click', function(event) {
+      if (event.target.tagName === 'INPUT') {
+        return event.target.select();
+      }
+    });
+  }
+
+}).call(this);
+
+    </script>
+  </body>
+</html>
--- a/app/client/public/appsmith-widget-font/styles.css
+++ b/app/client/public/appsmith-widget-font/styles.css
@ -0,0 +1,91 @@
+@charset "UTF-8";
+
+@font-face {
+  font-family: "appsmith-widget-font";
+  src:url("fonts/appsmith-widget-font.eot");
+  src:url("fonts/appsmith-widget-font.eot?#iefix") format("embedded-opentype"),
+    url("fonts/appsmith-widget-font.woff") format("woff"),
+    url("fonts/appsmith-widget-font.ttf") format("truetype"),
+    url("fonts/appsmith-widget-font.svg#appsmith-widget-font") format("svg");
+  font-weight: normal;
+  font-style: normal;
+
+}
+
+[data-icon]:before {
+  font-family: "appsmith-widget-font" !important;
+  content: attr(data-icon);
+  font-style: normal !important;
+  font-weight: normal !important;
+  font-variant: normal !important;
+  text-transform: none !important;
+  speak: none;
+  line-height: 1;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+[class^="appsmith-widget-"]:before,
+[class*=" appsmith-widget-"]:before {
+  font-family: "appsmith-widget-font" !important;
+  font-style: normal !important;
+  font-weight: normal !important;
+  font-variant: normal !important;
+  text-transform: none !important;
+  speak: none;
+  line-height: 1;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.appsmith-widget-alert:before {
+  content: "\61";
+}
+.appsmith-widget-button:before {
+  content: "\62";
+}
+.appsmith-widget-checkbox:before {
+  content: "\63";
+}
+.appsmith-widget-collapse:before {
+  content: "\64";
+}
+.appsmith-widget-datepicker:before {
+  content: "\65";
+}
+.appsmith-widget-dropdown:before {
+  content: "\66";
+}
+.appsmith-widget-file-upload:before {
+  content: "\67";
+}
+.appsmith-widget-image:before {
+  content: "\68";
+}
+.appsmith-widget-input:before {
+  content: "\69";
+}
+.appsmith-widget-location-picker:before {
+  content: "\6a";
+}
+.appsmith-widget-modal:before {
+  content: "\6b";
+}
+.appsmith-widget-radio:before {
+  content: "\6c";
+}
+.appsmith-widget-rich-text:before {
+  content: "\6d";
+}
+.appsmith-widget-switch:before {
+  content: "\6e";
+}
+.appsmith-widget-table:before {
+  content: "\6f";
+}
+.appsmith-widget-tabs:before {
+  content: "\70";
+}
+.appsmith-widget-text:before {
+  content: "\71";
+}
--- a/app/client/public/index.html
+++ b/app/client/public/index.html
@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html lang="en">
  <head>
+    <script type="text/javascript" src="https://identity.netlify.com/v1/netlify-identity-widget.js"></script>
    <meta charset="utf-8" />
    <!-- in index.html, or however you manage your CSS files -->
    <link href="../node_modules/normalize.css/normalize.css" rel="stylesheet" />
@ -14,6 +15,9 @@
      rel="stylesheet"
    />
    <!-- add other blueprint-*.css files here -->
+    <link rel="stylesheet" href="%PUBLIC_URL%/appsmith-widget-font/styles.css">
+    <link href="https://fonts.googleapis.com/css?family=DM+Sans:400,500,700&display=swap" rel="stylesheet">
+
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta
      name="viewport"
--- a/app/client/src/App.tsx
+++ b/app/client/src/App.tsx
@ -1,7 +1,7 @@
-import React, { Component } from "react";
-import logo from "./assets/images/logo.svg";
-import "./App.css";
-import "../node_modules/@blueprintjs/core/src/blueprint.scss";
+import React, { Component } from "react"
+import logo from "./assets/images/logo.svg"
+import "./App.css"
+import "../node_modules/@blueprintjs/core/src/blueprint.scss"

 class App extends Component {
  render() {
@ -22,8 +22,8 @@ class App extends Component {
            </a>
          </header>
        </div>
-    );
+    )
  }
 }

-export default App;
+export default App
--- a/app/client/src/actions/pageActions.tsx
+++ b/app/client/src/actions/pageActions.tsx
@ -4,6 +4,7 @@ import {
 } from "../constants/ActionConstants"
 import { PageRequest } from "../api/PageApi"
 import { RenderMode } from "../constants/WidgetConstants";
+import { IWidgetProps } from "../widgets/BaseWidget";

 export const fetchPage = (pageId: string, renderMode: RenderMode): ReduxAction<PageRequest> => {
  return {
@ -14,3 +15,23 @@ export const fetchPage = (pageId: string, renderMode: RenderMode): ReduxAction<P
    }
  }
 }
+
+export const addWidget = (pageId: string, widget: IWidgetProps): ReduxAction<{ pageId: string, widget: IWidgetProps}> => {
+  return {
+    type: ActionTypes.ADD_PAGE_WIDGET,
+    payload: {
+      pageId,
+      widget,
+    }
+  }
+}
+
+export const removeWidget = (pageId: string, widgetId: string): ReduxAction<{ pageId: string, widgetId: string}> => {
+  return {
+    type: ActionTypes.REMOVE_PAGE_WIDGET,
+    payload: {
+      pageId,
+      widgetId,
+    }
+  }
+}
--- a/app/client/src/actions/widgetCardsPaneActions.tsx
+++ b/app/client/src/actions/widgetCardsPaneActions.tsx
@ -0,0 +1,30 @@
+import {
+  ActionTypes
+} from "../constants/ActionConstants"
+import { WidgetCardProps } from '../widgets/BaseWidget'
+
+export const fetchWidgetCards = () => {
+  return {
+    type: ActionTypes.FETCH_WIDGET_CARDS
+  }
+}
+
+export const errorFetchingWidgetCards = (error: any) => {
+  return {
+    type: ActionTypes.ERROR_FETCHING_WIDGET_CARDS,
+    error
+  }
+}
+
+export const successFetchingWidgetCards = (cards: { [id: string]: WidgetCardProps[] }) => {
+  return {
+    type: ActionTypes.SUCCESS_FETCHING_WIDGET_CARDS,
+    cards
+  }
+}
+
+export default {
+  fetchWidgetCards,
+  errorFetchingWidgetCards,
+  successFetchingWidgetCards
+}
--- a/app/client/src/api/ApiRequests.tsx
+++ b/app/client/src/api/ApiRequests.tsx
@ -4,7 +4,6 @@ export interface ApiHeaders {
  Accept: ContentType
  "Content-Type": ContentType
  dataType: DataType
-  "Accept-Encoding": EncodingType
 }

 export interface ApiRequest {
--- a/app/client/src/api/PageApi.tsx
+++ b/app/client/src/api/PageApi.tsx
@ -1,27 +1,27 @@
 import Api from "./Api"
-import { IContainerWidgetProps } from "../widgets/ContainerWidget"
+import { ContainerWidgetProps } from "../widgets/ContainerWidget"
 import { ApiResponse } from "./ApiResponses"
 import { RenderMode } from "../constants/WidgetConstants";

 export interface PageRequest {
-  pageId: string,
-  renderMode: RenderMode
+  pageId: string;
+  renderMode: RenderMode;
 }

 export interface SavePageRequest {
-  pageWidget: IContainerWidgetProps<any>
+  pageWidget: ContainerWidgetProps<any>;
 }

 export interface PageResponse extends ApiResponse {
-  pageWidget: IContainerWidgetProps<any>
+  pageWidget: ContainerWidgetProps<any>;
 }

 export interface SavePageResponse {
-  pageId: string
+  pageId: string;
 }

 class PageApi extends Api {
-  static url: string = "/page"
+  static url = "/page"
  
  static fetchPage(pageRequest: PageRequest): Promise<PageResponse> {
    return Api.get(PageApi.url + "/" + pageRequest.pageId, pageRequest)
@ -30,7 +30,8 @@ class PageApi extends Api {
  static savePage(savePageRequest: SavePageRequest): Promise<PageResponse> {
    return Api.post(PageApi.url, undefined, savePageRequest)
  }
-
 }

+
+
 export default PageApi
--- a/app/client/src/api/WidgetCardsPaneApi.tsx
+++ b/app/client/src/api/WidgetCardsPaneApi.tsx
@ -0,0 +1,17 @@
+import Api from "./Api"
+import { WidgetCardProps } from "../widgets/BaseWidget"
+
+export interface WidgetCardsPaneResponse {
+  cards: { [id: string]: WidgetCardProps[]}
+}
+export interface WidgetCardsPaneRequest {}
+
+class WidgetCardsPaneApi extends Api {
+  static url = "/widgetCards"
+  static fetchWidgetCards(): Promise<WidgetCardsPaneResponse> {
+    return Api.get(WidgetCardsPaneApi.url, {})
+  }
+}
+
+
+export default WidgetCardsPaneApi
--- a/app/client/src/assets/images/blank.png
+++ b/app/client/src/assets/images/blank.png
--- a/app/client/src/constants/ActionConstants.tsx
+++ b/app/client/src/constants/ActionConstants.tsx
@ -1,5 +1,5 @@
-import ContainerWidget from "../widgets/ContainerWidget"
-import { IWidgetProps } from "../widgets/BaseWidget"
+// import ContainerWidget from "../widgets/ContainerWidget"
+import { IWidgetProps, WidgetCardProps } from "../widgets/BaseWidget"

 export type ActionType =
  | "UPDATE_CANVAS"
@ -9,6 +9,16 @@ export type ActionType =
  | "REMOVE_WIDGET_CANVAS"
  | "LOAD_WIDGET_PANE"
  | "FETCH_PAGE"
+  | "ZOOM_IN_CANVAS"
+  | "ZOOM_OUT_CANVAS"
+  | "PUBLISH"
+  | "UNDO_CANVAS_ACTION"
+  | "REDO_CANVAS_ACTION"
+  | "FETCH_WIDGET_CARDS"
+  | "SUCCESS_FETCHING_WIDGET_CARDS"
+  | "ERROR_FETCHING_WIDGET_CARDS"
+  | "ADD_PAGE_WIDGET"
+  | "REMOVE_PAGE_WIDGET"

 export const ActionTypes: { [id: string]: ActionType } = {
  UPDATE_CANVAS: "UPDATE_CANVAS",
@ -17,19 +27,33 @@ export const ActionTypes: { [id: string]: ActionType } = {
  FETCH_PAGE: "FETCH_PAGE",
  DROP_WIDGET_CANVAS: "DROP_WIDGET_CANVAS",
  REMOVE_WIDGET_CANVAS: "REMOVE_WIDGET_CANVAS",
-  LOAD_WIDGET_PANE: "LOAD_WIDGET_PANE"
+  LOAD_WIDGET_PANE: "LOAD_WIDGET_PANE",
+  ZOOM_IN_CANVAS: "ZOOM_IN_CANVAS",
+  ZOOM_OUT_CANVAS: "ZOOM_OUT_CANVAS",
+  UNDO_CANVAS_ACTION: "UNDO_CANVAS_ACTION",
+  REDO_CANVAS_ACTION: "REDO_CANVAS_ACTION",
+  PUBLISH: "PUBLISH",
+  FETCH_WIDGET_CARDS: "FETCH_WIDGET_CARDS",
+  SUCCESS_FETCHING_WIDGET_CARDS: "SUCCESS_FETCHING_WIDGET_CARDS",
+  ERROR_FETCHING_WIDGET_CARDS: "ERROR_FETCHING_WIDGET_CARDS",
+  ADD_PAGE_WIDGET: "ADD_PAGE_WIDGET",
+  REMOVE_PAGE_WIDGET: "REMOVE_PAGE_WIDGET"
 }

 export interface ReduxAction<T> {
-  type: ActionType
-  payload: T
+  type: ActionType;
+  payload: T;
 }

 export interface LoadCanvasPayload {
-  pageWidgetId: string
-  widgets: { [widgetId: string]: IWidgetProps }
+  pageWidgetId: string;
+  widgets: { [widgetId: string]: IWidgetProps };
 }

 export interface LoadWidgetPanePayload {
-  widgets: IWidgetProps[]
+  widgets: IWidgetProps[];
+}
+
+export interface LoadWidgetCardsPanePayload {
+  cards: { [id: string]: WidgetCardProps[] }
 }
--- a/app/client/src/constants/ApiConstants.tsx
+++ b/app/client/src/constants/ApiConstants.tsx
@ -5,12 +5,17 @@ export type ContentType = "application/json" | "application/x-www-form-urlencode
 export type EncodingType = "gzip"

 export const PROD_BASE_URL = "https://mobtools.com/api/"
+export const MOCK_BASE_URL = "https://f78ff9dd-2c08-45f1-9bf9-8c670a1bb696.mock.pstmn.io"
 export const STAGE_BASE_URL = "https://14157cb0-190f-4082-a791-886a8df05930.mock.pstmn.io"
-export const BASE_URL = STAGE_BASE_URL
+export const BASE_URL = MOCK_BASE_URL
 export const REQUEST_TIMEOUT_MS = 2000
 export const REQUEST_HEADERS: ApiHeaders = {
  Accept: "application/json",
  "Content-Type": "application/json",
  dataType: "json",
-  "Accept-Encoding": "gzip"
+}
+
+export interface APIException {
+  error: number;
+  message: string;
 }
--- a/app/client/src/constants/Colors.tsx
+++ b/app/client/src/constants/Colors.tsx
@ -0,0 +1,14 @@
+export const WHITE = "#FFFFFF";
+export const WHITE_1 = "#E9FAF3";
+export const WHITE_2 = "#D0D7DD";
+
+export const BLACK = "#000000";
+export const BLACK_1 = "#040627";
+export const BLACK_2 = "#21282C";
+export const BLACK_3 = "#272E32";
+export const BLACK_4 = "#363E44";
+
+export const GREEN = "#29CCA3";
+export const RED = "#CE4257";
+export const PURPLE = "#6871EF";
+
--- a/app/client/src/constants/DefaultTheme.tsx
+++ b/app/client/src/constants/DefaultTheme.tsx
@ -1,45 +1,47 @@
-import * as styledComponents from "styled-components"
-import { Color, FontFamily, Colors, Fonts } from "./StyleConstants"
+import * as styledComponents from "styled-components";
+import * as Colors from "./Colors";
+import * as FontFamilies from "./Fonts";
+
+export type Color = (typeof Colors)[keyof typeof Colors];
+export type FontFamily = (typeof FontFamilies)[keyof typeof FontFamilies];

 const {
  default: styled,
  css,
  keyframes,
  createGlobalStyle,
-  ThemeProvider
-} = styledComponents as styledComponents.ThemedStyledComponentsModule<
-  IThemeInterface
->
+  ThemeProvider,
+} = styledComponents as styledComponents.ThemedStyledComponentsModule<Theme>;

-export interface IFontInterface {
-    fontSize: number
-    fontColor: Color,
-    fontFamily: FontFamily
-}
+export type Theme = {
+  radii: Array<number>;
+  fontSizes: Array<number>;
+  spaces: Array<number>;
+  fontWeights: Array<number>;
+  colors: Record<string, Color>;
+  lineHeights: Array<number>;
+  fonts: Array<FontFamily>;
+};

-export interface IThemeInterface {
-  primaryColor: Color
-  secondaryColor: Color
-  accentColor: Color
-  headerFont: IFontInterface,
-  titleFont: IFontInterface,
-  subTitleFont: IFontInterface
-}
+export const theme: Theme = {
+  radii: [0, 4, 8, 10, 20],
+  fontSizes: [0, 10, 12, 14, 16, 18, 24, 28, 32, 48, 64],
+  spaces: [0, 6, 8, 10, 12, 14, 16, 18, 20, 22, 24],
+  fontWeights: [0, 400, 500, 700],
+  colors: {
+    primary: Colors.GREEN,
+    error: Colors.RED,
+    hover: Colors.WHITE_1,
+    textDefault: Colors.BLACK_1,
+    textOnDarkBG: Colors.WHITE,
+    textAnchor: Colors.PURPLE ,
+    border: Colors.WHITE_2 ,
+    paneCard: Colors.BLACK_2,
+    paneBG: Colors.BLACK_4,
+  },
+  lineHeights: [0, 14, 18, 22, 24, 28, 36, 48, 64, 80],
+  fonts: [FontFamilies.DMSans, FontFamilies.AppsmithWidget],
+};

-const defaultFont: IFontInterface = {
-  fontSize: 14,
-  fontColor: Colors.FullBlack,
-  fontFamily: Fonts.RobotoBold
-}
-
-export const theme = {
-  primaryColor: Colors.FullBlack,
-  secondaryColor: Colors.FullWhite,
-  accentColor: Colors.FullBlack,
-  headerFont: defaultFont,
-  titleFont: defaultFont,
-  subTitleFont: defaultFont
-}
-
-export default styled
-export { css, createGlobalStyle, keyframes, ThemeProvider }
+export { css, createGlobalStyle, keyframes, ThemeProvider };
+export default styled;
--- a/app/client/src/constants/Fonts.tsx
+++ b/app/client/src/constants/Fonts.tsx
@ -0,0 +1,3 @@
+export const DMSans = "DM Sans";
+export const AppsmithWidget = "appsmith-widget-font";
+export const OpenSans = "Open Sans";
--- a/app/client/src/constants/StyleConstants.tsx
+++ b/app/client/src/constants/StyleConstants.tsx
@ -1,13 +1 @@
-export type Color = "#ffffff" | "#000000"
-
-export const Colors: { [id: string]: Color } = {
-    FullWhite: "#ffffff",
-    FullBlack: "#000000"
-}
-
-export type FontFamily = "Brandon-Regular" | "Roboto-Bold"
-
-export const Fonts: { [id: string]: FontFamily } = {
-    BrandonRegular: "Brandon-Regular",
-    RobotoBold: "Roboto-Bold"
-}
+export default {}
--- a/app/client/src/constants/ThirdPartyConstants.tsx
+++ b/app/client/src/constants/ThirdPartyConstants.tsx
@ -0,0 +1,6 @@
+export type ENVIRONMENT = "PRODUCTION" | "STAGING" | "LOCAL"
+export const SENTRY_PROD_CONFIG = { dsn: "https://a63362b692d64edeb175741f1f80b091@sentry.io/1546547", environment: 'Production' }
+export const SENTRY_STAGE_CONFIG = { dsn: "https://a63362b692d64edeb175741f1f80b091@sentry.io/1546547", environment: 'Staging' }
+
+export const HOTJAR_PROD_HJID = "1465835"
+export const HOTJAR_PROD_HJSV = "6"
--- a/app/client/src/constants/WidgetConstants.tsx
+++ b/app/client/src/constants/WidgetConstants.tsx
@ -13,6 +13,16 @@ export type WidgetType =
  | "NUMERIC_INPUT_WIDGET"
  | "CHECKBOX_WIDGET"
  | "RADIO_GROUP_WIDGET"
+  | "INPUT_WIDGET"
+  | "TOGGLE_WIDGET"
+
+export const WidgetTypes: {[id: string]: WidgetType } = {
+  BUTTON_WIDGET: "BUTTON_WIDGET",
+  TEXT_WIDGET: "TEXT_WIDGET",
+  INPUT_WIDGET: "INPUT_WIDGET",
+  TOGGLE_WIDGET: "TOGGLE_WIDGET",
+}
+
 export type ContainerOrientation = "HORIZONTAL" | "VERTICAL"
 export type PositionType = "ABSOLUTE" | "CONTAINER_DIRECTION"
 export type CSSUnit =
@ -47,6 +57,6 @@ export const RenderModes: { [id: string]: RenderMode } = {

 export const CSSUnits: { [id: string]: CSSUnit } = {
  PIXEL: "px",
-  RELATIVE_FONTSIZE: "em",
+  RELATIVE_FONTSIZE: "rem",
  RELATIVE_PARENT: "%"
 }
--- a/app/client/src/editorComponents/BaseComponent.tsx
+++ b/app/client/src/editorComponents/BaseComponent.tsx
@ -1,32 +1,29 @@
 import { Component } from "react"
-import React from "react"
 import { PositionType, CSSUnit } from "../constants/WidgetConstants"
+import { Color } from "../constants/DefaultTheme";
+
 /***
 * Components are responsible for binding render inputs to corresponding UI SDKs
 */
-abstract class BaseComponent<T extends IComponentProps> extends Component<T> {
-
-    constructor(componentProps: T) {
-        super(componentProps)
-    }
-
-}
+abstract class BaseComponent<T extends ComponentProps> extends Component<T> {}

 export interface BaseStyle {
-    height?: number
-    width?: number
-    positionType: PositionType
-    xPosition: number
-    yPosition: number
-    xPositionUnit: CSSUnit
-    yPositionUnit: CSSUnit
-    heightUnit?: CSSUnit
-    widthUnit?: CSSUnit
+    height?: number;
+    width?: number;
+    positionType: PositionType;
+    xPosition: number;
+    yPosition: number;
+    xPositionUnit: CSSUnit;
+    yPositionUnit: CSSUnit;
+    heightUnit?: CSSUnit;
+    widthUnit?: CSSUnit;
+    backgroundColor?: Color;
+
 }

-export interface IComponentProps {
-    widgetId: string
-    style: BaseStyle
+export interface ComponentProps {
+    widgetId: string;
+    style: BaseStyle;
 }

 export default BaseComponent
--- a/app/client/src/editorComponents/BreadcrumbsComponent.tsx
+++ b/app/client/src/editorComponents/BreadcrumbsComponent.tsx
@ -1,15 +1,13 @@
 import * as React from "react"
-import { IComponentProps } from "./BaseComponent"
+import { ComponentProps } from "./BaseComponent"
 import {
  Boundary,
  Breadcrumbs,
-  Breadcrumb,
-  Card,
  IBreadcrumbProps
 } from "@blueprintjs/core"
 import { Container } from "./ContainerComponent"

-class BreadcrumbsComponent extends React.Component<IBreadcrumbsComponentProps> {
+class BreadcrumbsComponent extends React.Component<BreadcrumbsComponentProps> {
  render() {
    return (
      <Container {...this.props}>
@ -24,12 +22,12 @@ class BreadcrumbsComponent extends React.Component<IBreadcrumbsComponentProps> {
  }
 }

-export interface IBreadcrumbsComponentProps extends IComponentProps {
-  width?: number
-  collapseFrom?: Boundary
-  className?: string
-  minVisibleItems?: number
-  items?: IBreadcrumbProps[]
+export interface BreadcrumbsComponentProps extends ComponentProps {
+  width?: number;
+  collapseFrom?: Boundary;
+  className?: string;
+  minVisibleItems?: number;
+  items?: IBreadcrumbProps[];
 }

 export default BreadcrumbsComponent
--- a/app/client/src/editorComponents/ButtonComponent.tsx
+++ b/app/client/src/editorComponents/ButtonComponent.tsx
@ -7,7 +7,7 @@ class ButtonComponent extends React.Component<IButtonComponentProps> {
  render() {
    return (
      <Container {...this.props}>
-        <Button text={this.props.text} icon={this.props.icon} />
+        <Button  icon={this.props.icon}>{this.props.text}</Button>
      </Container>
    )
  }
--- a/app/client/src/editorComponents/CalloutComponent.tsx
+++ b/app/client/src/editorComponents/CalloutComponent.tsx
@ -1,5 +1,5 @@
 import * as React from "react"
-import { IComponentProps } from "./BaseComponent"
+import { ComponentProps } from "./BaseComponent"
 import { Callout, Intent } from "@blueprintjs/core"
 import { Container } from "./ContainerComponent"
 class CalloutComponent extends React.Component<ICalloutComponentProps> {
@ -17,7 +17,7 @@ class CalloutComponent extends React.Component<ICalloutComponentProps> {
  }
 }

-export interface ICalloutComponentProps extends IComponentProps {
+export interface ICalloutComponentProps extends ComponentProps {
  id?: string
  title?: string
  description?: string
--- a/app/client/src/editorComponents/CheckboxComponent.tsx
+++ b/app/client/src/editorComponents/CheckboxComponent.tsx
@ -1,7 +1,7 @@
-import * as React from "react"
-import { IComponentProps } from "./BaseComponent"
-import { Checkbox } from "@blueprintjs/core"
-import { Container } from "./ContainerComponent"
+import * as React from "react";
+import { ComponentProps } from "./BaseComponent";
+import { Checkbox } from "@blueprintjs/core";
+import { Container } from "./ContainerComponent";
 class CheckboxComponent extends React.Component<ICheckboxComponentProps> {
  render() {
    return (
@ -14,16 +14,16 @@ class CheckboxComponent extends React.Component<ICheckboxComponentProps> {
          />
        ))}
      </Container>
-    )
+    );
  }
 }

-export interface ICheckboxComponentProps extends IComponentProps {
+export interface ICheckboxComponentProps extends ComponentProps {
  items: Array<{
-    label: string
-    defaultIndeterminate: boolean
-    value: number | string
-  }>
+    label: string;
+    defaultIndeterminate: boolean;
+    value: number | string;
+  }>;
 }

-export default CheckboxComponent
+export default CheckboxComponent;
--- a/app/client/src/editorComponents/ContainerComponent.tsx
+++ b/app/client/src/editorComponents/ContainerComponent.tsx
@ -1,35 +1,46 @@
-import BaseComponent, { IComponentProps } from "./BaseComponent"
-import { ContainerOrientation } from "../constants/WidgetConstants"
-import styled from "../constants/DefaultTheme"
-import React from "react"
+import { ComponentProps } from "./BaseComponent";
+import { ContainerOrientation } from "../constants/WidgetConstants";
+import styled from "../constants/DefaultTheme";
+import { useDrop } from "react-dnd"
+import { WidgetTypes } from "../constants/WidgetConstants"
+import { DraggableWidget } from "../widgets/BaseWidget"
+import React from "react";

-export const Container = styled("div")<IContainerProps>`
+export const Container = styled("div")<ContainerProps>`
  display: flex;
  flex-direction: ${props => {
    return props.orientation === "HORIZONTAL" ? "row" : "column"
  }};
  background: ${props => props.style.backgroundColor};
-  color: ${props => props.theme.primaryColor};
+  color: ${props => props.theme.colors.primary};
  position: ${props => {
    return props.style.positionType === "ABSOLUTE" ? "absolute" : "relative"
  }};
  left: ${props => {
-    return props.style.xPosition + props.style.xPositionUnit
+    return props.style.positionType !== "ABSOLUTE" ? undefined : props.style.xPosition + props.style.xPositionUnit
  }};
  top: ${props => {
-    return props.style.yPosition + props.style.yPositionUnit
+    return props.style.positionType !== "ABSOLUTE" ? undefined : props.style.yPosition + props.style.yPositionUnit
  }};
-`
-
-class ContainerComponent extends BaseComponent<IContainerProps> {
-  render() {
-    return <Container {...this.props}>{this.props.children}</Container>
+`;
+const ContainerComponent = (props: ContainerProps) => {
+  const addWidgetFn = props.addWidget;
+  const [, drop] = useDrop({
+    accept: Object.values(WidgetTypes),
+    drop(item: DraggableWidget, monitor) {
+      if (addWidgetFn && monitor.isOver({shallow: true})){
+        addWidgetFn(item.type);
      }
+      return undefined
+    },
+  })
+  return <Container ref={drop} {...props}>{props.children}</Container> 
 }

-export interface IContainerProps extends IComponentProps {
-  children?: JSX.Element[] | JSX.Element
-  orientation?: ContainerOrientation
+export interface ContainerProps extends ComponentProps {
+  children?: JSX.Element[] | JSX.Element;
+  orientation?: ContainerOrientation;
+  addWidget?: Function;
 }

 export default ContainerComponent
--- a/app/client/src/editorComponents/DraggableComponent.tsx
+++ b/app/client/src/editorComponents/DraggableComponent.tsx
@ -0,0 +1,52 @@
+import * as React from "react"
+import { IWidgetProps, IWidgetState } from "../widgets/BaseWidget"
+import { DragSource, DragSourceConnector, DragSourceMonitor } from "react-dnd"
+import { ContainerProps } from "./ContainerComponent"
+
+export interface DraggableProps extends ContainerProps {
+  connectDragSource: Function;
+  isDragging?: boolean;
+}
+
+class DraggableComponent extends React.Component<DraggableProps, IWidgetState> {
+  render() {
+    return this.props.connectDragSource(
+      <div
+        style={{
+          display: "flex",
+          flexDirection: "column",
+          left: this.props.style
+            ? this.props.style.xPosition + this.props.style.xPositionUnit
+            : 0,
+          top: this.props.style
+            ? this.props.style.yPosition + this.props.style.yPositionUnit
+            : 0
+        }}
+      >
+        {this.props.children}
+      </div>
+    )
+  }
+}
+
+const widgetSource = {
+  beginDrag(props: IWidgetProps) {
+    return {
+      widgetId: props.widgetId,
+      widgetType: props.widgetType
+    }
+  }
+}
+
+const widgetType = (props: IWidgetProps) => {
+  return props.widgetType
+}
+
+function collect(connect: DragSourceConnector, monitor: DragSourceMonitor) {
+  return {
+    connectDragSource: connect.dragSource(),
+    isDragging: monitor.isDragging()
+  }
+}
+
+export default DragSource(widgetType, widgetSource, collect)(DraggableComponent)
--- a/app/client/src/editorComponents/DroppableComponent.tsx
+++ b/app/client/src/editorComponents/DroppableComponent.tsx
@ -0,0 +1,58 @@
+import * as React from "react"
+import { IWidgetProps, IWidgetState } from "../widgets/BaseWidget"
+import { DropTargetConnector, DropTargetMonitor, DropTarget, XYCoord } from "react-dnd"
+import { ContainerProps } from "./ContainerComponent"
+import WidgetFactory from "../utils/WidgetFactory";
+
+export interface DroppableProps extends ContainerProps {
+  connectDropTarget: Function;
+  isOver?: boolean;
+}
+
+class DroppableComponent extends React.Component<
+  DroppableProps,
+  IWidgetState
+> {
+  render() {
+    return this.props.connectDropTarget(
+      <div
+        style={{
+          position: "absolute",
+          left: this.props.style.xPosition + this.props.style.xPositionUnit,
+          height: this.props.style.height,
+          width: this.props.style.width,
+          background: this.props.isOver ? "#f4f4f4" : undefined,
+          top: this.props.style.yPosition + this.props.style.yPositionUnit
+        }}
+      >
+        { this.props.isOver ? undefined : this.props.children}
+      </div>
+    )
+  }
+}
+
+const dropTarget = {
+  canDrop(props: IWidgetProps) {
+    return true
+  },
+  drop(props: IWidgetProps, monitor: DropTargetMonitor) {
+    const item = monitor.getItem()
+    const delta = monitor.getDifferenceFromInitialOffset() as XYCoord
+    const left = Math.round(item.left + delta.x)
+    const top = Math.round(item.top + delta.y)
+    return { left: left, top: top }
+  }
+}
+
+const getDropTypes = (props: IWidgetProps) => {
+  return WidgetFactory.getWidgetTypes()
+}
+
+function collect(connect: DropTargetConnector, monitor: DropTargetMonitor) {
+  return {
+    connectDropTarget: connect.dropTarget(),
+    isOver: monitor.isOver()
+  }
+}
+
+export default DropTarget(getDropTypes, dropTarget, collect)(DroppableComponent)
--- a/app/client/src/editorComponents/IconComponent.tsx
+++ b/app/client/src/editorComponents/IconComponent.tsx
@ -1,9 +1,9 @@
 import * as React from "react"
-import { IComponentProps } from "./BaseComponent"
+import { ComponentProps } from "./BaseComponent"
 import { Icon, Intent } from "@blueprintjs/core"
 import { IconName } from "@blueprintjs/icons"
 import { Container } from "./ContainerComponent"
-class IconComponent extends React.Component<IIconComponentProps> {
+class IconComponent extends React.Component<IconComponentProps> {
  render() {
    return (
      <Container {...this.props}>
@ -17,11 +17,11 @@ class IconComponent extends React.Component<IIconComponentProps> {
  }
 }

-export interface IIconComponentProps extends IComponentProps {
-  iconSize?: number
-  icon?: IconName
-  intent?: Intent
-  ellipsize?: boolean
+export interface IconComponentProps extends ComponentProps {
+  iconSize?: number;
+  icon?: IconName;
+  intent?: Intent;
+  ellipsize?: boolean;
 }

 export default IconComponent
--- a/app/client/src/editorComponents/InputGroupComponent.tsx
+++ b/app/client/src/editorComponents/InputGroupComponent.tsx
@ -1,5 +1,5 @@
 import * as React from "react"
-import { IComponentProps } from "./BaseComponent"
+import { ComponentProps } from "./BaseComponent"
 import { IconName, InputGroup, Intent } from "@blueprintjs/core"
 import { Container } from "./ContainerComponent"
 class InputGroupComponent extends React.Component<IInputGroupComponentProps> {
@ -25,19 +25,19 @@ class InputGroupComponent extends React.Component<IInputGroupComponentProps> {
  }
 }

-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 interface IInputGroupComponentProps extends ComponentProps {
+  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
--- a/app/client/src/editorComponents/NumericInputComponent.tsx
+++ b/app/client/src/editorComponents/NumericInputComponent.tsx
@ -1,5 +1,5 @@
 import * as React from "react"
-import { IComponentProps } from "./BaseComponent"
+import { ComponentProps } from "./BaseComponent"
 import { Intent, NumericInput, IconName } from "@blueprintjs/core"
 import { Container } from "./ContainerComponent"
 class NumericInputComponent extends React.Component<
@ -34,27 +34,27 @@ class NumericInputComponent extends React.Component<
  }
 }

-export interface INumericInputComponentProps extends IComponentProps {
-  className?: string
-  disabled?: boolean
-  large?: boolean
-  intent?: Intent
-  defaultValue?: string
-  leftIcon?: IconName
-  rightElement?: JSX.Element
-  allowNumericCharactersOnly?: boolean
-  fill?: boolean
-  majorStepSize?: number | null
-  max?: number
-  min?: number
-  minorStepSize?: number | null
-  onValueChange?: (valueAsNumber: number, valueAsString: string) => void
-  onButtonClick?: (valueAsNumber: number, valueAsString: string) => void
-  inputRef?: (ref: HTMLInputElement | null) => any
-  selectAllOnFocus?: boolean
-  selectAllOnIncrement?: boolean
-  stepSize?: number
-  placeholder?: string
+export interface INumericInputComponentProps extends ComponentProps {
+  className?: string;
+  disabled?: boolean;
+  large?: boolean;
+  intent?: Intent;
+  defaultValue?: string;
+  leftIcon?: IconName;
+  rightElement?: JSX.Element;
+  allowNumericCharactersOnly?: boolean;
+  fill?: boolean;
+  majorStepSize?: number | null;
+  max?: number;
+  min?: number;
+  minorStepSize?: number | null;
+  onValueChange?: (valueAsNumber: number, valueAsString: string) => void;
+  onButtonClick?: (valueAsNumber: number, valueAsString: string) => void;
+  inputRef?: (ref: HTMLInputElement | null) => any;
+  selectAllOnFocus?: boolean;
+  selectAllOnIncrement?: boolean;
+  stepSize?: number;
+  placeholder?: string;
 }

 export default NumericInputComponent
--- a/app/client/src/editorComponents/RadioGroupComponent.tsx
+++ b/app/client/src/editorComponents/RadioGroupComponent.tsx
@ -1,8 +1,8 @@
 import * as React from "react"
-import { IComponentProps } from "./BaseComponent"
+import { ComponentProps } from "./BaseComponent"
 import { Radio, RadioGroup, IOptionProps } from "@blueprintjs/core"
 import { Container } from "./ContainerComponent"
-class RadioGroupComponent extends React.Component<IRadioGroupComponentProps> {
+class RadioGroupComponent extends React.Component<RadioGroupComponentProps> {
  render() {
    return (
      <Container {...this.props}>
@ -25,19 +25,19 @@ class RadioGroupComponent extends React.Component<IRadioGroupComponentProps> {
  }
 }

-export interface IRadioGroupComponentProps extends IComponentProps {
-  label: string
-  inline: boolean
-  selectedValue: string | number
-  handleRadioChange: (event: React.FormEvent<HTMLInputElement>) => void
-  disabled: boolean
-  className: string
-  name: string
-  options: IOptionProps[]
+export interface RadioGroupComponentProps extends ComponentProps {
+  label: string;
+  inline: boolean;
+  selectedValue: string | number;
+  handleRadioChange: (event: React.FormEvent<HTMLInputElement>) => void;
+  disabled: boolean;
+  className: string;
+  name: string;
+  options: IOptionProps[];
  items: Array<{
-    label: string
-    value: number | string
-  }>
+    label: string;
+    value: number | string;
+  }>;
 }

 export default RadioGroupComponent
--- a/app/client/src/editorComponents/SpinnerComponent.tsx
+++ b/app/client/src/editorComponents/SpinnerComponent.tsx
@ -1,9 +1,9 @@
 import * as React from "react"
-import { IComponentProps } from "./BaseComponent"
+import { ComponentProps } from "./BaseComponent"
 import { Spinner, Intent } from "@blueprintjs/core"
 import { Container } from "./ContainerComponent"

-class SpinnerComponent extends React.Component<ISpinnerComponentProps> {
+class SpinnerComponent extends React.Component<SpinnerComponentProps> {
  render() {
    return (
      <Container {...this.props}>
@ -17,10 +17,10 @@ class SpinnerComponent extends React.Component<ISpinnerComponentProps> {
  }
 }

-export interface ISpinnerComponentProps extends IComponentProps {
-  size?: number
-  value?: number
-  intent?: Intent
+export interface SpinnerComponentProps extends ComponentProps {
+  size?: number;
+  value?: number;
+  intent?: Intent;
 }

 export default SpinnerComponent
--- a/app/client/src/editorComponents/TagInputComponent.tsx
+++ b/app/client/src/editorComponents/TagInputComponent.tsx
@ -1,8 +1,8 @@
 import * as React from "react"
-import { IComponentProps } from "./BaseComponent"
+import { ComponentProps } from "./BaseComponent"
 import { Intent, ITagProps, TagInput, HTMLInputProps } from "@blueprintjs/core"
 import { Container } from "./ContainerComponent"
-class TagInputComponent extends React.Component<ITagInputComponentProps> {
+class TagInputComponent extends React.Component<TagInputComponentProps> {
  render() {
    return (
      <Container {...this.props}>
@ -15,21 +15,21 @@ class TagInputComponent extends React.Component<ITagInputComponentProps> {
  }
 }

-export interface ITagInputComponentProps extends IComponentProps {
-  addOnPaste?: boolean
-  className?: string
-  disabled?: boolean
-  fill?: boolean
-  inputProps?: HTMLInputProps
-  inputValue?: string //Controlled value of the <input> element.
-  intent?: Intent
-  large?: boolean //Whether the tag input should use a large size
-  onInputChange?: React.FormEventHandler<HTMLInputElement>
-  placeholder?: string
-  rightElement?: JSX.Element
-  separator?: string | RegExp | false
-  tagProps?: ITagProps
-  values?: string[] //Required field
+export interface TagInputComponentProps extends ComponentProps {
+  addOnPaste?: boolean;
+  className?: string;
+  disabled?: boolean;
+  fill?: boolean;
+  inputProps?: HTMLInputProps;
+  inputValue?: string; //Controlled value of the <input> element.
+  intent?: Intent;
+  large?: boolean; //Whether the tag input should use a large size
+  onInputChange?: React.FormEventHandler<HTMLInputElement>;
+  placeholder?: string;
+  rightElement?: JSX.Element;
+  separator?: string | RegExp | false;
+  tagProps?: ITagProps;
+  values?: string[]; //Required field
 }

 export default TagInputComponent
--- a/app/client/src/editorComponents/TextComponent.tsx
+++ b/app/client/src/editorComponents/TextComponent.tsx
@ -1,5 +1,5 @@
 import * as React from "react"
-import { IComponentProps } from "./BaseComponent"
+import { ComponentProps } from "./BaseComponent"
 import { Text } from "@blueprintjs/core"
 import { Container } from "./ContainerComponent"
 class TextComponent extends React.Component<ITextComponentProps> {
@ -14,10 +14,10 @@ class TextComponent extends React.Component<ITextComponentProps> {
  }
 }

-export interface ITextComponentProps extends IComponentProps {
-  text?: string
-  ellipsize?: boolean
-  tagName?: keyof JSX.IntrinsicElements
+export interface ITextComponentProps extends ComponentProps {
+  text?: string;
+  ellipsize?: boolean;
+  tagName?: keyof JSX.IntrinsicElements;
 }

 export default TextComponent
--- a/app/client/src/index.css
+++ b/app/client/src/index.css
@ -6,6 +6,11 @@ body {
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
+  background: #efefef;
+}
+
+body.fontLoaded {
+  font-family: "DM Sans, sans-serif";
 }

 code {
--- a/app/client/src/index.tsx
+++ b/app/client/src/index.tsx
@ -4,7 +4,8 @@ import { Provider } from "react-redux";
 import "./index.css";
 import App from "./App";
 import Editor from "./pages/Editor";
-import PageNotFound from "./pages/PageNotFound";
+import PageNotFound from "./pages/common/PageNotFound";
+import LoginPage from "./pages/common/LoginPage";
 import * as serviceWorker from "./serviceWorker";
 import { BrowserRouter, Route, Switch } from "react-router-dom";
 import { createStore, applyMiddleware } from "redux";
@ -13,25 +14,42 @@ import WidgetBuilderRegistry from "./utils/WidgetRegistry";
 import { ThemeProvider, theme } from "./constants/DefaultTheme";
 import createSagaMiddleware from 'redux-saga'
 import { rootSaga } from "./sagas"
-import { ActionType, ReduxAction } from "./constants/ActionConstants";
+import FontFaceObserver from "fontfaceobserver";
+import { DndProvider } from "react-dnd"
+import HTML5Backend from "react-dnd-html5-backend"
+import { appInitializer } from "./utils/AppsmithUtils";

+// font face observer
+const textFont = new FontFaceObserver("DM Sans");
+const widgetIconFont = new FontFaceObserver("appmith-widget-font");
+Promise.all([textFont.load(), widgetIconFont.load()]).then(()=>{
+  document.body.className += "fontLoaded";
+}).catch(err => {
+  console.log(err);
+});
+
+
+appInitializer();
 WidgetBuilderRegistry.registerWidgetBuilders();
 const sagaMiddleware = createSagaMiddleware()
 const store = createStore(appReducer, applyMiddleware(sagaMiddleware));
 sagaMiddleware.run(rootSaga)
-
 ReactDOM.render(
+
+  <DndProvider backend={HTML5Backend}>
    <Provider store={store}>
      <ThemeProvider theme={theme}>
        <BrowserRouter>
          <Switch>
            <Route exact path="/" component={App} />
-          <Route exact path="/builder" component={Editor} />
+            <Route path="/builder" component={Editor} />
+            <Route exact path="/login" component={LoginPage} />
            <Route component={PageNotFound} />
          </Switch>
        </BrowserRouter>
      </ThemeProvider>
-  </Provider>,
+    </Provider>
+  </DndProvider>,
  document.getElementById("root")
 );

--- a/app/client/src/mockResponses/CanvasResponse.tsx
+++ b/app/client/src/mockResponses/CanvasResponse.tsx
@ -1,173 +0,0 @@
-import { IContainerWidgetProps } from "../widgets/ContainerWidget"
-import { RenderModes } from "../constants/WidgetConstants"
-
-const CanvasResponse: IContainerWidgetProps<any> = {
-  widgetId: "0",
-  widgetType: "CONTAINER_WIDGET",
-  snapColumns: 10,
-  snapRows: 10,
-  topRow: 100,
-  bottomRow: 700,
-  leftColumn: 100,
-  rightColumn: 1000,
-  parentColumnSpace: 1,
-  parentRowSpace: 1,
-  renderMode: RenderModes.CANVAS,
-  children: [
-    {
-      widgetId: "1",
-      widgetType: "TEXT_WIDGET",
-      topRow: 2,
-      leftColumn: 1,
-      bottomRow: 5,
-      rightColumn: 3,
-      text: "Lorem Ipsum asda asd kjhsadjhas kdh kashkjdas kdhas d as",
-      renderMode: RenderModes.CANVAS
-    },
-    {
-      widgetId: "2",
-      widgetType: "BUTTON_WIDGET",
-      topRow: 2,
-      leftColumn: 4,
-      bottomRow: 5,
-      rightColumn: 5,
-      text: "Lorem Ipsum",
-      renderMode: RenderModes.CANVAS
-    },
-    {
-      widgetId: "3",
-      widgetType: "INPUT_GROUP_WIDGET",
-      topRow: 1,
-      leftColumn: 1,
-      bottomRow: 1,
-      rightColumn: 5,
-      placeholder: "Lorem Ipsum",
-      renderMode: RenderModes.CANVAS
-    },
-    {
-      widgetId: "4",
-      widgetType: "CALLOUT_WIDGET",
-      topRow: 2,
-      leftColumn: 8,
-      bottomRow: 4,
-      rightColumn: 14,
-      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",
-      renderMode: RenderModes.CANVAS
-    },
-    {
-      widgetId: "5",
-      widgetType: "ICON_WIDGET",
-      topRow: 4,
-      leftColumn: 2,
-      bottomRow: 5,
-      rightColumn: 3,
-      icon: "globe",
-      iconSize: "20",
-      intent: "warning",
-      renderMode: RenderModes.CANVAS
-    },
-    {
-      widgetId: "6",
-      widgetType: "SPINNER_WIDGET",
-      topRow: 5,
-      leftColumn: 6,
-      bottomRow: 5,
-      rightColumn: 5,
-      size: 20
-    },
-    {
-      widgetId: "7",
-      widgetType: "BREADCRUMBS_WIDGET",
-      topRow: 6,
-      leftColumn: 2,
-      bottomRow: 5,
-      rightColumn: 5,
-      width: "100%",
-      collapseFrom: "start",
-      className: "breadcrumbs",
-      size: 20,
-      renderMode: RenderModes.CANVAS,
-      items: [
-        { icon: "folder-close", text: "All files" },
-        { icon: "folder-close", text: "Users" },
-        { icon: "folder-close", text: "Janet" },
-        { href: "#", icon: "folder-close", text: "Photos" },
-        { href: "#", icon: "folder-close", text: "Wednesday" },
-        { icon: "document", text: "image.jpg" }
-      ]
-    },
-    {
-      widgetId: "8",
-      widgetType: "TAG_INPUT_WIDGET",
-      topRow: 7,
-      leftColumn: 1,
-      bottomRow: 5,
-      rightColumn: 5,
-      palceholder: "Lorem, Ipsum",
-      values: ["abx", "somf", "soke"],
-      renderMode: RenderModes.CANVAS
-    },
-    {
-      widgetId: "9",
-      widgetType: "NUMERIC_INPUT_WIDGET",
-      topRow: 4,
-      leftColumn: 1,
-      bottomRow: 5,
-      rightColumn: 5,
-      palceholder: "Numeric input",
-      allowNumericCharactersOnly: true,
-      renderMode: RenderModes.CANVAS
-    },
-    {
-      widgetId: "10",
-      widgetType: "CHECKBOX_WIDGET",
-      topRow: 6,
-      leftColumn: 1,
-      bottomRow: 5,
-      rightColumn: 5,
-      items: [
-        {
-          label: "a",
-          value: 1
-        },
-        {
-          label: "b",
-          value: 2
-        },
-        {
-          label: "c",
-          value: 3
-        }
-      ]
-    },
-    {
-      widgetId: "11",
-      widgetType: "RADIO_GROUP_WIDGET",
-      topRow: 6,
-      leftColumn: 1,
-      bottomRow: 5,
-      rightColumn: 5,
-      items: [
-        {
-          label: "a",
-          value: 1
-        },
-        {
-          label: "b",
-          value: 2
-        },
-        {
-          label: "c",
-          value: 3
-        }
-      ]
-    }
-  ]
-}
-
-export default CanvasResponse
--- a/app/client/src/mockResponses/WidgetCardsPaneResponse.tsx
+++ b/app/client/src/mockResponses/WidgetCardsPaneResponse.tsx
@ -0,0 +1,35 @@
+import { WidgetCardsPaneReduxState } from "../reducers/uiReducers/widgetCardsPaneReducer";
+
+const WidgetCardsPaneResponse: WidgetCardsPaneReduxState = {
+  cards: {
+    common: [
+      {
+        widgetType: "BUTTON_WIDGET",
+        icon: "appsmith-widget-button",
+        label: "Button",
+      },
+    ],
+    form: [
+      {
+        widgetType: "BUTTON_WIDGET",
+        icon: "appsmith-widget-button",
+        label: "Button",
+      },
+      {
+        widgetType: "CALLOUT_WIDGET",
+        icon: "appsmith-widget-alert",
+        label: "Callout",
+      }
+    ],
+    view: [
+      {
+        widgetType: "BUTTON_WIDGET",
+        icon: "appsmith-widget-button",
+        label: "Button",
+      }
+    ]
+  }
+};
+
+
+export default WidgetCardsPaneResponse;
--- a/app/client/src/mockResponses/WidgetPaneResponse.tsx
+++ b/app/client/src/mockResponses/WidgetPaneResponse.tsx
@ -1,33 +0,0 @@
-import { WidgetPaneReduxState } from "../reducers/uiReducers/widgetPaneReducer"
-import { RenderModes } from "../constants/WidgetConstants"
-
-const WidgetPaneResponse: WidgetPaneReduxState = {
-  widgets: [
-    {
-      widgetType: "BUTTON_WIDGET",
-      text: "Lorem Ipsum",
-      renderMode: RenderModes.COMPONENT_PANE,
-      bottomRow: 50,
-      widgetId: "1",
-      rightColumn: 200
-    },
-    {
-      widgetType: "TEXT_WIDGET",
-      text: "Lorem Ipsum",
-      renderMode: RenderModes.COMPONENT_PANE,
-      bottomRow: 50,
-      widgetId: "2",
-      rightColumn: 200
-    },
-    {
-      widgetType: "SPINNER_WIDGET",
-      renderMode: RenderModes.COMPONENT_PANE,
-      backgroundColor: "#434343",
-      bottomRow: 50,
-      widgetId: "3",
-      rightColumn: 200
-    }
-  ]
-}
-
-export default WidgetPaneResponse
--- a/app/client/src/normalizers/CanvasWidgetsNormalizer.tsx
+++ b/app/client/src/normalizers/CanvasWidgetsNormalizer.tsx
@ -1,10 +1,10 @@
 import { normalize, schema, denormalize } from 'normalizr';
 import { PageResponse } from '../api/PageApi';
-import { IContainerWidgetProps } from '../widgets/ContainerWidget';
+import { ContainerWidgetProps } from '../widgets/ContainerWidget';

-export const widgetSchema = new schema.Entity('canvasWidgets', { }, { idAttribute: "widgetId" }, );
-const widgets = new schema.Array(widgetSchema);
-widgetSchema.define({ children: widgets });
+export const widgetSchema = new schema.Entity('canvasWidgets', { }, { idAttribute: "widgetId" });
+// const widgets = new schema.Array(widgetSchema);
+widgetSchema.define({ children: [widgetSchema] });

 class CanvasWidgetsNormalizer {

@ -12,7 +12,7 @@ class CanvasWidgetsNormalizer {
        return normalize(pageResponse.pageWidget, widgetSchema)
    }

-    static denormalize(pageWidgetId: string, entities: any): IContainerWidgetProps<any> {
+    static denormalize(pageWidgetId: string, entities: any): ContainerWidgetProps<any> {
        return denormalize(pageWidgetId, widgetSchema, entities)
    }

--- a/app/client/src/pages/Editor/Canvas.tsx
+++ b/app/client/src/pages/Editor/Canvas.tsx
@ -1,46 +1,82 @@
-import React, { Component } from "react"
-import { connect } from "react-redux"
-import { AppState } from "../../reducers"
+import React, { MutableRefObject, useLayoutEffect } from "react"
+import styled from "styled-components"
 import WidgetFactory from "../../utils/WidgetFactory"
-import CanvasWidgetsNormalizer, { widgetSchema } from "../../normalizers/CanvasWidgetsNormalizer";
-import { IContainerWidgetProps } from "../../widgets/ContainerWidget";
-import { fetchPage } from "../../actions/pageActions";
-import { RenderModes } from "../../constants/WidgetConstants";
+import { WidgetTypes } from "../../constants/WidgetConstants"
+import { DraggableWidget } from "../../widgets/BaseWidget"
+import { useDrop } from "react-dnd"
+import { ContainerWidgetProps } from "../../widgets/ContainerWidget"
+import EditorDragLayer from "./EditorDragLayer"

-class Canvas extends Component<{ pageWidget: IContainerWidgetProps<any>, fetchPage: Function }> {
+const ArtBoardBackgroundMask = styled.div`
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  top: 0;
+  z-index: -10;
+`;

-  componentDidMount() {
-    this.props.fetchPage("123")
+const ArtBoard = styled.div<ArtBoardProps>`
+  width: 100%;
+  height: 100%;
+  position:relative;
+  overflow: auto;
+  background: linear-gradient(
+    90deg, 
+    transparent, 
+    transparent 1px, 
+    #ffffff 1px, 
+    #ffffff 63px,
+    transparent 63px, 
+    transparent 100%),
+  linear-gradient(
+    transparent, 
+    transparent 1px, 
+    #ffffff 1px, 
+    #ffffff 63px, 
+    transparent 63px, 
+    transparent 100%), black;
+background-size: 64px 64px;
+background-position:0 0;
+`;
+
+interface CanvasProps {
+  pageWidget: ContainerWidgetProps<any>;
+  addWidget: Function;
 }

-  render() {
-    const pageWidget = this.props.pageWidget
+interface ArtBoardProps {
+  cellSize: string;
+}
+
+const Canvas = (props: CanvasProps) => {
+  const [width, setWidth] = React.useState(1)
+  const artBoardMask: MutableRefObject<HTMLDivElement | null> = React.useRef(null)
+  const [, drop] = useDrop({
+    accept: Object.values(WidgetTypes),
+    drop(item: DraggableWidget) {
+      props.addWidget(item.type, item.key);
+      return undefined
+    },
+  })
+
+  useLayoutEffect(()=> {
+    const el = artBoardMask.current
+    if (el) {
+      const rect = el.getBoundingClientRect()
+      setWidth(rect.width)
+    }
+  }, [setWidth])
+
  return (
-      <div>
-        {pageWidget
-          ? WidgetFactory.createWidget(pageWidget)
-          : undefined}
-      </div>
+    <React.Fragment>
+      <EditorDragLayer />
+    <ArtBoard ref={drop} cellSize={(Math.floor(width / 16) - 1)+ "px"}>
+      <ArtBoardBackgroundMask ref={artBoardMask}></ArtBoardBackgroundMask>
+      {props.pageWidget && WidgetFactory.createWidget(props.pageWidget)}
+    </ArtBoard>
+    </React.Fragment>
  )
 }
-}

-const mapStateToProps = (state: AppState, props: any) => {
-  const pageWidget = CanvasWidgetsNormalizer.denormalize(state.ui.canvas.pageWidgetId, state.entities)
-  return {
-    pageWidget: pageWidget
-  }
-}
-
-const mapDispatchToProps = (dispatch: any) => {
-  return {
-    fetchPage: (pageId: string) => {
-      return dispatch(fetchPage(pageId, RenderModes.CANVAS))
-    }
-  }
-}
-
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(Canvas)
+export default Canvas
--- a/app/client/src/pages/Editor/EditorDragLayer.tsx
+++ b/app/client/src/pages/Editor/EditorDragLayer.tsx
@ -0,0 +1,88 @@
+import React from 'react'
+import styled from 'styled-components'
+import { XYCoord, useDragLayer } from 'react-dnd'
+import snapToGrid from './snapToGrid'
+import WidgetFactory from '../../utils/WidgetFactory';
+import { RenderModes,  WidgetType } from '../../constants/WidgetConstants';
+
+const WrappedDragLayer = styled.div`
+  position: absolute;
+  pointer-events: none;
+  z-index: 100;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  border: 10px solid #000;
+`;
+
+
+function getItemStyles(
+  initialOffset: XYCoord | null,
+  currentOffset: XYCoord | null
+) {
+  if (!initialOffset || !currentOffset) {
+    return {
+      display: 'none',
+    }
+  }
+
+  let { x, y } = currentOffset
+
+    x -= initialOffset.x
+    y -= initialOffset.y
+    ;[x, y] = snapToGrid(64, x, y)
+    x += initialOffset.x
+    y += initialOffset.y
+  
+  const transform = `translate(${x}px, ${y}px)`
+  return {
+    transform,
+    WebkitTransform: transform,
+  }
+}
+
+
+const EditorDragLayer: React.FC = () => {
+  const {
+    itemType,
+    isDragging,
+    item,
+    initialOffset,
+    currentOffset,
+  } = useDragLayer(monitor => ({
+    item: monitor.getItem(),
+    itemType: monitor.getItemType(),
+    initialOffset: monitor.getInitialSourceClientOffset(),
+    currentOffset: monitor.getSourceClientOffset(),
+    isDragging: monitor.isDragging(),
+  }))
+
+  function renderItem() {
+      return WidgetFactory.createWidget({
+        widgetType: itemType as WidgetType,
+        widgetId: item.key,
+        topRow: 10,
+        leftColumn: 10,
+        bottomRow: 14,
+        rightColumn: 20,
+        parentColumnSpace: 1,
+        parentRowSpace: 1,
+        renderMode: RenderModes.CANVAS
+      })
+  }
+
+  if (!isDragging) {
+    return null
+  }
+  return (
+    <WrappedDragLayer>
+      <div
+        style={getItemStyles(initialOffset, currentOffset)}
+      >
+        {renderItem()}
+      </div>
+    </WrappedDragLayer>
+  )
+}
+export default EditorDragLayer
--- a/app/client/src/pages/Editor/EditorHeader.tsx
+++ b/app/client/src/pages/Editor/EditorHeader.tsx
@ -0,0 +1,34 @@
+import React, { Component } from "react"
+import styled from "styled-components"
+import { connect } from "react-redux"
+import { AppState } from "../../reducers"
+import { EditorHeaderReduxState } from "../../reducers/uiReducers/editorHeaderReducer";
+
+const Header = styled.header`
+  height: 50px;
+  box-shadow: 0px 0px 3px #ccc;
+  background: #fff;
+`;
+
+
+class EditorHeader extends Component<EditorHeaderReduxState> {
+  render() {
+    return (
+      <Header>
+      </Header>
+    )
+  }
+}
+
+const mapStateToProps = (state: AppState, props: any): EditorHeaderReduxState => {
+  return {}
+}
+
+const mapDispatchToProps = (dispatch: any) => {
+  return {}
+}
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(EditorHeader)
--- a/app/client/src/pages/Editor/WidgetCard.tsx
+++ b/app/client/src/pages/Editor/WidgetCard.tsx
@ -0,0 +1,84 @@
+import React, { useState, useLayoutEffect, MutableRefObject } from 'react';
+import { useDrag, DragSourceMonitor, DragPreviewImage } from 'react-dnd'
+import blankImage from "../../assets/images/blank.png"
+import { WidgetCardProps } from '../../widgets/BaseWidget'
+import styled from 'styled-components';
+import { generateReactKey } from "../../utils/generators"
+
+
+type CardProps = {
+  details: WidgetCardProps;
+}
+
+export const Wrapper = styled.div`
+  display:flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  flex: 1;
+  padding: 10px 5px 10px 5px;
+  border-radius: ${props => props.theme.radii[1]}px;
+  background: ${props => props.theme.colors.paneCard};
+  border: 1px solid ${props=> props.theme.colors.paneCard};
+  color: ${props => props.theme.colors.textOnDarkBG};
+  & > div {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+  }
+  &:hover{
+    background: #fff;
+    cursor: grab;
+    color: ${props => props.theme.colors.textDefault}
+  }
+  & i {
+    font-family: ${props => props.theme.fonts[2]};
+    font-size: ${props => props.theme.fontSizes[7]}px;
+  }
+`;
+
+export const IconLabel = styled.h5`
+  text-align: center;
+  margin: 0;
+  text-transform: uppercase;
+  font-weight: ${props => props.theme.fontWeights[1]};
+  flex-shrink: 1;
+  font-size: ${props => props.theme.fontSizes[1]}px;
+`;
+
+/* eslint-disable @typescript-eslint/no-unused-vars */
+const WidgetCard = (props: CardProps) => {
+  const [initialOffset, setInitialOffset] = useState({ x: 0, y: 0})
+
+  const [{ isDragging }, drag, preview] = useDrag({ 
+    item: { type: props.details.widgetType, widget: props.details, key: generateReactKey(), initialOffset},
+    collect: (monitor: DragSourceMonitor) => ({
+      isDragging: monitor.isDragging(),
+    }),
+  })
+  const card: MutableRefObject<HTMLDivElement | null> = React.useRef(null)
+  useLayoutEffect(()=> {
+    const el = card.current
+    if (el) {
+      const rect = el.getBoundingClientRect()
+      setInitialOffset({
+        x: Math.ceil(rect.left),
+        y: Math.ceil(rect.top)
+      })
+    }
+  }, [setInitialOffset]);
+  return (
+    <React.Fragment >
+      <DragPreviewImage connect={preview} src={blankImage} />
+      <Wrapper ref={drag}>
+        <div ref={card}>
+          <i className={props.details.icon} />
+          <IconLabel>{props.details.label}</IconLabel>
+        </div>
+      </Wrapper>
+    </React.Fragment>
+  )
+}
+
+export default WidgetCard
--- a/app/client/src/pages/Editor/WidgetCardsPane.tsx
+++ b/app/client/src/pages/Editor/WidgetCardsPane.tsx
@ -0,0 +1,44 @@
+import React from "react"
+import WidgetCard from "./WidgetCard"
+import styled from "styled-components"
+import { WidgetCardProps } from "../../widgets/BaseWidget"
+
+type WidgetCardPaneProps  = {
+  cards: { [id: string]: WidgetCardProps[]};
+}
+
+const CardsPaneWrapper = styled.div`
+  width: 256px;
+  background-color: ${props => props.theme.colors.paneBG}; 
+  border-radius: ${props => props.theme.radii[2]}px;
+  box-shadow: 0px 0px 3px ${props => props.theme.colors.paneBG};
+  padding: 5px 10px;
+  color: ${props => props.theme.colors.textOnDarkBG};
+  text-transform: capitalize;
+`;
+
+const CardsWrapper = styled.div`
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  grid-gap: ${props => props.theme.spaces[2]}px;
+`;
+
+const WidgetCardsPane: React.SFC<WidgetCardPaneProps> = (props: WidgetCardPaneProps) => {
+  const groups = Object.keys(props.cards)  
+  return (
+      <CardsPaneWrapper>
+        {
+          groups.map((group: string) => 
+            <React.Fragment key={group}>
+              <h5>{group}</h5>
+              <CardsWrapper>
+                { props.cards[group].map((card: WidgetCardProps) => <WidgetCard details={card} key={card.widgetType} />) }
+              </CardsWrapper>
+            </React.Fragment>
+          )
+        }
+      </CardsPaneWrapper>
+    )
+}
+
+export default WidgetCardsPane
--- a/app/client/src/pages/Editor/WidgetPane.tsx
+++ b/app/client/src/pages/Editor/WidgetPane.tsx
@ -1,31 +0,0 @@
-import React, { Component } from "react"
-import { connect } from "react-redux"
-import { AppState } from "../../reducers"
-import WidgetFactory from "../../utils/WidgetFactory"
-import { WidgetPaneReduxState } from "../../reducers/uiReducers/widgetPaneReducer";
-import { IWidgetProps } from "../../widgets/BaseWidget";
-
-class WidgetPane extends Component<WidgetPaneReduxState> {
-  render() {
-    return (<div style={{ height: "600px", width: "300px", backgroundColor: "#f4f4f4", position: "absolute", top: 100 }}>
-      {this.props.widgets.map((widget: IWidgetProps) => {
-        return WidgetFactory.createWidget(widget)
-      })}
-    </div>)
-  }
-}
-
-const mapStateToProps = (state: AppState, props: any): WidgetPaneReduxState => {
-  return {
-    widgets: state.ui.widgetPane.widgets
-  }
-}
-
-const mapDispatchToProps = (dispatch: any) => {
-  return {}
-}
-
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(WidgetPane)
--- a/app/client/src/pages/Editor/index.tsx
+++ b/app/client/src/pages/Editor/index.tsx
@ -1,16 +1,110 @@
 import React, { Component } from "react"
+import { connect } from "react-redux"
+import styled from "styled-components"
 import Canvas from "./Canvas"
-import WidgetPane from "./WidgetPane"
+import { WidgetCardProps, IWidgetProps } from '../../widgets/BaseWidget'
+import { AppState } from "../../reducers"
+import { EditorReduxState } from "../../reducers/uiReducers/editorReducer"
+import WidgetCardsPane from "./WidgetCardsPane"
+import EditorHeader from "./EditorHeader"
+import { WidgetType } from "../../constants/WidgetConstants"
+import CanvasWidgetsNormalizer from "../../normalizers/CanvasWidgetsNormalizer"
+import { ContainerWidgetProps } from "../../widgets/ContainerWidget"
+import { fetchPage, addWidget } from "../../actions/pageActions"
+import { RenderModes } from "../../constants/WidgetConstants"
+// import EditorDragLayer  from "./EditorDragLayer"

-class Editor extends Component {
-  render() {
+const CanvasContainer = styled.section`
+  height: 100%;
+  width: 100%;
+  position: relative;
+  overflow-x: hidden;
+  overflow-y: auto;
+  margin: 0px 10px;
+  &:before {
+    position: absolute;
+    top: 0; right: 0; bottom: 0; left: 0;
+    z-index: 1000;
+    pointer-events: none;
+  }
+`;
+
+const EditorWrapper = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: stretch;
+  justify-content: flex-start;
+  width: 100vw;
+  overflow: hidden;
+  padding: 10px;
+  height: calc(100vh - 60px);
+`;
+
+type EditorProps = {
+  pageWidget: ContainerWidgetProps<any> | any;
+  fetchCanvasWidgets: Function;
+  cards: { [id: string]: WidgetCardProps[] } | any;
+  addPageWidget: Function;
+  page: string;
+}
+
+class Editor extends Component<EditorProps> {
+  componentDidMount() {
+    this.props.fetchCanvasWidgets("1")
+  }
+
+  addWidgetToCanvas = (widgetType: WidgetType, key: string): void => {
+    this.props.addPageWidget("1", {
+      key: key,
+      bottomRow: 9,
+      leftColumn: 1,
+      parentColumnSpace: 90,
+      parentRowSpace: 50,
+      renderMode: RenderModes.CANVAS,
+      rightColumn: 3,
+      snapColumns: 20,
+      snapRows: 20,
+      children: [],
+      topRow: 1,
+      widgetId: key,
+      widgetType: widgetType
+    })
+  }
+
+  public render() {
    return (
-      <div style={{ display: "flex", flexDirection: "row-reverse" }}>
-        <Canvas />
-        <WidgetPane />
-      </div>
+      <React.Fragment>
+        <EditorHeader></EditorHeader>
+        <EditorWrapper>
+          <WidgetCardsPane cards={this.props.cards} />
+          <CanvasContainer>
+            <Canvas pageWidget={this.props.pageWidget} addWidget={this.addWidgetToCanvas} />
+          </CanvasContainer>
+        </EditorWrapper>
+      </React.Fragment>
    )
  }
 }

-export default Editor
+const mapStateToProps = (state: AppState, props: EditorProps): EditorReduxState => {
+  const pageWidget = CanvasWidgetsNormalizer.denormalize(
+    state.ui.canvas.pageWidgetId,
+    state.entities
+  )
+  return {
+    cards: state.ui.widgetCardsPane.cards,
+    pageWidget,
+  }
+}
+
+const mapDispatchToProps = (dispatch: any) => {
+  return {
+    fetchCanvasWidgets: (pageId: string) => dispatch(fetchPage(pageId, RenderModes.CANVAS)),
+    addPageWidget: (pageId: string, widgetProps: IWidgetProps) => dispatch(addWidget(pageId, widgetProps))
+  }
+}
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(Editor)
--- a/app/client/src/pages/Editor/snapToGrid.ts
+++ b/app/client/src/pages/Editor/snapToGrid.ts
@ -0,0 +1,5 @@
+export default function snapToGrid(cellSize: number, x: number, y: number) {
+  const snappedX = Math.round(x / cellSize) * cellSize
+  const snappedY = Math.round(y / cellSize) * cellSize
+  return [snappedX, snappedY]
+}
--- a/app/client/src/pages/common/LoginPage.tsx
+++ b/app/client/src/pages/common/LoginPage.tsx
@ -0,0 +1,21 @@
+import * as React from "react"
+import { RouterProps } from "react-router";
+import netlifyIdentity from 'netlify-identity-widget';
+
+class LoginPage extends React.PureComponent<RouterProps> {
+
+    componentDidMount() {
+        netlifyIdentity.open()
+    }
+
+    render() {
+        return (
+            <div style={{ textAlign: "center" }}>
+            </div>
+        )
+    }
+}
+
+export default LoginPage
+
+
--- a/app/client/src/pages/common/PageNotFound.tsx
+++ b/app/client/src/pages/common/PageNotFound.tsx
@ -1,7 +1,6 @@
 import * as React from "react"

 import { NonIdealState, Button, Card, Elevation } from "@blueprintjs/core"
-import App from "../App";
 import { RouterProps } from "react-router";

 class PageNotFound extends React.PureComponent<RouterProps> {
--- a/app/client/src/pages/common/ProtectedRoute.tsx
+++ b/app/client/src/pages/common/ProtectedRoute.tsx
@ -0,0 +1,16 @@
+import * as React from "react"
+import _ from "lodash"
+import { Route, Redirect } from "react-router-dom";
+
+import netlifyIdentity from 'netlify-identity-widget';
+
+const ProtectedRoute = ({ path: path, component: Component, ...rest }: { path: string, component: React.ReactType }) => {
+  // let windowDoc: any = window
+  return (<Route {...rest} render={(props) => (
+    !_.isNil(netlifyIdentity.currentUser())
+      ? <Component {...props} />
+      : <Redirect to={"/login"} />
+  )} />)
+}
+
+export default ProtectedRoute
--- a/app/client/src/reducers/entityReducers/canvasWidgetsReducers.tsx
+++ b/app/client/src/reducers/entityReducers/canvasWidgetsReducers.tsx
@ -1,24 +1,17 @@
-import { createReducer } from "../../utils/PicassoUtils"
+import { createReducer } from "../../utils/AppsmithUtils"
 import {
  ActionTypes,
  LoadCanvasPayload,
  ReduxAction
 } from "../../constants/ActionConstants"
 import { IWidgetProps } from "../../widgets/BaseWidget"
-import { RenderModes } from "../../constants/WidgetConstants"
+import CanvasWidgetsNormalizer from "../../normalizers/CanvasWidgetsNormalizer";

-const initialState: CanvasWidgetsReduxState = {
-  "0": {
-    widgetId: "0",
-    widgetType: "CONTAINER_WIDGET",
-    topRow: 100,
-    bottomRow: 700,
-    leftColumn: 100,
-    rightColumn: 800,
-    parentColumnSpace: 1,
-    parentRowSpace: 1,
-    renderMode: RenderModes.CANVAS
-  }
+const initialState: CanvasWidgetsReduxState = {}
+
+
+export interface IFlattenedWidgetProps extends IWidgetProps {
+  children?: string[];
 }

 const canvasWidgetsReducer = createReducer(initialState, {
@ -27,11 +20,26 @@ const canvasWidgetsReducer = createReducer(initialState, {
    action: ReduxAction<LoadCanvasPayload>
  ) => {
    return { ...action.payload.widgets }
+  },
+  [ActionTypes.ADD_PAGE_WIDGET]: (
+    state: CanvasWidgetsReduxState,
+    action: ReduxAction<{pageId: string, widget: IWidgetProps}>
+  ) => {
+    const widget = action.payload.widget
+    const widgetTree = CanvasWidgetsNormalizer.denormalize("0", { canvasWidgets: state })
+    const children = widgetTree.children || []
+    children.push(widget)
+    widgetTree.children = children
+    const newState =  CanvasWidgetsNormalizer.normalize({
+      responseMeta: {},
+      pageWidget: widgetTree
+    }).entities
+    return newState.canvasWidgets
  }
 })

 export interface CanvasWidgetsReduxState {
-  [widgetId: string]: IWidgetProps
+  [widgetId: string]: IFlattenedWidgetProps;
 }

 export default canvasWidgetsReducer
--- a/app/client/src/reducers/index.tsx
+++ b/app/client/src/reducers/index.tsx
@ -3,7 +3,9 @@ import entityReducer from "./entityReducers"
 import uiReducer from "./uiReducers"
 import { CanvasReduxState } from "./uiReducers/canvasReducer"
 import { CanvasWidgetsReduxState } from "./entityReducers/canvasWidgetsReducers"
-import { WidgetPaneReduxState } from "./uiReducers/widgetPaneReducer"
+import { WidgetCardsPaneReduxState } from "./uiReducers/widgetCardsPaneReducer"
+import { EditorHeaderReduxState } from "./uiReducers/editorHeaderReducer"
+import { EditorReduxState } from "./uiReducers/editorReducer"

 const appReducer = combineReducers({
  entities: entityReducer,
@ -15,7 +17,9 @@ export default appReducer
 export interface AppState {
  ui: {
    canvas: CanvasReduxState
-    widgetPane: WidgetPaneReduxState
+    widgetCardsPane: WidgetCardsPaneReduxState
+    editorHeader: EditorHeaderReduxState
+    editor: EditorReduxState
  }
  entities: {
    canvasWidgets: CanvasWidgetsReduxState
--- a/app/client/src/reducers/uiReducers/canvasReducer.tsx
+++ b/app/client/src/reducers/uiReducers/canvasReducer.tsx
@ -1,4 +1,4 @@
-import { createReducer } from "../../utils/PicassoUtils"
+import { createReducer } from "../../utils/AppsmithUtils"
 import {
  ActionTypes,
  LoadCanvasPayload,
--- a/app/client/src/reducers/uiReducers/editorHeaderReducer.tsx
+++ b/app/client/src/reducers/uiReducers/editorHeaderReducer.tsx
@ -0,0 +1,9 @@
+import { createReducer } from "../../utils/AppsmithUtils"
+
+const initialState: EditorHeaderReduxState = {}
+
+const editorHeaderReducer = createReducer(initialState, {})
+
+export interface EditorHeaderReduxState {}
+
+export default editorHeaderReducer
--- a/app/client/src/reducers/uiReducers/editorReducer.tsx
+++ b/app/client/src/reducers/uiReducers/editorReducer.tsx
@ -0,0 +1,41 @@
+import { createReducer } from "../../utils/AppsmithUtils"
+import {
+  ActionTypes,
+  ReduxAction,
+  LoadCanvasPayload,
+  LoadWidgetCardsPanePayload
+} from "../../constants/ActionConstants"
+import { WidgetCardProps, IWidgetProps } from "../../widgets/BaseWidget"
+import { ContainerWidgetProps } from "../../widgets/ContainerWidget"
+
+const initialState: EditorReduxState = {}
+
+const editorReducer = createReducer(initialState, {
+  [ActionTypes.SUCCESS_FETCHING_WIDGET_CARDS]: (
+    state: EditorReduxState,
+    action: ReduxAction<LoadWidgetCardsPanePayload>
+  ) => {
+    return { ...state.pageWidget, ...action.payload }
+  },
+  [ActionTypes.ADD_PAGE_WIDGET]: (
+    state: EditorReduxState,
+    action: ReduxAction<{pageId: string, widget: IWidgetProps}>
+  ) => {
+    return state
+  },
+  [ActionTypes.UPDATE_CANVAS]: (
+    state: EditorReduxState,
+    action: ReduxAction<LoadCanvasPayload>
+  ) => {
+    return { pageWidgetId: action.payload.pageWidgetId }
+  }
+})
+
+export interface EditorReduxState {
+  pageWidget?: ContainerWidgetProps<any>;
+  cards?: {
+    [id: string]: WidgetCardProps[];
+  };
+}
+
+export default editorReducer
--- a/app/client/src/reducers/uiReducers/index.tsx
+++ b/app/client/src/reducers/uiReducers/index.tsx
@ -1,6 +1,8 @@
 import { combineReducers } from "redux"
 import canvasReducer from "./canvasReducer"
-import widgetPaneReducer from "./widgetPaneReducer";
+import widgetCardsPaneReducer from "./widgetCardsPaneReducer"
+import editorHeaderReducer from "./editorHeaderReducer"
+import editorReducer from "./editorReducer"

-const uiReducer = combineReducers({ canvas: canvasReducer, widgetPane: widgetPaneReducer })
+const uiReducer = combineReducers({ canvas: canvasReducer, widgetCardsPane: widgetCardsPaneReducer, editorHeader: editorHeaderReducer, editor: editorReducer })
 export default uiReducer
--- a/app/client/src/reducers/uiReducers/widgetCardsPaneReducer.tsx
+++ b/app/client/src/reducers/uiReducers/widgetCardsPaneReducer.tsx
@ -0,0 +1,27 @@
+import { createReducer } from "../../utils/AppsmithUtils"
+import {
+  ActionTypes,
+  ReduxAction,
+  LoadWidgetCardsPanePayload
+} from "../../constants/ActionConstants"
+import { WidgetCardProps } from "../../widgets/BaseWidget";
+import WidgetCardsPaneResponse from "../../mockResponses/WidgetCardsPaneResponse"
+
+const initialState: WidgetCardsPaneReduxState = WidgetCardsPaneResponse
+
+const widgetCardsPaneReducer = createReducer(initialState, {
+  [ActionTypes.ERROR_FETCHING_WIDGET_CARDS]: (
+    state: WidgetCardsPaneReduxState,
+    action: ReduxAction<LoadWidgetCardsPanePayload>
+  ) => {
+    return { cards: action.payload.cards }
+  }
+})
+
+export interface WidgetCardsPaneReduxState {
+  cards: {
+    [id: string]: WidgetCardProps[];
+  };
+}
+
+export default widgetCardsPaneReducer
--- a/app/client/src/reducers/uiReducers/widgetPaneReducer.tsx
+++ b/app/client/src/reducers/uiReducers/widgetPaneReducer.tsx
@ -1,25 +0,0 @@
-import { createReducer } from "../../utils/PicassoUtils"
-import {
-  ActionTypes,
-  ReduxAction,
-  LoadWidgetPanePayload
-} from "../../constants/ActionConstants"
-import { IWidgetProps } from "../../widgets/BaseWidget";
-import WidgetPaneResponse from "../../mockResponses/WidgetPaneResponse"
-
-const initialState: WidgetPaneReduxState = WidgetPaneResponse
-
-const widgetPaneReducer = createReducer(initialState, {
-  // [ActionTypes.LOAD_CANVAS]: (
-  //   state: WidgetPaneReduxState,
-  //   action: ReduxAction<LoadWidgetPanePayload>
-  // ) => {
-  //   return { widgets: action.payload.widgets }
-  // }
-})
-
-export interface WidgetPaneReduxState {
-  widgets: (IWidgetProps | any)[]
-}
-
-export default widgetPaneReducer
--- a/app/client/src/sagas/PageSagas.tsx
+++ b/app/client/src/sagas/PageSagas.tsx
@ -1,11 +1,12 @@
 import CanvasWidgetsNormalizer from "../normalizers/CanvasWidgetsNormalizer"
 import { ActionTypes, ReduxAction } from "../constants/ActionConstants"
 import PageApi, { PageResponse, PageRequest } from "../api/PageApi"
-import { call, put, takeLeading, all, takeEvery } from "redux-saga/effects"
+import { call, put, takeEvery } from "redux-saga/effects"
 import { RenderModes } from "../constants/WidgetConstants"

 export function* fetchPageSaga(pageRequestAction: ReduxAction<PageRequest>) {
  const pageRequest = pageRequestAction.payload
+  try {
    const pageResponse: PageResponse = yield call(PageApi.fetchPage, pageRequest)
    if (pageRequest.renderMode === RenderModes.CANVAS) {
      const normalizedResponse = CanvasWidgetsNormalizer.normalize(pageResponse)
@ -15,6 +16,9 @@ export function* fetchPageSaga(pageRequestAction: ReduxAction<PageRequest>) {
      }
      yield put({ type: ActionTypes.UPDATE_CANVAS, payload })
    }
+  } catch(err){
+    //TODO(abhinav): REFACTOR THIS
+  }
 }

 export function* watchFetchPage() {
--- a/app/client/src/sagas/WidgetCardsPaneSagas.tsx
+++ b/app/client/src/sagas/WidgetCardsPaneSagas.tsx
@ -0,0 +1,19 @@
+// import CanvasWidgetsNormalizer from "../normalizers/CanvasWidgetsNormalizer"
+import { ActionTypes, ReduxAction } from "../constants/ActionConstants"
+import WidgetCardsPaneApi, { WidgetCardsPaneResponse, WidgetCardsPaneRequest } from "../api/WidgetCardsPaneApi"
+import { successFetchingWidgetCards } from "../actions/widgetCardsPaneActions"
+import { call, put, takeLatest } from "redux-saga/effects"
+
+
+export function* fetchWidgetCards(widgetCardsRequestAction: ReduxAction<WidgetCardsPaneRequest>) {
+  try {
+    const widgetCards: WidgetCardsPaneResponse = yield call(WidgetCardsPaneApi.fetchWidgetCards)
+    yield put(successFetchingWidgetCards(widgetCards.cards))
+  } catch(err) {
+    yield put({ type: ActionTypes.ERROR_FETCHING_WIDGET_CARDS, err})
+  }
+}
+
+export function* fetchWidgetCardsSaga() {
+  yield takeLatest(ActionTypes.FETCH_WIDGET_CARDS, fetchWidgetCards)
+}
--- a/app/client/src/sagas/index.tsx
+++ b/app/client/src/sagas/index.tsx
@ -1,6 +1,7 @@
 import { all } from "redux-saga/effects"
 import { watchFetchPage } from "../sagas/PageSagas"
+import { fetchWidgetCardsSaga } from './WidgetCardsPaneSagas'

 export function* rootSaga() {
-  yield all([watchFetchPage()])
+  yield all([watchFetchPage(), fetchWidgetCardsSaga()])
 }
--- a/app/client/src/utils/AnalyticsUtil.tsx
+++ b/app/client/src/utils/AnalyticsUtil.tsx
@ -0,0 +1,59 @@
+
+export type EventName = "PAGE_VIEW" | "ADD_COMPONENT" | "DELETE_COMPONENT" | "RESIZE_COMPONENT"
+export type Gender = "MALE" | "FEMALE"
+export interface User {
+	userId: string
+	name: string
+	email: string
+	gender: Gender
+}
+
+class AnalyticsUtil {
+
+	static initializeHotjar(id: string, sv: string) {
+		(function init(h: any, o: any, t: any, j: any, a?: any, r?: any) {
+			h.hj =
+				h.hj ||
+				function() {
+					(h.hj.q = h.hj.q || []).push(arguments);
+				};
+			h._hjSettings = { hjid: id, hjsv: sv };
+			a = o.getElementsByTagName('head')[0];
+			r = o.createElement('script');
+			r.async = 1;
+			r.src = t + h._hjSettings.hjid + j + h._hjSettings.hjsv;
+			a.appendChild(r);
+		})(window, document, '//static.hotjar.com/c/hotjar-', '.js?sv=');
+	};
+
+	static initializeSegment() {
+		(function init(window: any){
+			var analytics=window.analytics=window.analytics||[];
+			if(!analytics.initialize) {
+				if(analytics.invoked) {
+					window.console&&console.error&&console.error("Segment snippet included twice.");
+				} else {
+					analytics.invoked=!0;analytics.methods=["trackSubmit","trackClick","trackLink","trackForm","pageview","identify","reset","group","track","ready","alias","debug","page","once","off","on"];
+					analytics.factory=function(t: any){return function(){var e=Array.prototype.slice.call(arguments);e.unshift(t);analytics.push(e);return analytics}
+				};
+			}
+			for(var t: any=0;t<analytics.methods.length;t++){var e=analytics.methods[t];analytics[e]=analytics.factory(e)}analytics.load=function(t: any,e: any){var n=document.createElement("script");n.type="text/javascript";n.async=!0;n.src="https://cdn.segment.com/analytics.js/v1/"+t+"/analytics.min.js";var a: any=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(n,a);analytics._loadOptions=e};analytics.SNIPPET_VERSION="4.1.0";
+  			analytics.load("O7rsLdWq7fhJI9rYsj1eatGAjuULTmfP");
+  			analytics.page();
+		  }
+		})(window)
+	}
+
+	static logEvent(eventName: EventName, eventData: any) {
+		const windowDoc: any = window
+		windowDoc.analytics.track(eventName, eventData);
+	}
+
+	static identifyUser(userId: string, userData: User) {
+		const windowDoc: any = window
+		windowDoc.analytics.identify(userId, userData);
+	}
+
+}
+
+export default AnalyticsUtil
--- a/app/client/src/utils/AppsmithUtils.tsx
+++ b/app/client/src/utils/AppsmithUtils.tsx
@ -0,0 +1,36 @@
+import { ReduxAction } from "../constants/ActionConstants"
+import { SENTRY_PROD_CONFIG, SENTRY_STAGE_CONFIG, HOTJAR_PROD_HJID, HOTJAR_PROD_HJSV } from "../constants/ThirdPartyConstants";
+import * as Sentry from '@sentry/browser';
+import AnalyticsUtil from "./AnalyticsUtil"
+import netlifyIdentity from 'netlify-identity-widget';
+
+export const createReducer = (
+  initialState: any,
+  handlers: { [type: string]: Function }
+) => {
+  return function reducer(state = initialState, action: ReduxAction<any>) {
+    if (handlers.hasOwnProperty(action.type)) {
+      return handlers[action.type](state, action)
+    } else {
+      return state
+    }
+  }
+}
+
+export const appInitializer = () => {
+  netlifyIdentity.init();
+  switch (process.env.REACT_APP_ENVIRONMENT) {
+    case "PRODUCTION":
+      Sentry.init(SENTRY_PROD_CONFIG);    
+      AnalyticsUtil.initializeHotjar(HOTJAR_PROD_HJID, HOTJAR_PROD_HJSV);
+      AnalyticsUtil.initializeSegment();
+      break;
+    case "STAGING":
+        Sentry.init(SENTRY_STAGE_CONFIG);
+      break
+    case "LOCAL":
+      break;
+  }
+}
+
+
--- a/app/client/src/utils/PicassoUtils.tsx
+++ b/app/client/src/utils/PicassoUtils.tsx
@ -1,14 +0,0 @@
-import { ReduxAction } from "../constants/ActionConstants"
-
-export const createReducer = (
-  initialState: any,
-  handlers: { [type: string]: Function }
-) => {
-  return function reducer(state = initialState, action: ReduxAction<any>) {
-    if (handlers.hasOwnProperty(action.type)) {
-      return handlers[action.type](state, action)
-    } else {
-      return state
-    }
-  }
-}
--- a/app/client/src/utils/WidgetFactory.tsx
+++ b/app/client/src/utils/WidgetFactory.tsx
@ -15,17 +15,21 @@ class WidgetFactory {
        if (widgetBuilder)
            return widgetBuilder.buildWidget(widgetData)
        else {
-            const ex: IWidgetCreationException = {
+            const ex: WidgetCreationException = {
                message: "Widget Builder not registered for widget type" + widgetData.widgetType
            }
            throw ex
        }
    }

+    static getWidgetTypes(): WidgetType[] {
+        return Array.from(this.widgetMap.keys());
    }

-export interface IWidgetCreationException {
-    message: string
+}
+
+export interface WidgetCreationException {
+    message: string;
 }

 export default WidgetFactory
--- a/app/client/src/utils/WidgetRegistry.tsx
+++ b/app/client/src/utils/WidgetRegistry.tsx
@ -1,104 +1,105 @@
-import BaseWidget, { IWidgetProps } from "../widgets/BaseWidget"
+import { IWidgetProps } from "../widgets/BaseWidget"
 import ContainerWidget, {
-  IContainerWidgetProps
+  ContainerWidgetProps
 } from "../widgets/ContainerWidget"
-import TextWidget, { ITextWidgetProps } from "../widgets/TextWidget"
+import TextWidget, { TextWidgetProps } from "../widgets/TextWidget"
 import InputGroupWidget, {
-  IInputGroupWidgetProps
+  InputGroupWidgetProps
 } from "../widgets/InputGroupWidget"
-import CalloutWidget, { ICalloutWidgetProps } from "../widgets/CalloutWidget"
-import IconWidget, { IIconWidgetProps } from "../widgets/IconWidget"
-import SpinnerWidget, { ISpinnerWidgetProps } from "../widgets/SpinnerWidget"
+import CalloutWidget, { CalloutWidgetProps } from "../widgets/CalloutWidget"
+import IconWidget, { IconWidgetProps } from "../widgets/IconWidget"
+import SpinnerWidget, { SpinnerWidgetProps } from "../widgets/SpinnerWidget"
 import BreadcrumbsWidget, {
-  IBreadcrumbsWidgetProps
+  BreadcrumbsWidgetProps
 } from "../widgets/BreadcrumbsWidget"
-import TagInputWidget, { ITagInputWidgetProps } from "../widgets/TagInputWidget"
+import TagInputWidget, { TagInputWidgetProps } from "../widgets/TagInputWidget"
 import NumericInputWidget, {
-  INumericInputWidgetProps
+  NumericInputWidgetProps
 } from "../widgets/NumericInputWidget"
-import CheckboxWidget, { ICheckboxWidgetProps } from "../widgets/CheckboxWidget"
+import CheckboxWidget, { CheckboxWidgetProps } from "../widgets/CheckboxWidget"
 import RadioGroupWidget, {
-  IRadioGroupWidgetProps
+  RadioGroupWidgetProps
 } from "../widgets/RadioGroupWidget"
 import WidgetFactory from "./WidgetFactory"
 import React from "react"
-import ButtonWidget, { IButtonWidgetProps } from "../widgets/ButtonWidget"
+import ButtonWidget, { ButtonWidgetProps } from "../widgets/ButtonWidget"

 class WidgetBuilderRegistry {
  static registerWidgetBuilders() {
    WidgetFactory.registerWidgetBuilder("CONTAINER_WIDGET", {
      buildWidget(
-        widgetData: IContainerWidgetProps<IWidgetProps>
+        widgetData: ContainerWidgetProps<IWidgetProps>
      ): JSX.Element {
        return <ContainerWidget {...widgetData} />
      }
    })

    WidgetFactory.registerWidgetBuilder("TEXT_WIDGET", {
-      buildWidget(widgetData: ITextWidgetProps): JSX.Element {
+      buildWidget(widgetData: TextWidgetProps): JSX.Element {
        return <TextWidget {...widgetData} />
      }
    })

    WidgetFactory.registerWidgetBuilder("BUTTON_WIDGET", {
-      buildWidget(widgetData: IButtonWidgetProps): JSX.Element {
+      buildWidget(widgetData: ButtonWidgetProps): JSX.Element {
        return <ButtonWidget {...widgetData} />
      }
    })

    WidgetFactory.registerWidgetBuilder("CALLOUT_WIDGET", {
-      buildWidget(widgetData: ICalloutWidgetProps): JSX.Element {
+      buildWidget(widgetData: CalloutWidgetProps): JSX.Element {
        return <CalloutWidget {...widgetData} />
      }
    })

    WidgetFactory.registerWidgetBuilder("ICON_WIDGET", {
-      buildWidget(widgetData: IIconWidgetProps): JSX.Element {
+      buildWidget(widgetData: IconWidgetProps): JSX.Element {
        return <IconWidget {...widgetData} />
      }
    })

    WidgetFactory.registerWidgetBuilder("SPINNER_WIDGET", {
-      buildWidget(widgetData: ISpinnerWidgetProps): JSX.Element {
+      buildWidget(widgetData: SpinnerWidgetProps): JSX.Element {
        return <SpinnerWidget {...widgetData} />
      }
    })

    WidgetFactory.registerWidgetBuilder("INPUT_GROUP_WIDGET", {
-      buildWidget(widgetData: IInputGroupWidgetProps): JSX.Element {
+      buildWidget(widgetData: InputGroupWidgetProps): JSX.Element {
        return <InputGroupWidget {...widgetData} />
      }
    })

    WidgetFactory.registerWidgetBuilder("BREADCRUMBS_WIDGET", {
-      buildWidget(widgetData: IBreadcrumbsWidgetProps): JSX.Element {
+      buildWidget(widgetData: BreadcrumbsWidgetProps): JSX.Element {
        return <BreadcrumbsWidget {...widgetData} />
      }
    })

    WidgetFactory.registerWidgetBuilder("TAG_INPUT_WIDGET", {
-      buildWidget(widgetData: ITagInputWidgetProps): JSX.Element {
+      buildWidget(widgetData: TagInputWidgetProps): JSX.Element {
        return <TagInputWidget {...widgetData} />
      }
    })

    WidgetFactory.registerWidgetBuilder("NUMERIC_INPUT_WIDGET", {
-      buildWidget(widgetData: INumericInputWidgetProps): JSX.Element {
+      buildWidget(widgetData: NumericInputWidgetProps): JSX.Element {
        return <NumericInputWidget {...widgetData} />
      }
    })

    WidgetFactory.registerWidgetBuilder("CHECKBOX_WIDGET", {
-      buildWidget(widgetData: ICheckboxWidgetProps): JSX.Element {
+      buildWidget(widgetData: CheckboxWidgetProps): JSX.Element {
        return <CheckboxWidget {...widgetData} />
      }
    })

    WidgetFactory.registerWidgetBuilder("RADIO_GROUP_WIDGET", {
-      buildWidget(widgetData: IRadioGroupWidgetProps): JSX.Element {
+      buildWidget(widgetData: RadioGroupWidgetProps): JSX.Element {
        return <RadioGroupWidget {...widgetData} />
      }
    })
+    
  }
 }

--- a/app/client/src/utils/generators.tsx
+++ b/app/client/src/utils/generators.tsx
@ -0,0 +1,11 @@
+import generate from 'nanoid/generate'
+
+const ALPHABET = "1234567890abcdefghijklmnopqrstuvwxyz"
+
+export const generateReactKey = ({prefix = ""}: {prefix?: string}={}): string => {
+  return prefix + generate(ALPHABET, 10)
+}
+
+export default {
+  generateReactKey
+}
--- a/app/client/src/widgets/BaseWidget.tsx
+++ b/app/client/src/widgets/BaseWidget.tsx
@ -12,18 +12,22 @@ import {
 import { Component } from "react"
 import { BaseStyle } from "../editorComponents/BaseComponent"
 import _ from "lodash"
+import React from "react"
+import DraggableComponent from "../editorComponents/DraggableComponent"

 abstract class BaseWidget<
  T extends IWidgetProps,
  K extends IWidgetState
-> extends Component<T, Partial<K>> {
+> extends Component<T, K> {
  constructor(props: T) {
    super(props)
-    const initialState: Partial<K> = {
+    const initialState: IWidgetState = {
+      height: 0,
+      width: 0
    }
    initialState.height = 0
    initialState.width = 0
-    this.state = initialState
+    this.state = initialState as K
  }

  componentDidMount(): void {
@ -93,7 +97,17 @@ abstract class BaseWidget<
  }

  getComponentPaneView(): JSX.Element {
-    return this.getPageView()
+    return (
+      <DraggableComponent
+        {...this.props}
+        style={{
+          ...this.getPositionStyle()
+        }}
+        orientation={"VERTICAL"}
+      >
+        {this.getPageView()}
+      </DraggableComponent>
+    )
  }

  abstract getWidgetType(): WidgetType
@ -101,7 +115,7 @@ abstract class BaseWidget<
  getPositionStyle(): BaseStyle {
    return {
      positionType:
-        this.props.renderMode === RenderModes.COMPONENT_PANE
+        this.props.renderMode !== RenderModes.PAGE
          ? "CONTAINER_DIRECTION"
          : "ABSOLUTE",
      height: this.state.height,
@ -114,33 +128,46 @@ abstract class BaseWidget<
  }

  static defaultProps: Partial<IWidgetProps> = {
-    parentRowSpace: 1,
-    parentColumnSpace: 1,
+    parentRowSpace: 64,
+    parentColumnSpace: 64,
    topRow: 0,
    leftColumn: 0
  }
 }

 export interface IWidgetState {
-  height: number
-  width: number
+  height: number;
+  width: number;
+}
+
+export interface DraggableWidget {
+  type: string;
+  widget: IWidgetProps;
+  key: string;
 }

 export interface IWidgetBuilder<T extends IWidgetProps> {
-  buildWidget(data: T): JSX.Element
+  buildWidget(data: T): JSX.Element;
 }

 export interface IWidgetProps {
-  widgetType: WidgetType
-  key?: string
-  widgetId: string
-  topRow: number
-  leftColumn: number
-  bottomRow: number
-  rightColumn: number
-  parentColumnSpace: number
-  parentRowSpace: number
-  renderMode: RenderMode
+  widgetType: WidgetType;
+  key?: string;
+  widgetId: string;
+  topRow: number;
+  leftColumn: number;
+  bottomRow: number;
+  rightColumn: number;
+  parentColumnSpace: number;
+  parentRowSpace: number;
+  renderMode: RenderMode;
+}
+
+export interface WidgetCardProps {
+  widgetType: WidgetType;
+  key?: string;
+  label: string;
+  icon: string;
 }

 export default BaseWidget
--- a/app/client/src/widgets/BreadcrumbsWidget.tsx
+++ b/app/client/src/widgets/BreadcrumbsWidget.tsx
@ -1,17 +1,13 @@
-import * as React from "react"
+import React from "react"
 import BaseWidget, { IWidgetProps, IWidgetState } from "./BaseWidget"
-import { WidgetType, CSSUnits } from "../constants/WidgetConstants"
+import { WidgetType } from "../constants/WidgetConstants"
 import { Boundary, IBreadcrumbProps } from "@blueprintjs/core"
 import BreadcrumbsComponent from "../editorComponents/BreadcrumbsComponent"
-import _ from "lodash"

 class BreadcrumbsWidget extends BaseWidget<
-  IBreadcrumbsWidgetProps,
+  BreadcrumbsWidgetProps,
  IWidgetState
 > {
-  constructor(widgetProps: IBreadcrumbsWidgetProps) {
-    super(widgetProps)
-  }

  getPageView() {
    return (
@ -32,12 +28,12 @@ class BreadcrumbsWidget extends BaseWidget<
  }
 }

-export interface IBreadcrumbsWidgetProps extends IWidgetProps {
-  width?: number
-  collapseFrom?: Boundary
-  className?: string
-  minVisibleItems?: number
-  items?: IBreadcrumbProps[]
+export interface BreadcrumbsWidgetProps extends IWidgetProps {
+  width?: number;
+  collapseFrom?: Boundary;
+  className?: string;
+  minVisibleItems?: number;
+  items?: IBreadcrumbProps[];
 }

 export default BreadcrumbsWidget
--- a/app/client/src/widgets/ButtonWidget.tsx
+++ b/app/client/src/widgets/ButtonWidget.tsx
@ -1,14 +1,9 @@
 import * as React from "react"
 import BaseWidget, { IWidgetProps, IWidgetState } from "./BaseWidget"
-import { WidgetType, CSSUnits } from "../constants/WidgetConstants"
+import { WidgetType } from "../constants/WidgetConstants"
 import ButtonComponent from "../editorComponents/ButtonComponent"
-import _ from "lodash"
-import WidgetFactory from "../utils/WidgetFactory";

-class ButtonWidget extends BaseWidget<IButtonWidgetProps, IWidgetState> {
-  constructor(widgetProps: IButtonWidgetProps) {
-    super(widgetProps)
-  }
+class ButtonWidget extends BaseWidget<ButtonWidgetProps, IWidgetState> {

  getPageView() {
    return (
@ -16,7 +11,7 @@ class ButtonWidget extends BaseWidget<IButtonWidgetProps, IWidgetState> {
        style={this.getPositionStyle()}
        widgetId={this.props.widgetId}
        key={this.props.widgetId}
-        text={this.props.text}
+        text={this.props.text || "Button"}
      />
    )
  }
@ -26,9 +21,9 @@ class ButtonWidget extends BaseWidget<IButtonWidgetProps, IWidgetState> {
  }
 }

-export interface IButtonWidgetProps extends IWidgetProps {
-  text?: string
-  ellipsize?: boolean
+export interface ButtonWidgetProps extends IWidgetProps {
+  text?: string;
+  ellipsize?: boolean;
 }

 export default ButtonWidget
--- a/app/client/src/widgets/CalloutWidget.tsx
+++ b/app/client/src/widgets/CalloutWidget.tsx
@ -1,15 +1,10 @@
-import * as React from "react";
+import 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 { Intent } from "@blueprintjs/core";
+import { WidgetType } from "../constants/WidgetConstants";
 import CalloutComponent from "../editorComponents/CalloutComponent";
-import _ from "lodash";
-
-class CalloutWidget extends BaseWidget<ICalloutWidgetProps, IWidgetState> {
-  constructor(widgetProps: ICalloutWidgetProps) {
-    super(widgetProps);
-  }

+class CalloutWidget extends BaseWidget<CalloutWidgetProps, IWidgetState> {
  getPageView() {
    return (
      <CalloutComponent
@ -29,7 +24,7 @@ class CalloutWidget extends BaseWidget<ICalloutWidgetProps, IWidgetState> {
  }
 }

-export interface ICalloutWidgetProps extends IWidgetProps {
+export interface CalloutWidgetProps extends IWidgetProps {
  id?: string;
  title?: string;
  description?: string;
--- a/app/client/src/widgets/CheckboxWidget.tsx
+++ b/app/client/src/widgets/CheckboxWidget.tsx
@ -1,16 +1,9 @@
-import * as React from "react"
+import 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 { WidgetType } from "../constants/WidgetConstants"
 import CheckboxComponent from "../editorComponents/CheckboxComponent"
-import _ from "lodash"
-
-class CheckboxWidget extends BaseWidget<ICheckboxWidgetProps, IWidgetState> {
-  constructor(widgetProps: ICheckboxWidgetProps) {
-    super(widgetProps)
-  }

+class CheckboxWidget extends BaseWidget<CheckboxWidgetProps, IWidgetState> {
  getPageView() {
    return (
      <CheckboxComponent
@ -27,12 +20,12 @@ class CheckboxWidget extends BaseWidget<ICheckboxWidgetProps, IWidgetState> {
  }
 }

-export interface ICheckboxWidgetProps extends IWidgetProps {
+export interface CheckboxWidgetProps extends IWidgetProps {
  items: Array<{
-    label: string
-    defaultIndeterminate: boolean
-    value: number | string
-  }>
+    label: string;
+    defaultIndeterminate: boolean;
+    value: number | string;
+  }>;
 }

 export default CheckboxWidget
--- a/app/client/src/widgets/ContainerWidget.tsx
+++ b/app/client/src/widgets/ContainerWidget.tsx
@ -1,49 +1,57 @@
+import React from "react"
 import BaseWidget, { IWidgetProps, IWidgetState } from "./BaseWidget"
-import ContainerComponent, {
-  IContainerProps
-} from "../editorComponents/ContainerComponent"
+import ContainerComponent from "../editorComponents/ContainerComponent"
 import {
  ContainerOrientation,
  WidgetType,
-  CSSUnits
 } from "../constants/WidgetConstants"
 import WidgetFactory from "../utils/WidgetFactory"
-import React from "react"
 import _ from "lodash"
-import { Color } from "../constants/StyleConstants"
+import { Color } from "../constants/DefaultTheme"
+import DroppableComponent from "../editorComponents/DroppableComponent"

-const DEFAULT_NUM_COLS = 13
-const DEFAULT_NUM_ROWS = 13
+const DEFAULT_NUM_COLS = 16
+const DEFAULT_NUM_ROWS = 16

 class ContainerWidget extends BaseWidget<
-  IContainerWidgetProps<IWidgetProps>,
-  IWidgetState
+  ContainerWidgetProps<IWidgetProps>,
+  ContainerWidgetState
 > {
-  snapColumnSpace: number = 100
-  snapRowSpace: number = 100
-
-  constructor(props: IContainerWidgetProps<IWidgetProps>) {
+  constructor(props: ContainerWidgetProps<IWidgetProps>) {
    super(props)
    this.renderChildWidget = this.renderChildWidget.bind(this)
    this.state = {
      width: 0,
-      height: 0
+      height: 0,
+      snapColumnSpace: DEFAULT_NUM_COLS,
+      snapRowSpace: DEFAULT_NUM_ROWS
    }
  }

-  componentDidUpdate(previousProps: IContainerWidgetProps<IWidgetProps>) {
+  componentDidUpdate(previousProps: ContainerWidgetProps<IWidgetProps>) {
    super.componentDidUpdate(previousProps)
+    let snapColumnSpace = this.state.snapColumnSpace
+    let snapRowSpace = this.state.snapRowSpace
    if (this.state.width)
-      this.snapColumnSpace =
+      snapColumnSpace =
        this.state.width / (this.props.snapColumns || DEFAULT_NUM_COLS)
    if (this.state.height)
-      this.snapRowSpace =
+      snapRowSpace =
        this.state.height / (this.props.snapRows || DEFAULT_NUM_ROWS)
+    if (
+      this.state.snapColumnSpace !== snapColumnSpace ||
+      this.state.snapRowSpace !== snapRowSpace
+    ) {
+      this.setState({
+        snapColumnSpace: snapColumnSpace,
+        snapRowSpace: snapRowSpace
+      })
+    }
  }

  renderChildWidget(childWidgetData: IWidgetProps) {
-    childWidgetData.parentColumnSpace = this.snapColumnSpace
-    childWidgetData.parentRowSpace = this.snapRowSpace
+    childWidgetData.parentColumnSpace = this.state.snapColumnSpace
+    childWidgetData.parentRowSpace = this.state.snapRowSpace
    return WidgetFactory.createWidget(childWidgetData)
  }

@ -52,8 +60,7 @@ class ContainerWidget extends BaseWidget<
      <ContainerComponent
        widgetId={this.props.widgetId}
        style={{
-          ...this.getPositionStyle(),
-          backgroundColor: this.props.backgroundColor
+          ...this.getPositionStyle()
        }}
        orientation={this.props.orientation || "VERTICAL"}
      >
@ -62,18 +69,36 @@ class ContainerWidget extends BaseWidget<
    )
  }

+  getCanvasView() {
+    return (
+      <DroppableComponent
+        {...this.props}
+        style={{
+          ...this.getPositionStyle()
+        }}
+      >
+        {super.getCanvasView()}
+      </DroppableComponent>
+    )
+  }
+
  getWidgetType(): WidgetType {
    return "CONTAINER_WIDGET"
  }
 }

-export interface IContainerWidgetProps<T extends IWidgetProps>
+export interface ContainerWidgetState extends IWidgetState {
+  snapColumnSpace: number;
+  snapRowSpace: number;
+}
+
+export interface ContainerWidgetProps<T extends IWidgetProps>
  extends IWidgetProps {
-  children?: T[]
-  snapColumns?: number
-  snapRows?: number
-  orientation?: ContainerOrientation
-  backgroundColor?: Color
+  children?: T[];
+  snapColumns?: number;
+  snapRows?: number;
+  orientation?: ContainerOrientation;
+  backgroundColor?: Color;
 }

 export default ContainerWidget
--- a/app/client/src/widgets/IconWidget.tsx
+++ b/app/client/src/widgets/IconWidget.tsx
@ -1,16 +1,11 @@
-import * as React from "react";
+import React from "react";
 import BaseWidget, { IWidgetProps, IWidgetState } from "./BaseWidget";
-import { WidgetType, CSSUnits } from "../constants/WidgetConstants";
-import { Icon, Intent } from "@blueprintjs/core";
+import { WidgetType } from "../constants/WidgetConstants";
+import { 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);
-  }

+class IconWidget extends BaseWidget<IconWidgetProps, IWidgetState> {
  getPageView() {
    return (
      <IconComponent
@ -29,7 +24,7 @@ class IconWidget extends BaseWidget<IIconWidgetProps, IWidgetState> {
  }
 }

-export interface IIconWidgetProps extends IWidgetProps {
+export interface IconWidgetProps extends IWidgetProps {
  icon?: IconName;
  iconSize?: number;
  ellipsize?: boolean;
--- a/app/client/src/widgets/InputGroupWidget.tsx
+++ b/app/client/src/widgets/InputGroupWidget.tsx
@ -1,17 +1,13 @@
-import * as React from "react";
+import React from "react";
 import BaseWidget, { IWidgetProps, IWidgetState } from "./BaseWidget";
-import { WidgetType, CSSUnits } from "../constants/WidgetConstants";
+import { WidgetType } from "../constants/WidgetConstants";
 import InputGroupComponent from "../editorComponents/InputGroupComponent";
-import { IconName, InputGroup, Intent } from "@blueprintjs/core";
-import _ from "lodash";
+import { IconName, Intent } from "@blueprintjs/core";

 class InputGroupWidget extends BaseWidget<
-  IInputGroupWidgetProps,
+  InputGroupWidgetProps,
  IWidgetState
 > {
-  constructor(widgetProps: IInputGroupWidgetProps) {
-    super(widgetProps);
-  }

  getPageView() {
    return (
@ -40,7 +36,7 @@ class InputGroupWidget extends BaseWidget<
  }
 }

-export interface IInputGroupWidgetProps extends IWidgetProps {
+export interface InputGroupWidgetProps extends IWidgetProps {
  className?: string;
  disabled?: boolean;
  large?: boolean;
--- a/app/client/src/widgets/NumericInputWidget.tsx
+++ b/app/client/src/widgets/NumericInputWidget.tsx
@ -3,15 +3,11 @@ import BaseWidget, { IWidgetProps, IWidgetState } from "./BaseWidget"
 import { WidgetType } from "../constants/WidgetConstants"
 import NumericInputComponent from "../editorComponents/NumericInputComponent"
 import { Intent, IconName } from "@blueprintjs/core"
-import _ from "lodash"

 class NumericInputWidget extends BaseWidget<
-  INumericInputWidgetProps,
+  NumericInputWidgetProps,
  IWidgetState
 > {
-  constructor(widgetProps: INumericInputWidgetProps) {
-    super(widgetProps)
-  }

  getPageView() {
    return (
@ -47,27 +43,27 @@ class NumericInputWidget extends BaseWidget<
  }
 }

-export interface INumericInputWidgetProps extends IWidgetProps {
-  className?: string
-  disabled?: boolean
-  large?: boolean
-  intent?: Intent
-  defaultValue?: string
-  leftIcon?: IconName
-  rightElement?: JSX.Element
-  allowNumericCharactersOnly?: boolean
-  fill?: boolean
-  majorStepSize?: number | null
-  max?: number
-  min?: number
-  minorStepSize?: number | null
-  onValueChange?: (valueAsNumber: number, valueAsString: string) => void
-  onButtonClick?: (valueAsNumber: number, valueAsString: string) => void
-  inputRef?: (ref: HTMLInputElement | null) => any
-  selectAllOnFocus?: boolean
-  selectAllOnIncrement?: boolean
-  stepSize?: number
-  placeholder?: string
+export interface NumericInputWidgetProps extends IWidgetProps {
+  className?: string;
+  disabled?: boolean;
+  large?: boolean;
+  intent?: Intent;
+  defaultValue?: string;
+  leftIcon?: IconName;
+  rightElement?: JSX.Element;
+  allowNumericCharactersOnly?: boolean;
+  fill?: boolean;
+  majorStepSize?: number | null;
+  max?: number;
+  min?: number;
+  minorStepSize?: number | null;
+  onValueChange?: (valueAsNumber: number, valueAsString: string) => void;
+  onButtonClick?: (valueAsNumber: number, valueAsString: string) => void;
+  inputRef?: (ref: HTMLInputElement | null) => any;
+  selectAllOnFocus?: boolean;
+  selectAllOnIncrement?: boolean;
+  stepSize?: number;
+  placeholder?: string;
 }

 export default NumericInputWidget
--- a/app/client/src/widgets/RadioGroupWidget.tsx
+++ b/app/client/src/widgets/RadioGroupWidget.tsx
@ -1,17 +1,13 @@
 import * as React from "react"
 import BaseWidget, { IWidgetProps, IWidgetState } from "./BaseWidget"
-import { WidgetType, CSSUnits } from "../constants/WidgetConstants"
+import { WidgetType } from "../constants/WidgetConstants"
 import RadioGroupComponent from "../editorComponents/RadioGroupComponent"
 import { IOptionProps } from "@blueprintjs/core"
-import _ from "lodash"

 class RadioButtonWidget extends BaseWidget<
-  IRadioGroupWidgetProps,
+  RadioGroupWidgetProps,
  IWidgetState
 > {
-  constructor(widgetProps: IRadioGroupWidgetProps) {
-    super(widgetProps)
-  }

  getPageView() {
    return (
@ -37,19 +33,19 @@ class RadioButtonWidget extends BaseWidget<
  }
 }

-export interface IRadioGroupWidgetProps extends IWidgetProps {
-  label: string
-  inline: boolean
-  selectedValue: string | number
-  handleRadioChange: (event: React.FormEvent<HTMLInputElement>) => void
-  disabled: boolean
-  className: string
-  name: string
-  options: IOptionProps[]
+export interface RadioGroupWidgetProps extends IWidgetProps {
+  label: string;
+  inline: boolean;
+  selectedValue: string | number;
+  handleRadioChange: (event: React.FormEvent<HTMLInputElement>) => void;
+  disabled: boolean;
+  className: string;
+  name: string;
+  options: IOptionProps[];
  items: Array<{
-    label: string
-    value: number | string
-  }>
+    label: string;
+    value: number | string;
+  }>;
 }

 export default RadioButtonWidget
--- a/app/client/src/widgets/SpinnerWidget.tsx
+++ b/app/client/src/widgets/SpinnerWidget.tsx
@ -1,14 +1,10 @@
-import * as React from "react";
+import React from "react";
 import BaseWidget, { IWidgetProps, IWidgetState } from "./BaseWidget";
-import { WidgetType, CSSUnits } from "../constants/WidgetConstants";
-import { Spinner, Intent } from "@blueprintjs/core";
+import { WidgetType } from "../constants/WidgetConstants";
+import { Intent } from "@blueprintjs/core";
 import SpinnerComponent from "../editorComponents/SpinnerComponent";
-import _ from "lodash";

-class SpinnerWidget extends BaseWidget<ISpinnerWidgetProps, IWidgetState> {
-  constructor(widgetProps: ISpinnerWidgetProps) {
-    super(widgetProps);
-  }
+class SpinnerWidget extends BaseWidget<SpinnerWidgetProps, IWidgetState> {

  getPageView() {
    return (
@ -28,7 +24,7 @@ class SpinnerWidget extends BaseWidget<ISpinnerWidgetProps, IWidgetState> {
  }
 }

-export interface ISpinnerWidgetProps extends IWidgetProps {
+export interface SpinnerWidgetProps extends IWidgetProps {
  size?: number;
  value?: number;
  ellipsize?: boolean;
--- a/app/client/src/widgets/TagInputWidget.tsx
+++ b/app/client/src/widgets/TagInputWidget.tsx
@ -1,15 +1,11 @@
-import * as React from "react";
+import React from "react";
 import BaseWidget, { IWidgetProps, IWidgetState } from "./BaseWidget";
-import { WidgetType, CSSUnits } from "../constants/WidgetConstants";
+import { WidgetType } from "../constants/WidgetConstants";
 import TagInputComponent from "../editorComponents/TagInputComponent";
-import { Intent, ITagProps, TagInput, HTMLInputProps } from "@blueprintjs/core";
+import { Intent, ITagProps, HTMLInputProps } from "@blueprintjs/core";

-import _ from "lodash";

-class TagInputWidget extends BaseWidget<ITagInputWidgetProps, IWidgetState> {
-  constructor(widgetProps: ITagInputWidgetProps) {
-    super(widgetProps);
-  }
+class TagInputWidget extends BaseWidget<TagInputWidgetProps, IWidgetState> {

  getPageView() {
    return (
@ -28,7 +24,7 @@ class TagInputWidget extends BaseWidget<ITagInputWidgetProps, IWidgetState> {
  }
 }

-export interface ITagInputWidgetProps extends IWidgetProps {
+export interface TagInputWidgetProps extends IWidgetProps {
  addOnPaste?: boolean;
  className?: string;
  disabled?: boolean;
--- a/app/client/src/widgets/TextWidget.tsx
+++ b/app/client/src/widgets/TextWidget.tsx
@ -1,13 +1,9 @@
-import * as React from "react";
+import React from "react";
 import BaseWidget, { IWidgetProps, IWidgetState } from "./BaseWidget";
-import { WidgetType, CSSUnits } from "../constants/WidgetConstants";
+import { WidgetType } from "../constants/WidgetConstants";
 import TextComponent from "../editorComponents/TextComponent";
-import _ from "lodash";

-class TextWidget extends BaseWidget<ITextWidgetProps, IWidgetState> {
-  constructor(widgetProps: ITextWidgetProps) {
-    super(widgetProps);
-  }
+class TextWidget extends BaseWidget<TextWidgetProps, IWidgetState> {

  getPageView() {
    return (
@ -26,7 +22,7 @@ class TextWidget extends BaseWidget<ITextWidgetProps, IWidgetState> {
  }
 }

-export interface ITextWidgetProps extends IWidgetProps {
+export interface TextWidgetProps extends IWidgetProps {
  text?: string;
  ellipsize?: boolean;
  tagName?: keyof JSX.IntrinsicElements;
--- a/app/client/tsconfig.json
+++ b/app/client/tsconfig.json
@ -4,21 +4,26 @@
    "lib": [
      "dom",
      "dom.iterable",
-      "esnext"
+      "esnext",
+      "es5",
+      "es2015.collection",
+      "es2015.iterable"
    ],
+    "strict": true,
    "outDir": "./out/js/src",
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
-    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
-    "jsx": "preserve"
+    "jsx": "react",
+    "downlevelIteration": true,
+    "importHelpers": true
  },
  "include": [
    "./src/**/*"
--- a/app/client/yarn.lock
+++ b/app/client/yarn.lock