@nualang/nualang-ui-components 0.1.1400 → 0.2.0

package/dist/Dialogs/InviteDialog/package.json

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

package/dist/Dialogs/Listener/Listener.js

@@ -1,87 +0,0 @@
-import { useState } from "react";
-import Button from "@mui/material/Button";
-import DialogContentText from "@mui/material/DialogContentText";
-
-// components
-import ResponsiveDialog from "../ResponsiveDialog/ResponsiveDialog";
-import VoiceList from "../../Lists/Voices/Voices";
-import Recorder from "../../Misc/Recorder/Recorder";
-import Waveform from "../../Misc/Waveform/Waveform";
-import usePhraseNameDialog from "../../hooks/usePhraseNameDialog";
-import { useTheme } from "@mui/material/styles";
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-function Listener({
-  t = text => text,
-  open,
-  handleClose,
-  dialogTitle,
-  isCreator,
-  phrase,
-  handleUpdatePhrase,
-  uploadAudio,
-  userAttributes,
-  voices,
-  disableRecorder = true,
-  ...otherProps
-}) {
-  const [blob, setBlob] = useState(null);
-  const [audioURL, setAudioURL] = useState(null);
-  const [getPhraseName] = usePhraseNameDialog(t);
-  const theme = useTheme();
-  const handleBlob = blob => {
-    const url = window.URL.createObjectURL(blob);
-    setAudioURL(url);
-    setBlob(blob);
-  };
-  const addVoice = async () => {
-    const voiceName = await getPhraseName();
-    if (voiceName) {
-      const audioLink = await uploadAudio(voiceName, blob);
-      const voice = {
-        name: voiceName,
-        src: audioLink,
-        createdBy: userAttributes.username
-      };
-      const phraseUpdate = {
-        voices: phrase.voices ? [...phrase.voices, voice] : [voice]
-      };
-      handleUpdatePhrase(phrase.phraseId, phraseUpdate);
-    }
-  };
-  const removeVoice = voiceIndex => {
-    const phraseUpdate = {
-      voices: phrase.voices.filter((_, i) => i !== voiceIndex)
-    };
-    handleUpdatePhrase(phrase.phraseId, phraseUpdate);
-  };
-  return /*#__PURE__*/_jsxs(ResponsiveDialog, {
-    open: open,
-    handleClose: handleClose,
-    dialogTitle: dialogTitle,
-    children: [/*#__PURE__*/_jsx(DialogContentText, {
-      children: t("listener_dialog_desc")
-    }), !disableRecorder ? /*#__PURE__*/_jsxs(_Fragment, {
-      children: [/*#__PURE__*/_jsx(Recorder, {
-        handleBlob: handleBlob,
-        t: t
-      }), audioURL && isCreator && /*#__PURE__*/_jsx(Button, {
-        color: "primary",
-        variant: "contained",
-        onClick: addVoice,
-        children: t("add_voice")
-      }), audioURL && /*#__PURE__*/_jsx(Waveform, {
-        src: audioURL,
-        theme: theme,
-        controls: true
-      })]
-    }) : null, /*#__PURE__*/_jsx(VoiceList, {
-      t: t,
-      isCreator: isCreator,
-      userAttributes: userAttributes,
-      voices: voices,
-      removeVoice: disableRecorder ? null : removeVoice,
-      ...otherProps
-    })]
-  });
-}
-export default Listener;

package/dist/Dialogs/Listener/Listener.test.js

@@ -1,24 +0,0 @@
-import { render } from "@testing-library/react";
-import { describe, it, afterEach, vi } from "vitest";
-import Listener from "./Listener";
-import { props } from "./Listener.stories";
-import { jsx as _jsx } from "react/jsx-runtime";
-afterEach(() => vi.clearAllMocks());
-describe("Listener", () => {
-  it("renders without crashing", () => {
-    // afterEach(() => vi.clearAllMocks());
-    const mockMediaDevices = {
-      getUserMedia: vi.fn().mockResolvedValueOnce("fake data")
-    };
-    Object.defineProperty(window.navigator, "mediaDevices", {
-      writable: true,
-      value: mockMediaDevices
-    });
-    const {
-      unmount
-    } = render(/*#__PURE__*/_jsx(Listener, {
-      ...props
-    }));
-    unmount();
-  });
-});

package/dist/Dialogs/Listener/package.json

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

package/dist/Dialogs/LiveGameTutorial/LiveGameTutorial.js

