Fix Merge conflicts. Fixes #5

app/client/src/constants/ActionConstants.tsx

@@ -18,7 +18,8 @@ export type ActionType =
   | "SUCCESS_FETCHING_WIDGET_CARDS"
   | "ERROR_FETCHING_WIDGET_CARDS"
   | "ADD_PAGE_WIDGET"
-  | "REMOVE_PAGE_WIDGET";
+  | "REMOVE_PAGE_WIDGET"
+  | "LOAD_WIDGET_CONFIG";
 
 export const ActionTypes: { [id: string]: ActionType } = {
   UPDATE_CANVAS: "UPDATE_CANVAS",
@@ -32,6 +33,7 @@ export const ActionTypes: { [id: string]: ActionType } = {
   ZOOM_OUT_CANVAS: "ZOOM_OUT_CANVAS",
   UNDO_CANVAS_ACTION: "UNDO_CANVAS_ACTION",
   REDO_CANVAS_ACTION: "REDO_CANVAS_ACTION",
+  LOAD_WIDGET_CONFIG: "LOAD_WIDGET_CONFIG",
   PUBLISH: "PUBLISH",
   FETCH_WIDGET_CARDS: "FETCH_WIDGET_CARDS",
   SUCCESS_FETCHING_WIDGET_CARDS: "SUCCESS_FETCHING_WIDGET_CARDS",
@@ -50,6 +52,10 @@ export interface LoadCanvasPayload {
   widgets: { [widgetId: string]: WidgetProps };
 }
 
+export interface LoadWidgetConfigPayload {
+  [widgetId: string]: WidgetProps;
+}
+
 export interface LoadWidgetPanePayload {
   widgets: WidgetProps[];
 }

app/client/src/constants/WidgetConstants.tsx

@@ -4,22 +4,29 @@ export type WidgetType =
   | "CONTAINER_WIDGET"
   | "SPINNER_WIDGET"
   | "BUTTON_WIDGET"
+  | "DATE_PICKER_WIDGET"
+  | "TABLE_WIDGET"
+  | "DROP_DOWN_WIDGET"
   | "CHECKBOX_WIDGET"
   | "RADIO_BUTTON_WIDGET"
   | "INPUT_WIDGET"
-  | "TOGGLE_WIDGET"
-  | "CALLOUT_WIDGET"
-  | "TABLE_WIDGET"
-  | "DATEPICKER_WIDGET"
-  | "DROPDOWN_WIDGET"
-  | "RICH_TEXT_WIDGET"
-  | "MODAL_WIDGET";
+  | "SWITCH_WIDGET"
+  | "ALERT_WIDGET";
 
 export const WidgetTypes: { [id: string]: WidgetType } = {
   BUTTON_WIDGET: "BUTTON_WIDGET",
   TEXT_WIDGET: "TEXT_WIDGET",
+  IMAGE_WIDGET: "IMAGE_WIDGET",
   INPUT_WIDGET: "INPUT_WIDGET",
-  TOGGLE_WIDGET: "TOGGLE_WIDGET",
+  SWITCH_WIDGET: "SWITCH_WIDGET",
+  CONTAINER_WIDGET: "CONTAINER_WIDGET",
+  SPINNER_WIDGET: "SPINNER_WIDGET",
+  DATE_PICKER_WIDGET: "DATE_PICKER_WIDGET",
+  TABLE_WIDGET: "TABLE_WIDGET",
+  DROP_DOWN_WIDGET: "DROP_DOWN_WIDGET",
+  CHECKBOX_WIDGET: "CHECKBOX_WIDGET",
+  RADIO_GROUP_WIDGET: "RADIO_GROUP_WIDGET",
+  ALERT_WIDGET: "ALERT_WIDGET",
 };
 
 export type ContainerOrientation = "HORIZONTAL" | "VERTICAL";

app/client/src/editorComponents/CheckboxComponent.tsx

@@ -5,27 +5,17 @@ import { Container } from "./ContainerComponent";
 class CheckboxComponent extends React.Component<CheckboxComponentProps> {
   render() {
     return (
-      <Container {...this.props}>
-        {this.props.items.map(item => (
-          <Checkbox
-            key={item.key}
-            label={item.label}
-            defaultIndeterminate={item.defaultIndeterminate}
-            value={item.value}
-          />
-        ))}
-      </Container>
+      <Checkbox
+        label={this.props.label}
+        defaultIndeterminate={this.props.defaultCheckedState}
+      />
     );
   }
 }
 
 export interface CheckboxComponentProps extends ComponentProps {
-  items: Array<{
-    key: string;
-    label: string;
-    defaultIndeterminate: boolean;
-    value: number | string;
-  }>;
+  label: string;
+  defaultCheckedState: boolean;
 }
 
 export default CheckboxComponent;

app/client/src/editorComponents/RadioGroupComponent.tsx

@@ -1,25 +1,13 @@
-import * as React from "react";
+import React from "react";
 import { ComponentProps } from "./BaseComponent";
 import { Radio, RadioGroup, IOptionProps } from "@blueprintjs/core";
 import { Container } from "./ContainerComponent";
+import { RadioOption } from "../widgets/RadioGroupWidget";
 class RadioGroupComponent extends React.Component<RadioGroupComponentProps> {
   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 key={item.key} label={item.label} value={item.value} />
-          ))}
-        </RadioGroup>
+        <div />
       </Container>
     );
   }
