@nualang/nualang-ui-components 0.1.1400 → 0.2.0

package/dist/Assignments/SelectAssignmentTypeDialog/SelectAssignmentTypeDialog.js

@@ -1,168 +0,0 @@
-import React from "react";
-import { Button, Dialog, DialogActions, DialogContent, DialogTitle, Grid, MenuItem, TextField, Typography } from "@mui/material";
-import AssignmentIcon from "@mui/icons-material/Assignment";
-import CloseIcon from "@mui/icons-material/Close";
-import VideoCallIcon from "@mui/icons-material/VideoCall";
-import useMediaQuery from "@mui/material/useMediaQuery";
-import { useTheme } from "@mui/material/styles";
-import { makeStyles } from "tss-react/mui";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const useStyles = makeStyles()(theme => ({
-  div: {
-    textAlign: "center",
-    borderRadius: theme.shape.borderRadius,
-    border: `2px solid ${theme.palette.divider}`,
-    padding: theme.spacing(2),
-    "&:hover": {
-      cursor: "pointer",
-      opacity: 0.8
-    }
-  },
-  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)`
-  },
-  button: {
-    marginBottom: theme.spacing(),
-    marginRight: theme.spacing(),
-    maxWidth: 300,
-    height: 36.5
-  }
-}));
-export default function SelectAssignmentTypeDialog({
-  t = text => text,
-  open,
-  handleClose,
-  dialogTitle,
-  classrooms,
-  handleInputChange,
-  selectedClassroom,
-  isClassroomView,
-  handleSelectExercises,
-  handleSelectDiscuss
-}) {
-  const {
-    classes
-  } = useStyles();
-  const theme = useTheme();
-  const fullScreen = useMediaQuery(theme.breakpoints.down("md"));
-  const classroomsList = classrooms.map(classroom => {
-    return /*#__PURE__*/_jsx(MenuItem, {
-      value: classroom.classroomId,
-      children: classroom.classroomName
-    }, classroom.classroomId);
-  });
-  return /*#__PURE__*/_jsxs(Dialog, {
-    open: open,
-    onClose: handleClose,
-    dialogTitle: dialogTitle,
-    maxWidth: "lg",
-    fullScreen: fullScreen,
-    fullWidth: true,
-    "aria-label": dialogTitle,
-    classes: {
-      paper: classes.paper
-    },
-    children: [dialogTitle && /*#__PURE__*/_jsx(DialogTitle, {
-      sx: {
-        fontWeight: "bold"
-      },
-      children: dialogTitle
-    }), /*#__PURE__*/_jsxs(DialogContent, {
-      children: [!isClassroomView && classrooms.length > 0 && /*#__PURE__*/_jsx(TextField, {
-        select: true,
-        id: "classrooms",
-        name: "classrooms",
-        "data-cy": "classrooms",
-        label: t("select_a_classroom"),
-        value: selectedClassroom,
-        onChange: handleInputChange,
-        margin: "normal",
-        variant: "outlined",
-        fullWidth: true,
-        required: true,
-        children: classroomsList
-      }), /*#__PURE__*/_jsxs(Grid, {
-        container: true,
-        sx: {
-          width: "100%"
-        },
-        spacing: 2,
-        children: [/*#__PURE__*/_jsx(Grid, {
-          size: {
-            xs: 12,
-            md: 6
-          },
-          children: /*#__PURE__*/_jsx("div", {
-            className: classes.div,
-            onClick: handleSelectExercises,
-            children: /*#__PURE__*/_jsxs("div", {
-              style: {
-                marginBottom: theme.spacing(2)
-              },
-              children: [/*#__PURE__*/_jsx(Typography, {
-                variant: "h4",
-                sx: {
-                  fontWeight: "bold"
-                },
-                children: t("assign_exercises")
-              }), /*#__PURE__*/_jsx(AssignmentIcon, {
-                sx: theme => ({
-                  width: "100%",
-                  height: "auto",
-                  maxWidth: 130,
-                  color: theme.palette.primary.main
-                })
-              }), /*#__PURE__*/_jsx(Typography, {
-                variant: "subtitle1",
-                children: t("assign_exercises_desc")
-              })]
-            })
-          })
-        }), /*#__PURE__*/_jsx(Grid, {
-          size: {
-            xs: 12,
-            md: 6
-          },
-          children: /*#__PURE__*/_jsx("div", {
-            className: classes.div,
-            onClick: handleSelectDiscuss,
-            children: /*#__PURE__*/_jsxs("div", {
-              style: {
-                marginBottom: theme.spacing(2)
-              },
-              children: [/*#__PURE__*/_jsx(Typography, {
-                variant: "h4",
-                sx: {
-                  fontWeight: "bold"
-                },
-                children: t("assign_discuss")
-              }), /*#__PURE__*/_jsx(VideoCallIcon, {
-                sx: theme => ({
-                  width: "100%",
-                  height: "auto",
-                  maxWidth: 130,
-                  color: theme.palette.primary.main
-                })
-              }), /*#__PURE__*/_jsx(Typography, {
-                variant: "subtitle1",
-                children: t("assign_discuss_desc")
-              })]
-            })
-          })
-        })]
-      })]
-    }), /*#__PURE__*/_jsx(DialogActions, {
-      children: /*#__PURE__*/_jsx(Button, {
-        className: classes.button,
-        onClick: handleClose,
-        color: "primary",
-        endIcon: /*#__PURE__*/_jsx(CloseIcon, {}),
-        variant: "outlined",
-        children: t("cancel")
-      })
-    })]
-  });
-}

package/dist/Assignments/SelectAssignmentTypeDialog/package.json

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

package/dist/Cards/Avatar/Avatar.js

@@ -1,45 +0,0 @@
-import { Card, Avatar, ButtonBase, Skeleton } from "@mui/material";
-import { classes } from "../CardElements";
-import { jsx as _jsx } from "react/jsx-runtime";
-function AvatarCard({
-  url,
-  selected,
-  onSelect
-}) {
-  const handleSelect = () => selected ? onSelect(null) : onSelect(url);
-  const avatarStyling = {
-    width: 50,
-    height: 50,
-    cursor: "pointer",
-    margin: theme => theme.spacing()
-  };
-  if (!url) {
-    return /*#__PURE__*/_jsx(Card, {
-      sx: {
-        display: "inline-block"
-      },
-      children: /*#__PURE__*/_jsx(Skeleton, {
-        animation: "wave",
-        variant: "circular",
-        sx: avatarStyling
-      })
-    });
-  }
-  return /*#__PURE__*/_jsx(Card, {
-    raised: selected,
-    sx: selected ? {
-      display: "inline-block"
-    } : {
-      display: "inline-block",
-      ...classes.hover
-    },
-    children: /*#__PURE__*/_jsx(ButtonBase, {
-      onClick: () => handleSelect(),
-      children: /*#__PURE__*/_jsx(Avatar, {
-        src: url,
-        sx: avatarStyling
-      })
-    })
-  });
-}
-export default AvatarCard;

package/dist/Cards/Bot/Bot.js

@@ -1,399 +0,0 @@
-import { useState } from "react";
-import PropTypes from "prop-types";
-import { useInView } from "react-intersection-observer";
-import PlaceholderImages from "../../utils/placeholder-images/index";
-import { Button, Typography, CardActionArea, CardActions, Menu, MenuItem, IconButton, Divider, Tooltip } from "@mui/material";
-import Skeleton from "@mui/material/Skeleton";
-import Person from "@mui/icons-material/Person";
-import LanguageIcon from "@mui/icons-material/Public";
-import DifficultyIcon from "@mui/icons-material/School";
-import { capitalize, formatNumberTotal } from "../../utils/index";
-import MoreVertIcon from "@mui/icons-material/MoreVert";
-import PlayArrowIcon from "@mui/icons-material/PlayArrow";
-import EditIcon from "@mui/icons-material/Edit";
-import DeleteIcon from "@mui/icons-material/Delete";
-import ShareIcon from "@mui/icons-material/Share";
-import CopyIcon from "@mui/icons-material/FileCopy";
-import ProgressiveCardMedia from "../../Misc/ProgressiveCardMedia/ProgressiveCardMedia";
-import { classes, CardContainer, CardAvatar, CardHeader, CardTitle, CardSubheader, CardInfoSection, CardInfoSectionItem, CardDescription, CardTop, CardContent, CardMenuIcon, CardVisibility } from "../CardElements";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-function OverflowMenu({
-  t,
-  bot,
-  anchorEl,
-  handleClose,
-  handlePlay,
-  handleEdit,
-  handleShare,
-  handleDelete,
-  isCreator = false,
-  handleDuplicateBot,
-  subscription
-}) {
-  return /*#__PURE__*/_jsxs(Menu, {
-    id: `card-menu-${bot.botId}`,
-    anchorEl: anchorEl,
-    keepMounted: true,
-    open: Boolean(anchorEl),
-    onClose: handleClose,
-    children: [/*#__PURE__*/_jsxs(MenuItem, {
-      onClick: handlePlay,
-      "data-cy": `${bot.botName}-play-bot`,
-      children: [/*#__PURE__*/_jsx(CardMenuIcon, {
-        children: /*#__PURE__*/_jsx(PlayArrowIcon, {
-          fontSize: "small"
-        })
-      }), /*#__PURE__*/_jsx(Typography, {
-        children: t("play")
-      })]
-    }), isCreator && /*#__PURE__*/_jsxs(MenuItem, {
-      onClick: handleEdit,
-      "data-cy": `${bot.botName}-edit-bot`,
-      children: [/*#__PURE__*/_jsx(CardMenuIcon, {
-        children: /*#__PURE__*/_jsx(EditIcon, {
-          fontSize: "small"
-        })
-      }), /*#__PURE__*/_jsx(Typography, {
-        children: t("edit")
-      })]
-    }), isCreator && /*#__PURE__*/_jsxs(MenuItem, {
-      onClick: handleDelete,
-      "data-cy": `${bot.botName}-delete-bot`,
-      children: [/*#__PURE__*/_jsx(CardMenuIcon, {
-        children: /*#__PURE__*/_jsx(DeleteIcon, {
-          fontSize: "small"
-        })
-      }), /*#__PURE__*/_jsx(Typography, {
-        children: t("delete")
-      })]
-    }), subscription.isPaidUser ? /*#__PURE__*/_jsxs(MenuItem, {
-      onClick: handleShare,
-      children: [/*#__PURE__*/_jsx(CardMenuIcon, {
-        children: /*#__PURE__*/_jsx(ShareIcon, {
-          fontSize: "small"
-        })
-      }), /*#__PURE__*/_jsx(Typography, {
-        children: t("share")
-      })]
-    }) : /*#__PURE__*/_jsx(Tooltip, {
-      title: t("upgrade_plan"),
-      placement: "top",
-      children: /*#__PURE__*/_jsxs(MenuItem, {
-        onClick: handleShare,
-        disabled: true,
-        children: [/*#__PURE__*/_jsx(CardMenuIcon, {
-          children: /*#__PURE__*/_jsx(ShareIcon, {
-            fontSize: "small"
-          })
-        }), /*#__PURE__*/_jsx(Typography, {
-          children: t("share")
-        })]
-      })
-    }), handleDuplicateBot && /*#__PURE__*/_jsxs(MenuItem, {
-      onClick: () => handleDuplicateBot(bot),
-      children: [/*#__PURE__*/_jsx(CardMenuIcon, {
-        children: /*#__PURE__*/_jsx(CopyIcon, {
-          fontSize: "small"
-        })
-      }), /*#__PURE__*/_jsx(Typography, {
-        children: t("create_duplicate")
-      })]
-    })]
-  });
-}
-function Bot({
-  t = text => text,
-  bot,
-  handleSelectBot,
-  selectText = "play",
-  isCreator = false,
-  disableActions = false,
-  handleDuplicateBot,
-  handleShareBot,
-  handleEditBot,
-  handlePlayBot,
-  handleDeleteBot,
-  handleViewUserProfile,
-  disableRaised,
-  subscription = {},
-  disablePlays,
-  handleOpenPreview,
-  disablePreview,
-  cardTitleComponent = "h3",
-  compact = false
-}) {
-  const [anchorEl, setAnchorEl] = useState(null);
-  const [placeholderRef, visible] = useInView({
-    rootMargin: "320px",
-    triggerOnce: true
-  });
-  if (!bot) {
-    return /*#__PURE__*/_jsxs(CardContainer, {
-      compact: compact,
-      children: [/*#__PURE__*/_jsx(CardTop, {
-        children: /*#__PURE__*/_jsx(Skeleton, {
-          variant: "rectangular",
-          sx: {
-            ...classes.media,
-            ...(compact ? {
-              paddingTop: "40%"
-            } : {})
-          }
-        })
-      }), /*#__PURE__*/_jsx(CardHeader, {
-        action: /*#__PURE__*/_jsx(IconButton, {
-          disabled: true,
-          size: "large",
-          value: "More",
-          "aria-label": "More Options",
-          children: /*#__PURE__*/_jsx(MoreVertIcon, {})
-        }),
-        title: /*#__PURE__*/_jsx(Skeleton, {
-          height: 12,
-          width: "80%"
-        }),
-        subheader: /*#__PURE__*/_jsx(Skeleton, {
-          height: 10,
-          width: "40%"
-        })
-      }), /*#__PURE__*/_jsx(CardContent, {
-        children: /*#__PURE__*/_jsx(Typography, {
-          variant: "body1",
-          color: "textSecondary",
-          component: "div",
-          children: /*#__PURE__*/_jsx(Skeleton, {
-            variant: "text",
-            height: 72
-          })
-        })
-      })]
-    });
-  }
-  const {
-    botName,
-    description,
-    userImage,
-    verificationStatus,
-    gameAward,
-    createdByName,
-    picture,
-    cardPicture,
-    pictureXs,
-    learnLang,
-    createdBy,
-    exerciseStartTotal,
-    visibility
-  } = bot;
-  const selectBot = () => {
-    handleSelectBot(bot);
-  };
-  return /*#__PURE__*/_jsxs(CardContainer, {
-    compact: compact,
-    sx: disableRaised ? {} : classes.hover,
-    raised: disableRaised ? false : anchorEl,
-    "data-cy": "bot-card",
-    children: [/*#__PURE__*/_jsxs(CardTop, {
-      children: [/*#__PURE__*/_jsxs(CardActionArea, {
-        onClick: selectBot,
-        role: "link",
-        children: [/*#__PURE__*/_jsx(ProgressiveCardMedia, {
-          sx: {
-            ...classes.media,
-            ...(compact ? {
-              paddingTop: "40%"
-            } : {})
-          },
-          highQualitySrc: visible || !pictureXs ? cardPicture || picture || PlaceholderImages.bot : null,
-          lowQualitySrc: pictureXs,
-          title: botName,
-          placeholderRef: placeholderRef,
-          accessibilityLabel: `${botName} image`
-        }), isCreator && /*#__PURE__*/_jsx(CardVisibility, {
-          t: t,
-          visibility: visibility
-        })]
-      }), userImage ? /*#__PURE__*/_jsx(CardAvatar, {
-        "aria-label": `${t("go_to")} ${createdByName || `${botName} ${t("creator")}`} ${t("profile")}`,
-        title: createdByName || `${botName} creator`,
-        src: userImage,
-        onClick: () => handleViewUserProfile(createdBy),
-        alt: createdByName || `${botName} creator`,
-        onKeyDown: event => {
-          if (event.key === "Enter") {
-            handleViewUserProfile(createdBy);
-          }
-        },
-        role: "link",
-        tabIndex: 0,
-        verificationStatus: verificationStatus,
-        gameAward: gameAward,
-        badgeSize: "small",
-        sx: theme => ({
-          backgroundColor: theme.palette.mode === "dark" ? "#ffffff" : "#bdbdbd",
-          color: theme.palette.mode === "dark" ? theme.palette.background.default : "white",
-          ...(compact ? {
-            width: 44,
-            height: 44
-          } : {})
-        })
-      }) : /*#__PURE__*/_jsx(CardAvatar, {
-        sx: theme => ({
-          backgroundColor: theme.palette.mode === "dark" ? "#ffffff" : "#bdbdbd",
-          color: theme.palette.mode === "dark" ? theme.palette.background.default : "white",
-          ...(compact ? {
-            width: 44,
-            height: 44
-          } : {})
-        }),
-        "aria-label": `${t("go_to")} ${createdByName || `${botName} ${t("creator")}`} ${t("profile")}`,
-        title: createdByName || `${botName} creator`,
-        onClick: () => handleViewUserProfile(createdBy),
-        alt: createdByName || `${botName} creator`,
-        onKeyDown: event => {
-          if (event.key === "Enter") {
-            handleViewUserProfile(createdBy);
-          }
-        },
-        role: "link",
-        tabIndex: 0,
-        verificationStatus: verificationStatus,
-        gameAward: gameAward,
-        badgeSize: "small",
-        children: /*#__PURE__*/_jsx(Person, {
-          fontSize: "large"
-        })
-      })]
-    }), /*#__PURE__*/_jsxs(CardActionArea, {
-      onClick: selectBot,
-      disabled: disableActions,
-      sx: {
-        flexGrow: 1,
-        display: "flex",
-        flexDirection: "column",
-        alignItems: "stretch"
-      },
-      children: [/*#__PURE__*/_jsx(CardHeader, {
-        title: /*#__PURE__*/_jsx(CardTitle, {
-          title: botName,
-          component: cardTitleComponent,
-          compact: compact
-        }),
-        action: /*#__PURE__*/_jsx(Tooltip, {
-          title: t("more_options"),
-          children: /*#__PURE__*/_jsx(IconButton, {
-            "aria-label": "More Options",
-            onClick: event => {
-              event.stopPropagation();
-              setAnchorEl(event.currentTarget);
-            },
-            "data-cy": `${botName}-more-options`,
-            disabled: disableActions,
-            size: "large",
-            "aria-expanded": Boolean(anchorEl),
-            children: /*#__PURE__*/_jsx(MoreVertIcon, {})
-          })
-        }),
-        subheader: /*#__PURE__*/_jsx(CardSubheader, {
-          subheader: createdByName,
-          compact: compact
-        })
-      }), /*#__PURE__*/_jsx(Divider, {}), /*#__PURE__*/_jsxs(CardContent, {
-        children: [/*#__PURE__*/_jsxs(CardInfoSection, {
-          sx: {
-            columnGap: 1.5,
-            rowGap: 0.5
-          },
-          children: [/*#__PURE__*/_jsxs(CardInfoSectionItem, {
-            variant: "caption",
-            component: "span",
-            children: [/*#__PURE__*/_jsx(LanguageIcon, {
-              sx: {
-                ...classes.infoIcon,
-                fontSize: compact ? 18 : undefined
-              },
-              fontSize: "small"
-            }), learnLang && capitalize(t(learnLang))]
-          }), /*#__PURE__*/_jsxs(CardInfoSectionItem, {
-            variant: "caption",
-            component: "span",
-            children: [/*#__PURE__*/_jsx(DifficultyIcon, {
-              sx: {
-                ...classes.infoIcon,
-                fontSize: compact ? 18 : undefined
-              },
-              fontSize: "small"
-            }), t(`card_${bot.difficulty}`)]
-          }), !disablePlays && exerciseStartTotal > -1 && /*#__PURE__*/_jsxs(CardInfoSectionItem, {
-            variant: "caption",
-            component: "span",
-            children: [/*#__PURE__*/_jsx(PlayArrowIcon, {
-              sx: {
-                ...classes.infoIcon,
-                fontSize: compact ? 18 : undefined
-              },
-              fontSize: "small"
-            }), t("plays", {
-              number: formatNumberTotal(exerciseStartTotal)
-            })]
-          })]
-        }), /*#__PURE__*/_jsx(CardDescription, {
-          variant: compact ? "caption" : "body2",
-          color: "textSecondary",
-          component: "p",
-          sx: compact ? {
-            height: "auto",
-            lineHeight: 1.4,
-            display: "-webkit-box",
-            WebkitLineClamp: 2,
-            WebkitBoxOrient: "vertical",
-            overflow: "hidden",
-            marginBottom: 1
-          } : {},
-          children: description
-        })]
-      })]
-    }), !compact && /*#__PURE__*/_jsxs(CardActions, {
-      children: [/*#__PURE__*/_jsx(Button, {
-        onClick: selectBot,
-        color: "primary",
-        variant: "outlined",
-        "data-cy": "bot_select_button",
-        disabled: disableActions,
-        "aria-label": `${t(selectText)}: ${botName}`,
-        children: t(selectText)
-      }), handleOpenPreview && !disablePreview ? /*#__PURE__*/_jsx(Button, {
-        onClick: () => {
-          handleOpenPreview(bot);
-        },
-        color: "primary",
-        "data-cy": "bot_preview_button",
-        disabled: disableActions,
-        "aria-label": `Preview bot:  ${botName}`,
-        children: t("preview")
-      }) : null]
-    }), /*#__PURE__*/_jsx(OverflowMenu, {
-      t: t,
-      bot: bot,
-      isCreator: isCreator,
-      anchorEl: anchorEl,
-      handleDuplicateBot: handleDuplicateBot,
-      handleClose: () => setAnchorEl(null),
-      handlePlay: () => handlePlayBot(bot),
-      handleDelete: () => handleDeleteBot(bot),
-      handleEdit: () => handleEditBot(bot),
-      handleShare: () => handleShareBot(bot),
-      subscription: subscription
-    })]
-  });
-}
-Bot.propTypes = {
-  bot: PropTypes.shape({
-    botId: PropTypes.string.isRequired,
-    botName: PropTypes.string.isRequired,
-    description: PropTypes.string.isRequired,
-    userImage: PropTypes.string,
-    picture: PropTypes.string
-  }),
-  selectText: PropTypes.string.isRequired
-};
-export default Bot;

package/dist/Cards/Bot/Bot.test.js

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

package/dist/Cards/Bot/package.json

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

package/dist/Cards/CardElements/CardSubheader/CardSubheader.js

@@ -1,28 +0,0 @@
-import PropTypes from "prop-types";
-import Typography from "@mui/material/Typography";
-import { styled } from "@mui/system";
-import { jsx as _jsx } from "react/jsx-runtime";
-const StyledCardSubheader = styled(Typography)(({
-  theme
-}) => ({
-  color: theme.palette.text.secondary,
-  whiteSpace: "nowrap",
-  overflow: "hidden",
-  textOverflow: "ellipsis"
-}));
-function CardSubheader({
-  subheader = "",
-  component = "span",
-  compact = false
-}) {
-  return /*#__PURE__*/_jsx(StyledCardSubheader, {
-    variant: compact ? "caption" : "body2",
-    component: component,
-    children: subheader
-  });
-}
-CardSubheader.propTypes = {
-  subheader: PropTypes.string,
-  component: PropTypes.string
-};
-export default CardSubheader;

package/dist/Cards/CardElements/CardSubheader/package.json

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