@nualang/nualang-ui-components 0.1.1419 → 0.1.1421

package/dist/Lists/Exercises/Exercises.js

@@ -62,8 +62,10 @@ const sxInfoColorWithMargin = theme => ({
   marginRight: theme.spacing(2),
   marginBottom: theme.spacing(2)
 });
-const sxDescriptionWrapper = () => ({
-  maxWidth: "70%"
+const sxTitleDescriptionWrapper = () => ({
+  maxWidth: "70%",
+  overflowWrap: "anywhere",
+  wordBreak: "break-word"
 });
 
 // Open an add-menu at the mouse cursor for pointer clicks, but fall back to
@@ -378,7 +380,16 @@ function PhraseListRow({
             alt: ""
           })
         }), /*#__PURE__*/_jsx(ListItemText, {
-          primary: isLargeScreen ? phraseList.phraseListName || "" : /*#__PURE__*/_jsxs(_Fragment, {
+          primaryTypographyProps: {
+            component: "div"
+          },
+          secondaryTypographyProps: {
+            component: "div"
+          },
+          primary: isLargeScreen ? /*#__PURE__*/_jsx(Box, {
+            sx: sxTitleDescriptionWrapper,
+            children: phraseList.phraseListName || ""
+          }) : /*#__PURE__*/_jsxs(_Fragment, {
             children: [/*#__PURE__*/_jsx(Box, {
               sx: {
                 mb: 1
@@ -393,7 +404,7 @@ function PhraseListRow({
             })]
           }),
           secondary: isLargeScreen ? /*#__PURE__*/_jsx(Box, {
-            sx: isCreator ? sxDescriptionWrapper : null,
+            sx: sxTitleDescriptionWrapper,
             children: /*#__PURE__*/_jsx(Typography, {
               variant: "body2",
               component: "p",
@@ -637,7 +648,16 @@ function RoleplayListItem({
             alt: ""
           })
         }), /*#__PURE__*/_jsx(ListItemText, {
-          primary: isLargeScreen ? roleplay.roleplayName || "" : /*#__PURE__*/_jsxs(_Fragment, {
+          primaryTypographyProps: {
+            component: "div"
+          },
+          secondaryTypographyProps: {
+            component: "div"
+          },
+          primary: isLargeScreen ? /*#__PURE__*/_jsx(Box, {
+            sx: sxTitleDescriptionWrapper,
+            children: roleplay.roleplayName || ""
+          }) : /*#__PURE__*/_jsxs(_Fragment, {
             children: [/*#__PURE__*/_jsx(Box, {
               sx: {
                 mb: 1
@@ -652,7 +672,7 @@ function RoleplayListItem({
             })]
           }),
           secondary: isLargeScreen ? /*#__PURE__*/_jsx(Box, {
-            sx: isCreator ? sxDescriptionWrapper : null,
+            sx: sxTitleDescriptionWrapper,
             children: /*#__PURE__*/_jsx(Typography, {
               variant: "body2",
               component: "p",
@@ -906,28 +926,39 @@ function BotListItem({
             alt: ""
           })
         }), /*#__PURE__*/_jsx(ListItemText, {
-          primary: isLargeScreen ? !isBotChallenge ? bot.botName || "" : /*#__PURE__*/_jsxs(Box, {
-            sx: {
-              display: "flex",
-              alignItems: "center",
-              gap: "8px"
-            },
-            children: [bot.botName || "", isCreator || parentClassroom?.isCreator ? /*#__PURE__*/_jsx(HtmlTooltipComponent, {
-              titleBold: t("challenge_mode"),
-              titleDesc: t("challenge_bot_desc"),
-              placement: "right",
-              children: /*#__PURE__*/_jsx(Chip, {
+          primaryTypographyProps: {
+            component: "div"
+          },
+          secondaryTypographyProps: {
+            component: "div"
+          },
+          primary: isLargeScreen ? /*#__PURE__*/_jsx(Box, {
+            sx: sxTitleDescriptionWrapper,
+            children: !isBotChallenge ? bot.botName || "" : /*#__PURE__*/_jsxs(Box, {
+              sx: {
+                display: "flex",
+                alignItems: "center",
+                gap: "8px",
+                flexWrap: "wrap",
+                minWidth: 0
+              },
+              children: [bot.botName || "", isCreator || parentClassroom?.isCreator ? /*#__PURE__*/_jsx(HtmlTooltipComponent, {
+                titleBold: t("challenge_mode"),
+                titleDesc: t("challenge_bot_desc"),
+                placement: "right",
+                children: /*#__PURE__*/_jsx(Chip, {
+                  label: t("challenge_mode"),
+                  size: "small",
+                  variant: "outlined",
+                  color: "primary"
+                })
+              }) : /*#__PURE__*/_jsx(Chip, {
                 label: t("challenge_mode"),
                 size: "small",
                 variant: "outlined",
                 color: "primary"
-              })
-            }) : /*#__PURE__*/_jsx(Chip, {
-              label: t("challenge_mode"),
-              size: "small",
-              variant: "outlined",
-              color: "primary"
-            })]
+              })]
+            })
           }) : /*#__PURE__*/_jsxs(_Fragment, {
             children: [/*#__PURE__*/_jsx(Box, {
               sx: {
@@ -958,7 +989,7 @@ function BotListItem({
             }))]
           }),
           secondary: isLargeScreen ? /*#__PURE__*/_jsx(Box, {
-            sx: isCreator ? sxDescriptionWrapper : null,
+            sx: sxTitleDescriptionWrapper,
             children: /*#__PURE__*/_jsx(Typography, {
               variant: "body2",
               component: "p",

package/dist/Lists/Leaderboard/Leaderboard.js

@@ -180,8 +180,8 @@ function Member(props) {
         primary: member?.username?.length > 18 ? member.username.substring(0, 18) + "..." : member.username,
         slotProps: {
           primary: {
-            fontWeight: 800,
-            fontSize: 22
+            fontWeight: 900,
+            fontSize: 28
           }
         }
       }), isIconsVisible ? renderStreakIcon() : null, isIconsVisible ? renderIcon() : null, /*#__PURE__*/_jsx("div", {
@@ -193,8 +193,8 @@ function Member(props) {
           primary: member.score,
           slotProps: {
             primary: {
-              fontWeight: 800,
-              fontSize: 26
+              fontWeight: 900,
+              fontSize: 32
             }
           }
         })

package/dist/Lists/PhraseListSelection/PhraseListSelection.js

@@ -1,154 +1,89 @@
-import { useState, useEffect } from "react";
-import { Box, Button, ListItemText, ListItemButton, Avatar, ListItemIcon, Collapse, CircularProgress, Typography } from "@mui/material";
-import PlayCircleOutlinedIcon from "@mui/icons-material/PlayCircleOutlined";
-import HearingIcon from "@mui/icons-material/Hearing";
-import SwapHorizIcon from "@mui/icons-material/SwapHoriz";
-import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
-import ExpandLessIcon from "@mui/icons-material/ExpandLess";
+import { useEffect, useMemo } from "react";
+import { Box, Button, ListItemText, ListItemButton, Avatar, Checkbox, CircularProgress, Typography } from "@mui/material";
 import ImageSearchIcon from "@mui/icons-material/ImageSearch";
-import ExtensionIcon from "@mui/icons-material/Extension";
+import { selectedRowBg } from "../RoleplaySelection/RoleplaySelection";
 import { courses as courseQuerys } from "@nualang/nualang-api-and-queries/Queries";
-import EditNoteIcon from '@mui/icons-material/EditNote';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const getPhraseCount = phraseList => Array.isArray(phraseList?.phrases) ? phraseList.phrases.length : phraseList?.phraseCount ?? 0;
+export const getHasDefinitions = phraseList => Array.isArray(phraseList?.phrases) ? phraseList.phrases.some(p => p?.definitions?.length > 0) : !!phraseList?.hasDefinitions;
+
+// Enrich a raw phrase list with the derived fields the dialog needs to build a
+// merged, capped pool and to decide game-type availability, plus the ids needed
+// to identify the source topic once several lists across topics are combined.
+export const enrichPhraseList = (phraseList, {
+  courseId,
+  courseSectionTopicId,
+  topicName,
+  topicVideoUrl
+}) => ({
+  ...phraseList,
+  courseId,
+  courseSectionTopicId,
+  topicName: topicName ?? "",
+  topicVideoUrl: topicVideoUrl ?? null,
+  phraseCount: getPhraseCount(phraseList),
+  hasDefinitions: getHasDefinitions(phraseList)
+});
 function PhraseList({
   phraseList,
-  handleCreateGame,
-  courseSectionTopicId,
-  isPhraseListSelected,
-  setIsPhraseListSelected,
-  t,
-  isExerciseSelected,
-  setIsExerciseSelected,
-  topicName
+  selected,
+  onToggle,
+  t
 }) {
-  const [open, setOpen] = useState(false);
-  const isTranslationHidden = phraseList?.hiddenPhraseGroupGames?.translation;
-  const isListeningHidden = phraseList?.hiddenPhraseGroupGames?.listening;
-  const isMeaningHidden = phraseList?.hiddenPhraseGroupGames?.meaning;
-  const isReadAndWriteHidden = phraseList?.hiddenPhraseGroupGames?.["meaning-read-and-write"];
-  const hasDefinitions = phraseList?.phrases?.some(p => p.definitions?.length > 0);
-  const hasSelectableGame = !isTranslationHidden || !isListeningHidden || !isMeaningHidden;
-  if (!hasSelectableGame) return null;
-  const handleGameSelected = exercise => () => {
-    setIsPhraseListSelected(true);
-    setIsExerciseSelected(true);
-    handleCreateGame({
-      courseSectionTopicId,
-      exercise,
-      timer: 30,
-      answerOption: 0,
-      phraseListId: phraseList.phraseListId,
-      phrases: phraseList.phrases || [],
-      topicName: topicName ?? ""
-    });
-  };
-  return /*#__PURE__*/_jsxs("div", {
-    children: [/*#__PURE__*/_jsxs(ListItemButton, {
-      onClick: () => setOpen(!open),
-      disabled: isPhraseListSelected || isExerciseSelected,
+  return /*#__PURE__*/_jsxs(ListItemButton, {
+    onClick: onToggle,
+    role: "checkbox",
+    "aria-checked": selected,
+    sx: {
+      display: "flex",
+      alignItems: "center",
+      px: 2,
+      py: 1,
+      borderRadius: 1,
+      ...(selected ? {
+        backgroundColor: selectedRowBg
+      } : {})
+    },
+    children: [phraseList.picture ? /*#__PURE__*/_jsx(Avatar, {
+      src: phraseList.picture,
+      alt: phraseList.phraseListName,
       sx: {
+        flex: "none"
+      }
+    }) : /*#__PURE__*/_jsx(Avatar, {
+      alt: phraseList.phraseListName,
+      sx: {
+        flex: "none"
+      },
+      children: /*#__PURE__*/_jsx(ImageSearchIcon, {})
+    }), /*#__PURE__*/_jsx(ListItemText, {
+      primary: phraseList.phraseListName,
+      secondary: `${t("n_phrases", {
+        count: getPhraseCount(phraseList)
+      })}` + (getHasDefinitions(phraseList) ? ` · ${t("has_definitions")}` : ""),
+      sx: {
+        ml: 2,
+        flex: 1,
+        minWidth: 0
+      }
+    }), /*#__PURE__*/_jsx(Box, {
+      sx: {
+        minWidth: 56,
         display: "flex",
-        alignItems: "center",
-        justifyContent: "space-between",
-        flexDirection: {
-          xs: "column",
-          sm: "row"
-        }
+        justifyContent: "flex-end",
+        flex: "none"
       },
-      children: [/*#__PURE__*/_jsxs(Box, {
-        sx: {
-          display: "flex",
-          alignItems: "center",
-          width: {
-            xs: "100%",
-            sm: "85%"
-          }
-        },
-        children: [phraseList.picture ? /*#__PURE__*/_jsx(Avatar, {
-          src: phraseList.picture,
-          alt: phraseList.phraseListName
-        }) : /*#__PURE__*/_jsx(Avatar, {
-          alt: phraseList.phraseListName,
-          children: /*#__PURE__*/_jsx(ImageSearchIcon, {})
-        }), /*#__PURE__*/_jsx(ListItemText, {
-          primary: phraseList.phraseListName,
-          secondary: phraseList.description,
-          sx: {
-            marginLeft: 2
-          }
-        })]
-      }), /*#__PURE__*/_jsx(ListItemIcon, {
-        children: open ? /*#__PURE__*/_jsx(ExpandLessIcon, {
-          sx: {
-            color: "#757575"
-          }
-        }) : /*#__PURE__*/_jsx(ExpandMoreIcon, {
-          sx: {
-            color: "#757575"
-          }
-        })
-      })]
-    }), /*#__PURE__*/_jsx(Collapse, {
-      in: open,
-      timeout: "auto",
-      unmountOnExit: true,
-      children: /*#__PURE__*/_jsxs(Box, {
+      children: /*#__PURE__*/_jsx(Checkbox, {
+        checked: selected,
+        tabIndex: -1,
+        disableRipple: true,
+        color: "primary",
         sx: {
-          ml: 3.5
+          p: 0
         },
-        children: [!isTranslationHidden && /*#__PURE__*/_jsxs(ListItemButton, {
-          onClick: handleGameSelected("translation"),
-          disabled: isPhraseListSelected || isExerciseSelected,
-          children: [/*#__PURE__*/_jsx(ListItemIcon, {
-            children: /*#__PURE__*/_jsx(SwapHorizIcon, {})
-          }), /*#__PURE__*/_jsx(ListItemText, {
-            primary: t("translation"),
-            secondary: t("translation_exercise_desc")
-          }), /*#__PURE__*/_jsx(ListItemIcon, {
-            children: /*#__PURE__*/_jsx(PlayCircleOutlinedIcon, {
-              color: "primary"
-            })
-          })]
-        }), !isListeningHidden && /*#__PURE__*/_jsxs(ListItemButton, {
-          onClick: handleGameSelected("listening"),
-          disabled: isPhraseListSelected || isExerciseSelected,
-          children: [/*#__PURE__*/_jsx(ListItemIcon, {
-            children: /*#__PURE__*/_jsx(HearingIcon, {})
-          }), /*#__PURE__*/_jsx(ListItemText, {
-            primary: t("listening"),
-            secondary: t("listening_exercise_desc")
-          }), /*#__PURE__*/_jsx(ListItemIcon, {
-            children: /*#__PURE__*/_jsx(PlayCircleOutlinedIcon, {
-              color: "primary"
-            })
-          })]
-        }), !isMeaningHidden && /*#__PURE__*/_jsxs(ListItemButton, {
-          onClick: handleGameSelected("meaning"),
-          disabled: isPhraseListSelected || isExerciseSelected || !hasDefinitions,
-          children: [/*#__PURE__*/_jsx(ListItemIcon, {
-            children: /*#__PURE__*/_jsx(ExtensionIcon, {})
-          }), /*#__PURE__*/_jsx(ListItemText, {
-            primary: t("meaning"),
-            secondary: t("meaning_exercise_desc")
-          }), /*#__PURE__*/_jsx(ListItemIcon, {
-            children: /*#__PURE__*/_jsx(PlayCircleOutlinedIcon, {
-              color: "primary"
-            })
-          })]
-        }), !isReadAndWriteHidden && /*#__PURE__*/_jsxs(ListItemButton, {
-          onClick: handleGameSelected("meaning-read-and-write"),
-          disabled: isPhraseListSelected || isExerciseSelected || !hasDefinitions,
-          children: [/*#__PURE__*/_jsx(ListItemIcon, {
-            children: /*#__PURE__*/_jsx(EditNoteIcon, {})
-          }), /*#__PURE__*/_jsx(ListItemText, {
-            primary: t("meaning_read_write"),
-            secondary: t("meaning_read_write_exercise_desc")
-          }), /*#__PURE__*/_jsx(ListItemIcon, {
-            children: /*#__PURE__*/_jsx(PlayCircleOutlinedIcon, {
-              color: "primary"
-            })
-          })]
-        })]
+        inputProps: {
+          "aria-label": phraseList.phraseListName
+        }
       })
     })]
   });
@@ -158,16 +93,15 @@ function PhraseListSelection({
   courseId,
   sectionId,
   topicId,
-  handleCreateGame,
   courseSectionTopicId,
   t,
-  isExerciseSelected,
   isExpanded,
-  setIsExerciseSelected,
+  selectedListIds,
+  onTogglePhraseList,
   onPhraseListsLoaded,
-  topicName
+  topicName,
+  topicVideoUrl
 }) {
-  const [isPhraseListSelected, setIsPhraseListSelected] = useState(false);
   const phraseListsQuery = courseQuerys.useCourseSectionTopicPhraseLists(async (cId, sId, tId, filters) => getPhraseLists(cId, sId, tId, filters), {
     courseId,
     sectionId,
@@ -180,11 +114,20 @@ function PhraseListSelection({
     enabled: !!courseId && !!sectionId && !!topicId && isExpanded
   });
   const phraseLists = phraseListsQuery.isSuccess && Array.isArray(phraseListsQuery.data?.Items) ? phraseListsQuery.data.Items : [];
+  const enrichedLists = useMemo(() => phraseLists.map(pl => enrichPhraseList(pl, {
+    courseId,
+    courseSectionTopicId,
+    topicName,
+    topicVideoUrl
+  })), [phraseLists, courseId, courseSectionTopicId, topicName, topicVideoUrl]);
+
+  // Report the loaded lists up so the topic row can render its
+  // "n of m lists selected" subtitle and drive Select all / Clear all.
   useEffect(() => {
     if (phraseListsQuery.isSuccess && onPhraseListsLoaded) {
-      onPhraseListsLoaded(phraseLists.length);
+      onPhraseListsLoaded(enrichedLists);
     }
-  }, [phraseListsQuery.isSuccess, phraseLists.length]);
+  }, [phraseListsQuery.isSuccess, enrichedLists]);
   if (phraseListsQuery.isError) {
     return /*#__PURE__*/_jsxs(Box, {
       sx: {
@@ -214,7 +157,7 @@ function PhraseListSelection({
       })
     });
   }
-  if (phraseListsQuery.isSuccess && phraseLists.length === 0) {
+  if (phraseListsQuery.isSuccess && enrichedLists.length === 0) {
     return /*#__PURE__*/_jsx(Box, {
       sx: {
         px: 2,
@@ -227,16 +170,11 @@ function PhraseListSelection({
       })
     });
   }
-  return phraseLists.map((phraseList, index) => /*#__PURE__*/_jsx(PhraseList, {
+  return enrichedLists.map((phraseList, index) => /*#__PURE__*/_jsx(PhraseList, {
     phraseList: phraseList,
-    handleCreateGame: handleCreateGame,
-    courseSectionTopicId: courseSectionTopicId,
-    isPhraseListSelected: isPhraseListSelected,
-    setIsPhraseListSelected: setIsPhraseListSelected,
-    t: t,
-    isExerciseSelected: isExerciseSelected,
-    setIsExerciseSelected: setIsExerciseSelected,
-    topicName: topicName
+    selected: !!selectedListIds?.has(phraseList.phraseListId),
+    onToggle: () => onTogglePhraseList(phraseList),
+    t: t
   }, phraseList.phraseListId || index));
 }
 export default PhraseListSelection;