@nualang/nualang-ui-components 0.1.1399 → 0.2.0

package/dist/Exercises/Roleplay/Roleplay.js

@@ -1,399 +0,0 @@
-import { useEffect, useState, memo } from "react";
-import { Joyride, STATUS } from "react-joyride";
-import { useLocation, useNavigate, useParams } from "react-router";
-import { useTheme } from "@mui/material/styles";
-import { Slide, IconButton, Dialog, Box, Divider, Tooltip } from "@mui/material";
-import useMediaQuery from "@mui/material/useMediaQuery";
-import EditIcon from "@mui/icons-material/Create";
-import Share from "@mui/icons-material/Share";
-// components
-import TopBar from "../../Chat/TopBar/TopBar";
-import RoleplayInfo from "./RoleplayInfo/RoleplayInfo";
-import RoleplayGameOptions from "./RoleplayGameOptions/RoleplayGames";
-import RoleplayPreview from "../../Dialogs/RoleplayPreview/RoleplayPreview";
-import { formatMarkdownNewlines, searchStringToObj, objToSearchString } from "../../utils";
-import { StoryGame, FillInTheBlanksGame, ActItOutGame, ActItOutGameListening, ActItOutGameSpeaking, ActItOutGameListeningAndSpeaking } from "./Games";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-const roleplayGames = [StoryGame, FillInTheBlanksGame, ActItOutGame, ActItOutGameListening, ActItOutGameSpeaking, ActItOutGameListeningAndSpeaking];
-function Transition(props) {
-  return /*#__PURE__*/_jsx(Slide, {
-    direction: "up",
-    ...props
-  });
-}
-function Roleplay({
-  t = text => text,
-  exerciseName = "roleplay",
-  open,
-  handleClose,
-  roleplay = {},
-  handleSpeak,
-  handleStopSpeaking,
-  handleTranslate,
-  openSnackbar,
-  courseId,
-  sectionId,
-  topicId,
-  history,
-  handleComplete,
-  roleplayCreatedAtId,
-  disableViewReport,
-  handleSaveProgress,
-  handleDeleteProgress,
-  handleDeleteRoleplayProgress,
-  handleEditRoleplay,
-  handleShareRoleplay,
-  toggleMuteSound,
-  handleReportProblem,
-  correctSound,
-  incorrectSound,
-  uploadAudioAttempt,
-  languageInformation,
-  roleplayProgress,
-  roleplayCompletions,
-  clearQueue,
-  stopAudio,
-  authenticated,
-  handleSignIn,
-  courseSettings,
-  trackRecommendedEvent,
-  parentClassroom,
-  isReadWriteModeStudent
-}) {
-  const theme = useTheme();
-  const isLgScreen = useMediaQuery(theme.breakpoints.up("md"));
-  const [gameId, setGameId] = useState(null);
-  const navigate = useNavigate();
-  const location = useLocation();
-  const searchParams = searchStringToObj(location.search);
-  const searchAssignmentParams = new URLSearchParams(location.search);
-  const game = searchParams.game;
-  const assignmentId = searchAssignmentParams.get("assignmentId");
-  const params = useParams();
-  const {
-    classroomId
-  } = params;
-  const goBackToAssignment = () => {
-    navigate(`/classrooms/${classroomId}#Assignments`);
-  };
-  useEffect(() => {
-    setGameId(game);
-  }, [game]);
-  const addSearchParams = params => {
-    navigate({
-      ...location,
-      search: objToSearchString({
-        ...searchParams,
-        ...params
-      })
-    });
-  };
-  const removeSearchParams = (keys = []) => {
-    for (const key of keys) {
-      key in searchParams && delete searchParams[key];
-    }
-    navigate({
-      ...location,
-      search: objToSearchString(searchParams)
-    });
-  };
-  const handleStartGame = game => {
-    addSearchParams({
-      game
-    });
-  };
-  const joyrideSteps = [{
-    content: /*#__PURE__*/_jsx("h2", {
-      children: t("roleplay_exercise_welcome")
-    }),
-    placement: "center",
-    target: "body"
-  }, {
-    content: /*#__PURE__*/_jsxs("div", {
-      children: [/*#__PURE__*/_jsx("h2", {
-        children: t("roleplay_games")
-      }), /*#__PURE__*/_jsx("br", {}), /*#__PURE__*/_jsx("p", {
-        children: t("roleplay_games_description")
-      })]
-    }),
-    spotlightPadding: 8,
-    target: "#roleplayGame"
-  }];
-  const [joyrideState, setJoyrideState] = useState({
-    run: false,
-    steps: joyrideSteps
-  });
-  const {
-    run,
-    steps
-  } = joyrideState;
-  const handleJoyrideCallback = data => {
-    const {
-      status,
-      action
-    } = data;
-    const finishedStatuses = [STATUS.FINISHED, STATUS.SKIPPED];
-    if (finishedStatuses.includes(status) || action === "close") {
-      setJoyrideState(prevState => ({
-        ...prevState,
-        run: false
-      }));
-      localStorage.setItem(`roleplay-exercise-tour-completed`, "true");
-    }
-  };
-  useEffect(() => {
-    if (open && !localStorage.getItem(`roleplay-exercise-tour-completed`)) {
-      // Temp disable joyride - Pointing at play all button that doesn't exist
-      // setJoyrideState((prevState) => ({
-      //   ...prevState,
-      //   run: true,
-      // }));
-    }
-  }, [open]);
-  const handleNextGame = index => {
-    const idOfNextGame = games[index + 1].gameId;
-    if (gamesHidden[idOfNextGame] === false) {
-      handleStartGame(idOfNextGame);
-    } else {
-      handleNextGame(index + 1);
-    }
-  };
-  const [isPreviewDialogOpen, setIsPreviewDialogOpen] = useState(false);
-  const [previewMessages, setPreviewMessges] = useState([]);
-  const handleViewRoleplayPreview = () => {
-    setIsPreviewDialogOpen(true);
-  };
-  const handleClosePreviewDialog = () => {
-    setIsPreviewDialogOpen(false);
-  };
-  const getActorName = isA1 => {
-    return isA1 ? roleplay.actor1 && roleplay.actor1.name ? roleplay.actor1.name : t("actor", {
-      number: "1"
-    }) : roleplay.actor2 && roleplay.actor2.name ? roleplay.actor2.name : t("actor", {
-      number: "2"
-    });
-  };
-  useEffect(() => {
-    if (roleplay && roleplay.script) {
-      const tempMessages = roleplay.script.filter(l => !l?.question).map(line => {
-        const isActor1 = line.actor === 1;
-        return {
-          ...line,
-          text: formatMarkdownNewlines(line.text),
-          isMyMessage: !isActor1,
-          name: getActorName(isActor1),
-          userImage: isActor1 ? roleplay.actor1 && roleplay.actor1.picture ? roleplay.actor1.picture : null : roleplay.actor2 && roleplay.actor2.picture ? roleplay.actor2.picture : null,
-          voice: isActor1 ? roleplay.actor1 && roleplay.actor1.voice ? roleplay.actor1.voice : null : roleplay.actor2 && roleplay.actor2.voice ? roleplay.actor2.voice : null
-        };
-      });
-      setPreviewMessges(tempMessages);
-    }
-  }, [roleplay, roleplay.script, isPreviewDialogOpen]);
-  const topBarActions = /*#__PURE__*/_jsxs(_Fragment, {
-    children: [handleShareRoleplay && /*#__PURE__*/_jsx(Tooltip, {
-      title: t("share"),
-      children: /*#__PURE__*/_jsx(IconButton, {
-        color: "inherit",
-        onClick: () => handleShareRoleplay(roleplay),
-        id: "share",
-        size: "large",
-        children: /*#__PURE__*/_jsx(Share, {})
-      })
-    }), roleplay && roleplay.isCreator && handleEditRoleplay ? /*#__PURE__*/_jsx(IconButton, {
-      color: "inherit",
-      onClick: () => handleEditRoleplay(roleplay),
-      edge: "end",
-      size: "large",
-      "aria-label": "Edit",
-      children: /*#__PURE__*/_jsx(EditIcon, {})
-    }) : null]
-  });
-  const gamesHidden = {
-    story: false,
-    "fill-in-the-blanks": roleplay?.isFillInTheBlanksHidden === "true",
-    "act-it-out": roleplay?.isActItOutHidden === "true",
-    "act-it-out-listening": roleplay?.isActItOutListeningHidden === "true",
-    "act-it-out-speaking": roleplay?.isActItOutSpeakingHidden === "true",
-    "act-it-out-listening-speaking": roleplay?.isActItOutListeningSpeakingHidden === "true"
-  };
-  const games = roleplayGames.filter(rg => gamesHidden[rg.gameId] && !roleplay?.isCreator ? false : true);
-  const gamesAvailableToPlay = roleplayGames.filter(rg => !gamesHidden[rg.gameId]);
-  const gameOptions = roleplayGames.map(rg => ({
-    gameId: rg.gameId,
-    gameName: rg.gameName,
-    gameDescription: rg.gameDescription,
-    gameIcon: rg.gameIcon
-  }));
-  const handleKeyDown = event => {
-    if (event.key === "Escape") {
-      handleClose();
-    }
-  };
-  let isTranslationEnabled = roleplay.translationEnabled;
-  if (courseSettings?.translationEnabled === "enabled") {
-    isTranslationEnabled = "enable";
-  } else if (courseSettings?.translationEnabled === "disabled") {
-    isTranslationEnabled = "disable";
-  }
-  const isRoleplayEmpty = roleplay.script.length === 0 || !roleplay.script.some(line => line.text !== undefined);
-  return /*#__PURE__*/_jsxs(Dialog, {
-    fullScreen: true,
-    open: open,
-    onClose: handleClose,
-    "aria-labelledby": "roleplay-game-name",
-    "aria-modal": "true",
-    onKeyDown: handleKeyDown,
-    slots: {
-      transition: Transition
-    },
-    children: [/*#__PURE__*/_jsxs(Box, {
-      sx: {
-        display: "flex",
-        flexGrow: 1,
-        flexDirection: "column",
-        height: "100%"
-      },
-      children: [/*#__PURE__*/_jsx(TopBar, {
-        t: t,
-        title: "",
-        handleClose: handleClose,
-        isPrimaryColor: true,
-        topBarActions: topBarActions
-      }), /*#__PURE__*/_jsx(Box, {
-        sx: {
-          display: "flex",
-          justifyContent: "center"
-        },
-        component: "main",
-        children: /*#__PURE__*/_jsxs(Box, {
-          sx: {
-            margin: 2,
-            width: isLgScreen ? "100%" : "auto",
-            maxWidth: "800px"
-          },
-          children: [/*#__PURE__*/_jsx(RoleplayInfo, {
-            ...roleplay,
-            gameId: gameId,
-            t: t,
-            handleViewRoleplayPreview: handleViewRoleplayPreview,
-            authenticated: authenticated,
-            handleSignIn: handleSignIn,
-            isRoleplayEmpty: isRoleplayEmpty
-          }), /*#__PURE__*/_jsx(RoleplayPreview, {
-            open: isPreviewDialogOpen,
-            handleClose: handleClosePreviewDialog,
-            t: t,
-            translationEnabled: isTranslationEnabled,
-            currentMessages: previewMessages,
-            handleTranslate: handleTranslate,
-            handleSpeak: handleSpeak,
-            handleStopSpeaking: handleStopSpeaking,
-            learnLang: roleplay.learnLang,
-            forLang: roleplay.forLang,
-            roleplay: roleplay,
-            isReadWriteModeStudent: isReadWriteModeStudent
-          }), /*#__PURE__*/_jsx(Divider, {
-            sx: {
-              borderBottomWidth: 5
-            }
-          }), !gameId && /*#__PURE__*/_jsx(RoleplayGameOptions, {
-            t: t,
-            handleSelectRoleplayGame: handleStartGame,
-            gameList: gameOptions,
-            gamesHidden: gamesHidden,
-            roleplayCompletions: roleplayCompletions,
-            roleplayProgress: roleplayProgress,
-            authenticated: authenticated,
-            handleSignIn: handleSignIn,
-            isCreator: roleplay.isCreator,
-            isRoleplayEmpty: isRoleplayEmpty,
-            isReadWriteModeStudent: isReadWriteModeStudent,
-            learnLang: roleplay.learnLang
-          }), games.map((RoleplayGame, index) => {
-            if (RoleplayGame.gameId === gameId) {
-              return /*#__PURE__*/_jsx(RoleplayGame, {
-                t: t,
-                roleplayGame: {
-                  gameId: RoleplayGame.gameId,
-                  gameName: RoleplayGame.gameName,
-                  gameDescription: RoleplayGame.gameDescription
-                },
-                roleplay: roleplay,
-                gameId: gameId,
-                handleSpeak: handleSpeak,
-                handleStopSpeaking: handleStopSpeaking,
-                handleTranslate: handleTranslate,
-                repliesEnabled: roleplay.repliesEnabled,
-                translationEnabled: isTranslationEnabled,
-                learnLang: roleplay.learnLang,
-                forLang: roleplay.forLang,
-                handleClose: () => {
-                  removeSearchParams(["game"]);
-                },
-                exerciseName: exerciseName,
-                handleComplete: handleComplete,
-                roleplayCreatedAtId: roleplayCreatedAtId,
-                disableViewReport: disableViewReport,
-                handleSaveProgress: handleSaveProgress,
-                handleDeleteProgress: handleDeleteProgress,
-                handleDeleteRoleplayProgress: handleDeleteRoleplayProgress,
-                openSnackbar: openSnackbar,
-                courseId: courseId,
-                sectionId: sectionId,
-                topicId: topicId,
-                toggleMuteSound: toggleMuteSound,
-                history: history,
-                handleReportProblem: handleReportProblem,
-                handleShareRoleplay: handleShareRoleplay,
-                handleEditRoleplay: handleEditRoleplay,
-                correctSound: correctSound,
-                incorrectSound: incorrectSound,
-                uploadAudioAttempt: uploadAudioAttempt,
-                languageInformation: languageInformation,
-                ...roleplayProgress[`roleplay-${RoleplayGame.gameId}`],
-                hasNextGame: games[index + 1] && games[index] !== gamesAvailableToPlay[gamesAvailableToPlay.length - 1],
-                handleNextGame: () => {
-                  handleNextGame(index);
-                },
-                clearQueue: clearQueue,
-                stopAudio: stopAudio,
-                trackRecommendedEvent: trackRecommendedEvent,
-                parentClassroom: parentClassroom,
-                isReadWriteModeStudent: isReadWriteModeStudent,
-                goBackToAssignment: goBackToAssignment,
-                assignment: assignmentId,
-                classroomId: classroomId
-              }, `roleplay-game-${RoleplayGame.gameId}`);
-            }
-            return null;
-          })]
-        })
-      })]
-    }), /*#__PURE__*/_jsx(Joyride, {
-      onEvent: handleJoyrideCallback,
-      continuous: true,
-      run: run,
-      scrollToFirstStep: true,
-      steps: steps,
-      locale: {
-        back: t("back"),
-        close: t("close"),
-        last: t("last"),
-        next: t("next"),
-        skip: t("skip")
-      },
-      options: {
-        showProgress: true,
-        scrollOffset: 300,
-        zIndex: 10000,
-        arrowColor: theme.palette.background.paper,
-        backgroundColor: theme.palette.background.paper,
-        primaryColor: theme.palette.primary.main,
-        textColor: theme.palette.text.primary,
-        buttons: ['back', 'close', 'primary', 'skip']
-      }
-    })]
-  });
-}
-Roleplay.propTypes = {};
-export default /*#__PURE__*/memo(Roleplay);

