Skip to content

Commit b8c6c80

Browse files
committed
docs: first version on 'how to use tutorial store' docs
1 parent 87e69d0 commit b8c6c80

File tree

1 file changed

+62
-0
lines changed

1 file changed

+62
-0
lines changed

docs/tutorialkit.dev/src/content/docs/guides/how-to-use-tutorialkit-api.mdx

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,68 @@ description: "Examples showing how to utilize TutorialKit APIs"
55

66
## Access tutorial state
77

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+
870
## Write to terminal
971

1072
## Provide feedback to user when lesson is solved

0 commit comments

Comments
 (0)