@nualang/nualang-ui-components 0.1.1399 → 0.2.0

package/dist/Tables/BotRows/BotRows.js

@@ -1,132 +0,0 @@
-import { useEffect, useState, memo } from "react";
-import PropTypes from "prop-types";
-
-// Mui
-import { Avatar } from "@mui/material";
-import TableCell from "@mui/material/TableCell";
-import TableRow from "@mui/material/TableRow";
-import Link from "@mui/material/Link";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-function BotRows({
-  bot = {
-    botId: "",
-    botName: "",
-    description: "",
-    difficulty: "",
-    picture: "",
-    learnLang: "",
-    createdAt: 0,
-    createdBy: "",
-    exerciseStartTotal: 0,
-    exerciseCompletionTotal: 0
-  },
-  mainAppBotURL = "http://localhost:8000/app/"
-}) {
-  const {
-    botId,
-    botName,
-    picture,
-    createdBy,
-    learnLang,
-    createdByName,
-    createdAt,
-    courseSectionTopicId,
-    difficulty,
-    exerciseStartTotal,
-    exerciseCompletionTotal
-  } = bot;
-  const [url, setUrl] = useState(false);
-  useEffect(() => {
-    const getBotsUrl = () => {
-      try {
-        if (courseSectionTopicId.includes("|")) {
-          const idValues = courseSectionTopicId ? courseSectionTopicId.split("|") : [];
-          const courseId = idValues[0];
-          const sectionId = idValues[1];
-          const topicId = idValues[2];
-          setUrl(`/courses/${courseId}/${sectionId}/${topicId}/bots/${botId}`);
-        } else {
-          setUrl(`/bots/${botId}`);
-        }
-      } catch (err) {
-        console.error(err);
-        setUrl(null);
-      }
-    };
-    getBotsUrl();
-  }, [botId, courseSectionTopicId]);
-  return /*#__PURE__*/_jsx(_Fragment, {
-    children: /*#__PURE__*/_jsxs(TableRow, {
-      hover: true,
-      tabIndex: -1,
-      children: [/*#__PURE__*/_jsx(TableCell, {}), /*#__PURE__*/_jsx(TableCell, {
-        children: /*#__PURE__*/_jsx(Avatar, {
-          src: picture,
-          alt: ""
-        })
-      }), /*#__PURE__*/_jsx(TableCell, {
-        component: "th",
-        scope: "row",
-        padding: "none",
-        children: /*#__PURE__*/_jsx(Link, {
-          href: `${mainAppBotURL}${url}`,
-          target: "_blank",
-          rel: "noopener noreferrer",
-          color: "inherit",
-          children: botName
-        })
-      }), /*#__PURE__*/_jsx(TableCell, {
-        component: "th",
-        scope: "row",
-        padding: "none",
-        children: /*#__PURE__*/_jsx(Link, {
-          href: `${window.location.origin}/analytics#/activity/member/${createdBy}`,
-          target: "_blank",
-          rel: "noopener noreferrer",
-          color: "inherit",
-          children: createdByName
-        })
-      }), /*#__PURE__*/_jsx(TableCell, {
-        component: "th",
-        scope: "row",
-        padding: "none",
-        children: new Date(createdAt).toLocaleDateString()
-      }), /*#__PURE__*/_jsx(TableCell, {
-        component: "th",
-        scope: "row",
-        padding: "none",
-        children: difficulty
-      }), /*#__PURE__*/_jsx(TableCell, {
-        component: "th",
-        scope: "row",
-        padding: "none",
-        children: learnLang
-      }), /*#__PURE__*/_jsx(TableCell, {
-        component: "th",
-        scope: "row",
-        padding: "none",
-        children: exerciseStartTotal
-      }), /*#__PURE__*/_jsx(TableCell, {
-        component: "th",
-        scope: "row",
-        padding: "none",
-        children: exerciseCompletionTotal
-      })]
-    })
-  });
-}
-const MemoizedBot = /*#__PURE__*/memo(BotRows);
-MemoizedBot.propTypes = {
-  botId: PropTypes.string.isRequired,
-  botName: PropTypes.string.isRequired,
-  description: PropTypes.string.isRequired,
-  difficulty: PropTypes.string.isRequired,
-  picture: PropTypes.string,
-  learnLang: PropTypes.string.isRequired,
-  createdAt: PropTypes.number.isRequired,
-  createdBy: PropTypes.string.isRequired,
-  createdByName: PropTypes.string,
-  exerciseStartTotal: PropTypes.number.isRequired,
-  exerciseCompletionTotal: PropTypes.number.isRequired
-};
-export default MemoizedBot;

