@nualang/nualang-ui-components 0.1.1400 → 0.2.0

package/dist/Misc/DiscussionTopicSelector/TopicSelector.js

@@ -1,191 +0,0 @@
-import { useState, useMemo, useEffect, useCallback, useRef } from "react";
-import { FormControl, InputLabel, Select, MenuItem, ListSubheader, CircularProgress, Box, Typography, FormHelperText } from "@mui/material";
-import { courses as courseQuerys } from "@nualang/nualang-api-and-queries/Queries";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-function CourseDataFetcher({
-  course,
-  getCourseSections,
-  username,
-  onDataLoaded
-}) {
-  const sectionsQuery = courseQuerys.useCourseSections(async (courseId, filters) => {
-    const response = await getCourseSections(courseId, filters);
-    return response;
-  }, {
-    courseId: course.courseId,
-    username: username,
-    filters: {
-      limit: 1000
-    }
-  }, {
-    enabled: !!course.courseId
-  });
-  useEffect(() => {
-    if (sectionsQuery.isSuccess && sectionsQuery.data?.Items) {
-      onDataLoaded(course.courseId, sectionsQuery.data.Items, false);
-    } else if (sectionsQuery.isLoading) {
-      onDataLoaded(course.courseId, [], true);
-    } else if (sectionsQuery.isError) {
-      onDataLoaded(course.courseId, [], false);
-    }
-  }, [sectionsQuery.isSuccess, sectionsQuery.isLoading, sectionsQuery.isError, sectionsQuery.data, course.courseId, onDataLoaded]);
-  return null;
-}
-function TopicSelector({
-  courses = [],
-  getCourseSections,
-  username,
-  disabled = false,
-  t = text => text,
-  onTopicSelect,
-  selectedTopicId,
-  createDiscussion,
-  courseSectionTopicId
-}) {
-  const [allSectionsData, setAllSectionsData] = useState({});
-  const [loadingCourses, setLoadingCourses] = useState({});
-  const hasAutoSelectedRef = useRef(false);
-  const handleDataLoaded = useCallback((courseId, sections, isLoading) => {
-    setAllSectionsData(prev => ({
-      ...prev,
-      [courseId]: sections
-    }));
-    setLoadingCourses(prev => ({
-      ...prev,
-      [courseId]: isLoading
-    }));
-  }, []);
-  const isLoading = useMemo(() => Object.values(loadingCourses).some(Boolean), [loadingCourses]);
-  const onTopicSelectRef = useRef(onTopicSelect);
-  useEffect(() => {
-    onTopicSelectRef.current = onTopicSelect;
-  }, [onTopicSelect]);
-  useEffect(() => {
-    if (!createDiscussion || !courseSectionTopicId || hasAutoSelectedRef.current) return;
-    const [courseId, sectionId, topicId] = courseSectionTopicId.split("|");
-    if (!courseId || !sectionId || !topicId) return;
-    const course = courses.find(c => c.courseId === courseId);
-    const section = allSectionsData[courseId]?.find(s => s.sectionId === sectionId);
-    const topic = section?.topics?.find(t => t.topicId === topicId);
-    if (course && section && topic) {
-      hasAutoSelectedRef.current = true;
-      onTopicSelectRef.current?.(topic, {
-        course,
-        section,
-        cstId: courseSectionTopicId
-      });
-    }
-  }, [createDiscussion, courseSectionTopicId, courses, allSectionsData]);
-  useEffect(() => {
-    hasAutoSelectedRef.current = false;
-  }, [courseSectionTopicId]);
-  const menuItems = useMemo(() => {
-    const items = [];
-    courses.forEach(course => {
-      const sections = allSectionsData[course.courseId] || [];
-      if (sections.length === 0) return;
-      items.push(/*#__PURE__*/_jsx(ListSubheader, {
-        sx: {
-          fontWeight: "bold",
-          fontSize: "0.95rem",
-          backgroundColor: "background.paper"
-        },
-        children: course.courseName
-      }, `course-${course.courseId}`));
-      sections.forEach(section => {
-        items.push(/*#__PURE__*/_jsx(ListSubheader, {
-          sx: {
-            paddingLeft: 4,
-            fontSize: "0.85rem",
-            fontWeight: 500,
-            backgroundColor: "background.paper",
-            color: "text.secondary"
-          },
-          children: section.sectionName
-        }, `section-${section.sectionId}`));
-        section.topics?.forEach(topic => {
-          const cstId = `${course.courseId}|${section.sectionId}|${topic.topicId}`;
-          items.push(/*#__PURE__*/_jsx(MenuItem, {
-            value: cstId,
-            sx: {
-              paddingLeft: 6,
-              fontSize: "0.875rem"
-            },
-            children: topic.topicName
-          }, cstId));
-        });
-      });
-    });
-    return items;
-  }, [courses, allSectionsData]);
-  const handleChange = useCallback(event => {
-    const cstId = event.target.value;
-    const [courseId, sectionId, actualTopicId] = cstId.split("|");
-    const course = courses.find(c => c.courseId === courseId);
-    const section = allSectionsData[courseId]?.find(s => s.sectionId === sectionId);
-    const topic = section?.topics?.find(t => t.topicId === actualTopicId);
-    if (topic) {
-      onTopicSelectRef.current?.(topic, {
-        course,
-        section,
-        cstId
-      });
-    }
-  }, [courses, allSectionsData]);
-  return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [courses.map(course => /*#__PURE__*/_jsx(CourseDataFetcher, {
-      course: course,
-      getCourseSections: getCourseSections,
-      username: username,
-      onDataLoaded: handleDataLoaded
-    }, course.courseId)), /*#__PURE__*/_jsxs(FormControl, {
-      fullWidth: true,
-      disabled: disabled || isLoading,
-      children: [/*#__PURE__*/_jsx(InputLabel, {
-        id: "topic-selector-label",
-        children: t("course_topic")
-      }), /*#__PURE__*/_jsx(Select, {
-        labelId: "topic-selector-label",
-        id: "topic-selector",
-        value: selectedTopicId || "",
-        label: t("course_topic"),
-        onChange: handleChange,
-        MenuProps: {
-          PaperProps: {
-            style: {
-              maxHeight: 400
-            }
-          }
-        },
-        children: isLoading ? /*#__PURE__*/_jsx(MenuItem, {
-          disabled: true,
-          children: /*#__PURE__*/_jsxs(Box, {
-            sx: {
-              display: 'flex',
-              alignItems: 'center',
-              gap: 1
-            },
-            children: [/*#__PURE__*/_jsx(CircularProgress, {
-              size: 20
-            }), /*#__PURE__*/_jsx(Typography, {
-              variant: "body2",
-              children: t("loading_topics")
-            })]
-          })
-        }) : menuItems.length > 0 ? menuItems : /*#__PURE__*/_jsx(MenuItem, {
-          disabled: true,
-          children: /*#__PURE__*/_jsx(Typography, {
-            variant: "body2",
-            sx: {
-              color: 'text.secondary'
-            },
-            children: t("no_topics_available")
-          })
-        })
-      }), /*#__PURE__*/_jsx(FormHelperText, {
-        children: t("discussion_topic_helper")
-      })]
-    })]
-  });
-}
-export default TopicSelector;

