Improved UI of left panel's add component and project type inputs. Simplified options in modal

Author: tsully

app/src/components/left/ComponentPanel.tsx

@@ -27,21 +27,28 @@ const useStyles = makeStyles({
     textAlign: 'center',
     display: 'flex',
     alignItems: 'center',
-    justifyContent: 'center',
-    paddingLeft: '35px',
+    justifyContent: 'space-between',
+    // paddingLeft: '35px',
     marginBottom: '15px'
   },
+  addComponentWrapper: {
+    border: '1px solid rgba(70,131,83)',
+    padding: '20px',
+    margin: '20px'
+  },
   rootCheckBox: {},
   rootCheckBoxLabel: {
     color: 'white'
   },
   projectTypeWrapper: {
-    paddingLeft: '35px',
-    marginBottom: '15px'
+    paddingLeft: '20px',
+    paddingRight: '20px',
+    marginBottom: '15px',
+    width: '100%'
   },
   projectSelector: {
     backgroundColor: 'rgba(255,255,255,0.15)',
-    width: '100%',
+    width: '317px',
     color: '#fff'
   },
   panelWrapper: {
@@ -84,9 +91,10 @@ const useStyles = makeStyles({
   },
   button: {
     fontSize: '1rem',
-    height: '70px',
+    height: '40px',
     maginTop: '10px',
-    border: '1px solid rgba(70,131,83)',
+    width: '100%',
+    // border: '1px solid rgba(70,131,83)',
     backgroundColor: 'rgba(1,212,109,0.1)'
   },
   rootToggle: {
@@ -193,8 +201,8 @@ const ComponentPanel = (): JSX.Element => {
       <div className={classes.projectTypeWrapper}>
         <FormControl>
           {/* <InputLabel id="project-type-label" className={classes.inputLabel}>
-            Project Type
-          </InputLabel> */}
+      Project Type
+    </InputLabel> */}
           <Select
             variant="outlined"
             labelId="project-type-label"
@@ -208,35 +216,42 @@ const ComponentPanel = (): JSX.Element => {
           </Select>
         </FormControl>
       </div>
-      <div className={classes.inputWrapper}>
-        <TextField
-          color={'primary'}
-          label="Component Name"
-          variant="outlined"
-          className={classes.inputField}
-          InputProps={{ className: classes.input }}
-          InputLabelProps={{ className: classes.inputLabel }}
-          value={compName}
-          error={errorStatus}
-          helperText={errorStatus ? errorMsg : ''}
-          onChange={handleNameInput}
-        />
-        <div className={classes.btnGroup}>
-          <FormControlLabel
-            value="top"
-            control={<Checkbox color="primary" onChange={toggleRootStatus} />}
-            label={state.projectType === 'Next.js' ? 'Page' : 'Root'}
-            className={classes.rootCheckBoxLabel}
-            labelPlacement="top"
-          />
+
+      <div className={classes.addComponentWrapper}>
+        <div>
+          <div className={classes.inputWrapper}>
+            <TextField
+              color={'primary'}
+              label="Component Name"
+              variant="outlined"
+              className={classes.inputField}
+              InputProps={{ className: classes.input }}
+              InputLabelProps={{ className: classes.inputLabel }}
+              value={compName}
+              error={errorStatus}
+              helperText={errorStatus ? errorMsg : ''}
+              onChange={handleNameInput}
+            />
+            <div className={classes.btnGroup}>
+              <FormControlLabel
+                value="top"
+                control={
+                  <Checkbox color="primary" onChange={toggleRootStatus} />
+                }
+                label={state.projectType === 'Next.js' ? 'Page' : 'Root'}
+                className={classes.rootCheckBoxLabel}
+                labelPlacement="top"
+              />
+            </div>
+          </div>
+          <Button
+            className={classes.button}
+            color="primary"
+            onClick={handleNameSubmit}
+          >
+            ADD
+          </Button>
         </div>
-        <Button
-          className={classes.button}
-          color="primary"
-          onClick={handleNameSubmit}
-        >
-          ADD
-        </Button>
       </div>
       <div className={classes.panelWrapperList}>
         <h4>{state.projectType === 'Next.js' ? 'Pages' : 'Root components'}</h4>

app/src/containers/LeftContainer.tsx

@@ -53,8 +53,7 @@ const LeftContainer = (): JSX.Element => {
   // genOption = 1 --> export an entire project w/ webpack, server, etc.
   const genOptions: string[] = [
     'Export components',
-    'Export components with application files',
-    'Export project as Next.js application'
+    'Export components with application files'
   ];
   // const [genOption, setGenOption] = useState(1);
   let genOption = 0;
@@ -128,6 +127,7 @@ const LeftContainer = (): JSX.Element => {
         path,
         'NEW PROJECT',
         genOption,
+        state.projectType,
         state.components,
         state.rootComponents
       );

app/src/utils/exportProject.util.ts

@@ -2,31 +2,31 @@ import createApplicationUtil from './createApplication.util';
 import createNextApp from './createNextApp.util';
 import createFiles from './createFiles.util';
 
-
 const exportProject = (
   path: string,
   appName: string,
   genOption: number,
+  projectType: string,
   components: any,
   rootComponents: number[]
 ) => {
-  if (genOption === 1) {
-    console.log('in exportProject, genOption 1')
+  if (genOption === 1 && projectType === 'Classic React') {
+    console.log('in exportProject, genOption 1');
     createApplicationUtil({ path, appName, components })
       .then(() => {
         console.log('CreateApplicationUtil has finished');
       })
       .catch(err => console.log(err));
   } else if (genOption === 0) {
-    console.log('in exportProject, genOption 0')
+    console.log('in exportProject, genOption 0');
     createFiles(components, path, appName, false);
-  } else if (genOption === 2) {
-    console.log('in exportProject, genOption 2')
-    createNextApp({ path, appName, components, rootComponents})
-    .then(() => {
-      console.log('CreateNextApp has finished');
-    })
-    .catch(err => console.log(err));
+  } else if (genOption === 1 && projectType === 'Next.js') {
+    console.log('in exportProject, genOption 2');
+    createNextApp({ path, appName, components, rootComponents })
+      .then(() => {
+        console.log('CreateNextApp has finished');
+      })
+      .catch(err => console.log(err));
   }
 };