@nualang/nualang-ui-components 0.1.1350 → 0.1.1353

package/README.md

@@ -5,27 +5,27 @@ to `npm` and consumed from there by nualang web apps.
 
 ## Getting Started
 Clone this repository and then execute `npm install`. `npm start` will start
-[stoybook](https://storybook.js.org) and allow you to brrowse the available components.
+[storybook](https://storybook.js.org) and allow you to browse the available components.
 
 ## Develop
-```
+```bash
 npm start
 ```
 
 ## Create Local Package
 Compile and pack (This will create a '.tgz' file):
-```
+```bash
 npm run localpack
 ```
 
 Install package (Inside webapp):
 ```
-npm i ../ui-components/fathomtech-nualang-ui-components-0.1.XXX.tgz
+npm i ../ui-components/nualang-ui-components-0.1.XXX.tgz
 ```
 
 If webapp is caching previous versions (Add a character to the end of the .tgz, e.g 'a') and install again:
-```
-yarn add ../ui-components/fathomtech-nualang-ui-components-0.1.XXXa.tgz
+```bash
+yarn add ../ui-components/nualang-ui-components-0.1.XXXa.tgz
 ```
 
 ## Publish to npm
@@ -59,7 +59,23 @@ Check for any lint errors or warnings.
 Run the babel compiler to compile es6 to js.
 
 ### `npm run postversion`
-Publish a new version of the pacakage to npm. npm will complain
+Publish a new version of the package to npm. npm will complain
 
 ### `npm run chromatic`
-Publish a new version of the pacakage to https://www.chromatic.com/ 
+Publish a new version of the package to https://www.chromatic.com/ 
+
+## Testing & Coverage
+
+Run unit tests with Vitest in watch mode:
+
+```bash
+npm run vitest
+```
+
+To generate code coverage (uses V8 provider):
+
+```bash
+npm run test:coverage
+```
+
+Coverage reports will be written to the `coverage` directory. A text summary is printed to the console; an LCOV file (`coverage/lcov.info`) and a JSON report are also generated. This coverage step is intentionally not wired into CI — run it locally when you want to inspect or publish coverage results.

package/dist/Cards/Classroom/Classroom.js

@@ -3,7 +3,6 @@ import PropTypes from "prop-types";
 import { useInView } from "react-intersection-observer";
 import { Button, Box, Typography, IconButton, Menu, MenuItem, Tooltip, CardActions, CardActionArea, Divider, CircularProgress } from "@mui/material";
 import Skeleton from "@mui/material/Skeleton";
-import Rating from "@mui/material/Rating";
 import Group from "@mui/icons-material/Group";
 import ExitToApp from "@mui/icons-material/ExitToApp";
 import Add from "@mui/icons-material/Add";
@@ -12,7 +11,6 @@ import MoreVert from "@mui/icons-material/MoreVert";
 
 // components
 import MembersDialog from "../../Dialogs/Members/Members";
-import MembersList from "../../Lists/Members/Members";
 import { capitalize } from "../../utils/index";
 import PlaceholderImages from "../../utils/placeholder-images/index";
 import ProgressiveCardMedia from "../../Misc/ProgressiveCardMedia/ProgressiveCardMedia";
@@ -122,7 +120,6 @@ function ClassroomCard({
   handleLeaveClassroom,
   membersProps,
   getMemberDetails,
-  getMemberInfo,
   memberPlaceholderImageUrl,
   getClassroomMember,
   getClassroomMembers,
@@ -370,7 +367,6 @@ Classroom.propTypes = {
     forLang: PropTypes.string.isRequired,
     isMember: PropTypes.bool,
     isCreator: PropTypes.bool,
-    members: MembersList.propTypes,
     createdAt: PropTypes.number.isRequired,
     createdBy: PropTypes.string.isRequired,
     userImage: PropTypes.string

package/dist/Cards/Course/Course.js

@@ -21,7 +21,6 @@ import DeleteIcon from "@mui/icons-material/Delete";
 // components
 import MembersDialog from "../../Dialogs/Members/Members";
 import CourseOutlineDialog from "../../Dialogs/CourseOutline/CourseOutline";
-import MembersList from "../../Lists/Members/Members";
 import PlaceholderImages from "../../utils/placeholder-images/index";
 import { capitalize, formatNumberTotal } from "../../utils/index";
 import PlayArrowIcon from "@mui/icons-material/PlayArrow";
@@ -233,7 +232,6 @@ function CourseCard({
   selectable,
   selected,
   getMemberDetails,
-  getMemberInfo,
   memberPlaceholderImageUrl,
   getCourseSections,
   getCourseMember,
@@ -582,7 +580,6 @@ function CourseCard({
       isClassroomCreator: isClassroomCreator,
       isMember: isMember,
       isAdmin: isAdmin,
-      viewCourse: viewCourse,
       startCourse: startCourse,
       leaveCourse: leaveCourse,
       handleRemoveCourse: handleRemoveCourse,
@@ -603,7 +600,6 @@ function CourseCard({
       open: isMembersOpen,
       handleClose: handleCloseMembers,
       isCreator: isClassroomCreator ?? isCreator,
-      isCourseMember: true,
       members: membersQuery.isSuccess ? membersQuery.data.Items : [],
       ...membersProps
     }), /*#__PURE__*/_jsx(CourseOutlineDialog, {
@@ -644,7 +640,6 @@ MemoizedCourse.propTypes = {
   createdAt: PropTypes.number.isRequired,
   createdBy: PropTypes.string.isRequired,
   userImage: PropTypes.string,
-  members: PropTypes.arrayOf(MembersList.propTypes),
   sections: PropTypes.arrayOf({
     sectionId: PropTypes.string.isRequired,
     sectionName: PropTypes.string.isRequired,

package/dist/Dialogs/CreatePhraseGroupDialog/CreatePhraseGroupDialog.js

@@ -0,0 +1,143 @@
+import { useState } from "react";
+import TextField from "@mui/material/TextField";
+import Box from "@mui/material/Box";
+import Button from "@mui/material/Button";
+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";
+export default function CreatePhraseGroupDialog({
+  open,
+  handleClose,
+  handleCreate,
+  onCreated,
+  t = text => text,
+  fileSizeLimit,
+  verificationStatus
+}) {
+  const [name, setName] = useState("");
+  const [description, setDescription] = useState("");
+  const [isLoading, setIsLoading] = useState(false);
+  const [selectedImage, setSelectedImage] = useState({
+    image: "",
+    imageSelectionMethod: "default_image"
+  });
+  const handleImageSelection = event => {
+    const {
+      name,
+      value
+    } = event.target;
+    setSelectedImage(prev => ({
+      ...prev,
+      [name]: value
+    }));
+  };
+  const removeImage = () => {
+    setSelectedImage({
+      image: "",
+      imageSelectionMethod: "default_image"
+    });
+  };
+  const handleSubmit = async () => {
+    if (!name.trim()) return;
+    setIsLoading(true);
+    try {
+      const createdPhraseGroup = await handleCreate({
+        phraseGroupName: name.trim(),
+        description: description.trim()
+      });
+      resetAndClose();
+      if (onCreated && createdPhraseGroup) {
+        onCreated(createdPhraseGroup, selectedImage.image || null);
+      }
+    } catch (error) {
+      console.error("Failed to create phrase group:", error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+  const resetAndClose = () => {
+    setName("");
+    setDescription("");
+    setSelectedImage({
+      image: "",
+      imageSelectionMethod: "default_image"
+    });
+    handleClose();
+  };
+  return /*#__PURE__*/_jsxs(Dialog, {
+    open: open,
+    onClose: isLoading ? undefined : resetAndClose,
+    maxWidth: "sm",
+    fullWidth: true,
+    children: [/*#__PURE__*/_jsx(DialogTitle, {
+      children: t("create_phrase_group") || "Create Phrase List"
+    }), /*#__PURE__*/_jsx(DialogContent, {
+      children: /*#__PURE__*/_jsxs(Box, {
+        display: "flex",
+        flexDirection: "column",
+        gap: 2,
+        pt: 1,
+        children: [/*#__PURE__*/_jsx(TextField, {
+          label: t("phrase_group_name") || "Name",
+          value: name,
+          onChange: e => setName(e.target.value),
+          fullWidth: true,
+          autoFocus: true,
+          required: true,
+          disabled: isLoading,
+          inputProps: {
+            maxLength: 100
+          },
+          onKeyDown: e => e.key === "Enter" && handleSubmit()
+        }), /*#__PURE__*/_jsx(TextField, {
+          label: t("description") || "Description",
+          value: description,
+          onChange: e => setDescription(e.target.value),
+          fullWidth: true,
+          multiline: true,
+          rows: 3,
+          disabled: isLoading,
+          inputProps: {
+            maxLength: 300
+          }
+        }), /*#__PURE__*/_jsx(Grid, {
+          size: 12,
+          children: /*#__PURE__*/_jsx(ImageSelector, {
+            t: t,
+            name: "image",
+            value: selectedImage.image,
+            handleChange: handleImageSelection,
+            fileSizeLimit: fileSizeLimit,
+            removeImage: removeImage,
+            autoCrop: true,
+            autoSuggest: false,
+            selectedImage: selectedImage,
+            verificationStatus: verificationStatus
+          })
+        })]
+      })
+    }), /*#__PURE__*/_jsxs(DialogActions, {
+      children: [/*#__PURE__*/_jsx(Button, {
+        onClick: resetAndClose,
+        color: "primary",
+        disabled: isLoading,
+        children: t("cancel") || "Cancel"
+      }), /*#__PURE__*/_jsx(Button, {
+        onClick: handleSubmit,
+        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"
+      })]
+    })]
+  });
+}

package/dist/Dialogs/Feedback/FeedbackDialog.js

@@ -20,10 +20,7 @@ function FeedbackDialog({
   onSubmit,
   submitText,
   dialogTitle,
-  updateFeedback,
-  onChange,
-  initialFeedbackContent,
-  ...otherProps
+  initialFeedbackContent
 }) {
   const {
     classes

package/dist/Dialogs/GenerateDefinitions/GenerateDefinitions.js

@@ -0,0 +1,205 @@
+import { useState, useEffect } from "react";
+import ResponsiveDialog from "../ResponsiveDialog/ResponsiveDialog";
+import { AutoFixHigh } from "@mui/icons-material";
+import { Alert, Box, Card, Grid, LinearProgress, Typography } from "@mui/material";
+import NualaCreating from "../../Misc/NualaCreating/NualaCreating";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+function GenerateDefinitions({
+  t,
+  open,
+  handleClose,
+  selectedPhraseObjects,
+  makeChatGptApiRequest,
+  handleUpdatePhrase,
+  learnLang,
+  forLang,
+  siteLanguage,
+  difficulty
+}) {
+  const [isGenerating, setIsGenerating] = useState(false);
+  const [errorMessage, setErrorMessage] = useState(null);
+  const [generatedDefinitions, setGeneratedDefinitions] = useState([]);
+  const [isConfirming, setIsConfirming] = useState(false);
+  const hasResults = generatedDefinitions.length > 0;
+
+  // Auto-trigger generation when dialog opens
+  useEffect(() => {
+    if (open && selectedPhraseObjects.length > 0 && !hasResults && !isGenerating) {
+      handleGenerate();
+    }
+  }, [open]);
+  function validateResponse(results) {
+    if (!Array.isArray(results)) return false;
+    for (const item of results) {
+      if (!item || typeof item !== "object") return false;
+      if (!Array.isArray(item.definitions)) return false;
+      for (const def of item.definitions) {
+        if (typeof def !== "string" || def.trim() === "") return false;
+      }
+    }
+    return true;
+  }
+  const handleGenerate = async () => {
+    try {
+      setIsGenerating(true);
+      setErrorMessage(null);
+      const phrasesData = selectedPhraseObjects.map(p => ({
+        phraseId: p.phraseId,
+        phrase: p.phrase,
+        translations: p.translations || []
+      }));
+      const chatGptResponse = await makeChatGptApiRequest({
+        model: "gpt-4o",
+        promptKey: "generateDefinitions",
+        promptVariables: {
+          learnLang,
+          forLang,
+          siteLanguage,
+          difficulty,
+          phrases: phrasesData
+        }
+      });
+      const results = chatGptResponse.result;
+      if (!validateResponse(results)) {
+        throw new Error("Invalid AI response");
+      }
+      const merged = selectedPhraseObjects.map((original, index) => {
+        const generated = results.find(r => r.phraseId === original.phraseId) || results[index];
+        return {
+          phraseId: original.phraseId,
+          phrase: original.phrase,
+          oldDefinitions: original.definitions || [],
+          newDefinitions: generated ? generated.definitions : []
+        };
+      });
+      setGeneratedDefinitions(merged);
+    } catch (error) {
+      console.error(error);
+      setErrorMessage(t("generate_defintions_error"));
+    } finally {
+      setIsGenerating(false);
+    }
+  };
+  const handleConfirm = async () => {
+    try {
+      setIsConfirming(true);
+      for (const item of generatedDefinitions) {
+        const originalPhrase = selectedPhraseObjects.find(p => p.phraseId === item.phraseId);
+        await handleUpdatePhrase(item.phraseId, {
+          phrase: originalPhrase?.phrase || item.phrase,
+          translations: originalPhrase?.translations || [],
+          definitions: item.newDefinitions
+        });
+      }
+      setGeneratedDefinitions([]);
+      setIsConfirming(false);
+      handleClose();
+    } catch (error) {
+      console.error(error);
+      setIsConfirming(false);
+      setErrorMessage(t("save_definitions_error"));
+    }
+  };
+  const handleCancel = () => {
+    handleClose();
+    setGeneratedDefinitions([]);
+    setErrorMessage(null);
+  };
+  const handleDialogClose = () => {
+    setGeneratedDefinitions([]);
+    setErrorMessage(null);
+    handleClose();
+  };
+  return /*#__PURE__*/_jsxs(ResponsiveDialog, {
+    open: open,
+    closeText: hasResults ? t("cancel") : t("close"),
+    handleClose: hasResults ? handleCancel : handleDialogClose,
+    handleSubmit: hasResults ? handleConfirm : handleGenerate,
+    submitText: hasResults ? t("confirm") : t("generate_definitions"),
+    dialogTitle: isGenerating ? t("generating_definitions") : t("generate_definitions"),
+    isSubmitDisabled: isGenerating || isConfirming,
+    isExperimentalFeature: true,
+    startIcon: /*#__PURE__*/_jsx(AutoFixHigh, {}),
+    children: [/*#__PURE__*/_jsx(Grid, {
+      textAlign: "center",
+      sx: {
+        ...(!isGenerating && {
+          display: "none"
+        })
+      },
+      mx: 2,
+      size: 12,
+      children: /*#__PURE__*/_jsx(NualaCreating, {})
+    }), /*#__PURE__*/_jsx(Grid, {
+      sx: {
+        ...(!isGenerating && {
+          display: "none"
+        })
+      },
+      mt: 2,
+      size: 12,
+      children: /*#__PURE__*/_jsx(LinearProgress, {})
+    }), !isGenerating && /*#__PURE__*/_jsxs(_Fragment, {
+      children: [generatedDefinitions.length === 0 && !errorMessage && /*#__PURE__*/_jsx(Typography, {
+        variant: "body2",
+        color: "text.secondary",
+        children: t("generate_definitions_info")
+      }), hasResults && /*#__PURE__*/_jsxs(_Fragment, {
+        children: [/*#__PURE__*/_jsx(Typography, {
+          sx: {
+            mb: 1
+          },
+          children: t("review_generated_definitions")
+        }), generatedDefinitions.map(item => /*#__PURE__*/_jsxs(Card, {
+          variant: "outlined",
+          sx: {
+            mb: 2,
+            p: 2
+          },
+          children: [/*#__PURE__*/_jsx(Typography, {
+            variant: "subtitle1",
+            fontWeight: "bold",
+            children: item.phrase
+          }), item.oldDefinitions.length > 0 && /*#__PURE__*/_jsxs(Box, {
+            sx: {
+              mt: 1
+            },
+            children: [/*#__PURE__*/_jsxs(Typography, {
+              variant: "caption",
+              color: "text.secondary",
+              children: [t("current_definitions"), ":"]
+            }), item.oldDefinitions.map((def, i) => /*#__PURE__*/_jsx(Typography, {
+              variant: "body2",
+              sx: {
+                textDecoration: "line-through",
+                opacity: 0.6
+              },
+              children: def
+            }, i))]
+          }), /*#__PURE__*/_jsxs(Box, {
+            sx: {
+              mt: 1
+            },
+            children: [/*#__PURE__*/_jsxs(Typography, {
+              variant: "caption",
+              color: "success.main",
+              children: [t("new_definitions"), ":"]
+            }), item.newDefinitions.map((def, i) => /*#__PURE__*/_jsx(Typography, {
+              variant: "body2",
+              color: "success.main",
+              children: def
+            }, i))]
+          })]
+        }, item.phraseId))]
+      }), errorMessage && /*#__PURE__*/_jsx(Grid, {
+        mt: 2,
+        size: 12,
+        children: /*#__PURE__*/_jsx(Alert, {
+          severity: "warning",
+          children: errorMessage
+        })
+      })]
+    })]
+  });
+}
+export default GenerateDefinitions;

package/dist/Dialogs/GenerateDefinitions/package.json

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

package/dist/Dialogs/GeneratePhrases/GeneratePhrases.js

@@ -1,7 +1,7 @@
-import { useState } from "react";
+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 } from "@mui/material";
+import { Alert, Grid, InputAdornment, LinearProgress, MenuItem, Slider, TextField, Tooltip, Typography, ListItem, ListItemText, useMediaQuery, FormControlLabel, Switch, Box } from "@mui/material";
 import { useTheme } from "@mui/material/styles";
 import { Link } from "react-router";
 import InfoIcon from "@mui/icons-material/Info";
@@ -115,6 +115,7 @@ function GeneratePhrases({
   const [errorMessage, setErrorMessage] = useState(null);
   const [phraseType, setPhraseType] = useState("words");
   const [generatedPhrases, setGeneratedPhrases] = useState([]);
+  const [generateDefinitions, setGenerateDefinitions] = useState(true);
   const isPhrases = currentPhrases && currentPhrases.length > 0;
   const phrases = isPhrases ? currentPhrases.map(({
     phrase,
@@ -188,7 +189,8 @@ function GeneratePhrases({
           difficulty,
           phraseType,
           isPhrases,
-          phrases
+          phrases,
+          generateDefinitions
         }
       });
       const phrasesArray = chatGptResponse.result;
@@ -217,6 +219,9 @@ function GeneratePhrases({
   const handleCancel = () => {
     setGeneratedPhrases([]);
   };
+  useEffect(() => {
+    setGenerateDefinitions(phraseType === 'words');
+  }, [phraseType]);
   return /*#__PURE__*/_jsxs(ResponsiveDialog, {
     open: open,
     closeText: generatedPhrases.length > 0 ? t("cancel") : t("close"),
@@ -353,6 +358,31 @@ function GeneratePhrases({
             min: 4,
             max: 16
           })]
+        }), /*#__PURE__*/_jsxs(Grid, {
+          size: 12,
+          children: [/*#__PURE__*/_jsx(Typography, {
+            children: /*#__PURE__*/_jsx(Box, {
+              children: t("generate_definitions")
+            })
+          }), /*#__PURE__*/_jsx(FormControlLabel, {
+            label: "",
+            control: /*#__PURE__*/_jsx(_Fragment, {
+              children: /*#__PURE__*/_jsx("span", {
+                children: /*#__PURE__*/_jsx(Switch, {
+                  checked: generateDefinitions,
+                  onChange: e => {
+                    setGenerateDefinitions(e.target.checked);
+                  },
+                  inputProps: {
+                    "aria-label": "controlled"
+                  },
+                  sx: {
+                    marginLeft: 0.5
+                  }
+                })
+              })
+            })
+          })]
         })]
       }), generatedPhrases.length > 0 && /*#__PURE__*/_jsxs(_Fragment, {
         children: [/*#__PURE__*/_jsx(Typography, {