Skip to content

Commit c5c40e2

Browse files
dgill05dgill05
committed
implemented walkthrough tutorial
1 parent da04dc6 commit c5c40e2

File tree

8 files changed

+268
-63
lines changed

8 files changed

+268
-63
lines changed

‎package.json

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -91,6 +91,7 @@
9191
"@types/jest": "^26.0.4",
9292
"@types/lodash.isequal": "^4.5.5",
9393
"@types/node": "^12.19.6",
94+
"@types/react": "^17.0.43",
9495
"@typescript-eslint/eslint-plugin": "^3.6.1",
9596
"@typescript-eslint/parser": "^3.6.1",
9697
"babel-loader": "^8.1.0",
@@ -135,6 +136,7 @@
135136
"@fortawesome/free-solid-svg-icons": "^5.15.1",
136137
"@fortawesome/react-fontawesome": "^0.1.12",
137138
"@material-ui/core": "^4.11.2",
139+
"@types/react-dom": "^17.0.14",
138140
"@visx/axis": "^1.0.0",
139141
"@visx/brush": "^1.2.0",
140142
"@visx/clip-path": "^1.0.0",
@@ -160,6 +162,8 @@
160162
"d3-shape": "^2.0.0",
161163
"d3-zoom": "^1.8.3",
162164
"immer": "^9.0.12",
165+
"intro.js": "^5.0.0",
166+
"intro.js-react": "^0.6.0",
163167
"jest-runner": "^26.1.0",
164168
"jscharting": "^3.0.2",
165169
"jsondiffpatch": "^0.3.11",

‎src/app/components/Action.tsx

Lines changed: 26 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -96,29 +96,30 @@ const Action = (props: ActionProps): JSX.Element => {
9696
};
9797

