@nualang/nualang-ui-components 0.1.1199 → 0.1.1201

package/README.md

@@ -1,65 +1,65 @@
-# Nualang ui-components
-This is the ui-components repository for the Nualang product. The components
-are developed, reviewed and tested with storybook and a library is then published
-to `npm` and consumed from there by nualang web apps.
-
-## Getting Started
-Clone this repository and then execute `npm install`. `npm start` will start
-[stoybook](https://storybook.js.org) and allow you to brrowse the available components.
-
-## Develop
-```
-npm start
-```
-
-## Create Local Package
-Compile and pack (This will create a '.tgz' file):
-```
-npm run localpack
-```
-
-Install package (Inside webapp):
-```
-npm i ../ui-components/fathomtech-nualang-ui-components-0.1.XXX.tgz
-```
-
-If webapp is caching previous versions (Add a character to the end of the .tgz, e.g 'a') and install again:
-```
-yarn add ../ui-components/fathomtech-nualang-ui-components-0.1.XXXa.tgz
-```
-
-## Publish to npm
-Make sure that the version number has been updayed in package.json.
-Ensure that you have committed the latest version to git.
-Execute:-
-```bash
-npm run postversion
-```
-npm will complain if you try to re-publish a previously used version number.
-
-
-## Additional Scripts
-In the project directory, you can run:
-
-### `npm run storybook`
-Runs the app in the development mode.<br />
-Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
-
-The page will reload if you make edits.<br />
-You should also see any lint errors in the console.
-
-### `npm run test`
-Launches the test runner in interactive watch mode.<br />
-See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
-
-### `npm run lint`
-Check for any lint errors or warnings.
-
-### `npm run compile`
-Run the babel compiler to compile es6 to js.
-
-### `npm run postversion`
-Publish a new version of the pacakage to npm. npm will complain
-
-### `npm run chromatic`
+# Nualang ui-components
+This is the ui-components repository for the Nualang product. The components
+are developed, reviewed and tested with storybook and a library is then published
+to `npm` and consumed from there by nualang web apps.
+
+## Getting Started
+Clone this repository and then execute `npm install`. `npm start` will start
+[stoybook](https://storybook.js.org) and allow you to brrowse the available components.
+
+## Develop
+```
+npm start
+```
+
+## Create Local Package
+Compile and pack (This will create a '.tgz' file):
+```
+npm run localpack
+```
+
+Install package (Inside webapp):
+```
+npm i ../ui-components/fathomtech-nualang-ui-components-0.1.XXX.tgz
+```
+
+If webapp is caching previous versions (Add a character to the end of the .tgz, e.g 'a') and install again:
+```
+yarn add ../ui-components/fathomtech-nualang-ui-components-0.1.XXXa.tgz
+```
+
+## Publish to npm
+Make sure that the version number has been updayed in package.json.
+Ensure that you have committed the latest version to git.
+Execute:-
+```bash
+npm run postversion
+```
+npm will complain if you try to re-publish a previously used version number.
+
+
+## Additional Scripts
+In the project directory, you can run:
+
+### `npm run storybook`
+Runs the app in the development mode.<br />
+Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
+
+The page will reload if you make edits.<br />
+You should also see any lint errors in the console.
+
+### `npm run test`
+Launches the test runner in interactive watch mode.<br />
+See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
+
+### `npm run lint`
+Check for any lint errors or warnings.
+
+### `npm run compile`
+Run the babel compiler to compile es6 to js.
+
+### `npm run postversion`
+Publish a new version of the pacakage to npm. npm will complain
+
+### `npm run chromatic`
 Publish a new version of the pacakage to https://www.chromatic.com/ 

package/dist/Cards/Assignment/Assignment.js

@@ -0,0 +1,220 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = Assignment;
+var _react = _interopRequireWildcard(require("react"));
+var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
+var _Avatar = _interopRequireDefault(require("@mui/material/Avatar"));
+var _ExpandMore = _interopRequireDefault(require("@mui/icons-material/ExpandMore"));
+var _ExpandLess = _interopRequireDefault(require("@mui/icons-material/ExpandLess"));
+var _material = require("@mui/material");
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _AssignmentExerciseSelector = _interopRequireDefault(require("../../Misc/AssignmentExerciseSelector/AssignmentExerciseSelector"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+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); }
+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; }
+function Assignment({
+  t,
+  assignment,
+  handleStartExercise,
+  username,
+  getCourseSections,
+  getRoleplays,
+  isCreator
+}) {
+  t = text => text;
+  const [expanded, setExpanded] = (0, _react.useState)(false);
+  const calculateDaysUntilDue = dueDate => {
+    const now = new Date();
+    const due = new Date(dueDate);
+    const diffTime = due - now;
+    const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
+    if (diffDays < 0) {
+      return t("overdue");
+    } else if (diffDays === 0) {
+      return t("due_today");
+    } else if (diffDays === 1) {
+      return t("due_tomorrow");
+    } else {
+      return `${t("due_in")} ${diffDays} ${t("days")}`;
+    }
+  };
+  const handleIconClick = event => {
+    event.stopPropagation();
+    setExpanded(prev => !prev);
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Card, {
+    sx: {
+      display: "flex",
+      marginBottom: 2,
+      boxShadow: 3
+    },
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.CardContent, {
+      sx: {
+        flexGrow: 1
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Grid, {
+        container: true,
+        spacing: 2,
+        alignItems: "center",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Grid, {
+          item: true,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Avatar.default, {
+            sx: {
+              width: 50,
+              height: 50
+            },
+            src: assignment.image
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Grid, {
+          item: true,
+          xs: true,
+          flexDirection: "column",
+          display: "flex",
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+            variant: "body1",
+            component: "div",
+            children: assignment.title
+          }), !isCreator && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+            sx: {
+              display: "flex",
+              alignItems: "center"
+            },
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.LinearProgress, {
+              variant: "determinate",
+              value: assignment.completed / assignment.assigned * 100 //change this to the actual value of student completed
+              ,
+              sx: {
+                height: 10,
+                borderRadius: 5,
+                width: "25%"
+              },
+              color: "success"
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+              variant: "body2",
+              sx: {
+                color: "text.secondary",
+                marginLeft: 1
+              },
+              children: `${Math.round(assignment.completed / assignment.assigned * 100)}%`
+            })]
+          })]
+        }), isCreator && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Grid, {
+          item: true,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Button, {
+            color: "primary",
+            children: t("edit")
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Button, {
+            color: "primary",
+            children: t("delete")
+          })]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Grid, {
+          item: true,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+            variant: "button",
+            color: "text.secondary",
+            children: calculateDaysUntilDue(assignment.dueDate)
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Grid, {
+          item: true,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.IconButton, {
+            onClick: handleIconClick,
+            children: expanded ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ExpandLess.default, {}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_ExpandMore.default, {})
+          })
+        })]
+      }), expanded && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+        mt: 2,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Divider, {
+          sx: {
+            marginBottom: 1.5
+          }
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Grid, {
+          container: true,
+          spacing: 2,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Grid, {
+            item: true,
+            xs: 12,
+            md: 9.5,
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+              variant: "body2",
+              children: assignment.description
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+              mt: 2,
+              width: "80%",
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_AssignmentExerciseSelector.default, {
+                t: t,
+                assignment: assignment,
+                handleStartExercise: handleStartExercise,
+                username: username,
+                getCourseSections: getCourseSections,
+                getRoleplays: getRoleplays,
+                isAssignment: true,
+                isCreator: isCreator
+              })
+            })]
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Grid, {
+            item: true,
+            xs: 3,
+            md: 2,
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+              display: "flex",
+              justifyContent: "space-between",
+              alignItems: "center",
+              sx: {
+                textAlign: "center"
+              },
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+                  variant: "h4",
+                  children: assignment.completed
+                }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+                  variant: "body2",
+                  color: "text.secondary",
+                  children: t("Completed")
+                })]
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Divider, {
+                orientation: "vertical",
+                flexItem: true,
+                sx: {
+                  width: "2px",
+                  marginX: 2,
+                  backgroundColor: "darkgray"
+                }
+              }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+                  variant: "h4",
+                  children: assignment.assigned
+                }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+                  variant: "body2",
+                  color: "text.secondary",
+                  children: t("assigned")
+                })]
+              })]
+            }), isCreator && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Button, {
+              variant: "contained",
+              sx: {
+                marginTop: 2,
+                marginLeft: "15px"
+              },
+              children: t("view_progress")
+            })]
+          })]
+        })]
+      })]
+    })
+  });
+}
+Assignment.propTypes = {
+  assignment: _propTypes.default.shape({
+    image: _propTypes.default.string,
+    title: _propTypes.default.string,
+    description: _propTypes.default.string,
+    dueDate: _propTypes.default.string.isRequired,
+    completed: _propTypes.default.number,
+    assigned: _propTypes.default.number,
+    t: _propTypes.default.func
+  }).isRequired
+};

