Add default theme base

app/client/package.json

@@ -71,9 +71,9 @@
   "devDependencies": {
     "@typescript-eslint/eslint-plugin": "^2.0.0",
     "@typescript-eslint/parser": "^2.0.0",
+    "dotenv": "^8.1.0",
     "eslint-config-prettier": "^6.1.0",
     "eslint-plugin-prettier": "^3.1.0",
-    "dotenv": "^8.1.0",
     "redux-devtools": "^3.5.0"
   }
 }

app/client/src/constants/Colors.tsx

@@ -0,0 +1,10 @@
+export const WHITE = "#FFFFFF";
+export const WHITE_1 = "#E9FAF3";
+export const WHITE_2 = "#D0D7DD";
+export const BLACK = "#000000";
+export const BLACK_1 = "#040627";
+export const GREEN = "#29CCA3";
+export const RED = "#CE4257";
+export const PURPLE = "#6871EF";
+export const BLACK_3 = "#363E44";
+export const BLACK_2 = "#272E32";

app/client/src/constants/DefaultTheme.tsx

@@ -1,45 +1,47 @@
-import * as styledComponents from "styled-components"
-import { Color, FontFamily, Colors, Fonts } from "./StyleConstants"
+import * as styledComponents from "styled-components";
+import * as Colors from "./Colors";
+import * as FontFamilies from "./Fonts";
+
+export type Color = (typeof Colors)[keyof typeof Colors];
+export type FontFamily = (typeof FontFamilies)[keyof typeof FontFamilies];
 
 const {
   default: styled,
   css,
   keyframes,
   createGlobalStyle,
-  ThemeProvider
-} = styledComponents as styledComponents.ThemedStyledComponentsModule<
-  IThemeInterface
->
+  ThemeProvider,
+} = styledComponents as styledComponents.ThemedStyledComponentsModule<Theme>;
 
-export interface IFontInterface {
-    fontSize: number
-    fontColor: Color,
-    fontFamily: FontFamily
-}
 
-export interface IThemeInterface {
-  primaryColor: Color
-  secondaryColor: Color
-  accentColor: Color
-  headerFont: IFontInterface,
-  titleFont: IFontInterface,
-  subTitleFont: IFontInterface
-}
+export type Theme = {
+  radii: Array<number>;
+  fontSizes: Array<number>;
+  spaces: Array<number>;
+  fontWeights: Array<number>;
+  colors: Record<string, Color>;
+  lineHeights: Array<number>;
+  fonts: Array<FontFamily>;
+};
 
-const defaultFont: IFontInterface = {
-  fontSize: 14,
-  fontColor: Colors.FullBlack,
-  fontFamily: Fonts.RobotoBold
-}
+export const theme: Theme = {
+  radii: [],
+  fontSizes: [0, 10, 12, 14, 16, 18, 24, 32, 48, 64],
+  spaces: [0, 6, 8, 10, 12, 14, 16, 18, 20, 22, 24],
+  fontWeights: [0, 400, 500, 700],
+  colors: {
+    primary: Colors.GREEN,
+    error: Colors.RED,
+    hover: Colors.WHITE_1,
+    textDefault: Colors.BLACK_1,
+    textAnchor: Colors.PURPLE ,
+    border: Colors.WHITE_2 ,
+    paneCard: Colors.BLACK_3,
+    paneBG: Colors.BLACK_2,
+  },
+  lineHeights: [0, 14, 18, 22, 24, 28, 36, 48, 64, 80],
+  fonts: [FontFamilies.DMSans as FontFamily],
+};
 
-export const theme = {
-  primaryColor: Colors.FullBlack,
-  secondaryColor: Colors.FullWhite,
-  accentColor: Colors.FullBlack,
-  headerFont: defaultFont,
-  titleFont: defaultFont,
-  subTitleFont: defaultFont
-}
-
-export default styled
-export { css, createGlobalStyle, keyframes, ThemeProvider }
+export { css, createGlobalStyle, keyframes, ThemeProvider };
+export default styled;

app/client/src/constants/Fonts.tsx

