@nualang/nualang-ui-components 0.1.1211 → 0.1.1212

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 (4) hide show
  1. package/dist/Cards/Category/Category.js +17 -6
  2. package/dist/Lists/Categories/Categories.js +29 -38
  3. package/dist/Screens/Dashboard/Dashboard.js +85 -45
  4. package/package.json +1 -1
package/dist/Cards/Category/Category.js CHANGED
@@ -7,6 +7,8 @@ exports.default = Category;
7
7
  var _react = _interopRequireDefault(require("react"));
8
8
  var _material = require("@mui/material");
9
9
  var _CardElements = require("../CardElements");
10
+ var _styles = require("@mui/material/styles");
11
+ var _useMediaQuery = _interopRequireDefault(require("@mui/material/useMediaQuery"));
10
12
  var _jsxRuntime = require("react/jsx-runtime");
11
13
  function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
12
14
  function Category({
@@ -17,17 +19,26 @@ function Category({
17
19
  backgroundColor = "#B103D8",
18
20
  handleSelectCategory
19
21
  }) {
20
- return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_CardElements.CardContainer, {
22
+ const theme = (0, _styles.useTheme)();
23
+ const isSmallScreen = (0, _useMediaQuery.default)(theme.breakpoints.down("sm"));
24
+ return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Card, {
21
25
  sx: {
22
- maxWidth: 450,
23
- minHeight: 160,
26
+ minHeight: isSmallScreen ? 40 : 150,
24
27
  background: backgroundColor,
25
28
  color: "white",
26
29
  position: "relative",
27
30
  display: "flex",
28
31
  flexDirection: "column",
29
32
  justifyContent: "space-between",
30
- overflow: "hidden"
33
+ overflow: "hidden",
34
+ cursor: "pointer",
35
+ transition: "transform 0.3s ease, box-shadow 0.3s ease",
36
+ height: "100%",
37
+ borderRadius: theme.spacing(2),
38
+ "&:hover": {
39
+ boxShadow: "5px 10px 30px rgba(0, 0, 0, 0.15)",
40
+ transform: "translateY(5px)"
41
+ }
31
42
  },
32
43
  onClick: () => handleSelectCategory(searchString || categoryTitle),
33
44
  children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
@@ -65,7 +76,7 @@ function Category({
65
76
  },
66
77
  children: !!Icon && /*#__PURE__*/(0, _jsxRuntime.jsx)(Icon, {
67
78
  sx: {
68
- fontSize: 100,
79
+ fontSize: isSmallScreen ? 70 : 100,
69
80
  position: "absolute",
70
81
  bottom: 10,
71
82
  right: 10
@@ -80,7 +91,7 @@ function Category({
80
91
  bottom: 10,
81
92
  right: 0,
82
93
  borderRadius: "8px",
83
- width: "180px",
94
+ width: isSmallScreen ? "85px" : "200px",
84
95
  transform: "rotate(10deg)"
85
96
  }
86
97
  })]
package/dist/Lists/Categories/Categories.js CHANGED
@@ -8,6 +8,8 @@ var _react = _interopRequireDefault(require("react"));
8
8
  var _propTypes = _interopRequireDefault(require("prop-types"));
9
9
  var _material = require("@mui/material");
10
10
  var _Category = _interopRequireDefault(require("../../Cards/Category/Category"));
11
+ var _styles = require("@mui/material/styles");
12
+ var _useMediaQuery = _interopRequireDefault(require("@mui/material/useMediaQuery"));
11
13
  var _jsxRuntime = require("react/jsx-runtime");
12
14
  function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
13
15
  function CategoryList({
@@ -15,42 +17,35 @@ function CategoryList({
15
17
  categories,
16
18
  currentLanguage,
17
19
  handleSelectCategory,
18
- singleLineGrid = false,
19
- singleLineGridCols = 3,
20
+ isCategoriesLoading,
20
21
  ...otherProps
21
22
  }) {
22
- if (!categories) {
23
+ const theme = (0, _styles.useTheme)();
24
+ const isSmallScreen = (0, _useMediaQuery.default)(theme.breakpoints.down("sm"));
25
+ if (isCategoriesLoading) {
23
26
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.default.Fragment, {
24
- children: singleLineGrid ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ImageList, {
25
- cols: singleLineGridCols,
26
- rowHeight: "auto",
27
- gap: 0,
28
- children: new Array(5).fill(null).map((item, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Grid, {
29
- justifyContent: "center",
30
- item: true,
31
- xs: 12,
32
- sm: 6,
33
- md: 4,
34
- lg: 4,
35
- xl: 4,
36
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ImageListItem, {
37
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Category.default, {
38
- t: t
39
- })
40
- })
41
- }, index))
42
- }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Grid, {
27
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Grid, {
43
28
  container: true,
29
+ direction: "row",
44
30
  justifyContent: "center",
45
- children: new Array(5).fill(null).map((item, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Grid, {
31
+ alignItems: "stretch",
32
+ flexWrap: "wrap",
33
+ spacing: 2,
34
+ children: new Array(3).fill(null).map((item, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Grid, {
46
35
  item: true,
47
36
  xs: 12,
48
37
  sm: 6,
49
- md: 3,
50
- lg: 3,
51
- xl: 3,
52
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Category.default, {
53
- t: t
38
+ lg: 4,
39
+ sx: {
40
+ justifyContent: "center",
41
+ alignItems: "center"
42
+ },
43
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Skeleton, {
44
+ variant: "rectangular",
45
+ sx: {
46
+ minHeight: isSmallScreen ? 40 : 150,
47
+ borderRadius: theme.spacing(2)
48
+ }
54
49
  })
55
50
  }, index))
56
51
  })
@@ -63,14 +58,12 @@ function CategoryList({
63
58
  justifyContent: "center",
64
59
  alignItems: "stretch",
65
60
  flexWrap: "wrap",
66
- spacing: 3,
67
- children: categories.map((category, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Grid, {
61
+ spacing: 2,
62
+ children: categories && categories.length && !isCategoriesLoading && categories.map((category, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Grid, {
68
63
  item: true,
69
64
  xs: 12,
70
65
  sm: 6,
71
- md: 4,
72
66
  lg: 4,
73
- xl: 4,
74
67
  sx: {
75
68
  justifyContent: "center",
76
69
  alignItems: "center"
@@ -81,8 +74,8 @@ function CategoryList({
81
74
  backgroundColor: category?.color || '#B103D8',
82
75
  searchString: category?.searchString,
83
76
  categoryTitle: category?.languages?.[currentLanguage] || category?.categoryName,
84
- image: category?.url || category?.image,
85
- Icon: category?.Icon,
77
+ image: category?.categoryImage || category?.url,
78
+ Icon: category?.Icon || null,
86
79
  handleSelectCategory: handleSelectCategory
87
80
  })
88
81
  }, index))
@@ -93,11 +86,9 @@ CategoryList.propTypes = {
93
86
  t: _propTypes.default.func,
94
87
  categories: _propTypes.default.arrayOf(_propTypes.default.shape({
95
88
  categoryTitle: _propTypes.default.string,
96
- image: _propTypes.default.string,
89
+ categoryImage: _propTypes.default.string,
97
90
  Icon: _propTypes.default.string
98
91
  })).isRequired,
99
- handleSelectCategory: _propTypes.default.func,
100
- singleLineGrid: _propTypes.default.bool,
101
- singleLineGridCols: _propTypes.default.number
92
+ handleSelectCategory: _propTypes.default.func
102
93
  };
103
94
  var _default = exports.default = CategoryList;
package/dist/Screens/Dashboard/Dashboard.js CHANGED
@@ -4,15 +4,18 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.default = Dashboard;
7
- var _react = _interopRequireDefault(require("react"));
7
+ var _react = _interopRequireWildcard(require("react"));
8
8
  var _material = require("@mui/material");
9
9
  var _mui = require("tss-react/mui");
10
10
  var _Skeleton = _interopRequireDefault(require("@mui/material/Skeleton"));
11
11
  var _Search = _interopRequireDefault(require("@mui/icons-material/Search"));
12
12
  var _Courses = _interopRequireDefault(require("../../Lists/Courses"));
13
13
  var _Categories = _interopRequireDefault(require("../../Lists/Categories/Categories"));
14
+ var _Queries = require("@nualang/nualang-api-and-queries/Queries");
14
15
  var _jsxRuntime = require("react/jsx-runtime");
15
16
  function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
17
+ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
18
+ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
16
19
  const useStyles = (0, _mui.makeStyles)()(theme => ({
17
20
  root: {
18
21
  height: "100%",
@@ -40,6 +43,56 @@ const useStyles = (0, _mui.makeStyles)()(theme => ({
40
43
  }
41
44
  }
42
45
  }));
46
+ const CategoryListComponent = ({
47
+ categoryType,
48
+ learnLang,
49
+ getCategories,
50
+ handleSelectCategory,
51
+ currentLanguage,
52
+ t,
53
+ classes
54
+ }) => {
55
+ const encodedCategoryType = encodeURIComponent(`${learnLang}|${categoryType}`);
56
+ const categoriesQuery = _Queries.categories.useCategories(async categoryType => {
57
+ const response = await getCategories(categoryType);
58
+ return response;
59
+ }, {
60
+ categoryType: encodedCategoryType
61
+ });
62
+ const isCategoriesLoading = categoriesQuery.isLoading;
63
+ const categories = categoriesQuery.isSuccess && Array.isArray(categoriesQuery.data.Items) && categoriesQuery.data.Items.length ? categoriesQuery.data.Items : [];
64
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
65
+ children: process.env.REACT_APP_STAGE === "dev" && (isCategoriesLoading || categories.length > 0) ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.default.Fragment, {
66
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
67
+ pb: 2,
68
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
69
+ className: classes.header,
70
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
71
+ className: classes.headerText,
72
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
73
+ variant: "h5",
74
+ component: "h2",
75
+ children: categories.length > 0 ? t(categoryType) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Skeleton.default, {
76
+ variant: "rectangular",
77
+ height: 32,
78
+ width: 250
79
+ })
80
+ })
81
+ })
82
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Categories.default, {
83
+ t: t,
84
+ handleSelectCategory: handleSelectCategory,
85
+ currentLanguage: currentLanguage,
86
+ isCategoriesLoading: isCategoriesLoading,
87
+ categories: categories.length > 0 ? categories : []
88
+ })]
89
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
90
+ pb: 2,
91
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Divider, {})
92
+ })]
93
+ }) : null
94
+ });
95
+ };
43
96
  function Dashboard({
44
97
  t = text => text,
45
98
  completions = [],
@@ -68,10 +121,11 @@ function Dashboard({
68
121
  username,
69
122
  memberId,
70
123
  handleDuplicateCourse,
71
- categories = [],
124
+ learnLang,
125
+ getCategories,
126
+ handleSelectCategory,
72
127
  currentLanguage,
73
- isCategoriesLoading = false,
74
- handleSelectCategory = () => {}
128
+ categoryTypesArray
75
129
  }) {
76
130
  const {
77
131
  classes
@@ -88,45 +142,15 @@ function Dashboard({
88
142
  children: t(`explore`)
89
143
  })
90
144
  })
91
- }), isCategoriesLoading || categories.length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.default.Fragment, {
92
- children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
93
- pb: 2,
94
- children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
95
- className: classes.header,
96
- children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
97
- className: classes.headerText,
98
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
99
- variant: "h5",
100
- component: "h2",
101
- children: categories.length > 0 ? t("categories") : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Skeleton.default, {
102
- variant: "rectangular",
103
- height: 32,
104
- width: 250
105
- })
106
- })
107
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Tooltip, {
108
- title: t("find_category"),
109
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.IconButton, {
110
- onClick: handleSearch,
111
- "aria-label": t("find_category"),
112
- color: "inherit",
113
- "data-cy": "search-category-fab",
114
- size: "large",
115
- role: "link",
116
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Search.default, {})
117
- })
118
- })]
119
- }), process.env.REACT_APP_STAGE === "dev" && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Categories.default, {
120
- t: t,
121
- handleSelectCategory: handleSelectCategory,
122
- currentLanguage: currentLanguage,
123
- categories: Array.isArray(categories) && categories.length ? categories : null
124
- })]
125
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
126
- pb: 2,
127
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Divider, {})
128
- })]
129
- }) : null, isPopularCoursesLoading || popularCourses.length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
145
+ }), categoryTypesArray?.[0] && /*#__PURE__*/(0, _jsxRuntime.jsx)(CategoryListComponent, {
146
+ categoryType: categoryTypesArray[0],
147
+ learnLang: learnLang,
148
+ getCategories: getCategories,
149
+ handleSelectCategory: handleSelectCategory,
150
+ currentLanguage: currentLanguage,
151
+ t: t,
152
+ classes: classes
153
+ }), isPopularCoursesLoading || popularCourses.length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
130
154
  children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
