@nualang/nualang-ui-components 0.1.1417 → 0.1.1419

package/dist/Dialogs/ImageBuilder/ImageBuilderDialog.js

@@ -84,7 +84,10 @@ export default function ImageBuilderDialog({
     setIconOpacity(getOptimalIconOpacity(c));
   };
   const handleConfirm = () => {
-    onConfirm(bannerDataUrl, {
+    onConfirm({
+      bannerDataUrl,
+      cardDataUrl
+    }, {
       color,
       iconKey
     });

package/dist/Exercises/PhraseGroup/PhraseGroupInfo/PhraseGroupInfo.js

@@ -65,6 +65,16 @@ function PhraseGroupInfo({
   description = "",
   phrases = []
 }) {
+  // Fixed-footprint style so every source — a landscape library photo or a
+  // square Image Builder card — renders at the same size. Without a height +
+  // object-fit, a square card fills the full 250px width as a 250×250 block and
+  // dominates the header.
+  const imageStyle = {
+    width: 250,
+    height: 160,
+    objectFit: "cover",
+    borderRadius: "10%"
+  };
   return /*#__PURE__*/_jsxs(Box, {
     sx: {
       width: "100%",
@@ -83,18 +93,12 @@ function PhraseGroupInfo({
         },
         children: picture ? /*#__PURE__*/_jsx("img", {
           src: picture,
-          width: 250,
           alt: "",
-          style: {
-            borderRadius: "10%"
-          }
+          style: imageStyle
         }) : /*#__PURE__*/_jsx("img", {
           src: PlaceholderImages.roleplay,
-          width: 250,
           alt: "",
-          style: {
-            borderRadius: "10%"
-          }
+          style: imageStyle
         })
       })
     }), /*#__PURE__*/_jsxs(Box, {

package/dist/Forms/ImageSelector/ImageSelector.js

@@ -283,7 +283,8 @@ function ImageSelector({
         });
       }
       const {
-        bannerDataUrl
+        bannerDataUrl,
+        cardDataUrl
       } = generateBuilderImages({
         color: randomColor,
         iconKey: randomIcon,
@@ -291,9 +292,9 @@ function ImageSelector({
         iconOpacity: getOptimalIconOpacity(randomColor),
         darkIcons: shouldUseDarkIcons(randomColor)
       });
-      onChange(bannerDataUrl);
+      onChange(isBanner ? bannerDataUrl : cardDataUrl);
     }
-  }, [value, autoGenerateDefault, onChange]);
+  }, [value, autoGenerateDefault, isBanner, onChange, onBuilderSettingsChange]);
   const handleTogglePreview = () => {
     setOpenPreview(!openPreview);
   };
@@ -617,10 +618,14 @@ function ImageSelector({
       onClose: () => setIsImageBuilderOpen(false),
       initialColor: builderColor,
       initialIconKey: builderIcon,
-      onConfirm: (dataUrl, {
+      onConfirm: ({
+        bannerDataUrl,
+        cardDataUrl
+      }, {
         color,
         iconKey
       } = {}) => {
+        const dataUrl = isBanner ? bannerDataUrl : cardDataUrl;
         setFileSize(0);
         setImageSrc(dataUrl);
         setOriginalImage(dataUrl);

package/dist/Lists/Courses/Courses.js

@@ -5,7 +5,7 @@ import CourseCard from "../../Cards/Course/Course";
 import useListScroll from "../../hooks/useListScroll";
 import { SingleLineGridList, SingleLineGridListItem, GridListItem } from "../ListElements";
 import { getStudentSortOrder, setStudentSortOrder } from "../../utils/studentSort";
-import { CLASSROOM_COURSES_SORT_ORDER_KEY, compareCoursesBySortOrder, compareCoursesByLastVisit, getCourseVisits, recordCourseVisit } from "../../utils/courseSort";
+import { CLASSROOM_COURSES_SORT_ORDER_KEY, compareCoursesBySortOrder, compareCoursesByLastVisit, getCourseVisits, normalizeCourseSortOrder, recordCourseVisit } from "../../utils/courseSort";
 
 // import { propsAreEqual } from '../../utils';
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
@@ -165,7 +165,7 @@ function Courses({
   handleViewCourseTopic,
   ...otherProps
 }) {
-  const [sortOrder, setSortOrder] = useState(() => getStudentSortOrder(CLASSROOM_COURSES_SORT_ORDER_KEY, "newest"));
+  const [sortOrder, setSortOrder] = useState(() => normalizeCourseSortOrder(getStudentSortOrder(CLASSROOM_COURSES_SORT_ORDER_KEY, "default")));
   // Snapshot taken on mount so opening a course doesn't reshuffle the list
   // under the user mid-click; the fresh order shows on the way back in.
   const [visits, setVisits] = useState(getCourseVisits);
@@ -196,12 +196,15 @@ function Courses({
     // otherwise the caller has already sorted/filtered courses and this
     // must not reorder them.
     if (!showSortControl) return courses;
-    // Newest-first is the baseline order; for recentlyViewed it also decides
-    // where never-opened courses land, since the visit sort is stable.
-    const newestFirst = [...courses].reverse();
-    if (sortOrder === "newest") return newestFirst;
+    // The courses arrive from Dynamo oldest-first, so the default order is
+    // simply the array as given — the courses added to the classroom first
+    // stay at the top.
+    if (sortOrder === "default") return courses;
+    if (sortOrder === "newest") return [...courses].reverse();
     if (sortOrder === "recentlyViewed") {
-      return newestFirst.sort((a, b) => compareCoursesByLastVisit(a, b, visits));
+      // Sorting the default order means never-opened courses stay in it,
+      // below the opened ones, since the visit sort is stable.
+      return [...courses].sort((a, b) => compareCoursesByLastVisit(a, b, visits));
     }
     return [...courses].sort((a, b) => compareCoursesBySortOrder(a, b, sortOrder));
   }, [courses, sortOrder, visits, showSortControl]);
@@ -232,6 +235,9 @@ function Courses({
           label: t("sort_by"),
           autoWidth: true,
           children: [/*#__PURE__*/_jsx(MenuItem, {
+            value: "default",
+            children: t("default")
+          }), /*#__PURE__*/_jsx(MenuItem, {
             value: "newest",
             children: t("newest")
           }), /*#__PURE__*/_jsx(MenuItem, {

package/dist/Lists/Courses/Courses.test.js

@@ -44,10 +44,46 @@ describe("Courses", () => {
     } = renderCourses();
     unmount();
   });
+  it("defaults to the order the courses arrive in, oldest added first", async () => {
+    // No stored preference — courses added to the classroom first stay at the
+    // top, in the order Dynamo sent them down.
+    const {
+      unmount
+    } = renderCourses({
+      showSortControl: true
+    });
+    const courseNames = await renderedCourseNames();
+    expect(courseNames).toEqual(props.courses.map(c => c.courseName));
+    unmount();
+  });
+  it("falls back to the default order when a stale preference is stored", async () => {
+    // The order was named "oldest" in 0.1.1418; a teacher who picked it then
+    // still has that in localStorage.
+    localStorage.setItem(CLASSROOM_COURSES_SORT_ORDER_KEY, "oldest");
+    const {
+      unmount
+    } = renderCourses({
+      showSortControl: true
+    });
+    const courseNames = await renderedCourseNames();
+    expect(courseNames).toEqual(props.courses.map(c => c.courseName));
+    unmount();
+  });
+  it("reverses the courses when the newest preference is stored", async () => {
+    localStorage.setItem(CLASSROOM_COURSES_SORT_ORDER_KEY, "newest");
+    const {
+      unmount
+    } = renderCourses({
+      showSortControl: true
+    });
+    const courseNames = await renderedCourseNames();
+    expect(courseNames).toEqual(props.courses.map(c => c.courseName).reverse());
+    unmount();
+  });
   it("puts recently viewed courses first when that preference is stored", async () => {
     localStorage.setItem(CLASSROOM_COURSES_SORT_ORDER_KEY, "recentlyViewed");
     // Courses 2, 3 and 5 are "English Basics", "Learn Greetings 2" and
-    // "English Basics 2" — none of which lead the default newest-first order.
+    // "English Basics 2" — none of which lead the default order.
     localStorage.setItem(COURSE_VISITS_KEY, JSON.stringify({
       2: 100,
       5: 300,
@@ -62,6 +98,21 @@ describe("Courses", () => {
     expect(courseNames.slice(0, 3)).toEqual(["English Basics 2", "Learn Greetings 2", "English Basics"]);
     unmount();
   });
+  it("leaves never-viewed courses in the default order, below the viewed ones", async () => {
+    localStorage.setItem(CLASSROOM_COURSES_SORT_ORDER_KEY, "recentlyViewed");
+    localStorage.setItem(COURSE_VISITS_KEY, JSON.stringify({
+      5: 300
+    }));
+    const {
+      unmount
+    } = renderCourses({
+      showSortControl: true
+    });
+    const courseNames = await renderedCourseNames();
+    const unviewed = props.courses.filter(c => c.courseId !== "5").map(c => c.courseName);
+    expect(courseNames).toEqual(["English Basics 2", ...unviewed]);
+    unmount();
+  });
   it("renders courses in the order the caller passed them when showSortControl is not set", async () => {
     // Caller (e.g. CoursesScreen) already filters/sorts before handing courses
     // to this component, so it must not silently reorder them.

package/dist/Live/WaitingRoom/WaitingRoom.js

@@ -41,6 +41,18 @@ export default function WaitingRoom({
   const handleOpenViewVideo = () => {
     setIsViewVideoOpen(true);
   };
+
+  // Fixed-footprint style for the lobby media image. Constraining both
+  // dimensions with object-fit keeps every source (roleplay/phrase list/topic
+  // picture — whether a landscape library photo or a square Image Builder card)
+  // at the same size, instead of a square card rendering much taller than a
+  // landscape image when only width is set.
+  const mediaImageStyle = {
+    width: 250,
+    height: 160,
+    objectFit: "cover",
+    borderRadius: "5%"
+  };
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsxs(Box, {
       sx: {
@@ -68,32 +80,20 @@ export default function WaitingRoom({
             },
             children: selectedRoleplay ? /*#__PURE__*/_jsx("img", {
               src: selectedRoleplay.picture,
-              width: 250,
               alt: "",
-              style: {
-                borderRadius: "5%"
-              }
+              style: mediaImageStyle
             }) : phraseListImage ? /*#__PURE__*/_jsx("img", {
               src: phraseListImage,
-              width: 250,
               alt: topicName || t("topic_image"),
-              style: {
-                borderRadius: "5%"
-              }
+              style: mediaImageStyle
             }) : topicImage ? /*#__PURE__*/_jsx("img", {
               src: topicImage,
-              width: 250,
               alt: "",
-              style: {
-                borderRadius: "5%"
-              }
+              style: mediaImageStyle
             }) : /*#__PURE__*/_jsx("img", {
               src: PlaceholderImages.topic,
-              width: 250,
               alt: "",
-              style: {
-                borderRadius: "5%"
-              }
+              style: mediaImageStyle
             })
           })
         }), /*#__PURE__*/_jsxs(Grid, {

package/dist/utils/courseSort.js

@@ -44,9 +44,16 @@ export const recordCourseVisit = (courseId, timestamp = Date.now()) => {
 // stable sort leaves them in whatever order the caller passed them in.
 export const compareCoursesByLastVisit = (a = {}, b = {}, visits = {}) => (visits[b.courseId] || 0) - (visits[a.courseId] || 0);
 
-// "newest" (most recently added to the classroom) has no comparator here —
-// there is no timestamp for classroom-course membership, only array position,
-// so callers handle it by reversing the already-ordered courses array instead.
+// Every order the classroom courses dropdown offers. Anything else — a stale
+// preference from an older release, or a hand-edited value — is treated as
+// "default" rather than leaving the dropdown showing a blank label.
+export const COURSE_SORT_ORDERS = ["default", "newest", "alphabetical", "recentlyChanged", "recentlyViewed"];
+export const normalizeCourseSortOrder = order => COURSE_SORT_ORDERS.includes(order) ? order : "default";
+
+// "default" and "newest" have no comparator here — there is no timestamp for
+// classroom-course membership, only array position. "default" is the order the
+// courses arrive in from Dynamo, so callers leave the array untouched; "newest"
+// is that same array reversed.
 // "recentlyViewed" needs the visits map, so it has its own comparator above.
 export const compareCoursesBySortOrder = (a = {}, b = {}, order) => {
   if (order === "alphabetical") {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nualang/nualang-ui-components",
-  "version": "0.1.1417",
+  "version": "0.1.1419",
   "type": "module",
   "main": "dist/index.js",
   "files": [