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

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Appearance settings

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
B41A
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