Merge branch 'layout-slider' into ide-ui

Main conflict : usage of `pre` instead of `code`

package.json

@@ -72,6 +72,7 @@
     "enzyme-adapter-react-16": "^1.1.1",
     "husky": "^1.0.0-rc.6",
     "prettier": "^1.12.0",
+    "re-resizable": "^4.4.8",
     "react-scripts-ts": "^2.15.1",
     "react-test-renderer": "^16.3.1",
     "typescript": "^2.8.1"

src/actions/actionTypes.ts

@@ -7,6 +7,7 @@ export interface IAction extends ReduxAction {
 /** Playground */
 export const UPDATE_EDITOR_VALUE = 'UPDATE_EDITOR_VALUE'
 export const UPDATE_REPL_VALUE = 'UPDATE_REPL_VALUE'
+export const CHANGE_EDITOR_WIDTH = 'CHANGE_EDITOR_WIDTH'
 export const EVAL_EDITOR = 'EVAL_EDITOR'
 export const EVAL_REPL = 'EVAL_REPL'
 export const CLEAR_REPL_INPUT = 'CLEAR_REPL_INPUT'

src/actions/playground.ts

@@ -6,6 +6,11 @@ export const updateEditorValue: ActionCreator<actionTypes.IAction> = (newEditorV
   payload: newEditorValue
 })
 
