@btst/stack 5.1.0 → 5.2.0

package/src/plugins/school/client/components/pages/course-list-page.internal.tsx

@@ -0,0 +1,109 @@
+"use client";
+import { useDeferredValue, useState } from "react";
+import { useSuspenseCourses } from "../../hooks";
+import type { CatalogFilters } from "../../../query-keys";
+import { SchoolShell, CourseCard, EmptyMessage } from "./school-shared";
+
+export function CourseListPage() {
+	const [filters, setFilters] = useState<CatalogFilters>({});
+	const deferredFilters = useDeferredValue(filters);
+	const { data } = useSuspenseCourses(deferredFilters);
+	const set = <K extends keyof CatalogFilters>(
+		key: K,
+		value: CatalogFilters[K],
+	) => setFilters((old) => ({ ...old, [key]: value }));
+	return (
+		<SchoolShell
+			title="Find your next course"
+			description="Learn something useful, one lesson at a time."
+		>
+			<div className="school-filters" role="search" aria-label="Filter courses">
+				<label>
+					Search
+					<input
+						type="search"
+						placeholder="Search courses"
+						value={filters.query ?? ""}
+						onChange={(e) => set("query", e.target.value || undefined)}
+					/>
+				</label>
+				<label>
+					Category
+					<input
+						placeholder="All categories"
+						value={filters.category ?? ""}
+						onChange={(e) => set("category", e.target.value || undefined)}
+					/>
+				</label>
+				<label>
+					Difficulty
+					<select
+						value={filters.difficulty ?? ""}
+						onChange={(e) =>
+							set(
+								"difficulty",
+								(e.target.value || undefined) as CatalogFilters["difficulty"],
+							)
+						}
+					>
+						<option value="">All levels</option>
+						<option value="beginner">Beginner</option>
+						<option value="intermediate">Intermediate</option>
+						<option value="advanced">Advanced</option>
+					</select>
+				</label>
+				<label>
+					Duration
+					<select
+						value={filters.maxDurationMins ?? ""}
+						onChange={(e) =>
+							set(
+								"maxDurationMins",
+								e.target.value ? Number(e.target.value) : undefined,
+							)
+						}
+					>
+						<option value="">Any duration</option>
+						<option value="30">Up to 30 min</option>
+						<option value="60">Up to 1 hour</option>
+						<option value="180">Up to 3 hours</option>
+					</select>
+				</label>
+				<label>
+					Price
+					<select
+						value={filters.pricing ?? ""}
+						onChange={(e) =>
+							set(
+								"pricing",
+								(e.target.value || undefined) as CatalogFilters["pricing"],
+							)
+						}
+					>
+						<option value="">Any price</option>
+						<option value="free">Free</option>
+						<option value="paid">Paid</option>
+					</select>
+				</label>
+			</div>
+			<p className="school-result-count">
+				{data.total} {data.total === 1 ? "course" : "courses"}
+			</p>
+			{data.items.length ? (
+				<div
+					className="school-course-grid"
+					aria-busy={filters !== deferredFilters}
+				>
+					{data.items.map((course) => (
+						<CourseCard key={course.id} course={course} />
+					))}
+				</div>
+			) : (
+				<EmptyMessage>
+					No courses match these filters. Try a different category or
+					difficulty.
+				</EmptyMessage>
+			)}
+		</SchoolShell>
+	);
+}

package/src/plugins/school/client/components/pages/course-list-page.tsx

@@ -0,0 +1,21 @@
+"use client";
+import { lazy } from "react";
+import { ComposedRoute } from "@btst/stack/client/components";
+import { SchoolLoading, SchoolNotFound, SchoolError } from "./route-state";
+const Page = lazy(() =>
+	import("./course-list-page.internal").then((m) => ({
+		default: m.CourseListPage,
+	})),
+);
+export function CourseListPageComponent() {
+	return (
+		<ComposedRoute
+			path={`/learn`}
+			PageComponent={Page}
+			LoadingComponent={SchoolLoading}
+			ErrorComponent={SchoolError}
+			NotFoundComponent={SchoolNotFound}
+			onError={(error) => console.error("[btst/school]", error)}
+		/>
+	);
+}

