current export functionality exists and better load with Electron. Canvas currently working

index.js

@@ -1,22 +1,22 @@
 #!/usr/bin/env node
-const util = require('util');
-const program = require('commander');
-const execFile = util.promisify(require('child_process').execFile);
-const { Spinner } = require('cli-spinner');
+// const util = require('util');
+// const program = require('commander');
+// const execFile = util.promisify(require('child_process').execFile);
+// const { Spinner } = require('cli-spinner');
 
-const spinner = new Spinner('running app... %s');
-spinner.setSpinnerString('|/-\\');
+// const spinner = new Spinner('running app... %s');
+// spinner.setSpinnerString('|/-\\');
 
-program
-  .version('1.0.0', '-v, --version, -V')
-  .description('An application for prototyping React application.');
+// program
+//   .version('1.0.0', '-v, --version, -V')
+//   .description('An application for prototyping React application.');
 
-program
-  .command('start')
-  .description('Start-up reactype app')
-  .action(() => {
-    spinner.start();
-    execFile('npm', ['start']).catch(err => console.log(err));
-  });
+// program
+//   .command('start')
+//   .description('Start-up reactype app')
+//   .action(() => {
+//     spinner.start();
+//     execFile('npm', ['start']).catch(err => console.log(err));
+//   });
 
 program.parse(process.argv);

main.js

@@ -7,6 +7,7 @@ const {
   ipcMain,
 } = require('electron');
 
+
 require('electron-reload')(__dirname);
 
 // const isDev = true;
@@ -34,6 +35,11 @@ function openFile() {
   mainWindow.webContents.send('new-file', file);
 }
 
