@nualang/nualang-ui-components 0.1.1400 → 0.2.0

package/dist/Dialogs/UploadPhrases/UploadPhrases.js

@@ -1,553 +0,0 @@
-import { useState, useRef, useEffect } from "react";
-import { CSVLink } from "react-csv";
-import { Box, DialogContentText, Typography, Alert, TextField, Divider, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Paper } from "@mui/material";
-import { makeStyles } from "tss-react/mui";
-import FileCopyIcon from "@mui/icons-material/FileCopy";
-import DownloadIcon from "@mui/icons-material/Download";
-import FrontHandIcon from '@mui/icons-material/FrontHand';
-import WavingHandIcon from '@mui/icons-material/WavingHand';
-import BadgeIcon from '@mui/icons-material/Badge';
-import PhraseList from "../../Lists/Phrases/Phrases";
-import ParseScriptErrors from "../../Lists/ParseScriptErrors/ParseScriptErrors";
-import DefaultButton from "../../Misc/DefaultColourButton/DefaultColourButton";
-import CSVUploader from "../../Misc/CSVUploader/CSVUploader";
-import Button from "@mui/material/Button";
-import ButtonGroup from "@mui/material/ButtonGroup";
-import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
-import Dialog from "@mui/material/Dialog";
-import DialogTitle from "@mui/material/DialogTitle";
-import DialogActions from "@mui/material/DialogActions";
-import DialogContent from "@mui/material/DialogContent";
-import useMediaQuery from "@mui/material/useMediaQuery";
-import { useTheme } from "@mui/material/styles";
-import Popper from "@mui/material/Popper";
-import Grow from "@mui/material/Grow";
-import ClickAwayListener from "@mui/material/ClickAwayListener";
-import MenuItem from "@mui/material/MenuItem";
-import MenuList from "@mui/material/MenuList";
-import useDebounce from "../../hooks/useDebounce";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-const phrasesData = [{
-  phrase: "Hello",
-  translation: "hola",
-  definitions: "a greeting",
-  image: "https://images.nualang.com/eyJidWNrZXQiOiJudWFsYW5nLWltYWdlcy1wcm9kIiwia2V5IjoicGhyYXNlcy9EYTNXcThzUUktMTYwMzg4Nzg3MjU2NS53ZWJwIn0="
-}, {
-  phrase: "Goodbye",
-  translation: "adios",
-  definitions: "a farewell",
-  image: "https://images.nualang.com/eyJidWNrZXQiOiJudWFsYW5nLWltYWdlcy1wcm9kIiwia2V5IjoicGhyYXNlcy9RbXBFcWZYdHItMTYwMzg4Nzk2MjAzMC53ZWJwIn0="
-}, {
-  phrase: "My name is",
-  translation: "mi nombre es | me llamo",
-  definitions: "used to introduce yourself",
-  image: "https://images.nualang.com/eyJidWNrZXQiOiJudWFsYW5nLWltYWdlcy1wcm9kIiwia2V5IjoicGhyYXNlcy9hREFmczhFeTEtMTYwMzg5MDM2MjAxNy53ZWJwIn0="
-}];
-const phrasesHeaders = [{
-  label: "phrase",
-  key: "phrase"
-}, {
-  label: "translations",
-  key: "translation"
-}, {
-  label: "definitions",
-  key: "definitions"
-}, {
-  label: "image",
-  key: "image"
-}];
-const PhrasesCsvLink = {
-  headers: phrasesHeaders,
-  data: phrasesData,
-  filename: "phrases_template.csv"
-};
-const useStyles = makeStyles()(theme => ({
-  parseErrorsBox: {
-    marginTop: theme.spacing()
-  },
-  spreadsheetBox: {
-    marginTop: theme.spacing(2),
-    marginBottom: theme.spacing(2)
-  },
-  dialog: {
-    marginBottom: "15px"
-  },
-  csvButton: {
-    textDecoration: "none"
-  },
-  paper: {
-    paddingTop: `env(safe-area-inset-top)`,
-    paddingBottom: `env(safe-area-inset-bottom)`,
-    paddingLeft: `env(safe-area-inset-left)`,
-    paddingRight: `env(safe-area-inset-right)`
-  }
-}));
-const LANG_NAME_TO_CODE = {
-  english: "en",
-  spanish: "es",
-  french: "fr",
-  german: "de",
-  portuguese: "pt",
-  italian: "it",
-  irish: "ga",
-  chinese: "zh",
-  japanese: "ja",
-  ukrainian: "uk"
-};
-function parsePhraseWithAlternatives(phraseString) {
-  const parts = phraseString.split("|").map(p => p.trim());
-  return {
-    primary: parts[0],
-    alternatives: parts.slice(1).filter(p => p && p.length > 0)
-  };
-}
-
-/**
- * Processes CSV data with the following format:
- * - phrase: Primary phrase with optional alternatives separated by '|'
- *   Example: "Hello|Hi|Hey"
- * - translations: Multiple translations separated by '|'
- * - definitions: Multiple definitions separated by '|'
- * - image: Optional image URL
- */
-
-function UploadPhrases({
-  t = text => text,
-  open,
-  handleClose,
-  currentPhrases,
-  onSubmit,
-  validateRow,
-  isRowEmpty,
-  handleAppendPhrases,
-  verificationStatus,
-  learnLang,
-  forLang,
-  ...otherProps
-}) {
-  const {
-    classes
-  } = useStyles();
-  const learnLangCode = LANG_NAME_TO_CODE[learnLang?.toLowerCase()] || learnLang;
-  const forLangCode = LANG_NAME_TO_CODE[forLang?.toLowerCase()] || forLang;
-  const csvStructureExampleRows = [{
-    phrase: t("upload_phrases_example_phrase_1", {
-      lng: learnLangCode
-    }),
-    translations: t("upload_phrases_example_phrase_1", {
-      lng: forLangCode
-    }),
-    definitions: t("upload_phrases_example_definition_1", {
-      lng: learnLangCode
-    }),
-    image: FrontHandIcon
-  }, {
-    phrase: t("upload_phrases_example_phrase_2", {
-      lng: learnLangCode
-    }),
-    translations: t("upload_phrases_example_phrase_2", {
-      lng: forLangCode
-    }),
-    definitions: t("upload_phrases_example_definition_2", {
-      lng: learnLangCode
-    }),
-    image: WavingHandIcon
-  }, {
-    phrase: t("upload_phrases_example_phrase_3", {
-      lng: learnLangCode
-    }),
-    translations: t("upload_phrases_example_phrase_3", {
-      lng: forLangCode
-    }),
-    definitions: t("upload_phrases_example_definition_3", {
-      lng: learnLangCode
-    }),
-    image: BadgeIcon
-  }];
-  const [phrases, setPhrases] = useState([]);
-  const [errors, setErrors] = useState([]);
-  const [isError, setisError] = useState(false);
-  const [errorMessage, setErrorMessage] = useState("");
-  const [csvDataInput, setCsvDataInput] = useState("");
-  const debouncedCsvDataInput = useDebounce(csvDataInput, 2000);
-  const formatPhrases = phrases => {
-    return phrases.map((data, index) => {
-      const rowErrors = validateRow(data.phrase, data.translations, index);
-      if (index !== phrases.length - 1 && !isRowEmpty(data)) {
-        if (rowErrors) {
-          setErrors(prevState => [...prevState, ...rowErrors]);
-        }
-      }
-      if (data.phrase) {
-        if (learnLang === forLang && (!data.translations || data.translations.trim() === "")) {
-          data.translations = data.phrase;
-        }
-        const {
-          primary,
-          alternatives
-        } = parsePhraseWithAlternatives(data.phrase);
-        const formattedTranslations = data.translations.split("|").map(t => t.trim().replace(/^"|"$/g, "").trim());
-        const formattedDefinitions = data.definitions ? data.definitions.split("|").map(d => d.trim().replace(/^"|"$/g, "").trim()).filter(Boolean) : [];
-        return {
-          phrase: primary,
-          alternativeVersions: alternatives,
-          translations: formattedTranslations,
-          definitions: formattedDefinitions,
-          image: data.image ? data.image.trim() : "",
-          voices: [],
-          idx: index
-        };
-      }
-      return null;
-    }).filter(phrase => !!phrase);
-  };
-  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 formattedPhrases = formatPhrases(jsonArray);
-      setPhrases(formattedPhrases);
-    };
-    if (debouncedCsvDataInput !== "debouncedCsvDataInput") {
-      handleUploadCsvDataText();
-    }
-  }, [debouncedCsvDataInput]);
-  const handleUploadAccepted = async (results, file) => {
-    setErrors([]);
-    if (file.type !== "text/csv") {
-      setisError(true);
-      setErrorMessage("File must be in the .csv format");
-      return;
-    } else if (results.errors && results.errors.length) {
-      const formattedErrors = results.errors.reduce((acc, cur) => {
-        acc.push({
-          row: cur.row,
-          errorMessage: cur.message
-        });
-        return acc;
-      }, []);
-      setErrors(prevState => [...prevState, ...formattedErrors]);
-      return;
-    } else {
-      const formattedPhrases = formatPhrases(results.data);
-      setPhrases(formattedPhrases);
-    }
-  };
-  const handleSubmit = () => {
-    onSubmit(phrases);
-  };
-  const handleSubmitAppendPhrases = () => {
-    handleAppendPhrases(phrases);
-  };
-  return /*#__PURE__*/_jsxs(UploadPhrasesDialog, {
-    open: open,
-    handleClose: handleClose,
-    handleSubmit: handleSubmit,
-    handleSubmitAppendPhrases: handleSubmitAppendPhrases,
-    submitText: t("add_phrases"),
-    dialogTitle: t("upload_phrases"),
-    isSubmitDisabled: phrases.length === 0 || errors.length > 0,
-    currentPhrases: currentPhrases,
-    t: t,
-    children: [/*#__PURE__*/_jsx(DialogContentText, {
-      className: classes.dialog,
-      children: t("upload_phrases_desc")
-    }), /*#__PURE__*/_jsx(Box, {
-      sx: {
-        py: 1
-      },
-      children: /*#__PURE__*/_jsx(TableContainer, {
-        component: Paper,
-        variant: "outlined",
-        children: /*#__PURE__*/_jsxs(Table, {
-          size: "small",
-          "aria-label": "CSV structure example",
-          children: [/*#__PURE__*/_jsx(TableHead, {
-            children: /*#__PURE__*/_jsxs(TableRow, {
-              children: [/*#__PURE__*/_jsx(TableCell, {
-                children: /*#__PURE__*/_jsx("strong", {
-                  children: t("phrase")
-                })
-              }), /*#__PURE__*/_jsx(TableCell, {
-                children: /*#__PURE__*/_jsx("strong", {
-                  children: t("translations")
-                })
-              }), /*#__PURE__*/_jsx(TableCell, {
-                children: /*#__PURE__*/_jsx("strong", {
-                  children: t("definitions")
-                })
-              }), /*#__PURE__*/_jsx(TableCell, {
-                children: /*#__PURE__*/_jsx("strong", {
-                  children: t("image")
-                })
-              })]
-            })
-          }), /*#__PURE__*/_jsx(TableBody, {
-            children: csvStructureExampleRows.map((row, index) => {
-              const ImageIcon = row.image;
-              return /*#__PURE__*/_jsxs(TableRow, {
-                children: [/*#__PURE__*/_jsx(TableCell, {
-                  children: row.phrase
-                }), /*#__PURE__*/_jsx(TableCell, {
-                  children: row.translations
-                }), /*#__PURE__*/_jsx(TableCell, {
-                  children: row.definitions
-                }), /*#__PURE__*/_jsx(TableCell, {
-                  children: /*#__PURE__*/_jsx(ImageIcon, {
-                    fontSize: "small"
-                  })
-                })]
-              }, `${row.phrase}-${index}`);
-            })
-          })]
-        })
-      })
-    }), /*#__PURE__*/_jsxs(Box, {
-      sx: {
-        pb: 2
-      },
-      children: [/*#__PURE__*/_jsx(DefaultButton, {
-        variant: "outlined",
-        startIcon: /*#__PURE__*/_jsx(FileCopyIcon, {}),
-        href: "https://docs.google.com/spreadsheets/d/1sGY_GcWRC-Dtbj5I-iJGvd9yJ_kUWo_0n1D1Y8iPGh8/copy",
-        target: "_blank",
-        rel: "noopener noreferrer",
-        children: t("open_in_google_sheets")
-      }), /*#__PURE__*/_jsx(CSVLink, {
-        ...PhrasesCsvLink,
-        className: classes.csvButton,
-        children: /*#__PURE__*/_jsx(DefaultButton, {
-          variant: "outlined",
-          startIcon: /*#__PURE__*/_jsx(DownloadIcon, {}),
-          target: "_blank",
-          rel: "noopener noreferrer",
-          children: t("download_template")
-        })
-      })]
-    }), /*#__PURE__*/_jsxs(Box, {
-      children: [isError && /*#__PURE__*/_jsxs(Alert, {
-        severity: "error",
-        children: [/*#__PURE__*/_jsx("strong", {
-          children: "Error"
-        }), " \u2014 ", errorMessage]
-      }), /*#__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: [`${t("phrase")}, ${t("translations")}, ${t("definitions")}`, `"${t("upload_phrases_example_phrase_1", {
-          lng: learnLangCode
-        })}", "${t("upload_phrases_example_phrase_1", {
-          lng: forLangCode
-        })}", "${t("upload_phrases_example_definition_1", {
-          lng: learnLangCode
-        })}"`, `"${t("upload_phrases_example_phrase_2", {
-          lng: learnLangCode
-        })}", "${t("upload_phrases_example_phrase_2", {
-          lng: forLangCode
-        })}", "${t("upload_phrases_example_definition_2", {
-          lng: learnLangCode
-        })}"`].join("\n"),
-        value: csvDataInput,
-        fullWidth: true,
-        multiline: true,
-        rows: 4,
-        onChange: e => setCsvDataInput(e.target.value)
-      })
-    }), 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
-      })]
-    }), phrases && phrases.length > 0 && /*#__PURE__*/_jsx(Box, {
-      sx: {
-        py: 1
-      },
-      children: /*#__PURE__*/_jsx(PhraseList, {
-        t: t,
-        phrases: phrases,
-        disableDragAndDrop: true,
-        disablePadding: true,
-        disableGutters: true,
-        disableActions: true,
-        verificationStatus: verificationStatus,
-        ...otherProps
-      })
-    })]
-  });
-}
-function UploadPhrasesDialog({
-  open,
-  handleClose,
-  handleSubmit,
-  handleSubmitAppendPhrases,
-  t,
-  submitText,
-  closeText,
-  dialogTitle,
-  isFullScreen,
-  isSubmitDisabled,
-  children,
-  style,
-  fullScreenDisabled = false,
-  maxWidth,
-  fullWidth,
-  dialogContentClassName,
-  TransitionComponent,
-  className,
-  currentPhrases
-}) {
-  const {
-    classes
-  } = useStyles();
-  const theme = useTheme();
-  const fullScreen = useMediaQuery(theme.breakpoints.down("md"));
-  const options = [t("add_phrases"), t("overwrite_phrases")];
-  const [selectedIndex, setSelectedIndex] = useState(0);
-  const [menuOpen, setMenuOpen] = useState(false);
-  const anchorRef = useRef(null);
-  const handleMenuItemClick = (event, index) => {
-    setSelectedIndex(index);
-    setMenuOpen(false);
-  };
-  const handleMenuToggle = () => {
-    setMenuOpen(prevOpen => !prevOpen);
-  };
-  const handleMenuSelection = () => {
-    if (selectedIndex === 0) {
-      handleSubmitAppendPhrases();
-    } else {
-      handleSubmit();
-    }
-  };
-  const handleCloseMenu = event => {
-    if (anchorRef.current && anchorRef.current.contains(event.target)) {
-      return;
-    }
-    setMenuOpen(false);
-  };
-  return /*#__PURE__*/_jsxs(Dialog, {
-    fullScreen: isFullScreen || fullScreen && !fullScreenDisabled,
-    fullWidth: fullWidth,
-    maxWidth: maxWidth,
-    open: open,
-    onClose: handleClose,
-    "aria-label": dialogTitle,
-    classes: {
-      paper: classes.paper
-    },
-    style: {
-      ...style
-    },
-    className: className,
-    slots: {
-      transition: TransitionComponent
-    },
-    children: [dialogTitle && /*#__PURE__*/_jsx(DialogTitle, {
-      children: dialogTitle
-    }), /*#__PURE__*/_jsx(DialogContent, {
-      className: dialogContentClassName,
-      children: children
-    }), (handleClose || handleSubmit) && /*#__PURE__*/_jsxs(DialogActions, {
-      children: [handleClose && /*#__PURE__*/_jsx(Button, {
-        "data-cy": "close-responsive-dialog",
-        onClick: handleClose,
-        color: "primary",
-        children: closeText ? closeText : t("close")
-      }), handleSubmit && /*#__PURE__*/_jsxs(_Fragment, {
-        children: [/*#__PURE__*/_jsxs(ButtonGroup, {
-          variant: "contained",
-          color: "primary",
-          ref: anchorRef,
-          "aria-label": "Action Selection",
-          sx: {
-            borderRadius: 25,
-            ml: 1
-          },
-          disableElevation: isSubmitDisabled,
-          children: [/*#__PURE__*/_jsx(Button, {
-            onClick: handleMenuSelection,
-            disabled: isSubmitDisabled,
-            children: options[selectedIndex]
-          }), /*#__PURE__*/_jsx(Button, {
-            size: "small",
-            "aria-controls": menuOpen ? "split-button-menu" : undefined,
-            "aria-expanded": menuOpen ? "true" : undefined,
-            "aria-label": "Toggle Action Selection Menu",
-            "aria-haspopup": "menu",
-            onClick: handleMenuToggle,
-            disabled: isSubmitDisabled,
-            sx: {
-              paddingLeft: "10px"
-            },
-            children: /*#__PURE__*/_jsx(ArrowDropDownIcon, {})
-          })]
-        }), /*#__PURE__*/_jsx(Popper, {
-          open: menuOpen,
-          anchorEl: anchorRef.current,
-          role: undefined,
-          transition: true,
-          disablePortal: true,
-          disabled: isSubmitDisabled,
-          children: ({
-            TransitionProps,
-            placement
-          }) => /*#__PURE__*/_jsx(Grow, {
-            ...TransitionProps,
-            style: {
-              transformOrigin: placement === "bottom" ? "center top" : "center bottom"
-            },
-            children: /*#__PURE__*/_jsx(Paper, {
-              children: /*#__PURE__*/_jsx(ClickAwayListener, {
-                onClickAway: handleCloseMenu,
-                children: /*#__PURE__*/_jsx(MenuList, {
-                  id: "split-button-menu",
-                  autoFocusItem: true,
-                  children: options.map((option, index) => /*#__PURE__*/_jsx(MenuItem, {
-                    selected: index === selectedIndex,
-                    onClick: event => handleMenuItemClick(event, index),
-                    disabled: currentPhrases.length === 0 && index === 1,
-                    children: option
-                  }, option))
-                })
-              })
-            })
-          })
-        })]
-      })]
-    })]
-  });
-}
-export default UploadPhrases;

package/dist/Dialogs/UploadPhrases/UploadPhrases.test.js

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

package/dist/Dialogs/UploadPhrases/package.json

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