From 32621a7975943cd15e48d0d051085c3a911d857f Mon Sep 17 00:00:00 2001
From: Anirudh Madhavan <a@homebrewlabs.in>
Date: Thu, 21 Mar 2019 12:10:32 +0000
Subject: [PATCH] Feature/core components

---
 app/client/src/constants/WidgetConstants.tsx  |  11 +-
 .../editorComponents/BreadcrumbsComponent.tsx |  35 ++++++
 .../src/editorComponents/ButtonComponent.tsx  |  10 +-
 .../src/editorComponents/CalloutComponent.tsx |  28 +++--
 .../editorComponents/CheckboxComponent.tsx    |  29 +++++
 .../editorComponents/ContainerComponent.tsx   |  28 ++---
 .../src/editorComponents/IconComponent.tsx    |  27 +++--
 .../editorComponents/InputGroupComponent.tsx  |  41 ++++---
 .../NumericInputComponent.tsx                 |  60 ++++++++++
 .../editorComponents/PositionContainer.tsx    |  15 ---
 .../editorComponents/RadioGroupComponent.tsx  |  43 ++++++++
 .../src/editorComponents/SpinnerComponent.tsx |  23 ++--
 .../editorComponents/TagInputComponent.tsx    |  35 ++++++
 .../src/editorComponents/TextComponent.tsx    |  13 ++-
 .../src/mockResponses/CanvasResponse.tsx      | 104 ++++++++++++++++--
 .../src/mockResponses/WidgetPaneResponse.tsx  |   6 +-
 app/client/src/utils/WidgetRegistry.tsx       |  93 +++++++++++-----
 app/client/src/widgets/BreadcrumbsWidget.tsx  |  43 ++++++++
 app/client/src/widgets/CheckboxWidget.tsx     |  38 +++++++
 app/client/src/widgets/ContainerWidget.tsx    |   4 -
 app/client/src/widgets/NumericInputWidget.tsx |  73 ++++++++++++
 app/client/src/widgets/RadioGroupWidget.tsx   |  55 +++++++++
 app/client/src/widgets/TagInputWidget.tsx     |  48 ++++++++
 app/client/src/widgets/TextWidget.tsx         |  24 ++--
 24 files changed, 728 insertions(+), 158 deletions(-)
 create mode 100644 app/client/src/editorComponents/BreadcrumbsComponent.tsx
 create mode 100644 app/client/src/editorComponents/CheckboxComponent.tsx
 create mode 100644 app/client/src/editorComponents/NumericInputComponent.tsx
 delete mode 100644 app/client/src/editorComponents/PositionContainer.tsx
 create mode 100644 app/client/src/editorComponents/RadioGroupComponent.tsx
 create mode 100644 app/client/src/editorComponents/TagInputComponent.tsx
 create mode 100644 app/client/src/widgets/BreadcrumbsWidget.tsx
 create mode 100644 app/client/src/widgets/CheckboxWidget.tsx
 create mode 100644 app/client/src/widgets/NumericInputWidget.tsx
 create mode 100644 app/client/src/widgets/RadioGroupWidget.tsx
 create mode 100644 app/client/src/widgets/TagInputWidget.tsx

diff --git a/app/client/src/constants/WidgetConstants.tsx b/app/client/src/constants/WidgetConstants.tsx
index 373ad65148..a858273719 100644
--- a/app/client/src/constants/WidgetConstants.tsx
+++ b/app/client/src/constants/WidgetConstants.tsx
@@ -8,6 +8,11 @@ export type WidgetType =
   | "INPUT_GROUP_WIDGET"
   | "SPINNER_WIDGET"
   | "BUTTON_WIDGET"
+  | "BREADCRUMBS_WIDGET"
+  | "TAG_INPUT_WIDGET"
+  | "NUMERIC_INPUT_WIDGET"
+  | "CHECKBOX_WIDGET"
+  | "RADIO_GROUP_WIDGET"
 export type ContainerOrientation = "HORIZONTAL" | "VERTICAL"
 export type PositionType = "ABSOLUTE" | "CONTAINER_DIRECTION"
 export type CSSUnit =
@@ -27,7 +32,11 @@ export type CSSUnit =
   | "vmax"
   | "%"
 
