@nualang/nualang-ui-components 0.1.1399 → 0.2.0

package/dist/Misc/OnboardingEnrolment/ClassCodeInvalid.js

@@ -1,14 +0,0 @@
-import Typography from "@mui/material/Typography";
-import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-export default function ClassCodeInvalid({
-  t,
-  invalidCourseCode
-}) {
-  return /*#__PURE__*/_jsx(_Fragment, {
-    children: invalidCourseCode ? /*#__PURE__*/_jsx(Typography, {
-      variant: "subtitle1",
-      color: "error",
-      children: t("course_code_not_valid")
-    }) : null
-  });
-}

package/dist/Misc/OnboardingEnrolment/ClassroomCodeInvalid.js

@@ -1,14 +0,0 @@
-import Typography from "@mui/material/Typography";
-import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-export default function ClasroomCodeInvalid({
-  t,
-  invalidClassroomCode
-}) {
-  return /*#__PURE__*/_jsx(_Fragment, {
-    children: invalidClassroomCode ? /*#__PURE__*/_jsx(Typography, {
-      variant: "subtitle1",
-      color: "error",
-      children: t("classroom_code_not_valid")
-    }) : null
-  });
-}

package/dist/Misc/OnboardingEnrolment/EnrolKey.js

@@ -1,14 +0,0 @@
-import Typography from "@mui/material/Typography";
-import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-export default function EnrolKey({
-  t,
-  enrolmentKeyInvalid
-}) {
-  return /*#__PURE__*/_jsx(_Fragment, {
-    children: enrolmentKeyInvalid ? /*#__PURE__*/_jsx(Typography, {
-      variant: "subtitle1",
-      color: "error",
-      children: t("enrolment_key_not_valid")
-    }) : null
-  });
-}

package/dist/Misc/Overlay/Overlay.js

@@ -1,59 +0,0 @@
-import PropTypes from "prop-types";
-import { makeStyles } from "tss-react/mui";
-import Card from "@mui/material/Card";
-import CardContent from "@mui/material/CardContent";
-import Typography from "@mui/material/Typography";
-import Button from "@mui/material/Button";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const useStyles = makeStyles()(theme => ({
-  overlay: {
-    position: "absolute",
-    top: "0px",
-    left: "0px",
-    bottom: "0px",
-    right: "0px",
-    backgroundColor: "rgba(0, 0, 0, 0.5)",
-    borderRadius: theme.spacing(),
-    backdropFilter: "blur(4px)",
-    "-webkit-backdrop-filter": "blur(5px)",
-    textAlign: "center",
-    padding: "64px"
-  },
-  overlayCard: {
-    maxWidth: "500px",
-    margin: "auto"
-  }
-}));
-function Overlay({
-  description = "join_course_to_access",
-  onClick = () => {},
-  buttonText = "join"
-}) {
-  const {
-    classes
-  } = useStyles();
-  return /*#__PURE__*/_jsx("div", {
-    className: classes.overlay,
-    children: /*#__PURE__*/_jsx(Card, {
-      className: classes.overlayCard,
-      children: /*#__PURE__*/_jsxs(CardContent, {
-        children: [/*#__PURE__*/_jsx(Typography, {
-          variant: "h6",
-          gutterBottom: true,
-          children: description
-        }), /*#__PURE__*/_jsx(Button, {
-          variant: "outlined",
-          color: "primary",
-          onClick: onClick,
-          children: buttonText
-        })]
-      })
-    })
-  });
-}
-Overlay.propTypes = {
-  description: PropTypes.string.isRequired,
-  onClick: PropTypes.func.isRequired,
-  buttonText: PropTypes.func.isRequired
-};
-export default Overlay;

package/dist/Misc/Overlay/package.json

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

package/dist/Misc/PhraseDisplay/PhraseDisplay.js