@@ -27,18 +15,8 @@ class RadioGroupComponent extends React.Component<RadioGroupComponentProps> {
 
 export interface RadioGroupComponentProps extends ComponentProps {
   label: string;
-  inline: boolean;
-  selectedValue: string | number;
-  handleRadioChange: (event: React.FormEvent<HTMLInputElement>) => void;
-  disabled: boolean;
-  className: string;
-  name: string;
-  options: IOptionProps[];
-  items: Array<{
-    label: string;
-    key: string;
-    value: number | string;
-  }>;
+  options: RadioOption[];
+  defaultOptionValue: string;
 }
 
 export default RadioGroupComponent;

app/client/src/mockResponses/WidgetCardsPaneResponse.tsx

@@ -19,76 +19,26 @@ const WidgetCardsPaneResponse: WidgetCardsPaneReduxState = {
         label: "Button",
       },
       {
-        widgetType: "CHECKBOX_WIDGET",
-        icon: "icon-checkbox",
-        label: "Checkbox",
-      },
-      {
-        widgetType: "INPUT_WIDGET",
-        icon: "icon-input",
-        label: "Input",
-      },
-      {
-        widgetType: "DATEPICKER_WIDGET",
-        icon: "icon-datepicker",
-        label: "DatePicker",
-      },
-      {
-        widgetType: "TABLE_WIDGET",
-        icon: "icon-table",
-        label: "Table",
-      },
-      {
-        widgetType: "DROPDOWN_WIDGET",
-        icon: "icon-dropdown",
-        label: "Dropdown",
-      },
-      {
-        widgetType: "RADIO_BUTTON_WIDGET",
-        icon: "icon-radio",
-        label: "Radio Button",
+        widgetType: "SPINNER_WIDGET",
+        icon: "icon-switch",
+        label: "Spinner",
       },
       {
         widgetType: "CONTAINER_WIDGET",
         icon: "icon-container",
         label: "Container",
       },
-      {
-        widgetType: "RICH_TEXT_WIDGET",
-        icon: "icon-rich-text",
-        label: "Rich Text",
-      },
-      {
-        widgetType: "MODAL_WIDGET",
-        icon: "icon-modal",
-        label: "Modal",
-      },
-      {
-        widgetType: "SPINNER_WIDGET",
-        icon: "icon-spinner",
-        label: "Spinner",
-      },
     ],
     form: [
-      {
-        widgetType: "RICH_TEXT_WIDGET",
-        icon: "icon-rich-text",
-        label: "Rich Text",
-      },
       {
         widgetType: "BUTTON_WIDGET",
         icon: "icon-button",
         label: "Button",
       },
       {
-        widgetType: "CHECKBOX_WIDGET",
-        icon: "icon-checkbox",
-        label: "Checkbox",
-      },
-      {
-        widgetType: "INPUT_WIDGET",
-        icon: "icon-input",
-        label: "Input",
+        widgetType: "BUTTON_WIDGET",
+        icon: "icon-button",
+        label: "Button",
       },
       {
         widgetType: "DROPDOWN_WIDGET",

app/client/src/mockResponses/WidgetConfigResponse.tsx

@@ -0,0 +1,89 @@
+import { WidgetConfigReducerState } from "../reducers/entityReducers/widgetConfigReducer.tsx";
+
+const WidgetConfigResponse: WidgetConfigReducerState = {
+  BUTTON_WIDGET: {
+    text: "Submit",
+    buttonStyle: "PRIMARY_BUTTON",
+    rows: 1,
+    columns: 2,
+  },
+  TEXT_WIDGET: {
+    text: "Not all labels are bad!",
+    textStyle: "LABEL",
+    rows: 1,
+    columns: 3,
+  },
+  IMAGE_WIDGET: {
+    defaultImage: "",
+    imageShape: "RECTANGLE",
+    image: "",
+    rows: 3,
+    columns: 3,
+  },
+  INPUT_WIDGET: {
+    inputType: "TEXT",
+    label: "Label me",
+    rows: 1,
+    columns: 3,
+  },
+  SWITCH_WIDGET: {
+    isOn: false,
+    label: "Turn me on",
+    rows: 1,
+    columns: 4,
+  },
+  CONTAINER_WIDGET: {
+    backgroundColor: "#FFFFFF",
+    rows: 1,
+    columns: 4,
+  },
+  SPINNER_WIDGET: {
+    rows: 1,
+    columns: 1,
+  },
+  DATE_PICKER_WIDGET: {
+    enableTime: false,
+    datePickerType: "DATE_PICKER",
+    rows: 1,
+    columns: 3,
+    label: "Date",
+  },
+  TABLE_WIDGET: {
+    rows: 5,
+    columns: 7,
+    label: "Don't table me!",
+  },
+  DROP_DOWN_WIDGET: {
+    rows: 1,
+    columns: 3,
+    type: "SINGLE_SELECT",
+    label: "Pick me!",
+  },
+  CHECKBOX_WIDGET: {
+    rows: 1,
+    columns: 3,
+    label: "Label - CHECK!",
+    defaultCheckedState: true,
+  },
+  RADIO_GROUP_WIDGET: {
+    rows: 3,
+    columns: 3,
+    label: "Alpha - come in!",
+    options: [
+      { label: "Alpha", value: "1" },
+      { label: "Bravo", value: "2" },
+      { label: "Charlie", value: "3" },
+    ],
+    defaultOptionValue: "1",
+  },
+  ALERT_WIDGET: {
+    alertType: "NOTIFICATION",
+    intent: "SUCCESS",
+    rows: 3,
+    columns: 3,
+    header: "",
+    message: "",
+  },
+};
+
+export default WidgetConfigResponse;

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

@@ -59,6 +59,7 @@ const EditorDragLayer: React.FC = () => {
   function renderItem() {
     return WidgetFactory.createWidget({
       widgetType: itemType as WidgetType,
+      widgetName: "",
       widgetId: item.key,
       topRow: 10,
       leftColumn: 10,

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

@@ -1,5 +1,5 @@
 import { combineReducers } from "redux";
-import canvasWidgetsReducer from "./canvasWidgetsReducers";
+import canvasWidgetsReducer from "./canvasWidgetsReducer";
 
 const entityReducer = combineReducers({ canvasWidgets: canvasWidgetsReducer });
 export default entityReducer;

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

@@ -0,0 +1,56 @@
+import { createReducer } from "../../utils/AppsmithUtils";
+import {
+  ActionTypes,
+  ReduxAction,
+  LoadWidgetConfigPayload,
+} from "../../constants/ActionConstants";
+import { WidgetProps } from "../../widgets/BaseWidget";
+import WidgetConfigResponse from "../../mockResponses/WidgetConfigResponse";
+import { ButtonWidgetProps } from "../../widgets/ButtonWidget";
+import { TextWidgetProps } from "../../widgets/TextWidget";
+import { ContainerWidgetProps } from "../../widgets/ContainerWidget";
+import { ImageWidgetProps } from "../../widgets/ImageWidget";
+import { InputWidgetProps } from "../../widgets/InputWidget";
+import { SwitchWidgetProps } from "../../widgets/SwitchWidget";
+import SpinnerWidget from "../../widgets/SpinnerWidget";
+import { DatePickerWidgetProps } from "../../widgets/DatePickerWidget";
+import { TableWidgetProps } from "../../widgets/TableWidget";
+import { DropdownWidgetProps } from "../../widgets/DropdownWidget";
+import { CheckboxWidgetProps } from "../../widgets/CheckboxWidget";
+import { RadioGroupWidgetProps } from "../../widgets/RadioGroupWidget";
+import { AlertWidgetProps } from "../../widgets/AlertWidget";
+
+const initialState: WidgetConfigReducerState = WidgetConfigResponse;
+
+export interface WidgetConfigProps {
+  rows: number;
+  columns: number;
+}
+
+export interface WidgetConfigReducerState {
+  BUTTON_WIDGET: Partial<ButtonWidgetProps> & WidgetConfigProps;
+  TEXT_WIDGET: Partial<TextWidgetProps> & WidgetConfigProps;
+  IMAGE_WIDGET: Partial<ImageWidgetProps> & WidgetConfigProps;
+  INPUT_WIDGET: Partial<InputWidgetProps> & WidgetConfigProps;
+  SWITCH_WIDGET: Partial<SwitchWidgetProps> & WidgetConfigProps;
+  CONTAINER_WIDGET: Partial<ContainerWidgetProps<WidgetProps>> &
+    WidgetConfigProps;
+  SPINNER_WIDGET: Partial<SpinnerWidget> & WidgetConfigProps;
+  DATE_PICKER_WIDGET: Partial<DatePickerWidgetProps> & WidgetConfigProps;
+  TABLE_WIDGET: Partial<TableWidgetProps> & WidgetConfigProps;
+  DROP_DOWN_WIDGET: Partial<DropdownWidgetProps> & WidgetConfigProps;
+  CHECKBOX_WIDGET: Partial<CheckboxWidgetProps> & WidgetConfigProps;
+  RADIO_GROUP_WIDGET: Partial<RadioGroupWidgetProps> & WidgetConfigProps;
+  ALERT_WIDGET: Partial<AlertWidgetProps> & WidgetConfigProps;
+}
+
+const widgetConfigReducer = createReducer(initialState, {
+  [ActionTypes.LOAD_WIDGET_CONFIG]: (
+    state: WidgetConfigReducerState,
+    action: ReduxAction<LoadWidgetConfigPayload>,
+  ) => {
+    return { ...action.payload.widgets };
+  },
+});
+
+export default widgetConfigReducer;

app/client/src/reducers/index.tsx

@@ -2,9 +2,8 @@ import { combineReducers } from "redux";
 import entityReducer from "./entityReducers";
 import uiReducer from "./uiReducers";
 import { CanvasReduxState } from "./uiReducers/canvasReducer";
-import { CanvasWidgetsReduxState } from "./entityReducers/canvasWidgetsReducers";
+import { CanvasWidgetsReduxState } from "./entityReducers/canvasWidgetsReducer";
 import { WidgetCardsPaneReduxState } from "./uiReducers/widgetCardsPaneReducer";
-// import { EditorHeaderReduxState } from "./uiReducers/editorHeaderReducer";
 import { EditorReduxState } from "./uiReducers/editorReducer";
 
 const appReducer = combineReducers({

app/client/src/utils/WidgetRegistry.tsx

@@ -3,19 +3,8 @@ import ContainerWidget, {
   ContainerWidgetProps,
 } from "../widgets/ContainerWidget";
 import TextWidget, { TextWidgetProps } from "../widgets/TextWidget";
-import InputGroupWidget, {
-  InputGroupWidgetProps,
-} from "../widgets/InputGroupWidget";
-import CalloutWidget, { CalloutWidgetProps } from "../widgets/CalloutWidget";
-// import IconWidget, { IconWidgetProps } from "../widgets/IconWidget";
+import InputWidget, { InputWidgetProps } from "../widgets/InputWidget";
 import SpinnerWidget, { SpinnerWidgetProps } from "../widgets/SpinnerWidget";
-// import BreadcrumbsWidget, {
-//   BreadcrumbsWidgetProps,
-// } from "../widgets/BreadcrumbsWidget";
-// import TagInputWidget, { TagInputWidgetProps } from "../widgets/TagInputWidget";
-// import NumericInputWidget, {
-//   NumericInputWidgetProps,
-// } from "../widgets/NumericInputWidget";
 import CheckboxWidget, { CheckboxWidgetProps } from "../widgets/CheckboxWidget";
 import RadioGroupWidget, {
   RadioGroupWidgetProps,
@@ -44,12 +33,6 @@ class WidgetBuilderRegistry {
       },
     });
 
-    WidgetFactory.registerWidgetBuilder("CALLOUT_WIDGET", {
-      buildWidget(widgetData: CalloutWidgetProps): JSX.Element {
-        return <CalloutWidget {...widgetData} />;
-      },
-    });
-
     WidgetFactory.registerWidgetBuilder("SPINNER_WIDGET", {
       buildWidget(widgetData: SpinnerWidgetProps): JSX.Element {
         return <SpinnerWidget {...widgetData} />;
@@ -57,8 +40,8 @@ class WidgetBuilderRegistry {
     });
 
     WidgetFactory.registerWidgetBuilder("INPUT_WIDGET", {
-      buildWidget(widgetData: InputGroupWidgetProps): JSX.Element {
-        return <InputGroupWidget {...widgetData} />;
+      buildWidget(widgetData: InputWidgetProps): JSX.Element {
+        return <InputWidget {...widgetData} />;
       },
     });
 

app/client/src/widgets/AlertWidget.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+import BaseWidget, { WidgetProps, WidgetState } from "./BaseWidget";
+import { WidgetType } from "../constants/WidgetConstants";
+import CalloutComponent from "../editorComponents/CalloutComponent";
+
+class AlertWidget extends BaseWidget<AlertWidgetProps, WidgetState> {
+  getPageView() {
+    return <div />;
+  }
+
+  getWidgetType(): WidgetType {
+    return "ALERT_WIDGET";
+  }
+}
+
+export type AlertType = "DIALOG" | "NOTIFICATION";
+export type MessageIntent = "SUCCESS" | "ERROR" | "INFO" | "WARNING";
+
+export interface AlertWidgetProps extends WidgetProps {
+  alertType: AlertType;
+  intent: MessageIntent;
+  header: string;
+  message: string;
+}
+
+export default AlertWidget;

app/client/src/widgets/BaseWidget.tsx

@@ -151,9 +151,10 @@ export interface WidgetBuilder<T extends WidgetProps> {
 }
 
 export interface WidgetProps {
-  widgetType: WidgetType;
-  key?: string;
   widgetId: string;
+  widgetType: WidgetType;
+  widgetName: string;
+  key?: string;
   topRow: number;
   leftColumn: number;
   bottomRow: number;
@@ -161,6 +162,7 @@ export interface WidgetProps {
   parentColumnSpace: number;
   parentRowSpace: number;
   renderMode: RenderMode;
+  isVisible?: boolean;
 }
 
 export interface WidgetCardProps {

app/client/src/widgets/ButtonWidget.tsx

@@ -20,9 +20,15 @@ class ButtonWidget extends BaseWidget<ButtonWidgetProps, WidgetState> {
   }
 }
 
+export type ButtonStyle =
+  | "PRIMARY_BUTTON"
+  | "SECONDARY_BUTTON"
+  | "SUCCESS_BUTTON"
+  | "DANGER_BUTTON";
+
 export interface ButtonWidgetProps extends WidgetProps {
   text?: string;
-  ellipsize?: boolean;
+  buttonStyle?: ButtonStyle;
 }
 
 export default ButtonWidget;

app/client/src/widgets/CalloutWidget.tsx

@@ -1,35 +0,0 @@
-import React from "react";
-import BaseWidget, { WidgetProps, WidgetState } from "./BaseWidget";
-import { Intent } from "@blueprintjs/core";
-import { WidgetType } from "../constants/WidgetConstants";
-import CalloutComponent from "../editorComponents/CalloutComponent";
-
-class CalloutWidget extends BaseWidget<CalloutWidgetProps, WidgetState> {
-  getPageView() {
-    return (
-      <CalloutComponent
-        style={this.getPositionStyle()}
-        widgetId={this.props.widgetId}
-        key={this.props.widgetId}
-        id={this.props.id}
-        title={this.props.title}
-        description={this.props.description}
-        intent={this.props.intent}
-      />
-    );
-  }
-
-  getWidgetType(): WidgetType {
-    return "CALLOUT_WIDGET";
-  }
-}
-
-export interface CalloutWidgetProps extends WidgetProps {
-  id?: string;
-  title?: string;
-  description?: string;
-  intent?: Intent;
-  ellipsize?: boolean;
-}
-
-export default CalloutWidget;

app/client/src/widgets/CheckboxWidget.tsx

@@ -8,9 +8,10 @@ class CheckboxWidget extends BaseWidget<CheckboxWidgetProps, WidgetState> {
     return (
       <CheckboxComponent
         style={this.getPositionStyle()}
+        defaultCheckedState={this.props.defaultCheckedState}
+        label={this.props.label}
         widgetId={this.props.widgetId}
         key={this.props.widgetId}
-        items={this.props.items}
       />
     );
   }
@@ -21,12 +22,8 @@ class CheckboxWidget extends BaseWidget<CheckboxWidgetProps, WidgetState> {
 }
 
 export interface CheckboxWidgetProps extends WidgetProps {
-  items: Array<{
-    label: string;
-    key: string;
-    defaultIndeterminate: boolean;
-    value: number | string;
-  }>;
+  label: string;
+  defaultCheckedState: boolean;
 }
 
 export default CheckboxWidget;

app/client/src/widgets/DatePickerWidget.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+import BaseWidget, { WidgetProps, WidgetState } from "./BaseWidget";
+import { WidgetType } from "../constants/WidgetConstants";
+import { Moment } from "moment";
+
+class DatePickerWidget extends BaseWidget<DatePickerWidgetProps, WidgetState> {
+  getPageView() {
+    return <div />;
+  }
+
+  getWidgetType(): WidgetType {
+    return "DATE_PICKER_WIDGET";
+  }
+}
+
+//Taken from https://blueprintjs.com/docs/#timezone/timezone-picker, needs to be completed with entire list
+export type TimeZone = "Asia/Kolkata" | "Pacific/Midway";
+export type DatePickerType = "DATE_PICKER" | "DATE_RANGE_PICKER";
+
+export interface DatePickerWidgetProps extends WidgetProps {
+  defaultDate?: Date;
+  timezone?: TimeZone;
+  enableTime: boolean;
+  label: string;
+  datePickerType: DatePickerType;
+}
+
+export default DatePickerWidget;

app/client/src/widgets/DropdownWidget.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+import BaseWidget, { WidgetProps, WidgetState } from "./BaseWidget";
+import { WidgetType } from "../constants/WidgetConstants";
+
+class DropdownWidget extends BaseWidget<DropdownWidgetProps, WidgetState> {
+  getPageView() {
+    return <div />;
+  }
+
+  getWidgetType(): WidgetType {
+    return "DROP_DOWN_WIDGET";
+  }
+}
+
+export type SelectionType = "SINGLE_SELECT" | "MULTI_SELECT>";
+export interface DropdownOption {
+  label: string;
+  value: string;
+}
+
+export interface DropdownWidgetProps extends WidgetProps {
+  placeholder?: string;
+  label?: string;
+  type: SelectionType;
+  options?: DropdownOption[];
+}
+
+export default DropdownWidget;

app/client/src/widgets/ImageWidget.tsx

@@ -0,0 +1,23 @@
+import * as React from "react";
+import BaseWidget, { WidgetProps, WidgetState } from "./BaseWidget";
+import { WidgetType } from "../constants/WidgetConstants";
+
+class ImageWidget extends BaseWidget<ImageWidgetProps, WidgetState> {
+  getPageView() {
+    return <div />;
+  }
+
+  getWidgetType(): WidgetType {
+    return "IMAGE_WIDGET";
+  }
+}
+
+export type ImageShape = "RECTANGLE" | "CIRCLE" | "ROUNDED";
+
+export interface ImageWidgetProps extends WidgetProps {
+  image: string;
+  imageShape: ImageShape;
+  defaultImage: string;
+}
+
+export default ImageWidget;

app/client/src/widgets/InputWidget.tsx

@@ -0,0 +1,34 @@
+import React from "react";
+import BaseWidget, { WidgetProps, WidgetState } from "./BaseWidget";
+import { WidgetType } from "../constants/WidgetConstants";
+
+class InputWidget extends BaseWidget<InputWidgetProps, WidgetState> {
+  getPageView() {
+    return <div />;
+  }
+
+  getWidgetType(): WidgetType {
+    return "INPUT_WIDGET";
+  }
+}
+
+export type InputType =
+  | "TEXT"
+  | "NUMBER"
+  | "INTEGER"
+  | "PHONE_NUMBER"
+  | "EMAIL"
+  | "PASSWORD"
+  | "CURRENCY"
+  | "SEARCH";
+
+export interface InputWidgetProps extends WidgetProps {
+  errorMessage?: string;
+  inputType: InputType;
+  defaultText?: string;
+  placeholder?: string;
+  label: string;
+  focusIndex?: number;
+}
+
+export default InputWidget;

app/client/src/widgets/RadioGroupWidget.tsx

@@ -4,21 +4,15 @@ import { WidgetType } from "../constants/WidgetConstants";
 import RadioGroupComponent from "../editorComponents/RadioGroupComponent";
 import { IOptionProps } from "@blueprintjs/core";
 
-class RadioButtonWidget extends BaseWidget<RadioGroupWidgetProps, WidgetState> {
+class RadioGroupWidget extends BaseWidget<RadioGroupWidgetProps, WidgetState> {
   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}
+        defaultOptionValue={this.props.defaultOptionValue}
         options={this.props.options}
       />
     );
@@ -29,20 +23,15 @@ class RadioButtonWidget extends BaseWidget<RadioGroupWidgetProps, WidgetState> {
   }
 }
 
-export interface RadioGroupWidgetProps extends WidgetProps {
+export interface RadioOption {
   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;
-    key: string;
-  }>;
+  value: string;
 }
 
-export default RadioButtonWidget;
+export interface RadioGroupWidgetProps extends WidgetProps {
+  label: string;
+  options: RadioOption[];
+  defaultOptionValue: string;
+}
+
+export default RadioGroupWidget;

app/client/src/widgets/SwitchWidget.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+import BaseWidget, { WidgetProps, WidgetState } from "./BaseWidget";
+import { WidgetType } from "../constants/WidgetConstants";
+
+class SwitchWidget extends BaseWidget<SwitchWidgetProps, WidgetState> {
+  getPageView() {
+    return <div />;
+  }
+
+  getWidgetType(): WidgetType {
+    return "SWITCH_WIDGET";
+  }
+}
+
+export interface SwitchWidgetProps extends WidgetProps {
+  isOn: boolean;
+  label: string;
+}
+
+export default SwitchWidget;

app/client/src/widgets/TableWidget.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+import BaseWidget, { WidgetProps, WidgetState } from "./BaseWidget";
+import { WidgetType } from "../constants/WidgetConstants";
+import TextComponent from "../editorComponents/TextComponent";
+
+class TableWidget extends BaseWidget<TableWidgetProps, WidgetState> {
+  getPageView() {
+    return <div />;
+  }
+
+  getWidgetType(): WidgetType {
+    return "TABLE_WIDGET";
+  }
+}
+
+export type PaginationType = "PAGES" | "INFINITE_SCROLL";
+
+export interface TableWidgetProps extends WidgetProps {
+  pageKey?: string;
+  label: string;
+  tableData?: object[];
+}
+
+export default TableWidget;

app/client/src/widgets/TextWidget.tsx

@@ -21,9 +21,11 @@ class TextWidget extends BaseWidget<TextWidgetProps, WidgetState> {
   }
 }
 
+export type TextStyle = "BODY" | "HEADING" | "LABEL" | "SUB_TEXT";
+
 export interface TextWidgetProps extends WidgetProps {
   text?: string;
-  ellipsize?: boolean;
+  textStyle?: TextStyle;
   tagName?: keyof JSX.IntrinsicElements;
 }
 

app/client/yarn.lock

@@ -1523,7 +1523,7 @@
     hoist-non-react-statics "^3.3.0"
     redux "^4.0.0"
 
-"@types/react-router-dom@^5.0.1":
+"@types/react-router-dom@^4.3.5":
   version "4.3.5"
   resolved "https://registry.yarnpkg.com/@types/react-router-dom/-/react-router-dom-4.3.5.tgz#72f229967690c890d00f96e6b85e9ee5780db31f"
   integrity sha512-eFajSUASYbPHg2BDM1G8Btx+YqGgvROPIg6sBhl3O4kbDdYXdFdfrgQFf/pcBuQVObjfT9AL/dd15jilR5DIEA==