package/dist/Misc/DiscussionTopicSelector/package.json

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

package/dist/Misc/DragAndDropPreview/DragAndDropPreview.js

@@ -1,40 +0,0 @@
-import { ListItem, ListItemText, Avatar, ListItemAvatar } from "@mui/material";
-import ImageSearchIcon from "@mui/icons-material/ImageSearch";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-function DragAndDropPreview({
-  item = {
-    primary: "Primary Text",
-    secondary: "Secondary Text"
-  },
-  style = {}
-}) {
-  return /*#__PURE__*/_jsxs(ListItem, {
-    style: style,
-    children: [/*#__PURE__*/_jsx(ListItemAvatar, {
-      children: item && item.image ? /*#__PURE__*/_jsx(Avatar, {
-        src: item.image,
-        alt: "Item Image"
-      }) : /*#__PURE__*/_jsx(Avatar, {
-        alt: "Item Image",
-        children: /*#__PURE__*/_jsx(ImageSearchIcon, {})
-      })
-    }), /*#__PURE__*/_jsx(ListItemText, {
-      primary: item.primary,
-      secondary: item.secondary
-    })]
-  });
-}
-export function generatePreview({
-  item,
-  style
-}) {
-  return /*#__PURE__*/_jsx(DragAndDropPreview, {
-    style: {
-      ...style,
-      top: -50,
-      left: -150
-    },
-    item: item
-  });
-}
-export default DragAndDropPreview;

package/dist/Misc/DragAndDropPreview/package.json

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

package/dist/Misc/EmojiInput/EmojiInput.js

@@ -1,83 +0,0 @@
-import { makeStyles } from "tss-react/mui";
-import Input from "@mui/material/Input";
-import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-const useStyles = makeStyles()(theme => ({
-  inputRoot: {
-    color: "inherit",
-    width: "100%"
-  },
-  inputInput: {
-    padding: theme.spacing(1),
-    width: "100%"
-  },
-  chatMessages: {
-    flexgrow: "1",
-    overflowY: "auto",
-    display: "flex",
-    flexDirection: "column",
-    justifyContent: "flex-end",
-    marginBottom: "0",
-    minHeight: "min-content",
-    // position: 'absolute',
-    zIndex: "10"
-  },
-  popUp: {
-    display: "none",
-    position: "fixed",
-    zIndex: "1",
-    backgroundColor: "rgba(0, 0, 0, 0.25)"
-  },
-  toggleEmoji: {
-    border: "none",
-    width: "50px",
-    height: "auto",
-    padding: "0",
-    marginBottom: "0",
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center"
-  },
-  flex: {
-    display: "flex"
-  }
-}));
-function EmojiInput({
-  onChange,
-  value,
-  autoComplete,
-  startAdornment,
-  placeholder,
-  disabled,
-  onKeyPress,
-  ...props
-}) {
-  const {
-    classes
-  } = useStyles();
-  return /*#__PURE__*/_jsx(_Fragment, {
-    children: /*#__PURE__*/_jsx("div", {
-      className: classes.flex,
-      children: /*#__PURE__*/_jsx(Input, {
-        type: "text",
-        name: "newMessage",
-        className: "message-input",
-        "data-cy": "emojiInput",
-        value: value,
-        disabled: disabled,
-        onChange: onChange,
-        onKeyPress: onKeyPress,
-        placeholder: placeholder,
-        disableUnderline: true,
-        multiline: true,
-        endAdornment: startAdornment,
-        autoComplete: autoComplete,
-        classes: {
-          root: classes.inputRoot,
-          input: classes.inputInput
-        },
-        ...props
-      })
-    })
-  });
-}
-export default EmojiInput;