@nualang/nualang-ui-components 0.1.1399 → 0.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nualang/nualang-ui-components",
-  "version": "0.1.1399",
+  "version": "0.2.0",
   "type": "module",
   "main": "dist/index.js",
   "files": [
@@ -23,7 +23,7 @@
     "@mui/x-data-grid": "^9.0.1",
     "@nualang/avatars": "2.0.3",
     "@nualang/rivescript": "^2.2.2-alpha1",
-    "axios": "^1.14.0",
+    "axios": "^1.16.0",
     "base64-arraybuffer": "^1.0.2",
     "chart.js": "^4.5.1",
     "chartjs-plugin-datalabels": "^2.2.0",
@@ -86,7 +86,7 @@
     "socket.io-client": "^4.7.1",
     "styled-components": "^6.3.8",
     "tss-react": "^4.9.16",
-    "uuid": "^11.1.0",
+    "uuid": "^11.1.1",
     "uifx": "^2.0",
     "wanakana": "^5.3.1",
     "wavesurfer.js": "^7.11.1",
@@ -118,7 +118,8 @@
     "@testing-library/dom": "^10.4.0",
     "@testing-library/react": "^16.3.2",
     "@vitejs/plugin-react": "^5.1.0",
-    "@vitest/coverage-v8": "4.0.17",
+    "vite": "^8.0.16",
+    "@vitest/coverage-v8": "^4.1.0",
     "babel-plugin-macros": "^3.1.0",
     "chalk": "^5.4.1",
     "clsx": "^2.0.0",
@@ -139,10 +140,10 @@
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
     "react-pdf": "^10.2.0",
-    "react-router": "^7.12.0",
+    "react-router": "^7.15.0",
     "rimraf": "^6.1.3",
     "storybook": "^10.4.3",
-    "vitest": "4.0.17",
+    "vitest": "^4.1.0",
     "zx": "^8.8.5"
   },
   "pre-commit": [
@@ -165,10 +166,6 @@
       "public"
     ]
   },