@@ -0,0 +1,2 @@
+export const DMSans = "DM Sans";
+export const OpenSans = "Open Sans";

app/client/src/constants/StyleConstants.tsx

@@ -1,13 +1 @@
-export type Color = "#ffffff" | "#000000"
-
-export const Colors: { [id: string]: Color } = {
-    FullWhite: "#ffffff",
-    FullBlack: "#000000"
-}
-
-export type FontFamily = "Brandon-Regular" | "Roboto-Bold"
-
-export const Fonts: { [id: string]: FontFamily } = {
-    BrandonRegular: "Brandon-Regular",
-    RobotoBold: "Roboto-Bold"
-}
+export default {}

app/client/src/editorComponents/BaseComponent.tsx

@@ -1,10 +1,11 @@
 import { Component } from "react"
 import { PositionType, CSSUnit } from "../constants/WidgetConstants"
-import { Color } from "../constants/StyleConstants"
+import { Color } from "../constants/DefaultTheme";
+
 /***
  * Components are responsible for binding render inputs to corresponding UI SDKs
  */
-abstract class BaseComponent<T extends IComponentProps> extends Component<T> {}
+abstract class BaseComponent<T extends ComponentProps> extends Component<T> {}
 
 export interface BaseStyle {
     height?: number;
@@ -20,7 +21,7 @@ export interface BaseStyle {
 
 }
 
-export interface IComponentProps {
+export interface ComponentProps {
     widgetId: string;
     style: BaseStyle;
 }

app/client/src/editorComponents/BreadcrumbsComponent.tsx

@@ -1,5 +1,5 @@
 import * as React from "react"
-import { IComponentProps } from "./BaseComponent"
+import { ComponentProps } from "./BaseComponent"
 import {
   Boundary,
   Breadcrumbs,
@@ -22,7 +22,7 @@ class BreadcrumbsComponent extends React.Component<BreadcrumbsComponentProps> {
   }
 }
 
-export interface BreadcrumbsComponentProps extends IComponentProps {
+export interface BreadcrumbsComponentProps extends ComponentProps {
   width?: number;
   collapseFrom?: Boundary;
   className?: string;

app/client/src/editorComponents/CalloutComponent.tsx

@@ -1,5 +1,5 @@
 import * as React from "react"
-import { IComponentProps } from "./BaseComponent"
+import { ComponentProps } from "./BaseComponent"
 import { Callout, Intent } from "@blueprintjs/core"
 import { Container } from "./ContainerComponent"
 class CalloutComponent extends React.Component<ICalloutComponentProps> {
@@ -17,7 +17,7 @@ class CalloutComponent extends React.Component<ICalloutComponentProps> {
   }
 }
 
-export interface ICalloutComponentProps extends IComponentProps {
+export interface ICalloutComponentProps extends ComponentProps {
   id?: string
   title?: string
   description?: string

app/client/src/editorComponents/CheckboxComponent.tsx

@@ -1,7 +1,7 @@
-import * as React from "react"
-import { IComponentProps } from "./BaseComponent"
-import { Checkbox } from "@blueprintjs/core"
-import { Container } from "./ContainerComponent"
+import * as React from "react";
+import { ComponentProps } from "./BaseComponent";
+import { Checkbox } from "@blueprintjs/core";
+import { Container } from "./ContainerComponent";
 class CheckboxComponent extends React.Component<ICheckboxComponentProps> {
   render() {
     return (
@@ -14,16 +14,16 @@ class CheckboxComponent extends React.Component<ICheckboxComponentProps> {
           />
         ))}
       </Container>
-    )
+    );
   }
 }
 
-export interface ICheckboxComponentProps extends IComponentProps {
+export interface ICheckboxComponentProps extends ComponentProps {
   items: Array<{
-    label: string
-    defaultIndeterminate: boolean
-    value: number | string
-  }>
+    label: string;
+    defaultIndeterminate: boolean;
+    value: number | string;
+  }>;
 }
 
-export default CheckboxComponent
+export default CheckboxComponent;

app/client/src/editorComponents/ContainerComponent.tsx

@@ -1,4 +1,4 @@
-import { IComponentProps } from "./BaseComponent";
+import { ComponentProps } from "./BaseComponent";
 import { ContainerOrientation } from "../constants/WidgetConstants";
 import styled from "../constants/DefaultTheme";
 import { useDrop } from "react-dnd"
@@ -12,7 +12,7 @@ export const Container = styled("div")<ContainerProps>`
     return props.orientation === "HORIZONTAL" ? "row" : "column"
   }};
   background: ${props => props.style.backgroundColor};
-  color: ${props => props.theme.primaryColor};
+  color: ${props => props.theme.colors.primary};
   position: ${props => {
     return props.style.positionType === "ABSOLUTE" ? "absolute" : "relative"
   }};
@@ -37,7 +37,7 @@ const ContainerComponent = (props: ContainerProps) => {
   return <Container ref={drop} {...props}>{props.children}</Container> 
 }
 
-export interface ContainerProps extends IComponentProps {
+export interface ContainerProps extends ComponentProps {
   children?: JSX.Element[] | JSX.Element;
   orientation?: ContainerOrientation;
   addWidget?: Function;

app/client/src/editorComponents/IconComponent.tsx

@@ -1,5 +1,5 @@
 import * as React from "react"
-import { IComponentProps } from "./BaseComponent"
+import { ComponentProps } from "./BaseComponent"
 import { Icon, Intent } from "@blueprintjs/core"
 import { IconName } from "@blueprintjs/icons"
 import { Container } from "./ContainerComponent"
@@ -17,7 +17,7 @@ class IconComponent extends React.Component<IconComponentProps> {
   }
 }
 
-export interface IconComponentProps extends IComponentProps {
+export interface IconComponentProps extends ComponentProps {
   iconSize?: number;
   icon?: IconName;
   intent?: Intent;

app/client/src/editorComponents/InputGroupComponent.tsx

@@ -1,5 +1,5 @@
 import * as React from "react"
-import { IComponentProps } from "./BaseComponent"
+import { ComponentProps } from "./BaseComponent"
 import { IconName, InputGroup, Intent } from "@blueprintjs/core"
 import { Container } from "./ContainerComponent"
 class InputGroupComponent extends React.Component<IInputGroupComponentProps> {
@@ -25,19 +25,19 @@ class InputGroupComponent extends React.Component<IInputGroupComponentProps> {
   }
 }
 
-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
+export interface IInputGroupComponentProps extends ComponentProps {
+  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

app/client/src/editorComponents/NumericInputComponent.tsx

@@ -1,5 +1,5 @@
 import * as React from "react"
-import { IComponentProps } from "./BaseComponent"
+import { ComponentProps } from "./BaseComponent"
 import { Intent, NumericInput, IconName } from "@blueprintjs/core"
 import { Container } from "./ContainerComponent"
 class NumericInputComponent extends React.Component<
@@ -34,27 +34,27 @@ class NumericInputComponent extends React.Component<
   }
 }
 
-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 interface INumericInputComponentProps extends ComponentProps {
+  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

app/client/src/editorComponents/RadioGroupComponent.tsx

@@ -1,5 +1,5 @@
 import * as React from "react"
-import { IComponentProps } from "./BaseComponent"
+import { ComponentProps } from "./BaseComponent"
 import { Radio, RadioGroup, IOptionProps } from "@blueprintjs/core"
 import { Container } from "./ContainerComponent"
 class RadioGroupComponent extends React.Component<RadioGroupComponentProps> {
@@ -25,7 +25,7 @@ class RadioGroupComponent extends React.Component<RadioGroupComponentProps> {
   }
 }
 
-export interface RadioGroupComponentProps extends IComponentProps {
+export interface RadioGroupComponentProps extends ComponentProps {
   label: string;
   inline: boolean;
   selectedValue: string | number;

app/client/src/editorComponents/SpinnerComponent.tsx

@@ -1,5 +1,5 @@
 import * as React from "react"
-import { IComponentProps } from "./BaseComponent"
+import { ComponentProps } from "./BaseComponent"
 import { Spinner, Intent } from "@blueprintjs/core"
 import { Container } from "./ContainerComponent"
 
@@ -17,10 +17,10 @@ class SpinnerComponent extends React.Component<SpinnerComponentProps> {
   }
 }
 
-export interface SpinnerComponentProps extends IComponentProps {
-  size?: number
-  value?: number
-  intent?: Intent
+export interface SpinnerComponentProps extends ComponentProps {
+  size?: number;
+  value?: number;
+  intent?: Intent;
 }
 
 export default SpinnerComponent

app/client/src/editorComponents/TagInputComponent.tsx

@@ -1,5 +1,5 @@
 import * as React from "react"
-import { IComponentProps } from "./BaseComponent"
+import { ComponentProps } from "./BaseComponent"
 import { Intent, ITagProps, TagInput, HTMLInputProps } from "@blueprintjs/core"
 import { Container } from "./ContainerComponent"
 class TagInputComponent extends React.Component<TagInputComponentProps> {
@@ -15,21 +15,21 @@ class TagInputComponent extends React.Component<TagInputComponentProps> {
   }
 }
 
-export interface TagInputComponentProps 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 interface TagInputComponentProps extends ComponentProps {
+  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

app/client/src/editorComponents/TextComponent.tsx

@@ -1,5 +1,5 @@
 import * as React from "react"
-import { IComponentProps } from "./BaseComponent"
+import { ComponentProps } from "./BaseComponent"
 import { Text } from "@blueprintjs/core"
 import { Container } from "./ContainerComponent"
 class TextComponent extends React.Component<ITextComponentProps> {
@@ -14,10 +14,10 @@ class TextComponent extends React.Component<ITextComponentProps> {
   }
 }
 
-export interface ITextComponentProps extends IComponentProps {
-  text?: string
-  ellipsize?: boolean
-  tagName?: keyof JSX.IntrinsicElements
+export interface ITextComponentProps extends ComponentProps {
+  text?: string;
+  ellipsize?: boolean;
+  tagName?: keyof JSX.IntrinsicElements;
 }
 
 export default TextComponent

app/client/src/index.tsx

@@ -14,12 +14,11 @@ 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 { DndProvider } from "react-dnd"
 import HTML5Backend from "react-dnd-html5-backend"
 import { appInitializer } from "./utils/AppsmithUtils";
-import ProtectedRoute from "./pages/common/ProtectedRoute";
+
 appInitializer();
 WidgetBuilderRegistry.registerWidgetBuilders();
 const sagaMiddleware = createSagaMiddleware()
@@ -33,7 +32,7 @@ ReactDOM.render(
         <BrowserRouter>
           <Switch>
             <Route exact path="/" component={App} />
-            <ProtectedRoute path="/builder" component={Editor} />
+            <Route path="/builder" component={Editor} />
             <Route exact path="/login" component={LoginPage} />
             <Route component={PageNotFound} />
           </Switch>

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

@@ -2,7 +2,7 @@ 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 styled from 'styled-components';
 import { Icon } from '@blueprintjs/core'
 import {  IconNames } from '@blueprintjs/icons'
 import { generateReactKey } from "../../utils/generators"
@@ -21,8 +21,8 @@ export const Wrapper = styled.div`
   padding: 10px 5px 10px 5px;
   margin: 0px 10px 0 0;
   border-radius: 5px;
-  background: #eee
-  border: 1px solid #eee;
+  background: ${props => props.theme.colors.paneCard};
+  border: 1px solid ${props=> props.theme.colors.paneCard};
   &:hover{
     background: #fff;
     cursor: grab;
@@ -59,7 +59,6 @@ const WidgetCard = (props: WidgetCardProps) => {
       })
     }
   }, [setInitialOffset])
