@nualang/nualang-ui-components 0.1.1399 → 0.2.0

package/dist/Dialogs/ReportProblem/ReportProblem.js

@@ -1,287 +0,0 @@
-import { useState, useEffect, useCallback } from "react";
-// components
-import ResponsiveDialog from "../ResponsiveDialog/ResponsiveDialog";
-import InputHelper from "../../Forms/InputHelper/InputHelper";
-import Grid from "@mui/material/Grid";
-import MenuItem from "@mui/material/MenuItem";
-import Typography from "@mui/material/Typography";
-import { TextField, FormGroup, FormControlLabel, Checkbox, Button } from "@mui/material";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-const initialProblem = {
-  type: "",
-  description: ""
-};
-function ReportProblem({
-  t = text => text,
-  open,
-  handleClose,
-  handleReportProblem,
-  openSnackbar,
-  currentPhrase,
-  isQuestion,
-  parentClassroom,
-  exercise,
-  audioBlob
-}) {
-  const [problem, setProblem] = useState(initialProblem);
-  const [enableButton, setEnableButton] = useState(false);
-  const [shareAudioChecked, setShareAudioChecked] = useState(true);
-  const [isDialogTemporarilyClosed, setIsDialogTemporarilyClosed] = useState(false);
-  const [shareScreenshotChecked, setShareScreenshotChecked] = useState(false);
-  const [screenshot, setScreenshot] = useState(null);
-  const {
-    description,
-    type
-  } = problem;
-  const isTechnicalProblem = type === "technical_problem";
-  const isShareAudioAvailable = isTechnicalProblem && audioBlob;
-  const isScreenshotAvailable = isTechnicalProblem && screenshot;
-  useEffect(() => {
-    if (type && description.trim().length > 0) {
-      setEnableButton(true);
-    } else {
-      setEnableButton(false);
-    }
-  }, [description, type]);
-  const handleInputChange = event => {
-    const {
-      name,
-      value
-    } = event.target;
-    setProblem(prevProblem => ({
-      ...prevProblem,
-      [name]: value,
-      currentPhrase: currentPhrase,
-      isQuestion: isQuestion ? isQuestion : false
-    }));
-  };
-  const problemTypes = [{
-    label: "equipment_problem_label",
-    value: "equipment_problem",
-    example: "equipment_problem_example"
-  }, {
-    label: "technical_problem_label",
-    value: "technical_problem",
-    example: "technical_problem_example"
-  }, {
-    label: "content_problem_label",
-    value: "content_problem",
-    example: "content_problem_example"
-  }, {
-    label: "other",
-    value: "other"
-  }];
-  const filteredProblemTypes = problemTypes.filter(pType => {
-    if (pType.value === "equipment_problem" && (!parentClassroom || Object.keys(parentClassroom).length === 0 && parentClassroom.constructor === Object)) {
-      return false;
-    }
-    return true;
-  });
-  const problemTypeOptions = filteredProblemTypes.map((pType, idx) => {
-    const keyId = `problemtypes_${idx}`;
-    return /*#__PURE__*/_jsxs(MenuItem, {
-      value: pType.value,
-      sx: {
-        whiteSpace: "normal"
-      },
-      children: [t(pType.label), " ", pType.example && /*#__PURE__*/_jsx(Typography, {
-        variant: "caption",
-        color: "textSecondary",
-        sx: {
-          ml: 0.5
-        },
-        children: t(pType.example)
-      })]
-    }, keyId);
-  });
-  const captureScreenshot = useCallback(async () => {
-    try {
-      setIsDialogTemporarilyClosed(true);
-      const captureStream = await navigator.mediaDevices.getDisplayMedia({
-        video: true,
-        preferCurrentTab: true
-      });
-      const video = document.createElement("video");
-      video.srcObject = captureStream;
-      await new Promise(resolve => {
-        video.onloadedmetadata = () => resolve();
-      });
-      const canvas = document.createElement("canvas");
-      const context = canvas.getContext("2d");
-      canvas.width = video.videoWidth;
-      canvas.height = video.videoHeight;
-      video.play();
-      context.drawImage(video, 0, 0, canvas.width, canvas.height);
-      captureStream.getTracks().forEach(track => track.stop());
-      const screenshotData = canvas.toDataURL("image/png");
-      setScreenshot(screenshotData);
-      video.srcObject = null;
-      video.remove();
-      setIsDialogTemporarilyClosed(false);
-    } catch (err) {
-      console.error("Error capturing screenshot:", err);
-      openSnackbar("Failed to capture screenshot. Please check your browser permissions.", "error");
-      setIsDialogTemporarilyClosed(false);
-      setShareScreenshotChecked(false);
-    }
-  }, []);
-  const handleClickShareScreenshotCheckbox = useCallback(event => {
-    const isChecked = event.target.checked;
-    setShareScreenshotChecked(isChecked);
-    if (isChecked) {
-      captureScreenshot();
-    } else {
-      setScreenshot(null);
-    }
-  }, [captureScreenshot]);
-  const removeScreenshot = () => {
-    setScreenshot(null);
-    setShareScreenshotChecked(false);
-  };
-  const handleClickShareAudioCheckbox = useCallback(event => {
-    setShareAudioChecked(event.target.checked);
-  }, []);
-  const onSubmit = () => {
-    try {
-      const audioToSend = isShareAudioAvailable && shareAudioChecked ? audioBlob : null;
-      const screenshotToSend = isScreenshotAvailable && shareScreenshotChecked ? screenshot : null;
-
-      // Call handleReportProblem, passing audio, screenshot, and their corresponding check states
-      handleReportProblem(problem, shareAudioChecked, audioToSend, shareScreenshotChecked, screenshotToSend);
-      setShareScreenshotChecked(false);
-      handleClose();
-      setProblem(initialProblem);
-      setScreenshot(null);
-      setShareAudioChecked(true);
-    } catch (error) {
-      console.error(error);
-    }
-  };
-  return /*#__PURE__*/_jsx(ResponsiveDialog, {
-    open: open && !isDialogTemporarilyClosed,
-    handleClose: handleClose,
-    handleSubmit: onSubmit,
-    dialogTitle: t("report_problem"),
-    submitText: t("report_problem"),
-    isSubmitDisabled: !enableButton,
-    openSnackbar: openSnackbar,
-    children: /*#__PURE__*/_jsxs(Grid, {
-      container: true,
-      sx: {
-        width: "100%"
-      },
-      spacing: 1,
-      children: [/*#__PURE__*/_jsxs(Grid, {
-        size: 12,
-        children: [/*#__PURE__*/_jsx(Typography, {
-          sx: {
-            fontSize: 14,
-            opacity: 0.8,
-            marginBottom: 1
-          },
-          children: t("required_field")
-        }), /*#__PURE__*/_jsx(TextField, {
-          select: true,
-          id: "type",
-          name: "type",
-          "data-cy": "type",
-          label: t("type"),
-          value: type,
-          onChange: handleInputChange,
-          margin: "normal",
-          variant: "outlined",
-          fullWidth: true,
-          required: true,
-          autoFocus: true,
-          children: problemTypeOptions
-        })]
-      }), /*#__PURE__*/_jsx(Grid, {
-        size: 12,
-        children: /*#__PURE__*/_jsx(InputHelper, {
-          t: t,
-          label: t("report_problem_input_label"),
-          multiline: true,
-          rows: "6",
-          value: description,
-          name: "description",
-          onChange: handleInputChange,
-          variant: "outlined",
-          fullWidth: true,
-          required: true
-        })
-      }), isShareAudioAvailable && /*#__PURE__*/_jsx(Grid, {
-        size: 12,
-        children: /*#__PURE__*/_jsx(FormGroup, {
-          children: /*#__PURE__*/_jsx(FormControlLabel, {
-            control: /*#__PURE__*/_jsx(Checkbox, {
-              checked: shareAudioChecked,
-              onChange: handleClickShareAudioCheckbox,
-              name: "shareAudio",
-              size: "small",
-              slotProps: {
-                input: {
-                  "aria-label": t("share_audio")
-                }
-              }
-            }),
-            label: /*#__PURE__*/_jsx(Typography, {
-              sx: {
-                fontSize: 14
-              },
-              children: t("share_audio")
-            })
-          })
-        })
-      }), isTechnicalProblem && /*#__PURE__*/_jsxs(_Fragment, {
-        children: [/*#__PURE__*/_jsx(Grid, {
-          size: 12,
-          children: /*#__PURE__*/_jsx(FormGroup, {
-            children: /*#__PURE__*/_jsx(FormControlLabel, {
-              control: /*#__PURE__*/_jsx(Checkbox, {
-                checked: shareScreenshotChecked,
-                onChange: handleClickShareScreenshotCheckbox,
-                name: "shareScreenshot",
-                size: "small",
-                slotProps: {
-                  input: {
-                    "aria-label": t("share_screenshot")
-                  }
-                }
-              }),
-              label: /*#__PURE__*/_jsx(Typography, {
-                sx: {
-                  fontSize: 14
-                },
-                children: t("share_screenshot")
-              })
-            })
-          })
-        }), screenshot && /*#__PURE__*/_jsxs(Grid, {
-          size: 12,
-          children: [/*#__PURE__*/_jsx(Typography, {
-            sx: {
-              fontSize: 14,
-              marginBottom: 1
-            },
-            children: t("screenshot_captured")
-          }), /*#__PURE__*/_jsx("img", {
-            src: screenshot,
-            alt: "Captured Screenshot",
-            style: {
-              width: "100%",
-              height: "auto",
-              marginBottom: "1em"
-            }
-          }), /*#__PURE__*/_jsx(Button, {
-            variant: "outlined",
-            color: "primary",
-            onClick: removeScreenshot,
-            size: "small",
-            children: t("remove")
-          })]
-        })]
-      })]
-    })
-  });
-}
-export default ReportProblem;

