Movatterモバイル変換

[0]ホーム
URL:

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

 Sign up
Appearance settings

Commit5afca66

Browse files
committed
add tutorial help bar example
1 parented3be33 commit5afca66

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 aboutcustomizing 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
importReactfrom'react'
2+
import{Collapse,Icon}from'@alifd/next'
3+
importReactCSSTransitionGroupfrom'react-addons-css-transition-group'
4+
import'./transition.css'
5+
6+
constPanel=Collapse.Panel
27

38
conststyles={
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-
constNewUserExperienceTutorial=()=>{
29+
constNewUserExperienceTutorialCollapsible=()=>{
30+
const[expandedKeys,setExpandedKeys]=React.useState<string[]>([])
1731
return(
18-
<divcss={styles.container}>
19-
<div>
20-
<h3css={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-
<h3css={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-
<h3css={styles.title}>How to Debug</h3>
32+
<CollapseonExpand={setExpandedKeys}expandedKeys={expandedKeys}>
33+
<Paneltitle="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+
<Paneltitle="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+
<Paneltitle="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+
<ahref="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+
<ahref="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+
<Paneltitle="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+
<Paneltitle="Contact">
97+
We'd love to hear your comments, requests, issues, questions - reach out at{' '}
98+
<ahref="mailto:coderoadapp@gmail.com">coderoadapp@gmail.com</a>.
99+
</Panel>
100+
</Collapse>
101+
)
102+
}
103+
104+
constNewUserExperienceTutorial=()=>{
105+
const[isOpen,setIsOpen]=React.useState<boolean>(false)
106+
constonToggle=()=>{
107+
setIsOpen(!isOpen)
108+
}
109+
return(
110+
<divcss={styles.container}>
111+
<divcss={styles.header}onClick={onToggle}style={{cursor:'pointer'}}>
112+
<divcss={styles.toggle}>
113+
<Icontype="help"/>
114+
<spancss={styles.title}>Help</span>
115+
</div>
43116
</div>
117+
<ReactCSSTransitionGrouptransitionName="slide"transitionEnterTimeout={500}transitionLeaveTimeout={300}>
118+
{isOpen&&<NewUserExperienceTutorialCollapsible/>}
119+
</ReactCSSTransitionGroup>
44120
</div>
45121
)
46122
}
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-height500ms 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-height300ms 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
importSideBarDecoratorfrom'./utils/SideBarDecorator'
55
importNewUserExperienceTutorialfrom'../src/components/NewUserExperience/NuxTutorial'
66

7+
conststyles={
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+
<divcss={styles.container}>
20+
<NewUserExperienceTutorial/>
21+
</div>
22+
))

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp