change themes no symbols for components and elements and resizableish code snip

Author: jinsoolim

app/src/components/bottom/BottomPanel.tsx

@@ -2,15 +2,22 @@ import React, { useContext } from 'react';
 import { stateContext } from '../../context/context';
 import BottomTabs from './BottomTabs';
 // import BottomTabs from './BottomTabs';
+import { Resizable } from 're-resizable';
 
 // const IPC = require('electron').ipcRenderer;
 
 const BottomPanel = () => {
   return (
-    <div className="bottom-panel" style={{ width: '100%' }}>
-      <BottomTabs />
-    </div>
+    <Resizable
+      enable={{
+        top: true,
+      }}
+    >
+      <div className="bottom-panel">
+        <BottomTabs />
+      </div>
+    </Resizable>
   );
 };
 
-export default BottomPanel;
+export default BottomPanel;

app/src/components/bottom/BottomTabs.tsx

@@ -5,6 +5,7 @@ import Tab from '@material-ui/core/Tab';
 // import Tree from 'react-d3-tree';
 import CodePreview from './CodePreview';
 import Box from '@material-ui/core/Box';
+import { emitKeypressEvents } from 'readline';
 
 const BottomTabs = () => {
   // state that controls which tab the user is on

app/src/components/bottom/CodePreview.tsx

@@ -4,35 +4,72 @@ import AceEditor from 'react-ace';
 import { makeStyles } from '@material-ui/core/styles';
 import 'ace-builds/src-noconflict/mode-javascript';
 import 'ace-builds/src-noconflict/theme-monokai';
-import Button from '@material-ui/core/Button';
+import 'ace-builds/src-noconflict/theme-github';
+import 'ace-builds/src-noconflict/theme-solarized_dark';
+import 'ace-builds/src-noconflict/theme-solarized_light';
+import 'ace-builds/src-noconflict/theme-terminal';
 import { Component } from '../../interfaces/Interfaces';
+import NativeSelect from '@material-ui/core/NativeSelect';
+import FormControl from '@material-ui/core/FormControl';
+
+const useStyles = makeStyles(theme => ({
+  formControl: {
+    margin: theme.spacing(1),
+    minWidth: 120
+  },
+  selectEmpty: {
+    marginTop: theme.spacing(2)
+  }
+}));
 
 const CodePreview = () => {
   const [state, dispatch] = useContext(stateContext);
+  const [theme, setTheme] = useState('monokai');
+  const classes = useStyles();
   const currentComponent = state.components.find(
     (elem: Component) => elem.id === state.canvasFocus.componentId
   );
 
   const handleCodeSnipChange = val => {
     currentComponent.code = val;
-  }
+  };
+
+  const changeTheme = e => {
+    setTheme(e.target.value);
+  };
 
   return (
     <div
       style={{
         height: '90%',
         paddingLeft: '0px',
-        paddingTop: '1rem',
-        paddingBottom: '1rem',
-        overflow: 'auto',
+        // paddingTop: '1rem',
+        // paddingBottom: '1rem',
+        // overflow: 'auto',
         maxWidth: '100%',
-        display: 'flex',
+        // display: 'flex',
         justifyContent: 'center'
       }}
     >
+      <FormControl fullWidth={true} className={classes.formControl}>
+        {/* <InputLabel variant="filled" style={{ color: 'white' }}>
+          Change Theme
+        </InputLabel> */}
+        <NativeSelect
+          style={{ color: 'white' }}
+          value={theme}
+          onChange={changeTheme}
+        >
+          <option value={'monokai'}>Monokai</option>
+          <option value={'github'}>Github</option>
+          <option value={'solarized_dark'}>Solarized Dark</option>
+          <option value={'terminal'}>Terminal</option>
+          <option value={'solarized_light'}>Solarized Light</option>
+        </NativeSelect>
+      </FormControl>
       <AceEditor
         mode="javascript"
-        theme="monokai"
+        theme={theme}
         width="100%"
         height="100%"
         style={{
@@ -58,6 +95,6 @@ const CodePreview = () => {
   );
 };
 
-const useStyles = makeStyles(theme => ({}));
+// const useStyles = makeStyles(theme => ({}));
 
 export default CodePreview;

app/src/components/left/ComponentPanel.tsx

@@ -68,7 +68,7 @@ const ComponentPanel = (): JSX.Element => {
 
   // Add a new component
   const createOption = (inputName: String) => {
-    // format name so first letter is capitalized and there are no whitespaces
+    // format name so first letter is capitalized and there are no white spaces
     let inputNameClean = inputName.replace(/\s+/g, '');
     const formattedName =
       inputNameClean.charAt(0).toUpperCase() + inputNameClean.slice(1);
@@ -112,12 +112,6 @@ const ComponentPanel = (): JSX.Element => {
     return state.canvasFocus.componentId === targetId ? true : false;
   };
 
-  // const deleteReusableComponent = (id) => {
-  //   // reducer to modify state.components
-  //   // make sure the component is not a root
-  //   //
-  // }
-
   return (
     <div className={classes.panelWrapper}>
       {/* Add a new component*/}
@@ -170,14 +164,15 @@ const ComponentPanel = (): JSX.Element => {
             .map(comp => {
               //console.log('root comp', comp.name)
               return (
-              <ComponentPanelItem
-                isFocus={isFocus(comp.id)}
-                key={`comp-${comp.id}`}
-                name={comp.name}
-                id={comp.id}
-                root={true}
-              />
-            )})}
+                <ComponentPanelItem
+                  isFocus={isFocus(comp.id)}
+                  key={`comp-${comp.id}`}
+                  name={comp.name}
+                  id={comp.id}
+                  root={true}
+                />
+              );
+            })}
         </Grid>
         {/* Display all reusable components */}
         <h4>Reusable components</h4>
@@ -188,14 +183,15 @@ const ComponentPanel = (): JSX.Element => {
               //console.log('all root comps', state.rootComponents);
               //console.log('all reusable comps', state.components);
               return (
-              <ComponentPanelItem
-                isFocus={isFocus(comp.id)}
-                key={`comp-${comp.id}`}
-                name={comp.name}
-                id={comp.id}
-                root={false}
-              />
-            )})}
+                <ComponentPanelItem
+                  isFocus={isFocus(comp.id)}
+                  key={`comp-${comp.id}`}
+                  name={comp.name}
+                  id={comp.id}
+                  root={false}
+                />
+              );
+            })}
         </Grid>
         {/* Display navigation components - (only applies to next.js which has routing built in) */}
         {state.projectType === 'Next.js' ? (

app/src/components/main/Canvas.tsx

@@ -49,7 +49,7 @@ function Canvas() {
       }
       // if item is not a new instance, change position of element dragged inside div so that the div is the new parent
       else {
-        console.log('dispatch change position')
+        console.log('dispatch change position');
         dispatch({
           type: 'CHANGE POSITION',
           payload: {

app/src/components/right/SimpleModal.tsx

@@ -46,8 +46,8 @@ const SimpleModal = (props: any) => {
       <Modal
         aria-labelledby="simple-modal-title"
         aria-describedby="simple-modal-description"
-        onClose={closeModal}
         open={open}
+        onClose={closeModal}
       >
         <div
           style={{

app/src/containers/MainContainer.tsx

@@ -2,20 +2,19 @@ import React, { Component } from 'react';
 import BottomPanel from '../components/bottom/BottomPanel';
 import CanvasContainer from '../components/main/CanvasContainer';
 
-// Main container contains the canvas which renders the components/elements on screen
-// and the bottom panel which displays the code for the component
+import { Resizable } from "re-resizable";
+
 class MainContainer extends Component {
   render() {
     return (
       <div className="main-container">
-        <div
-          className="main" //ref={main} **no function, commenting out**
-        >
+        <div className="main">
           <CanvasContainer />
         </div>
-
-        <BottomPanel />
-      </div>
+        {/* <Resizable minHeight={'25%'} enable={{ top: true }}> */}
+          <BottomPanel />
+        {/* </Resizable> */}
+    </div>
     );
   }
 }

app/src/public/styles/style.css

@@ -17,8 +17,8 @@ body {
   overflow: hidden;
 }
 /**************
-* 
-* for Material React Table found in Add Child Props 
+*
+* for Material React Table found in Add Child Props
 *
 ***************/
 
@@ -36,7 +36,7 @@ body {
 }
 
 /*
-/////////////////////////////////////////// 
+///////////////////////////////////////////
 Remove focus styling
 /////////////////////////////////////////////
 */
@@ -73,7 +73,7 @@ header {
 } */
 
 /*
-/////////////////////////////////////////// 
+///////////////////////////////////////////
 BUTTONS
 /////////////////////////////////////////////
 */
@@ -83,7 +83,7 @@ BUTTONS
 }
 
 /*
-/////////////////////////////////////////// 
+///////////////////////////////////////////
 LEFT COLUMN
 /////////////////////////////////////////////
 */
@@ -131,7 +131,7 @@ LEFT COLUMN
 }
 
 /*
-/////////////////////////////////////////// 
+///////////////////////////////////////////
 MAIN COLUMN
 /////////////////////////////////////////////
 */
@@ -214,8 +214,16 @@ h1 {
   text-align: center;
 }
 
+.ace_scrollbar {
+  display: none;
+}
+
+.ace_print-margin {
+  display: none;
+}
+
 /*
-/////////////////////////////////////////// 
+///////////////////////////////////////////
 RIGHT COLUMN
 /////////////////////////////////////////////
 */
@@ -233,13 +241,14 @@ RIGHT COLUMN
 .bottom-panel {
   transition: width 250ms ease-in-out;
   width: 100%;
-  height: 33%;
-  min-height: 260px;
+  height: 100%;
+  min-height: 500px;
   /* display: flex;
   flex-direction: row; */
   background-color: #fcfcfc;
   /* box-shadow: 0 -5px 7px 2px rgb(255, 0, 0); */
-  margin-right: 100px;
+  /* margin-right: 100px;
+  padding-right: 10px; */
 }
 
 .htmlattr {

app/src/reducers/componentReducer.ts

@@ -433,10 +433,8 @@ const reducer = (state: State, action: Action) => {
     }
 
     case 'ADD ELEMENT': {
-      console.log("REDUCER HIT");
       const HTMLTypes = [...state.HTMLTypes];
       HTMLTypes.push(action.payload);
-      console.log("MY NEW ARRAY: ", HTMLTypes);
       return {
         ...state,
         HTMLTypes

package.json

@@ -118,11 +118,12 @@
     "immutable": "^4.0.0-rc.12",
     "js-cookie": "^2.2.1",
     "localforage": "^1.7.2",
+    "node-fetch": "^2.6.0",
     "passport": "^0.4.1",
     "passport-github2": "^0.1.12",
-    "node-fetch": "^2.6.0",
     "prettier": "^1.19.1",
     "prop-types": "^15.6.2",
+    "re-resizable": "^6.7.0",
     "react": "^16.13.0",
     "react-ace": "^8.1.0",
     "react-dnd": "^11.1.3",