Linting, fixes, dragpreview fix

app/client/.editorconfig

@@ -0,0 +1,12 @@
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+insert_final_newline = true
+indent_style = space
+indent_size = 2
+trim_trailing_whitespace = true
+
+[*.md]
+trim_trailing_whitespace = false

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
+    }
+  }
+};

app/client/.nvmrc

@@ -0,0 +1 @@
+lts/dubnium

app/client/.prettierignore

@@ -0,0 +1,6 @@
+build/
+node_modules/
+package-lock.json
+yarn.lock
+package.json
+

app/client/.prettierrc

@@ -0,0 +1,9 @@
+{
+	"printWidth": 80,
+	"tabWidth": 2,
+	"useTabs": false,
+	"semi": true,
+	"singleQuote": false,
+	"trailingComma": "all",
+	"parser": "typescript"
+}

app/client/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "picasso",
+  "name": "appsmith",
   "version": "0.1.0",
   "private": true,
   "dependencies": {
@@ -11,6 +11,7 @@
     "@types/jest": "^23.3.13",
     "@types/lodash": "^4.14.120",
     "@types/moment-timezone": "^0.5.10",
+    "@types/nanoid": "^2.0.0",
     "@types/node": "^10.12.18",
     "@types/react": "^16.8.2",
     "@types/react-dom": "^16.8.0",
@@ -22,6 +23,7 @@
     "husky": "^1.3.1",
     "lint-staged": "^8.1.0",
     "lodash": "^4.17.11",
+    "nanoid": "^2.0.4",
     "node-sass": "^4.11.0",
     "normalizr": "^3.3.0",
     "prettier": "^1.16.0",
@@ -32,10 +34,11 @@
     "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": {
@@ -55,6 +58,10 @@
     "not op_mini all"
   ],
   "devDependencies": {
+    "@typescript-eslint/eslint-plugin": "^2.0.0",
+    "@typescript-eslint/parser": "^2.0.0",
+    "eslint-config-prettier": "^6.1.0",
+    "eslint-plugin-prettier": "^3.1.0",
     "redux-devtools": "^3.5.0"
   }
 }

app/client/src/actions/widgetCardsPaneActions.tsx

@@ -1,5 +1,4 @@
 import {
-  ReduxAction,
   ActionTypes
 } from "../constants/ActionConstants"
 import { IWidgetCardProps } from '../widgets/BaseWidget'

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)

app/client/src/api/WidgetCardsPaneApi.tsx

@@ -1,7 +1,5 @@
 import Api from "./Api"
 import { IWidgetCardProps } from "../widgets/BaseWidget"
-import { IContainerWidgetProps } from "../widgets/ContainerWidget"
-import { ApiResponse } from "./ApiResponses"
 
 export interface WidgetCardsPaneResponse {
   cards : { [id: string]: IWidgetCardProps[]}

app/client/src/constants/ActionConstants.tsx

@@ -1,4 +1,4 @@
-import ContainerWidget from "../widgets/ContainerWidget"
+// import ContainerWidget from "../widgets/ContainerWidget"
 import { IWidgetProps, IWidgetCardProps } from "../widgets/BaseWidget"
 
 export type ActionType =

app/client/src/constants/ApiConstants.tsx

@@ -5,7 +5,7 @@ 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://f1a8b631-ef37-4932-8f41-75cf127fcc55.mock.pstmn.io"
+export const MOCK_BASE_URL = "https://d952e53e-3dac-42b7-a55d-a93c5df678b8.mock.pstmn.io"
 export const STAGE_BASE_URL = "https://14157cb0-190f-4082-a791-886a8df05930.mock.pstmn.io"
 export const BASE_URL = MOCK_BASE_URL
 export const REQUEST_TIMEOUT_MS = 2000
@@ -14,3 +14,8 @@ export const REQUEST_HEADERS: ApiHeaders = {
   "Content-Type": "application/json",
   dataType: "json",
 }
+
+export interface APIException {
+  error: number;
+  message: string;
+}

app/client/src/constants/WidgetConstants.tsx

@@ -57,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: "%"
 }

app/client/src/editorComponents/BaseComponent.tsx

@@ -1,35 +1,28 @@
 import { Component } from "react"