package/src/plugins/school/client/components/pages/instructor-dashboard-page.internal.tsx

@@ -0,0 +1,76 @@
+"use client";
+import { Button } from "@workspace/ui/components/button";
+import { usePluginSiteNavigation } from "@btst/stack/context";
+import { useInstructorCourses } from "../../hooks";
+import { SCHOOL_PLUGIN_ID } from "../../constants";
+import { SchoolShell, EmptyMessage } from "./school-shared";
+
+export function InstructorDashboardPage() {
+	const { data: courses } = useInstructorCourses();
+	const { Link, resolve } = usePluginSiteNavigation(SCHOOL_PLUGIN_ID);
+	return (
+		<SchoolShell
+			title="Instructor dashboard"
+			description="Build your curriculum and follow your students’ progress."
+		>
+			<div className="school-toolbar">
+				<p>
+					{courses.length} {courses.length === 1 ? "course" : "courses"}
+				</p>
+				<Button asChild>
+					<Link href={resolve("learn", "instructor", "courses", "new").href}>
+						Create course
+					</Link>
+				</Button>
+			</div>
+			{courses.length ? (
+				<div className="school-table-wrap">
+					<table className="school-table">
+						<thead>
+							<tr>
+								<th>Course</th>
+								<th>Status</th>
+								<th>Lessons</th>
+								<th>
+									<span className="sr-only">Actions</span>
+								</th>
+							</tr>
+						</thead>
+						<tbody>
+							{courses.map((course) => (
+								<tr key={course.id}>
+									<td>
+										<strong>{course.title}</strong>
+										<p className="school-muted">{course.category}</p>
+									</td>
+									<td>
+										<span className="school-pill">{course.status}</span>
+									</td>
+									<td>{course.lessonCount}</td>
+									<td>
+										<Link
+											href={
+												resolve("learn", "instructor", "courses", course.id)
+													.href
+											}
+											aria-label={`Edit ${course.title}`}
+										>
+											Edit course
+										</Link>
+									</td>
+								</tr>
+							))}
+						</tbody>
+					</table>
+				</div>
+			) : (
+				<EmptyMessage>
+					<h2>Start teaching</h2>
+					<p>
+						Create a course, add your lessons, then publish it to the catalog.
+					</p>
+				</EmptyMessage>
+			)}
+		</SchoolShell>
+	);
+}

package/src/plugins/school/client/components/pages/instructor-dashboard-page.tsx

@@ -0,0 +1,23 @@
+"use client";
+import { lazy } from "react";
+import { ComposedRoute } from "@btst/stack/client/components";
+import { SchoolLoading, SchoolNotFound, SchoolError } from "./route-state";
+import { schoolPermissions } from "../../../permissions";
+const Page = lazy(() =>
+	import("./instructor-dashboard-page.internal").then((m) => ({
+		default: m.InstructorDashboardPage,
+	})),
+);
+export function InstructorDashboardPageComponent() {
+	return (
+		<ComposedRoute
+			path={`/learn/instructor`}
+			PageComponent={Page}
+			LoadingComponent={SchoolLoading}
+			ErrorComponent={SchoolError}
+			NotFoundComponent={SchoolNotFound}
+			permission={schoolPermissions.course.read({ scope: "instructor" })}
+			onError={(error) => console.error("[btst/school]", error)}
+		/>
+	);
+}

package/src/plugins/school/client/components/pages/lesson-editor-page.internal.tsx

