@nualang/nualang-ui-components 0.1.1400 → 0.2.0

package/dist/Misc/SiteLanguageSelector/package.json

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

package/dist/Misc/Snackbar/Snackbar.js

@@ -1,98 +0,0 @@
-import IconButton from "@mui/material/IconButton";
-import MuiSnackbar from "@mui/material/Snackbar";
-import SnackbarContent from "@mui/material/SnackbarContent";
-import Close from "@mui/icons-material/Close";
-import Error from "@mui/icons-material/Error";
-import Done from "@mui/icons-material/Done";
-import Info from "@mui/icons-material/Info";
-import { makeStyles } from "tss-react/mui";
-import { green, blue } from "@mui/material/colors";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const useStyles = makeStyles()(theme => ({
-  success: {
-    color: theme.palette.getContrastText(theme.palette.mode === "light" ? green[500] : green[200]),
-    backgroundColor: theme.palette.mode === "light" ? green[500] : green[200]
-  },
-  info: {
-    color: theme.palette.getContrastText(theme.palette.mode === "light" ? blue[500] : blue[200]),
-    backgroundColor: theme.palette.mode === "light" ? blue[500] : blue[200]
-  },
-  error: {
-    color: theme.palette.error.contrastText,
-    backgroundColor: theme.palette.error.main
-  },
-  icon: {
-    fontSize: 20
-  },
-  iconVariant: {
-    opacity: 0.9,
-    marginRight: theme.spacing(1)
-  },
-  message: {
-    display: "flex",
-    alignItems: "center"
-  }
-}));
-export default function Snackbar({
-  t = text => text,
-  isSnackbarOpen = false,
-  closeSnackbar = () => {},
-  snackbarMessage = "Default message",
-  snackbarType = ""
-}) {
-  const {
-    classes
-  } = useStyles();
-  let icon, color;
-  if (snackbarType === "success") {
-    icon = /*#__PURE__*/_jsx(Done, {
-      className: classes.iconVariant
-    });
-    color = classes.success;
-  } else if (snackbarType === "error") {
-    icon = /*#__PURE__*/_jsx(Error, {
-      className: classes.iconVariant
-    });
-    color = classes.error;
-  } else {
-    icon = /*#__PURE__*/_jsx(Info, {
-      className: classes.iconVariant
-    });
-    color = classes.info;
-  }
-  return /*#__PURE__*/_jsx("div", {
-    style: {
-      position: "absolute"
-    },
-    children: /*#__PURE__*/_jsx(MuiSnackbar, {
-      "aria-live": "assertive",
-      anchorOrigin: {
-        vertical: "bottom",
-        horizontal: "right"
-      },
-      open: isSnackbarOpen,
-      autoHideDuration: 6000,
-      onClose: closeSnackbar,
-      message: snackbarMessage,
-      "aria-describedby": "client-snackbar-message",
-      role: "none",
-      children: /*#__PURE__*/_jsx(SnackbarContent, {
-        "data-cy": "snackbar",
-        className: color,
-        message: /*#__PURE__*/_jsxs("span", {
-          "aria-label": "client-snackbar-message",
-          className: classes.message,
-          role: "alert",
-          children: [icon, t(snackbarMessage)]
-        }),
-        action: [/*#__PURE__*/_jsx(IconButton, {
-          color: "inherit",
-          onClick: closeSnackbar,
-          size: "large",
-          "aria-label": "Close",
-          children: /*#__PURE__*/_jsx(Close, {})
-        }, 'close')]
-      })
-    })
-  });
-}

package/dist/Misc/Snackbar/package.json

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

package/dist/Misc/SpeedDial/SpeedDial.js

