@nualang/nualang-ui-components 0.1.1399 → 0.2.0

package/dist/Lists/Sections/Sections.js

@@ -1,238 +0,0 @@
-import { useState } from "react";
-import Grid from "@mui/material/Grid";
-import Typography from "@mui/material/Typography";
-import Box from "@mui/material/Box";
-import Divider from "@mui/material/Divider";
-import Skeleton from "@mui/material/Skeleton";
-import Button from "@mui/material/Button";
-import { makeStyles } from "tss-react/mui";
-import AddIcon from "@mui/icons-material/Add";
-import DeleteIcon from "@mui/icons-material/Delete";
-
-// components
-import TopicList from "../Topics/Topics";
-import CreateTopicDialog from "../../Dialogs/CreateTopic/CreateTopic";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-const useStyles = makeStyles()(theme => ({
-  marginBottom: {
-    marginBottom: theme.spacing(3)
-  },
-  button: {
-    margin: theme.spacing(1)
-  },
-  rightIcon: {
-    marginLeft: theme.spacing(1)
-  },
-  green: {
-    backgroundColor: theme.palette.success.main,
-    color: theme.palette.getContrastText(theme.palette.success.main),
-    "&:hover": {
-      backgroundColor: theme.palette.success.dark
-    }
-  },
-  red: {
-    backgroundColor: theme.palette.error.main,
-    color: theme.palette.error.contrastText,
-    "&:hover": {
-      backgroundColor: theme.palette.error.dark
-    }
-  },
-  gridListItemRoot: {
-    [theme.breakpoints.up("sm")]: {
-      minWidth: 380
-    },
-    height: "auto",
-    minWidth: 320
-  }
-}));
-function Section({
-  t = text => text,
-  courseId,
-  section,
-  handleDeleteCourseSection,
-  handleCreateCourseSectionTopic,
-  handleDeleteCourseSectionTopic,
-  handleViewCourseTopic,
-  isPublic,
-  handleSwitchChange,
-  isCreator = false,
-  isMember = false,
-  ...otherProps
-}) {
-  const {
-    classes
-  } = useStyles();
-  const initialTopicState = {
-    topicName: "",
-    description: "",
-    difficulty: "A1"
-  };
-  const [topic, setTopic] = useState(initialTopicState);
-  const [isCreateSectionTopicModalOpen, setIsCreateSectionTopicModalOpen] = useState(false);
-  if (!section) {
-    return /*#__PURE__*/_jsxs(Grid, {
-      className: classes.marginBottom,
-      size: 12,
-      children: [/*#__PURE__*/_jsx(Typography, {
-        variant: "h6",
-        component: "h2",
-        gutterBottom: true,
-        children: /*#__PURE__*/_jsx(Skeleton, {
-          variant: "rectangular",
-          height: 30,
-          width: 90
-        })
-      }), /*#__PURE__*/_jsx(Divider, {}), /*#__PURE__*/_jsx(Box, {
-        sx: {
-          py: 1
-        },
-        children: /*#__PURE__*/_jsx(TopicList, {
-          topics: null,
-          handleViewCourseTopic: handleViewCourseTopic
-        })
-      })]
-    });
-  }
-  const {
-    sectionId,
-    sectionName,
-    topics
-  } = section;
-  const handleTopicChange = event => {
-    const value = event.target.value;
-    const name = event.target.name;
-    setTopic(prevTopic => ({
-      ...prevTopic,
-      [name]: value
-    }));
-  };
-  const handleOpenCreateSectionTopicModal = () => setIsCreateSectionTopicModalOpen(true);
-  const handleCloseCreateSectionTopicModal = () => setIsCreateSectionTopicModalOpen(false);
-  const handleAddSectionTopic = async () => {
-    await handleCreateCourseSectionTopic(courseId, sectionId, topic);
-    setTopic(initialTopicState);
-    handleCloseCreateSectionTopicModal();
-  };
-  return /*#__PURE__*/_jsxs(Grid, {
-    className: classes.marginBottom,
-    size: 12,
-    children: [/*#__PURE__*/_jsxs(Box, {
-      sx: {
-        display: "flex",
-        alignItems: "center"
-      },
-      children: [/*#__PURE__*/_jsx(Box, {
-        sx: {
-          flexGrow: 1
-        },
-        children: /*#__PURE__*/_jsx(Typography, {
-          variant: "h6",
-          component: "h2",
-          id: sectionId,
-          gutterBottom: true,
-          children: sectionName
-        })
-      }), isCreator && /*#__PURE__*/_jsxs(Box, {
-        children: [/*#__PURE__*/_jsxs(Button, {
-          className: `${classes.button} ${classes.green}`,
-          variant: "contained",
-          onClick: handleOpenCreateSectionTopicModal,
-          children: [t("topic"), /*#__PURE__*/_jsx(AddIcon, {
-            className: classes.rightIcon
-          })]
-        }), /*#__PURE__*/_jsxs(Button, {
-          className: `${classes.button} ${classes.red}`,
-          variant: "contained",
-          onClick: () => handleDeleteCourseSection(courseId, sectionId),
-          children: [t("section"), /*#__PURE__*/_jsx(DeleteIcon, {
-            className: classes.rightIcon
-          })]
-        })]
-      })]
-    }), /*#__PURE__*/_jsx(Divider, {}), /*#__PURE__*/_jsx(Box, {
-      sx: {
-        py: 1
-      },
-      children: /*#__PURE__*/_jsx(TopicList, {
-        t: t,
-        topics: topics,
-        isCreator: isCreator,
-        isMember: isMember,
-        courseId: courseId,
-        sectionId: sectionId,
-        handleDeleteCourseSectionTopic: handleDeleteCourseSectionTopic,
-        handleViewCourseTopic: handleViewCourseTopic,
-        ...otherProps
-      })
-    }), /*#__PURE__*/_jsx(CreateTopicDialog, {
-      t: t,
-      sectionId: sectionId,
-      sectionName: sectionName,
-      isPublic: isPublic,
-      handleSwitchChange: handleSwitchChange,
-      topic: topic,
-      handleInputChange: handleTopicChange,
-      open: isCreateSectionTopicModalOpen,
-      handleClose: handleCloseCreateSectionTopicModal,
-      handleSubmit: handleAddSectionTopic
-    })]
-  });
-}
-function SectionList({
-  sections,
-  isMember = false,
-  ...otherProps
-}) {
-  const {
-    classes
-  } = useStyles();
-  if (!sections) {
-    return /*#__PURE__*/_jsx(Grid, {
-      container: true,
-      sx: {
-        width: "100%"
-      },
-      spacing: 1,
-      children: new Array(3).fill(null).map((item, index) => /*#__PURE__*/_jsx(Grid, {
-        className: classes.gridListItemRoot,
-        size: {
-          xs: 12,
-          sm: 6,
-          md: 4,
-          lg: 4,
-          xl: 3
-        },
-        children: /*#__PURE__*/_jsx(Section, {}, index)
-      }, index))
-    });
-  }
-  return isMember && /*#__PURE__*/_jsx(Grid, {
-    container: true,
-    sx: {
-      width: "100%"
-    },
-    spacing: 1,
-    children: sections.map((section, index) => /*#__PURE__*/_jsx(Grid, {
-      className: classes.gridListItemRoot,
-      size: {
-        xs: 12,
-        sm: 6,
-        md: 4,
-        lg: 4,
-        xl: 3
-      },
-      children: /*#__PURE__*/_jsx(Section, {
-        section: section,
-        ...otherProps
-      }, section.sectionId)
-    }, index))
-  });
-}
-function Sections(props) {
-  return /*#__PURE__*/_jsx(_Fragment, {
-    children: /*#__PURE__*/_jsx(SectionList, {
-      ...props
-    })
-  });
-}
-export default Sections;