@@ -1,166 +0,0 @@
-import { useState } from "react";
-import ResponsiveDialog from "../ResponsiveDialog/ResponsiveDialog";
-import MobileStepper from "@mui/material/MobileStepper";
-import Button from "@mui/material/Button";
-import KeyboardArrowLeft from "@mui/icons-material/KeyboardArrowLeft";
-import KeyboardArrowRight from "@mui/icons-material/KeyboardArrowRight";
-import { useTheme } from "@mui/material/styles";
-import AutoPlaySwipeableViews from "react-swipeable-views";
-import { Box, Paper, Typography } from "@mui/material";
-import SeePlace from "../../img/NualangLiveResult.svg";
-import NualangLiveTranslate from "../../img/NualangLiveTranslate.svg";
-import NualangLiveTranslateQuickly from "../../img/NualangLiveTranslateQuickly.svg";
-import NualangLiveListen from "../../img/NualangLiveListen.svg";
-import NualangLiveRoleplayConversation from "../../img/NualangLiveRoleplayConvo.svg";
-import NualangLiveRoleplayChooseAnswer from "../../img/NualangLiveRoleplayAnswer.svg";
-import NualangLiveAnswerQuickly from "../../img/NualangLiveAnswerQuickly.svg";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export function DotsMobileStepper({
-  images,
-  t
-}) {
-  const theme = useTheme();
-  const [activeStep, setActiveStep] = useState(0);
-  const maxSteps = images.length;
-  const handleNext = () => {
-    setActiveStep(prevActiveStep => prevActiveStep + 1);
-  };
-  const handleBack = () => {
-    setActiveStep(prevActiveStep => prevActiveStep - 1);
-  };
-  const handleStepChange = step => {
-    setActiveStep(step);
-  };
-  return /*#__PURE__*/_jsxs(Box, {
-    sx: {
-      maxWidth: 800,
-      flexGrow: 1
-    },
-    children: [/*#__PURE__*/_jsx(AutoPlaySwipeableViews, {
-      axis: theme.direction === "rtl" ? "x-reverse" : "x",
-      index: activeStep,
-      onChangeIndex: handleStepChange,
-      enableMouseEvents: true,
-      children: images.map((step, index) => /*#__PURE__*/_jsx("div", {
-        children: Math.abs(activeStep - index) <= 2 ? /*#__PURE__*/_jsx(Box, {
-          component: "img",
-          sx: {
-            display: "block",
-            maxWidth: 720,
-            overflow: "hidden",
-            width: "100%",
-            margin: "auto",
-            borderRadius: "10px",
-            marginTop: 1,
-            marginBottom: 1
-          },
-          src: step.imgPath,
-          alt: step.label
-        }) : null
-      }, step.label))
-    }), /*#__PURE__*/_jsx(Paper, {
-      square: true,
-      elevation: 0,
-      sx: {
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        height: 35,
-        pl: 2,
-        color: "primary"
-      },
-      children: /*#__PURE__*/_jsx(Typography, {
-        children: images[activeStep]?.label
-      })
-    }), /*#__PURE__*/_jsx(MobileStepper, {
-      steps: maxSteps,
-      position: "static",
-      activeStep: activeStep,
-      nextButton: /*#__PURE__*/_jsxs(Button, {
-        size: "small",
-        onClick: handleNext,
-        disabled: activeStep === maxSteps - 1,
-        children: [t("next"), theme.direction === "rtl" ? /*#__PURE__*/_jsx(KeyboardArrowLeft, {}) : /*#__PURE__*/_jsx(KeyboardArrowRight, {})]
-      }),
-      backButton: /*#__PURE__*/_jsxs(Button, {
-        size: "small",
-        onClick: handleBack,
-        disabled: activeStep === 0,
-        children: [theme.direction === "rtl" ? /*#__PURE__*/_jsx(KeyboardArrowRight, {}) : /*#__PURE__*/_jsx(KeyboardArrowLeft, {}), t("back")]
-      }),
-      sx: {
-        color: "primary"
-      }
-    })]
-  });
-}
-export default function LiveGameTutorial({
-  handleClose,
-  open,
-  exerciseName,
-  t
-}) {
-  const translation_images = [{
-    imgPath: NualangLiveTranslate,
-    label: t("exercise_description")
-  }, {
-    imgPath: NualangLiveTranslateQuickly,
-    label: t("translate_description")
-  }, {
-    imgPath: SeePlace,
-    label: t("result_description")
-  }];
-  const listening_images = [{
-    imgPath: NualangLiveListen,
-    label: t("exercise_description")
-  }, {
-    imgPath: NualangLiveAnswerQuickly,
-    label: t("listening_description")
-  }, {
-    imgPath: SeePlace,
-    label: t("result_description")
-  }];
-  const roleplay_images = [{
-    imgPath: NualangLiveRoleplayConversation,
-    label: t("roleplay_intro")
-  }, {
-    imgPath: NualangLiveRoleplayChooseAnswer,
-    label: t("listening_description")
-  }, {
-    imgPath: SeePlace,
-    label: t("result_description")
-  }];
-  let images = [];
-  switch (exerciseName) {
-    case "listening":
-      images = listening_images;
-      break;
-    case "translation":
-      images = translation_images;
-      break;
-    case "roleplay-story":
-      images = roleplay_images;
-      break;
-    default:
-      images = [];
-  }
-  return /*#__PURE__*/_jsx(ResponsiveDialog, {
-    open: open,
-    handleClose: handleClose,
-    dialogTitle: t(exerciseName),
-    t: t,
-    children: /*#__PURE__*/_jsx(Box, {
-      sx: {
-        display: "flex",
-        justifyContent: "center",
-        alignItems: "center",
-        width: "100%",
-        height: "100%"
-      },
-      children: /*#__PURE__*/_jsx(DotsMobileStepper, {
-        images: images,
-        t: t
-      })
-    })
-  });
-}