package/dist/Tables/BotRows/package.json

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

package/dist/Tables/Bots/Bots.js

@@ -1,280 +0,0 @@
-import { useState } from "react";
-import classNames from "classnames";
-import PropTypes from "prop-types";
-import { lighten } from "@mui/material/styles";
-import { withStyles } from "tss-react/mui";
-import Table from "@mui/material/Table";
-import TableBody from "@mui/material/TableBody";
-import TableCell from "@mui/material/TableCell";
-import TableHead from "@mui/material/TableHead";
-import TablePagination from "@mui/material/TablePagination";
-import TableRow from "@mui/material/TableRow";
-import TableSortLabel from "@mui/material/TableSortLabel";
-import Toolbar from "@mui/material/Toolbar";
-import Typography from "@mui/material/Typography";
-import Paper from "@mui/material/Paper";
-import IconButton from "@mui/material/IconButton";
-import Tooltip from "@mui/material/Tooltip";
-import DeleteIcon from "@mui/icons-material/Delete";
-import FilterListIcon from "@mui/icons-material/FilterList";
-import BotRows from "../BotRows/BotRows";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-function desc(a, b, orderBy) {
-  if (b[orderBy] < a[orderBy]) {
-    return -1;
-  }
-  if (b[orderBy] > a[orderBy]) {
-    return 1;
-  }
-  return 0;
-}
-function stableSort(array) {
-  const stabilizedThis = array.map((el, index) => [el, index]);
-  stabilizedThis.sort((a, b) => b.createdAt - a.createdAt);
-  return stabilizedThis.map(el => el[0]);
-}
-function getSorting(order, orderBy) {
-  return order === "desc" ? (a, b) => desc(a, b, orderBy) : (a, b) => -desc(a, b, orderBy);
-}
-const rows = [{
-  id: "botImage",
-  numeric: true,
-  disablePadding: false,
-  label: "Picture"
-}, {
-  id: "botName",
-  numeric: false,
-  disablePadding: true,
-  label: "Name"
-}, {
-  id: "createdBy",
-  numeric: false,
-  disablePadding: true,
-  label: "Created by"
-}, {
-  id: "createdAt",
-  numeric: true,
-  date: true,
-  disablePadding: true,
-  label: "Created at"
-}, {
-  id: "botDifficulty",
-  numeric: false,
-  disablePadding: true,
-  label: "Difficulty"
-}, {
-  id: "learnLang",
-  numeric: false,
-  disablePadding: true,
-  label: "Learn"
-}, {
-  id: "exerciseStartTotal",
-  numeric: true,
-  disablePadding: true,
-  label: "Exercise Start Total"
-}, {
-  id: "exerciseCompletionTotal",
-  numeric: true,
-  disablePadding: true,
-  label: "Exercise Completion Total"
-}];
-function EnhancedTableHead(props) {
-  const {
-    order,
-    orderBy,
-    onRequestSort
-  } = props;
-  const createSortHandler = property => event => {
-    onRequestSort(event, property);
-  };
-  return /*#__PURE__*/_jsx(TableHead, {
-    children: /*#__PURE__*/_jsxs(TableRow, {
-      children: [/*#__PURE__*/_jsx(TableCell, {}), rows.map((row, i) => {
-        const keyId = `botstaby_tablehead_row_${i}`;
-        return /*#__PURE__*/_jsx(TableCell, {
-          padding: row.disablePadding ? "none" : "default",
-          sortDirection: orderBy === row.id ? order : false,
-          children: /*#__PURE__*/_jsx(Tooltip, {
-            title: "Sort",
-            placement: row.numeric ? "bottom-end" : "bottom-start",
-            enterDelay: 300,
-            children: /*#__PURE__*/_jsx(TableSortLabel, {
-              active: orderBy === row.id,
-              direction: order,
-              onClick: createSortHandler(row.id),
-              children: row.label
-            })
-          })
-        }, keyId);
-      }, this)]
-    })
-  });
-}
-EnhancedTableHead.propTypes = {
-  numSelected: PropTypes.number.isRequired,
-  onRequestSort: PropTypes.func.isRequired,
-  onSelectAllClick: PropTypes.func.isRequired,
-  order: PropTypes.string.isRequired,
-  orderBy: PropTypes.string.isRequired,
-  rowCount: PropTypes.number.isRequired
-};
-const toolbarStyles = theme => ({
-  root: {
-    paddingRight: theme.spacing(1)
-  },
-  highlight: theme.palette.mode === "light" ? {
-    color: theme.palette.secondary.main,
-    backgroundColor: lighten(theme.palette.secondary.light, 0.85)
-  } : {
-    color: theme.palette.text.primary,
-    backgroundColor: theme.palette.secondary.dark
-  },
-  spacer: {
-    flex: "1 1 100%"
-  },
-  actions: {
-    color: theme.palette.text.secondary
-  },
-  title: {
-    flex: "0 0 auto"
-  }
-});
-const EnhancedTableToolbar = props => {
-  const {
-    numSelected,
-    classes,
-    handleOpenBotsFilter
-  } = props;
-  return /*#__PURE__*/_jsxs(Toolbar, {
-    className: classNames(classes.root, {
-      [classes.highlight]: numSelected > 0
-    }),
-    children: [/*#__PURE__*/_jsx("div", {
-      className: classes.title,
-      children: numSelected > 0 ? /*#__PURE__*/_jsxs(Typography, {
-        variant: "subtitle1",
-        sx: {
-          color: 'inherit'
-        },
-        children: [numSelected, " selected"]
-      }) : /*#__PURE__*/_jsx(Typography, {
-        variant: "h6",
-        id: "tableTitle",
-        children: "Bots"
-      })
-    }), /*#__PURE__*/_jsx("div", {
-      className: classes.spacer
-    }), /*#__PURE__*/_jsx("div", {
-      className: classes.actions,
-      children: numSelected > 0 ? /*#__PURE__*/_jsx(Tooltip, {
-        title: "Delete",
-        children: /*#__PURE__*/_jsx(IconButton, {
-          "aria-label": "Delete",
-          size: "large",
-          children: /*#__PURE__*/_jsx(DeleteIcon, {})
-        })
-      }) : /*#__PURE__*/_jsx(Tooltip, {
-        title: "Filter list",
-        children: /*#__PURE__*/_jsx(IconButton, {
-          "aria-label": "Filter list",
-          onClick: handleOpenBotsFilter,
-          size: "large",
-          children: /*#__PURE__*/_jsx(FilterListIcon, {})
-        })
-      })
-    })]
-  });
-};
-const EnhancedTableToolbarWithStyles = withStyles(EnhancedTableToolbar, toolbarStyles);
-EnhancedTableToolbarWithStyles.propTypes = {
-  numSelected: PropTypes.number.isRequired
-};
-const styles = () => ({
-  root: {
-    width: "100%"
-  },
-  table: {
-    minWidth: 340,
-    marginBottom: `0 !important`
-  },
-  tableWrapper: {
-    overflowX: "auto"
-  }
-});
-function Bots({
-  classes,
-  bots = [],
-  selectedBots = [],
-  handleSelectAllBotsClick,
-  handleOpenBotsFilter,
-  mainAppBotURL
-}) {
-  const [order, setOrder] = useState("asc");
-  const [orderBy, setOrderBy] = useState("botName");
-  const [page, setPage] = useState(0);
-  const [rowsPerPage, setRowsPerPage] = useState(5);
-  function handleRequestSort(event, property) {
-    const isDesc = orderBy === property && order === "desc";
-    setOrder(isDesc ? "asc" : "desc");
-    setOrderBy(property);
-  }
-  function handleChangePage(event, newPage) {
-    setPage(newPage);
-  }
-  function handleChangeRowsPerPage(event) {
-    setRowsPerPage(event.target.value);
-  }
-  const emptyRows = rowsPerPage - Math.min(rowsPerPage, bots.length - page * rowsPerPage);
-  return /*#__PURE__*/_jsxs(Paper, {
-    className: classes.root,
-    children: [/*#__PURE__*/_jsx(EnhancedTableToolbarWithStyles, {
-      numSelected: selectedBots.length,
-      handleOpenBotsFilter: handleOpenBotsFilter
-    }), /*#__PURE__*/_jsx("div", {
-      className: classes.tableWrapper,
-      children: /*#__PURE__*/_jsxs(Table, {
-        className: classes.table,
-        "aria-labelledby": "tableTitle",
-        children: [/*#__PURE__*/_jsx(EnhancedTableHead, {
-          numSelected: selectedBots.length,
-          order: order,
-          orderBy: orderBy,
-          onSelectAllClick: handleSelectAllBotsClick,
-          onRequestSort: handleRequestSort,
-          rowCount: bots !== undefined && bots.length > 0 ? bots.length : 0
-        }), /*#__PURE__*/_jsxs(TableBody, {
-          children: [stableSort(bots, getSorting(order, orderBy)).slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage).map((n, i) => {
-            const keyId = `botstabx_${n.botId}${i}`;
-            return /*#__PURE__*/_jsx(BotRows, {
-              bot: n,
-              mainAppBotURL: mainAppBotURL
-            }, keyId);
-          }), emptyRows > 0 && /*#__PURE__*/_jsx(TableRow, {
-            style: {
-              height: 49 * emptyRows
-            },
-            children: /*#__PURE__*/_jsx(TableCell, {
-              colSpan: 6
-            })
-          })]
-        })]
-      })
-    }), /*#__PURE__*/_jsx(TablePagination, {
-      rowsPerPageOptions: [5, 10, 50, 100],
-      component: "div",
-      count: bots !== undefined && bots.length > 0 ? bots.length : 0,
-      rowsPerPage: rowsPerPage,
-      page: page,
-      backIconButtonProps: {
-        "aria-label": "Previous Page"
-      },
-      nextIconButtonProps: {
-        "aria-label": "Next Page"
-      },
-      onPageChange: handleChangePage,
-      onRowsPerPageChange: handleChangeRowsPerPage
-    })]
-  });
-}
-const EnhancedTableWithStyles = withStyles(Bots, styles);
-export default EnhancedTableWithStyles;

