@nualang/nualang-ui-components 0.1.1430 → 0.1.1431

package/dist/Cards/Bot/Bot.js

@@ -135,12 +135,7 @@ function Bot({
       children: [/*#__PURE__*/_jsx(CardTop, {
         children: /*#__PURE__*/_jsx(Skeleton, {
           variant: "rectangular",
-          sx: {
-            ...classes.media,
-            ...(compact ? {
-              paddingTop: "40%"
-            } : {})
-          }
+          sx: classes.media
         })
       }), /*#__PURE__*/_jsx(CardHeader, {
         action: /*#__PURE__*/_jsx(IconButton, {
@@ -199,12 +194,7 @@ function Bot({
         onClick: selectBot,
         role: "link",
         children: [/*#__PURE__*/_jsx(ProgressiveCardMedia, {
-          sx: {
-            ...classes.media,
-            ...(compact ? {
-              paddingTop: "40%"
-            } : {})
-          },
+          sx: classes.media,
           highQualitySrc: visible || !pictureXs ? cardPicture || picture || PlaceholderImages.bot : null,
           lowQualitySrc: pictureXs,
           title: botName,

package/dist/Cards/Course/Course.js

@@ -297,13 +297,7 @@ CourseDifficulty.propTypes = {
   difficulty: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
   compact: PropTypes.bool
 };
-
-// Keep compact cards' media at 16:9 even though it makes the card a little
-// taller than the old 40% (2.5:1) crop - matches how the picture actually
-// looks everywhere else it's shown.
-const COMPACT_MEDIA_ASPECT_RATIO = "56.25%";
 function CourseCardMedia({
-  compact,
   visible,
   cardPicture,
   picture,
@@ -311,10 +305,7 @@ function CourseCardMedia({
   placeholderRef
 }) {
   return /*#__PURE__*/_jsx(ProgressiveCardMedia, {
-    sx: compact ? {
-      ...classes.media,
-      paddingTop: COMPACT_MEDIA_ASPECT_RATIO
-    } : classes.media,
+    sx: classes.media,
     highQualitySrc: visible || !pictureXs ? cardPicture || picture || PlaceholderImages.course : null,
     lowQualitySrc: pictureXs,
     placeholderRef: placeholderRef
@@ -373,10 +364,7 @@ function CompactCourseLoading() {
     children: [/*#__PURE__*/_jsx(CardTop, {
       children: /*#__PURE__*/_jsx(Skeleton, {
         variant: "rectangular",
-        sx: {
-          ...classes.media,
-          paddingTop: COMPACT_MEDIA_ASPECT_RATIO
-        }
+        sx: classes.media
       })
     }), /*#__PURE__*/_jsx(CardHeader, {
       title: /*#__PURE__*/_jsx(Skeleton, {
@@ -698,7 +686,6 @@ function CourseCard({
           role: "link",
           "aria-label": `${checked ? t("selected") : t("select")} ${courseName}`,
           children: /*#__PURE__*/_jsx(CourseCardMedia, {
-            compact: true,
             visible: visible,
             cardPicture: cardPicture,
             picture: picture,

package/dist/Cards/Roleplay/Roleplay.js

@@ -135,12 +135,7 @@ function Roleplay({
       children: [/*#__PURE__*/_jsx(CardTop, {
         children: /*#__PURE__*/_jsx(Skeleton, {
           variant: "rectangular",
-          sx: {
-            ...classes.media,
-            ...(compact ? {
-              paddingTop: "40%"
-            } : {})
-          }
+          sx: classes.media
         })
       }), /*#__PURE__*/_jsx(CardHeader, {
         action: /*#__PURE__*/_jsx(IconButton, {
@@ -199,12 +194,7 @@ function Roleplay({
         role: "link",
         "aria-label": "Card Image",
         children: [/*#__PURE__*/_jsx(ProgressiveCardMedia, {
-          sx: {
-            ...classes.media,
-            ...(compact ? {
-              paddingTop: "40%"
-            } : {})
-          },
+          sx: classes.media,
           highQualitySrc: visible || !pictureXs ? cardPicture || picture || PlaceholderImages.roleplay : null,
           lowQualitySrc: pictureXs,
           placeholderRef: placeholderRef,

package/dist/Cards/Topic/Topic.js

@@ -38,12 +38,7 @@ function Topic({
       children: [/*#__PURE__*/_jsx(CardTop, {
         children: /*#__PURE__*/_jsx(Skeleton, {
           variant: "rectangular",
-          sx: {
-            ...classes.media,
-            ...(compact ? {
-              paddingTop: "40%"
-            } : {})
-          }
+          sx: classes.media
         })
       }), /*#__PURE__*/_jsx(CardHeader, {
         title: /*#__PURE__*/_jsx(Skeleton, {
@@ -94,12 +89,7 @@ function Topic({
         disabled: disableActions,
         role: "link",
         children: /*#__PURE__*/_jsx(ProgressiveCardMedia, {
-          sx: {
-            ...classes.media,
-            ...(compact ? {
-              paddingTop: "40%"
-            } : {})
-          },
+          sx: classes.media,
           highQualitySrc: visible || !pictureXs ? cardPicture || picture || PlaceholderImages.topic : null,
           lowQualitySrc: pictureXs,
           title: topicName,

package/dist/Dialogs/FindChatbotDialog/FindChatbotDialog.js

@@ -16,7 +16,7 @@ import CloseIcon from "@mui/icons-material/Close";
 import AddIcon from "@mui/icons-material/Add";
 import Bots from "../../Lists/Bots/Bots";
 import PlaceholderImages from "../../utils/placeholder-images/index";
-import { SearchFilters, Transition } from "../SearchFilters/SearchFilters";
+import { SearchFilters, Transition, applyFilters, useSearchFilters } from "../SearchFilters/SearchFilters";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 export default function FindChatbotDialog({
   open,
@@ -43,11 +43,11 @@ export default function FindChatbotDialog({
   // Restricted users are always kept on the library tab, regardless of state.
   const effectiveTab = isCommunityAccessRestricted ? 0 : tab;
   const [selectedBotIds, setSelectedBotIds] = useState([]);
-  const [search, setSearch] = useState("");
-  const [filters, setFilters] = useState({
-    difficulty: "all",
-    sort: "newest"
-  });
+  const {
+    filters,
+    resetFilters,
+    filterProps
+  } = useSearchFilters();
   const allChatbots = [...libraryChatbots, ...communityChatbots];
   const selectedChatbots = allChatbots.filter(bot => selectedBotIds.includes(bot.botId)).filter((bot, index, arr) => arr.findIndex(b => b.botId === bot.botId) === index).map(bot => ({
     ...bot,
@@ -56,16 +56,6 @@ export default function FindChatbotDialog({
   const handleToggle = botId => {
     setSelectedBotIds(prev => prev.includes(botId) ? prev.filter(id => id !== botId) : [...prev, botId]);
   };
-  const handleFilterChange = event => {
-    const {
-      name,
-      value
-    } = event.target;
-    setFilters(prev => ({
-      ...prev,
-      [name]: value
-    }));
-  };
   const handleAdd = () => {
     onAddChatbots(selectedChatbots);
     reset();
@@ -73,11 +63,7 @@ export default function FindChatbotDialog({
   };
   const reset = () => {
     setSelectedBotIds([]);
-    setSearch("");
-    setFilters({
-      difficulty: "all",
-      sort: "newest"
-    });
+    resetFilters();
     setTab(0);
   };
   const handleDialogClose = () => {
@@ -101,37 +87,14 @@ export default function FindChatbotDialog({
   const handleTabChange = (_, v) => {
     if (isCommunityAccessRestricted) return;
     setTab(v);
-    setSearch("");
-    setFilters({
-      difficulty: "all",
-      sort: "newest"
-    });
+    resetFilters();
     if (scrollRef.current) scrollRef.current.scrollTop = 0;
   };
-  const filterChatbots = chatbots => {
-    if (!search.trim()) return chatbots;
-    const q = search.toLowerCase();
-    return chatbots.filter(bot => bot.botName?.toLowerCase().includes(q) || bot.description?.toLowerCase().includes(q) || bot.createdByName?.toLowerCase().includes(q));
-  };
-  const applyCommunityFilters = chatbots => {
-    let result = filterChatbots(chatbots);
-    if (filters.difficulty && filters.difficulty !== "all") {
-      result = result.filter(bot => bot.difficulty === filters.difficulty);
-    }
-    if (filters.sort === "newest") {
-      result = [...result].sort((a, b) => new Date(b.createdAt || 0) - new Date(a.createdAt || 0));
-    } else if (filters.sort === "oldest") {
-      result = [...result].sort((a, b) => new Date(a.createdAt || 0) - new Date(b.createdAt || 0));
-    } else {
-      result = [...result].sort((a, b) => (b.exerciseStartTotal || 0) - (a.exerciseStartTotal || 0));
-    }
-    return result;
-  };
-  const currentChatbots = effectiveTab === 0 ? filterChatbots(libraryChatbots) : applyCommunityFilters(communityChatbots);
+  const currentChatbots = applyFilters(effectiveTab === 0 ? libraryChatbots : communityChatbots, filters, "botName");
   const isLoading = effectiveTab === 0 ? isLoadingLibrary : isLoadingCommunity;
-  const sectionLabel = effectiveTab === 0 ? t("add_own_exercise_message", {
+  const libraryLabel = t("add_own_exercise_message", {
     exerciseName: t("chatbots").toLowerCase()
-  }) : t("or_select_a_community_template_desc");
+  });
   const addButtonLabel = selectedBotIds.length > 0 ? `${t("add_chatbots")} (${selectedBotIds.length})` : t("add_chatbots");
   return /*#__PURE__*/_jsxs(Dialog, {
     open: open,
@@ -190,24 +153,10 @@ export default function FindChatbotDialog({
             disabled: isCommunityAccessRestricted
           })]
         })
-      }), effectiveTab === 1 && /*#__PURE__*/_jsx(Box, {
-        sx: {
-          px: 3,
-          py: {
-            xs: 0,
-            md: 1.5
-          },
-          borderBottom: 1,
-          borderColor: "divider"
-        },
-        children: /*#__PURE__*/_jsx(SearchFilters, {
-          t: t,
-          difficulty: filters.difficulty,
-          handleFilterChange: handleFilterChange,
-          sort: filters.sort,
-          search: search,
-          setSearch: setSearch
-        })
+      }), /*#__PURE__*/_jsx(SearchFilters, {
+        t: t,
+        ...filterProps,
+        dataCyPrefix: "find-chatbots"
       }), /*#__PURE__*/_jsx(Box, {
         ref: scrollRef,
         sx: {
@@ -229,13 +178,13 @@ export default function FindChatbotDialog({
             children: t("no_chatbots_found") || "No chatbots found"
           })
         }) : /*#__PURE__*/_jsxs(_Fragment, {
-          children: [/*#__PURE__*/_jsx(Typography, {
+          children: [effectiveTab === 0 && /*#__PURE__*/_jsx(Typography, {
             color: "text.secondary",
             sx: {
               display: "block",
               mb: 2
             },
-            children: sectionLabel
+            children: libraryLabel
           }), /*#__PURE__*/_jsx(Bots, {
             t: t,
             bots: currentChatbots,

package/dist/Dialogs/FindCoursesDialog/FindCoursesDialog.js

@@ -1,4 +1,4 @@
-import { useState, useEffect, useMemo, useRef, forwardRef } from "react";
+import { useState, useEffect, useMemo, useRef } from "react";
 import { useInView } from "react-intersection-observer";
 import { courses as courseQuerys, ReactQuery } from "@nualang/nualang-api-and-queries/Queries";
 import { getCourses } from "@nualang/nualang-api-and-queries/APIs/Courses";
@@ -7,7 +7,6 @@ import AppBar from "@mui/material/AppBar";
 import Toolbar from "@mui/material/Toolbar";
 import IconButton from "@mui/material/IconButton";
 import Typography from "@mui/material/Typography";
-import Slide from "@mui/material/Slide";
 import Box from "@mui/material/Box";
 import Tabs from "@mui/material/Tabs";
 import Tab from "@mui/material/Tab";
@@ -26,6 +25,7 @@ import SortBySelector from "../../Forms/SortBySelector/SortBySelector";
 import useDebounce from "../../hooks/useDebounce";
 import useHorizontalScroll from "../../hooks/useHorizontalScroll";
 import PlaceholderImages from "../../utils/placeholder-images/index";
+import { DIFFICULTIES, SORT_BY_OPTIONS, Transition, sortItems } from "../SearchFilters/SearchFilters";
 
 // The Community tab wraps into a grid, same as Topics.jsx's compact cards in
 // FindTopicsDialog. My library keeps horizontal scrolling rows (below) so
@@ -46,29 +46,14 @@ const courseGridSx = {
 const {
   useInfiniteQuery
 } = ReactQuery;
-
-// Same CEFR codes FindTopicsDialog's community difficulty filter uses.
-const DIFFICULTIES = ["A1", "A2", "B1", "B2", "C1", "C2"];
 const LIBRARY_PAGE_SIZE = 12;
 const nextLibraryPageParam = lastPage => lastPage.LastEvaluatedKey?.page || lastPage.LastEvaluatedKey?.courseId ? lastPage.LastEvaluatedKey : undefined;
-const SORT_BY_OPTIONS = {
-  popular: "popular",
-  newest: "newest",
-  oldest: "oldest"
-};
 const DEFAULT_FILTERS = {
   learnLang: "all",
   forLang: "all",
   difficulty: "all",
   sort: "popular"
 };
-const Transition = /*#__PURE__*/forwardRef(function Transition(props, ref) {
-  return /*#__PURE__*/_jsx(Slide, {
-    direction: "up",
-    ref: ref,
-    ...props
-  });
-});
 function CourseFilters({
   t,
   search,
@@ -202,7 +187,7 @@ function CourseFilters({
         children: t("all") || "All"
       }), DIFFICULTIES.map(d => /*#__PURE__*/_jsx(MenuItem, {
         value: d,
-        children: d
+        children: t(d) || d
       }, d))]
     }), /*#__PURE__*/_jsx(SortBySelector, {
       id: "course-sort",
@@ -560,15 +545,7 @@ export default function FindCoursesDialog({
       }
       return true;
     });
-    const sorted = [...filtered];
-    if (filters.sort === "newest") {
-      sorted.sort((a, b) => new Date(b.createdAt || 0) - new Date(a.createdAt || 0));
-    } else if (filters.sort === "oldest") {
-      sorted.sort((a, b) => new Date(a.createdAt || 0) - new Date(b.createdAt || 0));
-    } else {
-      sorted.sort((a, b) => (b.exerciseStartTotal || 0) - (a.exerciseStartTotal || 0));
-    }
-    return sorted;
+    return sortItems(filtered, filters.sort);
   }, [learnCoursesQuery.data, groupCoursesQuery.data, groupCoursesQuery.isSuccess, filters.learnLang, filters.forLang, filters.difficulty, search, filters.sort]);
   const libraryCreatedCourses = useMemo(() => (teachCoursesQuery.data?.pages || []).flatMap(page => page.Items || []), [teachCoursesQuery.data]);
   const communityCoursesQuery = courseQuerys.useCommunityCourses(async queryFilters => {
@@ -807,18 +784,11 @@ export default function FindCoursesDialog({
             isLoadingMore: learnCoursesQuery.isFetchingNextPage,
             resetKey: librarySortResetKey
           })]
-        }) : isLoadingCommunity ? /*#__PURE__*/_jsxs(Box, {
+        }) : isLoadingCommunity ? /*#__PURE__*/_jsx(Box, {
           sx: {
             p: 3
           },
-          children: [/*#__PURE__*/_jsx(Skeleton, {
-            variant: "text",
-            width: 220,
-            height: 28,
-            sx: {
-              mb: 2
-            }
-          }), /*#__PURE__*/_jsx(Box, {
+          children: /*#__PURE__*/_jsx(Box, {
             sx: courseGridSx,
             children: Array.from({
               length: 10
@@ -826,7 +796,7 @@ export default function FindCoursesDialog({
               t: t,
               compact: true
             }, i))
-          })]
+          })
         }) : isCommunityEmpty ? /*#__PURE__*/_jsx(Box, {
           display: "flex",
           justifyContent: "center",
@@ -839,14 +809,7 @@ export default function FindCoursesDialog({
           sx: {
             p: 3
           },
-          children: [/*#__PURE__*/_jsx(Typography, {
-            variant: "body2",
-            color: "text.secondary",
-            sx: {
-              mb: 2
-            },
-            children: t("courses_shared_by_other_teachers") || "Courses shared by other teachers"
-          }), communityCourses.length === 0 ? /*#__PURE__*/_jsx(Typography, {
+          children: [communityCourses.length === 0 ? /*#__PURE__*/_jsx(Typography, {
             variant: "body2",
             color: "text.secondary",
             children: t("no_community_courses_match") || "No courses match these filters"

package/dist/Dialogs/FindScenarioDialog/FindScenarioDialog.js

@@ -4,7 +4,7 @@ import { Dialog, AppBar, Toolbar, IconButton, Typography, Box, Tabs, Tab, Avatar
 import { Close as CloseIcon, Add as AddIcon } from "@mui/icons-material";
 import Roleplays from "../../Lists/Roleplays/Roleplays";
 import PlaceholderImages from "../../utils/placeholder-images/index";
-import { SearchFilters, Transition } from "../SearchFilters/SearchFilters";
+import { SearchFilters, Transition, applyFilters, useSearchFilters } from "../SearchFilters/SearchFilters";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 export default function FindScenarioDialog({
   open,
@@ -31,11 +31,11 @@ export default function FindScenarioDialog({
   // Restricted users are always kept on the library tab, regardless of state.
   const effectiveTab = isCommunityAccessRestricted ? 0 : tab;
   const [selectedRoleplayIds, setSelectedRoleplayIds] = useState([]);
-  const [search, setSearch] = useState("");
-  const [filters, setFilters] = useState({
-    difficulty: "all",
-    sort: "newest"
-  });
+  const {
+    filters,
+    resetFilters,
+    filterProps
+  } = useSearchFilters();
   const allScenarios = [...libraryScenarios, ...communityScenarios];
   const selectedScenarios = allScenarios.filter(roleplay => selectedRoleplayIds.includes(roleplay.roleplayId)).filter((roleplay, index, arr) => arr.findIndex(r => r.roleplayId === roleplay.roleplayId) === index).map(roleplay => ({
     ...roleplay,
@@ -44,16 +44,6 @@ export default function FindScenarioDialog({
   const handleToggle = roleplayId => {
     setSelectedRoleplayIds(prev => prev.includes(roleplayId) ? prev.filter(id => id !== roleplayId) : [...prev, roleplayId]);
   };
-  const handleFilterChange = event => {
-    const {
-      name,
-      value
-    } = event.target;
-    setFilters(prev => ({
-      ...prev,
-      [name]: value
-    }));
-  };
   const handleAdd = () => {
     onAddScenarios(selectedScenarios);
     reset();
@@ -61,11 +51,7 @@ export default function FindScenarioDialog({
   };
   const reset = () => {
     setSelectedRoleplayIds([]);
-    setSearch("");
-    setFilters({
-      difficulty: "all",
-      sort: "newest"
-    });
+    resetFilters();
     setTab(0);
   };
   const handleDialogClose = () => {
@@ -89,37 +75,14 @@ export default function FindScenarioDialog({
   const handleTabChange = (_, v) => {
     if (isCommunityAccessRestricted) return;
     setTab(v);
-    setSearch("");
-    setFilters({
-      difficulty: "all",
-      sort: "newest"
-    });
+    resetFilters();
     if (scrollRef.current) scrollRef.current.scrollTop = 0;
   };
-  const filterScenarios = scenarios => {
-    if (!search.trim()) return scenarios;
-    const q = search.toLowerCase();
-    return scenarios.filter(roleplay => roleplay.roleplayName?.toLowerCase().includes(q) || roleplay.description?.toLowerCase().includes(q) || roleplay.createdByName?.toLowerCase().includes(q));
-  };
-  const applyCommunityFilters = scenarios => {
-    let result = filterScenarios(scenarios);
-    if (filters.difficulty && filters.difficulty !== "all") {
-      result = result.filter(roleplay => roleplay.difficulty === filters.difficulty);
-    }
-    if (filters.sort === "newest") {
-      result = [...result].sort((a, b) => new Date(b.createdAt || 0) - new Date(a.createdAt || 0));
-    } else if (filters.sort === "oldest") {
-      result = [...result].sort((a, b) => new Date(a.createdAt || 0) - new Date(b.createdAt || 0));
-    } else {
-      result = [...result].sort((a, b) => (b.exerciseStartTotal || 0) - (a.exerciseStartTotal || 0));
-    }
-    return result;
-  };
-  const currentScenarios = effectiveTab === 0 ? filterScenarios(libraryScenarios) : applyCommunityFilters(communityScenarios);
+  const currentScenarios = applyFilters(effectiveTab === 0 ? libraryScenarios : communityScenarios, filters, "roleplayName");
   const isLoading = effectiveTab === 0 ? isLoadingLibrary : isLoadingCommunity;
-  const sectionLabel = effectiveTab === 0 ? t("add_own_exercise_message", {
+  const libraryLabel = t("add_own_exercise_message", {
     exerciseName: t("scenarios").toLowerCase()
-  }) : t("or_select_a_community_template_desc");
+  });
   const addButtonLabel = selectedRoleplayIds.length > 0 ? `${t("add_scenarios")} (${selectedRoleplayIds.length})` : t("add_scenarios");
   return /*#__PURE__*/_jsxs(Dialog, {
     open: open,
@@ -178,24 +141,10 @@ export default function FindScenarioDialog({
             disabled: isCommunityAccessRestricted
           })]
         })
-      }), effectiveTab === 1 && /*#__PURE__*/_jsx(Box, {
-        sx: {
-          px: 3,
-          py: {
-            xs: 0,
-            md: 1.5
-          },
-          borderBottom: 1,
-          borderColor: "divider"
-        },
-        children: /*#__PURE__*/_jsx(SearchFilters, {
-          t: t,
-          difficulty: filters.difficulty,
-          handleFilterChange: handleFilterChange,
-          sort: filters.sort,
-          search: search,
-          setSearch: setSearch
-        })
+      }), /*#__PURE__*/_jsx(SearchFilters, {
+        t: t,
+        ...filterProps,
+        dataCyPrefix: "find-scenarios"
       }), /*#__PURE__*/_jsx(Box, {
         ref: scrollRef,
         sx: {
@@ -217,13 +166,13 @@ export default function FindScenarioDialog({
             children: t("no_scenarios_found") || "No scenarios found"
           })
         }) : /*#__PURE__*/_jsxs(_Fragment, {
-          children: [/*#__PURE__*/_jsx(Typography, {
+          children: [effectiveTab === 0 && /*#__PURE__*/_jsx(Typography, {
             color: "text.secondary",
             sx: {
               display: "block",
               mb: 2
             },
-            children: sectionLabel
+            children: libraryLabel
           }), /*#__PURE__*/_jsx(Roleplays, {
             t: t,
             roleplays: currentScenarios,