Merge branch 'mergeBranch' into noah/feature

Author: noahFavelo

.dockerignore

@@ -1,2 +1 @@
 node_modules
-app/electron

.eslintrc.json

@@ -1,22 +1,46 @@
 {
   "extends": ["plugin:react/recommended", "plugin:@typescript-eslint/recommended", "airbnb-base"],
   "parserOptions": {
+    "ecmaVersion": 2024,
+    "sourceType": "module",
     "ecmaFeatures": {
       "jsx": true
+    }
+  },
+  "plugins": ["@typescript-eslint", "import", "react", "jsx-a11y"],
+  "settings": {
+    "react": {
+      "version": "detect"
     },
-    "ecmaVersion": 2018,
-    "sourceType": "module"
+    "import/resolver": {
+      "typescript": {
+        "alwaysTryTypes": true // This will help ESLint resolve `.ts` and `.tsx` files
+      }
+    }
   },
-  "plugins": ["import", "react", "jest", "jsx-a11y", "babel"],
-  "parser": "@babel/eslint-parser",
+  "parser": "@typescript-eslint/parser",
   "env": {
     "browser": true,
     "node": true,
-    "es6": true,
-    "jest": true
+    "es6": true
   },
   "rules": {
     "class-methods-use-this": "off",
-    "linebreak-style": 0
+    "linebreak-style": 0,
+    "@typescript-eslint/no-unused-vars": ["warn", { "argsIgnorePattern": "^_" }],
+    "no-unused-vars": "off", // disable the base rule, use the TypeScript version
+    "no-console": "off", // "warn": ensure that debugging statements are not left in the final version of the code; "off": disabled
+    "prefer-const": "warn", // enforces that variables that are never reassigned should be declared as const
+    "no-undef": "warn", // catch references to variables that have not been declared
+    "import/no-extraneous-dependencies": "off", // turns off the import/no-extraneous-dependencies rule
+    "@typescript-eslint/no-explicit-any": "off", // turns off the no-explicit-any rule
+    "import/extensions": [
+      "error",
+      "ignorePackages",
+      {
+        "ts": "never",
+        "tsx": "never"
+      }
+    ]
   }
 }

CHANGE_LOG.md

@@ -3,6 +3,24 @@
   <h1 align="center">ReacType Change Log</h1>
 </p>
 
+## 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
+- Delete all electron-related files and dependencies
+- Delete all webpack-related files and dependencies
+- Fully retire jest tests
+- Complete Vitest testing suite
+- Adding link for creation panel to reusable components tab
+- 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
+- Get OAuth fully functional
+- Add built-in component templates to the marketplace
+
 ## Version 21.0.0 Changes
 
 ### Changes:
@@ -23,7 +41,7 @@
 - **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  
+  - Tutorial Page - Fixed Link / Re-Route to Tutorial
 
 ### Recommendations for Future Enhancements:
 

__tests__/BottomTabs.test.tsx

@@ -1,26 +1,25 @@
 // @vitest-environment jsdom
-
 import { describe, it, expect } from 'vitest';
 import {
   fireEvent,
   render,
   screen,
   waitFor,
-  within
+  within,
 } from '@testing-library/react';
 
-import BottomTabs from '../app/src/components/bottom/BottomTabs';
 import { BrowserRouter } from 'react-router-dom';
+import { DndProvider } from 'react-dnd';
+import { HTML5Backend } from 'react-dnd-html5-backend';
+import { Provider } from 'react-redux';
+import React from 'react';
+import BottomTabs from '../app/src/components/bottom/BottomTabs';
 import ComponentPanel from '../app/src/components/right/ComponentPanel';
 import ContextManager from '../app/src/components/ContextAPIManager/ContextManager';
 import CustomizationPanel from '../app/src/containers/CustomizationPanel';
-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';
 
