@nualang/nualang-ui-components 0.1.1399 → 0.2.0

package/dist/Navigation/ResponsiveStepper/ResponsiveStepper.js

@@ -1,253 +0,0 @@
-import { useState } from "react";
-import { makeStyles } from "tss-react/mui";
-import Card from "@mui/material/Card";
-import CardContent from "@mui/material/CardContent";
-import Stepper from "@mui/material/Stepper";
-import Step from "@mui/material/Step";
-import StepLabel from "@mui/material/StepLabel";
-import StepContent from "@mui/material/StepContent";
-import Button from "@mui/material/Button";
-import Paper from "@mui/material/Paper";
-import Typography from "@mui/material/Typography";
-import { useMediaQuery } from "@mui/material";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-const useStyles = makeStyles()(theme => ({
-  root: {
-    width: "100%"
-  },
-  button: {
-    marginTop: theme.spacing(1),
-    marginRight: theme.spacing(1)
-  },
-  actionsContainer: {
-    marginBottom: theme.spacing(2)
-  },
-  resetContainer: {
-    padding: theme.spacing(3)
-  },
-  instructions: {
-    marginTop: theme.spacing(1),
-    marginBottom: theme.spacing(1)
-  },
-  stepper: {
-    boxShadow: "0px 1px 5px 0px rgba(0,0,0,0.2), 0px 2px 2px 0px rgba(0,0,0,0.14), 0px 3px 1px -2px rgba(0,0,0,0.12)",
-    padding: theme.spacing(2)
-  },
-  card: {
-    marginTop: theme.spacing(2),
-    marginBottom: theme.spacing(2)
-  }
-}));
-function SkipButton({
-  t,
-  classes,
-  handleSkip
-}) {
-  return /*#__PURE__*/_jsx(Button, {
-    variant: "contained",
-    color: "primary",
-    onClick: handleSkip,
-    className: classes.button,
-    children: t("skip")
-  });
-}
-function NextButton({
-  t,
-  classes,
-  activeStep,
-  steps,
-  handleNext,
-  handleSubmit
-}) {
-  if (activeStep === steps.length - 1) {
-    return /*#__PURE__*/_jsx(Button, {
-      variant: "contained",
-      color: "primary",
-      onClick: handleSubmit,
-      className: classes.button,
-      children: t("finish")
-    });
-  }
-  return /*#__PURE__*/_jsx(Button, {
-    variant: "contained",
-    color: "primary",
-    onClick: handleNext,
-    className: classes.button,
-    children: t("next")
-  });
-}
-export default function ResponsiveStepper({
-  getSteps,
-  getStepContent,
-  ...otherProps
-}) {
-  const {
-    classes
-  } = useStyles();
-  const [activeStep, setActiveStep] = useState(0);
-  const [skipped, setSkipped] = useState(new Set());
-  const t = otherProps.t;
-  const steps = getSteps(t);
-  function isStepOptional(step) {
-    return step === 1;
-  }
-  function isStepSkipped(step) {
-    return skipped.has(step);
-  }
-  function handleNext() {
-    let newSkipped = skipped;
-    if (isStepSkipped(activeStep)) {
-      newSkipped = new Set(newSkipped.values());
-      newSkipped.delete(activeStep);
-    }
-    setActiveStep(prevActiveStep => prevActiveStep + 1);
-    setSkipped(newSkipped);
-  }
-  function handleBack() {
-    setActiveStep(prevActiveStep => prevActiveStep - 1);
-  }
-  function handleSkip() {
-    if (!isStepOptional(activeStep)) {
-      // You probably want to guard against something like this,
-      // it should never occur unless someone's actively trying to break something.
-      throw new Error("You can't skip a step that isn't optional.");
-    }
-    setActiveStep(prevActiveStep => prevActiveStep + 1);
-    setSkipped(prevSkipped => {
-      const newSkipped = new Set(prevSkipped.values());
-      newSkipped.add(activeStep);
-      return newSkipped;
-    });
-  }
-  function handleReset() {
-    setActiveStep(0);
-  }
-  const hiddenUp = useMediaQuery(theme => theme.breakpoints.up("md"));
-  const hiddenDown = useMediaQuery(theme => theme.breakpoints.down("md"));
-  return /*#__PURE__*/_jsxs("div", {
-    className: classes.root,
-    children: [hiddenUp ? null : /*#__PURE__*/_jsxs(_Fragment, {
-      children: [/*#__PURE__*/_jsx(Stepper, {
-        activeStep: activeStep,
-        orientation: "vertical",
-        children: steps.map((label, index) => {
-          const stepProps = {};
-          const labelProps = {};
-          if (isStepOptional(index)) {
-            labelProps.optional = /*#__PURE__*/_jsx(Typography, {
-              variant: "caption",
-              children: t("optional")
-            });
-          }
-          if (isStepSkipped(index)) {
-            stepProps.completed = false;
-          }
-          return /*#__PURE__*/_jsxs(Step, {
-            ...stepProps,
-            children: [/*#__PURE__*/_jsx(StepLabel, {
-              ...labelProps,
-              children: label
-            }), /*#__PURE__*/_jsxs(StepContent, {
-              children: [/*#__PURE__*/_jsx(Typography, {
-                children: getStepContent(index, otherProps)
-              }), /*#__PURE__*/_jsx("div", {
-                className: classes.actionsContainer,
-                children: /*#__PURE__*/_jsxs("div", {
-                  children: [/*#__PURE__*/_jsx(Button, {
-                    disabled: activeStep === 0,
-                    onClick: handleBack,
-                    className: classes.button,
-                    children: t("back")
-                  }), isStepOptional(activeStep) && /*#__PURE__*/_jsx(SkipButton, {
-                    t: t,
-                    classes: classes,
-                    handleSkip: handleSkip
-                  }), /*#__PURE__*/_jsx(NextButton, {
-                    t: t,
-                    classes: classes,
-                    activeStep: activeStep,
-                    steps: steps,
-                    handleNext: handleNext
-                  })]
-                })
-              })]
-            })]
-          }, label);
-        })
-      }), activeStep === steps.length && /*#__PURE__*/_jsxs(Paper, {
-        square: true,
-        elevation: 0,
-        className: classes.resetContainer,
-        children: [/*#__PURE__*/_jsx(Typography, {
-          children: t("all_steps_complete")
-        }), /*#__PURE__*/_jsx(Button, {
-          onClick: handleReset,
-          className: classes.button,
-          children: t("reset")
-        })]
-      })]
-    }), hiddenDown ? null : /*#__PURE__*/_jsxs(_Fragment, {
-      children: [/*#__PURE__*/_jsx(Stepper, {
-        className: classes.stepper,
-        activeStep: activeStep,
-        children: steps.map((label, index) => {
-          const stepProps = {};
-          const labelProps = {};
-          if (isStepOptional(index)) {
-            labelProps.optional = /*#__PURE__*/_jsx(Typography, {
-              variant: "caption",
-              children: t("optional")
-            });
-          }
-          if (isStepSkipped(index)) {
-            stepProps.completed = false;
-          }
-          return /*#__PURE__*/_jsx(Step, {
-            ...stepProps,
-            children: /*#__PURE__*/_jsx(StepLabel, {
-              ...labelProps,
-              children: label
-            })
-          }, label);
-        })
-      }), /*#__PURE__*/_jsx(Card, {
-        className: classes.card,
-        children: /*#__PURE__*/_jsx(CardContent, {
-          children: activeStep === steps.length ? /*#__PURE__*/_jsxs("div", {
-            children: [/*#__PURE__*/_jsx(Typography, {
-              className: classes.instructions,
-              children: t("all_steps_complete")
-            }), /*#__PURE__*/_jsx(Button, {
-              onClick: handleReset,
-              className: classes.button,
-              children: t("reset")
-            })]
-          }) : /*#__PURE__*/_jsx("div", {
-            children: /*#__PURE__*/_jsx(Typography, {
-              className: classes.instructions,
-              children: getStepContent(activeStep, otherProps)
-            })
-          })
-        })
-      }), activeStep !== steps.length && /*#__PURE__*/_jsxs("div", {
-        children: [/*#__PURE__*/_jsx(Button, {
-          disabled: activeStep === 0,
-          onClick: handleBack,
-          className: classes.button,
-          children: t("back")
-        }), isStepOptional(activeStep) && /*#__PURE__*/_jsx(SkipButton, {
-          t: t,
-          classes: classes,
-          handleSkip: handleSkip
-        }), /*#__PURE__*/_jsx(NextButton, {
-          t: t,
-          classes: classes,
-          activeStep: activeStep,
-          steps: steps,
-          handleNext: handleNext,
-          handleSubmit: otherProps.handleSubmit
-        })]
-      })]
-    })]
-  });
-}