package/dist/Lists/Sections/Sections.test.js

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

package/dist/Lists/Sections/package.json

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

package/dist/Lists/SubscriptionPlans/SubscriptionPlans.js

@@ -1,49 +0,0 @@
-import PropTypes from "prop-types";
-import { Grid } from "@mui/material";
-// components
-import SubscriptionPlanCard from "../../Cards/SubscriptionPlan/SubscriptionPlan";
-import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-function SubscriptionPlanList({
-  t = text => text,
-  plans,
-  ...otherProps
-}) {
-  const renderPlanCard = plan => {
-    return /*#__PURE__*/_jsx(SubscriptionPlanCard, {
-      t: t,
-      plan: plan,
-      ...otherProps
-    }, plan.title);
-  };
-  return /*#__PURE__*/_jsx(_Fragment, {
-    children: /*#__PURE__*/_jsx(Grid, {
-      container: true,
-      spacing: 2,
-      sx: {
-        alignItems: "flex-start",
-        justifyContent: "center"
-      },
-      children: plans.map((plan, i) => {
-        return /*#__PURE__*/_jsx(Grid, {
-          size: {
-            xs: 12,
-            sm: 6,
-            md: 4
-          },
-          children: renderPlanCard(plan)
-        }, `${plan.title}-${i}`);
-      })
-    })
-  });
-}
-function SubscriptionPlans(props) {
-  return /*#__PURE__*/_jsx(_Fragment, {
-    children: /*#__PURE__*/_jsx(SubscriptionPlanList, {
-      ...props
-    })
-  });
-}
-SubscriptionPlans.propTypes = {
-  plans: PropTypes.arrayOf(PropTypes.shape(SubscriptionPlanCard.propTypes.plan))
-};
-export default SubscriptionPlans;

