@nualang/nualang-ui-components 0.1.1354 → 0.1.1356

package/dist/Dialogs/CreatePhraseGroupDialog/CreatePhraseGroupDialog.js

@@ -6,7 +6,6 @@ import Dialog from "@mui/material/Dialog";
 import DialogTitle from "@mui/material/DialogTitle";
 import DialogContent from "@mui/material/DialogContent";
 import DialogActions from "@mui/material/DialogActions";
-import CircularProgress from "@mui/material/CircularProgress";
 import Grid from "@mui/material/Grid";
 import ImageSelector from "../../Forms/ImageSelector/ImageSelector";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -132,11 +131,7 @@ export default function CreatePhraseGroupDialog({
         color: "primary",
         variant: "contained",
         disabled: !name.trim() || isLoading,
-        startIcon: isLoading ? /*#__PURE__*/_jsx(CircularProgress, {
-          size: 16,
-          color: "inherit"
-        }) : null,
-        children: isLoading ? t("creating") || "Creating..." : t("create") || "Create"
+        children: t("create") || "Create"
       })]
     })]
   });

package/dist/Dialogs/GeneratePhrases/GeneratePhrases.js

@@ -1,12 +1,13 @@
 import { useState, useEffect } from "react";
 import ResponsiveDialog from "../ResponsiveDialog/ResponsiveDialog";
 import { AutoFixHigh } from "@mui/icons-material";
-import { Alert, Grid, InputAdornment, LinearProgress, MenuItem, Slider, TextField, Tooltip, Typography, ListItem, ListItemText, useMediaQuery, FormControlLabel, Switch, Box } from "@mui/material";
+import { Alert, Grid, InputAdornment, LinearProgress, MenuItem, Slider, TextField, Tooltip, Typography, ListItem, useMediaQuery, FormControlLabel, Switch, Box, List } from "@mui/material";
 import { useTheme } from "@mui/material/styles";
 import { Link } from "react-router";
 import InfoIcon from "@mui/icons-material/Info";
 import NualaCreating from "../../Misc/NualaCreating/NualaCreating";
 import InputHelper from "../../Forms/InputHelper/InputHelper";
