merging with styling changes from christian

Author: tolgamizrakci

README.md

@@ -1,18 +1,22 @@
 # ReacType
 
-**ReacType** is a prototyping tool for developers employing **React** component architecture while utilizing the comprehensive type checking of **TypeScript**.
 
-**ReacType** allows the user to _visualize_ their application architecture dynamically, employing a _canvas display_, an _application tree_, and a _component code preview_. The user can create components and load _instances_ of these components, as well as nested HTML elements, onto the canvas. These visual representations quickly reveal parent-child relationships between components and the embedded instances, with component views that can be toggled between and draggable representations that resized on the canvas itself. This architecture can then be _exported_ as TypeScript application files to be used as a starter template for any repository.
+[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/team-reactype/ReacType/pulls)
+![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)
 
-Download for [MacOS](), [Windows](), [Linux]().
+**ReacType** is a visual prototyping tool for developers employing **React** component architecture alongside the comprehensive type checking of **TypeScript**.
+
+**ReacType** allows the user to _visualize_ their application architecture dynamically, employing a _canvas display_, an _application tree_, and a _component code preview_. The user can create components and load _instances_ of these components, as well as nested HTML elements, onto the canvas. This architecture can then be _exported_ as TypeScript application files to be used as a starter template for any repository.
+
+ Download for [MacOS](), [Windows](), [Linux]().
 
 ### How to use
 
 - Open the application to start a new project. It will open in the root App component, with its name listed in the left panel and the component represented by the white box on the canvas.
-- To add a new component, type its name in the upper right panel, in the field '**Add class component**', and press the plus button.
+- To add a new component, type its name in the upper left panel, in the field '**Add class component**', and press enter.
 - To render a component **_instance_** to the screen, first select the component, or _parent_, that the instance will be rendered within. This selected component will be represented in a new canvas view, with its own white box. Then press the plus button next to the component name. An instance, or _child_, representation will appear on the canvas.
 - To add draggable HTML elements, select the image icons on the lower left panel.
-- The bottom panel allows the user to toggle between 4 different views: a tree diagram of the application, a preview of the code, a form to enter component props, and a form to add HTML attributes.
+- The bottom panel allows the user to toggle between 4 different views: a tree diagram of the application, a preview of the exportable code, a form to enter component props, and a form to add HTML attributes.
 - **_Props_** can be added to each component within its tab on bottom panel. Enter in a _key-value pair_, select its data _type_ and press the bottom 'ADD PROP'.
 - **_HTML Element Attributes_** of class name and ID can be added to each HTML element after an HTML element has been rendered to the canvas.
 - To **_delete_** a _child_ or instance from the canvas, select the desired instance and either press the _delete_ key or click the 'DELETE CHILD' button.
@@ -22,7 +26,7 @@ Download for [MacOS](), [Windows](), [Linux]().
 ### To Export Files
 
 - Once finished setting up the application template, press the green 'EXPORT PROJECT' button at the bottom of the left panel and choose between two options to export your files:
-  1. Export the component files into a src folder. This option will allow a developer to add these files to an existing project.
+  1. Export the component files into a components folder. This option will allow a developer to add these files to an existing project.
   1. Export a new project with TypeScript config files and the component files. This option will allow a developer to immediately begin a new project.
 
 #### Authors
@@ -67,4 +71,4 @@ yarn run electron
 
 ## License
 
-This project is licensed under the MIT License - see the [LICENSE.md]() file for details.
+This project is licensed under the MIT License - see the [LICENSE.md](https://github.com/team-reactype/ReacType/blob/development/LICENSE.md) file for details.

main.js

@@ -1,18 +1,12 @@
 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.
@@ -22,81 +16,76 @@ 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
   if (!files) return;
   const file = files[0];
 
   // Send fileContent to renderer
-  mainWindow.webContents.send("new-file", file);
-}
-
-// export files
-function exportComponents() {
-  console.log("hi from exportComponents");
+  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
+      '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',
@@ -113,90 +102,89 @@ 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' },
     ];
   }
 
   const menu = Menu.buildFromTemplate(template);
   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.
@@ -207,13 +195,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(() => {
@@ -226,15 +214,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) {