@nualang/nualang-ui-components 0.1.1400 → 0.2.0

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

package/dist/Navigation/Header/Header.js

@@ -1,90 +0,0 @@
-import PropTypes from "prop-types";
-import Typography from "@mui/material/Typography";
-import Toolbar from "@mui/material/Toolbar";
-import { useTheme } from "@mui/material/styles";
-import MuiAppBar from "@mui/material/AppBar";
-import Box from "@mui/material/Box";
-import { styled } from "@mui/system";
-import HideOnScroll from "../../Misc/HideOnScroll/HideOnScroll";
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-const AppBar = styled(MuiAppBar, {
-  shouldForwardProp: props => !["isCollapsed", "drawerCollapsedWidth", "drawerWidth"].includes(props)
-})(({
-  theme,
-  isCollapsed,
-  drawerCollapsedWidth,
-  drawerWidth
-}) => ({
-  paddingTop: `env(safe-area-inset-top)`,
-  paddingLeft: `env(safe-area-inset-left)`,
-  paddingRight: `env(safe-area-inset-right)`,
-  marginLeft: isCollapsed ? drawerCollapsedWidth : drawerWidth,
-  backgroundColor: theme.palette.mode === "dark" ? theme.palette.background.paper : theme.palette.primary.main,
-  color: theme.palette.mode === "dark" ? theme.palette.getContrastText(theme.palette.background.paper) : theme.palette.getContrastText(theme.palette.primary.main),
-  [theme.breakpoints.up("md")]: {
-    width: isCollapsed ? `calc(100% - ${drawerCollapsedWidth}px)` : `calc(100% - ${drawerWidth}px)`
-  },
-  "@media print": {
-    display: "none"
-  }
-}));
-const Logo = styled("img")(() => ({
-  height: 32
-}));
-function Header({
-  children,
-  title = "Nualang",
-  logoSrc = "",
-  drawerWidth = 256,
-  drawerCollapsedWidth,
-  isCollapsed,
-  includeAdminBadge = false,
-  isLogoHidden = false
-}) {
-  const theme = useTheme();
-  return /*#__PURE__*/_jsx(HideOnScroll, {
-    children: /*#__PURE__*/_jsx(AppBar, {
-      position: "fixed",
-      drawerWidth: drawerWidth,
-      drawerCollapsedWidth: drawerCollapsedWidth,
-      isCollapsed: isCollapsed,
-      children: /*#__PURE__*/_jsxs(Toolbar, {
-        children: [!isLogoHidden && /*#__PURE__*/_jsxs(_Fragment, {
-          children: [logoSrc ? /*#__PURE__*/_jsx(Logo, {
-            src: logoSrc,
-            alt: title
-          }) : /*#__PURE__*/_jsx(Typography, {
-            variant: "h6",
-            noWrap: true,
-            children: title
-          }), includeAdminBadge && /*#__PURE__*/_jsx(Box, {
-            sx: {
-              backgroundColor: "white",
-              ml: 3
-            },
-            children: /*#__PURE__*/_jsx(Typography, {
-              variant: "h6",
-              noWrap: true,
-              sx: {
-                pl: 2,
-                pr: 2,
-                color: theme.palette.primary.main,
-                fontWeight: 900
-              },
-              children: "Admin"
-            })
-          }), /*#__PURE__*/_jsx(Box, {
-            sx: {
-              flexGrow: 1
-            }
-          })]
-        }), children]
-      })
-    })
-  });
-}
-Header.propTypes = {
-  drawerWidth: PropTypes.number.isRequired,
-  includeAdminBadge: PropTypes.bool
-};
-export default Header;

package/dist/Navigation/Header/Header.test.js

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

package/dist/Navigation/Header/package.json

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