+import PhraseDisplay from "../../Misc/PhraseDisplay/PhraseDisplay";
 import { makeStyles } from "tss-react/mui";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const useStyles = makeStyles()(theme => ({
@@ -19,80 +20,43 @@ const useStyles = makeStyles()(theme => ({
     width: "60%",
     wordBreak: "break-word",
     overflowWrap: "break-word"
-  },
-  avatar: {
-    cursor: "pointer",
-    margin: theme.spacing()
-  },
-  avatarNoClick: {
-    margin: theme.spacing()
   }
 }));
 function Phrase({
   alternativeVersions,
   translations,
   definitions,
-  phrase
+  phrase,
+  t
 }) {
   const theme = useTheme();
   const {
     classes
   } = useStyles();
   const isLargeScreen = useMediaQuery(theme.breakpoints.up("sm"));
-  const primary = `${phrase}${Array.isArray(alternativeVersions) && alternativeVersions.length ? " - " : ""}${(alternativeVersions || []).join(", ")}`;
-
-  // Show translations first, then definitions (if any) on a new line.
-  const secondaryParts = [];
-  if (Array.isArray(translations) && translations.length) {
-    secondaryParts.push((translations || []).join(", "));
-  }
-  if (Array.isArray(definitions) && definitions.length) {
-    secondaryParts.push((definitions || []).join(", "));
-  }
-  const secondary = secondaryParts.join("\n");
-  console.log({
-    primary,
-    secondary
-  });
-  console.log("Phrase render", {
-    phrase,
-    translations,
-    definitions,
-    alternativeVersions
-  });
-  return /*#__PURE__*/_jsx(ListItem, {
-    "data-cy": "phrase-list-item",
-    children: isLargeScreen ? /*#__PURE__*/_jsx(Grid, {
-      container: true,
-      sx: {
-        width: "100%"
-      },
-      className: classes.phraseText,
-      children: /*#__PURE__*/_jsx(ListItemText, {
-        className: classes.phrases,
-        primary: primary,
-        secondary: secondary,
-        secondaryTypographyProps: {
-          style: {
-            whiteSpace: "pre-line"
-          }
-        }
-      })
-    }) : /*#__PURE__*/_jsx(Grid, {
-      container: true,
+  return /*#__PURE__*/_jsx(List, {
+    dense: true,
+    disablePadding: true,
+    children: /*#__PURE__*/_jsx(ListItem, {
+      "data-cy": "phrase-list-item",
+      divider: true,
       sx: {
-        width: "100%"
+        flexDirection: "column",
+        alignItems: "flex-start",
+        py: 2
       },
-      className: classes.phraseTextSmall,
-      children: /*#__PURE__*/_jsx(ListItemText, {
-        className: classes.phrases,
-        primary: primary,
-        secondary: secondary,
-        secondaryTypographyProps: {
-          style: {
-            whiteSpace: "pre-line"
-          }
-        }
+      children: /*#__PURE__*/_jsx(Box, {
+        className: isLargeScreen ? classes.phraseText : classes.phraseTextSmall,
+        children: /*#__PURE__*/_jsx(PhraseDisplay, {
+          phrase: phrase,
+          translations: translations,
+          definitions: definitions,
+          alternativeVersions: alternativeVersions,
+          t: t,
+          variant: "body2",
+          showIcons: true,
+          showImage: false
+        })
       })
     })
   });
@@ -388,7 +352,8 @@ function GeneratePhrases({
         children: [/*#__PURE__*/_jsx(Typography, {
           children: t("generated_phrases")
         }), generatedPhrases.map((phrase, index) => /*#__PURE__*/_jsx(Phrase, {
-          ...phrase
+          ...phrase,
+          t: t
         }, index))]
       }), errorMessage && /*#__PURE__*/_jsx(Grid, {
         mt: 2,

package/dist/Editors/PhraseList/PhraseList.js

@@ -106,12 +106,6 @@ function PhraseList({
   const handleChangeTab = (event, newValue) => {
     setTabValue(newValue);
   };
-  useEffect(() => {
-    if (!isSmallScreen && tabValue === 2) {
-      setTabValue(0);
-    }
-  }, [isSmallScreen]); // Only run when screen changes
-
   const updatePhrases = async phrases => {
     try {
       handleUpdatePhrases(courseId, sectionId, topicId, phrases);
@@ -208,8 +202,9 @@ function PhraseList({
           })
         })]
       }), tabValue === 0 ? /*#__PURE__*/_jsx(Box, {
+        className: hidden ? classes.paneFull : classes.pane,
         sx: {
-          minHeight: '100vh'
+          overflowY: "auto"
         },
         children: /*#__PURE__*/_jsx(PhrasesEditor, {
           t: t,
@@ -247,6 +242,9 @@ function PhraseList({
         })
       }) : null, tabValue === 1 ? /*#__PURE__*/_jsx(Box, {
         className: hidden ? classes.paneFull : classes.pane,
+        sx: {
+          overflowY: "auto"
+        },
         children: /*#__PURE__*/_jsx(UpdatePhraseList, {
           t: t,
           touched: touched,

package/dist/Editors/Phrases/Phrases.js

@@ -556,6 +556,9 @@ function PhrasesEditor(props) {
             variant: "contained",
             endIcon: /*#__PURE__*/_jsx(AutoFixHighIcon, {}),
             size: "small",
+            sx: {
+              border: '1.5px solid transparent'
+            },
             children: t("generate_phrases")
           }), isCreator && mode === Modes.NORMAL && /*#__PURE__*/_jsx(Button, {
             className: classes.actionButton,
@@ -565,6 +568,9 @@ function PhrasesEditor(props) {
             variant: "contained",
             endIcon: /*#__PURE__*/_jsx(AddIcon, {}),
             size: "small",
+            sx: {
+              border: '1.5px solid transparent'
+            },
             children: t("add_phrase")
           }), /*#__PURE__*/_jsx(DefaultButton, {
             className: classes.actionButton,

package/dist/Exercises/PhraseGroup/PhraseGroup.js

@@ -117,6 +117,7 @@ function PhraseGroup({
   const activePhrases = phraseGroup?.phrases || phrases;
   const isPhrasesEmpty = !activePhrases.length;
   const isListeningDisabled = isPhrasesEmpty || learnLang === "irish" && activePhrases.filter(p => p?.voices?.length > 0).length === 0;
+  const isDefinitionsEmpty = activePhrases.every(p => !p.definitions || p.definitions.length === 0);
   const gamesHidden = {
     translation: hiddenPhraseGroupGames["translation"] || false,
     listening: isListeningDisabled || hiddenPhraseGroupGames["listening"] || false,
@@ -218,6 +219,7 @@ function PhraseGroup({
               phraseGroupCompletions: phraseGroupCompletions,
               isCreator: isCreator,
               isPhrasesEmpty: isPhrasesEmpty,
+              isDefinitionsEmpty: isDefinitionsEmpty,
               hiddenWordBankGames: hiddenWordBankPhraseGroupGames,
               isKeyboardHiddenGames: isKeyboardHiddenPhraseGroupGames,
               onToggleGameVisibility: gameId => handleTogglePhraseGroupGameVisibility && handleTogglePhraseGroupGameVisibility(phraseGroup, gameId),

package/dist/Exercises/PhraseGroup/PhraseGroupGameOptions/PhraseGroupGame/PhraseGroupGame.js

@@ -1,6 +1,6 @@
 import Typography from "@mui/material/Typography";
 import Avatar from "@mui/material/Avatar";
-import { Card, ListItemAvatar, ListItemText, ListItem, Badge, IconButton, Tooltip } from "@mui/material";
+import { Card, ListItemAvatar, ListItemText, ListItemButton, Badge, IconButton, Tooltip } from "@mui/material";
 import { makeStyles } from "tss-react/mui";
 import Person from "@mui/icons-material/Person";
 import Done from "@mui/icons-material/Done";
@@ -154,6 +154,7 @@ function PhraseGroupGame({
   totalPhrases,
   isGameHidden,
   isPhrasesEmpty,
+  isDefinitionsEmpty,
   isCreator,
   isKeyboardHidden,
   isWordBankHidden,
@@ -167,92 +168,111 @@ function PhraseGroupGame({
   const theme = useTheme();
   const hasKeyboard = gameId === "translation";
   const hasWordBank = gameId === "translation" || gameId === "listening";
-  return /*#__PURE__*/_jsxs(ListItem, {
-    alignItems: "center",
-    disabled: isPhrasesEmpty || isGameHidden && !isCreator,
-    onClick: () => {
-      const canPlay = !isPhrasesEmpty && (!isGameHidden || isCreator);
-      if (canPlay) {
-        handleSelectPhraseGroupGame(gameId);
-      }
-    },
-    button: true,
-    divider: true,
-    classes: {
-      selected: classes.listItemSelected
-    },
-    id: `phrase-group-game-${gameId}`,
-    component: Card,
-    sx: {
-      mb: 2,
-      ml: 2,
-      mr: 2,
-      borderRadius: "1.5em",
-      border: "2px solid transparent",
-      "&:hover": {
-        border: `2px solid ${theme.palette.primary.main}`,
-        backgroundColor: "transparent"
-      },
-      "&:focus": {
-        backgroundColor: "transparent"
-      }
-    },
-    children: [/*#__PURE__*/_jsx(ListItemAvatar, {
-      children: GameIcon ? /*#__PURE__*/_jsx(Avatar, {
-        variant: "square",
-        className: classes.avatar,
-        alt: "",
-        children: /*#__PURE__*/_jsx(GameIcon, {})
-      }) : /*#__PURE__*/_jsx(Avatar, {
-        sx: theme => ({
-          backgroundColor: theme.palette.mode === "dark" ? "white" : "",
-          color: theme.palette.mode === "dark" ? theme.palette.background.default : ""
-        }),
-        alt: "",
-        children: /*#__PURE__*/_jsx(Person, {
-          fontSize: "large"
-        })
-      })
-    }), /*#__PURE__*/_jsx(ListItemText, {
-      primary: /*#__PURE__*/_jsx(Typography, {
+  const isDefinitionsDisabled = gameId === "meaning" && isDefinitionsEmpty && !isPhrasesEmpty;
+  const isDisabled = isPhrasesEmpty || isDefinitionsDisabled || isGameHidden && !isCreator;
+  const disabledTooltip = isPhrasesEmpty ? t("topic_no_phrases") : isDefinitionsDisabled ? t("meaning_no_definitions") : "";
+  return /*#__PURE__*/_jsx(Tooltip, {
+    title: disabledTooltip,
+    placement: "top",
+    children: /*#__PURE__*/_jsx("span", {
+      children: /*#__PURE__*/_jsxs(ListItemButton, {
+        alignItems: "center",
+        disabled: isDisabled,
+        onClick: () => {
+          const canPlay = !isPhrasesEmpty && !isDefinitionsDisabled && (!isGameHidden || isCreator);
+          if (canPlay) {
+            handleSelectPhraseGroupGame(gameId);
+          }
+        },
+        divider: true,
+        classes: {
+          selected: classes.listItemSelected
+        },
+        id: `phrase-group-game-${gameId}`,
+        component: Card,
         sx: {
-          fontWeight: "bold"
+          mb: 2,
+          ml: 2,
+          mr: 2,
+          borderRadius: "1.5em",
+          border: "2px solid transparent",
+          "&:hover": {
+            border: `2px solid ${theme.palette.primary.main}`,
+            backgroundColor: "transparent"
+          },
+          "&:focus": {
+            backgroundColor: "transparent"
+          },
+          "&.Mui-disabled": {
+            opacity: 0.6,
+            cursor: "not-allowed",
+            pointerEvents: "auto",
+            backgroundColor: theme.palette.action.disabledBackground,
+            filter: "grayscale(30%)",
+            border: `2px solid ${theme.palette.action.disabledBackground}`,
+            "&:hover": {
+              border: `2px solid ${theme.palette.action.disabledBackground}`
+            }
+          }
         },
-        component: "h3",
-        children: gameName
-      }),
-      secondary: /*#__PURE__*/_jsx(Typography, {
-        component: "p",
-        variant: "body2",
-        color: "textSecondary",
-        children: gameDescription
+        children: [/*#__PURE__*/_jsx(ListItemAvatar, {
+          children: GameIcon ? /*#__PURE__*/_jsx(Avatar, {
+            variant: "square",
+            className: classes.avatar,
+            alt: "",
+            children: /*#__PURE__*/_jsx(GameIcon, {})
+          }) : /*#__PURE__*/_jsx(Avatar, {
+            sx: theme => ({
+              backgroundColor: theme.palette.mode === "dark" ? "white" : "",
+              color: theme.palette.mode === "dark" ? theme.palette.background.default : ""
+            }),
+            alt: "",
+            children: /*#__PURE__*/_jsx(Person, {
+              fontSize: "large"
+            })
+          })
+        }), /*#__PURE__*/_jsx(ListItemText, {
+          primary: /*#__PURE__*/_jsx(Typography, {
+            sx: {
+              fontWeight: "bold"
+            },
+            component: "h3",
+            children: gameName
+          }),
+          secondary: /*#__PURE__*/_jsx(Typography, {
+            component: "p",
+            variant: "body2",
+            color: "textSecondary",
+            children: gameDescription
+          })
+        }), !isCreator && /*#__PURE__*/_jsxs(_Fragment, {
+          children: [/*#__PURE__*/_jsx(InProgressBadge, {
+            classes: classes,
+            remainingQuestions: remainingQuestions,
+            totalPhrases: totalPhrases,
+            t: t,
+            gameName: gameName
+          }), /*#__PURE__*/_jsx(ProgressBadge, {
+            classes: classes,
+            gameId: gameId,
+            completions: phraseGroupCompletions,
+            t: t,
+            gameName: gameName
+          })]
+        }), isCreator && /*#__PURE__*/_jsx(CreatorActions, {
+          t: t,
+          gameId: gameId,
+          hasKeyboard: hasKeyboard,
+          hasWordBank: hasWordBank,
+          isGameHidden: isGameHidden,
+          isKeyboardHidden: isKeyboardHidden,
+          isWordBankHidden: isWordBankHidden,
+          onToggleVisibility: onToggleVisibility,
+          onToggleKeyboard: onToggleKeyboard,
+          onToggleWordBank: onToggleWordBank
+        })]
       })
-    }), !isCreator && /*#__PURE__*/_jsxs(_Fragment, {
-      children: [/*#__PURE__*/_jsx(InProgressBadge, {
-        classes: classes,
-        remainingQuestions: remainingQuestions,
-        totalPhrases: totalPhrases,
-        t: t,
-        gameName: gameName
-      }), /*#__PURE__*/_jsx(ProgressBadge, {
-        classes: classes,
-        gameId: gameId,
-        completions: phraseGroupCompletions,
-        t: t,
-        gameName: gameName
-      })]
-    }), isCreator && /*#__PURE__*/_jsx(CreatorActions, {
-      t: t,
-      gameId: gameId,
-      hasKeyboard: hasKeyboard,
-      hasWordBank: hasWordBank,
-      isGameHidden: isGameHidden,
-      isKeyboardHidden: isKeyboardHidden,
-      isWordBankHidden: isWordBankHidden,
-      onToggleVisibility: onToggleVisibility,
-      onToggleKeyboard: onToggleKeyboard,
-      onToggleWordBank: onToggleWordBank
-    })]
+    })
   });
 }
 PhraseGroupGame.propTypes = {};

package/dist/Exercises/PhraseGroup/PhraseGroupGameOptions/PhraseGroupGames.js

@@ -11,6 +11,7 @@ function PhraseGroupGames({
   phraseGroupCompletions,
   isCreator,
   isPhrasesEmpty,
+  isDefinitionsEmpty,
   hiddenWordBankGames = {},
   isKeyboardHiddenGames = {},
   onToggleGameVisibility,
@@ -46,6 +47,7 @@ function PhraseGroupGames({
         phraseGroupCompletions: phraseGroupCompletions,
         isGameHidden: gamesHidden[game.gameId],
         isPhrasesEmpty: isPhrasesEmpty,
+        isDefinitionsEmpty: isDefinitionsEmpty,
         isCreator: isCreator,
         isKeyboardHidden: isKeyboardHiddenGames[game.gameId],
         isWordBankHidden: hiddenWordBankGames[game.gameId],

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

@@ -1,9 +1,10 @@
 import { useState } from "react";
 import PlaceholderImages from "../../../utils/placeholder-images/index";
-import { Typography, Box, Button, List, ListItem, ListItemAvatar, ListItemText, Avatar } from "@mui/material";
+import { Typography, Box, Button, List, ListItem } from "@mui/material";
 import ListAltIcon from "@mui/icons-material/ListAlt";
 import ResponsiveDialog from "../../../Dialogs/ResponsiveDialog/ResponsiveDialog";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import PhraseDisplay from "../../../Misc/PhraseDisplay/PhraseDisplay";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 function PhrasesPreview({
   t,
   phrases = []
@@ -31,39 +32,28 @@ function PhrasesPreview({
       children: /*#__PURE__*/_jsx(List, {
         dense: true,
         disablePadding: true,
-        children: phrases.map((phrase, idx) => /*#__PURE__*/_jsxs(ListItem, {
-          divider: true,
-          sx: {
-            py: 1
-          },
-          children: [phrase.picture && /*#__PURE__*/_jsx(ListItemAvatar, {
+        children: phrases.map((phrase, idx) => {
+          const phraseText = phrase.phrase || phrase.learnLangPhrase || "";
+          const translations = phrase.translations || (phrase.forLangPhrase ? [phrase.forLangPhrase] : phrase.translation ? [phrase.translation] : []);
+          const definitions = phrase.definitions || [];
+          return /*#__PURE__*/_jsx(ListItem, {
+            divider: true,
             sx: {
-              minWidth: 44
+              py: 2
             },
-            children: /*#__PURE__*/_jsx(Avatar, {
-              src: phrase.picture,
-              variant: "rounded",
-              alt: "",
-              sx: {
-                width: 36,
-                height: 36
-              }
-            })
-          }), /*#__PURE__*/_jsx(ListItemText, {
-            primary: /*#__PURE__*/_jsx(Typography, {
-              variant: "body2",
-              sx: {
-                fontWeight: 500
-              },
-              children: phrase.phrase || phrase.learnLangPhrase || ""
-            }),
-            secondary: phrase.translations?.[0] || phrase.forLangPhrase || phrase.translation ? /*#__PURE__*/_jsx(Typography, {
+            children: /*#__PURE__*/_jsx(PhraseDisplay, {
+              phrase: phraseText,
+              translations: translations,
+              definitions: definitions,
+              alternativeVersions: phrase.alternativeVersions || [],
+              picture: phrase.image || "",
+              t: t,
               variant: "caption",
-              color: "textSecondary",
-              children: phrase.translations?.[0] || phrase.forLangPhrase || phrase.translation
-            }) : null
-          })]
-        }, phrase.phraseId || idx))
+              showIcons: true,
+              showImage: true
+            })
+          }, phrase.phraseId || idx);
+        })
       })
     })]
   });

package/dist/Lists/Phrases/Phrases.js

@@ -591,17 +591,22 @@ function PhraseList({
               disabled: selectedPhrases.length === 0,
               variant: "contained",
               color: "primary",
+              size: "small",
               onClick: () => handleDeletePhrases(),
               startIcon: isLargeScreen ? /*#__PURE__*/_jsx(DeleteIcon, {}) : null,
               className: classes.actionButton,
               style: {
                 marginLeft: "10px"
               },
+              sx: {
+                border: '1.5px solid transparent'
+              },
               children: isLargeScreen ? t("Remove Phrases") : /*#__PURE__*/_jsx(DeleteIcon, {})
             }), /*#__PURE__*/_jsx(Button, {
               disabled: selectedPhrases.length === 0,
               variant: "contained",
               color: "secondary",
+              size: "small",
               className: classes.actionButton,
               "aria-label": t("generate_definitions"),
               onClick: () => setIsGenerateDefinitionsOpen(true),
@@ -609,6 +614,9 @@ function PhraseList({
               style: {
                 marginLeft: "10px"
               },
+              sx: {
+                border: '1.5px solid transparent'
+              },
               children: isLargeScreen ? t("generate_definitions") : /*#__PURE__*/_jsx(AutoFixHighIcon, {})
             })]
           })]
@@ -701,6 +709,7 @@ function PhraseList({
           }), /*#__PURE__*/_jsx(Button, {
             variant: "contained",
             color: "primary",
+            size: "small",
             disabled: selectedPhrases.length === 0,
             onClick: () => handleDeletePhrases(),
             startIcon: isLargeScreen ? /*#__PURE__*/_jsx(DeleteIcon, {}) : null,
@@ -708,10 +717,14 @@ function PhraseList({
               marginLeft: "10px"
             },
             className: classes.actionButton,
+            sx: {
+              border: '1.5px solid transparent'
+            },
             children: isLargeScreen ? t("Remove Phrases") : /*#__PURE__*/_jsx(DeleteIcon, {})
           }), /*#__PURE__*/_jsx(Button, {
             variant: "contained",
             color: "secondary",
+            size: "small",
             className: classes.actionButton,
             disabled: selectedPhrases.length === 0,
             "aria-label": t("generate_definitions"),
@@ -720,6 +733,9 @@ function PhraseList({
             style: {
               marginLeft: "10px"
             },
+            sx: {
+              border: '1.5px solid transparent'
+            },
             children: isLargeScreen ? t("generate_definitions") : /*#__PURE__*/_jsx(AutoFixHighIcon, {})
           })]
         })]