@nualang/nualang-ui-components 0.1.1400 → 0.2.0

package/dist/Forms/CreateClassroom/Steps/Confirmation/Confirmation.js

@@ -1,117 +0,0 @@
-import Typography from "@mui/material/Typography";
-import { Grid, FormControl, FormControlLabel, FormLabel, Radio, RadioGroup, TextField } from "@mui/material";
-import { makeStyles } from "tss-react/mui";
-
-// components
-import ClassroomCard from "../../../../Cards/Classroom/Classroom";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-const useStyles = makeStyles()(theme => ({
-  template: {
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center"
-  },
-  flex: {
-    display: "flex",
-    alignItems: "center",
-    flexDirection: "row",
-    flexWrap: "wrap",
-    justifyContent: "space-evenly",
-    marginTop: theme.spacing(2),
-    paddingTop: theme.spacing(2),
-    marginBottom: theme.spacing(2),
-    paddingBottom: theme.spacing(2)
-  },
-  root: {
-    width: "100%",
-    "@media print": {
-      position: "absolute"
-    }
-  },
-  tableContainer: {
-    maxHeight: 450,
-    maxWidth: 450
-  },
-  maxWidthLine: {
-    maxWidth: 450
-  }
-}));
-function Confirmation({
-  t,
-  values
-}) {
-  const {
-    classes
-  } = useStyles();
-  const classroom = {
-    ...values
-  };
-  const {
-    visibility,
-    enrolmentKey
-  } = values;
-  return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsx(Typography, {
-      gutterBottom: true,
-      children: t("perfect_click_finish_create_classroom")
-    }), /*#__PURE__*/_jsxs("div", {
-      className: classes.flex,
-      children: [/*#__PURE__*/_jsx(ClassroomCard, {
-        disableActions: true,
-        t: t,
-        classroom: classroom,
-        disableRaised: true
-      }), /*#__PURE__*/_jsxs("div", {
-        children: [/*#__PURE__*/_jsx("br", {}), /*#__PURE__*/_jsxs(Grid, {
-          container: true,
-          sx: {
-            width: "100%"
-          },
-          spacing: 1,
-          children: [/*#__PURE__*/_jsx(Grid, {
-            size: 12,
-            children: /*#__PURE__*/_jsxs(FormControl, {
-              component: "fieldset",
-              children: [/*#__PURE__*/_jsx(FormLabel, {
-                component: "legend",
-                children: t("visibility")
-              }), /*#__PURE__*/_jsxs(RadioGroup, {
-                "aria-label": "visibility",
-                name: "visibility",
-                value: visibility,
-                children: [/*#__PURE__*/_jsx(FormControlLabel, {
-                  value: "public",
-                  control: /*#__PURE__*/_jsx(Radio, {}),
-                  label: t("public"),
-                  disabled: true
-                }), /*#__PURE__*/_jsx(FormControlLabel, {
-                  value: "private",
-                  control: /*#__PURE__*/_jsx(Radio, {}),
-                  label: t("private"),
-                  disabled: true
-                })]
-              })]
-            })
-          }), visibility === "private" && /*#__PURE__*/_jsx(Grid, {
-            size: 12,
-            children: /*#__PURE__*/_jsx(TextField, {
-              id: "enrolmentKey",
-              name: "enrolmentKey",
-              label: t("enrolment_key"),
-              value: enrolmentKey,
-              type: "text",
-              margin: "normal",
-              variant: "outlined",
-              className: classes.maxWidthLine,
-              required: true,
-              disabled: true
-            })
-          })]
-        })]
-      })]
-    })]
-  });
-}
-Confirmation.propTypes = {};
-Confirmation.label = "confirmation";
-export default Confirmation;

package/dist/Forms/CreateClassroom/Steps/Confirmation/package.json

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

package/dist/Forms/CreateClassroom/Steps/CourseSettings/CourseSettings.js

