@nualang/nualang-ui-components 0.1.1399 → 0.2.0

package/dist/Dialogs/SearchTopic/SearchTopic.js

@@ -1,87 +0,0 @@
-import InputHelper from "../../Forms/InputHelper/InputHelper";
-// import DialogContentText from '@mui/material/DialogContentText';
-import Switch from "@mui/material/Switch";
-import Grid from "@mui/material/Grid";
-import Typography from "@mui/material/Typography";
-import { makeStyles } from "tss-react/mui";
-
-// components
-import ResponsiveDialog from "../ResponsiveDialog/ResponsiveDialog";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const useStyles = makeStyles()(() => ({
-  center: {
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center"
-  }
-}));
-function SearchTopic({
-  t = text => text,
-  open,
-  handleClose,
-  handleSubmit,
-  handleSwitchChange,
-  isPublic,
-  submitText,
-  dialogTitle,
-  sectionName,
-  topic: {
-    topicName
-  },
-  handleInputChange,
-  ...otherProps
-}) {
-  const {
-    classes
-  } = useStyles();
-  return /*#__PURE__*/_jsxs(ResponsiveDialog, {
-    open: open,
-    handleClose: handleClose,
-    handleSubmit: handleSubmit,
-    submitText: t("add_topic"),
-    dialogTitle: t("add_topic"),
-    children: [/*#__PURE__*/_jsx("div", {
-      className: classes.center,
-      children: /*#__PURE__*/_jsx(Typography, {
-        children: /*#__PURE__*/_jsxs(Grid, {
-          component: "label",
-          container: true,
-          spacing: 1,
-          sx: {
-            alignItems: "center"
-          },
-          children: [/*#__PURE__*/_jsx(Grid, {
-            children: "Private"
-          }), /*#__PURE__*/_jsx(Grid, {
-            children: /*#__PURE__*/_jsx(Switch, {
-              checked: isPublic,
-              onChange: handleSwitchChange,
-              name: "checkedA",
-              color: "primary",
-              slotProps: {
-                input: {
-                  "aria-label": "primary checkbox"
-                }
-              }
-            })
-          }), /*#__PURE__*/_jsx(Grid, {
-            children: "Public"
-          })]
-        })
-      })
-    }), /*#__PURE__*/_jsx(InputHelper, {
-      t: t,
-      value: topicName,
-      onChange: handleInputChange,
-      margin: "normal",
-      autoFocus: true,
-      id: "topicName",
-      name: "topicName",
-      label: t("topic_code"),
-      type: "text",
-      variant: "outlined",
-      fullWidth: true
-    })]
-  });
-}
-export default SearchTopic;

package/dist/Dialogs/SelectActor/SelectActor.js