@@ -1,49 +0,0 @@
-import { useState } from "react";
-import { makeStyles } from "tss-react/mui";
-import SpeedDial from "@mui/material/SpeedDial";
-import SpeedDialIcon from "@mui/material/SpeedDialIcon";
-import SpeedDialAction from "@mui/material/SpeedDialAction";
-import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-const useStyles = makeStyles()(theme => ({
-  speedDial: {
-    position: "absolute",
-    bottom: theme.spacing(2),
-    right: theme.spacing(2)
-  }
-}));
-export default function SpeedDialDialog({
-  actions,
-  position = "absolute",
-  icon = /*#__PURE__*/_jsx(SpeedDialIcon, {})
-}) {
-  const {
-    classes
-  } = useStyles({
-    position
-  });
-  const [open, setOpen] = useState(false);
-  const handleClose = () => {
-    setOpen(false);
-  };
-  const handleOpen = () => {
-    setOpen(true);
-  };
-  return /*#__PURE__*/_jsx(_Fragment, {
-    children: /*#__PURE__*/_jsx(SpeedDial, {
-      ariaLabel: "SpeedDial",
-      className: classes.speedDial,
-      hidden: false,
-      icon: icon,
-      onClose: handleClose,
-      onOpen: handleOpen,
-      open: open,
-      direction: "up",
-      children: actions.map(action => /*#__PURE__*/_jsx(SpeedDialAction, {
-        icon: action.icon,
-        tooltipTitle: action.name,
-        tooltipOpen: true,
-        onClick: action.onClick
-      }, action.name))
-    })
-  });
-}

package/dist/Misc/SpeedDial/package.json

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

package/dist/Misc/StudentWaitingMessage/StudentWaitingMessage.js

@@ -1,38 +0,0 @@
-import { useState, useEffect } from "react";
-import { Typography } from "@mui/material";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-function StudentWaitingMessage({
-  t = text => text
-}) {
-  const [dots, setDots] = useState(1);
-  useEffect(() => {
-    const interval = setInterval(() => {
-      setDots(prevDots => prevDots % 3 + 1);
-    }, 650);
-    return () => clearInterval(interval);
-  }, []);
-  return /*#__PURE__*/_jsx(Typography, {
-    align: "center",
-    sx: {
-      marginBottom: 4,
-      fontWeight: "bold",
-      width: "100%",
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "center",
-      flexDirection: "column"
-    },
-    variant: "h6",
-    children: /*#__PURE__*/_jsxs("span", {
-      children: [t("waiting_message"), /*#__PURE__*/_jsx("span", {
-        style: {
-          display: "inline-block",
-          width: "0.8ch",
-          textAlign: "left"
-        },
-        children: ".".repeat(dots)
-      })]
-    })
-  });
-}
-export default StudentWaitingMessage;

package/dist/Misc/SubmitTextField/SubmitTextField.js

@@ -1,48 +0,0 @@
-import { useState } from "react";
-import PropTypes from "prop-types";
-import { InputAdornment, Tooltip, IconButton, TextField } from "@mui/material";
-import { jsx as _jsx } from "react/jsx-runtime";
-function SubmitTextField({
-  initialValue = "",
-  submitButton,
-  onSubmit,
-  buttonProps,
-  tooltipText = "",
-  ...otherProps
-}) {
-  const [value, setValue] = useState(initialValue || "");
-  return /*#__PURE__*/_jsx(TextField, {
-    value: value,
-    onChange: e => setValue(e.target.value),
-    ...otherProps,
-    slotProps: {
-      input: {
-        endAdornment: /*#__PURE__*/_jsx(InputAdornment, {
-          position: "end",
-          children: /*#__PURE__*/_jsx(Tooltip, {
-            title: tooltipText,
-            describeChild: "false",
-            children: /*#__PURE__*/_jsx("span", {
-              children: /*#__PURE__*/_jsx(IconButton, {
-                ...buttonProps,
-                onClick: () => onSubmit(value),
-                disabled: !value,
-                size: "large",
-                "aria-label": "Submit",
-                children: submitButton
-              })
-            })
-          })
-        })
-      }
-    }
-  });
-}
-SubmitTextField.propTypes = {
-  initialValue: PropTypes.string.isRequired,
-  onSubmit: PropTypes.func.isRequired,
-  submitButton: PropTypes.node.isRequired,
-  buttonProps: PropTypes.object,
-  tooltipText: PropTypes.string
-};
-export default SubmitTextField;

package/dist/Misc/Testimonials/Testimonials.js