package/dist/Dialogs/ReportProblem/ReportProblem.test.js

@@ -1,15 +0,0 @@
-import ReportProblem from "./ReportProblem";
-import { props } from "./ReportProblem.stories";
-import { render } from "@testing-library/react";
-import { describe, it } from "vitest";
-import { jsx as _jsx } from "react/jsx-runtime";
-describe("ReportProblem", () => {
-  it("renders without crashing", () => {
-    const {
-      unmount
-    } = render(/*#__PURE__*/_jsx(ReportProblem, {
-      ...props
-    }));
-    unmount();
-  });
-});

package/dist/Dialogs/ReportProblem/package.json

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

package/dist/Dialogs/ResponsiveDialog/ResponsiveDialog.js

@@ -1,105 +0,0 @@
-import { forwardRef } from "react";
-import Button from "@mui/material/Button";
-import Dialog from "@mui/material/Dialog";
-import DialogTitle from "@mui/material/DialogTitle";
-import DialogActions from "@mui/material/DialogActions";
-import DialogContent from "@mui/material/DialogContent";
-import useMediaQuery from "@mui/material/useMediaQuery";
-import { useTheme } from "@mui/material/styles";
-import { makeStyles } from "tss-react/mui";
-import Slide from "@mui/material/Slide";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const useStyles = makeStyles()(() => ({
-  paper: {
-    paddingTop: `env(safe-area-inset-top)`,
-    paddingBottom: `env(safe-area-inset-bottom)`,
-    paddingLeft: `env(safe-area-inset-left)`,
-    paddingRight: `env(safe-area-inset-right)`
-  }
-}));
-const Transition = /*#__PURE__*/forwardRef(function Transition(props, ref) {
-  return /*#__PURE__*/_jsx(Slide, {
-    direction: "up",
-    ref: ref,
-    ...props
-  });
-});
-export default function ResponsiveDialog({
-  open,
-  handleClose,
-  handleSubmit,
-  t = text => text,
-  submitText,
-  closeText,
-  dialogTitle,
-  isFullScreen,
-  isSubmitDisabled,
-  children,
-  style,
-  fullScreenDisabled = false,
-  maxWidth = "sm",
-  fullWidth = true,
-  dialogContentClassName,
-  TransitionComponent,
-  className,
-  transitionDuration,
-  keepDialogMounted = false,
-  isExperimentalFeature = false,
-  startIcon,
-  disableRestoreFocus,
-  isGenerating
-}) {
-  const {
-    classes
-  } = useStyles();
-  const theme = useTheme();
-  const fullScreen = useMediaQuery(theme.breakpoints.down("md"));
-  return /*#__PURE__*/_jsxs(Dialog, {
-    fullScreen: isFullScreen || fullScreen && !fullScreenDisabled,
-    fullWidth: fullWidth,
-    maxWidth: maxWidth,
-    open: open,
-    onClose: handleClose,
-    "aria-label": dialogTitle,
-    transitionDuration: transitionDuration,
-    keepMounted: keepDialogMounted,
-    classes: {
-      paper: classes.paper
-    },
-    style: {
-      ...style
-    },
-    className: className,
-    disableRestoreFocus: disableRestoreFocus ? disableRestoreFocus : false,
-    slots: {
-      transition: TransitionComponent
-    },
-    children: [dialogTitle && /*#__PURE__*/_jsx(DialogTitle, {
-      children: dialogTitle
-    }), /*#__PURE__*/_jsx(DialogContent, {
-      className: dialogContentClassName,
-      children: children
-    }), (handleClose || handleSubmit) && /*#__PURE__*/_jsxs(DialogActions, {
-      children: [handleClose && /*#__PURE__*/_jsx(Button, {
-        "data-cy": "close-responsive-dialog",
-        onClick: handleClose,
-        color: "primary",
-        children: closeText ? closeText : t("close")
-      }), handleSubmit && /*#__PURE__*/_jsx(Button, {
-        color: isExperimentalFeature ? "secondary" : isGenerating ? "success" : "primary",
-        variant: "contained",
-        "data-cy": "submit-dialog",
-        onClick: handleSubmit,
-        disabled: isSubmitDisabled,
-        startIcon: startIcon ? startIcon : null,
-        children: submitText ? submitText : "Submit"
-      })]
-    })]
-  });
-}
-export function ResponsiveDialogSlideUp(props) {
-  return /*#__PURE__*/_jsx(ResponsiveDialog, {
-    TransitionComponent: Transition,
-    ...props
-  });
-}

