@nualang/nualang-ui-components 0.1.1399 → 0.2.0

package/dist/Tables/Progress/helpers.js

@@ -1,42 +0,0 @@
-import { grey, green, lightGreen, deepOrange, orange, red } from "@mui/material/colors";
-export function getCellDataForFilter(data, filter) {
-  if (!data) return null;
-  if (filter === "percentage_complete" && data.percentComplete) {
-    return {
-      ...data.percentComplete,
-      type: "percent"
-    };
-  }
-  if (filter === "correct_answer_percentage" && data.percentCorrect) {
-    return {
-      ...data.percentCorrect,
-      type: "correct"
-    };
-  }
-  if (filter === "avg_pronunciation_score" && data.avgPronunciationScore) {
-    return {
-      ...data.avgPronunciationScore,
-      type: "avgPronuc"
-    };
-  }
-  return null;
-}
-export function getTopicData(data, topic, selectedCourse, selectedSection) {
-  if (topic?.courseSectionId) {
-    const [courseId, sectionId] = topic.courseSectionId.split("|");
-    return data[courseId]?.sections?.[sectionId]?.topics?.[topic.topicId];
-  }
-  return data[selectedCourse?.courseId]?.sections?.[selectedSection?.sectionId]?.topics?.[topic?.topicId];
-}
-export function getColorForPercentage(percentage) {
-  if (percentage === -1 || percentage === null || percentage === undefined || Number.isNaN(percentage)) {
-    return grey[400];
-  }
-  const p = Number(percentage);
-  if (p >= 80) return green[400];
-  if (p >= 60) return lightGreen[400];
-  if (p >= 40) return orange[300] || orange;
-  if (p >= 20) return deepOrange[400];
-  if (p >= 0) return red[400];
-  return grey[400];
-}

package/dist/Tables/Progress/helpers.test.js

@@ -1,23 +0,0 @@
-import { describe, it, expect } from "vitest";
-import { getColorForPercentage } from "./helpers";
-import { grey, green, lightGreen, deepOrange, orange, red } from "@mui/material/colors";
-describe("getColorForPercentage", () => {
-  it("returns grey for null/undefined/NaN/-1", () => {
-    expect(getColorForPercentage(null)).toBe(grey[400]);
-    expect(getColorForPercentage(undefined)).toBe(grey[400]);
-    expect(getColorForPercentage(NaN)).toBe(grey[400]);
-    expect(getColorForPercentage(-1)).toBe(grey[400]);
-  });
-  it("returns correct shades for thresholds", () => {
-    expect(getColorForPercentage(100)).toBe(green[400]);
-    expect(getColorForPercentage(80)).toBe(green[400]);
-    expect(getColorForPercentage(79)).toBe(lightGreen[400]);
-    expect(getColorForPercentage(60)).toBe(lightGreen[400]);
-    expect(getColorForPercentage(59)).toBe(orange[300] || orange);
-    expect(getColorForPercentage(40)).toBe(orange[300] || orange);
-    expect(getColorForPercentage(39)).toBe(deepOrange[400]);
-    expect(getColorForPercentage(20)).toBe(deepOrange[400]);
-    expect(getColorForPercentage(19)).toBe(red[400]);
-    expect(getColorForPercentage(0)).toBe(red[400]);
-  });
-});

package/dist/Tables/Progress/package.json

@@ -1,6 +0,0 @@
-{
-  "name": "Progress",
-  "version": "0.0.0",
-  "private": true,
-  "main": "./Progress.js"
-}

package/dist/Tables/Progress/sorting.js

