@nualang/nualang-ui-components 0.1.1400 → 0.2.0

package/dist/Live/LiveMeaningReadWrite/LiveMeaningReadWrite.js

@@ -1,396 +0,0 @@
-import { useState, useEffect } from "react";
-import { Grid, Button, Typography, Box } from "@mui/material";
-import { makeStyles } from "tss-react/mui";
-import { styled } from "@mui/system";
-import PauseIcon from "@mui/icons-material/Pause";
-import PlayIcon from "@mui/icons-material/PlayArrow";
-import { CountdownCircleTimer } from "react-countdown-circle-timer";
-import { useTheme } from "@mui/material/styles";
-import AnswerResult from "../../Misc/AnswerResult/AnswerResult";
-import ExerciseBottomBar from "../../Misc/ExerciseBottomBar/ExerciseBottomBar";
-import InputHelper from "../../Forms/InputHelper/InputHelper";
-import ChatBubble from "../../Misc/ChatBubble/ChatBubble";
-import GameControls from "../GameControls/GameControls";
-import GameQuestionResults from "../GameQuestionResults/GameQuestionResults";
-import getVoiceImages from "../../utils/voiceImages";
-import { capitalize, removeExtraWhiteSpaces } from "../../utils/index";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-const useStyles = makeStyles()(theme => ({
-  flex: {
-    [theme.breakpoints.down("md")]: {
-      display: "none"
-    },
-    flex: 1
-  },
-  root: {
-    [theme.breakpoints.down("md")]: {
-      padding: theme.spacing(2)
-    },
-    flexGrow: 1,
-    width: "100%",
-    padding: theme.spacing(4)
-  },
-  image: {
-    [theme.breakpoints.down("md")]: {
-      maxWidth: "200px",
-      maxHeight: "150px"
-    },
-    maxWidth: "250px",
-    height: "auto",
-    maxHeight: "200px",
-    borderRadius: "20px"
-  },
-  srOnly: {
-    position: "absolute",
-    width: "1px",
-    height: "1px",
-    padding: 0,
-    margin: "-1px",
-    overflow: "hidden",
-    clip: "rect(0, 0, 0, 0)",
-    whiteSpace: "nowrap",
-    border: 0
-  }
-}));
-const NualaSpeakingContainer = styled("div")(({
-  theme
-}) => ({
-  height: "100px",
-  minHeight: "80px",
-  minWidth: "80px",
-  borderRadius: "20px",
-  [theme.breakpoints.down("md")]: {
-    height: "80px"
-  }
-}));
-function LiveMeaningReadWrite({
-  t = text => text,
-  languageInformation,
-  isCreator,
-  currentQuestion,
-  isTimeUp,
-  time,
-  handleTimeUp,
-  handleShowLeaderboard,
-  isAnswered,
-  setIsAnswered,
-  answerAttempt,
-  isCorrectResultOpen,
-  isIncorrectResultOpen,
-  handleContinue,
-  handleNextQuestion,
-  setCurrentAnswer,
-  readWriteText,
-  handleInputChange,
-  forLangCharacters,
-  gameMembersAnsweredTotal,
-  gameMembersTotal,
-  gameMembersCorrectAnswerTotal,
-  exercise,
-  voice,
-  voicePitch,
-  voiceLanguageCode,
-  voices,
-  speak,
-  learnLang = "",
-  forLang = "",
-  languageTag
-}) {
-  const {
-    classes
-  } = useStyles();
-  const theme = useTheme();
-  const [isPaused, setIsPaused] = useState(false);
-  const definitionText = (() => {
-    if (!currentQuestion) return "";
-    if (currentQuestion.definitions?.length > 0) {
-      const raw = currentQuestion.definitions[0];
-      return typeof raw === "string" ? raw : "";
-    }
-    if (currentQuestion.translations?.length > 0) {
-      const raw = currentQuestion.translations[0];
-      return typeof raw === "string" ? raw : "";
-    }
-    return "";
-  })();
-  useEffect(() => {
-    if (isCreator && isTimeUp && currentQuestion?.phrase) {
-      speak(currentQuestion.phrase, voice, false, null, voiceLanguageCode, false, voicePitch);
-    }
-    if (!isCreator && isTimeUp) {
-      setCurrentAnswer(readWriteText);
-    }
-  }, [isTimeUp]);
-  const voiceMap = getVoiceImages(voices || []);
-  const NualaSpeakingAnimation = (voiceMap.get(voice) || {}).speakingImage || null;
-  return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsxs(Grid, {
-      container: true,
-      className: classes.root,
-      direction: "column",
-      spacing: 2,
-      component: "main",
-      sx: {
-        justifyContent: "center",
-        alignItems: "center",
-        maxWidth: "lg",
-        mx: "auto"
-      },
-      children: [/*#__PURE__*/_jsx(Grid, {
-        children: /*#__PURE__*/_jsx(Typography, {
-          lang: languageTag,
-          variant: "h6",
-          component: "h2",
-          sx: {
-            color: "inherit"
-          },
-          children: t("type_the_correct_phrase", {
-            lng: languageTag
-          })
-        })
-      }), currentQuestion?.image && /*#__PURE__*/_jsx(Grid, {
-        children: /*#__PURE__*/_jsx("img", {
-          src: currentQuestion.image,
-          alt: "",
-          className: classes.image
-        })
-      }), isCreator && /*#__PURE__*/_jsx(Grid, {
-        children: /*#__PURE__*/_jsxs(Box, {
-          sx: {
-            display: "flex",
-            justifyContent: "center",
-            flexDirection: "row"
-          },
-          children: [/*#__PURE__*/_jsx(Box, {
-            sx: {
-              display: "flex",
-              justifyContent: "center"
-            },
-            children: NualaSpeakingAnimation && /*#__PURE__*/_jsx(NualaSpeakingContainer, {
-              children: /*#__PURE__*/_jsx(NualaSpeakingAnimation, {})
-            })
-          }), /*#__PURE__*/_jsx(Box, {
-            sx: {
-              display: "grid",
-              justifyContent: "flex-end",
-              marginLeft: 1
-            },
-            children: /*#__PURE__*/_jsx(ChatBubble, {
-              id: "currentDefinition",
-              learnLang: learnLang,
-              voice: voice || null,
-              voicePitch: voicePitch || null,
-              forLang: forLang,
-              wordList: definitionText ? removeExtraWhiteSpaces(definitionText).split(" ") : [],
-              disableTranslation: false,
-              isMessage: false,
-              muteSound: true,
-              t: t
-            })
-          })]
-        })
-      }), isCreator ? /*#__PURE__*/_jsxs(Grid, {
-        sx: {
-          marginTop: 2,
-          textAlign: "center"
-        },
-        children: [!isAnswered && /*#__PURE__*/_jsxs(_Fragment, {
-          children: [!isTimeUp && /*#__PURE__*/_jsxs(Box, {
-            children: [/*#__PURE__*/_jsx(CountdownCircleTimer, {
-              isPlaying: !isPaused,
-              duration: time,
-              colors: theme.palette.primary.main,
-              size: 160,
-              onComplete: handleTimeUp,
-              children: ({
-                remainingTime
-              }) => /*#__PURE__*/_jsx(Typography, {
-                variant: "h2",
-                sx: {
-                  fontWeight: "fontWeightBold"
-                },
-                children: remainingTime
-              })
-            }), /*#__PURE__*/_jsx(Button, {
-              variant: "contained",
-              color: "primary",
-              sx: {
-                marginTop: 2,
-                paddingLeft: 1.5,
-                paddingRight: 1.5
-              },
-              onClick: () => setIsPaused(!isPaused),
-              startIcon: isPaused ? /*#__PURE__*/_jsx(PlayIcon, {}) : /*#__PURE__*/_jsx(PauseIcon, {}),
-              size: "small",
-              children: isPaused ? t("resume") : t("pause")
-            })]
-          }), isTimeUp && /*#__PURE__*/_jsxs(Box, {
-            sx: {
-              textAlign: "center"
-            },
-            children: [/*#__PURE__*/_jsx(Typography, {
-              variant: "h5",
-              sx: {
-                fontWeight: "fontWeightBold",
-                textAlign: "center",
-                color: "success.main"
-              },
-              children: currentQuestion?.phrase
-            }), /*#__PURE__*/_jsx(Button, {
-              variant: "contained",
-              color: "primary",
-              sx: {
-                marginTop: 5
-              },
-              onClick: () => handleShowLeaderboard(),
-              children: t("next")
-            }), /*#__PURE__*/_jsx(GameQuestionResults, {
-              t: t,
-              gameMembersCorrectAnswerTotal: gameMembersCorrectAnswerTotal,
-              gameMembersTotal: gameMembersTotal
-            })]
-          }), !isTimeUp && /*#__PURE__*/_jsx(GameControls, {
-            t: t,
-            handleTimeUp: handleTimeUp,
-            gameMembersAnsweredTotal: gameMembersAnsweredTotal,
-            gameMembersTotal: gameMembersTotal
-          })]
-        }), isAnswered && /*#__PURE__*/_jsxs(Box, {
-          sx: {
-            marginTop: 2
-          },
-          children: [/*#__PURE__*/_jsx(Typography, {
-            variant: "h5",
-            sx: {
-              fontWeight: "fontWeightBold",
-              textAlign: "center"
-            },
-            children: currentQuestion?.phrase || ""
-          }), /*#__PURE__*/_jsx(Button, {
-            variant: "contained",
-            color: "primary",
-            sx: {
-              marginTop: 5
-            },
-            onClick: () => handleShowLeaderboard(),
-            children: t("next")
-          }), /*#__PURE__*/_jsx(GameQuestionResults, {
-            t: t,
-            gameMembersCorrectAnswerTotal: gameMembersCorrectAnswerTotal,
-            gameMembersTotal: gameMembersTotal
-          })]
-        })]
-      }) : /*#__PURE__*/_jsxs(Grid, {
-        sx: {
-          marginTop: 2,
-          width: "100%"
-        },
-        children: [definitionText && /*#__PURE__*/_jsx(Typography, {
-          variant: "body1",
-          sx: {
-            textAlign: "center",
-            color: "text.secondary",
-            marginBottom: 2
-          },
-          children: definitionText
-        }), !isAnswered ? /*#__PURE__*/_jsxs(Box, {
-          sx: {
-            display: "flex",
-            flexDirection: "column",
-            alignItems: "center"
-          },
-          children: [/*#__PURE__*/_jsx("span", {
-            className: classes.srOnly,
-            children: readWriteText
-          }), /*#__PURE__*/_jsx(Grid, {
-            sx: {
-              width: "100%",
-              maxWidth: "350px",
-              marginBottom: 2
-            },
-            children: /*#__PURE__*/_jsx(InputHelper, {
-              t: t,
-              value: readWriteText,
-              onChange: handleInputChange,
-              onKeyDown: e => {
-                if (e.key === "Enter") {
-                  e.preventDefault();
-                  e.stopPropagation();
-                  if (!readWriteText || readWriteText.trim() === "") {
-                    return;
-                  }
-                  setIsAnswered(true);
-                  setCurrentAnswer(readWriteText);
-                }
-              },
-              id: "meaningReadWriteText",
-              name: "readWriteText",
-              "aria-label": t("type_the_correct_phrase", {
-                language: capitalize(t(learnLang.toLowerCase()))
-              }),
-              "data-cy": "meaningReadWriteText",
-              label: t("type_the_correct_phrase", {
-                language: capitalize(t(learnLang.toLowerCase()))
-              }),
-              type: "text",
-              role: "textbox",
-              "aria-multiline": "true",
-              "aria-autocomplete": "none",
-              variant: "outlined",
-              multiline: true,
-              fullWidth: true,
-              autoComplete: "off",
-              characters: forLangCharacters ? forLangCharacters : null,
-              autoFocus: true
-            })
-          })]
-        }) : /*#__PURE__*/_jsx(Box, {
-          sx: {
-            marginTop: 2,
-            textAlign: "center"
-          },
-          children: /*#__PURE__*/_jsx(Typography, {
-            variant: "h5",
-            sx: {
-              fontWeight: "fontWeightBold",
-              textAlign: "center"
-            },
-            children: readWriteText || ""
-          })
-        })]
-      })]
-    }), /*#__PURE__*/_jsx(AnswerResult, {
-      t: t,
-      open: isCorrectResultOpen,
-      handleNext: handleNextQuestion,
-      ...answerAttempt,
-      result: "correct",
-      languageInformation: languageInformation,
-      isLive: true,
-      exercise: exercise
-    }), /*#__PURE__*/_jsx(AnswerResult, {
-      t: t,
-      open: isIncorrectResultOpen,
-      handleNext: handleNextQuestion,
-      ...answerAttempt,
-      result: "incorrect",
-      languageInformation: languageInformation,
-      isLive: true,
-      exercise: exercise
-    }), !isCreator && /*#__PURE__*/_jsx(ExerciseBottomBar, {
-      t: t,
-      handleSubmit: () => handleContinue(false),
-      handleSkip: () => handleContinue(true),
-      isSubmitAnswerAllowed: true,
-      isSubmitAnswerDisabled: !readWriteText || readWriteText.trim() === "",
-      isLive: true,
-      isAnswered: isAnswered,
-      setIsAnswered: setIsAnswered,
-      isTimeUp: isTimeUp,
-      readWriteText: readWriteText,
-      setCurrentAnswer: setCurrentAnswer,
-      exercise: exercise
-    })]
-  });
-}
-export default LiveMeaningReadWrite;

