@nualang/nualang-ui-components 0.1.1399 → 0.2.0

package/dist/Misc/SignOut/SignOut.js

@@ -1,132 +0,0 @@
-import { useState } from "react";
-import IconButton from "@mui/material/IconButton";
-import { Menu, MenuItem, Avatar, ListItemIcon, Typography, Box } from "@mui/material";
-import { useNavigate } from "react-router";
-import Person from "@mui/icons-material/Person";
-import LogoutIcon from "@mui/icons-material/Logout";
-import MenuBook from "@mui/icons-material/MenuBook";
-import Email from "@mui/icons-material/Email";
-import ContactSupport from "@mui/icons-material/ContactSupport";
-import Settings from "@mui/icons-material/Settings";
-import WhatsNew from "../WhatsNew/WhatsNew";
-import ThemeToggle from "../ThemeToggle/ThemeToggle";
-import config from "../../config";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-function SignOut({
-  t,
-  handleSignOut,
-  picture,
-  isLgScreen = true,
-  whatsNewMarkdown,
-  whatsNewDate,
-  toggleTheme,
-  preferred_username
-}) {
-  const [anchorEl, setAnchorEl] = useState(null);
-  const navigate = useNavigate();
-  const dropdownOpen = Boolean(anchorEl);
-  return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsx(IconButton, {
-      onClick: event => setAnchorEl(event.currentTarget),
-      color: "inherit",
-      "data-cy": "sign-out-avatar-button",
-      "aria-label": `${preferred_username} ${t("account")}`,
-      "aria-expanded": Boolean(anchorEl),
-      "aria-controls": "sign-out-menu-appbar",
-      "aria-haspopup": "true",
-      children: picture ? /*#__PURE__*/_jsx(Avatar, {
-        src: picture,
-        alt: ""
-      }) : /*#__PURE__*/_jsx(Avatar, {
-        sx: theme => ({
-          backgroundColor: theme.palette.mode === "dark" ? "#ffffff" : "#bdbdbd",
-          color: theme.palette.mode === "dark" ? theme.palette.background.default : ""
-        }),
-        alt: "",
-        children: /*#__PURE__*/_jsx(Person, {
-          fontSize: "large"
-        })
-      })
-    }), /*#__PURE__*/_jsxs(Menu, {
-      anchorEl: anchorEl,
-      keepMounted: true,
-      open: dropdownOpen,
-      onClose: () => setAnchorEl(null),
-      id: "sign-out-menu-appbar",
-      "aria-expanded": dropdownOpen ? "true" : "false",
-      children: [!isLgScreen && /*#__PURE__*/_jsxs(Box, {
-        children: [/*#__PURE__*/_jsx(WhatsNew, {
-          whatsNewMarkdown: whatsNewMarkdown,
-          whatsNewDate: whatsNewDate,
-          t: t,
-          isLgScreen: isLgScreen,
-          onClick: () => {
-            setAnchorEl(null);
-          }
-        }), /*#__PURE__*/_jsx(ThemeToggle, {
-          toggleTheme: toggleTheme,
-          t: t,
-          isLgScreen: isLgScreen,
-          onClick: () => {
-            setAnchorEl(null);
-          }
-        }), /*#__PURE__*/_jsxs(MenuItem, {
-          onClick: () => {
-            window.location.href = `${config.SITE_URL}/faq`;
-          },
-          children: [/*#__PURE__*/_jsx(ListItemIcon, {
-            children: /*#__PURE__*/_jsx(ContactSupport, {})
-          }), /*#__PURE__*/_jsx(Typography, {
-            children: t("faqs")
-          })]
-        }), /*#__PURE__*/_jsxs(MenuItem, {
-          onClick: () => {
-            window.location.href = `${config.SITE_URL}/guides`;
-          },
-          children: [/*#__PURE__*/_jsx(ListItemIcon, {
-            children: /*#__PURE__*/_jsx(MenuBook, {})
-          }), /*#__PURE__*/_jsx(Typography, {
-            children: t("guides")
-          })]
-        }), /*#__PURE__*/_jsxs(MenuItem, {
-          onClick: () => {
-            navigate("/contact");
-            setAnchorEl(null);
-          },
-          children: [/*#__PURE__*/_jsx(ListItemIcon, {
-            children: /*#__PURE__*/_jsx(Email, {})
-          }), /*#__PURE__*/_jsx(Typography, {
-            children: t("contact")
-          })]
-        })]
-      }), /*#__PURE__*/_jsxs(MenuItem, {
-        sx: {
-          fontWeight: 600,
-          textAlign: "center"
-        },
-        onClick: () => {
-          navigate("/settings");
-          setAnchorEl(null);
-        },
-        children: [/*#__PURE__*/_jsx(ListItemIcon, {
-          children: /*#__PURE__*/_jsx(Settings, {})
-        }), /*#__PURE__*/_jsx(Typography, {
-          children: t("settings")
-        })]
-      }), /*#__PURE__*/_jsxs(MenuItem, {
-        sx: {
-          fontWeight: 600,
-          textAlign: "center"
-        },
-        onClick: handleSignOut,
-        "data-cy": "sign-out-button",
-        children: [/*#__PURE__*/_jsx(ListItemIcon, {
-          children: /*#__PURE__*/_jsx(LogoutIcon, {})
-        }), /*#__PURE__*/_jsx(Typography, {
-          children: t("logout")
-        })]
-      })]
-    })]
-  });
-}
-export default SignOut;

