@nualang/nualang-ui-components 0.1.1400 → 0.2.0

package/dist/Lists/Exercises/Exercises.test.js

@@ -1,29 +0,0 @@
-import { render } from "@testing-library/react";
-import { describe, it } from "vitest";
-import { MemoryRouter } from "react-router";
-import { createTheme, ThemeProvider } from "@mui/material/styles";
-import { Exercises } from "./Exercises";
-import { jsx as _jsx } from "react/jsx-runtime";
-describe("Exercises", () => {
-  it.skip("renders without crashing", () => {
-    console.log("Starting test");
-    const props = {
-      learnLang: "",
-      forLang: ""
-    };
-    const theme = createTheme();
-    const {
-      unmount
-    } = render(/*#__PURE__*/_jsx(ThemeProvider, {
-      theme: theme,
-      children: /*#__PURE__*/_jsx(MemoryRouter, {
-        children: /*#__PURE__*/_jsx(Exercises, {
-          ...props
-        })
-      })
-    }));
-    console.log("Component rendered");
-    unmount();
-    console.log("Component unmounted");
-  });
-});

package/dist/Lists/Exercises/package.json

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

package/dist/Lists/Leaderboard/Leaderboard.js

@@ -1,405 +0,0 @@
-import { useState } from "react";
-import PropTypes from "prop-types";
-import { Avatar, Box, List, ListItem, ListItemAvatar, ListItemText, ListSubheader, Typography } from "@mui/material";
-import Person from "@mui/icons-material/Person";
-import Skeleton from "@mui/material/Skeleton";
-import MembersNotFound from "../../Misc/NotFound/Members";
-import { Flipper, Flipped } from "react-flip-toolkit";
-import { useTheme } from "@mui/system";
-import TrendingUpIcon from "@mui/icons-material/TrendingUp";
-import TrendingDownIcon from "@mui/icons-material/TrendingDown";
-import WhatshotIcon from "@mui/icons-material/Whatshot";
-import Fade from "@mui/material/Fade";
-import { green, orange, red } from "@mui/material/colors";
-import MedalSelector from "../../Misc/MedalSelector/MedalSelector";
-import Fab from "@mui/material/Fab";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-function Member(props) {
-  const {
-    member = {},
-    lastTwoIndexes,
-    remainingQuestions,
-    lastFourScores,
-    topThreeScores,
-    numOfCorrectAnswers,
-    isIconsVisible,
-    lastThreeAnswerResults,
-    showRoleplayLeaderboardIcons
-  } = props;
-  const root = {
-    textAlign: "center",
-    marginLeft: "auto",
-    marginRight: "auto",
-    width: "100%"
-  };
-  const [fadeKey, setFadeKey] = useState(0);
-  const renderStreakIcon = () => {
-    if (!lastThreeAnswerResults || lastThreeAnswerResults.length < 3) {
-      return null;
-    }
-
-    // Ensure all three are strictly true
-    const isOnStreak = lastThreeAnswerResults.every(r => r === true);
-    if (isOnStreak && remainingQuestions.length > 1) {
-      return /*#__PURE__*/_jsx(Fade, {
-        in: true,
-        timeout: 2000,
-        onExited: () => setFadeKey(prevKey => prevKey + 1),
-        children: /*#__PURE__*/_jsx(WhatshotIcon, {
-          fontSize: "large",
-          sx: {
-            color: orange[500]
-          }
-        })
-      }, fadeKey);
-    }
-    return null;
-  };
-  const renderIcon = () => {
-    if (lastTwoIndexes.length < 2) {
-      return null;
-    }
-    const lastIndex = lastTwoIndexes[1];
-    const secondToLastIndex = lastTwoIndexes[0];
-    const fadeIn = icon => /*#__PURE__*/_jsx(Fade, {
-      in: true,
-      timeout: 2000,
-      onExited: () => setFadeKey(prevKey => prevKey + 1),
-      children: icon
-    }, fadeKey);
-    if (remainingQuestions.length === 1) {
-      const finalScore = member.score;
-      if (finalScore === topThreeScores[0]) {
-        return /*#__PURE__*/_jsx(MedalSelector, {
-          color: "gold",
-          width: "50px",
-          fade: true,
-          marginRight: 1
-        });
-      } else if (finalScore === topThreeScores[1]) {
-        return /*#__PURE__*/_jsx(MedalSelector, {
-          color: "silver",
-          width: "50px",
-          fade: true,
-          marginRight: 1
-        });
-      } else if (finalScore === topThreeScores[2]) {
-        return /*#__PURE__*/_jsx(MedalSelector, {
-          color: "bronze",
-          width: "50px",
-          fade: true,
-          marginRight: 1
-        });
-      }
-    } else if (numOfCorrectAnswers > 1 && remainingQuestions.length > 1 && showRoleplayLeaderboardIcons) {
-      if (lastIndex < secondToLastIndex) {
-        return fadeIn(/*#__PURE__*/_jsx(TrendingUpIcon, {
-          fontSize: "large",
-          sx: {
-            color: green[500]
-          }
-        }));
-      } else if (lastIndex > secondToLastIndex) {
-        return fadeIn(/*#__PURE__*/_jsx(TrendingDownIcon, {
-          fontSize: "large",
-          sx: {
-            color: red[500]
-          }
-        }));
-      }
-    }
-    return null;
-  };
-  if (!props.member) {
-    return /*#__PURE__*/_jsx(_Fragment, {
-      children: /*#__PURE__*/_jsx(Box, {
-        sx: {
-          width: "40%",
-          marginRight: "auto",
-          marginLeft: "auto"
-        },
-        children: /*#__PURE__*/_jsxs(ListItem, {
-          sx: root,
-          children: [/*#__PURE__*/_jsx(ListItemAvatar, {
-            sx: {
-              marginRight: 2
-            },
-            children: /*#__PURE__*/_jsx(Skeleton, {
-              variant: "circular",
-              width: 70,
-              height: 70
-            })
-          }), /*#__PURE__*/_jsx(Skeleton, {
-            variant: "text",
-            height: 40,
-            width: "100%"
-          })]
-        })
-      })
-    });
-  }
-  return /*#__PURE__*/_jsx(_Fragment, {
-    children: /*#__PURE__*/_jsxs(ListItem, {
-      ContainerComponent: "div",
-      sx: {
-        display: "flex",
-        alignItems: "center",
-        width: "45%",
-        marginLeft: "auto",
-        marginRight: "auto",
-        "@media screen and (max-width: 768px)": {
-          width: "100%"
-        }
-      },
-      children: [/*#__PURE__*/_jsx(ListItemAvatar, {
-        children: member.userImage ? /*#__PURE__*/_jsx(Avatar, {
-          sx: {
-            width: "70px",
-            height: "70px",
-            "@media screen and (max-width: 768px)": {
-              width: "50px",
-              height: "50px"
-            },
-            marginRight: "15px"
-          },
-          src: member.userImage,
-          alt: "Member Avatar"
-        }) : /*#__PURE__*/_jsx(Avatar, {
-          sx: theme => ({
-            width: "70px",
-            height: "70px",
-            marginRight: "15px",
-            color: theme.palette.mode === "dark" ? theme.palette.background.default : ""
-          }),
-          alt: "Member Avatar",
-          children: /*#__PURE__*/_jsx(Person, {
-            fontSize: "large"
-          })
-        })
-      }), /*#__PURE__*/_jsx(ListItemText, {
-        primary: member?.username?.length > 18 ? member.username.substring(0, 18) + "..." : member.username,
-        slotProps: {
-          primary: {
-            fontWeight: 800,
-            fontSize: 22
-          }
-        }
-      }), isIconsVisible ? renderStreakIcon() : null, isIconsVisible ? renderIcon() : null, /*#__PURE__*/_jsx("div", {
-        style: {
-          minWidth: "60px",
-          textAlign: "right"
-        },
-        children: /*#__PURE__*/_jsx(ListItemText, {
-          primary: member.score,
-          slotProps: {
-            primary: {
-              fontWeight: 800,
-              fontSize: 26
-            }
-          }
-        })
-      })]
-    })
-  });
-}
-function MemberList(props) {
-  const {
-    t,
-    disableSubheader,
-    placeholderImageUrl,
-    isCreator,
-    isCourseMember,
-    members,
-    gameMembersHistory,
-    remainingQuestions,
-    numOfCorrectAnswers,
-    isIconsVisible,
-    showRoleplayLeaderboardIcons
-  } = props;
-  const theme = useTheme();
-  const root = {
-    textAlign: "center",
-    marginLeft: "auto",
-    marginRight: "auto",
-    width: "100%",
-    marginBottom: 10
-  };
-  let topThreeScores = [];
-  if (remainingQuestions.length === 1) {
-    topThreeScores = members.slice(0, 3).map(member => member.score);
-  }
-  if (!members) {
-    if (!props.t) {
-      return /*#__PURE__*/_jsx(List, {
-        children: /*#__PURE__*/_jsxs(_Fragment, {
-          children: [/*#__PURE__*/_jsxs(ListItem, {
-            children: [/*#__PURE__*/_jsx(ListItemAvatar, {
-              children: /*#__PURE__*/_jsx(Skeleton, {
-                variant: "circular",
-                width: 40,
-                height: 40
-              })
-            }), /*#__PURE__*/_jsx(Skeleton, {
-              variant: "text",
-              height: 40,
-              width: "100%"
-            })]
-          }), new Array(2).fill(null).map((item, index) => /*#__PURE__*/_jsx(Member, {}, index))]
-        })
-      });
-    } else {
-      return /*#__PURE__*/_jsx(List, {
-        sx: root,
-        subheader: !disableSubheader ? /*#__PURE__*/_jsx(ListSubheader, {
-          disableSticky: true,
-          component: "div",
-          id: "nested-list-subheader",
-          children: /*#__PURE__*/_jsx(Typography, {
-            variant: "h4",
-            component: "h3",
-            children: /*#__PURE__*/_jsx(Box, {
-              sx: {
-                fontWeight: "fontWeightBold"
-              },
-              children: t(remainingQuestions.length === 1 ? "final_results" : "leaderboard")
-            })
-          })
-        }) : null,
-        children: new Array(7).fill(null).map((item, index) => /*#__PURE__*/_jsx(Member, {}, index))
-      });
-    }
-  }
-  return /*#__PURE__*/_jsxs(List, {
-    sx: root,
-    subheader: !disableSubheader ? /*#__PURE__*/_jsx(ListSubheader, {
-      disableSticky: true,
-      component: "div",
-      id: "nested-list-subheader",
-      children: /*#__PURE__*/_jsx(Typography, {
-        variant: "h4",
-        component: "h3",
-        children: /*#__PURE__*/_jsx(Box, {
-          sx: {
-            fontWeight: "fontWeightBold",
-            color: theme.palette.mode === "dark" ? "white" : "black",
-            paddingBottom: 4
-          },
-          children: t(remainingQuestions.length === 1 ? "final_results" : "leaderboard")
-        })
-      })
-    }) : null,
-    children: [members.length === 0 && /*#__PURE__*/_jsx(MembersNotFound, {
-      t: t,
-      placeholderImageUrl: placeholderImageUrl
-    }), /*#__PURE__*/_jsx(Flipper, {
-      flipKey: members.map(m => m.memberId).join(","),
-      children: /*#__PURE__*/_jsx("div", {
-        className: "member-list",
-        children: members.map(member => /*#__PURE__*/_jsx(Flipped, {
-          flipId: member.memberId,
-          children: /*#__PURE__*/_jsx("div", {
-            children: /*#__PURE__*/_jsx(Member, {
-              member: member,
-              isCreator: isCreator,
-              isCourseMember: isCourseMember,
-              t: t,
-              lastTwoIndexes: gameMembersHistory.slice(-2).map(members => members.find(m => m.memberId === member.memberId)?.index),
-              lastFourScores: gameMembersHistory.slice(-4).map(members => members.find(m => m.memberId === member.memberId)?.score),
-              topThreeScores: topThreeScores,
-              remainingQuestions: remainingQuestions,
-              numOfCorrectAnswers: numOfCorrectAnswers,
-              isIconsVisible: isIconsVisible,
-              showRoleplayLeaderboardIcons: showRoleplayLeaderboardIcons,
-              lastThreeAnswerResults: gameMembersHistory.slice(-3).map(members => members.find(m => m.memberId === member.memberId)?.isCorrect)
-            })
-          })
-        }, member.memberId))
-      })
-    })]
-  });
-}
-function Leaderboard({
-  t,
-  members,
-  disableSubheader,
-  placeholderImageUrl,
-  isCreator,
-  isCourseMember,
-  setIsLeaderboardVisible,
-  remainingQuestions,
-  endGame,
-  handleNextExercise,
-  gameMembersHistory,
-  numOfCorrectAnswers,
-  isIconsVisible,
-  showRoleplayLeaderboardIcons,
-  exercise = "",
-  handleNext,
-  nextScriptLine,
-  setIsIconsVisible
-}) {
-  {
-    const sortedMembers = () => {
-      return members.slice().sort((a, b) => b.score - a.score);
-    };
-    return /*#__PURE__*/_jsxs(_Fragment, {
-      children: [/*#__PURE__*/_jsx(MemberList, {
-        t: t,
-        placeholderImageUrl: placeholderImageUrl,
-        members: sortedMembers(),
-        disableSubheader: disableSubheader,
-        isCreator: isCreator,
-        isCourseMember: isCourseMember,
-        gameMembersHistory: gameMembersHistory,
-        remainingQuestions: remainingQuestions,
-        numOfCorrectAnswers: numOfCorrectAnswers,
-        isIconsVisible: isIconsVisible,
-        showRoleplayLeaderboardIcons: showRoleplayLeaderboardIcons
-      }), /*#__PURE__*/_jsx(Box, {
-        sx: {
-          textAlign: "center",
-          position: "fixed",
-          bottom: 20,
-          left: 0,
-          width: "100%",
-          zIndex: 1000
-        },
-        children: exercise.includes("roleplay") ? /*#__PURE__*/_jsx(Fab, {
-          disabled: !isIconsVisible,
-          variant: "extended",
-          color: "primary",
-          sx: {
-            marginTop: 5
-          },
-          onClick: () => {
-            if (remainingQuestions.length > 1) {
-              handleNext(nextScriptLine);
-              setIsLeaderboardVisible(false);
-              setIsIconsVisible(false);
-            } else {
-              endGame();
-            }
-          },
-          children: t(remainingQuestions.length > 1 ? "next_question" : "end_game")
-        }) : /*#__PURE__*/_jsx(Fab, {
-          disabled: !isIconsVisible,
-          variant: "extended",
-          color: "primary",
-          sx: {
-            marginTop: 5
-          },
-          onClick: () => remainingQuestions.length > 1 ? handleNextExercise() : endGame(),
-          children: t(remainingQuestions.length > 1 ? "next_question" : "end_game")
-        })
-      })]
-    });
-  }
-}
-Leaderboard.propTypes = {
-  members: PropTypes.arrayOf(PropTypes.shape({
-    memberId: PropTypes.string.isRequired,
-    username: PropTypes.string.isRequired,
-    createdAt: PropTypes.number.isRequired
-  }))
-};
-export default Leaderboard;