@@ -1,78 +0,0 @@
-export function descendingComparator(a, b, property, opts = {}) {
-  const {
-    assignments,
-    filter,
-    queryClient,
-    currentCourseIds,
-    currentView,
-    courses,
-    assignmentExercises,
-    selectedAssignment,
-    selectedCourse,
-    selectedSection,
-    reportType
-  } = opts;
-  try {
-    let a1;
-    let b1;
-    let percentageAccessor;
-    if (filter === "correct_answer_percentage") {
-      percentageAccessor = "percentCorrect";
-    } else if (filter === "avg_pronunciation_score") {
-      percentageAccessor = "avgPronunciationScore";
-    } else {
-      percentageAccessor = "percentComplete";
-    }
-    if (property === "student") {
-      a1 = a.username.toLowerCase();
-      b1 = b.username.toLowerCase();
-    } else {
-      const aCompletions = queryClient.getQueryData(["memberCourseProgress", a.memberId, currentCourseIds])?.Items ?? [];
-      const bCompletions = queryClient.getQueryData(["memberCourseProgress", b.memberId, currentCourseIds])?.Items ?? [];
-      if (currentView === "assignments") {
-        a.completions = opts.formatMemberAssignmentCompletions(assignments, courses, aCompletions, a?.assignedLabels?.isChallengeModeStudent, a?.assignedLabels?.isReadWriteModeStudent);
-        b.completions = opts.formatMemberAssignmentCompletions(assignments, courses, bCompletions, b?.assignedLabels?.isChallengeModeStudent, b?.assignedLabels?.isReadWriteModeStudent);
-      } else {
-        const assignmentEx = reportType === "assignments" && selectedAssignment ? selectedAssignment?.exercises : null;
-        a.completions = opts.formatMemberCourseCompletions(courses, aCompletions, assignmentEx, a?.assignedLabels?.isChallengeModeStudent, null, "course", a?.assignedLabels?.isReadWriteModeStudent);
-        b.completions = opts.formatMemberCourseCompletions(courses, bCompletions, assignmentEx, b?.assignedLabels?.isChallengeModeStudent, null, "course", b?.assignedLabels?.isReadWriteModeStudent);
-      }
-      if (currentView === "all_courses" || currentView === "assignments") {
-        a1 = a.completions[property][percentageAccessor].percentage;
-        b1 = b.completions[property][percentageAccessor].percentage;
-      } else if (currentView === "course") {
-        a1 = a.completions[selectedCourse.courseId].sections[property][percentageAccessor].percentage;
-        b1 = b.completions[selectedCourse.courseId].sections[property][percentageAccessor].percentage;
-      } else if (currentView === "section") {
-        a1 = a.completions[selectedCourse.courseId].sections[selectedSection.sectionId].topics[property][percentageAccessor].percentage;
-        b1 = b.completions[selectedCourse.courseId].sections[selectedSection.sectionId].topics[property][percentageAccessor].percentage;
-      } else if (currentView === "assignment-topics") {
-        const [courseId, sectionId, topicId] = property.split("|");
-        a1 = a.completions[courseId].sections[sectionId].topics[topicId][percentageAccessor].percentage;
-        b1 = b.completions[courseId].sections[sectionId].topics[topicId][percentageAccessor].percentage;
-      }
-    }
-    if (b1 < a1) return -1;
-    if (b1 > a1) return 1;
-    return 0;
-  } catch (e) {
-    return 0;
-  }
-}
-export function getComparator(order, opts) {
-  return order === "desc" ? (a, b, property) => descendingComparator(a, b, property, opts) : (a, b, property) => -descendingComparator(a, b, property, opts);
-}
-export const stableSort = (array, property, comparator) => {
-  const stabilizedThis = array.map((el, index) => [el, index]);
-  stabilizedThis.sort((a, b) => {
-    const order = comparator(a[0], b[0], property);
-    if (order !== 0) return order;
-    return a[1] - b[1];
-  });
-  return stabilizedThis.map(el => el[0]);
-};
-
-// Note: The sorting helpers rely on project helper functions available in the
-// same scope where they're used (formatMemberCourseCompletions, etc.). The
-// ProgressTable module imports those helpers and provides them via opts when
-// calling getComparator.

package/dist/Tables/Progress/sorting.test.js