@@ -29,7 +28,7 @@ describe('Bottom Panel Render test', () => {
     const { unmount } = render(
       <Provider store={store}>
         <BottomTabs />
-      </Provider>
+      </Provider>,
     );
     expect(screen.getAllByRole('tab')).toHaveLength(7);
     expect(screen.getByText('Component Tree')).toBeDefined();
@@ -47,7 +46,7 @@ describe('Creation Panel', () => {
     const { unmount } = render(
       <Provider store={store}>
         <ComponentPanel isThemeLight={null} />
-      </Provider>
+      </Provider>,
     );
 
     fireEvent.click(screen.getByText('Create'));
@@ -62,20 +61,20 @@ describe('Creation Panel', () => {
     const { unmount } = render(
       <Provider store={store}>
         <ComponentPanel isThemeLight={null} />
-      </Provider>
+      </Provider>,
     );
 
     fireEvent.change(screen.getByLabelText('Name'), {
       target: {
-        value: '!@#'
-      }
+        value: '!@#',
+      },
     });
 
     fireEvent.click(screen.getByText('Create'));
 
     await waitFor(() => {
       expect(
-        screen.getByText('Component name must start with a letter.')
+        screen.getByText('Component name must start with a letter.'),
       ).toBeDefined();
     });
     unmount();
@@ -87,7 +86,7 @@ describe('HTML Panel', () => {
     const { unmount } = render(
       <Provider store={store}>
         <HTMLPanel isThemeLight={null} />
-      </Provider>
+      </Provider>,
     );
 
     fireEvent.click(screen.getByText('Add Element'));
@@ -102,26 +101,26 @@ describe('HTML Panel', () => {
     const { unmount } = render(
       <Provider store={store}>
         <HTMLPanel isThemeLight={null} />
-      </Provider>
+      </Provider>,
     );
 
     fireEvent.change(screen.getByLabelText('Element Name'), {
       target: {
-        value: '!@#'
-      }
+        value: '!@#',
+      },
     });
 
     fireEvent.change(screen.getByLabelText('Tag'), {
       target: {
-        value: '!@#'
-      }
+        value: '!@#',
+      },
     });
 
     fireEvent.click(screen.getByText('Add Element'));
 
     await waitFor(() => {
       expect(
-        screen.getAllByText('* Input must start with a letter. *')
+        screen.getAllByText('* Input must start with a letter. *'),
       ).toHaveLength(2);
     });
     unmount();
@@ -133,7 +132,7 @@ describe('Context Manager', () => {
     const { unmount } = render(
       <Provider store={store}>
         <ContextManager />
-      </Provider>
+      </Provider>,
     );
     expect(screen.getAllByRole('tab')).toHaveLength(3);
     unmount();
@@ -142,7 +141,7 @@ describe('Context Manager', () => {
     const { unmount } = render(
       <Provider store={store}>
         <ContextManager />
-      </Provider>
+      </Provider>,
     );
     expect(screen.getAllByRole('textbox')).toHaveLength(3);
     expect(screen.getAllByRole('button')).toHaveLength(3);
@@ -154,7 +153,7 @@ describe('Context Manager', () => {
     const { unmount } = render(
       <Provider store={store}>
         <ContextManager />
-      </Provider>
+      </Provider>,
     );
 
     fireEvent.click(screen.getByText('Assign'));
@@ -173,7 +172,7 @@ describe('State Manager', () => {
     const { unmount } = render(
       <Provider store={store}>
         <StateManager isThemeLight={null} />
-      </Provider>
+      </Provider>,
     );
     expect(screen.getAllByRole('heading')).toHaveLength(4);
     expect(screen.getAllByRole('textbox')).toHaveLength(2);
@@ -186,12 +185,12 @@ describe('State Manager', () => {
     const { unmount } = render(
       <Provider store={store}>
         <StateManager isThemeLight={null} />
-      </Provider>
+      </Provider>,
     );
     fireEvent.click(screen.getByText('Display'));
     expect(screen.getByRole('table')).toBeDefined();
     expect(
-      screen.getByText('State Initialized in Current Component:')
+      screen.getByText('State Initialized in Current Component:'),
     ).toBeDefined();
     unmount();
   });
@@ -204,14 +203,14 @@ describe('Customization Panel', () => {
         <BrowserRouter>
           <CustomizationPanel isThemeLight={true} />
         </BrowserRouter>
-      </Provider>
+      </Provider>,
     );
     expect(screen.getByText('Parent Component:')).toBeDefined();
     expect(screen.getByText('App')).toBeDefined();
     expect(
       screen.getByText(
-        'Drag or click an html element to the canvas to see what happens!'
-      )
+        'Drag or click an html element to the canvas to see what happens!',
+      ),
     ).toBeDefined();
     unmount();
   });
@@ -228,7 +227,7 @@ describe('Canvas', () => {
             <CustomizationPanel isThemeLight={true} />
           </DndProvider>
         </BrowserRouter>
-      </Provider>
+      </Provider>,
     );
     const drop = screen.getByTestId('drop');
     const div = screen.getAllByText('Div')[0];
@@ -238,7 +237,7 @@ describe('Canvas', () => {
     fireEvent.dragEnter(drop);
     fireEvent.dragOver(drop);
     fireEvent.drop(drop);
-    //check if customization panel elements are rendering correctly
+    // check if customization panel elements are rendering correctly
     const panel = screen.getAllByTestId('customization')[0];
     expect(within(panel).getAllByRole('textbox')).toHaveLength(4);
     // check dropdowns

__tests__/contextReducer.test.js

@@ -1,6 +1,4 @@
-import {
-  describe, it, expect, beforeEach,
-} from 'vitest';
+import { describe, it, expect, beforeEach } from 'vitest';
 import subject from '../app/src/redux/reducers/slice/contextReducer.ts';
 
 describe('contextReducer test', () => {