Merge pull request #313 from oslabs-beta/main

Release Reactime version 20

Author: sergeylvq

.babelrc

@@ -1,4 +1,3 @@
 {
-  "presets": ["airbnb", "@babel/preset-typescript"],
-  "plugins": ["@emotion"]
+  "presets": ["airbnb", "@babel/preset-typescript"]
 }

README.fr.md

@@ -36,7 +36,7 @@
 <br>
 
 <p align="center">
-<img src="./assets/new-reactime.gif" />
+<img src="./assets/v20/Overview.gif" />
 </p>
 
 <p align="center">
@@ -124,6 +124,13 @@ Après avoir cloné ce référentiel, les développeurs peuvent simplement exéc
 - télécharger les snapshots actuels en mémoire
 - titres déclaratifs dans la barre latérale des actions
 
+<h1>Quoi de neuf !</h1>
+Reactime 20.0 inclut plusieurs améliorations clés sous le capot pour améliorer les performances et résoudre les bogues existants, ainsi qu'une UX remaniée pour atteindre la compatibilité WCAG.
+
+Nous avons résolu plusieurs bogues persistants, y compris un problème majeur qui faisait planter les applications utilisant Reactime lors de l'utilisation de la fonctionnalité de connexion ou de soumission. Dans le cadre de nos efforts pour améliorer les performances globales de Reactime, nous avons continué à implémenter TypeScript dans toute la base de code et créé de nouveaux tests avec React Testing Library. Nous avons également rendu les tests plus robustes, améliorant les tests existants et corrigeant les environnements de test défectueux. Enfin, nous avons mis à jour Reactime en supprimant certains codes et packages obsolètes, réduisant ainsi les erreurs de compilation.
+
+Nous avons mis à jour l'UX, en recherchant la cohérence avec les directives pour l'accessibilité des contenus Web (WCAG). Plus précisément, nous avons amélioré la taille et la conception des éléments cibles dans Reactime et soigneusement choisi de nouveaux contrastes de couleurs.
+
 ## <b>En savoir plus</b>
 
 - [Time-Travel State with Reactime](https://medium.com/better-programming/time-traveling-state-with-reactime-6-0-53fdc3ae2a20)
@@ -202,6 +209,14 @@ Après avoir cloné ce référentiel, les développeurs peuvent simplement exéc
 - **Ngoc Zwolinski** - [@ngoczwolinski](https://github.com/ngoczwolinski)
 - **Peter Lam** - [@dev-plam](https://github.com/dev-plam)
 - **Zachary Freeman** - [@zacharydfreeman](https://github.com/zacharydfreeman/)
+- **Jackie Yuan** - [@yuanjackie1](https://github.com/yuanjackie1)
+- **Jasmine Noor** - [@jasnoo](https://github.com/jasnoo)
+- **Minzo Kim** - [@minzo-kim](https://github.com/minzo-kim)
+- **Mark Teets** - [@MarkTeets](https://github.com/MarkTeets)
+- **Nick Huemmer** - [@NickHuemmer](https://github.com/ElDuke717)
+- **James McCollough** - [@j-mccoll](https://github.com/j-mccoll)
+- **Mike Bednarz** - [@mikebednarz](https://github.com/mikebednarz)
+- **Sergei Liubchenko** - [@sergeylvq](https://github.com/sergeylvq)
 
 ## <b>License </b>
 

README.md

@@ -28,7 +28,7 @@
 <br>
 
 <p align="center">
-<img src="./assets/v19/Overview.gif" />
+<img src="./assets/v20/Overview.gif" />
 </p>
 
 <p align="center">
@@ -47,7 +47,7 @@ be viewed in Diff mode.
 <br>
 
 <p align="center">
-<img src="./assets/v19/map.gif" />
+<img src="./assets/v20/map.gif" />
 </p>
 <br>
 
@@ -60,10 +60,6 @@ name.
 <br>
 <br>
 
-<!-- <p align="center">
-<img src="./assets/action-comparison.gif" />
-</p> -->
-
 ### 🔹 Components Comparison
 
 When toggled to a specific snapshot, a visualization of the individual
@@ -73,11 +69,6 @@ each component upon hovering.
 <br>
 <br>
 
-<p align="center">
-<img src="./assets/v19/performance.gif" />
-</p>
-<br>
-
 ### 🔹 Recording
 
 Whenever state is changed (whenever setState, useState is called), this
@@ -87,7 +78,7 @@ snapshot will be displayed in Chrome DevTools under the Reactime panel.
 <br>
 
 <p align="center">
-<img src="./assets/v19/history.gif" />
+<img src="./assets/v20/history.gif" />
 </p>
 <br>
 
@@ -147,15 +138,15 @@ of the structure and interfaces of the codebase.
 
 <h1>What's New!</h1>
 
-<b>Reactime 19.0</b> comes with UI updates to enhance the developer's experience, as well as a much-needed revamping of the codebase to reflect current industry standards and better maintainability for future contributors.
+Reactime 20.0 includes several key improvements under the hood to improve performance and resolve existing bugs, as well as a revamped UX to achieve WCAG compatibility.
 
-<i>UI Updates</i>
+<i>Under the Hood</i>
 
-To handle displaying large amounts of data, we have changed how nested structures like objects and arrays are displayed to now be collapsible and scrollable. In addition, we've updated component information to include the necessary component "key" information, and data now also persists on hover, eliminating the need to leave the cursor in one place.
+We have resolved several persistent bugs, including a major issue that caused apps using Reactime to crash when using login or submit functionality. As part of our effort to improve Reactime performance overall, we have continued to implement TypeScript throughout the codebase and created new tests with React Testing Library. We have also made testing more robust, improving existing tests and fixing broken test environments. Lastly, we have upgraded Reactime by removing some deprecated code and packages, reducing compilation errors.
 
-<i>Under the Hood</i>
+<i>Accessibility</i>
 
-We are happy to say that we've migrated from Enzyme to React Testing Library to eliminate the need for the Enzyme adapter, converted from JavaScript to TypeScript to ensure type safety, and updated the traversal of the React Fiber Tree to accurately extract useState data for previously unsupported edge cases.
+We have updated the UX, seeking consistency with the Web Content Accessibility Guidelines (WCAG). Specifically, we have improved the size and design of target elements throughout Reactime and carefully chosen new color contrasts to ensure WCAG compatibility.
 
 If you would like to read more about previous releases, click <a href="https://github.com/open-source-labs/reactime/releases">here!</a>
 
@@ -231,7 +222,7 @@ Node v16.16.0, please use script 'npm run devlegacy' | 'npm run buildlegacy'
 
 ## <b>Read More</b>
 
-- [It's time for Reactime 19.0!](linkhere)
+- [It's time for Reactime 20.0!](linkhere)
 
 ## <b>Authors</b>
 
@@ -318,6 +309,10 @@ Node v16.16.0, please use script 'npm run devlegacy' | 'npm run buildlegacy'
 - **Jasmine Noor** - [@jasnoo](https://github.com/jasnoo)
 - **Minzo Kim** - [@minzo-kim](https://github.com/minzo-kim)
 - **Mark Teets** - [@MarkTeets](https://github.com/MarkTeets)
+- **Nick Huemmer** - [@NickHuemmer](https://github.com/ElDuke717)
+- **James McCollough** - [@j-mccoll](https://github.com/j-mccoll)
+- **Mike Bednarz** - [@mikebednarz](https://github.com/mikebednarz)
+- **Sergei Liubchenko** - [@sergeylvq](https://github.com/sergeylvq)
 
 ## <b>License </b>
 

README.rus.md

@@ -19,19 +19,20 @@
 <br>
 
 <p align="center">
-<img src="./assets/new-reactime.gif" />
+<img src="./assets/v20/Overview.gif" />
 </p>
 
-<b>Reactime 18.0</b> вводит ряд новых и улучшенных функций, направленных на оптимизацию производительности и улучшение совместимости.
-С поддержкой Next.js и Remix, увеличенной покрытия тестов (93% на бэкенде, необходимо больше на фронтенде) и структурных улучшений в кодовой базе.
-Кроме того, мы гордимся анонсом запуска нашего вновь переработанного веб-сайта, который служит центром для последних обновлений и информации о Reactime.
-Для помощи в отладке мы включили демонстрационные приложения для Next.js и Remix, что позволяет будущим итераторам тестировать и устранять ошибки с большей легкостью и эффективностью.
+<b>Reactime 20.0</b>
+
+Reactime 20.0 включает в себя несколько ключевых улучшений для повышения производительности и устранения существующих ошибок, а также переработанный пользовательский интерфейс для обеспечения совместимости с WCAG.
+
+Мы исправили несколько постоянных ошибок, в том числе серьезную проблему, которая приводила к сбою приложения, использующих Reactime, при использовании функций входа или отправки. Мы продолжили внедрять TypeScript в кодовую базу и создали новые тесты с библиотекой тестирования React. Мы также сделали тестирование более надежным, улучшив существующие тесты и исправив неработающие тесты. Наконец, мы обновили Reactime, удалив некоторый устаревший код и пакеты, уменьшив количество ошибок компиляции.
+
+Мы обновили взаимодействие с пользователем, в соответствие с требованиями Руководства по доступности веб-контента (WCAG). В частности, мы улучшили размер и дизайн целевых элементов в Reactime и тщательно выбрали новые цветовые контрасты.
 
 <b>Reactime</b> - расширение для дебаггинга/отладки React приложений. Оно создает снэпшоты при каждом изменении состояния (state) и позволяет пользованию прыгать на любое предыдущее состояние (state). 
 В настоящее время Reactime поддерживает React приложения с классовыми, функциональными компонентами, хуками и Context API.
 
-В Reactime версии 7.0 отлажены баги предыдущих версий, улучшена визуализация данных отношений между компонентами. Также новая версия включает в себя расширенную документацию для разработчиков, которые хотят работать над приложением.
-
 После загрузки Reactime вы можете протестировать его полную функциональность на любом вашем React приложении в режиме разработки (dev mode). В продакшен режиме вы можете только работать с картой компонентов.
 
 ## <b>Установка</b>
@@ -90,19 +91,6 @@ Reactime beta поддерживает приложения, написанны
 
 После клонирования репозитория, вы можете использовать команду `npm run docs` в корневой папке, которая генерирует файл в браузере `/docs/index.html`. Это упростит знакомство с приложением и поможет вам ознакомиться со структурой и интерфейсом существующего кода.
 
-### <b>Дополнительный функционал</b>
-
-- identifying unnecessary re-renders
-- hover functionality to view tooltip details on state visualizations
-- ability to pan and zoom on state visualizations
-- a dropdown to support development of projects on multiple tabs
-- a slider to move through snapshots quickly
-- a play button to move through snapshots automatically
-- a lock button, which stops recording each snapshot
-- a persist button to keep snapshots upon refresh (handy when changing code and debugging)
-- download/upload the current snapshots in memory
-- declarative titles in the actions sidebar
-
 ## <b>Узнать больше о Reactime и React Fiber</b>
 
 - [Time-Travel State with Reactime](https://medium.com/better-programming/time-traveling-state-with-reactime-6-0-53fdc3ae2a20)
@@ -111,6 +99,7 @@ Reactime beta поддерживает приложения, написанны
 - [Deep in Weeds with Reactime, Concurrent React_fiberRoot, and Browser History Caching](https://itnext.io/deep-in-the-weeds-with-reactime-concurrent-react-fiberroot-and-browser-history-caching-7ce9d7300abb)
 
 ## <b>Авторы</b>
+
 - **Ben Margolius** - [@benmarg](https://github.com/benmarg)
 - **Eric Yun** - [@ericsngyun](https://github.com/ericsngyun)
 - **James Nghiem** - [@jemzir](https://github.com/jemzir)
@@ -180,6 +169,14 @@ Reactime beta поддерживает приложения, написанны
 - **Ngoc Zwolinski** - [@ngoczwolinski](https://github.com/ngoczwolinski)
 - **Peter Lam** - [@dev-plam](https://github.com/dev-plam)
 - **Zachary Freeman** - [@zacharydfreeman](https://github.com/zacharydfreeman/)
+- **Jackie Yuan** - [@yuanjackie1](https://github.com/yuanjackie1)
+- **Jasmine Noor** - [@jasnoo](https://github.com/jasnoo)
+- **Minzo Kim** - [@minzo-kim](https://github.com/minzo-kim)
+- **Mark Teets** - [@MarkTeets](https://github.com/MarkTeets)
+- **Nick Huemmer** - [@NickHuemmer](https://github.com/ElDuke717)
+- **James McCollough** - [@j-mccoll](https://github.com/j-mccoll)
+- **Mike Bednarz** - [@mikebednarz](https://github.com/mikebednarz)
+- **Sergei Liubchenko** - [@sergeylvq](https://github.com/sergeylvq)
 
 ## <b>License </b>
 

assets/v19/Overview.gif

@@ -28,7 +28,7 @@ app.use(morgan("tiny"));
 app.all(
   "*",
   process.env.NODE_ENV === "development"
-    ? (req, res, next) => {
+    ? (req: any, res: any, next: any) => {
         purgeRequireCache();
 
         return createRequestHandler({
@@ -41,7 +41,7 @@ app.all(
         mode: process.env.NODE_ENV,
       })
 );
-const port = process.env.PORT || 3003;
+const port: number | string = process.env.PORT || 3003;
 
 app.listen(port, () => {
   console.log(`Express server listening on port ${port}`);

assets/v19/history.gif

@@ -1,5 +1,5 @@
 {
-  "include": ["remix.env.d.ts", "**/*.ts", "**/*.tsx"],
+  "include": ["remix.env.d.ts", "**/*.ts", "**/*.tsx", "server.ts"],
   "compilerOptions": {
     "lib": ["DOM", "DOM.Iterable", "ES2019"],
     "isolatedModules": true,

assets/v19/map.gif

@@ -1,8 +1,18 @@
+@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');
+
+:root {
+  --primary-red-color: #F00008;
+  --background-color1: #f6f6f6;
+  --secondary-blue-color: #62d6fb;
+  --fire-rose-red: #FF6569;
+  --secondary-color: #6288fb;
+  --text-color: #330002;
+}
 
 body {
   margin: 0;
-  font-family: Arial, Helvetica, sans-serif;
-  background-color: #FFF4F4;
+  font-family: 'Lato', sans-serif;
+  background-color: var(--background-color1);
 }
 
 h1, h2, h4 {
@@ -12,7 +22,19 @@ h1, h2, h4 {
 /* Navbar */
 
 .nav {
-  background-color: #FF6569;
+  background-image: linear-gradient(
+  0deg,
+  hsl(358deg 100% 47%) 5%,
+  hsl(359deg 90% 51%) 24%,
+  hsl(360deg 91% 54%) 33%,
+  hsl(360deg 93% 57%) 41%,
+  hsl(360deg 94% 59%) 48%,
+  hsl(360deg 95% 60%) 54%,
+  hsl(359deg 97% 62%) 61%,
+  hsl(359deg 98% 64%) 69%,
+  hsl(359deg 99% 65%) 79%,
+  hsl(358deg 100% 67%) 100%
+);
 
   display: flex;
   justify-content: space-evenly;
@@ -75,7 +97,7 @@ h1, h2, h4 {
 }
 
 .box {
-  background-color: #62d6fb;
+  background-color: var(--secondary-blue-color);
   border-style: solid;
   border-color: #ffffff;
   border-radius: 5px;
@@ -87,7 +109,7 @@ h1, h2, h4 {
 }
 
 #reset {
-  color: #FF6569;
+  color: var(--primary-red-color);
   font-size: 1.5em;
 
   background-color: #ffffff;
@@ -105,7 +127,7 @@ h1, h2, h4 {
 
 #reset:hover {
   color: #ffffff;
-  background-color: #FF6569
+  background-color: var(--primary-red-color)
 }
 
 /* Counter */
@@ -131,7 +153,7 @@ h1, h2, h4 {
   color: #ffffff;
   font-size: 1.5em;
 
-  background-color: #FF6569;
+  background-color: var(--primary-red-color);
   border-style: solid;
   border-color: #ffffff;
   border-radius: 5px;
@@ -145,11 +167,11 @@ h1, h2, h4 {
 }
 
 .increment:hover {
-  background-color: #62d6fb;
+  background-color: var(--secondary-blue-color);
 }
 
 .hook-data-section {
-  border: 2px solid #FF6569;
+  border: 2px solid --primary-red-color;
   border-radius: 5px;
   margin: 10px 0;
   padding: 8px;

assets/v19/performance.gif

@@ -0,0 +1,17 @@
+## High Contrast Colors to Help with Color Blindness
+- Dark Blue (#000080)
+- Light Blue (#ADD8E6)
+- Dark Green (#006400)
+- Light Green (#90EE90)
+- Dark Red (#8B0000)
+- Light Red (#FFC0CB)
+- Dark Purple (#800080)
+- Light Purple (#BA55D3)
+- Dark Yellow (#FFD700)
+- Light Yellow (#FFFFE0)
+- Dark Orange (#FF8C00)
+- Light Orange (#FFA500)
+- Dark Brown (#8B4513)
+- Light Brown (#D2691E)
+- Dark Gray (#A9A9A9)
+- Light Gray (#D3D3D3)

assets/v19/tree-and-diff.gif

@@ -58,6 +58,7 @@
     "Hien Nguyen",
     "Jack Crish",
     "Jackie Yuan",
+    "James McCollough",
     "James Nghiem",
     "Jasmine Noor",
     "Joseph Park",
@@ -70,9 +71,11 @@
     "Lance Ziegler",
     "Lina Shin",
     "Mark Teets",
+    "Mike Bednarz",
     "Minzo Kim",
     "Nathanael Wa Mwenze",
     "Ngoc Zwolinski",
+    "Nick Huemmer",
     "Peter Lam",
     "Prasanna Malla",
     "Rajeeb Banstola",
@@ -81,6 +84,7 @@
     "Rocky Lin",
     "Ruth Anam",
     "Ryan Dang",
+    "Sergei Liubchenko",
     "Sierra Swaby",
     "Tania Lind",
     "Viet Nguyen",
@@ -95,7 +99,6 @@
     "@babel/preset-env": "^7.12.7",
     "@babel/preset-react": "^7.12.7",
     "@babel/preset-typescript": "^7.21.5",
-    "@emotion/babel-plugin": "^11.7.2",
     "@inrupt/jest-jsdom-polyfills": "^1.6.2",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^13.4.0",
@@ -152,8 +155,6 @@
     "webpack-cli": "^3.3.12"
   },
   "dependencies": {
-    "@emotion/react": "^11.9.0",
-    "@emotion/styled": "^11.8.1",
     "@fortawesome/fontawesome-free": "^5.15.1",
     "@fortawesome/fontawesome-svg-core": "^1.2.32",
     "@fortawesome/free-regular-svg-icons": "^5.15.1",