Skip to content

Commit ef50b2b

Browse files
authored
docs: add react component docs (#117)
1 parent 5e1a8bc commit ef50b2b

File tree

20 files changed

+1523
-311
lines changed

20 files changed

+1523
-311
lines changed

docs/demo/package.json

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,11 @@
44
"type": "module",
55
"private": true,
66
"scripts": {
7-
"astro": "astro",
8-
"build_with_check": "astro check && pnpm run build",
9-
"build": "astro build && cp _headers ./dist/",
107
"dev": "astro dev",
11-
"preview": "astro preview",
12-
"start": "astro dev"
8+
"start": "astro dev",
9+
"build": "astro build && cp _headers ./dist/",
10+
"build_with_check": "astro check && pnpm run build",
11+
"preview": "astro preview"
1312
},
1413
"dependencies": {
1514
"@tutorialkit/components-react": "workspace:*",

docs/tutorialkit.dev/_headers

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
/*
2+
Cross-Origin-Embedder-Policy: require-corp
3+
Cross-Origin-Opener-Policy: same-origin

docs/tutorialkit.dev/astro.config.ts

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,20 @@ import react from '@astrojs/react';
22
import starlight from '@astrojs/starlight';
33
import { defineConfig } from 'astro/config';
44
import starlightLinksValidator from 'starlight-links-validator';
5+
import UnoCSS from 'unocss/astro';
56

67
// https://astro.build/config
78
export default defineConfig({
89
site: 'https://tutorialkit.dev',
10+
server: {
11+
headers: {
12+
'Cross-Origin-Embedder-Policy': 'require-corp',
13+
'Cross-Origin-Opener-Policy': 'same-origin',
14+
},
15+
},
916
integrations: [
1017
react(),
18+
UnoCSS(),
1119
starlight({
1220
title: 'Create interactive coding tutorials',
1321
social: {
@@ -67,6 +75,10 @@ export default defineConfig({
6775
label: 'Theming',
6876
link: '/reference/theming/',
6977
},
78+
{
79+
label: 'React Components',
80+
link: '/reference/react-components',
81+
},
7082
],
7183
},
7284
],

docs/tutorialkit.dev/package.json

Lines changed: 14 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -6,26 +6,32 @@
66
"scripts": {
77
"dev": "astro dev",
88
"start": "astro dev",
9-
"build": "astro check && astro build",
9+
"build": "astro check && astro build && cp _headers ./dist/",
1010
"preview": "astro preview",
1111
"astro": "astro"
1212
},
1313
"dependencies": {
14+
"@tutorialkit/components-react": "workspace:*",
15+
"@webcontainer/api": "1.2.0",
16+
"classnames": "^2.5.1",
17+
"react": "^18.3.1",
18+
"react-dom": "^18.3.1"
19+
},
20+
"devDependencies": {
1421
"@astrojs/check": "^0.7.0",
1522
"@astrojs/react": "^3.6.0",
1623
"@astrojs/starlight": "^0.23.4",
24+
"@iconify-json/ph": "^1.1.13",
25+
"@tutorialkit/theme": "workspace:*",
26+
"@types/gtag.js": "^0.0.20",
1727
"@types/react": "^18.3.3",
1828
"@types/react-dom": "^18.3.0",
1929
"astro": "^4.10.3",
20-
"classnames": "^2.5.1",
21-
"react": "^18.3.1",
22-
"react-dom": "^18.3.1",
30+
"fast-glob": "^3.3.2",
2331
"sass": "^1.77.6",
2432
"sharp": "^0.32.6",
2533
"starlight-links-validator": "^0.9.0",
26-
"typescript": "^5.4.5"
27-
},
28-
"devDependencies": {
29-
"@types/gtag.js": "^0.0.20"
34+
"typescript": "^5.4.5",
35+
"unocss": "^0.59.4"
3036
}
3137
}
Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
---
2+
import { classNames } from '@tutorialkit/components-react';
3+
import './theme.css';
4+
5+
interface Props {
6+
className?: string;
7+
previewClassName?: string;
8+
}
9+
10+
const { className, previewClassName } = Astro.props;
11+
---
12+
13+
<div class={classNames('not-content react-example overflow-hidden', className)}>
14+
<div
15+
class={classNames(
16+
'border border-[var(--ec-brdCol)] border-b-transparent border-solid rounded-t overflow-y-auto',
17+
previewClassName,
18+
)}
19+
>
20+
<slot name="preview" />
21+
</div>
22+
23+
<slot name="code" />
24+
</div>
Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
import type { EditorDocument, EditorUpdate, ScrollPosition } from '@tutorialkit/components-react/core';
2+
import CodeMirrorEditor from '@tutorialkit/components-react/core/CodeMirrorEditor';
3+
import { useState } from 'react';
4+
import { useTheme } from './hooks/useTheme';
5+
6+
export default function ExampleCodeMirrorEditor() {
7+
const { editorDocument, theme, onChange, onScroll } = useEditorDocument();
8+
9+
return (
10+
<CodeMirrorEditor
11+
theme={theme}
12+
doc={editorDocument}
13+
onChange={onChange}
14+
onScroll={onScroll}
15+
debounceChange={500}
16+
debounceScroll={500}
17+
className="h-full text-sm"
18+
/>
19+
);
20+
}
21+
22+
function useEditorDocument() {
23+
const theme = useTheme();
24+
const [editorDocument, setEditorDocument] = useState<EditorDocument>(DEFAULT_DOCUMENT);
25+
26+
function onChange({ content }: EditorUpdate) {
27+
setEditorDocument((prev) => ({
28+
...prev,
29+
value: content,
30+
}));
31+
}
32+
33+
function onScroll(scroll: ScrollPosition) {
34+
setEditorDocument((prev) => ({
35+
...prev,
36+
scroll,
37+
}));
38+
}
39+
40+
return {
41+
theme,
42+
editorDocument,
43+
onChange,
44+
onScroll,
45+
};
46+
}
47+
48+
const DEFAULT_DOCUMENT: EditorDocument = {
49+
filePath: 'index.js',
50+
loading: false,
51+
value: 'function hello() {\n console.log("Hello, world!");\n}\n\nhello();',
52+
};
Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import { useState } from 'react';
2+
import FileTree from '@tutorialkit/components-react/core/FileTree';
3+
4+
export default function ExampleFileTree() {
5+
const [selectedFile, setSelectedFile] = useState(FILES[0]);
6+
7+
return (
8+
<FileTree
9+
files={FILES}
10+
hideRoot
11+
className="my-file-tree"
12+
hiddenFiles={['package-lock.json']}
13+
selectedFile={selectedFile}
14+
onFileSelect={setSelectedFile}
15+
/>
16+
);
17+
}
18+
19+
const FILES = [
20+
'/src/index.js',
21+
'/src/index.html',
22+
'/src/assets/logo.svg',
23+
'/package-lock.json',
24+
'/package.json',
25+
'/vite.config.js',
26+
];

0 commit comments

Comments
 (0)