package/dist/Live/LiveRoleplay/LiveStory/LiveStory.js

@@ -1,260 +0,0 @@
-import { useEffect, useRef } from "react";
-import { Grid, Button, Box, Fab } from "@mui/material";
-import { makeStyles } from "tss-react/mui";
-import Chat from "../../../Chat/Chat";
-import BeforeElements from "../../../Exercises/Roleplay/Games/BeforeElements";
-import AnswerResult from "../../../Misc/AnswerResult/AnswerResult";
-import GameControls from "../../GameControls/GameControls";
-import GameQuestionResults from "../../GameQuestionResults/GameQuestionResults";
-import StudentAnswerDrawer from "../../Misc/StudentAnswerDrawer/StudentAnswerDrawer";
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-const useStyles = makeStyles()(theme => ({
-  root: {
-    [theme.breakpoints.down("md")]: {
-      padding: theme.spacing(2)
-    },
-    flexGrow: 1,
-    width: "100%",
-    padding: theme.spacing(4)
-  }
-}));
-function LiveStory({
-  t,
-  roleplay,
-  gameId,
-  handleTranslate,
-  learnLang,
-  forLang,
-  languageInformation,
-  isCreator,
-  time,
-  isTimeUp,
-  handleTimeUp,
-  speak,
-  isSpeaking,
-  voiceSpeed,
-  isSpeakingTextContainer,
-  stopSpeaking,
-  handleNext,
-  handleCorrectQuestionAnswer,
-  handleIncorrectQuestionAnswer,
-  answerAttempts,
-  muteSound,
-  startRoleplay,
-  roleplayHasStarted,
-  roleplayMessages,
-  isCompletionModalOpen,
-  handleShowLeaderboard,
-  setCurrentAnswer,
-  setIsAnswered,
-  isAnswered,
-  handleContinue,
-  isCorrectResultOpen,
-  isIncorrectResultOpen,
-  answerAttempt,
-  currentMessage,
-  gameMembersAnsweredTotal,
-  gameMembersTotal,
-  getNualaCelebratingImage,
-  nextScriptLine,
-  gameMembersCorrectAnswerTotal,
-  isFinalScoreDrawerOpen,
-  isStudentAnswerDrawerOpen,
-  setIsStudentAnswerDrawerOpen,
-  roleplayAnswer,
-  setRoleplayAnswer,
-  answerCounts,
-  noAnswerCounts
-}) {
-  const {
-    classes
-  } = useStyles();
-  const handleOpenStudentAnswerDrawer = () => {
-    setIsStudentAnswerDrawerOpen(true);
-  };
-  const handleCloseStudentAnswerDrawer = () => {
-    setIsStudentAnswerDrawerOpen(false);
-  };
-  const languageTag = languageInformation.Code;
-  useEffect(() => {
-    if (roleplayMessages?.length === 0 && !isCompletionModalOpen) {
-      startRoleplay();
-    }
-  }, [roleplayMessages?.length, roleplayHasStarted]);
-  const btnRef = useRef();
-  let buttonText = !nextScriptLine ? t("finish") : t("next");
-  let buttonOnClick = () => {
-    if (currentMessage?.question && nextScriptLine) {
-      handleShowLeaderboard(nextScriptLine);
-    } else {
-      handleNext(nextScriptLine);
-    }
-  };
-  useEffect(() => {
-    if (currentMessage) {
-      if (currentMessage.question && currentMessage.answers) {
-        const correctAnswersArray = currentMessage.answers.filter(answer => answer.correct);
-        const correctAnswersTextArray = correctAnswersArray.map(answer => answer.text);
-        const correctAnswer = correctAnswersTextArray.join(", ");
-        setRoleplayAnswer(correctAnswer);
-      }
-    }
-  }, [currentMessage?.answers]);
-  useEffect(() => {
-    if (isCorrectResultOpen || isIncorrectResultOpen || isFinalScoreDrawerOpen || !currentMessage?.question) {
-      handleCloseStudentAnswerDrawer();
-    }
-  }, [isCorrectResultOpen, isIncorrectResultOpen, isFinalScoreDrawerOpen, currentMessage]);
-  useEffect(() => {
-    if (!isCreator && isTimeUp) {
-      setIsStudentAnswerDrawerOpen(true);
-    }
-  }, [isTimeUp, isCreator]);
-  const afterElements = /*#__PURE__*/_jsxs(_Fragment, {
-    children: [roleplayHasStarted && isCreator && (!currentMessage?.question || isTimeUp) && /*#__PURE__*/_jsx(Box, {
-      sx: {
-        textAlign: "center"
-      },
-      children: /*#__PURE__*/_jsx(Button, {
-        onClick: buttonOnClick,
-        disabled: isSpeaking,
-        color: "secondary",
-        variant: "contained",
-        fullWidth: true,
-        sx: {
-          m: 2,
-          maxWidth: 300
-        },
-        autoFocus: isSpeaking ? "false" : "true",
-        ref: btnRef,
-        children: buttonText
-      })
-    }), isCreator && isTimeUp && /*#__PURE__*/_jsx(GameQuestionResults, {
-      t: t,
-      gameMembersCorrectAnswerTotal: gameMembersCorrectAnswerTotal,
-      gameMembersTotal: gameMembersTotal
-    }), isCreator && currentMessage?.question && !isTimeUp && /*#__PURE__*/_jsx(GameControls, {
-      t: t,
-      handleTimeUp: handleTimeUp,
-      gameMembersAnsweredTotal: gameMembersAnsweredTotal,
-      gameMembersTotal: gameMembersTotal
-    }), !isCreator && currentMessage?.question && !isTimeUp && /*#__PURE__*/_jsx(Box, {
-      sx: {
-        textAlign: "center"
-      },
-      children: /*#__PURE__*/_jsx(Fab, {
-        variant: "extended",
-        onClick: handleOpenStudentAnswerDrawer,
-        style: {
-          position: "fixed",
-          bottom: 20,
-          left: "50%",
-          transform: "translateX(-50%)",
-          backgroundColor: "white",
-          color: "purple",
-          border: "0.5px solid purple",
-          fontWeight: "600"
-        },
-        children: t("view_question")
-      })
-    })]
-  });
-  return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsx(Grid, {
-      container: true,
-      className: classes.root,
-      direction: "column",
-      spacing: 2,
-      component: "main",
-      sx: {
-        justifyContent: "center",
-        alignItems: "center",
-        maxWidth: "lg",
-        mx: "auto"
-      },
-      children: /*#__PURE__*/_jsx(Chat, {
-        languageTag: languageTag,
-        t: t,
-        repliesEnabled: roleplay.repliesEnabled,
-        translationEnabled: roleplay.translationEnabled,
-        messages: roleplayMessages || [],
-        answerAttempts: answerAttempts,
-        handleTranslate: isCreator ? handleTranslate : () => {},
-        disableHover: isCreator ? false : true,
-        learnLang: learnLang,
-        forLang: forLang,
-        voiceSpeed: voiceSpeed,
-        speak: isCreator ? speak : null,
-        stopSpeaking: stopSpeaking,
-        isSpeaking: isSpeaking,
-        isSpeakingTextContainer: isSpeakingTextContainer,
-        isPrimaryColor: true,
-        beforeElements: isCreator ? /*#__PURE__*/_jsx(BeforeElements, {
-          t: t,
-          roleplay: roleplay,
-          roleplayGame: {
-            gameId: "story",
-            gameName: "story",
-            gameDescription: "story_description"
-          },
-          gameId: "story",
-          isLiveGame: true
-        }) : null,
-        afterElements: afterElements,
-        disableScroll: !roleplayHasStarted,
-        handleCorrectQuestionAnswer: handleCorrectQuestionAnswer,
-        handleIncorrectQuestionAnswer: handleIncorrectQuestionAnswer,
-        gameId: gameId,
-        hideBottomBar: true,
-        muteSound: muteSound,
-        isLivePlayer: isCreator ? false : true,
-        isLiveGame: true,
-        disableTopBar: true,
-        time: time,
-        isTimeUp: isTimeUp,
-        handleTimeUp: handleTimeUp,
-        setCurrentAnswer: setCurrentAnswer,
-        setIsAnswered: setIsAnswered,
-        isAnswered: isAnswered,
-        handleContinue: handleContinue,
-        currentMessage: currentMessage,
-        roleplayImage: roleplay.picture,
-        answerCounts: answerCounts,
-        noAnswerCounts: noAnswerCounts
-      })
-    }), /*#__PURE__*/_jsx(AnswerResult, {
-      t: t,
-      open: isCorrectResultOpen,
-      ...answerAttempt,
-      result: "correct",
-      languageInformation: languageInformation,
-      nualaCelebratingImage: getNualaCelebratingImage(),
-      isLive: true,
-      exercise: "story",
-      roleplayAnswer: roleplayAnswer
-    }), /*#__PURE__*/_jsx(AnswerResult, {
-      t: t,
-      open: isIncorrectResultOpen,
-      ...answerAttempt,
-      result: "incorrect",
-      languageInformation: languageInformation,
-      isLive: true,
-      exercise: "story",
-      roleplayAnswer: roleplayAnswer
-    }), !isCreator && /*#__PURE__*/_jsx(StudentAnswerDrawer, {
-      t: t,
-      open: isStudentAnswerDrawerOpen,
-      question: currentMessage?.question,
-      answers: currentMessage?.answers,
-      handleClose: handleCloseStudentAnswerDrawer,
-      isLiveGame: true,
-      isTimeUp: isTimeUp,
-      setIsAnswered: setIsAnswered,
-      setCurrentAnswer: setCurrentAnswer,
-      handleContinue: handleContinue,
-      isCorrectResultOpen: isCorrectResultOpen,
-      isIncorrectResultOpen: isIncorrectResultOpen
-    })]
-  });
-}
-export default LiveStory;

package/dist/Live/LiveRoleplay/LiveStory/package.json

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