package/dist/Cards/Assignment/package.json

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

package/dist/Cards/Avatar/Avatar.js

@@ -4,10 +4,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
 var _material = require("@mui/material");
 var _CardElements = require("../CardElements");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var _jsxRuntime = require("react/jsx-runtime");
 function AvatarCard({
   url,
   selected,
@@ -21,29 +20,32 @@ function AvatarCard({
     margin: theme => theme.spacing()
   };
   if (!url) {
-    return /*#__PURE__*/_react.default.createElement(_material.Card, {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Card, {
       sx: {
         display: "inline-block"
-      }
-    }, /*#__PURE__*/_react.default.createElement(_material.Skeleton, {
-      animation: "wave",
-      variant: "circular",
-      sx: avatarStyling
-    }));
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Skeleton, {
+        animation: "wave",
+        variant: "circular",
+        sx: avatarStyling
+      })
+    });
   }
-  return /*#__PURE__*/_react.default.createElement(_material.Card, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Card, {
     raised: selected,
     sx: selected ? {
       display: "inline-block"
     } : {
       display: "inline-block",
       ..._CardElements.classes.hover
-    }
-  }, /*#__PURE__*/_react.default.createElement(_material.ButtonBase, {
-    onClick: () => handleSelect()
-  }, /*#__PURE__*/_react.default.createElement(_material.Avatar, {
-    src: url,
-    sx: avatarStyling
-  })));
+    },
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ButtonBase, {
+      onClick: () => handleSelect(),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Avatar, {
+        src: url,
+        sx: avatarStyling
+      })
+    })
+  });
 }
 var _default = exports.default = AvatarCard;