@@ -1,340 +0,0 @@
-import { useState } from "react";
-import { Grid, FormControl, List, ListItem, ListItemButton, ListItemText, Box, Avatar, Collapse, Typography, FormLabel, RadioGroup, FormControlLabel, Radio, IconButton, Tooltip } from "@mui/material";
-import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
-import ExpandLessIcon from "@mui/icons-material/ExpandLess";
-import HelpIcon from "@mui/icons-material/Help";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-function Settings({
-  t,
-  values,
-  touched,
-  errors,
-  handleBlur,
-  courseId,
-  setFieldValue,
-  classroomIsDynamicResponsesEnabled
-}) {
-  const {
-    courseSettings
-  } = values;
-  const thisCoursesSettings = courseSettings && courseId in courseSettings ? courseSettings[courseId] : {};
-  return /*#__PURE__*/_jsxs(Grid, {
-    container: true,
-    sx: {
-      marginTop: 1,
-      width: "100%"
-    },
-    children: [/*#__PURE__*/_jsx(Grid, {
-      size: {
-        xs: 12,
-        md: 12
-      },
-      children: /*#__PURE__*/_jsxs(FormControl, {
-        component: "fieldset",
-        children: [/*#__PURE__*/_jsx(FormLabel, {
-          component: "legend",
-          children: t("translation")
-        }), /*#__PURE__*/_jsx(Typography, {
-          color: "textSecondary",
-          children: t("auto_translate")
-        }), /*#__PURE__*/_jsxs(RadioGroup, {
-          row: true,
-          "aria-label": "Allow Translation",
-          name: `courseSettings.${courseId}.translationEnabled`,
-          value: thisCoursesSettings.translationEnabled || "default",
-          onChange: event => {
-            const newCourseSettings = {
-              ...courseSettings,
-              [courseId]: {
-                ...courseSettings[courseId],
-                translationEnabled: event.target.value
-              }
-            };
-            setFieldValue("courseSettings", newCourseSettings);
-          },
-          onBlur: handleBlur,
-          helperText: touched.visibility ? errors.visibility : "",
-          error: touched.visibility && Boolean(errors.visibility),
-          children: [/*#__PURE__*/_jsx(FormControlLabel, {
-            value: "default",
-            control: /*#__PURE__*/_jsx(Radio, {}),
-            label: t("course_default")
-          }), /*#__PURE__*/_jsx(FormControlLabel, {
-            value: "enabled",
-            control: /*#__PURE__*/_jsx(Radio, {}),
-            label: t("enabled")
-          }), /*#__PURE__*/_jsx(FormControlLabel, {
-            value: "disabled",
-            control: /*#__PURE__*/_jsx(Radio, {}),
-            label: t("disabled")
-          })]
-        })]
-      })
-    }), /*#__PURE__*/_jsx("br", {}), /*#__PURE__*/_jsx(Grid, {
-      size: {
-        xs: 12,
-        md: 12
-      },
-      sx: {
-        marginTop: 1
-      },
-      children: /*#__PURE__*/_jsxs(FormControl, {
-        component: "fieldset",
-        children: [/*#__PURE__*/_jsx(FormLabel, {
-          component: "legend",
-          children: t("shuffle_phrases")
-        }), /*#__PURE__*/_jsx(Typography, {
-          color: "textSecondary",
-          children: t("shuffle_phrases_desc")
-        }), /*#__PURE__*/_jsxs(RadioGroup, {
-          row: true,
-          "aria-label": "Shuffle Phrases",
-          name: `courseSettings.${courseId}.shuffleEnabled`,
-          value: thisCoursesSettings.shuffleEnabled || "default",
-          onChange: event => {
-            const newCourseSettings = {
-              ...courseSettings,
-              [courseId]: {
-                ...courseSettings[courseId],
-                shuffleEnabled: event.target.value
-              }
-            };
-            setFieldValue("courseSettings", newCourseSettings);
-          },
-          onBlur: handleBlur,
-          helperText: touched.visibility ? errors.visibility : "",
-          error: touched.visibility && Boolean(errors.visibility),
-          children: [/*#__PURE__*/_jsx(FormControlLabel, {
-            value: "default",
-            control: /*#__PURE__*/_jsx(Radio, {}),
-            label: t("course_default")
-          }), /*#__PURE__*/_jsx(FormControlLabel, {
-            value: "enabled",
-            control: /*#__PURE__*/_jsx(Radio, {}),
-            label: t("enabled")
-          }), /*#__PURE__*/_jsx(FormControlLabel, {
-            value: "disabled",
-            control: /*#__PURE__*/_jsx(Radio, {}),
-            label: t("disabled")
-          })]
-        })]
-      })
-    }), /*#__PURE__*/_jsx("br", {}), /*#__PURE__*/_jsx(Grid, {
-      size: {
-        xs: 12,
-        md: 12
-      },
-      sx: {
-        marginTop: 1
-      },
-      children: /*#__PURE__*/_jsxs(FormControl, {
-        component: "fieldset",
-        children: [/*#__PURE__*/_jsx(FormLabel, {
-          component: "legend",
-          children: t("word_bank")
-        }), /*#__PURE__*/_jsx(Typography, {
-          color: "textSecondary",
-          children: t("allow_wordBank")
-        }), /*#__PURE__*/_jsxs(RadioGroup, {
-          row: true,
-          "aria-label": "Allow Word Bank",
-          name: `courseSettings.${courseId}.wordBankEnabled`,
-          value: thisCoursesSettings.wordBankEnabled || "default",
-          onChange: event => {
-            const newCourseSettings = {
-              ...courseSettings,
-              [courseId]: {
-                ...courseSettings[courseId],
-                wordBankEnabled: event.target.value
-              }
-            };
-            setFieldValue("courseSettings", newCourseSettings);
-          },
-          onBlur: handleBlur,
-          helperText: touched.visibility ? errors.visibility : "",
-          error: touched.visibility && Boolean(errors.visibility),
-          children: [/*#__PURE__*/_jsx(FormControlLabel, {
-            value: "default",
-            control: /*#__PURE__*/_jsx(Radio, {}),
-            label: t("course_default")
-          }), /*#__PURE__*/_jsx(FormControlLabel, {
-            value: "enabled",
-            control: /*#__PURE__*/_jsx(Radio, {}),
-            label: t("enabled")
-          }), /*#__PURE__*/_jsx(FormControlLabel, {
-            value: "disabled",
-            control: /*#__PURE__*/_jsx(Radio, {}),
-            label: t("disabled")
-          })]
-        })]
-      })
-    }), /*#__PURE__*/_jsx("br", {}), /*#__PURE__*/_jsx(Grid, {
-      size: {
-        xs: 12,
-        md: 12
-      },
-      sx: {
-        marginTop: 1
-      },
-      children: /*#__PURE__*/_jsxs(FormControl, {
-        component: "fieldset",
-        children: [/*#__PURE__*/_jsxs(FormLabel, {
-          component: "legend",
-          children: [t("dynamic_response"), /*#__PURE__*/_jsx(Tooltip, {
-            title: t("dynamic_responses_info"),
-            placement: "right",
-            children: /*#__PURE__*/_jsx(IconButton, {
-              sx: {
-                padding: 0,
-                marginLeft: 1
-              },
-              children: /*#__PURE__*/_jsx(HelpIcon, {
-                fontSize: "small"
-              })
-            })
-          })]
-        }), /*#__PURE__*/_jsx(Typography, {
-          color: "textSecondary",
-          children: t("dynamic_response_desc")
-        }), /*#__PURE__*/_jsxs(RadioGroup, {
-          row: true,
-          "aria-label": "Dynamic Responses",
-          name: `courseSettings.${courseId}.isDynamicResponsesEnabled`,
-          value: classroomIsDynamicResponsesEnabled === "disabled" ? "disabled" : thisCoursesSettings.isDynamicResponsesEnabled || "default",
-          onChange: event => {
-            const newCourseSettings = {
-              ...courseSettings,
-              [courseId]: {
-                ...courseSettings[courseId],
-                isDynamicResponsesEnabled: event.target.value
-              }
-            };
-            setFieldValue("courseSettings", newCourseSettings);
-          },
-          onBlur: handleBlur,
-          helperText: touched.visibility ? errors.visibility : "",
-          error: touched.visibility && Boolean(errors.visibility),
-          children: [/*#__PURE__*/_jsx(FormControlLabel, {
-            value: "default",
-            control: /*#__PURE__*/_jsx(Radio, {}),
-            label: t("course_default"),
-            disabled: classroomIsDynamicResponsesEnabled === "disabled"
-          }), /*#__PURE__*/_jsx(FormControlLabel, {
-            value: "disabled",
-            control: /*#__PURE__*/_jsx(Radio, {}),
-            label: t("disabled")
-          })]
-        })]
-      })
-    })]
-  });
-}
-function Course({
-  course,
-  index,
-  t,
-  values,
-  touched,
-  errors,
-  handleChange,
-  handleBlur,
-  setFieldValue,
-  classroomIsDynamicResponsesEnabled
-}) {
-  const [open, setOpen] = useState(false);
-  return /*#__PURE__*/_jsxs(List, {
-    disablePadding: true,
-    children: [/*#__PURE__*/_jsx(ListItem, {
-      disablePadding: true,
-      children: /*#__PURE__*/_jsx(ListItemButton, {
-        onClick: () => setOpen(!open),
-        children: /*#__PURE__*/_jsxs(Box, {
-          sx: {
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "space-between",
-            width: "100%"
-          },
-          children: [/*#__PURE__*/_jsxs(Box, {
-            sx: {
-              display: "flex",
-              alignItems: "center"
-            },
-            children: [/*#__PURE__*/_jsx(Avatar, {
-              src: course.picture,
-              alt: ""
-            }), /*#__PURE__*/_jsx(ListItemText, {
-              primary: course.courseName,
-              secondary: course.description,
-              sx: {
-                marginLeft: 2
-              }
-            })]
-          }), open ? /*#__PURE__*/_jsx(ExpandLessIcon, {
-            sx: {
-              color: "#757575"
-            }
-          }) : /*#__PURE__*/_jsx(ExpandMoreIcon, {
-            sx: {
-              color: "#757575"
-            }
-          })]
-        })
-      })
-    }), /*#__PURE__*/_jsx(Collapse, {
-      in: open,
-      timeout: "auto",
-      unmountOnExit: true,
-      children: /*#__PURE__*/_jsx(Box, {
-        sx: {
-          ml: 9.25
-        },
-        children: /*#__PURE__*/_jsx(Settings, {
-          t: t,
-          values: values,
-          touched: touched,
-          errors: errors,
-          handleChange: handleChange,
-          handleBlur: handleBlur,
-          courseId: course.courseId,
-          setFieldValue: setFieldValue,
-          classroomIsDynamicResponsesEnabled: classroomIsDynamicResponsesEnabled
-        })
-      })
-    })]
-  }, index);
-}
-function CourseSettings({
-  courses = [],
-  t,
-  values,
-  errors,
-  touched,
-  handleChange,
-  handleBlur,
-  setFieldValue,
-  classroomIsDynamicResponsesEnabled
-}) {
-  return /*#__PURE__*/_jsx(_Fragment, {
-    children: courses.length > 0 ? /*#__PURE__*/_jsxs(_Fragment, {
-      children: [/*#__PURE__*/_jsx(Typography, {
-        children: t("course_settings_description")
-      }), courses.map((course, index) => /*#__PURE__*/_jsx(Course, {
-        course: course,
-        index: index,
-        t: t,
-        values: values,
-        touched: touched,
-        errors: errors,
-        handleChange: handleChange,
-        handleBlur: handleBlur,
-        setFieldValue: setFieldValue,
-        classroomIsDynamicResponsesEnabled: classroomIsDynamicResponsesEnabled
-      }))]
-    }) : /*#__PURE__*/_jsx(Typography, {
-      children: t("classroom_courses_not_found_desc")
-    })
-  });
-}
-CourseSettings.label = "course_settings";
-export default CourseSettings;

