@nualang/nualang-ui-components 0.1.1364 → 0.1.1365

package/dist/Editors/Phrases/Phrases.js

@@ -7,7 +7,6 @@ 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 { Input } from "react-spreadsheet-grid";
 import useSpreadsheetState from "../../hooks/useSpreadsheetState";
 import DefaultButton from "../../Misc/DefaultColourButton/DefaultColourButton";
 import { Parser } from "@json2csv/plainjs";
@@ -134,14 +133,15 @@ const CreatorComponent = ({
   t,
   mode,
   errors,
+  hasNonEmptyRows,
   rows,
-  columns,
-  selectedRow,
-  onCellClick,
-  onColumnResize,
-  onFieldChange,
-  isRowEmpty,
+  processRowUpdate,
+  selectionModel,
+  onRowSelectionModelChange,
   saveChanges,
+  addRow,
+  isDirty,
+  hasTrailingEmptyRow,
   phrases,
   learnLang,
   forLang,
@@ -202,14 +202,15 @@ const CreatorComponent = ({
   }), mode === Modes.SPREADSHEET && /*#__PURE__*/_jsx(SpreadsheetEditor, {
     t: t,
     errors: errors,
+    hasNonEmptyRows: hasNonEmptyRows,
     rows: rows,
-    columns: columns,
-    selectedRow: selectedRow,
-    onCellClick: onCellClick,
-    onColumnResize: onColumnResize,
-    onFieldChange: onFieldChange,
-    isRowEmpty: isRowEmpty,
-    saveChanges: saveChanges
+    processRowUpdate: processRowUpdate,
+    selectionModel: selectionModel,
+    onRowSelectionModelChange: onRowSelectionModelChange,
+    saveChanges: saveChanges,
+    addRow: addRow,
+    isDirty: isDirty,
+    hasTrailingEmptyRow: hasTrailingEmptyRow
   })]
 });
 function EmptyPhraseList({
@@ -291,6 +292,10 @@ function PhrasesEditor(props) {
     scriptDownloadRef
   } = props;
   const [errors, setErrors] = useState([]);
+  const [selectionModel, setSelectionModel] = useState({
+    type: "include",
+    ids: new Set()
+  });
   const [spreadsheetPhrases, setSpreadsheetPhrases] = useState(Object.keys(phrases).length > 0 ? phrases : [rowTemplate]);
   const isRowEmpty = row => {
     let rowEmpty = true;
@@ -356,96 +361,20 @@ function PhrasesEditor(props) {
     });
     return validationErrors;
   }, [validateRow]);
-
-  // Column definition for spreadsheet grid
-  const initColumns = () => [{
-    id: "id",
-    title: () => /*#__PURE__*/_jsx(Typography, {
-      children: t("row")
-    }),
-    value: row => {
-      return /*#__PURE__*/_jsx(Typography, {
-        children: row.id + 1
-      });
-    },
-    width: 10
-  }, {
-    id: "phrase",
-    title: () => /*#__PURE__*/_jsx(Typography, {
-      children: t("phrase")
-    }),
-    value: (row, {
-      focus
-    }) => {
-      const phraseDisplay = [row.phrase || "", ...(row.alternativeVersions || [])].filter(Boolean).join(" | ");
-      return /*#__PURE__*/_jsx(Input, {
-        value: phraseDisplay,
-        placeholder: t("enter_phrase_with_alternatives"),
-        focus: focus,
-        onChange: onFieldChange(row.id, "phrase")
-      });
-    },
-    width: 30
-  }, {
-    id: "translations",
-    title: () => /*#__PURE__*/_jsx(Typography, {
-      children: t("translations")
-    }),
-    value: (row, {
-      focus
-    }) => {
-      return /*#__PURE__*/_jsx(Input, {
-        value: row.translations,
-        focus: focus,
-        onChange: onFieldChange(row.id, "translations")
-      });
-    },
-    width: 25
-  }, {
-    id: "definitions",
-    title: () => /*#__PURE__*/_jsx(Typography, {
-      children: t("definitions")
-    }),
-    value: (row, {
-      focus
-    }) => {
-      return /*#__PURE__*/_jsx(Input, {
-        value: row.definitions,
-        focus: focus,
-        onChange: onFieldChange(row.id, "definitions")
-      });
-    },
-    width: 25
-  }, {
-    id: "image",
-    title: () => /*#__PURE__*/_jsx(Typography, {
-      children: t("image")
-    }),
-    value: (row, {
-      focus
-    }) => {
-      return /*#__PURE__*/_jsx(Input, {
-        value: row.image,
-        focus: focus,
-        onChange: onFieldChange(row.id, "image")
-      });
-    },
-    width: 30
-  }];
   const {
     rows,
-    columns,
+    addRow,
+    isDirty,
+    hasTrailingEmptyRow,
     selectedRow,
-    onCellClick,
-    onColumnResize,
     deleteSelectedRow,
-    onFieldChange
+    processRowUpdate
   } = useSpreadsheetState({
     rowTemplate,
     data: spreadsheetPhrases,
-    initColumns,
     isRowEmpty
   });