package/dist/Tables/Bots/package.json

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

package/dist/Tables/Chart/Chart.js

@@ -1,54 +0,0 @@
-import { useTheme } from "@mui/material/styles";
-import { Box } from "@mui/material";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-function ChartTable({
-  t = text => text,
-  chartData,
-  chartContent
-}) {
-  const theme = useTheme();
-  return /*#__PURE__*/_jsxs(Box, {
-    component: "table",
-    sx: {
-      width: "100%",
-      borderCollapse: "collapse",
-      marginTop: 2,
-      "& caption": {
-        fontSize: "1.2rem",
-        fontWeight: "bold",
-        marginBottom: 1
-      },
-      "& thead": {
-        backgroundColor: theme.palette.mode === "dark" ? "#333" : "#f5f5f5"
-      },
-      "& th, & td": {
-        padding: "8px 16px",
-        border: `1px solid ${theme.palette.mode === "dark" ? "#444" : "#ddd"}`
-      },
-      "& th": {
-        fontWeight: "bold"
-      },
-      "& tbody tr:nth-of-type(odd)": {
-        backgroundColor: theme.palette.mode === "dark" ? "#2c2c2c" : "#fafafa"
-      }
-    },
-    children: [/*#__PURE__*/_jsx("thead", {
-      children: /*#__PURE__*/_jsxs("tr", {
-        children: [/*#__PURE__*/_jsx("th", {
-          children: t(chartContent === "exercises" ? "exercise" : chartContent === "methods" ? "method" : "answer")
-        }), /*#__PURE__*/_jsx("th", {
-          children: t(chartContent === "exercises" ? "completions" : "count")
-        })]
-      })
-    }), /*#__PURE__*/_jsx("tbody", {
-      children: chartData.labels?.map((label, index) => /*#__PURE__*/_jsxs("tr", {
-        children: [/*#__PURE__*/_jsx("td", {
-          children: label
-        }), /*#__PURE__*/_jsx("td", {
-          children: chartData.datasets[0].data[index]
-        })]
-      }, index))
-    })]
-  });
-}
-export default ChartTable;

