@nualang/nualang-ui-components 0.1.1399 → 0.2.0

package/dist/Cards/CardElements/CardVisibility/CardVisibility.js

@@ -1,80 +0,0 @@
-import PropTypes from "prop-types";
-import Box from "@mui/material/Box";
-import Chip from "@mui/material/Chip";
-import PublicIcon from "@mui/icons-material/Public";
-import VpnLockIcon from "@mui/icons-material/VpnLock";
-import { blue } from "@mui/material/colors";
-import ArchiveIcon from "@mui/icons-material/Archive";
-import VisibilityOffIcon from "@mui/icons-material/VisibilityOff";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-function CardVisibility({
-  t = text => text,
-  visibility = "",
-  isCourseHidden = false
-}) {
-  const isPublic = visibility === "public";
-  let icon;
-  let color;
-  if (visibility === "public") {
-    icon = /*#__PURE__*/_jsx(PublicIcon, {
-      fontSize: "small"
-    });
-    color = "success";
-  } else if (visibility === "private") {
-    icon = /*#__PURE__*/_jsx(VpnLockIcon, {
-      fontSize: "small"
-    });
-    color = "info";
-  } else if (visibility === "archived") {
-    icon = /*#__PURE__*/_jsx(ArchiveIcon, {
-      fontSize: "small"
-    });
-    color = "secondary";
-  }
-  return /*#__PURE__*/_jsxs(Box, {
-    sx: {
-      position: "relative"
-    },
-    children: [/*#__PURE__*/_jsx(Chip, {
-      color: color,
-      icon: icon,
-      label: t(visibility),
-      sx: theme => ({
-        border: "1px solid",
-        position: "absolute",
-        bottom: "8px",
-        right: "8px",
-        fontWeight: "bold",
-        textTransform: "capitalize",
-        pointerEvents: "none",
-        boxShadow: theme.shadows[1],
-        backgroundColor: isPublic ? theme.palette.success.dark : theme.palette.mode === "light" ? blue[700] : blue[500],
-        ...(theme.palette.mode === "light" && {
-          color: "white"
-        })
-      })
-    }), isCourseHidden && /*#__PURE__*/_jsx(Chip, {
-      color: "success",
-      icon: /*#__PURE__*/_jsx(VisibilityOffIcon, {
-        fontSize: "small"
-      }),
-      label: t("hidden"),
-      sx: theme => ({
-        border: "1px solid",
-        position: "absolute",
-        bottom: "8px",
-        right: "108px",
-        fontWeight: "bold",
-        textTransform: "capitalize",
-        pointerEvents: "none",
-        boxShadow: theme.shadows[1],
-        backgroundColor: theme.palette.background.paper,
-        color: theme.palette.text.secondary
-      })
-    })]
-  });
-}
-CardVisibility.propTypes = {
-  visibility: PropTypes.string.isRequired
-};
-export default CardVisibility;

package/dist/Cards/CardElements/CardVisibility/package.json

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

package/dist/Cards/CardElements/index.js