@@ -0,0 +1,439 @@
+"use client";
+import { useState, type FormEvent } from "react";
+import { Plus, Trash2 } from "lucide-react";
+import { Button } from "@workspace/ui/components/button";
+import { usePluginSiteNavigation } from "@btst/stack/context";
+import { school, useCourseEditor, useLessonEditor } from "../../hooks";
+import { SCHOOL_PLUGIN_ID } from "../../constants";
+import type { LessonInput } from "@btst/stack/plugins/school/query-keys";
+import type { CourseDetail, Lesson, Quiz } from "../../../types";
+import { SchoolShell, ErrorMessage } from "./school-shared";
+
+export function LessonEditorPage({
+	id,
+	lessonId,
+}: {
+	id: string;
+	lessonId: string;
+}) {
+	const course = useCourseEditor(id);
+	const lesson = useLessonEditor(lessonId);
+	if (course.error) throw course.error;
+	if (lesson.error) throw lesson.error;
+	if (!course.data || (lessonId !== "new" && !lesson.data))
+		return (
+			<p className="school-shell" role="status">
+				Loading lesson…
+			</p>
+		);
+	if (lesson.data && lesson.data.courseId !== id)
+		throw new Error("This lesson does not belong to this course.");
+	return (
+		<SchoolShell
+			title={lessonId === "new" ? "Add a lesson" : "Edit lesson"}
+			description={course.data.title}
+		>
+			<LessonForm
+				key={lesson.data?.id ?? "new"}
+				course={course.data}
+				lesson={lesson.data}
+			/>
+		</SchoolShell>
+	);
+}
+const blankQuestion = () => ({
+	id: crypto.randomUUID(),
+	question: "",
+	options: ["", ""],
+	correctAnswer: 0,
+});
+
+function LessonForm({
+	course,
+	lesson,
+}: {
+	course: CourseDetail;
+	lesson?: Lesson;
+}) {
+	const { navigate, Link, resolve } = usePluginSiteNavigation(SCHOOL_PLUGIN_ID);
+	const create = school.schoolLessons.create.use();
+	const update = school.schoolLessons.update.use();
+	const [saved, setSaved] = useState(false);
+	const [values, setValues] = useState<LessonInput>({
+		title: lesson?.title ?? "",
+		type: lesson?.type ?? "text",
+		sectionId: lesson?.sectionId ?? null,
+		content: lesson?.content ?? "",
+		videoUrl: lesson?.videoUrl ?? "",
+		durationMins: lesson?.durationMins ?? 0,
+		order:
+			lesson?.order ??
+			Math.max(-1, ...course.lessons.map((item) => item.order)) + 1,
+		isFreePreview: lesson?.isFreePreview ?? false,
+		resources: lesson?.resources ?? [],
+		quiz: lesson?.quiz
+			? {
+					...lesson.quiz,
+					questions: lesson.quiz.questions.map((question) => ({
+						...question,
+						correctAnswer:
+							"correctAnswer" in question ? question.correctAnswer : 0,
+					})),
+				}
+			: null,
+	});
+	const [quiz, setQuiz] = useState<Quiz>(
+		() => values.quiz ?? { questions: [blankQuestion()] },
+	);
+	const set = <K extends keyof LessonInput>(key: K, value: LessonInput[K]) => {
+		setSaved(false);
+		setValues((old) => ({ ...old, [key]: value }));
+	};
+	const setQuestion = (
+		index: number,
+		data: Partial<Quiz["questions"][number]>,
+	) =>
+		setQuiz((old) => ({
+			...old,
+			questions: old.questions.map((question, i) =>
+				i === index ? { ...question, ...data } : question,
+			),
+		}));
+	const submit = async (event: FormEvent) => {
+		event.preventDefault();
+		try {
+			const body = { ...values, quiz: values.type === "quiz" ? quiz : null };
+			if (lesson) {
+				await update.mutateAsync({ id: lesson.id, data: body });
+				setSaved(true);
+			} else {
+				await create.mutateAsync({ id: course.id, data: body });
+				await navigate("learn", "instructor", "courses", course.id);
+			}
+		} catch {
+			/* Validation and operation errors are rendered below. */
+		}
+	};
+	return (
+		<form onSubmit={(event) => void submit(event)} className="school-form">
+			<Link href={resolve("learn", "instructor", "courses", course.id).href}>
+				Back to course
+			</Link>
+			<label>
+				Lesson title
+				<input
+					value={values.title}
+					onChange={(e) => set("title", e.target.value)}
+					required
+					maxLength={200}
+				/>
+			</label>
+			<div className="school-form-grid">
+				<label>
+					Lesson type
+					<select
+						value={values.type}
+						onChange={(e) => set("type", e.target.value as LessonInput["type"])}
+					>
+						<option value="text">Text</option>
+						<option value="video">Video</option>
+						<option value="quiz">Quiz</option>
+					</select>
+				</label>
+				<label>
+					Section
+					<select
+						value={values.sectionId ?? ""}
+						onChange={(e) => set("sectionId", e.target.value || null)}
+					>
+						<option value="">No section</option>
+						{course.sections.map((section) => (
+							<option key={section.id} value={section.id}>
+								{section.title}
+							</option>
+						))}
+					</select>
+				</label>
+			</div>
+			<div className="school-form-grid">
+				<label>
+					Duration (minutes)
+					<input
+						type="number"
+						min={0}
+						step={1}
+						value={values.durationMins}
+						onChange={(e) => set("durationMins", Number(e.target.value))}
+					/>
+				</label>
+				<label className="school-checkbox">
+					<input
+						type="checkbox"
+						checked={values.isFreePreview}
+						onChange={(e) => set("isFreePreview", e.target.checked)}
+					/>
+					Allow free preview
+				</label>
+			</div>
+			{values.type === "video" && (
+				<label>
+					Video URL
+					<input
+						type="url"
+						value={values.videoUrl ?? ""}
+						onChange={(e) => set("videoUrl", e.target.value)}
+						required
+						placeholder="https://…"
+					/>
+					<span className="school-muted">
+						Use a directly playable video URL.
+					</span>
+				</label>
+			)}
+			{values.type !== "quiz" && (
+				<label>
+					{values.type === "video"
+						? "Lesson notes or transcript"
+						: "Lesson content"}
+					<textarea
+						value={values.content}
+						onChange={(e) => set("content", e.target.value)}
+						rows={14}
+						maxLength={100000}
+					/>
+					<span className="school-muted">
+						Markdown formatting is supported.
+					</span>
+				</label>
+			)}
+			{values.type === "quiz" && (
+				<section className="school-quiz-author">
+					<h2>Quiz questions</h2>
+					<div className="school-form-grid">
+						<label>
+							Pass mark (%)
+							<input
+								type="number"
+								min={0}
+								max={100}
+								value={quiz.passMark ?? ""}
+								placeholder="School default"
+								onChange={(e) =>
+									setQuiz((old) => ({
+										...old,
+										passMark:
+											e.target.value === ""
+												? undefined
+												: Number(e.target.value),
+									}))
+								}
+							/>
+						</label>
+						<label>
+							Maximum attempts
+							<input
+								type="number"
+								min={1}
+								max={100}
+								step={1}
+								value={quiz.maxAttempts ?? ""}
+								placeholder="Unlimited"
+								onChange={(e) =>
+									setQuiz((old) => ({
+										...old,
+										maxAttempts:
+											e.target.value === ""
+												? undefined
+												: Number(e.target.value),
+									}))
+								}
+							/>
+						</label>
+					</div>
+					{quiz.questions.map((question, index) => (
+						<fieldset className="school-author-question" key={question.id}>
+							<legend>Question {index + 1}</legend>
+							<label>
+								Question
+								<input
+									value={question.question}
+									onChange={(e) =>
+										setQuestion(index, { question: e.target.value })
+									}
+									required
+									maxLength={2000}
+								/>
+							</label>
+							{question.options.map((option, optionIndex) => (
+								<label key={optionIndex}>
+									Option {optionIndex + 1}
+									<input
+										value={option}
+										onChange={(e) =>
+											setQuestion(index, {
+												options: question.options.map((value, i) =>
+													i === optionIndex ? e.target.value : value,
+												),
+											})
+										}
+										required
+										maxLength={1000}
+									/>
+								</label>
+							))}
+							<div className="school-actions">
+								<Button
+									type="button"
+									variant="outline"
+									disabled={question.options.length >= 10}
+									onClick={() =>
+										setQuestion(index, { options: [...question.options, ""] })
+									}
+								>
+									Add option
+								</Button>
+								{question.options.length > 2 && (
+									<Button
+										type="button"
+										variant="ghost"
+										onClick={() =>
+											setQuestion(index, {
+												options: question.options.slice(0, -1),
+												correctAnswer: Math.min(
+													question.correctAnswer,
+													question.options.length - 2,
+												),
+											})
+										}
+									>
+										Remove last option
+									</Button>
+								)}
+							</div>
+							<label>
+								Correct answer
+								<select
+									value={question.correctAnswer}
+									onChange={(e) =>
+										setQuestion(index, {
+											correctAnswer: Number(e.target.value),
+										})
+									}
+								>
+									{question.options.map((option, i) => (
+										<option key={i} value={i}>
+											Option {i + 1}
+											{option ? `: ${option}` : ""}
+										</option>
+									))}
+								</select>
+							</label>
+							{quiz.questions.length > 1 && (
+								<Button
+									type="button"
+									variant="ghost"
+									onClick={() =>
+										setQuiz((old) => ({
+											...old,
+											questions: old.questions.filter((_, i) => i !== index),
+										}))
+									}
+								>
+									<Trash2 aria-hidden="true" size={16} />
+									Remove question
+								</Button>
+							)}
+						</fieldset>
+					))}
+					<Button
+						type="button"
+						variant="outline"
+						disabled={quiz.questions.length >= 100}
+						onClick={() =>
+							setQuiz((old) => ({
+								...old,
+								questions: [...old.questions, blankQuestion()],
+							}))
+						}
+					>
+						<Plus aria-hidden="true" size={16} />
+						Add question
+					</Button>
+				</section>
+			)}
+			<section>
+				<h2>Downloadable resources</h2>
+				{values.resources?.map((resource, index) => (
+					<div key={index} className="school-resource-row">
+						<label>
+							Resource label
+							<input
+								value={resource.label}
+								onChange={(e) =>
+									set(
+										"resources",
+										values.resources?.map((value, i) =>
+											i === index ? { ...value, label: e.target.value } : value,
+										),
+									)
+								}
+								required
+								maxLength={200}
+							/>
+						</label>
+						<label>
+							Resource URL
+							<input
+								type="url"
+								value={resource.url}
+								onChange={(e) =>
+									set(
+										"resources",
+										values.resources?.map((value, i) =>
+											i === index ? { ...value, url: e.target.value } : value,
+										),
+									)
+								}
+								required
+							/>
+						</label>
+						<Button
+							type="button"
+							variant="ghost"
+							aria-label={`Remove resource ${index + 1}`}
+							onClick={() =>
+								set(
+									"resources",
+									values.resources?.filter((_, i) => i !== index),
+								)
+							}
+						>
+							<Trash2 aria-hidden="true" size={16} />
+						</Button>
+					</div>
+				))}
+				<Button
+					type="button"
+					variant="outline"
+					disabled={(values.resources?.length ?? 0) >= 30}
+					onClick={() =>
+						set("resources", [
+							...(values.resources ?? []),
+							{ label: "", url: "" },
+						])
+					}
+				>
+					<Plus aria-hidden="true" size={16} />
+					Add resource
+				</Button>
+			</section>
+			<ErrorMessage error={create.error ?? update.error} />
+			<div className="school-actions">
+				<Button type="submit" disabled={create.isPending || update.isPending}>
+					{create.isPending || update.isPending ? "Saving…" : "Save lesson"}
+				</Button>
+				{saved && <span role="status">Lesson saved.</span>}
+			</div>
+		</form>
+	);
+}

package/src/plugins/school/client/components/pages/lesson-editor-page.tsx

@@ -0,0 +1,30 @@
+"use client";
+import { lazy } from "react";
+import { ComposedRoute } from "@btst/stack/client/components";
+import { SchoolLoading, SchoolNotFound, SchoolError } from "./route-state";
+import { schoolPermissions } from "../../../permissions";
+const Page = lazy(() =>
+	import("./lesson-editor-page.internal").then((m) => ({
+		default: m.LessonEditorPage,
+	})),
+);
+export function LessonEditorPageComponent({
+	id,
+	lessonId,
+}: {
+	id: string;
+	lessonId: string;
+}) {
+	return (
+		<ComposedRoute
+			path={`/learn/instructor/courses/${id}/lessons/${lessonId}`}
+			PageComponent={Page}
+			LoadingComponent={SchoolLoading}
+			ErrorComponent={SchoolError}
+			NotFoundComponent={SchoolNotFound}
+			props={{ id, lessonId }}
+			permission={schoolPermissions.course.read({ scope: "instructor" })}
+			onError={(error) => console.error("[btst/school]", error)}
+		/>
+	);
+}