🔥 working theme changer

Author: brianjshan

app/src/components/bottom/BottomPanel.tsx

@@ -2,14 +2,29 @@ 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,
+        right: false,
+        bottom: false,
+        left: false,
+        topRight: false,
+        bottomRight: false,
+        bottomLeft: false,
+        topLeft: false
+      }}
+      // style={style}
+    >
+      <div className="bottom-panel">
+        <BottomTabs />
+      </div>
+    </Resizable>
   );
 };
 

app/src/components/bottom/BottomTabs.tsx

@@ -13,43 +13,13 @@ const BottomTabs = () => {
   const classes = useStyles();
   treeWrapper: HTMLDivElement;
 
-  // const el = document.querySelector('resizer');
-  // console.log(el);
-  // el.addEventListener('mousedown', mousedown);
-
-  // function mousedown(e) {
-  //   window.addEventListener('mousemove', mousemove);
-  //   window.addEventListener('mouseup', mouseup);
-
-  //   let prevX = e.clientX;
-  //   let prevY = e.clientY;
-
-  //   function mousemove(e) {
-  //     let newX = prevX - e.clientX;
-  //     let newY = prevY - e.clientY;
-
-  //     const rect = el.getBoundingClientRect();
-
-  //     el.style.left = rect.left - newX + 'px';
-  //     el.style.top = rect.top - newY + 'px';
-
-  //     prevX = e.clientX;
-  //     prevY = e.clientY;
-  //   }
-  //   function mouseup() {
-  //     window.removeEventListener('mousemove', mousemove);
-  //     window.removeEventListener('mouseup', mouseup);
-  //   }
-  // }
-
   // method changes the
   const handleChange = (event: React.ChangeEvent, value: number) => {
     setTab(value);
   };
 
   return (
     <div className={classes.root}>
-      {/* <div id="resizeMe" className="resizable"> */}
       <Box display="flex" justifyContent="space-between">
         <Tabs
           value={tab}
@@ -64,17 +34,9 @@ const BottomTabs = () => {
             classes={{ root: classes.tabRoot, selected: classes.tabSelected }}
             label="Code Preview"
           />
-          <Tab
-            classes={{
-              root: classes.tabsRoot,
-              selected: classes.tabSelected
-            }}
-            label="Tree Diagram"
-          />
         </Tabs>
       </Box>
       {tab === 0 && <CodePreview />}
-      {/* </div> */}
     </div>
   );
 };

app/src/components/bottom/CodePreview.tsx

@@ -1,38 +1,79 @@
-import React, { useContext } from 'react';
+import React, { useContext, useState } from 'react';
 import { stateContext } from '../../context/context';
 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={{
-          border: '2px solid #33eb91',
+          // border: '2px solid #33eb91',
           borderRadius: '8px'
         }}
         // onChange={code =>
@@ -41,10 +82,11 @@ const CodePreview = () => {
         //     code
         //   })
         // }
+        onChange={handleCodeSnipChange}
         value={currentComponent.code}
         name="Code_div"
         // readOnly={this.props.codeReadOnly}
-        readOnly={true}
+        readOnly={false}
         editorProps={{ $blockScrolling: true }}
         fontSize={16}
         tabSize={2}
@@ -53,6 +95,6 @@ const CodePreview = () => {
   );
 };
 
-const useStyles = makeStyles(theme => ({}));
+// const useStyles = makeStyles(theme => ({}));
 
 export default CodePreview;

app/src/components/left/ComponentPanel.tsx

@@ -101,12 +101,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*/}
@@ -159,14 +153,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>
@@ -177,14 +172,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/containers/MainContainer.tsx

@@ -8,9 +8,7 @@ class MainContainer extends Component {
   render() {
     return (
       <div className="main-container">
-        <div
-          className="main" //ref={main} **no function, commenting out**
-        >
+        <div className="main">
           <CanvasContainer />
         </div>
 

app/src/public/styles/style.css

@@ -214,18 +214,12 @@ h1 {
   text-align: center;
 }
 
-.resizable {
-  position: relative;
+.ace_scrollbar {
+  display: none;
 }
 
-.resizer {
-  position: absolute;
-  cursor: row-resize;
-  top: 0;
-  height: 5px;
-  left: 0;
-  right: 0;
-  width: 100%;
+.ace_print-margin {
+  display: none;
 }
 
 /*
@@ -247,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 {

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",