package/dist/Dialogs/ResponsiveDialog/ResponsiveDialog.test.js

@@ -1,15 +0,0 @@
-import ResponsiveDialog from "./ResponsiveDialog";
-import { props } from "./ResponsiveDialog.stories";
-import { render } from "@testing-library/react";
-import { describe, it } from "vitest";
-import { jsx as _jsx } from "react/jsx-runtime";
-describe("ResponsiveDialog", () => {
-  it("renders without crashing", () => {
-    const {
-      unmount
-    } = render(/*#__PURE__*/_jsx(ResponsiveDialog, {
-      ...props
-    }));
-    unmount();
-  });
-});

package/dist/Dialogs/ResponsiveDialog/package.json

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

package/dist/Dialogs/RewardEarned/RewardEarned.js

@@ -1,111 +0,0 @@
-import { useState, useEffect } from "react";
-import DialogContentText from "@mui/material/DialogContentText";
-import ResponsiveDialog from "../ResponsiveDialog/ResponsiveDialog";
-import MedalSelector from "../../Misc/MedalSelector/MedalSelector";
-import { Typography, Avatar, Box } from "@mui/material";
-import { keyframes } from "@emotion/react";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const rock = keyframes`
-  0% {
-    transform: rotate(-10deg);
-  }
-  50% {
-    transform: rotate(10deg);
-  }
-  100% {
-    transform: rotate(-10deg);
-  }
-`;
-const glowPulse = glowColor => keyframes`
-  0% {
-    box-shadow: 0 0 0 0 ${glowColor};
-  }
-  50% {
-    box-shadow: 0 0 0 15px ${glowColor.replace(", 0.7)", ", 0)")};
-  }
-  100% {
-    box-shadow: 0 0 0 0 ${glowColor.replace(", 0.7)", ", 0)")};
-  }
-`;
-function RewardEarned({
-  t = text => text,
-  open,
-  handleClose,
-  gameMembersHistory,
-  userImage,
-  memberId
-}) {
-  const [position, setPosition] = useState();
-  useEffect(() => {
-    if (open) {
-      const lastGameMembers = gameMembersHistory[gameMembersHistory.length - 1];
-      const sortedMembers = [...lastGameMembers].sort((a, b) => b.score - a.score);
-      const topScores = sortedMembers.slice(0, 3).map(member => member.score);
-      const finalScore = lastGameMembers.find(m => m.memberId === memberId)?.score ?? 0;
-      let position;
-      if (finalScore === topScores[0]) {
-        position = 1;
-      } else if (finalScore === topScores[1]) {
-        position = 2;
-      } else if (finalScore === topScores[2]) {
-        position = 3;
-      } else {
-        position = null;
-      }
-      setPosition(position);
-    }
-  }, [gameMembersHistory, memberId, open]);
-  return /*#__PURE__*/_jsx(ResponsiveDialog, {
-    open: open && [1, 2, 3].includes(position),
-    handleClose: handleClose,
-    children: /*#__PURE__*/_jsxs(DialogContentText, {
-      sx: {
-        textAlign: "center"
-      },
-      children: [/*#__PURE__*/_jsx(Typography, {
-        variant: "h3",
-        sx: {
-          fontWeight: "bold"
-        },
-        children: t("congratulations")
-      }), /*#__PURE__*/_jsxs(Box, {
-        sx: {
-          position: "relative",
-          display: "inline-block",
-          margin: "auto",
-          marginTop: "20px",
-          marginBottom: "20px"
-        },
-        children: [/*#__PURE__*/_jsx(Avatar, {
-          sx: {
-            width: "270px",
-            height: "270px",
-            margin: "auto"
-          },
-          src: userImage,
-          alt: "Member Avatar"
-        }), [1, 2, 3].includes(position) && /*#__PURE__*/_jsx("div", {
-          children: /*#__PURE__*/_jsx(MedalSelector, {
-            color: position === 1 ? "gold" : position === 2 ? "silver" : "bronze",
-            width: 95,
-            fade: false,
-            backgroundColor: true,
-            sx: {
-              position: "absolute",
-              padding: "2px",
-              bottom: "-3px",
-              right: "-25px",
-              borderRadius: "50%",
-              animation: `${rock} 3s infinite ease-in-out, ${glowPulse(position === 1 ? "rgba(255, 204, 0, 0.7)" : position === 2 ? "rgba(192, 192, 192, 0.7)" : "rgba(205, 127, 50, 0.7)")} 2s infinite ease-in-out`,
-              boxShadow: `0 0 0 0 ${position === 1 ? "rgba(255, 204, 0, 0.7)" : position === 2 ? "rgba(192, 192, 192, 0.7)" : "rgba(205, 127, 50, 0.7)"}`
-            }
-          })
-        })]
-      }), /*#__PURE__*/_jsx(Typography, {
-        variant: "h6",
-        children: t("medal_has_been_added_to_your_profile")
-      })]
-    })
-  });
-}
-export default RewardEarned;