package/dist/Tables/Chart/package.json

@@ -1,5 +0,0 @@
-{
-  "name": "ChartTable",
-  "version": "0.0.0",
-  "main": "./Chat.js"
-}

package/dist/Tables/ClassroomRows/ClassroomRows.js

@@ -1,152 +0,0 @@
-import { memo } from "react";
-import PropTypes from "prop-types";
-
-// Mui
-import { Box, Typography, Avatar, CircularProgress } from "@mui/material";
-import { makeStyles } from "tss-react/mui";
-import useClassroomState from "../../hooks/useClassroomStateOld";
-import TableCell from "@mui/material/TableCell";
-import TableRow from "@mui/material/TableRow";
-import Link from "@mui/material/Link";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-const useStyles = makeStyles()(() => ({
-  root: {
-    width: "100%"
-  },
-  table: {
-    minWidth: 340,
-    marginBottom: `0 !important`
-  },
-  tableWrapper: {
-    overflowX: "auto"
-  }
-}));
-function ClassroomRows({
-  t = text => text,
-  classroom = {
-    classroomId: "",
-    classroomName: "",
-    description: "",
-    picture: "",
-    learnLang: "",
-    forLang: "",
-    createdAt: 0,
-    createdBy: ""
-  },
-  getClassroomMembers,
-  username,
-  mainAppClassroomURL = "http://localhost:8000/app/classrooms/"
-}) {
-  const {
-    classes
-  } = useStyles();
-  const {
-    membersState
-  } = useClassroomState({
-    classroomId: classroom && classroom.classroomId ? classroom.classroomId : null,
-    username,
-    getClassroomMembers,
-    visible: true
-  });
-  const {
-    classroomId,
-    classroomName,
-    description,
-    picture,
-    createdBy,
-    learnLang,
-    forLang,
-    createdByName,
-    createdAt
-  } = classroom;
-  const memberCount = membersState.data.length;
-  return /*#__PURE__*/_jsx(_Fragment, {
-    children: /*#__PURE__*/_jsxs(TableRow, {
-      hover: true,
-      tabIndex: -1,
-      children: [/*#__PURE__*/_jsx(TableCell, {}), /*#__PURE__*/_jsx(TableCell, {
-        children: /*#__PURE__*/_jsx(Avatar, {
-          src: picture,
-          alt: ""
-        })
-      }), /*#__PURE__*/_jsx(TableCell, {
-        component: "th",
-        scope: "row",
-        padding: "none",
-        children: /*#__PURE__*/_jsx(Link, {
-          href: `${mainAppClassroomURL}${classroomId}`,
-          target: "_blank",
-          rel: "noopener noreferrer",
-          color: "inherit",
-          children: classroomName
-        })
-      }), /*#__PURE__*/_jsx(TableCell, {
-        component: "th",
-        scope: "row",
-        padding: "none",
-        children: description
-      }), /*#__PURE__*/_jsx(TableCell, {
-        component: "th",
-        scope: "row",
-        padding: "none",
-        children: /*#__PURE__*/_jsx(Link, {
-          href: `${window.location.origin}/analytics#/activity/member/${createdBy}`,
-          target: "_blank",
-          rel: "noopener noreferrer",
-          color: "inherit",
-          children: createdByName
-        })
-      }), /*#__PURE__*/_jsx(TableCell, {
-        component: "th",
-        scope: "row",
-        padding: "none",
-        children: new Date(createdAt).toLocaleDateString()
-      }), /*#__PURE__*/_jsx(TableCell, {
-        children: learnLang
-      }), /*#__PURE__*/_jsx(TableCell, {
-        children: forLang
-      }), /*#__PURE__*/_jsx(TableCell, {
-        component: "th",
-        scope: "row",
-        padding: "none",
-        children: membersState.status === "fetching" ? /*#__PURE__*/_jsx(Link, {
-          href: `${mainAppClassroomURL}${classroomId}#Members`,
-          target: "_blank",
-          rel: "noopener noreferrer",
-          color: "inherit",
-          children: /*#__PURE__*/_jsxs(Typography, {
-            variant: "body1",
-            className: classes.cursorPointer,
-            children: [/*#__PURE__*/_jsx(CircularProgress, {
-              size: 16,
-              color: "inherit"
-            }), " ", memberCount === 1 ? t("member") : t("members")]
-          })
-        }) : /*#__PURE__*/_jsx(Link, {
-          href: `${mainAppClassroomURL}${classroomId}#Members`,
-          target: "_blank",
-          rel: "noopener noreferrer",
-          color: "inherit",
-          children: /*#__PURE__*/_jsxs(Typography, {
-            variant: "body1",
-            className: classes.cursorPointer,
-            children: [memberCount, " ", memberCount === 1 ? t("member") : t("members")]
-          })
-        })
-      })]
-    })
-  });
-}
-const MemoizedClassroom = /*#__PURE__*/memo(ClassroomRows);
-MemoizedClassroom.propTypes = {
-  classroomId: PropTypes.string.isRequired,
-  classroomName: PropTypes.string.isRequired,
-  description: PropTypes.string.isRequired,
-  picture: PropTypes.string,
-  learnLang: PropTypes.string.isRequired,
-  forLang: PropTypes.string.isRequired,
-  createdAt: PropTypes.number.isRequired,
-  createdBy: PropTypes.string.isRequired,
-  createdByName: PropTypes.string
-};
-export default MemoizedClassroom;

package/dist/Tables/ClassroomRows/package.json

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