package/dist/Lists/SubscriptionPlans/SubscriptionPlans.test.js

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

package/dist/Lists/SubscriptionPlans/package.json

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

package/dist/Lists/Timeline/EventItem.js

@@ -1,154 +0,0 @@
-import PropTypes from "prop-types";
-import { withStyles } from "tss-react/mui";
-import { IconButton, ListItemAvatar, ListItemSecondaryAction, ListItemText, ListItem } from "@mui/material";
-import RecordVoiceOver from "@mui/icons-material/RecordVoiceOver";
-import SwapHoriz from "@mui/icons-material/SwapHoriz";
-import Hearing from "@mui/icons-material/Hearing";
-import Forum from "@mui/icons-material/Forum";
-import Face from "@mui/icons-material/Face";
-import ArrowForward from "@mui/icons-material/ArrowForward";
-import AutoStories from "@mui/icons-material/AutoStories";
-import SpaceBar from "@mui/icons-material/SpaceBar";
-import Headphones from "@mui/icons-material/Headphones";
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-const styles = () => ({
-  inline: {
-    display: "inline"
-  }
-});
-const ActItOutListeningSpeaking = () => /*#__PURE__*/_jsxs(_Fragment, {
-  children: [/*#__PURE__*/_jsx(Headphones, {
-    fontSize: "small",
-    color: "primary"
-  }), /*#__PURE__*/_jsx(RecordVoiceOver, {
-    fontSize: "small",
-    color: "primary"
-  })]
-});
-function label({
-  t,
-  exercise,
-  roleplayName,
-  botName,
-  topicName,
-  labelKey
-}) {
-  if (exercise.startsWith("roleplay")) {
-    return t(labelKey, {
-      exercise: t(exercise),
-      id: t(roleplayName)
-    });
-  }
-  if (exercise === "bot") {
-    return t(labelKey, {
-      exercise: t(exercise),
-      id: t(botName)
-    });
-  }
-  return t(labelKey, {
-    exercise: t(exercise),
-    id: t(topicName)
-  });
-}
-function Icon({
-  exercise
-}) {
-  if (exercise === "roleplay" || exercise === "roleplay-act-it-out") {
-    return /*#__PURE__*/_jsx(Forum, {
-      color: "primary"
-    });
-  }
-  if (exercise === "roleplay-story") {
-    return /*#__PURE__*/_jsx(AutoStories, {
-      color: "primary"
-    });
-  }
-  if (exercise === "roleplay-fill-in-the-blanks") {
-    return /*#__PURE__*/_jsx(SpaceBar, {
-      color: "primary"
-    });
-  }
-  if (exercise === "roleplay-act-it-out-listening") {
-    return /*#__PURE__*/_jsx(Headphones, {
-      color: "primary"
-    });
-  }
-  if (exercise === "roleplay-act-it-out-speaking") {
-    return /*#__PURE__*/_jsx(RecordVoiceOver, {
-      color: "primary"
-    });
-  }
-  if (exercise === "roleplay-act-it-out-listening-speaking") {
-    return /*#__PURE__*/_jsx(ActItOutListeningSpeaking, {
-      color: "primary"
-    });
-  }
-  if (exercise === "bot") {
-    return /*#__PURE__*/_jsx(Face, {
-      color: "primary"
-    });
-  }
-  if (exercise === "translation") {
-    return /*#__PURE__*/_jsx(SwapHoriz, {
-      color: "primary"
-    });
-  }
-  if (exercise === "listening") {
-    return /*#__PURE__*/_jsx(Hearing, {
-      color: "primary"
-    });
-  }
-  if (exercise === "pronunciation") {
-    return /*#__PURE__*/_jsx(RecordVoiceOver, {
-      color: "primary"
-    });
-  }
-  return null;
-}
-function EventItem({
-  t = text => text,
-  classes,
-  event,
-  handleViewEvent,
-  labelKey = "exercise_completion"
-}) {
-  return /*#__PURE__*/_jsxs(ListItem, {
-    alignItems: "flex-start",
-    children: [/*#__PURE__*/_jsx(ListItemAvatar, {
-      children: /*#__PURE__*/_jsx(Icon, {
-        exercise: event.exercise
-      })
-    }), /*#__PURE__*/_jsx(ListItemText, {
-      primary: /*#__PURE__*/_jsxs("div", {
-        className: classes.inline,
-        children: [/*#__PURE__*/_jsx("strong", {
-          children: event.preferred_username ? event.preferred_username : "Anonymous"
-        }), " ", label({
-          t,
-          labelKey,
-          ...event
-        })]
-      }),
-      secondary: new Date(event.createdAt).toLocaleString()
-    }), handleViewEvent && /*#__PURE__*/_jsx(ListItemSecondaryAction, {
-      onClick: () => handleViewEvent(event),
-      "data-cy": "event-list-item",
-      children: /*#__PURE__*/_jsx(IconButton, {
-        "aria-label": `View ${event.preferred_username ? event.preferred_username : "Anonymous"} ${label({
-          t,
-          labelKey,
-          ...event
-        })}`,
-        "data-cy": "event-list-item-icon",
-        size: "large",
-        children: /*#__PURE__*/_jsx(ArrowForward, {
-          "data-cy": "event-list-item-arrow"
-        })
-      })
-    })]
-  });
-}
-EventItem.propTypes = {
-  classes: PropTypes.object.isRequired
-};
-export default withStyles(EventItem, styles);

