Merge pull request #214 from oslabs-beta/master

Official ReacType v17 Launch

Author: liamroh

.gitignore

@@ -501,3 +501,27 @@ server/RootCA.srl
 /test-results/
 /playwright-report/
 /playwright/.cache/
+
+#amplify-do-not-edit-begin
+amplify/\#current-cloud-backend
+amplify/.config/local-*
+amplify/logs
+amplify/mock-data
+amplify/mock-api-resources
+amplify/backend/amplify-meta.json
+amplify/backend/.temp
+build/
+dist/
+node_modules/
+aws-exports.js
+awsconfiguration.json
+amplifyconfiguration.json
+amplifyconfiguration.dart
+amplify-build-config.json
+amplify-gradle-config.json
+amplifytools.xcconfig
+.secret-*
+**.sample
+#amplify-do-not-edit-end
+
+/amplify/team-provider-info.json

CHANGE_LOG.md

@@ -3,6 +3,47 @@
   <h1 align="center">ReacType Change Log</h1>
 </p>
 
+**Version 17.0.0 Changes**
+
+Changes:<br>
+
+- Developer Improvements:
+  - Testing Coverage:
+    - Version 17 added testing for the added marketplace related components
+    - Testing coverage sits at ~60%
+  - Typescript continued and now sits at ~80%
+  - Dev Bug Fixes:
+    - Additional logic added for edge cases in inputs for state manager (passing in non-Arrays/non-Objects as Array type and Object type).
+    - Cleaned up hundreds of lines of outdated code and archived multiple unused and duplicate files
+- User Features:
+  - UI updated with a modern style for a better developer experience
+    - Added many user feedback alerts for better experience including alerts for when projects are published, cloned, deleted, HTML custom tags are created, context created, or custom component created.
+    - Built a specific buttons menu that individually display the HTML elements, reusable components created, and join room option.
+    - Redesigned the state manager panel option to be readable and functional. 
+    - Drop down menu now closes only when the user clicks outside of the menu
+  - Marketplace:
+    - Implemented a dedicated area for developers to share their projects
+    - Routing handled by React Router
+    - Projects can also be cloned to the user's account to be used and edited with the addition of a button
+    - Added search functionality to search by username and project name
+    - Included a separate section in the Saved Projects and Delete Projects modal in the Manage Project menu for cloned projects from the Marketplace
+  - Publish/Unpublish Button: 
+    - Publish feature on the web app allows users to publish their saved project files into the Marketplace from the main app page
+    - Dynamically switches between publish/unpublish depending on whether the loaded project is in the Marketplace
+
+Recommendations for Future Enhancements:<br>
+
+- Add a comment section and description section for each published project
+- Consider maybe a way for users to pull individual components from one project into another
+- Use localforage or other methods to store unsaved projects either on logout or accidental closure of browser, so that when the user opens the browser again it is still there.
+- Continue expanding testing coverage. Improve testing by adding additional unit tests, expanding end-to-end testing, and introducing integration testing.
+- Continue quality Typescript conversion. Continue to fix type errors within component files.
+- Modularize appStateSlice file. Further modularization is needed for readability and maintainability.
+- Solve residual bugs. Undo & Redo buttons on customization page not functioning as expected. Backend bugs persist as seen in the console when running the dev environment. Resolve electron app functionality to coincide with web app functionality.
+- Take a look at the join room functionality using web sockets in order to allow users to collaborate on the same project at the same time.
+- For the state manager option in the data table there is a MuiData-menu that is not visible when clicking it and after the filter option is clicked it creates a white space in the bottom of the page.
+- Continue code cleanup. Continue cleanup of outdated and unused code and files
+
 **Version 16.0.0 Changes**
 
 Changes:<br>

README.md

