Merge pull request #71 from oslabs-beta/stretch

Preliminary Pull to Fork Master for Update to Version 2.0

Author: jzuniga206

.babelrc

@@ -7,7 +7,12 @@
       }
     ],
     "react",
-    "stage-0"
+    "stage-0",
   ],
-  "plugins": ["transform-es2015-modules-commonjs"]
+  "plugins": ["transform-es2015-modules-commonjs"],
+  "env": {
+    "test": {
+      "plugins": ["transform-es2015-modules-commonjs"]
+    }
+}
 }

.prettierrc

@@ -0,0 +1,5 @@
+{
+  "printWidth": 80,
+  "singleQuote": true,
+  "trailingComma": "none"
+}

.travis.yml

@@ -1,4 +1,3 @@
 language: node_js
 node_js:
-  - "8"
-  - "10"
+  - 10

README.md

@@ -12,39 +12,42 @@ In other words, **you can draw prototypes and export React / Typescript code!**
 
 **ReacType** allows the user to _visualize_ their application architecture dynamically, employing a _canvas display_, an _application tree_, and a _real-time 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](https://github.com/team-reactype/ReacType/releases/tag/Mac.Version.1.0), [Windows](https://github.com/team-reactype/ReacType/releases/tag/Win.Version.1.0), [Linux](https://github.com/team-reactype/ReacType/releases/tag/Linux.Version.1.0).
+**New with version 2.0:** 
+- React Native mode for iOS/Andoird app design
+- Hooks integration with functional components
+- History navigation
+- Tutorial mode
+- New keyboard shortcuts
+- Editable code preview
+- Prop value designation for component children
+
+Download for [MacOS](https://github.com/team-reactype/ReacType/releases), [Windows](https://github.com/team-reactype/ReacType/releases/), [Linux](https://github.com/team-reactype/ReacType/releases/).
 
 * **Mac users**: for now you might need to go to your security settings to allow the app run on your system as we do not have an Apple license yet.
 
-![Image of ReacType Application](https://i.imgur.com/0wV7R1P.jpg)
+* **Linux users**: run the application as a super user in order to read and write files.
 
-### How to use
+![Image of ReacType Application](https://i.imgur.com/OgcP9II.png)
 
-- To enter **_Tutorial Mode_** navigate to 'Help' -> 'Tutotial'
+### 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.
-- **_Upload an image to use as template_** by clicking the button on the bottom left corner or through the windows menu under 'File -> Open Image'
-- To add a new component, type its name in the upper left panel, in the field '**Add component**', and press enter.
+- Switch to React Native mode to change the interface to a mobile app development environment
+- 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 **_toggle the component to be class or functional_** click the 'Class?' switch and it will repopulate the code preview to reflect the change. 
-- To **_toggle the component to be stateful_** click the 'State?' switch and it will repopulate the code preview to reflect the change. The application exported will use the 'useState' hook to allow for functional components to be stateful as well.
 - To add draggable **HTML elements**, select the image icons on the lower left panel.
 
-![Gif of adding](https://imgur.com/sZloD8o.gif)
+![Gif of adding](https://i.imgur.com/hdVTFcP.gif)
 
 - The bottom panel allows the user to toggle between 4 different views: a **tree diagram of the application**, a **real-time preview of the exportable code**, a form to enter component props, and a form to add HTML attributes.
 
-![Gif of code preview & tree](https://imgur.com/KZb2UTO.gif)
-
-- **_Props_** can be added to each component within its tab on bottom panel. Enter in a _name for the prop_, select its data _type_ and press the bottom 'ADD PROP'.
+- **_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 **_edit code while in code preview_** press 'ENTER EDIT MODE'. 
 
-![Gif of attr & props](https://imgur.com/JgCiBE9.gif)
+![Gif of attr & props](https://i.imgur.com/cmgOLLN.gif)
 
 - To **_delete_** a _child_ or instance from the canvas, select the desired instance and either press the _delete_ key.
 - To **_delete_** a _component_, click the 'DELETE' button of the desired component in the left panel.
-- To **_edit_** a _component's name_, double click on the component's name, and press escape to cancel.
 - To _start over_, select the blue 'CLEAR WORKSPACE' button in the left panel. This will **clear the entire application**.
 
 ### To Export Files
@@ -63,9 +66,9 @@ Download for [MacOS](https://github.com/team-reactype/ReacType/releases/tag/Mac.
 
 [Christian Padilla](https://linkedin.com/in/ChristianEdwardPadilla) [@ChristianEdwardPadilla](https://github.com/ChristianEdwardPadilla)
 
-[Eliot Nguyen](https://www.linkedin.com/in/ibeeliot/) [@ibeeliot](https://github.com/ibeeliot)
+[Eliot Nguyen](https://linkedin.com/in/ibeeliot) [@ibeeliot](https://github.com/ibeeliot)
 
-[Jesse Zuniga](https://www.linkedin.com/in/jesse-zuniga/) [@jzuniga206](https://github.com/jzuniga206)
+[Jesse Zuniga](https://linkedin.com/in/jesse-zuniga) [@jzuniga206](https://github.com/jzuniga206)
 
 [Mitchel Severe](https://www.linkedin.com/in/misevere/) [@mitchelsevere](https://github.com/mitchelsevere)
 
@@ -81,7 +84,7 @@ Download for [MacOS](https://github.com/team-reactype/ReacType/releases/tag/Mac.
 
 [Tolga Mizrakci](https://linkedin.com/in/tolga-mizrakci) [@tolgamizrakci](https://github.com/tolgamizrakci)
 
-[Tony Ito-Cole](www.linkedin.com/in/tony-ito-cole) [@tonyito](https://github.com/tonyito)
+[Tony Ito-Cole](https://linkedin.com/in/tony-ito-cole) [@tonyito](https://github.com/tonyito)
 
 ## To Run Your Own Version
 

__mocks__/electron.js __mocks__/electron.ts__mocks__/electron.js renamed to __mocks__/electron.ts

@@ -3,4 +3,4 @@ const ipcRenderer = {
   on: jest.fn(),
 };
 
-export default ipcRenderer;
+module.exports = ipcRenderer;

main.js

@@ -55,7 +55,6 @@ function redo() {
   mainWindow.webContents.send('redo');
 }
 
-
 function toggleTutorial() {
   mainWindow.webContents.send('tutorial_clicked');
 }
@@ -85,8 +84,8 @@ const createWindow = () => {
   // eslint-disable-next-line
   const { width, height } = require('electron').screen.getPrimaryDisplay().size;
   mainWindow = new BrowserWindow({
-    width,
-    height,
+    width: 1920,
+    height: 1080,
     webPreferences: {
       zoomFactor: 0.7,
       'node-Integration': false
@@ -122,16 +121,17 @@ const createWindow = () => {
     {
       label: 'Edit',
       submenu: [
-        { 
+        {
           label: 'Undo',
-          accelerator: process.platform === 'darwin' ? 'Cmd+Z' : 'Ctrl+Z',  //these hotkeys are a tad bit glitchy
+          accelerator: process.platform === 'darwin' ? 'Cmd+Z' : 'Ctrl+Z', //these hotkeys are a tad bit glitchy
           click() {
             undo();
           }
         },
-        { 
+        {
           label: 'Redo',
-          accelerator: process.platform === 'darwin' ? 'Cmd+Shift+Z' : 'Ctrl+Shift+Z',
+          accelerator:
+            process.platform === 'darwin' ? 'Cmd+Shift+Z' : 'Ctrl+Shift+Z',
           click() {
             redo();
           }
@@ -142,8 +142,8 @@ const createWindow = () => {
         { role: 'paste' },
         { role: 'pasteandmatchstyle' },
         { role: 'delete' },
-        { role: 'selectall' },
-      ],
+        { role: 'selectall' }
+      ]
     },
     {
       label: 'View',
@@ -172,9 +172,9 @@ const createWindow = () => {
           }
         },
         {
-            label: 'Tutorial',
-            click() {
-              toggleTutorial();
+          label: 'Tutorial',
+          click() {
+            toggleTutorial();
           }
         }
       ]
@@ -242,10 +242,11 @@ const createWindow = () => {
     mainWindow = null;
   });
 
+  // UNCOMMENT THIS DURING DEVELOPMENT TO ENABLE CONSOLE TO OPEN UPON LAUNCH
   // dev tools opened on every browser creation
-  mainWindow.webContents.once('dom-ready', () => {
-    mainWindow.webContents.openDevTools();
-  });
+  // mainWindow.webContents.once('dom-ready', () => {
+  //   mainWindow.webContents.openDevTools();
+  // });
 };
 
 // This method will be called when Electron has finished
@@ -269,7 +270,7 @@ app.on('ready', () => {
   }
   globalShortcut.register('Escape', () => {
     escape();
-  })
+  });
 });
 
 // Quit when all windows are closed.

package.json

@@ -71,7 +71,9 @@
     "electron": "cross-env NODE_ENV=development electron .",
     "build": "cross-env NODE_ENV=production webpack --config webpack.config.production.js",
     "build-bin": "electron-builder -mwl",
-    "test": "cross-env NODE_ENV=test jest",
+    "test": "cross-env NODE_ENV=test jest --verbose",
+    "test:update-snap": "cross-env NODE_ENV=test jest --updateSnapshot",
+    "test:clear": "cross-env NODE_ENV=test jest --clearCache",
     "linter": "eslint src",
     "develop": "concurrently \"npm run dev\" \"npm run electron\""
   },
@@ -83,16 +85,32 @@
   "jest": {
     "moduleNameMapper": {
       "^.+\\.(css|scss|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$": "identity-obj-proxy",
-      "electron": "<rootDir>/__mocks__/electron.js"
+      "electron": "<rootDir>/__mocks__/electron.ts"
+    },
+    "moduleFileExtensions": [
+      "ts",
+      "tsx",
+      "js"
+    ],
+    "transform": {
+      "\\.(ts|tsx)$": "<rootDir>/node_modules/ts-jest"
+    },
+    "testRegex": "/__tests__/.*\\.(ts|tsx|js)$",
+    "globals": {
+      "ts-jest": {
+        "diagnostics": false
+      }
     },
     "setupFiles": [
-      "./src/setupTests.js"
+      "<rootDir>/src/setupTests.ts"
     ]
   },
   "dependencies": {
     "@material-ui/core": "^4.2.1",
     "@material-ui/icons": "^4.0.1",
     "@material-ui/styles": "^4.9.6",
+    "@types/enzyme": "^3.10.5",
+    "@types/enzyme-adapter-react-16": "^1.0.6",
     "@types/prettier": "^1.19.0",
     "@types/prismjs": "^1.16.0",
     "@types/react": "^16.8.14",
@@ -106,14 +124,16 @@
     "cli-spinner": "^0.2.8",
     "commander": "^2.17.1",
     "concurrently": "^5.1.0",
+    "core-js": "^3.6.4",
     "csstype": "^2.6.9",
     "d3": "^5.9.2",
     "electron-reload": "^1.4.0",
     "enzyme": "^3.4.1",
-    "konva": "^4.1.6",
+    "enzyme-adapter-react-16": "^1.2.0",
+    "konva": "^4.2.0",
     "localforage": "^1.7.2",
     "lodash.throttle": "^4.1.1",
-    "material-table": "^1.25.2",
+    "material-table": "^1.57.2",
     "prettier": "^1.19.1",
     "prismjs": "^1.19.0",
     "prop-types": "^15.6.2",
@@ -134,11 +154,15 @@
     "redux-undo": "^1.0.1"
   },
   "devDependencies": {
+    "@babel/core": "^7.9.0",
     "@babel/preset-typescript": "^7.3.3",
+    "@types/jest": "^25.1.5",
     "awesome-typescript-loader": "^5.2.1",
     "babel-core": "^6.26.3",
     "babel-eslint": "^8.2.6",
+    "babel-jest": "^25.2.4",
     "babel-loader": "^7.1.4",
+    "babel-plugin-transform-es2015-modules-commonjs": "^6.26.2",
     "babel-preset-env": "^1.6.1",
     "babel-preset-react": "^6.24.1",
     "babel-preset-stage-0": "^6.24.1",
@@ -151,7 +175,6 @@
     "electron-builder": "^20.44.4",
     "electron-devtools-installer": "^2.2.4",
     "electron-installer-dmg": "^2.0.0",
-    "enzyme-adapter-react-16": "^1.2.0",
     "eslint": "^4.19.1",
     "eslint-config-airbnb-base": "^13.0.0",
     "eslint-plugin-babel": "^5.1.0",
@@ -162,12 +185,14 @@
     "extract-text-webpack-plugin": "^4.0.0-beta.0",
     "html-webpack-plugin": "^3.1.0",
     "identity-obj-proxy": "^3.0.0",
-    "jest": "^23.5.0",
+    "jest": "^25.2.6",
     "node-sass": "^4.13.1",
     "postcss-loader": "^2.1.6",
+    "redux-mock-store": "^1.5.4",
     "sass-loader": "^7.0.3",
     "style-loader": "^0.20.3",
-    "typescript": "^3.4.4",
+    "ts-jest": "^25.3.0",
+    "typescript": "^3.8.3",
     "webpack": "^4.42.0",
     "webpack-cli": "^3.3.11"
   },

prettierrc.json

@@ -0,0 +1,5 @@
+{
+  "printWidth": 80,
+  "singleQuote": true,
+  "trailingComma": "none"
+}

src/actionTypes/index.ts

@@ -32,6 +32,7 @@ export const REASSIGN_PARENT: string = 'REASSIGN_PARENT';
 export const REDO: string = 'REDO';
 export const SET_SELECTABLE_PARENTS: string = 'SET_SELECTABLE_PARENTS';
 export const TOGGLE_CLASS: string = 'TOGGLE_CLASS';
+export const TOGGLE_NATIVE: string = 'TOGGLE_NATIVE';
 export const TOGGLE_STATE: string = 'TOGGLE_STATE';
 export const UNDO: string = 'UNDO';
 export const UPDATE_COMPONENT: string = 'UPDATE_COMPONENT';