@@ -1,123 +0,0 @@
-import { Box, Typography, Tooltip, Avatar } from "@mui/material";
-import { makeStyles } from "tss-react/mui";
-import GTranslateIcon from "@mui/icons-material/GTranslate";
-import MenuBookIcon from "@mui/icons-material/MenuBook";
-import ImageSearchIcon from "@mui/icons-material/ImageSearch";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const useStyles = makeStyles()(theme => ({
-  translationRow: {
-    display: "flex",
-    alignItems: "flex-start",
-    gap: "6px",
-    lineHeight: 1.2
-  },
-  iconBeforeText: {
-    display: "inline-flex",
-    alignItems: "center",
-    justifyContent: "center",
-    width: 14,
-    height: 14,
-    color: theme.palette.text.secondary,
-    marginTop: 1,
-    flexShrink: 0
-  },
-  translationsText: {
-    whiteSpace: "normal"
-  },
-  definitionsText: {
-    whiteSpace: "normal"
-  }
-}));
-function PhraseDisplay({
-  phrase = "",
-  translations = [],
-  definitions = [],
-  alternativeVersions = [],
-  picture = "",
-  t = text => text,
-  variant = "body2",
-  showIcons = true,
-  showImage = true
-}) {
-  const {
-    classes
-  } = useStyles();
-  const primaryText = `${phrase}${Array.isArray(alternativeVersions) && alternativeVersions.length ? " - " : ""}${(alternativeVersions || []).join(", ")}`;
-  const hasDefinitions = (definitions || []).length > 0;
-  const hasTranslations = (translations || []).length > 0;
-  return /*#__PURE__*/_jsxs(Box, {
-    sx: {
-      display: "flex",
-      flexDirection: "row",
-      gap: 1.5,
-      alignItems: "flex-start"
-    },
-    children: [showImage && (picture ? /*#__PURE__*/_jsx(Avatar, {
-      src: picture,
-      alt: "",
-      sx: {
-        width: 40,
-        height: 40,
-        flexShrink: 0,
-        mt: 1,
-        mr: 1
-      }
-    }) : /*#__PURE__*/_jsx(Avatar, {
-      alt: "",
-      sx: {
-        width: 40,
-        height: 40,
-        flexShrink: 0,
-        mt: 1,
-        mr: 1
-      },
-      children: /*#__PURE__*/_jsx(ImageSearchIcon, {})
-    })), /*#__PURE__*/_jsxs(Box, {
-      children: [/*#__PURE__*/_jsx(Typography, {
-        variant: "body1",
-        children: primaryText
-      }), hasTranslations && /*#__PURE__*/_jsxs(Box, {
-        className: classes.translationRow,
-        sx: {
-          mt: 0.75
-        },
-        children: [showIcons && /*#__PURE__*/_jsx(Tooltip, {
-          title: t("translation") || "Translation",
-          children: /*#__PURE__*/_jsx("span", {
-            className: classes.iconBeforeText,
-            "aria-hidden": true,
-            children: /*#__PURE__*/_jsx(GTranslateIcon, {
-              fontSize: "small"
-            })
-          })
-        }), /*#__PURE__*/_jsx(Typography, {
-          variant: variant,
-          color: "textSecondary",
-          className: classes.translationsText,
-          children: (translations || []).join(", ")
-        })]
-      }), hasDefinitions && /*#__PURE__*/_jsxs(Box, {
-        className: classes.translationRow,
-        sx: {
-          mt: 0.5
-        },
-        children: [showIcons && /*#__PURE__*/_jsx(Tooltip, {
-          title: t("definition") || "Definition",
-          children: /*#__PURE__*/_jsx("span", {
-            className: classes.iconBeforeText,
-            "aria-hidden": true,
-            children: /*#__PURE__*/_jsx(MenuBookIcon, {
-              fontSize: "small"
-            })
-          })
-        }), /*#__PURE__*/_jsx(Typography, {
-          variant: variant,
-          color: "textSecondary",
-          className: classes.definitionsText,
-          children: (definitions || []).join("; ")
-        })]
-      })]
-    })]
-  });
-}
-export default PhraseDisplay;

package/dist/Misc/ProgressiveCardMedia/ProgressiveCardMedia.js

