Merge pull request #301 from open-source-labs/dev

Merge v17.0.0 into master

Author: jemzir

README.fr.md

@@ -18,10 +18,10 @@
   </a>
   <a href="https://travis-ci.com/oslabs-beta/reactime">
     <img src="https://travis-ci.com/oslabs-beta/reactime.svg?branch=master" alt="Build Status">
-  </a>  
+  </a>
   <a href="http://badge.fury.io/js/reactime">
     <img src="https://badge.fury.io/js/reactime.svg" alt="npm version">
-  </a>  
+  </a>
     <img src="https://img.shields.io/badge/babel%20preset-airbnb-ff69b4" alt="BabelPresetPrefs">
     <img src="https://img.shields.io/badge/linted%20with-eslint-blueviolet" alt="LintPrefs">
 </p>
@@ -40,7 +40,7 @@
 </p>
 
 <p align="center">
-  <a href="#how-to-use">Manuel</a> • <a href="#features">Caractéristiques</a> • <a href="https://reactime.io">Website</a> • <a href="#readmore">En savoir plus</a>
+  <a href="#how-to-use">Manuel</a> • <a href="#features">Caractéristiques</a> • <a href="https://reactime.dev">Website</a> • <a href="#readmore">En savoir plus</a>
 </p>
 
 Actuellement, Reactime est compatible avec les applications React qui utilisent des composants à état (stateful) et Hooks, avec un support en version bêta de Recoil et de pour le Context API.
@@ -131,6 +131,10 @@ Après avoir cloné ce référentiel, les développeurs peuvent simplement exéc
 
 ## <b>Auteurs</b>
 
