@nualang/nualang-ui-components 0.1.1400 → 0.2.0

package/dist/Editors/Phrases/Phrases.js

@@ -1,617 +0,0 @@
-import { useEffect, useState, useCallback } from "react";
-import PropTypes from "prop-types";
-import { Box, Typography } from "@mui/material";
-import { makeStyles } from "tss-react/mui";
-import PhraseList from "../../Lists/Phrases/Phrases";
-import SpreadsheetEditor from "./SpreadsheetEditor/SpreadsheetEditor";
-import CreatePhraseDialog from "../../Dialogs/CreatePhrase/CreatePhrase";
-import UploadPhrasesDialog from "../../Dialogs/UploadPhrases/UploadPhrases";
-import DeleteIcon from "@mui/icons-material/Delete";
-import useSpreadsheetState from "../../hooks/useSpreadsheetState";
-import DefaultButton from "../../Misc/DefaultColourButton/DefaultColourButton";
-import { Parser } from "@json2csv/plainjs";
-import GeneratePhrases from "../../Dialogs/GeneratePhrases/GeneratePhrases";
-import EmptyPhraseListImage from "../../img/course.svg";
-import { capitalize } from "../../utils/index";
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-export const Modes = {
-  NORMAL: "normal",
-  SPREADSHEET: "spreadsheet"
-};
-const EditorMaxWidth = 1200;
-const useStyles = makeStyles()(theme => ({
-  parseErrorsBox: {
-    marginTop: theme.spacing()
-  },
-  spreadsheetBox: {
-    marginTop: theme.spacing(2),
-    marginBottom: theme.spacing(2)
-  },
-  padding: {
-    padding: theme.spacing(2, 3)
-  },
-  formContent: {
-    padding: theme.spacing(3)
-  },
-  centeredContainer: {
-    width: "100%",
-    maxWidth: EditorMaxWidth,
-    margin: "0 auto",
-    backgroundColor: theme.palette.background.paper,
-    minHeight: "100%"
-  },
-  placeholder: {
-    minHeight: "100vh",
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center"
-  },
-  placeholderContent: {
-    textAlign: "center"
-  },
-  placeholderImage: {
-    maxWidth: 400
-  }
-}));
-const rowTemplate = {
-  phrase: "",
-  translations: [],
-  definitions: [],
-  image: "",
-  voices: [],
-  alternativeVersions: []
-};
-
-// Attributes to ignore when checking for empty row
-const ignoreAttributes = ["voices", "image", "alternativeVersions"];
-const NormalModeComponent = ({
-  t,
-  phrases,
-  learnLang,
-  forLang,
-  voices,
-  forLangCharacters,
-  learnLangCharacters,
-  isCreatePhraseDialogOpen,
-  setIsCreatePhraseDialogOpen,
-  isCreator,
-  isMember,
-  handleTranslate,
-  handleUpdatePhrase,
-  handleRemovePhrases,
-  uploadAudio,
-  handleSpeak,
-  updatePhrases,
-  userAttributes,
-  fileSizeLimit,
-  handleAddPhrase,
-  validatePhraseRecognition,
-  siteLanguage,
-  verificationStatus,
-  makeChatGptApiRequest,
-  difficulty,
-  otherPhraseLists,
-  otherPhraseListsLoading,
-  handleTransferPhrase,
-  handleCreatePhraseListFromSelection
-}) => /*#__PURE__*/_jsx(_Fragment, {
-  children: /*#__PURE__*/_jsx(PhraseList, {
-    t: t,
-    phrases: phrases,
-    learnLang: learnLang,
-    forLang: forLang,
-    voices: voices,
-    forLangCharacters: forLangCharacters,
-    learnLangCharacters: learnLangCharacters,
-    handleClickOpenCreatePhrase: () => setIsCreatePhraseDialogOpen(true),
-    isCreatePhraseDialogOpen: isCreatePhraseDialogOpen,
-    setIsCreatePhraseDialogOpen: setIsCreatePhraseDialogOpen,
-    isCreator: isCreator,
-    isMember: isMember,
-    handleTranslate: handleTranslate,
-    makeChatGptApiRequest: makeChatGptApiRequest,
-    handleUpdatePhrase: handleUpdatePhrase,
-    handleRemovePhrases: handleRemovePhrases,
-    uploadAudio: uploadAudio,
-    handleSpeak: handleSpeak,
-    updatePhrases: updatePhrases,
-    userAttributes: userAttributes,
-    disablePadding: true,
-    fileSizeLimit: fileSizeLimit,
-    handleAddPhrase: handleAddPhrase,
-    validatePhraseRecognition: validatePhraseRecognition,
-    siteLanguage: siteLanguage,
-    verificationStatus: verificationStatus,
-    difficulty: difficulty,
-    otherPhraseLists: otherPhraseLists,
-    otherPhraseListsLoading: otherPhraseListsLoading,
-    handleTransferPhrase: handleTransferPhrase,
-    handleCreatePhraseListFromSelection: handleCreatePhraseListFromSelection
-  })
-});
-const CreatorComponent = ({
-  t,
-  mode,
-  errors,
-  hasNonEmptyRows,
-  rows,
-  processRowUpdate,
-  selectionModel,
-  onRowSelectionModelChange,
-  saveChanges,
-  addRow,
-  isDirty,
-  hasTrailingEmptyRow,
-  phrases,
-  learnLang,
-  forLang,
-  voices,
-  forLangCharacters,
-  learnLangCharacters,
-  isCreatePhraseDialogOpen,
-  setIsCreatePhraseDialogOpen,
-  isCreator,
-  isMember,
-  handleTranslate,
-  handleUpdatePhrase,
-  handleRemovePhrases,
-  uploadAudio,
-  handleSpeak,
-  updatePhrases,
-  userAttributes,
-  fileSizeLimit,
-  handleAddPhrase,
-  validatePhraseRecognition,
-  siteLanguage,
-  makeChatGptApiRequest,
-  difficulty,
-  otherPhraseLists,
-  otherPhraseListsLoading,
-  handleTransferPhrase,
-  handleCreatePhraseListFromSelection
-}) => /*#__PURE__*/_jsxs(_Fragment, {
-  children: [mode === Modes.NORMAL && /*#__PURE__*/_jsx(NormalModeComponent, {
-    t: t,
-    phrases: phrases,
-    learnLang: learnLang,
-    forLang: forLang,
-    voices: voices,
-    forLangCharacters: forLangCharacters,
-    learnLangCharacters: learnLangCharacters,
-    isCreatePhraseDialogOpen: isCreatePhraseDialogOpen,
-    setIsCreatePhraseDialogOpen: setIsCreatePhraseDialogOpen,
-    isCreator: isCreator,
-    isMember: isMember,
-    handleTranslate: handleTranslate,
-    makeChatGptApiRequest: makeChatGptApiRequest,
-    handleUpdatePhrase: handleUpdatePhrase,
-    handleRemovePhrases: handleRemovePhrases,
-    uploadAudio: uploadAudio,
-    handleSpeak: handleSpeak,
-    updatePhrases: updatePhrases,
-    userAttributes: userAttributes,
-    fileSizeLimit: fileSizeLimit,
-    handleAddPhrase: handleAddPhrase,
-    validatePhraseRecognition: validatePhraseRecognition,
-    siteLanguage: siteLanguage,
-    difficulty: difficulty,
-    otherPhraseLists: otherPhraseLists,
-    otherPhraseListsLoading: otherPhraseListsLoading,
-    handleTransferPhrase: handleTransferPhrase,
-    handleCreatePhraseListFromSelection: handleCreatePhraseListFromSelection
-  }), mode === Modes.SPREADSHEET && /*#__PURE__*/_jsx(SpreadsheetEditor, {
-    t: t,
-    errors: errors,
-    hasNonEmptyRows: hasNonEmptyRows,
-    rows: rows,
-    processRowUpdate: processRowUpdate,
-    selectionModel: selectionModel,
-    onRowSelectionModelChange: onRowSelectionModelChange,
-    saveChanges: saveChanges,
-    addRow: addRow,
-    isDirty: isDirty,
-    hasTrailingEmptyRow: hasTrailingEmptyRow
-  })]
-});
-function EmptyPhraseList({
-  t = text => text,
-  placeholderImageUrl = EmptyPhraseListImage,
-  siteLanguage,
-  learnLang
-}) {
-  const {
-    classes
-  } = useStyles();
-  return /*#__PURE__*/_jsx("div", {
-    className: classes.placeholder,
-    children: /*#__PURE__*/_jsxs("div", {
-      className: classes.placeholderContent,
-      children: [/*#__PURE__*/_jsx("img", {
-        src: placeholderImageUrl,
-        className: classes.placeholderImage,
-        alt: t("no_phrases")
-      }), /*#__PURE__*/_jsx(Typography, {
-        component: "h1",
-        variant: "h5",
-        gutterBottom: true,
-        children: t("add_phrases")
-      }), /*#__PURE__*/_jsx(Typography, {
-        component: "h2",
-        variant: "subtitle1",
-        gutterBottom: true,
-        children: t("add_phrase_desc", {
-          language: ["en", "en-US", "ga", "de"].includes(siteLanguage) ? capitalize(t(learnLang.toLowerCase())) : t(learnLang.toLowerCase()).toLowerCase()
-        })
-      })]
-    })
-  });
-}
-function PhrasesEditor(props) {
-  const {
-    classes
-  } = useStyles();
-  const {
-    t = text => text,
-    phrases = [],
-    isCreator,
-    isMember,
-    handleUpdatePhrase,
-    handleRemovePhrases,
-    handleSpreadsheetSaveChanges,
-    uploadAudio,
-    handleSpeak,
-    updatePhrases,
-    voices,
-    userAttributes,
-    learnLang,
-    forLang,
-    forLangCharacters,
-    learnLangCharacters,
-    isCreatePhraseDialogOpen,
-    setIsCreatePhraseDialogOpen,
-    isUploadPhrasesDialogOpen,
-    setIsUploadPhrasesDialogOpen,
-    handleTranslate,
-    handleAddPhrase,
-    fileSizeLimit,
-    phraseListName = "Unknown",
-    validatePhraseRecognition,
-    siteLanguage,
-    makeChatGptApiRequest,
-    difficulty,
-    subscription,
-    topicGoal,
-    verificationStatus,
-    otherPhraseLists,
-    otherPhraseListsLoading,
-    handleTransferPhrase,
-    handleCreatePhraseListFromSelection,
-    isGeneratePhrasesDialogOpen,
-    setIsGeneratePhrasesDialogOpen,
-    mode = Modes.NORMAL,
-    scriptDownloadRef
-  } = props;
-  const [errors, setErrors] = useState([]);
-  const [selectionModel, setSelectionModel] = useState({
-    type: "include",
-    ids: new Set()
-  });
-  const selectedRows = Array.from(selectionModel.ids);
-  const [spreadsheetPhrases, setSpreadsheetPhrases] = useState(Object.keys(phrases).length > 0 ? phrases : [rowTemplate]);
-  const isRowEmpty = row => {
-    let rowEmpty = true;
-    Object.keys(rowTemplate).forEach(attr => {
-      if (!ignoreAttributes.includes(attr) && row[attr] !== "") {
-        rowEmpty = false;
-      }
-    });
-    return rowEmpty;
-  };
-  const formatRowsToPhrases = rows => {
-    return rows.filter(r => !isRowEmpty(r)).map(r => {
-      const newAlternatives = r.phrase.includes("|") ? r.phrase.split("|").slice(1).map(a => a.trim()).filter(Boolean) : [];
-      const updatedAlternativeVersions = [...(r.alternativeVersions || []), ...newAlternatives.filter(alt => !r.alternativeVersions?.map(v => v.toLowerCase()).includes(alt.toLowerCase()))];
-      return {
-        ...r,
-        phrase: r.phrase.split("|")[0].trim() || "",
-        alternativeVersions: updatedAlternativeVersions,
-        translations: (r.translations || "").split("|").map(t => t.trim()).filter(Boolean),
-        definitions: (r.definitions || "").split("|").map(d => d.trim()).filter(Boolean)
-      };
-    });
-  };
-
-  // Updates spreadsheet when phrases change in normal view
-  const phrasesJson = JSON.stringify(phrases);
-  useEffect(() => {
-    setSpreadsheetPhrases(JSON.parse(phrasesJson));
-  }, [phrasesJson]);
-
-  /**
-   * Validates each row for missing phrase or translation
-   */
-  const validateRow = useCallback((phrase, translation, index) => {
-    const row = index + 1;
-    let errors = [];
-    if (!phrase) {
-      errors.push({
-        errorMessage: "missing_phrase",
-        row
-      });
-    }
-    if (!translation && learnLang !== forLang) {
-      errors.push({
-        errorMessage: "missing_translation",
-        row
-      });
-    }
-    if (errors.length > 0) {
-      return errors;
-    }
-    return false;
-  }, [forLang, learnLang]);
-  const getValidationErrors = useCallback(rowsToValidate => {
-    let validationErrors = [];
-    rowsToValidate.forEach((r, index) => {
-      if (!isRowEmpty(r)) {
-        const rowErrors = validateRow(r.phrase, r.translations, index);
-        if (rowErrors) {
-          validationErrors.push(...rowErrors);
-        }
-      }
-    });
-    return validationErrors;
-  }, [validateRow]);
-  const {
-    rows,
-    addRow,
-    isDirty,
-    hasTrailingEmptyRow,
-    processRowUpdate
-  } = useSpreadsheetState({
-    rowTemplate,
-    data: spreadsheetPhrases,
-    isRowEmpty
-  });
-  const hasNonEmptyRows = rows.some(r => !isRowEmpty(r));
-
-  // Validates rows whenever spreadsheet gets edited
-  useEffect(() => {
-    const validationErrors = getValidationErrors(rows);
-    const isInitRow = rows.length === 1 && isRowEmpty(rows[0]);
-    if (rows.length > 0 && validationErrors.length === 0 && !isInitRow) {
-      setErrors([]);
-    } else {
-      setErrors(validationErrors);
-    }
-  }, [getValidationErrors, rows]);
-  useEffect(() => {
-    if (!scriptDownloadRef) return;
-    scriptDownloadRef.current = () => {
-      try {
-        const formattedRows = rows.map(row => ({
-          ...row,
-          phrase: [row.phrase || "", ...(row.alternativeVersions || [])].filter(Boolean).join(" | ")
-        }));
-        const parser = new Parser({
-          fields: ["phrase", "translations", "definitions", "image"],
-          defaultValue: ""
-        });
-        const csv = parser.parse(formattedRows);
-        const element = document.createElement("a");
-        const file = new Blob([csv], {
-          type: "text/plain"
-        });
-        element.href = URL.createObjectURL(file);
-        element.download = `${phraseListName}-${new Date().toLocaleDateString()}.csv`;
-        document.body.appendChild(element);
-        element.click();
-        document.body.removeChild(element);
-        URL.revokeObjectURL(element.href);
-      } catch (err) {
-        console.error(err);
-        alert(t("download_error"));
-      }
-    };
-    return () => {
-      scriptDownloadRef.current = null;
-    };
-  }, [rows, phraseListName, t, scriptDownloadRef]);
-  const saveChanges = () => {
-    const formattedPhrases = formatRowsToPhrases(rows);
-    handleSpreadsheetSaveChanges(phrases, formattedPhrases);
-  };
-  const handleAddPhrases = async _phrases => {
-    try {
-      await handleSpreadsheetSaveChanges(phrases, _phrases);
-      setIsUploadPhrasesDialogOpen(false);
-    } catch (error) {
-      console.error(error);
-    }
-  };
-  const handleAppendPhrases = async _phrases => {
-    try {
-      const combinedPhrases = _phrases.concat(phrases);
-      await handleSpreadsheetSaveChanges(phrases, combinedPhrases);
-      setIsUploadPhrasesDialogOpen(false);
-    } catch (error) {
-      console.error(error);
-    }
-  };
-  const deleteSelectedRows = () => {
-    if (selectedRows.length === 0) return;
-    const updatedRows = rows.filter(r => !selectionModel.ids.has(r.id));
-    handleSpreadsheetSaveChanges(phrases, formatRowsToPhrases(updatedRows));
-    setSelectionModel({
-      type: "include",
-      ids: new Set()
-    });
-  };
-  return /*#__PURE__*/_jsxs(Box, {
-    className: classes.centeredContainer,
-    children: [isCreator && mode === Modes.SPREADSHEET && /*#__PURE__*/_jsx(Box, {
-      sx: {
-        px: 2,
-        pt: 1
-      },
-      children: /*#__PURE__*/_jsx(DefaultButton, {
-        variant: "contained",
-        size: "small",
-        onClick: deleteSelectedRows,
-        endIcon: /*#__PURE__*/_jsx(DeleteIcon, {}),
-        disabled: selectedRows.length === 0,
-        children: t("delete_selected_row")
-      })
-    }), isMember && !isCreator && /*#__PURE__*/_jsx(NormalModeComponent, {
-      t: t,
-      phrases: phrases,
-      learnLang: learnLang,
-      forLang: forLang,
-      voices: voices,
-      forLangCharacters: forLangCharacters,
-      learnLangCharacters: learnLangCharacters,
-      isCreatePhraseDialogOpen: isCreatePhraseDialogOpen,
-      setIsCreatePhraseDialogOpen: setIsCreatePhraseDialogOpen,
-      isCreator: isCreator,
-      isMember: isMember,
-      handleTranslate: handleTranslate,
-      makeChatGptApiRequest: makeChatGptApiRequest,
-      handleUpdatePhrase: handleUpdatePhrase,
-      handleRemovePhrases: handleRemovePhrases,
-      uploadAudio: uploadAudio,
-      handleSpeak: handleSpeak,
-      updatePhrases: updatePhrases,
-      userAttributes: userAttributes,
-      fileSizeLimit: fileSizeLimit,
-      handleAddPhrase: handleAddPhrase,
-      validatePhraseRecognition: validatePhraseRecognition,
-      siteLanguage: siteLanguage,
-      difficulty: difficulty,
-      otherPhraseLists: otherPhraseLists,
-      otherPhraseListsLoading: otherPhraseListsLoading,
-      handleTransferPhrase: handleTransferPhrase,
-      handleCreatePhraseListFromSelection: handleCreatePhraseListFromSelection
-    }), isCreator && (phrases !== undefined && phrases.length > 0 ? /*#__PURE__*/_jsx(CreatorComponent, {
-      t: t,
-      mode: mode,
-      errors: errors,
-      rows: rows,
-      isRowEmpty: isRowEmpty,
-      saveChanges: saveChanges,
-      phrases: phrases,
-      learnLang: learnLang,
-      forLang: forLang,
-      voices: voices,
-      forLangCharacters: forLangCharacters,
-      learnLangCharacters: learnLangCharacters,
-      isCreatePhraseDialogOpen: isCreatePhraseDialogOpen,
-      setIsCreatePhraseDialogOpen: setIsCreatePhraseDialogOpen,
-      isCreator: isCreator,
-      isMember: isMember,
-      handleTranslate: handleTranslate,
-      handleUpdatePhrase: handleUpdatePhrase,
-      handleRemovePhrases: handleRemovePhrases,
-      uploadAudio: uploadAudio,
-      handleSpeak: handleSpeak,
-      updatePhrases: updatePhrases,
-      userAttributes: userAttributes,
-      fileSizeLimit: fileSizeLimit,
-      handleAddPhrase: handleAddPhrase,
-      validatePhraseRecognition: validatePhraseRecognition,
-      siteLanguage: siteLanguage,
-      makeChatGptApiRequest: makeChatGptApiRequest,
-      difficulty: difficulty,
-      otherPhraseLists: otherPhraseLists,
-      otherPhraseListsLoading: otherPhraseListsLoading,
-      handleTransferPhrase: handleTransferPhrase,
-      handleCreatePhraseListFromSelection: handleCreatePhraseListFromSelection,
-      addRow: addRow,
-      isDirty: isDirty,
-      hasTrailingEmptyRow: hasTrailingEmptyRow,
-      hasNonEmptyRows: hasNonEmptyRows,
-      processRowUpdate: processRowUpdate,
-      selectionModel: selectionModel,
-      onRowSelectionModelChange: setSelectionModel
-    }) : /*#__PURE__*/_jsx(EmptyPhraseList, {
-      t: t,
-      siteLanguage: siteLanguage,
-      learnLang: learnLang
-    })), /*#__PURE__*/_jsx(CreatePhraseDialog, {
-      t: t,
-      learnLang: learnLang,
-      forLang: forLang,
-      forLangCharacters: forLangCharacters,
-      learnLangCharacters: learnLangCharacters,
-      open: isCreatePhraseDialogOpen,
-      handleClose: () => setIsCreatePhraseDialogOpen(false),
-      handleTranslate: handleTranslate,
-      onSubmit: handleAddPhrase,
-      fileSizeLimit: fileSizeLimit,
-      validatePhraseRecognition: validatePhraseRecognition,
-      siteLanguage: siteLanguage,
-      verificationStatus: verificationStatus,
-      makeChatGptApiRequest: makeChatGptApiRequest,
-      difficulty: difficulty
-    }), /*#__PURE__*/_jsx(UploadPhrasesDialog, {
-      t: t,
-      learnLang: learnLang,
-      forLang: forLang,
-      validateRow: validateRow,
-      open: isUploadPhrasesDialogOpen,
-      isRowEmpty: isRowEmpty,
-      handleClose: () => setIsUploadPhrasesDialogOpen(false),
-      onSubmit: handleAddPhrases,
-      handleAppendPhrases: handleAppendPhrases,
-      currentPhrases: phrases,
-      verificationStatus: verificationStatus
-    }), /*#__PURE__*/_jsx(GeneratePhrases, {
-      t: t,
-      open: isGeneratePhrasesDialogOpen,
-      handleClose: () => setIsGeneratePhrasesDialogOpen(false),
-      learnLang: learnLang,
-      forLang: forLang,
-      onSubmit: handleAddPhrases,
-      handleAppendPhrases: handleAppendPhrases,
-      currentPhrases: phrases,
-      makeChatGptApiRequest: makeChatGptApiRequest,
-      initialValues: {
-        phrasesTopic: phraseListName,
-        phraseAmount: 8,
-        topicGoal: topicGoal
-      },
-      siteLanguage: siteLanguage,
-      difficulty: difficulty,
-      handleTranslate: handleTranslate
-    })]
-  });
-}
-PhrasesEditor.propTypes = {
-  t: PropTypes.func.isRequired,
-  isCreator: PropTypes.bool,
-  isMember: PropTypes.bool,
-  phrases: PropTypes.array.isRequired,
-  fullScreen: PropTypes.bool,
-  handleSpreadsheetSaveChanges: PropTypes.func,
-  learnLang: PropTypes.string,
-  forLang: PropTypes.string,
-  forLangCharacters: PropTypes.array,
-  learnLangCharacters: PropTypes.array,
-  isCreatePhraseDialogOpen: PropTypes.bool,
-  setIsCreatePhraseDialogOpen: PropTypes.func,
-  isUploadPhrasesDialogOpen: PropTypes.bool,
-  setIsUploadPhrasesDialogOpen: PropTypes.func,
-  handleTranslate: PropTypes.func,
-  handleAddPhrase: PropTypes.func,
-  fileSizeLimit: PropTypes.number,
-  updatePhrase: PropTypes.func,
-  uploadAudio: PropTypes.func,
-  handleSpeak: PropTypes.func,
-  updatePhrases: PropTypes.func,
-  voices: PropTypes.array,
-  userAttributes: PropTypes.object,
-  phraseListName: PropTypes.string,
-  validatePhraseRecognition: PropTypes.func,
-  siteLanguage: PropTypes.string,
-  makeChatGptApiRequest: PropTypes.func
-};
-export default PhrasesEditor;