9898
return (
99-
<div
99+
<div className="individual-action">
100+
<div
100101
// Invoking keyboard functionality; functionality is in ActionContainer;
101-
onKeyDown={e => handleOnkeyDown(e, viewIndex)}
102-
className={
102+
onKeyDown={e => handleOnkeyDown(e, viewIndex)}
103+
className={
103104
selected || last ? 'action-component selected' : 'action-component'
104105
}
105-
onClick={() => {
106-
dispatch(changeView(index));
107-
}}
108-
role="presentation"
109-
style={index > sliderIndex ? { color: '#5f6369' } : {}}
110-
tabIndex={index}
111-
>
112-
<ReactHover options={optionsCursorTrueWithMargin}>
113-
<Trigger type="trigger">
114-
<div className="action-component-trigger" style={index > sliderIndex ? { color: '#5f6369' } : {}}>
115-
<div className="action-component-text">
116-
{`${displayName}: ${componentName !== 'nameless' ? componentName : ''} `}
117-
</div>
118-
<button className="time-button" type="button">
119-
{displayTime}
120-
</button>
121-
{
106+
onClick={() => {
107+
dispatch(changeView(index));
108+
}}
109+
role="presentation"
110+
style={index > sliderIndex ? { color: '#5f6369' } : {}}
111+
tabIndex={index}
112+
>
113+
<ReactHover options={optionsCursorTrueWithMargin}>
114+
<Trigger type="trigger">
115+
<div className="action-component-trigger" style={index > sliderIndex ? { color: '#5f6369' } : {}}>
116+
<div className="action-component-text">
117+
{`${displayName}: ${componentName !== 'nameless' ? componentName : ''} `}
118+
</div>
119+
<button className="time-button" type="button">
120+
{displayTime}
121+
</button>
122+
{
122123
isCurrIndex ? (
123124
<button
124125
className="current-location"
@@ -142,10 +143,11 @@ const Action = (props: ActionProps): JSX.Element => {
142143
</button>
143144
)
144145
}
145-
</div>
146-
</Trigger>
147-
<Hover type="hover" />
148-
</ReactHover>
146+
</div>
147+
</Trigger>
148+
<Hover type="hover" />
149+
</ReactHover>
150+
</div>
149151
</div>
150152
);
151153
};

‎src/app/components/App.tsx

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,11 @@
1-
import React, { useReducer } from 'react';
1+
import React, { useReducer, useState } from 'react';
2+
// import { Steps, Hints } from 'intro.js-react';
23
import MainContainer from '../containers/MainContainer';
34
import { StoreContext } from '../store';
45
import mainReducer from '../reducers/mainReducer.js';
56

7+
// import 'intro.js/introjs.css';
8+
69
const initialState: {
710
port: null | number,
811
currentTab: null | number,

‎src/app/components/StateRoute.tsx

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -197,35 +197,35 @@ const StateRoute = (props: StateRouteProps) => {
197197
<Router>
198198
<div className="navbar">
199199
<NavLink
200-
className="router-link"
200+
className="router-link map-tab"
201201
activeClassName="is-active"
202202
exact
203203
to="/"
204204
>
205205
Map
206206
</NavLink>
207207
<NavLink
208-
className="router-link"
208+
className="router-link performance-tab"
209209
activeClassName="is-active"
210210
to="/performance"
211211
>
212212
Performance
213213
</NavLink>
214214
<NavLink
215-
className="router-link"
215+
className="router-link history-tab"
216216
activeClassName="is-active"
217217
to="/history"
218218
>
219219
History
220220
</NavLink>
221221
<NavLink
222-
className="router-link"
222+
className="router-link web-metrics-tab"
223223
activeClassName="is-active"
224224
to="/webMetrics"
225225
>
226226
Web Metrics
227227
</NavLink>
228-
<NavLink className="router-link" activeClassName="is-active" to="/tree">
228+
<NavLink className="router-link tree-tab" activeClassName="is-active" to="/tree">
229229
Tree
230230
</NavLink>
231231
{isRecoil && (

‎src/app/containers/ActionContainer.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -114,6 +114,7 @@ function ActionContainer(props): JSX.Element {
114114
viewIndex={viewIndex}
115115
isCurrIndex={isCurrIndex}
116116
/>
117+
117118
);
118119
},
119120
);

‎src/app/containers/ButtonsContainer.tsx

Lines changed: 141 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
// @ts-nocheck
2-
import React from 'react';
2+
import * as React from 'react';
3+
import { useState, useRef, useEffect } from 'react';
34
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
45
import {
56
faUpload,
@@ -10,9 +11,12 @@ import {
1011
faUnlock,
1112
faLock,
1213
} from '@fortawesome/free-solid-svg-icons';
14+
import { Steps, Hints } from 'intro.js-react';
1315
import { importSnapshots, toggleMode, toggleSplit } from '../actions/actions';
1416
import { useStoreContext } from '../store';
1517

18+
import 'intro.js/introjs.css';
19+
1620
function exportHandler(snapshots: []) {
1721
// create invisible download anchor link
1822
const fileDownload = document.createElement('a');
@@ -61,8 +65,143 @@ function ButtonsContainer(): JSX.Element {
6165
mode: { paused, persist },
6266
} = tabs[currentTab];
6367

68+
const [stepsEnabled, setStepsEnabled] = useState(false);
69+
const [initialStep, setInitialStep] = useState(0);
70+
const [steps, setSteps] = useState([
71+
{
72+
title: 'Reactime Tutorial',
73+
intro: 'A performance and state managment tool for React apps.',
74+
position: 'top',
75+
},
76+
{
77+
title: 'Actions',
78+
element: '.action-container',
79+
intro: "<ul><li>Reactime records a snapshot whenever a target application's state is changed</li></ul>",
80+
position: 'right',
81+
},
82+
{
83+
element: '.individual-action',
84+
title: 'Snapshot',
85+
intro: '<ul><li>Each snapshot allows the user to jump to any previously recorded state.</li> <li>It also detects the amount of renders of each component and average time of rendering</li></ul>.',
86+
position: 'right',
87+
},
88+
{
89+
title: 'Timejump',
90+
element: '.rc-slider',
91+
intro: '<ul><li>Use the slider to go back in time to a particular state change</li><li>Click the Play button to run through each state change automatically</li></ul>',
92+
position: 'top',
93+
},
94+
{
95+
title: 'Lock Button',
96+
element: '.pause-button',
97+
intro: '<ul><li>Use button to lock Reactime to the target application\'s tab in the Chrome Browser</li></ul>',
98+
position: 'top',
99+
},
100+
{
101+
title: 'Split Button',
102+
element: '.split-button',
103+
intro: '<ul> <li>Use button to split Reactime into two windows in order to view multiple tabs simultaneously</li> </ul>',
104+
position: 'top',
105+
},
106+
{
107+
title: 'Download Button',
108+
element: '.export-button',
109+
intro: '<ul><li>Use button to download a JSON file of all snapshots</li> </ul>',
110+
position: 'top',
111+
},
112+
{
113+
title: 'Upload Button',
114+
element: '.import-button',
115+
intro: '<ul><li>Use button to upload a previously downloaded JSON file for snapshot comparisons</li></ul>',
116+
position: 'top',
117+
},
118+
{
119+
element: '.map-tab',
120+
title: 'Map Tab',
121+
intro: '<ul><li>This tab visually displays a component hierarchy tree for your app</li></ul>',
122+
position: 'bottom',
123+
},
124+
{
125+
title: 'Performance Tab',
126+
element: '.performance-tab',
127+
intro: '<ul><li>User can save a series of state snapshots and use it to analyze changes in component, render performance between current, and previous series of snapshots.</li> <li>User can save a series of state snapshots and use it to analyze changes in component render performance between current and previous series of snapshots.</li></ul>',
128+
position: 'bottom',
129+
},
130+
{
131+
title: 'History Tab',
132+
element: '.history-tab',
133+
intro: '<ul><li>This tab visually displays a history of each snapshot</li></ul>',
134+
position: 'bottom',
135+
},
136+
{
137+
title: 'Web Metrics Tab',
138+
element: '.web-metrics-tab',
139+
intro: '<ul> <li>This tab visually displays performance metrics and allows the user to gauge efficiency of their application</li></ul>',
140+
position: 'bottom',
141+
},
142+
{
143+
title: 'Tree Tab',
144+
element: '.tree-tab',
145+
intro: '<ul><li>This tab visually displays a JSON Tree containing the different components and states</li></ul>',
146+
position: 'bottom',
147+
},
148+
{
149+
title: 'Tutorial Complete',
150+
intro: 'Please visit our official Github Repo for more information <br> <a href="https://github.com/open-source-labs/reactime" target="_blank">Reactime Github</a>',
151+
position: 'top',
152+
},
153+
]);
154+
155+
const onExit = () => {
156+
setStepsEnabled(false);
157+
};
158+
const startIntro = () => {
159+
setStepsEnabled(true);
160+
};
161+
162+
// const onbeforechange = (targetElement) => {
163+
// steps.forEach((step, key) => {
164+
// if (step.element) {
165+
// steps[key].element = document.querySelector(step.element);
166+
// steps[key].position = step.position ? step.position : 'bottom';
167+
// }
168+
// });
169+
// };
170+
171+
// const onBeforeChange = nextStepIndex => {
172+
// if (nextStepIndex === 2) {
173+
// steps.updateStepElement(nextStepIndex);
174+
// }
175+
const walkthrough = useRef(null);
176+
// useEffect(() => {
177+
// if (walkthrough.current) {
178+
// console.log('Test ');
179+
// }
180+
// }, [walkthrough.current]);
181+
64182
return (
65183
<div className="buttons-container">
184+
{/* <button type="submit" onClick={() => }>Click me</button> */}
185+
<Steps
186+
enabled={stepsEnabled}
187+
steps={steps}
188+
initialStep={initialStep}
189+
onExit={onExit}
190+
ref={walkthrough}
191+
options={{
192+
tooltipClass: 'customTooltip',
193+
scrollToElement: false,
194+
showProgress: true,
195+
showStepNumbers: true,
196+
showBullets: false,
197+
exitOnOverlayClick: false,
198+
doneLabel: 'Done',
199+
nextLabel: 'Next',
200+
hideNext: false,
201+
skipLabel: 'Skip',
202+
keyboardNavigation: true,
203+
}}
204+
/>
66205
<button
67206
className="pause-button"
68207
type="button"
@@ -122,7 +261,7 @@ function ButtonsContainer(): JSX.Element {
122261
<button
123262
className="howToUse-button"
124263
type="button"
125-
onClick={() => howToUseHandler()}
264+
onClick={() => startIntro()}
126265
>
127266
<FontAwesomeIcon icon={faQuestion} />
128267
{' '}

‎src/app/styles/layout/_buttonsContainer.scss

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,19 @@
1010
padding: 1% 0 1% 0;
1111
}
1212

13+
.introjs-tooltip {
14+
color: black;
15+
background-color: white;
16+
min-width: 20rem;
17+
}
18+
.introjs-tooltiptext ul{
19+
padding-left: 2px;
20+
}
21+
22+
.introjs-helperLayer{
23+
border: 2px solid yellow
24+
}
25+
1326
@media (max-width: 500px) {
1427
.buttons-container {
1528
grid-template-columns: repeat(2, 1fr);

0 commit comments

Comments
 (0)