-import React from "react"
 import { PositionType, CSSUnit } from "../constants/WidgetConstants"
 import { Color } from "../constants/StyleConstants"
 /***
  * 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 IComponentProps> extends Component<T> {}
 
 export interface BaseStyle {
-    height?: number
-    width?: number
-    positionType: PositionType
-    xPosition: number
-    yPosition: number
-    xPositionUnit: CSSUnit
-    yPositionUnit: CSSUnit
-    heightUnit?: CSSUnit
-    widthUnit?: CSSUnit
-    backgroundColor?: Color
+    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
+    widgetId: string;
+    style: BaseStyle;
 }
 
 export default BaseComponent

app/client/src/editorComponents/BreadcrumbsComponent.tsx

@@ -3,13 +3,11 @@ import { IComponentProps } 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 IComponentProps {
+  width?: number;
+  collapseFrom?: Boundary;
+  className?: string;
+  minVisibleItems?: number;
+  items?: IBreadcrumbProps[];
 }
 
 export default BreadcrumbsComponent

app/client/src/editorComponents/ContainerComponent.tsx

@@ -1,11 +1,14 @@
-import BaseComponent, { IComponentProps } from "./BaseComponent"
-import { ContainerOrientation } from "../constants/WidgetConstants"
-import styled from "../constants/DefaultTheme"
-import React from "react"
+import { IComponentProps } 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 => {
+  flexDirection: ${props => {
     return props.orientation === "HORIZONTAL" ? "row" : "column"
   }};
   background: ${props => props.style.backgroundColor};
@@ -19,17 +22,41 @@ export const Container = styled("div")<IContainerProps>`
   top: ${props => {
     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> 
 }
+// class ContainerComponent extends BaseComponent<ContainerProps> {
+//   render() {
+//     const addWidgetFn = this.props.addWidget;
+//     const [, drop] = useDrop({
+//       accept: Object.values(WidgetTypes),
+//       drop(item: DraggableWidget, monitor) {
+//         console.log("dropped")
+//         if (addWidgetFn){
+//           addWidgetFn(item.type);
+//         }
+//         return undefined
+//       },
+//     })
+//     return <Container {...this.props}>{this.props.children}</Container>
+//   }
+// }
 
-export interface IContainerProps extends IComponentProps {
-  children?: JSX.Element[] | JSX.Element
-  orientation?: ContainerOrientation
+export interface ContainerProps extends IComponentProps {
+  children?: JSX.Element[] | JSX.Element;
+  orientation?: ContainerOrientation;
+  addWidget?: Function;
 }
 
 export default ContainerComponent

app/client/src/editorComponents/DraggableComponent.tsx

@@ -1,18 +1,14 @@
 import * as React from "react"
-import BaseWidget, { IWidgetProps, IWidgetState } from "../widgets/BaseWidget"
-import _ from "lodash"
+import { IWidgetProps, IWidgetState } from "../widgets/BaseWidget"
 import { DragSource, DragSourceConnector, DragSourceMonitor } from "react-dnd"
-import { IContainerProps } from "./ContainerComponent"
+import { ContainerProps } from "./ContainerComponent"
 
-export interface IDraggableProps extends IContainerProps {
-  connectDragSource: Function
-  isDragging?: boolean
+export interface DraggableProps extends ContainerProps {
+  connectDragSource: Function;
+  isDragging?: boolean;
 }
 
-class DraggableComponent extends React.Component<
-  IDraggableProps,
-  IWidgetState
-> {
+class DraggableComponent extends React.Component<DraggableProps, IWidgetState> {
   render() {
     return this.props.connectDragSource(
       <div

app/client/src/editorComponents/DroppableComponent.tsx

@@ -1,17 +1,16 @@
 import * as React from "react"
 import { IWidgetProps, IWidgetState } from "../widgets/BaseWidget"
-import _ from "lodash"
 import { DropTargetConnector, DropTargetMonitor, DropTarget, XYCoord } from "react-dnd"
-import { IContainerProps } from "./ContainerComponent"
+import { ContainerProps } from "./ContainerComponent"
 import WidgetFactory from "../utils/WidgetFactory";
 
-export interface IDroppableProps extends IContainerProps {
-  connectDropTarget: Function
-  isOver?: boolean
+export interface DroppableProps extends ContainerProps {
+  connectDropTarget: Function;
+  isOver?: boolean;
 }
 
 class DroppableComponent extends React.Component<
-  IDroppableProps,
+  DroppableProps,
   IWidgetState
 > {
   render() {

app/client/src/editorComponents/IconComponent.tsx

@@ -3,7 +3,7 @@ import { IComponentProps } 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 IComponentProps {
+  iconSize?: number;
+  icon?: IconName;
+  intent?: Intent;
+  ellipsize?: boolean;
 }
 
 export default IconComponent

app/client/src/editorComponents/RadioGroupComponent.tsx

@@ -2,7 +2,7 @@ import * as React from "react"
 import { IComponentProps } 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 IComponentProps {
+  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

app/client/src/editorComponents/SpinnerComponent.tsx

@@ -3,7 +3,7 @@ import { IComponentProps } 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,7 +17,7 @@ class SpinnerComponent extends React.Component<ISpinnerComponentProps> {
   }
 }
 
-export interface ISpinnerComponentProps extends IComponentProps {
+export interface SpinnerComponentProps extends IComponentProps {
   size?: number
   value?: number
   intent?: Intent

app/client/src/editorComponents/TagInputComponent.tsx

@@ -2,7 +2,7 @@ import * as React from "react"
 import { IComponentProps } 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,7 +15,7 @@ class TagInputComponent extends React.Component<ITagInputComponentProps> {
   }
 }
 
-export interface ITagInputComponentProps extends IComponentProps {
+export interface TagInputComponentProps extends IComponentProps {
   addOnPaste?: boolean
   className?: string
   disabled?: boolean

app/client/src/index.tsx

@@ -13,7 +13,7 @@ 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 { ActionType, ReduxAction } from "./constants/ActionConstants";
 
 import { DndProvider } from "react-dnd"
 import HTML5Backend from "react-dnd-html5-backend"

app/client/src/normalizers/CanvasWidgetsNormalizer.tsx

@@ -1,6 +1,6 @@
 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);
@@ -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)
     }
 

app/client/src/pages/Editor/Canvas.tsx

@@ -1,29 +1,83 @@
-import React, { Props } from "react"
+import React, { MutableRefObject, useLayoutEffect } from "react"
+import styled from "styled-components"
 import WidgetFactory from "../../utils/WidgetFactory"
 import { WidgetTypes } from "../../constants/WidgetConstants"
 import { DraggableWidget } from "../../widgets/BaseWidget"
-import { useDrop } from 'react-dnd'
-import { IContainerWidgetProps } from "../../widgets/ContainerWidget"
+import { useDrop } from "react-dnd"
+import { ContainerWidgetProps } from "../../widgets/ContainerWidget"
+import EditorDragLayer from "./EditorDragLayer"
+
+const ArtBoardBackgroundMask = styled.div`
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  top: 0;
+  z-index: -10;
+`;
+
+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: IContainerWidgetProps<any>
-  addWidget: Function
-  removeWidget: Function
+  pageWidget: ContainerWidgetProps<any>;
+  addWidget: Function;
 }
 
-const Canvas : React.SFC<CanvasProps> = (props) => {
-  const [, drop] = useDrop({
+interface ArtBoardProps {
+  cellSize: string;
+}
+
+const Canvas = (props: CanvasProps) => {
+  const [width, setWidth] = React.useState(1)
+  const artBoardMask: MutableRefObject<HTMLDivElement | null> = React.useRef(null)
+  const [collectedProps, drop] = useDrop({
     accept: Object.values(WidgetTypes),
     drop(item: DraggableWidget, monitor) {
-      console.log("dropped")
-      props.addWidget(item.type);
+      console.log("dropped", collectedProps, item, monitor.didDrop())
+      props.addWidget(item.type, item.key);
       return undefined
     },
   })
+
+  useLayoutEffect(()=> {
+    const el = artBoardMask.current
+    if (el) {
+      const rect = el.getBoundingClientRect()
+      setWidth(rect.width)
+      console.log(rect)
+    }
+  }, [setWidth])
+
   return (
-    <div ref={drop}>
+    <React.Fragment>
+      <EditorDragLayer />
+    <ArtBoard ref={drop} cellSize={(Math.floor(width / 16) - 1)+ "px"}>
+      <ArtBoardBackgroundMask ref={artBoardMask}></ArtBoardBackgroundMask>
       {props.pageWidget && WidgetFactory.createWidget(props.pageWidget)}
-    </div>
+    </ArtBoard>
+    </React.Fragment>
   )
 }
 

app/client/src/pages/Editor/EditorDragLayer.tsx

@@ -3,16 +3,17 @@ import styled from 'styled-components'
 import { XYCoord, useDragLayer } from 'react-dnd'
 import snapToGrid from './snapToGrid'
 import WidgetFactory from '../../utils/WidgetFactory';
-import { RenderModes, WidgetTypes, WidgetType } from '../../constants/WidgetConstants';
+import { RenderModes,  WidgetType } from '../../constants/WidgetConstants';
 
 const WrappedDragLayer = styled.div`
-  position: fixed;
+  position: absolute;
   pointer-events: none;
   z-index: 100;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
+  border: 10px solid #000;
 `;
 
 
@@ -30,7 +31,7 @@ function getItemStyles(
 
     x -= initialOffset.x
     y -= initialOffset.y
-    ;[x, y] = snapToGrid(x, y)
+    ;[x, y] = snapToGrid(64, x, y)
     x += initialOffset.x
     y += initialOffset.y
   
@@ -57,10 +58,12 @@ const EditorDragLayer: React.FC = () => {
     isDragging: monitor.isDragging(),
   }))
 
+  // console.log("itemType", itemType, "isDragging", isDragging, "item", item, "initialOffset", initialOffset, "currentOffset", currentOffset);
+
   function renderItem() {
       return WidgetFactory.createWidget({
         widgetType: itemType as WidgetType,
-        widgetId: '2',
+        widgetId: item.key,
         topRow: 10,
         leftColumn: 10,
         bottomRow: 14,

app/client/src/pages/Editor/EditorHeader.tsx

@@ -2,9 +2,7 @@ import React, { Component } from "react"
 import styled from "styled-components"
 import { connect } from "react-redux"
 import { AppState } from "../../reducers"
-import WidgetFactory from "../../utils/WidgetFactory"
 import { EditorHeaderReduxState } from "../../reducers/uiReducers/editorHeaderReducer";
-import { IWidgetProps } from "../../widgets/BaseWidget";
 
 const Header = styled.header`
   height: 50px;

app/client/src/pages/Editor/WidgetCard.tsx

@@ -1,15 +1,18 @@
-import React from 'react';
-import { useDrag, DragSourceMonitor } from 'react-dnd'
+import React, { useState, useLayoutEffect, MutableRefObject } from 'react';
+import { useDrag, DragSourceMonitor, DragPreviewImage } from 'react-dnd'
+import blankImage from "../../assets/images/blank.png"
 import { IWidgetCardProps } from '../../widgets/BaseWidget'
 import styled from 'styled-components'
 import { Icon } from '@blueprintjs/core'
-import { IconNames } from '@blueprintjs/icons'
+import {  IconNames } from '@blueprintjs/icons'
+import { generateReactKey } from "../../utils/generators"
 
-interface WidgetCardProps {
-  details: IWidgetCardProps
+
+type WidgetCardProps = {
+  details: IWidgetCardProps;
 }
 
-const Wrapper = styled.div`
+export const Wrapper = styled.div`
   display:flex;
   flex-direction: row;
   justify-content: center;
@@ -25,7 +28,7 @@ const Wrapper = styled.div`
     cursor: grab;
   }
 `;
-const IconLabel = styled.h5`
+export const IconLabel = styled.h5`
   text-align: center;
   padding: 10px 0;
   margin: 0;
@@ -35,20 +38,39 @@ const IconLabel = styled.h5`
   font-size: 0.5rem;
 `;
 
-const WidgetCard: React.SFC<WidgetCardProps> = (props) => {
-  const [{ isDragging }, drag] = useDrag({
-    item: { type: props.details.widgetType, widget: props.details },
+/* eslint-disable @typescript-eslint/no-unused-vars */
+const WidgetCard = (props: WidgetCardProps) => {
+  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)
+      })
+      console.log(rect)
+    }
+  }, [setInitialOffset])
+
   return (
+    <React.Fragment >
+      <DragPreviewImage connect={preview} src={blankImage} />
     <Wrapper ref={drag}>
-      <div>
-        <Icon icon="segmented-control" iconSize={20} />
+      <div ref={card}>
+        <Icon icon={IconNames.SEGMENTED_CONTROL} iconSize={20} />
         <IconLabel>{props.details.label}</IconLabel>
       </div>
     </Wrapper>
+    </React.Fragment>
   )
 }
 

