@nualang/nualang-ui-components 0.1.1399 → 0.2.0

package/dist/Dialogs/UploadRoleplayScript/UploadRoleplayScript.js

@@ -1,287 +0,0 @@
-import { useState, useEffect } from "react";
-import DialogContentText from "@mui/material/DialogContentText";
-import Box from "@mui/material/Box";
-import Button from "@mui/material/Button";
-import FileCopyIcon from "@mui/icons-material/FileCopy";
-
-// components
-import ResponsiveDialog from "../ResponsiveDialog/ResponsiveDialog";
-import ExampleCSVImage from "./roleplay-script-csv.png";
-import { Typography, TextField, Divider } from "@mui/material";
-import { makeStyles } from "tss-react/mui";
-import ParseScriptErrors from "../../Lists/ParseScriptErrors/ParseScriptErrors";
-import CSVUploader from "../../Misc/CSVUploader/CSVUploader";
-import useDebounce from "../../hooks/useDebounce";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const useStyles = makeStyles()(theme => ({
-  parseErrorsBox: {
-    marginTop: theme.spacing()
-  }
-}));
-function UploadRoleplayScript({
-  t = text => text,
-  open,
-  handleClose,
-  onSubmit
-}) {
-  const {
-    classes
-  } = useStyles();
-  const [script, setScript] = useState([]);
-  const [errors, setErrors] = useState([]);
-  const [csvDataInput, setCsvDataInput] = useState("");
-  const debouncedCsvDataInput = useDebounce(csvDataInput, 2000);
-  const formatData = data => {
-    if (data.Type && data.Type.toLowerCase().includes("actor")) {
-      const actorNumber = data.Type.substr(data.Type.length - 1);
-      return {
-        actor: parseInt(actorNumber),
-        text: data["Text/Question"]
-      };
-    } else if (data.Type && data.Type.toLowerCase() === "question") {
-      const formattedAnswers = data["Answers (Questions Only)"].split("|").map((a, i) => {
-        let correct = false;
-        if (data["Correct Answers (Questions Only)"] && data["Correct Answers (Questions Only)"].includes(i + 1)) {
-          correct = true;
-        }
-        a = {
-          correct,
-          text: a,
-          type: "multichoice"
-        };
-        return a;
-      });
-      return {
-        answers: formattedAnswers,
-        question: data["Text/Question"]
-      };
-    }
-    return false;
-  };
-  const validateRow = (data, index) => {
-    const row = index + 2;
-    let parseErrors = [];
-
-    /**
-     * Checks if row is an actor or question
-     */
-    if (!Object.prototype.hasOwnProperty.call(data, "actor") && !Object.prototype.hasOwnProperty.call(data, "question")) {
-      parseErrors.push({
-        row,
-        errorMessage: "no_valid_type"
-      });
-    }
-
-    /**
-     * Checks if a actor text object has the following:
-     * - text exists
-     * - actor attribute is a number e.g. actor1, actor2
-     */
-    if (Object.prototype.hasOwnProperty.call(data, "actor")) {
-      if (!data.text) {
-        parseErrors.push({
-          row,
-          errorMessage: "no_actor_text"
-        });
-      }
-      if (isNaN(data.actor)) {
-        parseErrors.push({
-          row,
-          errorMessage: "no_actor_number"
-        });
-      }
-    }
-
-    /**
-     * Checks if a question object has the following:
-     * - question text
-     * - answers exists
-     * - correct answer(s) exists
-     */
-    if (Object.prototype.hasOwnProperty.call(data, "question")) {
-      if (!data?.question) {
-        parseErrors.push({
-          row,
-          errorMessage: "no_question"
-        });
-      }
-      if (Object.prototype.hasOwnProperty.call(data, "answers")) {
-        if (data.answers && data.answers.length === 1 && !data.answers[0].text) {
-          parseErrors.push({
-            row,
-            errorMessage: "no_answers_provided"
-          });
-        }
-        const correctAnswers = data.answers.filter(answer => answer.correct === true);
-        if (correctAnswers.length === 0) {
-          parseErrors.push({
-            row,
-            errorMessage: "no_correct_answer_provided"
-          });
-        }
-      } else {
-        parseErrors.push({
-          row,
-          errorMessage: "no_answers"
-        });
-      }
-    }
-    if (parseErrors.length > 0) {
-      return parseErrors;
-    }
-    return false;
-  };
-  const handleUploadAccepted = async results => {
-    setErrors([]);
-    if (results.errors && results.errors.length) {
-      // formats errors coming from CSVReader into common error format
-      // used for validating rows
-      const formattedErrors = results.errors.reduce((acc, cur) => {
-        acc.push({
-          row: cur.row,
-          errorMessage: cur.message
-        });
-        return acc;
-      }, []);
-      setErrors(prevState => [...prevState, ...formattedErrors]);
-      return;
-    } else {
-      const formattedScript = results.data.map((data, index) => {
-        data = formatData(data);
-        const rowErrors = validateRow(data, index);
-        if (rowErrors && rowErrors.length > 0) {
-          setErrors(prevState => [...prevState, ...rowErrors]);
-        }
-        return data;
-      }).filter(phrase => !!phrase);
-      setScript(formattedScript);
-    }
-  };
-  const handleSubmit = async () => {
-    try {
-      await onSubmit({
-        script
-      });
-    } catch (error) {
-      console.error(error);
-    }
-    handleClose();
-  };
-  const formatRoleplayScript = roleplayScipt => {
-    let varArray = [];
-    roleplayScipt.forEach((data, index) => {
-      if (!data.Type || !data["Text/Question"]) {
-        setErrors(prevState => [...prevState, {
-          row: index + 1,
-          errorMessage: "Missing Type or Text/Question"
-        }]);
-      } else {
-        const actor = data.Type === "Actor1" ? 1 : data.Type === "Actor2" ? 2 : null;
-        if (actor) {
-          varArray.push({
-            actor: actor,
-            text: data["Text/Question"]
-          });
-        }
-      }
-    });
-    return varArray;
-  };
-  useEffect(() => {
-    const handleUploadCsvDataText = async () => {
-      setErrors([]);
-      const lines = csvDataInput.trim().split("\n");
-      const headers = lines[0].split(",").map(h => h.trim());
-      const rows = lines.slice(1);
-      const jsonArray = rows.map(row => {
-        const values = row.match(/(".*?"|[^",\n]+)(?=\s*,|\s*$)/g).map(v => v.replace(/^"|"$/g, "").trim());
-        const entry = {};
-        headers.forEach((header, i) => {
-          entry[header] = values[i] ?? "";
-        });
-        return entry;
-      });
-      const formattedRoleplayScript = formatRoleplayScript(jsonArray);
-      setScript(formattedRoleplayScript);
-    };
-    if (debouncedCsvDataInput) {
-      handleUploadCsvDataText();
-    }
-  }, [debouncedCsvDataInput]);
-  return /*#__PURE__*/_jsxs(ResponsiveDialog, {
-    open: open,
-    handleClose: () => {
-      setErrors([]);
-      handleClose();
-    },
-    handleSubmit: handleSubmit,
-    submitText: t("add_script"),
-    dialogTitle: t("upload_script"),
-    isSubmitDisabled: !script || script.length === 0 || errors.length > 0,
-    children: [/*#__PURE__*/_jsx(DialogContentText, {
-      children: t("upload_script_desc")
-    }), /*#__PURE__*/_jsx(Box, {
-      sx: {
-        py: 1
-      },
-      children: /*#__PURE__*/_jsx("img", {
-        src: ExampleCSVImage,
-        height: "150",
-        alt: ""
-      })
-    }), /*#__PURE__*/_jsx(Box, {
-      sx: {
-        pb: 2
-      },
-      children: /*#__PURE__*/_jsx(Button, {
-        variant: "outlined",
-        startIcon: /*#__PURE__*/_jsx(FileCopyIcon, {}),
-        href: "https://docs.google.com/spreadsheets/d/1C-JMsKBvDCGZhcKsoB8Y1ms6c5mqJ1B7YhzEpcIJSrE/copy",
-        target: "_blank",
-        rel: "noopener noreferrer",
-        children: t("open_in_google_sheets")
-      })
-    }), /*#__PURE__*/_jsx(Box, {
-      children: /*#__PURE__*/_jsx(CSVUploader, {
-        t: t,
-        handleUploadAccepted: handleUploadAccepted
-      })
-    }), /*#__PURE__*/_jsx(Divider, {
-      sx: {
-        my: 2
-      },
-      children: "OR"
-    }), /*#__PURE__*/_jsx(Box, {
-      children: /*#__PURE__*/_jsx(TextField, {
-        id: "csvDataInput",
-        name: "csvDataInput",
-        label: t("paste_your_csv_data"),
-        placeholder: `Type, Text/Question\nActor1, "How are you?"\nActor2, "I am fine, thank you!"`,
-        value: csvDataInput,
-        fullWidth: true,
-        multiline: true,
-        rows: 4,
-        onChange: e => setCsvDataInput(e.target.value)
-      })
-    }), errors && errors.length > 0 && /*#__PURE__*/_jsxs(Box, {
-      className: classes.parseErrorsBox,
-      sx: {
-        py: 1
-      },
-      children: [/*#__PURE__*/_jsx(Typography, {
-        variant: "subtitle1",
-        color: "error",
-        children: /*#__PURE__*/_jsxs(Box, {
-          sx: {
-            fontWeight: "fontWeightBold"
-          },
-          children: [t("errors"), " (", errors.length, ")"]
-        })
-      }), /*#__PURE__*/_jsx(ParseScriptErrors, {
-        t: t,
-        errors: errors
-      })]
-    })]
-  });
-}
-export default UploadRoleplayScript;

package/dist/Dialogs/UploadRoleplayScript/UploadRoleplayScript.test.js

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

package/dist/Dialogs/UploadRoleplayScript/package.json

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

package/dist/Dialogs/UploadVideo/UploadVideo.js

@@ -1,80 +0,0 @@
-import { useState } from "react";
-import Box from "@mui/material/Box";
-
-// components
-import ResponsiveDialog from "../ResponsiveDialog/ResponsiveDialog";
-import { Typography } from "@mui/material";
-import { makeStyles } from "tss-react/mui";
-import ParseScriptErrors from "../../Lists/ParseScriptErrors/ParseScriptErrors";
-import VideoUploader from "../../Forms/VideoUploader/VideoUploader";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const useStyles = makeStyles()(theme => ({
-  parseErrorsBox: {
-    marginTop: theme.spacing()
-  }
-}));
-function UploadVideo({
-  t = text => text,
-  open,
-  handleClose,
-  onSubmit,
-  loading,
-  video,
-  setVideo
-}) {
-  const {
-    classes
-  } = useStyles();
-  const [errors, setErrors] = useState([]);
-  const [isVideoSubmitting, setIsVideoSubmitting] = useState(false);
-  const handleSubmit = async () => {
-    try {
-      setIsVideoSubmitting(true);
-      await onSubmit({
-        video
-      });
-    } catch (error) {
-      console.error(error);
-    }
-    setIsVideoSubmitting(false);
-    handleClose();
-  };
-  return /*#__PURE__*/_jsxs(ResponsiveDialog, {
-    open: open,
-    handleClose: () => {
-      setErrors([]);
-      handleClose();
-    },
-    handleSubmit: handleSubmit,
-    submitText: t("add_video"),
-    dialogTitle: t("upload_video"),
-    isSubmitDisabled: !video || video.length === 0 || errors.length > 0 || isVideoSubmitting,
-    children: [/*#__PURE__*/_jsx(Box, {
-      children: /*#__PURE__*/_jsx(VideoUploader, {
-        t: t,
-        file: video,
-        setFile: setVideo,
-        loading: loading
-      })
-    }), errors && errors.length > 0 && /*#__PURE__*/_jsxs(Box, {
-      className: classes.parseErrorsBox,
-      sx: {
-        py: 1
-      },
-      children: [/*#__PURE__*/_jsx(Typography, {
-        variant: "subtitle1",
-        color: "error",
-        children: /*#__PURE__*/_jsxs(Box, {
-          sx: {
-            fontWeight: "fontWeightBold"
-          },
-          children: [t("errors"), " (", errors.length, ")"]
-        })
-      }), /*#__PURE__*/_jsx(ParseScriptErrors, {
-        t: t,
-        errors: errors
-      })]
-    })]
-  });
-}
-export default UploadVideo;

package/dist/Dialogs/UploadVideo/UploadVideo.test.js

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

package/dist/Dialogs/UploadVideo/package.json

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

package/dist/Dialogs/Variable/Variable.js

@@ -1,74 +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()(() => ({
-  dialog: {
-    marginBottom: "15px"
-  }
-}));
-function Variable({
-  t = text => text,
-  open,
-  handleClose,
-  onSubmit,
-  ...otherProps
-}) {
-  const {
-    classes
-  } = useStyles();
-  const [name, setVariableName] = useState("");
-  const [value, setVariableValue] = useState("");
-  const resetVariableNameState = () => {
-    setVariableName("");
-    setVariableValue("");
-  };
-  const handleSubmit = () => {
-    onSubmit({
-      name: name.trim(),
-      value: value.trim()
-    });
-    resetVariableNameState();
-  };
-  const title = t("variables");
-  const desc = t("variable_desc");
-  return /*#__PURE__*/_jsxs(ResponsiveDialog, {
-    open: open,
-    handleClose: handleClose,
-    handleSubmit: handleSubmit,
-    submitText: t("add_variable"),
-    dialogTitle: title,
-    children: [/*#__PURE__*/_jsx(DialogContentText, {
-      className: classes.dialog,
-      children: desc
-    }), /*#__PURE__*/_jsx(InputHelper, {
-      t: t,
-      value: name,
-      onChange: e => setVariableName(e.target.value),
-      margin: "normal",
-      autoFocus: true,
-      id: "name",
-      name: "name",
-      label: t("variable_name"),
-      type: "text",
-      fullWidth: true,
-      emoji: true
-    }), /*#__PURE__*/_jsx(InputHelper, {
-      value: value,
-      onChange: e => setVariableValue(e.target.value),
-      margin: "normal",
-      id: "value",
-      name: "value",
-      label: t("variable_value"),
-      type: "text",
-      fullWidth: true,
-      emoji: true,
-      t: t
-    })]
-  });
-}
-export default Variable;

package/dist/Dialogs/Variable/package.json

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

package/dist/Dialogs/VideoViewer/VideoViewer.js

@@ -1,61 +0,0 @@
-// eslint-disable-next-line no-unused-vars
-import { useState, useEffect } from "react";
-import ReactPlayer from "react-player";
-import ResponsiveDialog from "../ResponsiveDialog/ResponsiveDialog";
-import PropTypes from "prop-types";
-import { useTheme } from "@mui/material";
-import useMediaQuery from "@mui/material/useMediaQuery";
-import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-export default function VideoViewer({
-  open = false,
-  handleClose,
-  t = text => text,
-  s3Url = "",
-  title
-}) {
-  const theme = useTheme();
-  const fullScreen = useMediaQuery(theme.breakpoints.down("lg"));
-  const [playing, setPlaying] = useState(false);
-  const [keepDialogMounted, setKeepDialogMounted] = useState(true);
-  useEffect(() => {
-    if (open) {
-      setPlaying(true);
-    }
-    if (!open) {
-      setPlaying(false);
-    }
-  }, [open]);
-  return /*#__PURE__*/_jsx(_Fragment, {
-    children: /*#__PURE__*/_jsx(ResponsiveDialog, {
-      open: open,
-      handleClose: handleClose,
-      maxWidth: "md",
-      dialogTitle: title || t("video_info"),
-      keepDialogMounted: keepDialogMounted,
-      children: /*#__PURE__*/_jsx(ReactPlayer, {
-        width: "100%",
-        controls: true,
-        src: s3Url,
-        height: fullScreen ? "100%" : "70vh",
-        playing: playing,
-        config: {
-          file: {
-            attributes: {
-              controlsList: "nodownload"
-            }
-          }
-        },
-        onContextMenu: e => e.preventDefault(),
-        onEnded: () => setKeepDialogMounted(false),
-        onStart: () => setKeepDialogMounted(true)
-      })
-    })
-  });
-}
-VideoViewer.propTypes = {
-  t: PropTypes.func,
-  s3Url: PropTypes.string,
-  loading: PropTypes.bool,
-  open: PropTypes.bool,
-  handleClose: PropTypes.func
-};

package/dist/Dialogs/ViewImageDialog/ViewImageDialog.js

@@ -1,24 +0,0 @@
-import PropTypes from "prop-types";
-import ResponsiveDialog from "../../Dialogs/ResponsiveDialog/ResponsiveDialog";
-import { jsx as _jsx } from "react/jsx-runtime";
-function ViewImageDialog({
-  image,
-  open,
-  handleClose
-}) {
-  return /*#__PURE__*/_jsx(ResponsiveDialog, {
-    open: open,
-    handleClose: handleClose,
-    children: /*#__PURE__*/_jsx("img", {
-      src: image,
-      width: "100%",
-      alt: ""
-    })
-  });
-}
-ViewImageDialog.propTypes = {
-  image: PropTypes.string.isRequired,
-  handleClose: PropTypes.func.isRequired,
-  open: PropTypes.bool.isRequired
-};
-export default ViewImageDialog;