@@ -1,38 +0,0 @@
-import { memo } from "react";
-import MuiCardMedia from "@mui/material/CardMedia";
-import { styled } from "@mui/system";
-import useProgressiveImg from "../../hooks/useProgressiveImg";
-import { jsx as _jsx } from "react/jsx-runtime";
-const CardMedia = styled(MuiCardMedia, {
-  shouldForwardProp: prop => {
-    return prop === "image" || prop === "role" || prop === "ref" || prop === "alt" || prop === "sx";
-  }
-})(({
-  blur
-}) => ({
-  filter: blur ? "blur(5px)" : "none",
-  transition: blur ? "none" : "filter 0.3s ease-out"
-}));
-function ProgressiveCardMedia({
-  sx,
-  lowQualitySrc,
-  highQualitySrc,
-  placeholderRef
-}) {
-  const [src, {
-    blur
-  }] = useProgressiveImg(lowQualitySrc, highQualitySrc);
-  return /*#__PURE__*/_jsx(CardMedia, {
-    image: src,
-    role: null,
-    ref: placeholderRef,
-    blur: blur,
-    sx: sx,
-    alt: ""
-  });
-}
-function propsAreEqual(prevProps, nextProps) {
-  return prevProps.lowQualitySrc === nextProps.lowQualitySrc && prevProps.highQualitySrc === nextProps.highQualitySrc && prevProps.title === nextProps.title && prevProps.sx === nextProps.sx;
-}
-const MemoizedProgressiveCardMedia = /*#__PURE__*/memo(ProgressiveCardMedia, propsAreEqual);
-export default MemoizedProgressiveCardMedia;

package/dist/Misc/ProgressiveCardMedia/package.json

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

package/dist/Misc/PronunciationScore/PronunciationScore.js

@@ -1,92 +0,0 @@
-import { useState } from "react";
-import { Tooltip, Box, Typography } from "@mui/material";
-import CircularProgress from "@mui/material/CircularProgress";
-import { orange } from "@mui/material/colors";
-import HelpOutlinedIcon from "@mui/icons-material/HelpOutlined";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-function PronunciationScore({
-  t = text => text,
-  transcriptCorrectWordConfidence = null,
-  transcriptCompleteness,
-  pronunciationScore = null
-}) {
-  const [tooltipOpen, setTooltipOpen] = useState(false);
-  const handleKeyDown = event => {
-    if (event.key === "Escape" && tooltipOpen) {
-      setTooltipOpen(false);
-    }
-  };
-  const pronunciationScorePercentage = (pronunciationScore * 100).toFixed(0);
-  const transcriptCompletenessPercentage = (transcriptCompleteness * 100).toFixed(0);
-  const transcriptCorrectWordConfidencePercentage = (transcriptCorrectWordConfidence * 100).toFixed(0);
-  return /*#__PURE__*/_jsxs(Box, {
-    onKeyDown: handleKeyDown,
-    sx: {
-      display: 'flex',
-      alignItems: 'center'
-    },
-    children: [/*#__PURE__*/_jsx(Box, {
-      children: /*#__PURE__*/_jsxs(Box, {
-        sx: {
-          position: 'relative',
-          display: 'inline-flex'
-        },
-        children: [/*#__PURE__*/_jsx(CircularProgress, {
-          role: "progressbar",
-          value: pronunciationScorePercentage,
-          variant: "determinate",
-          "aria-valuemin": 0,
-          "aria-valuemax": 100,
-          "aria-valuenow": pronunciationScorePercentage,
-          tabIndex: "0",
-          sx: theme => ({
-            color: pronunciationScorePercentage >= 80 ? theme.palette.success.main : theme.palette.mode === "light" ? "#cf7700" : orange[200],
-            width: "40px"
-          })
-        }), /*#__PURE__*/_jsx(Box, {
-          sx: {
-            top: 0,
-            left: 0,
-            bottom: 0,
-            right: 0,
-            position: 'absolute',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center'
-          },
-          children: /*#__PURE__*/_jsx(Typography, {
-            variant: "caption",
-            component: "div",
-            color: "textSecondary",
-            children: `${pronunciationScorePercentage}%`
-          })
-        })]
-      })
-    }), pronunciationScorePercentage > 0 && /*#__PURE__*/_jsx(Box, {
-      sx: {
-        ml: 1,
-        "@media print": {
-          display: "none"
-        }
-      },
-      children: /*#__PURE__*/_jsx(Tooltip, {
-        title: t("pronunciation_score_explanation", {
-          transcriptCompletenessPercentage,
-          transcriptCorrectWordConfidencePercentage
-        }),
-        open: tooltipOpen,
-        onClose: () => setTooltipOpen(false),
-        onOpen: () => setTooltipOpen(true),
-        sx: {
-          color: "gray"
-        },
-        children: /*#__PURE__*/_jsx(HelpOutlinedIcon, {
-          tabIndex: "0",
-          "aria-label": "Pronunciation Score",
-          onClick: () => setTooltipOpen(!tooltipOpen)
-        })
-      })
-    })]
-  });
-}
-export default PronunciationScore;

