Merge pull request #52 from brianjshan/final

brianjshan · web-flow · commit fab229aff146 · 2020-11-13T14:17:28.000-08:00
Final
diff --git a/README.md b/README.md
@@ -1,50 +1,50 @@
 <p align="center">
-  <img width="50" src="url('./app/src/public/icons/png/256x256.png)">
+  <img width="50" src=https://i.imgur.com/Z2aKWji.png?1>
   <h1 align="center">ReacType </h1>
 </p>
  -->
 [![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)
-![Release: 3.0](https://img.shields.io/badge/Release-3.0-orange)
+![Release: 4.0](https://img.shields.io/badge/Release-4.0-orange)
 
 **ReacType** is a visual prototyping tool for developers employing **React** component architecture alongside the comprehensive type checking of **TypeScript**.
 In other words, **you can draw prototypes and export React / Typescript code!**
 
 **ReacType** allows the user to _visualize_ their application architecture dynamically, employing a _drag-and-drop canvas display_ and a _real-time component code preview_. The user can create components and drag _instances_ of these components, as well as 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.
 
-**New with version 3.0:**
+**New with version 4.0:**
 
-- Export code as a [Next.js](https://nextjs.org/) project
-- Create nestable components/HTML elements using a drag-and-drop canvas
-- Add CSS to any element on the canvas
-- Components and HTML canvas elements are rendered in the canvas in the same way they'll be rendered in the exported project
-- View dynamically generated Next.js or classic React code as you build your project
-- Authenticate with Github or email
-- Save data for multiple projects in the cloud
-- Critical Electron security gaps resolved
+- View dynamically created components/HTML elements in the component tree
+- View Typescript syntax for React
+- Code preview is fully editable (make changes before exporting project)
+- Create custom HTML elements
+- Improved UI experience
+- Implemented a comprehensive tutorial page with images
 
 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**: After opening the dmg and dragging ReacType into your Applications folder, ctrl+click the icon and select 'Open' from the context menu to run the app. This extra step is necessary since we don't have an Apple developer license yet.
 
+- **Windows users**: Install the application by running ReacType Setup 4.0.0.exe.
+
 - **Linux users**: Run the application as a super user in order to read and write files.
 
-![Gif of adding](https://i.imgur.com/nOeuuU6.gif)
+![Gif of adding](https://i.imgur.com/Ioqkr00.gif)
 
 ### How to use
 
-- **Log in:** Sign up through email/Github if you would like to save your projects to the cloud. Otherwise, select _Continue as Guest_
-- **Select project type:** By default, new projects will be Next.js projects, but you can toggle your project to be a normal React application by selecting "Classic React" in the bottom-right corner.
-  - **Next.js** projects allow you to easily create routing between pages within ReacType and render content with static rendering.
-  - **Classic React** projects are vanilla React. You can create multiple "root" components, but routing between these root components is enabled by default.
-- **Add components:** Add a new component in the left panel. If the _Page_ checkbox is selected, the component will become a page that can be routed to. For example, a page component named 'Home', the component's corresponding route will be '/Home'. [Learn more about Next.js routing](https://nextjs.org/docs/routing/introduction).
-- **Create instances of components/HTML elements:** Each component has its own canvas where you can see how any instances of nested components or HTML elements will render in production. To create an instance of a component or traditional HTML element in the canvas, simply drag it onto the canvas. The following elements have special properties when they're dragged onto the canvas:
-  - **Page/root components:** Page/root components cannot be dragged into other components.
-  - **Divs:** Divs are arbitrarily nestable.
-  - **Navigation components:** Next.js projects have "Navigation components" which allow you to create links between your page components.
-- **Update CSS and delete instances:** Click on the component canvas or an instance to view/edit CSS attributes in the right panel. Updates made to the CSS will render in the canvas on _Save_.
-- **Save your project:** Select _Save Project_ to save a new project to the cloud. Once you've created a new project in the cloud, it will be autoamtically saved on each change. You can open any of your other saved projects by selecting _Open Project_.
-- **Export your project:** Select _Export Project_ to save your project locally. You will have the option of exporting either a fully functional application or only exporting the component files.
+- **Sign-in page**: Sign up for an account, authenticate via Github/Facebook, or just continue as a guest.
+- **Tutorial**: Click ‘Tutorial’ from the help tab’s drop-down menu of the help tab at the top left of the application to view a tutorial page.
+- **Start a project (only after authenticating)**: After you authenticate via Github/Facebook, create a new project, and select whether you want your project to be a Next.js or a classic React project. Also, save your project so that you can return to it at a later time.
+- **Add Components**: Create components on the left panel. Components can be associated with a route, or they can be used within other components.
+- **Delete Components**: Delete components after focusing on them from the right panel. Be careful when deleting components because all instances of the component will be deleted within the application/project.
+- **Add Custom Elements**: Create custom elements or add HTML elements that you are more familiar with into the application. Once the project is exported, the HTML tags generated in the code preview will function the way the label is supposed to work. You can create functionality for custom elements in a new file. The tutorial on HTML Elements explains more on how to do this.
+- **Delete Elements**: Delete elements by clicking on the ‘X’ button next to the element. Be careful when deleting elements because all element elements will be deleted within the application/project.
+- **Create instances on the canvas**: Each component has its canvas. Create an example of an element or HTML element by dragging it onto the canvas. Div components are arbitrarily nestable and useful for complex layouts. Next.js projects have Link components to enable client-side navigation to other routes.
+- **Component Tree**: Click on the component tree tab next to the code preview tab to view the component tree hierarchy.
+- **Update styling**: Click on an element on the canvas to update basic styling using the right functions. As you create new instances and add styling, watch as your code dynamically generates in the bottom panel.
+- **User preference features**: Select a theme for the code preview to your liking and change the application’s lighting.
+- **Export project**: Click the “Export Project’ button to export the project’s application files into a Typescript file. The exported project is fully functional with Webpack, Express server, routing, etc., and will match what’s mocked on the canvas.
 
 #### Contributors
 
@@ -54,18 +54,24 @@ Download for [MacOS](https://github.com/team-reactype/ReacType/releases), [Windo
 
 [Andrew Cho](https://www.linkedin.com/in/andrewjcho84/) [@andrewjcho84](https://github.com/andrewjcho84)
 
+[Brian Han](https://www.linkedin.com/in/brianjisoohan/) [@brianjshan](https://github.com/brianjshan)
+
 [Charles Finocchiaro](https://www.linkedin.com/in/charles-finocchiaro-62440040/) [@null267](https://github.com/null267)
 
 [Chelsey Fewer](https://www.linkedin.com/in/chelsey-fewer/) [@chelseyeslehc](https://github.com/chelseyeslehc)
 
 [Christian Padilla](https://linkedin.com/in/ChristianEdwardPadilla) [@ChristianEdwardPadilla](https://github.com/ChristianEdwardPadilla)
 
+[Diego Vazquez](https://www.linkedin.com/in/diegovazquezny/) [@diegovazquezny](https://github.com/diegovazquezny)
+
 [Eliot Nguyen](https://linkedin.com/in/ibeeliot) [@ibeeliot](https://github.com/ibeeliot)
 
 [Fredo Chen](https://www.linkedin.com/in/fredochen/) [@fredosauce](https://github.com/fredosauce)
 
 [Jesse Zuniga](https://linkedin.com/in/jesse-zuniga) [@jzuniga206](https://github.com/jzuniga206)
 
+[Jin Soo Lim](https://www.linkedin.com/in/jin-soo-lim-3a567b1b3/) [@jinsoolim](https://github.com/jinsoolim)
+
 [Mitchel Severe](https://www.linkedin.com/in/misevere/) [@mitchelsevere](https://github.com/mitchelsevere)
 
 [Natalie Vick](https://www.linkedin.com/in/vicknatalie/) [@natattackvick](https://github.com/natattackvick)
@@ -78,6 +84,8 @@ Download for [MacOS](https://github.com/team-reactype/ReacType/releases), [Windo
 
 [Sophia Huttner](https://www.linkedin.com/in/sophia-huttner-68315975/) [@sophjean](https://github.com/sophjean)
 
+[Stormi Hashimoto](https://www.linkedin.com/in/stormikph/) [@stormikph](https://github.com/stormikph)
+
 [Tolga Mizrakci](https://linkedin.com/in/tolga-mizrakci) [@tolgamizrakci](https://github.com/tolgamizrakci)
 
 [Tony Ito-Cole](https://linkedin.com/in/tony-ito-cole) [@tonyito](https://github.com/tonyito)
diff --git a/app/electron/menu.js b/app/electron/menu.js
@@ -32,8 +32,8 @@ var MenuBuilder = function(mainWindow, appName) {
       }
     });
     if (process.env.NODE_ENV === 'development') {
-      tutorial.loadURL(`http://localhost:8080/#/tutorial`);}
-    else {
+      tutorial.loadURL(`http://localhost:8080/#/tutorial`);
+    } else {
       tutorial.loadURL(`${Protocol.scheme}://rse/index-prod.html#/tutorial`);
     }
     tutorial.show();
diff --git a/app/src/components/login/SignIn.tsx b/app/src/components/login/SignIn.tsx
@@ -6,7 +6,7 @@ import {
   RouteComponentProps
 } from 'react-router-dom';
 import { sessionIsCreated } from '../../helperFunctions/auth';
-import FacebookLogin from "react-facebook-login";
+import FacebookLogin from 'react-facebook-login';
 import Avatar from '@material-ui/core/Avatar';
 import Button from '@material-ui/core/Button';
 import CssBaseline from '@material-ui/core/CssBaseline';
@@ -36,7 +36,7 @@ const useStyles = makeStyles(theme => ({
     marginTop: theme.spacing(8),
     display: 'flex',
     flexDirection: 'column',
-    alignItems: 'center',
+    alignItems: 'center'
   },
   avatar: {
     margin: theme.spacing(1),
@@ -54,7 +54,7 @@ const useStyles = makeStyles(theme => ({
     '& .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline': {
       borderColor: '#3EC1AC'
     }
-  },
+  }
 }));
 
 const SignIn: React.FC<LoginInt & RouteComponentProps> = props => {
@@ -144,22 +144,25 @@ const SignIn: React.FC<LoginInt & RouteComponentProps> = props => {
 
   const responseFacebook = response => {
     if (response.accessToken) {
-      newUserIsCreated(response.email, response.email, randomPassword())
-        .then(userCreated => {
+      newUserIsCreated(response.email, response.email, randomPassword()).then(
+        userCreated => {
           if (userCreated === 'Success') {
             props.history.push('/');
           } else {
-            sessionIsCreated(response.email, randomPassword(), true)
-              .then(loginStatus => {
+            sessionIsCreated(response.email, randomPassword(), true).then(
+              loginStatus => {
                 if (loginStatus === 'Success') {
                   props.history.push('/');
                 }
-              })
+              }
+            );
           }
-        });
-      }
-  }
-  const classBtn = 'MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-submit-4 MuiButton-fullWidth';
+        }
+      );
+    }
+  };
+  const classBtn =
+    'MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-submit-4 MuiButton-fullWidth';
   return (
     <Container component="main" maxWidth="xs">
       <CssBaseline />
diff --git a/app/src/components/main/Canvas.tsx b/app/src/components/main/Canvas.tsx
@@ -1,88 +1,36 @@
-import React, { useState, useContext } from 'react';
+import React, { useContext } from 'react';
 import { useDrop, DropTargetMonitor } from 'react-dnd';
 import { ItemTypes } from '../../constants/ItemTypes';
 import StateContext from '../../context/context';
 import { Component, DragItem } from '../../interfaces/Interfaces';
 import { combineStyles } from '../../helperFunctions/combineStyles';
 import renderChildren from '../../helperFunctions/renderChildren';
-import List from '@material-ui/core/List';
-import ListItem from '@material-ui/core/ListItem';
-import ListItemText from '@material-ui/core/ListItemText';
-import createModal from '../right/createModal';
-
 const findNestedChild = (curr, components) => {
   components.forEach((comp, i) => {
     comp.children.forEach(child => {
-      if (child.name === curr.name) {};
+      if (child.name === curr.name) {
+      }
     });
     if (comp.children.length !== 0) findNestedChild(curr, comp.children);
   });
-
 };
-
 function Canvas() {
-  const [modal, setModal] = useState(null);
-
   const [state, dispatch] = useContext(StateContext);
   // find the current component to render on the canvas
   const currentComponent: Component = state.components.find(
     (elem: Component) => elem.id === state.canvasFocus.componentId
   );
-
+  findNestedChild(currentComponent, state.components);
   // changes focus of the canvas to a new component / child
   const changeFocus = (componentId: number, childId: number | null) => {
     dispatch({ type: 'CHANGE FOCUS', payload: { componentId, childId } });
   };
-
   // onClickHandler is responsible for changing the focused component and child component
   function onClickHandler(event) {
     event.stopPropagation();
     // note: a null value for the child id means that we are focusing on the top-level component rather than any child
     changeFocus(state.canvasFocus.componentId, null);
   }
-
-  const closeModal = () => setModal(null);
-
-  // creates modal that asks if user wants to clear workspace
-  // if user clears their workspace, then their components are removed from state and the modal is closed
-  const triedToNestIncorrectly = () => {
-    // set modal options
-    const children = (
-      <List className="export-preference">
-        <ListItem
-          key={`gotIt${state.canvasFocus.componentId}`}
-          button
-          onClick={closeModal}
-          style={{
-            border: '1px solid #3f51b5',
-            marginBottom: '2%',
-            marginTop: '5%'
-          }}
-        >
-          <ListItemText
-            primary={'Got it'}
-            style={{ textAlign: 'center' }}
-            onClick={closeModal}
-          />
-        </ListItem>
-      </List>
-    );
-
-    // create modal
-    setModal(
-      createModal({
-        closeModal,
-        children,
-        message: 'Unable to nest component in another component that contains that component.',
-        primBtnLabel: null,
-        primBtnAction: null,
-        secBtnAction: null,
-        secBtnLabel: null,
-        open: true
-      })
-    );
-  };
-
   // This hook will allow the user to drag items from the left panel on to the canvas
   const [{ isOver }, drop] = useDrop({
     accept: ItemTypes.INSTANCE,
@@ -91,69 +39,47 @@ function Canvas() {
       if (didDrop) {
         return;
       }
-
-      const runReducers = () => {
-        if (item.newInstance) {
-          dispatch({
-            type: 'ADD CHILD',
-            payload: {
-              type: item.instanceType,
-              typeId: item.instanceTypeId,
-              childId: null
-            }
-          });
-        }
-        // if item is not a new instance, change position of element dragged inside div so that the div is the new parent
-        else {
-          dispatch({
-            type: 'CHANGE POSITION',
-            payload: {
-              currentChildId: item.childId,
-              newParentChildId: null
-            }
-          });
-        }
+      // if item dropped is going to be a new instance (i.e. it came from the left panel), then create a new child component
+      if (item.newInstance) {
+        dispatch({
+          type: 'ADD CHILD',
+          payload: {
+            type: item.instanceType,
+            typeId: item.instanceTypeId,
+            childId: null
+          }
+        });
       }
-
-      const addingComponent = state.components.find(elem => elem.id === item.instanceTypeId);
-
-      if (item.instanceType === "HTML Element") {
-        return runReducers();
-      } else if (item.instanceType === 'Route Link') {
-        return runReducers();
-      } else if (checkChildren([addingComponent], currentComponent)) {
-        triedToNestIncorrectly();
-        return;
-      } else {
-        // if item dropped is going to be a new instance (i.e. it came from the left panel), then create a new child component
-        return runReducers();
+      // if item is not a new instance, change position of element dragged inside div so that the div is the new parent
+      else {
+        dispatch({
+          type: 'CHANGE POSITION',
+          payload: {
+            currentChildId: item.childId,
+            newParentChildId: null
+          }
+        });
       }
     },
     collect: monitor => ({
       isOver: !!monitor.isOver()
     })
   });
-
   const defaultCanvasStyle = {
     width: '100%',
     minHeight: '100%',
     backgroundColor: isOver ? 'lightyellow' : 'white',
     border: '3px solid #01d46d',
     borderStyle: isOver ? 'dotted' : 'solid'
   };
-
   // Combine the default styles of the canvas with the custom styles set by the user for that component
   // The render children function renders all direct children of a given component
   // Direct children are draggable/clickable
-
-
   const canvasStyle = combineStyles(defaultCanvasStyle, currentComponent.style);
   return (
     <div ref={drop} style={canvasStyle} onClick={onClickHandler}>
       {renderChildren(currentComponent.children)}
-      {modal}
     </div>
   );
 }
-
 export default Canvas;
diff --git a/app/src/reducers/componentReducer.ts b/app/src/reducers/componentReducer.ts

Original file line number	Diff line number	Diff line change
`@@ -32,8 +32,8 @@ var MenuBuilder = function(mainWindow, appName) {`
`32`	`32`	`}`
`33`	`33`	`});`
`34`	`34`	`if (process.env.NODE_ENV === 'development') {`
`35`		- tutorial.loadURL(`http://localhost:8080/#/tutorial`);}
`36`		`- else {`
	`35`	+ tutorial.loadURL(`http://localhost:8080/#/tutorial`);
	`36`	`+ } else {`
`37`	`37`	tutorial.loadURL(`${Protocol.scheme}://rse/index-prod.html#/tutorial`);
`38`	`38`	`}`
`39`	`39`	`tutorial.show();`