package/dist/Dialogs/LiveGameTutorial/package.json

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

package/dist/Dialogs/Members/Members.js

@@ -1,27 +0,0 @@
-// components
-import ResponsiveDialog from "../ResponsiveDialog/ResponsiveDialog";
-import MemberList from "../../Lists/Members/Members";
-import { jsx as _jsx } from "react/jsx-runtime";
-export default function Members({
-  open,
-  handleClose,
-  dialogTitle,
-  members,
-  getMemberDetails,
-  isClassroomArchived = false,
-  featureFlags,
-  ...otherProps
-}) {
-  return /*#__PURE__*/_jsx(ResponsiveDialog, {
-    open: open,
-    handleClose: handleClose,
-    dialogTitle: dialogTitle,
-    children: /*#__PURE__*/_jsx(MemberList, {
-      members: members,
-      getMemberDetails: getMemberDetails,
-      isClassroomArchived: isClassroomArchived,
-      featureFlags: featureFlags,
-      ...otherProps
-    })
-  });
-}

package/dist/Dialogs/Members/Members.test.js

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

package/dist/Dialogs/Members/package.json

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

package/dist/Dialogs/ModeratedDialog/ModeratedDialog.js

@@ -1,35 +0,0 @@
-import DialogContentText from "@mui/material/DialogContentText";
-import ResponsiveDialog from "../ResponsiveDialog/ResponsiveDialog";
-import { makeStyles } from "tss-react/mui";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const useStyles = makeStyles()(() => ({
-  zIndex: {
-    zIndex: "1400 !important"
-  }
-}));
-function ModeratedDialog({
-  t = text => text,
-  open,
-  handleClose,
-  moderationReason
-}) {
-  const {
-    classes
-  } = useStyles();
-  return /*#__PURE__*/_jsx(ResponsiveDialog, {
-    open: open,
-    handleClose: handleClose,
-    dialogTitle: t("moderate_title"),
-    className: classes.zIndex,
-    children: /*#__PURE__*/_jsxs(DialogContentText, {
-      children: [/*#__PURE__*/_jsx("p", {
-        children: t("moderated_image_dialog")
-      }), /*#__PURE__*/_jsx("br", {}), /*#__PURE__*/_jsx("p", {
-        children: t("moderation_reason", {
-          moderationReason: moderationReason
-        })
-      })]
-    })
-  });
-}
-export default ModeratedDialog;

package/dist/Dialogs/PDFViewer/PDFViewer.js

