@nualang/nualang-ui-components 0.1.1137 → 0.1.1139

package/dist/Dialogs/GenerateRoleplay/GenerateRoleplay.js

@@ -161,8 +161,8 @@ function GenerateRoleplayDialog({
       setGeneratedRoleplay([]);
       setErrorMessage("");
       let response;
-      const prompt = usePdfContext ? `Create an informative conversation between 2 people ${values?.actor1?.name && values?.actor2?.name ? `'${values.actor1.name}' and '${values.actor2.name}' ` : ""} about the topic '${values.roleplayTopic}' in the language ${learnLang}.${values.roleplayDifficulty ? ` The conversation should be ${i18nLanguage === "en-US" ? "ACTFL" : "CEFR"} level '${t(values.roleplayDifficulty)}.'` : ""} Return the conversation inside an array, each text in the conversation should be inside an object in the array. Each object should have the keys actor and text. If the text belongs to person 1 then the key actor should equal to 1 else it should equal to 2. The key text should equal to the text in the conversation. Your response should be in JSON.` : `Create a conversation between 2 people ${values?.actor1?.name && values?.actor2?.name ? `'${values.actor1.name}' and '${values.actor2.name}' ` : ""}about the topic '${values.roleplayTopic}' in the language ${learnLang}.${values.roleplayDifficulty ? ` The conversation should be ${i18nLanguage === "en-US" ? "ACTFL" : "CEFR"} level '${t(values.roleplayDifficulty)}.'` : ""} Return the conversation inside an array, each text in the conversation should be inside an object in the array. Each object should have the keys actor and text. If the text belongs to person 1 then the key actor should equal to 1 else it should equal to 2. The key text should equal to the text in the conversation. Your response should be in JSON`;
-      const promptWithQuestions = usePdfContext ? `Create an informative conversation between 2 people ${values?.actor1?.name && values?.actor2?.name ? `'${values.actor1.name}' and '${values.actor2.name}' ` : ""} about the topic '${values.roleplayTopic}' in the language ${learnLang}.${values.roleplayDifficulty ? ` The conversation should be ${i18nLanguage === "en-US" ? "ACTFL" : "CEFR"} level '${t(values.roleplayDifficulty)}.'` : ""} The conversation should be returned inside a single array along with three comprehension questions related to the conversation. Each piece of dialogue and each question should be represented as an object in the array. For dialogue, the objects should have the keys 'actor' and 'text'. The 'actor' key should be set to 1 if the dialogue is spoken by the first actor, and 2 if it is spoken by the second actor. The 'text' key should be set to the dialogue text spoken by that actor. For questions, the objects should have the keys 'question' and 'answers'. The 'question' key should be set to the text of the question being asked. The 'answers' key should be an array of three objects, each representing a different answer to the question where only one is correct and two are incorrect. The objects in the 'answers' array should have the keys 'text', 'correct' and 'type'. The 'text' key should contain the answer text, 'correct' should be true for the correct answer and false for incorrect ones, and 'type' should always be equal to 'multichoice'. The entire output must be in a single JSON array without separating the dialogue and questions into different arrays.` : `Create a conversation between 2 people ${values?.actor1?.name && values?.actor2?.name ? `'${values.actor1.name}' and '${values.actor2.name}' ` : ""}about the topic '${values.roleplayTopic}' in the language ${learnLang}.${values.roleplayDifficulty ? ` The conversation should be ${i18nLanguage === "en-US" ? "ACTFL" : "CEFR"} level '${t(values.roleplayDifficulty)}.'` : ""} The conversation should be returned inside a single array along with three comprehension questions related to the conversation. Each piece of dialogue and each question should be represented as an object in the array. For dialogue, the objects should have the keys 'actor' and 'text'. The 'actor' key should be set to 1 if the dialogue is spoken by the first actor, and 2 if it is spoken by the second actor. The 'text' key should be set to the dialogue text spoken by that actor. For questions, the objects should have the keys 'question' and 'answers'. The 'question' key should be set to the text of the question being asked. The 'answers' key should be an array of three objects, each representing a different answer to the question where only one is correct and two are incorrect. The objects in the 'answers' array should have the keys 'text', 'correct' and 'type'. The 'text' key should contain the answer text, 'correct' should be true for the correct answer and false for incorrect ones, and 'type' should always be equal to 'multichoice'. The entire output must be in a single JSON array without separating the dialogue and questions into different arrays.`;
+      const prompt = usePdfContext ? `Create an informative conversation between 2 people ${values?.actor1?.name && values?.actor2?.name ? `'${values.actor1.name}' and '${values.actor2.name}' ` : ""} about the topic '${values.roleplayTopic}' in the language ${learnLang}.${values.roleplayDifficulty ? ` The conversation should be ${i18nLanguage === "en-US" ? "ACTFL" : "CEFR"} level '${t(values.roleplayDifficulty)}.'` : ""} Return the conversation inside an array that is ${values.roleplayLengthNumber} objects in length , each text in the conversation should be inside an object in the array. Each object should have the keys actor and text. If the text belongs to person 1 then the key actor should equal to 1 else it should equal to 2. The key text should equal to the text in the conversation. Your response should be in JSON.` : `Create a conversation between 2 people ${values?.actor1?.name && values?.actor2?.name ? `'${values.actor1.name}' and '${values.actor2.name}' ` : ""}about the topic '${values.roleplayTopic}' in the language ${learnLang}.${values.roleplayDifficulty ? ` The conversation should be ${i18nLanguage === "en-US" ? "ACTFL" : "CEFR"} level '${t(values.roleplayDifficulty)}.'` : ""} Return the conversation inside an array that is ${values.roleplayLengthNumber} objects in length , each text in the conversation should be inside an object in the array. Each object should have the keys actor and text. If the text belongs to person 1 then the key actor should equal to 1 else it should equal to 2. The key text should equal to the text in the conversation. Your response should be in JSON`;
+      const promptWithQuestions = usePdfContext ? `Create an informative conversation between 2 people ${values?.actor1?.name && values?.actor2?.name ? `'${values.actor1.name}' and '${values.actor2.name}' ` : ""} about the topic '${values.roleplayTopic}' in the language ${learnLang}.${values.roleplayDifficulty ? ` The conversation should be ${i18nLanguage === "en-US" ? "ACTFL" : "CEFR"} level '${t(values.roleplayDifficulty)}.'` : ""} The conversation should be returned inside a single array that is ${values.roleplayLengthNumber} objects in length along with ${values?.questionsAmount} comprehension questions related to the conversation. Each piece of dialogue and each question should be represented as an object in the array. For dialogue, the objects should have the keys 'actor' and 'text'. The 'actor' key should be set to 1 if the dialogue is spoken by the first actor, and 2 if it is spoken by the second actor. The 'text' key should be set to the dialogue text spoken by that actor. For questions, the objects should have the keys 'question' and 'answers'. The 'question' key should be set to the text of the question being asked. The 'answers' key should be an array of three objects, each representing a different answer to the question where only one is correct and two are incorrect. The objects in the 'answers' array should have the keys 'text', 'correct' and 'type'. The 'text' key should contain the answer text, 'correct' should be true for the correct answer and false for incorrect ones, and 'type' should always be equal to 'multichoice'. The entire output must be in a single JSON array without separating the dialogue and questions into different arrays.` : `Create a conversation between 2 people ${values?.actor1?.name && values?.actor2?.name ? `'${values.actor1.name}' and '${values.actor2.name}' ` : ""}about the topic '${values.roleplayTopic}' in the language ${learnLang}.${values.roleplayDifficulty ? ` The conversation should be ${i18nLanguage === "en-US" ? "ACTFL" : "CEFR"} level '${t(values.roleplayDifficulty)}.'` : ""} The conversation should be returned inside a single array that is ${values.roleplayLengthNumber} objects in length along with ${values?.questionsAmount} comprehension questions related to the conversation. Each piece of dialogue and each question should be represented as an object in the array. For dialogue, the objects should have the keys 'actor' and 'text'. The 'actor' key should be set to 1 if the dialogue is spoken by the first actor, and 2 if it is spoken by the second actor. The 'text' key should be set to the dialogue text spoken by that actor. For questions, the objects should have the keys 'question' and 'answers'. The 'question' key should be set to the text of the question being asked. The 'answers' key should be an array of three objects, each representing a different answer to the question where only one is correct and two are incorrect. The objects in the 'answers' array should have the keys 'text', 'correct' and 'type'. The 'text' key should contain the answer text, 'correct' should be true for the correct answer and false for incorrect ones, and 'type' should always be equal to 'multichoice'. The entire output must be in a single JSON array without separating the dialogue and questions into different arrays.`;
       const roleplayTemplate = {
         roleplayId: (0, _utils.randomId)(),
         roleplayName: values.roleplayTopic,
@@ -194,10 +194,22 @@ function GenerateRoleplayDialog({
         } = responseObject[responseKey][0];
         response = (0, _jsonrepair.jsonrepair)(text);
       } else {
-        const chatGptResponse = await makeChatGptApiRequest({
+        let chatGptResponse = await makeChatGptApiRequest({
           model: "gpt-3.5-turbo",
           prompt: activePrompt
         });
+        let isComplete = false;
+        while (!isComplete) {
+          if (chatGptResponse.endsWith("...") || chatGptResponse.trim().endsWith(",")) {
+            const continuationResponse = await makeChatGptApiRequest({
+              model: "gpt-3.5-turbo",
+              prompt: "Continue: " + chatGptResponse
+            });
+            chatGptResponse += continuationResponse;
+          } else {
+            isComplete = true;
+          }
+        }
         response = chatGptResponse;
       }
       const jsonResponse = removeExtraTextFromChatGptResponse(response);
@@ -249,8 +261,21 @@ function GenerateRoleplayDialog({
   if (autoSelect) {
     isSubmitDisabled = !values.roleplayTopic || isRoleplayGenerating;
   } else {
-    isSubmitDisabled = !(generatedRoleplay !== [] && !isRoleplayGenerating && previewMessages.length > 1);
+    isSubmitDisabled = !(generatedRoleplay.length !== 0 && !isRoleplayGenerating && previewMessages.length > 1);
   }
+  (0, _react.useEffect)(() => {
+    if (!generateQuestions) {
+      setValues(prevValues => ({
+        ...prevValues,
+        questionsAmount: 0
+      }));
+    } else {
+      setValues(prevValues => ({
+        ...prevValues,
+        questionsAmount: prevValues.questionsAmount || Math.floor(prevValues.roleplayLengthNumber / 2)
+      }));
+    }
+  }, [generateQuestions]);
   return /*#__PURE__*/_react.default.createElement(_ResponsiveDialog.default, {
     open: isGenerateRoleplayDialogOpen,
     handleClose: handleCloseDialog,
@@ -317,7 +342,8 @@ function GenerateRoleplayDialog({
     rows: 3
   }))), !hideRoleplayDifficultyOptions && !isRoleplayGenerating && /*#__PURE__*/_react.default.createElement(_material.Grid, {
     item: true,
-    xs: 12
+    xs: 12,
+    marginBottom: 1
   }, /*#__PURE__*/_react.default.createElement(_material.TextField, {
     select: true,
     id: "roleplayDifficulty",
@@ -357,15 +383,58 @@ function GenerateRoleplayDialog({
     margin: "normal",
     variant: "outlined",
     fullWidth: true
-  }, roleplayLengthOptions)), !isRoleplayGenerating && /*#__PURE__*/_react.default.createElement(_material.FormGroup, null, /*#__PURE__*/_react.default.createElement(_material.Grid, {
+  }, roleplayLengthOptions)), !isRoleplayGenerating && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_material.Grid, {
     item: true,
     xs: 12
+  }, /*#__PURE__*/_react.default.createElement(_material.Typography, {
+    id: "input-slider",
+    gutterBottom: true
+  }, t("number_of_interactions") + ": " + values.roleplayLengthNumber), /*#__PURE__*/_react.default.createElement(_material.Slider, {
+    "aria-label": "Number of Interactions",
+    defaultValue: 8,
+    valueLabelDisplay: "auto",
+    value: values.roleplayLengthNumber,
+    onChange: (e, newValue) => {
+      const maxQuestions = Math.floor(newValue / 2);
+      setValues(prevValues => ({
+        ...prevValues,
+        roleplayLengthNumber: newValue,
+        questionsAmount: Math.min(prevValues.questionsAmount, maxQuestions)
+      }));
+    },
+    step: 2,
+    marks: true,
+    min: 4,
+    max: 12
+  })), /*#__PURE__*/_react.default.createElement(_material.FormGroup, null, /*#__PURE__*/_react.default.createElement(_material.Grid, {
+    item: true,
+    xs: 12,
+    marginBottom: 1
   }, /*#__PURE__*/_react.default.createElement(_material.FormControlLabel, {
     control: /*#__PURE__*/_react.default.createElement(_material.Checkbox, {
       checked: generateQuestions,
       onChange: e => setGenerateQuestions(e.target.checked)
     }),
     label: "Generate Questions"
+  }))), generateQuestions && /*#__PURE__*/_react.default.createElement(_material.Grid, {
+    item: true,
+    xs: 12
+  }, /*#__PURE__*/_react.default.createElement(_material.Typography, {
+    id: "input-slider",
+    gutterBottom: true
+  }, t("number_of_questions") + ": " + values.questionsAmount), /*#__PURE__*/_react.default.createElement(_material.Slider, {
+    "aria-label": "Number of Questions",
+    defaultValue: Math.floor(values?.roleplayLengthNumber / 2),
+    valueLabelDisplay: "auto",
+    value: values?.questionsAmount,
+    onChange: (e, newValue) => setValues({
+      ...values,
+      questionsAmount: newValue
+    }),
+    step: 1,
+    marks: true,
+    min: 1,
+    max: Math.floor(values?.roleplayLengthNumber / 2)
   }))), process.env.REACT_APP_STAGE === "dev" && !isRoleplayGenerating && pdfDetails && pdfVectorStoreCreationStatus === "CREATION_COMPLETE" && /*#__PURE__*/_react.default.createElement(_material.Grid, {
     item: true,
     xs: 12
@@ -404,7 +473,7 @@ function GenerateRoleplayDialog({
     loading: isRoleplayGenerating,
     loadingPosition: "start",
     startIcon: /*#__PURE__*/_react.default.createElement(_AutoFixHigh.default, null)
-  }, t("generate_roleplay"))), !autoSelect && generatedRoleplay !== [] && !isRoleplayGenerating && previewMessages.length > 1 && /*#__PURE__*/_react.default.createElement(_material.Grid, {
+  }, t("generate_roleplay"))), !autoSelect && generatedRoleplay.length !== 0 && !isRoleplayGenerating && previewMessages.length > 1 && /*#__PURE__*/_react.default.createElement(_material.Grid, {
     item: true,
     xs: 12,
     mt: 2
@@ -441,6 +510,8 @@ GenerateRoleplayDialog.defaultProps = {
   initialValues: {
     roleplayTopic: "",
     roleplayDifficulty: "",
+    roleplayLengthNumber: 8,
+    questionsAmount: 0,
     roleplayLength: "",
     actor1: {
       name: "Carla",

package/dist/Dialogs/InviteDialog/InviteDialog.js

@@ -21,7 +21,9 @@ var _DialogTitle = _interopRequireDefault(require("@mui/material/DialogTitle"));
 var _DialogContent = _interopRequireDefault(require("@mui/material/DialogContent"));
 var _ArrowBack = _interopRequireDefault(require("@mui/icons-material/ArrowBack"));
 var _QrCode = _interopRequireDefault(require("@mui/icons-material/QrCode"));
-var _qrcode = _interopRequireDefault(require("qrcode.react"));
+var _reactQrcodeLogo = require("react-qrcode-logo");
+var _nualangSquareIcon = _interopRequireDefault(require("../../img/nualangSquareIcon.svg"));
+var _styles = require("@mui/material/styles");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -62,6 +64,7 @@ function InviteDialog({
   addCourseToClassroom = () => {},
   isWaysideClassroom
 }) {
+  const theme = (0, _styles.useTheme)();
   const {
     classes
   } = useStyles();
@@ -385,9 +388,15 @@ function InviteDialog({
     justifyContent: "center",
     alignItems: "center",
     height: "100%"
-  }, /*#__PURE__*/_react.default.createElement(_qrcode.default, {
+  }, /*#__PURE__*/_react.default.createElement(_reactQrcodeLogo.QRCode, {
     value: inviteLinkState,
-    size: 384
+    size: 384,
+    fgColor: theme.palette.primary.main,
+    bgColor: theme.palette.background.paper,
+    logoImage: _nualangSquareIcon.default,
+    logoHeight: 90,
+    logoWidth: 90,
+    qrStyle: "dots"
   }))))))) : /*#__PURE__*/_react.default.createElement(_material.List, null, /*#__PURE__*/_react.default.createElement(_DialogContentText.default, null, t("select_a_classroom")), teachClassroomsState.map((c, i) => {
     const {
       classroomId,
@@ -563,9 +572,15 @@ function InviteDialog({
     justifyContent: "center",
     alignItems: "center",
     height: "100%"
-  }, /*#__PURE__*/_react.default.createElement(_qrcode.default, {
+  }, /*#__PURE__*/_react.default.createElement(_reactQrcodeLogo.QRCode, {
     value: inviteLinkState,
-    size: 384
+    size: 384,
+    fgColor: theme.palette.primary.main,
+    bgColor: theme.palette.background.paper,
+    logoImage: _nualangSquareIcon.default,
+    logoHeight: 90,
+    logoWidth: 90,
+    qrStyle: "dots"
   }))))))) : null));
 }
 InviteDialog.defaultProps = {

package/dist/Dialogs/ModeratedDialog/ModeratedDialog.js

@@ -17,7 +17,8 @@ const useStyles = (0, _mui.makeStyles)()(() => ({
 function ModeratedDialog({
   t,
   open,
-  handleClose
+  handleClose,
+  moderationReason
 }) {
   const {
     classes
@@ -27,7 +28,9 @@ function ModeratedDialog({
     handleClose: handleClose,
     dialogTitle: t("moderate_title"),
     className: classes.zIndex
-  }, /*#__PURE__*/_react.default.createElement(_DialogContentText.default, null, /*#__PURE__*/_react.default.createElement("p", null, t("moderated_image_dialog"))));
+  }, /*#__PURE__*/_react.default.createElement(_DialogContentText.default, null, /*#__PURE__*/_react.default.createElement("p", null, t("moderated_image_dialog")), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("p", null, t("moderation_reason", {
+    moderationReason: moderationReason
+  }))));
 }
 ModeratedDialog.defaultProps = {
   t: text => text

package/dist/Editors/Roleplay/Roleplay.js

@@ -632,7 +632,7 @@ function Roleplay({
     run,
     steps
   } = joyrideState;
-  const topBarActions = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, subscription?.isPaidUser && /*#__PURE__*/_react.default.createElement(_material.Button, {
+  const topBarActions = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_material.Box, null, subscription?.isPaidUser && /*#__PURE__*/_react.default.createElement(_material.Button, {
     sx: {
       marginRight: 1
     },
@@ -656,7 +656,7 @@ function Roleplay({
     open: uploadRoleplayScript,
     handleClose: () => setUploadRoleplayScript(false),
     onSubmit: onSubmit
-  }));
+  })));
   return /*#__PURE__*/_react.default.createElement(_material.Dialog, {
     fullScreen: true,
     open: open,
@@ -838,6 +838,8 @@ function Roleplay({
       roleplayTopic: roleplay.roleplayName,
       roleplayDifficulty: roleplay.difficulty,
       roleplayLength: "",
+      questionsAmount: 0,
+      roleplayLengthNumber: 8,
       actor1: roleplay.actor1,
       actor2: roleplay.actor2
     },

package/dist/Forms/VideoUploader/VideoUploader.js

@@ -127,19 +127,11 @@ function VideoUploader({
     isDragAccept,
     isDragReject
   });
-  const inputRef = _react.default.useRef();
-  const handleFileChange = event => {
-    const file = event.target.files[0];
-    const url = URL.createObjectURL(file);
-    setFile(url);
-  };
   return /*#__PURE__*/_react.default.createElement("section", {
     className: "container"
   }, !file && /*#__PURE__*/_react.default.createElement("div", getRootProps({
     className: classes.dropzoneContainer
   }), /*#__PURE__*/_react.default.createElement("input", _extends({}, getInputProps(), {
-    onChange: handleFileChange,
-    ref: inputRef,
     accept: ".mov,.mp4"
   })), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("img", {
     className: classes.selectFileImage,

package/dist/Lists/CourseOutline/CourseOutline.stories.js

@@ -11,7 +11,7 @@ var _CourseOutline = _interopRequireDefault(require("./CourseOutline"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const Template = args => /*#__PURE__*/_react.default.createElement(_CourseOutline.default, args);
 const props = exports.props = {
-  isMember: false,
+  isMember: true,
   isCreator: false,
   courseId: "123",
   sections: _Course.props.course.sections,

package/dist/Live/HowToJoin/HowToJoin.js

@@ -10,7 +10,8 @@ var _ChevronLeft = _interopRequireDefault(require("@mui/icons-material/ChevronLe
 var _ChevronRight = _interopRequireDefault(require("@mui/icons-material/ChevronRight"));
 var _SwipeableDrawer = _interopRequireDefault(require("@mui/material/SwipeableDrawer"));
 var _styles = require("@mui/material/styles");
-var _qrcode = _interopRequireDefault(require("qrcode.react"));
+var _reactQrcodeLogo = require("react-qrcode-logo");
+var _nualangSquareIcon = _interopRequireDefault(require("../../img/nualangSquareIcon.svg"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -72,9 +73,15 @@ function HowToJoin({
       pl: 2.5,
       py: 5
     }
-  }, /*#__PURE__*/_react.default.createElement(_qrcode.default, {
+  }, /*#__PURE__*/_react.default.createElement(_reactQrcodeLogo.QRCode, {
     value: classroomURL,
-    size: 256
+    size: 256,
+    fgColor: theme.palette.primary.main,
+    bgColor: theme.palette.background.paper,
+    logoImage: _nualangSquareIcon.default,
+    logoHeight: 70,
+    logoWidth: 70,
+    qrStyle: "dots"
   })), /*#__PURE__*/_react.default.createElement(_material.ListItem, null, /*#__PURE__*/_react.default.createElement(_material.ListItemText, {
     primary: /*#__PURE__*/_react.default.createElement(_material.Typography, {
       component: "span",

package/dist/Screens/Courses/ViewCourse/ViewCourse.js

@@ -312,6 +312,7 @@ function Course({
       setIsSubmitting(false);
       console.error(error);
     }
+    handleCloseMenu();
   };
   const handleCLickOpenUpload = () => {
     setIsUploadPdfOpen(true);

package/dist/img/nualangSquareIcon.svg

@@ -0,0 +1,18 @@
+<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1096_0)">
+<path d="M512 123.237V388.742C511.994 421.434 499.004 452.785 475.887 475.9C452.769 499.015 421.417 512 388.726 512H123.253C90.566 511.994 59.2193 499.007 36.1061 475.892C12.9928 452.778 0.00552006 421.43 0 388.742L0 123.237C0.00552114 90.5508 12.9935 59.205 36.1074 36.0941C59.2212 12.9832 90.5679 -4.66331e-07 123.253 0L388.726 0C421.411 0.00551534 452.757 12.9898 475.873 36.0989C498.989 59.208 511.983 90.5506 512 123.237Z" fill="url(#paint0_linear_1096_0)"/>
+<path d="M301.637 196.422C298.634 193.745 294.703 192.348 290.684 192.531C286.665 192.714 282.878 194.461 280.13 197.4C278.791 198.891 277.766 200.637 277.119 202.533C276.471 204.429 276.214 206.437 276.362 208.435L278.985 266.358C279.381 275.249 277.715 281.974 274.051 286.367C270.387 290.76 264.536 293.092 256.604 293.446C248.671 293.8 242.842 291.926 238.824 287.928C234.805 283.931 232.578 277.331 232.141 268.44L229.58 210.517C229.533 208.52 229.092 206.551 228.28 204.725C227.469 202.899 226.305 201.252 224.854 199.878C221.852 197.192 217.918 195.788 213.895 195.967C209.871 196.146 206.077 197.894 203.326 200.836C201.997 202.333 200.979 204.079 200.332 205.974C199.685 207.869 199.421 209.873 199.558 211.871L202.139 269.794C202.889 286.45 208.135 299.588 217.733 308.645C227.331 317.702 240.843 321.97 257.853 321.137C274.863 320.305 288 314.891 296.828 305.064C305.655 295.236 309.757 281.661 309.028 264.963L306.446 207.04C306.409 205.036 305.97 203.06 305.154 201.229C304.339 199.397 303.164 197.749 301.699 196.38L301.637 196.422Z" fill="white"/>
+<path d="M400.697 280.433C406.013 278.56 410.981 275.816 415.396 272.313C415.658 275.271 416.796 278.084 418.665 280.391C419.9 281.934 421.443 283.201 423.197 284.111C424.95 285.022 426.874 285.556 428.846 285.68C429.961 285.784 431.083 285.784 432.198 285.68C435.084 285.398 437.812 284.226 440.005 282.328C441.531 281.03 442.782 279.44 443.687 277.653C444.591 275.865 445.13 273.916 445.273 271.917L454.537 175.789C454.794 173.785 454.643 171.751 454.092 169.808C453.541 167.864 452.602 166.053 451.331 164.483C450.068 162.946 448.504 161.684 446.736 160.775C444.967 159.865 443.031 159.328 441.046 159.195C439.055 158.948 437.035 159.119 435.114 159.696C433.192 160.273 431.412 161.244 429.887 162.547C427.459 164.574 425.756 167.336 425.036 170.417C420.999 166.444 416.396 163.091 411.378 160.465C405.001 157.086 398.016 155.012 390.829 154.364C380.716 153.316 370.516 155.233 361.473 159.882C352.177 164.717 344.375 171.994 338.904 180.931C332.859 190.772 329.222 201.9 328.286 213.411C326.987 224.875 328.48 236.483 332.638 247.245C336.416 257.035 342.759 265.629 351.001 272.126C359.173 278.471 369.007 282.318 379.316 283.202C386.561 283.912 393.872 282.965 400.697 280.433ZM392.37 182.41C396.766 182.714 401.036 184.011 404.858 186.204C408.681 188.397 411.956 191.427 414.438 195.068C419.846 203.068 422.142 212.769 420.893 222.344C420.34 231.931 416.279 240.98 409.483 247.765C406.333 250.837 402.532 253.161 398.363 254.566C394.194 255.971 389.762 256.422 385.395 255.886C381.022 255.624 376.767 254.362 372.958 252.196C369.15 250.03 365.89 247.018 363.43 243.393C358.108 235.436 355.852 225.82 357.08 216.326C357.666 206.685 361.771 197.595 368.614 190.779C373.199 186.093 379.272 183.149 385.79 182.451C388.011 182.208 390.25 182.194 392.474 182.41H392.37Z" fill="white"/>
+<path d="M174.074 209.643C173.47 193.174 169.91 180.182 163.664 171.021C157.418 161.86 145.738 157.237 129.77 157.8C121.856 158.029 114.157 160.427 107.513 164.733C102.359 168.004 97.75 172.065 93.8556 176.767V176.642C93.8269 174.64 93.4018 172.664 92.6049 170.827C91.808 168.99 90.6551 167.329 89.2128 165.94C86.2401 163.22 82.318 161.777 78.2914 161.921C74.2647 162.065 70.4558 163.785 67.6851 166.711C66.3394 168.192 65.3035 169.928 64.6385 171.816C63.9734 173.704 63.6926 175.706 63.8127 177.704L67.1855 271.938C67.2045 273.94 67.6232 275.918 68.4169 277.755C69.2106 279.593 70.3633 281.254 71.8075 282.64C73.8636 284.646 76.4881 285.969 79.3234 286.429C80.4514 286.616 81.5956 286.686 82.7378 286.638C84.7387 286.623 86.7145 286.192 88.5393 285.371C90.364 284.55 91.9974 283.358 93.3351 281.87C94.6864 280.387 95.7257 278.648 96.391 276.756C97.0563 274.864 97.334 272.857 97.2076 270.856L95.1256 212.558C94.8994 209.181 95.3583 205.793 96.4746 202.598C97.5909 199.403 99.3415 196.466 101.621 193.965C106.181 188.989 112.76 186.303 121.171 186.011C129.187 185.72 134.975 187.74 138.368 192.049C141.762 196.359 143.74 202.772 144.031 210.788L146.113 269.19C146.129 271.194 146.548 273.174 147.346 275.013C148.144 276.852 149.303 278.511 150.756 279.892C153.745 282.596 157.676 284.017 161.703 283.85C165.73 283.682 169.53 281.939 172.284 278.996C173.629 277.515 174.665 275.779 175.33 273.891C175.995 272.003 176.276 270.001 176.156 268.003L174.074 209.643Z" fill="white"/>
+<path d="M258.519 396.466C238.572 396.519 218.811 392.616 200.382 384.982C181.953 377.349 165.22 366.136 151.152 351.993C148.502 349.148 147.06 345.384 147.129 341.496C147.198 337.608 148.774 333.899 151.523 331.149C154.273 328.399 157.982 326.824 161.87 326.754C165.758 326.685 169.521 328.127 172.367 330.777C183.679 342.091 197.108 351.065 211.889 357.188C226.669 363.311 242.51 366.463 258.509 366.463C274.507 366.463 290.349 363.311 305.129 357.188C319.909 351.065 333.339 342.091 344.651 330.777C346.035 329.344 347.691 328.2 349.521 327.413C351.352 326.626 353.321 326.211 355.314 326.193C357.307 326.176 359.283 326.555 361.128 327.308C362.973 328.062 364.649 329.176 366.059 330.585C367.468 331.993 368.584 333.668 369.339 335.512C370.095 337.356 370.476 339.332 370.46 341.325C370.444 343.318 370.031 345.287 369.246 347.119C368.461 348.951 367.319 350.608 365.887 351.993C351.818 366.135 335.085 377.347 316.656 384.981C298.226 392.614 278.467 396.518 258.519 396.466Z" fill="white"/>
+</g>
+<defs>
+<linearGradient id="paint0_linear_1096_0" x1="89.5667" y1="-26.7545" x2="287.637" y2="309.721" gradientUnits="userSpaceOnUse">
+<stop stop-color="#AD3DAA"/>
+<stop offset="0.95" stop-color="#8400A1"/>
+</linearGradient>
+<clipPath id="clip0_1096_0">
+<rect width="512" height="512" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nualang/nualang-ui-components",
-  "version": "0.1.1137",
+  "version": "0.1.1139",
   "main": "dist/index.js",
   "files": [
     "dist",
@@ -15,47 +15,46 @@
     "@emoji-mart/react": "^1.1.1",
     "@emotion/react": "^11.10.8",
     "@emotion/styled": "^11.10.8",
-    "@hookform/resolvers": "^3.3.4",
+    "@nualang/videochat-ui-components": "^0.0.168",
+    "@hookform/resolvers": "^3.6.0",
     "@json2csv/plainjs": "^7.0.1",
-    "@mui/icons-material": "^5.14.1",
+    "@mui/icons-material": "^5.15.20",
     "@mui/lab": "^5.0.0-alpha.137",
-    "@mui/material": "^5.14.2",
-    "@mui/system": "^5.14.1",
-    "@mui/x-date-pickers": "^6.10.1",
-    "@nualang/videochat-ui-components": "^0.0.168",
-    "@storybook/theming": "^7.6.17",
+    "@mui/material": "^5.15.20",
+    "@mui/system": "^5.15.20",
+    "@mui/x-date-pickers": "^7.7.0",
+    "@storybook/theming": "^8.1.10",
     "@stripe/react-stripe-js": "^2.1.1",
     "@stripe/stripe-js": "^1.54.2",
     "ajv-keywords": "^3.5.2",
     "avataaars": "^2.0.0",
     "base64-arraybuffer": "^1.0.2",
-    "chart.js": "^4.3.2",
+    "chart.js": "^4.4.3",
     "chartjs-plugin-datalabels": "^2.2.0",
     "classnames": "^2.3.1",
     "codegen": "^0.1.0",
     "codemirror": "^5.61.1",
-    "date-fns": "3.3.1",
+    "date-fns": "3.6.0",
     "deep-equal": "^2.2.2",
     "easymde": "2.18.0",
     "emoji-mart": "5.5.2",
-    "export-to-csv": "^0.2.1",
+    "export-to-csv": "^1.3.0",
     "formik": "^2.2.9",
     "fs": "^0.0.1-security",
     "immutability-helper": "^3.0",
     "jaro-winkler": "^0.2",
-    "json-2-csv": "^4.0.0",
+    "json-2-csv": "^5.5.1",
     "jsonlint": "^1.6.3",
     "jsonrepair": "^3.6.0",
     "luxon": "^3.3.0",
     "moment": "^2.29.4",
-    "n2words": "^1.19.1",
+    "n2words": "^1.21.0",
     "pixabay-api": "^1.0.4",
     "pre-commit": "^1.2.2",
-    "qrcode.react": "^3.1.0",
     "rdndmb-html5-to-touch": "^8.0.0",
     "react-beautiful-dnd": "^13.1.1",
     "react-chartjs-2": "^5.2.0",
-    "react-codemirror2": "^7.2.1",
+    "react-codemirror2": "^8.0.0",
     "react-copy-to-clipboard": "^5.0",
     "react-countdown-circle-timer": "^3.2.1",
     "react-csv": "^2.2.2",
@@ -66,17 +65,19 @@
     "react-feather": "^2.0",
     "react-flip-move": "^3.0.5",
     "react-flip-toolkit": "^7.1.0",
-    "react-hook-form": "^7.51.3",
-    "react-i18next": "^14.0.5",
+    "react-hook-form": "^7.52.0",
+    "react-i18next": "^14.1.2",
     "react-infinite-scroll-component": "^6.1.0",
     "react-infinite-scroller": "^1.2.6",
-    "react-intersection-observer": "^9.5.2",
-    "react-joyride": "^2.5.5",
+    "react-intersection-observer": "9.10.3",
+    "react-joyride": "^2.8.2",
     "react-markdown": "^8.0.7",
     "react-modal-promise": "^1.0.2",
     "react-papaparse": "^4.1.0",
     "react-pdf": "^7.7.1",
+    "react-refresh": "^0.14.2",
     "react-player": "^2.16.0",
+    "react-qrcode-logo": "^3.0.0",
     "react-router-dom": "^6.22.1",
     "react-simplemde-editor": "5.2.0",
     "react-split-pane": "^0.1",
@@ -90,33 +91,30 @@
     "styled-components": "^6.1.0",
     "tss-react": "^4.9.3",
     "uifx": "^2.0",
-    "wavesurfer.js": "^7.7.3",
+    "wavesurfer.js": "^7.7.15",
     "xlsx": "^0.18.5",
     "yup": "^1.4.0"
   },
   "_COMMENT_": "// Please note that peer dependencies are also included as dev dependencies to make development easier",
   "devDependencies": {
-    "@babel/cli": "^7.22.9",
-    "@babel/plugin-proposal-private-property-in-object": "^7.18.6",
-    "@babel/preset-env": "^7.21.5",
-    "@babel/preset-react": "^7.14.5",
+    "@babel/cli": "^7.24.7",
+    "@babel/plugin-proposal-private-property-in-object": "7.18.6",
+    "@babel/preset-env": "^7.24.7",
+    "@babel/preset-react": "^7.24.7",
     "@react-theming/storybook-addon": "^1.1.10",
-    "@storybook/addon-actions": "^7.6.17",
-    "@storybook/addon-essentials": "^7.6.17",
-    "@storybook/addon-links": "^7.6.17",
-    "@storybook/addon-mdx-gfm": "^7.6.17",
-    "@storybook/addon-storyshots": "^7.6.17",
-    "@storybook/addon-viewport": "^7.6.17",
-    "@storybook/addons": "^7.6.17",
-    "@storybook/node-logger": "^7.6.17",
-    "@storybook/preset-create-react-app": "^7.6.17",
-    "@storybook/react": "^7.6.17",
-    "@storybook/react-webpack5": "^7.6.17",
-    "@tanstack/react-query": "5.22.2",
-    "@tanstack/react-query-devtools": "5.24.0",
-    "@tanstack/react-query-persist-client": "5.22.2",
+    "@storybook/addon-actions": "^8.1.10",
+    "@storybook/addon-essentials": "^8.1.10",
+    "@storybook/addon-links": "^8.1.10",
+    "@storybook/addon-mdx-gfm": "^8.1.10",
+    "@storybook/addon-viewport": "^8.1.10",
+    "@storybook/node-logger": "^8.1.10",
+    "@storybook/preset-create-react-app": "^8.1.10",
+    "@storybook/react": "^8.1.10",
+    "@storybook/react-webpack5": "^8.1.10",
+    "@tanstack/react-query": "5.45.1",
+    "@tanstack/react-query-devtools": "5.45.1",
+    "@tanstack/react-query-persist-client": "5.45.1",
     "babel-plugin-macros": "^3.1.0",
-    "chromatic": "^6.20.0",
     "clsx": "^2.0.0",
     "cross-env": "^7.0.3",
     "eslint-plugin-jsx-a11y": "^6.8.0",
@@ -128,14 +126,14 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-scripts": "^5.0.1",
-    "storybook": "^7.6.17"
+    "storybook": "^8.1.10"
   },
   "scripts": {
     "postinstall": "patch-package",
     "start": "npm run storybook",
     "build": "react-scripts build",
-    "test": "react-scripts test --testPathIgnorePatterns=src/storybook.test.js --transformIgnorePatterns \"node_modules/(?!@codemirror)/\"",
-    "test:unit": "cross-env CI=true react-scripts test ./ --ci --testPathIgnorePatterns=src/storybook.test.js --transformIgnorePatterns \"node_modules/(?!@codemirror)/\"",
+    "test": "react-scripts test --transformIgnorePatterns \"node_modules/(?!@codemirror)/\"",
+    "test:unit": "cross-env CI=true react-scripts test ./ --ci --transformIgnorePatterns \"node_modules/(?!@codemirror)/\"",
     "storybook": "storybook dev -p 9009",
     "build-storybook": "storybook build",
     "clean": "rimraf dist",
@@ -144,7 +142,6 @@
     "postversion": "npm publish && git push && git push --tags",
     "localpack": "npm run compile && npm pack",
     "lint": "eslint --ext .js,.jsx --ignore-pattern dist src",
-    "chromatic": "npx chromatic --project-token=a2273931692a --exit-zero-on-changes",
     "prettier": "npx prettier ./src --write"
   },
   "pre-commit": [