docs: add example of tutorialkit:store usage

Author: AriPerkkio

docs/tutorialkit.dev/astro.config.ts

@@ -67,6 +67,10 @@ export default defineConfig({
               label: 'Overriding Components',
               link: '/guides/overriding-components/',
             },
+            {
+              label: 'Using low level APIs',
+              link: '/guides/using-low-level-apis/',
+            },
           ],
         },
         {

docs/tutorialkit.dev/src/components/react-examples/HelpButton.tsx

@@ -0,0 +1,27 @@
+import { Dialog } from '@tutorialkit/react';
+import { useState } from 'react';
+
+export function HelpButton() {
+  const [message, setMessage] = useState<string | null>(null);
+
+  async function onClick() {
+    setMessage('Your index.js should have a default export');
+  }
+
+  return (
+    <>
+      <button
+        onClick={onClick}
+        className="px-4 py-1 my-3 cursor-pointer border-1 border-tk-border-primary rounded-md bg-tk-elements-primaryButton-backgroundColor text-tk-elements-primaryButton-textColor"
+      >
+        Help
+      </button>
+
+      {message && (
+        <Dialog title="Help" confirmText="OK" onClose={() => setMessage(null)}>
+          {message}
+        </Dialog>
+      )}
+    </>
+  );
+}

docs/tutorialkit.dev/src/content/docs/guides/using-low-level-apis.mdx

@@ -0,0 +1,104 @@
+---
+title: Using low level APIs
+---
+
+import { HelpButton } from "@components/react-examples/HelpButton";
+import '@tutorialkit/astro/default-theme.css';
+
+TutorialKit exposes low level APIs that authors can utilize to provide highly custom experience in their tutorials.
+
+## Tutorial Store
+
+You can access Tutorial Store by importing the `tutorialkit:store` entrypoint.
+
+```ts
+import tutorialStore from "tutorialkit:store";
+```
+
+The Tutorial Store provides access to current state of the Tutorial, for example the files and their contents.
+
+```ts
+import tutorialStore from "tutorialkit:store";
+
+console.log(tutorialStore.documents.value);
+{
+  "/index.js": {
+    "value": "export default 'hello from index.js';\n",
+    "type": "file",
+  },
+  "/vite.config.ts": {
+    "value": "import { defineConfig } from \"vite\";\n\nexport default defineConfig({});\n",
+    "type": "file",
+  }
+}
+```
+
+It also exposes methods that can be used to modify lesson files:
+
+```ts
+import tutorialStore from "tutorialkit:store";
+
+await tutorialStore.addFolder("/src");
+await tutorialStore.addFile("/src/new-file.js");
+tutorialStore.updateFile("/src/new-file.js", "console.log('Hello world');");
+```
+
+### Example usage in React component
+
+Here is an example of custom React component that reads contents of `index.js` and gives user hints about the expected content.
+
+<HelpButton client:load />
+
+```tsx title="src/components/HelpButton.tsx"
+import tutorialStore from "tutorialkit:store";
+import { Dialog } from "@tutorialkit/react";
+import { useState } from "react";
+
+export function HelpButton() {
+  const [message, setMessage] = useState<string | null>(null);
+
+  async function onClick() {
+    const files = tutorialStore.documents.value;
+    const index = files["/index.js"].value as string;
+
+    if (index.length === 0) {
+      setMessage("Your index.js should not be empty");
+    } else if (!index.includes("export default")) {
+      setMessage("Your index.js should have a default export");
+    } else {
+      setMessage("All good");
+    }
+  }
+
+  return (
+    <>
+      <button
+        onClick={onClick}
+        className="px-4 py-1 rounded-md bg-tk-elements-primaryButton-backgroundColor text-tk-elements-primaryButton-textColor"
+      >
+        Help
+      </button>
+
+      {message && (
+        <Dialog title="Help" confirmText="OK" onClose={() => setMessage(null)}>
+          {message}
+        </Dialog>
+      )}
+    </>
+  );
+}
+```
+
+```mdx title="content.mdx"
+---
+type: lesson
+title: Lesson Topic
+---
+
+import { HelpButton } from "@/components/HelpButton";
+
+# Lesson Topic
+
+In this lesson we'll learn about...
+Click this button if you need help: <HelpButton client:load />
+```