@@ -1,157 +0,0 @@
-import { Box, Grid, Typography, Button, Avatar } from "@mui/material";
-import { useTheme } from "@mui/material/styles";
-import Person from "@mui/icons-material/Person";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-function SelectActor({
-  t = text => text,
-  actorImage1,
-  actorImage2,
-  setActor,
-  actorName1,
-  actorName2
-}) {
-  const theme = useTheme();
-  return /*#__PURE__*/_jsxs(Grid, {
-    container: true,
-    sx: {
-      width: "100%",
-      display: "grid",
-      justifyContent: "center"
-    },
-    children: [/*#__PURE__*/_jsx(Grid, {
-      sx: {
-        display: "flex",
-        justifyContent: "center"
-      },
-      children: /*#__PURE__*/_jsxs(Box, {
-        sx: {
-          display: "flex",
-          flexDirection: "column"
-        },
-        children: [/*#__PURE__*/_jsx(Typography, {
-          align: "center",
-          variant: "h5",
-          component: "h1",
-          sx: {
-            fontWeight: 600
-          },
-          gutterBottom: true,
-          children: t("select_role")
-        }), /*#__PURE__*/_jsx(Typography, {
-          align: "center",
-          variant: "subtitle",
-          component: "p",
-          children: t("select_role_description")
-        })]
-      })
-    }), /*#__PURE__*/_jsx(Grid, {
-      size: {
-        md: 12
-      },
-      children: /*#__PURE__*/_jsxs(Box, {
-        sx: {
-          display: "flex",
-          justifyContent: "center"
-        },
-        children: [/*#__PURE__*/_jsxs(Button, {
-          sx: {
-            display: "flex",
-            flexDirection: "column",
-            borderRadius: "10%",
-            boxShadow: 4,
-            m: 3
-          },
-          onClick: () => setActor(1),
-          "data-cy": "roleplay_actor1",
-          children: [actorImage1 ? /*#__PURE__*/_jsx("img", {
-            src: actorImage1,
-            style: {
-              width: 150,
-              height: 150,
-              margin: theme.spacing(2)
-            },
-            alt: ""
-          }) : /*#__PURE__*/_jsx(Box, {
-            component: "span",
-            sx: {
-              width: 150,
-              height: 150,
-              margin: theme.spacing(2),
-              display: "flex",
-              justifyContent: "center",
-              alignItems: "center"
-            },
-            children: /*#__PURE__*/_jsx(Avatar, {
-              sx: theme => ({
-                width: 100,
-                height: 100,
-                backgroundColor: theme.palette.mode === "dark" ? "white" : "",
-                color: theme.palette.mode === "dark" ? theme.palette.background.default : ""
-              }),
-              alt: "",
-              children: /*#__PURE__*/_jsx(Person, {
-                fontSize: "large"
-              })
-            })
-          }), /*#__PURE__*/_jsxs(Typography, {
-            align: "center",
-            sx: {
-              mb: 2,
-              fontWeight: 600
-            },
-            children: [" ", actorName1, " "]
-          })]
-        }), /*#__PURE__*/_jsxs(Button, {
-          sx: {
-            display: "flex",
-            flexDirection: "column",
-            borderRadius: "10%",
-            boxShadow: 4,
-            m: 3
-          },
-          onClick: () => setActor(2),
-          "data-cy": "roleplay_actor2",
-          children: [actorImage2 ? /*#__PURE__*/_jsx("img", {
-            src: actorImage2,
-            style: {
-              width: 150,
-              height: 150,
-              margin: theme.spacing(2)
-            },
-            alt: ""
-          }) : /*#__PURE__*/_jsx(Box, {
-            component: "span",
-            sx: {
-              width: 150,
-              height: 150,
-              margin: theme.spacing(2),
-              display: "flex",
-              justifyContent: "center",
-              alignItems: "center"
-            },
-            children: /*#__PURE__*/_jsx(Avatar, {
-              sx: theme => ({
-                width: 100,
-                height: 100,
-                backgroundColor: theme.palette.mode === "dark" ? "white" : "",
-                color: theme.palette.mode === "dark" ? theme.palette.background.default : ""
-              }),
-              alt: "",
-              children: /*#__PURE__*/_jsx(Person, {
-                fontSize: "large"
-              })
-            })
-          }), /*#__PURE__*/_jsxs(Typography, {
-            align: "center",
-            sx: {
-              mb: 2,
-              fontWeight: 600
-            },
-            children: [" ", actorName2, " "]
-          })]
-        })]
-      })
-    })]
-  });
-}
-export default SelectActor;

package/dist/Dialogs/SelectActor/package.json

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

package/dist/Dialogs/SelectClassroom/SelectClassroom.js

@@ -1,81 +0,0 @@
-import DialogContentText from "@mui/material/DialogContentText";
-import ResponsiveDialog from "../ResponsiveDialog/ResponsiveDialog";
-import List from "@mui/material/List";
-import ListItem from "@mui/material/ListItem";
-import ListItemText from "@mui/material/ListItemText";
-import ListItemAvatar from "@mui/material/ListItemAvatar";
-import Avatar from "@mui/material/Avatar";
-import ImageIcon from "@mui/icons-material/Image";
-import Typography from "@mui/material/Typography";
-import { Link as RouterLink } from "react-router";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-function SelectClassroom({
-  open,
-  handleClose,
-  title,
-  teachClassrooms = [],
-  t,
-  type,
-  id,
-  courseId,
-  sectionId,
-  topicId,
-  botId,
-  roleplayId,
-  ...otherProps
-}) {
-  const getPath = classroomId => {
-    let path;
-    if (type === "topic" || type === "translation" || type === "listening" || type === "pronunciation" || type === "bot") {
-      path = `/classrooms/${classroomId}?courseId=${courseId}&sectionId=${sectionId}&topicId=${topicId}#Progress`;
-    } else if (type === "roleplay") {
-      path = `/classrooms/${classroomId}?courseId=${courseId}&sectionId=${sectionId}&topicId=${topicId}&roleplayId=${roleplayId}#Progress`;
-    } else if (type === "section") {
-      path = `/classrooms/${classroomId}?courseId=${courseId}&sectionId=${sectionId}#Progress`;
-    } else {
-      path = `/classrooms/${classroomId}?courseId=${courseId}#Progress`;
-    }
-    return path;
-  };
-  return /*#__PURE__*/_jsxs(ResponsiveDialog, {
-    open: open,
-    handleClose: handleClose,
-    dialogTitle: title,
-    children: [/*#__PURE__*/_jsx(List, {
-      children: teachClassrooms.map((c, i) => {
-        const {
-          classroomId,
-          classroomName,
-          description,
-          picture
-        } = c;
-        let path = getPath(classroomId);
-        return /*#__PURE__*/_jsxs(ListItem, {
-          button: true,
-          component: RouterLink,
-          to: path,
-          sx: {
-            color: "inherit"
-          },
-          children: [/*#__PURE__*/_jsx(ListItemAvatar, {
-            children: picture ? /*#__PURE__*/_jsx(Avatar, {
-              src: picture,
-              alt: ""
-            }) : /*#__PURE__*/_jsx(Avatar, {
-              alt: "",
-              children: /*#__PURE__*/_jsx(ImageIcon, {})
-            })
-          }), /*#__PURE__*/_jsx(ListItemText, {
-            primary: classroomName,
-            secondary: description
-          })]
-        }, `${classroomId}`);
-      })
-    }), teachClassrooms.length === 0 && /*#__PURE__*/_jsx(DialogContentText, {
-      children: /*#__PURE__*/_jsx(Typography, {
-        children: t("classrooms_not_created")
-      })
-    })]
-  });
-}
-export default SelectClassroom;

