Merge pull request #101 from team-reactype/development

Development Master Merge

Author: ChristianEdwardPadilla

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,74 @@
 # ReacType
-Prototyping Tool for React/Typescript Applications
+
+
+[![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)
+
+**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 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 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.
+- 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 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
+
+[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](https://github.com/team-reactype/ReacType/blob/development/LICENSE.md) file for details.

main.js

@@ -33,11 +33,6 @@ function openFile() {
   mainWindow.webContents.send('new-file', file);
 }
 
-// export files
-function exportComponents() {
-  console.log('hi from exportComponents');
-}
-
 // Choose directory
 ipcMain.on('choose_app_dir', (event) => {
   const directory = dialog.showOpenDialog(mainWindow, {
@@ -65,6 +60,10 @@ const createWindow = () => {
   mainWindow = new BrowserWindow({
     width,
     height,
+    webPreferences: {
+      zoomFactor: 0.9,
+      'node-Integration': false,
+    },
     show: false,
   });
 

src/actionTypes/index.js

@@ -26,3 +26,4 @@ export const ADD_PROP = 'ADD_PROP';
 export const DELETE_ALL_DATA = 'DELETE_ALL_DATA';
 export const CHANGE_IMAGE_PATH = 'CHANGE_IMAGE_PATH';
 export const UPDATE_HTML_ATTR = 'UPDATE_HTML_ATTR';
+export const UPDATE_CHILDREN_SORT = 'UPDATE_CHILDREN_SORT'

src/actions/components.js

@@ -27,21 +27,22 @@ import {
   DELETE_ALL_DATA,
   CHANGE_IMAGE_PATH,
   UPDATE_HTML_ATTR,
-} from '../actionTypes/index';
+  UPDATE_CHILDREN_SORT
+} from "../actionTypes/index";
 
-import { loadState } from '../localStorage';
+import { loadState } from "../localStorage";
 
-import createFiles from '../utils/createFiles.util';
-import createApplicationUtil from '../utils/createApplication.util';
+import createFiles from "../utils/createFiles.util.ts";
+import createApplicationUtil from "../utils/createApplication.util.ts";
 
 export const loadInitData = () => dispatch => {
   loadState().then(data =>
     dispatch({
       type: LOAD_INIT_DATA,
       payload: {
-        data: data ? data.workspace : {},
-      },
-    }),
+        data: data ? data.workspace : {}
+      }
+    })
   );
 };
 
@@ -76,22 +77,28 @@ export const deleteChild = ({}) => dispatch => {
   dispatch({ type: DELETE_CHILD, payload: {} });
 };
 
-export const deleteComponent = ({ componentId, stateComponents }) => dispatch => {
+export const deleteComponent = ({
+  componentId,
+  stateComponents
+}) => dispatch => {
   // find all places where the "to be delted" is a child and do what u gotta do
-  stateComponents.forEach((parent) => {
-    parent.childrenArray.filter(child => child.childComponentId === componentId).forEach((child) => {
-      dispatch({
-        type: DELETE_CHILD,
-        payload: {
-          parentId: parent.id,
-          childId: child.childId,
-          calledFromDeleteComponent: true,
-        },
+  stateComponents.forEach(parent => {
+    parent.childrenArray
+      .filter(child => child.childComponentId === componentId)
+      .forEach(child => {
+        dispatch({
+          type: DELETE_CHILD,
+          payload: {
+            parentId: parent.id,
+            childId: child.childId,
+            calledFromDeleteComponent: true
+          }
+        });
       });
   });
 
   // change focus to APp
-  dispatch({ type: CHANGE_FOCUS_COMPONENT, payload: { title: 'App' } });
+  dispatch({ type: CHANGE_FOCUS_COMPONENT, payload: { title: "App" } });
   // after taking care of the children delete the component
   dispatch({ type: DELETE_COMPONENT, payload: { componentId } });
 };
@@ -133,65 +140,108 @@ export const changeFocusComponent = ({ title }) => dispatch => {
 
 // make sure childId is being sent in
 <<<<<<< HEAD
+<<<<<<< HEAD
 export const changeFocusChild = ({ title, childId }) => dispatch => {
   dispatch({ type: CHANGE_FOCUS_CHILD, payload: { title, childId } });
 =======
 export const changeFocusChild = ({ childId }) => (dispatch) => {
+=======
+export const changeFocusChild = ({ childId }) => dispatch => {
+>>>>>>> fcd32cb... finished ts changes to util files
   dispatch({ type: CHANGE_FOCUS_CHILD, payload: { childId } });
 >>>>>>> c532596... reducer cleanup, working version
 };
 
+<<<<<<< HEAD
 export const changeComponentFocusChild = ({ componentId, childId }) => dispatch => {
+=======
+export const changeComponentFocusChild = ({
+  componentId,
+  childId
+}) => dispatch => {
+>>>>>>> fcd32cb... finished ts changes to util files
   dispatch({
     type: CHANGE_COMPONENT_FOCUS_CHILD,
-    payload: { componentId, childId },
+    payload: { componentId, childId }
   });
 };
 
+<<<<<<< HEAD
 export const exportFiles = ({ components, path, appName, exportAppBool }) => dispatch => {
+=======
+export const exportFiles = ({
+  components,
+  path,
+  appName,
+  exportAppBool
+}) => dispatch => {
+>>>>>>> fcd32cb... finished ts changes to util files
   // this dispatch sets the global state property 'loading' to true until the createFiles call resolves below
   dispatch({
-    type: EXPORT_FILES,
+    type: EXPORT_FILES
   });
 
   createFiles(components, path, appName, exportAppBool)
     .then(dir =>
       dispatch({
         type: EXPORT_FILES_SUCCESS,
+<<<<<<< HEAD
         payload: { status: true, dir: dir[0] },
       }),
+=======
+        payload: { status: true, dir: dir[0] }
+      })
+>>>>>>> fcd32cb... finished ts changes to util files
     )
     .catch(err =>
       dispatch({
         type: EXPORT_FILES_ERROR,
+<<<<<<< HEAD
         payload: { status: true, err },
       }),
+=======
+        payload: { status: true, err }
+      })
+>>>>>>> fcd32cb... finished ts changes to util files
     );
 };
 
 export const handleClose = () => ({
   type: HANDLE_CLOSE,
-  payload: false,
+  payload: false
 });
 
+<<<<<<< HEAD
 export const handleTransform = (componentId, childId, { x, y, width, height }) => ({
+=======
+export const handleTransform = (
+  componentId,
+  childId,
+  { x, y, width, height }
+) => ({
+>>>>>>> fcd32cb... finished ts changes to util files
   type: HANDLE_TRANSFORM,
   payload: {
     componentId,
     childId,
     x,
     y,
     width,
-    height,
-  },
+    height
+  }
 });
 
 export const createApplication = ({
   path,
   components = [],
   genOption,
+<<<<<<< HEAD
   appName = 'reactype_app',
   exportAppBool,
+=======
+  appName = "reactype_app",
+  exportAppBool
+>>>>>>> fcd32cb... finished ts changes to util files
 }) => dispatch => {
   if (genOption === 0) {
     exportAppBool = false;
@@ -200,48 +250,53 @@ export const createApplication = ({
         appName,
         path,
         components,
-        exportAppBool,
-      }),
+        exportAppBool
+      })
     );
   } else if (genOption) {
     dispatch({
-      type: CREATE_APPLICATION,
+      type: CREATE_APPLICATION
     });
     createApplicationUtil({
       path,
       appName,
       genOption,
-      exportAppBool,
+      exportAppBool
     })
       .then(() => {
         dispatch({
-          type: CREATE_APPLICATION_SUCCESS,
+          type: CREATE_APPLICATION_SUCCESS
         });
         dispatch(
           exportFiles({
             appName,
             path,
             components,
-            exportAppBool,
-          }),
+            exportAppBool
+          })
         );
       })
       .catch(err =>
         dispatch({
           type: CREATE_APPLICATION_ERROR,
+<<<<<<< HEAD
           payload: { status: true, err },
         }),
+=======
+          payload: { status: true, err }
+        })
+>>>>>>> fcd32cb... finished ts changes to util files
       );
   }
 };
 
 export const openExpansionPanel = component => ({
   type: OPEN_EXPANSION_PANEL,
-  payload: { component },
+  payload: { component }
 });
 
 export const deleteAllData = () => ({
-  type: DELETE_ALL_DATA,
+  type: DELETE_ALL_DATA
 });
 
 export const deleteProp = propId => dispatch => {
@@ -250,12 +305,26 @@ export const deleteProp = propId => dispatch => {
 
 export const addProp = prop => ({
   type: ADD_PROP,
-  payload: { ...prop },
+  payload: { ...prop }
 });
 
 export const updateHtmlAttr = ({ attr, value }) => dispatch => {
   dispatch({
     type: UPDATE_HTML_ATTR,
-    payload: { attr, value },
+    payload: { attr, value }
+  });
+};
+
+<<<<<<< HEAD
+export const updateChildrenSort = ({ newChildrenArray }) => dispatch => {
+  dispatch({
+    type: UPDATE_CHILDREN_SORT,
+    payload: { newChildrenArray }
+=======
+export const updateChildrenSort = ({ newSortValues }) => (dispatch) => {
+  dispatch({
+    type: UPDATE_CHILDREN_SORT,
+    payload: { newSortValues },
+>>>>>>> 29b23c438a735dda0a220e39c9795d2ca252eb6d
   });
 };