Merge pull request #9 from oslabs-beta/muiv4tov6

Final Demo With Style Fixes

Author: enigmawun

.gitignore

@@ -4,6 +4,7 @@ yarn.lock
 ### Linux ###
 *~
 
+RT.zip
 # temporary files which can be created if a process still has a handle open of a deleted file
 .fuse_hidden*
 

CHANGE_LOG.md

@@ -5,33 +5,31 @@
 
 ## Version 22.0.0 Changes
 
-### Potential Changes:
-
-- Export code does not actually build what it says it does - Bug fix: tags which are nested do not display accurate code in code preview
-- Fully retire jest tests
-- Complete Vitest testing suite
-- Make bottom panel only display context-relevant tabs
-- Moving chat link from bottom panel to upper right (would this require making it into a pop up?)
-- Migrate more state pieces into redux store??
-- Decluttering by adding right click and hover functionality
-- Move elements of tutorial into hover functionality
-- Add built-in component templates to the marketplace
-
 ### Changes:
 
-- Deleted all electron-related files and dependencies
-- Deleted all webpack-related files and dependencies
-- Deleted all babel-related files and dependencies (SL)
-- Deleted all jest-related files and dependencies (SL)
-- Migrated create create custom HTML component to left panel and completely removed from bottom panel (SL)
-- Migrated create create custom module component to left panel and completely removed from bottom panel (SL)
-- Migrated clear canvas to canvas container from nav bar and completely removed from nav bar (SL)
-- Removed page up and page down buttons and code from canvas container (SL)
+- Deleted depreciated electron-related files and dependencies
+- Deleted depreciated webpack-related files and dependencies
+- Deleted depreciated babel-related files and dependencies
+- Deleted depreciated jest-related files and dependencies
+- Migrated create create custom HTML component to left panel and completely removed from bottom panel
+- Migrated create create custom module component to left panel and completely removed from bottom panel
+- Migrated clear canvas to canvas container from nav bar and completely removed from nav bar
+- Removed page up and page down buttons and code from canvas container
+- Added right click functionality to component customization and removed from bottom panel
 - OAuth fully functional
 
 ### Recommendations for Future Enhancements:
 - Unify styling, we utilized a lot of inline styling to override prior version styling due to time
 - Light/Dark mode, suggest removing current code regarding it and reimplement from the ground up for light/dark themes
+- Export code does not actually build what it says it does - Bug fix: tags which are nested do not display accurate code in code preview
+- Fully retire jest tests
+- Complete Vitest testing suite
+- Make bottom panel only display context-relevant tabs
+- Moving chat link from bottom panel to upper right
+- Migrate more state pieces into redux store
+- Move elements of tutorial into hover functionality
+- Add built-in component templates to the marketplace
+- Reimplement VideoSDK (will need VIDEOSDK token in .env), changes made for v22 prevented VideoSDK from working with the collab feature, the code however still exists
 
 ## Version 21.0.0 Changes
 

Dockerfile

@@ -55,7 +55,7 @@ COPY ../server ./server
 
 # these things build dosent have so dont copy them through
 COPY package*.json ./
-COPY  .env .env
+#COPY  .env .env
 COPY ./config.js ./config.js
 
 

README.md

@@ -51,37 +51,35 @@
 **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/v21 MUI Canvas.png">
+  <img width="1000" src="./resources/v22 MUI 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 21.0.0
+## Changes with Version 22.0.0
 
-- **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 273 JSDoc comment blocks throughout the codebase.
-- **Cleanup**: Removed unused code, fixed bugs, and made major performance improvements.
+- **UI/UX Updates**: Updated the UI/UX to be more intuitive and user friendly, decreasing learning curve and improving accessibility.
+- **Cleanup**: Removed depreciated dependencies and unused code, migrated code and components to align with UI/UX direction, and cleaned up styling.
+- **OAuth**: Implemented OAuth with Google and Github for streamlined login and secure user accounts.
 - **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/v21 code preview.png">
+  <img width="1000" src="./resources/v22 code preview.png">
 </p>
 
 ## Preview
 
 Get a glimpse of how ReacType works!
 
 <p align="center">
