diff --git a/src/App.js b/src/App.js index 9809064ab..e4f055cf3 100644 --- a/src/App.js +++ b/src/App.js @@ -16,7 +16,7 @@ Coded by www.creative-tim.com import { useEffect } from "react"; // react-router components -import { Routes, Route, Navigate, useLocation } from "react-router-dom"; +import { Routes, Route, useLocation } from "react-router-dom"; // @mui material components import { ThemeProvider } from "@mui/material/styles"; @@ -28,6 +28,7 @@ import Presentation from "layouts/pages/presentation"; // Material Kit 2 React routes import routes from "routes"; +import Home from "pages/public/Home"; export default function App() { const { pathname } = useLocation(); @@ -57,7 +58,7 @@ export default function App() { {getRoutes(routes)} } /> - } /> + } /> ); diff --git a/src/assets/images/bg-home.png b/src/assets/images/bg-home.png new file mode 100644 index 000000000..4da590683 Binary files /dev/null and b/src/assets/images/bg-home.png differ diff --git a/src/components/MDAlert/MDAlertCloseIcon.js b/src/components/MDAlert/MDAlertCloseIcon.js new file mode 100644 index 000000000..c04746072 --- /dev/null +++ b/src/components/MDAlert/MDAlertCloseIcon.js @@ -0,0 +1,35 @@ +/** +========================================================= +* Material Dashboard 2 React - v2.2.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// @mui material components +import { styled } from "@mui/material/styles"; + +export default styled("span")(({ theme }) => { + const { palette, typography, functions } = theme; + + const { white } = palette; + const { size, fontWeightMedium } = typography; + const { pxToRem } = functions; + + return { + color: white.main, + fontSize: size.xl, + padding: `${pxToRem(9)} ${pxToRem(6)} ${pxToRem(8)}`, + marginLeft: pxToRem(40), + fontWeight: fontWeightMedium, + cursor: "pointer", + lineHeight: 0, + }; +}); diff --git a/src/components/MDAlert/MDAlertRoot.js b/src/components/MDAlert/MDAlertRoot.js new file mode 100644 index 000000000..bb5099ea2 --- /dev/null +++ b/src/components/MDAlert/MDAlertRoot.js @@ -0,0 +1,48 @@ +/** +========================================================= +* Material Dashboard 2 React - v2.2.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// @mui material components +import Box from "@mui/material/Box"; +import { styled } from "@mui/material/styles"; + +export default styled(Box)(({ theme, ownerState }) => { + const { palette, typography, borders, functions } = theme; + const { color } = ownerState; + + const { white, gradients } = palette; + const { fontSizeRegular, fontWeightMedium } = typography; + const { borderRadius } = borders; + const { pxToRem, linearGradient } = functions; + + // backgroundImage value + const backgroundImageValue = gradients[color] + ? linearGradient(gradients[color].main, gradients[color].state) + : linearGradient(gradients.info.main, gradients.info.state); + + return { + display: "flex", + justifyContent: "space-between", + alignItems: "center", + minHeight: pxToRem(60), + backgroundImage: backgroundImageValue, + color: white.main, + position: "relative", + padding: pxToRem(16), + marginBottom: pxToRem(16), + borderRadius: borderRadius.md, + fontSize: fontSizeRegular, + fontWeight: fontWeightMedium, + }; +}); diff --git a/src/components/MDAlert/index.js b/src/components/MDAlert/index.js new file mode 100644 index 000000000..1ee222ed1 --- /dev/null +++ b/src/components/MDAlert/index.js @@ -0,0 +1,86 @@ +/** +========================================================= +* Material Dashboard 2 React - v2.2.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +import { useState } from "react"; + +// prop-types is a library for typechecking of props +import PropTypes from "prop-types"; + +// @mui material components +import Fade from "@mui/material/Fade"; + +// Material Dashboard 2 React components +import MDBox from "components/MDBox"; + +// Custom styles for the MDAlert +import MDAlertRoot from "components/MDAlert/MDAlertRoot"; +import MDAlertCloseIcon from "components/MDAlert/MDAlertCloseIcon"; + +function MDAlert({ color, dismissible, children, ...rest }) { + const [alertStatus, setAlertStatus] = useState("mount"); + + const handleAlertStatus = () => setAlertStatus("fadeOut"); + + // The base template for the alert + const alertTemplate = (mount = true) => ( + + + + {children} + + {dismissible ? ( + × + ) : null} + + + ); + + switch (true) { + case alertStatus === "mount": + return alertTemplate(); + case alertStatus === "fadeOut": + setTimeout(() => setAlertStatus("unmount"), 400); + return alertTemplate(false); + default: + alertTemplate(); + break; + } + + return null; +} + +// Setting default values for the props of MDAlert +MDAlert.defaultProps = { + color: "info", + dismissible: false, +}; + +// Typechecking props of the MDAlert +MDAlert.propTypes = { + color: PropTypes.oneOf([ + "primary", + "secondary", + "info", + "success", + "warning", + "error", + "light", + "dark", + ]), + dismissible: PropTypes.bool, + children: PropTypes.node.isRequired, +}; + +export default MDAlert; diff --git a/src/components/MDAvatar/MDAvatarRoot.js b/src/components/MDAvatar/MDAvatarRoot.js new file mode 100644 index 000000000..8bbeded5d --- /dev/null +++ b/src/components/MDAvatar/MDAvatarRoot.js @@ -0,0 +1,89 @@ +/** +========================================================= +* Material Dashboard 2 React - v2.2.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// @mui material components +import Avatar from "@mui/material/Avatar"; +import { styled } from "@mui/material/styles"; + +export default styled(Avatar)(({ theme, ownerState }) => { + const { palette, functions, typography, boxShadows } = theme; + const { shadow, bgColor, size } = ownerState; + + const { gradients, transparent, white } = palette; + const { pxToRem, linearGradient } = functions; + const { size: fontSize, fontWeightRegular } = typography; + + // backgroundImage value + const backgroundValue = + bgColor === "transparent" + ? transparent.main + : linearGradient(gradients[bgColor].main, gradients[bgColor].state); + + // size value + let sizeValue; + + switch (size) { + case "xs": + sizeValue = { + width: pxToRem(24), + height: pxToRem(24), + fontSize: fontSize.xs, + }; + break; + case "sm": + sizeValue = { + width: pxToRem(36), + height: pxToRem(36), + fontSize: fontSize.sm, + }; + break; + case "lg": + sizeValue = { + width: pxToRem(58), + height: pxToRem(58), + fontSize: fontSize.sm, + }; + break; + case "xl": + sizeValue = { + width: pxToRem(74), + height: pxToRem(74), + fontSize: fontSize.md, + }; + break; + case "xxl": + sizeValue = { + width: pxToRem(110), + height: pxToRem(110), + fontSize: fontSize.md, + }; + break; + default: { + sizeValue = { + width: pxToRem(48), + height: pxToRem(48), + fontSize: fontSize.md, + }; + } + } + + return { + background: backgroundValue, + color: white.main, + fontWeight: fontWeightRegular, + boxShadow: boxShadows[shadow], + ...sizeValue, + }; +}); diff --git a/src/components/MDAvatar/index.js b/src/components/MDAvatar/index.js new file mode 100644 index 000000000..294f430e1 --- /dev/null +++ b/src/components/MDAvatar/index.js @@ -0,0 +1,52 @@ +/** +========================================================= +* Material Dashboard 2 React - v2.2.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +import { forwardRef } from "react"; + +// prop-types is a library for typechecking of props +import PropTypes from "prop-types"; + +// Custom styles for MDAvatar +import MDAvatarRoot from "components/MDAvatar/MDAvatarRoot"; + +const MDAvatar = forwardRef(({ bgColor, size, shadow, ...rest }, ref) => ( + +)); + +// Setting default values for the props of MDAvatar +MDAvatar.defaultProps = { + bgColor: "transparent", + size: "md", + shadow: "none", +}; + +// Typechecking props for the MDAvatar +MDAvatar.propTypes = { + bgColor: PropTypes.oneOf([ + "transparent", + "primary", + "secondary", + "info", + "success", + "warning", + "error", + "light", + "dark", + ]), + size: PropTypes.oneOf(["xs", "sm", "md", "lg", "xl", "xxl"]), + shadow: PropTypes.oneOf(["none", "xs", "sm", "md", "lg", "xl", "xxl", "inset"]), +}; + +export default MDAvatar; diff --git a/src/components/MDBadge/MDBadgeRoot.js b/src/components/MDBadge/MDBadgeRoot.js new file mode 100644 index 000000000..3f922e54b --- /dev/null +++ b/src/components/MDBadge/MDBadgeRoot.js @@ -0,0 +1,134 @@ +/** +========================================================= +* Material Dashboard 2 React - v2.2.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// @mui material components +import Badge from "@mui/material/Badge"; +import { styled } from "@mui/material/styles"; + +export default styled(Badge)(({ theme, ownerState }) => { + const { palette, typography, borders, functions } = theme; + const { color, circular, border, size, indicator, variant, container, children } = ownerState; + + const { white, dark, gradients, badgeColors } = palette; + const { size: fontSize, fontWeightBold } = typography; + const { borderRadius, borderWidth } = borders; + const { pxToRem, linearGradient } = functions; + + // padding values + const paddings = { + xs: "0.45em 0.775em", + sm: "0.55em 0.9em", + md: "0.65em 1em", + lg: "0.85em 1.375em", + }; + + // fontSize value + const fontSizeValue = size === "xs" ? fontSize.xxs : fontSize.xs; + + // border value + const borderValue = border ? `${borderWidth[3]} solid ${white.main}` : "none"; + + // borderRadius value + const borderRadiusValue = circular ? borderRadius.section : borderRadius.md; + + // styles for the badge with indicator={true} + const indicatorStyles = (sizeProp) => { + let widthValue = pxToRem(20); + let heightValue = pxToRem(20); + + if (sizeProp === "medium") { + widthValue = pxToRem(24); + heightValue = pxToRem(24); + } else if (sizeProp === "large") { + widthValue = pxToRem(32); + heightValue = pxToRem(32); + } + + return { + width: widthValue, + height: heightValue, + display: "grid", + placeItems: "center", + textAlign: "center", + borderRadius: "50%", + padding: 0, + border: borderValue, + }; + }; + + // styles for the badge with variant="gradient" + const gradientStyles = (colorProp) => { + const backgroundValue = gradients[colorProp] + ? linearGradient(gradients[colorProp].main, gradients[colorProp].state) + : linearGradient(gradients.info.main, gradients.info.state); + const colorValue = colorProp === "light" ? dark.main : white.main; + + return { + background: backgroundValue, + color: colorValue, + }; + }; + + // styles for the badge with variant="contained" + const containedStyles = (colorProp) => { + const backgroundValue = badgeColors[colorProp] + ? badgeColors[colorProp].background + : badgeColors.info.background; + let colorValue = badgeColors[colorProp] ? badgeColors[colorProp].text : badgeColors.info.text; + + if (colorProp === "light") { + colorValue = dark.main; + } + return { + background: backgroundValue, + color: colorValue, + }; + }; + + // styles for the badge with no children and container={false} + const standAloneStyles = () => ({ + position: "static", + marginLeft: pxToRem(8), + transform: "none", + fontSize: pxToRem(9), + }); + + // styles for the badge with container={true} + const containerStyles = () => ({ + position: "relative", + transform: "none", + }); + + return { + "& .MuiBadge-badge": { + height: "auto", + padding: paddings[size] || paddings.xs, + fontSize: fontSizeValue, + fontWeight: fontWeightBold, + textTransform: "uppercase", + lineHeight: 1, + textAlign: "center", + whiteSpace: "nowrap", + verticalAlign: "baseline", + border: borderValue, + borderRadius: borderRadiusValue, + ...(indicator && indicatorStyles(size)), + ...(variant === "gradient" && gradientStyles(color)), + ...(variant === "contained" && containedStyles(color)), + ...(!children && !container && standAloneStyles(color)), + ...(container && containerStyles(color)), + }, + }; +}); diff --git a/src/components/MDBadge/index.js b/src/components/MDBadge/index.js new file mode 100644 index 000000000..d0a4d41a9 --- /dev/null +++ b/src/components/MDBadge/index.js @@ -0,0 +1,70 @@ +/** +========================================================= +* Material Dashboard 2 React - v2.2.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +import { forwardRef } from "react"; + +// prop-types is a library for typechecking of props +import PropTypes from "prop-types"; + +// Custom styles for the MDBadge +import MDBadgeRoot from "components/MDBadge/MDBadgeRoot"; + +const MDBadge = forwardRef( + ({ color, variant, size, circular, indicator, border, container, children, ...rest }, ref) => ( + + {children} + + ) +); + +// Setting default values for the props of MDBadge +MDBadge.defaultProps = { + color: "info", + variant: "gradient", + size: "sm", + circular: false, + indicator: false, + border: false, + children: false, + container: false, +}; + +// Typechecking props of the MDBadge +MDBadge.propTypes = { + color: PropTypes.oneOf([ + "primary", + "secondary", + "info", + "success", + "warning", + "error", + "light", + "dark", + ]), + variant: PropTypes.oneOf(["gradient", "contained"]), + size: PropTypes.oneOf(["xs", "sm", "md", "lg"]), + circular: PropTypes.bool, + indicator: PropTypes.bool, + border: PropTypes.bool, + children: PropTypes.node, + container: PropTypes.bool, +}; + +export default MDBadge; diff --git a/src/components/MDBox/MDBoxRoot.js b/src/components/MDBox/MDBoxRoot.js new file mode 100644 index 000000000..7cd34edea --- /dev/null +++ b/src/components/MDBox/MDBoxRoot.js @@ -0,0 +1,122 @@ +/** +========================================================= +* Material Dashboard 2 React - v2.2.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// @mui material components +import Box from "@mui/material/Box"; +import { styled } from "@mui/material/styles"; + +export default styled(Box)(({ theme, ownerState }) => { + const { palette, functions, borders, boxShadows } = theme; + const { variant, bgColor, color, opacity, borderRadius, shadow, coloredShadow } = ownerState; + + const { gradients, grey, white } = palette; + const { linearGradient } = functions; + const { borderRadius: radius } = borders; + const { colored } = boxShadows; + + const greyColors = { + "grey-100": grey[100], + "grey-200": grey[200], + "grey-300": grey[300], + "grey-400": grey[400], + "grey-500": grey[500], + "grey-600": grey[600], + "grey-700": grey[700], + "grey-800": grey[800], + "grey-900": grey[900], + }; + + const validGradients = [ + "primary", + "secondary", + "info", + "success", + "warning", + "error", + "dark", + "light", + ]; + + const validColors = [ + "transparent", + "white", + "black", + "primary", + "secondary", + "info", + "success", + "warning", + "error", + "light", + "dark", + "text", + "grey-100", + "grey-200", + "grey-300", + "grey-400", + "grey-500", + "grey-600", + "grey-700", + "grey-800", + "grey-900", + ]; + + const validBorderRadius = ["xs", "sm", "md", "lg", "xl", "xxl", "section"]; + const validBoxShadows = ["xs", "sm", "md", "lg", "xl", "xxl", "inset"]; + + // background value + let backgroundValue = bgColor; + + if (variant === "gradient") { + backgroundValue = validGradients.find((el) => el === bgColor) + ? linearGradient(gradients[bgColor].main, gradients[bgColor].state) + : white.main; + } else if (validColors.find((el) => el === bgColor)) { + backgroundValue = palette[bgColor] ? palette[bgColor].main : greyColors[bgColor]; + } else { + backgroundValue = bgColor; + } + + // color value + let colorValue = color; + + if (validColors.find((el) => el === color)) { + colorValue = palette[color] ? palette[color].main : greyColors[color]; + } + + // borderRadius value + let borderRadiusValue = borderRadius; + + if (validBorderRadius.find((el) => el === borderRadius)) { + borderRadiusValue = radius[borderRadius]; + } + + // boxShadow value + let boxShadowValue = "none"; + + if (validBoxShadows.find((el) => el === shadow)) { + boxShadowValue = boxShadows[shadow]; + } else if (coloredShadow) { + boxShadowValue = colored[coloredShadow] ? colored[coloredShadow] : "none"; + } + + return { + opacity, + background: backgroundValue, + color: colorValue, + borderRadius: borderRadiusValue, + boxShadow: boxShadowValue, + }; +}); diff --git a/src/components/MDBox/index.js b/src/components/MDBox/index.js new file mode 100644 index 000000000..632d2336f --- /dev/null +++ b/src/components/MDBox/index.js @@ -0,0 +1,66 @@ +/** +========================================================= +* Material Dashboard 2 React - v2.2.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +import { forwardRef } from "react"; + +// prop-types is a library for typechecking of props +import PropTypes from "prop-types"; + +// Custom styles for MDBox +import MDBoxRoot from "components/MDBox/MDBoxRoot"; + +const MDBox = forwardRef( + ({ variant, bgColor, color, opacity, borderRadius, shadow, coloredShadow, ...rest }, ref) => ( + + ) +); + +// Setting default values for the props of MDBox +MDBox.defaultProps = { + variant: "contained", + bgColor: "transparent", + color: "dark", + opacity: 1, + borderRadius: "none", + shadow: "none", + coloredShadow: "none", +}; + +// Typechecking props for the MDBox +MDBox.propTypes = { + variant: PropTypes.oneOf(["contained", "gradient"]), + bgColor: PropTypes.string, + color: PropTypes.string, + opacity: PropTypes.number, + borderRadius: PropTypes.string, + shadow: PropTypes.string, + coloredShadow: PropTypes.oneOf([ + "primary", + "secondary", + "info", + "success", + "warning", + "error", + "light", + "dark", + "none", + ]), +}; + +export default MDBox; diff --git a/src/components/MDButton/MDButtonRoot.js b/src/components/MDButton/MDButtonRoot.js new file mode 100644 index 000000000..3882e42fe --- /dev/null +++ b/src/components/MDButton/MDButtonRoot.js @@ -0,0 +1,276 @@ +/* eslint-disable prefer-destructuring */ +/** +========================================================= +* Material Dashboard 2 React - v2.2.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// @mui material components +import Button from "@mui/material/Button"; +import { styled } from "@mui/material/styles"; + +export default styled(Button)(({ theme, ownerState }) => { + const { palette, functions, borders, boxShadows } = theme; + const { color, variant, size, circular, iconOnly, darkMode } = ownerState; + + const { white, text, transparent, gradients, grey } = palette; + const { boxShadow, linearGradient, pxToRem, rgba } = functions; + const { borderRadius } = borders; + const { colored } = boxShadows; + + // styles for the button with variant="contained" + const containedStyles = () => { + // background color value + const backgroundValue = palette[color] ? palette[color].main : white.main; + + // backgroundColor value when button is focused + const focusedBackgroundValue = palette[color] ? palette[color].focus : white.focus; + + // boxShadow value + const boxShadowValue = colored[color] + ? `${boxShadow([0, 3], [3, 0], palette[color].main, 0.15)}, ${boxShadow( + [0, 3], + [1, -2], + palette[color].main, + 0.2 + )}, ${boxShadow([0, 1], [5, 0], palette[color].main, 0.15)}` + : "none"; + + // boxShadow value when button is hovered + const hoveredBoxShadowValue = colored[color] + ? `${boxShadow([0, 14], [26, -12], palette[color].main, 0.4)}, ${boxShadow( + [0, 4], + [23, 0], + palette[color].main, + 0.15 + )}, ${boxShadow([0, 8], [10, -5], palette[color].main, 0.2)}` + : "none"; + + // color value + let colorValue = white.main; + + if (!darkMode && (color === "white" || color === "light" || !palette[color])) { + colorValue = text.main; + } else if (darkMode && (color === "white" || color === "light" || !palette[color])) { + colorValue = grey[600]; + } + + // color value when button is focused + let focusedColorValue = white.main; + + if (color === "white") { + focusedColorValue = text.main; + } else if (color === "primary" || color === "error" || color === "dark") { + focusedColorValue = white.main; + } + + return { + background: backgroundValue, + color: colorValue, + boxShadow: boxShadowValue, + + "&:hover": { + backgroundColor: backgroundValue, + boxShadow: hoveredBoxShadowValue, + }, + + "&:focus:not(:hover)": { + backgroundColor: focusedBackgroundValue, + boxShadow: palette[color] + ? boxShadow([0, 0], [0, 3.2], palette[color].main, 0.5) + : boxShadow([0, 0], [0, 3.2], white.main, 0.5), + }, + + "&:disabled": { + backgroundColor: backgroundValue, + color: focusedColorValue, + }, + }; + }; + + // styles for the button with variant="outlined" + const outliedStyles = () => { + // background color value + const backgroundValue = color === "white" ? rgba(white.main, 0.1) : transparent.main; + + // color value + const colorValue = palette[color] ? palette[color].main : white.main; + + // boxShadow value + const boxShadowValue = palette[color] + ? boxShadow([0, 0], [0, 3.2], palette[color].main, 0.5) + : boxShadow([0, 0], [0, 3.2], white.main, 0.5); + + // border color value + let borderColorValue = palette[color] ? palette[color].main : rgba(white.main, 0.75); + + if (color === "white") { + borderColorValue = rgba(white.main, 0.75); + } + + return { + background: backgroundValue, + color: colorValue, + borderColor: borderColorValue, + + "&:hover": { + background: transparent.main, + borderColor: colorValue, + }, + + "&:focus:not(:hover)": { + background: transparent.main, + boxShadow: boxShadowValue, + }, + + "&:active:not(:hover)": { + backgroundColor: colorValue, + color: white.main, + opacity: 0.85, + }, + + "&:disabled": { + color: colorValue, + borderColor: colorValue, + }, + }; + }; + + // styles for the button with variant="gradient" + const gradientStyles = () => { + // background value + const backgroundValue = + color === "white" || !gradients[color] + ? white.main + : linearGradient(gradients[color].main, gradients[color].state); + + // boxShadow value + const boxShadowValue = colored[color] + ? `${boxShadow([0, 3], [3, 0], palette[color].main, 0.15)}, ${boxShadow( + [0, 3], + [1, -2], + palette[color].main, + 0.2 + )}, ${boxShadow([0, 1], [5, 0], palette[color].main, 0.15)}` + : "none"; + + // boxShadow value when button is hovered + const hoveredBoxShadowValue = colored[color] + ? `${boxShadow([0, 14], [26, -12], palette[color].main, 0.4)}, ${boxShadow( + [0, 4], + [23, 0], + palette[color].main, + 0.15 + )}, ${boxShadow([0, 8], [10, -5], palette[color].main, 0.2)}` + : "none"; + + // color value + let colorValue = white.main; + + if (color === "white") { + colorValue = text.main; + } else if (color === "light") { + colorValue = gradients.dark.state; + } + + return { + background: backgroundValue, + color: colorValue, + boxShadow: boxShadowValue, + + "&:hover": { + boxShadow: hoveredBoxShadowValue, + }, + + "&:focus:not(:hover)": { + boxShadow: boxShadowValue, + }, + + "&:disabled": { + background: backgroundValue, + color: colorValue, + }, + }; + }; + + // styles for the button with variant="text" + const textStyles = () => { + // color value + const colorValue = palette[color] ? palette[color].main : white.main; + + // color value when button is focused + const focusedColorValue = palette[color] ? palette[color].focus : white.focus; + + return { + color: colorValue, + + "&:hover": { + color: focusedColorValue, + }, + + "&:focus:not(:hover)": { + color: focusedColorValue, + }, + }; + }; + + // styles for the button with circular={true} + const circularStyles = () => ({ + borderRadius: borderRadius.section, + }); + + // styles for the button with iconOnly={true} + const iconOnlyStyles = () => { + // width, height, minWidth and minHeight values + let sizeValue = pxToRem(38); + + if (size === "small") { + sizeValue = pxToRem(25.4); + } else if (size === "large") { + sizeValue = pxToRem(52); + } + + // padding value + let paddingValue = `${pxToRem(11)} ${pxToRem(11)} ${pxToRem(10)}`; + + if (size === "small") { + paddingValue = pxToRem(4.5); + } else if (size === "large") { + paddingValue = pxToRem(16); + } + + return { + width: sizeValue, + minWidth: sizeValue, + height: sizeValue, + minHeight: sizeValue, + padding: paddingValue, + + "& .material-icons": { + marginTop: 0, + }, + + "&:hover, &:focus, &:active": { + transform: "none", + }, + }; + }; + + return { + ...(variant === "contained" && containedStyles()), + ...(variant === "outlined" && outliedStyles()), + ...(variant === "gradient" && gradientStyles()), + ...(variant === "text" && textStyles()), + ...(circular && circularStyles()), + ...(iconOnly && iconOnlyStyles()), + }; +}); diff --git a/src/components/MDButton/index.js b/src/components/MDButton/index.js new file mode 100644 index 000000000..1f5131f65 --- /dev/null +++ b/src/components/MDButton/index.js @@ -0,0 +1,76 @@ +/** +========================================================= +* Material Dashboard 2 React - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/soft-ui-dashboard-pro-react +* Copyright 2021 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + +========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +import { forwardRef } from "react"; + +// prop-types is a library for typechecking of props +import PropTypes from "prop-types"; + +// Custom styles for MDButton +import MDButtonRoot from "components/MDButton/MDButtonRoot"; + +// Material Dashboard 2 React contexts +import { useMaterialUIController } from "context"; + +const MDButton = forwardRef( + ({ color, variant, size, circular, iconOnly, children, ...rest }, ref) => { + const [controller] = useMaterialUIController(); + const { darkMode } = controller; + + return ( + + {children} + + ); + } +); + +// Setting default values for the props of MDButton +MDButton.defaultProps = { + size: "medium", + variant: "contained", + color: "white", + circular: false, + iconOnly: false, +}; + +// Typechecking props for the MDButton +MDButton.propTypes = { + size: PropTypes.oneOf(["small", "medium", "large"]), + variant: PropTypes.oneOf(["text", "contained", "outlined", "gradient"]), + color: PropTypes.oneOf([ + "white", + "primary", + "secondary", + "info", + "success", + "warning", + "error", + "light", + "dark", + ]), + circular: PropTypes.bool, + iconOnly: PropTypes.bool, + children: PropTypes.node.isRequired, +}; + +export default MDButton; diff --git a/src/components/MDInput/MDInputRoot.js b/src/components/MDInput/MDInputRoot.js new file mode 100644 index 000000000..e6bc5a910 --- /dev/null +++ b/src/components/MDInput/MDInputRoot.js @@ -0,0 +1,71 @@ +/** +========================================================= +* Material Dashboard 2 React - v2.2.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// @mui material components +import TextField from "@mui/material/TextField"; +import { styled } from "@mui/material/styles"; + +export default styled(TextField)(({ theme, ownerState }) => { + const { palette, functions } = theme; + const { error, success, disabled } = ownerState; + + const { grey, transparent, error: colorError, success: colorSuccess } = palette; + const { pxToRem } = functions; + + // styles for the input with error={true} + const errorStyles = () => ({ + backgroundImage: + "url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23F44335' viewBox='0 0 12 12'%3E%3Ccircle cx='6' cy='6' r='4.5'/%3E%3Cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3E%3Ccircle cx='6' cy='8.2' r='.6' fill='%23F44335' stroke='none'/%3E%3C/svg%3E\")", + backgroundRepeat: "no-repeat", + backgroundPosition: `right ${pxToRem(12)} center`, + backgroundSize: `${pxToRem(16)} ${pxToRem(16)}`, + + "& .Mui-focused": { + "& .MuiOutlinedInput-notchedOutline, &:after": { + borderColor: colorError.main, + }, + }, + + "& .MuiInputLabel-root.Mui-focused": { + color: colorError.main, + }, + }); + + // styles for the input with success={true} + const successStyles = () => ({ + backgroundImage: + "url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 8'%3E%3Cpath fill='%234CAF50' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3E%3C/svg%3E\")", + backgroundRepeat: "no-repeat", + backgroundPosition: `right ${pxToRem(12)} center`, + backgroundSize: `${pxToRem(16)} ${pxToRem(16)}`, + + "& .Mui-focused": { + "& .MuiOutlinedInput-notchedOutline, &:after": { + borderColor: colorSuccess.main, + }, + }, + + "& .MuiInputLabel-root.Mui-focused": { + color: colorSuccess.main, + }, + }); + + return { + backgroundColor: disabled ? `${grey[200]} !important` : transparent.main, + pointerEvents: disabled ? "none" : "auto", + ...(error && errorStyles()), + ...(success && successStyles()), + }; +}); diff --git a/src/components/MDInput/index.js b/src/components/MDInput/index.js new file mode 100644 index 000000000..cff0a6e84 --- /dev/null +++ b/src/components/MDInput/index.js @@ -0,0 +1,42 @@ +/** +========================================================= +* Material Dashboard 2 React - v2.2.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +import { forwardRef } from "react"; + +// prop-types is a library for typechecking of props +import PropTypes from "prop-types"; + +// Custom styles for MDInput +import MDInputRoot from "components/MDInput/MDInputRoot"; + +const MDInput = forwardRef(({ error, success, disabled, ...rest }, ref) => ( + +)); + +// Setting default values for the props of MDInput +MDInput.defaultProps = { + error: false, + success: false, + disabled: false, +}; + +// Typechecking props for the MDInput +MDInput.propTypes = { + error: PropTypes.bool, + success: PropTypes.bool, + disabled: PropTypes.bool, +}; + +export default MDInput; diff --git a/src/components/MDPagination/MDPaginationItemRoot.js b/src/components/MDPagination/MDPaginationItemRoot.js new file mode 100644 index 000000000..402d8900e --- /dev/null +++ b/src/components/MDPagination/MDPaginationItemRoot.js @@ -0,0 +1,62 @@ +/** +========================================================= +* Material Dashboard 2 React - v2.2.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// @mui material components +import { styled } from "@mui/material/styles"; + +// Material Dashboard 2 React components +import MDButton from "components/MDButton"; + +export default styled(MDButton)(({ theme, ownerState }) => { + const { borders, functions, typography, palette } = theme; + const { variant, paginationSize, active } = ownerState; + + const { borderColor } = borders; + const { pxToRem } = functions; + const { fontWeightRegular, size: fontSize } = typography; + const { light } = palette; + + // width, height, minWidth and minHeight values + let sizeValue = pxToRem(36); + + if (paginationSize === "small") { + sizeValue = pxToRem(30); + } else if (paginationSize === "large") { + sizeValue = pxToRem(46); + } + + return { + borderColor, + margin: `0 ${pxToRem(2)}`, + pointerEvents: active ? "none" : "auto", + fontWeight: fontWeightRegular, + fontSize: fontSize.sm, + width: sizeValue, + minWidth: sizeValue, + height: sizeValue, + minHeight: sizeValue, + + "&:hover, &:focus, &:active": { + transform: "none", + boxShadow: (variant !== "gradient" || variant !== "contained") && "none !important", + opacity: "1 !important", + }, + + "&:hover": { + backgroundColor: light.main, + borderColor, + }, + }; +}); diff --git a/src/components/MDPagination/index.js b/src/components/MDPagination/index.js new file mode 100644 index 000000000..cd05814b3 --- /dev/null +++ b/src/components/MDPagination/index.js @@ -0,0 +1,95 @@ +/** +========================================================= +* Material Dashboard 2 React - v2.2.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +import { forwardRef, createContext, useContext, useMemo } from "react"; + +// prop-types is a library for typechecking of props +import PropTypes from "prop-types"; + +// Material Dashboard 2 React components +import MDBox from "components/MDBox"; + +// Custom styles for MDPagination +import MDPaginationItemRoot from "components/MDPagination/MDPaginationItemRoot"; + +// The Pagination main context +const Context = createContext(); + +const MDPagination = forwardRef( + ({ item, variant, color, size, active, children, ...rest }, ref) => { + const context = useContext(Context); + const paginationSize = context ? context.size : null; + + const value = useMemo(() => ({ variant, color, size }), [variant, color, size]); + + return ( + + {item ? ( + + {children} + + ) : ( + + {children} + + )} + + ); + } +); + +// Setting default values for the props of MDPagination +MDPagination.defaultProps = { + item: false, + variant: "gradient", + color: "info", + size: "medium", + active: false, +}; + +// Typechecking props for the MDPagination +MDPagination.propTypes = { + item: PropTypes.bool, + variant: PropTypes.oneOf(["gradient", "contained"]), + color: PropTypes.oneOf([ + "white", + "primary", + "secondary", + "info", + "success", + "warning", + "error", + "light", + "dark", + ]), + size: PropTypes.oneOf(["small", "medium", "large"]), + active: PropTypes.bool, + children: PropTypes.node.isRequired, +}; + +export default MDPagination; diff --git a/src/components/MDProgress/MDProgressRoot.js b/src/components/MDProgress/MDProgressRoot.js new file mode 100644 index 000000000..bc1d3db32 --- /dev/null +++ b/src/components/MDProgress/MDProgressRoot.js @@ -0,0 +1,45 @@ +/** +========================================================= +* Material Dashboard 2 React - v2.2.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// @mui material components +import { styled } from "@mui/material/styles"; +import LinearProgress from "@mui/material/LinearProgress"; + +export default styled(LinearProgress)(({ theme, ownerState }) => { + const { palette, functions } = theme; + const { color, value, variant } = ownerState; + + const { text, gradients } = palette; + const { linearGradient } = functions; + + // background value + let backgroundValue; + + if (variant === "gradient") { + backgroundValue = gradients[color] + ? linearGradient(gradients[color].main, gradients[color].state) + : linearGradient(gradients.info.main, gradients.info.state); + } else { + backgroundValue = palette[color] ? palette[color].main : palette.info.main; + } + + return { + "& .MuiLinearProgress-bar": { + background: backgroundValue, + width: `${value}%`, + color: text.main, + }, + }; +}); diff --git a/src/components/MDProgress/index.js b/src/components/MDProgress/index.js new file mode 100644 index 000000000..b69bdddad --- /dev/null +++ b/src/components/MDProgress/index.js @@ -0,0 +1,69 @@ +/** +========================================================= +* Material Dashboard 2 React - v2.2.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +import { forwardRef } from "react"; + +// prop-types is a library for typechecking of props +import PropTypes from "prop-types"; + +// Material Dashboard 2 React components +import MDTypography from "components/MDTypography"; + +// Custom styles for MDProgress +import MDProgressRoot from "components/MDProgress/MDProgressRoot"; + +const MDProgress = forwardRef(({ variant, color, value, label, ...rest }, ref) => ( + <> + {label && ( + + {value}% + + )} + + +)); + +// Setting default values for the props of MDProgress +MDProgress.defaultProps = { + variant: "contained", + color: "info", + value: 0, + label: false, +}; + +// Typechecking props for the MDProgress +MDProgress.propTypes = { + variant: PropTypes.oneOf(["contained", "gradient"]), + color: PropTypes.oneOf([ + "primary", + "secondary", + "info", + "success", + "warning", + "error", + "light", + "dark", + ]), + value: PropTypes.number, + label: PropTypes.bool, +}; + +export default MDProgress; diff --git a/src/components/MDSnackbar/MDSnackbarIconRoot.js b/src/components/MDSnackbar/MDSnackbarIconRoot.js new file mode 100644 index 000000000..316c340c2 --- /dev/null +++ b/src/components/MDSnackbar/MDSnackbarIconRoot.js @@ -0,0 +1,47 @@ +/** +========================================================= +* Material Dashboard 2 React - v2.2.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// @mui material components +import Icon from "@mui/material/Icon"; +import { styled } from "@mui/material/styles"; + +export default styled(Icon)(({ theme, ownerState }) => { + const { palette, functions, typography } = theme; + const { color, bgWhite } = ownerState; + + const { white, transparent, gradients } = palette; + const { pxToRem, linearGradient } = functions; + const { size } = typography; + + // backgroundImage value + let backgroundImageValue; + + if (bgWhite) { + backgroundImageValue = gradients[color] + ? linearGradient(gradients[color].main, gradients[color].state) + : linearGradient(gradients.info.main, gradients.info.state); + } else if (color === "light") { + backgroundImageValue = linearGradient(gradients.dark.main, gradients.dark.state); + } + + return { + backgroundImage: backgroundImageValue, + WebkitTextFillColor: bgWhite || color === "light" ? transparent.main : white.main, + WebkitBackgroundClip: "text", + marginRight: pxToRem(8), + fontSize: size.lg, + transform: `translateY(${pxToRem(-2)})`, + }; +}); diff --git a/src/components/MDSnackbar/index.js b/src/components/MDSnackbar/index.js new file mode 100644 index 000000000..1059752ad --- /dev/null +++ b/src/components/MDSnackbar/index.js @@ -0,0 +1,174 @@ +/** +========================================================= +* Material Dashboard 2 React - v2.2.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// prop-types is a library for typechecking of props +import PropTypes from "prop-types"; + +// @mui material components +import Snackbar from "@mui/material/Snackbar"; +import IconButton from "@mui/material/IconButton"; +import Icon from "@mui/material/Icon"; +import Divider from "@mui/material/Divider"; +import Fade from "@mui/material/Fade"; + +// Material Dashboard 2 React components +import MDBox from "components/MDBox"; +import MDTypography from "components/MDTypography"; + +// Custom styles for the MDSnackbar +import MDSnackbarIconRoot from "components/MDSnackbar/MDSnackbarIconRoot"; + +// Material Dashboard 2 React context +import { useMaterialUIController } from "context"; + +function MDSnackbar({ color, icon, title, dateTime, content, close, bgWhite, ...rest }) { + const [controller] = useMaterialUIController(); + const { darkMode } = controller; + + let titleColor; + let dateTimeColor; + let dividerColor; + + if (bgWhite) { + titleColor = color; + dateTimeColor = "dark"; + dividerColor = false; + } else if (color === "light") { + titleColor = darkMode ? "inherit" : "dark"; + dateTimeColor = darkMode ? "inherit" : "text"; + dividerColor = false; + } else { + titleColor = "white"; + dateTimeColor = "white"; + dividerColor = true; + } + + return ( + + close + + } + > + + darkMode ? palette.background.card : palette[color] || palette.white.main, + }} + > + + + + {icon} + + + {title} + + + + + {dateTime} + + + (bgWhite && !darkMode) || color === "light" ? dark.main : white.main, + fontWeight: ({ typography: { fontWeightBold } }) => fontWeightBold, + cursor: "pointer", + marginLeft: 2, + transform: "translateY(-1px)", + }} + onClick={close} + > + close + + + + + size.sm, + color: ({ palette: { white, text } }) => { + let colorValue = bgWhite || color === "light" ? text.main : white.main; + + if (darkMode) { + colorValue = color === "light" ? "inherit" : white.main; + } + + return colorValue; + }, + }} + > + {content} + + + + ); +} + +// Setting default values for the props of MDSnackbar +MDSnackbar.defaultProps = { + bgWhite: false, + color: "info", +}; + +// Typechecking props for MDSnackbar +MDSnackbar.propTypes = { + color: PropTypes.oneOf([ + "primary", + "secondary", + "info", + "success", + "warning", + "error", + "dark", + "light", + ]), + icon: PropTypes.node.isRequired, + title: PropTypes.string.isRequired, + dateTime: PropTypes.string.isRequired, + content: PropTypes.node.isRequired, + close: PropTypes.func.isRequired, + bgWhite: PropTypes.bool, +}; + +export default MDSnackbar; diff --git a/src/components/MDTypography/MDTypographyRoot.js b/src/components/MDTypography/MDTypographyRoot.js new file mode 100644 index 000000000..d81edaa1e --- /dev/null +++ b/src/components/MDTypography/MDTypographyRoot.js @@ -0,0 +1,66 @@ +/** +========================================================= +* Material Dashboard 2 React - v2.2.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// @mui material components +import Typography from "@mui/material/Typography"; +import { styled } from "@mui/material/styles"; + +export default styled(Typography)(({ theme, ownerState }) => { + const { palette, typography, functions } = theme; + const { color, textTransform, verticalAlign, fontWeight, opacity, textGradient, darkMode } = + ownerState; + + const { gradients, transparent, white } = palette; + const { fontWeightLight, fontWeightRegular, fontWeightMedium, fontWeightBold } = typography; + const { linearGradient } = functions; + + // fontWeight styles + const fontWeights = { + light: fontWeightLight, + regular: fontWeightRegular, + medium: fontWeightMedium, + bold: fontWeightBold, + }; + + // styles for the typography with textGradient={true} + const gradientStyles = () => ({ + backgroundImage: + color !== "inherit" && color !== "text" && color !== "white" && gradients[color] + ? linearGradient(gradients[color].main, gradients[color].state) + : linearGradient(gradients.dark.main, gradients.dark.state), + display: "inline-block", + WebkitBackgroundClip: "text", + WebkitTextFillColor: transparent.main, + position: "relative", + zIndex: 1, + }); + + // color value + let colorValue = color === "inherit" || !palette[color] ? "inherit" : palette[color].main; + + if (darkMode && (color === "inherit" || !palette[color])) { + colorValue = "inherit"; + } else if (darkMode && color === "dark") colorValue = white.main; + + return { + opacity, + textTransform, + verticalAlign, + textDecoration: "none", + color: colorValue, + fontWeight: fontWeights[fontWeight] && fontWeights[fontWeight], + ...(textGradient && gradientStyles()), + }; +}); diff --git a/src/components/MDTypography/index.js b/src/components/MDTypography/index.js new file mode 100644 index 000000000..97bd4597b --- /dev/null +++ b/src/components/MDTypography/index.js @@ -0,0 +1,98 @@ +/** +========================================================= +* Material Dashboard 2 React - v2.2.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +import { forwardRef } from "react"; + +// prop-types is a library for typechecking of props +import PropTypes from "prop-types"; + +// Custom styles for MDTypography +import MDTypographyRoot from "components/MDTypography/MDTypographyRoot"; + +// Material Dashboard 2 React contexts +import { useMaterialUIController } from "context"; + +const MDTypography = forwardRef( + ( + { color, fontWeight, textTransform, verticalAlign, textGradient, opacity, children, ...rest }, + ref + ) => { + const [controller] = useMaterialUIController(); + const { darkMode } = controller; + + return ( + + {children} + + ); + } +); + +// Setting default values for the props of MDTypography +MDTypography.defaultProps = { + color: "dark", + fontWeight: false, + textTransform: "none", + verticalAlign: "unset", + textGradient: false, + opacity: 1, +}; + +// Typechecking props for the MDTypography +MDTypography.propTypes = { + color: PropTypes.oneOf([ + "inherit", + "primary", + "secondary", + "info", + "success", + "warning", + "error", + "light", + "dark", + "text", + "white", + ]), + fontWeight: PropTypes.oneOf([false, "light", "regular", "medium", "bold"]), + textTransform: PropTypes.oneOf(["none", "capitalize", "uppercase", "lowercase"]), + verticalAlign: PropTypes.oneOf([ + "unset", + "baseline", + "sub", + "super", + "text-top", + "text-bottom", + "middle", + "top", + "bottom", + ]), + textGradient: PropTypes.bool, + children: PropTypes.node.isRequired, + opacity: PropTypes.number, +}; + +export default MDTypography; diff --git a/src/context/index.js b/src/context/index.js new file mode 100644 index 000000000..c88bb6e97 --- /dev/null +++ b/src/context/index.js @@ -0,0 +1,136 @@ +/** +========================================================= +* Material Dashboard 2 React - v2.2.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +/** + This file is used for controlling the global states of the components, + you can customize the states for the different components here. +*/ + +import { createContext, useContext, useReducer, useMemo } from "react"; + +// prop-types is a library for typechecking of props +import PropTypes from "prop-types"; + +// Material Dashboard 2 React main context +const MaterialUI = createContext(); + +// Setting custom name for the context which is visible on react dev tools +MaterialUI.displayName = "MaterialUIContext"; + +// Material Dashboard 2 React reducer +function reducer(state, action) { + switch (action.type) { + case "MINI_SIDENAV": { + return { ...state, miniSidenav: action.value }; + } + case "TRANSPARENT_SIDENAV": { + return { ...state, transparentSidenav: action.value }; + } + case "WHITE_SIDENAV": { + return { ...state, whiteSidenav: action.value }; + } + case "SIDENAV_COLOR": { + return { ...state, sidenavColor: action.value }; + } + case "TRANSPARENT_NAVBAR": { + return { ...state, transparentNavbar: action.value }; + } + case "FIXED_NAVBAR": { + return { ...state, fixedNavbar: action.value }; + } + case "OPEN_CONFIGURATOR": { + return { ...state, openConfigurator: action.value }; + } + case "DIRECTION": { + return { ...state, direction: action.value }; + } + case "LAYOUT": { + return { ...state, layout: action.value }; + } + case "DARKMODE": { + return { ...state, darkMode: action.value }; + } + default: { + throw new Error(`Unhandled action type: ${action.type}`); + } + } +} + +// Material Dashboard 2 React context provider +function MaterialUIControllerProvider({ children }) { + const initialState = { + miniSidenav: false, + transparentSidenav: false, + whiteSidenav: false, + sidenavColor: "info", + transparentNavbar: true, + fixedNavbar: true, + openConfigurator: false, + direction: "ltr", + layout: "dashboard", + darkMode: false, + }; + + const [controller, dispatch] = useReducer(reducer, initialState); + + const value = useMemo(() => [controller, dispatch], [controller, dispatch]); + + return {children}; +} + +// Material Dashboard 2 React custom hook for using context +function useMaterialUIController() { + const context = useContext(MaterialUI); + + if (!context) { + throw new Error( + "useMaterialUIController should be used inside the MaterialUIControllerProvider." + ); + } + + return context; +} + +// Typechecking props for the MaterialUIControllerProvider +MaterialUIControllerProvider.propTypes = { + children: PropTypes.node.isRequired, +}; + +// Context module functions +const setMiniSidenav = (dispatch, value) => dispatch({ type: "MINI_SIDENAV", value }); +const setTransparentSidenav = (dispatch, value) => dispatch({ type: "TRANSPARENT_SIDENAV", value }); +const setWhiteSidenav = (dispatch, value) => dispatch({ type: "WHITE_SIDENAV", value }); +const setSidenavColor = (dispatch, value) => dispatch({ type: "SIDENAV_COLOR", value }); +const setTransparentNavbar = (dispatch, value) => dispatch({ type: "TRANSPARENT_NAVBAR", value }); +const setFixedNavbar = (dispatch, value) => dispatch({ type: "FIXED_NAVBAR", value }); +const setOpenConfigurator = (dispatch, value) => dispatch({ type: "OPEN_CONFIGURATOR", value }); +const setDirection = (dispatch, value) => dispatch({ type: "DIRECTION", value }); +const setLayout = (dispatch, value) => dispatch({ type: "LAYOUT", value }); +const setDarkMode = (dispatch, value) => dispatch({ type: "DARKMODE", value }); + +export { + MaterialUIControllerProvider, + useMaterialUIController, + setMiniSidenav, + setTransparentSidenav, + setWhiteSidenav, + setSidenavColor, + setTransparentNavbar, + setFixedNavbar, + setOpenConfigurator, + setDirection, + setLayout, + setDarkMode, +}; diff --git a/src/examples/Dashboard/Breadcrumbs/index.js b/src/examples/Dashboard/Breadcrumbs/index.js new file mode 100644 index 000000000..4fa483523 --- /dev/null +++ b/src/examples/Dashboard/Breadcrumbs/index.js @@ -0,0 +1,104 @@ +/** +========================================================= +* Material Dashboard 2 React - v2.2.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// react-router-dom components +import { Link } from "react-router-dom"; + +// prop-types is a library for typechecking of props. +import PropTypes from "prop-types"; + +// @mui material components +import { Breadcrumbs as MuiBreadcrumbs } from "@mui/material"; +import Icon from "@mui/material/Icon"; + +// Material Dashboard 2 React components +import MDBox from "components/MDBox"; +import MDTypography from "components/MDTypography"; + +function Breadcrumbs({ icon, title, route, light }) { + const routes = route.slice(0, -1); + + return ( + + (light ? white.main : grey[600]), + }, + }} + > + + + {icon} + + + {routes.map((el) => ( + + + {el} + + + ))} + + {title.replace("-", " ")} + + + + {title.replace("-", " ")} + + + ); +} + +// Setting default values for the props of Breadcrumbs +Breadcrumbs.defaultProps = { + light: false, +}; + +// Typechecking props for the Breadcrumbs +Breadcrumbs.propTypes = { + icon: PropTypes.node.isRequired, + title: PropTypes.string.isRequired, + route: PropTypes.oneOfType([PropTypes.string, PropTypes.array]).isRequired, + light: PropTypes.bool, +}; + +export default Breadcrumbs; diff --git a/src/examples/Dashboard/Cards/BlogCards/SimpleBlogCard/index.js b/src/examples/Dashboard/Cards/BlogCards/SimpleBlogCard/index.js new file mode 100644 index 000000000..cd582aabe --- /dev/null +++ b/src/examples/Dashboard/Cards/BlogCards/SimpleBlogCard/index.js @@ -0,0 +1,108 @@ +/** +========================================================= +* Material Dashboard 2 React - v2.2.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// react-router components +import { Link } from "react-router-dom"; + +// prop-types is a library for typechecking of props +import PropTypes from "prop-types"; + +// @mui material components +import Card from "@mui/material/Card"; +import MuiLink from "@mui/material/Link"; + +// Material Dashboard 2 React components +import MDBox from "components/MDBox"; +import MDTypography from "components/MDTypography"; +import MDButton from "components/MDButton"; + +function SimpleBlogCard({ image, title, description, action }) { + return ( + + + + + + + + {title} + + + + {description} + + + {action.type === "external" ? ( + + {action.label} + + ) : ( + + {action.label} + + )} + + + ); +} + +// Typechecking props for the SimpleBlogCard +SimpleBlogCard.propTypes = { + image: PropTypes.string.isRequired, + title: PropTypes.string.isRequired, + description: PropTypes.string.isRequired, + action: PropTypes.shape({ + type: PropTypes.oneOf(["external", "internal"]).isRequired, + route: PropTypes.string.isRequired, + color: PropTypes.oneOf([ + "primary", + "secondary", + "info", + "success", + "warning", + "error", + "dark", + "light", + "default", + ]), + label: PropTypes.string.isRequired, + }).isRequired, +}; + +export default SimpleBlogCard; diff --git a/src/examples/Dashboard/Cards/InfoCards/DefaultInfoCard/index.js b/src/examples/Dashboard/Cards/InfoCards/DefaultInfoCard/index.js new file mode 100644 index 000000000..8f1421a35 --- /dev/null +++ b/src/examples/Dashboard/Cards/InfoCards/DefaultInfoCard/index.js @@ -0,0 +1,83 @@ +/** +========================================================= +* Material Dashboard 2 React - v2.2.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// prop-types is library for typechecking of props +import PropTypes from "prop-types"; + +// @mui material components +import Card from "@mui/material/Card"; +import Divider from "@mui/material/Divider"; +import Icon from "@mui/material/Icon"; + +// Material Dashboard 2 React components +import MDBox from "components/MDBox"; +import MDTypography from "components/MDTypography"; + +function DefaultInfoCard({ color, icon, title, description, value }) { + return ( + + + + {icon} + + + + + {title} + + {description && ( + + {description} + + )} + {description && !value ? null : } + {value && ( + + {value} + + )} + + + ); +} + +// Setting default values for the props of DefaultInfoCard +DefaultInfoCard.defaultProps = { + color: "info", + value: "", + description: "", +}; + +// Typechecking props for the DefaultInfoCard +DefaultInfoCard.propTypes = { + color: PropTypes.oneOf(["primary", "secondary", "info", "success", "warning", "error", "dark"]), + icon: PropTypes.node.isRequired, + title: PropTypes.string.isRequired, + description: PropTypes.string, + value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), +}; + +export default DefaultInfoCard; diff --git a/src/examples/Dashboard/Cards/InfoCards/ProfileInfoCard/index.js b/src/examples/Dashboard/Cards/InfoCards/ProfileInfoCard/index.js new file mode 100644 index 000000000..891ef8f17 --- /dev/null +++ b/src/examples/Dashboard/Cards/InfoCards/ProfileInfoCard/index.js @@ -0,0 +1,140 @@ +/** +========================================================= +* Material Dashboard 2 React - v2.2.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// react-routers components +import { Link } from "react-router-dom"; + +// prop-types is library for typechecking of props +import PropTypes from "prop-types"; + +// @mui material components +import Card from "@mui/material/Card"; +import Divider from "@mui/material/Divider"; +import Tooltip from "@mui/material/Tooltip"; +import Icon from "@mui/material/Icon"; + +// Material Dashboard 2 React components +import MDBox from "components/MDBox"; +import MDTypography from "components/MDTypography"; + +// Material Dashboard 2 React base styles +import colors from "assets/theme/base/colors"; +import typography from "assets/theme/base/typography"; + +function ProfileInfoCard({ title, description, info, social, action, shadow }) { + const labels = []; + const values = []; + const { socialMediaColors } = colors; + const { size } = typography; + + // Convert this form `objectKey` of the object key in to this `object key` + Object.keys(info).forEach((el) => { + if (el.match(/[A-Z\s]+/)) { + const uppercaseLetter = Array.from(el).find((i) => i.match(/[A-Z]+/)); + const newElement = el.replace(uppercaseLetter, ` ${uppercaseLetter.toLowerCase()}`); + + labels.push(newElement); + } else { + labels.push(el); + } + }); + + // Push the object values into the values array + Object.values(info).forEach((el) => values.push(el)); + + // Render the card info items + const renderItems = labels.map((label, key) => ( + + + {label}:   + + +  {values[key]} + + + )); + + // Render the card social media icons + const renderSocial = social.map(({ link, icon, color }) => ( + + {icon} + + )); + + return ( + + + + {title} + + + + edit + + + + + + + {description} + + + + + + + {renderItems} + + + social:   + + {renderSocial} + + + + + ); +} + +// Setting default props for the ProfileInfoCard +ProfileInfoCard.defaultProps = { + shadow: true, +}; + +// Typechecking props for the ProfileInfoCard +ProfileInfoCard.propTypes = { + title: PropTypes.string.isRequired, + description: PropTypes.string.isRequired, + info: PropTypes.objectOf(PropTypes.string).isRequired, + social: PropTypes.arrayOf(PropTypes.object).isRequired, + action: PropTypes.shape({ + route: PropTypes.string.isRequired, + tooltip: PropTypes.string.isRequired, + }).isRequired, + shadow: PropTypes.bool, +}; + +export default ProfileInfoCard; diff --git a/src/examples/Dashboard/Cards/MasterCard/index.js b/src/examples/Dashboard/Cards/MasterCard/index.js new file mode 100644 index 000000000..1b528fc49 --- /dev/null +++ b/src/examples/Dashboard/Cards/MasterCard/index.js @@ -0,0 +1,120 @@ +/** +========================================================= +* Material Dashboard 2 React - v2.2.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// prop-types is a library for typechecking of props +import PropTypes from "prop-types"; + +// @mui material components +import Card from "@mui/material/Card"; +import Icon from "@mui/material/Icon"; + +// Material Dashboard 2 React components +import MDBox from "components/MDBox"; +import MDTypography from "components/MDTypography"; + +// Images +import pattern from "assets/images/illustrations/pattern-tree.svg"; +import masterCardLogo from "assets/images/logos/mastercard.png"; + +function MasterCard({ color, number, holder, expires }) { + const numbers = [...`${number}`]; + + if (numbers.length < 16 || numbers.length > 16) { + throw new Error( + "Invalid value for the prop number, the value for the number prop shouldn't be greater than or less than 16 digits" + ); + } + + const num1 = numbers.slice(0, 4).join(""); + const num2 = numbers.slice(4, 8).join(""); + const num3 = numbers.slice(8, 12).join(""); + const num4 = numbers.slice(12, 16).join(""); + + return ( + ({ + background: gradients[color] + ? linearGradient(gradients[color].main, gradients[color].state) + : linearGradient(gradients.dark.main, gradients.dark.state), + boxShadow: xl, + position: "relative", + })} + > + + + + wifi + + + {num1}   {num2}   {num3}   {num4} + + + + + + Card Holder + + + {holder} + + + + + Expires + + + {expires} + + + + + + + + + + ); +} + +// Setting default values for the props of MasterCard +MasterCard.defaultProps = { + color: "dark", +}; + +// Typechecking props for the MasterCard +MasterCard.propTypes = { + color: PropTypes.oneOf(["primary", "secondary", "info", "success", "warning", "error", "dark"]), + number: PropTypes.number.isRequired, + holder: PropTypes.string.isRequired, + expires: PropTypes.string.isRequired, +}; + +export default MasterCard; diff --git a/src/examples/Dashboard/Cards/ProjectCards/DefaultProjectCard/index.js b/src/examples/Dashboard/Cards/ProjectCards/DefaultProjectCard/index.js new file mode 100644 index 000000000..85cbc6e24 --- /dev/null +++ b/src/examples/Dashboard/Cards/ProjectCards/DefaultProjectCard/index.js @@ -0,0 +1,171 @@ +/** +========================================================= +* Material Dashboard 2 React - v2.2.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// react-router-dom components +import { Link } from "react-router-dom"; + +// prop-types is a library for typechecking of props +import PropTypes from "prop-types"; + +// @mui material components +import Card from "@mui/material/Card"; +import CardMedia from "@mui/material/CardMedia"; +import Tooltip from "@mui/material/Tooltip"; + +// Material Dashboard 2 React components +import MDBox from "components/MDBox"; +import MDTypography from "components/MDTypography"; +import MDButton from "components/MDButton"; +import MDAvatar from "components/MDAvatar"; + +function DefaultProjectCard({ image, label, title, description, action, authors }) { + const renderAuthors = authors.map(({ image: media, name }) => ( + + ({ + border: `${borderWidth[2]} solid ${white.main}`, + cursor: "pointer", + position: "relative", + ml: -1.25, + + "&:hover, &:focus": { + zIndex: "10", + }, + })} + /> + + )); + + return ( + + + md, + objectFit: "cover", + objectPosition: "center", + }} + /> + + + + {label} + + + {action.type === "internal" ? ( + + {title} + + ) : ( + + {title} + + )} + + + + {description} + + + + {action.type === "internal" ? ( + + {action.label} + + ) : ( + + {action.label} + + )} + {renderAuthors} + + + + ); +} + +// Setting default values for the props of DefaultProjectCard +DefaultProjectCard.defaultProps = { + authors: [], +}; + +// Typechecking props for the DefaultProjectCard +DefaultProjectCard.propTypes = { + image: PropTypes.string.isRequired, + label: PropTypes.string.isRequired, + title: PropTypes.string.isRequired, + description: PropTypes.string.isRequired, + action: PropTypes.shape({ + type: PropTypes.oneOf(["external", "internal"]), + route: PropTypes.string.isRequired, + color: PropTypes.oneOf([ + "primary", + "secondary", + "info", + "success", + "warning", + "error", + "light", + "dark", + "white", + ]).isRequired, + label: PropTypes.string.isRequired, + }).isRequired, + authors: PropTypes.arrayOf(PropTypes.object), +}; + +export default DefaultProjectCard; diff --git a/src/examples/Dashboard/Cards/StatisticsCards/ComplexStatisticsCard/index.js b/src/examples/Dashboard/Cards/StatisticsCards/ComplexStatisticsCard/index.js new file mode 100644 index 000000000..0d3929f9a --- /dev/null +++ b/src/examples/Dashboard/Cards/StatisticsCards/ComplexStatisticsCard/index.js @@ -0,0 +1,115 @@ +/** +========================================================= +* Material Dashboard 2 React - v2.2.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// prop-types is a library for typechecking of props +import PropTypes from "prop-types"; + +// @mui material components +import Card from "@mui/material/Card"; +import Divider from "@mui/material/Divider"; +import Icon from "@mui/material/Icon"; + +// Material Dashboard 2 React components +import MDBox from "components/MDBox"; +import MDTypography from "components/MDTypography"; + +function ComplexStatisticsCard({ color, title, count, percentage, icon }) { + return ( + + + + + {icon} + + + + + {title} + + {count} + + + + + + + {percentage.amount} + +  {percentage.label} + + + + ); +} + +// Setting default values for the props of ComplexStatisticsCard +ComplexStatisticsCard.defaultProps = { + color: "info", + percentage: { + color: "success", + text: "", + label: "", + }, +}; + +// Typechecking props for the ComplexStatisticsCard +ComplexStatisticsCard.propTypes = { + color: PropTypes.oneOf([ + "primary", + "secondary", + "info", + "success", + "warning", + "error", + "light", + "dark", + ]), + title: PropTypes.string.isRequired, + count: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired, + percentage: PropTypes.shape({ + color: PropTypes.oneOf([ + "primary", + "secondary", + "info", + "success", + "warning", + "error", + "dark", + "white", + ]), + amount: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), + label: PropTypes.string, + }), + icon: PropTypes.node.isRequired, +}; + +export default ComplexStatisticsCard; diff --git a/src/examples/Dashboard/Charts/BarCharts/HorizontalBarChart/configs/index.js b/src/examples/Dashboard/Charts/BarCharts/HorizontalBarChart/configs/index.js new file mode 100644 index 000000000..4c821e3c3 --- /dev/null +++ b/src/examples/Dashboard/Charts/BarCharts/HorizontalBarChart/configs/index.js @@ -0,0 +1,80 @@ +/** +========================================================= +* Material Dashboard 2 React - v2.2.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +// Material Dashboard 2 React base styles +import typography from "assets/theme/base/typography"; + +function configs(labels, datasets) { + return { + data: { + labels, + datasets: [...datasets], + }, + options: { + indexAxis: "y", + responsive: true, + maintainAspectRatio: false, + plugins: { + legend: { + display: false, + }, + }, + scales: { + y: { + grid: { + drawBorder: false, + display: true, + drawOnChartArea: true, + drawTicks: false, + borderDash: [5, 5], + color: "#c1c4ce5c", + }, + ticks: { + display: true, + color: "#b2b9bf", + padding: 10, + font: { + size: 11, + family: typography.fontFamily, + style: "normal", + lineHeight: 2, + }, + }, + }, + x: { + grid: { + drawBorder: false, + display: false, + drawOnChartArea: true, + drawTicks: true, + color: "#c1c4ce5c", + }, + ticks: { + display: true, + color: "#b2b9bf", + padding: 20, + font: { + size: 11, + family: typography.fontFamily, + style: "normal", + lineHeight: 2, + }, + }, + }, + }, + }, + }; +} + +export default configs; diff --git a/src/examples/Dashboard/Charts/BarCharts/HorizontalBarChart/index.js b/src/examples/Dashboard/Charts/BarCharts/HorizontalBarChart/index.js new file mode 100644 index 000000000..55170cf4c --- /dev/null +++ b/src/examples/Dashboard/Charts/BarCharts/HorizontalBarChart/index.js @@ -0,0 +1,141 @@ +/** +========================================================= +* Material Dashboard 2 React - v2.2.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +import { useMemo } from "react"; + +// porp-types is a library for typechecking of props +import PropTypes from "prop-types"; + +// react-chartjs-2 components +import { Bar } from "react-chartjs-2"; +import { + Chart as ChartJS, + CategoryScale, + LinearScale, + BarElement, + Title, + Tooltip, + Legend, +} from "chart.js"; + +// @mui material components +import Card from "@mui/material/Card"; +import Icon from "@mui/material/Icon"; + +// Material Dashboard 2 React components +import MDBox from "components/MDBox"; +import MDTypography from "components/MDTypography"; + +// HorizontalBarChart configurations +import configs from "examples/Charts/BarCharts/HorizontalBarChart/configs"; + +// Material Dashboard 2 React base styles +import colors from "assets/theme/base/colors"; + +ChartJS.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend); + +function HorizontalBarChart({ icon, title, description, height, chart }) { + const chartDatasets = chart.datasets + ? chart.datasets.map((dataset) => ({ + ...dataset, + weight: 5, + borderWidth: 0, + borderRadius: 4, + backgroundColor: colors[dataset.color] + ? colors[dataset.color || "dark"].main + : colors.dark.main, + fill: false, + maxBarThickness: 35, + })) + : []; + + const { data, options } = configs(chart.labels || [], chartDatasets); + + const renderChart = ( + + {title || description ? ( + + {icon.component && ( + + {icon.component} + + )} + + {title && {title}} + + + {description} + + + + + ) : null} + {useMemo( + () => ( + + + + ), + [chart, height] + )} + + ); + + return title || description ? {renderChart} : renderChart; +} + +// Setting default values for the props of HorizontalBarChart +HorizontalBarChart.defaultProps = { + icon: { color: "info", component: "" }, + title: "", + description: "", + height: "19.125rem", +}; + +// Typechecking props for the HorizontalBarChart +HorizontalBarChart.propTypes = { + icon: PropTypes.shape({ + color: PropTypes.oneOf([ + "primary", + "secondary", + "info", + "success", + "warning", + "error", + "light", + "dark", + ]), + component: PropTypes.node, + }), + title: PropTypes.string, + description: PropTypes.oneOfType([PropTypes.string, PropTypes.node]), + height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), + chart: PropTypes.objectOf(PropTypes.array).isRequired, +}; + +export default HorizontalBarChart; diff --git a/src/examples/Dashboard/Charts/BarCharts/ReportsBarChart/configs/index.js b/src/examples/Dashboard/Charts/BarCharts/ReportsBarChart/configs/index.js new file mode 100644 index 000000000..732cb0ee2 --- /dev/null +++ b/src/examples/Dashboard/Charts/BarCharts/ReportsBarChart/configs/index.js @@ -0,0 +1,97 @@ +/** +========================================================= +* Material Dashboard 2 React - v2.2.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +function configs(labels, datasets) { + return { + data: { + labels, + datasets: [ + { + label: datasets.label, + tension: 0.4, + borderWidth: 0, + borderRadius: 4, + borderSkipped: false, + backgroundColor: "rgba(255, 255, 255, 0.8)", + data: datasets.data, + maxBarThickness: 6, + }, + ], + }, + options: { + responsive: true, + maintainAspectRatio: false, + plugins: { + legend: { + display: false, + }, + }, + interaction: { + intersect: false, + mode: "index", + }, + scales: { + y: { + grid: { + drawBorder: false, + display: true, + drawOnChartArea: true, + drawTicks: false, + borderDash: [5, 5], + color: "rgba(255, 255, 255, .2)", + }, + ticks: { + suggestedMin: 0, + suggestedMax: 500, + beginAtZero: true, + padding: 10, + font: { + size: 14, + weight: 300, + family: "Roboto", + style: "normal", + lineHeight: 2, + }, + color: "#fff", + }, + }, + x: { + grid: { + drawBorder: false, + display: true, + drawOnChartArea: true, + drawTicks: false, + borderDash: [5, 5], + color: "rgba(255, 255, 255, .2)", + }, + ticks: { + display: true, + color: "#f8f9fa", + padding: 10, + font: { + size: 14, + weight: 300, + family: "Roboto", + style: "normal", + lineHeight: 2, + }, + }, + }, + }, + }, + }; +} + +export default configs; diff --git a/src/examples/Dashboard/Charts/BarCharts/ReportsBarChart/index.js b/src/examples/Dashboard/Charts/BarCharts/ReportsBarChart/index.js new file mode 100644 index 000000000..47d0db082 --- /dev/null +++ b/src/examples/Dashboard/Charts/BarCharts/ReportsBarChart/index.js @@ -0,0 +1,107 @@ +/** +========================================================= +* Material Dashboard 2 React - v2.2.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +import { useMemo } from "react"; + +// porp-types is a library for typechecking of props +import PropTypes from "prop-types"; + +// react-chartjs-2 components +import { Bar } from "react-chartjs-2"; +import { + Chart as ChartJS, + CategoryScale, + LinearScale, + BarElement, + Title, + Tooltip, + Legend, +} from "chart.js"; + +// @mui material components +import Card from "@mui/material/Card"; +import Divider from "@mui/material/Divider"; +import Icon from "@mui/material/Icon"; + +// Material Dashboard 2 React components +import MDBox from "components/MDBox"; +import MDTypography from "components/MDTypography"; + +// ReportsBarChart configurations +import configs from "examples/Charts/BarCharts/ReportsBarChart/configs"; + +ChartJS.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend); + +function ReportsBarChart({ color, title, description, date, chart }) { + const { data, options } = configs(chart.labels || [], chart.datasets || {}); + + return ( + + + {useMemo( + () => ( + + + + ), + [color, chart] + )} + + + {title} + + + {description} + + + + + schedule + + + {date} + + + + + + ); +} + +// Setting default values for the props of ReportsBarChart +ReportsBarChart.defaultProps = { + color: "info", + description: "", +}; + +// Typechecking props for the ReportsBarChart +ReportsBarChart.propTypes = { + color: PropTypes.oneOf(["primary", "secondary", "info", "success", "warning", "error", "dark"]), + title: PropTypes.string.isRequired, + description: PropTypes.oneOfType([PropTypes.string, PropTypes.node]), + date: PropTypes.string.isRequired, + chart: PropTypes.objectOf(PropTypes.oneOfType([PropTypes.array, PropTypes.object])).isRequired, +}; + +export default ReportsBarChart; diff --git a/src/examples/Dashboard/Charts/BarCharts/VerticalBarChart/configs/index.js b/src/examples/Dashboard/Charts/BarCharts/VerticalBarChart/configs/index.js new file mode 100644 index 000000000..b94edf7f5 --- /dev/null +++ b/src/examples/Dashboard/Charts/BarCharts/VerticalBarChart/configs/index.js @@ -0,0 +1,78 @@ +/** +========================================================= +* Material Dashboard 2 React - v2.2.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Dashboard 2 React base styles +import typography from "assets/theme/base/typography"; + +function configs(labels, datasets) { + return { + data: { + labels, + datasets: [...datasets], + }, + options: { + responsive: true, + maintainAspectRatio: false, + plugins: { + legend: { + display: false, + }, + }, + scales: { + y: { + grid: { + drawBorder: false, + display: true, + drawOnChartArea: true, + drawTicks: false, + borderDash: [5, 5], + }, + ticks: { + display: true, + padding: 10, + color: "#9ca2b7", + font: { + size: 11, + family: typography.fontFamily, + style: "normal", + lineHeight: 2, + }, + }, + }, + x: { + grid: { + drawBorder: false, + display: false, + drawOnChartArea: true, + drawTicks: true, + }, + ticks: { + display: true, + color: "#9ca2b7", + padding: 10, + font: { + size: 11, + family: typography.fontFamily, + style: "normal", + lineHeight: 2, + }, + }, + }, + }, + }, + }; +} + +export default configs; diff --git a/src/examples/Dashboard/Charts/BarCharts/VerticalBarChart/index.js b/src/examples/Dashboard/Charts/BarCharts/VerticalBarChart/index.js new file mode 100644 index 000000000..0b89d7b79 --- /dev/null +++ b/src/examples/Dashboard/Charts/BarCharts/VerticalBarChart/index.js @@ -0,0 +1,141 @@ +/** +========================================================= +* Material Dashboard 2 React - v2.2.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +import { useMemo } from "react"; + +// porp-types is a library for typechecking of props +import PropTypes from "prop-types"; + +// react-chartjs-2 components +import { Bar } from "react-chartjs-2"; +import { + Chart as ChartJS, + CategoryScale, + LinearScale, + BarElement, + Title, + Tooltip, + Legend, +} from "chart.js"; + +// @mui material components +import Card from "@mui/material/Card"; +import Icon from "@mui/material/Icon"; + +// Material Dashboard 2 React components +import MDBox from "components/MDBox"; +import MDTypography from "components/MDTypography"; + +// VerticalBarChart configurations +import configs from "examples/Charts/BarCharts/VerticalBarChart/configs"; + +// Material Dashboard 2 React base styles +import colors from "assets/theme/base/colors"; + +ChartJS.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend); + +function VerticalBarChart({ icon, title, description, height, chart }) { + const chartDatasets = chart.datasets + ? chart.datasets.map((dataset) => ({ + ...dataset, + weight: 5, + borderWidth: 0, + borderRadius: 4, + backgroundColor: colors[dataset.color] + ? colors[dataset.color || "dark"].main + : colors.dark.main, + fill: false, + maxBarThickness: 35, + })) + : []; + + const { data, options } = configs(chart.labels || [], chartDatasets); + + const renderChart = ( + + {title || description ? ( + + {icon.component && ( + + {icon.component} + + )} + + {title && {title}} + + + {description} + + + + + ) : null} + {useMemo( + () => ( + + + + ), + [chart, height] + )} + + ); + + return title || description ? {renderChart} : renderChart; +} + +// Setting default values for the props of VerticalBarChart +VerticalBarChart.defaultProps = { + icon: { color: "info", component: "" }, + title: "", + description: "", + height: "19.125rem", +}; + +// Typechecking props for the VerticalBarChart +VerticalBarChart.propTypes = { + icon: PropTypes.shape({ + color: PropTypes.oneOf([ + "primary", + "secondary", + "info", + "success", + "warning", + "error", + "light", + "dark", + ]), + component: PropTypes.node, + }), + title: PropTypes.string, + description: PropTypes.oneOfType([PropTypes.string, PropTypes.node]), + height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), + chart: PropTypes.objectOf(PropTypes.array).isRequired, +}; + +export default VerticalBarChart; diff --git a/src/examples/Dashboard/Charts/BubbleChart/configs/index.js b/src/examples/Dashboard/Charts/BubbleChart/configs/index.js new file mode 100644 index 000000000..43573f715 --- /dev/null +++ b/src/examples/Dashboard/Charts/BubbleChart/configs/index.js @@ -0,0 +1,83 @@ +/** +========================================================= +* Material Dashboard 2 React - v2.2.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Dashboard 2 React base styles +import typography from "assets/theme/base/typography"; + +function configs(labels, datasets) { + return { + data: { + labels, + datasets: [...datasets], + }, + options: { + responsive: true, + maintainAspectRatio: false, + plugins: { + legend: { + display: false, + }, + }, + interaction: { + intersect: false, + mode: "index", + }, + scales: { + y: { + grid: { + drawBorder: false, + display: true, + drawOnChartArea: true, + drawTicks: false, + borderDash: [5, 5], + }, + ticks: { + display: true, + padding: 10, + color: "#b2b9bf", + font: { + size: 11, + family: typography.fontFamily, + style: "normal", + lineHeight: 2, + }, + }, + }, + x: { + grid: { + drawBorder: false, + display: true, + drawOnChartArea: true, + drawTicks: false, + borderDash: [5, 5], + }, + ticks: { + display: true, + color: "#b2b9bf", + padding: 10, + font: { + size: 11, + family: typography.fontFamily, + style: "normal", + lineHeight: 2, + }, + }, + }, + }, + }, + }; +} + +export default configs; diff --git a/src/examples/Dashboard/Charts/BubbleChart/index.js b/src/examples/Dashboard/Charts/BubbleChart/index.js new file mode 100644 index 000000000..4eb5e1ea2 --- /dev/null +++ b/src/examples/Dashboard/Charts/BubbleChart/index.js @@ -0,0 +1,135 @@ +/** +========================================================= +* Material Dashboard 2 React - v2.2.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +import { useMemo } from "react"; + +// porp-types is a library for typechecking of props +import PropTypes from "prop-types"; + +// react-chartjs-2 components +import { Bubble } from "react-chartjs-2"; +import { Chart as ChartJS, LinearScale, PointElement, Tooltip, Legend } from "chart.js"; + +// @mui material components +import Card from "@mui/material/Card"; +import Icon from "@mui/material/Icon"; + +// Material Dashboard 2 React components +import MDBox from "components/MDBox"; +import MDTypography from "components/MDTypography"; + +// BubbleChart configurations +import configs from "examples/Charts/BubbleChart/configs"; + +// Material Dashboard 2 React base styles +import colors from "assets/theme/base/colors"; + +ChartJS.register(LinearScale, PointElement, Tooltip, Legend); + +function BubbleChart({ icon, title, description, height, chart }) { + const chartDatasets = chart.datasets + ? chart.datasets.map((dataset) => ({ + ...dataset, + tension: 0.4, + borderWidth: 3, + pointRadius: 2, + backgroundColor: colors[dataset.color] + ? colors[dataset.color || "dark"].main + : colors.dark.main, + borderColor: colors[dataset.color] + ? colors[dataset.color || "dark"].main + : colors.dark.main, + maxBarThickness: 6, + })) + : []; + + const { data, options } = configs(chart.labels || [], chartDatasets); + + const renderChart = ( + + {title || description ? ( + + {icon.component && ( + + {icon.component} + + )} + + {title && {title}} + + + {description} + + + + + ) : null} + {useMemo( + () => ( + + + + ), + [chart, height] + )} + + ); + + return title || description ? {renderChart} : renderChart; +} + +// Setting default values for the props of BubbleChart +BubbleChart.defaultProps = { + icon: { color: "info", component: "" }, + title: "", + description: "", + height: "100%", +}; + +// Typechecking props for the BubbleChart +BubbleChart.propTypes = { + icon: PropTypes.shape({ + color: PropTypes.oneOf([ + "primary", + "secondary", + "info", + "success", + "warning", + "error", + "light", + "dark", + ]), + component: PropTypes.node, + }), + title: PropTypes.string, + description: PropTypes.oneOfType([PropTypes.string, PropTypes.node]), + height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), + chart: PropTypes.objectOf(PropTypes.array).isRequired, +}; + +export default BubbleChart; diff --git a/src/examples/Dashboard/Charts/DoughnutCharts/DefaultDoughnutChart/configs/index.js b/src/examples/Dashboard/Charts/DoughnutCharts/DefaultDoughnutChart/configs/index.js new file mode 100644 index 000000000..f6b84146d --- /dev/null +++ b/src/examples/Dashboard/Charts/DoughnutCharts/DefaultDoughnutChart/configs/index.js @@ -0,0 +1,74 @@ +/** +========================================================= +* Material Dashboard 2 React - v2.2.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +/* eslint-disable no-dupe-keys */ +// Material Dashboard 2 React base styles +import colors from "assets/theme/base/colors"; + +const { gradients, dark } = colors; + +function configs(labels, datasets, cutout = 60) { + const backgroundColors = []; + + if (datasets.backgroundColors) { + datasets.backgroundColors.forEach((color) => { + if (gradients[color]) { + if (color === "info") { + backgroundColors.push(gradients.info.main); + } else { + backgroundColors.push(gradients[color].state); + } + } else { + backgroundColors.push(dark.main); + } + }); + } else { + backgroundColors.push(dark.main); + } + + return { + data: { + labels, + datasets: [ + { + label: datasets.label, + weight: 9, + cutout, + tension: 0.9, + pointRadius: 2, + borderWidth: 2, + backgroundColor: backgroundColors, + fill: false, + data: datasets.data, + }, + ], + }, + options: { + responsive: true, + maintainAspectRatio: false, + plugins: { + legend: { + display: false, + }, + }, + interaction: { + intersect: false, + mode: "index", + }, + }, + }; +} + +export default configs; diff --git a/src/examples/Dashboard/Charts/DoughnutCharts/DefaultDoughnutChart/index.js b/src/examples/Dashboard/Charts/DoughnutCharts/DefaultDoughnutChart/index.js new file mode 100644 index 000000000..fba9c06f2 --- /dev/null +++ b/src/examples/Dashboard/Charts/DoughnutCharts/DefaultDoughnutChart/index.js @@ -0,0 +1,116 @@ +/** +========================================================= +* Material Dashboard 2 React - v2.2.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +import { useMemo } from "react"; + +// porp-types is a library for typechecking of props +import PropTypes from "prop-types"; + +// react-chartjs-2 components +import { Doughnut } from "react-chartjs-2"; +import { Chart as ChartJS, ArcElement, Tooltip, Legend } from "chart.js"; + +// @mui material components +import Card from "@mui/material/Card"; +import Icon from "@mui/material/Icon"; + +// Material Dashboard 2 React components +import MDBox from "components/MDBox"; +import MDTypography from "components/MDTypography"; + +// DefaultDoughnutChart configurations +import configs from "examples/Charts/DoughnutCharts/DefaultDoughnutChart/configs"; + +ChartJS.register(ArcElement, Tooltip, Legend); + +function DefaultDoughnutChart({ icon, title, description, height, chart }) { + const { data, options } = configs(chart.labels || [], chart.datasets || {}, chart.cutout); + + const renderChart = ( + + {title || description ? ( + + {icon.component && ( + + {icon.component} + + )} + + {title && {title}} + + + {description} + + + + + ) : null} + {useMemo( + () => ( + + + + ), + [chart, height] + )} + + ); + + return title || description ? {renderChart} : renderChart; +} + +// Setting default values for the props of DefaultDoughnutChart +DefaultDoughnutChart.defaultProps = { + icon: { color: "info", component: "" }, + title: "", + description: "", + height: "19.125rem", +}; + +// Typechecking props for the DefaultDoughnutChart +DefaultDoughnutChart.propTypes = { + icon: PropTypes.shape({ + color: PropTypes.oneOf([ + "primary", + "secondary", + "info", + "success", + "warning", + "error", + "light", + "dark", + ]), + component: PropTypes.node, + }), + title: PropTypes.string, + description: PropTypes.oneOfType([PropTypes.string, PropTypes.node]), + height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), + chart: PropTypes.objectOf(PropTypes.oneOfType([PropTypes.array, PropTypes.object])).isRequired, +}; + +export default DefaultDoughnutChart; diff --git a/src/examples/Dashboard/Charts/LineCharts/DefaultLineChart/configs/index.js b/src/examples/Dashboard/Charts/LineCharts/DefaultLineChart/configs/index.js new file mode 100644 index 000000000..6748063d5 --- /dev/null +++ b/src/examples/Dashboard/Charts/LineCharts/DefaultLineChart/configs/index.js @@ -0,0 +1,84 @@ +/** +========================================================= +* Material Dashboard 2 React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/nextjs-material-dashboard-pro +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +// Material Dashboard 2 React base styles +import typography from "assets/theme/base/typography"; + +function configs(labels, datasets) { + return { + data: { + labels, + datasets: [...datasets], + }, + options: { + responsive: true, + maintainAspectRatio: false, + plugins: { + legend: { + display: false, + }, + }, + interaction: { + intersect: false, + mode: "index", + }, + scales: { + y: { + grid: { + drawBorder: false, + display: true, + drawOnChartArea: true, + drawTicks: false, + borderDash: [5, 5], + color: "#c1c4ce5c", + }, + ticks: { + display: true, + padding: 10, + color: "#b2b9bf", + font: { + size: 11, + family: typography.fontFamily, + style: "normal", + lineHeight: 2, + }, + }, + }, + x: { + grid: { + drawBorder: false, + display: true, + drawOnChartArea: true, + drawTicks: true, + borderDash: [5, 5], + color: "#c1c4ce5c", + }, + ticks: { + display: true, + color: "#b2b9bf", + padding: 20, + font: { + size: 11, + family: typography.fontFamily, + style: "normal", + lineHeight: 2, + }, + }, + }, + }, + }, + }; +} + +export default configs; diff --git a/src/examples/Dashboard/Charts/LineCharts/DefaultLineChart/index.js b/src/examples/Dashboard/Charts/LineCharts/DefaultLineChart/index.js new file mode 100644 index 000000000..f3f9f750c --- /dev/null +++ b/src/examples/Dashboard/Charts/LineCharts/DefaultLineChart/index.js @@ -0,0 +1,156 @@ +/** +========================================================= +* Material Dashboard 2 React - v2.2.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +import { useMemo } from "react"; + +// porp-types is a library for typechecking of props +import PropTypes from "prop-types"; + +// react-chartjs-2 components +import { Line } from "react-chartjs-2"; +import { + Chart as ChartJS, + CategoryScale, + LinearScale, + PointElement, + LineElement, + Title, + Tooltip, + Legend, + Filler, +} from "chart.js"; + +// @mui material components +import Card from "@mui/material/Card"; +import Icon from "@mui/material/Icon"; + +// Material Dashboard 2 React components +import MDBox from "components/MDBox"; +import MDTypography from "components/MDTypography"; + +// DefaultLineChart configurations +import configs from "examples/Charts/LineCharts/DefaultLineChart/configs"; + +// Material Dashboard 2 React base styles +import colors from "assets/theme/base/colors"; + +ChartJS.register( + CategoryScale, + LinearScale, + PointElement, + LineElement, + Title, + Tooltip, + Legend, + Filler +); + +function DefaultLineChart({ icon, title, description, height, chart }) { + const chartDatasets = chart.datasets + ? chart.datasets.map((dataset) => ({ + ...dataset, + tension: 0, + pointRadius: 3, + borderWidth: 4, + backgroundColor: "transparent", + fill: true, + pointBackgroundColor: colors[dataset.color] + ? colors[dataset.color || "dark"].main + : colors.dark.main, + borderColor: colors[dataset.color] + ? colors[dataset.color || "dark"].main + : colors.dark.main, + maxBarThickness: 6, + })) + : []; + + const { data, options } = configs(chart.labels || [], chartDatasets); + + const renderChart = ( + + {title || description ? ( + + {icon.component && ( + + {icon.component} + + )} + + {title && {title}} + + + {description} + + + + + ) : null} + {useMemo( + () => ( + + + + ), + [chart, height] + )} + + ); + + return title || description ? {renderChart} : renderChart; +} + +// Setting default values for the props of DefaultLineChart +DefaultLineChart.defaultProps = { + icon: { color: "info", component: "" }, + title: "", + description: "", + height: "19.125rem", +}; + +// Typechecking props for the DefaultLineChart +DefaultLineChart.propTypes = { + icon: PropTypes.shape({ + color: PropTypes.oneOf([ + "primary", + "secondary", + "info", + "success", + "warning", + "error", + "light", + "dark", + ]), + component: PropTypes.node, + }), + title: PropTypes.string, + description: PropTypes.oneOfType([PropTypes.string, PropTypes.node]), + height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), + chart: PropTypes.objectOf(PropTypes.array).isRequired, +}; + +export default DefaultLineChart; diff --git a/src/examples/Dashboard/Charts/LineCharts/GradientLineChart/configs/index.js b/src/examples/Dashboard/Charts/LineCharts/GradientLineChart/configs/index.js new file mode 100644 index 000000000..8c438d125 --- /dev/null +++ b/src/examples/Dashboard/Charts/LineCharts/GradientLineChart/configs/index.js @@ -0,0 +1,83 @@ +/** +========================================================= +* NextJS Material Dashboard 2 - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/nextjs-material-dashboard-pro +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// NextJS Material Dashboard 2 base styles +import typography from "assets/theme/base/typography"; + +function configs(labels, datasets) { + return { + data: { + labels, + datasets: [...datasets], + }, + options: { + responsive: true, + maintainAspectRatio: false, + plugins: { + legend: { + display: false, + }, + }, + interaction: { + intersect: false, + mode: "index", + }, + scales: { + y: { + grid: { + drawBorder: false, + display: true, + drawOnChartArea: true, + drawTicks: false, + borderDash: [5, 5], + }, + ticks: { + display: true, + padding: 10, + color: "#b2b9bf", + font: { + size: 11, + family: typography.fontFamily, + style: "normal", + lineHeight: 2, + }, + }, + }, + x: { + grid: { + drawBorder: false, + display: false, + drawOnChartArea: false, + drawTicks: false, + borderDash: [5, 5], + }, + ticks: { + display: true, + color: "#b2b9bf", + padding: 20, + font: { + size: 11, + family: typography.fontFamily, + style: "normal", + lineHeight: 2, + }, + }, + }, + }, + }, + }; +} + +export default configs; diff --git a/src/examples/Dashboard/Charts/LineCharts/GradientLineChart/index.js b/src/examples/Dashboard/Charts/LineCharts/GradientLineChart/index.js new file mode 100644 index 000000000..b4d9f237e --- /dev/null +++ b/src/examples/Dashboard/Charts/LineCharts/GradientLineChart/index.js @@ -0,0 +1,173 @@ +/** +========================================================= +* Material Dashboard 2 React - v2.2.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +import { useRef, useEffect, useState, useMemo } from "react"; + +// porp-types is a library for typechecking of props +import PropTypes from "prop-types"; + +// react-chartjs-2 components +import { Line } from "react-chartjs-2"; +import { + Chart as ChartJS, + CategoryScale, + LinearScale, + PointElement, + LineElement, + Title, + Tooltip, + Legend, + Filler, +} from "chart.js"; + +// @mui material components +import Card from "@mui/material/Card"; +import Icon from "@mui/material/Icon"; + +// Material Dashboard 2 React components +import MDBox from "components/MDBox"; +import MDTypography from "components/MDTypography"; + +// Material Dashboard 2 React helper functions +import gradientChartLine from "assets/theme/functions/gradientChartLine"; + +// GradientLineChart configurations +import configs from "examples/Charts/LineCharts/GradientLineChart/configs"; + +// Material Dashboard 2 React base styles +import colors from "assets/theme/base/colors"; + +ChartJS.register( + CategoryScale, + LinearScale, + PointElement, + LineElement, + Title, + Tooltip, + Legend, + Filler +); + +function GradientLineChart({ icon, title, description, height, chart }) { + const chartRef = useRef(null); + const [chartData, setChartData] = useState({}); + + useEffect(() => { + const chartElement = chartRef.current; + + if (!chartElement) return; + + const chartDatasets = chart.datasets + ? chart.datasets.map((dataset) => ({ + ...dataset, + tension: 0, + pointRadius: 0, + borderWidth: 4, + borderColor: colors[dataset.color] + ? colors[dataset.color || "dark"].main + : colors.dark.main, + fill: true, + maxBarThickness: 6, + backgroundColor: gradientChartLine( + chartElement.ctx, + colors[dataset.color] ? colors[dataset.color || "dark"].main : colors.dark.main + ), + })) + : []; + + setChartData(configs(chart.labels || [], chartDatasets)); + }, [chart]); + + const { data, options } = useMemo(() => chartData, [chartData]); + + const renderChart = ( + + {title || description ? ( + + {icon.component && ( + + {icon.component} + + )} + + {title && {title}} + + + {description} + + + + + ) : null} + + + + + ); + + return title || description ? {renderChart} : renderChart; +} + +// Setting default values for the props of GradientLineChart +GradientLineChart.defaultProps = { + icon: { color: "info", component: "" }, + title: "", + description: "", + height: "19.125rem", +}; + +// Typechecking props for the GradientLineChart +GradientLineChart.propTypes = { + icon: PropTypes.shape({ + color: PropTypes.oneOf([ + "primary", + "secondary", + "info", + "success", + "warning", + "error", + "light", + "dark", + ]), + component: PropTypes.node, + }), + title: PropTypes.string, + description: PropTypes.oneOfType([PropTypes.string, PropTypes.node]), + height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), + chart: PropTypes.objectOf(PropTypes.array).isRequired, +}; + +export default GradientLineChart; diff --git a/src/examples/Dashboard/Charts/LineCharts/ProgressLineChart/config/index.js b/src/examples/Dashboard/Charts/LineCharts/ProgressLineChart/config/index.js new file mode 100644 index 000000000..e583338df --- /dev/null +++ b/src/examples/Dashboard/Charts/LineCharts/ProgressLineChart/config/index.js @@ -0,0 +1,102 @@ +/** +========================================================= +* Material Dashboard 2 React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/nextjs-material-dashboard-pro +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +/* eslint-disable no-dupe-keys */ + +// Material Dashboard 2 React base styles +import colors from "assets/theme/base/colors"; +import typography from "assets/theme/base/typography"; + +const { gradients } = colors; + +function configs(color, labels, label, data) { + return { + data: { + labels, + datasets: [ + { + label, + tension: 0, + pointRadius: 3, + pointBackgroundColor: gradients[color] ? gradients[color].main : gradients.dark.main, + borderColor: gradients[color] ? gradients[color].main : gradients.dark.main, + borderWidth: 4, + backgroundColor: "transparent", + maxBarThickness: 6, + fill: true, + data, + }, + ], + }, + options: { + responsive: true, + maintainAspectRatio: false, + plugins: { + legend: { + display: false, + }, + }, + interaction: { + intersect: false, + mode: "index", + }, + scales: { + y: { + grid: { + drawBorder: false, + display: false, + drawOnChartArea: true, + drawTicks: false, + borderDash: [5, 5], + }, + ticks: { + display: true, + padding: 10, + color: "#b2b9bf", + font: { + size: 11, + family: typography.fontFamily, + style: "normal", + lineHeight: 2, + }, + }, + }, + x: { + grid: { + drawBorder: false, + display: true, + drawOnChartArea: true, + drawTicks: false, + borderDash: [5, 5], + color: "#c1c4ce5c", + }, + ticks: { + display: true, + color: "#b2b9bf", + padding: 20, + font: { + size: 11, + family: typography.fontFamily, + style: "normal", + lineHeight: 2, + }, + }, + }, + }, + }, + }; +} + +export default configs; diff --git a/src/examples/Dashboard/Charts/LineCharts/ProgressLineChart/index.js b/src/examples/Dashboard/Charts/LineCharts/ProgressLineChart/index.js new file mode 100644 index 000000000..2ef2ed745 --- /dev/null +++ b/src/examples/Dashboard/Charts/LineCharts/ProgressLineChart/index.js @@ -0,0 +1,132 @@ +/** +========================================================= +* Material Dashboard 2 React - v2.2.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +import { useMemo } from "react"; + +// porp-types is a library for typechecking of props +import PropTypes from "prop-types"; + +// react-chartjs-2 components +import { Line } from "react-chartjs-2"; +import { + Chart as ChartJS, + CategoryScale, + LinearScale, + PointElement, + LineElement, + Title, + Tooltip, + Legend, + Filler, +} from "chart.js"; + +// @mui material components +import Card from "@mui/material/Card"; +import Icon from "@mui/material/Icon"; + +// Material Dashboard 2 React components +import MDBox from "components/MDBox"; +import MDTypography from "components/MDTypography"; +import MDProgress from "components/MDProgress"; + +// ProgressLineChart configurations +import configs from "examples/Charts/LineCharts/ProgressLineChart/config"; + +ChartJS.register( + CategoryScale, + LinearScale, + PointElement, + LineElement, + Title, + Tooltip, + Legend, + Filler +); + +function ProgressLineChart({ color, icon, title, count, progress, height, chart }) { + const { data, options } = configs(color, chart.labels || [], title, chart.data || []); + + return ( + + + + {icon} + + + + {title} + + {count ? ( + + {count} + + ) : null} + + + + {progress}% + + + + + + + {useMemo( + () => ( + + + + ), + [chart, height, color] + )} + + ); +} + +// Setting default values for the props of ProgressLineChart +ProgressLineChart.defaultProps = { + color: "info", + count: 0, + height: "6.25rem", +}; + +// Typechecking props for the ProgressLineChart +ProgressLineChart.propTypes = { + color: PropTypes.oneOf(["primary", "secondary", "info", "success", "warning", "error", "dark"]), + icon: PropTypes.node.isRequired, + title: PropTypes.string.isRequired, + count: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), + progress: PropTypes.number.isRequired, + height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), + chart: PropTypes.objectOf(PropTypes.array).isRequired, +}; + +export default ProgressLineChart; diff --git a/src/examples/Dashboard/Charts/LineCharts/ReportsLineChart/configs/index.js b/src/examples/Dashboard/Charts/LineCharts/ReportsLineChart/configs/index.js new file mode 100644 index 000000000..185538a5b --- /dev/null +++ b/src/examples/Dashboard/Charts/LineCharts/ReportsLineChart/configs/index.js @@ -0,0 +1,97 @@ +/** +========================================================= +* Material Dashboard 2 React - v2.1.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/nextjs-material-dashboard-pro +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +function configs(labels, datasets) { + return { + data: { + labels, + datasets: [ + { + label: datasets.label, + tension: 0, + pointRadius: 5, + pointBorderColor: "transparent", + pointBackgroundColor: "rgba(255, 255, 255, .8)", + borderColor: "rgba(255, 255, 255, .8)", + borderWidth: 4, + backgroundColor: "transparent", + fill: true, + data: datasets.data, + maxBarThickness: 6, + }, + ], + }, + options: { + responsive: true, + maintainAspectRatio: false, + plugins: { + legend: { + display: false, + }, + }, + interaction: { + intersect: false, + mode: "index", + }, + scales: { + y: { + grid: { + drawBorder: false, + display: true, + drawOnChartArea: true, + drawTicks: false, + borderDash: [5, 5], + color: "rgba(255, 255, 255, .2)", + }, + ticks: { + display: true, + color: "#f8f9fa", + padding: 10, + font: { + size: 14, + weight: 300, + family: "Roboto", + style: "normal", + lineHeight: 2, + }, + }, + }, + x: { + grid: { + drawBorder: false, + display: false, + drawOnChartArea: false, + drawTicks: false, + borderDash: [5, 5], + }, + ticks: { + display: true, + color: "#f8f9fa", + padding: 10, + font: { + size: 14, + weight: 300, + family: "Roboto", + style: "normal", + lineHeight: 2, + }, + }, + }, + }, + }, + }; +} + +export default configs; diff --git a/src/examples/Dashboard/Charts/LineCharts/ReportsLineChart/index.js b/src/examples/Dashboard/Charts/LineCharts/ReportsLineChart/index.js new file mode 100644 index 000000000..7efe6f516 --- /dev/null +++ b/src/examples/Dashboard/Charts/LineCharts/ReportsLineChart/index.js @@ -0,0 +1,118 @@ +/** +========================================================= +* Material Dashboard 2 React - v2.2.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +import { useMemo } from "react"; + +// porp-types is a library for typechecking of props +import PropTypes from "prop-types"; + +// react-chartjs-2 components +import { Line } from "react-chartjs-2"; +import { + Chart as ChartJS, + CategoryScale, + LinearScale, + PointElement, + LineElement, + Title, + Tooltip, + Legend, + Filler, +} from "chart.js"; + +// @mui material components +import Card from "@mui/material/Card"; +import Divider from "@mui/material/Divider"; +import Icon from "@mui/material/Icon"; + +// Material Dashboard 2 React components +import MDBox from "components/MDBox"; +import MDTypography from "components/MDTypography"; + +// ReportsLineChart configurations +import configs from "examples/Charts/LineCharts/ReportsLineChart/configs"; + +ChartJS.register( + CategoryScale, + LinearScale, + PointElement, + LineElement, + Title, + Tooltip, + Legend, + Filler +); + +function ReportsLineChart({ color, title, description, date, chart }) { + const { data, options } = configs(chart.labels || [], chart.datasets || {}); + + return ( + + + {useMemo( + () => ( + + + + ), + [chart, color] + )} + + + {title} + + + {description} + + + + + schedule + + + {date} + + + + + + ); +} + +// Setting default values for the props of ReportsLineChart +ReportsLineChart.defaultProps = { + color: "info", + description: "", +}; + +// Typechecking props for the ReportsLineChart +ReportsLineChart.propTypes = { + color: PropTypes.oneOf(["primary", "secondary", "info", "success", "warning", "error", "dark"]), + title: PropTypes.string.isRequired, + description: PropTypes.oneOfType([PropTypes.string, PropTypes.node]), + date: PropTypes.string.isRequired, + chart: PropTypes.objectOf(PropTypes.oneOfType([PropTypes.array, PropTypes.object])).isRequired, +}; + +export default ReportsLineChart; diff --git a/src/examples/Dashboard/Charts/MixedChart/configs/index.js b/src/examples/Dashboard/Charts/MixedChart/configs/index.js new file mode 100644 index 000000000..6449a07ee --- /dev/null +++ b/src/examples/Dashboard/Charts/MixedChart/configs/index.js @@ -0,0 +1,83 @@ +/** +========================================================= +* Material Dashboard 2 React - v2.2.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Dashboard 2 React base styles +import typography from "assets/theme/base/typography"; + +function configs(labels, datasets) { + return { + data: { + labels, + datasets: [...datasets], + }, + options: { + responsive: true, + maintainAspectRatio: false, + plugins: { + legend: { + display: false, + }, + }, + interaction: { + intersect: false, + mode: "index", + }, + scales: { + y: { + grid: { + drawBorder: false, + display: true, + drawOnChartArea: true, + drawTicks: false, + borderDash: [5, 5], + }, + ticks: { + display: true, + padding: 10, + color: "#b2b9bf", + font: { + size: 11, + family: typography.fontFamily, + style: "normal", + lineHeight: 2, + }, + }, + }, + x: { + grid: { + drawBorder: false, + display: true, + drawOnChartArea: true, + drawTicks: true, + borderDash: [5, 5], + }, + ticks: { + display: true, + color: "#b2b9bf", + padding: 10, + font: { + size: 11, + family: typography.fontFamily, + style: "normal", + lineHeight: 2, + }, + }, + }, + }, + }, + }; +} + +export default configs; diff --git a/src/examples/Dashboard/Charts/MixedChart/index.js b/src/examples/Dashboard/Charts/MixedChart/index.js new file mode 100644 index 000000000..fe37b8d73 --- /dev/null +++ b/src/examples/Dashboard/Charts/MixedChart/index.js @@ -0,0 +1,235 @@ +/** +========================================================= +* Material Dashboard 2 React - v2.2.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +import { useRef, useEffect, useState, useMemo } from "react"; + +// porp-types is a library for typechecking of props +import PropTypes from "prop-types"; + +// react-chartjs-2 components +import { Line } from "react-chartjs-2"; +import { + Chart as ChartJS, + LinearScale, + CategoryScale, + BarElement, + PointElement, + LineElement, + Legend, + Tooltip, + LineController, + BarController, + Filler, +} from "chart.js"; + +// @mui material components +import Card from "@mui/material/Card"; +import Icon from "@mui/material/Icon"; + +// Material Dashboard 2 React components +import MDBox from "components/MDBox"; +import MDTypography from "components/MDTypography"; + +// Material Dashboard 2 React helper functions +import gradientChartLine from "assets/theme/functions/gradientChartLine"; + +// MixedChart configurations +import configs from "examples/Charts/MixedChart/configs"; + +// Material Dashboard 2 React base styles +import colors from "assets/theme/base/colors"; + +ChartJS.register( + LinearScale, + CategoryScale, + BarElement, + PointElement, + LineElement, + Legend, + Tooltip, + LineController, + BarController, + Filler +); + +function MixedChart({ icon, title, description, height, chart }) { + const chartRef = useRef(null); + const [chartData, setChartData] = useState({}); + + useEffect(() => { + const chartElement = chartRef.current; + + if (!chartElement) return; + + const chartDatasets = chart.datasets + ? chart.datasets.map((dataset) => { + let finalConfigs; + + const defaultLine = { + ...dataset, + type: "line", + tension: 0, + borderWidth: 4, + pointRadius: 2, + pointBackgroundColor: colors[dataset.color] + ? colors[dataset.color || "dark"].main + : colors.dark.main, + borderColor: colors[dataset.color] + ? colors[dataset.color || "dark"].main + : colors.dark.main, + maxBarThickness: 6, + }; + + const gradientLine = { + ...dataset, + type: "line", + tension: 0, + pointRadius: 0, + borderWidth: 4, + borderColor: colors[dataset.color] + ? colors[dataset.color || "dark"].main + : colors.dark.main, + fill: true, + maxBarThickness: 6, + backgroundColor: gradientChartLine( + chartElement.ctx, + colors[dataset.color] ? colors[dataset.color || "dark"].main : colors.dark.main + ), + }; + + const bar = { + ...dataset, + type: "bar", + weight: 5, + borderWidth: 0, + borderRadius: 4, + backgroundColor: colors[dataset.color] + ? colors[dataset.color || "dark"].main + : colors.dark.main, + fill: false, + maxBarThickness: 35, + }; + + const thinBar = { + ...dataset, + type: "bar", + weight: 5, + borderWidth: 0, + borderRadius: 4, + backgroundColor: colors[dataset.color] + ? colors[dataset.color || "dark"].main + : colors.dark.main, + fill: false, + maxBarThickness: 10, + }; + + if (dataset.chartType === "default-line") { + finalConfigs = defaultLine; + } else if (dataset.chartType === "gradient-line") { + finalConfigs = gradientLine; + } else if (dataset.chartType === "thin-bar") { + finalConfigs = thinBar; + } else { + finalConfigs = bar; + } + + return { ...finalConfigs }; + }) + : []; + + setChartData(configs(chart.labels || [], chartDatasets)); + }, [chart]); + + const { data, options } = useMemo(() => chartData, [chartData]); + + const renderChart = ( + + {title || description ? ( + + {icon.component && ( + + {icon.component} + + )} + + {title && {title}} + + + {description} + + + + + ) : null} + + + + + ); + + return title || description ? {renderChart} : renderChart; +} + +// Setting default values for the props of MixedChart +MixedChart.defaultProps = { + icon: { color: "info", component: "" }, + title: "", + description: "", + height: "19.125rem", +}; + +// Typechecking props for the MixedChart +MixedChart.propTypes = { + icon: PropTypes.shape({ + color: PropTypes.oneOf([ + "primary", + "secondary", + "info", + "success", + "warning", + "error", + "light", + "dark", + ]), + component: PropTypes.node, + }), + title: PropTypes.string, + description: PropTypes.oneOfType([PropTypes.string, PropTypes.node]), + height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), + chart: PropTypes.objectOf(PropTypes.array).isRequired, +}; + +export default MixedChart; diff --git a/src/examples/Dashboard/Charts/PieChart/configs/index.js b/src/examples/Dashboard/Charts/PieChart/configs/index.js new file mode 100644 index 000000000..0f9a00841 --- /dev/null +++ b/src/examples/Dashboard/Charts/PieChart/configs/index.js @@ -0,0 +1,68 @@ +/** +========================================================= +* Material Dashboard 2 React - v2.2.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +/* eslint-disable no-dupe-keys */ +// Material Dashboard 2 React base styles +import colors from "assets/theme/base/colors"; + +const { gradients, dark } = colors; + +function configs(labels, datasets) { + const backgroundColors = []; + + if (datasets.backgroundColors) { + datasets.backgroundColors.forEach((color) => + gradients[color] + ? backgroundColors.push(gradients[color].state) + : backgroundColors.push(dark.main) + ); + } else { + backgroundColors.push(dark.main); + } + + return { + data: { + labels, + datasets: [ + { + label: datasets.label, + weight: 9, + cutout: 0, + tension: 0.9, + pointRadius: 2, + borderWidth: 2, + backgroundColor: backgroundColors, + fill: false, + data: datasets.data, + }, + ], + }, + options: { + responsive: true, + maintainAspectRatio: false, + plugins: { + legend: { + display: false, + }, + }, + interaction: { + intersect: false, + mode: "index", + }, + }, + }; +} + +export default configs; diff --git a/src/examples/Dashboard/Charts/PieChart/index.js b/src/examples/Dashboard/Charts/PieChart/index.js new file mode 100644 index 000000000..e60fa7fd0 --- /dev/null +++ b/src/examples/Dashboard/Charts/PieChart/index.js @@ -0,0 +1,116 @@ +/** +========================================================= +* Material Dashboard 2 React - v2.2.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +import { useMemo } from "react"; + +// porp-types is a library for typechecking of props +import PropTypes from "prop-types"; + +// react-chartjs-2 components +import { Pie } from "react-chartjs-2"; +import { Chart as ChartJS, ArcElement, Tooltip, Legend } from "chart.js"; + +// @mui material components +import Card from "@mui/material/Card"; +import Icon from "@mui/material/Icon"; + +// Material Dashboard 2 React components +import MDBox from "components/MDBox"; +import MDTypography from "components/MDTypography"; + +// PieChart configurations +import configs from "examples/Charts/PieChart/configs"; + +ChartJS.register(ArcElement, Tooltip, Legend); + +function PieChart({ icon, title, description, height, chart }) { + const { data, options } = configs(chart.labels || [], chart.datasets || {}); + + const renderChart = ( + + {title || description ? ( + + {icon.component && ( + + {icon.component} + + )} + + {title && {title}} + + + {description} + + + + + ) : null} + {useMemo( + () => ( + + + + ), + [chart, height] + )} + + ); + + return title || description ? {renderChart} : renderChart; +} + +// Setting default values for the props of PieChart +PieChart.defaultProps = { + icon: { color: "info", component: "" }, + title: "", + description: "", + height: "19.125rem", +}; + +// Typechecking props for the PieChart +PieChart.propTypes = { + icon: PropTypes.shape({ + color: PropTypes.oneOf([ + "primary", + "secondary", + "info", + "success", + "warning", + "error", + "light", + "dark", + ]), + component: PropTypes.node, + }), + title: PropTypes.string, + description: PropTypes.oneOfType([PropTypes.string, PropTypes.node]), + height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), + chart: PropTypes.objectOf(PropTypes.oneOfType([PropTypes.array, PropTypes.object])).isRequired, +}; + +export default PieChart; diff --git a/src/examples/Dashboard/Charts/PolarChart/configs/index.js b/src/examples/Dashboard/Charts/PolarChart/configs/index.js new file mode 100644 index 000000000..bc3d6d5e2 --- /dev/null +++ b/src/examples/Dashboard/Charts/PolarChart/configs/index.js @@ -0,0 +1,62 @@ +/** +========================================================= +* Material Dashboard 2 React - v2.2.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +/* eslint-disable no-dupe-keys */ +// Material Dashboard 2 React base styles +import colors from "assets/theme/base/colors"; + +const { gradients, dark } = colors; + +function configs(labels, datasets) { + const backgroundColors = []; + + if (datasets.backgroundColors) { + datasets.backgroundColors.forEach((color) => + gradients[color] + ? backgroundColors.push(gradients[color].state) + : backgroundColors.push(dark.main) + ); + } else { + backgroundColors.push(dark.main); + } + + return { + data: { + labels, + datasets: [ + { + label: datasets.label, + backgroundColor: backgroundColors, + data: datasets.data, + }, + ], + }, + options: { + responsive: true, + maintainAspectRatio: false, + plugins: { + legend: { + display: false, + }, + }, + interaction: { + intersect: false, + mode: "index", + }, + }, + }; +} + +export default configs; diff --git a/src/examples/Dashboard/Charts/PolarChart/index.js b/src/examples/Dashboard/Charts/PolarChart/index.js new file mode 100644 index 000000000..bb9ae79de --- /dev/null +++ b/src/examples/Dashboard/Charts/PolarChart/index.js @@ -0,0 +1,115 @@ +/** +========================================================= +* Material Dashboard 2 React - v2.2.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +import { useMemo } from "react"; + +// porp-types is a library for typechecking of props +import PropTypes from "prop-types"; + +// react-chartjs-2 components +import { Chart as ChartJS, RadialLinearScale, ArcElement, Tooltip, Legend } from "chart.js"; +import { PolarArea } from "react-chartjs-2"; + +// @mui material components +import Card from "@mui/material/Card"; +import Icon from "@mui/material/Icon"; + +// Material Dashboard 2 React components +import MDBox from "components/MDBox"; +import MDTypography from "components/MDTypography"; + +// PolarChart configurations +import configs from "examples/Charts/PolarChart/configs"; + +ChartJS.register(RadialLinearScale, ArcElement, Tooltip, Legend); + +function PolarChart({ icon, title, description, chart, height }) { + const { data, options } = configs(chart.labels || [], chart.datasets || {}); + + const renderChart = ( + + {title || description ? ( + + {icon.component && ( + + {icon.component} + + )} + + {title && {title}} + + + {description} + + + + + ) : null} + {useMemo( + () => ( + + + + ), + [chart] + )} + + ); + + return title || description ? {renderChart} : renderChart; +} + +// Setting default values for the props of PolarChart +PolarChart.defaultProps = { + icon: { color: "info", component: "" }, + title: "", + description: "", +}; + +// Typechecking props for the PolarChart +PolarChart.propTypes = { + icon: PropTypes.shape({ + color: PropTypes.oneOf([ + "primary", + "secondary", + "info", + "success", + "warning", + "error", + "light", + "dark", + ]), + component: PropTypes.node, + }), + title: PropTypes.string, + description: PropTypes.oneOfType([PropTypes.string, PropTypes.node]), + height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), + chart: PropTypes.objectOf(PropTypes.oneOfType([PropTypes.array, PropTypes.object])).isRequired, +}; + +export default PolarChart; diff --git a/src/examples/Dashboard/Charts/RadarChart/configs/index.js b/src/examples/Dashboard/Charts/RadarChart/configs/index.js new file mode 100644 index 000000000..c70bd2256 --- /dev/null +++ b/src/examples/Dashboard/Charts/RadarChart/configs/index.js @@ -0,0 +1,38 @@ +/** +========================================================= +* Material Dashboard 2 React - v2.2.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +function configs(labels, datasets) { + return { + data: { + labels, + datasets: [...datasets], + }, + options: { + responsive: true, + maintainAspectRatio: false, + plugins: { + legend: { + display: false, + }, + }, + interaction: { + intersect: false, + mode: "index", + }, + }, + }; +} + +export default configs; diff --git a/src/examples/Dashboard/Charts/RadarChart/index.js b/src/examples/Dashboard/Charts/RadarChart/index.js new file mode 100644 index 000000000..8d4a08687 --- /dev/null +++ b/src/examples/Dashboard/Charts/RadarChart/index.js @@ -0,0 +1,138 @@ +/** +========================================================= +* Material Dashboard 2 React - v2.2.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +import { useMemo } from "react"; + +// porp-types is a library for typechecking of props +import PropTypes from "prop-types"; + +// react-chartjs-2 components +import { + Chart as ChartJS, + RadialLinearScale, + PointElement, + LineElement, + Filler, + Tooltip, + Legend, +} from "chart.js"; +import { Radar } from "react-chartjs-2"; + +// @mui material components +import Card from "@mui/material/Card"; +import Icon from "@mui/material/Icon"; + +// Material Dashboard 2 React components +import MDBox from "components/MDBox"; +import MDTypography from "components/MDTypography"; + +// RadarChart configurations +import configs from "examples/Charts/RadarChart/configs"; + +// Material Dashboard 2 React base styles +import colors from "assets/theme/base/colors"; + +// Material Dashboard 2 React helper functions +import rgba from "assets/theme/functions/rgba"; + +ChartJS.register(RadialLinearScale, PointElement, LineElement, Filler, Tooltip, Legend); + +function RadarChart({ icon, title, description, height, chart }) { + const chartDatasets = chart.datasets + ? chart.datasets.map((dataset) => ({ + ...dataset, + backgroundColor: colors[dataset.color] + ? rgba(colors[dataset.color || "dark"].main, 0.2) + : rgba(colors.dark.main, 0.2), + })) + : []; + + const { data, options } = configs(chart.labels || [], chartDatasets); + + const renderChart = ( + + {title || description ? ( + + {icon.component && ( + + {icon.component} + + )} + + {title && {title}} + + + {description} + + + + + ) : null} + {useMemo( + () => ( + + + + ), + [chart] + )} + + ); + + return title || description ? {renderChart} : renderChart; +} + +// Setting default values for the props of RadarChart +RadarChart.defaultProps = { + icon: { color: "info", component: "" }, + title: "", + description: "", +}; + +// Typechecking props for the RadarChart +RadarChart.propTypes = { + icon: PropTypes.shape({ + color: PropTypes.oneOf([ + "primary", + "secondary", + "info", + "success", + "warning", + "error", + "light", + "dark", + ]), + component: PropTypes.node, + }), + title: PropTypes.string, + description: PropTypes.oneOfType([PropTypes.string, PropTypes.node]), + height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), + chart: PropTypes.objectOf(PropTypes.array).isRequired, +}; + +export default RadarChart; diff --git a/src/examples/Dashboard/Configurator/ConfiguratorRoot.js b/src/examples/Dashboard/Configurator/ConfiguratorRoot.js new file mode 100644 index 000000000..5c7f5c589 --- /dev/null +++ b/src/examples/Dashboard/Configurator/ConfiguratorRoot.js @@ -0,0 +1,60 @@ +/** +========================================================= +* Material Dashboard 2 React - v2.2.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// @mui material components +import Drawer from "@mui/material/Drawer"; +import { styled } from "@mui/material/styles"; + +export default styled(Drawer)(({ theme, ownerState }) => { + const { boxShadows, functions, transitions } = theme; + const { openConfigurator } = ownerState; + + const configuratorWidth = 360; + const { lg } = boxShadows; + const { pxToRem } = functions; + + // drawer styles when openConfigurator={true} + const drawerOpenStyles = () => ({ + width: configuratorWidth, + left: "initial", + right: 0, + transition: transitions.create("right", { + easing: transitions.easing.sharp, + duration: transitions.duration.short, + }), + }); + + // drawer styles when openConfigurator={false} + const drawerCloseStyles = () => ({ + left: "initial", + right: pxToRem(-350), + transition: transitions.create("all", { + easing: transitions.easing.sharp, + duration: transitions.duration.short, + }), + }); + + return { + "& .MuiDrawer-paper": { + height: "100vh", + margin: 0, + padding: `0 ${pxToRem(10)}`, + borderRadius: 0, + boxShadow: lg, + overflowY: "auto", + ...(openConfigurator ? drawerOpenStyles() : drawerCloseStyles()), + }, + }; +}); diff --git a/src/examples/Dashboard/Configurator/index.js b/src/examples/Dashboard/Configurator/index.js new file mode 100644 index 000000000..2083f380a --- /dev/null +++ b/src/examples/Dashboard/Configurator/index.js @@ -0,0 +1,347 @@ +/** +========================================================= +* Material Dashboard 2 React - v2.2.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +import { useState, useEffect } from "react"; + +// react-github-btn +import GitHubButton from "react-github-btn"; + +// @mui material components +import Divider from "@mui/material/Divider"; +import Switch from "@mui/material/Switch"; +import IconButton from "@mui/material/IconButton"; +import Link from "@mui/material/Link"; +import Icon from "@mui/material/Icon"; + +// @mui icons +import TwitterIcon from "@mui/icons-material/Twitter"; +import FacebookIcon from "@mui/icons-material/Facebook"; + +// Material Dashboard 2 React components +import MDBox from "components/MDBox"; +import MDTypography from "components/MDTypography"; +import MDButton from "components/MDButton"; + +// Custom styles for the Configurator +import ConfiguratorRoot from "examples/Configurator/ConfiguratorRoot"; + +// Material Dashboard 2 React context +import { + useMaterialUIController, + setOpenConfigurator, + setTransparentSidenav, + setWhiteSidenav, + setFixedNavbar, + setSidenavColor, + setDarkMode, +} from "context"; + +function Configurator() { + const [controller, dispatch] = useMaterialUIController(); + const { + openConfigurator, + fixedNavbar, + sidenavColor, + transparentSidenav, + whiteSidenav, + darkMode, + } = controller; + const [disabled, setDisabled] = useState(false); + const sidenavColors = ["primary", "dark", "info", "success", "warning", "error"]; + + // Use the useEffect hook to change the button state for the sidenav type based on window size. + useEffect(() => { + // A function that sets the disabled state of the buttons for the sidenav type. + function handleDisabled() { + return window.innerWidth > 1200 ? setDisabled(false) : setDisabled(true); + } + + // The event listener that's calling the handleDisabled function when resizing the window. + window.addEventListener("resize", handleDisabled); + + // Call the handleDisabled function to set the state with the initial value. + handleDisabled(); + + // Remove event listener on cleanup + return () => window.removeEventListener("resize", handleDisabled); + }, []); + + const handleCloseConfigurator = () => setOpenConfigurator(dispatch, false); + const handleTransparentSidenav = () => { + setTransparentSidenav(dispatch, true); + setWhiteSidenav(dispatch, false); + }; + const handleWhiteSidenav = () => { + setWhiteSidenav(dispatch, true); + setTransparentSidenav(dispatch, false); + }; + const handleDarkSidenav = () => { + setWhiteSidenav(dispatch, false); + setTransparentSidenav(dispatch, false); + }; + const handleFixedNavbar = () => setFixedNavbar(dispatch, !fixedNavbar); + const handleDarkMode = () => setDarkMode(dispatch, !darkMode); + + // sidenav type buttons styles + const sidenavTypeButtonsStyles = ({ + functions: { pxToRem }, + palette: { white, dark, background }, + borders: { borderWidth }, + }) => ({ + height: pxToRem(39), + background: darkMode ? background.sidenav : white.main, + color: darkMode ? white.main : dark.main, + border: `${borderWidth[1]} solid ${darkMode ? white.main : dark.main}`, + + "&:hover, &:focus, &:focus:not(:hover)": { + background: darkMode ? background.sidenav : white.main, + color: darkMode ? white.main : dark.main, + border: `${borderWidth[1]} solid ${darkMode ? white.main : dark.main}`, + }, + }); + + // sidenav type active button styles + const sidenavTypeActiveButtonStyles = ({ + functions: { pxToRem, linearGradient }, + palette: { white, gradients, background }, + }) => ({ + height: pxToRem(39), + background: darkMode ? white.main : linearGradient(gradients.dark.main, gradients.dark.state), + color: darkMode ? background.sidenav : white.main, + + "&:hover, &:focus, &:focus:not(:hover)": { + background: darkMode ? white.main : linearGradient(gradients.dark.main, gradients.dark.state), + color: darkMode ? background.sidenav : white.main, + }, + }); + + return ( + + + + Material UI Configurator + + See our dashboard options. + + + + ({ + fontSize: `${size.lg} !important`, + color: darkMode ? white.main : dark.main, + stroke: "currentColor", + strokeWidth: "2px", + cursor: "pointer", + transform: "translateY(5px)", + })} + onClick={handleCloseConfigurator} + > + close + + + + + + + + Sidenav Colors + + + {sidenavColors.map((color) => ( + ({ + width: "24px", + height: "24px", + padding: 0, + border: `${borderWidth[1]} solid ${darkMode ? background.sidenav : white.main}`, + borderColor: () => { + let borderColorValue = sidenavColor === color && dark.main; + + if (darkMode && sidenavColor === color) { + borderColorValue = white.main; + } + + return borderColorValue; + }, + transition: transitions.create("border-color", { + easing: transitions.easing.sharp, + duration: transitions.duration.shorter, + }), + backgroundImage: ({ functions: { linearGradient }, palette: { gradients } }) => + linearGradient(gradients[color].main, gradients[color].state), + + "&:not(:last-child)": { + mr: 1, + }, + + "&:hover, &:focus, &:active": { + borderColor: darkMode ? white.main : dark.main, + }, + })} + onClick={() => setSidenavColor(dispatch, color)} + /> + ))} + + + + + Sidenav Type + + Choose between different sidenav types. + + + + + Dark + + + + Transparent + + + + White + + + + + Navbar Fixed + + + + + + Light / Dark + + + + + + + view documentation + + + + + Star + + + + + Thank you for sharing! + + + + + + +   Tweet + + + + +   Share + + + + + + ); +} + +export default Configurator; diff --git a/src/examples/Dashboard/Footer/index.js b/src/examples/Dashboard/Footer/index.js new file mode 100644 index 000000000..7acc80d1a --- /dev/null +++ b/src/examples/Dashboard/Footer/index.js @@ -0,0 +1,117 @@ +/** +========================================================= +* Material Dashboard 2 React - v2.2.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// prop-types is a library for typechecking of props +import PropTypes from "prop-types"; + +// @mui material components +import Link from "@mui/material/Link"; +import Icon from "@mui/material/Icon"; + +// Material Dashboard 2 React components +import MDBox from "components/MDBox"; +import MDTypography from "components/MDTypography"; + +// Material Dashboard 2 React base styles +import typography from "assets/theme/base/typography"; + +function Footer({ company, links }) { + const { href, name } = company; + const { size } = typography; + + const renderLinks = () => + links.map((link) => ( + + + + {link.name} + + + + )); + + return ( + + + © {new Date().getFullYear()}, made with + + + favorite + + + by + + +  {name}  + + + for a better web. + + ({ + display: "flex", + flexWrap: "wrap", + alignItems: "center", + justifyContent: "center", + listStyle: "none", + mt: 3, + mb: 0, + p: 0, + + [breakpoints.up("lg")]: { + mt: 0, + }, + })} + > + {renderLinks()} + + + ); +} + +// Setting default values for the props of Footer +Footer.defaultProps = { + company: { href: "https://www.creative-tim.com/", name: "Creative Tim" }, + links: [ + { href: "https://www.creative-tim.com/", name: "Creative Tim" }, + { href: "https://www.creative-tim.com/presentation", name: "About Us" }, + { href: "https://www.creative-tim.com/blog", name: "Blog" }, + { href: "https://www.creative-tim.com/license", name: "License" }, + ], +}; + +// Typechecking props for the Footer +Footer.propTypes = { + company: PropTypes.objectOf(PropTypes.string), + links: PropTypes.arrayOf(PropTypes.object), +}; + +export default Footer; diff --git a/src/examples/Dashboard/Items/NotificationItem/index.js b/src/examples/Dashboard/Items/NotificationItem/index.js new file mode 100644 index 000000000..4e5385766 --- /dev/null +++ b/src/examples/Dashboard/Items/NotificationItem/index.js @@ -0,0 +1,51 @@ +/** +========================================================= +* Material Dashboard 2 React - v2.2.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +import { forwardRef } from "react"; + +// prop-types is a library for typechecking of props. +import PropTypes from "prop-types"; + +// @mui material components +import MenuItem from "@mui/material/MenuItem"; +import Link from "@mui/material/Link"; + +// Material Dashboard 2 React components +import MDBox from "components/MDBox"; +import MDTypography from "components/MDTypography"; + +// custom styles for the NotificationItem +import menuItem from "examples/Dashboard/Items/NotificationItem/styles"; + +const NotificationItem = forwardRef(({ icon, title, ...rest }, ref) => ( + menuItem(theme)}> + + + {icon} + + + {title} + + + +)); + +// Typechecking props for the NotificationItem +NotificationItem.propTypes = { + icon: PropTypes.node.isRequired, + title: PropTypes.string.isRequired, +}; + +export default NotificationItem; diff --git a/src/examples/Dashboard/Items/NotificationItem/styles.js b/src/examples/Dashboard/Items/NotificationItem/styles.js new file mode 100644 index 000000000..05ffef16a --- /dev/null +++ b/src/examples/Dashboard/Items/NotificationItem/styles.js @@ -0,0 +1,36 @@ +function menuItem(theme) { + const { palette, borders, transitions } = theme; + + const { secondary, light, dark } = palette; + const { borderRadius } = borders; + + return { + display: "flex", + alignItems: "center", + width: "100%", + color: secondary.main, + borderRadius: borderRadius.md, + transition: transitions.create("background-color", { + easing: transitions.easing.easeInOut, + duration: transitions.duration.standard, + }), + + "& *": { + transition: "color 100ms linear", + }, + + "&:not(:last-child)": { + mb: 1, + }, + + "&:hover": { + backgroundColor: light.main, + + "& *": { + color: dark.main, + }, + }, + }; +} + +export default menuItem; diff --git a/src/examples/Dashboard/LayoutContainers/DashboardLayout/index.js b/src/examples/Dashboard/LayoutContainers/DashboardLayout/index.js new file mode 100644 index 000000000..66a750fa2 --- /dev/null +++ b/src/examples/Dashboard/LayoutContainers/DashboardLayout/index.js @@ -0,0 +1,64 @@ +/** +========================================================= +* Material Dashboard 2 React - v2.2.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +import { useEffect } from "react"; + +// react-router-dom components +import { useLocation } from "react-router-dom"; + +// prop-types is a library for typechecking of props. +import PropTypes from "prop-types"; + +// Material Dashboard 2 React components +import MDBox from "components/MDBox"; + +// Material Dashboard 2 React context +import { useMaterialUIController, setLayout } from "context"; + +function DashboardLayout({ children }) { + const [controller, dispatch] = useMaterialUIController(); + const { miniSidenav } = controller; + const { pathname } = useLocation(); + + useEffect(() => { + setLayout(dispatch, "dashboard"); + }, [pathname]); + + return ( + ({ + p: 3, + position: "relative", + + [breakpoints.up("xl")]: { + marginLeft: miniSidenav ? pxToRem(120) : pxToRem(274), + transition: transitions.create(["margin-left", "margin-right"], { + easing: transitions.easing.easeInOut, + duration: transitions.duration.standard, + }), + }, + })} + > + {children} + + ); +} + +// Typechecking props for the DashboardLayout +DashboardLayout.propTypes = { + children: PropTypes.node.isRequired, +}; + +export default DashboardLayout; diff --git a/src/examples/Dashboard/LayoutContainers/PageLayout/index.js b/src/examples/Dashboard/LayoutContainers/PageLayout/index.js new file mode 100644 index 000000000..8b3954752 --- /dev/null +++ b/src/examples/Dashboard/LayoutContainers/PageLayout/index.js @@ -0,0 +1,62 @@ +/** +========================================================= +* Material Dashboard 2 React - v2.2.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +import { useEffect } from "react"; + +// react-router-dom components +import { useLocation } from "react-router-dom"; + +// prop-types is a library for typechecking of props. +import PropTypes from "prop-types"; + +// Material Dashboard 2 React components +import MDBox from "components/MDBox"; + +// Material Dashboard 2 React context +import { useMaterialUIController, setLayout } from "context"; + +function PageLayout({ background, children }) { + const [, dispatch] = useMaterialUIController(); + const { pathname } = useLocation(); + + useEffect(() => { + setLayout(dispatch, "page"); + }, [pathname]); + + return ( + + {children} + + ); +} + +// Setting default values for the props for PageLayout +PageLayout.defaultProps = { + background: "default", +}; + +// Typechecking props for the PageLayout +PageLayout.propTypes = { + background: PropTypes.oneOf(["white", "light", "default"]), + children: PropTypes.node.isRequired, +}; + +export default PageLayout; diff --git a/src/examples/Dashboard/Lists/ProfilesList/index.js b/src/examples/Dashboard/Lists/ProfilesList/index.js new file mode 100644 index 000000000..760b06353 --- /dev/null +++ b/src/examples/Dashboard/Lists/ProfilesList/index.js @@ -0,0 +1,94 @@ +/** +========================================================= +* Material Dashboard 2 React - v2.2.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// react-routers components +import { Link } from "react-router-dom"; + +// prop-types is library for typechecking of props +import PropTypes from "prop-types"; + +// @mui material components +import Card from "@mui/material/Card"; + +// Material Dashboard 2 React components +import MDBox from "components/MDBox"; +import MDTypography from "components/MDTypography"; +import MDAvatar from "components/MDAvatar"; +import MDButton from "components/MDButton"; + +function ProfilesList({ title, profiles, shadow }) { + const renderProfiles = profiles.map(({ image, name, description, action }) => ( + + + + + + + {name} + + + {description} + + + + {action.type === "internal" ? ( + + {action.label} + + ) : ( + + {action.label} + + )} + + + )); + + return ( + + + + {title} + + + + + {renderProfiles} + + + + ); +} + +// Setting default props for the ProfilesList +ProfilesList.defaultProps = { + shadow: true, +}; + +// Typechecking props for the ProfilesList +ProfilesList.propTypes = { + title: PropTypes.string.isRequired, + profiles: PropTypes.arrayOf(PropTypes.object).isRequired, + shadow: PropTypes.bool, +}; + +export default ProfilesList; diff --git a/src/examples/Dashboard/Navbars/DashboardNavbar/index.js b/src/examples/Dashboard/Navbars/DashboardNavbar/index.js new file mode 100644 index 000000000..73435b6ec --- /dev/null +++ b/src/examples/Dashboard/Navbars/DashboardNavbar/index.js @@ -0,0 +1,202 @@ +/** +========================================================= +* Material Dashboard 2 React - v2.2.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +import { useState, useEffect } from "react"; + +// react-router components +import { useLocation, Link } from "react-router-dom"; + +// prop-types is a library for typechecking of props. +import PropTypes from "prop-types"; + +// @material-ui core components +import AppBar from "@mui/material/AppBar"; +import Toolbar from "@mui/material/Toolbar"; +import IconButton from "@mui/material/IconButton"; +import Menu from "@mui/material/Menu"; +import Icon from "@mui/material/Icon"; + +// Material Dashboard 2 React components +import MDBox from "components/MDBox"; +import MDInput from "components/MDInput"; + +// Material Dashboard 2 React example components +import Breadcrumbs from "examples/Dashboard/Breadcrumbs"; +import NotificationItem from "examples/Dashboard/Items/NotificationItem"; + +// Custom styles for DashboardNavbar +import { + navbar, + navbarContainer, + navbarRow, + navbarIconButton, + navbarMobileMenu, +} from "examples/Dashboard/Navbars/DashboardNavbar/styles"; + +// Material Dashboard 2 React context +import { + useMaterialUIController, + setTransparentNavbar, + setMiniSidenav, + setOpenConfigurator, +} from "context"; + +function DashboardNavbar({ absolute, light, isMini }) { + const [navbarType, setNavbarType] = useState(); + const [controller, dispatch] = useMaterialUIController(); + const { miniSidenav, transparentNavbar, fixedNavbar, openConfigurator, darkMode } = controller; + const [openMenu, setOpenMenu] = useState(false); + const route = useLocation().pathname.split("/").slice(1); + + useEffect(() => { + // Setting the navbar type + if (fixedNavbar) { + setNavbarType("sticky"); + } else { + setNavbarType("static"); + } + + // A function that sets the transparent state of the navbar. + function handleTransparentNavbar() { + setTransparentNavbar(dispatch, (fixedNavbar && window.scrollY === 0) || !fixedNavbar); + } + + /** + The event listener that's calling the handleTransparentNavbar function when + scrolling the window. + */ + window.addEventListener("scroll", handleTransparentNavbar); + + // Call the handleTransparentNavbar function to set the state with the initial value. + handleTransparentNavbar(); + + // Remove event listener on cleanup + return () => window.removeEventListener("scroll", handleTransparentNavbar); + }, [dispatch, fixedNavbar]); + + const handleMiniSidenav = () => setMiniSidenav(dispatch, !miniSidenav); + const handleConfiguratorOpen = () => setOpenConfigurator(dispatch, !openConfigurator); + const handleOpenMenu = (event) => setOpenMenu(event.currentTarget); + const handleCloseMenu = () => setOpenMenu(false); + + // Render the notifications menu + const renderMenu = () => ( + + email} title="Check new messages" /> + podcasts} title="Manage Podcast sessions" /> + shopping_cart} title="Payment successfully completed" /> + + ); + + // Styles for the navbar icons + const iconsStyle = ({ palette: { dark, white, text }, functions: { rgba } }) => ({ + color: () => { + let colorValue = light || darkMode ? white.main : dark.main; + + if (transparentNavbar && !light) { + colorValue = darkMode ? rgba(text.main, 0.6) : text.main; + } + + return colorValue; + }, + }); + + return ( + navbar(theme, { transparentNavbar, absolute, light, darkMode })} + > + navbarContainer(theme)}> + navbarRow(theme, { isMini })}> + + + {isMini ? null : ( + navbarRow(theme, { isMini })}> + + + + + + + account_circle + + + + + {miniSidenav ? "menu_open" : "menu"} + + + + settings + + + notifications + + {renderMenu()} + + + )} + + + ); +} + +// Setting default values for the props of DashboardNavbar +DashboardNavbar.defaultProps = { + absolute: false, + light: false, + isMini: false, +}; + +// Typechecking props for the DashboardNavbar +DashboardNavbar.propTypes = { + absolute: PropTypes.bool, + light: PropTypes.bool, + isMini: PropTypes.bool, +}; + +export default DashboardNavbar; diff --git a/src/examples/Dashboard/Navbars/DashboardNavbar/styles.js b/src/examples/Dashboard/Navbars/DashboardNavbar/styles.js new file mode 100644 index 000000000..3b5414ef2 --- /dev/null +++ b/src/examples/Dashboard/Navbars/DashboardNavbar/styles.js @@ -0,0 +1,134 @@ +/** +========================================================= +* Material Dashboard 2 React - v2.2.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +function navbar(theme, ownerState) { + const { palette, boxShadows, functions, transitions, breakpoints, borders } = theme; + const { transparentNavbar, absolute, light, darkMode } = ownerState; + + const { dark, white, text, transparent, background } = palette; + const { navbarBoxShadow } = boxShadows; + const { rgba, pxToRem } = functions; + const { borderRadius } = borders; + + return { + boxShadow: transparentNavbar || absolute ? "none" : navbarBoxShadow, + backdropFilter: transparentNavbar || absolute ? "none" : `saturate(200%) blur(${pxToRem(30)})`, + backgroundColor: + transparentNavbar || absolute + ? `${transparent.main} !important` + : rgba(darkMode ? background.default : white.main, 0.8), + + color: () => { + let color; + + if (light) { + color = white.main; + } else if (transparentNavbar) { + color = text.main; + } else { + color = dark.main; + } + + return color; + }, + top: absolute ? 0 : pxToRem(12), + minHeight: pxToRem(75), + display: "grid", + alignItems: "center", + borderRadius: borderRadius.xl, + paddingTop: pxToRem(8), + paddingBottom: pxToRem(8), + paddingRight: absolute ? pxToRem(8) : 0, + paddingLeft: absolute ? pxToRem(16) : 0, + + "& > *": { + transition: transitions.create("all", { + easing: transitions.easing.easeInOut, + duration: transitions.duration.standard, + }), + }, + + "& .MuiToolbar-root": { + display: "flex", + justifyContent: "space-between", + alignItems: "center", + + [breakpoints.up("sm")]: { + minHeight: "auto", + padding: `${pxToRem(4)} ${pxToRem(16)}`, + }, + }, + }; +} + +const navbarContainer = ({ breakpoints }) => ({ + flexDirection: "column", + alignItems: "flex-start", + justifyContent: "space-between", + pt: 0.5, + pb: 0.5, + + [breakpoints.up("md")]: { + flexDirection: "row", + alignItems: "center", + paddingTop: "0", + paddingBottom: "0", + }, +}); + +const navbarRow = ({ breakpoints }, { isMini }) => ({ + display: "flex", + alignItems: "center", + justifyContent: "space-between", + width: "100%", + + [breakpoints.up("md")]: { + justifyContent: isMini ? "space-between" : "stretch", + width: isMini ? "100%" : "max-content", + }, + + [breakpoints.up("xl")]: { + justifyContent: "stretch !important", + width: "max-content !important", + }, +}); + +const navbarIconButton = ({ typography: { size }, breakpoints }) => ({ + px: 1, + + "& .material-icons, .material-icons-round": { + fontSize: `${size.xl} !important`, + }, + + "& .MuiTypography-root": { + display: "none", + + [breakpoints.up("sm")]: { + display: "inline-block", + lineHeight: 1.2, + ml: 0.5, + }, + }, +}); + +const navbarMobileMenu = ({ breakpoints }) => ({ + display: "inline-block", + lineHeight: 0, + + [breakpoints.up("xl")]: { + display: "none", + }, +}); + +export { navbar, navbarContainer, navbarRow, navbarIconButton, navbarMobileMenu }; diff --git a/src/examples/Dashboard/Navbars/DefaultNavbar/DefaultNavbarLink.js b/src/examples/Dashboard/Navbars/DefaultNavbar/DefaultNavbarLink.js new file mode 100644 index 000000000..231bcacab --- /dev/null +++ b/src/examples/Dashboard/Navbars/DefaultNavbar/DefaultNavbarLink.js @@ -0,0 +1,69 @@ +/** +========================================================= +* Material Dashboard 2 React - v2.2.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// prop-types is a library for typechecking of props +import PropTypes from "prop-types"; + +// react-router-dom components +import { Link } from "react-router-dom"; + +// @mui material components +import Icon from "@mui/material/Icon"; + +// Material Dashboard 2 React components +import MDBox from "components/MDBox"; +import MDTypography from "components/MDTypography"; + +function DefaultNavbarLink({ icon, name, route, light }) { + return ( + + (light ? white.main : secondary.main), + verticalAlign: "middle", + }} + > + {icon} + + +  {name} + + + ); +} + +// Typechecking props for the DefaultNavbarLink +DefaultNavbarLink.propTypes = { + icon: PropTypes.string.isRequired, + name: PropTypes.string.isRequired, + route: PropTypes.string.isRequired, + light: PropTypes.bool.isRequired, +}; + +export default DefaultNavbarLink; diff --git a/src/examples/Dashboard/Navbars/DefaultNavbar/DefaultNavbarMobile.js b/src/examples/Dashboard/Navbars/DefaultNavbar/DefaultNavbarMobile.js new file mode 100644 index 000000000..bbaa85e15 --- /dev/null +++ b/src/examples/Dashboard/Navbars/DefaultNavbar/DefaultNavbarMobile.js @@ -0,0 +1,63 @@ +/** +========================================================= +* Material Dashboard 2 React - v2.2.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// prop-types is a library for typechecking of props. +import PropTypes from "prop-types"; + +// @mui material components +import Menu from "@mui/material/Menu"; + +// Material Dashboard 2 React components +import MDBox from "components/MDBox"; + +// Material Dashboard 2 React example components +import DefaultNavbarLink from "examples/Navbars/DefaultNavbar/DefaultNavbarLink"; + +function DefaultNavbarMobile({ open, close }) { + const { width } = open && open.getBoundingClientRect(); + + return ( + + + + + + + + + ); +} + +// Typechecking props for the DefaultNavbarMenu +DefaultNavbarMobile.propTypes = { + open: PropTypes.oneOfType([PropTypes.bool, PropTypes.object]).isRequired, + close: PropTypes.oneOfType([PropTypes.func, PropTypes.bool, PropTypes.object]).isRequired, +}; + +export default DefaultNavbarMobile; diff --git a/src/examples/Dashboard/Navbars/DefaultNavbar/index.js b/src/examples/Dashboard/Navbars/DefaultNavbar/index.js new file mode 100644 index 000000000..9bb5932fd --- /dev/null +++ b/src/examples/Dashboard/Navbars/DefaultNavbar/index.js @@ -0,0 +1,209 @@ +/** +========================================================= +* Material Dashboard 2 React - v2.2.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +import { useState, useEffect } from "react"; + +// react-router components +import { Link } from "react-router-dom"; + +// prop-types is a library for typechecking of props. +import PropTypes from "prop-types"; + +// @mui material components +import Container from "@mui/material/Container"; +import Icon from "@mui/material/Icon"; + +// Material Dashboard 2 React components +import MDBox from "components/MDBox"; +import MDTypography from "components/MDTypography"; +import MDButton from "components/MDButton"; + +// Material Dashboard 2 React example components +import DefaultNavbarLink from "examples/Navbars/DefaultNavbar/DefaultNavbarLink"; +import DefaultNavbarMobile from "examples/Navbars/DefaultNavbar/DefaultNavbarMobile"; + +// Material Dashboard 2 React base styles +import breakpoints from "assets/theme/base/breakpoints"; + +// Material Dashboard 2 React context +import { useMaterialUIController } from "context"; + +function DefaultNavbar({ transparent, light, action }) { + const [controller] = useMaterialUIController(); + const { darkMode } = controller; + + const [mobileNavbar, setMobileNavbar] = useState(false); + const [mobileView, setMobileView] = useState(false); + + const openMobileNavbar = ({ currentTarget }) => setMobileNavbar(currentTarget.parentNode); + const closeMobileNavbar = () => setMobileNavbar(false); + + useEffect(() => { + // A function that sets the display state for the DefaultNavbarMobile. + function displayMobileNavbar() { + if (window.innerWidth < breakpoints.values.lg) { + setMobileView(true); + setMobileNavbar(false); + } else { + setMobileView(false); + setMobileNavbar(false); + } + } + + /** + The event listener that's calling the displayMobileNavbar function when + resizing the window. + */ + window.addEventListener("resize", displayMobileNavbar); + + // Call the displayMobileNavbar function to set the state with the initial value. + displayMobileNavbar(); + + // Remove event listener on cleanup + return () => window.removeEventListener("resize", displayMobileNavbar); + }, []); + + return ( + + ({ + backgroundColor: transparent + ? transparentColor.main + : rgba(darkMode ? background.sidenav : white.main, 0.8), + backdropFilter: transparent ? "none" : `saturate(200%) blur(30px)`, + })} + > + + + Material Dashboard 2 + + + + + + + + + {action && + (action.type === "internal" ? ( + + + {action.label} + + + ) : ( + + + {action.label} + + + ))} + + {mobileNavbar ? "close" : "menu"} + + + {mobileView && } + + ); +} + +// Setting default values for the props of DefaultNavbar +DefaultNavbar.defaultProps = { + transparent: false, + light: false, + action: false, +}; + +// Typechecking props for the DefaultNavbar +DefaultNavbar.propTypes = { + transparent: PropTypes.bool, + light: PropTypes.bool, + action: PropTypes.oneOfType([ + PropTypes.bool, + PropTypes.shape({ + type: PropTypes.oneOf(["external", "internal"]).isRequired, + route: PropTypes.string.isRequired, + color: PropTypes.oneOf([ + "primary", + "secondary", + "info", + "success", + "warning", + "error", + "dark", + "light", + ]), + label: PropTypes.string.isRequired, + }), + ]), +}; + +export default DefaultNavbar; diff --git a/src/examples/Dashboard/Sidenav/SidenavCollapse.js b/src/examples/Dashboard/Sidenav/SidenavCollapse.js new file mode 100644 index 000000000..33f7e03ed --- /dev/null +++ b/src/examples/Dashboard/Sidenav/SidenavCollapse.js @@ -0,0 +1,97 @@ +/** +========================================================= +* Material Dashboard 2 React - v2.2.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// prop-types is a library for typechecking of props. +import PropTypes from "prop-types"; + +// @mui material components +import ListItem from "@mui/material/ListItem"; +import ListItemIcon from "@mui/material/ListItemIcon"; +import ListItemText from "@mui/material/ListItemText"; +import Icon from "@mui/material/Icon"; + +// Material Dashboard 2 React components +import MDBox from "components/MDBox"; + +// Custom styles for the SidenavCollapse +import { + collapseItem, + collapseIconBox, + collapseIcon, + collapseText, +} from "examples/Sidenav/styles/sidenavCollapse"; + +// Material Dashboard 2 React context +import { useMaterialUIController } from "context"; + +function SidenavCollapse({ icon, name, active, ...rest }) { + const [controller] = useMaterialUIController(); + const { miniSidenav, transparentSidenav, whiteSidenav, darkMode, sidenavColor } = controller; + + return ( + + + collapseItem(theme, { + active, + transparentSidenav, + whiteSidenav, + darkMode, + sidenavColor, + }) + } + > + + collapseIconBox(theme, { transparentSidenav, whiteSidenav, darkMode, active }) + } + > + {typeof icon === "string" ? ( + collapseIcon(theme, { active })}>{icon} + ) : ( + icon + )} + + + + collapseText(theme, { + miniSidenav, + transparentSidenav, + whiteSidenav, + active, + }) + } + /> + + + ); +} + +// Setting default values for the props of SidenavCollapse +SidenavCollapse.defaultProps = { + active: false, +}; + +// Typechecking props for the SidenavCollapse +SidenavCollapse.propTypes = { + icon: PropTypes.node.isRequired, + name: PropTypes.string.isRequired, + active: PropTypes.bool, +}; + +export default SidenavCollapse; diff --git a/src/examples/Dashboard/Sidenav/SidenavRoot.js b/src/examples/Dashboard/Sidenav/SidenavRoot.js new file mode 100644 index 000000000..e3f63ea97 --- /dev/null +++ b/src/examples/Dashboard/Sidenav/SidenavRoot.js @@ -0,0 +1,92 @@ +/** +========================================================= +* Material Dashboard 2 React - v2.2.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// @mui material components +import Drawer from "@mui/material/Drawer"; +import { styled } from "@mui/material/styles"; + +export default styled(Drawer)(({ theme, ownerState }) => { + const { palette, boxShadows, transitions, breakpoints, functions } = theme; + const { transparentSidenav, whiteSidenav, miniSidenav, darkMode } = ownerState; + + const sidebarWidth = 250; + const { transparent, gradients, white, background } = palette; + const { xxl } = boxShadows; + const { pxToRem, linearGradient } = functions; + + let backgroundValue = darkMode + ? background.sidenav + : linearGradient(gradients.dark.main, gradients.dark.state); + + if (transparentSidenav) { + backgroundValue = transparent.main; + } else if (whiteSidenav) { + backgroundValue = white.main; + } + + // styles for the sidenav when miniSidenav={false} + const drawerOpenStyles = () => ({ + background: backgroundValue, + transform: "translateX(0)", + transition: transitions.create("transform", { + easing: transitions.easing.sharp, + duration: transitions.duration.shorter, + }), + + [breakpoints.up("xl")]: { + boxShadow: transparentSidenav ? "none" : xxl, + marginBottom: transparentSidenav ? 0 : "inherit", + left: "0", + width: sidebarWidth, + transform: "translateX(0)", + transition: transitions.create(["width", "background-color"], { + easing: transitions.easing.sharp, + duration: transitions.duration.enteringScreen, + }), + }, + }); + + // styles for the sidenav when miniSidenav={true} + const drawerCloseStyles = () => ({ + background: backgroundValue, + transform: `translateX(${pxToRem(-320)})`, + transition: transitions.create("transform", { + easing: transitions.easing.sharp, + duration: transitions.duration.shorter, + }), + + [breakpoints.up("xl")]: { + boxShadow: transparentSidenav ? "none" : xxl, + marginBottom: transparentSidenav ? 0 : "inherit", + left: "0", + width: pxToRem(96), + overflowX: "hidden", + transform: "translateX(0)", + transition: transitions.create(["width", "background-color"], { + easing: transitions.easing.sharp, + duration: transitions.duration.shorter, + }), + }, + }); + + return { + "& .MuiDrawer-paper": { + boxShadow: xxl, + border: "none", + + ...(miniSidenav ? drawerCloseStyles() : drawerOpenStyles()), + }, + }; +}); diff --git a/src/examples/Dashboard/Sidenav/index.js b/src/examples/Dashboard/Sidenav/index.js new file mode 100644 index 000000000..5efd2d2c7 --- /dev/null +++ b/src/examples/Dashboard/Sidenav/index.js @@ -0,0 +1,213 @@ +/** +========================================================= +* Material Dashboard 2 React - v2.2.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +import { useEffect } from "react"; + +// react-router-dom components +import { useLocation, NavLink } from "react-router-dom"; + +// prop-types is a library for typechecking of props. +import PropTypes from "prop-types"; + +// @mui material components +import List from "@mui/material/List"; +import Divider from "@mui/material/Divider"; +import Link from "@mui/material/Link"; +import Icon from "@mui/material/Icon"; + +// Material Dashboard 2 React components +import MDBox from "components/MDBox"; +import MDTypography from "components/MDTypography"; +import MDButton from "components/MDButton"; + +// Material Dashboard 2 React example components +import SidenavCollapse from "examples/Sidenav/SidenavCollapse"; + +// Custom styles for the Sidenav +import SidenavRoot from "examples/Sidenav/SidenavRoot"; +import sidenavLogoLabel from "examples/Sidenav/styles/sidenav"; + +// Material Dashboard 2 React context +import { + useMaterialUIController, + setMiniSidenav, + setTransparentSidenav, + setWhiteSidenav, +} from "context"; + +function Sidenav({ color, brand, brandName, routes, ...rest }) { + const [controller, dispatch] = useMaterialUIController(); + const { miniSidenav, transparentSidenav, whiteSidenav, darkMode, sidenavColor } = controller; + const location = useLocation(); + const collapseName = location.pathname.replace("/", ""); + + let textColor = "white"; + + if (transparentSidenav || (whiteSidenav && !darkMode)) { + textColor = "dark"; + } else if (whiteSidenav && darkMode) { + textColor = "inherit"; + } + + const closeSidenav = () => setMiniSidenav(dispatch, true); + + useEffect(() => { + // A function that sets the mini state of the sidenav. + function handleMiniSidenav() { + setMiniSidenav(dispatch, window.innerWidth < 1200); + setTransparentSidenav(dispatch, window.innerWidth < 1200 ? false : transparentSidenav); + setWhiteSidenav(dispatch, window.innerWidth < 1200 ? false : whiteSidenav); + } + + /** + The event listener that's calling the handleMiniSidenav function when resizing the window. + */ + window.addEventListener("resize", handleMiniSidenav); + + // Call the handleMiniSidenav function to set the state with the initial value. + handleMiniSidenav(); + + // Remove event listener on cleanup + return () => window.removeEventListener("resize", handleMiniSidenav); + }, [dispatch, location]); + + // Render all the routes from the routes.js (All the visible items on the Sidenav) + const renderRoutes = routes.map(({ type, name, icon, title, noCollapse, key, href, route }) => { + let returnValue; + + if (type === "collapse") { + returnValue = href ? ( + + + + ) : ( + + + + ); + } else if (type === "title") { + returnValue = ( + + {title} + + ); + } else if (type === "divider") { + returnValue = ( + + ); + } + + return returnValue; + }); + + return ( + + + + + close + + + + {brand && } + sidenavLogoLabel(theme, { miniSidenav })} + > + + {brandName} + + + + + + {renderRoutes} + + + upgrade to pro + + + + ); +} + +// Setting default values for the props of Sidenav +Sidenav.defaultProps = { + color: "info", + brand: "", +}; + +// Typechecking props for the Sidenav +Sidenav.propTypes = { + color: PropTypes.oneOf(["primary", "secondary", "info", "success", "warning", "error", "dark"]), + brand: PropTypes.string, + brandName: PropTypes.string.isRequired, + routes: PropTypes.arrayOf(PropTypes.object).isRequired, +}; + +export default Sidenav; diff --git a/src/examples/Dashboard/Sidenav/styles/sidenav.js b/src/examples/Dashboard/Sidenav/styles/sidenav.js new file mode 100644 index 000000000..6133f8c9a --- /dev/null +++ b/src/examples/Dashboard/Sidenav/styles/sidenav.js @@ -0,0 +1,35 @@ +/** +========================================================= +* Material Dashboard 2 React - v2.2.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +export default function sidenavLogoLabel(theme, ownerState) { + const { functions, transitions, typography, breakpoints } = theme; + const { miniSidenav } = ownerState; + + const { pxToRem } = functions; + const { fontWeightMedium } = typography; + + return { + ml: 0.5, + fontWeight: fontWeightMedium, + wordSpacing: pxToRem(-1), + transition: transitions.create("opacity", { + easing: transitions.easing.easeInOut, + duration: transitions.duration.standard, + }), + + [breakpoints.up("xl")]: { + opacity: miniSidenav ? 0 : 1, + }, + }; +} diff --git a/src/examples/Dashboard/Sidenav/styles/sidenavCollapse.js b/src/examples/Dashboard/Sidenav/styles/sidenavCollapse.js new file mode 100644 index 000000000..62b5be0e4 --- /dev/null +++ b/src/examples/Dashboard/Sidenav/styles/sidenavCollapse.js @@ -0,0 +1,127 @@ +/** +========================================================= +* Material Dashboard 2 React - v2.2.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +function collapseItem(theme, ownerState) { + const { palette, transitions, breakpoints, boxShadows, borders, functions } = theme; + const { active, transparentSidenav, whiteSidenav, darkMode, sidenavColor } = ownerState; + + const { white, transparent, dark, grey, gradients } = palette; + const { md } = boxShadows; + const { borderRadius } = borders; + const { pxToRem, rgba, linearGradient } = functions; + + return { + background: active + ? linearGradient(gradients[sidenavColor].main, gradients[sidenavColor].state) + : transparent.main, + color: + (transparentSidenav && !darkMode && !active) || (whiteSidenav && !active) + ? dark.main + : white.main, + display: "flex", + alignItems: "center", + width: "100%", + padding: `${pxToRem(8)} ${pxToRem(10)}`, + margin: `${pxToRem(1.5)} ${pxToRem(16)}`, + borderRadius: borderRadius.md, + cursor: "pointer", + userSelect: "none", + whiteSpace: "nowrap", + boxShadow: active && !whiteSidenav && !darkMode && !transparentSidenav ? md : "none", + [breakpoints.up("xl")]: { + transition: transitions.create(["box-shadow", "background-color"], { + easing: transitions.easing.easeInOut, + duration: transitions.duration.shorter, + }), + }, + + "&:hover, &:focus": { + backgroundColor: () => { + let backgroundValue; + + if (!active) { + backgroundValue = + transparentSidenav && !darkMode + ? grey[300] + : rgba(whiteSidenav ? grey[400] : white.main, 0.2); + } + + return backgroundValue; + }, + }, + }; +} + +function collapseIconBox(theme, ownerState) { + const { palette, transitions, borders, functions } = theme; + const { transparentSidenav, whiteSidenav, darkMode, active } = ownerState; + + const { white, dark } = palette; + const { borderRadius } = borders; + const { pxToRem } = functions; + + return { + minWidth: pxToRem(32), + minHeight: pxToRem(32), + color: + (transparentSidenav && !darkMode && !active) || (whiteSidenav && !active) + ? dark.main + : white.main, + borderRadius: borderRadius.md, + display: "grid", + placeItems: "center", + transition: transitions.create("margin", { + easing: transitions.easing.easeInOut, + duration: transitions.duration.standard, + }), + + "& svg, svg g": { + color: transparentSidenav || whiteSidenav ? dark.main : white.main, + }, + }; +} + +const collapseIcon = ({ palette: { white, gradients } }, { active }) => ({ + color: active ? white.main : gradients.dark.state, +}); + +function collapseText(theme, ownerState) { + const { typography, transitions, breakpoints, functions } = theme; + const { miniSidenav, transparentSidenav, active } = ownerState; + + const { size, fontWeightRegular, fontWeightLight } = typography; + const { pxToRem } = functions; + + return { + marginLeft: pxToRem(10), + + [breakpoints.up("xl")]: { + opacity: miniSidenav || (miniSidenav && transparentSidenav) ? 0 : 1, + maxWidth: miniSidenav || (miniSidenav && transparentSidenav) ? 0 : "100%", + marginLeft: miniSidenav || (miniSidenav && transparentSidenav) ? 0 : pxToRem(10), + transition: transitions.create(["opacity", "margin"], { + easing: transitions.easing.easeInOut, + duration: transitions.duration.standard, + }), + }, + + "& span": { + fontWeight: active ? fontWeightRegular : fontWeightLight, + fontSize: size.sm, + lineHeight: 0, + }, + }; +} + +export { collapseItem, collapseIconBox, collapseIcon, collapseText }; diff --git a/src/examples/Dashboard/Tables/DataTable/DataTableBodyCell.js b/src/examples/Dashboard/Tables/DataTable/DataTableBodyCell.js new file mode 100644 index 000000000..5316906b9 --- /dev/null +++ b/src/examples/Dashboard/Tables/DataTable/DataTableBodyCell.js @@ -0,0 +1,59 @@ +/** +========================================================= +* Material Dashboard 2 React - v2.2.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// prop-types is a library for typechecking of props +import PropTypes from "prop-types"; + +// Material Dashboard 2 React components +import MDBox from "components/MDBox"; + +function DataTableBodyCell({ noBorder, align, children }) { + return ( + ({ + fontSize: size.sm, + borderBottom: noBorder ? "none" : `${borderWidth[1]} solid ${light.main}`, + })} + > + + {children} + + + ); +} + +// Setting default values for the props of DataTableBodyCell +DataTableBodyCell.defaultProps = { + noBorder: false, + align: "left", +}; + +// Typechecking props for the DataTableBodyCell +DataTableBodyCell.propTypes = { + children: PropTypes.node.isRequired, + noBorder: PropTypes.bool, + align: PropTypes.oneOf(["left", "right", "center"]), +}; + +export default DataTableBodyCell; diff --git a/src/examples/Dashboard/Tables/DataTable/DataTableHeadCell.js b/src/examples/Dashboard/Tables/DataTable/DataTableHeadCell.js new file mode 100644 index 000000000..d339bcb55 --- /dev/null +++ b/src/examples/Dashboard/Tables/DataTable/DataTableHeadCell.js @@ -0,0 +1,105 @@ +/** +========================================================= +* Material Dashboard 2 React - v2.2.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// prop-types is a library for typechecking of props +import PropTypes from "prop-types"; + +// @mui material components +import Icon from "@mui/material/Icon"; + +// Material Dashboard 2 React components +import MDBox from "components/MDBox"; + +// Material Dashboard 2 React contexts +import { useMaterialUIController } from "context"; + +function DataTableHeadCell({ width, children, sorted, align, ...rest }) { + const [controller] = useMaterialUIController(); + const { darkMode } = controller; + + return ( + ({ + borderBottom: `${borderWidth[1]} solid ${light.main}`, + })} + > + ({ + fontSize: size.xxs, + fontWeight: fontWeightBold, + textTransform: "uppercase", + cursor: sorted && "pointer", + userSelect: sorted && "none", + })} + > + {children} + {sorted && ( + ({ + fontSize: size.lg, + })} + > + + arrow_drop_up + + + arrow_drop_down + + + )} + + + ); +} + +// Setting default values for the props of DataTableHeadCell +DataTableHeadCell.defaultProps = { + width: "auto", + sorted: "none", + align: "left", +}; + +// Typechecking props for the DataTableHeadCell +DataTableHeadCell.propTypes = { + width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), + children: PropTypes.node.isRequired, + sorted: PropTypes.oneOf([false, "none", "asce", "desc"]), + align: PropTypes.oneOf(["left", "right", "center"]), +}; + +export default DataTableHeadCell; diff --git a/src/examples/Dashboard/Tables/DataTable/index.js b/src/examples/Dashboard/Tables/DataTable/index.js new file mode 100644 index 000000000..47e179360 --- /dev/null +++ b/src/examples/Dashboard/Tables/DataTable/index.js @@ -0,0 +1,311 @@ +/** +========================================================= +* Material Dashboard 2 React - v2.2.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +import { useMemo, useEffect, useState } from "react"; + +// prop-types is a library for typechecking of props +import PropTypes from "prop-types"; + +// react-table components +import { useTable, usePagination, useGlobalFilter, useAsyncDebounce, useSortBy } from "react-table"; + +// @mui material components +import Table from "@mui/material/Table"; +import TableBody from "@mui/material/TableBody"; +import TableContainer from "@mui/material/TableContainer"; +import TableRow from "@mui/material/TableRow"; +import Icon from "@mui/material/Icon"; +import Autocomplete from "@mui/material/Autocomplete"; + +// Material Dashboard 2 React components +import MDBox from "components/MDBox"; +import MDTypography from "components/MDTypography"; +import MDInput from "components/MDInput"; +import MDPagination from "components/MDPagination"; + +// Material Dashboard 2 React example components +import DataTableHeadCell from "examples/Tables/DataTable/DataTableHeadCell"; +import DataTableBodyCell from "examples/Tables/DataTable/DataTableBodyCell"; + +function DataTable({ + entriesPerPage, + canSearch, + showTotalEntries, + table, + pagination, + isSorted, + noEndBorder, +}) { + const defaultValue = entriesPerPage.defaultValue ? entriesPerPage.defaultValue : 10; + const entries = entriesPerPage.entries + ? entriesPerPage.entries.map((el) => el.toString()) + : ["5", "10", "15", "20", "25"]; + const columns = useMemo(() => table.columns, [table]); + const data = useMemo(() => table.rows, [table]); + + const tableInstance = useTable( + { columns, data, initialState: { pageIndex: 0 } }, + useGlobalFilter, + useSortBy, + usePagination + ); + + const { + getTableProps, + getTableBodyProps, + headerGroups, + prepareRow, + rows, + page, + pageOptions, + canPreviousPage, + canNextPage, + gotoPage, + nextPage, + previousPage, + setPageSize, + setGlobalFilter, + state: { pageIndex, pageSize, globalFilter }, + } = tableInstance; + + // Set the default value for the entries per page when component mounts + useEffect(() => setPageSize(defaultValue || 10), [defaultValue]); + + // Set the entries per page value based on the select value + const setEntriesPerPage = (value) => setPageSize(value); + + // Render the paginations + const renderPagination = pageOptions.map((option) => ( + gotoPage(Number(option))} + active={pageIndex === option} + > + {option + 1} + + )); + + // Handler for the input to set the pagination index + const handleInputPagination = ({ target: { value } }) => + value > pageOptions.length || value < 0 ? gotoPage(0) : gotoPage(Number(value)); + + // Customized page options starting from 1 + const customizedPageOptions = pageOptions.map((option) => option + 1); + + // Setting value for the pagination input + const handleInputPaginationValue = ({ target: value }) => gotoPage(Number(value.value - 1)); + + // Search input value state + const [search, setSearch] = useState(globalFilter); + + // Search input state handle + const onSearchChange = useAsyncDebounce((value) => { + setGlobalFilter(value || undefined); + }, 100); + + // A function that sets the sorted value for the table + const setSortedValue = (column) => { + let sortedValue; + + if (isSorted && column.isSorted) { + sortedValue = column.isSortedDesc ? "desc" : "asce"; + } else if (isSorted) { + sortedValue = "none"; + } else { + sortedValue = false; + } + + return sortedValue; + }; + + // Setting the entries starting point + const entriesStart = pageIndex === 0 ? pageIndex + 1 : pageIndex * pageSize + 1; + + // Setting the entries ending point + let entriesEnd; + + if (pageIndex === 0) { + entriesEnd = pageSize; + } else if (pageIndex === pageOptions.length - 1) { + entriesEnd = rows.length; + } else { + entriesEnd = pageSize * (pageIndex + 1); + } + + return ( + + {entriesPerPage || canSearch ? ( + + {entriesPerPage && ( + + { + setEntriesPerPage(parseInt(newValue, 10)); + }} + size="small" + sx={{ width: "5rem" }} + renderInput={(params) => } + /> + +   entries per page + + + )} + {canSearch && ( + + { + setSearch(search); + onSearchChange(currentTarget.value); + }} + /> + + )} + + ) : null} + + + {headerGroups.map((headerGroup, key) => ( + + {headerGroup.headers.map((column, idx) => ( + + {column.render("Header")} + + ))} + + ))} + + + {page.map((row, key) => { + prepareRow(row); + return ( + + {row.cells.map((cell, idx) => ( + + {cell.render("Cell")} + + ))} + + ); + })} + +
+ + + {showTotalEntries && ( + + + Showing {entriesStart} to {entriesEnd} of {rows.length} entries + + + )} + {pageOptions.length > 1 && ( + + {canPreviousPage && ( + previousPage()}> + chevron_left + + )} + {renderPagination.length > 6 ? ( + + + + ) : ( + renderPagination + )} + {canNextPage && ( + nextPage()}> + chevron_right + + )} + + )} + + + ); +} + +// Setting default values for the props of DataTable +DataTable.defaultProps = { + entriesPerPage: { defaultValue: 10, entries: [5, 10, 15, 20, 25] }, + canSearch: false, + showTotalEntries: true, + pagination: { variant: "gradient", color: "info" }, + isSorted: true, + noEndBorder: false, +}; + +// Typechecking props for the DataTable +DataTable.propTypes = { + entriesPerPage: PropTypes.oneOfType([ + PropTypes.shape({ + defaultValue: PropTypes.number, + entries: PropTypes.arrayOf(PropTypes.number), + }), + PropTypes.bool, + ]), + canSearch: PropTypes.bool, + showTotalEntries: PropTypes.bool, + table: PropTypes.objectOf(PropTypes.array).isRequired, + pagination: PropTypes.shape({ + variant: PropTypes.oneOf(["contained", "gradient"]), + color: PropTypes.oneOf([ + "primary", + "secondary", + "info", + "success", + "warning", + "error", + "dark", + "light", + ]), + }), + isSorted: PropTypes.bool, + noEndBorder: PropTypes.bool, +}; + +export default DataTable; diff --git a/src/examples/Dashboard/Timeline/TimelineItem/index.js b/src/examples/Dashboard/Timeline/TimelineItem/index.js new file mode 100644 index 000000000..901047a5a --- /dev/null +++ b/src/examples/Dashboard/Timeline/TimelineItem/index.js @@ -0,0 +1,101 @@ +/** +========================================================= +* Material Dashboard 2 React - v2.2.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// prop-types is a library for typechecking of props +import PropTypes from "prop-types"; + +// @mui material components +import Icon from "@mui/material/Icon"; + +// Material Dashboard 2 React components +import MDBox from "components/MDBox"; +import MDTypography from "components/MDTypography"; + +// Timeline context +import { useTimeline } from "examples/Dashboard/Timeline/context"; + +// Custom styles for the TimelineItem +import timelineItem from "examples/Dashboard/Timeline/TimelineItem/styles"; + +function TimelineItem({ color, icon, title, dateTime, description, lastItem }) { + const isDark = useTimeline(); + + return ( + timelineItem(theme, { lastItem, isDark })}> + size.sm }} + > + {icon} + + + + {title} + + + + {dateTime} + + + + {description ? ( + + {description} + + ) : null} + + + + ); +} + +// Setting default values for the props of TimelineItem +TimelineItem.defaultProps = { + color: "info", + lastItem: false, + description: "", +}; + +// Typechecking props for the TimelineItem +TimelineItem.propTypes = { + color: PropTypes.oneOf([ + "primary", + "secondary", + "info", + "success", + "warning", + "error", + "dark", + "light", + ]), + icon: PropTypes.node.isRequired, + title: PropTypes.string.isRequired, + dateTime: PropTypes.string.isRequired, + description: PropTypes.string, + lastItem: PropTypes.bool, +}; + +export default TimelineItem; diff --git a/src/examples/Dashboard/Timeline/TimelineItem/styles.js b/src/examples/Dashboard/Timeline/TimelineItem/styles.js new file mode 100644 index 000000000..fc65c69d1 --- /dev/null +++ b/src/examples/Dashboard/Timeline/TimelineItem/styles.js @@ -0,0 +1,20 @@ +function timelineItem(theme, ownerState) { + const { borders } = theme; + const { lastItem, isDark } = ownerState; + + const { borderWidth, borderColor } = borders; + + return { + "&:after": { + content: !lastItem && "''", + position: "absolute", + top: "2rem", + left: "17px", + height: "100%", + opacity: isDark ? 0.1 : 1, + borderRight: `${borderWidth[2]} solid ${borderColor}`, + }, + }; +} + +export default timelineItem; diff --git a/src/examples/Dashboard/Timeline/TimelineList/index.js b/src/examples/Dashboard/Timeline/TimelineList/index.js new file mode 100644 index 000000000..d6850c957 --- /dev/null +++ b/src/examples/Dashboard/Timeline/TimelineList/index.js @@ -0,0 +1,69 @@ +/** +========================================================= +* Material Dashboard 2 React - v2.2.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// prop-types is a library for typechecking of props +import PropTypes from "prop-types"; + +// @mui material components +import Card from "@mui/material/Card"; + +// Material Dashboard 2 React components +import MDBox from "components/MDBox"; +import MDTypography from "components/MDTypography"; + +// Material Dashboard 2 React components +import { useMaterialUIController } from "context"; + +// Timeline context +import { TimelineProvider } from "examples/Timeline/context"; + +function TimelineList({ title, dark, children }) { + const [controller] = useMaterialUIController(); + const { darkMode } = controller; + + return ( + + + darkMode && background.card }} + > + + + {title} + + + {children} + + + + ); +} + +// Setting default values for the props of TimelineList +TimelineList.defaultProps = { + dark: false, +}; + +// Typechecking props for the TimelineList +TimelineList.propTypes = { + title: PropTypes.string.isRequired, + dark: PropTypes.bool, + children: PropTypes.node.isRequired, +}; + +export default TimelineList; diff --git a/src/examples/Dashboard/Timeline/context/index.js b/src/examples/Dashboard/Timeline/context/index.js new file mode 100644 index 000000000..89d1ca646 --- /dev/null +++ b/src/examples/Dashboard/Timeline/context/index.js @@ -0,0 +1,37 @@ +/** +========================================================= +* Material Dashboard 2 React - v2.2.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +/* eslint-disable react/prop-types */ +/** + This file is used for controlling the dark and light state of the TimelineList and TimelineItem. +*/ + +import { createContext, useContext } from "react"; + +// The Timeline main context +const Timeline = createContext(); + +// Timeline context provider +function TimelineProvider({ children, value }) { + return {children}; +} + +// Timeline custom hook for using context +function useTimeline() { + return useContext(Timeline); +} + +export { TimelineProvider, useTimeline }; +/* eslint-enable react/prop-types */ diff --git a/src/examples/Navbars/DefaultNavbar/index.js b/src/examples/Navbars/DefaultNavbar/index.js index 93eeaa650..699005af4 100644 --- a/src/examples/Navbars/DefaultNavbar/index.js +++ b/src/examples/Navbars/DefaultNavbar/index.js @@ -551,7 +551,7 @@ function DefaultNavbar({ brand, routes, transparent, light, action, sticky, rela // Setting default values for the props of DefaultNavbar DefaultNavbar.defaultProps = { - brand: "Material Kit 2", + brand: "Affiliate", transparent: false, light: false, action: false, diff --git a/src/index.js b/src/index.js index 9b4a5331d..2e962953d 100644 --- a/src/index.js +++ b/src/index.js @@ -17,6 +17,7 @@ import React from "react"; import * as ReactDOMClient from "react-dom/client"; import { BrowserRouter } from "react-router-dom"; import App from "App"; +import { MaterialUIControllerProvider } from "context"; const container = document.getElementById("root"); @@ -25,6 +26,8 @@ const root = ReactDOMClient.createRoot(container); root.render( - + + + ); diff --git a/src/layouts/authentication/components/BasicLayout/index.js b/src/layouts/authentication/components/BasicLayout/index.js new file mode 100644 index 000000000..140b00b05 --- /dev/null +++ b/src/layouts/authentication/components/BasicLayout/index.js @@ -0,0 +1,77 @@ +/** +========================================================= +* Material Dashboard 2 React - v2.2.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-react +* Copyright 2023 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// prop-types is a library for typechecking of props +import PropTypes from "prop-types"; + +// @mui material components +import Grid from "@mui/material/Grid"; + +// Material Dashboard 2 React components +import MDBox from "components/MDBox"; + +// Material Dashboard 2 React example components +import DefaultNavbar from "examples/Navbars/DefaultNavbar"; +import PageLayout from "examples/LayoutContainers/PageLayout"; + +// Authentication pages components +import Footer from "layouts/authentication/components/Footer"; + +function BasicLayout({ image, children }) { + return ( + + + + image && + `${linearGradient( + rgba(gradients.dark.main, 0.6), + rgba(gradients.dark.state, 0.6) + )}, url(${image})`, + backgroundSize: "cover", + backgroundPosition: "center", + backgroundRepeat: "no-repeat", + }} + /> + + + + {children} + + + +