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

Commit124e5f5

Browse files
authored
Merge pull request#127 from ShMcK/feature/nux
Create help center on tutorial page
2 parentsc28150a +178f091 commit124e5f5

File tree

6 files changed

+237
-1
lines changed

6 files changed

+237
-1
lines changed

‎web-app/package-lock.json

Lines changed: 54 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: 2 additions & 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",
@@ -58,6 +59,7 @@
5859
"@types/node":"^13.7.7",
5960
"@types/prismjs":"^1.16.0",
6061
"@types/react":"^16.9.23",
62+
"@types/react-addons-css-transition-group":"^15.0.5",
6163
"@types/react-dom":"^16.9.5",
6264
"@typescript-eslint/eslint-plugin":"^2.21.0",
6365
"@typescript-eslint/parser":"^2.21.0",
Lines changed: 126 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,126 @@
1+
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
7+
8+
conststyles={
9+
container:{
10+
position:'relative'as'relative',
11+
transition:'all .35s',
12+
},
13+
header:{
14+
display:'flex'as'flex',
15+
backgroundColor:'#6a67ce',
16+
color:'white',
17+
padding:'0.5rem',
18+
},
19+
title:{
20+
fontSize:'1rem',
21+
},
22+
toggle:{
23+
display:'flex'as'flex',
24+
alignItems:'center'as'center',
25+
width:'1.5rem',
26+
},
27+
}
28+
29+
constNewUserExperienceTutorialCollapsible=()=>{
30+
const[expandedKeys,setExpandedKeys]=React.useState<string[]>([])
31+
return(
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">
53+
<p>You can debug a tutorial in a number of ways:</p>
54+
<br/>
55+
<ol>
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>
80+
</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+
interfaceProps{
105+
css?:React.CSSProperties
106+
}
107+
108+
constNewUserExperienceTutorial=(props:Props)=>{
109+
const[isOpen,setIsOpen]=React.useState<boolean>(false)
110+
constonToggle=()=>{
111+
setIsOpen(!isOpen)
112+
}
113+
return(
114+
<divcss={{ ...styles.container, ...props.css}}>
115+
<divcss={styles.header}onClick={onToggle}style={{cursor:'pointer'}}>
116+
<spancss={styles.toggle}>{isOpen ?<Icontype="close"size="xs"/> :<Icontype="help"size="small"/>}</span>
117+
<spancss={styles.title}>Help</span>
118+
</div>
119+
<ReactCSSTransitionGrouptransitionName="slide"transitionEnterTimeout={500}transitionLeaveTimeout={300}>
120+
{isOpen&&<NewUserExperienceTutorialCollapsible/>}
121+
</ReactCSSTransitionGroup>
122+
</div>
123+
)
124+
}
125+
126+
exportdefaultNewUserExperienceTutorial
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/src/containers/Tutorial/LevelPage/Level.tsx

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { css, jsx } from '@emotion/core'
55
importButtonfrom'../../../components/Button'
66
importMarkdownfrom'../../../components/Markdown'
77
importProcessMessagesfrom'../../../components/ProcessMessages'
8+
importNuxTutorialfrom'../../../components/NewUserExperience/NuxTutorial'
89
importStepfrom'./Step'
910

1011
conststyles={
@@ -14,7 +15,7 @@ const styles = {
1415
display:'flex'as'flex',
1516
flexDirection:'column'as'column',
1617
padding:0,
17-
paddingBottom:'4.5rem',
18+
paddingBottom:'5rem',
1819
height:'auto',
1920
width:'100%',
2021
},
@@ -42,6 +43,12 @@ const styles = {
4243
},
4344
processes:{
4445
padding:'0 1rem',
46+
position:'fixed'as'fixed',
47+
bottom:'4rem',
48+
left:0,
49+
right:0,
50+
},
51+
nux:{
4552
position:'fixed'as'fixed',
4653
bottom:'2rem',
4754
left:0,
@@ -129,6 +136,10 @@ const Level = ({ level, onContinue, onLoadSolution, processes, testStatus }: Pro
129136
</div>
130137
)}
131138

139+
<divcss={styles.nux}>
140+
<NuxTutorial/>
141+
</div>
142+
132143
<divcss={styles.footer}>
133144
<span>
134145
{typeoflevel.index==='number' ?`${level.index+1}. ` :''}
Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import{storiesOf}from'@storybook/react'
2+
importReactfrom'react'
3+
import{css,jsx}from'@emotion/core'
4+
importSideBarDecoratorfrom'./utils/SideBarDecorator'
5+
importNewUserExperienceTutorialfrom'../src/components/NewUserExperience/NuxTutorial'
6+
7+
conststyles={
8+
container:{
9+
position:'absolute',
10+
bottom:0,
11+
left:0,
12+
right:0,
13+
},
14+
}
15+
16+
storiesOf('NewUserExperience',module)
17+
.addDecorator(SideBarDecorator)
18+
.add('NUXTutorial',()=>(
19+
<divcss={styles.container}>
20+
<NewUserExperienceTutorial/>
21+
</div>
22+
))

0 commit comments

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