package/dist/Exercises/Roleplay/Roleplay.test.js

@@ -1,30 +0,0 @@
-import { render } from "@testing-library/react";
-import { describe, it } from "vitest";
-import { MemoryRouter } from "react-router";
-import { createTheme, ThemeProvider } from "@mui/material/styles";
-import Roleplay from "./Roleplay";
-import { jsx as _jsx } from "react/jsx-runtime";
-describe("Roleplay", () => {
-  it("renders without crashing", () => {
-    let props = {
-      roleplayProgress: {
-        roleplay: {}
-      },
-      roleplay: {
-        script: ""
-      }
-    };
-    const theme = createTheme();
-    const {
-      unmount
-    } = render(/*#__PURE__*/_jsx(ThemeProvider, {
-      theme: theme,
-      children: /*#__PURE__*/_jsx(MemoryRouter, {
-        children: /*#__PURE__*/_jsx(Roleplay, {
-          ...props
-        })
-      })
-    }));
-    unmount();
-  });
-});

package/dist/Exercises/Roleplay/RoleplayGameOptions/RoleplayGame/RoleplayGame.js

@@ -1,194 +0,0 @@
-import Typography from "@mui/material/Typography";
-import Avatar from "@mui/material/Avatar";
-import { Card, ListItemAvatar, ListItemText, ListItem, Badge } from "@mui/material";
-import { makeStyles } from "tss-react/mui";
-import Person from "@mui/icons-material/Person";
-import Done from "@mui/icons-material/Done";
-import Timelapse from "@mui/icons-material/Timelapse";
-import { useTheme } from "@mui/material/styles";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const useStyles = makeStyles()(theme => ({
-  listItemSelected: {
-    boxShadow: `inset 4px 0px 0px ${theme.palette.primary.main}`
-  },
-  avatar: {
-    backgroundColor: theme.palette.primary.main,
-    display: "flex",
-    flexDirection: "space-between",
-    borderRadius: theme.spacing()
-  },
-  greenColor: {
-    color: theme.palette.success ? theme.palette.success.dark : ""
-  },
-  infoColor: {
-    color: theme.palette.info ? theme.palette.info.main : ""
-  },
-  margin: {
-    marginTop: theme.spacing(2),
-    marginRight: theme.spacing(2),
-    marginBottom: theme.spacing(2)
-  },
-  srOnly: {
-    position: "absolute",
-    width: "1px",
-    height: "1px",
-    padding: 0,
-    margin: "-1px",
-    overflow: "hidden",
-    clip: "rect(0, 0, 0, 0)",
-    whiteSpace: "nowrap",
-    border: 0
-  }
-}));
-function ProgressBadge({
-  classes,
-  completions,
-  gameId,
-  t,
-  gameName
-}) {
-  let completionCounter = 0;
-  if (completions && completions.length > 0) {
-    for (let i = 0; i < completions.length; i++) {
-      if (completions[i].exercise === `roleplay-${gameId}`) {
-        completionCounter += 1;
-      }
-    }
-  }
-  return completionCounter > 0 ? /*#__PURE__*/_jsx(Badge, {
-    className: `${classes.greenColor} ${classes.margin}`,
-    badgeContent: completionCounter,
-    color: "default",
-    children: /*#__PURE__*/_jsx(Done, {
-      titleAccess: completionCounter === 1 ? t("roleplay_game_completed_icon", {
-        counter: `${completionCounter}`,
-        roleplay_name: `${gameName}`
-      }) : t("roleplay_games_completed_icon", {
-        counter: `${completionCounter}`,
-        roleplay_name: `${gameName}`
-      }),
-      "aria-label": completionCounter === 1 ? t("roleplay_game_completed_icon", {
-        counter: `${completionCounter}`,
-        roleplay_name: `${gameName}`
-      }) : t("roleplay_games_completed_icon", {
-        counter: `${completionCounter}`,
-        roleplay_name: `${gameName}`
-      })
-    })
-  }) : null;
-}
-function InProgressBadge({
-  classes,
-  roleplayProgress,
-  gameId,
-  t,
-  gameName
-}) {
-  let progressCount = 0;
-  if (roleplayProgress) {
-    if (roleplayProgress[`roleplay-${gameId}`] && roleplayProgress[`roleplay-${gameId}`].existingMessages && roleplayProgress[`roleplay-${gameId}`].existingMessages !== null && Object.keys(roleplayProgress[`roleplay-${gameId}`].existingMessages).length) progressCount = Object.keys(roleplayProgress[`roleplay-${gameId}`].existingMessages).length;
-  }
-  return progressCount > 0 ? /*#__PURE__*/_jsx(Badge, {
-    className: `${classes.infoColor} ${classes.margin}`,
-    color: "default",
-    children: /*#__PURE__*/_jsx(Timelapse, {
-      titleAccess: t("roleplay_game_in_progress_icon", {
-        roleplay_name: `${gameName}`
-      }),
-      "aria-label": t("roleplay_game_in_progress_icon", {
-        roleplay_name: `${gameName}`
-      })
-    })
-  }) : null;
-}
-function RoleplayGame({
-  t = text => text,
-  gameId,
-  gameIcon,
-  gameName,
-  gameDescription,
-  handleSelectRoleplayGame,
-  roleplayCompletions,
-  roleplayProgress,
-  authenticated,
-  handleSignIn,
-  isGameHidden,
-  isRoleplayEmpty
-}) {
-  const {
-    classes
-  } = useStyles();
-  const theme = useTheme();
-  return /*#__PURE__*/_jsxs(ListItem, {
-    alignItems: "flex-start",
-    disabled: isGameHidden || isRoleplayEmpty,
-    onClick: authenticated ? () => handleSelectRoleplayGame(gameId) : () => handleSignIn(),
-    button: true,
-    divider: true,
-    classes: {
-      selected: classes.listItemSelected
-    },
-    id: `roleplay-game-${gameId}`,
-    component: Card,
-    sx: {
-      mb: 2,
-      ml: 2,
-      mr: 2,
-      borderRadius: "1.5em",
-      border: "2px solid transparent",
-      //prevents shifting on hover
-      "&: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: 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
-      })
-    }), /*#__PURE__*/_jsx(InProgressBadge, {
-      classes: classes,
-      roleplayProgress: roleplayProgress,
-      gameId: gameId,
-      t: t,
-      gameName: gameName
-    }), /*#__PURE__*/_jsx(ProgressBadge, {
-      classes: classes,
-      gameId: gameId,
-      completions: roleplayCompletions,
-      t: t,
-      gameName: gameName
-    })]
-  });
-}
-RoleplayGame.propTypes = {};
-export default RoleplayGame;

package/dist/Exercises/Roleplay/RoleplayGameOptions/RoleplayGame/RoleplayGame.test.js

@@ -1,23 +0,0 @@
-import { render } from "@testing-library/react";
-import { describe, it } from "vitest";
-import { MemoryRouter } from "react-router";
-import { createTheme, ThemeProvider } from "@mui/material/styles";
-import RoleplayGame from "./RoleplayGame";
-import { jsx as _jsx } from "react/jsx-runtime";
-describe("RoleplayGame", () => {
-  it("renders without crashing", () => {
-    let props = {};
-    const theme = createTheme();
-    const {
-      unmount
-    } = render(/*#__PURE__*/_jsx(ThemeProvider, {
-      theme: theme,
-      children: /*#__PURE__*/_jsx(MemoryRouter, {
-        children: /*#__PURE__*/_jsx(RoleplayGame, {
-          ...props
-        })
-      })
-    }));
-    unmount();
-  });
-});

package/dist/Exercises/Roleplay/RoleplayGameOptions/RoleplayGame/package.json

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