+export const updateEditorWidth: ActionCreator<actionTypes.IAction> = (widthChange: string) => ({
+  type: actionTypes.CHANGE_EDITOR_WIDTH,
+  payload: widthChange
+})
+
 export const updateReplValue: ActionCreator<actionTypes.IAction> = (newReplValue: string) => ({
   type: actionTypes.UPDATE_REPL_VALUE,
   payload: newReplValue

src/components/IDE/Editor.tsx

@@ -16,7 +16,7 @@ import 'brace/theme/cobalt'
  */
 export interface IEditorProps {
   editorValue: string
-  handleEditorChange: (newCode: string) => void
+  handleEditorValueChange: (newCode: string) => void
   handleEvalEditor: () => void
 }
 
@@ -50,7 +50,7 @@ class Editor extends React.Component<IEditorProps, {}> {
             mode="javascript"
             theme="cobalt"
             value={this.props.editorValue}
-            onChange={this.props.handleEditorChange}
+            onChange={this.props.handleEditorValueChange}
             width="100%"
             height="100%"
             fontSize={14}

src/components/IDE/Repl.tsx

@@ -36,44 +36,44 @@ export const Output: React.SFC<IOutputProps> = props => {
     case 'code':
       return (
         <Card>
-          <code className="codeOutput">{props.output.value}</code>
+          <pre className="codeOutput">{props.output.value}</pre>
         </Card>
       )
     case 'running':
       return (
         <Card>
-          <code className="logOutput">{props.output.consoleLogs.join('\n')}</code>
+          <pre className="logOutput">{props.output.consoleLogs.join('\n')}</pre>
         </Card>
       )
     case 'result':
       if (props.output.consoleLogs.length === 0) {
         return (
           <Card>
-            <code className="resultOutput">{toString(props.output.value)}</code>
+            <pre className="resultOutput">{toString(props.output.value)}</pre>
           </Card>
         )
       } else {
         return (
           <Card>
-            <code className="logOutput">{props.output.consoleLogs.join('\n')}</code>
+            <pre className="logOutput">{props.output.consoleLogs.join('\n')}</pre>
             <br />
-            <code className="resultOutput">{toString(props.output.value)}</code>
+            <pre className="resultOutput">{toString(props.output.value)}</pre>
           </Card>
         )
       }
     case 'errors':
       if (props.output.consoleLogs.length === 0) {
         return (
           <Card>
-            <code className="errorOutput">{parseError(props.output.errors)}</code>
+            <pre className="errorOutput">{parseError(props.output.errors)}</pre>
           </Card>
         )
       } else {
         return (
           <Card>
-            <code className="logOutput">{props.output.consoleLogs.join('\n')}</code>
+            <pre className="logOutput">{props.output.consoleLogs.join('\n')}</pre>
             <br />
-            <code className="errorOutput">{parseError(props.output.errors)}</code>
+            <pre className="errorOutput">{parseError(props.output.errors)}</pre>
           </Card>
         )
       }

src/components/IDE/ReplControl.tsx

@@ -33,8 +33,10 @@ class ReplControl extends React.Component<IReplControlProps, {}> {
     const clearButton = genericButton('', 'remove', this.props.handleClearReplOutput)
     return (
       <div className="row end-xs">
-        <div className="col-xs-1">{evalButton}</div>
-        <div className="col-xs-1">{clearButton}</div>
+        <div className="pt-control-group pt-fill">
+          {evalButton}
+          {clearButton}
+        </div>
       </div>
     )
   }

src/components/IDE/__tests__/Editor.tsx

@@ -7,7 +7,7 @@ import Editor, { IEditorProps } from '../Editor'
 test('Editor renders correctly', () => {
   const props: IEditorProps = {
     editorValue: '',
-    handleEditorChange: newCode => {},
+    handleEditorValueChange: newCode => {},
     handleEvalEditor: () => {}
   }
   const app = <Editor {...props} />

src/components/IDE/__tests__/__snapshots__/Editor.tsx.snap

@@ -8,7 +8,7 @@ exports[`Editor renders correctly 1`] = `
     </div>
   </div>
   <div className=\\"row editor-react-ace\\">
-    <ReactAce className=\\"react-ace\\" mode=\\"javascript\\" theme=\\"cobalt\\" value=\\"\\" onChange={[Function: handleEditorChange]} width=\\"100%\\" height=\\"100%\\" fontSize={14} highlightActiveLine={false} name=\\"brace-editor\\" focus={false} showGutter={true} onPaste={{...}} onLoad={{...}} onScroll={{...}} minLines={{...}} maxLines={{...}} readOnly={false} showPrintMargin={true} tabSize={4} cursorStart={1} editorProps={{...}} style={{...}} scrollMargin={{...}} setOptions={{...}} wrapEnabled={false} enableBasicAutocompletion={false} enableLiveAutocompletion={false} />
+    <ReactAce className=\\"react-ace\\" mode=\\"javascript\\" theme=\\"cobalt\\" value=\\"\\" onChange={[Function: handleEditorValueChange]} width=\\"100%\\" height=\\"100%\\" fontSize={14} highlightActiveLine={false} name=\\"brace-editor\\" focus={false} showGutter={true} onPaste={{...}} onLoad={{...}} onScroll={{...}} minLines={{...}} maxLines={{...}} readOnly={false} showPrintMargin={true} tabSize={4} cursorStart={1} editorProps={{...}} style={{...}} scrollMargin={{...}} setOptions={{...}} wrapEnabled={false} enableBasicAutocompletion={false} enableLiveAutocompletion={false} />
   </div>
 </div>"
 `;

src/components/IDE/__tests__/__snapshots__/Repl.tsx.snap

@@ -2,9 +2,9 @@
 
 exports[`Output renders correctly for InterpreterOutput.type === 'result' 1`] = `
 "<Blueprint2.Card elevation={0} interactive={false}>
-  <code className=\\"resultOutput\\">
+  <pre className=\\"resultOutput\\">
     &quot;def&quot;
-  </code>
+  </pre>
 </Blueprint2.Card>"
 `;
 

src/components/IDE/index.tsx

@@ -1,19 +1,47 @@
 import * as React from 'react'
 
+import Resizable from 're-resizable'
+
 import EditorContainer from '../../containers/IDE/EditorContainer'
 import ReplContainer from '../../containers/IDE/ReplContainer'
 
-const IDE: React.SFC<{}> = () => (
-  <div className="IDE">
-    <div className="row ide-content-parent">
-      <div className="col-xs-6 editor-parent">
-        <EditorContainer />
-      </div>
-      <div className="col-xs-6 repl-parent">
-        <ReplContainer />
+export interface IIDEProps {
+  editorWidth: string
+  handleEditorWidthChange: (widthChange: number) => void // TODO
+}
+
+class IDE extends React.Component<IIDEProps, {}> {
+  public render() {
+    return (
+      <div className="IDE">
+        <div className="row ide-content-parent">
+          <Resizable
+            className="editor-parent"
+            size={{ width: this.props.editorWidth, height: '100%' }}
+            // tslint:disable-next-line jsx-no-lambda
+            onResizeStop={(e, direction, ref, d) => {
+              this.props.handleEditorWidthChange(d.width * 100 / window.innerWidth)
+            }}
+            enable={{
+              top: false,
+              right: true,
+              bottom: false,
+              left: false,
+              topRight: false,
+              bottomRight: false,
+              bottomLeft: false,
+              topLeft: false
+            }}
+          >
+            <EditorContainer />
+          </Resizable>
+          <div className="repl-parent">
+            <ReplContainer />
+          </div>
+        </div>
       </div>
-    </div>
-  </div>
-)
+    )
+  }
+}
 
 export default IDE

src/components/Playground.tsx

@@ -1,11 +1,11 @@
 import * as React from 'react'
 
-import IDE from './IDE'
+import IDEContainer from '../containers/IDE'
 
 const Playground: React.SFC<{}> = () => {
   return (
     <div className="Playground">
-      <IDE />
+      <IDEContainer />
     </div>
   )
 }

src/components/__tests__/__snapshots__/Playground.tsx.snap

@@ -2,6 +2,6 @@
 
 exports[`Playground renders correctly 1`] = `
 "<div className=\\"Playground\\">
-  <IDE />
+  <Connect(IDE) />
 </div>"
 `;

src/containers/IDE/EditorContainer.ts

@@ -6,7 +6,7 @@ import Editor, { IEditorProps } from '../../components/IDE/Editor'
 import { IState } from '../../reducers/states'
 
 type StateProps = Pick<IEditorProps, 'editorValue'>
-type DispatchProps = Pick<IEditorProps, 'handleEditorChange'> &
+type DispatchProps = Pick<IEditorProps, 'handleEditorValueChange'> &
   Pick<IEditorProps, 'handleEvalEditor'>
 
 /** Provides the editorValue of the `IPlaygroundState` of the `IState` as a
@@ -21,7 +21,7 @@ const mapStateToProps: MapStateToProps<StateProps, {}, IState> = state => {
 const mapDispatchToProps: MapDispatchToProps<DispatchProps, {}> = (dispatch: Dispatch<any>) =>
   bindActionCreators(
     {
-      handleEditorChange: updateEditorValue,
+      handleEditorValueChange: updateEditorValue,
       handleEvalEditor: evalEditor
     },
     dispatch

src/containers/IDE/index.ts

@@ -0,0 +1,28 @@
+import { connect, MapDispatchToProps, MapStateToProps } from 'react-redux'
+import { bindActionCreators, Dispatch } from 'redux'
+
+import { updateEditorWidth } from '../../actions/playground'
+import IDE, { IIDEProps } from '../../components/IDE/'
+import { IState } from '../../reducers/states'
+
+type StateProps = Pick<IIDEProps, 'editorWidth'>
+type DispatchProps = Pick<IIDEProps, 'handleEditorWidthChange'>
+
+/** Provides the editorValue of the `IPlaygroundState` of the `IState` as a
+ * `StateProps` to the Playground component
+ */
+const mapStateToProps: MapStateToProps<StateProps, {}, IState> = state => {
+  return {
+    editorWidth: state.playground.editorWidth
+  }
+}
+
+const mapDispatchToProps: MapDispatchToProps<DispatchProps, {}> = (dispatch: Dispatch<any>) =>
+  bindActionCreators(
+    {
+      handleEditorWidthChange: updateEditorWidth
+    },
+    dispatch
+  )
+
+export default connect(mapStateToProps, mapDispatchToProps)(IDE)

src/reducers/playground.ts

@@ -1,5 +1,6 @@
 import { Reducer } from 'redux'
 import {
+  CHANGE_EDITOR_WIDTH,
   CLEAR_CONTEXT,
   CLEAR_REPL_INPUT,
   CLEAR_REPL_OUTPUT,
@@ -28,6 +29,11 @@ export const reducer: Reducer<IPlaygroundState> = (state = defaultPlayground, ac
         ...state,
         replValue: action.payload
       }
+    case CHANGE_EDITOR_WIDTH:
+      return {
+        ...state,
+        editorWidth: (parseFloat(state.editorWidth.slice(0, -1)) + action.payload).toString() + '%'
+      }
     case CLEAR_REPL_INPUT:
       return {
         ...state,

src/reducers/states.ts

@@ -13,6 +13,7 @@ export interface IApplicationState {
 
 export interface IPlaygroundState {
   readonly editorValue: string
+  readonly editorWidth: string
   readonly replValue: string
   readonly context: Context
   readonly output: InterpreterOutput[]
@@ -88,6 +89,7 @@ export const defaultApplication: IApplicationState = {
 
 export const defaultPlayground: IPlaygroundState = {
   editorValue: '',
+  editorWidth: '50%',
   replValue: '',
   context: createContext(),
   output: []

src/styles/_ide.scss

@@ -14,12 +14,17 @@ $code-color-error: #FF4444;
 
   .ide-content-parent {
     height: 85vh;
+    display: flex;
+    flex-direction: row;
+    overflow: hidden;
     > div {
       height: inherit; // Fix for Firefox not autoscrolling when repl overflows
     }
+    .repl-parent {
+      flex: 1 1;
+    }
   }
 
-
   .Editor {
     height: 100%;
     display: flex;
@@ -36,9 +41,13 @@ $code-color-error: #FF4444;
 
   .Repl {
     height: 100%;
-
+    display: flex;
+    flex-direction: column;
+    .repl-control-parent {
+      flex: initial;
+    }
     .repl-output-parent {
-      height: 100%;
+      flex: 1 1;
       margin-top: 0.3rem;
       overflow-y: auto;
     }
@@ -50,12 +59,12 @@ $code-color-error: #FF4444;
       margin: 0.5rem;
       margin-top: 0rem;
 
-      code {
+      pre {
         background-color: transparent;
         box-shadow: none;
         color: inherit;
         padding: 0px;
-        white-space: pre;
+        white-space: pre-wrap;
       }
 
       .codeOutput {
@@ -76,7 +85,8 @@ $code-color-error: #FF4444;
     }
 
     .repl-react-ace {
-      margin: 0.5rem;
+      margin-left: 0.5rem;
+      margin-right: 0.5rem;
       margin-top: 0rem;
     }
   }

yarn.lock

@@ -6327,6 +6327,10 @@ rc@^1.0.1, rc@^1.1.6, rc@^1.1.7:
     minimist "^1.2.0"
     strip-json-comments "~2.0.1"
 
+re-resizable@^4.4.8:
+  version "4.4.8"
+  resolved "https://registry.yarnpkg.com/re-resizable/-/re-resizable-4.4.8.tgz#1c7eedfd9b9ed1f83b3adfa7a97cda76881e4e57"
+
 react-ace@^6.1.1:
   version "6.1.1"
   resolved "https://registry.yarnpkg.com/react-ace/-/react-ace-6.1.1.tgz#c8339b4f0a27401bff53f477f125d3d7eac2a090"