@btst/stack 5.0.0 → 5.2.0

package/dist/packages/stack/src/plugins/school/client/components/pages/lesson-editor-page.internal.mjs

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

package/dist/packages/stack/src/plugins/school/client/components/pages/lesson-editor-page.mjs

@@ -0,0 +1,32 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { lazy } from 'react';
+import { ComposedRoute } from '@btst/stack/client/components';
+import { SchoolNotFound, SchoolError, SchoolLoading } from './route-state.mjs';
+import { schoolPermissions } from '../../../../../../../../plugins/school/permissions.mjs';
+
+const Page = lazy(
+  () => import('./lesson-editor-page.internal.mjs').then((m) => ({
+    default: m.LessonEditorPage
+  }))
+);
+function LessonEditorPageComponent({
+  id,
+  lessonId
+}) {
+  return /* @__PURE__ */ jsx(
+    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)
+    }
+  );
+}
+
+export { LessonEditorPageComponent };

package/dist/packages/stack/src/plugins/school/client/components/pages/lesson-player-page.cjs

@@ -0,0 +1,32 @@
+"use client";
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const React = require('react');
+const components = require('@btst/stack/client/components');
+const routeState = require('./route-state.cjs');
+
+const Page = React.lazy(
+  () => import('./lesson-player-page.internal.cjs').then((m) => ({
+    default: m.LessonPlayerPage
+  }))
+);
+function LessonPlayerPageComponent({
+  slug,
+  lessonId
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    components.ComposedRoute,
+    {
+      path: `/learn/${slug}/lessons/${lessonId}`,
+      PageComponent: Page,
+      LoadingComponent: routeState.SchoolLoading,
+      ErrorComponent: routeState.SchoolError,
+      NotFoundComponent: routeState.SchoolNotFound,
+      props: { slug, lessonId },
+      onError: (error) => console.error("[btst/school]", error)
+    }
+  );
+}
+
+exports.LessonPlayerPageComponent = LessonPlayerPageComponent;