@nualang/nualang-ui-components 0.1.1400 → 0.2.0

package/dist/Misc/QuickCreateNualaAnimations/characterMotion.js

@@ -1,172 +0,0 @@
-import { styled, keyframes } from '@mui/material/styles';
-
-// ── Shared character motion (per-character animation hooks) ──────────────────
-// One styled <svg> defines every animation the characters use; each Character
-// file tags the parts it has with the matching className. All hooks loop on a
-// shared 5s cycle so a row of characters stays in sync.
-//
-//   .nl-char        wrap ALL art — the idle-then-bounce hop (squash & stretch)
-//   .nl-mouth       the mouth — grins wide on the bounce
-//   .nl-hat         a hat/cap — slips and rights itself
-//   .nl-face-happy  / .nl-face-worried  cross-fade a happy/worried face
-//   .nl-lens        glasses lenses — pulse color
-//   .nl-earring     dangly earrings — swing like a pendulum
-//   .nl-wave        a raised arm — waves hello
-//   .nl-hair        hair — bounces a beat behind the body
-//   .nl-bow         a bow — wiggles
-//   .nl-shine       shades — glint sweep (stagger with animationDelay)
-//   .nl-note / .nl-noteA|B|C   music notes — float up ONLY while idle,
-//                              gone during the bounce (see Character181)
-
-const bounce = keyframes`
-  0%,64% { transform: translateY(0) scaleX(1) scaleY(1); }
-  72%    { transform: translateY(-24px) scaleX(1.05) scaleY(.95); }
-  82%    { transform: translateY(0) scaleX(.98) scaleY(1.02); }
-  89%    { transform: translateY(-7px) scaleX(1) scaleY(1); }
-  95%,100% { transform: translateY(0) scaleX(1) scaleY(1); }
-`;
-const smile = keyframes`
-  0%,62% { transform: scaleX(1) scaleY(1); }
-  74%    { transform: scaleX(1.42) scaleY(1.12); }
-  86%    { transform: scaleX(1.18) scaleY(1.05); }
-  95%,100% { transform: scaleX(1) scaleY(1); }
-`;
-const hatTilt = keyframes`
-  0%,44% { transform: rotate(0deg); }
-  54%    { transform: rotate(-24deg); }
-  66%    { transform: rotate(-21deg); }
-  74%,100% { transform: rotate(0deg); }
-`;
-const faceWorried = keyframes`0%,46%{opacity:0}52%{opacity:1}66%{opacity:1}72%{opacity:0}100%{opacity:0}`;
-const faceHappy = keyframes`0%,46%{opacity:1}52%{opacity:0}66%{opacity:0}72%{opacity:1}100%{opacity:1}`;
-const lensPurple = keyframes`0%,50%{fill:#4067AF}72%{fill:#7A50C8}100%{fill:#4067AF}`;
-const earringSwing = keyframes`
-  0%,64% { transform: rotate(0deg); }
-  70% { transform: rotate(12deg); } 78% { transform: rotate(-9deg); }
-  85% { transform: rotate(5deg); } 91% { transform: rotate(-2deg); }
-  96%,100% { transform: rotate(0deg); }
-`;
-const hairBounce = keyframes`
-  0%,64% { transform: translateY(0) scaleY(1); }
-  74% { transform: translateY(-9px) scaleY(1.05); }
-  82% { transform: translateY(0) scaleY(1); }
-  89% { transform: translateY(-4px) scaleY(1.02); }
-  95%,100% { transform: translateY(0) scaleY(1); }
-`;
-const bowWiggle = keyframes`
-  0%,26% { transform: rotate(0deg); }
-  31% { transform: rotate(11deg); } 36% { transform: rotate(-8deg); }
-  41% { transform: rotate(6deg); } 46% { transform: rotate(-3deg); }
-  51%,100% { transform: rotate(0deg); }
-`;
-const shine = keyframes`0%,16%{fill:#4067AF}20%{fill:#9DBBEC}24%{fill:#FFFFFF}28%{fill:#9DBBEC}33%,100%{fill:#4067AF}`;
-const wave = keyframes`
-  0%,4% { transform: rotate(0deg); }
-  12% { transform: rotate(-46deg); } 20% { transform: rotate(-26deg); }
-  28% { transform: rotate(-46deg); } 36% { transform: rotate(-26deg); }
-  44% { transform: rotate(-44deg); } 52%,100% { transform: rotate(0deg); }
-`;
-
-// Music notes: appear during the IDLE window (0–~60%) and fade out before the
-// bounce begins (~64%), so they never overlap the jump. Three phases stagger.
-const noteA = keyframes`
-  0%{opacity:0;transform:translateY(10px) rotate(-8deg) scale(.5)}
-  6%{opacity:1}
-  20%{opacity:1;transform:translateY(-10px) rotate(6deg) scale(1)}
-  32%{opacity:0;transform:translateY(-30px) rotate(10deg) scale(1)}
-  33%,100%{opacity:0}
-`;
-const noteB = keyframes`
-  0%,12%{opacity:0;transform:translateY(10px) rotate(6deg) scale(.5)}
-  18%{opacity:1}
-  34%{opacity:1;transform:translateY(-12px) rotate(-6deg) scale(1)}
-  48%{opacity:0;transform:translateY(-34px) rotate(-10deg) scale(1)}
-  49%,100%{opacity:0}
-`;
-const noteC = keyframes`
-  0%,26%{opacity:0;transform:translateY(10px) rotate(-6deg) scale(.5)}
-  32%{opacity:1}
-  46%{opacity:1;transform:translateY(-12px) rotate(8deg) scale(1)}
-  58%{opacity:0;transform:translateY(-32px) rotate(12deg) scale(1)}
-  59%,100%{opacity:0}
-`;
-const LOOP = '5s';
-export const MascotSvg = styled('svg')({
-  display: 'block',
-  overflow: 'visible',
-  '& .nl-char': {
-    transformBox: 'fill-box',
-    transformOrigin: 'center bottom',
-    animation: `${bounce} ${LOOP} cubic-bezier(.34,1.4,.5,1) infinite`,
-    willChange: 'transform'
-  },
-  '& .nl-mouth': {
-    transformBox: 'fill-box',
-    transformOrigin: 'center bottom',
-    animation: `${smile} ${LOOP} ease-in-out infinite`
-  },
-  '& .nl-hat': {
-    transformBox: 'fill-box',
-    transformOrigin: 'center bottom',
-    animation: `${hatTilt} ${LOOP} ease-in-out infinite`
-  },
-  '& .nl-face-happy': {
-    transformBox: 'fill-box',
-    transformOrigin: 'center bottom',
-    animation: `${smile} ${LOOP} ease-in-out infinite, ${faceHappy} ${LOOP} ease-in-out infinite`
-  },
-  '& .nl-face-worried': {
-    opacity: 0,
-    animation: `${faceWorried} ${LOOP} ease-in-out infinite`
-  },
-  '& .nl-lens': {
-    animation: `${lensPurple} ${LOOP} ease-in-out infinite`
-  },
-  '& .nl-earring': {
-    transformBox: 'fill-box',
-    transformOrigin: 'center top',
-    animation: `${earringSwing} ${LOOP} ease-in-out infinite`
-  },
-  '& .nl-wave': {
-    transformBox: 'fill-box',
-    transformOrigin: '22% 6%',
-    animation: `${wave} ${LOOP} ease-in-out infinite`
-  },
-  '& .nl-hair': {
-    transformBox: 'fill-box',
-    transformOrigin: 'center bottom',
-    animation: `${hairBounce} ${LOOP} cubic-bezier(.34,1.4,.5,1) infinite`,
-    willChange: 'transform'
-  },
-  '& .nl-bow': {
-    transformBox: 'fill-box',
-    transformOrigin: 'center bottom',
-    animation: `${bowWiggle} ${LOOP} ease-in-out infinite`
-  },
-  '& .nl-shine': {
-    animation: `${shine} ${LOOP} ease-in-out infinite`
-  },
-  '& .nl-note': {
-    transformBox: 'fill-box',
-    transformOrigin: 'center',
-    opacity: 0,
-    willChange: 'transform,opacity'
-  },
-  '& .nl-noteA': {
-    animation: `${noteA} ${LOOP} ease-out infinite`
-  },
-  '& .nl-noteB': {
-    animation: `${noteB} ${LOOP} ease-out infinite`
-  },
-  '& .nl-noteC': {
-    animation: `${noteC} ${LOOP} ease-out infinite`
-  },
-  '@media (prefers-reduced-motion: reduce)': {
-    '& [className*="nl-"]': {
-      animation: 'none'
-    },
-    '& .nl-face-worried, & .nl-note': {
-      opacity: 0
-    }
-  }
-});

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"
-}

