added button widget

app/client/src/constants/WidgetConstants.tsx

@@ -1,4 +1,4 @@
-export type WidgetType = "TEXT_WIDGET" | "IMAGE_WIDGET" | "CONTAINER_WIDGET" | "LIST_WIDGET" | "INPUT_TEXT_WIDGET"
+export type WidgetType = "TEXT_WIDGET" | "IMAGE_WIDGET" | "CONTAINER_WIDGET" | "LIST_WIDGET" | "INPUT_TEXT_WIDGET" | "BUTTON_WIDGET"
 export type ContainerOrientation = "HORIZONTAL" | "VERTICAL"
 export type PositionType = "ABSOLUTE" | "CONTAINER_DIRECTION"
 export type CSSUnit = "px" | "cm" | "mm" | "in" | "pt" | "pc" | "em" | "ex" | "ch" | "rem" | "vw" | "vh" | "vmin" | "vmax" | "%"

app/client/src/mockResponses/CanvasResponse.ts

@@ -25,6 +25,15 @@ const CanvasResponse: IContainerWidgetProps<any> = {
       bottomRow: 5,
       rightColumn: 5,
       text: "hey2"
+    },
+    {
+      widgetId: "1",
+      widgetType: "BUTTON_WIDGET",
+      topRow: 6,
+      leftColumn: 5,
+      bottomRow: 5,
+      rightColumn: 5,
+      text: "hey2"
     }
   ],
   topRow: 0,

app/client/src/utils/WidgetRegistry.tsx

@@ -5,6 +5,9 @@ import ContainerWidget, {
 import TextWidget, {
   ITextWidgetProps
 } from "../widgets/TextWidget"
+import ButtonWidget, {
+  IButtonWidgetProps
+} from "../widgets/ButtonWidget"
 import WidgetFactory from "./WidgetFactory"
 import React from "react"
 
@@ -26,6 +29,14 @@ class WidgetBuilderRegistry {
         return <TextWidget {...widgetData} />
       }
     })
+
+    WidgetFactory.registerWidgetBuilder("BUTTON_WIDGET", {
+      buildWidget(
+        widgetData: IButtonWidgetProps
+      ): JSX.Element {
+        return <ButtonWidget {...widgetData} />
+      }
+    })
   
   }
 }

app/client/src/widgets/ButtonWidget.tsx

@@ -0,0 +1,40 @@
+import * as React from "react"
+import BaseWidget, { IWidgetProps, IWidgetState } from "./BaseWidget"
+import { WidgetType, CSSUnits } 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)
+  }
+
+  getWidgetView() {
+    return (
+      <ButtonComponent
+        style={{
+          positionType: "ABSOLUTE",
+          yPosition: this.props.topRow * this.props.parentRowSpace,
+          xPosition: this.props.leftColumn * this.props.parentColumnSpace,
+          xPositionUnit: CSSUnits.PIXEL,
+          yPositionUnit: CSSUnits.PIXEL
+        }}
+        widgetId={this.props.widgetId}
+        key={this.props.widgetId}
+        text={this.props.text}
+      />
+    )
+  }
+
+  getWidgetType(): WidgetType {
+    return "BUTTON_WIDGET"
+  }
+}
+
+export interface IButtonWidgetProps extends IWidgetProps {
+  text?: string
+  ellipsize?: boolean
+}
+
+export default ButtonWidget