+- **Ben Margolius** - [@benmarg](https://github.com/benmarg)
+- **Eric Yun** - [@ericsngyun](https://github.com/ericsngyun)
+- **James Nghiem** - [@jemzir](https://github.com/jemzir)
+- **Wilton Lee** - [@wiltonlee948](https://github.com/wiltonlee948)
 - **David Kim** - [@codejunkie7](https://github.com/codejunkie7)
 - **Robby Tipton** - [@RobbyTipton](https://github.com/RobbyTipton)
 - **Kevin HoEun Lee** - [@khobread](https://github.com/khobread)

README.md

@@ -106,7 +106,10 @@ 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)
+- **Wilton Lee** - [@wiltonlee948](https://github.com/wiltonlee948)
 - **David Kim** - [@codejunkie7](https://github.com/codejunkie7)
 - **Robby Tipton** - [@RobbyTipton](https://github.com/RobbyTipton)
 - **Kevin HoEun Lee** - [@khobread](https://github.com/khobread)

README.rus.md

@@ -12,8 +12,8 @@ ReactDOM.render(
     <BrowserRouter>
       <Nav />
       <Routes>
-        <Route path="/tictactoe" element={<Board />}/>
-        <Route path="/" element={<Home />}/>
-        <Route path="/buttons" element={<Buttons />}/>
+          <Route path="/tictactoe" element={<Board />}/>
+          <Route path="/" element={<Home />}/>
+          <Route path="/buttons" element={<Buttons />}/>
       </Routes>
     </BrowserRouter>, root);

demo-app/src/client/Router.tsx

@@ -41,6 +41,7 @@ module.exports = {
     }),
   ],
   devServer: {
+    historyApiFallback: true,
     static: {
       directory: path.join(__dirname, './dist'),
     },

demo-app/webpack.config.js

@@ -5,7 +5,10 @@
     "transform": {
       "^.+\\.(js|ts|tsx)$": "ts-jest"
     },
-    "transformIgnorePatterns": ["/node_modules/(?!d3|d3-array|internmap|delaunator|robust-predicates)"],
+    "testPathIgnorePatterns": ["www"],
+    "transformIgnorePatterns": [
+      "/node_modules/(?!d3|d3-array|internmap|delaunator|robust-predicates)"
+    ],
     "testRegex": "(/__tests__/.*|\\.(test|spec))\\.(ts|tsx|js)$",
     "moduleFileExtensions": [
       "ts",
@@ -46,6 +49,7 @@
     "Andy Tsou",
     "Andy Wong",
     "Becca Viner",
+    "Ben Margolius",
     "Bryan Lee",
     "Caitlin Chan",
     "Caner Demir",
@@ -58,12 +62,14 @@
     "Dennis Lopez",
     "Edwin Menendez",
     "Ergi Shehu",
+    "Eric Yun",
     "Freya Wu",
     "Gabriela Jardim Aquino",
     "Gregory Panciera",
     "Haejin Jo",
     "Hien Nguyen",
     "Jack Crish",
+    "James Nghiem",
     "Joseph Park",
     "Josh Kim",
     "Joshua Howard",
@@ -83,6 +89,7 @@
     "Sierra Swaby",
     "Tania Lind",
     "Viet Nguyen",
+    "Wilton Lee",
     "Yujin Kang"
   ],
   "license": "ISC",
@@ -94,6 +101,7 @@
     "@babel/preset-react": "^7.12.7",
     "@emotion/babel-plugin": "^11.7.2",
     "@testing-library/jest-dom": "^4.2.4",
+    "@testing-library/react": "^13.4.0",
     "@types/chai": "^4.2.14",
     "@types/chrome": "^0.0.119",
     "@types/d3": "^7.4.0",

package.json

@@ -47,7 +47,7 @@ export default function ComponentMap({
 }: LinkTypesProps): JSX.Element {
   // importing custom hooks for the selection tabs.
   const [layout, setLayout] = useState('cartesian');
-  const [orientation, setOrientation] = useState('horizontal');
+  const [orientation, setOrientation] = useState('vertical');
   const [linkType, setLinkType] = useState('diagonal');
   const [stepPercent, setStepPercent] = useState(10);
   const [Tooltip, setTooltip] = useState(false);
@@ -153,6 +153,19 @@ export default function ComponentMap({
     return propsFormat;
   };
 
+  const formatContext = data => {
+    const propsFormat = [];
+    const nestedObj = [];
+    for (const key in data) {
+      propsFormat.push(
+        <p className="stateprops">
+          {`${key}: ${data[key]}`}
+        </p>,
+      );
+    }
+    return propsFormat;
+  };
+
   const formatState = state => {
     if (state === 'stateless') return ['stateless'];
     return ['stateful'];
@@ -378,10 +391,15 @@ export default function ComponentMap({
               {formatState(tooltipData.state)}
             </div>
             <div style={React.scrollStyle}>
-              <div className="props">
-                Props:
+              <div className="tooltipWrapper">
+                <h2>Props:</h2>
                 {formatProps(tooltipData.componentData.props)}
               </div>
+              {tooltipData.componentData.context &&
+              <div className="tooltipWrapper">
+                <h2>Context:</h2>
+                {formatContext(tooltipData.componentData.context)}
+              </div>}
             </div>
           </div>
         </TooltipInPortal>

src/app/components/StateRoute/ComponentMap/ComponentMap.tsx

@@ -89,8 +89,8 @@ export default function LinkControls({
         disabled={layout === 'polar'}
         style={dropDownStyle}
       >
-        <option value="horizontal">Horizontal</option>
         <option value="vertical">Vertical</option>
+        <option value="horizontal">Horizontal</option>
       </select>
       &nbsp;&nbsp;
 
@@ -110,19 +110,16 @@ export default function LinkControls({
       {/* Controls for the select selections. */}
       <label> Select:</label>
       &nbsp;
-      <input
+      <select
         id="selectInput"
-        list="nodeOptions"
-        type="text"
         name="nodeOptions"
         onChange={e => setSelectedNode(e.target.value)}
         style={dropDownStyle}
-      />
-      <datalist id="nodeOptions">
+      >
         {nodeList.map(node => (
-          <option key={node.name} value={node.name}>{node.name}</option>
+          node.children.length > 0 && <option key={node.name} value={node.name}>{node.name}</option>
         ))}
-      </datalist>
+      </select>
 
       {/* This is the slider control for the step option */}
       {linkType === 'step' && layout !== 'polar' && (

src/app/components/StateRoute/ComponentMap/LinkControls.tsx

@@ -84,11 +84,11 @@ function ErrorContainer(): any {
       </div>
       <br />
       <a
-        href="https://reactime.io/"
+        href="https://reactime.dev/"
         target="_blank"
         rel="noopener noreferrer"
       >
-        Please visit reactime.io to more info.
+        Please visit reactime.dev to more info.
       </a>
     </div>
   );

src/app/containers/ErrorContainer.tsx

@@ -1,9 +1,33 @@
 @charset 'UTF-8';
 @import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
+
 * {
   font-family: 'Roboto', sans-serif;
 }
 
+.tooltipWrapper {
+  background-color: #505050;
+  color: rgb(216, 216, 216);
+  margin-top: 3px;
+  margin-bottom: 3px;
+  padding: 2px;
+}
+
+.tooltipWrapper h2 {
+  margin-top: 1px;
+  margin-bottom: 1px;
+  margin-left: 1px;
+  font-size: small;
+  font-weight: bolder;
+}
+
+.tooltipWrapper p {
+  margin-top: 1px;
+  margin-bottom: 1px;
+  margin-left: 10px;
+  margin-right: 3px;
+}
+
 /* width */
 ::-webkit-scrollbar {
   width: 5px;
@@ -36,13 +60,13 @@
 
 // 4. Layout-related sections
 @import 'layout/mainContainer', 'layout/bodyContainer', 'layout/actionContainer',
-  'layout/errorContainer', 'layout/stateContainer', 'layout/travelContainer',
-  'layout/buttonsContainer', 'layout/headContainer.scss';
+'layout/errorContainer', 'layout/stateContainer', 'layout/travelContainer',
+'layout/buttonsContainer', 'layout/headContainer.scss';
 
 // 5. Components
 @import 'components/buttons', 'components/actionComponent',
-  'components/jsonTree', 'components/renderingFrequency',
-  'components/performanceVisx';
+'components/jsonTree', 'components/renderingFrequency',
+'components/performanceVisx';
 
 // slider component
 @import './components/rc-slider', './components/sliderHandle';
@@ -51,4 +75,4 @@
 @import './components/d3graph.css';
 
 // diff component
-@import './components/diff';
+@import './components/diff';