@@ -1,82 +0,0 @@
-import Typography from "@mui/material/Typography";
-import Avatar from "@mui/material/Avatar";
-import Grid from "@mui/material/Grid";
-import Box from "@mui/material/Box";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-function Testimonials({
-  quotes = []
-}) {
-  return /*#__PURE__*/_jsx(Grid, {
-    container: true,
-    spacing: 4,
-    sx: {
-      justifyContent: 'center',
-      alignItems: 'center',
-      width: "100%"
-    },
-    children: quotes.map((quote, index) => /*#__PURE__*/_jsx(Grid, {
-      size: {
-        md: 12 / quotes.length
-      },
-      children: /*#__PURE__*/_jsxs(Typography, {
-        component: "div",
-        sx: theme => ({
-          [theme.breakpoints.up("md")]: {
-            maxWidth: 500,
-            fontSize: 20,
-            fontWeight: 400,
-            lineHeight: "32px"
-          },
-          textAlign: "center",
-          display: "flex",
-          flexDirection: "column",
-          alignItems: "center",
-          justifyContent: "center",
-          fontSize: 16,
-          fontWeight: 400,
-          lineHeight: "28px",
-          width: "100%",
-          margin: "auto"
-        }),
-        children: ["\u201C", quote.quote, "\u201D", /*#__PURE__*/_jsxs(Box, {
-          sx: theme => ({
-            display: "flex",
-            alignItems: "center",
-            marginTop: theme.spacing(2)
-          }),
-          children: [/*#__PURE__*/_jsx(Avatar, {
-            src: quote.avatar,
-            sx: () => ({
-              width: 56,
-              height: 56
-            }),
-            alt: ""
-          }), /*#__PURE__*/_jsxs(Box, {
-            sx: theme => ({
-              display: "flex",
-              flexDirection: "column",
-              textAlign: "left",
-              marginLeft: theme.spacing(1.5)
-            }),
-            children: [/*#__PURE__*/_jsx(Typography, {
-              sx: () => ({
-                fontSize: 16,
-                fontWeight: 600,
-                lineHeight: "22px"
-              }),
-              children: quote.text1
-            }), /*#__PURE__*/_jsx(Typography, {
-              sx: () => ({
-                fontSize: 14,
-                fontWeight: 400,
-                lineHeight: "20px"
-              }),
-              children: quote.text2
-            })]
-          })]
-        })]
-      })
-    }, index))
-  });
-}
-export default Testimonials;

package/dist/Misc/Testimonials/package.json

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

package/dist/Misc/ThemeToggle/ThemeToggle.js

@@ -1,39 +0,0 @@
-import { IconButton, Tooltip, MenuItem, ListItemIcon, Typography } from "@mui/material";
-import Brightness4 from "@mui/icons-material/Brightness4";
-import Brightness7 from "@mui/icons-material/Brightness7";
-import { useTheme } from "@mui/material/styles";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-function ThemeToggle({
-  t,
-  toggleTheme,
-  isLgScreen = true,
-  onClick
-}) {
-  const theme = useTheme();
-  return /*#__PURE__*/_jsx(_Fragment, {
-    children: isLgScreen ? /*#__PURE__*/_jsx(Tooltip, {
-      title: theme.palette.mode === "light" ? t("toggle_dark") : t("toggle_light"),
-      enterDelay: 300,
-      children: /*#__PURE__*/_jsx(IconButton, {
-        color: "inherit",
-        onClick: toggleTheme,
-        "aria-label": theme.palette.mode === "light" ? t("toggle_dark") : t("toggle_light"),
-        size: "large",
-        children: theme.palette.mode === "light" ? /*#__PURE__*/_jsx(Brightness4, {}) : /*#__PURE__*/_jsx(Brightness7, {})
-      })
-    }) : /*#__PURE__*/_jsxs(MenuItem, {
-      onClick: () => {
-        onClick();
-        toggleTheme();
-      },
-      "aria-label": theme.palette.mode === "light" ? t("toggle_dark") : t("toggle_light"),
-      "aria-haspopup": "true",
-      children: [/*#__PURE__*/_jsx(ListItemIcon, {
-        children: theme.palette.mode === "light" ? /*#__PURE__*/_jsx(Brightness4, {}) : /*#__PURE__*/_jsx(Brightness7, {})
-      }), /*#__PURE__*/_jsx(Typography, {
-        children: theme.palette.mode === "light" ? t("toggle_dark") : t("toggle_light")
-      })]
-    })
-  });
-}
-export default ThemeToggle;

