8000 add tutorial help bar example · An0nCrypto/coderoad-vscode@5afca66 · GitHub
[go: up one dir, main page]
Skip to content

Commit 5afca66

Browse files
ShMcKShMcK
committed
add tutorial help bar example
1 parent ed3be33 commit 5afca66

File tree

5 files changed

+173
-27
lines changed

5 files changed

+173
-27
lines changed

‎web-app/package-lock.json

Lines changed: 35 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎web-app/package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,7 @@
3838
"moment": "^2.24.0",
3939
"prismjs": "^1.19.0",
4040
"react": "^16.13.0",
41+
"react-addons-css-transition-group": "^15.6.2",
4142
"react-dom": "^16.13.0",
4243
"reselect": "^4.0.0",
4344
"typescript": "^3.8.3",

‎web-app/src/components/NewUserExperience/NuxTutorial.tsx

Lines changed: 102 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,46 +1,122 @@
11
import React from 'react'
2+
import { Collapse, Icon } from '@alifd/next'
3+
import ReactCSSTransitionGroup from 'react-addons-css-transition-group'
4+
import './transition.css'
5+
6+
const Panel = Collapse.Panel
27

38
const styles = {
49
container: {
5-
display: 'flex' as 'flex',
6-
flexDirection: 'column' as 'column',
10+
position: 'relative',
11+
transition: 'all .35s',
12+
},
13+
header: {
14+
display: 'flex',
715
backgroundColor: '#6a67ce',
816
color: 'white',
917
padding: '0.5rem',
1018
},
1119
title: {
12-
fontWeight: 'bold',
20+
marginLeft: '.6rem',
21+
fontSize: '1.1rem',
22+
},
23+
toggle: {
24+
display: 'flex',
25+
alignItems: 'center',
1326
},
1427
}
1528

