Merge pull request #161 from oslabs-beta/master

ReacType v5.0.0

Author: Linhatran

.gitignore

@@ -108,6 +108,9 @@ typings/
 # dotenv environment variables file
 .env
 
+# config file for db URI 
+config.js
+
 # parcel-bundler cache (https://parceljs.org/)
 .cache
 

LICENSE.md

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

README.md

@@ -1,57 +1,58 @@
 <p align="center">
-  <img width="50" src=https://i.imgur.com/Z2aKWji.png?1>
+  <img width="50" src="https://i.imgur.com/Yn70tqI.png">
   <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-blue.svg)
-![Release: 4.0](https://img.shields.io/badge/Release-4.0-white)
+![Version 5.0](https://img.shields.io/badge/Release-5.0-lightgrey.svg)
 
-**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** 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.
+**ReacType** allows users to _visualize_ their application architecture dynamically, employing a _drag-and-drop canvas display_ and a _real-time component code preview_. Users 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 4.0:**
 
-- 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
+**New with version 5.0:**
+
+- Elements may be added to components in any location, rather than only at the bottom
+- Compatibility with Gatsby.js
+- Modernized and cleaner UI, including enhanced dark mode
+- Tutorial has been updated to reflect other modifications
 
 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.
+- **Windows users**: Install the application by running ReacType Setup 5.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/Ioqkr00.gif)
+![Gif of adding](https://i.imgur.com/d1oHiTm.gif)
 
 ### How to use
 
-- **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 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.
+- **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.
+- **Start a project (only after registration)**: Registered users can create a new project and select whether they want their project to be a Next.js, Gatsby.js, or classic React project. Also, registered users can save projects to return to them at a later time.
+- **Add Components**: Create components on the right panel. Components can be associated with a route, or they can be used within other components.
+- **Delete Components**: Delete components after focusing on them in the right panel. Be careful when deleting components: Upon deletion, all instances of the component will be removed within the application/project.
+- **Add Custom Elements**: Create custom elements or add provided HTML elements into the application. Once the project is exported, the HTML tags generated in the code preview will function as expected. You can specify functionality for custom elements in the code preview. The tutorial on HTML Elements explains more on how to do this.
+- **Delete Custom HTML Elements**: Delete custom HTML elements by clicking on the ‘X’ button adjacent to the element. Be careful when deleting custom elements: All instances of the element will be deleted within the application/project.
+- **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.
+- **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.
 
 #### Contributors
 
 [Aaron Bumanglag](https://www.linkedin.com/in/akbuma) [@akbuma](https://github.com/akbuma)
 
 [Adam Singer](https://linkedin.com/in/adsing) [@spincycle01](https://github.com/spincycle01)
 
+[Alex Wolinsky](https://www.linkedin.com/in/alex-wolinsky-80ab591b2/) [@aw2934](https://github.com/aw2934/)
+
 [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)
@@ -72,6 +73,12 @@ Download for [MacOS](https://github.com/team-reactype/ReacType/releases), [Windo
 
 [Jin Soo Lim](https://www.linkedin.com/in/jin-soo-lim-3a567b1b3/) [@jinsoolim](https://github.com/jinsoolim)
 
+[Julie Wu](https://www.linkedin.com/in/jwuarchitect/) [@yutingwu4](https://github.com/yutingwu4)
+
+[Linh Tran](https://www.linkedin.com/in/linhtran51/) [@Linhatran](https://github.com/Linhatran)
+
+[Luke Madden](https://www.linkedin.com/in/lukemadden/) [@lukemadden](https://github.com/lukemadden)
+
 [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)
@@ -114,9 +121,9 @@ npm run prod
 npm run dev
 ```
 
-- Please note that the development build is not connected to the production server. `npm run dev` should spin up the development server from the server folder of this repo. For additional information, the readme is [here](https://github.com/open-source-labs/ReacType/blob/master/server/README.md). Alternatively, you can also select "Continue as guest" on the log-in page of the app to not use any features that rely on the server (authentication and saving project data.)
+- Please note that the development build is not connected to the production server. `npm run dev` should spin up the development server from the server folder of this repo. For additional information, the readme is [here](https://github.com/open-source-labs/ReacType/blob/master/server/README.md). Alternatively, you can select "Continue as guest" on the login page of the app, which will not use any features that rely on the server (authentication and saving project data.)
 
-## To Run Your Exported Next.js Project
+## To Run Your Exported Next.js or Gatsby.js Project
 
 - Open exported project directory
 - Install dependencies

__tests__/BottomTabs.test.tsx

@@ -1,6 +1,6 @@
 import React, { useReducer} from 'react';
 import '@testing-library/jest-dom';
-import { render, fireEvent, cleanup, screen } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 
 import BottomTabs from '../app/src/components/bottom/BottomTabs';
 import StateContext from '../app/src/context/context';

__tests__/HTMLPanel.test.tsx

@@ -22,7 +22,7 @@ function Test() {
 }
 
 
-test('Renders HTMLPanel component', () => {
+test('Renders HTMLPanel component properly', () => {
   render(
     <Test/>
   );
@@ -37,7 +37,8 @@ test('Renders HTMLPanel component', () => {
   expect(screen.getByText('Header 1')).toBeInTheDocument();
   expect(screen.getByText('Header 2')).toBeInTheDocument();
   expect(screen.getByText('Span')).toBeInTheDocument();
-})
+  expect(screen.queryByText('separator')).toBe(null);
+});
 
 test('Adds new custom element', () => {
   render(
@@ -54,5 +55,4 @@ test('Adds new custom element', () => {
   fireEvent.click(screen.getByDisplayValue('Add Element'));
 
   expect(screen.getByText('Testing')).toBeInTheDocument();
-})
-
+});