package/dist/Misc/ThemeToggle/package.json

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

package/dist/Misc/VoiceSpeed/VoiceSpeed.js

@@ -1,68 +0,0 @@
-import Tooltip from "@mui/material/Tooltip";
-import IconButton from "@mui/material/IconButton";
-import Menu from "@mui/material/Menu";
-import MenuItem from "@mui/material/MenuItem";
-import SpeedIcon from "@mui/icons-material/Speed";
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-function VoiceSpeed({
-  t = text => text,
-  speedOptions = [{
-    value: "x-fast",
-    label: "extra_fast"
-  }, {
-    value: "fast",
-    label: "fast"
-  }, {
-    value: "",
-    label: "medium"
-  }, {
-    value: "slow",
-    label: "slow"
-  }, {
-    value: "x-slow",
-    label: "extra_slow"
-  }],
-  voiceSpeed,
-  isVoiceSpeedMenuOpen,
-  handleOpenVoiceSpeedMenu,
-  handleCloseVoiceSpeedMenu,
-  handleChangeVoiceSpeed,
-  edge = null
-}) {
-  return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsx(Menu, {
-      id: "change-voice-speed-menu",
-      anchorEl: isVoiceSpeedMenuOpen,
-      keepMounted: true,
-      role: "menu",
-      "aria-label": "Voice Speed Menu",
-      open: Boolean(isVoiceSpeedMenuOpen),
-      onClose: handleCloseVoiceSpeedMenu,
-      children: speedOptions.map(option => /*#__PURE__*/_jsx(MenuItem, {
-        onClick: () => handleChangeVoiceSpeed(option.value),
-        selected: voiceSpeed === option.value,
-        role: "menuitemradio",
-        "aria-label": `${option.value}`,
-        "aria-checked": voiceSpeed === option.value ? "true" : "false",
-        children: t(option.label)
-      }, `speed-option-${option.value}`))
-    }), /*#__PURE__*/_jsx(Tooltip, {
-      id: "change-voice-speed-tooltip",
-      title: t("change_voice_speed"),
-      children: /*#__PURE__*/_jsx(IconButton, {
-        color: "inherit",
-        onClick: handleOpenVoiceSpeedMenu,
-        "aria-label": t("change_voice_speed"),
-        role: "button",
-        "aria-haspopup": "true",
-        "aria-expanded": isVoiceSpeedMenuOpen ? "true" : "false",
-        id: "change-voice-speed",
-        edge: edge,
-        size: "large",
-        children: /*#__PURE__*/_jsx(SpeedIcon, {})
-      })
-    })]
-  });
-}
-VoiceSpeed.propTypes = {};
-export default VoiceSpeed;

package/dist/Misc/VoiceSpeed/package.json

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

package/dist/Misc/WaveFormLite/WaveFormLite.js