16-
const NewUserExperienceTutorial = () => {
29+
const NewUserExperienceTutorialCollapsible = () => {
30+
const [expandedKeys, setExpandedKeys] = React.useState<string[]>([])
1731
return (
18-
<div css={styles.container}>
19-
<div>
20-
<h3 css={styles.title}>What To Do</h3>
21-
<p>Update the editor code and press save to to complete the list of "Tasks".</p>
22-
</div>
23-
<div>
24-
<h3 css={styles.title}>How It Works</h3>
25-
<p>
26-
When you press save in the editor, CodeRoad runs tests to check if you completed the current task and can
27-
continue to the next task.
28-
</p>
29-
<p>
30-
Progress is tracked and advanced by using Git in the background. On startup, CodeRoad launches a new local Git
31-
repo. New tasks are loaded as new commits, and your task solution code is automatically saved as the next Git
32-
commit.
33-
</p>
34-
</div>
35-
<div>
36-
<h3 css={styles.title}>How to Debug</h3>
32+
<Collapse onExpand={setExpandedKeys} expandedKeys={expandedKeys}>
33+
<Panel title="What To Do">
34+
<div>
35+
<p>Update the editor code and press save to to complete the list of "Tasks".</p>
36+
</div>
37+
</Panel>
38+
<Panel title="How It Works">
39+
<div>
40+
<p>
41+
When you press save in the editor, CodeRoad runs tests to check if you completed the current task and can
42+
continue to the next task.
43+
</p>
44+
<br />
45+
<p>
46+
Progress is tracked and advanced by using Git in the background. On startup, CodeRoad launches a new local
47+
Git repo. New tasks are loaded as new commits, and your task solution code is automatically saved as the
48+
next Git commit.
49+
</p>
50+
</div>
51+
</Panel>
52+
<Panel title="How to Debug">
3753
<p>You can debug a tutorial in a number of ways:</p>
54+
<br />
3855
<ol>
39-
<li>1. Run the VSCode Debugger located in the left hand panel and add breakpoints to the code</li>
40-
<li>2. Run the tests in the command line (eg. `npm run test`)</li>
41-
<li>3. Press save in the editor and read the failed test output in the console output</li>
56+
<li>
57+
1. Press save in the editor and use the feedback from failed test messages in the console output. The output
58+
can be found by opening the integrated VSCode terminal, and selecting the tab "Output". Learn more about the
59+
integrated terminal in VSCode at&nbsp;{' '}
60+
<a href="https://code.visualstudio.com/docs/editor/integrated-terminal">
61+
https://code.visualstudio.com/docs/editor/integrated-terminal
62+
</a>
63+
.
64+
</li>
65+
<br />
66+
<li>
67+
2. Run the VSCode Debugger located in the left hand icon panel. To start debugging, press the green arrow
68+
button at the top labelled "RUN AND DEBUG". Learn more about debugging with the VSCode Debugger at&nbsp;
69+
<a href="https://code.visualstudio.com/docs/editor/debugging">
70+
https://code.visualstudio.com/docs/editor/debugging
71+
</a>
72+
.
73+
</li>
74+
<br />
75+
<li>
76+
3. Run the tests in the command line (eg. `npm run test`) and use the output from the tests to debug. Feel
77+
free to use the integrated VScode terminal noted above or another terminal with the project working
78+
directory open. .
79+
</li>
4280
</ol>
81+
</Panel>
82+
<Panel title="I'm Stuck">
83+
<p>A few tips to help you if you get stuck.</p>
84+
<ol>
85+
<li>
86+
Read the tests. The tests can be found in the test directory and can be read in detail to help you
87+
understand what's failing.
88+
</li>
89+
<br />
90+
<li>
91+
Load the solution. Each step in CodeRoad is stored as a Git commit - including the solution. Load the
92+
solution by pressing the help icon under the current task, and select the option "load solution".
93+
</li>
94+
</ol>
95+
</Panel>
96+
<Panel title="Contact">
97+
We'd love to hear your comments, requests, issues, questions - reach out at{' '}
98+
<a href="mailto:coderoadapp@gmail.com">coderoadapp@gmail.com</a>.
99+
</Panel>
100+
</Collapse>
101+
)
102+
}
103+
104+
const NewUserExperienceTutorial = () => {
105+
const [isOpen, setIsOpen] = React.useState<boolean>(false)
106+
const onToggle = () => {
107+
setIsOpen(!isOpen)
108+
}
109+
return (
110+
<div css={styles.container}>
111+
<div css={styles.header} onClick={onToggle} style={{ cursor: 'pointer' }}>
112+
<div css={styles.toggle}>
113+
<Icon type="help" />
114+
<span css={styles.title}>Help</span>
115+
</div>
43116
</div>
117+
<ReactCSSTransitionGroup transitionName="slide" transitionEnterTimeout={500} transitionLeaveTimeout={300}>
118+
{isOpen && <NewUserExperienceTutorialCollapsible />}
119+
</ReactCSSTransitionGroup>
44120
</div>
45121
)
46122
}

‎web-app/src/components/NewUserExperience/transition.css

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
.slide-enter {
2+
max-height: 0;
3+
overflow: hidden;
4+
}
5+
6+
.slide-enter.slide-enter-active {
7+
max-height: 100rem;
8+
overflow: auto;
9+
transition: max-height 500ms ease-in;
10+
}
11+
12+
.slide-leave {
13+
max-height: 100rem;
14+
overflow: auto;
15+
}
16+
17+
.slide-leave.slide-leave-active {
18+
max-height: 0;
19+
overflow: hidden;
20+
transition: max-height 300ms ease-out;
21+
}

‎web-app/stories/NewUserExperience.stories.tsx

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,19 @@ import { css, jsx } from '@emotion/core'
44
import SideBarDecorator from './utils/SideBarDecorator'
55
import NewUserExperienceTutorial from '../src/components/NewUserExperience/NuxTutorial'
66

7+
const styles = {
8+
container: {
9+
position: 'absolute',
10+
bottom: 0,
11+
left: 0,
12+
right: 0,
13+
},
14+
}
15+
716
storiesOf('NewUserExperience', module)
817
.addDecorator(SideBarDecorator)
9-
.add('NUXTutorial', () => <NewUserExperienceTutorial />)
18+
.add('NUXTutorial', () => (
19+
<div css={styles.container}>
20+
<NewUserExperienceTutorial />
21+
</div>
22+
))

0 commit comments

Comments
 (0)
0