From ff9d52e3e03d706a1f9f91b6505e85d0c884c824 Mon Sep 17 00:00:00 2001
From: ChristianEdwardPadilla <christianepadilla@gmail.com>
Date: Thu, 9 May 2019 20:58:05 -0400
Subject: [PATCH 1/5] no changes

---
 src/components/Props.tsx | 193 +++++++++++++++++++--------------------
 1 file changed, 95 insertions(+), 98 deletions(-)

diff --git a/src/components/Props.tsx b/src/components/Props.tsx
index 6f3749b0f..67d8e4e8b 100644
--- a/src/components/Props.tsx
+++ b/src/components/Props.tsx
@@ -1,16 +1,16 @@
-import React, { Component, Fragment } from "react";
-import { connect } from "react-redux";
-import { withStyles } from "@material-ui/core/styles";
-import FormControl from "@material-ui/core/FormControl";
-import Grid from "@material-ui/core/Grid";
-import TextField from "@material-ui/core/TextField";
-import Button from "@material-ui/core/Button";
-import Select from "@material-ui/core/Select";
-import Switch from "@material-ui/core/Switch";
-import InputLabel from "@material-ui/core/InputLabel";
-import { addProp, deleteProp } from "../actions/components.ts";
-import DataTable from "./DataTable.tsx";
-import { ComponentInt } from "../utils/interfaces";
+import React, { Component, Fragment } from 'react';
+import { connect } from 'react-redux';
+import { withStyles } from '@material-ui/core/styles';
+import FormControl from '@material-ui/core/FormControl';
+import Grid from '@material-ui/core/Grid';
+import TextField from '@material-ui/core/TextField';
+import Button from '@material-ui/core/Button';
+import Select from '@material-ui/core/Select';
+import Switch from '@material-ui/core/Switch';
+import InputLabel from '@material-ui/core/InputLabel';
+import { addProp, deleteProp } from '../actions/components.ts';
+import DataTable from './DataTable.tsx';
+import { ComponentInt } from '../utils/interfaces';
 
 interface PropInt {
   addProp: any;
@@ -21,48 +21,48 @@ interface PropInt {
 
 const styles = (theme: any): any => ({
   root: {
-    display: "flex",
-    justifyContent: "center",
-    flexWrap: "wrap"
+    display: 'flex',
+    justifyContent: 'center',
+    flexWrap: 'wrap',
   },
   chip: {
-    color: "#eee",
-    backgroundColor: "#333333"
+    color: '#eee',
+    backgroundColor: '#333333',
   },
   column: {
-    display: "inline-flex",
-    alignItems: "baseline"
+    display: 'inline-flex',
+    alignItems: 'baseline',
   },
   icon: {
-    fontSize: "20px",
-    color: "#eee",
-    opacity: "0.7",
-    transition: "all .2s ease",
+    fontSize: '20px',
+    color: '#eee',
+    opacity: '0.7',
+    transition: 'all .2s ease',
 
-    "&:hover": {
-      color: "red"
-    }
+    '&:hover': {
+      color: 'red',
+    },
   },
   cssLabel: {
-    color: "white",
+    color: 'white',
 
-    "&$cssFocused": {
-      color: "green"
-    }
+    '&$cssFocused': {
+      color: 'green',
+    },
   },
   cssFocused: {},
   input: {
-    color: "#eee",
-    marginBottom: "10px",
-    width: "60%"
+    color: '#eee',
+    marginBottom: '10px',
+    width: '60%',
   },
   light: {
-    color: "#eee"
+    color: '#eee',
   },
   avatar: {
-    color: "#eee",
-    fontSize: "10px"
-  }
+    color: '#eee',
+    fontSize: '10px',
+  },
 });
 
 const mapDispatchToProps = (dispatch: any) => ({
@@ -70,76 +70,77 @@ const mapDispatchToProps = (dispatch: any) => ({
     key,
     value,
     required,
-    type
+    type,
   }: {
-    key: string;
-    value: string;
-    required: boolean;
-    type: string;
-  }) =>
-    dispatch(
-      addProp({
-        key,
-        value,
-        required,
-        type
-      })
-    ),
-  deleteProp: (propId: number) => dispatch(deleteProp(propId))
+  key: string;
+  value: string;
+  required: boolean;
+  type: string;
+  }) => dispatch(
+    addProp({
+      key,
+      value,
+      required,
+      type,
+    }),
+  ),
+  deleteProp: (propId: number) => dispatch(deleteProp(propId)),
 });
 
 const mapStateToProps = (store: any) => ({
-  focusComponent: store.workspace.focusComponent
+  focusComponent: store.workspace.focusComponent,
 });
 
 const availablePropTypes = {
-  string: "STR",
-  number: "NUM",
-  object: "OBJ",
-  array: "ARR",
-  boolean: "BOOL",
-  function: "FUNC",
+  string: 'STR',
+  number: 'NUM',
+  object: 'OBJ',
+  array: 'ARR',
+  boolean: 'BOOL',
+  function: 'FUNC',
   // symbol: 'SYM',
-  node: "NODE",
-  element: "ELEM",
-  any: "ANY",
-  tuple: "TUP",
-  enum: "ENUM"
+  node: 'NODE',
+  element: 'ELEM',
+  any: 'ANY',
+  tuple: 'TUP',
+  enum: 'ENUM',
 };
 
 const typeOptions = [
   <option value="" key="" />,
   ...Object.keys(availablePropTypes).map(type => (
-    <option value={type} key={type} style={{ color: "#000" }}>
+    <option value={type} key={type} style={{ color: '#000' }}>
       {type}
     </option>
-  ))
+  )),
 ];
 
 class Props extends Component<PropInt> {
   state = {
-    propKey: "",
-    propValue: "",
+    propKey: '',
+    propValue: '',
     propRequired: true,
-    propType: ""
+    propType: '',
   };
 
   handleChange = (event: any) => {
     this.setState({
-      [event.target.id]: event.target.value.trim()
+      [event.target.id]: event.target.value.trim(),
     });
   };
 
   togglePropRequired = () => {
     this.setState({
-      propRequired: !this.state.propRequired
+      propRequired: !this.state.propRequired,
     });
   };
 
   handleAddProp = (event: any) => {
     event.preventDefault();
 
-    const { propKey, propValue, propRequired, propType } = this.state;
+    const {
+      propKey, propValue, propRequired, propType,
+    } = this.state;
 
     // check if prop exists with same key. CANNOT have duplicates
     const savedPropKeys = this.props.focusComponent.props.map(p => p.key);
@@ -150,7 +151,7 @@ class Props extends Component<PropInt> {
 
     // check if prop starts with digits. Digits at string start breaks indexedDB
     if (/^\d/.test(propKey)) {
-      window.alert("Props are not allowed to begin with digits");
+      window.alert('Props are not allowed to begin with digits');
       return;
     }
 
@@ -158,42 +159,44 @@ class Props extends Component<PropInt> {
       key: propKey,
       value: propValue,
       required: propRequired,
-      type: propType
+      type: propType,
     });
 
     this.setState({
-      propKey: "",
-      propValue: "",
+      propKey: '',
+      propValue: '',
       propRequired: true,
-      propType: ""
+      propType: '',
     });
   };
 
   render() {
-    const { focusComponent, classes, deleteProp, addProp } = this.props;
+    const {
+      focusComponent, classes, deleteProp, addProp,
+    } = this.props;
 
-    const rowHeader = ["_Key", "Value", "Type", "Required"];
+    const rowHeader = ['_Key', 'Value', 'Type', 'Required'];
     // prepare the saved Props in a nice way, so you can sent them to TableData
     const propsRows = focusComponent.props.map(prop => ({
       _Key: prop.key,
       Value: prop.value,
       Type: prop.type,
       Required: prop.required,
-      id: prop.id
+      id: prop.id,
     }));
 
     return (
-      <div className={"htmlattr"}>
-        {" "}
+      <div className={'htmlattr'}>
+        {' '}
         {Object.keys(focusComponent).length < 1 ? (
-          <div style={{ marginTop: "20px", width: "90%" }}>
+          <div style={{ marginTop: '20px', width: '90%' }}>
             Click a component to view its props.
           </div>
         ) : (
           <Fragment>
             <div
               className="props-container"
-              style={{ marginTop: "20px", width: "90%", height: "80%" }}
+              style={{ marginTop: '20px', width: '90%', height: '80%' }}
             >
               <Grid container spacing={8}>
                 <Grid item xs={4}>
@@ -209,10 +212,10 @@ class Props extends Component<PropInt> {
                           value={this.state.propKey}
                           required
                           InputProps={{
-                            className: classes.input
+                            className: classes.input,
                           }}
                           InputLabelProps={{
-                            className: classes.input
+                            className: classes.input,
                           }}
                         />
                       </Grid>
@@ -223,20 +226,17 @@ class Props extends Component<PropInt> {
                           margin="normal"
                           onChange={this.handleChange}
                           InputProps={{
-                            className: classes.input
+                            className: classes.input,
                           }}
                           InputLabelProps={{
-                            className: classes.input
+                            className: classes.input,
                           }}
                           value={this.state.propValue}
                         />
                       </Grid>
                       <Grid item xs={6}>
                         <FormControl required>
-                          <InputLabel
-                            className={classes.light}
-                            htmlFor="propType"
-                          >
+                          <InputLabel className={classes.light} htmlFor="propType">
                             Type
                           </InputLabel>
                           <Select
@@ -254,10 +254,7 @@ class Props extends Component<PropInt> {
                       </Grid>
                       <Grid item xs={6}>
                         <div className={classes.column}>
-                          <InputLabel
-                            className={classes.light}
-                            htmlFor="propRequired"
-                          >
+                          <InputLabel className={classes.light} htmlFor="propRequired">
                             Required?
                           </InputLabel>
                           <Switch
@@ -302,5 +299,5 @@ class Props extends Component<PropInt> {
 
 export default connect(
   mapStateToProps,
-  mapDispatchToProps
+  mapDispatchToProps,
 )(withStyles(styles)(Props));

From 93d6cb23926e81b21832b7594fed12d762391fbb Mon Sep 17 00:00:00 2001
From: tolgamizrakci <tolgamizrakci@gmail.com>
Date: Thu, 9 May 2019 18:03:46 -0400
Subject: [PATCH 2/5] data table margin fix

---
 main.js                                   | 165 +++++++++--------
 src/components/DataTable.tsx              |   6 +-
 src/components/HtmlAttr.jsx               | 129 -------------
 src/components/Props.tsx                  |   3 +-
 src/components/TransformerComponent.tsx   |   5 -
 src/components/XXXMainContainerHeader.jsx | 104 -----------
 src/components/XXXSortChildren.jsx        | 158 ----------------
 src/components/XXXTree.jsx                | 211 ----------------------
 src/public/styles/style.css               |   3 +-
 9 files changed, 94 insertions(+), 690 deletions(-)
 delete mode 100644 src/components/HtmlAttr.jsx
 delete mode 100644 src/components/XXXMainContainerHeader.jsx
 delete mode 100644 src/components/XXXSortChildren.jsx
 delete mode 100644 src/components/XXXTree.jsx

diff --git a/main.js b/main.js
index ac6c5e918..59b8ac948 100644
--- a/main.js
+++ b/main.js
@@ -1,12 +1,18 @@
 const {
-  app, BrowserWindow, Menu, shell, dialog, ipcMain,
-} = require('electron');
+  app,
+  BrowserWindow,
+  Menu,
+  shell,
+  dialog,
+  ipcMain
+} = require("electron");
 
 // Uncomment below for hot reloading during development
-require('electron-reload')(__dirname);
+require("electron-reload")(__dirname);
 
 // const isDev = true;
-const isDev = process.env.NODE_ENV === 'development' || process.env.NODE_ENV === 'test';
+const isDev =
+  process.env.NODE_ENV === "development" || process.env.NODE_ENV === "test";
 
 // Keep a global reference of the window object, if you don't, the window will
 // be closed automatically when the JavaScript object is garbage collected.
@@ -16,13 +22,13 @@ let mainWindow;
 function openFile() {
   // Opens file dialog looking for markdown
   const files = dialog.showOpenDialog(mainWindow, {
-    properties: ['openFile'],
+    properties: ["openFile"],
     filters: [
       {
-        name: 'Images',
-        extensions: ['jpeg', 'jpg', 'png', 'gif', 'pdf'],
-      },
-    ],
+        name: "Images",
+        extensions: ["jpeg", "jpg", "png", "gif", "pdf"]
+      }
+    ]
   });
 
   // if no files
@@ -30,62 +36,62 @@ function openFile() {
   const file = files[0];
 
   // Send fileContent to renderer
-  mainWindow.webContents.send('new-file', file);
+  mainWindow.webContents.send("new-file", file);
 }
 
 // Choose directory
-ipcMain.on('choose_app_dir', (event) => {
+ipcMain.on("choose_app_dir", event => {
   const directory = dialog.showOpenDialog(mainWindow, {
-    properties: ['openDirectory'],
-    buttonLabel: 'Export',
+    properties: ["openDirectory"],
+    buttonLabel: "Export"
   });
 
   if (!directory) return;
-  event.sender.send('app_dir_selected', directory[0]);
+  event.sender.send("app_dir_selected", directory[0]);
 });
 
-ipcMain.on('view_app_dir', (event, appDir) => {
+ipcMain.on("view_app_dir", (event, appDir) => {
   shell.openItem(appDir);
 });
 
 // Update file
-ipcMain.on('update-file', () => {
+ipcMain.on("update-file", () => {
   openFile();
 });
 
 const createWindow = () => {
   // Create the browser window.
   // eslint-disable-next-line
-  const { width, height } = require('electron').screen.getPrimaryDisplay().size;
+  const { width, height } = require("electron").screen.getPrimaryDisplay().size;
   mainWindow = new BrowserWindow({
     width,
     height,
     webPreferences: {
-      zoomFactor: 0.9,
-      'node-Integration': false,
+      zoomFactor: 0.7,
+      "node-Integration": false
     },
-    show: false,
+    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.once("ready-to-show", () => {
     mainWindow.show();
   });
 
   const template = [
     {
-      label: 'File',
+      label: "File",
       submenu: [
         {
-          label: 'Open File',
-          accelerator: process.platform === 'darwin' ? 'Cmd+O' : 'Ctrl+Shift+O',
+          label: "Open File",
+          accelerator: process.platform === "darwin" ? "Cmd+O" : "Ctrl+Shift+O",
           click() {
             openFile();
-          },
-        },
-      ],
+          }
+        }
+      ]
     },
     // {
     //   label: 'Edit',
@@ -102,81 +108,82 @@ const createWindow = () => {
     //   ],
     // },
     {
-      label: 'View',
+      label: "View",
       submenu: [
-        { role: 'reload' },
-        { role: 'forcereload' },
-        { type: 'separator' },
-        { role: 'resetzoom' },
-        { role: 'zoomin' },
-        { role: 'zoomout' },
-        { type: 'separator' },
-        { role: 'togglefullscreen' },
-      ],
+        { role: "reload" },
+        { role: "forcereload" },
+        { type: "separator" },
+        { role: "resetzoom" },
+        { role: "zoomin" },
+        { role: "zoomout" },
+        { type: "separator" },
+        { role: "togglefullscreen" }
+      ]
     },
     {
-      role: 'window',
-      submenu: [{ role: 'minimize' }, { role: 'close' }],
+      role: "window",
+      submenu: [{ role: "minimize" }, { role: "close" }]
     },
     {
-      role: 'help',
+      role: "help",
       submenu: [
         {
-          label: 'Learn More',
+          label: "Learn More",
           click() {
-            shell.openExternal('https://electronjs.org');
-          },
-        },
-      ],
+            shell.openExternal("https://electronjs.org");
+          }
+        }
+      ]
     },
     {
-      label: 'Developer',
+      label: "Developer",
       submenu: [
         {
-          label: 'Toggle Developer Tools',
-          accelerator: process.platform === 'darwin' ? 'Alt+Command+I' : 'Ctrl+Shift+I',
+          label: "Toggle Developer Tools",
+          accelerator:
+            process.platform === "darwin" ? "Alt+Command+I" : "Ctrl+Shift+I",
           click() {
             mainWindow.webContents.toggleDevTools();
-          },
-        },
-      ],
-    },
+          }
+        }
+      ]
+    }
   ];
 
-  if (process.platform === 'darwin') {
+  if (process.platform === "darwin") {
     template.unshift({
       label: app.getName(),
       submenu: [
-        { role: 'about' },
-        { type: 'separator' },
-        { role: 'services', submenu: [] },
-        { type: 'separator' },
-        { role: 'hide' },
-        { role: 'hideothers' },
-        { role: 'unhide' },
-        { type: 'separator' },
-        { role: 'quit' },
-      ],
+        { role: "about" },
+        { type: "separator" },
+        { role: "services", submenu: [] },
+        { type: "separator" },
+        { role: "hide" },
+        { role: "hideothers" },
+        { role: "unhide" },
+        { type: "separator" },
+        { role: "quit" }
+      ]
     });
 
     // Edit menu
     template[2].submenu.push(
       {
-        type: 'separator',
+        type: "separator"
       },
       {
-        label: 'Speech',
-        submenu: [{ role: 'startspeaking' }, { role: 'stopspeaking' }],
-      },
+        label: "Speech",
+        submenu: [{ role: "startspeaking" }, { role: "stopspeaking" }]
+      }
     );
 
     // Window menu
     template[4].submenu = [
-      { role: 'close' },
-      { role: 'minimize' },
-      { role: 'zoom' },
-      { type: 'separator' },
-      { role: 'front' },
+      { role: "close" },
+      { role: "minimize" },
+      { role: "zoom" },
+      { type: "separator" },
+      { role: "front" }
     ];
   }
 
@@ -184,7 +191,7 @@ const createWindow = () => {
   Menu.setApplicationMenu(menu);
 
   // Emitted when the window is closed.
-  mainWindow.on('closed', () => {
+  mainWindow.on("closed", () => {
     // Dereference the window object, usually you would store windows
     // in an array if your app supports multi windows, this is the time
     // when you should delete the corresponding element.
@@ -195,13 +202,13 @@ const createWindow = () => {
 // This method will be called when Electron has finished
 // initialization and is ready to create browser windows.
 // Some APIs can only be used after this event occurs.
-app.on('ready', () => {
+app.on("ready", () => {
   if (isDev) {
     const {
       default: installExtension,
       REACT_DEVELOPER_TOOLS,
-      REDUX_DEVTOOLS,
-    } = require('electron-devtools-installer');
+      REDUX_DEVTOOLS
+    } = require("electron-devtools-installer");
 
     installExtension([REACT_DEVELOPER_TOOLS, REDUX_DEVTOOLS])
       .then(() => {
@@ -214,15 +221,15 @@ app.on('ready', () => {
 });
 
 // Quit when all windows are closed.
-app.on('window-all-closed', () => {
+app.on("window-all-closed", () => {
   // On OS X it is common for applications and their menu bar
   // to stay active until the user quits explicitly with Cmd + Q
-  if (process.platform !== 'darwin') {
+  if (process.platform !== "darwin") {
     app.quit();
   }
 });
 
-app.on('activate', () => {
+app.on("activate", () => {
   // On OS X it's common to re-create a window in the app when the
   // dock icon is clicked and there are no other windows open.
   if (mainWindow === null) {
diff --git a/src/components/DataTable.tsx b/src/components/DataTable.tsx
index d5fbc8bfc..b9be8c428 100644
--- a/src/components/DataTable.tsx
+++ b/src/components/DataTable.tsx
@@ -14,11 +14,13 @@ import { IconButton } from "@material-ui/core";
 const styles = (theme: any) => ({
   root: {
     width: "80%",
-    marginTop: theme.spacing.unit * 3
+    marginTop: theme.spacing.unit * 3,
+    marginRight: "100px"
     // overflowX: "auto"
   },
   table: {
-    minWidth: 500
+    minWidth: 500,
+    marginRight: "100px"
   }
 });
 
diff --git a/src/components/HtmlAttr.jsx b/src/components/HtmlAttr.jsx
deleted file mode 100644
index d3faa849f..000000000
--- a/src/components/HtmlAttr.jsx
+++ /dev/null
@@ -1,129 +0,0 @@
-import React, { Component, Fragment } from 'react';
-import { connect } from 'react-redux';
-import { withStyles } from '@material-ui/core/styles';
-import Grid from '@material-ui/core/Grid';
-import TextField from '@material-ui/core/TextField';
-import IconButton from '@material-ui/core/IconButton';
-import Typography from '@material-ui/core/Typography';
-import SaveIcon from '@material-ui/icons/Save';
-import Paper from '@material-ui/core/Paper';
-import Fab from '@material-ui/core/Fab';
-import { updateHtmlAttr } from '../actions/components.ts';
-import { HTMLelements, getSize } from '../utils/htmlElements.util.ts';
-
-const styles = theme => ({
-  root: {
-    display: 'flex',
-    justifyContent: 'center',
-    flexWrap: 'wrap',
-  },
-  cssLabel: {
-    color: 'white',
-  },
-  cssFocused: {
-    color: 'green',
-  },
-  input: {
-    color: '#fff',
-    opacity: '0.7',
-    marginBottom: '17px',
-  },
-});
-
-const mapDispatchToProps = dispatch => ({
-  updateHtmlAttr: ({ attr, value }) => dispatch(updateHtmlAttr({ attr, value })),
-});
-
-const mapStateToProps = store => ({
-  focusComponent: store.workspace.focusComponent,
-  focusChild: store.workspace.focusChild,
-});
-
-class HtmlAttr extends Component {
-  state = HTMLelements[this.props.focusChild.htmlElement].attributes.reduce((acc, attr) => {
-    acc[attr] = '';
-    return acc;
-  }, {});
-
-  handleSave = (attr) => {
-    this.props.updateHtmlAttr({ attr, value: this.state[attr] });
-    this.setState({
-      [attr]: '',
-    });
-  };
-
-  handleChange = (event) => {
-    this.setState({
-      [event.target.id]: event.target.value.trim(),
-    });
-  };
-
-  render() {
-    const {
-      focusComponent, classes, deleteProp, addProp, focusChild, updateHtmlAttr,
-    } = this.props;
-
-    const focusChildType = focusChild.htmlElement;
-
-    const HtmlForm = HTMLelements[focusChildType].attributes.map((attr, i) => (
-      <Grid container spacing={0} key={i} style={{ marginTop: '10px', marginRight: '20px' }}>
-        <Grid item xs={2}>
-          <TextField
-            InputLabelProps={{
-              classes: {
-                root: classes.cssLabel,
-                focused: classes.cssFocused,
-                input: classes.input,
-              },
-            }}
-            InputProps={{
-              classes: {
-                root: classes.cssOutlinedInput,
-                focused: classes.cssFocused,
-                notchedOutline: classes.notchedOutline,
-                input: classes.input,
-              },
-            }}
-            style={{ background: '#424242', height: '70%' }}
-            label={attr}
-            variant="outlined"
-            id={attr}
-            onChange={this.handleChange}
-            value={this.state[attr]}
-          />
-        </Grid>
-        <Grid item xs={1}>
-          <Fab
-            variant="extended"
-            size="small"
-            color="default"
-            aria-label="Save"
-            style={{
-              marginLeft: '10px',
-              marginTop: '5px',
-              marginBottom: '10px',
-            }}
-            onClick={() => this.handleSave(attr)}
-          >
-            <SaveIcon />
-            Save
-          </Fab>
-        </Grid>
-        <Grid item xs={4}>
-          <Paper className={classes.root} style={{ height: '70%' }}>
-            <p style={{ color: 'black' }}>
-              {focusChild.HTMLInfo[attr] ? focusChild.HTMLInfo[attr] : ' no attribute assigned'}
-            </p>
-          </Paper>
-        </Grid>
-      </Grid>
-    ));
-
-    return <div className={'htmlattr'}>{HtmlForm}</div>;
-  }
-}
-
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps,
-)(withStyles(styles)(HtmlAttr));
diff --git a/src/components/Props.tsx b/src/components/Props.tsx
index 2373b4ee5..0da490440 100644
--- a/src/components/Props.tsx
+++ b/src/components/Props.tsx
@@ -201,7 +201,7 @@ class Props extends Component<PropInt> {
               style={{ marginTop: "20px", width: "90%", height: "80%" }}
             >
               <Grid container spacing={8}>
-                <Grid item xs={4}>
+                <Grid item xs={3}>
                   <form className="props-input" onSubmit={this.handleAddProp}>
                     <Grid container spacing={8}>
                       <Grid item xs={6}>
@@ -296,6 +296,7 @@ class Props extends Component<PropInt> {
                     deletePropHandler={deleteProp}
                   />
                 </Grid>
+                <Grid item xs={1} />
               </Grid>
               {/* <div className="chips">
               {focusComponent.props.map(({
diff --git a/src/components/TransformerComponent.tsx b/src/components/TransformerComponent.tsx
index 0dc96efa6..ed7f92a79 100644
--- a/src/components/TransformerComponent.tsx
+++ b/src/components/TransformerComponent.tsx
@@ -1,6 +1,5 @@
 import React, { Component } from "react";
 import { Transformer } from "react-konva";
-// import PropTypes from 'prop-types';
 import { ComponentInt, ComponentsInt, ChildInt } from "../utils/interfaces";
 
 interface PropsInt {
@@ -52,7 +51,3 @@ export default class TransformerComponent extends Component<PropsInt> {
     );
   }
 }
-
-// TransformerComponent.propTypes = {
-//   focusComponent: PropTypes.object,
-// };
diff --git a/src/components/XXXMainContainerHeader.jsx b/src/components/XXXMainContainerHeader.jsx
deleted file mode 100644
index 93a096c27..000000000
--- a/src/components/XXXMainContainerHeader.jsx
+++ /dev/null
@@ -1,104 +0,0 @@
-import React from 'react';
-// 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';
-import ImageSearchIcon from '@material-ui/icons/ImageSearch';
-import OpenWithIcon from '@material-ui/icons/OpenWith';
-import KeyboardArrowLeftIcon from '@material-ui/icons/KeyboardArrowLeft';
-import KeyboardArrowRightIcon from '@material-ui/icons/KeyboardArrowRight';
-import DeleteOutlineIcon from '@material-ui/icons/DeleteOutline';
-import GetAppIcon from '@material-ui/icons/GetApp';
-import { withStyles } from '@material-ui/core/styles';
-import Tooltip from '@material-ui/core/Tooltip';
-
-const styles = () => ({
-  iconSmall: {
-    fontSize: 10,
-  },
-  button: {
-    // borderRight: '1px solid grey',
-    borderRadius: '0px',
-    backgroundColor: '#212121',
-
-    '&:hover > span > svg': {
-      color: '#1de9b6',
-      transition: 'all .2s ease',
-    },
-    '&:hover': {
-      backgroundColor: '#212121',
-    },
-    '&:disabled': {
-      backgroundColor: '#424242',
-    },
-
-    '&:disabled > span > svg': {
-      color: '#eee',
-      opacity: '0.3',
-    },
-  },
-  light: {
-    color: '#eee',
-    // opacity: '0.7',
-  },
-  dark: {
-    color: '#1de9b6',
-  },
-});
-
-const MainContainerHeader = (props) => {
-  const {
-    classes,
-    image,
-    // showImageDeleteModal,
-    updateImage,
-    totalComponents,
-    showGenerateAppModal,
-    collapseColumn,
-    rightColumnOpen,
-  } = props;
-
-  return (
-    <div className="main-header">
-      <div className="main-header-buttons">
-        {/* <Tooltip title="remove image">
-          <div>
-            <Button
-              disabled={!image}
-              color="default"
-              className={classes.button}
-              onClick={showImageDeleteModal}
-            >
-              <DeleteOutlineIcon className={classes.light} />
-            </Button>
-          </div>
-        </Tooltip>
-        <Tooltip title={image ? 'update image' : 'upload image'}>
-          <div>
-            <Button color="default" className={classes.button} onClick={updateImage}>
-              <ImageSearchIcon className={classes.light} />
-            </Button>
-          </div>
-        </Tooltip> */}
-        <div>
-          <Button
-            color="primary"
-            variant="text"
-            // variant="outlined"
-            className={classes.clearButton}
-            disabled={totalComponents < 1}
-            onClick={showGenerateAppModal}
-          >
-            <GetAppIcon
-              className={classes.light}
-              style={{ paddingLeft: '5px', paddingRight: '5px' }}
-            />
-            Export Project
-          </Button>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default withStyles(styles)(MainContainerHeader);
diff --git a/src/components/XXXSortChildren.jsx b/src/components/XXXSortChildren.jsx
deleted file mode 100644
index d5c9b0e6b..000000000
--- a/src/components/XXXSortChildren.jsx
+++ /dev/null
@@ -1,158 +0,0 @@
-// "use strict" ;
-
-import React, { Component } from "react";
-import { connect } from "react-redux";
-import { updateChildrenSort } from "../actions/components";
-import { width } from "window-size";
-import cloneDeep from "../utils/cloneDeep";
-
-const mapStateToProps = store => ({
-  focusComponent: store.workspace.focusComponent
-});
-
-const mapDispatchToProps = dispatch => ({
-  updateChildrenSort: ({ newSortValues }) =>
-    dispatch(updateChildrenSort({ newSortValues }))
-});
-
-class SortChildren extends Component {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      draggedIndex: null,
-      draggedOverIndex: null
-    };
-  } // end constrcutor
-
-  setLocalArray = () => {
-    const localArray = this.props.focusComponent.childrenArray.map(
-      (child, idx) => {
-        return { childId: child.childId, childSort: child.childSort };
-      }
-    );
-    return localArray;
-  };
-
-  onDragStart = (e, idx) => {
-    this.setState({ draggedIndex: idx });
-
-    e.dataTransfer.effectAllowed = "move";
-    e.dataTransfer.setData("text/html", e.target.parentNode);
-    e.dataTransfer.setDragImage(e.target.parentNode, 20, 20);
-  };
-
-  onDragOver = idx => {
-    this.setState({ draggedOverIndex: idx });
-  };
-
-  onDragEnd(e) {
-    console.log(`dragEnd this
-      state.draggedIndex: ${this.state.draggedIndex}
-      this.state.draggedOverIndex: ${this.state.draggedOverIndex}`);
-    if (
-      this.state.draggedIndex === this.state.draggedOverIndex
-      // ||  !this.state.draggedIndex || this.state.draggedOverIndex
-    ) {
-      return;
-    }
-
-    let currentSortValues = this.setLocalArray();
-
-    // remove the dragged Item and save it, we will use add it back in a moment.
-    const draggedBaby = currentSortValues[this.state.draggedIndex];
-    currentSortValues.splice(this.state.draggedIndex, 1);
-
-    // put back the dragge item after the dragged Over
-    currentSortValues.splice(this.state.draggedOverIndex, 0, draggedBaby);
-
-    currentSortValues = currentSortValues.map((child, idx) => {
-      return { childId: child.childId, childSort: idx + 1 };
-    });
-
-    console.log(
-      `currentSortValues after updating the sort  `,
-      JSON.stringify(currentSortValues)
-    );
-
-    this.props.updateChildrenSort({ newSortValues: currentSortValues });
-
-    this.setState({ draggedIndex: 0, draggedOverIndex: 0 });
-  }
-
-  render() {
-    const ulStyle = {
-      margin: 0,
-      padding: 0,
-      listStyle: "none"
-    };
-
-    const liStyle = {
-      backgroundColor: "#383838",
-      padding: "10px 20px",
-      position: "relative",
-      display: "flex",
-      alignItems: "flex-start",
-      lineHeight: 1,
-      cursor: "move"
-    };
-    //const children = this.props.focusComponent.childrenArray;
-    // const List = children
-    const List = cloneDeep(this.props.focusComponent.childrenArray)
-      .sort((a, b) => a.childSort - b.childSort)
-      .map((child, idx) => {
-        return (
-          <li style={liStyle} id={child.childId} key={idx}>
-            <div
-              className="drag"
-              draggable
-              onDragStart={e => this.onDragStart(e, idx)}
-              onDragOver={e => this.onDragOver(idx)}
-              onDragEnd={e => this.onDragEnd()}
-            >
-              {child.componentName + child.childId}
-            </div>
-          </li>
-        );
-      });
-    return (
-      <div
-        style={{
-          minWidth: "200px",
-          position: "relative",
-          float: "left",
-          marginTop: "20px",
-          marginRIght: "20px"
-        }}
-      >
-        <h3>Childrens List</h3>
-        <ul style={ulStyle}>
-          {cloneDeep(this.props.focusComponent.childrenArray)
-            .sort((a, b) => a.childSort - b.childSort)
-            .map((child, idx) => {
-              return (
-                <li style={liStyle} id={child.childId} key={idx}>
-                  <div
-                    className="drag"
-                    draggable
-                    onDragStart={e => this.onDragStart(e, idx)}
-                    onDragOver={e => this.onDragOver(idx)}
-                    onDragEnd={e => this.onDragEnd()}
-                  >
-                    {child.componentName + child.childId}
-                  </div>
-                </li>
-              );
-            })}
-
-          {/* {List} */}
-        </ul>
-      </div>
-    );
-  }
-}
-
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(SortChildren);
diff --git a/src/components/XXXTree.jsx b/src/components/XXXTree.jsx
deleted file mode 100644
index 95b42289e..000000000
--- a/src/components/XXXTree.jsx
+++ /dev/null
@@ -1,211 +0,0 @@
-import React, { Component } from 'react';
-import { withStyles } from '@material-ui/core/styles';
-import * as d3 from 'd3';
-
-class AppTree extends Component {
-  state = {
-    value: 0,
-    treeData: [
-      {
-        name: 'Top Level',
-        parent: 'null',
-        children: [
-          {
-            name: 'Level 2: A',
-            parent: 'Top Level',
-            children: [
-              {
-                name: 'Son of A',
-                parent: 'Level 2: A',
-              },
-              {
-                name: 'Daughter of A',
-                parent: 'Level 2: A',
-              },
-            ],
-          },
-          {
-            name: 'Level 2: B',
-            parent: 'Top Level',
-          },
-        ],
-      },
-    ],
-  };
-
-  componentDidUpdate() {
-    this.update(this.state.treeData, d3);
-    d3.select(self.frameElement).style('height', '500px');
-  }
-
-  update = (treeData, d3) => {
-    let margin = {
-        top: 20, right: 120, bottom: 20, left: 120,
-      },
-      width = 960 - margin.right - margin.left,
-      height = 500 - margin.top - margin.bottom;
-
-    let i = 0,
-      duration = 750,
-      root;
-
-    // var tree = d3.layout.tree().size([height, width]);
-
-    const diagonal = d3.svg.diagonal().projection(d => [d.y, d.x]);
-
-    const svg = d3
-      .select('body')
-      .append('svg')
-      .attr('width', width + margin.right + margin.left)
-      .attr('height', height + margin.top + margin.bottom)
-      .append('g')
-      .attr('transform', `translate(${margin.left},${margin.top})`);
-
-    root = treeData[0];
-    root.x0 = height / 2;
-    root.y0 = 0;
-
-    // Compute the new tree layout.
-    let nodes = tree.nodes(root).reverse(),
-      links = tree.links(nodes);
-
-    // Normalize for fixed-depth.
-    nodes.forEach((d) => {
-      d.y = d.depth * 180;
-    });
-
-    // Update the nodes…
-    const node = svg.selectAll('g.node').data(nodes, d => d.id || (d.id = ++i));
-
-    // Enter any new nodes at the parent's previous position.
-    const nodeEnter = node
-      .enter()
-      .append('g')
-      .attr('class', 'node')
-      .attr('transform', d => `translate(${source.y0},${source.x0})`)
-      .on('click', click);
-
-    nodeEnter
-      .append('circle')
-      .attr('r', 1e-6)
-      .style('fill', d => (d._children ? 'lightsteelblue' : '#fff'));
-
-    nodeEnter
-      .append('text')
-      .attr('x', d => (d.children || d._children ? -13 : 13))
-      .attr('dy', '.35em')
-      .attr('text-anchor', d => (d.children || d._children ? 'end' : 'start'))
-      .text(d => d.name)
-      .style('fill-opacity', 1e-6);
-
-    // Transition nodes to their new position.
-    const nodeUpdate = node
-      .transition()
-      .duration(duration)
-      .attr('transform', d => `translate(${d.y},${d.x})`);
-
-    nodeUpdate
-      .select('circle')
-      .attr('r', 10)
-      .style('fill', d => (d._children ? 'lightsteelblue' : '#fff'));
-
-    nodeUpdate.select('text').style('fill-opacity', 1);
-
-    // Transition exiting nodes to the parent's new position.
-    const nodeExit = node
-      .exit()
-      .transition()
-      .duration(duration)
-      .attr('transform', d => `translate(${source.y},${source.x})`)
-      .remove();
-
-    nodeExit.select('circle').attr('r', 1e-6);
-
-    nodeExit.select('text').style('fill-opacity', 1e-6);
-
-    // Update the links…
-    const link = svg.selectAll('path.link').data(links, d => d.target.id);
-
-    // Enter any new links at the parent's previous position.
-    link
-      .enter()
-      .insert('path', 'g')
-      .attr('class', 'link')
-      .attr('d', (d) => {
-        const o = { x: source.x0, y: source.y0 };
-        return diagonal({ source: o, target: o });
-      });
-
-    // Transition links to their new position.
-    link
-      .transition()
-      .duration(duration)
-      .attr('d', diagonal);
-
-    // Transition exiting nodes to the parent's new position.
-    link
-      .exit()
-      .transition()
-      .duration(duration)
-      .attr('d', (d) => {
-        const o = { x: source.x, y: source.y };
-        return diagonal({ source: o, target: o });
-      })
-      .remove();
-
-    // Stash the old positions for transition.
-    nodes.forEach((d) => {
-      d.x0 = d.x;
-      d.y0 = d.y;
-    });
-  };
-
-  // Toggle children on click.
-  click = (d) => {
-    if (d.children) {
-      d._children = d.children;
-      d.children = null;
-    } else {
-      d.children = d._children;
-      d._children = null;
-    }
-    update(d);
-  };
-
-  render() {
-    const { classes } = this.props;
-    const { value } = this.state;
-
-    return (
-      <div className={classes.root}>
-        <p>hello bro</p>
-      </div>
-    );
-  }
-}
-
-function styles() {
-  return {
-    node: {
-      cursor: 'pointer',
-    },
-
-    nodeCircle: {
-      fill: '#fff',
-      stroke: 'steelblue',
-      strokeWidth: '3px',
-    },
-
-    nodeText: {
-      font: '12px sans-serif',
-    },
-
-    link: {
-      fill: 'none',
-      stroke: '#ccc',
-      strokeWidth: '2px',
-    },
-  };
-}
-
-export default withStyles(styles)(AppTree);
diff --git a/src/public/styles/style.css b/src/public/styles/style.css
index 792abc996..adc5b5e61 100644
--- a/src/public/styles/style.css
+++ b/src/public/styles/style.css
@@ -12,7 +12,7 @@ html {
 body {
   margin: 0;
   padding: 0;
-  font-family: 'Open sans', sans-serif;
+  font-family: "Open sans", sans-serif;
   font-weight: 400;
   overflow: hidden;
 }
@@ -219,6 +219,7 @@ RIGHT COLUMN
   flex-direction: row; */
   background-color: #fcfcfc;
   /* box-shadow: 0 -5px 7px 2px rgb(255, 0, 0); */
+  margin-right: 100px;
 }
 
 .htmlattr {

From 01d39f5b4ad5da213ddbd4c10cc84b8d58d0d8ab Mon Sep 17 00:00:00 2001
From: tolgamizrakci <tolgamizrakci@gmail.com>
Date: Fri, 10 May 2019 09:38:43 -0400
Subject: [PATCH 3/5] fixed unmerged files

---
 main.js                                 | 14 +++++---------
 src/components/TransformerComponent.tsx | 10 ++--------
 2 files changed, 7 insertions(+), 17 deletions(-)

diff --git a/main.js b/main.js
index 5b068ec90..833d4008c 100644
--- a/main.js
+++ b/main.js
@@ -1,4 +1,4 @@
-const path = require('path');
+const path = require("path");
 
 const {
   app,
@@ -10,11 +10,7 @@ const {
 } = require("electron");
 
 // Uncomment below for hot reloading during development
-<<<<<<< HEAD
-require("electron-reload")(__dirname);
-=======
 // require('electron-reload')(__dirname);
->>>>>>> 11e0643d114b6c294dc2b66c3fd4727ffb173825
 
 // const isDev = true;
 const isDev =
@@ -77,11 +73,11 @@ const createWindow = () => {
       "node-Integration": false
     },
     show: false,
-    icon: path.join(__dirname, '/src/public/icons/mac/icon.icns'),
+    icon: path.join(__dirname, "/src/public/icons/mac/icon.icns"),
     win: {
-      icon: path.join(__dirname, '/src/public/icons/win/icon.ico'),
-      target: ['portable'],
-    },
+      icon: path.join(__dirname, "/src/public/icons/win/icon.ico"),
+      target: ["portable"]
+    }
   });
 
   // and load the index.html of the app.
diff --git a/src/components/TransformerComponent.tsx b/src/components/TransformerComponent.tsx
index b8d8db7ee..c96ba2b5d 100644
--- a/src/components/TransformerComponent.tsx
+++ b/src/components/TransformerComponent.tsx
@@ -1,12 +1,6 @@
-<<<<<<< HEAD
 import React, { Component } from "react";
 import { Transformer } from "react-konva";
 import { ComponentInt, ComponentsInt, ChildInt } from "../utils/interfaces";
-=======
-import React, { Component } from 'react';
-import { Transformer } from 'react-konva';
-import { ChildInt } from '../utils/interfaces.ts';
->>>>>>> 11e0643d114b6c294dc2b66c3fd4727ffb173825
 
 interface PropsInt {
   focusChild: ChildInt;
@@ -42,9 +36,9 @@ export default class TransformerComponent extends Component<PropsInt> {
   render() {
     return (
       <Transformer
-        className={'Transformer'}
+        className={"Transformer"}
         rotateEnabled={false}
-        ref={(node) => {
+        ref={node => {
           this.transformer = node;
         }}
         borderEnabled={false}

From 5f2053e545f3829a222b4cd60cb145d875009e58 Mon Sep 17 00:00:00 2001
From: ChristianEdwardPadilla <christianepadilla@gmail.com>
Date: Fri, 10 May 2019 10:53:09 -0400
Subject: [PATCH 4/5] code exporting successfully

---
 main.js                                 | 163 ++++++------
 src/components/TransformerComponent.tsx |   6 -
 src/utils/createApplication.util.ts     | 320 +++++++++++++-----------
 3 files changed, 250 insertions(+), 239 deletions(-)

diff --git a/main.js b/main.js
index 5b068ec90..822a821a1 100644
--- a/main.js
+++ b/main.js
@@ -1,24 +1,14 @@
 const path = require('path');
 
 const {
-  app,
-  BrowserWindow,
-  Menu,
-  shell,
-  dialog,
-  ipcMain
-} = require("electron");
+  app, BrowserWindow, Menu, shell, dialog, ipcMain,
+} = require('electron');
 
 // Uncomment below for hot reloading during development
-<<<<<<< HEAD
-require("electron-reload")(__dirname);
-=======
 // require('electron-reload')(__dirname);
->>>>>>> 11e0643d114b6c294dc2b66c3fd4727ffb173825
 
 // const isDev = true;
-const isDev =
-  process.env.NODE_ENV === "development" || process.env.NODE_ENV === "test";
+const isDev = process.env.NODE_ENV === 'development' || process.env.NODE_ENV === 'test';
 
 // Keep a global reference of the window object, if you don't, the window will
 // be closed automatically when the JavaScript object is garbage collected.
@@ -28,13 +18,13 @@ let mainWindow;
 function openFile() {
   // Opens file dialog looking for markdown
   const files = dialog.showOpenDialog(mainWindow, {
-    properties: ["openFile"],
+    properties: ['openFile'],
     filters: [
       {
-        name: "Images",
-        extensions: ["jpeg", "jpg", "png", "gif", "pdf"]
-      }
-    ]
+        name: 'Images',
+        extensions: ['jpeg', 'jpg', 'png', 'gif', 'pdf'],
+      },
+    ],
   });
 
   // if no files
@@ -42,39 +32,39 @@ function openFile() {
   const file = files[0];
 
   // Send fileContent to renderer
-  mainWindow.webContents.send("new-file", file);
+  mainWindow.webContents.send('new-file', file);
 }
 
 // Choose directory
-ipcMain.on("choose_app_dir", event => {
+ipcMain.on('choose_app_dir', (event) => {
   const directory = dialog.showOpenDialog(mainWindow, {
-    properties: ["openDirectory"],
-    buttonLabel: "Export"
+    properties: ['openDirectory'],
+    buttonLabel: 'Export',
   });
 
   if (!directory) return;
-  event.sender.send("app_dir_selected", directory[0]);
+  event.sender.send('app_dir_selected', directory[0]);
 });
 
-ipcMain.on("view_app_dir", (event, appDir) => {
+ipcMain.on('view_app_dir', (event, appDir) => {
   shell.openItem(appDir);
 });
 
 // Update file
-ipcMain.on("update-file", () => {
+ipcMain.on('update-file', () => {
   openFile();
 });
 
 const createWindow = () => {
   // Create the browser window.
   // eslint-disable-next-line
-  const { width, height } = require("electron").screen.getPrimaryDisplay().size;
+  const { width, height } = require('electron').screen.getPrimaryDisplay().size;
   mainWindow = new BrowserWindow({
     width,
     height,
     webPreferences: {
       zoomFactor: 0.7,
-      "node-Integration": false
+      'node-Integration': false,
     },
     show: false,
     icon: path.join(__dirname, '/src/public/icons/mac/icon.icns'),
@@ -87,22 +77,22 @@ const createWindow = () => {
   // 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.once('ready-to-show', () => {
     mainWindow.show();
   });
 
   const template = [
     {
-      label: "File",
+      label: 'File',
       submenu: [
         {
-          label: "Open File",
-          accelerator: process.platform === "darwin" ? "Cmd+O" : "Ctrl+Shift+O",
+          label: 'Open File',
+          accelerator: process.platform === 'darwin' ? 'Cmd+O' : 'Ctrl+Shift+O',
           click() {
             openFile();
-          }
-        }
-      ]
+          },
+        },
+      ],
     },
     // {
     //   label: 'Edit',
@@ -119,82 +109,81 @@ const createWindow = () => {
     //   ],
     // },
     {
-      label: "View",
+      label: 'View',
       submenu: [
-        { role: "reload" },
-        { role: "forcereload" },
-        { type: "separator" },
-        { role: "resetzoom" },
-        { role: "zoomin" },
-        { role: "zoomout" },
-        { type: "separator" },
-        { role: "togglefullscreen" }
-      ]
+        { role: 'reload' },
+        { role: 'forcereload' },
+        { type: 'separator' },
+        { role: 'resetzoom' },
+        { role: 'zoomin' },
+        { role: 'zoomout' },
+        { type: 'separator' },
+        { role: 'togglefullscreen' },
+      ],
     },
     {
-      role: "window",
-      submenu: [{ role: "minimize" }, { role: "close" }]
+      role: 'window',
+      submenu: [{ role: 'minimize' }, { role: 'close' }],
     },
     {
-      role: "help",
+      role: 'help',
       submenu: [
         {
-          label: "Learn More",
+          label: 'Learn More',
           click() {
-            shell.openExternal("https://electronjs.org");
-          }
-        }
-      ]
+            shell.openExternal('https://electronjs.org');
+          },
+        },
+      ],
     },
     {
-      label: "Developer",
+      label: 'Developer',
       submenu: [
         {
-          label: "Toggle Developer Tools",
-          accelerator:
-            process.platform === "darwin" ? "Alt+Command+I" : "Ctrl+Shift+I",
+          label: 'Toggle Developer Tools',
+          accelerator: process.platform === 'darwin' ? 'Alt+Command+I' : 'Ctrl+Shift+I',
           click() {
             mainWindow.webContents.toggleDevTools();
-          }
-        }
-      ]
-    }
+          },
+        },
+      ],
+    },
   ];
 
-  if (process.platform === "darwin") {
+  if (process.platform === 'darwin') {
     template.unshift({
       label: app.getName(),
       submenu: [
-        { role: "about" },
-        { type: "separator" },
-        { role: "services", submenu: [] },
-        { type: "separator" },
-        { role: "hide" },
-        { role: "hideothers" },
-        { role: "unhide" },
-        { type: "separator" },
-        { role: "quit" }
-      ]
+        { role: 'about' },
+        { type: 'separator' },
+        { role: 'services', submenu: [] },
+        { type: 'separator' },
+        { role: 'hide' },
+        { role: 'hideothers' },
+        { role: 'unhide' },
+        { type: 'separator' },
+        { role: 'quit' },
+      ],
     });
 
     // Edit menu
     template[2].submenu.push(
       {
-        type: "separator"
+        type: 'separator',
       },
       {
-        label: "Speech",
-        submenu: [{ role: "startspeaking" }, { role: "stopspeaking" }]
-      }
+        label: 'Speech',
+        submenu: [{ role: 'startspeaking' }, { role: 'stopspeaking' }],
+      },
     );
 
     // Window menu
     template[4].submenu = [
-      { role: "close" },
-      { role: "minimize" },
-      { role: "zoom" },
-      { type: "separator" },
-      { role: "front" }
+      { role: 'close' },
+      { role: 'minimize' },
+      { role: 'zoom' },
+      { type: 'separator' },
+      { role: 'front' },
     ];
   }
 
@@ -202,7 +191,7 @@ const createWindow = () => {
   Menu.setApplicationMenu(menu);
 
   // Emitted when the window is closed.
-  mainWindow.on("closed", () => {
+  mainWindow.on('closed', () => {
     // Dereference the window object, usually you would store windows
     // in an array if your app supports multi windows, this is the time
     // when you should delete the corresponding element.
@@ -213,13 +202,13 @@ const createWindow = () => {
 // This method will be called when Electron has finished
 // initialization and is ready to create browser windows.
 // Some APIs can only be used after this event occurs.
-app.on("ready", () => {
+app.on('ready', () => {
   if (isDev) {
     const {
       default: installExtension,
       REACT_DEVELOPER_TOOLS,
-      REDUX_DEVTOOLS
-    } = require("electron-devtools-installer");
+      REDUX_DEVTOOLS,
+    } = require('electron-devtools-installer');
 
     installExtension([REACT_DEVELOPER_TOOLS, REDUX_DEVTOOLS])
       .then(() => {
@@ -232,15 +221,15 @@ app.on("ready", () => {
 });
 
 // Quit when all windows are closed.
-app.on("window-all-closed", () => {
+app.on('window-all-closed', () => {
   // On OS X it is common for applications and their menu bar
   // to stay active until the user quits explicitly with Cmd + Q
-  if (process.platform !== "darwin") {
+  if (process.platform !== 'darwin') {
     app.quit();
   }
 });
 
-app.on("activate", () => {
+app.on('activate', () => {
   // On OS X it's common to re-create a window in the app when the
   // dock icon is clicked and there are no other windows open.
   if (mainWindow === null) {
diff --git a/src/components/TransformerComponent.tsx b/src/components/TransformerComponent.tsx
index b8d8db7ee..d4e3497d2 100644
--- a/src/components/TransformerComponent.tsx
+++ b/src/components/TransformerComponent.tsx
@@ -1,12 +1,6 @@
-<<<<<<< HEAD
-import React, { Component } from "react";
-import { Transformer } from "react-konva";
-import { ComponentInt, ComponentsInt, ChildInt } from "../utils/interfaces";
-=======
 import React, { Component } from 'react';
 import { Transformer } from 'react-konva';
 import { ChildInt } from '../utils/interfaces.ts';
->>>>>>> 11e0643d114b6c294dc2b66c3fd4727ffb173825
 
 interface PropsInt {
   focusChild: ChildInt;
diff --git a/src/utils/createApplication.util.ts b/src/utils/createApplication.util.ts
index 28817e54f..73cbc1f1a 100644
--- a/src/utils/createApplication.util.ts
+++ b/src/utils/createApplication.util.ts
@@ -1,6 +1,4 @@
 import fs from 'fs';
-import { format } from 'prettier';
-import componentRender from './componentRender.util.ts';
 
 function createIndexHtml(path, appName) {
   let dir = path;
@@ -22,19 +20,17 @@ function createIndexHtml(path, appName) {
 
   const filePath: string = `${dir}/index.html`;
   const data: string = `
-  <!DOCTYPE html>
-  <html lang="en">
-    <head>
-      <meta charset="UTF-8" />
-      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-      <meta http-equiv="X-UA-Compatible" content="ie=edge" />
-      <title>ReacType App</title>
-    </head>
-    <body>
-      <div id="root"></div>
-      <script src="./build/bundle.js"></script>
-    </body>
-  </html>
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <title>ReacType App</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script src="./build/bundle.js"></script>
+  </body>
+</html>
   `;
   fs.writeFileSync(filePath, data, (err) => {
     if (err) {
@@ -48,12 +44,12 @@ function createIndexHtml(path, appName) {
 export const createIndexTsx = (path, appName) => {
   const filePath = `${path}/${appName}/src/index.tsx`;
   const data = `
-  import * as React from 'react';
-  import * as ReactDOM from 'react-dom';
-  
-  import { App } from './components/App';
-  
-  ReactDOM.render(<App />, document.getElementById('root'));
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+
+import App from './components/App.tsx';
+
+ReactDOM.render(<App />, document.getElementById('root'));
   `;
   fs.writeFile(filePath, data, (err) => {
     if (err) {
@@ -67,58 +63,58 @@ export const createIndexTsx = (path, appName) => {
 export const createPackage = (path, appName) => {
   const filePath = `${path}/${appName}/package.json`;
   const data = `
-  {
-    "name": "reactype",
-    "version": "1.0.0",
-    "description": "",
-    "main": "index.js",
-    "scripts": {
-      "start": "node server/server.js",
-      "build": "webpack",
-      "dev": "nodemon server/server.js & webpack-dev-server --open"
-    },
-    "nodemonConfig": {
-      "ignore": [
-        "build",
-        "src"
-      ]
-    },
-    "keywords": [],
-    "author": "",
-    "license": "MIT",
-    "depenencies": {
-      "@types/react": "^16.8.13",
-      "@types/react-dom": "^16.8.4",
-      "express": "^4.16.4",
-      "react": "^16.8.6",
-      "react-dom": "^16.8.6",
-      "webpack": "^4.29.6"
-    },
-    "devDependencies": {
-      "@babel/core": "^7.4.3",
-      "@babel/preset-env": "^7.4.3",
-      "@babel/preset-react": "^7.0.0",
-      "@babel/preset-typescript": "^7.3.3",
-      "babel-loader": "^8.0.5",
-      "cross-env": "^5.2.0",
-      "css-loader": "^2.1.1",
-      "file-loader": "^3.0.1",
-      "isomorphic-fetch": "^2.2.1",
-      "node-sass": "^4.11.0",
-      "nodemon": "^1.18.9",
-      "postcss-loader": "^3.0.0",
-      "sass-loader": "^7.1.0",
-      "source-map-loader": "^0.2.4",
-      "style-loader": "^0.23.1",
-      "tslint": "^5.15.0",
-      "tslint-config-prettier": "^1.18.0",
-      "tslint-react": "^4.0.0",
-      "typescript": "^3.4.3",
-      "webpack": "^4.29.6",
-      "webpack-cli": "^3.3.0",
-      "webpack-dev-server": "^3.2.1"
-    }
-  }  
+{
+  "name": "reactype",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "start": "node server/server.js",
+    "build": "cross-env NODE_ENV=production webpack",
+    "dev": "nodemon server/server.js & cross-env NODE_ENV=development webpack-dev-server --open"
+  },
+  "nodemonConfig": {
+    "ignore": [
+      "build",
+      "src"
+    ]
+  },
+  "keywords": [],
+  "author": "",
+  "license": "MIT",
+  "dependencies": {
+    "@types/react": "^16.8.13",
+    "@types/react-dom": "^16.8.4",
+    "express": "^4.16.4",
+    "react": "^16.8.6",
+    "react-dom": "^16.8.6",
+    "webpack": "^4.29.6"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.4.3",
+    "@babel/preset-env": "^7.4.3",
+    "@babel/preset-react": "^7.0.0",
+    "@babel/preset-typescript": "^7.3.3",
+    "babel-loader": "^8.0.5",
+    "cross-env": "^5.2.0",
+    "css-loader": "^2.1.1",
+    "file-loader": "^3.0.1",
+    "isomorphic-fetch": "^2.2.1",
+    "node-sass": "^4.11.0",
+    "nodemon": "^1.18.9",
+    "postcss-loader": "^3.0.0",
+    "sass-loader": "^7.1.0",
+    "source-map-loader": "^0.2.4",
+    "style-loader": "^0.23.1",
+    "tslint": "^5.15.0",
+    "tslint-config-prettier": "^1.18.0",
+    "tslint-react": "^4.0.0",
+    "typescript": "^3.4.3",
+    "webpack": "^4.29.6",
+    "webpack-cli": "^3.3.0",
+    "webpack-dev-server": "^3.2.1"
+  }
+}  
   `;
   fs.writeFile(filePath, data, (err) => {
     if (err) {
@@ -132,49 +128,49 @@ export const createPackage = (path, appName) => {
 export const createWebpack = (path, appName) => {
   const filePath = `${path}/${appName}/webpack.config.js`;
   const data = `
-  var status = process.env.NODE_ENV; //taken from script so we don't have to flip mode when using development/production
-  var path = require('path');
-  
-  module.exports = {
-    entry: './src/index.tsx',
-    output: {
-      path: path.resolve(__dirname, 'build'),
-      filename: 'bundle.js',
-    },
-  
-    // Enable sourcemaps for debugging webpack's output.
-    devtool: 'source-map',
-  
-    resolve: {
-      // Add '.ts' and '.tsx' as resolvable extensions.
-      extensions: ['.ts', '.tsx', '.js', '.json'],
-    },
-    mode: status,
-    devServer: {
-      publicPath: '/build/',
-      // proxy: {
-      //   '/testDev': 'http://localhost:3000',
-      // },
-    },
-  
-    module: {
-      rules: [
-        // All files with a '.ts' or '.tsx' extension will be handled by babel-loader
-        { test: /.tsx?$/, exclude: /node-modules/, loader: 'babel-loader' },
-  
-        // All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
-        { enforce: 'pre', test: /.js$/, exclude: /node-modules/, loader: 'source-map-loader' },
-        {
-          test: /.scss$/,
-          use: [
-            'style-loader', // creates style nodes from JS strings
-            'css-loader', // translates CSS into CommonJS
-            'sass-loader', // compiles Sass to CSS, using Node Sass by default
-          ],
-        },
-      ],
-    },
-  };
+var status = process.env.NODE_ENV; //taken from script so we don't have to flip mode when using development/production
+var path = require('path');
+
+module.exports = {
+  entry: './src/index.tsx',
+  output: {
+    path: path.resolve(__dirname, 'build'),
+    filename: 'bundle.js',
+  },
+
+  // Enable sourcemaps for debugging webpack's output.
+  devtool: 'source-map',
+
+  resolve: {
+    // Add '.ts' and '.tsx' as resolvable extensions.
+    extensions: ['.ts', '.tsx', '.js', '.json'],
+  },
+  mode: status,
+  devServer: {
+    publicPath: '/build/',
+    // proxy: {
+    //   '/testDev': 'http://localhost:3000',
+    // },
+  },
+
+  module: {
+    rules: [
+      // All files with a '.ts' or '.tsx' extension will be handled by babel-loader
+      { test: /.tsx?$/, exclude: /node-modules/, loader: 'babel-loader' },
+
+      // All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
+      { enforce: 'pre', test: /.js$/, exclude: /node-modules/, loader: 'source-map-loader' },
+      {
+        test: /.scss$/,
+        use: [
+          'style-loader', // creates style nodes from JS strings
+          'css-loader', // translates CSS into CommonJS
+          'sass-loader', // compiles Sass to CSS, using Node Sass by default
+        ],
+      },
+    ],
+  },
+};
   `;
   fs.writeFile(filePath, data, (err) => {
     if (err) {
@@ -204,18 +200,17 @@ export const createBabel = (path, appName) => {
 export const createTsConfig = (path, appName) => {
   const filePath = `${path}/${appName}/tsconfig.json`;
   const data = `
-  {
-    "compilerOptions": {
-      "outDir": "./build/",
-      "sourceMap": true,
-      "noImplicitAny": true,
-      "module": "commonjs",
-      "target": "es6",
-      "jsx": "react"
-    },
-    "include": ["./src/**/*"],
-    "exclude": ["node_modules"]
-  }
+{
+  "compilerOptions": {
+    "outDir": "./dist/",
+    "sourceMap": true,
+    "noImplicitAny": true,
+    "module": "commonjs",
+    "target": "es6",
+    "jsx": "react"
+  },
+  "include": ["./src/**/*"]
+}
 `;
   fs.writeFile(filePath, data, (err) => {
     if (err) {
@@ -226,27 +221,59 @@ export const createTsConfig = (path, appName) => {
   });
 };
 
+export const createTsLint = (path, appName) => {
+  const filePath = `${path}/${appName}/tslint.json`;
+  const data = `
+{
+  "extends": ["tslint:recommended", "tslint-react", "tslint-config-prettier"],
+  "tslint.autoFixOnSave": true,
+  "linterOptions": {
+    "exclude": ["config/**/*.js", "node_modules/**/*.ts"]
+  },
+  "rules": {
+    "quotemark": [true, "single", "avoid-escape", "avoid-template", "jsx-double"],
+    "jsx-boolean-value": false,
+    "jsx-no-lambda": false,
+    "jsx-no-multiline-js": false,
+    "object-literal-sort-keys": false,
+    "member-ordering": false,
+    "no-console": false,
+    "ordered-imports": false,
+    "comment-format": false
+    // "jsx-key": false,
+  }
+}
+`;
+  fs.writeFile(filePath, data, (err) => {
+    if (err) {
+      console.log('TSLint error:', err.message);
+    } else {
+      console.log('TSLint written successfully');
+    }
+  });
+};
+
 export const createServer = (path, appName) => {
   const filePath = `${path}/${appName}/server/server.js`;
   const data = `
-  const express = require('express');
-  const path = require('path');
-  const app = express();
-  
-  app.get('/testDev', (req, res) => {
-    res.send({ dev: 'testDev endpoint hit' });
-  });
-  
-  // statically serve everything in the build folder on the route '/build'
-  app.use('/build', express.static(path.join(__dirname, '../build')));
-  // serve index.html on the route '/'
-  app.get('/', (req, res) => {
-    res.sendFile(path.join(__dirname, '../index.html'));
-  });
-  
-  app.listen(3000, () => {
-    console.log('listening on port 3000');
-  }); //listens on port 3000 -> http://localhost:3000/
+const express = require('express');
+const path = require('path');
+const app = express();
+
+app.get('/testDev', (req, res) => {
+  res.send({ dev: 'testDev endpoint hit' });
+});
+
+// statically serve everything in the build folder on the route '/build'
+app.use('/build', express.static(path.join(__dirname, '../build')));
+// serve index.html on the route '/'
+app.get('/', (req, res) => {
+  res.sendFile(path.join(__dirname, '../index.html'));
+});
+
+app.listen(3000, () => {
+  console.log('listening on port 3000');
+}); //listens on port 3000 -> http://localhost:3000/
 `;
   fs.writeFile(filePath, data, (err) => {
     if (err) {
@@ -273,6 +300,7 @@ genOption: number;
     await createWebpack(path, appName);
     await createBabel(path, appName);
     await createTsConfig(path, appName);
+    await createTsLint(path, appName);
     await createServer(path, appName);
   }
 }

From 51f19daf2fa7e90be9ae82f31d1fb5ff0beec241 Mon Sep 17 00:00:00 2001
From: tolgamizrakci <tolgamizrakci@gmail.com>
Date: Fri, 10 May 2019 10:56:24 -0400
Subject: [PATCH 5/5] pulling export changes

---
 src/components/TransformerComponent.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/TransformerComponent.tsx b/src/components/TransformerComponent.tsx
index c96ba2b5d..e4e2c1def 100644
--- a/src/components/TransformerComponent.tsx
+++ b/src/components/TransformerComponent.tsx
@@ -1,6 +1,6 @@
 import React, { Component } from "react";
 import { Transformer } from "react-konva";
-import { ComponentInt, ComponentsInt, ChildInt } from "../utils/interfaces";
+import { ChildInt } from "../utils/interfaces";
 
 interface PropsInt {
   focusChild: ChildInt;