package/dist/Dialogs/SelectClassroom/package.json

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

package/dist/Dialogs/SelectExercise/SelectExercise.js

@@ -1,47 +0,0 @@
-import { useState } from "react";
-import CourseSelection from "../../Lists/CourseSelection/CourseSelection";
-import ResponsiveDialog from "../ResponsiveDialog/ResponsiveDialog";
-import { Box } from "@mui/system";
-import { DialogContentText } from "@mui/material";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-function SelectExercise({
-  t = text => text,
-  open,
-  handleClose,
-  courses,
-  getCourseSections,
-  getRoleplays,
-  getPhraseLists,
-  handleCreateGame,
-  username,
-  courseSectionTopicId = ""
-}) {
-  const [isExerciseSelected, setIsExerciseSelected] = useState(false);
-  return /*#__PURE__*/_jsxs(ResponsiveDialog, {
-    open: open,
-    handleClose: handleClose,
-    dialogTitle: t("play_live"),
-    maxWidth: "md",
-    children: [/*#__PURE__*/_jsx(DialogContentText, {
-      children: t("live_dialog_description")
-    }), /*#__PURE__*/_jsx(Box, {
-      sx: {
-        mt: 1
-      },
-      children: /*#__PURE__*/_jsx(CourseSelection, {
-        courses: courses,
-        getCourseSections: getCourseSections,
-        getRoleplays: getRoleplays,
-        getPhraseLists: getPhraseLists,
-        username: username,
-        handleCreateGame: handleCreateGame,
-        t: t,
-        isExerciseSelected: isExerciseSelected,
-        setIsExerciseSelected: setIsExerciseSelected,
-        isDialogOpen: open,
-        courseSectionTopicId: courseSectionTopicId
-      })
-    })]
-  });
-}
-export default SelectExercise;

package/dist/Dialogs/SelectExercise/package.json

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

package/dist/Dialogs/Substitution/Substitution.js

@@ -1,82 +0,0 @@
-import { useState } from "react";
-import DialogContentText from "@mui/material/DialogContentText";
-
-// components
-import ResponsiveDialog from "../ResponsiveDialog/ResponsiveDialog";
-import InputHelper from "../../Forms/InputHelper/InputHelper";
-import { makeStyles } from "tss-react/mui";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const useStyles = makeStyles()(theme => ({
-  dialog: {
-    marginBottom: "15px"
-  }
-}));
-function Substitution({
-  t = text => text,
-  open,
-  handleClose,
-  handleTranslate,
-  submitText,
-  dialogTitle,
-  learnLang,
-  forLang,
-  onSubmit,
-  update = false,
-  forLangCharacters,
-  learnLangCharacters,
-  ...otherProps
-}) {
-  const {
-    classes
-  } = useStyles();
-  const [name, setSubstituteName] = useState("");
-  const [value, setSubstituteValue] = useState("");
-  const resetVariableNameState = () => {
-    setSubstituteName("");
-    setSubstituteValue("");
-  };
-  const handleSubmit = () => {
-    onSubmit({
-      name: name.trim(),
-      value: value.trim()
-    });
-    resetVariableNameState();
-  };
-  const title = t("substitutions");
-  const desc = t("substitution_desc");
-  return /*#__PURE__*/_jsxs(ResponsiveDialog, {
-    open: open,
-    handleClose: handleClose,
-    handleSubmit: handleSubmit,
-    submitText: t("add_substitution"),
-    dialogTitle: title,
-    children: [/*#__PURE__*/_jsx(DialogContentText, {
-      className: classes.dialog,
-      children: desc
-    }), /*#__PURE__*/_jsx(InputHelper, {
-      t: t,
-      value: name,
-      onChange: e => setSubstituteName(e.target.value),
-      margin: "normal",
-      autoFocus: true,
-      id: "name",
-      name: "name",
-      label: t("substitution_name"),
-      type: "text",
-      fullWidth: true,
-      emoji: true
-    }), /*#__PURE__*/_jsx(InputHelper, {
-      t: t,
-      value: value,
-      onChange: e => setSubstituteValue(e.target.value),
-      margin: "normal",
-      id: "value",
-      name: "value",
-      label: t("substitution_value"),
-      type: "text",
-      fullWidth: true,
-      emoji: true
-    })]
-  });
-}
-export default Substitution;