package/dist/Forms/CreateClassroom/Steps/CourseSettings/package.json

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

package/dist/Forms/CreateClassroom/Steps/Customization/Customization.js

@@ -1,77 +0,0 @@
-import * as Yup from "yup";
-import { Typography, Grid } from "@mui/material";
-import ImageSelector from "../../../ImageSelector/ImageSelector";
-import PreviewCard from "../../../../Cards/PreviewCard/PreviewCard";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-function Customization({
-  t,
-  handleChange,
-  values,
-  fileSizeLimit,
-  verificationStatus,
-  isUpdateClassroom = false
-}) {
-  const {
-    picture,
-    banner
-  } = values;
-  return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsx(Typography, {
-      children: t("customize_appearance_of_classroom")
-    }), /*#__PURE__*/_jsx("br", {}), /*#__PURE__*/_jsxs(Grid, {
-      container: true,
-      sx: {
-        width: "100%"
-      },
-      spacing: 1,
-      children: [/*#__PURE__*/_jsxs(Grid, {
-        size: {
-          md: isUpdateClassroom ? 6 : 12
-        },
-        children: [/*#__PURE__*/_jsx(Typography, {
-          gutterBottom: true,
-          children: t("card")
-        }), /*#__PURE__*/_jsx(Grid, {
-          size: 12,
-          children: /*#__PURE__*/_jsx(ImageSelector, {
-            t: t,
-            name: "picture",
-            value: picture,
-            handleChange: handleChange,
-            fileSizeLimit: fileSizeLimit,
-            previewComponent: PreviewCard,
-            isBanner: false,
-            verificationStatus: verificationStatus
-          })
-        })]
-      }), isUpdateClassroom ? /*#__PURE__*/_jsxs(Grid, {
-        size: {
-          md: 6
-        },
-        children: [/*#__PURE__*/_jsx(Typography, {
-          gutterBottom: true,
-          children: t("banner")
-        }), /*#__PURE__*/_jsx(Grid, {
-          size: 12,
-          children: /*#__PURE__*/_jsx(ImageSelector, {
-            t: t,
-            name: "banner",
-            value: banner,
-            handleChange: handleChange,
-            fileSizeLimit: fileSizeLimit,
-            previewComponent: PreviewCard,
-            isBanner: true,
-            aspect: 16 / 2.5,
-            verificationStatus: verificationStatus
-          })
-        })]
-      }) : null]
-    })]
-  });
-}
-Customization.propTypes = {};
-Customization.label = "customization";
-Customization.validationSchema = Yup.object().shape({
-  picture: Yup.string().nullable()
-});
-export default Customization;

