merged with export bug fixes

Author: tolgamizrakci

LICENSE.md

@@ -0,0 +1,9 @@
+MIT License
+
+Copyright (c) 2018 ReacType
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

README.md

@@ -1,2 +1,70 @@
 # ReacType
-Prototyping Tool for React/Typescript Applications
+
+**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.
+
+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 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.
+- **_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.
+- To **_delete_** a _component_, click the 'DELETE' button of the desired component in the left panel.
+- To _start over_, select the blue 'CLEAR WORKSPACE' button in the left panel. This will **clear the entire application**.
+
+### 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 a new project with TypeScript config files and the component files. This option will allow a developer to immediately begin a new project.
+
+#### Authors
+
+[Christian Padilla](linkedin.com/in/ChristianEdwardPadilla) [@ChristianEdwardPadilla](https://github.com/ChristianEdwardPadilla)
+
+[Tolga Mizrakci](linkedin.com/in/tolga-mizrakci) [@tolgamizrakci](https://github.com/tolgamizrakci)
+
+[Shlomo Porges](linkedin.com/shlomoporges) [@shlomoporges](https://github.com/ShlomoPorges)
+
+[Adam Singer](linkedin.com/in/adsing) [@spincycle01](https://github.com/spincycle01)
+
+## To Run Your Own Version
+
+- **Fork** and **Clone** Repository.
+- Open project directory
+- Install dependencies
+
+```bash
+yarn install
+```
+
+- Run application
+
+```bash
+yarn start
+```
+
+- For development experience, in one terminal...
+
+```bash
+yarn run dev
+```
+
+- and on another terminal
+
+```bash
+yarn run electron
+```
+
+### Logo Design
+
+## License
+
+This project is licensed under the MIT License - see the [LICENSE.md]() file for details.

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,77 +22,81 @@ 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);
+  mainWindow.webContents.send("new-file", file);
 }
 
 // export files
 function exportComponents() {
-  console.log('hi from exportComponents');
+  console.log("hi from exportComponents");
 }
 
 // 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,
-    show: false,
+    webPreferences: {
+      zoomFactor: 0.9,
+      "node-Integration": 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',
@@ -103,89 +113,90 @@ 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.
@@ -196,13 +207,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(() => {
@@ -215,15 +226,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) {