Merge pull request #205 from oslabs-beta/master

Merging Version 16

Author: rachelk585

.babelrc

@@ -13,8 +13,8 @@
   ],
   // presets are a set of of plug-ins
   "presets": [
+    ["@babel/preset-env", { "targets": { "node": "current" } }],
     "@babel/preset-typescript",
-    "@babel/preset-env",
     "@babel/preset-react"
   ]
 }

.eslintrc.json

@@ -8,7 +8,7 @@
     "sourceType": "module"
   },
   "plugins": ["import", "react", "jest", "jsx-a11y", "babel"],
-  "parser": "babel-eslint",
+  "parser": "@babel/eslint-parser",
   "env": {
     "browser": true,
     "node": true,

.github/workflows/main.yml

@@ -6,9 +6,9 @@ name: CI
 on:
   # Triggers the workflow on push or pull request events but only for the master branch
   push:
-    branches: [ master ]
+    branches: [dev]
   pull_request:
-    branches: [ master ]
+    branches: [dev]
 
   # Allows you to run this workflow manually from the Actions tab
   workflow_dispatch:
@@ -23,11 +23,15 @@ jobs:
     # Steps represent a sequence of tasks that will be executed as part of the job
     steps:
       # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
+        with:
+          node-version: 18.13.0
 
       # Runs a single command using the runners shell
-      - name: Run a one-line script
-        run: echo Hello, world!
+      - name: Install dependencies
+        run: npm install
+      - name: Run all tests
+        run: npm run test --bail
 
       # Runs a set of commands using the runners shell
       - name: Run a multi-line script

.gitignore

@@ -498,3 +498,6 @@ server/RootCA.srl
 
 
 # End of https://www.gitignore.io/api/node,linux,macos,windows,visualstudio,yarn
+/test-results/
+/playwright-report/
+/playwright/.cache/

.travis.yml

@@ -1,17 +1,17 @@
-language: node_js
-node_js:
-  - "16"
-dist: xenial
-arch: amd64
-script: 
-  - python3 -VV
-  - pip install --upgrade pip
-  - pip -V
-  - npm run test
-cache:
-  directories:
-    - node_modules
-install: 
-  - npm install --legacy-peer-deps
-env:
-  global:  PATH=/opt/python/3.7.1/bin:$PATH
+# language: node_js
+# node_js:
+#   - "16"
+# dist: xenial
+# arch: amd64
+# script: 
+#   - python3 -VV
+#   - pip install --upgrade pip
+#   - pip -V
+#   - npm run test
+# cache:
+#   directories:
+#     - node_modules
+# install: 
+#   - npm install --legacy-peer-deps
+# env:
+#   global:  PATH=/opt/python/3.7.1/bin:$PATH

CHANGE_LOG.md

@@ -3,6 +3,56 @@
   <h1 align="center">ReacType Change Log</h1>
 </p>
 
+**Version 16.0.0 Changes**
+
+Changes:<br>
+
+- Developer Improvements:
+  - Testing Coverage:
+    - Version 16 introduces end-to-end testing with Playwright and adds additional unit testing with React Testing Library.
+    - Testing coverage has now doubled since version 15, and now sits at just over 50% coverage.
+    - Transitioned away from Enzyme to maintain consistency with RTL and Jest.
+  - Typescript Conversion:
+    - Upped typescript coverage from 30% to 80%.
+    - Fixed multiple type errors in component files.
+  - Added CI pipeline for testing:
+    - Transitioned away from Travis CI to Github Actions for improved CI pipeline. Github Actions will now run all tests upon each pull request to dev.
+  - Updated OAuth and Sign In Features:
+    - Sign in feature now connected to the latest database version.
+    - Fixed bug that allowed only one OAuth user to sign in at a time.
+    - Github OAuth is now connected to Adam Vanek.
+  - Dev Bug Fixes:
+    - Debugged ‘worker error’ on code preview & style editor by refactoring Ace-Build components.
+    - Additional logic added for edge cases in inputs for context manager, state manager, and signup features.
+    - Cleaned up hundreds of lines of outdated code and deleted multiple unused and duplicate files
+  - Dependency Updates:
+    - All previously outdated dependencies are now updated. Time it takes for the app to bundle in dev is now cut in half.
+- User Features:
+  - Export Button:
+    - Export feature on the 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.
+  - CSS Live Rendering:
+    - CSS Editor changes now rendered visually in the demo page on save.
+  - UI Changes:
+    - Fixed multiple contrast issues with white text displaying on white background in State Manger Display tab tables, state management tables, table menu dropdowns, Context Manager tables, and Context Manager display.
+    - Adjusted context manager interface for improved UX when creating context and saving key/value pairs.
+    - Fixed border styling within modals and error messages that were cutting off inputs on focus.
+    - Added save button to customization tab.
+  - Bug Fixes:
+    - Manage project features for registered users now successfully saves, opens, and deletes projects.
+    - State Manager now successfully deletes state from parent components.
+    - Context Manager display chart renders correctly.
+    - CSS Editor contents now persist after rerender.
+
+Recommendations for Future Enhancements:<br>
+
+- Refactor away from MUI. MUI is very opinionated and while creating components with it is easy it leaves a lot to be desired. Dark Mode also needs to be improved as color contrast is very low.
+- 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.
+- Continue code cleanup. Continue cleanup of outdated and unused code and files
+
 **Version 15.0.0 Changes**
 
 Changes:<br>

README.md

@@ -27,7 +27,7 @@
 </p>
 
 <p align="center">
-  <img width="1000" src="./resources/ReadMe.gif">
+  <img width="1000" src="./resources/demo.gif">
 </p>
 
 **ReacType** is a rapid prototyping tool that allows users _visualize_ their application architecture dynamically, employing a _drag-and-drop canvas display_ and an interactive, _real-time component code preview_ that 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!**
@@ -40,12 +40,14 @@ Follow [@ReacType](https://twitter.com/reactype) on Twitter for important announ
 
 If you want to read about using ReacType, the [User Manual](https://reactype-1.herokuapp.com/#/tutorial) is free and available online now.
 
-## Changes with version 15.0.0
+## Changes with version 16.0.0
 
-- **Consolidated State Management**: Reactype was using mutliple methods of State Management. We consolidated this all to the modern version of Redux Toolkit to enhance the developer experience and make it easier to debug.
-- **Major Dependency Updates**: No more workarounds required to get new developers up and running in the project. A simple npm install works as intended.
-- **Websockets**: Users can now join rooms to collaborate on a project together in real time!
-- **Fully Deployed Web Application**: To utilize these new features we have hosted the full application via AWS so users can easily use Reactype without a download.
+- **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.
 - **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