package/dist/Misc/PronunciationScore/package.json

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

package/dist/Misc/Recorder/Recorder.js

@@ -1,151 +0,0 @@
-import { Component } from "react";
-import { Button, Tooltip } from "@mui/material";
-import Mic from "@mui/icons-material/Mic";
-import MicOff from "@mui/icons-material/MicOff";
-import { withStyles } from "tss-react/mui";
-import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-const styles = theme => ({
-  button: {
-    marginTop: theme.spacing(1),
-    marginRight: theme.spacing(1),
-    marginBottom: theme.spacing(1)
-  }
-});
-class Recorder extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      browserSupported: false,
-      recording: false,
-      clips: []
-    };
-    this.mediaRecorder = null;
-    this.chunks = [];
-    this.initMediaRecorder = this.initMediaRecorder.bind(this);
-    this.handleUnsupportedBrowser = this.handleUnsupportedBrowser.bind(this);
-    this.onDataAvailable = this.onDataAvailable.bind(this);
-    this.startRecording = this.startRecording.bind(this);
-    this.stopRecording = this.stopRecording.bind(this);
-    this.handleClick = this.handleClick.bind(this);
-    this.deleteClip = this.deleteClip.bind(this);
-  }
-  componentDidMount() {
-    if (navigator.mediaDevices.getUserMedia && window.MediaRecorder && (window.location.protocol === "https:" || window.location.hostname === "localhost")) {
-      this.initMediaRecorder();
-      this.setState({
-        browserSupported: true
-      });
-    } else {
-      this.handleUnsupportedBrowser();
-    }
-  }
-  componentWillUnmount() {
-    if (this.stream) {
-      // will remove the recording indicator
-      this.stream.getTracks().forEach(function (track) {
-        track.stop();
-      });
-      this.mediaRecorder = null;
-    }
-  }
-  async initMediaRecorder() {
-    try {
-      const constraints = {
-        audio: true
-      };
-      this.stream = await navigator.mediaDevices.getUserMedia(constraints);
-      this.mediaRecorder = new window.MediaRecorder(this.stream);
-      this.mediaRecorder.ondataavailable = this.onDataAvailable;
-    } catch (e) {
-      console.error(e);
-    }
-  }
-  handleUnsupportedBrowser() {
-    if (window.location.protocol !== "https:" || window.location.hostname !== "localhost") {
-      window.alert("Native microphone recording is only supported in https. Please use localhost for testing purposes");
-      return;
-    } else {
-      window.alert("Your browser doesn't support native microphone recording. For best results, we recommend using Google Chrome or Mozilla Firefox to use this site.");
-      return;
-    }
-  }
-  onDataAvailable(e) {
-    this.chunks.push(e.data);
-    const blob = new Blob(this.chunks, {
-      type: "audio/ogg; codecs=opus"
-    });
-    this.props.handleBlob(blob);
-    this.chunks = [];
-  }
-  startRecording() {
-    this.mediaRecorder.start();
-    this.setState({
-      recording: true
-    });
-  }
-  stopRecording() {
-    this.mediaRecorder.stop();
-    this.setState({
-      recording: false
-    });
-  }
-  handleClick() {
-    const {
-      recording,
-      browserSupported
-    } = this.state;
-    if (this.mediaRecorder && browserSupported) {
-      if (recording) {
-        this.stopRecording();
-      } else {
-        this.startRecording();
-      }
-    }
-  }
-  deleteClip(index) {
-    this.setState({
-      clips: this.state.clips.filter((_, i) => i !== index)
-    });
-  }
-  render() {
-    const {
-      classes,
-      t
-    } = this.props;
-    const {
-      recording,
-      browserSupported
-    } = this.state;
-    return /*#__PURE__*/_jsx(_Fragment, {
-      children: browserSupported ? /*#__PURE__*/_jsx(Tooltip, {
-        title: t("record"),
-        enterDelay: 300,
-        children: /*#__PURE__*/_jsx(Button, {
-          className: classes.button,
-          onClick: this.handleClick,
-          color: recording ? "error" : "success",
-          "aria-label": t("record"),
-          startIcon: /*#__PURE__*/_jsx(Mic, {}),
-          variant: "contained",
-          sx: {
-            backgroundColor: recording ? "#d32f2f" : "#2d7b30",
-            color: "white"
-          },
-          children: recording ? t("stop_recording") : t("record")
-        })
-      }) : /*#__PURE__*/_jsx(Tooltip, {
-        title: t("record_unsupported"),
-        enterDelay: 300,
-        children: /*#__PURE__*/_jsx(Button, {
-          className: classes.button,
-          color: "inherit",
-          "aria-label": t("record_unsupported"),
-          startIcon: /*#__PURE__*/_jsx(MicOff, {}),
-          variant: "contained",
-          children: t("record_unsupported")
-        })
-      })
-    });
-  }
-}
-export default withStyles(Recorder, styles);