-export type RenderMode = "COMPONENT_PANE" | "CANVAS" | "PAGE" | "CANVAS_SELECTED"
+export type RenderMode =
+  | "COMPONENT_PANE"
+  | "CANVAS"
+  | "PAGE"
+  | "CANVAS_SELECTED"
 
 export const RenderModes: { [id: string]: RenderMode } = {
   COMPONENT_PANE: "COMPONENT_PANE",
diff --git a/app/client/src/editorComponents/BreadcrumbsComponent.tsx b/app/client/src/editorComponents/BreadcrumbsComponent.tsx
new file mode 100644
index 0000000000..43402e5153
--- /dev/null
+++ b/app/client/src/editorComponents/BreadcrumbsComponent.tsx
@@ -0,0 +1,35 @@
+import * as React from "react"
+import { IComponentProps } from "./BaseComponent"
+import {
+  Boundary,
+  Breadcrumbs,
+  Breadcrumb,
+  Card,
+  IBreadcrumbProps
+} from "@blueprintjs/core"
+import { Container } from "./ContainerComponent"
+
+class BreadcrumbsComponent extends React.Component<IBreadcrumbsComponentProps> {
+  render() {
+    return (
+      <Container {...this.props}>
+        <Breadcrumbs
+          collapseFrom={this.props.collapseFrom}
+          items={this.props.items}
+          minVisibleItems={this.props.minVisibleItems}
+          className={this.props.className}
+        />
+      </Container>
+    )
+  }
+}
+
+export interface IBreadcrumbsComponentProps extends IComponentProps {
+  width?: number
+  collapseFrom?: Boundary
+  className?: string
+  minVisibleItems?: number
+  items?: IBreadcrumbProps[]
+}
+
+export default BreadcrumbsComponent
diff --git a/app/client/src/editorComponents/ButtonComponent.tsx b/app/client/src/editorComponents/ButtonComponent.tsx
index f408476c83..e1449a7a92 100644
--- a/app/client/src/editorComponents/ButtonComponent.tsx
+++ b/app/client/src/editorComponents/ButtonComponent.tsx
@@ -1,14 +1,14 @@
 import * as React from "react"
 import { Button, MaybeElement } from "@blueprintjs/core"
 import { ITextComponentProps } from "./TextComponent"
-import PositionContainer from "./PositionContainer"
+import { Container } from "./ContainerComponent"
 
-class ButtomComponent extends React.Component<IButtonComponentProps> {
+class ButtonComponent extends React.Component<IButtonComponentProps> {
   render() {
     return (
-      <PositionContainer {...this.props}>
+      <Container {...this.props}>
         <Button text={this.props.text} icon={this.props.icon} />
-      </PositionContainer>
+      </Container>
     )
   }
 }
@@ -17,4 +17,4 @@ interface IButtonComponentProps extends ITextComponentProps {
   icon?: MaybeElement
 }
 
-export default ButtomComponent
+export default ButtonComponent
diff --git a/app/client/src/editorComponents/CalloutComponent.tsx b/app/client/src/editorComponents/CalloutComponent.tsx
index d17bb0e28a..d2b3e6f11f 100644
--- a/app/client/src/editorComponents/CalloutComponent.tsx
+++ b/app/client/src/editorComponents/CalloutComponent.tsx
@@ -1,30 +1,28 @@
-import * as React from "react";
-import { IComponentProps } from "./BaseComponent";
-import PositionContainer from "./PositionContainer";
-import { Callout, Intent } from "@blueprintjs/core";
-
+import * as React from "react"
+import { IComponentProps } from "./BaseComponent"
+import { Callout, Intent } from "@blueprintjs/core"
+import { Container } from "./ContainerComponent"
 class CalloutComponent extends React.Component<ICalloutComponentProps> {
   render() {
     return (
-      <PositionContainer {...this.props}>
+      <Container {...this.props}>
         <Callout
-          {...this.props}
           title={this.props.title ? this.props.title : undefined}
           intent={this.props.intent}
         >
           {this.props.description}
         </Callout>
-      </PositionContainer>
-    );
+      </Container>
+    )
   }
 }
 
 export interface ICalloutComponentProps extends IComponentProps {
-  id?: string;
-  title?: string;
-  description?: string;
-  intent?: Intent;
-  ellipsize?: boolean;
+  id?: string
+  title?: string
+  description?: string
+  intent?: Intent
+  ellipsize?: boolean
 }
 
-export default CalloutComponent;
+export default CalloutComponent
diff --git a/app/client/src/editorComponents/CheckboxComponent.tsx b/app/client/src/editorComponents/CheckboxComponent.tsx
new file mode 100644
index 0000000000..06639bf374
--- /dev/null
+++ b/app/client/src/editorComponents/CheckboxComponent.tsx
@@ -0,0 +1,29 @@
+import * as React from "react"
+import { IComponentProps } from "./BaseComponent"
+import { Checkbox } from "@blueprintjs/core"
+import { Container } from "./ContainerComponent"
+class CheckboxComponent extends React.Component<ICheckboxComponentProps> {
+  render() {
+    return (
+      <Container {...this.props}>
+        {this.props.items.map(item => (
+          <Checkbox
+            label={item.label}
+            defaultIndeterminate={item.defaultIndeterminate}
+            value={item.value}
+          />
+        ))}
+      </Container>
+    )
+  }
+}
+
+export interface ICheckboxComponentProps extends IComponentProps {
+  items: Array<{
+    label: string
+    defaultIndeterminate: boolean
+    value: number | string
+  }>
+}
+
+export default CheckboxComponent
diff --git a/app/client/src/editorComponents/ContainerComponent.tsx b/app/client/src/editorComponents/ContainerComponent.tsx
index 1d609d5701..a069c3cd80 100644
--- a/app/client/src/editorComponents/ContainerComponent.tsx
+++ b/app/client/src/editorComponents/ContainerComponent.tsx
@@ -3,12 +3,16 @@ import { ContainerOrientation } from "../constants/WidgetConstants"
 import styled from "../constants/DefaultTheme"
 import React from "react"
 
-const Container = styled("div")<IContainerProps>`
+export const Container = styled("div")<IContainerProps>`
   display: "flex"
-  flexDirection: ${(props) => { return props.orientation === "HORIZONTAL" ? "row" : "column" }};
+  flexDirection: ${props => {
+    return props.orientation === "HORIZONTAL" ? "row" : "column"
+  }};
   background: ${props => props.style.backgroundColor};
   color: ${props => props.theme.primaryColor};
-  position: ${props => { return props.style.positionType === "ABSOLUTE" ? "absolute" : "relative" }};
+  position: ${props => {
+    return props.style.positionType === "ABSOLUTE" ? "absolute" : "relative"
+  }};
   left: ${props => {
     return props.style.xPosition + props.style.xPositionUnit
   }};
@@ -19,25 +23,13 @@ const Container = styled("div")<IContainerProps>`
 
 class ContainerComponent extends BaseComponent<IContainerProps> {
   render() {
-    return (
-      <Container {...this.props}>
-        {this.props.children
-          ? this.props.children.map(child => {
-              return child
-            })
-          : undefined}
-      </Container>
-    )
+    return <Container {...this.props}>{this.props.children}</Container>
   }
 }
 
 export interface IContainerProps extends IComponentProps {
-  children?: JSX.Element[]
-  snapColumnSpace: number
-  snapRowSpace: number
-  snapColumns: number
-  snapRows: number
-  orientation: ContainerOrientation
+  children?: JSX.Element[] | JSX.Element
+  orientation?: ContainerOrientation
 }
 
 export default ContainerComponent
diff --git a/app/client/src/editorComponents/IconComponent.tsx b/app/client/src/editorComponents/IconComponent.tsx
index 5f6e9097b8..88bff73750 100644
--- a/app/client/src/editorComponents/IconComponent.tsx
+++ b/app/client/src/editorComponents/IconComponent.tsx
@@ -1,28 +1,27 @@
-import * as React from "react";
-import { IComponentProps } from "./BaseComponent";
-import { Icon, Intent } from "@blueprintjs/core";
-import { IconName } from "@blueprintjs/icons";
-import PositionContainer from "./PositionContainer";
-
+import * as React from "react"
+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> {
   render() {
     return (
-      <PositionContainer {...this.props}>
+      <Container {...this.props}>
         <Icon
           icon={this.props.icon}
           iconSize={this.props.iconSize}
           intent={this.props.intent}
         />
-      </PositionContainer>
-    );
+      </Container>
+    )
   }
 }
 
 export interface IIconComponentProps extends IComponentProps {
-  iconSize?: number;
-  icon?: IconName;
-  intent?: Intent;
-  ellipsize?: boolean;
+  iconSize?: number
+  icon?: IconName
+  intent?: Intent
+  ellipsize?: boolean
 }
 
-export default IconComponent;
+export default IconComponent
diff --git a/app/client/src/editorComponents/InputGroupComponent.tsx b/app/client/src/editorComponents/InputGroupComponent.tsx
index 331aac9bd5..0e2eb94cfa 100644
--- a/app/client/src/editorComponents/InputGroupComponent.tsx
+++ b/app/client/src/editorComponents/InputGroupComponent.tsx
@@ -1,12 +1,11 @@
-import * as React from "react";
-import { IComponentProps } from "./BaseComponent";
-import PositionContainer from "./PositionContainer";
-import { IconName, InputGroup, Intent } from "@blueprintjs/core";
-
+import * as React from "react"
+import { IComponentProps } from "./BaseComponent"
+import { IconName, InputGroup, Intent } from "@blueprintjs/core"
+import { Container } from "./ContainerComponent"
 class InputGroupComponent extends React.Component<IInputGroupComponentProps> {
   render() {
     return (
-      <PositionContainer {...this.props}>
+      <Container {...this.props}>
         <InputGroup
           className={this.props.className}
           disabled={this.props.disabled}
@@ -21,24 +20,24 @@ class InputGroupComponent extends React.Component<IInputGroupComponentProps> {
           defaultValue={this.props.defaultValue}
           type={this.props.type}
         />
-      </PositionContainer>
-    );
+      </Container>
+    )
   }
 }
 
 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;
+  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;
+export default InputGroupComponent
diff --git a/app/client/src/editorComponents/NumericInputComponent.tsx b/app/client/src/editorComponents/NumericInputComponent.tsx
new file mode 100644
index 0000000000..798a058e76
--- /dev/null
+++ b/app/client/src/editorComponents/NumericInputComponent.tsx
@@ -0,0 +1,60 @@
+import * as React from "react"
+import { IComponentProps } from "./BaseComponent"
+import { Intent, NumericInput, IconName } from "@blueprintjs/core"
+import { Container } from "./ContainerComponent"
+class NumericInputComponent extends React.Component<
+  INumericInputComponentProps
+> {
+  render() {
+    return (
+      <Container {...this.props}>
+        <NumericInput
+          placeholder={this.props.placeholder}
+          min={this.props.min}
+          max={this.props.max}
+          className={this.props.className}
+          disabled={this.props.disabled}
+          large={this.props.large}
+          intent={this.props.intent}
+          defaultValue={this.props.defaultValue}
+          leftIcon={this.props.leftIcon}
+          rightElement={this.props.rightElement}
+          allowNumericCharactersOnly={this.props.allowNumericCharactersOnly}
+          fill={this.props.fill}
+          majorStepSize={this.props.majorStepSize}
+          minorStepSize={this.props.minorStepSize}
+          onButtonClick={this.props.onButtonClick}
+          inputRef={this.props.inputRef}
+          selectAllOnFocus={this.props.selectAllOnFocus}
+          selectAllOnIncrement={this.props.selectAllOnIncrement}
+          stepSize={this.props.stepSize}
+        />
+      </Container>
+    )
+  }
+}
+
+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 default NumericInputComponent
diff --git a/app/client/src/editorComponents/PositionContainer.tsx b/app/client/src/editorComponents/PositionContainer.tsx
deleted file mode 100644
index 8a3ea67aac..0000000000
--- a/app/client/src/editorComponents/PositionContainer.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import { IComponentProps } from "./BaseComponent";
-import styled from "../constants/DefaultTheme";
-
-const PositionContainer = styled("div")<IComponentProps>`
-  color: ${props => props.theme.primaryColor};
-  position: ${props => props.style.positionType};
-  left: ${props => {
-    return props.style.xPosition + props.style.xPositionUnit;
-  }};
-  top: ${props => {
-    return props.style.yPosition + props.style.yPositionUnit;
-  }};
-`;
-
-export default PositionContainer;
diff --git a/app/client/src/editorComponents/RadioGroupComponent.tsx b/app/client/src/editorComponents/RadioGroupComponent.tsx
new file mode 100644
index 0000000000..06c7f1ddc3
--- /dev/null
+++ b/app/client/src/editorComponents/RadioGroupComponent.tsx
@@ -0,0 +1,43 @@
+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> {
+  render() {
+    return (
+      <Container {...this.props}>
+        <RadioGroup
+          inline={this.props.inline}
+          label={this.props.label}
+          name={this.props.name}
+          onChange={this.props.handleRadioChange}
+          selectedValue={this.props.selectedValue}
+          disabled={this.props.disabled}
+          className={this.props.className}
+          options={this.props.options}
+        >
+          {this.props.items.map(item => (
+            <Radio label={item.label} value={item.value} />
+          ))}
+        </RadioGroup>
+      </Container>
+    )
+  }
+}
+
+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[]
+  items: Array<{
+    label: string
+    value: number | string
+  }>
+}
+
+export default RadioGroupComponent
diff --git a/app/client/src/editorComponents/SpinnerComponent.tsx b/app/client/src/editorComponents/SpinnerComponent.tsx
index dddde8a04d..7ff503055a 100644
--- a/app/client/src/editorComponents/SpinnerComponent.tsx
+++ b/app/client/src/editorComponents/SpinnerComponent.tsx
@@ -1,27 +1,26 @@
-import * as React from "react";
-import { IComponentProps } from "./BaseComponent";
-import PositionContainer from "./PositionContainer";
-import { Spinner, Intent } from "@blueprintjs/core";
+import * as React from "react"
+import { IComponentProps } from "./BaseComponent"
+import { Spinner, Intent } from "@blueprintjs/core"
+import { Container } from "./ContainerComponent"
 
 class SpinnerComponent extends React.Component<ISpinnerComponentProps> {
   render() {
     return (
-      <PositionContainer {...this.props}>
+      <Container {...this.props}>
         <Spinner
           size={this.props.size}
           value={this.props.value}
           intent={this.props.intent}
         />
-      </PositionContainer>
-    );
+      </Container>
+    )
   }
 }
 
 export interface ISpinnerComponentProps extends IComponentProps {
-  size?: number;
-  value?: number;
-  intent?: Intent;
-  ellipsize?: boolean;
+  size?: number
+  value?: number
+  intent?: Intent
 }
 
-export default SpinnerComponent;
+export default SpinnerComponent
diff --git a/app/client/src/editorComponents/TagInputComponent.tsx b/app/client/src/editorComponents/TagInputComponent.tsx
new file mode 100644
index 0000000000..0153e3b810
--- /dev/null
+++ b/app/client/src/editorComponents/TagInputComponent.tsx
@@ -0,0 +1,35 @@
+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> {
+  render() {
+    return (
+      <Container {...this.props}>
+        <TagInput
+          placeholder={this.props.placeholder}
+          values={this.props.values}
+        />
+      </Container>
+    )
+  }
+}
+
+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 default TagInputComponent
diff --git a/app/client/src/editorComponents/TextComponent.tsx b/app/client/src/editorComponents/TextComponent.tsx
index f9106886a3..be344ad732 100644
--- a/app/client/src/editorComponents/TextComponent.tsx
+++ b/app/client/src/editorComponents/TextComponent.tsx
@@ -1,16 +1,23 @@
 import * as React from "react"
 import { IComponentProps } from "./BaseComponent"
-import PositionContainer from "./PositionContainer";
-
+import { Text } from "@blueprintjs/core"
+import { Container } from "./ContainerComponent"
 class TextComponent extends React.Component<ITextComponentProps> {
   render() {
-    return <PositionContainer {...this.props}>{this.props.text}</PositionContainer>
+    return (
+      <Container {...this.props}>
+        <Text ellipsize={this.props.ellipsize} tagName={this.props.tagName}>
+          {this.props.text}
+        </Text>
+      </Container>
+    )
   }
 }
 
 export interface ITextComponentProps extends IComponentProps {
   text?: string
   ellipsize?: boolean
+  tagName?: keyof JSX.IntrinsicElements
 }
 
 export default TextComponent
diff --git a/app/client/src/mockResponses/CanvasResponse.tsx b/app/client/src/mockResponses/CanvasResponse.tsx
index 515502673b..4da916657d 100644
--- a/app/client/src/mockResponses/CanvasResponse.tsx
+++ b/app/client/src/mockResponses/CanvasResponse.tsx
@@ -1,10 +1,10 @@
-import { CanvasReduxState } from "../reducers/uiReducers/canvasReducer";
-import { IWidgetProps } from "../widgets/BaseWidget";
+import { CanvasReduxState } from "../reducers/uiReducers/canvasReducer"
+import { IWidgetProps } from "../widgets/BaseWidget"
 import ContainerWidget, {
   IContainerWidgetProps
-} from "../widgets/ContainerWidget";
-import { RenderModes } from "../constants/WidgetConstants";
-import { Colors } from "../constants/StyleConstants";
+} from "../widgets/ContainerWidget"
+import { RenderModes } from "../constants/WidgetConstants"
+import { Colors } from "../constants/StyleConstants"
 
 const CanvasResponse: IContainerWidgetProps<any> = {
   widgetId: "0",
@@ -68,9 +68,9 @@ const CanvasResponse: IContainerWidgetProps<any> = {
       widgetId: "5",
       widgetType: "ICON_WIDGET",
       topRow: 4,
-      leftColumn: 4,
+      leftColumn: 2,
       bottomRow: 5,
-      rightColumn: 5,
+      rightColumn: 3,
       icon: "globe",
       iconSize: "20",
       intent: "warning",
@@ -83,10 +83,96 @@ const CanvasResponse: IContainerWidgetProps<any> = {
       leftColumn: 6,
       bottomRow: 5,
       rightColumn: 5,
+      size: 20
+    },
+    {
+      widgetId: "6",
+      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: "7",
+      widgetType: "TAG_INPUT_WIDGET",
+      topRow: 7,
+      leftColumn: 1,
+      bottomRow: 5,
+      rightColumn: 5,
+      palceholder: "Lorem, Ipsum",
+      values: ["abx", "somf", "soke"],
       renderMode: RenderModes.CANVAS
+    },
+    {
+      widgetId: "8",
+      widgetType: "NUMERIC_INPUT_WIDGET",
+      topRow: 4,
+      leftColumn: 1,
+      bottomRow: 5,
+      rightColumn: 5,
+      palceholder: "Numeric input",
+      allowNumericCharactersOnly: true,
+      renderMode: RenderModes.CANVAS
+    },
+    {
+      widgetId: "8",
+      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: "9",
+      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;
+export default CanvasResponse
diff --git a/app/client/src/mockResponses/WidgetPaneResponse.tsx b/app/client/src/mockResponses/WidgetPaneResponse.tsx
index 9ed0a0c675..865c417f42 100644
--- a/app/client/src/mockResponses/WidgetPaneResponse.tsx
+++ b/app/client/src/mockResponses/WidgetPaneResponse.tsx
@@ -8,21 +8,21 @@ const WidgetPaneResponse: WidgetPaneReduxState = {
       text: "Lorem Ipsum",
       renderMode: RenderModes.COMPONENT_PANE,
       bottomRow: 50,
-      rightColumn: 200,
+      rightColumn: 200
     },
     {
       widgetType: "TEXT_WIDGET",
       text: "Lorem Ipsum",
       renderMode: RenderModes.COMPONENT_PANE,
       bottomRow: 50,
-      rightColumn: 200,
+      rightColumn: 200
     },
     {
       widgetType: "SPINNER_WIDGET",
       renderMode: RenderModes.COMPONENT_PANE,
       backgroundColor: "#434343",
       bottomRow: 50,
-      rightColumn: 200,
+      rightColumn: 200
     }
   ]
 }
diff --git a/app/client/src/utils/WidgetRegistry.tsx b/app/client/src/utils/WidgetRegistry.tsx
index 6eb7fc2036..06049d5fc2 100644
--- a/app/client/src/utils/WidgetRegistry.tsx
+++ b/app/client/src/utils/WidgetRegistry.tsx
@@ -1,19 +1,28 @@
-import BaseWidget, { IWidgetProps } from "../widgets/BaseWidget";
+import BaseWidget, { IWidgetProps } from "../widgets/BaseWidget"
 import ContainerWidget, {
   IContainerWidgetProps
-} from "../widgets/ContainerWidget";
-import TextWidget, { ITextWidgetProps } from "../widgets/TextWidget";
+} from "../widgets/ContainerWidget"
+import TextWidget, { ITextWidgetProps } from "../widgets/TextWidget"
 import InputGroupWidget, {
   IInputGroupWidgetProps
-} from "../widgets/InputGroupWidget";
-import CalloutWidget, { ICalloutWidgetProps } from "../widgets/CalloutWidget";
-import IconWidget, { IIconWidgetProps } from "../widgets/IconWidget";
-import SpinnerWidget, { ISpinnerWidgetProps } from "../widgets/SpinnerWidget";
-import WidgetFactory from "./WidgetFactory";
-import React from "react";
-import ButtonWidget, {
-  IButtonWidgetProps
-} from "../widgets/ButtonWidget"
+} from "../widgets/InputGroupWidget"
+import CalloutWidget, { ICalloutWidgetProps } from "../widgets/CalloutWidget"
+import IconWidget, { IIconWidgetProps } from "../widgets/IconWidget"
+import SpinnerWidget, { ISpinnerWidgetProps } from "../widgets/SpinnerWidget"
+import BreadcrumbsWidget, {
+  IBreadcrumbsWidgetProps
+} from "../widgets/BreadcrumbsWidget"
+import TagInputWidget, { ITagInputWidgetProps } from "../widgets/TagInputWidget"
+import NumericInputWidget, {
+  INumericInputWidgetProps
+} from "../widgets/NumericInputWidget"
+import CheckboxWidget, { ICheckboxWidgetProps } from "../widgets/CheckboxWidget"
+import RadioGroupWidget, {
+  IRadioGroupWidgetProps
+} from "../widgets/RadioGroupWidget"
+import WidgetFactory from "./WidgetFactory"
+import React from "react"
+import ButtonWidget, { IButtonWidgetProps } from "../widgets/ButtonWidget"
 
 class WidgetBuilderRegistry {
   static registerWidgetBuilders() {
@@ -21,46 +30,76 @@ class WidgetBuilderRegistry {
       buildWidget(
         widgetData: IContainerWidgetProps<IWidgetProps>
       ): JSX.Element {
-        return <ContainerWidget {...widgetData} />;
+        return <ContainerWidget {...widgetData} />
       }
-    });
+    })
 
     WidgetFactory.registerWidgetBuilder("TEXT_WIDGET", {
       buildWidget(widgetData: ITextWidgetProps): JSX.Element {
-        return <TextWidget {...widgetData} />;
+        return <TextWidget {...widgetData} />
       }
-    });
+    })
 
     WidgetFactory.registerWidgetBuilder("BUTTON_WIDGET", {
       buildWidget(widgetData: IButtonWidgetProps): JSX.Element {
-        return <ButtonWidget {...widgetData} />;
+        return <ButtonWidget {...widgetData} />
       }
-    });
+    })
 
     WidgetFactory.registerWidgetBuilder("CALLOUT_WIDGET", {
       buildWidget(widgetData: ICalloutWidgetProps): JSX.Element {
-        return <CalloutWidget {...widgetData} />;
+        return <CalloutWidget {...widgetData} />
       }
-    });
+    })
 
     WidgetFactory.registerWidgetBuilder("ICON_WIDGET", {
       buildWidget(widgetData: IIconWidgetProps): JSX.Element {
-        return <IconWidget {...widgetData} />;
+        return <IconWidget {...widgetData} />
       }
-    });
+    })
 
     WidgetFactory.registerWidgetBuilder("SPINNER_WIDGET", {
       buildWidget(widgetData: ISpinnerWidgetProps): JSX.Element {
-        return <SpinnerWidget {...widgetData} />;
+        return <SpinnerWidget {...widgetData} />
       }
-    });
+    })
 
     WidgetFactory.registerWidgetBuilder("INPUT_GROUP_WIDGET", {
       buildWidget(widgetData: IInputGroupWidgetProps): JSX.Element {
-        return <InputGroupWidget {...widgetData} />;
+        return <InputGroupWidget {...widgetData} />
       }
-    });
+    })
+
+    WidgetFactory.registerWidgetBuilder("BREADCRUMBS_WIDGET", {
+      buildWidget(widgetData: IBreadcrumbsWidgetProps): JSX.Element {
+        return <BreadcrumbsWidget {...widgetData} />
+      }
+    })
+
+    WidgetFactory.registerWidgetBuilder("TAG_INPUT_WIDGET", {
+      buildWidget(widgetData: ITagInputWidgetProps): JSX.Element {
+        return <TagInputWidget {...widgetData} />
+      }
+    })
+
+    WidgetFactory.registerWidgetBuilder("NUMERIC_INPUT_WIDGET", {
+      buildWidget(widgetData: INumericInputWidgetProps): JSX.Element {
+        return <NumericInputWidget {...widgetData} />
+      }
+    })
+
+    WidgetFactory.registerWidgetBuilder("CHECKBOX_WIDGET", {
+      buildWidget(widgetData: ICheckboxWidgetProps): JSX.Element {
+        return <CheckboxWidget {...widgetData} />
+      }
+    })
+
+    WidgetFactory.registerWidgetBuilder("RADIO_GROUP_WIDGET", {
+      buildWidget(widgetData: IRadioGroupWidgetProps): JSX.Element {
+        return <RadioGroupWidget {...widgetData} />
+      }
+    })
   }
 }
 
-export default WidgetBuilderRegistry;
+export default WidgetBuilderRegistry
diff --git a/app/client/src/widgets/BreadcrumbsWidget.tsx b/app/client/src/widgets/BreadcrumbsWidget.tsx
new file mode 100644
index 0000000000..2f81336bbf
--- /dev/null
+++ b/app/client/src/widgets/BreadcrumbsWidget.tsx
@@ -0,0 +1,43 @@
+import * as React from "react"
+import BaseWidget, { IWidgetProps, IWidgetState } from "./BaseWidget"
+import { WidgetType, CSSUnits } from "../constants/WidgetConstants"
+import { Boundary, IBreadcrumbProps } from "@blueprintjs/core"
+import BreadcrumbsComponent from "../editorComponents/BreadcrumbsComponent"
+import _ from "lodash"
+
+class BreadcrumbsWidget extends BaseWidget<
+  IBreadcrumbsWidgetProps,
+  IWidgetState
+> {
+  constructor(widgetProps: IBreadcrumbsWidgetProps) {
+    super(widgetProps)
+  }
+
+  getPageView() {
+    return (
+      <BreadcrumbsComponent
+        style={this.getPositionStyle()}
+        widgetId={this.props.widgetId}
+        key={this.props.widgetId}
+        collapseFrom={this.props.collapseFrom}
+        items={this.props.items}
+        minVisibleItems={this.props.minVisibleItems}
+        className={this.props.className}
+      />
+    )
+  }
+
+  getWidgetType(): WidgetType {
+    return "BREADCRUMBS_WIDGET"
+  }
+}
+
+export interface IBreadcrumbsWidgetProps extends IWidgetProps {
+  width?: number
+  collapseFrom?: Boundary
+  className?: string
+  minVisibleItems?: number
+  items?: IBreadcrumbProps[]
+}
+
+export default BreadcrumbsWidget
diff --git a/app/client/src/widgets/CheckboxWidget.tsx b/app/client/src/widgets/CheckboxWidget.tsx
new file mode 100644
index 0000000000..3a6d1453bb
--- /dev/null
+++ b/app/client/src/widgets/CheckboxWidget.tsx
@@ -0,0 +1,38 @@
+import * as React from "react"
+import BaseWidget, { IWidgetProps, IWidgetState } from "./BaseWidget"
+import { WidgetType, CSSUnits } from "../constants/WidgetConstants"
+import { Icon, Intent } from "@blueprintjs/core"
+import { IconName } from "@blueprintjs/icons"
+import CheckboxComponent from "../editorComponents/CheckboxComponent"
+import _ from "lodash"
+
+class CheckboxWidget extends BaseWidget<ICheckboxWidgetProps, IWidgetState> {
+  constructor(widgetProps: ICheckboxWidgetProps) {
+    super(widgetProps)
+  }
+
+  getPageView() {
+    return (
+      <CheckboxComponent
+        style={this.getPositionStyle()}
+        widgetId={this.props.widgetId}
+        key={this.props.widgetId}
+        items={this.props.items}
+      />
+    )
+  }
+
+  getWidgetType(): WidgetType {
+    return "ICON_WIDGET"
+  }
+}
+
+export interface ICheckboxWidgetProps extends IWidgetProps {
+  items: Array<{
+    label: string
+    defaultIndeterminate: boolean
+    value: number | string
+  }>
+}
+
+export default CheckboxWidget
diff --git a/app/client/src/widgets/ContainerWidget.tsx b/app/client/src/widgets/ContainerWidget.tsx
index 70519ca867..aff87a2517 100644
--- a/app/client/src/widgets/ContainerWidget.tsx
+++ b/app/client/src/widgets/ContainerWidget.tsx
@@ -55,10 +55,6 @@ class ContainerWidget extends BaseWidget<
           ...this.getPositionStyle(),
           backgroundColor: this.props.backgroundColor
         }}
-        snapColumnSpace={this.snapColumnSpace}
-        snapRowSpace={this.snapRowSpace}
-        snapColumns={this.props.snapColumns || DEFAULT_NUM_COLS}
-        snapRows={this.props.snapRows || DEFAULT_NUM_ROWS}
         orientation={this.props.orientation || "VERTICAL"}
       >
         {_.map(this.props.children, this.renderChildWidget)}
diff --git a/app/client/src/widgets/NumericInputWidget.tsx b/app/client/src/widgets/NumericInputWidget.tsx
new file mode 100644
index 0000000000..848924e4d2
--- /dev/null
+++ b/app/client/src/widgets/NumericInputWidget.tsx
@@ -0,0 +1,73 @@
+import * as React from "react"
+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,
+  IWidgetState
+> {
+  constructor(widgetProps: INumericInputWidgetProps) {
+    super(widgetProps)
+  }
+
+  getPageView() {
+    return (
+      <NumericInputComponent
+        style={this.getPositionStyle()}
+        widgetId={this.props.widgetId}
+        key={this.props.widgetId}
+        placeholder="Enter a number..."
+        min={this.props.min}
+        max={this.props.max}
+        className={this.props.className}
+        disabled={this.props.disabled}
+        large={this.props.large}
+        intent={this.props.intent}
+        defaultValue={this.props.defaultValue}
+        leftIcon={this.props.leftIcon}
+        rightElement={this.props.rightElement}
+        allowNumericCharactersOnly={this.props.allowNumericCharactersOnly}
+        fill={this.props.fill}
+        majorStepSize={this.props.majorStepSize}
+        minorStepSize={this.props.minorStepSize}
+        onButtonClick={this.props.onButtonClick}
+        inputRef={this.props.inputRef}
+        selectAllOnFocus={this.props.selectAllOnFocus}
+        selectAllOnIncrement={this.props.selectAllOnIncrement}
+        stepSize={this.props.stepSize}
+      />
+    )
+  }
+
+  getWidgetType(): WidgetType {
+    return "NUMERIC_INPUT_WIDGET"
+  }
+}
+
+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 default NumericInputWidget
diff --git a/app/client/src/widgets/RadioGroupWidget.tsx b/app/client/src/widgets/RadioGroupWidget.tsx
new file mode 100644
index 0000000000..308940a419
--- /dev/null
+++ b/app/client/src/widgets/RadioGroupWidget.tsx
@@ -0,0 +1,55 @@
+import * as React from "react"
+import BaseWidget, { IWidgetProps, IWidgetState } from "./BaseWidget"
+import { WidgetType, CSSUnits } from "../constants/WidgetConstants"
+import RadioGroupComponent from "../editorComponents/RadioGroupComponent"
+import { IOptionProps } from "@blueprintjs/core"
+import _ from "lodash"
+
+class RadioButtonWidget extends BaseWidget<
+  IRadioGroupWidgetProps,
+  IWidgetState
+> {
+  constructor(widgetProps: IRadioGroupWidgetProps) {
+    super(widgetProps)
+  }
+
+  getPageView() {
+    return (
+      <RadioGroupComponent
+        style={this.getPositionStyle()}
+        widgetId={this.props.widgetId}
+        key={this.props.widgetId}
+        inline={this.props.inline}
+        label={this.props.label}
+        name={this.props.name}
+        handleRadioChange={this.props.handleRadioChange}
+        selectedValue={this.props.selectedValue}
+        items={this.props.items}
+        disabled={this.props.disabled}
+        className={this.props.className}
+        options={this.props.options}
+      />
+    )
+  }
+
+  getWidgetType(): WidgetType {
+    return "RADIO_GROUP_WIDGET"
+  }
+}
+
+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[]
+  items: Array<{
+    label: string
+    value: number | string
+  }>
+}
+
+export default RadioButtonWidget
diff --git a/app/client/src/widgets/TagInputWidget.tsx b/app/client/src/widgets/TagInputWidget.tsx
new file mode 100644
index 0000000000..9577e933f7
--- /dev/null
+++ b/app/client/src/widgets/TagInputWidget.tsx
@@ -0,0 +1,48 @@
+import * as React from "react";
+import BaseWidget, { IWidgetProps, IWidgetState } from "./BaseWidget";
+import { WidgetType, CSSUnits } from "../constants/WidgetConstants";
+import TagInputComponent from "../editorComponents/TagInputComponent";
+import { Intent, ITagProps, TagInput, HTMLInputProps } from "@blueprintjs/core";
+
+import _ from "lodash";
+
+class TagInputWidget extends BaseWidget<ITagInputWidgetProps, IWidgetState> {
+  constructor(widgetProps: ITagInputWidgetProps) {
+    super(widgetProps);
+  }
+
+  getPageView() {
+    return (
+      <TagInputComponent
+        widgetId={this.props.widgetId}
+        key={this.props.widgetId}
+        style={this.getPositionStyle()}
+        placeholder={this.props.placeholder}
+        values={this.props.values}
+      />
+    );
+  }
+
+  getWidgetType(): WidgetType {
+    return "TAG_INPUT_WIDGET";
+  }
+}
+
+export interface ITagInputWidgetProps extends IWidgetProps {
+  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 TagInputWidget;
diff --git a/app/client/src/widgets/TextWidget.tsx b/app/client/src/widgets/TextWidget.tsx
index 43556732f9..8e04f5f574 100644
--- a/app/client/src/widgets/TextWidget.tsx
+++ b/app/client/src/widgets/TextWidget.tsx
@@ -1,12 +1,12 @@
-import * as React from "react"
-import BaseWidget, { IWidgetProps, IWidgetState } from "./BaseWidget"
-import { WidgetType, CSSUnits } from "../constants/WidgetConstants"
-import TextComponent from "../editorComponents/TextComponent"
-import _ from "lodash"
+import * as React from "react";
+import BaseWidget, { IWidgetProps, IWidgetState } from "./BaseWidget";
+import { WidgetType, CSSUnits } from "../constants/WidgetConstants";
+import TextComponent from "../editorComponents/TextComponent";
+import _ from "lodash";
 
 class TextWidget extends BaseWidget<ITextWidgetProps, IWidgetState> {
   constructor(widgetProps: ITextWidgetProps) {
-    super(widgetProps)
+    super(widgetProps);
   }
 
   getPageView() {
@@ -16,18 +16,20 @@ class TextWidget extends BaseWidget<ITextWidgetProps, IWidgetState> {
         widgetId={this.props.widgetId}
         key={this.props.widgetId}
         text={this.props.text}
+        tagName={this.props.tagName}
       />
-    )
+    );
   }
 
   getWidgetType(): WidgetType {
-    return "TEXT_WIDGET"
+    return "TEXT_WIDGET";
   }
 }
 
 export interface ITextWidgetProps extends IWidgetProps {
-  text?: string
-  ellipsize?: boolean
+  text?: string;
+  ellipsize?: boolean;
+  tagName?: keyof JSX.IntrinsicElements;
 }
 
-export default TextWidget
+export default TextWidget;