@btst/stack 5.0.0 → 5.2.0

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

@@ -0,0 +1,603 @@
+"use client";
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useState } from 'react';
+import { Plus, GripVertical, ArrowUp, ArrowDown, Trash2 } from 'lucide-react';
+import { Button } from '../../../../../../../ui/src/components/button.mjs';
+import { useIdentity, usePluginSiteNavigation } from '@btst/stack/context';
+import { useCourseEditor, school, useCourseStudents } from '../../../../../../../../plugins/school/client/hooks/index.mjs';
+import { SCHOOL_PLUGIN_ID } from '../../constants.mjs';
+import { SchoolShell, ErrorMessage, Progress } from './school-shared.mjs';
+
+function CourseEditorPage({ id }) {
+  const query = useCourseEditor(id);
+  if (query.error) throw query.error;
+  if (id !== "new" && !query.data)
+    return /* @__PURE__ */ jsx("p", { className: "school-shell", role: "status", children: "Loading course\u2026" });
+  return /* @__PURE__ */ jsx(
+    SchoolShell,
+    {
+      title: id === "new" ? "Create a course" : "Edit course",
+      description: "Give your students a clear path from their first lesson to completion.",
+      children: /* @__PURE__ */ jsx(CourseForm, { course: query.data }, query.data?.id ?? "new")
+    }
+  );
+}
+function CourseForm({ course }) {
+  const { identity } = useIdentity();
+  const { navigate, Link, resolve } = usePluginSiteNavigation(SCHOOL_PLUGIN_ID);
+  const create = school.schoolCourses.create.use();
+  const update = school.schoolCourses.update.use();
+  const remove = school.schoolCourses.delete.use();
+  const [saved, setSaved] = useState(false);
+  const [tags, setTags] = useState(course?.tags.join(", ") ?? "");
+  const [values, setValues] = useState(
+    course ?? {
+      title: "",
+      slug: "",
+      instructorId: identity?.id ?? "",
+      description: "",
+      instructorName: "",
+      instructorBio: "",
+      coverImage: "",
+      category: "",
+      tags: [],
+      difficulty: "beginner",
+      durationMins: 0,
+      price: 0,
+      currency: "USD",
+      status: "draft",
+      featured: false
+    }
+  );
+  const set = (key, value) => {
+    setSaved(false);
+    setValues((old) => ({ ...old, [key]: value }));
+  };
+  const submit = async (event) => {
+    event.preventDefault();
+    try {
+      const body = {
+        ...values,
+        tags: tags.split(",").map((tag) => tag.trim()).filter(Boolean),
+        instructorId: values.instructorId || identity?.id || ""
+      };
+      if (course) {
+        await update.mutateAsync({ id: course.id, data: body });
+        setSaved(true);
+      } else {
+        const created = await create.mutateAsync(body);
+        await navigate("learn", "instructor", "courses", created.id);
+      }
+    } catch {
+    }
+  };
+  const deleteCourse = async () => {
+    if (!course || !window.confirm(
+      `Archive \u201C${course.title}\u201D? You can publish it again from the course editor.`
+    ))
+      return;
+    try {
+      await remove.mutateAsync(course.id);
+      await navigate("learn", "instructor");
+    } catch {
+    }
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("form", { onSubmit: (event) => void submit(event), className: "school-form", children: [
+      /* @__PURE__ */ jsxs("div", { className: "school-form-grid", children: [
+        /* @__PURE__ */ jsxs("label", { children: [
+          "Course title",
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              value: values.title,
+              onChange: (e) => set("title", e.target.value),
+              required: true,
+              maxLength: 200
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("label", { children: [
+          "Course address",
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              value: values.slug,
+              onChange: (e) => set("slug", e.target.value),
+              required: true,
+              pattern: "[a-z0-9]+(-[a-z0-9]+)*",
+              placeholder: "intro-to-typescript"
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: "school-muted", children: "Lowercase words separated by hyphens." })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("label", { children: [
+        "Description",
+        /* @__PURE__ */ jsx(
+          "textarea",
+          {
+            value: values.description,
+            onChange: (e) => set("description", e.target.value),
+            rows: 4,
+            maxLength: 1e5
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "school-form-grid", children: [
+        /* @__PURE__ */ jsxs("label", { children: [
+          "Instructor name",
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              value: values.instructorName,
+              onChange: (e) => set("instructorName", e.target.value),
+              maxLength: 200
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("label", { children: [
+          "Cover image URL",
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "url",
+              value: values.coverImage ?? "",
+              onChange: (e) => set("coverImage", e.target.value),
+              placeholder: "https://\u2026"
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("label", { children: [
+        "Instructor bio",
+        /* @__PURE__ */ jsx(
+          "textarea",
+          {
+            value: values.instructorBio,
+            onChange: (e) => set("instructorBio", e.target.value),
+            rows: 3,
+            maxLength: 1e4
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "school-form-grid", children: [
+        /* @__PURE__ */ jsxs("label", { children: [
+          "Category",
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              value: values.category,
+              onChange: (e) => set("category", e.target.value),
+              maxLength: 100
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("label", { children: [
+          "Tags",
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              value: tags,
+              onChange: (e) => {
+                setTags(e.target.value);
+                setSaved(false);
+              },
+              placeholder: "TypeScript, Web development"
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "school-form-grid school-form-grid-three", children: [
+        /* @__PURE__ */ jsxs("label", { children: [
+          "Difficulty",
+          /* @__PURE__ */ jsxs(
+            "select",
+            {
+              value: values.difficulty,
+              onChange: (e) => set("difficulty", e.target.value),
+              children: [
+                /* @__PURE__ */ jsx("option", { value: "beginner", children: "Beginner" }),
+                /* @__PURE__ */ jsx("option", { value: "intermediate", children: "Intermediate" }),
+                /* @__PURE__ */ jsx("option", { value: "advanced", children: "Advanced" })
+              ]
+            }
+          )
+        ] }),
+        /* @__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", { children: [
+          "Status",
+          /* @__PURE__ */ jsxs(
+            "select",
+            {
+              value: values.status,
+              onChange: (e) => set("status", e.target.value),
+              children: [
+                /* @__PURE__ */ jsx("option", { value: "draft", children: "Draft" }),
+                /* @__PURE__ */ jsx("option", { value: "published", children: "Published" }),
+                /* @__PURE__ */ jsx("option", { value: "archived", children: "Archived" })
+              ]
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "school-form-grid", children: [
+        /* @__PURE__ */ jsxs("label", { children: [
+          "Price (minor units)",
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "number",
+              min: 0,
+              step: 1,
+              value: values.price,
+              onChange: (e) => set("price", Number(e.target.value))
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: "school-muted", children: "Use the currency\u2019s smallest unit, or 0 for a free course." })
+        ] }),
+        /* @__PURE__ */ jsxs("label", { children: [
+          "Currency",
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              value: values.currency,
+              onChange: (e) => set("currency", e.target.value.toUpperCase()),
+              required: true,
+              pattern: "[A-Z]{3}",
+              maxLength: 3
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("label", { className: "school-checkbox", children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "checkbox",
+            checked: values.featured,
+            onChange: (e) => set("featured", e.target.checked)
+          }
+        ),
+        "Feature this course in the catalog"
+      ] }),
+      /* @__PURE__ */ jsx(ErrorMessage, { error: create.error ?? update.error ?? remove.error }),
+      /* @__PURE__ */ jsxs("div", { className: "school-toolbar", children: [
+        /* @__PURE__ */ jsxs("div", { className: "school-actions", children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              type: "submit",
+              disabled: create.isPending || update.isPending,
+              children: create.isPending || update.isPending ? "Saving\u2026" : course ? "Save course" : "Create course"
+            }
+          ),
+          saved && /* @__PURE__ */ jsx("span", { role: "status", children: "Course saved." }),
+          course?.status === "published" && /* @__PURE__ */ jsx(Link, { href: resolve("learn", course.slug).href, children: "View course" })
+        ] }),
+        course && /* @__PURE__ */ jsx(
+          Button,
+          {
+            type: "button",
+            variant: "destructive",
+            disabled: remove.isPending,
+            onClick: () => void deleteCourse(),
+            children: "Archive course"
+          }
+        )
+      ] })
+    ] }),
+    course && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(CurriculumEditor, { course }),
+      /* @__PURE__ */ jsx(StudentsPanel, { courseId: course.id })
+    ] })
+  ] });
+}
+function CurriculumEditor({ course }) {
+  const { Link, resolve } = usePluginSiteNavigation(SCHOOL_PLUGIN_ID);
+  const createSection = school.schoolSections.create.use();
+  const reorder = school.schoolCourses.reorder.use();
+  const deleteLesson = school.schoolLessons.delete.use();
+  const [sectionTitle, setSectionTitle] = useState("");
+  const [dragged, setDragged] = useState(null);
+  const addSection = async (event) => {
+    event.preventDefault();
+    try {
+      await createSection.mutateAsync({
+        id: course.id,
+        title: sectionTitle,
+        order: Math.max(-1, ...course.sections.map((section) => section.order)) + 1
+      });
+      setSectionTitle("");
+    } catch {
+    }
+  };
+  const move = (id, targetIndex) => {
+    const ids = course.lessons.map((lesson) => lesson.id);
+    const current = ids.indexOf(id);
+    if (current < 0 || current === targetIndex || targetIndex < 0 || targetIndex >= ids.length || (course.lessons[current]?.sectionId ?? null) !== (course.lessons[targetIndex]?.sectionId ?? null))
+      return;
+    ids.splice(current, 1);
+    ids.splice(targetIndex, 0, id);
+    void reorder.mutateAsync({ id: course.id, lessonIds: ids }).catch(() => {
+    });
+  };
+  return /* @__PURE__ */ jsxs("section", { className: "school-section", children: [
+    /* @__PURE__ */ jsxs("div", { className: "school-toolbar", children: [
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("h2", { children: "Curriculum" }),
+        /* @__PURE__ */ jsx("p", { className: "school-muted", children: "Reorder lessons within each section by dragging or using the move buttons." })
+      ] }),
+      /* @__PURE__ */ jsx(Button, { asChild: true, children: /* @__PURE__ */ jsxs(
+        Link,
+        {
+          href: resolve(
+            "learn",
+            "instructor",
+            "courses",
+            course.id,
+            "lessons",
+            "new"
+          ).href,
+          children: [
+            /* @__PURE__ */ jsx(Plus, { "aria-hidden": "true", size: 16 }),
+            "Add lesson"
+          ]
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "school-section-editor", children: course.sections.map((section) => /* @__PURE__ */ jsx(SectionEditor, { section }, section.id)) }),
+    /* @__PURE__ */ jsxs(
+      "form",
+      {
+        onSubmit: (event) => void addSection(event),
+        className: "school-inline-form",
+        children: [
+          /* @__PURE__ */ jsxs("label", { children: [
+            "New section",
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                value: sectionTitle,
+                onChange: (e) => setSectionTitle(e.target.value),
+                required: true,
+                maxLength: 200,
+                placeholder: "Getting started"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              type: "submit",
+              variant: "outline",
+              disabled: createSection.isPending,
+              children: "Add section"
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx("ol", { className: "school-edit-lessons", children: course.lessons.map((lesson, index) => /* @__PURE__ */ jsxs(
+      "li",
+      {
+        draggable: !reorder.isPending,
+        onDragStart: () => setDragged(lesson.id),
+        onDragEnd: () => setDragged(null),
+        onDragOver: (event) => event.preventDefault(),
+        onDrop: (event) => {
+          event.preventDefault();
+          if (dragged) move(dragged, index);
+          setDragged(null);
+        },
+        children: [
+          /* @__PURE__ */ jsx(GripVertical, { "aria-hidden": "true", size: 18 }),
+          /* @__PURE__ */ jsxs("div", { className: "school-edit-lesson-title", children: [
+            /* @__PURE__ */ jsx(
+              Link,
+              {
+                href: resolve(
+                  "learn",
+                  "instructor",
+                  "courses",
+                  course.id,
+                  "lessons",
+                  lesson.id
+                ).href,
+                children: lesson.title
+              }
+            ),
+            /* @__PURE__ */ jsxs("span", { className: "school-muted", children: [
+              course.sections.find(
+                (section) => section.id === lesson.sectionId
+              )?.title ?? "No section",
+              " ",
+              "/ ",
+              lesson.type,
+              lesson.isFreePreview ? " / Free preview" : ""
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "school-actions", children: [
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                type: "button",
+                size: "icon",
+                variant: "ghost",
+                "aria-label": `Move ${lesson.title} up`,
+                disabled: index === 0 || reorder.isPending || (course.lessons[index - 1]?.sectionId ?? null) !== (lesson.sectionId ?? null),
+                onClick: () => move(lesson.id, index - 1),
+                children: /* @__PURE__ */ jsx(ArrowUp, { size: 16 })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                type: "button",
+                size: "icon",
+                variant: "ghost",
+                "aria-label": `Move ${lesson.title} down`,
+                disabled: index === course.lessons.length - 1 || reorder.isPending || (course.lessons[index + 1]?.sectionId ?? null) !== (lesson.sectionId ?? null),
+                onClick: () => move(lesson.id, index + 1),
+                children: /* @__PURE__ */ jsx(ArrowDown, { size: 16 })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                type: "button",
+                size: "icon",
+                variant: "ghost",
+                "aria-label": `Delete ${lesson.title}`,
+                disabled: deleteLesson.isPending,
+                onClick: () => {
+                  if (window.confirm(`Delete \u201C${lesson.title}\u201D?`))
+                    void deleteLesson.mutateAsync(lesson.id).catch(() => {
+                    });
+                },
+                children: /* @__PURE__ */ jsx(Trash2, { size: 16 })
+              }
+            )
+          ] })
+        ]
+      },
+      lesson.id
+    )) }),
+    !course.lessons.length && /* @__PURE__ */ jsx("p", { className: "school-muted", children: "Add your first lesson to start building the curriculum." }),
+    /* @__PURE__ */ jsx(
+      ErrorMessage,
+      {
+        error: createSection.error ?? reorder.error ?? deleteLesson.error
+      }
+    )
+  ] });
+}
+function SectionEditor({ section }) {
+  const update = school.schoolSections.update.use();
+  const remove = school.schoolSections.delete.use();
+  const [title, setTitle] = useState(section.title);
+  return /* @__PURE__ */ jsxs(
+    "form",
+    {
+      className: "school-inline-form",
+      onSubmit: (event) => {
+        event.preventDefault();
+        void update.mutateAsync({ id: section.id, title }).catch(() => {
+        });
+      },
+      children: [
+        /* @__PURE__ */ jsxs("label", { children: [
+          "Section title",
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              value: title,
+              onChange: (e) => setTitle(e.target.value),
+              required: true,
+              maxLength: 200
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            type: "submit",
+            variant: "outline",
+            disabled: update.isPending || title === section.title,
+            children: "Rename"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            type: "button",
+            variant: "ghost",
+            "aria-label": `Delete section ${section.title}`,
+            disabled: remove.isPending,
+            onClick: () => {
+              if (window.confirm(
+                `Delete section \u201C${section.title}\u201D? Lessons will be kept.`
+              ))
+                void remove.mutateAsync(section.id).catch(() => {
+                });
+            },
+            children: /* @__PURE__ */ jsx(Trash2, { size: 16 })
+          }
+        ),
+        /* @__PURE__ */ jsx(ErrorMessage, { error: update.error ?? remove.error })
+      ]
+    }
+  );
+}
+function StudentsPanel({ courseId }) {
+  const query = useCourseStudents(courseId);
+  return /* @__PURE__ */ jsxs("section", { className: "school-section", children: [
+    /* @__PURE__ */ jsx("h2", { children: "Students and progress" }),
+    /* @__PURE__ */ jsx(ErrorMessage, { error: query.error }),
+    query.data && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs("div", { className: "school-analytics", children: [
+        /* @__PURE__ */ jsxs("p", { children: [
+          /* @__PURE__ */ jsx("strong", { children: query.data.analytics.totalEnrolled }),
+          " enrollments"
+        ] }),
+        /* @__PURE__ */ jsxs("p", { children: [
+          /* @__PURE__ */ jsx("strong", { children: query.data.analytics.totalCompleted }),
+          " completed"
+        ] }),
+        /* @__PURE__ */ jsxs("p", { children: [
+          /* @__PURE__ */ jsxs("strong", { children: [
+            Math.round(query.data.analytics.completionRate),
+            "%"
+          ] }),
+          " ",
+          "completion rate"
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "school-table-wrap", children: /* @__PURE__ */ jsxs("table", { className: "school-table", children: [
+        /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
+          /* @__PURE__ */ jsx("th", { children: "Student" }),
+          /* @__PURE__ */ jsx("th", { children: "Status" }),
+          /* @__PURE__ */ jsx("th", { children: "Progress" }),
+          /* @__PURE__ */ jsx("th", { children: "Enrolled" })
+        ] }) }),
+        /* @__PURE__ */ jsx("tbody", { children: query.data.items.map((student) => /* @__PURE__ */ jsxs("tr", { children: [
+          /* @__PURE__ */ jsx("td", { children: student.userId }),
+          /* @__PURE__ */ jsx("td", { children: student.status }),
+          /* @__PURE__ */ jsx("td", { children: /* @__PURE__ */ jsx(Progress, { value: student.progressPct }) }),
+          /* @__PURE__ */ jsx("td", { children: new Date(student.enrolledAt).toLocaleDateString(
+            "en-US",
+            { timeZone: "UTC" }
+          ) })
+        ] }, student.id)) })
+      ] }) }),
+      !query.data.items.length && /* @__PURE__ */ jsx("p", { className: "school-muted", children: "Student progress will appear here after the first enrollment." }),
+      query.data.analytics.enrollmentsOverTime.length > 0 && /* @__PURE__ */ jsxs("details", { children: [
+        /* @__PURE__ */ jsx("summary", { children: "Enrollments over time" }),
+        /* @__PURE__ */ jsxs("table", { className: "school-table", children: [
+          /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
+            /* @__PURE__ */ jsx("th", { children: "Date" }),
+            /* @__PURE__ */ jsx("th", { children: "Enrollments" })
+          ] }) }),
+          /* @__PURE__ */ jsx("tbody", { children: query.data.analytics.enrollmentsOverTime.map((day) => /* @__PURE__ */ jsxs("tr", { children: [
+            /* @__PURE__ */ jsx("td", { children: day.date }),
+            /* @__PURE__ */ jsx("td", { children: day.count })
+          ] }, day.date)) })
+        ] })
+      ] })
+    ] })
+  ] });
+}
+
+export { CourseEditorPage };

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

@@ -0,0 +1,29 @@
+"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('./course-editor-page.internal.mjs').then((m) => ({
+    default: m.CourseEditorPage
+  }))
+);
+function CourseEditorPageComponent({ id }) {
+  return /* @__PURE__ */ jsx(
+    ComposedRoute,
+    {
+      path: `/learn/instructor/courses/${id}`,
+      PageComponent: Page,
+      LoadingComponent: SchoolLoading,
+      ErrorComponent: SchoolError,
+      NotFoundComponent: SchoolNotFound,
+      props: { id },
+      permission: schoolPermissions.course.read({ scope: "instructor" }),
+      onError: (error) => console.error("[btst/school]", error)
+    }
+  );
+}
+
+export { CourseEditorPageComponent };

package/dist/packages/stack/src/plugins/school/client/components/pages/course-list-page.cjs

@@ -0,0 +1,28 @@
+"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('./course-list-page.internal.cjs').then((m) => ({
+    default: m.CourseListPage
+  }))
+);
+function CourseListPageComponent() {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    components.ComposedRoute,
+    {
+      path: `/learn`,
+      PageComponent: Page,
+      LoadingComponent: routeState.SchoolLoading,
+      ErrorComponent: routeState.SchoolError,
+      NotFoundComponent: routeState.SchoolNotFound,
+      onError: (error) => console.error("[btst/school]", error)
+    }
+  );
+}
+
+exports.CourseListPageComponent = CourseListPageComponent;