@nualang/nualang-ui-components 0.1.1246 → 0.1.1249

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (16) hide show
  1. package/dist/Assignments/AssignmentRoleplaySelection/AssignmentRoleplaySelection.js +1 -1
  2. package/dist/Forms/FeedbackForm/FeedbackForm.js +2 -1
  3. package/dist/Lists/Bots/Bots.js +9 -47
  4. package/dist/Lists/Classrooms/Classrooms.js +7 -44
  5. package/dist/Lists/Courses/Courses.js +9 -49
  6. package/dist/Lists/Leaderboard/Leaderboard.js +26 -21
  7. package/dist/Lists/ListElements/index.js +40 -0
  8. package/dist/Lists/Roleplays/Roleplays.js +9 -47
  9. package/dist/Lists/Topics/Topics.js +9 -54
  10. package/dist/Live/GameControls/GameControls.js +3 -1
  11. package/dist/Live/GameQuestionResults/GameQuestionResults.js +2 -1
  12. package/dist/Screens/Classrooms/ViewClassroom/ViewClassroom.js +0 -3
  13. package/dist/Screens/Courses/SearchCourses/SearchCourses.js +1 -0
  14. package/dist/Screens/Search/Search.js +1 -0
  15. package/dist/Tables/Progress/Progress.js +1 -1
  16. package/package.json +7 -5