@@ -1,252 +0,0 @@
-import { useState, useEffect } from "react";
-import { Grid, Tooltip, IconButton, Box, Typography, Divider, TextField } from "@mui/material";
-import { alpha } from "@mui/material/styles";
-import ArrowBackIcon from "@mui/icons-material/ArrowBack";
-import ArrowForwardIcon from "@mui/icons-material/ArrowForward";
-import ZoomInIcon from "@mui/icons-material/ZoomIn";
-import ZoomOutIcon from "@mui/icons-material/ZoomOut";
-import ResponsiveDialog from "../ResponsiveDialog/ResponsiveDialog";
-import { Document, Page } from "react-pdf";
-import { makeStyles } from "tss-react/mui";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const useStyles = makeStyles()(theme => ({
-  pageContainer: {
-    [theme.breakpoints.up("sm")]: {
-      display: "flex",
-      justifyContent: "center",
-      overflow: "hidden"
-    },
-    width: "100%",
-    overflow: "auto",
-    marginBottom: "64px"
-  }
-}));
-function PDFControls({
-  t,
-  numPages,
-  pageNumber,
-  setPageNumber,
-  setScale,
-  scale
-}) {
-  const [inputPageNumber, setInputPageNumber] = useState(pageNumber);
-  const [localScale, setLocalScale] = useState(scale);
-  function zoomIn() {
-    setLocalScale(prevScale => prevScale + 0.2);
-  }
-  function zoomOut() {
-    setLocalScale(prevScale => Math.max(0.1, prevScale - 0.2));
-  }
-  useEffect(() => {
-    setScale(localScale);
-  }, [localScale]);
-  useEffect(() => {
-    if (inputPageNumber && inputPageNumber !== pageNumber) {
-      setPageNumber(inputPageNumber);
-    }
-  }, [inputPageNumber]);
-  function previousPage() {
-    setInputPageNumber(prevPageNumber => prevPageNumber + -1);
-  }
-  function nextPage() {
-    setInputPageNumber(prevPageNumber => prevPageNumber + 1);
-  }
-  return /*#__PURE__*/_jsxs(Grid, {
-    container: true,
-    spacing: 1,
-    sx: [{
-      justifyContent: "center",
-      alignItems: "center"
-    }, theme => ({
-      borderRadius: 100,
-      width: "auto",
-      position: "absolute",
-      bottom: theme.spacing(8),
-      zIndex: "3",
-      backgroundColor: alpha(theme.palette.background.paper, 0.95),
-      paddingTop: theme.spacing(1),
-      paddingBottom: theme.spacing(1),
-      transition: "box-shadow 0.4s",
-      "&:hover": {
-        backgroundColor: theme.palette.background.paper,
-        boxShadow: theme.shadows[2]
-      }
-    })],
-    children: [/*#__PURE__*/_jsx(Grid, {
-      children: /*#__PURE__*/_jsxs(Grid, {
-        container: true,
-        spacing: 2,
-        sx: {
-          justifyContent: "center",
-          alignItems: "center",
-          width: "100%"
-        },
-        children: [/*#__PURE__*/_jsx(Grid, {
-          sx: {
-            ml: 2
-          },
-          component: Typography,
-          children: t("page")
-        }), /*#__PURE__*/_jsx(Grid, {
-          children: /*#__PURE__*/_jsx(TextField, {
-            id: "page-number",
-            value: inputPageNumber,
-            onChange: event => {
-              const {
-                value
-              } = event.target;
-              if (value) {
-                let newValue = parseInt(value);
-                if (newValue > numPages) newValue = numPages;
-                if (newValue < 1 || isNaN(newValue)) newValue = 1;
-                setInputPageNumber(newValue);
-              } else {
-                setInputPageNumber(null);
-              }
-            },
-            size: "small",
-            sx: {
-              maxWidth: "50px"
-            },
-            slotProps: {
-              htmlInput: {
-                sx: {
-                  textAlign: "center"
-                }
-              },
-              inputLabel: {
-                shrink: true
-              }
-            }
-          })
-        }), /*#__PURE__*/_jsx(Grid, {
-          component: Typography,
-          children: "/"
-        }), /*#__PURE__*/_jsx(Grid, {
-          component: Typography,
-          children: numPages
-        })]
-      })
-    }), /*#__PURE__*/_jsx(Divider, {
-      orientation: "vertical",
-      variant: "middle",
-      flexItem: true,
-      sx: {
-        ml: 2
-      }
-    }), /*#__PURE__*/_jsx(Grid, {
-      children: /*#__PURE__*/_jsx(Tooltip, {
-        title: t("previous"),
-        children: /*#__PURE__*/_jsx("span", {
-          children: /*#__PURE__*/_jsx(IconButton, {
-            size: "large",
-            disabled: pageNumber <= 1,
-            onClick: previousPage,
-            children: /*#__PURE__*/_jsx(ArrowBackIcon, {})
-          })
-        })
-      })
-    }), /*#__PURE__*/_jsx(Grid, {
-      children: /*#__PURE__*/_jsx(Tooltip, {
-        title: t("next"),
-        children: /*#__PURE__*/_jsx("span", {
-          children: /*#__PURE__*/_jsx(IconButton, {
-            size: "large",
-            disabled: pageNumber >= numPages,
-            onClick: nextPage,
-            children: /*#__PURE__*/_jsx(ArrowForwardIcon, {})
-          })
-        })
-      })
-    }), /*#__PURE__*/_jsx(Divider, {
-      orientation: "vertical",
-      variant: "middle",
-      flexItem: true,
-      sx: {
-        ml: 1
-      }
-    }), /*#__PURE__*/_jsx(Grid, {
-      children: /*#__PURE__*/_jsx(Tooltip, {
-        title: t("zoom_out"),
-        children: /*#__PURE__*/_jsx("span", {
-          children: /*#__PURE__*/_jsx(IconButton, {
-            size: "large",
-            onClick: zoomOut,
-            children: /*#__PURE__*/_jsx(ZoomOutIcon, {})
-          })
-        })
-      })
-    }), /*#__PURE__*/_jsx(Grid, {
-      sx: {
-        mr: 2
-      },
-      children: /*#__PURE__*/_jsx(Tooltip, {
-        title: t("zoom_in"),
-        children: /*#__PURE__*/_jsx("span", {
-          children: /*#__PURE__*/_jsx(IconButton, {
-            size: "large",
-            onClick: zoomIn,
-            children: /*#__PURE__*/_jsx(ZoomInIcon, {})
-          })
-        })
-      })
-    })]
-  });
-}
-function PDFViewer({
-  pdfUrl,
-  t = text => text,
-  open,
-  handleClose,
-  pdfTitle,
-  pageNumber,
-  setPageNumber,
-  scale,
-  setScale
-}) {
-  const {
-    classes
-  } = useStyles();
-  const [numPages, setNumPages] = useState();
-  function onDocumentLoadSuccess({
-    numPages
-  }) {
-    setNumPages(numPages);
-  }
-  return /*#__PURE__*/_jsx(ResponsiveDialog, {
-    open: open,
-    dialogTitle: pdfTitle,
-    handleClose: handleClose,
-    isFullScreen: true,
-    children: /*#__PURE__*/_jsxs(Box, {
-      sx: {
-        width: "100%",
-        display: "flex",
-        flexDirection: "column",
-        alignItems: "center",
-        justifyContent: "center",
-        padding: 2,
-        overflow: "hidden"
-      },
-      children: [/*#__PURE__*/_jsx(PDFControls, {
-        t: t,
-        pageNumber: pageNumber,
-        setPageNumber: setPageNumber,
-        numPages: numPages,
-        setScale: setScale,
-        scale: scale
-      }), /*#__PURE__*/_jsx(Box, {
-        className: classes.pageContainer,
-        children: /*#__PURE__*/_jsx(Document, {
-          file: pdfUrl,
-          onLoadSuccess: onDocumentLoadSuccess,
-          children: /*#__PURE__*/_jsx(Page, {
-            pageNumber: pageNumber,
-            scale: scale
-          })
-        })
-      })]
-    })
-  });
-}
-export default PDFViewer;

package/dist/Dialogs/PhraseNameDialog/PhraseNameDialog.js

@@ -1,30 +0,0 @@
-import { useState } from "react";
-import { create } from "react-modal-promise";
-import ResponsiveDialog from "../ResponsiveDialog/ResponsiveDialog";
-import { TextField } from "@mui/material";
-import { jsx as _jsx } from "react/jsx-runtime";
-function PhraseName({
-  t = text => text,
-  open,
-  close
-}) {
-  const [text, setText] = useState(t("my_unnamed_clip"));
-  const submit = () => close(text);
-  const cancel = () => close(false);
-  return /*#__PURE__*/_jsx(ResponsiveDialog, {
-    open: open,
-    handleClose: cancel,
-    handleSubmit: submit,
-    submitText: t("submit"),
-    dialogTitle: t("enter_name_your_voice_clip"),
-    fullScreenDisabled: true,
-    children: /*#__PURE__*/_jsx(TextField, {
-      fullWidth: true,
-      variant: "outlined",
-      value: text,
-      onChange: event => setText(event.target.value)
-    })
-  });
-}
-const PhraseNameDialog = create(PhraseName);
-export default PhraseNameDialog;