@@ -58,16 +58,15 @@ Follow [@ReacType](https://twitter.com/reactype) on Twitter for important announ
 
 ### Documentation
 
-If you want to read about using ReacType, the [User Manual](https://reactype-1.herokuapp.com/#/tutorial) is free and available online now.
+If you want to read about using ReacType, the [User Manual](https://reactype-1.herokuapp.com/#/tutorial) is free and available online now. 
+<!-- NEED TO REPLACE THE TUTORIAL LINK -->
 
-## Changes with version 16.0.0
+## Changes with version 17.0.0
 
-- **Improved Testing Coverage**: Testing coverage has now doubled since version 15, and now sits at just over 50% coverage. Version 16 introduces end-to-end testing with Playwright and adds additional unit testing with React Testing Library.
-- **Major Bug Fixes**: Manage Project Features now work as expected. State Manager now deletes state from parent components. Context Manager Display Tab and CSS Editor now rendering as expected.
-- **Typescript Conversion**: Typescript coverage has improved from 30% to 80% with additional interfaces added for quality improvements.
-- **Live CSS Demo Rendering**: CSS Editor changes now rendered visually in the demo page on save.
-- **Universal Exports on Web App**: Export feature on web app now allows users to download the current project as a zip file with modularized component folder, html, and css file included. Export feature is now available to all users including guests.
-- **UI Improvements**: Fixed multiple contrast issues with white text displaying on white background. Adjusted context manager interface for improved UX. Fixed border styling within modals and error messages.
+- **Improved Testing Coverage**: Testing coverage now sits at ~60%.
+- **Typescript Conversion**: Typescript coverage now sits at ~80%.
+- **UI Overhaul**: Upgraded the UI of the application with a more modern style and better developer experience
+- **Marketplace Feature**: Implemented a dedicated area for developers to share their projects, 
 - **And more:** See [change log](https://github.com/open-source-labs/ReacType/blob/master/CHANGE_LOG.md) for more details on what was changed from the previous versions as well as plans for upcoming features!
 
 ## File Structure courtesy of Reactype version 14.0.0

__tests__/BottomTabs.test.tsx

@@ -1,35 +1,37 @@
-import React from 'react';
-import { Provider } from 'react-redux';
 import '@testing-library/jest-dom';
+
 import {
+  fireEvent,
   render,
   screen,
-  fireEvent,
   waitFor,
   within
 } from '@testing-library/react';
+
 import BottomTabs from '../app/src/components/bottom/BottomTabs';
-import ContextManager from '../app/src/components/ContextAPIManager/ContextManager';
-import store from '../app/src/redux/store';
+import { BrowserRouter } from 'react-router-dom';
 import ComponentPanel from '../app/src/components/right/ComponentPanel';
-import HTMLPanel from '../app/src/components/left/HTMLPanel';
-import StateManager from '../app/src/components/StateManagement/StateManagement';
+import ContextManager from '../app/src/components/ContextAPIManager/ContextManager';
 import CustomizationPanel from '../app/src/containers/CustomizationPanel';
-import { BrowserRouter } from 'react-router-dom';
-import DragDropPanel from '../app/src/components/left/DragDropPanel';
-import MainContainer from '../app/src/containers/MainContainer';
 import { DndProvider } from 'react-dnd';
+import DragDropPanel from '../app/src/components/left/DragDropPanel';
 import { HTML5Backend } from 'react-dnd-html5-backend';
+import HTMLPanel from '../app/src/components/left/HTMLPanel';
+import MainContainer from '../app/src/containers/MainContainer';
+import { Provider } from 'react-redux';
+import React from 'react';
+import StateManager from '../app/src/components/StateManagement/StateManagement';
+import store from '../app/src/redux/store';
 
 describe('Bottom Panel Render Test', () => {
-  test('should render all seven tabs', () => {
+  test('should render all six tabs', () => {
     render(
       <Provider store={store}>
         <BottomTabs />
       </Provider>
     );
-    expect(screen.getAllByRole('tab')).toHaveLength(7);
-    expect(screen.getByText('Code Preview')).toBeInTheDocument();
+    expect(screen.getAllByRole('tab')).toHaveLength(6);
+    // expect(screen.getByText('Code Preview')).toBeInTheDocument();
     expect(screen.getByText('Component Tree')).toBeInTheDocument();
     expect(screen.getByText('Creation Panel')).toBeInTheDocument();
     expect(screen.getByText('Customization')).toBeInTheDocument();

__tests__/DragAndDrop.test.tsx

@@ -1,16 +1,17 @@
-import React from 'react';
 import '@testing-library/jest-dom';
-import { DndProvider } from 'react-dnd';
-import { HTML5Backend } from 'react-dnd-html5-backend';
+
 import { fireEvent, render, screen } from '@testing-library/react';
-import DragDropPanel from '../app/src/components/left/DragDropPanel';
+
 import ComponentDrag from '../app/src/components/left/ComponentDrag';
+import { DndProvider } from 'react-dnd';
+import DragDropPanel from '../app/src/components/left/DragDropPanel';
+import { HTML5Backend } from 'react-dnd-html5-backend';
+import MainContainer from '../app/src/containers/MainContainer';
 import { Provider } from 'react-redux';
+import React from 'react';
 import store from '../app/src/redux/store';
-import MainContainer from '../app/src/containers/MainContainer';
 import { within } from '@testing-library/react';
 
-
 function TestContext(component) {
   return (
     <Provider store={store}>
@@ -48,7 +49,7 @@ describe('Drag and Drop Side Panel', () => {
     expect(screen.getByText('LinkTo')).toBeInTheDocument();
   });
 
-  test('Should render Roots Components and Reusbale components', () => {
+  test.skip('Should render Roots Components and Reusbale components', () => {
     render(TestContext(<ComponentDrag />));
 
     expect(screen.getByText('Root Components')).toBeInTheDocument();