131
155
  pb: 2,
132
156
  children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
@@ -181,7 +205,15 @@ function Dashboard({
181
205
  pb: 2,
182
206
  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Divider, {})
183
207
  })]
184
- }) : null, isRecommendedCoursesLoading || recommendedCourses.length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
208
+ }) : null, categoryTypesArray?.[1] && /*#__PURE__*/(0, _jsxRuntime.jsx)(CategoryListComponent, {
209
+ categoryType: categoryTypesArray[1],
210
+ learnLang: learnLang,
211
+ getCategories: getCategories,
212
+ handleSelectCategory: handleSelectCategory,
213
+ currentLanguage: currentLanguage,
214
+ t: t,
215
+ classes: classes
216
+ }), isRecommendedCoursesLoading || recommendedCourses.length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
185
217
  children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
186
218
  pb: 2,
187
219
  children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
@@ -236,7 +268,15 @@ function Dashboard({
236
268
  pb: 2,
237
269
  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Divider, {})
238
270
  })]
239
- }) : null, isNewCoursesLoading || newCourses.length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
271
+ }) : null, categoryTypesArray?.[2] && /*#__PURE__*/(0, _jsxRuntime.jsx)(CategoryListComponent, {
272
+ categoryType: categoryTypesArray[2],
273
+ learnLang: learnLang,
274
+ getCategories: getCategories,
275
+ handleSelectCategory: handleSelectCategory,
276
+ currentLanguage: currentLanguage,
277
+ t: t,
278
+ classes: classes
279
+ }), isNewCoursesLoading || newCourses.length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
240
280
  children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
241
281
  pb: 2,
242
282
  children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@nualang/nualang-ui-components",
3
- "version": "0.1.1211",
3
+ "version": "0.1.1212",
4
4
  "main": "dist/index.js",
5
5
  "files": [
6
6
  "dist",