package/dist/Lists/Leaderboard/package.json

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

package/dist/Lists/ListElements/index.js

@@ -1,35 +0,0 @@
-import { Grid, ImageList, ImageListItem } from "@mui/material";
-import { styled } from "@mui/system";
-const SingleLineGridList = styled(ImageList)(() => ({
-  gridAutoFlow: "column",
-  display: "flex",
-  justifyContent: "flex-start"
-}));
-const minWidth = {
-  xs: 330,
-  sm: 360
-};
-const SingleLineGridListItem = styled(ImageListItem)(({
-  theme
-}) => ({
-  [theme.breakpoints.up("sm")]: {
-    minWidth: minWidth.sm,
-    width: minWidth.sm
-  },
-  minWidth: minWidth.xs,
-  width: minWidth.xs,
-  // Stop flex overwriting
-  height: "auto",
-  padding: theme.spacing(0.75, 0.75, 2, 0.75),
-  flex: "0 0 auto"
-}));
-const GridListItem = styled(Grid)(({
-  theme
-}) => ({
-  [theme.breakpoints.up("sm")]: {
-    minWidth: minWidth.sm
-  },
-  minWidth: minWidth.xs,
-  height: "auto"
-}));
-export { SingleLineGridList, SingleLineGridListItem, GridListItem };