merging

Author: diegovazquezny

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

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

app/src/components/bottom/CodePreview.tsx

@@ -1,34 +1,75 @@
-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={{
@@ -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

@@ -32,6 +32,8 @@ const ComponentPanel = (): JSX.Element => {
       setErrorMsg('Component name already exists.');
     } else if (type === 'letters') {
       setErrorMsg('Component name must start with a letter.');
+    } else if (type === 'symbolsDetected') {
+      setErrorMsg('Component name must not contain symbols.');
     }
   };
 
@@ -66,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);
@@ -81,11 +83,20 @@ const ComponentPanel = (): JSX.Element => {
     setCompName('');
   };
 
+  const alphanumeric = input => {
+    let letterNumber = /^[0-9a-zA-Z]+$/;
+    if (input.match(letterNumber)) return true;
+    return false;
+  }
+
   const handleNameSubmit = () => {
     let letters = /[a-zA-Z]/;
     if (!compName.charAt(0).match(letters)) {
       triggerError('letters');
       return;
+    } else if (!alphanumeric(compName)) {
+      triggerError('symbolsDetected');
+      return;
     } else if (compName.trim() === '') {
       triggerError('empty');
       return;
@@ -101,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*/}
@@ -159,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>
@@ -177,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' ? (