@nualang/nualang-ui-components 0.1.1399 → 0.2.0

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

package/dist/Misc/Waveform/Waveform.js

@@ -1,93 +0,0 @@
-import { Component, createRef } from "react";
-import WaveSurfer from "wavesurfer.js";
-import { encode, decode } from "base64-arraybuffer";
-import { supportsAudioType } from "../../utils/index";
-import { jsx as _jsx } from "react/jsx-runtime";
-class Waveform 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() {
-    if (this.wavesurfer !== null) {
-      this.wavesurfer.destroy();
-    }
-  }
-  initWavesurfer() {
-    this.wavesurfer = WaveSurfer.create({
-      backend: this.props.controls ? "MediaElement" : "WebAudio",
-      container: this.waveRef.current,
-      waveColor: this.props.isLight ? this.props.theme.palette.grey[200] : this.props.theme.palette.primary.light,
-      progressColor: this.props.isLight ? this.props.theme.palette.grey[200] : this.props.theme.palette.primary.dark,
-      responsive: true,
-      mediaControls: this.props.controls,
-      barWidth: 3,
-      barRadius: 3,
-      cursorWidth: this.props.viewOnly ? 0 : 1,
-      barGap: 3,
-      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() {
-    if (this.props.autoPlay && !this.props.viewOnly) {
-      this.playPause();
-    }
-  }
-  playPause() {
-    if (!this.props.viewOnly) {
-      this.wavesurfer.playPause();
-    }
-  }
-  render() {
-    return /*#__PURE__*/_jsx("div", {
-      className: "waveform",
-      children: /*#__PURE__*/_jsx("div", {
-        className: "wave",
-        ref: this.waveRef,
-        "aria-hidden": "true"
-      })
-    });
-  }
-}
-export default Waveform;

package/dist/Misc/Waveform/package.json

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

package/dist/Misc/WhatsNew/WhatsNew.js

@@ -1,105 +0,0 @@
-import { useState } from "react";
-import { IconButton, Tooltip, SwipeableDrawer, Badge, Box, MenuItem, ListItemIcon, Typography } from "@mui/material";
-import NewspaperIcon from "@mui/icons-material/Newspaper";
-import CloseIcon from "@mui/icons-material/Close";
-import ReactMarkdown from "react-markdown";
-import { makeStyles } from "tss-react/mui";
-import rehypeRaw from "rehype-raw";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-const useStyles = makeStyles()(theme => ({
-  markdown: {
-    "& h1, h2, h3, h4, h5, h6": {
-      color: theme.palette.primary.main
-    },
-    "& .custom-h1": {
-      color: theme.palette.primary.main,
-      transition: "color 0.3s",
-      "&:hover": {
-        color: theme.palette.primary.dark
-      }
-    },
-    summary: {
-      display: "inline-block",
-      cursor: "pointer"
-    }
-  }
-}));
-export default function WhatsNew({
-  t,
-  whatsNewMarkdown,
-  whatsNewDate,
-  isLgScreen = true,
-  onClick
-}) {
-  const {
-    classes
-  } = useStyles();
-  const [isWhatsNewDrawerOpen, setIsWhatsNewDrawerOpen] = useState(false);
-  const handleOpenDrawer = () => {
-    setIsWhatsNewDrawerOpen(true);
-    if (!localStorage.getItem(`viewed-whats-new-${whatsNewDate}`)) {
-      Object.keys(localStorage) // clear any older what's new local storage items so that user sees badge on the button
-      .filter(x => x.startsWith("viewed-whats-new")).forEach(x => localStorage.removeItem(x));
-      localStorage.setItem(`viewed-whats-new-${whatsNewDate}`, "true");
-    }
-  };
-  const handleCloseDrawer = () => {
-    setIsWhatsNewDrawerOpen(false);
-  };
-  return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [isLgScreen ? /*#__PURE__*/_jsx(Tooltip, {
-      title: t("whats_new"),
-      children: /*#__PURE__*/_jsx(IconButton, {
-        color: "inherit",
-        "aria-label": t("whats_new"),
-        "aria-haspopup": "true",
-        onClick: handleOpenDrawer,
-        size: "large",
-        children: !localStorage.getItem(`viewed-whats-new-${whatsNewDate}`) ? /*#__PURE__*/_jsx(Badge, {
-          color: "success",
-          variant: "dot",
-          overlap: "circular",
-          children: /*#__PURE__*/_jsx(NewspaperIcon, {})
-        }) : /*#__PURE__*/_jsx(NewspaperIcon, {})
-      })
-    }) : /*#__PURE__*/_jsxs(MenuItem, {
-      onClick: () => {
-        onClick();
-        handleOpenDrawer();
-      },
-      "aria-label": t("whats_new"),
-      "aria-haspopup": "true",
-      children: [/*#__PURE__*/_jsx(ListItemIcon, {
-        children: /*#__PURE__*/_jsx(NewspaperIcon, {})
-      }), /*#__PURE__*/_jsx(Typography, {
-        children: t("whats_new")
-      })]
-    }), /*#__PURE__*/_jsxs(SwipeableDrawer, {
-      open: isWhatsNewDrawerOpen,
-      anchor: "right",
-      onClose: handleCloseDrawer,
-      children: [/*#__PURE__*/_jsx(IconButton, {
-        sx: {
-          position: "absolute",
-          top: theme => theme.spacing(1),
-          right: theme => theme.spacing(1)
-        },
-        onClick: handleCloseDrawer,
-        "aria-label": "close",
-        children: /*#__PURE__*/_jsx(CloseIcon, {})
-      }), /*#__PURE__*/_jsx(Box, {
-        sx: {
-          p: 3,
-          maxWidth: "700px"
-        },
-        children: /*#__PURE__*/_jsx("div", {
-          className: `${classes.markdown} content`,
-          children: /*#__PURE__*/_jsx(ReactMarkdown, {
-            rehypePlugins: rehypeRaw,
-            children: whatsNewMarkdown
-          })
-        })
-      })]
-    })]
-  });
-}