package/dist/Dialogs/RewardEarned/package.json

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

package/dist/Dialogs/RoleplayPreview/RoleplayPreview.js

@@ -1,87 +0,0 @@
-import { Dialog } from "@mui/material";
-// components
-import Chat from "../../Chat/Chat";
-import BeforeElements from "../../Exercises/Roleplay/Games/BeforeElements";
-import useExerciseState from "../../hooks/useExerciseState";
-import TopBarActions from "../../Exercises/Roleplay/Games/TopBarActions";
-import { jsx as _jsx } from "react/jsx-runtime";
-function RoleplayPreview({
-  t = text => text,
-  open,
-  handleClose,
-  translationEnabled,
-  currentMessages,
-  handleTranslate,
-  handleSpeak,
-  learnLang,
-  forLang,
-  roleplay,
-  handleStopSpeaking,
-  isReadWriteModeStudent = false
-}) {
-  const exerciseState = useExerciseState({
-    t,
-    open: false,
-    handleClose,
-    handleSpeak,
-    handleStopSpeaking,
-    learnLang
-  });
-  const {
-    speak,
-    stopSpeaking,
-    isSpeaking,
-    isSpeakingTextContainer,
-    voiceSpeed,
-    isVoiceSpeedMenuOpen,
-    handleOpenVoiceSpeedMenu,
-    handleCloseVoiceSpeedMenu,
-    handleChangeVoiceSpeed
-  } = exerciseState;
-  const roleplayPreview = {
-    gameName: t("roleplay_preview"),
-    gameDescription: t("roleplay_preview_decription")
-  };
-  return /*#__PURE__*/_jsx(Dialog, {
-    fullScreen: true,
-    open: open,
-    onClose: handleClose,
-    children: /*#__PURE__*/_jsx(Chat, {
-      t: t,
-      translationEnabled: translationEnabled,
-      messages: currentMessages,
-      handleTranslate: handleTranslate,
-      learnLang: learnLang,
-      forLang: forLang,
-      isPrimaryColor: true,
-      handleClose: handleClose,
-      disableScroll: true,
-      printEnabled: true,
-      beforeElements: /*#__PURE__*/_jsx(BeforeElements, {
-        t: t,
-        roleplay: roleplay,
-        roleplayGame: roleplayPreview,
-        gameId: "preview"
-      }),
-      hideBottomBar: true,
-      speak: speak,
-      stopSpeaking: stopSpeaking,
-      isSpeaking: isSpeaking,
-      isSpeakingTextContainer: isSpeakingTextContainer,
-      muteSound: isReadWriteModeStudent,
-      topBarActions: /*#__PURE__*/_jsx(TopBarActions, {
-        t: t,
-        voiceSpeed: voiceSpeed,
-        isVoiceSpeedMenuOpen: isVoiceSpeedMenuOpen,
-        handleOpenVoiceSpeedMenu: handleOpenVoiceSpeedMenu,
-        handleCloseVoiceSpeedMenu: handleCloseVoiceSpeedMenu,
-        handleChangeVoiceSpeed: handleChangeVoiceSpeed,
-        isRoleplayPreview: true,
-        currentMessages: currentMessages,
-        roleplay: roleplay,
-        exercise: "preview"
-      })
-    })
-  });
-}
-export default RoleplayPreview;