@@ -5,6 +5,68 @@ description: "Examples showing how to utilize TutorialKit APIs"
5
5
6
6
## Access tutorial state
7
7
8
+ In this example we'll read contents of ` index.js ` using Tutorial Store APIs.
9
+
10
+ When user clicks ` Help ` button, we check the contents of ` index.js ` and provide them hints about next steps.
11
+
12
+ <a class = " my-4 inline-block" href = " https://stackblitz.com/edit/tutorialkit-api-use-helpbutton?file=src/components/HelpButton.tsx&file=src/content/tutorial/1-basics/1-introduction/1-welcome/content.mdx" >
13
+ <img alt = " Open in StackBlitz" src = " https://developer.stackblitz.com/img/open_in_stackblitz.svg" />
14
+ </a >
15
+
16
+ ``` tsx
17
+ import tutorialStore from " tutorialkit:store" ;
18
+ import { Dialog } from " @tutorialkit/react" ;
19
+ import { useState } from " react" ;
20
+ import { parseModule } from " magicast" ;
21
+
22
+ export default function HelpButton() {
23
+ const [message, setMessage] = useState <string | null >(null );
24
+
25
+ function onClick() {
26
+ const files = tutorialStore .documents .value ;
27
+ const index = files [" /index.js" ].value as string ;
28
+
29
+ const message = verifyIndexJs (index );
30
+ setMessage (message );
31
+ }
32
+
33
+ return (
34
+ <>
35
+ <button onClick = { onClick } className = " px-4 py-1 rounded-md bg-tk-elements-primaryButton-backgroundColor text-tk-elements-primaryButton-textColor" >
36
+ Help
37
+ </button >
38
+
39
+ { message && (
40
+ <Dialog title = " Help" confirmText = " OK" onClose = { () => setMessage (null )} >
41
+ { message }
42
+ </Dialog >
43
+ )}
44
+ </>
45
+ );
46
+ }
47
+
48
+ function verifyIndexJs(code : string ) {
49
+ const mod = parseModule (code );
50
+
51
+ const hasSumFunction =
52
+ mod .$ast .type === " Program" &&
53
+ mod .$ast .body .some (
54
+ (node ) => node .type === " FunctionDeclaration" && node .id .name === " sum"
55
+ );
56
+
57
+ if (! hasSumFunction ) {
58
+ return " Your index.js should have a sum function" ;
59
+ }
60
+
61
+ if (mod .exports .default ?.$name !== " sum" ) {
62
+ return " Your index.js should export sum as default export" ;
63
+ }
64
+
65
+ return " All good" ;
66
+ }
67
+ ```
68
+
69
+
8
70
## Write to terminal
9
71
10
72
## Provide feedback to user when lesson is solved
0 commit comments