package/dist/Assignments/AssignmentRoleplaySelection/AssignmentRoleplaySelection.js CHANGED
@@ -366,7 +366,7 @@ function AssignmentRoleplaySelection({
366
366
  lastClickedExerciseId
367
367
  }) {
368
368
  const [isRoleplaySelected, setIsRoleplaySelected] = (0, _react.useState)(false);
369
- const filteredCompletions = memberCourseCompletions.filter(completion => completion.courseSectionTopicId === courseSectionTopicId);
369
+ const filteredCompletions = Array.isArray(memberCourseCompletions) && memberCourseCompletions.length > 0 ? memberCourseCompletions.filter(completion => completion.courseSectionTopicId === courseSectionTopicId) : [];
370
370
  return roleplays.map(roleplay => /*#__PURE__*/(0, _jsxRuntime.jsx)(Roleplay, {
371
371
  roleplay: roleplay,
372
372
  isRoleplaySelected: isRoleplaySelected,
package/dist/Forms/FeedbackForm/FeedbackForm.js CHANGED
@@ -359,7 +359,8 @@ function FeedbackForm({
359
359
  sx: {
360
360
  paddingTop: "50px",
361
361
  marginLeft: 3,
362
- paddingBottom: 5
362
+ paddingBottom: 5,
363
+ width: '100%'
363
364
  },
364
365
  direction: "row",
365
366
  justifyContent: "center",
package/dist/Lists/Bots/Bots.js CHANGED
@@ -9,40 +9,13 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
9
9
  var _material = require("@mui/material");
10
10
  var _BotPreview = _interopRequireDefault(require("../../Dialogs/BotPreview/BotPreview"));
11
11
  var _useListScroll = _interopRequireDefault(require("../../hooks/useListScroll"));
12
- var _mui = require("tss-react/mui");
12
+ var _ListElements = require("../ListElements");
13
13
  var _Bot = _interopRequireDefault(require("../../Cards/Bot"));
14
14
  var _useConfirm = _interopRequireDefault(require("../../hooks/useConfirm"));
15
15
  var _jsxRuntime = require("react/jsx-runtime");
16
16
  function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
17
17
  // components
18
18
 
19
- const useStyles = (0, _mui.makeStyles)()(theme => ({
20
- root: {
21
- display: "flex",
22
- flexWrap: "wrap",
23
- justifyContent: "space-around",
24
- overflow: "hidden",
25
- backgroundColor: theme.palette.background.paper
26
- },
27
- gridList: {
28
- gridAutoFlow: "column"
29
- },
30
- gridListTileRoot: {
31
- [theme.breakpoints.up("sm")]: {
32
- minWidth: 380
33
- },
34
- height: "auto",
35
- minWidth: 330,
36
- padding: theme.spacing(0.75, 0.75, 2, 0.75)
37
- },
38
- gridListItemRoot: {
39
- [theme.breakpoints.up("sm")]: {
40
- minWidth: 380
41
- },
42
- height: "auto",
43
- minWidth: 320
44
- }
45
- }));
46
19
  function BotList({
47
20
  t = text => text,
48
21
  bots,
@@ -70,9 +43,6 @@ function BotList({
70
43
  isNualangTemplate = false,
71
44
  ...otherProps
72
45
  }) {
73
- const {
74
- classes
75
- } = useStyles();
76
46
  const [confirm] = (0, _useConfirm.default)(t);
77
47
  const [isPreviewOpen, setIsPreviewOpen] = (0, _react.useState)(false);
78
48
  const [previewBot, setPreviewBot] = (0, _react.useState)({});
@@ -92,13 +62,11 @@ function BotList({
92
62
  };
93
63
  if (!bots) {
94
64
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
95
- children: singleLineGrid ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ImageList, {
96
- className: classes.gridList,
65
+ children: singleLineGrid ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListElements.SingleLineGridList, {
97
66
  cols: singleLineGridCols,
98
67
  rowHeight: "auto",
99
68
  gap: 0,
100
- children: new Array(6).fill(null).map((item, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ImageListItem, {
101
- className: classes.gridListTileRoot,
69
+ children: new Array(6).fill(null).map((item, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListElements.SingleLineGridListItem, {
102
70
  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Bot.default, {
103
71
  t: t,
104
72
  subscription: subscription
@@ -110,8 +78,7 @@ function BotList({
110
78
  width: '100%'
111
79
  },
112
80
  spacing: 2,
113
- children: new Array(6).fill(null).map((item, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Grid, {
114
- className: classes.gridListTileRoot,
81
+ children: new Array(6).fill(null).map((item, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListElements.GridListItem, {
115
82
  size: {
116
83
  xs: 12,
117
84
  sm: 6,
@@ -128,14 +95,12 @@ function BotList({
128
95
  });
129
96
  }
130
97
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
131
- children: [singleLineGrid ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.ImageList, {
132
- className: classes.gridList,
98
+ children: [singleLineGrid ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ListElements.SingleLineGridList, {
133
99
  cols: singleLineGridCols,
134
100
  rowHeight: "auto",
135
101
  gap: 0,
136
102
  children: [items.map(bot => {
137
- return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ImageListItem, {
138
- className: classes.gridListTileRoot,
103
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListElements.SingleLineGridListItem, {
139
104
  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Bot.default, {
140
105
  disableActions: disableActions,
141
106
  t: t,
@@ -157,8 +122,7 @@ function BotList({
157
122
  ...otherProps
158
123
  }, bot.botId)
159
124
  }, bot.botId);
160
- }), (items || []).length < (bots || []).length && new Array(3).fill(null).map((_, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ImageListItem, {
161
- className: classes.gridListTileRoot,
125
+ }), (items || []).length < (bots || []).length && new Array(3).fill(null).map((_, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListElements.SingleLineGridListItem, {
162
126
  ref: index === 0 ? ref : null,
163
127
  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Bot.default, {
164
128
  t: t
@@ -171,8 +135,7 @@ function BotList({
171
135
  },
172
136
  spacing: 2,
173
137
  children: [items.map(bot => {
174
- return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Grid, {
175
- className: classes.gridListItemRoot,
138
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListElements.GridListItem, {
176
139
  size: {
177
140
  xs: 12,
178
141
  sm: 6,
@@ -201,8 +164,7 @@ function BotList({
201
164
  ...otherProps
202
165
  }, bot.botId)
203
166
  }, bot.botId);
204
- }), (items || []).length < (bots || []).length && new Array(3).fill(null).map((_, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ImageListItem, {
205
- className: classes.gridListTileRoot,
167
+ }), (items || []).length < (bots || []).length && new Array(3).fill(null).map((_, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListElements.GridListItem, {
206
168
  ref: index === 0 ? ref : null,
207
169
  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Bot.default, {
208
170
  t: t
package/dist/Lists/Classrooms/Classrooms.js CHANGED
@@ -7,41 +7,13 @@ exports.default = void 0;
7
7
  var _propTypes = _interopRequireDefault(require("prop-types"));
8
8
  var _Grid = _interopRequireDefault(require("@mui/material/Grid"));
9
9
  var _Classroom = _interopRequireDefault(require("../../Cards/Classroom"));
10
- var _material = require("@mui/material");
11
- var _mui = require("tss-react/mui");
12
10
  var _useListScroll = _interopRequireDefault(require("../../hooks/useListScroll"));
11
+ var _ListElements = require("../ListElements");
13
12
  var _jsxRuntime = require("react/jsx-runtime");
14
13
  function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
15
14
  // components
16
15
 
17
16
  // import {propsAreEqual} from "../../utils";
18
- const useStyles = (0, _mui.makeStyles)()(theme => ({
19
- root: {
20
- display: "flex",
21
- flexWrap: "wrap",
22
- justifyContent: "space-around",
23
- overflow: "hidden",
24
- backgroundColor: theme.palette.background.paper
25
- },
26
- gridList: {
27
- gridAutoFlow: "column"
28
- },
29
- gridListTileRoot: {
30
- [theme.breakpoints.up("sm")]: {
31
- minWidth: 380
32
- },
33
- height: "auto",
34
- minWidth: 330,
35
- padding: theme.spacing(0.75, 0.75, 2, 0.75)
36
- },
37
- gridListItemRoot: {
38
- [theme.breakpoints.up("sm")]: {
39
- minWidth: 380
40
- },
41
- height: "auto",
42
- minWidth: 320
43
- }
44
- }));
45
17
  function ClassroomList({
46
18
  t = text => text,
47
19
  classrooms,
@@ -50,9 +22,6 @@ function ClassroomList({
50
22
  singleLineGridCols = 3.5,
51
23
  ...otherProps
52
24
  }) {
53
- const {
54
- classes
55
- } = useStyles();
56
25
  const [items, ref] = (0, _useListScroll.default)({
57
26
  allItems: classrooms,
58
27
  pageLimit: 12
@@ -64,8 +33,7 @@ function ClassroomList({
64
33
  width: '100%'
65
34
  },
66
35
  spacing: 2,
67
- children: new Array(6).fill(null).map((item, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_Grid.default, {
68
- className: classes.gridListItemRoot,
36
+ children: new Array(6).fill(null).map((item, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListElements.GridListItem, {
69
37
  size: {
70
38
  xs: 12,
71
39
  sm: 6,
@@ -78,14 +46,12 @@ function ClassroomList({
78
46
  });
79
47
  }
80
48
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
81
- children: singleLineGrid ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.ImageList, {
82
- className: classes.gridList,
49
+ children: singleLineGrid ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ListElements.SingleLineGridList, {
83
50
  cols: singleLineGridCols,
84
51
  rowHeight: "auto",
85
52
  gap: 0,
86
53
  children: [items.map(classroom => {
87
- return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ImageListItem, {
88
- className: classes.gridListTileRoot,
54
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListElements.SingleLineGridListItem, {
89
55
  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Classroom.default, {
90
56
  t: t,
91
57
  classroom: classroom,
@@ -94,8 +60,7 @@ function ClassroomList({
94
60
  ...otherProps
95
61
  }, classroom.classroomId)
96
62
  }, classroom.classroomId);
97
- }), (items || []).length < (classrooms || []).length && new Array(3).fill(null).map((_, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ImageListItem, {
98
- className: classes.gridListTileRoot,
63
+ }), (items || []).length < (classrooms || []).length && new Array(3).fill(null).map((_, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListElements.SingleLineGridListItem, {
99
64
  ref: index === 0 ? ref : null,
100
65
  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Classroom.default, {
101
66
  t: t
@@ -107,8 +72,7 @@ function ClassroomList({
107
72
  width: '100%'
108
73
  },
109
74
  spacing: 2,
110
- children: [items.map(classroom => /*#__PURE__*/(0, _jsxRuntime.jsx)(_Grid.default, {
111
- className: classes.gridListItemRoot,
75
+ children: [items.map(classroom => /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListElements.GridListItem, {
112
76
  size: {
113
77
  xs: 12,
114
78
  sm: 6,
@@ -123,8 +87,7 @@ function ClassroomList({
123
87
  disableRaised: false,
124
88
  ...otherProps
125
89
  }, classroom.classroomId)
126
- }, classroom.classroomId)), (items || []).length < (classrooms || []).length && new Array(3).fill(null).map((_, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ImageListItem, {
127
- className: classes.gridListTileRoot,
90
+ }, classroom.classroomId)), (items || []).length < (classrooms || []).length && new Array(3).fill(null).map((_, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListElements.GridListItem, {
128
91
  ref: index === 0 ? ref : null,
129
92
  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Classroom.default, {
130
93
  t: t
package/dist/Lists/Courses/Courses.js CHANGED
@@ -7,41 +7,12 @@ exports.default = exports.MemoizedCoursesList = void 0;
7
7
  var _react = require("react");
8
8
  var _propTypes = _interopRequireDefault(require("prop-types"));
9
9
  var _material = require("@mui/material");
10
- var _mui = require("tss-react/mui");
11
10
  var _Course = _interopRequireDefault(require("../../Cards/Course"));
12
11
  var _useListScroll = _interopRequireDefault(require("../../hooks/useListScroll"));
12
+ var _ListElements = require("../ListElements");
13
13
  var _jsxRuntime = require("react/jsx-runtime");
14
14
  function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
15
- // components
16
-
17
15
  // import { propsAreEqual } from '../../utils';
18
- const useStyles = (0, _mui.makeStyles)()(theme => ({
19
- root: {
20
- display: "flex",
21
- flexWrap: "wrap",
22
- justifyContent: "space-around",
23
- overflow: "hidden",
24
- backgroundColor: theme.palette.background.paper
25
- },
26
- gridList: {
27
- gridAutoFlow: "column"
28
- },
29
- gridListTileRoot: {
30
- [theme.breakpoints.up("sm")]: {
31
- minWidth: 380
32
- },
33
- height: "auto",
34
- minWidth: 330,
35
- padding: theme.spacing(0.75, 0.75, 2, 0.75)
36
- },
37
- gridListItemRoot: {
38
- [theme.breakpoints.up("sm")]: {
39
- minWidth: 380
40
- },
41
- height: "auto",
42
- minWidth: 320
43
- }
44
- }));
45
16
  function CourseList({
46
17
  t = text => text,
47
18
  courses,
@@ -63,22 +34,17 @@ function CourseList({
63
34
  isClassroomArchived = false,
64
35
  ...otherProps
65
36
  }) {
66
- const {
67
- classes
68
- } = useStyles();
69
37
  const [items, ref] = (0, _useListScroll.default)({
70
38
  allItems: courses,
71
39
  pageLimit: 12
72
40
  });
73
41
  if (!courses) {
74
42
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
75
- children: singleLineGrid ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ImageList, {
76
- className: classes.gridList,
43
+ children: singleLineGrid ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListElements.SingleLineGridList, {
77
44
  cols: singleLineGridCols,
78
45
  rowHeight: "auto",
79
46
  gap: 0,
80
- children: new Array(6).fill(null).map((item, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ImageListItem, {
81
- className: classes.gridListTileRoot,
47
+ children: new Array(6).fill(null).map((item, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListElements.SingleLineGridListItem, {
82
48
  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Course.default, {
83
49
  t: t
84
50
  })
@@ -89,8 +55,7 @@ function CourseList({
89
55
  width: '100%'
90
56
  },
91
57
  spacing: 2,
92
- children: new Array(6).fill(null).map((item, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Grid, {
93
- className: classes.gridListItemRoot,
58
+ children: new Array(6).fill(null).map((item, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListElements.GridListItem, {
94
59
  size: {
95
60
  xs: 12,
96
61
  sm: 6,
@@ -106,15 +71,13 @@ function CourseList({
106
71
  });
107
72
  }
108
73
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
109
- children: singleLineGrid ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.ImageList, {
110
- className: classes.gridList,
74
+ children: singleLineGrid ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ListElements.SingleLineGridList, {
111
75
  cols: singleLineGridCols,
112
76
  rowHeight: "auto",
113
77
  gap: 0,
114
78
  children: [items.map(course => {
115
79
  const selected = selectedCourses.includes(course.courseId);
116
- return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ImageListItem, {
117
- className: classes.gridListTileRoot,
80
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListElements.SingleLineGridListItem, {
118
81
  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Course.default, {
119
82
  t: t,
120
83
  course: course,
@@ -136,8 +99,7 @@ function CourseList({
136
99
  ...otherProps
137
100
  }, course.courseId)
138
101
  }, course.courseId);
139
- }), (items || []).length < (courses || []).length && new Array(3).fill(null).map((_, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ImageListItem, {
140
- className: classes.gridListTileRoot,
102
+ }), (items || []).length < (courses || []).length && new Array(3).fill(null).map((_, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListElements.SingleLineGridListItem, {
141
103
  ref: index === 0 ? ref : null,
142
104
  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Course.default, {
143
105
  t: t
@@ -151,8 +113,7 @@ function CourseList({
151
113
  spacing: 2,
152
114
  children: [items.map(course => {
153
115
  const selected = selectedCourses.includes(course.courseId);
154
- return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Grid, {
155
- className: classes.gridListItemRoot,
116
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListElements.GridListItem, {
156
117
  size: {
157
118
  xs: 12,
158
119
  sm: 6,
@@ -181,8 +142,7 @@ function CourseList({
181
142
  ...otherProps
182
143
  }, course.courseId)
183
144
  }, course.courseId);
184
- }), (items || []).length < (courses || []).length && new Array(3).fill(null).map((_, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Grid, {
185
- className: classes.gridListItemRoot,
145
+ }), (items || []).length < (courses || []).length && new Array(3).fill(null).map((_, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListElements.GridListItem, {
186
146
  ref: index === 0 ? ref : null,
187
147
  size: {
188
148
  xs: 12,
package/dist/Lists/Leaderboard/Leaderboard.js CHANGED
@@ -10,7 +10,7 @@ var _material = require("@mui/material");
10
10
  var _Person = _interopRequireDefault(require("@mui/icons-material/Person"));
11
11
  var _Skeleton = _interopRequireDefault(require("@mui/material/Skeleton"));
12
12
  var _Members = _interopRequireDefault(require("../../Misc/NotFound/Members"));
13
- var _reactFlipMove = _interopRequireDefault(require("react-flip-move"));
13
+ var _reactFlipToolkit = require("react-flip-toolkit");
14
14
  var _system = require("@mui/system");
15
15
  var _TrendingUp = _interopRequireDefault(require("@mui/icons-material/TrendingUp"));
16
16
  var _TrendingDown = _interopRequireDefault(require("@mui/icons-material/TrendingDown"));
@@ -293,25 +293,30 @@ function MemberList(props) {
293
293
  children: [members.length === 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Members.default, {
294
294
  t: t,
295
295
  placeholderImageUrl: placeholderImageUrl
296
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFlipMove.default, {
297
- duration: 1000,
298
- children: members.map(member => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFlipMove.default, {
299
- typeName: null,
300
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Member, {
301
- member: member,
302
- isCreator: isCreator,
303
- isCourseMember: isCourseMember,
304
- t: t,
305
- lastTwoIndexes: gameMembersHistory.slice(-2).map(members => members.find(m => m.memberId === member.memberId)?.index),
306
- lastFourScores: gameMembersHistory.slice(-4).map(members => members.find(m => m.memberId === member.memberId)?.score),
307
- topThreeScores: topThreeScores,
308
- remainingQuestions: remainingQuestions,
309
- numOfCorrectAnswers: numOfCorrectAnswers,
310
- isIconsVisible: isIconsVisible,
311
- showRoleplayLeaderboardIcons: showRoleplayLeaderboardIcons,
312
- lastThreeAnswerResults: gameMembersHistory.slice(-3).map(members => members.find(m => m.memberId === member.memberId)?.isCorrect)
313
- })
314
- }, member.memberId))
296
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFlipToolkit.Flipper, {
297
+ flipKey: members.map(m => m.memberId).join(','),
298
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
299
+ className: "member-list",
300
+ children: members.map(member => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFlipToolkit.Flipped, {
301
+ flipId: member.memberId,
302
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
303
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Member, {
304
+ member: member,
305
+ isCreator: isCreator,
306
+ isCourseMember: isCourseMember,
307
+ t: t,
308
+ lastTwoIndexes: gameMembersHistory.slice(-2).map(members => members.find(m => m.memberId === member.memberId)?.index),
309
+ lastFourScores: gameMembersHistory.slice(-4).map(members => members.find(m => m.memberId === member.memberId)?.score),
310
+ topThreeScores: topThreeScores,
311
+ remainingQuestions: remainingQuestions,
312
+ numOfCorrectAnswers: numOfCorrectAnswers,
313
+ isIconsVisible: isIconsVisible,
314
+ showRoleplayLeaderboardIcons: showRoleplayLeaderboardIcons,
315
+ lastThreeAnswerResults: gameMembersHistory.slice(-3).map(members => members.find(m => m.memberId === member.memberId)?.isCorrect)
316
+ })
317
+ })
318
+ }, member.memberId))
319
+ })
315
320
  })]
316
321
  });
317
322
  }
@@ -330,7 +335,7 @@ function Leaderboard({
330
335
  numOfCorrectAnswers,
331
336
  isIconsVisible,
332
337
  showRoleplayLeaderboardIcons,
333
- exercise,
338
+ exercise = '',
334
339
  handleNext,
335
340
  nextScriptLine,
336
341
  setIsIconsVisible
package/dist/Lists/ListElements/index.js ADDED
@@ -0,0 +1,40 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.SingleLineGridListItem = exports.SingleLineGridList = exports.GridListItem = void 0;
7
+ var _material = require("@mui/material");
8
+ var _system = require("@mui/system");
9
+ const SingleLineGridList = exports.SingleLineGridList = (0, _system.styled)(_material.ImageList)(() => ({
10
+ gridAutoFlow: 'column',
11
+ display: 'flex',
12
+ justifyContent: 'flex-start'
13
+ }));
14
+ const minWidth = {
15
+ xs: 330,
16
+ sm: 380
17
+ };
18
+ const SingleLineGridListItem = exports.SingleLineGridListItem = (0, _system.styled)(_material.ImageListItem)(({
19
+ theme
20
+ }) => ({
21
+ [theme.breakpoints.up("sm")]: {
22
+ minWidth: minWidth.sm,
23
+ width: minWidth.sm
24
+ },
25
+ minWidth: minWidth.xs,
26
+ width: minWidth.xs,
27
+ // Stop flex overwriting
28
+ height: "auto",
29
+ padding: theme.spacing(0.75, 0.75, 2, 0.75),
30
+ flex: '0 0 auto'
31
+ }));
32
+ const GridListItem = exports.GridListItem = (0, _system.styled)(_material.Grid)(({
33
+ theme
34
+ }) => ({
35
+ [theme.breakpoints.up("sm")]: {
36
+ minWidth: minWidth.sm
37
+ },
38
+ minWidth: minWidth.xs,
39
+ height: "auto"
40
+ }));
package/dist/Lists/Roleplays/Roleplays.js CHANGED
@@ -9,40 +9,13 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
9
9
  var _material = require("@mui/material");
10
10
  var _RoleplayPreview = _interopRequireDefault(require("../../Dialogs/RoleplayPreview/RoleplayPreview"));
11
11
  var _useListScroll = _interopRequireDefault(require("../../hooks/useListScroll"));
12
- var _mui = require("tss-react/mui");
12
+ var _ListElements = require("../ListElements");
13
13
  var _Roleplay = _interopRequireDefault(require("../../Cards/Roleplay"));
14
14
  var _utils = require("../../utils");
15
15
  var _jsxRuntime = require("react/jsx-runtime");
16
16
  function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
17
17
  // components
18
18
 
19
- const useStyles = (0, _mui.makeStyles)()(theme => ({
20
- root: {
21
- display: "flex",
22
- flexWrap: "wrap",
23
- justifyContent: "space-around",
24
- overflow: "hidden",
25
- backgroundColor: theme.palette.background.paper
26
- },
27
- gridList: {
28
- gridAutoFlow: "column"
29
- },
30
- gridListTileRoot: {
31
- [theme.breakpoints.up("sm")]: {
32
- minWidth: 380
33
- },
34
- height: "auto",
35
- minWidth: 330,
36
- padding: theme.spacing(0.75, 0.75, 2, 0.75)
37
- },
38
- gridListItemRoot: {
39
- [theme.breakpoints.up("sm")]: {
40
- minWidth: 380
41
- },
42
- height: "auto",
43
- minWidth: 320
44
- }
45
- }));
46
19
  function RoleplayList({
47
20
  t = text => text,
48
21
  roleplays,
@@ -64,9 +37,6 @@ function RoleplayList({
64
37
  handleTranslate,
65
38
  ...otherProps
66
39
  }) {
67
- const {
68
- classes
69
- } = useStyles();
70
40
  const [isPreviewOpen, setIsPreviewOpen] = (0, _react.useState)(false);
71
41
  const [previewRoleplay, setPreviewRoleplay] = (0, _react.useState)({});
72
42
  const [previewMessages, setPreviewMessges] = (0, _react.useState)([]);
@@ -106,13 +76,11 @@ function RoleplayList({
106
76
  }, [previewRoleplay, previewRoleplay.script, isPreviewOpen]);
107
77
  if (!roleplays) {
108
78
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
109
- children: singleLineGrid ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ImageList, {
110
- className: classes.gridList,
79
+ children: singleLineGrid ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListElements.SingleLineGridList, {
111
80
  cols: singleLineGridCols,
112
81
  rowHeight: "auto",
113
82
  gap: 0,
114
- children: new Array(6).fill(null).map((item, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ImageListItem, {
115
- className: classes.gridListTileRoot,
83
+ children: new Array(6).fill(null).map((item, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListElements.SingleLineGridListItem, {
116
84
  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Roleplay.default, {
117
85
  t: t,
118
86
  subscription: subscription
@@ -124,8 +92,7 @@ function RoleplayList({
124
92
  width: '100%'
125
93
  },
126
94
  spacing: 2,
127
- children: new Array(6).fill(null).map((item, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Grid, {
128
- className: classes.gridListItemRoot,
95
+ children: new Array(6).fill(null).map((item, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListElements.GridListItem, {
129
96
  size: {
130
97
  xs: 12,
131
98
  sm: 6,
@@ -142,14 +109,12 @@ function RoleplayList({
142
109
  });
143
110
  }
144
111
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
145
- children: [singleLineGrid ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.ImageList, {
146
- className: classes.gridList,
112
+ children: [singleLineGrid ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ListElements.SingleLineGridList, {
147
113
  cols: singleLineGridCols,
148
114
  rowHeight: "auto",
149
115
  gap: 0,
150
116
  children: [items.map(roleplay => {
151
- return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ImageListItem, {
152
- className: classes.gridListTileRoot,
117
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListElements.SingleLineGridListItem, {
153
118
  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Roleplay.default, {
154
119
  t: t,
155
120
  roleplay: roleplay,
@@ -170,8 +135,7 @@ function RoleplayList({
170
135
  ...otherProps
171
136
  }, roleplay.roleplayId)
172
137
  }, roleplay.roleplayId);
173
- }), (items || []).length < (roleplays || []).length && new Array(3).fill(null).map((_, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ImageListItem, {
174
- className: classes.gridListTileRoot,
138
+ }), (items || []).length < (roleplays || []).length && new Array(3).fill(null).map((_, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListElements.SingleLineGridListItem, {
175
139
  ref: index === 0 ? ref : null,
176
140
  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Roleplay.default, {
177
141
  t: t
@@ -184,8 +148,7 @@ function RoleplayList({
184
148
  },
185
149
  spacing: 2,
186
150
  children: [items.map(roleplay => {
187
- return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Grid, {
188
- className: classes.gridListItemRoot,
151
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListElements.GridListItem, {
189
152
  size: {
190
153
  xs: 12,
191
154
  sm: 6,
@@ -213,8 +176,7 @@ function RoleplayList({
213
176
  ...otherProps
214
177
  }, roleplay.roleplayId)
215
178
  }, roleplay.roleplayId);
216
- }), (items || []).length < (roleplays || []).length && new Array(3).fill(null).map((_, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ImageListItem, {
217
- className: classes.gridListTileRoot,
179
+ }), (items || []).length < (roleplays || []).length && new Array(3).fill(null).map((_, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListElements.GridListItem, {
218
180
  ref: index === 0 ? ref : null,
219
181
  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Roleplay.default, {
220
182
  t: t
package/dist/Lists/Topics/Topics.js CHANGED
@@ -7,40 +7,13 @@ exports.default = void 0;
7
7
  var _react = require("react");
8
8
  var _propTypes = _interopRequireDefault(require("prop-types"));
9
9
  var _material = require("@mui/material");
10
- var _mui = require("tss-react/mui");
11
10
  var _TopicPreview = _interopRequireDefault(require("../../Dialogs/TopicPreview/TopicPreview"));
11
+ var _ListElements = require("../ListElements");
12
12
  var _Topic = _interopRequireDefault(require("../../Cards/Topic"));
13
13
  var _jsxRuntime = require("react/jsx-runtime");
14
14
  function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
15
15
  // components
16
16
 
17
- const useStyles = (0, _mui.makeStyles)()(theme => ({
18
- root: {
19
- display: "flex",
20
- flexWrap: "wrap",
21
- justifyContent: "space-around",
22
- overflow: "hidden",
23
- backgroundColor: theme.palette.background.paper
24
- },
25
- gridList: {
26
- gridAutoFlow: "column"
27
- },
28
- gridListTileRoot: {
29
- [theme.breakpoints.up("sm")]: {
30
- minWidth: 380
31
- },
32
- height: "auto",
33
- minWidth: 330,
34
- padding: theme.spacing(0.75, 0.75, 2, 0.75)
35
- },
36
- gridListItemRoot: {
37
- [theme.breakpoints.up("sm")]: {
38
- minWidth: 380
39
- },
40
- height: "auto",
41
- minWidth: 320
42
- }
43
- }));
44
17
  function TopicList({
45
18
  t = text => text,
46
19
  topics,
@@ -53,9 +26,6 @@ function TopicList({
53
26
  getCourseSectionTopic,
54
27
  ...otherProps
55
28
  }) {
56
- const {
57
- classes
58
- } = useStyles();
59
29
  const [isPreviewOpen, setIsPreviewOpen] = (0, _react.useState)(false);
60
30
  const [previewTopic, setPreviewTopic] = (0, _react.useState)({});
61
31
  const handleOpenPreview = topic => {
@@ -68,24 +38,13 @@ function TopicList({
68
38
  };
69
39
  if (!topics) {
70
40
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
71
- children: singleLineGrid ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ImageList, {
72
- className: classes.gridList,
41
+ children: singleLineGrid ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListElements.SingleLineGridList, {
73
42
  cols: singleLineGridCols,
74
43
  rowHeight: "auto",
75
44
  gap: 0,
76
- children: new Array(6).fill(null).map((item, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Grid, {
77
- size: {
78
- xs: 12,
79
- sm: 6,
80
- md: 4,
81
- lg: 4,
82
- xl: 3
83
- },
84
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ImageListItem, {
85
- className: classes.gridListTileRoot,
86
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Topic.default, {
87
- t: t
88
- })
45
+ children: new Array(6).fill(null).map((item, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListElements.SingleLineGridListItem, {
46
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Topic.default, {
47
+ t: t
89
48
  })
90
49
  }, index))
91
50
  }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Grid, {
@@ -94,8 +53,7 @@ function TopicList({
94
53
  width: '100%'
95
54
  },
96
55
  spacing: 2,
97
- children: new Array(6).fill(null).map((item, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Grid, {
98
- className: classes.gridListItemRoot,
56
+ children: new Array(6).fill(null).map((item, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListElements.GridListItem, {
99
57
  size: {
100
58
  xs: 12,
101
59
  sm: 6,
@@ -124,14 +82,12 @@ function TopicList({
124
82
  }, topic.topicId);
125
83
  };
126
84
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
127
- children: [singleLineGrid ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ImageList, {
128
- className: classes.gridList,
85
+ children: [singleLineGrid ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListElements.SingleLineGridList, {
129
86
  cols: singleLineGridCols,
130
87
  rowHeight: "auto",
131
88
  gap: 0,
132
89
  children: topics.map(topic => {
133
- return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ImageListItem, {
134
- className: classes.gridListTileRoot,
90
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListElements.SingleLineGridListItem, {
135
91
  children: renderTopicCard(topic, true)
136
92
  }, topic.topicId);
137
93
  })
@@ -142,8 +98,7 @@ function TopicList({
142
98
  },
143
99
  spacing: 2,
144
100
  children: topics.map(topic => {
145
- return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Grid, {
146
- className: classes.gridListItemRoot,
101
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListElements.GridListItem, {
147
102
  size: {
148
103
  xs: 12,
149
104
  sm: 6,
package/dist/Live/GameControls/GameControls.js CHANGED
@@ -35,7 +35,8 @@ function GameControls({
35
35
  }),
36
36
  children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Grid, {
37
37
  sx: {
38
- ml: 2
38
+ ml: 2,
39
+ mt: 1
39
40
  },
40
41
  component: _material.Typography,
41
42
  children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Typography, {
@@ -56,6 +57,7 @@ function GameControls({
56
57
  }
57
58
  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Grid, {
58
59
  mr: 2,
60
+ mt: 1,
59
61
  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Button, {
60
62
  color: "primary",
61
63
  onClick: handleTimeUp,
package/dist/Live/GameQuestionResults/GameQuestionResults.js CHANGED
@@ -42,7 +42,8 @@ function GameQuestionResults({
42
42
  }),
43
43
  children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Grid, {
44
44
  sx: {
45
- mx: 2
45
+ mx: 2,
46
+ mt: 1
46
47
  },
47
48
  display: "flex",
48
49
  alignItems: "center",
package/dist/Screens/Classrooms/ViewClassroom/ViewClassroom.js CHANGED
@@ -499,9 +499,6 @@ function Classroom({
499
499
  (0, _react.useEffect)(() => {
500
500
  if (!condition || !cId) return;
501
501
  const lastFetched = initialStored.current[cId] || 0;
502
- console.log({
503
- lastFetched
504
- });
505
502
  const hasNew = assignments.some(item => item.updatedAt && Number(item.updatedAt) > lastFetched);
506
503
  setHasNewAssignments(hasNew);
507
504
  if (hasNew) {
package/dist/Screens/Courses/SearchCourses/SearchCourses.js CHANGED
@@ -87,6 +87,7 @@ function SearchFilters({
87
87
  }),
88
88
  children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Grid, {
89
89
  container: true,
90
+ width: "100%",
90
91
  direction: "row",
91
92
  alignItems: "center",
92
93
  spacing: 1,
package/dist/Screens/Search/Search.js CHANGED
@@ -87,6 +87,7 @@ function SearchFilters({
87
87
  }),
88
88
  children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Grid, {
89
89
  container: true,
90
+ width: "100%",
90
91
  direction: "row",
91
92
  alignItems: "center",
92
93
  spacing: 1,
package/dist/Tables/Progress/Progress.js CHANGED
@@ -216,7 +216,7 @@ function Progress({
216
216
  } else {
217
217
  return [];
218
218
  }
219
- }, [courses, courseSectionsQueriesIsLoading]);
219
+ }, [currentCourses, courseSectionsQueriesIsLoading]);
220
220
  const deleteCourseId = () => {
221
221
  if ("URLSearchParams" in window) {
222
222
  const searchParams = (0, _utils2.searchStringToObj)(window.location.search);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@nualang/nualang-ui-components",
3
- "version": "0.1.1246",
3
+ "version": "0.1.1249",
4
4
  "main": "dist/index.js",
5
5
  "files": [
6
6
  "dist",
@@ -12,9 +12,9 @@
12
12
  },
13
13
  "dependencies": {
14
14
  "@dnd-kit/core": "6.3.1",
15
+ "@dnd-kit/modifiers": "9.0.0",
15
16
  "@dnd-kit/sortable": "10.0.0",
16
17
  "@dnd-kit/utilities": "3.2.2",
17
- "@dnd-kit/modifiers": "9.0.0",
18
18
  "@emotion/react": "^11.13",
19
19
  "@emotion/styled": "^11.13",
20
20
  "@hookform/resolvers": "^3.6.0",
@@ -67,7 +67,6 @@
67
67
  "react-dropzone": "^14.2.3",
68
68
  "react-easy-crop": "^5.0.0",
69
69
  "react-feather": "^2.0",
70
- "react-flip-move": "^3.0.5",
71
70
  "react-flip-toolkit": "^7.1.0",
72
71
  "react-hook-form": "^7.52.0",
73
72
  "react-i18next": "^15.4.1",
@@ -111,7 +110,6 @@
111
110
  "@mui/x-date-pickers": "^7.28.3",
112
111
  "@nualang/eslint-config-nualang": "0.2.0-alpha-4",
113
112
  "@react-theming/storybook-addon": "^1.1.10",
114
- "react-router-dom": "^6.30.0",
115
113
  "@storybook/addon-actions": "^8.6.12",
116
114
  "@storybook/addon-essentials": "^8.6.12",
117
115
  "@storybook/addon-links": "^8.6.12",
@@ -129,11 +127,13 @@
129
127
  "@testing-library/dom": "^10.4.0",
130
128
  "@testing-library/react": "^16.3.0",
131
129
  "babel-plugin-macros": "^3.1.0",
130
+ "chalk": "^5.4.1",
132
131
  "clsx": "^2.0.0",
133
132
  "cross-env": "^7.0.3",
134
133
  "eslint": "^9.24.0",
135
134
  "eslint-plugin-jsx-a11y": "^6.8.0",
136
135
  "eslint-plugin-react-hooks": "^5.1.0",
136
+ "glob": "^11.0.2",
137
137
  "globals": "^16.0.0",
138
138
  "intersection-observer": "^0.12.0",
139
139
  "jsdom": "^26.1.0",
@@ -141,9 +141,11 @@
141
141
  "prettier": "^3.2.5",
142
142
  "react": "19.1.0",
143
143
  "react-dom": "19.1.0",
144
+ "react-router-dom": "^6.30.0",
144
145
  "react-scripts": "^5.0.1",
145
146
  "storybook": "^8.6.12",
146
- "vitest": "^3.1.1"
147
+ "vitest": "^3.1.1",
148
+ "zx": "^8.5.4"
147
149
  },
148
150
  "scripts": {
149
151
  "postinstall": "patch-package",