package/dist/Misc/WhatsNew/package.json

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

package/dist/Misc/WhatsNew/whatsnew.md

@@ -1,41 +0,0 @@
-[//]: <> (28/04/2024)
-
-# What's New
-
-<details open>
-
-<summary>
-
-<h1 className="custom-h1">Release - April 28 2024</h1>
-
-</summary>
-
-## Changed
-
-- Accessibility improvements
-- Automatically detect when a number matches the word in Pronunciation and Listening exercises
-- Nualang LIVE
-  - Allow students to remain on the final score screen
-  - Don't reward streak icon for partially correct answers
-  - Performance improvements
-
-</details>
-
-<details>
-
-<summary>
-
-# Release - January 10 2024
-
-</summary>
-
-## Changed
-
-- Accessibility improvements
-- Automatically detect when a number matches the word in Pronunciation and Listening exercises
-- Nualang LIVE
-  - Allow students to remain on the final score screen
-  - Don't reward streak icon for partially correct answers
-  - Performance improvements
-
-</details>

package/dist/Navigation/BottomBar/BottomBar.js

@@ -1,72 +0,0 @@
-import { useState, useEffect } from "react";
-import { makeStyles } from "tss-react/mui";
-import PropTypes from "prop-types";
-import BottomNavigation from "@mui/material/BottomNavigation";
-import BottomNavigationAction from "@mui/material/BottomNavigationAction";
-import { useNavigate, useLocation } from "react-router";
-import navigationImport from "../_nav";
-import { jsx as _jsx } from "react/jsx-runtime";
-const useStyles = makeStyles()(theme => ({
-  root: {
-    width: "100%",
-    position: "fixed",
-    bottom: "0",
-    zIndex: "10",
-    boxShadow: theme.shadows[4],
-    "@media print": {
-      display: "none"
-    },
-    "@media all and (display-mode: standalone)": {
-      paddingTop: 30,
-      paddingBottom: 40
-    }
-  },
-  bottomBar: {
-    color: theme.palette.primary.main
-  }
-}));
-function BottomBar({
-  navigation = navigationImport.sideNav,
-  t = text => text
-}) {
-  const {
-    classes
-  } = useStyles();
-  const navigate = useNavigate();
-  const location = useLocation();
-  const {
-    pathname
-  } = location;
-  useEffect(() => {
-    // if pathname is in navigation list
-    let bottomNavPath = navigation.find(path => path.url === pathname);
-    if (bottomNavPath) {
-      setCurrent(pathname);
-    }
-  }, [navigation, pathname]);
-  const [current, setCurrent] = useState(pathname || navigation[0].url);
-  return /*#__PURE__*/_jsx(BottomNavigation, {
-    onChange: (event, id) => {
-      navigate(id);
-      setCurrent(id);
-    },
-    showLabels: true,
-    className: classes.root,
-    children: navigation.map((item, index) => {
-      return /*#__PURE__*/_jsx(BottomNavigationAction, {
-        label: t(item.name),
-        value: item.url,
-        icon: item.icon,
-        className: current === item.url ? classes.bottomBar : null,
-        disableRipple: true,
-        sx: {
-          minWidth: "60px"
-        }
-      }, index);
-    })
-  });
-}
-BottomBar.propTypes = {
-  navigation: PropTypes.array.isRequired
-};
-export default BottomBar;

package/dist/Navigation/Breadcrumbs/Breadcrumbs.js

@@ -1,113 +0,0 @@
-import { Link as RouterLink, matchPath, useLocation } from "react-router";
-import { makeStyles } from "tss-react/mui";
-import Paper from "@mui/material/Paper";
-import Typography from "@mui/material/Typography";
-import MuiBreadcrumbs from "@mui/material/Breadcrumbs";
-import Link from "@mui/material/Link";
-import { useTranslation } from "react-i18next";
-import { jsx as _jsx } from "react/jsx-runtime";
-const useStyles = makeStyles()(theme => ({
-  paper: {
-    padding: theme.spacing(1, 2),
-    [theme.breakpoints.up("sm")]: {
-      padding: theme.spacing(1, 3)
-    },
-    "@media print": {
-      display: "none"
-    }
-  }
-}));
-let routes;
-const LinkRouter = props => /*#__PURE__*/_jsx(Link, {
-  ...props,
-  component: RouterLink
-});
-const getPaths = pathname => {
-  const paths = ["/"];
-  if (pathname === "/") return paths;
-  pathname.split("/").reduce((prev, curr) => {
-    const currPath = `${prev}/${curr}`;
-    paths.push(currPath);
-    return currPath;
-  });
-  return paths;
-};
-const findRouteName = url => {
-  const aroute = routes.find(route => matchPath({
-    path: route.path,
-    end: route.exact
-  }, url));
-  return aroute && aroute.name ? aroute.name : null;
-};
-const BreadcrumbsItem = ({
-  path,
-  isSelected
-}) => {
-  const {
-    t
-  } = useTranslation();
-  const routeName = findRouteName(path);
-  if (routeName) {
-    if (path === "/profiles") {
-      return /*#__PURE__*/_jsx(Typography, {
-        color: "textPrimary",
-        "data-cy": "breadcrumbs-item",
-        "aria-current": "true",
-        children: t(routeName)
-      }, path || "");
-    }
-    return isSelected ? /*#__PURE__*/_jsx(Typography, {
-      color: "textPrimary",
-      "data-cy": "breadcrumbs-item",
-      "aria-current": "true",
-      children: t(routeName)
-    }, path || "") : /*#__PURE__*/_jsx(LinkRouter, {
-      color: "inherit",
-      to: path || "",
-      "data-cy": "breadcrumbs-item",
-      underline: "hover",
-      children: t(routeName)
-    }, path || "");
-  }
-  return null;
-};
-const Breadcrumbs = () => {
-  const location = useLocation();
-  const {
-    pathname
-  } = location;
-  const paths = getPaths(pathname);
-  const items = paths.filter(path => findRouteName(path)).map((path, i) => {
-    const keyId = `breadcr_${i}`;
-    const isSelected = pathname === path;
-    return /*#__PURE__*/_jsx(BreadcrumbsItem, {
-      path: path,
-      isSelected: isSelected
-    }, keyId);
-  });
-  return /*#__PURE__*/_jsx(MuiBreadcrumbs, {
-    "data-cy": "breadcrumbs",
-    "aria-label": "breadcrumb",
-    children: items
-  });
-};
-export default function AppBreadcrumbs(props) {
-  const {
-    classes
-  } = useStyles();
-  const {
-    appRoutes = [{
-      path: "/",
-      exact: true,
-      name: "Home",
-      component: null
-    }]
-  } = props;
-  routes = appRoutes;
-  return /*#__PURE__*/_jsx(Paper, {
-    elevation: 1,
-    square: true,
-    className: classes.paper,
-    children: /*#__PURE__*/_jsx(Breadcrumbs, {})
-  });
-}

package/dist/Navigation/Breadcrumbs/Breadcrumbs.test.js

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

package/dist/Navigation/Breadcrumbs/package.json

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