-
   return (
     <React.Fragment >
       <DragPreviewImage connect={preview} src={blankImage} />

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

@@ -9,9 +9,9 @@ type WidgetCardPaneProps  = {
 
 const CardsPaneWrapper = styled.div`
   width: 300px;
-  background-color: #fff; 
+  background-color: ${props => props.theme.colors.paneBG}; 
   border-radius: 5px;
-  box-shadow: 0px 0px 3px #ccc;
+  box-shadow: 0px 0px 3px ${props => props.theme.colors.paneBG};
   padding: 5px 10px;
 `;
 

app/client/src/pages/common/ProtectedRoute.tsx

@@ -5,7 +5,7 @@ import { Route, Redirect } from "react-router-dom";
 import netlifyIdentity from 'netlify-identity-widget';
 
 const ProtectedRoute = ({ path: path, component: Component, ...rest }: { path: string, component: React.ReactType }) => {
-  let windowDoc: any = window
+  // let windowDoc: any = window
   return (<Route {...rest} render={(props) => (
     !_.isNil(netlifyIdentity.currentUser())
       ? <Component {...props} />

app/client/src/widgets/ContainerWidget.tsx

@@ -7,7 +7,7 @@ import {
 } from "../constants/WidgetConstants"
 import WidgetFactory from "../utils/WidgetFactory"
 import _ from "lodash"
-import { Color } from "../constants/StyleConstants"
+import { Color } from "../constants/DefaultTheme"
 import DroppableComponent from "../editorComponents/DroppableComponent"
 
 const DEFAULT_NUM_COLS = 16

app/client/yarn.lock

@@ -3754,6 +3754,11 @@ diff-sequences@^24.9.0:
   resolved "https://registry.yarnpkg.com/diff-sequences/-/diff-sequences-24.9.0.tgz#5715d6244e2aa65f48bba0bc972db0b0b11e95b5"
   integrity sha512-Dj6Wk3tWyTE+Fo1rW8v0Xhwk80um6yFYKbuAxc9c3EZxIHFDYwbi34Uk42u1CdnIiVorvt4RmlSDjIPyzGC2ew==
 
+diff@^3.2.0:
+  version "3.5.0"
+  resolved "https://registry.yarnpkg.com/diff/-/diff-3.5.0.tgz#800c0dd1e0a8bfbc95835c202ad220fe317e5a12"
+  integrity sha512-A46qtFgd+g7pDZinpnwiRJtxbC1hpgf0uzP3iG89scHk0AUC7A1TGxf5OiiOUv/JMZR8GOt8hL900hV0bOy5xA==
+
 diffie-hellman@^5.0.0:
   version "5.0.3"
   resolved "https://registry.yarnpkg.com/diffie-hellman/-/diffie-hellman-5.0.3.tgz#40e8ee98f55a2149607146921c63e1ae5f3d2875"
@@ -6137,6 +6142,11 @@ jest-environment-node@^24.9.0:
     jest-mock "^24.9.0"
     jest-util "^24.9.0"
 
+jest-get-type@^22.1.0:
+  version "22.4.3"
+  resolved "https://registry.yarnpkg.com/jest-get-type/-/jest-get-type-22.4.3.tgz#e3a8504d8479342dd4420236b322869f18900ce4"
+  integrity sha512-/jsz0Y+V29w1chdXVygEKSz2nBoHoYqNShPe+QgxSNjAuP1i8+k4LbQNrfoliKej0P45sivkSCh7yiD6ubHS3w==
+
 jest-get-type@^24.9.0:
   version "24.9.0"
   resolved "https://registry.yarnpkg.com/jest-get-type/-/jest-get-type-24.9.0.tgz#1684a0c8a50f2e4901b6644ae861f579eed2ef0e"
@@ -8927,6 +8937,14 @@ pretty-error@^2.1.1:
     renderkid "^2.0.1"
     utila "~0.4"
 
+pretty-format@^23.6.0:
+  version "23.6.0"
+  resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-23.6.0.tgz#5eaac8eeb6b33b987b7fe6097ea6a8a146ab5760"
+  integrity sha512-zf9NV1NSlDLDjycnwm6hpFATCGl/K1lt0R/GdkAK2O5LN/rwJoB+Mh93gGJjut4YbmecbfgLWVGSTCr0Ewvvbw==
+  dependencies:
+    ansi-regex "^3.0.0"
+    ansi-styles "^3.2.0"
+
 pretty-format@^24.9.0:
   version "24.9.0"
   resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-24.9.0.tgz#12fac31b37019a4eea3c11aa9a959eb7628aa7c9"