@@ -1,69 +0,0 @@
-import { describe, it, expect } from "vitest";
-import { getComparator, stableSort } from "./sorting";
-describe("sorting helpers", () => {
-  it("sorts by student name (case-insensitive)", () => {
-    const members = [{
-      memberId: "1",
-      username: "bob"
-    }, {
-      memberId: "2",
-      username: "alice"
-    }];
-    const opts = {};
-    const sorted = stableSort(members, "student", getComparator("asc", opts));
-    expect(sorted.map(m => m.username)).toEqual(["alice", "bob"]);
-  });
-  it("sorts by course percentage in all_courses view", () => {
-    const members = [{
-      memberId: "1",
-      username: "a"
-    }, {
-      memberId: "2",
-      username: "b"
-    }];
-
-    // Prepare two different completion percentages and have queryClient return Items per memberId
-    const courseId = "courseA";
-    const queryClient = {
-      getQueryData: key => {
-        const memberId = key[1];
-        if (memberId === "1") return {
-          Items: [{
-            percent: 10
-          }]
-        };
-        if (memberId === "2") return {
-          Items: [{
-            percent: 90
-          }]
-        };
-        return {
-          Items: []
-        };
-      }
-    };
-    const formatMemberCourseCompletions = (courses, items) => {
-      // items will be [{ percent: X }] as returned above
-      const percent = items && items[0] ? items[0].percent : 0;
-      return {
-        [courseId]: {
-          percentComplete: {
-            percentage: percent
-          },
-          sections: {}
-        }
-      };
-    };
-    const opts = {
-      queryClient,
-      currentCourseIds: courseId,
-      currentView: "all_courses",
-      courses: [],
-      formatMemberCourseCompletions
-    };
-    const comparator = getComparator("asc", opts);
-    const sorted = stableSort(members, courseId, comparator);
-    // ascending should place member 1 (10%) before member 2 (90%)
-    expect(sorted.map(m => m.memberId)).toEqual(["1", "2"]);
-  });
-});

package/dist/Tables/Progress/styledComponents.js

@@ -1,156 +0,0 @@
-import Tooltip, { tooltipClasses } from "@mui/material/Tooltip";
-import { styled } from "@mui/material/styles";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-export const TableContainer = styled("div")(() => ({
-  position: "relative",
-  maxHeight: "90vh",
-  width: "100%",
-  overflow: "scroll",
-  "@media print": {
-    overflow: "visible"
-  }
-}));
-export const Table = styled("table")(({
-  theme
-}) => ({
-  width: "100%",
-  borderCollapse: "separate",
-  borderSpacing: 0,
-  "& th, td": {
-    padding: theme.spacing(),
-    minWidth: 250,
-    textAlign: "center",
-    verticalAlign: "middle",
-    border: `1px solid ${theme.palette.divider}`,
-    boxShadow: `0 0 0 1px ${theme.palette.divider}`,
-    transition: "background-color 0.5s ease-out",
-    "@media print": {
-      minWidth: 50
-    }
-  },
-  "& tr > :first-child": {
-    background: theme.palette.background.default,
-    left: 0,
-    border: `1px solid ${theme.palette.divider}`,
-    boxShadow: `0 0 0 1px ${theme.palette.divider}`
-  }
-}));
-export const TableHead = styled("thead")(({
-  theme
-}) => ({
-  "& th": {
-    top: 0,
-    zIndex: 2,
-    background: theme.palette.background.default,
-    padding: theme.spacing(2),
-    "@media print": {
-      position: "relative"
-    }
-  },
-  "& th:first-child": {
-    left: 0,
-    zIndex: 4,
-    "@media print": {
-      position: "relative"
-    }
-  },
-  "& tr:first-child th": {
-    // make every header in the first row sticky
-    position: "sticky"
-  }
-}));
-export const TableBody = styled("tbody")(({
-  theme
-}) => ({
-  "& th": {
-    top: 0,
-    zIndex: 2,
-    background: theme.palette.background.default
-  },
-  "& th:first-child": {
-    left: 0,
-    zIndex: 3
-  }
-}));
-export const HtmlTooltip = styled(({
-  className,
-  ...props
-}) => /*#__PURE__*/_jsx(Tooltip, {
-  ...props,
-  classes: {
-    popper: className
-  }
-}))(({
-  theme
-}) => ({
-  [`& .${tooltipClasses.tooltip}`]: {
-    padding: theme.spacing(2),
-    backgroundColor: theme.palette.background.paper,
-    color: theme.palette.text.primary,
-    maxWidth: 225,
-    fontSize: theme.typography.pxToRem(12),
-    border: `1px solid ${theme.palette.divider}`
-  }
-}));
-export const ReadWriteTooltip = styled(({
-  className,
-  t,
-  ...props
-}) => /*#__PURE__*/_jsx(Tooltip, {
-  ...props,
-  classes: {
-    popper: className
-  },
-  title: /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsx("div", {
-      style: {
-        fontWeight: "bold",
-        marginBottom: "8px"
-      },
-      children: t("heritage_speaker")
-    }), /*#__PURE__*/_jsx("div", {
-      style: {
-        marginBottom: "8px"
-      },
-      children: t("heritage_speaker_progress")
-    }), /*#__PURE__*/_jsxs("ul", {
-      style: {
-        marginLeft: "16px",
-        marginBottom: "8px",
-        paddingLeft: "0"
-      },
-      children: [/*#__PURE__*/_jsx("li", {
-        children: t("heritage_speaker_point_1")
-      }), /*#__PURE__*/_jsx("li", {
-        children: t("heritage_speaker_point_2")
-      })]
-    })]
-  })
-}))(({
-  theme
-}) => ({
-  [`& .${tooltipClasses.tooltip}`]: {
-    padding: theme.spacing(2),
-    backgroundColor: theme.palette.background.paper,
-    color: theme.palette.text.primary,
-    fontSize: theme.typography.pxToRem(12),
-    border: `1px solid ${theme.palette.divider}`
-  },
-  [`& ul`]: {
-    listStyleType: "disc",
-    paddingLeft: theme.spacing(2),
-    margin: 0
-  },
-  [`& li`]: {
-    display: "list-item",
-    marginBottom: theme.spacing(0.5)
-  }
-}));
-export default {
-  TableContainer,
-  Table,
-  TableHead,
-  TableBody,
-  HtmlTooltip,
-  ReadWriteTooltip
-};