package/dist/Forms/CreateClassroom/Steps/Customization/package.json

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

package/dist/Forms/CreateClassroom/Steps/index.js

@@ -1,6 +0,0 @@
-import ClassroomInformation from "./ClassroomInformation/ClassroomInformation";
-import ClassroomSettings from "./ClassroomSettings/ClassroomSettings";
-import Customization from "./Customization/Customization";
-import Confirmation from "./Confirmation/Confirmation";
-import CourseSettings from "./CourseSettings/CourseSettings";
-export { ClassroomInformation, ClassroomSettings, Customization, Confirmation, CourseSettings };

package/dist/Forms/CreateClassroom/package.json

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

package/dist/Forms/CreateCourse/CreateCourse.js

@@ -1,62 +0,0 @@
-import { MenuItem } from "@mui/material";
-import { CourseInformation, CourseSettings, Customization, Confirmation } from "./Steps";
-import PlaceholderImages from "../../utils/placeholder-images/index";
-import { randomId } from "../../utils/index";
-
-// components
-import MultiStepForm from "../MultiStepForm/MultiStepForm";
-import { jsx as _jsx } from "react/jsx-runtime";
-function getSteps() {
-  return [CourseInformation, CourseSettings, Customization, Confirmation];
-}
-function CreateCourse({
-  t = text => text,
-  onSubmit,
-  difficulties = ["A1", "A2", "B1", "B2", "C1", "C2"],
-  languages = {},
-  forLanguages = {},
-  fileSizeLimit,
-  userImage,
-  verificationStatus,
-  subscription = {
-    isUpgradePossible: true
-  },
-  learnLang,
-  forLang
-}) {
-  const difficultyOptions = difficulties.map((d, idx) => {
-    const keyId = `crearolax${randomId()}${idx}`;
-    return /*#__PURE__*/_jsx(MenuItem, {
-      value: d,
-      children: t(d)
-    }, keyId);
-  });
-  return /*#__PURE__*/_jsx(MultiStepForm, {
-    initialValues: {
-      courseName: "",
-      description: "",
-      learnLang: learnLang ? learnLang : "",
-      forLang: forLang ? forLang : "",
-      visibility: "private",
-      enrolmentKey: "",
-      allowedDomains: [],
-      tags: [],
-      collaborators: [],
-      picture: PlaceholderImages.course,
-      userImage: userImage,
-      isShareable: "collaborators",
-      duplicated: false
-    },
-    getSteps: getSteps,
-    onSubmit: onSubmit,
-    t: t,
-    difficultyOptions: difficultyOptions,
-    languageOptions: languages,
-    forLanguageOptions: forLanguages,
-    fileSizeLimit: fileSizeLimit,
-    subscription: subscription,
-    verificationStatus: verificationStatus
-  });
-}
-CreateCourse.propTypes = {};
-export default CreateCourse;

package/dist/Forms/CreateCourse/CreateCourse.test.js

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