package/dist/Misc/SignOut/package.json

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

package/dist/Misc/SiteLanguageSelector/SiteLanguageSelector.js

@@ -1,107 +0,0 @@
-import { useState } from "react";
-import { makeStyles } from "tss-react/mui";
-import { Menu, FormLabel, FormControl, FormControlLabel, RadioGroup, Radio, Tooltip, IconButton } from "@mui/material";
-import LanguageIcon from "@mui/icons-material/Translate";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-const useStyles = makeStyles()(theme => ({
-  menu: {
-    padding: 0
-  },
-  formControl: {
-    margin: theme.spacing(1)
-  },
-  group: {
-    margin: theme.spacing(1)
-  },
-  language: {
-    marginTop: "auto",
-    marginBottom: "auto",
-    marginLeft: theme.spacing(1),
-    marginRight: theme.spacing(2)
-  }
-}));
-function SiteLanguageSelector({
-  t,
-  currentLanguage,
-  handleChangeLanguage,
-  languageOptions = [{
-    value: "en",
-    label: "English"
-  }, {
-    value: "en-US",
-    label: "English US"
-  }]
-}) {
-  const {
-    classes
-  } = useStyles();
-  const [language, setLanguage] = useState(currentLanguage);
-  function handleChange(event) {
-    const value = event.target.value;
-    setLanguage(value);
-    handleChangeLanguage(value);
-    handleCloseMenu();
-  }
-  const [anchorEl, setAnchorEl] = useState(null);
-  const open = Boolean(anchorEl);
-  function handleMenu(event) {
-    setAnchorEl(event.currentTarget);
-  }
-  function handleCloseMenu() {
-    setAnchorEl(null);
-  }
-  return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsx(Tooltip, {
-      title: t("change_language"),
-      enterDelay: 300,
-      children: /*#__PURE__*/_jsx(IconButton, {
-        color: "inherit",
-        "aria-label": t("change_language"),
-        "aria-haspopup": "true",
-        onClick: handleMenu,
-        size: "large",
-        "aria-expanded": Boolean(anchorEl),
-        children: /*#__PURE__*/_jsx(LanguageIcon, {})
-      })
-    }), /*#__PURE__*/_jsx("span", {
-      className: classes.language,
-      children: language.toUpperCase()
-    }), /*#__PURE__*/_jsx(Menu, {
-      id: "site-language-selector-menu-appbar",
-      className: classes.menu,
-      anchorEl: anchorEl,
-      anchorOrigin: {
-        vertical: "top",
-        horizontal: "right"
-      },
-      keepMounted: true,
-      transformOrigin: {
-        vertical: "top",
-        horizontal: "right"
-      },
-      open: open,
-      onClose: handleCloseMenu,
-      children: /*#__PURE__*/_jsxs(FormControl, {
-        component: "fieldset",
-        className: classes.formControl,
-        children: [/*#__PURE__*/_jsx(FormLabel, {
-          component: "legend",
-          children: t("language")
-        }), /*#__PURE__*/_jsx(RadioGroup, {
-          "aria-label": "language",
-          name: "language",
-          className: classes.group,
-          value: language,
-          onChange: handleChange,
-          children: languageOptions.map(option => /*#__PURE__*/_jsx(FormControlLabel, {
-            value: option.value,
-            control: /*#__PURE__*/_jsx(Radio, {}),
-            label: option.label
-          }))
-        })]
-      })
-    })]
-  });
-}
-SiteLanguageSelector.propTypes = {};
-export default SiteLanguageSelector;

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