Merge pull request #345 from oslabs-beta/master

v25

Author: MelKoppens

README.fr.md

@@ -147,10 +147,16 @@ Après avoir cloné ce référentiel, les développeurs peuvent simplement exéc
 - A dropdown to support the development of projects on multiple tabs
 - Une liste déroulante pour accompagner le développement de projets sur plusieurs onglets
 - Fonctionnalité verrouillée/déverrouillée permettant une pause temporaire de la surveillance de l'état
+- Visualisation des propriétés à la fois en couleur et en épaisseur des branches reliant les composants
+- Barre de chaleur sous le menu supérieur
 
 <h1>Quoi de Neuf!</h1>
 
-Reactime v22.0.0 a apporté des améliorations significatives, résolvant les problèmes de performances et renforçant la stabilité et la fiabilité globales de l'application. Pour que Reactime soit le meilleur possible, nous avons mis à jour les packages obsolètes et transféré la gestion des états vers Redux Toolkit. Ce changement stratégique modernise notre pile technologique et augmente la maintenabilité et l’évolutivité. Outre ces mises à niveau, cette version corrige également divers bugs. Le lancement de fonctionnalités telles que le bouton de reconnexion, une icône d'état et l'intégration de métriques Web clés – « Cumulative Layout Shift » (CLS) et « Interaction To Next Paint »(INP) – amplifie ses fonctionnalités et offre aux utilisateurs une expérience plus raffinée.
+Reactime 25.0 comprend une nouvelle fonctionnalité de visualisation des propriétés et une barre de chaleur pour les développeurs !
+
+Nous avons également résolu les problèmes de gel signalés précédemment au démarrage et avons amélioré la bibliothèque Jest, qui est maintenant en bien meilleur état qu'avant, avec la plupart des tests fonctionnant correctement.
+
+Une partie de l'interface utilisateur a été réorganisée pour être plus esthétiquement agréable et pour rendre la fenêtre principale plus grande pour l'affichage de l'arbre des composants dans le processus.
 
 <i>Regarder Plus Profondément</i>
 
@@ -206,6 +212,14 @@ Reactime est un projet open source, et toute aide de vore part sera grandement a
 
 ## <b>Auteurs</b>
 
