added typed lodash

fixed basic component rendering
connected redux store

app/client/package-lock.json

@@ -1077,6 +1077,11 @@
       "resolved": "https://registry.npmjs.org/@types/jest/-/jest-23.3.13.tgz",
       "integrity": "sha512-ePl4l+7dLLmCucIwgQHAgjiepY++qcI6nb8eAwGNkB6OxmTe3Z9rQU3rSpomqu42PCCnlThZbOoxsf+qylJsLA=="
     },
+    "@types/lodash": {
+      "version": "4.14.120",
+      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.120.tgz",
+      "integrity": "sha512-jQ21kQ120mo+IrDs1nFNVm/AsdFxIx2+vZ347DbogHJPd/JzKNMOqU6HCYin1W6v8l5R9XSO2/e9cxmn7HAnVw=="
+    },
     "@types/moment-timezone": {
       "version": "0.5.10",
       "resolved": "https://registry.npmjs.org/@types/moment-timezone/-/moment-timezone-0.5.10.tgz",

app/client/package.json

@@ -8,6 +8,7 @@
     "@blueprintjs/icons": "^3.5.0",
     "@blueprintjs/table": "^3.4.0",
     "@types/jest": "^23.3.13",
+    "@types/lodash": "^4.14.120",
     "@types/moment-timezone": "^0.5.10",
     "@types/node": "^10.12.18",
     "@types/react": "^16.8.2",

app/client/src/App.tsx

@@ -1,12 +1,6 @@
 import React, { Component } from 'react';
 import logo from './assets/images/logo.svg';
 import './App.css';
-import { createStore } from 'redux'
-import appReducer from './reducers';
-import WidgetBuilderRegistry from "./utils/WidgetRegistry"
-
-WidgetBuilderRegistry.registerWidgetBuilders()
-const store = createStore(appReducer)
 
 class App extends Component {
   render() {

app/client/src/editorComponents/ContainerComponent.tsx

@@ -4,8 +4,8 @@ import { ContainerOrientation } from "../constants/WidgetConstants"
 import styled from "styled-components"
 
 const Container = styled.div`
-  background: papayawhip;
+  background: "black";
-  color: ${props => (props.theme ? props.theme.colors.text : "white")};
+  color: "black";
 `
 
 class ContainerComponent extends BaseComponent<IContainerProps> {
@@ -24,11 +24,11 @@ class ContainerComponent extends BaseComponent<IContainerProps> {
 
 export interface IContainerProps extends IComponentProps {
   children?: React.Component[]
-  snapColumnSpace: number
+  snapColumnSpace?: number
-  snapRowSpace: number
+  snapRowSpace?: number
-  snapColumns: number
+  snapColumns?: number
-  snapRows: number
+  snapRows?: number
-  orientation: ContainerOrientation
+  orientation?: ContainerOrientation
 }
 
 export default ContainerComponent

app/client/src/editorComponents/TextComponent.tsx

@@ -10,8 +10,8 @@ class TextComponent extends React.Component<ITextComponentProps> {
 }
 
 export interface ITextComponentProps extends IComponentProps {
-  text: string
+  text?: string
-  ellipsize: boolean
+  ellipsize?: boolean
 }
 
 export default TextComponent

app/client/src/index.tsx

@@ -1,20 +1,28 @@
 import React from "react"
 import ReactDOM from "react-dom"
+import { Provider } from "react-redux"
 import "./index.css"
 import App from "./App"
 import Editor from "./pages/Editor"
 import PageNotFound from "./pages/PageNotFound"
 import * as serviceWorker from "./serviceWorker"
 import { BrowserRouter, Route, Switch } from "react-router-dom"
+import { createStore } from "redux"
+import appReducer from "./reducers"
+import WidgetBuilderRegistry from "./utils/WidgetRegistry"
 
+WidgetBuilderRegistry.registerWidgetBuilders()
+const store = createStore(appReducer)
 ReactDOM.render(
-  <BrowserRouter>
+  <Provider store={store}>
-    <Switch>
+    <BrowserRouter>
-      <Route exact path="/" component={App} />
+      <Switch>
-      <Route exact path="/builder" component={Editor} />
+        <Route exact path="/" component={App} />
-      <Route component={PageNotFound}/>
+        <Route exact path="/builder" component={Editor} />
-    </Switch>
+        <Route component={PageNotFound} />
-  </BrowserRouter>,
+      </Switch>
+    </BrowserRouter>
+  </Provider>,
   document.getElementById("root")
 )
 

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

@@ -10,7 +10,7 @@ class Canvas extends Component<{ canvas: CanvasReduxState }> {
     if (canvasWidgetData) {
       const canvasWidget = WidgetFactory.createWidget(canvasWidgetData)
       return canvasWidget.getWidgetView()
-    } else return undefined
+    } else return <div></div>
   }
 }
 

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

@@ -7,7 +7,29 @@ import {
 import { IContainerWidgetProps } from "../../widgets/ContainerWidget"
 
 const initialState: CanvasReduxState = {
-    canvasWidgetProps: undefined
+  canvasWidgetProps: {
+    widgetId: "0",
+    widgetType: "CONTAINER_WIDGET",
+    children: [
+      {
+        widgetId: "1",
+        widgetType: "TEXT_WIDGET",
+        //text: "Hello World",
+        topRow: 0,
+        leftColumn: 0,
+        bottomRow: 5,
+        rightColumn: 5,
+        parentColumnSpace: 100,
+        parentRowSpace: 100
+      }
+    ],
+    topRow: 0,
+    bottomRow: 100,
+    leftColumn: 0,
+    rightColumn: 100,
+    parentColumnSpace: 1,
+    parentRowSpace: 1
+  }
 }
 
 const canvasReducer = createReducer(initialState, {

app/client/src/utils/WidgetFactory.tsx

@@ -4,7 +4,7 @@ import { IComponentProps } from "../editorComponents/BaseComponent";
 
 class WidgetFactory {
 
-    static widgetMap: Map<WidgetType, IWidgetBuilder<IWidgetProps, IComponentProps>>
+    static widgetMap: Map<WidgetType, IWidgetBuilder<IWidgetProps, IComponentProps>> = new Map()
 
     static registerWidgetBuilder(widgetType: WidgetType, widgetBuilder: IWidgetBuilder<IWidgetProps, IComponentProps>) {
         this.widgetMap.set(widgetType, widgetBuilder)

app/client/src/utils/WidgetRegistry.tsx

@@ -2,11 +2,16 @@ import BaseWidget from "../widgets/BaseWidget"
 import ContainerWidget, {
   IContainerWidgetProps
 } from "../widgets/ContainerWidget"
+import TextWidget, {
+  ITextWidgetProps
+} from "../widgets/TextWidget"
 import { IContainerProps } from "../editorComponents/ContainerComponent"
 import WidgetFactory from "./WidgetFactory"
+import { ITextComponentProps } from "../editorComponents/TextComponent";
 
 class WidgetBuilderRegistry {
   static registerWidgetBuilders() {
+    
     WidgetFactory.registerWidgetBuilder("CONTAINER_WIDGET", {
       buildWidget(
         widgetData: IContainerWidgetProps
@@ -14,6 +19,15 @@ class WidgetBuilderRegistry {
         return new ContainerWidget(widgetData)
       }
     })
+
+    WidgetFactory.registerWidgetBuilder("TEXT_WIDGET", {
+      buildWidget(
+        widgetData: ITextWidgetProps
+      ): BaseWidget<ITextWidgetProps, ITextComponentProps> {
+        return new TextWidget(widgetData)
+      }
+    })
+  
   }
 }
 

app/client/src/widgets/ContainerWidget.tsx

@@ -12,12 +12,10 @@ class ContainerWidget extends BaseWidget<
 > {
   constructor(widgetProps: IContainerWidgetProps) {
     super(widgetProps)
-    if (this.widgetData) {
+    this.widgetData.snapColumns = 13
-      this.widgetData.snapColumns = 13
+    this.widgetData.snapColumnSpace = this.width / this.widgetData.snapColumns
-      this.widgetData.snapColumnSpace = this.width / this.widgetData.snapColumns
+    this.widgetData.snapRowSpace = 100
-      this.widgetData.snapRowSpace = 100
+    this.widgetData.snapRows = this.height / this.widgetData.snapRowSpace
-      this.widgetData.snapRows = this.height / this.widgetData.snapRowSpace
-    }
   }
 
   getComponentProps(): IContainerProps {
@@ -36,8 +34,13 @@ class ContainerWidget extends BaseWidget<
       <ContainerComponent {...this.getComponentProps()}>
         {this.widgetData.children
           ? this.widgetData.children.map(childWidgetData => {
-              childWidgetData.parentColumnSpace = this.widgetData.snapColumnSpace
+              childWidgetData.parentColumnSpace = this.widgetData
+                .snapColumnSpace
+                ? this.widgetData.snapColumnSpace
+                : 0
               childWidgetData.parentRowSpace = this.widgetData.snapRowSpace
+                ? this.widgetData.snapRowSpace
+                : 0
               return WidgetFactory.createWidget(childWidgetData).getWidgetView()
             })
           : undefined}
@@ -48,16 +51,15 @@ class ContainerWidget extends BaseWidget<
   getWidgetType(): WidgetType {
     return "CONTAINER_WIDGET"
   }
-
 }
 
 export interface IContainerWidgetProps extends IWidgetProps {
   children?: IWidgetProps[]
-  snapColumnSpace: number
+  snapColumnSpace?: number
-  snapRowSpace: number
+  snapRowSpace?: number
-  snapColumns: number
+  snapColumns?: number
-  snapRows: number
+  snapRows?: number
-  orientation: ContainerOrientation
+  orientation?: ContainerOrientation
 }
 
 export default ContainerWidget

app/client/src/widgets/TextWidget.tsx

@@ -0,0 +1,41 @@
+import * as React from "react"
+import BaseWidget, { IWidgetProps } from "./BaseWidget"
+import { WidgetType } from "../constants/WidgetConstants"
+import TextComponent, {
+  ITextComponentProps
+} from "../editorComponents/TextComponent"
+import _ from "lodash"
+
+class TextWidget extends BaseWidget<ITextWidgetProps, ITextComponentProps> {
+  constructor(widgetProps: ITextWidgetProps) {
+    super(widgetProps)
+  }
+
+  getComponentProps(): ITextComponentProps {
+    return {
+      widgetId: this.widgetData.widgetId,
+      text: !_.isNil(this.widgetData.text) ? this.widgetData.text : "Hello World",
+      ellipsize: this.widgetData.ellipsize === true
+    }
+  }
+
+  getWidgetView(): any {
+    return (
+      <TextComponent
+        key={this.widgetData.widgetId}
+        {...this.getComponentProps()}
+      />
+    )
+  }
+
+  getWidgetType(): WidgetType {
+    return "TEXT_WIDGET"
+  }
+}
+
+export interface ITextWidgetProps extends IWidgetProps {
+  text?: string
+  ellipsize?: boolean
+}
+
+export default TextWidget