app/client/src/pages/Editor/WidgetCardsPane.tsx

@@ -1,10 +1,10 @@
-import React, { Component } from "react"
+import React from "react"
 import WidgetCard from "./WidgetCard"
 import styled from "styled-components"
 import { IWidgetCardProps } from "../../widgets/BaseWidget"
 
-interface WidgetCardPaneProps  {
-  cards: { [id: string]: IWidgetCardProps[]}
+type WidgetCardPaneProps  = {
+  cards: { [id: string]: IWidgetCardProps[]};
 }
 
 const CardsPaneWrapper = styled.div`
@@ -21,7 +21,7 @@ const CardsWrapper = styled.div`
   justify-content: flex-start;
 `;
 
-const WidgetCardsPane: React.SFC<WidgetCardPaneProps> = (props) => {
+const WidgetCardsPane: React.SFC<WidgetCardPaneProps> = (props: WidgetCardPaneProps) => {
   const groups = Object.keys(props.cards)  
   return (
       <CardsPaneWrapper>

app/client/src/pages/Editor/index.tsx

@@ -10,12 +10,12 @@ import EditorHeader from "./EditorHeader"
 import { WidgetType } from "../../constants/WidgetConstants"
 import CanvasWidgetsNormalizer from "../../normalizers/CanvasWidgetsNormalizer"
 import { fetchWidgetCards } from "../../actions/widgetCardsPaneActions"
-import { IContainerWidgetProps } from "../../widgets/ContainerWidget"
+import { ContainerWidgetProps } from "../../widgets/ContainerWidget"
 import { fetchPage, addWidget } from "../../actions/pageActions"
 import { RenderModes } from "../../constants/WidgetConstants"
-import EditorDragLayer  from "./EditorDragLayer"
+// import EditorDragLayer  from "./EditorDragLayer"
 
-const ArtBoard = styled.section`
+const CanvasContainer = styled.section`
   height: 100%;
   width: 100%;
   position: relative;
@@ -39,23 +39,26 @@ const EditorWrapper = styled.div`
   overflow: hidden;
   padding: 10px;
   height: calc(100vh - 60px);
-`; 
+`;
 
-class Editor extends Component<{
-  pageWidget: IContainerWidgetProps<any> | any
-  fetchCanvasWidgets: Function
-  fetchWidgetCardsPane: Function
-  cards: { [id: string] : IWidgetCardProps[] } | any
-  addPageWidget: Function
-}> {
+type EditorProps = {
+  pageWidget: ContainerWidgetProps<any> | any;
+  fetchCanvasWidgets: Function;
+  fetchWidgetCardsPane: Function;
+  cards: { [id: string]: IWidgetCardProps[] } | any;
+  addPageWidget: Function;
+}
+
+class Editor extends Component<EditorProps> {
   componentDidMount() {
     this.props.fetchWidgetCardsPane()
     this.props.fetchCanvasWidgets("1")
   }
 
-  addWidgetToCanvas = (widgetType: WidgetType) => {
+  addWidgetToCanvas = (widgetType: WidgetType, key: string): void => {
+    console.log(widgetType);
     this.props.addPageWidget("1", {
-      key: "12",
+      key: key,
       bottomRow: 9,
       leftColumn: 1,
       parentColumnSpace: 90,
@@ -66,32 +69,31 @@ class Editor extends Component<{
       snapRows: 20,
       children: [],
       topRow: 1,
-      widgetId: "2",
+      widgetId: key,
       widgetType: widgetType
     })
   }
 
-  removeWidgetFromCanvas = (widgetId: string) => {
+  // removeWidgetFromCanvas = (widgetId: string): null => {
 
-  }
+  // }
 
-  render() {
+  public render() {
     return (
       <React.Fragment>
         <EditorHeader></EditorHeader>
         <EditorWrapper>
           <WidgetCardsPane cards={this.props.cards} />
-          <ArtBoard>
-            <Canvas pageWidget={this.props.pageWidget} addWidget={this.addWidgetToCanvas} removeWidget={this.removeWidgetFromCanvas} />
-            <EditorDragLayer />
-          </ArtBoard>
+          <CanvasContainer>
+            <Canvas pageWidget={this.props.pageWidget} addWidget={this.addWidgetToCanvas} />
+          </CanvasContainer>
         </EditorWrapper>
       </React.Fragment>
     )
   }
 }
 
-const mapStateToProps = (state: AppState, props: any): EditorReduxState => {
+const mapStateToProps = (state: AppState, props: EditorProps): EditorReduxState => {
   const pageWidget = CanvasWidgetsNormalizer.denormalize(
     state.ui.canvas.pageWidgetId,
     state.entities
@@ -106,7 +108,7 @@ const mapDispatchToProps = (dispatch: any) => {
   return {
     fetchCanvasWidgets: (pageId: string) => dispatch(fetchPage(pageId, RenderModes.CANVAS)),
     fetchWidgetCardsPane: () => dispatch(fetchWidgetCards()),
-    addPageWidget: (pageId:string, widgetProps: IWidgetProps) => dispatch(addWidget(pageId, widgetProps))
+    addPageWidget: (pageId: string, widgetProps: IWidgetProps) => dispatch(addWidget(pageId, widgetProps))
   }
 }
 

app/client/src/pages/Editor/snapToGrid.ts

@@ -1,5 +1,5 @@
-export default function snapToGrid(x: number, y: number) {
-  const snappedX = Math.round(x / 32) * 32
-  const snappedY = Math.round(y / 32) * 32
+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]
 }

app/client/src/pages/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> {

app/client/src/reducers/entityReducers/canvasWidgetsReducers.tsx

@@ -5,13 +5,13 @@ import {
   ReduxAction
 } from "../../constants/ActionConstants"
 import { IWidgetProps } from "../../widgets/BaseWidget"
-import CanvasWidgetsNormalizer, { widgetSchema } from "../../normalizers/CanvasWidgetsNormalizer";
+import CanvasWidgetsNormalizer from "../../normalizers/CanvasWidgetsNormalizer";
 
 const initialState: CanvasWidgetsReduxState = {}
 
 
 export interface IFlattenedWidgetProps extends IWidgetProps {
-  children?: string[] 
+  children?: string[];
 }
 
 const canvasWidgetsReducer = createReducer(initialState, {

app/client/src/reducers/uiReducers/canvasReducer.tsx

@@ -14,7 +14,6 @@ const canvasReducer = createReducer(initialState, {
     state: CanvasReduxState,
     action: ReduxAction<LoadCanvasPayload>
   ) => {
-    console.log(action.payload);
     return { pageWidgetId: action.payload.pageWidgetId }
   }
 })

app/client/src/reducers/uiReducers/editorHeaderReducer.tsx

@@ -1,8 +1,4 @@
 import { createReducer } from "../../utils/PicassoUtils"
-import {
-  ActionTypes,
-  ReduxAction
-} from "../../constants/ActionConstants"
 
 const initialState: EditorHeaderReduxState = {}
 

app/client/src/reducers/uiReducers/editorReducer.tsx

@@ -6,7 +6,7 @@ import {
   LoadWidgetCardsPanePayload
 } from "../../constants/ActionConstants"
 import { IWidgetCardProps, IWidgetProps } from "../../widgets/BaseWidget"
-import { IContainerWidgetProps } from "../../widgets/ContainerWidget"
+import { ContainerWidgetProps } from "../../widgets/ContainerWidget"
 
 const initialState: EditorReduxState = {}
 
@@ -32,9 +32,9 @@ const editorReducer = createReducer(initialState, {
 })
 
 export interface EditorReduxState {
-  pageWidget?: IContainerWidgetProps<any>
+  pageWidget?: ContainerWidgetProps<any>;
   cards?: {
-    [id: string]: IWidgetCardProps[]
+    [id: string]: IWidgetCardProps[];
   }
 }
 

app/client/src/sagas/PageSagas.tsx

@@ -1,7 +1,7 @@
 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>) {
@@ -10,17 +10,15 @@ export function* fetchPageSaga(pageRequestAction: ReduxAction<PageRequest>) {
     const pageResponse: PageResponse = yield call(PageApi.fetchPage, pageRequest)
     if (pageRequest.renderMode === RenderModes.CANVAS) {
       const normalizedResponse = CanvasWidgetsNormalizer.normalize(pageResponse)
-      console.log(normalizedResponse);
       const payload = {
         pageWidgetId: normalizedResponse.result,
         widgets: normalizedResponse.entities.canvasWidgets
       }
       yield put({ type: ActionTypes.UPDATE_CANVAS, payload })
     }
-  } catch(err) {
+  } catch(err){
     //TODO(abhinav): REFACTOR THIS
   }
-  
 }
 
 export function* watchFetchPage() {

app/client/src/sagas/WidgetCardsPaneSagas.tsx

@@ -1,8 +1,8 @@
-import CanvasWidgetsNormalizer from "../normalizers/CanvasWidgetsNormalizer"
+// 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, takeLeading, all, takeEvery, takeLatest } from "redux-saga/effects"
+import { call, put, takeLatest } from "redux-saga/effects"
 
 
 export function* fetchWidgetCards(widgetCardsRequestAction: ReduxAction<WidgetCardsPaneRequest>) {

app/client/src/utils/WidgetFactory.tsx

@@ -15,7 +15,7 @@ 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
@@ -28,8 +28,8 @@ class WidgetFactory {
 
 }
 
-export interface IWidgetCreationException {
-    message: string
+export interface WidgetCreationException {
+    message: string;
 }
 
 export default WidgetFactory

app/client/src/utils/WidgetRegistry.tsx

@@ -1,101 +1,101 @@
-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} />
       }
     })

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
+}

app/client/src/widgets/BaseWidget.tsx

@@ -12,9 +12,7 @@ import {
 import { Component } from "react"
 import { BaseStyle } from "../editorComponents/BaseComponent"
 import _ from "lodash"
-import * as React from "react"
-import ContainerWidget from "./ContainerWidget"
-import ContainerComponent from "../editorComponents/ContainerComponent"
+import React from "react"
 import DraggableComponent from "../editorComponents/DraggableComponent"
 
 abstract class BaseWidget<
@@ -100,6 +98,7 @@ abstract class BaseWidget<
   }
 
   getComponentPaneView(): JSX.Element {
+    console.log(this.props)
     return (
       <DraggableComponent
         {...this.props}
@@ -131,46 +130,47 @@ 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
+  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 IWidgetCardProps {
-  widgetType: WidgetType
-  key?: string
-  label: string
-  icon: string
-  groups: string[]
+  widgetType: WidgetType;
+  key?: string;
+  label: string;
+  icon: string;
+  groups: string[];
 }
 
 export default BaseWidget

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

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 (
@@ -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

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;

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

app/client/src/widgets/ContainerWidget.tsx

@@ -1,37 +1,34 @@
+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 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>,
-  IContainerWidgetState
+  ContainerWidgetProps<IWidgetProps>,
+  ContainerWidgetState
 > {
-  constructor(props: IContainerWidgetProps<IWidgetProps>) {
+  constructor(props: ContainerWidgetProps<IWidgetProps>) {
     super(props)
     this.renderChildWidget = this.renderChildWidget.bind(this)
     this.state = {
       width: 0,
       height: 0,
-      snapColumnSpace: 1,
-      snapRowSpace: 1
+      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
@@ -91,18 +88,18 @@ class ContainerWidget extends BaseWidget<
   }
 }
 
-export interface IContainerWidgetState extends IWidgetState {
-  snapColumnSpace: number
-  snapRowSpace: number
+export interface ContainerWidgetState extends IWidgetState {
+  snapColumnSpace: number;
+  snapRowSpace: number;
 }
 
-export interface IContainerWidgetProps<T extends IWidgetProps>
+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

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;

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;

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

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

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;

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;

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;

app/client/tsconfig.json

@@ -5,26 +5,26 @@
       "dom",
       "dom.iterable",
       "esnext",
-      // "es5",
-      // "es2015.collection",
-      // "es2015.iterable"
+      "es5",
+      "es2015.collection",
+      "es2015.iterable"
     ],
+    "strict": true,
     "allowJs": true,
     "skipLibCheck": true,
     "esModuleInterop": true,
     "allowSyntheticDefaultImports": true,
-    "strict": true,
     "forceConsistentCasingInFileNames": true,
     "module": "esnext",
     "moduleResolution": "node",
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
-    "jsx": "preserve",
-    // "downlevelIteration": true,
-    // "importHelpers": true
+    "jsx": "react",
+    "downlevelIteration": true,
+    "importHelpers": true
   },
   "include": [
-    "src"
+    "src/**/*"
   ]
 }