merged from styling changes with export working

src/actions/components.js

@@ -145,6 +145,7 @@ export const changeComponentFocusChild = ({ componentId, childId }) => (dispatch
 };
 
 export const exportFiles = ({ components, path }) => (dispatch) => {
+  // this dispatch sets the global state property 'loading' to true until the createFiles call resolves below
   dispatch({
     type: EXPORT_FILES,
   });
@@ -183,7 +184,7 @@ export const createApplication = ({
   path,
   components = [],
   genOption,
-  appName = 'proto_app',
+  appName = 'reactype_app',
   repoUrl,
 }) => (dispatch) => {
   if (genOption === 0) {

src/components/HTMLComponentPanel.jsx

@@ -1,33 +1,33 @@
-import React, { Component } from "react";
-import { connect } from "react-redux";
-import { compose } from "redux";
-import { withStyles } from "@material-ui/core/styles";
-import TextField from "@material-ui/core/TextField";
-import IconButton from "@material-ui/core/IconButton";
-import ImageIcon from "@material-ui/icons/Image";
-import FormIcon from "@material-ui/icons/Description";
-import ButtonIcon from "@material-ui/icons/EditAttributes";
-import LinkIcon from "@material-ui/icons/Link";
-import ListIcon from "@material-ui/icons/List";
-import ParagraphIcon from "@material-ui/icons/LocalParking";
-import theme from "../components/theme.ts";
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { compose } from 'redux';
+import { withStyles } from '@material-ui/core/styles';
+import TextField from '@material-ui/core/TextField';
+import IconButton from '@material-ui/core/IconButton';
+import ImageIcon from '@material-ui/icons/Image';
+import FormIcon from '@material-ui/icons/Description';
+import ButtonIcon from '@material-ui/icons/EditAttributes';
+import LinkIcon from '@material-ui/icons/Link';
+import ListIcon from '@material-ui/icons/List';
+import ParagraphIcon from '@material-ui/icons/LocalParking';
 import Typography from '@material-ui/core/Typography';
-import Grid from "@material-ui/core/Grid";
-import Paper from "@material-ui/core/Paper";
+import Grid from '@material-ui/core/Grid';
+import Paper from '@material-ui/core/Paper';
+import theme from './theme.ts';
 // import {HTMLelements,getSize} from "../utils/htmlElements.util";
 
 class HTMLComponentPanel extends Component {
   state = {
-    HtmlComponentName: ""
+    HtmlComponentName: '',
   };
 
-  handleChange = event => {
+  handleChange = (event) => {
     this.setState({
-      HtmlComponentName: event.target.value
+      HtmlComponentName: event.target.value,
     });
   };
 
-  handleCreateHTMLChild = type => {
+  handleCreateHTMLChild = (type) => {
     this.props.addChild({ title: type, childType: type, HTMLInfo: {} });
   };
 
@@ -60,7 +60,7 @@ class HTMLComponentPanel extends Component {
             <IconButton
               aria-label="Image"
               onClick={() => {
-                this.handleCreateHTMLChild("Image");
+                this.handleCreateHTMLChild('Image');
               }}
 
               // onClick={() => {
@@ -75,7 +75,7 @@ class HTMLComponentPanel extends Component {
             <IconButton
               aria-label="Form"
               onClick={() => {
-                this.handleCreateHTMLChild("Form");
+                this.handleCreateHTMLChild('Form');
               }}
             >
               <FormIcon />
@@ -85,7 +85,7 @@ class HTMLComponentPanel extends Component {
             <IconButton
               aria-label="Button"
               onClick={() => {
-                this.handleCreateHTMLChild("Button");
+                this.handleCreateHTMLChild('Button');
               }}
             >
               <ButtonIcon />
@@ -95,7 +95,7 @@ class HTMLComponentPanel extends Component {
             <IconButton
               aria-label="Link"
               onClick={() => {
-                this.handleCreateHTMLChild("Link");
+                this.handleCreateHTMLChild('Link');
               }}
             >
               <LinkIcon />
@@ -105,7 +105,7 @@ class HTMLComponentPanel extends Component {
             <IconButton
               aria-label="List"
               onClick={() => {
-                this.handleCreateHTMLChild("List");
+                this.handleCreateHTMLChild('List');
               }}
             >
               <ListIcon />
@@ -115,7 +115,7 @@ class HTMLComponentPanel extends Component {
             <IconButton
               aria-label="Paragraph"
               onClick={() => {
-                this.handleCreateHTMLChild("Paragraph");
+                this.handleCreateHTMLChild('Paragraph');
               }}
             >
               <ParagraphIcon />
@@ -130,20 +130,20 @@ class HTMLComponentPanel extends Component {
 function styles(theme) {
   return {
     htmlPanel: {
-      width: "100%",
-      height: "33%",
+      width: '100%',
+      height: '33%',
       // flexGrow: 1,
-      backgroundColor: "#333333",
+      backgroundColor: '#333333',
       // position: "absolute",
       // marginTop: 10,
-      bottom: "0px"
+      bottom: '0px',
       // // marginRight: "20px",
       // // marginLeft: "20px",
       // // marginBottom: "20px",
       // bottom: "0px",
       // left: "0px",
       // right: "0px"
-    }
+    },
   };
 }
 

src/containers/AppContainer.tsx

@@ -5,7 +5,7 @@ import { MuiThemeProvider } from '@material-ui/core/styles';
 import LinearProgress from '@material-ui/core/LinearProgress';
 import LeftContainer from './LeftContainer.jsx';
 import MainContainer from './MainContainer.jsx';
-import RightContainer from './RightContainer.jsx';
+// import RightContainer from './RightContainer.jsx';
 import convertIdsToObjs from '../utils/convertIdsToObjs.util';
 import theme from '../components/theme.ts';
 import { loadInitData } from '../actions/components';

src/containers/MainContainer.jsx

@@ -323,4 +323,4 @@ class MainContainer extends Component {
 export default connect(
   mapStateToProps,
   mapDispatchToProps,
-)(MainContainer);
+)(MainContainer);

src/utils/createApplication.util.js

@@ -27,32 +27,34 @@ function createIndexHtml() {
   </body>
   </html>
   `;
-  fs.writeFile(fileName, format(data, {
-    singleQuote: true,
-    trailingComma: 'es5',
-    bracketSpacing: true,
-    jsxBracketSameLine: true,
-    parser: 'babel',
-  }),
-  (err) => {
-    if (err) {
-      console.log('index.html error:', err.message);
-    } else {
-      console.log('index.html written successfully');
-    }
-  });
+  fs.writeFile(
+    fileName,
+    format(data, {
+      singleQuote: true,
+      trailingComma: 'es5',
+      bracketSpacing: true,
+      jsxBracketSameLine: true,
+      parser: 'babel',
+    }),
+    (err) => {
+      if (err) {
+        console.log('index.html error:', err.message);
+      } else {
+        console.log('index.html written successfully');
+      }
+    },
+  );
 }
 
-async function createApplicationUtil({path, appName, genOption, repoUrl}) {
+async function createApplicationUtil({
+  path, appName, genOption, repoUrl,
+}) {
   if (genOption === 1) {
     await createIndexHtml();
   }
 }
 export default createApplicationUtil;
 
-
-
-
 // async function createApplicationUtil({
 //   path, appName, genOption, repoUrl,
 // }) {
@@ -65,15 +67,9 @@ export default createApplicationUtil;
 //       await execFile('touch', '.babelrc', { cwd: path }),
 //     ];
 //   }
-  // return repoUrl ? execFile('git', ['clone', repoUrl, appName], { cwd: path }) : null;
+// return repoUrl ? execFile('git', ['clone', repoUrl, appName], { cwd: path }) : null;
 // }
 
-
-
-
-
-
-
 // import util from 'util';
 
 // const execFile = util.promisify(require('child_process').execFile);
@@ -83,7 +79,6 @@ export default createApplicationUtil;
 //   'Export into existing project.', 'Export with starter repo', 'Export with create-react-app.'
 // ];
 
-
 // async function createApplicationUtil({
 //   path, appName, genOption, repoUrl,
 // }) {
@@ -96,4 +91,4 @@ export default createApplicationUtil;
 //   return repoUrl ? execFile('git', ['clone', repoUrl, appName], { cwd: path }) : null;
 // }
 
-// export default createApplicationUtil;
+// export default createApplicationUtil;

src/utils/createFiles.util.js

@@ -16,7 +16,8 @@ const createFiles = (data, path) => {
   const promises = [];
   data.forEach((component) => {
     const newPromise = new Promise((resolve, reject) => {
-      fs.writeFile(`${dir}/${component.title}.tsx`,
+      fs.writeFile(
+        `${dir}/${component.title}.tsx`,
         format(componentRender(component, data), {
           singleQuote: true,
           trailingComma: 'es5',
@@ -27,7 +28,8 @@ const createFiles = (data, path) => {
         (err) => {
           if (err) return reject(err.message);
           return resolve(path);
-        });
+        },
+      );
     });
 
     promises.push(newPromise);