@lessonkit/react 0.3.1 → 0.5.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +24 -10
- package/dist/index.cjs +369 -85
- package/dist/index.d.cts +46 -16
- package/dist/index.d.ts +46 -16
- package/dist/index.js +367 -80
- package/package.json +7 -6
package/README.md
CHANGED
|
@@ -17,7 +17,7 @@ npm install @lessonkit/react react react-dom
|
|
|
17
17
|
```tsx
|
|
18
18
|
import { useMemo } from "react";
|
|
19
19
|
import type { TelemetryEvent } from "@lessonkit/core";
|
|
20
|
-
import { Course, Lesson, Quiz, Scenario, ProgressTracker } from "@lessonkit/react";
|
|
20
|
+
import { Course, Lesson, Quiz, Scenario, ProgressTracker, ThemeProvider } from "@lessonkit/react";
|
|
21
21
|
import type { XAPIStatement } from "@lessonkit/xapi";
|
|
22
22
|
|
|
23
23
|
export default function App() {
|
|
@@ -34,6 +34,7 @@ export default function App() {
|
|
|
34
34
|
);
|
|
35
35
|
|
|
36
36
|
return (
|
|
37
|
+
<ThemeProvider mode="light">
|
|
37
38
|
<Course title="Cybersecurity Basics" courseId="cyber-basics" config={config}>
|
|
38
39
|
<ProgressTracker />
|
|
39
40
|
|
|
@@ -43,26 +44,27 @@ export default function App() {
|
|
|
43
44
|
</Scenario>
|
|
44
45
|
|
|
45
46
|
<Quiz
|
|
47
|
+
checkId="first-step"
|
|
46
48
|
question="What should you do first?"
|
|
47
49
|
choices={["Open attachment", "Verify sender"]}
|
|
48
50
|
answer="Verify sender"
|
|
49
51
|
/>
|
|
50
52
|
</Lesson>
|
|
51
53
|
</Course>
|
|
54
|
+
</ThemeProvider>
|
|
52
55
|
);
|
|
53
56
|
}
|
|
54
57
|
```
|
|
55
58
|
|
|
56
|
-
## API (0.
|
|
59
|
+
## API (0.5.0)
|
|
57
60
|
|
|
58
61
|
### Components
|
|
59
62
|
|
|
60
|
-
- `Course`
|
|
61
|
-
- `Lesson`
|
|
62
|
-
- `Scenario`
|
|
63
|
-
- `Quiz`
|
|
64
|
-
- `Reflection`
|
|
65
|
-
- `KnowledgeCheck`
|
|
63
|
+
- `Course` — requires `courseId`
|
|
64
|
+
- `Lesson` — requires `lessonId`
|
|
65
|
+
- `Scenario` — optional `blockId`
|
|
66
|
+
- `Quiz` / `KnowledgeCheck` — require `checkId`
|
|
67
|
+
- `Reflection` — optional `blockId`
|
|
66
68
|
- `ProgressTracker`
|
|
67
69
|
|
|
68
70
|
### Hooks
|
|
@@ -71,6 +73,12 @@ export default function App() {
|
|
|
71
73
|
- `useTracking`
|
|
72
74
|
- `useQuizState`
|
|
73
75
|
- `useCompletion`
|
|
76
|
+
- `useTheme`
|
|
77
|
+
|
|
78
|
+
### Theming
|
|
79
|
+
|
|
80
|
+
- `ThemeProvider` — injects `--lk-*` CSS variables (see [`docs/THEMING.md`](../../docs/THEMING.md))
|
|
81
|
+
- Props: `preset`, `mode` (`light` | `dark` | `system`), `theme` (partial override), `target` (`document` | `element`)
|
|
74
82
|
|
|
75
83
|
## Notes
|
|
76
84
|
|
|
@@ -79,9 +87,15 @@ export default function App() {
|
|
|
79
87
|
- `Course` accepts a `config` prop that is passed through to `LessonkitProvider` (tracking sink,
|
|
80
88
|
optional `xapi.transport` or custom `xapi.client`, session metadata). Hoist `config` with `useMemo`
|
|
81
89
|
so tracking/xAPI clients are not recreated every render.
|
|
82
|
-
-
|
|
83
|
-
|
|
90
|
+
- A lesson is marked complete when its `<Lesson>` unmounts (for example, wizard navigation) or when
|
|
91
|
+
another lesson becomes active via `setActiveLesson`. Use stable `lessonId` values so completion and
|
|
92
|
+
time-on-task telemetry stay consistent.
|
|
93
|
+
- `<Lesson>` defers completion on unmount so React Strict Mode remounts in development do not emit
|
|
94
|
+
spurious `lesson_completed` events; completion runs after the component leaves the tree.
|
|
84
95
|
- If you omit `session.sessionId`, the provider reuses a tab-scoped id via `sessionStorage` so React
|
|
85
96
|
Strict Mode remounts do not split analytics sessions in development.
|
|
97
|
+
- In development, invalid `courseId` / `lessonId` / `checkId` values log a one-time `console.warn`.
|
|
86
98
|
- Accessibility guidance lives in [`docs/ACCESSIBILITY.md`](../../docs/ACCESSIBILITY.md).
|
|
99
|
+
- Theming and token catalog: [`docs/THEMING.md`](../../docs/THEMING.md).
|
|
100
|
+
- Identity and telemetry: [`docs/IDENTITY.md`](../../docs/IDENTITY.md), [`docs/TELEMETRY.md`](../../docs/TELEMETRY.md).
|
|
87
101
|
|