+  const hasNonEmptyRows = rows.some(r => !isRowEmpty(r));
 
   // Validates rows whenever spreadsheet gets edited
   useEffect(() => {
@@ -559,11 +488,6 @@ function PhrasesEditor(props) {
       mode: mode,
       errors: errors,
       rows: rows,
-      columns: columns,
-      selectedRow: selectedRow,
-      onCellClick: onCellClick,
-      onColumnResize: onColumnResize,
-      onFieldChange: onFieldChange,
       isRowEmpty: isRowEmpty,
       saveChanges: saveChanges,
       phrases: phrases,
@@ -592,7 +516,12 @@ function PhrasesEditor(props) {
       otherPhraseLists: otherPhraseLists,
       otherPhraseListsLoading: otherPhraseListsLoading,
       handleTransferPhrase: handleTransferPhrase,
-      handleCreatePhraseListFromSelection: handleCreatePhraseListFromSelection
+      handleCreatePhraseListFromSelection: handleCreatePhraseListFromSelection,
+      addRow: addRow,
+      isDirty: isDirty,
+      hasTrailingEmptyRow: hasTrailingEmptyRow,
+      hasNonEmptyRows: hasNonEmptyRows,
+      processRowUpdate: processRowUpdate
     }) : /*#__PURE__*/_jsx(EmptyPhraseList, {
       t: t,
       siteLanguage: siteLanguage,

package/dist/Editors/Phrases/SpreadsheetEditor/SpreadsheetEditor.js

@@ -1,58 +1,93 @@
+import { useMemo } from "react";
 import PropTypes from "prop-types";
 import { Box, Button, Typography } from "@mui/material";
 import { makeStyles } from "tss-react/mui";
-import { Grid as SpreadsheetGrid } from "react-spreadsheet-grid";
+import { DataGrid } from "@mui/x-data-grid";
+import AddIcon from "@mui/icons-material/Add";
 import ParseScriptErrors from "../../../Lists/ParseScriptErrors/ParseScriptErrors";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useStyles = makeStyles()(theme => ({
-  parseErrorsBox: {
-    marginTop: theme.spacing(),
+  dataGridBox: {
     padding: theme.spacing(2)
   },
-  spreadsheetBox: {
-    marginBottom: theme.spacing(),
-    padding: theme.spacing(2)
+  dataGrid: {
+    "& .MuiDataGrid-columnHeader": {
+      backgroundColor: theme.palette.primary.main,
+      color: theme.palette.primary.contrastText
+    },
+    "& .MuiDataGrid-columnHeaderCheckbox .MuiSvgIcon-root": {
+      color: theme.palette.primary.contrastText
+    }
   },
-  buttonsBox: {
-    display: "flex",
-    justifyContent: "space-between",
-    alignItems: "center",
+  parseErrorsBox: {
     padding: theme.spacing(2),
-    paddingBottom: 0
-  },
-  uploadButton: {
-    marginRight: theme.spacing()
+    paddingTop: 0
   },
   saveChangesBox: {
     paddingLeft: theme.spacing(2),
     paddingBottom: theme.spacing()
   }
 }));
-function SpreadsheetEditor(props) {
+function SpreadsheetEditor({
+  t = text => text,
+  rows,
+  processRowUpdate,
+  selectionModel,
+  onRowSelectionModelChange,
+  errors,
+  hasNonEmptyRows,
+  saveChanges,
+  addRow,
+  isDirty,
+  hasTrailingEmptyRow
+}) {
   const {
     classes
   } = useStyles();
-  const {
-    t = text => text,
-    rows,
-    columns,
-    onCellClick,
-    onColumnResize,
-    onFieldChange,
-    errors,
-    saveChanges
-  } = props;
+  const columns = useMemo(() => [{
+    field: "phrase",
+    headerName: t("phrase"),
+    editable: true,
+    flex: 3,
+    minWidth: 150
+  }, {
+    field: "translations",
+    headerName: t("translations"),
+    editable: true,
+    flex: 2.5,
+    minWidth: 120
+  }, {
+    field: "definitions",
+    headerName: t("definitions"),
+    editable: true,
+    flex: 2.5,
+    minWidth: 120
+  }, {
+    field: "image",
+    headerName: t("image"),
+    editable: true,
+    flex: 3,
+    minWidth: 120
+  }], [t]);
   return /*#__PURE__*/_jsxs(Box, {
     children: [/*#__PURE__*/_jsx(Box, {
-      className: classes.spreadsheetBox,
-      children: /*#__PURE__*/_jsx(SpreadsheetGrid, {
-        columns: columns,
+      className: classes.dataGridBox,
+      children: /*#__PURE__*/_jsx(DataGrid, {
+        className: classes.dataGrid,
         rows: rows,
-        isColumnsResizable: true,
-        onFieldChange: onFieldChange,
-        onCellClick: onCellClick,
-        onColumnResize: onColumnResize,
-        getRowKey: row => row.id
+        columns: columns,
+        processRowUpdate: processRowUpdate,
+        onProcessRowUpdateError: error => console.error(error),
+        rowSelectionModel: selectionModel,
+        onRowSelectionModelChange: onRowSelectionModelChange,
+        autoHeight: true,
+        hideFooter: true,
+        disableColumnMenu: true,
+        disableColumnSorting: true,
+        disableRowSelectionOnClick: true,
+        checkboxSelection: true,
+        showCellVerticalBorder: true,
+        showColumnVerticalBorder: true
       })
     }), errors.length > 0 && /*#__PURE__*/_jsxs(Box, {
       className: classes.parseErrorsBox,
@@ -68,28 +103,40 @@ function SpreadsheetEditor(props) {
         t: t,
         errors: errors
       })]
-    }), /*#__PURE__*/_jsx(Box, {
+    }), /*#__PURE__*/_jsxs(Box, {
       className: classes.saveChangesBox,
-      children: /*#__PURE__*/_jsx(Button, {
+      sx: {
+        display: "flex",
+        gap: 1
+      },
+      children: [/*#__PURE__*/_jsx(Button, {
+        variant: "outlined",
+        onClick: addRow,
+        startIcon: /*#__PURE__*/_jsx(AddIcon, {}),
+        disabled: hasTrailingEmptyRow,
+        children: t("add_row")
+      }), /*#__PURE__*/_jsx(Button, {
         variant: "contained",
         color: "primary",
         onClick: saveChanges,
-        disabled: errors.length > 0,
+        disabled: errors.length > 0 || !hasNonEmptyRows || !isDirty,
         "data-cy": "save-spreadsheet-changes",
         children: t("save_changes")
-      })
+      })]
     })]
   });
 }
 SpreadsheetEditor.propTypes = {
-  t: PropTypes.func.isRequired,
+  t: PropTypes.func,
   rows: PropTypes.array,
+  processRowUpdate: PropTypes.func,
+  selectionModel: PropTypes.object,
+  onRowSelectionModelChange: PropTypes.func,
   errors: PropTypes.array,
-  columns: PropTypes.array,
-  selectedRow: PropTypes.number,
-  onCellClick: PropTypes.func,
-  onColumnResize: PropTypes.func,
-  onFieldChange: PropTypes.func,
-  saveChanges: PropTypes.func
+  hasNonEmptyRows: PropTypes.bool,
+  saveChanges: PropTypes.func,
+  addRow: PropTypes.func,
+  isDirty: PropTypes.bool,
+  hasTrailingEmptyRow: PropTypes.bool
 };
 export default SpreadsheetEditor;

package/dist/Forms/DiscussMultiStepFormDialog/MultiStepFormDialog.js

@@ -141,9 +141,16 @@ export default function MultiStepFormDialog({
   const [activeStep, setActiveStep] = useState(0);
   const [skipped, setSkipped] = useState(new Set());
   const steps = getSteps(t);
+
+  // Only re-sync from parent when dialog opens (not on every re-render)
+  // For edit: this picks up the selected discussion data
+  // For create: this resets to clean defaults
   useEffect(() => {
-    setValues(initialValues);
-  }, [initialValues]);
+    if (open) {
+      setValues(initialValues);
+      setActiveStep(0);
+    }
+  }, [open]);
   const handleGroupAssignmentChange = updatedValues => {
     setValues(updatedValues);
   };

package/dist/Screens/Classrooms/ViewClassroom/ViewClassroom.js

@@ -1,6 +1,7 @@
 import { useState, useEffect, useRef, useMemo } from "react";
 import { Link as RouterLink, useNavigate, useLocation } from "react-router";
 import { Joyride, STATUS } from "react-joyride";
+import dayjs from "dayjs";
 import { Typography, Button, Box, Menu, MenuItem, IconButton, Tooltip } from "@mui/material";
 import { useTheme } from "@mui/material/styles";
 import { makeStyles } from "tss-react/mui";
@@ -1614,7 +1615,9 @@ function Classroom({
       },
       values: {
         members: classroomMembers,
-        recordTimeLimit: 1
+        recordTimeLimit: 1,
+        meetingDate: dayjs().add(1, "day").format("MM/DD/YYYY"),
+        meetingTime: dayjs().add(1, "day").format("h:mm A")
       },
       isDialog: true,
       loading: loading,

package/dist/hooks/useSpreadsheetState.js

@@ -1,83 +1,87 @@
 import { useEffect, useState } from "react";
-
-/**
- * Custom hook to manage the state and handlers of spreadsheet in react-spreadsheet-grid component
- * @param data
- * @param rowTemplate
- * @param initColumns
- * @param isRowEmpty
- * @returns {{onCellClick: (function(*): void), setRows: (value: (((prevState: *[]) => *[]) | *[])) => void, columns: unknown, onColumnResize: onColumnResize, selectedRow: unknown, rows: *[], onFieldChange: (function(*, *): function(*): void), isRowEmpty, setSelectedRow: (value: unknown) => void, deleteSelectedRow: deleteSelectedRow}}
- */
 export default function useSpreadsheetState({
   data = [],
   rowTemplate,
-  initColumns,
   isRowEmpty
 }) {
+  // Converts a raw phrase row (arrays for translations/definitions, separate
+  // alternativeVersions) into the flat string format used by the spreadsheet.
   const formatRows = rows => {
     return rows.map((r, index) => {
-      const translationsArray = Array.isArray(r.translations) ? r.translations : r.translations.split("|").map(t => t.trim());
+      const translationsArray = Array.isArray(r.translations) ? r.translations : (r.translations || "").split("|").map(t => t.trim());
+      const definitionsArray = Array.isArray(r.definitions) ? r.definitions : (r.definitions || "").split("|").map(d => d.trim());
+
+      // Combine phrase + alternativeVersions into one pipe-separated string for
+      // display and editing. formatRowsToPhrases splits them back on save.
+      const phraseDisplay = [r.phrase || "", ...(r.alternativeVersions || [])].filter(Boolean).join(" | ");
       return {
         ...r,
         id: index,
-        translations: translationsArray.join(" | ")
+        phrase: phraseDisplay,
+        translations: translationsArray.join(" | "),
+        definitions: definitionsArray.join(" | ")
       };
     });
   };
   const [rows, setRows] = useState([]);
-  const [columns, setColumns] = useState(initColumns());
-  const [selectedRow, setSelectedRow] = useState(undefined);
-  const onColumnResize = widthValues => {
-    const newColumns = [].concat(columns);
-    Object.keys(widthValues).forEach(columnId => {
-      const foundIndex = newColumns.findIndex(col => col.id === columnId);
-      newColumns[foundIndex].width = widthValues[columnId];
-    });
-    setColumns(newColumns);
-  };
-
-  // stringified to detect changes in nested objects
+  const [isDirty, setIsDirty] = useState(false);
   const dataStringified = JSON.stringify(data);
   useEffect(() => {
-    const parsed = JSON.parse(dataStringified);
-    setRows(formatRows(parsed));
-  }, [dataStringified]);
-  const onFieldChange = (rowId, field) => value => {
-    setRows(prevState => {
-      const newRows = [...prevState];
-      // Find the row that is being changed
-      const row = newRows.find(({
-        id
-      }) => id === rowId);
+    const formatted = formatRows(JSON.parse(dataStringified));
+    setRows(formatted);
+    setIsDirty(false);
+  }, [dataStringified]); // eslint-disable-line react-hooks/exhaustive-deps
 
-      // Change a value of a field
-      row[field] = value;
-      if (!isRowEmpty(newRows[newRows.length - 1])) {
-        newRows.push({
-          id: newRows.length,
-          ...rowTemplate
+  // Called by DataGrid after a cell edit is committed. Returns the updated row
+  // so DataGrid can update its own display, and appends an empty trailing row
+  // whenever the previous last row now has content.
+  const processRowUpdate = newRow => {
+    setRows(prevRows => {
+      const updated = prevRows.map(r => r.id === newRow.id ? newRow : r);
+      if (!isRowEmpty(updated[updated.length - 1])) {
+        updated.push({
+          ...rowTemplate,
+          id: updated.length,
+          translations: "",
+          definitions: ""
         });
       }
-      return newRows;
+      return updated;
     });
+    setIsDirty(true);
+    return newRow;
+  };
+
+  // Removes rows whose ids are in selectedIds, re-indexes the remainder,
+  // and returns the new rows so callers can save immediately.
+  const deleteRows = selectedIds => {
+    const filtered = rows.filter(r => !selectedIds.has(r.id));
+    const newRows = formatRows(filtered);
+    setRows(newRows);
+    setIsDirty(true);
+    return newRows;
   };
-  const onCellClick = row => setSelectedRow(row.id);
-  const deleteSelectedRow = () => {
-    setRows(prevState => {
-      const newRows = prevState.filter(r => r.id !== selectedRow);
-      return formatRows(newRows);
+
+  // Explicitly appends a new empty row regardless of current state.
+  const addRow = () => {
+    setRows(prevRows => {
+      const newRows = [...prevRows, {
+        ...rowTemplate,
+        id: prevRows.length,
+        translations: "",
+        definitions: ""
+      }];
+      return newRows;
     });
+    setIsDirty(true);
   };
+  const hasTrailingEmptyRow = rows.length > 0 && isRowEmpty(rows[rows.length - 1]);
   return {
     rows,
-    columns,
-    setRows,
-    selectedRow,
-    setSelectedRow,
-    deleteSelectedRow,
-    onColumnResize,
-    onFieldChange,
-    onCellClick,
-    isRowEmpty
+    processRowUpdate,
+    deleteRows,
+    addRow,
+    isDirty,
+    hasTrailingEmptyRow
   };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nualang/nualang-ui-components",
-  "version": "0.1.1364",
+  "version": "0.1.1365",
   "type": "module",
   "main": "dist/index.js",
   "files": [
@@ -20,6 +20,7 @@
     "@emotion/styled": "^11.13",
     "@hookform/resolvers": "^5.2.2",
     "@json2csv/plainjs": "^7.0.1",
+    "@mui/x-data-grid": "^9.0.1",
     "@nualang/avatars": "2.0.3",
     "@nualang/rivescript": "^2.2.2-alpha1",
     "axios": "^1.14.0",
@@ -76,7 +77,6 @@
     "react-qrcode-logo": "^4.0.0",
     "react-refresh": "^0.18.0",
     "react-simplemde-editor": "5.2.0",
-    "react-spreadsheet-grid": "^2.3.1",
     "react-swipeable-views": "^0.14.0",
     "rehype-raw": "^7.0.0",
     "socket.io-client": "^4.7.1",

package/dist/Lists/SpreadsheetGrid/SpreadsheetGrid.js

@@ -1,88 +0,0 @@
-import { useState } from "react";
-import { Typography } from "@mui/material";
-import { Grid, Input } from "react-spreadsheet-grid";
-import { jsx as _jsx } from "react/jsx-runtime";
-const initRows = [{
-  id: 0,
-  phrase: "hello",
-  translations: "hola"
-}, {
-  id: 1,
-  phrase: "dog",
-  translations: "madra"
-}];
-export default function SpreadsheetGrid({
-  t = text => text
-}) {
-  // const [rows, setRows] = useState([]);
-  const [rows, setRows] = useState(initRows);
-
-  // A callback called every time a value changed.
-  // Every time it save a new value to the state.
-  const onFieldChange = (rowId, field) => value => {
-    // Find the row that is being changed
-    // const row = rows.find({ id } => id === rowId);
-    const row = rows.find(({
-      id
-    }) => id === rowId);
-
-    // Change a value of a field
-    row[field] = value;
-    setRows([].concat(rows));
-  };
-  const initColumns = () => [{
-    id: "phrase",
-    title: () => /*#__PURE__*/_jsx(Typography, {
-      children: t("phrase")
-    }),
-    value: (row, {
-      focus
-    }) => {
-      return /*#__PURE__*/_jsx(Input, {
-        value: row.phrase,
-        focus: focus,
-        onChange: onFieldChange(row.id, "phrase")
-      });
-    },
-    width: 50
-  }, {
-    id: "translations",
-    title: () => /*#__PURE__*/_jsx(Typography, {
-      children: t("translations")
-    }),
-    value: (row, {
-      focus
-    }) => {
-      return /*#__PURE__*/_jsx(Input, {
-        value: row.translations,
-        focus: focus,
-        onChange: onFieldChange(row.id, "translations")
-      });
-    },
-    width: 50
-  }];
-  const [columns, setColumns] = useState(initColumns());
-
-  // Change columns width values in the state to not lose them.
-  const onColumnResize = widthValues => {
-    const newColumns = [].concat(columns);
-    Object.keys(widthValues).forEach(columnId => {
-      const foundIndex = newColumns.findIndex(col => col.id === columnId);
-      newColumns[foundIndex].width = widthValues[columnId];
-    });
-    setColumns(newColumns);
-  };
-  return /*#__PURE__*/_jsx(Grid, {
-    columns: columns,
-    rows: rows,
-    isColumnsResizable: true,
-    onColumnResize: onColumnResize,
-    getRowKey: row => row.id
-  });
-}
-SpreadsheetGrid.propTypes = {
-  // t: PropTypes.func.isRequired,
-  // initColumns: PropTypes.func.isRequired;
-  // onFieldChange: PropTypes.func.isRequired;
-  // onColumnResize: PropTypes.func.isRequired
-};