@@ -1,138 +0,0 @@
-import { Component, createRef } from "react";
-import WaveSurfer from "wavesurfer.js";
-import { encode, decode } from "base64-arraybuffer";
-import { supportsAudioType } from "../../utils/index";
-import { Grid, IconButton, Box } from "@mui/material";
-import PlayCircleIcon from "@mui/icons-material/PlayCircle";
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-class WaveFormLite extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {};
-    this.wavesurfer = null;
-    this.waveRef = /*#__PURE__*/createRef();
-    this.initWavesurfer = this.initWavesurfer.bind(this);
-    this.onReady = this.onReady.bind(this);
-    this.playPause = this.playPause.bind(this);
-  }
-  componentDidMount() {
-    this.initWavesurfer();
-  }
-  componentDidUpdate(prevProps) {
-    // Typical usage (don't forget to compare props):
-    if (this.props.src !== prevProps.src) {
-      this.wavesurfer.destroy();
-      this.initWavesurfer();
-    } else if (this.props.arrayBuffer !== prevProps.arrayBuffer) {
-      this.wavesurfer.destroy();
-      this.initWavesurfer();
-    } else if (this.props.base64 !== prevProps.base64) {
-      this.wavesurfer.destroy();
-      this.initWavesurfer();
-    }
-  }
-  componentWillUnmount() {
-    this.wavesurfer.destroy();
-  }
-  initWavesurfer() {
-    this.wavesurfer = WaveSurfer.create({
-      backend: this.props.controls ? "MediaElement" : "WebAudio",
-      container: this.waveRef.current,
-      waveColor: this.props.theme.palette.primary.light,
-      progressColor: this.props.theme.palette.primary.dark,
-      responsive: true,
-      mediaControls: this.props.controls,
-      barWidth: 3,
-      barRadius: 3,
-      cursorWidth: 1,
-      barGap: 3,
-      height: 70,
-      hideScrollbar: true
-    });
-    if (this.props.src) {
-      this.wavesurfer.load(this.props.src);
-    } else if (this.props.arrayBuffer) {
-      if (this.props.controls) {
-        const src = `data:audio/ogg;base64,${encode(this.props.arrayBuffer)}`;
-        this.wavesurfer.load(src);
-      } else {
-        this.wavesurfer.loadArrayBuffer(this.props.arrayBuffer);
-      }
-    } else if (this.props.base64) {
-      // ogg works for chrome, edge and firefox. mp3 works for safari
-      const mediaType = ["probably", "maybe"].includes(supportsAudioType("ogg")) ? "audio/ogg" : "audio/mp3";
-      if (this.props.controls) {
-        const src = `data:${mediaType};base64,${this.props.base64}`;
-        this.wavesurfer.load(src);
-      } else {
-        this.wavesurfer.loadArrayBuffer(decode(this.props.base64));
-      }
-    }
-    this.wavesurfer.on("ready", this.onReady);
-  }
-  onReady() {
-    // this.playPause();
-  }
-  playPause() {
-    if (this.props.muteAudio) {
-      this.wavesurfer.setMuted(true);
-      this.wavesurfer.playPause();
-      this.props.handleSpeak();
-    } else {
-      this.wavesurfer.playPause();
-    }
-  }
-  render() {
-    return /*#__PURE__*/_jsx("div", {
-      className: "waveform",
-      children: /*#__PURE__*/_jsxs(Box, {
-        sx: {
-          display: "flex",
-          height: "80px",
-          alignItems: "center"
-        },
-        children: [this.props.controls === false ? /*#__PURE__*/_jsx(Box, {
-          sx: {
-            display: "flex",
-            marginLeft: 1
-          },
-          children: /*#__PURE__*/_jsx(IconButton, {
-            id: "play-waveform-audio",
-            "aria-label": "play",
-            sx: {
-              padding: 1,
-              margin: 1
-            },
-            variant: "contained",
-            edge: "start",
-            size: "large",
-            onClick: this.playPause,
-            disabled: this.props.isSpeaking || this.props.recognizing,
-            children: /*#__PURE__*/_jsx(PlayCircleIcon, {
-              color: this.props.isSpeaking || this.props.recognizing ? "" : "primary",
-              fontSize: "inherit"
-            })
-          })
-        }) : /*#__PURE__*/_jsx(_Fragment, {}), /*#__PURE__*/_jsxs(Grid, {
-          sx: {
-            flexGrow: 1,
-            minWidth: 100
-          },
-          children: [/*#__PURE__*/_jsx("div", {
-            className: "wave",
-            ref: this.waveRef,
-            "aria-hidden": "true",
-            id: "waveformCanvas"
-          }), /*#__PURE__*/_jsx("p", {
-            id: "waveformDescription",
-            style: {
-              display: "none"
-            },
-            children: "This waveform displays the audio signal. Use the play button to listen."
-          })]
-        })]
-      })
-    });
-  }
-}
-export default WaveFormLite;

package/dist/Misc/WaveFormLite/package.json

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