package/dist/Misc/Recorder/package.json

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

package/dist/Misc/ReportProblem/ReportProblem.js

@@ -1,64 +0,0 @@
-import Tooltip from "@mui/material/Tooltip";
-import IconButton from "@mui/material/IconButton";
-import MenuItem from "@mui/material/MenuItem";
-import Typography from "@mui/material/Typography";
-import FlagIcon from "@mui/icons-material/Flag";
-import ReportProblemDialog from "../../Dialogs/ReportProblem/ReportProblem";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-function ReportProblem({
-  t = text => text,
-  isReportProblemOpen,
-  handleOpenReportProblem,
-  handleCloseReportProblem,
-  handleReportProblem,
-  edge = null,
-  mode = "icon",
-  menuIconClassname,
-  currentPhrase,
-  isQuestion,
-  parentClassroom,
-  exercise,
-  audioBlob,
-  openSnackbar
-}) {
-  return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsx(ReportProblemDialog, {
-      t: t,
-      open: isReportProblemOpen,
-      handleClose: handleCloseReportProblem,
-      handleReportProblem: handleReportProblem,
-      currentPhrase: currentPhrase,
-      isQuestion: isQuestion,
-      parentClassroom: parentClassroom,
-      exercise: exercise,
-      audioBlob: audioBlob,
-      openSnackbar: openSnackbar
-    }), mode === "icon" && /*#__PURE__*/_jsx(Tooltip, {
-      title: t("report_problem"),
-      children: /*#__PURE__*/_jsx(IconButton, {
-        color: "inherit",
-        onClick: handleOpenReportProblem,
-        "aria-label": "Report a problem",
-        id: "report-a-problem",
-        edge: edge,
-        size: "large",
-        children: /*#__PURE__*/_jsx(FlagIcon, {})
-      })
-    }), mode === "menuitem" && /*#__PURE__*/_jsxs(MenuItem, {
-      color: "inherit",
-      onClick: handleOpenReportProblem,
-      "aria-label": "Report a problem",
-      id: "report-a-problem",
-      children: [/*#__PURE__*/_jsx("div", {
-        className: menuIconClassname,
-        children: /*#__PURE__*/_jsx(FlagIcon, {
-          fontSize: "small"
-        })
-      }), /*#__PURE__*/_jsx(Typography, {
-        children: t("report_problem")
-      })]
-    })]
-  });
-}
-ReportProblem.propTypes = {};
-export default ReportProblem;

package/dist/Misc/ReportProblem/package.json

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