Merge pull request #180 from oslabs-beta/staging

Staging

Author: stephenkim612

Dockerfile

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2021 ReacType
+Copyright (c) 2022 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:
 

LICENSE.md

@@ -5,7 +5,7 @@
 
 [![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-blue.svg)
-![Version 9.0.0]
+![Version 10.0.0]
 
 **ReacType** is a rapid 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!**
@@ -16,13 +16,14 @@ Download for [MacOS](https://github.com/team-reactype/ReacType/releases), [Windo
 
 - **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 9.0.0.exe.
+- **Windows users**: Install the application by running ReacType Setup 10.0.0.exe.
 
 - **Linux users**: Run the application as a super user in order to read and write files.
 
-![openingGif](https://raw.githubusercontent.com/open-source-labs/ReacType/master/resources/canvas_tutorial_images/drag1.gif)
-
-### How to use
+<p align='center'>
+  <img src='./app/src/public/ezgif.com-gif-maker.gif'/>
+</p>
+How to use
 
 - **Sign-in page**: Sign up for an account or just continue as a guest. Registered users enjoy additional project-saving functionality.
 - **Tutorial**: Click ‘Tutorial’ from the Help tab’s dropdown menu (at the top left of the application) to view a tutorial.
@@ -34,7 +35,7 @@ Download for [MacOS](https://github.com/team-reactype/ReacType/releases), [Windo
 - **Create Instances on the Canvas**: Each component has its own canvas. Add an element to a component by dragging it onto the canvas. Div components are arbitrarily nestable and useful for complex layouts. Next.js and Gatsby.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**: Select an element on the canvas to update its basic style attributes on the right panel. As you create new instances and add styling, watch as your code dynamically generates in the code preview in the bottom panel.
-- **Using State in Elements**: As of 9.0.0, you can now select an HTML element on the canvas and then navigate to the customization panel to click a button to pass a variable from state into your element's text or link field.
+- **Using State in Elements**: As of 10.0.0, you can now select an HTML element on the canvas and then navigate to the customization panel to click a button to pass a variable from state into your element's text or link field.
 - **User Preference Features**: With the click of a button, toggle between light mode and dark mode, depending on your preference.
 - **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 is mocked on the canvas.
 - **Export project with Tests**: Click the "includes tests" checkbox while exporting to include pre-configured Webpack, Jest, and Typescript files along with tests for your project.
@@ -60,10 +61,8 @@ Download for [MacOS](https://github.com/team-reactype/ReacType/releases), [Windo
 - Tutorial has been updated to reflect other modifications
 
 
- **New with version 9.0.0:**
-- **React Router**: Drag-and-drop LinkTo and Router elements (located below the HTML elements list) to implement fully-functional React Router components into your application to dynamically and quickly render components in the live demo render and in your exported application.
-- **Global State Management**: For the first time in ReacType history, users can utilize global state management in the form of the Context API!  Any state that is added will automatically be passed around your application with the appropriate UseContext hooks.  
-- **Composite Data Structures in State**: State creation in ReacType can now handle composite data types, which includes arrays, objects, and any amount of nesting of composite data types within other composite data types (i.e. arrays of objects and objects with objects as values).
+ **New with version 10.0.0:**
+- **Live Code Preview**: See your code preview update in real time as you build. React hooks are enabled for application lifecycle management. Dynamically render functional components using a live code editor. User's can hook event listeners to components and see them render in real time.
 
 ### Keyboard Shortcuts
 
@@ -89,6 +88,8 @@ Download for [MacOS](https://github.com/team-reactype/ReacType/releases), [Windo
 
 #### Contributors
 
+[Abeer Faizan](https://www.linkedin.com/in/abeerfaizan/) [@abeer-f](https://github.com/abeer-f)
+
 [Alex Yu](https://www.linkedin.com/in/alexjihunyu/) [@buddhajjigae](https://github.com/buddhajjigae)
 
 [Aaron Bumanglag](https://www.linkedin.com/in/akbuma) [@akbuma](https://github.com/akbuma)
@@ -103,6 +104,8 @@ Download for [MacOS](https://github.com/team-reactype/ReacType/releases), [Windo
 
 [Brian Han](https://www.linkedin.com/in/brianjisoohan/) [@brianjshan](https://github.com/brianjshan)
 
+[Bryan Chau](https://www.linkedin.com/in/chaubryan1/) [@bchauu](https://github.com/bchauu)
+
 [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)
@@ -113,8 +116,7 @@ Download for [MacOS](https://github.com/team-reactype/ReacType/releases), [Windo
 
 [Crystal Lim](https://linkedin.com/in/crystallim) [@crlim](https://github.com/crlim)
 
-[Danial Reilley](https://linkedin.com/in/daniel-reilley)
-[@dreille](https://github.com/dreille)
+[Danial Reilley](https://linkedin.com/in/daniel-reilley) [@dreille](https://github.com/dreille)
 
 [Daryl Foster](https://www.linkedin.com/in/darylfosterma/) [@MadinventorZero](https://github.com/MadinventorZero)
 
@@ -144,17 +146,15 @@ Download for [MacOS](https://github.com/team-reactype/ReacType/releases), [Windo
 
 [Luke Madden](https://www.linkedin.com/in/lukemadden/) [@lukemadden](https://github.com/lukemadden)
 
-[Miles Wright](https://www.linkedin.com/in/miles-m-wright)
-[@Miles818](https://github.com/Miles818)
+[Miles Wright](https://www.linkedin.com/in/miles-m-wright) [@Miles818](https://github.com/Miles818)
 
 [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)
 
 [Nel Malikova](https://www.linkedin.com/in/gmalikova/) [@gmal1](https://github.com/gmal1)
 
-[Philip Hua](https://www.linkedin.com/in/philip-minh-hua)
-[@pmhua](https://github.com/pmhua)
+[Philip Hua](https://www.linkedin.com/in/philip-minh-hua) [@pmhua](https://github.com/pmhua)
 
 [Ron Fu](https://www.linkedin.com/in/ronfu)[@rfvisuals](https://github.com/rfvisuals)
 
@@ -166,6 +166,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)
 
+[Stephen Kim](https://www.linkedin.com/in/stephenkim612/) [@stephenkim612](https://github.com/stephenkim612)
+
 [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)
@@ -174,10 +176,11 @@ Download for [MacOS](https://github.com/team-reactype/ReacType/releases), [Windo
 
 [Tyler Sullberg](https://www.linkedin.com/in/tyler-sullberg) [@tsully](https://github.com/tsully)
 
+[Ulrich Neujahr](https://www.linkedin.com/in/nobrackets/) [@nobrackets](https://github.com/nobrackets)
+
 [William Cheng](https://www.linkedin.com/in/william-cheng-0723/) [@williamcheng12345](https://github.com/WilliamCheng12345)
 
-[William Rittwage](https://www.linkedin.com/in/william-rittwage)
-[@wbrittwage](https://github.com/wbrittwage)
+[William Rittwage](https://www.linkedin.com/in/william-rittwage) [@wbrittwage](https://github.com/wbrittwage)
 
 [William Yoon](https://www.linkedin.com/in/williamdyoon/) [@williamdyoon](https://github.com/williamdyoon)
 

README.md

@@ -6,7 +6,6 @@ import BottomTabs from '../app/src/components/bottom/BottomTabs';
 import StateContext from '../app/src/context/context';
 import initialState from '../app/src/context/initialState';
 import reducer from '../app/src/reducers/componentReducer';
-
 function Test() {
   const [state, dispatch] = useReducer(reducer, initialState);
   return (
@@ -15,7 +14,6 @@ function Test() {
     </StateContext.Provider>
   )
 }
-
 test('Bottom Panel Contains Two Tabs: Code Preview and Component Tree', () => {
   render(<Test/>);
   expect(screen.getAllByRole('tab')).toHaveLength(2);

__tests__/BottomTabs.test.tsx

@@ -3,13 +3,10 @@ import '@testing-library/jest-dom';
 import { DndProvider } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';
 import { render, fireEvent, cleanup, screen } from '@testing-library/react';
-
 import StateContext from '../app/src/context/context';
 import initialState from '../app/src/context/initialState';
 import reducer from '../app/src/reducers/componentReducer';
 import HTMLPanel from '../app/src/components/left/HTMLPanel';
-
-
 function Test() {
   const [state, dispatch] = useReducer(reducer, initialState);
   return (
@@ -20,8 +17,6 @@ function Test() {
     </DndProvider>
   )
 }
-
-
 test('Renders HTMLPanel component properly', () => {
   render(
     <Test/>
@@ -44,15 +39,12 @@ test('Adds new custom element', () => {
   render(
     <Test/>
   );
-
   fireEvent.change(screen.getAllByRole('textbox')[0], {
     target: { value: 'Testing' }
   });
   fireEvent.change(screen.getAllByRole('textbox')[1], {
     target: { value: 'Testing' }
   });
-
   fireEvent.click(screen.getByDisplayValue('Add Element'));
-
   expect(screen.getByText('Testing')).toBeInTheDocument();
 });

__tests__/HTMLPanel.test.tsx

@@ -218,25 +218,19 @@ describe('Testing componentReducer functionality', () => {
       expect(state.components[focusIndex].future.length).toEqual(1);
     })
   });
-
-  
   // TEST 'REDO'
   describe('REDO reducer', () => {
     it('should remove the last element from the future array and push it to the past array', () => {
       const focusIndex = state.canvasFocus.componentId - 1;
-  
       const actionRedo: Action = {
         type: 'REDO',
          payload: {},
       };
       state = reducer(state, actionRedo);
-
       expect(state.components[focusIndex].future.length).toEqual(0);
       expect(state.components[focusIndex].past.length).toEqual(1);
     })
   });
-
-
   // TEST 'RESET STATE'
   describe('RESET STATE reducer', () => {
     it('should reset project to initial state', () => {

__tests__/componentReducer.test.ts

@@ -2,9 +2,7 @@ const { Mongoose } = require('mongoose');
 const request = require('supertest');
 const http = require('http');
 const app = require('../server/server.js');
-
 const mock = require('../mockData');
-
 // tests user signup and login routes
 describe('GraphQL tests', () => {
   let server;
@@ -14,17 +12,14 @@ describe('GraphQL tests', () => {
   const makeCopyUserIdTest = '604333d10004ad51c899e250';
   const makeCopyUsernameTest = 'test1';
   let makeCopyProjId = '';
-
   beforeAll((done) => {
     server = http.createServer(app);
     server.listen(done);
   });
-
   afterAll((done) => {
     Mongoose.disconnect();
     server.close(done);
   });
-
   // GraphQL Query
   describe('Testing GraphQL query', () => {
     it('getAllProjects should return more than 1 project by default', () => request(server)
@@ -35,7 +30,6 @@ describe('GraphQL tests', () => {
       })
       .expect(200)
       .then(res => expect(res.body.data.getAllProjects.length).toBeGreaterThanOrEqual(1)));
-
     it('getAllProjects should return projects that matches the provided userId', () => request(server)
       .post('/graphql')
       .set('Content-Type', 'application/json')
@@ -48,7 +42,6 @@ describe('GraphQL tests', () => {
       .expect(200)
       .then(res => expect(res.body.data.getAllProjects[0].userId).toBe('604d21b2b61a1c95f2dc9105')));
   });
-
   // GraphQL Mutation
   describe('Testing GraphQL mutation', () => {
     // Add likes
@@ -64,7 +57,6 @@ describe('GraphQL tests', () => {
       })
       .expect(200)
       .then(res => expect(res.body.data.addLike.likes).toBe(testNum)));
-
     // Publish project
     it('Should set the "published" on the project document to TRUE', () => request(server)
       .post('/graphql')
@@ -78,7 +70,6 @@ describe('GraphQL tests', () => {
       })
       .expect(200)
       .then(res => expect(res.body.data.publishProject.published).toBe(true)));
-
     it('Should set the "published" on the project document to FALSE', () => request(server)
       .post('/graphql')
       .set('Content-Type', 'application/json')
@@ -91,7 +82,6 @@ describe('GraphQL tests', () => {
       })
       .expect(200)
       .then(res => expect(res.body.data.publishProject.published).toBe(false)));
-
     // Make copy
     it('Should make a copy of an existing project and change the userId and userName', () => request(server)
       .post('/graphql')

__tests__/gql.projects.test.js renamed to __tests__/gql.projects.test.ts

@@ -19,7 +19,7 @@ const {
 
 
 // The splash screen is what appears while the app is loading
-const { initSplashScreen, OfficeTemplate } = require('electron-splashscreen');
+// const { initSplashScreen, OfficeTemplate } = require('electron-splashscreen');
 const { resolve } = require('app-root-path');
 
 // to install react dev tool extension
@@ -49,14 +49,10 @@ let menuBuilder;
 async function createWindow() {
   // install react dev tools if we are in development mode
   if (isDev) {
-    await installExtension([REACT_DEVELOPER_TOOLS])
-      .then(name => console.log(`Added Extension:  ${name}`))
-      .catch(err => console.log('An error occurred: ', err));
   } else {
     // this will happen before creating the browser window. it returns a Boolean whether the protocol of scheme 'app://' was successfully registered and a file (index-prod.html) was sent as the response
     protocol.registerBufferProtocol(Protocol.scheme, Protocol.requestHandler);
   }
-
   // Create the browser window.
   win = new BrowserWindow({
     // full screen
@@ -69,7 +65,6 @@ async function createWindow() {
     // the browser window will not display initially as it's loading
     // once the browser window renders, a function is called below  that hides the splash screen and displays the browser window
     show: false,
-    // icon: path.join(__dirname, '../src/public/icons/png/256x256.png'),
     webPreferences: {
       zoomFactor: 0.7,
       // enable devtools when in development mode 
@@ -79,7 +74,7 @@ async function createWindow() {
       // web workers will not have access to node
       nodeIntegrationInWorker: false,
       // disallow experimental feature to allow node.js support in sub-frames (i-frames/child windows)
-      nodeIntegrationInSubFrames: false,
+      nodeIntegrationInSubFrames: true,
       // runs electron apis and preload script in a separate JS context
       // separate context has access to document/window but has it's own built-ins and is isolate from changes to global environment by located page
       // Electron API only available from preload, not loaded page
@@ -93,20 +88,19 @@ async function createWindow() {
   });
 
   // Splash screen that appears while loading
-  const hideSplashscreen = initSplashScreen({
-    mainWindow: win,
-    icon: resolve('app/src/public/icons/png/64x64.png'),
-    url: OfficeTemplate,
-    width: 500,
-    height: 300,
-    brand: 'OS Labs',
-    productName: 'ReacType',
-    logo: resolve('app/src/public/icons/png/64x64.png'),
-    color: '#3BBCAF',
-    website: 'www.reactype.io',
-    text: 'Initializing ...',
-  });
-
+  // const hideSplashscreen = initSplashScreen({
+  //   mainWindow: win,
+  //   icon: resolve('app/src/public/icons/png/64x64.png'),
+  //   url: OfficeTemplate,
+  //   width: 500,
+  //   height: 300,
+  //   brand: 'OS Labs',
+  //   productName: 'ReacType',
+  //   logo: resolve('app/src/public/icons/png/64x64.png'),
+  //   color: '#3BBCAF',
+  //   website: 'www.reactype.io',
+  //   text: 'Initializing ...',
+  // });
   // Load app
   if (isDev) {
     // load app from web-dev server
@@ -119,7 +113,6 @@ async function createWindow() {
   // load page once window is loaded
   win.once('ready-to-show', () => {
     win.show();
-    hideSplashscreen();
   });
 
   // automatically open DevTools when opening the app
@@ -381,7 +374,6 @@ ipcMain.on('delete_cookie', event => {
   session.defaultSession.cookies
     .remove(serverUrl, 'ssid')
     // .then(removed => {
-    //   console.log('Cookies deleted', removed);
     // })
     .catch(err => console.log('Error deleting cookie:', err));
 });

__tests__/projects.test.js renamed to __tests__/projects.test.ts

@@ -64,7 +64,6 @@ var MenuBuilder = function(mainWindow, appName) {
 
   let defaultTemplate = function() {
     return [
-      // { role: "appMenu" }
       ...(isMac
         ? [
             {