+// export files
+function exportComponents() {
+  console.log('hi from exportComponents');
+}
+
 // Choose directory
 ipcMain.on('choose_app_dir', (event) => {
   const directory = dialog.showOpenDialog(mainWindow, {
@@ -60,10 +66,15 @@ const createWindow = () => {
   mainWindow = new BrowserWindow({
     width,
     height,
+    show: false,
   });
 
   // and load the index.html of the app.
   mainWindow.loadURL(`file://${__dirname}/build/index.html`);
+  // load page once window is loaded
+  mainWindow.once('ready-to-show', () => {
+    mainWindow.show();
+  });
 
   const template = [{
     label: 'File',
@@ -73,6 +84,13 @@ const createWindow = () => {
       click() {
         openFile();
       },
+    },
+    {
+      label: 'Export Components',
+      accelerator: process.platform === 'darwin' ? 'Cmd+E' : 'Ctrl+Shift+E',
+      click() {
+        exportComponents();
+      },
     }],
   },
   {

src/actions/components.js

@@ -30,8 +30,8 @@ import {
 
 import { loadState } from "../localStorage";
 
-// import createFiles from '../utils/createFiles.util';
-// import createApplicationUtil from '../utils/createApplication.util';
+import createFiles from '../utils/createFiles.util';
+import createApplicationUtil from '../utils/createApplication.util'
 
 export const loadInitData = () => dispatch => {
   loadState().then(data =>
@@ -157,21 +157,21 @@ export const changeComponentFocusChild = ({
   });
 };
 
-// export const exportFiles = ({ components, path }) => (dispatch) => {
-//   dispatch({
-//     type: EXPORT_FILES,
-//   });
+export const exportFiles = ({ components, path }) => (dispatch) => {
+  dispatch({
+    type: EXPORT_FILES,
+  });
 
-//   createFiles(components, path)
-//     .then(dir => dispatch({
-//       type: EXPORT_FILES_SUCCESS,
-//       payload: { status: true, dir: dir[0] },
-//     }))
-//     .catch(err => dispatch({
-//       type: EXPORT_FILES_ERROR,
-//       payload: { status: true, err },
-//     }));
-// };
+  createFiles(components, path)
+    .then(dir => dispatch({
+      type: EXPORT_FILES_SUCCESS,
+      payload: { status: true, dir: dir[0] },
+    }))
+    .catch(err => dispatch({
+      type: EXPORT_FILES_ERROR,
+      payload: { status: true, err },
+    }));
+};
 
 export const handleClose = () => ({
   type: HANDLE_CLOSE,
@@ -194,30 +194,30 @@ export const handleTransform = (
   }
 });
 
-// export const createApplication = ({
-//   path, components = [], genOption, appName = 'proto_app', repoUrl,
-// }) => (dispatch) => {
-//   if (genOption === 0) {
-//     dispatch(exportFiles({ path, components }));
-//   } else if (genOption) {
-//     dispatch({
-//       type: CREATE_APPLICATION,
-//     });
-//     createApplicationUtil({
-//       path, appName, genOption, repoUrl,
-//     })
-//       .then(() => {
-//         dispatch({
-//           type: CREATE_APPLICATION_SUCCESS,
-//         });
-//         dispatch(exportFiles({ path: `${path}/${appName}`, components }));
-//       })
-//       .catch(err => dispatch({
-//         type: CREATE_APPLICATION_ERROR,
-//         payload: { status: true, err },
-//       }));
-//   }
-// };
+export const createApplication = ({
+  path, components = [], genOption, appName = 'proto_app', repoUrl,
+}) => (dispatch) => {
+  if (genOption === 0) {
+    dispatch(exportFiles({ path, components }));
+  } else if (genOption) {
+    dispatch({
+      type: CREATE_APPLICATION,
+    });
+    createApplicationUtil({
+      path, appName, genOption, repoUrl,
+    })
+      .then(() => {
+        dispatch({
+          type: CREATE_APPLICATION_SUCCESS,
+        });
+        dispatch(exportFiles({ path: `${path}/${appName}`, components }));
+      })
+      .catch(err => dispatch({
+        type: CREATE_APPLICATION_ERROR,
+        payload: { status: true, err },
+      }));
+  }
+};
 
 export const openExpansionPanel = component => ({
   type: OPEN_EXPANSION_PANEL,

src/components/MainContainerHeader.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import PropTypes from 'prop-types';
+// import PropTypes from 'prop-types';
 import Button from '@material-ui/core/Button';
 import ZoomInIcon from '@material-ui/icons/ZoomIn';
 import ZoomOutIcon from '@material-ui/icons/ZoomOut';
@@ -46,10 +46,9 @@ const styles = () => ({
   },
 });
 
+
 const MainContainerHeader = (props) => {
   const {
-    increaseHeight,
-    decreaseHeight,
     classes,
     image,
     showImageDeleteModal,
@@ -62,32 +61,6 @@ const MainContainerHeader = (props) => {
 
   return (
     <div className="main-header">
-      <div className="main-header-buttons" style={{ marginRight: 'auto' }}>
-        <Tooltip title="zoom in">
-          <div>
-            <Button
-              disabled={!image}
-              color="default"
-              className={classes.button}
-              onClick={increaseHeight}
-            >
-              <ZoomInIcon className={classes.light} />
-            </Button>
-          </div>
-        </Tooltip>
-        <Tooltip title="zoom out">
-          <div>
-            <Button
-              disabled={!image}
-              color="default"
-              className={classes.button}
-              onClick={decreaseHeight}
-            >
-              <ZoomOutIcon className={classes.light} />
-            </Button>
-          </div>
-        </Tooltip>
-      </div>
       <div className="main-header-buttons">
         <Tooltip title="remove image">
           <div>
@@ -120,32 +93,23 @@ const MainContainerHeader = (props) => {
             </Button>
           </div>
         </Tooltip>
-        <div>
-          <Button color="default" className={classes.button} onClick={() => collapseColumn()}>
-            {rightColumnOpen ? (
-              <KeyboardArrowRightIcon className={classes.light} />
-            ) : (
-              <KeyboardArrowLeftIcon className={classes.light} />
-            )}
-          </Button>
-        </div>
       </div>
     </div>
   );
 };
 
-MainContainerHeader.propTypes = {
-  image: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
-  classes: PropTypes.object.isRequired,
-  increaseHeight: PropTypes.func.isRequired,
-  decreaseHeight: PropTypes.func.isRequired,
-  showImageDeleteModal: PropTypes.func.isRequired,
-  updateImage: PropTypes.func.isRequired,
-  showGenerateAppModal: PropTypes.func.isRequired,
-  totalComponents: PropTypes.number.isRequired,
-  collapseColumn: PropTypes.func.isRequired,
-  rightColumnOpen: PropTypes.bool.isRequired,
-  toggleClass: PropTypes.bool.isRequired,
-};
+// MainContainerHeader.propTypes = {
+//   image: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
+//   classes: PropTypes.object.isRequired,
+//   increaseHeight: PropTypes.func.isRequired,
+//   decreaseHeight: PropTypes.func.isRequired,
+//   showImageDeleteModal: PropTypes.func.isRequired,
+//   updateImage: PropTypes.func.isRequired,
+//   showGenerateAppModal: PropTypes.func.isRequired,
+//   totalComponents: PropTypes.number.isRequired,
+//   collapseColumn: PropTypes.func.isRequired,
+//   rightColumnOpen: PropTypes.bool.isRequired,
+//   toggleClass: PropTypes.bool.isRequired,
+// };
 
 export default withStyles(styles)(MainContainerHeader);

src/components/SimpleModal.jsx

@@ -86,16 +86,16 @@ const SimpleModal = (props) => {
   );
 };
 
-SimpleModal.propTypes = {
-  open: PropTypes.bool.isRequired,
-  classes: PropTypes.object.isRequired,
-  secBtnAction: PropTypes.func,
-  closeModal: PropTypes.func.isRequired,
-  primBtnAction: PropTypes.func,
-  children: PropTypes.object,
-  message: PropTypes.string,
-  primBtnLabel: PropTypes.string,
-  secBtnLabel: PropTypes.string,
-};
+// SimpleModal.propTypes = {
+//   open: PropTypes.bool.isRequired,
+//   classes: PropTypes.object.isRequired,
+//   secBtnAction: PropTypes.func,
+//   closeModal: PropTypes.func.isRequired,
+//   primBtnAction: PropTypes.func,
+//   children: PropTypes.object,
+//   message: PropTypes.string,
+//   primBtnLabel: PropTypes.string,
+//   secBtnLabel: PropTypes.string,
+// };
 
 export default withStyles(styles)(SimpleModal);

src/containers/LeftContainer.jsx

@@ -138,6 +138,7 @@ class LeftContainer extends Component {
         />
       ));
 
+
     return (
       <div className="column left">
         <Grid container spacing={16} alignItems="baseline" align="stretch">