-  <img width="1000" src="./resources/v21 Preview.gif"> 
+  <img width="1000" src="./resources/v22 Preview.gif"> 
 </p>
 
 <!-- NEED TO REPLACE THE TUTORIAL LINK -->
 
-## File Structure of ReacType Version 21.0.0
+## File Structure of ReacType Version 22.0.0
 
 Here is the main file structure:
 
@@ -100,11 +98,16 @@ Given to us courtesy of our friends over at React Relay
 ```bash
 npm install
 ```
+- Compile for production
+
+```bash
+npm run build
+```
 
 - To run the production build
 
 ```bash
-npm run prod
+npm start
 ```
 
 - To run tests
@@ -119,40 +122,12 @@ npm run test
 npm run dev
 ```
 
-- Note that DEV_PORT, NODE_ENV flag (=production or development) and VIDEOSDK token are needed in the .env file.
+- Open browser and navigate to localhost at specified port
+
+- Note that DEV_PORT and NODE_ENV flag (=production or development) 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
-
-```bash
-npm run dev
-npm run electron-dev
-```
-
-## Run Exported App
-
-- Open exported project directory
-- Install dependencies
-
-```bash
-npm install
-```
-
-- Build the app
-
-```bash
-npm run build
-```
-
-- Start an instance
-
-```bash
-npm run start
-```
-
-- Open browser and navigate to localhost at specified port
-
 ## Stack
 
 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

__tests__/NavBar.test.tsx

@@ -2,7 +2,11 @@ import { describe, it, expect, vi, afterAll, beforeEach } from 'vitest';
 import React from 'react';
 import { render, fireEvent, waitFor, screen } from '@testing-library/react';
 import { MemoryRouter } from 'react-router-dom';
-import { ThemeProvider, createTheme } from '@mui/material/styles';
+import {
+  ThemeProvider,
+  createMuiTheme,
+  makeStyles
+} from '@material-ui/core/styles';
 import NavBar from '../app/src/components/top/NavBar';
 import * as projectFunctions from '../app/src/helperFunctions/projectGetSaveDel';
 import { Provider } from 'react-redux';
@@ -20,7 +24,7 @@ const mockHTMLTypes = [
     placeHolderShort: 'div',
     placeHolderLong: '',
     framework: 'reactClassic',
-    nestable: true,
+    nestable: true
   },
   {
     id: 1000,
@@ -30,7 +34,7 @@ const mockHTMLTypes = [
     placeHolderShort: '',
     placeHolderLong: '',
     framework: '',
-    nestable: true,
+    nestable: true
   },
   {
     id: 1,
@@ -40,13 +44,13 @@ const mockHTMLTypes = [
     placeHolderShort: 'image',
     placeHolderLong: '',
     framework: 'reactClassic',
-    nestable: false,
-  },
+    nestable: false
+  }
 ];
 
 // Mocking the theme
-const theme = createTheme({
-  spacing: (value) => `${value}px`,
+const theme = createMuiTheme({
+  spacing: (value) => `${value}px`
 });
 
 // Mocking the logo
@@ -55,13 +59,13 @@ vi.mock('../../public/icons/win/logo.png', () => 'dummy-image-url');
 // Grabbing publish and unpublish functions
 vi.mock('../app/src/helperFunctions/projectGetSaveDel', () => ({
   publishProject: vi.fn(),
-  unpublishProject: vi.fn(),
+  unpublishProject: vi.fn()
 }));
 
 //mock the file saver library
 vi.mock('file-saver', () => ({
   ...vi.importActual('file-saver'),
-  saveAs: vi.fn(),
+  saveAs: vi.fn()
 }));
 
 afterAll(() => {
@@ -84,61 +88,59 @@ const renderNavBar = (store) => {
 describe('NavBar Component', () => {
   let store;
 
-  beforeEach(() =>{
+  beforeEach(() => {
     store = configureStore({
       reducer: rootReducer,
       preloadedState: {
         appState: {
           ...appStateInitialState,
           isLoggedIn: true,
           name: 'Mock Project Name',
-          HTMLTypes: mockHTMLTypes,
-        },
-      },
+          HTMLTypes: mockHTMLTypes
+        }
+      }
     });
-  })
+  });
 
   it('handles publish correctly with saved project', async () => {
     const publishProjectMock = vi.spyOn(projectFunctions, 'publishProject');
     publishProjectMock.mockResolvedValueOnce({
       _id: 'mockedId',
       name: 'Mocked Project',
-      published: true,
+      published: true
     });
 
-    renderNavBar(store)
+    renderNavBar(store);
 
-      const publishButton = screen.getByText('Publish');
-      fireEvent.click(publishButton);
+    const publishButton = screen.getByText('Publish');
+    fireEvent.click(publishButton);
 
     await waitFor(() => {
       expect(publishProjectMock).toHaveBeenCalled();
-    })
-
+    });
   });
 
   it('handles publish correctly with new project', async () => {
     const publishProjectMock = vi.spyOn(projectFunctions, 'publishProject');
     publishProjectMock.mockResolvedValueOnce({
       _id: 'mockedId',
-      name: 'My Project', 
-      published: true,
+      name: 'My Project',
+      published: true
     });
-  
+
     renderNavBar(store);
 
-      // Check if the "Publish" button is present
-      const publishButton = screen.getByText('Publish');
+    // Check if the "Publish" button is present
+    const publishButton = screen.getByText('Publish');
 
-        fireEvent.click(publishButton);
+    fireEvent.click(publishButton);
 
-      await waitFor(() =>{
-        expect(publishProjectMock).toHaveBeenCalled();
-      })
+    await waitFor(() => {
+      expect(publishProjectMock).toHaveBeenCalled();
+    });
   });
 
   it('handles export correctly', async () => {
-
     renderNavBar(store);
     // Find and click the export button
     const exportButton = screen.getByText('Export');
@@ -150,46 +152,40 @@ describe('NavBar Component', () => {
       expect(exportModal).toBeDefined();
     });
 
-    // Simulate clicking the export components 
+    // Simulate clicking the export components
     const exportComponentsOption = screen.getByText('Export components');
     fireEvent.click(exportComponentsOption);
-
   });
 
   it('handles dropdown menu correctly', async () => {
     const store = configureStore({
       reducer: rootReducer,
       preloadedState: {
         appState: {
-          ...appStateInitialState,
-        },
-      },
+          ...appStateInitialState
+        }
+      }
     });
 
     renderNavBar(store);
-      const dropdownMenu = screen.getAllByTestId('navDropDown')[0];
-      expect(dropdownMenu.getAttribute('class')).toContain('hideNavDropDown');
-
-
-      const moreVertButton = screen.getByTestId('more-vert-button');
-      fireEvent.click(moreVertButton);
-
+    const dropdownMenu = screen.getAllByTestId('navDropDown')[0];
+    expect(dropdownMenu.getAttribute('class')).toContain('hideNavDropDown');
 
-      expect(dropdownMenu.getAttribute('class')).toContain('navDropDown');
+    const moreVertButton = screen.getByTestId('more-vert-button');
+    fireEvent.click(moreVertButton);
 
+    expect(dropdownMenu.getAttribute('class')).toContain('navDropDown');
 
-      const clearCanvasMenuItem = screen.getByText('Clear Canvas');
-      fireEvent.click(clearCanvasMenuItem);
-      expect(dropdownMenu.getAttribute('class')).toContain('navDropDown');
+    const clearCanvasMenuItem = screen.getByText('Clear Canvas');
+    fireEvent.click(clearCanvasMenuItem);
+    expect(dropdownMenu.getAttribute('class')).toContain('navDropDown');
 
+    const marketplaceMenuItem = screen.getByText('Marketplace');
+    fireEvent.click(marketplaceMenuItem);
+    expect(dropdownMenu.getAttribute('class')).toContain('navDropDown');
 
-      const marketplaceMenuItem = screen.getByText('Marketplace');
-      fireEvent.click(marketplaceMenuItem);
-      expect(dropdownMenu.getAttribute('class')).toContain('navDropDown');
+    fireEvent.click(moreVertButton);
 
-      fireEvent.click(moreVertButton);
-
-      expect(dropdownMenu.getAttribute('class')).toContain('hideNavDropDown');
-    });
+    expect(dropdownMenu.getAttribute('class')).toContain('hideNavDropDown');
   });
-
+});