package/dist/Dialogs/Substitution/package.json

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

package/dist/Dialogs/Topic/Topic.js

@@ -1,69 +0,0 @@
-import { useState } from "react";
-import DialogContentText from "@mui/material/DialogContentText";
-
-// components
-import ResponsiveDialog from "../ResponsiveDialog/ResponsiveDialog";
-import InputHelper from "../../Forms/InputHelper/InputHelper";
-import { makeStyles } from "tss-react/mui";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const useStyles = makeStyles()(theme => ({
-  dialog: {
-    marginBottom: "15px"
-  }
-}));
-function Topic({
-  t = text => text,
-  open,
-  handleClose,
-  handleTranslate,
-  submitText,
-  dialogTitle,
-  learnLang,
-  forLang,
-  onSubmit,
-  update = false,
-  forLangCharacters,
-  learnLangCharacters,
-  makeChatGptApiRequest,
-  ...otherProps
-}) {
-  const {
-    classes
-  } = useStyles();
-  const [topicName, setTopicName] = useState("");
-  const resetTopicNameState = () => {
-    setTopicName("");
-  };
-  const handleSubmit = () => {
-    onSubmit({
-      name: topicName.trim()
-    });
-    resetTopicNameState();
-  };
-  const title = t("topic");
-  const desc = t("topic_desc");
-  return /*#__PURE__*/_jsxs(ResponsiveDialog, {
-    open: open,
-    handleClose: handleClose,
-    handleSubmit: handleSubmit,
-    submitText: t("next"),
-    dialogTitle: title,
-    children: [/*#__PURE__*/_jsx(DialogContentText, {
-      className: classes.dialog,
-      children: desc
-    }), /*#__PURE__*/_jsx(InputHelper, {
-      t: t,
-      value: topicName,
-      onChange: e => setTopicName(e.target.value),
-      margin: "normal",
-      autoFocus: true,
-      id: "topicName",
-      name: "topicName",
-      label: t("topic_name"),
-      type: "text",
-      fullWidth: true,
-      emoji: true
-    })]
-  });
-}
-export default Topic;

package/dist/Dialogs/Topic/package.json

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

package/dist/Dialogs/TopicPreview/TopicPreview.js

@@ -1,39 +0,0 @@
-// components
-import ResponsiveDialog from "../ResponsiveDialog/ResponsiveDialog";
-import TopicPreviewList from "../../Lists/TopicPreview/TopicPreview";
-import { makeStyles } from "tss-react/mui";
-import { jsx as _jsx } from "react/jsx-runtime";
-const useStyles = makeStyles()(() => ({
-  dialogContent: {
-    paddingTop: 0
-  }
-}));
-export default function TopicPreview({
-  t,
-  open,
-  isCreator,
-  handleClose,
-  dialogTitle,
-  courseId,
-  sectionId,
-  topicId,
-  getCourseSectionTopic
-}) {
-  const {
-    classes
-  } = useStyles();
-  return /*#__PURE__*/_jsx(ResponsiveDialog, {
-    open: open,
-    handleClose: handleClose,
-    dialogTitle: dialogTitle,
-    dialogContentClassName: classes.dialogContent,
-    children: /*#__PURE__*/_jsx(TopicPreviewList, {
-      t: t,
-      isCreator: isCreator,
-      courseId: courseId,
-      sectionId: sectionId,
-      topicId: topicId,
-      getCourseSectionTopic: getCourseSectionTopic
-    })
-  });
-}

package/dist/Dialogs/TopicPreview/package.json

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