package/dist/Navigation/ResponsiveStepper/ResponsiveStepper.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 ResponsiveStepper from "./ResponsiveStepper";
-import { props } from "./ResponsiveStepper.stories";
-import { jsx as _jsx } from "react/jsx-runtime";
-describe("ResponsiveStepper", () => {
-  it("renders without crashing", () => {
-    const theme = createTheme();
-    const {
-      unmount
-    } = render(/*#__PURE__*/_jsx(ThemeProvider, {
-      theme: theme,
-      children: /*#__PURE__*/_jsx(ResponsiveStepper, {
-        ...props
-      })
-    }));
-    unmount();
-  });
-});

package/dist/Navigation/ResponsiveStepper/package.json

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

package/dist/Navigation/ResponsiveTabs/ResponsiveTabs.js

@@ -1,379 +0,0 @@
-import { useEffect, useState } from "react";
-import PropTypes from "prop-types";
-import { Link } from "react-router";
-import SwipeableViews from "react-swipeable-views";
-import AppBar from "@mui/material/AppBar";
-import Tooltip from "@mui/material/Tooltip";
-import Tabs from "@mui/material/Tabs";
-import Tab from "@mui/material/Tab";
-import Zoom from "@mui/material/Zoom";
-import Fab from "@mui/material/Fab";
-import Divider from "@mui/material/Divider";
-import useMediaQuery from "@mui/material/useMediaQuery";
-import FabContainer from "../../Misc/FabContainer/FabContainer";
-// styles
-import { useTheme } from "@mui/material/styles";
-import { makeStyles } from "tss-react/mui";
-import Typography from "@mui/material/Typography";
-import NewText from "../../img/NewText.svg";
-import { Joyride, STATUS } from "react-joyride";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-function TabPanel(props) {
-  const {
-    children,
-    value,
-    index,
-    ...other
-  } = props;
-  return /*#__PURE__*/_jsx(Typography, {
-    component: "div",
-    role: "tabpanel",
-    hidden: value !== index,
-    id: `simple-tabpanel-${index}`,
-    "aria-label": `simple-tab-${index}`,
-    ...other,
-    children: children
-  });
-}
-TabPanel.propTypes = {
-  children: PropTypes.node,
-  index: PropTypes.any.isRequired,
-  value: PropTypes.any.isRequired
-};
-const useStyles = makeStyles()(() => ({
-  root: {
-    flexGrow: 1
-  }
-}));
-function ResponsiveTabs({
-  children,
-  dir = "ltr",
-  isSwipeable,
-  scrollable,
-  centered = false,
-  appbar = false,
-  divider = true,
-  tabs = [],
-  fabs = [],
-  initialValue = 0,
-  disableHashParams = false,
-  overwriteValue,
-  t,
-  isCreator,
-  isVideoChatEnabled,
-  isVideoChatEnabledInSettings,
-  setOverwriteValue,
-  hasNewAssignments
-}) {
-  const theme = useTheme();
-  const {
-    classes
-  } = useStyles();
-  const [value, setValue] = useState(initialValue);
-  const handleChange = (event, value) => {
-    setValue(value);
-  };
-  useEffect(() => {
-    if (overwriteValue) {
-      setValue(overwriteValue);
-      setOverwriteValue(null);
-    }
-  }, [overwriteValue]);
-  const handleChangeIndex = index => setValue(index);
-  const transitionDuration = {
-    enter: theme.transitions.duration.enteringScreen,
-    exit: theme.transitions.duration.leavingScreen
-  };
-  const isSmallScreen = useMediaQuery(theme.breakpoints.down("md"));
-  const variant = isSmallScreen ? scrollable ? "scrollable" : "fullWidth" : null;
-  const TabsRow = /*#__PURE__*/_jsx(Tabs, {
-    value: value,
-    onChange: handleChange,
-    indicatorColor: "primary",
-    textColor: "primary",
-    variant: variant,
-    scrollButtons: scrollable ? true : false,
-    centered: variant === "scrollable" ? false : centered,
-    sx: {
-      "@media print": {
-        display: "none"
-      }
-    },
-    children: tabs.map(({
-      label,
-      disabled,
-      id
-    }) => id === "Assignments" && hasNewAssignments && !isCreator && !localStorage.getItem("remove-assignment-new-tag") ? /*#__PURE__*/_jsx(Tab, {
-      icon: /*#__PURE__*/_jsx("img", {
-        src: NewText,
-        style: {
-          width: "45px",
-          marginTop: "-20px",
-          marginLeft: "-5px"
-        },
-        alt: "New Text"
-      }),
-      iconPosition: "end",
-      id: id,
-      label: label,
-      disabled: disabled,
-      onClick: () => {
-        if (!disableHashParams) {
-          window.history.replaceState(null, null, `#${id}`);
-        }
-      },
-      sx: {
-        paddingLeft: "45px"
-      },
-      "data-cy": `${id}-tab`
-    }, `responsivetabs_${id}`) : /*#__PURE__*/_jsx(Tab, {
-      id: id,
-      label: label,
-      disabled: disabled,
-      onClick: () => {
-        if (!disableHashParams) {
-          window.history.replaceState(null, null, `#${id}`);
-        }
-      },
-      "data-cy": `${id}-tab`
-    }, `responsivetabs_${id}`))
-  });
-  const joyrideSteps = [{
-    content: /*#__PURE__*/_jsx("h2", {
-      children: t("discuss_welcome")
-    }),
-    placement: "center",
-    target: "body"
-  }, {
-    content: /*#__PURE__*/_jsxs("div", {
-      children: [/*#__PURE__*/_jsx("h2", {
-        children: t("discuss_scheduled_discussions")
-      }), /*#__PURE__*/_jsx("br", {}), /*#__PURE__*/_jsx("p", {
-        children: t("discuss_scheduled_discussions_desc")
-      })]
-    }),
-    spotlightPadding: 8,
-    target: "#discussScheduled"
-  }, {
-    content: /*#__PURE__*/_jsxs("div", {
-      children: [/*#__PURE__*/_jsx("h2", {
-        children: t("discuss_refresh_discussions")
-      }), /*#__PURE__*/_jsx("br", {}), /*#__PURE__*/_jsx("p", {
-        children: t("discuss_refresh_discussions_desc")
-      })]
-    }),
-    spotlightPadding: 8,
-    target: "#discussRefreshScheduled"
-  }, {
-    content: /*#__PURE__*/_jsxs("div", {
-      children: [/*#__PURE__*/_jsx("h2", {
-        children: t("discuss_recorded_discussions")
-      }), /*#__PURE__*/_jsx("br", {}), /*#__PURE__*/_jsx("p", {
-        children: t("discuss_recorded_discussions_desc")
-      })]
-    }),
-    spotlightPadding: 8,
-    target: "#discussRecorded"
-  }];
-  const creatorJoyrideSteps = [{
-    content: /*#__PURE__*/_jsx("h2", {
-      children: t("discuss_welcome")
-    }),
-    placement: "center",
-    target: "body"
-  }, {
-    content: /*#__PURE__*/_jsxs("div", {
-      children: [/*#__PURE__*/_jsx("h2", {
-        children: t("discuss_grouped_discussions")
-      }), /*#__PURE__*/_jsx("br", {}), /*#__PURE__*/_jsx("p", {
-        children: t("discuss_grouped_discussions_desc")
-      })]
-    }),
-    spotlightPadding: 8,
-    target: "#discussGroupedDiscussions"
-  }, {
-    content: /*#__PURE__*/_jsxs("div", {
-      children: [/*#__PURE__*/_jsx("h2", {
-        children: t("discuss_refresh_discussions")
-      }), /*#__PURE__*/_jsx("br", {}), /*#__PURE__*/_jsx("p", {
-        children: t("discuss_refresh_discussions_desc")
-      })]
-    }),
-    spotlightPadding: 8,
-    target: "#discussRefreshScheduled"
-  }, {
-    content: /*#__PURE__*/_jsxs("div", {
-      children: [/*#__PURE__*/_jsx("h2", {
-        children: t("discuss_submissions")
-      }), /*#__PURE__*/_jsx("br", {}), /*#__PURE__*/_jsx("p", {
-        children: t("discuss_submissions_desc")
-      })]
-    }),
-    spotlightPadding: 8,
-    target: "#discussSubmissions"
-  }];
-  const discussTabIndex = tabs.findIndex(tab => tab.id === "Discuss");
-  const [joyrideState, setJoyrideState] = useState({
-    run: false,
-    steps: joyrideSteps
-  });
-  const [creatorJoyrideState, setCreatorJoyrideState] = useState({
-    creatorRun: false,
-    creatorSteps: creatorJoyrideSteps
-  });
-  const {
-    run,
-    steps
-  } = joyrideState;
-  const {
-    creatorRun,
-    creatorSteps
-  } = creatorJoyrideState;
-  useEffect(() => {
-    if (discussTabIndex === value && !isCreator && !localStorage.getItem(`student-discuss-tour-completed`) && isVideoChatEnabled && isVideoChatEnabledInSettings) {
-      setJoyrideState(prevState => ({
-        ...prevState,
-        run: true
-      }));
-    } else if (discussTabIndex === value && isCreator && !localStorage.getItem(`creator-discuss-tour-completed`) && isVideoChatEnabled && isVideoChatEnabledInSettings) {
-      setCreatorJoyrideState(prevState => ({
-        ...prevState,
-        creatorRun: true
-      }));
-    }
-  }, [value, discussTabIndex]);
-  const handleJoyrideCallback = data => {
-    const {
-      status,
-      action
-    } = data;
-    const finishedStatuses = [STATUS.FINISHED, STATUS.SKIPPED];
-    if (finishedStatuses.includes(status) || action === "close") {
-      setJoyrideState(prevState => ({
-        ...prevState,
-        run: false
-      }));
-      localStorage.setItem(`student-discuss-tour-completed`, "true");
-    }
-  };
-  const handleCreatorJoyrideCallback = data => {
-    const {
-      status,
-      action
-    } = data;
-    const finishedStatuses = [STATUS.FINISHED, STATUS.SKIPPED];
-    if (finishedStatuses.includes(status) || action === "close") {
-      setCreatorJoyrideState(prevState => ({
-        ...prevState,
-        creatorRun: false
-      }));
-      localStorage.setItem(`creator-discuss-tour-completed`, "true");
-    }
-  };
-  const activeFabs = fabs.flat().filter(fab => fab.tabIndex === value);
-  return /*#__PURE__*/_jsxs("div", {
-    className: classes.root,
-    children: [appbar ? /*#__PURE__*/_jsx(AppBar, {
-      position: "static",
-      color: "default",
-      children: TabsRow
-    }) : TabsRow, divider && /*#__PURE__*/_jsx(Divider, {}), isSwipeable ? /*#__PURE__*/_jsx(SwipeableViews, {
-      axis: dir === "rtl" ? "x-reverse" : "x",
-      index: value,
-      onChangeIndex: handleChangeIndex,
-      children: children
-    }) : children.map((Child, i) => value === i ? /*#__PURE__*/_jsx(TabPanel, {
-      value: value,
-      index: i,
-      children: Child
-    }, i) : null), /*#__PURE__*/_jsx(FabContainer, {
-      children: activeFabs.map(fab => fab.link ? /*#__PURE__*/_jsx(Link, {
-        to: fab.link,
-        id: fab.id,
-        children: /*#__PURE__*/_jsx(Zoom, {
-          in: true,
-          timeout: transitionDuration,
-          unmountOnExit: true,
-          children: /*#__PURE__*/_jsx(Tooltip, {
-            title: fab.disabled ? t("no_members_tooltip") : fab.title,
-            children: /*#__PURE__*/_jsx("span", {
-              children: /*#__PURE__*/_jsx(Fab, {
-                className: fab.className,
-                color: fab.color,
-                disabled: fab.disabled,
-                children: fab.icon
-              })
-            })
-          })
-        })
-      }, fab.id) : /*#__PURE__*/_jsx(Zoom, {
-        in: true,
-        timeout: transitionDuration,
-        unmountOnExit: true,
-        children: /*#__PURE__*/_jsx(Tooltip, {
-          title: fab.disabled ? t("no_members_tooltip") : fab.title,
-          children: /*#__PURE__*/_jsx("span", {
-            children: /*#__PURE__*/_jsxs(Fab, {
-              id: fab.id,
-              className: fab.className,
-              color: fab.color,
-              onClick: fab.onClick,
-              variant: fab.variant,
-              disabled: fab.disabled,
-              children: [fab.icon, fab.buttonText]
-            })
-          })
-        })
-      }, fab.id))
-    }), run && /*#__PURE__*/_jsx(Joyride, {
-      onEvent: handleJoyrideCallback,
-      continuous: true,
-      run: run,
-      scrollToFirstStep: true,
-      steps: steps,
-      locale: {
-        back: t("back"),
-        close: t("close"),
-        last: t("last"),
-        next: t("next"),
-        skip: t("skip")
-      },
-      options: {
-        showProgress: true,
-        zIndex: 10000,
-        arrowColor: theme.palette.background.paper,
-        backgroundColor: theme.palette.background.paper,
-        primaryColor: theme.palette.primary.main,
-        textColor: theme.palette.text.primary,
-        buttons: ['back', 'close', 'primary', 'skip']
-      }
-    }), creatorRun && /*#__PURE__*/_jsx(Joyride, {
-      onEvent: handleCreatorJoyrideCallback,
-      continuous: true,
-      run: creatorRun,
-      scrollToFirstStep: true,
-      steps: creatorSteps,
-      locale: {
-        back: t("back"),
-        close: t("close"),
-        last: t("last"),
-        next: t("next"),
-        skip: t("skip")
-      },
-      options: {
-        showProgress: true,
-        zIndex: 10000,
-        arrowColor: theme.palette.background.paper,
-        backgroundColor: theme.palette.background.paper,
-        primaryColor: theme.palette.primary.main,
-        textColor: theme.palette.text.primary,
-        buttons: ['back', 'close', 'primary', 'skip']
-      }
-    })]
-  });
-}
-ResponsiveTabs.propTypes = {
-  children: PropTypes.node.isRequired,
-  dir: PropTypes.string.isRequired
-};
-export default ResponsiveTabs;

package/dist/Navigation/ResponsiveTabs/TabContainer.js

@@ -1,28 +0,0 @@
-import PropTypes from "prop-types";
-import { makeStyles } from "tss-react/mui";
-import Typography from "@mui/material/Typography";
-import { jsx as _jsx } from "react/jsx-runtime";
-const useStyles = makeStyles()(theme => ({
-  tabContainer: {
-    padding: theme.spacing(2)
-  }
-}));
-function TabContainer({
-  children,
-  dir
-}) {
-  const {
-    classes
-  } = useStyles();
-  return /*#__PURE__*/_jsx(Typography, {
-    component: "div",
-    dir: dir,
-    className: classes.tabContainer,
-    children: children
-  });
-}
-TabContainer.propTypes = {
-  children: PropTypes.node.isRequired,
-  dir: PropTypes.string.isRequired
-};
-export default TabContainer;

package/dist/Navigation/ResponsiveTabs/package.json

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