package/dist/Lists/Timeline/EventList.js

@@ -1,34 +0,0 @@
-import PropTypes from "prop-types";
-import { withStyles } from "tss-react/mui";
-import { List, Card } from "@mui/material";
-import EventItem from "./EventItem";
-import { jsx as _jsx } from "react/jsx-runtime";
-const styles = theme => ({
-  root: {
-    width: "100%",
-    backgroundColor: theme.palette.background.paper
-  }
-});
-function EventList({
-  t = text => text,
-  classes,
-  events = [],
-  handleViewEvent,
-  labelKey = "exercise_completion"
-}) {
-  return /*#__PURE__*/_jsx(Card, {
-    className: classes.root,
-    children: /*#__PURE__*/_jsx(List, {
-      children: events.map((event, index) => /*#__PURE__*/_jsx(EventItem, {
-        t: t,
-        event: event,
-        handleViewEvent: handleViewEvent,
-        labelKey: labelKey
-      }, index))
-    })
-  });
-}
-EventList.propTypes = {
-  classes: PropTypes.object.isRequired
-};
-export default withStyles(EventList, styles);

package/dist/Lists/Timeline/TimelineLoaded.js

@@ -1,65 +0,0 @@
-import Typography from "@mui/material/Typography";
-import { withStyles } from "tss-react/mui";
-import EventList from "./EventList";
-import groupByDay from "./groupByDay";
-import DefaultButton from "../../Misc/DefaultColourButton/DefaultColourButton";
-import { Skeleton } from "@mui/material";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const styles = {
-  day: {
-    marginBottom: "1em"
-  }
-};
-const getDayString = date => new Date(date).toLocaleDateString(undefined, {
-  weekday: "long",
-  year: "numeric",
-  month: "long",
-  day: "numeric"
-});
-const TimelineLoadedView = ({
-  t = text => text,
-  events = [],
-  handleLoadMore,
-  total,
-  classes,
-  handleViewEvent,
-  labelKey = "exercise_completion",
-  isLoading
-}) => {
-  const {
-    days,
-    eventsByDay
-  } = groupByDay(events);
-  if (!isLoading && days.length === 0) {
-    return /*#__PURE__*/_jsx(Typography, {
-      children: t("no_activity_found")
-    });
-  }
-  return /*#__PURE__*/_jsxs("div", {
-    children: [isLoading ? /*#__PURE__*/_jsx(Skeleton, {
-      variant: "rectangular",
-      height: 32,
-      width: 250
-    }) : days.map(day => /*#__PURE__*/_jsxs("div", {
-      className: classes.day,
-      children: [/*#__PURE__*/_jsx(Typography, {
-        variant: "subtitle1",
-        component: "h3",
-        gutterBottom: true,
-        children: getDayString(day)
-      }), /*#__PURE__*/_jsx(EventList, {
-        t: t,
-        events: eventsByDay[day],
-        handleViewEvent: handleViewEvent,
-        labelKey: labelKey
-      })]
-    }, day)), events.length < total && /*#__PURE__*/_jsx(DefaultButton, {
-      variant: "contained",
-      onClick: handleLoadMore,
-      "data-cy": "button-load-more-events",
-      children: t("load_more_events")
-    })]
-  });
-};
-const TimelineLoaded = withStyles(TimelineLoadedView, styles);
-export default TimelineLoaded;

package/dist/Lists/Timeline/groupByDay.js

@@ -1,24 +0,0 @@
-const sortByDate = (a, b) => new Date(b).valueOf() - new Date(a).valueOf();
-const getDayForEvent = event => {
-  const date = new Date(event.createdAt);
-  date.setMilliseconds(0);
-  date.setSeconds(0);
-  date.setMinutes(0);
-  date.setHours(0);
-  return date.toISOString();
-};
-const groupByDay = events => {
-  const groups = events.reduce((days, event) => {
-    const day = getDayForEvent(event);
-    if (!days[day]) {
-      days[day] = [];
-    }
-    days[day] = days[day].concat(event);
-    return days;
-  }, {});
-  return {
-    days: Object.keys(groups).sort(sortByDate),
-    eventsByDay: groups
-  };
-};
-export default groupByDay;