+- **Haider Ali** - [@hali03](https://github.com/hali03)
+- **Jose Luis Sanchez** - [@JoseSanchez1996](https://github.com/JoseSanchez1996)
+- **Logan Nelsen** - [@ljn16](https://github.com/ljn16)
+- **Mel Koppens** - [@MelKoppens](https://github.com/MelKoppens)
+- **Amy Yang** - [@ay7991](https://github.com/ay7991)
+- **Eva Ury** - [@evaSUry](https://github.com/evaSUry)
+- **Jesse Guerrero** - [@jguerrero35](https://github.com/jguerrero35)
+- **Oliver Cho** - [@Oliver-Cho](https://github.com/Oliver-Cho)
 - **Ben Margolius** - [@benmarg](https://github.com/benmarg)
 - **Eric Yun** - [@ericsngyun](https://github.com/ericsngyun)
 - **James Nghiem** - [@jemzir](https://github.com/jemzir)

README.md

@@ -160,18 +160,16 @@ of the structure and interfaces of the codebase.
 - A dropdown to support the development of projects on multiple tabs
 - Intuitive navigation between state snapshots
 - Locked/unlocked feature allowing temporary pause of state monitoring
+- Prop visualization both in color and tickness of the branches of connecting the components
+- Heatmap bar underneath the top menu
 
 <h1>What's New!</h1>
 
-Reactime 24.0 includes a new accessibility debugging feature for developers!
+Reactime 25.0 includes a new prop visualization feature and heatmap bar for developers!
 
-"No ARIA is better than bad ARIA"
+We also addressed the previously reported freezing issues on start and brought up the Jest Library in much better condition as it was before; from 20% of the tests working to more than 85% now working correctly.
 
-This version of Reactime remedies this phrase by implementing a feature that allows developers to track the accessibility tree of their application based on state change.
-
-Similar to the component map feature, developers can time travel to different states of their app's accessibility tree and hover over specific nodes to learn more about their individual accessibility-related information.
-
-We've also developed an enable/disable button that determines when the Chrome Debugger API grabs the app's accessibility tree and a legend component that describes the tree in greater detail. 
+Some of the UI was rearranged to be more aesthetically pleasing and render the main window bigger for the diplay of the component tree in the process.
 
 If you would like to read more about previous releases, click <a href="https://github.com/open-source-labs/reactime/releases">here!</a>
 
@@ -253,6 +251,10 @@ Node v16.16.0, please use script 'npm run devlegacy' | 'npm run buildlegacy'
 
 ## <b>Authors</b>
 
+- **Haider Ali** - [@hali03](https://github.com/hali03)
+- **Jose Luis Sanchez** - [@JoseSanchez1996](https://github.com/JoseSanchez1996)
+- **Logan Nelsen** - [@ljn16](https://github.com/ljn16)
+- **Mel Koppens** - [@MelKoppens](https://github.com/MelKoppens)
 - **Amy Yang** - [@ay7991](https://github.com/ay7991)
 - **Eva Ury** - [@evaSUry](https://github.com/evaSUry)
 - **Jesse Guerrero** - [@jguerrero35](https://github.com/jguerrero35)

README.rus.md

@@ -22,13 +22,13 @@
 <img src="./assets/v20/Overview.gif" />
 </p>
 
-<b>Reactime 20.0</b>
+<b>Reactime 25.0</b>
 
-Reactime 20.0 включает в себя несколько ключевых улучшений для повышения производительности и устранения существующих ошибок, а также переработанный пользовательский интерфейс для обеспечения совместимости с WCAG.
+Reactime 25.0 включает в себя новую функцию визуализации свойств и тепловую панель для разработчиков!
 
-Мы исправили несколько постоянных ошибок, в том числе серьезную проблему, которая приводила к сбою приложения, использующих Reactime, при использовании функций входа или отправки. Мы продолжили внедрять TypeScript в кодовую базу и создали новые тесты с библиотекой тестирования React. Мы также сделали тестирование более надежным, улучшив существующие тесты и исправив неработающие тесты. Наконец, мы обновили Reactime, удалив некоторый устаревший код и пакеты, уменьшив количество ошибок компиляции.
+Мы также решили ранее сообщенные проблемы с зависанием при старте и значительно улучшили состояние библиотеки Jest, теперь большинство тестов работают корректно.
 
-Мы обновили взаимодействие с пользователем, в соответствие с требованиями Руководства по доступности веб-контента (WCAG). В частности, мы улучшили размер и дизайн целевых элементов в Reactime и тщательно выбрали новые цветовые контрасты.
+Некоторые элементы пользовательского интерфейса были перераспределены для более эстетически приятного вида и для отображения главного окна большего размера для отображения дерева компонентов в процессе.
 
 <b>Reactime</b> - расширение для дебаггинга/отладки React приложений. Оно создает снэпшоты при каждом изменении состояния (state) и позволяет пользованию прыгать на любое предыдущее состояние (state). 
 В настоящее время Reactime поддерживает React приложения с классовыми, функциональными компонентами, хуками и Context API.
@@ -100,6 +100,14 @@ Reactime beta поддерживает приложения, написанны
 
 ## <b>Авторы</b>
 
+- **Haider Ali** - [@hali03](https://github.com/hali03)
+- **Jose Luis Sanchez** - [@JoseSanchez1996](https://github.com/JoseSanchez1996)
+- **Logan Nelsen** - [@ljn16](https://github.com/ljn16)
+- **Mel Koppens** - [@MelKoppens](https://github.com/MelKoppens)
+- **Amy Yang** - [@ay7991](https://github.com/ay7991)
+- **Eva Ury** - [@evaSUry](https://github.com/evaSUry)
+- **Jesse Guerrero** - [@jguerrero35](https://github.com/jguerrero35)
+- **Oliver Cho** - [@Oliver-Cho](https://github.com/Oliver-Cho)
 - **Ben Margolius** - [@benmarg](https://github.com/benmarg)
 - **Eric Yun** - [@ericsngyun](https://github.com/ericsngyun)
 - **James Nghiem** - [@jemzir](https://github.com/jemzir)

demo-app/src/client/Components/Board.tsx

@@ -30,7 +30,7 @@ class Board extends Component<{}, BoardState> {
 
   //added void
   componentDidUpdate(): void {
-    this.checkForWinner();
+    this.checkForWinner()
   }
 
   /**
@@ -116,8 +116,8 @@ class Board extends Component<{}, BoardState> {
   }
 
   //added type for render
-  render(): JSX.Element {
-    const rows: Array<JSX.Element> = [];
+  render(): JSX.Element { 
+    const rows: Array<JSX.Element> = [];  
     for (let i = 0; i < 3; i++) {
       rows.push(
         <Row key={i} row={i} handleBoxClick={this.handleBoxClick} values={this.state.board[i]} />,

demo-app/src/client/index.html

@@ -1,7 +1,8 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <title>Reactime MVP</title>
+    <title>Reactime</title>
+    <!-- <link rel="icon" type="image/x-icon" href="../../../assets/logos/blackWhiteSquareIcon.png"> -->
     <link rel="stylesheet" type="text/css" href="./style.css">
   </head>
   <body>

docs/assets/main.js

@@ -327,17 +327,14 @@ dd {
 }
 
 /* Footer */
-.tsd-generator {
+footer {
     border-top: 1px solid var(--color-accent);
     padding-top: 1rem;
     padding-bottom: 1rem;
     max-height: 3.5rem;
 }
-
-.tsd-generator > p {
-    margin-top: 0;
-    margin-bottom: 0;
-    padding: 0 1rem;
+.tsd-generator {
+    margin: 0 1em;
 }
 
 .container-main {
@@ -405,7 +402,8 @@ dd {
 }
 body {
     background: var(--color-background);
-    font-family: "Segoe UI", sans-serif;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans",
+        Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
     font-size: 16px;
     color: var(--color-text);
 }