docs: add react component docs

docs/tutorialkit.dev/astro.config.ts

@@ -2,12 +2,20 @@ import react from '@astrojs/react';
 import starlight from '@astrojs/starlight';
 import { defineConfig } from 'astro/config';
 import starlightLinksValidator from 'starlight-links-validator';
+import UnoCSS from 'unocss/astro';
 
 // https://astro.build/config
 export default defineConfig({
   site: 'https://tutorialkit.dev',
+  server: {
+    headers: {
+      'Cross-Origin-Embedder-Policy': 'require-corp',
+      'Cross-Origin-Opener-Policy': 'same-origin',
+    },
+  },
   integrations: [
     react(),
+    UnoCSS(),
     starlight({
       title: 'Create interactive coding tutorials',
       social: {
@@ -63,6 +71,10 @@ export default defineConfig({
               label: 'Theming',
               link: '/reference/theming/',
             },
+            {
+              label: 'React components',
+              link: '/reference/react-components',
+            },
           ],
         },
       ],

docs/tutorialkit.dev/package.json

@@ -11,21 +11,27 @@
     "astro": "astro"
   },
   "dependencies": {
+    "@tutorialkit/components-react": "workspace:*",
+    "@webcontainer/api": "1.2.0",
+    "classnames": "^2.5.1",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "devDependencies": {
     "@astrojs/check": "^0.7.0",
     "@astrojs/react": "^3.6.0",
     "@astrojs/starlight": "^0.23.4",
+    "@iconify-json/ph": "^1.1.13",
+    "@tutorialkit/theme": "workspace:*",
+    "@types/gtag.js": "^0.0.20",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "astro": "^4.10.3",
-    "classnames": "^2.5.1",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "fast-glob": "^3.3.2",
     "sass": "^1.77.6",
     "sharp": "^0.32.6",
     "starlight-links-validator": "^0.9.0",
-    "typescript": "^5.4.5"
-  },
-  "devDependencies": {
-    "@types/gtag.js": "^0.0.20"
+    "typescript": "^5.4.5",
+    "unocss": "^0.59.4"
   }
 }

docs/tutorialkit.dev/src/components/react-examples/Example.astro

@@ -0,0 +1,27 @@
+---
+import { classNames } from '@tutorialkit/components-react';
+
+interface Props {
+  className?: string;
+  previewClassName?: string;
+}
+
+const { className, previewClassName } = Astro.props;
+---
+
+<div class={classNames('not-content react-example overflow-hidden', className)}>
+  <div
+    class={classNames(
+      'border border-[var(--ec-brdCol)] border-b-transparent border-solid rounded-t overflow-y-auto',
+      previewClassName,
+    )}
+  >
+    <slot name="preview" />
+  </div>
+
+  <slot name="code" />
+</div>
+<script>
+  import 'uno.css';
+  import './theme.css';
+</script>

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

@@ -0,0 +1,52 @@
+import type { EditorDocument, EditorUpdate, ScrollPosition } from '@tutorialkit/components-react/core';
+import CodeMirrorEditor from '@tutorialkit/components-react/core/CodeMirrorEditor';
+import { useState } from 'react';
+import { useTheme } from './hooks/useTheme';
+
+export default function ExampleCodeMirrorEditor() {
+  const { document, theme, onChange, onScroll } = useEditorDocument();
+
+  return (
+    <CodeMirrorEditor
+      theme={theme}
+      doc={document}
+      onChange={onChange}
+      onScroll={onScroll}
+      debounceChange={500}
+      debounceScroll={500}
+      className="h-full text-sm"
+    />
+  );
+}
+
+function useEditorDocument() {
+  const theme = useTheme();
+  const [document, setDocument] = useState<EditorDocument>(DEFAULT_DOCUMENT);
+
+  function onChange({ content }: EditorUpdate) {
+    setDocument((prev) => ({
+      ...prev,
+      value: content,
+    }));
+  }
+
+  function onScroll(scroll: ScrollPosition) {
+    setDocument((prev) => ({
+      ...prev,
+      scroll,
+    }));
+  }
+
+  return {
+    theme,
+    document,
+    onChange,
+    onScroll,
+  };
+}
+
+const DEFAULT_DOCUMENT: EditorDocument = {
+  filePath: 'index.js',
+  loading: false,
+  value: 'function hello() {\n  console.log("Hello, world!");\n}\n\nhello();',
+};

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

@@ -0,0 +1,26 @@
+import { useState } from 'react';
+import FileTree from '@tutorialkit/components-react/core/FileTree';
+
+export default function ExampleFileTree() {
+  const [selectedFile, setSelectedFile] = useState(FILES[0]);
+
+  return (
+    <FileTree
+      files={FILES}
+      hideRoot
+      className=""
+      hiddenFiles={['package-lock.json']}
+      selectedFile={selectedFile}
+      onFileSelect={setSelectedFile}
+    />
+  );
+}
+
+const FILES = [
+  '/src/index.js',
+  '/src/index.html',
+  '/src/assets/logo.svg',
+  '/package-lock.json',
+  '/package.json',
+  '/vite.config.js',
+];