Merge pull request #16 from oslabs-beta/feature/drawer

Feature/drawer

Author: HM-Pfeiffer

CHANGE_LOG.md

@@ -3,6 +3,53 @@
   <h1 align="center">ReacType Change Log</h1>
 </p>
 
+## Version 21.0.0 Changes
+
+### Changes:
+
+- **Developer Improvement:**
+  - Fixed testing suite compatability issues and added 30 new tests for new features
+  - Added 264 JSDoc comment blocks throughout the codebase
+- **User Features:**
+  - **Material UI Components:**
+    - Integrated 49 new, pre-styled Material UI components
+    - Completely overhauled the code preview functionality to manage import statements, state, event handlers, and other essential variables and functions
+    - Revamped iFrame implementation to allow users to interact seamlessly with state-dependent Material UI components
+  - **UI updates to enhance user experience:**
+    - Updated left panel to include Material UI tab
+    - Made additional UI tweaks to accommodate additional components
+    - Introduced UI elements that organized components for easier navigation
+    - Added slider at bottom right-hand corner to allow resize of iframe
+- **Bugs Fixed:**
+  - Forgotten Password - Forgotten Password page now properly renders and enables a user to reset their password
+  - Customization Panel - Fixed numerous rendering issues to establish consistent performance and UI layout
+  - Tutorial Page - Fixed Link / Re-Route to Tutorial  
+
+### Recommendations for Future Enhancements:
+
+- Implement Shadcn/UI or other libraries in addition to MUI so that users have more pre-styled elements
+- Create customizable props for MUI Components (check MUI props branch for foundation)
+- Bug fix for marketplace preview display
+- Allow users to modify code dynamically in the code preview and reflect visual components in real time
+- Add zoom in and zoom out / scroll functionality to code preview and component tree
+- Bug fix: tags which are nested do not display accurate code in code preview
+- Add more functionality to the nav bar
+- Clean up unnecessary code / comments and deprecated libraries
+- Eliminate all Webpack associated files/folders/dependencies/etc... now that we run on Vite
+- Remove the many deprecated dependencies
+- Add additional features to the live chat (Links, reactions, raise hand feature etc)
+- Allow live chat to be a popup and draggable outside of the app
+- List all active meeting rooms to join
+- Make the app mobile responsive. Right now it does not work/look good on mobile
+- Light/Dark mode
+- Update links in the footer of the landing page
+- Update Tutorial Page UI/UX to reflect new changes
+- Fix test's / refactor to not use database rather create a mock database using Vitest
+- Update Electron for use (unknown if it's in use / working, a lot of code is deprecated)
+- Add more Testing
+- Update slider to more user-friendly resize iframe
+- Deny MUI library for gatsby, ensure Next.js works with MUI
+
 ## Version 20.0.0 Changes
 
 ### Changes:

README.md

@@ -21,7 +21,7 @@
 [![ContributorShield][contributors]][contributors-url]
 [![ForksShield][forks]][forks-url]
 ![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)
-![Version: 20.0.0](https://img.shields.io/badge/version-20.0.0-orange)
+![Version: 21.0.0](https://img.shields.io/badge/version-21.0.0-orange)
 
 </div>
 
@@ -36,7 +36,7 @@
 ![React](https://img.shields.io/badge/react-%2320232a.svg?style=for-the-badge&logo=react&logoColor=%2361DAFB)
 ![Redux](https://img.shields.io/badge/redux-%23593d88.svg?style=for-the-badge&logo=redux&logoColor=white)
 ![Socket.io](https://img.shields.io/badge/Socket.io-black?style=for-the-badge&logo=socket.io&badgeColor=010101)
-![Jest](https://img.shields.io/badge/-jest-%23C21325?style=for-the-badge&logo=jest&logoColor=white)
+![Vitest](https://img.shields.io/badge/-vitest-%23008000?style=for-the-badge&logo=vitest&logoColor=white)
 ![Babel](https://img.shields.io/badge/Babel-F9DC3e?style=for-the-badge&logo=babel&logoColor=black)
 ![Git](https://img.shields.io/badge/git-%23F05033.svg?style=for-the-badge&logo=git&logoColor=white)
 ![MUI](https://img.shields.io/badge/MUI-%230081CB.svg?style=for-the-badge&logo=mui&logoColor=white)
@@ -51,42 +51,42 @@
 **ReacType** is a React prototyping tool that allows users _visualize_ their application architecture dynamically, employing an interactive drop and drag display with real-time component code preview and a collaboration room that features live video and chat functionality. Generated code can be exported as a **React** app 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!**
 
 <p align="center">
-  <img width="1000" src="./resources/v20 empty canvas.png">
+  <img width="1000" src="./resources/v21 empty canvas.png">
 </p>
 
 Visit [reactype.dev](https://reactype.dev) to learn more about the product.
 
 Follow [@ReacType](https://twitter.com/reactype) on Twitter for important announcements.
 
-## Changes with Version 20.0.0
+## Changes with Version 21.0.0
 
-- **Collaboration Rooms**: Official launch of v2 collaboration rooms - Now featuring a secure live collaborative chat room with video and cursor tracking functionality!
-- **UI Updates**: The UI now features a new logo, zoom and scroll functionality to the canvas, and numerous updates to styling to reflect a more modern and user friendly experience.
-- **DX Updates**: Migrated from WebPack to Vite, drastically reducing HMR time. Now deployed via Heroku instead of AWS.
-- **Typescript Conversion**: Typescript coverage is at 95%.
+- **MUI Components**: Material UI can now be used to Create / Style your Applications
+- **UI Updates**: The UI now features a more modern and user friendly experience to reflect the newly added Components.
+- **DX Updates**: Migrated from Jest to Vitest to allow better compatibility, as well as to reduce complexity and streamline the Development Workflow.
+- **JS DOCS**: Added 264 JSDoc comment blocks throughout the codebase.
 - **Cleanup**: Removed unused code, fixed bugs, and made major performance improvements.
 - **And more:** See the [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!
 
 <p align="center">
-  <img width="1000" src="./resources/v20 collab room.png">
+  <img width="1000" src="./resources/v21 code preview.png">
 </p>
 
 ## Preview
 
 Get a glimpse of how ReacType works!
 
 <p align="center">
-  <img width="1000" src="./resources/canvasDemoV20.gif">
+  <img width="1000" src="./resources/"> // update w/ gif previewing MUI components
 </p>
 
 <!-- NEED TO REPLACE THE TUTORIAL LINK -->
 
-## File Structure of ReacType Version 20.0.0
+## File Structure of ReacType Version 21.0.0
 
 Here is the main file structure:
 
 <p align="center">
-  <img width="1000" src="./resources/v19filestructure.png">
+  <img width="1000" src="./resources/v19filestructure.png"> // update with updated file structure
 </p>
 
 Given to us courtesy of our friends over at React Relay
@@ -121,6 +121,7 @@ npm run dev
 
 - Note that DEV_PORT, NODE_ENV flag (=production or development) and VIDEOSDK token are needed in the .env file.
 - 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.)
+- If there are any errors on spin-up related to MONGO_DB, GITHUB_CLIENT, GITHUB_SECRET, GOOGLE_CLIENT, GOOGLE_SECRET, and SESSION_SECRET, those variables will have to be added to the .env file. To get Google and GitHub credentials, addtional information can be found at the following links: Google [here](https://support.google.com/cloud/answer/6158849?hl=en) and GitHub [here](https://docs.github.com/en/apps/oauth-apps/building-oauth-apps/creating-an-oauth-app).
 
 - To run the development build of electron app
 
@@ -154,7 +155,7 @@ npm run start
 
 ## Stack
 
-Typescript, React.js, Redux Toolkit, Javascript, ESM, Node.js (Express), HTML, CSS, MUI, GraphQL, Next.js, Gatsby.js, Electron, NoSQL, Webpack, TDD (Jest, React Testing Library, Playwright), OAuth 2.0, Websocket, SocketIO, Continuous Integration (Github Actions), Docker, AWS (ECR, Elastic Beanstalk), Ace Editor, Google Charts, React DnD, Vite
+Typescript, React.js, Redux Toolkit, Javascript, ESM, Node.js (Express), HTML, CSS, MUI, GraphQL, Next.js, Gatsby.js, Electron, NoSQL, Webpack, TDD (Vitest, React Testing Library, Playwright), OAuth 2.0, Websocket, SocketIO, Continuous Integration (Github Actions), Docker, AWS (ECR, Elastic Beanstalk), Ace Editor, Google Charts, React DnD, Vite
 
 ## Contributions
 

__tests__/DragAndDrop.test.tsx

@@ -1,5 +1,3 @@
-// @viit-enviroment jsdom
-// import '@testing-library/jest-dom';
 import { describe, it, expect } from 'vitest';
 import { fireEvent, render, screen } from '@testing-library/react';
 

__tests__/componentBuilder.test.tsx

@@ -0,0 +1,144 @@
+import { describe, it, expect, vi } from 'vitest';
+import React from 'react';
+import { render } from '@testing-library/react';
+import componentBuilder from '../app/src/helperFunctions/componentBuilder';
+import { ChildElement, MUIComponent } from '../app/src/interfaces/Interfaces';
+
+// Mock MUITypes data
+const MUITypes = [
+  {
+    tag: 'mui button',
+    componentData: {
+      name: 'mui button',
+      props: { children: 'Click me' }
+    }
+  }
+];
+vi.mock('../redux/MUITypes', () => MUITypes);
+
+describe('componentBuilder', () => {
+  it('renders a simple input component', () => {
+    const elements: Array<ChildElement> = [
+      {
+        type: 'HTML Element',
+        typeId: 1,
+        name: 'input',
+        childId: 1,
+        style: {},
+        attributes: { cssClasses: 'test-class' },
+        events: {},
+        stateProps: [],
+        passedInProps: [],
+        children: []
+      }
+    ];
+    const result = componentBuilder(elements, 1);
+    render(<>{result}</>);
+    // Using vitest's expect function to assert if the input element is rendered
+    expect(document.querySelector('input')).toBeTruthy();
+  });
+
+  it('handles MUI components', () => {
+    const elements: Array<MUIComponent> = [
+      {
+        type: 'MUI Component',
+        typeId: 2,
+        name: 'mui button',
+        childId: 2,
+        style: {},
+        attributes: {},
+        events: {},
+        stateProps: [],
+        passedInProps: [],
+        children: []
+      }
+    ];
+    const result = componentBuilder(elements, 2);
+    render(<>{result}</>);
+    // Assuming 'Click me' is rendered text for Button
+    expect(result[0]).toEqual(
+      JSON.stringify({
+        type: 'Button',
+        props: {
+          variant: 'contained',
+          color: 'primary',
+          sx: { m: 1 },
+          key: 3
+        },
+        children: 'Click Me'
+      })
+    );
+  });
+
+  it('skips separators and continues rendering', () => {
+    const elements: Array<ChildElement> = [
+      {
+        type: 'HTML Element',
+        typeId: 1,
+        name: 'separator',
+        childId: 1,
+        style: {},
+        attributes: {},
+        events: {},
+        stateProps: [],
+        passedInProps: [],
+        children: []
+      },
+      {
+        type: 'HTML Element',
+        typeId: 1,
+        name: 'img',
+        childId: 2,
+        style: {},
+        attributes: { compLink: 'http://example.com/image.png' },
+        events: {},
+        stateProps: [],
+        passedInProps: [],
+        children: []
+      }
+    ];
+    const result = componentBuilder(elements, 3);
+    render(<>{result}</>);
+    // Using vitest's expect function to assert if the img element has the correct src attribute
+    expect(document.querySelector('img')?.getAttribute('src')).toBe(
+      'http://example.com/image.png'
+    );
+  });
+
+  it('renders nested components', () => {
+    const elements: Array<ChildElement> = [
+      {
+        type: 'HTML Element',
+        typeId: 1,
+        name: 'div',
+        childId: 3,
+        style: {},
+        attributes: { cssClasses: 'container' },
+        events: {},
+        stateProps: [],
+        passedInProps: [],
+        children: [
+          {
+            type: 'HTML Element',
+            typeId: 1,
+            name: 'p',
+            childId: 4,
+            style: {},
+            attributes: { compText: 'Hello, world!' },
+            events: {},
+            stateProps: [],
+            passedInProps: [],
+            children: []
+          }
+        ]
+      }
+    ];
+    const result = componentBuilder(elements, 4);
+    render(<>{result}</>);
+    // Using vitest's expect function to assert if the text 'Hello, world!' is rendered within the container div
+    expect(document.querySelector('.container')).toBeTruthy();
+    expect(document.querySelector('.container')?.textContent).toContain(
+      'Hello, world!'
+    );
+  });
+});