-  "overrides": {
-    "@emotion/react": "$@emotion/react",
-    "@emotion/styled": "$@emotion/styled"
-  },
   "scripts": {
     "preinstall": "npx only-allow pnpm",
     "postinstall": "patch-package",

package/dist/Assignments/AssignmentBotSelection/AssignmentBotSelection.js

@@ -1,278 +0,0 @@
-import { useState, useEffect, Fragment } from "react";
-import { Box, ListItemText, ListItemButton, Avatar, Checkbox, ListItemIcon, Badge, IconButton, Chip, Typography } from "@mui/material";
-import ClearIcon from "@mui/icons-material/Clear";
-import { Done, Timelapse } from "@mui/icons-material";
-import { useNavigate, useParams } from "react-router";
-import HtmlTooltipComponent from "../../Misc/HtmlTooltipComponent/HtmlTooltipComponent";
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-const sxGreenColor = theme => ({
-  color: theme.palette.success ? theme.palette.success.dark : ""
-});
-const sxInfoColor = theme => ({
-  color: theme.palette.info ? theme.palette.info.main : ""
-});
-export function ProgressBadge({
-  completions
-}) {
-  return completions > 0 ? /*#__PURE__*/_jsx(Badge, {
-    sx: sxGreenColor,
-    badgeContent: completions,
-    color: "default",
-    children: /*#__PURE__*/_jsx(Done, {})
-  }) : null;
-}
-export function InProgressBadge({
-  progressCount
-}) {
-  return progressCount > 0 ? /*#__PURE__*/_jsx(Badge, {
-    sx: sxInfoColor,
-    color: "default",
-    children: /*#__PURE__*/_jsx(Timelapse, {})
-  }) : null;
-}
-function Bot({
-  bot,
-  courseSectionTopicId,
-  isBotSelected,
-  t,
-  isExerciseSelected,
-  handleSelectExercise = null,
-  selectedExercises,
-  useCase,
-  assignment,
-  lastClickedExerciseId,
-  memberCourseCompletions,
-  topicProgress,
-  isCreator,
-  handleRemoveExercise,
-  isPreview,
-  isCreateMode
-}) {
-  const navigate = useNavigate();
-  const params = useParams();
-  const {
-    classroomId
-  } = params;
-  const [courseId, sectionId, topicId] = courseSectionTopicId ? courseSectionTopicId.split("|") : "";
-  const [lasClickedCourseId, lasClickedSectionId, lasClickedTopicId, lastClickedAssignmentId, lastClickedBotId] = lastClickedExerciseId?.split("|") || [];
-  const addSearchParams = () => {
-    if (!classroomId || !courseId || !sectionId || !topicId || !bot?.botId) {
-      console.error("Missing required parameters for navigation");
-      return;
-    }
-    const lastClickedExercise = {
-      courseSectionTopicId: `${courseSectionTopicId}|${assignment.assignmentId}|${bot.botId}`
-    };
-    localStorage.setItem("lastClickedExercise", JSON.stringify(lastClickedExercise));
-    navigate(`/classrooms/${classroomId}/${courseId}/${sectionId}/${topicId}/bots/${bot?.botId}?assignmentId=${assignment.assignmentId}`);
-  };
-  const [open, setOpen] = useState(lastClickedBotId === bot.botId && lastClickedAssignmentId === assignment.assignmentId);
-  const [isSelected, setIsSelected] = useState(false);
-  useEffect(() => {
-    // Check if this exercise is selected
-    const exerciseSelected = selectedExercises?.some(exercise => exercise.botId === bot.botId);
-    setIsSelected(exerciseSelected);
-  }, [selectedExercises, bot.botId]);
-  const handleClick = () => {
-    setIsSelected(!isSelected);
-    const exercise = {
-      botId: bot.botId,
-      courseSectionTopicId
-    };
-    handleSelectExercise([exercise]);
-  };
-  const getBotCompletion = () => {
-    if (!Array.isArray(memberCourseCompletions) || memberCourseCompletions.length === 0) {
-      return 0;
-    }
-    const botCompletion = memberCourseCompletions.filter(completion => completion.botId === bot.botId);
-    return botCompletion.length;
-  };
-  const getBotProgress = () => {
-    const progress = topicProgress?.filter(progress => progress.botId === bot.botId && progress.existingMessages && progress.existingMessages !== null);
-    return progress?.length || 0;
-  };
-  return /*#__PURE__*/_jsx("div", {
-    children: /*#__PURE__*/_jsx("div", {
-      children: /*#__PURE__*/_jsxs(ListItemButton, {
-        onClick: () => {
-          if (useCase === "assignment-start") {
-            addSearchParams();
-          } else if (handleSelectExercise) {
-            handleClick();
-          }
-        },
-        sx: {
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "space-between",
-          flexDirection: {
-            xs: "column",
-            sm: "row"
-          },
-          marginLeft: {
-            sm: "0px",
-            md: "60px"
-          }
-        },
-        children: [/*#__PURE__*/_jsxs(Box, {
-          sx: {
-            display: "flex",
-            alignItems: "center",
-            width: {
-              xs: "100%",
-              sm: "85%"
-            }
-          },
-          children: [/*#__PURE__*/_jsx(Avatar, {
-            src: bot.picture || bot.botAvatar,
-            sx: {
-              display: "flex",
-              width: 32,
-              height: 32
-            }
-          }), /*#__PURE__*/_jsx(ListItemText, {
-            sx: {
-              marginLeft: 2
-            },
-            primary: /*#__PURE__*/_jsxs(Box, {
-              sx: {
-                display: "flex",
-                alignItems: "center",
-                gap: 1
-              },
-              children: [/*#__PURE__*/_jsx(Typography, {
-                variant: "body1",
-                children: bot.botName
-              }), bot?.isChallengeBot && /*#__PURE__*/_jsx(_Fragment, {
-                children: isCreator || isCreateMode ? /*#__PURE__*/_jsx(HtmlTooltipComponent, {
-                  titleBold: t("challenge_bot"),
-                  titleDesc: t("challenge_bot_desc"),
-                  placement: "right",
-                  children: /*#__PURE__*/_jsx(Chip, {
-                    label: t("challenge_bot"),
-                    size: "small",
-                    variant: "outlined",
-                    color: "primary",
-                    sx: {
-                      fontWeight: "normal"
-                    }
-                  })
-                }) : /*#__PURE__*/_jsx(Chip, {
-                  label: t("challenge_bot"),
-                  size: "small",
-                  variant: "outlined",
-                  color: "primary",
-                  sx: {
-                    fontWeight: "normal"
-                  }
-                })
-              })]
-            }),
-            secondary: bot.description
-          })]
-        }), useCase === "assignment-select" && /*#__PURE__*/_jsx(Checkbox, {
-          sx: {
-            marginRight: "15px"
-          },
-          checked: isSelected,
-          onClick: e => {
-            e.stopPropagation();
-            handleClick();
-          }
-        }), useCase === "assignment-view" && isPreview && /*#__PURE__*/_jsx(ListItemIcon, {
-          children: /*#__PURE__*/_jsx(IconButton, {
-            edge: "end",
-            "aria-label": "remove-bot",
-            onClick: e => {
-              e.stopPropagation();
-              const exerciseToRemove = selectedExercises.find(ex => ex.botId === bot.botId && ex.courseSectionTopicId === courseSectionTopicId);
-              if (exerciseToRemove) {
-                handleRemoveExercise(exerciseToRemove);
-              }
-            },
-            children: /*#__PURE__*/_jsx(ClearIcon, {
-              fontSize: "small"
-            })
-          })
-        }), useCase === "assignment-start" && /*#__PURE__*/_jsxs(ListItemIcon, {
-          children: [/*#__PURE__*/_jsx(InProgressBadge, {
-            progressCount: getBotProgress()
-          }), /*#__PURE__*/_jsx(ProgressBadge, {
-            completions: getBotCompletion()
-          })]
-        })]
-      })
-    })
-  });
-}
-function AssignmentBotSelection({
-  bots = [],
-  courseSectionTopicId,
-  t,
-  isExerciseSelected,
-  handleSelectExercise,
-  selectedExercises,
-  useCase,
-  assignment,
-  lastClickedExerciseId,
-  memberCourseCompletions,
-  topicProgress,
-  handleRemoveExercise,
-  isPreview,
-  isChallengeModeStudent,
-  isCreator
-}) {
-  const isCreateMode = location.pathname.includes("/assignments/create");
-  const visibleBots = bots.filter(bot => {
-    if (bot.isChallengeBot) {
-      return isCreateMode || isCreator || isChallengeModeStudent;
-    }
-    return true;
-  });
-  const filteredBots = useCase === "assignment-view" || useCase === "assignment-start" ? visibleBots.filter(bot => selectedExercises.some(ex => ex.botId === bot.botId && ex.courseSectionTopicId === courseSectionTopicId)) : visibleBots;
-  const existingBotIds = new Set(visibleBots.map(b => b.botId));
-  const orphanedBotIds = useCase === "assignment-view" || useCase === "assignment-start" ? [...new Set(selectedExercises.filter(ex => ex.botId && ex.courseSectionTopicId === courseSectionTopicId && !existingBotIds.has(ex.botId)).map(ex => ex.botId))] : [];
-  return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [filteredBots.map((bot, index) => /*#__PURE__*/_jsx(Bot, {
-      bot: bot,
-      courseSectionTopicId: courseSectionTopicId,
-      t: t,
-      isExerciseSelected: isExerciseSelected,
-      handleSelectExercise: handleSelectExercise,
-      selectedExercises: selectedExercises,
-      useCase: useCase,
-      assignment: assignment,
-      lastClickedExerciseId: lastClickedExerciseId,
-      memberCourseCompletions: memberCourseCompletions,
-      topicProgress: topicProgress,
-      handleRemoveExercise: handleRemoveExercise,
-      isPreview: isPreview,
-      isChallengeModeStudent: isChallengeModeStudent,
-      isCreator: isCreator,
-      isCreateMode: isCreateMode
-    }, index)), orphanedBotIds.map(id => /*#__PURE__*/_jsx(Box, {
-      sx: {
-        display: "flex",
-        alignItems: "center",
-        pl: 2,
-        py: 1.5,
-        ml: {
-          xs: "16px",
-          sm: "72px",
-          md: "76px"
-        },
-        borderLeft: "3px solid",
-        borderColor: "warning.main"
-      },
-      children: /*#__PURE__*/_jsx(Typography, {
-        variant: "body2",
-        sx: {
-          color: "text.secondary"
-        },
-        children: t("exercise_no_longer_available")
-      })
-    }, id))]
-  });
-}
-export default AssignmentBotSelection;