package/dist/Misc/RoleplayChatWaveForm/RoleplayChatWaveForm.js

@@ -1,199 +0,0 @@
-import { Component, createRef } from "react";
-import WaveSurfer from "wavesurfer.js";
-import { encode, decode } from "base64-arraybuffer";
-import { supportsAudioType } from "../../utils/index";
-import { IconButton, Box, Card } from "@mui/material";
-import TranslateIcon from "@mui/icons-material/SwapHoriz";
-import PlayCircleIcon from "@mui/icons-material/PlayCircle";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-class RoleplayChatWaveForm 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,
-      waveColor: "grey",
-      progressColor: "green",
-      responsive: true,
-      mediaControls: this.props.controls,
-      barWidth: 3,
-      barRadius: 3,
-      height: 50,
-      barHeight: 2,
-      cursorWidth: 0,
-      barGap: 2,
-      normalize: 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() {
-    this.wavesurfer.playPause();
-  }
-  render() {
-    return /*#__PURE__*/_jsx(_Fragment, {
-      children: this.props.controls === false ? /*#__PURE__*/_jsxs(_Fragment, {
-        children: [/*#__PURE__*/_jsx(Card, {
-          sx: {
-            backgroundColor: "white",
-            padding: 3,
-            marginTop: 5,
-            marginRight: 5,
-            borderRadius: 25,
-            borderTopLeftRadius: this.props.isActor1 ? 0 : "auto",
-            borderTopRightRadius: this.props.isActor1 ? "auto" : 0,
-            outlineStyle: "solid",
-            outlineColor: this.props.theme.palette.primary.main,
-            outlineWidth: "thin",
-            textAlign: "center",
-            color: this.props.theme.palette.primary.main,
-            maxHeight: 40,
-            display: "flex",
-            justifyContent: "center",
-            flexDirection: "column"
-          },
-          children: /*#__PURE__*/_jsx(Box, {
-            sx: {
-              minWidth: 100,
-              m: 0,
-              p: 0
-            },
-            children: /*#__PURE__*/_jsx("div", {
-              className: "wave",
-              ref: this.waveRef,
-              onClick: this.playPause
-            })
-          })
-        }), /*#__PURE__*/_jsx(Box, {
-          sx: {
-            display: "flex",
-            marginTop: this.props.theme.spacing(1),
-            justifyContent: this.props.isActor1 ? "flex-start" : "flex-end",
-            color: this.props.theme.palette.text.secondary
-          },
-          children: /*#__PURE__*/_jsx("div", {
-            children: this.props.isActor1 ? /*#__PURE__*/_jsxs(Box, {
-              children: [/*#__PURE__*/_jsx("span", {
-                children: /*#__PURE__*/_jsx(IconButton, {
-                  color: "inherit",
-                  disabled: !this.props.handleSpeak,
-                  onClick: this.playPause,
-                  size: "small",
-                  "aria-label": "Play",
-                  children: /*#__PURE__*/_jsx(PlayCircleIcon, {
-                    fontSize: "inherit"
-                  })
-                })
-              }), /*#__PURE__*/_jsx("span", {
-                children: /*#__PURE__*/_jsx(IconButton, {
-                  color: "inherit",
-                  onClick: this.props.translate,
-                  size: "small",
-                  sx: {
-                    display: !this.props.isTextMessage ? "none" : "auto"
-                  },
-                  disabled: !this.props.handleTranslate || this.props.disableTranslation || !this.props.isTextMessage,
-                  "aria-label": "Translate",
-                  children: /*#__PURE__*/_jsx(TranslateIcon, {
-                    fontSize: "inherit"
-                  })
-                })
-              })]
-            }) : /*#__PURE__*/_jsxs(Box, {
-              sx: {
-                mr: 2
-              },
-              children: [/*#__PURE__*/_jsx("span", {
-                children: /*#__PURE__*/_jsx(IconButton, {
-                  color: "inherit",
-                  onClick: this.props.translate,
-                  size: "small",
-                  sx: {
-                    display: !this.props.isTextMessage ? "none" : "auto"
-                  },
-                  disabled: !this.props.handleTranslate || this.props.disableTranslation || !this.props.isTextMessage,
-                  "aria-label": "Translate",
-                  children: /*#__PURE__*/_jsx(TranslateIcon, {
-                    fontSize: "inherit"
-                  })
-                })
-              }), /*#__PURE__*/_jsx("span", {
-                children: /*#__PURE__*/_jsx(IconButton, {
-                  color: "inherit",
-                  disabled: !this.props.handleSpeak,
-                  onClick: this.playPause,
-                  size: "small",
-                  "aria-label": "Play",
-                  children: /*#__PURE__*/_jsx(PlayCircleIcon, {
-                    fontSize: "inherit"
-                  })
-                })
-              })]
-            })
-          })
-        })]
-      }) : /*#__PURE__*/_jsx(Box, {
-        sx: {
-          minWidth: 100,
-          m: 0,
-          p: 0
-        },
-        children: /*#__PURE__*/_jsx("div", {
-          className: "wave",
-          ref: this.waveRef,
-          onClick: this.playPause
-        })
-      })
-    });
-  }
-}
-export default RoleplayChatWaveForm;

package/dist/Misc/RoleplayChatWaveForm/package.json

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