@@ -1,169 +0,0 @@
-import { Box, Typography, Card, CardHeader as MuiCardHeader, Avatar, CardContent as MuiCardContent } from "@mui/material";
-import { styled } from "@mui/system";
-import CardTitle from "./CardTitle/CardTitle";
-import CardVisibility from "./CardVisibility/CardVisibility";
-import NualangVerifiedIcon from "../../Misc/NualangVerifiedIcon/NualangVerifiedIcon";
-import MedalSelector from "../../Misc/MedalSelector/MedalSelector";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const CardContainer = styled(Card)(({
-  theme
-}) => ({
-  textAlign: "left",
-  maxWidth: 600,
-  minWidth: 320,
-  display: "flex",
-  flexDirection: "column",
-  borderRadius: theme.spacing(2),
-  height: "100%"
-}));
-const CardAvatarImg = styled(Avatar)(({
-  theme
-}) => ({
-  position: "relative",
-  width: "54px",
-  height: "54px",
-  border: `3px solid ${theme.palette.background.paper}`,
-  backgroundColor: `${theme.palette.background.paper}`,
-  color: theme.palette.text.secondary,
-  cursor: "pointer",
-  transition: `transform 0.2s ease 0s`,
-  "&:hover": {
-    transform: `scale(1.08)`
-  }
-}));
-const CardAvatar = props => {
-  const {
-    badgeSize = "default"
-  } = props;
-  const passDownProps = {
-    ...props
-  };
-  delete passDownProps.badgeSize;
-  delete passDownProps.verificationStatus;
-  delete passDownProps.gameAward;
-  return /*#__PURE__*/_jsxs(Box, {
-    sx: theme => ({
-      position: "absolute",
-      bottom: theme.spacing(-3),
-      left: theme.spacing(2)
-    }),
-    children: [/*#__PURE__*/_jsx(CardAvatarImg, {
-      ...passDownProps
-    }), props.verificationStatus === "approved" && /*#__PURE__*/_jsx(NualangVerifiedIcon, {
-      sx: {
-        bottom: "0px",
-        right: "-5px",
-        fontSize: badgeSize === "small" ? 20 : 25
-      }
-    }), props.gameAward === "gold" && props.verificationStatus !== "approved" && /*#__PURE__*/_jsx(MedalSelector, {
-      color: "gold",
-      width: badgeSize === "small" ? 20 : 25,
-      fade: false,
-      backgroundColor: true,
-      sx: {
-        position: "absolute",
-        padding: "1px",
-        bottom: "0px",
-        right: "-5px",
-        borderRadius: "50%"
-      }
-    }), props.gameAward === "silver" && props.verificationStatus !== "approved" && /*#__PURE__*/_jsx(MedalSelector, {
-      color: "silver",
-      width: badgeSize === "small" ? 20 : 25,
-      fade: false,
-      backgroundColor: true,
-      sx: {
-        position: "absolute",
-        padding: "1px",
-        bottom: "0px",
-        right: "-5px",
-        borderRadius: "50%"
-      }
-    }), props.gameAward === "bronze" && props.verificationStatus !== "approved" && /*#__PURE__*/_jsx(MedalSelector, {
-      color: "bronze",
-      width: badgeSize === "small" ? 20 : 25,
-      fade: false,
-      backgroundColor: true,
-      sx: {
-        position: "absolute",
-        padding: "1px",
-        bottom: "0px",
-        right: "-5px",
-        borderRadius: "50%"
-      }
-    })]
-  });
-};
-const CardHeader = styled(MuiCardHeader)(() => ({
-  "& .MuiCardHeader-root": {
-    overflow: "hidden"
-  },
-  "& .MuiCardHeader-content": {
-    overflow: "hidden"
-  }
-}));
-const CardInfoSection = styled(Box)(({
-  theme
-}) => ({
-  [theme.breakpoints.down("sm")]: {
-    marginBottom: 0
-  },
-  marginBottom: theme.spacing(2),
-  color: theme.palette.text.secondary
-}));
-const CardInfoSectionItem = styled(Typography)(() => ({
-  display: "flex",
-  alignItems: "center"
-}));
-const CardDescription = styled(Typography)(({
-  theme
-}) => ({
-  [theme.breakpoints.down("sm")]: {
-    display: "none"
-  },
-  height: "80px",
-  overflow: "auto"
-}));
-const CardTop = styled("div")(() => ({
-  position: "relative"
-}));
-const CardContent = styled(MuiCardContent)(() => ({
-  flexGrow: 1,
-  overflow: "auto"
-}));
-const CardMenuIcon = styled("div")(({
-  theme
-}) => ({
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "center",
-  marginRight: theme.spacing(2)
-}));
-const LoadingCardContainer = styled(Card)(({
-  theme
-}) => ({
-  textAlign: "left",
-  color: theme.palette.text.secondary,
-  display: "flex",
-  flexDirection: "column",
-  borderRadius: theme.spacing(2)
-}));
-const classes = {
-  media: {
-    height: 0,
-    paddingTop: "56.25%" // 16:9
-  },
-  cursorPointer: {
-    cursor: "pointer"
-  },
-  infoIcon: {
-    mr: 1
-  },
-  hover: {
-    transition: "box-shadow 0.3s",
-    "&:hover": {
-      boxShadow: "0 5px 15px rgba(0, 0, 0, 0.3)"
-    }
-  }
-};
-export { classes, CardContainer, CardTop, CardAvatar, CardHeader, CardTitle, CardContent, CardInfoSection, CardInfoSectionItem, CardDescription, CardMenuIcon, CardVisibility, LoadingCardContainer };

package/dist/Cards/Category/Category.js

@@ -1,92 +0,0 @@
-import React from "react";
-import { Box, Typography, Card } from "@mui/material";
-import { CardContent } from "../CardElements";
-import { useTheme } from "@mui/material/styles";
-import useMediaQuery from "@mui/material/useMediaQuery";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export default function Category({
-  searchString,
-  categoryTitle,
-  Icon,
-  image,
-  backgroundColor = "#B103D8",
-  handleSelectCategory
-}) {
-  const theme = useTheme();
-  const isSmallScreen = useMediaQuery(theme.breakpoints.down("sm"));
-  return /*#__PURE__*/_jsxs(Card, {
-    sx: {
-      minHeight: isSmallScreen ? 100 : 150,
-      background: backgroundColor,
-      color: "white",
-      position: "relative",
-      display: "flex",
-      flexDirection: "column",
-      justifyContent: "space-between",
-      overflow: "hidden",
-      cursor: "pointer",
-      transition: "transform 0.3s ease, box-shadow 0.3s ease",
-      height: "100%",
-      borderRadius: theme.spacing(2),
-      "&:hover": {
-        boxShadow: "5px 10px 30px rgba(0, 0, 0, 0.15)",
-        transform: "translateY(5px)"
-      }
-    },
-    onClick: () => handleSelectCategory(searchString || categoryTitle),
-    children: [/*#__PURE__*/_jsxs(Box, {
-      sx: {
-        display: "flex",
-        flexDirection: "column",
-        height: "100%"
-      },
-      children: [/*#__PURE__*/_jsx(Box, {
-        sx: {
-          display: "flex",
-          justifyContent: "flex-start",
-          maxWidth: isSmallScreen ? "75%" : "55%"
-        },
-        children: /*#__PURE__*/_jsx(CardContent, {
-          sx: {
-            pl: 2.5
-          },
-          children: /*#__PURE__*/_jsx(Typography, {
-            variant: "h6",
-            sx: {
-              fontWeight: "bold"
-            },
-            children: categoryTitle
-          })
-        })
-      }), /*#__PURE__*/_jsx(Box, {
-        sx: {
-          display: "flex",
-          justifyContent: "flex-end",
-          alignItems: "flex-end",
-          marginTop: "auto",
-          maxWidth: "100%",
-          position: "relative"
-        },
-        children: !!Icon && /*#__PURE__*/_jsx(Icon, {
-          sx: {
-            fontSize: isSmallScreen ? 70 : 100,
-            position: "absolute",
-            bottom: 10,
-            right: 10
-          }
-        })
-      })]
-    }), image && /*#__PURE__*/_jsx("img", {
-      src: image,
-      alt: `${categoryTitle} category image`,
-      style: {
-        position: "absolute",
-        bottom: 10,
-        right: 0,
-        borderRadius: "8px",
-        width: isSmallScreen ? "85px" : "200px",
-        transform: "rotate(10deg)"
-      }
-    })]
-  });
-}