package/dist/Tables/Progress/useProgressUrlParams.js

@@ -1,162 +0,0 @@
-/**
- * useProgressUrlParams
- *
- * Purpose:
- * - Synchronize progress table selection state with the URL query string.
- *
- * How it works:
- * - On mount it reads URL params (`reportType`, `assignmentId`, `courseId`,
- *   `sectionId`, `topicId`, `roleplayId`) and calls the provided setter
- *   callbacks to initialize selection state when matching entities exist.
- * - When selection state changes it serializes the relevant values back into
- *   the URL (using `window.history.replaceState`) so the UI state is reflected
- *   in the address bar (pathname and hash are preserved) without adding
- *   new browser history entries.
- * - Uses `searchStringToObj` and `objToSearchString` from `../../utils` to
- *   parse and build the query string. Guards against SSR by checking `window`.
- * - Supports `phraseListId` for deep-linking into a phrase list view.
- *
- * Usage:
- * - Call `useProgressUrlParams(opts)` from a component that owns the
- *   selection state. `opts` should contain current values and setter
- *   callbacks (for example `selectedCourse`, `setSelectedCourse`,
- *   `assignments`, `availableReportTypes`, etc.). The hook will not override
- *   selections that are already set by the component.
- */
-import { useEffect, useRef } from "react";
-import { searchStringToObj, objToSearchString } from "../../utils";
-export default function useProgressUrlParams(opts) {
-  const {
-    availableReportTypes,
-    reportType,
-    setReportType,
-    assignments,
-    selectedAssignment,
-    setSelectedAssignment,
-    coursesWithSections,
-    selectedCourse,
-    setSelectedCourse,
-    selectedSection,
-    setSelectedSection,
-    selectedTopic,
-    setSelectedTopic,
-    selectedRoleplay,
-    setSelectedRoleplay,
-    selectedPhraseList,
-    setSelectedPhraseList
-  } = opts;
-
-  // Track if we've already initialized from URL to prevent re-initialization
-  const hasInitialized = useRef(false);
-
-  // Initial read from URL (reportType, assignmentId, course/section/topic/roleplay)
-  useEffect(() => {
-    if (hasInitialized.current) return;
-    if (typeof window === "undefined" || !("URLSearchParams" in window)) return;
-    const searchParams = searchStringToObj(window.location.search);
-    const courseId = searchParams.courseId;
-    const assignmentId = searchParams.assignmentId;
-
-    // Wait for data to be available if URL params are present
-    const waitingForCourses = courseId && (!coursesWithSections || coursesWithSections.length === 0);
-    const waitingForAssignments = assignmentId && (!assignments || assignments.length === 0);
-    if (waitingForCourses || waitingForAssignments) {
-      return;
-    }
-    if (searchParams.reportType && searchParams.reportType !== availableReportTypes[0] && availableReportTypes.includes(searchParams.reportType) && reportType !== searchParams.reportType) {
-      setReportType(searchParams.reportType);
-    }
-    if (assignmentId && !selectedAssignment && assignments && assignments.length) {
-      const assignmentIndex = assignments.findIndex(a => a.assignmentId === assignmentId);
-      const assignment = assignments[assignmentIndex];
-      if (assignment) setSelectedAssignment(assignment);
-    }
-    if (courseId && !selectedCourse && coursesWithSections && coursesWithSections.length) {
-      const courseIndex = coursesWithSections.findIndex(c => c.courseId === courseId);
-      const course = coursesWithSections[courseIndex];
-      if (course) {
-        setSelectedCourse(course);
-        const sectionId = searchParams.sectionId;
-        if (sectionId && !selectedSection && course && course.sections) {
-          const sectionIndex = course.sections.findIndex(s => s.sectionId === sectionId);
-          const section = course.sections[sectionIndex];
-          if (section) {
-            setSelectedSection(section);
-            const topicId = searchParams.topicId;
-            if (topicId && !selectedTopic && section && section.topics) {
-              const topicIndex = section.topics.findIndex(t => t.topicId === topicId);
-              const topic = section.topics[topicIndex];
-              if (topic) {
-                setSelectedTopic(topic);
-                const roleplayId = searchParams.roleplayId;
-                if (roleplayId && !selectedRoleplay && topic && topic.roleplays) {
-                  const roleplayIndex = topic.roleplays.findIndex(r => r.roleplayId === roleplayId);
-                  const roleplay = topic.roleplays[roleplayIndex];
-                  if (roleplay) setSelectedRoleplay(roleplay);
-                }
-              }
-              const phraseListId = searchParams.phraseListId;
-              if (phraseListId && !selectedPhraseList) {
-                const phraseList = topic?.phraseLists?.find(p => p.phraseListId === phraseListId);
-                if (phraseList) setSelectedPhraseList(phraseList);
-              }
-            }
-          }
-        }
-      }
-    }
-    // Mark as initialized so we don't re-run this effect
-    hasInitialized.current = true;
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [coursesWithSections, assignments, availableReportTypes]);
-
-  // Replace URL state when selections change (replaceState avoids polluting
-  // browser history so Back/Forward still navigates between pages).
-  useEffect(() => {
-    if (typeof window === "undefined" || !("URLSearchParams" in window)) return;
-    if (!hasInitialized.current) return;
-    const searchParams = searchStringToObj(window.location.search);
-    if (reportType && reportType !== availableReportTypes[0]) {
-      searchParams["reportType"] = reportType;
-    } else {
-      delete searchParams["reportType"];
-    }
-    if (selectedAssignment) {
-      searchParams["assignmentId"] = selectedAssignment.assignmentId;
-    } else {
-      delete searchParams["assignmentId"];
-    }
-    if (selectedCourse) {
-      searchParams["courseId"] = selectedCourse.courseId;
-      if (selectedSection) {
-        searchParams["sectionId"] = selectedSection.sectionId;
-        if (selectedTopic) {
-          searchParams["topicId"] = selectedTopic.topicId;
-          if (selectedRoleplay) {
-            searchParams["roleplayId"] = selectedRoleplay.roleplayId;
-            delete searchParams["phraseListId"];
-          } else if (selectedPhraseList) {
-            searchParams["phraseListId"] = selectedPhraseList.phraseListId;
-            delete searchParams["roleplayId"];
-          } else {
-            delete searchParams["roleplayId"];
-            delete searchParams["phraseListId"];
-          }
-        } else {
-          delete searchParams["topicId"];
-          delete searchParams["phraseListId"];
-        }
-      } else {
-        delete searchParams["sectionId"];
-      }
-    } else {
-      delete searchParams["courseId"];
-      delete searchParams["sectionId"];
-      delete searchParams["topicId"];
-      delete searchParams["roleplayId"];
-      delete searchParams["phraseListId"];
-    }
-    const newRelativePathQuery = window.location.pathname + "?" + objToSearchString(searchParams) + window.location.hash;
-    window.history.replaceState(null, "", newRelativePathQuery);
-  }, [selectedCourse, selectedSection, selectedTopic, selectedRoleplay, selectedPhraseList, selectedAssignment, reportType, availableReportTypes]);
-}