package/dist/Assignments/AssignmentBotSelection/package.json

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

package/dist/Assignments/AssignmentCard/AssignmentCard.js

@@ -1,297 +0,0 @@
-import { useMemo } from "react";
-import Typography from "@mui/material/Typography";
-import { Card, CardContent, Grid, Box, Divider, Button, IconButton, Tooltip } from "@mui/material";
-import PropTypes from "prop-types";
-import AssignmentExerciseSelector from "../AssignmentExerciseSelector/AssignmentExerciseSelector";
-import { courses as courseQuerys, ReactQuery } from "@nualang/nualang-api-and-queries/Queries";
-import useConfirm from "../../hooks/useConfirm";
-import { Delete, Edit } from "@mui/icons-material";
-import dayjs from "dayjs";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export default function AssignmentCard({
-  t = text => text,
-  index = 0,
-  assignment,
-  handleStartExercise,
-  username,
-  getCourseSections,
-  getRoleplays,
-  isCreator,
-  getCourses,
-  deleteAssignment,
-  handleEditAssignment,
-  progressHelpers,
-  completionHelpers,
-  preferred_username,
-  memberId,
-  fetchMemberCourseCompletions,
-  lastClickedExerciseId,
-  handleViewProgress,
-  lastAssignmentFetch,
-  assignedStudents = [],
-  isChallengeModeStudent,
-  isReadWriteModeStudent
-}) {
-  const [confirm] = useConfirm(t);
-  const {
-    useQuery
-  } = ReactQuery;
-  const handleDeleteAssignment = async (classroomId, assignmentId) => {
-    const confirmed = await confirm(t("delete_assignment"), t("delete_assignment_confirmation"));
-    if (confirmed) {
-      await deleteAssignment(classroomId, assignmentId);
-    }
-  };
-
-  // 🧠 Helper to format due or available text (adapted from MeetingPromptsList)
-  const formatAssignmentDueText = (availableDate, dueDate, t) => {
-    const now = dayjs();
-    const available = dayjs(availableDate);
-    const due = dayjs(dueDate);
-    const formattedDue = due.format("D MMM YYYY • h:mm A");
-    const formattedAvailable = available.format("D MMM YYYY • h:mm A");
-
-    // Case 1: Not yet available
-    if (available.isAfter(now)) {
-      const diffDays = available.startOf("day").diff(now.startOf("day"), "day");
-      let availableText = "";
-      if (diffDays === 0) {
-        availableText = t("available_today");
-      } else if (diffDays === 1) {
-        availableText = t("available_tomorrow");
-      } else {
-        availableText = `${t("available_in")} ${diffDays} ${t("days")}`;
-      }
-      return `${availableText} - ${formattedAvailable}`;
-    }
-
-    // Case 2: Available, now check due
-    const diffDays = due.startOf("day").diff(now.startOf("day"), "day");
-    let dueText = "";
-    if (diffDays < 0) {
-      dueText = t("past_due");
-    } else if (diffDays === 0) {
-      dueText = t("due_today");
-    } else if (diffDays === 1) {
-      dueText = t("due_tomorrow");
-    } else {
-      dueText = `${t("due_in")} ${diffDays} ${t("days")}`;
-    }
-    return `${dueText} - ${formattedDue}`;
-  };
-  const {
-    uniqueCourses
-  } = useMemo(() => {
-    const courses = new Set();
-    assignment?.exercises?.forEach(({
-      courseSectionTopicId,
-      name
-    }) => {
-      if (courseSectionTopicId) {
-        const [courseId, sectionId, topicId] = courseSectionTopicId.split("|");
-        courses.add(courseId);
-      }
-    });
-    return {
-      uniqueCourses: [...courses]
-    };
-  }, [assignment?.exercises]);
-  const coursesQuery = courseQuerys.useCourses(async filters => {
-    const response = await getCourses(filters);
-    return response;
-  }, {
-    filters: {
-      courseIds: uniqueCourses?.toString()
-    }
-  }, {
-    enabled: !!uniqueCourses?.length
-  });
-  const courses = useMemo(() => coursesQuery.isSuccess && Array.isArray(coursesQuery.data.Items) && coursesQuery.data.Items.length ? coursesQuery.data.Items : [], [coursesQuery.data, coursesQuery.isSuccess]);
-  assignment = {
-    ...assignment,
-    courses
-  };
-  const memberCourseCompletionsQuery = useQuery({
-    queryKey: ["memberAssignmentCourseProgress", memberId, uniqueCourses],
-    queryFn: async () => {
-      const memberCourseCompletions = await fetchMemberCourseCompletions(memberId, uniqueCourses);
-      return memberCourseCompletions.Items;
-    },
-    staleTime: 500000
-  });
-  const memberCourseCompletions = useMemo(() => memberCourseCompletionsQuery.isSuccess && memberCourseCompletionsQuery.data ? memberCourseCompletionsQuery.data : {}, [memberCourseCompletionsQuery.data, memberCourseCompletionsQuery.isSuccess]);
-  const lastFetch = lastAssignmentFetch?.current[assignment?.classroomId] || 0;
-  const isNew = assignment?.updatedAt > lastFetch && !isCreator;
-  return /*#__PURE__*/_jsx(Card, {
-    sx: {
-      display: "flex",
-      marginBottom: 2,
-      boxShadow: 3
-    },
-    children: /*#__PURE__*/_jsxs(CardContent, {
-      sx: {
-        flexGrow: 1
-      },
-      children: [/*#__PURE__*/_jsxs(Grid, {
-        container: true,
-        spacing: 2,
-        sx: {
-          alignItems: "center"
-        },
-        children: [/*#__PURE__*/_jsx(Grid, {
-          size: "grow",
-          sx: {
-            flexDirection: "column",
-            display: "flex"
-          },
-          children: /*#__PURE__*/_jsxs(Box, {
-            sx: {
-              display: "flex",
-              alignItems: "center"
-            },
-            children: [/*#__PURE__*/_jsx(Typography, {
-              variant: "body1",
-              sx: {
-                fontWeight: 600,
-                color: "text.primary"
-              },
-              children: assignment.title
-            }), isNew && /*#__PURE__*/_jsx(Box, {
-              sx: {
-                ml: 2,
-                px: 1,
-                py: 0.25,
-                bgcolor: "#8300A1",
-                color: "white",
-                fontSize: "0.75rem",
-                borderRadius: 1,
-                fontWeight: "bold"
-              },
-              children: t("NEW")
-            })]
-          })
-        }), /*#__PURE__*/_jsx(Grid, {
-          sx: {
-            textAlign: "right"
-          },
-          children: /*#__PURE__*/_jsx(Typography, {
-            variant: "button",
-            sx: {
-              color: "text.secondary"
-            },
-            children: formatAssignmentDueText(assignment.scheduleDate, assignment.dueDate, t)
-          })
-        }), isCreator && /*#__PURE__*/_jsxs(Grid, {
-          children: [/*#__PURE__*/_jsx(Tooltip, {
-            title: t("edit"),
-            children: /*#__PURE__*/_jsxs(IconButton, {
-              "data-cy": `edit-assignment-${index}`,
-              onClick: () => handleEditAssignment(assignment),
-              children: [" ", /*#__PURE__*/_jsx(Edit, {}), " "]
-            })
-          }), /*#__PURE__*/_jsx(Tooltip, {
-            title: t("delete"),
-            children: /*#__PURE__*/_jsxs(IconButton, {
-              "data-cy": `delete-assignment-${index}`,
-              onClick: () => {
-                handleDeleteAssignment(assignment.classroomId, assignment.assignmentId);
-              },
-              children: [" ", /*#__PURE__*/_jsx(Delete, {}), " "]
-            })
-          })]
-        })]
-      }), /*#__PURE__*/_jsxs(Box, {
-        sx: {
-          mt: 2
-        },
-        children: [/*#__PURE__*/_jsx(Divider, {
-          sx: {
-            marginBottom: "12px",
-            marginTop: "12px"
-          }
-        }), /*#__PURE__*/_jsxs(Grid, {
-          container: true,
-          spacing: 2,
-          children: [/*#__PURE__*/_jsxs(Grid, {
-            size: {
-              md: 10,
-              xs: 12
-            },
-            children: [/*#__PURE__*/_jsx(Typography, {
-              variant: "body2",
-              children: assignment.instructions
-            }), /*#__PURE__*/_jsx(Box, {
-              sx: {
-                mt: 2,
-                width: isCreator ? "80%" : "100%"
-              },
-              children: /*#__PURE__*/_jsx(AssignmentExerciseSelector, {
-                t: t,
-                assignment: assignment,
-                handleStartExercise: handleStartExercise,
-                username: username,
-                getCourseSections: getCourseSections,
-                getRoleplays: getRoleplays,
-                isCreator: isCreator,
-                viewOnly: true,
-                useCase: isCreator ? "assignment-view" : "assignment-start",
-                preferred_username: preferred_username,
-                progressHelpers: progressHelpers,
-                completionHelpers: completionHelpers,
-                memberCourseCompletions: memberCourseCompletions,
-                lastClickedExerciseId: lastClickedExerciseId,
-                isChallengeModeStudent: isChallengeModeStudent,
-                isReadWriteModeStudent: isReadWriteModeStudent
-              })
-            })]
-          }), /*#__PURE__*/_jsx(Grid, {
-            size: {
-              md: 2
-            },
-            children: isCreator && /*#__PURE__*/_jsxs(Box, {
-              sx: {
-                display: "flex",
-                flexDirection: "column",
-                alignItems: "center",
-                textAlign: "center"
-              },
-              children: [/*#__PURE__*/_jsxs(Box, {
-                children: [/*#__PURE__*/_jsx(Typography, {
-                  variant: "h4",
-                  children: assignedStudents?.length
-                }), /*#__PURE__*/_jsx(Typography, {
-                  variant: "body2",
-                  sx: {
-                    color: "text.secondary"
-                  },
-                  children: t("assigned")
-                })]
-              }), /*#__PURE__*/_jsx(Button, {
-                variant: "contained",
-                sx: {
-                  marginTop: 2
-                },
-                onClick: () => handleViewProgress({
-                  assignmentId: assignment?.assignmentId
-                }),
-                children: t("view_progress")
-              })]
-            })
-          })]
-        })]
-      })]
-    })
-  });
-}
-AssignmentCard.propTypes = {
-  assignment: PropTypes.shape({
-    image: PropTypes.string,
-    title: PropTypes.string,
-    description: PropTypes.string,
-    dueDate: PropTypes.string.isRequired,
-    completed: PropTypes.number,
-    assigned: PropTypes.number,
-    assignedStudents: PropTypes.array,
-    t: PropTypes.func
-  }).isRequired
-};

package/dist/Assignments/AssignmentCard/package.json

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